main img {
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    border-radius: 12px;
    height: auto;
    max-width: 100%; /* permettre aux images d'occuper leur colonne sans être limitées globalement */
}

/* Layout pour les sections alternées texte / image */
.section-row {
    display: grid;
    grid-template-columns: 60% 40%; /* texte 60% / image 40% */
    gap: 2rem;
    align-items: center;
    margin: 2.5rem 0;
    padding: 0 2.5rem; /* augmenter légèrement l'espace intérieur pour éviter que la colonne droite colle au bord du main */
}

.section-row .text {
    padding: 0 1rem;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
}

.section-row .media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    /* Ne pas forcer un ratio ni couper l'image : permettre l'affichage complet */
    aspect-ratio: auto;
    max-height: 420px; /* limite visuelle sans recadrer */
    background: transparent; /* garder le fond neutre */
}

/* Première disposition: texte à gauche, image à droite (odd = 1ère, 3ème, ... ) */
.section-row:nth-of-type(odd) {
    grid-template-areas: "text media";
}
.section-row:nth-of-type(odd) .text { grid-area: text }
.section-row:nth-of-type(odd) .media { grid-area: media }

/* Inverse pour les sections paires: image à gauche, texte à droite */
.section-row:nth-of-type(even) {
    grid-template-areas: "media text";
}
.section-row:nth-of-type(even) .text { grid-area: text }
.section-row:nth-of-type(even) .media { grid-area: media }

/* Ajustements de l'image pour occuper sa colonne sans être coupée */
.section-row .media img {
    max-width: 100%;
    max-height: 420px; /* la même limite que le conteneur pour uniformiser */
    width: auto; /* permet des images plus étroites si nécessaire */
    height: auto; /* conserver les proportions d'origine */
    object-fit: contain; /* IMPORTANT : ne pas recadrer, afficher l'image entière */
    display: block;
}

/* Espace entre l'image et la légende pour cette page */
.section-row .media figure figcaption {
    margin-top: 12px;
}

/* Responsive: empiler verticalement sur petits écrans */
@media (max-width: 768px) {
    .section-row {
        display: flex; /* utiliser flex en colonne pour garantir l'ordre visuel indépendamment de l'ordre DOM */
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem; /* réduire le padding sur mobile */
    }

    /* Forcer le texte au dessus de la media quel que soit l'ordre DOM */
    .section-row .text { order: 0; grid-area: text; margin-bottom: 1rem; }
    .section-row .media { order: 1; grid-area: media; }

    /* sur mobile, ne pas forcer un ratio fixe pour que les images restent lisibles */
    .section-row .media {
        aspect-ratio: auto;
        max-height: none;
        padding: 0 0; /* moins de padding sur mobile pour un rendu plus compact */
    }

    /* garder une marge et réduire la taille d'image */
    .section-row .media img {
        width: 100%;
        height: auto;
        object-fit: contain; /* éviter le recadrage sur mobile */
    }
}