/* Pins construits par carte-offres.js (Mes offres de cours et détail d'une offre) : goutte bleue avec un livre,
   jaune si créneaux compatibles, plus pâle une fois consultée.
   Ni position ni transform/transition sur l'élément du marqueur : MapLibre le place lui-même en
   absolute + transform, les surcharger décale les pins et les fait glisser au zoom. */
.offre-pin {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 3px 6px rgba(66, 81, 255, .35));
}

    .offre-pin svg {
        display: block;
    }

.offre-pin__body {
    fill: #4251ff;
}

.offre-pin__disc {
    fill: #ffffff;
}

.offre-pin__glyph {
    fill: #4251ff;
}

.offre-pin--compatible {
    filter: drop-shadow(0 3px 8px rgba(255, 180, 0, .55));
}

    .offre-pin--compatible .offre-pin__body {
        fill: #ffd100;
    }

    .offre-pin--compatible .offre-pin__glyph {
        fill: #333f48;
    }

/* Déjà consultée : même couleur, atténuée, sans halo. L'opacité porte sur le SVG pour garder le drapeau
   d'option bien visible ; le pin sélectionné, marqué consulté dès le clic, reste plein. */
.offre-pin--vue {
    filter: none;
}

    .offre-pin--vue svg {
        opacity: .6;
    }

    .offre-pin--vue.offre-pin--selection svg {
        opacity: 1;
    }

/* Offre sélectionnée (depuis la carte ou la liste) : au premier plan, agrandie, avec un halo à la pointe.
   Le halo et l'agrandissement portent sur les enfants : l'élément du marqueur reste piloté par MapLibre. */
.offre-pin--selection {
    z-index: 10;
    filter: drop-shadow(0 6px 12px rgba(32, 46, 217, .55));
}

    .offre-pin--selection svg {
        transform: scale(1.6);
        transform-origin: 50% 100%;
    }

    .offre-pin--selection .offre-pin__body {
        stroke: #ffffff;
        stroke-width: 2px;
    }

    .offre-pin--selection::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -7px;
        width: 26px;
        height: 10px;
        margin-left: -13px;
        border-radius: 50%;
        background: rgba(66, 81, 255, .45);
        animation: offre-pin-halo 1.4s ease-out infinite;
    }

@keyframes offre-pin-halo {
    from {
        opacity: .9;
        transform: scale(.6);
    }

    to {
        opacity: 0;
        transform: scale(2.2);
    }
}

.offre-pin--domicile {
    z-index: 5;
}

.offre-pin--domicile {
    cursor: default;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3));
}

    .offre-pin--domicile .offre-pin__body,
    .offre-pin--domicile .offre-pin__glyph {
        fill: #333f48;
    }

.offre-pin__option {
    position: absolute;
    top: -4px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #1aa38a;
    color: #ffffff;
}

    .offre-pin__option svg {
        width: 8px;
        height: 8px;
    }

@media (prefers-reduced-motion: reduce) {
    .offre-pin--selection::before {
        animation: none;
    }
}