/* Site familial : une carte, une position, presque rien d'autre.
   Il ne doit ressembler ni a un tableau de bord ni a une page de vente
   (arch/11 §8). Mobile d'abord : la derniere position doit etre lisible sans
   zoomer, et le selecteur de periode atteignable au pouce. */

:root {
  --fond: #f6f4f1;
  --fond-panneau: #ffffff;
  --texte: #1c1b19;
  --texte-doux: #5b5751;
  --bordure: #ddd8d1;
  --accent: #1f4f82;
  --accent-texte: #ffffff;
  --info-fond: #eef2f7;
  --info-bordure: #b9cbe0;
  --attention-fond: #fdf3e3;
  --attention-bordure: #e3bd76;
  --attention-texte: #7a4b06;
  --alerte-fond: #fbeaea;
  --alerte-bordure: #dda1a1;
  --alerte-texte: #8c2f2f;
  --rayon: 10px;
  --ombre: 0 1px 3px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16171a;
    --fond-panneau: #1f2125;
    --texte: #f0eeea;
    --texte-doux: #b0aca5;
    --bordure: #34363b;
    --accent: #6ea8e0;
    --accent-texte: #10161d;
    --info-fond: #1e2732;
    --info-bordure: #34506d;
    --attention-fond: #322717;
    --attention-bordure: #7a5a20;
    --attention-texte: #f0c986;
    --alerte-fond: #321c1c;
    --alerte-bordure: #7a3838;
    --alerte-texte: #f0a8a8;
    --ombre: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

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

/* Leaflet et la mise en page en flex passeraient devant l'attribut hidden. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.entete {
  flex: 0 0 auto;
  padding: 0.6rem 1rem;
  padding-top: max(0.6rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-panneau);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.entete h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pays-actuel {
  min-width: 9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pays-drapeau {
  width: 1.8rem;
  font-size: 1.55rem;
  line-height: 1;
  text-align: center;
}

.pays-texte {
  min-width: 0;
}

.pays-libelle {
  display: block;
  color: var(--texte-doux);
  font-size: 0.72rem;
  line-height: 1.1;
}

.pays-valeur {
  display: block;
  margin-top: 0.12rem;
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
}

.resume-voyage {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(5.2rem, auto));
  gap: 0.65rem;
  align-items: center;
}

.resume-voyage > * {
  min-width: 0;
  border-left: 1px solid var(--bordure);
  padding-left: 0.75rem;
}

.resume-libelle {
  display: block;
  color: var(--texte-doux);
  font-size: 0.72rem;
  line-height: 1.1;
}

.resume-voyage strong {
  display: block;
  margin-top: 0.12rem;
  font-size: 1rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La carte occupe tout ce qui reste ; le panneau du bas garde sa taille. */
.scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 45vh;
}

.carte {
  position: absolute;
  inset: 0;
  background: var(--fond);
}

.bandeau-etat {
  position: absolute;
  z-index: 500; /* au-dessus des tuiles Leaflet, sous les popups */
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
}

.message-central {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
}

.avis {
  border: 1px solid var(--info-bordure);
  background: var(--info-fond);
  border-radius: var(--rayon);
  padding: 0.6rem 0.8rem;
  box-shadow: var(--ombre);
}

.avis-central {
  max-width: 32rem;
  box-shadow: none;
}

.avis-titre {
  margin: 0;
  font-weight: 600;
}

.avis-detail {
  margin: 0.25rem 0 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.avis-attention {
  border-color: var(--attention-bordure);
  background: var(--attention-fond);
  color: var(--attention-texte);
}

.avis-alerte {
  border-color: var(--alerte-bordure);
  background: var(--alerte-fond);
  color: var(--alerte-texte);
}

/* La couleur ne porte jamais l'information seule : l'anciennete est ecrite en
   toutes lettres dans le titre de l'avis. */
.avis-attention .avis-detail,
.avis-alerte .avis-detail {
  color: inherit;
  opacity: 0.85;
}

.panneau {
  flex: 0 0 auto;
  background: var(--fond-panneau);
  border-top: 1px solid var(--bordure);
  padding: 0.8rem 1rem;
  padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.position-principale {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.position-heure {
  margin: 0.15rem 0 0;
  color: var(--texte-doux);
}

.position-detail {
  margin: 0.3rem 0 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.commandes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

/* La rangee passe a la ligne plutot que d'etre ajustee au pixel : cinq
   libelles ne tiennent pas sur un ecran de 360 points, et la premiere personne
   qui agrandit la police du systeme verrait la mise en page se briser.
   L'application, elle, fait defiler sa rangee -- sur une page, un bouton pousse
   hors de l'ecran sans barre de defilement visible serait introuvable. */
.periodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bouton-periode,
.bouton-recentrer {
  min-height: 44px; /* atteignable au pouce */
  padding: 0 0.9rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.bouton-periode[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
}

.bouton-periode:disabled {
  opacity: 0.5;
  cursor: default;
}

.bouton-periode:focus-visible,
.bouton-recentrer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.couverture {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.85rem;
}

.ligne-footer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.code-source {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.82rem;
}

.code-source a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.code-source a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* La bulle d'un point du trace : quand on etait la, et ou. Les trois lignes
   sont hierarchisees, l'heure d'abord -- c'est la question posee. */
.bulle .leaflet-popup-content-wrapper {
  background: var(--fond-panneau);
  color: var(--texte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.bulle .leaflet-popup-tip {
  background: var(--fond-panneau);
  box-shadow: none;
}

.bulle .leaflet-popup-content {
  margin: 0.6rem 0.75rem;
  /* Assez large pour une adresse, assez etroit pour ne pas couvrir le trace. */
  max-width: 16rem;
}

.bulle-heure {
  margin: 0;
  font-weight: 600;
}

.bulle-adresse {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

/* Une adresse absente est le cas normal en voyage, pas une panne : elle se dit
   en gris, jamais en rouge. */
.bulle-adresse-absente {
  color: var(--texte-doux);
  font-style: italic;
}

.bulle-coordonnees {
  margin: 0.25rem 0 0;
  color: var(--texte-doux);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.sans-javascript {
  margin: 0;
  padding: 1rem;
  background: var(--attention-fond);
  color: var(--attention-texte);
}

/* Sur grand ecran, la carte prend presque toute la fenetre et le panneau se
   met en ligne : aucun sidebar permanent en V1 (arch/11 §6). */
@media (min-width: 48rem) {
  .panneau {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .ligne-footer {
    flex: 1 1 100%;
    order: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: baseline;
  }

  .code-source {
    text-align: right;
  }

  .commandes {
    justify-content: flex-end;
  }
}

@media (max-width: 47.99rem) {
  .resume-voyage {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .entete {
    align-items: flex-start;
    flex-direction: column;
  }

  .resume-voyage {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resume-voyage > * {
    border-left: 0;
    border-top: 1px solid var(--bordure);
    padding: 0.45rem 0 0;
  }

  .pays-actuel {
    width: auto;
    min-width: 0;
  }
}

/* Leaflet : l'attribution doit rester lisible, y compris en theme sombre. */
.leaflet-container {
  font-family: inherit;
}

@media (prefers-color-scheme: dark) {
  .leaflet-control-attribution {
    background: rgba(31, 33, 37, 0.85);
    color: var(--texte-doux);
  }

  .leaflet-control-attribution a {
    color: var(--accent);
  }
}