/* GIKI-OCTET — suivi de flotte
   Charte : vert petrole pour l'habillage, corail pour ce qui demande une
   action. Les couleurs d'etat (en route, arret, alerte) sont distinctes
   des deux : dans un outil de suivi, la couleur porte une information
   operationnelle, elle ne doit pas se confondre avec la marque. */

:root {
  --petrole: #0B4F5C;
  --petrole-fonce: #073A44;
  --petrole-clair: #4BB3A8;
  --corail: #F26A4F;
  --corail-clair: #FF8A6F;

  --encre: #10242A;
  --doux: #5E757C;
  --tres-doux: #80949A;
  --fond: #EDF1F2;
  --carte: #FFFFFF;
  --trait: #D8E0E2;
  --trait-fin: #EDF2F3;

  --route: #1F8A4C;
  --arret: #93A5AB;
  --alerte: #C0392B;

  --rail: 76px;
  --panneau: 352px;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Une regle de classe l'emporte sur l'attribut hidden : sans ceci,
   l'application masquee restait affichee derriere la connexion. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--petrole-clair); outline-offset: 2px; }

/* ===== Connexion ===================================================== */
.connexion {
  position: fixed;
  inset: 0;
  background: var(--petrole);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.form-connexion {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
}
.logo-connexion {
  width: min(250px, 78%);
  height: auto;
  align-self: center;
  margin-bottom: 38px;
}
.form-connexion label {
  color: rgba(255, 255, 255, .78);
  font-size: 12.5px;
  margin-bottom: 5px;
}
.form-connexion input {
  font: inherit;
  font-size: 16px;            /* 16px : evite le zoom automatique sur iPhone */
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.form-connexion input:focus {
  outline: none;
  border-color: #fff;
}
.form-connexion button {
  background: var(--corail);
  color: #17222A;
  font-weight: 600;
  border: 0;
  border-radius: 9px;
  padding: 13px;
  margin-top: 6px;
}
.form-connexion button:hover { background: var(--corail-clair); }
.form-connexion button:disabled { opacity: .55; cursor: wait; }
.erreur {
  color: #FFD3C8;
  background: rgba(192, 57, 43, .3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 14px 0 0;
}

/* ===== Charpente ===================================================== */
.application {
  height: 100%;
  display: flex;
  overflow: hidden;
}

/* --- rail --- */
.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  background: var(--petrole);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.rail-onglet {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.rail-onglet svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rail-onglet span { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.rail-onglet:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.rail-onglet.actif { color: #fff; background: rgba(255, 255, 255, .15); }
.rail-marque { width: 34px; height: auto; margin-top: auto; opacity: .9; }

/* --- panneau --- */
.panneau {
  width: var(--panneau);
  flex: 0 0 var(--panneau);
  background: var(--carte);
  border-right: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.panneau-tete { padding: 18px 20px 14px; border-bottom: 1px solid var(--trait-fin); }
.panneau-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}
.panneau-titre h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.panneau-titre span { font-size: 12.5px; color: var(--doux); font-variant-numeric: tabular-nums; }
#recherche {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 10px 13px;
  border: 1px solid var(--trait);
  border-radius: 9px;
  background: #F5F8F8;
  color: var(--encre);
}
.filtres { display: flex; gap: 7px; margin-top: 12px; }
.filtre {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--trait);
  background: #fff;
  color: #41585F;
}
.filtre.actif { background: var(--petrole); border-color: var(--petrole); color: #fff; }

/* --- liste --- */
.liste { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ligne {
  display: flex;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--trait-fin);
  cursor: pointer;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  align-items: flex-start;
}
.ligne:hover { background: rgba(11, 79, 92, .05); }
.ligne.choisie { background: #F2F8F8; box-shadow: inset 3px 0 0 var(--corail); }
.pastille { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; }
.pastille.route { background: var(--route); }
.pastille.arret { background: var(--arret); }
.pastille.alerte { background: var(--alerte); }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plaque {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vitesse { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vitesse small { font-size: 11px; font-weight: 400; color: var(--doux); }
.ligne-etat { font-size: 12.5px; color: var(--doux); }
.ligne-delai { font-size: 11.5px; color: var(--tres-doux); font-variant-numeric: tabular-nums; }
.liste-vide { padding: 28px 20px; color: var(--doux); font-size: 14px; text-align: center; }

/* --- carte --- */
.zone-carte { flex: 1; position: relative; min-width: 0; }
#carte { position: absolute; inset: 0; }
.maplibregl-ctrl-group { border: 1.5px solid var(--petrole) !important; border-radius: 9px !important; }

/* --- fiche --- */
.fiche {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 330px;
  max-width: calc(100% - 48px);
  background: var(--carte);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(10, 40, 48, .24);
  overflow: hidden;
}
.fiche-tete {
  background: var(--petrole);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fiche-tete .plaque { font-size: 17px; }
.fiche-fermer {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
}
.fiche-grille {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.fiche-grille > div { min-width: 0; }
.fiche-k { font-size: 10.5px; letter-spacing: .06em; color: var(--tres-doux); text-transform: uppercase; }
.fiche-v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fiche-large { grid-column: span 3; }
.fiche-large .fiche-v { font-size: 14px; font-weight: 500; }
.fiche-actions { padding: 0 18px 16px; display: flex; gap: 9px; }
.fiche-actions button {
  flex: 1;
  font-size: 13px;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid var(--trait);
  background: #fff;
  color: var(--encre);
}
.fiche-actions .principal { background: var(--corail); border-color: var(--corail); color: #17222A; font-weight: 600; }

/* --- barre mobile --- */
.barre-mobile { display: none; }

/* ===== Téléphone ===================================================== */
@media (max-width: 860px) {
  .application { flex-direction: column; }
  .rail { display: none; }

  .panneau {
    width: 100%;
    flex: 1 1 auto;
    border-right: 0;
    order: 2;
  }
  .zone-carte { order: 1; flex: 1 1 auto; }

  /* Une seule vue a la fois : la carte, ou la liste. */
  body[data-vue="carte"] .panneau { display: none; }
  body[data-vue="liste"] .zone-carte { display: none; }

  .fiche { left: 12px; right: 12px; width: auto; bottom: 12px; }

  .barre-mobile {
    display: flex;
    background: var(--petrole);
    order: 3;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .barre-onglet {
    flex: 1;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .68);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0 10px;
  }
  .barre-onglet svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .barre-onglet span { font-size: 10.5px; }
  .barre-onglet.actif { color: var(--corail); }
}

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

/* ===== Commandes flottantes de la carte ==============================
   Un seul bouton au repos, qui se deploie. Sur telephone, les commandes
   d'une carte occupent vite un quart de l'ecran : les regrouper rend la
   carte a son role. */
.commandes {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 5;
}
.commandes-bouton {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--petrole);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 12px rgba(10, 40, 48, .34);
}
.commandes-bouton svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.commandes-bouton[aria-expanded="true"] { background: var(--corail); color: #17222A; }
.commandes-liste {
  background: var(--carte);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(10, 40, 48, .28);
  padding: 6px;
  min-width: 206px;
  display: flex;
  flex-direction: column;
}
.commandes-liste hr { border: 0; border-top: 1px solid var(--trait-fin); margin: 5px 4px; }
.commande {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--encre);
  text-align: left;
}
.commande:hover { background: rgba(11, 79, 92, .07); }
.commande.actif { background: #F2F8F8; font-weight: 600; }
.commande svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }
.pastille-fond { width: 17px; height: 17px; border-radius: 4px; flex: 0 0 auto; border: 1px solid var(--trait); }
.pastille-fond.plan { background: #E8E0D8; }
.pastille-fond.satellite { background: linear-gradient(135deg, #3E5A3A, #6E7F4F); }
.pastille-fond.sombre { background: #1D2328; }

/* ===== Feuille « Plus » =============================================== */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(8, 26, 31, .45);
  z-index: 20;
}
.feuille {
  position: fixed;
  z-index: 21;
  background: var(--carte);
  box-shadow: 0 -6px 30px rgba(10, 40, 48, .3);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px));
  max-height: 78vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.feuille-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  background: var(--petrole);
  color: #fff;
}
.feuille-tete h2 { margin: 0; font-size: 17px; font-weight: 600; }
.feuille-fermer { background: none; border: 0; color: rgba(255, 255, 255, .82); font-size: 24px; line-height: 1; }
.feuille-corps { overflow-y: auto; padding: 8px 0; }
.feuille-groupe {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tres-doux);
  padding: 13px 18px 5px;
}
.feuille-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  color: var(--encre);
  text-decoration: none;
  font-size: 14.5px;
}
.feuille-lien:hover { background: rgba(11, 79, 92, .06); }
.feuille-lien span { color: var(--tres-doux); font-size: 12px; }
.feuille-note {
  margin: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--trait-fin);
  font-size: 12.5px;
  color: var(--doux);
}

@media (max-width: 860px) {
  /* Au-dessus de la barre de navigation, pas dessous. */
  .commandes { bottom: 16px; }
  .feuille {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 82vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}