/* ==========================================================
   LAYOUT
   ----------------------------------------------------------
   Structures globales réutilisables.
   ========================================================== */

.app {
    min-height: 100vh;
    background: var(--color-background-primary);
}



.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.section {
    padding: var(--spacing-xxl) 0;
}

.section-header {
    max-width: 760px;
    margin: 0 auto var(--spacing-xl);
    text-align: center;
}

.section-title {
    margin: 0;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-text-primary);
}

.section-description {
    margin: var(--spacing-md) 0 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}