/* =============================================================================
   Bilans de formation — feuille de style du back-office
   Direction visuelle : « bande haute visibilité » (jaune / argent / jaune), papier de main courante,
   typographie condensée de signalétique. Polices auto-hébergées (RGPD : aucun appel à un CDN).
   ============================================================================= */

@font-face { font-family: 'Big Shoulders Display'; font-weight: 600; font-display: swap; src: url('../fonts/big-shoulders-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 800; font-display: swap; src: url('../fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  --papier: #F3F1EC;
  --papier-2: #ECE8E0;
  --blanc: #FFFFFF;
  --encre: #16181D;
  --encre-2: #4A4E57;
  --muet: #5B606A;          /* contraste ≥ 4.5:1 sur --papier */
  --trait: #DDD8CE;
  --jaune: #F2C200;
  --argent: #B9BCC2;
  --rouge: #C3361B;
  --rouge-texte: #A12C15;
  --acquis: #0E5B52;
  --eca: #E09A00;
  --ambre-texte: #7A5600;
  --nuit: #16181D;
  --nuit-2: #1B1E23;
  --nuit-trait: #343842;
  --nuit-muet: #A9ADB5;
  --rayon: 8px;
  --f-titre: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-texte: 'Barlow', 'Segoe UI', sans-serif;
  --f-code: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 15px/1.45 var(--f-texte); }
a { color: var(--encre); }
a:hover { color: var(--rouge); }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 800; line-height: .95; letter-spacing: .2px; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 64px); }
h2 { font-size: 28px; }
.mono { font-family: var(--f-code); }
.muet { color: var(--muet); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Bande haute visibilité ------------------------------------------------ */
.bande { display: flex; flex-direction: column; gap: 3px; }
.bande span { display: block; height: 5px; background: var(--jaune); }
.bande span:nth-child(2) { background: var(--argent); }
.bande--fine span { height: 4px; }

/* ---- Coque du back-office ---------------------------------------------------- */
.coque { display: flex; flex-wrap: wrap; min-height: 100vh; }
.nav { flex: 1 1 232px; max-width: 100%; background: var(--nuit); color: #E9E6DF; display: flex; flex-direction: column; }
.nav__marque { padding: 24px 24px 8px; }
.nav__marque b { display: block; font: 800 30px/1 var(--f-titre); }
.nav__marque small { font: 11px var(--f-code); color: var(--nuit-muet); letter-spacing: 1px; }
.nav__tenant { margin: 16px; padding: 10px 12px; border: 1px solid var(--nuit-trait); border-radius: 6px; }
.nav__tenant small { display: block; font: 11px var(--f-code); color: var(--nuit-muet); }
.nav__liens { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.nav__liens a { color: var(--nuit-muet); text-decoration: none; padding: 11px 12px; border-radius: 6px; }
.nav__liens a:hover { color: #fff; background: #23262d; }
.nav__liens a[aria-current="page"] { color: var(--encre); background: var(--jaune); font-weight: 700; }
.nav__pied { margin-top: auto; padding: 20px 24px; border-top: 1px solid #2A2E36; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.contenu { flex: 999 1 560px; min-width: 0; padding: 28px 40px 56px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 720px) { .contenu { padding: 20px 16px 40px; } }

.entete { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; }
.fil { font: 12px var(--f-code); color: var(--muet); letter-spacing: .5px; text-transform: uppercase; }
.fil a { color: var(--muet); }

/* ---- Cartes, tableaux, indicateurs ------------------------------------------ */
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 20px 22px; }
.carte--nuit { background: var(--nuit); color: #ECEAE4; border: 0; }
.grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.tableau-boite { overflow-x: auto; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; }
table.tableau { border-collapse: collapse; width: 100%; }
.tableau th { text-align: left; font: 600 11px var(--f-code); color: var(--muet); padding: 14px 10px; letter-spacing: .3px; text-transform: uppercase; }
.tableau td { padding: 10px; border-top: 1px solid #ECE8E0; vertical-align: middle; }
.tableau th:first-child, .tableau td:first-child { padding-left: 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 2px solid var(--encre); border-bottom: 1px solid var(--trait); }
.kpi { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 4px; }
.kpi b { font: 800 52px/1 var(--f-titre); }

/* ---- Pastilles d'état -------------------------------------------------------- */
.etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.etat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.etat--ok { color: var(--acquis); }
.etat--alerte { color: var(--rouge-texte); }
.etat--attente { color: var(--ambre-texte); }
.etiquette { font: 600 11px var(--f-code); padding: 3px 7px; border-radius: 4px; background: var(--papier-2); }
.etiquette--jaune { background: var(--jaune); color: var(--encre); }
.etiquette--nuit { background: var(--encre); color: #ECEAE4; }

/* ---- Formulaires -------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.champ small { font-weight: 400; color: var(--muet); }
.champ input, .champ select, .champ textarea {
  font: 400 15px var(--f-texte); min-height: 48px; padding: 0 14px; border: 1px solid var(--encre);
  border-radius: var(--rayon); background: var(--blanc); color: var(--encre); width: 100%;
}
.champ textarea { padding: 12px 14px; min-height: 96px; }
.champ input[aria-invalid="true"] { border: 2px solid var(--rouge); }
.case { display: flex; gap: 10px; align-items: center; }
.case input { width: 20px; height: 20px; margin: 0; accent-color: var(--encre); }
.formulaire { display: flex; flex-direction: column; gap: 18px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  font: 700 15px var(--f-texte); border-radius: var(--rayon); border: 1px solid var(--encre); background: transparent;
  color: var(--encre); text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--papier-2); color: var(--encre); }
.bouton--plein { background: var(--encre); color: var(--jaune); border-color: var(--encre); }
.bouton--plein:hover { background: #000; color: var(--jaune); }
.bouton--jaune { background: var(--jaune); color: var(--encre); border-color: var(--jaune); font-weight: 800; }
.bouton--danger { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.bouton--large { width: 100%; min-height: 54px; font-size: 17px; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.bouton--petit { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* ---- Messages ------------------------------------------------------------------ */
.message { padding: 12px 14px; border-radius: var(--rayon); border: 1px solid; font-size: 14px; }
.message--erreur { border-color: var(--rouge); background: #FBE9E4; color: var(--rouge-texte); }
.message--info { border-color: var(--trait); background: var(--papier-2); color: var(--encre-2); }
.message--succes { border-color: var(--acquis); background: #E3F1EE; color: var(--acquis); }
.bandeau-demo { background: var(--jaune); color: var(--encre); text-align: center; font-weight: 700; padding: 8px 12px; }

/* ---- Pages d'authentification ---------------------------------------------- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth__visuel { flex: 1 1 480px; min-height: 320px; background: var(--nuit); color: #ECEAE4; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
.auth__visuel .bandes-obliques { position: absolute; left: -120px; right: -120px; top: 58%; display: flex; flex-direction: column; gap: 10px; transform: rotate(-12deg); }
.auth__visuel .bandes-obliques span { height: 34px; background: var(--jaune); }
.auth__visuel .bandes-obliques span:nth-child(2) { background: var(--argent); }
.auth__visuel > * { position: relative; }
.auth__slogan { font: 800 clamp(48px, 7vw, 76px)/.88 var(--f-titre); }
.auth__panneau { flex: 1 1 440px; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth__boite { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.code-chiffres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code-unique { font: 800 40px var(--f-titre); letter-spacing: 12px; text-align: center; }
.qr { width: 196px; height: 196px; background: #fff; padding: 10px; border-radius: 8px; }
.qr svg { width: 100%; height: 100%; display: block; }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font: 600 16px var(--f-code); }
.codes-secours li { list-style: none; padding: 8px 10px; background: var(--papier-2); border-radius: 6px; text-align: center; }

/* ---- Onglets, actions de ligne, erreurs de champ ------------------------------ */
.onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--trait); }
.onglets a { padding: 10px 14px; text-decoration: none; color: var(--encre-2); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; }
.onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--jaune); }
.tableau td.actions { display: flex; gap: 14px; align-items: center; justify-content: flex-end; padding-right: 20px; }
.tableau td.actions form { margin: 0; }
.tableau tr.inactif td { color: var(--muet); }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--encre); text-decoration: underline; cursor: pointer; }
.lien:hover { color: var(--rouge); }
.erreur-champ { color: var(--rouge-texte) !important; font-weight: 600 !important; }

/* ---- Recherche, pagination, listes ------------------------------------------- */
.recherche { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--trait); border-radius: 6px; text-decoration: none; background: var(--blanc); }
.pagination a[aria-current="page"] { background: var(--encre); color: var(--jaune); border-color: var(--encre); font-weight: 700; }
.liste-simple { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi span { color: var(--muet); font-size: 13px; }
.champ select { padding: 0 10px; }

/* ---- Éditeur de référentiel ------------------------------------------------- */
.grille-referentiel { display: flex; flex-direction: column; gap: 14px; }
.domaine { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; border-left: 8px solid var(--couleur); padding-left: 14px; }
.domaine p { margin: 4px 0 0; color: var(--muet); font-size: 13px; }
.bloc { border-top: 1px solid var(--trait); padding-top: 12px; }
.bloc h3 { font: 700 16px var(--f-texte); margin: 0 0 8px; }
.competence { margin: 0 0 10px 14px; }
.competence__titre { font-weight: 600; margin: 6px 0; }
.savoirs { list-style: none; margin: 0 0 6px; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.savoirs li { display: flex; gap: 10px; align-items: baseline; }
.bilan { flex: 0 0 18px; height: 14px; border: 1px solid var(--encre); border-radius: 2px; background: var(--blanc); }
.bilan--exigible { background: var(--argent); }
.actions-noeud { display: inline-flex; gap: 10px; margin-left: 10px; font-size: 13px; font-weight: 400; }
.actions-noeud form { display: inline; margin: 0; }
.ajout { display: inline-block; margin: 4px 0 0 14px; font-size: 14px; }
fieldset.champ { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; }
fieldset.champ legend { font-weight: 600; padding: 0 6px; }

/* ---- Sessions et suivi ------------------------------------------------------ */
.actions-session { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
form.en-ligne { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
form.en-ligne input { min-height: 36px; padding: 0 10px; border: 1px solid var(--trait); border-radius: 6px; font: inherit; }
.matrice th, .matrice td { padding: 6px 4px; text-align: center; font: 600 12px var(--f-code); }
.matrice th[scope="row"] { text-align: left; font: 600 13px var(--f-texte); white-space: nowrap; padding-left: 12px; }
.matrice th.exigible { background: var(--argent); color: var(--encre); }
.niv--a { color: var(--acquis); }
.niv--eca { color: var(--ambre-texte); }
.niv--na { color: var(--rouge-texte); }
.niv--ne { color: var(--muet); }
.niv--alerte { background: #FBE9E4; box-shadow: inset 0 0 0 2px var(--rouge); }
.theme { font-size: 12px; text-align: left; min-width: 120px; }
.theme--evalue span { color: var(--acquis); font-weight: 700; }
.theme--force span { color: var(--ambre-texte); font-weight: 700; }
.theme--participe span, .theme--manquant span { color: var(--rouge-texte); font-weight: 700; }
.theme details { margin-top: 6px; }
.theme select, .theme input { min-height: 34px; font-size: 13px; width: 100%; }

/* ---------------------------------------------------------------- Bilans et signatures */
.signature { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); }
.signature__zone { width: 100%; max-width: 800px; aspect-ratio: 8 / 3; background: var(--blanc); border: 2px dashed var(--argent); border-radius: var(--rayon); touch-action: none; cursor: crosshair; }
.texte-libre { white-space: normal; max-width: 75ch; }
.carte h3 { margin: 22px 0 10px; }
.signature__zone { user-select: none; -webkit-user-select: none; }

/* ---------------------------------------------------------------- Archives */
.definitions { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; }
.definitions dt { color: var(--muet); }
.definitions dd { margin: 0; }
.empreinte { word-break: break-all; font-size: 13px; }
.marque__sis { color: var(--rouge); }
.nav .marque__sis, .carte--nuit .marque__sis, .auth__visuel .marque__sis { color: var(--jaune); }
.nav__marque small { font-size: 9px; }
.nav__marque b { display: flex; align-items: center; gap: 8px; }
.marque__symbole { flex: none; }
.marque__ligne { display: inline-flex; align-items: center; gap: 10px; }