/* Pages « champ d'action » — mise en page partagée par /planning, /vigilance,
   /forensic et /architecture-ia (et leurs versions anglaises sous /en/).

   Refonte du 30/07 : les pages étaient du texte empilé sur un fond uni, la moitié droite
   restait vide et rien ne bougeait au scroll — elles ne tenaient pas la comparaison avec
   l'accueil. Trois leviers, repris du vocabulaire de l'accueil :
     · un hero pleine hauteur, avec à droite une scène qui DÉMONTRE le problème du champ ;
     · une alternance de bandes claires et sombres, qui donne le rythme ;
     · des révélations au scroll plutôt qu'un fondu unique au chargement. */

:root{
  --navy:#06121A; --navy2:#0C1825; --azurite:#1B2B41; --stalactite:#F7F6F4;
  --soft-titanium:#CFD0D4; --cashmere:#A5B8D0; --ruby:#63001F; --ruby-lite:#C0455E;
  /* --ruby-texte : le bordeaux clair ÉCLAIRCI pour le PETIT TEXTE sur fond sombre (audit du
     23/09, M16). #C0455E en 11 px mesurait 2,96 à 3,8:1 selon le fond, pour 4,5 requis.
     Même teinte (350°) et même saturation, luminosité HLS relevée de 13 points, le minimum
     qui passe partout : 4,57:1 sur l'azurite #1B2B41, 4,68 sur le fond le plus clair
     relevé sous un surtitre (#1B2A38), 6,05 sur le navy. #C0455E reste la couleur des
     aplats, filets, survols et contours de focus (3:1 suffisent hors texte). */
  --ruby-texte:#D17789;
  --grad:linear-gradient(90deg,#9B1B3A 0%,#C0455E 42%,#A5B8D0 100%);
  /* Rayures retirées (Maxime, 31/07) : le repeating-linear-gradient avait une période
     de 1,5 px, en dessous de ce qu'un écran peut résoudre. Résultat, un moiré de traits
     verticaux irréguliers qui changeait selon le zoom et la densité de l'écran. Le
     dégradé seul donne la même profondeur, sans l'artefact. */
  --alu-ruby:linear-gradient(180deg,#8A0F35 0%,#63001F 52%,#4A0014 100%);
  --alu-inset:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.4);
  --hair:rgba(165,184,208,.16);
  /* ── FILETS ET ACCENT, PAR BANDE ────────────────────────────────────────────────
     Audit du 18/08 sur une page produit : QUATRE gris de filet coexistaient sur la même
     bande claire — .12 (18 fois), .14 (14), .16 (7), .18 (24) — soit 63 traits que rien
     ne distingue à l'œil mais que rien n'accorde non plus, plus un liseré bordeaux vif
     isolé. Chaque valeur avait été réglée dans son coin, pour son composant.
     Désormais DEUX forces de filet, et une seule couleur d'accent, redéfinies selon le
     fond de la bande. Un composant ne choisit plus sa couleur : il choisit son rôle.
     --accent : le bordeaux clair (#C0455E) est la variante pour fond SOMBRE ; sur clair
     c'est le bordeaux profond (#63001F) qui tient — la règle existait déjà pour les
     libellés, elle vaut maintenant pour tout ce qui accentue. */
  --rule:rgba(165,184,208,.16);
  --rule-hi:rgba(165,184,208,.36);
  --accent:var(--ruby-lite);
  /* Le libellé de section était illisible sur la bande claire — mesuré à 1,9:1, très en
     dessous des 4,5:1 exigés. La règle `.band-light .lbl{color:var(--ruby)}` existait
     pourtant, mais `.band .lbl` a la MÊME spécificité (deux classes) et est déclarée plus
     bas : à égalité, c'est l'ordre qui tranche, et le cashmere l'emportait. Passer par un
     token supprime le duel au lieu de le gagner d'un point de spécificité. */
  --lbl-ink:var(--cashmere);
  /* bande claire : le gris froid acier retenu par Maxime le 15/06 pour l'accueil */
  --light:#E9EEF6;   /* l'acier, en aplat : la moyenne de l'ancien dégradé */
  --light-top:#EAEEF5; --light-bot:#D8DFEA; --light-ink:#0B1B27; --light-soft:#3D5168;
  /* Deuxième valeur de clair, plus haute d'un demi-ton. Le passage des pages produit
     en clair (18/08) a converti les deux dernières bandes sombres : les cinq bandes
     qui suivent le hero portaient dès lors EXACTEMENT le même dégradé sur 5 000 px,
     alors que l'en-tête des bandes annonce que « l'alternance donne le rythme ».
     Papier et acier alternent maintenant, sans réassombrir la page. */
  --paper-top:#F5F8FC;
  --fd:'Archivo',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
  /* gouttière unifiée avec l'accueil : mêmes marges horizontales partout.
     Au-delà de 1444px de fenêtre, la gouttière absorbe le surplus : le rail de 1180px
     se centre AU LIEU de rester collé au bord gauche. Mesuré avant : sur un écran de
     2327px, le contenu s'arrêtait à 1312px et laissait 1015px de vide à droite pendant
     que le hero, lui, occupait toute la largeur — la page s'écartelait (défaut signalé
     par Maxime dans reglages-figes.md, « sur grand écran, la fiche s'écartèle »).
     Comme TOUT s'aligne sur --gut (hero, onglets, bandes, pied), le rail se recentre
     d'un bloc : c'est ce qui distingue ce correctif du max-width retiré de .band-inner,
     qui ne déplaçait QUE le contenu et créait un décroché juste après le hero.
     Même motif que l'accueil (accueil.css:132). En dessous de 1444px, rien ne change. */
  --gut:max(clamp(22px,7vw,132px),calc((100vw - 1180px)/2));
  /* ─── Échelle typographique : les mêmes neuf paliers que _shared/article.css ───
     Le socle de variables est déjà dupliqué d'une feuille à l'autre dans ce projet
     (couleurs, polices) : on suit ce pattern plutôt que d'ajouter un fichier que
     les onze pages devraient charger.
     Rang des titres, décidé à l'écran : « hero » pour les pages vitrines (accueil et
     pages champ), « t1 » pour les pages de rubrique, « t2 » pour un article de
     lecture, dont le titre est long et se lit assis. */
  --t-micro:11px;
  --t-petit:13px;
  --t-base:16px;
  --t-large:clamp(17px,1.4vw,20px);
  --t-lead:clamp(20px,2vw,25px);
  --t-t3:clamp(24px,2.6vw,32px);
  --t-t2:clamp(29px,3.2vw,40px);
  --t-t1:clamp(34px,4.4vw,52px);
  --t-hero:clamp(40px,5.6vw,68px);

}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--navy)}
body{background:radial-gradient(120% 90% at 62% 0%, #16283A 0%, #0C1825 46%, #06121A 100%);
  color:var(--stalactite);font-family:var(--fd);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ═══════════ NAV + verre WebGL → module partagé (_shared/nav.css + _shared/nav.js) ═══════════ */
/* calque de fond réfracté (canvas 2D) : offscreen ici, le DOM est la page visible */
#glbg{position:fixed;inset:0;width:100%;height:100%;display:none}
.btn,.foot .fcta{transition:transform .16s cubic-bezier(.16,1,.3,1),color .2s,background .2s}
.btn:active,.foot .fcta:active{transform:scale(.97)}

/* grain : la même texture que l'accueil. Sans lui, les aplats paraissent morts à côté. */
.grain{position:fixed;inset:-60%;width:220%;height:220%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}
  75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ── onglets champs ── */
/* la pill de nav est fixée en haut : les onglets démarrent sous elle */
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:100px var(--gut) 0;position:relative;z-index:3}
.tab{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--cashmere);
  padding:9px 15px;border:1px solid var(--hair);border-radius:999px;transition:all .22s;white-space:nowrap}
.tab:hover{color:var(--stalactite);border-color:rgba(165,184,208,.4)}
/* 43 px de haut mesurés à 390 : la zone active passe à 44 sans toucher la pastille (M17). */
.tab{position:relative}
.tab::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);min-height:100%;height:44px}
.tab.on{color:var(--navy);background:var(--cashmere);border-color:var(--cashmere)}

/* ═══════════ HERO pleine hauteur : la parole à gauche, la démonstration à droite ═══════════ */
.hero{min-height:calc(100vh - 96px);display:grid;align-items:center;gap:clamp(30px,5vw,68px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:3vh var(--gut) 9vh;position:relative;z-index:2}
.hero-copy{min-width:0}
.eyebrow{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--cashmere);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:'';width:34px;height:2px;background:var(--grad);flex:none}
/* quand l'icône du moteur est là, elle remplace la barre : deux marqueurs pour la même
   chose se neutralisent. */
.eyebrow.bare::before{display:none}
.tool-badge{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.tool-ic{width:44px;height:44px;border-radius:11px;flex:none;
  box-shadow:0 1px 0 rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.34)}
@media (max-width:640px){.tool-ic{width:38px;height:38px}}
h1{font-weight:600;font-size:var(--t-hero);line-height:1.02;letter-spacing:-.028em;max-width:15ch}
/* Mot accentué : l'italique et l'encre crème suffisent à le désigner. Le trait sous le
   mot est retiré (Maxime, 31/07 : « je n'aime pas le surlignage »). */
h1 .accent{color:#F7F6F4}
.sub{margin-top:26px;font-size:var(--t-large);line-height:1.55;color:var(--soft-titanium);max-width:46ch}
.hero .btn{display:inline-block;margin-top:34px;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;padding:15px 26px;border-radius:10px;background:var(--alu-ruby);
  color:var(--stalactite);box-shadow:var(--alu-inset)}

/* ── la scène : SVG construit par _shared/champ-scene.js, scrubée au scroll ── */
/* bornée : sans max-width la colonne prenait toute la moitié droite (mesuré 1080×907 sur
   un grand écran), le hero passait à 1171 px de haut et la scène écrasait le titre. */
.hero-scene{position:relative;min-width:0;width:100%;max-width:560px;aspect-ratio:1/.84;
  max-height:62vh;margin-left:auto;display:flex;align-items:center;justify-content:center}
.hero-scene svg{width:100%;height:100%;overflow:visible}
.scene-cap{position:absolute;left:2px;bottom:-4px;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(165,184,208,.5);transition:color .4s}
.scene-cap b{font-weight:400;color:var(--ruby-texte)}
/* La légende rejouable ne faisait que 14 px de haut : ::before (le ::after porte déjà la
   flèche de relecture) lui donne une zone active de 44 px, centrée sur la ligne (M17). */
.scene-cap.rejouable::before{content:'';position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:44px}

/* ═══════════ BANDES : l'alternance clair / sombre donne le rythme de l'accueil ═══════════ */
/* respiration : assez pour séparer, pas au point de laisser des écrans vides */
.band{padding:clamp(74px,11vh,140px) var(--gut);position:relative;z-index:2}
.band-dark{background:linear-gradient(180deg,#0F1E2D 0%,#0A1622 100%)}
/* APLAT comme la bande papier, et pour la même raison : les schémas peignent leurs trous
   avec une couleur fixe censée valoir le fond. Sur un dégradé, cette couleur n'est juste
   qu'à une seule hauteur — ailleurs, chaque nœud du schéma s'entoure d'un halo. Le dégradé
   n'apportait de toute façon que 10 unités de rouge entre son haut et son bas. */
.band-light{background:var(--light);color:var(--light-ink)}
/* mesuré : .15 sur la bande claire donne le même poids apparent que .16 de cashmere sur
   la bande sombre — les deux fonds portent donc le même filet, pas deux réglages */
.band-light{--rule:rgba(11,27,39,.15);--rule-hi:rgba(11,27,39,.3);--accent:var(--ruby);
  --lbl-ink:var(--ruby)}
/* APLAT, et non dégradé, contrairement aux autres bandes : les schémas des fonctions
   peignent leurs cercles évidés avec une couleur fixe censée coller au fond (--vz-hole).
   Sur un dégradé, cette couleur n'est juste qu'à une seule hauteur de la bande — partout
   ailleurs le « trou » redevient une pastille. 25 cercles sur la page planification.
   L'aplat rend la correspondance exacte sur toute la hauteur. */
.band-light.band-paper{background:var(--paper-top)}
.band-light p{color:var(--light-soft)}
/* Un seul rail sur toute la page. Le max-width:1180px recentrait le contenu À L'INTÉRIEUR
   de la gouttière dès que la fenêtre dépassait 1372px, pendant que le hero et les onglets,
   eux, restaient collés à --gut : la colonne faisait un pas vers la droite juste après le
   hero, de 29px à 1440 et jusqu'à 238px à 1920. Le commentaire de --gut annonce « mêmes
   marges horizontales partout », et l'outil de grille du site prend bien la gouttière comme
   référence. Les mesures de lecture restent bornées là où elles doivent l'être, sur les
   paragraphes eux-mêmes (44 à 64ch), pas sur le conteneur. */
.band-inner{margin:0 auto}
/* Sélecteur restreint au contenu de la page (audit 01/08). En sélecteur nu, `.lbl`
   attrapait aussi les déclencheurs de la barre, qui portent la même classe : « Prestations »
   s'affichait en capitales sur les pages champ et en casse normale sur l'accueil, avec en
   prime cet interlettrage et cette couleur. Le seul .lbl de contenu est le titre du pied
   de page ; s'il en apparaît d'autres, les ajouter ici plutôt que d'élargir. */
.foot-start .lbl,.band .lbl{font-family:var(--fm);font-weight:400;font-size:var(--t-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--lbl-ink);margin-bottom:22px}

/* problème : l'accroche appuyée, la plus grosse voix de la page après le titre */
/* Le bloc était centré sur sept lignes courtes : l'œil devait rechercher le début de
   chaque ligne, la dernière tombait seule, et le paragraphe détonnait avec le reste de la
   page, entièrement au drapeau. Il passe au drapeau, sur une mesure tenue, avec les fins
   de ligne équilibrées (retour Maxime 03/08). */
.prob .band-inner{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.prob p{font-size:var(--t-t3);line-height:1.22;font-weight:600;
  letter-spacing:-.022em;
  /* 26ch donnait des lignes de 26 signes, soit sept lignes pour ce paragraphe : sous les
     45 signes en dessous desquels l'œil saute plus qu'il ne lit. 44ch le ramène à cinq. */
  max-width:44ch;margin:0;
  /* équilibre les fins de ligne et évite le dernier mot seul sur sa ligne */
  text-wrap:pretty}
.band-light.prob p{color:var(--light-ink)}

/* ═══════════ LE PROBLÈME EN GRIEFS ═══════════════════════════════════════════════════
   Avant : une seule phrase de 200 signes, en gros corps, sur 44ch — donc un pavé posé au
   tiers gauche d'un rail de 1180 px, avec 620 px de vide à sa droite. Trois reproches en
   un : trop long à lire d'une traite, rien à regarder, et une répartition qui laissait la
   moitié de la bande inoccupée.
   Après : un grief par proposition, chacun avec son signe. L'énumération fait la
   démonstration — c'est le motif relevé sur rig.ai dans la banque d'inspirations.
   Le numéro 001/002/003 qui les portait a été retiré (Maxime, 22/09) : trois griefs
   listés ne forment pas une séquence, la numérotation n'y ajoutait rien.
   La grille occupe tout le rail, ce qui règle la répartition sans élargir la mesure de
   lecture : chaque grief garde ses 42ch, seule leur juxtaposition remplit la bande. */
.griefs{
  /* La bande « problème » est un conteneur flex calé sur son bord gauche (voir plus bas) :
     sans cet étirement, la grille se réduisait à la largeur de son contenu et les trois
     griefs s'empilaient en une colonne de 420 px, ce qui reproduisait exactement le vide
     à droite qu'on cherche à supprimer. */
  align-self:stretch;width:100%;
  list-style:none;display:grid;gap:clamp(30px,3.4vw,54px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  margin:0;padding:0;
}
.grief{min-width:0;display:grid;gap:18px;align-content:start;
  border-top:1px solid var(--rule);padding-top:clamp(16px,1.8vw,22px)}
/* le signe : un dessin de six centimètres, pas un pictogramme de barre d'outils. Il tient
   la même grammaire que les schémas des cartes — le gris est l'état, le bordeaux est ce
   qui cloche. */
/* Hauteur COMMUNE et non pas libre : à hauteurs différentes, les trois dessins posaient
   leur texte à trois hauteurs différentes et la rangée perdait sa ligne de base — ce qui
   se voit immédiatement sur trois colonnes voisines. Le dessin occupe donc toujours la
   même boîte, et c'est à l'intérieur qu'il respire. */
.grief-sig{width:100%;max-width:184px;height:78px;overflow:visible;align-self:start}
@media (max-width:620px){.grief-sig{max-width:160px;height:68px}}
.grief-sig .g{stroke:rgba(11,27,39,.5);fill:none}
.grief-sig .gf{fill:rgba(11,27,39,.5)}
.grief-sig .a{stroke:var(--ruby);fill:none}
.grief-sig .af{fill:var(--ruby)}
.grief-sig .aw{fill:rgba(99,0,31,.1)}
.grief p{
  /* Le corps descend de t-t3 à t-lead : découpée en trois, la phrase n'a plus besoin
     d'être énorme pour peser, et Maxime a signalé la typo trop grande à plusieurs
     reprises. La mesure tombe à 42ch, celle d'une colonne qui se lit d'un coup d'œil. */
  font-size:var(--t-lead);line-height:1.34;font-weight:500;letter-spacing:-.018em;
  max-width:42ch;margin:0;color:var(--light-ink);text-wrap:pretty;
}
/* le tracé du signe part quand le grief entre dans l'écran, et une seule fois */
.grief-sig .trace{stroke-dasharray:var(--l,200);stroke-dashoffset:var(--l,200)}
.grief.in .grief-sig .trace{
  animation:grief-tracer .95s cubic-bezier(.16,1,.3,1) forwards;
}
.grief.in .grief-sig .tard{animation-delay:.34s}
@keyframes grief-tracer{to{stroke-dashoffset:0}}
/* les griefs se suivent au lieu d'arriver ensemble : c'est une addition, elle se compte */
.grief:nth-child(2){transition-delay:.12s}
.grief:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .grief-sig .trace{stroke-dashoffset:0}
  .grief.in .grief-sig .trace{animation:none}
}

/* bénéfices */
.bene{display:grid;gap:2px;border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
@media(min-width:760px){.bene.four{grid-template-columns:repeat(2,1fr)}}
.bene .item{background:linear-gradient(180deg,rgba(27,43,65,.42),rgba(12,24,37,.42));padding:30px 28px;min-width:0}
.bene .item .n{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.18em;color:rgba(165,184,208,.55);display:block;margin-bottom:16px}
.bene .item h3{font-weight:600;font-size:var(--t-large);letter-spacing:-.01em;line-height:1.2}
.bene .item p{margin-top:11px;font-size:var(--t-base);line-height:1.55;color:var(--soft-titanium)}

/* moteur + démarrage */
.mech p{font-size:var(--t-large);line-height:1.5;font-weight:500;letter-spacing:-.01em;max-width:52ch}
.tool{display:block;margin-top:20px;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(165,184,208,.5)}
.band-light .tool{color:rgba(11,27,39,.5)}
.start p{font-size:var(--t-large);line-height:1.55;font-weight:500;max-width:52ch}

/* ── pied ── */
.foot{padding:6vh var(--gut) 7vh;border-top:1px solid var(--hair);display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:20px;position:relative;z-index:2}
.foot a.home{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.1em;color:var(--cashmere)}
.foot a.home:hover{color:var(--stalactite)}
.foot .fcta{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;padding:14px 24px;
  border-radius:10px;background:var(--alu-ruby);color:var(--stalactite);box-shadow:var(--alu-inset)}

/* ── Révélation au scroll.
   Le masquage est porté par .armed, que SEUL le script pose (cf. champ-scene.js). Sans
   JavaScript, .rv reste donc pleinement visible. L'écrire dans l'autre sens — masquer en
   CSS puis révéler en JS — rendait toute la page invisible sans script : le contenu était
   bien dans le HTML, mais personne ne le voyait. */
.rv.armed{opacity:0;transform:translateY(18px)}
.rv.armed.in{opacity:1;transform:none;
  transition:opacity .78s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv.armed,.rv.armed.in{opacity:1!important;transform:none!important;transition:none}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:2vh;gap:30px}
  .hero-scene{aspect-ratio:1/.6;order:2}
  h1{max-width:none}
}
/* 76px = les 55px de la barre fixe, plus l'air. À 20px, les onglets « 01 » et « 02 »
   passaient entièrement SOUS la barre sur téléphone : deux des quatre champs étaient
   inatteignables depuis une autre page champ (audit 03/08). */
/* Les onglets mesuraient 35 px de haut au doigt, sous les 44 recommandés. La hauteur passe
   par min-height plutôt que par du padding : la pastille garde son dessin, et l'écart entre
   deux rangées reste supérieur à la hauteur des cibles, donc aucune zone n'en recouvre une
   autre quand les quatre onglets se répartissent sur plusieurs lignes. */
@media (max-width:640px){
  .tabs{padding-top:76px}
  .tab{min-height:44px;display:inline-flex;align-items:center}
  .foot a.home{min-height:44px;display:inline-flex;align-items:center}
}

/* ═══════════ REGISTRE TECHNIQUE ═══════════════════════════════════════════════════════
   Les pages produit doivent lire comme une fiche technique, pas comme une plaquette
   (Maxime, 30/07, réf. jcode.sh) : des fonctions nommées, un comparatif, des formats,
   et des limites explicites. Le monospace porte la donnée, la graisse porte le fait. */

/* La liste de fonctions a laissé la place à une grille de cartes (cf. cards.css,
   31/07) : ses règles .fn ont été retirées d'ici plutôt que laissées en dette. */

/* — tableau comparatif — */
.cmp-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:14px}

table.cmp{width:100%;border-collapse:collapse;min-width:620px;font-size:var(--t-petit)}
table.cmp th{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  text-align:left;padding:15px 20px;border-bottom:1px solid var(--rule);white-space:nowrap;
  color:var(--cashmere);background:rgba(6,18,26,.42)}
.band-light table.cmp th{color:rgba(11,27,39,.74);background:rgba(11,27,39,.05)}
table.cmp th.mark{color:var(--accent)}
.band-light table.cmp th.mark{color:var(--ruby)}
table.cmp td{padding:15px 20px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}

table.cmp tr:last-child td{border-bottom:none}
table.cmp td.crit{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.1em;color:rgba(165,184,208,.62);
  white-space:nowrap}
.band-light table.cmp td.crit{color:rgba(11,27,39,.72)}
table.cmp td.now{color:var(--soft-titanium)}
.band-light table.cmp td.now{color:var(--light-soft)}
table.cmp td.ours{font-weight:600}
/* Sous 760 px, le tableau de 620 px défilait (dans 333 px à 390 de large), sans indice : la
   colonne « Avec le moteur », celle qui porte le message, restait hors champ (audit du
   23/09, M4). Le critère passe au-dessus de sa ligne, sur toute la largeur, et les deux
   pratiques se lisent côte à côte sous les en-têtes, qui restent en tête du tableau. Plus
   de défilement horizontal. */
@media (max-width:759px){
  .cmp-wrap{overflow-x:visible}
  table.cmp{min-width:0;display:block}
  table.cmp thead,table.cmp tbody{display:block}
  table.cmp tr{display:grid;grid-template-columns:1fr 1fr}
  table.cmp thead th:first-child{display:none}
  table.cmp th{white-space:normal;padding:13px 14px;letter-spacing:.12em}
  table.cmp td{padding:6px 14px 14px}
  table.cmp td.crit{grid-column:1/-1;white-space:normal;padding:14px 14px 2px;border-bottom:none}
  table.cmp th.mark,table.cmp td.ours{border-left:1px solid var(--rule)}
}

/* — formats acceptés — */
.fmt{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fmt span{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.1em;padding:7px 13px;
  border:1px solid var(--rule);border-radius:7px;color:var(--cashmere)}
.band-light .fmt span{color:rgba(11,27,39,.74)}

/* — limites : ce que le moteur ne fait pas. C'est ce bloc qui rend le reste crédible. — */
.lim{border-left:2px solid var(--accent);padding:4px 0 4px 22px;display:grid;gap:14px}
.lim p{font-size:var(--t-base);line-height:1.55;max-width:64ch}
.lim p b{font-weight:600;color:var(--stalactite)}
.band-light .lim p b{color:var(--light-ink)}

.band-inner > .lbl + *{margin-top:0}
h2.sec-t{font-weight:600;font-size:var(--t-t3);letter-spacing:-.02em;margin-bottom:26px}

/* ═══════════ LE MODÈLE : « le GitHub de la planification » ═══════════════════════════════
   L'analogie est posée UNE fois, avec le schéma sous les yeux, puis on repasse au
   vocabulaire du métier — pas de métaphore filée sur toute la page. */
.model{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,60px);align-items:center}
@media (max-width:900px){.model{grid-template-columns:1fr}}
.model .say{font-size:var(--t-lead);line-height:1.45;font-weight:500;
  letter-spacing:-.012em;max-width:34ch}
.model .say em{font-style:normal;color:var(--accent);font-weight:600}
.band-light .model .say em{color:var(--ruby)}
.graph{width:100%;height:auto;overflow:visible;
  /* lues par model-anim.js, qui posait jusqu'ici deux couleurs en dur calibrées pour la
     bande sombre : sur la bande claire, les quatre étapes éteintes tombaient à 1,29:1 et
     l'étape allumée à 4,63:1. C'est ce qui rendait la barre illisible. */
  --step-on:var(--accent);--step-off:rgba(165,184,208,.42)}
.band-light .graph{--step-off:rgba(11,27,39,.62)}   /* mesuré 4,68:1 sur l'acier */
/* le point médian qui sépare deux étapes : plus discret que les mots, c'est son rôle,
   mais pas au point de disparaître — il tombait à 2,61:1, il tient maintenant 3,4:1 */
.band-light .graph .t-sep{fill:rgba(11,27,39,.52)}
.graph text{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.06em}

/* correspondance git ↔ planning : deux colonnes strictement alignées */
/* Le rail est la gouttière, et les blocs larges portent eux-mêmes leur mesure : sans cela,
   à 1920, la liste séparait le terme de sa définition par plusieurs centaines de pixels de
   vide, les cartes et le tableau comparatif s'étiraient sur 1656px.
   `margin-right:auto` les borne à gauche sans jamais les recentrer DANS la gouttière —
   c'est ce qui les distingue du max-width retiré de .band-inner, qui, lui, créait un
   décroché juste après le hero. Depuis que --gut absorbe le surplus au-delà de 1444px,
   ces 1180px valent exactement la largeur du rail : la règle ne déplace donc plus rien sur
   grand écran, elle borne encore entre 1180 et 1444. */
.map,.model,.cards,.cmp-wrap,.lim{max-width:1180px;margin-right:auto}
.map{margin-top:34px;border-top:1px solid var(--rule)}

.map li{list-style:none;display:grid;grid-template-columns:196px minmax(0,1fr);column-gap:32px;
  align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}

.map .g{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.04em;color:var(--cashmere);
  white-space:nowrap;font-weight:500}
.band-light .map .g{color:var(--ruby)}
.map .m{font-size:var(--t-base);line-height:1.5;min-width:0;max-width:60ch}
@media (max-width:720px){.map li{grid-template-columns:1fr;row-gap:5px}}

/* sous-titre à l'intérieur d'une bande : comparatif, formats et limites tiennent
   désormais dans UNE section (Maxime, 30/07 : trop de parties différentes). */
.sub-lbl{font-family:var(--fm);font-weight:400;font-size:var(--t-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:52px 0 20px}
.band-light .sub-lbl{color:var(--ruby)}

/* « comment on démarre » rejoint le pied : c'est la dernière chose à lire avant d'écrire */
.foot{flex-direction:column;align-items:center;gap:34px;text-align:center}
.foot-start{max-width:62ch;margin:0 auto;text-align:center}
.foot-start .lbl{margin-bottom:14px}
.foot-start p{font-size:var(--t-base);line-height:1.55;color:var(--soft-titanium)}
.foot .home{order:3}
.foot .fcta{align-self:center;order:2}

/* ── Fins de ligne ────────────────────────────────────────────────────────────────────
   Aucune propriété d'équilibrage n'existait sur le site : les titres cassaient où le
   navigateur voulait, et douze d'entre eux laissaient leur dernier mot seul sur sa ligne,
   dont les trois verbes signature de l'accueil (audit typographique 03/08).
   balance égalise la longueur des lignes d'un titre ; pretty empêche le mot orphelin en
   fin de paragraphe. Les deux dégradent proprement sur les navigateurs qui les ignorent. */
h1,h2,h3,h4,.hs-title,.pq-title,.s-eyebrow,legend{text-wrap:balance}
p,li,.sub,.s-lead,.card p,.lead{text-wrap:pretty}

/* ── Relance de milieu de page (18/08) ────────────────────────────────
   Les pages produit ne portaient que deux boutons, distants de 5,1 à 6,1 écrans.
   Cette bande est volontairement basse : elle marque une pause à la sortie des
   fonctions sans concurrencer les sections qui l'encadrent. */
.band.relance{padding-top:clamp(46px,6vh,72px);padding-bottom:clamp(46px,6vh,72px);overflow:hidden}

/* ── La trame de points ────────────────────────────────────────────────────────────
   La piste de marque, posée à UN seul endroit de la page : un point vaut une pièce, la
   trame vaut le dossier, et le détail est le point qui s'allume. Elle a d'abord été
   essayée sous les schémas des fonctions, où elle ne pouvait pas tenir : un dessin en
   filets d'un pixel et une trame de points sont la même texture, ils se sont annulés.
   Ici elle est seule sur un aplat navy, et c'est ce qui lui donne sa force.
   Deux couches, un seul pas commun : la trame de fond (13 px) et, tous les sept points
   exactement (91 px), un point allumé. Le rapport entier garantit qu'un point allumé
   tombe TOUJOURS sur un point de la trame, jamais entre deux. */
.relance::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(rgba(165,184,208,.5) 1.2px,transparent 1.2px),
    radial-gradient(rgba(165,184,208,.14) 1px,transparent 1px);
  background-size:91px 91px,13px 13px;
  background-position:26px 26px,0 0;
  /* la trame s'éteint sur les bords : sans ce fondu elle se coupe net au bord de l'écran
     et redevient une texture appliquée, au lieu d'un champ qui continue hors cadre */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
/* le contenu passe devant sa trame */
.relance .band-inner{position:relative;z-index:1}
/* Le bouton suivait `space-between`, donc le bord opposé du rail : mesuré à 1 100 px
   de la phrase sur un grand écran, les deux ne se lisaient plus ensemble. Il se pose
   maintenant dans le prolongement du texte, à un intervalle qui les tient liés. */
.relance .band-inner{display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(26px,4vw,60px);flex-wrap:wrap}
.relance-t{margin:0;max-width:34ch;font-size:var(--t-large);line-height:1.38;letter-spacing:-.015em}
.relance-cta{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  padding:14px 24px;border-radius:10px;background:var(--alu-ruby);color:var(--stalactite);
  box-shadow:var(--alu-inset);text-decoration:none;white-space:nowrap;
  transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s}
.relance-cta:hover{filter:brightness(1.13);transform:translateY(-1px)}
.relance-cta:active{transform:scale(.97)}
@media(max-width:720px){.relance .band-inner{flex-direction:column;align-items:flex-start;gap:20px}}

/* ── Rejeu de la scène à la demande (18/08) ───────────────────────────
   La légende devient l'affordance : discrète au repos, elle se souligne au
   survol et s'accompagne d'une flèche de retour. Rien ne clignote, rien ne
   tourne en boucle. */
.scene-cap.rejouable{cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:color .18s ease}
.scene-cap.rejouable::after{content:'\21BA';margin-left:.7em;opacity:0;display:inline-block;
  transition:opacity .18s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.scene-cap.rejouable:hover::after,.scene-cap.rejouable:focus-visible::after{opacity:.75}
.scene-cap.rejouable:hover{color:var(--stalactite)}
.scene-cap.rejouable:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.scene-cap.rejoue::after{opacity:.9;transform:rotate(-360deg)}
@media (prefers-reduced-motion: reduce){.scene-cap.rejouable{cursor:default}
  .scene-cap.rejouable::after{display:none}}