/* ═══════════════════════════════════════════════════════════════
   DFT-OPS v8 — TERMINAL.CSS
   Charte du terminal opérateur.

   ACCESSIBILITÉ — trois réglages indépendants, combinables :
     data-affichage = terminal | clair | contraste
     data-couleurs  = standard | daltonien
     data-texte     = normal   | grand | max
     data-police    = normal   | dyslexie

   Règles tenues partout :
   · aucune information portée par la couleur seule — toujours doublée
     d'une icône, d'une forme ou d'un mot ;
   · texte courant à 4.5:1 minimum, 7:1 en mode contraste ;
   · le mode par défaut est déjà lisible, pas un sombre « d'ambiance ».

   Polices système : aucun appel à Google Fonts. Chargement immédiat,
   et plus aucune adresse IP transmise à un tiers.
   ═══════════════════════════════════════════════════════════════ */

/* ── JETONS : terminal (défaut) ─────────────────────────────────
   Fond charbon plutôt que noir : moins de halo sur écran lumineux,
   moins de fatigue. Texte à 12.8:1 sur le fond.                   */
:root {
  --fond:          #12161c;
  --fond-2:        #1a2028;   /* panneaux */
  --fond-3:        #232b35;   /* champs, survol */
  --bord:          #38424f;
  --bord-fort:     #55636f;

  --txt:           #e9e7e1;   /* 12.8:1 sur --fond */
  --txt-doux:      #b3bcc6;   /*  7.4:1 — lisible, jamais décoratif */
  --txt-faible:    #8794a1;   /*  4.6:1 — limite basse, mentions seules */

  --accent:        #e0a830;   /* ambre : 8.9:1 sur --fond */
  --accent-fond:   rgba(224,168,48,.13);
  --accent-bord:   rgba(224,168,48,.45);

  /* Sémantique — voir plus bas pour la variante daltonienne */
  --ok:            #4ec77b;
  --alerte:        #e8a33d;
  --danger:        #ef6b6b;
  --info:          #6fb6ef;

  --rayon:         3px;
  --police:        ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --police-data:   ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --t-base:        15px;
  --t-petit:       13px;
  --t-micro:       11px;
  --t-titre:       19px;

  --focus:         3px solid var(--accent);
}

/* ── Affichage clair ───────────────────────────────────────────── */
:root[data-affichage="clair"] {
  --fond:      #f4f2ec;
  --fond-2:    #ffffff;
  --fond-3:    #e7e4db;
  --bord:      #c3bdb0;
  --bord-fort: #8f8878;

  --txt:        #1a1d22;   /* 15.3:1 */
  --txt-doux:   #454b54;   /*  8.9:1 */
  --txt-faible: #636a74;   /*  5.4:1 */

  --accent:      #8a5d00;  /* ambre assombri : 5.9:1 sur fond clair */
  --accent-fond: rgba(138,93,0,.10);
  --accent-bord: rgba(138,93,0,.42);

  --ok:     #1c7a41;
  --alerte: #8a5300;
  --danger: #b12a2a;
  --info:   #10557f;
}

/* ── Contraste maximal — malvoyance ─────────────────────────────
   Noir et blanc purs, bordures épaisses, aucune transparence.     */
:root[data-affichage="contraste"] {
  --fond:      #000000;
  --fond-2:    #000000;
  --fond-3:    #1c1c1c;
  --bord:      #ffffff;
  --bord-fort: #ffffff;

  --txt:        #ffffff;   /* 21:1 */
  --txt-doux:   #ffffff;
  --txt-faible: #dcdcdc;

  --accent:      #ffd400;  /* 15.9:1 */
  --accent-fond: #000000;
  --accent-bord: #ffd400;

  --ok:     #4dff88;
  --alerte: #ffd400;
  --danger: #ff7a7a;
  --info:   #7cc7ff;

  --rayon: 0;
  --focus: 4px solid #ffd400;
}
:root[data-affichage="contraste"] * {
  text-shadow: none !important;
  box-shadow:  none !important;
}
:root[data-affichage="contraste"] .carte,
:root[data-affichage="contraste"] .btn,
:root[data-affichage="contraste"] .champ { border-width: 2px; }

/* ── Palette daltonienne ────────────────────────────────────────
   Le rouge et le vert deviennent indiscernables pour ~8 % des hommes
   (deutéranopie, protanopie).

   La première version ne touchait QUE --ok, --alerte, --danger et
   --info. Résultat : sur une page ordinaire, basculer en daltonien ne
   changeait rien à l'écran, parce que presque toute l'interface est
   peinte avec --accent. Pire, cet accent ambre est justement la teinte
   qu'un deutéranope confond avec le vert de --ok.

   L'accent bascule donc lui aussi. Les teintes viennent de la palette
   d'Okabe & Ito, conçue pour rester distinguable sous toutes les formes
   de daltonisme.                                                     */
:root[data-couleurs="daltonien"] {
  --accent:      #56b4e9;   /* bleu ciel — 8.6:1 sur --fond */
  --accent-fond: rgba(86,180,233,.14);
  --accent-bord: rgba(86,180,233,.48);
  --focus:       3px solid #56b4e9;

  --ok:     #21c39a;   /* vert bleuté, lu comme distinct du bleu ciel */
  --alerte: #e69f00;   /* orange */
  --danger: #ff7f4d;   /* vermillon éclairci pour tenir 4.5:1 */
  --info:   #cc79a7;   /* rose-violet, hors de l'axe bleu/orange */
}
:root[data-affichage="clair"][data-couleurs="daltonien"] {
  --accent:      #0b5fa5;   /* 6.4:1 sur fond clair */
  --accent-fond: rgba(11,95,165,.10);
  --accent-bord: rgba(11,95,165,.45);
  --focus:       3px solid #0b5fa5;

  --ok:     #006b52;
  --alerte: #7a5200;
  --danger: #a83800;
  --info:   #8a3d68;
}
/* En contraste maxi, l'accent jaune reste le plus lisible qui soit :
   on ne le remplace pas, on ne touche qu'aux couleurs sémantiques. */
:root[data-affichage="contraste"][data-couleurs="daltonien"] {
  --accent:      #ffd400;
  --accent-fond: #000000;
  --accent-bord: #ffd400;
  --focus:       4px solid #ffd400;

  --ok:     #7cd8ff;
  --alerte: #ffd400;
  --danger: #ff9a5c;
  --info:   #ffa8d5;
}

/* ── Lecture dyslexique ─────────────────────────────────────────
   Ce qui aide le plus n'est pas la police mais l'ESPACEMENT : lettres,
   mots et lignes desserrés réduisent l'encombrement visuel, où les
   caractères voisins se gênent les uns les autres.

   On garde donc des polices système larges et sans ambiguïté (Verdana
   et Tahoma distinguent nettement le I, le l et le 1), et on desserre
   tout. Aucune police n'est téléchargée : rien à attendre, et aucune
   adresse transmise à un tiers.                                     */
:root[data-police="dyslexie"] {
  --police:      Verdana, Tahoma, "DejaVu Sans", ui-sans-serif, sans-serif;
  --police-data: "DejaVu Sans Mono", Consolas, ui-monospace, monospace;
}
:root[data-police="dyslexie"] body {
  letter-spacing: .055em;
  word-spacing:   .18em;
  line-height:    1.85;
}
/* L'italique déforme les lettres et gêne davantage qu'il n'accentue ;
   le texte justifié creuse des rivières blanches qui font perdre la ligne. */
:root[data-police="dyslexie"] em,
:root[data-police="dyslexie"] i,
:root[data-police="dyslexie"] cite    { font-style: normal; font-weight: 700; }
:root[data-police="dyslexie"] *       { text-align: left; text-justify: none; }
:root[data-police="dyslexie"] .titre,
:root[data-police="dyslexie"] h1,
:root[data-police="dyslexie"] h2,
:root[data-police="dyslexie"] h3      { text-transform: none; letter-spacing: .03em; }
/* Les blocs de texte suivi restent sous 66 caractères par ligne :
   au-delà, l'œil perd le début de la ligne suivante. */
:root[data-police="dyslexie"] p,
:root[data-police="dyslexie"] li      { max-width: 66ch; }

/* ── Taille de texte ────────────────────────────────────────────
   Agit sur les jetons, donc sur toute l'interface d'un coup.       */
:root[data-texte="grand"] {
  --t-base: 17px; --t-petit: 15px; --t-micro: 13px; --t-titre: 22px;
}
:root[data-texte="max"] {
  --t-base: 20px; --t-petit: 18px; --t-micro: 15px; --t-titre: 26px;
}

/* ── Base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--txt);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.6;
}

/* Le focus clavier doit être VISIBLE : c'est la seule façon de naviguer
   pour qui n'utilise pas de souris. Ne jamais le supprimer. */
:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Respecte le réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Débordement ────────────────────────────────────────────────
   Les intitulés militaires sont longs (COMMANDEMENT, RAVITAILLEMENT)
   et l'interlettrage les allonge encore. En mode A++ ils sortaient de
   leur cadre. On autorise la coupure plutôt que le débordement.      */
h1, h2, h3, .titre, .porte-nom, .btn, .reg-btn, .statut {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Sans min-width:0, un enfant de grille refuse de descendre sous la
   largeur de son contenu — cause la plus fréquente de débordement. */
.carte, .porte { min-width: 0; }
.btn { white-space: normal; text-align: center; justify-content: center; }

/* ── Composants ─────────────────────────────────────────────────── */
.carte {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px 20px;
}

.titre {
  font-size: var(--t-titre);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.sous-titre {
  font-size: var(--t-micro);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--txt-faible);
  margin: 0;
}

.donnee { font-family: var(--police-data); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent;
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  color: var(--txt);
  font-family: inherit;
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-fond); }
.btn.principal { border-color: var(--accent-bord); color: var(--accent); background: var(--accent-fond); }
.btn.principal:hover { background: var(--accent); color: var(--fond); }

.champ {
  width: 100%;
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  color: var(--txt);
  font-family: inherit;
  font-size: var(--t-base);
  padding: 11px 13px;
}
.champ::placeholder { color: var(--txt-faible); }

/* Statut : couleur ET pictogramme ET mot — jamais la couleur seule */
.statut { display: inline-flex; align-items: center; gap: 7px;
          font-size: var(--t-petit); font-weight: 600; }
.statut::before { font-family: var(--police-data); }
.statut.ok      { color: var(--ok); }
.statut.ok::before      { content: "✓"; }
.statut.alerte  { color: var(--alerte); }
.statut.alerte::before  { content: "▲"; }
.statut.danger  { color: var(--danger); }
.statut.danger::before  { content: "✕"; }
.statut.info    { color: var(--info); }
.statut.info::before    { content: "●"; }

/* ── Barre d'outils flottante ───────────────────────────────────
   Ancrée en bas à gauche, elle suit le défilement. Repliée par
   défaut pour ne rien masquer, mais son bouton reste étiqueté :
   qui en a besoin le trouve sans chercher.                        */
.barre-outils {
  position: fixed; left: 12px; bottom: 12px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: calc(100vw - 24px);
}
.barre-boutons { display: flex; gap: 8px; flex-wrap: wrap; }

.outil-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--fond-2);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  color: var(--txt);
  font-family: inherit;
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 15px;
  cursor: pointer;
  /* Cible tactile confortable : 44 px est le minimum recommandé */
  min-height: 44px;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
}
.outil-btn:hover  { border-color: var(--accent); color: var(--accent); }
.outil-btn.actif  { background: var(--accent); border-color: var(--accent); color: var(--fond); }

.panneau-reglages {
  background: var(--fond-2);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 6px 26px rgba(0,0,0,.45);
  max-width: calc(100vw - 24px);
  max-height: 62vh; overflow-y: auto;
}
/* Indispensable : une règle `display` d'auteur l'emporte sur le display:none
   que l'attribut `hidden` applique via la feuille du navigateur. Sans cette
   ligne, le panneau reste ouvert en permanence. */
.panneau-reglages[hidden] { display: none; }
.reg-bloc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reg-lib  {
  font-size: var(--t-micro); letter-spacing: 2px; text-transform: uppercase;
  color: var(--txt-faible); margin-right: 2px;
}
.reg-btn {
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  color: var(--txt);            /* plein contraste : ces libellés se lisent */
  font-family: inherit;
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 1px;
  padding: 9px 13px;
  min-height: 40px;             /* confort tactile */
  cursor: pointer;
}
.reg-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Le bouton actif se distingue par le fond ET par aria-pressed,
   annoncé aux lecteurs d'écran. */
.reg-btn.actif { background: var(--accent); border-color: var(--accent); color: var(--fond); }

/* Témoin de couleurs : rend l'effet du mode daltonien visible sur-le-champ,
   et tient lieu de légende des statuts. */
.reg-temoin {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding-left: 14px; border-left: 1px solid var(--bord);
}
.temoin-item {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 1px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .reg-temoin { padding-left: 0; border-left: 0; width: 100%; }
}

/* Lecteurs d'écran seulement */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}