/* ============================================================================
   TrouveTonActivité — Direction « Découverte joyeuse »
   Été québécois : crème chaleureuse, or soleil pour le radar, vert pin d'ancrage,
   turquoise d'action. Panneau flottant au-dessus de la carte. Le RADAR est la
   signature : un balayage vivant, dépensé à un seul endroit.
   Thème CLAIR par défaut (:root). body.dark = mode sombre optionnel.
   Réf. DESIGN.md — chaque couleur/type en découle.
============================================================================ */

/* ==========================================================================
   JETONS
========================================================================== */
:root {
  /* — Palette de marque (DESIGN.md) — ancrée sur le turquoise #4ECDC4 — */
  --turquoise:        #4ECDC4;  /* LA couleur de marque : radar, accents vifs, joie */
  --turquoise-vif:    #6FE0D8;
  --turquoise-profond:#0E6E66;  /* dérivé foncé : boutons, texte/liens (AA sur crème) */
  --corail:    #FF7A5C;   /* accent chaud secondaire, à doser                   */
  --corail-fonce:#E85C40;
  --creme:     #FFF6EC;   /* fond chaleureux par défaut                        */
  --encre:     #233A38;   /* texte (encre teintée turquoise)                   */
  --sable:     #FBE7D6;   /* surfaces et cartes douces                         */

  /* — Rôles (thème clair = défaut) — */
  --void:        #FFF6EC;                  /* fond de page / sous la carte */
  --charbon:     #FFFFFF;                  /* surface de carte, nette      */
  --charbon-2:   #FCF1E4;                  /* champs, surfaces secondaires  */
  --verre:       rgba(255, 246, 236, 0.84);/* panneau verre chaud          */
  --verre-fort:  rgba(255, 246, 236, 0.95);

  --signal:      #0E6E66;                  /* accent interactif lisible = turquoise profond */
  --signal-vif:  #12857B;                  /* hover                         */
  --signal-fonce:#0A524C;                  /* fond plein profond            */
  --sur-signal:  #FFFFFF;                  /* texte lisible SUR un fond signal */
  --halo:        rgba(78, 205, 196, 0.32); /* lueur turquoise (radar)       */
  --halo-doux:   rgba(78, 205, 196, 0.14);

  --texte:       #233A38;
  --texte-2:     #5C6B68;
  --texte-3:     #6E7C79;   /* AA 4.5:1 sur fond crème (avant : #8A9794 ≈ 3.0:1) */

  --ligne:       rgba(35, 58, 56, 0.12);
  --ligne-forte: rgba(35, 58, 56, 0.22);

  --succes:      #1A8F4F;                   /* vert réservé au badge GRATUIT */
  --succes-fond: rgba(26, 143, 79, 0.12);
  --danger:      #D14333;
  --danger-fond: rgba(209, 67, 51, 0.12);

  --ombre-1: 0 2px 10px rgba(35, 58, 56, .08);
  --ombre-2: 0 14px 40px rgba(35, 58, 56, .16);
  --ombre-signal: 0 8px 26px rgba(78, 205, 196, .45);

  /* — Géométrie — */
  --r-sm: 9px; --r-md: 13px; --r-lg: 17px; --r-xl: 21px; --r-2xl: 26px; --r-full: 999px;
  /* Mise en page 50/50 : la liste d'activités occupe la moitié GAUCHE, la carte
     avec son radar occupe la moitié DROITE (bien visible). Redimensionnable via la
     poignée — la valeur choisie est sauvegardée et réappliquée par JS au chargement. */
  --panneau-w: clamp(360px, 50vw, 1100px);

  /* — Typo (DESIGN.md : Fraunces + Hanken Grotesk, PAS Inter/Space Grotesk) — */
  --font:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --t-brand: clamp(1.55rem, 1.2rem + 1.1vw, 2.05rem);
  --t-titre: clamp(0.95rem, 0.88rem + 0.24vw, 1.1rem);
  --t-corps: clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem);
  --t-petit: clamp(0.7rem, 0.68rem + 0.08vw, 0.76rem);
}

/* — Mode sombre optionnel : « nuit turquoise » (jamais auto, bouton seulement) — */
body.dark {
  --void:        #0E2422;                  /* nuit teintée turquoise profond */
  --charbon:     #143230;
  --charbon-2:   #1A3D3A;
  --verre:       rgba(14, 36, 34, 0.80);
  --verre-fort:  rgba(14, 36, 34, 0.93);

  --signal:      #4ECDC4;                  /* turquoise de marque, vif sur fond sombre */
  --signal-vif:  #6FE0D8;
  --signal-fonce:#2BB3AA;
  --sur-signal:  #062A27;                  /* texte foncé sur turquoise vif  */
  --halo:        rgba(78, 205, 196, 0.32);
  --halo-doux:   rgba(78, 205, 196, 0.15);

  --texte:       #EAF5F2;
  --texte-2:     #A9C2BD;
  --texte-3:     #7B938E;

  --ligne:       rgba(234, 245, 242, 0.12);
  --ligne-forte: rgba(234, 245, 242, 0.24);

  --succes:      #4FD89A;
  --succes-fond: rgba(79, 216, 154, 0.14);
  --danger:      #FF8674;
  --danger-fond: rgba(255, 134, 116, 0.14);

  --ombre-1: 0 2px 10px rgba(0, 0, 0, .35);
  --ombre-2: 0 14px 40px rgba(0, 0, 0, .48);
  --ombre-signal: 0 8px 26px rgba(78, 205, 196, .36);
}

/* ==========================================================================
   BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font);
  font-size: var(--t-corps);
  line-height: 1.55;
  color: var(--texte);
  background: var(--void);
  height: 100dvh;
  overflow: hidden;
}

button { font-family: var(--font); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }

/* Barre de défilement sur-mesure (au lieu du gris/noir du système) */
* { scrollbar-width: thin; scrollbar-color: var(--signal) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--signal); border-radius: 99px;
  border: 2px solid var(--charbon); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--signal-vif); background-clip: padding-box; }
::selection { background: var(--halo); color: var(--texte); }

/* ==========================================================================
   SCÈNE — la carte occupe TOUT, le panneau flotte dessus
========================================================================== */
/* La carte occupe TOUT l'arrière-plan ; le panneau d'activités flotte par-dessus.
   Le centre du rayon (origine du scan) est recentré par JS dans l'espace VISIBLE
   — à droite du panneau — via centrerAvecOffset() / --carte-offset-x. Comme
   .map-container a son propre contexte d'empilement (z-index:1 < panneau 400),
   tout ce qui déborde à gauche passe SOUS le panneau. */
.map-container { position: fixed; inset: 0; z-index: 1; }
#map { width: 100%; height: 100%; background: var(--void); }

#sidebar {
  position: fixed;
  top: 16px; left: 16px; bottom: 16px;
  width: var(--panneau-w);
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--verre);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2xl);
  box-shadow: var(--ombre-2);
  overflow: hidden;
  transition: transform .38s cubic-bezier(.32, .72, .25, 1);
}

/* Poignée de feuille — mobile seulement */
.poignee { display: none; }

/* Poignée de REDIMENSIONNEMENT — pilule flottante sur le bord droit du panneau.
   Glisser = élargir/rétrécir la liste d'activités. Double-clic = revenir à 75%. */
.resize-poignee {
  position: fixed;
  top: 50%;
  left: calc(16px + var(--panneau-w));
  margin-left: -10px;                 /* centre la pilule sur le bord du panneau */
  transform: translateY(-50%);
  z-index: 401;
  width: 20px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize;
  touch-action: none;
  background: var(--charbon);          /* intérieur blanc, comme le bouton du menu */
  border: 1px solid var(--ligne);
  border-radius: var(--r-full);
  box-shadow: var(--ombre-1);
  transition: border-color .18s, box-shadow .18s;
}
.resize-poignee::before {
  content: '';
  width: 4px; height: 26px;
  border-radius: var(--r-full);
  background: var(--ligne-forte);
  opacity: .7;
  transition: background .18s, opacity .18s, height .18s;
}
.resize-poignee:hover, .resize-poignee.actif {
  border-color: var(--signal);
  box-shadow: 0 0 14px var(--halo-doux), var(--ombre-1);
}
.resize-poignee:hover::before, .resize-poignee.actif::before {
  background: var(--signal); opacity: 1; height: 34px;
}
body.resizing-panneau { cursor: ew-resize; }
body.resizing-panneau, body.resizing-panneau * { user-select: none; -webkit-user-select: none; }


/* ==========================================================================
   EN-TÊTE DU PANNEAU
========================================================================== */
#sidebar header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ligne);
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  /* L'en-tête (marque + filtres + poignée de repliage) ne doit JAMAIS dépasser la
     hauteur du panneau : sinon, sur un écran peu haut, la poignée du bas se fait
     couper hors champ (#sidebar a overflow:hidden) et devient inatteignable.
     On borne donc l'en-tête et on fait défiler les filtres À L'INTÉRIEUR, en
     gardant la marque (haut) et la poignée (bas) toujours visibles. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

/* Constellation discrète (sombre seulement) */
#sidebar header::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 1;
  background-image:
    radial-gradient(1px 1px at 16% 22%, rgba(237,242,251,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 30%, rgba(237,242,251,.32) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(143,234,244,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 76%, rgba(237,242,251,.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 12%, rgba(237,242,251,.34) 0%, transparent 100%);
}
body:not(.dark) #sidebar header::before { opacity: 0; }

#sidebar header::after {
  content: '';
  position: absolute; bottom: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal) 50%, transparent);
  opacity: .55;
}

/* — Marque : Space Grotesk + satellite orbital sur le point — */
.brand-zone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 16px; position: relative;
  flex-shrink: 0;   /* la marque reste en haut, jamais compressée par le scroll des filtres */
}
.brand-left { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }

.brand {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--texte);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
/* Logo radar inline (cohérent avec les pages de ville) */
.brand-logo {
  width: clamp(26px, 1.6vw + 18px, 32px);
  height: auto;
  margin-right: 9px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px var(--halo-doux));
}
.brand > span:first-of-type {
  color: var(--signal);
  position: relative;
  display: inline-block;
  text-shadow: 0 0 18px var(--halo);
  z-index: 2;
}
/* Point final corail — la ponctuation chaude de la marque */
.brand-point {
  color: var(--corail);
  text-shadow: 0 0 14px rgba(255, 122, 92, .4);
  font-weight: 700;
}

.brand-tagline {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--signal-vif);
  letter-spacing: .03em;
  margin-top: 2px;
  opacity: .92;
}

.brand-actions { display: flex; align-items: center; gap: 6px; }

/* ☰ Menu burger — À propos · Confidentialité · Offrir un café */
.menu-wrap { position: relative; }
.menu-panneau {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  min-width: 210px;
  padding: 6px;
  background: var(--charbon);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-panneau.hidden { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: none; background: transparent;
  border-radius: var(--r-sm);
  color: var(--texte);
  font-family: var(--font); font-size: var(--t-corps); font-weight: 600;
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.menu-item:hover { background: var(--halo-doux); color: var(--signal); }

.btn-icon-round {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--charbon);
  color: var(--texte-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.btn-icon-round:hover {
  border-color: var(--signal);
  color: var(--signal-vif);
  box-shadow: 0 0 14px var(--halo);
  transform: translateY(-1px);
}
.btn-toggle-settings { display: flex; }


/* ==========================================================================
   CAPSULE DE RECHERCHE
========================================================================== */
.search-capsule { display: flex; flex-direction: column; gap: 10px; position: relative; }

.input-group {
  display: flex; align-items: center; gap: 0;
  background: var(--charbon);
  border: 1px solid var(--ligne);
  border-radius: var(--r-xl);
  padding: 2px 6px;
  transition: border-color .2s, box-shadow .2s;
}
.input-group:focus-within {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--halo-doux), 0 0 18px var(--halo-doux);
}

.input-label { font-size: 14px; flex-shrink: 0; opacity: .55; margin: 0 6px 0 8px; }

/* Les 3 champs (code postal, rayon, date) partagent l'espace À ÉGALITÉ :
   base 0 + même flex-grow = trois colonnes de largeur identique. */
.search-input {
  flex: 1 1 0; min-width: 0; width: 0;
  border: none; background: transparent; outline: none;
  font-family: var(--display);
  font-size: .95rem; font-weight: 700;
  color: var(--texte);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 11px 6px;
  text-align: center;
}
.search-input::placeholder { color: var(--texte-3); letter-spacing: .08em; }

/* Annule le fond gris/jaune que le navigateur (Chrome/Safari) applique aux
   champs remplis automatiquement (autofill). Sans ça, le code postal apparaît
   sur fond gris alors que les autres champs sont transparents. */
.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texte);
  -webkit-box-shadow: 0 0 0 1000px var(--charbon) inset;
  box-shadow: 0 0 0 1000px var(--charbon) inset;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--texte);
}

.divider { width: 1px; height: 20px; background: var(--ligne-forte); flex-shrink: 0; }

.search-select {
  flex: 1 1 0; min-width: 0; width: 0;
  border: none; background: transparent; outline: none;
  font-size: var(--t-corps); font-weight: 600;
  color: var(--texte-2);
  cursor: pointer;
  padding: 11px 6px;
  text-align: center;
  text-align-last: center;
}
.search-select option { background: var(--charbon); color: var(--texte); }
#date-filter, #date-filter-end { font-size: var(--t-petit); color: var(--texte-3); color-scheme: light; flex: 1 1 0; }
body.dark #date-filter, body.dark #date-filter-end { color-scheme: dark; }
.date-sep { font-size: 11px; color: var(--texte-3); flex-shrink: 0; padding: 0 4px; line-height: 1; user-select: none; }

/* — Bouton Scanner + signature radar — */
.btn-scan {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--turquoise), #34BFB5);  /* turquoise de marque, vif */
  color: var(--encre);
  font-family: var(--display);
  font-size: 1rem; font-weight: 700; letter-spacing: .005em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--ombre-1);
  transition: transform .22s cubic-bezier(.32,.72,.25,1), box-shadow .22s, filter .22s;
}
.btn-scan:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--ombre-signal); }
.btn-scan:active:not(:disabled) { transform: translateY(0) scale(.99); }
.btn-scan:disabled { cursor: progress; transform: none; }
.btn-scan svg { color: var(--corail); }   /* l'icône loupe en corail = ponctuation chaude */

/* 📡 Le balayage radar : un éclat clair traverse le bouton pendant le scan */
.btn-scan.scanning::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: balayage 1.15s ease-in-out infinite;
}
@keyframes balayage { to { transform: translateX(130%); } }

.btn-locate {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border: 1px solid var(--ligne);
  border-radius: var(--r-xl);
  background: var(--charbon);
  color: var(--texte-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.btn-locate:hover { border-color: var(--signal); color: var(--signal-vif); box-shadow: 0 0 14px var(--halo); transform: translateY(-1px); }
.btn-locate:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
/* GPS « ma position » : utile sur mobile (HTTPS), peu fiable sur ordinateur (souvent
   pas de service de localisation). Sur grand écran, le champ ville/code postal suffit
   → on masque le bouton GPS. (Placé APRÈS la règle de base pour la surcharger.) */
@media (min-width: 769px) { .btn-locate { display: none; } }

/* ==========================================================================
   WIDGET MÉTÉO (sous le radar — ville choisie · date de début)
========================================================================== */
/* Style « app météo » : entête ville·date, température, rangée HORAIRE
   (9→21 h), et le bouton Intérieur EN DESSOUS — jamais dans la rangée. */
.meteo-widget {
  display: flex; flex-direction: column; gap: 8px;
  width: 250px;                      /* ≈ largeur du radar au-dessus */
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--charbon);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-2, 0 10px 30px rgba(30, 24, 14, .12));
  font-size: var(--t-petit);
}
.meteo-widget.hidden { display: none; }
.meteo-entete {
  font-weight: 700; color: var(--texte-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meteo-principal { display: flex; align-items: center; gap: 10px; }
.meteo-icone { font-size: 28px; line-height: 1; }
.meteo-temp { font-size: 1.35rem; font-weight: 800; color: var(--texte); white-space: nowrap; }
.meteo-temp small { font-size: .72em; font-weight: 600; color: var(--texte-3); }
.meteo-tag { font-size: 10px; font-weight: 600; color: var(--texte-3); }
/* Rangée horaire : 5 colonnes égales (heure / icône / température) */
.meteo-heures {
  display: flex; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--ligne);
}
.meteo-h {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
}
.meteo-h-l { font-size: 10px; font-weight: 600; color: var(--texte-3); }
.meteo-h-e { font-size: 15px; line-height: 1; }
.meteo-h b { font-size: 11px; font-weight: 700; color: var(--texte); }
/* Bouton « Intérieur seulement » : SOUS la météo, pleine largeur */
.meteo-btn { width: 100%; margin-top: 2px; text-align: center; }
.weather-filter-btn {
  font-size: var(--t-petit); font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--r-full);
  border: 1px solid currentColor;
  background: transparent; color: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.weather-filter-btn:hover { background: rgba(255,255,255,.10); }

.outdoor-warn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-petit); font-weight: 600;
  color: #FFD98A;
  background: rgba(252,211,77,.10);
  border: 1px solid rgba(252,211,77,.28);
  border-radius: var(--r-full);
  padding: 3px 10px;
  margin-bottom: 8px;
}
body:not(.dark) .outdoor-warn { color: #92400E; background: #FEF6DE; border-color: #FDE68A; }

/* ==========================================================================
   FILTRES
========================================================================== */
.pills-zone {
  position: relative; margin: 12px -18px 0;
  display: flex; align-items: center; gap: 8px;
  padding-right: 18px;              /* aligne la pilule « ville » sur le bord du contenu */
}
/* La zone défilante (filtres + flèche) prend la place restante ; « Explorer par
   ville » reste épinglée à droite, hors du défilement. */
.filter-pills-wrap { position: relative; flex: 1; min-width: 0; }

.filter-pills {
  display: flex; gap: 6px;
  padding: 2px 18px 2px 18px;
  padding-right: 44px;            /* place pour la flèche */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}
/* Une fois qu'on a défilé : fondu des DEUX côtés */
.filter-pills.defile {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 82%, transparent);
}

/* 👉 Flèche : l'invitation discrète à défiler */
.pills-fleche {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ligne-forte);
  background: var(--charbon);
  color: var(--signal-vif);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ombre-1);
  animation: invite-defiler 2.2s ease-in-out infinite;
  transition: opacity .25s, transform .25s;
  z-index: 2;
}
.pills-fleche:hover { border-color: var(--signal); box-shadow: 0 0 12px var(--halo); animation-play-state: paused; }
.pills-fleche.cachee { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(6px); }
@keyframes invite-defiler {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(2px); }
}
/* Flèche GAUCHE : apparaît quand on a défilé vers la droite. Pas d'animation
   d'invite (c'est un simple retour), positionnée sur le bord gauche. */
.pills-fleche-g { left: 14px; right: auto; animation: none; transform: translateY(-50%); }
.pills-fleche-g.cachee { transform: translateY(-50%) translateX(-6px); }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills:active { cursor: grabbing; }

.pill {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--ligne);
  background: var(--charbon);
  font-size: var(--t-petit); font-weight: 600;
  color: var(--texte-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s, color .16s, background .16s, box-shadow .16s, transform .16s;
}
.pill:hover { border-color: var(--signal); color: var(--signal-vif); transform: translateY(-1px); }
.pill.active {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--sur-signal);
  box-shadow: 0 2px 14px var(--halo);
}
.pill.hidden { display: none; }
.pill[data-filter="interieur"] { border-color: rgba(96,165,250,.5); color: #9CC4FF; }
.pill[data-filter="interieur"]:hover,
.pill[data-filter="interieur"].active { background: rgba(96,165,250,.18); border-color: #60A5FA; color: #BFDBFE; box-shadow: 0 0 12px rgba(96,165,250,.25); }

/* « Explorer par ville » : pilule d'action turquoise, épinglée à droite des filtres.
   Placée APRÈS .pill pour surcharger sa bordure/couleur/fond (même spécificité). */
.pill-villes {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;
  border-color: var(--signal);
  color: var(--signal-vif);
  background: var(--halo-doux);
}
.pill-villes:hover {
  background: var(--signal); color: var(--sur-signal);
  border-color: var(--signal);
  transform: translateY(-1px); box-shadow: 0 2px 14px var(--halo);
}

/* 🎲 Surprends-moi */
.btn-surprise {
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px dashed var(--signal);
  border-radius: var(--r-xl);
  background: var(--halo-doux);
  font-family: var(--display);
  font-size: var(--t-corps); font-weight: 700;
  color: var(--signal-vif);
  cursor: pointer;
  transition: background .2s, border-style .2s, transform .2s, box-shadow .2s;
}
.btn-surprise:hover { background: var(--halo); border-style: solid; transform: translateY(-1px); box-shadow: 0 0 18px var(--halo-doux); }
.btn-surprise:active { transform: scale(.98); }
.btn-surprise.hidden { display: none; }

/* Stats + fraîcheur */
.stats-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--halo-doux);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  font-size: var(--t-petit); font-weight: 500;
  color: var(--signal-vif);
}
.stats-bar.hidden { display: none; }
.stat-val { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.stats-dot { opacity: .4; }
.stat-gratuit { color: var(--succes); font-weight: 700; }

.scan-freshness {
  font-size: var(--t-petit); font-weight: 500;
  color: var(--texte-3);
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px;
}
.scan-freshness.hidden { display: none; }
.freshness-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--succes);
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ==========================================================================
   LISTE — révélation au défilement + grille fluide
========================================================================== */
#events-container {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
  scroll-behavior: smooth;
}
/* Grille de cartes : 2 colonnes dès que le panneau est assez large.
   auto-fill + minmax = JAMAIS de chevauchement, s'adapte tout seul. */
.cartes-grille {
  display: flex;                                /* flex = cartes côte à côte, largeur fixe respectée */
  flex-direction: row;
  gap: 14px;
  margin-bottom: 10px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;                          /* ne capture PAS le scroll vertical */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: 8px;
}
.cartes-grille > .event-card {
  flex: 0 0 388px;                              /* largeur FIXE 388px, ne s'étire JAMAIS */
  width: 388px;
  max-width: 88vw;
  scroll-snap-align: start;
}
.cartes-grille::-webkit-scrollbar { height: 10px; }
.cartes-grille::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
.cartes-grille::-webkit-scrollbar-thumb { background: var(--signal); border-radius: 6px; }
.cartes-grille::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.cartes-grille.grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; }
#events-container::-webkit-scrollbar { width: 4px; }
#events-container::-webkit-scrollbar-track { background: transparent; }
#events-container::-webkit-scrollbar-thumb { background: var(--signal); border-radius: 4px; }
#events-container::-webkit-scrollbar-thumb:hover { background: var(--signal); }

.date-header {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 10px;
  font-family: var(--display);
  font-size: var(--t-petit); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--texte-3);
}
.date-header:first-of-type { margin-top: 4px; }
.date-header::after { content: ''; flex: 1; height: 1px; background: var(--ligne); }

/* — Carte d'événement — */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;                        /* bandeau illustré au-dessus du corps */
  min-height: 360px;                            /* au minimum CARRÉ (= largeur 360px) ; grandit si + de contenu */
  background: var(--charbon);                    /* intérieur blanc (comme les pages de ville) */
  border: 1px solid var(--ligne);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-1);
  cursor: pointer;
  overflow: hidden;
  transition: transform .24s cubic-bezier(.32,.72,.25,1),
              box-shadow .24s, border-color .24s;
}

/* 🖼️ Bandeau illustré — image scrapée ou illustration de la catégorie */
.card-illu {
  position: relative;
  height: 182px;              /* bandeau d'image plus généreux (avant 148px) */
  flex-shrink: 0;
  background: var(--cat-bg, var(--halo-doux));
  overflow: hidden;
}
.card-illu img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Recadrage ancré en HAUT (pas au centre) : sur une affiche d'artiste on garde
     la tête ; sur un paysage, perdre un peu de bas de champ ne coûte rien. */
  object-position: center top;
  transition: transform .35s cubic-bezier(.32,.72,.25,1);
}
.event-card:hover .card-illu img { transform: scale(1.045); }
.card-cat-pill {
  position: absolute; left: 12px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px);
  padding: 4px 11px;
  background: var(--charbon);
  color: var(--texte);
  border-radius: var(--r-full);
  font-size: var(--t-petit); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 8px rgba(20, 16, 10, .22);
}
.card-illu-badges {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 5px;
}
.card-illu-badges .badge-free,
.card-illu-badges .badge-conf {
  box-shadow: 0 1px 8px rgba(20, 16, 10, .22);
}
.card-illu-badges .badge-conf { background: var(--charbon); border-style: solid; }
/* Sur l'image, GRATUIT reste VERT mais sur fond BLANC (le vert pâle se perdait
   sur les illustrations colorées / photos scrapées). */
.card-illu-badges .badge-free { background: var(--charbon); color: var(--succes); }
.event-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cat-color, var(--signal));
  box-shadow: 0 0 10px var(--cat-color, var(--signal));
  opacity: .9;
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--ligne-forte);
  box-shadow: var(--ombre-2), 0 0 24px var(--halo-doux);
}
/* Toutes les cartes sont cliquables (coords → centrer carte, sans coords → ouvrir fiche). */
.cartes-grille:not(.grabbing) .event-card { cursor: pointer; }
.cartes-grille.grabbing .event-card { cursor: grabbing; }

/* Vedette 🎲 */
@keyframes spotlight {
  0%   { box-shadow: 0 0 0 0 var(--halo); border-color: var(--signal); }
  60%  { box-shadow: 0 0 0 16px transparent; border-color: var(--signal); }
  100% { box-shadow: var(--ombre-1); border-color: var(--signal); }
}
.event-card.card-spotlight { animation: spotlight 1.4s ease-out 2; border-color: var(--signal); }

.card-body { flex: 1; padding: 18px 18px 16px 22px; min-width: 0; display: flex; flex-direction: column; }
/* L'espace libre se met AU-DESSUS du lieu/distance → ils descendent juste
   au-dessus de la ligne « Détails · Voir la source ». Toutes les cartes gardent
   ainsi la même structure (footer + actions collés en bas). */
.event-card .card-meta { margin-top: auto; }

.badge-free {
  padding: 3px 9px;
  background: var(--succes-fond);
  color: var(--succes);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.badge-conf {
  padding: 3px 9px;
  background: transparent;
  color: var(--texte-3);
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700;
  letter-spacing: .03em; white-space: nowrap;
}
/* Expo/parcours sur plusieurs jours : « Jusqu'au 9 août » */
.badge-dates {
  padding: 3px 9px;
  background: var(--charbon);
  color: var(--sable, #f4ede1);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700;
  letter-spacing: .03em; white-space: nowrap;
  box-shadow: 0 1px 8px rgba(20, 16, 10, .22);
}

.card-title {
  font-size: var(--t-titre); font-weight: 700;
  color: var(--texte);
  line-height: 1.45;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.card-title:has(+ .card-accroche) { margin-bottom: 5px; }

/* Mini-description IA (~12 mots) — la phrase qui donne envie de cliquer */
.card-accroche {
  font-size: var(--t-corps);
  color: var(--texte-2);
  line-height: 1.5;
  margin-bottom: 12px;
}

.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.meta-city {
  font-size: var(--t-petit); font-weight: 500;
  color: var(--texte-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta-distance {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 46px; flex-shrink: 0;
  padding: 2px 9px;
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: var(--r-full);
  font-size: var(--t-petit); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texte-2);
}
.meta-distance.no-coords { color: var(--texte-3); font-style: italic; }

.card-footer {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--ligne);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.event-details-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: var(--signal);
  color: var(--sur-signal);
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--t-petit); font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.event-details-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 2px 12px var(--halo); }

.event-single-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: var(--halo-doux);
  color: var(--signal-vif);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--t-petit); font-weight: 700;
  transition: background .15s, box-shadow .15s;
}
.event-single-link:hover { background: var(--halo); box-shadow: 0 0 12px var(--halo-doux); }

.event-multi-links {
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--texte-2);
  font-family: var(--font);
  font-size: var(--t-petit); font-weight: 600;
  outline: none; cursor: pointer;
  transition: border-color .15s;
}
.event-multi-links option { background: var(--charbon); color: var(--texte); }
.event-multi-links:hover { border-color: var(--signal); }

.card-actions {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--ligne);
}
.action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px;
  border: 1px solid var(--ligne);
  border-radius: var(--r-full);
  background: transparent;
  font-size: var(--t-petit); font-weight: 600;
  color: var(--texte-2);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.action-btn:hover { border-color: var(--signal); color: var(--signal-vif); background: var(--halo-doux); }
.action-flag { margin-left: auto; padding: 5px 8px; color: var(--texte-3); border-color: transparent; background: transparent; }
.action-flag:hover { background: var(--danger-fond); border-color: var(--danger); color: var(--danger); }
.action-flag.flagged { color: var(--danger); border-color: var(--danger); background: var(--danger-fond); }

/* — Squelettes — */
@keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
.skeleton-card {
  background: var(--charbon);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--ligne-forte);
  border-radius: var(--r-lg);
  padding: 14px 14px 14px 18px;
  margin-bottom: 10px;
}
.skeleton-line {
  height: 11px;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--charbon) 25%, var(--ligne) 50%, var(--charbon) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite;
}
.skeleton-line.lg { width: 100%; height: 16px; margin-bottom: 10px; }
.skeleton-line.md { width: 60%; }
.skeleton-line.sm { width: 35%; height: 9px; }

/* — État vide — */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: 46px 24px;
  margin-top: 16px;
  background: var(--charbon);
  border: 1.5px dashed var(--ligne-forte);
  border-radius: var(--r-xl);
  color: var(--texte-2);
  font-size: var(--t-corps); font-weight: 500;
}
.empty-state .empty-icon { font-size: 42px; margin-bottom: 6px; opacity: .8; }
.empty-state strong { color: var(--texte); font-weight: 600; font-family: var(--display); font-size: 1.12rem; }
.empty-state .empty-action {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border: none; border-radius: var(--r-full);
  background: var(--corail); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.empty-state .empty-action:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,122,92,.34); filter: brightness(1.04); }

/* ==========================================================================
   📡 RADAR — signature vivante (chargement / état vide)
   Anneaux de pin + faisceau doré qui balaye + blips qui « pinguent ».
========================================================================== */
.radar-scope {
  --d: 168px;
  position: relative;
  width: var(--d); height: var(--d);
  margin: 4px auto 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* anneaux concentriques + croix de visée */
.radar-scope::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--ligne-forte);
  background:
    radial-gradient(circle, transparent 0 32%, var(--ligne) 32% 33%, transparent 33%) center / 100% 100% no-repeat,
    radial-gradient(circle, transparent 0 65%, var(--ligne) 65% 66%, transparent 66%) center / 100% 100% no-repeat,
    linear-gradient(var(--ligne), var(--ligne)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--ligne), var(--ligne)) center / 100% 1px no-repeat;
}
/* le faisceau qui tourne */
.radar-scope::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--halo) 0deg, transparent 55deg);
  -webkit-mask: radial-gradient(circle, #000 0 99.5%, transparent 100%);
  mask: radial-gradient(circle, #000 0 99.5%, transparent 100%);
  animation: radar-tourne 2.6s linear infinite;
  transform-origin: center;
}
@keyframes radar-tourne { to { transform: rotate(-360deg); } }
/* cœur du radar */
.radar-coeur {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--turquoise-profond);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--turquoise-profond) 18%, transparent);
}
body.dark .radar-coeur { background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 22%, transparent); }
/* blips détectés : pinguent quand le faisceau passe */
.radar-blip {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--corail); box-shadow: 0 0 10px var(--corail);
  opacity: 0; transform: scale(.4);
  animation: radar-blip 2.6s ease-out infinite;
}
.radar-blip.b1 { top: 26%; left: 62%; animation-delay: .35s; }
.radar-blip.b2 { top: 58%; left: 38%; animation-delay: 1.2s; }
.radar-blip.b3 { top: 40%; left: 72%; animation-delay: 1.9s; }
.radar-blip.b4 { top: 70%; left: 60%; animation-delay: 2.3s; }
@keyframes radar-blip {
  0%, 100% { opacity: 0; transform: scale(.4); }
  8%  { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .radar-scope::after { animation: none; background: conic-gradient(from 300deg, var(--halo) 0deg, transparent 55deg); }
  .radar-blip { animation: none; opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   FAB · POPUP GPS · TOAST
========================================================================== */
.map-fab {
  position: absolute;
  bottom: 110px; right: 14px;
  z-index: 500;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--texte-2);
  box-shadow: var(--ombre-1);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .18s, box-shadow .18s, transform .18s;
}
.map-fab:hover { color: var(--signal-vif); box-shadow: 0 0 18px var(--halo); transform: translateY(-2px); }
.map-fab.hidden { display: none; }

.nav-popup {
  position: fixed; z-index: 3000;
  min-width: 185px;
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-2);
  overflow: hidden;
  animation: fadeIn .14s ease;
}
.nav-popup.hidden { display: none; }
.nav-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: none; background: transparent;
  font-size: var(--t-corps); font-weight: 600;
  color: var(--texte-2);
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.nav-option:hover { background: var(--halo-doux); color: var(--texte); }
.nav-option + .nav-option { border-top: 1px solid var(--ligne); }

.orbit-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ligne-forte);
  color: var(--texte);
  font-size: var(--t-corps); font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-full);
  box-shadow: var(--ombre-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9999;
  white-space: nowrap;
}
.orbit-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   MODAL À PROPOS
========================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 9, 15, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.modal-overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--charbon);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-2xl);
  max-width: 480px; width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  box-shadow: var(--ombre-2);
  animation: slideUp .26s cubic-bezier(.32,.72,.25,1);
}
@keyframes slideUp { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 0;
  position: sticky; top: 0;
  background: var(--charbon);
  z-index: 1;
}
.modal-brand { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--texte); }
.modal-brand span { color: var(--signal); text-shadow: 0 0 14px var(--halo); }

.modal-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--charbon-2);
  color: var(--texte-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.modal-close:hover { background: var(--danger-fond); border-color: var(--danger); color: var(--danger); }

.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.modal-section { display: flex; flex-direction: column; gap: 8px; }
.modal-section-icon { font-size: 22px; }
.modal-section-title { font-family: var(--display); font-size: var(--t-titre); font-weight: 700; color: var(--texte); }
.modal-section p { font-size: var(--t-corps); line-height: 1.65; color: var(--texte-2); }
.modal-section p + p { margin-top: 6px; }
.modal-section strong { color: var(--texte); }

.modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--ligne);
  font-size: var(--t-petit);
  color: var(--texte-3);
  text-align: center; font-weight: 500;
}

.bmc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  background: #FFDD00;
  color: #1a1a1a;
  border-radius: var(--r-full);
  font-size: var(--t-petit); font-weight: 700;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.bmc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,221,0,.45); }

/* ==========================================================================
   📡 ONDES RADAR SUR LA CARTE (signature, post-scan)
========================================================================== */
.radar-onde-wrap { background: transparent; border: none; }
.radar-onde {
  position: absolute; inset: 0;
  border: 2px solid var(--turquoise);
  border-radius: 50%;
  opacity: 0;
  animation: onde-radar 3.1s cubic-bezier(.2,.6,.35,1) forwards;
}
.radar-onde.r2 { animation-delay: .45s; }
.radar-onde.r3 { animation-delay: .9s; }
@keyframes onde-radar {
  0%   { transform: scale(1);  opacity: .85; }
  100% { transform: scale(26); opacity: 0; }
}

/* 📡 Balayage radar plein écran sur la carte — le moment signature du scan */
.map-radar {
  position: absolute; left: calc(50% + var(--carte-offset-x, 0px)); top: 50%;
  width: min(78vmin, 540px); aspect-ratio: 1;   /* recentré dans l'espace visible (JS) */
  transform: translate(-50%, -50%) scale(.9);
  border-radius: 50%;
  pointer-events: none; z-index: 450;
  opacity: 0; transition: opacity .45s ease, transform .45s ease;
}
.map-radar.actif { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* anneaux + croix de visée */
.map-radar::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--halo);
  background:
    radial-gradient(circle, transparent 0 33%, var(--halo-doux) 33% 33.5%, transparent 33.5%),
    radial-gradient(circle, transparent 0 66%, var(--halo-doux) 66% 66.5%, transparent 66.5%),
    linear-gradient(var(--halo-doux), var(--halo-doux)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--halo-doux), var(--halo-doux)) center / 100% 1px no-repeat;
}
/* le faisceau qui tourne */
.map-radar::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--halo) 0deg, rgba(78,205,196,.06) 35deg, transparent 55deg);
  -webkit-mask: radial-gradient(circle, #000 0 99.5%, transparent 99.5%);
  mask: radial-gradient(circle, #000 0 99.5%, transparent 99.5%);
  animation: map-sweep 1.5s linear infinite;
}
@keyframes map-sweep { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .map-radar::after { animation: none; }
}

/* ==========================================================================
   LEAFLET — habillage
========================================================================== */
.leaflet-custom-marker { background: transparent; border: none; }
.custom-map-marker {
  position: relative;
  width: 44px; height: 44px;
  background: var(--charbon);
  border: 2.5px solid var(--cat-color, var(--signal));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 16px rgba(35,58,56,.3), 0 0 0 4px color-mix(in srgb, var(--cat-color, var(--signal)) 12%, transparent);
  transition: transform .2s cubic-bezier(.32,.72,.25,1), box-shadow .2s;
}
/* Pointe de l'épingle (carré tourné, deux bords colorés → triangle vers le bas) */
.custom-map-marker::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg);
  background: var(--charbon); z-index: -1;
  border-right: 2.5px solid var(--cat-color, var(--signal));
  border-bottom: 2.5px solid var(--cat-color, var(--signal));
}
.custom-map-marker:hover {
  transform: translateY(-3px) scale(1.14);
  box-shadow: 0 12px 24px rgba(35,58,56,.38), 0 0 0 6px color-mix(in srgb, var(--cat-color, var(--signal)) 18%, transparent);
  z-index: 10;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background-color: var(--halo); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: linear-gradient(135deg, var(--signal-vif), var(--signal));
  color: var(--sur-signal);
  font-family: var(--display); font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(35,58,56,.3);
}

.leaflet-popup-content-wrapper {
  background: var(--charbon) !important;          /* fond blanc */
  border: 1px solid var(--ligne) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--ombre-2) !important;
  padding: 0 !important;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip { background: var(--charbon) !important; }
.leaflet-popup-close-button { color: var(--texte-2) !important; }

.orbit-popup { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; min-width: 210px; max-width: 270px; }
.popup-emoji-wrap {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.popup-content { flex: 1; min-width: 0; }
.popup-title {
  font-weight: 700; font-size: var(--t-corps); line-height: 1.4;
  color: var(--texte); margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.popup-city { font-size: var(--t-petit); color: var(--texte-2); margin-bottom: 7px; }
.popup-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.popup-time {
  font-size: var(--t-petit); font-weight: 700;
  color: var(--signal-vif); background: var(--halo-doux);
  padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap;
}
.popup-dist { font-size: var(--t-petit); color: var(--texte-2); font-weight: 600; }
.popup-link {
  display: block; width: 100%; margin-top: 10px;
  text-align: center; padding: 8px 10px;
  background: var(--signal); color: var(--sur-signal);
  border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--display); font-size: var(--t-petit); font-weight: 700;
  text-decoration: none;
  transition: filter .15s, box-shadow .15s, transform .15s;
}
.popup-link:hover { filter: brightness(1.08); box-shadow: 0 2px 12px var(--halo); transform: translateY(-1px); }

.leaflet-control-zoom { border: none !important; box-shadow: var(--ombre-1) !important; border-radius: var(--r-md) !important; overflow: hidden; }
.leaflet-control-zoom a {
  background: var(--verre-fort) !important;
  color: var(--texte-2) !important;
  border: none !important;
  border-bottom: 1px solid var(--ligne) !important;
  width: 36px !important; height: 36px !important; line-height: 36px !important;
  font-size: 18px !important; font-weight: 700 !important;
}
.leaflet-control-zoom a:last-child { border-bottom: none !important; }
.leaflet-control-zoom a:hover { color: var(--signal-vif) !important; }
.leaflet-control-attribution {
  font-size: 10px !important;
  background: var(--verre) !important;
  color: var(--texte-3) !important;
  border-radius: var(--r-sm) 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--texte-2) !important; }

/* ==========================================================================
   ✨ VIEW TRANSITIONS — morphing des cartes au filtrage
========================================================================== */
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: cubic-bezier(.32,.72,.25,1); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .26s; }

/* ==========================================================================
   📱 BARRE DE NAVIGATION MOBILE (app native)
========================================================================== */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid var(--ligne);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px;
  border: none; background: transparent;
  border-radius: var(--r-md);
  font-size: 10.5px; font-weight: 600;
  color: var(--texte-3);
  cursor: pointer;
  transition: color .18s, background .18s, transform .12s;
}
.nav-item:active { transform: scale(.94); }
.nav-item.active { color: var(--signal-vif); background: var(--halo-doux); }
.nav-de { font-size: 19px; line-height: 1; }

/* ==========================================================================
   RESPONSIVE
   ≤768px : feuille coulissante + nav en bas — ≥1600px : grille 2 colonnes
========================================================================== */
@media (max-width: 768px) {
  #sidebar {
    top: 0; left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    width: 100%;
    /* PLEIN ÉCRAN : la page Activités occupe tout l'espace au-dessus de la
       barre de navigation et CACHE complètement la carte. Sur un téléphone,
       voir la carte ici la rendait minuscule et inutilisable. La carte ne
       s'affiche QUE dans l'onglet Carte (sidebar repliée). */
    height: auto;
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    background: var(--charbon);
    transition: transform .38s cubic-bezier(.32,.72,.25,1);
  }
  #sidebar.collapsed { transform: translateY(calc(100% + 24px)); }
  .resize-poignee { display: none; }   /* feuille pleine largeur : pas de redim. horizontal */

  /* Poignée : grande zone tactile, tap = ouvrir/fermer, glisser = ajuster */
  .poignee {
    display: block;
    position: relative;
    width: 48px; height: 5px;
    margin: 0 auto;
    border-radius: var(--r-full);
    background: var(--ligne-forte);
    flex-shrink: 0;
    cursor: grab;
  }
  .poignee::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 30px;
    cursor: grab;
  }
  #sidebar header { padding: 6px 16px 12px; position: relative; }

  .bottom-nav { display: grid; }
  #btn-darkmode { display: none; }
  .btn-toggle-settings { display: flex; }

  /* Zones tactiles ≥ 44px (recommandation tactile) */
  .btn-icon-round { width: 40px; height: 40px; }
  .brand-actions { gap: 8px; }

  /* Capsule de recherche : champs plus hauts, faciles à viser au doigt */
  .input-group { padding: 4px; }
  #postal-code { flex: 1 1 auto; min-width: 104px; min-height: 44px; font-size: 16px; }
  #radius { flex: 0 0 70px; min-width: 0; min-height: 44px; }
  #date-filter, #date-filter-end { min-height: 44px; }
  .search-select { min-height: 44px; }
  .btn-scan { min-height: 50px; font-size: 1rem; }
  .btn-locate { min-width: 50px; min-height: 50px; }

  /* Navigation du bas plus généreuse */
  .nav-item { padding: 8px 4px; font-size: 11px; min-height: 52px; }

  /* Fiche détail : pleine largeur, collée au bas comme une feuille native */
  .fiche-overlay { padding: 0; align-items: flex-end; }
  .fiche-carte {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  }

  .map-fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .orbit-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Carrousel mobile : carte ≈ pleine largeur écran, carrée, barre cachée. */
  .cartes-grille { scrollbar-width: none; }
  .cartes-grille::-webkit-scrollbar { display: none; }
  .cartes-grille > .event-card { flex: 0 0 86vw; width: 86vw; max-width: 86vw; min-height: 86vw; }
}

@media (min-width: 1600px) {
  :root { --panneau-w: clamp(520px, 50vw, 1400px); }
}

/* ==========================================================================
   ♿ MOUVEMENT RÉDUIT
========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* Les ondes radar de la carte (après un scan) sont coupées en mouvement réduit */
  .radar-onde { display: none; }
  #events-container { scroll-behavior: auto; }
}

/* 🌐 Bouton de langue */
.btn-lang {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ==========================================================================
   ♿/SEO — texte pour lecteurs d'écran et moteurs de recherche
========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement (WCAG 2.4.1) — hors écran, visible seulement au focus clavier */
.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--signal-fonce);
  color: var(--sur-signal);
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: var(--t-corps);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--ombre-2);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   FICHE DÉTAILLÉE — la carte centrale avec toutes les infos
========================================================================== */
.fiche-overlay {
  position: fixed; inset: 0;
  z-index: 5000;
  background: rgba(6, 9, 15, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.fiche-overlay.hidden { display: none; }

.fiche-carte {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--charbon);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-2xl);
  box-shadow: var(--ombre-2);
  animation: ficheIn .3s cubic-bezier(.32,.72,.25,1);
}
@keyframes ficheIn { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.fiche-carte::-webkit-scrollbar { width: 5px; }
.fiche-carte::-webkit-scrollbar-thumb { background: var(--signal); border-radius: 4px; }

.fiche-fermer {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--texte-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.fiche-fermer:hover { background: var(--danger-fond); border-color: var(--danger); color: var(--danger); }

/* En-tête coloré selon la catégorie */
.fiche-entete {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 26px 26px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 14%, transparent), transparent 70%);
  border-bottom: 1px solid var(--ligne);
}
.fiche-emoji {
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: var(--cat-bg, var(--halo-doux));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cat-color) 30%, transparent);
}
.fiche-titre-zone { flex: 1; min-width: 0; padding-right: 36px; }
.fiche-badges { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.fiche-badge.gratuit { background: var(--succes-fond); color: var(--succes); }
.fiche-badge.conf { background: transparent; color: var(--texte-3); border: 1px dashed var(--ligne-forte); }
/* Infos pratiques (inscription, chiens, pluie) — ton neutre, casse normale. */
.fiche-badge.info {
  background: var(--surface-2, rgba(127,127,127,.12));
  color: var(--texte-2);
  text-transform: none; letter-spacing: 0; font-weight: 700;
}
.fiche-titre {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
  font-weight: 700; line-height: 1.25;
  color: var(--texte);
}

/* Description générée par l'IA */
.fiche-desc { padding: 20px 26px 6px; }
.fiche-desc-titre {
  font-size: var(--t-petit); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--signal-vif);
  margin-bottom: 8px;
}
.fiche-desc p { font-size: var(--t-corps); line-height: 1.7; color: var(--texte); }
.fiche-desc-vide { color: var(--texte-3); font-style: italic; }

/* Lignes d'info */
.fiche-infos {
  padding: 18px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.fiche-ligne { display: flex; align-items: flex-start; gap: 12px; }
.fiche-ico {
  font-size: 17px; flex-shrink: 0;
  width: 24px; text-align: center;
}
.fiche-l-titre {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3);
  margin-bottom: 1px;
}
.fiche-l-val { font-size: var(--t-corps); font-weight: 600; color: var(--texte); line-height: 1.4; }

/* Boutons d'action */
.fiche-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px 26px 18px;
}
.fiche-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-lg);
  background: var(--charbon-2);
  color: var(--texte);
  font-family: var(--font); font-size: var(--t-corps); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.fiche-action:hover { border-color: var(--signal); transform: translateY(-1px); }
.fiche-action.primaire {
  background: var(--signal); color: var(--sur-signal); border-color: var(--signal);
  box-shadow: 0 2px 14px var(--halo);
}
.fiche-action.primaire:hover { filter: brightness(1.08); }
.fiche-action.lien { background: var(--halo-doux); border-color: transparent; color: var(--signal-vif); }

.fiche-signaler {
  display: block; width: calc(100% - 52px);
  margin: 0 26px 24px;
  padding: 9px;
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  color: var(--texte-3);
  font-size: var(--t-petit); font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.fiche-signaler:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-fond); }

/* #2 — Menu de raisons affiché dans la fiche (plus de popup masqué) */
.fiche-signaler-zone { padding: 0 26px 24px; }
.fiche-signaler-zone .fiche-signaler { width: 100%; margin: 0; }
.fiche-signal-menu {
  margin-top: 8px;
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--charbon-2);
  overflow: hidden;
  animation: fadeIn .18s ease;
}
.fiche-signal-menu.hidden { display: none; }
.fiche-signal-titre {
  padding: 10px 14px 4px;
  font-size: var(--t-petit); font-weight: 700; color: var(--texte-3);
}
.fiche-signal-option {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px;
  border: none; background: transparent;
  color: var(--texte-2);
  font-family: var(--font); font-size: var(--t-corps); font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.fiche-signal-option:hover { background: var(--halo-doux); color: var(--texte); }
.fiche-signal-merci {
  padding: 14px; text-align: center;
  color: var(--succes); font-weight: 700; font-size: var(--t-corps);
}

/* ==========================================================================
   PARAMÈTRES COLLAPSABLES
========================================================================== */
#settings-panel {
  /* Zone des filtres : défile à l'intérieur de l'en-tête quand l'écran est trop
     court, pour que la marque (haut) et la poignée (bas) restent toujours vues. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  transition: opacity 0.25s ease;
  opacity: 1;
  /* la barre de défilement ne colle pas au contenu */
  margin-right: -6px;
  padding-right: 6px;
  scrollbar-width: thin;
}
#sidebar.settings-collapsed #settings-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
#sidebar.settings-collapsed .brand-zone {
  margin-bottom: 0;
}
#icon-settings-chevron {
  transition: transform 0.3s ease;
}
#sidebar.settings-collapsed #icon-settings-chevron {
  transform: rotate(180deg);
}

/* Poignée de repliage — centrée, en bas du menu (mobile + ordi) */
.settings-toggle-row {
  display: flex; justify-content: center;
  padding: 10px 0 2px;
  flex-shrink: 0;   /* la poignée reste collée au bas de l'en-tête, jamais coupée */
}
.btn-toggle-settings {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 26px;
  border-radius: var(--r-full);
  border: 1px solid var(--ligne);
  background: var(--charbon);
  color: var(--texte-2);
  cursor: pointer;
  transition: border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.btn-toggle-settings:hover {
  border-color: var(--signal); color: var(--signal);
  box-shadow: 0 0 12px var(--halo-doux);
  transform: translateY(-1px);
}
.btn-toggle-settings:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   FILTRE PYRAMIDAL — Pour qui / Où / Quoi (taxonomie)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le panneau se FOND dans la page (aucun contour, aucun fond propre) :
   seuls les BOUTONS blancs se détachent, comme partout ailleurs sur le site. */
.pyramide {
  display: flex; flex-direction: column; gap: 14px; margin-top: 12px;
  padding: 14px 0; background: transparent; border: none;
  border-radius: 0; box-shadow: none;
}
.pyr-axe { display: flex; flex-direction: column; gap: 8px; }
.pyr-titre {
  font-family: var(--display); font-weight: 700; font-size: var(--t-petit);
  color: var(--signal); letter-spacing: .02em; text-transform: uppercase;
}
.pyr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pyr-chip {
  font-family: var(--font); font-weight: 600; font-size: var(--t-petit);
  padding: 7px 13px; border-radius: var(--r-full); border: 1.5px solid var(--ligne);
  background: var(--charbon); color: var(--texte); cursor: pointer;
  transition: transform .14s, border-color .14s, background .14s, color .14s;
}
.pyr-chip:hover { transform: translateY(-1px); border-color: var(--turquoise); }
.pyr-chip.actif {
  background: var(--signal); border-color: var(--signal);
  color: var(--sur-signal); box-shadow: var(--ombre-signal);
}

/* « Quoi » : 6 grandes tuiles emoji */
.pyr-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pyr-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border-radius: var(--r-md); border: 1.5px solid var(--ligne);
  background: var(--charbon); color: var(--texte); cursor: pointer; text-align: center;
  transition: transform .15s cubic-bezier(.3,.7,.3,1), border-color .15s, box-shadow .15s, background .15s;
}
.pyr-tuile:hover { transform: translateY(-2px); border-color: var(--turquoise); box-shadow: 0 6px 16px var(--halo); }
.pyr-tuile.actif { background: var(--halo-doux); border-color: var(--turquoise); box-shadow: 0 0 0 2px var(--turquoise) inset; }
.pyr-tuile-emoji { font-size: 1.5rem; line-height: 1; }
.pyr-tuile-label { font-size: .7rem; font-weight: 700; line-height: 1.15; color: var(--texte-2); }
.pyr-tuile.actif .pyr-tuile-label { color: var(--signal); }

/* Sous-catégories révélées sous la tuile active */
.pyr-sous-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--ligne); animation: pyr-reveal .22s ease both;
}
@keyframes pyr-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pyr-souschip {
  font-size: var(--t-petit); font-weight: 600; padding: 5px 11px;
  border-radius: var(--r-full); border: 1.5px solid var(--ligne);
  background: var(--charbon); color: var(--texte-2); cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.pyr-souschip:hover { border-color: var(--turquoise); color: var(--texte); }
.pyr-souschip.actif { background: var(--turquoise); border-color: var(--turquoise); color: var(--encre); }

.pyr-reset {
  align-self: flex-start; font-family: var(--font); font-weight: 600;
  font-size: var(--t-petit); color: var(--texte-2); background: none; border: none;
  cursor: pointer; padding: 4px 2px;
}
.pyr-reset:hover { color: var(--corail-fonce); }

/* L'app n'a pas de .hidden global → chaque élément déclare sa propre règle. */
.pyramide.hidden     { display: none; }
.pyr-sous-row.hidden { display: none; }   /* sous-cats cachées tant qu'aucune catégorie choisie */
.pyr-reset.hidden    { display: none; }
/* ============================================================================
   ═══ v17 — SITE PLEINE PAGE (refonte maquette, juillet 2026) ═══
   La carte Leaflet vit maintenant sur carte.html ; l'index devient une page
   qui défile : héro « gratis » + radar décoratif, recherche, filtres, grille
   de cartes, pied de page. Tout est scopé body.page-radar : les autres pages
   (carte.html, villes/) ne sont pas touchées.
============================================================================ */

body.page-radar { display: block; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100vh; min-height: 100dvh; }
body.page-radar .map-container { display: none; }
body.page-radar [hidden] { display: none !important; }

body.page-radar #sidebar {
  position: static;
  width: auto; max-width: 1160px;
  height: auto; max-height: none;
  margin: 0 auto;
  padding: 0 28px 24px;
  background: transparent;
  border: none; border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: block;
  overflow: visible;
  inset: auto;
}
body.page-radar #sidebar header {
  position: static;
  /* ⬆️ LE dégagement du haut : posé ICI (sélecteur avec #sidebar) et non sur
     .site-entete, sinon un ID l'emporte toujours sur des classes et le titre
     reste collé en haut — c'était la cause du bug « padding jamais visible ». */
  padding: 48px 0 0; margin: 0;
  background: transparent;
  border: none; box-shadow: none;
}
body.page-radar #sidebar header::before,
body.page-radar #sidebar header::after { display: none; }
body.page-radar #events-container {
  overflow: visible;
  height: auto; max-height: none;
  padding: 0;
}

/* ── En-tête du site (le dégagement du haut est posé sur #sidebar header ci-dessus) ── */
body.page-radar .brand-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
body.page-radar .brand-actions { display: flex; align-items: center; gap: 8px; }

/* ── Héro ── */
body.page-radar .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: center;
  gap: 36px;
  padding: 52px 0 12px;
}
body.page-radar .hero-titre {
  font-family: var(--display, 'Bricolage Grotesque', system-ui);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--texte);                  /* encre foncée, comme le guide */
  margin: 0 0 16px;
}
body.page-radar .hero-titre mark {
  background: #FBDDD2;                  /* pêche doux, texte corail foncé (guide) */
  color: #B33A25;
  padding: 0.02em 0.16em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.dark.page-radar .hero-titre mark { background: #4A2C22; color: #FFB09A; }

body.page-radar .hero-sub {
  font-size: .95rem;                     /* discret par rapport au titre (proportions maquette) */
  line-height: 1.6;
  color: var(--texte-2);
  max-width: 44ch;
  margin: 0;
}

/* 🔎 Autocomplete de villes — suggestions sous le champ, tolérantes aux fautes. */
.input-group { position: relative; }
.ville-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 240px;
  max-width: min(88vw, 360px);
  background: var(--charbon);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-2);
}
.ville-suggest li {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ville-suggest li:hover,
.ville-suggest li.actif {
  background: var(--halo-doux);
  color: var(--signal);
}

/* ── Radar signature (le MÊME emblème que les pages de ville, en grand) ── */
body.page-radar .hero-radar {
  justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
body.page-radar .radar-emblem {
  width: 230px; height: 230px; position: relative;
  border-radius: 50%;
  filter: drop-shadow(0 10px 28px rgba(78, 205, 196, .30));
}
/* Façon « pages de ville » (la référence d'Antoine) : anneaux fins sur fond
   crème, CROIX POINTILLÉE, faisceau sarcelle doux SANS aiguille, cœur sarcelle,
   blips corail qui ne s'allument QU'AU PASSAGE du faisceau. */
body.page-radar .radar-emblem::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--ligne-forte);
  background:
    radial-gradient(circle, transparent 0 65.6%, var(--ligne) 65.6% 66.3%, transparent 66.3%) center/100% 100% no-repeat,
    radial-gradient(circle, transparent 0 32.6%, var(--ligne) 32.6% 33.3%, transparent 33.3%) center/100% 100% no-repeat,
    radial-gradient(circle, var(--void) 0 99%, transparent 99%);
}
/* Croix pointillée (méridiens), comme l'emblème des pages de ville */
body.page-radar .radar-croix {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
}
body.page-radar .radar-croix::before,
body.page-radar .radar-croix::after {
  content: ''; position: absolute; background: transparent;
}
body.page-radar .radar-croix::before {           /* horizontale */
  left: 3%; right: 3%; top: 50%; height: 0;
  border-top: 1px dashed var(--ligne-forte);
}
body.page-radar .radar-croix::after {            /* verticale */
  top: 3%; bottom: 3%; left: 50%; width: 0;
  border-left: 1px dashed var(--ligne-forte);
}
/* Faisceau : voile sarcelle doux qui traîne derrière le bord de balayage
   (rotation antihoraire, bord net à 0° = « l'aiguille » implicite). */
body.page-radar .radar-faisceau {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--turquoise) 38%, transparent) 0deg,
    color-mix(in srgb, var(--turquoise) 16%, transparent) 26deg,
    transparent 68deg);
  -webkit-mask: radial-gradient(circle, #000 0 99%, transparent 99%);
  mask: radial-gradient(circle, #000 0 99%, transparent 99%);
  /* 4.6s : balayage posé. Même durée que emblem-blip et que T dans app.js
     (blipsRadar) — les trois DOIVENT rester égaux. L'animation est REDÉMARRÉE
     par app.js au chargement pour que les blips soient calés dessus. */
  animation: radar-tourne 4.6s linear infinite;   /* @keyframes radar-tourne défini plus haut */
}
body.page-radar .radar-emblem i {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--signal); z-index: 2;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--turquoise) 22%, transparent);
}
/* Blips : posés + synchronisés par app.js (le ping part quand le faisceau passe) */
body.page-radar .radar-emblem b {
  position: absolute; border-radius: 50%;
  background: var(--corail);
  opacity: 0;
  animation: emblem-blip 4.6s linear infinite;    /* = durée du balayage */
  box-shadow:
    0 0 0 5px color-mix(in srgb, currentColor 16%, transparent),
    0 0 14px 4px color-mix(in srgb, currentColor 30%, transparent);
}
/* Vrai radar : INVISIBLE avant le passage du faisceau, allumage net au
   passage, puis décroissance « phosphore » jusqu'au tour suivant. */
@keyframes emblem-blip {
  0%    { opacity: 0;   transform: scale(.5); }
  1.5%  { opacity: 1;   transform: scale(1.15); }
  7%    { opacity: .95; transform: scale(1); }
  55%   { opacity: .35; }
  96%   { opacity: .03; transform: scale(.9); }
  100%  { opacity: 0;   transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-radar .radar-faisceau { animation: none;
    background: conic-gradient(from 300deg,
      color-mix(in srgb, var(--turquoise) 30%, transparent) 0deg, transparent 68deg); }
  body.page-radar .radar-emblem b { animation: none; opacity: 1; }
}

/* ── Scanner DANS la bulle, avec le lieu et le rayon (maquette) ── */
body.page-radar .scan-ligne { display: flex; gap: 10px; align-items: center; }
body.page-radar .scan-ligne .input-group {
  flex: 1; min-width: 0; margin: 0;
  padding-right: 6px;                      /* respiration autour du bouton */
}
body.page-radar .scan-ligne .btn-scan {
  width: auto; flex: 0 0 auto;
  align-self: center;
  margin: 5px 0 5px 6px;
  padding: 10px 20px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
@media (max-width: 640px) {
  body.page-radar .scan-ligne .search-select { min-width: 66px; }
  body.page-radar .scan-ligne .btn-scan { padding: 9px 14px; }
}

/* Boutons d'en-tête discrets, comme le guide : du texte, pas des pilules */

/* Rayon compact : pas besoin de la moitié de la bulle pour « 15 km » */
body.page-radar .scan-ligne #radius { flex: 0 0 auto; width: 108px; min-width: 0; }
/* Code postal aligné à gauche (collé au 📍) plutôt que flottant au centre du vide */
body.page-radar .scan-ligne .search-input {
  flex: 1; min-width: 0;
  text-align: left; padding-left: 10px; letter-spacing: .06em;
}

/* Dates : DEUX bulles séparées « Du » et « Au » (comme le guide) */
body.page-radar .dates-ligne { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
body.page-radar .dates-ligne .date-pill { flex: 0 1 auto; margin: 0; padding-right: 14px; }
body.page-radar .date-pill .search-select {
  width: 158px; flex: 0 0 auto; min-width: 0;   /* le champ date garde sa largeur dans la bulle */
}
body.page-radar .dates-ligne .date-sep { color: var(--texte-3); flex: 0 0 auto; }
body.page-radar .date-lab {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-3);
}
@media (max-width: 640px) {
  body.page-radar .dates-ligne { flex-wrap: wrap; }
  body.page-radar .dates-ligne .date-pill { flex: 1 1 100%; }
  body.page-radar .dates-ligne .date-sep { display: none; }
}

/* Ligne grise très pâle qui délimite la zone recherche/filtres des résultats */
body.page-radar #settings-panel {
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 24px;
}

/* ── La ligne de couleur des cartes monte JUSQU'EN HAUT (par-dessus l'image) ── */
body.page-radar .event-card::before { z-index: 2; width: 5px; }

/* ── T inversé : la recherche vit dans le héro (colonne gauche)… ── */
body.page-radar .hero-gauche .search-capsule { margin-top: 26px; max-width: 620px; }
/* …et la barre du bas (pilules + pyramide) traverse toute la largeur. */
body.page-radar #settings-panel {
  max-width: none;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
}
body.page-radar .pills-zone { flex-wrap: wrap; }

/* ── Entête des résultats ── */
body.page-radar .resultats-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 26px 0 14px;
}
body.page-radar .resultats-entete .stats-bar,
body.page-radar .resultats-entete .btn-surprise { margin: 0; }

/* ── Cartes : UNE rangée par journée, défilement gauche-droite (carrousel) ──
   On NE surcharge PAS .cartes-grille ici : on garde le carrousel horizontal de
   base (display:flex + overflow-x:auto + scroll-snap + cartes 360px). Chaque
   groupe de date reste une rangée qui défile latéralement, comme avant. */

/* ── Pied de page ── */
body.page-radar .site-footer {
  margin-top: 44px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--ligne);
}
body.page-radar .site-footer .scan-freshness { position: static; margin: 0 0 12px; text-align: center; }
body.page-radar .footer-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  font-size: var(--t-petit); color: var(--texte-2);
}
body.page-radar .footer-liens { display: flex; gap: 18px; }
body.page-radar .footer-lien {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--texte-2);
  cursor: pointer; text-decoration: none;
}
body.page-radar .footer-lien:hover { color: var(--signal); text-decoration: underline; }

/* Lien « Carte » de la barre mobile (devenu un <a>) */
.bottom-nav a.nav-item { text-decoration: none; }

/* ── Écrans étroits ── */
@media (max-width: 900px) {
  body.page-radar .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 12px; }
  /* Radar caché sur mobile, mais la MÉTÉO reste : ligne compacte sous les dates. */
  /* justify-self/align-items : stretch → le conteneur REMPLIT la colonne au lieu
     de rétrécir au contenu (sinon la météo reste un petit cartouche centré). */
  body.page-radar .hero-radar { display: flex; justify-self: stretch; align-items: stretch; margin-top: 12px; }
  body.page-radar .hero-radar .radar-emblem { display: none; }
  /* Même largeur que la capsule de recherche / le filtre de dates (620px). */
  body.page-radar .meteo-widget { width: 100%; max-width: 620px; padding: 10px 14px; }
  body.page-radar .meteo-widget .meteo-temp { font-size: 1rem; }
  body.page-radar #sidebar { padding: 0 16px 84px; }  /* place pour la barre du bas */
  /* padding-top = air de base + encoche (env=0 si pas d'encoche → inchangé) */
  body.page-radar #sidebar header { padding-top: calc(22px + env(safe-area-inset-top)); }
  body.page-radar .footer-ligne { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIFS MOBILE (v22) — placés en DERNIER pour l'emporter sur les règles
   desktop de même spécificité (le rayon 108px, etc.).
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
}
@media (max-width: 640px) {
  /* La bulle de recherche passe en DEUX lignes sur téléphone :
       ligne 1 → 📍 lieu · rayon · GPS
       ligne 2 → bouton « Scanner les environs » pleine largeur
     Fini le bouton coupé hors écran et le GPS inatteignable derrière lui. */
  body.page-radar .scan-ligne { flex-wrap: wrap; }
  body.page-radar .scan-ligne .input-group { flex-wrap: wrap; row-gap: 8px; }
  body.page-radar .scan-ligne .search-input { flex: 1 1 40%; min-width: 96px; }
  body.page-radar .scan-ligne #radius { flex: 0 0 auto; width: auto; }
  body.page-radar .scan-ligne .btn-locate { flex: 0 0 auto; }
  body.page-radar .scan-ligne .btn-scan {
    flex: 1 1 100%;
    margin: 2px 0;
    padding: 13px 18px;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ⬆️ Bouton « Revenir en haut »
   Flottant en bas à droite, au-dessus de la barre de navigation mobile.
   `env(safe-area-inset-*)` évite qu'il passe sous la barre gestuelle iPhone.
   ───────────────────────────────────────────────────────────────────────────── */
.retour-haut {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(84px + env(safe-area-inset-bottom)); /* au-dessus de la nav mobile */
  z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--ligne-forte, rgba(35,58,56,.22));
  border-radius: var(--r-full, 999px);
  background: var(--charbon, #fff);
  color: var(--texte, #233A38);
  font: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ombre-2, 0 8px 24px rgba(30,24,14,.16));
  /* État masqué : on anime depuis le bas, pas d'apparition sèche. */
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, border-color .16s;
}
.retour-haut.visible { opacity: 1; transform: translateY(0); }
.retour-haut:hover { border-color: var(--signal, #0E6E66); color: var(--signal, #0E6E66); }
.retour-haut:focus-visible { outline: 2px solid var(--signal, #0E6E66); outline-offset: 3px; }

/* Sur grand écran, pas de barre de nav en bas → le bouton peut descendre. */
@media (min-width: 769px) {
  .retour-haut { bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* Écran étroit : on garde l'icône seule, le libellé mangerait la largeur. */
@media (max-width: 420px) {
  .retour-haut { padding: 12px; gap: 0; }
  .retour-haut span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .retour-haut { transition: opacity .01ms; transform: none; }
}