/* ============================================================
   VERROU LARGEURS - NE PAS MODIFIER SANS DECISION EXPLICITE
   ============================================================
   Ce fichier verrouille les largeurs critiques du site.
   Il est charge EN DERNIER dans base.html, apres bottom-nav.css
   et apres le CDN Tailwind, et utilise !important partout pour
   gagner contre toute regle concurrente (Tailwind preflight,
   modifications accidentelles dans bottom-nav.css, etc).

   Invariants verrouilles :
     - body                   max 1120px, centre
     - .layout-container      max 1120px, centre
     - .layout-container > main (desktop ≥1024)  exactement 880px
     - .bottom-nav  (desktop ≥1024)              exactement 240px
     - .site-banner           max 1120px, centre

   Total desktop : main 880 + sidebar 240 = 1120.

   Avant de modifier ce fichier, modifier AUSSI les memes regles
   dans bottom-nav.css pour rester coherent.
   ============================================================ */

html {
  scrollbar-gutter: stable both-edges !important;
}

body {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-banner {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1024px) {
  .layout-container {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .layout-container > main {
    flex: 0 0 880px !important;
    width: 880px !important;
    max-width: 880px !important;
    min-width: 0 !important;
  }

  .bottom-nav {
    width: 240px !important;
    flex-shrink: 0 !important;
  }
}