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

/* --- 1. Conteneur global et configuration de la grille (4 colonnes) --- */

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

.p2 {
    display: grid;
    /* Définition de 4 colonnes de largeur égale */
    grid-template-columns: repeat(4, 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) --- */

.p2>div:not(#bouton) {
    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;
    background-color: #ffffff;
}

/* Styles des conteneurs d'images */
.p2gauche,
.p2int,
.rotary,
.convoyer {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* Styles spécifiques pour les blocs de texte */
.p2texte {
    background-color: #f0f7ff;
    border-left: 5px solid #007bff;
}

/* Bleu clair */
.p2inttexte {
    background-color: #fff0f7;
    border-left: 5px solid #ff0077;
}

/* Rose clair */
.rotarytexte {
    background-color: #f0fff0;
    border-left: 5px solid #00aa00;
}

/* Vert clair */
.convoyertexte {
    background-color: #fffff0;
    border-left: 5px solid #ffcc00;
}

/* Jaune clair */

/* --- 3. Positionnement explicite des Blocs sur la grille 4 colonnes --- */

/* LIGNE 1 & 2 : Image Principale (Grande) à Gauche, Texte + Bouton à Droite */
.p2gauche {
    /* Colonnes 1 et 2 */
    grid-column: 1 / span 2;
    /* Lignes 1 et 2 (s'étend sur la hauteur du texte et du bouton) */
    grid-row: 1 / span 2;
}

.p2texte {
    /* Colonnes 3 et 4 */
    grid-column: 3 / span 2;
    /* Ligne 1 */
    grid-row: 1 / span 1;
}

#bouton {
    /* Colonnes 3 et 4 */
    grid-column: 3 / span 2;
    /* Ligne 2 */
    grid-row: 2 / span 1;
    text-align: center;
    padding: 15px;
    background-color: #e6f0ff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#bouton a 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 a button:hover {
    background-color: #0056b3;
}


/* LIGNE 3 : Volume et Double Extrusion (Texte Gauche, Image Droite) */
.p2inttexte {
    /* Colonnes 1 et 2 */
    grid-column: 1 / span 2;
    grid-row: 3;
}

.p2int {
    /* Colonnes 3 et 4 */
    grid-column: 3 / span 2;
    grid-row: 3;
}

/* LIGNE 4 : Rotary AMS (Image Gauche, Texte Droite) */
.rotary {
    /* Colonnes 1 et 2 */
    grid-column: 1 / span 2;
    grid-row: 4;
}

.rotarytexte {
    /* Colonnes 3 et 4 */
    grid-column: 3 / span 2;
    grid-row: 4;
}

/* LIGNE 5 : Dryers / Convoyer (Texte Gauche, Image Droite) */
.convoyertexte {
    /* Colonnes 1 et 2 */
    grid-column: 1 / span 2;
    grid-row: 5;
}

.convoyer {
    /* Colonnes 3 et 4 */
    grid-column: 3 / span 2;
    grid-row: 5;
}

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

@media (max-width: 800px) {
    .p2 {
        /* 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/colonnes explicites */
    .p2>div {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
        padding: 15px;
    }

    /* Rétablit le padding des images sur mobile */
    .p2gauche,
    .p2int,
    .rotary,
    .convoyer {
        padding: 0;
        box-shadow: none;
    }

    /* Les blocs de texte qui avaient une barre latérale passent à une barre supérieure */
    .p2texte,
    .p2inttexte,
    .rotarytexte,
    .convoyertexte {
        border-left: none;
        border-top: 5px solid;
    }

    .p2texte {
        border-top-color: #007bff;
    }

    .p2inttexte {
        border-top-color: #ff0077;
    }

    .rotarytexte {
        border-top-color: #00aa00;
    }

    .convoyertexte {
        border-top-color: #ffcc00;
    }

    /* Le bouton reprend un padding normal */
    #bouton {
        padding: 15px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Pour assurer un flux Img -> Txt sur mobile pour toutes les sections */
    /* Le HTML est : Img (p2gauche), Txt (p2texte), Btn (bouton), Img (p2int), Txt (p2inttexte)... */

    /* Il faut inverser les paires où le texte précède l'image pour que l'image soit vue en premier.
       Sections à inverser : p2int/p2inttexte, convoyertexte/convoyer (texte avant image) */

    /* p2inttexte (Txt) vient avant p2int (Img) dans le HTML. Inversion pour mobile: Img puis Txt */
    .p2int {
        order: 4;
    }

    .p2inttexte {
        order: 5;
    }

    /* rotary (Img) vient avant rotarytexte (Txt). Ordre naturel: Img puis Txt */

    /* convoyertexte (Txt) vient avant convoyer (Img). Inversion pour mobile: Img puis Txt */
    .convoyer {
        order: 8;
    }

    .convoyertexte {
        order: 9;
    }

    /* Ordre complet (non modifié) :
    .p2gauche (1)
    .p2texte (2)
    #bouton (3)
    .rotary (6)
    .rotarytexte (7)
    */

    .p2gauche {
        order: 1;
    }

    .p2texte {
        order: 2;
    }

    #bouton {
        order: 3;
    }

    .rotary {
        order: 6;
    }

    .rotarytexte {
        order: 7;
    }
}