/* ============================================================
   SWIPMEDIA — Composants de sections
   ============================================================ */

/* ============================================================
   HERO — halos roses animés + grande phrase éditoriale
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
/* --- Aurora roses --- */
.hero-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-aurora .blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:var(--bo,.6);
  background:var(--c,var(--pink));
  animation:blobDrift var(--d,42s) var(--ease-2) infinite alternate;
  will-change:transform;
}
.hero-aurora .b1{width:clamp(240px,28vw,440px);height:clamp(180px,20vw,320px);top:2%;left:2%;--c:var(--pink);--bo:.30}
.hero-aurora .b2{width:clamp(200px,24vw,380px);height:clamp(220px,26vw,420px);top:-4%;left:40%;--c:#ff5cc8;--bo:.24;--d:50s}
.hero-aurora .b3{width:clamp(220px,26vw,420px);height:clamp(180px,20vw,320px);top:6%;right:2%;--c:#c14bff;--bo:.22;--d:46s}
.hero-aurora .b4{width:clamp(180px,20vw,320px);height:clamp(240px,28vw,440px);top:34%;left:-4%;--c:#ff7ad1;--bo:.20;--d:54s}
.hero-aurora .b5{width:clamp(240px,28vw,440px);height:clamp(160px,18vw,280px);bottom:4%;left:30%;--c:var(--pink);--bo:.22;--d:48s}
.hero-aurora .b6{width:clamp(200px,24vw,360px);height:clamp(200px,24vw,360px);bottom:0%;right:8%;--c:#ff5cc8;--bo:.26;--d:52s}
@keyframes blobDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3%,-4%) scale(1.08)}
  100%{transform:translate(-3%,3%) scale(.96)}
}
/* voile pour préserver la lisibilité éditoriale */
.hero-aurora::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, color-mix(in srgb,var(--bg) 35%, transparent), var(--bg) 78%);
}
.theme-dark .hero-aurora .blob{filter:blur(70px)}
@media (prefers-reduced-motion:reduce){.hero-aurora .blob{animation:none}}

.hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:clamp(110px,15vh,158px) var(--pad-x) clamp(60px,8vh,100px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;
}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;gap:40px}}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
@media (max-width:900px){.hero-text{align-items:center;text-align:center}}
.hero h1{
  font-size:clamp(31px,4vw,58px);line-height:1.14;letter-spacing:-0.02em;text-wrap:balance;
  max-width:16ch;
}
.hero h1 .em{white-space:nowrap}
.hero-text p{margin-top:clamp(16px,2vh,22px);font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);color:var(--text-soft);max-width:44ch;line-height:1.7}
@media (max-width:900px){.hero-text p{max-width:54ch}}
.hero-cta{display:flex;gap:13px;margin-top:clamp(26px,3.4vh,38px);flex-wrap:wrap}
@media (max-width:900px){.hero-cta{justify-content:center}}

/* Badge 3D — au-dessus de la phrase (gauche) */
.hero-badge{width:clamp(58px,6vw,84px);height:auto;margin-bottom:22px;filter:drop-shadow(0 16px 30px rgba(255,0,173,.34));animation:badgeFloat 7s ease-in-out infinite}
@keyframes badgeFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.hero-badge{animation:none}}

/* ============================================================
   VIDÉO DE PRÉSENTATION — cadre vertical 1080×1920 (9:16) dans la hero
   ============================================================ */
.hero-media{display:flex;justify-content:center;align-items:center}
.hero-media .actu-feed{width:100%;max-width:420px}
.launch-frame{
  position:relative;width:min(320px,78vw);aspect-ratio:9/16;border-radius:26px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow);
}
.launch-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#000}
.launch-ph{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:
    radial-gradient(120% 80% at 50% 30%,var(--pink-tint),transparent 60%),
    linear-gradient(160deg,var(--bg-2),var(--surface));
  color:var(--muted);
}
.launch-play{width:64px;height:64px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pink)}
.launch-play svg{width:26px;height:26px;margin-left:3px}
.launch-ph-label{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ============================================================
   VALEURS — 3 variantes (Grille / Cartes / Manifeste) via body[data-valeurs]
   ============================================================ */
.values{overflow:visible}
.center-head{max-width:760px;margin:0 auto;text-align:center}
.center-head .section-title{margin-top:14px}
.vlayout{display:none;margin-top:60px}
body[data-valeurs="grille"] .vlayout-grille{display:block}
body[data-valeurs="cartes"] .vlayout-cartes{display:block}
body[data-valeurs="manifeste"] .vlayout-manifeste{display:block}
body[data-valeurs="pile"] .vlayout-pile{display:block}
/* défaut si aucun attribut */
body:not([data-valeurs]) .vlayout-grille{display:block}

/* Grille — numéros minimalistes */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media (max-width:820px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vgrid{grid-template-columns:1fr}}
.vcell{background:var(--surface);padding:34px 30px;transition:background-color .4s var(--ease)}
.vcell:hover{background:var(--bg-2)}
.vcell .vnum{font-family:var(--black);font-weight:800;font-size:14px;color:var(--pink);letter-spacing:.04em}
.vcell h3{margin-top:14px;font-size:clamp(21px,2.3vw,27px);line-height:1.12;font-weight:600}
.vcell p{margin-top:9px;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--text-soft)}

/* Cartes — surface + icône */
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.vcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vcards{grid-template-columns:1fr}}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.vcard-ic{width:48px;height:48px;border-radius:13px;background:var(--pink-tint);color:var(--pink);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease)}
.vcard-ic svg{width:24px;height:24px}
.vcard:hover .vcard-ic{background:var(--pink);color:#fff;transform:rotate(-6deg) scale(1.08)}
.vcard h3{font-size:clamp(20px,2.2vw,25px);line-height:1.14;font-weight:600;letter-spacing:-0.01em;transition:color .35s var(--ease)}
.vcard:hover h3{color:var(--pink)}
.vcard p{margin-top:10px;font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.6;color:var(--text-soft)}

/* Manifeste — grande phrase avec encadrés roses */
.vmanifeste{
  max-width:18ch;margin:8px auto 0;text-align:center;font-family:var(--display);font-weight:300;
  font-size:clamp(30px,5vw,62px);line-height:1.35;letter-spacing:-0.02em;color:var(--text);
}
.vmanifeste .hl{line-height:1.1}

/* ============================================================
   CONCEPTS — cards
   ============================================================ */
.concepts{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 26%,var(--bg-2) 100%)}
.concepts .section-head{margin:0 auto;text-align:center;max-width:680px}
.concepts .eyebrow{justify-content:center}
.concepts-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;
}
@media (max-width:920px){.concepts-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.concepts-grid{grid-template-columns:1fr}}
.concept-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.concept-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.concept-visual{position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
.concept-visual > image-slot{position:absolute;inset:0;width:100%;height:100%}
.concept-logo-chip{
  position:absolute;left:14px;top:14px;z-index:3;width:122px;height:48px;
  background:rgba(255,255,255,.94);border-radius:11px;padding:7px 11px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;
}
.concept-logo-chip image-slot{width:100%;height:100%;--is-bg:transparent;background:transparent}
.concept-body{padding:24px 26px 28px;display:flex;flex-direction:column}
.concept-tag{
  align-self:flex-start;white-space:nowrap;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink);background:var(--pink-tint);padding:6px 12px;border-radius:999px;margin-bottom:14px;
}
.concept-body h3{font-size:clamp(22px,2.4vw,28px);line-height:1.12;font-weight:600;letter-spacing:-0.01em}
.concept-format{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.concept-format::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none}
.concept-body p{margin-top:12px;font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.65;color:var(--text-soft)}
.concepts-foot{display:flex;justify-content:center;margin-top:52px}

/* ============================================================
   ACTUALITÉ DU WEB — bandeau clair + redirection Insta
   ============================================================ */
.actu{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 52%,var(--bg) 100%)}
.actu .wrap{position:relative;z-index:2;text-align:left}
.actu-aurora{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 83%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 83%,transparent 100%)}
.actu-aurora .blob{position:absolute;border-radius:50%;filter:blur(80px);background:var(--pink);opacity:.28;animation:blobDrift 44s var(--ease-2) infinite alternate}
.actu-aurora .a1{width:40vw;height:30vw;max-width:560px;top:-6%;left:8%}
.actu-aurora .a2{width:34vw;height:34vw;max-width:480px;bottom:-12%;right:10%;background:#c14bff;opacity:.22;animation-duration:52s}
.theme-dark .actu-aurora{opacity:.7}

/* 2 colonnes : feed Insta à gauche, texte à droite */
.actu-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(36px,5vw,76px);align-items:center}
@media (max-width:860px){.actu-grid{grid-template-columns:1fr;gap:clamp(32px,5vw,44px)}}
.actu-feed{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);aspect-ratio:4/5;box-shadow:var(--shadow);max-width:420px}
@media (max-width:860px){.actu-feed{max-width:360px;margin:0 auto;width:100%}}
.actu-feed image-slot{position:absolute;inset:0;width:100%;height:100%}
.actu-feed-fade{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--pink) 16%, transparent) 48%,
    color-mix(in srgb, var(--pink) 48%, transparent) 80%,
    color-mix(in srgb, var(--pink) 72%, transparent) 100%)}
.actu-text{min-width:0}
.actu h2{font-size:clamp(30px,4vw,54px);line-height:1.1;max-width:18ch;text-wrap:balance}
.actu p{margin-top:22px;font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);color:var(--text-soft);max-width:46ch;line-height:1.7}
.actu-cta{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start}
.btn-insta{
  display:inline-flex;align-items:center;gap:11px;padding:16px 32px;border-radius:999px;white-space:nowrap;
  background:var(--pink);color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;box-shadow:var(--shadow-pink);
  transition:transform .4s var(--ease), background-color .35s var(--ease);
}
.btn-insta svg{width:20px;height:20px}
.btn-insta:hover{transform:translateY(-3px);background:var(--pink-2)}

/* ---- Hero : bulles réseaux + compteur d'abonnés (remplace le CTA) ---- */
.hero-socials{display:flex;gap:16px;justify-content:center}
.hero-soc{
  position:relative;width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:#16110F;
  box-shadow:0 12px 30px -12px rgba(20,8,16,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease);
}
.hero-soc svg{width:24px;height:24px}
.hero-soc::before{
  content:"";position:absolute;inset:0;border-radius:50%;padding:2px;
  background:linear-gradient(110deg,var(--pink-2) 0%,var(--pink) 30%,var(--pink-deep) 50%,var(--pink) 70%,var(--pink-2) 100%);
  background-size:200% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
}
.hero-soc:hover{transform:translateY(-4px);color:var(--pink-deep);box-shadow:0 18px 38px -14px rgba(40,0,28,.45)}
.hero-soc:hover::before{opacity:1;animation:vm-borderSlide 5s linear infinite}

.hero-followers{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:13px 32px 15px;border-radius:20px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 46px -24px rgba(20,8,16,.5),inset 0 1px 0 rgba(255,255,255,.55);
}
.hf-num{
  font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,44px);line-height:1.04;letter-spacing:-.02em;
  background:linear-gradient(100deg,#ff2cbb,#c4007e);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-variant-numeric:tabular-nums;
}
.hf-label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(22,17,15,.58)}

@media (prefers-reduced-motion:reduce){.hero-soc:hover::before{animation:none}}

/* ============================================================
   CONTACT — formulaire
   ============================================================ */
.contact .contact-grid{max-width:640px;margin:0 auto}

.contact-form{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-sm);
}
.field{margin-bottom:22px}
.field:last-of-type{margin-bottom:24px}
.field > label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.seg{display:flex;flex-wrap:wrap;gap:9px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--text-soft);white-space:nowrap;
  padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;
  transition:all .3s var(--ease);
}
.seg label:hover{border-color:var(--pink);color:var(--pink)}
.seg input:checked + label{background:var(--pink);border-color:var(--pink);color:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.row{grid-template-columns:1fr}}
.input, .textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:13px;padding:14px 16px;transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-tint)}
.textarea{resize:vertical;min-height:120px;line-height:1.6}
.form-submit{width:100%;justify-content:center;margin-top:4px}
/* confirmation */
.form-success{
  display:none;flex-direction:column;align-items:center;text-align:center;padding:30px 10px;
}
.contact-form.sent .form-fields{display:none}
.contact-form.sent .form-success{display:flex}
.form-success .fs-check{width:64px;height:64px;border-radius:50%;background:var(--pink-tint);color:var(--pink);display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:popIn .5s var(--ease)}
.form-success .fs-check svg{width:30px;height:30px}
@keyframes popIn{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.form-success h3{font-size:26px}
.form-success p{margin-top:10px;font-family:var(--sans);font-size:14.5px;color:var(--text-soft);max-width:34ch;line-height:1.6}

/* ============================================================
   BOUTON + SUR CARTE CONCEPT
   ============================================================ */
.concept-plus{
  position:absolute;right:14px;top:14px;z-index:4;
  width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(255,255,255,.94);color:var(--pink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.concept-plus svg{width:22px;height:22px;transition:transform .5s var(--ease)}
.concept-plus:hover,.concept-plus:focus-visible{background:var(--pink);color:#fff;transform:scale(1.08);outline:none}
.concept-plus:hover svg,.concept-plus:focus-visible svg{transform:rotate(90deg)}

/* ============================================================
   MODALE CONCEPT — pop-up centrée, fond flouté · 3 variantes
   ============================================================ */
.concept-modal{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.concept-modal.open{opacity:1;visibility:visible}
.cm-backdrop{
  position:absolute;inset:0;
  background:color-mix(in srgb, var(--text) 30%, transparent);
  backdrop-filter:blur(7px) saturate(1.05);-webkit-backdrop-filter:blur(7px) saturate(1.05);
}
.cm-dialog{
  position:relative;z-index:1;max-height:88vh;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:visible;display:flex;
  transform:translateY(18px) scale(.97);transition:transform .5s var(--ease);
}
.concept-modal.open .cm-dialog{transform:none}
.cm-content{flex:1 1 auto;min-width:0;overflow-y:auto;padding:clamp(30px,4vw,46px)}
.cm-close{
  position:absolute;right:16px;top:16px;z-index:5;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease);
}
.cm-close:hover{border-color:var(--pink);color:var(--pink);transform:rotate(90deg)}
.cm-close svg{width:18px;height:18px}

/* Visuel (placeholder à remplacer) */
.cm-media{position:relative;flex:none;overflow:hidden;background:var(--bg-2)}
/* coins arrondis internes (dialog en overflow:visible) — layout cote/desktop */
.cm-media{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
.cm-content{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
.cm-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  color:var(--muted);
  background:
    radial-gradient(120% 80% at 50% 30%,var(--pink-tint),transparent 62%),
    repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 11px,var(--surface) 11px,var(--surface) 22px);
}
.cm-ph-ic{width:54px;height:54px;border-radius:15px;background:var(--surface);color:var(--pink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.cm-ph-ic svg{width:26px;height:26px}
.cm-ph-label{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.cm-media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.cm-media.has-media .cm-ph{display:none}

/* Contenu commun */
.cm-head{display:flex;flex-direction:column;align-items:flex-start;padding-right:44px}
.cm-head .cm-tag{margin-bottom:14px}
.cm-dialog h3{font-size:clamp(25px,3.2vw,36px);line-height:1.1;font-weight:600;letter-spacing:-0.01em}
.cm-format{margin-top:10px}
.cm-pitch{
  margin-top:18px;font-family:var(--display);font-weight:300;
  font-size:clamp(18px,2.1vw,23px);line-height:1.4;color:var(--text);
}
.cm-section{margin-top:24px}
.cm-section h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.cm-section p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.7;color:var(--text-soft)}
.cm-extra{
  margin-top:18px;font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.6;color:var(--text);
  background:var(--pink-tint);border-radius:14px;padding:14px 18px;
}
.cm-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.cm-points li{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:14.5px;font-weight:300;color:var(--text-soft)}
.cm-pt-ic{flex:none;width:24px;height:24px;border-radius:7px;background:var(--pink-tint);color:var(--pink);display:flex;align-items:center;justify-content:center;margin-top:1px}
.cm-pt-ic svg{width:14px;height:14px}
.cm-foot{margin-top:30px}
.cm-foot .btn{width:100%;justify-content:center}

/* — Variante TEXTE : compacte, sans visuel — */
.concept-modal[data-variant="texte"] .cm-dialog{width:min(560px,100%)}
.concept-modal[data-variant="texte"] .cm-media,
.concept-modal[data-variant="texte"] .cm-extra{display:none}

/* — Variante CÔTE : rectangle paysage, visuel à gauche — */
.concept-modal[data-variant="cote"] .cm-dialog{width:min(880px,100%)}
.concept-modal[data-variant="cote"] .cm-media{width:42%;align-self:stretch;min-height:340px}
@media (max-width:680px){
  .concept-modal[data-variant="cote"] .cm-dialog{flex-direction:column;width:min(520px,100%);overflow:hidden}
  /* layout empile : media en haut, coins arrondis en haut */
  .concept-modal[data-variant="cote"] .cm-media{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .concept-modal[data-variant="cote"] .cm-content{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
  .concept-modal[data-variant="cote"] .cm-media{width:auto;min-height:0;aspect-ratio:16/10}
}

/* — Variante BANDEAU : visuel en bandeau au-dessus — */
.concept-modal[data-variant="bandeau"] .cm-dialog{flex-direction:column;width:min(600px,100%)}
.concept-modal[data-variant="bandeau"] .cm-media{width:auto;aspect-ratio:16/9}
.concept-modal[data-variant="bandeau"] .cm-head{padding-right:0}

@media (prefers-reduced-motion:reduce){
  .concept-modal,.cm-dialog{transition:none}
  .cm-dialog{transform:none}
}

/* ============================================================
   HIÉRARCHIE DES CONCEPTS — 2 formats phares + formats secondaires
   ============================================================ */
.concepts-featured{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
@media (max-width:760px){.concepts-featured{grid-template-columns:1fr}}
.concept-card--feature .concept-visual{aspect-ratio:16/10}
.concept-card--feature .concept-body{padding:28px 30px 32px}
.concept-card--feature .concept-body h3{font-size:clamp(26px,3vw,34px)}
.concept-card--feature .concept-body p{font-size:15px;margin-top:13px}
.concept-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.concept-badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--pink);padding:6px 12px;border-radius:999px;
}
.concept-meta .concept-tag{margin-bottom:0}

/* Rangée secondaire : cartes compactes (titre + format, détail au clic sur +) */
.concepts-grid{grid-template-columns:repeat(5,1fr);margin-top:22px}
@media (max-width:1040px){.concepts-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.concepts-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.concepts-grid{grid-template-columns:1fr}}
.concept-card--mini .concept-visual{aspect-ratio:1/1}
.concept-card--mini .concept-body{padding:16px 18px 20px}
.concept-card--mini .concept-tag{font-size:10px;padding:5px 10px;margin-bottom:10px}
.concept-card--mini .concept-body h3{font-size:clamp(17px,1.7vw,20px)}
.concept-card--mini .concept-format{font-size:11px;margin-top:6px}
.concept-card--mini .concept-logo-chip{width:92px;height:36px;left:10px;top:10px;padding:6px 9px}
.concept-card--mini .concept-plus{width:38px;height:38px;right:10px;top:10px}
.concept-card--mini .concept-plus svg{width:18px;height:18px}

/* ============================================================
   RYTHME COULEUR — variantes via body[data-rythme]
   ============================================================ */
/* « Respiration » : la section Valeurs devient un bloc sombre éditorial */
body[data-rythme="respiration"] #valeurs{
  background:
    radial-gradient(120% 80% at 82% 8%, color-mix(in srgb,var(--pink) 24%, transparent), transparent 56%),
    linear-gradient(180deg,#17121C,#120E16);
  --surface:rgba(255,255,255,.05);
  --bg-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.13);
  --text:#F7F2F5;
  --text-soft:#C7BEC8;
  --muted:#9C9099;
}

/* « Violet » : la section Actu bascule sur un accent violet */
body[data-rythme="violet"] #actu{
  --pink:#9D4EDD;
  --pink-2:#b46bef;
  --pink-tint:rgba(157,78,221,.12);
  --shadow-pink:0 22px 50px -22px rgba(157,78,221,.45);
}
body[data-rythme="violet"] #actu .actu-aurora .a1{background:#9D4EDD}
body[data-rythme="violet"] #actu .actu-aurora .a2{background:#6A4DE0}


/* ============================================================
   CONCEPTS — carrousel 3D circulaire
   ============================================================ */
.cring-wrap{margin-top:clamp(34px,5vh,62px);position:relative}
.cring-stage{position:relative;height:clamp(360px,52vh,452px);perspective:1500px}
.cring{position:absolute;top:50%;left:50%;
  --cardW:clamp(228px,23vw,284px);--cardH:clamp(392px,54vh,486px);
  width:var(--cardW);height:var(--cardH);
  margin-left:calc(var(--cardW) / -2);margin-top:calc(var(--cardH) / -2);
  transform-style:preserve-3d;transition:none;will-change:transform}
@media (prefers-reduced-motion:reduce){.cring{transition:none}}

.cring-card{position:absolute;top:0;left:0;width:var(--cardW);height:var(--cardH);
  transform:rotateY(calc(var(--i) * var(--step,52deg))) translateZ(var(--radius,360px)) scale(var(--cs,.84));
  backface-visibility:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden;
  background:var(--c,var(--surface));color:#fff;border:none;border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);
  opacity:.3;filter:brightness(.62) blur(1.4px);
  transition:opacity .18s linear,box-shadow .18s linear,filter .18s linear}
.cring-card.is-front{--cs:1;opacity:1;filter:none;box-shadow:0 30px 62px -20px color-mix(in srgb,var(--c) 70%,#000)}
@media (hover:hover){.cring-card:hover{--cs:.93;opacity:.85;filter:brightness(.9)}.cring-card.is-front:hover{--cs:1;opacity:1;filter:none}}

.cring-badge{position:relative;z-index:2;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:12px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.2);padding:7px 13px;border-radius:999px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.cring-emoji{font-size:14px;line-height:1}
.cring-cbody{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;margin-top:auto}
.cring-srtitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cring-logo{position:absolute;inset:0;margin:0;border-radius:inherit;overflow:hidden;z-index:1;pointer-events:none}
.cring-logo image-slot{display:block!important;width:100%!important;height:100%!important}
.cring-logo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,transparent 42%,color-mix(in srgb,var(--c,var(--surface)) 48%,transparent) 66%,color-mix(in srgb,var(--c,var(--surface)) 88%,transparent) 82%,var(--c,var(--surface)) 100%)}
.cring-cbody h3{font-size:clamp(24px,2.5vw,33px);line-height:1.04;font-weight:700;letter-spacing:-0.015em;color:#fff}
.cring-desc{margin-top:11px;font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.88)}
.cring-hint{margin-top:15px;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--c);font-family:var(--sans);font-weight:600;font-size:13.5px;padding:9px 17px;border-radius:999px;
  opacity:0;transform:translateY(7px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cring-hint svg{width:16px;height:16px}
.cring-card.is-front .cring-hint{opacity:1;transform:none}

.cring-arrow{position:absolute;top:calc(50% - clamp(16px,3vh,26px));transform:translateY(-50%);z-index:5;
  width:clamp(44px,5vw,54px);height:clamp(44px,5vw,54px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-sm);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.cring-arrow svg{width:22px;height:22px}
.cring-arrow:hover{background:var(--pink);color:#fff;border-color:transparent;transform:translateY(-50%) scale(1.06)}
.cring-prev{left:clamp(0px,4.6vw,66px)}
.cring-next{right:clamp(0px,4.6vw,66px)}
@media (max-width:560px){.cring-prev{left:-2px}.cring-next{right:-2px}}

.cring-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(18px,3vh,28px)}
.cring-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--line);transition:background-color .35s var(--ease),transform .35s var(--ease)}
.cring-dot.on{background:var(--pink);transform:scale(1.25)}


/* ============================================================
   ÉVÉNEMENTS — mosaïque façon Instagram + modale
   ============================================================ */
/* La section tient sur une hauteur d'écran (desktop) : titre en haut, mosaïque dessous */
.events{
  box-sizing:border-box;
  padding-top:clamp(84px,11vh,118px);padding-bottom:clamp(40px,7vh,76px);
}
.events > .wrap{width:100%}
.events .section-head{flex:none}
/* Mosaïque adaptative : auto-fit remplit toujours la largeur quel que soit le
   nombre de tuiles (1, 3, 12…). Une tuile « vedette » (.feat) sur ~6 prend 2×2
   pour garder le rythme mosaïque ; grid-auto-flow:dense backfille les trous
   qu'elle crée avec les tuiles suivantes. */
.evt-mosaic{
  margin-top:clamp(18px,3vh,34px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  grid-auto-rows:clamp(168px,23vh,240px);
  grid-auto-flow:dense;gap:10px;
}
.evt-tile.feat{grid-column:span 2;grid-row:span 2}
.evt-tile.feat .evt-name{font-size:clamp(20px,2.2vw,28px)}
@media (max-width:760px){
  .evt-mosaic{margin-top:clamp(26px,4vh,42px);
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    grid-auto-rows:clamp(140px,42vw,190px)}
}
.evt-tile{
  position:relative;overflow:hidden;border-radius:16px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.evt-tile image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:0;transition:transform .6s var(--ease)}
.evt-shade{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(180deg,transparent 38%,rgba(8,6,7,.4) 68%,rgba(8,6,7,.86))}
.evt-over{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.evt-tag{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--pink);padding:4px 10px;border-radius:999px}
.evt-name{font-size:clamp(15px,1.5vw,19px);font-weight:600;color:#fff;line-height:1.16;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.evt-plus{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6) rotate(-90deg);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.evt-plus svg{width:18px;height:18px}
@media (hover:hover){
  .evt-tile:hover{box-shadow:var(--shadow-pink)}
  .evt-tile:hover image-slot{transform:scale(1.08)}
  .evt-tile:hover .evt-shade{opacity:1}
  .evt-tile:hover .evt-over{opacity:1;transform:none}
  .evt-tile:hover .evt-plus{opacity:1;transform:none}
}
.evt-tile:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* sur appareils tactiles : on montre toujours le titre */
@media (hover:none){
  .evt-shade{opacity:1}
  .evt-over{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .evt-tile image-slot,.evt-over,.evt-plus,.evt-shade{transition:none}
}
/* visuel cloné de l'événement dans la modale */
.ev-modal .cm-media image-slot{position:absolute;inset:0;width:100%;height:100%}


/* ============================================================
   ENVOI DU FORMULAIRE — animation « média » (avion + confettis)
   ============================================================ */
/* avion en papier qui s'envole du bouton */
.plane-fly{position:absolute;z-index:7;color:var(--pink);pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(255,0,173,.35));
  animation:planeFly 680ms cubic-bezier(.4,0,.2,1) forwards}
.plane-fly svg{width:22px;height:22px;display:block}
@keyframes planeFly{
  0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
  22%{transform:translate(-9px,5px) rotate(-12deg) scale(1.05)}
  100%{transform:translate(155px,-135px) rotate(34deg) scale(.5);opacity:0}
}
.form-submit.is-sending > svg{opacity:0}

/* confettis aux couleurs des filiales */
.confetti-burst{position:absolute;width:0;height:0;pointer-events:none;z-index:6}
.confetti{position:absolute;left:0;top:0;border-radius:2px;will-change:transform,opacity;
  animation:confettiFly var(--dur,1100ms) cubic-bezier(.16,.7,.32,1) forwards}
@keyframes confettiFly{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  14%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}
}

/* halo qui pulse derrière la coche de succès */
.form-success .fs-check{position:relative}
.form-success .fs-check::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--pink);opacity:0;animation:ringPulse .7s var(--ease) .22s}
@keyframes ringPulse{0%{transform:scale(.65);opacity:.55}100%{transform:scale(1.45);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .plane-fly,.confetti,.form-success .fs-check::before{animation:none;display:none}
}

/* ============================================================
   MODAL CONCEPT — prend la couleur de la carte (--cm-c via JS)
   Scopé à #conceptModal pour ne pas toucher la modale Événements
   ============================================================ */
#conceptModal{--cm-c:var(--pink)}
#conceptModal .cm-dialog{background:color-mix(in srgb,var(--cm-c) 6%,var(--surface))}
#conceptModal .cm-media{background:var(--cm-c)}
#conceptModal .cm-ph{color:rgba(255,255,255,.92);background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 60%)}
#conceptModal .cm-ph-ic{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
#conceptModal .cm-close:hover{border-color:var(--cm-c);color:var(--cm-c)}
#conceptModal .cm-tag{color:var(--cm-c);background:color-mix(in srgb,var(--cm-c) 14%,transparent)}
#conceptModal .cm-format::before{background:var(--cm-c)}
#conceptModal .cm-pt-ic{background:color-mix(in srgb,var(--cm-c) 15%,transparent);color:var(--cm-c)}
#conceptModal .cm-extra{background:color-mix(in srgb,var(--cm-c) 12%,transparent)}
#conceptModal .cm-foot .btn-primary{background:var(--cm-c);box-shadow:0 12px 28px -14px var(--cm-c)}
#conceptModal .cm-foot .btn-primary:hover{background:color-mix(in srgb,var(--cm-c) 85%,#000)}

/* Flèches de navigation sur la fiche concept ouverte */
.cm-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:clamp(40px,4vw,50px);height:clamp(40px,4vw,50px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-sm);
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
.cm-nav svg{width:20px;height:20px}
.cm-nav:hover{background:var(--cm-c,var(--brand));color:#fff;transform:translateY(-50%) scale(1.06)}
.cm-nav-prev{left:clamp(-72px,-4.5vw,-56px)}
.cm-nav-next{right:clamp(-72px,-4.5vw,-56px)}
/* Mobile : on masque les fleches, navigation par swipe tactile (voir vm.js) */
@media (max-width:720px){.cm-nav{display:none}}



/* ============================================================
   REEL — morphing continu hero → profil Instagram
   .reel-scene recouvre le hero épinglé dès le chargement (margin-top
   négatif) : le compteur d'abonnés est donc UN SEUL élément, du hero
   jusqu'à la ligne de stats. Il ne disparaît jamais, il rétrécit.
   --rp (0 → 1) est posé sur :root par vm.js.
   ============================================================ */
.reel{
  position:relative;z-index:1;
  margin-top:-100svh;                 /* recouvre le hero épinglé */
  --rp:var(--rpr,0);
  --p-head:clamp(0, calc(var(--rp) / .34), 1);
  --p-chrome:clamp(0, calc((var(--rp) - .22) / .20), 1);
  --p-vid:clamp(0, calc((var(--rp) - .30) / .32), 1);
  --p-side:clamp(0, calc((var(--rp) - .48) / .20), 1);
  --p-out:clamp(0, calc((var(--rp) - .93) / .07), 1);
  --vh:min(68svh, 68vh);
  --vw:calc(var(--vh) * 0.5625);
}
.reel-space{height:540vh}
.reel-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.reel-scene{
  position:absolute;inset:0;
  transform:scale(calc(1 - var(--p-out) * .06)) translateY(calc(var(--p-out) * -6svh));
  opacity:calc(1 - var(--p-out) * .8);
}

/* --- fond : quadrillage « feed » + halos --- */
.reel-grid{
  position:absolute;inset:0;pointer-events:none;opacity:calc(var(--p-chrome) * .85);
  background-image:
    linear-gradient(color-mix(in srgb, var(--pink) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pink) 24%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(78% 72% at 50% 48%, #000 18%, transparent 78%);
          mask-image:radial-gradient(78% 72% at 50% 48%, #000 18%, transparent 78%);
}
.reel-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);
  opacity:calc(var(--p-chrome) * .5)}
.reel-orb.ro1{width:clamp(240px,30vw,460px);aspect-ratio:1.3;left:5%;top:16%;
  background:radial-gradient(circle, color-mix(in srgb, var(--pink) 55%, transparent), transparent 70%)}
.reel-orb.ro2{width:clamp(200px,24vw,380px);aspect-ratio:1;right:4%;bottom:12%;
  background:radial-gradient(circle, color-mix(in srgb, #c14bff 50%, transparent), transparent 70%)}

/* --- accroche du hero : elle s'efface dès les premiers pixels --- */
.reel-scene .hero-kicker{
  position:absolute;left:50%;top:calc(50% - clamp(150px,20svh,205px));z-index:4;
  transform:translate(-50%,-50%) translateY(calc(var(--rp) * -8svh));
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:#fff;
  opacity:calc(1 - clamp(0, calc(var(--rp) / .16), 1));
}
/* --hf-haut est pose par vm.js : c'est le bas du nombre, plus l'ecart exact
   qui separe le surtitre du nombre au-dessus. --hf-repli sert tant que le
   script n'a pas mesure, et si jamais il ne tourne pas. L'ancrage se fait par
   le bord HAUT (translate -50%,0) : la hauteur de l'accroche, qui passe d'une
   a deux lignes selon l'ecran, n'entre alors plus dans le calcul. */
.reel-scene{--hf-repli:calc(50% + clamp(140px,19svh,196px))}
.reel-scene .hf-line{
  position:absolute;left:50%;top:var(--hf-haut,var(--hf-repli));z-index:4;
  transform:translate(-50%,0) translateY(calc(var(--rp) * -8svh));
  font-family:var(--display);font-weight:400;font-size:clamp(17px,2vw,25px);
  letter-spacing:-.01em;line-height:1.3;color:rgba(255,255,255,.92);text-align:center;
  max-width:30ch;text-shadow:0 2px 22px rgba(0,0,0,.55);
  opacity:calc(1 - clamp(0, calc(var(--rp) / .16), 1));
}
.reel-scene .hf-line .em{white-space:nowrap}

/* ============ PROFIL — l'avatar à gauche, le compteur centré ============ */
.ig-profile{
  position:absolute;left:50%;z-index:3;
  top:calc(17% + (1 - var(--p-head)) * 31%);   /* 48% au repos : optiquement centré */
  /* max-content : la grille fait exactement la largeur de ses 3 colonnes.
     Avec deux colonnes latérales identiques, le bloc est alors symétrique
     ET sa colonne centrale tombe pile au centre de l'écran. Une largeur
     fixe laissait la grille calée à gauche dans sa boîte. */
  width:max-content;max-width:94vw;
  /* Le décalage est en POURCENTAGE de la scène (et non en svh) : sur les
     grands écrans, svh et la hauteur réelle de la scène divergeaient et le
     bloc se retrouvait sous le centre. Là, 17% + 33% = 50% pile. */
  transform:translate(-50%,-50%);
}
/* Trois colonnes : logo à gauche · compteur au centre · nom à droite.
   minmax(0,1fr) de chaque côté : les deux colonnes latérales restent
   rigoureusement égales, le compteur ne dérive donc jamais du centre. */
/* Colonnes latérales de largeur FIXE et identique : le compteur reste au
   centre exact de l'écran (indispensable au morphing) ET l'ensemble est
   symétrique — sans cela le nom, plus large que l'avatar, faisait pencher
   le bloc vers la droite. */
.ig-profile{display:grid;
  grid-template-columns:clamp(104px,10vw,132px) auto clamp(104px,10vw,132px);
  align-items:center;column-gap:clamp(10px,1.6vw,22px)}

/* LE compteur : un seul élément, du hero au profil. On interpole la
   taille de police (et non une échelle) — le texte reste net à chaque
   étape et la mise en page suit exactement. */
.reel-scene .hero-followers{
  grid-column:2;display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;
  /* neutralise la carte de verre blanche du hero d'origine */
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.reel-scene .hf-num{
  font-family:var(--black);font-weight:900;line-height:1;white-space:nowrap;
  font-size:calc(20px + (1 - var(--p-head)) * 236px);
  letter-spacing:calc(-.02em - (1 - var(--p-head)) * .02em);
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#ff2cbb,#c4007e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.reel-scene .hf-label{
  font-family:var(--sans);font-weight:600;
  font-size:calc(11px + (1 - var(--p-head)) * 3px);
  letter-spacing:calc(.02em + (1 - var(--p-head)) * .3em);
  text-transform:uppercase;
  color:color-mix(in srgb, var(--muted) calc(var(--p-head) * 100%), rgba(255,255,255,.66));
}
/* spotlight au curseur : actif tant que le compteur est gros (phase hero) */
@media (hover:hover) and (pointer:fine){
  .reel-scene .hf-num{
    background:
      radial-gradient(240px circle at var(--mx,-500px) var(--my,-500px),
        #fff 0%, var(--pink-2) 22%, var(--pink) 44%, transparent 72%),
      linear-gradient(
        color-mix(in srgb, #ff2cbb calc(var(--p-head) * 100%), rgba(255,255,255,.18)),
        color-mix(in srgb, #c4007e calc(var(--p-head) * 100%), rgba(255,255,255,.18)));
    -webkit-background-clip:text;background-clip:text;
  }
}
/* avatar : colonne de gauche, collé au compteur */
.ig-ava{
  grid-column:1;justify-self:end;
  width:clamp(36px,3.6vw,46px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:#1b1119;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--pink) 70%, transparent);
  opacity:var(--p-chrome);
  transform:scale(calc(.6 + var(--p-chrome) * .4));
}
.ig-ava img{width:100%;height:100%;object-fit:cover;display:block}
/* nom du compte : colonne de droite */
.ig-handle{
  grid-column:3;justify-self:start;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--sans);font-size:clamp(11.5px,1.05vw,13.5px);font-weight:700;
  letter-spacing:-.01em;color:var(--text);opacity:var(--p-chrome);
}
.ig-check{width:clamp(13px,1.15vw,15px);height:auto;flex:none;display:block;object-fit:contain}

/* --- la vidéo : 9/16 constant, échelle 0 → 1 depuis le centre --- */
.reel-frame{
  position:absolute;left:50%;top:60%;z-index:2;
  width:var(--vw);height:var(--vh);
  border-radius:clamp(16px,1.8vw,24px);overflow:hidden;background:#14090f;
  border:1px solid color-mix(in srgb, var(--pink) 30%, transparent);
  box-shadow:0 40px 90px -40px rgba(20,6,16,.8), 0 0 0 1px rgba(255,255,255,.05);
  transform:translate(-50%,-50%) scale(var(--p-vid));
  opacity:clamp(0, calc(var(--p-vid) * 3), 1);
}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-sound{
  position:absolute;top:11px;right:11px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.44);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.reel-sound:hover{background:rgba(0,0,0,.62);transform:scale(1.07)}
.reel-sound svg{width:16px;height:16px}
.reel-sound .rs-on{display:none}
.reel-sound.sound-on .rs-on{display:block}
.reel-sound.sound-on .rs-off{display:none}

/* --- réseaux : cercles pleins, colorés, manifestement cliquables --- */
.reel-socials{
  position:absolute;z-index:5;left:calc(50% + var(--vw)/2 + clamp(18px,2.4vw,40px));top:60%;
  display:flex;flex-direction:column;gap:14px;
  transform:translateY(-50%) translateX(calc((1 - var(--p-side)) * 40px));
  opacity:var(--p-side);
}
.reel-socials .hero-soc{
  width:clamp(46px,3.6vw,54px);height:clamp(46px,3.6vw,54px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(140deg,#ff5cc8,var(--pink) 58%,#c14bff);
  color:#fff;border:0;
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--pink) 75%, transparent),
             0 0 0 0 color-mix(in srgb, var(--pink) 45%, transparent);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), filter .32s var(--ease);
}
.reel-socials .hero-soc svg{width:44%;height:44%}
.reel-socials .hero-soc:hover,.reel-socials .hero-soc:focus-visible{
  transform:translateY(-3px) scale(1.09);filter:brightness(1.12);
  box-shadow:0 16px 32px -12px color-mix(in srgb, var(--pink) 85%, transparent),
             0 0 0 7px color-mix(in srgb, var(--pink) 22%, transparent);
}

/* --- réactions : elles arrivent de TOUS les côtés, avec parallaxe --- */
.rf{
  position:absolute;z-index:4;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);
  --pin:clamp(0, calc((var(--rp) - var(--at,.5)) / .18), 1);
  opacity:var(--pin);
  transform:
    translate(calc(var(--fx,0px) * (1 - var(--pin))), calc(var(--fy,0px) * (1 - var(--pin))))
    translate(calc(var(--px,0px) * var(--d,1)), calc(var(--py,0px) * var(--d,1)))
    scale(calc(.68 + var(--pin) * .32))
    rotate(var(--rot,0deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.rf b{font-weight:700}
.rf .rf-ic{display:inline-flex;width:20px;height:20px;color:var(--pink)}
.rf .rf-ic svg{width:100%;height:100%}
.rf-star .rf-ic{color:#F5B93C}
.rf-notif .rf-dot{
  position:absolute;top:-7px;right:-7px;font-style:normal;font-size:10px;font-weight:800;color:#fff;
  background:var(--pink);border-radius:999px;padding:2px 7px;border:2px solid var(--bg);
}
/* haut-gauche · gauche · bas-gauche · haut-droite · droite · bas-droite */
.rf-like {--at:.50;--rot:-7deg;--fx:-150px;--fy:-130px;--d:1.15;
  right:calc(50% + var(--vw)/2 + clamp(44px,4.6vw,86px));top:30%}
.rf-com  {--at:.54;--rot:5deg;--fx:-190px;--fy:0px;--d:.8;
  right:calc(50% + var(--vw)/2 + clamp(44px,4.6vw,86px));top:50%}
.rf-star {--at:.58;--rot:-10deg;--fx:-150px;--fy:140px;--d:1.35;padding:9px;
  right:calc(50% + var(--vw)/2 + clamp(44px,4.6vw,86px));top:70%}
.rf-sub  {--at:.52;--rot:4deg;--fx:150px;--fy:-140px;--d:1.25;
  left:calc(50% + var(--vw)/2 + clamp(124px,10.5vw,178px));top:29%;
  background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:var(--shadow-pink)}
.rf-share{--at:.56;--rot:-4deg;--fx:190px;--fy:0px;--d:.85;
  left:calc(50% + var(--vw)/2 + clamp(124px,10.5vw,178px));top:50%}
.rf-notif{--at:.60;--rot:8deg;--fx:150px;--fy:150px;--d:1.4;padding:10px;
  left:calc(50% + var(--vw)/2 + clamp(124px,10.5vw,178px));top:71%}

/* --- tablette --- */
@media (max-width:1180px){
  .rf-share,.rf-notif{display:none}
  .rf-sub{left:auto;right:calc(50% + var(--vw)/2 + clamp(16px,2vw,34px));top:18%;--fx:-150px}
}
/* --- mobile : vidéo un peu plus courte, réseaux sous la vidéo --- */
@media (max-width:760px){
  .reel{--vh:min(50svh,50vh)}
  .reel-frame{top:60%}
  .ig-profile{top:26%;width:94vw}
  .ig-ava{width:clamp(42px,12vw,54px)}
  .reel-scene .hf-num{font-size:calc(19px + (1 - var(--p-head)) * 101px)}
  .rf{font-size:12px;padding:8px 13px}
  .rf-com,.rf-star{display:none}
  .rf-like {right:auto;left:3vw;top:26%;--fx:-70px;--fy:-70px}
  .rf-sub  {left:auto;right:3vw;top:22%;--fx:70px;--fy:-70px}
  .rf-notif{display:inline-flex;left:auto;right:4vw;top:auto;bottom:24%;--fx:70px;--fy:70px}
  .rf-share{display:none}
  .reel-socials{
    left:50%;right:auto;top:auto;bottom:clamp(14px,4svh,40px);
    flex-direction:row;
    transform:translateX(-50%) translateY(calc((1 - var(--p-side)) * 30px));
  }
}
/* --- reduced motion : scène posée, pas d'épinglage --- */
@media (prefers-reduced-motion:reduce){
  .reel{--rp:1;margin-top:0}
  .reel-space{height:auto}
  .reel-sticky{position:static;height:auto;padding:90px 0;min-height:100svh}
  .rf{transition:none}
  .reel-scene .hero-kicker,.reel-scene .hf-line{display:none}
}

/* Borne l'epinglage du hero : sans ce conteneur, .hero (sticky, enfant
   direct de body) resterait colle sur toute la hauteur du document. */
.vm-stage{position:relative;z-index:0}

/* ============================================================
   VALEURS · variante PILE — les cartes s'empilent au scroll
   Chaque carte est sticky à un décalage croissant (--i) : en
   descendant, elles viennent se poser les unes sur les autres,
   légèrement de travers. Aucun JS : c'est le scroll natif.
   ============================================================ */
.vpile{
  --vp-top:clamp(96px,13svh,132px);   /* dégagement sous la pilule de nav */
  display:flex;flex-direction:column;
  gap:clamp(26px,6vh,72px);
  padding-bottom:clamp(120px,26vh,300px);
  perspective:1400px;
}
.vp-card{
  position:sticky;
  width:min(880px,100%);margin-inline:auto;
  top:calc(var(--vp-top) + var(--i) * clamp(9px,1.1vh,15px));
  /* de travers, en alternance — jamais deux fois le même angle */
  transform:rotate(var(--rot,0deg));
  transform-origin:50% 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:clamp(22px,2.6vw,34px);
  padding:clamp(28px,3.4vw,46px) clamp(26px,3.4vw,52px) clamp(30px,3.6vw,50px);
  box-shadow:0 26px 60px -34px rgba(20,6,16,.55), 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
  overflow:hidden;
}
.vp-card:nth-child(6n+1){--rot:-1.5deg}
.vp-card:nth-child(6n+2){--rot:1.2deg}
.vp-card:nth-child(6n+3){--rot:-.7deg}
.vp-card:nth-child(6n+4){--rot:1.7deg}
.vp-card:nth-child(6n+5){--rot:-1.1deg}
.vp-card:nth-child(6n+6){--rot:.6deg}
/* au survol la carte se redresse : petit clin d'œil « je prends la main » */
.vp-card:hover{
  transform:rotate(0deg) translateY(-4px);
  border-color:color-mix(in srgb, var(--pink) 42%, var(--line));
  box-shadow:0 34px 70px -30px color-mix(in srgb, var(--pink) 42%, rgba(20,6,16,.6));
}
/* liseré rose en haut : marque la carte du dessus dans la pile */
.vp-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--pink), #c14bff, transparent);
  opacity:.55;
}
.vp-n{
  position:absolute;top:clamp(16px,2vw,26px);right:clamp(20px,2.6vw,36px);
  font-family:var(--black);font-weight:900;line-height:1;
  font-size:clamp(52px,7vw,104px);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb, var(--pink) 34%, transparent);
  pointer-events:none;user-select:none;
}
.vp-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(46px,4.4vw,58px);aspect-ratio:1;border-radius:16px;
  background:linear-gradient(140deg,#ff5cc8,var(--pink) 60%,#c14bff);color:#fff;
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--pink) 80%, transparent);
  transition:transform .45s var(--ease);
}
.vp-ic svg{width:52%;height:52%}
.vp-card:hover .vp-ic{transform:rotate(-8deg) scale(1.07)}
.vp-card h3{
  margin-top:clamp(18px,2.2vw,26px);
  font-size:clamp(24px,3.2vw,42px);line-height:1.1;font-weight:600;letter-spacing:-.02em;
  max-width:16ch;
}
.vp-card p{
  margin-top:clamp(10px,1.2vw,16px);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(14.5px,1.3vw,17px);line-height:1.65;color:var(--text-soft);
  max-width:48ch;
}
@media (max-width:620px){
  .vpile{--vp-top:clamp(84px,11svh,110px);gap:22px}
  .vp-card{padding:26px 22px 28px}
  .vp-n{font-size:56px}
}
/* pas d'empilement si l'utilisateur refuse le mouvement */
@media (prefers-reduced-motion:reduce){
  .vp-card{position:relative;top:auto;transform:none}
  .vp-card:hover{transform:none}
}

/* ============================================================
   CONTACT — appel à l'action « réseaux », formulaire en pop-up
   Même principe que la page Studio, mais habillé média : quadrillage
   rosé, halos, et bulles de réactions qui flottent autour du bouton.
   ============================================================ */
.contact{position:relative;overflow:hidden;isolation:isolate}
.ct-grid{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--pink) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pink) 20%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  /* double masque : radial pour le centre, linéaire pour éteindre
     complètement le haut et le bas — la limite de section ne se voit plus */
  -webkit-mask-image:radial-gradient(64% 58% at 50% 48%, #000 0%, transparent 82%),
                     linear-gradient(to bottom, transparent 0%, #000 26%, #000 62%, transparent 96%);
          mask-image:radial-gradient(64% 58% at 50% 48%, #000 0%, transparent 82%),
                     linear-gradient(to bottom, transparent 0%, #000 26%, #000 62%, transparent 96%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:.75;
}
.ct-orb{position:absolute;z-index:-2;border-radius:50%;pointer-events:none;filter:blur(64px)}
.ct-o1{width:clamp(240px,28vw,420px);aspect-ratio:1.3;left:6%;top:12%;opacity:.5;
  background:radial-gradient(circle, color-mix(in srgb, var(--pink) 60%, transparent), transparent 70%)}
.ct-o2{width:clamp(200px,22vw,340px);aspect-ratio:1;right:7%;bottom:10%;opacity:.42;
  background:radial-gradient(circle, color-mix(in srgb, #c14bff 55%, transparent), transparent 70%)}
.ct-inner{position:relative;max-width:760px;margin:0 auto;text-align:center}
.ct-inner .section-title{position:relative;z-index:2}
.ct-sub{
  position:relative;z-index:2;margin:clamp(14px,2vh,20px) auto 0;max-width:46ch;
  font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.35vw,17.5px);
  line-height:1.65;color:var(--text-soft);
}
.ct-btn{position:relative;z-index:2;margin-top:clamp(26px,3.6vh,40px)}
/* halo qui s'embrase au survol du bouton */
.ct-inner::before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(720px,116%);aspect-ratio:2;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--pink) 42%, transparent),
    color-mix(in srgb, var(--pink) 14%, transparent) 45%, transparent 72%);
  filter:blur(30px);opacity:0;transition:opacity .6s var(--ease), transform .6s var(--ease);
}
/* halo au survol retiré : le bouton porte lui-même l'animation */

/* bulles réseaux flottantes */
.ct-bub{
  position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text);
  animation:ctFloat 7s ease-in-out infinite;
}
.ct-bub svg{width:17px;height:17px;color:var(--pink);flex:none}
.ct-bub b{font-weight:700}
.ct-b1{left:-4%;top:6%;--rot:-7deg;animation-delay:-1s}
.ct-b2{right:-6%;top:14%;--rot:5deg;animation-delay:-3.2s}
.ct-b3{left:2%;bottom:8%;--rot:6deg;padding:10px;animation-delay:-5s}
.ct-b4{right:1%;bottom:12%;--rot:-6deg;padding:10px;animation-delay:-2.2s}
.ct-b5{right:16%;top:-6%;--rot:9deg;padding:9px;animation-delay:-4.1s}
.ct-b5 svg{color:#F5B93C}
.ct-b4 .ct-dot{
  position:absolute;top:-7px;right:-7px;font-style:normal;font-size:10px;font-weight:800;color:#fff;
  background:var(--pink);border-radius:999px;padding:2px 7px;border:2px solid var(--bg);
}
@keyframes ctFloat{
  0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}
  50%{transform:rotate(var(--rot,0deg)) translateY(-12px)}
}
@media (max-width:900px){.ct-b2,.ct-b5{display:none}}
@media (max-width:620px){.ct-bub{display:none}}
@media (prefers-reduced-motion:reduce){
  .ct-bub{animation:none}
  .ct-inner::before{transition:none}
}

/* ---------- Pop-up du formulaire (même mécanique que Studio) ----------
   Le calque flou n'a aucun ancêtre dont l'opacité est animée : sinon le
   flou n'apparaît qu'en fin de transition. Il est adossé à .open, sans
   transition, pour apparaître ET disparaître d'un coup. */
.fc-modal{
  position:fixed;inset:0;z-index:420;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px);
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .26s;
}
.fc-modal.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.fc-modal-backdrop{position:absolute;inset:0}
.fc-modal.open .fc-modal-backdrop{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.fc-modal-backdrop::after{
  content:"";position:absolute;inset:0;background:rgba(10,5,9,.76);
  opacity:0;transition:opacity .26s var(--ease);
}
.fc-modal.open .fc-modal-backdrop::after{opacity:1}
.fc-modal-dialog{
  position:relative;z-index:1;width:min(620px,100%);
  max-height:min(88vh,88svh);overflow:auto;overscroll-behavior:contain;
  border-radius:var(--radius-lg);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:transform .32s var(--ease), opacity .24s var(--ease);
}
.fc-modal.open .fc-modal-dialog{opacity:1;transform:none}
.fc-modal .contact-form{
  position:relative;margin:0;max-width:none;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px);
  box-shadow:0 60px 120px -50px rgba(10,4,9,.85);
}
.fc-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.fc-modal-close:hover{color:var(--pink);border-color:var(--pink);transform:rotate(90deg)}
.fc-modal-close svg{width:16px;height:16px}
.fc-modal-head{margin-bottom:22px;padding:0 34px;text-align:center}
.fc-modal-head h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.fc-modal-head p{margin-top:8px;font-family:var(--sans);font-size:13.5px;color:var(--text-soft);line-height:1.55}
/* pendant l'ouverture : on coupe le backdrop-filter de la pilule de nav,
   l'empiler sous celui de la pop-up retardait l'apparition du flou */
body.fc-modal-open header.nav{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
@media (prefers-reduced-motion:reduce){
  .fc-modal,.fc-modal-dialog,.fc-modal-backdrop::after{transition:none}
}

/* ---------- Bouton contact : reprise du geste « swipe » de Studio ----------
   La flèche part de la gauche, glisse vers la droite et entraîne derrière
   elle le remplissage rose. Le texte échange ses paddings pour laisser la
   place, la largeur reste constante. */
.ct-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;min-height:52px;
  padding:6px 28px 6px 60px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  box-shadow:none;
  transition:border-color .4s var(--ease), color .35s var(--ease),
             transform .4s var(--ease), padding .55s var(--ease);
}
/* le remplissage EST la pastille de départ : elle gonfle, pas de couture */
.ct-btn::before{
  content:"";position:absolute;left:6px;top:50%;width:40px;aspect-ratio:1;
  border-radius:50%;background:var(--pink);z-index:-1;
  transform:translateY(-50%);transform-origin:center;
  transition:transform .55s var(--ease);
}
.ct-btn svg{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;padding:11px;color:#fff;
  transition:left .55s var(--ease);
}
.ct-btn:hover,.ct-btn:focus-visible{
  border-color:var(--pink);color:#fff;transform:translateY(-2px);
  padding-left:28px;padding-right:60px;
}
.ct-btn:hover::before,.ct-btn:focus-visible::before{transform:translateY(-50%) scale(17)}
.ct-btn:hover svg,.ct-btn:focus-visible svg{left:calc(100% - 46px)}
@media (prefers-reduced-motion:reduce){
  .ct-btn,.ct-btn::before,.ct-btn svg{transition:none}
}

/* ---------- Raccords de sections : plus de délimitation franche ----------
   La section contact et le footer se fondent dans ce qui les précède. */
/* Raccords invisibles : .concepts finit en --bg-2 et le footer est en
   --bg-2 — la section part donc de --bg-2 et y revient, en creusant
   légèrement au centre. Plus aucune marche en haut ni en bas. */
.contact{
  background:linear-gradient(to bottom,
    var(--bg-2) 0%,
    color-mix(in srgb, var(--bg) 55%, var(--bg-2)) 46%,
    var(--bg-2) 100%);
}
.footer{
  background:linear-gradient(to bottom, var(--bg-2) 0%, var(--bg-2) 100%);
  border-top:0;
  position:relative;
}
/* voile de raccord au sommet du footer : le trait de séparation disparaît */
.footer::before{
  content:"";position:absolute;left:0;right:0;top:-120px;height:120px;pointer-events:none;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg-2) 70%, transparent) 60%, var(--bg-2));
}

/* ---------- Pile de valeurs : le titre reste visible pendant l'empilement --- */

.vpile{--vp-top:clamp(252px,32svh,322px)}   /* sous le titre épinglé */
@media (max-width:620px){
}
@media (prefers-reduced-motion:reduce){
  .values .center-head{position:static;background:none}
}



/* ---------- Flèche du bouton contact : elle reste centrée ----------
   vm.css applique .btn-primary:hover svg{transform:translateX(4px)}, ce qui
   écrasait le translateY(-50%) et faisait tomber la flèche en fin de course. */
.ct-btn svg,
.ct-btn:hover svg,
.ct-btn:focus-visible svg{transform:translateY(-50%)}

/* (parallaxe de la fiche concept retiré) */

/* ============================================================
   VALEURS — bandeau de titre épinglé, écart CONSTANT avec les cartes
   Le problème : le titre et les cartes ne s'épinglent pas au même
   moment, donc l'écart entre eux changeait en cours de défilement,
   et les cartes traversaient le titre avant de se poser.
   La solution : trois variables liées. La hauteur du bandeau est
   fixe, et l'offset d'épinglage des cartes en découle —
   --vp-top = haut du titre + hauteur du bandeau + écart.
   L'écart de mise en page vaut le même --vgap : identique épinglé
   ou non. Le bandeau est opaque et pleine largeur : les cartes
   disparaissent proprement dessous au lieu de le traverser.
   ============================================================ */
.values{
  --vt:clamp(96px,12svh,128px);      /* dégagement sous la pilule de nav */
  --vhead:104px;                     /* hauteur réelle du bandeau, mesurée
                                        par JS (repli si pas de JS)      */
  --vgap:clamp(30px,4.5vh,52px);     /* écart titre ↔ cartes             */
}
/* display:flow-root : sans lui, la marge négative appliquée en bas de la pile
   FUSIONNE avec la marge de .vstage au lieu de réduire sa hauteur — le titre
   restait donc épinglé bien après la libération des cartes. (overflow:hidden
   aurait aussi créé le contexte, mais casserait le position:sticky.) */
.vstage{position:relative;display:flow-root}
.values .center-head{
  position:sticky;top:var(--vt);z-index:4;
  max-width:none;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,2vh,22px) 0;
  margin:0;
  background:var(--bg);
}
/* fondu sous le bandeau : les cartes s'y dissolvent, pas de coupe nette */
.values .center-head::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:30px;
  pointer-events:none;
  background:linear-gradient(to bottom, var(--bg), transparent);
}
/* L'écart de mise en page vient d'un padding, pas d'une marge : les marges
   entre frères fusionnent (celle de .vlayout l'emportait), ce qui rendait
   l'écart naturel différent de l'écart épinglé. */
.vstage .vlayout-pile{margin-top:0}
.vpile{
  --vp-top:calc(var(--vt) + var(--vhead) + var(--vgap));
  padding-top:var(--vgap);
  /* AUCUN padding-bottom : les cartes sont sticky dans la BOÎTE DE CONTENU
     de .vpile, alors que le titre l'est dans la boîte de bordure de .vstage.
     Un padding bas libérait donc les cartes AVANT le titre — d'où les cartes
     qui repassaient derrière lui en fin de section. L'espace de fin est
     reporté sur la section elle-même, hors de .vstage. */
  padding-bottom:0;
}
.values{padding-bottom:calc(clamp(104px,14vh,172px) + clamp(30px,7vh,90px))}
@media (prefers-reduced-motion:reduce){
  .values .center-head{position:static;background:none}
  .values .center-head::after{display:none}
}

/* ---------- Anneau concepts : plus de flèches, tout est au scroll ---------- */
.cring-arrow{display:none !important}
/* les points ne sont plus qu'un repère visuel : cliquer dessus relançait le
   carrousel à zéro alors qu'il est piloté par le défilement */
.cring-dots{margin-top:clamp(22px,3.4vh,42px);pointer-events:none}
.cring-dot{cursor:default}

/* ============================================================
   CONCEPTS — la scène s'épingle le temps de parcourir l'anneau
   Avant, la rotation était liée à la simple traversée de la section :
   elle commençait dès l'arrivée et se terminait avant qu'on ait pu
   voir toutes les cartes. Ici la scène se fige au centre de l'écran,
   le défilement fait tourner l'anneau, puis la page repart.
   ============================================================ */
.concepts{padding:0}
.cring-space{height:400vh;position:relative}
.cring-pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.cring-pin > .wrap{width:100%}
/* le titre tient sur UNE ligne */
.concepts .section-title{white-space:nowrap;font-size:clamp(26px,3.6vw,52px)}
.concepts .center-head{margin-bottom:clamp(18px,2.6vh,32px)}
.concepts-foot{display:none}
@media (max-width:760px){
  .cring-space{height:340vh}
  .concepts .section-title{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .cring-space{height:auto}
  .cring-pin{position:static;height:auto;padding:clamp(90px,12vh,150px) 0}
}

/* (survol du « Découvrir » retiré : la pastille d'origine, statique) */
@media (prefers-reduced-motion:reduce){
  .cring-hint,.cring-hint::before,.cring-hint svg{transition:none}
}

/* ============================================================
   MOBILE — corrections ciblées (aucun effet en desktop)
   ============================================================ */
@media (max-width:880px){
  /* Tiroir : sa barre de défilement interne se voyait sur le bord droit.
     On garde le défilement, on masque seulement sa chrome. Et on le pousse
     un peu plus loin hors champ pour qu'aucun liseré ne dépasse quand la
     barre système réduit la largeur utile. */
  .nav-links{scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{width:0;height:0;display:none}
  /* (le tiroir latéral est remplacé par la pop-up descendante, plus bas) */
}
@media (max-width:760px){
  /* Reel : la scène remonte (il restait beaucoup d'air en haut) et les
     pastilles s'écartent du profil pour ne plus passer sur le logo. */
  .reel-frame{top:56%}
  .reel-socials{top:auto}
  .ig-profile{top:21%}
  .rf-like {top:38%;left:2vw;--fx:-56px;--fy:0px}
  .rf-sub  {top:34%;right:2vw;left:auto;--fx:56px;--fy:0px}
  .rf-notif{top:auto;bottom:22%;right:3vw;left:auto;--fx:56px;--fy:56px}
}
@media (max-width:720px){
  /* Cartes du carrousel : elles étaient bien trop allongées */
  .cring{--cardH:clamp(292px,40vh,352px);--cardW:clamp(206px,62vw,244px)}
  .cring-cbody h3{font-size:clamp(20px,5.4vw,25px)}
  .cring-desc{font-size:12.5px;line-height:1.4}
  .cring-hint{margin-top:11px;padding:8px 14px;font-size:12.5px}
}

/* Flou doux derrière le compteur : il ne floute QUE le décor (le hero est un
   frère de la scène), pas les textes qui sont au-dessus. Il s'efface en même
   temps que le compteur rétrécit. */
.hero-soft{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1280px,128%);aspect-ratio:1.55;border-radius:50%;
  z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(15px) saturate(108%);
          backdrop-filter:blur(15px) saturate(108%);
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 26%, transparent 72%);
          mask-image:radial-gradient(50% 50% at 50% 50%, #000 26%, transparent 72%);
  opacity:calc(1 - var(--p-head));
}
/* les textes du hero passent devant le flou */
.reel-scene .hf-line,.ig-profile{z-index:3}

/* ============================================================
   MOBILE — le menu devient une pop-up qui descend
   (au lieu du tiroir latéral, qui obligeait à un geste de côté)
   ============================================================ */
@media (max-width:880px){
  .nav-links{
    top:calc(env(safe-area-inset-top) + 76px);
    left:14px;right:14px;width:auto;height:auto;
    max-height:calc(100svh - 120px);
    border-radius:26px;
    padding:10px 14px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 30px 70px -28px rgba(12,4,10,.6), 0 0 0 1px var(--line);
    transform-origin:top center;
    transform:translateY(-14px) scale(.96);
    opacity:0;visibility:hidden;
    transition:transform .34s cubic-bezier(.34,1.2,.4,1), opacity .24s ease,
               visibility 0s linear .34s;
  }
  .nav-links.open{transform:none;opacity:1;visibility:visible;transition-delay:0s,0s,0s}
  /* entête du tiroir : on ne garde que la croix, alignée à droite */
  .drawer-head{margin:0 0 2px;padding:0 0 6px;border-bottom:0;justify-content:flex-end}
  .drawer-label{display:none}
  .drawer-close{width:34px;height:34px;border:0;background:transparent;color:var(--muted)}
  /* entrées : larges, lisibles, séparées d'un filet discret */
  .nav-links a{
    font-size:16px;font-weight:600;color:var(--text);
    padding:13px 8px;border-radius:12px;border-bottom:1px solid var(--line-2);
  }
  .nav-links a:last-of-type{border-bottom:0}
  .nav-links .dl-num{display:none}
  /* la CTA prend toute la largeur, comme sur la référence */
  .nav-links a.drawer-cta,
  .nav .nav-links a.drawer-cta{
    justify-content:center;width:100%;margin-top:12px;
    padding:14px 20px;font-size:15px;border-bottom:0;
  }
  .drawer-foot{padding-top:16px;gap:6px}
  .df-socials{gap:14px}
}

/* ---------- Carrousel : le flou suit le scroll SANS transition ---------- */
.cring-card{transition:none}

/* ---------- Mobile : la scène du reel remonte encore ---------- */
@media (max-width:760px){
  .ig-profile{top:calc(15% + (1 - var(--p-head)) * 35%)}
  .reel-frame{top:53%}
  .reel-socials{bottom:auto;top:calc(53% + var(--vh)/2 + 26px);transform:translateX(-50%) translateY(calc((1 - var(--p-side)) * 24px))}
  .rf-like {top:34%}
  .rf-sub  {top:30%}
  .rf-notif{top:auto;bottom:26%}
}

/* ============================================================
   MOBILE — barre, menu et hero (révision complète)
   ============================================================ */

/* --- plus de halo rectangulaire au tap --- */
header.nav, header.nav *{-webkit-tap-highlight-color:transparent}
.nav-burger,.theme-toggle,.nav-links a{-webkit-tap-highlight-color:transparent}
.nav-burger:focus,.theme-toggle:focus{outline:none}
.nav-burger:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* --- HERO mobile : bloc remonté, plus grand, parfaitement centré --- */
@media (max-width:760px){
  /* le compteur monte et grossit */
  .ig-profile{top:calc(13% + (1 - var(--p-head)) * 32%)}
  .reel-scene .hf-num{font-size:calc(19px + (1 - var(--p-head)) * 137px)}
  .reel-scene .hf-label{font-size:calc(11px + (1 - var(--p-head)) * 3.5px)}
  /* l'accroche remonte nettement et grossit un peu */
  .reel-scene .hf-line{
    font-size:clamp(16px,4.6vw,21px);
    max-width:22ch;
  }
  /* elle s'efface bien plus tôt : elle traînait pendant tout le début du reel */
  .reel-scene .hf-line{opacity:calc(1 - clamp(0, calc(var(--rp) / .07), 1))}
  /* réseaux redescendus : il restait trop de vide sous eux */
  .reel-socials{top:calc(53% + var(--vh)/2 + 52px)}
}

/* --- CARROUSEL : fondu lissé, points et titre aérés --- */
.cring-card{
  transition:opacity .55s var(--ease), filter .55s var(--ease), box-shadow .55s var(--ease);
}
.cring-dots{margin-top:clamp(38px,5.4vh,64px)}
.concepts .center-head{margin-bottom:clamp(38px,5.4vh,64px)}

/* ============================================================
   HERO MOBILE — le compteur ne doit plus déborder
   Les colonnes latérales réservaient 104 px de chaque côté alors que
   l'avatar et le nom sont invisibles pendant la phase hero : le chiffre
   n'avait plus la place et sortait de l'écran. Elles s'ouvrent désormais
   en même temps qu'eux.
   ============================================================ */
@media (max-width:760px){
  .ig-profile{
    grid-template-columns:
      calc(var(--p-chrome) * clamp(52px,15vw,64px))
      auto
      calc(var(--p-chrome) * clamp(52px,15vw,64px));
    column-gap:calc(var(--p-chrome) * 10px);
    max-width:96vw;
  }
  .reel-scene .hf-num{font-size:calc(19px + (1 - var(--p-head)) * 118px)}
  /* la ligne profil descend : elle frôlait la barre et laissait un trou
     au-dessus de la vidéo */
  .ig-profile{top:calc(18% + (1 - var(--p-head)) * 30%)}
}
/* desktop : même respiration sous la barre */
.ig-profile{top:calc(20% + (1 - var(--p-head)) * 28%)}

/* ============================================================
   HERO MOBILE — respiration entre le libellé, le nombre et l'accroche
   ============================================================ */
@media (max-width:760px){
  /* « abonnés cumulés » remonte et cesse de coller au nombre */
  .reel-scene .hero-followers{gap:calc(4px + (1 - var(--p-head)) * 12px)}
  /* l'accroche descend franchement sous le nombre et tient sur DEUX lignes */
  .reel-scene .hf-line{
    font-size:clamp(15px,4.2vw,19px);
    max-width:25ch;
  }
  /* phase vidéo : le trio logo · compteur · nom se resserre et remonte.
     Les colonnes latérales étaient trop étroites pour le nom, qui débordait
     vers la droite et donnait l'impression d'un bloc étalé. */
  .ig-profile{
    top:calc(15% + (1 - var(--p-head)) * 33%);
    grid-template-columns:
      calc(var(--p-chrome) * clamp(84px,23vw,102px))
      auto
      calc(var(--p-chrome) * clamp(84px,23vw,102px));
    column-gap:calc(var(--p-chrome) * 8px);
  }
  .ig-handle{font-size:clamp(11px,3.1vw,12.5px)}
  .ig-ava{width:clamp(34px,9.5vw,42px)}
}

/* Reprise des trois écarts qui résistaient en mobile (valeurs explicites
   plutôt que relatives : les unités svh/ch donnaient des résultats trop
   variables d'un écran à l'autre). */
@media (max-width:760px){
  .reel-scene .hf-line{
    max-width:none;width:min(88vw,344px);
  }
  /* le trio se resserre vraiment : largeur au contenu, colonnes courtes */
  .ig-profile{
    width:max-content;max-width:96vw;
    grid-template-columns:
      calc(var(--p-chrome) * clamp(72px,19vw,86px))
      auto
      calc(var(--p-chrome) * clamp(72px,19vw,86px));
    column-gap:calc(var(--p-chrome) * 6px);
  }
  .reel-scene .hf-label{font-size:calc(10px + (1 - var(--p-head)) * 4px)}
}

/* Derniers réglages mobile : l'accroche remonte un peu, et le trio retrouve
   un peu d'air — entre les deux essais précédents (260 px trop serré,
   367 px trop étalé). Puis, en phase vidéo, le trio descend d'environ
   20 px (15 % → 18 %) et l'écart passe de 12 à 18 px : les trois éléments
   se touchaient encore. */
@media (max-width:760px){
  .reel-scene{--hf-repli:calc(45% + clamp(146px,19.5svh,192px))}
  .ig-profile{
    top:calc(18% + (1 - var(--p-head)) * 30%);
    grid-template-columns:
      calc(var(--p-chrome) * clamp(78px,21.5vw,92px))
      auto
      calc(var(--p-chrome) * clamp(78px,21.5vw,92px));
    column-gap:calc(var(--p-chrome) * 18px);
  }
}