/**
 * map.css — Section Map
 */

/* -------------------------
   Section
------------------------- */
.section-map {
    position: relative;
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
}

/* -------------------------
   Inner layout — mobile : colonne
------------------------- */
.section-map__inner {
    position: relative;
    z-index: var(--z-above);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: var(--container-max-width-xl);
    margin: auto;
    padding-inline: var(--section-padding-x);
}

/* -------------------------
   Contenu texte (gauche)
------------------------- */
.section-map__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* -------------------------
   Titre
------------------------- */
.section-map__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    color: var(--color-black);
    text-transform: uppercase;
}

/* -------------------------
   Texte
------------------------- */
.section-map__text {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-loose);
    color: var(--color-gray-dark);
}

/* -------------------------
   Iframe container
------------------------- */
.section-map__frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.section-map__frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* -------------------------
   Tablette 768px — 2 colonnes
------------------------- */
@media (min-width: 768px) {
    .section-map__inner {
        flex-direction: row;
        align-items: center;
    }

    .section-map__content {
        flex: 1;
    }

    .section-map__frame {
        flex: 1;
        align-self: stretch;
        aspect-ratio: auto;
    }

    .section-map__title {
        font-size: var(--font-size-7xl);
    }
}

/* -------------------------
   Desktop 1024px
------------------------- */
@media (min-width: 1024px) {
    .section-map__title {
        font-size: var(--font-size-10xl);
    }
}