/* 
 * Augmentation de la largeur du container pour le front-office uniquement
 * Ce fichier ne s'applique qu'aux pages front-office (layouts.front)
 */

/* Redéfinition des largeurs Bootstrap pour le front-office */
@media (min-width: 576px) {
    .container {
        max-width: 560px; /* Augmenté de 540px */
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 750px; /* Augmenté de 720px */
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1000px; /* Augmenté de 960px */
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px; /* Augmenté de 1140px */
    }
}

/* Pour les très grands écrans */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px; /* Nouvelle largeur pour les grands écrans */
    }
}

/* Ajustements spécifiques pour certaines sections si nécessaire */
.main-box .container {
    padding: 0 40px; /* Réduction du padding latéral pour compenser */
}

/* Assurer que les éléments restent centrés */
.container {
    margin-left: auto;
    margin-right: auto;
}