/* ==========================================================================
   STRIKER — feuille unique, construite depuis le relevé de striker-agency.com
   (voir DESIGN-SYSTEM.md). Base claire, ancrages navy, graisses plafonnées.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTES */
@font-face{font-family:Avenir;src:url(../assets/fonts/AvenirNextCyr-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Avenir;src:url(../assets/fonts/AvenirNextCyr-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Avenir;src:url(../assets/fonts/AvenirNextCyr-Demi.woff2) format('woff2');font-weight:600;font-display:swap}

/* --------------------------------------------------------------- 2. JETONS */
/* Le navigateur « ancre » le défilement : quand un élément change au-dessus de
   ce qu'on regarde, il décale le scroll pour compenser. Sur une page dont
   chaque section est chorégraphiée au scroll — plaques qui s'allument, sections
   qui se chevauchent — cette compensation ne rattrape rien : elle fait sauter
   la page sous le doigt, en général dans un entre-deux de sections. */
html{overflow-anchor:none}

:root{
  /* surfaces — la base est claire */
  --paper:#FDFDFD;
  --panel:#F5F7F9;
  --card:#FFFFFF;
  --navy:#0B1A2A;
  --navy-deep:#071320;

  /* encre */
  --ink:#0B1622;
  --ink-soft:#5C6875;
  --ink-mute:#8E98A3;

  /* accent — charte Striker */
  --blue:#0E70C4;
  --blue-bright:#3B7DF0;
  --blue-pale:#EAF2FB;

  /* filets : presque invisibles, c'est ce qui fait le sérieux */
  --line:rgba(11,22,34,.07);
  --line-2:rgba(11,22,34,.11);
  --line-d:rgba(255,255,255,.07);
  --line-d2:rgba(255,255,255,.13);

  /* ombres : quasi nulles */
  --sh1:0 1px 2px rgba(11,22,34,.04);
  --sh2:0 14px 34px -14px rgba(11,22,34,.13);
  --sh3:0 28px 60px -24px rgba(11,22,34,.18);

  /* espacement — base 2, relevée telle quelle */
  --s2:2px;  --s4:4px;  --s6:6px;  --s8:8px;  --s10:10px; --s12:12px;
  --s14:14px;--s16:16px;--s18:18px;--s20:20px;--s24:24px;--s28:28px;
  --s32:32px; --s40:40px;--s56:56px;
  --s48:48px;--s64:64px;--s80:80px;--s96:96px;--s120:120px;

  /* rayons */
  --r8:8px; --r12:12px; --r16:16px; --r20:20px; --r24:24px; --r28:28px; --rf:999px;

  /* mise en page */
  --wrap:1264px;          /* 1200 de contenu + 32 de gouttière */
  --gut:clamp(20px,5vw,32px);
  --sec:clamp(64px,8vw,112px);
  --nav-h:56px;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------- 3. REMISE À PLAT */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:400;font-size:15px;line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}

/* ------------------------------------------------- 4. ÉCHELLE TYPOGRAPHIQUE
   Relevée : 76 / 52 / 24 / 18 / 16 / 14 / 12, graisses 400-500-600, jamais plus.
   L'élégance vient de l'écart entre le plus grand et le plus petit.            */
.t-hero{font-size:clamp(38px,6.2vw,76px);font-weight:600;line-height:1.06;letter-spacing:-.04em;margin:0}
.t-h2  {font-size:clamp(28px,3.7vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.04em;margin:0}
.t-h3  {font-size:clamp(20px,1.9vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.035em;margin:0}
.t-h4  {font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0}
.t-lead{font-size:clamp(15px,1.3vw,16px);font-weight:400;line-height:1.55;color:var(--ink-soft);margin:0}
.t-body{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink-soft);margin:0}
.t-small{font-size:13px;font-weight:400;line-height:1.45;color:var(--ink-soft);margin:0}
.t-xs  {font-size:11.5px;font-weight:500;line-height:1.4;color:var(--ink-mute);margin:0}
.t-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0}
b,strong{font-weight:600;color:var(--ink)}
.measure{max-width:58ch}
.measure-s{max-width:44ch}

/* sur fond sombre, l'encre s'inverse */
.on-dark{color:rgba(255,255,255,.92)}
.on-dark .t-lead,.on-dark .t-body,.on-dark .t-small{color:rgba(255,255,255,.62)}
.on-dark .t-xs,.on-dark .t-eyebrow{color:rgba(255,255,255,.48)}
.on-dark b,.on-dark strong{color:#fff}

/* ----------------------------------------------------------- 5. MISE EN PAGE */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--sec);position:relative}
.band--dark{background:var(--navy);color:rgba(255,255,255,.92)}
.band--panel{background:var(--panel)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* grille 12 colonnes */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s40) var(--s48);align-items:start}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* compositions à trois zones — c'est ce qui crée le jeu (relevé : 285/630/285) */
.g3{display:grid;grid-template-columns:1fr minmax(0,630px) 1fr;gap:var(--s48);align-items:start}
.g3-center{grid-column:2}

@media (max-width:900px){
  .g{gap:var(--s32)}
  .c4,.c5,.c6,.c7,.c8{grid-column:1/-1}
  .g3{grid-template-columns:1fr}
  .g3-center{grid-column:1}
}

/* en-tête de section : groupe serré, puis grand écart avant le contenu.
   6px entre l'œillet et le titre, 12 entre titre et chapô, 48 avant la suite. */
.head{display:grid;gap:var(--s12);margin-bottom:var(--s48)}
.head .t-eyebrow{margin-bottom:calc(var(--s6) * -1)}
.head.center{justify-items:center;text-align:center;margin-inline:auto;max-width:640px}

/* ==========================================================================
   6. BOUTONS — pilule, contenu serré, flèche dans une pastille
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:var(--s12);
  padding:10px 10px 10px 20px;border-radius:var(--rf);
  font-size:14px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
  background:var(--ink);color:#fff;border:1px solid transparent;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2)}
.btn .pip{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.14);font-size:11px;line-height:1;
  transition:transform .3s var(--ease);
}
.btn:hover .pip{transform:translate(2px,-2px)}
/* --ink vaut #FFF depuis la DA sombre : un bouton blanc avec color:var(--ink)
   donne du blanc sur blanc. L'encre du bouton clair est écrite en dur. */
.btn--light{background:#fff;color:#0A1826}
.btn--light span,.btn--light .lbl-l,.btn--light .lbl-s{color:inherit}
.btn--light .pip{background:rgba(11,22,34,.07)}
.btn--blue{background:var(--blue);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost .pip{background:rgba(11,22,34,.06)}
.on-dark .btn--ghost{color:rgba(255,255,255,.9);border-color:var(--line-d2)}
.on-dark .btn--ghost .pip{background:rgba(255,255,255,.1)}
.btn--sm{padding:7px 7px 7px 14px;font-size:13px}
.btn--sm .pip{width:22px;height:22px;font-size:10px}

/* ==========================================================================
   7. BARRE DE MENU — flottante, discrète, texte à 13px
   ========================================================================== */
.nav{
  position:fixed;top:clamp(14px,2.2vh,22px);left:50%;translate:-50% 0;z-index:60;
  display:flex;align-items:center;height:var(--nav-h);padding:0 8px 0 18px;
  max-width:calc(100vw - 2 * var(--gut));flex-wrap:nowrap;
  border-radius:var(--rf);border:1px solid var(--line);
  background:rgba(253,253,253,.82);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--sh1);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.over-dark{background:rgba(11,26,42,.62);border-color:var(--line-d2)}
.nav.over-dark .nav-word{filter:brightness(0) invert(1)}
.nav.over-dark .nav-links a{color:rgba(255,255,255,.7)}
.nav.over-dark .nav-links a:hover,.nav.over-dark .nav-links a.on{color:#fff;background:rgba(255,255,255,.09)}
.nav.over-dark .btn{background:#fff;color:#0A1826}
.nav.over-dark .btn span{color:inherit}
.nav.over-dark .btn .pip{background:rgba(11,22,34,.08)}
.nav-logo{flex:none;display:flex;align-items:center}
/* le fichier source est blanc : sur la barre claire il faut l'encrer, sinon il disparaît */
.nav-word{height:17px;width:auto;flex:none;filter:brightness(0);transition:filter .4s var(--ease)}
.nav-sep{width:1px;height:18px;flex:none;background:var(--line-2);margin:0 14px 0 16px}
.nav-links{display:flex;gap:var(--s2);flex:none}
.nav-links a{
  padding:7px 11px;border-radius:var(--r8);font-size:13px;font-weight:500;
  letter-spacing:-.012em;color:var(--ink-soft);white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:rgba(11,22,34,.045)}
.nav .btn{margin-left:12px;flex:none}
.nav-burger{display:none}
.lbl-s{display:none}
@media (max-width:520px){ .lbl-l{display:none} .lbl-s{display:inline} }
@media (max-width:900px){
  /* Avec space-between et trois éléments, le bouton se retrouvait planté au
     milieu, à égale distance du logo et du menu — comme s'il flottait. Le
     logo tient la gauche, le bouton et le menu forment un groupe à droite. */
  .nav{left:var(--gut);right:var(--gut);translate:none;justify-content:flex-start;
       gap:8px;padding:0 8px 0 14px}
  .nav-sep,.nav-links{display:none}
  .nav .btn{
    margin-left:auto;flex:none;
    padding:6px 6px 6px 13px;font-size:13px;
  }
  .nav .btn .pip{width:26px;height:26px}
}

/* ==========================================================================
   8. VOCABULAIRE DE SCHÉMA — des objets d'interface, pas des diagrammes
   C'est le point qui séparait « clean » de « cheap » : le lecteur reconnaît
   un tableau de bord ; il ne reconnaît pas une forme abstraite.
   ========================================================================== */
.ui{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r24);padding:var(--s32)}
.ui--plain{background:transparent;border:0;padding:0}

/* la carte : icône dans un carré arrondi, puis une puce numérotée */
.ui-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r16);
  padding:var(--s16);display:grid;gap:var(--s12);box-shadow:var(--sh1);
}
.ui-icon{
  width:32px;height:32px;border-radius:var(--r8);display:grid;place-items:center;
  background:var(--blue-pale);color:var(--blue);
}
.ui-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ui-icon--ink{background:rgba(11,22,34,.05);color:var(--ink)}
.ui-chip{display:inline-flex;align-items:center;gap:var(--s8);font-size:13px;font-weight:500;letter-spacing:-.015em}
.ui-chip i{
  font-style:normal;font-size:11px;font-weight:500;color:var(--ink-mute);
  background:rgba(11,22,34,.05);border-radius:var(--r8);padding:3px 6px;line-height:1;
}
.ui-card.is-dim{opacity:.5}

/* la rangée d'avatars qui se chevauchent */
.ui-faces{display:flex}
.ui-faces span{
  position:relative;width:32px;height:32px;border-radius:50%;border:2px solid var(--card);
  margin-left:-9px;overflow:hidden;box-shadow:var(--sh1);
  background:linear-gradient(160deg,#E3E9F0,#CBD5E0);
}
/* silhouette neutre : une équipe, sans prétendre nommer qui que ce soit */
.ui-faces span::after{
  content:'';position:absolute;left:50%;top:22%;translate:-50% 0;
  width:34%;aspect-ratio:1;border-radius:50%;background:rgba(11,22,34,.26);
}
.ui-faces span::before{
  content:'';position:absolute;left:50%;bottom:-4%;translate:-50% 0;
  width:60%;height:38%;border-radius:99px 99px 0 0;background:rgba(11,22,34,.26);
}
.ui-faces span:first-child{margin-left:0}
.on-dark .ui-faces span{border-color:var(--navy)}

/* la carte de suivi — une métrique, une barre, un nom */
.ui-metric{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r16);
  padding:var(--s16);display:grid;gap:var(--s12);box-shadow:var(--sh1);
}
.ui-metric-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s12)}
.ui-bars{display:flex;align-items:flex-end;gap:var(--s8);height:96px}
.ui-bars i{
  flex:1;max-width:44px;border-radius:4px 4px 0 0;background:var(--blue-pale);
  height:var(--h,30%);transition:height .9s var(--ease);
}
.ui-bars i.hot{background:var(--blue)}

/* le connecteur : une courbe pointillée très pâle, jamais une flèche */
.ui-link{position:absolute;inset:0;pointer-events:none;overflow:visible}
.ui-link path{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:4 5}

/* la barre de progression fine */
.ui-track{height:4px;border-radius:var(--rf);background:rgba(11,22,34,.07);overflow:hidden}
.ui-track i{display:block;height:100%;border-radius:var(--rf);background:var(--blue);
  width:var(--w,0%);transition:width 1.1s var(--ease)}
.on-dark .ui-track{background:rgba(255,255,255,.12)}

/* les cartes sur fond sombre */
.on-dark .ui-card,.on-dark .ui-metric{
  background:rgba(255,255,255,.045);border-color:var(--line-d);box-shadow:none;color:rgba(255,255,255,.92)
}
.on-dark .ui-icon{background:rgba(59,125,240,.18);color:#8FBBFF}
.on-dark .ui-chip i{background:rgba(255,255,255,.09);color:rgba(255,255,255,.55)}

/* ==========================================================================
   9. HERO — le premier ancrage sombre
   ========================================================================== */
.ouv-scene > .hero{
  position:absolute;inset:0;z-index:1;
  display:grid;align-content:center;
  padding-block:calc(var(--nav-h) + var(--s32)) var(--s64);
  transform:scale(var(--z,1.06));transform-origin:50% 45%;
  will-change:transform;
}
.hero{
  position:relative;background:var(--navy);color:rgba(255,255,255,.92);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:-20% 0 0;
  background:radial-gradient(120% 78% at 50% -2%,rgba(59,125,240,.32),transparent 62%);
  transform:translateY(var(--par,0));
  will-change:transform;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(180deg,transparent,var(--paper));
  opacity:0;                          /* la bascule vers le clair se fait plus bas */
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{display:grid;justify-items:center;text-align:center;gap:var(--s24)}
@media (max-width:620px){
  .hero-inner{gap:var(--s20)}
  .hero{padding-block:calc(var(--nav-h) + var(--s48)) var(--s64)}
  .hero .t-lead{font-size:14.5px;line-height:1.5}
  .hero-actions{width:100%;flex-direction:column}
  .hero-actions .btn{justify-content:space-between;width:100%}
  .hero-stats{margin-top:var(--s32)}
}
.hero .t-hero{max-width:16ch}
.hero .t-lead{max-width:min(880px,100%);color:rgba(255,255,255,.62);text-wrap:pretty}
.hero-actions{display:flex;gap:var(--s10);flex-wrap:wrap;justify-content:center;margin-top:var(--s8)}

/* la pastille de créneaux — groupe serré : 6px partout */
.slots{
  display:inline-flex;align-items:center;gap:var(--s10);padding:6px 16px 6px 6px;
  border-radius:var(--rf);border:1px solid var(--line-d2);background:rgba(255,255,255,.05);
  font-size:13px;font-weight:500;color:rgba(255,255,255,.72);
}
.slots b{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(59,125,240,.22);color:#8FBBFF;font-size:12px;font-weight:600;
}

/* la rangée de chiffres sous le hero — serrée entre elles, détachée du reste */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s10);
  margin-top:var(--s48);
}
.hero-stat{
  border:1px solid var(--line-d);border-radius:var(--r16);background:rgba(255,255,255,.04);
  padding:var(--s16) var(--s20);display:grid;gap:var(--s4);
}
.hero-stat b{display:block;font-size:clamp(20px,2.3vw,28px);font-weight:600;letter-spacing:-.035em;color:#fff}
.hero-stat span{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:-.005em}
@media (max-width:760px){ .hero-stats{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================================
   10. CARROUSEL CLIENTS — dans une colonne, il se mesure à elle
   ========================================================================== */
.cf{position:relative;container-type:inline-size;border-radius:var(--r24);padding:var(--s12)}
.cf-stage{position:relative;height:clamp(300px,36cqw + 160px,410px)}
.cf-card{
  position:absolute;left:52%;top:50%;width:min(58cqw,232px);aspect-ratio:3/4;
  transform-origin:100% 100%;
  border-radius:var(--r20);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--sh2);cursor:pointer;
  transition:transform .6s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
}
.cf-card img{width:100%;height:100%;object-fit:cover}
.cf-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,32,0) 42%,rgba(7,19,32,.86));
}
.cf-card .cf-logo{
  position:absolute;left:var(--s16);right:var(--s16);bottom:var(--s16);z-index:2;
  width:auto;max-width:calc(100% - 2 * var(--s16));height:24px;
  object-fit:contain;object-position:left bottom;
  filter:brightness(0) invert(1);
}
.cf-dots{display:flex;gap:var(--s6);justify-content:center;margin-top:var(--s20)}
.cf-dots button{width:6px;height:6px;border-radius:50%;background:rgba(11,22,34,.16);transition:.3s}
.cf-dots button.on{width:20px;border-radius:var(--rf);background:var(--blue)}

/* la fiche client, colonne de droite */
.note{display:grid;gap:var(--s12);align-content:start}
.note-res{
  margin-top:var(--s8);padding-top:var(--s20);border-top:1px solid var(--line);
  display:grid;gap:var(--s10);
}
.note-res div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);font-size:14px}
.note-res b{font-size:16px;color:var(--blue);font-weight:600}
.note > *{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.note.on > *{opacity:1;transform:none}
.note.on > *:nth-child(2){transition-delay:.04s}
.note.on > *:nth-child(3){transition-delay:.08s}
.note.on > *:nth-child(4){transition-delay:.12s}
.note.on > *:nth-child(5){transition-delay:.16s}

/* ==========================================================================
   11. TÉMOIGNAGES ET CAS
   ========================================================================== */
.quote{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r24);
  padding:var(--s32);display:grid;gap:var(--s20);box-shadow:var(--sh1);
}
.quote p{font-size:clamp(16px,1.5vw,19px);line-height:1.45;letter-spacing:-.025em;color:var(--ink);margin:0}
.quote-by{display:flex;align-items:center;gap:var(--s10);padding-top:var(--s16);border-top:1px solid var(--line)}
.quote-by::before{content:'';width:18px;height:1px;background:var(--blue);flex:none}

/* le comparateur avant / après, en deux colonnes lisibles */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10)}
.ba-col{border:1px solid var(--line);border-radius:var(--r20);padding:var(--s24);display:grid;gap:var(--s12);align-content:start}
.ba-col--after{background:var(--card);box-shadow:var(--sh2)}
.ba-col ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s10)}
.ba-col li{display:grid;grid-template-columns:16px 1fr;gap:var(--s10);font-size:14px;line-height:1.4;color:var(--ink-soft)}
.ba-col li svg{width:16px;height:16px;margin-top:2px;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba-col--before li svg{stroke:var(--ink-mute)}
.ba-col--after li svg{stroke:var(--blue)}
.ba-col--after li{color:var(--ink)}
@media (max-width:620px){ .ba{grid-template-columns:1fr} }

/* ==========================================================================
   12. FAQ — accordéon, filets fins, rien d'autre
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s24) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s24);
  font-size:16px;font-weight:500;letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  flex:none;width:26px;height:26px;border-radius:50%;background:rgba(11,22,34,.05);
  display:grid;place-items:center;font-style:normal;font-size:15px;color:var(--ink-soft);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.faq details[open] summary i{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-a{padding:0 0 var(--s24);max-width:64ch}

/* ==========================================================================
   13. SIMULATEUR — le deuxième ancrage sombre
   ========================================================================== */
.sim{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s48);align-items:start}
.sim-field{display:grid;gap:var(--s10);padding-block:var(--s16);border-bottom:1px solid var(--line-d)}
.sim-field:first-child{padding-top:0}
.sim-label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16)}
.sim-label span{font-size:14px;font-weight:500;color:rgba(255,255,255,.8)}
.sim-label b{font-size:15px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.sim-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:var(--rf);
  background:rgba(255,255,255,.16);outline:none;
}
.sim-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  border:4px solid var(--blue);cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.sim-out{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r24);
  padding:var(--s24);display:grid;gap:var(--s18);
  box-shadow:0 34px 76px -34px rgba(4,11,20,.95), inset 0 1px 0 rgba(255,255,255,.10);
}
.sim-total{font-size:clamp(34px,4.4vw,58px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.sim-leaks{display:grid;gap:8px}
.sim-leak-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);font-size:13.5px}
.sim-leak-top b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .sim{grid-template-columns:1fr;gap:var(--s32)} }

/* ==========================================================================
   14. ENTRÉES AU SCROLL — discrètes. 8px, pas 40.
   ========================================================================== */
.rv{opacity:0;transform:translateY(10px)}
html.anim .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.anim .rv.in,html:not(.anim) .rv{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1!important;transform:none!important} }

/* le dirigeant, juste sous le nom de l'entreprise — même groupe, donc serré */
.note-qui{margin-top:calc(var(--s8) * -1);color:var(--ink-mute)}

/* ==========================================================================
   15. LA BASCULE DU SIMULATEUR — aujourd'hui / au standard
   ========================================================================== */
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding:4px;border-radius:var(--rf);border:1px solid var(--line-d);
  background:rgba(255,255,255,.05);justify-self:start;
}
.seg button{
  position:relative;z-index:2;padding:8px 18px;border-radius:var(--rf);
  font-size:13px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
  color:rgba(255,255,255,.6);transition:color .35s var(--ease);
}
.seg button.on{color:var(--navy-deep)}
.seg-pill{
  position:absolute;z-index:1;top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);border-radius:var(--rf);background:#fff;
  transition:transform .45s var(--ease);
}
.seg.is-2 .seg-pill{transform:translateX(100%)}

/* le total change de valeur : on l'accompagne, on ne le fait pas sauter */
.sim-total{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sim-total.swap{opacity:0;transform:translateY(6px)}
.sim-total.gain{color:#8FBBFF}

/* la ligne de projection : deux montants et la flèche entre les deux */
.sim-hyp{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s4)}
.sim-hyp span{
  font-size:11.5px;font-weight:500;color:rgba(255,255,255,.6);
  border:1px solid var(--line-d);border-radius:var(--rf);padding:4px 10px;
}
@media (max-width:420px){ .seg button{padding:8px 12px;font-size:12.5px} }

/* les trois leviers, avant -> après : c'est la démonstration, elle doit se lire d'un trait */
/* la table de projection est bâtie avec .srow — voir le bloc 57 */

/* ==========================================================================
   16. TÉMOIGNAGES VIDÉO — un éventail, pas une rangée
   Cinq cartes verticales disposées en arc : celle du centre est droite et
   plus grande, les autres s'inclinent et descendent à mesure qu'elles
   s'éloignent. Au survol, une carte se redresse et passe devant.
   ========================================================================== */
.vwall{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(-30px,-2.4vw,-10px);
  padding-top:var(--s24);
  perspective:1400px;
}
.vcard{
  flex:none;width:clamp(150px,15.5vw,210px);
  transform-origin:50% 100%;
  transform:rotate(var(--r,0deg)) translateY(var(--y,0)) scale(var(--s,1));
  transition:transform .6s var(--ease),filter .6s var(--ease);
  filter:brightness(var(--b,1));
  z-index:var(--z,1);
  display:grid;gap:var(--s10);
}
/* l'arc : plus on s'éloigne du centre, plus la carte s'incline et descend */
.vcard:nth-child(1){--r:-11deg;--y:62px;--s:.84;--b:.72;--z:1}
.vcard:nth-child(2){--r:-5.5deg;--y:24px;--s:.92;--b:.86;--z:2}
.vcard:nth-child(3){--r:0deg;--y:0px;--s:1;--b:1;--z:3}
.vcard:nth-child(4){--r:5.5deg;--y:24px;--s:.92;--b:.86;--z:2}
.vcard:nth-child(5){--r:11deg;--y:62px;--s:.84;--b:.72;--z:1}

.vwall:hover .vcard{filter:brightness(.6)}
.vcard:hover{
  --r:0deg!important;--y:-14px!important;--s:1.07!important;
  filter:brightness(1.08)!important;z-index:9!important;
}

.vcard-media{
  position:relative;aspect-ratio:9/16;border-radius:var(--r20);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(165deg,#1B4F9E,#0B1A2A);
  box-shadow:0 26px 60px -24px rgba(4,11,20,.9), inset 0 1px 0 rgba(255,255,255,.10);
  cursor:pointer;
}
.vcard-media img{width:100%;height:100%;object-fit:cover}
.vcard-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,32,0) 42%,rgba(7,19,32,.84))}
.vcard-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--navy-deep);font-size:14px;
  box-shadow:0 8px 24px rgba(7,19,32,.5);
  transition:transform .35s var(--ease);
}
.vcard-media:hover .vcard-play{transform:scale(1.1)}
.vcard-media.is-soon{cursor:default}
.vcard-media.is-soon .vcard-play{
  width:auto;height:auto;padding:6px 13px;border-radius:var(--rf);
  font-size:10.5px;font-weight:500;background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);border:1px solid var(--line-d2);box-shadow:none;
}
/* la citation vit SUR la carte, pas en dessous : le bloc reste graphique */
.vcard-q{
  position:absolute;left:var(--s12);right:var(--s12);bottom:var(--s12);z-index:2;
  margin:0;font-size:11.5px;line-height:1.35;color:#fff;
  text-shadow:0 2px 12px rgba(4,11,20,.9);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.vcard:hover .vcard-q{opacity:1;transform:none}
.vcard-by{
  display:flex;align-items:center;gap:var(--s8);justify-content:center;
  padding-top:0;border:0;
}
.vcard-by::before{content:'';width:14px;height:1px;background:var(--blue);flex:none}
.vcard-by .t-small{font-size:10.5px}

@media (max-width:900px){
  .vwall{
    display:grid;grid-auto-flow:column;grid-auto-columns:min(66vw,240px);
    gap:var(--s12);overflow-x:auto;scroll-snap-type:x proximity;
    perspective:none;padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);scroll-padding-inline-start:var(--gut);
  }
  .vwall::-webkit-scrollbar{display:none}
  .vcard{width:auto;scroll-snap-align:start;transform:none!important;filter:none!important}
  .vcard-q{position:static;opacity:1;transform:none;color:var(--ink);text-shadow:none;font-size:13px}
  .vwall:hover .vcard{filter:none}
}

/* ==========================================================================
   17. LA COUCHE DE FINITION
   Rien ne change dans la structure ni dans le copy. Tout se joue ici :
   la matière, la profondeur, et la façon dont les choses arrivent.
   ========================================================================== */

/* --- 17.1 Révélation mot à mot des titres -------------------------------
   C'est le signal le plus net d'un site cher : un titre n'apparaît pas,
   il se pose. Flou + montée + décalage de 42 ms par mot. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
   padding-bottom:.16em;margin-bottom:-.16em}
.w > i{
  display:inline-block;font-style:inherit;font-weight:inherit;
  transform:translateY(105%) rotate(2deg);filter:blur(5px);opacity:0;
  transition:transform .82s cubic-bezier(.16,1,.3,1),
             filter   .62s cubic-bezier(.16,1,.3,1),
             opacity  .62s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.in .w > i, .w.in > i{transform:none;filter:blur(0);opacity:1}

/* --- 17.2 Grain : la texture qui enlève l'aspect « aplat écran » -------- */
body::after{
  content:'';position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 17.3 Les rideaux : les sections sombres montent par-dessus le clair
   Le bord franc faisait « deux blocs collés ». Un coin arrondi qui recouvre
   la section précédente crée la profondeur qu'il cherchait. */
.band--dark{
  border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0 0;
  margin-top:calc(clamp(20px,3vw,40px) * -1);
  box-shadow:0 -30px 60px -30px rgba(7,16,27,.5);
}
#cta{border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0 0}
/* la section qui précède un rideau doit respirer davantage : sinon la dernière
   ligne de texte vient toucher le bord sombre */
.band:has(+ .band--dark){padding-bottom:calc(var(--sec) + clamp(24px,4vw,52px))}
@supports not selector(:has(*)){
  #voix,#modele{padding-bottom:calc(var(--sec) + clamp(24px,4vw,52px))}
}
/* halo froid au sommet du rideau : la lumière semble venir de derrière */
.band--dark::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  /* la lueur descend de -14 % : calée sur 0 %, son bord supérieur coïncidait
     avec le raccord des sections et le soulignait */
  background:radial-gradient(120% 62% at 50% -14%,rgba(59,125,240,.16),transparent 62%);
}
.band--dark > .wrap{position:relative;z-index:2}

/* --- 17.4 Les cartes se soulèvent ------------------------------------- */
.ui-card,.quote,.vcard-media,.hero-stat{
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
             border-color .5s var(--ease);
}
.ui-card:hover,.quote:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--line-2)}
.vcard-media:hover{transform:translateY(-4px);box-shadow:var(--sh3)}
.hero-stat:hover{transform:translateY(-3px);border-color:var(--line-d2);background:rgba(255,255,255,.06)}

/* --- 17.5 Boutons magnétiques + reflet au survol ----------------------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .8s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn--light::before{background:linear-gradient(105deg,transparent 38%,rgba(11,22,34,.10) 50%,transparent 62%)}

/* --- 17.6 Chiffres : chasse fixe, ils ne doivent jamais sautiller ------ */
.hero-stat b,.sim-total,.srow-val,.note-res b{font-variant-numeric:tabular-nums}

/* --- 17.7 Typographie : équilibrage des lignes et césure propre -------- */
.t-hero,.t-h2,.t-h3,.quote p,.spot-q{text-wrap:balance}
.t-lead,.t-body{text-wrap:pretty}
html{hyphens:none}

/* --- 17.8 États de focus visibles — c'est aussi un signe de finition --- */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;
}
.on-dark :where(a,button,summary,input):focus-visible{outline-color:#8FBBFF}

/* --- 17.9 Le curseur dit ce qui est cliquable ------------------------- */
.cf-card,.vcard-media:not(.is-soon),.seg button{cursor:pointer}

/* --- 17.10 On respecte ceux qui coupent les animations ----------------- */
@media (prefers-reduced-motion:reduce){
  .w > i{transform:none!important;filter:none!important;opacity:1!important}
  .btn::before{display:none}
  .ui-card:hover,.quote:hover,.vcard-media:hover,.hero-stat:hover{transform:none}
}

/* --- 17.11 Détails qui ne se voient pas mais qui se sentent ------------- */

/* la citation démarre sur son guillemet, pas sur son retrait */
.vcard-q,.quote p{hanging-punctuation:first}

/* la barre de défilement fait partie du décor */
@supports (scrollbar-color: auto){
  html{scrollbar-color:rgba(11,22,34,.22) transparent;scrollbar-width:thin}
}

/* les curseurs du simulateur : la poignée réagit sous le doigt */
.sim-field input[type=range]::-webkit-slider-thumb{
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.sim-field input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.sim-field input[type=range]:active::-webkit-slider-thumb{
  transform:scale(1.2);cursor:grabbing;box-shadow:0 0 0 8px rgba(59,125,240,.18);
}
/* la ligne du curseur se teinte à gauche de la poignée */
.sim-field{position:relative}
.sim-field input[type=range]{
  background:linear-gradient(90deg,var(--blue) var(--p,0%),rgba(255,255,255,.16) var(--p,0%));
}

/* l'accordéon s'ouvre au lieu de sauter */
.faq details[open] .faq-a{animation:ouvre .5s var(--ease) both}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:color .25s var(--ease)}
.faq summary:hover{color:var(--blue)}

/* le lien du menu : le point actif grandit au lieu d'apparaître */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;left:50%;bottom:3px;translate:-50% 0;
  width:0;height:2px;border-radius:2px;background:var(--blue);
  transition:width .35s var(--ease);
}
.nav-links a.on::after{width:14px}
.nav.over-dark .nav-links a.on::after{background:#8FBBFF}

/* la carte client active se détache franchement des autres */
.cf-card{transition:transform .6s var(--ease),opacity .6s var(--ease),
  filter .6s var(--ease),box-shadow .6s var(--ease)}

/* le pied de page ferme proprement sous le rideau sombre */
footer{background:var(--navy);color:rgba(255,255,255,.55);border-top:0}
footer img{filter:brightness(0) invert(1);opacity:.8}
footer .t-xs{color:rgba(255,255,255,.45)}

/* --- 17.12 Les grilles internes doivent pouvoir rétrécir ----------------
   Un enfant de grille a min-width:auto par défaut : il refuse de passer sous
   la largeur de son texte et pousse tout le bloc hors de l'écran. */
.ui,.ui *,.ui-metric,.ui-metric *{min-width:0}
@media (max-width:560px){
  .ui > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .ui{padding:var(--s20)}
}

/* ==========================================================================
   18. L'OUVERTURE — on entre dans le site en traversant le logo
   Reproduction en natif du geste de la landing GTA VI : une plaque navy
   percée à la forme du lettrage, dont le trou grandit au scroll jusqu'à
   engloutir l'écran. Zéro dépendance, zéro bibliothèque d'animation.
   ========================================================================== */
.ouv{position:relative;height:320vh;background:var(--navy-deep)}
/* voile navy de fin de plan : le raccord avec le hero ne se voit pas */
.ouv-scene{position:sticky;top:0;height:100vh;overflow:hidden}

/* le plan de fond : une image, légèrement poussée pour donner de la profondeur */
.ouv-fond{
  position:absolute;inset:-6%;
  background:url(../assets/img/photos/band-appel.jpg) center/cover no-repeat;
  transform:scale(var(--z,1.14));
  transition:transform .1s linear;
  will-change:transform;
}
.ouv-scene::after{                       /* vignette : le regard reste au centre */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(6,14,22,.78) 100%);
}

/* la plaque percée : deux masques, l'un plein, l'autre en forme de lettres,
   combinés en « exclusion » — c'est ce qui creuse le trou. */
.ouv-voile{
  position:absolute;inset:0;z-index:3;background:var(--navy-deep);
  --taille:34vw;
  -webkit-mask-image:linear-gradient(#000,#000),url(../assets/img/wordmark-mask.svg);
          mask-image:linear-gradient(#000,#000),url(../assets/img/wordmark-mask.svg);
  -webkit-mask-size:100% 100%,var(--taille) auto;
          mask-size:100% 100%,var(--taille) auto;
  -webkit-mask-position:center,center;
          mask-position:center,center;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  will-change:mask-size;
}
@media (max-width:760px){ .ouv-voile{--taille:76vw} }

.ouv-bas{
  position:absolute;left:0;right:0;bottom:clamp(24px,5vh,54px);z-index:4;
  display:grid;justify-items:center;gap:var(--s12);
  opacity:var(--hint,1);transition:opacity .4s var(--ease);
}
.ouv-hint{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.ouv-hint::after{
  content:'';display:block;width:1px;height:26px;margin:10px auto 0;
  background:linear-gradient(rgba(255,255,255,.55),transparent);
  animation:filet 1.9s ease-in-out infinite;
}
@keyframes filet{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* la barre de menu n'apparaît qu'une fois l'ouverture traversée */
.nav{opacity:0;pointer-events:none;transform:translate(-50%,-14px)}
.nav.vu{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media (max-width:860px){
  .nav{transform:translateY(-14px)}
  .nav.vu{transform:none}
}

/* sans JavaScript ou en mouvement réduit, l'ouverture reste une belle image fixe */
@media (prefers-reduced-motion:reduce){
  .ouv{height:100vh}
  .ouv-voile{--taille:34vw}
  .ouv-hint::after{animation:none}
}
html:not(.anim) .ouv{height:100vh}
html:not(.anim) .nav{opacity:1;pointer-events:auto;transform:translate(-50%,0)}


/* ====== ce qui vient de la passe cinéma et qu'on garde : la page d'accueil ====== */
/* ==========================================================================
   18. L'OUVERTURE — on entre dans le site en traversant le logo
   Reproduction en natif du geste de la landing GTA VI : une plaque navy
   percée à la forme du lettrage, dont le trou grandit au scroll jusqu'à
   engloutir l'écran. Zéro dépendance, zéro bibliothèque d'animation.
   ========================================================================== */
.ouv{position:relative;height:320vh;background:var(--navy-deep)}

.ouv-scene{position:sticky;top:0;height:100vh;overflow:hidden}

/* le plan de fond : une image, légèrement poussée pour donner de la profondeur */
/* plus de photo intermédiaire : derrière les lettres, il y a le hero — et il est
   déjà en place, sinon on ne verrait qu'un aplat à travers le lettrage. */
.ouv-scene .rv{opacity:1!important;transform:none!important}
.ouv-scene .w > i{transform:none!important;filter:none!important;opacity:1!important}
.ouv-scene::after{                       /* vignette : le regard reste au centre */
  z-index:2;
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(130% 100% at 50% 45%,transparent 45%,rgba(6,14,22,.55) 100%);
  opacity:calc(1 - var(--fin,0));
}

/* la plaque percée : deux masques, l'un plein, l'autre en forme de lettres,
   combinés en « exclusion » — c'est ce qui creuse le trou. */
.ouv-voile{
  position:absolute;inset:0;z-index:3;background:#040B14;
  --taille:34vw;
  -webkit-mask-image:linear-gradient(#000,#000),url(../assets/img/wordmark-mask.svg);
          mask-image:linear-gradient(#000,#000),url(../assets/img/wordmark-mask.svg);
  -webkit-mask-size:100% 100%,var(--taille) auto;
          mask-size:100% 100%,var(--taille) auto;
  -webkit-mask-position:center,center;
          mask-position:center,center;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  /* En grandissant, ce sont les intervalles ENTRE les lettres qui subsistent :
     l'échelle seule ne fait jamais disparaître la plaque. Elle se dissout donc
     sur la fin de la course. */
  opacity:var(--voile,1);
  will-change:mask-size,opacity;
}
@media (max-width:760px){ .ouv-voile{--taille:76vw} }

/* Le logo est PLEIN et BLANC à l'arrêt. Dès que le scroll démarre, ce calque
   s'efface et les mêmes lettres deviennent la fenêtre sur le site. Il partage
   la taille du masque, donc le raccord est exact au pixel. */
.ouv-marque{
  position:absolute;inset:0;z-index:4;pointer-events:none;background:#fff;
  -webkit-mask-image:url(../assets/img/wordmark-mask.svg);
          mask-image:url(../assets/img/wordmark-mask.svg);
  -webkit-mask-size:var(--taille,34vw) auto;
          mask-size:var(--taille,34vw) auto;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:var(--marque,1);
}

.ouv-bas{
  position:absolute;left:0;right:0;bottom:clamp(24px,5vh,54px);z-index:4;
  display:grid;justify-items:center;gap:var(--s12);
  opacity:var(--hint,1);transition:opacity .4s var(--ease);
}
.ouv-hint{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.66);text-align:center;
}
.ouv-hint::after{
  content:'';display:block;width:1px;height:26px;margin:10px auto 0;
  background:linear-gradient(rgba(255,255,255,.55),transparent);
  animation:filet 1.9s ease-in-out infinite;
}
@keyframes filet{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* --- l'invitation à descendre -------------------------------------------
   Un filet d'un pixel qui respire, personne ne le lit comme « fais défiler ».
   Ici : la molette avec sa bille qui tombe, et le chevron qui acquiesce en
   dessous. C'est le seul signe que tout le monde reconnaît sans légende. */
.ouv-hint::after{display:none}
.ouv-molette{display:grid;justify-items:center;gap:8px;margin-top:var(--s10)}
.ouv-souris{
  position:relative;display:block;width:23px;height:36px;border-radius:12px;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.32);
}
.ouv-souris b{
  position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.9);transform:translateX(-50%);
  animation:bille 2.1s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes bille{
  0%      {transform:translate(-50%,0);opacity:0}
  18%     {opacity:1}
  62%     {transform:translate(-50%,15px);opacity:1}
  86%,100%{transform:translate(-50%,15px);opacity:0}
}
.ouv-chev{
  width:17px;height:17px;fill:none;stroke:rgba(255,255,255,.42);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  animation:chev 2.1s ease-in-out infinite;
}
@keyframes chev{
  0%,100%{transform:translateY(-2px);opacity:.35}
  55%    {transform:translateY(2px);opacity:.85}
}
@media (max-width:900px){
  /* pas de molette sur un téléphone : le chevron seul dit la même chose */
  .ouv-souris{display:none}
  .ouv-chev{width:20px;height:20px;stroke-width:1.9}
}
@media (prefers-reduced-motion:reduce){
  .ouv-souris b,.ouv-chev{animation:none}
}

/* la barre de menu n'apparaît qu'une fois l'ouverture traversée */
.nav{opacity:0;pointer-events:none;transform:translateY(-14px)}
.nav.vu{opacity:1;pointer-events:auto;transform:none}

/* sans JavaScript ou en mouvement réduit, l'ouverture reste une belle image fixe */
@media (prefers-reduced-motion:reduce){
  .ouv{height:100vh}
  .ouv-voile{--taille:34vw}
  .ouv-hint::after{animation:none}
}
html:not(.anim) .ouv{height:100vh}
html:not(.anim) .nav{opacity:1;pointer-events:auto;transform:translate(-50%,0)}


/* ==========================================================================
   20. LES CHIFFRES EN BENTO
   Référence : stats-bento. Une dominante sombre à texture rayée, trois
   satellites clairs de tailles inégales. La hiérarchie fait le travail.
   ========================================================================== */
.bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s12);
  margin-top:var(--s48);
}
.bento > *{
  border-radius:var(--r20);border:1px solid var(--line-d);
  background:rgba(255,255,255,.045);padding:var(--s24);
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.bento > *:hover{transform:translateY(-3px);border-color:var(--line-d2);background:rgba(255,255,255,.07)}

/* la dominante : plus grande, plus sombre, et texturée en diagonale */
.bento-a{
  grid-column:span 7;grid-row:span 2;position:relative;overflow:hidden;
  display:grid;align-content:space-between;gap:var(--s20);
  background:linear-gradient(155deg,#0E2338,#071320);
  border-color:rgba(255,255,255,.10);
  padding:var(--s32);
}
.bento-a::after{                       /* les rayures, très discrètes */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
}
.bento-a > *{position:relative;z-index:2}
.bento-a b{font-size:clamp(44px,6.4vw,86px);font-weight:600;letter-spacing:-.045em;line-height:.92;color:#fff}
.bento-a p{max-width:26ch}
.bento-chip{
  justify-self:start;font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.10);border-radius:var(--rf);padding:6px 13px;
}
.bento-lab{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

.bento-b{grid-column:span 5;display:grid;gap:var(--s16);align-content:center}
.bento-b-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s20)}
.bento-b b{font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}

/* le petit graphe en bâtons de la carte « pôles pilotés » */
.spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.spark i{width:4px;border-radius:2px;background:rgba(143,187,255,.55);display:block}

.bento-c{grid-column:span 5;display:grid;gap:var(--s6);align-content:center}
.bento-c b{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}

.bento-d{grid-column:1/-1;display:flex;align-items:center;gap:var(--s16)}
.bento-d b{display:block;font-size:15px;font-weight:600;color:#fff;letter-spacing:-.02em}
.bento-pill{
  flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(59,125,240,.20);border:1px solid rgba(143,187,255,.32);
  color:#8FBBFF;font-size:15px;font-weight:600;letter-spacing:-.02em;
}
@media (max-width:820px){
  .bento{gap:var(--s10)}
  .bento-a{grid-column:1/-1;grid-row:auto}
  .bento-b,.bento-c,.bento-d{grid-column:1/-1}
  .bento-a{padding:var(--s24)}
}

/* --- le badge de preuve du hero : de vrais logos clients --------------- */
.tbadge{
  display:inline-flex;align-items:center;gap:var(--s12);
  padding:4px 15px 4px 4px;border-radius:var(--rf);
  border:1px solid var(--line-d2);background:rgba(255,255,255,.05);
}
.tbadge-logos{display:flex;align-items:center}
.tbadge-logos img{
  width:23px;height:23px;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:1.5px solid rgba(11,26,42,.92);margin-left:-8px;
  box-shadow:0 2px 6px rgba(4,11,20,.5);
  transition:transform .35s var(--ease),z-index .01s;
}
.tbadge-logos img:first-child{margin-left:0}
.tbadge-logos img:hover{transform:translateY(-2px) scale(1.1);z-index:2}
.tbadge-txt{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.58);letter-spacing:-.005em}
@media (max-width:620px){
  /* Le bandeau prenait toute la largeur et sa phrase partait sur deux lignes,
     collée aux avatars. Il se resserre : pastilles plus petites, texte plus
     court à l'œil, et il ne s'étire plus que sur ce dont il a besoin. */
  .tbadge{
    padding:5px 14px 5px 5px;gap:9px;
    max-width:100%;align-items:center;
  }
  .tbadge-logos img{width:19px;height:19px;margin-left:-6px;border-width:1.5px}
  .tbadge-txt{font-size:11px;line-height:1.3;text-align:left}
}


/* ==========================================================================
   21. LA LIGNE DE SCAN — le logo est vivant avant même qu'on scrolle
   Référence : hero-futuristic. La bande lumineuse est posée SOUS la plaque :
   elle n'est donc visible qu'à travers les lettres.
   ========================================================================== */
.ouv-scan{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  /* le balayage n'existe que pour animer le lettrage : il s'éteint avec la plaque */
  opacity:var(--voile,1);
  background:linear-gradient(180deg,
    transparent 0%, rgba(143,187,255,0) 42%,
    rgba(143,187,255,.55) 50%, rgba(255,255,255,.75) 51%,
    rgba(143,187,255,.55) 52%, rgba(143,187,255,0) 60%, transparent 100%);
  background-size:100% 260%;
  animation:balayage 4.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes balayage{
  0%,12%   {background-position:0 -130%}
  62%,100% {background-position:0 130%}
}
@media (prefers-reduced-motion:reduce){ .ouv-scan{animation:none;opacity:.25} }

/* ==========================================================================
   22. LE CURSEUR MAGNÉTIQUE
   Référence : magnetic-cursor. Un point qui colle au pointeur, un anneau qui
   traîne derrière et s'ouvre au survol de ce qui est cliquable.
   ========================================================================== */
.curseur{position:fixed;inset:0;z-index:95;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){
  .curseur{display:block}
  html.curseur-perso, html.curseur-perso *{cursor:none!important}
}
.curseur i,.curseur b{
  position:absolute;left:0;top:0;border-radius:50%;
  transform:translate(-50%,-50%);will-change:transform;
}
.curseur i{width:6px;height:6px;background:var(--blue)}
.curseur b{
  width:34px;height:34px;border:1px solid rgba(11,22,34,.28);
  transition:width .3s var(--ease),height .3s var(--ease),
             border-color .3s var(--ease),background .3s var(--ease);
}
html.sur-sombre .curseur b{border-color:rgba(255,255,255,.4)}
html.sur-sombre .curseur i{background:#8FBBFF}
html.curseur-actif .curseur b{width:56px;height:56px;background:rgba(59,125,240,.10);border-color:var(--blue)}
@media (prefers-reduced-motion:reduce){ .curseur{display:none!important} }


/* la barre n'entre en scène qu'une fois l'ouverture traversée */
.nav{opacity:0;pointer-events:none;transform:translateY(-14px)}
.nav.vu{opacity:1;pointer-events:auto;transform:none}
html:not(.anim) .nav{opacity:1;pointer-events:auto;transform:none}

/* ==========================================================================
   23. LA MATIÈRE — relevé sur lagenced2s.com
   Ce qui sépare « propre » de « cher » n'est pas la mise en page, c'est le
   traitement des surfaces. Mesuré sur le site de Salim :
     · 77 éléments en blur(16px)          -> il y a de la lumière partout
     · 27 en backdrop-blur(8px)            -> le verre n'est pas réservé au menu
     · 36 avec une lueur d'accent 0 0 6-12px
     · 22 ombres à DEUX couches + un liseré clair en inset
     · une majorité de textes entre 9 et 14 px
   ========================================================================== */

:root{
  /* ombres à deux couches, plus le liseré de lumière sur l'arête haute */
  --sh1:0 1px 2px rgba(11,22,34,.05),
        inset 0 1px 0 rgba(255,255,255,.92);
  --sh2:0 8px 22px -6px rgba(11,22,34,.16), 0 2px 6px rgba(11,22,34,.05),
        inset 0 1px 0 rgba(255,255,255,.92);
  --sh3:0 22px 48px -14px rgba(11,22,34,.24), 0 4px 12px rgba(11,22,34,.07),
        inset 0 1px 0 rgba(255,255,255,.92);
  /* la lueur d'accent : c'est elle qui fait « allumé » */
  --lum:0 0 12px rgba(59,125,240,.42);
  --lum-fort:0 0 20px rgba(59,125,240,.55);
}

/* --- 23.1 Les surfaces sombres portent leur propre liseré --------------- */
.on-dark .ui-card,.on-dark .ui-metric,.bento > *,.sim-out,.hero-stat,.slots,.tbadge,.seg{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -12px rgba(4,11,20,.6);
  backdrop-filter:blur(8px);
}

/* --- 23.2 Les objets d'accent émettent de la lumière -------------------- */
.ui-icon,.bento-pill,.cf-dots button.on,.btn--blue,
.ba-col--after .t-eyebrow,.tbadge-logos{position:relative}
.ui-icon{box-shadow:var(--lum)}
.on-dark .ui-icon{box-shadow:var(--lum-fort)}
.bento-pill{box-shadow:var(--lum-fort), inset 0 1px 0 rgba(255,255,255,.14)}
.cf-dots button.on{box-shadow:var(--lum)}
.ui-track i{box-shadow:0 0 8px rgba(59,125,240,.5)}
.sim-field input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 0 rgba(59,125,240,0),0 0 14px rgba(59,125,240,.55)}
.spark i{box-shadow:0 0 6px rgba(143,187,255,.45)}
.sim-total.gain{text-shadow:0 0 26px rgba(59,125,240,.55)}
.bento-a b{text-shadow:0 0 34px rgba(78,148,255,.35)}

/* --- 23.3 De la lumière derrière les sections claires aussi ------------- */
.band:not(.band--dark)::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 34% at 12% 8%,rgba(59,125,240,.055),transparent 70%),
    radial-gradient(38% 30% at 92% 82%,rgba(59,125,240,.045),transparent 72%);
}
.band > .wrap{position:relative;z-index:1}

/* --- 23.4 Le verre s'étend aux cartes claires --------------------------- */
.ui-card,.ui-metric,.quote,.vcard-media{
  backdrop-filter:blur(6px);
  background-color:rgba(255,255,255,.86);
}
/* :not(.ui--plain) — sans ça, ces reprises de fond, écrites plus bas dans la
   feuille, redonnaient un panneau à la carte déclarée sans panneau */
.ui:not(.ui--plain){background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(245,247,249,.75))}

/* --- 23.5 Les micro-libellés : plus petits, plus espacés, plus nombreux -
   Le relevé montre une majorité de textes entre 9 et 14 px. Nos étiquettes
   étaient trop grosses pour donner cette impression de densité maîtrisée. */
.t-xs{font-size:11.5px;letter-spacing:.005em}
.t-eyebrow{font-size:10px;letter-spacing:.2em}
.ui-chip i{font-size:10px}
.bento-lab{font-size:10px;letter-spacing:.18em}
.cn-eyebrow,.tbadge-txt{font-size:11.5px}
.sim-leak-top{font-size:13px}

/* --- 23.6 Les boutons ont du relief ------------------------------------ */
.btn{box-shadow:0 6px 18px -6px rgba(11,22,34,.45), inset 0 1px 0 rgba(255,255,255,.14)}
.btn--light{box-shadow:0 8px 22px -6px rgba(4,11,20,.5), inset 0 1px 0 rgba(255,255,255,.9)}
.btn:hover{box-shadow:0 12px 30px -8px rgba(11,22,34,.5), inset 0 1px 0 rgba(255,255,255,.18)}

/* ==========================================================================
   24. LA DENSITÉ DU HERO — d'après lagenced2s.com
   Son hero empile huit strates de micro-preuve là où le mien en avait quatre.
   C'est cette densité maîtrisée qui fait la différence, pas la taille du titre.
   ========================================================================== */

/* ==========================================================================
   26. LA MISE EN PLACE DU SYSTÈME
   Les quatre pièces s'installent UNE FOIS et restent en place — elles ne
   doivent jamais disparaître. Ce qui tourne en boucle ensuite, c'est le
   système EN MARCHE : le balayage, les icônes qui s'allument à tour de rôle,
   les filets qui pulsent. Le montage se fait une fois, la vie continue.
   ========================================================================== */
#install{background:none;border:0;padding:0}     /* plus de cadre autour : les pièces flottent */
.pose{--T:7s;position:relative}

/* --- l'installation : une seule fois, sans retour en arrière ------------ */
.pose .ui-card{
  position:relative;
  opacity:0;transform:translate(var(--dx),20px) scale(.94);filter:blur(7px);
}
.pose.joue .ui-card{
  animation:poseCarte .95s cubic-bezier(.16,1,.3,1) forwards;
}
.pose .ui-card:nth-child(2){--dx:-38px}
.pose.joue .ui-card:nth-child(2){animation-delay:.05s}
.pose .ui-card:nth-child(3){--dx: 38px}
.pose.joue .ui-card:nth-child(3){animation-delay:.45s}
.pose .ui-card:nth-child(4){--dx:-38px}
.pose.joue .ui-card:nth-child(4){animation-delay:.85s}
.pose .ui-card:nth-child(5){--dx: 38px}
.pose.joue .ui-card:nth-child(5){animation-delay:1.25s}

@keyframes poseCarte{
  0%  {opacity:0;transform:translate(var(--dx),20px) scale(.94);filter:blur(7px)}
  70% {opacity:1;transform:translateY(-3px) scale(1);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* --- le filet entre deux pièces : tracé une fois, puis il pulse --------- */
.pose .ui-card + .ui-card::before{
  content:'';position:absolute;left:50%;top:-13px;width:1.5px;height:13px;
  background:linear-gradient(var(--blue),rgba(59,125,240,.18));
  transform-origin:top center;transform:scaleY(0);
  box-shadow:0 0 6px rgba(59,125,240,.5);
}
.pose.joue .ui-card + .ui-card::before{
  animation:poseFil .5s ease-out forwards, filPulse var(--T) ease-in-out infinite 2s;
}
.pose.joue .ui-card:nth-child(3)::before{animation-delay:.35s, 2s}
.pose.joue .ui-card:nth-child(4)::before{animation-delay:.75s, 2.15s}
.pose.joue .ui-card:nth-child(5)::before{animation-delay:1.15s, 2.3s}
@keyframes poseFil{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes filPulse{
  0%,70%,100%{opacity:.45}
  78%        {opacity:1;box-shadow:0 0 12px rgba(59,125,240,.9)}
}

/* --- les icônes s'allument à tour de rôle, indéfiniment ----------------- */
.pose.joue .ui-icon{animation:poseIcone var(--T) ease-out infinite}
.pose.joue .ui-card:nth-child(2) .ui-icon{animation-delay:1.6s}
.pose.joue .ui-card:nth-child(3) .ui-icon{animation-delay:1.85s}
.pose.joue .ui-card:nth-child(4) .ui-icon{animation-delay:2.1s}
.pose.joue .ui-card:nth-child(5) .ui-icon{animation-delay:2.35s}
@keyframes poseIcone{
  0%,88%,100%{box-shadow:var(--lum);transform:scale(1)}
  93%        {box-shadow:0 0 0 7px rgba(59,125,240,.16),0 0 22px rgba(59,125,240,.65);transform:scale(1.06)}
}

/* --- le balayage : le système tourne ------------------------------------ */
.pose-socle{
  position:absolute;inset:-10px -16px;z-index:0;pointer-events:none;
  border-radius:var(--r24);overflow:hidden;
}
.pose-socle::after{
  content:'';position:absolute;left:0;right:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(59,125,240,.13),transparent);
  top:-40%;
}
.pose.joue .pose-socle::after{animation:poseBalayage var(--T) cubic-bezier(.5,0,.4,1) infinite 2s}
@keyframes poseBalayage{
  0%,55% {top:-40%;opacity:0}
  60%    {opacity:1}
  92%    {top:100%;opacity:1}
  96%,100%{top:100%;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .pose .ui-card{opacity:1;transform:none;filter:none;animation:none!important}
  .pose .ui-card + .ui-card::before{transform:scaleY(1);animation:none!important}
  .pose .ui-icon{animation:none!important}
  .pose-socle{display:none}
}

/* ==========================================================================
   27. LES ACTES — à partir du constat, chaque section recouvre la précédente
   Le principe de la landing GTA : on ne défile pas d'un bloc à l'autre, la
   section suivante MONTE PAR-DESSUS pendant que la précédente recule.
   Le fond reste peint par la section elle-même : aucune transparence possible.
   ========================================================================== */
#preuve > .wrap,#methode > .wrap,#chiffres > .wrap,#equipe > .wrap{
  transform:none!important;filter:none!important;
}
/* Les coins arrondis et le décalage négatif venaient d'ici. Depuis, chaque
   section est une SCÈNE épinglée qui se pose en fondu sur la précédente : une
   plaque arrondie qui dépasse par-dessus ne veut plus rien dire, et sur une
   section blanche elle laissait une barre grise en travers de l'écran. */
#constat,#preuve,#methode,#voix,#simulateur,#equipe,#modele,#faq,#cta{
  position:relative;z-index:1;
  border-radius:0;margin-top:0;box-shadow:none;
}

/* La section arrive : son contenu monte de quelques pixels et se pose.
   PLUS D'ASSOMBRISSEMENT en sortie — c'est lui qui faisait paraître les
   titres gris au lieu de blancs, et qui creusait un écart de luminosité
   entre deux sections voisines. */
#constat > .wrap,#preuve > .wrap,#methode > .wrap,#voix > .wrap,
#simulateur > .wrap,#equipe > .wrap,#modele > .wrap,#cta > .wrap,
#definition > .wrap,#chiffres > .wrap{
  transform:translateY(var(--ty,0)) scale(var(--sc,1));
  transform-origin:50% 0;
  will-change:transform;
}

/* ==========================================================================
   28. LES CARTES DU SYSTÈME — la superposition, puis le défilement
   Les quatre pièces s'empilent l'une sur l'autre pendant qu'on scrolle,
   au lieu de se poser toutes seules. C'est le scroll qui fait le montage.
   ========================================================================== */
/* (le comportement du paquet est décrit plus bas, bloc « les cartes du système ») */

/* --- les visages de l'équipe sur la carte des collaborateurs ------------ */
.bento-faces{display:flex;margin-bottom:var(--s10)}
.bento-faces img{
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(14,35,56,.95);margin-left:-10px;
  box-shadow:0 2px 8px rgba(4,11,20,.5);
  opacity:0;transform:translateY(6px) scale(.8);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.bento-faces img:first-child{margin-left:0}
.bento-faces.on img{opacity:1;transform:none}
.bento-faces.on img:nth-child(2){transition-delay:.07s}
.bento-faces.on img:nth-child(3){transition-delay:.14s}
.bento-faces.on img:nth-child(4){transition-delay:.21s}
.bento-faces.on img:nth-child(5){transition-delay:.28s}
.bento-faces .plus{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  margin-left:-10px;border:2px solid rgba(14,35,56,.95);
  background:rgba(59,125,240,.22);color:#8FBBFF;font-size:10px;font-weight:600;
  box-shadow:var(--lum);
  opacity:0;transform:translateY(6px) scale(.8);
  transition:opacity .5s var(--ease) .35s,transform .5s var(--ease) .35s;
}
.bento-faces.on .plus{opacity:1;transform:none}

/* les bâtons du petit graphe poussent depuis le bas */
.spark i{height:0;transition:height .9s cubic-bezier(.16,1,.3,1)}
.spark.on i{height:var(--h)}

/* ==========================================================================
   29. LA COURBE DE CROISSANCE
   Elle se trace quand la bande entre à l'écran, puis elle brille par
   intermittence — le chiffre n'est pas un état, c'est une progression.
   ========================================================================== */
.bento-a{position:relative;overflow:hidden}
.courbe{
  position:absolute;inset:auto 0 0 0;z-index:1;
  width:100%;height:74%;pointer-events:none;
}
.courbe-trait{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  filter:drop-shadow(0 0 8px rgba(59,125,240,.7));
}
.courbe-aire{opacity:0}
.courbe-tete{opacity:0;filter:drop-shadow(0 0 10px rgba(143,187,255,.95))}

.courbe.on .courbe-trait{
  animation:trace 2.4s cubic-bezier(.32,0,.2,1) forwards,
            eclat 5.5s ease-in-out 2.6s infinite;
}
.courbe.on .courbe-aire{animation:aire 1.6s ease-out 1s forwards}
.courbe.on .courbe-tete{animation:tete .5s ease-out 2.3s forwards, pulseTete 5.5s ease-in-out 2.9s infinite}

@keyframes trace{to{stroke-dashoffset:0}}
@keyframes aire{to{opacity:1}}
@keyframes tete{to{opacity:1}}
@keyframes eclat{
  0%,72%,100%{filter:drop-shadow(0 0 6px rgba(59,125,240,.55))}
  82%        {filter:drop-shadow(0 0 16px rgba(143,187,255,.95))}
}
@keyframes pulseTete{
  0%,72%,100%{r:4.5;opacity:1}
  82%        {r:6.5;opacity:1}
}
/* le contenu de la carte reste au-dessus de la courbe */
.bento-a > *:not(.courbe){position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
  .courbe-trait{stroke-dashoffset:0;animation:none}
  .courbe-aire,.courbe-tete{opacity:1;animation:none}
}

/* ==========================================================================
   30. LE TABLEAU DE BORD DES PÔLES
   Ce n'est pas le tableau d'un client : c'est l'interface de pilotage que
   Striker installe, avec les indicateurs de sa propre méthode. Les valeurs
   bougent en continu — c'est une interface vivante, pas un résultat affiché.
   ========================================================================== */
.bento-b{grid-column:span 5;grid-row:span 2;display:grid;gap:var(--s16);align-content:space-between}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s12)}
.dash-live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(143,187,255,.8);
}
.dash-live i{
  width:6px;height:6px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 8px rgba(74,222,128,.9);
  animation:battement 2.4s ease-in-out infinite;
}
@keyframes battement{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s10)}
.dash-kpi{
  display:grid;gap:5px;padding:var(--s12);border-radius:var(--r12);
  border:1px solid var(--line-d);background:rgba(255,255,255,.035);
}
.dash-kpi span{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.dash-kpi b{
  font-size:clamp(17px,1.9vw,22px);font-weight:600;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums;transition:color .5s var(--ease);
}
.dash-kpi b.monte{color:#8FBBFF}
.dash-bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden}
.dash-bar i{
  display:block;height:100%;border-radius:2px;width:var(--w,0%);
  background:linear-gradient(90deg,rgba(59,125,240,.7),#8FBBFF);
  box-shadow:0 0 8px rgba(59,125,240,.55);
  transition:width 1.1s cubic-bezier(.16,1,.3,1);
}

.dash-graphe{padding-top:var(--s4)}
.dash-graphe .spark{height:52px;gap:4px}
.dash-graphe .spark i{width:auto;flex:1;max-width:14px;border-radius:3px 3px 0 0}

.dash-pied{display:flex;align-items:baseline;gap:var(--s10);padding-top:var(--s12);
  border-top:1px solid var(--line-d)}
.dash-pied b{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}

/* la troisième rangée reprend la largeur pleine */
.bento-c{grid-column:span 5}
.bento-d{grid-column:span 7}
@media (max-width:820px){
  .bento-b{grid-column:1/-1;grid-row:auto}
  .bento-c,.bento-d{grid-column:1/-1}
  .dash-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){ .dash-live i{animation:none} }

/* ==========================================================================
   31. L'ORGANIGRAMME — la structure qu'on installe chez le client
   Les nœuds arrivent de haut en bas, les liens se tracent entre eux.
   ========================================================================== */
.bento-c{grid-column:span 6;display:grid;gap:var(--s16);align-content:start}
.orga-total{font-size:11px;color:rgba(255,255,255,.5)}
.orga-total b{font-size:13px;font-weight:600;color:#fff}

.orga{display:grid;justify-items:center;gap:0}
.orga-rang{display:flex;gap:var(--s12);justify-content:center}
.orga-noeud{
  display:grid;justify-items:center;gap:5px;
  padding:var(--s12) var(--s16);border-radius:var(--r12);
  border:1px solid var(--line-d);background:rgba(255,255,255,.045);
  opacity:0;transform:translateY(-10px) scale(.92);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.orga-noeud em{font-style:normal;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.82)}
.orga-noeud i{font-style:normal;font-size:11px;font-weight:600;color:#8FBBFF}
.orga-chef{box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--lum)}
.orga-noeud img{width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(14,35,56,.9)}
.orga-faces{display:flex}
.orga-faces img{margin-left:-9px}
.orga-faces img:first-child{margin-left:0}

.orga-liens{width:min(100%,300px);height:34px;overflow:visible}
.orga-liens path{
  fill:none;stroke:rgba(143,187,255,.45);stroke-width:1.4;
  stroke-dasharray:400;stroke-dashoffset:400;
  transition:stroke-dashoffset 1s var(--ease) .35s;
}
.orga.on .orga-noeud{opacity:1;transform:none}
.orga.on .orga-r2 .orga-noeud{transition-delay:.55s}
.orga.on .orga-r2 .orga-noeud:last-child{transition-delay:.7s}
.orga.on .orga-liens path{stroke-dashoffset:0}

/* ==========================================================================
   32. LE COMPARATIF — le marché et nous, sur la même échelle
   ========================================================================== */
.bento-d{grid-column:span 6;display:grid;gap:var(--s16);align-content:start}
.compare{display:grid;gap:var(--s10)}
.compare-ligne{display:grid;grid-template-columns:74px 1fr 62px;align-items:center;gap:var(--s12)}
.compare-ligne > span{font-size:12.5px;color:rgba(255,255,255,.62)}
.compare-ligne > b{
  font-size:15px;font-weight:600;color:rgba(255,255,255,.72);text-align:right;
  font-variant-numeric:tabular-nums;
}
.compare-piste{display:block;height:9px;border-radius:var(--rf);background:rgba(255,255,255,.08);overflow:hidden}
.compare-piste i{
  display:block;height:100%;width:0;border-radius:var(--rf);
  background:rgba(255,255,255,.22);
  transition:width 1.3s cubic-bezier(.16,1,.3,1);
}
.compare-nous > span{color:#fff;font-weight:500}
.compare-nous > b{color:#8FBBFF;font-size:17px}
.compare-nous .compare-piste i{
  background:linear-gradient(90deg,rgba(59,125,240,.85),#8FBBFF);
  box-shadow:0 0 14px rgba(59,125,240,.6);
}
.compare.on .compare-piste i{width:var(--w)}
.compare-ligne:nth-child(2) .compare-piste i{transition-delay:.14s}
.compare-nous .compare-piste i{transition-delay:.28s}
@media (max-width:820px){
  .bento-c,.bento-d{grid-column:1/-1}
  .compare-ligne{grid-template-columns:62px 1fr 58px}
}

/* le dirigeant coiffe la structure : il garde l'autorité, pas le management */
.orga-toi{
  border-style:dashed;border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.025);box-shadow:none;
}
.orga-toi em{color:#fff}
.orga-toi i{color:rgba(255,255,255,.45);font-size:10px}
.orga-liens-haut{height:22px}
.orga.on .orga-r1 .orga-noeud{transition-delay:.3s}
.orga.on .orga-r2 .orga-noeud{transition-delay:.75s}
.orga.on .orga-r2 .orga-noeud:last-child{transition-delay:.9s}
.orga.on .orga-liens-haut path{transition-delay:.18s}
.orga.on .orga-liens:not(.orga-liens-haut) path{transition-delay:.6s}

/* ==========================================================================
   33. L'ORGANIGRAMME EN LARGEUR
   En hauteur, quatre étages faisaient une carte deux fois trop grande.
   Le flux se lit maintenant de gauche à droite : dirigeant, Head of Sales,
   puis la branche des deux métiers.
   ========================================================================== */
.bento-c{grid-column:span 7}
.orga{
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:nowrap;
}
.orga-noeud{
  display:grid;justify-items:center;gap:4px;flex:none;
  padding:var(--s10) var(--s12);border-radius:var(--r12);
  border:1px solid var(--line-d);background:rgba(255,255,255,.045);
  opacity:0;transform:translateX(-10px) scale(.94);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.orga-noeud em{font-size:11px;white-space:nowrap}
.orga-noeud i{font-size:10.5px}
.orga-noeud img{width:22px;height:22px}
.orga-branche{display:grid;gap:var(--s8);flex:none}
.orga-lien-h{width:clamp(18px,3vw,34px);height:10px;flex:none}
.orga-lien-y{width:clamp(26px,4vw,44px);height:80px;flex:none}
.orga-lien-h path,.orga-lien-y path{
  fill:none;stroke:rgba(143,187,255,.45);stroke-width:1.4;
  stroke-dasharray:300;stroke-dashoffset:300;
  transition:stroke-dashoffset .8s var(--ease);
}
.orga.on .orga-noeud{opacity:1;transform:none}
.orga.on .orga-chef{transition-delay:.3s}
.orga.on .orga-branche .orga-noeud{transition-delay:.7s}
.orga.on .orga-branche .orga-noeud:last-child{transition-delay:.82s}
.orga.on .orga-lien-h path{transition-delay:.18s;stroke-dashoffset:0}
.orga.on .orga-lien-y path{transition-delay:.55s;stroke-dashoffset:0}
@media (max-width:520px){
  .orga{flex-wrap:wrap;justify-content:flex-start;gap:var(--s8)}
  .orga-lien-h,.orga-lien-y{display:none}
  .orga-branche{display:flex;gap:var(--s8)}
}

/* --- les deux chiffres complémentaires -------------------------------- */
.bento-e{grid-column:span 5;display:grid;gap:var(--s10);align-content:center}
.mini{display:grid;gap:2px}
.mini b{
  font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.04em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.mini-suf{font-size:10.5px;color:rgba(255,255,255,.45)}

/* --- le comparatif prend toute la largeur ------------------------------ */
.bento-d{grid-column:1/-1}
.bento-d .compare-ligne{grid-template-columns:92px 1fr 74px}
@media (max-width:820px){
  .bento-c,.bento-e,.bento-d{grid-column:1/-1}
  .bento-d .compare-ligne{grid-template-columns:62px 1fr 62px}
}

/* ==========================================================================
   34. LA TRAME DE COLONNES — relevé sur le template « Simple » de Cruip
   Des filets verticaux presque invisibles derrière tout le site. Ils ne se
   remarquent pas consciemment, mais ils donnent une structure au vide : c'est
   la différence entre une page aérée et une page vide.
   ========================================================================== */
.band::before,.hero::after{
  content:none;position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,
    var(--filet) 0 1px, transparent 1px var(--pas));
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
  --pas:calc(min(1200px, 100vw - 2 * var(--gut)) / 12);
  --filet:rgba(11,22,34,.045);
}
.band--dark::before,.hero::after{--filet:rgba(255,255,255,.038)}
/* la trame ne doit pas manger le liseré de l'arête qui recouvre */
#constat::before,#preuve::before,#methode::before,#voix::before,
#simulateur::before,#equipe::before,#modele::before,#faq::before,#cta::before{
  z-index:0;height:auto;background-image:
    repeating-linear-gradient(90deg,var(--filet) 0 1px,transparent 1px var(--pas)),
    linear-gradient(180deg,rgba(255,255,255,.5) 0 1px,transparent 1px);
}

/* ==========================================================================
   35. LE CADRE DE FENÊTRE — la maquette se lit comme un vrai écran
   Trois pastilles et un intitulé : le cerveau reconnaît une application,
   pas une illustration. C'est ce qui fait basculer un schéma en produit.
   ========================================================================== */
.chrome{
  border-radius:var(--r16);overflow:hidden;
  border:1px solid var(--line-d);background:rgba(4,11,20,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -20px rgba(4,11,20,.8);
}
.chrome-barre{
  display:flex;align-items:center;gap:var(--s10);
  padding:9px var(--s12);border-bottom:1px solid var(--line-d);
  background:rgba(255,255,255,.03);
}
.chrome-points{display:flex;gap:5px}
.chrome-points i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.chrome-points i:first-child{background:rgba(255,120,110,.5)}
.chrome-points i:nth-child(2){background:rgba(255,200,90,.5)}
.chrome-points i:last-child{background:rgba(120,220,150,.5)}
.chrome-titre{
  flex:1;text-align:center;font-size:10.5px;font-weight:500;
  color:rgba(255,255,255,.42);letter-spacing:.02em;
}
.chrome-corps{padding:var(--s16)}

/* ==========================================================================
   36. LA DA SOMBRE ÉTENDUE À TOUT LE SITE
   Le basculement en clair après les chiffres cassait la tension du début.
   On reste dans le navy du bout en bout — mais avec des VALEURS différentes
   d'une section à l'autre, pour garder le jeu de composition qui manquait à
   la toute première version.
   ========================================================================== */
:root{
  --paper:#0B1A2A;
  --panel:#0E2338;
  --card:rgba(255,255,255,.05);
  --ink:#FFFFFF;
  --ink-soft:rgba(255,255,255,.62);
  --ink-mute:rgba(255,255,255,.44);
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --blue-pale:rgba(59,125,240,.18);
  /* les ombres perdent leur liseré blanc, qui n'a de sens que sur du clair */
  --sh1:0 1px 2px rgba(4,11,20,.4), inset 0 1px 0 rgba(255,255,255,.06);
  --sh2:0 14px 34px -14px rgba(4,11,20,.75), inset 0 1px 0 rgba(255,255,255,.07);
  --sh3:0 28px 60px -24px rgba(4,11,20,.85), inset 0 1px 0 rgba(255,255,255,.08);
}
body{background:var(--paper);color:var(--ink)}

/* l'alternance se joue en valeurs de navy, pas en clair/sombre */
.band--panel{background:var(--panel)}
#definition{background:var(--navy)}
#preuve{background:#0C1E30}
#voix{background:var(--navy)}
#equipe{background:#0C1E30}
#modele{background:var(--panel)}
#convient{background:var(--navy)}

/* --- les composants suivent ------------------------------------------- */
.ui:not(.ui--plain){background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
    border-color:var(--line)}
.ui-card,.ui-metric,.quote,.vcard-media{
  background-color:rgba(255,255,255,.05);border-color:var(--line);
  color:var(--ink);backdrop-filter:blur(8px);
}
.ui-icon{background:rgba(59,125,240,.18);color:#8FBBFF;box-shadow:var(--lum-fort)}
.ui-icon--ink{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.ui-chip i{background:rgba(255,255,255,.09);color:rgba(255,255,255,.55)}
.ui-track{background:rgba(255,255,255,.12)}
.ui-bars i{background:rgba(143,187,255,.28)}
.ui-bars i.hot{background:var(--blue)}
.ui-faces span{border-color:var(--navy);background:linear-gradient(160deg,#2A3F55,#1A2B3D)}
.ui-faces span::after,.ui-faces span::before{background:rgba(255,255,255,.34)}

.ba-col{border-color:var(--line)}
.ba-col--after{background:rgba(255,255,255,.05);box-shadow:var(--sh2)}
.ba-col--before li{color:var(--ink-soft)}
.ba-col--after li{color:var(--ink)}

.faq{border-color:var(--line)}
.faq details{border-color:var(--line)}
.faq summary i{background:rgba(255,255,255,.08);color:var(--ink-soft)}

.cf-card{background:var(--panel);border-color:var(--line)}
.cf-dots button{background:rgba(255,255,255,.18)}
.note-res{border-color:var(--line)}

.nav{background:rgba(11,26,42,.72);border-color:var(--line-2)}
.nav .nav-word{filter:brightness(0) invert(1)}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover,.nav-links a.on{color:#fff;background:rgba(255,255,255,.08)}
.nav .btn{background:#fff;color:var(--navy-deep)}
.nav .btn .pip{background:rgba(11,22,34,.08)}
.nav-sep{background:var(--line-2)}

.btn{background:#fff;color:var(--navy-deep)}
.btn .pip{background:rgba(11,22,34,.08)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost .pip{background:rgba(255,255,255,.1)}

.chrome{background:rgba(4,11,20,.5)}
.ruban img,.cf-logo{filter:brightness(0) invert(1)}
.tbadge-logos img{border-color:rgba(11,26,42,.9)}

footer{background:var(--navy-deep)}

/* le grain et la trame se calent sur le sombre */
.band::before,.hero::after{--filet:rgba(255,255,255,.04)}
.band:not(.band--dark)::after{
  background:
    radial-gradient(46% 34% at 12% 8%,rgba(59,125,240,.10),transparent 70%),
    radial-gradient(38% 30% at 92% 82%,rgba(59,125,240,.08),transparent 72%);
}
.vgrid{opacity:.25}

/* ==========================================================================
   37. L'UNIVERS — une seule couche fixe derrière toute la page
   Le site ne doit pas être une pile de blocs posés sur du navy : il doit
   donner la sensation de traverser un espace. Une lumière qui dérive, une
   poussière qui flotte, l'emblème en très grand — et les sections deviennent
   des voiles translucides par-dessus.
   ========================================================================== */
.monde{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  /* la nuit de la charte, avec la lueur qui monte du bas comme sur ses pages
     de titre : c'est le fond du hero, appliqué à toute la page */
  /* RETOUR AU FOND D'ORIGINE : l'aplat bleu nuit de la marque, celui du pied
     de page. Le dégradé de charte éclaircissait la page en descendant — la
     descente se voyait, et le bas de page virait au bleu clair. On garde la
     couche unique (donc zéro raccord entre sections) mais avec la couleur
     d'avant, tenue du premier au dernier écran. */
  background:#0C1E30;
}
.monde-lueur{
  position:absolute;width:78vmax;height:78vmax;border-radius:50%;
  left:50%;top:6%;translate:-50% -50%;
  background:radial-gradient(circle,rgba(59,125,240,.30),rgba(59,125,240,.06) 46%,transparent 68%);
  filter:blur(28px);
  transform:translate3d(0,var(--l1,0),0);
  will-change:transform;
}
.monde-lueur-2{
  width:62vmax;height:62vmax;left:14%;top:72%;
  background:radial-gradient(circle,rgba(94,155,255,.20),rgba(59,125,240,.05) 48%,transparent 70%);
  transform:translate3d(0,var(--l2,0),0);
}
.monde-embleme{
  position:absolute;left:50%;top:52%;width:min(120vmin,1400px);height:auto;
  translate:-50% -50%;opacity:calc(.028 * var(--eo,1));
  filter:brightness(0) invert(1);
  transform:perspective(1800px) rotateY(var(--ry,-18deg)) rotateX(var(--rx,5deg)) scale(var(--es,1));
  will-change:transform;
}
.monde-poussiere{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.monde-vignette{
  position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 40%,transparent 42%,rgba(4,11,20,.72) 100%);
}

/* les sections laissent passer l'univers : c'est ça qui crée la continuité */
body{background:transparent}
.band,.hero,footer{background-color:transparent}
#definition{background:rgba(11,26,42,.62)}
#constat{background:#0E2338}
#preuve{background:rgba(12,30,48,.58)}
#methode{background:#122B45}
/* Ces quatre-là se posent PAR-DESSUS la précédente ou sont découvertes à
   travers un lettrage : si elles sont translucides, on voit la section du
   dessous au travers et tout devient laiteux. Elles restent opaques. */
#voix{background:#0B1A2A}
#simulateur{background:#070E17}
#equipe{background:#0C1E30}
#modele{background:#0E2338}
#convient{background:rgba(9,22,36,.78)}
#cta{background:rgba(7,19,32,.88)}
#chiffres{background:#091624}
.ouv{background:transparent}
.band,.hero{backdrop-filter:blur(2px)}
footer{background:rgba(4,11,20,.9)}
@media (prefers-reduced-motion:reduce){ .monde-poussiere{display:none} }

/* ==========================================================================
   38. LE PLAN — le langage qui manquait aux sections
   L'ouverture marche parce que c'est un PLAN : plein écran, une idée, pilotée
   par le scroll. Les autres sections étaient des panneaux d'information.
   Voici le même principe appliqué au constat.
   ========================================================================== */
.acte-plein{
  position:relative;height:480vh;background:transparent;
  border-radius:0;margin-top:0;box-shadow:none;
}
.acte-plein::before,.acte-plein::after{display:none}
.plan{
  position:sticky;top:0;height:100vh;
  display:grid;align-content:center;justify-items:center;text-align:center;
  padding-inline:var(--gut);gap:var(--s24);
}
.plan-oeil{opacity:var(--o1,0);transform:translateY(var(--t1,14px));transition:none}
/* les deux titres se superposent : l'un remplace l'autre en fondu flouté,
   au moment précis où la liste bascule de « sans structure » à « avec Striker » */
.plan-titres{position:relative;display:grid;justify-items:center;width:min(880px,100%)}
.plan-titre{
  grid-area:1/1;max-width:18ch;font-size:clamp(30px,5vw,64px);
  opacity:var(--o1,0);transform:translateY(var(--t1,20px)) scale(var(--e1,1));
  filter:blur(var(--f1,0px));
  will-change:opacity,filter,transform;
}
/* rouge pour le constat, vert pour la performance retrouvée.
   La lueur est portée par un drop-shadow sur le groupe, PAS par un text-shadow
   sur les mots : chaque mot est enfermé dans une boîte à débordement caché
   (c'est elle qui masque le mot pendant qu'il monte), et cette boîte
   découpait la lueur en rectangles verts autour de chaque mot. */
.plan-titre-2 b{color:#4ADE80;font-weight:600;
  filter:drop-shadow(0 0 18px rgba(74,222,128,.40))}
/* le constat se dit en rouge, la solution en bleu : les deux titres
   ne doivent pas porter la même couleur d'accent. */
.plan-titre-1 b{color:#FF6B5E;font-weight:600;
  filter:drop-shadow(0 0 18px rgba(255,107,94,.40))}

/* les deux listes occupent le MÊME espace : l'une remplace l'autre */
/* la liste et le paragraphe occupent la MÊME zone : la page ne bouge pas,
   ce sont les éléments qui se remplacent. */
.plan-zone{position:relative;display:grid;width:min(880px,100%);
  min-height:clamp(210px,26vh,280px);margin-top:var(--s16);place-items:center}
.plan-zone > *{grid-area:1/1;width:100%}
.plan-listes{position:relative;width:min(560px,100%);justify-self:center;min-height:190px}
.plan-listes ul{
  position:absolute;inset:0;margin:0;padding:0;list-style:none;
  display:grid;align-content:center;gap:var(--s12);
}
.plan-listes li{
  font-size:clamp(14px,1.5vw,17px);line-height:1.35;letter-spacing:-.02em;
  display:flex;align-items:center;justify-content:center;gap:var(--s10);
}
.plan-listes li::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
}
/* avant : gris, et chaque ligne se barre puis s'efface */
.plan-avant li{color:rgba(255,255,255,.5);opacity:var(--a,0);transform:translateY(var(--ay,10px))}
.plan-avant li::before{background:rgba(255,255,255,.28)}
.plan-avant li::after{
  content:'';position:absolute;left:12%;right:12%;height:1px;
  background:rgba(255,120,110,.6);transform:scaleX(var(--barre,0));transform-origin:left;
}
.plan-avant li{position:relative}
/* après : bleu, et chaque ligne s'allume */
.plan-apres li{color:#fff;opacity:var(--b,0);transform:translateY(var(--by,14px))}
.plan-apres li::before{background:#8FBBFF;box-shadow:0 0 10px rgba(143,187,255,.9)}

.plan-zone .plan-chute{
  max-width:100%;text-align:center;
  opacity:calc(var(--vis,1) * var(--o3,0));
  font-size:clamp(17px,2.3vw,30px);line-height:1.28;
}

@media (prefers-reduced-motion:reduce){
  .acte-plein{height:auto;padding-block:var(--sec)}
  .plan{position:static;height:auto}
  .plan-oeil,.plan-titre,.plan-chute{opacity:1;transform:none}
  .plan-listes{min-height:0;display:grid;gap:var(--s24)}
  .plan-listes ul{position:static}
  .plan-avant li,.plan-apres li{opacity:1;transform:none}
  .plan-avant li::after{display:none}
}

/* ==========================================================================
   39. LA MÉTHODE EN PAQUET DE CARTES
   Les quatre piliers occupent le MÊME emplacement. Chaque avancée du scroll
   remplace la carte visible par la suivante, qui monte par-dessus pendant
   que la précédente recule dans la pile. On gagne trois écrans de hauteur.
   ========================================================================== */
@media (min-width:901px){
  /* La scène reste ÉPINGLÉE — le titre de gauche ne bouge pas d'un pixel —
     et ce sont les cartes qui voyagent : chacune monte depuis le bas du cadre
     et vient recouvrir la précédente, qui recule d'un cran en rapetissant.
     Aucune ne s'efface : les quatre restent à l'écran, dans l'ordre.
     Référence : images-scrolling-animation. */
  #methode{
    /* une fenêtre d'écran, plus un temps de montée par carte */
    height:calc(100vh + 4 * 74vh);
  }
  #methode > .wrap{
    position:sticky;top:0;height:100vh;
    display:grid;align-content:center;
  }
  #methode .g{align-items:center}
  #methode .c4 > div{position:static!important}   /* le titre est déjà tenu par la scène */

  #methode .c8{
    position:relative;display:block;
    padding-top:76px;                 /* la place que prend le paquet au-dessus */
    height:clamp(460px,64vh,600px);
    /* la carte qui arrive monte depuis le bas du cadre : hors du cadre, elle
       n'existe pas encore */
    overflow:hidden;
  }
  #methode .c8 > .ui{
    position:absolute;left:6px;right:6px;top:76px;
    margin:0;transform-origin:50% 0;
    transform:translateY(var(--y,0px)) scale(var(--s,1));
    opacity:1;filter:none;
    z-index:var(--z,1);
    will-change:transform;
  }
  @media (prefers-reduced-motion:reduce){
    #methode .c8{height:auto;overflow:visible}
    #methode .c8 > .ui{position:static;transform:none;margin-bottom:var(--s24)}
  }

  /* un compteur discret : où en est-on dans la pile */
  .pile-jauge{display:flex;gap:6px;margin-top:var(--s24)}
  .pile-jauge i{
    width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);
    overflow:hidden;position:relative;
  }
  .pile-jauge i::after{
    content:'';position:absolute;inset:0;border-radius:2px;
    background:var(--blue);box-shadow:0 0 8px rgba(59,125,240,.7);
    transform:scaleX(var(--p,0));transform-origin:left;
  }
}


/* --- les cartes du paquet doivent être OPAQUES ------------------------- 
   Un empilement de surfaces translucides laisse voir les cartes du dessous
   à travers celles du dessus : la pile ne se lit plus. Ici on peint. */
@media (min-width:901px){
  #methode .c8 > .ui{
    background:linear-gradient(180deg,#15304A,#0E2338);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 26px 60px -22px rgba(4,11,20,.9),
      0 6px 18px -8px rgba(4,11,20,.7);
  }
  /* les cartes intérieures se détachent sur ce fond plus clair */
  #methode .c8 > .ui .ui-card,
  #methode .c8 > .ui .ui-metric{
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.10);
    backdrop-filter:none;
  }
}

/* ==========================================================================
   40. LE SCRUB — la vidéo du Summit vient à nous
   Référence : hero-scrub. La vignette grandit jusqu'à couvrir l'écran en
   défilant ses images, puis rétrécit symétriquement. Tout est piloté par la
   position dans la section : rien ne se déclenche tout seul.
   ========================================================================== */
@media (min-width:901px){
  .scrub{height:260vh}
  .scrub > .wrap{position:sticky;top:0;height:100vh;display:grid;align-content:center}
  /* tout ce qui n'est pas la vidéo s'efface quand elle prend l'écran */
  .scrub .c6:first-child,.scrub .head,.scrub .scrub-legende{
    opacity:var(--reste,1);transition:none;
  }
}
.scrub-carte{
  position:relative;border-radius:var(--r24);overflow:hidden;
  border:1px solid var(--line);background:#0B1A2A;
  aspect-ratio:4/3;
  box-shadow:0 30px 70px -30px rgba(4,11,20,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.scrub-carte img,.scrub-carte .scrub-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.scrub-carte img{opacity:.82}
.scrub-carte .scrub-video{opacity:0}
.scrub-carte.a-video .scrub-video{opacity:1}
.scrub-carte.a-video img{opacity:0}

@media (min-width:901px){
  .scrub-carte{
    /* la carte sort de la grille pour pouvoir couvrir l'écran entier */
    position:fixed;z-index:40;
    left:var(--x,50%);top:var(--yy,50%);
    width:var(--w,42vw);height:var(--h,31.5vw);
    translate:-50% -50%;
    border-radius:var(--r,24px);
    aspect-ratio:auto;
    transition:none;
    will-change:width,height,left,top,border-radius;
  }
  .scrub-place{visibility:hidden}   /* l'emplacement réservé dans la colonne */
}

/* ==========================================================================
   41. LE PARAGRAPHE QUI SE RÉVÈLE
   Les mots pas encore atteints sont flous et éteints ; ils s'allument au fil
   du scroll. Certains passages portent un surlignage rouge, d'autres une
   nuance en italique. C'est la phrase qui devient l'objet, pas un bloc de
   texte posé sous un titre.
   ========================================================================== */
.revele{
  max-width:min(1000px,100%);margin:0;
  opacity:var(--o3,1);
  font-size:clamp(20px,3.1vw,42px);line-height:1.24;letter-spacing:-.03em;
  font-weight:600;text-align:left;text-wrap:pretty;
  opacity:var(--vis,0);
}
.revele .m{
  display:inline-block;
  color:var(--ink);
  opacity:var(--o,.16);
  filter:blur(var(--f,5px));
  transition:none;
  will-change:opacity,filter;
}
/* le surlignage : UN bloc continu qui traverse les espaces entre les mots.
   Le porter sur chaque mot découpait la phrase en petites étiquettes. */
/* Le bloc de couleur ne préexiste plus au texte : il se peint de gauche à
   droite AU MOMENT où les mots qu'il couvre s'allument. --h vient du JS. */
.revele mark{
  --teinte:59,125,240;
  /* le navigateur met un fond JAUNE par défaut sur <mark> ; comme on n'anime
     que background-image, il faut éteindre background-color explicitement */
  background-color:transparent;
  color:#fff;padding:.04em .16em;border-radius:4px;
  background-image:linear-gradient(rgb(var(--teinte)),rgb(var(--teinte)));
  background-repeat:no-repeat;
  background-size:calc(var(--h,0) * 100%) 100%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  box-shadow:0 0 26px rgba(var(--teinte),calc(var(--h,0) * .38));
}
/* le rouge reste réservé à ce qui casse : le départ du commercial */
.revele mark.rouge{--teinte:229,50,43}
@media (prefers-reduced-motion:reduce){ .revele mark{--h:1} }
.revele mark .m{background:none;color:#fff}
/* le mot en rouge seul, sans bloc */
.revele em{font-style:normal}
.revele em .m{color:#4ADE80}
/* la nuance : plus discrète, en italique */
.revele i{font-style:italic}
.revele i .m{color:var(--ink-soft);font-weight:500}
@media (max-width:620px){ .revele{font-size:clamp(18px,5.6vw,26px)} }

/* ==========================================================================
   42. LE CIRCUIT — ce qu'on installe, câblé autour du pôle
   Référence : cpu-architecture. Une puce centrale, quatre pistes qui en
   partent, et des impulsions lumineuses qui remontent vers elle en continu.
   Le pôle n'est plus une liste : c'est un système alimenté.
   ========================================================================== */
.circuit{position:relative;aspect-ratio:520/420;width:100%;perspective:1100px}
/* La carte arrive inclinée puis se met à plat : c'est ce basculement qui dit
   « on pose un circuit », plus que n'importe quel effet sur les traits. */
.circuit-svg{
  opacity:0;transform:rotateX(22deg) scale(.94);
  transform-origin:50% 60%;
  transition:opacity .7s var(--ease),transform 1.15s cubic-bezier(.22,1,.28,1);
}
.circuit.joue .circuit-svg{opacity:1;transform:none}

/* la puce se pose la première, avec un léger rebond */
.circuit-puce{
  opacity:0;transform:scale(.68);
  transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .45s var(--ease) .30s,
             transform .75s cubic-bezier(.18,1.35,.35,1) .30s;
}
.circuit.joue .circuit-puce{opacity:1;transform:none}
/* puis ses broches, une par une */
.circuit-pattes rect{
  opacity:0;transform:scale(0);
  transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .28s var(--ease),transform .38s cubic-bezier(.2,1.5,.4,1);
}
.circuit.joue .circuit-pattes rect{opacity:1;transform:none}
.circuit.joue .circuit-pattes rect:nth-child(1){transition-delay:.60s}
.circuit.joue .circuit-pattes rect:nth-child(2){transition-delay:.65s}
.circuit.joue .circuit-pattes rect:nth-child(3){transition-delay:.70s}
.circuit.joue .circuit-pattes rect:nth-child(4){transition-delay:.75s}
.circuit.joue .circuit-pattes rect:nth-child(5){transition-delay:.80s}
.circuit.joue .circuit-pattes rect:nth-child(6){transition-delay:.85s}
.circuit.joue .circuit-pattes rect:nth-child(7){transition-delay:.90s}
.circuit.joue .circuit-pattes rect:nth-child(8){transition-delay:.95s}
.circuit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.circuit-traces path{
  fill:none;stroke:rgba(143,187,255,.20);stroke-width:1.4;
  /* décalage NÉGATIF : le trait part de la puce et court vers son plot,
     pas l'inverse — c'est la puce qu'on pose d'abord, puis qu'on câble */
  stroke-dasharray:var(--l,320);stroke-dashoffset:calc(var(--l,320) * -1);
  transition:stroke-dashoffset .95s var(--ease);
}
.circuit.joue .circuit-traces path{stroke-dashoffset:0}
.circuit.joue .circuit-traces path:nth-child(1){transition-delay:.72s}
.circuit.joue .circuit-traces path:nth-child(2){transition-delay:.90s}
.circuit.joue .circuit-traces path:nth-child(3){transition-delay:1.08s}
.circuit.joue .circuit-traces path:nth-child(4){transition-delay:1.26s}
.circuit-flux path{
  fill:none;stroke:#8FBBFF;stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:26 340;stroke-dashoffset:366;
  animation:flux 3.4s linear infinite;
  animation-play-state:paused;
}
.circuit.joue .circuit-flux path{animation-play-state:running;animation-delay:2.7s}
.circuit.joue .circuit-flux path:nth-child(2){animation-delay:3.55s}
.circuit.joue .circuit-flux path:nth-child(3){animation-delay:4.40s}
.circuit.joue .circuit-flux path:nth-child(4){animation-delay:5.25s}
@keyframes flux{to{stroke-dashoffset:0}}

.circuit-plots circle{
  fill:#8FBBFF;opacity:0;
  transform:scale(.2);transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .35s var(--ease),transform .45s cubic-bezier(.2,1.4,.4,1);
}
/* chaque plot s'allume quand SA piste arrive, pas avant */
.circuit.joue .circuit-plots circle{opacity:.55;transform:none}
.circuit.joue .circuit-plots circle:nth-child(1){transition-delay:1.50s}
.circuit.joue .circuit-plots circle:nth-child(2){transition-delay:1.68s}
.circuit.joue .circuit-plots circle:nth-child(3){transition-delay:1.86s}
.circuit.joue .circuit-plots circle:nth-child(4){transition-delay:2.04s}
/* la respiration continue ne démarre qu'une fois le circuit monté */
.circuit.joue .circuit-plots circle{animation:plot 3.4s ease-in-out 2.6s infinite}
.circuit.joue .circuit-plots circle:nth-child(2){animation-delay:3.45s}
.circuit.joue .circuit-plots circle:nth-child(3){animation-delay:4.30s}
.circuit.joue .circuit-plots circle:nth-child(4){animation-delay:5.15s}
@keyframes plot{0%,100%{opacity:.4;r:4}12%{opacity:1;r:5.4}}

.circuit-puce rect{fill:#12293F;stroke:rgba(255,255,255,.14);stroke-width:1}
.circuit-pattes rect{fill:rgba(143,187,255,.45);stroke:none}
.circuit-puce text{
  fill:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.02em;
}
.circuit-puce .circuit-sous{fill:rgba(255,255,255,.5);font-size:10.5px;letter-spacing:.14em}
.circuit.joue .circuit-puce{animation:puce 3.4s ease-in-out 2.6s infinite}
@keyframes puce{0%,100%{filter:drop-shadow(0 0 10px rgba(59,125,240,.35))}
                50%{filter:drop-shadow(0 0 26px rgba(59,125,240,.7))}}

/* les quatre libellés, posés au bout de leur piste */
.circuit-noeud{
  position:absolute;display:grid;gap:2px;max-width:44%;
  font-size:12.5px;font-weight:500;color:#fff;letter-spacing:-.015em;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.circuit.joue .circuit-noeud{opacity:1;transform:none}
.circuit-noeud i{
  font-style:normal;font-size:10px;font-weight:600;color:#8FBBFF;letter-spacing:.1em;
}
.circuit-noeud em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.45);line-height:1.3}
.circuit .n1{left:0;top:4%;transition-delay:1.70s}
.circuit .n2{right:0;top:4%;text-align:right;justify-items:end;transition-delay:1.88s}
.circuit .n3{left:0;bottom:4%;transition-delay:2.06s}
.circuit .n4{right:0;bottom:4%;text-align:right;justify-items:end;transition-delay:2.24s}
@media (max-width:620px){
  .circuit-noeud{font-size:11px;max-width:46%}
  .circuit-noeud em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .circuit-flux path,.circuit-plots circle,.circuit-puce{animation:none!important}
  .circuit-noeud{opacity:1;transform:none}
  .circuit-svg,.circuit-puce,.circuit-pattes rect,.circuit-plots circle{
    opacity:1;transform:none;transition:none;
  }
  .circuit-plots circle{opacity:.55}
  .circuit-traces path{stroke-dashoffset:0;transition:none}
}

/* ==========================================================================
   43. LA CONSOLE DE PILOTAGE — la mise en route
   Les chiffres ne s'affichent pas : une console s'allume. Un balayage
   traverse la section, une grille apparaît, l'entête se connecte, les
   équerres se tracent, puis chaque carte se matérialise avec un scintillement.
   ========================================================================== */
.console{position:relative}
.console > .wrap{position:relative;z-index:3}

/* le balayage d'allumage */
.console-boot{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.console-scan{
  position:absolute;left:0;right:0;height:34%;top:-40%;
  background:linear-gradient(180deg,transparent,rgba(143,187,255,.16),rgba(255,255,255,.10),rgba(143,187,255,.16),transparent);
  box-shadow:0 0 60px rgba(59,125,240,.35);
  opacity:0;
}
.console.on .console-scan{animation:consoleScan 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes consoleScan{
  0%  {top:-40%;opacity:0}
  10% {opacity:1}
  85% {opacity:1}
  100%{top:110%;opacity:0}
}
/* la grille technique qui reste en fond */
.console-grille{
  position:absolute;inset:0;opacity:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(143,187,255,.055) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(143,187,255,.055) 0 1px,transparent 1px 44px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 78%);
}
.console.on .console-grille{animation:consoleGrille 1.2s ease-out .5s forwards}
@keyframes consoleGrille{to{opacity:1}}

/* l'entête : le point qui bat, la ligne qui s'écrit, l'état */
.console-tete{
  display:flex;align-items:center;gap:var(--s10);
  margin-bottom:var(--s20);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(143,187,255,.75);
  opacity:0;
}
.console.on .console-tete{animation:consoleTete .5s ease-out .55s forwards}
@keyframes consoleTete{to{opacity:1}}
.console-point{
  width:7px;height:7px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 10px rgba(74,222,128,.9);animation:battement 2s ease-in-out infinite;
}
.console-ligne::after{
  content:attr(data-txt);
  display:inline-block;overflow:hidden;white-space:nowrap;
  width:0;vertical-align:bottom;
}
.console.on .console-ligne::after{animation:frappe 1.1s steps(34,end) .8s forwards}
@keyframes frappe{to{width:22em}}
.console-etat{
  margin-left:auto;padding:3px 10px;border-radius:var(--rf);
  border:1px solid rgba(74,222,128,.35);color:#4ADE80;
  background:rgba(74,222,128,.10);letter-spacing:.1em;
}

/* les équerres du cadre, tracées après le balayage */
.console-coin{
  position:absolute;width:26px;height:26px;z-index:4;pointer-events:none;
  border:1px solid rgba(143,187,255,.55);opacity:0;
}
.console.on .console-coin{animation:consoleCoin .5s ease-out forwards}
.console .c-hg{left:var(--gut);top:calc(var(--sec) - 14px);border-right:0;border-bottom:0;animation-delay:1.0s}
.console .c-hd{right:var(--gut);top:calc(var(--sec) - 14px);border-left:0;border-bottom:0;animation-delay:1.1s}
.console .c-bg{left:var(--gut);bottom:calc(var(--sec) - 14px);border-right:0;border-top:0;animation-delay:1.2s}
.console .c-bd{right:var(--gut);bottom:calc(var(--sec) - 14px);border-left:0;border-top:0;animation-delay:1.3s}
@keyframes consoleCoin{to{opacity:1}}

/* chaque carte se matérialise avec un scintillement */
.console .bento > *{
  opacity:0;transform:translateY(14px) scale(.985);
  filter:blur(4px) brightness(1.6);
}
.console.on .bento > *{animation:materialise .8s cubic-bezier(.16,1,.3,1) forwards}
.console.on .bento > *:nth-child(1){animation-delay:1.15s}
.console.on .bento > *:nth-child(2){animation-delay:1.35s}
.console.on .bento > *:nth-child(3){animation-delay:1.55s}
.console.on .bento > *:nth-child(4){animation-delay:1.75s}
.console.on .bento > *:nth-child(5){animation-delay:1.95s}
@keyframes materialise{
  0%  {opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px) brightness(1.6)}
  40% {opacity:.55;filter:blur(1.5px) brightness(1.35)}
  55% {opacity:.28}                     /* le scintillement */
  70% {opacity:1;filter:blur(0) brightness(1.1)}
  100%{opacity:1;transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){
  .console-scan,.console-coin{display:none}
  .console-grille{opacity:1;animation:none}
  .console-tete{opacity:1;animation:none}
  .console-ligne::after{width:auto;animation:none}
  .console .bento > *{opacity:1;transform:none;filter:none;animation:none!important}
}

/* --- la phrase qui introduit la console -------------------------------- */
.revele-intro{
  margin:0 0 var(--s48);max-width:min(900px,100%);
  font-size:clamp(22px,3.4vw,46px);
}
.revele-intro mark{background:#3B7DF0;box-shadow:0 0 26px rgba(59,125,240,.45)}
.revele-intro em .m{color:#FF6B5E}
/* elle reste en place une fois révélée : c'est le titre de la section */
.console .revele-intro{opacity:1}

/* ==========================================================================
   44. LE CHARGEMENT — la machine se connecte
   Un terminal seul à l'écran, entre le hero et la console. Chaque ligne
   s'écrit puis se valide au fil du scroll. Rien n'est imposé : si le
   lecteur descend vite, ça défile vite.
   ========================================================================== */
/* la section remonte sur le hero : le voile se pose PAR-DESSUS en fondu,
   au lieu de remonter du bas comme une plaque. La page ne bouge pas. */
.charge{
  position:relative;height:360vh;z-index:3;background:transparent;
  margin-top:-160vh;   /* le voile se pose SUR le hero ÉPINGLÉ : la page ne bouge pas */
  margin-bottom:-200vh;/* la console est déjà épinglée derrière quand les lettres s'ouvrent */
}
.charge-scene{
  position:sticky;top:0;height:100vh;pointer-events:none;
  display:grid;place-items:center;padding-inline:var(--gut);
  background:transparent;
}
/* La plaque de fin de chargement. Tant que --taille vaut 0 elle est pleine ;
   quand la barre atteint 100 %, les mots NOS CHIFFRES s'y creusent et
   grandissent — même mécanique que l'ouverture au logo — et la console
   apparaît à travers le lettrage. */
.charge-voile{position:absolute;inset:0;z-index:1;opacity:var(--fond,0);will-change:opacity}
.charge-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.charge-mot{
  font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:600;letter-spacing:-.045em;
  font-size:var(--taille,0);
}
/* sur mobile le lettrage n'est pas un trou dans la plaque : c'est un carton
   de titre posé dessus, il a donc sa propre taille */
.charge-mot-plein{font-size:var(--plein,var(--taille,0));opacity:var(--marque,0)}
.charge-term{position:relative;z-index:2;opacity:var(--net,0);transition:opacity .2s linear}
/* la console attend derrière la plaque */
#chiffres{position:relative;z-index:2}
.charge-term{
  width:min(720px,100%);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(11.5px,1.25vw,14px);line-height:1.9;letter-spacing:-.005em;
  color:rgba(143,187,255,.9);
}
.charge-tete{
  margin:0 0 var(--s16);color:rgba(255,255,255,.35);
  border-bottom:1px solid rgba(143,187,255,.16);padding-bottom:var(--s10);
}
.charge-lignes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.charge-lignes li{
  position:relative;padding-left:18px;white-space:nowrap;overflow:hidden;
  color:rgba(255,255,255,.62);
  width:var(--w,0);
}
.charge-lignes li::before{
  content:'>';position:absolute;left:0;color:rgba(143,187,255,.55);
}
/* les points de conduite puis l'état, à droite */
.charge-lignes li::after{
  content:' ' attr(data-suite);
  color:rgba(255,255,255,.22);
}
.charge-lignes li b{
  color:#4ADE80;font-weight:600;
}
.charge-barre{
  margin-top:var(--s20);height:3px;border-radius:2px;
  background:rgba(255,255,255,.10);overflow:hidden;
}
.charge-barre i{
  display:block;height:100%;width:var(--p,0%);border-radius:2px;
  background:linear-gradient(90deg,rgba(59,125,240,.8),#8FBBFF);
  box-shadow:0 0 12px rgba(59,125,240,.7);
}
.charge-pied{margin:var(--s10) 0 0;color:rgba(255,255,255,.42)}
.charge-pct{color:#8FBBFF;font-weight:600}
/* le curseur qui clignote sur la ligne en cours */
.charge-lignes li.en-cours::after{content:'▌';color:#8FBBFF;animation:clign .9s steps(2) infinite}
@keyframes clign{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .charge{height:100vh;margin-top:0;margin-bottom:0}
  .charge-voile{opacity:.94}
  .charge-svg{display:none}
  .charge-term{opacity:1}
  .charge-lignes li{width:auto}
  .charge-barre i{width:100%}
}

/* ==========================================================================
   45. UNE SECTION = UN ÉCRAN
   Relevé avant correction (viewport 1100 px) :
     definition 0,50 · preuve 0,65 · voix 0,71 · cta 0,46  -> trop courtes
     chiffres 1,07 · modele 1,27                            -> débordent
   Les sections épinglées (ouverture, chargement, constat, méthode, équipe)
   sont longues volontairement : c'est leur mécanique de scroll, on n'y touche pas.
   ========================================================================== */
#definition,#preuve,#voix,#simulateur,#modele,#convient,#faq,#cta,#chiffres{
  min-height:100vh;
  display:grid;
  /* sans piste bornée, le conteneur intérieur prend sa max-width (1264 px)
     même sur un écran plus étroit, et toute la page déborde à l'horizontale */
  grid-template-columns:minmax(0,1fr);
  align-content:center;
}
/* la console doit tenir d'un bloc : on resserre son rythme */
#chiffres{padding-block:clamp(48px,6vh,72px)}
#chiffres .bento{gap:var(--s10);margin-top:var(--s24)}
#chiffres .revele-intro{margin-bottom:var(--s24)}
#chiffres .console-tete{margin-bottom:var(--s16)}
#chiffres .bento-a{padding:var(--s24)}
#chiffres .bento > *{padding:var(--s20)}

/* les modalités tiennent aussi en un écran : on resserre les trois blocs */
#modele{padding-block:clamp(48px,6vh,80px)}
#modele > .wrap > .g{margin-bottom:var(--s40)!important}
#modele > .wrap > .g:last-child{margin-bottom:0!important}
#modele .head{margin-bottom:var(--s16)}
#modele .faq summary{padding-block:var(--s16)}
#modele .faq-a{padding-bottom:var(--s16)}

/* le CTA final et les sections courtes se centrent au lieu de flotter en haut */
#cta > .wrap{justify-items:center}

#faq{background:rgba(11,26,42,.66)}
#faq .faq summary{padding-block:var(--s20)}

/* ==========================================================================
   46. L'ÉCRAN DE PILOTAGE
   Référence : efferd-dashboard. Toute la section « Nos chiffres » devient un
   seul écran d'application — barre de fenêtre, colonne de navigation, tuiles
   d'indicateurs, panneaux. Un objet, une page.
   ========================================================================== */
.ecran{
  border-radius:var(--r16);overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,#0D2135,#091829);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             0 40px 90px -40px rgba(4,11,20,.95),
             0 10px 26px -12px rgba(4,11,20,.8);
}
.ecran-barre{
  display:flex;align-items:center;gap:var(--s12);
  padding:9px var(--s14,12px);border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.ecran-barre .chrome-titre{flex:1}
.ecran-barre .console-etat{margin-left:0;display:inline-flex;align-items:center;gap:6px;font-size:9.5px}

.ecran-corps{display:grid;grid-template-columns:186px minmax(0,1fr)}
.ecran-nav{
  display:grid;align-content:start;gap:1px;
  padding:var(--s12) var(--s8);border-right:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}
.ecran-nav a,.ecran-nav span{
  display:block;padding:9px 12px;border-radius:8px;text-decoration:none;
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55);
  transition:background .25s var(--ease),color .25s var(--ease);
}
/* les entrées de gauche sont de vrais liens : elles emmènent à la section */
.ecran-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.ecran-nav a{cursor:pointer}
.ecran-nav .on{background:rgba(59,125,240,.20);color:#fff;box-shadow:inset 0 0 0 1px rgba(143,187,255,.30)}
.ecran-nav-titre{
  margin-top:var(--s14);font-size:9.5px!important;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.32)!important;padding-bottom:2px!important;
}
.ecran-nav-titre:first-child{margin-top:0}

.ecran-vue{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:rgba(255,255,255,.07)}
.ecran-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.07)}
.ekpi{
  background:#0B1E31;padding:var(--s20) var(--s18) var(--s16);
  display:grid;gap:4px;align-content:start;
}
/* En capitales espacées, « Chiffre d'affaires généré » partait sur trois
   lignes au-dessus du nombre. En casse normale il tient en deux. */
.ekpi > span{font-size:11.5px;letter-spacing:0;color:rgba(255,255,255,.52);line-height:1.35}
.ekpi b{
  font-size:clamp(24px,2.9vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#fff;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ekpi em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.50)}
.ekpi .hausse::before{content:'▲ ';color:#4ADE80;font-size:8px}
.ekpi-faces{display:flex}
.ekpi-faces img{
  width:22px;height:22px;border-radius:50%;object-fit:cover;margin-left:-7px;
  border:1.5px solid #0B1E31;
}
.ekpi-faces img:first-child{margin-left:0}
.ekpi-faces .plus{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;margin-left:-7px;
  border:1.5px solid #0B1E31;background:rgba(59,125,240,.24);color:#8FBBFF;
  font-size:9px;font-weight:600;
}

/* minmax(0,…) obligatoire : sinon une colonne refuse de descendre sous sa
   largeur mini de contenu et pousse la suivante hors de l'écran. */
.ecran-panneaux{display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  gap:1px;background:rgba(255,255,255,.07)}
/* la courbe tient la colonne de gauche sur deux rangs ; la trajectoire
   s'étale sous les deux panneaux de droite. */
.epan-large{grid-row:span 2}
.epan-traj{grid-column:2 / span 2}
.epan{background:#0B1E31;padding:var(--s20) var(--s18);display:grid;gap:var(--s12);align-content:start;position:relative}
.epan-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s10)}
.epan-tete b{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
.epan-badge{
  font-size:10.5px;font-weight:500;letter-spacing:.05em;
  padding:4px 10px;border-radius:var(--rf);
  border:1px solid rgba(74,222,128,.32);background:rgba(74,222,128,.10);color:#4ADE80;
}
.epan-large{overflow:hidden}
.epan-large .courbe{position:absolute;inset:auto 0 0 0;height:58%;width:100%}
.epan-large > *:not(.courbe){position:relative;z-index:2}
.epan .spark{height:44px;gap:3px}
.epan .spark i{max-width:12px}
.epan .dash-kpi{padding:var(--s10)}
.epan .compare-ligne{grid-template-columns:76px 1fr 66px;gap:var(--s10)}

@media (max-width:900px){
  .ecran-corps{grid-template-columns:1fr}
  .ecran-nav{display:none}
  .ecran-kpis{grid-template-columns:repeat(2,1fr)}
  .ecran-panneaux{grid-template-columns:1fr}
}
/* la mise en route fait apparaître les tuiles une à une */
.console .ekpi,.console .epan{opacity:0;transform:translateY(10px);filter:blur(3px)}
.console.on .ekpi,.console.on .epan{animation:materialise .7s cubic-bezier(.16,1,.3,1) forwards}
.console.on .ekpi:nth-child(1){animation-delay:1.15s}
.console.on .ekpi:nth-child(2){animation-delay:1.28s}
.console.on .ekpi:nth-child(3){animation-delay:1.41s}
.console.on .ekpi:nth-child(4){animation-delay:1.54s}
.console.on .epan:nth-child(1){animation-delay:1.70s}
.console.on .epan:nth-child(2){animation-delay:1.83s}
.console.on .epan:nth-child(3){animation-delay:1.96s}
.console.on .ecran{animation:materialise .8s cubic-bezier(.16,1,.3,1) .95s both}

/* ==========================================================================
   47. LE SURLIGNAGE — relevé sur libertywebi.fr
   Chez eux : un bloc plein rgb(227,30,36) derrière un span inline-block.
   Ici le bloc se TRACE de gauche à droite, et le texte passe en blanc au
   moment où il est recouvert. Le bleu de marque plutôt que leur rouge : sur
   ce site le rouge dit « ce qui ne marche pas », il ne peut pas dire « n° 1 ».
   ========================================================================== */
.surlig{
  position:relative;display:inline-block;
  padding:0 .14em;margin:0 -.04em;
  color:var(--ink);
  transition:color .35s var(--ease) .22s;
  isolation:isolate;
}
.surlig::before{
  content:'';position:absolute;inset:.02em -.02em .04em;
  background:var(--blue);border-radius:5px;z-index:-1;
  transform:scaleX(0);transform-origin:left center;
  box-shadow:0 0 30px rgba(59,125,240,.45);
  transition:transform .78s cubic-bezier(.16,1,.3,1);
}
.surlig.on{color:#fff}
.surlig.on::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .surlig{color:#fff}
  .surlig::before{transform:scaleX(1);transition:none}
}

/* ==========================================================================
   48. LES CLIENTS — la pile tourne au scroll
   Plus de pastilles sous le carrousel : la section s'épingle et c'est le
   scroll qui fait passer chaque carte devant. Même principe que les autres
   scènes, appliqué à l'éventail.
   ========================================================================== */
@media (min-width:901px){
  /* la section chevauche la fin du constat et s'y pose en fondu :
     rien ne remonte du bas, l'écran change de contenu sur place. */
  #preuve.acte-pile{
    min-height:0;height:240vh;display:block;align-content:normal;padding-block:0;
    margin-top:-100vh;position:relative;z-index:2;
    opacity:var(--ar,1);
  }
  #preuve.acte-pile > .wrap{
    position:sticky;top:0;height:100vh;
    display:grid;align-content:center;
    padding-block:clamp(40px,5vh,64px);
  }
}
#preuve .cf{padding:0}
#preuve .cf-stage{height:clamp(320px,40vh,440px)}
/* la fiche démarre à la hauteur de la carte de devant, pas au-dessus */
@media (min-width:901px){ #preuve .note{margin-top:16px} }

/* ==========================================================================
   49. LA CONSOLE RESTE À L'ÉCRAN
   La séquence d'allumage dure environ deux secondes. Sans épinglage, le
   lecteur la traverse avant qu'elle se termine — il ne voit rien. La section
   se fige donc le temps que l'écran s'allume et se lise, puis relâche.
   ========================================================================== */
#chiffres{
  min-height:0;
  height:300vh;
  display:block;
  align-content:normal;   /* sinon le .wrap est centré et sticky part 1 écran trop bas */
  padding-block:0;
}
#chiffres > .wrap{
  position:sticky;top:0;height:100vh;
  display:grid;align-content:center;
  /* Le menu flotte à 12 px du haut sur 56 px de haut : sans cette marge, la
     fenêtre du dashboard passait dessous. On dégage sous la barre. */
  padding-top:calc(var(--nav-h) + clamp(14px,2.2vh,22px) + clamp(20px,3vh,34px));
  padding-bottom:clamp(28px,4.5vh,52px);
}
#chiffres .console-boot{position:absolute;inset:0;height:100vh;top:0}
/* les équerres suivent la fenêtre épinglée, pas la section entière */
#chiffres .console-coin{position:fixed}
#chiffres .c-hg,#chiffres .c-hd{top:calc(var(--nav-h) + 46px)}
#chiffres .c-bg,#chiffres .c-bd{bottom:46px}
@media (max-width:900px){
  #chiffres{height:auto;min-height:100vh;display:grid;align-content:center}
  #chiffres > .wrap{position:static;height:auto}
  #chiffres .console-coin{display:none}
}

/* ==========================================================================
   50. LE SIMULATEUR TIENT DANS UN ÉCRAN
   Relevé : 940 px de contenu. Ça passe sur un grand écran, ça se coupe sur
   un portable de 800 px. Tout se resserre en unités liées à la hauteur de
   fenêtre, de sorte que le panneau de calcul reste visible sans défiler.
   ========================================================================== */
#simulateur > .wrap{padding-block:clamp(24px,3.4vh,48px)}
#simulateur .head{margin-bottom:clamp(14px,2vh,26px);gap:clamp(6px,1vh,12px)}
#simulateur .t-h2{font-size:clamp(22px,2.6vw,38px)}
#simulateur .t-lead{font-size:clamp(13px,1.15vw,15px)}

#simulateur .sim{gap:clamp(20px,2.6vw,44px);align-items:stretch}
#simulateur .sim-field{padding-block:clamp(7px,1.05vh,15px);gap:clamp(5px,.8vh,10px)}
#simulateur .sim-label span{font-size:clamp(12px,1.05vw,14px)}
#simulateur .sim-label b{font-size:clamp(12.5px,1.1vw,15px)}

/* en dessous de 900 px la section reprend sa hauteur naturelle */
@media (max-width:900px){
  #simulateur{min-height:0;padding-block:var(--sec)}
}

/* la vue « projection » ajoute trois lignes de comparaison : sur un écran
   court elle dépassait de ~50 px. On resserre le pas, pas la lisibilité. */
/* sur un écran court, on resserre le pas — jamais la lisibilité */
@media (max-height:860px) and (min-width:901px){
  #simulateur .scard{padding:var(--s18);gap:var(--s16)}
  #simulateur .sim-inputs{gap:var(--s12)}
  #simulateur .sim-total{font-size:clamp(28px,3.2vw,42px)}
  #simulateur .head{margin-bottom:var(--s16)}
  #simulateur .head .t-lead{display:none}
}

/* ==========================================================================
   51. LA CONSTELLATION DE L'ÉCOSYSTÈME
   Trois familles de métiers reliées entre elles : les setteurs alimentent
   les closers, les closers remontent au Head of Sales. Les points naissent
   un à un, les liens se tracent, puis des impulsions circulent en continu.
   ========================================================================== */
.constel{position:relative;aspect-ratio:480/400;width:100%}
.constel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.constel-liens line{stroke:rgba(143,187,255,.16);stroke-width:1;
  stroke-dasharray:var(--l,200);stroke-dashoffset:var(--l,200);
  transition:stroke-dashoffset .9s var(--ease)}
.constel.on .constel-liens line{stroke-dashoffset:0}

.constel-flux line{
  stroke:#8FBBFF;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:12 999;stroke-dashoffset:var(--l,200);
  opacity:0;
}
.constel.on .constel-flux line{opacity:.9;animation:constelFlux 3.6s linear infinite}
@keyframes constelFlux{to{stroke-dashoffset:0}}

.constel-points circle{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .6s cubic-bezier(.16,1,.3,1);
}
.constel.on .constel-points circle{opacity:1;transform:none}
.constel-points .p-set{fill:rgba(143,187,255,.55)}
.constel-points .p-clo{fill:rgba(143,187,255,.85)}
.constel-points .p-hos{fill:#fff;filter:drop-shadow(0 0 12px rgba(143,187,255,.9))}
.constel.on .constel-points .p-hos{animation:constelPuls 3.6s ease-in-out infinite}
@keyframes constelPuls{0%,100%{r:9}50%{r:11}}

/* les trois étiquettes, posées sur leurs amas */
.constel-eti{
  position:absolute;display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 11px;border-radius:var(--rf);
  border:1px solid var(--line-d);background:rgba(11,26,42,.72);
  backdrop-filter:blur(6px);
  font-size:11px;font-weight:500;color:rgba(255,255,255,.82);white-space:nowrap;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.constel.on .constel-eti{opacity:1;transform:none}
.constel-eti i{font-style:normal;font-weight:600;color:#8FBBFF;font-size:12px}
.constel .e-hos{left:50%;top:6%;translate:-50% 0;transition-delay:.9s}
.constel .e-clo{left:4%;bottom:34%;transition-delay:1.05s}
.constel .e-set{right:4%;bottom:8%;transition-delay:1.2s}

.constel-legende{display:grid;gap:var(--s8);margin-top:var(--s20)}
.constel-legende span{font-size:12px;color:var(--ink-soft);line-height:1.4}
.constel-legende b{color:#fff;font-weight:600}

/* --- le film reprend sa place dans la colonne ------------------------- */
.film{
  position:relative;aspect-ratio:16/10;border-radius:var(--r24);overflow:hidden;
  border:1px solid var(--line);background:#0B1A2A;cursor:pointer;
  box-shadow:0 26px 60px -26px rgba(4,11,20,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.film img,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film img{opacity:.82;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.film:hover img{transform:scale(1.04);opacity:.7}
.film-video{opacity:0}
.film.a-video .film-video{opacity:1}
.film.a-video img{opacity:0}
.film::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,32,.1),rgba(7,19,32,.55))}
.film-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
@media (prefers-reduced-motion:reduce){
  .constel-flux line{animation:none}
  .constel-points .p-hos{animation:none}
}


/* ==========================================================================
   52. L'INSTALLATION — DES CARTES D'ÉTAPE, PAS UN RAIL
   Références : onboard-card et how-it-works. Le principe : les étapes sont
   EMPILÉES, celle qui est en cours passe devant — plus large, plus claire,
   surélevée — pendant que les autres reculent. Sa barre se remplit. Un rail
   avec des pastilles se lit comme un sommaire ; ça, ça se lit comme un
   processus qui avance.
   ========================================================================== */
.frise{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* La première étape se calait sur l'œil de section, donc plus haut que le
   titre : la colonne partait un cran trop haut. Elle démarre maintenant à la
   hauteur du titre lui-même. */
@media (min-width:901px){ #modele .c7{margin-top:34px} }
.frise li{
  position:relative;
  display:grid;grid-template-columns:26px minmax(0,1fr);
  column-gap:var(--s12);row-gap:11px;align-items:center;
  padding:var(--s14) var(--s18);border-radius:14px;
  /* Fonds PLEINS, jamais un voile de blanc : la section est passée à #071320,
     et 5 % de blanc sur du quasi-noir ne fait plus une carte, ça fait une
     tache. Le rang se lit à la valeur du fond et à l'élévation — plus aucune
     étape n'est « à moitié affichée ». */
  /* L'état de repos est déjà PLEIN : une étape qu'on n'a pas encore atteinte
     doit se lire aussi bien que les autres. La progression se joue au ton et
     à l'élévation de l'étape en cours, pas en éteignant les autres. */
  background:#132A40;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  opacity:1;transform:scale(1);
  transition:transform .55s var(--ease),background .55s var(--ease),
             box-shadow .55s var(--ease);
}
/* l'étape faite recule d'un demi-ton, mais reste pleinement lisible */
.frise li.fait{
  transform:scale(.99);background:#152D45;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
/* l'étape en cours vient devant */
.frise li.actif{
  transform:scale(1.012);background:#1C4066;
  box-shadow:inset 0 0 0 1px rgba(143,187,255,.34),
             0 24px 46px -24px rgba(0,0,0,.95);
}

.frise-ico{
  position:relative;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.40);
  transition:box-shadow .45s var(--ease),background .45s var(--ease);
}
.frise-ico i{
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.88);transition:color .45s var(--ease),opacity .3s var(--ease);
}
/* l'anneau tourne tant que l'étape est en cours */
.frise li.actif .frise-ico{box-shadow:inset 0 0 0 1.4px rgba(143,187,255,.32)}
.frise li.actif .frise-ico i{color:#8FBBFF}
.frise li.actif .frise-ico::before{
  content:'';position:absolute;inset:-1.4px;border-radius:50%;
  border:1.4px solid transparent;border-top-color:#8FBBFF;
  animation:friseTourne 1.1s linear infinite;
}
@keyframes friseTourne{to{transform:rotate(360deg)}}
/* une fois faite, le numéro cède la place à la coche */
.frise li.fait .frise-ico{background:#22C55E;box-shadow:none}
.frise li.fait .frise-ico i{opacity:0}
.frise li.fait .frise-ico::after{
  content:'';position:absolute;left:9px;top:5.5px;width:5px;height:10px;
  border:solid #08131F;border-width:0 1.8px 1.8px 0;transform:rotate(42deg);
}

.frise-txt{min-width:0}
.frise-txt b{
  display:block;color:#fff;font-weight:600;
  font-size:clamp(14px,1.2vw,16px);letter-spacing:-.025em;line-height:1.25;
}
.frise-txt em{
  display:block;font-style:normal;margin-top:3px;
  color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.45;
}
.frise li.actif .frise-txt em{color:rgba(255,255,255,.85)}

.frise-barre{
  grid-column:1 / -1;height:4px;border-radius:99px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.frise-barre i{
  display:block;height:100%;width:calc(var(--p,0) * 100%);border-radius:99px;
  background:linear-gradient(90deg,rgba(59,125,240,.75),#8FBBFF);
  transition:width .25s linear;
}
.frise li.fait .frise-barre i{background:linear-gradient(90deg,rgba(34,197,94,.75),#4ADE80)}

/* ce dont nous aurons besoin : une ligne, pas des cartes */
.besoins{
  margin:0 0 var(--s56);padding-top:var(--s28);
  border-top:1px solid var(--line);
}
/* Cette liste est une formalité administrative : elle doit exister, elle ne
   doit pas peser dans la page. Repliée par défaut, elle s'ouvre d'un clic. */
.besoins > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--s12);
  padding-bottom:var(--s6);
}
.besoins > summary::-webkit-details-marker{display:none}
.besoins > summary .t-eyebrow{margin:0}
.besoins > summary em{
  font-style:normal;font-size:11px;letter-spacing:.04em;
  color:rgba(255,255,255,.34);
}
.besoins > summary svg{
  width:16px;height:16px;margin-left:auto;flex:none;
  fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease),stroke .3s var(--ease);
}
.besoins > summary:hover svg{stroke:rgba(255,255,255,.85)}
.besoins[open] > summary svg{transform:rotate(180deg)}
.besoins .besoins-liste{margin-top:var(--s18)}
.besoins[open] .besoins-liste{animation:besoinsOuvre .42s var(--ease) both}
@keyframes besoinsOuvre{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .besoins[open] .besoins-liste{animation:none}
  .besoins > summary svg{transition:none}
}
.besoins-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s12)}

/* Quatre lignes de texte gris sur deux colonnes se lisaient comme une note de
   bas de page. Ce sont quatre choses qu'on demande au client : elles méritent
   d'être posées, chacune dans son cadre, avec son signe. */
.besoins-liste span{
  position:relative;display:grid;align-content:start;gap:var(--s12);
  padding:var(--s16) var(--s16) var(--s18);
  border-radius:var(--r16,16px);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.besoins-liste span:hover{
  background:rgba(59,125,240,.09);transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(143,187,255,.26),0 18px 34px -22px rgba(0,0,0,.9);
}
.besoins-liste em{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:11px;background:rgba(59,125,240,.14);
  box-shadow:inset 0 0 0 1px rgba(143,187,255,.20);
}
.besoins-liste em svg{
  width:17px;height:17px;fill:none;stroke:#8FBBFF;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.besoins-liste b{
  font-size:14.5px;font-weight:500;line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);
}
/* le numéro passe en filigrane dans le coin : il ordonne sans concurrencer */
.besoins-liste i{
  position:absolute;top:var(--s14);right:var(--s14);
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:rgba(143,187,255,.34);
}
@media (max-width:900px){
  .besoins-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s10)}
  .besoins-liste span{padding:var(--s14) var(--s14) var(--s16);gap:var(--s10)}
  .besoins-liste b{font-size:13.5px}
  .besoins-liste em{width:30px;height:30px;border-radius:10px}
  .besoins-liste em svg{width:15px;height:15px}
  .besoins-liste i{top:var(--s12);right:var(--s12);font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .frise li{transform:none}
  .frise li.actif .frise-ico::before{animation:none}
  .frise-barre i{transition:none}
}

/* ==========================================================================
   53. LA CONSOLE RESTE VIVANTE
   Une fois posée, elle ne se fige pas : les barres respirent, la courbe
   brille par intermittence, le point de veille bat. C'est un écran allumé.
   ========================================================================== */
@keyframes sparkVie{0%,100%{transform:scaleY(1)}50%{transform:scaleY(var(--v,1.14))}}
.console.on .spark i{
  transform-origin:bottom;
  animation:sparkVie var(--d,3.4s) ease-in-out var(--r,0s) infinite;
}
@keyframes veille{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.55)}
                  50%     {opacity:.55;box-shadow:0 0 0 5px rgba(74,222,128,0)}}
.console.on .dash-live i,.console.on .console-point{animation:veille 2.2s ease-in-out infinite}
@keyframes balayage{0%,88%,100%{opacity:0}92%{opacity:.5}}
.epan-large::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(143,187,255,.16) 50%,transparent 62%);
}
.console.on .epan-large::after{animation:balayage 7.5s linear 3s infinite}
@keyframes pistePulse{0%,100%{filter:none}50%{filter:brightness(1.22)}}
.console.on .compare-nous .compare-piste i{animation:pistePulse 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .console.on .spark i,.console.on .dash-live i,.console.on .console-point,
  .console.on .epan-large::after,.console.on .compare-nous .compare-piste i{animation:none}
}


/* ==========================================================================
   54. LES DEUX RESPIRATIONS EN CLAIR
   Deux sections sortent du navy : « Ce qu'est Striker » et « Ils nous ont
   confié leur vente ». Le contraste rend le reste plus sombre encore, et
   ces deux-là sont celles où l'on doit LIRE, pas être impressionné.
   Registre : blanc cassé, encre navy, filets fins, ombres portées douces.
   ========================================================================== */
.band--clair{
  position:relative;
  --paper:#FFFFFF;
  --panel:#FFFFFF;
  --card:#FFFFFF;
  --ink:#0A1826;
  --ink-soft:rgba(10,24,38,.60);
  --ink-mute:rgba(10,24,38,.42);
  --line:rgba(10,24,38,.10);
  --line-2:rgba(10,24,38,.17);
  --blue-pale:rgba(59,125,240,.10);
  --sh1:0 1px 2px rgba(10,24,38,.06);
  --sh2:0 16px 38px -18px rgba(10,24,38,.22);
  --sh3:0 34px 70px -28px rgba(10,24,38,.30);
  background:
    radial-gradient(116% 70% at 50% 14%,rgba(59,125,240,.07),rgba(59,125,240,0) 64%),
    #FFFFFF !important;
  color:var(--ink);
  backdrop-filter:none;
  isolation:isolate;
}
/* Plus de filet : un filet marque une coupure, or on veut l'inverse. Le blanc
   sort du navy et y retourne par un dégradé, et la trame de points s'éteint
   avec lui — voir le raccord plus bas. */

.band--clair,
.band--clair .t-h1,.band--clair .t-h2,.band--clair .t-h3,
.band--clair .t-lead,.band--clair .t-body,.band--clair b,.band--clair strong{color:var(--ink)}
.band--clair .t-eyebrow{color:var(--bleu,#3B7DF0)}
.band--clair .t-small,.band--clair .t-xs,.band--clair p{color:var(--ink-soft)}
.band--clair .measure b{color:var(--ink)}

/* le surlignage de titre garde le bleu, mais posé sur du clair */
.band--clair .surlig.on{color:#fff}

/* Un bouton blanc sur une page blanche ne se voit pas : sur les sections
   claires, il prend le bleu nuit de la charte — la même encre que les titres,
   donc le bouton appartient à la page au lieu d'y être posé. */
.band--clair .btn--light{
  background:var(--navy);color:#fff;
  box-shadow:0 12px 26px -12px rgba(11,26,42,.55);
}
.band--clair .btn--light .pip{background:rgba(255,255,255,.14)}
.band--clair .btn--light::before{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
}
.band--clair .btn--light:hover{
  background:var(--navy-deep);
  box-shadow:0 16px 32px -12px rgba(11,26,42,.65);
}

/* le mot de la promesse passe en bleu de marque, sans bloc : le surlignage
   plein est déjà pris par le titre juste au-dessus, deux dans le même bloc
   se neutraliseraient */
.az{color:var(--blue);font-weight:inherit;font-style:italic}
.band--clair .az{color:#1F5FCE}

/* --- les composants passent en clair ---------------------------------- */
.band--clair .ui:not(.ui--plain),
.band--clair .ui-card,.band--clair .ui-metric,.band--clair .quote{
  background:#fff;border-color:var(--line);color:var(--ink);
  box-shadow:var(--sh2);backdrop-filter:none;
}
/* sur du blanc franc, les cartes se tiennent par l'ombre, pas par un fond */
.band--clair .ui-card,.band--clair .ui-metric{background:#FCFDFE}
.band--clair .ui-icon{background:rgba(59,125,240,.10);color:#1F5FCE;box-shadow:none}
.band--clair .ui-icon--ink{background:rgba(10,24,38,.06);color:rgba(10,24,38,.7)}
.band--clair .ui-chip i{background:rgba(10,24,38,.06);color:rgba(10,24,38,.55)}

/* --- le circuit : mêmes formes, encre inversée ------------------------- */
.band--clair .circuit-traces path{stroke:rgba(10,24,38,.16)}
.band--clair .circuit-flux path{stroke:#2C6BE0}
.band--clair .circuit-plots circle{fill:#2C6BE0;opacity:.6}
.band--clair .circuit-puce rect{fill:#0A1826;stroke:rgba(10,24,38,.16)}
.band--clair .circuit-pattes rect{fill:rgba(10,24,38,.35)}
.band--clair .circuit-puce text{fill:#fff}
.band--clair .circuit-puce .circuit-sous{fill:rgba(255,255,255,.55)}
.band--clair .circuit-noeud{color:var(--ink)}
.band--clair .circuit-noeud i{color:#2C6BE0}
.band--clair .circuit-noeud em{color:var(--ink-mute)}
.band--clair .circuit.joue .circuit-puce{animation:puceClair 3.4s ease-in-out infinite}
@keyframes puceClair{0%,100%{filter:drop-shadow(0 10px 20px rgba(10,24,38,.18))}
                     50%   {filter:drop-shadow(0 10px 30px rgba(44,107,224,.42))}}

/* --- la pile de clients ------------------------------------------------ */
.band--clair .cf-card{
  border-color:rgba(10,24,38,.10);
  box-shadow:0 30px 64px -26px rgba(10,24,38,.36),0 0 0 1px rgba(10,24,38,.05);
}
.band--clair .note h3,.band--clair .note b{color:var(--ink)}
.band--clair .note-qui{color:var(--ink-mute)}
.band--clair .note-res > div{border-color:var(--line)}
.band--clair .note-res b{color:#1F5FCE}
.band--clair .cf-dots button{background:rgba(10,24,38,.18)}
.band--clair .cf-dots button.on{background:var(--bleu,#3B7DF0)}


/* ==========================================================================
   55. LA GRILLE FINE DU HERO
   Un quadrillage bleu très léger qui dérive lentement, éteint sur les bords.
   Il donne une assise technique à la page d'accueil sans jamais se voir.
   ========================================================================== */
.grille-fine{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Le quadrillage a été retiré : il ne restait qu'une trame de fond qui
     concurrençait le titre. Seule la nappe lumineuse reste, pour la
     profondeur. */
  -webkit-mask-image:radial-gradient(112% 82% at 50% 44%,#000 8%,rgba(0,0,0,.45) 46%,transparent 78%);
          mask-image:radial-gradient(112% 82% at 50% 44%,#000 8%,rgba(0,0,0,.45) 46%,transparent 78%);
}
/* une lueur qui balaie la grille de temps en temps */
.grille-fine::after{
  content:'';position:absolute;inset:-20%;
  background:radial-gradient(28% 34% at 50% 50%,rgba(143,187,255,.16),transparent 70%);
  animation:grilleLueur 14s ease-in-out infinite;
}
@keyframes grilleLueur{
  0%,100%{transform:translate3d(-18%,12%,0)}
  50%    {transform:translate3d(18%,-12%,0)}
}
.hero > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .grille-fine::after{animation:none}
}


/* ==========================================================================
   56. LA CARTE TRAJECTOIRE
   Deux bornes reliées par une flèche : ce qui est fait, ce qui est visé.
   Le mot « projeté » est écrit, jamais sous-entendu.
   ========================================================================== */
.traj{display:grid;gap:var(--s12);margin-top:var(--s6)}
.traj-bornes{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s16);align-items:center}
.traj-b{display:grid;gap:2px}
.traj-b span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.traj-b sup{font-size:.62em;vertical-align:super}
.traj-b b{font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:-.035em;color:#fff;line-height:1}
.traj-b em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.42)}
.traj-b--cible b{color:#8FBBFF;text-shadow:0 0 22px rgba(143,187,255,.45)}
.traj-b--cible em{color:rgba(143,187,255,.68)}
.traj-fleche svg{width:74px;height:18px;display:block}
.traj-fleche path{
  fill:none;stroke:rgba(143,187,255,.5);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:130;stroke-dashoffset:130;
}
.console.on .traj-fleche path{animation:trajTrace 1.1s ease-out 1.9s forwards}
@keyframes trajTrace{to{stroke-dashoffset:0}}
.traj-piste{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.traj-piste i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(59,125,240,.55),#8FBBFF);
  box-shadow:0 0 12px rgba(59,125,240,.6);
}
.console.on .traj-piste i{animation:trajPiste 1.4s cubic-bezier(.16,1,.3,1) 2.1s forwards}
@keyframes trajPiste{to{width:26%}}   /* 1,3 sur 5 : la barre dit la vérité */
@media (max-width:900px){
  .epan-large,.epan-traj{grid-column:auto;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .traj-fleche path{stroke-dashoffset:0;animation:none}
  .traj-piste i{width:26%;animation:none}
}



/* ==========================================================================
   57. LE SIMULATEUR — GRAMMAIRE DE CARTE
   Référence : access-manager-card. Ce qui fait sa tenue n'est pas un effet,
   c'est une discipline : UNE carte, un padding unique, un rythme vertical
   unique, et CHAQUE rangée bâtie pareil — pastille + deux lignes à gauche,
   valeur à droite, alignées sur la même colonne.

   Deux ajouts par rapport au premier jet :
   · les fonds sont OPAQUES. Empiler des translucides sur du translucide
     donnait une bouillie où plus rien ne se détachait.
   · la carte porte son mode. « Aujourd'hui » est un constat de perte, il est
     rouge. « Avec Striker » est un gain, il est bleu et le chiffre est vert.
     La bascule doit se VOIR, pas seulement se lire.
   ========================================================================== */
#simulateur{padding-block:clamp(34px,4.2vh,56px)}
#simulateur .head{max-width:660px;margin-bottom:var(--s16)}
#simulateur .head .t-lead{font-size:14.5px;line-height:1.5}

.sim{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s20);align-items:stretch;
}

/* --- la carte : fond plein, une seule ombre ---------------------------- */
.scard{
  --acc:#3B7DF0; --acc-clair:#8FBBFF; --acc-faible:rgba(59,125,240,.14);
  position:relative;
  display:grid;align-content:start;gap:var(--s16);
  padding:var(--s20);border-radius:20px;
  background:#0E2338;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 68px -34px rgba(4,11,20,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
/* le mode « constat » : registre rouge, celui de ce qui ne marche pas */
.sim-out[data-mode="auj"]{
  --acc:#E5322B; --acc-clair:#FF8A80; --acc-faible:rgba(229,50,43,.14);
  border-color:rgba(229,50,43,.26);
  box-shadow:0 30px 68px -34px rgba(4,11,20,.95),
             inset 0 1px 0 rgba(255,255,255,.06),
             0 0 0 1px rgba(229,50,43,.10);
}
/* Le mode « projection » : tout ce qui était rouge passe au vert. Le rouge
   dit ce qui part, le vert dit ce qui rentre — c'est la même information
   retournée, elle doit se lire à la couleur avant de se lire au chiffre. */
.sim-out[data-mode="striker"]{
  --acc:#22C55E; --acc-clair:#4ADE80; --acc-faible:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.28);
  box-shadow:0 30px 68px -34px rgba(4,11,20,.95),
             inset 0 1px 0 rgba(255,255,255,.06),
             0 0 0 1px rgba(34,197,94,.14);
}
/* un liseré de couleur en haut de la carte : la bascule se voit d'un coup */
.sim-out::before{
  content:'';position:absolute;left:20px;right:20px;top:0;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  transition:background .4s var(--ease);
}

.scard-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.scard-tete-g{display:flex;align-items:center;gap:var(--s12);min-width:0}
.scard-ico{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--acc-faible);box-shadow:inset 0 0 0 1px var(--acc-faible);
  transition:background .4s var(--ease);
}
.scard-ico svg{width:19px;height:19px;fill:none;stroke:var(--acc-clair);stroke-width:1.7;
               stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.scard-txt b{display:block;font-size:16px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.2}
.scard-txt em{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:2px}

.scard-bloc{display:grid;gap:var(--s12)}
.scard-lab{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.40);
}
.scard-hero{display:grid;gap:var(--s6)}

/* --- LA rangée : une seule et même construction partout ----------------- */
.srow{display:flex;align-items:center;justify-content:space-between;gap:var(--s12)}
.srow-g{display:flex;align-items:center;gap:var(--s12);min-width:0}
.srow-d{display:flex;align-items:center;gap:var(--s10);flex:none}
.srow-ico{
  display:grid;place-items:center;width:29px;height:29px;border-radius:9px;flex:none;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--acc-clair);background:var(--acc-faible);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:color .4s var(--ease),background .4s var(--ease);
}
.srow-ico--fort{color:#08131F;background:var(--acc-clair);box-shadow:none;font-size:13px}
.srow-txt{min-width:0}
.srow-txt b{display:block;font-size:13px;font-weight:500;color:rgba(255,255,255,.92);line-height:1.25}
.srow-txt span{display:block;font-size:11px;color:rgba(255,255,255,.42);margin-top:1px}
.srow-val{
  flex:none;font-size:15px;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.srow-val.hot{color:var(--acc-clair)}

/* le « i » : l'explication se demande, elle ne surgit pas au survol ------ */
.srow-i{
  position:relative;
  display:grid;place-items:center;width:18px;height:18px;flex:none;
  border-radius:50%;cursor:pointer;
  font:600 10px/1 Avenir,-apple-system,serif;font-style:italic;
  color:rgba(255,255,255,.50);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.srow-i:hover{color:#fff;background:rgba(255,255,255,.14)}
.ouvert > .srow > .srow-d > .srow-i,
.ouvert > .srow-i{color:#08131F;background:var(--acc-clair);border-color:transparent}
.srow-i--coin{position:absolute;top:var(--s12);right:var(--s12)}

/* --- les réglages : même rangée, curseur en dessous -------------------- */
.sim-inputs{display:grid;gap:var(--s14)}
.sim-field{display:grid;gap:9px;padding:0;border:0}
.sim-label{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.sim-label span{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.78)}
.sim-label b{
  flex:none;min-width:64px;text-align:center;
  padding:5px 10px;border-radius:9px;
  font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.sim-field input[type=range]{height:4px}

/* --- le chiffre principal --------------------------------------------- */
.sim-total{
  font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;
}
.sim-out[data-mode="auj"] .sim-total{color:#FF8A80;text-shadow:0 0 34px rgba(229,50,43,.35)}
.sim-out[data-mode="striker"] .sim-total{color:#4ADE80;text-shadow:0 0 36px rgba(74,222,128,.38)}
#simSub{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.48)}

/* --- l'écart, les fuites, les leviers : la même carte intérieure -------- */
.sim-vs,.sim-leak,.sim-tr-row{
  position:relative;
  display:grid;gap:9px;padding:var(--s12) var(--s14);border-radius:14px;
  background:#132C45;                       /* opaque : sinon plus rien ne se détache */
  border:1px solid rgba(255,255,255,.07);
}
/* Le « i » du coin est positionné en absolu : sans cette réserve à droite il
   vient coller la valeur de la première ligne — « 24 000 € » l'atteignait
   pile. 12 px d'offset + 18 px de bouton + 16 px de respiration. */
.sim-vs{gap:var(--s10);padding-right:46px}
.sim-leaks{display:grid;gap:8px}
.sim-leak{transition:background .3s var(--ease),border-color .3s var(--ease)}
.sim-leak:hover,.sim-leak.ouvert{background:#183553;border-color:var(--acc-faible)}
.sim-leak .ui-track{height:8px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.sim-leak .ui-track i{
  display:block;height:100%;width:var(--w,0);border-radius:99px;
  background:linear-gradient(180deg,var(--acc-clair),var(--acc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:width .55s cubic-bezier(.16,1,.3,1),background .4s var(--ease);
}
/* l'explication s'ouvre AU-DESSUS : la carte ne change jamais de hauteur */
.sim-aide{
  position:absolute;left:var(--s12);right:var(--s12);bottom:calc(100% + 8px);z-index:8;
  margin:0;padding:11px 13px;border-radius:12px;line-height:1.45;font-size:11.5px;
  background:#08131F;border:1px solid var(--acc-faible);color:rgba(255,255,255,.78);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.9);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.ouvert > .sim-aide{opacity:1;transform:none;pointer-events:auto}
.sim-note{
  margin:0;padding:10px 12px;border-radius:12px;line-height:1.45;
  background:var(--acc-faible);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.60);
}
/* la table de projection : même rangée, deux colonnes sur large écran */
.sim-tr{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-tr-row.is-flat .srow-val{color:rgba(255,255,255,.55)}
@media (max-width:1000px){ .sim-tr{grid-template-columns:1fr} }

/* la bascule prend sa place dans l'en-tête, à droite */
.sim-out .seg{flex:none;margin:0}
.sim-out .seg button{font-size:12px;padding:7px 13px}

#simCta{justify-self:start;margin-top:auto}

@media (max-width:900px){
  .sim{grid-template-columns:1fr;gap:var(--s16)}
  .scard-tete{flex-wrap:wrap;gap:var(--s12)}
}
@media (prefers-reduced-motion:reduce){
  .sim-leak,.sim-leak .ui-track i{transition:none}
}

/* ==========================================================================
   58. LA CONSTELLATION DES PÔLES
   Dans la carte « +30 », des nœuds-avatars reliés en réseau, parcourus par une
   impulsion. Silhouettes neutres : on compte des pôles, pas des personnes.
   ========================================================================== */
.ekpi-constel{display:block;margin-top:var(--s6)}
.constel-kpi{display:block;width:100%;height:auto;max-width:250px;overflow:hidden}

.ck-liens line{stroke:rgba(143,187,255,.22);stroke-width:1}
.ck-liens .ck-saut{stroke:rgba(143,187,255,.10)}

.ck-flux{
  fill:none;stroke:#8FBBFF;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:24 300;stroke-dashoffset:324;
  filter:drop-shadow(0 0 5px rgba(143,187,255,.9));
  opacity:0;
}
.console.on .ck-flux,
.ekpi-constel.vu .ck-flux{animation:ckFlux 4.2s linear 2.2s infinite}
@keyframes ckFlux{
  0%  {stroke-dashoffset:324;opacity:0}
  6%  {opacity:1}
  94% {opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}

/* Le disque doit se détacher du fond de la carte, sinon le réseau se lit
   comme une chenille noire : plus clair que le panneau, jamais plus sombre. */
.ck-fond{fill:#24486E}
.ck-anneau{fill:none;stroke:rgba(143,187,255,.55);stroke-width:1.2}
.ck-tete{fill:rgba(255,255,255,.80)}
.ck-buste{fill:none;stroke:rgba(255,255,255,.80);stroke-width:2;stroke-linecap:round}

/* un nœud sur trois est « actif » : anneau bleu plein et halo qui bat */
.ck-noeud.est-actif .ck-fond{fill:#2E5C8C}
.ck-noeud.est-actif .ck-anneau{stroke:#8FBBFF;stroke-width:1.5}
.ck-noeud.est-actif .ck-tete{fill:#fff}
.ck-noeud.est-actif .ck-buste{stroke:#fff}
.console.on .ck-noeud.est-actif,
.ekpi-constel.vu .ck-noeud.est-actif{animation:ckBat 3.4s ease-in-out calc(var(--r,0s) + 1.2s) infinite}
@keyframes ckBat{
  0%,100%{filter:drop-shadow(0 0 0 rgba(59,125,240,0))}
  50%    {filter:drop-shadow(0 0 7px rgba(59,125,240,.85))}
}

/* Les nœuds se posent par transition, pas par keyframes : si l'animation ne
   part pas, ils sont visibles quand même. */
.ck-noeud{opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--ease) var(--r,0s),transform .5s var(--ease) var(--r,0s)}
.console.on .ck-noeud,
.ekpi-constel.vu .ck-noeud{opacity:1;transform:none}

@media (max-width:900px){ .constel-kpi{max-width:none} }
@media (prefers-reduced-motion:reduce){
  .ck-noeud{opacity:1;transform:none;transition:none;animation:none}
  .ck-flux{display:none}
}

/* ==========================================================================
   59. LE RIDEAU — la même ouverture au lettrage, réutilisable
   Ce qui marche pour NOS CHIFFRES marche pour L'INSTALLATION : la section
   précédente reste ÉPINGLÉE, une plaque se pose dessus en fondu, le mot
   s'écrit en blanc plein, tient, puis se creuse et traverse l'écran — la
   section suivante est déjà en place derrière.
   ========================================================================== */
.rideau{
  position:relative;height:250vh;z-index:3;background:transparent;
  margin-top:-150vh;      /* le voile se pose sur l'équipe épinglée */
  margin-bottom:-200vh;   /* l'installation attend déjà derrière la plaque */
}
.rideau-scene{position:sticky;top:0;height:100vh;pointer-events:none;
  opacity:var(--fond,0);will-change:opacity}
.rideau-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rideau-mot{
  font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:600;letter-spacing:-.045em;
  font-size:var(--taille,0);
}
.rideau-mot-plein{opacity:var(--marque,0)}

/* l'équipe s'épingle : c'est elle que le voile recouvre sans qu'elle bouge */
@media (min-width:901px){
  #equipe{
    min-height:0;height:220vh;display:block;align-content:normal;padding-block:0;
    position:relative;z-index:1;
  }
  #equipe > .wrap{
    position:sticky;top:0;height:100vh;display:grid;align-content:center;
    /* Le haut doit dégager la barre de menu FIXE : sans ça l'œilleton
       « L'ÉQUIPE » venait se coller sous le menu dès que le contenu
       remplissait la hauteur d'écran. */
    padding-block:calc(var(--nav-h) + clamp(34px,5.5vh,68px)) clamp(40px,5vh,64px);
  }
  /* l'installation est déjà épinglée quand les lettres s'ouvrent */
  /* Elle était épinglée 300vh, dont 200vh consommés DERRIÈRE la plaque : une
     fois les lettres ouvertes il ne restait presque plus rien avant qu'elle
     s'en aille. Elle tient maintenant 180vh à découvert. */
  #modele{
    min-height:0;height:380vh;display:block;align-content:normal;padding-block:0;
    position:relative;z-index:2;
    opacity:var(--ar,1);   /* verrou : elle n'apparaît pas avant son titre */
  }
  #modele > .wrap{
    position:sticky;top:0;height:100vh;display:grid;align-content:center;
    padding-block:clamp(40px,5vh,64px);
  }
}
/* les témoignages se posent sur la fin de la méthode, ils ne remontent plus */
@media (min-width:901px){
  #voix{
    min-height:0;height:220vh;display:block;align-content:normal;padding-block:0;
    margin-top:-100vh;position:relative;z-index:2;opacity:var(--ar,1);
  }
  #voix > .wrap{
    position:sticky;top:0;height:100vh;display:grid;align-content:center;
    padding-block:clamp(40px,5vh,64px);
  }
}
/* ==========================================================================
   Le rideau existe AUSSI sur mobile. Même recette que le chargement : pas de
   chevauchement en haut — c'est lui qui fait cohabiter deux scènes — mais un
   chevauchement en bas, pour que l'installation soit déjà sous les lettres
   quand elles s'ouvrent. Sans ça le trou donne sur du vide.
   ========================================================================== */
@media (max-width:900px){
  .rideau{
    /* même raison qu'au chargement : de la course pour que la traversée ait
       assez d'images */
    height:320vh;margin-top:0;margin-bottom:-106vh;
    z-index:3;position:relative;
  }
  /* l'installation attend derrière la plaque, et n'existe pas avant elle */
  #modele{position:relative;z-index:2;opacity:var(--ar,1)}
}
@supports (height:100svh){
  @media (max-width:900px){ .rideau{height:320svh} }
}
@media (prefers-reduced-motion:reduce){
  .rideau{display:none}
}


/* ==========================================================================
   60. LE DASHBOARD REMPLIT L'ÉCRAN
   Il tenait dans une bande de 435 px au milieu d'un écran de 800 : un
   bandeau, pas une console. Il occupe maintenant toute la fenêtre épinglée,
   et les panneaux se partagent la hauteur restante à parts égales.
   ========================================================================== */
@media (min-width:901px){
  #chiffres > .wrap{align-content:stretch;min-height:0}
  #chiffres .ecran{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0}
  #chiffres .ecran-corps{min-height:0}
  #chiffres .ecran-nav{min-height:0}
  #chiffres .ecran-vue{min-height:0;grid-template-rows:auto minmax(0,1fr)}
  #chiffres .ecran-panneaux{min-height:0;grid-auto-rows:minmax(0,1fr)}
  #chiffres .epan{min-height:0;overflow:hidden;align-content:space-between}
  #chiffres .epan-large{align-content:start}
  /* le panneau d'activité : les indicateurs en haut, la sparkline occupe le reste */
  #chiffres .epan:has(.spark){grid-template-rows:auto auto minmax(0,1fr)}
  #chiffres .epan .spark{height:100%;min-height:52px;align-items:flex-end;gap:4px}
  #chiffres .epan .spark i{flex:1;max-width:none;border-radius:3px 3px 0 0}
  /* la trajectoire s'étale sur toute la largeur des deux colonnes */
  #chiffres .epan-traj .traj{align-content:center;height:100%}
  #chiffres .epan-traj .traj-bornes{max-width:560px}
  /* Les valeurs étaient coupées : « 18-21 % » ne tient pas dans 66 px et
     trois indicateurs ne tiennent pas dans 88 px chacun. */
  /* la piste doit garder une largeur : c'est elle qui porte l'information */
  #chiffres .epan .compare-ligne{
    grid-template-columns:minmax(0,1fr) minmax(44px,1.1fr) auto;gap:var(--s8);
  }
  #chiffres .compare-ligne > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #chiffres .compare-ligne > b{text-align:right;white-space:nowrap;font-size:13.5px}
  /* l'en-tête d'un panneau étroit passe à la ligne au lieu d'être rognée */
  #chiffres .epan-tete{flex-wrap:wrap;row-gap:4px}
  #chiffres .dash-kpis{gap:6px}
  #chiffres .epan .dash-kpi{padding:var(--s10) var(--s8)}
  #chiffres .dash-kpi span{font-size:9.5px;letter-spacing:.06em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #chiffres .dash-kpi b{font-size:17px;white-space:nowrap}
  #chiffres .dash-kpi{min-width:0}
  /* le grand panneau lit comme un graphique, pas comme un vide */
  #chiffres .epan-large{position:relative}
  #chiffres .epan-large::before{
    content:'';position:absolute;left:var(--s18);right:var(--s18);top:38%;bottom:var(--s18);
    z-index:1;pointer-events:none;
    background:repeating-linear-gradient(180deg,
      rgba(255,255,255,.055) 0 1px,transparent 1px 25%);
  }
  #chiffres .epan-large .courbe{height:62%;z-index:1}
  #chiffres .ekpi{align-content:center;padding-block:var(--s24)}
  /* la courbe respire sur toute la hauteur libre du grand panneau */
  #chiffres .epan-large .courbe{height:66%}
  #chiffres .epan .spark{height:auto;min-height:44px;flex:1;align-items:flex-end}
  #chiffres .dash-kpis{align-content:start}
}

/* ==========================================================================
   61. LA BASCULE — une phrase, puis le test
   Même partition que le constat : plein écran, épinglé, la phrase se révèle
   mot à mot, puis le simulateur se pose dessus sans que la page bouge.
   ========================================================================== */
.acte-mot{position:relative;height:210vh;background:transparent;z-index:1}
.acte-mot-scene{
  position:sticky;top:0;height:100vh;
  display:grid;align-content:center;justify-items:center;gap:var(--s24);
  padding-inline:var(--gut);text-align:center;background:#070E17;
}
.acte-mot-oeil{margin:0;opacity:var(--oeil,0);transform:translateY(var(--oeilY,14px));}
.acte-mot-phrase{
  max-width:min(980px,100%);text-align:center;
  font-size:clamp(24px,4vw,58px);line-height:1.16;letter-spacing:-.035em;
}
@media (min-width:901px){
  /* le simulateur se pose sur la phrase : il ne remonte pas du bas */
  #simulateur{
    min-height:0;height:200vh;display:block;align-content:normal;padding-block:0;
    margin-top:-100vh;position:relative;z-index:2;opacity:var(--ar,1);
  }
  #simulateur > .wrap{
    position:sticky;top:0;height:100vh;display:grid;align-content:center;
    padding-block:clamp(34px,4.2vh,56px);
  }
}
@media (prefers-reduced-motion:reduce){
  .acte-mot{height:auto;padding-block:var(--sec)}
  .acte-mot-scene{position:static;height:auto}
  .acte-mot-oeil{opacity:1;transform:none}
}

/* ==========================================================================
   62. À QUI ÇA NE CONVIENT PAS — un énoncé à la fois
   Référence : testimonal-slider. Un halo, une phrase au centre, et une rangée
   de pastilles ; celle qui est active porte le rouge — c'est la couleur de ce
   qui ne marche pas partout ailleurs sur le site, elle dit la même chose ici. Trois cartes plates
   devenaient trois consolations ; là, chaque cas se lit seul.
   ========================================================================== */
.dire{position:relative;display:grid;justify-items:center;gap:var(--s24);padding-block:var(--s24)}
/* Le halo s'arrêtait net à 70 % de sa course, dans une boîte arrondie qui le
   coupait au ras du texte : on voyait l'arc de la boîte et le palier du
   dégradé. Ici la lueur atteint exactement zéro au bord de sa propre ellipse,
   par quatre paliers rapprochés, et un flou large mange ce qui pourrait
   encore se lire comme une bande. Aucune arête ne peut apparaître. */
.dire-halo{
  position:absolute;left:50%;top:-9%;translate:-50% 0;
  width:min(920px,116%);aspect-ratio:2.1/1;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(229,50,43,.24)   0%,
    rgba(229,50,43,.145) 32%,
    rgba(229,50,43,.062) 56%,
    rgba(229,50,43,.018) 78%,
    rgba(229,50,43,0)   100%);
  filter:blur(26px);
  animation:direHalo 7s ease-in-out infinite;
}
@keyframes direHalo{0%,100%{opacity:.7}50%{opacity:1}}
.dire-scene{position:relative;z-index:1;display:grid;justify-items:center;gap:var(--s18)}
.dire-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(229,50,43,.12);box-shadow:inset 0 0 0 1px rgba(229,50,43,.30);
}
.dire-ico svg{width:22px;height:22px;fill:none;stroke:#FF6B5E;
              stroke-width:1.9;stroke-linecap:round}
.dire-mot{
  margin:0;max-width:min(820px,100%);text-align:center;
  font-size:clamp(20px,2.9vw,36px);line-height:1.24;letter-spacing:-.03em;
  font-weight:600;color:#fff;text-wrap:pretty;
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.dire-mot b{color:#FF6B5E;font-weight:600}
.dire-mot.change{opacity:0;transform:translateY(8px)}
.dire-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s10)}
.dire-pills button{
  padding:9px 18px;border-radius:999px;cursor:pointer;
  font:500 13px/1 Avenir,-apple-system,sans-serif;letter-spacing:-.01em;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition:color .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.dire-pills button:hover{color:#fff;background:rgba(255,255,255,.09)}
.dire-pills button.on{
  color:#fff;background:#E5322B;border-color:transparent;
  /* la pastille garde sa lueur, mais assez resserrée pour ne pas se mélanger
     au halo du fond et former une flaque */
  box-shadow:0 8px 20px -12px rgba(229,50,43,.85);
}
@media (prefers-reduced-motion:reduce){
  .dire-halo{animation:none}
  .dire-mot{transition:none}
}


/* ==========================================================================
   63. LE MOTIF DE POINTS DES SECTIONS CLAIRES
   Référence : dot-pattern. Une trame de points très pâle, éteinte sur les
   bords par un masque radial. Sur du blanc franc, c'est ce qui empêche la
   page de paraître vide sans jamais attirer l'œil.
   ========================================================================== */
.band--clair > .points{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  --pas:20px; --pt:1.4px;
  background-image:radial-gradient(circle at center,rgba(10,24,38,.154) var(--pt),transparent var(--pt));
  background-size:var(--pas) var(--pas);
  -webkit-mask-image:radial-gradient(118% 86% at 50% 42%,#000 12%,rgba(0,0,0,.5) 48%,transparent 80%);
          mask-image:radial-gradient(118% 86% at 50% 42%,#000 12%,rgba(0,0,0,.5) 48%,transparent 80%);
}
/* une nappe de points plus dense derrière le titre, qui respire lentement */
.band--clair > .points::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at center,rgba(59,125,240,.266) 1.6px,transparent 1.6px);
  background-size:calc(var(--pas) * 2) calc(var(--pas) * 2);
  -webkit-mask-image:radial-gradient(38% 46% at 26% 34%,#000,transparent 72%);
          mask-image:radial-gradient(38% 46% at 26% 34%,#000,transparent 72%);
  animation:pointsRespire 9s ease-in-out infinite;
}
@keyframes pointsRespire{0%,100%{opacity:.55}50%{opacity:1}}
.band--clair > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .band--clair > .points::after{animation:none}
}


/* ==========================================================================
   64. LA COUPURE CLAIR ↔ SOMBRE — nette, pas fondue
   Relevé sur les deux références citées :
     · libertywebi.fr enchaîne des blocs PLEINS qui se coupent net —
       #FBFAF8, #14161C, #FFFFFF, #F3F1EC — aucun dégradé, aucun arrondi.
     · giants.eu ne peint même pas les sections : un seul fond, et un filet
       de 1 px entre chacune.
   Aucun des deux ne fond quoi que ce soit. Un dégradé entre deux aplats est
   toujours une zone morte : ni l'une ni l'autre couleur, et un bord quelque
   part. On coupe donc franchement, et c'est le CONTRASTE qui fait le passage.
   ========================================================================== */
.band--clair{border-block:0}

/* ==========================================================================
   65. LE PIED DE PAGE
   Référence : hover-footer. Le lettrage STRIKER dort en fond, en simple
   contour ; il ne se colore que là où passe le curseur. Le reste est une
   grille de quatre colonnes, la marque à gauche, et une barre légale en bas.
   ========================================================================== */
.pied{
  position:relative;overflow:hidden;isolation:isolate;
  background:#040B14;color:rgba(255,255,255,.60);
  padding:clamp(48px,7vh,86px) 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}
/* la nappe du lettrage, derrière tout le reste */
.pied-fond{
  position:absolute;left:0;right:0;bottom:-4%;height:62%;z-index:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%);
          mask-image:linear-gradient(180deg,transparent,#000 32%);
}
.pied-svg{width:100%;height:100%;display:block}
.pied-mot{
  font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:600;font-size:190px;letter-spacing:-.06em;
}
.pied-mot-trait{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.pied-mot-plein{opacity:0;transition:opacity .45s var(--ease)}
.pied.eveille .pied-mot-plein{opacity:1}

.pied-grille{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:var(--s40) var(--s48);align-items:start;
}
.pied-col--marque{display:grid;justify-items:start;gap:var(--s16);max-width:38ch}
.pied-logo{height:16px;filter:brightness(0) invert(1);opacity:.9}
.pied-col--marque .t-small{color:rgba(255,255,255,.52);line-height:1.6}

.pied-col h3{
  margin:0 0 var(--s16);font-size:12px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.38);
}
.pied-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s10)}
/* on ne vise que les liens de liste : sinon la règle repeint aussi le bouton
   de la colonne marque, et on retombe sur du blanc sur blanc. */
.pied-col ul a{
  display:inline-flex;align-items:center;gap:var(--s10);
  color:rgba(255,255,255,.62);text-decoration:none;font-size:14px;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.pied-col ul a:hover{color:#8FBBFF;transform:translateX(3px)}
.pied-ico{
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.pied-ico svg{width:14px;height:14px;fill:none;stroke:#8FBBFF;stroke-width:1.6;
              stroke-linecap:round;stroke-linejoin:round}
.pied-col ul a:hover .pied-ico{background:rgba(59,125,240,.18);box-shadow:inset 0 0 0 1px rgba(143,187,255,.3)}
/* la pastille qui bat sur « Rejoindre l'équipe » : le recrutement est ouvert */
.pied-vif{
  width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;
  animation:piedVif 2s ease-in-out infinite;
}
@keyframes piedVif{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  60%    {box-shadow:0 0 0 6px rgba(74,222,128,0)}
}

.pied-bas{
  position:relative;z-index:1;
  margin-top:clamp(40px,6vh,72px);padding:var(--s20) 0 var(--s24);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s16);flex-wrap:wrap;
}
.pied-bas .t-xs{color:rgba(255,255,255,.40);margin:0}
.pied-legal{display:flex;gap:var(--s20);flex-wrap:wrap}
.pied-legal a{color:rgba(255,255,255,.45);text-decoration:none;font-size:12px;
              transition:color .25s var(--ease)}
.pied-legal a:hover{color:#8FBBFF}

@media (max-width:900px){
  .pied-grille{grid-template-columns:1fr 1fr;gap:var(--s32)}
  .pied-col--marque{grid-column:1 / -1}
  .pied-mot{font-size:120px}
}
@media (max-width:560px){
  .pied-grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pied-vif{animation:none}
  .pied-col ul a:hover{transform:none}
}


/* ==========================================================================
   66. L'ARCHITECTURE DE L'ÉCOSYSTÈME
   Le nuage de points ne disait rien : on voyait des points, pas une structure.
   Ici on lit un SCHÉMA — qui est au-dessus de qui, qui alimente qui, et par
   où revient l'information. Le tracé se dessine, puis des impulsions
   circulent en continu dans le sens du flux ; celle du retour remonte.
   ========================================================================== */
.archi{position:relative;width:100%}
.archi-svg{display:block;width:100%;height:auto;overflow:visible}

/* --- les liaisons ------------------------------------------------------ */
.ar-traces path{
  fill:none;stroke:rgba(143,187,255,.22);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);
  transition:stroke-dashoffset 1.1s var(--ease);
}
.archi.on .ar-traces path{stroke-dashoffset:0}
.archi.on .ar-traces path:nth-child(1){transition-delay:.10s}
.archi.on .ar-traces path:nth-child(2){transition-delay:.30s}
.archi.on .ar-traces path:nth-child(3){transition-delay:.52s}
.archi.on .ar-traces path:nth-child(4){transition-delay:.52s}
.archi.on .ar-traces path:nth-child(5){transition-delay:.80s}
.archi.on .ar-traces path:nth-child(6){transition-delay:.94s}
.archi.on .ar-traces path:nth-child(7){transition-delay:1.14s}

/* les impulsions : un éclat court qui parcourt la liaison, en boucle */
.ar-flux path{
  fill:none;stroke:#8FBBFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(143,187,255,.9));
  stroke-dasharray:20 900;stroke-dashoffset:920;opacity:0;
}
.archi.on .ar-flux path{animation:arFlux 3.6s linear infinite}
.archi.on .ar-flux path:nth-child(1){animation-delay:1.4s}
.archi.on .ar-flux path:nth-child(2){animation-delay:1.7s}
.archi.on .ar-flux path:nth-child(3){animation-delay:2.0s}
.archi.on .ar-flux path:nth-child(4){animation-delay:2.2s}
.archi.on .ar-flux path:nth-child(5){animation-delay:2.5s}
@keyframes arFlux{
  0%  {stroke-dashoffset:920;opacity:0}
  8%  {opacity:1}
  88% {opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
/* le retour remonte : même trajet, parcouru dans l'autre sens, en vert */
.ar-flux .ar-retour{stroke:#4ADE80;filter:drop-shadow(0 0 6px rgba(74,222,128,.85))}
.archi.on .ar-flux .ar-retour{animation:arRetour 4.4s linear 3s infinite}
@keyframes arRetour{
  0%  {stroke-dashoffset:0;opacity:0}
  8%  {opacity:1}
  88% {opacity:1}
  100%{stroke-dashoffset:920;opacity:0}
}

/* --- les nœuds --------------------------------------------------------- */
/* Registre repris de moving-dot-card : fond quasi noir, filet de 1 px, et
   c'est tout. Pas de remplissage dégradé — la carte se tient par son contour
   et par la lumière qui passe dessus, pas par sa matière. */
.ar-noeud rect{fill:#0A1826;stroke:rgba(255,255,255,.15);stroke-width:1}
.ar-noeud{opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:50% 50%;
          transition:opacity .6s var(--ease),transform .6s var(--ease)}
.archi.on .ar-noeud{opacity:1;transform:none}
.archi.on .ar-n1{transition-delay:.05s}
.archi.on .ar-n1b{transition-delay:.20s}
.archi.on .ar-n2{transition-delay:.40s}
.archi.on .ar-n3{transition-delay:.66s}
.archi.on .ar-n4{transition-delay:.74s}
.archi.on .ar-n5{transition-delay:1.00s}

.ar-titre{
  fill:rgba(255,255,255,.72);font-family:inherit;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-anchor:middle;
}
.ar-nb{
  fill:url(#arNb);font-family:inherit;font-size:28px;font-weight:600;
  letter-spacing:-.045em;text-anchor:middle;
}
.ar-nb--pivot{font-size:23px}
.ar-tetes circle{fill:rgba(255,255,255,.34)}
.archi.on .ar-tetes circle{animation:arTete 3.2s ease-in-out infinite}
.ar-tetes circle:nth-child(2){animation-delay:.4s}
.ar-tetes circle:nth-child(3){animation-delay:.8s}
.ar-tetes circle:nth-child(4){animation-delay:1.2s}
.ar-tetes circle:nth-child(5){animation-delay:1.6s}
@keyframes arTete{0%,100%{fill:rgba(255,255,255,.30)}50%{fill:rgba(143,187,255,.95)}}

/* le pivot : la seule pièce qui respire, parce que c'est elle qui pilote */
.ar-pivot rect{fill:#0B1E33;stroke:rgba(143,187,255,.42)}
.ar-pattes rect{fill:rgba(143,187,255,.45);stroke:none}
.archi.on .ar-pivot{filter:url(#arHalo);animation:arPivot 4s ease-in-out 1.4s infinite}
@keyframes arPivot{
  0%,100%{filter:drop-shadow(0 0 10px rgba(59,125,240,.35))}
  50%    {filter:drop-shadow(0 0 26px rgba(59,125,240,.75))}
}
/* la sortie : c'est là que l'argent arrive, elle est verte */
.ar-sortie rect{fill:rgba(34,197,94,.12);stroke:rgba(74,222,128,.45)}
.ar-sortie .ar-titre{fill:#4ADE80}

/* les petits mots posés sur les liaisons */
.ar-fil{
  fill:rgba(255,255,255,.46);font-family:inherit;font-size:10.5px;
  letter-spacing:.05em;text-anchor:start;
}
.ar-fil--c{text-anchor:middle}
.ar-fil--retour{fill:rgba(74,222,128,.70);text-anchor:middle;font-size:10px;letter-spacing:.09em}
.ar-noeud + .ar-fil,.ar-fil{opacity:0;transition:opacity .5s var(--ease) .9s}
.archi.on .ar-fil{opacity:1}

.archi-legende{display:grid;gap:var(--s8);margin-top:var(--s20)}
.archi-legende span{font-size:12px;color:var(--ink-soft);line-height:1.45}
.archi-legende b{color:#fff;font-weight:600}

@media (max-width:620px){
  .ar-titre{font-size:13px}
  .ar-nb{font-size:24px}
  .ar-fil{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .ar-traces path{stroke-dashoffset:0;transition:none}
  .ar-noeud,.ar-fil{opacity:1;transform:none;transition:none}
  .ar-flux path{display:none}
  .archi.on .ar-pivot,.archi.on .ar-tetes circle{animation:none}
}


/* --- 66 bis. LE REGISTRE MOVING-DOT ------------------------------------ */
/* les règles de repérage : elles passent DERRIÈRE les nœuds, et c'est ça
   qui donne l'impression d'un plan technique plutôt que d'un organigramme */
.ar-reperes line{stroke:rgba(255,255,255,.055);stroke-width:1}
.ar-reperes{opacity:0;transition:opacity .8s var(--ease) .1s}
.archi.on .ar-reperes{opacity:1}

/* le halo qui déborde de l'angle haut-gauche du pivot */
.ar-lueur{opacity:0;transition:opacity 1.2s var(--ease) .5s}
.archi.on .ar-lueur{opacity:1;animation:arLueur 6s ease-in-out 1.8s infinite}
@keyframes arLueur{0%,100%{opacity:.75}50%{opacity:1}}

/* le point qui court sur le contour : la pièce signature de la référence */
.ar-point{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.95));opacity:0;
          transition:opacity .5s var(--ease) 1.2s}
.archi.on .ar-point{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ar-reperes,.ar-lueur,.ar-point{opacity:1;transition:none;animation:none}
  .ar-point{display:none}
}


/* --- 60 bis. LE DASHBOARD SUR UN ÉCRAN COURT ---------------------------- */
/* La marge sous le menu prise, il ne restait plus assez de hauteur : les
   panneaux se coupaient (« Striker +25 % » disparaissait). On resserre le
   pas — la taille des chiffres et la lisibilité, elles, ne bougent pas. */
@media (max-height:780px) and (min-width:901px){
  #chiffres > .wrap{
    padding-top:calc(var(--nav-h) + clamp(14px,2.2vh,22px) + 18px);
    padding-bottom:20px;
  }
  #chiffres .ekpi{padding:var(--s12) var(--s14)}
  #chiffres .ekpi b{font-size:clamp(21px,2.4vw,30px)}
  #chiffres .ekpi > span{font-size:10.5px;line-height:1.3}
  #chiffres .ekpi em{font-size:10.5px}
  #chiffres .ekpi-constel{max-width:186px}
  #chiffres .ekpi-faces img,#chiffres .ekpi-faces .plus{width:18px;height:18px;margin-left:-6px}
  #chiffres .epan{padding:var(--s12) var(--s14);gap:8px}
  #chiffres .epan-tete b{font-size:13px}
  #chiffres .epan-badge{font-size:9.5px;padding:3px 8px}
  #chiffres .compare{gap:5px}
  #chiffres .epan .t-xs{font-size:10.5px;line-height:1.3}
  #chiffres .traj{gap:8px;margin-top:0}
  #chiffres .traj-b b{font-size:21px}
  #chiffres .epan .spark{min-height:34px}
  #chiffres .dash-kpis{gap:5px}
  #chiffres .epan .dash-kpi{padding:8px 6px}
}


/* --- 66 ter. LA PASTILLE STRIKER --------------------------------------- */
/* Elle s'intercale entre l'entreprise et le Head of Sales : c'est le seul
   endroit du schéma où l'on dit QUI pose le pilote. Elle est donc un maillon
   du tracé, pas une décoration posée à côté. */
.ar-marque{opacity:0;transform:translateY(8px);transform-box:fill-box;transform-origin:50% 50%;
           transition:opacity .6s var(--ease),transform .6s var(--ease)}
.archi.on .ar-marque{opacity:1;transform:none}
.ar-marque-fond{fill:#0A1826;stroke:rgba(143,187,255,.55);stroke-width:1.2}
.ar-marque-halo{fill:none;stroke:rgba(143,187,255,.18);stroke-width:1}
.archi.on .ar-marque-halo{animation:arOnde 3.6s ease-out 1.6s infinite}
@keyframes arOnde{
  0%  {r:19;opacity:.9}
  70% {r:34;opacity:0}
  100%{r:34;opacity:0}
}
.ar-marque image{opacity:.95}
@media (prefers-reduced-motion:reduce){
  .ar-marque{opacity:1;transform:none;transition:none}
  .ar-marque-halo{animation:none;opacity:.5}
}


/* ==========================================================================
   67. LA TRAME DE LA SCÈNE D'OUVERTURE
   Sur la plaque nue, le lettrage flottait dans du vide. On pose dessus une
   trame très fine : un quadrillage à la limite du visible, quelques filets
   qui descendent lentement, et des poussières qui dérivent. Rien ne doit
   attirer l'œil — c'est de la profondeur, pas de la décoration.
   ========================================================================== */
.ouv-trame{
  position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  opacity:var(--voile,1);
}

/* --- le ciel : une trentaine de points, un vide au centre --------------- */
.ouv-trame{
  /* la nappe entière dérive très lentement : c'est ce qui fait « espace »
     plutôt que « fond étoilé ». Trois minutes pour un aller-retour. */
  animation:cielDerive 180s ease-in-out infinite alternate;
}
@keyframes cielDerive{
  from{transform:translate3d(-1.2%,0.8%,0) scale(1.015)}
  to  {transform:translate3d(1.2%,-0.8%,0) scale(1)}
}

.etoile{
  position:absolute;width:var(--t,1px);height:var(--t,1px);border-radius:50%;
  background:#DCEAFF;opacity:0;
  animation:scintille var(--d,5s) ease-in-out var(--r,0s) infinite;
  will-change:opacity,transform;
}
/* Le battement ne descend jamais très bas : une étoile qui s'éteint
   complètement ne scintille pas, elle clignote. */
@keyframes scintille{
  0%,100%{opacity:calc(var(--e,.5) * .58);transform:scale(.85)}
  50%    {opacity:var(--e,.5);            transform:scale(1)}
}
/* trois ou quatre points portent une vraie lueur — juste assez pour qu'on
   comprenne que le ciel a de la profondeur */
.etoile.est-vive{
  background:#fff;
  box-shadow:0 0 6px rgba(180,214,255,.9),0 0 14px rgba(120,170,255,.45);
}
/* et l'une d'elles a son éclat en croix, comme une vraie étoile */
.etoile.est-vive::before,
.etoile.est-vive::after{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:linear-gradient(90deg,transparent,rgba(220,234,255,.75),transparent);
}
.etoile.est-vive::before{width:16px;height:1px}
.etoile.est-vive::after{width:1px;height:16px;
  background:linear-gradient(180deg,transparent,rgba(220,234,255,.75),transparent)}

@media (prefers-reduced-motion:reduce){
  .ouv-trame{animation:none}
  .etoile{display:none}
}


/* ==========================================================================
   68. LES MAQUETTES DES CARTES DU SYSTÈME
   Chaque pilier montrait une liste. Il montre maintenant l'OBJET dont il
   parle — la documentation, l'organigramme, le tableau de bord, la revue
   d'appels — en perspective, avec sa barre de fenêtre, et animé en continu.
   Une seule et même carcasse ; seul le corps change.
   ========================================================================== */
.mock{
  position:relative;border-radius:14px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#102B47,#0A1B2D);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 34px 64px -34px rgba(4,11,20,.95),
             inset 0 1px 0 rgba(255,255,255,.07);
  transform:perspective(1500px) rotateX(8deg) rotateY(-7deg);
  transform-origin:50% 100%;
  animation:mockFlotte 11s ease-in-out infinite;
  will-change:transform;
}
@keyframes mockFlotte{
  0%,100%{transform:perspective(1500px) rotateX(8deg)   rotateY(-7deg)   translateY(0)}
  50%    {transform:perspective(1500px) rotateX(5.5deg) rotateY(-3.5deg) translateY(-7px)}
}
/* la lumière qui balaie la vitre, comme sur un vrai écran */
.mock-eclat{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 66%);
  transform:translateX(-120%);
  animation:mockEclat 9s ease-in-out 1.5s infinite;
}
@keyframes mockEclat{0%,64%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

.mock-bar{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.mock-pts{display:flex;gap:5px;flex:none}
.mock-pts i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.mock-pts i:first-child{background:rgba(229,50,43,.55)}
.mock-pts i:nth-child(2){background:rgba(245,190,80,.5)}
.mock-pts i:last-child{background:rgba(74,222,128,.5)}
.mock-bar b{
  flex:1;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.46);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.mock-bar em{
  flex:none;font-style:normal;font-size:9.5px;letter-spacing:.06em;
  padding:2px 7px;border-radius:var(--rf);
  color:#8FBBFF;background:rgba(59,125,240,.16);
}
.mock-corps{position:relative;padding:var(--s16);display:grid;gap:10px}

/* --- 01 · la documentation qui se coche -------------------------------- */
.mock--doc .mk-li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:rgba(255,255,255,.50);
  padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.03);
  animation:mkLiOn 8s ease-in-out infinite;
}
.mock--doc .mk-li:nth-child(1){animation-delay:.2s}
.mock--doc .mk-li:nth-child(2){animation-delay:1.2s}
.mock--doc .mk-li:nth-child(3){animation-delay:2.2s}
.mock--doc .mk-li:nth-child(4){animation-delay:3.2s}
@keyframes mkLiOn{
  0%,4%    {color:rgba(255,255,255,.50);background:rgba(255,255,255,.03)}
  10%,72%  {color:rgba(255,255,255,.92);background:rgba(59,125,240,.10)}
  86%,100% {color:rgba(255,255,255,.50);background:rgba(255,255,255,.03)}
}
.mock--doc .mk-tx{display:block}
.mock--doc .mk-li em{display:block;font-style:normal;font-size:11px;
  color:rgba(255,255,255,.38);margin-top:1px}
.mk-ck{
  position:relative;width:15px;height:15px;border-radius:5px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
  animation:mkCk 8s ease-in-out infinite;animation-delay:inherit;
}
.mock--doc .mk-li:nth-child(1) .mk-ck{animation-delay:.2s}
.mock--doc .mk-li:nth-child(2) .mk-ck{animation-delay:1.2s}
.mock--doc .mk-li:nth-child(3) .mk-ck{animation-delay:2.2s}
.mock--doc .mk-li:nth-child(4) .mk-ck{animation-delay:3.2s}
.mk-ck::after{
  content:'';position:absolute;left:4.5px;top:2px;width:4px;height:8px;
  border:solid #08131F;border-width:0 1.8px 1.8px 0;transform:rotate(42deg) scale(0);
  animation:mkCkV 8s ease-in-out infinite;animation-delay:inherit;
}
.mock--doc .mk-li:nth-child(1) .mk-ck::after{animation-delay:.2s}
.mock--doc .mk-li:nth-child(2) .mk-ck::after{animation-delay:1.2s}
.mock--doc .mk-li:nth-child(3) .mk-ck::after{animation-delay:2.2s}
.mock--doc .mk-li:nth-child(4) .mk-ck::after{animation-delay:3.2s}
@keyframes mkCk{
  0%,4%   {background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
  10%,72% {background:#8FBBFF;box-shadow:inset 0 0 0 1px rgba(143,187,255,0)}
  86%,100%{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
}
@keyframes mkCkV{0%,6%{transform:rotate(42deg) scale(0)}
                 12%,72%{transform:rotate(42deg) scale(1)}
                 84%,100%{transform:rotate(42deg) scale(0)}}

/* --- 03 · le tableau de bord ------------------------------------------- */
.mk-barres{display:flex;align-items:flex-end;gap:7px;height:104px}
.mk-barres i{
  flex:1;border-radius:4px 4px 2px 2px;height:var(--h);
  background:linear-gradient(180deg,rgba(143,187,255,.55),rgba(59,125,240,.22));
  transform-origin:bottom;
  animation:mkBarre 4.4s ease-in-out var(--r,0s) infinite;
}
.mk-barres i.hot{
  background:linear-gradient(180deg,#8FBBFF,#2C6BE0);
  box-shadow:0 0 16px rgba(59,125,240,.5);
}
@keyframes mkBarre{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.14)}}
.mk-axe{display:flex;justify-content:space-between;font-size:9.5px;color:rgba(255,255,255,.32);
        letter-spacing:.08em}

@media (max-width:620px){
  .mock{transform:none;animation:none}
  .mk-barres{height:80px}
  .mk-tuiles{grid-template-columns:1fr}
  .mk-cands{flex-wrap:wrap;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .mock,.mock-eclat,.mk-li,.mk-ck,.mk-ck::after,.mk-cand,.mk-cand::after,
  .mk-pouls,.mk-barres i,.mk-mini i,.mk-rang{animation:none}
  .mk-cand::after{opacity:1;transform:none}
  .mock{transform:none}
  .mk-ck{background:#8FBBFF}
  .mk-ck::after{transform:rotate(42deg) scale(1)}
}


/* --- 02 · le Head of Sales sélectionne les closers ---------------------- */
/* Le motion raconte l'acte, pas la liste : les candidats passent sous
   l'écoute du Head of Sales, la plupart sont écartés, un reste. */
.mk-hos{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  background:rgba(59,125,240,.12);box-shadow:inset 0 0 0 1px rgba(143,187,255,.26);
}
.mk-hos-av{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:linear-gradient(160deg,#3E6EA8,#1B3A5A);
  box-shadow:0 0 0 2px rgba(143,187,255,.32);
}
.mk-hos > div{flex:1;min-width:0}
.mk-hos b{display:block;font-size:12px;font-weight:600;color:#fff;letter-spacing:-.01em}
.mk-hos em{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.46)}
.mk-pouls{width:7px;height:7px;border-radius:50%;flex:none;background:#4ADE80;
          animation:mkPouls 2s ease-in-out infinite}
@keyframes mkPouls{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  60%    {box-shadow:0 0 0 7px rgba(74,222,128,0)}
}

.mk-cands{display:flex;gap:8px;justify-content:space-between;padding:4px 2px 2px}
.mk-cand{
  position:relative;width:30px;height:30px;border-radius:50%;flex:none;
  background:linear-gradient(160deg,#2A4C72,#16304C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  animation:mkCand 9.6s ease-in-out var(--r,0s) infinite;
}
.mk-cand::after{
  content:'✕';position:absolute;right:-3px;bottom:-3px;
  width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;font-size:8px;font-weight:600;
  color:#fff;background:#E5322B;border:1.5px solid #0E2338;
  opacity:0;transform:scale(.5);
  animation:mkVerdict 9.6s ease-in-out var(--r,0s) infinite;
}
.mk-cand.est-pris::after{content:'✓';background:#22C55E}
@keyframes mkCand{
  0%,6%   {box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1);filter:none}
  9%,13%  {box-shadow:inset 0 0 0 2px rgba(143,187,255,.95);transform:scale(1.14);filter:none}
  20%,86% {box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:scale(1);
           filter:grayscale(.7) brightness(.55)}
  94%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1);filter:none}
}
/* celui qu'on garde ne s'éteint pas : il reste net et cerclé de vert */
.mk-cand.est-pris{animation-name:mkCandPris}
@keyframes mkCandPris{
  0%,6%   {box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1)}
  9%,13%  {box-shadow:inset 0 0 0 2px rgba(143,187,255,.95);transform:scale(1.14)}
  20%,86% {box-shadow:inset 0 0 0 2px rgba(74,222,128,.85);transform:scale(1.06)}
  94%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transform:scale(1)}
}
@keyframes mkVerdict{
  0%,14%  {opacity:0;transform:scale(.5)}
  20%,86% {opacity:1;transform:scale(1)}
  92%,100%{opacity:0;transform:scale(.5)}
}
.mk-legende{margin:2px 0 0;font-size:10.5px;color:rgba(255,255,255,.40);line-height:1.4}

/* --- 04 · le tableau de bord du pilotage ------------------------------- */
.mk-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-tuile{
  display:grid;gap:8px;align-content:start;padding:10px 11px;border-radius:11px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.mk-tuile > span{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
                 color:rgba(255,255,255,.40);line-height:1.3}
.mk-tuile b{font-size:22px;font-weight:600;letter-spacing:-.04em;color:#8FBBFF;line-height:1}
.mk-tuile--fort{background:rgba(59,125,240,.12);box-shadow:inset 0 0 0 1px rgba(143,187,255,.26)}
.mk-mini{display:flex;align-items:flex-end;gap:3px;height:26px}
.mk-mini i{
  flex:1;border-radius:2px;height:var(--h);transform-origin:bottom;
  background:rgba(143,187,255,.42);
  animation:mkBarre 4.4s ease-in-out infinite;
}
.mk-mini i:nth-child(2){animation-delay:.3s}
.mk-mini i:nth-child(3){animation-delay:.6s}
.mk-mini i:nth-child(4){animation-delay:.9s}
.mk-mini i:nth-child(5){animation-delay:1.2s;background:#8FBBFF}

.mk-equipe{display:grid;gap:6px}
.mk-rang{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.03);
  animation:mkRang 4.8s ease-in-out var(--r,0s) infinite;
}
@keyframes mkRang{
  0%,4%   {background:rgba(255,255,255,.03)}
  12%,26% {background:rgba(59,125,240,.14)}
  36%,100%{background:rgba(255,255,255,.03)}
}
.mk-av{width:20px;height:20px;border-radius:50%;flex:none;
       background:linear-gradient(160deg,#2A4C72,#16304C)}
.mk-rang b{flex:none;width:88px;font-size:11px;font-weight:500;color:rgba(255,255,255,.72)}
.mk-jauge{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mk-jauge i{display:block;height:100%;width:var(--w,50%);border-radius:99px;
            background:linear-gradient(90deg,rgba(59,125,240,.7),#8FBBFF)}


/* ==========================================================================
   69. LA COULEUR DU HERO, ÉTENDUE AUX SECTIONS BLEUES
   Le hero n'a pas de fond à lui : sa couleur vient de la nappe d'univers,
   #071320. Les sections sombres portaient chacune un navy différent — de
   #091624 à #122B45 — ce qui faisait autant de marches d'escalier au fil du
   scroll. Elles prennent toutes la même, celle du hero. Ce qui alterne,
   c'est clair contre sombre, pas six nuances de bleu.
   ========================================================================== */
#chiffres,#constat,#methode,#voix,#simulateur,#equipe,#modele,
#convient,#faq,#cta{background:#071320}

/* ==========================================================================
   70. MOBILE — LA COURSE DES SCÈNES
   Relevé à 390 px : l'ouverture faisait 3,2 écrans et le chargement 3,6 —
   soit près de sept écrans de pouce avant la première information. Sur un
   grand écran c'est du cinéma, sur un téléphone c'est un péage. On garde les
   mêmes scènes, on raccourcit leur course.
   ========================================================================== */
@media (max-width:900px){
  /* le doigt fait défiler plus vite qu'une molette : les scènes qui se
     lisent au rythme du scroll doivent être plus courtes, pas plus lentes */
  .ouv{height:190vh}
  /* Le chevauchement revient, mais calculé cette fois. Pas en haut — c'est
     lui qui faisait cohabiter le terminal avec le hero. Uniquement EN BAS :
     la console démarre 130 vh avant la fin, donc elle est déjà sous les
     lettres quand elles s'ouvrent. Sans ça, le trou donne sur du vide et il
     n'y a plus d'effet du tout. */
  /* 320 plutôt que 260 : la traversée du lettrage disposait d'un tiers
     d'écran de course, soit une poignée d'images sur un geste rapide — d'où
     l'impression de saccade. Elle en a maintenant deux tiers. */
  .charge{height:320vh;margin-top:0;margin-bottom:-106vh}

  /* La barre de menu flotte au-dessus du contenu : tout titre qui arrive en
     haut de l'écran passe dessous. On réserve donc sa hauteur partout — sauf
     sur le hero, dont la composition est centrée et déjà calibrée. */
  .band:not(.hero),.acte-mot-scene,
  /* ces trois-là portent leur propre padding plus loin dans la feuille :
     sans les nommer, la règle générale ne les atteint pas */
  #simulateur,#constat .plan,#preuve.acte-pile{
    padding-top:calc(var(--nav-h) + clamp(36px,5.5vh,64px));
  }
  /* Ces deux-là sont découvertes par un lettrage : on y atterrit à leur bord
     haut, pas après un scroll. Il leur faut plus de réserve encore. */
  #chiffres,#modele{padding-top:calc(var(--nav-h) + 92px)}
  .acte-plein{height:330vh}
  .acte-mot{height:170vh}

  /* --- le dashboard ---------------------------------------------------- */
  /* sans hauteur de rang imposée, le panneau du CA se tasse et sa courbe
     passe au travers du texte */
  #chiffres .epan-large{min-height:190px;padding-bottom:var(--s28)}
  .epan-large .courbe{height:56%}
  #chiffres .ecran-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .traj-bornes{gap:var(--s12)}
  .traj-fleche svg{width:44px}

  /* --- les cibles tactiles --------------------------------------------- */
  /* Le bouton reste PETIT à l'œil — 22 px, comme sur desktop ou presque —
     mais sa zone de touche est étendue à 40 px par un pseudo invisible.
     On ne grossit pas un élément d'interface pour le rendre cliquable. */
  .srow-i{width:20px;height:20px;font-size:11px}
  .srow-i::after{
    content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:40px;height:40px;border-radius:50%;
  }
  .srow-i--coin{top:var(--s10);right:var(--s10)}
  .dire-pills button{padding:11px 18px;font-size:13.5px}
  .cf-dots button{width:12px;height:12px}
  /* l'explication pousse la mise en page au lieu de flotter : sur un
     téléphone la hauteur n'est pas comptée, et une bulle déborde de l'écran */
  .sim-aide{
    position:static;opacity:1;transform:none;pointer-events:auto;
    display:none;margin-top:8px;
  }
  .ouvert > .sim-aide{display:block}

  /* --- le hero ---------------------------------------------------------- */
  .tbadge{gap:var(--s10);padding:8px 14px 8px 8px;text-align:left}
  .tbadge-txt{line-height:1.35}

  /* --- le pied ---------------------------------------------------------- */
  /* les listes tiennent en deux colonnes : une seule doublait sa hauteur */
  .pied-grille{grid-template-columns:1fr 1fr;gap:var(--s28) var(--s24)}
  .pied-col--marque{grid-column:1 / -1}
  /* Le lettrage reste, mais il descend sous les colonnes et se fait plus
     discret : au doigt le halo le balaie tout seul (voir pied()), il ne doit
     donc pas concurrencer le texte pendant qu'il s'allume. */
  .pied-fond{bottom:-1%;height:26%;opacity:.75}
  .pied-mot{font-size:108px;letter-spacing:-.05em}
  /* on lui laisse sa bande : sinon il vient chevaucher la dernière colonne */
  .pied-grille{padding-bottom:clamp(60px,10vh,110px)}
  .pied-bas{flex-direction:column;align-items:flex-start;gap:var(--s10)}
}
@media (max-width:400px){
  .pied-grille{grid-template-columns:1fr}
}

/* ==========================================================================
   70 bis. LE PIÈGE DU vh SUR MOBILE
   Sur un téléphone, 100vh compte la zone masquée par la barre d'adresse.
   Une scène épinglée en 100vh est donc plus haute que ce qu'on voit, et tout
   ce qu'elle centre verticalement — le logo de l'ouverture au premier chef —
   tombe sous le milieu réel, puis saute quand la barre se rétracte.
   100svh est la hauteur GARANTIE visible : elle ne bouge jamais.
   ========================================================================== */
@supports (height:100svh){
  @media (max-width:900px){
    .ouv-scene,.charge-scene,.plan,.acte-mot-scene,.rideau-scene{height:100svh}
    .ouv{height:190svh}
    .charge{height:320svh}
    .acte-plein{height:330svh}
    .acte-mot{height:170svh}
    #definition,#preuve,#voix,#simulateur,#modele,#convient,#faq,#cta,#chiffres,
    #equipe,#methode{min-height:100svh}
    .hero{min-height:100svh}
  }
}


/* ==========================================================================
   71. LA TRANSITION EN PANNEAU
   Référence : cinematic-landing-hero. Sa grammaire tient en une phrase —
   chaque section est un PANNEAU ARRONDI qui grandit hors du noir jusqu'au
   plein cadre, puis se rétracte en sortant. On ne coupe plus d'un aplat à
   l'autre : la section suivante arrive comme une carte qui devient l'écran.

   Appliqué aux sections en flux normal seulement. Les scènes épinglées ont
   déjà leur propre grammaire (le lettrage qui s'ouvre, le fondu sur place),
   et une transformation sur un ancêtre casserait leur épinglage.
   ========================================================================== */
/* RETIRÉ. Le panneau qui rétrécit et s'arrondit en sortant dessinait
   exactement ce qu'on cherche à faire disparaître : une arête entre deux
   sections, plus un écart de luminosité de part et d'autre. Les fonds doivent
   se fondre l'un dans l'autre — c'est le dégradé continu qui fait la
   transition maintenant, pas un cadre. */
.plaque{
  transform:none;border-radius:0;filter:none;
}
@media (max-width:900px){
  /* moins d'amplitude au doigt : le scroll est plus rapide, et une section
     qui rétrécit trop donne l'impression que la page saute */
  .plaque{--pe:1}
}
@media (prefers-reduced-motion:reduce){
  .plaque{transform:none;border-radius:0;filter:none}
}


/* ==========================================================================
   72. LE MENU MOBILE
   La barre flottante n'a pas la place d'afficher sept sections sur un
   téléphone : le bouton n'ouvrait rien, il sautait au simulateur.

   Première version : sept pastilles pleines empilées. Trop lourd — sept
   blocs sombres alignés font un mur, pas un menu. Ici c'est une liste
   éditoriale : de grands intitulés séparés par un filet, la marque en haut,
   la porte de sortie en bas. Rien ne pèse, tout se lit d'un coup d'œil.
   ========================================================================== */
.nav-burger{
  display:none;position:relative;flex:none;
  width:38px;height:38px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.nav:not(.over-dark) .nav-burger{background:rgba(11,26,42,.06);border-color:rgba(11,26,42,.12)}
.nav-burger i{
  position:absolute;left:11px;width:16px;height:1.6px;border-radius:2px;
  background:currentColor;transition:transform .3s var(--ease),opacity .25s var(--ease);
}
.nav-burger i:first-child{top:16px}
.nav-burger i:last-child{top:21px}

.menum{
  position:fixed;inset:0;z-index:70;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(16px,2.4vh,24px) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom,0px));
  background:#040B14;
  opacity:0;transition:opacity .28s var(--ease);
}
.menum.ouvert{opacity:1}
.menum[hidden]{display:none}
/* la même nappe que le reste du site, pour ne pas atterrir sur un aplat mort */
.menum::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 34% at 74% 8%,rgba(59,125,240,.16),rgba(59,125,240,0) 70%);
}
.menum > *{position:relative;z-index:1}

.menum-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.menum-logo{height:15px;filter:brightness(0) invert(1);opacity:.9}
.menum-x{
  position:relative;width:40px;height:40px;flex:none;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.menum-x i{
  position:absolute;left:12px;top:19px;width:16px;height:1.6px;border-radius:2px;
  background:rgba(255,255,255,.8);
}
.menum-x i:first-child{transform:rotate(45deg)}
.menum-x i:last-child{transform:rotate(-45deg)}

.menum-liens{
  display:grid;align-content:center;
  border-top:1px solid rgba(255,255,255,.09);
  margin-top:clamp(20px,4vh,40px);
}
.menum-liens a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:clamp(15px,2.4vh,22px) 2px;
  border-bottom:1px solid rgba(255,255,255,.09);
  text-decoration:none;color:#fff;
  font-size:clamp(20px,5.6vw,26px);font-weight:600;letter-spacing:-.032em;
  transform:translateY(12px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),color .2s var(--ease);
}
.menum.ouvert .menum-liens a{transform:none;opacity:1}
.menum-liens a:nth-child(1){transition-delay:.05s}
.menum-liens a:nth-child(2){transition-delay:.10s}
.menum-liens a:nth-child(3){transition-delay:.15s}
.menum-liens a:nth-child(4){transition-delay:.20s}
.menum-liens a:nth-child(5){transition-delay:.25s}
.menum-liens a:nth-child(6){transition-delay:.30s}
.menum-liens a:nth-child(7){transition-delay:.35s}
.menum-liens a:active{color:#8FBBFF}
.menum-liens i{
  font-style:normal;font-size:15px;font-weight:400;flex:none;
  color:rgba(143,187,255,.45);
  transition:transform .25s var(--ease),color .2s var(--ease);
}
.menum-liens a:active i{color:#8FBBFF;transform:translate(3px,-3px)}

.menum-pied{
  display:grid;gap:var(--s14);justify-items:stretch;
  opacity:0;transform:translateY(12px);
  transition:transform .5s var(--ease) .40s,opacity .5s var(--ease) .40s;
}
.menum.ouvert .menum-pied{opacity:1;transform:none}
.menum-cta{justify-content:center;padding-block:15px;font-size:15px}
.menum-note{
  margin:0;text-align:center;font-size:11.5px;line-height:1.45;
  color:rgba(255,255,255,.38);
}
body.menu-ouvert{overflow:hidden}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-sep{display:none}
  .nav-burger{display:block}
  .nav{padding-right:6px;gap:var(--s10)}
}
@media (min-width:901px){
  .menum{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .menum,.menum-liens a,.menum-pied{transition:none}
}

/* ==========================================================================
   73. LE BOUTON D'AUDIT SOUS LES BLOCS DE TEXTE
   Chaque bloc explicatif se terminait sur un point. Le lecteur convaincu à
   cet endroit-là n'avait rien à faire : il devait remonter au menu ou
   descendre jusqu'au bas de page. La porte est maintenant sous le texte.
   ========================================================================== */
.bloc-cta{justify-self:start;margin-top:var(--s24)}
@media (max-width:900px){
  .bloc-cta{width:100%;justify-content:center;margin-top:var(--s20)}
}

/* ==========================================================================
   74. LE CARROUSEL CLIENTS SUR MOBILE
   L'éventail de cartes pivotées demande de la largeur : sur un téléphone les
   cartes du fond dépassent du cadre et la carte de devant devient minuscule.
   On passe à UNE carte pleine largeur, et des pastilles pour choisir.
   ========================================================================== */
.cf-dots{display:none;justify-content:center;gap:9px;margin-top:var(--s16)}
.cf-dots button{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;border:0;
  background:rgba(255,255,255,.22);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.band--clair .cf-dots button{background:rgba(10,24,38,.20)}
.cf-dots button.on{background:var(--bleu,#3B7DF0);transform:scale(1.25)}
@media (max-width:900px){
  /* l'éventail ET la fiche latérale cèdent la place à la rangée de cartes
     (l'affichage de .cfm est déclaré au bloc 78, plus bas dans la feuille) */
  .cf,#preuve .note,.cf-dots{display:none}
}


/* ==========================================================================
   75. LES CARTES DU SYSTÈME SUR MOBILE — UN DÉFILEMENT HORIZONTAL
   Empilées verticalement, les quatre cartes faisaient quatre écrans de pouce
   pour une seule idée. À l'horizontale elles tiennent en un geste : la carte
   suivante dépasse toujours d'un doigt sur la droite, donc on sait qu'il y en
   a d'autres sans qu'on ait à l'écrire.
   ========================================================================== */
@media (max-width:900px){
  #methode .c8{
    display:grid;grid-auto-flow:column;
    grid-auto-columns:min(78vw,380px);
    gap:var(--s12);align-items:stretch;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* on déborde jusqu'aux bords de l'écran, mais la première carte reste
       alignée sur la gouttière du reste de la page */
    margin-inline:calc(var(--gut) * -1);
    padding:2px var(--gut) var(--s16);
  }
  #methode .c8::-webkit-scrollbar{display:none}
  #methode .c8 > .ui{
    /* accrochage au début, pas au centre : la carte se cale sur la marge et
       la suivante dépasse franchement à droite */
    scroll-snap-align:start;height:auto;margin-bottom:0;
    display:grid;align-content:start;
  }
  /* le compteur redevient utile : il dit où on en est dans la rangée */
  .pile-jauge{
    display:flex;gap:6px;margin-top:var(--s20);
  }
  .pile-jauge i{
    flex:1;max-width:34px;height:3px;border-radius:2px;
    background:rgba(255,255,255,.14);position:relative;overflow:hidden;
  }
  .pile-jauge i::after{
    content:'';position:absolute;inset:0;border-radius:2px;
    background:var(--blue);box-shadow:0 0 8px rgba(59,125,240,.7);
    transform:scaleX(var(--p,0));transform-origin:left;
    transition:transform .25s var(--ease);
  }
}


/* la durée se lit dans le bouton, à voix basse : on annonce l'engagement
   demandé avant le clic, pas après */
.btn-duree{
  font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:0;
  opacity:.62;margin-left:2px;
}
@media (max-width:520px){
  .btn-duree{display:block;margin:2px 0 0}
}


/* sous 420 px, la cinquième pastille ne fait plus qu'épaissir le bloc */
@media (max-width:420px){
  .tbadge{padding:4px 12px 4px 4px;gap:8px}
  .tbadge-logos img:nth-child(n+5){display:none}
  .tbadge-logos img{width:18px;height:18px;margin-left:-5px}
  .tbadge-txt{font-size:10.5px}
}


/* ==========================================================================
   76. LA SPHÈRE DES CLIENTS QU'ON NE PEUT PAS NOMMER
   Cette carte était un aplat bleu avec un nombre posé dessus — la seule du
   carrousel sans rien à regarder. On ne peut pas montrer leur visage, mais on
   peut montrer qu'ils sont NOMBREUX : une boule de silhouettes qui tourne
   lentement, celles du fond plus petites et plus sourdes.
   Référence : img-sphere.
   ========================================================================== */
.boule{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  -webkit-mask-image:radial-gradient(84% 74% at 50% 44%,#000 42%,rgba(0,0,0,.55) 74%,transparent 100%);
          mask-image:radial-gradient(84% 74% at 50% 44%,#000 42%,rgba(0,0,0,.55) 74%,transparent 100%);
}
.boule-tete{
  position:absolute;left:0;top:0;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:#1B3A5A;box-shadow:inset 0 0 0 1px rgba(143,187,255,.20);
  will-change:transform,opacity;
}
.boule-tete svg{
  width:17px;height:17px;fill:none;
  stroke:rgba(255,255,255,.62);stroke-width:1.7;stroke-linecap:round;
}
.boule-tete svg circle{fill:rgba(255,255,255,.62);stroke:none}
/* une sur cinq porte la couleur : la boule respire sans qu'aucune ne saute aux yeux */
.boule-tete.est-vive{background:#2A5A8E;box-shadow:inset 0 0 0 1px rgba(143,187,255,.45),
                                                   0 0 14px rgba(59,125,240,.35)}
.boule-tete.est-vive svg{stroke:#DCEAFF}
.boule-tete.est-vive svg circle{fill:#DCEAFF}
@media (max-width:900px){
  .boule-tete{width:24px;height:24px}
  .boule-tete svg{width:14px;height:14px}
}

/* Le voile du bas passe PAR-DESSUS la boule, le nombre par-dessus le voile :
   sans ça le « +30 » se posait au milieu des silhouettes. */
.cf-card::after{z-index:2}
.cf-card .cf-logo{z-index:3}
@media (prefers-reduced-motion:reduce){
  .cf-tete,.cf-tete.est-vive{animation:none;opacity:.8}
}


/* La scène qui cède la place s'efface exactement de ce que la suivante gagne
   — voir posee() : sans ça les deux se superposent le temps du fondu. */
@media (min-width:901px){
  #constat .plan,
  #methode > .wrap,
  .acte-mot-scene{opacity:var(--sortie,1)}
}


/* ==========================================================================
   77. LES MONTANTS SIGNÉS
   Le lecteur doit pouvoir ADDITIONNER ce qu'il voit et retomber sur le total
   affiché en haut. Chaque montant porte donc son signe et sa couleur : rouge
   pour ce qui part, vert pour ce qui rentre — et la pastille de gauche porte
   le même signe, pour que l'œil suive la colonne sans lire les chiffres.
   ========================================================================== */
.srow-val.est-perte{color:#FF8A80;font-variant-numeric:tabular-nums}
.srow-val.est-gain {color:#4ADE80;font-variant-numeric:tabular-nums}
.srow-ico--perte{
  color:#FF8A80;background:rgba(229,50,43,.16);
  box-shadow:inset 0 0 0 1px rgba(229,50,43,.30);
  font-size:14px;font-weight:600;
}
.srow-ico--gain{
  color:#4ADE80;background:rgba(34,197,94,.16);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.30);
  font-size:14px;font-weight:600;
}
/* la ligne du manque à gagner est le pivot de la carte : elle se détache */
.sim-vs .srow:last-of-type{
  margin-top:2px;padding-top:var(--s10);
  border-top:1px solid rgba(255,255,255,.09);
}
.sim-vs .srow:last-of-type .srow-val{font-size:17px}


/* ==========================================================================
   78. LES CLIENTS SUR MOBILE — UNE RANGÉE DE CARTES
   Référence : carousel-cards. Une carte par client, image en haut, nom et
   description dessous. Le tout défile à l'horizontale, la suivante dépasse
   toujours d'un doigt. Avant, une carte occupait l'écran entier pour ne
   montrer qu'un visage — il fallait ensuite lire la fiche en dessous.
   ========================================================================== */
.cfm{display:none;grid-auto-flow:column;grid-auto-columns:min(70vw,300px);
     gap:var(--s12);align-items:stretch;
     overflow-x:auto;overscroll-behavior-x:contain;
     /* « proximity » et non « mandatory » : un conteneur à accrochage obligatoire
        est re-accroché par le navigateur à chaque changement de gabarit — et
        sur mobile, la barre d'adresse qui se rétracte en est un. C'est de là
        que venaient les sauts de défilement. */
     scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
     /* sans ce scroll-padding, l'accroche « start » collerait la première carte
        au bord de l'écran au lieu de la caler sur la marge du titre */
     scroll-padding-inline:var(--gut);
     scrollbar-width:none;
     margin-inline:calc(var(--gut) * -1);
     /* le défilement horizontal découpe aussi la verticale : sans cette marge
        basse, l'ombre des cartes était tranchée net par le conteneur et
        laissait une bande grise sous la rangée */
     padding:2px var(--gut) 26px;
}
.cfm::-webkit-scrollbar{display:none}

.cfm-carte{
  /* alignement au début : la carte se cale sur la marge, la suivante dépasse
     franchement à droite — on voit qu'il y en a d'autres sans avoir à essayer */
  scroll-snap-align:start;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  border-radius:var(--r20);overflow:hidden;
  background:#fff;border:1px solid rgba(10,24,38,.10);
  /* ombre courte : deux cartes voisines ne se noircissent plus l'entre-deux */
  box-shadow:0 12px 28px -18px rgba(10,24,38,.22);
}
.cfm-media{position:relative;aspect-ratio:16/11;background:#0E2338;overflow:hidden}
.cfm-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cfm-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,32,0) 46%,rgba(7,19,32,.80));
}
.cfm-media--nuee{background:linear-gradient(165deg,#12365E,#08182A)}
.cfm-media--nuee .boule{opacity:.95}
.cfm-logo{
  position:absolute!important;left:var(--s14);bottom:var(--s12);z-index:2;
  height:19px!important;width:auto!important;object-fit:contain!important;
  filter:brightness(0) invert(1);opacity:.95;
}
.cfm-plus{
  position:absolute;left:var(--s14);bottom:var(--s10);z-index:2;
  font-size:22px;font-weight:600;letter-spacing:-.04em;color:#fff;
}

.cfm-corps{display:flex;flex-direction:column;gap:4px;padding:var(--s14) var(--s16) var(--s16)}
.cfm-corps > b{font-size:16px;font-weight:600;color:#0A1826;letter-spacing:-.025em;line-height:1.2}
/* le calibrage : deux lignes réservées pour le dirigeant, trois pour la
   description. Toutes les cartes tombent alors sur la même hauteur, quelle
   que soit la longueur du texte d'origine. */
.cfm-corps > em{
  font-style:normal;font-size:12px;line-height:1.35;color:rgba(10,24,38,.50);
  min-height:2.7em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.cfm-corps p{
  margin:2px 0 0;font-size:13px;line-height:1.5;color:rgba(10,24,38,.68);
  min-height:4.5em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
/* le chiffre posé sur la photo, à l'opposé du logo */
.cfm-chip{
  position:absolute;right:var(--s12);bottom:var(--s12);z-index:2;
  display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:rgba(7,19,32,.52);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cfm-chip i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.74)}
.cfm-chip b{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.02em}

@media (max-width:900px){ .cfm{display:grid} }

/* ==========================================================================
   79. LE RAPPEL DU TEST
   Le simulateur est l'argument le plus fort de la page, et il arrive au deux
   tiers. Ce bandeau le tient à portée de pouce du début à la fin — puis
   s'efface pendant le test lui-même et sur le CTA final, où il ferait doublon.
   Forme : celle d'une notification (référence team-invitation) — une vignette
   à gauche avec son point de veille, trois lignes, l'action à droite, et la
   croix pour la faire taire. Un bandeau publicitaire s'ignore ; une
   notification se lit.
   ========================================================================== */
.rappel{
  position:fixed;left:50%;bottom:clamp(14px,2.4vh,26px);z-index:55;
  display:flex;align-items:center;gap:var(--s16);
  padding:11px 12px 11px var(--s14);
  border-radius:18px;
  background:rgba(8,18,30,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),
             0 24px 54px -24px rgba(0,0,0,.95);
  translate:-50% 0;
  transform:translateY(140%);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),opacity .35s var(--ease);
}
.rappel.on{transform:none;opacity:1;pointer-events:auto}
.rappel.tu{display:none}

/* la vignette et son point de veille */
.rappel-ico{
  position:relative;flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:12px;
  background:rgba(59,125,240,.14);box-shadow:inset 0 0 0 1px rgba(143,187,255,.22);
}
.rappel-ico img{width:20px;height:20px;object-fit:contain}
.rappel-ico i{
  position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 0 2.5px rgba(8,18,30,.95);
  animation:veille 2.2s ease-in-out infinite;
}

.rappel p{margin:0;display:grid;gap:1px;line-height:1.3}
.rappel b{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em}
.rappel-court{display:none}
.rappel-dit{font-size:12.5px;color:rgba(255,255,255,.58)}
.rappel-dit em{font-style:normal;color:rgba(255,255,255,.86);font-weight:500}
.rappel-meta{font-size:11px;color:rgba(255,255,255,.34);margin-top:2px}
.rappel .btn{flex:none}

.rappel-x{
  flex:none;display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:9px;background:transparent;cursor:pointer;
  transition:background .25s var(--ease);
}
.rappel-x svg{width:14px;height:14px;fill:none;stroke:rgba(255,255,255,.42);
              stroke-width:1.8;stroke-linecap:round}
.rappel-x:hover{background:rgba(255,255,255,.07)}
.rappel-x:hover svg{stroke:rgba(255,255,255,.8)}

@media (max-width:900px){
  .rappel{
    left:var(--gut);right:var(--gut);bottom:10px;translate:0 0;
    gap:var(--s10);padding:9px 8px 9px var(--s10);border-radius:16px;
  }
  /* sur un téléphone, la promesse tient en une ligne : le reste tombe */
  .rappel-dit,.rappel-meta{display:none}
  .rappel-long{display:none}
  .rappel-court{display:block;font-size:13px}
  .rappel-ico{width:32px;height:32px;border-radius:10px}
  .rappel-ico img{width:16px;height:16px}
  .rappel p{flex:1;min-width:0}
  .rappel .btn{padding:9px 9px 9px 14px;font-size:12.5px}
  .rappel .btn .pip{width:20px;height:20px}
  .rappel-x{width:26px;height:26px}
}
/* sur les petits écrans, la vignette cède sa place : c'est la phrase qui doit
   tenir en une ligne, pas l'illustration */
@media (max-width:560px){
  .rappel-ico{display:none}
  .rappel{padding-left:var(--s14)}
}
@media (prefers-reduced-motion:reduce){
  .rappel{transition:none}
  .rappel-ico i{animation:none}
}

/* ==========================================================================
   80. LE FOND DE MARQUE — le dégradé de la charte
   La charte ne pose jamais un aplat : elle pose un DÉGRADÉ, du bleu nuit
   #07151F en haut vers l'azur foncé #132F40 en bas, avec un grain. Et elle
   distingue deux régimes — les pages de contenu restent sourdes, les pages de
   couverture portent la lueur bleue qui monte du bas.
   On applique la même règle : les sections qui se lisent gardent un dégradé
   discret ; les trois moments de bascule portent la lueur.
   ========================================================================== */
:root{
  /* les deux couleurs de marque, dans l'ordre où la charte les pose */
  --nuit:#07151F;
  --azur:#132F40;
  --fond-lecture:linear-gradient(180deg,#07151F 0%,#0B1F2E 62%,#102A3B 100%);
}

/* Chaque section prend le dégradé LÀ OÙ la précédente l'a laissé. Le fond
   descend donc du bleu nuit vers l'azur foncé sur toute la page, sans jamais
   se répéter d'un écran à l'autre — et sans marche à la jonction, puisque la
   couleur de fin de l'une est la couleur de départ de la suivante.
   Les deux respirations claires (« ce qu'est Striker », « ils nous ont confié
   leur vente ») coupent la descente : elle repart d'un cran plus sombre
   derrière chacune, pour que la page ne s'éclaircisse pas indéfiniment. */
/* Chaque section commence par 90 px TRANSPARENTS. Deux couleurs voisines,
   même choisies égales, laissent toujours une arête au raccord — le navigateur
   arrondit, l'écran tranche. En partant de rien, il n'y a plus de bord à
   voir : ce qu'il y a derrière traverse, puis la couleur s'installe. */
/* ------------------------------------------------------------------------
   UN SEUL FOND POUR TOUTE LA PAGE
   Découper le dégradé section par section ne marche pas : chaque section a
   sa propre boîte, donc son propre bord, et deux bords qui se touchent se
   voient toujours — quelle que soit la couleur choisie. La rampe est donc
   posée UNE fois, sur le document entier, et les sections deviennent
   transparentes. Il n'y a plus de raccord, parce qu'il n'y a plus de morceaux.
   ------------------------------------------------------------------------ */
/* C'est L'UNIVERS du hero qui sert de sol à toute la page — la nuit bleue,
   la lueur qui dérive, la poussière. Une seule couche fixe, donc une seule
   valeur de fond du premier au dernier écran : aucune liaison à rater. */
html{background:#0C1E30}
#chiffres,#constat,#methode,#voix,#equipe,#modele,#convient,#faq{
  background:transparent;
}
/* Les sections de fin restent transparentes COMME LE RESTE de la page : les
   rendre opaques leur retirait aussi la lueur et la poussière, et elles ne
   ressemblaient plus aux autres. C'est l'EMBLÈME qu'on éteint, pas le fond —
   il s'efface sur le dernier écran avant « Soyons directs ». */
/* Le simulateur est le seul à rompre la descente : c'est un écran d'outil, il
   doit être le plus sombre du site. Mais une rupture franche dessine une ligne
   en travers de l'écran au moment où il recouvre la scène précédente — il
   part donc de la couleur de celle-ci et plonge dans les premiers 30 %. */
/* Le simulateur reste le plus sombre du site : c'est un écran d'outil. Il ne
   pose pas une couleur mais un VOILE, qui fonce le fond commun sans jamais
   créer de bord — le voile lui-même arrive en fondu sur 140 px. */
#simulateur{
  background:linear-gradient(180deg,
    rgba(3,9,15,0) 0, rgba(3,9,15,.62) 140px, rgba(3,9,15,.78) 38%,
    rgba(3,9,15,.72) 100%);
}


/* --- les moments de couverture : la lueur de la charte ------------------
   Un halo bleu qui monte du bas, exactement comme les pages de titre du
   document de marque. Réservé à trois endroits, sinon l'effet s'use. */
/* la lueur de couverture, posée sur le fond commun : rien d'opaque */
#cta{
  background:
    radial-gradient(128% 74% at 50% 122%, rgba(150,190,236,.30), rgba(150,190,236,0) 62%),
    radial-gradient(74% 42% at 50% 116%, rgba(214,232,252,.22), rgba(214,232,252,0) 60%);
}
/* la bascule est une plaque posée par-dessus une autre scène : elle garde sa
   propre nuit, sinon on verrait la section du dessous à travers */
.acte-mot-scene{
  background:
    radial-gradient(128% 74% at 50% 122%, rgba(150,190,236,.30), rgba(150,190,236,0) 62%),
    radial-gradient(74% 42% at 50% 116%, rgba(214,232,252,.22), rgba(214,232,252,0) 60%),
    linear-gradient(180deg,#0F2A3E 0%,#0B2032 52%,#12314A 100%);
}
/* la scène de bascule est posée au-dessus d'une autre : elle doit rester opaque */
.acte-mot-scene{background-color:#0B2032}

@media (max-width:900px){
  /* sur un téléphone la lueur occupe proportionnellement plus d'écran :
     on la resserre pour qu'elle reste une ambiance, pas un aplat clair */
  .acte-mot-scene{
    background:
      radial-gradient(150% 52% at 50% 122%, rgba(150,190,236,.26), rgba(150,190,236,0) 62%),
      linear-gradient(180deg,#0F2A3E 0%,#0B2032 58%,#102B41 100%);
    background-color:#0B2032;
  }
  #cta{
    background:
      radial-gradient(150% 52% at 50% 122%, rgba(150,190,236,.26), rgba(150,190,236,0) 62%),
      linear-gradient(180deg,#14374C 0%,#102B3E 50%,#163C54 100%);
  }
}

/* --- le détail des leviers, repliable ----------------------------------- */
.sim-pli{margin-top:var(--s4)}
.sim-pli > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--s10);
  padding:10px var(--s12);border-radius:12px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background .25s var(--ease);
}
.sim-pli > summary::-webkit-details-marker{display:none}
.sim-pli > summary:hover{background:rgba(255,255,255,.07)}
.sim-pli > summary > span{
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.sim-pli > summary em{font-style:normal;font-size:11px;color:rgba(255,255,255,.34)}
.sim-pli > summary svg{
  width:15px;height:15px;margin-left:auto;flex:none;fill:none;
  stroke:rgba(255,255,255,.45);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.sim-pli[open] > summary svg{transform:rotate(180deg)}
.sim-pli .sim-tr{margin-top:8px}
.sim-pli[open] .sim-tr{animation:besoinsOuvre .4s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .sim-pli[open] .sim-tr{animation:none}
  .sim-pli > summary svg{transition:none}
}

/* ==========================================================================
   81. LES IMAGES
   La charte ne montre jamais une photo en pleine lumière : ses images sont
   sombres, à contre-jour, la lumière bleue derrière. Nos prises de vue sont
   en lumière du jour — elles reçoivent donc toutes le même traitement, écrit
   ici une fois : désaturation, assombrissement, voile bleu nuit.
   ========================================================================== */
.bande{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s12);margin-top:var(--s28);
}
.bande img{
  width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:14px;display:block;
  filter:saturate(.62) contrast(1.06) brightness(.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),
             0 18px 40px -26px rgba(0,0,0,.9);
  transition:filter .5s var(--ease),transform .5s var(--ease);
}
.bande img:hover{filter:saturate(.78) contrast(1.04) brightness(.86);transform:translateY(-2px)}
@media (max-width:900px){
  .bande{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);margin-top:var(--s20)}
  .bande img{border-radius:11px}
}



/* --- une image dans une section claire ---------------------------------
   Sur blanc, le traitement de marque s'inverse : on ne noircit pas, on
   désature et on refroidit. La photo doit appartenir à la page sans lui
   voler la lumière. */
.photo-clair{margin:var(--s28) 0 0;padding:0}
.photo-clair img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 42%;
  border-radius:18px;display:block;
  filter:saturate(.72) contrast(1.04) brightness(1.02);
  box-shadow:0 1px 0 rgba(10,24,38,.06), 0 26px 54px -30px rgba(10,24,38,.42);
}
@media (max-width:900px){
  .photo-clair{margin-top:var(--s20)}
  .photo-clair img{border-radius:14px;aspect-ratio:16/10}
}

/* La trame cinétique prend la forme de l'emblème : même masque, même position,
   même taille que le filigrane du fond. La marque devient une matière. */
.monde-grille{
  /* le canevas couvre l'écran — c'est en coordonnées d'écran qu'on dessine —
     et c'est le MASQUE qui lui donne la forme et la place de l'emblème */
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;display:block;
  -webkit-mask-image:url(../assets/img/embleme.png);
          mask-image:url(../assets/img/embleme.png);
  -webkit-mask-size:min(120vmin,1400px) auto; mask-size:min(120vmin,1400px) auto;
  -webkit-mask-position:50% 52%; mask-position:50% 52%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:var(--eo,1);
}

/* ==========================================================================
   82. « CE QU'EST STRIKER » — le texte au centre, les photos autour
   Référence : drag-cards. Le titre et le texte tiennent le centre ; des photos
   légèrement de travers sont dispersées de part et d'autre, et se prennent en
   main. Le schéma du système vient dessous, en pleine largeur.
   ========================================================================== */
.def-pile{display:block}
/* la scène des photos ne couvre QUE le bloc central : sans ça les cartes
   descendaient sur le schéma et masquaient ses légendes */
.def-scene{position:relative}
.def-mot{
  max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:2;
  padding-block:clamp(20px,5vh,64px);
}
.def-mot .measure{margin-left:auto;margin-right:auto}

/* --- les photos dispersées --------------------------------------------- */
/* z-index 4 : au-dessus du texte, sinon une carte glissée par-dessus passe
   DERRIÈRE lui et on la croit bloquée */
.def-photos{position:absolute;inset:0 var(--gut);pointer-events:none;z-index:4}
.dcarte{
  position:absolute;margin:0;pointer-events:auto;
  width:min(19vw,214px);
  border-radius:16px;overflow:hidden;background:#fff;padding:7px 7px 9px;
  box-shadow:0 1px 0 rgba(10,24,38,.05), 0 24px 44px -26px rgba(10,24,38,.5);
  cursor:grab;touch-action:none;user-select:none;
  transform:rotate(var(--tilt,0deg));
  transition:box-shadow .3s var(--ease),transform .5s var(--ease);
}
.dcarte img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
  filter:saturate(.72) contrast(1.04) brightness(1.02);
  pointer-events:none;
}
.dcarte:hover{box-shadow:0 1px 0 rgba(10,24,38,.05), 0 32px 54px -28px rgba(10,24,38,.6)}
.dcarte.tenue{
  cursor:grabbing;z-index:9;transition:box-shadow .2s var(--ease);
  box-shadow:0 1px 0 rgba(10,24,38,.06), 0 40px 68px -30px rgba(10,24,38,.65);
}
/* trois à gauche, trois à droite, en quinconce */
.def-photos .d1{left:0;    top:4%;  --tilt:-4.5deg}
.def-photos .d2{left:4%;   top:34%; --tilt:3.2deg}
.def-photos .d3{left:1%;   top:56%; --tilt:-2.2deg}
.def-photos .d4{right:0;   top:8%;  --tilt:4.1deg}
.def-photos .d5{right:4%;  top:38%; --tilt:-3.4deg}
.def-photos .d6{right:1%;  top:58%; --tilt:2.6deg}

/* Sous 1180 px il n'y a plus de marge de part et d'autre du texte : les
   photos reprennent le fil, en rangée sous le bloc. */
@media (max-width:1180px){
  .def-photos{
    position:static;pointer-events:auto;
    display:grid;grid-auto-flow:column;grid-auto-columns:min(38vw,190px);
    gap:var(--s12);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
    scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) var(--s12);
  }
  .def-photos::-webkit-scrollbar{display:none}
  .dcarte{position:static;width:auto;transform:none;cursor:default;scroll-snap-align:start}
  .dcarte:hover{box-shadow:0 1px 0 rgba(10,24,38,.05), 0 24px 44px -26px rgba(10,24,38,.5)}
}
@media (prefers-reduced-motion:reduce){ .dcarte{transform:none} }

/* ==========================================================================
   83. L'ACCORDÉON DES CLIENTS
   Référence : tailwind-image-accordion. Cinq panneaux côte à côte : celui
   qu'on survole s'ouvre et livre sa fiche, les autres se referment sur leur
   nom à la verticale. L'éventail précédent montrait quatre dos de cartes ;
   ici les cinq clients sont là en permanence.
   ========================================================================== */
.acco{
  display:flex;gap:10px;height:clamp(380px,52vh,520px);
  margin-top:var(--s28);
}
.acco-p{
  position:relative;flex:1 1 0;min-width:0;
  border-radius:20px;overflow:hidden;cursor:pointer;
  background:#0E2338;
  box-shadow:inset 0 0 0 1px rgba(10,24,38,.10), 0 22px 46px -28px rgba(10,24,38,.5);
  transition:flex-grow .6s var(--ease),box-shadow .4s var(--ease);
  outline:none;
}
.acco-p.est-ouvert{
  flex-grow:3.6;
  box-shadow:inset 0 0 0 1px rgba(10,24,38,.12), 0 30px 60px -28px rgba(10,24,38,.6);
}
.acco-p:focus-visible{box-shadow:inset 0 0 0 2px var(--blue), 0 30px 60px -28px rgba(10,24,38,.6)}

.acco-media{position:absolute;inset:0}
.acco-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 24%;
  filter:saturate(.72) brightness(.86);
  transition:filter .6s var(--ease),transform .8s var(--ease);
}
.acco-p.est-ouvert .acco-media img{filter:saturate(.9) brightness(.98);transform:scale(1.03)}
.acco-media--boule{background:linear-gradient(165deg,#12365E,#08182A)}
.acco-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,32,0) 34%,rgba(7,19,32,.88) 100%);
}

/* fermé : le nom à la verticale, en bas */
.acco-vert{
  position:absolute;left:50%;bottom:22px;z-index:2;
  transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;white-space:nowrap;
  opacity:1;transition:opacity .35s var(--ease);
}
.acco-p.est-ouvert .acco-vert{opacity:0;transition-duration:.2s}

/* ouvert : la fiche */
.acco-txt{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:grid;gap:5px;align-content:end;
  padding:var(--s20) var(--s20) var(--s20);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease) .12s,transform .45s var(--ease) .12s;
  pointer-events:none;
}
.acco-p.est-ouvert .acco-txt{opacity:1;transform:none}
.acco-logo{height:20px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.95;
           margin-bottom:4px;justify-self:start}
.acco-plus{font-size:24px;font-weight:600;letter-spacing:-.04em;color:#fff;margin-bottom:2px}
.acco-txt > b{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.025em;line-height:1.2}
.acco-txt > em{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.58)}
.acco-txt p{
  margin:4px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);
  max-width:44ch;
}
.acco-res{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s10)}
.acco-res span{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.acco-res i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.7)}
.acco-res b{font-size:13px;font-weight:600;color:#fff}

/* Au doigt, un accordéon horizontal de cinq panneaux ne laisse rien lire :
   il se déplie en colonne, chaque client sur sa propre carte. */
@media (max-width:900px){
  .acco{
    display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,320px);
    height:auto;gap:var(--s12);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
    scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 26px;
  }
  .acco::-webkit-scrollbar{display:none}
  .acco-p{
    flex:none;scroll-snap-align:start;height:clamp(400px,60vh,480px);
    border-radius:16px;
  }
  .acco-p.est-ouvert{flex:none}
  .acco-vert{display:none}
  .acco-txt{opacity:1;transform:none;padding:var(--s16)}
  .acco-txt > b{font-size:17px}
  .acco-txt p{font-size:13px}
  .acco-media img{filter:saturate(.85) brightness(.92)}
}
@media (prefers-reduced-motion:reduce){
  .acco-p,.acco-txt,.acco-media img{transition:none}
}

/* ==========================================================================
   84. LA CARTE DE L'ÉQUIPE — le défilé des postes
   Troisième colonne de la section : les fonctions qu'on installe passent en
   boucle dans un cadre, celle du milieu au premier plan. Sans nom : on montre
   des postes, pas des identités.
   ========================================================================== */
.equipe-carte{display:grid;gap:var(--s16);padding:var(--s16)}
.ec-cadre{
  position:relative;height:clamp(280px,34vh,340px);overflow:hidden;
  border-radius:16px;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  /* les extrémités s'éteignent : le défilé n'a ni début ni fin */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.ec-piste{
  display:grid;gap:var(--s10);padding:var(--s12);
  animation:ecDefile 22s linear infinite;
}
@keyframes ecDefile{ to{ transform:translateY(-50%) } }
.ec-cadre:hover .ec-piste{animation-play-state:paused}
.ec-m{
  display:flex;align-items:center;gap:var(--s12);
  padding:9px 11px;border-radius:12px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ec-m img{
  width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none;
  filter:grayscale(1) contrast(1.05) brightness(.95);
}
.ec-t{display:grid;gap:1px;min-width:0}
.ec-t b{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:-.015em}
.ec-t em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.5)}

.ec-txt{margin:0;display:grid;gap:5px}
.ec-txt b{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.3}
.ec-txt span{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6)}

@media (max-width:900px){
  .ec-cadre{height:250px}
  .ec-piste{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){
  .ec-piste{animation:none}
}