/* Feuille partagee par toutes les pages.
 *
 * Elle ne contient QUE ce qui est vrai partout. Les regles de mise en page
 * viennent des maquettes et different d'une page a l'autre, parfois sur le
 * meme selecteur : la homepage passe [data-h1] a 38px sous 860px, la fiche
 * formation a 33px sous 960px. Les fusionner en un seul fichier aurait casse
 * l'une des deux mises en page validees. Chaque page porte donc son propre
 * bloc, injecte dans le <head> par base.njk depuis src/_includes/styles/.
 *
 * Meme raison pour les classes de survol : le transcodeur les numerote par
 * fichier, donc .dc-hover-3 ne veut pas dire la meme chose sur deux pages.
 */

/* ------------------------------------------- comportement des gabarits partages
 *
 * L'en-tete et le pied de page sont communs a toutes les pages. Leurs regles
 * responsives doivent donc l'etre aussi, et c'est ici leur place.
 *
 * Elles etaient jusqu'au 07/08 dans la feuille de CHAQUE maquette, recopiees a
 * l'identique quinze fois. Consequence : les neuf pages ecrites sans maquette,
 * les quatre pages legales, les quatre articles et la page 404, affichaient la
 * navigation complete du bureau sur un telephone, sans bouton de menu, et
 * debordaient de plusieurs centaines de pixels. Le defaut ne se voyait sur
 * aucune page issue d'une maquette, ce qui est exactement pourquoi il a tenu.
 *
 * Les feuilles de maquette gardent leur copie : elles disent la meme chose, il
 * n'y a pas de conflit. Le point de bascule retenu est celui de la page de
 * reference, 1080 pixels.
 */

/* Meme famille de defaut, trouve le 08/08. La remise a zero de la marge du
 * body vit dans les quatorze feuilles de maquette et nulle part ailleurs. Les
 * neuf pages ecrites sans maquette gardaient donc les 8 pixels que le
 * navigateur pose par defaut : leur en-tete et leur pied de page, censes tenir
 * toute la largeur, s'affichaient a 359 pixels sur un ecran de 375, avec un
 * lisere blanc sur les quatre cotes. Mesure sur /mentions-legales, pas suppose.
 * Les feuilles de maquette gardent leur copie, elles disent la meme chose. */
body {
  margin: 0;
}

/* LA POLICE DU SITE, POSEE ICI LE 24/08/2026. C'EST UN DEFAUT ANCIEN.
 *
 * `font-family` etait declaree dans les QUATORZE feuilles de maquette et nulle
 * part ailleurs. Consequence mesuree, et verifiee sur la capture de reference
 * d'avant tout refactor, donc anterieure a ce chantier :
 *
 *   NEUF PAGES ETAIENT SERVIES DANS LA POLICE PAR DEFAUT DU NAVIGATEUR,
 *   c'est-a-dire en serif, sur un site dont la marque est une grotesque.
 *
 * Les quatre pages legales, /accessibilite/, la page 404, ET LES QUATRE
 * ARTICLES DE BLOG. Ces quatre articles sont les seules pages du site a porter
 * un volume de recherche reel, cluster OPCO, section 10 de CLAUDE.md : elles ne
 * ressemblaient pas au site qu'elles servent.
 *
 * C'est la TROISIEME fois que ce projet rencontre la meme cause : une verite
 * partagee ecrite dans les feuilles de page. Voir plus haut la marge du body,
 * trouvee le 08/08, et le comportement responsive de l'en-tete, trouve le
 * 07/08. Le motif est toujours le meme : le defaut ne se voit sur AUCUNE page
 * issue d'une maquette, ce qui est exactement pourquoi il tient.
 *
 * Les quatorze feuilles gardent leur copie : elles disent la meme chose, elles
 * sont injectees apres celle-ci, il n'y a pas de conflit et leur rendu ne bouge
 * pas d'un pixel. Verifie par comparaison au pixel apres la pose. */
body {
  font-family: var(--police-texte);
}

/* ----------------------------------------- police des titres, 06/10/2026
 *
 * KITT Formation ecrit ses titres en Space Grotesk, la police de « Formation »
 * dans le logo, et son texte en Hanken Grotesk, comme le kit du logo le
 * prescrit. Seuls h1, h2 et h3 changent de police : aucun titre ne la fixait
 * en ligne, cette regle suffit.
 *
 * LE REPLI. Space Grotesk n'est pas prechargee : la section 3 de CLAUDE.md et
 * la mission ne prechargent que la police du texte. Pendant son arrivee, le
 * titre s'affiche donc dans le repli, puis bascule. Un repli quelconque ferait
 * sauter la page a la bascule, Space Grotesk etant plus large. Mesure le
 * 06/10/2026 dans Chromium sur les 166 titres du site, a graisse 600 : Space
 * Grotesk est 7,45 % plus large que Hanken Grotesk (mediane 7,6 %, de 0 a
 * 10 %). Le repli est donc Hanken Grotesk, deja prechargee, agrandie de 107,4 %.
 * Mesure rejouable : _rebrand/scripts/mesurer-repli-titres.mjs.
 *
 * font-display: swap, ajoute le 12/10/2026 (constat F1, lot W1-5) : sans lui,
 * le repli valait auto, donc bloquant dans Chromium, et le titre restait
 * invisible tant que Space Grotesk n'etait pas arrivee, au lieu de s'afficher
 * dans le repli. Sur reseau lent, le titre peut desormais passer par la police
 * systeme, puis le repli, puis Space Grotesk. */
@font-face {
  font-family: "Space Grotesk Repli";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/polices/hanken-grotesk-latin-normal.woff2") format("woff2");
  size-adjust: 107.4%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1, h2, h3 {
  font-family: var(--police-titre);
}

/* Le gras par defaut du navigateur vaut 700 : sans cette regle, chaque
 * <strong> servirait une cinquieme graisse. */
strong, b, th {
  font-weight: var(--g-fort);
}

/* MEME CAUSE, MEME PORTEE. Les liens de l'en-tete et du pied de page etaient
 * soulignes sur ces neuf pages, et pas sur les quatorze autres, alors que ce
 * sont les MEMES gabarits partages. La regle ne vise volontairement QUE les
 * deux reperes partages : dans le corps d'un texte, un lien souligne est un
 * lien correctement signale, et le retirer creerait un defaut d'accessibilite
 * au titre du critere 1.4.1 Utilisation de la couleur. */
header a,
footer a {
  text-decoration: none;
}

/* SYMETRIQUE DE LA REGLE CI-DESSUS, posee le 26/08/2026.
 *
 * Les feuilles de page retirent le soulignement de TOUS les liens, y compris de
 * ceux qui vivent dans une phrase. Un tel lien ne se distingue alors plus que
 * par sa couleur, ce que le critere WCAG 1.4.1, Utilisation de la couleur,
 * refuse : un daltonien ne le voit pas.
 *
 * `axe-core` le signalait sur `/contact/`, gravite serieuse, sur le lien vers
 * la politique de confidentialite place dans le libelle de la case de
 * consentement. C'etait la DERNIERE violation automatique du site.
 *
 * La regle vise les libelles de formulaire et les paragraphes, jamais les
 * boutons ni la navigation : un lien dans un libelle est, par construction,
 * dans une phrase. */
label a,
p a:not([class]) {
  text-decoration: underline;
}

/* LE LIEN DU CERTIFICATEUR, dans la ligne « Certificateur : » de quatre fiches.
 * Il se distinguait du texte voisin par sa graisse, 700 contre 600. Le kit du
 * logo KITT ramene les deux a 600 le 06/10/2026 : le lien ne se distinguait
 * plus que par sa couleur, a 2,73:1 du texte qui l'entoure, ce que le critere
 * WCAG 1.4.1 refuse et que axe a signale sur les deux fiches LILATE. Il est
 * souligne, comme les liens des paragraphes ci-dessus. */
a[data-lot-codes-rs][target="_blank"] {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* LES LIENS SANS STYLE prenaient le bleu par defaut du navigateur, #0000EE, et
 * son violet une fois visites : mesure du 06/10/2026, 34 liens sur les pages
 * legales et le contact, dont le telephone et le site du mediateur. Ce n'etait
 * pas le bleu du site. Seuls les liens sans classe ni style en
 * ligne sont vises : les autres portent deja leur couleur. */
a:not([class]):not([style]) {
  color: var(--primaire);
}

/* ------------------------------------------------- jetons de design, 13/08/2026
 *
 * CE QUE CE BLOC EST, ET CE QU'IL N'EST PAS.
 *
 * Il declare en un seul endroit les valeurs relevees par comptage sur le HTML
 * SERVI des 23 pages, pas des valeurs souhaitees. Les huit couleurs sont celles
 * de la section 3 de CLAUDE.md, et le comptage les confirme : #6B6459 apparait
 * 1 323 fois, #0033FF 1 244, #1C1A17 667, #EBE4D8 509.
 *
 * IL NE REECRIT RIEN. Les quinze maquettes ont ete validees par la cliente et
 * portent leurs styles EN LIGNE, sur plusieurs milliers de balises : les
 * remplacer par des variables demanderait de toucher au HTML valide, ce que la
 * section 2 de CLAUDE.md interdit, pour un gain nul a l'ecran. Ces jetons
 * servent donc a ce qui n'est PAS dans les maquettes : cette feuille partagee,
 * les quatre pages legales, les quatre articles, la page 404, et tout ce qui
 * sera ecrit ensuite.
 *
 * L'ECHELLE DES RAYONS EST LE SEUL VRAI DESORDRE MESURE : douze valeurs
 * distinctes de 7 a 22 px sur le site servi, dont 8, 9, 10, 11, 12, 13 et 14
 * px, sept paliers pour un ecart total de sept pixels. Aucun oeil ne distingue
 * un rayon de 11 d'un rayon de 12. L'echelle ci-dessous en retient quatre. Elle
 * ne corrige pas l'existant, elle empeche le desordre de grandir.
 *
 * AUCUN JETON N'EST INVENTE : chaque valeur est presente dans le site actuel.
 *
 * ------------------------------------------ CHANGEMENT DE PALETTE, 06/10/2026
 *
 * LE PARAGRAPHE « IL NE REECRIT RIEN » CI-DESSUS N'EST PLUS VRAI, et c'est
 * voulu. La palette de KITT Formation remplace la precedente ; ce changement a
 * ete decide par le donneur d'ordre, sous la carte blanche de la cliente du
 * 05/09/2026, avec validation visuelle de la cliente avant tout depot. Les
 * 2 353 couleurs ecrites en dur dans les styles en ligne et les feuilles de
 * page sont devenues des jetons : une couleur ne s'ecrit plus qu'ICI.
 *
 * D'OU VIENNENT LES VALEURS. Celles que le kit du logo « Cap » definit gardent
 * leur valeur exacte : encre #0B0B0C, bleu #0033FF, bleu sur fond sombre
 * #7F98FF, fond sombre #0E1116, et les neutres de ses documents. Les autres
 * gardent la CLARTE PERCUE (OKLCH) de la couleur qu'elles remplacent,
 * dans la famille de gris du kit : chaque contraste texte et fond tient donc a
 * 0,07 pres. Calcul rejouable : _rebrand/scripts/palette-kitt.mjs.
 *
 * Aucun nom ne designe une teinte. Les anciens --bleu, --creme et --encre
 * decrivaient une couleur ; leurs successeurs portent un role.
 */
:root {
  /* Couleurs de KITT Formation */
  --primaire: var(--primaire-500);
  --primaire-survol: var(--primaire-600);
  --primaire-pale: #eef1ff;          /* lavis bleu du kit */
  --primaire-sur-sombre: #7f98ff;    /* bleu sur fond sombre du kit */
  --bordure-primaire: var(--primaire-200);
  --primaire-rvb: 0 51 255;          /* pour les transparences : rgb(var(--primaire-rvb) / 0.35) */

  --texte: #0b0b0c;                  /* encre du kit */
  --texte-rvb: 11 11 12;
  --texte-secondaire: #62656e;       /* clarte de l'ancien #6b6459 */
  --texte-tertiaire: #4e515a;        /* neutre du kit */
  --bordure: #e4e5e8;                /* neutre « ligne » du kit */
  --bordure-douce: #edeef0;          /* neutre du kit */
  --bordure-forte: #cecfd4;          /* clarte de l'ancien #d6cfc0 */
  --surface: #f1f2f4;                /* neutre « brume » du kit */
  --surface-douce: #edeef0;          /* neutre du kit */
  --fond: #ffffff;                   /* blanc pur, section 3 de CLAUDE.md */
  --fond-sombre: #0e1116;            /* fond sombre du kit */
  --fond-sombre-survol: #171b20;     /* survol d'une carte sombre : meme ecart de clarte qu'avec la palette precedente */

  /* Echelle de la primaire : dix paliers a teinte OKLCH constante (264), la
     clarte seule progresse, le 500 est le bleu du logo. */
  --primaire-50: #f3f7ff;
  --primaire-100: #e2ecff;
  --primaire-200: #bfd5ff;
  --primaire-300: #91b5ff;
  --primaire-400: #5186ff;
  --primaire-500: #0033ff;
  --primaire-600: #0027cc;
  --primaire-700: #001b9b;
  --primaire-800: #00106d;
  --primaire-900: #000748;

  /* rayons, echelle reduite a quatre paliers */
  --rayon-s: 8px;
  --rayon-m: 12px;
  --rayon-l: 16px;
  --rayon-xl: 22px;

  /* le reste, releve tel quel */
  --largeur-contenu: 1220px;
  --transition: 0.2s ease;

  /* ------------------------------------------------------------------
   * JETONS AJOUTES LE 24/08/2026, phase 0 de la refonte.
   *
   * CE QU'ILS SONT : l'INVENTAIRE de ce que les pages emploient deja,
   * nomme. Chaque valeur ci-dessous est relevee dans le HTML servi, aucune
   * n'est choisie. C'est ce qui permet de les extraire sans que le rendu
   * bouge d'un pixel, ce que tools/comparer.mjs verifie.
   *
   * CE QU'ILS NE SONT PAS : une echelle. Une vraie echelle typographique
   * n'a pas douze paliers entre 11 et 21 pixels, et une echelle
   * d'espacement ne produit pas 9px comme valeur dominante. Le site sert
   * aujourd'hui 33 tailles de police, 17 rayons et 34 espacements, mesure.
   * REDUIRE ces valeurs deplacerait des pixels : c'est un arbitrage a
   * soumettre a la cliente, pas une correction d'integration. Voir le
   * garde-fou de la section 2 de CLAUDE.md.
   *
   * Nommer d'abord, reduire ensuite. Un nom se discute, 1 244 occurrences
   * de #0033FF ne se discutent pas.
   * ------------------------------------------------------------------ */

  /* Texte. Les paliers portent le role, pas la taille : c'est ce qui
     permettra de changer la valeur sans renommer quoi que ce soit. */
  --t-micro: 12px;      /* pastilles, mentions */
  --t-petit: 13px;      /* legendes, sur-titres */
  --t-courant: 14px;    /* texte de carte */
  --t-interface: 15px;  /* navigation, boutons */
  --t-corps: 16px;      /* corps de page */
  --t-intertitre: 18px; /* titre de carte et chapeau */
  --t-lead: 20px;       /* chapeau de section */
  --t-h3: 24px;
  --t-h2-petit: 28px;
  --t-h2: 34px;
  --t-h1: 42px;
  --t-h1-large: 48px;
  --t-display: 55px;    /* le seul titre d'accueil */

  /* Graisses. Le site en servait cinq avant le 06/10/2026, de 400 a 800. Le kit du logo KITT en
     prescrit quatre au total, et sa maquette d'en-tete les montre : Hanken
     Grotesk 400 pour le texte, 500 pour la navigation, 600 pour l'accent et
     les boutons, Space Grotesk 600 pour les titres. --g-fort et --g-titre
     gardent leur nom, donc leur role, et prennent la valeur du kit le
     06/10/2026 : une page n'ecrit plus jamais de chiffre de graisse. */
  --g-normal: 500;
  --g-appuye: 600;
  --g-fort: 600;
  --g-titre: 600;

  /* Polices. Le repli des titres est Hanken Grotesk mise a l'echelle de Space
     Grotesk (voir @font-face « Space Grotesk Repli » plus bas) : pendant les
     quelques centaines de millisecondes ou la police des titres arrive, le
     titre occupe deja presque sa place, et la page ne saute pas. */
  --police-texte: "Hanken Grotesk", system-ui, sans-serif;
  --police-titre: "Space Grotesk", "Space Grotesk Repli", "Hanken Grotesk", system-ui, sans-serif;

  /* Interlignes releves */
  --i-titre: 1.28;
  --i-lecture: 1.55;
  --i-aere: 1.6;

  /* Les rayons de composant ont ete SUPPRIMES le 24/08/2026. Ils valaient 18,
     11 et 8 pixels, c'est-a-dire un doublon de l'echelle a quatre paliers
     declaree plus haut, avec deux valeurs qui n'y figuraient meme pas. Les
     composants pointent desormais sur --rayon-s, --rayon-m et --rayon-l.
     Ajouter un jeton pour un composant, c'est recommencer le desordre a
     l'etage au-dessus. */

  /* Ombres reellement employees */
  --ombre-pastille: 0 4px 12px -6px rgb(var(--texte-rvb) / 0.42);
  --ombre-carte: 0 24px 48px -32px rgb(var(--primaire-rvb) / 0.35);
}

/* --------------------------------------------------------------------------
 * COMPOSANTS PARTAGES, extraits le 24/08/2026, phase 0.
 *
 * Ils vivent ICI et non dans une feuille de page parce qu'ils apparaissent sur
 * plusieurs routes. site.css est un fichier lie, donc telecharge et mis en
 * cache UNE fois pour les 23 pages, la ou une feuille de page est reinjectee
 * en ligne dans chaque document.
 * -------------------------------------------------------------------------- */

/* Le jeu d'icones. Ces deux declarations etaient ecrites en ligne par le
   raccourci `icone` de .eleventy.js, sur les 461 icones servies par le site.
   `display:block` supprime l'espace sous la ligne de base que le navigateur
   reserve aux elements en ligne, `flex-shrink:0` empeche l'icone d'etre
   ecrasee quand le texte qui l'accompagne est long. */
.icone {
  display: block;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- accordeon
 *
 * IL EXISTE CINQ ACCORDEONS SUR CE SITE, mesure le 24/08/2026. Le meme
 * composant y est ecrit avec cinq rayons (14, 16, 18 px), quatre paddings de
 * bouton et cinq paddings de panneau. Personne n'a concu cinq accordeons :
 * c'est la trace du transcodage, chaque maquette ayant ete convertie pour
 * elle-meme.
 *
 * La phase 0 les extrait TELS QU'ILS SONT, sans en fusionner aucun : reduire
 * cinq variantes a une deplacerait des pixels sur des maquettes validees.
 * C'est un arbitrage a soumettre, il est consigne dans docs/DECISIONS.md.
 *
 * PIEGE EVITE ICI, et il valait d'etre vu. `.accordeon-panneau` est deja porte
 * par deux familles de panneaux : ceux qui declarent leur police en ligne, et
 * ceux qui n'ont qu'un retrait et heritent du reste. Poser la police sur
 * `.accordeon-panneau` aurait donc modifie 34 panneaux qui ne la portaient
 * pas. Les proprietes de texte vivent sur `.accordeon-reponse`, appliquee
 * uniquement la ou elles etaient ecrites.
 * ------------------------------------------------------------------------ */

.accordeon-element {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
}

/* LES CINQ ACCORDEONS SONT DEVENUS UN, le 24/08/2026, sur decision du donneur
   d'ordre. Le resserrement des echelles en avait deja rapproche trois : les
   rayons de 14, 16 et 18 pixels sont tous tombes sur 12 ou 16, et les gaps de
   16 et 18 se sont rejoints sur 16.
   La fusion finale retient les valeurs de la variante DOMINANTE, 98 elements
   contre 41 : c'est celle qui fait bouger le moins de choses. Les 41 autres
   perdent 4 pixels de rayon et 4 de marge interieure.
   `--moyen` n'existe plus : garder un modificateur qui ne modifie rien, c'est
   laisser la porte ouverte a ce qu'il redevienne different. */

.accordeon-bouton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}


.accordeon-question {
  flex: 1;
  font-size: var(--t-corps);
  font-weight: var(--g-fort);
  color: var(--texte);
}

/* Le marqueur pivote deja de 180 degres a l'ouverture, regle plus bas dans ce
   fichier. Seule son apparence au repos etait ecrite en ligne, 132 fois, dans
   deux ordres de declaration differents pour un resultat identique. */
.marqueur-accordeon {
  color: var(--primaire);
  flex-shrink: 0;
  display: flex;
}

.accordeon-reponse {
  padding: 0 20px 20px;
  font-size: var(--t-interface);
  line-height: var(--i-aere);
  color: var(--texte-secondaire);
}

/* ----------------------------------------- taille des cibles tactiles
 *
 * WCAG 2.2, critere 2.5.8 Target Size (Minimum), niveau AA : une cible
 * pointee doit mesurer au moins 24 par 24 pixels.
 *
 * CE QUI EST VISE ICI, ET SEULEMENT CELA. Le critere porte DEUX exceptions
 * qui retirent la majorite des liens du site de son perimetre :
 *   - un lien situe DANS une phrase, dont la taille est contrainte par
 *     l'interligne du texte qui l'entoure, est exempte ;
 *   - un controle DESACTIVE n'est pas une cible. Le formulaire de contact en
 *     desactive dix-sept a dessein, voir interactions.js.
 * Le releve non filtre annoncait environ 300 defauts. Le releve conforme au
 * texte du critere en donne 55. Corriger les 245 autres aurait alourdi des
 * paragraphes de texte courant sans rien resoudre.
 *
 * Restent les cibles ISOLEES : un sommaire, une liste de liens connexes, les
 * coordonnees du pied de page, un lien de certification. Chacune est seule
 * sur sa ligne, donc aucune exception ne s'applique.
 *
 * Le lien vers France Competences porte deja `display:block` en ligne : lui
 * imposer `inline-flex` serait sans effet, un style en ligne bat la feuille.
 * Il ne recoit donc que la hauteur minimale, qui suffit.
 * -------------------------------------------------------------------- */

nav.sommaire a,
footer address a,
.article li > a:only-child,
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Fils d'Ariane. Aucun style de conteneur n'est pose ici : les deux
   exemplaires ecrits en ligne gardent le leur, et ceux des articles gardent
   leur absence de style. Seule la cible change. */
.fil-ariane a,
.liens-legaux a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Lien vers la fiche France Competences, et appel a l'action textuel des six
   fiches. `min-height` seul serait SANS EFFET : ces liens sont des elements en
   ligne, et la propriete ne s'applique pas a un element en ligne non remplace.
   Il faut donc aussi changer leur mode d'affichage.
   Ils portaient `display:block` en ligne jusqu'a l'extraction du 24/08, qui a
   remplace leur `style="color:#0033FF"` par la classe `.accent` et leur a fait
   perdre ce display au passage. Le defaut vient de la, il est signale ici pour
   que personne ne le cherche ailleurs. */
a[href*="francecompetences.fr"],
a.dc-hover-3[href*="objet=formation"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* SECONDE PASSE, meme critere, les cibles isolees qui restaient.
 *
 * Trois familles, toutes reconnaissables a leur STRUCTURE et non a une classe,
 * parce que ces liens n'en portent pas : les maquettes les ont ecrits en
 * ligne, et les classes `dc-hover-N` sont numerotees par fichier, donc
 * `.dc-hover-3` ne designe pas la meme chose sur deux pages. Cibler par la
 * structure est ici plus sur que cibler par la classe.
 *
 * 1. Un lien SEUL dans un element de liste. C'est le motif des blocs
 *    « A lire aussi » et des listes de guides : une ligne, un lien, rien
 *    autour. Aucune exception « en ligne » ne s'y applique.
 * 2. Les lignes de donnees des fiches, ou une etiquette fait face a une valeur
 *    cliquable : le certificateur, la mention de financement.
 * 3. Tout lien deja pose en `inline-flex` qui n'atteint pas 24 pixels. La
 *    regle est large a dessein et elle se limite d'elle-meme : un lien qui
 *    depasse deja 24 pixels ne bouge pas d'un pixel, seuls les trop petits
 *    grandissent. */
main li > a:only-child,
main li:has(> .resume) > a,
main a[aria-label*="Lire l"],
main a[style*="text-align:right"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

main a[style*="inline-flex"] {
  min-height: 24px;
}

/* La case a cocher est rendue a 20 pixels par le navigateur. `width:auto` est
   pose en ligne sur chacune, donc `width` depuis la feuille serait ignore :
   `min-width` ne l'est pas, et produit le meme resultat. */
input[type="checkbox"] {
  min-width: 24px;
  min-height: 24px;
}

/* ------------------------------------------------------- listes a puces
 *
 * Le motif de liste des fiches formation et des pages d'offre : une puce
 * bleue alignee sur la premiere ligne, un filet de separation, et un texte
 * legerement plus sombre que le gris secondaire.
 * 176 occurrences sur 6 pages, ecrites a l'identique a chaque fois.
 * ---------------------------------------------------------------------- */

.item-liste {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: var(--t-interface);
  line-height: 1.5;
  color: var(--texte-tertiaire);
  border-top: 1px solid var(--bordure-douce);
}

/* `padding-top:3px` aligne optiquement la puce sur la premiere ligne de texte : sans lui, elle flotte trois pixels trop haut parce que la boite de l'icone n'a pas la meme hauteur que la ligne. */
.puce-liste {
  color: var(--primaire);
  display: flex;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Enveloppe qui donne la couleur de marque a ce qu'elle contient, presque
   toujours une icone, qui la reprend par `currentColor`. 203 occurrences sur
   9 pages. C'est ce qui rendra le bleu de la marque modifiable en un point. */
.accent {
  color: var(--primaire);
}

/* ------------------------------------------------- fond et schema de couleur
 *
 * LE SITE NE DECLARAIT AUCUNE COULEUR DE FOND. Ni sur html, ni sur body : les
 * deux etaient transparents. Tant qu'on regarde en theme clair, le blanc par
 * defaut du navigateur donne le change et rien ne se voit.
 *
 * Chez un visiteur en THEME SOMBRE, le fond sombre du navigateur passe au
 * travers, et le texte du site, qui est un noir presque pur, #1C1A17, devient
 * illisible. Les seuls blocs restes lisibles sont ceux qui portent un fond en
 * dur, comme les encadres creme : la page s'affiche en damier.
 *
 * Le defaut touchait LES 23 PAGES, pas une seule. Constate dans le navigateur
 * le 10/08/2026, pas suppose.
 *
 * La section 3 de CLAUDE.md impose un fond principal blanc pur #FFFFFF. La
 * regle existait donc depuis le debut, elle n'avait simplement jamais ete
 * ecrite en CSS.
 *
 * `color-scheme: light` dit au navigateur que ce site est concu en clair et
 * uniquement en clair. Sans cette declaration, Chrome peut appliquer son
 * assombrissement automatique et repeindre de lui-meme les champs de
 * formulaire, les barres de defilement et les couleurs par defaut, ce qui
 * casserait les 52 champs du formulaire de contact. C'est une declaration
 * honnete : le site n'a pas de theme sombre, autant le dire au navigateur
 * plutot que de le laisser en inventer un. */

/* LE FOND RESTE ECRIT EN LITTERAL, ET C'EST VOLONTAIRE.
 * Le point 9 f de tools/recette.mjs verifie que html ou body declare bien un
 * fond blanc, et il le cherche par expression reguliere sur #ffffff ou #ffffff.
 * Ecrire var(--fond) ici ferait echouer ce controle, qui protege les 23 pages
 * du defaut d'affichage en theme sombre constate le 10/08. Une valeur qui sert
 * de garde ne se met pas derriere une indirection. */
html {
  background-color: #ffffff;
  color-scheme: light;
}

body {
  background-color: #ffffff;
  color: var(--texte);
}

[data-burger] {
  display: none;
}

@media (max-width: 1080px) {
  [data-nav],
  [data-hcta] {
    display: none !important;
  }
  [data-burger] {
    display: flex !important;
  }
}

@media (max-width: 960px) {
  [data-hcta-ghost] {
    display: none !important;
  }
}

/* Le pied de page partage est une grille de quatre colonnes portant
 * `data-col4`, et non `data-footer-grid` : ce dernier vient des footers des
 * fiches, qui ne sont pas celui qui est servi. Une premiere version de ces
 * regles visait le mauvais selecteur et ne s'appliquait donc a rien, ce qui
 * laissait le pied de page en quatre colonnes sur un telephone.
 *
 * Les regles sont limitees au pied de page. `data-col2` et `data-col4`
 * existent aussi dans le corps des maquettes, ou chaque feuille de page les
 * traite deja a son propre point de bascule : une regle globale y changerait
 * une mise en page validee. */
@media (max-width: 860px) {
  [data-wrap] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer [data-col2],
  footer [data-col3],
  footer [data-col4] {
    grid-template-columns: 1fr !important;
  }
  footer [data-hrow] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* L'attribut hidden doit gagner. Les maquettes portent leurs styles en ligne,
 * et un style="display:flex" en ligne l'emporte sur le display:none que le
 * navigateur associe a [hidden]. Sans cette regle, le menu mobile reste
 * affiche par-dessus toute la page alors qu'il se declare masque. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------- accordeons
 *
 * Le texte des panneaux est TOUJOURS dans le HTML servi : c'est la regle de la
 * section 3 de CLAUDE.md, et c'est ce que lisent les moteurs de reponse, qui
 * n'executent pas le JavaScript. Seul l'affichage est replie.
 *
 * Le repli est conditionne a la classe "js" posee sur <html> par un script en
 * tete de page. Sans JavaScript, tous les panneaux restent ouverts et la page
 * reste entierement lisible, au lieu d'offrir des boutons qui n'ouvrent rien.
 */
/* Seule la fermeture est forcee. Certains panneaux portent un display:flex en
 * ligne, qui l'emporterait sur une regle de feuille ; d'ou le !important. Mais
 * on ne declare RIEN a l'ouverture : le style en ligne de la maquette reprend
 * alors la main et le panneau retrouve exactement la disposition validee, flex
 * ou bloc selon les cas. Un display:block force a l'ouverture casserait les
 * panneaux qui sont des colonnes flex. */
.js .accordeon-panneau:not(.ouvert) {
  display: none !important;
}

/* L'indicateur est le dernier element du bouton. Il pivote au lieu de changer
 * de caractere : aucune substitution de glyphe, donc aucun risque de
 * reintroduire un tiret.
 *
 * CETTE ROTATION EXISTAIT DEPUIS LE DEBUT ET NE SE VOYAIT PAS. Constate le
 * 13/08/2026 : le marqueur etait un « + » sur les accordeons fermes et un
 * « − » sur les ouverts, et ces deux signes sont SYMETRIQUES PAR ROTATION.
 * Les faire pivoter d'un demi-tour les laisse identiques a eux-memes. Le
 * mecanisme tournait donc pour rien, sur les 184 accordeons du site, et le
 * visiteur n'avait aucun retour visuel a l'ouverture.
 *
 * Le marqueur est desormais un chevron, qui n'est pas symetrique : la meme
 * regle, inchangee, produit enfin l'effet qu'elle decrit. Le second selecteur
 * couvre les marqueurs qui ne sont pas le dernier element de leur bouton,
 * cas rencontre sur /financement/ et sur /entreprises/. */
[data-accordeon] > span:last-child,
[data-accordeon] .marqueur-accordeon {
  transition: transform 0.18s ease;
}
[data-accordeon][aria-expanded="true"] > span:last-child,
[data-accordeon][aria-expanded="true"] .marqueur-accordeon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  [data-accordeon] > span:last-child,
  [data-accordeon] .marqueur-accordeon {
    transition: none;
  }
}

/* ------------------------------------------------------------------ filtre
 *
 * L'onglet actif reprend exactement le style que la maquette lui donnait :
 * fond bleu principal, texte blanc, bordure assortie. Les onglets inactifs
 * gardent leur style en ligne, d'ou le !important, qui ne sert qu'a passer
 * devant lui. Aucune couleur nouvelle n'est introduite.
 */
[data-filtre][aria-pressed="true"] {
  background: var(--primaire) !important;
  color: #ffffff !important;
  border-color: var(--primaire) !important;
}

/* -------------------------------------------------------- ressources liees
 *
 * Bloc de renvoi vers les articles, pose en fin de /entreprises et de
 * /financement. C'est le seul contenu ajoute a une maquette validee, et
 * l'etape 7 de CLAUDE.md le demande explicitement : sans liens entrants, les
 * articles restent orphelins. Volontairement sobre, il ne concurrence aucun
 * appel a l'action de la page.
 */
.ressources-liees {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 40px 72px;
}
.ressources-liees h2 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight:var(--g-titre);
  margin: 0 0 8px;
}
.ressources-liees > p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-secondaire);
  margin: 0 0 24px;
  max-width: 640px;
}
.ressources-liees ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ressources-liees li {
  background: #ffffff;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 20px 24px;
}
.ressources-liees a {
  display: block;
  font-size: 16px;
  font-weight:var(--g-fort);
  color: var(--texte);
  margin-bottom: 4px;
}
.ressources-liees a:hover {
  color: var(--primaire);
}
.ressources-liees .resume {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte-secondaire);
}
@media (min-width: 861px) {
  .ressources-liees ul {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .ressources-liees {
    padding: 0 20px 52px;
  }
  .ressources-liees h2 {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------ accessibilite */

:focus-visible {
  outline: 3px solid var(--primaire);
  outline-offset: 2px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: #ffffff;
  color: var(--primaire);
  padding: 12px 16px;
  border: 2px solid var(--primaire);
  border-radius: 8px;
  font-weight:var(--g-fort);
}
.lien-evitement:focus {
  left: 12px;
  top: 12px;
}

/* Marqueur des valeurs encore a obtenir. Volontairement visible : la section 2
 * de CLAUDE.md prefere un placeholder qu'on voit a une valeur plausible. */
.a-obtenir {
  display: inline-block;
  padding: 4px 12px;
  border: 1px dashed var(--texte-secondaire);
  border-radius: 8px;
  color: var(--texte-secondaire);
  font-size: 14px;
}

/* Zone d'image restee sans visuel.
 *
 * Trois formations n'ont aucune photo qui montre leur sujet, et le pack n'en
 * fournit pas : community management, anglais, espagnol. Leur marqueur de
 * chantier a ete retire pour la mise en production.
 *
 * UN APLAT UNI NE SUFFISAIT PAS. Premiere version, un simple fond creme : a
 * l'ecran, une carte sur deux montrait une grande zone vide, et cela se lisait
 * exactement comme une image qui n'a pas charge. Constate sur le rendu, pas
 * suppose. Le motif ci-dessous occupe la place avec les couleurs de la marque :
 * il ne represente rien, il ne pretend rien, et il fait lire l'absence de photo
 * comme un parti pris.
 *
 * La regle se desactive TOUTE SEULE le jour ou la photo arrive, le motif etant
 * conditionne a l'absence d'image. Rien a retirer a ce moment-la. */
[data-cardimg]:not(:has(img)),
[style*="aspect-ratio:16/10"]:not(:has(img)) {
  background: var(--surface) url("/assets/img/motif-formation.svg") center / cover no-repeat;
}

/* MARQUEUR-ARBITRAGE-ORPHELINS, variante « texte », posee par tools/arbitrage-orphelins.mjs.
 *
 * text-wrap: pretty sur tout le document.
 *
 * NE PAS EDITER A LA MAIN : `--annuler` retire ce bloc par son marqueur.
 *
 * CE QU'ELLE FAIT, MESURE le 27/08/2026 sur 22 routes fois 9 formats :
 * les fleches orphelines passent de 19 a 0, les mots orphelins de
 * 1 100 a 131, soit 970 supprimes et 1 cree.
 * Zero debordement sur 154 captures, recette a 0, diff SEO a 0, CLS a 0.
 * 88 captures pleine page sur 88 bougent.
 *
 * POURQUOI PAS UNE ESPACE INSECABLE, NI UN span A white-space:nowrap :
 * les deux ont ete essayes et mesures, les deux font DEBORDER a 320 px.
 * Le detail est au chapitre 4 de docs/ARBITRAGE-ORPHELINS.md. */
body {
  text-wrap: pretty;
}
/* fin MARQUEUR-ARBITRAGE-ORPHELINS */

/* debut MARQUEUR-ARBITRAGE-CERTIFICATEURS
 * Les certificateurs, 25/09/2026, tools/arbitrage-certificateurs.mjs.
 * Logos a nu sur blanc : les quatre fichiers sont transparents. Aucune
 * plaque, aucun cadre, aucun survol sur les logos. width et height poses
 * aux dimensions d'affichage, height:auto en CSS : le rapport est connu
 * avant chargement, le CLS reste nul, et un ecran etroit reduit sans
 * deformer.
 * Fiche : le logo en colonne a gauche du paragraphe des 768 px, meme module
 * que la bande de la page de confiance et que le cartouche Qualiopi. Le
 * margin-top negatif ramene a 8 px l'ecart avec la ligne « Certificateur : »,
 * dont le style en ligne appartient au lot des codes RS et ne se touche pas. */
.certificateur { display: grid; grid-template-columns: 176px 1fr; gap: 24px; align-items: start; margin: -8px 0 32px; }
.certificateur__logo { display: block; max-width: 100%; height: auto; }
.certificateur__corps { min-width: 0; }
.certificateur__texte { font-size: var(--t-interface); line-height: var(--i-lecture); color: var(--texte); margin: 0 0 12px; max-width: 720px; }
.certificateur__lien { font-size: var(--t-courant); font-weight: var(--g-appuye); color: var(--primaire); }
.certificateur__lien:hover { color: var(--primaire-survol); }
.qualiopi__certificateur { display: block; max-width: 100%; height: auto; margin-top: 12px; }
.qualiopi__nom { color: var(--texte); font-weight: var(--g-fort); }
.certificateurs { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--bordure); }
.certificateurs__titre { font-size: var(--t-intertitre); font-weight: var(--g-fort); color: var(--texte); line-height: var(--i-titre); margin: 0 0 8px; }
.certificateurs__intro { font-size: var(--t-interface); line-height: var(--i-lecture); color: var(--texte-secondaire); margin: 0 0 24px; max-width: 720px; }
.certificateurs__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.certificateurs__ligne { display: grid; grid-template-columns: 176px 1fr; gap: 24px; align-items: center; }
.certificateurs__logo { display: flex; align-items: center; }
.certificateurs__logo img { display: block; max-width: 100%; height: auto; }
.certificateurs__ligne p { font-size: var(--t-interface); line-height: var(--i-lecture); color: var(--texte-secondaire); margin: 0; max-width: 720px; }
.certificateurs__ligne p strong { color: var(--texte); font-weight: var(--g-fort); }
.certificateurs__ligne a { color: var(--primaire); font-weight: var(--g-appuye); }
.certificateurs__ligne a:hover { color: var(--primaire-survol); }
.certificateurs__qualiopi { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bordure); }
@media (max-width: 767px) {
  .certificateur { grid-template-columns: 1fr; gap: 12px; }
  .certificateurs__ligne { grid-template-columns: 1fr; gap: 12px; }
  .certificateurs__liste { gap: 36px; }
}
/* fin MARQUEUR-ARBITRAGE-CERTIFICATEURS */