/* ==========================================================================
   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:72px;
  --spring:cubic-bezier(.34,1.35,.5,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F0F18; --bg-2:#13131E; --bg-top:#171721; --veil:22,22,36; --tveil:15,15,24;
  --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; --satin-base:82,102,235; --satin-hi:150,161,238; --satin-lo:66,82,212; --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);
  /* verre de la barre flottante (v4.12) */
  --rim:255,255,255; --rim-a:.10; --hl:255,255,255; --hl-a:.08; --glass-a:.48; --sh-a:.75; --drop:rgba(156,180,232,.15); --drop-hl:rgba(255,255,255,.16);
}
:root[data-theme="light"]{
  /* Thème clair « Bleu nuit » (v4.26, choix de Chérif parmi cinq pistes : le noir et blanc faisait trop classique) :
     le bleu du thème sombre devient la signature de jour aussi — fond gris-bleu très clair, texte bleu nuit, accent #3D4FD6. */
  color-scheme:light;
  --accent:#3D4FD6; --accent-hi:#3343C2; --accent-ink:#FFFFFF;
  --bg:#F4F5FA; --bg-2:#FFFFFF; --bg-top:#ECEEF7; --veil:252,253,255; --tveil:244,245,250;
  --card:#FFFFFF; --card-2:#EEF0F8; --glass:rgba(255,255,255,.62);
  --line:rgba(30,36,90,.09); --line-2:rgba(30,36,90,.18);
  --text:#151833; --text-2:#4A4E6A; --text-3:#7C809A;
  --chip:rgba(61,79,214,.10); --chip-text:#2E3BA8;
  --particle:44,54,140; --glow:82,102,235;
  --fluid-a:98,120,255; --fluid-b:222,228,255; --satin-base:61,79,214; --satin-hi:128,142,242; --satin-lo:38,50,168; --glow-2:120,110,210; --sheen:rgba(40,50,140,.08);
  --shadow:0 30px 60px -30px rgba(20,26,70,.24);
  --ok-bg:rgba(63,174,124,.12); --warn-bg:rgba(224,138,79,.14); --bad-bg:rgba(217,83,79,.12);
  --rim:30,36,90; --rim-a:.10; --hl:255,255,255; --hl-a:.9; --glass-a:.54; --sh-a:.2; --drop:rgba(61,79,214,.09); --drop-hl:rgba(255,255,255,.95);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-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{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}
/* Voile de texte (v4.2, règle 31) : juste derrière chaque bloc de texte libre (titre de section, colonne de texte, passerelle,
   page de texte, hero), un panneau de la couleur du fond, translucide, aux bords très fondus (pas de cadre visible) :
   les particules restent visibles partout ailleurs et s'atténuent sous le texte. Toujours présent (pas lié au défilement).
   Pas de backdrop-filter : le flou laissait deviner un contour et coûte cher en GPU sur un champ animé. */
.sec-head,.split>.reveal,.bridge-inner,.sec>.wrap-narrow,.hero>.hero-inner{position:relative;isolation:isolate;--vx:88px;--vy:64px}
.sec-head::before,.split>.reveal::before,.bridge-inner::before,.sec>.wrap-narrow::before,.hero>.hero-inner::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:calc(-1 * var(--vy)) calc(-1 * var(--vx));border-radius:40px;background:rgba(var(--tveil),var(--veil-a,.64));transition:opacity 1.1s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--vx),#000 calc(100% - var(--vx)),transparent),linear-gradient(180deg,transparent,#000 var(--vy),#000 calc(100% - var(--vy)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--vx),#000 calc(100% - var(--vx)),transparent),linear-gradient(180deg,transparent,#000 var(--vy),#000 calc(100% - var(--vy)),transparent);
  mask-composite:intersect}
/* Bords fondus larges (88 px) pour qu'aucun contour ne se devine ; le débord latéral est rogné par .sec / .hero
   (overflow clip) : jamais de défilement horizontal. Sur mobile, le fondu se réduit à la gouttière. */
/* Héros centré : le panneau suit la colonne de texte (et non toute la largeur), pour garder les particules de part et d'autre. */
.hero:not(.hero-sub)>.hero-inner::before{left:50%;right:auto;width:min(calc(100% + 2 * var(--vx)),1180px);transform:translateX(-50%)}
.hero-sub>.hero-inner::before{right:auto;width:min(calc(100% + 2 * var(--vx)),1320px)}
@media (max-width:700px){.sec-head,.split>.reveal,.bridge-inner,.sec>.wrap-narrow,.hero>.hero-inner{--vx:var(--gutter);--vy:44px}}
/* Halo de lecture : ombre douce de la couleur du fond autour des lettres (invisible en tant que telle), qui efface les
   particules collées aux caractères. Jamais sur les boutons ni dans les cartes (fond plein). */
:is(.sec-head,.split>.reveal,.bridge-inner,.sec>.wrap-narrow,.hero>.hero-inner) :is(h1,h2,h3,.lede,.eyebrow,.prose p,.prose li,.hero-fine span){text-shadow:0 0 1px rgba(var(--tveil),.9),0 0 14px rgba(var(--tveil),.85)}
:is(.sec-head,.split>.reveal,.bridge-inner,.sec>.wrap-narrow,.hero>.hero-inner) :is(.card,.btn) *{text-shadow:none}
/* Entrée du site : le logo en particules doit rester net. */
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%}
/* Écran de veille (v4.9, field.js) : après 5 min sans activité, seul le champ de particules reste visible */
html.is-idle body > :not(.field):not(.idle-veil){opacity:0!important;pointer-events:none!important;transition:opacity 1.2s var(--ease)!important}
html.is-waking body > :not(.field):not(.idle-veil){transition:opacity .5s var(--ease)!important}
.idle-veil{position:fixed;inset:0;z-index:9999;cursor:none;background:transparent}
.idle-trigger{-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.main,.site-footer{position:relative;z-index:1}

/* ---------- 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 */
/* soie liquide (v4.13, fluid.js) : calque opaque ton sur ton, sous le libellé ; fondu d'entrée court, de sortie plus lent */
.btn-fluid{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease-out;border-radius:inherit;will-change:opacity;filter:blur(.4px)}
.btn-fluid.is-on{opacity:1;transition-duration:.3s}
.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 « Boussole + Sceau » (v4.12, règle 49) ----------
   La balise <header> garde sa hauteur dans le flux ; la barre (.hd) est fixe. Géométrie liée au défilement par --p (0 → 1 sur
   les 140 premiers pixels, posé par app.js) : pleine largeur et transparente en haut de page, puis îlot de verre détaché des
   bords. Pendant la lecture (.is-folded), le verre se replie par clip-path en capsule : sceau + anneau de progression (--read)
   + section en cours ; le rendez-vous reste à droite. Le flou est porté par .hd-glass lui-même : aucun parent de la barre ne
   doit avoir d'opacité, de filtre, de masque ni de clip-path (sinon le verre ne voit plus la page). */
.site-header{position:relative;z-index:50;height:var(--header-h);
  --p:0;--read:0;--side:max(16px,(100% - 1160px) / 2);
  --hy:calc(var(--p) * 12px);--hx:calc(var(--p) * var(--side));--hh:calc(72px - var(--p) * 14px);--hr:calc(var(--p) * 29px);
  --hpad:calc(var(--gutter) - var(--p) * (var(--gutter) - 14px));--lh:calc(44px - var(--p) * 8px);--ga:var(--p);--sy:calc((var(--hh) - 48px) / 2)}
.hd{position:fixed;z-index:2;top:var(--hy);left:var(--hx);right:var(--hx);height:var(--hh);border-radius:var(--hr)}
.hd-shade{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 18px 44px -22px rgba(0,0,0,calc(var(--ga) * var(--sh-a)));transition:opacity .3s}
.hd-glass{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background-color:rgba(var(--tveil),calc(var(--ga) * var(--glass-a)));
  -webkit-backdrop-filter:blur(calc(var(--ga) * 20px)) saturate(calc(1 + var(--ga) * .6));backdrop-filter:blur(calc(var(--ga) * 20px)) saturate(calc(1 + var(--ga) * .6));
  box-shadow:inset 0 0 0 1px rgba(var(--rim),calc(var(--ga) * var(--rim-a))),inset 0 1px 0 rgba(var(--hl),calc(var(--ga) * var(--hl-a)));
  clip-path:inset(0 round 0px);transition:clip-path .6s var(--ease),opacity .25s,background-color .4s}
.hd-rim,.hd-sheen,.hd-prog{position:absolute;opacity:0}
.hd-rim,.hd-sheen{inset:0;border-radius:inherit;transition:opacity .45s}
.hd-sheen{background:radial-gradient(260px 110px at var(--mx,50%) 0%,rgba(var(--hl),.1),transparent 70%)}
.hd-rim{padding:1px;background:radial-gradient(180px 80px at var(--mx,50%) var(--my,0%),rgba(var(--rim),.6),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){
  .site-header:not(.is-folded) .hd:hover .hd-rim{opacity:calc(var(--p) * .9)}
  .site-header:not(.is-folded) .hd:hover .hd-sheen{opacity:var(--p)}
}
/* fil de progression de la lecture, au bas de l'îlot (rogné par ses arrondis) */
.hd-prog{left:0;right:0;bottom:0;height:2px;transition:opacity .5s}
.hd-prog b{position:absolute;left:0;top:0;bottom:0;width:calc(var(--read) * 100%);background:linear-gradient(90deg,transparent,rgba(var(--glow),.55) 45%,var(--accent-hi))}
.hd-prog b::after{content:"";position:absolute;right:-3px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--accent-hi);filter:blur(3px)}
.site-header.is-past .hd-prog{opacity:1}
.header-inner{position:relative;z-index:1;display:flex;align-items:center;gap:20px;height:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--hpad);transition:opacity .25s}
.logo{display:flex;align-items:center;gap:10px;flex:none;border-radius:10px}
.logo-img{height:44px;width:auto;display:block;transition:opacity .3s}
.hd-in .logo-img{height:var(--lh)}
.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{position:relative;display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav > a,.nav-group > summary{position:relative;z-index:1;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,.nav-group > summary.is-active{background:var(--chip)}
.nav-group > summary svg{transition:transform .3s var(--ease)}
.nav-group[open] > summary svg{transform:rotate(180deg)}
/* goutte de mercure : glisse d'un lien à l'autre en s'étirant (deux ressorts, app.js), repose sur la page en cours */
.drop{position:absolute;left:0;top:0;width:0;height:0;border-radius:40px;background:var(--drop);box-shadow:inset 0 1px 0 var(--drop-hl),inset 0 -1px 1px rgba(0,0,0,.12);opacity:0;pointer-events:none;will-change:transform,width}
.has-drop .nav > a:hover,.has-drop .nav-group > summary:hover,.has-drop .nav > a.is-active,.has-drop .nav-group > summary.is-active{background:transparent}
.nav-group{position:relative}
.nav-menu{position:absolute;top:calc(100% + 16px);left:-8px;min-width:390px;display:grid;gap:2px;padding:8px;border-radius:20px;
  background:rgba(var(--tveil),.86);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(var(--rim),var(--rim-a)),inset 0 1px 0 rgba(var(--hl),var(--hl-a)),var(--shadow);animation:pop .25s 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:13px;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)}
/* Thème à trois positions : Sombre · Auto · Clair (v4.4) — une pastille glisse sous l'icône choisie. */
.theme-switch{position:relative;display:inline-grid;grid-template-columns:repeat(3,26px);align-items:center;padding:3px;border-radius:40px;border:1px solid var(--line-2);flex:none}
.theme-switch button{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--text-2);transition:color .25s}
.theme-switch button:hover{color:var(--text)}
.theme-switch button[aria-checked="true"]{color:var(--bg)}
.theme-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.theme-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--text);transition:transform .3s var(--ease)}
.theme-switch[data-mode="auto"] .theme-knob{transform:translateX(26px)}
.theme-switch[data-mode="light"] .theme-knob{transform:translateX(52px)}
@media (max-width:380px){.theme-switch{grid-template-columns:repeat(3,22px)}.theme-switch button,.theme-knob{width:22px;height:22px}.theme-switch[data-mode="auto"] .theme-knob{transform:translateX(22px)}.theme-switch[data-mode="light"] .theme-knob{transform:translateX(44px)}}
.burger{display:none;position:relative;width:40px;height:40px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.burger>span{display:block;width:18px;height:1.6px;border-radius:2px;background:var(--text);transition:transform .35s var(--ease)}
.burger[aria-expanded="true"]>span:first-of-type{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"]>span:last-of-type{transform:translateY(-3.3px) rotate(-45deg)}
.ring{position:absolute;inset:0;width:40px;height:40px;transform:rotate(-90deg);opacity:0;transition:opacity .4s;pointer-events:none}
.ring circle,.seal-ring circle{fill:none;stroke-width:1.5}
.ring .tr{stroke:var(--line-2)}
.ring .pg,.seal-ring .pg{stroke:var(--accent-hi);stroke-linecap:round}
.ring .pg{stroke-dasharray:116.24;stroke-dashoffset:calc(116.24px * (1 - var(--read)))}
.site-header.is-past .ring{opacity:1}

/* capsule repliée : sceau (anneau de progression) + section en cours */
.seal-mark,.cap-ctx,.cap-line{position:absolute;top:var(--sy);opacity:0;visibility:hidden}
.seal-mark{z-index:3;left:var(--sy);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;transform:scale(.9);transition:opacity .2s,transform .4s var(--ease),visibility 0s .3s}
.seal-mark img{width:28px;height:auto}
.seal-ring{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg);pointer-events:none}
.seal-ring .tr{stroke:var(--line)}
.seal-ring .pg{stroke-dasharray:144.51;stroke-dashoffset:calc(144.51px * (1 - var(--read)))}
.cap-line{z-index:1;left:var(--sy);width:var(--capw,48px);height:48px;border-radius:24px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(var(--rim),calc(var(--rim-a) + .04)),inset 0 1px 0 rgba(var(--hl),var(--hl-a)),0 14px 34px -14px rgba(0,0,0,var(--sh-a));transition:width .6s var(--ease),opacity .2s,box-shadow .25s}
.cap-ctx{z-index:3;left:calc(var(--sy) + 48px);height:48px;display:inline-flex;align-items:center;gap:6px;padding:0 14px 0 6px;border-radius:0 24px 24px 0;font-size:15px;white-space:nowrap;color:var(--text);transform:translateX(-8px);transition:opacity .15s,transform .4s var(--ease),visibility 0s .3s}
.cap-ctx .chev{width:12px;height:12px;color:var(--text-2);transition:transform .3s var(--ease)}
.site-header.is-hub .cap-ctx .chev{transform:rotate(180deg)}
.ctx-roll{display:inline-grid;overflow:hidden;height:22px;line-height:22px;transition:width .45s var(--ease)}
.ctx-roll>span{grid-area:1/1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ctx-roll .in-up{animation:ctxInUp .5s var(--ease) both}
.ctx-roll .in-down{animation:ctxInDown .5s var(--ease) both}
.ctx-roll .out-up{animation:ctxOutUp .4s var(--ease) both}
.ctx-roll .out-down{animation:ctxOutDown .4s var(--ease) both}
@keyframes ctxInUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes ctxInDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes ctxOutUp{to{transform:translateY(-100%);opacity:0}}
@keyframes ctxOutDown{to{transform:translateY(100%);opacity:0}}
.ctx-measure{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;font-size:15px;pointer-events:none}
.site-header.is-folded .hd{pointer-events:none}
.site-header.is-folded .hd-glass{background-color:rgba(var(--tveil),.8);clip-path:inset(var(--sy) calc(100% - var(--capw,48px) - var(--sy)) var(--sy) var(--sy) round 24px)}
.site-header.is-folded .hd-in{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.site-header.is-folded .hd-shade,.site-header.is-folded .hd-prog{opacity:0}
.site-header.is-folded .seal-mark{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s .22s,transform .5s .2s var(--spring),visibility 0s}
.site-header.is-folded .cap-line{opacity:1;transition:width .6s var(--ease),opacity .4s .25s,box-shadow .25s}
.site-header.is-folded .cap-ctx{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s .28s,transform .55s .22s var(--ease),visibility 0s}
.hd:has(.seal-mark:hover,.cap-ctx:hover,.seal-mark:focus-visible,.cap-ctx:focus-visible) .cap-line{box-shadow:inset 0 0 0 1px rgba(var(--rim),calc(var(--rim-a) + .16)),inset 0 1px 0 rgba(var(--hl),var(--hl-a)),0 14px 34px -14px rgba(0,0,0,var(--sh-a))}
.seal-mark:focus-visible,.cap-ctx:focus-visible{outline-offset:-2px}
.seal-cta{position:fixed;z-index:3;top:calc(12px + (58px - 38px) / 2);right:calc(var(--side) + 14px);box-shadow:0 12px 30px -12px rgba(var(--glow),.8);opacity:0;visibility:hidden;transform:scale(.94);transition:opacity .2s,transform .4s var(--ease),visibility 0s .4s,background .3s}
.site-header.is-folded .seal-cta{opacity:1;visibility:visible;transform:none;transition:opacity .3s .15s,transform .5s .12s var(--spring),visibility 0s,background .3s}
.seal-cta .s{display:none}

/* plan (PC) : sections de la page + pages du site */
.hub{position:fixed;z-index:3;top:calc(var(--hy) + var(--hh) + 10px);left:16px;width:min(640px,calc(100% - 32px));max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4px;padding:10px;border-radius:22px;
  background:rgba(var(--tveil),.86);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(var(--rim),var(--rim-a)),inset 0 1px 0 rgba(var(--hl),var(--hl-a)),var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top left;transition:opacity .2s,transform .35s var(--ease),visibility 0s .35s}
.hub:has(.hub-secs[hidden]){grid-template-columns:1fr;width:min(320px,calc(100% - 32px))}
.site-header.is-hub .hub{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .4s var(--ease)}
.hub-col{padding:8px;display:grid;gap:2px;align-content:start}
.hub-secs+.hub-col{border-left:1px solid var(--line)}
.hub-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:4px 10px 8px}
.hub-pages .hub-h:not(:first-child){margin-top:10px}
.hub a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:6px;padding:9px 10px;border-radius:12px;font-size:15px;transition:background .2s}
.hub-pages a{grid-template-columns:minmax(0,1fr) auto;padding-block:7px}
.hub a:hover,.hub a.is-cur{background:var(--chip)}
.hub a.is-read{color:var(--text-2)}
.hub a .n{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.hub a .here{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--chip-text);opacity:0}
.hub a.is-cur .here{opacity:1}
.hub a svg{width:14px;height:14px;color:var(--text-3)}

/* menu mobile : portail circulaire depuis le sceau ou le bouton menu.
   v4.20.2 (Chérif : « le menu mobile saccade et sursaute ») : plus de flou d'arrière-plan sur le portail — un backdrop-filter
   recalculé à chaque image d'une animation de clip-path plein écran, sous le verre flouté de la barre, faisait tomber la fluidité
   de ~40 à ~15 images/s ; fond plein à la place (le portail couvre tout l’écran, la page ne transparaît plus). La barre ne
   floute plus rien pendant que le menu est ouvert, et le champ de particules, caché dessous, se met en pause (field.js). */
.sheet{position:fixed;z-index:1;inset:0;visibility:hidden;pointer-events:none;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--hy) + var(--hh) + 14px) 22px calc(28px + env(safe-area-inset-bottom,0px));
  background:rgb(var(--tveil));will-change:clip-path;
  clip-path:circle(0px at var(--ox,50%) var(--oy,0px));transition:clip-path .65s var(--ease),visibility 0s .65s}
.site-header.is-sheet{z-index:80} /* au-dessus des boutons flottants (remonter, lecteur), sous la modale Calendly */
.site-header.is-sheet .hd-glass{-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header.is-sheet .sheet{visibility:visible;pointer-events:auto;clip-path:circle(160% at var(--ox,50%) var(--oy,0px));transition:clip-path .7s var(--ease)}
.sheet-body{display:grid;max-width:540px;margin-inline:auto}
.sheet-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:18px 4px 6px}
.sheet-body>:first-child .sheet-h,.sheet-body>.sheet-h:first-child,.sheet-toc[hidden]+.sheet-h{margin-top:4px}
.sl{display:flex;align-items:center;gap:10px;padding:12px 4px;font-size:18px;font-weight:350;border-bottom:1px solid var(--line)}
.sl .t{flex:1}
.sl svg{width:14px;height:14px;color:var(--text-3)}
.sl .n{font-family:var(--mono);font-size:11px;color:var(--text-3);width:26px;flex:none}
.sl.is-cur{color:var(--accent-hi)}
:root[data-theme="light"] .sl.is-cur{color:var(--accent)}
.sheet-toc .sl.is-cur::after{content:attr(data-here);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--chip-text)}
.sheet-body>.btn{margin-top:18px}
.site-header.is-sheet .sheet-body>*{animation:sheetRise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 22ms + 90ms)}
@keyframes sheetRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:1101px){.sheet{display:none}} /* jamais affiché en largeur PC */
@media (max-width:1100px){
  .site-header{--side:10px;--hy:calc(var(--p) * 10px);--hx:calc(var(--p) * 10px);--hh:calc(64px - var(--p) * 8px);--hr:calc(var(--p) * 22px);--hpad:calc(16px - var(--p) * 4px);--lh:calc(40px - var(--p) * 6px)}
  .header-inner{gap:10px}
  .header-actions{gap:6px}
  .seal-cta{top:calc(10px + (56px - 38px) / 2);right:22px}
  .seal-cta .l{display:none}
  .seal-cta .s{display:inline}
  .cap-ctx{font-size:14px;padding-right:12px}
  .ctx-measure{font-size:14px}
  .hub{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-items:center;padding-block:clamp(56px,8vw,96px);overflow:hidden}
/* Le wrap d'un héros est un élément de grille avec margin auto : sans largeur explicite il se rétrécit à son contenu et
   décale le titre par rapport aux sections suivantes. */
.hero>.wrap{width:100%}
.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}
#pwd-copy.is-done{border-color:var(--ok);color:var(--ok)}
.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);overflow-x:clip}
.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}
.legal-dl{margin:4px 0 6px;border:1px solid var(--line);border-radius:16px;background:var(--glass);overflow:hidden}
.legal-dl>div{display:grid;grid-template-columns:minmax(150px,34%) 1fr;align-items:baseline;gap:4px 18px;padding:11px 18px;border-top:1px solid var(--line)}
.legal-dl>div:first-child{border-top:0}
.legal-dl dt{color:var(--text-3,var(--text-2));font-size:14px}
.legal-dl dd{margin:0;color:var(--text);font-size:15px;overflow-wrap:anywhere}
@media (max-width:560px){.legal-dl>div{grid-template-columns:1fr;gap:2px}}
.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)}
/* Liens LinkedIn (v4.10) : logo « In » officiel en une couleur, aux tons du pied de page */
.footer-grid .footer-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.footer-grid .footer-social a{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border-radius:40px;border:1px solid var(--line-2);font-size:13.5px;color:var(--text-2);transition:color .25s,border-color .25s,background .25s}
.footer-grid .footer-social a:hover,.footer-grid .footer-social a:focus-visible{color:var(--text);border-color:var(--text-3);background:var(--chip)}
.footer-social svg{flex:none;width:16px;height:16px}
/* v4.11 : logos des réseaux dans leurs variantes officielles une couleur — blanc en thème sombre, noir en thème clair
   (LinkedIn « In » blanc / noir ; WhatsApp : règle a[data-wa] ci-dessous) */
.footer-social a:not([data-wa]) svg{color:#fff}
:root[data-theme="light"] .footer-social a:not([data-wa]) svg{color:#000}
/* WhatsApp (v4.11) : page Contact, sous l'agenda */
.contact-wa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--text-2)}
.contact-wa .btn svg{width:16px;height:16px;flex:none}
/* Glyphe officiel WhatsApp : uniquement ses couleurs officielles (charte Meta : couleurs non modifiables) — blanc en thème
   sombre, noir WhatsApp en thème clair (variantes « White » et « Black » du kit) */
a[data-wa] svg{color:#fff}
:root[data-theme="light"] a[data-wa] svg{color:#111b21}
/* v4.26 : sur un bouton plein (fond bleu en thème clair), variante officielle blanche pour rester lisible */
:root[data-theme="light"] a[data-wa].btn-primary svg{color:#fff}
.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){
  :root{--header-h:64px}
  .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}
/* Page newsletter : titre et description comme les autres pages ; sur les étapes de confirmation, seule la carte est centrée */
.nl-step{padding-top:0}
.nl-step .nl-state{max-width:620px;margin-inline:auto;justify-items:center;text-align:center;padding:clamp(26px,4vw,40px)}
.nl-step .nl-state .lede{text-align:center;max-width:46ch}
.nl-step .nl-state .nl-actions{justify-content:center}
.nl-actions{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.approve-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.approve-actions form{margin:0}
/* Suggestion LinkedIn (règle 44, page privée) */
.li-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.li-meta{font-size:12px;letter-spacing:.08em;color:var(--text-3)}
.li-area{width:100%;min-height:140px;resize:vertical;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:400 15px/1.6 var(--f)}
.li-area:focus{outline:2px solid var(--accent);outline-offset:2px}
.li-fold,.li-note{font-size:14px;color:var(--text-2);line-height:1.55}
.li-fold .mono{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-right:6px}
.li-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.li-visual canvas{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.li-fields{display:grid;gap:12px}
.li-fields label{display:grid;gap:6px;font-size:13px;color:var(--text-2)}
.li-fields input{height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:400 15px var(--f)}
.li-history{margin-top:28px}.li-history ul{margin-top:8px;display:grid;gap:6px}.li-history a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.li-visual{grid-template-columns:1fr}}
/* Base REX (règle 44, page privée) */
.li-rex{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rex-flash{margin-top:20px;padding:14px 18px;border-radius:var(--r-md);font-size:15px;line-height:1.5}
.rex-flash.is-ok{background:var(--ok-bg);color:var(--text)}
.rex-flash.is-error{background:var(--bad-bg);color:var(--text)}
.rex-new,.rex-item{display:block;margin-top:18px}
.rex-new>:not(summary),.rex-item>:not(summary){margin-top:18px}
.rex-new:hover,.rex-item:hover{transform:none}
.rex-new>summary,.rex-item>summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none}
.rex-new>summary{justify-content:space-between}
.rex-new>summary::-webkit-details-marker,.rex-item>summary::-webkit-details-marker{display:none}
.rex-new>summary:focus-visible,.rex-item>summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}
.rex-id{font-size:12px;letter-spacing:.06em;color:var(--text-3);flex:none;min-width:5.5ch}
.rex-title{flex:1;min-width:0;display:grid;gap:3px;font-size:16px;font-weight:500;line-height:1.35}
.rex-title small{font-size:13px;font-weight:400;color:var(--text-3)}
.rex-chip{flex:none;padding:5px 11px;border-radius:40px;font:500 12px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.rex-chip.is-ok{background:var(--ok-bg);color:var(--ok)}
.rex-chip.is-todo{background:var(--warn-bg);color:var(--warn)}
.rex-chip.is-off{background:var(--chip);color:var(--text-3)}
.rex-rules{display:grid;gap:8px;font-size:14px;color:var(--text-2);line-height:1.55;padding:14px 16px;border-radius:var(--r-md);background:var(--chip)}
.rex-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.rex-status .li-meta{margin-right:6px}
.rex-status .btn[disabled]{opacity:1;cursor:default}
.rex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rex-grid .rex-wide{grid-column:1/-1}
.rex-area{min-height:0;field-sizing:content;max-height:420px}
.rex-hint{font-size:12.5px;color:var(--text-3);align-self:center}
.rex-tools{margin-top:28px}
.rex-group{margin-top:34px}
.rex-group-head{display:flex;align-items:baseline;gap:10px}
.rex-empty{margin-top:24px;color:var(--text-3)}
.rex-link,.rex-backup{margin-top:28px;gap:12px}
.rex-link:hover,.rex-backup:hover{transform:none}
.rex-backup .approve-actions{margin-top:4px}
.rex-link [data-turnstile]:empty{display:none}
/* Composer une édition — « l'atelier » (v4.20, page privée) : sommaire des sections avec l'état FR / EN, une section à la fois,
   le français et l'anglais au même endroit (switch FR · EN · FR + EN), aperçu de l'email en direct qui suit la section.
   Sans JavaScript (.nc-studio sans .is-js) : toutes les sections à la suite, les deux langues côte à côte. */
/* body{overflow-x:hidden} fait du body un conteneur de défilement (html est en overflow-x:clip) : les éléments collants ne
   collent plus. Sur cette page, clip (même protection contre le débord horizontal, sans conteneur de défilement). */
body.page-compose{overflow-x:clip}
.nc-sec{padding-top:calc(var(--header-h) + 40px);padding-bottom:72px}
.nc-wrap{max-width:1680px;margin-inline:auto;padding-inline:var(--gutter);position:relative}
.nc-intro{display:grid;gap:8px;max-width:860px}
.nc-title{font-size:clamp(28px,3.2vw,42px);line-height:1.1;font-weight:470;letter-spacing:-.01em}
.nc-sub{color:var(--text-2);font-size:15px}
.nc-intro .eyebrow,.nc-title,.nc-sub{text-shadow:0 0 22px rgb(var(--tveil)),0 0 8px rgb(var(--tveil))}
.nc-fresh{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:10px 16px}
.nc-fresh>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;cursor:pointer;list-style:none;font-size:14px;color:var(--text-2)}
.nc-fresh>summary::-webkit-details-marker{display:none}
.nc-fresh>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);transition:transform .2s}
.nc-fresh[open]>summary::after{transform:rotate(-135deg)}
.nc-fresh>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.nc-fresh .eyebrow{font-size:11px}
.nc-fresh-warn{color:var(--warn)}
.nc-fresh>p{margin-top:10px;font-size:14px;color:var(--text-2)}
.nc-warn{color:var(--warn);font-size:14px}
.nc-generate{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-color:var(--accent)}
.nc-generate:hover{transform:none}.nc-generate>div{display:grid;gap:8px;max-width:760px}
.nc-toast{margin-top:16px;display:flex;align-items:flex-start;gap:12px;padding:12px 12px 12px 18px;border-radius:var(--r-md);font-size:14.5px;line-height:1.5;background:var(--ok-bg);border:1px solid var(--line)}
.nc-toast.is-error{background:var(--bad-bg)}
.nc-toast p{flex:1}
.nc-toast-x{width:28px;height:28px;border-radius:50%;color:var(--text-2);font-size:18px;line-height:1;flex:none}
.nc-toast-x:hover{background:var(--chip);color:var(--text)}
.nc-toast.is-float{position:fixed;z-index:110;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100% - 32px));margin:0;background:var(--card);box-shadow:inset 3px 0 0 var(--ok),var(--shadow);animation:ncToast .35s var(--ease)}
.nc-toast.is-float.is-error{box-shadow:inset 3px 0 0 var(--bad),var(--shadow)}
@keyframes ncToast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

.nc-studio{margin-top:22px;--nc-top:calc(var(--header-h) + 12px)}
.nc-bar{position:sticky;top:var(--nc-top);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:9px 10px 9px 18px;border:1px solid var(--line-2);border-radius:18px;background:rgba(var(--tveil),.84);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 40px -28px rgba(0,0,0,.55)}
.nc-bar-l{display:grid;gap:6px;min-width:140px}
.nc-progress{font-size:13px;color:var(--text-2)}.nc-progress b{color:var(--text);font-weight:600}
.nc-prog{display:block;height:3px;width:140px;border-radius:3px;background:var(--line-2);overflow:hidden}
.nc-prog i{display:block;height:100%;border-radius:inherit;background:var(--accent-hi);transition:width .5s var(--ease)}
.nc-lang{position:relative;display:inline-grid;grid-auto-flow:column;padding:3px;border-radius:40px;border:1px solid var(--line-2);background:var(--bg-2)}
.nc-lang button{position:relative;z-index:1;height:32px;padding:0 15px;border-radius:30px;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;transition:color .25s}
.nc-lang button:hover{color:var(--text)}
.nc-lang button[aria-checked="true"]{color:var(--accent-ink)}
.nc-lang button:focus-visible,.nc-pvlang button:focus-visible,.nc-tab:focus-visible,.nc-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nc-knob{position:absolute;z-index:0;top:3px;left:0;height:32px;width:0;border-radius:30px;background:var(--accent);transition:transform .38s var(--spring),width .38s var(--spring)}
.nc-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nc-save{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.nc-save::before{content:"";width:6px;height:6px;border-radius:1px;transform:rotate(45deg);background:var(--ok);flex:none}
.nc-save[data-state="pending"]::before{background:var(--text-3)}
.nc-save[data-state="saving"]::before{background:var(--info);animation:ncPulse 1s ease-in-out infinite}
.nc-save[data-state="error"],.nc-save[data-state="conflict"]{color:var(--bad)}
.nc-save[data-state="error"]::before,.nc-save[data-state="conflict"]::before{background:var(--bad)}
@keyframes ncPulse{50%{opacity:.25}}

/* « Nouvelle édition » (v4.20.1) : panneau de confirmation sous la barre ; toujours visible sans JavaScript */
.nc-new{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:12px;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--card);box-shadow:inset 3px 0 0 var(--warn)}
.nc-studio.is-js .nc-new:not(.is-open){display:none}
.nc-studio.is-js .nc-new.is-open{animation:ncIn .3s var(--ease)}
.nc-new-txt{display:grid;gap:4px;max-width:70ch;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.nc-new-h{color:var(--text);font-weight:500;font-size:15.5px}
.nc-new-actions{display:flex;gap:8px;flex-wrap:wrap}
.nc-new-btn{gap:7px}.nc-new-btn>span[aria-hidden]{font-size:15px;line-height:1}
.nc-new-btn[aria-expanded="true"]{border-color:var(--warn);color:var(--text)}
.nc-grid{display:grid;grid-template-columns:232px minmax(0,1fr) minmax(400px,36%);gap:20px;align-items:start;margin-top:18px}
.nc-nav{position:sticky;top:calc(var(--nc-top) + var(--nc-bar-h,58px) + 14px)}
.nc-steps{list-style:none;display:grid;gap:2px;position:relative;z-index:1;margin:0;padding:0}
.nc-go{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 10px 10px 12px;border-radius:12px;color:var(--text-2);text-decoration:none;font-size:14.5px;line-height:1.3;transition:color .2s,background .2s}
.nc-go:hover{color:var(--text);background:var(--glass)}
.nc-go[aria-current]{color:var(--text)}
.nc-studio.is-js .nc-go[aria-current]:hover{background:transparent}
.nc-num{font-size:11px;color:var(--text-3)}
.nc-lab{display:flex;align-items:center;gap:6px;min-width:0}
.nc-req{color:var(--warn);font-size:8px;line-height:1}
.nc-st{display:inline-flex;gap:3px}
.nc-dot{font-style:normal;font-family:var(--mono);font-size:9.5px;line-height:1.3;letter-spacing:.04em;padding:1px 5px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-3);transition:color .3s,background .3s,border-color .3s}
.nc-dot[data-s="ok"]{color:var(--ok);border-color:transparent;background:var(--ok-bg)}
.nc-dot[data-s="miss"]{color:var(--bad);border-color:transparent;background:var(--bad-bg)}
.nc-dot[data-s="na"]{opacity:.35}
.nc-steps-end{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.nc-steps-end .nc-num{color:var(--accent-hi)}
.nc-ind{position:absolute;z-index:0;left:0;top:0;width:100%;height:0;border-radius:12px;background:var(--card);border:1px solid var(--line-2);box-shadow:inset 3px 0 0 var(--accent-hi);opacity:0;pointer-events:none;transition:transform .4s var(--spring),height .4s var(--spring),width .4s var(--spring),opacity .25s}
.nc-studio:not(.is-js) .nc-ind{display:none}

.nc-panes{min-width:0}
.nc-studio.is-js .nc-panes{min-height:calc(100vh - var(--nc-top) - var(--nc-bar-h,58px) - 40px)}
.nc-studio:not(.is-js) .nc-panes{display:grid;gap:18px}
.nc-pane{gap:18px;scroll-margin-top:calc(var(--nc-top) + 90px)}
.nc-pane:hover{transform:none;border-color:var(--line)}
.nc-studio.is-js .nc-pane{animation:ncIn .32s var(--ease)}
@keyframes ncIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nc-pane-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.nc-pane-head .eyebrow{margin-bottom:6px;font-size:11px}
.nc-pane-head h2:focus{outline:none}
.nc-pane .nc-note{max-width:72ch;margin-top:-8px}
.nc-swap{white-space:nowrap}
.nc-pane-foot{display:flex;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.nc-step{color:var(--text-2);text-decoration:none;font-size:14px;padding:6px 2px}
.nc-step:hover{color:var(--text)}.nc-step.is-next{color:var(--accent-hi);font-weight:500}
.nc-pair{display:grid;gap:14px}
.nc-cols{display:none;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:6px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.nc-studio.is-js[data-lang="fr"] .nc-l[data-l="en"],.nc-studio.is-js[data-lang="en"] .nc-l[data-l="fr"]{display:none}
.nc-studio[data-lang="both"] .nc-pair,.nc-studio:not(.is-js) .nc-pair{grid-template-columns:1fr 1fr;gap:18px}
.nc-studio[data-lang="both"] .nc-cols,.nc-studio:not(.is-js) .nc-cols{display:grid}
.nc-common{display:grid;gap:12px;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px dashed var(--line-2)}
.nc-pane .nc-common-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13.5px;color:var(--text-2)}
.rex-grid.nc-grid3,.rex-grid.nc-grid4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.nc-tabs{display:flex;flex-wrap:wrap;gap:6px}
.nc-tab{display:grid;gap:2px;text-align:left;padding:9px 14px;border-radius:12px;border:1px solid var(--line);color:var(--text-2);font-size:14px;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.nc-tab:hover{color:var(--text);border-color:var(--line-2)}
.nc-tab small{font-size:11px;color:var(--text-3)}
.nc-tab[aria-selected="true"]{border-color:var(--accent);color:var(--text);background:var(--chip)}
.nc-tab.is-over small{color:var(--bad)}
.nc-studio:not(.is-js) .nc-tabs{display:none}
.nc-spec-title{font-size:17px;font-weight:500;margin-top:6px}
.nc-studio.is-js .nc-spec-title{display:none}
.nc-item{display:grid;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .25s}
.nc-item:last-child{border-bottom:0}
.nc-studio.is-js[data-lang="fr"] .nc-item[data-ed="en"],.nc-studio.is-js[data-lang="en"] .nc-item[data-ed="fr"]{opacity:.5}
.nc-pick{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.nc-pick input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.nc-pick>span{display:grid;gap:3px;font-size:15px;line-height:1.4;min-width:0}
.nc-pick a{color:var(--text);text-decoration:none;overflow-wrap:anywhere}.nc-pick a:hover{text-decoration:underline}
.nc-pick small{font-size:12.5px;color:var(--text-3)}
.nc-badge{display:inline-block;margin-right:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:1px 6px;border-radius:6px;background:var(--chip);color:var(--chip-text)}
.nc-more{display:grid;gap:12px;margin-left:30px}
.nc-item:not(:has(.nc-pick input:checked)) .nc-more{display:none}
.nc-pane .nc-custom-h{display:flex;gap:8px;align-items:baseline;font-size:14px;color:var(--text-2)}
.nc-rows{display:grid;gap:14px}
.nc-row{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px}
.nc-pane .nc-row-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.nc-add{justify-self:start}
.nc-check{width:100%;border-collapse:collapse;font-size:14.5px}
.nc-check th,.nc-check td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.nc-check thead th{font-weight:500;color:var(--text-3);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.nc-check th a{color:inherit;text-decoration:none}.nc-check th a:hover{text-decoration:underline}
.nc-check td{text-align:center;width:64px;font-weight:600;transition:color .3s}
.nc-check td[data-s="ok"]{color:var(--ok)}.nc-check td[data-s="miss"]{color:var(--bad)}.nc-check td[data-s="empty"],.nc-check td[data-s="na"]{color:var(--text-3);font-weight:400}
.nc-warns{display:grid;gap:8px;padding:14px 18px;border-radius:var(--r-md);background:var(--warn-bg)}
.nc-warns .eyebrow{font-size:11px;color:var(--warn)}
.nc-warns ul{list-style:none;display:grid;gap:6px;margin:0;padding:0;font-size:14px;line-height:1.5;color:var(--text)}
.nc-warns li{display:flex;gap:8px}.nc-warns li::before{content:"◆";color:var(--warn);font-size:9px;margin-top:5px;flex:none}
.nc-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nc-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.nc-more-actions>summary{cursor:pointer;display:inline-block}
.nc-more-body{display:grid;gap:12px;margin-top:12px;justify-items:start}

.nc-live{position:sticky;top:calc(var(--nc-top) + var(--nc-bar-h,58px) + 14px);display:flex;flex-direction:column;height:calc(100vh - var(--nc-top) - var(--nc-bar-h,58px) - 34px);min-height:420px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.nc-live-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.nc-live-head .eyebrow{font-size:11px;margin-right:auto}
.nc-pvlang{display:inline-flex;padding:2px;border:1px solid var(--line-2);border-radius:20px}
.nc-pvlang button{height:26px;padding:0 11px;border-radius:16px;font-size:12px;color:var(--text-2);transition:background .2s,color .2s}
.nc-pvlang button[aria-checked="true"]{background:var(--chip);color:var(--text)}
.nc-pv-state{min-width:64px;font-size:11.5px;color:var(--text-3);text-align:right}
.nc-pv-close{display:none;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;color:var(--text-2)}
.nc-pv-close:hover{background:var(--chip);color:var(--text)}
.nc-frame{flex:1;display:block;width:100%;border:0;background:#F4F5FA}
.nc-studio:not(.is-js) .nc-lang,.nc-studio:not(.is-js) .nc-pv-btn,.nc-studio:not(.is-js) .nc-pvlang{display:none}
@media (min-width:1280px){.nc-pv-btn{display:none}}
@media (max-width:1279px){
  .nc-grid{grid-template-columns:210px minmax(0,1fr)}
  .nc-live{position:fixed;z-index:95;top:var(--header-h);right:0;bottom:0;width:min(640px,100%);height:auto;min-height:0;border-radius:0;border-width:0 0 0 1px;box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);transform:translateX(102%);visibility:hidden;transition:transform .38s var(--ease),visibility 0s linear .38s}
  .nc-studio.is-preview .nc-live{transform:none;visibility:visible;transition:transform .38s var(--ease)}
  .nc-pv-close{display:grid;place-items:center}
  .nc-studio:not(.is-js) .nc-live{position:static;grid-column:1/-1;height:80vh;transform:none;visibility:visible;border-radius:var(--r-lg);border-width:1px}
}
@media (max-width:899px){
  .nc-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .nc-nav{z-index:15;top:calc(var(--nc-top) + var(--nc-bar-h,58px) + 8px);padding:5px;border:1px solid var(--line);border-radius:16px;background:rgba(var(--tveil),.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}
  .nc-nav::-webkit-scrollbar{display:none}
  .nc-steps{display:flex;gap:2px;width:max-content}
  .nc-go{grid-template-columns:auto auto;gap:8px;padding:8px 12px;font-size:13.5px;white-space:nowrap}
  .nc-go .nc-num{display:none}
  .nc-steps-end{margin:0 0 0 4px;padding:0 0 0 4px;border-top:0;border-left:1px solid var(--line)}
  .nc-steps-end .nc-num{display:inline}
  .nc-ind{top:5px;left:0;width:0;box-shadow:inset 0 -2px 0 var(--accent-hi)}
  .nc-studio:not(.is-js) .nc-nav{position:static}
}
@media (max-width:640px){
  .nc-bar{padding:6px;border-radius:14px;gap:8px;flex-wrap:nowrap}
  .nc-bar-l,.nc-go-depot,.nc-new-lab{display:none}
  .nc-new-btn{width:38px;padding:0;justify-content:center}
  .nc-new-actions .btn{flex:1 1 auto}
  .nc-bar-r{flex-wrap:nowrap;gap:8px}
  .nc-lang button{padding:0 11px}
  .nc-save{width:14px;overflow:hidden;font-size:0;gap:0}  /* état : le losange seul (le texte reste lu par les lecteurs d'écran) */
  .nc-save[data-state="error"],.nc-save[data-state="conflict"]{position:absolute;left:12px;right:12px;top:calc(100% + 6px);width:auto;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line-2);font-size:12.5px;gap:8px;white-space:normal}
  .nc-more{margin-left:0}
  .nc-studio[data-lang="both"] .nc-pair{grid-template-columns:1fr;gap:10px}
  .nc-studio[data-lang="both"] .nc-cols{display:none}
  .nc-studio[data-lang="both"] .nc-l[data-l="en"]{padding-left:12px;border-left:2px solid var(--accent-hi)}
  .rex-grid.nc-grid3,.rex-grid.nc-grid4{grid-template-columns:1fr}
  .nc-actions .btn{flex:1 1 auto}
  .nc-pane-foot{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.nc-studio.is-js .nc-pane,.nc-studio.is-js .nc-new.is-open,.nc-toast.is-float{animation:none}.nc-knob,.nc-ind,.nc-live,.nc-prog i{transition:none}}
textarea[data-mono]{font-family:var(--mono);font-size:13.5px}
.rex-flash p+p{margin-top:6px}
@media (max-width:640px){.rex-grid{grid-template-columns:1fr}.rex-item>summary{flex-wrap:wrap;gap:8px 12px}.rex-title{order:3;flex-basis:100%}.rex-item>summary .rex-chip{margin-left:auto}}
.nl-intro{min-height:0}
.nl-body{max-width:900px}
@media (max-width:900px){.nl-card,.nl-footer{grid-template-columns:1fr}}

/* ---------- Automatisation et IA (v4.21, règle 51) : page d'atterrissage flyers / prospection + « À la une » de l'accueil ---------- */
.new-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-right:8px;border-radius:20px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;text-shadow:none}
.nav-menu-item .new-pill,.hub a .new-pill,.sl .new-pill,footer .new-pill{height:18px;padding:0 7px;font-size:9.5px;margin:0 0 0 6px}
.au-featured-sec{padding-top:clamp(28px,4vw,48px)}
/* v4.21.1 (Chérif : « le scroll est lent sur la section À la une, puis se fluidifie une fois passée ») : les visuels en parallaxe
   ([data-parallax], GSAP) passaient d'un transform 2D à 3D au début du défilement, donc changeaient de calque en pleine lecture :
   le navigateur repeignait alors la carte et l'ombre floutée du visuel (80 px) à chaque changement. Calque stable dès le départ :
   le visuel est peint une fois, puis simplement déplacé (−30 % de rastérisation mesurée au premier passage). */
@media (prefers-reduced-motion:no-preference){[data-parallax]{will-change:transform}}
.au-featured{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3.5vw,44px);border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(var(--glow),.16),transparent 55%),var(--card);position:relative;overflow:hidden}
.au-featured::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 100% 0%,rgba(var(--glow),.22),transparent 70%)}
.au-featured>*{position:relative}
.au-featured-txt{display:grid;gap:16px;justify-items:start}
.au-featured-txt .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.au-featured-txt .h2{font-size:clamp(28px,3vw,40px)}
.au-featured-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.au-featured-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.au-featured-list svg{flex:none;margin-top:5px;color:var(--accent-hi)}
.au-featured .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.au-featured-vis .vis{margin:0}
.au-hero .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.au-fine{justify-content:flex-start}
.au-note{margin-top:28px;max-width:70ch}
/* v4.24 : blocs de l'ancienne page Automatisation intégrés à la page IA */
.hero-inner>.eyebrow:has(.new-pill){display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.au-sub{margin-top:clamp(56px,7vw,88px)}
.au-sub-h{font-size:clamp(24px,2.6vw,34px)}
.au-pillars{margin-top:clamp(48px,6vw,72px)}
.au-faq-wrap{margin-bottom:clamp(64px,8vw,104px)}
.au-vows{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin:22px 0 0;padding:0}
.au-vows li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text-2)}
.au-vows li svg{flex:none;margin-top:4px;color:var(--ok)}
.au-vows b{display:block;font-weight:500;color:var(--text)}
.au-pain{gap:10px}.au-num{font-size:11px;color:var(--text-3);letter-spacing:.14em}
.au-pains{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;margin:0;padding:0}
.au-pains .au-pain{display:grid;gap:6px;align-content:start;padding-top:14px;border-top:1px solid var(--line-2)}
.au-pains .au-pain h3{font-size:17px;font-weight:500;line-height:1.3}
.au-pains .au-pain p{font-size:14px;line-height:1.55;color:var(--text-2)}
.au-service{gap:14px}
.au-service ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.au-service li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-2);line-height:1.45}
.au-service li svg{flex:none;margin-top:4px;color:var(--accent-hi)}
.au-get{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--text)}
.au-cases{display:grid;gap:14px;margin-top:24px}
.au-case{display:grid;gap:10px;padding:18px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card)}
.au-case h3{font-size:17px;font-weight:500}
.au-ba{display:grid;gap:8px}
.au-ba p{display:grid;gap:4px;font-size:14.5px;line-height:1.5;color:var(--text-2);padding-left:14px;border-left:2px solid var(--line-2)}
.au-ba p.is-after{border-left-color:var(--ok);color:var(--text)}
.au-ba-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.au-ba p.is-after .au-ba-l{color:var(--ok)}
.au-sectors{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.au-sector{padding:10px 16px;border-radius:40px;border:1px solid var(--line-2);background:var(--glass);color:var(--text-2);font-size:14.5px;font-weight:450;transition:border-color .2s,background .2s,color .2s,transform .2s}
.au-sector:hover{color:var(--text);border-color:var(--text-3)}
.au-sector[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.au-sector:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.au-panel{display:grid;gap:18px}
.au-panel+.au-panel{margin-top:40px}
.au-panel-h{font-size:clamp(20px,2vw,26px);font-weight:480}
.au-panel-h{display:none}
.au-idea{gap:12px}
.au-idea h4{font-size:19px;font-weight:480;letter-spacing:-.005em}
.au-idea>p{color:var(--text-2);font-size:15px}
.au-effort.is-quick{background:var(--ok-bg);color:var(--ok)}.au-effort.is-weeks{background:var(--chip);color:var(--chip-text)}.au-effort.is-project{background:var(--warn-bg);color:var(--warn)}
.au-dl{display:grid;gap:10px;margin:0;padding:14px 0 0;border-top:1px solid var(--line)}
.au-dl div{display:grid;gap:2px}
.au-dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.au-dl dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)}
.au-talk{margin-top:auto;padding-top:6px}
.au-other{margin-top:26px;font-size:14px}
.au-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.au-steps .step:nth-child(4)::after,.au-steps .step:nth-child(4) .step-dot{transition-delay:.54s}
.au-vow .ico{color:var(--ok)}
.au-faq{display:grid;gap:10px}
.au-q{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:0 20px;transition:border-color .2s}
.au-q[open]{border-color:var(--line-2)}
.au-q>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:480}
.au-q>summary::-webkit-details-marker{display:none}
.au-q>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.au-q>summary i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .3s var(--ease),background .2s}
.au-q>summary i::before,.au-q>summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.au-q>summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.au-q[open]>summary i{transform:rotate(45deg);background:var(--chip)}
.au-q>p{padding:0 0 18px;color:var(--text-2);font-size:15px;line-height:1.6;max-width:70ch}
.au-lead{align-items:start}
.au-wa{margin-top:24px;gap:10px;justify-items:start}
.au-wa h3{font-size:19px}.au-wa p{font-size:14.5px}
.au-lead .link{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:450}
.au-form{gap:16px}.au-form:hover{transform:none}
.au-picked{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--chip);font-size:14px}
.au-picked b{font-weight:500}
.au-unpick{margin-left:auto;width:26px;height:26px;border-radius:50%;color:var(--text-2);font-size:16px;line-height:1}
.au-unpick:hover{background:var(--card);color:var(--text)}
@media (max-width:1100px){.au-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.au-pains{grid-template-columns:repeat(2,minmax(0,1fr))}.au-featured{grid-template-columns:1fr}.au-featured-vis{order:-1}.au-lead{grid-template-columns:1fr}}
@media (max-width:700px){.au-vows,.au-pains{grid-template-columns:1fr}.au-steps{grid-template-columns:1fr}.au-sector{padding:9px 13px;font-size:13.5px}.au-featured{padding:20px}.au-featured .btn-row .btn{flex:1 1 auto}}

/* 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}

/* ---------- « Être rappelé » (v4.22, règle 52) : modale courte, créneaux en pastilles, confirmation sur place ---------- */
.btn[data-callback] svg,.sheet-cb svg{width:16px;height:16px;flex:none}
.modal-title svg{vertical-align:-2px;margin-right:4px;color:var(--accent-hi)}
.cb-box{width:min(560px,100%);height:auto;max-height:min(92vh,880px);grid-template-rows:auto minmax(0,1fr)}
.cb-body{overflow:auto;overscroll-behavior:contain;padding:22px 24px 24px}
.cb-form{display:grid;gap:16px}
.cb-lede{margin:0;font-size:15px;color:var(--text-2)}
.cb-phone{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:8px}
.cb-dial{padding-right:10px;text-overflow:ellipsis}
.cb-hint{margin:6px 0 0;font-size:12.5px;color:var(--text-3)}
.cb-slots{border:0;margin:0;padding:0;min-width:0}
.cb-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cb-chip{position:relative;display:flex}
.cb-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cb-chip span{flex:1;display:flex;align-items:center;min-height:42px;padding:8px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);font-size:13.5px;color:var(--text-2);transition:border-color .2s,background .2s,color .2s}
.cb-chip:hover span{border-color:var(--text-3)}
.cb-chip input:checked+span{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}
.cb-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cb-actions .btn svg{width:16px;height:16px;flex:none}
.cb-fine{margin:0;font-size:12.5px;color:var(--text-3)}
/* v4.23 : trois étapes (qui → numéro → créneau), la modale s'ancre en haut pour ne pas sauter d'une étape à l'autre */
.cb-modal{place-items:start center;padding-top:min(12vh,110px)}
.cb-progress{position:relative}
.cb-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cb-steps li{display:grid;gap:7px;font-size:12px;color:var(--text-3);transition:color .3s}
.cb-steps i{display:block;height:3px;border-radius:3px;background:var(--line-2);transition:background .35s var(--ease)}
.cb-steps li.is-on i{background:var(--accent)}
.cb-steps li.is-cur span{color:var(--text)}
.cb-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.cb-step{display:grid;gap:14px}
.cb-step.is-in{animation:cbIn .3s var(--ease) both}
.cb-step.is-back{animation-name:cbBack}
@keyframes cbIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes cbBack{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.cb-q{margin:0;padding:0;font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
.cb-step .cb-lede{margin-top:-6px}
.cb-hint-top{margin:4px 0 10px}
.cb-actions{display:flex;gap:10px;align-items:center}
.cb-actions .cb-next,.cb-actions .cb-send{margin-left:auto}
.cb-actions .btn svg{width:14px;height:14px;flex:none}
.cb-actions .cb-send svg{width:16px;height:16px}
.cb-form .form-note:empty{display:none}
.cb-form:not([data-cur="last"]) .cb-fine{display:none} /* la mention sur le SMS n'apparaît qu'avec le consentement */
.cb-form .form-note{margin:-6px 0 0}
.cb-done{display:grid;justify-items:center;gap:14px;padding:30px 8px 18px;text-align:center}
.cb-done-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-hi)}
.cb-done-msg{margin:0;max-width:40ch;font-size:16px;line-height:1.55}
.sheet-cb{margin-top:8px}
@media (max-width:520px){.cb-modal{padding-top:max(16px,4vh)}.cb-phone{grid-template-columns:1fr}.cb-body{padding:18px 16px 20px}.cb-q{font-size:19px}.cb-chip span{font-size:13px;padding:8px 10px}}
@media (max-width:340px){.cb-chips{grid-template-columns:1fr}}