:root{
--space-unit:8px;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;--space-10:80px;--space-11:96px;--space-12:120px;--space-13:160px;
/* ── La page n'est PAS bornée par un conteneur ──────────────────────────
   Mesuré sur la référence, à deux largeurs :

     largeur d'écran   gouttière   titre de hero
             1440px        80px          130px
             1920px       107px          173px

   Les deux suivent l'écran : 5,56vw pour la gouttière, 9,03vw pour le hero.
   Il n'y a pas de largeur maximale utile — le contenu s'étale, et ce sont les
   MESURES de texte qui restent courtes (835px pour un titre, 621px pour un
   sous-titre, 406px pour un paragraphe) à l'intérieur d'un champ large.

   Un `--page-max` de 1240px produisait l'inverse : 100px de marge à 1440, mais
   340px à 1920, et des éléments qui cessent de grandir. La gouttière devient
   donc proportionnelle, avec un plancher pour le mobile. */
--gutter:clamp(20px,5.56vw,180px);/* @kind spacing */
--gutter-mobile:20px;
--page-max:2560px;/* la borne de la référence : atteinte en pratique jamais */
/* Les mesures de texte, elles, restent courtes : c'est ce qui fait tenir une
   page large. Elles sont exprimées en ch dans typography.css. */
--section-gap:120px;
--section-gap-tight:80px;
--card-padding:32px;
--card-padding-lg:56px;
--tile-padding:24px;
/* Le bloc pleine largeur — le duo d'avant-pied, les bandes — n'a pas de
   gouttière extérieure : la gouttière devient sa marge INTÉRIEURE, ce qui
   laisse le filet de séparation courir sur toute la hauteur. Mesuré : deux
   moitiés de 713px, 64px de marge intérieure, filet 1px. */
--bleed-padding:64px;
--nav-height:128px;
--element-gap:16px;
}