/* Entrains en Poche : appli publique, mobile d'abord. */
:root {
  --fond: #f6f4ee;
  --surface: #ffffff;
  --encre: #1f2a24;
  --encre-2: #4d5a52;
  --encre-3: #6f7a73;
  --trait: #dfdcd2;
  --vert: #2f6b4f;
  --vert-clair: #e3efe7;
  --ocre: #b5651d;
  --rouge: #b3261e;
  --rouge-clair: #fbe9e7;
  --r-pratique: #2f6b4f;
  --r-commerces: #b5651d;
  --r-agenda: #6a4c93;
  --r-decouverte: #1f6f8b;
  --ombre: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --rayon: 14px;
  --barre: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121a16;
    --surface: #1b2620;
    --encre: #e8ece9;
    --encre-2: #b9c3bd;
    --encre-3: #8f9a94;
    --trait: #2c3a32;
    --vert: #7fc4a0;
    --vert-clair: #20352a;
    --ocre: #e3a265;
    --rouge: #ff8a80;
    --rouge-clair: #3a1f1d;
    --r-pratique: #4f9a74;
    --r-commerces: #c47a35;
    --r-agenda: #8e6fbf;
    --r-decouverte: #3b8fae;
    --ombre: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom));
}
a { color: var(--vert); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: .4rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; color: var(--encre-2); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cadre */
.entete {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--vert); color: #fff;
}
@media (prefers-color-scheme: dark) { .entete { background: #16241d; } }
.marque { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; flex: 0 1 auto; }
.marque span { display: flex; flex-direction: column; line-height: 1.15; }
.marque small { opacity: .85; font-size: .78rem; }
.entete { gap: 10px; }
.marque strong { white-space: nowrap; }
.marque span { min-width: 0; }
.marque strong { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) {
  .entete { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .marque { gap: 6px; }
  .marque small, .marque img { display: none; }
  .marque strong { font-size: .9rem; }
  .meteo { gap: 6px; }
  .meteo-actuel { font-size: 1rem; }
  .meteo-actuel svg { width: 22px; height: 22px; }
  .meteo-jours { gap: 4px; padding-left: 6px; }
  .choix-langue select { padding: 3px 2px; }
}
.marque img { width: 28px; height: 28px; }
.choix-langue select {
  font: inherit; font-size: .9rem; color: #fff; background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 4px 6px;
}
.choix-langue option { color: #000; }
.meteo { display: flex; align-items: center; gap: 10px; margin-left: auto; font-variant-numeric: tabular-nums; }
.meteo svg { width: 22px; height: 22px; stroke-width: 1.7; }
.meteo-actuel { display: flex; align-items: center; gap: 3px; font-size: 1.15rem; font-weight: 700; }
.meteo-actuel svg { width: 28px; height: 28px; }
.meteo-jours { display: flex; gap: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .3); }
.meteo-jour { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.meteo-jour small { font-size: .68rem; opacity: .9; }
.meteo-jour svg { width: 18px; height: 18px; margin: 1px 0; }
@media (max-width: 360px) { .meteo-jours { display: none; } }
.credits { margin-top: 2rem; color: var(--encre-3); font-size: .75rem; text-align: center; }
.bandeau { background: var(--rouge-clair); color: var(--encre); padding: 8px 16px; font-size: .9rem; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; outline: none; }
main.pleine { max-width: none; padding: 0; }

.onglets {
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barre) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--trait);
}
.onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--encre-3); text-decoration: none; font-size: .72rem;
}
.onglets a[aria-current] { color: var(--vert); font-weight: 600; }

/* Accueil */
.accueil-intro p { color: var(--encre-2); margin-top: -.4rem; }
.recherche input {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: var(--rayon);
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
}
.jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jour { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px; }
.jour.aujourdhui { border-color: var(--vert); box-shadow: inset 4px 0 0 var(--vert); }
.jour-nom { margin: 0 0 4px; font-weight: 600; color: var(--encre-2); font-size: .9rem; }
.jour-nom::first-letter { text-transform: uppercase; }
.jour ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jour li { display: flex; justify-content: space-between; gap: 12px; }
.jour li span { color: var(--encre-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.urgences-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.urgence {
  display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: var(--rayon);
  background: var(--rouge-clair); color: var(--rouge); text-decoration: none; text-align: center;
}
.urgence strong { font-size: 1.3rem; }
.urgence small { color: var(--encre-2); font-size: .75rem; line-height: 1.2; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.6rem; }
.tuile {
  min-height: 84px; padding: 14px; border-radius: var(--rayon); color: #fff; text-decoration: none;
  display: flex; align-items: flex-end; font-weight: 600; box-shadow: var(--ombre);
}
.tuile-pratique { background: var(--r-pratique); }
.tuile-commerces { background: var(--r-commerces); }
.tuile-agenda { background: var(--r-agenda); }
.tuile-decouverte { background: var(--r-decouverte); }
.tuile-carte { background: var(--encre-2); grid-column: 1 / -1; min-height: 64px; }
.installer {
  display: block; width: 100%; margin-top: 1.4rem; padding: 12px; font: inherit; font-weight: 600;
  border: 2px solid var(--vert); color: var(--vert); background: transparent; border-radius: var(--rayon);
}

/* Listes */
.puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.puces a {
  flex: none; padding: 6px 12px; border-radius: 999px; background: var(--vert-clair); color: var(--vert);
  text-decoration: none; font-size: .88rem; white-space: nowrap;
}
.groupe { scroll-margin-top: 64px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste > li { min-width: 0; }
.fiche-ligne {
  display: flex; align-items: center; background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); border: 1px solid var(--trait);
}
.fiche-lien { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; min-width: 0; }
.fiche-txt { display: flex; flex-direction: column; min-width: 0; }
.fiche-txt small { color: var(--encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appel {
  flex: none; display: grid; place-items: center; width: 48px; align-self: stretch;
  color: var(--vert); border-left: 1px solid var(--trait);
}
.num {
  flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--vert); color: #fff; font-weight: 700; font-size: .85rem;
}
@media (prefers-color-scheme: dark) { .num { color: #10201a; } }
.vide { color: var(--encre-3); list-style: none; }
.tuile-cat { border-left: 6px solid var(--cat); }
.cat-randonnee { --cat: var(--r-pratique); }
.cat-vtt { --cat: var(--r-commerces); }
.pastille {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--cat); color: #fff;
}
#cat-randonnee h2 { color: var(--r-pratique); }
#cat-vtt h2 { color: var(--r-commerces); }
.fiche-lien > svg { margin-left: auto; color: var(--encre-3); width: 18px; height: 18px; }
.titre-presse { font-weight: 500; }
.prix { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.prix-case {
  display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--rayon);
  background: var(--surface); border: 1px solid var(--trait);
}
.prix-case strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.prix-case small { color: var(--encre-3); font-size: .78rem; }
.fiche .carburants h2 { margin-top: .4rem; }
.note-presse { color: var(--encre-3); font-size: .85rem; }

/* Fiche */
.retour { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0; text-decoration: none; }
.retour svg { width: 18px; height: 18px; }
.surtitre { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--encre-3); font-size: .9rem; }
.fiche h1 { margin-top: .3rem; }
.horaires { background: var(--vert-clair); border-radius: var(--rayon); padding: 4px 14px; margin-bottom: 1rem; }
.horaires h2 { margin: .7rem 0 .2rem; color: var(--vert); font-size: .9rem; }
.horaires p { margin: .3rem 0 .7rem; }
.texte p { margin: 0 0 .8rem; }
.coordonnees { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 10px; }
.coordonnees li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.coordonnees svg { color: var(--encre-3); margin-top: 1px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0; }
.bouton {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  background: var(--vert); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem;
}
@media (prefers-color-scheme: dark) { .bouton { color: #10201a; } }
.bouton svg { width: 18px; height: 18px; }
.maj { color: var(--encre-3); font-size: .8rem; }

/* Plan */
.carte { height: calc(100vh - var(--barre) - 88px - env(safe-area-inset-bottom)); height: calc(100dvh - var(--barre) - 88px - env(safe-area-inset-bottom)); }
.note { margin: 0; padding: 6px 16px; font-size: .8rem; color: var(--encre-3); }
.repere {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; color: #fff; font: 700 13px/1 system-ui, sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.repere:empty { width: 18px; height: 18px; margin: 6px; }
.repere-pratique { background: var(--r-pratique); }
.repere-commerces { background: var(--r-commerces); }
.repere-agenda { background: var(--r-agenda); }
.repere-decouverte { background: var(--r-decouverte); }
.bulle { display: flex; flex-direction: column; text-decoration: none; color: #1f2a24; }
.bulle small { color: #6f7a73; }
.leaflet-container { font: inherit; background: var(--fond); }

@media (min-width: 700px) {
  .tuiles { grid-template-columns: repeat(4, 1fr); }
  .tuile-carte { grid-column: auto; min-height: 84px; }
}