/**
 * layout-max-width.css
 * Limitation de la largeur maximale du site Mon-Bonus-Malus.fr
 * 
 * Empêche le site de s'étendre au-delà d'une largeur confortable
 * sur les très grands écrans (> 1400px)
 */

/* =============================================
   LARGEUR MAXIMALE DU SITE
   Limite le container à 1200px max
============================================= */

/* Container Bootstrap - limiter la largeur max */
.container {
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Pour les sections full-width avec background, 
   on garde le fond en full mais le contenu limité */
.prestep-home,
.prestep-article,
.outils-home,
.article-home,
.liste-article,
footer {
  width: 100%;
}

/* Le container à l'intérieur reste limité */
.prestep-home .container,
.prestep-article .container,
.outils-home .container,
.article-home .container,
.liste-article .container,
footer .container {
  max-width: 1200px !important;
}

/* =============================================
   BREAKPOINTS - Largeurs container par taille d'écran
============================================= */

/* Mobile */
@media (max-width: 575.98px) {
  .container {
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Small (>= 576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    max-width: 540px !important;
  }
}

/* Medium (>= 768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    max-width: 720px !important;
  }
}

/* Large (>= 992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    max-width: 960px !important;
  }
}

/* Extra Large (>= 1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}

/* XXL (>= 1400px) - On reste à 1140px, pas plus large */
@media (min-width: 1400px) {
  .container {
    max-width: 1200px !important;
  }
}

/* =============================================
   HEADER - Limiter la largeur
============================================= */
.header-principal {
  max-width: 100%;
}

.header-principal .container {
  max-width: 1200px !important;
}

/* =============================================
   SECTIONS SPÉCIFIQUES
============================================= */

/* Section edito (pages articles) */
.edito .container {
  max-width: 1200px !important;
}

/* Calculatrice bonus */
.bonus-calculator-advanced {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================
   OPTION: WRAPPER GLOBAL (alternative)
   Décommenter si vous voulez un wrapper autour de tout le body
============================================= */
/*
body {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
*/