/* ============================
   MEDIA BLOCK — TEXTE 1/3 + GROUPE D'IMAGES
   Nouvelle méthodologie : le texte occupe une largeur fixe (≈1/3),
   les images (1, 2 ou plus, portrait ou paysage) sont regroupées dans
   un conteneur à hauteur commune, réparties à parts égales en largeur
   et recadrées (object-fit: cover) pour toujours garder la même
   hauteur, les mêmes coins arrondis et un espacement régulier —
   quelle que soit leur résolution ou leur orientation d'origine.
============================ */

.mediaBlock {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 64px) clamp(16px, 4vw, 40px);
    gap: clamp(24px, 4vw, 48px);
}

/* ORDRE TEXTE / IMAGES (desktop) */
.mediaBlockFromRight .mediaBlockText { order: 0; }
.mediaBlockFromRight .mediaBlockMediaGroup { order: 1; }

.mediaBlockFromLeft .mediaBlockMediaGroup { order: 0; }
.mediaBlockFromLeft .mediaBlockText { order: 1; }

/* TEXTE — largeur fixe à ~1/3 du bloc */
.mediaBlockText {
    flex: 0 0 33%;
    max-width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.mediaBlockTitle {
    margin: 0;
    padding: 0;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

.mediaBlockSubTitle
{
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
    font-size: clamp(1.3rem, 2.4vw, 1.3rem);
    font-weight: 600;
}

.mediaBlockDescription {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

/* Bloc texte seul (pas d'images dans ce mediaBlock) : le texte prend
   toute la largeur au lieu de rester coincé à 33%. */
.mediaBlock:has(.mediaBlockText:only-child) .mediaBlockText {
    flex: 1 1 100%;
    max-width: 100%;
}

/* GROUPE D'IMAGES — hauteur commune, réparties à parts égales,
   peu importe leur nombre ou leur orientation d'origine */
.mediaBlockMediaGroup {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 20px);
    height: clamp(220px, 30vw, 420px);
    min-width: 0;
}

.mediaBlockMedia {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    background: var(--col-border);
}

/* Une seule image dans le groupe : on ne crop pas. On respecte la
   hauteur commune et on laisse la largeur s'ajuster à son propre ratio
   (object-fit: contain) plutôt que de forcer un remplissage qui
   couperait une image carrée ou portrait.
   Détection via :has() (moderne) ET via la classe explicite
   .mediaBlockMediaGroupSingle posée en HTML (garantie tous navigateurs). */
.mediaBlockMediaGroup:has(> img:only-child),
.mediaBlockMediaGroupSingle {
    justify-content: center;
}

.mediaBlockMediaGroup:has(> img:only-child) .mediaBlockMedia,
.mediaBlockMediaGroupSingle .mediaBlockMedia {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    background: #ffffff;
}

/* ============================
   RESPONSIVE — MOBILE
   Le texte passe toujours au-dessus (lisibilité en premier), les images
   en dessous sur toute la largeur, hauteur réduite et fixe.
============================ */
@media (max-width: 820px) {
    .mediaBlock {
        flex-direction: column;
        gap: 20px;
    }

    .mediaBlockFromRight .mediaBlockText,
    .mediaBlockFromLeft .mediaBlockText {
        order: 0;
    }

    .mediaBlockFromRight .mediaBlockMediaGroup,
    .mediaBlockFromLeft .mediaBlockMediaGroup {
        order: 1;
    }

    .mediaBlockText {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .mediaBlockMediaGroup {
        flex: 1 1 100%;
        height: 260px;
    }
}

/* ============================
   ANIMATION AU SCROLL — appliquée au groupe d'images entier
============================ */
.mediaBlockFromRight .mediaBlockMediaGroup {
    opacity: 0;
    transform: translateX(6%);
    transition:
        opacity 0.6s ease-out,
        transform 0.9s cubic-bezier(0.16, 1.2, 0.3, 1);
}

.mediaBlockFromRight .mediaBlockMediaGroup.visible {
    opacity: 1;
    transform: translateX(0);
}

.mediaBlockFromRight .mediaBlockMediaGroup.exit {
    opacity: 0;
    transform: translateX(6%);
}

.mediaBlockFromLeft .mediaBlockMediaGroup {
    opacity: 0;
    transform: translateX(-6%);
    transition:
        opacity 0.6s ease-out,
        transform 0.9s cubic-bezier(0.16, 1.2, 0.3, 1);
}

.mediaBlockFromLeft .mediaBlockMediaGroup.visible {
    opacity: 1;
    transform: translateX(0);
}

.mediaBlockFromLeft .mediaBlockMediaGroup.exit {
    opacity: 0;
    transform: translateX(-6%);
}

@media (prefers-reduced-motion: reduce) {
    .mediaBlockMediaGroup {
        transition: none;
    }
}