/** BLOC 18 — Carte géographique interactive (Figma node 1470:2668)
 *  Le rendu et les styles principaux viennent de css/map-common.css (déjà enqueué)
 *  via la classe `.map-risks-section` portée par le wrapper interne.
 *  Ici on ajoute uniquement les styles spécifiques à l'intégration dans
 *  le moteur de sections (titre, description, CTA optionnel). */

.section-map .section-map__interactive {
    /* override : map-risks-section a son propre padding via map-common.css ;
       on s'aligne sur le container de section déjà fourni par section--padding-* */
    padding: 0;
    margin: 0;
}

/* Titre/description : on laisse map-common gérer la typo, mais on autorise
   l'accent vert via <span class="accent"> hérité du moteur */
.section-map__title .accent,
.section-map__title .green-text { color: var(--color-accent); }

/* CTA optionnel sous le selecteur (au-dessus de la carte sur mobile) */
.section-map__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    height: 42px;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-body);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color var(--transition-base);
    align-self: flex-start;
    margin-top: var(--space-3);
}
.section-map__cta:hover {
    background-color: var(--color-grey-100);
    color: var(--color-primary-dark);
}
.section-map__cta svg { flex-shrink: 0; }
.section--bg-white .section-map__cta,
.section--bg-gray .section-map__cta {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.section--bg-white .section-map__cta:hover,
.section--bg-gray .section-map__cta:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}