/* ==========================================================================
   SÉCURITÉ — design system « consigne de poste »
   --------------------------------------------------------------------------
   Le contexte d'usage dicte chaque choix, et il est particulier : un agent EN
   SERVICE, souvent la nuit, sur téléphone, parfois avec des gants, avec une
   personne en face de lui et quelques secondes pour savoir ce qu'il a le droit
   de faire. Ce n'est pas une interface de lecture, c'est un panneau de consigne.

   La référence n'est ni l'application ni le site : c'est la SIGNALÉTIQUE. Ce
   qu'on affiche dans un poste de garde, ce qu'on lit sur une porte coupe-feu,
   ce qui doit être compris de loin et sans hésitation.

   Ce qui en découle, et qui n'est pas négociable :

   - ANGLES VIFS. Aucun rayon. Un panneau ne s'arrondit pas, et le coin franc
     donne la fermeté qu'un bord adouci retire.
   - REPÈRES D'ANGLE plutôt que contours complets. Deux traits en L suffisent à
     délimiter un bloc, et laissent respirer là où un cadre enferme.
   - HACHURES pour marquer les seuils. La trame diagonale est le langage du
     balisage : elle dit « zone », sans écrire un mot.
   - AMBRE SIGNALÉTIQUE, la teinte des gilets et des feux. Lisible de nuit
     comme en plein soleil, elle n'agresse pas un œil adapté à l'obscurité.
   - CHARBON PROFOND, jamais blanc : un écran blanc en pleine nuit détruit la
     vision nocturne pendant plusieurs secondes — exactement ce dont on ne peut
     pas se passer quand il faut ensuite regarder autour de soi.
   - GROS, et cibles larges : on tape avec un pouce, parfois ganté.

   Typographie, trois rôles, aucune fioriture :
     Oswald condensé      ce qui se lit d'un coup d'œil, en capitales espacées
     Public Sans          ce qui se lit vraiment, dessiné pour l'administratif
     JetBrains Mono       les références d'articles et les nombres — un
                          « L613-2 » doit se recopier sans une erreur
   ========================================================================== */

:root {
  /* Fonds — charbon très profond. Pas de noir absolu : sur dalle OLED il
     écrase les reliefs et fait « écran éteint ». */
  --fond: #0e1114;
  --fond-2: #151a1f;
  --fond-3: #1d242b;
  --bord: #2a323a;
  --bord-fort: #3f4a55;

  /* Texte */
  --texte: #eef2f6;
  --texte-doux: #a9b4c0;
  --texte-faible: #6d7987;

  /* Accent — ambre signalétique */
  --ambre: #ffb02e;
  --ambre-vif: #ffc457;
  --ambre-sourd: #b8801a;
  --ambre-fond: #2b1f0a;

  /* Sémantique */
  --rouge: #ff5142;
  --rouge-fond: #2d1310;
  --vert: #43c987;
  --vert-fond: #0e2419;
  --bleu: #57a6ff;
  --bleu-fond: #0e1b2b;

  --police-titre: 'Oswald', 'Arial Narrow', sans-serif;
  --police: 'Public Sans', system-ui, sans-serif;
  --police-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Aucun arrondi : c'est le choix le plus structurant de la refonte. Les deux
     variables restent pour les rares cas où un angle vif nuit (pastilles). */
  --rayon: 0px;
  --rayon-s: 0px;

  /* Cible tactile minimale : 52px, au-dessus des 44px habituels — on vise un
     pouce ganté, pas un index posé. */
  --cible: 52px;

  /*
   * DEUX LARGEURS, pas une.
   *
   * La règle des ~75 caractères par ligne vaut pour le TEXTE COURANT : au-delà, l'œil
   * perd le début de la ligne suivante. Elle ne vaut pas pour une grille de cartes, dont
   * chaque élément porte ses propres lignes courtes, ni pour une barre de recherche.
   *
   * Les confondre revenait à brider tout l'écran sur la contrainte de la seule fiche :
   * l'accueil tenait dans 760px au milieu d'un écran de 1440, et l'espace autour ne
   * servait à rien.
   */
  --max-lecture: 760px;
  --max: 1240px;

  /*
   * HAUTEURS DES ÉLÉMENTS COLLÉS EN HAUT.
   *
   * Elles servent deux fois : à dimensionner les barres, et à positionner tout ce qui
   * se cale dessous — la recherche sous le bandeau, le sommaire sous la recherche, et
   * la marge des ancres qui empêche un titre d'atterrir derrière l'ensemble.
   *
   * Ces valeurs étaient recopiées à la main à quatre endroits, et trois d'entre eux
   * étaient devenus faux : la recherche se collait 12px trop haut, donc partiellement
   * cachée derrière le bandeau, et un lien du sommaire déposait le lecteur sur un titre
   * invisible. Un seul endroit où les écrire, et le décalage ne peut plus revenir.
   */
  --h-champ: 64px;
  --h-topbar: calc(var(--cible) + 21px);           /* 2 × 10 de marge intérieure + 1 de bordure */
  --h-recherche: calc(var(--h-champ) + 27px);      /* 14 + 12 de marge + 1 de bordure */
  --h-sommaire: 66px;                              /* lien de 46 + 2 × 10 de marge */
  --sous-barres: calc(var(--h-topbar) + var(--h-recherche));

  /* Hachures de balisage, réutilisées partout où il faut marquer un seuil. */
  --hachures: repeating-linear-gradient(
    135deg,
    var(--ambre-sourd) 0 2px,
    transparent 2px 7px
  );
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Empêche iOS d'agrandir le texte en paysage : sur une fiche, la mise en page
     doit rester celle qu'on a calibrée. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /*
   * ATMOSPHÈRE — c'est elle qui occupe le grand écran, pas le texte.
   * Trois couches, aucune ne gêne la lecture :
   *   1. un halo ambre très dilué en haut, qui pose une source de lumière ;
   *   2. la trame diagonale du balisage, à la limite du perceptible, qui donne
   *      une matière à la surface au lieu d'un aplat mort ;
   *   3. un dégradé de base qui assombrit vers le bas.
   */
  min-height: 100vh;
}

/*
 * L'ATMOSPHÈRE EST POSÉE SUR UNE COUCHE À PART, ET C'EST UNE QUESTION DE FLUIDITÉ.
 *
 * Elle était portée par `body` avec `background-attachment: fixed`. Cette propriété
 * demande au navigateur de garder le fond immobile pendant que le contenu défile : il
 * doit donc REPEINDRE le fond à chaque image du défilement, et sur un téléphone cela
 * suffit à faire perdre des images par seconde. C'est l'une des causes les plus connues
 * de défilement saccadé, au point que Safari iOS l'ignore parfois pour s'en protéger.
 *
 * Un élément `position: fixed` derrière le contenu obtient le même résultat visuel sans
 * le coût : le compositeur le garde immobile comme une couche à part, sans rien repeindre.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fond);
  background-image:
    radial-gradient(ellipse 130% 55% at 50% -12%, rgba(255, 176, 46, .085), transparent 72%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #131820 0%, var(--fond) 42%);
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}

a { color: var(--ambre); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 96px;
}

/* --- Bandeau -------------------------------------------------------------
   Une plaque, pas une barre de navigation : le filet ambre du bas la termine
   franchement, comme le bord d'un panneau vissé. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Fond quasi opaque plutôt que `backdrop-filter: blur()` : le flou d'arrière-plan
     est recalculé à chaque image du défilement, pour un effet à peine perceptible sur
     un fond sombre uni. Le coût était réel, le gain visuel non. */
  background: rgba(14, 17, 20, .985);
  border-bottom: 1px solid var(--bord);
}
/* Filet ambre continu : la signature du bandeau, et la limite haute de la page. */
.topbar::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--ambre) 0, var(--ambre-sourd) 22%, transparent 60%);
}
.topbar-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--cible);
}
.marque {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
}
/* Repère d'angle : le coin d'un panneau, le motif qui revient sur tous les blocs. */
.marque::before {
  content: '';
  width: 14px;
  height: 14px;
  border-left: 3px solid var(--ambre);
  border-top: 3px solid var(--ambre);
}
.marque:hover::before { border-color: var(--ambre-vif); }
.topbar .droite { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  font-family: var(--police-titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-height: var(--cible);
  padding: 0 20px;
  border-radius: 0;
  border: 1px solid var(--bord-fort);
  background: var(--fond-3);
  color: var(--texte);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { background: #262f38; border-color: var(--ambre-sourd); }
.btn:active { background: var(--fond-2); }
.btn:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.btn.principal {
  background: var(--ambre);
  border-color: var(--ambre);
  color: #170e00;
  font-weight: 700;
}
.btn.principal:hover { background: var(--ambre-vif); border-color: var(--ambre-vif); }
.btn.discret {
  background: transparent;
  border-color: transparent;
  color: var(--texte-doux);
  padding: 0 12px;
  letter-spacing: .06em;
}
.btn.discret:hover { color: var(--ambre); background: transparent; border-color: var(--bord); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Champs --------------------------------------------------------------- */
.champ {
  width: 100%;
  min-height: var(--cible);
  padding: 12px 16px;
  font-family: var(--police);
  font-size: 17px;
  color: var(--texte);
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 0;
}
.champ::placeholder { color: var(--texte-faible); }
.champ:focus {
  outline: none;
  border-color: var(--ambre);
  box-shadow: inset 0 0 0 1px var(--ambre);
}
label {
  display: block;
  font-family: var(--police-titre);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin: 0 0 7px;
}
.groupe { margin-bottom: 20px; }
.aide { font-size: 14px; color: var(--texte-faible); margin: 7px 0 0; }

/* --- Blocs ---------------------------------------------------------------
   Le bloc de base porte les repères d'angle : deux traits en L en haut à
   gauche et en bas à droite. Ils délimitent sans enfermer, et c'est ce motif
   qui donne son unité à l'ensemble du site. */
.carte {
  position: relative;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  padding: 20px;
}
.carte::before,
.carte::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.carte::before { top: -1px; left: -1px; border-top: 2px solid var(--ambre-sourd); border-left: 2px solid var(--ambre-sourd); }
.carte::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--ambre-sourd); border-right: 2px solid var(--ambre-sourd); }

/* Encadrés d'alerte : la barre latérale épaisse se repère avant même la
   lecture — c'est ce qui fait qu'on ne « saute » pas l'avertissement. */
.alerte {
  border: 1px solid var(--bord);
  border-left: 5px solid var(--texte-faible);
  padding: 15px 17px;
  margin: 18px 0;
  font-size: 16px;
}
.alerte .titre {
  font-family: var(--police-titre);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 7px;
}
.alerte.danger { background: var(--rouge-fond); border-color: #4a1f19; border-left-color: var(--rouge); }
.alerte.danger .titre { color: var(--rouge); }
.alerte.attention { background: var(--ambre-fond); border-color: #4a3510; border-left-color: var(--ambre); }
.alerte.attention .titre { color: var(--ambre); }
.alerte.info { background: var(--bleu-fond); border-color: #1b3250; border-left-color: var(--bleu); }
.alerte.info .titre { color: var(--bleu); }
.alerte.ok { background: var(--vert-fond); border-color: #16402c; border-left-color: var(--vert); }
.alerte.ok .titre { color: var(--vert); }

/* --- Badges --------------------------------------------------------------
   Étiquette de signalisation : pas de pastille arrondie, un rectangle net avec
   un filet de couleur à gauche. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--police-titre);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border: 1px solid;
  border-left-width: 3px;
  white-space: nowrap;
  line-height: 1.4;
}
.badge.haute { color: var(--rouge); border-color: #4a1f19; border-left-color: var(--rouge); background: var(--rouge-fond); }
.badge.moyenne { color: var(--ambre); border-color: #4a3510; border-left-color: var(--ambre); background: var(--ambre-fond); }
.badge.basse { color: var(--texte-doux); border-color: var(--bord); border-left-color: var(--bord-fort); background: var(--fond-3); }
.badge.domaine { color: var(--bleu); border-color: #1b3250; border-left-color: var(--bleu); background: var(--bleu-fond); }

/* --- Divers --------------------------------------------------------------- */
.mono { font-family: var(--police-mono); font-size: .93em; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ambre); color: #170e00; padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Messages éphémères */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--fond-3);
  border: 1px solid var(--bord-fort);
  border-left: 5px solid var(--ambre);
  padding: 15px 19px;
  max-width: min(92vw, 460px);
  animation: monte .18s ease-out;
}
.toast.erreur { border-left-color: var(--rouge); }
@keyframes monte { from { opacity: 0; transform: translate(-50%, 10px); } }

/* Un agent peut avoir désactivé les animations, ou en avoir besoin. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}