/* ==========================================================================
   Sarus — feuille unique
   Palette A, jade et calcaire. Repigmentation du 08/08/2026.
   Le bloc :root ci-dessous est une copie verbatim de brand/tokens.css.
   Contrôle de dérive : voir brand/README.md.
   ========================================================================== */

/* --- Polices ------------------------------------------------------------ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Jetons (copie verbatim de brand/tokens.css) ------------------------- */

:root {
  --paper:         #EDF1EA;
  --paper-alt:     #E4EAE0;
  --limestone:     #C6CFC0;
  --ink:           #14251D;
  --ink-soft:      #3D5346;
  --jade:          #5E8C68;
  --forest:        #1E3A2C;
  --night:         #0F211A;
  --rice-gold:     #B08A4A;
  --on-night:      #E8EFE6;
  --on-night-soft: #9DB5A4;

  --jade-lift:     #7CAA86;
  --gold-deep:     #A37F42;

  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --nav-h:        3.25rem;   /* hauteur de la barre, sert au décalage du hero */
  /* Échelle abaissée le 10/08/2026, d'un cran homogène : chaque degré
     perd entre 6 et 15 %, les rapports entre degrés sont conservés.
     Baisser un seul degré aurait tassé l'écart entre le corps et les
     titres et fait paraître la page plus dense, pas plus fine.        */
  --t-display-xl: clamp(2.5rem,   8vw,   5.5rem);
  --t-display-l:  clamp(1.75rem,  4.4vw, 3rem);
  --t-display-m:  clamp(1.25rem,  2.6vw, 1.75rem);
  --t-lead:       clamp(1.0625rem, 1.8vw, 1.25rem);
  --t-body:       1rem;
  --t-small:      0.875rem;
  --t-spec:       0.8125rem;
  --t-label:      0.6875rem;

  --ls-display: -0.02em;
  --ls-label:    0.14em;

  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;
  --sec-y:   clamp(2.5rem, 6vw, 4.5rem);

  --rule: 1px solid var(--limestone);
  --radius: 0;
}

/* --- Socle -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--limestone); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  /* Axe optique bridé à 28. Laissé en auto, le navigateur le pousse au
     maximum sur les gros titres et les déliés deviennent filiformes :
     élégant sur un écran de bureau, illisible sur un téléphone dans un
     hall d'exposition. L'axe n'est libéré qu'au mot-marque du hero.       */
  font-variation-settings: "opsz" 28;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-5); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* --jade rend 3,39:1 sur --paper : sous AA pour du texte de corps, et le
   seuil AA grand texte est 24px en romain, pas 16px. Les liens de corps
   sont donc en --forest (10,83:1), et --jade est réservé au display et
   aux accents non porteurs de sens.                                       */
a {
  color: var(--forest);
  text-decoration-color: currentColor;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--jade); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: var(--s-4); top: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--ink); color: var(--on-night);
  transform: translateY(-200%);
  z-index: 10;
}
.skip:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Gabarit ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section annotée : le libellé pend dans la marge gauche, comme une
   annotation de plan. Sous 60em il repasse au-dessus de son contenu.      */
.section {
  padding-block: var(--sec-y);
  border-top: var(--rule);
}
.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
@media (min-width: 60em) {
  .section__grid {
    grid-template-columns: 13ch minmax(0, 1fr);
    column-gap: var(--s-7);
  }
}

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
  padding-top: var(--s-2);
  border-top: 1px solid var(--gold-deep);   /* filet 1px, jamais un aplat */
  max-width: 13ch;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.rich > * + * { margin-top: var(--s-5); }

/* --- Section sombre : le hero, et rien d'autre --------------------------
   La section origine, un temps prévue en sombre, est repassée sur --paper :
   hero sombre plus origine sombre plus pied de page vert faisaient basculer
   la page en dominante sombre, et le pied de page se fondait dans la section
   qui le précède au lieu de la trancher.                                   */

/* --- Panneau clair alterné ----------------------------------------------- */

.panel {
  background: var(--paper-alt);
  color: var(--ink);
  border-top: 0;
}

/* --- Marques ------------------------------------------------------------
   Posées en masque CSS plutôt qu'en <img> : un seul fichier SVG par marque,
   dont la couleur suit currentColor. Un <img> ne peut pas hériter de la
   couleur, il aurait fallu dupliquer chaque marque en variantes colorées. */

/* Le logotype reste en masque : 9,9 Ko de contours, trop lourd à inliner
   sur huit pages. La marque, elle, est en SVG inline : un masque CSS est
   rastérisé par le navigateur à la taille de l'élément, ce qui rendait
   l'ancienne grue crénelée à 30px ; un SVG inline reste vectoriel jusqu'au
   pixel de l'écran et hérite naturellement de currentColor.
   La marque est repassée le 10/08/2026 de la silhouette de grue posée
   au sol à un nouveau tracé, plus vertical (ratio 0,62 contre 0,71).
   viewBox 0 0 1404 2264, un seul path, fill-rule evenodd. La règle
   .crane ne dépend d'aucune dimension fixe : elle fixe une hauteur et
   laisse la largeur suivre le ratio intrinsèque du SVG.               */
.logotype, .type {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
svg.crane {
  display: block;
  width: auto;
  height: 100%;
  fill: currentColor;
  color: inherit;
  shape-rendering: geometricPrecision;
}
.logotype, .type {
  -webkit-mask-image: url("../brand/sarus-logotype.svg");
          mask-image: url("../brand/sarus-logotype.svg");
  aspect-ratio: 7273 / 1558;
}


/* --- Navigation ---------------------------------------------------------
   Logotype centré, liens répartis de part et d'autre. Transparente
   au-dessus du hero, opaque dès qu'on l'a dépassé. Aucune mécanique
   e-commerce : pas de méga-menu, pas d'icônes compte ou panier, pas de
   bandeau promotionnel, pas de carrousel.                                */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* Marque à gauche, liens à droite. Le logotype centré est abandonné.    */
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

/* Bloc de marque : marque immédiatement à gauche du logotype. La chasse du
   logotype a été resserrée de 0,16em à 0,07em dans le SVG lui-même : collé
   à la marque et calé à gauche, l'espacement large faisait déborder le bloc.
   Largeur résultante à 1440px : 103px, soit 7,5 % de la page.

   Alignement optique, pas de boîte : la marque du 10/08/2026 a son encre
   la plus basse (la pointe de la queue) à 41px sur une boîte de 56px de
   haut en desktop, quand le wordmark s'arrête à 34px. `align-items:
   center` centrait les deux boîtes et laissait la marque déborder de 7px
   sous la ligne de base du wordmark. `flex-end` cale les deux boîtes par
   le bas ; les deux SVG sont rognés au plus près de leur encre à
   l'extraction, donc bas de boîte et ligne de base coïncident déjà,
   sans transform ni valeur en dur à maintenir si les tailles changent. */
.site-nav__brand {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex: 0 0 auto;
  color: inherit;
}
.site-nav__brand svg.crane    { height: 26px; }
.site-nav__brand .logotype { height: 13px; }
@media (min-width: 48em) {
  .site-nav__brand svg.crane    { height: 30px; }
  .site-nav__brand .logotype { height: 15px; }
  :root { --nav-h: 3.5rem; }
}

/* Sous 384px, la marque et quatre liens ne tiennent pas sur une ligne.
   La marque passe seule sur la première ligne, les liens en dessous.     */
@media (max-width: 23.99em) {
  .site-nav__inner { flex-wrap: wrap; justify-content: center; row-gap: var(--s-2); }
  .site-nav__brand { flex-basis: 100%; justify-content: center; }
}

.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 24em) {
  .site-nav ul { gap: var(--s-3); font-size: 0.6875rem; }
}
/* Quatre liens plus le logotype tiennent sur une ligne à 360px une fois la
   chasse resserrée. Sans nowrap, « Our craft » se coupe en deux dès que le
   lien Journal est activé, ce que la page Journal montrait déjà.        */
.site-nav a { white-space: nowrap; }
@media (min-width: 48em) {
  .site-nav ul { gap: var(--s-6); font-size: var(--t-label); letter-spacing: var(--ls-label); }
}

.site-nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* État transparent conservé pour les pages à bannière, où le script peut
   encore l'activer. Sur l'accueil il est neutralisé par data-nav-static :
   sur le ciel du hero, --on-night y mesurait 1,32 pour 4,5 requis. Le
   fond plein reste comme garde-fou si l'état venait à s'appliquer.     */
.site-nav:not(.is-solid) { color: var(--on-night); background: var(--night); }
.site-nav:not(.is-solid) a { color: var(--on-night); }
/* Sur le hero, aucun jade ne passe AA : sur le voile au-dessus du ciel
   --jade-lift ne rend que 2,02:1, et il faudrait une luminance de 0,84,
   soit du blanc, pour atteindre 4,5. Le survol se signale donc par le
   soulignement, pas par un changement de couleur. */
.site-nav:not(.is-solid) a:hover { border-bottom-color: currentColor; }
.site-nav:not(.is-solid) :focus-visible { outline-color: var(--jade-lift); }

/* Après le hero, et par défaut sur toutes les pages qui n'en ont pas.   */
.site-nav.is-solid {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--limestone);
}
.site-nav.is-solid a { color: var(--ink-soft); }
/* Même raison en état opaque : --jade rend 3,39:1 sur --paper, sous AA
   pour du texte de 12px. La règle du brief l'admet et renvoie à --forest ;
   --ink est plus lisible encore et distingue mieux du repos. */
.site-nav.is-solid a:hover { color: var(--ink); border-bottom-color: currentColor; }
.site-nav.is-solid a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: currentColor;
}

/* --- Hero : pleine largeur, texte en surimpression ----------------------
   Deux fichiers image distincts, un cadrage par orientation, servis par
   <picture>. Sur un karst vertical, recadrer un seul fichier en CSS
   détruit la composition.
   La barre de navigation est en surimpression elle aussi : le hero
   remonte sous elle grâce au décalage négatif.                           */

.hero {
  position: relative;
  min-height: 85vh;
  margin-top: calc(-1 * var(--nav-h));
  display: flex;
  align-items: flex-end;
  background: var(--night);
  isolation: isolate;
}
@media (min-width: 60em) {
  .hero { min-height: 88vh; }
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--night);
}

/* Voile UNI, pas un dégradé. Son opacité n'est pas un réglage d'ambiance :
   elle est calculée par tools/check-veil.py pour que --on-night garde
   4,5:1 sur le pixel le plus clair de chaque zone de texte.

   La contrainte dure est la barre de navigation, qui passe sur le ciel.
   Sur les douze zones mesurées, la plus exigeante est la nav de la
   bannière Contact, dont l'eau est quasi blanche : 0,66. Le bloc titre du
   hero mobile, lui, se contenterait de 0,07. Le voile est donc dimensionné
   par quatre petits liens, et la photographie le paie. */
/* Voile abaissé de 0,66 à 0,40 pour laisser ressortir le vert. Ce n'est
   possible que parce que la barre de navigation ne s'appuie plus dessus :
   elle a désormais son propre fond plein. À 0,40, --on-night mesure 2,24
   sur le ciel sous voile, soit très loin des 4,5 requis ; sur le bloc
   titre, plus sombre, il mesure 5,60.                                  */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(15, 33, 26, 0.40);
}

.hero__content {
  width: 100%;
  padding-block: var(--s-8) var(--s-7);
}

/* Le titre porte le produit, le sous-titre porte la promesse. */
.hero__sub {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--on-night);
  margin: var(--s-4) 0 0;
  max-width: 34ch;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  line-height: 1.04;
  color: var(--on-night);
  max-width: 18ch;
}

/* Deux liens texte, pas des boutons : le doc 09 interdit l'appel à
   l'action commercial. Ils matérialisent le double public du §1.        */
.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}
.hero__links a {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-night);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.hero__links a:hover { color: var(--jade-lift); border-bottom-color: currentColor; }
.hero__links a::after { content: " \2192"; }

/* --- Bannière de page intérieure ----------------------------------------
   Plus basse que le hero d'accueil, qui garde son statut. Le titre occupe
   le tiers gauche. Voile uni, opacité mesurée par tools/check-veil.py.   */

.banner {
  position: relative;
  min-height: 38vh;
  margin-top: calc(-1 * var(--nav-h));
  display: flex;
  align-items: flex-end;
  background: var(--night);
  isolation: isolate;
}
.banner__media { position: absolute; inset: 0; z-index: -2; }
.banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--night);
}
.banner__veil {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(15, 33, 26, 0.66);
}
.banner__content { width: 100%; padding-block: var(--s-7) var(--s-6); }
.banner h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  line-height: 1.04;
  color: var(--on-night);
  max-width: 15ch;
}
/* --on-night-soft ne rend que 2,75:1 sur la bannière la plus claire :
   le chapô des bannières est en --on-night, mesuré 5,15:1. Le kicker du
   hero garde --on-night-soft, sa zone est bien plus sombre (5,25:1).   */
.banner .lead { color: var(--on-night); margin-top: var(--s-4); max-width: 42ch; }

/* --- Produits : le bloc le plus lourd de l'accueil ----------------------- */

.products { --sec-y: clamp(3rem, 7vw, 5.5rem); border-top: 0; }

.products__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .products__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-7);
  }
}

.product figure { margin: 0 0 var(--s-5); }
.product img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: 26rem;
}
.product h2 {
  font-size: var(--t-display-m);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}
.product p { color: var(--ink-soft); }

.link-out {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-out:hover { color: var(--jade); border-bottom-color: currentColor; }
.link-out::after { content: " \2192"; }

/* --- Emplacements produits, section non publiée -------------------------
   Carrés, dimensionnés pour recevoir les photos réelles des échantillons.
   Aucun visuel généré n'y entre : le doc 09 §5 l'interdit.              */

.slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 60em) {
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
}
.slot__photo {
  aspect-ratio: 1 / 1;
  background: var(--paper-alt);
  border: 1px solid var(--limestone);
  margin-bottom: var(--s-4);
}
.slot h2 { font-size: var(--t-display-m); margin-bottom: var(--s-2); }
.slot p { color: var(--ink-soft); font-size: var(--t-small); }

/* --- Origine : bloc asymétrique, en fond sombre sur l'accueil ------------ */

@media (min-width: 60em) {
}
.origin__text p { color: var(--ink-soft); }
.origin__text p:first-child { color: var(--ink); }

figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--gold-deep);
}

/* --- Texte et image en colonnes ------------------------------------------
   Utilisé par About, section The name. L'image occupe environ 40 % de la
   colonne de contenu. Sous 60em elle repasse sous le texte : à 390px une
   colonne de 40 % rendrait l'oiseau illisible.                          */

.split { display: grid; gap: var(--s-6); }
@media (min-width: 60em) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
    column-gap: var(--s-7);
    align-items: start;
  }
}
.split__figure { margin: 0; }
.split__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 59.99em) {
  .split__figure { max-width: 26rem; }
}

/* Figure large sous un bloc de texte, format bannière. */
.wide-figure { margin: var(--s-7) 0 0; }
.wide-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Ligne de clôture : pas d'en-tête de section, mais la même colonne de
   grille, pour que le texte reste aligné sur celui des sections. */
.closing .label { border-top: 0; padding-top: 0; min-height: 0; }
.closing p { color: var(--ink-soft); }

/* --- Dispositifs d'image -------------------------------------------------
   Le registre du site est le document d'arpentage annoté : un libellé pend
   dans la marge, le contenu suit. Les images obéissent au même principe.
   Une planche domine, des vignettes l'annotent, et certaines bandes sortent
   de la colonne de texte pour atteindre le bord de page.

   Ce qui est délibérément évité : la grille d'images de taille égale. Elle
   fait une planche-contact, pas une composition, et elle aplatit la
   hiérarchie entre une image de contexte et un gros plan.                 */

/* Sortie de la colonne de texte jusqu'aux deux bords de la fenêtre. À
   placer en enfant direct de <main>, jamais dans .wrap.                   */
.fullbleed { width: 100%; margin-inline: 0; }

/* --- Vignettes centrées -------------------------------------------------
   Trois images de petit format, alignées sur la colonne de texte et
   centrées dans celle-ci. Format volontairement modeste : ce sont des
   spécimens qui annotent le paragraphe, pas des plaques qui le
   concurrencent.

   L'essai précédent, une bande justifiée débordant au bord droit, mettait
   les images au même rang que le texte. Il combinait aussi largeurs
   inégales, ratios différents, décalages verticaux et débord : quatre
   variables à la fois, qui creusaient un vide de 600px sous la rangée.  */

.thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.thumbs > li { flex: 0 0 auto; }
.thumbs img {
  height: clamp(8rem, 21vw, 12rem);
  width: auto;
  object-fit: cover;
  display: block;
}
/* En colonne unique les trois vignettes s'empilent et la série perd son
   sens de série. On garde les deux plans qui montrent l'oiseau, le corps
   et la tête, et on retire le plan large du site d'hivernage. La légende
   part avec lui : elle nommait les trois plans dans l'ordre.          */
@media (max-width: 59.99em) {
  .thumbs > .thumb--ground,
  .thumbs__note { display: none; }
}

.thumbs__note {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  max-width: none;
}

/* --- Figure habillée par le texte -------------------------------------
   L'image se place à droite et le texte court autour. Une colonne dédiée
   aurait ramené la ligne à 430px dans une grille calée sur la mesure :
   l'habillage garde le texte à pleine largeur au-dessus et au-dessous,
   et met tout de même l'image à sa droite.                             */

.figure-right { margin: 0 0 var(--s-5); }
.figure-right img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 60em) {
  .figure-right {
    float: right;
    width: 44%;
    margin: var(--s-1) 0 var(--s-5) var(--s-6);
    shape-outside: content-box;
  }
  /* La figure flotte : elle ne pousse rien vers le bas, mais elle compte
     comme premier enfant, donc le paragraphe qui la suit héritait de la
     gouttière de .rich > * + * et démarrait 24px plus bas que le libellé
     de section. Le texte se calait alors sur la seconde ligne du libellé.
     Ici, le paragraphe reprend le haut de la colonne.                   */
  .figure-right + p { margin-top: 0; }
}

/* --- Bande de matière --------------------------------------------------
   Une seule ligne de vignettes de largeurs inégales : la bande se lit
   comme un échantillonnage, pas comme une galerie. Elle sépare deux
   sections sans filet ni titre.

   Elle vit dans la colonne de texte de .section__grid, jamais sous le
   rail des libellés : c'est le HTML qui l'y place, avec une cellule
   vide en première colonne, plutôt qu'un retrait chiffré ici qui
   dériverait au prochain changement de gabarit.                        */

.band-mat {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-3);
  margin: 0 0 var(--s-8);
  padding: 0;
  list-style: none;
}
/* Hauteur commune, largeurs inégales : les hauts et les bas s'alignent.
   Avec un ratio fixe et des colonnes de largeurs différentes, les bas
   formaient un escalier qui se lisait comme un défaut.                 */
.band-mat img {
  width: 100%;
  height: clamp(5.5rem, 13vw, 9rem);
  object-fit: cover;
  display: block;
}
@media (min-width: 48em) {
  .band-mat { grid-auto-columns: unset; grid-template-columns: 1.3fr 1fr 1.6fr 1fr 1.2fr 1fr; }
}
/* Sous 48em on n'en montre que trois : six vignettes à 65px de côté ne
   montrent plus rien.                                                    */
@media (max-width: 47.99em) {
  .band-mat > li:nth-child(n+4) { display: none; }
}

/* --- Origine : deux carrés en escalier, à droite du texte -------------
   Les cadres sont carrés mais l'image n'est pas rognée : object-fit
   contain la loge entière dans le carré, sur un fond --paper-alt. C'est
   la demande, et c'est aussi ce qui permet de mettre côte à côte deux
   photos de cadrages différents sans en amputer une.

   Disposition en escalier : le premier carré en haut à gauche de la
   colonne, le second en bas à droite. Deux carrés alignés se liraient
   comme un tableau ; décalés, ils font une diagonale.

   Le décalage n'est pas une valeur écrite en dur. Les deux carrés sont
   ancrés, l'un en haut, l'autre en bas, dans une colonne qui s'étire à
   la hauteur du bloc de texte. Le bas du second carré tombe donc sur la
   dernière ligne du texte quoi qu'il arrive, et son haut arrive de
   lui-même au milieu du premier : c'est la conséquence arithmétique des
   deux ancrages, pas un réglage à retoucher si le texte change.        */

.origin__figs { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.origin__sq { margin: 0; }
.origin__sq img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--paper-alt);
}

/* En colonne unique, l'escalier n'a plus de sens : deux carrés empilés
   se lisent comme une galerie, et ils repoussaient le texte très bas.
   Sous 60em la section garde une seule image, la jacinthe, remontée
   entre le libellé et le texte. Elle prend le gabarit des deux tuiles
   de la section précédente, 4/3 recadré pleine largeur : trois images
   au même format se lisent comme une suite, une image logée dans un
   carré avec des bandes se lirait comme une exception.               */
@media (max-width: 59.99em) {
  .origin__body { display: flex; flex-direction: column; }
  .origin__figs { order: -1; margin: 0 0 var(--s-5); }
  .origin__sq--b { display: none; }
  .origin__sq--a img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    max-height: 26rem;
    background: none;
  }
}

@media (min-width: 60em) {
  .origin__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    column-gap: var(--s-6);
    align-items: stretch;      /* la colonne d'images prend la hauteur du texte */
  }
  .origin__figs {
    display: block;            /* les carrés sont ancrés, plus placés en grille */
    position: relative;
    margin: 0;
    min-height: 20rem;         /* plancher : la colonne ne s'effondre jamais */
  }
  .origin__sq {
    position: absolute;
    width: calc((100% - var(--s-4)) / 2);
  }
  .origin__sq--a { top: 0;    left: 0;  }
  .origin__sq--b { bottom: 0; right: 0; }
}

/* --- Matières (Our Craft) ----------------------------------------------- */

.material + .material {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--rule);
}
.material figure { margin: 0 0 var(--s-5); }
.material img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.material h2 { font-size: var(--t-display-m); margin-bottom: var(--s-4); }
.material p { color: var(--ink-soft); }

/* --- Tableau de spécifications ------------------------------------------
   Sur fond clair alterné depuis la repigmentation : le site ne porte plus
   que deux aplats sombres, tous deux sur l'accueil.                       */

.spec {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-spec);
  line-height: 1.6;
}
.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-top: 1px solid var(--limestone);
}
.spec > div:last-child { border-bottom: 1px solid var(--limestone); }
@media (min-width: 40em) {
  .spec > div {
    grid-template-columns: 22ch minmax(0, 1fr);
    gap: var(--s-5);
  }
}
.spec dt {
  color: var(--forest);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: var(--t-label);
  font-weight: 500;
  padding-top: 0.15em;
}
.spec dd { margin: 0; color: var(--ink); max-width: 62ch; }

/* --- Pied de page --------------------------------------------------------
   --forest, jamais un noir. Trois noirs différents sur une page était le
   défaut principal du rendu précédent.                                    */

.foot { background: var(--forest); color: var(--on-night); }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  padding-block: var(--s-8) var(--s-6);
}
@media (min-width: 48em) {
  .foot__grid { grid-template-columns: auto repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}

.foot__mark { display: flex; align-items: flex-end; gap: var(--s-4); color: var(--on-night); }
.foot__mark svg.crane { height: 40px; }
.foot__mark .type  { height: 16px; width: auto; }

.foot h2 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-night-soft);
  margin-bottom: var(--s-4);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rice-gold);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { color: var(--on-night-soft); }
.foot li + li { margin-top: var(--s-2); }
/* §7 : plus de souligné doré. Liens en --on-night-soft, soulignement au
   survol seulement, en --on-night. L'or ne reste que sur les filets. */
.foot a {
  color: var(--on-night-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot a:hover { color: var(--on-night); border-bottom-color: currentColor; }
.foot :focus-visible { outline-color: var(--jade-lift); }

.foot__legal {
  border-top: 1px solid var(--rice-gold);
  padding-block: var(--s-5) var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--on-night-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  justify-content: space-between;
}
.foot__legal-links { display: flex; gap: var(--s-5); }
.foot__legal a { color: var(--on-night-soft); }
.foot__legal a:hover { color: var(--on-night); }

/* --- Pages légales -----------------------------------------------------
   Aucun gabarit propre : elles réemploient la grille annotée des autres
   pages, le libellé de section faisant office de titre d'article. Une
   page légale qui invente sa propre mise en page se lit comme un corps
   étranger, et c'est le seul endroit du site où le lecteur a besoin de
   repères déjà connus.                                                  */

.legal-date {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Formulaire ----------------------------------------------------------
   Sans backend. Champs à fort contraste, focus visible au clavier, aucune
   couleur chaude. Le bouton est un contrôle de formulaire, pas un appel à
   l'action commercial.                                                    */

.form { max-width: 44ch; }
.field + .field { margin-top: var(--s-5); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--limestone);
  border-radius: 0;
  padding: var(--s-3);
}
.field textarea { resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.form__send {
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-night);
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 0;
  padding: var(--s-3) var(--s-6);
  cursor: pointer;
}
.form__send:hover { background: var(--ink); border-color: var(--ink); }

/* Figure posée dans le fil du texte, sans déborder de la mesure. */
.inline-figure { margin: var(--s-6) 0 0; }
.inline-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Contact : les deux colonnes ---------------------------------------
   Coordonnées et formulaire côte à côte. Empilés, ils laissaient les deux
   tiers de la page vides à droite.                                      */

.contact-cols { display: grid; gap: var(--s-7); }
@media (min-width: 60em) {
  .contact-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); column-gap: var(--s-8); }
}

/* --- Journal -------------------------------------------------------------
   Index chronologique nu : pas de vignette, pas de pagination, pas de
   catégorie, pas de commentaire. Un article se lit, il ne se parcourt pas. */

.journal__list { list-style: none; margin: 0; padding: 0; }
.journal__item + .journal__item {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: var(--rule);
}
.journal__date,
.entry__date {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}
.journal__item h2 { font-size: var(--t-display-m); margin-bottom: var(--s-3); }
.journal__item h2 a { color: var(--ink); text-decoration: none; }
.journal__item h2 a:hover { color: var(--jade); }
.journal__item p { color: var(--ink-soft); }
.journal__empty { color: var(--ink-soft); font-style: normal; }

/* Article : largeur de lecture calée à 68ch, comme demandé. */
.entry { padding-block: var(--s-6) var(--s-8); }
.entry__head,
.entry__body,
.entry__back { max-width: 68ch; margin-inline: auto; }
.entry__head h1 { font-size: var(--t-display-l); line-height: 1.06; }
.entry__head .lead { margin-top: var(--s-5); }
.entry__body { margin-top: var(--s-8); }
.entry__body > * + * { margin-top: var(--s-5); }
.entry__body p { max-width: none; }
.entry__body h2 {
  font-size: var(--t-display-m);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}
.entry__back {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --- Titres de page intérieure ------------------------------------------ */

.pagehead { padding-block: var(--s-6) var(--s-7); }
.pagehead h1 { font-size: var(--t-display-l); line-height: 1.06; max-width: 22ch; }
.pagehead .lead { margin-top: var(--s-5); }
.pagehead--panel { padding-block: var(--s-8) var(--s-9); }
/* Bannière sans chapô : le creux réservé au sous-titre n'a plus rien
   à porter et se lit comme un oubli. Le bas se resserre.         */
.pagehead--bare { padding-block: var(--s-7) var(--s-6); }

/* --- Mouvement ----------------------------------------------------------
   Aucune animation qui attire l'attention sur elle-même. Les seules
   transitions sont sur les états de survol, et elles disparaissent
   entièrement sous prefers-reduced-motion.                                */

@media (prefers-reduced-motion: no-preference) {
  a, .link-out, .nav a {
    transition: color 160ms ease, border-color 160ms ease,
                text-decoration-color 160ms ease;
  }
}

/* ==========================================================================
   Couche desktop
   --------------------------------------------------------------------------
   Le socle ci-dessus est mobile-first et le reste. Ce bloc ne fait pas que
   laisser respirer : il recompose. Sans lui, les pages de texte flottaient
   à gauche d'un conteneur de 1440px avec 600px de vide non intentionnel à
   droite, et les quatre matières s'empilaient en une colonne unique.
   ========================================================================== */

@media (min-width: 60em) {

  /* Mesure un peu plus large : à 62ch le bloc paraissait maigre dans la
     page, sans pour autant dépasser la longueur de ligne confortable.   */
  :root { --measure: 66ch; }

  /* UNE SEULE largeur de grille pour tout le site, sans exception.
     Les exceptions précédentes (sections d'images en pleine largeur)
     mettaient les labels de deux sections voisines sur deux colonnes
     différentes : MATERIALS était décalé à droite d'ORIGIN parce que
     l'une était centrée à 54rem et l'autre pas plafonnée du tout.
     Tout label de section, présent ou à venir, part donc de la même
     verticale, et le contenu associé aussi.                            */
  /* Le bloc part du bord gauche de la page, aligné sur la barre de
     navigation, le hero et le pied de page. Il ne se centre plus : centré
     à 52rem, il démarrait à 336px alors que tout le reste du site
     commence à 64px.

     Le rail de gauche absorbe le décalage. C'est lui qui s'élargit, pas
     la colonne de texte, qui reste à sa mesure : si le texte partait lui
     aussi de 64px pour finir au même bord droit, sa ligne ferait 960px,
     soit une centaine de caractères, et redeviendrait illisible.       */
  .section__grid {
    max-width: 69rem;
    margin-inline: 0;
    grid-template-columns: 14ch minmax(0, 1fr);
  }
  /* Ligne longue assumée. Le bloc part du bord de page et va jusqu'au bord
     droit, ce qui donne environ 950px de mesure. Le corps reste au-dessus
     du degré mobile et l'interlignage large : c'est la compensation
     classique d'une mesure large, elle ne la raccourcit pas mais elle la
     rend lisible. Abaissé d'un cran le 10/08/2026 avec le reste de
     l'échelle ; l'interlignage descend moins vite que le corps, parce
     que c'est lui qui tient la ligne longue.                          */
  body { font-size: 1.0625rem; line-height: 1.72; }
  .pagehead,
  .spec {
    max-width: 69rem;
    margin-inline: 0;
  }
  .pagehead h1 { max-width: 22ch; }
  /* Dans une colonne déjà calibrée, le plafond de mesure ferait doublon
     et rouvrirait l'écart. La colonne fait la mesure.                  */
  .rich p, .section__grid > div > p, .spec dd { max-width: none; }

  /* Le hero reste pleine largeur, l'image y est en cadrage paysage.
     object-position privilégie le bas du cadre, là où se trouve l'eau. */
  .hero__frame { height: clamp(28rem, 72vh, 44rem); }
  .hero__img   { object-position: center 62%; }
  .hero__text  { max-width: 54rem; margin-inline: auto; }

  .nav { gap: var(--s-6); font-size: 0.8125rem; }

  /* Une figure isolée en portrait servie pleine largeur donnerait une
     image de 1376 par 1720 pixels. Les paysages, eux, gagnent à occuper
     toute la largeur : la distinction se fait par la classe.           */
  .figure--portrait { max-width: 34rem; margin-inline: auto; }

}

@media (min-width: 72em) {

  /* Our Craft : les quatre matières passent en deux colonnes. En une
     seule, la page faisait deux fois la hauteur nécessaire et la moitié
     droite de l'écran restait vide.                                     */
  .materials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
    row-gap: var(--s-6);
  }
  .materials .material,
  .materials .material + .material {
    margin-top: 0;
    padding-top: var(--s-6);
    border-top: var(--rule);
  }
  .materials .material p { max-width: 46ch; }

  /* Les deux tuiles produits gagnent en présence sans que les images
     deviennent des affiches.                                           */
  .product img { max-height: 76vh; }
}