/* Vigirota Maps — style. Clair le jour, sombre la nuit (suit le fond de carte). */

@font-face { font-family: Inter; src: url(/polices/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Sora; src: url(/polices/sora.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --fond: #ffffff;
  --fond-2: #f3f5f8;
  --texte: #16202c;
  --doux: #5c6b7d;
  --trait: #e3e8ee;
  --ombre: 0 2px 6px rgba(16, 24, 40, .12), 0 8px 24px rgba(16, 24, 40, .10);
  --ambre: #ffb020;
  --ambre-fonce: #e59400;
  --bleu: #1a73e8;
  --nuit: #0b1420;
  --rouge: #e5484d;
  --rayon: 16px;
  color-scheme: light;
}
:root[data-theme='nuit'] {
  --fond: #121d2c;
  --fond-2: #0b1420;
  --texte: #e8eef6;
  --doux: #9fb0c4;
  --trait: #24354a;
  --ombre: 0 2px 6px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --bleu: #5b9dff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Un élément masqué l'est TOUJOURS : sans cette règle, un « display: flex »
   l'emportait sur l'attribut hidden — le message de prévention restait figé
   malgré « J'ai compris » (constat de Sami, 29/09/2026). */
[hidden] { display: none !important; }
/* Déjà lu lors d'une visite précédente : masqué avant le premier affichage,
   par le script en ligne de l'en-tête (voir app/index.html). */
.prevention-lue .prevention { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fond-2); }
body { font: 15px/1.4 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--texte); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
#carte { position: fixed; inset: 0; }

/* ---------- Panneau ---------- */
.panneau {
  position: fixed; z-index: 5; top: 12px; left: 12px; width: 408px; max-height: calc(100% - 24px);
  display: flex; flex-direction: column; pointer-events: none;
}
.panneau > * { pointer-events: auto; }
.poignee { display: none; }
.recherche {
  position: relative; background: var(--fond); border-radius: 26px; box-shadow: var(--ombre);
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px;
}
.marque { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--texte); font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; }
.marque img { border-radius: 8px; }
.marque b { color: var(--ambre-fonce); font-weight: 700; }
:root[data-theme='nuit'] .marque b { color: var(--ambre); }
/* « Vigirota Maps France » (Sami, 29/09/2026) : « France » en petit dessous,
   sinon le nom écrase la barre de recherche. */
.nom-marque { display: grid; line-height: 1.1; }
.nom-marque small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--doux); text-align: right; }
.champ { flex: 1; display: flex; align-items: center; gap: 4px; border-left: 1px solid var(--trait); padding-left: 10px; min-width: 0; }
.loupe { width: 20px; height: 20px; fill: var(--doux); flex: none; }
.champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 9px 4px; font-size: 15px; }
.icone-bouton { border: 0; background: transparent; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.icone-bouton:hover { background: var(--fond-2); }
.icone-bouton svg { width: 22px; height: 22px; fill: var(--bleu); }
#boutonTrajet { background: var(--bleu); }
#boutonTrajet svg { fill: #fff; }
#boutonTrajet:hover { filter: brightness(1.08); }

.suggestions {
  list-style: none; margin: 0; padding: 6px 0; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--fond); border-radius: 14px; box-shadow: var(--ombre); max-height: 340px; overflow: auto; z-index: 3;
}
.suggestions li { display: flex; gap: 12px; align-items: center; padding: 9px 16px; cursor: pointer; }
.suggestions li:hover, .suggestions li[aria-selected='true'] { background: var(--fond-2); }
.suggestions .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--fond-2); display: grid; place-items: center; flex: none; font-size: 14px; }
.suggestions .l1 { font-weight: 600; }
.suggestions .l2 { color: var(--doux); font-size: 13px; }

.contenu {
  margin-top: 10px; background: var(--fond); border-radius: var(--rayon); box-shadow: var(--ombre);
  overflow: auto; overscroll-behavior: contain; flex: 0 1 auto;
}
.contenu:empty { display: none; }
.section { padding: 16px 18px; border-bottom: 1px solid var(--trait); }
.section:last-child { border-bottom: 0; }
.section h2, .section h3 { margin: 0 0 10px; font-family: Sora, Inter, sans-serif; letter-spacing: -.01em; }
.section h2 { font-size: 19px; }
.section h3 { font-size: 14px; color: var(--doux); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.doux { color: var(--doux); }
.petit { font-size: 13px; }

.meteo-carte { display: flex; gap: 14px; align-items: center; }
.meteo-carte .temp { font: 600 34px/1 Sora, Inter, sans-serif; }
.meteo-carte .ico { font-size: 34px; }

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chiffre { background: var(--fond-2); border-radius: 12px; padding: 10px; text-align: center; }
.chiffre b { display: block; font: 700 20px/1.1 Sora, Inter, sans-serif; }
.chiffre span { font-size: 12px; color: var(--doux); }
/* 📱 Les zones de danger ne sont jamais sur Maps : la case renvoie vers l'appli (21/10/2026). */
.chiffre.chiffre-appli { background: #fff7e0; }
:root[data-theme='nuit'] .chiffre.chiffre-appli { background: rgba(255, 176, 32, .14); }
.info-zones { margin: 8px 0 0; }
/* 🔎 Filtres de « Sur ce trajet » (22/10/2026). */
.filtres-trajet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.filtre-trajet { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--trait); background: var(--fond-2); color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.filtre-trajet.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.mini-panneau { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2.5px solid #e5484d; color: #111; font: 800 9px/1 Inter, Arial, sans-serif; box-sizing: border-box; }
/* 🚦 « Zones de danger dans l'appli » : trois panneaux de limitation qui se chevauchent, comme le bouton
   « Zone de danger » de l'appli (Sami, 22/10/2026), à la place du 📱. */
.panneaux-zones { display: inline-flex; align-items: center; vertical-align: middle; padding: 0 4px; }
.panneaux-zones i { font: 800 8.5px/1 Inter, Arial, sans-serif; font-style: normal; letter-spacing: -.3px; color: #111;
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 -2px;
  border-radius: 50%; background: #fff; border: 2.5px solid #e5484d; box-sizing: border-box; }
.panneaux-zones i.devant { width: 30px; height: 30px; border-width: 3.5px; font-size: 12px; position: relative; z-index: 1; }
.info-zones .panneaux-zones, .lien-page .panneaux-zones { transform: scale(.9); margin-right: 2px; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--trait); cursor: pointer; }
.liste li:last-child { border-bottom: 0; }
.liste li:hover .t1 { color: var(--bleu); }
.pastille { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 15px; color: #fff; }
.pastille.radar { background: #fff; border: 3px solid var(--rouge); color: #111; font: 700 11px/1 Inter, sans-serif; }
.pastille.radar.mobile { border-style: dashed; }
.t1 { font-weight: 600; }
.t2 { color: var(--doux); font-size: 13px; }

.boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.bouton {
  border: 1px solid var(--trait); background: var(--fond); border-radius: 20px; padding: 8px 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--bleu);
}
.bouton:hover { background: var(--fond-2); }
.bouton.plein { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton.ambre { background: var(--ambre); border-color: var(--ambre); color: #16202c; }

.appli { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #0b1420, #1b2a40); color: #e8eef6; border-radius: 14px; padding: 14px; }
.appli img { border-radius: 12px; }
.appli p { margin: 0 0 8px; font-size: 13px; color: #c6d2e0; }
.appli b { color: #fff; }
/* Google Play et App Store côte à côte dans l'encart de l'appli (21/10/2026). */
.badges-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badges-carte .badge-store img { height: 40px; width: auto; }
/*
 * L'encart de l'appli FIXÉ en bas du panneau (Sami, 21/10/2026 : « les stores
 * restent visibles tout le temps dans ce panneau »). Il ne défile pas : c'est
 * le contenu au-dessus qui défile.
 */
.stores-panneau { flex: none; margin-top: 8px; border-radius: var(--rayon); box-shadow: var(--ombre); }
.stores-panneau:empty { display: none; }
.stores-panneau .appli { border-radius: var(--rayon); }
/*
 * Téléphone : une bande sombre au pied de la feuille, les deux badges seuls,
 * l'un à gauche et l'autre à droite — le bouton rond « En savoir plus »
 * (.vers-contenu, centré, 10 px du bas) passe entre les deux sans rien cacher.
 */
@media (max-width: 720px) {
  .stores-panneau { margin: 0; border-radius: 0; box-shadow: none; }
  .stores-panneau .appli { border-radius: 0; padding: 6px 12px; }
  .stores-panneau .appli > img, .stores-panneau .appli p { display: none; }
  .stores-panneau .appli > div { flex: 1; }
  .stores-panneau .badges-carte { justify-content: space-between; flex-wrap: nowrap; }
  .stores-panneau .badges-carte .badge-store img { height: 34px; }
}

.pied { padding: 12px 18px 16px; font-size: 12px; color: var(--doux); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pied a { color: var(--doux); }

/* Publicité : toujours dans le panneau, jamais sur la carte. */
.pub { padding: 12px 18px; border-bottom: 1px solid var(--trait); }
.pub::before { content: 'Publicité'; display: block; font-size: 11px; color: var(--doux); margin-bottom: 6px; }
.pub ins { display: block; min-height: 250px; }

/* ---------- Itinéraire ---------- */
.trajet { margin-top: 10px; background: var(--fond); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 10px 12px 12px; }
.trajet-tete { display: flex; align-items: center; gap: 6px; }
.trajet-tete h2 { margin: 0; font: 600 17px Sora, Inter, sans-serif; }
.trajet-tete svg { fill: var(--texte) !important; }
.etapes { position: relative; padding: 6px 44px 4px 4px; }
.etape { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.champ-etape { position: relative; flex: 1; }
.champ-etape input { width: 100%; border: 1px solid var(--trait); background: var(--fond-2); border-radius: 10px; padding: 10px 12px; outline: 0; }
.champ-etape input:focus { border-color: var(--bleu); background: var(--fond); }
.puce { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.puce.depart { border: 3px solid var(--doux); }
.puce.arrivee { background: var(--rouge); }
.inverser { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.inverser svg { fill: var(--doux) !important; }
.option { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--doux); padding: 4px 6px 0; cursor: pointer; }

/* Ligne « Éviter les péages » + sablier de calcul à droite */
.ligne-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sablier { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding-top: 4px; }
.sablier[hidden] { display: none; }
.sablier svg { width: 30px; height: 30px; fill: var(--bleu); transform-origin: 50% 50%; animation: sablier-tourne 1.6s ease-in-out infinite; }
@keyframes sablier-tourne {
  0%, 20% { transform: rotate(0deg); }
  45%, 65% { transform: rotate(180deg); }
  90%, 100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .sablier svg { animation-duration: 3.2s; } }

.itineraires { display: grid; gap: 8px; }
.itineraire { border: 1.5px solid var(--trait); border-radius: 14px; padding: 12px 14px; cursor: pointer; background: var(--fond); text-align: left; width: 100%; }
.itineraire.choisi { border-color: var(--bleu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu) 18%, transparent); }
.itineraire .duree { font: 700 22px/1.1 Sora, Inter, sans-serif; }
.itineraire.choisi .duree { color: var(--bleu); }
.itineraire .details { color: var(--doux); font-size: 13px; margin-top: 3px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 9px; background: var(--fond-2); }
.badge.rouge { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
.badge.violet { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #7c4ddb; }
:root[data-theme='nuit'] .badge.violet { color: #b69cff; }
.consignes { list-style: none; margin: 0; padding: 0; }
.consignes li { padding: 9px 0; border-bottom: 1px solid var(--trait); display: flex; justify-content: space-between; gap: 10px; }
.consignes li span:last-child { color: var(--doux); font-size: 13px; white-space: nowrap; }
details summary { cursor: pointer; font-weight: 600; color: var(--bleu); list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ---------- Commandes ---------- */
.commandes { position: fixed; z-index: 4; right: 12px; bottom: 40px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.commande { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--fond); box-shadow: var(--ombre); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.commande svg { width: 22px; height: 22px; fill: var(--texte); }
.commande:hover { background: var(--fond-2); }
.commande.actif svg { fill: var(--bleu); }
.groupe { display: flex; flex-direction: column; border-radius: 12px; box-shadow: var(--ombre); overflow: hidden; }
/* Bouton Plan / Satellite : un aperçu de la vue qu'on obtiendra, comme Google Maps. */
.vue-carte {
  width: 64px; height: 64px; padding: 0; position: relative; overflow: hidden; border: 3px solid #fff;
  background: #6b7a52 url('https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&TILEMATRIX=15&TILEROW=11676&TILECOL=16860') center / cover;
}
.vue-carte.vers-plan {
  background: #f2efe6 linear-gradient(135deg, transparent 44%, #f5c26b 45%, #f5c26b 55%, transparent 56%),
    linear-gradient(45deg, transparent 47%, #ffffff 48%, #ffffff 52%, transparent 53%), #efeae0;
}
.vue-carte span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; font-size: 11px; font-weight: 700;
  color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); text-align: center;
}
.vue-carte.vers-plan span { color: #16202c; background: linear-gradient(transparent, rgba(255, 255, 255, .85)); }
.groupe .commande { box-shadow: none; border-radius: 0; }
.groupe .commande + .commande { border-top: 1px solid var(--trait); }

.couches {
  position: fixed; z-index: 6; right: 66px; bottom: 40px; width: 290px; max-height: calc(100% - 80px); overflow: auto;
  background: var(--fond); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px 16px;
}
.couches h3 { margin: 4px 0 8px; font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.couches label { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.couches label .pastille { width: 26px; height: 26px; font-size: 13px; }
.couches label span.nom { flex: 1; }
.couches input { width: 18px; height: 18px; accent-color: var(--bleu); }

.meteo {
  position: fixed; z-index: 4; left: 12px; bottom: 34px; background: var(--fond); border-radius: 22px; box-shadow: var(--ombre);
  padding: 7px 14px 7px 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; max-width: calc(100% - 90px);
}
.meteo .ico { font-size: 20px; }
/* Sur ordinateur, la météo est déjà dans le panneau : la pastille ne sert qu'au téléphone. */
@media (min-width: 721px) { .meteo { display: none !important; } }
.meteo b { font: 600 17px Sora, Inter, sans-serif; }
.meteo .lieu { color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bandeau-info {
  position: fixed; z-index: 4; left: 50%; top: 14px; transform: translateX(-50%); background: var(--nuit); color: #e8eef6;
  border-radius: 20px; padding: 8px 16px; font-size: 13px; box-shadow: var(--ombre); max-width: calc(100% - 460px);
}
.prevention {
  position: fixed; z-index: 7; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(560px, calc(100% - 24px));
  background: var(--nuit); color: #e8eef6; border-radius: 16px; padding: 14px 16px; box-shadow: var(--ombre);
  display: flex; gap: 14px; align-items: center;
}
.prevention p { margin: 0; font-size: 13px; line-height: 1.45; }
.prevention button { border: 0; background: var(--ambre); color: #16202c; font-weight: 700; border-radius: 20px; padding: 9px 16px; white-space: nowrap; }

/* Anneau qui marque l'emplacement exact d'un radar ou d'un événement choisi dans une liste. */
.repere { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--bleu); pointer-events: none; animation: repere 1s ease-out 6; }
@keyframes repere { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Bulles de la carte ---------- */
.maplibregl-popup-content { background: var(--fond); color: var(--texte); border-radius: 14px; box-shadow: var(--ombre); padding: 14px 16px; min-width: 220px; font-family: Inter, system-ui, sans-serif; }
.maplibregl-popup-tip { border-top-color: var(--fond) !important; border-bottom-color: var(--fond) !important; }
.maplibregl-popup-close-button { font-size: 20px; right: 6px; top: 4px; color: var(--doux); }
.bulle .tete { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.bulle .titre { font-weight: 700; font-size: 15px; }
.bulle .ligne { font-size: 13px; color: var(--doux); margin-top: 3px; }
.bulle .texte { font-size: 13px; margin-top: 8px; max-width: 280px; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index: 3; }
/*
 * 🕐 La mention « Information fournie par Bison Futé · mise à jour… » (licences
 * B et C, 16/10/2026) ne passe jamais SOUS le panneau de gauche (12 + 408 px)
 * ni sous le bouton rond du milieu (`.vers-contenu`, 34 px), tous deux
 * au-dessus d'elle : elle va à la ligne. Constaté dans la carte intégrée des
 * pages départements (~900 px de large) : le début de la mention était caché.
 * Largeur du texte, sans ses 36 px de marges intérieures ni les 10 px du bord.
 */
@media (min-width: 721px) {
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-width: min(calc(50vw - 75px), calc(100vw - 480px)); }
}

/* ---------- Téléphone : feuille glissante ---------- */
/*
 * 🔴 150px, PAS 38vh : c'est la hauteur que le script pose au chargement
 * (`feuille('bas')`, HAUTEURS.bas). Avec 38vh — environ 320 px — la feuille
 * s'affichait trop haute, puis se rétractait d'un coup dès que le script
 * tournait, en emportant les boutons de la carte (ils se calent sur la même
 * variable). Mesuré sur l'accueil en ligne : un saut de 0,111 sur un seuil
 * Google de 0,1, à lui seul presque tout le CLS de la page.
 * ⚠️ Si HAUTEURS.bas change, changer cette valeur avec.
 */
@media (max-width: 720px) {
  .panneau {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: none; height: var(--hauteur-feuille, 150px);
    background: var(--fond); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px rgba(16, 24, 40, .18);
    pointer-events: auto; transition: height .25s ease; padding-bottom: env(safe-area-inset-bottom);
  }
  .panneau.glisse { transition: none; }
  .poignee { display: block; padding: 8px 0 4px; cursor: grab; touch-action: none; }
  .poignee span { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--trait); margin: 0 auto; }
  .recherche { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; }
  .marque span { display: none; }
  .contenu, .trajet { margin: 0; box-shadow: none; border-radius: 0; flex: 1 1 auto; }
  .trajet { flex: none; border-bottom: 1px solid var(--trait); }
  .commandes { bottom: calc(var(--hauteur-feuille, 150px) + 12px); right: 10px; }
  /* Sur téléphone on zoome avec deux doigts, comme sur Google Maps. */
  .commandes .groupe { display: none; }
  .couches { right: 10px; left: 10px; width: auto; bottom: calc(var(--hauteur-feuille, 150px) + 12px); }
  .meteo { top: calc(70px + env(safe-area-inset-top)); bottom: auto; left: 10px; }
  .bandeau-info { top: calc(118px + env(safe-area-inset-top)); max-width: calc(100% - 24px); }
  /* 📱 23/10/2026 (Sami : « sur mobile Vigirota Maps est complètement merdique ») : le bandeau
     de prudence tient sur une rangée (texte + petit bouton) au lieu d'une colonne de 150 px. */
  .prevention { bottom: calc(var(--hauteur-feuille, 150px) + 10px); flex-direction: row; align-items: center; padding: 10px 12px; gap: 10px; }
  .prevention p { font-size: 12.5px; line-height: 1.4; }
  .prevention button { padding: 8px 12px; font-size: 13px; }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: var(--hauteur-feuille, 150px); }
  /* La météo est dans la pastille du haut : pas une seconde fois dans la feuille. */
  .section-meteo { display: none; }
  /* La mention Bison Futé, que la carte range derrière son (i) sur téléphone. */
  .mention-bf-feuille:not(:empty) { display: block; margin: 6px 0 0; font-size: 11.5px; color: var(--doux); }
}
.mention-bf-feuille { display: none; }

/* Badge officiel des magasins d'applis (02/10/2026) */
.badge-store { display: inline-flex; vertical-align: middle; line-height: 0; }
.badge-store img { display: block; height: auto; max-width: 100%; }

/* ---------------------------------------------------------------------------
 * CONTENU SOUS LA CARTE (02/10/2026). La page d'accueil ne montrait que 55 mots
 * à Google : une carte, pas une page. On garde l'application telle quelle et on
 * fait DÉFILER un vrai texte par-dessus — accessible par le bouton « En savoir
 * plus », parce qu'un texte qu'on ne peut pas atteindre ne vaut rien, ni pour
 * un lecteur ni pour un moteur.
 * ------------------------------------------------------------------------ */
html, body.avec-contenu { overflow: auto; }
body.avec-contenu { height: auto; }
.ecran-carte { height: 100svh; pointer-events: none; }
.vers-contenu {
  position: fixed; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--fond); color: var(--doux); box-shadow: var(--ombre); opacity: .85;
  text-decoration: none;
}
.vers-contenu:hover { background: var(--fond-2); }
.vers-contenu svg { width: 15px; height: 15px; fill: currentColor; }
.presentation {
  position: relative; z-index: 10; background: var(--fond);
  border-top: 1px solid var(--trait); box-shadow: 0 -18px 50px rgba(0,0,0,.28);
}
.presentation .dedans { max-width: 820px; margin: 0 auto; padding: 46px 20px 56px; }
.presentation h1 { font-size: 27px; line-height: 1.22; margin: 0 0 16px; letter-spacing: -.01em; }
.presentation h2 { font-size: 19px; margin: 34px 0 10px; }
.presentation h3 { font-size: 16px; margin: 22px 0 6px; }
.presentation p, .presentation li { font-size: 15.5px; line-height: 1.65; color: var(--texte); }
.presentation p { margin: 0 0 12px; }
.presentation ul { margin: 0 0 12px; padding-left: 20px; }
.presentation li { margin-bottom: 6px; }
.presentation a { color: var(--bleu); }
.presentation .chiffres-cles {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; padding: 0; list-style: none;
}
.presentation .chiffres-cles li {
  flex: 1 1 150px; margin: 0; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 12px;
}
.presentation .chiffres-cles b { display: block; font-size: 21px; margin-bottom: 2px; }
.presentation .chiffres-cles span { font-size: 13px; color: var(--doux); }
.presentation .liens-bas { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; font-size: 14.5px; }
.presentation .pied-site {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13.5px; color: var(--doux);
}
.presentation .pied-site a { color: var(--doux); }
@media (max-width: 700px) {
  .presentation .dedans { padding: 34px 16px 44px; }
  .presentation h1 { font-size: 23px; }
  .vers-contenu { bottom: 10px; width: 30px; height: 30px; }
  /* Le bouton flotte au-dessus de la feuille glissante : on laisse la place
     pour que le bas du panneau ne passe jamais dessous. */
  .panneau .contenu { padding-bottom: 48px; }
}

/* ---------------------------------------------------------------------------
 * 📱 TÉLÉPHONE (Sami, 23/10/2026 : « sur iPhone l'écran déborde légèrement et ça
 * bouge sur les côtés, en bas on ne voit pas le store » ; « quand je fais défiler
 * pour voir le bouton, c'est la page d'information qui monte »).
 * ------------------------------------------------------------------------ */
.fermer-presentation, .barre-trajet { display: none; }
@media (max-width: 720px) {
  /* 1. Safari (iPhone) ZOOME sur un champ dont le texte fait moins de 16 px, et la page restait
     agrandie : elle débordait, glissait sur les côtés, et le bas sortait de l'écran. */
  input[type='search'], input[type='text'], input:not([type]) { font-size: 16px; }
  /* 2. La page ne défile plus : le doigt fait défiler le panneau ou bouge la carte. Le texte
     d'information s'ouvre par la flèche, par-dessus la carte, et se referme par son bouton. */
  html, body.avec-contenu { overflow: hidden; height: 100%; overscroll-behavior: none; }
  .ecran-carte { display: none; }
  .presentation {
    position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border-top: 0; box-shadow: none; transform: translateY(100%); transition: transform .28s ease;
  }
  .presentation-ouverte .presentation { transform: none; }
  .fermer-presentation {
    display: flex; position: sticky; top: 0; z-index: 1; width: 100%; justify-content: center; align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border: 0; border-bottom: 1px solid var(--trait);
    background: var(--fond); color: var(--bleu); font: 600 15px Inter, system-ui, sans-serif; cursor: pointer;
  }
  /* 3. Itinéraire calculé : le bouton vers l'appli reste visible en bas du panneau, à la
     place des badges ; celui de la liste et la flèche du texte s'effacent. */
  .barre-trajet:not([hidden]) {
    display: block; flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--fond); border-top: 1px solid var(--trait);
  }
  /* Sur iPhone, c'est un lien <a> (lien universel) : même largeur et texte centré qu'un bouton. */
  .barre-trajet .bouton { width: 100%; padding: 13px 16px; font-size: 16px; justify-content: center; box-sizing: border-box; }
  /* Petit écran (iPhone : 664 px utiles) ou feuille baissée : les champs et la liste rétrécissent
     et défilent, le bouton du bas ne sort JAMAIS de l'écran (mesuré : 48 px dessous avant). */
  .avec-barre-trajet .panneau { overflow: hidden; }
  .avec-barre-trajet .panneau .trajet { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* La marge du bas laissait la place à la flèche du texte, cachée ici. */
  .avec-barre-trajet .panneau .contenu { min-height: 0; padding-bottom: 0; }
  .avec-barre-trajet .stores-panneau, .avec-barre-trajet #versTelephone, .avec-barre-trajet .vers-contenu { display: none; }
}

/* Présentation de la commune et lien vers le département (02/10/2026). */
.presentation-lieu {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--doux);
}
.presentation-lieu a {
  color: var(--bleu); text-decoration: none; white-space: nowrap; margin-left: 4px;
}
.presentation-lieu a:hover { text-decoration: underline; }
.vers-departement {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 11px 14px; border: 1px solid var(--trait); border-radius: 12px;
  color: var(--texte); text-decoration: none; font-weight: 600; font-size: 14px;
}
.vers-departement:hover { background: var(--fond-2); border-color: var(--bleu); }
.vers-departement .doux { font-weight: 400; }

/* Photo de la commune (02/10/2026). Les crédits ne se détachent jamais de
   l'image : la licence libre les exige. */
.photo-lieu { margin: 12px 0 0; }
.photo-lieu img {
  display: block; width: 100%; height: auto; max-height: 190px; object-fit: cover;
  border-radius: 12px; background: var(--fond-2);
}
.photo-lieu figcaption {
  margin-top: 5px; font-size: 11px; color: var(--doux); line-height: 1.35;
}
.photo-lieu figcaption a { color: var(--doux); text-decoration: underline; }

/* « C'est votre ville ? » — cœur et liens (03/10/2026). Compact : la fiche
   reste lisible, les boutons d'itinéraire ne descendent que d'une ligne. */
.coeurs-ville { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--trait); }
.coeurs-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coeurs-question { font-weight: 600; font-size: 14px; color: var(--texte); }
.coeur {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--fond); color: var(--texte);
  font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.coeur:hover { border-color: var(--rouge); }
.coeur.actif { border-color: var(--rouge); background: color-mix(in srgb, var(--rouge) 10%, var(--fond)); }
.coeur-icone { font-size: 17px; line-height: 1; transition: font-size .25s ease-out; }
/* Le cœur du visiteur grandit avec le nombre de liens cochés (03/10/2026). */
.coeur-icone.taille-moyen { font-size: 23px; }
.coeur-icone.taille-grand { font-size: 30px; }
.coeur-icone.grandit { animation: battement-coeur .4s ease-out; }
.coeur.actif .coeur-icone { animation: battement-coeur .35s ease-out; }
@keyframes battement-coeur { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.coeur-compte { font-variant-numeric: tabular-nums; }
.coeur-invite { font-weight: 500; color: var(--doux); font-size: 13px; }
.coeurs-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lien-ville {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--trait); background: var(--fond-2);
  color: var(--texte); font: 500 12.5px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}
.lien-ville.actif { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 12%, var(--fond)); color: var(--bleu); font-weight: 600; }
.coeurs-resume { margin-top: 8px; font-size: 12.5px; color: var(--doux); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .coeur.actif .coeur-icone, .coeur-icone.grandit { animation: none; }
  .coeur-icone { transition: none; }
}

/* Le détail des tailles : en bulle au survol du cœur, ou en touchant le
   chiffre sur téléphone. La fiche elle-même ne change pas. */
.coeur-zone { position: relative; }
.coeurs-bulle {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 12;
  display: none; gap: 10px; white-space: nowrap; padding: 8px 12px; border-radius: 10px;
  background: var(--texte); color: var(--fond); font: 600 12.5px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.coeurs-bulle span { display: inline-flex; align-items: center; gap: 5px; }
@media (hover: hover) { .coeur-zone:hover .coeurs-bulle { display: flex; } }
.coeur-zone.bulle-ouverte .coeurs-bulle { display: flex; }
.coeur-compte { cursor: pointer; }
.mini-coeur { font-style: normal; color: var(--rouge); line-height: 1; }
.mini-coeur::before { content: '\2764'; }
.mini-coeur.petit { font-size: 10px; }
.mini-coeur.moyen { font-size: 13px; }
.mini-coeur.grand { font-size: 17px; }
.coeurs-envoyer {
  padding: 6px 14px; border-radius: 999px; border: 0; background: var(--rouge); color: #fff;
  font: 700 12.5px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}
.coeurs-moi { margin-top: 8px; font-size: 12.5px; color: var(--doux); }
.coeurs-moi strong { color: var(--texte); }
.coeurs-aimee { margin-top: 8px; font-size: 12.5px; color: var(--doux); line-height: 1.45; }
.coeurs-aimee strong { color: var(--texte); font-weight: 600; }
.coeurs-visible { display: flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; }
.coeurs-visible input { margin: 0; accent-color: var(--rouge); }

/* « Voir la liste » des pseudos (03/10/2026). */
.liste-coeurs { text-align: left; }
.liste-coeurs h3, .liste-coeurs .tirage-aide { text-align: center; padding: 0 30px; }
.liste-pseudos { list-style: none; margin: 0; padding: 0; max-height: min(55vh, 420px); overflow-y: auto; }
.liste-pseudos li {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--trait); font: 600 14px/1.2 Inter, system-ui, sans-serif;
}
.liste-pseudos li:last-child { border-bottom: 0; }
.liste-pseudos .mini-coeur { width: 20px; text-align: center; }
.liste-vide { color: var(--doux); font-weight: 500 !important; justify-content: center; }
.liste-plus {
  width: 100%; margin-top: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--trait);
  background: var(--fond-2); color: var(--texte); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.lien-tirage {
  padding: 0; border: 0; background: none; color: var(--bleu);
  font: 600 12.5px/1.3 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline;
}

/* La boîte à tirage du pseudo : tambour, « Wow ! », paillettes. */
.tirage-fond {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 7, 17, .55);
}
.tirage {
  position: relative; overflow: hidden; width: min(360px, 100%); padding: 22px 20px 20px; border-radius: 18px;
  background: var(--fond); color: var(--texte); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.tirage h3 { margin: 0 0 4px; font: 800 19px/1.2 Inter, system-ui, sans-serif; }
.tirage-aide { margin: 0 0 14px; font-size: 13px; color: var(--doux); }
.tirage-paillettes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tirage-fermer, .tirage-son {
  position: absolute; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: var(--fond-2); color: var(--texte); font-size: 14px; cursor: pointer;
}
.tirage-fermer { right: 10px; }
.tirage-son { left: 10px; }
.boite { position: relative; width: 96px; height: 86px; margin: 6px auto 0; }
.boite-corps {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 58px; border-radius: 6px;
  background: linear-gradient(90deg, #e5484d 0 42%, #F4C95D 42% 58%, #e5484d 58%);
  color: #fff; font: 800 26px/58px Inter, system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.boite-couvercle {
  position: absolute; left: 0; right: 0; top: 10px; height: 20px; border-radius: 5px; z-index: 1;
  background: linear-gradient(90deg, #c93a3f 0 42%, #D6A637 42% 58%, #c93a3f 58%);
  transform-origin: 10% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.boite.secoue { animation: secousse .12s linear infinite; }
.boite.ouverte .boite-couvercle { transform: translateY(-14px) rotate(-28deg); }
@keyframes secousse {
  0% { transform: rotate(0); } 25% { transform: rotate(-6deg) translateY(-2px); }
  50% { transform: rotate(0); } 75% { transform: rotate(6deg) translateY(-2px); } 100% { transform: rotate(0); }
}
.tirage-wow {
  height: 30px; margin-top: 6px; font: 900 24px/30px Inter, system-ui, sans-serif; color: #D6A637;
  opacity: 0; transform: scale(.4);
}
.tirage-wow.visible { animation: wow .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes wow { to { opacity: 1; transform: scale(1); } }
.tirage-nom { min-height: 26px; margin: 2px 0 14px; font: 800 18px/1.3 Inter, system-ui, sans-serif; }
.tirage-tirer {
  width: 100%; padding: 12px; border-radius: 12px; border: 0; background: var(--rouge); color: #fff;
  font: 700 15px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.tirage-tirer:disabled { opacity: .6; cursor: default; }
.tirage-choix p { margin: 14px 0 8px; font-size: 13px; color: var(--doux); }
.tirage-pseudo {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--trait); background: var(--fond-2); color: var(--texte);
  font: 600 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}
.tirage-pseudo:hover { border-color: var(--rouge); }
.tirage-erreur { margin: 0 0 10px; font-size: 13px; color: var(--rouge); }

/* La fenêtre de connexion Google / Apple (03/10/2026). */
.connexion h3 { padding: 0 30px; }
.connexion .tirage-aide { line-height: 1.45; }
.connexion-google { display: flex; justify-content: center; min-height: 44px; margin: 6px 0 10px; }
.connexion-apple {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 280px; max-width: 100%; height: 40px; border-radius: 999px; border: 0;
  background: #000; color: #fff; font: 600 15px/1 -apple-system, system-ui, sans-serif; cursor: pointer;
}
.connexion-apple:disabled { opacity: .5; cursor: default; }
:root[data-theme='nuit'] .connexion-apple { background: #fff; color: #000; }
.connexion-note { margin: 14px 0 0; font-size: 12px; }
.connexion-note a { color: var(--doux); }
@media (prefers-reduced-motion: reduce) {
  .boite-couvercle { transition: none; }
  .tirage-wow.visible { animation: none; opacity: 1; transform: none; }
}

/* Badges des stores dans le pied de page (03/10/2026). L'App Store reste grisé,
   avec « Bientôt », tant qu'Apple n'a pas validé l'appli. */
.badges-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.badges-stores .badge-store img { height: 40px; width: auto; }
.badge-store.bientot { position: relative; cursor: default; }
.badge-store.bientot img { opacity: .45; filter: grayscale(1); }
.bientot-etiquette {
  position: absolute; top: -8px; right: -8px; padding: 3px 7px; border-radius: 999px;
  background: #ff2e3f; color: #fff; font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
}

/* Fiches des départements, régions et de la France (03/10/2026). */
.niveau-territoire { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); margin-bottom: 4px; }
.code-territoire {
  display: inline-block; min-width: 30px; padding: 2px 7px; border-radius: 7px; background: var(--fond-2);
  color: var(--doux); font: 600 12.5px/1.3 Inter, system-ui, sans-serif; text-align: center; vertical-align: middle;
}
h2 .code-territoire { font-size: 13px; margin-left: 4px; }
.lien-territoire {
  padding: 0; border: 0; background: none; color: var(--bleu); font: inherit; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.evenements-territoire { display: flex; flex-wrap: wrap; gap: 6px; }
.evenement-territoire {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--fond-2); font-size: 12.5px; font-weight: 600;
}
.evenement-territoire .pastille { width: 22px; height: 22px; font-size: 12px; }
.liste-territoires li { align-items: center; }
.liste-territoires li .code-territoire { flex: none; }

/* Envoyer le trajet sur son téléphone : le QR code (03/10/2026). */
.qr-trajet { display: grid; place-items: center; margin: 14px auto; padding: 12px; width: max-content; max-width: 100%; background: #fff; border-radius: 14px; color: #111; }
.qr-trajet svg { display: block; width: 220px; height: 220px; }
.envoi-telephone .petit { font-size: 12.5px; }
/* 📤 Partager un trajet ou une fiche (21/10/2026) : quatre choix, puis le lien en clair. */
.choix-partage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.choix-partage a, .choix-partage button {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait);
  background: var(--fond-2); color: var(--texte); font: 600 14px/1.2 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; text-align: left;
}
.choix-partage a:hover, .choix-partage button:hover { border-color: var(--doux); }
.choix-partage svg { width: 28px; height: 28px; flex: none; }
.partage-url { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--trait); background: var(--fond); color: var(--doux); font: 12px/1.3 Inter, system-ui, sans-serif; }

/* Étapes de l'itinéraire (03/10/2026). */
.puce.etape-num {
  width: 18px; height: 18px; display: grid; place-items: center; background: var(--bleu); color: #fff;
  font: 700 11px/1 Inter, system-ui, sans-serif; margin-left: -3px; margin-right: -3px;
}
.retirer-etape { width: 30px; height: 30px; flex: none; font-size: 13px; color: var(--doux); }
.ajout-etape {
  display: block; margin: 0 0 4px 30px; padding: 4px 6px; border: 0; background: none; color: var(--bleu);
  font: 600 13.5px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}
.ajout-etape:hover { text-decoration: underline; }
.ajout-etape[hidden] { display: none; }
.troncons { margin: 0; padding: 0 0 0 18px; }
.troncons li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.troncons li span:last-child { color: var(--doux); white-space: nowrap; }
.consignes li.separateur-etape { font-weight: 700; color: var(--bleu); list-style: none; margin-left: -18px; padding-top: 8px; }
/* Une seule croix par étape : la nôtre (retirer l'étape), pas celle du navigateur. */
.etape-inter input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* 🟧 Panneau lumineux des événements (13/10/2026), le même que dans l'appli. */
.panneau-lumineux {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); z-index: 8;
  background: #08080B; border: 2px solid var(--encre); border-radius: 14px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--encre) 55%, transparent);
  padding: 10px 12px; color: var(--encre);
  font-family: Menlo, Consolas, 'Courier New', monospace; text-transform: uppercase;
  animation: pl-entree .22s ease-out;
}
@keyframes pl-entree { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pl-diodes { display: flex; justify-content: space-between; opacity: .45; padding: 0 2px; }
.pl-diodes i { width: 4px; height: 4px; border-radius: 2px; background: var(--encre); display: block; }
.pl-corps { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; }
.pl-signe { font-size: 44px; line-height: 1; }
.pl-texte { flex: 1; min-width: 0; }
.pl-titre { font-size: 26px; font-weight: 800; letter-spacing: 1.2px; line-height: 1.15; }
.pl-ligne { font-size: 16px; letter-spacing: .6px; margin-top: 4px; opacity: .85; }
.pl-detail { font-size: 15px; letter-spacing: .5px; margin-top: 8px; opacity: .78; }
.pl-vers, .pl-croix {
  background: rgba(255,255,255,.04); color: var(--encre); border: 1.5px solid var(--encre);
  border-radius: 8px; font-family: inherit; font-weight: 800; cursor: pointer;
}
.pl-vers { margin-top: 10px; padding: 8px 12px; font-size: 13px; letter-spacing: 1px; }
/* 🕐 Mention légale de Bison Futé (licences B et C) : discrète, pas en capitales. */
.pl-source { margin-top: 10px; font-family: Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: #94A3B8; }
.pl-croix { min-width: 52px; min-height: 52px; font-size: 26px; line-height: 1; }
.pl-vers:hover, .pl-croix:hover { background: rgba(255,255,255,.16); }
/* Ordinateur : centré dans la carte libre, à droite du volet de gauche (408 px). */
@media (min-width: 900px) {
  .panneau-lumineux { left: calc(436px + (100vw - 496px) / 2); width: min(560px, calc(100vw - 528px)); }
}
@media (max-width: 560px) {
  .panneau-lumineux { bottom: 12px; }
  .pl-titre { font-size: 22px; }
  .pl-signe { font-size: 36px; }
}

/* Nos réseaux dans le volet de présentation (18/10/2026) */
.presentation .reseaux { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0 6px; }
.presentation .reseaux .suivez { font-weight: 700; font-size: .95rem; margin-right: 4px; }
.presentation .reseaux a { display: inline-flex; transition: transform .15s; }
.presentation .reseaux a:hover { transform: scale(1.1); }

/* 💡 Survol d'une icône : « Cliquez pour voir le détail » (21/10/2026). */
.infobulle-icone { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; padding: 5px 9px; border-radius: 8px;
  background: rgba(15, 23, 42, .92); color: #fff; font: 600 12px/1.2 Inter, system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.astuce-couches { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff7e0; color: #5b4a12; font-size: 12.5px; line-height: 1.35; }

/* 🌍 Le sélecteur de langue devant le nom de la ville ou du territoire (Sami, 24/10/2026 : « le drapeau de
   chaque langue devant le nom de la ville dans la fiche », « comme le site Vigirota »). */
.titre-lieu { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.titre-lieu h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.langues-carte { position: relative; flex: none; }
.langues-carte summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px;
  border: 1px solid var(--trait); border-radius: 10px; background: var(--fond-2); color: var(--texte); font: 700 12px/1 Inter, sans-serif; user-select: none; }
.langues-carte summary::-webkit-details-marker { display: none; }
.langues-carte summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 1px; opacity: .6; }
.langues-carte[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.langues-carte summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.drapeau { width: 22px; height: 15px; border-radius: 2px; flex: none; display: inline-block; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18); }
:root[data-theme='nuit'] .drapeau { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.liste-langues { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 190px; padding: 6px;
  background: var(--fond); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); }
.liste-langues a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texte);
  text-decoration: none; font-size: 14.5px; }
.liste-langues a:hover, .liste-langues a[aria-current] { background: var(--fond-2); }
.liste-langues a[aria-current] { font-weight: 700; }
/* La carte dans chaque langue, au pied du texte de présentation. */
.presentation .langues-bas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 4px; font-size: 14.5px; }
.presentation .langues-bas span { color: var(--doux); width: 100%; }
.presentation .langues-bas a[aria-current] { font-weight: 700; text-decoration: none; }