/**
 * Le Tour de Moi - Layout Container
 * Système de conteneur principal responsive.
 */

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.container-narrow {
    max-width: var(--content-max-width);
}

/* --- Variantes de padding responsive --- */

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

/* --- Section Spacing --- */

.section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .section {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }
}