/* ============================================================
   PAN Blocs service — texte + slider
   Desktop : texte à gauche / slider à droite
   Mobile  : slider en haut / texte en bas
   ============================================================ */

.pan-blocs {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pan-blocs *, .pan-blocs *::before, .pan-blocs *::after { box-sizing: border-box; }

.pan-blocs__item {
    align-items: flex-start;   /* le haut du titre ne doit pas dépasser au-dessus du média */
    display: flex;
    gap: 56px;
    margin: 0 auto;
    max-width: 1180px;
    padding: 56px 2%;
}

/* nth-of-type (pas nth-child) : le [pan_estim_banner] inséré après le 3e bloc
   est un <div>, il ne doit pas décaler l'alternance des <section> */
.pan-blocs__item:nth-of-type(even) { background: #f6f6f6; }

.pan-blocs__item--no-media { display: block; }
.pan-blocs__item--no-media .pan-blocs__text { max-width: 900px; }

.pan-blocs__text { flex: 1 1 46%; min-width: 0; }
.pan-blocs__media { flex: 1 1 54%; min-width: 0; }

.pan-blocs__title {
    color: #111;
    font-family: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
    font-size: 22px;
    font-weight: 100;
    line-height: 1.2;
    margin: 0 0 16px;
}

.pan-blocs__body {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    overflow: hidden;
    transition: max-height 420ms cubic-bezier(.4, 0, .2, 1);
}

/* Fondu en bas du texte tronqué, pour indiquer la coupure */
.pan-blocs__item.is-collapsed .pan-blocs__body {
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}

.pan-blocs__more {
    background: none;
    border: 0;
    color: #111;
    cursor: pointer;
    display: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    margin-top: 12px;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pan-blocs__item.has-more .pan-blocs__more { display: inline-block; }
.pan-blocs__more:hover { color: #fbcb07; }

.pan-blocs__body p { margin: 0 0 14px; }
.pan-blocs__body p:last-child { margin-bottom: 0; }
.pan-blocs__body strong { color: #222; }
.pan-blocs__body ol { margin: 0 0 14px; padding-left: 20px; }
.pan-blocs__body li { margin-bottom: 10px; }
.pan-blocs__body a { color: #111; text-decoration: underline; }

/* ── Slider / image ─────────────────────────────────────────── */

.pan-blocs__media {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.pan-blocs__track {
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
}

.pan-blocs__track::-webkit-scrollbar { display: none; }

.pan-blocs__media:not(.pan-blocs__media--slider) .pan-blocs__track { overflow: visible; }

.pan-blocs__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

.pan-blocs__slide img {
    aspect-ratio: 16 / 11;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Flèches */
.pan-blocs__nav {
    align-items: center;
    background: rgba(17, 17, 17, .55);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background .2s ease;
    width: 40px;
    z-index: 2;
}

.pan-blocs__nav:hover { background: #fbcb07; color: #111; }
.pan-blocs__nav--prev { left: 12px; }
.pan-blocs__nav--next { right: 12px; }

/* Puces */
.pan-blocs__dots {
    bottom: 12px;
    display: flex;
    gap: 7px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}

.pan-blocs__dots button {
    background: rgba(255, 255, 255, .55);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 8px;
    padding: 0;
    transition: background .2s ease, transform .2s ease;
    width: 8px;
}

.pan-blocs__dots button.is-active { background: #fbcb07; transform: scale(1.25); }

/* ── Mobile : slider en haut, texte en bas ─────────────────── */

@media (max-width: 900px) {
    .pan-blocs__item {
        flex-direction: column;
        gap: 24px;
        padding: 40px 5%;
    }
    .pan-blocs__text,
    .pan-blocs__media { flex: 1 1 auto; width: 100%; }
    .pan-blocs__media { order: -1; }   /* slider au-dessus du texte */
}