/* =========================================================
   Carte interactive des stations — vue plein écran

   Reprend la charte du site : Raleway, bordeaux #800000 et rouge #c21532
   (les deux accents du thème Neve), gris #f0f1f3, texte #222.
   Aucun angle arrondi : toutes les surfaces sont franches.
   ========================================================= */

#stations.stations-app {
  --st-red:      #c21532;        /* accent secondaire du thème */
  --st-red-dk:   #800000;        /* accent principal */
  --st-black:    #450001;        /* fond sombre du thème */
  --st-ink:      #222222;
  --st-grey:     #6B6B6B;
  --st-bg:       #f0f1f3;
  --st-white:    #fff;
  --st-line:     #dcdee2;
  --st-blue:     #800000;
  /* Les surfaces restent franches ; seules les commandes prennent un léger
     arrondi, assez pour adoucir sans virer à la pilule du thème. */
  --st-r-lg:     0;
  --st-r-md:     0;
  --st-r-sm:     0;
  --st-r-btn:    8px;
  --st-shadow:   0 18px 44px rgba(69, 0, 1, .12);
  /* Hauteur réelle de l'en-tête du thème, mesurée au chargement par
     frontend.js. La valeur ci-dessous n'est qu'un repli. */
  --st-header-h: 150px;

  font-family: Raleway, Arial, Helvetica, sans-serif;
}

/* ── Passage en plein écran ─────────────────────────────
   L'en-tête du site est CONSERVÉ : logo, menu et bouton d'offre restent
   accessibles. La carte occupe ce qu'il reste de la fenêtre, sous lui.
   Seuls le pied de page et les habillages de contenu sont masqués.
   Les sélecteurs couvrent Neve (#site-footer, .nv-*) comme les thèmes
   classiques (.entry-*, .post-inner). */
body.stations-fullscreen { overflow: hidden; }

body.stations-fullscreen #site-footer,
body.stations-fullscreen .site-footer,
body.stations-fullscreen .footer-nav-widgets-wrapper,
body.stations-fullscreen .nv-page-title-wrap,
body.stations-fullscreen .nv--yoast-breadcrumb,
body.stations-fullscreen #site-content > .pagination,
body.stations-fullscreen .entry-header,
body.stations-fullscreen .post-inner > .entry-content > p:empty { display: none !important; }

body.stations-fullscreen #site-content,
body.stations-fullscreen .post-inner,
body.stations-fullscreen .neve-main,
body.stations-fullscreen .single-page-container,
body.stations-fullscreen .nv-single-page-wrap,
body.stations-fullscreen .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* L'en-tête passe au-dessus de la carte et cesse d'être transparent :
   sinon les tuiles défilent derrière le menu. */
body.stations-fullscreen .site-header,
body.stations-fullscreen #header-grid {
  position: relative;
  z-index: 20;
  background: var(--nv-site-bg, #fff);
}

#stations.stations-app {
  position: fixed;
  top: var(--st-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Le thème impose #stations{height:70vh} : on reprend la main. */
  height: auto;
  max-height: none;
  z-index: 5;
  color: var(--st-ink);
}

/* ── Carte ──────────────────────────────────────────────── */
#stations.stations-app .stations-map {
  position: absolute;
  inset: 0;
  /* Même remarque que pour #stations : le thème fixe #map{height:600px}. */
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  z-index: 0;
  background: var(--st-bg);
}

#stations.stations-app .stations-shell {
  position: absolute;
  inset: 0;
  z-index: 400;
  padding: 24px 28px;
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
}

#stations.stations-app .stations-finder {
  display: grid;
  grid-template-columns: 426px 1fr;
  min-height: 0;
  pointer-events: none;
}

#stations.stations-app .panel,
#stations.stations-app .maptools,
#stations.stations-app .filters--map { pointer-events: auto; }


/* ── Boutons : on repart d'une base neutre ──────────────
   Le thème habille tous les <button> — angles à 100 px, capitales,
   interlettrage de 2 px. Ces réglages débordent sur chaque bouton du plugin
   (lignes de la liste, suggestions, pastilles) et y produisent des arrondis
   qu'on n'a pas demandés. Cette règle n'a qu'un seul type de sélecteur : toutes
   celles qui suivent, plus spécifiques, gardent la main sur ce qu'elles
   décident vraiment. */
#stations.stations-app button {
  border-radius: var(--st-r-btn);
  box-shadow: none;
  /* Le thème pose aussi une marge intérieure sur tous les boutons. Un bouton
     dimensionné en dur — les flèches de photo, 32 px — se retrouvait gonflé
     dès que le modèle de boîte n'était pas `border-box`. Chaque bouton qui a
     besoin d'une marge la déclare lui-même, et sa règle l'emporte. */
  padding: 0;
  box-sizing: border-box;
  /* Le thème impose aussi une couleur de texte aux boutons — blanche, pensée
     pour ses propres boutons pleins. Sur un fond clair, le libellé devenait
     invisible. On revient à la couleur héritée ; les boutons sombres du plugin
     redéclarent le blanc de leur côté. */
  color: inherit;
}

/* ── Panneau ────────────────────────────────────────────── */
#stations.stations-app .panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--st-white);
  border-radius: 0;
  box-shadow: var(--st-shadow);
  overflow: hidden;
}

#stations.stations-app .panel > .head,
#stations.stations-app .panel > .search,
#stations.stations-app .panel > .filters { flex: none; }

/* ── En-tête du panneau ─────────────────────────────────── */
/* ── Titre du panneau ───────────────────────────────────
   Le panneau s'ouvre directement sur la recherche. Le titre reste dans le
   document — c'est le seul <h1> de la page, celui du thème étant masqué par
   le plein écran — mais il ne prend plus de place à l'écran. */
#stations.stations-app .head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#stations.stations-app .lede {
  position: relative;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--st-grey);
}

#stations.stations-app .lede b { font-weight: 800; color: var(--st-ink); }


/* Repli du volet : n'existe qu'en mobile, où le panneau recouvre la carte. */
#stations.stations-app .sheet-close { display: none; }

/* ── Recherche ──────────────────────────────────────────── */
#stations.stations-app .search { position: relative; padding: 14px 26px 25px; display: grid; gap: 8px; }

#stations.stations-app .field {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding: 0 20px;
  background: var(--st-bg);
  border-radius: var(--st-r-btn);
}

#stations.stations-app .field:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--st-black); }

#stations.stations-app .field input {
  width: 100%;
  /* Le thème pose margin:0 0 20px et padding:10px 20px sur les champs : la
     marge basse décentrait le texte vers le haut dans ce conteneur centré,
     et le padding gauche l'éloignait de la loupe. */
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  box-shadow: none;
}

#stations.stations-app .field input::placeholder { color: #9B9B9B; }
#stations.stations-app .field input::-webkit-search-cancel-button { -webkit-appearance: none; }

#stations.stations-app .geo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 20px 0 22px;
  border: 0;
  border-radius: var(--st-r-btn);
  background: var(--st-black);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease;
}

/* Le libellé passait sur deux lignes : le thème met les boutons en capitales
   avec un interlettrage large, et « Rechercher une station proche » n'entre pas
   dans la largeur du panneau. On le réduit plutôt que de raccourcir le texte,
   qui dit exactement ce que fait le bouton. */
#stations.stations-app .geo-label {
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1.25;
  text-align: left;
}

#stations.stations-app .geo:hover { background: #000; color: #fff; }
#stations.stations-app .geo[data-on="1"] { background: var(--st-red); }
#stations.stations-app .geo svg { flex: none; }

/* ── Filtres (chips) ────────────────────────────────────── */
#stations.stations-app .filters { padding: 4px 26px 16px; }

#stations.stations-app .flabel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 9px;
}

#stations.stations-app .flabel > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-grey);
}

#stations.stations-app .reset {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-red);
  cursor: pointer;
}

/* Filtres : une rangée de pastilles rondes à la couleur de la prestation.
   Les six tiennent sur une ligne, sans défilement, pour ~62 px de haut —
   la liste des stations garde ainsi la place utile du panneau.
   La couleur vient de la taxonomie via --chip-color (inline). */
#stations.stations-app .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  max-height: none;
  overflow: visible;
}

#stations.stations-app .chip {
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: opacity .14s ease, transform .14s ease;
  opacity: .45;                        /* non sélectionné : estompé */
}

#stations.stations-app .chip:hover { opacity: .8; }
#stations.stations-app .chip:hover .chip-icon { transform: translateY(-1px); }

#stations.stations-app .chip[aria-pressed="true"] { opacity: 1; }
#stations.stations-app .chip[disabled] { opacity: .18; cursor: default; }
#stations.stations-app .chip[disabled]:hover { opacity: .18; }
#stations.stations-app .chip[disabled]:hover .chip-icon { transform: none; }
#stations.stations-app .chip:focus-visible { outline: none; }
#stations.stations-app .chip:focus-visible .chip-icon { outline: 2px solid var(--st-black); outline-offset: 3px; }

/* Aucun filtre actif : les six restent en pleine couleur */
#stations.stations-app .chips:not(.has-active) .chip:not([disabled]) { opacity: 1; }

/* Les pictos sont des SVG chargés en <img> : ils ne peuvent pas hériter de la
   couleur de la page. Ils sont dessinés en bordeaux foncé, et repassés en blanc
   ici, où ils reposent sur un aplat de couleur. */
#stations.stations-app .chip-icon img,
#stations.stations-app .svc-item .chip-icon img {
  filter: brightness(0) invert(1);
}

#stations.stations-app .chip-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  /* Rondes, comme les épingles et les regroupements : posées à même la carte,
     elles appartiennent à la même famille de repères. */
  border-radius: 50%;
  background: var(--chip-color, var(--st-grey));
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(69, 0, 1, .28);
  transition: box-shadow .14s ease, transform .14s ease;
}

/* Sélectionné : anneau sombre autour de la pastille */
#stations.stations-app .chip[aria-pressed="true"] .chip-icon {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st-black);
}

#stations.stations-app .chip-icon img {
  /* Icônes de taxonomie carrées (75×75) : elles peuvent occuper l'essentiel
     de la pastille de 42 px sans se déformer. */
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

#stations.stations-app .chip-short { font-size: 11px; font-weight: 800; letter-spacing: .02em; }

/* Le nom reste dans le DOM pour les lecteurs d'écran, hors de l'affichage. */
#stations.stations-app .chip-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#stations.stations-app .chip .n {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--st-grey);
  font-variant-numeric: tabular-nums;
}

#stations.stations-app .chip[aria-pressed="true"] .n { color: var(--st-ink); }

#stations.stations-app .dot { width: 8px; height: 8px; border-radius: 0; flex: none; }

/* ── Compteur ───────────────────────────────────────────── */


/* ── Liste ──────────────────────────────────────────────── */
#stations.stations-app .list-wrap {
  flex: 1 1 auto;
  min-height: 140px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 18px 18px;
}

#stations.stations-app .station-list { list-style: none; margin: 0; padding: 0; }
#stations.stations-app .station-list > li { margin: 0; padding: 0; list-style: none; }
#stations.stations-app .station-list > li::before,
#stations.stations-app .station-list > li::marker { content: none; }

#stations.stations-app .station-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 15px 16px;
  border: 0;
  border-radius: 0;   /* rangée : reste franche */
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

#stations.stations-app .station-row:hover,
#stations.stations-app .station-row.hot { background: var(--st-bg); }
#stations.stations-app .station-row:focus-visible { outline: 2px solid var(--st-black); outline-offset: -2px; }
#stations.stations-app .station-row[aria-current="true"] { background: var(--st-black); color: #fff; }
#stations.stations-app .station-row[aria-current="true"] .ad,
#stations.stations-app .station-row[aria-current="true"] .km { color: rgba(255, 255, 255, .6); }

#stations.stations-app .station-row-main { display: block; min-width: 0; }
#stations.stations-app .station-row .nm { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
#stations.stations-app .station-row .ad { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--st-grey); }
#stations.stations-app .station-row .km { font-size: 12.5px; font-weight: 800; color: var(--st-grey); font-variant-numeric: tabular-nums; white-space: nowrap; align-self: start; }

#stations.stations-app .station-row .svc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

/* Libellé en toutes lettres : la pastille s'ajuste au texte. */
#stations.stations-app .station-row .svc i {
  height: 20px;
  padding: 0 9px;
  text-transform: uppercase;
  /* Sur 20 px de haut, le jeton donne une étiquette franchement arrondie —
     c'est ce qu'on veut pour un libellé court posé sous le nom. */
  border-radius: var(--st-r-btn);
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
}

#stations.stations-app .empty {
  padding: 48px 22px;
  text-align: center;
  color: var(--st-grey);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

/* ── Fiche détail (overlay du panneau) ──────────────────── */
#stations.stations-app .detail {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  overflow: auto;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

#stations.stations-app .detail.on { transform: none; opacity: 1; pointer-events: auto; }

#stations.stations-app .d-back {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  margin: 22px 0 0 26px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: var(--st-r-btn);
  background: var(--st-bg);
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

#stations.stations-app .d-back:hover { background: var(--st-black); color: #fff; }

#stations.stations-app .d-photo {
  position: relative;
  height: 200px;
  margin: 18px 26px 0;
  border-radius: var(--st-r-btn);
  overflow: hidden;
  background: var(--st-bg) center/cover no-repeat;
}

#stations.stations-app .d-photo .d-photo-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: #9B9B9B;
  font-size: 13px;
  font-weight: 600;
}

/* Navigation entre les photos */
#stations.stations-app .d-photo-nav {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}

#stations.stations-app .d-photo-nav button {
  flex: none;                       /* le conteneur est en flex : pas d'étirement */
  width: 32px;
  height: 32px;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 0;
  /* Rondes, comme les flèches de galerie de la fiche station. */
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  color: var(--st-ink);
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

#stations.stations-app .d-body { padding: 22px 26px 30px; }
#stations.stations-app .d-name { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
#stations.stations-app .d-addr { margin-top: 10px; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--st-grey); }

#stations.stations-app .d-sec {
  margin: 28px 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-grey);
}

#stations.stations-app .d-svc { display: flex; flex-wrap: wrap; gap: 8px; }

#stations.stations-app .tag {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--st-r-btn);
  background: var(--st-bg);
  font-size: 13.5px;
  font-weight: 600;
}

#stations.stations-app .hours { display: grid; gap: 2px; font-size: 14px; font-weight: 500; }
#stations.stations-app .hours > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--st-line); }
#stations.stations-app .hours span:last-child { font-weight: 600; color: var(--st-grey); font-variant-numeric: tabular-nums; }
#stations.stations-app .hours-free { padding: 4px 0; line-height: 1.6; }

#stations.stations-app .actions { display: grid; gap: 9px; margin-top: 26px; }

#stations.stations-app .actions .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 22px;
  border-radius: var(--st-r-btn);
  background: var(--st-red);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

#stations.stations-app .actions .btn:hover { background: var(--st-red-dk); color: #fff; }
#stations.stations-app .actions .btn.dark { background: var(--st-black); }
#stations.stations-app .actions .btn.dark:hover { background: #000; }

/* ── Outils de carte ────────────────────────────────────── */
#stations.stations-app .map-wrap { position: relative; min-height: 0; }

#stations.stations-app .maptools {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 500;
  display: grid;
  gap: 9px;
  justify-items: end;
}

#stations.stations-app .seg {
  display: flex;
  padding: 4px;
  border-radius: var(--st-r-btn);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

#stations.stations-app .seg button {
  padding: 9px 18px;
  border: 0;
  border-radius: calc(var(--st-r-btn) - 3px);
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#stations.stations-app .seg button[aria-pressed="true"] { background: var(--st-black); color: #fff; }



/* ── Marqueurs Leaflet ──────────────────────────────────── */
#stations.stations-app .leaflet-container { font: inherit; background: var(--st-bg); }

/* Marqueurs images du réseau (pin « pompe » / pin « shop ») */
.leaflet-marker-icon.station-pin {
  filter: drop-shadow(0 3px 6px rgba(69, 0, 1, .35));
  transform-origin: 50% 95%;          /* la pointe reste sur la coordonnée */
  transition: transform .13s ease, filter .13s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}

.leaflet-marker-icon.station-pin.hot {
  transform: scale(1.18);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
  z-index: 900 !important;
}

.leaflet-marker-icon.station-pin.sel {
  transform: scale(1.3);
  filter: drop-shadow(0 0 0 rgba(185, 58, 34, .9)) drop-shadow(0 5px 8px rgba(0, 0, 0, .4));
  z-index: 1000 !important;
}


/* ── Épingle héritée d'une catégorie ────────────────────
   Construite par le script : une goutte à la couleur du terme, son picto au
   centre. Le picto est un SVG servi en <img>, donc insensible à `color` :
   on le repasse en blanc au filtre, comme dans les pastilles de filtre. */
#stations.stations-app .station-pin--cat { position: relative; background: none; border: 0; }

#stations.stations-app .station-pin--cat svg { display: block; }

#stations.stations-app .station-pin--cat img {
  position: absolute;
  top: 19px;                      /* centre de la tête de la goutte */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* Position de l'utilisateur : pastille bleue */
.pin { position: relative; }

.pin b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: var(--st-blue, #1D6FE0);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.pin.me b { background: #1D6FE0; box-shadow: 0 0 0 9px rgba(29, 111, 224, .18); }

.leaflet-control-attribution { font-size: 10px; }
#stations.stations-app .leaflet-bar { border: 0 !important; border-radius: var(--st-r-btn); overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .10) !important; }
#stations.stations-app .leaflet-bar a { border: 0 !important; font-weight: 700; }

.stations-map-error {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: #6B6B6B;
  font-size: 14px;
  font-weight: 500;
}

/* ── Bascule mobile ─────────────────────────────────────── */
#stations.stations-app .stations-sheet-toggle { display: none; }

/* ── Écrans peu hauts ───────────────────────────────────── */
@media (max-height: 780px) {
  #stations.stations-app .lede { display: none; }
}

/* ── Tablette ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  #stations.stations-app .stations-finder { grid-template-columns: 360px 1fr; }
  #stations.stations-app .stations-shell { padding-left: 18px; padding-right: 18px; }
}

/* ── Mobile : le panneau devient une feuille glissante ──── */
@media (max-width: 860px) {

  #stations.stations-app .stations-shell { padding: 0; }

  #stations.stations-app .stations-finder { display: block; height: 100%; }

  #stations.stations-app .panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Deux tiers de l'écran : assez pour lire trois stations d'un coup, en
       laissant plus de carte visible qu'aux trois quarts. `dvh` suit la barre
       d'adresse des navigateurs mobiles, qui se rétracte au défilement. */
    height: 65vh;
    height: 65dvh;
    border-radius: 0;
    /* Volet fermé, la barre de recherche reste visible en bas d'écran : c'est
       le premier geste attendu, il ne doit pas demander d'ouvrir la liste
       d'abord. `--st-bar-h` est mesurée au chargement par frontend.js, la
       hauteur dépendant de la taille du texte du navigateur. */
    transform: translateY(calc(100% - var(--st-bar-h, 132px)));
    transition: transform .28s ease;
    box-shadow: 0 -12px 40px rgba(69, 0, 1, .18);
  }

  #stations.stations-app.sheet-open .panel { transform: translateY(0); }

  /* Volet ouvert : la recherche disparaît de la liste. Elle est déjà en bas
     d'écran quand le volet est replié, et c'est là qu'on la cherche ; la
     répéter en tête de liste ne faisait que manger la hauteur utile. */
  #stations.stations-app.sheet-open .search { display: none; }

  /* Sans titre ni recherche, la liste démarrerait sous la flèche de repli :
     on lui réserve la place. */
  #stations.stations-app.sheet-open .list-wrap { padding-top: 52px; }

  /* Titre, poignée et flèche de repli n'ont de sens qu'une fois le volet
     ouvert : sur la barre fermée, la flèche mordait sur le champ de recherche
     et ne repliait rien. */
  #stations.stations-app:not(.sheet-open) .sheet-close,
  #stations.stations-app:not(.sheet-open) .panel::before { display: none; }

  /* La barre de recherche : le champ sur une ligne, la proximité et la liste
     sur la suivante. */
  #stations.stations-app .search {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #stations.stations-app .search .field { grid-column: 1 / -1; }

  /* Proximité réduite à son icône, posée à côté du bouton de liste. */
  #stations.stations-app .geo {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    width: 52px;
    padding: 0;
    justify-content: center;
  }

  #stations.stations-app .geo-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #stations.stations-app .geo svg { flex: none; }

  #stations.stations-app .panel::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 0;
    background: var(--st-line);
  }

  #stations.stations-app .lede { display: none; }

  /* Reliquat retiré : une règle `.search { padding: 14px 22px 12px }` traînait
     ici et écrasait celle du haut de ce même bloc — la marge basse calculée
     avec env(safe-area-inset-bottom) ne servait donc à rien, et la barre
     passait sous l'indicateur d'accueil des téléphones à encoche. */
  #stations.stations-app .filters { padding: 4px 22px 14px; }

  /* Bouton de repli du volet, en haut à droite. */
  #stations.stations-app .sheet-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--st-r-btn);
    background: none;
    color: var(--st-ink);
    cursor: pointer;
  }

  /* Plus de fond : le retour au toucher passe par la couleur du chevron. */
  #stations.stations-app .sheet-close:active { color: var(--st-red); }

  /* Outils de carte : plus compacts, l'écran est étroit. */
  #stations.stations-app .maptools { top: 10px; right: 10px; }

  /* Zoom + / − retiré : le pincement suffit, et la carte est trop étroite pour
     s'encombrer d'une commande de plus. */
  #stations.stations-app .leaflet-control-zoom { display: none; }
  #stations.stations-app .seg { padding: 3px; }
  #stations.stations-app .seg button { padding: 6px 11px; font-size: 11px; letter-spacing: .01em; }


  /* Bouton d'ouverture de la feuille */
  /* Plus de bouton flottant : il occupe la place laissée par le libellé de
     proximité, sur la même ligne. */
  #stations.stations-app .stations-sheet-toggle {
    grid-row: 2;
    grid-column: 1;
    justify-self: stretch;
    margin-left: 60px;                    /* dégage l'icône de proximité */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--st-r-btn);
    background: var(--st-black);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    pointer-events: auto;
  }

  #stations.stations-app.sheet-open .stations-sheet-toggle { display: none; }
}

/* Légende : vignettes des marqueurs réels */

/* Pastilles de regroupement (images m1…m5 du réseau) */

/* ── Suggestions de recherche ───────────────────────────
   Liste déroulante sous le champ : nos stations d'abord, puis les localités
   suisses renvoyées par le géocodeur fédéral. */
#stations.stations-app .sug {
  position: absolute;
  left: 26px;
  right: 26px;
  top: calc(14px + 52px + 4px);
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  background: var(--st-white);
  border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow);
}

#stations.stations-app .sug-head {
  padding: 8px 16px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-grey);
  background: var(--st-bg);
}

#stations.stations-app .sug-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;   /* rangée : reste franche */
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--st-ink);
  /* L'interlettrage de 2 px du thème faisait déborder « Mérillat Station
     service Porrentruy » bien avant la fin de la ligne. */
  letter-spacing: .01em;
}

/* Filet de séparation entre deux entrées d'un même groupe. */
#stations.stations-app .sug-item + .sug-item { border-top: 1px solid var(--st-bg); }

#stations.stations-app .sug-item:hover,
#stations.stations-app .sug-item.on {
  background: var(--st-bg);
  border-top-color: var(--st-bg);
}

/* Trait rouge à gauche de l'entrée survolée : le repère au clavier doit se
   voir sans compter sur une nuance de gris. */
#stations.stations-app .sug-item.on { box-shadow: inset 3px 0 0 var(--st-red); }

#stations.stations-app .sug-ico {
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: var(--st-red);
  color: #fff;
}

#stations.stations-app .sug-ico svg { width: 16px; height: 16px; }

/* Les localités reprennent le noir, pour se distinguer des stations. */
#stations.stations-app .sug-item[data-type="lieu"] .sug-ico { background: var(--st-black); }

#stations.stations-app .sug-txt { display: grid; gap: 1px; min-width: 0; }

#stations.stations-app .sug-txt b {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#stations.stations-app .sug-txt i {
  font-style: normal;
  font-size: 12px;
  color: var(--st-grey);
}

.stations-cluster-wrap { background: none; border: 0; }

/* Pastilles de regroupement : carrés pleins, du rouge vers le bordeaux à
   mesure que le paquet grossit. Elles étaient cinq images ; c'est désormais
   du CSS, donc rien à recharger et une teinte qui suit la charte. */
.stations-cluster {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  /* Rondes comme les épingles : deux formes différentes sur la même couche
     donneraient l'impression de deux systèmes de repérage. */
  border-radius: 50%;
  background: #c21532;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(69, 0, 1, .32);
}

.stations-cluster--2 { background: #a81330; }
.stations-cluster--3 { background: #94112b; }
.stations-cluster--4 { background: #800000; }
.stations-cluster--5 { background: #450001; }

.stations-cluster span {
  font-family: Raleway, Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1;
}

.marker-cluster, .marker-cluster div { background: none !important; }

/* =========================================================
   Lisibilité des surfaces blanches par-dessus la carte
   ========================================================= */

/* Le thème rend la barre d'outils du header translucide (60 % + flou) :
   au-dessus d'une carte, le contenu transparaît. On l'opacifie, mais
   seulement sur la page carte. */
body.stations-fullscreen .header-toggles {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

/* Attribution Leaflet : plus lisible sur fond satellite */
#stations.stations-app .leaflet-control-attribution {
  background: rgba(255, 255, 255, .96);
}

/* Fond satellite : les pastilles de regroupement et les libellés ont
   besoin de contraste sur une imagerie sombre. */
#stations.stations-app.is-satellite .stations-cluster span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6);
}

#stations.stations-app.is-satellite .leaflet-marker-icon.station-pin {
  filter: drop-shadow(0 3px 6px rgba(69, 0, 1, .35));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}

/* =========================================================
   Itinéraire depuis une adresse
   ========================================================= */
.stations-route { stroke: #B93A22; }
.stations-route--direct { stroke: #6B6B6B; }

/* Point de départ saisi dans le champ de recherche */
.pin.origin b { background: #0C0C0C; box-shadow: 0 0 0 8px rgba(12, 12, 12, .16); }


/* ── Résumé d'itinéraire, dans la fiche ─────────────────
   Il flottait au-dessus du panneau et venait se poser en plein milieu des
   prestations. Il fait maintenant partie du contenu : il pousse ce qui suit
   au lieu de le recouvrir, et défile avec le reste. */
#stations.stations-app .d-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 10px;
  margin: 14px 0 4px;
  padding: 9px 9px 9px 13px;
  border-left: 3px solid var(--st-red);
  background: var(--st-bg);
}

#stations.stations-app .d-route-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

#stations.stations-app .d-route-txt .route-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-grey);
}

#stations.stations-app .d-route-txt strong { font-weight: 700; }

#stations.stations-app .d-route-km {
  font-size: 13px;
  font-weight: 800;
  color: var(--st-red);
  white-space: nowrap;
}

#stations.stations-app .d-route .route-clear {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--st-ink);
  font-size: 0;
  cursor: pointer;
}

#stations.stations-app .d-route .route-clear::before {
  content: '\00d7';
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

#stations.stations-app .d-route .route-clear:hover { background: var(--st-black); color: #fff; }

/* Liste déroulante de Google Places : au-dessus du panneau */
.pac-container { z-index: 100000 !important; border-radius: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18); border: 0; }
.pac-item { padding: 8px 12px; font-size: 13.5px; cursor: pointer; }
.pac-item-query { font-size: 14px; }



/* =========================================================
   Filtres de prestations — colonne flottante à droite
   (déplacés hors du panneau : voir views/map-stations.php)
   ========================================================= */
#stations.stations-app .filters--map {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: grid;
  gap: 10px;
  justify-items: center;
  /* Plus de cadre blanc : les pastilles se posent directement sur la carte.
     C'est leur propre liseré qui les détache du fond, comme les épingles. */
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: auto;
}

/* Le libellé « Prestations » n'a plus la place : il reste pour les
   lecteurs d'écran, chaque pastille portant déjà son intitulé. */
#stations.stations-app .filters--map .flabel > span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#stations.stations-app .filters--map .flabel { display: block; margin: 0; }

/* Réinitialiser : pastille discrète en bas de la colonne, visible
   seulement quand un filtre est actif. */
#stations.stations-app .filters--map .reset {
  order: 99;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  /* Le thème pose une marge intérieure sur tous les boutons : elle décalait la
     cellule de grille, et donc le picto. */
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(69, 0, 1, .28);
  color: var(--st-red);
  font-size: 0;
  cursor: pointer;
}

#stations.stations-app .filters--map .reset svg { display: block; grid-area: 1 / 1; }

/* Le libellé reste lisible par les lecteurs d'écran, mais hors du flux : en
   grille, il formait une seconde rangée qui décalait le picto vers le haut. */
#stations.stations-app .filters--map .reset span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#stations.stations-app .filters--map .reset:hover { background: var(--st-black); color: #fff; }
#stations.stations-app .filters--map .chips.has-active ~ .flabel .reset,
#stations.stations-app.has-active-filters .filters--map .reset { display: grid; }

/* Pastilles en colonne */
#stations.stations-app .filters--map .chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: none;
  overflow: visible;
}

#stations.stations-app .filters--map .chip {
  position: relative;
  width: 42px;
  gap: 0;
}

/* Le compteur devient un badge posé sur la pastille */
#stations.stations-app .filters--map .chip .n {
  position: absolute;
  right: -3px;
  bottom: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #fff;
  color: var(--st-ink);
  font-size: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* La légende remonte pour ne pas croiser la colonne */

@media (max-width: 860px) {
  #stations.stations-app .filters--map {
    top: auto;
    bottom: 88px;
    right: 12px;
    transform: none;
    padding: 0;
    gap: 10px;
  }
  #stations.stations-app .filters--map .chip,
  #stations.stations-app .filters--map .reset { width: 40px; height: 40px; }
  #stations.stations-app .filters--map .chip-icon { width: 40px; height: 40px; }
  #stations.stations-app .filters--map .chip-icon img { width: 22px; height: 22px; }
}

/* La colonne de filtres occupe désormais le bord droit : la légende passe
   à gauche de la zone carte pour ne plus la recouvrir. */

@media (max-width: 860px) {
}

/* Mobile : .map-wrap perd sa hauteur (le panneau devient une feuille), la
   colonne calée dessus sortait de l'écran. On la fixe au viewport. */
@media (max-width: 860px) {
  #stations.stations-app .filters--map {
    position: fixed;
    top: auto;
    bottom: 92px;
    right: 10px;
    transform: none;
    z-index: 600;
  }
}

/* Marge pour que les badges de comptage ne touchent pas le bord de l'écran */
@media (max-width: 860px) {
  #stations.stations-app .filters--map { right: 14px; gap: 12px; }
}

/* Compteurs retirés des pastilles de filtre : le nombre reste calculé pour
   désactiver une prestation sans résultat, mais n'est plus affiché. */
#stations.stations-app .filters--map .chip .n { display: none; }

/* Les badges ne débordent plus : la capsule peut se resserrer. */
#stations.stations-app .filters--map { gap: 12px; }

@media (max-width: 860px) {
  #stations.stations-app .filters--map { right: 12px; gap: 10px; }
}

/* Vignette de station dans la liste */
#stations.stations-app .station-row {
  grid-template-columns: 52px 1fr auto;
  gap: 2px 12px;
  align-items: start;
}

#stations.stations-app .station-thumb {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  border-radius: 0;
  overflow: hidden;
  background: var(--st-bg);
  flex: none;
}

#stations.stations-app .station-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#stations.stations-app .station-thumb.is-empty {
  background: var(--st-bg) center/22px no-repeat;
  opacity: .55;
}

/* Les pastilles de prestations passent sous la vignette */
#stations.stations-app .station-row .svc { grid-column: 2 / -1; margin-top: 8px; }

#stations.stations-app .station-row[aria-current="true"] .station-thumb {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* =========================================================
   Fiche station : photo agrandissable + prestations
   ========================================================= */

/* La photo ouvre la galerie en plein écran */
#stations.stations-app .d-photo { cursor: zoom-in; }

#stations.stations-app .d-photo::after {
  content: '⤢';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  font-size: 14px;
  color: var(--st-ink);
  opacity: 0;
  transition: opacity .14s ease;
  pointer-events: none;
}

#stations.stations-app .d-photo:hover::after { opacity: 1; }

/* Prestations : reprise des pastilles des filtres */
#stations.stations-app .d-svc {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
}

#stations.stations-app .svc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  text-align: center;
}

#stations.stations-app .svc-item .chip-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  /* Rondes comme les filtres de la carte : c'est la même taxonomie, elle doit
     se reconnaître d'un écran à l'autre. */
  border-radius: 50%;
  background: var(--chip-color, var(--st-grey));
  color: #fff;
}

#stations.stations-app .svc-item .chip-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

#stations.stations-app .svc-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--st-grey);
  hyphens: auto;
}

/* Fancybox au-dessus du panneau, qui monte très haut en z-index */
.fancybox__container { z-index: 200000; }

/* ── Mobile : pastilles de filtre ───────────────────────
   Placé ici, après la règle de bureau : les deux sélecteurs ont la même
   spécificité, c'est donc l'ordre qui décide. Le même bloc écrit plus haut
   n'avait aucun effet.

   Centrées verticalement, les pastilles se retrouvaient posées sur la liste dès
   que le volet s'ouvrait à mi-hauteur. On les passe en haut à GAUCHE : à droite
   elles recouvraient la bascule Plan/Satellite, et l'écran est trop étroit pour
   loger les deux du même côté. */
@media (max-width: 860px) {
  #stations.stations-app .filters--map {
    /* Une règle mobile plus haut les passe en `fixed` : le calage se ferait
       alors sur la fenêtre, donc derrière l'en-tête du site. On revient en
       `absolute`, comme la bascule Plan/Satellite voisine. */
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    bottom: auto;
    transform: none;
    gap: 10px;
  }
}

/* ── Mobile : sens d'ouverture des suggestions ──────────
   Placé en fin de fichier, après la règle générale : à spécificité égale,
   c'est l'ordre qui tranche.

   Volet fermé, la barre de recherche est collée en bas de l'écran. Une liste
   qui descend sort alors du cadre et devient inatteignable : elle s'ouvre donc
   vers le haut. Volet ouvert, la barre est revenue en haut du panneau et le
   sens normal reprend. */
@media (max-width: 860px) {
  #stations.stations-app .sug { left: 14px; right: 14px; }

  /* Le volet est en `overflow: hidden` : une liste qui remonte au-dessus de
     lui serait purement et simplement rognée. Volet fermé, il n'a rien à
     découper — son contenu déborde sous l'écran, invisible de toute façon. */
  #stations.stations-app:not(.sheet-open) .panel { overflow: visible; }

  #stations.stations-app:not(.sheet-open) .sug {
    top: auto;
    bottom: 100%;
    margin-bottom: 8px;
    /* Ne jamais dépasser la place réellement disponible au-dessus de la barre. */
    max-height: calc(100dvh - var(--st-header-h, 150px) - var(--st-bar-h, 132px) - 24px);
  }

  #stations.stations-app.sheet-open .sug {
    top: calc(12px + 52px + 4px);
    bottom: auto;
    max-height: 44dvh;
  }
}

/* Itinéraire affiché : la distance à vol d'oiseau de la fiche s'efface au
   profit des kilomètres réels du bandeau. Les voir côte à côte — « à 67 km »
   et « 94 km » pour la même station — se lit comme une incohérence. */
#stations.stations-app.has-route .d-dist { display: none; }