/* ==========================================================================
   _deploiement.css — gabarit « page produit » du rayon Déploiement IA & systèmes
   Étalon : deploiement-ia/diagnostic-ia.html (S66, co-conçue avec Yoni)

   Parti pris A « la console » : la page ressemble à ce qu'elle vend.
   Registre 360IA (déployer), PAS le gabarit objectif (apprendre) — aucun
   emprunt à _objectif.css : ni .skills, ni .s46, ni .meth, ni FAQ à onglets
   S'orienter/Financement (l'univers OPCO n'a rien à faire sur une page produit).

   Ce qui EST repris du site : les variables de charte, la typo, le méga-menu,
   le footer, les moteurs d'animation. Un rayon neuf ne réécrit pas la marque.
   ========================================================================== */

:root{
  --paper:#faf9f6; --ink:#0d0d0c; --mut:#63645f; --faint:#b9b9b2;
  --line:#e6e5df; --klein:#2b3cf3; --nuit:#0a0a23;
  --pad:44px; --wrap:1280px;
  /* propres au rayon : la console */
  --panel:#0e0e1c; --panel-2:#16162a; --panel-line:#2a2a44;
  --panel-txt:#e9e9f2; --panel-mut:#8b8ba6;
  --ok:#3ddc97; --warn:#f5a623;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}
img{max-width:100%;display:block}
::selection{background:var(--klein);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:'Space Mono',monospace}

.eyebrow{display:block;margin-bottom:22px;font-family:'Space Mono',monospace;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
/* convention du site : les crochets sont posés en CSS, jamais écrits dans le HTML */
.eyebrow::before{content:"[ "}
.eyebrow::after{content:" ]"}
.eyebrow--light{color:var(--panel-mut)}
/* le label mono des sous-blocs suit la même convention */
.dvue__lbl::before,.s46__eyebrow::before,.osec__eyebrow::before,.rgrp__k::before{content:"[ "}
.dvue__lbl::after,.s46__eyebrow::after,.osec__eyebrow::after,.rgrp__k::after{content:" ]"}

.btn{display:inline-block;background:var(--ink);color:var(--paper);
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;padding:15px 28px;border-radius:100px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s}
.btn:hover{transform:translateY(-2px);background:var(--klein)}
/* le magnétisme pilote transform en inline : le hover ne doit pas s'y ajouter */
.btn.magnetic{transition:background .35s}
.btn.magnetic:hover{transform:none}
.btn--klein{background:var(--klein)}
.btn--klein:hover{background:var(--ink)}
/* Étalon du site (pages formation / objectif) : le texte NE CHANGE PAS de
   couleur au survol, seule la bordure fonce. Mon hover bleu + une bordure en
   --faint donnaient un lien délavé, hors charte. */
.lnk{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(13,13,12,.35);padding-bottom:3px;
  transition:border-color .3s}
.lnk:hover{border-color:var(--ink)}
/* la flèche vit dans son propre span : elle avance au survol, le mot ne bouge pas */
.lnk i{font-style:normal;display:inline-block;margin-left:6px;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.lnk:hover i{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.lnk:hover i{transform:none}}

/* moteur de révélation (A1 du kit) — repris, jamais réécrit */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ─────────────────────────── 1. HERO ─────────────────────────── */
/* Le hero reprend les marges standard du site (.wrap : 1280 px, 44 px de
   padding). Seul align-items:stretch est conservé — c'est lui qui donne la
   colonne de droite en portrait, pas la largeur. */
.dhero{border-bottom:1px solid var(--line)}
/* padding resserré : le hero doit tenir dans une fenêtre standard sans imposer
   un scroll avant même d'avoir lu la promesse */
.dhero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;padding:118px 0 64px}
.dhero__txt{display:flex;flex-direction:column;justify-content:center}
/* ── MOBILE (S67) : la grille du hero passe ENFIN en une colonne — c'était la
   cause mesurée du débordement latéral (509px pour 500 d'écran, sonde S67) :
   deux colonnes + gap 56 comprimaient la colonne texte sous son contenu. */
@media(max-width:900px){
  .dhero__grid{grid-template-columns:minmax(0,1fr);gap:36px;padding:96px 0 48px}
  /* min-width:auto (défaut des enfants de grille) laissait un contenu de 483px
     de min-content pousser TOUS les enfants hors du rail de 448 (sonde S67) */
  .dhero__grid > *{min-width:0;max-width:100%}
  .dhero__vis{min-height:0}
}

/* colonne de droite : photo PORTRAIT en fond, angles carrés, panneau posé dessus.
   Le ratio 4/5 force le portrait quelle que soit la largeur de la colonne — un
   min-height seul redonnait du paysage sur grand écran. */

.dhero__deck{position:relative;isolation:isolate;width:100%}
.dhero__vis{position:relative;z-index:1;width:100%;aspect-ratio:4/5;min-height:520px;
  display:flex;align-items:center;border-radius:0;overflow:hidden;background:#0a0a0a}
/* Le cadre reste plus haut que large, donc `cover` cale l'image sur la HAUTEUR
   et rogne les côtés : toute la bande orange, centrée, est conservée quelle que
   soit la hauteur du cadre. Le point de visée reste centré pour cette raison. */
/* A8 — la photo est surdimensionnee et pilotee en transform par le JS.
   will-change evite le repaint du cadre a chaque frame de scroll. */
.dhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;z-index:0;filter:saturate(1.05);
  will-change:transform;transform-origin:50% 50%}
.dhero__bg::after{content:""}
/* la console étant désormais centrée, l'assombrissement l'est aussi : le plus
   dense au milieu, pour la lisibilité, et les bords de la photo respirent */
.dhero__vis::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,12,.10) 0%,rgba(8,8,12,.34) 50%,rgba(8,8,12,.14) 100%)}
.dhero__crumb{display:block;font-family:'Space Mono',monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:26px}
.dhero__crumb a{color:var(--mut);text-decoration:none}
.dhero__crumb a:hover{color:var(--klein)}
.dhero__crumb b{color:var(--ink);font-weight:500}
.dhero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.03em;
  font-weight:600;margin:0 0 24px}
.dhero__promise{text-wrap:balance;font-family:'Instrument Serif',serif;font-style:normal;
  font-size:clamp(25px,2.8vw,35px);line-height:1.2;color:var(--ink);margin:0 0 26px}
.dhero__lead{font-size:14.5px;line-height:1.68;color:var(--mut);max-width:56ch;margin:0 0 32px}
.dhero__ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ─────────────── console du hero : le visuel signature ─────────────── */
/* Pile de fenêtres : trois plans derrière la console, décalés vers le haut et la
   droite, dont on ne voit que la barre. Blur et opacité dégressifs → profondeur
   réelle plutôt qu'un aplat. Perspective portée par le conteneur. */
/* Cascade sous la console : trois pages empilées derrière elle, chacune plus
   étroite et remontée. Elles restent DANS le bloc photo (overflow:hidden), donc
   le décalage est symétrique — un décalage latéral les ferait rogner d'un côté. */
/* flex:0 0 100% et pas seulement width:100% — en flex item, une pile dont le
   contenu est plus court que le cadre se rétracte à sa plus longue ligne et
   dérive vers la gauche de la photo (mesuré S66 : centre 951 contre 1032). */
.cons__stack{position:relative;z-index:2;width:100%;flex:0 0 100%;
  perspective:1600px;transform-style:preserve-3d;
  padding:74px 44px 44px 44px}
.cons__ghost{position:absolute;z-index:1;height:76px;border-radius:13px 13px 5px 5px;
  background:rgba(18,18,24,.62);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.20);border-bottom:0;pointer-events:none;
  top:calc(74px - var(--k) * 21px);
  left:calc(44px + var(--k) * 13px);
  right:calc(44px + var(--k) * 13px);
  filter:blur(calc(var(--k) * .45px));
  opacity:calc(.95 - var(--k) * .17);
  transform:translateZ(calc(var(--k) * -26px))}
.cons__ghost::after{content:"";position:absolute;top:12px;left:15px;
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.26);
  box-shadow:12px 0 0 rgba(255,255,255,.18),24px 0 0 rgba(255,255,255,.12)}

/* La console posée sur la photo : verre sombre, pas un aplat opaque.
   Registre minimaliste de la référence Sanity — contours fins, aucun aplat de
   couleur, la hiérarchie passe par la typo et l'opacité, pas par des badges. */
.cons{position:relative;z-index:3;
  background:linear-gradient(168deg,rgba(24,24,30,.68) 0%,rgba(10,10,14,.8) 58%);
  backdrop-filter:blur(24px) saturate(1.25);
  border:0;border-radius:13px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(255,255,255,.16)}

/* Contour « glossy glass » : un dégradé de blanc appliqué en anneau de 1 px via
   deux masques composés (le remplissage est évidé, seul le liseré subsiste).
   Une border unie ne peut pas varier d'intensité sur son pourtour ; ici le haut
   capte la lumière et le bas s'éteint, comme une arête de verre. */
.cons::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:linear-gradient(158deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.20) 26%,
    rgba(255,255,255,.05) 52%,
    rgba(255,255,255,.10) 78%,
    rgba(255,255,255,.30) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}

/* reflet diagonal, très bas en opacité : ce qui donne le « verre » plutôt que
   le simple panneau sombre translucide */
.cons::after{content:"";position:absolute;top:0;left:0;right:0;height:46%;z-index:5;
  pointer-events:none;border-radius:13px 13px 0 0;
  background:linear-gradient(172deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 46%,transparent 100%)}
.cons__bar{display:flex;align-items:center;gap:9px;padding:10px 15px;
  background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.09)}
.cons__dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.cons__name{margin-left:8px;font-family:'Space Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.9);letter-spacing:.04em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cons__name b{color:rgba(255,255,255,.9);font-weight:400}
.cons__tabs{display:flex;gap:2px;padding:0 12px;background:transparent;
  border-bottom:1px solid rgba(255,255,255,.09);overflow-x:auto;scrollbar-width:none}
.cons__tabs::-webkit-scrollbar{display:none}
/* Le soulignement de l'onglet actif passe par un pseudo-élément, pas par une
   border-bottom : une bordure transparente sur les onglets inactifs masquait le
   filet du conteneur sur toute leur largeur — la ligne semblait disparaître. */
.cons__tab{position:relative;flex:0 0 auto;background:none;border:0;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:rgba(255,255,255,.42);padding:10px 12px;
  transition:color .25s}
/* bottom:0 et non -1px : le conteneur porte overflow-x:auto pour le défilement
   des onglets, et un overflow rogne aussi ce qui dépasse en hauteur — le trait
   posé un pixel plus bas était coupé net. */
.cons__tab::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:2px;
  background:transparent;transition:background .25s}
.cons__tab:hover{color:rgba(255,255,255,.75)}
.cons__tab.is-active{color:rgba(255,255,255,.95)}
.cons__tab.is-active::after{background:rgba(255,255,255,.85)}
.cons__body{padding:15px 15px 16px;min-height:0}
/* en-tête de vue : la grille de lecture, pas la donnée.
   C'est ce qui distingue la console d'une maquette décorative — le visiteur
   apprend COMMENT on regarde son entreprise, pas les chiffres d'une autre. */
.cons__head{padding:0 0 12px;margin:0 0 3px;border-bottom:1px solid rgba(255,255,255,.09)}
.cons__head p{margin:0 0 9px;font-size:12.5px;line-height:1.48;color:rgba(255,255,255,.86)}
.cons__head p:last-child{margin-bottom:0}
.cons__head b{display:block;font-family:'Space Mono',monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.4);
  font-weight:400;margin-bottom:4px}
.cons__head em{font-style:normal}
.cons__legend{margin:15px 0 0;text-align:center;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.02em;color:var(--mut);line-height:1.5}
/* Lignes séparées par un filet, sans carte encadrée : c'est ce qui distingue
   un tableau de bord sobre d'un empilement de badges. La couleur ne sert plus
   de fond, elle se réduit à une pastille de 5 px devant l'étiquette. */
.cons__row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.07);
  opacity:0;transform:translateY(8px);animation:consIn .5s cubic-bezier(.16,1,.3,1) forwards}
.cons__row:last-child{border-bottom:0}
@keyframes consIn{to{opacity:1;transform:none}}
.cons__lbl{font-size:12.5px;color:rgba(255,255,255,.88);line-height:1.35}
.cons__meta{display:block;font-family:'Space Mono',monospace;font-size:10px;
  color:rgba(255,255,255,.4);margin-top:4px;letter-spacing:.03em}
.cons__tag{display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Mono',monospace;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.05em;white-space:nowrap;color:rgba(255,255,255,.55);
  border:0;padding:0;background:none}
.cons__tag::before{content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.3);flex:0 0 auto}
.cons__tag--ok::before{background:var(--ok)}
.cons__tag--klein::before{background:#8f9aff}
.cons__tag--warn::before{background:var(--warn)}
@media (prefers-reduced-motion:reduce){.cons__row{animation:none;opacity:1;transform:none}}

/* ─────────────── bande de logos clients (composant du site) ───────────────
   Repris tel quel de l'accueil et des pages objectif : 39 logos doublés, la
   piste translate de -50% et la boucle est invisible. Moteur du kit, pas une
   animation maison. */
.logos{padding:62px 0 70px}
.conf__band{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* L'espacement passe en margin-right et NON en gap : avec un gap flex,
   scrollWidth vaut 2*serie + (2n-1)*gap, donc translateX(-50%) tombe un
   demi-gap trop court et la bande saute de 42 px à chaque tour (S66). */
.conf__track{display:flex;align-items:center;gap:0;width:max-content;
  animation:confTick 480s linear infinite;will-change:transform;backface-visibility:hidden}
.conf__track img{height:36px;width:auto;margin-right:84px;filter:grayscale(1);opacity:.88}
@keyframes confTick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.conf__track{animation:none}}

/* ────────────── 2. LE POINT DE DÉPART — décalque .skills ──────────────
   Layout S52 Sanity, repris à l'identique de formations/acculturation-ia :
   eyebrow centré, titre 50px/600 + A2, lead centré, grille 2 colonnes à filets
   border-top, titres blancs clamp(17-22), textes gris #a9aaa2, sans numéros.
   Valeurs copiées de la référence, pas réinterprétées. */
.skills{background:#0b0b0b;color:var(--paper);padding:118px 0 130px}
/* comme sur l'étalon : les cartes ne se dérobent pas au scroll (dégraissage S55) */
.skills .scard{opacity:1;transform:none;transition:none}
.skills .eyebrow{display:block;text-align:center;color:#8f9089;margin-bottom:16px}
/* un seul étalon de titre de section : .osec__h2 (500 / 42px / -.018em).
   Deux familles de graisse cohabitaient, ça se voyait (Yoni S66). */
.skills__h2{text-align:center;font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.1;margin:0;text-wrap:balance}
.skills__lead{max-width:none;text-align:center;margin:70px auto 90px;
  font-size:17px;line-height:1.55;color:#f0f0ec}
.skills__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;max-width:900px;margin:0 auto}
.scard{border-top:1px solid rgba(244,243,238,.22);padding:40px 0 60px}
.scard h3{font-size:clamp(17px,1.8vw,22px);font-weight:500;line-height:1.2;
  letter-spacing:-.015em;margin:0 0 22px}
.scard p{font-size:15.5px;line-height:1.55;color:#a9aaa2;max-width:44ch;margin:0}
@media (max-width:760px){
  .skills{padding:48px 0 90px}
  .skills__grid{grid-template-columns:1fr;gap:0}
  .skills__lead{margin:44px auto 56px}
  .skills__lead br{display:none}
  .scard{padding:30px 0 40px}
}

/* ─────────────────────────── 2bis. TENSION (page mère) ─────────────────────────── */
/* ── page mère : la position (manifeste) — texte Yoni verbatim S66 ────────
   Entre le constat et la gamme : le problème, puis la conviction, puis la
   réponse. Registre manifeste sobre : filets, serif en clôture. */
.dphi{padding:110px 0;border-top:1px solid var(--line)}
.dphi__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.16;margin:0 0 26px;max-width:30ch;text-wrap:balance}
.dphi__h2 i{font-style:normal;color:var(--mut)}
/* la citation ILEV : en exergue serif, entre le titre et le corps */
.dphi__quote{font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(19px,2vw,25px);line-height:1.4;color:var(--ink);margin:0 0 30px}
.dphi__lead{font-size:16.5px;line-height:1.75;color:var(--mut);max-width:62ch;margin:0 0 44px}
.dphi__list{list-style:none;padding:0;margin:0 0 52px;border-top:1px solid var(--ink);max-width:640px}
.dphi__list li{padding:15px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.5;color:var(--mut)}
.dphi__list li b{color:var(--ink);font-weight:500}
.dphi__close{font-family:'Instrument Serif',serif;font-size:clamp(22px,2.4vw,30px);
  line-height:1.32;letter-spacing:-.01em;margin:0}
@media(max-width:760px){.dphi{padding:80px 0}}


/* ══════════ PAGE MÈRE — bloc RESTAURÉ depuis le transcript (S66 soir) :
   les styles bureau de dgam/dmet/dkpi/dmar/dvlt/dcas/dsta/dfin avaient été
   détruits par une édition par troncature ; seuls les overrides responsive
   avaient survécu. Récupérés à l'identique. ══════════ */
.dgam{padding:104px 0;border-top:1px solid var(--line)}
.dgam h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 16px;max-width:22ch}
.dgam__lead{font-size:16.5px;line-height:1.6;color:var(--mut);max-width:56ch;margin:0 0 20px}
.dgam__traj{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 46px;padding:0;list-style:none}
.dgam__traj li{font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:7px 13px}
.dgam__traj li b{color:var(--klein);font-weight:400}
.dgam__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.dgam__c{display:block;text-decoration:none;color:inherit;padding:30px 30px 34px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:background .4s}
.dgam__c::after{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;
  background:var(--klein);transition:width .55s cubic-bezier(.16,1,.3,1)}
.dgam__c:hover{background:#f4f3ee}
.dgam__c:hover::after{width:100%}
.dgam__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.dgam__n{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--klein);letter-spacing:.06em}
.dgam__v{font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--faint)}
.dgam__c h3{margin:0 0 9px;font-size:19.5px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.dgam__c p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.dgam__c[aria-disabled="true"]{pointer-events:none}
.dgam__soon{display:inline-block;margin-left:8px;font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:.06em;color:var(--faint);border:1px solid var(--line);
  border-radius:100px;padding:2px 7px;vertical-align:middle}
.dkpi{padding:104px 0;background:#f4f3ee;border-top:1px solid var(--line)}
.dkpi h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 46px;max-width:20ch}
.dkpi__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:26px}
.dkpi__c{border-top:2px solid var(--ink);padding-top:18px}
.dkpi__c h3{margin:0 0 8px;font-size:16.5px;font-weight:600}
.dkpi__c p{margin:0;font-size:14px;line-height:1.55;color:var(--mut)}
.dkpi__note{margin:44px 0 0;font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(21px,2.3vw,28px);line-height:1.3;max-width:30ch}
.dmar{padding:104px 0;background:var(--nuit);color:var(--panel-txt)}
.dmar h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 46px}
.dmar__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--panel-line);border:1px solid var(--panel-line)}
.dmar__c{background:var(--nuit);padding:34px 28px 30px}
.dmar__c b{display:block;font-size:clamp(30px,3.6vw,42px);line-height:1.06;
  letter-spacing:-.03em;font-weight:600;margin-bottom:14px;color:#fff}
.dmar__c b em{font-style:normal;color:var(--klein)}
.dmar__c p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--panel-mut)}
.dmar__src{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.03em;
  color:#5f6080;display:block}
.dvlt{padding:104px 0}
.dvlt__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start}
.dvlt h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 18px;max-width:16ch}
.dvlt p{font-size:16px;line-height:1.65;color:var(--mut);margin:0 0 16px}
.dvlt__kick{font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(20px,2.1vw,26px);line-height:1.32;color:var(--ink);margin:26px 0 0}
.dvlt__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.dvlt__list li{display:flex;gap:14px;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.dvlt__list li i{font-family:'Space Mono',monospace;font-style:normal;font-size:10.5px;
  color:var(--faint);letter-spacing:.05em;flex:0 0 auto}
.dcas{padding:104px 0;background:var(--ink);color:var(--paper);border-top:1px solid var(--line)}
.dcas h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 46px}
.dcas__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.dcas__c{border:1px solid rgba(250,249,246,.18);border-radius:12px;padding:32px 30px;
  transition:border-color .35s,background .35s}
.dcas__c:hover{border-color:rgba(250,249,246,.42);background:rgba(250,249,246,.04)}
.dcas__c h3{margin:0 0 14px;font-size:clamp(20px,2.1vw,26px);font-weight:600;
  letter-spacing:-.02em;line-height:1.2}
.dcas__c h3 em{font-style:normal;color:#8f9aff}
.dcas__c p{margin:0;font-size:15px;line-height:1.6;color:var(--faint)}
.dsta{padding:104px 0}
.dsta h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 46px}
.dsta__list{border-top:1px solid var(--ink)}
.dsta__row{display:grid;grid-template-columns:1.1fr .9fr auto;gap:34px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line)}
.dsta__row p{margin:0}
.dsta__sit{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.dsta__act{font-size:15px;line-height:1.5;color:var(--mut)}
.dmet{padding:104px 0;border-top:1px solid var(--line)}
.dmet h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 56px}
.dmet__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:0;
  border-top:1px solid var(--ink)}
.dmet__step{padding:26px 24px 30px 0;border-right:1px solid var(--line);position:relative}
.dmet__step:last-child{border-right:0}
.dmet__step::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;
  background:var(--klein);transition:width .8s cubic-bezier(.16,1,.3,1)}
.dmet__step.is-in::before{width:calc(100% - 24px)}
.dmet__n{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--klein);
  letter-spacing:.06em;display:block;margin-bottom:12px}
.dmet__step h3{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.dmet__step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.dfin{background:var(--klein);color:#fff;padding:114px 0;text-align:center}
.dfin h2{font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.03em;
  font-weight:600;margin:0 auto 28px;max-width:19ch}
.dfin p{font-size:17px;line-height:1.6;margin:0 auto 40px;max-width:52ch;color:rgba(255,255,255,.86)}
.dfin .btn{background:#fff;color:var(--ink)}
.dfin .btn:hover{background:var(--ink);color:#fff}

/* trajectoire de la gamme : le curseur bleu s'intensifie verbe après verbe —
   même langage que les jalons .mstep, en filet bas (page mère, S66) */
.dgam__traj li{position:relative;padding-bottom:12px}
.dgam__traj li::after{content:"";position:absolute;left:0;right:14px;bottom:0;height:3px;
  background:rgba(43,60,243,var(--o,.3))}
.dgam__traj li:last-child::after{right:0}

.dten{background:var(--nuit);color:var(--panel-txt);padding:104px 0}
.dten h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 52px;max-width:20ch}
.dten__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--panel-line);border:1px solid var(--panel-line)}
.dten__cell{background:var(--nuit);padding:30px 26px;transition:background .4s}
.dten__cell:hover{background:var(--panel-2)}
.dten__n{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--klein);
  letter-spacing:.06em;display:block;margin-bottom:14px}
.dten__cell p{margin:0;font-size:15px;line-height:1.55;color:var(--panel-txt)}
.dten__note{margin:52px 0 0;font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(21px,2.3vw,29px);line-height:1.3;color:#fff;max-width:34ch}

/* ────────── 3. LE PÉRIMÈTRE — décalque .s46 de l'étalon objectif ──────────
   Kit Sanity S46, valeurs reprises à l'identique. Écarts déjà assumés en amont :
   angles droits (la réf. arrondit, la DA ILEV non — S63) et Space Mono à la
   place d'IBM Plex Mono. */
.s46{background:#0b0b0b;color:#fff;padding:72px 0 96px}
.s46__grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid;
  grid-template-columns:1.3fr 1fr;gap:64px;align-items:stretch}
.s46__eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#87877e;margin-bottom:18px;display:block}
.s46__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.1;margin:0 0 14px;text-wrap:balance}
/* sous-titre de section : le gabarit va toujours par trois — eyebrow, titre,
   ligne qui dit ce qu'on regarde (Yoni S66). */
.s46__sub{font-size:16px;line-height:1.6;color:#a9aaa2;margin:0 0 38px;max-width:52ch}
.s46__row{border-top:1px solid #292927;padding:22px 0;display:grid;
  grid-template-columns:230px 1fr;gap:24px}
.s46__row:last-child{border-bottom:1px solid #292927}
.s46__row--seul{grid-template-columns:1fr}
.s46__row--seul h3{font-size:16px;font-weight:400;color:#c9c9c2}
.s46__row h3{font-size:21px;font-weight:500;letter-spacing:-.01em;margin:0}
.s46__row p{font-size:14.5px;line-height:1.55;color:#c9c9c2;margin:0}
.s46__side{position:relative;height:100%;min-height:100%}
/* la trame déborde la colonne : elle commence plus haut et finit plus bas (S65) */
.s46__dots{position:absolute;left:0;right:0;top:-64px;bottom:-84px;z-index:0;
  background-image:radial-gradient(#5b5b56 1px,transparent 1.4px);background-size:14px 14px}
.s46__card{position:relative;z-index:1;background:#0b0b0b;padding:54px 0 58px 84px;
  display:flex;flex-direction:column;justify-content:center;will-change:transform}
.s46__note{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(23px,2.3vw,32px);
  line-height:1.28;color:#fff;max-width:24ch;margin:0}
/* soulignement fin et décalé — pas le trait épais par défaut de <u> */
.s46__note u{text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.5)}
@media (max-width:900px){
  .s46__grid{grid-template-columns:1fr;gap:0}
  .s46__row{grid-template-columns:1fr;gap:8px}
  .s46__card{padding:44px 0 10px 0}
  .s46__dots{display:none}
}

/* ─────────────────────────── 3bis. PÉRIMÈTRE (ancien) ─────────────────────────── */
.dsco{padding:104px 0}
.dsco h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;
  font-weight:600;margin:0 0 56px}
.dsco__list{border-top:1px solid var(--line)}
.dsco__row{display:grid;grid-template-columns:minmax(200px,.85fr) 1.15fr;gap:40px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dsco__row h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.dsco__row p{margin:0;font-size:15.5px;line-height:1.6;color:var(--mut)}

/* ────────── 4. LE LIVRABLE CENTRAL — fond clair, layout tabulaire ──────────
   Registre rationnel : la grille de qualification est montrée COMME une grille
   (cellules à filets, numérotées), pas comme une liste de pastilles. Ce que la
   section vend est un outil de comparaison — la forme doit le dire. */
.dvue{padding:104px 0;background:var(--paper);border-top:1px solid var(--line)}
.dvue__head{max-width:760px;margin:0 0 38px}
.dvue h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.1;margin:0 0 18px}
.dvue__lead{font-size:16px;line-height:1.62;color:var(--mut);margin:0}
.dvue__lbl{display:block;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 20px}
/* les 8 critères : vraie grille, filets partagés */
.dvue__grid{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.dvue__cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 20px 26px}
.dvue__n{display:block;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.06em;color:var(--faint);margin-bottom:12px}
.dvue__cell h3{font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:0}
.dvue__cell p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--mut)}
/* les 5 sorties : rangées, pas cartes */
.dvue__outs{margin:62px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.dvue__outs li{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.4}
.dvue__outs i{font-family:'Space Mono',monospace;font-style:normal;font-size:10.5px;
  letter-spacing:.06em;color:var(--faint)}
@media (max-width:900px){
  .dvue{padding:76px 0}
  .dvue__grid{grid-template-columns:repeat(2,1fr)}
  .dvue__outs li{grid-template-columns:44px 1fr;gap:14px;font-size:15.5px}
}
@media (max-width:560px){.dvue__grid{grid-template-columns:1fr}}

/* ────────── 5. LE DÉROULÉ — décalque .meth, variante claire ──────────
   Structure et jalons repris de l'étalon objectif ; seule la paire fond/texte
   change : crème + encre au lieu de l'aplat Klein, sur demande Yoni. Le Klein
   reste en accent sur les jalons — combinaison existante du kit, pas une
   couleur improvisée ([[kit-combos-source-verite-couleurs]]). */
/* ni filet ni respiration de 140 px au-dessus du déroulé : la section noire
   qui précède fait déjà la coupure (Yoni S66). */
.meth{background:var(--paper);color:var(--ink);padding:64px 0 104px}
.meth .eyebrow{color:var(--mut)}
.meth__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.1;max-width:34ch;margin:0;text-wrap:balance}
/* chaque jalon dit ce qu'il PRODUIT : sans livrable, une méthode reste une
   intention. Les sorties sont les livrables de la page, rattachés (S66). */
.mstep__out{display:block;margin-top:14px;padding-top:14px;padding-top:12px;
  border-top:1px solid rgba(13,13,12,.16);font-size:12.5px;line-height:1.5;color:var(--ink)}
.mstep__out b{display:block;font-family:'Space Mono',monospace;font-size:9px;
  font-weight:400;text-transform:uppercase;letter-spacing:.12em;
  color:var(--mut);margin-bottom:5px}
.meth__sub{font-size:16px;line-height:1.6;color:var(--mut);margin:16px 0 0;max-width:52ch}
/* second temps du titre, comme sur l'étalon : même corps, en gris */
.meth__h2 i{font-style:normal;color:var(--mut)}
.meth__h2 .mono{font-family:'Inter',sans-serif;font-weight:400;font-size:.74em;
  letter-spacing:-.02em;display:inline-block;margin-top:.18em;opacity:.62}
/* Le lead disparaît : son contenu descend sous chaque jalon, réparti par étape.
   Un pavé de 4 phrases ne se lisait pas ; la même matière, calée sous le mot
   qu'elle décrit, se lit d'un coup d'œil. */
.mstep__d{display:block;margin-top:12px;font-family:'Space Mono',monospace;
  font-size:9.5px;line-height:1.65;letter-spacing:.05em;text-transform:uppercase;
  /* hauteur plancher = 5 lignes : c'est la description la plus longue qui
     décidait de la position du bloc « ce qui en sort » (mesuré S66) */
  color:var(--mut);display:block}
@media (max-width:900px){.mstep__d{font-size:10px}}
/* colonnes automatiques : figée à 5, la grille renvoyait la 6ᵉ étape à la
   ligne sur les pages qui en ont six (Yoni S66). minmax(0,·) empêche une
   colonne de s'élargir sur son plus long mot. */
/* sous-grille : chaque partie d'un jalon (curseur, numéro, titre, description,
   « ce qui en sort ») occupe SA rangée, partagée par toutes les colonnes. Les
   hauteurs plancher ne suffisaient pas — une description plus longue décalait
   son bloc de sortie (mesuré S66). */
.meth__steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto;gap:26px;margin-top:74px}
/* jalons roadmap : deux montants et un curseur qui monte d'étape en étape */
/* colonne : le bloc « ce qui en sort » se cale en bas, sinon il flotte à une
   hauteur différente sur chaque jalon (Yoni S66) */
.mstep{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 5}
.mstep::before{content:"";display:block;height:150px;margin-bottom:18px;
  border-left:1px solid rgba(43,60,243,.20);border-right:1px solid rgba(43,60,243,.20)}
/* le curseur monte ET s'intensifie d'une étape à l'autre : la progression se lit
   deux fois, en hauteur et en densité de bleu */
.mstep::after{content:"";position:absolute;left:0;right:0;
  top:calc((1 - var(--y,.1))*150px - 5px);height:5px;
  background:rgba(43,60,243,var(--o,.34))}
/* repli si le générateur n'a pas posé les variables */
.mstep:nth-child(1){--y:.10;--o:.16}
.mstep:nth-child(2){--y:.30;--o:.34}
.mstep:nth-child(3){--y:.52;--o:.55}
.mstep:nth-child(4){--y:.74;--o:.78}
.mstep:nth-child(5){--y:.96;--o:1}
/* les montants suivent la même montée, plus discrètement */
.mstep::before{border-color:rgba(43,60,243,calc(.10 + var(--o,.34) * .16))}
.mstep__n{font-family:'Space Mono',monospace;font-size:12px;display:block;
  margin-bottom:10px;color:var(--mut)}
.mstep__t{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.meth__steps .mstep:nth-child(1){transition-delay:0s}
.meth__steps .mstep:nth-child(2){transition-delay:.14s}
.meth__steps .mstep:nth-child(3){transition-delay:.28s}
.meth__steps .mstep:nth-child(4){transition-delay:.42s}
.meth__steps .mstep:nth-child(5){transition-delay:.56s}
.meth__steps .mstep:nth-child(6){transition-delay:.70s}
@media (max-width:1100px){
  .meth__steps{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}
  .mstep{display:flex;flex-direction:column;grid-row:auto}
}
@media (max-width:900px){
  .meth{padding:86px 0}
  .meth__steps{grid-template-columns:repeat(2,1fr);gap:30px 26px;margin-top:52px}
  .mstep::before{height:96px}
  .mstep::after{top:calc((1 - var(--y,.1))*96px - 4px);height:4px}
}
@media (max-width:520px){.meth__steps{grid-template-columns:1fr}}

/* ────────── 6. CE QUE VOUS OBTENEZ — flux de tags (décalque réf. 02/08) ──────────
   Aplats gris en gros texte, disposés en flux : les lignes se remplissent seules
   et la longueur de chaque libellé dessine le rythme. Angles francs (DA ILEV). */
.tags{padding:104px 0 110px;border-top:1px solid var(--line)}
.tags__intro{margin:0 0 38px}
.tags__intro i{display:block;font-style:italic;font-size:15.5px;color:var(--mut);margin-top:-8px}
.tags__flow{display:flex;flex-wrap:wrap;gap:10px}
.tag{background:#efeeea;color:var(--ink);padding:12px 22px;
  font-size:clamp(19px,2.5vw,34px);font-weight:400;letter-spacing:-.022em;line-height:1.16;
  transition:background .3s}
.tag:hover{background:#e4e3de}
.tags__note{margin:56px 0 0;font-size:16px;line-height:1.6;color:var(--mut);max-width:56ch}
.tags__note b{color:var(--ink);font-weight:500}
@media (max-width:760px){
  .tags{padding:76px 0 80px}
  .tags__flow{gap:8px}
  .tag{padding:10px 16px}
}

/* ────────── 6bis. EXPERTS — modèle .team du site, rempli par gen_experts.py ──────────
   Le bloc n est jamais saisi : le moteur confronte le texte de la page aux
   competences du registre et pousse les 6 profils les plus pertinents (S55). */
/* ── EXPERTS — modèle team exact des parcours [C structure · V liste] ── */
.team{border-top:1px solid var(--line);padding:110px 0 66px}
.team .eyebrow{margin-bottom:34px}
.team__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;margin-bottom:72px}
.team__stat{font-weight:500;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.018em;line-height:1.1}
.team__stat i{font-style:normal;color:var(--mut)}
.team .lead{font-size:15.5px;line-height:1.75;color:var(--mut);max-width:48ch}
.team__creed{margin-top:26px;font-weight:600;font-size:clamp(17px,1.7vw,22px);line-height:1.45;letter-spacing:-.012em}
.team__creed i{font-style:normal;color:var(--mut)}
.team__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.team__card:nth-child(-n+2){border-top:1px solid var(--line)}
.team__card{display:grid;grid-template-columns:96px 34px minmax(0,.9fr) minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);transition:background .3s ease;text-decoration:none;color:var(--ink)}
.team__card:hover{background:#f4f3ee}
/* réglage validé Yoni S66 : vignettes 96 px + pas de libellé LinkedIn au survol
   (la carte entière reste cliquable vers le profil, le libellé était du bruit) */
.team__lk{display:none}
/* test S66 (demande Yoni) : vignettes 56 → 96 px sur la page Diagnostic */
.team__ph{width:96px;height:96px;overflow:hidden;border-radius:2px}
.team__ph img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1)}
.team__i{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--faint);letter-spacing:.08em}
.team__n{display:block;font-weight:500;font-size:clamp(15px,1.3vw,18px);letter-spacing:-.015em;line-height:1.2}
.team__r{display:inline-block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border:1px solid #d5d4cc;border-radius:0;padding:4px 9px;margin-top:8px}
.team__d{font-size:12.5px;line-height:1.5;color:var(--mut)}
.team__lk{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.team__ctaw{text-align:right}
.team__ph--todo{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#ecebe4,#ecebe4 7px,#e5e4dc 7px,#e5e4dc 14px)}
.team__ph--todo i{font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;color:#a9a89f}
.team__ph--vide{background:#0d0d0c}
.team__card--vide{cursor:default}
.team__card--vide .team__lk{opacity:.55}
@media (max-width:900px){
  .team{padding:76px 0 40px}
  .team__head{grid-template-columns:1fr;gap:30px;margin-bottom:44px}
  .team__grid{grid-template-columns:1fr;column-gap:0}
  .team__card{grid-template-columns:48px 26px 1fr;gap:12px}
  /* S68 — Yoni les veut VISIBLES sur mobile : c'est la seule chose qui dit
     ce que l'expert apporte. Elles étaient masquées par gain de place. */
}

/* ────────── 6ter. SECTIONS ÉDITORIALES — tout bloc du .md non consommé
   par un composant dédié. Garantit qu'aucun texte de Yoni ne se perd. */
.osec{padding:96px 0;border-top:1px solid var(--line)}
/* ── section en rails : deux bandes en boucle, sens opposés ──────────────
   Le contenu d'une liste de douze lignes devient douze carrés qui passent.
   Moteur : .res__rail / .res__belt de _deploiement.js (repris de l'étalon
   S65), jamais réécrit. Registre édito : carré strict, filet 1 px, aucun
   arrondi ni ombre — la hiérarchie passe par la typo. */
.osec--rails > .wrap:first-child{margin-bottom:16px}
/* le titre vit au centre du cadran : la grille remonte contre l'eyebrow */
/* bloc en opposition : il se lit seul, sans filet de section au-dessus
   ni au-dessous — le cadran fait déjà la coupure (Yoni S66) */
.osec--shift{border-top:0;padding:70px 0}
/* ── rail de flux : sept étapes reliées par une ligne continue ──────────
   Un workflow se lit dans l'enchaînement, pas dans une liste à puces. Le
   nœud se remplit au survol de son étape, la ligne reste sobre. */
.flow{margin-top:38px;border-top:1px solid var(--ink)}
.flow__s{position:relative;display:grid;grid-template-columns:56px 200px 1fr;gap:24px;
  align-items:baseline;padding:19px 0 19px 30px;border-bottom:1px solid var(--line);
  transition:background .3s}
.flow__s:hover{background:rgba(43,60,243,.03)}
/* la ligne qui relie : un filet vertical continu, coupé au premier et au dernier */
.flow__s::before{content:"";position:absolute;left:5px;top:0;bottom:0;
  border-left:1px solid rgba(43,60,243,.28)}
.flow__s:first-child::before{top:50%}
.flow__s:last-child::before{bottom:50%}
/* le nœud : un carré strict sur la ligne, plein au survol */
.flow__s::after{content:"";position:absolute;left:1px;top:calc(50% - 4px);
  width:9px;height:9px;background:var(--paper);
  border:1px solid var(--klein);transition:background .3s}
.flow__s:hover::after{background:var(--klein)}
.flow__n{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  color:var(--faint)}
.flow__t{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink)}
.flow__q{font-size:15px;line-height:1.55;color:var(--mut)}
@media(max-width:860px){
  .flow__s{grid-template-columns:44px 1fr;gap:6px 18px;padding-left:26px}
  .flow__q{grid-column:2}
}

/* bulles : une ligne d'outils n'est pas une liste de valeur, elle se lit d'un
   coup d'œil. Petites, sobres, sans aplat (Yoni S66). */
/* étiquettes de section : convention [ ] du site, posées en CSS */
.oetiq{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.oetiq span{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut)}
.oetiq span::before{content:"[ "}
.oetiq span::after{content:" ]"}
/* les cinq couches du produit tiennent sur une seule ligne */
.dvue__grid{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none}
@media(max-width:1100px){.dvue__grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}

.obul{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.obul span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;
  color:var(--mut);border:1px solid var(--line);border-radius:0;padding:7px 14px;
  transition:border-color .25s,color .25s}
.obul span:hover{border-color:var(--ink);color:var(--ink)}
.obul + .osec__lead{margin-top:26px}
/* dans une colonne de duo, les bulles collent au sous-titre */
.oduo__col .obul{margin-top:22px;margin-bottom:20px}

/* deux sections courtes côte à côte : la seconde commente la première */
.oduo{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.oduo__col p{font-size:15.5px;line-height:1.7;color:var(--mut);margin:0 0 14px;max-width:52ch}
.oduo__col p:last-child{margin-bottom:0}
.oduo__row{padding:14px 0;border-bottom:1px solid var(--line)}
.oduo__row:first-of-type{border-top:1px solid var(--ink)}
.oduo__row h3{margin:0 0 5px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.oduo__row p{font-size:14px;line-height:1.55;margin:0}
.oduo__col .osec__h2{margin-bottom:16px}
@media(max-width:900px){.oduo{grid-template-columns:1fr;gap:44px}}
.osec--shift + section{border-top:0}
.osec .shift__grid{margin-top:0}
/* Les trois horizons en accordéon : une ligne par horizon, le détail se
   déplie au clic. Moteur = celui de la FAQ (.dfaq__it/.dfaq__q/.dfaq__a),
   repris tel quel — on économise la moitié du scroll de la section. */
.hacc{margin-top:30px;border-top:1px solid var(--ink)}
.hacc .dfaq__q{font-family:'Space Mono',monospace;font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink);padding:19px 0}
.hacc__k::before{content:"[ "}
.hacc__k::after{content:" ]"}
.hacc__n{margin-left:auto;padding-right:20px;color:var(--faint);letter-spacing:.06em}
/* le panneau de FAQ plafonne à 62ch : la grille de carrés y débordait par
   la droite (mesuré S66) */
.hacc .dfaq__a-in{padding:2px 0 26px;max-width:none}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;min-width:0}
.rcard{aspect-ratio:1/1;border:1px solid var(--line);background:var(--paper);
  padding:26px 26px 28px;display:flex;flex-direction:column;transition:border-color .3s}
.rcard:hover{border-color:var(--ink)}
.rcard h3{margin:0;font-size:19px;font-weight:500;letter-spacing:-.012em;line-height:1.24}
.rcard p{margin:auto 0 0;font-size:14px;line-height:1.6;color:var(--mut)}
@media (max-width:1100px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rgrid{grid-template-columns:1fr}.rcard{aspect-ratio:auto;padding:22px}}

.osec__eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin-bottom:18px;display:block}
.osec__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.12;margin:0 0 22px;max-width:26ch;text-wrap:balance}
.osec__lead{font-size:16px;line-height:1.7;color:var(--mut);max-width:70ch;margin:0 0 14px}
.osec__list{margin-top:34px;border-top:1px solid var(--line)}
/* « Ce que nous évitons » en opposition : décalque du composant .shift de
   formations/acculturation-ia-usages-metiers.html (S64) — deux colonnes et
   un cadran radial qui porte la phrase pivot. Repris tel quel, pas réécrit. */
.shift__grid{display:grid;grid-template-columns:1fr .78fr 1fr;gap:34px;
  align-items:center;margin-top:44px}
.shcol__k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut)}
.shcol__k::before{content:"[ "}
.shcol__k::after{content:" ]"}
.shcol__l{margin-top:20px;list-style:none;padding:0}
/* une ligne par item : le retour à la ligne cassait la symétrie des deux
   colonnes, qui est tout l'effet du bloc (Yoni S66) */
.shcol__l li{padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;
  line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shcol--after .shcol__l li{font-weight:500}
.shcol--after{text-align:right}
.shdial{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1/1}
.shdial svg{width:100%;height:100%}
.shdial svg line{stroke:var(--ink);stroke-width:1;opacity:.34}
.shdial__c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:58px}
.shdial__c p,.shdial__h{font-weight:500;font-size:clamp(19px,2.1vw,27px);line-height:1.24;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
@media(max-width:1080px){
  .shcol__l li{white-space:normal;text-overflow:clip}
  .shift__grid{grid-template-columns:1fr;gap:44px}
  .shcol--after{text-align:left}
  .shdial{max-width:320px;order:-1}
}

/* « Ce que nous évitons » : l'écueil barré à gauche, la réponse à droite.
   Une liste d'erreurs n'enseigne rien ; la même liste mise en regard de ce
   qu'on fait à la place devient une méthode (S66). */
.evit{margin-top:34px;border-top:1px solid var(--ink)}
.evit__row{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:21px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.evit__no,.evit__yes{font-size:15.5px;line-height:1.5;display:block}
.evit__no{color:var(--faint);text-decoration:line-through;
  text-decoration-thickness:1px;text-decoration-color:rgba(185,185,178,.55)}
.evit__yes{color:var(--ink);font-weight:500}
.evit i{font-family:'Space Mono',monospace;font-style:normal;font-size:11px;
  margin-right:13px;opacity:.55;text-decoration:none;display:inline-block}
.evit__yes i{color:var(--klein);opacity:1}
@media (max-width:760px){
  .evit__row{grid-template-columns:1fr;gap:6px;padding:18px 0}
}
.osec__row{display:grid;grid-template-columns:minmax(180px,.85fr) 1.15fr;gap:36px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
/* horizon d'une liste (Maintenant · Ensuite · Plus tard) : la même liste sans
   ses paliers n'est plus une feuille de route, juste un inventaire. */
.osec__grp{font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--mut);padding:30px 0 11px;border-bottom:1px solid var(--line)}
.osec__list > .osec__grp:first-child{padding-top:14px}
.osec__row h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.012em}
.osec__row p{margin:0;font-size:15px;line-height:1.6;color:var(--mut)}
@media(max-width:900px){.osec{padding:72px 0}.osec__row{grid-template-columns:1fr;gap:8px}}

/* ────────── 7. PREUVE TERRAIN — S15 en pleine page ──────────
   Le carton et son fond teinté sautent : la grille occupe toute la largeur du
   wrap et ne tient plus que par ses filets. Ce qui portait la respiration
   (carton blanc sur fond sombre) est remplacé par l'air de la pleine page. */
.s15{background:var(--paper);padding:104px 0 110px}
.s15__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:18px}
.s15__ctx{font-family:'Space Mono',monospace;font-size:12.5px;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0}
.s15__ctx b{display:block;color:var(--ink);font-weight:400}
.s15__ctx--r{text-align:right}
.s15__card{display:grid;grid-template-columns:1.15fr 1fr 1fr;
  max-width:none;margin:0;background:none;border:0;border-top:1px solid var(--ink)}
.s15__intro{grid-row:1/3;padding:40px 44px 44px 0;display:flex;flex-direction:column;
  justify-content:space-between;border-right:1px solid var(--line)}
.s15__headline{font-weight:800;font-size:clamp(28px,4.1vw,54px);line-height:1.02;
  letter-spacing:-.028em;text-transform:uppercase;color:var(--ink);margin:0}
.s15__grey{color:var(--faint)}
.s15__para{font-size:14px;line-height:1.62;color:var(--mut);max-width:38ch;margin:28px 0 0}
.s15__stat{padding:34px 34px 38px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.s15__stat:nth-child(3),.s15__stat:nth-child(5){border-right:none;padding-right:0}
.s15__stat:nth-child(4),.s15__stat:nth-child(5){border-bottom:none}
.s15__lbl{font-size:12.5px;line-height:1.4;color:var(--mut);max-width:14ch}
.s15__num{font-weight:700;font-size:clamp(34px,4.4vw,60px);letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
/* la flèche du site = l'équerre S46 : traits de MÊME épaisseur, tête à angle droit
   (décalque horizontal de la géométrie du « Parlons-en », ratio trait/boîte ~1:7) */
.s15__fl{width:.42em;height:.42em;margin:0 .18em;display:inline-block;
  vertical-align:middle;position:relative;top:-.05em;color:var(--ink)}
/* la source vit sous le paragraphe qu'elle qualifie, plus en pied de section :
   un chiffre et sa provenance ne doivent pas être séparés par toute la grille */
.s15__caption{margin:14px 0 0;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);line-height:1.5}
@media (max-width:900px){
  .s15{padding:76px 0 80px}
  .s15__top{flex-direction:column;align-items:flex-start;gap:14px}
  .s15__ctx--r{text-align:left}
  .s15__card{grid-template-columns:1fr 1fr}
  .s15__intro{grid-row:auto;grid-column:1/3;padding:34px 0 34px;
    border-right:none;border-bottom:1px solid var(--line)}
  .s15__stat{padding:26px 22px 30px}
  .s15__stat:nth-child(3){border-right:none;padding-right:0}
  .s15__stat:nth-child(4){border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .s15__card{grid-template-columns:1fr}
  .s15__intro{grid-column:1}
  .s15__stat{border-right:none!important;padding:22px 0 26px}
  .s15__stat:nth-child(4){border-bottom:1px solid var(--line)}
}

/* ────────── 8bis. ILS TEMOIGNENT — bande video de l'etalon objectif ──────────
   Composant repris tel quel ; le moteur de defilement vit dans _deploiement.js. */
/* ── ILS TÉMOIGNENT — section .vid portée de l'accueil (Yoni S65) ──
   Correctif : au 1er portage, les règles internes aux @media avaient été
   recopiées HORS de leur media query — la version mobile (1 colonne) écrasait
   donc le desktop en permanence. Media queries reconstituées ici. */
:root{--serif:'Instrument Serif',Georgia,serif;--mono:'Space Mono','SF Mono',Menlo,monospace;}
/* ---------- VIDÉOS CLIENTS — réels qui défilent (S36) ---------- */
  .vid{padding-top:96px;padding-bottom:56px}
.vid__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:end;margin-bottom:60px}
.vid__head .lead{max-width:44ch;justify-self:end}
.vid__rail{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.vid__belt{display:flex;align-items:stretch;gap:22px;width:max-content;will-change:transform;cursor:grab}
.vid__belt.dragging{cursor:grabbing}
.vid__nav{display:flex;justify-content:flex-end;gap:12px;margin-top:30px;padding-right:calc(var(--pad) - 34px)}
.vid__btn{width:40px;height:40px;border-radius:50%;border:1px solid #c9c8c0;cursor:pointer;background:transparent;color:var(--ink);
    display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.vid__btn:hover{border-color:var(--ink)}
.vid__btn svg{width:16px;height:16px}
.vid__card{position:relative;width:300px;height:520px;overflow:hidden;background:#111;flex-shrink:0;
    cursor:none}
.vid__card video{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s ease}
.vid__card:hover video,.vid__card.sound video{filter:none}
.vid__card::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 34%)}
.vid__who{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;pointer-events:none;max-width:calc(100% - 92px)}
.vid__who b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.vid__who span{font-size:11.5px;color:rgba(255,255,255,.75)}
.vid__mute{position:absolute;left:0;top:0;z-index:3;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;white-space:nowrap;
    background:rgba(0,0,0,.45);border-radius:999px;padding:6px 10px;pointer-events:none;will-change:transform}
.vid__quote{width:420px;height:520px;flex-shrink:0;background:#fff;border:1px solid var(--line);padding:40px 36px 16px;
    display:flex;flex-direction:column;justify-content:space-between}
.vid__q{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink);text-wrap:pretty}
.vid__sig b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vid__sig span{font-family:var(--mono);font-size:10px;color:var(--mut)}
/* les 3 règles globales de l'accueil dont la section .vid dépend, scopées pour ne
   rien changer autour : sans elles la section ne ressemblait pas à l'originale (S65) */
.vid .lead{font-size:15px;line-height:1.68;color:var(--mut);text-wrap:pretty}
.vid .h2{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.021em}
.vid .eyebrow{font-family:'Space Mono','SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:30px}
.vid .h2 i{font-style:normal;color:var(--mut)}

.vid__h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.06;margin:0}
.vid__h2 i{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic}

/* A5 — apercu couleur flottant au survol d'un expert. Composant du site :
   le bloc .team ne s'importe JAMAIS sans lui (oubli S66, signale par Yoni). */
#expFloat{position:fixed;z-index:60;width:280px;aspect-ratio:4/5;pointer-events:none;overflow:hidden;opacity:0;transform:scale(.9) rotate(-2deg);transition:opacity .25s ease,transform .3s cubic-bezier(.19,1,.22,1)}
#expFloat img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
#expFloat.on{opacity:1;transform:scale(1) rotate(0)}

/* ────────── 8. POURQUOI ILEV — graphe-index (décalque réf. Trousdale, S66) ──────────
   Fidèle à la réf : réseau filaire (traits 1px, formes géométriques outline,
   2 liens pointillés), centre-fleur, panneau blanc à séparateurs POINTILLÉS
   avec accordéons +/−. Couleurs échantillonnées : fond #f6f6f1, panneau #fff,
   traits #141414, gris #9b9b95. Accent : Klein (charte) au lieu de l'orange
   #fe5e1f de la réf — seule substitution, signalée à Yoni. */
.nx{position:relative;background:#f6f6f1;padding:96px 0 104px;overflow:hidden}
/* texture code-barres du coin bas-droit de la réf */
.nx::after{content:"";position:absolute;right:0;bottom:0;width:34%;height:230px;
  background:repeating-linear-gradient(90deg,rgba(20,20,20,.05) 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(115deg,transparent 0 30%,#000 85%);
  mask-image:linear-gradient(115deg,transparent 0 30%,#000 85%);pointer-events:none}
.nx__head-sec{position:relative;margin-bottom:26px}
.nx__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;
  line-height:1.12;margin:0 0 16px;max-width:16ch}
.nx__lead{font-size:15.5px;line-height:1.62;color:var(--mut);margin:0}
.nx__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) 350px;
  gap:56px;align-items:center}
.nx__map{width:100%;height:auto;display:block}
.nx__panel{background:#fff;border-radius:8px;padding:20px 22px 8px;
  box-shadow:0 14px 40px -22px rgba(20,20,20,.25)}
.nx__head{display:flex;align-items:center;gap:9px;padding:4px 0 14px;
  border-bottom:1px dashed #d9d8d1}
.nx__dot{width:9px;height:9px;border-radius:50%;background:var(--klein);flex:0 0 auto}
.nx__k{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink)}
.nx__hic{margin-left:auto;transform:scale(.8)}
.nx__head.open .nx__hic::after{transform:scaleY(0)}   /* ouvert = − , comme les regards */
.nx__head{background:none;border:0;width:100%;cursor:pointer;font:inherit;text-align:left}
.nx__ibody{overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
.nx__intro{margin:14px 0 6px;font-size:13.5px;line-height:1.62;color:#2a2a28;
  padding-bottom:12px;border-bottom:1px dashed #d9d8d1}
.nx__more{color:inherit;text-underline-offset:.18em}
.nx__more:hover{color:var(--klein)}
/* accordéons : moteur dfaq réutilisé, habillage réf (mono, pointillés, +/− fins) */
.nx__g{width:10px;height:10px;flex:0 0 auto;margin-right:6px;fill:var(--ink)}
.nx .dfaq__it{border-bottom:1px dashed #d9d8d1}
.nx .dfaq__it:last-child{border-bottom:0}
.nx .dfaq__q{display:flex;align-items:center;gap:2px;width:100%;background:none;border:0;
  cursor:pointer;text-align:left;padding:13px 0;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.nx .dfaq__ic{margin-left:auto;transform:scale(.8)}
.nx .dfaq__a-in{padding:0 0 14px 16px;font-size:13px;line-height:1.6;color:#5c5c58;max-width:none}
/* interaction du graphe (moteur Obsidian S66) : éclosion, halo, drag, rotation */
.nx__el{will-change:transform;cursor:grab;outline:none}
.nx__map.grab .nx__el{cursor:grabbing}
.nx__node{cursor:pointer}
.nx__nsh{transform-box:fill-box;transform-origin:center}
.nx__nsh.spin{animation:nxSpin .55s cubic-bezier(.3,.9,.3,1)}
@keyframes nxSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.nx__node.on polygon{stroke:#2b3cf3;stroke-width:1.6}
.nx__node.on text{fill:#2b3cf3}
/* éclosion des nœuds à l'entrée */
.nx__pop{opacity:0;transform:scale(.62);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.nx__pop.in{opacity:1;transform:none}
/* halo des connexions au survol : le reste s'éteint */
.nx__map line{transition:opacity .25s,stroke .25s}
.nx__map .nx__el{transition:opacity .25s}
.nx__map.dim line{opacity:.14}
.nx__map.dim line.hot{opacity:1;stroke:#2b3cf3}
.nx__map.dim .nx__el{opacity:.28}
.nx__map.dim .nx__el.hot{opacity:1}
/* ondulation au clic : un anneau Klein s'évase et disparaît */
.nx__rip{fill:none;stroke:#2b3cf3;stroke-width:1.2;animation:nxRip .7s ease-out forwards}
@keyframes nxRip{from{r:9;opacity:.55}to{r:46;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .nx__nsh.spin{animation:none}
  .nx__rip{animation:none;opacity:0}
  .nx__pop{opacity:1;transform:none;transition:none}
}

@media (max-width:960px){
  .nx{padding:70px 0 78px}
  .nx__grid{grid-template-columns:1fr;gap:36px}
  .nx__panel{max-width:420px}
}
/* ─────────────────────────── 9. FAQ ─────────────────────────── */
/* accordéon simple : PAS les onglets S'orienter/Financement du gabarit formation */
/* .dfaq PORTE .wrap comme .final : même origine de colonne au pixel.
   Le fond pleine largeur est rendu par un pseudo-élément débordant. */
.dfaq{position:relative;padding:104px 0;background:none;border-top:0}   /* 0 latéral, comme .final */
.dfaq::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  margin-left:-50vw;background:#f4f3ee;border-top:1px solid var(--line);z-index:-1}
.dfaq > *{position:relative}
/* MÊME grille que .final__grid (1fr 1fr, gouttière 72) : les questions
   s'alignent au pixel sur la colonne d'« En un premier échange » */
.dfaq__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
/* même dessin de titre que « La suite » (la réf du bas de page) */
.dfaq__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;line-height:1.1;margin:0;text-wrap:balance}
/* règle gabarit S47 (rappel Yoni x3) : la colonne droite s'aligne sur le TITRE,
   jamais l'eyebrow — 40px = hauteur eyebrow (11.5px) + sa marge (22px) */
.dfaq__list{border-top:1px solid var(--line);margin-top:40px}
.dfaq__it{border-bottom:1px solid var(--line)}
.dfaq__q{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:15px 0;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.dfaq__ic{position:relative;flex:0 0 auto;width:14px;height:14px}
.dfaq__ic::before,.dfaq__ic::after{content:"";position:absolute;background:var(--ink);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.dfaq__ic::before{top:6px;left:0;width:14px;height:2px}
.dfaq__ic::after{top:0;left:6px;width:2px;height:14px}
.dfaq__it.is-open .dfaq__ic::after{transform:scaleY(0)}
.dfaq__a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
.dfaq__a-in{padding:0 0 16px;font-size:15px;line-height:1.6;color:var(--mut);max-width:62ch}

/* ────────── 10. LA SUITE — CTA géant « Parlons-en » (décalque S46) ──────────
   Repris à l'identique de l'étalon objectif : titre + sous-ligne grise à gauche,
   lead et lien à droite, puis le mot géant en Klein avec sa flèche équerre.
   Règle du gabarit : la colonne de droite s'aligne sur le TITRE, jamais sur
   l'eyebrow (rappel Yoni ×2, S47). */
.final{padding:70px 0 30px;border-top:1px solid var(--line)}
.final__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-bottom:80px;align-items:start}
.final__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;line-height:1.1;margin:0;text-wrap:balance}
.final__h2 .sub{color:var(--mut);font-size:.6em;font-weight:500;line-height:1.35;
  display:inline-block;margin-top:.5em}
/* 40px = hauteur de l'eyebrow (11,5px) + sa marge (22px) : la colonne de
   droite démarre sur le TITRE, jamais sur l'eyebrow (règle S47) */
.final .lead{font-size:15.5px;line-height:1.8;color:var(--mut);margin:0;padding-top:40px}
.final .lead strong{color:var(--ink);font-weight:600}
.giant{display:block;text-decoration:none;padding:30px 0 60px}
.giant__row{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.giant__word{white-space:nowrap;font-weight:700;font-size:clamp(64px,10.5vw,168px);
  letter-spacing:-.04em;line-height:1;color:var(--klein)}
/* le mot est découpé lettre par lettre par le JS : l'italique par défaut
   casserait la ligne (décalque acculturation) */
.giant__word i{font-style:normal}
.giant__arrow{flex:0 0 auto;width:clamp(44px,6.5vw,104px);color:var(--klein)}
.giant__arrow svg{width:100%;height:auto;display:block}
@media (max-width:900px){
  .final__grid{grid-template-columns:1fr;gap:28px;margin-bottom:40px}
  .final .lead{padding-top:0}
  .giant{padding:10px 0 40px}
}

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width:1080px){
  .dwhy__grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .dmar__grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--pad:26px}
  .dhero__grid{padding:112px 0 60px}
  .dhero__vis{min-height:420px}
  .dhero__grid,.dvue__grid,.dprf__grid,.dfaq__grid{grid-template-columns:1fr;gap:40px}
  .dsco__row{grid-template-columns:1fr;gap:10px}
  .dmet__steps{grid-template-columns:1fr;border-top:0}
  .dmet__step{border-right:0;border-top:1px solid var(--line);padding:24px 0 26px}
  .dmet__step::before{display:none}
  .dprf__nums{grid-template-columns:1fr}
  .dvlt__grid{grid-template-columns:1fr;gap:38px}
  .dsta__row{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .dgam__grid{border-left:0}
  .dgam__c{border-right:0}
  .dten,.dsco,.dvue,.dmet,.dliv,.dprf,.dwhy,.dfaq,
  .dgam,.dkpi,.dmar,.dvlt,.dcas,.dsta{padding:76px 0}
}
@media (max-width:560px){
  .dwhy__grid{grid-template-columns:1fr;gap:26px}
  .dhero__ctas{gap:16px}
  .cons__body{min-height:0}
}


/* ══════════ POPUPS VIDÉO — décalque de ia-workflows (S66).
   Trois pastilles empilées en bas à droite : Yoni a écarté le rail en
   section (« trop lourd ») et la pile de vignettes (« pas visible »).
   Une pastille par sujet, une lightbox partagée. ══════════ */
/* align-items:stretch + largeur fixe : sans ça chaque pastille se cale sur la
   longueur de son titre et la pile part en escalier (Yoni S66) */
.vpop-dock{position:fixed;right:20px;bottom:20px;z-index:980;display:flex;flex-direction:column;
  align-items:stretch;gap:8px;width:250px;transform:translateY(12px);opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .4s ease}
.vpop-dock.on{opacity:1;transform:none;pointer-events:auto}
.vpop-chip{display:flex;align-items:center;gap:11px;padding:8px 14px 8px 8px;background:#fff;
  border:1px solid var(--line);border-radius:0;cursor:pointer;font-family:'Inter',sans-serif;
  text-align:left;box-shadow:0 12px 40px rgba(13,13,12,.14),0 2px 8px rgba(13,13,12,.06);
  transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.vpop-chip:hover{border-color:var(--ink);transform:translateX(-3px)}
.vpop-chip__thumb{position:relative;width:40px;height:40px;overflow:hidden;background:#111;flex:none}
.vpop-chip__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vpop-chip__play{position:absolute;inset:0;display:grid;place-items:center}
.vpop-chip__play::after{content:'';border-style:solid;border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.vpop-chip__txt{min-width:0;flex:1}
.vpop-chip__txt b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpop-chip__txt span{display:block;font-family:'Space Mono',monospace;font-size:9.5px;
  letter-spacing:.06em;color:var(--mut);margin-top:2px}
.vpop-dock__x{align-self:flex-end;margin-top:2px;width:22px;height:22px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--faint);font-size:14px;line-height:1;cursor:pointer}
.vpop-dock__x:hover{color:var(--ink);border-color:var(--ink)}

/* ── TEST S67 — variante barre : les 3 vidéos sur une ligne, vignettes carrées,
   verre dépoli, titres en tooltip au survol. S'ajoute à .vpop-dock (la pile
   d'origine reste intacte : retirer la classe --bar suffit à revenir en arrière). */
.vpop-dock--bar{flex-direction:row;align-items:center;width:auto;gap:4px;padding:4px;
  background:rgba(13,13,12,.22);backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.13);
  box-shadow:0 10px 34px rgba(13,13,12,.20),0 2px 8px rgba(13,13,12,.08)}
.vpop-dock--bar .vpop-chip{display:block;position:relative;padding:0;gap:0;
  background:transparent;border:none;box-shadow:none}
.vpop-dock--bar .vpop-chip:hover{transform:none}
/* display:block obligatoire — hors flex le span redevient inline et ignore width/height */
.vpop-dock--bar .vpop-chip__thumb{display:block;width:51px;height:51px}
/* N&B en repos, couleur au survol : la signature DA, appliquée aux vignettes */
.vpop-dock--bar .vpop-chip__thumb img{filter:grayscale(1) contrast(1.06);transition:filter .3s}
.vpop-dock--bar .vpop-chip:hover .vpop-chip__thumb img{filter:none}
.vpop-dock--bar .vpop-chip__play::after{border-width:4px 0 4px 7px}
/* le titre quitte la barre et devient un tooltip — ancré à droite pour ne jamais
   déborder de l'écran, le dock étant collé au bord droit */
.vpop-dock--bar .vpop-chip__txt{position:absolute;bottom:calc(100% + 9px);right:0;
  width:max-content;max-width:200px;padding:6px 9px;background:var(--ink);
  opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity .22s ease,transform .22s ease}
.vpop-dock--bar .vpop-chip:hover .vpop-chip__txt,
.vpop-dock--bar .vpop-chip:focus-visible .vpop-chip__txt{opacity:1;transform:none}
.vpop-dock--bar .vpop-chip__txt b{font-size:11.5px;color:var(--paper);white-space:nowrap}
.vpop-dock--bar .vpop-chip__txt span{font-size:9px;color:rgba(244,243,238,.55);margin-top:1px}
/* la croix se cale sur la hauteur pleine de la barre et centre son glyphe :
   place-items + line-height:0 (sinon la demi-interligne la décale vers le bas) */
/* bulle d'amorce — même pilule que le badge « ▶ lire » du composant vidéo
   (.vid__mute : mono 9,5px, uppercase, radius 999) mais en contraste inverse de
   la barre : claire sur un dock sombre, donc visible sur toutes les sections.
   Elle flotte lentement pour accrocher l'œil et s'efface au premier survol. */
.vpop-dock--bar .vpop-dock__cue{position:absolute;bottom:calc(100% + 9px);right:0;
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border-radius:999px;padding:6px 11px;white-space:nowrap;
  box-shadow:0 6px 20px rgba(13,13,12,.22);pointer-events:none;
  animation:vcueIn .5s cubic-bezier(.16,1,.3,1) .9s both,vcueFloat 3.2s ease-in-out 1.4s infinite;
  transition:opacity .3s ease,transform .3s ease}
/* la pointe de la bulle, calée au-dessus de la dernière vignette */
.vpop-dock--bar .vpop-dock__cue::after{content:'';position:absolute;top:100%;right:48px;
  border:5px solid transparent;border-top-color:var(--paper);border-bottom:0}
@keyframes vcueIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
@keyframes vcueFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* vue une fois, elle ne revient pas : le dock se suffit ensuite à lui-même */
.vpop-dock--bar.vu .vpop-dock__cue{opacity:0;transform:translateY(4px);animation:none}

.vpop-dock--bar .vpop-dock__x{align-self:stretch;margin:0 3px 0 5px;width:16px;height:auto;
  display:grid;place-items:center;line-height:0;
  background:transparent;border:none;font-size:14px;color:rgba(244,243,238,.5)}
.vpop-dock--bar .vpop-dock__x:hover{color:var(--paper)}

.vpop{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px}
.vpop.on{display:flex}
.vpop__bg{position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.58) 0%, rgba(250,249,246,.34) 42%, rgba(244,243,238,.42) 100%);
  backdrop-filter:blur(44px) saturate(1.45) brightness(1.06);
  -webkit-backdrop-filter:blur(44px) saturate(1.45) brightness(1.06)}
/* grain fin : évite l'aplat plastique du flou pur */
.vpop__bg::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(13,13,12,.055) .5px,transparent .5px);background-size:3px 3px}
.vpop__box{position:relative;z-index:2;max-width:min(94vw,calc((100vh - 96px) * 0.5625));
  box-shadow:0 40px 120px rgba(13,13,12,.22),0 8px 28px rgba(13,13,12,.10)}
.vpop__box::before{content:"";position:absolute;inset:-1px;border:1px solid rgba(13,13,12,.10);
  pointer-events:none;z-index:3}
.vpop__box video{width:100%;max-height:calc(100vh - 96px);display:block;border-radius:0;background:#000}
.vpop__x{position:absolute;top:-42px;right:0;width:32px;height:32px;border:none;background:transparent;
  font-size:26px;line-height:1;cursor:pointer;color:var(--ink);opacity:.5}
.vpop__x:hover{opacity:1}
@media(max-width:560px){
  .vpop-dock{right:12px;left:12px;bottom:12px;width:auto}
  /* la barre reste compacte et collée à droite, elle ne s'étire pas */
  .vpop-dock--bar{left:auto;width:auto}
  .vpop-dock--bar .vpop-chip__thumb{display:block;width:46px;height:46px}
  .vpop{padding:12px}
  .vpop__x{top:-38px}
}
@media(prefers-reduced-motion:reduce){.vpop-dock,.vpop-chip{transition:none}
  .vpop-dock--bar .vpop-dock__cue{animation:none}}