/* ==========================================================================
   Section « Venir au Choumi » — STYLES PARTAGÉS du widget carte
   (compagnon de carte-choumi.js, importé par le desktop ET le mobile).
   Le panneau parle le langage du calendrier : surface --nuit, coins
   --radius-lg. La taille (hauteur, largeur) appartient à chaque contexte.
   ========================================================================== */

.carte-choumi {
  position: relative;
  background: var(--nuit);
  border-radius: var(--radius-lg);
  /* clip (pas hidden) : ne crée pas de scroll container (.texte-scroll) */
  overflow: clip;
}

/* La zone que Google remplit — sous le placeholder tant que rien n'est
   affiché (zéro layout shift : les deux occupent tout le panneau) */
.carte-choumi__gmap {
  position: absolute;
  inset: 0;
}

/* ---- Placeholder statique sombre : l'état de repos ET le repli sans
   clé API — un faux plan discret, le pin du club, sa légende ---- */
.carte-choumi__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 14px;
  background:
    radial-gradient(420px circle at 50% 44%, rgba(87, 179, 242, 0.05), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(255, 255, 255, 0.025) 88px 89px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(255, 255, 255, 0.025) 88px 89px),
    #0B0D13;
  transition: opacity var(--duree-etat) ease;
}
.carte-choumi__placeholder small {
  color: var(--grey); /* AA sur le faux-plan (--grey-dim tombait sous 4.5:1) */
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.carte-choumi--active .carte-choumi__placeholder { opacity: 0; pointer-events: none; }

/* ---- Le pin du club : anneau bleu accent + point central + micro point
   violet + léger halo (utilisé par la carte ET le placeholder) ---- */
/* Cible tactile ~44px sans agrandir le disque visible (a11y). */
.carte-choumi__pin::before { content: ''; position: absolute; inset: -5px; }
.carte-choumi__pin {
  position: relative;
  width: 34px; height: 34px;
  padding: 0; border: 0; cursor: pointer;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nuit) 72%, transparent);
  box-shadow:
    inset 0 0 0 2.5px var(--blue),
    0 0 18px color-mix(in srgb, var(--blue) 45%, transparent);
}
.carte-choumi__pin-point {
  position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue);
}
.carte-choumi__pin-micro {
  position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 8px color-mix(in srgb, var(--violet) 70%, transparent);
}
.carte-choumi__pin:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Sur la carte : le porteur est ancré au point géographique (OverlayView),
   le pin centré dessus, la bulle au-dessus */
.carte-choumi__ancre { position: absolute; transform: translate(-50%, -50%); }
.carte-choumi__ancre .carte-choumi__pin { position: absolute; inset: 0; margin: auto; transform: translate(-50%, -50%); }

/* ---- La « carte de visite » du club (ouverte au chargement, le pin la
   replie/rouvre) : nom + adresse à gauche, actions rondes à droite —
   même langage que la fiche Google Maps, au style nuit du site ---- */
/* display:flex battrait le style UA de [hidden] : on le rétablit */
.carte-choumi__bulle[hidden] { display: none; }
.carte-choumi__bulle {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  padding: 13px 15px 13px 17px;
  background: var(--nuit);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.carte-choumi__bulle-texte { display: grid; gap: 2px; }
.carte-choumi__bulle-texte b { color: var(--white); font-size: 13.5px; font-weight: 600; }
.carte-choumi__bulle-texte span { color: var(--grey); font-size: 12.5px; }

/* Note + avis (Places API) — même format que la fiche Google native :
   « 4,5 ★ (5 391) ». Injectée seulement si Google renvoie une note. */
.carte-choumi__note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12.5px;
}
.carte-choumi__note b { color: var(--white); font-weight: 600; }
.carte-choumi__note .carte-choumi__etoile { color: #FBBC04; } /* or Google */
.carte-choumi__note .carte-choumi__nb { color: var(--grey); }
.carte-choumi__bulle-actions { display: flex; gap: 8px; }
.carte-choumi__bulle-actions a {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  transition: background var(--duree-hover), color var(--duree-hover);
}
.carte-choumi__bulle-actions a::before { content: ''; position: absolute; inset: -3px; } /* cible tactile ~44px */
.carte-choumi__bulle-actions a:hover { background: var(--blue); color: var(--encre-bleu); }
.carte-choumi__bulle-actions a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.carte-choumi__bulle-actions svg { width: 18px; height: 18px; }

/* ---- Bouton ITINÉRAIRE : composant .btn du site, posé sur la carte,
   toujours au-dessus (Google inclus) ---- */
/* Bouton ITINÉRAIRE : le composant .btn STRICTEMENT tel quel (même taille,
   même CSS, mêmes états que tous les autres boutons) — ici on n'ajoute QUE
   son positionnement sur la carte, rien qui touche à son apparence. */
.carte-choumi__cta {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .carte-choumi__placeholder { transition: none; }
}