.map {
    .container {
        display: flex;
        flex-direction: column;
        gap: 50px;

        @media (min-width: 992px) {
            flex-direction: row;
        }

        #map {
            flex: 0.6;
            /* La carte SVG n'est pas exploitable au doigt : sous 992px elle
               laisse la place a #ville_select, qui prend le relais. */
            display: none;

            @media (min-width: 992px) {
                display: block;
            }

            &>svg {
                g {

                    image,
                    circle {
                        transition: all 0.2s ease;
                    }

                    &.data-selected,
                    &:hover {
                        circle {
                            r: 16px;
                            stroke: var(--white);
                            fill: var(--white);
                        }
                    }

                    path {
                        fill: var(--color-secondary);
                        stroke: var(--color-primary);

                        &.departement {
                            transition: all 0.2s ease;

                            &.departement-val-de-marne,
                            &.departement-seine-saint-denis,
                            &.departement-hauts-de-seine {
                                display: none;
                            }

                            &.departement-paris {
                                fill: transparent;
                                stroke: transparent;
                            }

                            &.data-highlighted {
                                &:not(.departement-paris) {
                                    fill: rgba(212, 150, 107, 0.7);
                                }
                            }
                        }
                    }

                    circle {
                        r: 16px;
                        fill: var(--color-secondary-muted);
                        transition: all 0.2s ease;

                        @media (min-width: 992px) {
                            r: 12px;
                        }
                    }
                }

            }
        }

        .wrapper_title {
            flex: 0.4;

            .map-legend {
                border: 1px solid var(--color-secondary-muted);
                width: 100%;
                border-radius: var(--border-radius);
                background: rgba(52, 83, 39, 0.1);
                padding: 20px 30px;

                .map-legend_title {
                    color: var(--color-primary);
                }

                .bouton {
                    margin-top: 15px;
                }

                h2,
                h3,
                h4 {
                    margin: 0;
                }

                h5 {
                    margin-top: 0;

                    &#decouvrez {
                        margin: 0;
                    }
                }

                .map-legend_infos {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                }

                /* Faux select des villes (< 992px, la carte prend le relais
                   au-dessus). Trigger en pilule facon .bouton, liste en
                   overlay absolu pour ne pas pousser le CTA vers le bas. */
                #ville_select {
                    position: relative;
                    margin-top: 15px;

                    .ville_select_trigger {
                        appearance: none;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 10px;
                        padding: 12px 22px;
                        font-family: var(--main-font);
                        font-size: 1rem;
                        font-weight: var(--medium);
                        text-align: left;
                        color: var(--color-secondary);
                        background: var(--white);
                        border: 1px solid rgba(52, 83, 39, 0.35);
                        border-radius: var(--border-radius-full);
                        cursor: pointer;
                        transition: var(--transition);

                        /* Chevron CSS : pas d'asset a charger, il pivote a
                           l'ouverture. */
                        &::after {
                            content: "";
                            flex: none;
                            width: 9px;
                            height: 9px;
                            border-right: 2px solid var(--color-primary);
                            border-bottom: 2px solid var(--color-primary);
                            transform: translateY(-2px) rotate(45deg);
                            transition: var(--transition);
                        }

                        &:hover {
                            border-color: var(--color-primary);
                        }
                    }

                    .ville_select_liste {
                        position: absolute;
                        top: calc(100% + 8px);
                        left: 0;
                        right: 0;
                        z-index: 5;
                        display: flex;
                        flex-direction: column;
                        max-height: 240px;
                        overflow-y: auto;
                        overflow-x: hidden;
                        overscroll-behavior: contain;
                        -webkit-overflow-scrolling: touch;
                        background: var(--white);
                        border: 1px solid rgba(52, 83, 39, 0.35);
                        border-radius: var(--border-radius);
                        box-shadow: 0 12px 30px rgba(25, 40, 17, 0.15);
                        scrollbar-width: thin;
                        scrollbar-color: var(--color-primary) transparent;

                        /* Etat ferme : visibility (et non display) pour garder
                           la transition d'ouverture. */
                        opacity: 0;
                        visibility: hidden;
                        transform: translateY(-6px);
                        transition: var(--transition);

                        &::-webkit-scrollbar {
                            width: 6px;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: var(--color-primary);
                            border-radius: var(--border-radius-full);
                        }

                        &::-webkit-scrollbar-track {
                            background: transparent;
                        }
                    }

                    .option_ville {
                        appearance: none;
                        width: 100%;
                        padding: 12px 22px;
                        font-family: var(--main-font);
                        font-size: 1rem;
                        font-weight: var(--medium);
                        text-align: left;
                        color: var(--color-secondary);
                        background: none;
                        border: none;
                        border-bottom: 1px solid rgba(52, 83, 39, 0.12);
                        cursor: pointer;
                        transition: var(--transition);
                        /* liseré d'accent a 0, deploye a 3px au survol */
                        box-shadow: inset 0 0 0 var(--color-primary);

                        &:last-child {
                            border-bottom: none;
                        }

                        &:hover,
                        &:focus-visible {
                            background: var(--color-primary-tint);
                            box-shadow: inset 3px 0 0 var(--color-primary);
                        }

                        /* Reprend la convention .data-selected deja utilisee
                           sur les marqueurs SVG. */
                        &.data-selected {
                            background: var(--color-secondary-muted);
                            color: var(--white);
                            box-shadow: inset 3px 0 0 var(--color-primary);
                        }
                    }

                    &.is-open {
                        .ville_select_trigger {
                            border-color: var(--color-primary);

                            &::after {
                                transform: translateY(2px) rotate(-135deg);
                            }
                        }

                        .ville_select_liste {
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(0);
                        }
                    }

                    @media (min-width: 992px) {
                        display: none;
                    }
                }
            }
        }
    }
}