/* SANEX Suite — compléments du système de design de v2 (sanex.css, CHANGE-025).
 * Ce que v2 obtenait par des classes Tailwind ou des styles en ligne (interdits ici par la CSP `style-src 'self'`)
 * est rendu par des classes nommées, aux MÊMES valeurs que v2 (variables --color-slate-*, --spacing de sanex.css).
 * Couleurs : celles de SANEX Suite (variables --sanex-* remappées dans sanex.css ; institution via /institution/theme.css). */

/* ---------- Titres de page (v2 : « text-2xl font-bold text-slate-900 mb-5 ») ---------- */
.sanex-container > h1, .titre-page { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 700;
  color: var(--color-slate-900); margin: 0 0 1.25rem; }
.sanex-container > h1:has(+ .t-2), .sanex-container > h1:has(+ p.sous-titre) { margin-bottom: .25rem; }
.sanex-container > h1 + .t-2, .sanex-container > h1 + .sous-titre { font-size: var(--text-sm); color: var(--color-slate-500);
  margin: 0 0 1.25rem; }
.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.entete h1 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 700; color: var(--color-slate-900); margin: 0; }
.entete .sous-titre { font-size: var(--text-sm); color: var(--color-slate-500); margin: .25rem 0 0; }
.entete .actions, p.actions, div.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
p.actions, div.actions { margin: 0 0 1.25rem; }
.sanex-container h2:not([class]) { font-size: 1.125rem; font-weight: 600; color: var(--sanex-primary); margin: 1.5rem 0 1rem; }
.sanex-container h3:not([class]) { font-size: 1rem; font-weight: 600; margin: 1rem 0 .75rem; }
.sanex-card > h3:not([class]) { margin-top: 1.25rem; }
.sanex-container p { margin-bottom: .5rem; }
.sanex-container ul:not([class]), .sanex-container ol:not([class]) { padding-left: 1.25rem; margin-bottom: .75rem; }
.sanex-container ul:not([class]) { list-style: disc; }
.sanex-container ol:not([class]) { list-style: decimal; }
.sanex-container details summary { cursor: pointer; color: var(--sanex-primary); font-size: var(--text-sm); margin: .75rem 0 .5rem; }
.sanex-card > :last-child { margin-bottom: 0; }

/* ---------- Texte secondaire, petits textes ---------- */
.sanex-card > p.t-2, .sanex-card > p { font-size: .9375rem; }
.sanex-card > p.t-2 { font-size: .875rem; }
.t-2 { color: var(--color-slate-500); }
small.t-2, .petit { font-size: var(--text-xs); }
.petit { word-break: break-all; }
.erreur { color: var(--sanex-danger); }
.centre { text-align: center; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875em; }
.sanex-container td code, .entete code, .sous-titre code { color: var(--sanex-primary-dark); }

/* ---------- Listes (v2 : bg-white border-slate-200 rounded-lg ; thead slate-50 uppercase xs ; text-sm ; divide-slate-100) ---------- */
table.liste { width: 100%; background: #fff; border: 1px solid var(--color-slate-200); border-radius: var(--radius-lg);
  border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: var(--text-sm);
  line-height: var(--text-sm--line-height); margin-bottom: 1.5rem; }
table.liste thead { background: var(--color-slate-50); }
table.liste th { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: left; color: var(--color-slate-600);
  font-size: var(--text-xs); line-height: var(--text-xs--line-height); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-weight: 600; vertical-align: bottom; }
table.liste tbody th { background: var(--color-slate-50); vertical-align: middle; }
table.liste td { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4); vertical-align: middle; }
table.liste tbody tr + tr > td, table.liste tbody tr + tr > th, table.liste thead + tbody tr:first-child > * { border-top: 1px solid var(--color-slate-100); }
table.liste thead + tbody tr:first-child > * { border-top-color: var(--color-slate-200); }
table.liste td.actions { text-align: right; white-space: nowrap; }
table.liste td.actions > * { margin: .125rem 0 .125rem .25rem; }
table.liste td a:not(.sanex-btn) { color: var(--sanex-primary); font-weight: 500; text-decoration: none; }
table.liste td a:not(.sanex-btn):hover { text-decoration: underline; }
table.liste td.sanex-empty, table.liste td.vide { text-align: center; padding: 2.5rem 1rem; color: var(--sanex-text-muted); font-size: .9375rem; }
table.liste td.vide::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto .625rem; opacity: .45;
  background: url("../img/vide.e07cc1ace0a0.svg") center / contain no-repeat; }
.sanex-card table.liste { margin-bottom: 0; }
.sanex-card table.liste + * { margin-top: 1rem; }
/* Phase E (REV-762) : sur tablette (820 px) comme sur téléphone, un tableau large défile DANS son cadre au lieu de
   faire défiler toute la page ; les colonnes secondaires (« col-secondaire ») sont masquées sous 1100 px. */
.tableau-defilant { max-width: 100%; overflow-x: auto; }
@media (max-width: 1100px) {
  table.liste { display: block; max-width: 100%; overflow-x: auto; }
  .tableau-defilant > table.liste { display: table; }
  .col-secondaire { display: none; }
}
.details-audit { overflow-wrap: anywhere; min-width: 12rem; font-size: var(--text-sm); }
.code-action { display: block; font-family: var(--font-mono, monospace); font-size: .7rem; }

/* ---------- Boutons-liens (v2 : « text-slate-600 underline text-sm ») ---------- */
.lien-action { background: none; border: 0; padding: .25rem .125rem; color: var(--color-slate-600); text-decoration: underline;
  font: inherit; font-size: var(--text-sm); cursor: pointer; }
.lien-action:hover { color: var(--color-slate-900); }
.inline { display: inline; }
form.inline { display: inline-block; }
.sanex-btn[disabled], button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Formulaires ---------- */
/* FINAL-052 : étiquette lue par les lecteurs d'écran, invisible à l'écran (champs de filtre rendus par Django sans label). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0; }
.carte-etroite { max-width: 36rem; }
.sanex-form-group input[type=checkbox], .sanex-form-group input[type=radio] { width: auto; padding: 0; }
.sanex-form-group .case-a-cocher { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.sanex-form-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.sanex-form-group ul label { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin: 0; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--sanex-danger); }
.rangee { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.rangee label { font-size: var(--text-sm); font-weight: 500; color: var(--color-slate-700); }
.rangee input:not([type=checkbox]):not([type=radio]), .rangee select { padding: .375rem .75rem; font-size: .875rem; border: 1px solid var(--sanex-border);
  border-radius: var(--sanex-radius-sm); background: #fff; color: var(--sanex-text-primary); font-family: inherit; line-height: 1.4; }
.rangee input:focus, .rangee select:focus { outline: none; border-color: var(--sanex-primary); box-shadow: 0 0 0 3px var(--sanex-primary-pale); }
.sanex-card > form + form, .sanex-card > p + form { margin-top: .75rem; }

/* ---------- Badges d'état : un ton de v2 par état de Suite ---------- */
.sanex-badge { background: var(--sanex-bg-row-alt); color: var(--sanex-text-muted); }
.badge--brouillon, .badge--attente, .badge--generee, .badge--rattachee, .badge--partielle, .badge--archive,
.badge--absente { background: var(--sanex-bg-row-alt); color: var(--sanex-text-muted); }
.badge--prepare, .badge--traitement, .badge--liee, .badge--remise, .badge--en_traitement, .badge--declaration,
.badge--deliberation { background: var(--sanex-primary-pale); color: var(--sanex-primary-dark); }
.badge--en_cours, .badge--notee, .badge--lue, .badge--a_revoir, .badge--reclamee, .badge--grace, .badge--en_consultation
{ background: #FDEBC8; color: #7C4A03; }
/* FINAL-053 : --sanex-success (#1F7A4D) sur #C6F6D5 ne fait que 4,44:1 ; #17663F donne 5,83:1 (≥ 4,5, WCAG AA).
   La même surcharge couvre `.sanex-badge.is-success` de sanex.css (feuille compilée, jamais éditée). */
.badge--clos, .badge--termine, .badge--validee, .badge--exportee, .badge--active, .badge--traitee, .badge--cloturee,
.sanex-badge.is-success { background: #C6F6D5; color: #17663F; }
.badge--manquante, .badge--erreur, .badge--erreur_technique, .badge--expiree, .badge--invalide, .badge--refusee
{ background: #FED7D7; color: var(--sanex-danger); }

/* ---------- Bandeau de licence (v2 : sanex-licence-banner is-*) ---------- */
.licence--grace, .licence--active { background: var(--sanex-warning); }
.licence--expiree, .licence--invalide, .licence--absente { background: var(--sanex-danger); }
.lien-bandeau { color: #fff; text-decoration: underline; margin-left: .5rem; }

/* ---------- Barre de navigation : éléments que v2 stylait en ligne ---------- */
.sanex-navbar-links form { display: inline-block; flex-shrink: 0; }
.sanex-navbar-links .langue button { text-transform: uppercase; }
.sanex-navbar-links .icone-seule { padding: .25rem .4rem; }
.sanex-navbar-links svg { display: inline-block; vertical-align: middle; }
.sanex-navbar-links .deconnexion button { padding: .25rem .5rem; display: inline-flex; align-items: center; gap: .25rem; }
a.sanex-navbar-user { color: rgba(255, 255, 255, .92); }
a.sanex-navbar-user:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Pages publiques (connexion, accueil) ---------- */
.logo-connexion { height: 88px; width: 88px; display: block; margin: 0 auto .75rem; }
.note-carte { color: var(--sanex-text-muted); font-size: .875rem; margin-bottom: 1rem; }
.petit-centre { text-align: center; font-size: .8125rem; margin: 1rem 0 0; }
.note-connexion { text-align: center; color: var(--sanex-text-muted); font-size: .75rem; margin: 0 0 1rem; }
.langue--publique { text-align: center; margin-top: 1rem; }
.langue--publique button { background: none; border: 0; cursor: pointer; font-size: var(--text-xs); color: var(--color-slate-500);
  text-transform: uppercase; }
.langue--publique button:hover { color: var(--color-slate-900); }
.pied-public { justify-content: center; gap: 1rem; }
.sanex-status-bar a { color: inherit; text-decoration: none; }

/* ---------- Fil d'Ariane de l'administration (v2 : admin/layout) ---------- */
.fil-ariane { font-size: .8rem; color: var(--sanex-text-muted); margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fil-ariane span[aria-hidden] { color: var(--sanex-border); }
.fil-ariane__courant { font-weight: 600; color: var(--sanex-text-primary); }

/* ---------- Tableau de bord (v2 : dashboard.blade.php, styles en ligne rendus en classes) ---------- */
.sous-titre-hero strong { color: var(--sanex-text-primary); }
.choix-examen { display: flex; gap: .5rem; align-items: center; }
.choix-examen select { padding: .375rem .75rem; font-size: .875rem; border: 1px solid var(--sanex-border); border-radius: var(--sanex-radius-sm);
  background: #fff; max-width: 28rem; }
.etape-prochaine { border-left: 6px solid var(--sanex-warning); background: #FFFAF0; margin-bottom: 1.5rem; }
.etape-prochaine.etape--en_cours { border-left-color: var(--sanex-primary-light); background: var(--sanex-primary-pale); }
.etape-prochaine.etape--termine { border-left-color: var(--sanex-success); background: #F0FFF4; }
.etape-prochaine__corps { display: flex; flex-direction: column; gap: 1rem; }
.etape-prochaine__ligne { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.etape-prochaine__numero { flex: 0 0 auto; text-align: center; min-width: 80px; }
.etape-prochaine__numero .rang { font-size: .75rem; color: var(--sanex-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.etape-prochaine__numero .statut { font-size: .875rem; font-weight: 600; margin-top: .25rem; color: var(--sanex-warning); }
/* FINAL-053 : « ○ En cours » en --sanex-primary-light (#2E7A75) sur --sanex-primary-pale (#D6E8E6) = 3,98:1 ;
   --sanex-primary (#1B5E5A) donne 5,92:1. */
.etape--en_cours .etape-prochaine__numero .statut { color: var(--sanex-primary); }
.etape--termine .etape-prochaine__numero .statut { color: var(--sanex-success); }
.etape-prochaine__texte { flex: 1; min-width: 280px; }
.etape-prochaine__texte h2 { color: var(--sanex-primary); font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
.etape-prochaine__texte p { color: var(--sanex-text-primary); margin: 0; line-height: 1.5; }
.etape-prochaine .sanex-btn.is-lg { font-size: 1rem; padding: .75rem 1.5rem; }
.sanex-h2.espace-haut { margin-top: 2rem; }
.section-modules { margin-top: 1rem; color: var(--sanex-text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .8125rem; }
h3.section-modules.espace { margin-top: 1.5rem; }
.progression-globale { margin-top: 1.25rem; }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.grille-3 > .sanex-card { margin-bottom: 0; }
.lignes-mesures { display: flex; flex-direction: column; gap: .625rem; }
.mesure__tete { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--sanex-text-muted); margin-bottom: .25rem; }
.mesure__tete strong { color: var(--sanex-text-primary); }
.mesure__barre { height: 8px; background: var(--sanex-bg-row-alt); border-radius: 999px; overflow: hidden; }
.mesure__barre > div { height: 100%; background: var(--sanex-success); }
.mesure__barre > .t-0-5 { background: var(--sanex-danger); }
.mesure__barre > .t-5-10 { background: var(--sanex-warning); }
.mesure__barre > .t-10-15 { background: var(--sanex-primary-light); }
.vide-carte { text-align: center; color: var(--sanex-text-muted); font-size: .8125rem; margin-top: .75rem; }
.lien-carte { display: block; margin-top: 1rem; font-size: .8125rem; }
.activites { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.activites li { display: flex; gap: .5rem; font-size: .875rem; }
.activites .sanex-code { flex-shrink: 0; font-size: .6875rem; }
.activites .quoi { flex: 1; }
.activites .qui { color: var(--sanex-text-muted); font-size: .75rem; }
.progressions { display: flex; flex-direction: column; gap: 1rem; }
.progression__tete { display: flex; justify-content: space-between; margin-bottom: .375rem; gap: 1rem; }
.progression__tete strong { color: var(--sanex-text-primary); }
.progression__tete .sanex-code { margin-left: .375rem; }
.progression__chiffres { font-size: .8125rem; color: var(--sanex-text-muted); }
.compte-ligne { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; font-size: .9375rem; }
.compte-ligne .discret { color: var(--sanex-text-muted); }
.compte-ligne .discret strong { color: var(--sanex-text-primary); }
.compte-liens { margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; font-size: .875rem; }
.compte-liens .sep { color: var(--sanex-border-strong); }
.sanex-stats.compteurs-detail { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 1rem; }
.compteurs-detail .sanex-stat-box .number { font-size: 1.5rem; }

/* Largeurs des barres (la CSP interdit style="width:…") : 0 à 100 % */
.largeur-0 { width: 0%; }
.largeur-1 { width: 1%; }
.largeur-2 { width: 2%; }
.largeur-3 { width: 3%; }
.largeur-4 { width: 4%; }
.largeur-5 { width: 5%; }
.largeur-6 { width: 6%; }
.largeur-7 { width: 7%; }
.largeur-8 { width: 8%; }
.largeur-9 { width: 9%; }
.largeur-10 { width: 10%; }
.largeur-11 { width: 11%; }
.largeur-12 { width: 12%; }
.largeur-13 { width: 13%; }
.largeur-14 { width: 14%; }
.largeur-15 { width: 15%; }
.largeur-16 { width: 16%; }
.largeur-17 { width: 17%; }
.largeur-18 { width: 18%; }
.largeur-19 { width: 19%; }
.largeur-20 { width: 20%; }
.largeur-21 { width: 21%; }
.largeur-22 { width: 22%; }
.largeur-23 { width: 23%; }
.largeur-24 { width: 24%; }
.largeur-25 { width: 25%; }
.largeur-26 { width: 26%; }
.largeur-27 { width: 27%; }
.largeur-28 { width: 28%; }
.largeur-29 { width: 29%; }
.largeur-30 { width: 30%; }
.largeur-31 { width: 31%; }
.largeur-32 { width: 32%; }
.largeur-33 { width: 33%; }
.largeur-34 { width: 34%; }
.largeur-35 { width: 35%; }
.largeur-36 { width: 36%; }
.largeur-37 { width: 37%; }
.largeur-38 { width: 38%; }
.largeur-39 { width: 39%; }
.largeur-40 { width: 40%; }
.largeur-41 { width: 41%; }
.largeur-42 { width: 42%; }
.largeur-43 { width: 43%; }
.largeur-44 { width: 44%; }
.largeur-45 { width: 45%; }
.largeur-46 { width: 46%; }
.largeur-47 { width: 47%; }
.largeur-48 { width: 48%; }
.largeur-49 { width: 49%; }
.largeur-50 { width: 50%; }
.largeur-51 { width: 51%; }
.largeur-52 { width: 52%; }
.largeur-53 { width: 53%; }
.largeur-54 { width: 54%; }
.largeur-55 { width: 55%; }
.largeur-56 { width: 56%; }
.largeur-57 { width: 57%; }
.largeur-58 { width: 58%; }
.largeur-59 { width: 59%; }
.largeur-60 { width: 60%; }
.largeur-61 { width: 61%; }
.largeur-62 { width: 62%; }
.largeur-63 { width: 63%; }
.largeur-64 { width: 64%; }
.largeur-65 { width: 65%; }
.largeur-66 { width: 66%; }
.largeur-67 { width: 67%; }
.largeur-68 { width: 68%; }
.largeur-69 { width: 69%; }
.largeur-70 { width: 70%; }
.largeur-71 { width: 71%; }
.largeur-72 { width: 72%; }
.largeur-73 { width: 73%; }
.largeur-74 { width: 74%; }
.largeur-75 { width: 75%; }
.largeur-76 { width: 76%; }
.largeur-77 { width: 77%; }
.largeur-78 { width: 78%; }
.largeur-79 { width: 79%; }
.largeur-80 { width: 80%; }
.largeur-81 { width: 81%; }
.largeur-82 { width: 82%; }
.largeur-83 { width: 83%; }
.largeur-84 { width: 84%; }
.largeur-85 { width: 85%; }
.largeur-86 { width: 86%; }
.largeur-87 { width: 87%; }
.largeur-88 { width: 88%; }
.largeur-89 { width: 89%; }
.largeur-90 { width: 90%; }
.largeur-91 { width: 91%; }
.largeur-92 { width: 92%; }
.largeur-93 { width: 93%; }
.largeur-94 { width: 94%; }
.largeur-95 { width: 95%; }
.largeur-96 { width: 96%; }
.largeur-97 { width: 97%; }
.largeur-98 { width: 98%; }
.largeur-99 { width: 99%; }
.largeur-100 { width: 100%; }

/* ---------- Divers propres à Suite ---------- */
.codes { columns: 2; list-style: none; padding: 0; }
.code-unique code { font-size: 1.3rem; padding: .3rem .6rem; background: var(--sanex-bg-row-alt); border-radius: var(--sanex-radius-sm); }
.logo-apercu { vertical-align: middle; }
.distracteur--correct { font-weight: bold; }
/* Indicateurs HTMX (au lieu du <style> que HTMX injecterait, bloqué par la CSP) */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
.entete .sous-titre a { color: var(--sanex-primary); text-decoration: none; }
.entete .sous-titre a:hover { text-decoration: underline; }

/* Menu replié du téléphone : libellés des icônes, éléments alignés à gauche (v2 : refonte mobile 2026-07) */
.libelle-mobile { display: none; }
@media (max-width: 768px) {
  .libelle-mobile { display: inline; margin-left: .5rem; }
  .sanex-navbar-links .logout-text { display: inline; }
  .sanex-navbar-links > form button { text-align: left; display: flex; align-items: center; gap: .5rem; }
  .sanex-navbar-links .icone-seule, .sanex-navbar-links .deconnexion button { padding: .625rem 1rem; width: 100%; }
}
.indicateurs-titre .t-2 { font-size: .875rem; font-weight: 400; }

/* ---------- Revue humaine des cases douteuses (phase A, REV-404) : extrait d'image et mesures ---------- */
.revue-question { border-top: 1px solid var(--color-slate-200); padding: 1rem 0; }
.revue-question:first-of-type { border-top: 0; }
.revue-question-titre { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
.revue-zone { max-width: 100%; overflow-x: auto; margin-bottom: .5rem; }
.revue-zone-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--color-slate-200);
  border-radius: var(--sanex-radius-sm); image-rendering: pixelated; background: #fff; }
.revue-faits { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 .5rem; }
.revue-faits dt { color: var(--sanex-text-muted); }
.revue-faits dd { margin: 0; }
.revue-mesures { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .25rem; }
.revue-mesure { display: flex; flex-direction: column; align-items: center; min-width: 5.5rem; padding: .375rem .5rem;
  border-radius: var(--sanex-radius-sm); background: var(--sanex-bg-row-alt); color: var(--sanex-text-muted); }
.revue-mesure--marquee { background: var(--sanex-primary-pale); color: var(--sanex-primary-dark); }
.revue-mesure--ambigue { background: #FDEBC8; color: #7C4A03; }
.revue-mesure-lettre { font-weight: 700; font-size: 1.1rem; }
.revue-mesure-taux { font-variant-numeric: tabular-nums; font-weight: 600; }
.revue-mesure-detail { font-size: .75rem; text-align: center; }
.raccourcis-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .375rem; }
.sanex-navbar-links kbd { background: rgba(0, 0, 0, .2); padding: .0625rem .25rem; border-radius: 3px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .6875rem; }
.search-item.actif { background: var(--color-slate-100); }
.search-item { display: flex; text-decoration: none; color: inherit; }
.sanex-navbar-links .bouton-aide { padding: .25rem .5rem; min-width: 1.75rem; justify-content: center; }

/* ---------- Caméra guidée des feuilles QCM (phase C, REV-613 ; capture mobile de SANEX Correct) ---------- */
.camera-cadre { position: relative; background: #000; border-radius: var(--sanex-radius-sm); overflow: hidden; margin: .75rem 0; }
.camera-video { width: 100%; display: block; max-height: 75vh; object-fit: contain; }
.camera-guide { position: absolute; inset: 6%; border: 3px dashed rgba(255, 255, 255, .8); border-radius: 4px; pointer-events: none; }
.camera-guide--partiel { border-color: #F5B942; }
.camera-guide--ok { border-style: solid; border-color: #2FB36B; box-shadow: 0 0 0 2px rgba(47, 179, 107, .35) inset; }
.camera-etat { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); max-width: 92%; text-align: center;
  background: rgba(0, 0, 0, .65); color: #fff; padding: .25rem .875rem; border-radius: 999px; font-size: .875rem; font-weight: 500; }
.camera-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0; }
.camera-controle { border-top: 1px solid var(--color-slate-200); margin-top: 1rem; padding-top: 1rem; }
.camera-controle--ko .camera-apercu { outline: 3px solid #B5302E; }
.camera-apercu { display: block; max-width: 100%; height: auto; border: 1px solid var(--color-slate-200); border-radius: var(--sanex-radius-sm); }
.camera-verdicts { list-style: none; padding: 0; margin: .5rem 0; }
.camera-verdict { padding: .125rem 0; }
.camera-verdict--ok { color: #1E7A47; }
.camera-verdict--ko { color: #B5302E; font-weight: 600; }
.camera-panier { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
.camera-vignette { margin: 0; display: flex; flex-direction: column; align-items: center; }
.camera-vignette canvas { border: 1px solid var(--color-slate-200); border-radius: var(--sanex-radius-sm); max-width: 120px; height: auto; }
.camera-vignette-legende { font-size: .75rem; color: var(--sanex-text-muted); }

/* ---------- Recette finale 2026-10-14 (FINAL-018/019/049) : téléphone 390 px et tablette 820 px ---------- */
/* FINAL-019 (REV-762) : sur tablette, la barre complète (onglets + recherche + langue + compte + mot de passe +
   déconnexion) ne tient pas : de 769 à 1080 px (mesuré : la barre du directeur en anglais exige ~1 060 px), même menu replié que le téléphone (règles de sanex.css ≤ 768 px,
   reprises ici à l'identique), au lieu d'une barre coupée qui masquait le compte et « Déconnexion ». */
@media (min-width: 769px) and (max-width: 1080px) {
  .sanex-navbar { position: relative; }
  .sanex-navbar-burger { display: inline-flex; }
  .sanex-navbar-links { background: var(--sanex-primary-dark); max-height: calc(100vh - 56px); box-shadow: var(--sanex-shadow-lg);
    z-index: 50; border-top: 1px solid #ffffff24; flex-direction: column; align-items: stretch; gap: 0; padding: .375rem 0;
    display: none; position: absolute; top: 100%; left: 0; right: 0; overflow: visible auto; }
  .sanex-navbar-links.is-open { display: flex; }
  .sanex-navbar-links > a, .sanex-navbar-links > button, .sanex-navbar-links > span, .sanex-navbar-links > form {
    text-align: left; border-radius: 0; justify-content: flex-start; width: 100%; margin: 0; padding: .625rem 1rem; }
  .sanex-navbar-links > form { padding: 0; }
  .sanex-navbar-links > form button { justify-content: flex-start; width: 100%; padding: .625rem 1rem; text-align: left;
    display: flex; align-items: center; gap: .5rem; }
  .sanex-navbar-links a.active { box-shadow: inset 3px 0 0 var(--sanex-accent); }
  .libelle-mobile { display: inline; margin-left: .5rem; }
  .sanex-navbar-links .logout-text { display: inline; }
  .sanex-navbar-links .icone-seule, .sanex-navbar-links .deconnexion button { padding: .625rem 1rem; width: 100%; }
}
/* FINAL-018 : le sélecteur d'examen du tableau de bord prend la largeur de l'option la plus longue (« QCM du
   responsable [QCMR] · en cours ») : il se réduit à la largeur disponible et passe sous son étiquette sur téléphone. */
.sanex-page-hero { flex-wrap: wrap; }
.sanex-page-hero > * { min-width: 0; max-width: 100%; }
.sanex-page-hero > .choix-examen { flex: 0 1 28rem; }
.choix-examen select { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 28rem; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .sanex-page-hero > .choix-examen { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .choix-examen select { max-width: 100%; }
}
/* Sélecteurs des formulaires en ligne (ex. « Lier l'examen » de la fiche de promotion) : jamais plus larges que l'écran */
.rangee > select, .rangee > input { min-width: 0; max-width: 100%; }
/* FINAL-049 : revue de copie (libellés et valeurs longues) et transfert (identifiant, clé publique) à 390 px */
.revue-faits { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.revue-faits dt, .revue-faits dd { min-width: 0; overflow-wrap: anywhere; }
.code-unique code, .t-2 > code { overflow-wrap: anywhere; word-break: break-all; }
.code-unique code { display: inline-block; max-width: 100%; }
@media (max-width: 500px) {
  .revue-faits { grid-template-columns: minmax(0, 1fr); }
  .revue-faits dd { margin-bottom: .375rem; }
}