/* ============================================================
   Stations de lavage – feuille de style
   ============================================================ */

:root {
  /* Propre à l'application carte ; le reste vient de base.css. */
  --sidebar-w: 380px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font: 400 var(--t-md)/1.45 var(--font);
  color: var(--text);
  background: var(--panel-2);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font); font-weight: 650; text-wrap: balance; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }

/* ---------- Structure ---------- */

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 56px 1fr 38px;
  grid-template-areas: "topbar topbar" "sidebar map" "pied pied";
  height: 100vh;
}

/* ---------- Barre supérieure ---------- */

.topbar {
  grid-area: topbar;
  /* `position: relative` rend le z-index explicite : sur un élément de grille
     statique, tous les moteurs ne l'appliquent pas de la même façon, et les
     menus déroulants passeraient sous la carte. */
  position: relative;
  /* Surtout PAS d'`overflow: hidden` ici : les menus déroulants sont
     positionnés en absolu sous le bandeau et se feraient découper.

     Flex, et non grille. La grille en `1fr | centre | 1fr` centrait la barre
     de recherche sur la page, mais une piste `1fr` ne s'élargit pas au-delà
     de sa part : dès que la colonne d'actions dépassait, elle débordait par
     la gauche et recouvrait la recherche. En flex, les actions prennent la
     largeur qu'il leur faut, la recherche se comprime, et rien ne se
     superpose — quel que soit le nombre de boutons ajoutés plus tard. */
  display: flex;
  align-items: center;
  gap: 20px;          /* les trois blocs du bandeau ne se touchent pas */
  padding: 0 18px;
  background: var(--bg);
  color: var(--bandeau-texte);
  z-index: 1200;
}

/* Marque : logo remplaçable + intitulé.
   Elle cède la place avant la recherche — `flex-shrink` la laisse rétrécir,
   son intitulé passant en ellipse, puis disparaissant sous 1100 px. */
.marque {
  display: flex; align-items: center; gap: 11px; padding-right: 4px;
  color: inherit; text-decoration: none;
  flex: 0 1 auto; min-width: 0;
}
.marque-logo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  object-fit: contain; background: var(--bandeau-survol);
}
.marque-texte {
  font-weight: 650; font-size: 14px; letter-spacing: -.01em;
  line-height: 1.15; min-width: 0; color: var(--bandeau-texte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marque-texte small {
  display: block; font-weight: 400; font-size: 11px;
  color: var(--bandeau-texte-2); letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Barre de recherche unique, au centre.
   Fond blanc dès le repos : translucide sur un bandeau sombre, elle se
   confondait avec lui et ne se voyait qu'une fois cliquée. */
/* La recherche occupe l'espace libre, dans la limite d'une largeur lisible.
   `min-width: 0` est indispensable : sans lui, un élément flex refuse de
   passer sous la largeur de son contenu et repousse ses voisins. */
.recherche {
  position: relative; display: flex; align-items: center;
  flex: 1 1 440px; max-width: 440px; min-width: 180px;
  margin: 0 auto;
}
.recherche-loupe {
  position: absolute; left: 11px; width: 16px; height: 16px;
  color: var(--text-3); pointer-events: none;
}
.recherche input {
  width: 100%; padding: 7px 36px 7px 33px;
  border: 1px solid var(--bandeau-trait); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text);
  font-size: var(--t-sm);
  transition: border-color .14s, box-shadow .14s;
}
.recherche input::placeholder { color: var(--text-3); }
.recherche input:focus { border-color: var(--accent); }
.recherche input::-webkit-search-cancel-button { display: none; }

.recherche-geoloc {
  position: absolute; right: 6px; border: 0; background: none;
  padding: 4px; border-radius: 50%; line-height: 0; color: var(--text-3);
}
.recherche-geoloc svg { width: 16px; height: 16px; }
.recherche-geoloc:hover { color: var(--accent-dark); background: var(--accent-soft); }
.recherche-geoloc:disabled { opacity: .45; }

/* Liste de résultats : stations et lieux dans un même panneau */
.resultats {
  display: none; position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  z-index: 1400; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden auto; max-height: 60vh;
}
.resultats.ouvert { display: block; }

.resultat-section {
  padding: 8px 12px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.resultat {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border: 0; background: none; text-align: left;
}
.resultat:hover, .resultat.actif { background: var(--accent-soft); }
.resultat-icone { flex-shrink: 0; line-height: 0; }
.resultat-icone svg { width: 19px; height: 19px; }
.resultat-texte { min-width: 0; display: flex; flex-direction: column; }
.resultat-nom {
  font-size: 13px; font-weight: 550; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resultat-detail {
  font-size: 11.5px; color: var(--text-3); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.topbar-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 7px;
  /* Priorité absolue : les actions ne se compriment jamais, c'est ce qui
     garantit qu'aucun bouton n'en recouvre un autre. */
  flex: 0 0 auto;
  /* Le compteur se détache du reste : c'est une information, pas une action. */
  padding-left: 4px;
}
.topbar-actions .chip + * { margin-left: 5px; }
/* Aucun bouton ne se comprime : c'est en rétrécissant sous leur contenu qu'ils
   se chevauchaient. Quand la place manque, on en masque — voir plus bas. */
.topbar-actions > * { flex: 0 0 auto; }

.topbar .chip {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--bandeau-survol); color: var(--bandeau-texte-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* le compteur ne tremble pas en changeant */
}
.topbar .chip b { color: var(--bandeau-texte); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
  font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover { background: var(--panel-2); border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; border-color: var(--bandeau-trait); color: var(--bandeau-texte-2); }
.btn-ghost:hover { background: var(--bandeau-survol); color: var(--bandeau-texte); }
.btn-danger { background: var(--panel); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

/* ---------- Sidebar ---------- */

.sidebar {
  grid-area: sidebar;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  min-height: 0;
  z-index: 1100;
}


.filters { padding: 0 14px 12px; border-bottom: 1px solid var(--border); }
.filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters select {
  width: 100%; padding: 7px 9px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text);
}
.filters select:focus { border-color: var(--accent); }

.filter-toggle {
  margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px;
}
.tag {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-2);
  transition: background-color .12s, border-color .12s, color .12s;
}
.tag:hover { border-color: var(--accent); color: var(--accent-dark); }
.tag.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); font-weight: 650; }

.list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px; font-size: 12px; color: var(--text-2);
}
.list-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; }
.link-btn:hover { text-decoration: underline; }

.station-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; min-height: 0; }

.station-card {
  padding: 10px 11px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start;
}
.station-card:hover { background: var(--panel-2); border-color: var(--border); }
.station-card.active { background: var(--accent-soft); border-color: var(--accent); }
.dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; box-shadow: 0 0 0 2px var(--panel); }
.station-card h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.station-card p { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.station-card .meta { margin-top: 4px; font-size: 11px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }

.empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ---------- Carte ---------- */

/* Sans clipping, les tuiles et marqueurs que Leaflet positionne au-delà du
   cadre allongent le document et font apparaître une barre de défilement
   horizontale, qui rogne le pied de page. */
.map-wrap { grid-area: map; position: relative; overflow: hidden; }
#map { position: absolute; inset: 0; background: var(--carte-fond); }

.map-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 900; background: var(--bg); color: var(--bandeau-texte);
  padding: 8px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: var(--shadow-lg); display: none; align-items: center; gap: 10px;
}
.map-hint.show { display: flex; }

.legend {
  position: absolute; bottom: 22px; right: 12px; z-index: 800;
  background: var(--panel); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 11px; font-size: 11.5px; box-shadow: var(--shadow);
  transition: right .22s cubic-bezier(.4,0,.2,1);
}
.map-wrap.panel-open .legend { right: 412px; }
.map-wrap.panel-open .leaflet-control-layers { margin-right: 404px; transition: margin-right .22s; }
.legend h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.legend div { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--text-2); }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* Marqueurs */
.pin {
  width: 15px; height: 15px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid var(--panel);
  box-shadow: var(--shadow);
}
.pin.selected { width: 21px; height: 21px; z-index: 999; box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--accent-contraste); font-weight: 650; font-size: 12px;
  background: var(--accent); border: 3px solid var(--accent-soft);
  background-clip: padding-box;
}

/* ---------- Panneau détail / formulaire ---------- */

.panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 400px;
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); z-index: 1000;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.panel.open { transform: none; }

.panel-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
}
.panel-head h2 { margin: 0; font-size: 16px; line-height: 1.3; flex: 1; }
.panel-head .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.icon-btn {
  border: 0; background: none; padding: 4px; border-radius: 6px;
  color: var(--text-3); line-height: 0;
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

.panel-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; min-height: 0; }
.panel-foot {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--panel-2);
}
.panel-foot .grow { flex: 1; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.badge {
  font-size: 11.5px; font-weight: 550; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2);
}

.kv { display: grid; grid-template-columns: 108px 1fr; gap: 7px 12px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); word-break: break-word; }

.section-title {
  margin: 18px 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); font-weight: 650;
}

/* Formulaire */
.field { margin-bottom: 11px; }
.field label { display: block; font-size: 12px; font-weight: 550; color: var(--text-2); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 62px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.hint { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.checks label {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 400; color: var(--text); cursor: pointer; padding: 3px 0; margin: 0;
}
.checks input { width: auto; accent-color: var(--accent); }

/* ---------- Modale ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: var(--voile);
  display: none; align-items: center; justify-content: center; z-index: 2000;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 520px;
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.modal.large { max-width: 680px; }
.modal-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; color: var(--text-2); font-size: 13px;
  background: var(--panel-2); cursor: pointer;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }

.mapping-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.mapping-table td { padding: 4px 0; }
.mapping-table td:first-child { color: var(--text-2); padding-right: 10px; white-space: nowrap; }
.mapping-table select { width: 100%; padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); }

/* ---------- Toasts ---------- */

.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--bg); color: var(--bandeau-texte); padding: 10px 16px; border-radius: var(--radius);
  font-size: 13px; box-shadow: var(--shadow-lg); animation: rise .2s ease;
}
.toast.err { background: var(--danger); color: var(--accent-contraste); }
.toast.ok  { background: var(--success); color: var(--accent-contraste); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 56px 45vh 1fr auto; grid-template-areas: "topbar" "map" "sidebar" "pied"; }
  .sidebar { border-right: 0; border-top: 1px solid var(--border); }
  .panel { width: 100%; }
  .map-wrap.panel-open .legend { right: 12px; }
  .map-wrap.panel-open .leaflet-control-layers { margin-right: 0; }
  .topbar .chip { display: none; }
}

/* ---------- Comptes et validation ---------- */

.pastille {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px;
  background: var(--warn-vif); color: var(--bg); border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

.compte {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.compte:last-child { border-bottom: 0; }
.compte-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.compte-info b { font-size: 13.5px; }
.compte-info span { font-size: 12.5px; color: var(--text-2); }
.compte-info em { font-size: 12.5px; color: var(--text-2); font-style: italic; }
.compte-info .compte-date { font-size: 11.5px; color: var(--text-3); }
.compte-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Bandeau d'invitation à contribuer (visiteurs non connectés) */
.bandeau {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 10px; padding: 9px 11px;
  background: var(--accent-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text);
}
.bandeau p { margin: 0; flex: 1; line-height: 1.4; }

/* ---------- Champs refusés ---------- */

.field input.invalide, .field select.invalide, .field textarea.invalide {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.msg-erreur {
  margin-top: 4px; font-size: 11.5px; color: var(--danger); line-height: 1.35;
}

/* ---------- Recherche par ville / proximité ---------- */



/* Suggestions */

/* Lieu retenu */
.proximite-actif { padding: 12px 14px 0; }
.puce-lieu {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 11px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  font-size: 12.5px; color: var(--text);
}
.puce-lieu b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce-lieu select {
  border: 1px solid var(--border-strong); background: var(--panel); border-radius: 999px;
  padding: 2px 6px; font-size: 11.5px; color: var(--text);
}
.puce-lieu .icon-btn { color: var(--accent-dark); padding: 2px; }
.puce-lieu .icon-btn svg { width: 15px; height: 15px; }

/* Distance affichée sur les cartes */
.station-card .distance {
  font-weight: 650; color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.rang {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px;
  margin-right: 5px; border-radius: 50%; background: var(--accent);
  color: var(--accent-contraste); font-size: 10.5px; font-weight: 700; text-align: center;
}

.repere-lieu {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--panel);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow);
}

/* ---------- Épingles ---------- */

.epingle {
  display: block;
  filter: drop-shadow(0 2px 3px var(--voile));
  transition: transform .12s ease;
}
.leaflet-marker-icon:hover .epingle { transform: translateY(-2px); }
.epingle.selectionnee { filter: drop-shadow(0 4px 8px var(--voile)); }

/* ---------- Mini-fiche au clic ---------- */

.fiche-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius); padding: 0;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.fiche-popup .leaflet-popup-content { margin: 0; padding: 13px 14px 12px; width: auto !important; }
.fiche-popup .leaflet-popup-tip { border: 1px solid var(--border); border-top: 0; border-left: 0; }
.fiche-popup a.leaflet-popup-close-button { color: var(--text-3); padding: 6px 7px 0 0; }
.fiche-popup a.leaflet-popup-close-button:hover { color: var(--text); background: none; }

.fiche-popup h3 {
  margin: 0 16px 0 0; font-size: 14px; font-weight: 650;
  line-height: 1.3; color: var(--text);
}
.fiche-enseigne { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }

.fiche-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.fiche-badges .badge { font-size: 11px; padding: 2px 8px; }
.badge-distance {
  background: var(--accent-soft) !important; border-color: var(--accent) !important;
  color: var(--text) !important; font-variant-numeric: tabular-nums;
}

.fiche-adresse  { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.fiche-services { margin: 6px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.fiche-detail   { margin: 4px 0 0; font-size: 11.5px; color: var(--text-3); }

.fiche-actions {
  display: flex; gap: 6px; margin-top: 11px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.fiche-actions .btn { flex: 1; justify-content: center; text-decoration: none; }

/* ---------- Fonds de carte ---------- */

/* Fond épuré : OpenStreetMap désaturé, pour que les couleurs des
   catégories soient les seules teintes vives à l'écran. */
.fond-epure {
  filter: saturate(0.32) brightness(1.06) contrast(0.94);
}
/* `.fond-relief` et les règles `.sur-satellite` plus bas attendent un
   fournisseur de tuiles sous contrat : les fonds Relief (OpenTopoMap, service
   bénévole) et Satellite (Esri, appelé sans clé ni droit d'usage) ont été
   retirés de js/app.js. Elles reviendront avec la même clé que le fond
   principal. */
.fond-relief { filter: saturate(0.75) brightness(1.04); }

/* Sur fond satellite, les surcouches claires deviennent illisibles */
.sur-satellite .leaflet-control-scale-line,
.sur-satellite .leaflet-control-attribution {
  background: var(--voile); color: var(--bandeau-texte); border-color: transparent;
}
.sur-satellite .leaflet-control-attribution a { color: var(--accent); }
.sur-satellite .legend {
  background: var(--bg); border-color: var(--bandeau-trait); color: var(--bandeau-texte);
}
.sur-satellite .legend h5 { color: var(--bandeau-texte-2); }
.sur-satellite .legend div { color: var(--bandeau-texte); }

/* ---------- Légende par catégorie ---------- */

.legend div { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--text-2); }
.legend .pastille-type {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--panel);
}
.legend .pastille-type svg { width: 13px; height: 13px; }

/* ---------- Pictogramme de catégorie, réutilisable ---------- */

.picto-type {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--panel);
}
.picto-type svg { width: 14px; height: 14px; }
.picto-type.picto-sm { width: 18px; height: 18px; border-radius: 5px; }
.picto-type.picto-sm svg { width: 11px; height: 11px; }

/* La carte de station montre la catégorie au lieu d'une pastille muette */
.station-card { grid-template-columns: 22px 1fr; }

@media (max-width: 1100px) {
  .topbar { gap: 12px; }
  .marque-texte { display: none; }
}
@media (max-width: 900px) {
  .topbar-actions .btn:not(#btnAdd):not(#btnAuth) { display: none !important; }
}

.badge-type { display: inline-flex; align-items: center; gap: 5px; padding-left: 4px; }
.badge-type .picto-type { color: var(--panel); }

/* ---------- Galerie photos ---------- */

.galerie { margin-top: 2px; }
.galerie-vide { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

.galerie-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.vignette {
  position: relative; margin: 0; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--panel-2);
}
.vignette img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  cursor: zoom-in; transition: transform .18s ease;
}
.vignette:hover img { transform: scale(1.05); }

.vignette-principale {
  position: absolute; top: 4px; left: 4px; font-size: 11px; line-height: 1;
  padding: 3px 4px; border-radius: 4px; color: var(--warn-vif);
  background: var(--voile);
}
.vignette-actions {
  position: absolute; top: 4px; right: 4px; display: flex; gap: 3px;
  opacity: 0; transition: opacity .14s;
}
.vignette:hover .vignette-actions { opacity: 1; }
.vignette-actions button {
  border: 0; border-radius: 4px; width: 20px; height: 20px; padding: 0;
  font-size: 11px; line-height: 1; color: var(--bandeau-texte); background: var(--voile);
}
.vignette-actions button:hover { background: var(--danger); }
.vignette-actions button[data-act="principale"]:hover { background: var(--warn-vif); }

.galerie-ajout {
  display: block; margin-top: 8px; padding: 11px; text-align: center;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .14s, background .14s;
}
.galerie-ajout:hover { border-color: var(--accent); background: var(--accent-soft); }
.galerie-ajout span { display: block; font-size: 13px; font-weight: 550; color: var(--accent-dark); }
.galerie-ajout small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-3); }

.galerie-progression {
  margin-top: 7px; font-size: 12px; color: var(--text-2);
  padding: 6px 9px; background: var(--panel-2); border-radius: var(--radius-sm);
}

/* ---------- Visionneuse plein écran ---------- */

.visionneuse {
  position: fixed; inset: 0; z-index: 4000;
  background: var(--voile);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.visionneuse figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; position: relative; }
.visionneuse img {
  max-width: 100%; max-height: calc(100vh - 130px);
  border-radius: var(--radius); display: block; margin: 0 auto;
}
.visionneuse figcaption { margin-top: 10px; color: var(--bandeau-texte); font-size: 13px; }
.visionneuse-compteur {
  display: block; margin-top: 6px; color: var(--bandeau-texte-2);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.visionneuse-fermer, .visionneuse-nav {
  position: absolute; border: 0; background: var(--bandeau-survol);
  color: var(--bandeau-texte); border-radius: 50%; cursor: pointer; line-height: 1;
}
.visionneuse-fermer { top: 18px; right: 20px; width: 36px; height: 36px; font-size: 17px; }
.visionneuse-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; }
.visionneuse-nav.precedent { left: 18px; }
.visionneuse-nav.suivant { right: 18px; }
.visionneuse-fermer:hover, .visionneuse-nav:hover { background: var(--bandeau-trait); }

/* ---------- Vue par région ---------- */

.bulle-region {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; text-align: center; padding: 3px;
  color: var(--accent-contraste);
  /* Légèrement translucide : les contours de départements restent lisibles dessous. */
  background: color-mix(in srgb,
    color-mix(in srgb, var(--accent) calc(var(--intensite) * 100%), var(--bg)) 88%, transparent);
  border: 2px solid var(--panel);
  box-shadow: var(--shadow);
  transition: transform .14s ease;
}
.bulle-region:hover { transform: scale(1.07); }
.bulle-region b { font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bulle-region span {
  font-size: 8.5px; line-height: 1.1; margin-top: 2px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92;
}

/* Repères au zoom pays : noms de villes et contours de départements */
.etiquette-ville {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: var(--text-2); pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 3px var(--panel), 0 0 3px var(--panel), 0 1px 2px var(--panel), 0 -1px 2px var(--panel);
}
.sur-satellite .etiquette-ville { color: var(--bandeau-texte); text-shadow: 0 0 3px var(--bg), 0 1px 2px var(--bg); }
.tooltip-departement { font-size: 12px; padding: 3px 8px; }

.indicateur-regions {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 850; background: var(--panel); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; color: var(--text-2);
  box-shadow: var(--shadow);
}
.sur-satellite .indicateur-regions {
  background: var(--bg); color: var(--bandeau-texte); border-color: var(--bandeau-trait);
}

/* ---------- Pied de page de la carte ---------- */

.pied {
  grid-area: pied;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 16px; background: var(--bg); color: var(--bandeau-texte-2);
  font-size: 11.5px; line-height: 1.3; border-top: 1px solid var(--bandeau-trait);
  overflow: hidden; z-index: 1150;
}
.pied-nav { display: flex; gap: 16px; flex-shrink: 0; }
.pied-nav a { color: var(--bandeau-texte-2); text-decoration: none; font-weight: 550; }
.pied-nav a:hover { color: var(--bandeau-texte); text-decoration: underline; }
.pied-mentions {
  margin: 0; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pied-mentions a { color: var(--bandeau-texte-2); }
.pied-mentions #piedCompte { color: var(--bandeau-texte); }

/* ---------- Menu Villes du bandeau ---------- */

.menu-villes-carte { position: relative; }
.menu-villes-carte summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--bandeau-trait);
  color: var(--bandeau-texte-2); font-size: 13px; font-weight: 550; white-space: nowrap;
}
.menu-villes-carte summary::-webkit-details-marker { display: none; }
.menu-villes-carte summary:hover { background: var(--bandeau-survol); color: var(--bandeau-texte); }
.menu-villes-carte[open] summary { background: var(--bandeau-trait); color: var(--bandeau-texte); }
.menu-villes-carte summary span { font-size: 9px; opacity: .8; }

.menu-villes-carte .menu-villes-panneau {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 1400;
  width: min(420px, calc(100vw - 32px));
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px 14px;
}
.menu-villes-carte .menu-villes-titre {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.menu-villes-carte ul {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px;
}
.menu-villes-carte li a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 7px; border-radius: 6px;
  font-size: 13px; text-decoration: none; color: var(--text);
}
.menu-villes-carte li a:hover { background: var(--accent-soft); }
.menu-villes-carte li b { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.menu-villes-carte .menu-villes-toutes {
  display: block; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 550; text-decoration: none;
}
.menu-villes-carte .menu-villes-toutes:hover { text-decoration: underline; }

/* ---------- État du compte ---------- */

.bloc-compte {
  display: flex; align-items: center; gap: 8px;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--bandeau-trait);
}
.bloc-compte .pastille-etat {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--bandeau-texte-2);
}
.bloc-compte .pastille-etat[data-etat="connecte"] { background: var(--success); }
.bloc-compte .pastille-etat[data-etat="attente"] { background: var(--warn-vif); }

/* Dégradé de la barre à mesure qu'elle se resserre.
   L'ordre des sacrifices suit l'utilité : les outils d'appoint d'abord, les
   points d'entrée du site en dernier.

   Depuis le passage en flex, ces seuils ne protègent plus d'un chevauchement
   — il ne peut plus s'en produire — mais d'un débordement horizontal quand
   la recherche a atteint sa largeur minimale. Ils ont donc pu descendre :
   les boutons restent visibles beaucoup plus longtemps qu'avec la grille. */
@media (max-width: 1400px) {
  #btnImport, #btnExport { display: none !important; }
}
@media (max-width: 1240px) {
  /* Le chevron et le nom complet du pays partent ; le code langue reste. */
  .menu-villes-carte summary,
  .menu-pays summary { padding-left: 9px; padding-right: 9px; }
  .menu-villes-carte summary span,
  .menu-pays summary span { display: none; }
}
@media (max-width: 1150px) {
  #btnBackOffice { display: none !important; }
}
@media (max-width: 1020px) {
  #btnDoublons { display: none !important; }
}
@media (max-width: 880px) {
  .menu-villes-carte, #btnProgrammes { display: none; }
}
@media (max-width: 900px) {
  .pied { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 14px; }
  .pied-mentions { text-align: left; white-space: normal; }
}

}

/* ── Sélecteur de pays ───────────────────────────────────────
   Même habillage que le menu des villes : c'est un voisin immédiat dans la
   barre, une différence de style n'y serait qu'un bruit. */
.menu-pays { position: relative; }
.menu-pays summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--bandeau-trait);
  color: var(--bandeau-texte-2); font-size: 13px; font-weight: 550; white-space: nowrap;
}
.menu-pays summary::-webkit-details-marker { display: none; }
.menu-pays summary:hover { background: var(--bandeau-survol); color: var(--bandeau-texte); }
.menu-pays[open] summary { background: var(--bandeau-trait); color: var(--bandeau-texte); }
.menu-pays summary span { font-size: 9px; opacity: .8; }

.menu-pays-panneau {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 1400;
  min-width: 190px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.menu-pays-choix {
  appearance: none; border: 0; background: none; cursor: pointer;
  text-align: left; padding: 7px 10px; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--text);
}
.menu-pays-choix:hover { background: var(--accent-soft); }
.menu-pays-choix.on { background: var(--accent-soft); font-weight: 650; }


/* ── Alignement du bandeau ───────────────────────────────────
   Les contrôles avaient trois hauteurs différentes — 26 px pour les boutons,
   30 px pour les menus, 26 pour le compteur — et se lisaient comme un défaut
   d'espacement. Une hauteur commune, imposée ici plutôt que déduite des
   paddings et des métriques de police, les aligne quelle que soit la langue. */
.topbar-actions > * { height: 30px; }
.topbar-actions .btn,
.topbar-actions .chip {
  height: 30px; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center;
}
.topbar-actions .bloc-compte { display: inline-flex; align-items: center; gap: 7px; }
.menu-villes-carte summary,
.menu-pays summary {
  height: 30px; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
}
/* La barre de recherche est le seul élément volontairement plus haut :
   c'est la cible principale du bandeau, elle doit se distinguer. */
.recherche input { height: 34px; box-sizing: border-box; }

/* ---------- Thème sombre : le fond de carte ----------
   Les jetons de base.css habillent tout le reste ; seules les tuiles, qui
   sont des images, demandent un filtre. Il inverse la carte claire en carte
   sombre, les marqueurs (autre calque) gardant leurs teintes. */
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.4) brightness(.82) contrast(.92); }
  .leaflet-container { background: var(--carte-fond); }
  .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a, .leaflet-control-attribution, .leaflet-control-scale-line {
    background: var(--panel); color: var(--text);
  }
  .leaflet-bar a { border-bottom-color: var(--border); }
  .leaflet-control-attribution a { color: var(--accent); }
}

/* ── Téléphone ───────────────────────────────────────────────
   À 900 px la grille passe en une colonne, mais elle débordait quand même :
   un élément de grille a `min-width: auto`, et le bandeau — recherche à
   180 px minimum, compteur, boutons — imposait sa largeur intrinsèque à toute
   la colonne. À 390 px la page faisait 695 px de large, carte comprise.
   En fin de feuille : ces règles doivent passer après celles d'alignement du
   bandeau, qui ont la même spécificité. */
@media (max-width: 600px) {
  #app { height: 100vh; height: 100dvh; grid-template-rows: 52px 48vh 1fr auto; }
  #app > * { min-width: 0; }
  .topbar { gap: 8px; padding: 0 10px; }
  .recherche { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
  .topbar-actions { gap: 5px; padding-left: 0; }
  /* La règle « .topbar .chip { display: none } » de 900 px perdait contre
     « .topbar-actions .chip { display: inline-flex } », écrite plus bas à
     spécificité égale : le compteur restait, et recouvrait la recherche. */
  .topbar-actions .chip { display: none; }
  /* Le compte ne tient pas à côté de la langue et du pays sur 390 px : la
     connexion reste possible depuis un écran plus large. Le compteur, lui,
     est repris dans le panneau (« 20 100 station(s) »). */
  .topbar-actions .bloc-compte { display: none; }
  .map-hint { max-width: calc(100% - 24px); white-space: normal; text-align: center; font-size: 12px; padding: 7px 12px; }
  .legend { display: none; }   /* sur 48 vh de carte, elle en cachait un quart */
  .indicateur-regions { max-width: calc(100% - 24px); }
  .pied { overflow: visible; }
  .pied-nav { flex-wrap: wrap; gap: 6px 12px; }