/*
    ==========================================================
    PROJECT : SITE-GENERIQUE
    FILE    : css/body-grid-layout.css
    AUTH    : Renaud
    CREATED : 26 novembre 2025
    UPDATED : 14 février 2026
    ==========================================================
*/

/**
*   @project        SITE-GENERIQUE
*   @description    Feuille de style structurelle (Grid Layout).
*                   Gère le positionnement des grandes zones et la sécurité visuelle.
*   
*   @file           css/body-grid-layout.css
*
*   @see            index.php (Classe .body-grid-layout)
*   @see            css/colors-semantic.css
*
*   @note           Responsive : 1150px (Tablette) | 768px (Mobile)
*                   Main : 900px max | Sidebar : 350px
*/


/* --- CONTENEUR PRINCIPAL --- */
.body-grid-layout {
    /* PLACEMENT */
    display: grid;
    min-height: 100vh;
/*    overflow-x: hidden;*/
    /* 
        GRID COLUMNS (Desktop > 1150px)
        1. Marge gauche flexible
        2. Contenu Main (Max 900px - Largeur idéale pour la lecture)
        3. Sidebar (Fixe 350px - Largeur standard pour widgets Amazon/Pub)
        4. Marge droite flexible
    */
    grid-template-columns: 1fr minmax(0, 900px) 350px 1fr;
    /* 
       GRID ROWS (Desktop > 1150px)
       1. Header
       2. Hero
       3. Main + Sidebar (1fr = prend l'espace restant)
       4. Footer
    */
    grid-template-rows: auto auto 1fr auto;
    /* ESPACEMENT */
    column-gap: 2rem; 
    row-gap: 2rem;
    /* SÉCURITÉ VISUELLE (Uniquement ici) */
    background-color: var(--color-background-body, whitesmoke);
    color: var(--color-text-main, darkslategray);
}


/* --- PLACEMENT DES ZONES (Desktop > 1150px) --- */
.header-content  { grid-column: 1 / -1; grid-row: 1; }
.hero-content    { grid-column: 1 / -1; grid-row: 2; }
.main-content    { grid-column: 2     ; grid-row: 3; }
.sidebar-content { grid-column: 3     ; grid-row: 3; }
.footer-content  { grid-column: 1 / -1; grid-row: 4; }


/* --- MODIFIER : Sans Sidebar (Page pleine largeur) --- */
.body-grid-layout--no-sidebar { 
    grid-template-columns: 1fr minmax(0, 900px) 1fr; 
}

.body-grid-layout--no-sidebar .main-content { 
    grid-column: 2; 
}


/* --- RESPONSIVE (Tablette < 1150px) --- */
@media (max-width: 1150px) {
    .body-grid-layout {
        /*
            GRID COLUMNS (Tablette < 1150px)
            Marge | Contenu (100%) | Marge
        */
        grid-template-columns: 1rem 1fr 1rem;
        /*
           GRID ROWS (Tablette < 1150px)
            1. Header
            2. Hero
            3. Main
            4. Sidebar
            5. Footer
        */
        grid-template-rows: auto auto 1fr auto auto;
        row-gap: 2rem;
    }

    /* --- PLACEMENT DES ZONES (Tablette < 1150px) --- */
    .header-content  { grid-column: 1 / -1; grid-row: 1; }
    .hero-content    { grid-column: 1 / -1; grid-row: 2; }
    .main-content    { grid-column: 2     ; grid-row: 3; }
    .sidebar-content { grid-column: 2     ; grid-row: 4; }
    .footer-content  { grid-column: 1 / -1; grid-row: 5; }
}


/* --- RESPONSIVE MOBILE (< 768px) --- */
@media (max-width: 768px) {
    .body-grid-layout {
        grid-template-columns: 0.5rem 1fr 0.5rem; /* Marges réduites pour la lecture */
        row-gap: 1.5rem; /* Espace vertical réduit */
    }
}


/* 
   ==========================================================================
   DEBUG (À retirer en production ou commenter)
   Cycle couleurs : black -> brown -> red -> orangered -> greenyellow -> green
   ========================================================================== 
*/
/*
.body-grid-layout { border: 3px solid black; }
.header-content   { border: 2px dashed brown; }
.hero-content     { border: 2px dashed red; }
.main-content     { border: 2px dashed orangered; }
.sidebar-content  { border: 2px dashed greenyellow; }
.footer-content   { border: 2px dashed green; }
*/