/* ============================================================
   screen-connect · design system Move Screen
   Base UNIQUE partagée par toutes les pages. Ne pas dupliquer.
   Palette : blanc, crème douce, encre + vert forêt / ambre (identité 2026). Typo : Poppins + Inter.
   ============================================================ */
:root{
  --white:#FFFFFF;
  --cream:#F4F0E9;      /* bandes de section */
  --cream-2:#EDE9E0;    /* pilules, cartes douces */
  --cream-3:#E6E1D6;    /* hover pilules */
  --ink:#141412;
  --muted:#6F6B63;
  --soft:#9B968C;
  --line:#E6E2D9;
  --line-dark:rgba(20,20,18,.14);
  --green:#3A4E48;      /* vert forêt, accent de marque */
  --green-deep:#2E403B; /* hover des surfaces vertes */
  --amber:#ECA72C;      /* ambre, en aplat uniquement (jamais en texte sur fond clair) */
  --r-lg:24px;
  --r-md:16px;
  --r-pill:999px;
  --pop:'Poppins',sans-serif;
  --inter:'Inter',sans-serif;
  --pad:clamp(20px,4vw,56px);
  --shadow-soft:0 20px 60px rgba(20,20,18,.08);
  --shadow-card:0 8px 30px rgba(20,20,18,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--inter);
  font-size:15.5px;line-height:1.7;
  background:var(--white);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--amber);color:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- trame douce (grain très léger sur les bandes crème) ---------- */
.band-cream{background:var(--cream);position:relative}
.band-cream::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.53 0 0 0 0 0.47 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-cream>*{position:relative}

/* ---------- typographie ---------- */
.h-hero{
  font-family:var(--pop);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(38px,5.6vw,76px);line-height:1.08;text-wrap:balance;
}
.h-big{
  font-family:var(--pop);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(30px,4.2vw,58px);line-height:1.12;text-wrap:balance;
}
.h-med{
  font-family:var(--pop);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(22px,2.6vw,32px);line-height:1.25;
}
.h-card{
  font-family:var(--pop);font-weight:500;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.45;
}
.eyebrow{
  font-family:var(--pop);font-weight:500;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--green);
}
.hl{color:var(--green)}
.lede{font-size:15.5px;line-height:1.75;color:var(--muted);max-width:46ch}
.small{font-size:13px;color:var(--soft)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- structure ---------- */
.wrap{max-width:1520px;margin:0 auto;padding:0 var(--pad)}
.hr{border:none;border-top:1px solid var(--line);margin:0}
.sec{padding:clamp(48px,6vw,84px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(24px,3vw,42px);flex-wrap:wrap}

/* ---------- boutons pilule ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--pop);font-weight:500;font-size:14px;
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--cream-2);color:var(--ink);
  border:1px solid transparent;
  transition:background .3s ease,color .3s ease,transform .3s ease,border-color .3s;
  white-space:nowrap;cursor:pointer;
}
.btn:hover{background:var(--green);color:var(--white);transform:translateY(-1px)}
.btn-dark{background:var(--green);color:var(--white)}
.btn-dark:hover{background:var(--green-deep);color:var(--white)}
.btn-line{background:transparent;border-color:var(--line-dark)}
.btn-line:hover{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-lg{padding:17px 32px;font-size:15px}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- pilule d'info centrée (case study) ---------- */
.pill-note{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:14px;background:var(--white);
  padding:13px 22px;font-family:var(--pop);font-weight:400;font-size:14px;
  box-shadow:var(--shadow-card);
}
.pill-note svg{width:17px;height:17px;color:var(--green);flex:none}

/* ---------- navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--pad);
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
}
.nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:14px var(--pad)}
.logo{
  font-family:var(--pop);font-weight:500;font-size:15px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:11px;
}
.logo-mark{width:21px;height:21px;flex:none}
.logo .lg2{font-weight:300;margin-left:.22em}
.logo img{height:34px;width:auto;display:block}
.logo .li-light{display:none}
body.menu-open .nav .logo .li-dark{display:none}
body.menu-open .nav .logo .li-light{display:block}
.nav-links{display:flex;gap:30px;align-items:center;font-family:var(--pop);font-weight:400;font-size:13.5px}
.nav-links a{color:var(--muted);transition:color .25s;letter-spacing:.02em}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--green)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav .btn{background:var(--amber);color:var(--ink)}
.nav .btn:hover{background:var(--green);color:var(--white)}
.burger{
  display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);place-items:center;flex:none;
}
.burger{position:relative}
.burger span{
  position:absolute;left:50%;top:50%;width:16px;height:1.6px;border-radius:1px;
  background:var(--ink);transition:transform .3s ease,opacity .3s ease;
  transform:translate(-50%,-50%);
}
.burger span:nth-child(1){transform:translate(-50%,calc(-50% - 4.5px))}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 4.5px))}
.burger.open span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
@media(max-width:960px){
  .nav-links,.nav .btn{display:none}
  .burger{display:grid}
}
.mmenu{
  position:fixed;inset:0;z-index:590;
  background:var(--green); /* vert forêt, plein cadre : moment de marque */
  color:#F1EDE4;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:96px 26px 30px;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu .mlinks{display:flex;flex-direction:column}
.mmenu .mlinks a{
  font-family:var(--pop);font-weight:300;font-size:clamp(27px,7.2vw,40px);
  line-height:1.15;color:#F1EDE4;
  padding:15px 0;border-bottom:1px solid rgba(241,237,228,.12);
  transform:translateY(14px);opacity:0;transition:transform .4s ease,opacity .4s ease;
}
.mmenu.open .mlinks a{transform:none;opacity:1}
.mmenu.open .mlinks a:nth-child(2){transition-delay:.05s}
.mmenu.open .mlinks a:nth-child(3){transition-delay:.1s}
.mmenu.open .mlinks a:nth-child(4){transition-delay:.15s}
.mmenu.open .mlinks a:nth-child(5){transition-delay:.2s}
.mmenu.open .mlinks a:nth-child(6){transition-delay:.25s}
.mmenu .mfoot{display:flex;flex-direction:column;gap:16px}
.mmenu .mfoot .btn{background:var(--amber);color:var(--ink);justify-content:center;width:100%}
.mmenu .mfoot .btn:hover{background:#F1EDE4;color:var(--ink)}
.mmenu .mmeta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--pop);font-size:12px;letter-spacing:.04em;color:rgba(241,237,228,.6)}
.mmenu .mmeta a{color:rgba(241,237,228,.85);text-decoration:underline;text-underline-offset:3px}
body.menu-open{overflow:hidden}
/* nav au-dessus du menu sombre : logo et burger passent en clair */
body.menu-open .nav{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-open .nav .logo{color:#F1EDE4}
body.menu-open .nav .logo span{color:rgba(241,237,228,.5)}
body.menu-open .burger{border-color:rgba(241,237,228,.28);background:transparent}
body.menu-open .burger span{background:#F1EDE4}

/* ---------- hero ---------- */
.hero{padding:clamp(112px,15vh,158px) 0 0} /* pages internes : titre sous la nav fixe */
.hero.hero-pinned{padding:0} /* accueil : le pin gère le placement */
@media(max-width:900px){.hero.hero-pinned{padding-top:clamp(96px,14vh,130px)}}
/* hero épinglé : le texte reste, la vidéo glisse dessous au scroll */
.hero-stage{position:relative;height:158svh}
.hero-pin{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:24svh; /* remonte nettement le texte, laisse la vidéo poindre */
  z-index:2;pointer-events:none;
}
.hero-pin .wrap{pointer-events:auto}
.hero-stage .hero-media-wide{
  position:relative;z-index:1;margin-top:-34svh;
}
.hero-stage .hero-media img,.hero-stage .hero-media video{height:92svh}
@media(max-width:900px){
  .hero-stage{height:auto}
  .hero-pin{position:relative;height:auto;padding-top:0;padding-bottom:0}
  .hero-stage .hero-media-wide{margin-top:26px}
  .hero-stage .hero-media img,.hero-stage .hero-media video{height:clamp(300px,52svh,480px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-stage{height:auto}
  .hero-pin{position:relative;height:auto;padding-bottom:0}
  .hero-stage .hero-media-wide{margin-top:26px}
}
.hero-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
@media(min-width:901px){.hero-side{align-items:flex-end;text-align:right}.hero-side .lede{max-width:38ch}}
.hero-media-wide{padding:0 clamp(12px,1.5vw,24px)}
.hero-media{
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:var(--shadow-soft);
}
.hero-media img,.hero-media video{width:100%;height:clamp(360px,64vh,680px);object-fit:cover}
.hero-media .tagline{
  position:absolute;left:18px;bottom:18px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-radius:var(--r-pill);padding:9px 18px;
  font-family:var(--pop);font-weight:500;font-size:12.5px;letter-spacing:.04em;
}

/* ---------- défilement horizontal (desktop + mobile) ---------- */
.hscroll-zone{position:relative}
.hscroll{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px var(--pad);scroll-padding-left:var(--pad);
}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start;flex:none}
.hs-arrows{display:flex;gap:10px}
.hs-arrow{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);display:grid;place-items:center;transition:all .25s;
}
.hs-arrow:hover{background:var(--green);color:var(--white);border-color:var(--green)}
.hs-arrow svg{width:15px;height:15px}
.hs-arrow[disabled]{opacity:.3;pointer-events:none}

/* cartes verticales (cibles / disciplines) */
.vcard{
  width:clamp(220px,17vw,270px);aspect-ratio:9/15;border-radius:var(--r-md);
  overflow:hidden;position:relative;background:var(--cream);
}
.vcard img,.vcard video{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.vcard:hover img,.vcard:hover video{transform:scale(1.045)}
.vcard .vlabel{
  position:absolute;left:0;right:0;top:44%;text-align:center;
  font-family:var(--pop);font-weight:500;font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--white);text-shadow:0 1px 14px rgba(0,0,0,.35);
}
.vcard .vsub{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.02) 55%,rgba(0,0,0,.28))}

/* cartes fonctionnalités (carrousel crème) */
.fcard{
  width:clamp(270px,22vw,330px);background:var(--white);border-radius:var(--r-md);
  padding:26px 24px 20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow-card);
}
.fcard p{font-size:13.5px;line-height:1.65;color:var(--muted)}
.fcard .fimg{margin-top:auto;border-radius:10px;overflow:hidden;background:var(--cream)}
.fcard .fimg img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}

/* ---------- mot géant rotatif ---------- */
.giant{
  font-family:var(--pop);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(64px,11vw,160px);line-height:1;min-height:1.15em;
}
.giant .w{display:inline-block;animation:wfade .5s ease;color:var(--green)}
@keyframes wfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
.stat{padding:34px 26px 30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.stat:first-child{border-left:1px solid var(--line)}
@media(max-width:900px){.stat:nth-child(odd){border-left:1px solid var(--line)}}
.stat b{font-family:var(--pop);font-weight:300;font-size:clamp(38px,4.6vw,64px);line-height:1;display:block;letter-spacing:-.02em;color:var(--green)}
.stat > span{display:block;margin-top:10px;font-size:13px;color:var(--muted);max-width:24ch;line-height:1.55}
.stat b span{font:inherit}

/* ---------- formules (plans) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,38px)}
@media(max-width:1020px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{display:flex;flex-direction:column}
.plan-photo{position:relative;border-radius:var(--r-md);overflow:hidden;margin-bottom:20px}
.plan-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.plan-tab{
  position:absolute;top:0;left:0;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border-radius:0 0 var(--r-md) 0;padding:12px 24px 12px 18px;
  font-family:var(--pop);font-weight:500;font-size:16px;
}
.plan-price{font-family:var(--pop);font-weight:300;font-size:34px;letter-spacing:-.01em}
.plan-price i{font-style:normal;font-size:14px;color:var(--muted);font-family:var(--inter)}
.plan-annual{font-size:13px;color:var(--muted);margin-top:2px}
.plan-annual b{color:var(--ink);font-weight:600}
.plan p.desc{font-size:14px;color:var(--muted);line-height:1.7;margin:14px 0 4px}
.plan ul{list-style:none;margin:12px 0 20px;border-top:1px solid var(--line)}
.plan li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.plan li b{color:var(--ink);font-weight:500;text-align:right}
.plan .btn{margin-top:auto;align-self:stretch}
.plan-badge{
  display:inline-block;background:var(--amber);color:var(--ink);
  font-family:var(--pop);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:6px 14px;margin-left:10px;vertical-align:middle;
}

/* ---------- témoignages ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{position:relative;padding-bottom:70px}
.quote .qphoto{border-radius:var(--r-md);overflow:hidden;width:min(320px,72%)}
.quote .qphoto img{width:100%;aspect-ratio:3/4;object-fit:cover}
.quote .qname{
  position:absolute;left:min(200px,46%);top:min(300px,58%);
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);
  border-radius:12px;padding:12px 20px;box-shadow:var(--shadow-card);
}
.quote .qname b{font-family:var(--pop);font-weight:500;font-size:14.5px;display:block}
.quote .qname span{font-size:12px;color:var(--muted)}
.quote .qtext{
  position:absolute;right:0;bottom:0;width:min(420px,82%);
  background:var(--white);border-radius:var(--r-md);padding:22px 26px;
  box-shadow:var(--shadow-card);font-size:14px;line-height:1.7;color:var(--ink);
}
.quote .qkpi{display:inline-block;margin-top:10px;font-family:var(--pop);font-weight:500;font-size:12px;letter-spacing:.05em;color:var(--green)}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 4px;font-family:var(--pop);font-weight:400;font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--pop);transition:all .3s;font-size:15px;
}
.faq details[open] summary .pm{background:var(--green);color:var(--white);border-color:var(--green);transform:rotate(45deg)}
.faq .ans{padding:0 46px 22px 4px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:70ch}

/* ---------- formulaires ---------- */
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--pop);font-weight:500;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{margin-top:7px;font-size:12.5px;color:var(--soft)}

/* ---------- encart crème arrondi ---------- */
.cta-box{
  background:var(--cream-2);border-radius:var(--r-lg);
  padding:clamp(36px,6vw,72px);text-align:center;
}
.cta-box .lede{margin-inline:auto}

/* ---------- popins légales ---------- */
.lmodal[hidden]{display:none!important}
.lmodal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:24px}
.lmodal.open{display:flex}
.lmodal .backdrop{position:absolute;inset:0;background:rgba(20,20,18,.45);backdrop-filter:blur(6px)}
.lmodal .card{
  position:relative;z-index:2;background:var(--white);border-radius:var(--r-lg);
  max-width:720px;width:100%;max-height:82vh;overflow:auto;padding:clamp(26px,4vw,44px);
  box-shadow:var(--shadow-soft);
}
.lmodal h2{font-family:var(--pop);font-weight:400;font-size:24px;margin-bottom:6px}
.lmodal h3{font-family:var(--pop);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:24px 0 6px}
.lmodal p,.lmodal li{font-size:14px;color:var(--muted);line-height:1.75}
.lmodal ul{padding-left:18px;margin:6px 0}
.lmodal .lclose{
  position:sticky;top:0;float:right;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);display:grid;place-items:center;margin-left:14px;
}
.lmodal .lclose:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.lmodal .lclose svg{width:14px;height:14px}
body.lmodal-open{overflow:hidden}

/* ---------- footer ---------- */
footer{background:var(--green);padding:38px var(--pad);font-size:12.5px;color:rgba(244,240,233,.7)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--pop);font-size:12.5px}
.foot nav a{color:rgba(244,240,233,.85)}
.foot nav a:hover{color:var(--white)}
footer .flink{text-decoration-color:rgba(244,240,233,.4)}
footer .flink:hover{color:var(--white)}
.flink{padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-dark)}
.flink:hover{color:var(--green)}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- wizard souscription ---------- */
.stepsbar{display:flex;justify-content:center;margin:6px 0 36px;flex-wrap:wrap}
.sb{display:flex;align-items:center;gap:9px;padding:8px 14px;font-family:var(--pop);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.sb i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:12px}
.sb.cur{color:var(--ink)}
.sb.cur i{background:var(--green);border-color:var(--green);color:var(--white)}
.sb.done{color:var(--muted)}
.sb.done i{background:var(--cream-2);border-color:var(--cream-2)}
.sb+.sb::before{content:"";width:22px;height:1px;background:var(--line);margin-right:10px}
@media(max-width:640px){.sb span{display:none}.sb.cur span{display:inline}}
.wizgrid{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start;padding-bottom:80px}
.wizaside{position:sticky;top:96px}

.sum{background:var(--cream-2);border-radius:var(--r-lg);padding:26px 24px}
.sum h3{font-family:var(--pop);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.sum .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-dark);font-size:13.5px;color:var(--muted)}
.sum .row b{color:var(--ink);font-weight:500;text-align:right}
.sum .total{padding-top:14px;margin-top:4px;border-top:1px solid var(--line-dark)}
.sum .total small{display:block;font-family:var(--pop);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.sum .total .amt{font-family:var(--pop);font-weight:300;font-size:40px;letter-spacing:-.01em;color:var(--green)}
.sum .total .amt i{font-style:normal;font-size:13px;color:var(--muted);font-family:var(--inter)}
.sum .note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6}
.panelw{display:none}
.panelw.on{display:block;animation:pfade .35s ease}
@keyframes pfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.opt{
  position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:15px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:19px 20px;cursor:pointer;transition:border-color .25s,box-shadow .25s;margin-bottom:11px;
}
.opt:hover{box-shadow:var(--shadow-card)}
.opt.sel{border-color:var(--green)}
.opt .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-dark);display:grid;place-items:center}
.opt.sel .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--green)}
.opt .check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-dark);display:grid;place-items:center;color:transparent}
.opt.sel .check{background:var(--green);border-color:var(--green);color:var(--white)}
.opt .check svg{width:11px;height:11px}
.opt b.nm{font-family:var(--pop);font-weight:500;font-size:15.5px}
.opt .sub{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.opt .pr{font-family:var(--pop);font-weight:400;font-size:18px;white-space:nowrap;text-align:right}
.opt .pr i{font-style:normal;display:block;font-size:11px;color:var(--soft);font-family:var(--inter)}
.opt .badge{position:absolute;top:-10px;left:18px;background:var(--amber);color:var(--ink);border-radius:var(--r-pill);padding:3px 11px;font-family:var(--pop);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.cycle{display:inline-flex;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;margin-bottom:22px}
.cycle button{border-radius:var(--r-pill);padding:9px 18px;font-family:var(--pop);font-weight:500;font-size:12.5px;color:var(--muted);transition:all .25s}
.cycle button.on{background:var(--green);color:var(--white)}
.slugbox{display:flex;align-items:stretch}
.slugbox input{border-radius:12px 0 0 12px;border-right:none;text-align:right;font-weight:500}
.slugbox .suffix{display:flex;align-items:center;background:var(--cream-2);border:1px solid var(--line);border-left:none;border-radius:0 12px 12px 0;padding:0 14px;font-size:13px;color:var(--muted);white-space:nowrap}
.slugstate{margin-top:8px;font-size:13px;font-weight:500;min-height:19px}
.slugstate.ok{color:var(--green)}
.slugstate.ko{color:#A65340}
.alertw{display:none;margin:0 0 18px;border:1px solid #D9B3A5;background:#FBF3EF;color:#A65340;border-radius:12px;padding:13px 16px;font-size:13.5px;font-weight:500}
.alertw.show{display:block}
.recap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:8px}
.recap .drow{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--line);font-size:13.5px}
.recap .drow:first-child{border-top:none}
.recap dt{color:var(--muted)}
.recap dd{font-weight:500;text-align:right}
.navrow{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.spin{width:15px;height:15px;border:2px solid rgba(20,20,18,.25);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;display:none}
.btn.loading .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* (déplacé en fin de fichier pour primer sur les règles .sum de base) */
/* mobile : le récap devient une barre de total repliée, fixée en bas (bottom sheet) */
@media(max-width:920px){
  .wizgrid{grid-template-columns:1fr;padding-bottom:150px}
  .wizaside{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:520}
  .sum{
    border-radius:20px 20px 0 0;cursor:pointer;
    box-shadow:0 -14px 44px rgba(20,20,18,.16);
    padding:12px 22px calc(16px + env(safe-area-inset-bottom));
  }
  .sum h3,.sum .row,.sum .note{display:none}
  .sum .total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0 2px;margin:0;border:none}
  .sum .total small{display:flex;align-items:center;gap:9px;margin-bottom:0}
  .sum .total small::after{
    content:"";width:8px;height:8px;flex:none;
    border-left:1.5px solid var(--soft);border-top:1.5px solid var(--soft);
    transform:rotate(45deg) translateY(1px);transition:transform .3s;
  }
  .sum .total .amt{font-size:30px}
  .sum.expanded h3{display:block}
  .sum.expanded .row{display:flex}
  .sum.expanded .note{display:block}
  .sum.expanded .total small::after{transform:rotate(225deg) translateY(1px)}
}


/* ============ micro-interactions ============ */
/* nav : soulignement qui glisse */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:var(--ink);
  transition:right .3s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after{right:0}
.nav-links a.on::after{right:0}
.nav-links a.on{border-bottom:none;padding-bottom:0}

/* cartes : lévitation douce */
.fcard,.plan-photo,.pill-note{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.fcard:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(20,20,18,.1)}
.plan-photo:hover{transform:translateY(-4px)}
.quote .qphoto img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.quote:hover .qphoto img{transform:scale(1.035)}

/* vcards : label qui respire */
.vcard .vlabel{transition:letter-spacing .5s cubic-bezier(.22,1,.36,1)}
.vcard:hover .vlabel{letter-spacing:.42em}

/* boutons magnétiques : le JS pose --mx/--my */
.btn{transform:translate(var(--mx,0),var(--my,0))}
.btn:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 1px))}

/* bandeaux : main qui attrape */
.hscroll{cursor:grab}
.hscroll.dragging{cursor:grabbing;scroll-snap-type:none}
.hscroll.dragging>*{pointer-events:none}

/* parallax générique (le JS translate les [data-plx]) */
[data-plx]{will-change:transform}

/* apparition des titres : voile qui se lève */
.h-hero.rv,.h-big.rv{clip-path:inset(0 0 12% 0);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1),clip-path .9s cubic-bezier(.22,1,.36,1)}
.h-hero.rv.in,.h-big.rv.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.h-hero.rv,.h-big.rv{clip-path:none}}


/* ============ curseur rond ============ */
@media (pointer:fine){
  body{cursor:none}
  a,button,summary,.opt,.hscroll,.vcard,.fcard,.plan,.card{cursor:none}
  input,textarea,select{cursor:auto} /* champs : curseur natif */
  .sc-cursor{
    position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
    background:var(--ink);pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .22s ease,height .22s ease,background .22s ease,opacity .25s ease;
    opacity:0;
  }
  .sc-cursor.on{opacity:1}
  .sc-cursor.grow{width:42px;height:42px;background:rgba(58,78,72,.16)}
  .sc-cursor.hide{opacity:0}
}
@media (pointer:coarse){.sc-cursor{display:none}}


/* ============ CTA avec vidéo de fond (voile crème clair, contrastes RGAA en encre) ============ */
.cta-box.has-video{position:relative;overflow:hidden;color:var(--ink);background:var(--cream-2)}
.cta-box.has-video .ctavid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-box.has-video .ctascrim{position:absolute;inset:0;background:rgba(244,240,233,.85)}
.cta-box.has-video>*:not(.ctavid):not(.ctascrim){position:relative;z-index:2}
.cta-box.has-video .eyebrow{color:var(--green)}
.cta-box.has-video .lede{color:#55524B}
.cta-box.has-video .small{color:#5C584F}
.cta-box.has-video .btn{background:var(--green);color:var(--white)}
.cta-box.has-video .btn:hover{background:var(--green-deep);color:var(--white)}
.cta-box.has-video .btn-line{background:transparent;border-color:rgba(20,20,18,.4);color:var(--ink)}
.cta-box.has-video .btn-line:hover{background:var(--green);color:var(--white);border-color:var(--green)}
@media (prefers-reduced-motion:reduce){.cta-box.has-video .ctavid{display:none}}