/*
    ========================================
    MAIN-CONTENT.CSS
    Auteur                : Renaud
    Création              : 10 décembre 2025
    Dernière modification : 12 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Gère le conteneur principal et les utilitaires de mise en page des sections.
*   Remplace le fichier utilities.css pour ce projet spécifique.
*
*   @file  css/main-content.css
*
*   @see   index.php (Balise <main id="main-content">)
*/

/* --- BLOCK : Main Content (Wrapper) --- */
.main-content {
    /* PLACEMENT */
    display: flex;
    flex-direction: column;
    width: 100%;

    /* VISUEL */
    background-color: var(--color-background-main); /* Gris clair par défaut */
}

/* --- CLASSES UTILITAIRES DE STRUCTURE (Grid & Padding) --- */

/* 1. Conteneur centré (Grille de contenu) */
.container-grid {
    /* PLACEMENT */
    width: 100%;
    max-width: 1150px; /* Largeur standard lecture */
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* 2. Espacement vertical des sections */
.section-padding {
    /* PLACEMENT */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* 3. Alignement Texte */
.text-center { text-align: center; }

/* 4. Couleurs Utilitaires */
.text-white  { color: var(--color-white); }
.bg-white    { background-color: var(--color-white); }
.bg-alt      { background-color: var(--color-grey-220); } /* Fond gris un peu plus foncé */

/* --- COMPOSANTS DE TITRES (SECTION HEADERS) --- */
/* --- BLOCK : Section Header (Conteneur Titre + Intro) --- */
.section-header {
    /* PLACEMENT */
    max-width: 800px;
    margin: 0 auto 3rem auto; /* Centré + Marge basse */
}

/* --- BLOCK : Section Title (H2) --- */
.section-title {
    /* PLACEMENT */
    margin-bottom: 1rem;

    /* TEXTE */
    font-family: var(--font-heading-main);
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--color-headings);
}

/* --- BLOCK : Section Subtitle (Intro) --- */
.section-subtitle {
    /* TEXTE */
    font-family: var(--font-text-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    /* Réduction des paddings sur mobile */
    .section-padding { 
        padding-top: 3rem; 
        padding-bottom: 3rem; 
    }
    
    /* Réduction taille titres */
    .section-title { 
        font-size: 1.8rem; 
    }
}