/* ============================================================================
   CADENCE — le socle.
   ============================================================================

   Le thème du coaching sportif : préparateur physique, salle, boxe, course,
   pilates. Ce qu'on y vend n'est ni une promesse d'image ni une expertise de
   cabinet — c'est une TRANSFORMATION, et elle se prouve par des chiffres, un
   programme et un avant/après.

   ## LA GRAMMAIRE : LA BANDE ET LE CADRE PLEIN

   Troisième grammaire du catalogue, et elle ne ressemble à aucune des deux
   autres :

     SCÈNE   le canevas et la dalle — des blocs très arrondis posés en retrait
     ÉPURE   la règle et le filet — un tracé, des cadres pointillés
     CADENCE la bande et le cadre plein — rien n'est en retrait de rien

   La page est une SUITE DE BANDES pleine largeur qui alternent de surface. La
   photographie va d'un bord à l'autre, sans marge et sans arrondi. Le titre
   touche les bords du conteneur. Il n'y a ni liseré ni gouttière décorative :
   ce qui sépare deux sections, c'est le changement de fond, franc.

   C'est la langue des sites de salle et d'équipement sportif, et elle tient
   pour une raison simple : le sport ne se vend pas en douceur.

   ## LES TROIS GESTES

   1. LE RAYON EST DE 2 PIXELS. Presque rien — mais pas zéro : un angle
      parfaitement vif fait accroc à l'écran, surtout sur un bouton. Deux
      pixels donnent l'angle sans l'agression. Le rayon est le marqueur de
      famille : 999 px chez SCÈNE, 4 px chez ÉPURE, 2 px ici.

   2. LES TITRES SONT EN CAPITALES CONDENSÉES, EMPILÉES SERRÉ. Interlignage
      0,86, approche à zéro, quatre lignes qui forment un bloc plutôt qu'une
      phrase. C'est l'affiche de salle, et c'est ce qui distingue ce thème
      d'un thème de service qui aurait juste changé de couleur. La police
      condensée est nécessaire : la même chose en grotesque large donne des
      lignes qui n'arrivent jamais au bord.

   3. TOUT SE COMPTE. `01 / 04` sur chaque étape du programme, une barre de
      progression sous chacune, des chiffres en chronomètre, une bande de mots
      qui défile entre les sections. Le sport est une affaire de séries et de
      répétitions ; la mise en page le dit.

   ## LES QUATRE SURFACES

       .s-fond      le fond de page
       .s-bloc      la bande légèrement décalée
       .s-contre    la bande renversée — clair sur sombre, ou l'inverse
       .s-accent    la bande en couleur

   Sept couleurs réglables, comme dans les deux autres thèmes. Le reste — gris
   de texte, filets, fonds de carte, accent lisible — se calcule en
   `color-mix()` depuis le couple fond/encre de la SURFACE. Une section ne
   choisit pas trois couleurs : elle choisit une surface, et ne peut donc pas
   fabriquer un mariage qui ne va pas.

   ## AUCUN SCRIPT

   `assets/` n'accepte que `.css` et `.svg`. Les dépliants sont des
   `<details>`, l'apparition au défilement passe par `animation-timeline:
   view()`, les bandes défilantes par une animation CSS, les carrousels par
   `scroll-snap`. Les barres de progression sont des dégradés.
   ========================================================================= */

/* ── Remise à zéro ──────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--g-fond);
  color: var(--g-encre);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: from-font; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent, var(--g-accent)); outline-offset: 2px; }
::selection { background: var(--g-accent); color: var(--g-sur-accent); }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--g-encre); color: var(--g-fond);
  text-decoration: none;
}
.saut:focus { left: 0; }

/* ── Le vocabulaire ─────────────────────────────────────────────────── */

:root {
  --f-condensee: "Arial Narrow", "Helvetica Neue Condensed", -apple-system,
                 BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-grotesque: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
                 "Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
            "Roboto Mono", Menlo, monospace;

  /* ── L'échelle ──
     Le titre monte plus HAUT que dans les deux autres thèmes — jusqu'à
     7 rem — parce qu'une condensée en capitales occupe moins de largeur par
     caractère. À taille égale, elle a l'air plus petite ; à largeur égale,
     elle est plus grande. */
  --t-base: calc(1.0625rem * var(--k-texte, 1));
  --t-petit: calc(0.9375rem * var(--k-texte, 1));
  --t-micro: calc(0.8125rem * var(--k-texte, 1));

  --t-affiche: calc(clamp(3rem, 8.5vw, 7rem) * var(--k-titre, 1));
  --t-1: calc(clamp(2.1rem, 5vw, 4rem) * var(--k-titre, 1));
  --t-2: calc(clamp(1.5rem, 2.6vw, 2.15rem) * var(--k-titre, 1));
  --t-3: calc(clamp(1.15rem, 1.5vw, 1.35rem) * var(--k-titre, 1));

  --y: calc(clamp(3.5rem, 6vw, 6.5rem) * var(--k-densite, 1));
  --y-bloc: calc(clamp(1.75rem, 3vw, 2.75rem) * var(--k-densite, 1));
  --gout: calc(clamp(0.5rem, 0.9vw, 0.85rem) * var(--k-densite, 1));

  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --courbe-douce: cubic-bezier(0.4, 0, 0.2, 1);

  /* Les ombres sont quasi absentes. Cette grammaire ne fait rien flotter :
     tout est plaqué, bord à bord. Elles ne servent qu'au panneau du menu
     réduit, qui doit passer par-dessus le contenu. */
  --ombre: 0 18px 48px -18px rgb(0 0 0 / 0.45);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");

  --gouttiere: clamp(1.15rem, 3.5vw, 2.75rem);

  /* La forme du BOUTON est distincte de celle des cartes. Un salon veut des
     cartes rondes ET des boutons en pilule ; un chantier veut les deux à
     zéro ; un cabinet veut douze partout. Le défaut suit le rayon global —
     seules les éditions qui veulent la pilule le débranchent. */
  --r-bouton: var(--r);
}

/* ============================================================================
   LES SURFACES
   ========================================================================= */

.s-fond, .s-bloc, .s-contre, .s-accent {
  background: var(--fond);
  color: var(--encre);
  position: relative;
}

.s-fond   { --fond: var(--g-fond);   --encre: var(--g-encre); }
.s-bloc   { --fond: var(--g-bloc);   --encre: var(--g-encre); }
.s-contre { --fond: var(--g-contre); --encre: var(--g-contre-encre); }
.s-accent { --fond: var(--g-accent); --encre: var(--g-sur-accent); }

.s-fond, .s-bloc, .s-contre, .s-accent {
  --doux: color-mix(in oklab, var(--encre) 66%, var(--fond));
  --doux-fort: color-mix(in oklab, var(--encre) 84%, var(--fond));
  --filet: color-mix(in oklab, var(--encre) 15%, transparent);
  --filet-fort: color-mix(in oklab, var(--encre) 32%, transparent);
  --sur: color-mix(in oklab, var(--encre) 6%, var(--fond));
  --accent: var(--g-accent);
  --sur-accent: var(--g-sur-accent);

  /* L'accent de REMPLISSAGE n'est pas l'accent de TEXTE. Un lime acide écrit
     en 13 px sur du blanc tombe à 1,6 de contraste ; le même tiré vers
     l'encre de la surface passe. `--accent` pour ce qu'on remplit,
     `--accent-lisible` pour ce qu'on écrit ou dessine. */
  /* 48 %, et non les 62 % des deux autres thèmes. Le chiffre n'est pas
     transposable : il a été mesuré sur un violet de clarté moyenne. Les
     accents d'ici sont un lime et un cyan, dont la clarté frôle celle du
     blanc — à 62 % ils tombaient à 3,1 sur la bande claire, mesuré. Ce
     qu'il faut retenir n'est pas le nombre mais la règle : la proportion
     d'accent qu'on peut écrire dépend de la clarté de l'accent. */
  --accent-lisible: color-mix(in oklab, var(--accent) 48%, var(--encre));

  --carte-fond: var(--g-bloc);
  --carte-filet: color-mix(in oklab, var(--encre) 20%, transparent);
}

.s-bloc { --carte-fond: color-mix(in oklab, var(--encre) 6%, var(--fond)); }
.s-contre { --carte-fond: color-mix(in oklab, var(--encre) 8%, var(--fond)); }

/* Sur la bande en couleur, l'accent n'est plus utilisé : le bouton y devient
   l'encre, la pastille y emprunte le couple contre — garanti contrasté par
   l'édition, dans les deux sens. Poser du lime sur du lime ne signale rien. */
.s-accent {
  --accent: var(--encre);
  --sur-accent: var(--fond);
  --doux: color-mix(in oklab, var(--encre) 92%, var(--fond));
  --filet: color-mix(in oklab, var(--encre) 30%, transparent);
  --filet-fort: color-mix(in oklab, var(--encre) 50%, transparent);
  --carte-fond: color-mix(in oklab, var(--fond) 84%, var(--g-encre));
  --carte-filet: color-mix(in oklab, var(--encre) 28%, transparent);
}

/* Le grain sur les bandes pleines. Une bande de couleur pleine largeur, sans
   grain, a l'air d'un aplat d'imprimerie ; avec, elle a une matière. */
.s-contre::after, .s-accent::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: overlay;
}
.s-contre > *, .s-accent > * { position: relative; z-index: 1; }

/* ── Conteneurs ─────────────────────────────────────────────────────── */

.enveloppe { width: min(100% - var(--gouttiere) * 2, var(--largeur)); margin-inline: auto; }
.enveloppe--etroite { width: min(100% - var(--gouttiere) * 2, 66ch); }
.enveloppe--pleine { width: 100%; }

/* `overflow-x: clip` et non `hidden` : `clip` ne crée pas de conteneur de
   défilement, donc il ne casse ni le `position: sticky` d'un titre de
   colonne, ni l'ancre d'un lien interne. Il empêche en revanche qu'une
   photographie débordée volontairement (voir « texte et photo ») fasse
   apparaître une barre horizontale sur toute la page — ce qu'elle faisait
   à toutes les largeurs, mesuré. */
.bande { padding-block: var(--y); position: relative; isolation: isolate; overflow-x: clip; }
.bande--serree { padding-block: calc(var(--y) * 0.5); }
.bande--ras { padding-block: 0; }
.bande--haute { padding-block: calc(var(--y) * 1.4); }

/* ============================================================================
   TYPOGRAPHIE
   ========================================================================= */

/* ── LE TITRE EN CAPITALES CONDENSÉES ─────────────────────────────────
   Interlignage 0,86 : les lignes se touchent presque. C'est ce qui fait le
   BLOC — quatre lignes empilées lisent comme un objet, pas comme une phrase.
   À 1,1 le même titre est une phrase qui va à la ligne, et le thème perd son
   caractère d'un coup.

   L'approche reste à zéro : une condensée en capitales est déjà serrée par
   son dessin, et la resserrer encore colle les lettres.
   ──────────────────────────────────────────────────────────────────── */

.titre {
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 600);
  letter-spacing: var(--titre-espace, 0);
  line-height: 0.94;
  text-transform: var(--titre-casse, uppercase);
  margin: 0;
  text-wrap: balance;
}
.affiche { font-size: var(--t-affiche); line-height: 0.86; }
.titre-1 { font-size: var(--t-1); line-height: 0.9; }
.titre-2 { font-size: var(--t-2); line-height: 1.02; }
.titre-3 { font-size: var(--t-3); line-height: 1.15; letter-spacing: 0.005em; }

/* ── LE MOT ACCENTUÉ ──
   Trois formes. `surligne` est le défaut : un bloc d'accent derrière le mot,
   qui suit les lignes — c'est le marqueur de sport, celui du maillot. */

.titre em, .accent-mot { font-style: normal; }

/* ── LE SURLIGNAGE ET L'INTERLIGNAGE À 0,86 ──
   `background: var(--accent)` peint la BOÎTE EN LIGNE, dont la hauteur
   vient des métriques de la police — environ 1,2 em pour une condensée —
   et non de l'interlignage. À 0,86, chaque bandeau dépassait donc de
   0,3 em au-dessus et en dessous : sur un titre de quatre lignes, les
   bandeaux se recouvraient et mangeaient la ligne précédente. Le premier
   bandeau du thème rendait son titre illisible, et rien dans le code ne le
   disait.

   Le fond est donc une image, pas une couleur : `background-size` la borne
   à la hauteur d'une ligne. La règle tient quelle que soit la police
   choisie par le client, ce qu'un calage en pixels n'aurait pas fait. */
[data-accentuation="surligne"] .titre em {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  /* Mesuré, pas estimé : la boîte en ligne fait 1,47 em, la ligne de base
     est à 1,19 em de son haut, le haut des capitales à 0,47 em. Le bandeau
     va donc de 0,41 à 1,33 em — 0,06 em d'air au-dessus des capitales,
     0,14 em sous la ligne de base. */
  background-size: 100% 0.92em;
  background-position: 0 0.41em;
  color: var(--sur-accent);
  padding-inline: 0.16em;
  margin-inline: -0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-accentuation="couleur"] .titre em { color: var(--accent-lisible); }

/* ── LE MOT AJOURÉ ──
   Le contour est ce qu'on VOIT du mot : c'est donc `--accent-lisible` qu'il
   nomme, jamais `--accent`. La doctrine est écrite plus haut — « `--accent`
   pour ce qu'on remplit, `--accent-lisible` pour ce qu'on écrit ou dessine »
   — et cette règle-ci la violait. Le défaut ne se voyait pas tant qu'aucune
   édition n'employait le contour : posé sur la bande renversée, un indigo
   plein tombait à 2,2 sur 1 contre son fond, mesuré.

   Et le fond ne devient transparent que là où le contour existe, sinon un
   moteur qui ignore `-webkit-text-stroke` effacerait le mot pour de bon —
   même garde-fou que la bande défilante. */
[data-accentuation="creux"] .titre em {
  -webkit-text-stroke: 1.5px var(--accent-lisible);
  paint-order: stroke fill;
}
@supports (-webkit-text-stroke: 1px red) {
  [data-accentuation="creux"] .titre em { color: transparent; }
}

/* ── LE MICRO-LIBELLÉ ── */

.micro {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0;
}
.micro--accent { color: var(--accent-lisible); }

/* Le compteur : `01 / 04`. Le dénominateur est en gris — on lit d'abord où
   l'on en est, pas combien il y a d'étapes. */
.compteur { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.08em; }
.compteur b { font-weight: 600; color: var(--accent-lisible); }
.compteur span { color: var(--doux); }

.oeil {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono); font-size: var(--t-micro);
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--doux); margin: 0;
}
.oeil::before {
  content: ""; width: 1.35rem; height: 2px; flex: none;
  background: var(--accent);
}

.chapo {
  margin: 0;
  font-size: calc(var(--t-base) * 1.08);
  line-height: 1.58;
  color: var(--doux);
  max-width: 54ch;
  text-wrap: pretty;
}

.petit { font-size: var(--t-petit); }
.doux { color: var(--doux); }
.centre { text-align: center; }
.centre .oeil, .centre .actions { justify-content: center; }
.centre .chapo { margin-inline: auto; }

.texte { max-width: 66ch; }
.texte > :first-child { margin-top: 0; }
.texte > :last-child { margin-bottom: 0; }
.texte p { margin: 0 0 1em; }
.texte h2 { font-family: var(--f-titre); font-size: var(--t-2); text-transform: var(--titre-casse, uppercase); margin: 1.8em 0 0.5em; }
.texte h3 { font-family: var(--f-titre); font-size: var(--t-3); margin: 1.5em 0 0.4em; }
.texte a { color: var(--accent-lisible); text-underline-offset: 0.2em; }
.texte ul, .texte ol { margin: 0 0 1em; padding-left: 1.1rem; }
.texte li { margin-bottom: 0.35em; }
.texte blockquote {
  margin: 1.5em 0; padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-size: calc(var(--t-base) * 1.08);
  color: var(--doux-fort);
}

/* ── La tête d'une section ──────────────────────────────────────────── */

.tete { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: var(--y-bloc); }
.tete--centree { align-items: center; text-align: center; }
.tete--duo {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--gout) calc(var(--gout) * 4); align-items: end;
}
.tete--duo > * { display: flex; flex-direction: column; gap: 0.9rem; }
@media (max-width: 860px) { .tete--duo { grid-template-columns: 1fr; align-items: start; } }

/* Le titre d'une tête prend une mesure comptée dans SA police — jamais posée
   sur la colonne qui le contient. `ch` se mesure dans la police de l'élément :
   une largeur mise sur le parent serait comptée en caractères de texte, trois
   fois plus petits, et le titre déborderait mot par mot. */
.tete .affiche { max-width: 20ch; }
.tete--centree .affiche { max-width: 18ch; }
.tete .titre-1 { max-width: 24ch; }

/* ============================================================================
   BOUTONS
   ========================================================================= */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-bouton, var(--r));
  background: var(--encre);
  color: var(--fond);
  font-family: var(--f-texte);
  font-size: var(--t-petit);
  font-weight: 640;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Une seule propriété animée, et c'est la couleur. Aucune ombre qui
     s'allume, aucune translation : c'est ce qui produit le « flash » sous les
     boutons, et aucun site sérieux ne le fait. */
  transition: background-color 0.16s var(--courbe-douce),
              border-color 0.16s var(--courbe-douce),
              color 0.16s var(--courbe-douce);
}
.bouton:hover { background: color-mix(in oklab, var(--encre) 80%, var(--accent)); }
.s-accent .bouton:hover { background: color-mix(in oklab, var(--encre) 86%, var(--fond)); }
.bouton:active { background: color-mix(in oklab, var(--encre) 92%, var(--fond)); }

.bouton--accent { background: var(--accent); color: var(--sur-accent); }
.bouton--accent:hover { background: color-mix(in oklab, var(--accent) 84%, var(--encre)); }

.bouton--nu { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.bouton--nu:hover { background: var(--sur); border-color: var(--encre); }

.bouton--lien {
  padding: 0.2rem 0; background: none; border: 0; border-radius: 0;
  color: var(--accent-lisible); letter-spacing: 0.06em;
}
.bouton--lien:hover { background: none; }
.bouton--lien::after { content: "→"; transition: transform 0.2s var(--courbe); }
.bouton--lien:hover::after { transform: translateX(4px); }

.bouton--large { padding: 1.05rem 2rem; font-size: var(--t-base); }
.bouton--pleine { width: 100%; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* ============================================================================
   LA BARRE DE PROGRESSION — le geste du programme
   ========================================================================= */

/* Sous chaque étape, une barre qui dit où l'on en est dans la série. Ce n'est
   pas une animation mais un DÉGRADÉ : la part remplie est passée en variable
   par la boucle Liquid, et la barre est donc juste sans une ligne de script.

   Elle porte `aria-hidden` : l'information est déjà dans le compteur
   `01 / 04` juste au-dessus, et un lecteur d'écran n'a pas à entendre deux
   fois la même chose. */
.barre {
  height: 3px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--part, 0%),
    var(--filet) var(--part, 0%));
}

/* ── Cartes et cadres ───────────────────────────────────────────────── */

.carte {
  position: relative;
  background: var(--carte-fond);
  border: 1px solid var(--carte-filet);
  border-radius: var(--r);
  padding: clamp(1.15rem, 2vw, 1.75rem);
  transition: border-color 0.2s var(--courbe-douce), background-color 0.2s;
}
a.carte { text-decoration: none; }
a.carte:hover { border-color: var(--accent); }
.carte--nue { background: none; border: 0; padding: 0; }
.carte--contre {
  background: var(--g-contre); color: var(--g-contre-encre);
  border-color: transparent;
  --encre: var(--g-contre-encre); --fond: var(--g-contre);
  --doux: color-mix(in oklab, var(--g-contre-encre) 68%, var(--g-contre));
  --filet: color-mix(in oklab, var(--g-contre-encre) 18%, transparent);
  --filet-fort: color-mix(in oklab, var(--g-contre-encre) 34%, transparent);
  --accent-lisible: color-mix(in oklab, var(--g-accent) 48%, var(--g-contre-encre));
}

/* La grille JOINTIVE : les bandes se touchent, sans gouttière. C'est la
   grammaire — rien n'est en retrait de rien. */
.grille { display: grid; gap: var(--gout); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); }
.grille--2 { --min: 340px; }
.grille--3 { --min: 270px; }
.grille--4 { --min: 200px; }
.grille--jointive { gap: 1px; background: var(--filet); }
.grille--jointive > * { border: 0; border-radius: 0; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gout) * 3); align-items: start; }
.duo--centre { align-items: center; }
.duo--texte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.duo--image { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.duo--inverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .duo, .duo--texte, .duo--image { grid-template-columns: 1fr; gap: calc(var(--gout) * 2); }
  .duo--inverse > :first-child { order: 0; }
}

.pile { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.pile--s { gap: 0.5rem; }
.pile--m { gap: 1.3rem; }
.pile--l { gap: 2rem; }
.pile--centre { align-items: center; text-align: center; }
.rang { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }

/* ── Étiquettes ─────────────────────────────────────────────────────── */

.etiquette {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r);
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.etiquette--accent { background: var(--accent); color: var(--sur-accent); border-color: transparent; }
.etiquette--contre { background: var(--g-contre); color: var(--g-contre-encre); border-color: transparent; }

/* ── Listes ─────────────────────────────────────────────────────────── */

:root {
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.4l3.6 3.6 7.4-8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
  --barre-oblique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
}

.puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.puces li { display: flex; align-items: flex-start; gap: 0.6rem; }
.puces li::before {
  content: ""; width: 1.05rem; height: 1.05rem; margin-top: 0.24em; flex: none;
  background-color: var(--accent-lisible);
  -webkit-mask: var(--coche) center / contain no-repeat;
  mask: var(--coche) center / contain no-repeat;
}
.puces li.non::before {
  background-color: var(--filet-fort);
  -webkit-mask-image: var(--barre-oblique);
  mask-image: var(--barre-oblique);
}
.puces li.non { color: var(--doux); }
.puces--serree { gap: 0.35rem; }

/* ── Médias ─────────────────────────────────────────────────────────── */

/* Le rayon est à ZÉRO sur les médias, pas à 2 px. Une photographie pleine
   largeur avec deux pixels d'arrondi n'a l'air ni pleine ni arrondie : elle a
   l'air mal découpée. Dans cette grammaire, l'image va au bord. */
.media {
  position: relative; overflow: hidden;
  border-radius: 0;
  background: var(--sur);
}
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.media--carre { aspect-ratio: 1; }
.media--paysage { aspect-ratio: 16 / 10; }
.media--large { aspect-ratio: 2 / 1; }
.media--panorama { aspect-ratio: 21 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--haut { aspect-ratio: 4 / 5; }
.media--libre { aspect-ratio: auto; }

[data-zoom="oui"] a.media > img,
[data-zoom="oui"] .media--zoom > img { transition: transform 0.8s var(--courbe); }
[data-zoom="oui"] a.media:hover > img,
[data-zoom="oui"] .media--zoom:hover > img { transform: scale(1.04); }

.media-vide {
  display: block; position: absolute; inset: 0;
  border: 1px dashed var(--filet-fort);
  background-image:
    linear-gradient(45deg, var(--sur) 25%, transparent 25%),
    linear-gradient(-45deg, var(--sur) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--sur) 75%),
    linear-gradient(-45deg, transparent 75%, var(--sur) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* Le texte sur une photo. TOUT le vocabulaire de surface est redéclaré, y
   compris l'accent : une déclaration `color-mix()` dont une variable manque
   est ignorée en silence, et la pastille perdrait son fond sans que rien ne
   le signale. */
.sur-image {
  color: #fff;
  --encre: #fff;
  --fond: #000;
  --doux: color-mix(in oklab, #fff 86%, transparent);
  --filet: color-mix(in oklab, #fff 26%, transparent);
  --filet-fort: color-mix(in oklab, #fff 50%, transparent);
  --sur: color-mix(in oklab, #fff 12%, transparent);
  --carte-fond: color-mix(in oklab, #fff 14%, transparent);
  --carte-filet: color-mix(in oklab, #fff 28%, transparent);
  --accent: var(--g-accent);
  --accent-lisible: #fff;
  --sur-accent: var(--g-sur-accent);
}

/* ── LA BANDE DÉFILANTE ─────────────────────────────────────────────── */

/* La piste est écrite DEUX FOIS dans le HTML : c'est ce qui permet à la
   boucle de se refermer sans saut, la seconde copie occupant l'écran au
   moment où la première en sort. Il n'y a pas d'autre façon de le faire sans
   script. La copie porte `aria-hidden` — un lecteur d'écran n'a aucune raison
   d'entendre la même liste deux fois. */
.ruban { display: flex; overflow: hidden; }
.ruban-piste {
  display: flex; align-items: center;
  gap: var(--ruban-gout, 2.5rem);
  padding-right: var(--ruban-gout, 2.5rem);
  flex: none; min-width: max-content;
  animation: ruban var(--ruban-duree, 32s) linear infinite;
}
.ruban:hover .ruban-piste { animation-play-state: paused; }
@keyframes ruban { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ruban-piste { animation: none; }
  .ruban { overflow-x: auto; }
}

.defile-mot {
  display: inline-flex; align-items: center; gap: var(--ruban-gout, 2.5rem);
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 600);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ── LE MOT AJOURÉ, ET LE PIÈGE DE `currentColor` ──
   Ce bloc s'écrivait `color: transparent; -webkit-text-stroke: 1.5px
   currentColor` — et il ne dessinait RIEN. `currentColor` se résout sur la
   valeur calculée de `color` du même élément : transparente. Le contour
   était donc transparent lui aussi, et un mot sur deux de la bande
   disparaissait sans que rien ne le signale. L'audit de contraste l'a
   accusé à 1 sur 3 sur les quatre éditions ; je l'ai d'abord pris pour un
   angle mort de l'outil. Il avait raison.

   Le contour nomme donc l'encre de la surface, explicitement. Et le fond
   ne devient transparent que là où le contour existe : sans ce garde-fou,
   un moteur qui ignore `-webkit-text-stroke` effacerait le mot pour de
   bon. */
.defile-mot--creux { -webkit-text-stroke: 1.5px var(--encre); }
@supports (-webkit-text-stroke: 1px red) {
  .defile-mot--creux { color: transparent; }
}
.defile-signe { width: 0.5em; height: 0.5em; flex: none; background: currentColor; }

/* ── Le rail ────────────────────────────────────────────────────────── */

.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: var(--rail-l, min(84%, 24rem));
  gap: var(--gout);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gouttiere) * -1);
  padding: 0 var(--gouttiere) 0.5rem;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 1000px) {
  .rail--grille-3, .rail--grille-4 { grid-auto-flow: row; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rail--grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail--grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Dépliants ──────────────────────────────────────────────────────── */

.depliant { border-bottom: 1px solid var(--filet); }
.depliant:first-of-type { border-top: 1px solid var(--filet); }
.depliant-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.2rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--f-titre);
  font-size: var(--t-3);
  text-transform: var(--titre-casse, uppercase);
  letter-spacing: 0.01em;
  transition: color 0.18s;
}
.depliant-tete::-webkit-details-marker { display: none; }
.depliant-tete:hover { color: var(--accent-lisible); }
.depliant-signe { position: relative; width: 1.1rem; height: 1.1rem; flex: none; transition: transform 0.3s var(--courbe); }
.depliant-signe::before, .depliant-signe::after {
  content: ""; position: absolute; inset: 50% 0;
  border-top: 2px solid currentColor; transform: translateY(-50%);
}
.depliant-signe::after { transform: translateY(-50%) rotate(90deg); transition: opacity 0.25s; }
.depliant[open] .depliant-signe { transform: rotate(180deg); color: var(--accent-lisible); }
.depliant[open] .depliant-signe::after { opacity: 0; }
.depliant-corps { padding: 0 0 1.3rem; max-width: 72ch; color: var(--doux); }

@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .depliant::details-content {
      block-size: 0; overflow: clip;
      transition: block-size 0.3s var(--courbe), content-visibility 0.3s allow-discrete;
    }
    .depliant[open]::details-content { block-size: auto; }
  }
}

/* ── Formulaires ────────────────────────────────────────────────────── */

.champ { display: grid; gap: 0.35rem; }
.champ > span {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux);
}
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 0.78rem 0.9rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--encre) 4%, var(--fond));
  font-size: var(--t-base);
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.champ textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 0.65rem;
  padding-right: 2.3rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}
.champ input::placeholder, .champ textarea::placeholder { color: color-mix(in oklab, var(--encre) 44%, var(--fond)); }

/* ── L'apparition ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-apparition] .monte {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    [data-apparition="fondu"] .monte { animation-name: fondu; }
    [data-apparition="balaye"] .monte { animation-name: balaye; }
    [data-apparition] .monte[style*="--rang"] {
      animation-range: entry calc(0% + var(--rang, 0) * 3%) cover calc(24% + var(--rang, 0) * 3%);
    }
  }
}
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
/* Le balayage : l'élément se dévoile depuis la gauche. Sur un thème de sport,
   il dit le mouvement mieux qu'un fondu. */
@keyframes balaye { from { opacity: 0; clip-path: inset(0 28% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ── Utilitaires ────────────────────────────────────────────────────── */

.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.filet { border: 0; border-top: 1px solid var(--filet); margin: 0; }
.mt-s { margin-top: 0.5rem; }
.mt-m { margin-top: 1.3rem; }
.mt-l { margin-top: var(--y-bloc); }

/* ── LE CHRONOMÈTRE ─────────────────────────────────────────────────── */

/* Le chiffre d'un résultat. En condensée, très grand, avec son unité collée
   en petit : c'est l'affichage d'un chronomètre, et c'est ce qui distingue un
   chiffre de sport d'un chiffre d'entreprise. */
.chrono {
  display: flex; align-items: baseline; gap: 0.1em;
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 600);
  font-size: clamp(2.8rem, 6vw, 4.75rem);
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
}
.chrono-unite { font-size: 0.36em; letter-spacing: 0.06em; color: var(--doux); }

.pictogramme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem;
  border: 2px solid var(--filet-fort);
  border-radius: var(--r);
  color: var(--accent-lisible);
  flex: none;
}
.pictogramme svg { width: 1.15rem; height: 1.15rem; }
.pictogramme--plein { background: var(--accent); color: var(--sur-accent); border-color: transparent; }

.etoiles {
  display: inline-block; width: 5.8em; height: 1em; vertical-align: -0.12em;
  background: linear-gradient(90deg,
    var(--accent-lisible) 0 calc(var(--note, 5) / 5 * 100%),
    color-mix(in oklab, var(--encre) 20%, transparent) calc(var(--note, 5) / 5 * 100%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M10 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L10 15l-5.3 2.8 1.1-6.1L1.4 7.4l6-.8z' fill='%23000'/%3E%3Cpath d='M30 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L30 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3Cpath d='M50 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L50 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3Cpath d='M70 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L70 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3Cpath d='M90 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L90 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3C/svg%3E") left center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M10 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L10 15l-5.3 2.8 1.1-6.1L1.4 7.4l6-.8z' fill='%23000'/%3E%3Cpath d='M30 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L30 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3Cpath d='M50 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L50 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3Cpath d='M70 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L70 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3Cpath d='M90 1l2.6 5.6 6 .8-4.4 4.3 1.1 6.1L90 15l-5.3 2.8 1.1-6.1-4.4-4.3 6-.8z' fill='%23000'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* ============================================================================
   LES SEPT ÉDITIONS — le registre, jamais l'identité
   ============================================================================

   Un métier, une édition. Les couleurs, les polices, la densité et le rayon
   voyagent déjà par `config/theme.json` et n'ont rien à faire ici : ce
   fichier ne porte QUE ce qu'aucun réglage ne peut dire — la forme du
   bouton, l'en-tête qui flotte au lieu de barrer, l'épaisseur des filets,
   l'interlignage qu'un bas-de-casse à empattements ne supporte pas.

   ## La ligne à ne pas franchir

   Une édition change le REGISTRE, pas la grammaire. La bande pleine largeur,
   le compteur `01 / 04`, la barre de progression, le chronomètre et la
   photographie qui va d'un bord à l'autre restent dans les sept. Le Cabinet
   est un Cadence qui parle bas, pas un autre thème.

   ## Pourquoi l'interlignage se redresse presque partout

   Le socle empile ses titres à 0,86 — quatre lignes de capitales condensées
   qui lisent comme un objet. Ce chiffre est calculé sur une CAPITALE : elle
   n'a pas de jambage. Le même 0,86 sur du bas-de-casse à empattements fait
   monter le « p » de la ligne suivante dans le « g » de la précédente. Les
   quatre éditions en casse normale redressent donc leur interligne, et c'est
   la seule chose qu'elles ont le droit de reprendre au socle.
   ========================================================================= */

/* ── CHANTIER — bâtiment ──────────────────────────────────────────────
   L'angle à zéro et le filet doublé. Tout ce qui sépare deux choses est
   deux fois plus épais qu'ailleurs : c'est le trait de crayon de menuisier,
   et c'est ce qui se voit sur une vignette de 300 px, avant même la
   couleur. */

[data-edition="chantier"] { --r-bouton: 0; }

[data-edition="chantier"] .s-fond,
[data-edition="chantier"] .s-bloc,
[data-edition="chantier"] .s-contre,
[data-edition="chantier"] .s-accent {
  --filet: color-mix(in oklab, var(--encre) 30%, transparent);
  --filet-fort: color-mix(in oklab, var(--encre) 58%, transparent);
}
[data-edition="chantier"] .carte { border-width: 2px; }
[data-edition="chantier"] .filet { border-top-width: 2px; }
[data-edition="chantier"] .depliant { border-bottom-width: 2px; }
[data-edition="chantier"] .depliant:first-of-type { border-top-width: 2px; }
[data-edition="chantier"] .entete { border-bottom-width: 2px; }
[data-edition="chantier"] .barre { height: 5px; }
[data-edition="chantier"] .oeil::before { width: 2.2rem; height: 4px; }
[data-edition="chantier"] .etiquette { border-width: 2px; }

/* ── ÉTABLI — artisan ─────────────────────────────────────────────────
   L'empattement en bas de casse, et le filet d'un cheveu. L'inverse exact
   du Chantier, à deux teintes de terre près : c'est voulu, ce sont les deux
   métiers du bois et il faut qu'on les distingue de loin. */

[data-edition="etabli"] { --f-mono: var(--f-texte); }
[data-edition="etabli"] .affiche { line-height: 1; }
[data-edition="etabli"] .titre-1 { line-height: 1.06; }
[data-edition="etabli"] .titre-2 { line-height: 1.14; }
[data-edition="etabli"] .micro,
[data-edition="etabli"] .oeil { letter-spacing: 0.16em; }
[data-edition="etabli"] .oeil::before { width: 2.6rem; height: 1px; }
[data-edition="etabli"] .s-fond,
[data-edition="etabli"] .s-bloc,
[data-edition="etabli"] .s-contre {
  --filet: color-mix(in oklab, var(--encre) 11%, transparent);
}
[data-edition="etabli"] .barre { height: 2px; }

/* ── SALON — beauté ───────────────────────────────────────────────────
   La pilule, partout où il y a un bord : bouton, étiquette, pictogramme,
   en-tête. Vingt pixels de rayon sur les cartes, et l'en-tête qui ne barre
   plus mais flotte. C'est l'édition la plus éloignée du Ring, et c'est
   exactement ce qu'on veut démontrer. */

[data-edition="salon"] { --f-mono: var(--f-texte); --r-bouton: 999px; }
[data-edition="salon"] .affiche { line-height: 1.02; }
[data-edition="salon"] .titre-1 { line-height: 1.08; }
[data-edition="salon"] .titre-2 { line-height: 1.16; }
[data-edition="salon"] .micro,
[data-edition="salon"] .oeil { letter-spacing: 0.18em; }
[data-edition="salon"] .oeil::before { width: 2.6rem; height: 1px; }
[data-edition="salon"] .etiquette,
[data-edition="salon"] .pictogramme { border-radius: 999px; }
[data-edition="salon"] .barre { height: 2px; border-radius: 999px; }

/* ── CABINET — santé ──────────────────────────────────────────────────
   Rien ne bouge, rien ne brille, rien ne crie. Le grain des bandes pleines
   est éteint, le zoom des images l'est par réglage, et le filet sous
   l'en-tête est le seul trait un peu appuyé de la page. Un métier
   réglementé n'a pas le droit au superlatif ; sa mise en page non plus. */

[data-edition="cabinet"] .affiche { line-height: 1.05; }
[data-edition="cabinet"] .titre-1 { line-height: 1.1; }
[data-edition="cabinet"] .titre-2 { line-height: 1.2; }
[data-edition="cabinet"] .entete { border-bottom-color: var(--filet-fort); }
[data-edition="cabinet"] .s-contre::after,
[data-edition="cabinet"] .s-accent::after { display: none; }
[data-edition="cabinet"] .oeil::before { width: 1.8rem; height: 2px; }
[data-edition="cabinet"] .barre { height: 2px; }

/* ── TABLE — restauration ─────────────────────────────────────────────
   La densité d'une carte : texte plus gros par réglage, interlignes plus
   larges ici, et un œil-de-chat très espacé qui fait l'intitulé de menu. */

[data-edition="table"] { --f-mono: var(--f-texte); }
[data-edition="table"] .affiche { line-height: 1; }
[data-edition="table"] .titre-1 { line-height: 1.06; }
[data-edition="table"] .titre-2 { line-height: 1.16; }
[data-edition="table"] .micro,
[data-edition="table"] .oeil { letter-spacing: 0.2em; }
[data-edition="table"] .oeil::before { width: 3rem; height: 1px; }
[data-edition="table"] .chapo { font-size: calc(var(--t-base) * 1.14); line-height: 1.66; }
[data-edition="table"] .barre { height: 2px; }

/* ── STUDIO — image ───────────────────────────────────────────────────
   Tranché : la nuit la plus profonde du thème, un indigo froid, et des
   capitales petites et très espacées — l'inverse du bloc de capitales
   serrées du Ring, avec la même police de titre en majuscules. La pilule
   comme au Salon, mais sur fond noir : les deux ne se confondent pas. */

[data-edition="studio"] { --r-bouton: 999px; }
[data-edition="studio"] .affiche { line-height: 1.12; }
[data-edition="studio"] .titre-1 { line-height: 1.18; }
[data-edition="studio"] .titre-2 { line-height: 1.3; }
[data-edition="studio"] .micro,
[data-edition="studio"] .oeil { letter-spacing: 0.22em; }
[data-edition="studio"] .oeil::before { width: 3rem; height: 1px; }
[data-edition="studio"] .etiquette,
[data-edition="studio"] .pictogramme { border-radius: 999px; }
[data-edition="studio"] .barre { height: 1px; }

/* ── CE QUI NE SUIT PAS LE RAYON : L'IMAGE ────────────────────────────
   Tenté, mesuré, retiré. Faire suivre `--r` aux médias dans les éditions à
   grand rayon paraissait cohérent : une vignette à angle vif dans une carte
   à vingt pixels a l'air d'une pièce mal ajustée.

   Sauf qu'une vignette de prestation est POSÉE EN HAUT de sa carte, contre
   son bord. Un rayon uniforme lui arrondit alors les quatre coins, dont les
   deux du BAS — qui sont au milieu de la carte, contre le texte. On voit une
   photo qui se rétracte au centre d'un bloc plein : bien pire que l'angle
   vif qu'on voulait corriger, et visible sur les captures du Salon et du
   Studio avant qu'on ne l'enlève.

   Le socle a donc raison, et sa règle vaut pour les sept : dans cette
   grammaire, la photographie va au bord. C'est même ce qui garde les sept
   éditions dans la même famille. */

/* ── L'EN-TÊTE QUI FLOTTE ─────────────────────────────────────────────
   Cinq éditions sur sept gardent la barre pleine largeur du socle : c'est
   la grammaire, et une barre bord à bord est ce qui va au chantier, à
   l'atelier, au cabinet, au gymnase et à la salle à manger.

   Deux en sortent — le Salon et le Studio — parce que leur registre est
   celui de l'air : la barre y devient une pilule posée sur la page, qui
   laisse le contenu passer dessous. Le fond de la BARRE devient
   transparent et c'est la BOÎTE intérieure qui prend la couleur : ainsi le
   `sticky` continue de porter sur l'élément qui a la pleine largeur, et
   `--fond` reste celui que la classe de surface a posé sur l'en-tête. */

[data-edition="salon"] .entete,
[data-edition="studio"] .entete {
  background: transparent;
  border-bottom: 0;
  padding-block: 0.7rem;
}
[data-edition="salon"] .entete--collante,
[data-edition="studio"] .entete--collante { top: 0.7rem; }
[data-edition="salon"] .entete-boite,
[data-edition="studio"] .entete-boite {
  background: var(--fond);
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  padding-inline: clamp(1rem, 2.4vw, 2rem);
  box-shadow: var(--ombre);
}
[data-edition="salon"] .entete-rang,
[data-edition="studio"] .entete-rang { min-height: 3.9rem; }
/* Le hamburger est ancré sur la boîte, qui vient de gagner un rembourrage
   intérieur : sans ce rappel il se collerait au bord arrondi de la pilule. */
[data-edition="salon"] .entete-plie > summary,
[data-edition="studio"] .entete-plie > summary {
  right: clamp(1rem, 2.4vw, 2rem);
  border-radius: 999px;
}
[data-edition="salon"] .entete-panneau,
[data-edition="studio"] .entete-panneau { padding-inline: 0.2rem 0; }