/* ==========================================================================
   Solutec Consult — styles.css (site statique FR/NL)
   Étape 5 BUILD · design-workflow-v2 · 10/09/2026
   Sources : Design/engine/composition/solutec.json (10 sections) ·
   solutec-notes.md (contrat de contenu) · dna/solutec.design-dna.yaml
   (validé 10/09/2026).
   Architecture (décision 10/09) : les tokens partagés compilés du web-kit
   (Design/kits/web/styles/tokens.css) ne sont PAS touchés — ils portent
   Stockify/Nexillus en production. Convention de provenance identique à
   Stockify/site/styles.css : §1 copie commentée des tokens structurels,
   §2 palette Solutec propre commentée.
   Règles DNA câblées : zéro ombre · zéro gradient · zéro glass ·
   radius 0/4/8 uniquement (jamais de pilule) · accent #A85B2C réservé
   surfaces/décor · tout texte et glyphe d'accent via #8A4A22 (AA 6,2:1
   sur papier) · aucune surface sombre hors encre testée (11,8:1 avec
   le papier) · motion slow/low/precise, 2 types seulement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens structurels — copie des tokens partagés du web-kit
      (Design/kits/web/styles/tokens.css V2 : espacement, échelle typo,
      transitions, layout). NE PAS DÉRIVER : source normative
      Design/engine/tokens/ + compiler.py. Les COULEURS du kit sont
      volontairement omises ici — elles vivent au §2 (palette Solutec).
      Écarts assumés, commentés, décidés par le DNA solutec :
      --f-* remplacés Newsreader/Source Sans 3 ; --w-titre 600 (jamais 800) ;
      --max-w 1120px (grille éditoriale à rail) ; rayons bornés 0/4/8 px.
   -------------------------------------------------------------------------- */
:root {
  /* Espacements (copie tokens.css V2 §3.4) */
  --s-px: 1px; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem;
  --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;

  /* Échelle typographique (inspirée tokens.css V2 §3.3 ; plafonds abaissés —
     Newsreader est plus dense qu'un sans, et mobile-first à 375px) */
  --t-titre-1: clamp(2rem, 4.6vw, 3.2rem);
  --t-titre-2: clamp(1.6rem, 3.2vw, 2.3rem);
  --t-titre-3: clamp(1.25rem, 2vw, 1.5rem);
  --t-corps: clamp(1rem, 1.2vw, 1.075rem);
  --t-petit: 0.9rem;
  --t-micro: 0.75rem;

  /* Poids — DNA typography : display 600 / corps 400, jamais 800 */
  --w-corps: 400;
  --w-medium: 500;
  --w-semi: 600;

  /* Transitions (copie tokens.css V2 §3.7) — DNA motion : slow / low / precise */
  --tr-rapide: 150ms ease;
  --tr-normal: 250ms ease;
  --tr-lent: 400ms ease;

  /* Layout */
  --max-w: 1120px;           /* écart §1 commenté : 1240 kit → 1120, prose + rail */
  --max-w-texte: 66ch;
  --gap-section: 5rem;
}

/* --------------------------------------------------------------------------
   2. Palette Solutec — source : Design/engine/dna/solutec.design-dna.yaml
      (color, validé 10/09/2026). Hex propres à Solutec (hors whitelist du
      kit qui porte Stockify/Nexillus) : chaque déclaration porte l'exception
      documentée verify-tokens.py — régles de l'outil conservées.
      Ratios mesurés (DNA) : encre 11,8:1 · ardoise 5,0:1 · accent-texte
      6,2:1 sur papier — tous AA. Règle accent_text du DNA : #A85B2C =
      surface/décor NON TEXTUEL uniquement ; texte et glyphes = #8A4A22.
   -------------------------------------------------------------------------- */
:root {
  --c-fond: #F6F3EC;           /* verify-tokens:exception #F6F3EC papier chaud — DNA color.background (document de conseil) */
  --c-encre: #22333B;          /* verify-tokens:exception #22333B encre primaire — DNA color.primary — 11,8:1 sur papier */
  --c-ardoise: #5A6B72;        /* verify-tokens:exception #5A6B72 secondaire — DNA color.secondary — 5,0:1 AA */
  --c-accent: #A85B2C;         /* verify-tokens:exception #A85B2C terre cuite — DNA color.accent — surfaces/décor uniquement */
  --c-accent-texte: #8A4A22;   /* verify-tokens:exception #8A4A22 variante AA 6,2:1 — TOUT texte/glyphe accent (règle DNA) */

  /* Dérivés sans hex — rgba non traqué par verify_tokens.py (filets = encre délayée) */
  --c-bord: rgba(34, 51, 59, 0.16);          /* hairline standard (DNA surfaces.borders) */
  --c-bord-fort: rgba(34, 51, 59, 0.30);     /* hairline fort : en-têtes de tableaux, pied */
  --c-voile-accent: rgba(168, 91, 44, 0.07); /* focus de ligne de tableau — décor, sans texte */
  --c-texte: var(--c-encre);
  --c-texte-secondaire: var(--c-ardoise);
  --c-sur-encre: var(--c-fond);              /* texte clair sur encre : 11,8:1 AA (seule surface foncée autorisée) */
  --c-lien: var(--c-accent-texte);

  /* Rayons — DNA shape.radius : 0/4/8 px uniquement, jamais de pilule */
  --r-0: 0px;
  --r-4: 4px;
  --r-8: 8px;
}

@media (max-width: 768px) {
  :root { --gap-section: 3.25rem; }
}

/* --------------------------------------------
   3. Base (reset typographique — inspire base.css)
   -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Source Sans 3", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: var(--t-corps);
  line-height: 1.65;
  color: var(--c-texte);
  background-color: var(--c-fond);
  font-weight: var(--w-corps);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
svg.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--c-lien); text-decoration: none; transition: color var(--tr-rapide), border-color var(--tr-rapide); }
a:hover { color: var(--c-encre); }
h1, h2, h3, h4 { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: var(--w-semi); line-height: 1.15; overflow-wrap: break-word; }
h1 { font-size: var(--t-titre-1); }
h2 { font-size: var(--t-titre-2); }
h3 { font-size: var(--t-titre-3); }
p { margin-bottom: var(--s-4); }
li, dd { margin-bottom: 0.15rem; }
:focus-visible { outline: 2px solid var(--c-accent-texte); outline-offset: 2px; }
::selection { background-color: var(--c-accent); color: var(--c-sur-encre); } /* accent en SURFACE — règle DNA respectée */
table { font-variant-numeric: tabular-nums; }

.conteneur { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--s-6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skl { position: absolute; left: -9999px; background: var(--c-encre); color: var(--c-sur-encre); padding: var(--s-2) var(--s-4); z-index: 200; }
.skl:focus { left: var(--s-4); top: var(--s-2); }

/* Kicker de section : filet + étiquette (structure dans le trait, pas dans l'ombre) */
.kicker { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ardoise); margin-bottom: var(--s-4); }
.kicker::before { content: ''; inline-size: 2.2rem; block-size: 1px; background: var(--c-bord-fort); }
section { padding-block: var(--gap-section); }
.section-regle { border-top: 1px solid var(--c-bord); }

/* --------------------------------------------
   4. En-tête : marque · nav · FR|NL · fil 01-06
   -------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 100; background: var(--c-fond); border-bottom: 1px solid var(--c-bord); }
.entete-inner { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-4); }
.marque { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1; }
.marque img { block-size: 2.05rem; inline-size: auto; } /* logo = le mot-sigle ; pas de taille texte */
@media (max-width: 860px) { .marque img { block-size: 1.75rem; } }
.marque:hover { color: var(--c-encre); }
.marque span { color: var(--c-accent-texte); }
.entete-droite { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-5); }
.nav { display: flex; align-items: center; gap: var(--s-6); list-style: none; }
.nav a { color: var(--c-ardoise); font-size: var(--t-petit); font-weight: var(--w-medium); border-bottom: 2px solid transparent; padding-block: var(--s-1); display: inline-block; }
.nav a:hover { color: var(--c-encre); }
.nav a[aria-current="page"] { color: var(--c-encre); border-bottom-color: var(--c-accent); } /* accent en filet = surface */
.lang { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-micro); font-weight: var(--w-semi); color: var(--c-ardoise); }
.lang a, .lang [aria-current] { padding: 0.15rem 0.5rem; border: 1px solid var(--c-bord); border-radius: var(--r-4); background: var(--c-fond); font-family: inherit; }
/* cibles tactiles mobile (secteur b2b-consulting accessibility_notes : >= 44 px) */
@media (max-width: 860px) { .lang a, .lang [aria-current] { min-block-size: 44px; padding-inline: 0.75rem; } .nav a { min-block-size: 44px; display: inline-flex; align-items: center; } }
.lang a { color: var(--c-ardoise); }
.lang a:hover { color: var(--c-encre); border-color: var(--c-bord-fort); }
.lang [aria-current] { background: var(--c-encre); color: var(--c-sur-encre); border-color: var(--c-encre); }

/* Le fil permanent 01-06 — signature methode_en_chaine (présence continue) */
.fil { border-top: 1px solid var(--c-bord); }
.fil-interne { display: flex; align-items: center; gap: var(--s-4); padding-block: 0.3rem; }
.fil-label { font-size: var(--t-micro); color: var(--c-ardoise); white-space: nowrap; }
.pas-liste { display: flex; list-style: none; }
.pas-liste li { border-inline-start: 1px solid var(--c-bord); padding-inline: 0.55rem; margin: 0; }
.pas-liste li:first-child { border-inline-start: none; padding-inline-start: 0; }
.pas { font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--c-encre); opacity: 0.68; font-weight: var(--w-medium); transition: opacity var(--tr-lent); } /* contraste 4,57:1 (ardoise@0,5 = 2,01 ECHEC AA — critique 6 R1) */
.pas-fait { opacity: 0.85; }
.pas-actif { color: var(--c-accent-texte); font-weight: var(--w-semi); opacity: 1; } /* mouvement n°1 : avance au scroll */
.fil-barre { flex: 1; min-inline-size: 3rem; block-size: 2px; background: var(--c-bord); }
.fil-barre i { display: block; block-size: 2px; inline-size: 0; background: var(--c-accent); transition: inline-size var(--tr-lent); } /* accent en SURFACE */

.burger { display: none; background: none; border: 1px solid var(--c-bord); border-radius: var(--r-4); padding: 0.35rem 0.5rem; cursor: pointer; color: var(--c-encre); line-height: 0; }
@media (max-width: 860px) {
  .entete-inner { padding-block: var(--s-3); gap: var(--s-3); }
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--c-fond); border-bottom: 1px solid var(--c-bord-fort); padding: var(--s-3) var(--s-6) var(--s-5); }
  .nav.ouvert { display: flex; }
  .nav li { padding-block: var(--s-2); margin: 0; }
  .nav a { padding: 0; font-size: var(--t-corps); }
  .fil-interne { gap: var(--s-2); }
  .fil-label { display: none; }
  .pas-liste li { padding-inline: 0.4rem; }
}

/* --------------------------------------------
   5. Boutons — DNA : radius 8, hairline, pas de pilule ;
   CTA de conversion = INVERSION encre/papier (micro-pattern
   une-red-one-conversion servi par le rail, jamais par le rouge-décor)
   -------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-weight: var(--w-semi); font-size: var(--t-petit); line-height: 1.2; padding: 0.75rem 1.35rem; border: 1px solid var(--c-encre); border-radius: var(--r-8); cursor: pointer; text-align: start; transition: background-color var(--tr-normal), color var(--tr-normal), border-color var(--tr-normal); }
.btn-primary { background: var(--c-encre); color: var(--c-sur-encre); }
.btn-primary:hover { background: var(--c-ardoise); border-color: var(--c-ardoise); color: var(--c-sur-encre); }
.btn-secondaire { background: transparent; color: var(--c-encre); border-color: var(--c-bord-fort); }
.btn-secondaire:hover { color: var(--c-accent-texte); border-color: var(--c-accent-texte); }
.lien-suivant { display: inline-flex; align-items: center; gap: 0.4em; font-weight: var(--w-semi); font-size: var(--t-petit); }

/* --------------------------------------------
   6. Hero éditorial (hero-split + stepper focal, radius 0)
   -------------------------------------------- */
.hero { padding-block: var(--s-16) var(--gap-section); }
.hero-grille { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-16); align-items: start; }
.hero-surtitre { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ardoise); font-weight: var(--w-semi); margin-bottom: var(--s-3); }
.hero h1 { margin-bottom: var(--s-5); max-width: 18ch; }
.hero-intro { font-size: var(--t-corps); font-weight: var(--w-semi); color: var(--c-encre); max-width: 46ch; } /* critique 6 R1 §1 : l'argument-chiffre doit tenir sous le h1 */
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }

/* Stepper : focal (header hairline, radius 0) et séquence (radius 4, cartes) */
.stepper { display: grid; gap: var(--s-2); }
.stepper-tete { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ardoise); font-weight: var(--w-semi); }
.etape-liste { list-style: none; border: 1px solid var(--c-bord); background: var(--c-fond); }
.etape-li { border-bottom: 1px solid var(--c-bord); }
.etape-li:last-child { border-bottom: none; }
.etape-li-interne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: 0.6rem var(--s-4); }
.etape-num { font-family: "Newsreader", Georgia, serif; font-weight: var(--w-semi); font-size: var(--t-petit); color: var(--c-accent-texte); font-variant-numeric: tabular-nums; }
.etape-s { font-weight: var(--w-semi); color: var(--c-encre); font-size: var(--t-petit); line-height: 1.35; }
.etape-l { color: var(--c-ardoise); font-size: var(--t-petit); }
.sequence.etape-liste .etape-li { border: 1px solid var(--c-bord); border-radius: var(--r-4); }
.sequence.etape-liste { border: none; display: grid; gap: var(--s-3); }
.sequence.etape-liste .etape-li:last-child { border-bottom: 1px solid var(--c-bord); }
.sequence.etape-liste .etape-li-interne { padding-block: var(--s-4); grid-template-columns: auto minmax(0, 1fr); }
@media (min-width: 861px) {
  .sequence.etape-liste .etape-li-interne { grid-template-columns: auto 14rem minmax(0, 1fr); }
  .sequence.etape-liste .etape-s { padding-inline-end: var(--s-5); }
}
@media (max-width: 860px) {
  .hero-grille { grid-template-columns: 1fr; gap: var(--s-10); }
}

/* --------------------------------------------
   7. Blocs éditoriaux (manifeste · prose · listes)
   -------------------------------------------- */
.manifeste-texte { max-width: var(--max-w-texte); }
.manifeste-texte p { color: var(--c-ardoise); }
.manifeste-texte p.thesis { color: var(--c-texte); }
.citation-fil { border-inline-start: 2px solid var(--c-accent); padding-inline-start: var(--s-5); margin-block: var(--s-6); } /* filet accent = surface ; texte encre */
.citation-fil p { font-family: "Newsreader", Georgia, serif; font-size: var(--t-titre-3); font-weight: var(--w-semi); color: var(--c-encre); line-height: 1.35; margin: 0; }

/* Valeurs — listées à filets, pas de cartes, pas de cartel (refus mémoire) */
.valeurs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-12); margin-top: var(--s-8); }
.valeurs li { padding-block: var(--s-4); border-top: 1px solid var(--c-bord); margin: 0; }
.valeurs b { display: block; font-family: "Newsreader", Georgia, serif; font-weight: var(--w-semi); color: var(--c-encre); margin-bottom: 0.15rem; font-size: var(--t-corps); }
.valeurs span { color: var(--c-ardoise); font-size: var(--t-petit); display: block; }
@media (max-width: 640px) { .valeurs { grid-template-columns: 1fr; } }

.tete-section { max-width: 56ch; margin-bottom: var(--s-10); }
.tete-section p { color: var(--c-ardoise); margin-top: var(--s-3); }

/* Cartes prestations — UNIFORMES (DNA composition.cards) : rang → numérotation
   de la méthode, jamais taille ou couleur décorative */
.grille-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); list-style: none; }
.carte { border: 1px solid var(--c-bord); border-radius: var(--r-8); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); transition: border-color var(--tr-normal); margin: 0; }
.carte:hover { border-color: var(--c-bord-fort); }
.carte-icone { color: var(--c-accent-texte); }
.carte-icone svg { width: 1.35rem; height: 1.35rem; }
.carte h3 { font-size: var(--t-titre-3); }
.carte p { color: var(--c-ardoise); font-size: var(--t-petit); }
.carte .lien-suivant { margin-top: auto; }
@media (max-width: 860px) { .grille-cartes { grid-template-columns: 1fr; } }

/* --------------------------------------------
   8. Tableaux sobres (rôle data) + focus de ligne
   (mouvement n°2 : table_row_focus — voile hairline,
   ombre et élévation JAMAIS)
   -------------------------------------------- */
.table-scroll { overflow-x: auto; border-block: 1px solid var(--c-bord-fort); }
table.sobre { inline-size: 100%; border-collapse: collapse; }
/* min-largeur uniquement pour les tableaux denses (3 colonnes) — jamais sur les tableaux 2 colonnes */
table.sobre-large { min-inline-size: 34rem; }
table.sobre caption { caption-side: top; text-align: start; color: var(--c-ardoise); font-size: var(--t-petit); padding: var(--s-3) 0; }
table.sobre th { text-align: start; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ardoise); font-weight: var(--w-semi); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-bord-fort); vertical-align: bottom; }
table.sobre td { padding: var(--s-4); border-bottom: 1px solid var(--c-bord); vertical-align: top; color: var(--c-texte); font-size: var(--t-petit); }
table.sobre tbody tr:last-child td { border-bottom: none; }
table.sobre td:first-child { font-weight: var(--w-semi); color: var(--c-encre); }
table.sobre tbody tr { transition: background-color var(--tr-lent); }
table.sobre tbody tr:hover, table.sobre tbody tr:focus-within { background: var(--c-voile-accent); }
.cache { display: none; }
.filtre-ligne { display: flex; gap: var(--s-3); align-items: center; margin-block-end: var(--s-4); flex-wrap: wrap; }
.filtre-ligne .champ { inline-size: min(100%, 22rem); margin: 0; }
.note-bas { color: var(--c-ardoise); font-size: var(--t-micro); margin-top: var(--s-3); }

/* Badges-texte secteurs — radius 4, hairline, jamais de pilule */
.badges-texte { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin-top: var(--s-4); padding: 0; }
.badges-texte li { margin: 0; }
.badge { display: inline-block; border: 1px solid var(--c-bord-fort); border-radius: var(--r-4); padding: 0.3rem 0.7rem; font-size: var(--t-petit); color: var(--c-ardoise); background: var(--c-fond); }

/* Checklist cadrage §7 (rôle content, radius 0) */
.checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-10); padding: 0; }
.checklist li { display: flex; gap: var(--s-2); align-items: baseline; padding-block: 0.55rem; border-bottom: 1px solid var(--c-bord); font-size: var(--t-petit); color: var(--c-texte); margin: 0; }
.checklist svg { color: var(--c-accent-texte); inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
@media (max-width: 860px) { .checklist { grid-template-columns: 1fr; } }

.deux-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); align-items: start; }
@media (max-width: 860px) { .deux-col { grid-template-columns: 1fr; gap: var(--s-10); } }
.note-haute { border-top: 1px solid var(--c-bord); padding-top: var(--s-4); margin-top: var(--s-4); font-size: var(--t-petit); color: var(--c-ardoise); }
.note-haute strong { color: var(--c-encre); font-weight: var(--w-semi); }

/* --------------------------------------------
   9. Rail latéral (page Trajectoire) — sticky desktop ;
   repli mobile = fil de l'en-tête + reprise du pied
   -------------------------------------------- */
.rail2 { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.rail { position: sticky; top: 128px; display: grid; gap: var(--s-1); list-style: none; padding: 0; }
.rail li { margin: 0; }
.rail a { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-petit); color: var(--c-ardoise); border-inline-start: 2px solid var(--c-bord); padding-block: 0.3rem; padding-inline: var(--s-3); transition: color var(--tr-lent), border-color var(--tr-lent); }
.rail a .etape-num { font-size: var(--t-micro); }
.rail a:hover { color: var(--c-encre); }
.rail .fait { border-inline-start-color: var(--c-bord-fort); }
.rail .fait .etape-num { color: var(--c-accent-texte); }
.rail .actif { border-inline-start-color: var(--c-accent); color: var(--c-encre); font-weight: var(--w-medium); } /* rail actif = accent SURFACE */
.rail .actif .etape-num { color: var(--c-accent-texte); }
@media (max-width: 1000px) { .rail2 { grid-template-columns: 1fr; gap: var(--s-10); } .rail { display: none; } }

.etape-page { padding-block: var(--s-5) var(--s-10); }
.etape-page h3 { margin-block-end: var(--s-2); }
.etape-page .etape-cap { font-size: var(--t-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ardoise); font-weight: var(--w-semi); margin-block-end: var(--s-2); }
.etape-page p { color: var(--c-ardoise); max-width: var(--max-w-texte); }
.etape-page .livrable { font-size: var(--t-petit); margin-top: var(--s-3); }
.etape-page .livrable strong { color: var(--c-accent-texte); font-weight: var(--w-semi); }

/* En-tête de page intérieure — typographique, jamais d'image (AUCUNE image sur ce site) */
.entete-page { padding-block: var(--s-16) var(--s-12); border-bottom: 1px solid var(--c-bord); }
.entete-page p { color: var(--c-ardoise); max-width: 58ch; margin-top: var(--s-4); }
.fil-ariane { font-size: var(--t-micro); color: var(--c-ardoise); margin-block-end: var(--s-5); }
.fil-ariane a { color: var(--c-ardoise); }
.fil-ariane a:hover { color: var(--c-encre); }

/* Puces « dirigeant » (développés Trajectoire) — tiret-filet, pas d'emoji-icône */
.puces { list-style: none; display: grid; gap: var(--s-3); padding: 0; margin-top: var(--s-4); }
.puces li { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-petit); color: var(--c-ardoise); margin: 0; }
.puces li::before { content: ''; inline-size: 0.6rem; block-size: 1px; background: var(--c-bord-fort); flex-shrink: 0; transform: translateY(-0.35rem); }

/* --------------------------------------------
   10. Contact + formulaire mailto
   -------------------------------------------- */
.contact2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); align-items: start; }
@media (max-width: 860px) { .contact2 { grid-template-columns: 1fr; gap: var(--s-12); } }
.coord { list-style: none; display: grid; gap: var(--s-5); padding: 0; }
.coord li { border-top: 1px solid var(--c-bord); padding-top: var(--s-3); margin: 0; }
.coord-h { display: block; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ardoise); font-weight: var(--w-semi); margin-bottom: var(--s-1); }
.coord a { font-family: "Newsreader", Georgia, serif; font-size: var(--t-corps); font-weight: var(--w-semi); color: var(--c-encre); overflow-wrap: anywhere; }
.coord a:hover { color: var(--c-accent-texte); }
.coord .adr { color: var(--c-ardoise); font-size: var(--t-petit); font-style: normal; }
.champ { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.champ label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ardoise); font-weight: var(--w-semi); }
.champ input, .champ textarea { inline-size: 100%; border: 1px solid var(--c-bord-fort); border-radius: var(--r-4); background: var(--c-fond); color: var(--c-texte); padding: 0.6rem 0.75rem; font-size: var(--t-petit); }
.champ textarea { min-block-size: 7rem; resize: vertical; }
.form-hint { font-size: var(--t-micro); color: var(--c-ardoise); margin-block-start: var(--s-3); }

/* --------------------------------------------
   11. Pied — filet sur papier. AUCUN fond sombre de section :
   le texte clair sur encre (#F6F3EC, 11,8:1 testé AA) n'est
   utilisé que pour les boutons, jamais pour un bloc de lecture.
   -------------------------------------------- */
.pied { border-top: 1px solid var(--c-bord-fort); padding-block: var(--s-12) var(--s-8); }
.pied-reprise { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-bord); margin-bottom: var(--s-6); }
.pied-reprise .lib { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ardoise); font-weight: var(--w-semi); }
.pied-reprise a { font-size: var(--t-petit); color: var(--c-ardoise); border-inline-start: 1px solid var(--c-bord); padding-inline-start: var(--s-4); display: inline-flex; gap: 0.4em; align-items: baseline; }
.pied-reprise a:hover { color: var(--c-encre); border-inline-start-color: var(--c-accent); }
.pied-reprise .etape-num { font-size: var(--t-micro); }
.pied-colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-10); margin-bottom: var(--s-8); }
@media (max-width: 860px) { .pied-colonnes { grid-template-columns: 1fr; gap: var(--s-8); } }
.pied h4 { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ardoise); font-family: "Source Sans 3", sans-serif; font-weight: var(--w-semi); margin-bottom: var(--s-3); }
.pied ul { list-style: none; display: grid; gap: var(--s-2); padding: 0; }
.pied li { margin: 0; }
.pied a { font-size: var(--t-petit); }
.pied p { color: var(--c-ardoise); font-size: var(--t-petit); max-width: 44ch; }
.pied-mentions { border-top: 1px solid var(--c-bord); padding-top: var(--s-5); font-size: var(--t-micro); color: var(--c-ardoise); }

/* --------------------------------------------
   12. Motion — 2 types seulement (methode_en_chaine_rail_advance +
   table_row_focus) ; le texte n'est JAMAIS révélé en boucle
   (forbiddens DNA : systematique_scroll_reveal + metric_theatre)
   -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* --- Utilitaires de mise en page (remplacent les styles inline) --- */
.marge-haut-lg { margin-top: var(--s-12); }
.marge-bas-lo { margin-bottom: var(--s-4); }

/* rappel du canal direct (critique 6 R1 issue 9) */
.hero-direct { margin-top: var(--s-4); font-size: var(--t-petit); color: var(--c-ardoise); }
.hero-direct a { color: var(--c-accent-texte); border-bottom: 1px solid var(--c-bord-fort); }

/* --------------------------------------------
   13. Mur de references — logos reels fournis
   (arbitrage humain 2026-09-10 18:04)
   ------------------------------------------- */
.mur-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2); margin-top: var(--s-6); list-style: none; padding: 0; }
.mur-logos li { display: flex; align-items: center; justify-content: center; padding: var(--s-4) var(--s-3); border: 1px solid var(--c-bord); border-radius: var(--r-4); min-block-size: 5.5rem; }
.mur-logos img { max-block-size: 2.6rem; max-inline-size: 7.5rem; inline-size: auto; block-size: auto; filter: grayscale(1); opacity: 0.78; transition: filter var(--tr-normal), opacity var(--tr-normal); }
.mur-logos li:hover img, .mur-logos li:focus-within img { filter: grayscale(0); opacity: 1; }
.mur-logos-mini { margin-top: var(--s-5); }
.mur-logos-mini li { min-block-size: 4.75rem; }
.mur-logos-mini img { max-block-size: 2rem; max-inline-size: 6.5rem; }
/* Sequence empilee <=860 : la colonne 14rem desktop fixait la ligne a 384-448px */
@media (max-width: 860px) {
  .sequence.etape-liste .etape-li-interne { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .sequence.etape-liste .etape-num { grid-row: span 2; align-self: baseline; }
  .sequence.etape-liste .etape-s { grid-column: 2; padding-inline-end: 0; }
  .sequence.etape-liste .etape-l { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .mur-logos img { transition: none; }
}


/* --------------------------------------------
   14. Data-viz editoriale — secteurs reels §5.2
   (arbitrage humain 10/09 17:55 : la vie vient des donnees, pas des photos)
   ------------------------------------------- */
.hero-stats { margin-top: var(--s-4); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-ardoise); }
.secteurs { margin-top: var(--s-6); }
/* ancres : en-tete collant = 122 px (le fil est inclus dedans) */
html { scroll-padding-top: 8rem; }
[id] { scroll-margin-top: 8rem; }
.secteurs figcaption { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-ardoise); font-weight: var(--w-semi); margin-bottom: var(--s-3); }
.secteurs ul { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.secteurs li { display: grid; grid-template-columns: minmax(5.5rem, 9.5rem) minmax(0, 1fr) 2.5ch; align-items: center; gap: var(--s-3) var(--s-3); row-gap: 0.15rem; padding-block: var(--s-2); }
.secteurs li + li { border-top: 1px solid var(--c-bord); }
.s-nom { font-size: var(--t-petit); color: var(--c-texte); }
.s-barre { block-size: 5px; background: var(--c-bord); }
.s-barre i { display: block; block-size: 100%; inline-size: calc(var(--p) * 25%); background: var(--c-accent-texte); }
.s-val { font-family: "Newsreader", Georgia, serif; font-size: var(--t-petit); font-variant-numeric: tabular-nums; color: var(--c-encre); }
.s-qui { grid-column: 2 / -1; font-size: var(--t-micro); color: var(--c-ardoise); }
@media (max-width: 560px) {
  .secteurs li { grid-template-columns: minmax(0, 1fr) 2.5ch; }
  .secteurs li .s-nom { grid-column: 1; }
  .secteurs li .s-val { grid-column: 2; grid-row: 1; }
  .secteurs li .s-barre { grid-column: 1 / -1; grid-row: 2; }
  .secteurs li .s-qui { grid-column: 1 / -1; }
}