/* ==========================================================================
   base.css — charte, coquille, pastille d'etat, vue de la file
   ==========================================================================
   Charte imposee par la Directive §12 :
       Bleu Nuit #0F1B2D · Ivoire #F3EFE7 · Gris Pierre #7C8792
       Confirme #0F9F70 · Attention #D78A00
   AUCUN ROUGE, y compris pour les alertes : l'ambre les porte.

   Aucune ressource distante : pas une police, pas une icone, pas une image.
   Le fichier s'ouvre sans reseau parce qu'il n'en demande aucun.

   Aucun `content:` porteur de texte : une chaine lue par un humain vient
   de js/i18n.js, jamais d'une feuille de style.

   Aucune animation permanente, aucun `infinite` : batterie faible.

   --- Densite, 2026-08-28 ------------------------------------------------
   « Tout est beaucoup trop gros, on ne voit presque rien. » Ce qui maigrit :
   marges, interlignes, textes secondaires, en-tetes, bandeaux. Ce qui ne
   maigrit PAS : var(--cible). Une cible tactile reste a 64 px, c'est la
   contrainte des gants et elle ne se negocie pas contre de la densite.
   ========================================================================== */

:root {
  --nuit: #0F1B2D;
  --ivoire: #F3EFE7;
  --ivoire-vif: #FFFEFB;
  --pierre: #7C8792;
  --brume: #E8EDF1;
  --vert: #0F9F70;
  --ambre: #D78A00;
  --ambre-fond: #FBF3E2;
  --ambre-texte: #6B4700;

  --cible: 64px;      /* jamais moins : on travaille avec des gants */
  --r: 12px;
  --bas: env(safe-area-inset-bottom, 0px);
  --haut: env(safe-area-inset-top, 0px);
  --trait: 2px;
  --ecart: 4px;       /* l'ecart entre deux cibles, resserre sans les toucher */
}

/* Plein soleil : contraste maximal, aplats purs, traits epaissis. */
body.soleil {
  --nuit: #000000;
  --ivoire: #FFFFFF;
  --ivoire-vif: #FFFFFF;
  --pierre: #000000;
  --brume: #000000;
  --vert: #005C33;
  --ambre: #7A4E00;
  --ambre-fond: #FFFFFF;
  --ambre-texte: #000000;
  --trait: 3px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ivoire);
  color: var(--nuit);
  font: 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  display: flex; flex-direction: column;
  /* Pas de selection accidentelle avec un gant qui traine. */
  user-select: none; -webkit-user-select: none;
}

button { font: inherit; color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- barre
   Un quart de l'ecran partait en bandeau d'etat et en mention de donnees
   fictives. Les deux tiennent desormais ici, sans une ligne de plus que
   la hauteur du bouton de 64 px qui commandait deja cette barre. */
.barre {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: calc(4px + var(--haut)) 8px 4px;
  background: var(--nuit); color: var(--ivoire);
}
body.soleil .barre { color: #FFFFFF; }

.barre-titre { flex: 1; min-width: 0; line-height: 1.2; }
.barre-titre strong { display: block; font-size: 15px; }
.barre-titre span { display: block; font-size: 12px; opacity: .78; }
/* Reduite a une ligne, comme demande. Elle disparaitra quand la couche
   d'acces sera branchee — pas avant : une donnee fictive non signalee
   est une donnee fausse. */
.barre-titre .mention {
  font-size: 10px; letter-spacing: .4px; text-transform: uppercase;
  opacity: .62;
}
body.soleil .barre-titre span, body.soleil .barre-titre .mention { opacity: 1; }

/* ================================================ pastille de mode degrade
   Le §15 impose que le mode degrade soit ENONCE avant le resultat. Il l'est
   toujours : la pastille est le premier element de la page, son libelle
   accessible porte l'etat complet, et un passage en mode degrade declenche
   une annonce. Ce qui a disparu, c'est le quart d'ecran permanent, pas
   l'information.

   COULEUR ET FORME, jamais la couleur seule : disque vert en ligne,
   losange ambre des que quelque chose est degrade. Au soleil, ou en
   vision des couleurs reduite, la forme suffit. */
.etat {
  width: var(--cible); height: var(--cible); flex: none;
  display: grid; place-items: center; gap: 3px;
  border: var(--trait) solid rgba(255,255,255,.35);
  background: transparent; border-radius: 10px;
}
body.soleil .etat { border-color: #FFFFFF; }

.pastille {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vert);
  border: 2px solid #FFFFFF;
}
.etat.hors-ligne .pastille, .etat.alerte .pastille {
  background: var(--ambre);
  border-radius: 3px;
  transform: rotate(45deg);   /* la forme change, pas seulement la teinte */
}
/* Plein soleil : le fond de barre est noir et `--vert` / `--ambre`
   s'assombrissent. La pastille garde un contour blanc epais pour ne pas se
   fondre dedans — le defaut noir-sur-noir de l'ancienne banniere ne doit
   pas revenir par la fenetre. */
body.soleil .pastille { border-width: 3px; border-color: #FFFFFF; }

.etat-compte {
  font-size: 11px; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ivoire);
}
body.soleil .etat-compte { color: #FFFFFF; }

/* NOM DISTINCT du mode : `body` porte la classe `soleil`, et un selecteur
   nu `.soleil` le capturait aussi — le body passait a 64x64 des le premier
   appui, et la preference etant persistee, l'ecran rouvrait casse. */
.bouton-soleil {
  width: var(--cible); height: var(--cible); flex: none;
  border: var(--trait) solid rgba(255,255,255,.35);
  background: transparent; border-radius: 10px; font-size: 24px;
}
.bouton-soleil[aria-pressed="true"] { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }

/* ------------------------------------------------------------- onglets
   Une seule barre. Saisie et File restent le groupe Intervention : il vit
   dans le libelle de la barre (aria-label), pas dans un etage de plus. */
.onglets {
  flex: none; display: flex; background: var(--ivoire);
  border-bottom: var(--trait) solid var(--brume);
}

.onglet {
  flex: 1; min-height: var(--cible);
  border: 0; background: transparent;
  font-size: 15px; font-weight: 650;
  color: var(--pierre);
  border-bottom: 4px solid transparent;
}
.onglet[aria-selected="true"] {
  color: var(--nuit); border-bottom-color: var(--nuit);
}

/* -------------------------------------------------------------- vues */
.vue { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.ecran {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 8px 0;
}

/* ==================================================== vue de la file */
.note-provisoire, .note {
  margin: 0 0 10px; font-size: 13px; line-height: 1.35;
  color: var(--pierre);
}
body.soleil .note-provisoire, body.soleil .note { color: #000; }

.file-vide { font-size: 15px; color: var(--pierre); padding: 24px 4px; }

.ligne-file {
  position: relative;
  padding: 8px 80px 8px 10px;
  margin-bottom: 6px;
  background: var(--ivoire-vif);
  border: var(--trait) solid var(--brume);
  border-left: 6px solid var(--ambre);
  border-radius: var(--r);
}
.ligne-file.etat-sync { border-left-color: var(--vert); }

.ligne-haut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* La reference provisoire ne doit JAMAIS avoir l'air d'un numero definitif :
   trait interrompu, casse machine, marque « provisoire » collee a cote. */
.ref-provisoire {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .5px;
  padding: 1px 7px;
  border: 2px dashed var(--ambre);
  border-radius: 8px;
  color: var(--ambre-texte);
}
.marque-provisoire {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ambre-texte); font-weight: 700;
}

.chip-etat {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: var(--ambre-fond); color: var(--ambre-texte);
  border: 2px solid var(--ambre);
}
.etat-sync .chip-etat { background: #E6F5EE; color: #0A5B41; border-color: var(--vert); }
body.soleil .etat-sync .chip-etat { background: #FFF; color: #000; border-color: #000; }

.ligne-corps { margin: 6px 0 2px; font-size: 15px; font-weight: 600; }
.ligne-bas { margin: 0; font-size: 11px; color: var(--pierre); }
body.soleil .ligne-bas { color: #000; }

.supprimer {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: var(--cible); height: var(--cible);
  border: var(--trait) solid var(--brume); border-radius: 12px;
  background: var(--ivoire); font-size: 26px; line-height: 1;
}

.bloc-demo {
  margin-top: 18px; padding: 10px;
  border: var(--trait) dashed var(--pierre); border-radius: var(--r);
}
.secondaire {
  width: 100%; min-height: var(--cible);
  border: var(--trait) solid var(--nuit); border-radius: var(--r);
  background: var(--ivoire); font-size: 16px; font-weight: 650;
}

/* ======================================================== coquille IA */
.coquille { padding: 6px 2px 20px; }
.coquille h2 { font-size: 19px; margin: 8px 0 8px; }
.coquille p { font-size: 15px; line-height: 1.45; margin: 0 0 10px; }

/* ============================================================ annonce
   Aucun retour uniquement sonore : c'est visuel, double d'une vibration.
   Transition breve et ponctuelle, jamais une animation qui tourne.
   C'est aussi ici que le detail du mode degrade est ENONCE, maintenant
   que la banniere permanente a laisse la place a une pastille. */
.annonce {
  position: fixed; left: 50%; bottom: calc(92px + var(--bas));
  transform: translateX(-50%) translateY(180%);
  max-width: 92vw; padding: 12px 16px;
  background: var(--nuit); color: var(--ivoire);
  border-radius: var(--r); font-size: 15px; font-weight: 600;
  text-align: center; line-height: 1.35;
  transition: transform .24s cubic-bezier(.2,.9,.3,1);
  z-index: 40;
}
.annonce.visible { transform: translateX(-50%) translateY(0); visibility: visible; }
/* Hors annonce, l'element ne doit meme pas affleurer au bas de l'ecran. */
.annonce:not(.visible) { visibility: hidden; }
.annonce.insistant {
  background: var(--ambre); color: #201400;
  border: 3px solid var(--ambre-texte);
}
body.soleil .annonce { background: #000; color: #FFF; border: 2px solid #FFF; }
body.soleil .annonce.insistant { background: #FFF; color: #000; border: 3px solid #000; }

@media (prefers-reduced-motion: reduce) {
  .annonce { transition: none; }
}