/* ########################### */
/* DANS style-brodeuse.css */
/* ########################### */

/* --- 1. Conteneur global et configuration de la grille --- */

.brodeuse-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.brodeuse {
    display: grid;
    /* 2 colonnes de largeur égale */
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px 0;
    align-items: stretch;
    /* Les éléments s'étirent sur toute la hauteur de la ligne */
}

/* --- 2. Styles des Blocs de Contenu (Générique) --- */

.brodeuse>div {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    font-size: 1.05em;
    color: #333;
    text-align: justify;
}

/* Styles pour les conteneurs de texte */
.one,
.three,
.five,
.height {
    background-color: #f7f7f7;
}

.one {
    background-color: #f0f7ff;
}

/* Bleu très clair */
.three {
    background-color: #fff0f7;
}

/* Rose très clair */
.five {
    background-color: #f0fff0;
}

/* Vert très clair */
.height {
    background-color: #fffff0;
}

/* Jaune très clair */

.brodeuse img {
    display: block;
    /* 🔑 MODIFICATION CLÉ : Réduction de la taille de l'image à 50% */
    width: 50%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Ajout d'une marge auto horizontale pour centrer les images plus petites */
    margin: 0 auto;
}

/* Les conteneurs d'images n'ont pas de padding interne */
.two,
.four,
.six,
.seven,
.nine {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    /* Ceci permettait déjà le centrage */
    justify-content: center;
    /* Centre l'image si elle est plus petite */
    align-items: center;
}

.brodeuse ul {
    list-style: disc outside;
    padding-left: 20px;
    margin-top: 15px;
}

/* --- 3. Positionnement explicite des Blocs avec grid-column/grid-row/span (Desktop) --- */

/* Ligne 1 : Texte Gauche, Image Droite */
.one {
    grid-column: 1 / span 1;
    grid-row: 1;
}

.two {
    grid-column: 2 / span 1;
    grid-row: 1;
}

/* Ligne 2 : Image Gauche, Texte Droite (Permutation dans le Grid pour l'alternance visuelle) */
.three {
    grid-column: 2 / span 1;
    grid-row: 2;
}

.four {
    grid-column: 1 / span 1;
    grid-row: 2;
}

/* Ligne 3 : Texte Gauche, Image Droite */
.five {
    grid-column: 1 / span 1;
    grid-row: 3;
}

.six {
    grid-column: 2 / span 1;
    grid-row: 3;
}

/* Ligne 4 : Image Gauche, Texte Droite */
.seven {
    grid-column: 1 / span 1;
    grid-row: 4;
}

.height {
    grid-column: 2 / span 1;
    grid-row: 4;
}

/* Ligne 5 : Image finale sur toute la largeur */
.nine {
    /* S'étend sur les 2 colonnes */
    grid-column: 1 / span 2;
    grid-row: 5;
}

/* --- 4. Media Query (Adaptation pour mobile : 1 colonne) --- */

@media (max-width: 800px) {
    .brodeuse {
        /* Passage à une seule colonne sur les petits écrans */
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Tous les éléments s'étendent sur 1 colonne et ignorent les lignes/colonnes explicites */
    .brodeuse>div {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
        padding: 15px;
    }

    /* Rétablit le padding pour les conteneurs d'images sur mobile pour l'espacement */
    .two,
    .four,
    .six,
    .seven,
    .nine {
        padding: 0;
    }

    /* 🔑 Modification pour que les images reprennent toute la largeur sur mobile */
    .brodeuse img {
        width: 100%;
        /* Les images reprennent toute la largeur de leur conteneur sur mobile */
        margin: 0 auto;
        /* Centrage maintenu */
    }

    /* Ordre initial du HTML:
       .one (Txt), .two (Img) -> OK
       .three (Txt), .four (Img) -> INVERSION SOUHAITÉE: Img puis Txt
       .five (Txt), .six (Img) -> OK
       .seven (Img), .height (Txt) -> OK
    */

    /* Forcer l'ordre Img -> Txt pour la paire three/four (qui est Txt/Img dans le HTML) */
    .three {
        order: 4;
    }

    /* Texte des cadres */
    .four {
        order: 3;
    }

    /* Image des cadres */

    /* La paire one/two est Txt/Img, nous la laissons Txt/Img sur mobile pour garder la structure narrative */
    .one {
        order: 1;
    }

    .two {
        order: 2;
    }

    .five {
        order: 5;
    }

    /* Txt */
    .six {
        order: 6;
    }

    /* Img */

    /* La paire seven/height est Img/Txt, nous la laissons Img/Txt */
    .seven {
        order: 7;
    }

    /* Img */
    .height {
        order: 8;
    }

    /* Txt */

    .nine {
        order: 9;
    }

    /* Img finale */
}