.region-instagram {
    position: relative;
    overflow: hidden;
    padding-block: var(--gap2) var(--gap3);
    background-color: var(--grey-50);
}

.region-instagram.is-multiple {
    padding-top: var(--gap3);
}

/* Titre, intro, cartes et navigation espacés de 24px */
.region-instagram > .ctnr {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap15);
}

/*
 * Tracé pointillé décoratif : le segment (queue en bas à gauche, repère en haut
 * à droite) est pivoté de 41.97deg pour que sa queue et sa croix soient à la
 * même hauteur, puis répété tous les 367px (longueur queue → croix) sur une
 * même rangée : la queue de chaque segment prolonge la croix du précédent, ce
 * qui forme une ligne continue sur toute la largeur, derrière les cartes.
 * --trail-top place la ligne par rapport au haut des cartes (.stage).
 */

.region-instagram .stage {
    position: relative;
}

.region-instagram .stage > .posts {
    position: relative;
    z-index: 1;
}

.region-instagram .decor {
    --trail-top: 25px;

    position: absolute;
    top: var(--trail-top);
    left: calc(50% - 367px * 4);
    display: flex;
    gap: 5px;
    pointer-events: none;
}

.region-instagram.is-multiple .decor {
    --trail-top: -48px;
}

.region-instagram .trail {
    display: block;
    flex-shrink: 0;
    width: 362px;
    max-width: none;
    height: auto;
    transform: rotate(41.97deg);
}

/* Titre : logo Tour de France du Mentorat + carte */

.region-instagram .heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.region-instagram .heading .logo {
    display: block;
    width: 410px;
    max-width: 100%;
    height: auto;
}

.region-instagram .heading .map {
    display: block;
    flex-shrink: 0;
    width: 108px;
    height: auto;
}

.region-instagram .intro {
    max-width: 760px;
    margin: 0 auto 5px;
    color: var(--primary-400);
    text-align: center;
}

/* Cartes publication */

.region-instagram .list {
    display: flex;
}

.region-instagram.is-single .list {
    justify-content: center;
}

/*
 * Slider : nombre de cartes visibles automatique selon la largeur du conteneur
 * (slidesPerView: 'auto'). Chaque slide réserve 15px de part et d'autre pour
 * contenir la rotation de la carte : aucune superposition, 15px entre les cartes.
 * Le slider déborde du conteneur jusqu'aux deux bords de l'écran (rogné par
 * l'overflow de la section).
 */

/* Marges négatives : le padding du slider (place pour la rotation des cartes) ne s'ajoute pas au gap de 24px */
.region-instagram .posts.swiper {
    overflow: visible;
    margin: calc(var(--gap15) * -1) 0 calc(var(--gap15) * -1) -15px;
    padding-block: var(--gap15);
}

.region-instagram .swiper-slide {
    width: auto;
    padding-inline: 15px;
}

.region-instagram .card {
    display: flex;
    flex-direction: column;
    gap: var(--gap1);
    box-sizing: border-box;
    width: 332px;
    max-width: calc(100vw - 80px);
    padding: var(--gap1);
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 14px 6px color-mix(in srgb, var(--primary-400) 20%, transparent);
    color: var(--grey-700);
    text-decoration: none;
    transform: rotate(var(--tilt, -3.04deg));
    transition: transform var(--lm-duration) var(--lm-ease-out);
}

.region-instagram a.card:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 4px;
}

/* Repli sans JS : lm-region-instagram.js calcule --tilt selon la position de chaque carte */
.region-instagram.is-multiple .swiper-slide:nth-child(odd) .card {
    --tilt: 3.82deg;
}

.region-instagram a.card:hover,
.region-instagram a.card:focus-visible,
.region-instagram.is-multiple .swiper-slide a.card:hover,
.region-instagram.is-multiple .swiper-slide a.card:focus-visible {
    transform: rotate(0deg) translateY(-6px);
}

.region-instagram .card .visual {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--grey-100);
}

.region-instagram .card .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap05);
}

.region-instagram .card .account {
    display: flex;
    align-items: center;
    gap: 10px;
}

.region-instagram .card .avatar {
    display: block;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.region-instagram .card .name {
    font: 700 16px/1.5 var(--f1);
}

.region-instagram .card .icon {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: auto;
}

/* Navigation : réutilise les boutons Swiper du thème (lm-swiper-nav.css), centrés */

.region-instagram .swiper-navigation {
    justify-content: center;
    margin-top: 0;
}

.region-instagram .swiper-button {
    width: auto;
    gap: var(--gap1);
}

.region-instagram .swiper-button-prev {
    margin-right: 0;
}

.region-instagram .swiper-button > div {
    border-color: var(--primary-500);
    background: var(--primary-500);
}

.region-instagram .swiper-button > div.swiper-button-disabled {
    background: var(--white);
}

.region-instagram .swiper-button > div.swiper-button-disabled::after {
    color: var(--primary-500);
}

.region-instagram .swiper-button-lock {
    display: none;
}

@media (max-width: 767px) {

    .region-instagram {
        padding-block: var(--gap2);
    }

    .region-instagram .decor {
        display: none;
    }

    .region-instagram .heading .map {
        width: 72px;
    }

    .region-instagram .heading .logo {
        width: calc(100% - 82px);
    }

    .region-instagram .posts.swiper {
        margin-left: 0;
    }

    .region-instagram .swiper-navigation {
        flex-direction: row;
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .region-instagram .card {
        transition: none;
    }
}