/* ########################### */
/* DANS style-robot.css */
/* Mise en page en grille 3 colonnes - CORRIGÉE POUR L'ORDRE MOBILE */
/* ########################### */

/* 1. Configuration de la Grille Principale (3 colonnes) */
/* CIBLE: <main class="robot-container"> */
main.robot-container {
    /* ACTIVER LA GRILLE */
    display: grid;
    /* Définition explicite des colonnes: 3 colonnes de taille égale */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    /* Espace entre les blocs */
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 2. Positionnement des Blocs par Ligne et Colonne (Mode Desktop) */

/* Réinitialisation générale pour le desktop */
.robot-container>div {
    /* On annule toute position de ligne fixe pour que le flux HTML naturel soit respecté */
    grid-row: auto;
    order: 0;
}

/* === Ligne 1 : Texte d'introduction (.one) - Pleine Largeur (span 3) === */
.robot-container .one {
    grid-column: 1 / span 3;
    /* Occupe les 3 colonnes */
    padding: 20px;
    background-color: #f8fcfc;
    border-radius: 10px;
    border: 1px solid #e0f2f1;
}

/* === Ligne 2 (et suivantes) : Affectation aux colonnes spécifiques (Desktop) === */

/* Image 1, 4, 6 (1ère colonne) */
.robot-container .two,
.robot-container .four,
.robot-container .six {
    grid-column: 1;
}

/* Texte 2, 4, 6 (2ème colonne) */
.robot-container .twotext,
.robot-container .fourtext,
.robot-container .sixtext {
    grid-column: 2;
    align-self: center;
    /* Centrer le texte verticalement */
    padding: 15px;
    border-radius: 8px;
}

/* Image 3, 5, 7 (3ème colonne) */
.robot-container .three,
.robot-container .five,
.robot-container .seven {
    grid-column: 3;
}

/* Styles de fond spécifiques aux textes */
.robot-container .twotext {
    background-color: #e8f5e9;
}

.robot-container .fourtext {
    background-color: #fce4ec;
}

.robot-container .sixtext {
    background-color: #fff3e0;
}


/* === Bloc Vidéo (.eight) - Pleine Largeur (span 3) === */
.robot-container .eight {
    grid-column: 1 / span 3;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    margin-top: 10px;
}

/* 3. Styles des Média */
.robot-container img {
    width: 100%;
    min-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.robot-container img:hover {
    transform: scale(1.02);
}

.robot-container video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
}

/* 4. Réactivité (Mobile) - La grille passe à 1 colonne */
@media (max-width: 768px) {
    main.robot-container {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
    }

    .robot-container>div {
        /* *** CORRECTION CLÉ POUR L'ORDRE MOBILE *** */
        /* On annule toutes les assignations de colonnes spécifiques */
        /* pour que les éléments s'empilent dans l'ordre du code HTML. */
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Pour assurer que l'aspect visuel en 1 colonne est bon */
    .robot-container .twotext,
    .robot-container .fourtext,
    .robot-container .sixtext {
        padding: 15px;
        /* S'assure que le texte a un bon padding */
        align-self: stretch;
        /* Permet au bloc de prendre toute la largeur */
    }
}