/* ==========================================================================
   CONTENEURS - Ecophot
   Wrappers et conteneurs pour la structure générale
   ========================================================================== */

/* Conteneur principal responsive */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-base);
    padding-right: var(--spacing-base);
}

/* Breakpoints pour les conteneurs */
@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

@media (min-width: 992px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-xl);
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: var(--container-xxl);
    }
}

/* Conteneur fluide (100% largeur) */
.container-fluid {
    width: 100%;
    padding-left: var(--spacing-base);
    padding-right: var(--spacing-base);
    margin-left: auto;
    margin-right: auto;
}

/* Wrapper général */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content area */
.main-content {
    flex: 1;
}

/* Conteneur de section */
.section {
    padding: var(--spacing-4xl) 0;
}

.section-sm {
    padding: var(--spacing-2xl) 0;
}

.section-lg {
    padding: var(--spacing-4xl) 0;
}

@media (min-width: 768px) {
    .section-lg {
        padding: 6rem 0;
    }
}

/* Largeurs limitées */
.max-w-sm { max-width: 24rem; margin: 0 auto; }
.max-w-md { max-width: 28rem; margin: 0 auto; }
.max-w-lg { max-width: 32rem; margin: 0 auto; }
.max-w-xl { max-width: 36rem; margin: 0 auto; }
.max-w-2xl { max-width: 42rem; margin: 0 auto; }
.max-w-3xl { max-width: 48rem; margin: 0 auto; }
.max-w-4xl { max-width: 56rem; margin: 0 auto; }

/* Centrage */
.centered {
    margin-left: auto;
    margin-right: auto;
}