/* =====================================================================
   Carburacœur · Régie — feuille de style

   Contraintes du terrain, qui expliquent la plupart des choix :
   plein soleil d'août sur l'esplanade, donc fond clair et encre presque
   noire ; usage au pouce avec des gants ou les mains pleines, donc
   aucune cible tactile sous 48 px ; réseau incertain, donc aucune
   dépendance externe et une police qui ne bloque jamais l'affichage.

   Piège de charte connu : blanc sur le bleu ne donne que 2,4:1. Le bleu
   ne porte donc que des titres et des aplats, jamais du texte courant.
   ===================================================================== */

@font-face {
  font-family: "Mona Sans Expanded";
  src: url("fonts/MonaSansExpanded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --bleu: #34ADE4;
  --bleu-sombre: #1B7FB0;
  --encre: #0C2A3C;
  --encre-douce: #4A6478;
  --fond: #EEF2F5;
  --carte: #FFFFFF;
  --trait: #D6DFE6;

  --info: #1B7FB0;
  --urgent: #C85A00;
  --evacuation: #C1121F;
  --vert: #1B7A4B;

  --r: 14px;
  --ombre: 0 1px 2px rgba(12, 42, 60, .08), 0 8px 24px rgba(12, 42, 60, .06);
  --bandeau-h: 58px;
  --onglets-h: 64px;
  --titre: "Mona Sans Expanded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Mona Sans barre ses zéros et aucune fonction OpenType ne le désactive.
     Les chiffres d'exploitation gardent donc la police système, pour qu'un
     « 0 sur 0 » ne se lise jamais « Ø sur Ø ». */
  --chiffres: var(--texte);
}

* { box-sizing: border-box; }

/* Un display: flex posé par une classe l'emporte sur la règle [hidden]
   de l'agent utilisateur. On rétablit la priorité une fois pour toutes. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

h1, h2, h3 { font-family: var(--titre); letter-spacing: -.015em; margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- bandeau ---------- */

.bandeau {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: var(--bandeau-h);
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  background: var(--encre);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.bandeau__logo { height: 20px; width: auto; filter: brightness(0) invert(1); }
.bandeau__info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.bandeau__info strong { font-family: var(--titre); font-size: 15px; }
.bandeau__info span { font-size: 12px; color: #A8C3D4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau__droite { display: flex; align-items: center; gap: 10px; }
.bandeau time { font-variant-numeric: tabular-nums; font-size: 15px; color: #DCE9F1; }

.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--vert); font-size: 0; flex: none; }
.pastille[data-etat="perdu"] { background: var(--urgent); }
.pastille[data-etat="attente"] { background: #7A93A5; }

.btn-icone {
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.btn-icone:active { background: rgba(255, 255, 255, .22); }

/* ---------- structure ---------- */

.ecran {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
}
body.a-onglets .ecran { padding-bottom: calc(var(--onglets-h) + 24px + env(safe-area-inset-bottom)); }
body.plein .ecran { padding: 0; max-width: none; }

.carte {
  background: var(--carte);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  padding: 16px;
  margin-bottom: 14px;
}
.carte--plat { box-shadow: none; border: 1px solid var(--trait); }

.surtitre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bleu-sombre); margin-bottom: 6px;
}
.titre-ecran { font-size: 27px; line-height: 1.12; margin-bottom: 4px; }
.sous-titre { color: var(--encre-douce); font-size: 15px; margin: 0 0 16px; }

/* ---------- boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px;
  border: 0; border-radius: 12px;
  background: var(--encre); color: #fff;
  font-weight: 650; font-size: 17px; cursor: pointer;
  text-decoration: none; width: 100%;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn--bleu { background: var(--bleu-sombre); }
.btn--vert { background: var(--vert); }
.btn--rouge { background: var(--evacuation); }
.btn--creux { background: transparent; color: var(--encre); border: 1.5px solid var(--trait); }
.btn--petit { min-height: 42px; font-size: 15px; padding: 0 14px; width: auto; }
.rangee-btn { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee-btn .btn { width: auto; flex: 1 1 160px; }

/* ---------- formulaires ---------- */

label.champ { display: block; margin-bottom: 14px; }
label.champ > span {
  display: block; font-size: 13px; font-weight: 650;
  color: var(--encre-douce); margin-bottom: 6px;
}
input[type="text"], input[type="password"], select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--trait); border-radius: 12px;
  background: #fff;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 3px solid rgba(52, 173, 228, .5); outline-offset: 1px;
}

.erreur {
  background: #FDEBEC; color: #8B0F16; border: 1px solid #F3C3C6;
  border-radius: 10px; padding: 10px 12px; font-size: 15px; margin-bottom: 12px;
}
.succes {
  background: #E7F4EC; color: #12563A; border: 1px solid #BCDFCB;
  border-radius: 10px; padding: 10px 12px; font-size: 15px; margin-bottom: 12px;
}

/* ---------- écran de code ---------- */

.accueil { min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; background: var(--encre); }
.accueil__boite { width: 100%; max-width: 380px; background: var(--carte); border-radius: 18px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.accueil__logo { display: block; height: 30px; margin: 0 auto 18px; }
.accueil h1 { font-size: 22px; text-align: center; margin-bottom: 6px; }
.accueil p.sous-titre { text-align: center; }

/* ---------- listes ---------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--trait); }

.ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; min-height: 56px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.ligne__corps { flex: 1; min-width: 0; }
.ligne__titre { font-weight: 640; }
.ligne__detail { font-size: 13.5px; color: var(--encre-douce); }

.jeton {
  flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; background: #E6EDF2; color: var(--encre-douce);
  white-space: nowrap;
}
.jeton--vert { background: #E7F4EC; color: var(--vert); }
.jeton--orange { background: #FDF0E3; color: var(--urgent); }
.jeton--rouge { background: #FDEBEC; color: var(--evacuation); }
.jeton--bleu { background: #E4F2FA; color: var(--bleu-sombre); }

/* ---------- chiffres ---------- */

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.chiffre { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 14px; }
.chiffre b { display: block; font-family: var(--chiffres); font-weight: 750; font-size: 29px;
  line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 12.5px; color: var(--encre-douce); }
.chiffre--alerte b { color: var(--urgent); }

/* ---------- poste en cours ---------- */

.poste {
  background: linear-gradient(160deg, var(--encre), #123B52);
  color: #fff; border-radius: 18px; padding: 20px; margin-bottom: 14px;
}
.poste .surtitre { color: var(--bleu); }
.poste h2 { font-size: 22px; margin-bottom: 4px; }
.poste__heures { font-family: var(--chiffres); font-weight: 700; font-size: 15px; color: var(--bleu);
  font-variant-numeric: tabular-nums; }
.poste__lieu { color: #C4D8E5; font-size: 14.5px; margin-top: 6px; }

/* ---------- alertes ---------- */

.alerte { border-left: 5px solid var(--info); background: var(--carte); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--ombre); }
.alerte[data-niveau="urgent"] { border-left-color: var(--urgent); }
.alerte[data-niveau="evacuation"] { border-left-color: var(--evacuation); background: #FDEBEC; }
.alerte__meta { font-size: 12px; color: var(--encre-douce); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.alerte__texte { font-size: 16px; }

/* ---------- onglets ---------- */

.onglets {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; height: var(--onglets-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait);
}
.onglets button {
  flex: 1; min-width: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  /* Six onglets sur 375 px : le libellé doit tenir sur une ligne, sinon la
     barre grandit et les hauteurs se décalent d'un onglet à l'autre. */
  font-size: 10.5px; font-weight: 620; color: var(--encre-douce);
  white-space: nowrap; letter-spacing: -.01em; padding: 0 2px;
}
.onglets button em { font-style: normal; font-size: 19px; line-height: 1; }
.onglets button[aria-current="true"] { color: var(--bleu-sombre); }

/* ---------- pilotes ---------- */

.grille-pilotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.pilote {
  display: flex; flex-direction: column; /* un <button> centre son contenu par défaut */
  background: var(--carte); border-radius: 12px; box-shadow: var(--ombre);
  overflow: hidden; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.pilote img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #DCE5EB; }
.pilote__txt { padding: 8px 10px 10px; }
.pilote__nom { font-size: 13px; font-weight: 680; line-height: 1.2; }
.pilote__voit { font-size: 11.5px; color: var(--encre-douce); line-height: 1.25; margin-top: 2px; }
.pilote__etat { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #E6EDF2; color: var(--encre-douce); }
.pilote[data-statut="present"] .pilote__etat { background: #E7F4EC; color: var(--vert); }
.pilote[data-statut="en-piste"] .pilote__etat { background: #E4F2FA; color: var(--bleu-sombre); }
.pilote[data-statut="pause"] .pilote__etat { background: #FDF0E3; color: var(--urgent); }
.pilote[data-statut="parti"] { opacity: .5; }

/* ---------- classement ---------- */

.rang { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rang__n { font-family: var(--chiffres); font-weight: 700; font-size: 18px; width: 30px; text-align: right; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.rang:nth-child(-n+3) .rang__n { color: var(--bleu-sombre); }
.rang img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: #DCE5EB; }
.rang__corps { flex: 1; min-width: 0; }
.rang__montant { font-family: var(--chiffres); font-weight: 750; font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* ---------- divers ---------- */

.filtres { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.filtres button {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--trait); background: #fff; font-size: 14px; font-weight: 620; cursor: pointer;
}
.filtres button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }

.vide { text-align: center; color: var(--encre-douce); padding: 28px 14px; font-size: 15px; }
.note { font-size: 13px; color: var(--encre-douce); margin-top: 10px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.hors-ligne {
  position: fixed; left: 12px; right: 12px; z-index: 50;
  bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--urgent); color: #fff; text-align: center;
  padding: 10px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 620;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
body.a-onglets .hors-ligne { bottom: calc(var(--onglets-h) + 12px + env(safe-area-inset-bottom)); }

.journal-ligne { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.journal-ligne time { font-variant-numeric: tabular-nums; color: var(--encre-douce); flex: none; }

@media (min-width: 720px) {
  .titre-ecran { font-size: 32px; }
  .onglets { position: sticky; top: var(--bandeau-h); bottom: auto; border-top: 0; border-bottom: 1px solid var(--trait); }
  body.a-onglets .ecran { padding-bottom: 40px; }
  body.a-onglets .hors-ligne { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- feuille d'action ---------- */

.feuille {
  border: 0; padding: 0; width: min(420px, 100vw);
  margin: auto auto 0; border-radius: 18px 18px 0 0;
  background: var(--carte); box-shadow: 0 -10px 40px rgba(12, 42, 60, .3);
  padding-bottom: env(safe-area-inset-bottom);
}
.feuille::backdrop { background: rgba(12, 42, 60, .55); }
.feuille__tete { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--trait); }
.feuille__tete img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.feuille__choix {
  display: block; width: 100%; min-height: 56px; padding: 0 18px;
  border: 0; border-bottom: 1px solid var(--trait); background: none;
  text-align: left; font-size: 17px; font-weight: 620; cursor: pointer;
}
.feuille__choix[aria-current="true"] { color: var(--bleu-sombre); }
.feuille__choix:active { background: #F1F5F8; }
.feuille__annuler { color: var(--encre-douce); font-weight: 500; border-bottom: 0; }

@media (min-width: 720px) {
  .feuille { margin: auto; border-radius: 18px; }
}

/* Un numéro de téléphone reste un lien discret dans une ligne de liste. */
.ligne__detail a { color: var(--bleu-sombre); text-decoration: none; font-weight: 620; }
.ligne__detail a:active { text-decoration: underline; }