/* ============================================================================
   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.
============================================================================ */

/* ==========================================================================
   POLICE — Hanken Grotesk, AUTO-HÉBERGÉE
   --------------------------------------------------------------------------
   Avant : Google Fonts, soit DEUX origines tierces à résoudre (DNS + TLS)
   AVANT le premier rendu, sur les 161 pages :
       HTML → fonts.googleapis.com → fonts.gstatic.com → le texte s'affiche
   Le chargement différé habituel (media="print" + onload) est INAPPLICABLE :
   la CSP du site n'autorise aucun gestionnaire inline. D'où l'auto-hébergement.

   Un SEUL fichier variable (33,9 Ko) couvre tous les poids utilisés
   (400 implicite, 500, 600, 700, 800). En statique il en aurait fallu cinq.
   Sous-ensemble `latin` uniquement : tout le français y est, Œ/œ compris.

   Chemin RELATIF AU FICHIER CSS (../assets/…), PAS absolu. Les url() d'un CSS
   externe sont résolues depuis l'emplacement du .css (ici /css/style.css),
   jamais depuis la page qui l'inclut. « ../assets/fonts/… » vise donc toujours
   /assets/fonts/…, que le site soit servi à la racine (prod Cloudflare) ou
   dans un sous-dossier (test local depuis GitHub/). L'absolu « /assets/… »
   supposait la racine = web/ → 404 en local. (Les pages villes, elles, ont un
   @font-face INLINE et gardent l'absolu : voir _CSS dans le générateur.)

   Régénérer le fichier : python script/outils/telecharger_polices.py
========================================================================== */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk-variable.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;   /* texte lisible tout de suite, bascule ensuite */
}

/* ==========================================================================
   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 — UNE SEULE famille depuis le 2026-07-20 : Hanken Grotesk partout.
     Bricolage Grotesque (ex-`--display`) a été retirée : elle imposait une
     seconde famille à télécharger alors que Hanken était DÉJÀ son repli
     déclaré — la retirer ne casse donc aucune mise en page, les titres
     deviennent seulement plus sobres.
     `--display` est CONSERVÉE comme variable (24 sélecteurs l'utilisent) :
     elle pointe maintenant sur la même famille, ce qui laisse la porte
     ouverte à une police de titres distincte plus tard, sans tout réécrire. */
  --font:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --display: 'Hanken Grotesk', 'Segoe UI', 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 reste VISIBLE sur mobile (préférence d'Antoine, 2026-07-21) :
     le bouton rond 🌙 du header, pas une entrée de menu. La règle qui le
     masquait datait de l'époque où le thème vivait dans la barre du bas. */
  .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 {
  /* 📌 En-tête ÉPINGLÉ : sur l'accueil, c'est le <body> qui défile (l. 1874),
     le header suivait donc le contenu vers le haut. `sticky` le fige en tête
     de fenêtre : la marque, le sélecteur FR/EN, le mode nuit et le menu
     (À propos · Confidentialité) restent atteignables à tout moment.
     Il faut un fond quasi opaque, sinon les cartes d'activités défileraient
     visiblement dessous. --verre-fort (95 %) laisse juste assez passer pour
     que le backdrop-filter crée un effet « verre » cohérent avec le panneau,
     dans les deux thèmes (crème clair / nuit sombre). */
  position: sticky;
  top: 0;
  z-index: 500;                 /* au-dessus des cartes, sous les modals (3000) */
  /* Le dégagement du haut vit désormais dans le padding : plus besoin des 48px
     d'avant, qui servaient quand le header défilait sous le bord de l'écran. */
  padding: 14px 28px; margin: 0 -28px;   /* -28px annule le padding latéral du #sidebar → fond pleine largeur */
  /* Ni ombre ni bordure : elles dessinaient une « boîte » au bord du header.
     Un simple fond flouté suffit à séparer le bandeau du contenu qui glisse
     dessous — plus propre, sans arête visible. */
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
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; }
/* Les deux champs DU / AU se partagent la ligne À ÉGALITÉ (flex: 1) pour que la
   rangée fasse exactement la largeur de la barre de recherche au-dessus (toutes
   deux dans .search-capsule, max-width 620px). min-width: 0 autorise le
   rétrécissement sous la largeur du contenu. */
body.page-radar .dates-ligne .date-pill { flex: 1 1 0; min-width: 0; margin: 0; padding-right: 14px; }
body.page-radar .date-pill .search-select {
  flex: 1 1 auto; width: auto; min-width: 0;     /* le champ date remplit sa pilule */
}
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; }
  /* Côte à côte (et non empilés) : deux rangées de dates mangeaient ~110px de
     hauteur avant la liste — la moitié suffit. min-width:0 laisse rétrécir. */
  body.page-radar .dates-ligne .date-pill { flex: 1 1 0; min-width: 0; }
  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 */
  /* En-tête épinglé sur mobile : padding et marge latéraux ramenés à 16px pour
     s'aligner sur le #sidebar (sinon le fond du header déborderait de 12px).
     padding-top intègre l'encoche (env=0 si pas d'encoche → inchangé). */
  body.page-radar #sidebar header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    margin: 0 -16px;
  }
  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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 REFONTE MOBILE (2026-07-21) — tout est scopé < 768px : le desktop ne
   change pas d'un pixel. Palette et pilules existantes réutilisées partout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les éléments « sheet » et la barre condensée n'existent pas sur ordi. */
.sheet-tete, .sheet-voir, .sheet-fond, .barre-condensee { display: none; }
.nav-badge { display: none; }

@media (max-width: 768px) {

  /* ── 1. BOTTOM SHEET DE FILTRES ─────────────────────────────────────────
     Le bloc #filtre-pyramide (dans le flux sur ordi) devient un panneau fixe
     qui glisse du bas. Sur mobile c'est .sheet-ouverte qui pilote — on
     neutralise .hidden ici pour pouvoir ouvrir la sheet même avant le scan. */
  body.page-radar .pyramide {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 2000;              /* au-dessus de la nav (1000), sous les modals (3000) */
    max-height: 82dvh;
    margin: 0; padding: 0 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--charbon);
    border: 1px solid var(--ligne); border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(30, 24, 14, .25);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.32, .72, .25, 1);
    visibility: hidden;
  }
  body.page-radar .pyramide.sheet-ouverte { transform: translateY(0); visibility: visible; }
  body.page-radar .pyramide.hidden { display: flex; }
  /* la liste derrière ne défile pas pendant que la sheet est ouverte */
  body.page-radar.sheet-ouverte { overflow: hidden; }

  .sheet-fond {
    display: block;
    position: fixed; inset: 0; z-index: 1900;
    background: rgba(14, 36, 34, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .sheet-fond.visible { opacity: 1; pointer-events: auto; }

  .sheet-tete {
    display: block;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -16px; padding: 10px 16px 8px;
    background: var(--charbon);
    border-bottom: 1px solid var(--ligne);
    /* le doigt sur la tête PILOTE la sheet (glisser vers le bas = fermer) au
       lieu de faire défiler son contenu — sans ça, le drag était impossible */
    touch-action: none;
    cursor: grab;
  }
  .sheet-poignee {
    width: 44px; height: 5px; margin: 0 auto 10px;
    border-radius: var(--r-full); background: var(--ligne-forte);
  }
  .sheet-tete-ligne { display: flex; align-items: center; justify-content: space-between; }
  .sheet-titre {
    font-family: var(--display); font-weight: 800; font-size: 1.05rem;
    color: var(--texte);
  }
  .sheet-reset {
    border: none; background: none; padding: 6px 0;
    color: var(--signal); font-weight: 700; font-size: .85rem; cursor: pointer;
  }

  .sheet-voir {
    display: block;
    position: sticky; bottom: 0; z-index: 2;
    /* width:auto + marges négatives = pleine largeur SANS créer de débordement
       horizontal (le calc(100%+32px) d'avant faisait défiler la sheet de côté). */
    margin: 14px -16px 0; padding: 15px 16px;
    width: auto;
    border: none; cursor: pointer;
    background: var(--signal); color: #fff;
    font-family: var(--display); font-weight: 800; font-size: 1rem;
    box-shadow: 0 -6px 18px rgba(30, 24, 14, .12);
  }
  .sheet-voir:active { filter: brightness(1.08); }

  /* Le bouton reset du flux desktop ferait doublon avec celui de la tête */
  body.page-radar .pyramide #pyr-reset { display: none; }

  /* ── 2. BOTTOM NAV : pastille du nombre de filtres actifs ─────────────── */
  .nav-item { position: relative; }
  .nav-badge {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 3px; right: calc(50% - 22px);
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--corail, #FF7A5C); color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
  }
  .nav-badge.hidden { display: none; }

  /* Le bouton flottant « Revenir en haut » chevauchait les actions des
     cartes ; re-taper l'onglet Activités fait le même travail sur mobile. */
  .retour-haut { display: none !important; }

  /* ── 3. BARRE DE RECHERCHE CONDENSÉE (dans le header épinglé) ─────────── */
  body.condensee .barre-condensee {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px;
  }
  .condensee-ligne { display: flex; gap: 8px; align-items: center; }
  .pilule-recherche {
    flex: 1; min-width: 0;
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--ligne-forte); border-radius: var(--r-full);
    background: var(--charbon-2); color: var(--texte);
    font-weight: 600; font-size: .88rem; cursor: pointer;
  }
  .pilule-filtres {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ligne-forte); border-radius: var(--r-full);
    background: var(--charbon-2); color: var(--signal); cursor: pointer;
  }
  .puces-rapides {
    display: flex; gap: 8px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .puces-rapides::-webkit-scrollbar { display: none; }
  .puce-rapide {
    flex: none; padding: 7px 13px;
    border: 1px solid var(--ligne-forte); border-radius: var(--r-full);
    background: var(--charbon); color: var(--texte-2);
    font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .puce-rapide.actif {
    background: var(--halo-doux, rgba(78,205,196,.18));
    border-color: var(--signal); color: var(--signal);
  }

  /* ── 4. CARTES COMPACTES — liste dense, vignette à gauche ─────────────── */
  body.page-radar .event-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 10px; align-items: center;
    min-height: 0; padding: 10px 12px;
  }
  body.page-radar .event-card .card-illu {
    width: 60px; height: 60px; border-radius: 12px; overflow: hidden;
    /* static, PAS relative : les badges (position:absolute, enfants de la
       vignette) doivent se caler sur la CARTE — en relative ils se collaient
       en haut de la vignette 60px, illisibles (vu sur capture d'écran). */
    position: static; flex: none;
  }
  body.page-radar .event-card .card-illu img { width: 100%; height: 100%; object-fit: cover; }
  /* pastille catégorie illisible en 60px → masquée */
  body.page-radar .event-card .card-cat-pill { display: none; }
  /* badges (Gratuit, dates) : petites pilules en haut à droite de la carte */
  body.page-radar .event-card .card-illu-badges {
    position: absolute; top: 10px; right: 10px; left: auto; bottom: auto;
    display: flex; gap: 4px;
  }
  body.page-radar .event-card .badge-free,
  body.page-radar .event-card .badge-conf,
  body.page-radar .event-card .badge-dates { font-size: 9.5px; padding: 3px 7px; }
  body.page-radar .event-card .card-body { min-width: 0; padding: 0; }
  body.page-radar .event-card .card-title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .95rem; margin: 0 0 2px;
    padding-right: 56px;              /* place pour les badges en haut à droite */
  }
  body.page-radar .event-card .card-accroche { display: none; }
  body.page-radar .event-card .card-meta { margin: 0; font-size: .8rem; }
  /* le tap sur la carte ouvre la fiche → boutons superflus en mode liste */
  body.page-radar .event-card .card-footer,
  body.page-radar .event-card .card-actions,
  body.page-radar .event-card .outdoor-warn { display: none; }

  /* En-têtes de date épinglés sous le header (hauteur réelle → --tete-h,
     posée par app.js car elle varie quand la barre condensée apparaît). */
  body.page-radar .date-header {
    position: sticky; top: var(--tete-h, 64px); z-index: 300;
    background: var(--void); margin-top: 14px; padding: 6px 0;
  }

  /* ── 5. MÉTÉO COMPACTE : bandeau 1 ligne, tap = déplier ───────────────── */
  body.page-radar .meteo-widget {
    width: 100%; max-width: 620px;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 9px 14px; cursor: pointer;
  }
  body.page-radar .meteo-widget .meteo-entete {
    order: 2; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0;
  }
  body.page-radar .meteo-widget .meteo-principal { order: 1; flex: none; gap: 6px; margin: 0; }
  body.page-radar .meteo-widget .meteo-temp small { display: none; }
  body.page-radar .meteo-widget .meteo-heures { display: none; }
  body.page-radar .meteo-widget .weather-filter-btn {
    order: 3; flex: none;
    padding: 6px 10px; font-size: .78rem;
  }
  body.page-radar .meteo-widget.depliee { flex-wrap: wrap; }
  body.page-radar .meteo-widget.depliee .meteo-heures {
    display: flex; order: 4; width: 100%; margin-top: 6px;
  }

  /* ── 6. HERO RÉDUIT : le titre seul, la recherche visible sans défiler ── */
  body.page-radar .hero { padding: 18px 0 8px; gap: 12px; }
  body.page-radar .hero-sub { display: none; }
  body.page-radar .hero-titre { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 8px; }
  body.page-radar .hero-gauche .search-capsule { margin-top: 12px; }
}

/* ── 📱 Raffinements mobile v2 (alignés sur la maquette, 2026-07-21) ───────── */

/* Nouveaux marqueurs injectés par app.js — INVISIBLES sur ordi pour que le
   desktop ne change pas : catégorie dans la méta (la pastille sur l'image la
   porte déjà), compteur des en-têtes de date, libellé météo. */
.meta-cat, .date-nb, .meteo-cond { display: none; }

@media (max-width: 768px) {

  /* SHEET — les tuiles « Quoi » débordaient (3 colonnes fixes) : 2 colonnes
     rétrécissables. minmax(0,1fr) est ce qui autorise la coupe du contenu. */
  body.page-radar .pyramide .pyr-tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-radar .pyramide .pyr-tuile-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .sheet-reset { white-space: nowrap; flex: none; }
  .sheet-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* SHEET — ordre de la maquette : Quand d'abord (le réflexe n°1 en mobilité),
     puis Pour qui, Où, Quoi. Uniquement l'ordre VISUEL (flex order) : le DOM et
     le desktop ne bougent pas. Enfants : 1 fond… non — enfants de .pyramide :
     1 sheet-tete · 2 axe Pour-qui · 3 axe Quand · 4 axe Où · 5 axe Quoi ·
     6 pyr-reset · 7 sheet-voir. */
  body.page-radar .pyramide > .sheet-tete        { order: -3; }
  body.page-radar .pyramide > .pyr-axe:nth-child(3) { order: -1; }   /* Quand ↑ */

  /* CARTES — la maquette : catégorie · distance (la ville vit dans la fiche
     au tap) + chevron d'affordance à droite. */
  body.page-radar .event-card .meta-cat { display: inline; }
  body.page-radar .event-card .meta-city { display: none; }
  body.page-radar .event-card::after {
    content: '›';
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem; font-weight: 700; color: var(--texte-3);
    pointer-events: none;
  }
  body.page-radar .event-card .card-title { padding-right: 64px; }
  body.page-radar .event-card .card-meta { padding-right: 18px; }

  /* EN-TÊTES DE DATE — « AUJOURD'HUI · 6 » : le compte du groupe, comme la
     maquette. Le span est injecté par app.js, montré seulement ici. */
  body.page-radar .date-header .date-nb { display: inline; color: var(--texte-3); }

  /* MOINS DE BLOCS AVANT LA LISTE — la stats-bar verte fait doublon avec le
     compteur « Voir X activités » et les en-têtes comptés ; « Surprenez-moi »
     est déjà l'onglet Surprise de la barre du bas. Gros gain de hauteur. */
  body.page-radar #stats-bar { display: none !important; }
  body.page-radar #btn-surprise { display: none !important; }

  /* MÉTÉO — bandeau façon maquette : « 28° · Pluie en vue … [Intérieur ?] ».
     La condition remplace « ville · date » (déjà dans la pilule condensée). */
  body.page-radar .meteo-widget .meteo-entete { display: none; }
  body.page-radar .meteo-widget .meteo-cond {
    display: block; order: 2; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--texte-2); font-weight: 600;
  }
  /* pas de condition particulière (beau temps) → l'entête reprend sa place */
  body.page-radar .meteo-widget:not(.rain):not(.snow):not(.storm) .meteo-entete {
    display: block;
  }
}

/* ── 📱 Mobile v3 (retours d'Antoine sur captures, 2026-07-21) ─────────────── */
@media (max-width: 768px) {

  /* CARROUSEL PAR JOURNÉE (choix d'Antoine) — chaque groupe de date défile de
     droite à gauche, comme sur ordi, mais avec les cartes COMPACTES (hauteur
     du contenu, plus les carrées 86vw d'avant qui écrasaient tout). Le scroll
     reste INTERNE au conteneur (overflow-x:auto) : il n'élargit pas le
     document, donc la fiche détaillée fixe reste bien centrée. Le snap pose
     chaque carte proprement au bord après le glissement. */
  body.page-radar .cartes-grille {
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
  }
  body.page-radar .cartes-grille > .event-card {
    flex: 0 0 86vw;
    width: 86vw; max-width: 86vw;
    min-height: 0;                    /* hauteur du CONTENU, pas carrée */
    scroll-snap-align: start;
  }

  /* CARTES v3 — badges retirés (« Prix à confirmer », « Jusqu'au… » masquaient
     le titre) ; on garde catégorie · distance et on RÉAFFICHE l'accroche sur
     2 lignes — le reste vit dans la fiche au tap. */
  body.page-radar .event-card { align-items: start; }
  body.page-radar .event-card .card-illu-badges { display: none; }
  body.page-radar .event-card .card-title { padding-right: 22px; }
  body.page-radar .event-card .card-accroche {
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 1px 0 3px; padding-right: 18px;
    font-size: .8rem; line-height: 1.35; color: var(--texte-2);
  }

  /* MÉTÉO — le bouton « Intérieur seulement » écrasait le bandeau et sortait
     du cadre. Compact, borné, ellipsé : il ne peut plus déborder. */
  body.page-radar .meteo-widget { min-width: 0; }
  body.page-radar .meteo-widget .weather-filter-btn {
    max-width: 42%;
    padding: 5px 10px;
    font-size: .72rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Ceinture-bretelles contre tout futur débordement : rien ne doit élargir
     le document sur téléphone (sinon les overlays fixed se décalent). */
  html, body.page-radar { overflow-x: hidden; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ ASSISTANT IA (2026-07-21) — remplace « Surprenez-moi ».
   Un seul DOM : panneau dans le flux sur ordi, sheet plein écran sur mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bouton d'ouverture (façon ex-« Surprenez-moi »), mais plein signal. */
.btn-assistant {
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border: 1px solid 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, transform .2s, box-shadow .2s;
}
.btn-assistant:hover { background: var(--halo); transform: translateY(-1px); box-shadow: 0 0 18px var(--halo-doux); }
.btn-assistant:active { transform: scale(.98); }
.btn-assistant.hidden { display: none; }

/* L'assistant est FERMÉ par défaut. Ouvert (.sheet-ouverte) = OVERLAY :
   desktop → modal centré (gabarit « À propos ») ; mobile → bottom-sheet.
   .assistant = le voile ; .assistant-panneau = la carte. */
.assistant { display: none; }
.assistant.sheet-ouverte {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 3000;
  padding: 20px;
  background: rgba(6, 9, 15, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadeIn .2s ease;
}
.assistant-panneau {
  display: flex; flex-direction: column;
  width: 100%; max-width: 520px; max-height: 85dvh;
  background: var(--charbon);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-2xl);
  box-shadow: var(--ombre-2);
  overflow: hidden;                       /* clippe les bandes aux coins arrondis */
  animation: slideUp .26s cubic-bezier(.32,.72,.25,1);
}
.assistant-conv { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Tête (titre + fermer). La poignée ne sert qu'à la bottom-sheet mobile. */
.assistant-tete { padding: 16px 18px 10px; }
.assistant-tete .sheet-poignee { display: none; }
.assistant-fermer {
  border: none; background: none; cursor: pointer;
  font-size: 1.1rem; color: var(--texte-2); padding: 2px 6px; line-height: 1;
}
.assistant-fermer:hover { color: var(--danger, #E85C40); }

/* Padding latéral commun des bandes du panneau (la tête a le sien). */
.assistant-conv, .assistant-suggestions, .assistant-form { padding-left: 18px; padding-right: 18px; }
.assistant-form { padding-bottom: 16px; padding-top: 2px; }

/* Conversation — bulles. Cachée tant que vide (pas de cadre fantôme). */
.assistant-conv { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.assistant-conv:empty { display: none; }
.assistant-msg { max-width: 92%; padding: 10px 13px; border-radius: 14px;
                 font-size: .92rem; line-height: 1.55; }
.assistant-msg.moi {
  align-self: flex-end;
  background: var(--signal); color: #fff;
  border-bottom-right-radius: 4px;
}
.assistant-msg.ia {
  align-self: flex-start;
  background: var(--charbon-2); color: var(--texte);
  border-bottom-left-radius: 4px;
}
.assistant-msg.charge { color: var(--texte-3); font-style: italic; }
.assistant-msg.charge::after {
  content: '…'; display: inline-block;
  animation: assistantPoints 1.2s infinite;
}
@keyframes assistantPoints { 0% { opacity: .2 } 50% { opacity: 1 } 100% { opacity: .2 } }

/* Mini-cartes d'activités dans la conversation — RÉELLES, cliquables. */
.assistant-cartes { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.assistant-carte {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--charbon);
}
.assistant-carte-corps { flex: 1; min-width: 0; }
.assistant-carte-titre {
  font-weight: 700; font-size: .9rem; color: var(--texte);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assistant-carte-meta { font-size: .78rem; color: var(--texte-2); }
.assistant-carte-actions { display: flex; gap: 6px; flex: none; }
.assistant-carte-actions button, .assistant-carte-actions a {
  border: 1px solid var(--ligne-forte); border-radius: var(--r-full);
  background: var(--charbon-2); color: var(--signal);
  font-size: .74rem; font-weight: 700; padding: 5px 10px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}

/* Suggestions — pilules tapables, style des filtres existants. */
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.assistant-puce {
  border: 1px solid var(--ligne-forte); border-radius: var(--r-full);
  background: var(--charbon-2); color: var(--texte-2);
  font-size: .82rem; font-weight: 600; padding: 7px 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.assistant-puce:hover { border-color: var(--signal); color: var(--signal); }

/* Champ de saisie. */
.assistant-form { display: flex; gap: 8px; }
.assistant-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--ligne-forte); border-radius: var(--r-full);
  background: var(--charbon-2); color: var(--texte);
  font: inherit; font-size: .9rem; padding: 10px 16px;
}
.assistant-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.assistant-envoyer {
  flex: none; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-full);
  background: var(--signal); color: #fff; cursor: pointer;
}
.assistant-envoyer:disabled { opacity: .5; cursor: wait; }

/* ── 📱 Mobile : la même boîte devient un ÉCRAN (sheet plein) ─────────────── */
@media (max-width: 768px) {
  /* Mobile : le voile reste plein écran, mais le PANNEAU devient une
     bottom-sheet (glisse du bas) au lieu d'un modal centré. */
  body.page-radar .assistant.sheet-ouverte {
    align-items: stretch; justify-content: flex-end;
    flex-direction: column;
    padding: 0;
    z-index: 2000;                         /* nav (1000) < sheet ; modals à 3000 */
  }
  body.page-radar .assistant .assistant-panneau {
    max-width: 100%; width: 100%;
    height: 88dvh; max-height: 88dvh;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  /* La poignée réapparaît ; la tête pilote le glisser-pour-fermer. */
  body.page-radar .assistant-tete { touch-action: none; cursor: grab; }
  body.page-radar .assistant-tete .sheet-poignee {
    display: block; width: 44px; height: 5px; margin: 0 auto 8px;
    border-radius: var(--r-full); background: var(--ligne-forte);
  }
  body.page-radar .assistant .assistant-suggestions { flex: none; }
  body.page-radar .assistant .assistant-form { flex: none; }
  /* Sur mobile, l'assistant s'ouvre par l'onglet ✨ de la nav → le bouton
     desktop ferait doublon. */
  .btn-assistant { display: none; }
}