/* Bord : l'application téléphone de la télémétrie. DA « Grand air, trait net », version nuit :
   lisible au soleil comme dans une voiture la nuit, néon seulement sur nuit ou bleu, angles droits, traits de 2 px. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-normal-Wa7z_Iw.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal-l4pIovd.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-700-normal-dbwVwue.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bleu: #3643ba;
  --bleu-ligne: #5361d0;
  --bleu-clair: #8c96e0;
  --nuit: #14183d;
  --nuit-2: #1c2150;
  --nuit-3: #262c63;
  --craie: #faf8f3;
  --glacier: #dce4fa;
  --soleil: #f08a4b;
  --neon: #d4ff3a;
  --rouge: #ff6b5e;
  --titre: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --cible: 2.75rem;
  --g: max(1rem, env(safe-area-inset-left));
  --d: max(1rem, env(safe-area-inset-right));
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; background: var(--nuit); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.bord {
  margin: 0; min-height: 100dvh; background: var(--nuit); color: var(--craie);
  font: 400 1rem/1.45 var(--titre); display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--neon); }
.mono { font-family: var(--mono); }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }

/* En-tête */
.bord-entete {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem;
  padding: calc(.55rem + env(safe-area-inset-top)) var(--d) .55rem var(--g);
  background: var(--nuit); border-bottom: 2px solid var(--nuit-3);
}
.bord-marque { display: flex; align-items: center; gap: .5rem; color: var(--craie); text-decoration: none; font: 800 1.1rem/1 var(--titre); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; }
.bord-marque svg { width: 2.2rem; height: auto; }
.bord-projet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bleu-clair); font: 500 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.bord-sortir { display: grid; place-items: center; width: var(--cible); height: var(--cible); margin-right: -.6rem; color: var(--bleu-clair); }
.bord-sortir svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; }

.bord-reseau { margin: 0; padding: .45rem var(--d) .45rem var(--g); background: var(--soleil); color: var(--nuit); font: 700 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; }

.bord-page { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1rem var(--d) calc(5.5rem + env(safe-area-inset-bottom)) var(--g); }

/* Titres et textes */
.bord-titre { margin: .25rem 0 1rem; font: 800 clamp(1.8rem, 1.2rem + 3vw, 2.6rem)/1 var(--titre); font-stretch: 70%; text-transform: uppercase; }
.bord-sous-titre { margin: 1.75rem 0 .6rem; color: var(--bleu-clair); font: 700 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.bord-note { color: var(--glacier); }
.bord-vide { color: var(--bleu-clair); }
.bord-message { margin: 0 0 1rem; padding: .7rem .9rem; border: 2px solid var(--neon); color: var(--craie); font-size: .95rem; }
.bord-message-erreur { border-color: var(--rouge); }

/* Statut de la balise */
.bord-statut { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin-bottom: .75rem; font: 500 .85rem/1.2 var(--mono); }
.bord-pastille { width: .8rem; height: .8rem; background: var(--neon); box-shadow: 0 0 0 4px rgba(212, 255, 58, .2); }
.bord-statut.en-retard .bord-pastille { background: var(--soleil); box-shadow: 0 0 0 4px rgba(240, 138, 75, .25); }
.bord-puce { display: inline-block; padding: .2rem .45rem; border: 1px solid var(--bleu-ligne); color: var(--glacier); font: 500 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.bord-puce.ok { border-color: var(--neon); color: var(--neon); }
.bord-puce.ko { border-color: var(--rouge); color: var(--rouge); }

/* Carte : SVG du serveur, remplacé par la carte zoomable si JavaScript et Leaflet sont là */
.bord-carte { position: relative; aspect-ratio: 25 / 16; overflow: hidden; background: var(--nuit-2); border: 2px solid var(--bleu-ligne); box-shadow: 6px 6px 0 var(--bleu); }
.bord-carte > svg { width: 100%; height: 100%; }
.bord-carte.zoomable > svg { display: none; }
.bord-carte .leaflet-container { width: 100%; height: 100%; background: var(--nuit-2); font: 500 .7rem/1.3 var(--mono); }
.bord-carte .leaflet-tile-pane { filter: saturate(.55) brightness(.92) contrast(1.05); }
.bord-carte .leaflet-control-attribution { background: rgba(20, 24, 61, .82); color: var(--glacier); }
.bord-carte .leaflet-control-attribution a { color: var(--neon); }
.bord-carte .leaflet-bar a { background: var(--nuit); color: var(--craie); border-color: var(--nuit-3); border-radius: 0; }
.bord-carte .leaflet-bar { border: 2px solid var(--bleu-ligne); border-radius: 0; }
.bord-ici { width: 22px; height: 22px; background: var(--soleil); border: 3px solid var(--nuit); box-shadow: 0 0 0 6px rgba(240, 138, 75, .35); }
.bord-ici-fleche { position: absolute; left: 50%; top: -14px; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-bottom: 9px solid var(--soleil); transform-origin: 6px 25px; }
.bord-recentrer { position: absolute; right: .6rem; bottom: .6rem; z-index: 500; min-height: var(--cible); padding: 0 .8rem; background: var(--nuit); color: var(--neon); border: 2px solid var(--neon); font: 700 .72rem/1 var(--mono); text-transform: uppercase; }
.bord-coord { margin: .9rem 0 0; color: var(--bleu-clair); font-size: .82rem; }

/* Tuiles de mesures */
.bord-tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1rem; }
@media (min-width: 30rem) { .bord-tuiles { grid-template-columns: repeat(3, 1fr); } }
.bord-tuile { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .1rem .4rem; padding: .7rem .8rem; background: var(--nuit-2); border: 2px solid var(--nuit-3); }
.bord-tuile-nom { grid-column: 1 / -1; color: var(--bleu-clair); font: 500 .7rem/1.1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.bord-tuile strong { font: 700 1.65rem/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bord-tuile-unite { color: var(--glacier); font: 500 .75rem/1.6 var(--mono); }
.bord-tuile-large { grid-column: 1 / -1; background: var(--bleu); border-color: var(--bleu-ligne); }
.bord-tuile-large strong { font-size: 3.4rem; color: var(--neon); }
.bord-tuile-large .bord-tuile-nom { color: var(--glacier); }
.bord-tuile.change strong { animation: bord-change .8s ease-out; }
@keyframes bord-change { from { color: var(--neon); } }
.bord-maj { margin: .7rem 0 0; color: var(--bleu-clair); font-size: .75rem; }

/* Listes */
.bord-liste { margin: 0; padding: 0; list-style: none; border-top: 1px dashed var(--nuit-3); }
.bord-liste li { border-bottom: 1px dashed var(--nuit-3); }
.bord-liste a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; color: var(--craie); text-decoration: none; font-weight: 700; }
.bord-liste-compacte li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .55rem 0; font-size: .92rem; }
.bord-liste-compacte .mono { color: var(--bleu-clair); font-size: .78rem; }
.bord-liste .alerte { color: var(--soleil); }
.bord-jours a { display: grid; grid-template-columns: 4rem 1fr auto; }
.bord-jours a[aria-current] { color: var(--neon); }
.bord-jours span:last-child { color: var(--bleu-clair); font: 500 .8rem/1 var(--mono); }

/* Boutons et formulaires */
.bord-bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible); padding: .55rem 1rem;
  background: transparent; color: var(--craie); border: 2px solid var(--bleu-clair); border-radius: 0;
  font: 700 .82rem/1.1 var(--mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; cursor: pointer;
}
.bord-bouton:active { transform: translate(2px, 2px); }
.bord-bouton.actif { background: var(--bleu); border-color: var(--neon); color: var(--neon); }
.bord-bouton-neon { background: var(--neon); color: var(--nuit); border-color: var(--neon); box-shadow: 4px 4px 0 var(--bleu); }
.bord-bouton-danger { border-color: var(--rouge); color: var(--rouge); }
.bord-bouton-plein { width: 100%; min-height: 3.4rem; }
.bord-bouton-petit { min-height: 2.5rem; padding: .3rem .8rem; }
.bord-commande-seule { margin: 1rem 0; }
.bord-choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 30rem) { .bord-choix { grid-template-columns: repeat(4, 1fr); } }
.bord-sorties { display: grid; gap: .5rem; }
.bord-sortie { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; padding: .5rem .7rem; background: var(--nuit-2); border: 2px solid var(--nuit-3); }
.bord-formulaire { display: grid; gap: .45rem; }
.bord-formulaire label { color: var(--glacier); font: 500 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.bord-formulaire input {
  width: 100%; min-height: var(--cible); padding: .55rem .7rem; background: var(--nuit-2); color: var(--craie);
  border: 2px solid var(--bleu-ligne); border-radius: 0; font: 500 1rem/1.2 var(--mono);
}
.bord-formulaire input:focus { border-color: var(--neon); outline: none; }
.bord-formulaire button { margin-top: .6rem; }
.bord-formulaire-ligne { grid-template-columns: 1fr 1fr; align-items: end; }
.bord-formulaire-ligne label { grid-row: 1; }
.bord-formulaire-ligne input { grid-row: 2; }
.bord-formulaire-ligne button { grid-column: 1 / -1; }
.bord-en-ligne { display: inline; }
.bord-lien { padding: 0; background: none; border: 0; color: var(--neon); font: inherit; text-decoration: underline; cursor: pointer; }

/* Barre d'onglets, en bas, à portée de pouce */
.bord-onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--nuit); border-top: 2px solid var(--nuit-3);
}
.bord-onglets a { display: grid; justify-items: center; gap: .25rem; padding: .6rem 0 .55rem; color: var(--bleu-clair); text-decoration: none; font: 700 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.bord-onglets svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.bord-onglets a[aria-current] { color: var(--neon); box-shadow: inset 0 3px 0 var(--neon); }

/* Porte (connexion, hors ligne) */
.bord-porte { background: var(--bleu); }
.bord-porte .bord-page { display: grid; align-content: center; position: relative; overflow: hidden; padding-bottom: 3rem; }
.bord-porte .contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }
.bord-porte .contours path { fill: none; stroke: var(--bleu-ligne); stroke-width: 1.5; }
.bord-porte .trace { position: fixed; left: 0; right: 0; bottom: 1.5rem; width: 100%; height: 1.2rem; pointer-events: none; }
.bord-porte .trace path { fill: none; stroke: var(--neon); stroke-width: 3; stroke-linecap: round; }
.bord-porte-contenu { position: relative; z-index: 1; display: grid; gap: 1.25rem; width: 100%; max-width: 24rem; margin: 0 auto; }
.bord-porte-titre { display: flex; align-items: center; gap: .9rem; }
.bord-porte-titre svg { width: 5rem; height: auto; color: var(--craie); }
.bord-porte h1 { margin: 0; font: 900 3.6rem/.9 var(--titre); font-stretch: 65%; text-transform: uppercase; }
.bord-porte .bord-formulaire { padding: 1.25rem; background: var(--nuit); box-shadow: 8px 8px 0 var(--nuit-3); }
.bord-porte .bord-formulaire input { background: var(--nuit-2); }

/* Carte publique et des pages (même dessin, servi par le serveur) */
.carte-svg { width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.bord-sortie .bord-tuile-nom { grid-column: auto; }