/* ========================================
   BODY-LAYOUT.CSS
   Auteur                : Renaud
   Création              : 21 octobre 2025
   Dernière modification : 18 novembre 2025
   ======================================== */


.body-wrapper {
    display: grid;
    /*
    Définition des colonnes:
    - 1ère colonne: 1fr (espace flexible à gauche)
    - 2ème colonne: minmax(300px, 800px) pour le contenu principal (main-content), avec une largeur min/max
    - 3ème colonne: minmax(200px, 350px) pour la barre latérale (sidebar-content), avec une largeur min/max
    - 4ème colonne: 1fr (espace flexible à droite)
    */
    grid-template-columns: 1fr minmax(300px, 1100px) minmax(200px, 300px) 1fr;
    
    /*
    Définition des lignes:
    - auto: Hauteur automatique pour le header
    - auto: Hauteur automatique pour le hero
    - 1fr: Espace flexible pour le contenu principal et la sidebar (ils partageront cette ligne)
    - auto: Hauteur automatique pour le footer
    */
    grid-template-rows: auto auto 1fr auto; 
    min-height: 100vh; /* Assure que le conteneur prend toute la hauteur de la fenêtre */

    row-gap: 2rem;
}

.header-content { grid-column: 1 / -1; grid-row: 1; } /* S'étend du début à la fin de la grille, occupant les 3 colonnes */
.hero-content   { grid-column: 1 / -1; grid-row: 2; margin-top: -2rem; /* Annule le row-gap entre header et hero */} /* S'étend du début à la fin de la grille, occupant les 3 colonnes */
.main-content   { grid-column: 2;      grid-row: 3; } /* Ces éléments s'étendent sur la colonne centrale */
.sidebar-content{ grid-column: 3;      grid-row: 3; } /* Colonne suivante pour la sidebar, troisième ligne (à côté du main) */
.footer-content { grid-column: 1 / -1; grid-row: 4; } /* S'étend du début à la fin de la grille */


/* Ajustements pour les petits écrans (mobile-first) */
@media (max-width: 900px) { /* Exemple de breakpoint, ajustez si nécessaire */
    .body-wrapper {
        grid-template-columns: 1fr minmax(280px, 1fr) 1fr; /* Colonne centrale unique pour main et sidebar */
        grid-template-rows: auto auto 1fr auto auto; /* header, hero, main, sidebar, footer */
    }
    .main-content {
        grid-column: 2; /* Main occupe la colonne centrale */
        grid-row: 3;
    }
    .sidebar-content {
        grid-column: 2; /* Sidebar occupe la même colonne, mais une nouvelle ligne */
        grid-row: 4; /* Place la sidebar en dessous du contenu principal sur mobile */
        border-left: none; /* Pas de bordure latérale quand elle est en dessous */
        box-shadow: 0 -2px 5px var(--color-sidebar-shadow); /* Ombre sur le dessus pour la séparer du main */
        margin-top: 1.5rem; /* Espacement entre le main et la sidebar */
    }
}