/* Feuille de style commune du site
   Version 9 : esprit sobre inspiré des codes visuels d'Apple (police système, gris clairs,
   bleu d'action, arrondis). Les réglages de la version 9 sont regroupés en fin de fichier.
   La palette reste distincte de celle de Brightest (magenta/prune). */
/* Polices : police système de l'appareil (SF Pro sur Mac, iPhone et iPad),
   sinon Inter, police libre (licence SIL OFL) hébergée sur le site, sans appel à un service tiers. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("polices/inter-latin-wght-normal.woff2") format("woff2");
  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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("polices/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --encre: #14202b;      /* texte principal, pied de page */
  --papier: #f5f7f8;     /* fond général */
  --blanc: #ffffff;
  --cobalt: #2a4bc4;     /* couleur d'action : liens, boutons */
  --cobalt-fonce: #1d3799;
  --sauge: #dce6e1;      /* fonds de sections secondaires */
  --trait: #c9d2d8;      /* filets et bordures */
  --gris: #52616c;       /* texte secondaire */
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --mesure: 72ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }
body {
  margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  color: var(--encre); background: var(--papier);
}
img { max-width: 100%; height: auto; }
a { color: var(--cobalt); }
a:hover { color: var(--cobalt-fonce); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.conteneur { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.lisible { max-width: var(--mesure); }

/* En-tête */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 10; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; flex-wrap: wrap; }
.marque { font-family: var(--serif); font-size: 1.45rem; text-decoration: none; color: var(--encre); letter-spacing: -0.01em; }
.marque b { font-weight: 600; color: var(--cobalt); }
.nav { display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--encre); font-weight: 500; font-size: 0.97rem; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--cobalt); color: var(--encre); }

/* Typographie */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
.intro { font-size: 1.2rem; color: var(--gris); max-width: 60ch; }

section { padding: 4rem 0; }
.section-sauge { background: var(--sauge); }
.section-blanche { background: var(--blanc); }

/* Accueil : le nom décomposé, élément signature du site */
.hero { padding: 4.5rem 0 3.5rem; background: var(--blanc); border-bottom: 1px solid var(--trait); }
.decompose { list-style: none; margin: 0 0 2rem; padding: 0; font-family: var(--serif); font-size: clamp(2.2rem, 6.5vw, 4.4rem); line-height: 1.08; letter-spacing: -0.02em; }
.decompose li { color: var(--gris); font-weight: 400; }
.decompose li span { color: var(--encre); font-weight: 600; }
.decompose li:first-child span, .decompose li:nth-child(2) span { color: var(--cobalt); }

/* Boutons */
.bouton { display: inline-block; background: var(--cobalt); color: var(--blanc); text-decoration: none; font-weight: 600; padding: 0.8rem 1.4rem; border-radius: 4px; border: 2px solid var(--cobalt); font: 600 1rem var(--sans); cursor: pointer; }
.bouton:hover { background: var(--cobalt-fonce); border-color: var(--cobalt-fonce); color: var(--blanc); }
.bouton-contour { background: transparent; color: var(--cobalt); }
.bouton-contour:hover { background: var(--cobalt); color: var(--blanc); }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Grilles */
.trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem 3rem; }
.bloc { border-top: 3px solid var(--encre); padding-top: 1rem; }
.bloc-principal { border-top-color: var(--cobalt); }

/* Étapes : vraie séquence, d'où la numérotation */
.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.etapes li { counter-increment: etape; padding-left: 3rem; position: relative; }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--encre); color: var(--blanc); display: grid; place-items: center; font-weight: 600; }

/* Partenaire Brightest : zone de protection autour du logo (charte Brightest) */
.partenaire { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 2.5rem; align-items: center; }
.logo-partenaire { background: var(--blanc); padding: 1.75rem; border: 1px solid var(--trait); }
@media (max-width: 720px) { .partenaire { grid-template-columns: 1fr; } }

/* Catalogue */
.filtres { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filtres button { font: 500 0.95rem var(--sans); padding: 0.45rem 1rem; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); border-radius: 999px; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.tableau-defilant { overflow-x: auto; position: relative; }   /* relative : garde dans le cadre le libellé masqué .sr-only des en-têtes */
table { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: 0.98rem; }
th, td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-weight: 600; background: var(--encre); color: var(--blanc); }
td.code { font-weight: 600; white-space: nowrap; }
td .note { display: block; color: var(--gris); font-size: 0.88rem; }
caption { text-align: left; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; padding: 0 0 0.75rem; }
.groupe-duree + .groupe-duree { margin-top: 2.5rem; }

/* Profils d'experts */
.profil { background: var(--blanc); border-left: 4px solid var(--cobalt); padding: 1.25rem 1.5rem; }
.profil p:last-child { margin-bottom: 0; }
.pole { color: var(--gris); font-size: 0.95rem; margin-bottom: 0.4rem; }

/* FAQ */
details { border-bottom: 1px solid var(--trait); padding: 1rem 0; max-width: var(--mesure); }
summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; }
details p { margin: 0.75rem 0 0; }

/* Formulaire */
form { background: var(--blanc); padding: 2rem; border: 1px solid var(--trait); max-width: 760px; }
.champ { margin-bottom: 1.25rem; }
label, legend { display: block; font-weight: 600; margin-bottom: 0.35rem; }
input, select, textarea { width: 100%; font: 1rem var(--sans); padding: 0.65rem 0.75rem; border: 1px solid #93a1ab; border-radius: 4px; background: var(--blanc); color: var(--encre); }
textarea { min-height: 8rem; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
.aide { color: var(--gris); font-size: 0.9rem; margin-top: 0.25rem; }
.cache { display: none; }
.message-form { margin-top: 1rem; padding: 1rem; background: var(--sauge); display: none; }
.message-form.visible { display: block; }
.consentement { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.consentement input { width: auto; margin-top: 0.3rem; }

/* Encadré d'information */
.encadre { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--encre); padding: 1.25rem 1.5rem; max-width: var(--mesure); }

/* Pied de page */
.pied { background: var(--encre); color: #d9e0e5; padding: 3rem 0 2rem; font-size: 0.95rem; }
.pied a { color: var(--blanc); }
.pied .deux { margin-bottom: 2rem; }
.pied .marque { color: var(--blanc); }
.pied .marque b { color: #9fb3ff; }
.mentions-marques { border-top: 1px solid #33424f; padding-top: 1.25rem; color: #aab6bf; font-size: 0.85rem; }

@media (max-width: 640px) {
  section { padding: 3rem 0; }
  form { padding: 1.25rem; }
  .entete .conteneur { padding: 0.6rem 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.quatre { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem 2rem; }
table { table-layout: fixed; min-width: 640px; }
th:nth-child(1) { width: 7.5rem; } th:nth-child(3) { width: 8rem; } th:nth-child(4) { width: 11rem; }
form .deux { gap: 0 1.5rem; }

/* ---- Version 2 : pages examen, pages pôle, revue ---- */
.evitement { position: absolute; left: -999px; top: 0; background: var(--cobalt); color: var(--blanc); padding: 0.6rem 1rem; z-index: 20; }
.evitement:focus { left: 1rem; top: 0.5rem; }

/* Accueil : accès direct aux examens à droite du nom décomposé */
.hero-grille { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 3rem; align-items: start; }
.acces-rapide { border: 1px solid var(--trait); border-top: 4px solid var(--cobalt); padding: 1.5rem; background: var(--papier); }
.acces-rapide h2 { font-size: 1.2rem; }
.acces-rapide ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.acces-rapide li { border-bottom: 1px solid var(--trait); }
.acces-rapide li a { display: block; padding: 0.6rem 0; text-decoration: none; color: var(--encre); }
.acces-rapide li a:hover { color: var(--cobalt); }
.code-examen { display: inline-block; min-width: 5.2rem; font-weight: 600; color: #c4241b; }   /* v27 : rouge Certification partout */
@media (max-width: 860px) { .hero-grille { grid-template-columns: 1fr; gap: 2rem; } }

/* Fil d'Ariane */
.ariane ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.92rem; color: var(--gris); }
.ariane li + li::before { content: "/"; margin-right: 0.3rem; color: var(--trait); }
.ariane a { color: var(--gris); }

/* Page examen */
.code-grand { font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 600; color: var(--cobalt); line-height: 1; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.fiche { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 3rem; align-items: start; }
.caracteristiques { margin: 0; background: var(--blanc); border: 1px solid var(--trait); }
.caracteristiques div { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--trait); }
.caracteristiques div:last-child { border-bottom: 0; }
.caracteristiques dt { font-size: 0.88rem; color: var(--gris); }
.caracteristiques dd { margin: 0; font-weight: 600; }
.fiche h2 { font-size: 1.35rem; margin-top: 1.5rem; }
.fiche h2:first-child { margin-top: 0; }
@media (max-width: 760px) { .fiche { grid-template-columns: 1fr; gap: 2rem; } }

/* Listes */
.liste-liens { padding-left: 1.1rem; }
.liste-liens li { margin-bottom: 0.4rem; }
.liste-puces { padding-left: 1.2rem; }
.liste-puces li { margin-bottom: 0.6rem; }
.h-encadre { font-size: 1.15rem; margin-bottom: 0.6rem; }
.espace-haut { margin-top: 2rem; }
h3 a { color: var(--encre); text-decoration-color: var(--trait); text-underline-offset: 4px; }
h3 a:hover { color: var(--cobalt); text-decoration-color: var(--cobalt); }

/* Pied de page à trois colonnes */
.pied .trois { margin-bottom: 2rem; gap: 1.5rem 2rem; }
.pied a { text-decoration-color: #52616c; }

/* Mobile : en-tête non collant pour libérer l'écran */
@media (max-width: 720px) {
  .entete { position: static; }
  .nav { gap: 0.1rem 1rem; }
}
.acces-rapide li a { display: flex; gap: 0.75rem; align-items: baseline; }
.code-examen { flex: 0 0 5rem; min-width: 0; }
.deux > .encadre { align-self: start; }

/* ---- Version 3 : achat en ligne et pages légales ---- */
.achat { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--cobalt); padding: 1.5rem; margin-top: 1.5rem; }
.achat h2 { margin-top: 0; }
.achat h3 { font-size: 1.05rem; margin-top: 1rem; }
.prix { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; margin: 0 0 0.5rem; }
.prix span { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--gris); }
.encadre-projet { background: #fff6d6; border-left: 4px solid #b58a00; padding: 0.8rem 1rem; }
.tableau-simple { min-width: 560px; table-layout: auto; }
.tableau-simple th:nth-child(n) { width: auto; }

/* ---- Version 4 : parcours, diagnostic, domaines ---- */
.surtitre { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 0.75rem; }
.surtitre span { color: var(--gris); text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }
.initiale { color: var(--cobalt); font-weight: 600; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 18ch; }

/* Parcours en trois étapes (accueil) */
.parcours { list-style: none; margin: 0; padding: 0; counter-reset: pas; border-left: 2px solid var(--trait); }
.parcours li { counter-increment: pas; position: relative; }
.parcours li a { display: block; padding: 0.9rem 0 1.1rem 2.4rem; text-decoration: none; color: var(--encre); }
.parcours li::before { content: counter(pas); position: absolute; left: -1.05rem; top: 0.95rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--blanc); border: 2px solid var(--encre); display: grid; place-items: center; font-weight: 600; font-size: 0.95rem; }
.parcours li:hover::before { background: var(--cobalt); border-color: var(--cobalt); color: var(--blanc); }
.etape-verbe { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); }
.etape-nom { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.etape-nom b { color: var(--cobalt); }
.etape-texte { display: block; color: var(--gris); font-size: 0.98rem; margin-top: 0.25rem; }
.parcours li a:hover .etape-nom { text-decoration: underline; text-decoration-color: var(--cobalt); text-underline-offset: 5px; }

/* Diagnostic */
.diag-grille { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .diag-grille { grid-template-columns: 1fr; gap: 1rem; } }
#form-diagnostic { max-width: none; }
#form-diagnostic legend { margin-bottom: 0.5rem; }
.choix { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; padding: 0.45rem 0.6rem; border: 1px solid var(--trait); border-radius: 4px; margin-bottom: 0.4rem; cursor: pointer; }
.choix input { width: auto; margin-top: 0.3rem; accent-color: var(--cobalt); }
.choix:has(input:checked) { border-color: var(--cobalt); background: #eef1fc; }
.diag-resultat { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--cobalt); padding: 1.5rem; margin-top: 1rem; }
.diag-resultat h3 { font-size: 1.5rem; }
.diag-resultat ul { padding-left: 1.2rem; }

/* Domaines */
.grille-domaines { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.carte-domaine { background: var(--blanc); border: 1px solid var(--trait); border-top: 3px solid var(--encre); padding: 1.25rem 1.4rem; }
.carte-domaine:first-child { border-top-color: var(--cobalt); }
.carte-domaine p:last-child { margin-bottom: 0; }
.carte-domaine.grande h2 { font-size: 1.4rem; }
.ia-ligne { font-size: 0.95rem; color: var(--gris); border-top: 1px dashed var(--trait); padding-top: 0.75rem; }
.ia-ligne b { color: var(--encre); }
.ia-encadre { border-left-color: var(--cobalt); }
.acces-examens { list-style: none; padding: 0; margin: 0 0 1rem; }
.acces-examens li { border-bottom: 1px solid var(--trait); }
.acces-examens a { display: flex; gap: 0.75rem; padding: 0.5rem 0; text-decoration: none; color: var(--encre); }
.acces-examens a:hover { color: var(--cobalt); }
.suite h2 { font-size: 1.4rem; }
.acces-examens .code-examen { flex: 0 0 6rem; white-space: nowrap; }
.grille-domaines { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.partenaire { align-items: start; }
.grille-domaines { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- Version 7 : partenaires nommés (variante « nomme ») ---- */
.profil-partenaire { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--encre); margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--trait); }
.profil-partenaire:hover .profil-nom { color: var(--cobalt); }
.logo-pa { flex: 0 0 auto; max-height: 2.6rem; max-width: 7.5rem; object-fit: contain; }
.logo-texte { display: inline-grid; place-items: center; min-height: 2.6rem; padding: 0 0.7rem; border: 1px solid var(--trait); font-family: var(--serif); font-weight: 600; font-size: 0.95rem; white-space: nowrap; background: var(--papier); }
.profil-nom { display: flex; flex-direction: column; font-weight: 600; }
.profil-url { font-weight: 400; font-size: 0.85rem; color: var(--gris); }
.bandeau-partenaires { border-top: 1px solid var(--trait); padding: 2.5rem 0; }
.bandeau-partenaires h2 { font-size: 1.3rem; }
.liste-partenaires { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; }
.logo-bandeau { max-height: 3rem; max-width: 10rem; object-fit: contain; }
.liste-partenaires .logo-texte { min-height: 3rem; font-size: 1.1rem; padding: 0 1rem; }
.liste-partenaires a { text-decoration: none; color: var(--encre); }
.liste-partenaires a:hover .logo-texte { border-color: var(--cobalt); color: var(--cobalt); }

/* ---- Version 8 : images réservées, en-têtes, page Certification ---- */
.entete-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 3rem; align-items: center; }
@media (max-width: 860px) { .entete-grille { grid-template-columns: 1fr; gap: 1.5rem; } }
.img-entete, .img-bandeau, .img-vignette, .img-colonne { display: block; width: 100%; object-fit: cover; border-radius: 4px; }
.img-entete { aspect-ratio: 4 / 3; }
.img-bandeau { aspect-ratio: 21 / 7; }
.img-vignette { aspect-ratio: 16 / 9; margin: -1.25rem -1.4rem 1rem; width: calc(100% + 2.8rem); border-radius: 0; }
.img-colonne { aspect-ratio: 16 / 9; margin: 1.5rem 0; }
.img-reservee { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.35rem; text-align: center; padding: 1rem;
  background: repeating-linear-gradient(135deg, #eef1f3 0 12px, #e6eaed 12px 24px); border: 1px dashed #9aa7b1; color: var(--gris); }
.img-reservee span { font-weight: 600; color: var(--encre); font-size: 0.95rem; }
.img-reservee small { font-size: 0.82rem; max-width: 34ch; line-height: 1.35; }
.img-reservee code { font-size: 0.75rem; background: var(--blanc); padding: 0.1rem 0.4rem; border-radius: 3px; }
.img-vignette.img-reservee small { display: none; }
.bandeau-image { background: var(--blanc); padding: 0 0 3rem; }
@media (max-width: 640px) { .img-bandeau { aspect-ratio: 16 / 9; } }

.certif-grille { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); gap: 3rem; align-items: start; }
.certif-gauche { position: static; }
.h-colonne { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.certif-droite table { min-width: 560px; }
.certif-droite th:nth-child(1) { width: 6.5rem; } .certif-droite th:nth-child(3) { width: 7rem; } .certif-droite th:nth-child(4) { width: 9.5rem; }
@media (max-width: 960px) { .certif-grille { grid-template-columns: 1fr; } .certif-gauche { position: static; } }
.aide-legende { font-weight: 400; font-size: 0.88rem; color: var(--gris); margin-left: 0.4rem; }


/* =====================================================================
   Version 9 : esprit sobre, codes visuels d'Apple
   Couleurs : #1d1d1f (texte), #f5f5f7 (gris clair), #ffffff, #0071e3 (bleu d'action),
   #6e6e73 (texte secondaire), #d2d2d7 (filets).
   ===================================================================== */
:root {
  --encre: #1d1d1f;
  --papier: #f5f5f7;
  --blanc: #ffffff;
  --cobalt: #0071e3;
  --cobalt-fonce: #0077ed;
  --lien: #0066cc;
  --sauge: #f5f5f7;
  --trait: #d2d2d7;
  --gris: #6e6e73;
  --gris-fonce: #424245;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
  --rayon: 18px;
}
body { font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; color: var(--encre); background: var(--blanc);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--lien); text-decoration: none; }
a:hover { color: var(--lien); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }

/* Titres : graisse semi-grasse, interlettrage serré */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.07; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
.intro { color: var(--gris); font-size: clamp(1.15rem, 1.8vw, 1.32rem); line-height: 1.4; letter-spacing: -0.01em; }
.surtitre { color: var(--cobalt); text-transform: none; letter-spacing: -0.01em; font-size: 1rem; font-weight: 600; }
.surtitre span { font-style: normal; }
.hero h1 { max-width: 14ch; }

/* En-tête translucide */
.entete { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.entete .conteneur { min-height: 3.25rem; }
.marque { font-family: var(--sans); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--encre); }
.marque b { font-weight: 600; color: var(--encre); }
.nav a { font-size: 0.82rem; font-weight: 400; color: var(--encre); opacity: 0.8; border-bottom: 0; }
.nav a:hover { opacity: 1; text-decoration: none; color: var(--encre); }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; color: var(--encre); }

/* Sections : alternance blanc / gris clair */
section { padding: 5rem 0; }
.section-blanche { background: var(--blanc); }
.section-sauge, body > main > section:not(.section-blanche):not(.hero):not(.section-sombre) { background: var(--papier); }
.hero { background: var(--blanc); border-bottom: 0; padding: 5rem 0 3rem; }
.bandeau-image { background: var(--blanc); }

/* Boutons en pilule */
.bouton { background: var(--cobalt); border: 1px solid var(--cobalt); color: var(--blanc); border-radius: 980px; padding: 0.7rem 1.4rem; font: 400 1rem var(--sans); letter-spacing: -0.01em; }
.bouton:hover { background: var(--cobalt-fonce); border-color: var(--cobalt-fonce); color: var(--blanc); text-decoration: none; }
.bouton-contour { background: transparent; color: var(--cobalt); border-color: var(--cobalt); }
.bouton-contour:hover { background: var(--cobalt); color: var(--blanc); }

/* Cartes arrondies, sans ombre ni filet coloré */
.carte-domaine, .profil, .encadre, .achat, .diag-resultat, .acces-rapide, form, .caracteristiques, .logo-partenaire {
  background: var(--blanc); border: 0; border-radius: var(--rayon); }
.carte-domaine { padding: 1.5rem; overflow: hidden; }
.carte-domaine:first-child { border-top: 0; }
.section-blanche .carte-domaine, .section-blanche .profil, .section-blanche .encadre, .section-blanche form { background: var(--papier); }
.img-vignette { margin: -1.5rem -1.5rem 1.2rem; width: calc(100% + 3rem); }
.profil { border-left: 0; padding: 1.6rem; }
.encadre { border-left: 0; padding: 1.6rem 1.8rem; }
.bloc, .bloc-principal { border-top: 1px solid var(--trait); padding-top: 1.2rem; }
.diag-resultat, .achat { border-top: 0; box-shadow: 0 0 0 1px var(--trait) inset; }
.logo-partenaire { padding: 2rem; }
.caracteristiques div { border-bottom-color: var(--papier); }
h3 a, .carte-domaine h2 a { color: var(--encre); text-decoration: none; }
h3 a:hover, .carte-domaine h2 a:hover { color: var(--lien); text-decoration: none; }

/* Parcours de l'accueil */
.parcours { border-left: 1px solid var(--trait); }
.parcours li::before { border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font-weight: 500; }
.parcours li:hover::before { background: var(--cobalt); border-color: var(--cobalt); }
.etape-verbe { text-transform: none; letter-spacing: -0.01em; font-size: 0.9rem; }
.etape-nom { font-family: var(--sans); font-size: 1.5rem; letter-spacing: -0.02em; }
.etape-nom b, .initiale { color: var(--cobalt); font-weight: 600; }
.parcours li a:hover .etape-nom { text-decoration: none; color: var(--cobalt); }

/* Étapes numérotées */
.etapes li::before { background: var(--encre); font-weight: 500; }

/* Formulaires */
form { padding: 2rem; }
input, select, textarea { border: 1px solid var(--trait); border-radius: 12px; padding: 0.75rem 0.9rem; font: 1rem var(--sans); }
input:focus, select:focus, textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); }
.choix { border: 1px solid var(--trait); border-radius: 12px; padding: 0.6rem 0.8rem; }
.choix:has(input:checked) { border-color: var(--cobalt); background: rgba(0, 113, 227, 0.06); }
label, legend { font-weight: 600; }

/* Filtres du catalogue */
.filtres button { border: 1px solid var(--trait); border-radius: 980px; font: 400 0.9rem var(--sans); background: var(--blanc); }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); }

/* Tableaux : en-tête clair */
table { background: var(--blanc); border-radius: var(--rayon); overflow: hidden; font-size: 0.95rem; }
th { background: var(--papier); color: var(--gris); font-weight: 500; font-size: 0.85rem; }
td.code { color: var(--encre); }
caption { font-family: var(--sans); font-size: 1.3rem; }

/* Images réservées */
.img-entete, .img-bandeau, .img-colonne { border-radius: var(--rayon); }
.img-reservee { background: var(--papier); border: 1px dashed var(--trait); }
.section-blanche .img-reservee, .bandeau-image .img-reservee { background: var(--papier); }

/* Pied de page clair, petits caractères */
.pied { background: var(--papier); color: var(--gris); font-size: 0.8rem; line-height: 1.5; padding: 2.5rem 0 1.5rem; border-top: 1px solid var(--trait); }
.pied a { color: var(--gris-fonce); text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; }
.pied strong { color: var(--encre); font-weight: 600; }
.pied .marque { color: var(--encre); font-size: 1.1rem; }
.pied .marque b { color: var(--encre); }
.mentions-marques { border-top: 1px solid var(--trait); color: var(--gris); font-size: 0.75rem; }

/* Partenaires nommés */
.logo-texte { font-family: var(--sans); border-radius: 10px; background: var(--blanc); }
.bandeau-partenaires { border-top: 0; background: var(--blanc); }

/* Fil d'Ariane, divers */
.ariane ol { font-size: 0.8rem; }
.ariane a { color: var(--gris); }
.code-grand { font-family: var(--sans); color: var(--encre); letter-spacing: -0.03em; }
.prix { font-family: var(--sans); }
.pole { color: var(--gris); font-size: 0.85rem; }
.message-form { background: var(--papier); border-radius: 12px; }
.encadre-projet { border-radius: 12px; }
@media (max-width: 640px) { section { padding: 3.5rem 0; } h1 { font-size: 2.2rem; } }
.diag-grille h2 { font-size: clamp(1.75rem, 2.6vw, 2.2rem); }
.logo-partenaire { background: var(--papier); }
.marque b, .pied .marque b { color: var(--cobalt); }

/* ---- Version 10 : sections sombres en alternance, numérotation automatique ---- */
/* Couleurs sur fond sombre (codes Apple) : fond #000000, texte #f5f5f7, secondaire #a1a1a6, liens #2997ff */
.section-sombre { background: #000; color: #f5f5f7; }
.section-sombre h2, .section-sombre h3 { color: #f5f5f7; }
.section-sombre .intro, .section-sombre .aide, .section-sombre p.aide { color: #a1a1a6; }
.section-sombre a { color: #2997ff; }
.section-sombre .surtitre { color: #2997ff; }
.section-sombre .etapes li p { color: #a1a1a6; }
.section-sombre .etapes li::before { background: #f5f5f7; color: #000; }
.section-sombre .acces-examens li { border-bottom-color: #333336; }
.section-sombre .acces-examens a { color: #f5f5f7; }
.section-sombre .acces-examens a:hover { color: #2997ff; text-decoration: none; }
.section-sombre .code-examen { color: #ff7b72; }
.section-sombre .bouton-contour { color: #2997ff; border-color: #2997ff; }
.section-sombre .bouton-contour:hover { background: #2997ff; color: #000; }
.section-sombre .quatre h3 { color: #f5f5f7; }
.section-sombre .quatre p { color: #a1a1a6; }
/* Les cartes posées sur fond sombre restent claires, pour la lecture et la saisie */
.section-sombre form, .section-sombre .diag-resultat, .section-sombre .logo-partenaire { background: #fff; color: var(--encre); }
.section-sombre form a, .section-sombre .diag-resultat a { color: var(--lien); }
.section-sombre .diag-resultat h3, .section-sombre form h3 { color: var(--encre); }
.section-sombre form .aide, .section-sombre .diag-resultat .aide { color: var(--gris); }
.section-sombre .diag-resultat .surtitre { color: var(--cobalt); }
.section-sombre .diag-resultat .bouton-contour { color: var(--cobalt); border-color: var(--cobalt); }
.section-sombre .diag-resultat .bouton-contour:hover { background: var(--cobalt); color: #fff; }
.section-sombre .profil { background: #1d1d1f; color: #f5f5f7; }
.section-sombre .profil h2, .section-sombre .profil h3 { color: #f5f5f7; }
.section-sombre .profil .pole, .section-sombre .profil-url { color: #a1a1a6; }
.section-sombre .profil-partenaire { border-bottom-color: #333336; color: #f5f5f7; }
.section-sombre .logo-texte { background: #1d1d1f; color: #f5f5f7; border-color: #424245; }
.section-sombre :focus-visible { outline-color: #2997ff; }
.diag-resultat { box-shadow: none; }

/* Numérotation automatique des questions du diagnostic : seules les questions affichées sont comptées */
#form-diagnostic { counter-reset: question; }
#form-diagnostic .champ:not(.cache) .q-num::before { counter-increment: question; content: counter(question) ". "; }
body > main > section.section-sombre { background: #000; }
.section-sombre .bouton:not(.bouton-contour), .section-sombre .diag-resultat .bouton:not(.bouton-contour) { color: #fff; }
.section-sombre .bouton:not(.bouton-contour):hover { color: #fff; text-decoration: none; }
/* ---- Version 13 : entrée Industrie ---- */
.etapes-industrie { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.liens-temps { font-size: 0.88rem; }
.entree-industrie h2 { font-size: clamp(2rem, 4vw, 3rem); }

/* ---- Version 14 : combinaisons, devis, vue courte des domaines ---- */
.parcours { counter-reset: none; }
.parcours li { counter-increment: none; }
.parcours li::before { content: ""; width: 0.9rem; height: 0.9rem; left: -0.5rem; top: 1.35rem; background: var(--cobalt); border-color: var(--cobalt); }
.grille-combinaisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.carte-combi { background: var(--papier); border-radius: var(--rayon); padding: 1.4rem; }
.carte-combi h3 { margin: 0.2rem 0 0.5rem; }
.carte-combi p:last-child { margin: 0; color: var(--gris-fonce); font-size: 0.97rem; }
.combi-etapes { color: var(--cobalt); font-size: 0.85rem; font-weight: 600; margin: 0; }
.grille-devis { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem 2rem; }
.grille-devis h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.grille-devis p { color: var(--gris); margin: 0; font-size: 0.95rem; }
.liste-domaines-courte { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.liste-domaines-courte a { display: inline-block; padding: 0.55rem 1.1rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: 980px; color: var(--encre); font-size: 0.95rem; }
.liste-domaines-courte a:hover { border-color: var(--cobalt); color: var(--cobalt); text-decoration: none; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-erreur { background: #fff1f0; color: #8a1c12; border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; }
/* ---- Version 15 : envoi intégré au questionnaire, liens des combinaisons ---- */
.guide-contact { margin-top: 1rem; }
.guide-contact h3 { margin-top: 0; color: var(--encre); }
.combi-etapes a { color: var(--cobalt); }
.combi-action { margin-top: 0.8rem !important; font-weight: 600; }
.carte-combi { display: flex; flex-direction: column; }
.carte-combi .combi-action { margin-top: auto !important; padding-top: 0.8rem; }

/* v16 — logo image AcceFore (en-tête et pied de page). Hauteur fixe, largeur proportionnelle. */
.marque img { display: block; height: 2.1rem; width: auto; }
.pied .marque img { height: 1.8rem; margin-bottom: 0.4rem; }
@media (max-width: 600px) { .marque img { height: 1.7rem; } }
/* v16 — photos réelles. La règle générale img { max-width: 100% } empêchait la vignette de déborder
   jusqu'aux bords de la carte (largeur calc(100% + marge)). Le bandeau d'accueil (21/7) recadre une
   photo presque carrée : point focal remonté pour garder les visages. */
.img-vignette { max-width: none; }
.img-bandeau { object-position: 50% 28%; }
.img-entete, .img-colonne { object-position: 50% 35%; }

/* v18 — menu : un trait de couleur sous chacune des quatre démarches, couleurs relevées sur les traits
   du logo (bleu, rouge, jaune, vert), dans l'ordre des initiales Ac, Ce, Fo, Ré. Domaines et Contact sans trait. */
:root { --ac: #0068da; --ce: #f02e23; --fo: #fdb806; --re: #039744; }
.nav li[class^="nav-"] a { border-bottom: 3px solid var(--trait-demarche); padding-bottom: 0.2rem; }
.nav li.nav-ac { --trait-demarche: var(--ac); }
.nav li.nav-ce { --trait-demarche: var(--ce); }
.nav li.nav-fo { --trait-demarche: var(--fo); }
.nav li.nav-re { --trait-demarche: var(--re); }

/* v18 — catalogue complet de Brightest (page Certification) */
.catalogue-brightest h2 { max-width: 30ch; }
.ancres-comites { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 1.2rem 0 2rem; font-size: 0.9rem; }
.grille-comites { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; align-items: start; }
.comite { background: var(--blanc); border-radius: var(--rayon); padding: 1.3rem 1.4rem; scroll-margin-top: 5rem; }
.comite#istqb { grid-column: 1 / -1; }
.comite#istqb .liste-certifs { columns: 2 22rem; }
.comite h3 { margin: 0 0 0.3rem; }
.comite h3 span { display: block; font-size: 0.85rem; font-weight: 400; color: var(--gris); }
.comite h4 { margin: 1rem 0 0.3rem; font-size: 0.9rem; color: var(--gris); }
.comite > p { font-size: 0.92rem; }
.liste-certifs { list-style: none; padding: 0; margin: 0.4rem 0 0; font-size: 0.92rem; }
.liste-certifs li { padding: 0.35rem 0; border-top: 1px solid var(--trait); break-inside: avoid; }
.badge-fiche { font-size: 0.72rem; font-weight: 600; color: var(--ce); white-space: nowrap; }
.lien-devis { font-size: 0.8rem; white-space: nowrap; }
/* v18 — correctif mobile (défaut présent depuis la v16) : le tableau des examens (min-width 560 px) élargissait
   toute la grille ; les colonnes peuvent désormais rétrécir et le tableau défile seul dans son cadre. */
.certif-grille > * { min-width: 0; }
.tableau-defilant { overflow-x: auto; position: relative; }   /* relative : garde dans le cadre le libellé masqué .sr-only des en-têtes */

/* v19 — formations réalisées par notre réseau (page Formation, fiches formation-*.html).
   Code couleur du statut (veille, sur demande, hors périmètre) : volontairement sans légende sur le site
   (décision de Bernard) ; signification dans la passation. Couleurs distinctes de celles des démarches. */
:root { --st-veille: #8e8e93; --st-demande: #7b4fd6; --st-hors: #b5651d; }
.f-ligne a { color: var(--encre); text-decoration: none; }
.f-ligne a:hover { color: var(--lien); }
.f-code { font-size: 0.75rem; color: var(--gris); font-variant-numeric: tabular-nums; margin-right: 0.2rem; }
.f-meta { display: block; font-size: 0.8rem; color: var(--gris); }
.f-sans { font-style: italic; }
.f-ligne { border-left: 3px solid transparent; padding-left: 0.5rem !important; }
.f-ligne.statut-veille { border-left-color: var(--st-veille); }
.f-ligne.statut-sur-demande { border-left-color: var(--st-demande); }
.f-ligne.statut-hors-perimetre { border-left-color: var(--st-hors); }
.code-grand.statut-veille { color: var(--st-veille); }
.code-grand.statut-sur-demande { color: var(--st-demande); }
.code-grand.statut-hors-perimetre { color: var(--st-hors); }
.deroule { margin: 0 0 1rem; }
.deroule div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--trait); }
.deroule dt { font-weight: 600; font-size: 0.92rem; }
.deroule dd { margin: 0; }
@media (max-width: 640px) { .deroule div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* v20 — menu des familles sur les fiches de formation ; liste indicative de la page Domaines */
.nav-familles { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.4rem 0 1.6rem; padding: 0.7rem 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); font-size: 0.85rem; }
.nav-familles a { color: var(--gris); text-decoration: none; }
.nav-familles a:hover { color: var(--lien); }
.nav-familles a[aria-current] { color: var(--encre); font-weight: 600; border-bottom: 3px solid var(--fo); }
.liste-exemples { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.6rem 0 1.2rem; }
.liste-exemples a { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--trait); border-radius: 980px; font-size: 0.85rem; color: var(--encre); text-decoration: none; }
.liste-exemples a:hover { border-color: var(--lien); color: var(--lien); }

/* v21 — page Certification : logo Brightest, badges-liens du catalogue complet ; page Formation : recherche */
.logo-brightest { display: inline-block; height: 2.2rem; width: auto; vertical-align: middle; }
.avec-brightest { color: var(--gris); font-size: 0.9rem; margin: 0.2rem 0 1rem; }
.avec-brightest .logo-brightest { height: 1.8rem; margin-left: 0.4rem; }
.catalogue-brightest > .conteneur > .logo-brightest, #obtenir .logo-brightest { margin-bottom: 0.8rem; }
.badges { white-space: nowrap; }
.badge-lien { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.5rem; border: 1px solid var(--trait); border-radius: 980px; text-decoration: none; margin-left: 0.2rem; }
.badge-lien:hover { border-color: var(--lien); }
.actions-ou { align-self: center; color: var(--gris); }
.recherche-formations { max-width: 36rem; margin: 1.2rem 0 0.4rem; }
.recherche-formations label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.recherche-formations input { width: 100%; }
.comite[hidden], .f-ligne[hidden] { display: none; }
.certif-droite th:nth-child(1) { width: auto; } .certif-droite th:nth-child(2) { width: 7rem; } .certif-droite th:nth-child(3) { width: 7rem; }
.certif-droite table { min-width: 0; }

/* v22 — recherche directe d'une formation (liste déroulante de propositions) */
.recherche-directe { margin-top: 1.4rem; max-width: 34rem; }
.recherche-directe label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.combo { position: relative; }
.combo input { width: 100%; }
#propositions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.3rem 0; list-style: none;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 22rem; overflow-y: auto; }
#propositions li { padding: 0.5rem 0.9rem; cursor: pointer; }
#propositions li[aria-selected="true"], #propositions li:hover { background: var(--papier); }
.p-titre { display: block; color: var(--encre); }
.p-meta { display: block; font-size: 0.78rem; color: var(--gris); }

/* v25 — tableaux : code et niveau empilés dans une seule colonne (téléphone) ;
   pastilles du catalogue complet aux couleurs des démarches : rouge = Certification (examen), jaune = Formation (préparation) */
.certif-droite th:nth-child(2), .code-niveau { width: 8.5rem; white-space: nowrap; }
.code-niveau .code { display: block; font-weight: 600; }
.code-niveau .niveau { display: block; font-size: 0.82rem; color: var(--gris); }
.badge-examen { border-color: var(--ce); color: #c4241b; }
.badge-examen:hover { background: #fdecea; border-color: var(--ce); }
.badge-formation { border-color: var(--fo); background: #fff7df; color: #7a5600; }
.badge-formation:hover { background: #ffefc2; border-color: var(--fo); }
.legende-badges { font-size: 0.85rem; color: var(--gris); line-height: 2; }
.legende-badges .badge-lien { margin: 0 0.2rem 0 0.8rem; pointer-events: none; }
.legende-badges .badge-lien:first-child { margin-left: 0; }
@media (max-width: 640px) { .certif-droite th:nth-child(2), .code-niveau { width: 6.5rem; } }
.legende-badges { list-style: none; padding: 0; line-height: 1.5; }
.legende-badges li { margin: 0.35rem 0; }
.legende-badges .badge-lien, .legende-badges .badge-lien:first-child { margin: 0 0.4rem 0 0; }
.certif-droite th:nth-child(2) { white-space: normal; }

/* v26 — préparation à demander (examen sans préparation au catalogue) : jaune Formation, filet pointillé */
.badge-a-demander { background: transparent; border-style: dashed; }
.liste-pastilles { list-style: none; padding: 0; }
.liste-pastilles li { margin: 0.4rem 0; }
td .badges { display: block; margin-top: 0.3rem; white-space: normal; }
td .badges .badge-lien { margin: 0 0.3rem 0 0; }
.caracteristiques .badge-lien { margin: 0.3rem 0 0; }

/* v27 — pastille rouge à côté des examens dans les listes */
.liste-liens .badge-lien { margin-left: 0.3rem; }

/* v28 — liste sobre des examens : une ligne par examen, tous les renseignements, liens en texte */
.filtre-examens { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.2rem; align-items: center; margin: 1.5rem 0 1rem; max-width: 52rem; }
.filtre-examens > label:first-child { grid-column: 1 / -1; font-weight: 600; }
.filtre-examens input[type="search"] { font: 400 1rem var(--sans); padding: 0.6rem 0.8rem; border: 1px solid var(--trait); border-radius: 10px; width: 100%; box-sizing: border-box; }
.filtre-examens .case { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 400; white-space: nowrap; margin: 0; }
.filtre-examens .case input { width: auto; margin: 0; flex: none; }
.filtre-examens .aide { grid-column: 1 / -1; margin: 0; }
.groupe-comite { margin-top: 1.8rem; scroll-margin-top: 5rem; }
.groupe-comite[hidden], .ligne-examen[hidden] { display: none; }
.groupe-comite h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.groupe-comite h3 span { font-size: 0.85rem; font-weight: 400; color: var(--gris); margin-left: 0.4rem; }
.liste-examens { list-style: none; margin: 0; padding: 0; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; }
.ligne-examen { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.4fr); gap: 0.3rem 1.2rem; align-items: baseline;
  padding: 0.65rem 1rem 0.65rem 0.9rem; border-top: 1px solid var(--trait); border-left: 3px solid var(--ce); font-size: 0.93rem; }
.ligne-examen:first-child { border-top: 0; }
.le-titre a { font-weight: 500; }
.le-note { display: block; font-size: 0.85rem; color: var(--gris); }
.le-infos { color: var(--gris); font-size: 0.88rem; }
.le-comite { font-weight: 600; color: var(--encre); margin-right: 0.2rem; }
.le-liens { font-size: 0.88rem; }
.le-liens .sep { color: var(--gris); }
.l-examen { color: #c4241b; font-weight: 600; text-decoration: none; }
.l-formation { color: #7a5600; font-weight: 600; text-decoration: none; }
.l-parlons { font-weight: 500; font-style: italic; }
.l-examen:hover, .l-formation:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .ligne-examen { grid-template-columns: 1fr; gap: 0.15rem; }
  .filtre-examens { grid-template-columns: minmax(0, 1fr); }
  .filtre-examens .case { white-space: normal; }
}
.le-code { font-weight: 600; color: var(--encre); }

/* v29 — références WCY-C-xxx minimisées : après la durée, en petit et entre parenthèses */
.ref-discrete { font-size: 0.78em; font-weight: 400; color: var(--gris); white-space: nowrap; }
.ref-formation { font-size: 1rem; color: var(--gris); margin: -0.4rem 0 1rem; padding-left: 0.6rem; border-left: 3px solid var(--fo); }
.ref-formation.statut-veille { border-left-color: var(--st-veille); }
.ref-formation.statut-sur-demande { border-left-color: var(--st-demande); }
.ref-formation.statut-hors-perimetre { border-left-color: var(--st-hors); }
.le-liens .le-examen, .le-liens .le-formation { display: block; }
.le-liens .le-formation { margin-top: 0.15rem; color: #7a5600; }
.le-liens .le-formation .l-formation { font-weight: 500; }
.f-meta .ref-discrete { font-size: 0.85em; }
.ref-formation .ref-discrete { font-size: 1rem; }

/* v30 — rubrique « Se former et se certifier » des domaines */
.se-former-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.se-former-grille > div > h3 { margin: 0 0 0.8rem; padding-bottom: 0.3rem; border-bottom: 3px solid var(--trait); }
.h-fo { border-bottom-color: var(--fo) !important; }
.h-ce { border-bottom-color: var(--ce) !important; }
.formation-domaine { background: var(--fond, #f5f5f7); border-left: 3px solid var(--fo); border-radius: var(--rayon); padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; }
.formation-domaine h4 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.sous-titre { font-weight: 600; margin: 1rem 0 0.3rem; }
.liste-modules { list-style: none; padding: 0; margin: 0; font-size: 0.93rem; }
.liste-modules li { padding: 0.3rem 0; border-top: 1px solid var(--trait); }
.liste-formations-domaine { padding-left: 1.1rem; font-size: 0.93rem; }
.liste-formations-domaine li { margin: 0.35rem 0; }
.se-former-grille .ligne-examen { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.se-former-grille .liste-examens { margin-bottom: 1rem; background: var(--fond, #f5f5f7); }
.le-domaine { color: var(--gris); text-decoration: underline dotted; }
@media (max-width: 860px) { .se-former-grille { grid-template-columns: minmax(0, 1fr); } }
.suite-examens summary { cursor: pointer; font-weight: 600; margin: 0.2rem 0 0.8rem; color: var(--lien, #0066cc); }

/* v31 — page Certification groupée par domaine */
.groupe-domaine { margin-top: 2.6rem; scroll-margin-top: 5rem; }
.groupe-domaine[hidden] { display: none; }
.titre-domaine { font-size: 1.35rem; margin: 0 0 0.2rem; padding-bottom: 0.3rem; border-bottom: 3px solid var(--ce); }
.titre-domaine a { color: var(--encre); text-decoration: none; }
.groupe-domaine .groupe-comite { margin-top: 1.1rem; }
.voir-aussi { margin-top: 0.6rem; }
.grille-domaines-compacte .carte-domaine h3 { font-size: 1rem; }
.grille-domaines-compacte .carte-domaine { padding: 1rem 1.1rem; }