/* 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); }

.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; }

.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; }

.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; }

/* ---------- 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); }
  .prevention { bottom: calc(var(--hauteur-feuille, 150px) + 12px); flex-direction: column; align-items: stretch; }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: var(--hauteur-feuille, 150px); }
}

/* 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; }
}

/* 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; }

/* É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; }