/* ============================================================================
   manifeste.css — LA TRAME « INDUSTRIAL SOVEREIGN AI »
   GL Digital Lab — 28/09/2026

   ══════════════════════════════════════════════════════════════════════════
   D'OÙ VIENT CE FICHIER
   ══════════════════════════════════════════════════════════════════════════
   Gaëtan a envoyé un PowerPoint (`Industrial_Sovereign_AI.pptx`, 14 slides) et
   demandé que le site soit refait « par rapport à la nouvelle trame ». Ce fichier
   implémente cette trame.

   ⚠️ LES SLIDES SONT DES IMAGES : le PDF ne contenait **aucune police, 0 caractère**,
      et les 14 `.txt` extraits font **5 octets** chacun. La trame a donc été lue
      **à l'œil**, sur les images — pas devinée. C'est écrit ici parce que c'est une
      limite : *ce qui a été lu sur une image n'a pas la précision d'un code source.*

   ══════════════════════════════════════════════════════════════════════════
   CE QUE LA TRAME EST
   ══════════════════════════════════════════════════════════════════════════
   Un **document technique**, pas une page marketing :
     · fond papier clair avec une grille de tracé très pâle ;
     · repères d'angle (croix de registration) aux quatre coins ;
     · titre en capitales condensées, très grand, presque noir ;
     · encadré monospace sous le titre, avec des ergots d'angle ;
     · étiquettes ENTRE CROCHETS — `[ CE QU'ON FAIT ]` ;
     · boîtes à bord franc, coins marqués d'un trait ;
     · tampon vert incliné `[MESURÉ]` quand un chiffre est prouvé ;
     · flèches-chevrons pour les étapes ;
     · pied de page en ligne de journal technique.

   ⛔⛔ CE QUE JE N'AI PAS REPRIS DE LA TRAME, ET POURQUOI — c'est le point important.
      Le pied des slides porte :
          SYSTEM.DIAGNOSTIC.LOG // OPERATOR: UNIT_74 // LOCATION: SECURE_FACILITY_B
          // LAT: 48.9566 N / LON: 2.3522 E // ENCRYPTION: AES-256 // HASH: 9b6d001b…
      **Ces valeurs sont décoratives : elles sont inventées.** `UNIT_74` n'existe pas,
      la position est celle de Paris, le hash est un motif.
      ⭐ Le studio a une règle là-dessus, et elle est dure : **un chiffre sans sujet est
         un chiffre faux**, et *une projection porte son régime ou n'existe pas*.
      ⇒ On garde **la forme** du log et on y met des valeurs **vraies et vérifiables**.
        *La trame est une esthétique ; les chiffres sont une responsabilité.*

   ⚠️ ET LES POLICES : la trame utilise une grotesque condensée et un monospace qui ne
      sont PAS embarqués dans le site (aucun fichier dans `cinematique/fonts/`). On
      assemble donc des piles **système** — aucune requête réseau, aucun téléchargement,
      aucune licence à vérifier. *Cohérent avec la promesse « zéro requête externe ».*

   ⚠️ PORTÉE : tout est sous `.manifeste`. Ce fichier ne touche pas `site.css`, et les
      autres pages du site ne changent pas. *Une refonte qui déborde sur ce qu'on n'a pas
      demandé de refaire n'est pas une refonte, c'est une régression.*
   ============================================================================ */

.manifeste {
  /* ---- LES JETONS DE LA TRAME — INVERSÉS LE 29/09/2026 --------------------
     ⛔ DEMANDE DE GAËTAN : « et inverse les couleurs suite notre DA ! »

     ⚠️ CE QUI N'ALLAIT PAS, ET LE FICHIER LE DISAIT DÉJÀ à la ligne 82 : la trame était
        un document PAPIER CLAIR posée sur un site SOMBRE. Le commentaire d'origine
        nommait le résultat sans en tirer la conséquence : *« un en-tête sombre, un corps
        papier et un pied sombre — trois thèmes sur une page. »*
        ⭐ Il avait raison, et la règle qui suivait ne corrigeait qu'un tiers du problème :
        elle forçait le `<body>` en papier, donc **elle aggravait l'écart avec l'en-tête
        au lieu de le réduire.**

     ⭐ LA DA DU STUDIO EST ÉCRITE — canon du 25/09/2026 : NOIR · VERT · ARGENT. Et le
        site public la suit déjà (`site.css` : `#0d111f` ×6, `#080b14` ×4, `#c8d1dc` ×6,
        `#2abfff` ×44). **C'est la trame qui était à contre-courant, pas le site.**
        ⇒ On ne peint pas le site en clair : on retourne le document.

     ⛔ ET LES VALEURS NE SONT PAS INVENTÉES — elles sont PRISES du site existant, qui les
        sert déjà à ses visiteurs. Deux teintes nouvelles sont introduites, et elles
        viennent du canon, pas d'un nuancier : le vert `#2ce39b` et le rouge `#ff5a5f`.

     ⚠️ ⚠️ POINT À SIGNALER, ET JE NE LE TRANCHE PAS — LE VERT. Le canon dit que le VERT
        porte la SANTÉ MENTALE, et qu'« un jeton déclaré n'est pas un jeton posé : on le
        pose là où le propos est la santé mentale, jamais pour décorer un bouton ».
        Or `--mf-vert` sert ici au **tampon `[MESURÉ]`** et aux chiffres prouvés — ce
        n'est pas de la santé mentale, c'est de la PREUVE.
        ⇒ Deux lectures possibles : soit le studio a deux usages du vert et le canon n'en
           décrit qu'un, soit le tampon doit changer de teinte. **Décision de Gaëtan.** */
  --mf-papier:   #0d111f;   /* le fond NUIT — la valeur que site.css sert déjà */
  --mf-papier-2: #161b28;   /* les zones encadrées, à peine plus claires */
  --mf-encre:    #c8d1dc;   /* ARGENT — le texte. Pris de site.css. */
  --mf-trait:    #c8d1dc;   /* les bords francs, en argent */
  --mf-grille:   #1e2634;   /* la grille de tracé, sombre — elle guide sans crier */
  --mf-vert:     #2ce39b;   /* LE VERT DU CANON (cf. avertissement ci-dessus) */
  --mf-rouge:    #ff5a5f;   /* LE ROUGE DU CANON — le monde physique */

  --mf-titre: "Arial Narrow", "Liberation Sans Narrow", "Franklin Gothic Medium",
              "Helvetica Neue", Arial, sans-serif;
  --mf-mono:  "JetBrains Mono", Consolas, "Courier New", monospace;

  background-color: var(--mf-papier);
  color: var(--mf-encre);
  font-family: var(--mf-mono);
  font-size: 15px;
  line-height: 1.55;
  /* la grille de tracé : deux pas, 28 px et 140 px */
  background-image:
    linear-gradient(var(--mf-grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--mf-grille) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--mf-grille) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mf-grille) 45%, transparent) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ---- LE CORPS DE LA PAGE, QUAND ELLE PORTE LA TRAME ---------------------
   ⭐ RÉÉCRIT LE 29/09/2026 — LA RÈGLE FAISAIT L'INVERSE DE CE QU'IL FALLAIT.
   ⚠️ Elle disait : *« site.css pose un fond sombre sur body. La trame est un document
      CLAIR : sans cette règle, on aurait un en-tête sombre, un corps papier et un pied
      sombre — trois thèmes sur une page. »*
   ⛔ Et elle forçait donc le `<body>` en papier `#efede7`. **Elle ne supprimait pas le
      troisième thème : elle le déplaçait dans l'en-tête et le pied.** Le défaut nommé
      était le bon ; le remède allait dans le mauvais sens.
   ⇒ La trame est maintenant sombre (cf. les jetons ci-dessus) : plus besoin de contredire
     `site.css`. **On s'aligne dessus, et les trois thèmes n'en font plus qu'un.**
   ⚠️ La règle est portée par une CLASSE posée sur `<body>`, et non par `body` tout
     court : *les autres pages du site ne changent pas.* */
body.trame-manifeste {
  background-color: #0d111f;
  background-image: none;
  color: #c8d1dc;
  padding-top: 0;
}

/* ---- LES REPÈRES D'ANGLE -------------------------------------------------
   La trame pose une croix fine aux quatre coins de chaque slide. On la pose sur
   le bloc, pas sur chaque section : *un repère qui se répète partout cesse d'être
   un repère.* */
.manifeste { position: relative; }
.manifeste::before,
.manifeste::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  height: 14px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--mf-gris) 0 0), linear-gradient(var(--mf-gris) 0 0),
    linear-gradient(var(--mf-gris) 0 0), linear-gradient(var(--mf-gris) 0 0);
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, 100% 0, 100% 0;
}
.manifeste::before { top: 14px; }
.manifeste::after  { bottom: 14px; }

/* ---- LA COUVERTURE ------------------------------------------------------- */
.mf-couverture { padding: 72px 44px 52px; text-align: center; }

.mf-titre {
  font-family: var(--mf-titre);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  font-size: clamp(2.2rem, 7.2vw, 5.6rem);
  margin: 0 0 26px;
  color: var(--mf-encre);
}

/* l'encadré monospace : bord franc + ergots d'angle sur les quatre coins */
.mf-chapeau {
  display: inline-block;
  position: relative;
  border: 1px solid var(--mf-trait);
  background: color-mix(in srgb, var(--mf-papier) 82%, #fff);
  padding: 14px 26px;
  font-size: .95rem;
  max-width: 34rem;
  text-align: center;
}
.mf-chapeau::before, .mf-chapeau::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border: 1px solid var(--mf-trait);
}
.mf-chapeau::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.mf-chapeau::after  { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.mf-chapeau p { margin: 0; }
.mf-chapeau p + p { margin-top: .35rem; }

/* ---- LE TAMPON [MESURÉ] --------------------------------------------------
   ⚠️ Incliné, creux, vert. Il ne se pose QUE sur un chiffre réellement mesuré —
      c'est le sens du mot. *Un tampon « mesuré » sur une estimation serait un
      mensonge avec un sceau officiel.* */
.mf-tampon {
  display: inline-block;
  transform: rotate(-7deg);
  border: 4px solid var(--mf-vert);
  color: var(--mf-vert);
  font-family: var(--mf-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .18em .55em;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  margin: 30px 0 6px;
}

/* ---- LES SECTIONS -------------------------------------------------------- */
.mf-section { padding: 40px 44px; border-top: 1px solid var(--mf-trait); }

/* l'étiquette entre crochets : `[ CE QU'ON FAIT ]` */
.mf-etiquette {
  font-family: var(--mf-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mf-gris);
  margin: 0 0 20px;
}
.mf-etiquette::before { content: "[ "; color: var(--mf-encre); }
.mf-etiquette::after  { content: " ]"; color: var(--mf-encre); }

.mf-section h2.mf-titre-section {
  font-family: var(--mf-titre);
  font-stretch: condensed;
  text-transform: none;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 22px;
  font-weight: 700;
}

/* ---- LES BOÎTES ---------------------------------------------------------- */
.mf-boite {
  border: 2px solid var(--mf-trait);
  background: color-mix(in srgb, var(--mf-papier-2) 70%, transparent);
  padding: 16px 18px;
  position: relative;
}
.mf-boite + .mf-boite { margin-top: 14px; }
.mf-boite > .mf-boite-titre {
  display: block;
  font-weight: 700;
  margin-bottom: .45rem;
  font-size: .95rem;
}
.mf-boite p { margin: 0; }
.mf-boite p + p { margin-top: .5rem; }

/* la grille de boîtes : deux colonnes sur écran large */
.mf-grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

/* ---- UNE GRILLE PEUT ÊTRE UNE LISTE — ajouté le 29/09/2026 ------------------
   ⚠️ MOTIF : deux consignes de Gaëtan le même jour — « le parcours en sept étapes <=
      accessibilité ! » puis « c'est une trame, boxe-moi le tout ! »
      Les sept étapes étaient un `<ol>` NU, « en clair » de son propre aveu.

   ⛔⛔ LE PIÈGE, ET C'EST LE CŒUR DU SUJET : mettre un `<li>` « en boîte » se fait
      naturellement en le remplaçant par un `<div class="mf-boite">`.
      **Ce geste DÉTRUIT la liste** — un lecteur d'écran annonce sept paragraphes au
      lieu de « liste de sept éléments » — **et personne ne le voit**, puisque le rendu
      visuel est rigoureusement identique. *C'est le genre de régression qui ne se
      découvre qu'à l'usage, et seulement par ceux qui en dépendent.*
      ⇒ Ce sont donc les `<li>` eux-mêmes qui portent `.mf-boite`.

   ⚠️ LES DEUX LIGNES SONT NÉCESSAIRES, POUR DEUX RAISONS DIFFÉRENTES :
     · `list-style: none` retire les puces — sans lui on lirait « 1. 1 Premier échange »,
       le marqueur du navigateur s'ajoutant au numéro écrit dans le contenu (`.mf-num`).
     · `padding-left: 0` retire les 40 px que le navigateur réserve à ces marqueurs ;
       sans lui la première boîte est décalée et la grille est bancale.

   ⛔⛔ ET CE QUE CETTE RÈGLE NE FAIT PAS — le point qu'il ne faut pas rater :
      `list-style: none` fait perdre la SÉMANTIQUE de liste à **VoiceOver / Safari**.
      Ce n'est pas une légende : c'est un comportement connu, et il ne se voit que sur
      iPhone. **Le remède est dans le HTML** : `role="list"` sur le `<ol>`.
      ⇒ Les deux moitiés vont ensemble. Cette règle sans le `role`, et on casse une
        liste en croyant l'embellir.
      ⭐ *Une correction d'apparence qui défait une sémantique n'est pas une correction :
         c'est un échange qu'on n'a pas annoncé.* */
.mf-grille:is(ol, ul) { list-style: none; padding-left: 0; margin: 0; }
.mf-grille .mf-boite + .mf-boite { margin-top: 0; }

/* ---- LES CHEVRONS --------------------------------------------------------
   Les trois étapes de la slide 14 : des flèches accolées. Faites en `clip-path`,
   donc sans image, sans police et sans dépendance. */
.mf-chevrons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mf-chevron {
  position: relative;
  background: var(--mf-papier-2);
  border: 2px solid var(--mf-trait);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  padding: 20px 30px 20px 40px;
  min-height: 132px;
}
.mf-chevron:first-child { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.mf-chevron > .mf-num { font-weight: 700; font-family: var(--mf-titre); font-stretch: condensed;
  text-transform: uppercase; font-size: 1.15rem; display: block; margin-bottom: .5rem; }
.mf-chevron p { margin: 0; font-size: .9rem; }

/* ---- LES MESURES --------------------------------------------------------
   Le tableau des capacités. Les valeurs prouvées portent le vert. */
.mf-mesures { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mf-mesures th, .mf-mesures td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--mf-grille); }
.mf-mesures th { font-family: var(--mf-mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mf-gris); border-bottom: 1px solid var(--mf-trait); }
.mf-mesures td.mf-fait { color: var(--mf-vert); font-weight: 700; }
.mf-mesures td.mf-attente { color: var(--mf-rouge); }

/* ---- LE PIED DE JOURNAL --------------------------------------------------
   ⛔ Les valeurs sont VRAIES. Voir le commentaire en tête de fichier. */
.mf-log {
  border-top: 2px solid var(--mf-trait);
  padding: 14px 44px;
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--mf-gris);
  text-transform: uppercase;
  word-break: break-word;
}

/* ---- LES LIENS ----------------------------------------------------------- */
.manifeste a { color: var(--mf-encre); text-decoration: underline; text-underline-offset: 3px; }
.manifeste a:hover { color: var(--mf-vert); }
.manifeste a.mf-bouton {
  display: inline-block;
  border: 2px solid var(--mf-trait);
  background: var(--mf-encre);
  color: var(--mf-papier);
  text-decoration: none;
  padding: .6rem 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .85rem;
}
.manifeste a.mf-bouton:hover { background: var(--mf-vert); border-color: var(--mf-vert); color: #fff; }

/* ---- MOBILE --------------------------------------------------------------
   ⚠️ Les marges de 44 px sont celles du document imprimé. Sur un téléphone, elles
   mangent la largeur : on les resserre. *Une trame lue sur écran n'est pas une
   trame lue sur papier.* */
@media (max-width: 640px) {
  .mf-couverture { padding: 48px 18px 34px; }
  .mf-section    { padding: 30px 18px; }
  .mf-log        { padding: 12px 18px; }
  .mf-chevron    { clip-path: none; padding: 16px 18px; min-height: 0; border-left-width: 8px; }
  .mf-chevron:first-child { clip-path: none; }
  .manifeste::before, .manifeste::after { display: none; }
}

/* ---- IMPRESSION ----------------------------------------------------------
   La trame est un DOCUMENT. Elle doit s'imprimer proprement — c'est même la
   raison pour laquelle Gaëtan l'a choisie : *on l'accroche au mur.*

   ⛔⛔ ET L'INVERSION DES COULEURS DU 29/09/2026 A CRÉÉ ICI UN DÉFAUT QU'IL FALLAIT
      FERMER DANS LE MÊME GESTE : `.manifeste` était passé au texte ARGENT `#c8d1dc`
      sur fond nuit. Le `background: #fff` ci-dessous n'inversait QUE le fond.
      ⇒ Résultat sans cette correction : **du gris très clair sur du blanc, à l'impression.**
        *Une page qui s'affiche parfaitement à l'écran et devient illisible sur papier ne
        se voit nulle part — personne n'imprime pour vérifier.*
      ⇒ On rétablit donc la PAIRE : fond blanc **et** encre noire. Le papier redevient
        ce que la trame était au départ, et l'écran suit la DA. Les deux ne se croisent
        jamais, et c'est voulu. */
@media print {
  .manifeste {
    background: #fff;
    background-image: none;
    color: #14140f;
    --mf-papier:   #ffffff;
    --mf-papier-2: #f4f2ee;
    --mf-encre:    #14140f;
    --mf-trait:    #14140f;
    --mf-grille:   #cfcbc0;
    --mf-vert:     #1f6b4a;   /* assombri : le vert du canon sur blanc est trop clair */
    --mf-rouge:    #b3241f;   /* assombri pour la même raison */
    --mf-gris:     #565550;
  }
  .mf-section { break-inside: avoid; }
  .mf-chevron { clip-path: none; border: 1px solid #000; }
}

/* ---- FLUIDITE DE NAVIGATION — ajoute le 29/09/2026 -------------------------
   CAHIER DES CHARGES DE GAETAN : « pour que la navigation soit ultra fluide ».
   MESURE AVANT : scroll-behavior 0, scroll-margin-top 0, prefers-reduced-motion 0.
   Les trois manquaient dans cette feuille.

   POURQUOI scroll-margin-top N EST PAS UN DETAIL : l en-tete est FIXE. Sans cette
   regle, cliquer une ancre amene la section SOUS la barre — le titre est cache, et
   l utilisateur croit que le lien n a pas marche.
   *Un lien qui fonctionne et qu on croit casse coute plus cher qu un lien mort.*

   ET prefers-reduced-motion N EST PAS UNE OPTION : le defilement doux est agreable,
   et il est penible pour qui y est sensible. */
:root { --mf-hauteur-entete: 76px; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

section[id], main[id] {
  scroll-margin-top: calc(var(--mf-hauteur-entete) + 24px);
}

/* LE FOCUS DOIT SE VOIR. site.css en porte 21 regles, mais elles visent SES
   composants. La trame a les siens : elle doit les avoir aussi, sinon la
   navigation au clavier devient invisible sur la partie la plus recente du site. */
.manifeste a:focus-visible,
.manifeste button:focus-visible,
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible {
  outline: 3px solid var(--mf-vert);
  outline-offset: 4px;
}

/* ---- LA SOUS-NAVIGATION PAR ANCRES ---------------------------------------- */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: center;
  padding: 14px 18px;
  margin: 0;
  border-top: 2px solid var(--mf-trait);
  border-bottom: 2px solid var(--mf-trait);
  font-size: .85rem;
}
.page-nav a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-nav a:hover,
.page-nav a:focus-visible {
  border-bottom-color: currentColor;
}

/* ---- LE CTA DE LA NAVBAR — visuellement distinct, sans etre agressif ------- */
header .cta-nav {
  margin-left: 8px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* ============================================================================
   LA COQUILLE DU SITE — AJOUTÉE LE 28/09/2026
   ══════════════════════════════════════════════════════════════════════════
   ⭐ POURQUOI CETTE SECTION EXISTE. Demande de Gaëtan : « tu me mets
      immédiatement la nouvelle maquette en place sur TOUT le site ! »

   ⛔ LA MESURE QUI L'A DÉCLENCHÉE : sur les 13 pages du site, QUATRE
      (`analyses/`, `veille/`, `formation/`, `urgence-cyber/`) portaient
      `nav=0 header=0 footer=0`. Elles n'avaient ni barre ni pied — on ne
      pouvait pas en sortir. *Un visiteur qui tombe sur un article n'avait
      aucun chemin vers le reste.*

   ⇒ Cette section est la COQUILLE COMMUNE : une barre, un pied, et les
      composants de la maquette (cartes, étapes, offres, bandeau de
      confiance). Elle est écrite une fois, ici, et servie aux 13 pages.

   ⚠️ ELLE NE TOUCHE PAS AU CORPS DE LA TRAME. `.mf-*`, `.page-nav`,
      `.manifeste` : rien n'est modifié. On ajoute, on ne remplace pas.
      *Une refonte qui déborde sur ce qu'on ne refait pas est une régression.*

   ⚠️ AUCUNE REQUÊTE EXTERNE : les icônes sont des SVG en ligne, les polices
      sont des piles système (déjà en tête de fichier). Rien ne sort.
   ============================================================================ */

/* ---- ① LA BARRE ---------------------------------------------------------- */
.site-barre {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  background: var(--mf-papier);
  border-bottom: 2px solid var(--mf-trait);
}
.site-barre .marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mf-titre);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-barre .marque .hex {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--mf-vert);
  color: var(--mf-vert);
  font-size: .82rem;
}
.site-barre nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 20px;
  margin-left: auto;
  font-size: .88rem;
}
.site-barre nav a { text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; }
.site-barre nav a:hover,
.site-barre nav a:focus-visible { border-bottom-color: var(--mf-vert); color: var(--mf-vert); }
.site-barre nav a[aria-current="page"] { border-bottom-color: var(--mf-vert); color: var(--mf-vert); }

@media (max-width: 900px) {
  .site-barre { flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; }
  .site-barre nav { width: 100%; margin-left: 0; gap: 2px 14px; font-size: .84rem; }
}

/* ---- ② LES PASTILLES DE CONFIANCE — la bande de la maquette -------------- */
.mf-pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.mf-pastilles li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--mf-trait);
  font-size: .82rem;
}
.mf-pastilles li::before { content: "◇"; color: var(--mf-vert); font-size: .9rem; line-height: 1; }

/* ---- ③ LES CARTES DE SERVICE — la grille 6 de la maquette ---------------- */
/* ⚠️ CORRIGÉ LE 28/09/2026 — LA 6ᵉ CARTE SE RETROUVAIT SEULE SUR SA LIGNE.
   Mesure : à 1600 px, 1512 px utiles / 268 px = 5,64 → CINQ colonnes, et la sixième
   passait seule à la ligne. Le défaut était invisible à 1920 (6,8 → 6 colonnes).
   ⭐ *Un auto-fit se juge au nombre d'éléments qu'on lui donne, pas à sa beauté.*
   ⇒ On plafonne à 3 colonnes : 6 cartes font DEUX rangées de trois, à toute taille. */
.mf-cartes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 100%; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
  .mf-cartes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1600px) {
  .mf-cartes { grid-template-columns: repeat(3, 1fr); max-width: 1180px; }
}
.mf-carte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--mf-trait);
  background: rgba(200, 209, 220, .025);
}
.mf-carte .mf-carte-ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--mf-vert);
  color: var(--mf-vert);
}
.mf-carte h3 {
  margin: 4px 0 0;
  font-family: var(--mf-titre);
  font-stretch: condensed;
  font-size: 1.06rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mf-carte p { margin: 0; font-size: .9rem; }
.mf-carte .mf-lien { margin-top: auto; padding-top: 10px; font-size: .86rem; }
.mf-carte .mf-lien a { text-decoration: none; }
.mf-carte .mf-lien a::after { content: " →"; color: var(--mf-vert); }

/* ---- ④ LES ÉTAPES EN LIGNE — 5 pastilles numérotées --------------------- */
.mf-etapes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; counter-reset: et; }
.mf-etapes li { padding: 16px; border-top: 3px solid var(--mf-vert); font-size: .88rem; }
.mf-etapes li::before {
  counter-increment: et;
  content: counter(et);
  display: block;
  margin-bottom: 6px;
  font-family: var(--mf-mono);
  font-size: 1.5rem;
  color: var(--mf-vert);
  line-height: 1;
}
.mf-etapes strong { display: block; margin-bottom: 4px; font-size: .95rem; }

/* ---- ⑤ LES OFFRES — trois boîtes, la troisième mise en avant ------------ */
.mf-offres { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; }
.mf-offre { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--mf-trait); }
.mf-offre h3 { margin: 0; font-family: var(--mf-titre); font-stretch: condensed; font-size: 1.02rem; text-transform: uppercase; }
.mf-offre .mf-prix { font-family: var(--mf-mono); font-size: 1.55rem; color: var(--mf-vert); line-height: 1.1; }
.mf-offre .mf-prix small { display: block; font-size: .72rem; color: var(--mf-encre); opacity: .75; letter-spacing: .08em; }
.mf-offre ul { margin: 0; padding-left: 1.05em; font-size: .87rem; }
.mf-offre li { margin-bottom: 4px; }
.mf-offre .mf-bouton { margin-top: auto; text-align: center; }
.mf-offre.mf-mise-avant { border-color: var(--mf-vert); border-width: 2px; }

/* ---- ⑥ LE BANDEAU CTA --------------------------------------------------- */
.mf-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 28px;
  border: 1px solid var(--mf-vert);
  margin: 22px 0 0;
}
.mf-bandeau p { margin: 0; font-size: .92rem; }
.mf-bandeau strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }

/* ---- ⑦ LE PIED — quatre colonnes --------------------------------------- */
.site-pied {
  border-top: 2px solid var(--mf-trait);
  padding: 34px 28px 20px;
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.site-pied h4 {
  margin: 0 0 10px;
  font-family: var(--mf-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mf-vert);
}
.site-pied ul { margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.site-pied li { margin-bottom: 6px; }
.site-pied a { text-decoration: none; }
.site-pied a:hover, .site-pied a:focus-visible { color: var(--mf-vert); text-decoration: underline; }
.site-pied .mf-legal {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--mf-grille);
  font-size: .78rem;
  opacity: .85;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

@media (max-width: 640px) {
  .site-pied { padding: 24px 18px 16px; gap: 18px; }
  .mf-bandeau { padding: 20px 18px; }
}

/* ---- LE HERO EN DEUX COLONNES — AJOUTÉ LE 28/09/2026 ----------------------
   ⭐ LA MAQUETTE LE MONTRE AINSI : titre à gauche sur trois lignes, visuel à droite,
      pastilles de confiance en bas sur toute la largeur. La trame, elle, empilait
      tout au centre — ce qui marchait pour un document technique, pas pour une page
      qui doit convaincre en trois secondes.
   ⚠️ Sur mobile, une seule colonne : le visuel passe SOUS le texte. Une grille à
      deux colonnes qui ne se replie pas est une page illisible sur téléphone. */
.mf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 30px 52px;
  align-items: center;
  text-align: left;
  padding: 52px 44px 38px;
}
/* ⛔⛔ TAILLE DU TITRE RÉDUITE — CORRECTION DU 28/09/2026.
   ⚠️ MESURE : le titre héritait de `clamp(2.2rem, 7.2vw, 5.6rem)`. À 1600 px, 7.2vw
      = 115 px : sur trois lignes, il occupait **plus de la moitié de la hauteur du hero**
      et écrasait tout le reste.
   ⭐ Le défaut n'était pas la valeur, c'était le CONTEXTE : ce clamp avait été calibré
     pour une couverture CENTRÉE, seule sur toute la largeur. Dans une colonne qui n'en
     fait plus que la moitié, la même formule donne un titre deux fois trop gros.
     *Un `vw` se juge à la largeur de son CONTENEUR, pas à celle de la fenêtre.*
   ⇒ Plafond à 3.6rem et 4.6vw : à 1600 px, 73 px au lieu de 115. */
.mf-hero .mf-titre { font-size: clamp(2rem, 4.6vw, 3.6rem); text-align: left; line-height: 1; }
.mf-hero .mf-etiquette { margin-bottom: 14px; }
/* ⛔ LE CHAPÔ PERD SA BOÎTE DANS LE HERO — DEUXIÈME DÉFAUT VISUEL.
   ⚠️ MESURE : `.mf-chapeau` porte `display:inline-block` + bordure + fond + ergots
      d'angle. Centré dans une page pleine largeur, c'était un encadré de document
      technique — et ça marchait. Dans une colonne de hero, c'est **une boîte de texte
      qui flotte au milieu du vide**, décalée du titre qu'elle accompagne.
   ⭐ *Un composant qui a du sens dans un document n'en a pas forcément dans un hero.*
   ⇒ Ici le chapô redevient un paragraphe d'accroche : pas de cadre, largeur lisible. */
.mf-hero .mf-chapeau {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  text-align: left;
}
.mf-hero .mf-chapeau::before,
.mf-hero .mf-chapeau::after { display: none; }
.mf-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.mf-hero-note { margin-top: 12px; font-size: .85rem; }
.mf-hero-visuel { position: relative; }
.mf-hero-visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--mf-trait);
  /* LE FILTRE D'ECLAIRCISSEMENT A ETE RETIRE LE 28/09/2026 — IL N'A PLUS DE RAISON.
     Il compensait une photo trop sombre pour le fond nuit. Le visuel du hero est
     maintenant poste-de-travail.webp, genere pour ce fond et deja lisible.
     Un pansement qu'on garde apres la guerison n'est plus un pansement, c'est une
     deformation — le laisser aurait delave une image correcte. */
}
.mf-hero-legende { margin: 12px 0 0; font-size: .85rem; }
.mf-hero-visuel .mf-tampon { display: inline-block; margin-top: 10px; }
.mf-hero .mf-pastilles,
.mf-hero .page-nav { grid-column: 1 / -1; }
.mf-bouton-clair { background: transparent; }

@media (max-width: 900px) {
  .mf-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 34px 20px 28px;
    text-align: left;
  }
  .mf-hero .mf-titre { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .mf-hero .mf-chapeau { max-width: none; }
  .mf-hero-visuel { order: 2; }
}