/* =============================================================================
   Bloc média + texte sur deux colonnes
   ============================================================================= */

.basic_2cols {
    overflow: hidden;

    .basic_2cols__content {
        display: grid;
        gap: var(--space-lg);
        align-items: start;
        position: relative;
    }

    .basic_2cols__content+.basic_2cols__content {
        margin-top: var(--space-4xl);
    }

    /* ------------------------------- Colonne texte ------------------------- */
    .basic_2cols__para {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        /* Le bloc titre est ici dans une colonne : il ne se centre plus et
           ne porte plus la marge basse des sections classiques. */
        .section__title {
            margin: 0;
            max-width: none;
            text-align: left;

            /* section.css centre le chapo (margin: 0 auto) : on le cale à gauche. */
            p:not(.section__eyebrow) {
                margin-left: 0;
                margin-right: 0;
            }
        }

        /* Espace entre le bloc titre/intro et le texte qui suit. */
        .section__title:not(:last-child) {
            margin-bottom: var(--space-lg);
        }

        .basic_2cols__text {
            max-width: 448px;
            color: var(--color-text-muted);
            text-wrap: pretty;

            p {
                line-height: var(--lh-relaxed);
            }

            p:last-child {
                margin-bottom: 0;
            }
        }

        .section__btn {
            margin: var(--space-xl) 0 0;
        }

        .cta {
            margin-top: var(--space-xl) !important;
        }
    }

    /* ------------------------------ Colonne média -------------------------- */
    .basic_2cols__media {
        position: relative;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: var(--border-radius-xl);
            transition: transform 0.7s var(--ease-out-expo);
        }

        img:hover {
            transform: scale(1.05);
        }

        /* Média unique */
        &:not(.has-mosaic):not(.media__video):not(.has-map) {
            overflow: hidden;
            border-radius: var(--border-radius-xl);

            &:not(.cover) {
                aspect-ratio: 4 / 5;
            }
        }

        &.media__video {
            aspect-ratio: auto;

            img,
            video {
                border-radius: var(--border-radius-xl);
            }
        }

        &.has-mosaic:not(.cover) {
            .basic_2cols__media-main {
                aspect-ratio: 4 / 5;
            }
        }
    }

    /* Mosaïque : média principal large à gauche, secondaires empilés à droite */
    .basic_2cols__mosaic {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-sm);
    }

    .basic_2cols__media-main {
        grid-column: span 8;
        overflow: hidden;
        border-radius: var(--border-radius-xl);
    }

    .basic_2cols__media-side {
        grid-column: span 4;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        height: 100%;
    }

    .basic_2cols__media-third {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        border-radius: var(--border-radius-xl);
    }

    .basic_2cols__media-second {
        flex: 0 0 auto;
        overflow: hidden;
        border-radius: var(--border-radius-xl);
        aspect-ratio: 3 / 4;
    }

    /* Carte interactive (Leaflet + OpenStreetMap) */
    .basic_2cols__map {
        height: 420px;
        overflow: hidden;
        border-radius: var(--border-radius-xl);
        background: var(--color-cream);
        box-shadow: 0 10px 30px -10px hsl(var(--hsl-ink) / 0.15);
    }

    /* Leaflet injecte ses propres styles : on rattrape ce qui entre en conflit
       avec le reset du thème. */
    .basic_2cols__map img {
        border-radius: 0;
        transition: none;
        max-width: none;
    }

    .basic_2cols__map img:hover {
        transform: none;
    }

    .basic_2cols__map .leaflet-container {
        height: 100%;
        width: 100%;
        font-family: var(--font-body);
        background: var(--color-cream);
    }

    .basic_2cols__map .leaflet-popup-content {
        font-family: var(--font-body);
        font-size: var(--fs-sm);
        line-height: var(--lh-snug);
        color: var(--color-text);
    }

    /* Citation posée sur le média */
    .basic_2cols__citation {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        min-width: 80%;
        margin: 0;
        padding: var(--space-md) var(--space-md) 0;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        background: var(--color-bg-page);
        color: var(--color-primary);
        font-family: var(--font-display);
        font-size: var(--fs-base);
        line-height: var(--lh-snug);
    }
}

@media (min-width: 576px) {
    .basic_2cols {

        .basic_2cols__mosaic,
        .basic_2cols__media-side {
            gap: var(--space-md);
        }
    }
}

@media (min-width: 992px) {
    .basic_2cols {
        .basic_2cols__content {
            grid-template-columns: 1fr 1fr;
            gap: var(--space-xl);
        }

        .basic_2cols__content.reverse {
            .basic_2cols__para {
                order: 2;
            }

            .basic_2cols__media {
                order: 1;
            }
        }

        .basic_2cols__citation {
            font-size: var(--fs-2xl);
            padding: var(--space-xl) var(--space-xl) 0;
        }

        .basic_2cols__map {
            height: 520px;
        }
    }
}


/* -----------------------------------------------------------------------------
   Liste à pictogrammes (coordonnées, horaires, points clés)
   -------------------------------------------------------------------------- */
.basic_2cols__liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
}

.basic_2cols__liste-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0;
    list-style: none;
}

.basic_2cols__liste-item::before {
    display: none;
}

.basic_2cols__liste-picto {
    flex: 0 0 auto;
    display: flex;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    background: hsl(var(--hsl-primary) / 0.1);
}

.basic_2cols__liste-picto::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    background-color: var(--color-primary);
    -webkit-mask: var(--picto-url) no-repeat center / contain;
    mask: var(--picto-url) no-repeat center / contain;
}

.basic_2cols__liste-intitule {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--semibold);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.basic_2cols__liste-contenu {
    margin: var(--space-3xs) 0 0;
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

/* Mosaïque à deux médias : sans troisième image, le média secondaire garde son
   aspect 3/4 et laisse un vide sous lui. Seul dans sa colonne, il l'occupe. */
.basic_2cols .basic_2cols__media-second:only-child {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
}

/* -----------------------------------------------------------------------------
   « Aligner texte et image » — champ basic_twocols_media_size, classe .cover

   .cover ne faisait que *retirer* l'aspect-ratio 4/5 : le cadre se retrouvait
   sans aucune hauteur. Or .basic_2cols__content aligne ses colonnes en « start »,
   donc la colonne média ne s'étire pas et sa hauteur vaut celle de son contenu.
   Le height:100% de l'image se résolvait alors contre un parent en hauteur auto
   — soit, par circularité, en auto : l'image reprenait son ratio naturel.

   Il n'y a jamais eu de max-height ; c'est l'absence de hauteur de référence qui
   l'empêchait de descendre plus bas.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .basic_2cols .basic_2cols__content .basic_2cols__media.cover {
        /* Annule le « start » de la grille : la colonne prend la hauteur de la
           rangée, donc celle du texte dès qu'il est plus haut que l'image. */
        align-self: stretch;
    }

    .basic_2cols .basic_2cols__content .basic_2cols__media.cover img {
        /* La hauteur du parent est désormais définie : le pourcentage se résout
           et object-fit: cover recadre au lieu de laisser l'image à son ratio.
           L'image reste dans le flux, sa hauteur naturelle sert donc de plancher
           à la rangée — un texte très court ne peut pas la faire disparaître. */
        height: 100%;
        min-height: 100%;
    }
}

/* Puce des entrées sans pictogramme.

   Le champ « picto » du répéteur est facultatif : quand il est vide, le
   gabarit n'émet pas le <span class="basic_2cols__liste-picto"> et l'entrée se
   retrouve sans aucun repère visuel. La puce ne s'affiche donc que là où la
   pastille manque, pour ne pas doubler le marqueur quand elle est présente.

   Elle annule le « display: none » posé plus haut sur ce même ::before, qui
   neutralisait la puce générique du thème. */
.basic_2cols__liste-item:not(:has(.basic_2cols__liste-picto))::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    /* Cale la puce sur la première ligne de l'intitulé plutôt que sur le haut
       de la boîte ; en em, elle suit la taille du texte. */
    margin-top: 0.45em;
    border-radius: var(--border-radius-full);
    background: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   « Aligner texte et image » : la colonne texte adopte la hauteur du média

   La règle plus haut n'étirait que .basic_2cols__media. En média unique cela
   suffisait — c'est le texte qui donnait la hauteur et l'image qui la prenait.
   En mosaïque le rapport s'inverse : les ratios internes (4/5 sur la vignette
   principale, 3/4 sur la secondaire) donnent au média une hauteur propre, en
   général supérieure à celle du texte. C'est donc au texte d'adopter celle du
   média, sans quoi les deux colonnes ne se rejoignent jamais.

   Le :has() est porté par .basic_2cols__content et non par .cover : le parent
   commun est le seul endroit d'où l'on puisse atteindre la colonne sœur.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .basic_2cols .basic_2cols__content:has(>.basic_2cols__media.cover)>.basic_2cols__para {
        align-self: stretch;
    }

    /* La mosaïque occupe la colonne quand c'est le texte qui s'avère le plus
       haut : sans cela elle laisserait un vide sous elle. min-height plutôt que
       height — les ratios internes restent le plancher, la mosaïque ne peut pas
       se retrouver écrasée par un texte court. */
    .basic_2cols .basic_2cols__content .basic_2cols__media.has-mosaic.cover>.basic_2cols__mosaic {
        min-height: 100%;
    }
}