/* Utilitaires de layout — cf. D_004 (couche 1/2 : espacement/layout).
   Étendu au fil des besoins réels des pages, pas de bibliothèque générée à l'avance (YAGNI). */

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: var(--tok-container-max);
  margin-inline: auto;
  padding-inline: var(--tok-page-padding-inline);
}

/* Cisaillement à angle constant (cf. #formes dans design-system.html).
   Le consommateur définit --tok-shear = calc(var(--tok-shear-ratio) * <hauteur du bloc>)
   avant d'appliquer une de ces classes — sauf composants à hauteur fixe qui peuvent
   coder le calcul en dur (ex. .btn-icon.sheared dans semantic.css). */
.shear-right {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--tok-shear)) 100%, 0 100%);
}

.shear-left {
  clip-path: polygon(var(--tok-shear) 0, 100% 0, 100% 100%, 0 100%);
}

.shear-both {
  clip-path: polygon(var(--tok-shear) 0, 100% 0, calc(100% - var(--tok-shear)) 100%, 0 100%);
}

.prose { max-width: 820px; margin-inline: auto; text-align: left; }
.prose > * + * { margin-top: var(--tok-space-lg); }

.px-4xl { padding-inline: var(--tok-space-4xl); }

.pt-2xl { padding-top: var(--tok-space-2xl); }
.pb-2xl { padding-bottom: var(--tok-space-2xl); }

/* Même fond que le footer : prolonge le dégradé de .cta-banner sans rupture. */
.bg-footer { background: var(--tok-bg-footer); }

.mt-lg { margin-top: var(--tok-space-lg); }
.mt-2xl { margin-top: var(--tok-space-2xl); }
.mt-4xl { margin-top: var(--tok-space-4xl); }
.mb-lg { margin-bottom: var(--tok-space-lg); }
.mb-2xl { margin-bottom: var(--tok-space-2xl); }

.row-gap-2xl { row-gap: var(--tok-space-2xl); }
.row-gap-4xl { row-gap: var(--tok-space-4xl); }

/* Dégage l'espace de la navbar (position: fixed, ne prend plus de place dans le flux)
   sur une page qui ne commence pas par un .hero — cf. semantic.css #navbar. */
.pt-navbar { padding-top: var(--tok-navbar-height); }