/* ═══════════════════════════════════════════════════════════════
   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; }

/* ── Emblème de la division ─────────────────────────────────────
   Fenrir en filigrane, fixé au fond de page : il ne bouge pas au
   défilement et ne gêne aucune lecture.

   Trois précautions :
   · pointer-events:none — le filigrane ne doit jamais intercepter un
     clic destiné à ce qui est au-dessus ;
   · opacité très basse, et encore réduite en mode contraste, où tout
     motif de fond nuit à la lisibilité ;
   · l'image pèse 556 Ko : on la charge UNE fois, en fond de <body>,
     jamais répétée par élément.

   La version d'origine (2048 px, 6,7 Mo) reste dans /fenrir/ pour les
   impressions et les visuels ; elle n'est pas servie aux navigateurs. */
/* z-index NÉGATIF : le filigrane se place derrière tout le contenu sans
   qu'on ait à toucher au positionnement des éléments de la page.

   Pour que ça marche, le fond de couleur est porté par <html> et non
   par <body> : un fond opaque sur <body> masquerait ce qui est derrière
   lui, filigrane compris. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../fenrir/logo-dft-512.png') no-repeat center center;
  background-size: min(62vmin, 560px);
  opacity: .04;
}
:root[data-affichage="clair"] body::before     { opacity: .05; }
/* En contraste maximal, aucun motif de fond : la lisibilité prime. */
:root[data-affichage="contraste"] body::before { display: none; }

/* ⚠ NE PAS remettre de règle du type :
       body > * { position: relative; z-index: 1; }

   C'était la méthode employée pour faire passer le contenu au-dessus du
   filigrane. Elle imposait `position:relative` à TOUT enfant direct de
   <body> — donc écrasait le `position:fixed` de chaque élément flottant
   ajouté par un script : barre d'édition des textes, visionneuse,
   mascotte. Ces éléments retombaient en fin de document, tout en bas de
   la page, et paraissaient « disparus ».

   On excluait alors chaque classe une par une, et le bug revenait au
   composant suivant. La cause est traitée à la racine ci-dessus : le
   filigrane est en z-index -1, derrière le contenu, et plus aucun
   enfant de <body> n'a besoin d'être repositionné. */

/* ── 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; }

/* Le fond de couleur est porté par <html>, pas par <body> : le
   filigrane se place derrière <body> (z-index -1), et un fond opaque
   sur <body> le masquerait entièrement. */
html {
  background: var(--fond);
}

body {
  margin: 0;
  background: transparent;
  color: var(--txt);
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.6;
  /* Toujours au moins la hauteur de l'écran : sur une page courte, le
     fond doit couvrir la fenêtre entière. */
  min-height: 100vh;
}

/* 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); }

/* ══ TÉLÉPHONE ══════════════════════════════════════════════════
   Corrections d'affichage sur petit écran. Elles portent sur des
   comportements par défaut du navigateur qui se voient surtout ici.  */
@media (max-width: 620px) {

  /* La barre porte désormais cinq boutons. À plat, ils débordaient de
     l'écran ; le texte disparaît, les pictogrammes suffisent. */
  .barre-outils  { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .barre-boutons { width: 100%; }
  .outil-btn     { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }

  /* Les <dialog> occupent la largeur utile : centrés avec des marges
     par défaut, ils laissaient deux bandes perdues de chaque côté. */
  dialog { max-width: calc(100vw - 16px) !important; margin: 8px auto; }

  /* Le fond de page passe sous le contenu et se réduit : à 62vmin il
     déborde en hauteur sur un écran étroit. */
  body::before { background-size: 78vmin; }
}

/* ── Débordements horizontaux ───────────────────────────────────
   Une seule ligne trop longue — une adresse, un identifiant, un
   tableau — suffit à faire défiler toute la page de côté. On coupe
   le mal à la racine plutôt que page par page. */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }
pre, table { display: block; max-width: 100%; overflow-x: auto; }

/* Un champ sous 16 px déclenche un zoom automatique sur iOS, et la
   page reste zoomée après la saisie. */
@media (max-width: 820px) {
  input, select, textarea { font-size: max(16px, var(--t-petit)); }
}

.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.

   Gardée pour mémoire : la règle générale ci-dessous la couvre désormais. */
.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;
}


/* ══ L'ATTRIBUT hidden DOIT GAGNER ═══════════════════════════════
   `element.hidden = true` ne masque rien dès qu'une règle d'auteur
   déclare un `display` sur cet élément : la propriété l'emporte sur
   l'attribut, et le navigateur n'en dit rien.

   C'est ce qui laissait TOUTES les tuiles du commandement visibles à
   tout le monde. Le JavaScript les masquait correctement, `.porte-l
   { display:flex }` les rallumait aussitôt, et l'on cherchait l'erreur
   du côté des droits — là où il n'y en avait pas.

   Le défaut est de la pire espèce : rien n'échoue, rien ne s'écrit
   dans la console, et le symptôme désigne un coupable innocent. Une
   règle ciblée existait déjà plus haut pour le panneau des réglages,
   preuve qu'on s'y était déjà brûlé une fois.

   `!important` se justifie ici, et ici seulement : `hidden` est une
   déclaration d'intention, pas une suggestion de mise en page. */
[hidden] { display: none !important; }