/* carte-resultats.css — carte des résultats de recherche (Vacancium, phase 2).
   Chargée uniquement sur /locations-vacances via _carte-resultats.html.twig. */

.carte-resultats {
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--trait, rgba(24, 34, 46, .14));
    border-radius: 6px;
    overflow: hidden;
    background: var(--craie, #f7f5ef);
}

/* En-tête pliable : même grammaire visuelle que .rechf-avances summary. */
.carte-resultats > summary {
    font-family: var(--releve, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent, #2c4a63);
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
}
.carte-resultats > summary::-webkit-details-marker { display: none; }
.carte-resultats > summary::before {
    content: '▸';
    display: inline-block;
    transition: transform .15s ease;
}
.carte-resultats[open] > summary::before { transform: rotate(90deg); }

/* Conteneur de la carte : hauteur fixe, sous l'en-tête du site. */
.carte-resultats__map {
    width: 100%;
    height: 360px;
    background: var(--craie, #f7f5ef); /* fond avant chargement des tuiles */
    z-index: 0;
}

@media (min-width: 700px) {
    .carte-resultats__map { height: 440px; }
}

/* Attribution OSM : petite mais toujours lisible (obligation de licence). */
.carte-resultats .leaflet-control-attribution { font-size: 11px; }

/* ── Marqueur maison (L.divIcon) ── */
.cr-marqueur {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Goutte à la teinte d'accent. */
.cr-marqueur__pin {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: var(--accent, #2c4a63);
    transform: rotate(-45deg);
    box-shadow: 0 1px 4px rgba(24, 34, 46, .45);
}

/* Compteur d'un cluster : centré dans la goutte (re-redressé). */
.cr-marqueur--cluster .cr-marqueur__pin {
    width: 30px;
    height: 30px;
    background: var(--encre, #18222e);
}
.cr-marqueur__count {
    transform: rotate(45deg);
    color: #fff;
    font-family: var(--releve, sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Étiquette de prix sous la goutte. */
.cr-marqueur__prix {
    margin-top: 3px;
    padding: 1px 6px;
    background: #fff;
    border: 1px solid var(--trait, rgba(24, 34, 46, .14));
    border-radius: 10px;
    color: var(--encre, #18222e);
    font-family: var(--releve, sans-serif);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(24, 34, 46, .25);
}
.cr-marqueur__des {
    font-weight: 400;
    opacity: .7;
}

/* ── Popup ── */
.cr-popup {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cr-popup__nom {
    font-family: var(--display, sans-serif);
    font-weight: 700;
    color: var(--encre, #18222e);
}
.cr-popup__prix {
    font-size: 0.85rem;
    color: var(--encre, #18222e);
}
.cr-popup__lien {
    margin-top: 0.15rem;
    font-family: var(--releve, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #2c4a63);
    text-decoration: none;
    font-weight: 700;
}
.cr-popup__lien:hover { text-decoration: underline; }