/* ═════════════════════════════════════════════════════════════════════════
   EXPLORER — MODE KIDS
   ─────────────────────────────────────────────────────────────────────────
   Tout ce qui concerne l'expérience "mode kids" :
   - session-pill, child-picker, kids-identity
   - swipe plein écran (onboarding kids)
   - vue plein écran kids (kids-view)
   - kids-deck, kids-deck themed, topbar, FAB, bottom sheet
   - popups kids, kids trail picker
   - animations et makeover playful
   Chargé APRÈS explorer.css dans explorer.html pour que les overrides
   conditionnels (body.kids-mode .foo) s'appliquent correctement.
   ═════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════ */
/* 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) ──────────── */
.map-toolbar {
  position: absolute;
  top: 12px;
  left: 56px;
  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 — bloc retiré (HTML supprimé d'explorer.html, le toggle
   du mode kids est maintenant assuré par .kids-macaron dans base.html /
   base.css). Les classes .session-pill* sont orphelines.
   ════════════════════════════════════════════════════════════════ */

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

/* ════════════════════════════════════════════════════════════════ */
/* 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: #111;
}

.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 ?").             */
/* ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════ */
/* 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: #F5F5F3;
}
.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 ── */

/* Pill commun (style cohérent avec le session-pill du mode parent) */

/* Pill identité : blob coloré + nom */

/* Pill parcours : icône + label + flèche */

/* ── Bouton sortie flottant (top-right) : pill noir avec label ── */

/* ── 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: #F5F5F3;
  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-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-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: #F5F5F3;
  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;
}

/* ════════════════════════════════════════════════════════════════
   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 {
  animation: kidsPulse 2.4s ease-in-out infinite;
}

body.kids-mode .kids-adventure-btn: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 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Pills in toolbar: pastel backgrounds with colored text instead of black/white */

/* Generous border-radius across kids UI for that soft/rounded feel */
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: linear-gradient(135deg, #FFE4F0 0%, #FECDD3 100%);
  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: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  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;
}

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

/* Only shown in kids mode */

@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
   ════════════════════════════════════════════════════════════════ */

@keyframes kidsLikedPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(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;
}

/* ════════════════════════════════════════════════════════════════
   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 */

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

@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); }
}

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


/* ════════════════════════════════════════════════════════════════
   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 */

/* 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: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  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);
}



/* ════════════════════════════════════════════════════════════════════════════
   PARTNER PROXIMITY — notif plein écran quand l'user arrive à <30m d'un lieu
   ayant une carte fidélité active. Pattern minimaliste : fond blanc, blob
   mascotte, nom du partenaire en accent, CTA récompense orange (kids-accent).
   ════════════════════════════════════════════════════════════════════════════ */
.partner-prox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
}
.partner-prox.show {
  display: flex;
  animation: partnerProxIn .4s cubic-bezier(.2, .8, .2, 1);
}
@keyframes partnerProxIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.partner-prox-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: 1px solid #DDD;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.partner-prox-close:hover { border-color: #111; color: #111; }
.partner-prox-blob {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  /* Bobbing posé à 3s : présence sans agitation. */
  animation: partnerProxBlob 3s ease-in-out infinite;
}
@keyframes partnerProxBlob {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.partner-prox-title {
  font-family: var(--font-serif, 'Playfair Display'), Georgia, serif;
  font-size: 30px; font-weight: 700;
  color: #111;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  max-width: 460px;
  line-height: 1.15;
}
/* Nom du partenaire en accent : seul élément coloré du titre, identifie
   le lieu sans dominer le visuel. */
.partner-prox-title span { color: var(--kids-accent, #2563EB); }
.partner-prox-sub {
  font-size: var(--bb-text-lg); color: #555;
  margin: 0 0 36px;
  max-width: 400px;
  line-height: 1.45;
}
.partner-prox-actions {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 320px;
}
/* CTA principal : orange (kids-accent) = signal de récompense, cohérent
   avec l'identité "carte fidélité". */
.partner-prox-cta {
  background: var(--kids-accent, #2563EB);
  color: #fff;
  border: none;
  border-radius: var(--bb-radius-xl);
  padding: 15px 24px;
  font-family: inherit;
  font-size: var(--bb-text-lg); font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.partner-prox-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
.partner-prox-cta-secondary {
  background: transparent;
  color: #444;
  border: 1px solid #DDD;
  border-radius: var(--bb-radius-xl);
  padding: 13px 24px;
  font-family: inherit;
  font-size: var(--bb-text-md); font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.partner-prox-cta-secondary:hover { border-color: #111; color: #111; }
@media (max-width: 480px) {
  .partner-prox-title { font-size: 24px; }
  .partner-prox-sub   { font-size: var(--bb-text-md); }
  .partner-prox-blob  { width: 100px; height: 100px; margin-bottom: 22px; }
}