/* SANEX-OMR — feuille unique, jetons du système de design AGEXER. */

:root {
  --navy: #1B365D;
  --navy-fonce: #142A49;
  --terracotta: #B14E0F;
  --terracotta-fonce: #96420C;
  --fond: #F7F8FA;
  --surface: #FFFFFF;
  --bordure: #E2E6EC;
  --texte: #1E2A3A;
  --texte-2: #5A6B80;
  --texte-3: #9AA7B8;
  --texte-2-inverse: #C7D2E0;
  --tete-tableau: #F0F3F7;
  --succes: #2E7D4F;  --erreur: #B3261E;  --avert: #B26A00;
  --succes-fond: #E8F2EC;  --erreur-fond: #FBEAE8;  --avert-fond: #FBF1E2;
  --avert-texte: #8A5200;  --succes-texte: #22603C;  --erreur-texte: #8C1D17;
  --ombre-carte: 0 1px 3px rgba(27,54,93,0.08);
  --ombre-modale: 0 12px 32px rgba(27,54,93,0.20);
  --halo-focus: 0 0 0 3px rgba(27,54,93,0.18);
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px;
  --r-carte: 8px; --r-controle: 6px;
  --t-legende: 12px; --t-corps-2: 14px; --t-corps: 16px;
  --t-sous-titre: 18px; --t-titre: 20px; --t-chiffre: 28px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 400 var(--t-corps)/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond); color: var(--texte);
}
h1, h2, h3 { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: var(--navy); }

/* ---- squelette : barre latérale + contenu ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: var(--e2) 0;
}
.sidebar__marque {
  font-size: var(--t-titre); font-weight: 600; padding: var(--e1) var(--e3) var(--e2);
  letter-spacing: 0.5px;
}
.sidebar__marque small { display: block; font-size: var(--t-legende); font-weight: 500; color: var(--texte-2-inverse); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav button {
  background: none; border: none; color: var(--texte-2-inverse);
  text-align: left; padding: 10px var(--e3); font-size: var(--t-corps-2); font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar nav button:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sidebar nav button.actif { color: #fff; border-left-color: var(--terracotta); background: rgba(255,255,255,0.08); }
.sidebar nav button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.45) inset; }
.sidebar__pied { margin-top: auto; padding: var(--e2) var(--e3) 0; font-size: var(--t-legende); color: var(--texte-2-inverse); }
.sidebar__pied strong { color: #fff; display: block; }
.sidebar__pied button { margin-top: var(--e1); }

.contenu { flex: 1; max-width: 1200px; padding: var(--e3); width: 100%; }
.t-ecran { font-size: var(--t-chiffre); font-weight: 600; margin-bottom: var(--e3); }
.t-section { font-size: var(--t-titre); font-weight: 600; }
.t-2 { font-size: var(--t-corps-2); color: var(--texte-2); }
.t-legende { font-size: var(--t-legende); color: var(--texte-2); font-weight: 500; }

/* ---- composants ---- */
.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r-carte); box-shadow: var(--ombre-carte);
  padding: var(--e3); margin-bottom: var(--e3);
}
.carte__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-bottom: var(--e2); flex-wrap: wrap; }

.btn {
  border-radius: var(--r-controle); border: 1px solid transparent;
  padding: 9px 18px; font-weight: 500; font-size: var(--t-corps);
  transition: background 150ms;
}
.btn:focus-visible { outline: none; box-shadow: var(--halo-focus); }
.btn--primaire { background: var(--navy); color: #fff; }
.btn--primaire:hover { background: var(--navy-fonce); }
.btn--accent { background: var(--terracotta); color: #fff; }
.btn--accent:hover { background: var(--terracotta-fonce); }
.btn--secondaire { background: var(--surface); color: var(--navy); border-color: var(--bordure); }
.btn--secondaire:hover { background: var(--tete-tableau); }
.btn--destructif { background: var(--erreur); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--geant { width: 100%; padding: 16px; font-size: var(--t-sous-titre); }

.champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--e2); }
.champ__label { font-size: var(--t-corps-2); font-weight: 500; color: var(--texte-2); }
.champ input, .champ select, .champ textarea {
  font: inherit; padding: 9px 12px; border: 1px solid var(--bordure);
  border-radius: var(--r-controle); background: var(--surface); color: var(--texte);
}
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: none; border-color: var(--navy); box-shadow: var(--halo-focus);
}

.rangee { display: flex; gap: var(--e1); align-items: center; flex-wrap: wrap; }
.rangee--entre { justify-content: space-between; }
.rangee--ecartee { justify-content: space-between; }
.grandit { flex: 1; min-width: 140px; }
.mb-1 { margin-bottom: var(--e1); } .mb-2 { margin-bottom: var(--e2); } .mb-3 { margin-bottom: var(--e3); }
.mt-2 { margin-top: var(--e2); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-legende); font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.badge--gris { background: var(--tete-tableau); color: var(--texte-2); }
.badge--succes { background: var(--succes-fond); color: var(--succes-texte); }
.badge--avert { background: var(--avert-fond); color: var(--avert-texte); }
.badge--erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.badge--navy { background: #E7ECF4; color: var(--navy); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e2); }
.stat { background: var(--tete-tableau); border-radius: var(--r-carte); padding: var(--e2); }
.stat__valeur { font-size: var(--t-chiffre); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__libelle { font-size: var(--t-legende); color: var(--texte-2); font-weight: 500; }
.stat--avert { background: var(--avert-fond); } .stat--avert .stat__valeur { color: var(--avert-texte); }
.stat--erreur { background: var(--erreur-fond); } .stat--erreur .stat__valeur { color: var(--erreur-texte); }
.stat--succes { background: var(--succes-fond); } .stat--succes .stat__valeur { color: var(--succes-texte); }

.table-enveloppe { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-corps-2); }
th { background: var(--tete-tableau); text-align: left; font-weight: 600; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.cliquable { cursor: pointer; } tr.cliquable:hover { background: var(--fond); }

.vide { text-align: center; color: var(--texte-2); padding: var(--e4); }

.toast {
  position: fixed; bottom: var(--e3); right: var(--e3); z-index: 60;
  max-width: 420px; padding: var(--e2); border-radius: var(--r-carte);
  box-shadow: var(--ombre-modale); background: var(--navy); color: #fff; font-size: var(--t-corps-2);
}
.toast--erreur { background: var(--erreur); }
.toast--succes { background: var(--succes); }

/* ---- corrigé : grille de bulles ---- */
.grille-corrige td { padding: 4px 8px; }
.bulle-choix {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bordure);
  background: var(--surface); color: var(--texte-2); font-weight: 600; font-size: var(--t-corps-2);
}
.bulle-choix.coche { background: var(--navy); border-color: var(--navy); color: #fff; }
.bulle-choix:focus-visible { outline: none; box-shadow: var(--halo-focus); }
.grille-corrige .annulee td { opacity: 0.45; text-decoration: line-through; }

/* ---- revue ---- */
.revue-zone { text-align: center; background: var(--tete-tableau); border-radius: var(--r-carte); padding: var(--e2); }
.revue-zone img { max-width: 100%; image-rendering: pixelated; border: 1px solid var(--bordure); background: #fff; }
.mesures { display: flex; gap: var(--e2); justify-content: center; flex-wrap: wrap; }
.mesure { text-align: center; min-width: 52px; }
.mesure__lettre { font-weight: 600; }
.mesure__taux { font-variant-numeric: tabular-nums; font-size: var(--t-corps-2); color: var(--texte-2); }
.mesure--marked .mesure__taux { color: var(--succes-texte); font-weight: 600; }
.mesure--ambiguous .mesure__taux { color: var(--avert-texte); font-weight: 600; }

/* ---- capture mobile ---- */
.capture-cadre { position: relative; background: #000; border-radius: var(--r-carte); overflow: hidden; }
.capture-cadre video { width: 100%; display: block; }
.capture-guide {
  position: absolute; inset: 6%; border: 3px dashed rgba(255,255,255,0.8); border-radius: 4px;
  pointer-events: none;
}
.capture-etat {
  position: absolute; top: var(--e1); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.65); color: #fff; padding: 4px 14px; border-radius: 999px;
  font-size: var(--t-corps-2); font-weight: 500;
}

/* ---- connexion ---- */
.page-connexion {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy); padding: var(--e2);
}
.carte-connexion { width: 100%; max-width: 380px; margin-bottom: 0; }
.carte-connexion .marque { color: var(--navy); font-size: var(--t-chiffre); font-weight: 600; margin-bottom: 4px; }

/* ---- responsive ---- */
.menu-mobile { display: none; }
@media (max-width: 800px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; padding: var(--e1) var(--e2); position: sticky; top: 0; z-index: 40; }
  .sidebar__marque { padding: 0; font-size: var(--t-sous-titre); }
  .sidebar nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); flex-direction: column; padding-bottom: var(--e1);
    box-shadow: var(--ombre-modale);
  }
  .sidebar nav.ouvert { display: flex; }
  .sidebar__pied { display: none; }
  .menu-mobile {
    display: block; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.4);
    color: #fff; border-radius: var(--r-controle); padding: 6px 12px;
  }
  .contenu { padding: var(--e2); }
  .t-ecran { font-size: 22px; }
}

/* ---- avancement d'un lot d'acquisition ---- */
.progression { height: 10px; background: var(--bordure); border-radius: 999px; overflow: hidden; }
.progression__barre { height: 100%; background: var(--navy); border-radius: 999px; transition: width .4s ease; }

/* ---- alertes de copie et motifs de mesure ---- */
.alerte--avert { background: #FFF4E5; color: #6B3A00; border-left-color: var(--terracotta); }
.ml-1 { margin-left: var(--e1); }
.alerte { background: var(--erreur-fond); color: var(--erreur-texte); border-left: 4px solid var(--erreur); padding: var(--e1) var(--e2); border-radius: var(--r-controle); font-size: var(--t-corps-2); }
.mesure__motif { font-size: var(--t-legende); color: var(--avert-texte); font-weight: 600; }

/* ---- dialogues ---- */
.voile { position: fixed; inset: 0; background: rgba(20,30,45,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--e2); }
.dialogue { background: var(--surface); border-radius: var(--r-carte); box-shadow: var(--ombre-modale); padding: var(--e3); width: min(560px, 100%); max-height: 90vh; overflow: auto; }
.dialogue input { width: 100%; }
.champ--erreur { outline: 2px solid var(--erreur); }
/* ---- guidage caméra ---- */
.capture-guide--partiel { border-color: rgba(255,200,80,0.95); }
.capture-guide--ok { border-color: rgba(80,220,120,0.95); border-style: solid; }
button[disabled] { opacity: .5; cursor: default; }