/* Socle de composition commun — chargé après les styles historiques.
   Une seule largeur de lecture, des gouttières cohérentes et des règles de
   dimensionnement qui restent identiques lors du changement de page. */
:root {
  --site-max-width: 1180px;
  --site-gutter: clamp(24px, 4vw, 48px);
  --site-content-width: min(var(--site-max-width), calc(100% - (var(--site-gutter) * 2)));
}

body[data-page] .container,
body[data-page] .header-inner,
body[data-page] .site-footer > .container {
  width: var(--site-content-width) !important;
  max-width: var(--site-max-width) !important;
  margin-inline: auto !important;
}

body[data-page] main {
  overflow: clip;
}

/* Les éléments médias ne modifient jamais la largeur effective d’une page. */
body[data-page] main img,
body[data-page] main svg,
body[data-page] main video {
  max-inline-size: 100%;
}

@media (max-width: 800px) {
  :root {
    --site-gutter: 16px;
  }
}