/* Polices validées : auto-hébergées, zéro CDN (Safari/Maroc safe) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrainsmono.woff2') format('woff2')}
@font-face{font-family:'Noto Cuneiform';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cuneiform.woff2') format('woff2')}
:root{
  --ink:#070B10; --ink2:#0a121b; --steel:#3D688A; --steelL:#6CA6CF;
  --silver:#C4C8CC; --silverHi:#eef3f8; --mut:#7f93a6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:var(--silver);
  font:16px/1.5 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  isolation:isolate}
/* Stacking (reco Sol 17/07, conserve meme sans canvas plein-page en v5) */
#site-content{position:relative;z-index:1;}

/* ---- NAV sticky cockpit ---- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:0;
  padding:0 clamp(22px,5vw,64px);height:60px;
  background:rgba(7,11,16,.20);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(10px);
  transition:background 240ms ease,border-color 240ms ease,transform 260ms cubic-bezier(.22,.61,.36,1);
}
.site-nav.scrolled{background:rgba(7,11,16,.82);border-color:var(--line,#16202b);}
@media(max-width:760px){.site-nav.scrolled{background:rgba(7,11,16,.96);}}
section[id],section[aria-label],[id^="mpanel-"],.mstep,.uc-card,#services,#boucle{scroll-margin-top:74px;}
.site-nav.hidden{transform:translateY(-100%);}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-brand img{width:28px;height:28px;display:block;}
.nav-brand .nav-ring{opacity:0;transform:scale(.35) rotate(-70deg);transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1),margin-left .55s cubic-bezier(.22,.61,.36,1);margin-left:-38px;}
.site-nav.ring-in .nav-ring{opacity:1;transform:none;margin-left:0;}
@media(prefers-reduced-motion:reduce){.nav-brand .nav-ring{transition:opacity .3s ease;transform:none;margin-left:0;}}
.nav-brand span{font:700 16px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:.04em;}
.nav-links{display:flex;align-items:center;gap:32px;margin:0 auto;padding:0 40px;list-style:none;}
.nav-links li{list-style:none;display:flex;align-items:center;}
.nav-links a{
  font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;
  position:relative;padding-bottom:3px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--steelL);transform:scaleX(0);transition:transform 220ms ease;
}
.nav-links a:hover,
.nav-links a.active{color:var(--silverHi);}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.lang-sw{display:flex;gap:4px;}
.lang-sw button{
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;
  color:var(--mut);background:transparent;border:1px solid #25333f;
  border-radius:999px;padding:5px 9px;cursor:pointer;transition:.18s;
}
.lang-sw button:hover{color:var(--silverHi);border-color:var(--steel);}
.lang-sw button.on{color:var(--ink);background:var(--steelL);border-color:var(--steelL);font-weight:700;}
/* burger */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--silver);transition:.25s;}
.nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px);}
/* mobile panel */
.nav-panel{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(7,11,16,.97);flex-direction:column;justify-content:center;align-items:center;gap:36px;
}
.nav-panel.open{display:flex;}
.nav-panel a{
  font:600 22px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);text-decoration:none;letter-spacing:.02em;
}
.nav-panel a:hover{color:var(--steelL);}
.nav-panel .lang-sw{margin-top:16px;}
.nav-panel .btn.p{margin-top:8px;width:100%;max-width:260px;text-align:center;}
@media(max-width:980px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
}
.cvz-kpi .k-num{white-space:nowrap;}
.process-proof b,.mstep-proof b{white-space:nowrap;}
/* HP1 : en tres petit ecran, le CTA nav cede la place au burger (il reste dans le panneau mobile) */
@media(max-width:520px){
  .site-nav .nav-right .btn.p{display:none;}
  .site-nav .nav-right .lang-sw{display:none;}
}
@media(min-width:981px){
  .nav-panel{display:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .site-nav{transition:none;}
  .nav-links a::after{transition:none;}
}

/* ---- mega-menu Méthode (A2 friendly) ---- */
.nav-mega{position:relative;display:flex;align-items:center;}
.nav-mega>a .chev{display:inline-block;margin-left:5px;width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s ease;}
.nav-mega:hover>a .chev,.nav-mega:focus-within>a .chev{transform:rotate(225deg) translateY(-1px);}
.mega{
  position:fixed;top:52px;left:50%;
  width:min(640px,94vw);
  background:rgba(10,18,27,.98);backdrop-filter:blur(16px);
  border:1px solid #1b2a3a;border-radius:16px;
  box-shadow:0 44px 100px -42px rgba(0,0,0,.92),inset 0 1px 0 rgba(108,166,207,.06);
  padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .2s ease,transform .2s ease;z-index:101;
}
.nav-mega:hover .mega,.nav-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.mega::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px;} /* pont hover */
.mega-row{display:flex;flex-direction:column;gap:5px;padding:15px 16px;border-radius:12px;text-decoration:none;border:1px solid transparent;transition:.18s;text-transform:none;letter-spacing:normal;}
.mega-row::after{display:none!important;}
.mega-row:hover{background:rgba(61,104,138,.12);border-color:var(--steel);}
.mega-row .mr-num{font:600 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;color:var(--steelL);}
.mega-row .mr-title{font:600 16px/1.1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:-.01em;}
.mega-row .mr-desc{font:400 13px/1.4 'Inter',sans-serif;color:var(--mut);}
.mega-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:12px 16px 4px;border-top:1px solid #16222f;}
.mega-foot span{font:400 13px/1.4 'Inter',sans-serif;color:var(--mut);}
.mega-foot a{font:600 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;color:var(--steelL);text-decoration:none;}
.mega-foot a::after{display:none!important;}
.mega-foot a:hover{color:var(--silverHi);}
/* mobile : briques imbriquées sous Méthode */
.nav-panel .np-sub{display:flex;flex-direction:column;gap:14px;margin-top:-14px;}
.nav-panel .np-sub a{font:500 15px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--mut);text-transform:uppercase;}
.nav-panel .np-sub a:hover{color:var(--steelL);}
@media(max-width:980px){.mega{display:none!important;}}

/* ---- partenaires (grille extensible) ---- */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin-top:34px;}
.pcard{background:linear-gradient(160deg,#0a111a,#0c1520);border:1px solid #16202b;border-radius:16px;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease;}
.pcard:hover{transform:translateY(-4px);border-color:var(--steel);}
.pcard-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;
  border-bottom:1px solid #16202b;background:#05080c;}
/* 22/07 : height:auto obligatoire -- la passe SEO du 20/07 a ajoute des attributs
   width/height="1350" HTML (bon pour CLS) qui PRIMENT sur aspect-ratio CSS des lors
   qu'aucun height:auto n'annule le ratio intrinseque impose par l'attribut -> images
   etirees en portrait 385x1350 au lieu de 16:9. height:auto redonne la main a
   aspect-ratio (CLS toujours protege par l'attribut width/height, juste plus prioritaire). */
.pcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;}
.pcard-logo{height:30px;width:auto;max-width:170px;object-fit:contain;align-self:flex-start;}
.pcard-line{font-size:13.5px;line-height:1.55;color:var(--mut);}
.pcard-domain{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;color:var(--steelL);
  text-decoration:none;text-transform:uppercase;}
.pcard-domain:hover{color:var(--silverHi);}
.pcard-domain[data-state="pending"]{color:var(--mut);cursor:default;pointer-events:none;}

/* ---- chat inline (fusion widget <-> section) ---- */
#cw-inline-slot{min-height:480px;display:flex;align-items:stretch;justify-content:flex-start;margin-top:18px;}
#cw-window.cw-inline #cw-close{display:none;}
#cw-window.cw-inline{position:relative!important;right:auto!important;bottom:auto!important;
  width:100%!important;max-width:520px;max-height:520px!important;transform:none!important;animation:none!important;}

/* ---- sections home ---- */
.scene{position:relative;}
.hero{min-height:114vh;display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;padding-bottom:clamp(58px,12vh,134px)}
/* 22/07 : retour a l'ampleur v1 (decision Fred, "je preferais la v1, la c'est trop
   reduit") -- min-height repasse a 114vh (etait descendu a 100vh le 18/07 pour le 1er
   ecran desktop). Mobile : voir media query plus bas (fix 1er ecran conserve, ne
   regresse pas -- valide independamment le 18/07). */
/* fondu bas du hero -> couleur de la section suivante (--ink), adoucit la jonction abrupte */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,11,16,0) 0%,rgba(7,11,16,.55) 58%,var(--ink) 100%)}

.kick{font:12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--steelL)}
h1,h2,h3{font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif}
h1{font-size:clamp(34px,6vw,72px);font-weight:700;letter-spacing:-.022em;line-height:1.03;color:var(--silverHi)}
.lead{margin-top:18px;font-size:clamp(16px,1.6vw,20px);color:var(--mut);max-width:48ch}
.cta{margin-top:30px;display:inline-flex;gap:12px}
.btn{font-size:14px;font-weight:600;letter-spacing:.02em;padding:13px 22px;border-radius:10px;text-decoration:none;transition:.2s}
.btn.p{background:var(--steelL);color:#06121d}
.btn.p:hover{background:#8cc0e3}
.btn.s{border:1px solid #2b3a47;color:var(--silver)}
.btn.s:hover{border-color:var(--steelL);color:var(--silverHi)}

/* ===== V1 PORTAIL ===== */
#portail canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#portail .stage{position:relative;z-index:2;text-align:center;padding:clamp(96px,16vh,190px) 22px 0}
.ring-wrap{position:relative;width:min(340px,72vw);aspect-ratio:1;margin:0 auto 34px}
.ring-wrap .halo{display:none}
.ring-wrap .core{position:absolute;inset:24%;border-radius:50%;
  background:radial-gradient(circle,rgba(108,166,207,.22) 0%,transparent 68%);
  filter:blur(12px)}
.ring-wrap img{position:relative;width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.86);opacity:.55}50%{transform:scale(1.06);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
#portail h1{margin-top:6px;font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-weight:700;letter-spacing:-.022em;text-shadow:0 2px 26px rgba(7,11,16,.92),0 1px 2px rgba(7,11,16,.85)}
#portail .lead{margin-left:auto;margin-right:auto;text-shadow:0 1px 16px rgba(7,11,16,.9)}
/* bloc texte descendu sous le centre + voile de lisibilite (l'anneau-portail reste propre) */
.hero-copy{position:relative;margin-top:clamp(54px,11vh,128px);padding:34px 30px 30px;display:inline-block}
/* 22/07 : la voile precedente (72% 86% at 50% 46%, inset -14%/-10%) avait un bord dur
   visible ("trait sombre" signale par Fred) -- l'ellipse (ry=86% du bloc) depassait le
   bord meme du bloc (distance centre->bord = 46% du bloc), donc le degrade etait
   TRONQUE avant d'atteindre alpha 0 : saut net de ~0.4 d'opacite au bord. Fix : bloc
   agrandi (inset -30%/-16%) + ellipse reduite (36% 32%) pour que meme le dernier stop
   (76% du rayon) reste tres a l'interieur du bloc -> fondu 100% complet avant le bord,
   plus aucun bord perceptible. Verifie par profil de luminance (aucun saut > seuil). */
/* 03/09 V9.1 : le voile devient une vraie profondeur de champ. Le z-index:-1 est retire
   (un z negatif casse backdrop-filter sur WebKit) : le contenu est remonte a z-index:1 et
   le voile reste a 0, sous lui. Trois couches cumulees : flou du fond, voile radial
   renforce, attenuation des noeuds cote canvas (heroDim() dans le JS). Le masque radial
   evite tout bord : le degrade atteint alpha 0 bien avant le bord du bloc. */
.hero-copy > *{position:relative;z-index:1;}
.hero-copy::before{
  content:'';position:absolute;inset:-30% -16%;z-index:0;pointer-events:none;border-radius:50%/40%;
  -webkit-backdrop-filter:blur(16px) saturate(.82);
          backdrop-filter:blur(16px) saturate(.82);
  background:radial-gradient(38% 34% at 50% 50%,
    rgba(7,11,16,.94) 0%,rgba(7,11,16,.78) 34%,rgba(7,11,16,.42) 56%,rgba(7,11,16,.14) 70%,rgba(7,11,16,0) 80%);
  -webkit-mask-image:radial-gradient(44% 40% at 50% 50%,
    #000 0%,rgba(0,0,0,.92) 40%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.18) 74%,transparent 86%);
          mask-image:radial-gradient(44% 40% at 50% 50%,
    #000 0%,rgba(0,0,0,.92) 40%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.18) 74%,transparent 86%);
}
/* repli sans backdrop-filter : voile seul, plus dense, memes stops */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero-copy::before{background:radial-gradient(38% 34% at 50% 50%,
    rgba(7,11,16,.97) 0%,rgba(7,11,16,.86) 34%,rgba(7,11,16,.50) 56%,rgba(7,11,16,.17) 70%,rgba(7,11,16,0) 80%);}
}
.hero-reassure{margin-top:6px;font:600 12.5px/1.3 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.06em;color:var(--steelL);}
/* 22/07 : hero-reassure n'existait pas en v1 -- son ajout v5 (Sol) grignotait ~18px sous
   le CTA une fois l'amplitude v1 restauree (114vh) a 900px de haut. Resserre ici
   (margin-top 14->6) + #portail .cta ci-dessous (30->20) plutot que sur l'amplitude du
   haut (celle que Fred veut retrouver) : le CTA reste dans l'ecran, le reste de la
   composition (orbe, titre) retrouve l'ampleur v1 intacte. */
#portail .cta{margin-top:20px;}
@media (prefers-reduced-motion:reduce){.halo,.core,.ring-wrap img{animation:none}}

/* 18/07 · Hero mobile (Sol Q1 bloquant #1) : promesse + reassurance 48h + CTA doivent
   tenir dans les 844 premiers px. min-height:114vh + align-items:flex-end poussaient le
   titre sous le pli sur un petit ecran -> hero recentre sur son propre contenu, anneau
   reduit a ~200px, paddings compresses. */
@media(max-width:600px){
  .hero{min-height:auto;align-items:center;padding-top:70px;padding-bottom:26px;}
  #portail .stage{padding:8px 18px 0;}
  .ring-wrap{width:min(200px,50vw);margin:0 auto 20px;}
  .hero-copy{margin-top:clamp(14px,3vh,26px);padding:22px 16px 20px}
  .hero-copy::before{-webkit-backdrop-filter:blur(11px) saturate(.85);backdrop-filter:blur(11px) saturate(.85);}
  .hero-reassure{margin-top:10px;font-size:11.5px;}
}

/* ===== Styles supprimés : scènes DEV contrôle/opérateur/monolithe ===== */

/* ===== FX-REVEAL (IO-driven, nouvelles sections D/E/F) ===== */
/* Visible par defaut. Masque uniquement sous js-io. Revele avec .visible */
html.js-io .fx-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 540ms ease,transform 540ms cubic-bezier(.22,.61,.36,1);
}
html.js-io .fx-reveal.visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  html.js-io .fx-reveal,html.js-io .fx-reveal.visible{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ===== INTER-TITRE C→D ===== */
.pivot{
  position:relative;background:var(--ink);
  padding:100px clamp(22px,5vw,64px) 80px;
  text-align:center;overflow:hidden;
}
.pivot .briques-grain{pointer-events:none;}
.pivot-kick{
  display:block;
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--steelL);margin-bottom:22px;
}
.pivot-title{
  font:700 clamp(28px,4vw,52px)/1.1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);
  display:block;
}
@media(max-width:600px){.pivot{padding:72px 22px 60px;}}

/* ===== SECTION 4 BRIQUES ===== */

/* --- grain SVG inline tuilé (statique, pas de canvas) --- */
.briques-section{
  position:relative;
  background:var(--ink);
}
/* noise SVG en overlay */
.briques-grain{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.065'/%3E%3C/svg%3E");
  background-size:128px 128px;
  mix-blend-mode:overlay;
}

/* --- pont lumineux entre hero et briques --- */
/* D3 fix: aplat ink continu (spec), pas de gradient plein-largeur */
.briques-bridge{
  display:flex;justify-content:center;align-items:flex-start;
  height:80px;position:relative;z-index:1;
  background:var(--ink);
}
.briques-bridge::after{
  content:"";display:block;
  width:1px;height:80px;
  background:linear-gradient(to bottom,var(--steelL),transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform 700ms cubic-bezier(.22,.61,.36,1);
  opacity:.9;
}
.briques-bridge.reveal::after{transform:scaleY(1);}
@media(prefers-reduced-motion:reduce){.briques-bridge::after{transform:scaleY(1);transition:none;}}

/* --- titre section (Monolithe gravé) --- */
.briques-header{
  position:relative;z-index:1;
  padding:56px 30px 52px;
  text-align:center;
  background:linear-gradient(105deg,#0a121c 0%,#11202e 38%,#0a121c 70%);
  box-shadow:inset 0 0 120px -40px #000;
  transition:opacity 500ms ease,transform 500ms ease;
}
/* JS cache puis révèle via IntersectionObserver */
html.js-io .briques-header{opacity:0;transform:translateY(24px);}
html.js-io .briques-header.reveal{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){html.js-io .briques-header{opacity:1;transform:none;transition:none;}}

.briques-header .sec-kick{
  font:12px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--steelL);margin-bottom:18px;display:block;
}
.briques-header .sec-title{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  font-weight:700;
  font-size:clamp(46px,7.5vw,108px);
  letter-spacing:-.03em;line-height:.94;
  color:var(--silverHi);
  text-shadow:0 2px 34px rgba(108,166,207,.14);
  display:block;
}
.briques-header .sec-sub{
  margin-top:22px;
  font:400 17px/1.5 Inter,system-ui,sans-serif;
  color:rgba(196,200,204,.7);
}

/* --- MÉTHODE · parcours horizontal en 4 temps (lisible d'un coup d'œil) --- */
.method{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:6px clamp(16px,4vw,48px) 24px;}

/* --- MÉTHODE · "Diriger" principe transversal (18/07, remplace le bandeau 8 etapes,
   diagnostic Sol Q3b : doublon avec les 4 cartes + les verbes courts sous chaque titre) --- */
.method-diriger{
  text-align:center;margin:0 auto 22px;max-width:640px;
  font:500 14px/1.4 Inter,system-ui,sans-serif;letter-spacing:.01em;
  color:var(--steelL);
}
html.light .method-diriger{color:#2E6A98;}

.method-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;}
/* fil conducteur : ligne cobalt reliant les 4 illustrations (la série 01→04) */
.method-steps::before{
  content:"";position:absolute;left:9%;right:9%;top:83px;height:1px;
  background:linear-gradient(90deg,transparent,var(--steel) 12%,var(--steel) 88%,transparent);
  opacity:.5;z-index:0;
}
html.js-io .method-steps::before{transform:scaleX(0);transform-origin:left;transition:transform 900ms cubic-bezier(.22,.61,.36,1) .2s;}
html.js-io .method-steps.reveal::before{transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){html.js-io .method-steps::before{transform:none;transition:none;}}

.mstep{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:9px;
  text-align:left;cursor:pointer;width:100%;
  padding:16px 17px 18px;
  background:linear-gradient(180deg,rgba(13,23,34,.5),rgba(7,11,16,.32));
  border:1px solid #16202b;border-radius:16px;
  color:inherit;font:inherit;-webkit-appearance:none;appearance:none;
  transition:border-color .28s ease,box-shadow .28s ease,transform .5s cubic-bezier(.22,.61,.36,1),background .28s ease,opacity .5s ease;
}
.mstep:hover{border-color:rgba(108,166,207,.34);transform:translateY(-3px);}
.mstep:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;}
.mstep.active{
  border-color:rgba(108,166,207,.55);
  background:linear-gradient(180deg,rgba(17,32,46,.72),rgba(9,15,23,.5));
  box-shadow:0 26px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(108,166,207,.12);
}
html.js-io .mstep{opacity:0;transform:translateY(20px);}
html.js-io .mstep.reveal{opacity:1;transform:translateY(0);}
html.js-io .mstep.reveal:hover{transform:translateY(-3px);}
@media(prefers-reduced-motion:reduce){html.js-io .mstep{opacity:1;transform:none;transition:none;}}

/* illustration Blueprint en tête de carte (série 01→04) */
.mstep-viz{height:132px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.mstep-viz svg{width:100%;height:100%;overflow:visible;}
.mstep .bp-key,.mstep-pulse{filter:drop-shadow(0 0 4px rgba(87,214,238,.55));}
/* numéro-temps fantôme */
.mstep-ord{position:absolute;top:10px;right:13px;font:700 38px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:rgba(108,166,207,.07);letter-spacing:-.03em;pointer-events:none;}
.mstep.active .mstep-ord{color:rgba(108,166,207,.15);}
/* contenu de carte : tout l'essentiel visible sans clic */
.mstep-kick{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--steelL);}
.mstep-title{font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1.06;color:#eef3f8;}
/* verbes courts (18/07) : ex-bandeau 8 etapes distille sous chaque titre de carte */
.mstep-verbs{font:600 10.5px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--steelL);}
.mstep-promise{font:400 13.5px/1.45 Inter,system-ui,sans-serif;color:rgba(196,200,204,.72);}
.mstep-services{display:flex;flex-wrap:wrap;align-items:center;margin-top:2px;}
.mstep-services span{font:500 10.5px/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--mut);}
.mstep-services span + span::before{content:"·";margin:0 7px;color:var(--steel);}
.mstep-proof{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;color:#8fb4d4;}
.mstep-proof::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--steelL);box-shadow:0 0 8px rgba(108,166,207,.6);}
.mstep-proof b{color:#cfe0ee;font-weight:600;}

/* panneau détail (tabpanel) sous la rangée : accessible clavier */
.method-panels{position:relative;z-index:1;margin-top:18px;}
.mpanel{
  border:1px solid #1b2733;border-radius:18px;
  background:linear-gradient(180deg,rgba(11,20,30,.6),rgba(7,11,16,.4));
  box-shadow:0 30px 70px -46px rgba(0,0,0,.9),inset 0 1px 0 rgba(108,166,207,.06);
  animation:mpanelIn .42s cubic-bezier(.22,.61,.36,1);
}
.mpanel[hidden]{display:none;}
.mpanel:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;}
@keyframes mpanelIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.mpanel{animation:none;}}

/* contenu détaillé dans le panneau (réutilise process-rail / livrable) */
.mpanel .brique-body{border-top:none;max-width:900px;margin:0 auto;}

/* === COCKPIT · EXEMPLE (dataviz business explicite, chiffres FICTIFS) === */
.cvz{border:1px solid #1b2a3a;border-radius:14px;overflow:hidden;margin:2px 0 22px;
  background:linear-gradient(180deg,#0a121b,#070d14);
  box-shadow:0 24px 60px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(108,166,207,.08);}
.cvz-bar{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid #16222f;background:rgba(61,104,138,.07);}
.cvz-dot{width:8px;height:8px;border-radius:50%;background:#57d6ee;box-shadow:0 0 10px #57d6ee;animation:ckpulse 2.4s ease-in-out infinite;}
.cvz-ttl{font:600 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;}
.cvz-live{margin-left:auto;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steelL);}
.cvz-body{padding:16px;display:grid;grid-template-columns:1.12fr .88fr;gap:16px;}
.cvz-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.cvz-kpi{border:1px solid #16222f;border-radius:10px;padding:11px 12px;background:rgba(10,18,27,.5);}
.cvz-kpi .k-num{font:700 22px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:-.02em;}
.cvz-kpi .k-num.accent{color:#57d6ee;}
.cvz-kpi .k-lbl{display:block;margin-top:5px;font:500 9.5px/1.3 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.05em;color:var(--mut);text-transform:uppercase;}
.cvz-side{display:flex;flex-direction:column;gap:14px;}
.cvz-h{font:600 9.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:8px;}
.cvz-bars{display:flex;align-items:flex-end;gap:6px;height:52px;}
.cvz-bars i{flex:1;background:var(--steel);border-radius:2px 2px 0 0;opacity:.5;}
.cvz-bars i.best{background:linear-gradient(180deg,#57d6ee,var(--steelL));opacity:1;box-shadow:0 0 12px rgba(87,214,238,.4);}
.cvz-bars-x{display:flex;gap:6px;margin-top:5px;}
.cvz-bars-x span{flex:1;text-align:center;font:500 8px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--mut);}
.cvz-curve{width:100%;height:44px;display:block;}
.cvz-curve polyline{fill:none;stroke:var(--steelL);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;}
.cvz-curve .area{fill:rgba(108,166,207,.10);stroke:none;}
.cvz-plain{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-top:1px solid #16222f;background:rgba(87,214,238,.05);}
.cvz-plain .p-k{flex:none;font:700 9px/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#57d6ee;padding-top:2px;}
.cvz-plain .p-v{font:400 14px/1.55 Inter,system-ui,sans-serif;color:#dbe6f0;}
.cvz-plain .p-v b{color:var(--silverHi);font-weight:600;}
@media(max-width:640px){.cvz-body{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.cvz-dot{animation:none;}}

/* === BRIQUES · SÉRIE BLUEPRINT (registre B : écho du logo) === */
.bp-viz{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:18px 26px;}
.bp-viz svg{width:100%;max-width:340px;height:auto;display:block;overflow:visible;}
.bp{fill:none;stroke:var(--steelL);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.bp-faint{stroke:var(--steel);stroke-width:1;opacity:.26;fill:none;}
/* fill:none ajouté le 03/09 : .bp-faint était toujours écrit « bp bp-faint », donc il
   héritait le fill:none de .bp. La variante B de l'organisation l'emploie SEUL sur la
   route de retour du compte rendu : sans ce fill:none le tracé se remplissait en noir
   et posait un rectangle gris sur la moitié de la figure. Les 29 « bp bp-faint »
   existants ont déjà fill:none : aucun changement de rendu pour eux. */
.bp-node{fill:var(--steelL);}
.bp-key{fill:#57d6ee;} /* cyan signature : un seul par frame (le « · » de marque) */
/* draw-on au reveal (pathLength normalisé à 1, stagger gauche→droite).
   Masqué uniquement sous js-io ; sans IntersectionObserver → tracé complet visible. */
html.js-io .bp-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 820ms cubic-bezier(.22,1,.36,1);}
html.js-io .mstep.reveal .bp-draw{stroke-dashoffset:0;transition-delay:calc(var(--d,0) * 90ms);}
html.js-io .bp-node,html.js-io .bp-key{opacity:0;transition:opacity 500ms ease .52s;}
html.js-io .mstep.reveal .bp-node,html.js-io .mstep.reveal .bp-key{opacity:1;}
/* === MÉTHODE · motion language "précis, calme, sûr" (transform/opacity only, Safari-safe) === */
/* accent cyan : arrive en DERNIER, après le tracé principal (le release que l'oeil attend) */
html.js-io .mstep.reveal .bp-key{transition:opacity 460ms cubic-bezier(0.16,1,0.3,1) 1s;}
/* transform-box explicites (piège WebKit : jamais de transform-box implicite) */
.mstep-sweep{transform-box:view-box;transform-origin:54px 126px;will-change:transform;}
.mstep-pulse{fill:#57d6ee;transform-box:fill-box;transform-origin:center;will-change:transform;}
.mstep-read{fill:var(--steelL);}
.mstep .bp-orbit{transform-box:view-box;transform-origin:150px 75px;will-change:transform;}
.mstep-handoff{transform-box:fill-box;transform-origin:center;will-change:transform;}
/* éléments idle : masqués tant que le draw-on n'a pas eu lieu (uniquement sous IntersectionObserver) */
html.js-io .mstep-sweep,html.js-io .mstep-pulse,html.js-io .mstep-read,
html.js-io .mstep .bp-orbit,html.js-io .mstep-handoff{opacity:0;}

/* 01 COMPRENDRE : balayer le nuage puis le ranger : radar doux (~8 s, jamais un gyrophare) */
.mstep.reveal .mstep-sweep{opacity:.4;transition:opacity .7s cubic-bezier(0.16,1,0.3,1) 1.1s;animation:mSweep 8s cubic-bezier(0.42,0,0.58,1) 1.2s infinite;}
@keyframes mSweep{0%,100%{transform:rotate(4deg);}50%{transform:rotate(86deg);}}

/* 02 CONSTRUIRE : assembler : un signal circule sur la connexion vers le produit (~6 s, calme) */
.mstep.reveal .mstep-pulse{animation:mPulse 6s cubic-bezier(0.42,0,0.58,1) 1.3s infinite;}
@keyframes mPulse{0%{transform:translateX(0);opacity:0;}12%{opacity:1;}84%{opacity:1;}100%{transform:translateX(150px);opacity:0;}}

/* 03 OPÉRER : tourner et mesurer : orbite mécanique lente continue + lecture qui respire */
.mstep.reveal .bp-orbit{opacity:1;transition:opacity .5s cubic-bezier(0.16,1,0.3,1) 1s;animation:bpSpin 9s linear 1.1s infinite;}
@keyframes bpSpin{to{transform:rotate(360deg);}}
.mstep.reveal .mstep-read{opacity:1;transition:opacity .5s ease 1s;animation:mRead 7s cubic-bezier(0.42,0,0.58,1) 1.4s infinite;}
@keyframes mRead{0%,100%{opacity:.55;}50%{opacity:1;}}

/* 04 RENDRE LA MAIN : ouvrir et remettre : GESTE (anticipation + léger overshoot) puis micro-respiration stable */
.mstep.reveal .mstep-handoff{animation:mHandoff 1.1s cubic-bezier(0.16,1,0.3,1) .95s both,mBreathe 7.4s cubic-bezier(0.42,0,0.58,1) 2.4s infinite;}
@keyframes mHandoff{0%{transform:translateX(-66px);opacity:0;}16%{transform:translateX(-71px);opacity:1;}70%{transform:translateX(7px);}100%{transform:translateX(0);opacity:1;}}
@keyframes mBreathe{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.02);opacity:1;}}

@media(prefers-reduced-motion:reduce){
  .bp-draw{stroke-dashoffset:0!important;transition:none!important;}
  .bp-node,.bp-key{opacity:1!important;transition:none!important;}
  html.js-io .mstep-sweep,html.js-io .mstep-pulse,html.js-io .mstep-read,
  html.js-io .mstep .bp-orbit,html.js-io .mstep-handoff{opacity:1!important;}
  .mstep-sweep,.mstep-pulse,.mstep-read,.mstep .bp-orbit,.mstep-handoff{animation:none!important;transition:none!important;transform:none!important;}
}

/* BRIQUES 03/04 : mêmes règles Blueprint que 01/02 (série unifiée ci-dessus) */

/* === SECTION E.0 · LA BOUCLE (illustration Blueprint animée) === */
.loop-wrap{max-width:1120px;margin:0 auto;padding:8px clamp(22px,5vw,64px) 12px;}
.loop-head{text-align:center;max-width:60ch;margin:0 auto;}
.loop-head .section-title{margin-top:14px;}
.loop-accroche{
  font:500 clamp(17px,1.9vw,21px)/1.5 Inter,system-ui,sans-serif;
  color:var(--silverHi);margin:16px auto 0;max-width:54ch;letter-spacing:-.01em;
}
.loop-figure{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);
  align-items:center;margin:40px auto 0;max-width:940px;
}
.loop-svg-holder{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;}
.loop-svg{width:100%;max-width:340px;height:auto;display:block;overflow:visible;}
.loop-mask{fill:var(--ink);}
.loop-prodium{
  font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);text-align:center;
}
.loop-prodium b{color:var(--steelL);font-weight:600;}
.loop-legend{list-style:none;margin:0;padding:0;counter-reset:loop;}
.loop-legend li{position:relative;padding:15px 0 15px 46px;border-bottom:1px solid rgba(22,32,43,.7);}
.loop-legend li:last-child{border-bottom:none;}
.loop-legend li::before{
  counter-increment:loop;content:"0" counter(loop);
  position:absolute;left:0;top:16px;
  font:700 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;color:var(--steelL);
}
.loop-legend li::after{content:"";position:absolute;left:5px;top:34px;bottom:6px;width:1px;background:var(--steel);opacity:.32;}
.loop-legend li:last-child::after{display:none;}
.loop-leg-k{display:block;font:600 15px/1.3 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:#dbe6f0;letter-spacing:-.01em;}
.loop-leg-v{display:block;margin-top:4px;font:400 13.5px/1.5 Inter,system-ui,sans-serif;color:var(--mut);}
.loop-support{max-width:70ch;margin:34px auto 0;text-align:center;}
.loop-support p{font:400 15.5px/1.7 Inter,system-ui,sans-serif;color:rgba(196,200,204,.82);margin-top:12px;}
.loop-support p:first-child{margin-top:0;}
.loop-support b{color:#dbe6f0;font-weight:600;}
/* le signal cyan qui circule (un seul cyan par frame) */
.loop-figure .bp-key{filter:drop-shadow(0 0 5px rgba(87,214,238,.7));}
.loop-pulse{transform-box:view-box;transform-origin:160px 160px;}
/* draw-on scoping (hors .mstep) : révélé quand la figure entre en vue */
html.js-io .loop-figure .bp-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms cubic-bezier(.22,1,.36,1);}
html.js-io .loop-figure.visible .bp-draw{stroke-dashoffset:0;transition-delay:calc(var(--d,0) * 110ms);}
html.js-io .loop-figure .bp-node,html.js-io .loop-figure .bp-key{opacity:0;transition:opacity 500ms ease .7s;}
html.js-io .loop-figure.visible .bp-node,html.js-io .loop-figure.visible .bp-key{opacity:1;}
html.js-io .loop-figure.visible .loop-pulse{animation:loopSpin 7s linear infinite 1s;}
@keyframes loopSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  html.js-io .loop-figure .bp-draw{stroke-dashoffset:0!important;transition:none!important;}
  html.js-io .loop-figure .bp-node,html.js-io .loop-figure .bp-key{opacity:1!important;transition:none!important;}
  html.js-io .loop-figure.visible .loop-pulse{animation:none!important;}
}
@media(max-width:760px){
  .loop-figure{grid-template-columns:1fr;gap:28px;max-width:420px;}
}

/* image plein-cadre dans un moniteur (cockpit, captures) */
.monitor-inner>img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ---- Bandeau HUMAIN (derrière Prodium) ---- */
.humain{padding:96px clamp(22px,5vw,64px);max-width:1200px;margin:0 auto;}
.humain-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-top:38px;}
.humain-stage{position:relative;border:1px solid #16202b;border-radius:14px;overflow:hidden;background:#05080c;min-height:240px;}
.humain-stage img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.04);}
.humain-stage figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(to top,rgba(5,8,12,.94),transparent);font:11px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);}
.humain-people{display:grid;grid-template-rows:1fr 1fr;gap:20px;}
.person{position:relative;border:1px solid #16202b;border-radius:14px;overflow:hidden;background:#05080c;min-height:150px;}
.person img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.45) contrast(1.04);}
.person .who{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(to top,rgba(5,8,12,.95),transparent);}
.person .who b{display:block;color:var(--silverHi);font:600 15px/1.2 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;letter-spacing:-.01em;}
.person .who span{font:11px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;color:var(--steelL);text-transform:uppercase;}
@media(max-width:760px){.humain-grid{grid-template-columns:1fr;}.humain-people{grid-template-rows:auto;grid-template-columns:1fr 1fr;}.person{min-height:180px;}}

/* ---- Bande parcours (logos couleur, marquee) ---- */
.parcours{margin-top:64px;}
.parcours-title{font:600 clamp(19px,2.4vw,26px)/1.25 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;letter-spacing:-.01em;color:var(--silverHi);text-align:center;margin-bottom:30px;}
.marquee{position:relative;overflow:hidden;margin-bottom:26px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.mq-track{display:flex;align-items:center;gap:clamp(36px,6vw,72px);width:max-content;will-change:transform;}
.mq-a .mq-track{animation:mq-left 46s linear infinite;}
.mq-b .mq-track{animation:mq-right 52s linear infinite;}
.marquee:hover .mq-track{animation-play-state:paused;}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee .mq-logo{height:44px;width:auto;max-width:190px;object-fit:contain;opacity:.85;transition:opacity .2s ease;flex:0 0 auto;}
.marquee:hover .mq-logo{opacity:.55;}
.marquee .mq-logo:hover{opacity:1;}
.marquee .mq-logo--apple{height:36px;}
.marquee .mq-logo--invert{filter:invert(1) brightness(1.7);}
.marquee .mq-logo--plaque{background:#f4f5f2;border-radius:8px;padding:9px 14px;height:58px;opacity:1;}
.marquee .mq-logo--sq{height:76px;padding:7px;}
/* ================= V9 (02/09) ================= */
/* Apple : plus de plaque blanche en clair, hauteur 36 -> 45 px (+25 %).
   apple.svg n'a pas d'attribut fill : il est noir. Il reste noir sur le papier
   clair (#EBF0F6) et il est inverse en sombre. Aucun fond dans les deux themes. */
.marquee .mq-logo--apple{height:45px;filter:invert(1) brightness(1.7);background:none;border:0;padding:0;}
html.light .marquee .mq-logo--apple{filter:none;background:none;border:0;padding:0;}
/* Groupe insecable : garde le point et le guillemet fermant soudes au lien #boucle. */
.nowrap-grp{white-space:nowrap;}
/* Lien LinkedIn discret dans la legende des portraits.
   La legende est posee sur un degrade sombre dans LES DEUX themes
   (cf. html.light .person .who b = #F2F6FA) : l'encre du lien reste claire. */
.who-line{display:flex;align-items:center;gap:2px;}
/* Ligne de faits sous le rôle. MÊME PIÈGE que .who-line : `.person .who span`
   (0,2,1) impose capitales + interlettrage mono. On monte à 0,3,1 pour reprendre
   la main sans toucher la règle d'origine, qui sert toujours au libellé de rôle. */
.person .who span.who-facts{
  display:block;margin-top:5px;text-transform:none;letter-spacing:.01em;
  font:400 11.5px/1.45 Inter,system-ui,sans-serif;color:#AFC0D0;white-space:nowrap;}
html.light .person .who span.who-facts{color:#C3D3E1;}
/* V9.2 (03/09, Fred) : les faits tiennent sur UNE ligne. Sous 520 px la légende fait
   ~320 px utiles : on réduit un peu le corps plutôt que de couper ou de replier. */
@media(max-width:520px){.person .who span.who-facts{font-size:clamp(8.5px,2.5vw,11.5px);letter-spacing:0;}}
@media(max-width:340px){.person .who span.who-facts{white-space:normal;}}
.who-li{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-12px -10px -12px 0;border-radius:9px;color:#C7D8E7;transition:color .2s ease,background-color .2s ease;}
.who-li svg{display:block;width:16px;height:16px;fill:currentColor;}
.who-li:hover{color:#fff;background:rgba(255,255,255,.16);}
.who-li:focus-visible{color:#fff;background:rgba(255,255,255,.16);outline:2px solid var(--steelL);outline-offset:2px;}
html.light .who-li{color:#DCE7F1;}
html.light .who-li:hover,html.light .who-li:focus-visible{color:#fff;}
/* Marque Ergalon : dessin de Fred, 48 px mini (illisible en dessous),
   barres en encre du site, accent sur l'accent du site. */
.p-card--chantier .p-head{align-items:center;}
.erg-mark{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--silverHi);}
.erg-mark svg{display:block;width:48px;height:48px;}
.erg-mark .erg-accent{fill:var(--steelL);}
@media(max-width:760px){.erg-mark svg{width:48px;height:48px;}}
/* =============== fin V9 =============== */
@media(prefers-reduced-motion:reduce){
  .mq-a .mq-track,.mq-b .mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
  .marquee{-webkit-mask:none;mask:none;}
  .mq-dup{display:none;}
}

/* ===== SECTION E2 : LE NOM (réintégrée 12/07, source site original validé Fred) ===== */
.lenom{padding:96px clamp(22px,5vw,64px) 110px;max-width:1200px;margin:0 auto;text-align:center;position:relative;}
.lenom .section-title{margin-top:14px;}
.etym{margin-top:44px;}
.etym-word{
  font:600 clamp(30px,4.6vw,54px)/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  letter-spacing:.34em;color:var(--silverHi);margin-bottom:40px;padding-left:.34em;
}
.etym-parts{display:flex;align-items:stretch;justify-content:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;}
.etym-part{
  display:flex;flex-direction:column;gap:9px;
  padding:26px clamp(22px,3vw,44px);min-width:230px;
  background:var(--ink2);border:1px solid #16202b;border-radius:10px;
}
.etym-plus{align-self:center;font:300 26px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--steelL);}
.etym-name{font:600 20px/1.2 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--steelL);}
.etym-script{font:400 30px/1.3 'Noto Cuneiform',sans-serif;color:var(--silverHi);}
.etym-meaning{font:400 13px/1.4 'Inter',system-ui,sans-serif;color:var(--mut);}
.etym-concept{font:italic 400 14px/1.4 'Inter',system-ui,sans-serif;color:var(--silver);}
.etym-note{font:400 12px/1.5 'Inter',system-ui,sans-serif;color:var(--mut);max-width:30ch;margin:2px auto 0;}
.contact-form button.btn{cursor:pointer;font-family:inherit;border:1px solid transparent;}
.contact-form button.btn:focus{outline:none;}
.contact-form button.btn:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;}
.etym-desc{
  margin:38px auto 0;max-width:58ch;
  font:400 17px/1.65 'Inter',system-ui,sans-serif;color:#aebfce;
}
@media(max-width:640px){.etym-parts{flex-direction:column;align-items:center;}.etym-part{width:100%;max-width:340px;}}


/* ===== FORMULAIRE CONTACT (lot 4, 12/07) ===== */
.contact-form{
  margin:46px auto 0;max-width:520px;width:100%;
  display:flex;flex-direction:column;gap:14px;text-align:left;
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:640px){.cf-row{grid-template-columns:1fr;}}
.cf-field{display:flex;flex-direction:column;gap:6px;}
.cf-field label{
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steelL);
}
.cf-field input,.cf-field textarea{
  background:var(--ink2);border:1px solid #16202b;border-radius:8px;
  padding:13px 14px;color:var(--silverHi);
  font:400 15px/1.5 Inter,system-ui,-apple-system,sans-serif;
  transition:border-color .2s ease;width:100%;
}
.cf-field input:focus,.cf-field textarea:focus{
  outline:none;border-color:rgba(108,166,207,.55);
}
.cf-field textarea{min-height:130px;resize:vertical;}
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.cf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;}
.cf-status{font:400 13.5px/1.5 Inter,system-ui,sans-serif;color:var(--mut);min-height:20px;}
.cf-status.ok{color:#8fd4b4;}
.cf-status.err{color:#d49a8f;}
.cf-legal{
  font:400 12px/1.6 Inter,system-ui,sans-serif;color:var(--mut);max-width:52ch;
}
.cf-legal a{color:var(--steelL);text-decoration:none;border-bottom:1px solid rgba(108,166,207,.3);}

/* === SOUS-PARTIES (lignes-process) dans le panneau détail === */
.brique-body{
  padding:26px clamp(20px,3vw,38px) 32px;
  border-top:1px solid #16202b;
}
.brique-intro{
  margin:0 0 22px;max-width:62ch;
  font:400 16px/1.6 'Inter',system-ui,sans-serif;
  color:#aebfce;
}
.brique-intro b{color:#dbe6f0;font-weight:600;}
.process-rail{
  display:flex;flex-direction:column;gap:0;
  position:relative;padding-left:28px;
}
/* trait vertical du rail */
.process-rail::before{
  content:"";position:absolute;left:3px;top:8px;bottom:8px;
  width:1px;background:var(--steel);opacity:.4;
}
.process-step{
  position:relative;padding:16px 0;
  display:block;
  border-bottom:1px solid rgba(22,32,43,.65);
}
.process-step:last-of-type{border-bottom:none;}
/* pastille rail */
.process-step::before{
  content:"";position:absolute;
  left:-25px;top:23px;
  width:7px;height:7px;border-radius:50%;
  background:var(--steel);
  transition:background .25s,box-shadow .25s;
}
/* cascade allumage quand le panneau devient actif */
.mpanel.active .process-step:nth-child(1)::before{animation:railOn .3s ease-out 0ms both;}
.mpanel.active .process-step:nth-child(2)::before{animation:railOn .3s ease-out 100ms both;}
.mpanel.active .process-step:nth-child(3)::before{animation:railOn .3s ease-out 200ms both;}
.mpanel.active .process-step:nth-child(4)::before{animation:railOn .3s ease-out 300ms both;}
.mpanel.active .process-step:nth-child(5)::before{animation:railOn .3s ease-out 400ms both;}
@keyframes railOn{
  0%{background:var(--steel);box-shadow:none;}
  100%{background:var(--steelL);box-shadow:0 0 10px rgba(108,166,207,.5);}
}
@media(prefers-reduced-motion:reduce){
  .mpanel.active .process-step::before{animation:none;background:var(--steelL);}
}

.process-label{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  font-weight:600;font-size:17px;
  color:#dbe6f0;
  display:block;letter-spacing:-.01em;
}
.process-desc{
  display:block;margin-top:6px;
  font:400 14px/1.55 'Inter',system-ui,sans-serif;
  color:var(--mut);max-width:58ch;
}
/* preuve réelle sous chaque sous-brique : référence client / fait vérifiable */
.process-proof{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:10px;padding:3px 10px 3px 0;
  font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.04em;color:#8fb4d4;
}
.process-proof::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--steelL);box-shadow:0 0 7px rgba(108,166,207,.55);
}
.process-proof b{color:#cfe0ee;font-weight:600;}

/* livrable concret en bas de chaque brique (ce que le client obtient) */
.brique-livrable{
  margin-top:28px;padding:16px 20px;
  border:1px solid #1b2733;border-radius:11px;
  background:linear-gradient(135deg,rgba(13,23,34,.55),rgba(7,11,16,.35));
  display:flex;gap:8px 16px;align-items:baseline;flex-wrap:wrap;
}
.brique-livrable .liv-k{
  font:600 11px/1.3 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steelL);
  white-space:nowrap;
}
.brique-livrable .liv-v{
  font:400 15px/1.55 'Inter',system-ui,sans-serif;
  color:#cdd8e2;flex:1;min-width:240px;
}

/* === RESPONSIVE MÉTHODE === */
@media(max-width:980px){
  .method-steps{grid-template-columns:repeat(2,1fr);}
  .method-steps::before{display:none;}
}
@media(max-width:560px){
  .method-steps{grid-template-columns:1fr;gap:12px;}
  .mstep-viz{height:118px;}
  .briques-header .sec-title{font-size:clamp(40px,14vw,64px);}
  .brique-body{padding:20px 18px 26px;}
  .cvz-body{grid-template-columns:1fr;}
}

/* ===== SECTION D : PREUVE VIVANTE ===== */
#preuve{
  background:var(--ink);
  padding:0 0 80px;
  position:relative;
}
.section-label{
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--steelL);
}
.section-title{
  font:700 clamp(28px,4vw,52px)/1.1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);margin-top:14px;
}
.section-body{
  max-width:1200px;margin:0 auto;
  padding:0 clamp(22px,5vw,64px);
}

/* D1 : LE CERVEAU */
#d1-cerveau{
  position:relative;min-height:92vh;
  display:grid;align-items:stretch;
}
#brain-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.brain-overlay{
  position:relative;z-index:2;
  display:flex;align-items:center;
  padding:clamp(22px,5vw,64px);
  pointer-events:none;
}
.brain-card{
  width:min(420px,90vw);
  background:rgba(7,11,16,.60);
  backdrop-filter:blur(8px);
  border:1px solid var(--line2,#1b2733);
  border-radius:4px;
  padding:36px 32px;
  pointer-events:auto;
  position:relative;
}
/* equerres craie */
.brain-card::before,.brain-card::after{
  content:'';position:absolute;width:12px;height:12px;
  border-color:var(--steelL);border-style:solid;opacity:.6;
}
.brain-card::before{top:-1px;left:-1px;border-width:1px 0 0 1px;}
.brain-card::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}
.brain-points{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.brain-points li{
  font:500 12px/1.5 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mut);letter-spacing:.04em;
}
.brain-points li::before{content:'·  ';color:var(--steelL);}
@media(max-width:760px){
  #d1-cerveau{min-height:unset;}
  #brain-canvas{position:static;min-height:64vh;width:100%;display:block;}
  #d1-cerveau{display:flex;flex-direction:column;}
  .brain-overlay{padding:22px;}
  .brain-card{width:100%;}
}

/* cadre moniteur (D2, E.3) */
.monitor-frame{
  position:relative;
  border:1px solid var(--line2,#1b2733);
  border-radius:4px;
  overflow:hidden;
}
.monitor-frame::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(108,166,207,.5),transparent);
  z-index:2;
}
.monitor-frame::after{
  content:'';
  position:absolute;inset:0;
  box-shadow:inset 0 0 100px -40px #000;
  pointer-events:none;z-index:1;
}
.monitor-inner{
  position:relative;
  aspect-ratio:16/10;
  background:var(--ink-deep,#05080c);
  display:flex;align-items:center;justify-content:center;
}
.ph-block{
  font:12px/1.5 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mut);letter-spacing:.06em;
  border:1px dashed var(--line2,#1b2733);
  border-radius:4px;padding:16px 20px;
  text-align:center;
}

/* D2 : COCKPIT */
#d2-cockpit{
  background:var(--ink);
  padding:80px clamp(22px,5vw,64px);
}
.cockpit-inner{max-width:1200px;margin:0 auto;}
.cockpit-main{margin-top:40px;}
/* 18/07 : mention de demonstration, discrete mais lisible (Sol Q1 #2) */
.cockpit-demo-note{
  margin-top:14px;font:400 12px/1.4 Inter,system-ui,sans-serif;
  color:rgba(196,200,204,.55);
}
html.light .cockpit-demo-note{color:#41566B;} /* a11y 22/07 (M1) : etait 3.09:1, verifie 6.62:1 */

/* cockpit codé (remplace l'ancien raster) : métal froid, panneaux crédibles */
.cockpit-screen{
  border:1px solid #1b2a3a;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0a121b 0%,#070d14 100%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(108,166,207,.08);
}
.ck-bar{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid #16222f;background:rgba(61,104,138,.07);
}
.ck-dot{width:8px;height:8px;border-radius:50%;background:var(--steelL);box-shadow:0 0 10px var(--steelL);animation:ckpulse 2.4s ease-in-out infinite;}
@keyframes ckpulse{0%,100%{opacity:1}50%{opacity:.4}}
.ck-bar-title{font:600 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;color:var(--silver);}
.ck-bar-live{margin-left:auto;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steelL);}
.ck-panel{background:#070d14;padding:20px 22px;}
.ck-h{font:600 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;}
.ck-cost-num{font:700 38px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:-.02em;}
.ck-cost-u{font-size:15px;color:var(--mut);margin-left:5px;letter-spacing:0;}
.ck-val{display:flex;align-items:baseline;}
/* ================================================================
   V9 03/09 · COCKPIT « quatre métiers » (VISUAL_SPEC_V9_VARIANTES §5, cockpit 2)
   Sélecteur en input[type=radio] + label : ZÉRO JavaScript, donc CSP-safe et
   fonctionnel sans JS. Toutes les classes neuves sont préfixées ck2- ET scopées
   sous #d2-cockpit. Les seules .ck-* reprises telles quelles sont celles qui restent
   vivantes : .ck-bar, .ck-bar-title, .ck-bar-live, .ck-dot, .ck-panel, .ck-h, .ck-val,
   .ck-cost-num, .ck-cost-u, .cockpit-screen. Tout le reste de l'ancien écran (tuiles,
   pipeline, coût, courbe 30 jours, callouts) a été retiré du CSS avec son DOM.
   PIÈGE PAYÉ : --line, --line2, --panel, --key, --paper2 ne sont définis QUE dans
   html.light. En thème sombre var(--line2) SANS repli est une valeur invalide et
   la déclaration entière tombe. D'où ces variables locales, définies pour les deux
   thèmes, plutôt que des var() nues recopiées de la planche de variantes.
   ================================================================ */
#d2-cockpit{--ck2-panel:#070d14;--ck2-line:#16222f;--ck2-key:#57d6ee;--ck2-keytx:#57d6ee;--ck2-on:#0a121b;}
html.light #d2-cockpit{--ck2-panel:#FFFFFF;--ck2-line:#C6D3DF;--ck2-key:#0E9DC4;--ck2-keytx:#0B7C9E;--ck2-on:#FFFFFF;}

.cockpit-sub{margin-top:16px;max-width:64ch;font:400 15px/1.65 Inter,system-ui,sans-serif;color:rgba(196,200,204,.82);}
html.light .cockpit-sub{color:#41566B;}

/* sélecteur de métier */
#d2-cockpit .ck2-r{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
#d2-cockpit .ck2-sw{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px 0;}
#d2-cockpit .ck2-sw label{
  cursor:pointer;font:600 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);border:1px solid var(--ck2-line);border-radius:999px;
  padding:9px 14px;transition:color .2s,border-color .2s,background .2s;
}
#d2-cockpit .ck2-sw label:hover{color:var(--silverHi);border-color:var(--steelL);}
#ck2-mc:checked ~ .ck2-sw label[for="ck2-mc"],#ck2-mr:checked ~ .ck2-sw label[for="ck2-mr"],
#ck2-mf:checked ~ .ck2-sw label[for="ck2-mf"],#ck2-ma:checked ~ .ck2-sw label[for="ck2-ma"]{
  color:var(--ck2-on);background:var(--steelL);border-color:var(--steelL);}
/* la case est masquée : le focus clavier doit se voir sur son étiquette */
#ck2-mc:focus-visible ~ .ck2-sw label[for="ck2-mc"],#ck2-mr:focus-visible ~ .ck2-sw label[for="ck2-mr"],
#ck2-mf:focus-visible ~ .ck2-sw label[for="ck2-mf"],#ck2-ma:focus-visible ~ .ck2-sw label[for="ck2-ma"]{
  outline:2px solid var(--steelL);outline-offset:3px;}
#d2-cockpit .ck2-txt,#d2-cockpit .ck2-lab,#d2-cockpit .ck2-viz{display:none;}
/* 03/09 V9.1 : quatre metiers, quatre jeux de mesures. Les visuels sont dupliques en
   groupes .ck2-viz[data-m] commutes par les memes radios, en CSS pur (zero JS ajoute) ;
   les valeurs scalaires (jauge, hauteur du seuil, position du repere) passent par des
   variables posees sur .ck2. Defauts = jeu Commercial, donc rendu correct sans JS. */
#d2-cockpit .ck2{--ck2-g:94;--ck2-thr-top:39.6%;--ck2-mid:38%;}
#ck2-mr:checked ~ .ck2{--ck2-g:88;--ck2-thr-top:60.4%;--ck2-mid:38%;}
#ck2-mf:checked ~ .ck2{--ck2-g:97;--ck2-thr-top:54.5%;--ck2-mid:84%;}
#ck2-ma:checked ~ .ck2{--ck2-g:91;--ck2-thr-top:51.6%;--ck2-mid:44%;}
#ck2-mc:checked ~ .ck2 .ck2-txt[data-m="c"],#ck2-mr:checked ~ .ck2 .ck2-txt[data-m="r"],
#ck2-mf:checked ~ .ck2 .ck2-txt[data-m="f"],#ck2-ma:checked ~ .ck2 .ck2-txt[data-m="a"]{display:block;}
#ck2-mc:checked ~ .ck2 .ck2-lab[data-m="c"],#ck2-mr:checked ~ .ck2 .ck2-lab[data-m="r"],
#ck2-mf:checked ~ .ck2 .ck2-lab[data-m="f"],#ck2-ma:checked ~ .ck2 .ck2-lab[data-m="a"]{display:inline;}
#ck2-mc:checked ~ .ck2 .ck2-viz[data-m="c"],#ck2-mr:checked ~ .ck2 .ck2-viz[data-m="r"],
#ck2-mf:checked ~ .ck2 .ck2-viz[data-m="f"],#ck2-ma:checked ~ .ck2 .ck2-viz[data-m="a"]{display:block;}
#d2-cockpit .ck2-lead{padding:12px 22px 16px;font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;color:var(--mut);letter-spacing:.06em;}
#d2-cockpit .ck2-full{border-top:1px solid var(--ck2-line);}
#d2-cockpit .ck2-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ck2-line);border-top:1px solid var(--ck2-line);}

/* graphiques */
#d2-cockpit .ck2-fig{position:relative;margin-top:12px;}
#d2-cockpit .ck2-fig svg{display:block;width:100%;height:120px;overflow:visible;}
#d2-cockpit .ck2-fig--sm svg{height:104px;}
#d2-cockpit .ck2-area{fill:var(--steelL);fill-opacity:.10;stroke:none;}
#d2-cockpit .ck2-thr{stroke:var(--steel);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;}
#d2-cockpit .ck2-mark{stroke:var(--ck2-key);stroke-width:1.5;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;}
#d2-cockpit .ck2-thr-lab{
  position:absolute;left:0;top:var(--ck2-thr-top,39.6%);transform:translateY(-100%);padding:0 8px 4px 0;background:var(--ck2-panel);
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;color:var(--mut);}
/* 3000 et non pathLength : non-scaling-stroke calcule le motif en espace ÉCRAN.
   pathLength + non-scaling-stroke produit des pointillés (piège #877, déjà payé ici). */
#d2-cockpit .ck2-path{fill:none;stroke:var(--steelL);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
html.js-io #d2-cockpit .ck2-path{stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 900ms cubic-bezier(.22,1,.36,1);}
html.js-io #d2-cockpit .fx-reveal.visible .ck2-path{stroke-dashoffset:0;}
#d2-cockpit .ck2-bar{fill:var(--steel);opacity:.55;}
#d2-cockpit .ck2-bar--hi{fill:var(--steelL);opacity:1;}
html.js-io #d2-cockpit .ck2-bar{transform:scaleY(.02);transform-origin:bottom;transform-box:fill-box;}
html.js-io #d2-cockpit .fx-reveal.visible .ck2-bar{transform:scaleY(1);transition:transform 620ms cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 22ms);}
#d2-cockpit .ck2-axis{position:relative;display:flex;justify-content:space-between;margin-top:8px;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--mut);letter-spacing:.08em;}
#d2-cockpit .ck2-axis .mid{position:absolute;left:var(--ck2-mid,38%);transform:translateX(-50%);}
#d2-cockpit .ck2-gauge-wrap{display:flex;align-items:center;gap:18px;margin-top:10px;}
#d2-cockpit .ck2-gauge svg{width:150px;height:88px;overflow:visible;}
#d2-cockpit .ck2-gbg{fill:none;stroke:#1b2a3a;stroke-width:9;stroke-linecap:round;}
html.light #d2-cockpit .ck2-gbg{stroke:#DCE5EE;}
/* Jauge : etat par defaut = 94 %, PLEINE. C'est le JS qui la vide puis la remplit
   (regle sous html.js-io). Avec stroke-dasharray:0 100 en base, un visiteur sans
   JavaScript voyait une jauge vide a cote du chiffre 94 % : meme faute que opacity:0
   en CSS statique (post-mortem Enumalon 23/03). */
#d2-cockpit .ck2-gfg{fill:none;stroke:var(--steelL);stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--ck2-g,94) 100;}
html.js-io #d2-cockpit .ck2-gfg{stroke-dasharray:0 100;transition:stroke-dasharray 1s cubic-bezier(.22,1,.36,1) .2s;}
html.js-io #d2-cockpit .fx-reveal.visible .ck2-gfg{stroke-dasharray:var(--ck2-g,94) 100;}
#d2-cockpit .ck2-gnum{font:700 30px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:-.02em;}
#d2-cockpit .ck2-gsub{font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;color:var(--mut);margin-top:6px;}

/* lecture IA : un fait chiffré, puis une action */
#d2-cockpit .ck2-lec{
  position:relative;margin-top:14px;border:1px solid var(--ck2-line);border-left:2px solid var(--ck2-key);
  border-radius:10px;padding:13px 16px 14px;background:rgba(87,214,238,.04);}
html.light #d2-cockpit .ck2-lec{background:rgba(14,157,196,.045);}
#d2-cockpit .ck2-lec::before{content:'';position:absolute;top:-6px;left:26px;width:10px;height:10px;transform:rotate(45deg);
  background:var(--ck2-panel);border-left:1px solid var(--ck2-line);border-top:1px solid var(--ck2-line);}
#d2-cockpit .ck2-tag{display:inline-flex;align-items:center;gap:7px;font:600 9.5px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ck2-keytx);}
#d2-cockpit .ck2-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ck2-key);}
#d2-cockpit .ck2-lec p{margin-top:8px;font:400 14px/1.55 Inter,system-ui,sans-serif;color:var(--silver);}
#d2-cockpit .ck2-act{color:var(--silverHi);font-weight:600;margin-top:6px;}
#d2-cockpit .ck2-act span:first-child{color:var(--ck2-keytx);font-weight:600;}

@media(max-width:900px){
  #d2-cockpit .ck2-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  #d2-cockpit .ck-panel{padding:16px 16px;}
  #d2-cockpit .ck2-sw,#d2-cockpit .ck2-lead{padding-left:16px;padding-right:16px;}
  #d2-cockpit .ck2-gauge svg{width:124px;height:74px;}
  /* a 390 px l'etiquette de seuil couvrait 42 % de la largeur de la courbe : elle
     repasse dans le flux, au-dessus de la figure, plutot que par-dessus le trace. */
  #d2-cockpit .ck2-thr-lab{position:static;transform:none;background:none;display:block;padding:0 0 6px;}
  #d2-cockpit .ck2-gauge-wrap{gap:12px;}
}
@media(prefers-reduced-motion:reduce){
  /* état final complet, sans mouvement : courbe tracée, barres à leur taille, jauge à 94 % */
  html.js-io #d2-cockpit .ck2-path{stroke-dashoffset:0!important;transition:none!important;}
  html.js-io #d2-cockpit .ck2-bar{transform:none!important;transition:none!important;}
  html.js-io #d2-cockpit .ck2-gfg{stroke-dasharray:var(--ck2-g,94) 100!important;transition:none!important;}
}


@media (prefers-reduced-motion:reduce){.ck-dot{animation:none;}}

/* D3 : AL */
#d3-al{
  padding:80px clamp(22px,5vw,64px);
  background:var(--ink-deep,#05080c);
}
.al-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.al-eye-wrap{display:flex;justify-content:center;align-items:center;position:relative;padding:40px;}
.al-eye{
  width:clamp(120px,18vw,220px);height:clamp(120px,18vw,220px);
  border-radius:50%;
  background:radial-gradient(circle,var(--steelL) 0%,#0a3a5a 40%,var(--ink-deep,#05080c) 100%);
  position:relative;
  border:1px solid var(--line2,#1b2733);
  box-shadow:0 0 0 8px rgba(61,104,138,.12),0 0 0 24px rgba(61,104,138,.06);
  animation:al-pulse 3.2s ease-in-out infinite;
}
.al-eye::before{
  content:'';position:absolute;
  width:22%;height:22%;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  top:20%;left:62%;
  filter:blur(3px);
}
.al-halo{
  position:absolute;inset:-30%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(61,104,138,.14) 0%,transparent 70%);
  filter:blur(18px);
  animation:al-halo-pulse 3.2s ease-in-out infinite reverse;
}
@keyframes al-pulse{0%,100%{opacity:.72}50%{opacity:1;}}
@keyframes al-halo-pulse{0%,100%{opacity:.5}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .al-eye,.al-halo{animation:none;opacity:1;}
}
.al-dialog{margin-top:20px;}
.al-line{
  font:400 13px/1.5 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mut);padding:6px 0;
}
.al-line.from-al{color:var(--steelL);}
.al-line.from-al::before{content:'> AL  ';opacity:.7;}
@media(max-width:760px){
  .al-inner{grid-template-columns:1fr;gap:32px;}
  /* responsive 02/09 : en grille 1 colonne le wrap s'étirait sur toute la largeur et
     le halo (inset:-30%) débordait de 61-89 px hors viewport (320-414 px) */
  .al-eye-wrap{padding:20px;width:fit-content;margin:0 auto;}
}
/* responsive 02/09 : cibles tactiles >= 40 px sans changer le rendu (padding compensé) */
.p-link,.pcard-domain{padding:15px 0;margin:-15px 0;}

/* D4 : FORMATION (cartes série Blueprint, cohérentes avec .mstep) */
.chapitre{text-decoration:none;color:inherit;display:block;cursor:pointer;transition:transform .25s ease,border-color .25s ease;}
.chapitre:hover{transform:translateY(-3px);}
#d4-formation{
  background:var(--ink);
  padding:80px clamp(22px,5vw,64px);
}
.formation-inner{max-width:900px;margin:0 auto;}
.formation-note{
  margin-top:14px;max-width:54ch;
  font:400 15px/1.6 Inter,system-ui,sans-serif;color:rgba(196,200,204,.72);
}
.chapitre-rail{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;
}
.chapitre{
  border:1px solid #16202b;border-radius:16px;
  padding:22px 22px 24px;position:relative;
  background:linear-gradient(180deg,rgba(13,23,34,.5),rgba(7,11,16,.32));
  transition:border-color .24s ease,transform .5s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;gap:8px;
}
.chapitre:hover{border-color:rgba(108,166,207,.4);transform:translateY(-3px);}
.chapitre-viz{height:52px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:2px;}
.chapitre-viz svg{height:48px;width:auto;overflow:visible;}
.chapitre-num{
  font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.22em;color:var(--steelL);
}
.chapitre-name{
  font:600 18px/1.25 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);letter-spacing:-.01em;
}
.chapitre-sub{
  font:400 13.5px/1.55 Inter,system-ui,sans-serif;color:var(--mut);margin:0;
}
/* pictos Blueprint : draw-on quand le rail entre en vue (hors .mstep) */
.chapitre-rail .bp-key{filter:drop-shadow(0 0 4px rgba(87,214,238,.6));}
html.js-io .chapitre-rail .bp-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 820ms cubic-bezier(.22,1,.36,1);}
html.js-io .chapitre-rail.visible .bp-draw{stroke-dashoffset:0;transition-delay:calc(var(--d,0) * 110ms);}
html.js-io .chapitre-rail .bp-node,html.js-io .chapitre-rail .bp-key{opacity:0;transition:opacity 480ms ease .5s;}
html.js-io .chapitre-rail.visible .bp-node,html.js-io .chapitre-rail.visible .bp-key{opacity:1;}
/* accent cyan en dernier (hold) + micro-respiration : même langage que .mstep, en plus petit */
html.js-io .chapitre-rail.visible .bp-key{transition:opacity 420ms cubic-bezier(0.16,1,0.3,1) .85s;animation:ucMiniBreathe 8s cubic-bezier(0.42,0,0.58,1) 1.5s infinite;}
@keyframes ucMiniBreathe{0%,100%{opacity:1;}50%{opacity:.6;}}
@media(prefers-reduced-motion:reduce){
  html.js-io .chapitre-rail .bp-draw{stroke-dashoffset:0!important;transition:none!important;}
  html.js-io .chapitre-rail .bp-node,html.js-io .chapitre-rail .bp-key{opacity:1!important;transition:none!important;animation:none!important;}
  .chapitre:hover{transform:none;}
}
@media(max-width:640px){.chapitre-rail{grid-template-columns:1fr;}}

/* ===== SECTION E : SERVICES ===== */
.services-section{
  background:var(--ink);
  padding:0 0 80px;
  position:relative;
}
/* E.1 CTO/CPO */
.svc-block{
  padding:64px clamp(22px,5vw,64px);
}
.svc-block.panel{background:var(--panel,#0a121c);}
.svc-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;}
.svc-num{font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.22em;color:var(--steelL);}
.svc-title{font:700 clamp(26px,3.5vw,48px)/1.1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);margin-top:10px;}
.svc-def{font:400 16px/1.65 Inter,system-ui,sans-serif;color:var(--silver);margin-top:14px;max-width:52ch;}
.svc-strong{font:500 15px/1.5 Inter,system-ui,sans-serif;color:var(--silverHi);margin-top:10px;}
/* micro jointure CTO/CPO */
.cto-join{display:flex;align-items:center;gap:18px;flex-shrink:0;}
@media(max-width:480px){
  .cto-join{flex-wrap:wrap;justify-content:center;gap:10px;flex-shrink:1;max-width:100%;}
  .cto-join .node-link{width:22px;}
}
.node-chip{
  font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--steelL);
  border:1px solid var(--steelL);border-radius:999px;padding:8px 14px;
}
.node-link{
  width:48px;height:2px;
  background:linear-gradient(90deg,var(--steel),var(--steelL));
  position:relative;
  animation:link-pulse 2s ease-in-out infinite;
}
@keyframes link-pulse{0%,100%{opacity:.5}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.node-link{animation:none;opacity:.7;}}
/* ===== SCÈNES SERVICES · 01 CTO/CPO + 02 CDO/CAIO (série Blueprint, grammaire .mstep/.loop) ===== */
.cto-scene{flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.cto-scene svg{width:300px;max-width:100%;height:auto;overflow:visible;display:block;}
.cdo-scene{margin:26px 0;display:flex;align-items:center;justify-content:flex-start;}
.cdo-scene svg{width:100%;max-width:440px;height:auto;overflow:visible;display:block;}
.cto-lbl{fill:var(--steelL);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.1em;}
.cto-conv,.cdo-ingest{fill:var(--steelL);}
.cto-scene .bp-key,.cdo-scene .bp-key{filter:drop-shadow(0 0 5px rgba(87,214,238,.65));}
/* transform-box explicites (piège WebKit) */
.cto-conv,.cto-cadence,.cto-hub,.cdo-ingest,.cdo-value{transform-box:fill-box;transform-origin:center;will-change:transform;}
/* draw-on au reveal (fx-reveal → .visible) */
html.js-io .cto-scene .bp-draw,html.js-io .cdo-scene .bp-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 820ms cubic-bezier(.22,1,.36,1);}
html.js-io .cto-scene.visible .bp-draw,html.js-io .cdo-scene.visible .bp-draw{stroke-dashoffset:0;transition-delay:calc(var(--d,0)*90ms);}
html.js-io .cto-scene .bp-node,html.js-io .cto-scene .bp-key,
html.js-io .cdo-scene .bp-node,html.js-io .cdo-scene .bp-key{opacity:0;transition:opacity 500ms ease .55s;}
html.js-io .cto-scene.visible .bp-node,html.js-io .cdo-scene.visible .bp-node{opacity:1;}
/* l'accent cyan arrive EN DERNIER (hold ~1s) */
html.js-io .cto-scene.visible .bp-key,html.js-io .cdo-scene.visible .bp-key{opacity:1;transition:opacity 460ms cubic-bezier(0.16,1,0.3,1) 1s;}
/* idle masqué tant que la scène n'est pas révélée */
html.js-io .cto-conv,html.js-io .cto-cadence,html.js-io .cdo-ingest{opacity:0;}
/* Scène 01 · convergence → arbitrage → cadence */
html.js-io .cto-scene.visible .cto-conv{animation:ctoConv 7s cubic-bezier(0.42,0,0.58,1) 1.1s infinite both;}
@keyframes ctoConv{0%{transform:translate(0,0);opacity:0;}7%{opacity:1;}52%{transform:translate(var(--cx),var(--cy));opacity:1;}64%{transform:translate(var(--cx),var(--cy));opacity:0;}100%{transform:translate(var(--cx),var(--cy));opacity:0;}}
html.js-io .cto-scene.visible .cto-hub{animation:ctoHub 7s cubic-bezier(0.42,0,0.58,1) 1.1s infinite;}
@keyframes ctoHub{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
html.js-io .cto-scene.visible .cto-cadence{animation:ctoCadence 7s cubic-bezier(0.42,0,0.58,1) 1.1s infinite both;}
@keyframes ctoCadence{0%{transform:translateX(0);opacity:0;}9%{transform:translateX(-4px);opacity:1;}60%{transform:translateX(46px);opacity:1;}72%{transform:translateX(52px);}82%{transform:translateX(48px);opacity:1;}100%{transform:translateX(48px);opacity:0;}}
/* Scène 02 · piste A · entonnoir → base ordonnée → tableau de bord (ROI cyan).
   Une SEULE horloge (8s, delai 1.1s) : flux + barres + pic partent/arrivent ensemble,
   le cyan (pic + tendance) arrive EN DERNIER, boucle propre avec pause (hold 58→88%). */
.cdoa-flux{fill:var(--steelL);transform-box:fill-box;transform-origin:center;will-change:transform;}
.cdoa-bar{fill:var(--steel);transform-box:fill-box;transform-origin:bottom;will-change:transform;}
.cdoa-peak{fill:#57d6ee;transform-box:fill-box;transform-origin:bottom;will-change:transform,opacity;}
.cdoa-roi{stroke:#57d6ee;will-change:opacity;}
.cdo-scene .cdoa-peak,.cdo-scene .cdoa-roi{filter:drop-shadow(0 0 5px rgba(87,214,238,.6));}
html.light .cdoa-flux{fill:var(--steelL);} html.light .cdoa-bar{fill:var(--steel);}
html.light .cdoa-peak{fill:#0E9DC4;} html.light .cdoa-roi{stroke:#0E9DC4;}
/* a11y 22/07 (C1/M2) : libelles texte de la scene CDO sortis en classe (suivent dark/light
   automatiquement) au lieu d'un fill hex fige · l'ancien #79C7E6/#5E7186 etait illisible
   sur le papier clair (C1 1.65:1, M2 4.38:1). Accent : valeur PAR THEME (DA R1 22/07 :
   var(--steel) seul eteignait le ROI en dark, 10.45:1 -> 3.33:1). */
.cdoa-label-accent{fill:#79C7E6;}
html.light .cdoa-label-accent{fill:#33597A;}
.cdoa-label-mut{fill:var(--mut);}
html.js-io .cdoa-flux,html.js-io .cdoa-bar,html.js-io .cdoa-peak,html.js-io .cdoa-roi{opacity:0;}
html.js-io .cdo-scene.visible .cdoa-flux{animation:cdoaFlux 8s cubic-bezier(0.42,0,0.58,1) 1.1s infinite both;}
@keyframes cdoaFlux{0%{transform:translateX(-14px);opacity:0;}6%{opacity:1;}40%{transform:translateX(20px);opacity:1;}48%{transform:translateX(24px);opacity:0;}100%{transform:translateX(24px);opacity:0;}}
html.js-io .cdo-scene.visible .cdoa-bar{animation:cdoaBar 8s cubic-bezier(0.42,0,0.58,1) 1.1s infinite both;}
@keyframes cdoaBar{0%{transform:scaleY(.16);opacity:.5;}10%{opacity:1;}44%{transform:scaleY(1);opacity:1;}88%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(.16);opacity:.5;}}
html.js-io .cdo-scene.visible .cdoa-peak{animation:cdoaPeak 8s cubic-bezier(0.16,1,0.3,1) 1.1s infinite both;}
@keyframes cdoaPeak{0%,44%{transform:scaleY(.14);opacity:0;}58%{transform:scaleY(1);opacity:1;}88%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(.14);opacity:0;}}
html.js-io .cdo-scene.visible .cdoa-roi{animation:cdoaRoi 8s cubic-bezier(0.16,1,0.3,1) 1.1s infinite both;}
@keyframes cdoaRoi{0%,46%{opacity:0;}58%{opacity:1;}88%{opacity:1;}100%{opacity:0;}}
@media(max-width:760px){
  .cto-scene{margin-top:8px;}
  .cto-scene svg{width:280px;}
}
@media(max-width:520px){.cdo-scene svg{max-width:360px;}}
@media(prefers-reduced-motion:reduce){
  html.js-io .cto-scene .bp-draw,html.js-io .cdo-scene .bp-draw{stroke-dashoffset:0!important;transition:none!important;}
  html.js-io .cto-scene .bp-node,html.js-io .cto-scene .bp-key,
  html.js-io .cdo-scene .bp-node,html.js-io .cdo-scene .bp-key{opacity:1!important;transition:none!important;}
  .cto-conv,.cto-cadence,.cto-hub,.cdoa-flux,.cdoa-bar,.cdoa-peak,.cdoa-roi{animation:none!important;transform:none!important;}
  html.js-io .cto-conv,html.js-io .cto-cadence,html.js-io .cdoa-flux,html.js-io .cdoa-bar,html.js-io .cdoa-peak,html.js-io .cdoa-roi{opacity:1!important;}
}
/* Yavantha */
.yavantha-rail{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;
}
.yav-item{
  font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.08em;color:var(--mut);
  border:1px solid var(--line2,#1b2733);border-radius:2px;padding:8px 12px;
  transition:border-color .2s,color .2s;
}
.yav-item:hover{border-color:var(--steelL);color:var(--silverHi);}
.yav-pending{font-size:10px;color:var(--mut);opacity:.7;}
/* Attribution « par X » sous les titres services (gabarit unifié 01/02/03) */
.svc-by{
  display:block;margin-top:10px;
  font:700 14px/1.35 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steelL);
}
.svc-by small{
  display:block;margin-top:5px;
  font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.1em;color:var(--mut);text-transform:none;
}
/* CDO/CAIO · rail des 7 thèmes : dépliable natif <details> (zéro JS, zéro CDN, WebKit-safe) */
.cdo-rail{margin-top:30px;border-top:1px solid #16202b;grid-column:1/-1;}
.cdo-theme{border-bottom:1px solid #16202b;}
.cdo-sum{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:34px 1fr 16px;
  align-items:baseline;gap:6px 16px;
  padding:18px 2px;transition:opacity .2s ease;
}
.cdo-sum::-webkit-details-marker{display:none;}
.cdo-sum:hover .cdo-title{color:#fff;}
.cdo-sum:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;border-radius:8px;}
.cdo-num{
  font:700 12px/1.5 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.14em;color:var(--steelL);
}
.cdo-head{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cdo-title{
  font:600 17px/1.28 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:#dbe6f0;letter-spacing:-.01em;transition:color .2s ease;
}
.cdo-promise{font:400 14px/1.5 Inter,system-ui,sans-serif;color:var(--mut);max-width:60ch;}
.cdo-chev{
  align-self:center;justify-self:end;flex:none;
  width:8px;height:8px;margin-top:-2px;
  border-right:1.5px solid var(--steelL);border-bottom:1.5px solid var(--steelL);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.cdo-theme[open] .cdo-chev{transform:rotate(-135deg);}
.cdo-proof{display:block;margin-top:10px;font:500 12px/1.5 'JetBrains Mono',ui-monospace,monospace;color:#8fb4d4;}
.cdo-proof b{color:#cfe0ee;font-weight:600;}
.cdo-detail{padding:0 16px 22px 50px;animation:cdoIn .34s cubic-bezier(.22,.61,.36,1);}
.cdo-detail p{
  font:400 14.5px/1.7 Inter,system-ui,sans-serif;
  color:rgba(196,200,204,.82);max-width:68ch;
}
@keyframes cdoIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media(max-width:560px){
  .cdo-sum{grid-template-columns:26px 1fr 14px;gap:5px 12px;padding:16px 2px;}
  .cdo-detail{padding:0 4px 20px 38px;}
  .cdo-title{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){.cdo-detail{animation:none;}.cdo-chev{transition:none;}}
/* Swapli */
.swapli-wordmark{
  font:700 22px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);letter-spacing:.04em;
}
.swapli-ph{
  font:500 11px/1.5 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mut);border:1px dashed var(--line2,#1b2733);
  border-radius:4px;padding:10px 14px;margin-top:8px;display:inline-block;
}
.link-pending{
  font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.08em;color:var(--mut);
  border:1px solid var(--line2,#1b2733);border-radius:999px;
  padding:8px 14px;display:inline-flex;align-items:center;gap:8px;
  cursor:default;text-decoration:none;
  margin-top:16px;
}
.link-pending::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mut);display:block;}
@media(max-width:760px){
  .svc-inner{grid-template-columns:1fr;gap:28px;}
  .cto-join{justify-content:flex-start;}
}

/* ===== SECTION F : CTA + FOOTER ===== */
#contact{
  background:radial-gradient(120% 120% at 50% 30%,#0c1620 0%,var(--ink-deep,#05080c) 70%);
  padding:100px clamp(22px,5vw,64px) 80px;
  text-align:center;
  position:relative;
}
#contact .briques-grain{pointer-events:none;}
.contact-ring{
  width:clamp(70px,10vw,110px);
  margin:0 auto 32px;
  position:relative;display:flex;justify-content:center;align-items:center;
}
.contact-ring img{width:100%;height:auto;display:block;opacity:.85;}
.contact-ring .core{
  position:absolute;inset:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(108,166,207,.18) 0%,transparent 68%);
  filter:blur(10px);
}
.contact-h2{
  font:800 clamp(36px,7vw,88px)/1.02 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);letter-spacing:-.03em;
}
.contact-sub{
  font:400 17px/1.6 Inter,system-ui,sans-serif;
  color:var(--mut);margin:18px auto 0;max-width:44ch;
}
.contact-ctas{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap;}
/* footer */
footer{
  background:var(--ink-deep,#05080c);
  border-top:1px solid var(--line,#16202b);
  padding:56px clamp(22px,5vw,64px) 32px;
}
.footer-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-brand img{width:26px;height:26px;}
.footer-brand span{font:700 15px/1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:.04em;}
.footer-tagline{font:400 13px/1.5 Inter,system-ui,sans-serif;color:var(--mut);}
.footer-col h3{
  font:700 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel);margin-bottom:16px;
}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a,.footer-social a{
  font:400 13px/1 Inter,system-ui,sans-serif;
  color:var(--mut);text-decoration:none;transition:color .18s;
}
.footer-col a:hover,.footer-social a:hover{color:var(--silverHi);}
.footer-social{display:flex;gap:16px;margin-top:10px;}
.footer-bar{
  max-width:1200px;margin:40px auto 0;
  padding-top:20px;border-top:1px solid var(--line,#16202b);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
}
.footer-bar span{font:400 11px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--mut);letter-spacing:.06em;}
@media(max-width:760px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-inner>:first-child{grid-column:1/-1;}
  .footer-bar{flex-direction:column;text-align:center;gap:4px;}
}
@media(max-width:480px){.footer-inner{grid-template-columns:1fr;}}

/* ===== SECTION · CAS D'USAGE D'AGENTS (série Blueprint continue, entre #portail et LA PREUVE) ===== */
.uc{position:relative;background:var(--ink);padding:96px clamp(22px,5vw,64px) 92px;}
.uc-inner{max-width:1220px;margin:0 auto;position:relative;z-index:1;}
.uc-head{text-align:center;max-width:62ch;margin:0 auto 44px;}
.uc-head .section-title{margin-top:14px;}
.uc-sub{margin:16px auto 0;max-width:54ch;font:400 clamp(15px,1.7vw,18px)/1.6 Inter,system-ui,sans-serif;color:rgba(196,200,204,.72);}

/* grille des 5 cartes + carte synthèse */
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.uc-card{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:20px 20px 22px;
  background:linear-gradient(180deg,rgba(13,23,34,.5),rgba(7,11,16,.32));
  border:1px solid #16202b;border-radius:16px;
  transition:border-color .26s ease,box-shadow .26s ease,background .26s ease,
             transform .42s cubic-bezier(.22,.61,.36,1);
}
/* 03/09 V9.1 : la vedette .uc-card.lead est supprimée (elle héritait en plus la typo
   globale .lead). Les six cartes sont identiques au repos ; l'accent passe entièrement
   dans le survol, le même pour les six, et sur :focus-within pour le clavier. */
.uc-card::after{content:'';position:absolute;left:18px;right:18px;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--steelL),transparent);opacity:0;transition:opacity .26s ease;}
.uc-card .uc-card-viz{opacity:.86;transition:opacity .26s ease;}
.uc-card:hover,.uc-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(108,166,207,.55);
  background:linear-gradient(180deg,rgba(17,32,46,.66),rgba(9,15,23,.46));
  box-shadow:0 26px 60px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(108,166,207,.16);
}
.uc-card:hover::after,.uc-card:focus-within::after{opacity:.7;}
.uc-card:hover .uc-card-viz,.uc-card:focus-within .uc-card-viz{opacity:1;}
@media(hover:none){.uc-card:hover{transform:none;box-shadow:none;}}
.uc-card-viz{height:92px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:2px;}
.uc-card-viz svg{height:92px;width:auto;max-width:100%;overflow:visible;}
.uc-card-kick{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--steelL);}
.uc-card-title{font:700 21px/1.1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;letter-spacing:-.01em;color:#eef3f8;}
.uc-actions{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.uc-actions li{position:relative;padding-left:16px;font:400 13.5px/1.5 Inter,system-ui,sans-serif;color:rgba(196,200,204,.82);}
.uc-actions li::before{content:"·";position:absolute;left:3px;top:-1px;color:var(--steelL);font-weight:700;}
.uc-with{margin-top:auto;padding-top:12px;font:500 11.5px/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;color:var(--mut);}
.uc-with a{color:#8fb4d4;text-decoration:none;border-bottom:1px solid rgba(108,166,207,.3);transition:color .2s,border-color .2s;}
.uc-with a:hover{color:var(--silverHi);border-color:var(--steelL);}

/* carte synthèse : pleine largeur, registre Monolithe */
.uc-synth{
  grid-column:1 / -1;margin-top:2px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center;
  padding:30px clamp(22px,3vw,42px);border:1px solid #1b2a3a;border-radius:18px;
  background:linear-gradient(140deg,#0a121c 0%,#11202e 46%,#0a121c 100%);
  box-shadow:0 30px 80px -46px rgba(0,0,0,.9),inset 0 1px 0 rgba(108,166,207,.08);
}
.uc-synth-kick{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--steelL);}
.uc-synth-title{font:700 clamp(24px,2.6vw,34px)/1.1 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;letter-spacing:-.02em;color:var(--silverHi);margin-top:12px;}
.uc-synth-p{font:400 15px/1.65 Inter,system-ui,sans-serif;color:rgba(196,200,204,.82);margin-top:14px;max-width:46ch;}
.uc-synth-p b{color:#dbe6f0;font-weight:600;}
.uc-synth-viz{display:flex;align-items:center;justify-content:center;}
.uc-synth-viz svg{width:100%;max-width:360px;height:auto;overflow:visible;display:block;}

/* bloc principes */
.uc-principles{margin-top:66px;}
.uc-principles-head{text-align:center;margin:0 auto 34px;max-width:60ch;}
.uc-princ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.uc-princ{
  border:1px solid #16202b;border-radius:16px;padding:24px 22px;
  background:linear-gradient(180deg,rgba(13,23,34,.5),rgba(7,11,16,.32));
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .24s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.uc-princ:hover{border-color:rgba(108,166,207,.34);transform:translateY(-3px);}
.uc-princ-q{font:600 18px/1.32 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;color:var(--silverHi);letter-spacing:-.01em;}
.uc-princ-q a{color:var(--steelL);text-decoration:none;border-bottom:1px solid rgba(108,166,207,.35);transition:color .2s;}
.uc-princ-q a:hover{color:var(--silverHi);}
.uc-princ-v{font:400 14px/1.62 Inter,system-ui,sans-serif;color:rgba(196,200,204,.78);}
.uc-princ-v b{color:#dbe6f0;font-weight:600;}

/* pont formation */
.uc-bridge-wrap{text-align:center;margin-top:52px;}
.uc-bridge{
  display:inline-flex;align-items:center;gap:12px;
  font:600 clamp(16px,1.8vw,20px)/1.35 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--silverHi);letter-spacing:-.01em;text-decoration:none;
  padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.uc-bridge .arw{color:var(--steelL);transition:transform .22s ease;}
.uc-bridge:hover{color:#fff;border-color:var(--steelL);}
.uc-bridge:hover .arw{transform:translateX(5px);}

/* accent cyan du registre Blueprint */
.uc .bp-key{filter:drop-shadow(0 0 5px rgba(87,214,238,.65));}
/* draw-on : révélé quand la grille (ou la synthèse) entre en vue : base/reduced-motion gérés par les règles Blueprint globales */
html.js-io .uc-grid.visible .bp-draw,html.js-io .uc-synth.visible .bp-draw{stroke-dashoffset:0;transition-delay:calc(var(--d,0) * 90ms);}
html.js-io .uc-grid.visible .bp-node,html.js-io .uc-grid.visible .bp-key,
html.js-io .uc-synth.visible .bp-node,html.js-io .uc-synth.visible .bp-key{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .uc-card:hover,.uc-princ:hover{transform:none;}
  .uc-bridge:hover .arw{transform:none;}
}

/* ===== SCÈNES USE CASES · langage motion (même grammaire que .mstep) ===== */
/* transform-box explicites partout (piège WebKit connu du projet) */
.uc-pulse{fill:#57d6ee;transform-box:fill-box;transform-origin:center;will-change:transform;filter:drop-shadow(0 0 4px rgba(87,214,238,.55));}
.uc-veto{stroke:#57d6ee;stroke-width:2.4;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 4px rgba(87,214,238,.55));}
.uc-sweep,.uc-clockhand{transform-box:view-box;will-change:transform;}
.uc-duo,.uc-breathe,.uc-wake,.uc-reject{transform-box:fill-box;transform-origin:center;will-change:transform;}
#ag-veille .uc-sweep{transform-origin:104px 66px;}
#ag-relance .uc-clockhand{transform-origin:214px 64px;}
/* l'accent cyan statique arrive EN DERNIER, après le tracé (hold ~1s) */
html.js-io .uc-grid.visible .bp-key{transition:opacity 460ms cubic-bezier(0.16,1,0.3,1) 1s;}
/* éléments idle : masqués tant que la grille n'est pas révélée (uniquement sous IntersectionObserver) */
html.js-io .uc-pulse,html.js-io .uc-sweep,html.js-io .uc-reject,
html.js-io .uc-veto,html.js-io .uc-clockhand{opacity:0;}

/* 1 · PARTENAIRE : l'agent prépare puis remet le travail (élan + overshoot) ; les deux avancent ensemble */
html.js-io .uc-grid.visible #ag-partenaire .uc-pulse{animation:ucHand 7s cubic-bezier(0.42,0,0.58,1) 1.15s infinite;}
html.js-io .uc-grid.visible #ag-partenaire .uc-duo{animation:ucAdvance 9s cubic-bezier(0.42,0,0.58,1) 1.2s infinite;}
@keyframes ucHand{0%{transform:translateX(6px);opacity:0;}8%{transform:translateX(6px);opacity:1;}15%{transform:translateX(3px);}70%{transform:translateX(-110px);opacity:1;}80%{transform:translateX(-116px);}88%{transform:translateX(-110px);opacity:1;}100%{transform:translateX(-110px);opacity:0;}}
@keyframes ucAdvance{0%,100%{transform:translateX(0);}50%{transform:translateX(1.4px);}}

/* 2 · MARQUE : le hub rayonne, une réponse part en direct */
html.js-io .uc-grid.visible #ag-marque .uc-breathe{animation:ucBreathe 8s cubic-bezier(0.42,0,0.58,1) 1.2s infinite;}
html.js-io .uc-grid.visible #ag-marque .uc-pulse{animation:ucRay 5.6s cubic-bezier(0.42,0,0.58,1) 1.25s infinite;}
@keyframes ucBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.02);}}
@keyframes ucRay{0%{transform:translate(0,0);opacity:0;}9%{transform:translate(0,0);opacity:1;}16%{transform:translate(-4px,0);}78%{transform:translate(92px,2px);opacity:1;}100%{transform:translate(100px,3px);opacity:0;}}

/* 3 · QUALIFICATION : une demande entre, est filtrée, rangée dans le bon bac */
html.js-io .uc-grid.visible #ag-qualification .uc-pulse{animation:ucSort 6.4s cubic-bezier(0.42,0,0.58,1) 1.2s infinite;}
@keyframes ucSort{0%{transform:translate(0,0);opacity:0;}6%{opacity:1;}12%{transform:translate(-4px,0);}62%{transform:translate(188px,0);opacity:1;}73%{transform:translate(196px,0);}82%{transform:translate(190px,0);opacity:1;}100%{transform:translate(190px,0);opacity:0;}}

/* 4 · VEILLE : radar en balayage continu ; le signal sérieux accroché respire */
html.js-io .uc-grid.visible #ag-veille .uc-sweep{opacity:.42;transition:opacity .7s ease 1s;animation:ucRadar 12s linear 1.1s infinite;}
@keyframes ucRadar{to{transform:rotate(360deg);}}
html.js-io .uc-grid.visible #ag-veille .bp-key{animation:ucCaught 4.6s cubic-bezier(0.42,0,0.58,1) 1.7s infinite;}
@keyframes ucCaught{0%,100%{opacity:1;}50%{opacity:.62;}}

/* 5 · CRITIQUE : une pièce défectueuse tente de sortir, le veto la stoppe, elle recule */
html.js-io .uc-grid.visible #ag-critique .uc-reject{opacity:.85;animation:ucReject 6s cubic-bezier(0.42,0,0.58,1) 1.2s infinite;}
@keyframes ucReject{0%{transform:translateX(0);}30%{transform:translateX(38px);}40%{transform:translateX(40px);}52%{transform:translateX(-4px);}60%{transform:translateX(0);}100%{transform:translateX(0);}}
html.js-io .uc-grid.visible #ag-critique .uc-veto{animation:ucVeto 6s cubic-bezier(0.42,0,0.58,1) 1s infinite;}
@keyframes ucVeto{0%{opacity:0;}12%{opacity:.5;}36%{opacity:.5;}44%{opacity:1;}56%{opacity:.72;}100%{opacity:.72;}}

/* 6 · RELANCE : l'horloge tourne, le dossier du dessus est réveillé au bon moment */
html.js-io .uc-grid.visible #ag-relance .uc-clockhand{opacity:1;transition:opacity .5s ease 1s;animation:ucClock 10s linear 1.1s infinite;}
@keyframes ucClock{to{transform:rotate(360deg);}}
html.js-io .uc-grid.visible #ag-relance .uc-wake{animation:ucWake 9s cubic-bezier(0.16,1,0.3,1) 1.3s infinite;}
@keyframes ucWake{0%,54%{transform:translateY(0);}62%{transform:translateY(-7px);}70%{transform:translateY(-4px);}88%{transform:translateY(-4px);}100%{transform:translateY(0);}}
html.js-io .uc-grid.visible #ag-relance .bp-key{animation:ucPing 9s cubic-bezier(0.42,0,0.58,1) 1.3s infinite both;}
@keyframes ucPing{0%,54%{opacity:0;}62%{opacity:1;}82%{opacity:.7;}100%{opacity:0;}}

/* synthèse · variante B « La direction » (03/09) : la consigne descend, le livrable se
   remplit, le compte rendu remonte. Armée au reveal de .uc-grid, qui porte .visible. */
.uc-fill{fill:var(--steelL);opacity:0;}
.dir-pkt,.dir-lit,.dir-fill{transform-box:view-box;will-change:transform,opacity;}
html.js-io .uc-grid.visible #ag-organisation .dir-pkt{animation:dirPkt 6s cubic-bezier(.42,0,.58,1) 1.2s infinite;}
@keyframes dirPkt{
  0%{transform:translate(0,0);opacity:0;}3%{opacity:1;}
  9%{transform:translate(0,18px);opacity:1;}12%{transform:translate(0,18px);opacity:0;}
  58%{transform:translate(20px,137px);opacity:0;}61%{transform:translate(20px,137px);opacity:1;}
  72%{transform:translate(160px,137px);}85%{transform:translate(160px,-24px);}
  95%{transform:translate(16px,-24px);opacity:1;}100%{transform:translate(16px,-24px);opacity:0;}}
html.js-io .uc-grid.visible #ag-organisation .dir-lit{animation:dirLit 6s ease-out infinite;animation-delay:calc(1.2s + var(--i) * .42s);}
@keyframes dirLit{0%,10%{opacity:0;}16%{opacity:.24;}30%{opacity:0;}100%{opacity:0;}}
html.js-io .uc-grid.visible #ag-organisation .dir-fill{animation:dirFill 6s ease-out 1.2s infinite;}
@keyframes dirFill{0%,44%{opacity:0;}52%{opacity:.20;}94%{opacity:.20;}100%{opacity:0;}}

@media(prefers-reduced-motion:reduce){
  html.js-io .uc-pulse,html.js-io .uc-sweep,html.js-io .uc-reject,
  html.js-io .uc-veto,html.js-io .uc-clockhand{opacity:1!important;}
  .uc-pulse,.uc-sweep,.uc-reject,.uc-veto,.uc-clockhand,
  .uc-duo,.uc-breathe,.uc-wake,
  .dir-pkt,.dir-lit,.dir-fill{animation:none!important;transition:none!important;transform:none!important;}
  html.js-io .uc-grid.visible .bp-key{transition:none!important;animation:none!important;opacity:1!important;}
  /* 03/09 : état final lisible sans mouvement (spécialistes allumés, livrable rempli) */
  .dir-lit{opacity:.18!important;}.dir-fill{opacity:.18!important;}
}

/* responsive */
@media(max-width:980px){
  .uc-grid{grid-template-columns:repeat(2,1fr);}
  .uc-synth{grid-template-columns:1fr;}
  .uc-princ-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .uc{padding:74px 22px 72px;}
  .uc-grid{grid-template-columns:1fr;gap:12px;}
  .uc-card-viz,.uc-card-viz svg{height:82px;}
  .uc-synth{padding:24px 20px;}
}

/* ================================================================
   WOW v5 (18/07) · le moteur de particules inter-sections (v3/v4) a ete
   entierement retire (arbitrage Fred apres avis Sol heavy : "on ne voit pas
   un voyage, un ecran statique"). Le seul effet de mouvement restant est la
   parallaxe de profondeur du hero, dans le canvas #net (voir plus bas + JS).
   Les sections gardent leur fond opaque normal (var(--ink)), plus de
   passthrough transparent necessaire.
   ================================================================ */

/* ================================================================
   SECTION PRODUITS · MODE TEASING (01/09) · AJOUT ADDITIF.
   Cartes reprises de build/home-plus (.p-card / .p-card.lead / .p-statut /
   .p-noshot / .p-link / .p-appris) ; tokens de la page uniquement
   (--ink2, --line, --line2, --mut, --silver, --silverHi, --steel, --steelL) :
   aucun hex nouveau, aucune regle existante modifiee.
   ================================================================ */
:root{--tag-fill:#16202b;--tag-line:#25333f;}
html.light{--tag-fill:var(--ink-deep);--tag-line:#C6D3DF;}
:root{--tag-soft:var(--tag-fill);--tag-soft-ink:var(--mut);--tag-soft-line:var(--line,#25333f);}

#produits .uc-head{margin-bottom:38px;}
.prod-lead{margin:0 0 22px;}
.prod-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.prod-cell{display:flex;}
.prod-grid--next{grid-template-columns:repeat(4,1fr);}
.prod-chantier{margin:22px 0 0;}
.prod-demos-head{margin:58px auto 26px;}
.prod-demos-h{font:700 clamp(20px,2.2vw,26px)/1.2 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;letter-spacing:-.01em;color:var(--silverHi);}
.prod-demos-sub{margin:10px auto 0;max-width:54ch;font:400 15px/1.6 Inter,system-ui,sans-serif;color:var(--mut);}
.prod-grid--demos{grid-template-columns:repeat(4,1fr);}

.p-card{display:flex;flex-direction:column;width:100%;text-decoration:none;background:var(--ink2);border:1px solid var(--line2,#16202b);border-radius:16px;overflow:hidden;transition:border-color .28s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.p-card:hover{border-color:rgba(108,166,207,.34);transform:translateY(-3px);}
.p-card:focus-visible{outline:2px solid var(--steelL);outline-offset:2px;}
.p-shot{display:block;width:100%;height:auto;border-bottom:1px solid var(--line2,#16202b);}
.p-noshot{display:flex;align-items:center;justify-content:center;height:124px;border-bottom:1px solid var(--line2,#16202b);font:600 22px/1 Inter,system-ui,sans-serif;color:var(--silverHi);}
/* meme empreinte que les vignettes voisines : les corps de carte s'alignent */
.prod-grid--demos .p-noshot,.prod-grid--next .p-noshot{height:auto;aspect-ratio:660/413;}
/* meme empreinte pour les captures de la rangee : les 4 corps de carte s'alignent */
.prod-grid--next .p-shot{aspect-ratio:660/413;object-fit:cover;}
.prod-grid--demos .p-noshot{border-bottom-style:dashed;}
.p-body{padding:16px 18px 18px;display:grid;gap:8px;align-content:start;}
.p-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.p-nom{font:600 17px/1.3 Inter,system-ui,sans-serif;color:var(--silverHi);}
.p-ligne{font:400 15px/1.5 Inter,system-ui,sans-serif;color:var(--silver);}
.p-statut{flex:0 0 auto;padding:5px 10px;border-radius:999px;font:600 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;background:var(--tag-fill);color:var(--silverHi);border:1px solid var(--tag-line);}
/* la regle globale .lead du hero bride sinon la carte a 576px (defaut connu de la base) */
.p-card.lead{border-color:rgba(108,166,207,.42);max-width:none;margin-top:0;}
html.light .p-card.lead{border-color:var(--steelL);}
.p-card.lead .p-nom{font-size:22px;}
.p-card.lead .p-statut{font-size:13px;}
.p-card.lead .p-ligne{font-size:17px;}
.p-card.lead{flex-direction:row;align-items:stretch;}
.p-card.lead .p-shot{flex:0 0 58%;width:58%;align-self:stretch;height:auto;object-fit:cover;border-bottom:0;border-right:1px solid var(--line2,#16202b);}
.p-card.lead .p-body{flex:1;align-content:center;padding:30px clamp(22px,2.6vw,36px);gap:10px;}
@media(max-width:860px){
  .p-card.lead{flex-direction:column;}
  .p-card.lead .p-shot{flex:none;width:100%;align-self:auto;border-right:0;border-bottom:1px solid var(--line2,#16202b);}
  .p-card.lead .p-body{padding:18px 20px 20px;}
}
/* lien texte : memes codes que .uc-with a / .uc-bridge de la page */
.p-link{margin-top:2px;display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--steelL);text-decoration:none;}
.p-link:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;border-radius:4px;}
.p-link .arw{transition:transform .22s ease;}
.p-card:hover .p-link{color:var(--silverHi);}
.p-card:hover .p-link .arw{transform:translateX(4px);}
/* demos : filet pointille, fond transparent, pastille neutre */
.p-card--demo{background:transparent;border-style:dashed;}
.p-card--demo:hover{border-color:rgba(108,166,207,.34);border-style:dashed;}
.p-card--demo .p-statut{background:transparent;border-color:var(--line,#16202b);}
.p-appris{margin-top:2px;padding-top:10px;border-top:1px dashed var(--line,#16202b);}
.p-appris-k{display:block;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);}
.p-appris-v{font:400 13px/1.5 Inter,system-ui,sans-serif;color:var(--mut);margin-top:5px;}

/* ---- verrouillage : en sourdine, jamais desactive (spec §B) ---- */
.p-card--lock{cursor:default;}
.p-card--lock:hover{transform:none;border-color:var(--line2,#16202b);}
.p-card--lock .p-shot{filter:saturate(.55) brightness(.86);transition:filter .28s ease;}
html.light .p-card--lock .p-shot{filter:saturate(.6) contrast(.94);}
.p-card--lock:hover .p-shot{filter:saturate(.68) brightness(.9);}
html.light .p-card--lock:hover .p-shot{filter:saturate(.72) contrast(.96);}
.p-statut--bientot,.p-statut--dev{background:var(--tag-soft);color:var(--tag-soft-ink);border-color:var(--tag-soft-line);}
.p-attente{margin-top:2px;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);}

/* ---- bande Ergalon : une ligne calme, hors grille ---- */
.p-card--chantier{min-height:110px;justify-content:center;}
.p-card--chantier .p-body{padding:22px clamp(20px,2.6vw,32px);grid-template-columns:auto 1fr auto;align-items:center;gap:8px 22px;}
.p-card--chantier .p-head{justify-content:flex-start;gap:12px;}
.p-card--chantier .p-ligne{font-size:15px;}
.p-card--chantier .p-attente{margin-top:0;justify-self:end;}
@media(max-width:860px){
  .p-card--chantier .p-body{grid-template-columns:1fr;gap:10px;}
  .p-card--chantier .p-attente{justify-self:start;}
}

/* ---- compte a rebours (spec §C) : un seul sur la page ---- */
.cd-slot{min-height:72px;display:flex;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2,#16202b);}
.cd-static{font:400 15px/1.5 Inter,system-ui,sans-serif;color:var(--silver);}
.cd{display:flex;align-items:baseline;gap:10px;font-size:clamp(30px,3.4vw,44px);}
.cd[hidden]{display:none;}
.cd-u{display:flex;flex-direction:column;align-items:center;}
.cd-n{font:500 1em/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;color:var(--silverHi);font-variant-numeric:tabular-nums;}
.cd-l{margin-top:7px;font:500 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);}
.cd-u--sec .cd-n{font-size:.62em;color:var(--mut);}
.cd-sep{font:300 .62em/1 'JetBrains Mono',ui-monospace,monospace;color:var(--steel);animation:cd-breathe 1s steps(1) infinite;}
@keyframes cd-breathe{0%{opacity:1;}50%{opacity:.38;}}
.cd.is-out{opacity:0;transition:opacity .24s ease;}
.is-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ---- bascule J0 : le voile tombe, le lien apparait ---- */
.p-card--lock.is-open .p-shot,.p-card--lock.is-open:hover .p-shot,
html.light .p-card--lock.is-open .p-shot,html.light .p-card--lock.is-open:hover .p-shot,
html.light .p-card.lead.p-card--lock.is-open .p-shot,html.light .p-card.lead.p-card--lock.is-open:hover .p-shot{filter:none;transition:filter .6s ease;}
.p-card--lock.is-open{cursor:auto;}
.p-card--lock.is-open:hover{transform:translateY(-3px);border-color:rgba(108,166,207,.34);}
.p-open-cta{opacity:0;transform:translateX(-6px);transition:opacity .32s ease,transform .32s ease;}
.p-open-cta.is-in{opacity:1;transform:none;}

/* ---- reprises DA (DA_REVIEW_TEASING_20260901) ---- */
/* R1 : le champ et le bouton vert de la capture sellom sortaient du cadre en bas,
   seule affordance de clic visible sur la seule carte qu'on ne peut pas cliquer */
.p-card.lead .p-shot{object-position:50% 0%;}
/* R2 : voile clair de la carte dominante seule, ni la rangee ni le theme sombre */
html.light .p-card.lead.p-card--lock .p-shot{filter:saturate(.5) brightness(.97) contrast(.96);}
/* R3 : le pied « OUVERTURE // BIENTOT » tombait a deux hauteurs selon 2 ou 3 lignes d'accroche */
.prod-grid--next .p-card--lock .p-body{height:100%;align-content:space-between;}

/* ---- cascade d'entree des 4 cartes verrouillees (spec §D) ---- */
html.js-io .prod-grid--next .prod-cell:nth-child(1){transition-delay:0ms;}
html.js-io .prod-grid--next .prod-cell:nth-child(2){transition-delay:70ms;}
html.js-io .prod-grid--next .prod-cell:nth-child(3){transition-delay:140ms;}
html.js-io .prod-grid--next .prod-cell:nth-child(4){transition-delay:210ms;}

@media(max-width:1023px){.prod-grid--next{grid-template-columns:repeat(2,1fr);}}
@media(max-width:980px){.prod-grid--demos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.prod-grid,.prod-grid--next{grid-template-columns:1fr;}}
@media(max-width:560px){
  .prod-grid,.prod-grid--next,.prod-grid--demos{grid-template-columns:1fr;gap:12px;}
  .prod-demos-head{margin-top:44px;}
}
@media(max-width:400px){
  .cd{font-size:clamp(26px,7.2vw,34px);gap:7px;}
  .cd-l{font-size:10px;letter-spacing:.14em;}
}
@media(prefers-reduced-motion:reduce){
  .p-card:hover{transform:none;}
  .p-card:hover .p-link .arw{transform:none;}
  .p-card--lock:hover .p-shot{filter:saturate(.55) brightness(.86);}
  html.light .p-card--lock:hover .p-shot{filter:saturate(.6) contrast(.94);}
  .cd-sep{animation:none;}
  html.js-io .prod-grid--next .prod-cell{transition-delay:0ms!important;}
}

/* ================================================================
   HUMAINS · DUO SYMETRIQUE (01/09) · AJOUT ADDITIF (spec §F).
   Deux colonnes identiques : portrait 3:2 natif au-dessus, scene 16:9
   dessous. Les regles .humain-grid / .humain-stage / .person d'origine
   ne sont pas modifiees, seules des classes additives les surchargent.
   ================================================================ */
.humain-grid--duo{grid-template-columns:1fr 1fr;align-items:start;}
.duo{display:grid;grid-template-rows:auto auto;gap:20px;}
.humain-grid--duo .person{min-height:0;aspect-ratio:3/2;}
.humain-stage--duo{min-height:0;aspect-ratio:16/9;}
/* .55 : le rouge TEDx et l'imprime du chemisier sont les deux seules couleurs
   saturees de la page ; a .35 elles disputaient l'accent acier */
/* kawtar-scene : la silhouette occupe 9,1%-92,2% de la hauteur (998 px) alors que
   la fenetre 16:9 n'en montre que 900 : tete et chaussures ne peuvent pas coexister.
   Le visage prime (grille §E etape 0), la coupe tombe a mi-tibia, jamais sur une
   articulation ; 20% garde aussi la tete entiere dans la fenetre 2:1 du mobile. */
.humain-stage--duo img{filter:grayscale(.55) contrast(1.04);}
.duo-scene--fred img{object-position:50% 34%;}
/* R4 : traitement chromatique identique aux deux scenes, densite appariee ;
   le bloc blanc du planning pesait plus que l'auditorium sombre a taille egale */
.duo-scene--kawtar img{object-position:50% 20%;filter:grayscale(.55) contrast(1.04) brightness(.88);}
/* R6 : a 375 px les noms tombent sur les chemises blanches, le degrade d'origine
   etait calibre pour un arriere-plan flou */
.duo .person .who{background:linear-gradient(to top,rgba(5,8,12,.94) 0%,rgba(5,8,12,.74) 58%,transparent 100%);}
html.js-io .humain-grid--duo .duo:nth-child(1){transition-delay:0ms;}
html.js-io .humain-grid--duo .duo:nth-child(2){transition-delay:90ms;}
@media(max-width:860px){
  .humain-grid--duo{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .humain-stage--duo{aspect-ratio:2/1;}
}
@media(prefers-reduced-motion:reduce){
  html.js-io .humain-grid--duo .duo{transition-delay:0ms!important;}
}

/* ================================================================
   REPLI DES BLOCS SERVICES 01 ET 02 (01/09) · spec §G · zero JS ajoute.
   Chevron, rotation, duree et animation d'ouverture repris a l'identique
   des 7 themes CDO (.cdo-chev / cdoIn). id="services" reste sur le
   .svc-block, donc hors du pli : l'ancre atterrit sur un en-tete lisible.
   ================================================================ */
.svc-sum{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr 16px;align-items:center;
  max-width:1200px;margin:0 auto;
}
.svc-sum::-webkit-details-marker{display:none;}
.svc-sum:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;border-radius:8px;}
.svc-sum>*{grid-column:1;}
.svc-chev{grid-column:2;grid-row:1/-1;align-self:center;}
.svc-fold[open] .svc-chev{transform:rotate(-135deg);}
.svc-more{
  margin-top:16px;
  font:500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.04em;color:var(--steelL);transition:color .2s ease;
}
.svc-more--close{display:none;}
.svc-fold[open] .svc-more{display:none;}
.svc-fold[open] .svc-more--close{display:block;}
.svc-sum:hover .svc-more,.svc-sum:hover .svc-more--close{color:var(--silverHi);}
.svc-fold .svc-inner{margin-top:34px;}
.svc-fold[open] .svc-inner{animation:cdoIn .34s cubic-bezier(.22,.61,.36,1);}
/* piege bloquant : dans un <details> ferme les .fx-reveal ne sont jamais
   observes et resteraient a opacity:0 APRES l'ouverture (bloc deplie et vide) */
.svc-fold .fx-reveal{opacity:1!important;transform:none!important;}
/* meme piege pour les blueprints : sans la classe .visible les traits restent a
   stroke-dashoffset:1 et la scene s'ouvre vide. Etat dessine par defaut ; si
   l'observateur passe ensuite, il ajoute .visible et les boucles idle demarrent.
   Le trace au deroule de l'ouverture, lui, joue via [open]. */
html.js-io .svc-fold .cto-scene .bp-draw,html.js-io .svc-fold .cdo-scene .bp-draw{stroke-dashoffset:0;}
html.js-io .svc-fold .cto-scene .bp-node,html.js-io .svc-fold .cto-scene .bp-key,
html.js-io .svc-fold .cdo-scene .bp-node,html.js-io .svc-fold .cdo-scene .bp-key{opacity:1;}
@media(max-width:560px){
  .svc-sum{grid-template-columns:1fr 14px;}
}
@media(prefers-reduced-motion:reduce){
  .svc-fold[open] .svc-inner{animation:none;}
  .svc-chev{transition:none;}
}
/* gouvernance condensee dans le pli du bloc 02 (fusion du 01/09) */
.svc-gouv{margin-top:30px;padding-top:22px;border-top:1px solid #16202b;}
.svc-gouv-h{font:600 17px/1.28 -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;letter-spacing:-.01em;color:var(--silverHi);}
.svc-gouv-p{margin-top:8px;font:400 14.5px/1.7 Inter,system-ui,sans-serif;color:rgba(196,200,204,.82);max-width:68ch;}
.svc-gouv .yavantha-rail{margin-top:14px;}
html.light .svc-gouv{border-top-color:var(--line);}
html.light .svc-gouv-p{color:#41566B;}

/* ================================================================
   TOGGLE THÈME (pill discret, famille lang-sw) : présent DARK & LIGHT
   ================================================================ */
.theme-sw{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:30px;flex-shrink:0;
  border:1px solid #25333f;border-radius:999px;background:transparent;
  color:var(--mut);cursor:pointer;transition:color .18s,border-color .18s,background .18s;
}
.theme-sw:hover{color:var(--silverHi);border-color:var(--steel);}
.theme-sw:focus-visible{outline:2px solid var(--steelL);outline-offset:3px;}
.theme-sw svg{width:16px;height:16px;}
.theme-sw .theme-ic-sun{display:block;}
.theme-sw .theme-ic-moon{display:none;}
html.light .theme-sw .theme-ic-sun{display:none;}
html.light .theme-sw .theme-ic-moon{display:block;}
.nav-panel .lang-sw{align-items:center;}
.nav-panel .theme-sw{width:44px;height:44px;}
.nav-panel .theme-sw svg{width:20px;height:20px;}
@media(max-width:520px){.site-nav .nav-right .theme-sw{display:none;}}

/* ================================================================
   ===============  THÈME LIGHT : « papier bleuté, encre navy »  ===============
   Additif pur : chaque règle scopée html.light. Le DARK reste intact.
   Table de tokens LIGHT_SPEC §1 + surcharges ciblées §2. Transition douce.
   ================================================================ */
/* transition douce du fond SANS toucher aux transitions existantes des cartes
   (le reveal/hover garde ses propres réglages) : uniquement body + hero */
body{transition:background-color .3s ease,color .3s ease;}
.hero{transition:background .35s ease;}

html.light{
  /* redéfinition des variables existantes (le CSS pointe var(--…)) */
  --ink:#EBF0F6;         /* fond page = papier bleuté (pas blanc Apple) */
  --ink2:#FFFFFF;        /* cartes = blanc pur flottant sur le papier */
  --steel:#33597A;       /* accent secondaire assombri */
  --steelL:#2E6A98;      /* accent / liens assombri (~5:1) */
  --silver:#33475B;      /* encre courante */
  --silverHi:#0E2033;    /* encre profonde (titres, ~14:1) */
  --mut:#5C6E80;         /* steel mi-ton · a11y 22/07 (M6, cause racine) : #6B7F92 etait
                            structurellement sous AA (3.4-4.3:1 selon fond, jamais 4.5).
                            #5C6E80 verifie 4.58:1 sur le pire fond du site (#EBF0F6) et
                            5.25:1 sur carte blanche. Corrige d'un coup ~15-20 selecteurs
                            (footer, .mstep-services, .ck-*, .cdo-promise, .cf-legal,
                            .contact-sub, .uc-with, .mega-row .mr-desc, .brain-points li...). */
  /* variables qui n'existaient qu'en fallback inline → définies pour le light */
  --line:#D5DFE9;
  --line2:#C6D3DF;
  --ink-deep:#E3EAF2;
  --panel:#F1F5FA;
  /* helpers light */
  --key:#0E9DC4; --key-text:#0B7C9E; --paper2:#FFFFFF;
}
html.light .bp{stroke:var(--steelL);}

/* ---- toggle en light ---- */
html.light .theme-sw{border-color:var(--line2);color:var(--mut);}
html.light .theme-sw:hover{color:var(--silverHi);border-color:var(--steelL);}

/* ---- NAV ---- */
html.light .site-nav{background:rgba(235,240,246,.55);}
html.light .site-nav.scrolled{background:rgba(235,240,246,.82);}
@media(max-width:760px){html.light .site-nav.scrolled{background:rgba(235,240,246,.97);}}
html.light .lang-sw button{border-color:var(--line2);}
html.light .lang-sw button.on{color:#fff;background:var(--steelL);border-color:var(--steelL);}
html.light .nav-panel{background:rgba(235,240,246,.98);}
html.light .mega{background:rgba(255,255,255,.98);border-color:var(--line2);box-shadow:0 30px 70px -40px rgba(14,32,51,.28),inset 0 1px 0 #fff;}
html.light .mega-row:hover{background:rgba(46,89,122,.08);border-color:var(--steel);}
html.light .mega-foot{border-top-color:var(--line);}

/* ---- BOUTONS ---- */
html.light .btn.p{background:var(--steelL);color:#fff;}
html.light .btn.p:hover{background:#245A86;}
html.light .btn.s{background:#fff;border-color:var(--line2);color:var(--silverHi);box-shadow:0 10px 24px -14px rgba(14,32,51,.28);}
html.light .btn.s:hover{border-color:var(--steelL);color:var(--steelL);}

/* ---- HERO ---- */
html.light .hero{background:radial-gradient(120% 100% at 50% 38%,#F4F7FB 0%,#EBF0F6 55%,#E4EBF3 100%);}
html.light .hero::after{background:linear-gradient(to bottom,rgba(235,240,246,0) 0%,rgba(235,240,246,.55) 58%,var(--ink) 100%);}
/* logo : glow (dark) → ombre de contact (light), ZÉRO halo (LIGHT_SPEC §2.1) */
html.light .ring-wrap .core{display:none;}
html.light .ring-wrap img{filter:drop-shadow(0 24px 32px rgba(14,32,51,.24)) drop-shadow(0 5px 9px rgba(14,32,51,.16));}
html.light .ring-wrap::after{content:'';position:absolute;left:50%;bottom:4%;width:54%;height:6%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(14,32,51,.22),transparent 72%);filter:blur(6px);z-index:-1;pointer-events:none;}
html.light #portail h1,html.light #portail .lead{text-shadow:none;}
/* lead hero : --mut (~3.45:1) est réservé légendes/kickers (LIGHT_SPEC §1) ; le sous-titre hero est du corps de lecture → --silver #33475B (~7.8:1, AA) */
html.light #portail .lead{color:var(--silver);}
html.light .hero-copy::before{
  -webkit-backdrop-filter:blur(16px) saturate(.9) brightness(1.03);
          backdrop-filter:blur(16px) saturate(.9) brightness(1.03);
  background:radial-gradient(38% 34% at 50% 50%,
    rgba(235,240,246,.97) 0%,rgba(235,240,246,.82) 34%,rgba(235,240,246,.40) 56%,rgba(235,240,246,.13) 70%,rgba(235,240,246,0) 80%);}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  html.light .hero-copy::before{background:radial-gradient(38% 34% at 50% 50%,
    rgba(235,240,246,.96) 0%,rgba(235,240,246,.84) 34%,rgba(235,240,246,.48) 56%,rgba(235,240,246,.16) 70%,rgba(235,240,246,0) 80%);}
}
html.light .hero-reassure{color:#245A86;} /* a11y 22/07 (N1) : passait deja AA (5.04:1), marge AAA (>6:1) pour ce texte a fort poids commercial */

/* ---- GRAIN : navy multiply (papier), pas screen ---- */
html.light .briques-grain{mix-blend-mode:multiply;opacity:.55;}

/* ---- BRIQUES / MÉTHODE ---- */
html.light .briques-header{background:linear-gradient(105deg,#F4F7FB 0%,#FFFFFF 38%,#F4F7FB 70%);box-shadow:0 24px 60px -46px rgba(14,32,51,.22),inset 0 0 120px -60px rgba(14,32,51,.10);}
html.light .briques-header .sec-title{text-shadow:none;}
html.light .briques-header .sec-sub{color:#5C6E80;}
html.light .mstep{background:#FFFFFF;border-color:var(--line2);box-shadow:0 18px 40px -30px rgba(14,32,51,.20);}
html.light .mstep:hover{border-color:rgba(46,106,152,.5);}
html.light .mstep.active{border-color:var(--steelL);background:#FFFFFF;box-shadow:0 26px 60px -40px rgba(14,32,51,.24),inset 0 2px 0 rgba(46,106,152,.35);}
html.light .mstep-ord{color:rgba(46,89,122,.08);}
html.light .mstep.active .mstep-ord{color:rgba(46,89,122,.14);}
html.light .mstep-title{color:var(--silverHi);}
html.light .mstep-verbs{color:#2E6A98;}
html.light .mstep-promise{color:#5C6E80;}
html.light .mstep-proof{color:#3E6E96;}
html.light .mstep-proof b{color:var(--silverHi);}

/* Blueprint (bp) : stroke/node/faint via vars ; key + faint-opacity + glows ciblés (§2.3) */
html.light .bp-faint{opacity:.34;}
html.light .bp-key{fill:#0E9DC4;}
html.light .mstep-pulse,html.light .uc-pulse{fill:#0E9DC4;}
html.light .uc-veto{stroke:#0E9DC4;}
html.light .mstep .bp-key,html.light .mstep-pulse,
html.light .loop-figure .bp-key,html.light .cto-scene .bp-key,html.light .cdo-scene .bp-key,
html.light .chapitre-rail .bp-key,html.light .uc .bp-key,html.light .uc-pulse,html.light .uc-veto{
  filter:drop-shadow(0 0 3px rgba(14,157,196,.35));
}

/* COCKPIT · exemple (mpanel 03) */
html.light .cvz{border-color:var(--line2);background:#FFFFFF;box-shadow:0 24px 60px -44px rgba(14,32,51,.20),inset 0 1px 0 #fff;}
html.light .cvz-bar{border-bottom-color:var(--line);background:rgba(46,106,152,.06);}
html.light .cvz-dot{background:#0E9DC4;box-shadow:0 0 8px rgba(14,157,196,.5);}
html.light .cvz-kpi{border-color:var(--line);background:#F4F7FB;}
html.light .cvz-kpi .k-num.accent{color:#0B7C9E;}
html.light .cvz-bars i.best{background:linear-gradient(180deg,#0E9DC4,var(--steelL));box-shadow:0 0 10px rgba(14,157,196,.3);}
html.light .cvz-curve .area{fill:rgba(46,106,152,.10);}
html.light .cvz-plain{border-top-color:var(--line);background:rgba(14,157,196,.06);}
html.light .cvz-plain .p-k{color:#0B7C9E;}
html.light .cvz-plain .p-v{color:var(--silver);}

/* Panneaux méthode + rails */
html.light .mpanel{border-color:var(--line2);background:#FFFFFF;box-shadow:0 30px 70px -46px rgba(14,32,51,.18),inset 0 1px 0 #fff;}
html.light .brique-body{border-top-color:var(--line);}
html.light .brique-intro{color:#41566B;}
html.light .brique-intro b{color:var(--silverHi);}
html.light .process-step{border-bottom-color:rgba(198,211,223,.7);}
html.light .process-label{color:var(--silverHi);}
html.light .process-proof{color:#3E6E96;}
html.light .process-proof b{color:var(--silverHi);}
html.light .brique-livrable{border-color:var(--line2);background:#F4F7FB;}
html.light .brique-livrable .liv-v{color:var(--silver);}

/* ---- PREUVE ---- */
html.light .brain-card{background:rgba(255,255,255,.74);border-color:var(--line2);box-shadow:0 26px 60px -40px rgba(14,32,51,.22);}
html.light .monitor-frame::before{background:linear-gradient(90deg,transparent,rgba(46,106,152,.4),transparent);}
html.light .monitor-frame::after{box-shadow:inset 0 0 100px -60px rgba(14,32,51,.25);}
/* COCKPIT codé (D2) : intégralement re-thémé en clair */
html.light .cockpit-screen{border-color:var(--line2);background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FB 100%);box-shadow:0 30px 80px -40px rgba(14,32,51,.20),inset 0 1px 0 #fff;}
html.light .ck-bar{border-bottom-color:var(--line);background:rgba(46,106,152,.06);}
html.light .ck-dot{background:var(--steelL);box-shadow:0 0 8px rgba(46,106,152,.45);}
html.light .ck-panel{background:#FFFFFF;}
/* AL (D3) */
html.light #d3-al{background:var(--ink-deep);}
html.light .al-eye{background:radial-gradient(circle,#4FB6D6 0%,var(--steelL) 42%,#1B3D57 100%);}
html.light #cw-window.cw-inline{border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 54px -30px rgba(14,32,51,.42);}
/* FORMATION (D4) */
html.light .formation-note{color:#5C6E80;}
html.light .chapitre{background:#FFFFFF;border-color:var(--line2);box-shadow:0 16px 38px -30px rgba(14,32,51,.18);}
html.light .chapitre:hover{border-color:rgba(46,106,152,.5);}

/* ---- SERVICES ---- */
html.light .cdo-rail{border-top-color:var(--line);}
html.light .cdo-theme{border-bottom-color:var(--line);}
html.light .cdo-sum:hover .cdo-title{color:var(--silverHi);}
html.light .cdo-title{color:var(--silverHi);}
html.light .cdo-proof{color:#3E6E96;}
html.light .cdo-proof b{color:var(--silverHi);}
html.light .cdo-detail p{color:#41566B;}
/* LA BOUCLE (E.0) */
html.light .loop-mask{fill:var(--ink);}
html.light .loop-legend li{border-bottom-color:rgba(198,211,223,.7);}
html.light .loop-leg-k{color:var(--silverHi);}
html.light .loop-support p{color:#41566B;}
html.light .loop-support b{color:var(--silverHi);}

/* ---- USE CASES ---- */
html.light .uc-sub{color:#5C6E80;}
html.light .uc-card{background:#FFFFFF;border-color:var(--line2);box-shadow:0 18px 40px -30px rgba(14,32,51,.18);}
html.light .uc-card:hover,html.light .uc-card:focus-within{
  border-color:rgba(46,106,152,.55);background:#FFFFFF;
  box-shadow:0 26px 56px -38px rgba(14,32,51,.28),inset 0 1px 0 #fff;}
html.light .uc-card-title{color:var(--silverHi);}
html.light .uc-actions li{color:#41566B;}
html.light .uc-with a{color:#2E6A98;border-bottom-color:rgba(46,106,152,.35);}
html.light .uc-with a:hover{color:var(--silverHi);border-color:var(--steelL);}
html.light .uc-synth{border-color:var(--line2);background:linear-gradient(140deg,#FFFFFF 0%,#F1F5FA 46%,#FFFFFF 100%);box-shadow:0 30px 80px -46px rgba(14,32,51,.20),inset 0 1px 0 #fff;}
html.light .uc-synth-p{color:#41566B;}
html.light .uc-synth-p b{color:var(--silverHi);}
html.light .uc-princ{background:#FFFFFF;border-color:var(--line2);box-shadow:0 16px 38px -30px rgba(14,32,51,.18);}
html.light .uc-princ:hover{border-color:rgba(46,106,152,.5);}
html.light .uc-princ-v{color:#41566B;}
html.light .uc-princ-v b{color:var(--silverHi);}
html.light .uc-bridge:hover{color:var(--silverHi);}

/* ---- HUMAIN + captions (texte clair conservé SUR les photos sombres) ---- */
html.light .humain-stage,html.light .person{border-color:var(--line);background:#E3EAF2;box-shadow:0 20px 44px -30px rgba(14,32,51,.40);}
html.light .humain-stage figcaption{color:#EAF0F6;}
html.light .person .who b{color:#F2F6FA;}
html.light .person .who span{color:#7FB2D8;}

/* ---- MARQUEE · inversion des pastilles (LIGHT_SPEC §2.6) ---- */
/* logos couleur / sombres (ex-plaque claire) → chip clair + fin liseré, direct */
html.light .mq-logo--plaque{background:#FFFFFF;border:1px solid #E2E8EF;}
/* apple + ledger : SVG SOMBRES (invert servait le dark) → on RETIRE l'invert et on
   les pose direct sur chip clair. NB : filter:invert s'applique aussi au background,
   impossible de garder invert(blanc) SUR une plaque navy sans inverser la plaque. */
html.light .mq-logo--invert{filter:none;background:#FFFFFF;border:1px solid #E2E8EF;border-radius:8px;padding:8px 14px;box-sizing:content-box;}
/* scality-trim.png = le seul logo RÉELLEMENT blanc (source blanche, sans invert) →
   plaque NAVY #0E2033 pour ne pas disparaître (l'inverse exact de la plaque claire du dark). */
html.light .mq-logo[src*="scality"]{background:#0E2033;border-radius:8px;padding:8px 12px;box-sizing:content-box;}

/* ---- LE NOM (cunéiforme en encre navy sur carte blanche) ---- */
html.light .etym-part{border-color:var(--line2);box-shadow:0 16px 38px -30px rgba(14,32,51,.16);}
/* a11y 22/07 (M6, cas restant sous 4.5:1 apres le fix racine --mut) : le footer est sur
   --ink-deep (#E3EAF2), un fond legerement plus sombre que le reste de la page -> --mut
   seul y retombe a 4.33:1. Override dedie, mesure programmatiquement PASS (~6.3:1). */
html.light .footer-tagline,html.light .footer-col a,html.light .footer-social a,html.light .footer-bar span{color:#41566B;}
html.light .etym-desc{color:#41566B;}

/* ---- FORMULAIRE ---- */
html.light .cf-field input,html.light .cf-field textarea{border-color:var(--line2);}
html.light .cf-field input:focus,html.light .cf-field textarea:focus{border-color:var(--steelL);}
html.light .cf-status.ok{color:#1E8A5C;}
html.light .cf-status.err{color:#B4553F;}

/* ---- CONTACT (override du gradient wow → clair) + FOOTER ---- */
html.light #contact{background:radial-gradient(120% 120% at 50% 30%,rgba(244,247,251,.7) 0%,rgba(228,235,243,.82) 70%);}
html.light .contact-ring .core{display:none;}
html.light .contact-ring img{filter:drop-shadow(0 14px 20px rgba(14,32,51,.22));}
/* footer : ink-deep + line désormais définis en var → auto */

/* ---- PARTENAIRES (captures : cadre + ombre, artefact posé §2.4) ---- */
html.light .pcard{background:#FFFFFF;border-color:var(--line2);box-shadow:0 22px 50px -34px rgba(14,32,51,.24);}
html.light .pcard-shot{border-bottom-color:var(--line);background:#E3EAF2;}