/* ==========================================================================
   Page publique de suivi vélo — feuille de style
   -------------------------------------------------------------------------
   Mode sombre par défaut (lisible en plein soleil comme la nuit, et plus
   économe en batterie sur les écrans OLED des proches qui suivent depuis
   leur téléphone). Un mode clair est fourni pour ceux qui ont réglé leur
   système ainsi.

   Mise en page : carte + panneau côte à côte sur grand écran, empilés
   verticalement sous 900 px de large.
   ========================================================================== */

/* --- Jetons de couleur : mode sombre (défaut) --------------------------- */
:root {
  --fond: #12141a;
  --fond-panneau: #1a1d26;
  --fond-carte-stat: #21252f;
  --bordure: #2e3340;
  --texte: #eef1f6;
  --texte-faible: #9aa3b2;
  --accent: #4da3ff;

  --ok: #3ddc84;
  --ok-fond: #14311f;
  --alerte: #ffb02e;
  --alerte-fond: #3a2a08;
  --erreur: #ff5d5d;
  --erreur-fond: #3a1414;
  --neutre: #7c869b;
  --neutre-fond: #232733;

  --trace: #4da3ff;
  --rayon: 12px;
}

/* --- Mode clair, uniquement si le système le demande -------------------- */
@media (prefers-color-scheme: light) {
  :root {
    --fond: #f4f6fa;
    --fond-panneau: #ffffff;
    --fond-carte-stat: #eef1f7;
    --bordure: #d6dbe5;
    --texte: #171a20;
    --texte-faible: #5d6675;
    --accent: #0b62c4;

    --ok-fond: #dcf7e6;
    --alerte-fond: #fdf0d5;
    --erreur-fond: #fde0e0;
    --neutre-fond: #e7eaf1;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   BANDEAU D'ÉTAT
   ========================================================================== */

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  /* Respecte l'encoche des iPhone */
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--bordure);
  transition: background-color .3s ease;
  flex: 0 0 auto;
}

.bandeau-gauche {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.titre {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
}

.sous-titre {
  font-size: .82rem;
  color: var(--texte-faible);
  line-height: 1.3;
  margin-top: 2px;
}

/* Pastille colorée + pulsation quand tout va bien */
.pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neutre);
  flex: 0 0 auto;
}

.etat-en-ligne   { background: var(--ok-fond); }
.etat-en-ligne   .pastille { background: var(--ok); animation: pulse 2s ease-in-out infinite; }
.etat-en-ligne   .sous-titre { color: var(--ok); }

.etat-hors-ligne { background: var(--alerte-fond); }
.etat-hors-ligne .pastille { background: var(--alerte); }
.etat-hors-ligne .sous-titre { color: var(--alerte); }

.etat-erreur     { background: var(--erreur-fond); }
.etat-erreur     .pastille { background: var(--erreur); }
.etat-erreur     .sous-titre { color: var(--erreur); }

.etat-inactif    { background: var(--neutre-fond); }
.etat-inactif    .pastille { background: var(--neutre); }

.etat-inconnu    { background: var(--neutre-fond); }

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* Respecte le réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
  .pastille { animation: none !important; }
}

.bouton {
  background: var(--fond-carte-stat);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
  flex: 0 0 auto;
  /* Cible tactile confortable même avec des gants de vélo */
  min-height: 40px;
}

.bouton:active { transform: scale(.97); }

/* ==========================================================================
   DISPOSITION PRINCIPALE
   ========================================================================== */

.disposition {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;   /* indispensable pour que la carte se dimensionne en flex */
}

#carte {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--fond);
}

.panneau {
  flex: 0 0 320px;
  overflow-y: auto;
  padding: 16px;
  background: var(--fond-panneau);
  border-left: 1px solid var(--bordure);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* --- Mobile : on empile, carte au-dessus ------------------------------- */
@media (max-width: 900px) {
  .disposition {
    flex-direction: column;
  }
  #carte {
    /* Hauteur fixe généreuse : la carte reste utilisable et le panneau
       est atteignable en un pouce de défilement. */
    flex: 0 0 55vh;
    min-height: 260px;
  }
  .panneau {
    flex: 1 1 auto;
    border-left: none;
    border-top: 1px solid var(--bordure);
  }
}

/* ==========================================================================
   STATISTIQUES
   ========================================================================== */

.bloc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.stat {
  background: var(--fond-carte-stat);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 12px 10px;
  text-align: center;
}

.stat-valeur {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  /* Chiffres à largeur fixe : les valeurs ne « sautent » pas à chaque
     rafraîchissement, c'est beaucoup moins fatigant à regarder. */
  font-variant-numeric: tabular-nums;
}

.stat-libelle {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-faible);
  margin-top: 5px;
}

/* ==========================================================================
   PROGRESSION SUR LE PARCOURS PRÉVU
   ========================================================================== */

.bloc-progression {
  background: var(--fond-carte-stat);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 12px;
  margin-bottom: 18px;
}

.progression-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

#progression-reste {
  font-size: 1.05rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.progression-pct {
  font-size: .82rem;
  color: var(--texte-faible);
  font-variant-numeric: tabular-nums;
}

.jauge {
  height: 8px;
  border-radius: 999px;
  background: var(--bordure);
  overflow: hidden;
}

.jauge-remplissage {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .6s ease;
}

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

.progression-note {
  margin-top: 7px;
  font-size: .74rem;
  color: var(--texte-faible);
  line-height: 1.4;
}

.progression-note.attention { color: var(--alerte); }

.details {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  font-size: .88rem;
  align-items: baseline;
}

.details dt {
  color: var(--texte-faible);
  white-space: nowrap;
}

.details dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

/* Mise en évidence quand une valeur pose problème (batterie faible,
   dernier point trop ancien) */
.details dd.attention { color: var(--alerte); }
.details dd.critique  { color: var(--erreur); }

.note {
  margin-top: 18px;
  font-size: .76rem;
  color: var(--texte-faible);
  line-height: 1.5;
}

/* ==========================================================================
   ADAPTATIONS LEAFLET
   ========================================================================== */

/* Le fond de carte OSM est clair ; en mode sombre on le désature un peu
   pour qu'il ne brûle pas les yeux et que la trace bleue ressorte. */
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane {
    filter: brightness(.72) saturate(.75) contrast(1.05);
  }
}

.leaflet-container {
  background: var(--fond);
  font-family: inherit;
}

/* Attribution OSM : obligatoire, mais discrète */
.leaflet-control-attribution {
  background: rgba(0, 0, 0, .55) !important;
  color: #ddd !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: #9ec9ff !important; }

@media (prefers-color-scheme: light) {
  .leaflet-control-attribution {
    background: rgba(255, 255, 255, .8) !important;
    color: #444 !important;
  }
  .leaflet-control-attribution a { color: #0b62c4 !important; }
}

/* Marqueur de position actuelle : point lumineux avec halo */
.marqueur-position {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(77, 163, 255, .28), 0 2px 8px rgba(0, 0, 0, .5);
}

/* Version atténuée quand le signal est perdu : on montre la dernière
   position connue, mais on indique clairement qu'elle est périmée. */
.marqueur-position.perime {
  background: var(--alerte);
  box-shadow: 0 0 0 6px rgba(255, 176, 46, .25), 0 2px 8px rgba(0, 0, 0, .5);
}

/* Marqueur de départ, plus petit et discret */
.marqueur-depart {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid #fff;
}