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

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

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

.x1 {
    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) --- */

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

.x1 img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Les conteneurs d'images n'ont pas de padding interne pour que l'image touche les bords */
.X1gauche,
.AMS,
.tete,
.Ecran {
    padding: 0;
}

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

/* Bloc 1 : Image X1 (Grande) */
.X1gauche {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    /* Centre l'image verticalement dans son espace étendu */
}

.X1texte {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    background-color: #f0f7ff;
}

#bouton {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    text-align: center;
    padding: 15px;
    background-color: #e6f0ff;
}

#bouton button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

#bouton button:hover {
    background-color: #0056b3;
}

/* Ligne 3 et 4 : Alternance AMS */

/* Bloc 4 : AMS Image */
.AMS {
    /* Colonne 2, Ligne 3 */
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    background-color: transparent;
    box-shadow: none;
}

/* Bloc 5 : AMS Texte */
.AMStexte {
    /* Colonne 1, Ligne 3 (Inversion) */
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    background-color: #fff9e6;
}

/* Ligne 5 : Tête et Vitesse (2 blocs courts) */

/* Bloc 6 : Tête Image */
.tete {
    /* Colonne 1, Ligne 4 */
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
    background-color: transparent;
    box-shadow: none;
}

/* Bloc 7 : Vitesse Texte */
.Vitesse {
    /* Colonne 2, Ligne 4 */
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
    background-color: #e6ffe6;
    display: flex;
    align-items: center;
    /* Centre le texte dans ce petit bloc */
}

/* Ligne 6 : Filaments et Écran */

/* Bloc 8 : Filaments Texte */
.Filaments {
    /* Colonne 1, Ligne 5 */
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
    background-color: #fbe6ff;
}

/* Bloc 9 : Écran Image */
.Ecran {
    /* Colonne 2, Ligne 5 */
    grid-column: 2 / span 1;
    grid-row: 5 / span 1;
    background-color: transparent;
    box-shadow: none;
}

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

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

    /* Tous les éléments doivent s'étendre sur la colonne unique et ignorer les lignes et colonnes explicites */
    .X1gauche,
    .X1texte,
    #bouton,
    .AMS,
    .AMStexte,
    .tete,
    .Vitesse,
    .Filaments,
    .Ecran,
    .p9 {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
        /* L'ordre est géré par le flux du HTML */
        padding: 15px;
    }

    /* Rétablit le padding pour les conteneurs d'images sur mobile pour l'espacement */
    .X1gauche,
    .AMS,
    .tete,
    .Ecran {
        padding: 0;
        box-shadow: none;
    }

    /* Assurer un bon ordre de lecture (Texte toujours après l'Image dans l'alternance) */

    /* Le HTML est : X1gauche (Img), X1texte (Txt), Bouton (B), AMS (Img), AMStexte (Txt) ... */

    /* On force l'ordre pour les premières sections pour avoir Img -> Txt -> B */
    .X1gauche {
        order: 1;
    }

    .X1texte {
        order: 2;
    }

    #bouton {
        order: 3;
    }

    /* Suite du flux HTML */
    .AMS {
        order: 4;
    }

    .AMStexte {
        order: 5;
    }

    .tete {
        order: 6;
    }

    .Vitesse {
        order: 7;
    }

    .Filaments {
        order: 8;
    }

    .Ecran {
        order: 9;
    }

    .p9 {
        order: 10;
    }
}