/* ==========================================================================
   CT Conseil — système de design (thèmes sombre / clair, composants, layout)
   ========================================================================== */

@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/dm-sans-latin-opsz-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/dm-sans-latin-ext-opsz-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/dm-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --f:"DM Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --accent:#5266EB; --accent-hi:#6677F2; --accent-ink:#fff;
  /* États : teintes sobres et désaturées (sauge, ambre, brique), marqueurs en losange plutôt qu'en pastille */
  --ok:#7DB59C; --warn:#CFA45C; --bad:#C97A7A; --info:#8A97C9;
  --r-lg:26px; --r-md:16px; --r-sm:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(16px,4vw,40px);
  --header-h:64px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F0F18; --bg-2:#13131E; --bg-top:#171721; --veil:22,22,36;
  --card:#181824; --card-2:#1F1F2C; --glass:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --text:#EDEDF3; --text-2:#A7A8BA; --text-3:#6F7085;
  --chip:rgba(156,180,232,.16); --chip-text:#CAD4F6;
  --particle:236,238,255; --glow:82,102,235;
  --fluid-a:98,120,255; --fluid-b:214,226,255; --glow-2:140,120,205; --sheen:rgba(255,255,255,.12);
  --shadow:0 40px 80px -40px rgba(0,0,0,.8);
  --ok-bg:rgba(63,174,124,.16); --warn-bg:rgba(224,138,79,.16); --bad-bg:rgba(217,83,79,.16);
}
:root[data-theme="light"]{
  /* Thème clair : pas de reflets bleus ni de couleur secondaire ; gris anthracite proche du noir. */
  color-scheme:light;
  --accent:#1C1C24; --accent-hi:#2B2B36; --accent-ink:#FFFFFF;
  --bg:#F5F5F7; --bg-2:#FFFFFF; --bg-top:#EEEEF1; --veil:252,252,254;
  --card:#FFFFFF; --card-2:#F1F1F4; --glass:rgba(255,255,255,.6);
  --line:rgba(20,20,26,.08); --line-2:rgba(20,20,26,.16);
  --text:#141418; --text-2:#4C4C57; --text-3:#7B7B87;
  --chip:rgba(28,28,36,.08); --chip-text:#1C1C24;
  --particle:40,40,52; --glow:64,64,80;
  --fluid-a:112,112,128; --fluid-b:236,236,242; --glow-2:90,90,104; --sheen:rgba(20,20,26,.07);
  --shadow:0 30px 60px -30px rgba(20,20,30,.25);
  --ok-bg:rgba(63,174,124,.12); --warn-bg:rgba(224,138,79,.14); --bad-bg:rgba(217,83,79,.12);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:16px;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s,color .5s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
h1,h2,h3,h4{font-weight:460;letter-spacing:.005em;text-wrap:balance;line-height:1.15}
ul,ol{padding:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:16px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:860px;margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide-mobile{}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hi)}
:root[data-theme="light"] .eyebrow{color:var(--accent)}
.h1{font-size:clamp(38px,5vw,64px);line-height:1.05;font-weight:470;letter-spacing:-.01em}
.h2{font-size:clamp(30px,3.4vw,44px)}
.h3{font-size:clamp(22px,2.2vw,28px)}
.lede{color:var(--text-2);font-size:clamp(16px,1.35vw,19px);line-height:1.55;max-width:60ch}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.sec{padding-block:clamp(72px,9vw,128px);position:relative;overflow-x:clip}
/* Voile de lisibilité (règle 31) : couche translucide entre le texte et les particules, limitée à la colonne de contenu,
   bords fondus (les particules restent visibles autour et à travers) ; fondu à l'entrée / à la sortie de la section. */
.sec>.wrap{position:relative}
.sec>.wrap::before,.hero>.hero-inner::before{content:"";position:absolute;inset:-40px max(-36px,calc(-1 * var(--gutter)));z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease);background:rgba(var(--veil),.6);-webkit-mask-image:radial-gradient(farthest-side at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(farthest-side at 50% 50%,#000 58%,transparent 100%)}
.sec.is-veiled>.wrap::before{opacity:1}
/* Héros : voile toujours présent (c'est la section active à l'arrivée), sauf pendant l'entrée où le logo en particules doit rester net ;
   le débord latéral ne dépasse jamais la fenêtre (pas d'espace blanc sur le côté sur mobile). */
.hero>.hero-inner::before{inset:-40px 0;z-index:-1;opacity:1}
html.is-intro .hero>.hero-inner::before{opacity:0}
.sec>.wrap>*{position:relative;z-index:1}
.sec-tight{padding-block:clamp(48px,6vw,80px)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,60px);max-width:820px}
.sec-head.center{margin-inline:auto;justify-items:center}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- particules (fond fixe, 3 couches) ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 55% at 30% 0%,rgba(var(--glow),.16),transparent 70%),radial-gradient(50% 40% at 90% 30%,rgba(var(--glow-2),.12),transparent 70%),var(--bg);transition:background .6s}
.field canvas{position:absolute;inset:0;width:100%;height:100%}
.site-header,.main,.site-footer{position:relative;z-index:1}
.scroll-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi));transform-origin:left;transform:scaleX(0)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:40px;font-size:15px;font-weight:450;white-space:nowrap;transition:background .3s cubic-bezier(0,0,.2,1),color .3s,border-color .3s,transform .3s;border:1px solid transparent;position:relative;isolation:isolate;overflow:hidden}
.btn>:not(.btn-fluid){position:relative;z-index:1}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-primary:active{transform:scale(.985)}
/* Effet « fluide » (canvas injecté par fluid.js au survol) : lumière liquide qui suit le pointeur */
.btn-fluid{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .5s ease-out;border-radius:inherit;will-change:opacity;filter:blur(2px)}
.btn-fluid.is-on{opacity:.95;transition-duration:0ms}
.btn-ghost{color:var(--text);border-color:var(--line-2);background:var(--chip-soft,transparent)}
.btn-ghost:hover{background:var(--chip)}
/* Lueur intérieure qui suit le pointeur (tous les boutons) : visible même sans le canvas fluide */
.btn::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:radial-gradient(140px 70px at var(--mx,50%) var(--my,50%),var(--sheen),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.btn:hover::before{opacity:1}
.btn-primary::before{background:radial-gradient(150px 80px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 70%)}
.btn-soft{background:var(--chip);color:var(--text)}
.btn-soft:hover{background:var(--line-2)}
.btn svg{width:14px;height:14px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.link{color:var(--accent-hi);display:inline-flex;align-items:center;gap:6px;font-weight:450}
:root[data-theme="light"] .link{color:var(--accent)}
.link svg{width:14px;height:14px;transition:transform .2s}
.link:hover svg{transform:translateX(3px)}

/* ---------- en-tête ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-img{height:44px;width:auto;display:block;transition:opacity .3s}
.logo-img-dark{display:none}
:root[data-theme="light"] .logo-img-light{display:none}
:root[data-theme="light"] .logo-img-dark{display:block}
.site-footer .logo-img{height:56px}
.nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav > a,.nav-group > summary{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:40px;font-size:15px;color:var(--text);cursor:pointer;list-style:none;white-space:nowrap;transition:background .2s}
.nav-group > summary::-webkit-details-marker{display:none}
.nav > a:hover,.nav-group > summary:hover,.nav > a.is-active{background:var(--chip)}
.nav-group{position:relative}
.nav-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:380px;display:grid;gap:4px;padding:8px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);animation:pop .2s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-menu-item{display:grid;gap:2px;padding:10px 12px;border-radius:12px;transition:background .2s}
.nav-menu-item:hover,.nav-menu-item.is-active{background:var(--chip)}
.nav-menu-title{font-weight:460}
.nav-menu-desc{font-size:13px;color:var(--text-2)}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.lang-switch{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:8px 10px;border-radius:40px;border:1px solid var(--line-2)}
.lang-switch:hover{background:var(--chip)}
.theme-switch{display:inline-flex;align-items:center;padding:4px}
.theme-track{position:relative;width:40px;height:22px;border-radius:22px;background:var(--line-2);display:block;transition:background .3s}
.theme-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform .3s var(--ease),background .3s}
:root[data-theme="light"] .theme-knob{transform:translateX(18px);background:var(--accent)}
.burger{display:none;width:40px;height:40px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:1.6px;background:var(--text);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.mobile-nav{display:grid;gap:2px;padding:8px var(--gutter) 20px;border-top:1px solid var(--line);background:var(--bg-2)}
.mobile-nav a{padding:12px 6px;font-size:17px;border-bottom:1px solid var(--line)}
.mobile-nav a.is-active{color:var(--accent-hi)}
.mobile-nav .btn{margin-top:12px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-items:center;padding-block:clamp(56px,8vw,96px);overflow:hidden}
.hero-inner{display:grid;justify-items:center;text-align:center;gap:22px;position:relative;z-index:2}
/* Entrée du site : le contenu du hero attend que les particules aient formé le logo (html.is-intro, retiré par field.js). */
.hero-inner > *{transition:opacity .9s var(--ease)}
html.is-intro .hero-inner > *{opacity:0!important}
.hero .lede{text-align:center;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.hero-fine{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px;font-size:13px;color:var(--text-3)}
.hero-fine span{display:inline-flex;align-items:center;gap:8px}
.hero-fine span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.hero-sub{position:relative;min-height:60vh;display:grid;align-items:center;padding-block:clamp(48px,6vw,80px)}
.hero-sub .hero-inner{justify-items:start;text-align:left}
.hero-sub .lede{text-align:left}
.hero-sub .hero-cta{justify-content:flex-start}
.hero-word{display:inline-block}
.hero-word > span{display:inline-block;transform:translateY(110%);opacity:0}
.hero-ready .hero-word > span{animation:rise .9s var(--ease) forwards}
@keyframes rise{to{transform:none;opacity:1}}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid var(--line-2);border-radius:14px;z-index:2}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:var(--text-2);transform:translateX(-50%);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{transform:translate(-50%,10px);opacity:.2}}

/* ---------- cartes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);display:grid;gap:14px;align-content:start;transition:border-color .25s,transform .25s,background .25s;position:relative;overflow:hidden}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-link{cursor:pointer}
.card .ico{width:44px;height:44px;border-radius:14px;background:var(--chip);color:var(--accent-hi);display:grid;place-items:center}
:root[data-theme="light"] .card .ico{color:var(--accent)}
.card .ico svg{width:22px;height:22px}
.card h3{font-size:22px}
.card p{color:var(--text-2);font-size:15px}
.card ul{list-style:none;display:grid;gap:8px}
.card li{display:flex;gap:10px;font-size:15px;color:var(--text-2)}
.card li svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--accent-hi)}
.card .card-cta{margin-top:auto}
.glass{background:linear-gradient(160deg,var(--glass),transparent);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.card-glow::before{content:"";position:absolute;inset:-40%;background:radial-gradient(40% 40% at 50% 50%,rgba(var(--glow),.25),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none;transform:translate(var(--mx,0),var(--my,0))}
.card-glow:hover::before{opacity:1}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:500;background:var(--chip);color:var(--chip-text);white-space:nowrap}
.tag-ok,.tag-warn,.tag-bad{background:var(--glass);border:1px solid var(--line-2);color:var(--text-2);padding-left:8px}
.tag-ok::before,.tag-warn::before,.tag-bad::before,.dia::before{content:"";width:7px;height:7px;flex:none;transform:rotate(45deg);border-radius:1.5px;background:var(--st,var(--text-3))}
.tag-ok{--st:var(--ok)}.tag-warn{--st:var(--warn)}.tag-bad{--st:var(--bad)}
.dia{display:inline-flex;align-items:center;gap:8px}
.dia-ok{--st:var(--ok)}.dia-warn{--st:var(--warn)}.dia-bad{--st:var(--bad)}.dia-neutral{--st:var(--text-3)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:40px;background:var(--chip);font-size:14px}
.pill b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--chip-text)}

/* ---------- statistiques animées ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--line-2)}
.stat b{font-size:clamp(34px,3.6vw,50px);font-weight:400;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{color:var(--text-2);font-size:15px}

/* ---------- méthode (6 étapes) : cartes 3 × 2, fil conducteur qui se remplit au scroll ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;gap:10px;align-content:start;padding:26px 22px 24px;border-radius:var(--r-md);border:1px solid var(--line);background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;transition:border-color .5s,transform .5s var(--ease)}
.step::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--line-2)}
.step::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.step.is-on::after{transform:none}
.steps:not(.steps-compact) .step:nth-child(3n+2)::after,.steps:not(.steps-compact) .step:nth-child(3n+2) .step-dot{transition-delay:.18s}
.steps:not(.steps-compact) .step:nth-child(3n)::after,.steps:not(.steps-compact) .step:nth-child(3n) .step-dot{transition-delay:.36s}
.step.is-on{border-color:var(--line-2)}
.step-head{display:flex;align-items:center;gap:12px}
.step-dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--bg);border:1.5px solid var(--text-3);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--text-2);transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.step.is-on .step-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 6px rgba(var(--glow),.18)}
.step b{font-weight:460;font-size:18px;letter-spacing:-.005em}
.step p{color:var(--text-2);font-size:14.5px;line-height:1.5}
.step .tag{justify-self:start;margin-top:4px}
.step-next{position:absolute;right:16px;top:22px;color:var(--text-3);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
/* variante compacte (colonne étroite) : frise verticale */
.steps-compact{grid-template-columns:1fr;gap:0}
.steps-compact .step{padding:12px 0 14px 52px;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:4px;overflow:visible} /* overflow visible : le halo des pastilles n'est plus tronqué */
.steps-compact .step::before,.steps-compact .step::after{left:21px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top}
.steps-compact .step::after{transform:scaleY(0)}
.steps-compact .step.is-on::after{transform:none}
.steps:not(.steps-compact) .step:nth-child(3n+2)::after,.steps:not(.steps-compact) .step:nth-child(3n+2) .step-dot{transition-delay:.18s}
.steps:not(.steps-compact) .step:nth-child(3n)::after,.steps:not(.steps-compact) .step:nth-child(3n) .step-dot{transition-delay:.36s}
.steps-compact .step:first-child::before,.steps-compact .step:first-child::after{top:14px}
.steps-compact .step:last-child::before,.steps-compact .step:last-child::after{bottom:auto;height:14px}
.steps-compact .step-dot{position:absolute;left:8px;top:12px;width:28px;height:28px}
.steps-compact .step-head{min-height:28px}
.steps-compact .step b{font-size:15.5px}
.steps-compact .step p{font-size:13.5px}
.steps-compact .step-next{display:none}

/* ---------- respiration musicale (accueil) ---------- */
.sound{position:relative;min-height:clamp(600px,92vh,860px);display:grid;overflow:hidden;background:radial-gradient(55% 45% at 50% 22%,rgba(var(--glow),.14),transparent 70%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 100%);border-block:1px solid var(--line);cursor:crosshair;z-index:1}
.sound canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.sound-inner{position:relative;z-index:2;display:grid;justify-items:center;align-content:start;text-align:center;gap:14px;padding-top:clamp(72px,11vh,120px);pointer-events:none}
.sound-inner>*{pointer-events:auto}
.sound .h2{max-width:20ch}
.sound .lede{text-align:center;max-width:56ch}
.play{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 24px 0 18px;border-radius:40px;margin-top:12px;background:var(--glass);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:16px;font-weight:450;transition:background .2s,border-color .2s,color .2s;cursor:pointer}
.play:hover{background:var(--chip)}
.play[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px;width:17px}
.eq i{width:3px;height:30%;border-radius:2px;background:currentColor}
.is-playing .eq i{animation:eq 1.1s ease-in-out infinite}
.is-playing .eq i:nth-child(2){animation-delay:-.35s}
.is-playing .eq i:nth-child(3){animation-delay:-.7s}
.is-playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}
.sound-meta{font-family:var(--mono);font-size:12px;color:var(--text-3);min-height:1.4em}
.sound-hint{position:absolute;z-index:2;left:0;right:0;bottom:24px;text-align:center;font-size:13px;color:var(--text-3);pointer-events:none;padding-inline:16px}
.mini{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:40px;background:var(--card);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;color:var(--text-2);box-shadow:var(--shadow)}
.mini .eq{color:var(--accent-hi)}
.mini button{width:32px;height:32px;border-radius:50%;background:var(--chip);display:grid;place-items:center}
.mini button:hover{background:var(--line-2)}
.mini svg{width:14px;height:14px}

/* ---------- remonter en haut (tous écrans, dès qu'on a défilé) ---------- */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:59;width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line-2);color:var(--text);display:none;place-items:center;box-shadow:var(--shadow);opacity:0;transform:translateY(14px) scale(.9);transition:opacity .3s,transform .3s var(--ease),background .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.to-top svg{width:18px;height:18px}
.to-top:active{background:var(--chip)}
.to-top:not([hidden]){display:grid}
.to-top:hover{background:var(--chip)}
.to-top.is-on{opacity:1;transform:none}
body.to-top-on .mini{bottom:calc(72px + env(safe-area-inset-bottom,0px))}

/* ---------- easter eggs écrans ultra-larges (activés par wide.js : html[data-wide]) ---------- */
.wide-badge{display:none;position:fixed;top:16px;right:48px;z-index:51;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--text-2);transition:border-color .2s,color .2s,background .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-wide] .wide-badge:not([hidden]){display:inline-flex}
.wide-badge:hover{border-color:var(--accent-hi);color:var(--text)}
.wide-badge.is-hit{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.wide-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(63,174,124,.5);animation:wdot 2.4s ease-out infinite}
@keyframes wdot{0%{box-shadow:0 0 0 0 rgba(63,174,124,.45)}70%{box-shadow:0 0 0 8px rgba(63,174,124,0)}100%{box-shadow:0 0 0 0 rgba(63,174,124,0)}}
.wing{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:250px;pointer-events:none;opacity:.62;display:grid;gap:14px;font-family:var(--mono);font-size:11.5px;color:var(--text-3);transition:opacity .5s}
.wing-left{left:48px}.wing-right{right:48px}
.wing-title{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;color:var(--text-2)}
.radar-scope{width:220px;height:220px}
.radar-scope circle,.radar-scope line{fill:none;stroke:var(--line-2);stroke-width:1}
.radar-scope .blip circle{fill:var(--accent-hi);stroke:none;animation:blip 3.5s var(--d,0s) ease-out infinite}
.radar-scope .blip text{fill:var(--text-3);font-size:9px;font-family:var(--mono)}
@keyframes blip{0%{opacity:.25}12%{opacity:1}100%{opacity:.25}}
.radar-sweep{transform-origin:100px 100px;animation:sweep 3.5s linear infinite}
.radar-sweep path{fill:rgba(var(--glow),.22);stroke:none}
@keyframes sweep{to{transform:rotate(360deg)}}
.wing-line{border-top:1px solid var(--line);padding-top:10px;color:var(--text-3)}
.wing-data{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
.wing-data dt{color:var(--text-3)}
.wing-data dd{margin:0;color:var(--text-2);font-variant-numeric:tabular-nums}
.wing-bars{display:flex;gap:4px;align-items:flex-end;height:26px}
.wing-bars i{flex:1;background:var(--line-2);border-radius:2px;animation:wbar 2.2s ease-in-out infinite;height:30%}
.wing-bars i:nth-child(2n){animation-delay:-.6s}.wing-bars i:nth-child(3n){animation-delay:-1.1s}.wing-bars i:nth-child(5n){animation-delay:-1.7s}
@keyframes wbar{0%,100%{height:25%}50%{height:100%}}
.wide-footer{margin-top:18px;font-size:12px;color:var(--text-3)}
body.modal-open .wing{opacity:0}
@media (max-width:2600px){.wing{width:220px;opacity:.5}.wing-left{left:28px}.wing-right{right:28px}}

/* ---------- accordéon + scène ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;text-align:left;font-size:18px;font-weight:450}
.chev{width:32px;height:32px;flex:none;border-radius:50%;background:var(--chip);display:grid;place-items:center;transition:transform .3s,background .2s}
.chev svg{width:14px;height:14px}
.acc-item.open .chev{transform:rotate(180deg);background:var(--line-2)}
.acc-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body > div{overflow:hidden;min-width:0}
.acc-body p{color:var(--text-2);padding-bottom:20px;max-width:48ch}
.acc-slot{padding-bottom:20px}
.acc-slot:empty{display:none}
.stage{position:sticky;top:calc(var(--header-h) + 24px);border-radius:var(--r-lg);min-height:520px;border:1px solid var(--line);display:grid;place-items:center;padding:clamp(20px,4vw,48px);overflow:hidden;background:radial-gradient(55% 45% at 15% 95%,rgba(var(--glow),.28),transparent 70%),radial-gradient(45% 40% at 95% 5%,rgba(var(--glow-2),.16),transparent 70%),var(--card)}
.vis{width:min(470px,100%);display:grid;gap:16px}
.acc-slot .vis{width:100%;border-radius:20px;padding:18px;background:var(--card);border:1px solid var(--line)}
.prompt{justify-self:end;background:var(--chip);border:1px solid var(--line);padding:9px 15px;border-radius:12px;font-size:15px;max-width:92%}
.ui{background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;padding:18px;display:grid;gap:14px;box-shadow:var(--shadow)}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-head b{font-weight:450;font-size:16px}
.ui-note{font-size:12px;color:var(--text-3)}
.rows{display:grid}
.row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.row:last-child{border-bottom:0}
.row span:first-child{color:var(--text-3)}
.row span:last-child{text-align:right}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:12px;font-size:14px}
.bar-row .track{display:block;height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.bar-row .fill{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-hi));transition:width 1.2s var(--ease)}
.bar-row .val{font-family:var(--mono);font-size:12px;color:var(--text-2);min-width:36px;text-align:right}

.link-verdict{display:flex;align-items:center;gap:10px}
.link-reasons{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--text-2)}
.link-reasons li{align-items:flex-start;line-height:1.45}
.link-reasons li::before{margin-top:7px}
#tool-link .rows .row span:last-child{max-width:72%}
#tool-ids .rows{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
@media (max-width:900px){#tool-ids .rows{grid-template-columns:1fr}}

/* ---------- graphique en barres (Mercury-like) ---------- */
/* Paliers calés par la géométrie (grille 4 bandes, étiquettes centrées dans leur bande) : aucun décalage « à l'œil ».
   Colonnes en minmax(0,1fr) et libellés jamais rognés, y compris sur mobile (étiquettes des paliers en surimpression). */
.chart{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;font-size:12px;color:var(--text-3);min-width:0;--plot-h:190px;--chart-gap:clamp(6px,2.4vw,14px)}
.chart-y{display:grid;grid-template-rows:repeat(4,1fr);align-items:center;height:var(--plot-h);text-align:right;font-family:var(--mono);font-size:11px;line-height:1;white-space:nowrap}
.chart-plot{position:relative;height:var(--plot-h);min-width:0;background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.3px);background-size:14px 25%;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:var(--chart-gap);padding-inline:8px}
.chart .bar{min-width:0;border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(var(--glow-2),.9) 0%,rgba(var(--glow-2),.5) 60%,rgba(var(--glow-2),.15) 100%);border-top:2px solid rgba(var(--fluid-b),.9);height:0;transition:height 1.1s var(--ease)}
.chart .target{position:absolute;left:0;right:0;border-top:1px solid var(--text-2);pointer-events:none}
.chart .target span{position:absolute;right:0;bottom:4px;background:var(--text);color:var(--bg);font-size:11px;font-weight:500;line-height:1.2;padding:2px 7px;border-radius:5px;white-space:nowrap}
.chart-x{grid-column:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--chart-gap);padding:8px 8px 0;text-align:center;line-height:1.2}
.chart-x span{min-width:0;white-space:nowrap}
.chart-phase{display:inline-block;color:var(--text-2);font-weight:500}
.chart-phase.is-swap{animation:phase-in .7s var(--ease)}
@keyframes phase-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:480px){
  .chart{grid-template-columns:minmax(0,1fr)}
  /* paliers en surimpression à droite (la colonne « Données » est basse) et cible à gauche : rien ne se chevauche */
  .chart-y{position:absolute;right:4px;top:0;z-index:1;text-align:right;pointer-events:none;justify-items:end;font-size:9.5px}
  .chart-y span{padding:2px 5px;border-radius:4px;background:color-mix(in srgb,var(--bg-2) 82%,transparent);backdrop-filter:blur(2px)}
  .chart .target span{right:auto;left:0}
  .chart-x{grid-column:1;font-size:clamp(9.5px,2.6vw,12px)}
  .acc-slot .vis{padding:14px}
  .ui{padding:14px}
}

/* ---------- radar (résultat du jeu) ---------- */
.radar{width:min(320px,100%);margin-inline:auto}
.radar polygon.area{fill:rgba(var(--glow),.25);stroke:var(--accent-hi);stroke-width:1.5}
.radar .grid{fill:none;stroke:var(--line-2)}
.radar text{fill:var(--text-2);font-size:11px;font-family:var(--mono)}

/* ---------- jeu de niveau ---------- */
/* ---------- veille par spécialité (règle 36) ---------- */
.veille-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.veille-card{display:grid;gap:10px;align-content:start;padding:20px 22px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:inherit;min-width:0;transition:border-color .25s,transform .25s,opacity .6s var(--ease),translate .6s var(--ease);opacity:0;translate:0 10px}
.veille.is-loaded .veille-card{opacity:1;translate:0 0}
.veille-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.veille-card b{font-weight:460;font-size:16px;line-height:1.3;text-wrap:pretty;overflow-wrap:anywhere}
.veille-card p{font-size:14px;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.veille-head,.veille-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;min-width:0}
.veille-src{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--chip);color:var(--chip-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veille-date{color:var(--text-3);font-size:11px;white-space:nowrap}
.veille-foot{margin-top:auto;padding-top:4px;color:var(--text-3)}
.veille-arrow{transition:transform .25s var(--ease)}
.veille-card:hover .veille-arrow{transform:translateX(4px)}
.veille-meta{margin-top:18px;font-size:13px}
.veille-skel{opacity:1;translate:0 0;min-height:150px}
.veille-skel span,.veille-skel b,.veille-skel p{display:block;border-radius:6px;background:linear-gradient(90deg,var(--glass) 0%,var(--chip) 50%,var(--glass) 100%);background-size:200% 100%;animation:veille-shimmer 1.6s linear infinite}
.veille-skel span{width:38%;height:22px;border-radius:999px}.veille-skel b{height:40px;margin-top:4px}.veille-skel p{height:54px}
@keyframes veille-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.veille.is-empty .veille-grid{display:none}
@media (max-width:980px){.veille-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.veille-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.veille-card{opacity:1;translate:0 0;transition:none}.veille-skel span,.veille-skel b,.veille-skel p{animation:none}}

.quiz{border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,var(--card),var(--bg-2));overflow:hidden;position:relative}
.quiz-inner{padding:clamp(22px,4vw,44px);display:grid;gap:22px;min-height:420px;align-content:start}
.quiz-progress{display:flex;gap:6px}
.quiz-progress i{flex:1;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;position:relative}
.quiz-progress i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.quiz-progress i.done::after{transform:none}
.quiz-progress i.now::after{transform:scaleX(.5);opacity:.6}
.quiz-q{font-size:clamp(20px,2.2vw,26px);line-height:1.3}
.quiz-nav{display:flex;justify-content:flex-start;margin-top:4px}
.quiz-back,.quiz-close{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid transparent;color:var(--text-2);font-size:13px;transition:color .2s,border-color .2s,background .2s}
.quiz-back:hover,.quiz-close:hover{color:var(--text);border-color:var(--line-2);background:var(--glass)}
.quiz-nav-form{justify-content:space-between;align-items:center;margin-top:-6px}
.quiz-close{border-color:var(--line);background:var(--glass)}
.quiz-close .x{font-size:17px;line-height:1;margin-left:2px}
.quiz-scale{display:inline-flex;gap:6px;margin:4px 0 8px}
.quiz-scale i{width:26px;height:6px;border-radius:6px;background:var(--line-2);transition:background .4s}
.quiz-scale i.on{background:var(--accent)}
.quiz-opts{display:grid;gap:10px}
.quiz-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--glass);text-align:left;font-size:15px;transition:border-color .2s,background .2s,transform .2s}
.quiz-opt:hover{border-color:var(--accent);transform:translateX(4px)}
.quiz-opt .key{width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:12px}
.quiz-opt.is-picked{border-color:var(--accent);background:var(--chip)}
.quiz-result{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.level{display:grid;gap:6px}
.level b{font-size:clamp(40px,5vw,64px);font-weight:400;line-height:1;letter-spacing:-.02em}
.level .tag{justify-self:start}
.quiz-form{display:grid;gap:12px}
.quiz-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-step{animation:fadein .4s var(--ease)}
.quiz-step.is-back{animation:fadeback .4s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeback{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------- formulaires ---------- */
.field-group{display:grid;gap:6px}
.field-group label{font-size:13px;color:var(--text-2)}
.input,.textarea,.select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit;font-size:15px;transition:border-color .2s}
.textarea{min-height:130px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2)}
.check input{margin-top:3px;accent-color:var(--accent)}
.form-note{font-size:13px;color:var(--text-3);min-height:1.2em}
.form-note.ok{color:var(--ok)}
.form-note.err{color:var(--bad)}
:root[data-theme="light"]{--ok:#4F8F74;--warn:#A9803A;--bad:#A85C5C}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- carrousel de références ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* Piste remplie par app.js jusqu'à couvrir au moins deux fois la fenêtre (peu de références vérifiées ≠ piste plus courte que l'écran), vitesse en px/s constante. */
.marquee-track{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;animation:marq var(--dur,90s) linear infinite}
.marquee.reverse .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.ref{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;border:1px solid var(--line);background:var(--glass);font-size:16px;font-weight:460;white-space:nowrap;color:var(--text)}
.ref small{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ref.is-verified{border-color:rgba(var(--glow),.45)}
.ref.is-verified svg{color:var(--accent-hi)}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ref-grid .ref{justify-content:center;white-space:normal;text-align:center;font-size:15px}
.ref-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ref-filters button{padding:8px 14px;border-radius:40px;border:1px solid var(--line-2);font-size:14px}
.ref-filters button.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- boîte à outils ---------- */
.tool{display:grid;gap:16px;min-width:0}
.tool-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tool-body{display:grid;gap:12px;min-width:0}
.tool-body>*{min-width:0}
.tool-row{display:flex;gap:8px;flex-wrap:wrap}
.tool-row .input{flex:1;min-width:200px}
.result{border-radius:14px;border:1px solid var(--line);background:var(--bg-2);padding:14px 16px;display:grid;gap:8px;font-size:14px}
.result-line{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.result-line .tag{justify-self:start}
.code{font-family:var(--mono);font-size:12.5px;line-height:1.65;background:#0D0D14;color:#D6D8E6;border-radius:14px;padding:16px;overflow:auto;white-space:pre;max-height:420px;border:1px solid rgba(255,255,255,.08);margin:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
:root[data-theme="light"] .code{background:#1B1C28}
.code-wrap{position:relative;min-width:0;max-width:100%}
.code-wrap .copy-btn{position:absolute;top:10px;right:10px}
.range{width:100%;accent-color:var(--accent)}
.meter{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;width:0;border-radius:8px;transition:width .4s var(--ease),background .4s}
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px}
.tabs button{padding:8px 14px;border-radius:40px;font-size:14px;border:1px solid transparent}
.tabs button[aria-selected="true"]{background:var(--chip);border-color:var(--line-2)}

/* ---------- divers ---------- */
.band{border-block:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 60%,transparent);padding-block:22px}
.band-inner{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;align-items:center;font-size:14px;color:var(--text-2)}
.band-inner span{display:inline-flex;align-items:center;gap:8px}
.bridge{border-top:1px solid var(--line);padding-block:clamp(56px,7vw,96px)}
.bridge-inner{display:grid;gap:18px;justify-items:center;text-align:center}
.bridge .btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.timeline{display:grid;gap:0;position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.timeline li{list-style:none;position:relative;padding-bottom:22px}
.timeline li::before{content:"";position:absolute;left:-24px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.timeline b{display:block;font-weight:460}
.timeline p{color:var(--text-2);font-size:14px}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(5,7,13,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-box{position:relative;width:min(1000px,100%);height:min(800px,92vh);background:var(--card);border-radius:20px;border:1px solid var(--line-2);overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-rows:auto 1fr}
.modal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line);background:var(--card-2)}
.modal-title{font-size:14px;font-weight:500}
.modal-close{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--chip);font-size:13px;transition:background .2s,border-color .2s}
.modal-close .x{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--line-2);font-size:18px;line-height:1}
.modal-close:hover{background:var(--line-2);border-color:var(--text-3)}
.modal-frame{min-height:0;background:var(--card)}
.modal-frame,.modal-frame iframe,.modal-frame .calendly-inline-widget{width:100%!important;height:100%!important;min-width:0!important;border:0}
.modal-frame .calendly-spinner{display:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:110;padding:12px 18px;border-radius:40px;background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:14px;max-width:calc(100% - 32px)}
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.no-js .reveal{opacity:1;transform:none}
.prose{display:grid;gap:14px;color:var(--text-2);font-size:16px;line-height:1.7}
.prose h2{color:var(--text);font-size:24px;margin-top:18px}
.prose h3{color:var(--text);font-size:19px;margin-top:8px}
.prose ul{padding-left:20px;display:grid;gap:6px}
.prose strong{color:var(--text);font-weight:500}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.copy-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--chip);font-size:12px}
.copy-btn svg{width:12px;height:12px}
.site-footer{border-top:1px solid var(--line);padding-block:72px 40px;background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer-grid h4{font-weight:400;font-size:13px;color:var(--text-3);margin-bottom:12px;letter-spacing:.04em}
.footer-grid ul{list-style:none;display:grid;gap:9px}
.footer-grid a{font-size:15px}
.footer-grid a:hover{color:var(--accent-hi)}
.footer-about{display:grid;gap:14px;align-content:start}
.footer-about p{color:var(--text-2);font-size:14px;max-width:34ch}
.footer-regions{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.footer-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-3);line-height:1.6}
.footer-bottom p{max-width:90ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav,.hide-mobile{display:none}
  .burger{display:flex}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .stage{display:none}
  .steps:not(.steps-compact){grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-about{grid-column:1/-1}
}
@media (max-width:720px){
  .grid-2,.grid-3,.grid-4,.dual,.quiz-result,.quiz-form .fields{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:28px 20px}
  .steps:not(.steps-compact){grid-template-columns:1fr}
  .step{padding:22px 18px 20px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero{min-height:calc(88svh - var(--header-h))}
  .nav-menu{min-width:0}
  .card{border-radius:20px}
  .modal-box{height:92vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .hero-word > span{transform:none;opacity:1}
}

/* Newsletter (règle 41) : carte sous la veille, bloc discret dans le pied de page */
.nl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px 34px;align-items:center}
.nl-card .nl-text{display:grid;gap:10px}
.nl-card .lede{font-size:15px}
.nl-form{display:grid;gap:10px}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-row .input{flex:1;min-width:200px}
.nl .check{font-size:12.5px}
.nl .check a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nl-footer{border-top:1px solid var(--line);padding:26px 0 8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 34px;align-items:center}
.nl-footer h4{margin:0 0 4px}
.nl-footer p{margin:0;font-size:13.5px;color:var(--text-3)}
.nl-state{display:grid;gap:10px}
@media (max-width:900px){.nl-card,.nl-footer{grid-template-columns:1fr}}

/* Cloudflare Turnstile (règle 40) : invisible le plus souvent, case sobre si un doute */
.ts-box:empty{display:none}
.ts-box{min-height:0;margin-block:2px}