/* ===========================================================================
   .opd-map-pin — MARQUEUR DE CARTE oPADDOCK (pastille « plug » + pointe).

   Extrait de `.prc-map-pin` (style_parcours_v2.css), dont l'apparence a ete
   validee sur la carte des balades. La carte des ETABLISSEMENTS n'affichait
   qu'une pastille de 12px : illisible, sans identite, et sans rapport avec le
   reste du produit.

   ⚠ JUMEAU A FAIRE CONVERGER : `.prc-map-pin` est le meme composant sous un
   autre nom. Il n'a PAS ete migre ici dans le meme travail (la page balades
   fonctionne, et je ne pouvais pas la verifier au navigateur) -- mais toute
   evolution du marqueur doit toucher LES DEUX, ou mieux, faire disparaitre
   `.prc-map-pin` au profit de celui-ci. Deux implementations d'une meme chose
   sont un bug en sursis (CLAUDE.md §00a).

   Anatomie (conteneur Leaflet 44x52, ancre = la pointe basse) :
     .opd-map-pin           pastille 42x42, coins tres arrondis
       .opd-map-pin-icon    SVG inline, herite de currentColor
     ::after                la pointe, qui tombe exactement sur la coordonnee
   =========================================================================== */

.opd-pin-wrap { background: none; border: 0; }

.opd-map-pin {
    position: absolute;
    top: 0; left: 50%;
    width: 42px; height: 42px;
    margin-left: -21px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Pivot sur la pointe : la pastille grossit sans quitter sa coordonnee. */
    transform-origin: 50% 124%;
    /* Courbes ecrites en clair : ce composant ne doit dependre d'aucune variable
       propre a la page des balades (--prc-ease*), sinon il casse ailleurs. */
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1),
                filter .2s ease,
                box-shadow .2s ease;
}

.opd-map-pin::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    margin-left: -6px;
    width: 0; height: 0;
    border: 6px solid transparent;
    border-bottom: 0;
    border-top: 8px solid var(--primary-dark, #059669);
}

.opd-map-pin-icon { width: 24px; height: 24px; }
.opd-map-pin-icon svg { width: 100%; height: 100%; display: block; }

/* Pastille PLEINE : l'etablissement est une offre reservable. */
.opd-map-pin {
    background: linear-gradient(140deg, var(--primary-light, #34d399), var(--primary-dark, #059669));
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92);
    filter: drop-shadow(0 4px 10px rgba(var(--primary-rgb, 16,185,129), .35))
            drop-shadow(0 1px 2px rgba(0, 0, 0, .16));
}

/* Survol du marqueur. Leaflet remonte deja le marqueur survole (riseOnHover) :
   le z-index se joue sur .leaflet-marker-icon, jamais ici. */
.opd-map-pin:hover { transform: scale(1.1); }

/* Etat ACTIF : la carte-resultat correspondante est survolee dans la liste.
   Le lien liste <-> carte doit se voir d'un coup d'oeil, sans clignoter. */
.opd-map-pin.is-active {
    transform: scale(1.18);
    box-shadow: inset 0 0 0 2px #fff;
    filter: drop-shadow(0 8px 18px rgba(var(--primary-rgb, 16,185,129), .55))
            drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}

@media (prefers-reduced-motion: reduce) {
    .opd-map-pin { transition: none; }
    .opd-map-pin:hover, .opd-map-pin.is-active { transform: none; }
}