/*
    ========================================
    BODY-LAYOUT.CSS
    Auteur                : Renaud
    Création              : 07 décembre 2025
    Dernière modification : 11 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Définit la Grille Principale (CSS Grid) du site.
*   Gère le placement des gros blocs : Header, Hero, Main, Sidebar, Footer.
*   
*   @file  css/body-grid-layout.css
*
*   @note  Le header est en Sticky dans la grille.
*/

/* --- LE CONTENEUR PRINCIPAL (La Grille) --- */
.body-wrapper {
    /* PLACEMENT (Display, Grid) */
    display: grid;

    /*
    Définition des colonnes (Desktop > 1150px) :
    - 1ère colonne : 1fr (Marge flexible à gauche)
    - 2ème colonne : minmax(0, 900px) pour le contenu principal (Note : 900px est idéal pour la lecture, 1100px peut faire des lignes trop longues).
    - 3ème colonne : 350px fixe pour la Sidebar (Largeur standard pour widgets Amazon/Pub).
    - 4ème colonne : 1fr (Marge flexible à droite)
    */
    grid-template-columns: 1fr minmax(0, 900px) 350px 1fr;

    /*
    Définition des lignes :
    - Header : Hauteur auto
    - Hero : Hauteur auto
    - Main/Sidebar : 1fr (prennent la hauteur restante du viewport)
    - Footer : Hauteur auto
    */
    grid-template-rows: auto auto 1fr auto;

    /* PLACEMENT (Box Model) */
    min-height: 100vh; /* Le pied de page restera en bas même si peu de contenu */
    column-gap: 2rem; /* Espace horizontal entre Main et Sidebar */
    row-gap: 0; /* Pas de gap vertical par défaut, on gère ça dans les sections */

    /* VISUEL */
    background-color: var(--color-background-body);

    /* TEXTE */
    color: var(--color-text-main);
}

/* --- PLACEMENT DES ZONES (Desktop > 1150px en Mode blog avec Sidebar) --- */
.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;} /* Colonne centrale gauche */
.sidebar-content { grid-column: 3     ; grid-row: 3;} /* Colonne centrale droite */
.footer-content  { grid-column: 1 / -1; grid-row: 4;}

/* --- PLACEMENT DES ZONES (Desktop > 1150px en Mode Page de Vente sans Sidebar) --- */
.body-wrapper--sales .main-content    { grid-column: 1 / -1;}
.body-wrapper--sales .sidebar-content { display: none;}

/* --- PLACEMENT DES ZONES (Tablette < 1150px) --- */
@media (max-width: 1150px) { 
    .body-wrapper {
        /* PLACEMENT : Une seule colonne */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto; 
        row-gap: 0;
    }

    /* Le header et le hero restent en pleine largeur */
    .header-content  { grid-column: 1 / -1; grid-row: 1;}
    .hero-content    { grid-column: 1 / -1; grid-row: 2;}
    .main-content    { grid-column: 1 / -1; grid-row: 3;}
    .sidebar-content { grid-column: 1 / -1; grid-row: 4;}
    .footer-content  { grid-column: 1 / -1; grid-row: 5;}
}

/* --- DEBUG --- */
/*
.body-wrapper    { 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;}
*/