/* =========================================================
   Degré° — mobile-first · clair / sombre · animations GSAP
   Concept : la page a une température. --t (0 = chaud, 1 = froid)
   est piloté au scroll et colore l'accent, l'anneau du logo,
   les repères techniques et la progression.
   ========================================================= */
:root{
  --t:.5;
  --hot:#FF5A1F;
  --cold:#1E7BFF;
  --accent:color-mix(in oklab, var(--hot), var(--cold) calc(var(--t) * 100%));
  --wa:#25D366;
  --wa-d:#1EBE5B;

  --bg:#FFFFFF;
  --bg-soft:#F5F5F7;
  --card:#FFFFFF;
  --ink:#1D1D1F;
  --ink-2:#424245;
  --muted:#6E6E73;
  --line:#D2D2D7;
  --band:#000000;
  --band-card:#1C1C1E;
  --band-line:#2C2C2E;
  --band-ink:#F5F5F7;
  --band-muted:#A1A1A6;
  --draw-ink:#1D1D1F;
  --draw-fill:#FFFFFF;
  --draw-soft:#E8E8ED;
  --nav-bg:rgba(255,255,255,.72);
  --shadow:0 18px 50px -20px rgba(0,0,0,.22);
  --summer-a:#FFF1E8;
  --summer-b:#EAF3FF;

  --f-display:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-tech:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r:24px;
  --r-sm:14px;
  --nav-h:64px;
  --gx-l:max(20px, env(safe-area-inset-left,0px));
  --gx-r:max(20px, env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --bg-soft:#0E0E10; --card:#1C1C1E; --ink:#F5F5F7; --ink-2:#D1D1D6; --muted:#98989D; --line:#38383A;
    --band:#141416; --band-card:#232326; --band-line:#38383A; --band-ink:#F5F5F7; --band-muted:#A1A1A6;
    --draw-ink:#E8E8ED; --draw-fill:#0E0E10; --draw-soft:#2C2C2E; --nav-bg:rgba(0,0,0,.66);
    --shadow:0 18px 50px -20px rgba(0,0,0,.8); --summer-a:#1F120A; --summer-b:#08142A;
    --hot:#FF6B35; --cold:#3D8BFF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --bg-soft:#0E0E10; --card:#1C1C1E; --ink:#F5F5F7; --ink-2:#D1D1D6; --muted:#98989D; --line:#38383A;
  --band:#141416; --band-card:#232326; --band-line:#38383A; --band-ink:#F5F5F7; --band-muted:#A1A1A6;
  --draw-ink:#E8E8ED; --draw-fill:#0E0E10; --draw-soft:#2C2C2E; --nav-bg:rgba(0,0,0,.66);
  --shadow:0 18px 50px -20px rgba(0,0,0,.8); --summer-a:#1F120A; --summer-b:#08142A;
  --hot:#FF6B35; --cold:#3D8BFF; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:61;background:var(--bg)}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(44px,12vw,96px);font-weight:800;letter-spacing:-.05em}
h2{font-size:clamp(34px,8.4vw,64px)}
h3{font-size:21px;letter-spacing:-.025em;line-height:1.2}
p{margin:0}
.center{text-align:center}
.dim{color:var(--muted)}
.band .dim{color:var(--band-muted)}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--gx-l);padding-right:var(--gx-r)}
.narrow{max-width:780px}
.ico{width:20px;height:20px;flex:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---------- Boutons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,box-shadow .2s ease,color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-lg{min-height:56px;font-size:17px;padding:0 28px}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 26px -10px rgba(37,211,102,.7)}
.btn-wa:hover{background:var(--wa-d)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-light{background:var(--band-ink);color:#000}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn .ico{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.btn:hover .ico{transform:rotate(-12deg) scale(1.12)}
.link{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;margin-top:12px}
.text-link{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s ease;padding-bottom:2px}
.text-link:hover{background-size:100% 1.5px}

/* ---------- Marque ---------- */
.brand{display:inline-flex;align-items:flex-start;text-decoration:none;color:var(--ink)}
.brand-word{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.06em;line-height:1}
.ring{display:inline-block;border-radius:50%;box-shadow:inset 0 0 0 3px var(--accent)}
.ring-sm{width:11px;height:11px;margin-left:2px;margin-top:1px}
.brand-light{color:var(--band-ink)}

/* ---------- Header (fixe, hors du smoother) ---------- */
.nav{
  position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--nav-h);padding-left:var(--gx-l);padding-right:var(--gx-r);
  background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,height .3s ease,background-color .35s ease;
}
.nav.scrolled{border-bottom-color:var(--line);--nav-h:54px}
.nav-links{display:none}
.nav-right{display:flex;align-items:center;gap:8px}
.theme-btn{
  width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s ease;
}
.theme-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:block}
}

/* ---------- Eyebrow ---------- */
.eyebrow{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.eyebrow.center{justify-content:center}
.eyebrow.light{color:var(--band-muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--wa);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- Hero ---------- */
.hero{
  position:relative;max-width:1120px;margin:0 auto;
  padding:calc(var(--nav-h) + 36px) var(--gx-r) 64px var(--gx-l);
  display:grid;gap:44px;align-items:center;
}
.hero-text{position:relative;z-index:2}
.hero h1 .line{display:block}
.lead{font-size:19px;color:var(--muted);margin-top:22px;max-width:36ch}
.cta-row{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.cta-more{margin-top:16px;font-size:16px;color:var(--ink)}
.trust{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust .ico{width:16px;height:16px;color:var(--wa)}

.dial{position:relative;width:min(80vw,420px);aspect-ratio:1;max-width:100%;margin:0 auto;z-index:1}
.dial-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 200deg,var(--cold),#7C6CFF00 30%,var(--hot) 50%,#7C6CFF00 70%,var(--cold));
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 65%);mask:radial-gradient(circle,transparent 64%,#000 65%)}
.dial-ticks{position:absolute;inset:4%;border-radius:50%;
  background:repeating-conic-gradient(var(--line) 0 .6deg,transparent .6deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 78%,#000 79%,#000 84%,transparent 85%);mask:radial-gradient(circle,transparent 78%,#000 79%,#000 84%,transparent 85%)}
.dial-glow{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 200deg,var(--cold),var(--hot),var(--cold));filter:blur(70px);opacity:.28;z-index:-1}
.dial-core{position:absolute;inset:17%;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial-temp{font-family:var(--f-display);font-size:clamp(68px,19vw,120px);font-weight:700;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.dial-temp sup{font-size:.42em;vertical-align:top;position:relative;top:.18em;margin-left:2px;color:var(--accent)}
.dial-label{font-size:14px;color:var(--muted);font-weight:600;margin-top:8px}

/* ---------- Sections ---------- */
.section{padding-block:88px}
.section .sub{font-size:19px;color:var(--muted);margin:20px auto 0;max-width:42ch}
.soft{background:var(--bg-soft)}
.band{background:var(--band);color:var(--band-ink)}
.band .sub,.sub.light{color:var(--band-muted)}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.fine{font-size:13px;color:var(--muted);margin-top:22px;line-height:1.55}
.band .fine{color:var(--band-muted)}
.band .fine a{color:var(--band-ink)}

/* ---------- Installation ---------- */
.inst{padding-top:96px;padding-bottom:0}
.inst-head{max-width:780px}
.inst-head .sub{margin-left:0}
.inst-tabs{display:none}
.inst-chapters{display:grid;gap:72px;margin-top:48px;padding-bottom:88px}
.inst-ch{display:grid;gap:24px;align-items:center}
.inst-fig{position:relative;background:var(--bg-soft);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-width:100%}
.inst-fig svg{width:100%;height:100%}
.inst-fig .grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(var(--draw-soft) 1px,transparent 1px),linear-gradient(90deg,var(--draw-soft) 1px,transparent 1px);
  background-size:32px 32px;opacity:.55}
.inst-fig .fig-ref{position:absolute;left:16px;bottom:12px;font-family:var(--f-tech);font-size:11px;color:var(--muted)}
.inst-copy h3{font-size:clamp(26px,6vw,40px);letter-spacing:-.035em}
.inst-copy > p{color:var(--muted);margin-top:12px;font-size:17px;max-width:44ch}
.inst-legend{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:6px}
.inst-legend li{display:grid;grid-template-columns:26px 1fr;column-gap:10px;align-items:baseline;font-size:15px}
.inst-legend b{font-family:var(--f-tech);font-weight:500;font-size:12px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.inst-legend em{grid-column:2;font-style:normal;color:var(--muted);font-size:13px;display:none}
.inst-cta{margin-top:22px}

/* dessins techniques */
.draw .stroke{fill:var(--draw-fill);stroke:var(--draw-ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.draw .thin{fill:none;stroke:var(--draw-ink);stroke-width:1;opacity:.7}
.draw .soft{fill:var(--draw-soft);stroke:var(--draw-ink);stroke-width:1.2}
.draw .acc{fill:none;stroke:var(--accent);stroke-width:1.6}
.draw .accf{fill:var(--accent);stroke:none}
.draw .frame{fill:none;stroke:var(--draw-ink);stroke-width:1.2;stroke-dasharray:4 5;opacity:.45}
.draw .lead{stroke:var(--accent);stroke-width:1.2;fill:none}
.draw .tag circle{fill:var(--draw-fill);stroke:var(--accent);stroke-width:1.5}
.draw .tag text{font-family:var(--f-tech);font-size:13px;fill:var(--accent);text-anchor:middle;dominant-baseline:central}

/* Mode scène (activé par JS quand les animations sont permises) */
.inst.staged .inst-chapters{display:none}
.inst.staged .inst-stage{display:grid}
.inst-stage{display:none;position:relative;height:100svh;max-height:1000px;
  padding:calc(var(--nav-h) + 12px) var(--gx-r) 20px var(--gx-l);
  grid-template-rows:auto 1fr auto;gap:12px;max-width:1120px;margin:0 auto}
.stage-tabs{display:flex;gap:6px;background:var(--bg-soft);border-radius:999px;padding:4px;width:100%;max-width:440px;position:relative}
.stage-tabs button{flex:1;position:relative;z-index:1;font:inherit;font-size:14px;font-weight:600;border:0;background:transparent;color:var(--muted);padding:10px 6px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .25s}
.stage-tabs button.on{color:var(--ink)}
.stage-tabs .pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--card);box-shadow:0 2px 10px -4px rgba(0,0,0,.25)}
.stage-body{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0}
.stage-fig{position:relative;min-height:0}
.stage-fig .inst-fig{position:absolute;inset:0;aspect-ratio:auto;background:transparent}
.stage-fig .inst-fig .grid-bg{display:none}
.stage-copy{position:relative;min-height:150px}
.stage-copy .inst-copy{position:absolute;inset:0 0 auto}
.stage-copy .inst-copy > p{font-size:15px;margin-top:6px}
.stage-copy .inst-legend{grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:12px}
.stage-copy .inst-legend li{font-size:13px}
.stage-copy h3{font-size:26px}
.stage-foot{display:none;align-items:center;gap:14px}
@media (max-width:959px){
  .inst-stage{grid-template-rows:auto minmax(0,1fr);padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .stage-body{grid-template-rows:minmax(0,40svh) minmax(0,1fr)}
  .stage-copy{min-height:0}
}
.stage-foot .btn{flex:1}
.stage-progress{display:none}

/* ---------- Checker ---------- */
.checker{margin-top:36px}
.q-title{font-weight:700;font-size:18px;margin-bottom:14px}
.choices{display:grid;gap:10px}
.choices button{
  font:inherit;font-weight:600;text-align:left;padding:16px 18px;border-radius:var(--r-sm);
  background:var(--bg-soft);border:1.5px solid transparent;cursor:pointer;color:var(--ink);transition:border-color .15s,transform .15s;
}
.choices button:hover{border-color:var(--ink)}
.choices button:active{transform:scale(.98)}
.result{text-align:center}
.result-badge{width:64px;height:64px;border-radius:50%;margin:4px auto 14px;display:grid;place-items:center;font-size:30px;font-weight:800;color:#fff}
.result-badge.bad{background:#FF453A}
.result-badge.warn{background:#FF9F0A}
.result-badge.ok{background:var(--wa)}
.result-title{font-family:var(--f-display);font-size:26px;font-weight:700;letter-spacing:-.03em}
.result-text{color:var(--muted);margin:10px 0 22px}
.result .btn{width:100%}
.facts{display:grid;gap:12px;margin-top:28px}
.fact{background:var(--card);border-radius:var(--r-sm);padding:16px 18px;display:grid;gap:4px;font-size:15px;color:var(--muted)}
.fact b{color:var(--ink);font-size:15px}
.fact strong{color:var(--ink)}

/* ---------- Pourquoi ---------- */
.why{display:grid;gap:16px;margin-top:48px}
.why-card{background:var(--bg-soft);border-radius:var(--r);padding:30px 28px}
.why-num{display:block;font-family:var(--f-display);font-size:64px;font-weight:700;letter-spacing:-.06em;line-height:1;color:var(--accent);margin-bottom:18px;font-variant-numeric:tabular-nums}
.why-num small{font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.why-card p{color:var(--muted);margin-top:8px}

/* ---------- Abonnements ---------- */
.toggles{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px}
.seg{position:relative;display:flex;background:var(--band-card);border-radius:999px;padding:4px;width:100%;max-width:420px}
.seg button{position:relative;z-index:1;flex:1;font:inherit;font-size:15px;font-weight:600;border:0;background:transparent;color:var(--band-muted);padding:11px 8px;border-radius:999px;cursor:pointer;transition:color .25s;white-space:nowrap}
.seg button.on{color:#000}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--band-ink)}
.seg:not(.has-pill) button.on{background:var(--band-ink)}
.seg-small{max-width:300px}
.seg em{font-style:normal;color:var(--wa);font-size:13px}
.seg button.on em{color:var(--wa-d)}

.plans{display:grid;gap:16px;margin-top:34px;perspective:1200px}
.plan{position:relative;background:var(--band-card);border-radius:var(--r);padding:30px 24px;display:flex;flex-direction:column}
.plan h3{font-size:26px}
.plan-tag{color:var(--band-muted);margin-top:6px;font-size:15px}
.price{margin-top:22px;font-family:var(--f-display);font-size:52px;font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.per{font-family:var(--f-body);font-size:16px;font-weight:500;color:var(--band-muted);letter-spacing:0;margin-left:4px}
.price-alt{font-size:13px;color:var(--band-muted);margin-top:8px;min-height:1.5em}
.plan ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px;font-size:15px;flex:1}
.plan li{padding-left:26px;position:relative;color:var(--band-ink)}
.plan li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--accent)}
.plan .btn{width:100%}
.featured{background:#FFFFFF;color:#1D1D1F;box-shadow:0 0 0 2px var(--accent),0 30px 70px -24px color-mix(in oklab,var(--accent),transparent 40%)}
.featured .plan-tag,.featured .per,.featured .price-alt{color:#6E6E73}
.featured li{color:#1D1D1F}
.badge{position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.01em}

.duo{margin-top:20px;border-radius:var(--r);padding:22px 24px;background:var(--band-card);display:flex;flex-direction:column;gap:14px;align-items:flex-start;color:var(--band-muted)}
.duo b{color:var(--band-ink)}
.duo-title{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--band-ink);margin-bottom:4px}
.compare{margin-top:20px;border-radius:var(--r);padding:20px 24px;border:1px solid var(--band-line)}
.compare-title{font-weight:600;margin-bottom:10px}
.compare-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--band-line);color:var(--band-muted);font-size:15px}
.compare-row b{color:var(--band-ink);font-variant-numeric:tabular-nums}

/* ---------- Services ---------- */
.services{display:grid;gap:14px;margin-top:48px}
.svc{background:var(--bg-soft);border-radius:var(--r);padding:28px 26px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.svc p{color:var(--muted);margin-top:8px;font-size:16px}
.svc-ico{width:32px;height:32px;color:var(--accent);margin-bottom:20px}
.svc-hero{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden;padding:34px 26px}
.svc-hero .halo{position:absolute;width:320px;height:320px;right:-110px;top:-110px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.55;pointer-events:none}
.svc-hero > *:not(.halo){position:relative;z-index:1}
.svc-hero h3{font-size:32px;letter-spacing:-.035em}
.svc-hero p{color:var(--band-muted)}
.svc-tag{display:inline-block;font-size:13px;font-weight:600;background:rgba(255,255,255,.12);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.svc-link{display:inline-block;margin-top:20px;font-weight:600;color:var(--band-ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;transition:background-size .35s}
.svc-link:hover{background-size:0 1.5px;background-position:100% 100%}

/* ---------- Été ---------- */
.summer{position:relative;overflow:hidden;background:var(--summer-a)}
.summer .cool{position:absolute;inset:0;background:var(--summer-b);opacity:0;pointer-events:none}
.summer .wrap{position:relative}
.summer h2{font-size:clamp(30px,7.4vw,56px)}
.summer .btn{margin-top:30px}

/* ---------- Pro ---------- */
#pro h2,#pro .sub{text-align:left;margin-left:0}
.pro-grid{display:grid;gap:14px;margin-top:38px}
.pro-card{background:var(--band-card);border-radius:var(--r);padding:28px 26px}
.pro-price{font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-.04em;margin:12px 0 4px}
.pro-price span{font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--band-muted);letter-spacing:0;margin-left:4px}
.pro-card ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;color:var(--band-muted);font-size:15px}
.pro-card li{padding-left:16px;position:relative}
.pro-card li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1.5px;background:var(--accent)}
#pro .btn-lg{margin-top:30px;width:100%}

/* ---------- Étapes ---------- */
.steps-wrap{position:relative}
.steps{list-style:none;padding:0;margin:48px 0 0;display:grid;gap:14px;position:relative}
.steps-track{position:absolute;left:21px;top:24px;bottom:24px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.steps-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(1)}
.steps li{position:relative;display:flex;gap:18px;align-items:flex-start;padding:6px 0 18px}
.step-n{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--f-display);font-weight:700;display:grid;place-items:center;font-size:18px;transition:background-color .3s,color .3s}
.steps.is-anim li:not(.on) .step-n{background:var(--bg-soft);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.steps li > div{min-width:0}
.steps p{color:var(--muted);margin-top:6px;font-size:16px}

/* ---------- FAQ ---------- */
.faq{margin-top:38px;display:grid;gap:10px}
.faq details{background:var(--card);border-radius:var(--r-sm);padding:0 20px}
.faq summary{list-style:none;cursor:pointer;font-weight:600;padding:19px 30px 19px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--muted),var(--muted)) center/14px 1.8px no-repeat,linear-gradient(var(--muted),var(--muted)) center/1.8px 14px no-repeat;transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{overflow:hidden}
.faq .ans p{color:var(--muted);padding-bottom:19px;font-size:16px}

/* ---------- Contact ---------- */
.quick{margin-top:34px;display:grid;gap:14px}
.quick label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.quick select,.quick input{
  font:inherit;font-size:17px;color:var(--ink);font-weight:500;
  padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background-color:var(--bg-soft);
  -webkit-appearance:none;appearance:none;width:100%;
}
.quick select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238E8E93' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.quick select:focus,.quick input:focus{outline:none;border-color:var(--accent);background-color:var(--card)}
.quick .btn{width:100%}

/* ---------- Footer ---------- */
.footer{background:var(--band);color:var(--band-muted);padding-block:56px 110px;font-size:14px}
.footer p{margin-top:16px}
.footer a{color:var(--band-ink);text-decoration:none}
.footer .legal{font-size:12px}
.footer .legal a{color:var(--band-muted)}

/* ---------- WhatsApp flottant (mobile) ---------- */
.wa-float{
  position:fixed;z-index:60;left:var(--gx-l);right:var(--gx-r);bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:999px;
  background:var(--wa);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 14px 34px -10px rgba(0,0,0,.45);
  transform:translateY(160%);transition:transform .45s cubic-bezier(.2,.9,.25,1.15);
}
.wa-float.show{transform:none}
.wa-float .ico{width:22px;height:22px}

/* split text */
.split-line{overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}

@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
  .wa-float{transition:none}
  body{transition:none}
}

/* =========================================================
   Tablette & desktop
   ========================================================= */
@media (min-width:700px){
  :root{--gx-l:max(32px, env(safe-area-inset-left,0px));--gx-r:max(32px, env(safe-area-inset-right,0px))}
  .cta-row{flex-direction:row}
  .why{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:1fr 1fr}
  .choices{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .svc-hero{grid-column:1/-1}
  .pro-grid{grid-template-columns:repeat(3,1fr)}
  .duo{flex-direction:row;align-items:center;justify-content:space-between}
  #pro .btn-lg{width:auto}
  .quick{grid-template-columns:1fr 1fr}
  .quick label:first-child{grid-column:1/-1}
  .quick .fine{grid-column:1/-1}
  .inst-legend em{display:block}
  .inst-ch{grid-template-columns:1.2fr 1fr;gap:48px}
  .inst-ch:nth-child(even) .inst-fig{order:2}
  .steps{grid-template-columns:repeat(3,1fr);gap:28px}
  .steps-track{left:22px;right:22px;top:21px;bottom:auto;width:auto;height:2px}
  .steps-fill{transform-origin:left;transform:scaleX(1)}
  .steps li{flex-direction:column;padding:0}
}
@media (min-width:960px){
  .wa-float{display:none}
  .footer{padding-bottom:56px}
  .nav-links{display:flex;gap:26px;font-size:14px}
  .nav-links a{text-decoration:none;color:var(--muted);transition:color .2s}
  .nav-links a:hover{color:var(--ink)}
  .hero{grid-template-columns:1.1fr 1fr;padding-top:calc(var(--nav-h) + 72px);padding-bottom:110px}
  .section{padding-block:128px}
  .plans{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .services{grid-template-columns:repeat(3,1fr)}
  .svc-hero{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:end;padding:48px}
  .svc-hero .svc-tag,.svc-hero h3{grid-column:1}
  .svc-hero p,.svc-hero .svc-link{grid-column:2}
  .svc-hero h3{font-size:48px}
  .inst-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);grid-template-rows:auto 1fr;column-gap:48px;padding-top:calc(var(--nav-h) + 32px);padding-bottom:40px}
  .stage-tabs{grid-column:1;align-self:start}
  .stage-body{display:contents}
  .stage-fig{grid-column:2;grid-row:1 / span 2}
  .stage-copy{grid-column:1;grid-row:2;min-height:0}
  .stage-copy .inst-copy{top:20px}
  .stage-copy .inst-copy > p{font-size:17px}
  .stage-copy .inst-legend{grid-template-columns:1fr;gap:8px}
  .stage-copy .inst-legend li{font-size:15px}
  .stage-foot{display:flex;position:absolute;left:var(--gx-l);bottom:40px;width:calc(43% - 40px)}
  .stage-copy h3{font-size:40px}
  .stage-progress{display:block;flex:none;width:120px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
  .stage-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
  .stage-foot .btn{flex:none}
}