/* --- 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;
        }
    }