/* ============================================================================
   DESIGN SYSTEM BEBOUN — tokens stricts
   ============================================================================
   Toute nouvelle modif DOIT utiliser ces tokens. Si une valeur n'existe pas
   dans le système, c'est qu'elle ne devrait pas être utilisée. */
:root {
  /* === GRAYSCALE === */
  --bb-gray-0:   #ffffff;
  --bb-gray-50:  #FAFAF8;
  --bb-gray-100: #F0EFEB;
  --bb-gray-150: #F5F4F0;
  --bb-gray-200: #EEEEEE;
  --bb-gray-300: #DDDDDD;
  --bb-gray-400: #BBBBBB;
  --bb-gray-500: #888888;
  --bb-gray-600: #666666;
  --bb-gray-700: #444444;
  --bb-gray-800: #222222;
  --bb-gray-900: #111111;
  --bb-warm-50:  #FEF7E8;
  --bb-warm-100: #F0E5C8;
  --bb-warm-orange: #F59E0B;

  /* === BORDER RADIUS === */
  --bb-radius-sm:   6px;    /* badges, small chips */
  --bb-radius-md:   8px;    /* inputs, buttons, cards petits */
  --bb-radius-lg:   10px;   /* search bar, popups */
  --bb-radius-xl:   12px;   /* modals, toast, onboarding */
  --bb-radius-2xl:  16px;   /* sheet, drawer */
  --bb-radius-full: 999px;  /* pills, FABs round */

  /* === BOX SHADOW === */
  --bb-shadow-sm:  0 1px 3px rgba(0,0,0,.06);     /* subtle separation */
  --bb-shadow-md:  0 2px 12px rgba(0,0,0,.08);    /* legend, popups subtle */
  --bb-shadow-lg:  0 2px 12px rgba(0,0,0,.12);    /* FABs, cards */
  --bb-shadow-xl:  0 4px 16px rgba(0,0,0,.16);    /* hover state FAB, popup */
  --bb-shadow-2xl: 0 8px 24px rgba(0,0,0,.20);    /* toast, mobile menu */
  --bb-shadow-sheet: 0 -2px 16px rgba(0,0,0,.08); /* bottom sheet (inversée) */

  /* === FONT SIZE === */
  --bb-text-2xs:  10px;  /* tiny tags, badges hyper compact */
  --bb-text-xs:   11px;  /* meta, captions, small labels */
  --bb-text-sm:   12px;  /* meta normal, chips, footer */
  --bb-text-base: 13px;  /* body text default */
  --bb-text-md:   14px;  /* body emphasized, item names */
  --bb-text-lg:   15px;  /* headings small */
  --bb-text-xl:   18px;  /* nav flag */

  /* === SPACING (4/8 base scale) === */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 20px;
  --bb-space-6: 24px;
  --bb-space-7: 32px;

  /* === TRANSITION === */
  --bb-ease-fast:   .08s ease;
  --bb-ease-base:   .12s ease;
  --bb-ease-smooth: .35s cubic-bezier(.32, .72, 0, 1);
  --bb-ease-bounce: .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================================================
   ACCESSIBILITÉ — focus ring clavier
   ============================================================================
   :focus-visible se déclenche UNIQUEMENT au focus clavier (Tab), pas au click
   souris. Donne un ring 2px noir bien visible pour la navigation clavier
   sans polluer l'UI au mouse-clic. */
.ex-fchip:focus-visible,
.trail-item:focus-visible,
.place-item:focus-visible,
.create-trail-item:focus-visible,
.gps-btn:focus-visible,
.map-card-btn:focus-visible,
.ex-search-input:focus-visible,
.pp-btn:focus-visible,
.atb-close:focus-visible,
.atb-share:focus-visible,
.place-panel-close:focus-visible,
.nav-place-trigger:focus-visible,
.nav-user-trigger:focus-visible,
.nav-place-link:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.ex-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; position: relative; }
.ex-side {
  width: 360px; flex-shrink: 0;
  /* Pas de scroll sur .ex-side : c'est .sheet-content qui scrolle. Comme ça
     le banner parcours actif (entre handle et sheet-content) reste toujours
     visible en haut, même quand l'user scrolle la liste. Comportement
     cohérent mobile/desktop. */
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  background: #fff;
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}
/* Sheet-content : scrollable en desktop ET mobile (le @media mobile redéfinit
   ces propriétés avec touch-action et overscroll spécifiques).
   position: relative important : permet à offsetTop des enfants d'être
   relatif à .sheet-content (pour les scrollTo précis). Sans ça, offsetTop
   inclurait la hauteur du handle + banner (~60px) → scroll décalé. */
.sheet-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  position: relative;
  /* Empêche le browser de pull-to-refresh quand l'user scroll en haut du sheet.
     Sans ça, sur iOS PWA et Chrome Android, on déclenche le refresh accidentel. */
  overscroll-behavior: contain;
  /* Scroll smooth pour les ancres et focus */
  scroll-behavior: smooth;
  /* iOS momentum scrolling */
  -webkit-overflow-scrolling: touch;
}
/* Scrollbar minimaliste (webkit only, mais on garde le fallback default sur Firefox) */
.sheet-content::-webkit-scrollbar {
  width: 4px;
}
.sheet-content::-webkit-scrollbar-track {
  background: transparent;
}
.sheet-content::-webkit-scrollbar-thumb {
  background: var(--bb-gray-300);
  border-radius: 2px;
}
.sheet-content::-webkit-scrollbar-thumb:hover {
  background: var(--bb-gray-400);
}
.ex-map-col { flex: 1; position: relative; overflow: hidden; }
#ex-map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Sidebar collapsible : disparaît, la map prend tout l'espace */
.ex-app.sidebar-collapsed .ex-side {
  width: 0;
  border-right: none;
  overflow: hidden;
}

/* Bouton chevron à la jonction sidebar/map. Reste visible quand sidebar collapsed. */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  left: 360px;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 26px; height: 56px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0 8px 8px 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: left .3s cubic-bezier(.4, 0, .2, 1), background .15s ease, box-shadow .15s ease;
  box-shadow: 2px 0 6px rgba(0,0,0,.06);
  color: #555;
}
.sidebar-toggle:hover {
  background: #f8f8f8;
  color: #111;
  box-shadow: 2px 0 8px rgba(0,0,0,.1);
}
.ex-app.sidebar-collapsed .sidebar-toggle {
  left: 0;
  transform: translate(0, -50%);
}
.sidebar-toggle svg {
  width: 14px; height: 14px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.ex-app.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* ── Mini-onboarding ─────────────────────────────────────── */
.onboarding-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 5000;
  animation: onbFadeIn .25s ease;
  pointer-events: none; /* laisse passer les clics, mais visuellement assombrit */
}
@keyframes onbFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Halo autour de l'élément cible (positionné par JS via inset/top/left/width/height) */
.onboarding-spotlight {
  position: fixed;
  z-index: 5001;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 9999px rgba(0,0,0,.35);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.onboarding-bubble {
  position: fixed;
  z-index: 5002;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  animation: onbBubble .35s cubic-bezier(.34, 1.56, .64, 1);
  transition: top .35s cubic-bezier(.4, 0, .2, 1), left .35s cubic-bezier(.4, 0, .2, 1);
}
@keyframes onbBubble {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
.onboarding-bubble h4 {
  margin: 0 0 6px 0;
  font-size: 15px; font-weight: 700;
  color: #111;
}
.onboarding-bubble p {
  margin: 0 0 16px 0;
  font-size: 13px; color: #555; line-height: 1.5;
}
.onboarding-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.onboarding-progress {
  display: flex; gap: 6px;
}
.onboarding-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #EEE;
  transition: background .2s, transform .2s;
}
.onboarding-dot.active {
  background: #111;
  transform: scale(1.15);
}
.onboarding-buttons { display: flex; gap: 8px; align-items: center; }
.onboarding-skip {
  background: none; border: none;
  color: #888; font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 6px 8px;
  font-family: inherit;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
.onboarding-skip:hover { color: #111; background: #FAFAF8; }
.onboarding-next {
  background: #111; color: #fff;
  border: none;
  padding: 7px 16px; border-radius: 6px;
  cursor: pointer; font-weight: 600; font-size: 13px;
  font-family: inherit;
  transition: background .15s;
}
.onboarding-next:hover { background: #333; }

/* Flèche pointeur vers l'élément cible */
.onboarding-bubble::before {
  content: '';
  position: absolute;
  width: 0; height: 0;
}
.onboarding-bubble.point-left::before {
  left: -8px; top: 24px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fff;
}
.onboarding-bubble.point-right::before {
  right: -8px; top: 24px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #fff;
}
.onboarding-bubble.point-top::before {
  top: -8px; left: 24px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
.onboarding-bubble.point-bottom::before {
  bottom: -8px; left: 24px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

/* Place pill au tap d'un pin : pill horizontale ancrée en haut de la map
   (sous la map-toolbar), pas attachée au pin. Compatible avec le pass
   minimaliste : sobre, blanche, ombre subtile, pas d'animation excessive. */
.blob-popup {
  position: absolute;
  /* Pill flottante en bas-centre de la map, au-dessus du bottom-nav et
     du bottom-sheet en mode peek. La tp-banner (prochain lieu) reste
     en haut (top: 56px) — pas d'overlap entre les deux pills. */
  top: auto;
  bottom: calc(var(--bottom-nav-h, 0px) + var(--bb-space-4));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 720;
  width: auto;
  max-width: calc(100% - var(--bb-space-6));
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.blob-popup.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* En mode sheet-peek le sheet fait 110px → la pill au-dessus est OK.
   En mode sheet-half/full le sheet cache la pill : c'est intentionnel
   (l'user a expansé le panel pour voir le détail complet). */
@media (max-width: 800px) {
  .blob-popup {
    bottom: calc(var(--bottom-nav-h, 0px) + 130px);
    width: calc(100% - var(--bb-space-4));
  }
}

.blob-popup-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  border: 1px solid #EFEEEC;
  padding: 0;
  display: block;
  position: relative;
  width: 240px;
  max-width: 100%;
  overflow: hidden;
}

/* Photo en bandeau haut de la carte (révélée — avant cachée). Le rond photo
   généré par le JS remplit le bandeau ; le fallback blob s'affiche si pas de
   photo Google. */
#blob-popup-photo-wrap { display: block; }
.blob-popup-photo {
  position: relative;
  width: 100%;
  height: 104px;
  background: var(--bb-gray-100, #F0EFEB);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px 16px 0 0;
}
/* Le SVG fallback blob occupe ~50% centré quand pas de photo */
.blob-popup-photo-fallback {
  width: 56px;
  height: 52px;
}
/* Image photo Google insérée par le JS (par-dessus le fallback) */
.blob-popup-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 16px 16px 0 0;
}
/* Quand une vraie photo est posée, on masque le blob fallback */
.blob-popup-photo.has-photo .blob-popup-photo-fallback { display: none; }
/* Badge mini-blob catégorie en bas-gauche du bandeau photo */
.blob-popup-photo-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blob-popup-photo-badge svg { width: 70%; height: 70%; }

.blob-popup-mascot { display: none; }

.blob-popup-body {
  padding: 10px 14px 12px;
  min-width: 0;
}
.blob-popup-name {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bb-gray-900);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blob-popup-cat {
  font-size: 11.5px;
  color: var(--bb-gray-500);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Description : on la révèle, 2 lignes max */
.blob-popup-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--bb-gray-600, #666);
  line-height: 1.4;
  margin-bottom: 9px;
}
.blob-popup-desc--error { color: var(--bb-gray-400, #aaa); font-style: italic; }

.blob-popup-actions {
  display: flex;
  gap: 6px;
}
.blob-popup-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--bb-text-xs); font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all var(--bb-ease-base);
  border: none;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.blob-popup-btn-primary {
  background: var(--bb-gray-900); color: #fff;
}
.blob-popup-btn-primary:hover { background: #000; }
.blob-popup-btn-primary.added { background: #16A34A; }
.blob-popup-btn-secondary {
  background: #F0EFEB; color: var(--bb-gray-900);
  border: none;
}
.blob-popup-btn-secondary:hover { background: #E5E3DD; }

.blob-popup-close {
  position: absolute;
  top: var(--bb-space-2); right: var(--bb-space-2);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  color: var(--bb-gray-600);
  font-size: var(--bb-text-xs);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all var(--bb-ease-base);
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.blob-popup-close:hover { background: var(--bb-gray-900); color: #fff; }

/* Marker "selected" : agrandi (1.5x), z-index élevé, drop-shadow pour le
   détacher visuellement. ATTENTION : on scale le .drop-marker-inner (wrapper
   interne) et PAS le .drop-marker root, parce que Leaflet pose un transform:
   translate3d(x,y,0) sur le root pour le positionner — si on override avec
   scale(1.5), on perd le translate et le marker se téléporte en (0,0).

   Le z-index reste sur le root pour qu'il passe au-dessus des autres markers. */
.drop-marker.is-selected {
  z-index: 1000 !important;
}
.drop-marker.is-selected .drop-marker-inner {
  /* Sélection : scale 1.6 effectif = 0.5 (repos) * 1.6 = 0.8. Le SVG est
     rendu intrinsèquement à 52x64 ; au scale 0.8 on est à 41.6x51.2 visuel
     (toujours sous la taille native) → pas d'upscale du bitmap → net. */
  transform: scale(0.8);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  transform-origin: center bottom;
}
.drop-marker-inner {
  transition: transform .25s cubic-bezier(.32, .72, 0, 1),
              filter .25s ease;
  transform-origin: center bottom;
  display: block;
  /* SVG rendu 2x intrinsèquement (52x64 dans pinSvgMarker), on scale down
     à 0.5 au repos pour le visuel original (26x32). Le scale up animations
     se contentent de moins downscaler le bitmap déjà rendu à pleine taille
     → marker net pendant toute l'animation, pas de re-rasterisation. */
  transform: scale(0.5);
}
/* Autres markers : dimmed pour focus visuel sur le sélectionné. Même valeurs
   que .pin-dimmed (opacity .55 + grayscale .5) qui est le pattern visuel
   utilisé en mode personaliser pour les lieux non-sélectionnés. Cohérence.
   !important nécessaire pour battre les styles inline opacity:1 / filter:none
   que refreshMarkers pose sur les markers visibles en mode trails. */
.drop-marker.is-dimmed {
  opacity: .55 !important;
  filter: grayscale(.5) !important;
  transition: opacity .25s ease, filter .25s ease;
}

/* La pill est maintenant en haut de la map sur toutes les tailles d'écran.
   Plus besoin de override mobile spécifique (était nécessaire quand la popup
   était attachée au pin avec une flèche). */

/* Étiquette "Liaison" au milieu d'un trait inter-parcours */

/* Bouton flottant "Intégrer au parcours" */
.integrate-btn {
  position: absolute;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 650;
  display: none;
  background: var(--color-text);
  color: #fff;
  border: none;
  border-radius: var(--bb-radius-full);
  padding: 11px var(--bb-space-5);
  font-family: inherit;
  font-size: var(--bb-text-base); font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: all .15s;
  white-space: nowrap;
  animation: integrateAppear .25s ease-out;
}
.integrate-btn:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.integrate-btn.visible { display: inline-flex; align-items: center; gap: 6px; }
.integrate-btn.active {
  background: #16A34A;
}
.integrate-btn.active:hover { background: #15803D; }
@keyframes integrateAppear {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Tracé en cours de calcul OSRM : pointillés gris qui défilent.
   Quand le tracé final OSRM arrive, il remplace ce placeholder. */
.route-loading {
  animation: route-march 1.2s linear infinite;
}
@keyframes route-march {
  to { stroke-dashoffset: -28; } /* multiple de (dash + gap) = (6 + 8) × 2 */
}

/* Animation du pin dans le blob popup : entrée + balancement doux */
.blob-popup-pin-anim {
  animation: blobPinIn .45s cubic-bezier(.34, 1.56, .64, 1) both,
             blobPinSway 3s ease-in-out 1.2s infinite;
  display: inline-block;
  transform-origin: center bottom;
}
@keyframes blobPinIn {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes blobPinSway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* Bandeau d'info au survol d'un pin : positionné en haut de la map, ne prend pas la place du pin */
.map-info-bar {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: #fff;
  border: 1px solid #EFEEEC;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  padding: 8px 18px;
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Inter', system-ui, sans-serif;
  text-align: center;
}
.map-info-bar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.map-info-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.map-info-meta {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
  line-height: 1.2;
}

/* Highlight de la card du lieu dans la sidebar quand on hover son pin sur la map */
.lieu-item.map-hover,
.place-item.map-hover {
  background: #FFF8E7;
  border-color: #E5C870;
  transition: background .15s ease, border-color .15s ease;
}

/* Mini-tooltip au clic sur un pin (mode lieux) */
.pin-tooltip {
  position: absolute;
  z-index: 700;
  background: var(--color-text);
  color: #fff;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-36px);
  transition: opacity .15s ease, transform .2s cubic-bezier(.4,0,.2,1);
  max-width: 200px;
}
.pin-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-42px);
}
.pin-tooltip-name { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.pin-tooltip-meta { font-size: 11px; opacity: .8; }
.pin-tooltip-action {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #4ADE80;
}
.pin-tooltip-action.removed { color: #FCA5A5; }
/* petite flèche pointant vers le pin */
.pin-tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--color-text);
}

/* Flash de la card sidebar quand on clique sur la carte */
.lieu-item.flash {
  animation: cardFlash 0.6s ease;
}
@keyframes cardFlash {
  0%   { background: var(--color-text); color: #fff; }
  100% { background: transparent; color: inherit; }
}

/* Panel détail lieu (slide-over) */
.place-panel {
  position: fixed;
  top: 0; right: -440px;
  width: 420px; height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,.10);
  z-index: 800;
  transition: right .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  border-left: 1px solid #EEE;
}
.place-panel.open { right: 0; }
.place-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 750;
}
.place-panel-overlay.open { opacity: 1; pointer-events: auto; }
.place-panel-close {
  position: absolute; top: 14px; right: 14px;
  z-index: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #FAFAF8;
  border: 1px solid #EEE;
  color: #444;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.place-panel-close:hover { background: #111; color: #fff; border-color: #111; }
.place-panel-content { padding: 0; }
.place-panel-loading {
  /* Skeleton loader : reproduit la structure du contenu final pour éviter
     le flash brutal "spinner blanc → contenu". L'user voit la forme dès le
     1er paint et le contenu s'y substitue progressivement. */
  padding: 0;
  display: flex;
  flex-direction: column;
}
.place-panel-loading::before { display: none; }  /* cache l'ancien spinner */
.place-panel-loading .pp-skeleton-photo,
.place-panel-loading .pp-skeleton-line {
  background: linear-gradient(90deg,
    var(--bb-gray-100) 25%,
    var(--bb-gray-50) 50%,
    var(--bb-gray-100) 75%);
  background-size: 200% 100%;
  animation: pp-shimmer 1.4s linear infinite;
  border-radius: var(--bb-radius-sm);
}
.place-panel-loading .pp-skeleton-photo {
  width: 100%;
  height: 220px;
  border-radius: 0;
}
.place-panel-loading .pp-skeleton-body {
  padding: 24px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
}
.place-panel-loading .pp-skeleton-line {
  height: 14px;
}
.place-panel-loading .pp-skeleton-line.w-30 { width: 30%; }
.place-panel-loading .pp-skeleton-line.w-70 { width: 70%; }
.place-panel-loading .pp-skeleton-line.w-90 { width: 90%; }
.place-panel-loading .pp-skeleton-line.h-32 { height: 32px; margin-bottom: var(--bb-space-2); }
@keyframes pp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pp-photo {
  width: 100%; height: 220px;
  object-fit: cover;
  background: linear-gradient(135deg, #FAFAF8 0%, #F0EFEB 100%);
  display: block;
}
.pp-photo-placeholder {
  width: 100%; height: 160px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FAFAF8 0%, #F0EFEB 100%);
}

.pp-body { padding: 24px 26px 32px; }
.pp-cat-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
  color: #fff;
  margin-bottom: 14px;
}
.pp-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 16px;
}
.pp-address {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: #888;
  margin-bottom: 20px;
  line-height: 1.4;
}
.pp-address svg { flex-shrink: 0; margin-top: 2px; }
.pp-description {
  font-size: 13.5px; line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 24px;
}
.pp-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EEE;
}
.pp-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}
.pp-trail-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: #FAFAF8;
  border: 1px solid #EEE;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: 6px;
  transition: background .12s, border-color .12s;
}
.pp-trail-link:hover { background: #F5F4F0; border-color: #DDD; }
.pp-trail-link-meta { color: #999; font-size: 11px; flex-shrink: 0; }
.pp-actions {
  display: flex; gap: 8px; margin-top: 24px;
}
.pp-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2;
}
.pp-btn-primary {
  background: #111; color: #fff; border: 1px solid #111;
}
.pp-btn-primary:hover { background: #333; border-color: #333; }
.pp-btn-secondary {
  background: #fff; color: #111;
  border: 1px solid #EEE;
}
.pp-btn-secondary:hover { border-color: #111; }

/* Mobile : bottom sheet */
@media (max-width: 700px) {
  .place-panel {
    top: auto; bottom: -100vh; right: 0;
    width: 100%; height: 75vh;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-top: 1px solid #EEE;
    transition: bottom .35s cubic-bezier(.32, .72, 0, 1);
  }
  .place-panel.open { bottom: 0; right: 0; }
  /* Drag handle visuel sticky en haut du panel pour signaler le swipe-down close */
  .place-panel::before {
    content: '';
    position: sticky;
    top: 8px;
    left: 50%;
    display: block;
    width: 48px;
    height: 5px;
    margin: 8px auto -3px;
    background: #D8D5CE;
    border-radius: 3px;
    z-index: 2;
  }
}

/* Toggle Parcours/Personnaliser : segmented control style iOS moderne.
   Container avec fond gris neutre + bouton actif blanc avec ombre légère.
   Pas de couleur primary — on laisse les blobs (markers de lieux) porter
   l'identité couleur. L'UI reste sobre noir/blanc/gris. */
.mode-toggle {
  display: flex;
  gap: 0;
  background: #EFEFEF;
  border-radius: 10px;
  padding: 3px;
  margin: 8px 16px 10px;
  flex-shrink: 0;
}
.mode-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: background .18s ease, color .12s ease, box-shadow .18s ease;
}
.mode-btn:hover { color: #555; }
.mode-btn.on {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);
}

/* Point de départ */

.ex-side.mode-places .start-bar { display: none; }
.start-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  color: #888;
  transition: border-color .15s;
  position: relative;
}
.start-bar:focus-within { border-color: var(--color-text); }
.start-input {
  flex: 1; border: none; background: none; outline: none;
  font-family: inherit; font-size: 12px; color: var(--color-text);
}
.start-input::placeholder { color: #BBB; }
.start-clear {
  background: none; border: none; cursor: pointer;
  color: #BBB; font-size: 12px;
  display: none; padding: 0 2px;
}
.start-bar.has-value .start-clear { display: block; }
.start-clear:hover { color: var(--color-error); }

/* Suggestions Nominatim */
.ac-suggestions {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: -1px; right: -1px;
  background: #fff;
  border: 1.5px solid var(--color-text);
  border-top: 1px solid #E8E8E8;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
}
.start-bar:focus-within .ac-suggestions { border-color: var(--color-text); }
.ac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #F5F5F5;
  transition: background .12s;
}
.ac-name { font-size: 13px; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.ac-sub  { font-size: 11px; color: #888; margin-top: 2px; }
.ac-item:hover { background: #FAF9F7; }
.ac-item:last-child { border-bottom: none; }
.ac-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #999;
  text-align: center;
  font-style: italic;
}   /* autocomplete au-dessus de la map */

/* Search */
.search-bar { padding: 0 16px 10px; flex-shrink: 0; }
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-input {
  width: 100%; border: 1px solid #E8E8E8; border-radius: 8px;
  padding: 6px 28px 6px 30px; font-size: 12px; outline: none; background: #fff;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--color-text); }
.search-input::placeholder { color: #BBB; }

/* Filtres mode lieux */
.filter-section {
  padding: 10px 16px; border-bottom: 1px solid var(--color-border); flex-shrink: 0;
  display: none;
}
.ex-side.mode-places .filter-section { display: flex; flex-direction: column; gap: 6px; }

/* Header pédagogique du mode Personnaliser */
.places-intro {
  display: none;
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.ex-side.mode-places .places-intro { display: block; }
.places-intro-title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}
.places-intro-text {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.filter-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: #BBB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.filter-status {
  font-size: 10px;
  font-weight: 500;
  color: #999;
  text-transform: none;
  letter-spacing: 0;
}
.filter-status.active {
  color: #555;
  font-weight: 600;
}
.cat-row { display: flex; gap: 5px; flex-wrap: wrap; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  border: 1.5px solid #E8E8E8;
  background: #fff; color: #888;
  cursor: pointer; transition: all .15s;
}
.cat-btn.on { color: #fff; border-color: transparent; }
.cat-btn.on .cat-dot { background: #fff !important; }
.cat-btn.on.cafe       { background: #D97706; }
.cat-btn.on.park       { background: #16A34A; }
.cat-btn.on.museum     { background: #2563EB; }
.cat-btn.on.shop       { background: #7C3AED; }
.cat-btn.on.restaurant { background: #E11D48; }
.cat-btn.on.leisure    { background: #7C3AED; }
.cat-btn.on.sport      { background: #0891B2; }

/* Listes */
.list-section {
  flex: 1;
  overflow-y: auto;
}
.ex-side .list-trails,
.ex-side .list-places { display: none; }
.ex-side.mode-trails .list-trails { display: block; }
.ex-side.mode-places .list-places { display: block; }

/* Quartiers/Thématiques tabs only apply to trails, hide them in places mode */
.ex-side.mode-places .trail-tabs { display: none; }

/* ── Section pinned "Mes parcours sauvegardés" ─────────────────────────────
   Affichée en TOP de la liste des parcours (avant les neighborhoods) pour un
   accès rapide aux ExplorerView de l'user authentifié. Pattern Spotify "Liked
   Songs" / Notion "Favoris". Mode places la cache (la section appartient au
   mode trails).
   Header sticky comme les neighborhoods. Accordion-like (collapsible) avec
   persistance localStorage. */
.my-trails-section {
  display: none;  /* default off, on en mode trails uniquement */
  border-bottom: 1px solid #EEE;
  background: #F8F8F8;
}
.ex-side.mode-trails .my-trails-section { display: block; }
.my-trails-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 8px;
  user-select: none;
  background: #F8F8F8;
  position: sticky;
  top: 0;
  z-index: 6;
  transition: background .12s ease;
}
.my-trails-icon { display: none; }
.my-trails-label {
  flex: 1;
  font-weight: 600;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: #555;
}
.my-trails-count {
  background: transparent;
  color: #888;
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  text-align: right;
}
.my-trails-count::before { content: '· '; }
.my-trails-chevron { display: none; }
.my-trails-list {
  overflow: visible;
}
.my-trail-row {
  display: block;
  padding: 12px 20px;
  border-bottom: 1px solid #F0F0F0;
  text-decoration: none;
  color: inherit;
}
.my-trail-row:last-child { border-bottom: none; }
.my-trail-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  margin-bottom: 2px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
/* Petit tag inline qui distingue les types : "parcours" (Trail créé) vs
   "vue" (ExplorerView sauvegardée). Pastille discrète à droite du nom. */
.my-trail-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 8px;
  background: #111;
  color: #fff;
  vertical-align: middle;
}
.my-trail-tag--view {
  background: #888;  /* nuance plus claire pour "vue" (Spotify-like) */
}
.my-trail-meta {
  font-size: 11px;
  color: #777;
  font-variant-numeric: tabular-nums;
}
/* Liste inline des étapes, même style que .trail-stops dans .trail-row. */
.my-trail-stops {
  font-size: 11px;
  color: #777;
  line-height: 1.5;
  margin-top: 6px;
}
/* Cursor pointer + hover sur la row (maintenant <div> avec onclick au lieu de <a>) */
.my-trail-row { cursor: pointer; }
.my-trail-row:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
/* Wrapper qui place la trail-row (lien) à côté du bouton de partage.
   Le bouton est sorti du <a> pour éviter le nested link / hijack du click.
   Hover posé sur le wrap (pas sur le <a>) pour que le fond couvre TOUTE
   la row, y compris la zone des boutons share/delete à droite. */
.my-trail-row-wrap {
  display: flex;
  align-items: stretch;
  transition: background .12s;
  border-bottom: 1px solid #F0F0F0;
}
.my-trail-row-wrap:last-child { border-bottom: none; }
.my-trail-row-wrap:hover { background: #F5F5F5; }
.my-trail-row-wrap .my-trail-row {
  flex: 1;
  min-width: 0;
  border-bottom: none;  /* la border est sur le wrap maintenant */
}

/* Lien "Fiche →" dans la section "Mes parcours sauvegardés" : même usage et
   look que .trail-card-detail-link mais ici aligné à droite, avant les boutons
   œil/poubelle. Discret, signal clair. */
.my-trail-detail-link {
  flex-shrink: 0;
  align-self: center;
  font-size: 11px;
  font-weight: 500;
  color: #555;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 8px 10px;
  transition: color .12s;
  white-space: nowrap;
}
.my-trail-detail-link:hover { color: #111; }

/* ── .share-toggle : bouton unifié public/privé ────────────────────────────
   Pattern unique utilisé dans la section "Mes parcours sauvegardés" (sur
   chaque row) ET dans la cta-bar de la page Trail detail. Compact, sobre,
   cohérent avec le design minimaliste. État privé = fond blanc + icon gris ;
   état public = fond noir + icon blanc. Feedback "copié" = checkmark vert. */
.share-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.share-toggle:hover {
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  color: #111;
  border-color: #CCC;
}
.share-toggle[data-public="1"] {
  background: #111;
  color: #fff;
  border-color: #111;
}
.share-toggle[data-public="1"]:hover {
  background: #333;
  border-color: #333;
}
.share-toggle--copied {
  background: #16A34A !important;
  border-color: #16A34A !important;
  color: #fff !important;
  transform: scale(1.08);
}
.share-toggle svg { display: block; }
/* Alias rétrocompat : .my-trail-share-btn → mêmes styles (pour éviter de
   renommer le HTML partout, ça reste cohérent visuellement). */
.my-trail-share-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  align-self: center;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.my-trail-share-btn:hover {
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  color: #111;
  border-color: #CCC;
}
.my-trail-share-btn[data-public="1"] {
  background: #111;
  color: #fff;
  border-color: #111;
}
.my-trail-share-btn[data-public="1"]:hover {
  background: #333;
  border-color: #333;
}
.my-trail-share-btn--copied {
  background: #16A34A !important;
  border-color: #16A34A !important;
  color: #fff !important;
  transform: scale(1.08);
}
.my-trail-share-btn svg { display: block; }

/* Bouton de suppression dans chaque row (icon poubelle). Style cohérent
   avec .my-trail-share-btn mais hover plus discret pour pas attirer le
   click. L'action étant destructive, on demande confirmation au JS. */
.my-trail-delete-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  margin-left: -4px;
  align-self: center;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 6px;
  cursor: pointer;
  color: #999;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.my-trail-delete-btn:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FCA5A5;
}
.my-trail-delete-btn svg { display: block; }
/* Tag "public" et "privé" : signal visuel du statut de visibilité dans
   chaque row de "Mes parcours sauvegardés". Vert = public (signal positif
   "ouvert"), gris foncé = privé (neutre, juste informatif). */
.my-trail-tag--public {
  background: #16A34A !important;
  color: #fff !important;
}
.my-trail-tag--private {
  background: #444 !important;
  color: #fff !important;
}


/* ── Sections par quartier (mode trails) ──────────────────────── */
.neighborhood-section {
  border-bottom: 1px solid #EEE;
}
.neighborhood-section:last-child {
  border-bottom: none;
}
.neighborhood-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 8px;
  cursor: pointer;
  user-select: none;
  background: #fff;
  transition: background .12s ease;
  position: sticky;
  top: 0;
  z-index: 5;
}
.neighborhood-header:hover {
  background: #FAF9F7;
}
.neighborhood-color-dot {
  display: none;
}
.neighborhood-name {
  flex: 1;
  font-weight: 600;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: #555;
}
.neighborhood-count {
  background: transparent;
  color: #888;
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  text-align: right;
}
.neighborhood-count::before { content: '· '; }
/* Chevron retiré : les sections sont toujours ouvertes (plus de toggle).
   Les anciennes règles .neighborhood-chevron et .collapsed sont gardées
   au cas où des éléments seraient encore générés avec, mais leur impact
   est nul puisque le HTML ne les contient plus. */
.neighborhood-chevron { display: none; }
.neighborhood-trails {
  /* Toujours ouvert maintenant — plus de max-height transition. */
  overflow: visible;
}
/* Les trail-row à l'intérieur d'une section quartier sont indentés
   visuellement par la bordure du header, pas besoin d'autre marge */

/* Cards parcours (mode trails) — interactives, cliquables pour activer sur
   la map. Le hover doit signaler clairement "clique-moi" : background visible,
   pas juste un poil plus foncé. */
.trail-row {
  position: relative;
  border-bottom: 1px solid #F0F0F0;
  border-left: 6px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-left-color .15s ease;
}
.trail-row:hover {
  background: #F5F5F5;
  border-left-color: #DDD;
}
.trail-row.active {
  /* État actif : barre noir épaisse + background tinté pour signal fort */
  border-left-color: #111 !important;
  background: rgba(0, 0, 0, .035);
}
.trail-row.active:hover { background: rgba(0, 0, 0, .05); }
/* Card brouillon masqué : pas de background ni barre, juste le titre BROUILLON · MASQUÉ */
.trail-row.draft-hidden .trail-num {
  background: #888 !important;
}
.trail-inner { padding: 14px 20px; }
.trail-num {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  color: #fff; letter-spacing: .08em;
  background: #111;
  padding: 3px 8px; border-radius: 4px;
  margin-bottom: 8px;
}
.trail-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }
/* Titre brouillon éditable : indication subtile au hover, focus net */
.draft-title-editable {
  cursor: text;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px 2px -6px;
  transition: background .15s ease, box-shadow .15s ease;
  outline: none;
}
.draft-title-editable:hover {
  background: rgba(0,0,0,.05);
}
.draft-title-editable:hover::after {
  content: ' ✎';
  opacity: .35;
  font-size: 11px;
  font-weight: 400;
}
.draft-title-editable:focus {
  background: #fff;
  box-shadow: 0 0 0 2px #111;
}
.draft-title-editable:focus::after { content: none; }
.trail-tags { font-size: 11px; color: #BBB; margin-bottom: 8px; }
.trail-meta { color: #555; font-weight: 500; font-variant-numeric: tabular-nums; }
.trail-row.active .trail-meta { color: #111; }
.trail-stops {
  display: block;
  font-size: 11px;
  color: #777;
  line-height: 1.5;
  margin-top: 4px;
}
.stop-pill {
  display: inline;
  padding: 0;
  background: none;
  color: #777;
  cursor: pointer;
  border-radius: 0;
  transition: color .12s;
}
.stop-pill:hover { background: none; color: #111; }
.stop-pill:not(:last-child)::after {
  content: ' · ';
  color: #BBB;
  pointer-events: none;
}
.stop-num { display: none; }
.stop-dot { display: none; }

/* Bouton "Démarrer ce parcours →" : noir en mode parent */
.btn-start {
  color: #111;
  text-decoration: none;
  font-weight: 700;
}
.btn-start:hover { color: #000; }
.trail-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px; font-weight: 700;
  color: #111 !important;
  text-decoration: none;
}
.trail-cta:hover { color: #000 !important; }

/* Lieux (mode places) */
.lieu-count {
  font-size: 11px; color: #BBB; padding: 10px 18px; font-style: italic;
}
.lieu-item {
  border-bottom: 1px solid #F5F5F5;
  cursor: pointer;
  transition: background .12s;
}
.lieu-item:hover { background: #FAF9F7; }
.lieu-item.active { background: #F9F9F7; border-left: 3px solid var(--color-text); }
.lieu-item.hovered { background: #F0EEE8; }
.lieu-inner { padding: 12px 18px; }
.lieu-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lieu-nom { font-size: 13px; font-weight: 700; flex: 1; }
.lieu-arrow {
  font-size: 11px; font-weight: 600; color: #BBB;
  padding: 4px 8px;
  border: 1px solid #E8E8E8; border-radius: 6px;
  transition: all .15s;
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.lieu-arrow:hover { color: var(--color-text); border-color: var(--color-text); }
.lieu-type { font-size: 11px; color: #BBB; }

/* Popup carte */
.ex-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  border: 1px solid #EEE;
  padding: 0;
}
.ex-popup .leaflet-popup-content { margin: 0; padding: 14px 18px; font-family: var(--font-sans); }
.ex-popup .leaflet-popup-tip-container { display: none; }
.popup-name { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 2px; line-height: 1.2; }
.popup-cat { font-size: 12px; color: #888; margin-bottom: 8px; }
.popup-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #111;
  margin-top: 6px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FAFAF8;
  border: 1px solid #EEE;
  transition: background .12s, border-color .12s;
}
.popup-link:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Légende thèmes (mode parcours) */
.map-legend {
  position: absolute; bottom: var(--bb-space-3); left: var(--bb-space-3);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--bb-gray-200);
  border-radius: var(--bb-radius-lg);
  padding: 10px 14px;
  box-shadow: var(--bb-shadow-sm);
  font-size: var(--bb-text-xs);
  z-index: 999;
  display: none;
  gap: 14px; flex-wrap: wrap;
  max-width: 380px;
}
.ex-app.mode-trails .map-legend { display: flex; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dash { width: 18px; height: 3px; border-radius: 2px; }
.legend-name { color: var(--bb-gray-700); font-weight: 500; }

/* Bouton Générer parcours (mode lieux, sélection multi) */

/* Tracés Leaflet : transition douce */
.leaflet-overlay-pane svg path { transition: opacity .35s, stroke-width .25s; }
.leaflet-marker-icon { transition: opacity .35s, filter .35s, transform .25s; }

/* Labels au-dessus des pins du parcours survolé */
.preview-label-wrap { background: transparent !important; border: none !important; }
.preview-label {
  position: absolute;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  white-space: nowrap;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  user-select: none;
  animation: previewLabelFade .18s ease-out;
}
.preview-label-num {
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  background: var(--color-text);
  padding: 1px 4px;
  border-radius: 999px;
  letter-spacing: .03em;
}
/* Position du label par rapport au pin (4 directions possibles) */
.preview-label.pos-top    { bottom: 0; left: 50%; transform: translateX(-50%); }
.preview-label.pos-bottom { top: 0;    left: 50%; transform: translateX(-50%); }
.preview-label.pos-left   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 6px; }
.preview-label.pos-right  { left: 100%;  top: 50%; transform: translateY(-50%); margin-left: 6px; }
@keyframes previewLabelFade {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Preview au survol d'un parcours dans la sidebar */
.preview-pin {
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transform: scale(1.18);
  transform-origin: center bottom;
  transition: transform .15s ease;
  z-index: 600 !important;
}
.preview-dimmed {
  opacity: .15;
  filter: grayscale(.7);
  transition: opacity .15s ease, filter .15s ease;
}

/* Pin du brouillon affiché en mode parcours / lieu sélectionné en mode lieux : halo distinct */
.drop-marker.pin-draft {
  filter: drop-shadow(0 0 0 3px #fff) drop-shadow(0 2px 10px rgba(0,0,0,.35));
  transform: scale(1.3);
  transform-origin: center bottom;
  z-index: 500 !important;
}
.drop-marker.pin-draft::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  /* Le + est dessiné en SVG pour un trait propre et net */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M5 2.5v5M2.5 5h5' stroke='%23222' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Pin sélectionné en mode lieux : halo + agrandi */
.leaflet-marker-icon.pin-selected {
  filter: drop-shadow(0 0 0 3px #fff) drop-shadow(0 2px 8px rgba(0,0,0,.25)) !important;
  z-index: 999 !important;
}
.leaflet-marker-icon.pin-selected svg {
  transform: scale(1.25);
  transform-origin: 50% 100%;
}
/* Surbrillance temporaire au hover d'une stop-pill (sidebar) */
.leaflet-marker-icon.pin-stop-hover {
  filter: drop-shadow(0 0 0 3px #fff) drop-shadow(0 2px 10px rgba(0,0,0,.35)) !important;
  z-index: 998 !important;
  transition: filter .15s ease;
}
.leaflet-marker-icon.pin-stop-hover svg {
  transform: scale(1.3);
  transform-origin: 50% 100%;
  transition: transform .15s ease;
}
/* Pin non-sélectionné en mode lieux quand au moins 1 est sélectionné : estompé mais visible */
.leaflet-marker-icon.pin-dimmed {
  opacity: .55 !important;
  filter: grayscale(.5) !important;
}

/* HOVER sur un marker dimmed : rendre la pleine couleur quand on le survole.
   Spécificité plus forte (.pin-stop-hover.pin-dimmed) + !important pour battre
   le grayscale du .pin-dimmed. Couvre les 2 sources de hover :
   - .pin-stop-hover : hover depuis une stop-pill ou le marker lui-même
   - .pin-list-hover : hover depuis un lieu-item de la sidebar (mobile, via
     monkey-patch setupListHoverHighlight) */
.leaflet-marker-icon.pin-stop-hover.pin-dimmed,
.leaflet-marker-icon.pin-list-hover.pin-dimmed {
  opacity: 1 !important;
  filter: drop-shadow(0 0 0 3px #fff) drop-shadow(0 2px 10px rgba(0,0,0,.35)) !important;
}
.drop-marker.pin-stop-hover.is-dimmed,
.drop-marker.pin-list-hover.is-dimmed {
  opacity: 1 !important;
  filter: drop-shadow(0 0 0 3px #fff) drop-shadow(0 2px 10px rgba(0,0,0,.35)) !important;
}


/* (1) Badge numéro sur pins sélectionnés en mode lieux */

/* (2) Compteur permanent en haut de la sidebar (mode lieux) */
.composer-actions {
  display: flex;
  gap: 4px;
  margin-right: 6px;
}
.composer-action {
  background: #fff;
  border: 1px solid #DDD;
  color: #111;
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.composer-action:hover {
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  border-color: #CCC;
  transform: translateY(-1px);
}

.composer-bar {
  display: none;
  background: #F7F6F2;
  border-bottom: 1px solid var(--bb-gray-200);
  padding: var(--bb-space-3) var(--bb-space-4);
  flex-shrink: 0;
  align-items: center;
  gap: var(--bb-space-3);
}
.ex-side.mode-places.has-selection .composer-bar { display: flex; }
.composer-info { flex: 1; font-size: var(--bb-text-base); color: var(--color-text); }
.composer-info b { font-weight: 700; }
.composer-info .meta { color: var(--bb-gray-500); font-weight: 500; margin-left: var(--bb-space-1); }
.composer-clear {
  background: none; border: none; cursor: pointer;
  color: var(--bb-gray-400); font-size: var(--bb-text-md); padding: 2px 6px;
  border-radius: var(--bb-radius-sm);
  transition: color var(--bb-ease-base), background var(--bb-ease-base);
}
.composer-clear:hover {
  color: var(--color-error);
  background: rgba(0,0,0,.04);
}

/* (6) État vide */
.empty-state {
  text-align: center;
  padding: var(--bb-space-7) var(--bb-space-4);
  color: var(--bb-gray-500);
}
.empty-state-icon {
  width: 80px; height: 80px;
  margin: 0 auto var(--bb-space-3);
  opacity: .4;
}
.empty-state-title { font-size: var(--bb-text-md); font-weight: 700; color: var(--bb-gray-900); margin-bottom: var(--bb-space-1); }
.empty-state-sub { font-size: var(--bb-text-base); line-height: 1.5; color: var(--bb-gray-500); }
.empty-state-tags {
  margin-top: var(--bb-space-3);
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.empty-state-tag {
  font-size: var(--bb-text-xs); font-weight: 600;
  padding: 5px 11px; border-radius: var(--bb-radius-full);
  background: var(--bb-gray-50);
  border: 1px solid var(--bb-gray-200);
  color: var(--bb-gray-700);
  cursor: pointer;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base), color var(--bb-ease-base);
}
.empty-state-tag:hover {
  background: var(--bb-gray-900);
  color: #fff;
  border-color: var(--bb-gray-900);
}

/* (6 bis) État vide des listes #list-trails / #list-places (.list-empty).
   Sans ces règles, .list-empty-icon est un <svg viewBox="0 0 24 24"> SANS
   width/height ni taille CSS → il s'étirait à 100% de la largeur du conteneur,
   d'où le marqueur géant en mode mobile quand aucun parcours n'existe. */
.list-empty {
  text-align: center;
  padding: var(--bb-space-7) var(--bb-space-4);
  color: var(--bb-gray-500);
}
.list-empty-icon {
  width: 44px;
  height: 44px;
  display: block;
  margin: 0 auto var(--bb-space-3);
  color: var(--bb-gray-300);
}
.list-empty-title {
  font-size: var(--bb-text-md);
  font-weight: 700;
  color: var(--bb-gray-900);
  margin-bottom: var(--bb-space-1);
}
.list-empty-text {
  font-size: var(--bb-text-base);
  line-height: 1.5;
  color: var(--bb-gray-500);
}
.list-empty-link {
  text-decoration: underline;
  cursor: pointer;
}

/* (7) Hover bounce sur les pins */
@keyframes pin-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1.08); }
}
.leaflet-marker-icon:hover svg {
  animation: pin-bounce .25s ease-out forwards;
}

/* (8) Bouton plein écran */
.ex-layout.fullscreen .ex-side { display: none; }
.ex-layout.fullscreen .map-legend { bottom: 60px; }


@media (max-width: 768px) {
  /*      MOBILE EXPLORER — bottom sheet (drag depuis le bas).
     Géré par static/js/explorer-bottom-sheet.js qui pose des classes
     sheet-peek / sheet-half / sheet-full / sheet-dragging sur #ex-app.
      */

  /* .ex-layout doit avoir une hauteur explicite (et position relative) pour
     que .ex-side absolute bottom:0 ait un point d'ancrage. flex: 1 ne suffit
     pas toujours quand le parent .app--fullscreen est fixed. */
  .ex-layout {
    position: relative;
    height: 100%;
    width: 100%;
    flex-direction: column;
  }

  /* Map prend tout l'écran, le sheet flotte au-dessus */
  .ex-map-col {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #ex-map { position: absolute; inset: 0; }

  /* Le sheet : position FIXED direct sur le viewport, !important sur les
     propriétés de POSITIONNEMENT pour écraser toute règle qui pourrait le
     cacher ou le déplacer. ATTENTION : pas de !important sur height/max-height
     car le JS pilote la hauteur en inline pendant le drag (style.height = X)
     et !important sur la règle CSS gagnerait sur l'inline → drag cassé.
     z-index 1000 > .bottom-nav (950). */
  .ex-side {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--bottom-nav-h) !important;
    top: auto !important;
    width: 100% !important;
    border-right: none !important;
    border-top: 1px solid #ECEAE4 !important;
    border-radius: 16px 16px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,.08) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: height .35s cubic-bezier(.32, .72, 0, 1);
    height: 110px;
    max-height: calc(100vh - var(--nav-h) - var(--bottom-nav-h));
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Le sheet-handle est désormais un enfant flex EN FLUX (1er enfant) : il
       occupe ses propres 28px en haut, plus besoin de padding-top de réserve. */
  }
  /* States posés par le JS sur #ex-app. Pas de !important : le JS doit pouvoir
     override la hauteur en inline pendant le drag. */
  .ex-app.sheet-peek .ex-side { height: 110px; }
  .ex-app.sheet-half .ex-side { height: 55vh; }
  .ex-app.sheet-full .ex-side { height: calc(100vh - var(--nav-h) - var(--bottom-nav-h)); }
  .ex-app.sheet-dragging .ex-side { transition: none; }

  /* Le drag handle : styles centralisés HORS du @media (voir plus bas).
     Ici on garde uniquement les overrides spécifiques mobile-sheet :
     cursor grabbing en drag. */
  .ex-app.sheet-dragging .sheet-handle { cursor: grabbing; }

  /* Indicateur scroll : gradient fade en bas du sheet quand il est en peek
     pour suggérer qu'il y a du contenu en-dessous (tappant le handle ou
     en draguant on peut révéler la liste). En half/full le contenu est
     déjà bien visible, pas besoin d'indicateur. */
  .ex-app.sheet-peek .ex-side::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    z-index: 2;
  }

  /* Le contenu scrollable. Quand le sheet est peek (110px) seul le
     mode-toggle est visible ; le reste est scrollable en mode half/full. */
  .sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;  /* ancre les enfants en absolute (.filter-menu) */
  }

  /* Sur mobile le sidebar-toggle desktop (chevron) n'a plus de sens : caché */
  .sidebar-toggle { display: none; }

  /* Map toolbar : ancrée tout en haut, alignée avec le bord gauche du logo
     de la nav (12px = padding-left du .nav sur mobile via --space-3).
     !important nécessaire car la règle desktop (.map-toolbar { left:24px })
     vient APRÈS ce @media dans le source — sans !important, elle override. */
  .map-toolbar {
    top: 8px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
  }

  /* Le .map-info-bar (pill qui affiche le nom du lieu au tap) est centré
     en haut à top: 16px. Sur mobile, la .map-toolbar occupe le haut (et a
     un z-index 1100 > .map-info-bar 700) → la session-pill cacherait l'info.
     On descend le .map-info-bar sous la toolbar (60px = 12 top + ~40 hauteur
     pill + 8 marge). */
  .map-info-bar {
    top: 60px;
  }

  /* Routing status badge superuser : caché sur mobile (pas critique) */
  #routing-status-badge { display: none !important; }

  /* Légende multi-parcours : cachée sur mobile (place limitée) */
  .map-legend { display: none !important; }

  /* Bouton fusionner : remonté pour éviter d'être recouvert par le sheet en
     mode peek (110px). 110 + 24 marge = 134. */
  .integrate-btn { bottom: 134px; }

  /* FABs (gps + scan carte) : suivent dynamiquement la position du sheet.
     Le sheet a 3 états (peek 110px, half 55vh, full 100vh-) — pour que les
     FABs restent toujours juste au-dessus du sheet :
     - en peek (110px sheet) : FABs à 134/186px du bottom map-col
     - en half (55vh sheet)  : FABs à 55vh + marge (le sheet remonte, les FABs aussi)
     - en full              : FABs cachés (sheet prend toute la map, pas de place)
     Transition matche celle du sheet (.35s cubic-bezier) pour qu'ils glissent ensemble.

     IMPORTANT : on préfixe par .ex-app pour bumper la spécificité à 0,0,2,0
     et battre la règle desktop `.gps-btn { bottom: 24px }` qui est placée
     plus tard dans le fichier (cascade : à spécificité égale, later wins). */
  .ex-app .gps-btn,
  .ex-app .map-card-btn,
  .ex-app .ex-fab {
    transition: bottom .35s cubic-bezier(.32, .72, 0, 1),
                opacity .25s ease,
                transform .25s ease;
    right: 16px;
  }

  /* État peek (défaut) — sheet à 110px. Empilage : gps, map-card, ex-fab. */
  .ex-app .gps-btn      { bottom: 134px; }
  .ex-app .map-card-btn { bottom: 186px; }
  .ex-app .ex-fab       { bottom: 238px; }

  /* État peek + parcours actif — sheet à 170px (body.has-active-trail dans
     le peek agrandi pour montrer le banner). Les FABs doivent monter de 60px. */
  body.has-active-trail .ex-app .gps-btn      { bottom: 194px; }
  body.has-active-trail .ex-app .map-card-btn { bottom: 246px; }
  body.has-active-trail .ex-app .ex-fab       { bottom: 298px; }

  /* État half — sheet à 55vh, FABs juste au-dessus */
  .ex-app.sheet-half .gps-btn      { bottom: calc(55vh + 12px); }
  .ex-app.sheet-half .map-card-btn { bottom: calc(55vh + 64px); }
  .ex-app.sheet-half .ex-fab       { bottom: calc(55vh + 116px); }

  /* État full — sheet plein, FABs cachés (pas d'espace) */
  .ex-app.sheet-full .gps-btn,
  .ex-app.sheet-full .map-card-btn,
  .ex-app.sheet-full .ex-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }

  /* Pendant le drag : pas de transition pour que les FABs suivent le doigt
     en temps réel (le sheet aussi a transition: none pendant drag). */
  .ex-app.sheet-dragging .gps-btn,
  .ex-app.sheet-dragging .map-card-btn,
  .ex-app.sheet-dragging .ex-fab {
    transition: none;
  }

  /* Zoom controls Leaflet sur mobile : on les met en bottom-left (symétrique
     des FABs à bottom-right) et on les fait suivre la position du sheet,
     comme les FABs. En top-left ils étaient en collision visuelle avec la
     place-pill ancrée top-center. */
  .ex-map-col .leaflet-bottom.leaflet-left {
    transition: bottom .35s cubic-bezier(.32, .72, 0, 1),
                opacity .25s ease;
  }
  /* État peek (défaut) — sheet à 110px, zooms à 134px du bottom map-col */
  .ex-app .ex-map-col .leaflet-bottom.leaflet-left {
    bottom: 134px;
    left: 16px;
  }
  /* État peek + parcours actif — sheet à 170px, zooms montent */
  body.has-active-trail .ex-app .ex-map-col .leaflet-bottom.leaflet-left {
    bottom: 194px;
  }
  /* État half — sheet à 55vh, zooms juste au-dessus */
  .ex-app.sheet-half .ex-map-col .leaflet-bottom.leaflet-left {
    bottom: calc(55vh + 12px);
  }
  /* État full — zooms cachés (pas de place, user en plein contenu) */
  .ex-app.sheet-full .ex-map-col .leaflet-bottom.leaflet-left {
    opacity: 0;
    pointer-events: none;
  }
  /* Pendant le drag : pas de transition pour suivre le doigt en temps réel */
  .ex-app.sheet-dragging .ex-map-col .leaflet-bottom.leaflet-left {
    transition: none;
  }

  /* ──────────────────────────────────────────────────────────────────────
     Fixes mobile cohérence (cette session) : zones tactiles agrandies,
     paddings ajustés pour les petits écrans, lisibilité préservée.
     ────────────────────────────────────────────────────────────────────── */

  /* Boutons icon (chevron fiche, Google Maps, share, delete) : 32×32 au lieu
     de 28×28. Apple/Material recommandent 44×44 mais 32 est un bon compromis
     vs encombrement dans .trail-card-actions. */
  .trail-card-detail-link,
  .trail-card-info,
  .my-trail-share-btn,
  .my-trail-delete-btn {
    width: 32px;
    height: 32px;
  }

  /* Mode-toggle Parcours/Personnaliser : padding compressé sur mobile pour
     que "Personnaliser" (12 chars) tienne sans wrap sur 320px screens. */
  .mode-toggle { margin: 6px 12px 8px; }
  .mode-btn { padding: 7px 8px; font-size: 12px; }

  /* Trail-tabs (Quartiers/Thématiques/Mes parcours) : gap réduit pour que
     les 3 tabs tiennent sur les très petits écrans (≤340px). */
  .trail-tabs.style-underline { gap: 14px; }

  /* Inputs (start-bar, search) : padding lateral réduit pour gagner de la
     largeur quand le bottom sheet est étroit. */
  .start-bar, .search-bar { margin-left: 12px; margin-right: 12px; }

  /* Sticky headers : assurer que les z-index restent valides dans le bottom
     sheet (qui a son propre stacking context). Pas de change ici mais on
     documente : my-trails-header z-6, neighborhood-header z-5, OK. */
}



/*  */
/* MODE KIDS                                                          */
/* Inspiration : landing beboun.netlify.app — terrain de jeu doux,    */
/* tons crème/sable, accents pastels, blobs colorés.                  */
/* Pas de gaming, pas de fluo. Famille, balade, tendresse.            */
/*  */

/* Variables couleurs Mode Kids — palette neutre claire */
body.kids-mode {
  --kids-bg:        #FFFFFF;        /* blanc pur */
  --kids-bg-soft:   #F5F5F5;        /* gris très clair */
  --kids-accent:    #2563EB;        /* terracotta par défaut, override par couleur avatar */
  --kids-accent-2:  #C76A48;        /* foncé par défaut, override par couleur avatar */
  --kids-ink:       var(--bb-gray-900);        /* noir profond pour texte */
  --kids-soft:      #555555;        /* gris moyen pour texte secondaire */
  --kids-card:      #FFFFFF;        /* blanc pour les cartes */
  --kids-border:    #ECECEC;        /* bordure neutre */
  --kids-yes:       #6B8E5A;        /* vert sauge pour J'aime */
  --kids-no:        #B85450;        /* rouge brique pour Pas envie */
}

/* ── Barre de boutons flottants (haut-gauche de la map) ────────────
   Position : top 8px aligne verticalement avec le logo de la nav (qui est
   centré dans une nav de 52px). Left 24px = padding-left de la nav desktop
   (--space-6) → bord gauche de la pill aligné avec bord gauche du logo nav. */
.map-toolbar {
  position: absolute;
  top: 8px;
  left: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100% - 240px);  /* laisse de la place au routing-status-badge à droite */
}

/*    SESSION PILL — pastille unifiée d'identité de session
   Vit dans .map-toolbar (position absolute, top-left de la map).
   Mode parent : "[blob noir] Activer le mode kids →" (cliquable = active mode kids)
   Mode kids   : "[blob Luka] Luka →"                  (cliquable = ouvre menu identité)
    */
.session-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border: 1px solid var(--bb-gray-300);
  border-radius: var(--bb-radius-full);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: #111;
  transition: all .15s ease;
}
.session-pill:hover {
  background: #FAFAFA;
  border-color: #BBB;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.session-pill-blob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #F5F5F5;
}
.session-pill-blob svg {
  display: block;
}
.session-pill-label {
  white-space: nowrap;
}
.session-pill-arrow {
  flex-shrink: 0;
  color: #BBB;
  transition: transform .15s ease;
}
.session-pill:hover .session-pill-arrow {
  transform: translateX(2px);
  color: #555;
}

/* Mode kids actif : le pill prend la couleur de l'avatar (subtilement) */
body.kids-mode .session-pill {
  border-color: var(--kids-accent, #DDD);
  background: #fff;
}
body.kids-mode .session-pill-blob {
  background: var(--kids-accent-light, #F5F5F5);
}
body.kids-mode .session-pill-label {
  color: var(--kids-accent-2, #111);
}
body.kids-mode .session-pill-arrow {
  color: var(--kids-accent, #BBB);
}

/* ── Zone d'action principale dans la sidebar (visible en mode kids) ── */
.sidebar-action-zone {
  padding: 12px 16px 0;
}
.sidebar-action-zone:empty,
body:not(.kids-mode) .sidebar-action-zone {
  padding: 0;
}

/* ── Bouton "Trouve une balade" : CTA principal mode kids (en sidebar) ── */
.kids-adventure-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--kids-accent, #2563EB);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-size: var(--bb-text-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: all .15s ease;
}
body.kids-mode .kids-adventure-btn {
  display: inline-flex;
}
.kids-adventure-btn:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.kids-adventure-blob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, .2);
  border-radius: 50%;
  flex-shrink: 0;
}
.kids-adventure-blob svg circle[fill="#111"],
.kids-adventure-blob svg ellipse[fill="#111"] {
  fill: #fff;
}

/* ── Onboarding plein écran ──────────────────────────────────── */
.kids-onboarding {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #FFFFFF;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: kids-fadein .4s ease-out;
}
.kids-onboarding.show { display: flex; }
@keyframes kids-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kids-onboarding-card {
  position: relative;
  background: #fff;
  border-radius: 28px;
  padding: 40px 36px 32px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  border: 1px solid #ECECEC;
  box-shadow: 0 12px 40px rgba(60, 40, 20, .08);
  animation: kids-popin .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes kids-popin {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kids-onboarding-blob {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  animation: kids-float 4s ease-in-out infinite;
}
@keyframes kids-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.kids-onboarding-blob svg {
  filter: drop-shadow(0 6px 16px rgba(60, 40, 20, .12));
}
.kids-onboarding-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--bb-gray-900);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.kids-onboarding-text {
  font-size: var(--bb-text-lg);
  line-height: 1.55;
  color: #555555;
  margin: 0 0 28px;
}
.kids-onboarding-text strong {
  color: var(--bb-gray-900);
  font-weight: 600;
}
.kids-onboarding-btn {
  font-family: inherit;
  font-size: var(--bb-text-lg);
  font-weight: 600;
  padding: 13px 32px;
  background: var(--bb-gray-900);
  color: #FFFFFF;
  border: none;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  transition: all .15s ease;
}
.kids-onboarding-btn:hover {
  background: #000000;
  transform: translateY(-1px);
}
.kids-onboarding-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #999999;
  font-size: var(--bb-text-base);
  cursor: pointer;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--bb-radius-sm);
}
.kids-onboarding-skip:hover {
  color: #555555;
  background: #F5F5F5;
}
.kids-onboarding-skip-bottom {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: #555555;
  font-size: var(--bb-text-base);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bb-gray-400);
  text-underline-offset: 3px;
}
.kids-onboarding-skip-bottom:hover {
  color: var(--bb-gray-900);
}

/*    MODE KIDS
      La sidebar est identique au mode parent. La couleur de l'avatar
   ne s'applique que sur les éléments du parcours actif et le CTA
   flottant "Trouve ta balade".
    */

body.kids-mode .trail-row.active {
  border-left-color: var(--kids-accent, #111) !important;
}
body.kids-mode .trail-row.active .trail-num {
  background: var(--kids-accent, #111);
}
body.kids-mode .trail-row.active .stop-dot {
  background: var(--kids-accent, #BBB);
}
body.kids-mode .trail-cta {
  color: var(--kids-accent, #111);
}
body.kids-mode .trail-cta:hover {
  color: var(--kids-accent-2, #000);
}

/* Pins map : pupilles qui clignent */
body.kids-mode .leaflet-marker-icon svg circle:not([fill="#fff"]):not([fill="#FFF"]) {
  animation: kids-blink 6s infinite;
  animation-delay: var(--blink-delay, 0s);
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes kids-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.1); }
}

/* ── Récompense : blob qui pop ──────────────────────────────── */
.kids-reward-blob {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9998;
  pointer-events: none;
  animation: kids-reward-pop 1.6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes kids-reward-pop {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.15) rotate(6deg); opacity: 1; }
  35%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  80%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.7) translateY(-30px); opacity: 0; }
}
.kids-reward-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--bb-gray-900);
  padding: 10px 18px;
  border-radius: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(60, 40, 20, .15);
}
.kids-reward-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bb-gray-900);
}

/* Confettis */
.kids-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  display: none;
}
body.kids-mode .kids-confetti.active {
  display: block;
}

/*  */
/* SWIPE PLEIN ÉCRAN — choix catégories + cartes lieux + résultat    */
/*  */

.kids-swipe {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #FFFFFF;
  flex-direction: column;
  animation: kids-fadein .4s ease-out;
  overflow: hidden;
}
.kids-swipe.show { display: flex; }

.kids-swipe-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bb-gray-300);
  border-radius: 50%;
  background: #fff;
  color: #555555;
  font-size: var(--bb-text-xl);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .08);
  transition: all .15s ease;
}
.kids-swipe-close:hover {
  background: #F5F5F5;
  transform: scale(1.05);
}
.kids-swipe-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 24px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.kids-swipe-header {
  text-align: center;
  margin-bottom: 32px;
  width: 100%;
}
.kids-swipe-step[data-step="cards"] .kids-swipe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.kids-swipe-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--bb-gray-900);
  margin: 0 0 10px;
  letter-spacing: -.01em;
  text-align: center;
}
.kids-swipe-sub {
  font-size: var(--bb-text-lg);
  color: #555555;
  margin: 0;
  text-align: center;
}

/* ── Étape 1 : grille de catégories ─────────────────────────── */
.kids-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 32px;
}
.kids-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px;
  background: #fff;
  border: 2px solid #ECECEC;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  box-shadow: 0 1px 3px rgba(60, 40, 20, .04);
}
.kids-cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--bb-gray-400);
  box-shadow: 0 4px 12px rgba(60, 40, 20, .08);
}
.kids-cat-card.on {
  background: #FFFFFF;
  border-color: var(--kids-ink, var(--bb-gray-900));
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(60, 40, 20, .12);
}
.kids-cat-card.on::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: var(--bb-gray-900);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-text-base);
  font-weight: 700;
}
.kids-cat-card { position: relative; }
.kids-cat-blob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  transition: transform .2s ease;
}
.kids-cat-card:hover .kids-cat-blob {
  transform: scale(1.08) rotate(-5deg);
}
.kids-cat-card.on .kids-cat-blob {
  transform: scale(1.05);
}
.kids-cat-name {
  font-size: var(--bb-text-md);
  font-weight: 600;
  color: var(--bb-gray-900);
}
.kids-swipe-cta {
  font-family: inherit;
  font-size: var(--bb-text-lg);
  font-weight: 600;
  padding: 14px 36px;
  background: var(--bb-gray-900);
  color: #FFFFFF;
  border: none;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  transition: all .15s ease;
}
.kids-swipe-cta:hover:not(:disabled) {
  background: #000000;
  transform: translateY(-1px);
}
.kids-swipe-cta:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.kids-swipe-cta-secondary {
  font-family: inherit;
  font-size: var(--bb-text-md);
  font-weight: 500;
  padding: 10px 24px;
  background: none;
  color: #555555;
  border: 1px solid var(--bb-gray-300);
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  margin-top: 10px;
  transition: all .15s ease;
}
.kids-swipe-cta-secondary:hover {
  background: #F8F8F8;
  border-color: var(--bb-gray-400);
}

/* ── Étape 2 : pile de cartes ──────────────────────────────── */
.kids-swipe-progress {
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: #555555;
  background: #fff;
  padding: 6px 14px;
  border-radius: var(--bb-radius-full);
  border: 1px solid #ECECEC;
}
.kids-swipe-progress-sep {
  color: #999999;
}
.kids-swipe-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: var(--bb-gray-900);
  background: #F8F8F8;
  padding: 6px 14px;
  border-radius: var(--bb-radius-full);
  border: 1px solid var(--bb-gray-300);
}
.kids-swipe-counter-label {
  color: #555555;
  font-weight: 500;
}
#kids-swipe-liked {
  font-size: 16px;
  font-weight: 700;
  color: var(--kids-accent, #2563EB);
}
.kids-swipe-deck {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 480px;
  margin: 0 auto 24px;
}
.kids-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(60, 40, 20, .12);
  border: 1px solid #ECECEC;
  user-select: none;
  cursor: grab;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, opacity .35s ease;
}
.kids-card:active { cursor: grabbing; }
.kids-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #F8F8F8;
  flex-shrink: 0;
}
.kids-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kids-card-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kids-card-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: var(--bb-radius-full);
  color: #fff;
  font-size: var(--bb-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.kids-card-overlay-yes,
.kids-card-overlay-no {
  position: absolute;
  top: 30px;
  padding: 8px 18px;
  border: 3px solid;
  border-radius: var(--bb-radius-xl);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255,255,255,.5);
}
.kids-card-overlay-yes {
  right: 24px;
  color: #6B8E5A;
  border-color: #6B8E5A;
  transform: rotate(15deg);
  background: rgba(255, 248, 238, .92);
}
.kids-card-overlay-no {
  left: 24px;
  color: #B85450;
  border-color: #B85450;
  transform: rotate(-15deg);
  background: rgba(255, 248, 238, .92);
}
.kids-card-body {
  flex: 1;
  padding: 20px 22px 24px;
  overflow-y: auto;
}
.kids-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: var(--bb-gray-900);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.kids-card-addr {
  font-size: var(--bb-text-base);
  color: #999999;
  margin-bottom: 14px;
}
.kids-card-desc {
  font-size: var(--bb-text-md);
  line-height: 1.55;
  color: #555555;
}
.kids-swipe-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 14px;
}
.kids-swipe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 2px solid;
  border-radius: var(--bb-radius-full);
  font-family: inherit;
  font-size: var(--bb-text-md);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  background: #fff;
}
.kids-swipe-btn-no {
  color: #B85450;
  border-color: #E8C9C7;
}
.kids-swipe-btn-no:hover {
  background: #FAFAFA;
  border-color: #B85450;
  transform: translateY(-1px);
}
.kids-swipe-btn-yes {
  color: #FFFFFF;
  background: #6B8E5A;
  border-color: #6B8E5A;
}
.kids-swipe-btn-yes:hover {
  background: #587548;
  border-color: #587548;
  transform: translateY(-1px);
}
.kids-swipe-hint {
  text-align: center;
  font-size: var(--bb-text-sm);
  color: #999999;
  margin: 0;
  font-style: italic;
}

/* ── Étape 3 : récap ────────────────────────────────────────── */
.kids-swipe-result-blob {
  margin-bottom: 18px;
  animation: kids-float 4s ease-in-out infinite;
}
.kids-swipe-result-blob svg {
  filter: drop-shadow(0 6px 16px rgba(60, 40, 20, .12));
}
.kids-swipe-result-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Responsive : écrans étroits */
@media (max-width: 480px) {
  .kids-swipe-deck { height: 60vh; max-width: 92vw; }
  .kids-swipe-title { font-size: 24px; }
  .kids-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kids-cat-card { padding: 16px 8px; }
  .kids-cat-blob { width: 48px; height: 48px; }
  .kids-onboarding-title { font-size: 24px; }
  .kids-onboarding-card { padding: 32px 22px 24px; }
}

/*  */
/* BOUTON "J'AI UNE CARTE" + EXPÉRIENCE SCAN PLEIN ÉCRAN              */
/* Approche hybride : moment magique kids même hors mode kids actif.  */
/*  */

/* ── Footer sidebar : utilitaire discret en bas ─────────────── */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid #F0F0F0;
  background: #fff;
  flex-shrink: 0;
}

/* ── Bouton "J'ai une carte" : mini-lien gris discret ───────── */
.card-scan-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  background: transparent;
  border: none;
  color: #888;
  font-family: inherit;
  font-size: var(--bb-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease;
}
.card-scan-btn:hover {
  color: #111;
}
.card-scan-btn svg {
  flex-shrink: 0;
}

/* En mode kids, le bouton reste neutre (pas envahi par la couleur avatar) */
body.kids-mode .card-scan-btn {
  border-color: #DDD;
}

/* ── Overlay plein écran ─────────────────────────────────────────── */
.card-redeem {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  animation: kids-fadein .35s ease-out;
  overflow-y: auto;
}

/* ─── Sélecteur de villes plein écran (style redeem) ───────────────────
   Affiché quand /explorer/ est ouvert sans ?city=. Couvre tout l'écran,
   au-dessus de l'explorer. Blob logo + titre serif + grille de villes. */
.city-picker {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 48px;
  overflow-y: auto;
  animation: kids-fadein .35s ease-out;
}
/* Blobs watermark décoratifs (même esprit que le hero city_detail) :
   gros logos beboun très transparents, en position absolute, tournés. */
.city-picker-wm {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.city-picker-wm--1 { right: -60px; top: 50%; transform: translateY(-50%); opacity: .05; }
.city-picker-wm--2 { left: -50px; top: 40px; transform: rotate(-18deg); opacity: .045; }
.city-picker-wm--3 { left: 12%; bottom: -80px; transform: rotate(12deg); opacity: .04; }
.city-picker-wm--4 { right: 24%; top: -40px; transform: rotate(28deg); opacity: .04; }
.city-picker-head {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  margin-bottom: 36px;
}
.city-picker-blob {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.city-picker-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 700;
  color: var(--bb-gray-900, #111);
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.city-picker-sub {
  font-size: var(--bb-text-md, 15px);
  color: var(--bb-gray-600, #666);
  margin: 0;
  line-height: 1.5;
}
.city-picker-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 760px;
}
.city-picker-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: #fff;
  border: 1.5px solid var(--bb-gray-200, #EFEEEC);
  border-radius: var(--bb-radius-lg, 16px);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.22, 1.4, .36, 1), box-shadow .18s, border-color .18s;
}
/* Barre noire en haut, révélée au hover (même motif que les cartes villes
   voisines de city_detail). */
.city-picker-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--bb-gray-900, #111);
  opacity: 0;
  transition: opacity .18s;
}
.city-picker-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: var(--bb-gray-900, #111);
}
.city-picker-card:hover::before { opacity: 1; }

.city-picker-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.city-picker-card-arrow {
  flex-shrink: 0;
  color: var(--bb-gray-900, #111);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s, transform .18s;
}
.city-picker-card:hover .city-picker-card-arrow {
  opacity: 1;
  transform: translateX(0);
}
.city-picker-card-name {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bb-gray-900, #111);
}
.city-picker-card-meta {
  font-size: var(--bb-text-sm, 13px);
  color: var(--bb-gray-500, #888);
}
/* Rangée de ronds photo (aperçu des lieux), légèrement chevauchés. */
.city-picker-thumbs {
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.city-picker-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bb-gray-100, #F0EFEB);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.city-picker-thumb:first-child { margin-left: 0; }
.city-picker-thumb svg { width: 74%; height: 74%; display: block; }
.city-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--bb-gray-500, #888);
}
@media (max-width: 600px) {
  .city-picker { padding: 48px 16px 32px; }
  .city-picker-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .city-picker-card { padding: 14px; }
  .city-picker-card-name { font-size: 16px; }
}
.card-redeem.show { display: flex; }
.card-redeem-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bb-gray-300);
  border-radius: 50%;
  background: #fff;
  color: #555555;
  font-size: var(--bb-text-xl);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .08);
  transition: all .15s ease;
}
.card-redeem-close:hover {
  background: #F5F5F5;
  transform: scale(1.05);
}
.card-redeem-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 460px;
  width: 100%;
  animation: kids-popin .5s cubic-bezier(.34, 1.56, .64, 1);
}
.card-redeem-blob {
  margin-bottom: 18px;
  animation: kids-float 4s ease-in-out infinite;
}
.card-redeem-blob svg {
  filter: drop-shadow(0 6px 16px rgba(60, 40, 20, .12));
}
.card-redeem-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--bb-gray-900);
  margin: 0 0 10px;
  letter-spacing: -.01em;
  text-align: center;
}
.card-redeem-sub {
  font-size: var(--bb-text-lg);
  color: #555555;
  margin: 0 0 28px;
  line-height: 1.5;
  text-align: center;
  max-width: 380px;
}

/* ── Saisie du code ──────────────────────────────────────────── */
.card-code-input-wrap {
  width: 100%;
  max-width: 360px;
  margin-bottom: 18px;
}
.card-code-input {
  width: 100%;
  padding: 18px 20px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  color: var(--bb-gray-900);
  background: #fff;
  border: 2px solid var(--bb-gray-300);
  border-radius: 14px;
  outline: none;
  transition: all .15s ease;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .04);
  box-sizing: border-box;
}
.card-code-input::placeholder {
  color: var(--bb-gray-400);
  letter-spacing: 2px;
}
.card-code-input:focus {
  border-color: var(--kids-accent, #2563EB);
  box-shadow: 0 4px 16px rgba(60, 40, 20, .15);
}
.card-redeem-error {
  color: #B85450;
  font-size: var(--bb-text-md);
  font-weight: 500;
  margin: 0 0 16px;
  text-align: center;
  background: #FAFAFA;
  padding: 8px 14px;
  border-radius: var(--bb-radius-lg);
  border: 1px solid #E8C9C7;
}

/* ── Boutons CTA ─────────────────────────────────────────────── */
.card-redeem-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  max-width: 360px;
}
.card-redeem-cta {
  display: inline-block;
  font-family: inherit;
  font-size: var(--bb-text-lg);
  font-weight: 600;
  padding: 14px 36px;
  background: var(--bb-gray-900);
  color: #FFFFFF;
  border: none;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all .15s ease;
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
}
.card-redeem-cta:hover:not(:disabled) {
  background: #000000;
  transform: translateY(-1px);
}
.card-redeem-cta:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.card-redeem-cta-secondary {
  display: inline-block;
  font-family: inherit;
  font-size: var(--bb-text-md);
  font-weight: 500;
  padding: 12px 28px;
  background: none;
  color: #555555;
  border: 1px solid var(--bb-gray-300);
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all .15s ease;
}
.card-redeem-cta-secondary:hover {
  background: #F8F8F8;
  border-color: var(--bb-gray-400);
}
.card-redeem-foot {
  font-size: var(--bb-text-sm);
  color: #999999;
  margin: 14px 0 0;
  font-style: italic;
}

/* ── Animation succès : carte qui se révèle ─────────────────── */
.card-redeem-success-card {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(60, 40, 20, .15);
  margin-bottom: 24px;
  animation: card-reveal .8s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes card-reveal {
  0%   { opacity: 0; transform: scale(.6) rotate(-8deg); }
  50%  { transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.card-success-photo-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: #F8F8F8;
  position: relative;
}
.card-success-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-success-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-success-body {
  padding: 18px 22px 24px;
  text-align: left;
}
.card-success-cat-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--bb-radius-full);
  color: #fff;
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.card-success-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: var(--bb-gray-900);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.card-success-addr {
  font-size: var(--bb-text-base);
  color: #999999;
}
.card-redeem-counter {
  font-size: var(--bb-text-md);
  color: #555555;
  margin: 4px 0 24px;
  background: #fff;
  padding: 8px 18px;
  border-radius: var(--bb-radius-full);
  border: 1px solid var(--bb-gray-300);
}
.card-redeem-counter strong {
  color: var(--kids-accent, #2563EB);
  font-size: 17px;
  font-weight: 800;
}

/* Responsive : écrans étroits */
@media (max-width: 480px) {
  .map-toolbar { gap: 6px; }
  .kids-toggle-label,
  .kids-adventure-btn span:not(.kids-adventure-blob),
  .card-scan-btn span { display: none; }   /* sur mobile : juste les icônes */
  .card-redeem-title { font-size: 24px; }
  .card-code-input { font-size: var(--bb-text-xl); padding: 14px 16px; }
}

/*  */
/* SÉLECTEUR D'AVATAR ENFANT ("Qui joue ?") plein écran               */
/*  */
.child-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  animation: kids-fadein .35s ease-out;
  overflow-y: auto;
}
.child-picker.show { display: flex; }

.child-picker-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bb-gray-300);
  border-radius: 50%;
  background: #fff;
  color: #555555;
  font-size: var(--bb-text-xl);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .08);
  transition: all .15s ease;
}
.child-picker-close:hover {
  background: #F5F5F5;
  transform: scale(1.05);
}

.child-picker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 580px;
  width: 100%;
  animation: kids-popin .5s cubic-bezier(.34, 1.56, .64, 1);
}

.child-picker-blob {
  margin-bottom: 18px;
  animation: kids-float 4s ease-in-out infinite;
}
.child-picker-blob svg {
  filter: drop-shadow(0 6px 16px rgba(60, 40, 20, .12));
}

.child-picker-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--bb-gray-900);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.child-picker-sub {
  font-size: var(--bb-text-lg);
  color: #555555;
  margin: 0 0 28px;
  line-height: 1.5;
}

/* Grille des cards enfants */
.child-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

/* Bouton "Sortir du mode kids" : sous la grille, discret mais visible */
.child-picker-exit {
  margin-top: 32px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: #888;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease;
}
.child-picker-exit:hover {
  color: var(--bb-gray-900);
}

.child-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  background: #fff;
  border: 2px solid #ECECEC;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .04);
}
.child-picker-card:hover {
  transform: translateY(-3px);
  border-color: var(--child-color, var(--bb-gray-400));
  box-shadow: 0 8px 20px rgba(60, 40, 20, .1);
  background: var(--child-light, #FFFFFF);
}
.child-picker-card-blob {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: transform .2s ease;
}
.child-picker-card:hover .child-picker-card-blob {
  transform: scale(1.08) rotate(-4deg);
}
.child-picker-card-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: var(--bb-gray-900);
  letter-spacing: -.01em;
}
.child-picker-card-age {
  font-size: var(--bb-text-base);
  color: #555555;
}

/* CTA pour les états "empty" et "auth" */
.child-picker-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  max-width: 320px;
}
.child-picker-cta {
  display: inline-block;
  font-family: inherit;
  font-size: var(--bb-text-lg);
  font-weight: 600;
  padding: 14px 36px;
  background: var(--bb-gray-900);
  color: #FFFFFF;
  border: none;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all .15s ease;
  width: 100%;
}
.child-picker-cta:hover {
  background: #000000;
  transform: translateY(-1px);
}
.child-picker-cta-secondary {
  display: inline-block;
  font-family: inherit;
  font-size: var(--bb-text-md);
  font-weight: 500;
  padding: 12px 28px;
  background: none;
  color: #555555;
  border: 1px solid var(--bb-gray-300);
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all .15s ease;
}
.child-picker-cta-secondary:hover {
  background: #F8F8F8;
  border-color: var(--bb-gray-400);
}

/*  */
/* BARRE D'IDENTITÉ ENFANT (visible uniquement en mode kids)          */
/* Affiche le blob coloré + prénom de l'avatar actif. Cliquable pour  */
/* switcher d'avatar (réouvre le sélecteur "Qui joue ?").             */
/*  */
.kids-identity-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: #333;
  transition: all .2s ease;
}
body.kids-mode .kids-identity-btn {
  display: inline-flex;
}
.kids-identity-btn:hover {
  background: #FAFAFA;
  border-color: #BBB;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.kids-identity-blob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.kids-identity-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: var(--bb-text-md);
}

/*  */
/* PROPAGATION DE LA COULEUR DE L'AVATAR DANS TOUT LE MODE KIDS       */
/* La couleur de l'avatar imprègne discrètement les écrans plein      */
/* écran : titres, accents, hover, focus. Le fond reste neutre        */
/* (crème) pour ne pas saturer.                                       */
/*  */

/* Quand un enfant est sélectionné en mode kids :
   les titres des écrans plein écran prennent une teinte foncée de sa couleur,
   les CTA principaux prennent la couleur vive. Les fonds restent neutres
   (crème) pour ne pas saturer la perception. */

/* Titres en italique : couleur foncée de l'avatar (eyes) au lieu du brun */
body.kids-mode .kids-swipe-title,
body.kids-mode .card-redeem-title,
body.kids-mode .child-picker-title,
body.kids-mode .kids-onboarding-title {
  color: var(--kids-accent-2, var(--bb-gray-900));
}

/* CTA principaux (boutons noirs) : passent à la couleur de l'avatar */
body.kids-mode .kids-swipe-cta,
body.kids-mode .card-redeem-cta,
body.kids-mode .child-picker-cta,
body.kids-mode .kids-onboarding-btn {
  background: var(--kids-accent, var(--bb-gray-900));
  color: #fff;
}
body.kids-mode .kids-swipe-cta:hover:not(:disabled),
body.kids-mode .card-redeem-cta:hover:not(:disabled),
body.kids-mode .child-picker-cta:hover,
body.kids-mode .kids-onboarding-btn:hover {
  background: var(--kids-accent-2, #000000);
}

/* Cards de catégories : sélectionnées prennent la couleur de l'avatar */
body.kids-mode .kids-cat-card.on {
  border-color: var(--kids-accent, var(--bb-gray-900));
  background: var(--kids-accent-light, #FFFFFF);
}
body.kids-mode .kids-cat-card.on::after {
  background: var(--kids-accent, var(--bb-gray-900));
}

/* Bouton J'aime du swipe : passe à la couleur de l'avatar (au lieu de vert sauge) */
body.kids-mode .kids-swipe-btn-yes {
  background: var(--kids-accent, #6B8E5A);
  border-color: var(--kids-accent, #6B8E5A);
}
body.kids-mode .kids-swipe-btn-yes:hover {
  filter: brightness(.9);
}

/* Compteur de cartes (J'aime / X cartes / catégorie active) :
   accent de la couleur de l'avatar */
body.kids-mode .kids-swipe-counter {
  background: var(--kids-accent-light, #F8F8F8);
  border-color: var(--kids-accent, var(--bb-gray-300));
  color: var(--kids-accent-2, var(--bb-gray-900));
}

/* Filtre catégorie : statut actif prend la couleur de l'avatar */
body.kids-mode .filter-status.active {
  color: var(--kids-accent-2, #555);
}

/*    MODE KIDS — VUE PLEIN ÉCRAN
   Map plein écran + pills flottants (identité + choix parcours).
    */

.kids-view {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #FAFAFA;
  overflow: hidden;
}
body.kids-mode .kids-view { display: block !important; }

/* ── Map plein écran ──────────────────────────────────────────── */
.kids-view-map {
  position: absolute;
  inset: 0;
  background: #F5F5F5;
}
.kids-view-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: #FAFAFA;
}
.kids-pin { background: transparent !important; border: none !important; }

/* ── Toolbar flottante (top, gauche) : pills identité + parcours ── */
.kids-view-toolbar {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1500;
}

/* Pill commun (style cohérent avec le session-pill du mode parent) */
.kids-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: var(--bb-radius-full);
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: #111;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  transition: all .15s ease;
  max-width: 90vw;
}
.kids-view-pill:hover {
  border-color: #BBB;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* Pill identité : blob coloré + nom */
.kids-view-pill-blob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kids-accent-light, #F0F0F0);
  flex-shrink: 0;
}
.kids-view-pill-blob svg { width: 22px; height: 22px; }

/* Pill parcours : icône + label + flèche */
.kids-view-pill-trail {
  padding: 8px 12px 8px 12px;
}
.kids-view-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kids-accent, #2563EB);
  color: #fff;
  flex-shrink: 0;
}
.kids-view-pill-arrow {
  color: #999;
  margin-left: 2px;
  flex-shrink: 0;
}
.kids-view-pill-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Bouton sortie flottant (top-right) : pill noir avec label ── */
.kids-view-exit-floating {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 12px;
  border-radius: var(--bb-radius-full);
  background: #111;
  border: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  z-index: 1500;
  transition: all .15s ease;
}
.kids-view-exit-floating:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ── Bandeau info parcours actif (bas) ───────────────────────── */
.kids-view-trail-info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #111;
  color: #fff;
  border-radius: var(--bb-radius-2xl);
  padding: 14px 14px 14px 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
  z-index: 1500;
  animation: kids-trail-info-pop .25s cubic-bezier(.34, 1.56, .64, 1) both;
}
.kids-view-trail-info.show { display: flex; }
@keyframes kids-trail-info-pop {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.kids-view-trail-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.kids-view-trail-info-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: var(--bb-text-xl);
  color: #fff;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kids-view-trail-info-meta {
  font-size: var(--bb-text-sm);
  color: rgba(255, 255, 255, .7);
}
.kids-view-trail-info-clear {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease;
}
.kids-view-trail-info-clear:hover {
  background: rgba(255, 255, 255, .25);
}

/*    PICKER PARCOURS (overlay plein écran, style child-picker)
    */
.kids-trail-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: #FFFFFF;
  flex-direction: column;
  align-items: center;
  padding: 60px 24px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kids-trail-picker.show { display: flex; }
.kids-trail-picker-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F5F5F5;
  border: none;
  color: #666;
  font-size: var(--bb-text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.kids-trail-picker-close:hover {
  background: #E0E0E0;
  color: #111;
}
.kids-trail-picker-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  color: #111;
  text-align: center;
  margin: 0 0 8px;
}
.kids-trail-picker-sub {
  font-size: var(--bb-text-md);
  color: #666;
  text-align: center;
  margin: 0 0 32px;
}
.kids-trail-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 720px;
}
.kids-trail-picker-card {
  background: #FFFFFF;
  border: 2px solid #ECECEC;
  border-radius: 18px;
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kids-trail-picker-card:hover {
  border-color: var(--kids-accent, #2563EB);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.kids-trail-picker-card-color {
  width: 36px;
  height: 36px;
  border-radius: var(--bb-radius-xl);
  flex-shrink: 0;
}
.kids-trail-picker-card-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--bb-text-xl);
  color: #111;
  line-height: 1.2;
}
.kids-trail-picker-card-meta {
  font-size: var(--bb-text-sm);
  color: #888;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 600px) {
  .kids-view-toolbar { top: 12px; left: 12px; }
  .kids-view-exit-floating { top: 12px; right: 12px; }
  .kids-view-trail-info { left: 12px; right: 12px; bottom: 12px; }
  .kids-trail-picker { padding: 60px 18px 40px; }
  .kids-trail-picker-title { font-size: 24px; }
  .kids-trail-picker-grid { grid-template-columns: 1fr; }
}

/*    POPUP KIDS sur clic d'un pin
    */
.kids-popup-wrapper .leaflet-popup-content-wrapper {
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  padding: 0;
  overflow: hidden;
}
.kids-popup-wrapper .leaflet-popup-content {
  margin: 0;
  padding: 0;
  width: 220px !important;
}
.kids-pop {
  font-family: inherit;
}
.kids-pop-photo {
  width: 100%;
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: #F0F0F0;
  display: block;       /* for <img> */
  object-fit: cover;    /* for <img> */
  object-position: center;
}
.kids-pop-photo-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}
.kids-pop-body {
  padding: 12px 14px 14px;
}
.kids-pop-cat {
  display: inline-block;
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  padding: 3px 9px;
  border-radius: var(--bb-radius-full);
  margin-bottom: 6px;
}
.kids-pop-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  color: #111;
  line-height: 1.2;
  margin-bottom: 10px;
}
.kids-pop-heart {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--bb-radius-xl);
  border: 2px solid #ECECEC;
  background: #FFFFFF;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: #666;
  cursor: pointer;
  transition: all .2s ease;
}
.kids-pop-heart:hover {
  border-color: #E11D48;
  color: #E11D48;
}
.kids-pop-heart.liked {
  border-color: #E11D48;
  color: #E11D48;
  background: #FEF2F4;
  animation: kids-heart-pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes kids-heart-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/*    NAV ÉTAPES (bandeau bas, mode parcours actif)
    */
.kids-trail-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kids-trail-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.kids-trail-nav-btn:hover {
  background: rgba(255,255,255,.25);
}

/*    TOAST KIDS
    */
.kids-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 11000;
  background: #111;
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--bb-radius-full);
  font-family: inherit;
  font-size: var(--bb-text-md);
  font-weight: 700;
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
  opacity: 0;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  white-space: nowrap;
}
.kids-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Animation d'apparition des pins kids */
.kids-pin svg { transition: transform .2s ease; }
.kids-pin:hover svg { transform: scale(1.12); }

/*    BANDEAU INVITE par défaut (mode kids, rien d'actif)
    */

/* Quand le bandeau est en mode "invite" (pas de parcours, pas de like),
   on adoucit l'apparence pour signaler qu'il s'agit d'un encouragement,
   pas d'une info active. */
.kids-view-trail-info.kids-invite {
  background: rgba(17, 17, 17, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kids-view-trail-info.kids-invite .kids-view-trail-info-title {
  font-family: inherit;
  font-size: var(--bb-text-lg);
  font-weight: 600;
}
.kids-view-trail-info.kids-invite .kids-view-trail-info-meta {
  color: rgba(255, 255, 255, .6);
}
/* Le bouton "X" et la nav d'étapes sont cachés en mode invite : il n'y a
   rien à fermer, juste un encouragement. */
.kids-view-trail-info.kids-invite .kids-view-trail-info-clear,
.kids-view-trail-info.kids-invite .kids-trail-nav {
  display: none;
}

/*    POPUPS KIDS — états contextuels (parcours actif)
    */

/* Badge "Étape N" : remplace le bouton J'aime quand le lieu est dans
   le parcours actif. Style sobre pour ne pas concurrencer le bandeau bas. */
.kids-pop-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: #F5F5F5;
  border-radius: var(--bb-radius-xl);
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: #111;
  letter-spacing: .02em;
}

/* Message "verrouillé" : quand l'enfant clique sur un pin hors-parcours
   alors qu'un parcours est actif. Doux et pédagogique, pas frustrant. */
.kids-pop-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  background: #FFF7ED;
  border: 1px dashed #FED7AA;
  border-radius: var(--bb-radius-xl);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: #C2410C;
  line-height: 1.4;
}

/*    POPUP KIDS — description ludique + note Google
    */

/* Description ludique (résumé Claude) */
.kids-pop-desc {
  font-size: var(--bb-text-base);
  color: #333;
  line-height: 1.45;
  margin: 8px 0 4px;
  font-style: italic;
}

/* Note Google : étoiles + chiffre + nombre d'avis */
.kids-pop-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  font-size: var(--bb-text-sm);
  color: #555;
}
.kids-pop-stars {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.kids-pop-rating-num {
  font-weight: 700;
  color: #111;
}
.kids-pop-rating-count {
  color: #999;
}

/*    POPUP KIDS — attribution Google (TOS) + état empty picker
    */

.kids-pop-attribution {
  margin-top: 8px;
  font-size: 9px;
  color: #BBB;
  text-align: right;
  letter-spacing: .03em;
}

/* État vide du picker parcours mode kids (aucun parcours kids-ready) */
.kids-trail-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #888;
  font-size: var(--bb-text-md);
  font-style: italic;
}

/*    KIDS TRAIL PICKER — top tabs (Quartiers / Thématiques)
    */

.kids-trail-tabs {
  display: flex;
  gap: 8px;
  margin: 16px auto 24px;
  padding: 4px;
  background: rgba(0, 0, 0, .04);
  border-radius: var(--bb-radius-full);
  width: fit-content;
}

.kids-trail-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 22px;
  border-radius: var(--bb-radius-full);
  font-size: var(--bb-text-md);
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.kids-trail-tab:hover {
  color: #111;
}

.kids-trail-tab.active {
  background: #111;
  color: #fff;
}

/*    PARENT MODE — Trail tabs (Quartiers / Thématiques)
   3 styles available. To pick one, change the wrapper class in HTML:
     - .trail-tabs.style-underline   (clean text + underline)
     - .trail-tabs.style-text        (minimal, separator dot)
     - .trail-tabs.style-segmented   (subtle segmented, default)
    */

/* Common base. Aligns horizontally with .start-bar, .neighborhood-header, etc.
   which all use 16px lateral spacing. */
.trail-tabs {
  display: flex;
  margin: 12px 16px 14px;
}
.trail-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: #888;
  transition: color .15s ease;
}
.trail-tab:hover {
  color: #111;
}

/* ── Style 1 : underline (le plus discret, façon onglets de docs) ──
   Utilisé pour Quartiers/Thématiques qui sont des SUB-FILTRES dans le mode
   Parcours (pas une navigation de page). Style plus subtil que .mode-toggle :
   pas de border-bottom forte, just un highlight discret sur l'actif. */
.trail-tabs.style-underline {
  gap: 18px;
  padding: 0 2px;
}
.trail-tabs.style-underline .trail-tab {
  padding: 4px 0;
  position: relative;
  text-transform: none;
  font-size: var(--bb-text-xs);
  font-weight: 500;
  color: #999;
  letter-spacing: 0;
  transition: color .12s;
}
.trail-tabs.style-underline .trail-tab:hover { color: #555; }
.trail-tabs.style-underline .trail-tab.active {
  color: #111;
  font-weight: 600;
}
.trail-tabs.style-underline .trail-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: #111;
}

/* ── Style 2 : texte simple avec séparateur (très minimal) ── */
.trail-tabs.style-text {
  gap: 10px;
  align-items: center;
  font-size: var(--bb-text-sm);
}
.trail-tabs.style-text .trail-tab {
  padding: 4px 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--bb-text-sm);
}
.trail-tabs.style-text .trail-tab.active {
  color: #111;
}
.trail-tabs.style-text .trail-tab:not(:last-child)::after {
  content: '·';
  color: #BBB;
  margin-left: 10px;
  font-weight: 400;
}

/* ── Style 3 : segmented control (clair, tactile) ── */
.trail-tabs.style-segmented {
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, .05);
  border-radius: var(--bb-radius-md);
}
.trail-tabs.style-segmented .trail-tab {
  flex: 1;
  padding: 8px 14px;
  border-radius: var(--bb-radius-sm);
  color: #555;
}
.trail-tabs.style-segmented .trail-tab.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/*    KIDS MODE — playful animations
   Confined to body.kids-mode, so parent mode stays minimalist.
    */

/* Bouncy popup entrance */
@keyframes kidsPopBounce {
  0%   { transform: scale(.7) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.05) translateY(-2px); opacity: 1; }
  80%  { transform: scale(.97); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

body.kids-mode .leaflet-popup-content-wrapper {
  animation: kidsPopBounce .35s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: bottom center;
}

/* Pulse on important buttons (Adventure, Trail picker entry) */
@keyframes kidsPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
  50%      { transform: scale(1.04); box-shadow: 0 6px 24px rgba(225,29,72,.25); }
}

body.kids-mode .kids-adventure-btn,
body.kids-mode .kids-view-pill-trail {
  animation: kidsPulse 2.4s ease-in-out infinite;
}

body.kids-mode .kids-adventure-btn:hover,
body.kids-mode .kids-view-pill-trail:hover {
  animation-play-state: paused;
}

/* Bouncy hover on map pins (kids only) */
@keyframes kidsPinWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-5deg) scale(1.08); }
  75%      { transform: rotate(5deg) scale(1.08); }
}

body.kids-mode .leaflet-marker-icon:hover .kids-pin-icon {
  animation: kidsPinWiggle .4s ease-in-out;
}

/* Heart button bounce when liked */
@keyframes kidsHeartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

body.kids-mode .kids-pop-heart.liked svg {
  animation: kidsHeartPop .45s cubic-bezier(.36, 1.56, .64, 1);
}

/* Confetti container — full-screen overlay, ignores pointer events */
.kids-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 11000;  /* above kids view (10000) */
  overflow: hidden;
}

.kids-confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes kidsConfettiFall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--dr, 720deg));
    opacity: 0.7;
  }
}

/*    KIDS MODE — playful makeover
   Goal: look unmistakably "kids" vs the minimalist parent mode.
   Levers: rounder typography, vivid colors on pills, bigger expressive pins.
   Confined to body.kids-mode so parent mode stays minimalist.
    */

/* Fredoka font is loaded via <link> in templates/core/explorer.html <head>
   (CSS @import doesn't always play well with WhiteNoise compression). */

/* Round, friendly typography on every kids-only text */
body.kids-mode,
body.kids-mode .kids-view,
body.kids-mode .kids-onboarding,
body.kids-mode .kids-trail-picker,
body.kids-mode .kids-pop {
  font-family: 'Fredoka', 'Quicksand', 'Nunito', sans-serif;
}

/* Bigger, rounder titles */
body.kids-mode .kids-onboarding h1,
body.kids-mode .kids-trail-picker-title,
body.kids-mode .kids-cat-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Pills in toolbar: pastel backgrounds with colored text instead of black/white */
body.kids-mode .kids-view-pill-identity {
  background: #F5F5F5;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(225, 29, 72, .18);
  color: #9F1239;
  font-weight: 600;
}

body.kids-mode .kids-view-pill-trail {
  background: #F5F5F5;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .22);
  color: #92400E;
  font-weight: 600;
}

/* Generous border-radius across kids UI for that soft/rounded feel */
body.kids-mode .kids-view-pill-identity,
body.kids-mode .kids-view-pill-trail,
body.kids-mode .kids-view-trail-info,
body.kids-mode .kids-trail-picker-card {
  border-radius: 22px;
}

body.kids-mode .kids-pop {
  border-radius: 20px;
  overflow: hidden;
}

body.kids-mode .kids-pop-photo {
  border-radius: 20px 20px 0 0;
}

/* Trail picker cards: pastel hover, more delight */
body.kids-mode .kids-trail-picker-card {
  background: #fff;
  border: 2px solid transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.kids-mode .kids-trail-picker-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--theme-color, #F59E0B);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

/* Bigger pins on the kids map (idle wiggle handled by JS animation prop) */
@keyframes kidsPinIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(-1.5deg); }
  75%      { transform: translateY(-1px) rotate(1.5deg); }
}

body.kids-mode .kids-pin-icon {
  animation: kidsPinIdle 3.6s ease-in-out infinite;
  /* Stagger via inline animation-delay set in JS to avoid all pins
     wobbling in sync (would be visually noisy). */
}

/* Pop name in popup: rounder, joyful */
body.kids-mode .kids-pop-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--bb-text-xl);
}

body.kids-mode .kids-pop-cat {
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--bb-radius-full);
}

/* Heart button: bigger, more inviting */
body.kids-mode .kids-pop-heart {
  border-radius: var(--bb-radius-full);
  font-weight: 600;
  padding: 10px 18px;
}

body.kids-mode .kids-pop-heart.liked {
  background: #F5F5F5;
  border-color: #FB7185;
}

/* Tabs in kids picker: more padding, playful */
body.kids-mode .kids-trail-tab {
  font-weight: 600;
}

body.kids-mode .kids-trail-tab.active {
  background: linear-gradient(135deg, #111 0%, #2C2C2C 100%);
}

/* Section title in kids pick: extra round */
body.kids-mode .kids-trail-picker-sub {
  color: #888;
}

/*    KIDS MODE — Swipe deck (entrance screen)
   Full-screen overlay above the kids map. Kids browse places one by one
   and tap ❤️ to add to their balade, ✕ to skip.
    */

.kids-deck {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: linear-gradient(160deg, #FEF3C7 0%, #FFE4F0 50%, #FCE7F3 100%);
  display: none;
  flex-direction: column;
  padding: 16px;
}

.kids-deck.show {
  display: flex;
}

.kids-deck-header {
  text-align: center;
  padding: 16px 0 8px;
  flex-shrink: 0;
}

.kids-deck-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #111;
  margin: 0 0 4px;
}

.kids-deck-sub {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-md);
  color: #666;
  margin: 0;
}

/* Cards stack: relative-positioned cards stacked on top of each other.
   Top card is interactive, the next ~2 are visible behind for depth. */
.kids-deck-cards {
  flex: 1;
  position: relative;
  margin: 16px 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kids-deck-card {
  /* Card has a fixed max size centered in the area, not stretched */
  position: absolute;
  width: min(360px, 90%);
  max-height: min(560px, 92%);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: center bottom;
  transition: transform .35s cubic-bezier(.36, 1.56, .64, 1), opacity .25s ease;
  will-change: transform, opacity;
}

/* Stacked cards behind the top one — slightly scaled down */
.kids-deck-card.behind-1 {
  transform: scale(.96) translateY(8px);
  opacity: .8;
  pointer-events: none;
  z-index: 2;
}

.kids-deck-card.behind-2 {
  transform: scale(.92) translateY(16px);
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}

.kids-deck-card.top {
  z-index: 3;
}

/* Swipe-out animations */
.kids-deck-card.swiped-left {
  transform: translateX(-130%) rotate(-15deg);
  opacity: 0;
}

.kids-deck-card.swiped-right {
  transform: translateX(130%) rotate(15deg);
  opacity: 0;
}

/* Photo zone has a clean 4:3 aspect ratio so Google photos
   (typically landscape) display naturally without stretching. */
.kids-deck-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #F0F0F0;
  flex-shrink: 0;
  overflow: hidden;
}

.kids-deck-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.kids-deck-card-photo-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  background-color: var(--photo-bg, #FEF3C7);
}

.kids-deck-card-body {
  padding: 18px 22px 22px;
  flex-shrink: 0;
  text-align: center;
}

.kids-deck-card-cat {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--bb-radius-full);
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.kids-deck-card-name {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-xl);
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  /* Allow up to 2 lines, ellipsis if longer (rare). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Tighter letter spacing for long names */
  letter-spacing: -.005em;
  /* Hyphens to break long words gracefully if needed */
  overflow-wrap: anywhere;
}

/* Action buttons (skip / like) — big and tappable */
.kids-deck-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 8px 0;
  flex-shrink: 0;
}

.kids-deck-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.kids-deck-btn:active {
  transform: scale(.92);
}

.kids-deck-btn-skip {
  background: #fff;
  color: #888;
}

.kids-deck-btn-skip:hover {
  color: #E11D48;
}

.kids-deck-btn-like {
  background: #F5F5F5;
  color: #fff;
}

.kids-deck-btn-like:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(225, 29, 72, .35);
}

/* Footer: counter + "Voir ma balade" button (visible after ≥1 like) */
.kids-deck-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px 8px;
  flex-shrink: 0;
}

.kids-deck-counter {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-md);
  font-weight: 500;
  color: #888;
}

.kids-deck-show-map {
  display: none;  /* shown via JS once first like happens */
  align-items: center;
  gap: 6px;
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--bb-radius-full);
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease;
}

.kids-deck-show-map.visible {
  display: flex;
}

.kids-deck-show-map:hover {
  transform: scale(1.04);
}

/* Empty state */
.kids-deck-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  color: #666;
}

/* Floating "Voir le swipe" button on the kids map. Always visible while
   in kids mode. The swipe deck is on top with z-index 10500 so it covers
   this button when open — no need for a CSS toggle. */
.kids-view-discover-btn {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: #F5F5F5;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 22px;
  border-radius: var(--bb-radius-full);
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-md);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(225, 29, 72, .3);
  transition: transform .15s ease;
  animation: kidsDiscoverPulse 2.4s ease-in-out infinite;
}

/* Only shown in kids mode */
body:not(.kids-mode) .kids-view-discover-btn {
  display: none !important;
}

.kids-view-discover-btn:hover {
  transform: translateX(-50%) scale(1.05);
}

@keyframes kidsDiscoverPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(225, 29, 72, .3); }
  50%      { box-shadow: 0 8px 28px rgba(225, 29, 72, .55); }
}

/*    KIDS DECK — improved visual polish
   - Top bar with close button and live likes counter
   - Softer background, subtle decorative shapes
   - Pulse animation when likes count increments
    */

.kids-deck-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px 0;
  flex-shrink: 0;
}

.kids-deck-close {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, .85);
  width: 40px;
  height: 40px;
  border-radius: var(--bb-radius-full);
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: transform .15s ease, background .15s ease;
}

.kids-deck-close:hover {
  background: #fff;
  transform: scale(1.05);
}

.kids-deck-liked-count {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .85);
  padding: 8px 14px;
  border-radius: var(--bb-radius-full);
  color: #999;
  font-size: var(--bb-text-md);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: color .2s ease;
}

.kids-deck-liked-count.has-likes {
  color: #E11D48;
}

.kids-deck-liked-count svg {
  transition: transform .15s ease;
}

@keyframes kidsLikedPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.kids-deck-liked-count.kids-deck-liked-pulse {
  animation: kidsLikedPulse .35s cubic-bezier(.36, 1.56, .64, 1);
}

/* Decorative dots in the background, gentle and slow */
.kids-deck::before,
.kids-deck::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .55;
  z-index: 0;
}

.kids-deck::before {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 209, 102, .35) 0%, transparent 70%);
  top: -40px;
  right: -60px;
}

.kids-deck::after {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(236, 72, 153, .22) 0%, transparent 70%);
  bottom: -80px;
  left: -80px;
}

/* Make sure deck content sits above the decorative blobs */
.kids-deck > * {
  position: relative;
  z-index: 1;
}

/*    KIDS DECK — category filter pills
   Pills row between header and stack. Active pill = filled background
   in category color. Inactive = outline only.
    */

.kids-deck-filters {
  display: flex;
  gap: 8px;
  padding: 6px 4px 14px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;       /* hide on firefox */
  -ms-overflow-style: none;
}

.kids-deck-filters::-webkit-scrollbar {
  display: none;               /* hide on webkit */
}

.kids-deck-filter-pill {
  appearance: none;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--bb-radius-full);
  border: 1.5px solid var(--cat-color, #999);
  background: rgba(255, 255, 255, .85);
  color: var(--cat-color, #333);
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
}

.kids-deck-filter-pill:hover {
  transform: translateY(-1px);
}

.kids-deck-filter-pill.active {
  background: var(--cat-color, #111);
  color: #fff;
  border-color: var(--cat-color, #111);
}

/* The "Tout" pill has no --cat-color, default to neutral dark */
.kids-deck-filter-pill:first-child {
  --cat-color: #111;
}

/*    PARENT MODE — Theme trail card
   When a trail has no neighborhood (= theme), it's rendered as a
   standalone card with a big serif title (no header above).
    */

.trail-row-theme .trail-theme-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: var(--bb-text-md);
  line-height: 1.3;
  color: #111;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.trail-row-theme .trail-inner {
  padding: 14px 16px;
}

/*    KIDS DECK — themed by active child's blob colors
   Uses --kids-accent (main color), --kids-accent-2 (eyes), --kids-accent-light
   so the deck's gradient and accents pick up the child's identity colors
   instead of being hardcoded yellow/pink.
    */

/* Background of the deck — soft gradient based on the child's light + main colors */
body.kids-mode .kids-deck {
  background: linear-gradient(
    160deg,
    var(--kids-accent-light, #FEF3C7) 0%,
    color-mix(in srgb, var(--kids-accent, #FB7185) 12%, white) 50%,
    color-mix(in srgb, var(--kids-accent, #FB7185) 22%, white) 100%
  );
}

/* Decorative blobs in the deck use the accent colors */
body.kids-mode .kids-deck::before {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--kids-accent-light, #FFD166) 65%, transparent) 0%,
    transparent 70%
  );
}

body.kids-mode .kids-deck::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--kids-accent, #EC4899) 35%, transparent) 0%,
    transparent 70%
  );
}

/* Liked count badge — turns to child's color when has likes */
body.kids-mode .kids-deck-liked-count.has-likes {
  color: var(--kids-accent-2, #E11D48);
}

/* Discover (Voir le swipe) floating button uses child colors too.
   Important on positioning/display because something in the cascade was
   suppressing it before — make this rule win unambiguously. */
body.kids-mode .kids-view-discover-btn {
  display: flex !important;
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9000 !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kids-accent, #FB7185) 80%, white) 0%,
    var(--kids-accent, #E11D48) 100%
  );
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kids-accent, #E11D48) 40%, transparent);
}

@keyframes kidsDiscoverPulseChildColor {
  0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--kids-accent, #E11D48) 30%, transparent); }
  50%      { box-shadow: 0 8px 28px color-mix(in srgb, var(--kids-accent, #E11D48) 60%, transparent); }
}

body.kids-mode .kids-view-discover-btn {
  animation: kidsDiscoverPulseChildColor 2.4s ease-in-out infinite;
}

/* Active filter pills use child color for the "Tout" pill */
body.kids-mode .kids-deck-filter-pill:first-child {
  --cat-color: var(--kids-accent, #111);
}

/* Top topbar pill (identité) inherits child colors */
body.kids-mode .kids-view-pill-identity {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kids-accent-light, #FFE4F0) 60%, white) 0%,
    color-mix(in srgb, var(--kids-accent, #FB7185) 30%, white) 100%
  );
  color: color-mix(in srgb, var(--kids-accent-2, #9F1239) 80%, black);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--kids-accent, #FB7185) 25%, transparent);
}


/*    KIDS TOPBAR — unified navigation header
   3 zones: [Sortir] [Découvrir | Ma balade] [Avatar]
   Sits above everything in kids mode. Replaces the old fragmented
   floating buttons (kids-view-toolbar, kids-view-exit-floating, etc.)
    */

body.kids-mode .kids-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11000;  /* above the swipe deck (10500) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-family: 'Fredoka', sans-serif;
}

body:not(.kids-mode) .kids-topbar {
  display: none;
}

/* Sortir button (left) */
.kids-topbar-exit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--bb-radius-full);
  border: 1.5px solid rgba(0, 0, 0, .1);
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.kids-topbar-exit:hover {
  background: #F5F5F5;
  color: #111;
}

/* Center tabs */
.kids-topbar-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, .05);
  border-radius: var(--bb-radius-full);
}

.kids-topbar-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #777;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.kids-topbar-tab:hover {
  color: #111;
}

.kids-topbar-tab.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.kids-topbar-tab svg {
  flex-shrink: 0;
}

/* Counter badge in "Ma balade" tab */
.kids-topbar-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--bb-radius-full);
  background: var(--kids-accent, #E11D48);
  color: #fff;
  font-size: var(--bb-text-xs);
  font-weight: 700;
  margin-left: 2px;
}

@keyframes kidsTopbarCountPulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.25); }
}

.kids-topbar-tab-count-pulse {
  animation: kidsTopbarCountPulse .35s cubic-bezier(.36, 1.56, .64, 1);
}

/* Right: avatar pill */
.kids-topbar-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid rgba(0, 0, 0, .1);
  background: #fff;
  border-radius: var(--bb-radius-full);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  color: #111;
  transition: background .15s ease;
}

.kids-topbar-avatar:hover {
  background: #F5F5F5;
}

.kids-topbar-avatar-blob {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FEF3C7;
  align-items: center;
  justify-content: center;
}

.kids-topbar-avatar-blob svg {
  width: 22px;
  height: 22px;
}

/* Mobile: shrink labels, keep icons */
@media (max-width: 600px) {
  body.kids-mode .kids-topbar {
    padding: 8px 10px;
  }
  .kids-topbar-exit span,
  .kids-topbar-avatar-name {
    display: none;
  }
  .kids-topbar-exit {
    padding: 8px;
  }
  .kids-topbar-avatar {
    padding: 6px;
  }
  .kids-topbar-tab {
    padding: 8px 12px;
    font-size: var(--bb-text-sm);
  }
}

/* ── Adjust deck and map to leave room for the topbar ──────────────────── */

body.kids-mode .kids-view {
  padding-top: 60px;  /* topbar height */
}

body.kids-mode .kids-deck {
  top: 60px;          /* don't overlap topbar */
  bottom: 0;
  left: 0;
  right: 0;
}

/* Hide old floating UI elements that are replaced by the topbar */
body.kids-mode .kids-view-toolbar,
body.kids-mode .kids-view-exit-floating,
body.kids-mode .kids-deck-topbar,
body.kids-mode .kids-deck-show-map,
body.kids-mode .kids-view-discover-btn {
  display: none !important;
}

/* Trail picker must sit above the topbar so its close button is reachable */
body.kids-mode .kids-trail-picker {
  z-index: 11500 !important;
}

/*    Kids map FAB — opens the pre-made trails picker.
   Visible only when on the map view of kids mode (not on the swipe deck).
    */

.kids-trails-fab {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: var(--bb-radius-full);
  background: #111;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  transition: transform .15s ease, box-shadow .15s ease;
}

.kids-trails-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

/* Only shown in kids mode and only when the swipe deck is closed */
body:not(.kids-mode) .kids-trails-fab {
  display: none !important;
}

/* Hide on the swipe view (deck open) */
.kids-deck.show ~ .kids-trails-fab {
  display: none;
}

/* Mobile: shorten label */
@media (max-width: 600px) {
  .kids-trails-fab {
    padding: 12px;
    bottom: 20px;
    right: 14px;
  }
  .kids-trails-fab span {
    display: none;
  }
}

/*    KIDS — Bottom sheet (Ma balade : liste détaillée des likes)
   Visible only on the map view of kids mode, slides up from the bottom.
    */

.kids-balade-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
  display: none;
  flex-direction: column;
  max-height: 50vh;
  font-family: 'Fredoka', sans-serif;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

body.kids-mode .kids-balade-sheet.show {
  display: flex;
  transform: translateY(0);
}

/* Hide while swipe deck is open */
.kids-deck.show ~ .kids-balade-sheet {
  display: none !important;
}

/* Hide entirely outside kids mode */
body:not(.kids-mode) .kids-balade-sheet {
  display: none !important;
}

.kids-balade-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .15);
  margin: 8px auto;
  flex-shrink: 0;
}

.kids-balade-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.kids-balade-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

.kids-balade-sheet-clear {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--bb-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
  transition: background .15s ease, color .15s ease;
}

.kids-balade-sheet-clear:hover {
  background: rgba(0, 0, 0, .06);
  color: #E11D48;
}

.kids-balade-sheet-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

/* Single liked-place row */
.kids-balade-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  background: #FAFAFA;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.kids-balade-item:hover {
  background: #F0F0F0;
  transform: translateY(-1px);
}

.kids-balade-item-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--bb-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--bb-text-sm);
  font-weight: 700;
}

.kids-balade-item-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--bb-radius-xl);
  object-fit: cover;
  background: #F0F0F0;
}

.kids-balade-item-photo-emoji {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--bb-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.kids-balade-item.no-photo .kids-balade-item-photo {
  display: none;
}

.kids-balade-item-text {
  flex: 1;
  min-width: 0;
}

.kids-balade-item-cat {
  font-size: var(--bb-text-xs);
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.kids-balade-item-name {
  font-size: var(--bb-text-lg);
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kids-balade-item-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--bb-radius-full);
  background: rgba(0, 0, 0, .05);
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}

.kids-balade-item-remove:hover {
  background: rgba(225, 29, 72, .15);
  color: #E11D48;
}

/* Empty state */
.kids-balade-sheet-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px 32px;
  gap: 8px;
}

.kids-balade-sheet-empty-emoji {
  font-size: 40px;
}

.kids-balade-sheet-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.kids-balade-sheet-empty-sub {
  font-size: var(--bb-text-base);
  color: #888;
  max-width: 260px;
  line-height: 1.4;
}

.kids-balade-sheet-empty-cta {
  margin-top: 8px;
  appearance: none;
  border: none;
  padding: 10px 18px;
  border-radius: var(--bb-radius-full);
  background: var(--kids-accent, #E11D48);
  color: #fff;
  font-family: inherit;
  font-size: var(--bb-text-base);
  font-weight: 600;
  cursor: pointer;
}

/* CTA row at the bottom */
.kids-balade-sheet-cta-row {
  display: none;
  padding: 10px 14px 16px;
  flex-shrink: 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.kids-balade-sheet-go {
  flex: 1;
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 14px;
  background: #F5F5F5;
  color: #fff;
  font-family: inherit;
  font-size: var(--bb-text-lg);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(225, 29, 72, .3);
  transition: transform .15s ease;
}

.kids-balade-sheet-go:hover {
  transform: translateY(-1px);
}

/* Move FAB up so it doesn't overlap the bottom sheet when sheet is visible */
.kids-balade-sheet.show ~ .kids-trails-fab,
body.kids-mode .kids-balade-sheet.show ~ .kids-trails-fab {
  bottom: calc(50vh + 16px);
}


/*    GPS / GÉOLOCALISATION
   - Bouton FAB rond bottom-right de la map
   - 3 états : inactif / searching (animation pulse) / active / following
   - Marker bleu pulsant pour la position de l'utilisateur
    */
.gps-btn {
  position: absolute;
  bottom: var(--bb-space-6); right: var(--bb-space-4);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bb-gray-200);
  box-shadow: var(--bb-shadow-lg);
  cursor: pointer;
  z-index: 800;
  color: var(--bb-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base), color var(--bb-ease-base), box-shadow var(--bb-ease-base), transform var(--bb-ease-fast);
}
.gps-btn:hover {
  background: var(--bb-gray-50);
  border-color: var(--bb-gray-300);
  color: var(--bb-gray-900);
  box-shadow: var(--bb-shadow-xl);
}
.gps-btn:active {
  transform: scale(0.92);
}

/* Active = GPS allumé mais user a déplacé la map (follow off) */
.gps-btn.active { color: #2563EB; border-color: #2563EB; }

/* Following = GPS allumé + suit la position. Bouton rempli. */
.gps-btn.following {
  background: #2563EB; color: #fff; border-color: #2563EB;
  box-shadow: 0 2px 12px rgba(37, 99, 235, .35);
}

/* Searching = en attente du premier fix. Pulse l'icône. */
.gps-btn.searching { color: #2563EB; }
.gps-btn.searching svg { animation: gpsSearching 1.2s ease-in-out infinite; }
@keyframes gpsSearching {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}

/* Marker GPS = point bleu avec halo qui pulse */
.gps-marker-icon { background: none !important; border: none !important; }
.gps-pulse {
  position: relative;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.gps-pulse::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.35);
  animation: gpsPulse 2s ease-out infinite;
}
.gps-dot {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2563EB;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
@keyframes gpsPulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Mobile : .gps-btn positionné dans le @media (max-width: 768px) du
   bottom-sheet plus haut (L~1325) — ne pas re-déclarer ici. */

/*    RESTAURATION — classes utilisées par les JS mais sans CSS depuis le rename
   beboun.css → base.css. Ajoutées en bloc à la fin pour éviter conflits avec
   les définitions existantes (ce bloc ne redéfinit aucune classe en double).
    */

/* ─── .map-card-btn ────────────────────────────────────────────────────────
   FAB bottom-right pour scanner une carte manuellement. Référencé dans
   templates/core/explorer.html. */
.map-card-btn {
  position: absolute;
  bottom: 76px;
  right: var(--bb-space-4);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bb-gray-200);
  box-shadow: var(--bb-shadow-lg);
  cursor: pointer;
  z-index: 800;
  color: var(--bb-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base), color var(--bb-ease-base), box-shadow var(--bb-ease-base), transform var(--bb-ease-fast);
}
.map-card-btn:hover {
  background: var(--bb-gray-50);
  border-color: var(--bb-gray-300);
  color: var(--bb-gray-900);
  box-shadow: var(--bb-shadow-xl);
}
.map-card-btn:active {
  transform: scale(0.92);
}
.map-card-btn svg { width: 20px; height: 20px; }

/* ─── .map-actions-row + .copy-to-draft-btn ──────────────────────────────
   Wrapper flex qui contient #integrate-btn + #copy-to-draft-btn quand les
   deux coexistent (cf. explorer-from-trails.js). */
.map-actions-row {
  position: absolute;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 650;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.map-actions-row > * { pointer-events: auto; }
/* Quand #integrate-btn est dans la row, on lui retire son positionnement
   absolu (le wrapper prend la position) sans casser son comportement standalone. */
.map-actions-row .integrate-btn {
  position: static;
  transform: none;
  bottom: auto; left: auto;
  animation: none;
}
.map-actions-row .integrate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.copy-to-draft-btn {
  background: #fff;
  color: #111;
  border: 1.5px solid #111;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: background .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
  animation: copyDraftAppear .25s ease-out;
}
.copy-to-draft-btn:hover {
  background: #111;
  color: #fff;
  transform: translateY(-1px);
}
@keyframes copyDraftAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── .copy-trails-banner ────────────────────────────────────────────────
   Bandeau noir top de #list-trails quand au moins 1 parcours est sélectionné
   (cf. explorer-from-trails.js — déprécié au profit de .map-actions-row mais
   le JS le clean au render donc style nécessaire au cas où). */
.copy-trails-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin: var(--bb-space-2) var(--bb-space-3) var(--bb-space-3);
  background: var(--bb-gray-900);
  color: #fff;
  border-radius: var(--bb-radius-md);
  font-size: var(--bb-text-sm);
  font-weight: 600;
}
.copy-trails-count { flex-shrink: 0; }
.copy-trails-btn {
  background: #fff;
  color: var(--bb-gray-900);
  border: none;
  padding: 6px var(--bb-space-3);
  border-radius: var(--bb-radius-sm);
  font-family: inherit;
  font-size: var(--bb-text-sm); font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bb-ease-base);
}
.copy-trails-btn:hover { background: var(--bb-gray-100); }

/* ─── .place-panel-error + .place-panel-retry-btn ───────────────────────
   États d'erreur du place-panel (timeout réseau, lieu introuvable) utilisés
   par openPlacePanel() dans explorer.js pour les fetch fails. */
.place-panel-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #555;
  font-size: 14px;
}
.place-panel-error-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.place-panel-retry-btn {
  margin-top: 14px;
  background: #111;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.place-panel-retry-btn:hover { background: #000; }

/* ─── .draft-cta-primary + .draft-cta-icon + .draft-cta-dropdown ─────────
   Actions de la draft card (cf. explorer-from-trails.js) :
   1 action principale + bouton Maps + menu dropdown. */
.draft-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: nowrap;
}
.draft-cta-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-cta-primary:hover { background: #000; }
.draft-cta-primary:active { transform: scale(.98); }
.draft-cta-primary--create { background: #16A34A; }
.draft-cta-primary--create:hover { background: #15803D; }
.draft-cta-primary--login { background: #555; }
.draft-cta-primary--login:hover { background: #333; }
.draft-cta-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 8px;
  color: #333;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  padding: 0;
}
.draft-cta-icon:hover { background: #F5F5F5; border-color: #BBB; }
.draft-cta-icon:active { background: #EEE; }
.draft-cta-menu {
  position: relative;
  flex-shrink: 0;
}
.draft-cta-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 600;
}
.draft-cta-menu.open .draft-cta-dropdown { display: flex; }
.draft-cta-dropdown-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s ease;
  white-space: nowrap;
}
.draft-cta-dropdown-item:hover { background: #F5F5F5; }
.draft-cta-dropdown-item:active { background: #E5E5E5; }

/* ════════════════════════════════════════════════════════════════════════════
   .mode-toggle-row + .mobile-filter-btn — wrapper + bouton "Rechercher"
   créés dynamiquement par explorer-bottom-sheet.js sur mobile.

   Structure HTML générée par le JS :
     <div class="mode-toggle-row">
       <div class="mode-toggle">
         <button class="mode-btn on">Parcours</button>
         <button class="mode-btn">Personnaliser</button>
       </div>
       <button id="mobile-filter-btn" class="mobile-filter-btn">
         <svg>...</svg><span>Rechercher</span>
       </button>
     </div>
   Le clic sur le bouton Rechercher fait :
     - toggle classe .filters-open sur .ex-side
     - toggle classe .active sur le bouton lui-même
     - passe le sheet en mode half si on était en peek
   ════════════════════════════════════════════════════════════════════════════ */

.mode-toggle-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 12px 16px;
  flex-shrink: 0;
}
/* Quand le .mode-toggle est dans la row, on retire sa margin externe (la row
   gère le margin) et on lui donne flex: 1 pour qu'il prenne la place dispo. */
.mode-toggle-row .mode-toggle {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Bouton Rechercher : même look général que le .mode-toggle (pill crème),
   passe en pill noir quand actif (panel ouvert). Hauteur alignée sur la
   .mode-toggle entière (pas sur un .mode-btn interne) : padding plus généreux
   pour compenser le padding 3px du wrapper toggle. */
.mobile-filter-btn {
  /* Devenu redondant avec le dropdown .filter-menu (⋯) qui gère search +
     start individuellement. On garde le node pour pas casser le JS qui le
     référence, mais on le cache visuellement. */
  display: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: #F5F5F5;
  color: #555;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-filter-btn:hover { color: #111; }
.mobile-filter-btn.active {
  background: #111;
  color: #fff;
}
.mobile-filter-btn svg { flex-shrink: 0; }

/* Search-bar et start-bar : toujours visibles. Menu ⋯ pour les cacher
   individuellement a été retiré (inutile maintenant que les inputs sont
   compacts). En mode places, la start-bar reste masquée (pas de sens). */
.ex-side .search-bar { display: block; }
.ex-side.mode-trails .start-bar { display: flex; }
.ex-side.mode-places .start-bar { display: none; }

/* .hide-search et .hide-start : classes legacy retirées, plus appliquées. */

/* .filter-menu : retiré. Le menu ⋯ qui permettait de cacher les inputs
   n'est plus utile maintenant que la barre de recherche et le point de départ
   sont compacts et toujours visibles. */

/* ════════════════════════════════════════════════════════════════════════════
   .trail-row--draft + .trail-card-actions + .trail-card-info
   Classes générées par renderTrailsList() dans explorer.js. Le rename
   beboun.css → base.css les a perdues.
   ════════════════════════════════════════════════════════════════════════════ */

/* La row spéciale "Mon brouillon" (avant la liste des parcours sauvegardés).
   Hérite de .trail-row mais avec un look distinctif :
   - barre verticale noire à gauche (la couleur du brouillon est toujours #111)
   - étiquette "Brouillon" visuelle implicite via le titre
   - state .draft-hidden : opacité réduite quand l'utilisateur l'a masquée */
.trail-row--draft {
  position: relative;
}
.trail-row--draft.draft-hidden {
  opacity: .55;
}
.trail-row--draft.draft-hidden .trail-title::after {
  content: ' · masqué';
  color: #999;
  font-weight: 400;
  font-size: 11px;
}

/* .trail-card-actions : wrapper flex des actions à droite de chaque trail-row.
   En flow normal (sous les tags), aligné à droite. Plus en absolute top-right
   pour ne pas chevaucher le bouton "Modifier" admin (qui est inline dans
   .trail-title avec float: right). */
.trail-card-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

/* .trail-card-info : bouton icône rond (i = info, ou maps = open in Google).
   Sobre, transparent au repos, cerclé au hover. */
.trail-card-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #555;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.trail-card-info:hover {
  color: #111;
  border-color: #111;
  background: #fff;
}
.trail-card-info svg { display: block; }

/* Lien "fiche" (chevron-right) : pointe vers la page detail. Style icon button
   cohérent avec trail-card-info (Google Maps). Aligné à droite avec les autres
   actions de la card (le container .trail-card-actions est en flex-end). */
.trail-card-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #555;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.trail-card-detail-link:hover {
  color: #111;
  border-color: #111;
  background: #fff;
}
.trail-card-detail-link svg { display: block; }

/* Sur une trail-row active, les actions restent visibles (le .active background
   ne doit pas les rendre invisibles). On force le fond blanc pour qu'elles
   restent lisibles même quand la row a un theme-color foncé. */
.trail-row.active .trail-card-info {
  background: #fff;
  border-color: rgba(0,0,0,.1);
}

/* ════════════════════════════════════════════════════════════════════════════
   .context-strip — bande contextuelle dans le sheet peek (110px).
   Remplace le mode-toggle quand il y a un état pertinent à afficher :
   - 2+ lieux sélectionnés (building) → "X lieux sélectionnés · Y km" + CTA Créer
   - Parcours actif (parcours)        → "Nom · N arrêts · X m" + chevron
   - État vide                         → strip vide, mode-toggle visible
   Injecté par explorer-bottom-sheet.js avant .mode-toggle-row.
   Classes perdues lors du rename beboun.css → base.css.
   ════════════════════════════════════════════════════════════════════════════ */

.context-strip {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 8px 12px;
  padding: 8px 10px;
  background: #F5F5F5;
  border-radius: 10px;
  flex-shrink: 0;
  min-height: 44px;
  box-sizing: border-box;
}
/* Visible uniquement quand un état est actif (building ou parcours). */
.context-strip.active {
  display: flex;
}
/* Quand le strip est visible, on cache le mode-toggle-row qui contient
   Parcours/Personnaliser/Rechercher : un seul des deux à la fois en haut
   du sheet pour éviter le bruit visuel. */
.ex-side:has(.context-strip.active) .mode-toggle-row {
  display: none;
}

.cs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
}
.cs-icon svg { display: block; }

.cs-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Variante inline : titre + séparateur + meta sur une ligne, ellipsis.
   !important sur flex-direction car .cs-text est redéfini plus bas dans
   le fichier avec flex-direction: column (duplicate historique). */
.cs-text.cs-text-inline {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 0 !important;
  overflow: hidden;
}
.cs-text.cs-text-inline > .cs-title,
.cs-text.cs-text-inline > .cs-subtitle {
  flex-shrink: 1;
  min-width: 0;
}
.cs-meta-sep {
  flex-shrink: 0;
  color: #BBB;
  font-size: 11px;
  font-weight: 400;
}
.cs-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-subtitle {
  font-size: 11px;
  color: #777;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA principal : pill noir compact (style pass minimaliste) */
.cs-cta {
  flex-shrink: 0;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.cs-cta:hover { background: #000; }
.cs-cta:active { transform: scale(.97); }

/* Variante ghost : bouton transparent avec icône (chevron expand) */
.cs-cta-ghost {
  background: transparent;
  color: #555;
  padding: 4px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-cta-ghost:hover { background: rgba(0,0,0,.05); color: #111; }
.cs-cta-ghost svg { display: block; }

/* Variantes visuelles selon l'état */
.context-strip.building .cs-icon {
  background: #FFF7E6;
  color: #B57700;
}
.context-strip.parcours .cs-icon {
  background: #E8F5E9;
  color: #2E7D32;
}

/* ════════════════════════════════════════════════════════════════════════════
   .context-strip — bandeau contextuel injecté dans le peek du sheet sur mobile
   par setupContextStrip() de explorer-bottom-sheet.js.

   États (className) :
   - 'context-strip'                  → vide (mode normal, mode-toggle visible)
   - 'context-strip active building'  → lieux en cours de sélection (mode places)
   - 'context-strip active parcours'  → un parcours est actif

   Structure HTML (active) :
     <div class="context-strip active parcours">
       <div class="cs-icon">…svg…</div>
       <div class="cs-text">
         <div class="cs-title">Nom du parcours</div>
         <div class="cs-subtitle">7 arrêts · 997m</div>
       </div>
       <button class="cs-cta cs-cta-ghost" data-action="expand">…svg chevron…</button>
     </div>
   ════════════════════════════════════════════════════════════════════════════ */

.context-strip {
  /* État vide : pas de strip visible, le mode-toggle prend la place. */
  display: none;
}
.context-strip.active {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 12px 16px;
  background: #F5F5F5;
  border-radius: 12px;
  flex-shrink: 0;
  font-family: inherit;
}
.cs-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 50%;
  color: #111;
}
.cs-icon svg { display: block; }
.cs-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cs-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cs-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cs-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cs-cta:hover { background: #000; }
/* Variant ghost : juste un bouton icône (chevron pour expand) */
.cs-cta-ghost {
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  color: #555;
  border: 1px solid rgba(0,0,0,.1);
}
.cs-cta-ghost:hover {
  background: rgba(0,0,0,.04);
  color: #111;
  border-color: rgba(0,0,0,.2);
}
.cs-cta-ghost svg { display: block; }

/* Variante de teinte selon le state (building = construction, parcours = actif).
   Subtil — on garde le même fond crème pour la cohérence. */
.context-strip.building .cs-icon { color: #555; }
.context-strip.parcours .cs-icon { color: #16A34A; }

/* Variante multi : 2+ parcours actifs simultanés. Layout COMPACT horizontal :
   icône + texte à gauche, actions empilées à droite — tient en peek (110px). */
.context-strip.multi {
  align-items: center;
  padding: 10px 12px;
}
.context-strip.multi .cs-icon {
  align-self: center;
  margin-bottom: 0;
  color: #111;
  width: 32px; height: 32px;
}
.context-strip.multi .cs-text {
  margin-bottom: 0;
}
.context-strip.multi .cs-title { font-size: 12px; }
.context-strip.multi .cs-subtitle { font-size: 11px; }

/* Variante integration : trajet complet actif (tracé fusionné sur la map).
   Léger tint pour indiquer un état "mode actif" sans être agressif. Bordure
   subtile + background très clair. */
.context-strip.integration {
  align-items: center;
  padding: 10px 12px;
  background: #F5F5F5;
  border-left: 3px solid #111;
}
.context-strip.integration .cs-icon {
  align-self: center;
  margin-bottom: 0;
  color: #111;
  width: 32px; height: 32px;
}
.context-strip.integration .cs-text { margin-bottom: 0; }
.context-strip.integration .cs-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
}
.context-strip.integration .cs-subtitle {
  font-size: 11px;
  color: #555;
}

/* Anti-doublon desktop : le context-strip dans la sidebar contient toutes les
   CTAs nécessaires :
   - parcours actif (single)  : Personnaliser (copier dans le brouillon)
   - multi parcours           : Voir le trajet complet + Personnaliser
   - integration              : Voir la fiche + Quitter
   - building (>=2 lieux)     : Créer + Annuler
   Les anciens boutons flottants .map-actions-row (Copier + Intégrer) faisaient
   doublon. On les cache totalement sur desktop. Le #integrate-btn standalone
   (sans .map-actions-row wrapping) peut rester pour le cas integration solo
   d'un brouillon, qui n'a pas d'équivalent dans le strip. */
@media (min-width: 769px) {
  .ex-map-col .map-actions-row {
    display: none !important;
  }
}

.cs-multi-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
/* Bouton primaire compact (plus pleine largeur) dans le strip multi horizontal */
.cs-cta-block {
  width: auto;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}
/* Lien secondaire texte gris souligné au hover */
.cs-cta-link {
  background: none;
  border: none;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #777;
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
  transition: color .15s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cs-cta-link:hover {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sur mobile, les actions multi-parcours sont rendues dans le context-strip
   du sheet (pattern primaire + secondaire texte). Donc plus de boutons sur
   la map : on cache .map-actions-row et #integrate-btn quand il n'est pas
   dans le wrapper actions row (il reste dans le DOM, cliqué programmatic
   par le strip). */
@media (max-width: 768px) {
  .map-actions-row,
  #integrate-btn { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — .trail-card-actions repositionnées en bas-right (flow normal) pour
   ne plus chevaucher le bouton "Modifier" admin (inline dans .trail-title).
   Le bouton Google Maps est caché (redondant avec navigation GPS sur petit
   écran). Le bouton info (lien fiche) devient une pill texte "Détails".
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Bouton Google Maps : caché sur mobile (l'utilisateur a déjà le bouton GPS
     sur la map pour démarrer la navigation, et le menu d'actions du draft pour
     les exports). Éviter la sur-densité de boutons. */
  .trail-card-actions button.trail-card-info { display: none; }
  /* Lien info → pill texte "Détails" plus explicite que l'icône (i). */
  .trail-card-actions a.trail-card-info {
    width: auto;
    height: auto;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    letter-spacing: .01em;
  }
  .trail-card-actions a.trail-card-info svg { display: none; }
  .trail-card-actions a.trail-card-info::after { content: 'Détails'; }
  .trail-card-actions a.trail-card-info:hover {
    color: #111;
    border-color: #111;
  }
}


/* ============================================================================
   NOUVELLE UI EXPLORER (refonte)
   --------------------------------------------------------------------------
   Structure unifiée : search globale + banner parcours actif (dynamique) +
   section Parcours + section Lieux. UI noir/blanc/gris ; seules les pastilles
   de catégorie sur la carte ET dans la liste lieux gardent leurs couleurs.
   ============================================================================ */

/* Cache toute la structure legacy conservée dans .ex-legacy[hidden]. */
.ex-legacy[hidden] { display: none !important; }

/* Search bar globale ──────────────────────────────────────────────── */
.ex-search {
  position: relative;
  margin: 6px var(--bb-space-4) 0;
  flex-shrink: 0;
}
.ex-search-icon {
  position: absolute;
  left: var(--bb-space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  opacity: .5;
  pointer-events: none;
}
.ex-search-input {
  width: 100%;
  height: 38px;
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-gray-200);
  background: var(--bb-gray-50);
  padding: 0 var(--bb-space-3) 0 36px;
  font-size: var(--bb-text-md);
  font-family: inherit;
  color: var(--bb-gray-900);
  outline: none;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base);
}
.ex-search-input:focus {
  border-color: var(--bb-gray-900);
  background: #fff;
}
.ex-search-input::placeholder {
  color: var(--bb-gray-500);
}

/* Banner parcours actif ──────────────────────────────────────────── */
.active-trail-banner {
  /* Banner DANS .ex-side, entre .sheet-handle et .sheet-content (hors scroll).
     Bord à bord avec la sheet. Sur desktop ça s'intègre naturellement en haut
     de la sidebar. Sur mobile, on agrandit la hauteur du sheet en peek (via
     body.has-active-trail) pour qu'il reste visible. */
  margin: 0;
  padding: 10px var(--bb-space-4);
  /* Fond gris neutre pour distinguer du sheet (#fff) sans ton chaud criard.
     Cohabite avec le reste de l'UI. */
  background: var(--bb-gray-100);
  border: none;
  border-bottom: 1px solid var(--bb-gray-200);
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  transition: opacity .25s ease;
}
.active-trail-banner[hidden] { display: none; }

/* Mobile peek : quand un parcours est actif, on agrandit la sheet pour que
   le banner reste visible au-dessus de la search bar. Sans ça, en peek
   (110px) seuls handle + ~80px de contenu sont visibles → banner caché. */
@media (max-width: 768px) {
  body.has-active-trail .ex-app.sheet-peek .ex-side {
    height: 170px;  /* 110 + ~60 pour le banner (handle 28 + content 82) */
  }
}
.atb-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--bb-gray-900);
  color: #fff;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-text-sm);
  font-weight: 700;
}
.atb-info { flex: 1; min-width: 0; }
.atb-name {
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: var(--bb-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.atb-meta {
  font-size: var(--bb-text-2xs);
  color: var(--bb-gray-600);
  margin-top: 2px;
}
.atb-close {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  border: none;
  color: var(--bb-gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--bb-ease-base);
}
.atb-close svg { width: 12px; height: 12px; }
.atb-close:hover { background: rgba(0, 0, 0, .12); }

/* Section générique ──────────────────────────────────────────────── */
.ex-section {
  padding-top: var(--bb-space-3);
}
.ex-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--bb-space-1) var(--bb-space-4) var(--bb-space-2);
}
.ex-section-title {
  font-size: var(--bb-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bb-gray-800);
}
.ex-section-aside {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
}
.ex-section-count {
  font-size: var(--bb-text-xs);
  color: var(--bb-gray-500);
  font-weight: 500;
}

/* Liste parcours (.trail-item) — nouveau markup compact 1 ligne par item.
   Cohabite avec l'ancien .trail-row qui peut être généré dans des contextes
   non encore migrés (drafts, neighborhoods). À terme, remplace .trail-row. */
.trail-item {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  padding: var(--bb-space-3) var(--bb-space-4);
  border-bottom: 1px solid var(--bb-gray-150);
  cursor: pointer;
  transition: background var(--bb-ease-base);
}
.trail-item:last-child { border-bottom: none; }
.trail-item:hover { background: rgba(0, 0, 0, .02); }
.trail-item:active {
  background: rgba(0, 0, 0, .04);
}
.trail-item.active {
  border-left: 3px solid var(--bb-gray-900);
  padding-left: 13px;
  background: rgba(0, 0, 0, .025);
}
.trail-dot {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
.trail-dot svg {
  width: 32px;
  height: 28px;
  display: block;
}
.trail-info {
  flex: 1;
  min-width: 0;
}
.trail-name {
  font-size: var(--bb-text-md);
  font-weight: 700;
  color: var(--bb-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 3px;
}
.trail-meta {
  font-size: var(--bb-text-sm);
  color: var(--bb-gray-600);
}
.trail-meta .theme-tag {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bb-gray-700);
  font-size: var(--bb-text-2xs);
}
.trail-chevron {
  flex-shrink: 0;
  color: var(--bb-gray-400);
  font-size: var(--bb-text-md);
  line-height: 1;
}
.trail-open {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--bb-gray-400);
  text-decoration: none;
  transition: background var(--bb-ease-base), color var(--bb-ease-base);
}
.trail-open svg { width: 16px; height: 16px; display: block; }
.trail-open:hover { background: var(--bb-gray-100); color: var(--bb-gray-900); }

/* Liste lieux (.place-item) — nouveau markup. Cohabite avec ancien .lieu-item. */
.place-item {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  padding: var(--bb-space-3) var(--bb-space-4);
  border-bottom: 1px solid var(--bb-gray-150);
  cursor: pointer;
  transition: background var(--bb-ease-base);
}
.place-item:last-child { border-bottom: none; }
.place-item:hover { background: rgba(0, 0, 0, .02); }
.place-item:active {
  background: rgba(0, 0, 0, .04);
}
.place-item.active {
  background: rgba(0, 0, 0, .04);
}
.place-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--bb-gray-900);
  color: #fff;
  border-radius: var(--bb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bb-text-sm);
  font-weight: 700;
}

/* ─── Rond photo lieu (à gauche de chaque .place-item) ─────────────
   Cercle 44px avec photo Google Places en background (l.kids_photo_url).
   Si pas de photo, fallback blob plein cadre couleur cat. Mini-blob badge
   24px en bas-droite (ou numéro pour étapes parcours). */
.place-photo {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bb-gray-100, #F0EFEB);
  border: 1.5px solid #ECECEC;
  overflow: visible;
}
.place-photo-img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.place-photo-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
}
.place-photo.no-photo .place-photo-img { display: none; }
.place-photo-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.place-photo-badge--blob svg {
  width: 80%;
  height: 80%;
  display: block;
}
.place-photo-badge--num {
  background: var(--bb-gray-900, #111);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.place-info {
  flex: 1;
  min-width: 0;
}
.place-name {
  font-size: var(--bb-text-md);
  font-weight: 600;
  color: var(--bb-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.place-meta {
  font-size: var(--bb-text-sm);
  color: var(--bb-gray-600);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subsection header (sous-titre dans la liste lieux quand parcours actif) */
.subsection-header {
  font-size: var(--bb-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bb-gray-500);
  padding: 14px var(--bb-space-4) var(--bb-space-2);
  line-height: 1.4;
}

/* Header de section "Étapes de « <parcours> »" : ligne flex avec le label à
   gauche et le bouton "Quitter" à droite. Rend explicite que la liste est
   filtrée par le parcours actif et offre une sortie évidente. */
.subsection-header--trail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3);
  text-transform: none;
  letter-spacing: 0;
}
.subsection-header-label {
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: var(--bb-gray-900);
  text-transform: none;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subsection-header-count {
  font-weight: 700;
  color: var(--bb-gray-400);
  margin-left: 2px;
}
.subsection-exit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--bb-gray-200);
  border-radius: var(--bb-radius-full);
  background: #fff;
  color: var(--bb-gray-600);
  font-family: inherit;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bb-ease-base), color var(--bb-ease-base), border-color var(--bb-ease-base);
}
.subsection-exit svg {
  width: 13px;
  height: 13px;
  display: block;
}
.subsection-exit:hover {
  background: var(--bb-gray-900);
  border-color: var(--bb-gray-900);
  color: #fff;
}
.subsection-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.subsection-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--bb-radius-full);
  background: var(--bb-gray-900);
  color: #fff;
  font-family: inherit;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--bb-ease-base);
}
.subsection-open svg {
  width: 13px;
  height: 13px;
  display: block;
}
.subsection-open:hover { background: #000; }

/* Mode création : contour bleu roi autour de la carte + badge "blob casque".
   Overlay posé dans .ex-map-col (position:relative), pointer-events:none pour
   ne jamais bloquer l'interaction carte. */
.compose-overlay {
  position: absolute;
  inset: 0;
  z-index: 640;
  pointer-events: none;
}
.compose-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid #1D4ED8;
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .25);
  pointer-events: none;
}
.compose-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 7px 16px 7px 9px;
  background: #1D4ED8;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(29, 78, 216, .35);
  pointer-events: none;
}
.compose-badge-blob {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.compose-badge-blob svg {
  display: block;
  width: 100%;
  height: 100%;
}
.compose-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.compose-badge-text b {
  font-size: 13px;
  font-weight: 700;
}
.compose-badge-text small {
  font-size: 11px;
  font-weight: 500;
  opacity: .85;
}
@media (max-width: 768px) {
  .compose-badge { top: 10px; }
  .compose-badge-text small { display: none; }
}

/* Sélecteur de fond de carte (admin) : déplaçable + repliable en icône.
   Le déplacement se fait via .bm-drag (transform translate, persisté), le
   bouton .bm-close réduit le panneau à la seule .bm-icon (clic = ré-ouvre). */
.basemap-admin-box {
  background: #fff;
  border: 2px solid #111;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  font: 600 13px system-ui, sans-serif;
  user-select: none;
}
.basemap-admin-box .bm-panel { padding: 8px 10px; }
.basemap-admin-box .bm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.basemap-admin-box .bm-drag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: grab;
  white-space: nowrap;
}
.basemap-admin-box.is-dragging .bm-drag { cursor: grabbing; }
.basemap-admin-box .bm-drag svg { width: 13px; height: 13px; flex-shrink: 0; color: #c4c4c4; }
.basemap-admin-box .bm-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #f2f2f2;
  color: #111;
  cursor: pointer;
}
.basemap-admin-box .bm-close:hover { background: #e5e5e5; }
.basemap-admin-box .bm-close svg { width: 14px; height: 14px; }
.basemap-admin-box .bm-select {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}
.basemap-admin-box .bm-icon {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #111;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.basemap-admin-box .bm-icon svg { width: 20px; height: 20px; }
.basemap-admin-box.is-collapsed .bm-panel { display: none; }
.basemap-admin-box.is-collapsed .bm-icon { display: inline-flex; cursor: grab; }
.basemap-admin-box.is-dragging .bm-icon { cursor: grabbing; }

/* FAB compose (Créer un parcours) ─────────────────────────────────── */
.ex-fab {
  position: absolute;
  right: 14px;
  bottom: 92px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ex-fab:hover { background: #222; }
.ex-fab svg { width: 16px; height: 16px; }
.ex-fab.active {
  background: #2563EB;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}

/* Chips catégorie : cachées en mobile (filtre via dropdown header),
   visibles en desktop (sidebar a la place). */
.ex-cat-chips {
  display: none;
}
@media (min-width: 769px) {
  .ex-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 8px;
  }
  .ex-cat-chips .cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #F5F4F0;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    font-family: inherit;
  }
  .ex-cat-chips .cat-btn:hover { background: #ECEAE4; }
  .ex-cat-chips .cat-btn.on {
    background: #111;
    color: #fff;
    border-color: #111;
  }
  .ex-cat-chips .cat-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #888;
  }
  .ex-cat-chips .cat-btn.cafe       .cat-dot { background: #D97706; }
  .ex-cat-chips .cat-btn.park       .cat-dot { background: #16A34A; }
  .ex-cat-chips .cat-btn.museum     .cat-dot { background: #2563EB; }
  .ex-cat-chips .cat-btn.shop       .cat-dot { background: #7C3AED; }
  .ex-cat-chips .cat-btn.restaurant .cat-dot { background: #E11D48; }
  .ex-cat-chips .cat-btn.leisure    .cat-dot { background: #F59E0B; }
  .ex-cat-chips .cat-btn.sport      .cat-dot { background: #0891B2; }
}

/* Desktop : composer-bar plus visible et sticky en bas de la sidebar
   quand sélection active. La composer-bar a déjà display:flex contrôlé
   par le JS (selectedLieux.length > 0). */
@media (min-width: 769px) {
  .ex-side .composer-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 12px 16px 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
  }
}

/* Desktop : FAB plus accessible — bouton un poil plus large avec ombre marquée.
   Mobile : déjà bien positionné via bottom: 92px. */
@media (min-width: 769px) {
  .ex-fab {
    height: 48px;
    padding: 0 20px 0 16px;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
  }
}

/* ============================================================================
   OVERRIDES POUR LA NOUVELLE UI UNIFIÉE
   --------------------------------------------------------------------------
   La nouvelle UI affiche SIMULTANÉMENT la liste parcours ET la liste lieux,
   indépendamment du mode legacy. Override des règles CSS legacy qui les
   cachaient en fonction du mode (mode-trails / mode-places).
   ============================================================================ */
.ex-side .list-trails,
.ex-side .list-places {
  display: block !important;
}

/* Le context-strip legacy fait doublon avec le nouveau .active-trail-banner.
   On le cache complètement. */
.context-strip {
  display: none !important;
}

/* Mini-bouton "Définir mon point de départ" : visible quand la start-bar
   est cachée (état par défaut). Discret : icône pin + texte, sans bordure,
   ne prend pas de place visuelle. Aligné avec les marges de la search. */
.ex-start-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--bb-space-2) var(--bb-space-4) 0;
  padding: 6px 2px;
  background: none;
  border: none;
  color: var(--bb-gray-600, #666);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: color .12s;
  text-align: left;
}
.ex-start-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--bb-gray-500, #888);
}
.ex-start-toggle:hover {
  color: var(--color-text, #111);
}
.ex-start-toggle:hover svg {
  color: var(--color-text, #111);
}
.ex-start-toggle[hidden] { display: none !important; }

/* Barre point de départ (sous la search bar) ─────────────────────── */
.ex-start-bar {
  position: relative;
  margin: var(--bb-space-2) var(--bb-space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  height: 38px;
  padding: 0 var(--bb-space-2) 0 36px;
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-gray-200);
  background: #fff;
  flex-shrink: 0;
}
/* L'attribut HTML `hidden` impose display:none par défaut, MAIS la règle
   `.ex-start-bar { display: flex }` ci-dessus l'écrase (priorité au sélecteur
   de classe). On rétablit la priorité au hidden. */
.ex-start-bar[hidden] { display: none !important; }
.ex-start-icon {
  position: absolute;
  left: var(--bb-space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--bb-gray-700);
  pointer-events: none;
}
.ex-start-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: var(--bb-text-base);
  font-family: inherit;
  color: var(--bb-gray-900);
  outline: none;
  padding: 0;
}
.ex-start-input::placeholder { color: var(--bb-gray-500); }
.ex-start-clear {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  border: none;
  color: var(--bb-gray-700);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ex-start-clear svg { width: 10px; height: 10px; }
.ex-start-bar.has-value .ex-start-clear { display: inline-flex; }

/* Chips filtre parcours (Tous / Mes / Quartiers / Thèmes) ─────────── */
.ex-trail-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--bb-space-4) 10px;
}
.ex-fchip {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--bb-space-3);
  border-radius: var(--bb-radius-full);
  background: transparent;
  border: 1px solid var(--bb-gray-200);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: var(--bb-gray-700);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base), color var(--bb-ease-base);
}
.ex-fchip:hover {
  background: var(--bb-gray-50);
  border-color: var(--bb-gray-300);
}
.ex-fchip:active {
  transform: scale(0.96);
  transition: transform var(--bb-ease-fast);
}
.ex-fchip.active {
  background: var(--bb-gray-900);
  color: #fff;
  border-color: var(--bb-gray-900);
}

/* Pin beboun dans la liste lieux (remplace .place-dot quand le lieu n'est
   pas dans le brouillon). Cohérent avec le marker affiché sur la carte. */
.place-pin {
  flex-shrink: 0;
  width: 26px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.place-pin svg { display: block; }

/* Bloc rating Google dans le panel détail lieu ──────────────────── */
.pp-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
  color: #444;
}
.pp-rating-value {
  font-weight: 700;
  color: #111;
  font-size: 14px;
}
.pp-rating-star {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.pp-rating-count {
  color: #888;
  font-size: 12px;
}
.pp-rating-source {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #999;
  font-weight: 600;
}

/* ============================================================================
   FONT RENDERING : netteté + tailles légèrement augmentées
   --------------------------------------------------------------------------
   Force l'antialiasing explicite sur la sheet (au cas où une règle globale
   serait override quelque part). Léger bump des tailles de police pour gagner
   en lisibilité sur écrans haute densité, surtout en mobile.
   ============================================================================ */
.ex-side,
.ex-side * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
/* Bump tailles : meilleure lisibilité, surtout mobile retina */
.trail-name { font-size: 15px; font-weight: 700; }
.place-name { font-size: 15px; font-weight: 600; }
.trail-meta { font-size: 12px; }
.place-meta { font-size: 12px; }
.atb-name   { font-size: 14px; }
.atb-meta   { font-size: 11px; }
.ex-search-input { font-size: 15px; }
.ex-start-input  { font-size: 14px; }

/* ============================================================================
   MARKER FOCUSED : remplace l'ancien highlightPin inline.
   Scale sur .drop-marker-inner (pas sur root) pour éviter le conflit avec
   le translate3d Leaflet et le sub-pixel rendering qui floutait le SVG.
   ============================================================================ */
.drop-marker.is-focused { z-index: 1000 !important; }
.drop-marker.is-focused .drop-marker-inner {
  transform: scale(0.75);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
  transform-origin: center bottom;
}
.drop-marker.is-other-when-focused {
  opacity: .35 !important;
  filter: grayscale(.5) !important;
  transition: opacity .2s ease, filter .2s ease;
}

/* ============================================================================
   MOBILE UX — bottom sheet : optimisation espace + chips scrollables
   --------------------------------------------------------------------------
   Sur mobile en mode peek (110px), l'espace est limité. On masque la start-bar
   et on rend les chips parcours scrollables horizontalement (au lieu de wrap)
   pour que les 4 filtres restent accessibles sur une seule ligne.
   ============================================================================ */
@media (max-width: 768px) {
  /* Chips filtre : scroll horizontal sur 1 ligne, jamais wrap */
  .ex-trail-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ex-trail-filters::-webkit-scrollbar { display: none; }
  .ex-fchip { flex-shrink: 0; }

  /* En mode peek, on cache la start-bar pour gagner de l'espace : la liste
     parcours est plus prioritaire. La start-bar redevient visible dès qu'on
     ouvre le sheet (half/full). */
  .ex-app.sheet-peek .ex-start-bar,
  .ex-app.sheet-peek .ex-start-toggle { display: none; }

  /* En peek, on réduit aussi la marge top de la search pour gagner quelques px */
  .ex-app.sheet-peek .ex-search { margin-top: 4px; }
}

/* Item étape de parcours actif : très légère mise en avant pour distinguer
   des "autres lieux à proximité". Le numéro noir (.place-num) suffit pour
   l'essentiel ; on ajoute juste un fond très subtil au hover. */
.place-item.is-step {
  background: transparent;
}
.place-item.is-step:hover {
  background: rgba(0, 0, 0, .035);
}

/* ============================================================================
   QUICK WINS TIER 1
   ============================================================================ */

/* (3) Banner parcours actif : voir la règle .active-trail-banner plus haut,
   il est maintenant positionné en fixed HORS de .ex-side pour rester visible
   même en mode peek. Plus de sticky. */

/* (2) Highlight flash quand on tap un marker et l'item correspondant scrolle
   dans la liste — visuellement on voit où on a atterri. Fade in/out fluide. */
.place-item.is-flash,
.trail-item.is-flash {
  animation: bebounFlash 1.5s ease-out;
}
@keyframes bebounFlash {
  0%   { background: rgba(255, 240, 200, 0); }
  20%  { background: rgba(255, 240, 200, 0.7); }
  100% { background: rgba(255, 240, 200, 0); }
}

/* ============================================================================
   TOAST IN-APP (utilisé par share + navigation GPS pas à pas)
   ============================================================================ */
.beboun-toast-container {
  position: fixed;
  /* Positionne au-dessus de la bottom-nav + safe-area-inset-bottom (iPhone
     notch landscape ou home indicator portrait). 88px = padding au-dessus
     de la bottom-nav 56px. Sans le calc, le toast peut être caché derrière
     l'indicateur home iOS. */
  bottom: calc(36px + var(--bottom-nav-h, 52px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
  pointer-events: none;          /* clics passent à travers */
  max-width: calc(100vw - var(--bb-space-7));
}
.beboun-toast {
  background: #1a1a1a;
  color: #fff;
  padding: var(--bb-space-3) var(--bb-space-5);
  border-radius: var(--bb-radius-xl);
  font-size: var(--bb-text-base);
  font-weight: 600;
  box-shadow: var(--bb-shadow-2xl);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: auto;
  text-align: center;
  line-height: 1.35;
}
.beboun-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.beboun-toast--success {
  background: #16A34A;
}
@media (min-width: 769px) {
  /* Desktop : toasts en bas-droite, plus subtils */
  .beboun-toast-container {
    bottom: var(--bb-space-6);
    left: auto;
    right: var(--bb-space-6);
    transform: none;
  }
}

/* ============================================================================
   BOUTON PARTAGER (dans banner parcours actif)
   ============================================================================ */
.atb-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .15);
  color: #1a1a1a;
  padding: 6px var(--bb-space-3);
  border-radius: var(--bb-radius-full);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base);
}
.atb-share:hover {
  background: rgba(0, 0, 0, .04);
  border-color: rgba(0, 0, 0, .25);
}
.atb-share svg {
  width: 14px;
  height: 14px;
}
/* Position du bouton dans le banner parcours actif : entre .atb-info et .atb-close */
.active-trail-banner .atb-share {
  margin-right: var(--bb-space-2);
}

/* ============================================================================
   SHEET HANDLE — règles robustes hors media query
   ============================================================================
   Le drag handle de la bottom sheet doit être TOUJOURS visible quand on est
   en mode sheet (mobile). Le @media (max-width: 768px) plus haut définit son
   style. Mais pour ne pas dépendre uniquement du media query (qui peut sauter
   pendant un resize, rotation, ou viewport en limite), on duplique le style
   par défaut ici et on cache explicitement sur desktop large. */

/* ============================================================================
   Drag handle : enfant flex EN FLUX, premier enfant de .ex-side
   ============================================================================
   Plus de position fixed, plus de sync JS via getBoundingClientRect. Le handle
   fait partie du layout de la sheet (display:flex column) : il est TOUJOURS au
   top, suit la sheet automatiquement pendant le drag/les transitions, et ne
   peut jamais se désynchroniser ni partir hors champ (robuste iOS). Caché par
   défaut (desktop sidebar), visible uniquement sur mobile. */
.sheet-handle {
  display: none;  /* caché par défaut, visible uniquement sur mobile */
}
@media (max-width: 768px) {
  .sheet-handle {
    display: flex;
    flex: 0 0 28px;          /* hauteur fixe, ne se compresse pas */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    background: transparent;  /* laisse voir le blanc de la sheet (coins arrondis) */
    cursor: grab;
    touch-action: none;       /* empêche le scroll natif pendant le drag */
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    z-index: 2;               /* au-dessus du contenu/banner pour capter le drag */
  }
  /* La barre grise visible centrée dans le handle */
  .sheet-handle::before {
    content: '';
    display: block;
    width: 48px;
    height: 5px;
    background: var(--bb-gray-400);
    border-radius: 3px;
    transition: background var(--bb-ease-base), width var(--bb-ease-base);
  }
  /* Hover : barre plus foncée pour signaler l'interactivité */
  .sheet-handle:hover::before {
    background: var(--bb-gray-700);
    width: 56px;
  }
  /* Pendant le drag : curseur grabbing + barre foncée/élargie (feedback tactile) */
  .ex-app.sheet-dragging .sheet-handle { cursor: grabbing; }
  .ex-app.sheet-dragging .sheet-handle::before {
    background: var(--bb-gray-900);
    width: 60px;
    transition: none;
  }
}

/* Plus de scroll-margin/padding obsolètes : le banner étant HORS du
   .sheet-content scrollable (placé entre handle et content), les items
   du scroll n'ont plus besoin d'éviter un sticky imaginaire. */

/* ============================================================================
   Lieux à proximité d'un parcours actif : rendu allégé
   ============================================================================
   Ces lieux ne sont pas des stops du parcours (pas obligatoires). On les rend
   visuellement plus discrets pour ne pas confondre avec les vrais stops.
   Le pin beboun garde sa couleur mais opacity réduite (cohérent avec le
   marker sur la map qui est aussi atténué). Texte légèrement décoloré. */
.place-item.is-near-trail .place-pin {
  opacity: 0.45;
  filter: saturate(0.5);
}
.place-item.is-near-trail .place-name {
  color: #666;
}
.place-item.is-near-trail .place-meta {
  color: #999;
}
/* Au hover : on retourne à la pleine couleur — l'user voit que c'est cliquable */
.place-item.is-near-trail:hover .place-pin {
  opacity: 1;
  filter: none;
}
.place-item.is-near-trail:hover .place-name {
  color: #111;
}
.place-item.is-near-trail:hover .place-meta {
  color: #777;
}

/* Marker sur la map en mode near-trail : opacity/filter inline posés par
   refreshMarkers (JS). CSS hover override avec !important pour neutraliser
   l'inline et retourner à la pleine couleur quand l'user survole le pin. */
.pin-near-trail {
  transition: opacity .15s ease, filter .15s ease;
}
.pin-near-trail:hover {
  opacity: 1 !important;
  filter: none !important;
}
/* CRITIQUE : lieu SÉLECTIONNÉ (dans le brouillon mode compose) override
   l'atténuation .is-near-trail. Specificity .place-item.active.is-near-trail
   = .place-item.is-near-trail, donc on doit déclarer APRÈS pour gagner. */
.place-item.is-near-trail.active .place-pin,
.place-item.is-near-trail.active .place-num {
  opacity: 1;
  filter: none;
}
.place-item.is-near-trail.active .place-name {
  color: #111;
}
.place-item.is-near-trail.active .place-meta {
  color: #666;
}

/* ============================================================================
   Stop "PROCHAIN" du parcours actif : mise en évidence
   ============================================================================
   Quand un parcours est actif, le stop suivant à visiter (TrailProgress) est
   marqué .is-next dans la liste "Étapes du parcours". Visuellement distinct
   du reste : fond léger + indicateur "PROCHAIN" + bordure gauche.
   Le badge est positionné en absolu COIN TOP-LEFT (sur la bordure orange) pour
   ne pas chevaucher la meta. */
.place-item.is-step.is-next {
  background: linear-gradient(90deg, rgba(255, 240, 200, .5) 0%, transparent 100%);
  border-left: 3px solid #F59E0B;
  padding-left: 13px;  /* compense le border-left 3px pour aligner avec autres */
  position: relative;
}
.place-item.is-step.is-next::after {
  content: 'PROCHAIN';
  position: absolute;
  top: -1px;
  left: 13px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  background: #F59E0B;
  padding: 2px 6px 2px 7px;
  border-radius: 0 0 4px 4px;  /* coins seulement en bas (collé en haut) */
}

/* ============================================================================
   Bouton "+ Créer un parcours" — item en tête de la liste Parcours
   ============================================================================
   Remplace le FAB flottant. Pattern "+ Add new" en tête de liste, naturel
   et accessible mobile + desktop sans gérer les empilements de FABs. */
/* Ligne d'actions compacte en tête de l'onglet Parcours (Créer / Suggérer /
   Classement). Remplace 3 grosses lignes pleine largeur → libère le fold pour
   que les parcours soient visibles tout de suite. */
.trail-actions-row {
  display: flex;
  gap: 8px;
  padding: var(--bb-space-2) var(--bb-space-4) var(--bb-space-3);
}
.trail-action {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--bb-gray-200);
  border-radius: var(--bb-radius-full);
  background: #fff;
  color: var(--bb-gray-900);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bb-ease-base), border-color var(--bb-ease-base), color var(--bb-ease-base);
}
.trail-action:hover {
  background: var(--bb-gray-50);
  border-color: var(--bb-gray-300);
}
.trail-action-ic { flex-shrink: 0; display: inline-flex; }
.trail-action-ic svg { width: 16px; height: 16px; display: block; }
.trail-action-lb {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trail-action.trail-action--primary {
  background: var(--bb-gray-900);
  border-color: var(--bb-gray-900);
  color: #fff;
}
.trail-action.trail-action--primary:hover {
  background: #000;
  border-color: #000;
}

.create-trail-item {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  padding: var(--bb-space-3) var(--bb-space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--bb-gray-150);
  background: #fff;
  transition: background var(--bb-ease-base);
}
.create-trail-item:hover {
  background: var(--bb-gray-50);
}
.create-trail-icon {
  width: 36px;
  height: 36px;
  background: var(--bb-gray-900);
  color: #fff;
  border-radius: var(--bb-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease;
}
.create-trail-icon svg {
  width: 18px;
  height: 18px;
}
.create-trail-info {
  flex: 1;
  min-width: 0;
}
.create-trail-name {
  font-size: var(--bb-text-lg);
  font-weight: 600;
  color: var(--bb-gray-900);
  line-height: 1.2;
}
.create-trail-meta {
  font-size: var(--bb-text-sm);
  color: var(--bb-gray-500);
  margin-top: 2px;
}
.create-trail-chevron {
  color: var(--bb-gray-400);
  font-size: var(--bb-text-xl);
  flex-shrink: 0;
}
/* État compose actif : couleur orange (cohérent avec le code FAB.active) */
.create-trail-item.is-active-compose {
  background: #FFF5EE;
}
.create-trail-item.is-active-compose .create-trail-icon {
  background: #2563EB;
}
.create-trail-item.is-active-compose .create-trail-name {
  color: #B45309;
}

/* On cache l'ancien FAB côté map : remplacé par l'item en tête de liste */
.ex-fab { display: none; }


/* ============================================================================
   ONGLETS LIEUX / PARCOURS  (ajout : n'affiche qu'UNE section à la fois)
   --------------------------------------------------------------------------
   .ex-tabs appelle setMode() qui pose mode-trails / mode-places sur .ex-side.
   On stylise l'onglet actif ET on masque la section non-active uniquement via
   ces classes (zéro JS dédié). Placé en fin de fichier pour battre l'override
   "UI unifiée" (display:block !important sur les listes) en masquant la SECTION
   entière plutôt que la liste.
   ============================================================================ */
.ex-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 16px 4px;
  padding: 3px;
  background: #F1EFE8;
  border-radius: 12px;
}
.ex-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #8a8a83;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ex-tab:hover { color: #555; }
.ex-side.mode-places #tab-lieux,
.ex-side.mode-trails #tab-parcours {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Une seule section visible selon le mode. On masque la SECTION (pas la liste,
   qui est forcée en display:block !important par l'UI unifiée). */
.ex-side.mode-places #section-trails { display: none !important; }
.ex-side.mode-trails #section-places { display: none !important; }