/* =========================================================
   Rivmont — primitives de mise en page
   Container, Section, SectionLabel, Button, Header, Menu, Footer.
   Ces briques sont réutilisées par toutes les sections.
   ========================================================= */

/* ---------------------------------------------------------
   Container / Section
   --------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--wide{max-width:none}
.container--narrow{max-width:1100px}

.section{
  position:relative;
  padding-block:var(--section-y);
}
.section--flush{padding-block:0}
.section--tall{padding-block:var(--s-3xl)}

/* Panneau qui recouvre la sortie d'une piste collante. Deux exigences :
   un fond **opaque**, sinon la scène restée collée se voit au travers —
   jamais `transparent`, qui laissait passer le noir du body sans rien
   masquer ; et un ordre d'empilement explicite, comme partout ailleurs
   dans ce projet.

   SON BORD EST FRANC, ET IL A DÛ LE REDEVENIR. Il est entré un temps en
   fondu sur 140 px, et c'était justifié tant que le hero se faisait
   couper sur place : la trame, le titre et la sculpture se retrouvaient
   tranchés net sur une horizontale, et c'est ça — pas la valeur — qui se
   lisait comme une coupure.

   Le retrait du hero a retiré la raison. La typographie s'efface avant
   que le panneau n'arrive et le cadre de la scène se ferme sur ses
   propres arêtes franches : il ne reste presque plus rien à trancher, et
   une bande floue devant un cadre net était le seul geste mou de toute
   la sortie. Si le retrait disparaissait un jour, c'est la première
   chose à remettre — 140 px, `clamp(88px, 16svh, 168px)`, et au-delà de
   260 px le panneau se lit comme une brume au lieu d'un panneau.

   IL N'ENTRE PAS SUR DU NOIR PUR, EN REVANCHE, et cet accord-là devient
   le seul garde-fou du bord franc. Le fond du hero est un dégradé radial
   qui retombe sur `--hero-floor` : un panneau à zéro se signalerait par
   sa valeur autant que par son arête. Le bord suit donc ce qu'il
   recouvre — voir la parabole plus bas.

   Le panneau retombe ensuite sur `--bg` en un écran — la hauteur de sa
   course. Sans quoi la couture aurait changé de place : un fond plus
   clair aurait fait une marche au bas de la section. */
.section--panel{
  /* La course du dégradé est celle du panneau : un écran, comme
     `--hero-exit` dans `sections.css`. La valeur est répétée ici parce
     que ce jeton vit sur `.hero`, dont ce panneau est un frère et non un
     descendant — il ne peut pas en hériter. C'est la seule répétition de
     tout le raccord ; si l'un des deux change, l'autre suit.

     La parabole : le fond du hero n'est pas uniforme, son dégradé étant
     centré à 45 % de la hauteur. `--hero-out` dit où en est la couture —
     0 en bas, 1 en haut —, et `4·x·(1−x)` vaut 0 aux extrémités et 1 au
     milieu, ce qui est exactement le profil à suivre. Vérifié sur sept
     points contre le fond réellement composé : l'écart reste sous 2 sur
     255, soit ΔL* < 0,7, d'un bout à l'autre. */
  background:linear-gradient(to bottom,
    color-mix(in srgb,
      var(--panel-peak) calc(4 * var(--hero-out, 0) * (1 - var(--hero-out, 0)) * 100%),
      var(--panel-top)) 0,
    var(--bg) 100svh);
  z-index:var(--z-sticky);
}

/* Le filet du bord d'attaque est déposé, et c'est la contrepartie
   directe de ce qui précède. Il existait pour rendre le glissement
   lisible — « un noir qui glisse sur un noir ne se lit pas comme un
   panneau » — donc il désignait exactement ce qu'on cherche maintenant
   à effacer : avec un fond accordé, cette ligne claire devenait le seul
   bord visible, et la coupure tout entière. Conservé et non supprimé —
   le projet n'est pas sous git — pour le cas où le raccord redeviendrait
   une rupture assumée.

.seq:has(.is-sequenced) + .section--panel{
  border-top:1px solid var(--line-soft);
}
*/

/* Enveloppe pour les futures séquences collantes.
   Fournie dès maintenant pour que les sections concernées aient déjà
   la bonne structure quand on branchera les animations. */
.sticky-stage{
  position:sticky;
  top:0;
  min-height:100svh;
  display:grid;
  align-content:center;
  z-index:var(--z-sticky);
}

/* En-tête de section : numéro + libellé, filet, titre. */
.section-label{
  display:flex;align-items:center;gap:var(--s-xs);
  font-size:var(--fs-label);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--muted);
}
.section-label__index{color:var(--accent-text);font-variant-numeric:tabular-nums}
.section-label__rule{flex:1;height:1px;background:var(--line-soft);max-width:180px}

.section-head{
  display:grid;
  gap:var(--s-md);
  margin-bottom:var(--s-xl);
}

/* ---------------------------------------------------------
   Boutons et liens
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:19px clamp(24px,2.4vw,38px);
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--tr-wide);text-transform:uppercase;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{background:var(--accent-lift);transform:translateY(-2px)}

.btn--ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line);
}
.btn--ghost:hover{background:var(--panel);border-color:var(--accent);transform:translateY(-2px)}

.btn--sm{padding:13px 22px}

/* CTA d'entrée : plus haut que le bouton courant, la flèche avance au
   survol. Le déplacement du bouton lui-même reste celui de `.btn`. */
.btn--lead{padding:22px clamp(28px,2.6vw,42px)}
.btn__arrow{display:inline-flex;transition:transform var(--dur) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}

/* Lien éditorial : filet qui se déplie au survol. */
.text-link{
  position:relative;
  display:inline-block;
  font-size:var(--fs-label);
  letter-spacing:var(--tr-wide);text-transform:uppercase;
  padding-bottom:5px;
}
.text-link::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--accent-text);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.text-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------------------------------------------------------
   Header
   Transparent au-dessus du hero, plein noir dès que le panneau de la
   section suivante l'a recouvert, et visible de bout en bout.
   `ui/header.js` y pose `is-scrolled` et `data-section` — ce dernier
   ne sert encore à rien, c'est l'ossature d'un futur thème par
   section.
   --------------------------------------------------------- */
.header{
  position:fixed;
  inset:0 0 auto;
  z-index:var(--z-header);
  padding-block:clamp(16px,2vw,26px);
  transition:transform var(--dur) var(--ease),
             background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}

/* ---------- l'encre de la barre pendant la sortie ----------
   LA BARRE RESTE TRANSPARENTE. Ce n'est pas elle qui change de fond,
   c'est ce qu'il y a derrière : la scène se retire en laissant une marge
   claire, et chaque élément de la barre doit noircir **quand le marbre
   arrive sous lui**, pas avant ni après. Un fond opaque aurait masqué le
   problème au prix d'une barre pleine posée sur le hero.

   Les deux seuils sont calculés sur la géométrie du cadre, pas
   choisis. Le cadre ferme ses côtés de 15 % chacun, linéairement avec
   la progression brute de la sortie (`--hero-exit-lin`, `ui/hero.js`,
   la même que le panneau qui monte) : la bande claire fait
   15 % × t de la largeur. En 1440 :

   — LE LOGOTYPE s'étend de 45 à 145 px, et la bande fait 216 px au
     plus (15 % de 1440) : elle touche sa première lettre à 45/216 =
     0,21 de la course et a dépassé la dernière à 145/216 = 0,67.
     C'est exactement la fenêtre du fondu : l'encre est crème tant que
     le mot est sur la scène, grise pendant la traversée — le seul état
     lisible sur les deux —, noire quand le marbre est passé dessous.

   — LA NAVIGATION va de 544 à 896 px : **la bande ne l'atteint jamais**
     (216 px au plus), elle reste sur la scène sombre toute la sortie.
     Ce qui finit par passer sous elle, c'est le panneau qui monte, et
     il atteint sa ligne de base à 0,75 de la course brute. D'où une
     bascule sur le dernier quart, qui se termine pile au recouvrement.

   Les deux fondus s'achèvent sur les valeurs exactes que `is-light`
   prend juste après : le relais ne fait aucun à-coup.

   `transition:none` sur les liens : ces valeurs sont tenues par le
   scroll, et une transition y ajouterait un retard de temps — la règle
   vaut ici comme partout ailleurs sur cette page. */
.header.is-hero-exit{
  --riv:clamp(0, calc((var(--hero-exit-lin, var(--hero-out, 0)) - .21) / .46), 1);
  --nav-ink:clamp(0, calc((var(--hero-exit-lin, var(--hero-out, 0)) - .755) / .245), 1);
}
.header.is-hero-exit .logo{
  color:color-mix(in srgb, var(--marble-ink) calc(var(--riv) * 100%), var(--ink));
}
.header.is-hero-exit .nav a{
  transition:none;
  color:color-mix(in srgb, var(--marble-ink-soft) calc(var(--nav-ink) * 100%),
                  var(--ink-soft));
}
@media (max-width:760px){
  /* Aucune bande claire n'y passe sous le logotype — les côtés ne se
     ferment pas (voir `sections.css`) —, donc rien à faire noircir. La
     bascule se fait d'un coup avec `is-light`, au recouvrement. */
  .header.is-hero-exit{--riv:0}
}
/* Fond plein, et non plus translucide flouté. Le header prend cet état
   au moment exact où le panneau de la section suivante recouvre le hero :
   les deux doivent être le même noir, sinon la barre se détache sur le
   panneau qu'elle est censée prolonger.

   Depuis que ce panneau entre sur le sol de la scène et non sur du noir
   pur, l'accord n'est plus immédiat : il se fait en un écran, le temps
   que le dégradé retombe sur `--bg`. L'écart est de l'ordre d'un ΔL* de
   1,3 au moment du recouvrement, sous le seuil où un bord se remarque
   sans le chercher, et le filet délimite déjà la barre. Le prendre à
   `--panel-top` corrigerait cet écran-là au prix de tous les autres,
   où le header serait alors plus clair que des sections franchement
   noires : c'est un mauvais échange.

   Le `backdrop-filter` est retiré et non mis à zéro : il n'y a plus rien
   à flouter derrière un fond opaque, et c'était une passe de composition
   par image. */
.header.is-scrolled{
  background:var(--bg);
  border-bottom-color:var(--line-soft);
}

/* ---------- la barre s'efface ----------
   Posée par `ui/header.js` sur les sections `[data-header="clear"]` : le
   procédé aujourd'hui, toute section plein cadre demain. Un fond plein y
   poserait un bandeau opaque en travers de l'image, et un filet en
   soulignerait le bord — c'est précisément ce que ces sections n'ont pas
   le droit d'avoir.

   L'encre ne change pas : ces images sont sombres de bord à bord, et le
   crème du hero y tient ses 12:1. La règle ne fait donc que retirer,
   elle ne rhabille rien. */
.header.is-clear{
  background:transparent;
  border-bottom-color:transparent;
}

/* ---------- l'encre de la barre pendant l'ouverture du procédé ----------
   LE SYMÉTRIQUE DE LA SORTIE DU HERO. La barre est transparente depuis
   que le marbre est sous elle ; ce qui monte maintenant, c'est l'image,
   et chaque élément doit passer au crème **quand elle arrive sous lui**
   — pas avant, sinon du crème sur du marbre, pas après, sinon du noir
   sur l'image. `ui/process.js` publie sur la racine `--frame-top`, le
   bord haut du cadre en pixels, sans unité. Chaque élément se fond de
   son bas à son haut, sur la hauteur exacte qu'il occupe.

   Les bornes sont les boîtes mesurées, pas choisies. En 1512 × 860 :
   le logotype va de 40 à 58 px, la navigation de 43 à 62. Sous 760 px,
   le logotype de 32 à 47 et le bouton du menu de 16 à 62. Elles varient
   d'un ou deux pixels avec l'espacement de la barre (`2vw`, plafonné
   à 26 px dès 1300 px) — sans conséquence visible.

   Repli : sans script, `--frame-top` n'existe pas et vaut −1, le fondu
   est fini, l'encre est crème — l'état d'arrivée, comme partout.
   Aucune transition : la valeur est tenue par le scroll.

   `:not(.is-light)` : tant que la zone claire tient encore la barre —
   le repère `.process__light`, jusqu'à 0,44 de l'ouverture —, c'est son
   encre qui vaut, et elle est la même que le fondu à zéro : le relais
   est invisible. C'est aussi ce qui garde le mouvement réduit juste :
   le module ne publie rien, la zone claire tient jusqu'au bout du
   marbre, et le crème n'arrive que sur le noir. */
/* ET LA FERMETURE, DANS L'AUTRE SENS. Quand les deux portes s'écartent,
   le marbre arrive sous chaque élément et son encre repasse au sombre :
   `--door-edge` est l'abscisse du bord de la porte gauche, `--door-gap`
   la demi-ouverture depuis le centre (publiés par `ui/process.js`).
   Le logotype va de 47 à 145 px : il s'assombrit pendant que le bord
   passe de 145 à 47. La navigation est centrée, de 571 à 941 sur 1512 :
   les deux portes la découvrent ensemble, depuis le centre, sur 185 px
   d'ouverture. Sous 760 px, le logotype de 20 à 105 ; le bouton du menu
   est au centre, découvert sur les 24 premiers pixels. Chaque encre est
   le produit des deux fondus — celui du cadre qui monte, celui des
   portes qui s'ouvrent. */
.header.is-clear:not(.is-light){
  --riv:calc(clamp(0, calc((58 - var(--frame-top, -1)) / 18), 1)
           * (1 - clamp(0, calc((145 - var(--door-edge, 1e5)) / 98), 1)));
  --nav-ink:calc(clamp(0, calc((62 - var(--frame-top, -1)) / 19), 1)
               * (1 - clamp(0, calc(var(--door-gap, 0) / 185), 1)));
}
.header.is-clear:not(.is-light) .logo{
  color:color-mix(in srgb, var(--ink) calc(var(--riv) * 100%), var(--marble-ink));
}
.header.is-clear:not(.is-light) .nav a{
  transition-property:none;
  color:color-mix(in srgb, var(--ink-soft) calc(var(--nav-ink) * 100%),
                  var(--marble-ink-soft));
}
@media (max-width:760px){
  .header.is-clear:not(.is-light){
    --riv:calc(clamp(0, calc((47 - var(--frame-top, -1)) / 15), 1)
             * (1 - clamp(0, calc((105 - var(--door-edge, 1e5)) / 85), 1)));
    --burger-ink:calc(clamp(0, calc((62 - var(--frame-top, -1)) / 46), 1)
                    * (1 - clamp(0, calc(var(--door-gap, 0) / 24), 1)));
  }
  .header.is-clear:not(.is-light) .burger{
    transition-property:none;
    color:color-mix(in srgb, var(--ink-soft) calc(var(--burger-ink) * 100%),
                    var(--marble-ink-soft));
    border-color:color-mix(in srgb, var(--line) calc(var(--burger-ink) * 100%),
                           var(--marble-line));
  }
}

/* ---------- la barre sur fond clair ----------
   Posée par `ui/header.js` tant que la barre est entièrement sur une
   section `[data-header="light"]`, et retirée dès qu'elle en sort : tout
   ce qui suit le panneau est noir, une encre sombre y serait fausse.

   Même patron que la section elle-même : ce sont les jetons qui
   basculent, pas les règles. Le logotype, la navigation et le bouton
   burger lisent `--ink`, `--ink-soft` et `--line` sans avoir à savoir
   sur quoi ils sont posés — d'où le `color` explicite, sans lequel
   « RIV », qui hérite sa couleur, resterait crème.

   Deux choses ne basculent pas, et c'est voulu. Le « MONT » du logotype
   garde `--accent` : `docs/DESIGN.md` en fait l'exception nommée, et ce
   bleu passe même mieux ici — 5,0:1 sur le marbre contre 3,4:1 sur le
   noir. Et le bouton d'appel garde son aplat bleu à texte blanc, qui
   fonctionne sur les deux fonds.

   La navigation prend `--marble-ink-soft` et non l'encre pleine : c'est
   le symétrique exact de son état sombre, où elle est en `--ink-soft`
   pour rester sous le logotype. 6,2:1 — franchement sombre, sans venir
   disputer la hiérarchie. */
.header.is-light{
  --ink:var(--marble-ink);
  --ink-soft:var(--marble-ink-soft);
  --line:var(--marble-line);
  --line-soft:var(--marble-line-soft);
  color:var(--ink);
  /* TRANSPARENTE, PAS MARBRE. Elle a porté un fond de marbre ; sur une
     section de marbre, la seule chose que ce fond faisait était de
     couper ce qui montait sous la barre — la pièce blanche de
     `#positioning`, puis le cadre du procédé. Retiré à la demande du
     client. Le filet part avec lui : sur du marbre, il désignait le
     bord d'une barre qu'on ne veut plus voir. Ce qui reste est l'encre,
     et c'est tout ce que cet état a à faire. */
  background:transparent;
  border-bottom-color:transparent;
}
/* ---------- l'encre de la barre pendant le recul vers le musée ----------
   La zone claire tient jusqu'au pied de page — la piste de la méthode
   est en marbre —, mais ce qui monte sous la barre à la fin, c'est le
   musée, sombre de bord à bord, et chaque élément repasse au crème
   **quand l'image arrive sous lui**. Même patron que l'ouverture du
   procédé : `ui/panels.js` publie sur la racine `--museum-top` et
   `--museum-left`, les bords haut et gauche de la fenêtre qui s'ouvre,
   en pixels sans unité. La fenêtre part de l'image de la carte 04, à
   droite : elle atteint la navigation par le haut (43 à 62 px) et le
   logotype par la gauche (40 à 145 px) — chaque encre est le produit
   des deux fondus, bord haut et bord gauche, sur la boîte exacte de
   l'élément. En 1512 × 860 : la navigation, centrée, va de 571 à 941 ;
   la fenêtre y arrive à .72 de la course, sur le logotype à .80. Le
   bouton garde son bleu. Sans transition : tenu par le scroll.

   Repli : sans publication (`#positioning`, le procédé), les bords
   valent 1e5 — rien sous la barre —, les encres sont celles de
   `is-light`. Le survol suit la même encre. */
.header.is-light{
  --riv-m:calc(clamp(0, calc((58 - var(--museum-top, 1e5)) / 18), 1)
             * clamp(0, calc((145 - var(--museum-left, 1e5)) / 105), 1));
  --nav-m:calc(clamp(0, calc((62 - var(--museum-top, 1e5)) / 19), 1)
             * clamp(0, calc((941 - var(--museum-left, 1e5)) / 370), 1));
}
.header.is-light .logo{
  color:color-mix(in srgb, var(--night-ink) calc(var(--riv-m) * 100%), var(--marble-ink));
}
.header.is-light .nav a{
  transition-property:none;
  color:color-mix(in srgb, var(--night-ink-soft) calc(var(--nav-m) * 100%),
                  var(--marble-ink-soft));
}
.header.is-light .nav a:hover{
  color:color-mix(in srgb, var(--night-ink) calc(var(--nav-m) * 100%), var(--marble-ink));
}
/* Les deux règles qui suivent ne sont posées par personne aujourd'hui.
   Conservées et non supprimées : le projet n'est pas sous git.

   `is-hidden` masquait le header au scroll descendant. Le header doit
   rester visible de bout en bout ; la bascule est commentée dans
   `ui/header.js`, et c'est là qu'on la remet.

   `is-veiled` l'effaçait pendant la séquence du manifesto, dont la carte
   ivoire jurait avec un header en couleurs claires. Cette section est en
   réserve, et rien ne pose plus cette classe — le commentaire précédent
   l'attribuait encore à `ui/hero.js`, qui ne l'écrit pas. */
.header.is-hidden{transform:translateY(-100%)}
.header.is-veiled{transform:translateY(-100%);pointer-events:none}

/* Trois colonnes de largeur égale de part et d'autre : la navigation
   se retrouve centrée sur la page, et non repoussée par le logo ou par
   le bouton — un `space-between` la décalerait dès que l'un des deux
   change de longueur. */
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s-md);
}
.header__inner > .header__actions{justify-self:end}

.logo{
  font-size:clamp(15px,1.2vw,18px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
}
.logo span{color:var(--accent)}

.nav{display:flex;justify-content:center}
.nav ul{display:flex;align-items:center;gap:clamp(18px,2.4vw,42px)}
.nav a{
  position:relative;
  font-size:var(--fs-label);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:4px;
  transition:color var(--dur) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--accent-text);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}

.header__actions{display:flex;align-items:center;gap:var(--s-xs)}

.burger{
  display:none;
  width:46px;height:46px;
  place-items:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--ink-soft);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.burger:hover{border-color:var(--accent);color:var(--accent-text)}
.burger i{display:block;width:16px;height:1px;background:currentColor;transition:transform var(--dur) var(--ease)}
.burger i+i{margin-top:5px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------------------------------------------------------
   Menu plein écran
   --------------------------------------------------------- */
.menu{
  position:fixed;inset:0;
  z-index:var(--z-menu);
  background:var(--bg);
  display:grid;
  align-content:center;
  padding:var(--s-2xl) var(--gutter);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
}
.menu.is-open{opacity:1;visibility:visible}
/* Le header repasse au-dessus du menu ouvert, sinon le bouton de
   fermeture se retrouve dessous et devient incliquable. */
body.is-menu-open .header{z-index:calc(var(--z-menu) + 1)}
.menu__list{display:grid;gap:var(--s-sm)}
.menu__list a{
  font-family:var(--serif);
  font-size:clamp(34px,7vw,64px);
  line-height:1.05;
  color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.menu__list a:hover{color:var(--accent-text)}
.menu__foot{
  margin-top:var(--s-xl);
  display:flex;flex-wrap:wrap;gap:var(--s-md);
  align-items:center;
}

/* ---------------------------------------------------------
   Footer — les colonnes, et le logotype géant
   Les colonnes (marque, navigation, expertises, réseaux), puis le mot
   RIVMONT d'un bord à l'autre de la largeur utile, puis la ligne
   légale. Le mot est en Cormorant — le registre de « MÉTHODE
   RIVMONT. », la signature des mains : 300, capitales, chasse .06 em —
   avec son « mont » en bleu, la seule exception nommée aux seuils de
   contraste. Il a été en Manrope, la police du logotype, le temps
   d'un aller-retour ; le client l'a voulu dans la serif.

   LA TAILLE DU MOT EST UNE FRACTION DE LA LARGEUR : Cormorant 300 en
   capitales, « RIVMONT » avance de 4,98 em à cette chasse (.06 em,
   l'interlettrage final retiré ; 4,977 mesuré au pixel une fois les
   polices chargées — la même fraction que Manrope 500 à .1 em, par
   coïncidence) — d'où la largeur utile sur 4,98. LA LARGEUR UTILE EST
   CELLE DU CONTENEUR, PAS DE LA FENÊTRE : `.container` est borné à
   `--container` (1560 px), et au-delà le mot calé sur 100 vw débordait
   des colonnes et se calait à gauche (vu par le client en 1920 ; en
   1512 le conteneur n'est pas borné et rien ne le montrait). Donc
   `min(100vw, --container)` moins deux gouttières — la même équation
   que le conteneur, sans `cqw` ni containment sur une classe partagée.
   La ligne est serrée à .66 — la hauteur de capitale de Cormorant,
   .654 em mesurée : des capitales n'ont ni jambage ni ascendante, et la
   boîte épouse l'encre pour que les marges soient les vraies. Sans
   `clamp` par le bas : sur un téléphone le mot fait la largeur de
   l'écran, c'est le sens de la chose.
   --------------------------------------------------------- */
.footer{
  position:relative;
  border-top:1px solid var(--line-soft);
  padding-block:var(--s-xl) var(--s-lg);
  overflow:hidden;
}
.footer__mark{
  margin:var(--s-lg) auto;
  width:100%;
  font-family:var(--serif);font-weight:300;
  font-size:calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 4.98);
  line-height:.66;
  text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;
  color:var(--ink);
  text-align:center;
}
/* L'interlettrage s'ajoute aussi après la dernière lettre : à .06 em sur
   un mot de 280 px, c'est 17 px de vide à droite. Retirés, pour que
   l'encre touche les deux bords. */
.footer__mark .wordmark{margin-right:-.06em}
.footer__mark .wordmark span{color:var(--accent)}
/* Le mot est le pivot entre les colonnes et la ligne légale : la même
   marge des deux côtés (`--s-lg`, resserrée depuis `--s-xl` au retour
   du client), et la boîte à la hauteur des capitales. La ligne légale
   ne remet donc pas la sienne — sinon 124 px au-dessus de l'encre
   contre 62 en dessous, mesurés en 1512 avant le resserrement. */
.footer__mark + .footer__bottom{margin-top:0}
.footer__grid{
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:var(--s-lg) var(--s-md);
}
.footer__brand{max-width:34ch}
/* Sans logotype au-dessus (doublon avec le header) : la baseline tient
   seule la colonne de marque, sur la ligne des titres de colonnes. */
.footer__baseline{margin:0;color:var(--ink-soft);font-size:var(--fs-body)}
/* Le territoire, sous la baseline. */
.footer__place{margin:var(--s-xs) 0 0;color:var(--muted)}
.footer__col h3{
  margin-bottom:var(--s-sm);
  font-size:var(--fs-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--muted);
  font-family:var(--sans);font-weight:400;
}
.footer__col li+li{margin-top:10px}
.footer__col a{color:var(--ink-soft);transition:color var(--dur) var(--ease)}
.footer__col a:hover{color:var(--ink)}

.footer__bottom{
  margin-top:var(--s-md);
  padding-top:var(--s-sm);
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-md);
  align-items:center;justify-content:space-between;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-md)}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1240px){
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:grid}
  .header__actions .btn{display:none}
}
@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}