/* ==========================================================================
   Drekan Compétences — feuille de style
   Charte : sobre, institutionnelle. Couleurs regroupées ici pour ajustement.
   ========================================================================== */
:root {
  /* Charte Drekan Energy : rouge #E3262E, gris neutres, fonds clairs. Pas d'aplat sombre. */
  --marine: #2b2e33;        /* gris anthracite neutre : éléments sélectionnés, badges forts */
  --marine-2: #43474e;
  --rouge: #E3262E;         /* rouge Drekan : accents (filets, onglet actif, repères) ; seul aplat : cartes du tourniquet de l'accueil */
  --acier: #b81f26;         /* liens et éléments interactifs (rouge assombri, lisible sur blanc) */
  --acier-clair: #fbeeee;   /* fond de sélection */
  --encre: #1f2226;
  --gris: #5f636a;
  --gris-clair: #9ea2a9;
  --trait: #e3e5e9;
  --fond: #f5f6f8;
  --grille: rgba(43, 46, 51, .055);   /* quadrillage « papier technique » */
  --blanc: #ffffff;
  --ok: #2e7d4f;   --ok-fond: #eaf4ee;
  --warn: #9a6a00; --warn-fond: #fbf3e0;
  --ko: #b81f26;   --ko-fond: #fbeeee;
  --rayon: 3px;
  --ombre: 0 1px 2px rgba(31, 34, 38, .05);
  --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--police); color: var(--encre); background: var(--fond); }
a { color: var(--acier); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-weight: 600; color: var(--marine); line-height: 1.25; margin: 0 0 .6em; letter-spacing: -.005em; }
h1 { font-size: 1.6rem; font-weight: 500; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
small, .petit { font-size: .85rem; }
.muted { color: var(--gris); }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600; color: var(--gris); margin-bottom: .4rem; display: block; }
hr { border: 0; border-top: 1px solid var(--trait); margin: 1.5rem 0; }
code, .code { font-family: ui-monospace, Consolas, monospace; }

/* --------------------------------------------------------------- en-tête */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.entete-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; min-height: 64px; }
.marque { display: flex; align-items: center; gap: 12px; color: var(--marine); text-decoration: none !important; }
.marque img { height: 32px; width: auto; display: block; }
.marque-sep { width: 1px; height: 26px; background: var(--trait); }
.marque-app { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.1; }
.marque-texte b { font-weight: 700; letter-spacing: .18em; font-size: 1rem; }
.marque-texte span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.nav a { color: var(--encre); padding: 21px 12px 19px; font-size: .9rem; border-bottom: 2px solid transparent; text-decoration: none; }
.nav a:hover { color: var(--marine); border-bottom-color: var(--trait); }
.nav a.actif { color: var(--marine); border-bottom-color: var(--rouge); font-weight: 600; }
.compte { display: flex; align-items: center; gap: 14px; font-size: .85rem; color: var(--gris); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--marine); color: #fff; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.sous-nav { background: var(--fond); border-bottom: 1px solid var(--trait); }
.sous-nav .entete-inner { min-height: 40px; gap: 0; }
.sous-nav a { color: var(--gris); font-size: .82rem; padding: 10px 14px; text-decoration: none; }
.sous-nav a:hover, .sous-nav a.actif { color: var(--encre); }
.sous-nav a.actif { box-shadow: inset 0 -2px 0 var(--rouge); }
.pastille-compte { background: var(--acier-clair); color: var(--acier); border-radius: 9px; padding: 0 6px; font-size: .7rem; margin-left: 4px; font-weight: 600; }
.burger { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--marine); cursor: pointer; }

/* --------------------------------------------------------------- page */
.page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.page-etroite { max-width: 760px; }
.titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.titre-page h1 { margin: 0; }
.titre-page p { margin: .3rem 0 0; color: var(--gris); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fil { font-size: .82rem; color: var(--gris); margin-bottom: 8px; }
.fil a { color: var(--gris); }

.grille { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px 24px; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 20px; }
.grille > .carte + .carte { margin-top: 0; }
.carte-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.carte-titre h2 { margin: 0; }
.carte-titre a { font-size: .85rem; }
.carte-sobre { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* indicateurs */
.kpi { padding: 18px 20px; }
.kpi .val { font-size: 1.8rem; font-weight: 300; color: var(--marine); line-height: 1.1; }
.kpi .lib { font-size: .8rem; color: var(--gris); }
.kpi a { color: inherit; text-decoration: none; }
.kpi.alerte .val { color: var(--warn); }

/* modules de l'espace candidat */
.module { display: block; position: relative; padding: 22px 24px 20px; color: var(--encre); text-decoration: none !important; border-top: 2px solid var(--rouge); transition: box-shadow .15s; }
.picto-module { position: absolute; top: 20px; right: 22px; width: 30px; height: 30px; margin: 0; opacity: .9; }
.module:hover { box-shadow: 0 4px 14px rgba(31, 34, 38, .08); }
.module h2 { margin: .2rem 0 .4rem; font-weight: 500; font-size: 1.1rem; }
.module p { color: var(--gris); font-size: .9rem; margin: 0 0 .8rem; }
.module .lien { font-size: .85rem; color: var(--acier); }
.module .lien::after { content: " →"; }

/* --------------------------------------------------------------- boutons : discrets */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--rayon); border: 1px solid var(--marine);
       background: var(--rouge); color: #fff; font: 500 .86rem var(--police); cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.btn:hover { background: #c81e26; }
.btn-ligne { background: #fff; color: var(--encre); border-color: #cfd2d7; }
.btn-ligne:hover { background: var(--fond); border-color: var(--gris); }
.btn-lien { background: none; border: 0; color: var(--acier); padding: 0; height: auto; font-weight: 400; }
.btn-lien:hover { background: none; text-decoration: underline; }
.btn-danger { background: transparent; color: var(--ko); border-color: #e0bcb7; }
.btn-danger:hover { background: var(--ko-fond); }
.btn-ok { background: var(--ok); border-color: var(--ok); }
.btn-petit { height: 28px; padding: 0 10px; font-size: .8rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
form.inline { display: inline; }

/* --------------------------------------------------------------- formulaires */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--encre); margin-bottom: 5px; }
.champ { margin-bottom: 16px; }
.aide { font-size: .8rem; color: var(--gris); margin-top: 4px; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=url], input[type=search], select, textarea {
  width: 100%; height: 38px; padding: 0 11px; border: 1px solid #d3d6db; border-radius: var(--rayon); background: #fff; font: inherit; color: var(--encre); }
textarea { height: auto; min-height: 90px; padding: 9px 11px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(35, 31, 32, .15); border-color: var(--marine); }
input[type=file] { font-size: .85rem; }
.case { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .9rem; cursor: pointer; }
.case input { margin-top: 4px; }
.filtres { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.filtres .champ { margin: 0; min-width: 150px; }
.filtres input[type=search] { min-width: 220px; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-weight: 600; color: var(--marine); margin-bottom: 10px; }

/* --------------------------------------------------------------- tableaux */
.tableau-wrap { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tab th { text-align: left; font-weight: 600; color: var(--gris); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tab td { padding: 11px 12px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.tab tr:last-child td { border-bottom: 0; }
.tab tbody tr:hover td { background: #fafbfc; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.tab .centre { text-align: center; }
.tab .vide-ligne { text-align: center; color: var(--gris); padding: 28px; }
.tronque { max-width: 460px; }

/* --------------------------------------------------------------- badges */
.badge { display: inline-block; font-size: .74rem; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--trait); color: var(--gris); background: #fff; white-space: nowrap; font-weight: 500; }
.badge-ok { color: var(--ok); background: var(--ok-fond); border-color: transparent; }
.badge-warn { color: var(--warn); background: var(--warn-fond); border-color: transparent; }
.badge-ko { color: var(--ko); background: var(--ko-fond); border-color: transparent; }
.badge-muted { color: var(--gris); background: var(--fond); }
.badge-info { color: var(--marine); background: #eef0f3; border-color: transparent; }
.niv { color: var(--marine); border-color: #d3d6db; background: #fff; }
.niv-6, .niv-7 { background: var(--marine); color: #fff; border-color: var(--marine); }
.niv-4, .niv-5 { background: #eef0f3; border-color: transparent; }

/* --------------------------------------------------------------- messages */
.flash { padding: 11px 14px; border-radius: var(--rayon); margin-bottom: 18px; font-size: .9rem; border-left: 3px solid; background: #fff; }
.flash-ok { border-color: var(--ok); background: var(--ok-fond); }
.flash-ko { border-color: var(--rouge); background: var(--ko-fond); }
.flash-info { border-color: var(--gris); background: #f1f3f6; }
.flash-warn { border-color: var(--warn); background: var(--warn-fond); }
.flash ul { margin: 4px 0 0; padding-left: 18px; }
.vide { color: var(--gris); font-size: .9rem; padding: 6px 0; margin: 0; }

/* --------------------------------------------------------------- listes */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 11px 0; border-bottom: 1px solid #eef1f4; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.liste li:last-child { border-bottom: 0; }
.liste .sec { font-size: .8rem; color: var(--gris); }
dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: .9rem; }
dl.infos dt { color: var(--gris); }
dl.infos dd { margin: 0; }

/* --------------------------------------------------------------- graphiques */
.chart { width: 100%; height: auto; display: block; }
.chart .grille { stroke: #edf0f3; stroke-width: 1; }
.chart .axe { fill: var(--gris-clair); font-size: 11px; }
.chart .ligne { fill: none; stroke-width: 2; }
.chart .point { stroke: #fff; stroke-width: 2; }
.serie-0 { stroke: #2b2e33; fill: #2b2e33; background: #2b2e33; }
.serie-1 { stroke: #E3262E; fill: #E3262E; background: #E3262E; }
.serie-2 { stroke: #8d929a; fill: #8d929a; background: #8d929a; }
.serie-3 { stroke: #5b8c6e; fill: #5b8c6e; background: #5b8c6e; }
.serie-4 { stroke: #b38b3c; fill: #b38b3c; background: #b38b3c; }
.serie-5 { stroke: #7a4e7e; fill: #7a4e7e; background: #7a4e7e; }
.chart .ligne.serie-0, .chart .ligne.serie-1, .chart .ligne.serie-2, .chart .ligne.serie-3, .chart .ligne.serie-4, .chart .ligne.serie-5 { fill: none; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--gris); margin-top: 8px; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.barres { display: grid; gap: 8px; }
.barre-ligne { display: grid; grid-template-columns: 170px 1fr 40px; gap: 10px; align-items: center; font-size: .82rem; }
.barre-lib { color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-piste { height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.barre { display: block; height: 100%; background: #8d929a; border-radius: 4px; }
.barre.niv-6, .barre.niv-7, .barre.niv-4, .barre.niv-5 { background: var(--marine); }
.barre.niv-1, .barre.niv-2 { background: #bfc3c9; }
.barre-val { text-align: right; font-variant-numeric: tabular-nums; }

.echelle { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
.marche { flex: 1; background: #eef1f4; border-radius: 2px 2px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.marche b { font-size: .72rem; color: var(--gris); font-weight: 600; }
.marche.atteint { background: var(--marine); }
.marche.atteint b { color: #fff; }
.marche.estime { background: #e8b9bb; }

.anneau { width: 84px; height: 84px; }
.anneau .fond { fill: none; stroke: #eef1f4; stroke-width: 7; }
.anneau .val { fill: none; stroke: var(--marine); stroke-width: 7; stroke-linecap: round; }
.anneau.ok .val { stroke: var(--ok); }
.anneau.ko .val { stroke: var(--ko); }
.anneau text { font-size: 17px; fill: var(--marine); font-weight: 500; }

.progression { height: 3px; background: var(--trait); border-radius: 2px; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--rouge); transition: width .3s; }

/* --------------------------------------------------------------- test */
.test-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .82rem; color: var(--gris); margin-bottom: 10px; }
.question { font-size: 1.12rem; color: var(--encre); font-weight: 500; margin: 26px 0 22px; line-height: 1.5; }
.choix { display: grid; gap: 10px; margin-bottom: 26px; }
.choix label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; cursor: pointer; font-weight: 400; font-size: .95rem; margin: 0; transition: border-color .12s, background .12s; }
.choix label:hover { border-color: #c9c4c4; }
.choix input { margin-top: 4px; accent-color: var(--marine); }
.choix label:has(input:checked) { border-color: var(--marine); background: var(--acier-clair); }
.test-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.etapes { display: flex; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: e; font-size: .8rem; }
.etapes li { flex: 1; padding: 10px 0 0; border-top: 2px solid var(--trait); color: var(--gris-clair); counter-increment: e; }
.etapes li::before { content: counter(e) ". "; }
.etapes li.fait { border-top-color: var(--marine); color: var(--gris); }
.etapes li.actif { border-top-color: var(--rouge); color: var(--marine); font-weight: 600; }

.options { display: grid; gap: 8px; }
.options label { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); font-weight: 400; cursor: pointer; margin: 0; background: #fff; }
.options label:hover { border-color: #c9c4c4; }
.options label:has(input:checked) { border-color: var(--marine); background: var(--acier-clair); }
.options input { accent-color: var(--marine); }
.options .opt-sec { margin-left: auto; font-size: .78rem; color: var(--gris); }
.options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.code-saisie { font: 600 1.4rem ui-monospace, Consolas, monospace; letter-spacing: .25em; text-align: center; text-transform: uppercase; height: 50px !important; }
.code-affiche { font: 600 2.6rem ui-monospace, Consolas, monospace; letter-spacing: .2em; color: var(--marine); text-align: center; padding: 18px 0 6px; }

.notes-geste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.notes-geste label { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 7px 6px; text-align: center; font-size: .78rem; font-weight: 400; cursor: pointer; margin: 0; background: #fff; }
.notes-geste input { position: absolute; opacity: 0; pointer-events: none; }
.notes-geste label:has(input:checked) { background: var(--marine); color: #fff; border-color: var(--marine); }
.notes-geste label:has(input:focus-visible) { outline: 2px solid var(--acier); }
.geste { padding: 16px 0; border-bottom: 1px solid #eef1f4; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: center; }

/* frise du parcours */
.frise { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--trait); }
.frise li { position: relative; padding: 0 0 16px 14px; font-size: .88rem; }
.frise li::before { content: ""; position: absolute; left: -23px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--gris-clair); }
.frise li.niveau::before { border-color: var(--rouge); background: var(--rouge); }
.frise li.ok::before { border-color: var(--ok); }
.frise li.ko::before { border-color: var(--ko); }
.frise li.certificat::before { border-color: var(--marine); }
.frise .date { display: block; font-size: .75rem; color: var(--gris); }

/* médiathèque */
.ressources { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.ressource { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; color: var(--encre); text-decoration: none !important; transition: box-shadow .15s; }
.ressource:hover { box-shadow: 0 4px 14px rgba(35, 31, 32, .08); }
.ressource .vignette { aspect-ratio: 16/9; display: grid; place-items: center; position: relative; color: var(--rouge); border-bottom: 1px solid var(--trait);
   background-color: var(--fond); background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 18px 18px; }
.ressource .vignette.document { color: var(--marine); }
.ressource .vignette.lien { color: var(--acier); }
.ressource .vignette svg { width: 38px; height: 38px; }
.ressource .vu { position: absolute; top: 10px; right: 10px; font-size: .7rem; background: rgba(255,255,255,.92); color: var(--ok); padding: 1px 7px; border-radius: 3px; }
.ressource .corps { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.ressource h3 { font-size: .95rem; margin: 0 0 6px; color: var(--encre); font-weight: 600; }
.ressource p { font-size: .84rem; color: var(--gris); margin: 0 0 10px; flex: 1; }
.ressource .meta { font-size: .76rem; color: var(--gris); display: flex; gap: 10px; flex-wrap: wrap; }
.lecteur { aspect-ratio: 16/9; background: #000; border-radius: var(--rayon); overflow: hidden; }
.lecteur video, .lecteur iframe { width: 100%; height: 100%; border: 0; display: block; }
.apercu-pdf { width: 100%; height: 75vh; border: 1px solid var(--trait); border-radius: var(--rayon); }

/* pagination */
.pagination { display: flex; gap: 4px; margin-top: 16px; font-size: .85rem; }
.pagination a, .pagination span { padding: 4px 10px; border: 1px solid var(--trait); border-radius: 3px; background: #fff; }
.pagination span.actif { background: var(--marine); color: #fff; border-color: var(--marine); }

/* --------------------------------------------------------------- pages publiques */
body.public { background: #fff; }
.barre-haut { font-size: .76rem; border-bottom: 1px solid var(--trait); }
.barre-haut .entete-inner { min-height: 34px; }
.barre-haut a { color: var(--gris); letter-spacing: .04em; }
.barre-haut a:hover { color: var(--marine); }
.public .entete { border-bottom: 0; }
.hero { position: relative; background: #fff; overflow: hidden; border-bottom: 1px solid var(--trait); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
   background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
   background-size: 28px 28px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%); }
.hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 72px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 40px; align-items: center; }
.hero .surtitre { color: var(--rouge); }
.hero h1 { color: var(--encre); font-size: 2.35rem; font-weight: 300; line-height: 1.2; margin-bottom: 20px; letter-spacing: -.01em; }
.hero h1 strong { font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--rouge); font-weight: 600; }
.hero p { color: var(--gris); font-size: 1.02rem; max-width: 540px; }
.hero .btn { height: 42px; padding: 0 22px; margin-top: 10px; }
.hero-dessin { position: relative; }
.hero-dessin img { display: block; width: 100%; max-width: 520px; height: auto; margin-left: auto; }
.hero-dessin figcaption { text-align: right; margin-top: 6px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-clair); }
.hero-dessin figcaption::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--rouge); vertical-align: middle; margin-right: 8px; }
.etapes-bande { background: var(--fond); border-bottom: 1px solid var(--trait); }
.etapes-bande ol { list-style: none; margin: 0 auto; max-width: 1180px; padding: 26px 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; counter-reset: e; }
.etapes-bande li { counter-increment: e; font-size: .86rem; color: var(--gris); line-height: 1.45; }
.etapes-bande li::before { content: counter(e, decimal-leading-zero); display: block; font-size: .74rem; letter-spacing: .1em; color: var(--rouge); font-weight: 600; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #d9dce1; }
.etapes-bande li b { display: block; color: var(--encre); font-weight: 600; margin-bottom: 2px; }
.picto { width: 40px; height: 40px; color: var(--rouge); display: block; margin-bottom: 14px; }
.section { max-width: 1180px; margin: 0 auto; padding: 72px 24px; }
.section h2 { font-size: 1.5rem; font-weight: 300; margin-bottom: .8rem; }
.section-intro { max-width: 640px; color: var(--gris); margin-bottom: 36px; }
.piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pilier { border-top: 1px solid var(--trait); padding-top: 22px; }
.pilier h3 { font-weight: 600; font-size: 1rem; margin-bottom: .5rem; }
.pilier p { color: var(--gris); font-size: .92rem; margin: 0; }
.chiffres { background: var(--fond); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres .section { padding: 44px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.chiffre b { display: block; font-size: 2rem; font-weight: 300; color: var(--marine); line-height: 1.1; border-left: 2px solid var(--rouge); padding-left: 12px; }
.chiffre span { padding-left: 14px; }
.chiffre span { font-size: .82rem; color: var(--gris); }
.pied { border-top: 1px solid var(--trait); font-size: .78rem; color: var(--gris); }
.pied .entete-inner { min-height: 56px; justify-content: space-between; }

.connexion { min-height: calc(100vh - 160px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; max-width: 1080px; margin: 0 auto; padding: 48px 24px; }
.connexion-dessin { margin: 0; }
.connexion-dessin img { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.connexion-dessin figcaption { text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-clair); margin-top: 10px; }
.connexion .carte { width: 100%; max-width: 400px; padding: 32px 34px; justify-self: center; }
body.public:has(.connexion) { background: #fff; background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 28px 28px; }
.connexion h1 { font-size: 1.3rem; margin-bottom: 4px; }
.connexion .btn { width: 100%; justify-content: center; height: 40px; margin-top: 4px; }

/* --------------------------------------------------------------- fiche imprimable */
.fiche { background: #fff; max-width: 860px; margin: 0 auto; padding: 48px 56px; border: 1px solid var(--trait); }
.fiche-entete { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--rouge); padding-bottom: 18px; margin-bottom: 26px; }
.fiche h1 { font-size: 1.35rem; margin: 0; }
.fiche .bloc-niveau { display: flex; gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--trait); margin-bottom: 20px; }
.fiche .gros-niveau { font-size: 3rem; font-weight: 300; color: var(--marine); line-height: 1; }
.fiche .signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; font-size: .85rem; }
.fiche .signatures div { border-top: 1px solid var(--encre); padding-top: 8px; min-height: 80px; }

@media print {
  body { background: #fff; font-size: 12px; }
  .entete, .sous-nav, .pied, .no-print, .flash { display: none !important; }
  .page { padding: 0; max-width: none; }
  .fiche { border: 0; padding: 0; max-width: none; }
  .carte { box-shadow: none; }
  a { color: inherit; }
  .annexe { page-break-before: always; }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g-2-1 { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { grid-template-columns: 1fr; padding: 48px 24px 40px; gap: 24px; }
  .hero-dessin img { width: 100%; max-width: 440px; margin: 0 auto; }
  .etapes-bande ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connexion { grid-template-columns: 1fr; gap: 8px; }
  .connexion-dessin img { max-width: 260px; }
  .piliers, .chiffres .section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geste { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 760px) {
  .burger { display: block; margin-left: auto; }
  .entete-inner { flex-wrap: wrap; padding: 0 16px; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; padding-bottom: 8px; }
  .nav.ouvert { display: flex; }
  .nav a { padding: 10px 4px; border-bottom: 0; }
  .compte { display: none; }
  .nav.ouvert ~ .compte { display: flex; padding-bottom: 12px; }
  .sous-nav .entete-inner { overflow-x: auto; flex-wrap: nowrap; }
  .page { padding: 22px 16px 48px; }
  .g2, .g4, .options-2, .piliers, .chiffres .section { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 1.75rem; }
  .etapes-bande ol { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .connexion-dessin { display: none; }
  .barre-ligne { grid-template-columns: 110px 1fr 34px; }
  .notes-geste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche { padding: 24px 20px; }
  .carte { padding: 18px; }
}

/* onglets */
.onglets { display: flex; gap: 0; border-bottom: 1px solid var(--trait); margin-bottom: 22px; overflow-x: auto; }
.onglets a { padding: 10px 16px; color: var(--gris); font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.onglets a:hover { color: var(--marine); }
.onglets a.actif { color: var(--marine); border-bottom-color: var(--rouge); font-weight: 600; }
.onglets a span { font-size: .75rem; color: var(--gris-clair); margin-left: 4px; font-weight: 400; }
.geste-binaire { grid-template-columns: minmax(0, 1fr) 150px; }
.geste-binaire .notes-geste { grid-template-columns: 1fr 1fr; }
.geste-binaire .notes-geste label:has(input[value="0"]:checked) { background: var(--gris); border-color: var(--gris); }

/* grille des niveaux (accueil) */
.liste li.grille-niveau { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; justify-content: start; }
.grille-niveau > b { color: var(--rouge); font-weight: 600; }
.marque img { height: 34px; }

.entete-inner { gap: 22px; }
.nav a { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1440px) { .compte .nom-compte { display: none; } }
.nav a { font-size: .88rem; }
@media (max-width: 760px) { .public .entete .btn { padding: 7px 12px; font-size: .8rem; } .marque img { height: 28px; } .marque-app, .marque-sep { display: none; } }
.connexion:not(:has(.connexion-dessin)) { grid-template-columns: minmax(0, 1fr); }
.module .surtitre { padding-right: 40px; display: block; }
.badge-commune { color: var(--acier); background: var(--acier-clair); border-color: transparent; margin-top: 3px; }
/* aperçu candidat (formateur / admin) */
.bandeau-apercu { background: var(--acier-clair); border-bottom: 1px solid #f1cfd1; font-size: .84rem; color: var(--encre); }
.bandeau-apercu .entete-inner { min-height: 46px; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 6px; padding-bottom: 6px; }
.bandeau-apercu b { color: var(--acier); }
.bandeau-apercu .btn { height: 32px; font-size: .8rem; }
.sous-nav-bouton { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-left: 1px solid var(--trait); margin-left: 6px; padding: 10px 14px; font: inherit; font-size: .82rem; color: var(--acier); cursor: pointer; }
.sous-nav-bouton:hover { color: var(--rouge); text-decoration: underline; text-underline-offset: 2px; }
.picto-mini { width: 16px; height: 16px; }
.badge-demo { color: var(--acier); background: var(--acier-clair); border-color: transparent; }
.carte-demo { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; border-left: 2px solid var(--rouge); flex-wrap: wrap; }
.picto-demo { width: 34px; height: 34px; margin: 0; }
.sous-nav .entete-inner { overflow-x: auto; scrollbar-width: none; }
.sous-nav a, .sous-nav-bouton { white-space: nowrap; }
@media (max-width: 760px) { .bandeau-apercu .entete-inner { font-size: .78rem; } .sous-nav-bouton { border-left: 0; } }
@media (max-width: 760px) {
  .etapes li:not(.actif) { font-size: 0; flex: 0 0 34px; margin-right: 4px; }
  .etapes li:not(.actif)::before { font-size: .8rem; }
  .etapes li.actif { flex: 1; }
}
/* logo officiel « Drekan Energy | Campus » */
.marque img.marque-campus { height: 30px; width: auto; }
@media (max-width: 1100px) { .marque img.marque-campus { height: 26px; } }
@media (max-width: 760px) { .marque img.marque-campus { height: 19px; } .public .entete .entete-inner { flex-wrap: nowrap; } }
/* banque : vue par métier */
.par-metier { margin-bottom: 20px; }
.par-metier > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 600; color: var(--marine); list-style: none; }
.par-metier > summary::-webkit-details-marker { display: none; }
.par-metier > summary::before { content: "▸"; color: var(--rouge); margin-right: 8px; }
.par-metier[open] > summary::before { content: "▾"; }
.par-metier > summary > span:first-child { flex: 1; }
.par-metier .tableau-wrap { margin-top: 12px; }
.tab tr.groupe td { background: var(--fond); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); font-weight: 600; padding-top: 10px; padding-bottom: 8px; }
.barre-relecture { display: inline-block; vertical-align: middle; width: 100px; height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; margin-right: 8px; }
.barre-relecture span { display: block; height: 100%; background: var(--ok); }
.puce-referent { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 2px 4px 2px 9px; border: 1px solid var(--trait); border-radius: 12px; font-size: .8rem; background: #fff; }
.puce-referent button { border: 0; background: none; color: var(--gris); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.puce-referent button:hover { color: var(--ko); }
.liste-cases { border: 0; padding: 0; margin: 0; max-height: 420px; overflow-y: auto; }
.liste-cases .case { display: flex; margin: 3px 0; }
/* accueil : centre de formation */
.centre-formation { padding-top: 64px; padding-bottom: 24px; }
.centre-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.centre-visuel { margin: 0; aspect-ratio: 4 / 3; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; display: grid; place-items: center;
  background-color: #fff; background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 24px 24px; }
.centre-visuel img { width: 62%; height: auto; display: block; }
.centre-visuel.avec-photo { border: 0; background: none; }
.centre-visuel.avec-photo img { width: 100%; height: 100%; object-fit: cover; }
.centre-formation h2 { font-size: 1.5rem; font-weight: 300; margin-bottom: .8rem; }
.centre-chiffres { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.centre-chiffres li { border-left: 2px solid var(--rouge); padding-left: 12px; }
.centre-chiffres b { display: block; font-size: 1.45rem; font-weight: 300; color: var(--encre); line-height: 1.15; }
.centre-chiffres span { font-size: .82rem; color: var(--gris); }
@media (max-width: 980px) { .centre-grille { grid-template-columns: 1fr; gap: 28px; } }
.lien-relecture { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--trait); border-radius: 16px; color: var(--encre); font-size: .82rem; white-space: nowrap; text-decoration: none !important; }
.lien-relecture:hover, .lien-relecture.actif { border-color: var(--rouge); color: var(--acier); }
.lien-relecture .badge { padding: 0 6px; }
@media (max-width: 1440px) { .nav a { padding-left: 8px; padding-right: 8px; } .marque img.marque-campus { height: 28px; } .entete-inner { gap: 18px; } }
.bouton-deconnexion .ico-deco { display: none; vertical-align: middle; }
.compte.avec-relecture .txt-deco { display: none; }
.compte.avec-relecture .ico-deco { display: inline-block; }
body:has(.avec-relecture) .nav a { padding-left: 7px; padding-right: 7px; font-size: .86rem; }

/* ==========================================================================
   En-tête sur deux niveaux : la marque respire, la navigation passe dessous
   ========================================================================== */
.entete-deux-niveaux { border-bottom: 1px solid var(--trait); }
.entete-deux-niveaux .entete-haut .entete-inner { min-height: 86px; justify-content: space-between; gap: 32px; }
.entete-deux-niveaux .marque img.marque-campus { height: 36px; }
.entete-deux-niveaux .entete-nav { border-top: 1px solid #eef0f3; }
.entete-deux-niveaux .entete-nav .entete-inner { min-height: 0; }
.entete-deux-niveaux .nav { flex: 1; gap: 4px; margin-left: -14px; flex-wrap: wrap; }
.entete-deux-niveaux .entete-nav .nav a { padding: 14px 14px 12px; font-size: .9rem; }
.entete-deux-niveaux .compte { gap: 16px; }
.entete-deux-niveaux .compte .nom-compte { display: inline; }
.entete-deux-niveaux .compte.avec-relecture .txt-deco { display: inline; }
.entete-deux-niveaux .compte.avec-relecture .ico-deco { display: none; }
.entete-deux-niveaux .burger { display: none; }
.seulement-mobile { display: none !important; }
.public .entete .entete-inner { min-height: 86px; }
.public .marque img.marque-campus { height: 36px; }

@media (max-width: 760px) {
  .entete-deux-niveaux .entete-haut .entete-inner { min-height: 64px; gap: 12px; flex-wrap: nowrap; }
  .entete-deux-niveaux .marque img.marque-campus, .public .marque img.marque-campus { height: 20px; }
  .public .entete .entete-inner { min-height: 64px; }
  .entete-deux-niveaux .burger { display: block; margin-left: 0; order: 3; }
  .entete-deux-niveaux .compte { display: flex; margin-left: auto; gap: 10px; padding: 0; }
  .entete-deux-niveaux .compte .nom-compte, .entete-deux-niveaux .compte .lien-relecture { display: none; }
  .entete-deux-niveaux .compte .txt-deco { display: none; }
  .entete-deux-niveaux .compte .ico-deco { display: inline-block; }
  .entete-deux-niveaux .entete-nav { border-top: 0; }
  .entete-deux-niveaux .nav { display: none; flex-direction: column; margin-left: 0; padding: 4px 0 10px; }
  .entete-deux-niveaux .nav.ouvert { display: flex; border-top: 1px solid #eef0f3; }
  .entete-deux-niveaux .entete-nav .nav a { padding: 10px 4px; border-bottom: 0; }
  .seulement-mobile { display: block !important; }
}
@media (max-width: 760px) {
  .entete-deux-niveaux .compte .txt-deco, .entete-deux-niveaux .compte.avec-relecture .txt-deco { display: none; }
  .entete-deux-niveaux .compte .ico-deco, .entete-deux-niveaux .compte.avec-relecture .ico-deco { display: inline-block; }
}
.entete-deux-niveaux .marque img.marque-campus, .public .marque img.marque-campus { height: 42px; }
@media (max-width: 760px) { .entete-deux-niveaux .marque img.marque-campus, .public .marque img.marque-campus { height: 22px; } }

/* v9 : accès public (candidat + formateur/admin), menu en capitales, photo du centre */
.acces-public { display: flex; align-items: center; gap: 10px; }
.acces-public .txt-court { display: none; }
.acces-public .btn-staff { color: var(--gris); border-color: var(--trait); }
.acces-public .btn-staff:hover { color: var(--encre); border-color: var(--encre); }
.connexion-autre { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--trait); color: var(--gris); }
@media (max-width: 760px) {
  .acces-public { gap: 6px; }
  .acces-public .txt-long { display: none; }
  .acces-public .txt-court { display: inline; }
  .acces-public .btn { padding: 6px 10px; font-size: .76rem; }
  .acces-public.sur-accueil .btn-candidat { display: none; }
}
.nav a, .entete-deux-niveaux .entete-nav .nav a { text-transform: uppercase; letter-spacing: .045em; font-size: .8rem; font-weight: 500; }
.nav a.actif, .entete-deux-niveaux .entete-nav .nav a.actif { font-weight: 600; }
.nav a .badge { letter-spacing: 0; }
.centre-visuel.avec-photo img { object-position: 50% 62%; }

/* accueil : inclusion · formation · évolution */
.inclusion { padding-top: 40px; }
.inclusion-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.inclusion h2 { font-size: 1.5rem; font-weight: 300; margin-bottom: .8rem; }
.inclusion-visuel { margin: 0; }
.inclusion-visuel img { width: 100%; height: auto; display: block; }
.inclusion-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.inclusion-points li { border-left: 2px solid var(--rouge); padding-left: 12px; }
.inclusion-points b { display: block; font-weight: 600; color: var(--encre); font-size: .95rem; }
.inclusion-points span { font-size: .86rem; color: var(--gris); }
.inclusion-note { margin: 20px 0 0; }
@media (max-width: 980px) { .inclusion-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; } .inclusion-visuel { order: -1; } }
/* accueil : les trois dessins au trait partagent le même traitement (trait anthracite, rouge en accent,
   quadrillage « papier technique » estompé comme dans le bandeau) et une hauteur d'affichage comparable */
.centre-visuel.avec-dessin, .inclusion-visuel { position: relative; margin: 0; padding: 26px 0; border: 0; border-radius: 0; background: none; aspect-ratio: auto; overflow: visible; display: block; }
.centre-visuel.avec-dessin::before, .inclusion-visuel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.centre-visuel.avec-dessin img, .inclusion-visuel img { position: relative; display: block; width: 100%; height: auto; margin: 0 auto; }
.centre-visuel.avec-dessin img { max-width: 460px; }
.inclusion-visuel img { max-width: 580px; }
@media (max-width: 980px) { .centre-visuel.avec-dessin img { max-width: 420px; } .inclusion-visuel img { max-width: 520px; } }

/* passage des tests : chronomètre et correction immédiate */
.chrono { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--marine); }
.chrono.urgent { color: var(--rouge); }
.chrono-barre { height: 2px; background: transparent; margin-top: 4px; }
.chrono-barre span { display: block; height: 100%; background: var(--gris-clair); transition: width 1s linear; }
.chrono-barre.urgent span { background: var(--rouge); }
.sans-copie .question, .sans-copie .choix { -webkit-user-select: none; user-select: none; }
.correction { margin: 22px 0 0; padding: 12px 16px; border-radius: var(--rayon); border-left: 3px solid; }
.correction-verdict { margin: 0; font-weight: 600; font-size: 1.02rem; }
.correction-ok { border-color: var(--ok); background: var(--ok-fond); color: var(--ok); }
.correction-ko { border-color: var(--ko); background: var(--ko-fond); color: var(--ko); }
.correction-delai { border-color: var(--warn); background: var(--warn-fond); color: var(--warn); }
.choix-corrige { list-style: none; padding: 0; }
.choix-corrige li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; font-size: .95rem; }
.choix-corrige .repere { width: 16px; flex: none; font-weight: 700; }
.choix-corrige li.attendue { border-color: var(--ok); background: var(--ok-fond); }
.choix-corrige li.attendue .repere, .choix-corrige li.attendue .petit { color: var(--ok); }
.choix-corrige li.erronee { border-color: var(--ko); background: var(--ko-fond); }
.choix-corrige li.erronee .repere, .choix-corrige li.erronee .petit { color: var(--ko); }
.explication { margin-bottom: 22px; }
/* Dernière chance (fin de QCM) */
.derniere-chance { border-top: 3px solid var(--warn); }
.derniere-chance h1 { font-size: 1.45rem; margin: 0 0 10px; }
.derniere-chance-icone { width: 44px; height: 44px; color: var(--warn); display: block; margin-bottom: 10px; }
.derniere-chance-regles { margin: 14px 0 20px; padding-left: 1.1em; }
.derniere-chance-regles li { margin: 6px 0; }
.explication h2 { font-size: 1rem; margin-bottom: 6px; }

/* ==========================================================================
   Mon espace (collaborateur) : accueil plus chaleureux, même charte
   (trait anthracite, rouge en accent, quadrillage « papier technique », pas d'aplat large)
   ========================================================================== */
.ms-accueil { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: center;
  background-color: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 30px 36px; margin-bottom: 30px; overflow: hidden;
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 28px 28px; }
.ms-accueil h1 { font-size: 2rem; font-weight: 500; margin: 0 0 .15rem; }
.ms-accueil-metier { color: var(--gris); margin: 0 0 22px; }
.ms-reperes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.ms-reperes li { border-left: 2px solid var(--rouge); padding-left: 12px; min-width: 120px; }
.ms-reperes b { display: block; font-size: 1.55rem; font-weight: 400; color: var(--marine); line-height: 1.15; }
.ms-reperes b small { font-size: .95rem; color: var(--gris); }
.ms-reperes span { font-size: .82rem; color: var(--gris); }
/* Équipe souriante (extrait du dessin « inclusion » de la page d'accueil), fondue vers la gauche et vers le bas */
.ms-accueil-dessin { position: relative; align-self: stretch; min-height: 240px; margin: -30px -36px -30px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%), linear-gradient(#000 62%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 20%), linear-gradient(#000 62%, transparent); mask-composite: intersect; }
.ms-accueil-dessin img { position: absolute; top: 22px; left: -73%; width: 173%; max-width: none; height: auto; }
.ms-accueil-dessin.cadre-equipe-gauche { -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 80%, transparent), linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 80%, transparent), linear-gradient(#000 62%, transparent); }
.ms-accueil-dessin.cadre-equipe-gauche img { left: -4%; }
/* dessin entier (techniciens, formation) : posé sur le bas de l'en-tête */
.ms-accueil-dessin.cadre-entier { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%); mask-image: linear-gradient(to right, transparent, #000 12%); }
.ms-accueil-dessin.cadre-entier img { left: 0; top: 0; width: 100%; height: 100%; padding: 22px 30px 4px 10px; object-fit: contain; object-position: right bottom; }

.ms-section { margin-bottom: 30px; }
.ms-section-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ms-section-titre h2 { margin: 0; }
.ms-section-titre a { font-size: .85rem; }
.ms-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ms-etapes:has(> :only-child) { grid-template-columns: minmax(0, 560px); }
.ms-etape { transition: box-shadow .15s, transform .15s, border-color .15s; }
.ms-etape { display: flex; gap: 14px; align-items: flex-start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 18px;
  color: var(--encre); text-decoration: none !important; }
.ms-etape:hover { box-shadow: 0 6px 18px rgba(31, 34, 38, .08); transform: translateY(-1px); border-color: #d5d8de; }
.ms-etape-icone { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--acier-clair); color: var(--rouge); display: grid; place-items: center; }
.ms-etape-icone svg { width: 22px; height: 22px; }
.ms-etape.warn .ms-etape-icone { background: var(--warn-fond); color: var(--warn); }
.ms-etape.ko .ms-etape-icone { background: var(--ko-fond); color: var(--ko); }
.ms-etape.decouvrir .ms-etape-icone { background: #eef0f3; color: var(--marine); }
.ms-etape-icone.ok { background: var(--ok-fond); color: var(--ok); }
.ms-etape-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-etape-type { font-size: .78rem; color: var(--gris); }
.ms-etape.warn .ms-etape-type { color: var(--warn); }
.ms-etape.ko .ms-etape-type { color: var(--ko); }
.ms-etape-corps b { font-weight: 600; color: var(--marine); line-height: 1.35; }
.ms-etape-detail { font-size: .85rem; color: var(--gris); }
.ms-etape-action { margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--acier); }
.ms-barre { display: block; height: 6px; background: #eceef2; border-radius: 3px; margin: 8px 0 2px; overflow: hidden; }
.ms-barre > span { display: block; height: 100%; background: var(--rouge); border-radius: 3px; }
.ms-carte, .ms-a-jour { border-radius: 12px; }
.ms-a-jour { display: flex; gap: 14px; align-items: center; background: var(--blanc); border: 1px solid var(--trait); padding: 18px; }

.ms-parcours + .ms-parcours { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eef1f4; }
.ms-parcours-metier { margin: 0 0 6px; }
.ms-escalier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; margin: 30px 0 12px; }
.ms-marche { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; border-radius: 6px 6px 0 0; background: #eceef2; }
.ms-marche b { font-size: .78rem; font-weight: 600; color: var(--gris); }
.ms-marche.atteint { background: #5b6068; }
.ms-marche.actuel { background: var(--marine); box-shadow: inset 0 3px 0 var(--rouge); z-index: 1; }  /* « Vous êtes ici » au-dessus de la marche suivante */
.ms-marche.atteint b, .ms-marche.actuel b { color: #fff; }
.ms-marche.objectif { background: var(--blanc); border: 1.5px dashed var(--rouge); border-bottom: 0; }
.ms-marche.objectif b { color: var(--acier); }
.ms-marche i { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: .72rem; font-weight: 600;
  color: var(--acier); background: var(--acier-clair); border-radius: 10px; padding: 2px 8px; }
.ms-escalier.vide .ms-marche { background: #f0f1f4; }
.ms-parcours-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .88rem; color: var(--gris); }
.ms-parcours-legende b { color: var(--marine); }
.ms-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ms-pastille.actuel { background: var(--marine); box-shadow: inset 0 2px 0 var(--rouge); }
.ms-pastille.objectif { border: 1.5px dashed var(--rouge); }

.ms-fil { list-style: none; margin: 0; padding: 0; }
.ms-fil li { position: relative; padding: 0 0 18px 32px; }
.ms-fil li::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: 2px; width: 2px; background: #e6e8ec; }
.ms-fil li:last-child { padding-bottom: 0; }
.ms-fil li:last-child::before { display: none; }
.ms-fil-point { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gris-clair); background: var(--blanc); }
.ms-fil li.ok .ms-fil-point { border-color: var(--ok); background: var(--ok-fond); box-shadow: inset 0 0 0 3px var(--blanc); background-color: var(--ok); }
.ms-fil li.niv .ms-fil-point { border-color: var(--marine); background: var(--marine); box-shadow: inset 0 0 0 3px var(--blanc); }
.ms-fil li.attente .ms-fil-point { border-color: var(--warn); }
.ms-fil-date { display: block; font-size: .78rem; color: var(--gris); margin-bottom: 1px; }
.ms-fil-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ms-fil-ligne b { font-weight: 600; color: var(--marine); }
.ms-fil-ligne > a { font-size: .85rem; white-space: nowrap; }
.ms-fil-resultat { font-size: .88rem; color: var(--gris); }
.ms-fil li.ok .ms-fil-resultat { color: var(--ok); }

.ms-nouveautes { list-style: none; margin: 0; padding: 0; }
.ms-nouveautes li + li { border-top: 1px solid #eef1f4; }
.ms-nouveautes a { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--encre); text-decoration: none !important; }
.ms-nouveautes a:hover { color: var(--acier); }
.ms-nouveaute-icone { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eef0f3; color: var(--marine); display: grid; place-items: center; }
.ms-nouveaute-icone svg { width: 20px; height: 20px; }
.ms-nouveautes .sec { font-size: .8rem; color: var(--gris); }

/* Thèmes QHSE / entreprise en cartes */
.ms-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.ms-theme { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 18px 20px; }
.ms-theme-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ms-theme-icone { width: 34px; height: 34px; color: var(--gris-clair); }
.ms-theme-etat { font-size: .75rem; font-weight: 600; border-radius: 10px; padding: 2px 9px; background: #eef0f3; color: var(--gris); }
.ms-theme h2 { font-size: 1rem; margin: 0 0 6px; line-height: 1.35; }
.ms-theme-desc { font-size: .86rem; color: var(--gris); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-theme-infos { list-style: none; margin: 0 0 12px; padding: 0; font-size: .84rem; color: var(--gris); flex: 1; }
.ms-theme-infos li { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.ms-theme-infos svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gris-clair); }
.ms-theme-action { padding-top: 12px; border-top: 1px solid #eef1f4; }
.ms-theme-infos li.bientot, .ms-theme-infos li.bientot svg { color: var(--warn); }
.ms-theme.ok { border-color: #cfe3d6; background: linear-gradient(180deg, var(--ok-fond), var(--blanc) 90px); }
.ms-theme.ok .ms-theme-icone { color: var(--ok); }
.ms-theme.ok .ms-theme-etat { background: var(--ok-fond); color: var(--ok); }
.ms-theme.warn { border-color: #efdcae; }
.ms-theme.warn .ms-theme-icone { color: var(--warn); }
.ms-theme.warn .ms-theme-etat { background: var(--warn-fond); color: var(--warn); }
.ms-theme.en-cours .ms-theme-icone { color: var(--rouge); }
.ms-theme.en-cours .ms-theme-etat { background: var(--acier-clair); color: var(--acier); }
.ms-theme.a-passer { border-style: dashed; border-color: #cfd2d8; }

/* Déroulé numéroté */
.ms-deroule { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.ms-deroule li { position: relative; padding: 0 0 14px 40px; counter-increment: etape; }
.ms-deroule li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--acier-clair);
  color: var(--acier); font-weight: 600; font-size: .82rem; display: grid; place-items: center; }
.ms-deroule li::after { content: ""; position: absolute; left: 12px; top: 30px; bottom: 2px; width: 2px; background: #eceef2; }
.ms-deroule li:last-child { padding-bottom: 0; }
.ms-deroule li:last-child::after { display: none; }
.ms-deroule b { display: block; font-weight: 600; color: var(--marine); font-size: .92rem; }
.ms-deroule span { font-size: .85rem; color: var(--gris); }
.ms-liste-points { margin: 0; padding-left: 1.1em; color: var(--gris); }
.ms-liste-points li { margin: 4px 0; }
@media (max-width: 1100px) { .ms-themes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) { .ms-accueil { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 760px) {
  .ms-accueil { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 22px 24px; }
  .ms-accueil-dessin { order: -1; min-height: 160px; margin: -22px -20px 0 -24px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .ms-accueil-dessin img { top: 12px; left: -66%; width: 166%; }
  .ms-accueil-dessin.cadre-equipe-gauche img { left: -2%; }
  .ms-accueil-dessin.cadre-entier { min-height: 190px; -webkit-mask-image: none; mask-image: none; }
  .ms-accueil-dessin.cadre-entier img { padding: 16px 16px 0; object-position: center bottom; }
  .ms-accueil h1 { font-size: 1.65rem; }
  .ms-reperes { gap: 12px 22px; }
  .ms-reperes li { min-width: 0; }
  .ms-marche i { font-size: .66rem; padding: 2px 6px; }
}

/* Manuel QHSE (administration) */
.doc-processus { padding: 0; margin-bottom: 14px; }
.doc-processus > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.doc-processus > summary::-webkit-details-marker { display: none; }
.doc-processus > summary::before { content: "›"; color: var(--gris); font-size: 1.2rem; margin-right: 8px; transition: transform .15s; display: inline-block; }
.doc-processus[open] > summary::before { transform: rotate(90deg); }
.doc-processus > summary > span:first-child { flex: 1; }
.doc-processus .tableau-wrap { padding: 0 20px 14px; }
.doc-actions { white-space: nowrap; color: var(--gris); }
.doc-ref { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; font-weight: 600; color: var(--marine); }
.doc-table td { vertical-align: top; }
.doc-groupe td { background: #f7f8fa; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; font-weight: 600; color: var(--gris); padding-top: 6px; padding-bottom: 6px; }
.doc-compteurs .carte { display: flex; flex-direction: column; padding: 16px 20px; }
.doc-compteurs b { font-size: 1.6rem; font-weight: 400; color: var(--marine); line-height: 1.1; }
.doc-compteurs span { font-size: .85rem; color: var(--gris); }
.interrupteur { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 0; background: #d5d8de; cursor: pointer; padding: 0; transition: background .15s; }
.interrupteur span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.interrupteur.actif { background: var(--ok); }
.interrupteur.actif span { left: 19px; }

/* Tourniquet « Mes thématiques » */
.ms-section-info { font-size: .85rem; color: var(--gris); }
.ms-tourniquet { position: relative; }
.ms-tourniquet-piste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px -2px -6px; overscroll-behavior-x: contain; }
.ms-tourniquet-piste::-webkit-scrollbar { display: none; }
.ms-tourniquet-piste:focus-visible { outline: 2px solid var(--acier); outline-offset: 4px; border-radius: 12px; }
/* Cartes du tourniquet : aplat rouge Drekan assumé (repère visuel fort de l'accueil), quadrillage blanc en filigrane */
.ms-them { position: relative; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; min-height: 204px; border-radius: 14px;
  padding: 16px 18px; color: #fff; text-decoration: none !important; background-color: var(--rouge); border: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .12)); background-size: 22px 22px, 22px 22px, 100% 100%;
  box-shadow: 0 2px 6px rgba(184, 31, 38, .25); transition: box-shadow .15s, transform .15s, background-color .15s; }
.ms-them:hover { background-color: #d01f27; box-shadow: 0 10px 24px rgba(184, 31, 38, .35); transform: translateY(-2px); }
.ms-them:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; }
.ms-them > * { position: relative; z-index: 1; }
.ms-them > .ms-them-filigrane { position: absolute; z-index: 0; right: -18px; top: 34px; width: 120px; height: 120px; color: rgba(255, 255, 255, .11); pointer-events: none; }
.ms-them-filigrane svg { width: 100%; height: 100%; stroke-width: 1; }
.ms-them-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.ms-them-picto { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--rouge); display: grid; place-items: center; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.ms-them-picto svg { width: 26px; height: 26px; }
.ms-them-etat { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; border-radius: 10px; padding: 3px 8px 3px 5px; background: rgba(255, 255, 255, .18); color: #fff; white-space: nowrap; }
.ms-them-etat svg { width: 15px; height: 15px; }
.ms-them.ok .ms-them-etat { background: #fff; color: var(--ok); }
.ms-them.warn .ms-them-etat { background: #fff; color: var(--warn); }
.ms-them.en-cours .ms-them-etat { background: var(--marine); color: #fff; }
.ms-them-famille { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .78); font-weight: 600; }
.ms-them b { font-weight: 600; color: #fff; line-height: 1.25; font-size: 1.02rem; }
.ms-them-desc { font-size: .82rem; color: rgba(255, 255, 255, .95); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.ms-them-pied { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: .78rem; color: rgba(255, 255, 255, .85); }
.ms-them-lien { color: #fff; font-weight: 700; white-space: nowrap; }
.ms-them:hover .ms-them-lien { text-decoration: underline; text-underline-offset: 3px; }
.ms-fleche { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; border: 1px solid var(--trait); background: var(--blanc);
  color: var(--marine); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(31, 34, 38, .12); transition: opacity .15s, box-shadow .15s; }
.ms-fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-fleche { color: var(--rouge); }
.ms-fleche:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(31, 34, 38, .22); color: var(--acier); }
.ms-fleche:disabled { opacity: 0; pointer-events: none; }
.ms-fleche.prec { left: -19px; }
.ms-fleche.suiv { right: -19px; }
@media (max-width: 1100px) { .ms-tourniquet-piste { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 760px) {
  .ms-tourniquet-piste { grid-auto-columns: 80%; }
  .ms-fleche.prec { left: -8px; } .ms-fleche.suiv { right: -8px; }
}

/* Bas de « Mon espace » */
.ms-bas { margin-bottom: 20px; align-items: start; }
.ms-bas > .carte + .carte { margin-top: 0; }
.ms-nouveautes-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; }
.ms-nouveautes-ligne li + li { border-top: 0; }
.manuel-bandeau { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--encre); text-decoration: none !important; }
.manuel-bandeau > span:nth-child(2) { flex: 1; }
.manuel-bandeau .ms-etape-action { margin: 0; white-space: nowrap; }

/* Pages thématiques */
.ms-accueil-picto { align-self: stretch; display: grid; place-items: center; min-height: 200px; }
.ms-accueil-picto span { width: 150px; height: 150px; border-radius: 50%; background: var(--blanc); border: 1px solid var(--trait); color: var(--rouge);
  display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(227, 38, 46, .05), 0 0 0 28px rgba(227, 38, 46, .03); }
.ms-accueil-picto svg { width: 82px; height: 82px; stroke-width: 1.1; }
.ms-accroche { font-size: 1.02rem; line-height: 1.65; margin: 0 0 16px; }
.ms-sous-titre { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin: 18px 0 8px; font-weight: 600; }
.ms-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.ms-points li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.ms-point-icone { flex: none; width: 20px; height: 20px; color: var(--ok); margin-top: 1px; }
.ms-supports { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ms-support { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--trait); border-radius: 12px; color: var(--encre); text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.ms-support:hover { box-shadow: 0 4px 14px rgba(31, 34, 38, .08); border-color: #d5d8de; }
.ms-support-visuel { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; background: #eef0f3; color: var(--marine); display: grid; place-items: center; }
.ms-support-visuel svg { width: 28px; height: 28px; }
.ms-support.video .ms-support-visuel { background: var(--marine); color: #fff; }
.ms-support-visuel i { position: absolute; bottom: 4px; right: 4px; font-style: normal; font-size: .62rem; background: rgba(0,0,0,.55); color: #fff; padding: 0 4px; border-radius: 4px; }
.ms-support-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-support-type { font-size: .72rem; color: var(--gris); }
.ms-support b { font-weight: 600; color: var(--marine); font-size: .9rem; line-height: 1.3; }
.ms-support .sec { font-size: .76rem; color: var(--gris); }
.doc-liste { list-style: none; margin: 0 0 4px; padding: 0; }
.doc-liste li + li { border-top: 1px solid #eef1f4; }
.doc-ligne { display: flex; gap: 14px; align-items: baseline; padding: 9px 4px; color: var(--encre); text-decoration: none !important; border-radius: 6px; }
.doc-ligne:hover { background: #f7f8fa; }
.doc-ligne .doc-ref { flex: none; width: 104px; }
.doc-titre { display: flex; flex-direction: column; min-width: 0; font-size: .92rem; }
.doc-titre .sec { font-size: .76rem; color: var(--gris); }
.doc-ligne:hover .doc-titre { color: var(--acier); }
.ms-liens { list-style: none; margin: 0; padding: 0; }
.ms-liens li + li { border-top: 1px solid #eef1f4; }
.ms-liens a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; color: var(--encre); text-decoration: none !important; }
.ms-liens a:hover b { color: var(--acier); }
.ms-liens a > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ms-lien-icone { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eef0f3; color: var(--marine); display: grid; place-items: center; }
.ms-lien-icone svg { width: 18px; height: 18px; }
.ms-liens b { font-weight: 600; color: var(--marine); font-size: .92rem; }
.ms-liens .sec { font-size: .84rem; color: var(--gris); }
.ms-lien-source { font-size: .74rem; color: var(--gris-clair); }
.ms-test-statut { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; }
.ms-test-statut b { display: block; font-size: 1.1rem; color: var(--marine); }
.ms-test-statut .sec { font-size: .84rem; color: var(--gris); }
.ms-test-medaille { width: 48px; height: 48px; color: var(--gris-clair); flex: none; }
.ms-test.ok { border-color: #cfe3d6; background: linear-gradient(180deg, var(--ok-fond), var(--blanc) 120px); }
.ms-test.ok .ms-test-medaille { color: var(--ok); }
.ms-test.warn .ms-test-medaille { color: var(--warn); }
.ms-test.en-cours .ms-test-medaille { color: var(--rouge); }
.ms-test-action { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.ms-theme-picto { width: 40px; height: 40px; border-radius: 11px; background: var(--acier-clair); color: var(--rouge); display: grid; place-items: center; }
.ms-theme-picto svg { width: 24px; height: 24px; }
.ms-theme-etat { display: inline-flex; align-items: center; gap: 4px; }
.ms-theme-medaille { width: 15px; height: 15px; }
.ms-theme h2 a { color: inherit; }
.ms-theme h2 a:hover { color: var(--acier); }
.ms-theme-action { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-theme-decouvrir { font-size: .84rem; font-weight: 600; }
.cases-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cases-themes .case { font-size: .86rem; margin: 2px 0; }

/* Manuel QHSE (collaborateur) */
.manuel-recherche { margin-bottom: 16px; }
.manuel-recherche input { width: 100%; }
.manuel-processus { padding: 0 20px 12px; }
.manuel-procedure + .manuel-procedure { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--trait); }
.manuel-procedure h3 { font-size: .95rem; margin: 8px 0 4px; font-weight: 600; }
@media (max-width: 760px) {
  .ms-points { grid-template-columns: minmax(0, 1fr); }
  .cases-themes { grid-template-columns: minmax(0, 1fr); }
  .ms-accueil-picto { min-height: 0; order: -1; margin-bottom: 4px; }
  .ms-accueil-picto span { width: 96px; height: 96px; box-shadow: 0 0 0 10px rgba(227, 38, 46, .05); }
  .ms-accueil-picto svg { width: 52px; height: 52px; }
  .doc-ligne { flex-direction: column; gap: 2px; }
  .doc-ligne .doc-ref { width: auto; }
  .manuel-bandeau { flex-wrap: wrap; }
}

/* ==========================================================================
   v21 — fiche thématique : illustration du cahier QHSE, liste documentaire unique
   ========================================================================== */
.ms-accueil-legende { position: absolute; right: 14px; bottom: 8px; font-size: .68rem; color: var(--gris-clair); letter-spacing: .02em; background: rgba(255, 255, 255, .85); padding: 1px 6px; border-radius: 4px; }
.ms-accueil-dessin.cadre-entier.avec-legende img { padding-bottom: 24px; }
.dt-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.dt-liste li + li { border-top: 1px solid #eef1f4; }
.dt-liste li.tete + li, .dt-liste li + li.tete { border-top-color: var(--trait); }
.dt-ligne { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; padding: 10px 14px; color: var(--encre); text-decoration: none !important; transition: background .12s; }
.dt-ligne:hover { background: #f7f8fa; }
.dt-badge { justify-self: start; font-family: ui-monospace, Consolas, monospace; font-size: .76rem; font-weight: 600; color: var(--marine); background: #f0f2f5; border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.dt-titre { display: flex; flex-direction: column; min-width: 0; }
.dt-titre b { font-weight: 500; font-size: .92rem; line-height: 1.3; }
.dt-titre .sec { font-size: .74rem; color: var(--gris); }
.dt-meta { font-size: .74rem; color: var(--gris); white-space: nowrap; }
.dt-ouvrir { display: grid; place-items: center; color: var(--gris-clair); }
.dt-ouvrir svg { width: 18px; height: 18px; }
.dt-ligne:hover .dt-titre b, .dt-ligne:hover .dt-ouvrir { color: var(--acier); }
.dt-liste li.tete .dt-ligne { background: #fafbfc; }
.dt-liste li.tete .dt-ligne:hover { background: #f3f4f7; }
.dt-liste li.tete .dt-titre b { font-weight: 600; }
.dt-liste li.tete .dt-badge { background: var(--marine); color: #fff; }
.dt-liste li.cahier .dt-ligne { background: linear-gradient(90deg, var(--acier-clair), #fff 70%); box-shadow: inset 3px 0 0 var(--rouge); padding-top: 13px; padding-bottom: 13px; }
.dt-liste li.cahier .dt-badge { background: var(--rouge); color: #fff; font-family: inherit; letter-spacing: .02em; }
.dt-liste li.cahier .dt-titre b { font-weight: 600; font-size: .98rem; }
.dt-a-importer { border-style: dashed; }
.dt-a-importer p { color: var(--gris); }
@media (max-width: 760px) {
  .dt-ligne { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "badge ouvrir" "titre ouvrir" "meta ouvrir"; gap: 4px 10px; padding: 10px 12px; }
  .dt-badge { grid-area: badge; } .dt-titre { grid-area: titre; } .dt-meta { grid-area: meta; white-space: normal; } .dt-ouvrir { grid-area: ouvrir; }
  .ms-accueil-legende { right: 10px; bottom: 4px; }
}

/* Page d'accueil publique : exemple d'escalier N1 → N7 traversé par la flèche d'évolution de carrière.
   Le graphique garde ses proportions (aspect-ratio = viewBox de la flèche) pour que la flèche reste alignée sur les marches. */
.parcours-demo { margin: 0 0 30px; padding: 22px 24px 18px; }
.parcours-demo-escalier { position: relative; height: auto; aspect-ratio: 700 / 280; margin: 8px 0 14px; }
.parcours-demo .ms-marche.possible { background: #eceef2; }
.parcours-demo-fleche { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.parcours-demo-fleche line { stroke-linecap: round; }
.parcours-demo-fleche .halo { stroke: #fff; stroke-width: 9; opacity: .85; }
.parcours-demo-fleche .trait { stroke: var(--rouge); stroke-width: 4.5; }
.parcours-demo-fleche marker path { fill: var(--rouge); }
.parcours-demo-libelle { position: absolute; right: 16%; top: 12%; z-index: 2; font-size: .82rem; font-weight: 600; color: var(--acier); white-space: nowrap; }
@media (max-width: 760px) {
  .parcours-demo { padding: 18px 16px 14px; }
  .parcours-demo-escalier { margin-top: 14px; }
  .parcours-demo-libelle { font-size: .72rem; top: 4% !important; }   /* l'attribut style de la vue fixe 12 % par défaut */
}

/* Mon espace : prochain palier sous « Mon parcours métier » (comble la colonne de gauche) */
.ms-colonne { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ms-colonne > .carte { margin: 0; }
.ms-bas:has(.ms-colonne) { align-items: stretch; }   /* les deux colonnes finissent à la même hauteur */
.ms-colonne > .carte:last-child { flex: 1; }
.ms-bas > .carte { height: 100%; }
.ms-palier-objectif { color: var(--gris); font-size: .9rem; margin: -4px 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-palier-criteres { list-style: none; margin: 0; padding: 0; }
.ms-palier-criteres li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; font-size: .9rem; }
.ms-palier-criteres li + li { border-top: 1px solid #eef1f4; }
.ms-palier-criteres em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--acier); background: var(--acier-clair); border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
.ms-palier-puce { width: 10px; height: 10px; border: 1.5px dashed var(--rouge); border-radius: 3px; transform: translateY(1px); }
.ms-palier-statut { font-size: .76rem; color: var(--gris); white-space: nowrap; }
.ms-palier-pret { display: flex; gap: 10px; align-items: center; margin: 0; color: var(--ok); }
.ms-palier-pret svg { width: 26px; height: 26px; flex: none; }
.ms-palier-ressources { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f4; }
.ms-palier-ressources .surtitre { margin: 0; }
.ms-palier-ressources a { display: flex; gap: 8px; align-items: center; font-size: .88rem; }
.ms-palier-ressources svg { width: 18px; height: 18px; flex: none; }

/* Page d'accueil publique : section « Un parcours qui vous suit » rapprochée de la section inclusion,
   colonnes alignées en haut (l'exemple d'escalier fait face au début de la grille de niveaux) */
.inclusion { padding-bottom: 36px; }
.section.parcours-section { padding-top: 12px; }
.parcours-grille { align-items: start; gap: 56px; }
.parcours-grille > div:first-child { padding-top: 0; }
@media (max-width: 980px) { .parcours-grille { gap: 28px; } }
/* Grille de niveaux sur deux colonnes : même hauteur que l'exemple de parcours + texte d'à côté */
.grille-niveaux-carte { padding: 24px 26px 14px; }
.grille-niveaux-carte .liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.grille-niveaux-carte .liste li.grille-niveau { grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid #eef1f4; font-size: .92rem; line-height: 1.35; }
.grille-niveaux-carte .liste li.grille-niveau:last-child { grid-column: 1 / -1; border-bottom: 0; }   /* N7, sommet de la grille, sur toute la largeur */
.grille-niveaux-carte .liste .sec { font-size: .78rem; line-height: 1.4; display: block; margin-top: 2px; }
@media (max-width: 1100px) { .grille-niveaux-carte .liste { grid-template-columns: minmax(0, 1fr); } }
.pied-version { color: var(--gris-clair); white-space: nowrap; }

/* ==========================================================================
   v25 — Ma carrière : leviers de la grille (sans montants), statuts, parcours nucléaire
   ========================================================================== */
.car-leviers { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: start; }
.car-levier { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 20px 22px 18px; scroll-margin-top: 90px; }
.car-levier::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: #d5d8de; }
.car-levier.ok::before { background: var(--ok); }
.car-levier.possible::before { background: var(--rouge); }
.car-levier header { display: flex; align-items: center; gap: 10px; }
.car-levier header svg { width: 26px; height: 26px; color: var(--rouge); flex: none; }
.car-levier h3 { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--marine); }
.car-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--marine); color: #fff; font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
.car-valeur { margin: 4px 0 0; font-size: 1.25rem; font-weight: 500; color: var(--marine); line-height: 1.3; }
.car-palier { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--acier); background: var(--acier-clair); border-radius: 10px; padding: 2px 9px; vertical-align: 3px; }
.car-levier .sec { font-size: .86rem; color: var(--gris); margin: 0; }
.car-role { margin: 2px 0 0; font-size: .8rem; color: var(--gris-clair); font-style: italic; }
.car-detail { list-style: none; margin: 4px 0 0; padding: 0; }
.car-detail li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 0; border-top: 1px solid #eef1f4; font-size: .88rem; }
.car-detail li span { color: var(--encre); }
.car-detail li b { font-weight: 600; color: var(--marine); text-align: right; }
.car-detail li i { grid-column: 1 / -1; font-style: normal; font-size: .76rem; color: var(--gris); }
.car-detail .v-ok { color: var(--ok); } .car-detail .v-ko { color: var(--acier); }
.car-attente { display: flex; gap: 6px; align-items: center; margin: 0; font-size: .82rem; color: var(--warn); }
.car-attente svg { width: 16px; height: 16px; flex: none; }
.car-pied { margin-top: auto; padding-top: 6px; font-size: .88rem; }
.car-action { margin-top: 6px; border-top: 1px solid #eef1f4; padding-top: 10px; }
.car-action summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--acier); list-style: none; display: flex; align-items: center; gap: 6px; }
.car-action summary::-webkit-details-marker { display: none; }
.car-action summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acier-clair); color: var(--acier); font-weight: 700; }
.car-action[open] summary::before { content: "−"; }
.car-action form { margin-top: 12px; }
.car-action textarea { width: 100%; }
.car-duree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; font-size: .9rem; }
.car-duree label { width: 100%; font-weight: 600; font-size: .85rem; }
.car-duree input { width: 76px; }
.car-choix { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.car-choix label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.car-bandeau { display: flex; gap: 14px; align-items: flex-start; background: var(--acier-clair); border: 1px solid #f1d2d1; border-radius: 12px; padding: 14px 18px; margin: -10px 0 26px; }
.car-bandeau b { display: block; color: var(--marine); }
.car-bandeau .sec { font-size: .86rem; color: var(--gris); }
.car-bandeau-icone svg, .car-bandeau-mini svg { width: 26px; height: 26px; color: var(--rouge); flex: none; }
.car-bandeau-mini { display: flex; gap: 10px; align-items: center; margin: -4px 0 14px; font-size: .9rem; }
/* Parcours nucléaire */
.car-nuc { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 90px; }
.car-nuc.complet { border-color: #cfe3d6; }
.car-nuc-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.car-nuc-tete b { display: block; color: var(--marine); }
.car-nuc-tete .sec { font-size: .84rem; color: var(--gris); }
.car-nuc-icone { width: 52px; height: 52px; border-radius: 50%; background: var(--marine); color: #fff; display: grid; place-items: center; }
.car-nuc-icone svg { width: 30px; height: 30px; }
.car-nuc-compte { font-size: 2rem; font-weight: 300; color: var(--marine); }
.car-nuc-compte small { font-size: 1rem; color: var(--gris); }
.car-nuc-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.car-nuc-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-top: 1px solid #eef1f4; }
.car-nuc-etat svg { width: 24px; height: 24px; color: var(--gris-clair); }
.car-nuc-liste li.ok .car-nuc-etat svg { color: var(--ok); }
.car-nuc-liste li.attente .car-nuc-etat svg { color: var(--warn); }
.car-nuc-liste li.ko .car-nuc-etat svg { color: var(--ko); }
.car-nuc-txt { display: flex; flex-direction: column; min-width: 0; }
.car-nuc-txt b { font-weight: 600; font-size: .9rem; color: var(--encre); }
.car-nuc-txt .sec { font-size: .76rem; color: var(--gris); }
.car-nuc-badge { font-size: .72rem; font-weight: 600; border-radius: 10px; padding: 2px 9px; background: #eef0f3; color: var(--gris); white-space: nowrap; }
.car-nuc-liste li.ok .car-nuc-badge { background: var(--ok-fond); color: var(--ok); }
.car-nuc-liste li.attente .car-nuc-badge { background: var(--warn-fond); color: var(--warn); }
.car-nuc-liste li.ko .car-nuc-badge { background: var(--ko-fond); color: var(--ko); }
.car-nuc-lien { grid-column: 2 / -1; font-size: .8rem; font-weight: 600; }
/* Tuiles « Faire reconnaître mon parcours » (Mon espace) */
.car-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.car-tuile { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; color: var(--encre); text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.car-tuile:hover { box-shadow: 0 6px 18px rgba(31, 34, 38, .08); border-color: #d5d8de; }
.car-tuile-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--acier-clair); color: var(--rouge); display: grid; place-items: center; }
.car-tuile-ico svg { width: 24px; height: 24px; }
.car-tuile.ok .car-tuile-ico { background: var(--ok-fond); color: var(--ok); }
.car-tuile-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.car-tuile-corps b { font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--marine); }
.car-tuile-etat { font-size: .84rem; font-weight: 600; color: var(--acier); }
.car-tuile.ok .car-tuile-etat { color: var(--ok); }
.car-tuile .sec { font-size: .78rem; color: var(--gris); }
@media (max-width: 1100px) { .car-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .car-tuiles, .car-nuc-liste { grid-template-columns: minmax(0, 1fr); }
  .car-nuc-tete { grid-template-columns: auto minmax(0, 1fr); }
  .car-nuc-compte { grid-column: 1 / -1; }
  .car-leviers { grid-template-columns: minmax(0, 1fr); }
}
/* Équipe : Statuts & carrière */
.onglets-ancres { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -8px 0 18px; font-size: .9rem; }
.st-demandes { display: flex; flex-direction: column; gap: 14px; }
.st-demande { border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; }
.st-demande-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.st-demande-objet { margin: 8px 0 0; font-size: .92rem; }
.st-motif { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--trait); background: #fafbfc; font-size: .88rem; color: var(--gris); }
.st-decision { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.st-decision input[type=text] { flex: 1; min-width: 220px; }
.st-mois { display: flex; gap: 6px; align-items: center; font-size: .86rem; }
.st-mois input { width: 84px; }
.st-sous-titre { font-size: .95rem; margin: 18px 0 8px; }
.st-form-ligne { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.st-form-ligne .champ { margin: 0; min-width: 170px; flex: 1; }
.st-form-ligne .btn { margin-bottom: 2px; }
.st-nuc th, .st-nuc td.st-nuc-etat { text-align: center; }
.st-nuc-etat { font-weight: 700; }
.st-nuc-etat.ok { color: var(--ok); } .st-nuc-etat.attente { color: var(--warn); } .st-nuc-etat.expire { color: var(--ko); } .st-nuc-etat.manquant { color: var(--gris-clair); }
.st-legende { margin: 8px 0 0; }
.st-prerequis { margin-top: 16px; border-top: 1px solid var(--trait); padding-top: 12px; }
.st-prerequis summary { cursor: pointer; font-weight: 600; color: var(--acier); }
.st-prerequis form { margin-top: 12px; }
.st-prerequis input[type=text] { width: 100%; }
/* v26 : neuf entrées dans le menu du collaborateur (onglet Expertise) — on resserre avant le passage au menu mobile */
@media (max-width: 1180px) and (min-width: 981px) { .entete-deux-niveaux .entete-nav .nav a { padding-left: 7px; padding-right: 7px; font-size: .74rem; letter-spacing: .03em; } }
/* Sous-menu de l'équipe : sur ordinateur, il passe à la ligne plutôt que de masquer les derniers liens (Journal, Vue candidat) */
@media (min-width: 761px) { .sous-nav .entete-inner { flex-wrap: wrap; overflow-x: visible; row-gap: 0; } .sous-nav a, .sous-nav-bouton { padding-left: 11px; padding-right: 11px; } }
/* Une colonne de grille ne s'élargit pas au-delà de l'écran à cause d'un tableau (le tableau défile dans son cadre) */
.grille > * { min-width: 0; }
pre.code { max-width: 100%; overflow-x: auto; }
/* v27 : insigne « intervenant nucléaire » (trèfle, READY) et page dédiée */
.ms-titre-ligne { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-bottom: .15rem; }
.ms-titre-ligne h1 { margin: 0; }
.insigne-nuc { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gris); line-height: 1.15; }
.insigne-nuc svg { display: block; flex: none; transition: transform .15s ease; }
.insigne-nuc svg text { font-family: inherit; }
a.insigne-nuc:hover svg { transform: rotate(-6deg) scale(1.04); }
a.insigne-nuc:hover { text-decoration: none; }
.insigne-nuc-moyen svg { width: 64px; height: 64px; }
.insigne-nuc-grand svg { width: 96px; height: 96px; }
.insigne-nuc-mini svg { width: 26px; height: 26px; }
.insigne-nuc-mini { vertical-align: middle; margin-right: 6px; }
.insigne-nuc-leg { display: flex; flex-direction: column; }
.insigne-nuc-leg b { font-size: 1.05rem; font-weight: 600; color: var(--marine); }
.insigne-nuc-leg b small { font-size: .8rem; color: var(--gris); font-weight: 400; }
.insigne-nuc-leg span { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.insigne-nuc.pret .insigne-nuc-leg b { color: var(--ok); }
.insigne-nuc.pret svg { filter: drop-shadow(0 2px 6px rgba(46, 125, 79, .3)); }
.nuc-bloc .carte-titre { margin-bottom: 4px; }
.nuc-intro { margin: 0 0 6px; }
.car-nuc-liste.nuc-liste { grid-template-columns: minmax(0, 1fr); }
.st-nuc-avancement { white-space: nowrap; }
@media (max-width: 760px) { .insigne-nuc-moyen svg { width: 54px; height: 54px; } .insigne-nuc-grand svg { width: 76px; height: 76px; } }
/* Insigne nucléaire en tête des repères de « Mon espace », à gauche du niveau */
.ms-reperes li.ms-repere-insigne { border-left: 0; padding-left: 0; min-width: 0; display: flex; align-items: center; }
.ms-repere-insigne .insigne-nuc { gap: 8px; }
.ms-repere-insigne .insigne-nuc svg { width: 54px; height: 54px; }
.ms-repere-insigne .insigne-nuc-leg b { font-size: 1.55rem; font-weight: 400; line-height: 1.15; }
.ms-repere-insigne .insigne-nuc-leg b small { font-size: .95rem; }
.ms-repere-insigne .insigne-nuc-leg span { font-size: .82rem; text-transform: none; letter-spacing: 0; color: var(--gris); }
/* « Faire reconnaître mon parcours » : les cinq leviers de la grille sur une ligne */
.car-tuiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .car-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .car-tuiles { grid-template-columns: minmax(0, 1fr); } }
.insigne-nuc-repere svg { width: 58px; height: 58px; }
.ms-reperes:has(.ms-repere-insigne) { gap: 14px 18px; }
.ms-reperes:has(.ms-repere-insigne) li { min-width: 0; }
/* v29 — charte : plus de pastilles rondes teintées (jaune, rose, vert) derrière les pictogrammes des cartes d'action.
   Pictogramme au trait rouge, libellé en petites capitales, filet rouge à gauche pour ce qui est urgent. */
.ms-etape-icone, .ms-etape.warn .ms-etape-icone, .ms-etape.ko .ms-etape-icone, .ms-etape.decouvrir .ms-etape-icone, .ms-etape-icone.ok,
.car-tuile-ico, .car-tuile.ok .car-tuile-ico { width: 28px; height: 28px; border-radius: 0; background: none; color: var(--rouge); margin-top: 1px; }
.ms-etape-icone svg, .car-tuile-ico svg { width: 26px; height: 26px; }
.ms-etape.decouvrir .ms-etape-icone { color: var(--marine); }
.ms-etape-icone.ok, .car-tuile.ok .car-tuile-ico { color: var(--marine); }
.ms-etape-type, .ms-etape.warn .ms-etape-type { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--gris); }
.ms-etape.ko .ms-etape-type { color: var(--rouge); }
.ms-etape.warn, .ms-etape.ko { border-left: 3px solid var(--rouge); }
/* En-tête de « Mon espace » : insigne + niveau + trois familles de formations, libellés explicites sur deux lignes */
.ms-accueil:has(.ms-repere-insigne) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.ms-reperes:has(.ms-repere-insigne) { display: grid; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(0, 1fr); gap: 14px 16px; }
.ms-reperes:has(.ms-repere-insigne) span { display: block; line-height: 1.3; }
@media (max-width: 760px) { .ms-accueil:has(.ms-repere-insigne) { grid-template-columns: minmax(0, 1fr); } .ms-reperes:has(.ms-repere-insigne) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v31 — avis de fin de QCM */
.avis-qcm { scroll-margin-top: 90px; }
.avis-echelle { border: 0; padding: 0; margin: 0 0 14px; }
.avis-echelle legend { font-size: .86rem; font-weight: 600; color: var(--encre); margin-bottom: 6px; }
.avis-echelle legend .muted { font-weight: 400; }
.avis-echelle > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.avis-echelle label { position: relative; cursor: pointer; }
.avis-echelle input { position: absolute; opacity: 0; inset: 0; }
.avis-echelle label > span { display: block; text-align: center; font-size: .8rem; padding: 8px 4px; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc); color: var(--gris); }
.avis-echelle label:hover > span { border-color: #c9ccd1; color: var(--encre); }
.avis-echelle input:checked + span { border-color: var(--rouge); color: var(--rouge); font-weight: 600; box-shadow: inset 0 -2px 0 var(--rouge); }
.avis-echelle input:focus-visible + span { outline: 2px solid var(--rouge); outline-offset: 2px; }
@media (max-width: 760px) { .avis-echelle > div { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v31 — espace RH */
.rh-perimetre { display: flex; align-items: center; gap: 8px; margin: 0; }
.rh-perimetre label { font-size: .82rem; color: var(--gris); }
.rh-perimetre select { min-width: 220px; }
.rh-kpis { margin-bottom: 20px; }
.rh-kpis .kpi .val small { font-size: 1rem; color: var(--gris); }
.rh-jauge { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: #eef0f3; vertical-align: middle; overflow: hidden; }
.rh-jauge i { display: block; height: 100%; background: var(--rouge); border-radius: 3px; }
.rh-croise td.rh-cellule { min-width: 34px; }
.rh-lecture { font-size: .86rem; color: var(--encre); background: var(--fond); border-left: 3px solid var(--rouge); padding: 8px 12px; margin: 12px 0 4px; }
.rh-sous-titre { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 600; margin: 16px 0 8px; }
.rh-alerte { font-size: .76rem; color: var(--acier); font-weight: 600; }
.rh-commentaires { list-style: none; margin: 0; padding: 0; }
.rh-commentaires li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid #eef1f4; }
.rh-commentaires q { font-size: .88rem; color: var(--encre); }
.rh-liste td { vertical-align: middle; }
.rh-synthese { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rh-synthese > div { border-left: 2px solid var(--rouge); padding-left: 12px; display: flex; flex-direction: column; }
.rh-synthese .lib { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.rh-synthese b { font-size: 1.35rem; font-weight: 400; color: var(--marine); }
.rh-synthese b small { font-size: .85rem; color: var(--gris); }
.rh-synthese .sec { font-size: .78rem; color: var(--gris); }
.rh-synthese-nuc { flex-direction: row !important; align-items: center; gap: 10px; border-left: 0 !important; padding-left: 0 !important; }
.rh-synthese-nuc > span { display: flex; flex-direction: column; }
.rh-statuts { margin: 14px 0 0; }
.rh-themes { list-style: none; margin: 0; padding: 0; }
.rh-themes li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #eef1f4; font-size: .84rem; }
.rh-themes li.ok span:last-child { color: var(--ok); }
.rh-themes li.echu span:last-child { color: var(--acier); }
@media (max-width: 980px) { .rh-synthese { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Pyramide des âges : hommes à gauche, femmes à droite (couleurs vérifiées pour les daltoniens) */
.pyr { display: flex; flex-direction: column; gap: 3px; }
.pyr-legende { display: flex; justify-content: center; gap: 18px; font-size: .78rem; color: var(--gris); margin-bottom: 6px; }
.pyr-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pyr-legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pyr-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 0; }
.pyr-cote { display: flex; align-items: center; gap: 6px; height: 18px; }
.pyr-cote.gauche { justify-content: flex-end; }
.pyr-cote b { font-size: .74rem; font-weight: 500; color: var(--gris); min-width: 14px; text-align: center; }
.pyr-barre { display: block; height: 14px; }
.pyr-cote.gauche .pyr-barre { border-radius: 4px 0 0 4px; }
.pyr-cote.droite .pyr-barre { border-radius: 0 4px 4px 0; }
.pyr-h { background: #2f6f9f; }
.pyr-f { background: #d6262e; }
.pyr-lib { text-align: center; font-size: .74rem; color: var(--gris); }