/* ══════════════════════════════════════════════════════════════════════════
   MECAFLOW — mf-identity.css
   Feuille d'identité unique de la vitrine (353 pages, 5 langues).

   POURQUOI CE FICHIER EXISTE
   La vitrine s'est construite en deux générations qui ne se parlent pas :
   la génération « pro/atelier » (--bg:#0b0f16, --cyan:#22d3ee) et la
   génération « presse/guides » (--bg:#070B14, --cyan déjà remappé sur l'ambre).
   Résultat : /pro et /presse ressemblent à deux entreprises différentes, et
   le cyan — que la charte classe « réservé, jamais structurant » — est la
   couleur de TOUS les liens sur la moitié du site.
   Plutôt que d'éditer 353 fichiers, on pose une dernière couche qui reprend
   la main sur les jetons et sur la douzaine de composants récurrents.

   SOURCE DE VÉRITÉ : /charte/tokens.css. Aucune couleur inventée ici.
   Toute valeur ci-dessous vient de tokens.css ou en est une variante
   d'impression dont le contraste est calculé et annoté.
   ══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   0. CONTRAT DE CASCADE — pourquoi tous les sélecteurs sont « doublés »

   POURQUOI : la feuille est chargée en dernier, mais « en dernier dans le
   <head> » ne suffit pas. Dix pages (pro.html + ses 4 traductions,
   ecoles.html + ses 4 traductions) posent des blocs <style> APRÈS </head>,
   et mf-nav.js injecte encore un <style> au runtime. À spécificité égale,
   ces blocs gagneraient parce qu'ils arrivent après nous.

   PARADE : on ne se bat pas sur l'ordre, on se bat sur la spécificité.
     :root:root                    → 0-2-0, bat tout :root  (0-1-0) postérieur
     html body                     → 0-0-2, bat tout body   (0-0-1) postérieur
     html body .card               → 0-1-2, bat tout .card  (0-1-0) postérieur
   La spécificité l'emporte sur l'ordre source à origine égale. C'est ce qui
   permet à cette feuille de ne contenir presque AUCUN !important.

   Les seuls !important du fichier sont dans les sections 14 et 15, et chacun
   dit en commentaire ce qu'il contre.
   ────────────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   1. POLICES — les embarquer ici plutôt que de dépendre de mf-fonts.css

   POURQUOI : 19 pages vitrine (brochure, carnet, kiosk, portail, qr, seuil,
   suivi, tv, labels, invite, cgu…) ne chargent PAS mf-fonts.css. La
   typographie de marque n'y arrive jamais et elles retombent sur Bahnschrift
   ou -apple-system. Les @font-face sont ré-déclarés ici avec exactement les
   mêmes URL : le navigateur dédoublonne, coût nul pour les 305 autres pages.
   ────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Barlow';src:url(/assets/fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(/assets/fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(/assets/fonts/barlowcond-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(/assets/fonts/barlowcond-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jbmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}


/* ──────────────────────────────────────────────────────────────────────────
   2. JETONS UNIVERSELS — vrais sur écran ET sur papier

   POURQUOI ce bloc est séparé du suivant : la typographie, les rayons et
   l'ambre de marque ne dépendent pas du support. Un certificat imprimé doit
   rester reconnaissable comme MECAFLOW ; ce sont ces jetons-là qui le font.
   Les FONDS et les ENCRES, eux, s'inversent — ils sont plus bas.
   ────────────────────────────────────────────────────────────────────────── */
:root:root{

  /* Piles de police. 6 variantes de --disp et 6 de --mono traînaient sur le
     site ; une seule met la police de marque en tête. On impose la charte.
     seuil.html mettait "Bahnschrift" et ui-monospace en PREMIER : Barlow et
     JetBrains n'y sortaient jamais, alors même que les fichiers étaient là. */
  --disp:'Barlow Condensed','Bahnschrift','Arial Narrow','Segoe UI',sans-serif;
  --body:'Barlow','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  /* --sans est le doublon historique de --body sur 16 pages. On l'aligne
     plutôt que de le faire disparaître : les pages continuent de marcher. */
  --sans:'Barlow','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;

  /* Ambre de marque. Déclarée sur 132 pages seulement contre 282 pour --cyan :
     l'accent principal était minoritaire chez lui. On le pose partout, et sous
     ses trois autres noms historiques (--amber, --warn, --gold) pour que les
     pages qui les consomment basculent sans être touchées. */
  --ember:#E8930C;
  --ember2:#ff9d1e;
  --hot:#ff7a18;      /* charte : « uniquement en dégradé de bouton » */
  --amber:#E8930C;
  --gold:#E8930C;
  --warn:#E8930C;

  /* Accent secondaire. 19 pages mettaient le cyan derrière ce nom : les
     corriger CHANGE leur rendu, pas seulement leur code — c'est voulu. */
  --teal:#14e0b0;

  /* Échelle de rayons de la charte. 7 pages sur 353 l'utilisaient ; partout
     ailleurs les rayons sont écrits en dur (8, 10, 12, 13, 14, 16, 18, 20px).
     On la publie ici pour que les composants de la section 8 s'y accrochent. */
  --r-xs:5px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:14px;
  --r-xl:20px;
  /* Rayons parallèles d'ecoles.html (--r 9px / --rs 7px), alignés sur la
     charte pour que ses boutons cessent d'avoir un arrondi à eux. */
  --r:12px;
  --rs:8px;

  /* Ombres et halo. Valeurs exactes de tokens.css. */
  --shadow:0 1px 0 rgba(255,255,255,.04),0 18px 46px -12px rgba(0,0,0,.66);
  --glow:0 0 0 1px rgba(232,147,12,.5),0 14px 44px -8px rgba(232,147,12,.28);

  /* Encres ambre lisibles sur BLANC. La charte n'a pas de jeton pour ça, mais
     certificat.html l'avait déjà trouvé et commenté : #E8930C plein sur blanc
     ne fait que 2.44:1 → illisible. #A25F00 fait 5.03:1. Trois conventions
     concurrentes existaient sur le site (--ember-ink, --p-ember, --emberD) ;
     on en impose UNE et on aligne les deux autres dessus. */
  --ember-ink:#A25F00;   /* ambre texte sur blanc — 5.03:1 (mesuré) */
  --teal-ink:#0A7A60;    /* turquoise texte sur blanc — 5.30:1 */
  --red-ink:#C62828;     /* alerte texte sur blanc — 5.62:1 */
  --p-ember:#A25F00;
  --emberD:#A25F00;
  --tealD:#0A7A60;
  --redD:#C62828;
  /* Encre à poser SUR une surface ambre (badge, bouton plein) : le bleu-noir
     d'atelier, 7.9:1 sur #E8930C. Le blanc n'y ferait que 2.44:1. */
  --ink-on-ember:#0b0f16;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. JETONS ÉCRAN — fonds sombres, encres claires, neutralisation du trio

   POURQUOI le :not([data-mf-paper]) : les imprimables (certificat, carnet,
   labels, kit-restitution, qr, manuel, invite, portail, signalétique) et
   seuil.html (qui a QUATRE :root et une bascule clair/sombre) ne doivent pas
   recevoir un fond d'atelier. Il suffit de poser data-mf-paper sur leur <html>
   pour qu'ils sautent ce bloc et prennent le bloc 4 à la place.
   Sans cet attribut, une page est traitée comme une page d'écran — c'est le
   comportement voulu pour les 300+ pages commerciales.
   ────────────────────────────────────────────────────────────────────────── */
:root:root:not([data-mf-paper]){

  /* ── Fonds ────────────────────────────────────────────────────────────
     Les pages presse/guides posaient --bg:#070B14, plus noir que la charte.
     C'est la cause visuelle n°1 de l'écart entre /pro et /presse : deux noirs
     différents lus côte à côte donnent deux sites. Un seul noir, celui de
     l'atelier. --paper et --panel sont les noms alternatifs du même rôle. */
  --bg:#0b0f16;
  --bg2:#0f1420;
  --paper:#0b0f16;
  --paper2:#0f1420;
  --panel:#0f1420;
  --soft:#0f1420;
  --soft2:#141a26;
  --chip:#141a26;

  /* ── Surfaces ──────────────────────────────────────────────────────────
     Les presse/guides utilisaient un voile blanc rgba(255,255,255,.04), la
     charte un bleu translucide. Le voile blanc délave, le bleu translucide
     garde la profondeur d'atelier. Écart visuel net, il fallait trancher. */
  --card:rgba(20,26,38,.60);
  --card2:rgba(26,34,50,.72);

  /* ── Encres ────────────────────────────────────────────────────────────
     QUATRE noms existaient pour « texte secondaire » (--mut, --ink2, --mut2,
     --ink3) plus trois littéraux (#cdd8ea, #DCE6F4, #C6D4E8). On aligne les
     quatre noms sur les TROIS encres de la charte ; les littéraux sont repris
     composant par composant en section 6.
     --ink-max n'existe pas dans la charte : c'est le blanc pur des 1882 titres
     écrits en dur. On lui donne un nom pour qu'il devienne pilotable, sans
     changer sa valeur — zéro risque visuel, gain de contrôle. */
  --ink-max:#ffffff;   /* titres — 18.6:1 sur #0b0f16 */
  --ink:#eaf0f8;       /* texte principal — 16.8:1 */
  --ink2:#9aa6ba;      /* texte courant / secondaire — 7.8:1 */
  /* --ink3 mesure 4.48:1 — un cheveu SOUS le seuil AA du texte normal (4.5).
     D'où la restriction aux légendes et au fil d'Ariane, qui sont posés en
     petite capitale ou en gras et relèvent du seuil « grand texte » (3:1).
     Jamais en corps de paragraphe : ce serait un vrai défaut d'accessibilité. */
  --ink3:#6f7b8f;
  --mut:#9aa6ba;
  --mut2:#6f7b8f;

  /* ── Filets ────────────────────────────────────────────────────────────
     Deux valeurs cohabitaient (.10 sur 216 pages, .09 sur 87). La charte dit
     .09. Un point d'alpha, mais multiplié par toutes les cartes du site. */
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.055);

  /* ── États ─────────────────────────────────────────────────────────────
     --red avait SIX valeurs, dont #22d3ee sur 5 pages : du cyan sous un nom
     d'alerte. Une panne se signale en rouge, une seule fois, partout. */
  --ok:#22c55e;
  --red:#ff3b3b;
  --red2:#ff6b6b;

  /* ══ NEUTRALISATION DU TRIO RÉSERVÉ ══════════════════════════════════
     C'est le geste à plus fort rendement de toute la feuille.
     --cyan est consommé 1320 fois en valeur de propriété, dont 1007 fois en
     `color` : c'est la couleur de TOUS les liens sur la génération 1. Le
     redéfinir requalifie le site entier en une ligne.
     Répartition du report :
       cyan   → AMBRE. C'est la couleur dominante et structurante (liens,
                bordures de survol, titres de FAQ) : elle doit devenir la
                couleur de marque, sinon la marque reste absente là où on la
                lit le plus. Ambre sur #0b0f16 = 7.9:1, largement au-dessus
                du seuil AA pour un lien.
       violet → TURQUOISE. Usage réel : 55 blockquote de presse et quelques
       magenta  pastilles. Les basculer aussi en ambre rendrait les pages
                mono-chromes et écraserait la hiérarchie. La charte autorise
                le turquoise comme accent secondaire : on s'en sert.
     Les noms mensongers (--blue, --blue2, --resa…) sont repris juste après :
     sur ecoles.html, --blue et --gold sont déjà des ALIAS d'ambre posés par
     le second :root — les traiter comme des bleus ferait ressurgir le thème
     clair mort de la ligne 46. */
  --cyan:#E8930C;
  --violet:#14e0b0;
  --mag:#14e0b0;
  --blue:#E8930C;
  --blue2:#ff9d1e;

  /* Couleurs d'état machine du planning ecoles.html. Aucune n'était dans la
     charte, et deux tiraient sur le violet. Report sur la palette autorisée
     en gardant cinq états DISTINGUABLES — c'est un planning, on doit lire
     l'état d'un coup d'œil sans lire l'étiquette. */
  --prod:#22c55e;    /* en production = conforme */
  --regl:#ff9d1e;    /* réglage = ambre clair */
  --panne:#ff3b3b;   /* panne = rouge */
  --resa:#14e0b0;    /* réservé = turquoise */
  --maint:#9aa6ba;   /* maintenance = neutre, volontairement en retrait */
}


/* ──────────────────────────────────────────────────────────────────────────
   4. JETONS PAPIER — le papier reste BLANC et l'encre NOIRE

   POURQUOI : un apprenti encadre son certificat chez lui. On lui applique la
   TYPOGRAPHIE, l'ambre en accent, les filets et les rayons — pas le fond
   d'atelier, qui viderait une cartouche et sortirait gris sale.
   Ce bloc s'active sur <html data-mf-paper> et sert de base au @media print
   de la section 15, qui l'applique de force quel que soit l'attribut.
   ────────────────────────────────────────────────────────────────────────── */
:root:root[data-mf-paper]{
  --bg:#ffffff;
  --bg2:#f5f7f9;
  --paper:#ffffff;
  --paper2:#f5f7f9;
  --panel:#ffffff;
  --card:#ffffff;
  --card2:#f5f7f9;

  /* Encres papier reprises de labels.html, qui les avait déjà calculées. */
  --ink-max:#0b0f16;   /* titres — 19.7:1 sur blanc */
  --ink:#17202E;       /* texte principal — 16.4:1 */
  --ink2:#48546A;      /* texte secondaire — 7.6:1 */
  --ink3:#5A6678;      /* légendes — 5.82:1 */
  --mut:#48546A;
  --mut2:#5A6678;

  --line:#E2E7EF;
  --line2:#EEF2F7;

  /* Sur papier, TOUT accent devient sa variante assombrie. L'ambre plein est
     illisible en texte (2.44:1) : c'est la leçon la plus chère du site, elle
     ne doit pas se reperdre. Le trio réservé suit la même logique. */
  --ember:#A25F00;
  --ember2:#A25F00;
  --hot:#A25F00;
  --amber:#A25F00;
  --gold:#A25F00;
  --warn:#A25F00;
  --teal:#0A7A60;
  --ok:#1a8c46;
  --red:#C62828;
  --cyan:#A25F00;
  --violet:#0A7A60;
  --mag:#0A7A60;
  --blue:#A25F00;
  --blue2:#A25F00;

  --shadow:none;
  --glow:none;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. TYPOGRAPHIE APPLIQUÉE

   POURQUOI ces règles alors que les jetons existent : 280 pages écrivent la
   pile de police EN DUR dans body{font-family:…} et les 160 pages presse la
   réécrivent en dur sur chaque h1/h2/h3. Redéfinir --disp ne les touche pas.
   Il faut repasser dessus — d'où le préfixe `html body` (0-0-2/0-0-3) qui bat
   les sélecteurs nus (0-0-1) même déclarés plus tard.
   ────────────────────────────────────────────────────────────────────────── */
html body{
  font-family:var(--body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html body h1,html body h2,html body h3,html body h4{
  font-family:var(--disp);
  font-weight:700;
  letter-spacing:.3px;
  color:var(--ink-max);
}
html body h3,html body h4{font-weight:600}

/* Les chiffres sont un argument commercial (TRS, temps, prix) : ils doivent
   s'aligner en colonne et rester lisibles au 4e chiffre. Le mono de marque
   + tabular-nums, sur tous les noms de classe que le site a utilisés pour
   « un nombre » au fil des générations. */
html body code,html body kbd,html body samp,html body .mono,
html body .stat,html body .stat b,html body .kpi,html body .num,
html body .tick-track,html body .pressmeta,html body .crumb{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. TEXTE COURANT — sortir des trois gris parallèles

   POURQUOI : #cdd8ea (452 occ.), #DCE6F4 (320 occ.) et #C6D4E8 (160 occ.)
   sont trois « texte clair » écrits en dur, jamais derrière une variable.
   Aucune redéfinition de jeton ne peut les atteindre. On les remplace par la
   hiérarchie de la charte, qui donne enfin trois niveaux distincts :
     titre  #fff     → chapô --ink → corps --ink2 → légende --ink3
   Le chapô GAGNE en clarté au passage (#C6D4E8 → #eaf0f8) : sur une vitrine
   commerciale, la première phrase doit accrocher.
   ────────────────────────────────────────────────────────────────────────── */
html body p,html body li,html body dd{color:var(--ink2)}
html body .lead{color:var(--ink);font-family:var(--body)}
html body strong,html body b{color:var(--ink-max)}
html body .note,html body .cap,html body .caps,
html body .crumb,html body .crumb a,html body figcaption{color:var(--ink3)}


/* ──────────────────────────────────────────────────────────────────────────
   7. AMBIANCE DE PAGE — là où le cyan se cachait vraiment

   POURQUOI c'est la section la plus importante après les jetons : sur 710
   occurrences de rgba(34,211,238,*), AUCUNE n'est réparable en redéfinissant
   --cyan. Elles sont écrites en dur dans des dégradés :
     · body::before          halo cyan, 160 pages presse/guides
     · body{background-image} halo cyan, 128 pages génération 1 (dont pro)
   Il faut donc réécrire le fond, pas le jeton.

   Ce qu'on garde : le halo ambre en haut à droite, qui donne à la vitrine sa
   chaleur — la vitrine a le droit d'être plus spectaculaire que l'app.
   Ce qu'on change : le second halo passe du cyan au turquoise, à alpha plus
   bas. Et on remonte la trame diagonale de pro.html sur TOUTES les pages :
   c'est ce grain qui donnait à /pro sa matière, /presse ne l'avait pas.

   LIMITE VOLONTAIRE : on ne touche ni à `position`, ni à `inset`, ni au
   `z-index` de body::before. pro.html le pose en z-index:0 et presse en -1 ;
   les contextes d'empilement sont locaux à chaque page et les réécrire
   risquerait de faire passer le voile PAR-DESSUS le contenu. On ne reprend
   que la peinture. */
html body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 640px at 88% -8%,rgba(232,147,12,.14),transparent 55%),
    radial-gradient(820px 620px at 6% 6%,rgba(20,224,176,.06),transparent 55%),
    linear-gradient(180deg,#0f1420,#0b0f16 60%,#0b0f16);
  background-attachment:fixed;
}
html body::before{
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),
    radial-gradient(900px 500px at 80% -10%,rgba(232,147,12,.10),transparent 60%),
    radial-gradient(800px 500px at -10% 20%,rgba(20,224,176,.05),transparent 55%);
  opacity:1;
}
/* Sur papier, aucune ambiance : la trame et les halos partiraient en aplat
   gris à l'impression et mangeraient l'encre pour rien. */
:root[data-mf-paper] body{background-image:none;background-color:#ffffff}
:root[data-mf-paper] body::before{background:none}


/* ──────────────────────────────────────────────────────────────────────────
   8. LIENS

   POURQUOI presque rien ici : `a{color:var(--cyan)}` couvre 290 pages, et le
   remap de --cyan en section 3 les bascule toutes sans une règle. Ne restent
   que les liens dont la couleur est écrite en dur — le pied de landing page
   et les liens de pied de page qui pointaient sur #22D3EE.
   ────────────────────────────────────────────────────────────────────────── */
/* Le `:any-link` n'est pas cosmétique, il monte la spécificité à 0-1-3.
   Vérifié en conditions réelles : `html body a` (0-0-2) PERD contre le moindre
   `.cxnote a{color:#22d3ee}` (0-1-1) écrit dans une page — et il y en a.
   `:any-link` ne matche que les ancres réellement cliquables, donc on gagne
   la spécificité sans élargir la cible. */
html body a:any-link{color:var(--ember)}
html body a:any-link:hover{color:var(--ember2)}
/* Liens de service (pied de page, fil d'Ariane) : gris, pas ambre — sinon la
   page se termine sur douze liens orange qui concurrencent le bouton d'appel
   à l'action. Le hover les ramène à l'ambre pour rester repérables.
   Un cran de spécificité au-dessus de la règle générique ci-dessus (0-1-4). */
/* ⚠️ ÉLARGI : le tiroir de navigation latéral n'était couvert par AUCUN de ces sélecteurs.
   Résultat : ses ~25 entrées passaient toutes à l'ambre — un mur orange illisible où plus
   rien ne ressortait. Un menu se lit en gris ; l'ambre est réservé à l'entrée ACTIVE. */
html body footer a:any-link,html body .lp-foot a:any-link,
html body .crumb a:any-link,html body header nav a:any-link,
html body nav a:any-link,html body aside a:any-link,
html body .drawer a:any-link,html body .mf-side a:any-link,
html body .side a:any-link,html body .menu a:any-link,
html body .nav a:any-link,html body .sidenav a:any-link{color:var(--ink2)}
html body footer a:any-link:hover,html body .lp-foot a:any-link:hover,
html body .crumb a:any-link:hover,html body header nav a:any-link:hover,
html body nav a:any-link:hover,html body aside a:any-link:hover,
html body .drawer a:any-link:hover,html body .mf-side a:any-link:hover,
html body .side a:any-link:hover,html body .menu a:any-link:hover,
html body .nav a:any-link:hover,html body .sidenav a:any-link:hover{color:var(--ember)}
/* L'entrée active garde l'ambre : c'est la seule qui doit ressortir. */
html body nav a.on:any-link,html body nav a.active:any-link,
html body .drawer a.on:any-link,html body .mf-side a.on:any-link{color:var(--ember)}


/* ──────────────────────────────────────────────────────────────────────────
   9. BOUTONS — un seul bouton principal sur tout le site

   POURQUOI : trois dégradés différents cohabitaient pour la même intention.
     .cta          linear-gradient(#ff7a18,#c2450a) + color:#04121b   ×296
     .btn.primary  linear-gradient(var(--hot),#c2450a) + color:#fff
     .btn.primary  linear-gradient(#ffa53a,#e8930c 46%,#c56d08)       (pro)
   Trois problèmes d'un coup :
     1. #c2450a, #c56d08 et #04121b n'existent PAS dans la charte ;
     2. `color:#fff` sur un aplat ambre ne fait que 2.44:1 — c'est un vrai
        défaut d'accessibilité, pas une question de goût ;
     3. le dégradé est écrit en dur, donc insensible à --ember.
   Correctif : un seul dégradé bâti sur deux jetons de la charte
   (--ember2 → --hot) et l'encre bleu-noir d'atelier, qui donne 7.4:1.
   Rayon aligné sur --r-sm : la pilule 999px des pages presse et le 10px de
   pro devenaient deux boutons différents pour la même offre.
   ────────────────────────────────────────────────────────────────────────── */
/* ⚠️ CORRIGÉ : la règle ciblait `.cta` NU. Or sur boutique.html `.cta` est le CONTENEUR
   de la rangée de boutons — il recevait donc le dégradé ambre sur toute la largeur, et le
   bouton "Composer & payer" devenait orange sur orange, illisible. On ne peint QUE des
   éléments interactifs : un lien, un bouton, jamais un div. */
html body a.cta,html body button.cta,html body .btn.primary,html body button.primary{
  background:linear-gradient(180deg,var(--ember2),var(--hot));
  border:1px solid rgba(255,200,120,.45);
  color:var(--ink-on-ember);         /* 7.4:1 — le blanc y ferait 2.44:1 */
  border-radius:var(--r-sm);
  font-family:var(--body);
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(232,147,12,.28),inset 0 1px 0 rgba(255,255,255,.30);
  text-decoration:none;
}
html body a.cta:hover,html body button.cta:hover,html body .btn.primary:hover{
  filter:brightness(1.06);
  box-shadow:0 16px 40px rgba(232,147,12,.38),inset 0 1px 0 rgba(255,255,255,.35);
  color:var(--ink-on-ember);
}

/* Bouton secondaire. Le survol de pro.html virait au cyan
   (`border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.07)`) —
   sélecteur à 0-2-1, on passe à 0-2-3 pour le reprendre. */
html body .btn{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-family:var(--body);
  font-weight:700;
}
html body .btn:not(.primary):hover{
  border-color:var(--ember);
  background:rgba(232,147,12,.07);
  box-shadow:0 0 22px rgba(232,147,12,.18);
}


/* ──────────────────────────────────────────────────────────────────────────
   10. SURFACES — cartes, encarts, bandeaux

   POURQUOI le détail sur .callout et .band : ce sont 239 déclarations
   RIGOUREUSEMENT identiques d'un dégradé ambre→cyan. C'est le cyan le plus
   visible du site parce qu'il occupe des blocs entiers, pas un filet. Le
   dégradé devient ambre→ambre transparent : même relief, plus de fuite.
   ────────────────────────────────────────────────────────────────────────── */
html body .card,html body .pcard,html body .frame,html body .hcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}

html body .callout{
  background:linear-gradient(180deg,rgba(232,147,12,.10),rgba(232,147,12,.02));
  border:1px solid rgba(232,147,12,.30);
  border-radius:var(--r-md);
}
html body .band,html body .ticker{
  background:linear-gradient(180deg,rgba(232,147,12,.10),rgba(232,147,12,.02));
  border-color:rgba(232,147,12,.28);
}
html body .band{border:1px solid rgba(232,147,12,.28);border-radius:var(--r-lg)}

/* Liste de liens en cartes : bordure et libellé passaient au cyan au survol.
   Le remap de --cyan les corrige déjà ; on ne fixe ici que le rayon pour que
   .related cesse d'être la seule surface à 12px quand .card est à 16px. */
html body .related a{border-radius:var(--r-md);background:var(--card);border-color:var(--line);color:var(--ink)}
html body .related a:hover{border-color:var(--ember)}
html body .related a span{color:var(--ember)}


/* ──────────────────────────────────────────────────────────────────────────
   11. SUR-TITRES, PASTILLES, MÉTA

   POURQUOI : .eyebrow existe en trois variantes (ambre sur /pro, rouge sur
   /ecoles, cyan sur /boutique). C'est la signature typographique de la marque,
   elle ne peut pas changer de couleur selon la page.
   La pilule cyan de la variante boutique est neutralisée en section 14 (e),
   avec l'explication du pourquoi `transparent` y est sans danger.
   ────────────────────────────────────────────────────────────────────────── */
html body .eyebrow{
  font-family:var(--mono);
  color:var(--ember);
  text-transform:uppercase;
  letter-spacing:3px;
}

html body .chip,html body .chips>*,html body .tag,html body .pressmeta .tag{
  font-family:var(--mono);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink2);
}
html body .chip b,html body .chip strong{color:var(--teal)}
html body .pressmeta .tag{color:var(--ember)}

/* Le « + » de l'accordéon FAQ et les titres de question : déjà pilotés par
   --ember et --cyan, donc corrigés par la section 3. On ne fixe que la
   famille, parce que les pages presse écrivent la pile en dur. */
html body .faq summary{font-family:var(--disp);color:var(--ink-max)}
html body .faq h3{color:var(--ember)}


/* ──────────────────────────────────────────────────────────────────────────
   12. CHROME — en-tête, pied de page, citations

   POURQUOI l'en-tête : 191 pages posent `background:rgba(7,11,20,.82)` ou
   `rgba(11,15,22,.82)` en dur. Le premier est le noir des pages presse ; en
   scrollant, l'en-tête d'une page presse est plus sombre que son propre fond
   d'une page /pro. Un seul verre teinté, celui de la charte.
   On cible `body>header` (0-0-2) et pas `header` (0-0-1) pour ne pas repeindre
   un éventuel <header> imbriqué dans une carte.
   ────────────────────────────────────────────────────────────────────────── */
html body>header{
  background:rgba(11,15,22,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
html body>footer{
  border-top:1px solid var(--line);
  color:var(--ink2);
}
html body>header .logo b,html body .wordmark,html body .brand b{
  font-family:var(--disp);
  font-weight:700;
  color:var(--ink-max);
}

/* Citation de presse : `border-left:3px solid var(--violet)` sur 55 pages.
   Le remap de --violet en turquoise la corrige déjà ; cette règle ne sert
   qu'à garantir le filet là où la couleur était écrite en dur. */
html body blockquote{
  border-left:3px solid var(--teal);
  color:var(--ink);
  font-family:var(--body);
}


/* ──────────────────────────────────────────────────────────────────────────
   13. FORMULAIRES

   POURQUOI : l'anneau de focus était `0 0 0 3px rgba(34,211,238,.14)` sur les
   20 pages à formulaire. Le focus est le seul cyan que l'utilisateur voit au
   moment précis où il agit — c'est le pire endroit où laisser une couleur
   hors marque. Alpha remonté à .20 : l'ambre est moins lumineux que le cyan,
   il fallait compenser pour que l'anneau reste perceptible.
   ────────────────────────────────────────────────────────────────────────── */
html body .inp,html body input,html body textarea,html body select{
  font-family:var(--body);
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--ink);
}
html body .inp:focus,html body input:focus,html body textarea:focus,html body select:focus{
  outline:none;
  border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(232,147,12,.20);
}
html body ::placeholder{color:var(--ink3)}
html body .err{color:var(--red)}
html body .msg{color:var(--teal)}


/* ──────────────────────────────────────────────────────────────────────────
   14. RÉSIDUS ÉCRITS EN DUR — variables locales et styles générés en JS

   POURQUOI cette section existe à part : ce sont les cas qu'aucune
   redéfinition de jeton n'atteint.

   (a) Variables locales posées sur un attribut. ecosysteme.html donne
       `--dot:#22D3EE` et `--dot:#8B6CFF` en dur sur ses colonnes. Sélecteur
       de page à 0-2-0, le nôtre à 0-2-2 : pas besoin d'!important.

   (b) Coins de HUD et bandeau défilant de pro.html. Pilotés par --cyan et
       --mag, donc déjà corrigés en section 3 — mais le bandeau .ticker avait
       aussi un dégradé cyan en dur, repris en section 10.

   (c) ⚠️ SEUL !important DU FICHIER (hors impression).
       fournisseur.html génère ses pastilles EN JAVASCRIPT avec le style dans
       l'attribut :
         '<span class="tag" style="background:rgba(34,211,238,.16);color:#22d3ee">…'
       Un attribut style= bat TOUTE feuille de style, quelle que soit sa
       spécificité. Le seul moyen de le contrer sans éditer le JS est
       !important. On cible par le CONTENU de l'attribut, et on sépare les
       propriétés : sans ça, un élément qui n'a que `color:#22d3ee` hériterait
       aussi d'un fond ambre qu'il n'a jamais demandé.
       ► Ceci est un pansement. Le vrai correctif est d'éditer le JS de
         fournisseur.html (×5 langues) ; à faire à la prochaine passe.
   ────────────────────────────────────────────────────────────────────────── */

/* (a) */
html body .arbo-col[data-c="atelier"]{--dot:var(--ember)}
html body .arbo-col[data-c="formation"]{--dot:var(--teal)}

/* (b) */
html body .tick-track .m{color:var(--teal)}
html body .tick-track .w{color:var(--ember)}
html body .tick-track .r{color:var(--red)}

/* (d) COMPOSANTS SIGNATURE DE /pro — les cyans les plus visibles du site.

   POURQUOI cette sous-section existe : l'audit global comptait les couleurs,
   il ne les regardait pas à l'écran. Un balayage des styles calculés de
   /pro — la page d'accueil, celle où / redirige en 301 — a trouvé six
   composants que le comptage avait noyés dans la masse, dont deux énormes :
     · .hero-aura::after : une bulle floutée de 360 px en cyan à 34 % d'opacité,
       en bas à gauche du héros. C'est le plus gros aplat cyan du site.
     · .hero h1 .grad : le TITRE H1 de la page d'accueil est un dégradé qui
       finit en cyan. Le dernier mot de la promesse commerciale était cyan.
   Aucun des deux n'est atteignable par une redéfinition de jeton : tout est
   écrit en dur. Sélecteurs de page à 0-2-0, les nôtres à 0-2-2.
   Présents sur les 5 langues de pro.html (.si sur 10 fichiers). */

/* Le halo du héros garde ses DEUX bulles — c'est ce qui donne sa profondeur
   à la page d'accueil, la vitrine a le droit d'être spectaculaire. On change
   seulement la couleur de la seconde, et on baisse l'alpha : le turquoise est
   plus lumineux que le cyan à opacité égale, .18 rend le même poids visuel. */
html body .hero-aura::after{
  background:radial-gradient(circle,rgba(20,224,176,.18),transparent 62%);
}
/* Le dégradé du titre reste un dégradé — mais dans la famille chaude, avec
   les trois jetons ambre de la charte. Un H1 qui vire au turquoise couperait
   la promesse en deux marques. */
html body .hero h1 .grad,html body .grad{
  background-image:linear-gradient(100deg,var(--ember2),var(--ember) 45%,var(--hot));
}
html body .hub{
  background:linear-gradient(120deg,rgba(232,147,12,.08),rgba(20,224,176,.04));
  border-color:rgba(232,147,12,.28);
}
/* Pastille « live » : fond cyan plein → turquoise plein. L'encre reste sombre,
   11.3:1 sur le turquoise — c'était déjà le bon réflexe dans la page. */
html body .cxtag.live{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--bg);
}
/* Tuiles d'icônes de la section connectivité : fond cyan à 10 %. */
html body .spc .si{
  background:rgba(232,147,12,.10);
  color:var(--ember);
}

/* (e) RÉSIDUS DES AUTRES ARCHÉTYPES — même méthode, autres pages.
   Trouvés en balayant les styles calculés de /ecoles, /boutique et
   /ecosysteme, pas en comptant les chaînes de caractères. */

/* ecoles.html — le halo du héros de la peau sombre (ligne 405) rejouait le
   duo ambre + cyan. Sélecteur de page à 0-1-0, le nôtre à 0-1-2. */
html body .hero-sec{
  background:
    radial-gradient(1100px 660px at 82% -12%,rgba(232,147,12,.16),transparent 55%),
    radial-gradient(820px 620px at 4% 6%,rgba(20,224,176,.07),transparent 55%),
    linear-gradient(180deg,#0f1420,#0b0f16 74%);
}
/* ecoles.html — pastille d'icône du 2e segment : `.seg.b .sico` est à 0-3-0,
   il faut donc 0-3-2 pour la reprendre. C'est le sélecteur le plus spécifique
   que la feuille ait à battre sur toute la vitrine. */
html body .seg.b .sico{
  background:rgba(232,147,12,.12);
  color:var(--ember);
}

/* boutique.html — bandeau de configuration, dégradé cyan → ambre. */
html body .cfg{
  background:linear-gradient(120deg,rgba(232,147,12,.07),rgba(20,27,40,.5));
}
/* boutique.html — la pilule du sur-titre était cerclée et remplie de cyan.
   `background-color:transparent` est sûr sur les 277 .eyebrow du site : 270
   n'ont aucun fond, la déclaration y est un non-événement. La pilule de
   boutique devient un contour ambre — elle reste une pilule, elle change de
   couleur. C'est ce qui permet de traiter le cas sans toucher la page. */
html body .eyebrow{
  background-color:transparent;
  border-color:rgba(232,147,12,.28);
}

/* (c) — !important assumé : contre un style inline injecté par JS. */
[style*="color:#22d3ee" i],[style*="color:rgba(34,211,238" i],
[style*="color:#ff2bd6" i],[style*="color:#8b6cff" i],[style*="color:#7c5cff" i]{
  color:var(--ember)!important;
}
/* Les pastilles de légende d'ecosysteme.html portent leur couleur en dur dans
   l'attribut : <i style="background:#8B6CFF">. Le violet et le magenta doivent
   donc figurer ici aussi, pas seulement le cyan. Report sur le turquoise, pour
   rester cohérent avec le remap des jetons --violet / --mag en section 3. */
[style*="background:rgba(34,211,238" i],[style*="background:#22d3ee" i]{
  background:rgba(232,147,12,.16)!important;
}
[style*="background:#8b6cff" i],[style*="background:#7c5cff" i],
[style*="background:#ff2bd6" i],[style*="background:#a06bff" i],
[style*="background:rgba(139,108,255" i]{
  background:var(--teal)!important;
}
[style*="border-color:#22d3ee" i],[style*="border-color:rgba(34,211,238" i]{
  border-color:rgba(232,147,12,.38)!important;
}


/* ──────────────────────────────────────────────────────────────────────────
   15. IMPRESSION — papier blanc, encre noire, ambre en accent

   POURQUOI ce bloc force ce que la section 4 propose : une page peut être
   imprimée sans porter data-mf-paper. Onze pages ont déjà leur propre
   @media print ; on repasse dessus avec la même arme que partout ailleurs
   (spécificité), sauf sur deux points signalés.

   RÈGLE ABSOLUE : on n'imprime jamais le fond d'atelier. On imprime la
   typographie, l'ambre assombri, les filets et les rayons. Un certificat doit
   se reconnaître comme MECAFLOW sans vider une cartouche.
   ────────────────────────────────────────────────────────────────────────── */
@media print{

  @page{margin:14mm}

  :root:root{
    --bg:#ffffff;--bg2:#ffffff;--paper:#ffffff;--paper2:#ffffff;
    --panel:#ffffff;--card:#ffffff;--card2:#ffffff;
    --ink-max:#000000;--ink:#17202E;--ink2:#3C4653;--ink3:#5A6678;
    --mut:#3C4653;--mut2:#5A6678;
    --line:#D7DEE8;--line2:#EAEEF4;
    /* Accents : uniquement les variantes assombries. L'ambre plein sur blanc
       fait 2.44:1 — il ne passe pas en texte, jamais. */
    --ember:#A25F00;--ember2:#A25F00;--hot:#A25F00;--amber:#A25F00;
    --gold:#A25F00;--warn:#A25F00;--cyan:#A25F00;--blue:#A25F00;--blue2:#A25F00;
    --teal:#0A7A60;--violet:#0A7A60;--mag:#0A7A60;
    --ok:#1a8c46;--red:#C62828;
    --shadow:none;--glow:none;
  }

  /* ⚠️ !important assumé (2/2) : mf-fonts.css impose
     `body{padding-left:238px!important}` pour réserver la place du panneau
     mf-nav à l'écran. Sans annulation, chaque page imprimée part avec une
     gouttière vide de 6 cm. Une déclaration !important ne se contre qu'avec
     une autre ; on gagne par la spécificité supérieure (html body vs body). */
  html body{padding-left:0!important;padding-top:0!important}
  html::before{display:none!important}

  html,html body{
    background:#ffffff;
    background-image:none;
    color:var(--ink);
  }
  html body::before,html body::after{background:none;content:none}

  html body h1,html body h2,html body h3,html body h4{color:#000000}
  html body p,html body li{color:var(--ink)}
  html body .lead{color:var(--ink)}
  html body a{color:var(--ink);text-decoration:underline}

  /* Surfaces : on garde le rayon et le filet — c'est ce qui fait « document
     MECAFLOW » — mais on retire l'aplat et l'ombre. */
  html body .card,html body .pcard,html body .frame,html body .hcard,
  html body .callout,html body .band,html body .related a{
    background:#ffffff;
    border:1px solid var(--line);
    box-shadow:none;
  }
  html body .callout,html body .band{border-left:3px solid var(--ember)}

  /* Le sur-titre reste ambre : c'est la seule tache de couleur du document,
     et à 5.03:1 elle est parfaitement lisible. */
  html body .eyebrow{color:var(--ember)}

  /* Un bouton n'a pas de sens sur papier : on le rend en encadré neutre
     plutôt qu'en aplat orange qui boirait la cartouche. */
  html body a.cta,html body button.cta,html body .btn,html body .btn.primary{
    background:#ffffff;
    color:var(--ink);
    border:1.5px solid var(--ember);
    box-shadow:none;
    text-shadow:none;
  }

  /* Chrome d'écran : rien de tout ça n'existe sur une feuille A4. */
  html body>header,html body>footer nav,html body .mf-side,html body .drawer,
  html body .burger,html body .tnav,html body .mfic,html body .ticker,
  html body .band .btn,html body .related,html body .faq summary::after{
    display:none;
  }

  /* Éviter qu'un titre finisse seul en bas de page ou qu'une carte se coupe. */
  html body h1,html body h2,html body h3{break-after:avoid-page}
  html body .card,html body .callout,html body blockquote{break-inside:avoid}
}


/* ──────────────────────────────────────────────────────────────────────────
   16. MOUVEMENT — respecter le réglage système

   POURQUOI : la vitrine a des .reveal, un bandeau défilant et des survols
   qui translatent. Une seule page (pro.html) coupait l'animation du ticker.
   On généralise : c'est une exigence d'accessibilité, pas une option.
   ────────────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{
    animation-duration:.001ms;
    animation-iteration-count:1;
    transition-duration:.001ms;
    scroll-behavior:auto;
  }
}
