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

/* --- 1. Conteneur global et conteneur de grille --- */

.xtoolP2-container {
    max-width: 1300px;
    /* Grande largeur pour le contenu détaillé */
    margin: 40px auto;
    padding: 0 20px;
}

.p2 {
    /* Le conteneur principal qui définit la grille */
    display: grid;

    /* Définition des colonnes : 3 colonnes de largeur égale */
    grid-template-columns: 1fr 1fr 1fr;

    /* Espace entre les lignes et les colonnes */
    gap: 30px;

    /* Définition des zones/emplacements (Grid Areas) */
    grid-template-areas:
        "image-gauche texte-p2 texte-p2"
        "bouton bouton bouton"
        "int-image texte-int texte-int"
        "rotary-image texte-rotary texte-rotary"
        "texte-convoyer convoyer-image convoyer-image"
        "texte-camera xcs-image xcs-texte";

    padding: 20px;
}

/* --- 2. Styles Génériques des Blocs --- */

/* Appliquer des marges et des styles aux blocs pour une meilleure lisibilité */
.p2>div {
    padding: 20px;
    border-radius: 8px;
    background-color: #f8f8f8;
    /* Fond léger pour séparer les blocs */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.p2 img {
    /* Styles pour toutes les images dans les blocs */
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Styles spécifiques pour le texte */
.p2texte,
.p2inttexte,
.rotarytexte,
.convoyertexte,
.cameratexte,
.xcstexte {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
}

/* Styles spécifiques pour les listes dans XCS */
.xcstexte ul {
    list-style: none;
    /* Enlever les puces par défaut */
    padding-left: 0;
}

.xcstexte li {
    margin-bottom: 10px;
    padding-left: 1.5em;
    /* Espace pour une puce personnalisée si besoin */
    text-indent: -1.5em;
    /* Rétablit l'indentation */
}

.xcstexte li::before {
    content: "🔸";
    /* Puce personnalisée (exemple) */
    margin-right: 0.5em;
    font-size: 0.8em;
}

/* --- 3. Positionnement des Blocs via Grid Areas --- */

.p2gauche {
    grid-area: image-gauche;
}

.p2texte {
    grid-area: texte-p2;
}

#bouton {
    grid-area: bouton;
    text-align: center;
    /* Centrer le bouton */
    background-color: transparent;
    /* Bouton n'a pas besoin de fond */
    box-shadow: none;
    padding: 20px 0;
}

.p2int {
    grid-area: int-image;
}

.p2inttexte {
    grid-area: texte-int;
}

.rotary {
    grid-area: rotary-image;
}

.rotarytexte {
    grid-area: texte-rotary;
}

.convoyertexte {
    grid-area: texte-convoyer;
}

.convoyer {
    grid-area: convoyer-image;
}

.cameratexte {
    grid-area: texte-camera;
    background-color: #e0f7fa;
    /* Couleur différente pour l'élément texte sans image */
}

.xcs {
    grid-area: xcs-image;
}

.xcstexte {
    grid-area: xcs-texte;
    background-color: #fff3e0;
    /* Couleur différente pour XCS */
}


/* --- 4. Style du Bouton --- */

#bouton button {
    padding: 12px 25px;
    font-size: 1.1em;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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


/* --- 5. Media Query (Adaptation pour mobile) --- */

@media (max-width: 992px) {
    .p2 {
        /* Sur les petits écrans, passer à une seule colonne */
        grid-template-columns: 1fr;
        gap: 20px;

        /* Redéfinir les zones pour qu'elles s'affichent verticalement (image puis texte) */
        grid-template-areas:
            "image-gauche"
            "texte-p2"
            "bouton"
            "int-image"
            "texte-int"
            "rotary-image"
            "texte-rotary"
            "convoyer-image"
            "texte-convoyer"
            "xcs-image"
            "texte-camera"
            /* Positionner la caméra avant le texte XCS pour une meilleure continuité */
            "xcs-texte";
    }

    .p2 img {
        /* Ajouter de la marge sous les images pour les séparer du texte sur mobile */
        margin-bottom: 10px;
    }
}