/*
    ==========================================================
    PROJECT : SITE-GENERIQUE
    FILE    : css/main-content.css
    AUTH    : Renaud
    CREATED : 18 février 2026
    UPDATED : 18 février 2026
    ==========================================================
*/

/**
*   @project        SITE-GENERIQUE
*   @description    Layout structurel du contenu principal (Main).
*                   Gère l'empilement vertical des composants via Flexbox.
*
*   @file           css/main-content.css
*
*   @see            css/colors-semantic.css
*   @see            css/body-grid-layout.css
*   @see            includes/main-*.php
*
*   @note           Desktop  : Colonne 900px (défini dans body-grid-layout)
*                   Tablette : Pleine largeur
*                   Mobile   : Pleine largeur, gap réduit
*/


/* --- BLOCK : Main Content --- */
.main-content {
    /* PLACEMENT */
    display: flex;
    flex-direction: column;
    gap: 4rem;
    /* VISUEL */
    background-color: var(--color-background-main, #FFFFFF);
}


/* --- RESPONSIVE (Tablette < 1150px) --- */
@media (max-width: 1150px) {
    .main-content {
        /* PLACEMENT */
        gap: 3rem;
    }
}


/* --- RESPONSIVE (Mobile < 768px) --- */
@media (max-width: 768px) {
    .main-content {
        /* PLACEMENT */
        gap: 2rem;
    }
}


/* 
   ==========================================================================
   DEBUG (À retirer en production ou commenter)
   ========================================================================== 
*/
/*
.main-content { border: 2px dashed orange; }
*/