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

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

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

.enrouleur {
    display: grid;
    /* 2 colonnes par défaut pour l'alternance */
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px 0;
    text-align: left;
    align-items: center;
    /* Centre verticalement le contenu des cellules */
}

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

.enrouleur>div {
    padding: 20px;
    border-radius: 8px;
    line-height: 1.6;
    font-size: 1.05em;
    color: #333;
    height: 100%;
    /* S'assurer que le div remplit sa cellule */
}

/* Styles pour les blocs de texte */
.C2,
.C3,
.C6,
.C7,
.C10,
.C11 {
    background-color: #f7f7f7;
    text-align: justify;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour les blocs d'images */
.C1,
.C4,
.C5,
.C8,
.C9,
.C12 {
    padding: 0;
    /* Pas de padding sur les blocs d'images pour qu'elles touchent les bords */
    background-color: transparent;
    box-shadow: none;
    display: flex;
    /* Centrage de l'image si elle est plus petite que le conteneur */
    justify-content: center;
    align-items: center;
}

.enrouleur img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.enrouleur ul {
    list-style: disc inside;
    padding-left: 20px;
}

/* --- 3. Disposition en Damier (Image/Texte alterné) --- */

/* LIGNE 1 : Image (C1) à Gauche, Texte (C2) à Droite */
.C1 {
    grid-column: 1;
}

.C2 {
    grid-column: 2;
}

/* LIGNE 2 : Texte (C3) à Gauche, Image (C4) à Droite */
.C3 {
    grid-column: 1;
}

.C4 {
    grid-column: 2;
}

/* LIGNE 3 : Image (C5) à Gauche, Texte (C6) à Droite */
.C5 {
    grid-column: 1;
}

.C6 {
    grid-column: 2;
}

/* LIGNE 4 : Texte (C7) à Gauche, Image (C8) à Droite */
.C7 {
    grid-column: 1;
}

.C8 {
    grid-column: 2;
}

/* LIGNE 5 : Image (C9) à Gauche, Texte (C10) à Droite (Électronique) */
.C9 {
    grid-column: 1;
}

.C10 {
    grid-column: 2;
}

/* LIGNE 6 : Texte (C11) à Gauche, Image (C12) à Droite (Logiciel) */
.C11 {
    grid-column: 1;
}

.C12 {
    grid-column: 2;
}


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

@media (max-width: 800px) {
    .enrouleur {
        /* Passage à une seule colonne pour les petits écrans */
        grid-template-columns: 1fr;
        gap: 20px;
        /* Réduit l'espace entre les éléments empilés */
    }

    /* Tous les éléments doivent s'étendre sur la colonne unique */
    .enrouleur>div {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
        padding: 15px;
    }

    /* Ordre d'empilement : Image puis Texte pour chaque paire de contenu */
    /* L'ordre par défaut dans le HTML est respecté, pas besoin de réordonner */

    .enrouleur img {
        margin: 0;
        /* Retire les marges inutiles en mode colonne */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        /* Ombre plus légère */
    }

    .C1,
    .C4,
    .C5,
    .C8,
    .C9,
    .C12 {
        /* Assure que l'image apparaît juste avant le texte correspondant */
        order: -1;
    }

    .C2 {
        order: 1;
    }

    .C3 {
        order: 2;
    }

    /* C'est un bloc de texte, il doit suivre l'image C4 */
    /* La logique d'ordre est complexe ici. Simplifions : */
    /* En mode 1 colonne, l'ordre du HTML est idéal : Image puis Texte */
    .C1,
    .C2,
    .C3,
    .C4,
    .C5,
    .C6,
    .C7,
    .C8,
    .C9,
    .C10,
    .C11,
    .C12 {
        order: initial;
    }

    /* Pour l'alternance Img/Txt/Txt/Img, il faut forcer l'ordre si on veut Img->Txt sur mobile */
    /* Cependant, pour la clarté, nous allons laisser l'ordre du HTML. */

    /* Le HTML actuel est : Img (C1), Txt (C2), Txt (C3), Img (C4), Img (C5), Txt (C6), Txt (C7), Img (C8), Img (C9), Txt (C10), Txt (C11), Img (C12) */
    /* L'ordre idéal sur mobile est :
    C1 (Img), C2 (Txt)
    C3 (Txt), C4 (Img) -> Cet ordre n'est pas idéal
    C5 (Img), C6 (Txt)
    ...
    */

    /* Maintenir l'ordre du HTML, qui reste cohérent pour la narration */
}