/* ============================================================================
   ÉPURE — le socle.
   ============================================================================

   Une épure, en dessin technique, est le tracé exact d'un ouvrage : les lignes
   de construction restent visibles. C'est le programme de ce thème.

   ## LA GRAMMAIRE : LA RÈGLE ET LE FILET

   Là où SCÈNE pose des dalles très arrondies sur un canevas, ÉPURE fait le
   contraire : la page occupe toute la largeur, et ce qui la structure est un
   TRACÉ — deux traits verticaux aux bords du conteneur, courant du haut en bas
   du site, des filets pointillés autour des blocs, des graduations dans les
   marges.

       │                                                    │
       │  01 · OÙ NOUS EN SOMMES                            │
       │                                                    │
       │  ┌ ─ ─ ─ ─ ─ ─ ─ ┐   ┌ ─ ─ ─ ─ ─ ─ ─ ┐            │
       │  ╷               ╷   ╷               ╷            │
       │  └ ─ ─ ─ ─ ─ ─ ─ ┘   └ ─ ─ ─ ─ ─ ─ ─ ┘            │
       │                                                    │

   C'est la grammaire d'Antimetal, de Cartesia, de Spade et de Rulebase — les
   quatre sites les plus soignés du relevé. Elle dit le laboratoire, l'atelier,
   le cabinet : quelque chose de mesuré. Une pilule flottante n'a rien à faire
   là-dedans.

   ## LES TROIS GESTES

   1. LE RAYON EST DE 4 PIXELS. Pas zéro — un angle parfaitement vif fait
      brutal à l'écran — mais quatre. Le rayon est un marqueur de famille :
      999 px ou 4 px, jamais entre. Douze pixels d'arrondi, c'est le gabarit
      de 2016.

   2. LES CADRES SONT POINTILLÉS, À COINS D'ÉQUERRE. Un filet continu dit le
      tableau ; un filet pointillé dont les quatre coins sont marqués d'une
      équerre pleine dit le plan. C'est le geste d'Antimetal, et il ne coûte
      que deux dégradés.

   3. TOUT EST ÉTIQUETÉ EN MONOSPACE CAPITALES. `01 · CE QU'ON FAIT`,
      `DÉLAI`, `PROACTIF`. Relevé sur cinq des dix-neuf sites de référence,
      dont les trois plus aboutis — 295 occurrences sur readme.com. C'est le
      détail qui dit « fait par un studio », et il ne coûte qu'une pile de
      police système.

   ## LA TYPOGRAPHIE : SERIF EN TITRE

   Antimetal, Cartesia, Readme et Melius emploient tous une serif de titre
   avec une grotesque de texte. C'est ce qui les distingue le plus nettement
   des thèmes de gabarit, qui mettent la même grotesque partout.

   New York sur Apple, Georgia sur Windows. Ce n'est pas Signifier, mais à
   5 rem avec l'approche resserrée, l'écart se voit beaucoup moins qu'on ne
   le craint — et une police téléchargée coûterait un aller-retour réseau
   avant le premier texte lisible.

   ## LES QUATRE SURFACES

   Comme dans SCÈNE, et pour la même raison : une section choisit une SURFACE,
   pas trois couleurs. Elle ne peut donc pas fabriquer un mariage qui ne va
   pas — elle n'a pas la main dessus.

       .s-papier    le fond de page
       .s-carte     le blanc des blocs
       .s-profond   le bloc contrasté
       .s-accent    le bloc en couleur

   Sept couleurs réglables. Tout le reste — gris de texte, filets, fonds de
   carte, accent lisible — se calcule en `color-mix()` depuis le couple
   fond/encre de la surface.

   ## 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 rubans par une animation CSS, les carrousels par
   `scroll-snap`.
   ========================================================================= */

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

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

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

body {
  margin: 0;
  background: var(--g-papier);
  color: var(--g-encre);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.62;
  -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;
  border-radius: 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-papier);
  text-decoration: none;
}
.saut:focus { left: 0; }

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

:root {
  /* Trois familles, trois rôles. C'est l'appariement relevé chez Antimetal,
     Cartesia, Readme et Melius : serif en titre, grotesque en texte,
     monospace en libellé. */
  --f-serif: "New York", ui-serif, Georgia, "Iowan Old Style",
             "Times New Roman", 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. 17 px de texte courant et non 16 : douze des dix-neuf sites
     relevés sont à 17. Seize est le défaut du navigateur, pas une décision. */
  --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(2.5rem, 6vw, 5rem) * var(--k-titre, 1));
  --t-1: calc(clamp(1.9rem, 3.8vw, 3rem) * var(--k-titre, 1));
  --t-2: calc(clamp(1.4rem, 2.2vw, 1.9rem) * var(--k-titre, 1));
  --t-3: calc(clamp(1.15rem, 1.5vw, 1.35rem) * var(--k-titre, 1));

  --y: calc(clamp(3.75rem, 6.5vw, 7rem) * var(--k-densite, 1));
  --y-bloc: calc(clamp(1.75rem, 3vw, 2.75rem) * var(--k-densite, 1));
  --gout: calc(clamp(0.75rem, 1.3vw, 1.25rem) * 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 RARES ici. Cette grammaire structure par le trait, pas
     par le relief : une carte cerclée d'un pointillé n'a pas besoin de
     flotter. Elles ne servent qu'aux objets vraiment détachés — une vignette
     posée sur une image, un panneau de menu. */
  --ombre-1: 0 1px 2px rgb(20 16 14 / 0.05);
  --ombre-2: 0 8px 24px -10px rgb(20 16 14 / 0.18);
  --ombre-3: 0 24px 60px -22px rgb(20 16 14 / 0.28);

  --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, 4vw, 3.25rem);
}

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

.s-papier, .s-carte, .s-profond, .s-accent {
  background: var(--fond);
  color: var(--encre);
  position: relative;
}

.s-papier  { --fond: var(--g-papier);  --encre: var(--g-encre); }
.s-carte   { --fond: var(--g-carte);   --encre: var(--g-encre); }
.s-profond { --fond: var(--g-profond); --encre: var(--g-profond-encre); }
.s-accent  { --fond: var(--g-accent);  --encre: var(--g-sur-accent); }

.s-papier, .s-carte, .s-profond, .s-accent {
  --doux: color-mix(in oklab, var(--encre) 64%, var(--fond));
  --doux-fort: color-mix(in oklab, var(--encre) 82%, var(--fond));
  --filet: color-mix(in oklab, var(--encre) 14%, transparent);
  --filet-fort: color-mix(in oklab, var(--encre) 30%, transparent);
  --sur: color-mix(in oklab, var(--encre) 5%, var(--fond));
  --accent: var(--g-accent);
  --sur-accent: var(--g-sur-accent);

  /* L'accent de REMPLISSAGE n'est pas l'accent de TEXTE. Un accent choisi
     pour couvrir un bandeau tombe sous 4,5 de contraste écrit en 13 px —
     mesuré, pas supposé. Celui-ci est tiré vers l'encre de la surface :
     il fonce sur fond clair, il éclaircit sur fond sombre. */
  --accent-lisible: color-mix(in oklab, var(--accent) 62%, var(--encre));

  /* Le fond d'une carte : le blanc des blocs, pas « un peu d'encre sur le
     papier ». Dans une édition claire, mélanger de l'encre au papier
     ASSOMBRIT la carte, qui se creuse au lieu de se détacher. */
  --carte-fond: var(--g-carte);
  --carte-filet: color-mix(in oklab, var(--encre) 22%, transparent);
}

.s-carte { --carte-fond: var(--fond); }

/* Sur la surface accent, l'accent n'est plus utilisé : le bouton y devient
   l'encre, la pastille y emprunte le couple profond — garanti contrasté par
   l'édition, dans les deux sens. Poser de l'orange sur de l'orange ne fait
   pas un point d'attention, ça fait une tache. */
.s-accent {
  --accent: var(--encre);
  --sur-accent: var(--fond);
  --doux: color-mix(in oklab, var(--encre) 94%, var(--fond));
  --filet: color-mix(in oklab, var(--encre) 28%, transparent);
  --filet-fort: color-mix(in oklab, var(--encre) 48%, transparent);
  --carte-fond: color-mix(in oklab, var(--fond) 84%, var(--g-encre));
  --carte-filet: color-mix(in oklab, var(--encre) 26%, transparent);
}

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

/* Le grain sur les grandes surfaces pleines : ce qui empêche un aplat de
   paraître plat. Aucune requête réseau. */
.s-profond::after, .s-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.s-profond > *, .s-accent > * { position: relative; z-index: 1; }

/* ============================================================================
   LA RÈGLE — les deux traits verticaux
   ========================================================================= */

/* Ils courent du haut en bas de la fenêtre, aux bords du conteneur, et ne
   bougent pas au défilement. C'est la ligne de construction laissée visible :
   tout le reste s'y accroche.

   `position: fixed` et non `absolute` : les traits doivent traverser TOUTES
   les sections, y compris celles qui ont leur propre fond. Posés en absolu
   sur le corps, ils s'arrêteraient au premier bloc opaque. */
[data-regle="oui"] body::before,
[data-regle="oui"] body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 40;
  pointer-events: none;
  background: color-mix(in oklab, var(--g-encre) 11%, transparent);
}
[data-regle="oui"] body::before { left: var(--bord); }
[data-regle="oui"] body::after { right: var(--bord); }

:root {
  --bord: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2));
}

@media (max-width: 800px) {
  [data-regle="oui"] body::before,
  [data-regle="oui"] body::after { display: none; }
}

/* Les graduations — un peigne dans la marge. Une section les demande par
   `.gradue`. Elles disent « c'est mesuré » et rien d'autre, ce qui est
   exactement leur rôle. */
.gradue::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--filet) 0 1px,
    transparent 1px 14px);
}

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

.enveloppe {
  width: min(100% - var(--gouttiere) * 2, var(--largeur));
  margin-inline: auto;
}
.enveloppe--etroite { width: min(100% - var(--gouttiere) * 2, 68ch); }
.enveloppe--large { width: min(100% - var(--gouttiere), calc(var(--largeur) + 220px)); }

.section { padding-block: var(--y); position: relative; isolation: isolate; }
.section--serre { padding-block: calc(var(--y) * 0.55); }
.section--ras { padding-block: 0; }

/* La séparation entre deux sections de même surface se fait par un FILET,
   pas par du vide : c'est la grammaire du tracé. Deux sections de surfaces
   différentes, elles, n'en ont pas besoin. */
.section--filet { border-top: 1px solid var(--filet); }

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

.titre {
  font-family: var(--f-titre);
  font-weight: var(--titre-graisse, 440);
  letter-spacing: var(--titre-espace, -0.018em);
  line-height: 1.1;
  text-transform: var(--titre-casse, none);
  text-wrap: balance;
  margin: 0;
}
.affiche { font-size: var(--t-affiche); line-height: 1.02; letter-spacing: -0.026em; }
.titre-1 { font-size: var(--t-1); line-height: 1.06; letter-spacing: -0.022em; }
.titre-2 { font-size: var(--t-2); line-height: 1.16; }
.titre-3 { font-size: var(--t-3); line-height: 1.28; letter-spacing: -0.012em; }

/* ── LE MICRO-LIBELLÉ ─────────────────────────────────────────────────
   Le geste le plus caractérisé du thème. Monospace, capitales, approche
   ouverte. Trois mots au maximum : des capitales espacées sur douze mots ne
   se lisent pas.
   ──────────────────────────────────────────────────────────────────── */

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

/* Le libellé numéroté : `01 · OÙ NOUS EN SOMMES`. Le numéro est séparé du
   texte par un point médian et une paire d'espaces — pas par un tiret, qui
   se lirait comme une plage. */
.oeil {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0;
}
.oeil-num { color: var(--encre); }
.oeil-trait { flex: 1; height: 1px; background: var(--accent); max-width: 4rem; opacity: 0.55; }

/* ── LE MOT ACCENTUÉ ──────────────────────────────────────────────────
   Trois habillages, réglés une fois pour tout le site. `equerres` est le
   défaut ici : elle montre sans repeindre, et elle appartient au vocabulaire
   du tracé.
   ──────────────────────────────────────────────────────────────────── */

.titre em, .accent-mot { font-style: normal; position: relative; display: inline-block; }

[data-accentuation="italique"] .titre em {
  font-style: italic;
  color: var(--accent-lisible);
}

[data-accentuation="equerres"] .titre em {
  padding: 0.02em 0.28em;
  margin-inline: 0.05em;
}
[data-accentuation="equerres"] .titre em::before,
[data-accentuation="equerres"] .titre em::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 0.34em;
  border: 0.045em solid var(--accent-lisible);
  pointer-events: none;
}
[data-accentuation="equerres"] .titre em::before { left: 0; border-right: 0; }
[data-accentuation="equerres"] .titre em::after { right: 0; border-left: 0; }

[data-accentuation="souligne"] .titre em {
  color: var(--accent-lisible);
  box-shadow: inset 0 -0.08em 0 color-mix(in oklab, var(--accent) 40%, transparent);
}

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

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

/* Le texte long. La lettrine est optionnelle — c'est le geste de la colonne
   éditoriale d'Antimetal, et elle ne va qu'à un texte d'au moins six lignes. */
.texte { max-width: 68ch; }
.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); margin: 1.9em 0 0.5em; letter-spacing: -0.018em; }
.texte h3 { font-family: var(--f-titre); font-size: var(--t-3); margin: 1.6em 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.15rem; }
.texte li { margin-bottom: 0.35em; }
.texte blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.2rem;
  border-left: 2px solid var(--accent);
  font-family: var(--f-titre);
  font-size: calc(var(--t-base) * 1.12);
  color: var(--doux-fort);
}
.texte--lettrine > p:first-of-type::first-letter {
  float: left;
  font-family: var(--f-titre);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent-lisible);
}

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

.tete { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: var(--y-bloc); max-width: 58ch; }
.tete--centree { align-items: center; text-align: center; margin-inline: auto; }
.tete--large { max-width: none; }
.tete--duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gout) calc(var(--gout) * 3);
  align-items: start;
  max-width: none;
}
.tete--duo > * { display: flex; flex-direction: column; gap: 0.85rem; }
@media (max-width: 860px) { .tete--duo { grid-template-columns: 1fr; } }

/* ============================================================================
   BOUTONS — rectangulaires, à peine adoucis
   ========================================================================= */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--encre);
  color: var(--fond);
  font-family: var(--f-texte);
  font-size: var(--t-petit);
  font-weight: 560;
  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.18s var(--courbe-douce),
              border-color 0.18s var(--courbe-douce),
              color 0.18s var(--courbe-douce);
}
.bouton:hover { background: color-mix(in oklab, var(--encre) 82%, 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) 86%, var(--encre)); }

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

/* Le bouton POINTILLÉ — le geste d'Antimetal pour l'action secondaire. Il
   appartient au vocabulaire du tracé : un cadre de construction, pas un
   bouton plein. */
.bouton--pointille {
  background: transparent;
  color: var(--encre);
  border: 1px dashed var(--filet-fort);
  border-radius: 0;
}
.bouton--pointille:hover { border-color: var(--encre); background: var(--sur); }

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

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

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
.actions--centrees { justify-content: center; }

/* ============================================================================
   LES CADRES POINTILLÉS À COINS D'ÉQUERRE
   ========================================================================= */

/* Le geste signature. Un filet pointillé sur les quatre côtés, et quatre
   équerres pleines aux coins. Le pointillé dit la ligne de construction ;
   l'équerre dit que le coin est TENU — sans elle, le cadre paraît inachevé.

   Deux pseudo-éléments suffisent : chacun dessine deux coins opposés, en
   `border` sur ses deux côtés utiles. */
.cadre {
  position: relative;
  padding: clamp(1.15rem, 2vw, 1.75rem);
  border: 1px dashed var(--carte-filet);
}
.cadre::before,
.cadre::after {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  pointer-events: none;
}
.cadre::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--filet-fort);
  border-left: 1px solid var(--filet-fort);
  box-shadow: none;
}
.cadre::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--filet-fort);
  border-right: 1px solid var(--filet-fort);
}
/* Les deux autres coins, quand on les veut tous les quatre. */
.cadre--quatre { background-image:
  linear-gradient(to right, var(--filet-fort) 0 0.6rem, transparent 0.6rem),
  linear-gradient(to bottom, var(--filet-fort) 0 0.6rem, transparent 0.6rem),
  linear-gradient(to left, var(--filet-fort) 0 0.6rem, transparent 0.6rem),
  linear-gradient(to top, var(--filet-fort) 0 0.6rem, transparent 0.6rem);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: right top, right top, left bottom, left bottom;
  background-repeat: no-repeat;
}

a.cadre { text-decoration: none; transition: border-color 0.22s; }
a.cadre:hover { border-color: var(--filet-fort); }
a.cadre:hover::before, a.cadre:hover::after { border-color: var(--accent); }

/* ── La carte pleine ────────────────────────────────────────────────── */

.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.22s var(--courbe-douce), transform 0.24s var(--courbe);
}
a.carte { text-decoration: none; }
a.carte:hover { border-color: var(--filet-fort); transform: translateY(-2px); }
.carte--nue { background: none; border: 0; padding: 0; }
.carte--relief {
  background: var(--g-profond);
  color: var(--g-profond-encre);
  border-color: transparent;
  --encre: var(--g-profond-encre);
  --fond: var(--g-profond);
  --doux: color-mix(in oklab, var(--g-profond-encre) 66%, var(--g-profond));
  --filet: color-mix(in oklab, var(--g-profond-encre) 18%, transparent);
  --filet-fort: color-mix(in oklab, var(--g-profond-encre) 34%, transparent);
  --accent-lisible: color-mix(in oklab, var(--g-accent) 62%, var(--g-profond-encre));
}

/* ── Grilles ────────────────────────────────────────────────────────── */

.grille { display: grid; gap: var(--gout); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 270px)), 1fr)); }
.grille--2 { --min: 360px; }
.grille--3 { --min: 280px; }
.grille--4 { --min: 210px; }

/* La grille JOINTIVE : les cadres partagent leurs filets, comme un tableau
   de plan. C'est ce que fait Antimetal pour sa liste d'agents. */
.grille--jointive { gap: 0; }
.grille--jointive > .cadre { margin: 0 -1px -1px 0; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gout) * 2.4); align-items: start; }
.duo--centre { align-items: center; }
.duo--texte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.duo--image { grid-template-columns: minmax(0, 1.2fr) 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) * 1.6); }
  .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.35rem; }
.pile--l { gap: 2rem; }
.rang { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }

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

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiquette--pleine { background: var(--g-profond); color: var(--g-profond-encre); border-color: transparent; }
.etiquette--accent { background: var(--accent); color: var(--sur-accent); border-color: transparent; }
.etiquette-point {
  width: 0.4rem; height: 0.4rem; border-radius: 999px;
  background: currentColor; flex: none;
}

/* ── 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.2' stroke-linecap='round' stroke-linejoin='round'/%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.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.puces li { display: flex; align-items: flex-start; gap: 0.65rem; }
.puces li::before {
  content: "";
  width: 1.05rem; height: 1.05rem;
  margin-top: 0.22em;
  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.4rem; }

/* Les listes NUMÉROTÉES en monospace — la forme la plus juste ici. */
.puces--num { counter-reset: p; }
.puces--num li::before {
  content: counter(p, decimal-leading-zero);
  counter-increment: p;
  background: none;
  -webkit-mask: none; mask: none;
  width: auto; margin-top: 0;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--accent-lisible);
  letter-spacing: 0.06em;
}

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

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  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.7s var(--courbe); }
[data-zoom="oui"] a.media:hover > img,
[data-zoom="oui"] .media--zoom:hover > img { transform: scale(1.035); }

.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;
}

.sur-image {
  color: #fff;
  --encre: #fff;
  --fond: #000;
  --doux: color-mix(in oklab, #fff 84%, transparent);
  --filet: color-mix(in oklab, #fff 24%, transparent);
  --filet-fort: color-mix(in oklab, #fff 48%, 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 26%, transparent);
  --accent: #fff;
  --accent-lisible: #fff;
  --sur-accent: #14100e;
}

/* ── Le ruban ───────────────────────────────────────────────────────── */

.ruban {
  display: flex;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ruban-piste {
  display: flex; align-items: center;
  gap: var(--ruban-gout, 3.5rem);
  padding-right: var(--ruban-gout, 3.5rem);
  flex: none; min-width: max-content;
  animation: ruban var(--ruban-duree, 40s) 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; -webkit-mask: none; mask: none; }
}

.logo-mot {
  font-family: var(--f-titre);
  font-size: calc(var(--t-3) * 0.92);
  letter-spacing: -0.01em;
  color: var(--doux);
  white-space: nowrap;
}
.logo-client { height: var(--logo-h, 26px); width: auto; max-width: 150px; object-fit: contain; opacity: 0.6; filter: grayscale(1); transition: opacity 0.25s, filter 0.25s; }
.logo-client:hover { opacity: 1; filter: none; }

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

.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: var(--rail-l, min(84%, 25rem));
  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.25rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--f-titre);
  font-size: var(--t-3);
  letter-spacing: -0.014em;
  transition: color 0.2s;
}
.depliant-tete::-webkit-details-marker { display: none; }
.depliant-tete:hover { color: var(--accent-lisible); }
.depliant-signe {
  position: relative; width: 1.15rem; height: 1.15rem; flex: none;
  transition: transform 0.3s var(--courbe);
}
.depliant-signe::before, .depliant-signe::after {
  content: ""; position: absolute; inset: 50% 0;
  border-top: 1px 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.4rem; max-width: 74ch; 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.32s var(--courbe), content-visibility 0.32s 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.07em;
  text-transform: uppercase;
  color: var(--doux);
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  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.5' stroke-linecap='round'/%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) 20%, transparent);
}
.champ input::placeholder, .champ textarea::placeholder { color: color-mix(in oklab, var(--encre) 42%, 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="devoile"] .monte { animation-name: devoile; }
    [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(16px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes devoile { from { opacity: 0; clip-path: inset(0 0 22% 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.35rem; }
.mt-l { margin-top: var(--y-bloc); }

/* Le chiffre. En serif ici, pas en grotesque : c'est la police de titre du
   thème, et un nombre en serif à cette taille a une allure d'annale. */
.chiffre {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: var(--titre-graisse, 440);
  letter-spacing: -0.03em;
  line-height: 0.96;
}
.chiffre-suffixe { font-size: 0.5em; letter-spacing: 0; }

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

.etoiles {
  display: inline-block; width: 6em; height: 1.05em; vertical-align: -0.14em;
  background: linear-gradient(90deg,
    var(--accent-lisible) 0 calc(var(--note, 5) / 5 * 100%),
    color-mix(in oklab, var(--encre) 18%, 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 ÉDITIONS
   ----------------------------------------------------------------------------
   Tout ce qui précède se règle avec un nombre ou une couleur : les sept
   éditions de `config/theme.json` changent déjà de palette, de rayon, de
   police, de graisse et de densité sans qu'une ligne de CSS soit écrite.

   Ce qui suit est ce qu'un nombre ne sait PAS dire : un cadre qui perd ses
   équerres, un filet doublé, une arche, une trame diagonale, un libellé qui
   quitte la monospace pour l'italique. Ce sont des règles entières, elles
   vivent donc ici, derrière `data-edition` — posé sur `<html>` par la coquille.

   Trois garde-fous :

   1. UNE SIGNATURE PAR ÉDITION, pas trois. Une édition se reconnaît d'abord
      à sa teinte et à son angle ; ce qui suit n'ajoute que la preuve qu'on a
      affaire à un dessin et non à un nuancier.

   2. ELLE DOIT SE VOIR SUR UNE VIGNETTE DE 300 PIXELS. Un interlettrage de
      deux centièmes d'em ne se voit pas : ce n'est pas une signature, c'est
      une intention.

   3. ÉPURE RESTE ÉPURE. Le vocabulaire est celui du tracé — filets, cadres,
      équerres, libellés en petit. Une édition n'a pas le droit d'aller
      chercher la pilule, le verre dépoli ou le dégradé : ce sont les gestes
      d'un AUTRE thème, et un sélecteur d'éditions qui les convoque ne
      propose plus sept habillages mais sept thèmes mal ficelés.

   `encre` — l'allure d'origine — n'a volontairement aucune règle ici : c'est
   le tracé nu, celui qu'on obtient quand personne n'a rien choisi.
   ========================================================================= */

/* ── CHANTIER — le trait de charpentier ───────────────────────────────
   Le cadre cesse d'être une intention pointillée : la ligne devient
   continue, les quatre équerres passent à deux pixels et à un centimètre.
   Et partout où le thème tirait UN filet de séparation, le chantier en tire
   DEUX — `border-style: double` dessine littéralement deux traits et leur
   gouttière, sur le fond de l'élément lui-même. C'est la ligne de niveau
   reportée au cordeau, et elle se lit sur n'importe quelle surface.

   Une ombre portée a été essayée d'abord : sur le bandeau clair, un filet
   blanc à 22 % posé sous une barre orange ne se voyait pas. Le trait double
   est peint par l'élément, jamais par-dessus ce qui passe en dessous.

   Aucune ombre : sur un chantier, rien ne flotte. */
[data-edition="chantier"] {
  --ombre-1: none;
  --ombre-2: none;
  --ombre-3: none;
}
[data-edition="chantier"] .cadre { border-style: solid; }
[data-edition="chantier"] .cadre::before,
[data-edition="chantier"] .cadre::after {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
  border-color: var(--accent-lisible);
}
[data-edition="chantier"] .cadre::before { top: -2px; left: -2px; }
[data-edition="chantier"] .cadre::after { bottom: -2px; right: -2px; }
[data-edition="chantier"] .annonce,
[data-edition="chantier"] .entete--barre {
  border-bottom: 3px double var(--filet-fort);
}
[data-edition="chantier"] .depliant,
[data-edition="chantier"] .depliant:first-of-type {
  border-bottom-width: 3px;
  border-bottom-style: double;
  border-bottom-color: var(--filet-fort);
}
[data-edition="chantier"] .depliant:first-of-type {
  border-top: 3px double var(--filet-fort);
}
[data-edition="chantier"] .chif + .chif { border-left: 3px double var(--filet-fort); }
[data-edition="chantier"] .pied-bas { border-top: 3px double var(--filet-fort); }
/* Les boutons au pochoir. Le thème écrit ses libellés en monospace
   capitales ; le chantier étend le geste à l'action elle-même. */
[data-edition="chantier"] .bouton:not(.bouton--lien) {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── ATELIER — la planche montée sur son carton ───────────────────────
   Trois gestes d'un même métier : le filet passe au cheveu — pointillé fin,
   équerres réduites de moitié —, les libellés quittent la monospace pour la
   serif capitale largement approchée, ouverte d'un tiret cadratin, et
   l'image est cernée d'un trait EN RETRAIT, comme une planche montée sur
   son carton avec sa marge. */
[data-edition="atelier"] .s-papier,
[data-edition="atelier"] .s-carte,
[data-edition="atelier"] .s-profond,
[data-edition="atelier"] .s-accent {
  --filet: color-mix(in oklab, var(--encre) 9%, transparent);
  --filet-fort: color-mix(in oklab, var(--encre) 20%, transparent);
  --carte-filet: color-mix(in oklab, var(--encre) 14%, transparent);
}
[data-edition="atelier"] .cadre { border-style: dotted; }
[data-edition="atelier"] .cadre::before,
[data-edition="atelier"] .cadre::after { width: 0.35rem; height: 0.35rem; }
[data-edition="atelier"] .oeil,
[data-edition="atelier"] .micro,
[data-edition="atelier"] .pied-titre,
[data-edition="atelier"] .chif-intitule {
  font-family: var(--f-serif);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.17em;
}
[data-edition="atelier"] .oeil::before {
  content: "—";
  letter-spacing: 0;
  opacity: 0.55;
}
[data-edition="atelier"] .media::after {
  content: "";
  position: absolute;
  inset: clamp(0.7rem, 1.5vw, 1.35rem);
  border: 1px solid color-mix(in oklab, #fff 55%, transparent);
  pointer-events: none;
}

/* ── SALON — tout s'adoucit ───────────────────────────────────────────
   L'équerre est un geste d'atelier, pas d'institut : elle disparaît, le
   pointillé redevient un trait continu très pâle, et rien n'est plus
   découpé dans la page — les blocs y sont POSÉS, sur une ombre longue et
   basse. L'image passe en arche : le seul plein cintre du catalogue, et il
   se voit de loin. */
[data-edition="salon"] .cadre {
  border-style: solid;
  border-color: color-mix(in oklab, var(--encre) 10%, transparent);
  border-radius: var(--r);
}
[data-edition="salon"] .cadre::before,
[data-edition="salon"] .cadre::after { content: none; }
[data-edition="salon"] .cadre,
[data-edition="salon"] .carte {
  box-shadow: 0 26px 50px -34px rgb(0 0 0 / 0.55);
}
/* Quatre classes de profondeur : la règle du bandeau scindé remet le rayon
   à zéro, il faut donc la battre sur son propre terrain. */
[data-edition="salon"] .hero--scinde .hero-image .media,
[data-edition="salon"] .media {
  border-radius: 22rem 22rem var(--r) var(--r);
}

/* ── CABINET — le document ────────────────────────────────────────────
   Un métier réglementé n'a droit ni à l'effet ni au superlatif. Le cadre
   n'est plus une case : il n'en reste que le filet du haut, et chaque bloc
   se lit comme l'entrée d'un formulaire — réglée, aérée, sans rien qui
   brille. Aucune ombre, aucun relief, aucun mouvement au survol. */
[data-edition="cabinet"] {
  --ombre-1: none;
  --ombre-2: none;
  --ombre-3: none;
}
[data-edition="cabinet"] .cadre {
  border: 0;
  border-top: 1px solid var(--carte-filet);
  border-radius: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0 clamp(1.6rem, 2.8vw, 2.4rem);
}
[data-edition="cabinet"] .cadre::before,
[data-edition="cabinet"] .cadre::after { content: none; }
/* Sans bord vertical, la grille jointive collerait ses colonnes bord à
   bord : c'est l'écart qui fait la colonne, une fois le trait retiré. */
[data-edition="cabinet"] .presta-grille--jointive { gap: 0 calc(var(--gout) * 2.2); }
[data-edition="cabinet"] .pied-haut--cadres { gap: 0 calc(var(--gout) * 2.2); }
[data-edition="cabinet"] .presta-grille--jointive > *,
[data-edition="cabinet"] .pied-haut--cadres > * { margin: 0; }
[data-edition="cabinet"] .carte,
[data-edition="cabinet"] .media { box-shadow: none; }
[data-edition="cabinet"] a.carte:hover { transform: none; }

/* ── RING — la trame et le filet épais ────────────────────────────────
   Tout s'épaissit. Le cadre prend deux pixels et perd ses équerres — une
   équerre fine sur un trait gras ne se lit plus. Le libellé passe en
   capitales larges à pleine encre, son filet devient une TRAME diagonale,
   et l'étiquette cesse d'être cernée pour devenir un aplat : la seule tache
   vive d'une page nocturne. */
[data-edition="ring"] .s-papier,
[data-edition="ring"] .s-carte,
[data-edition="ring"] .s-profond,
[data-edition="ring"] .s-accent {
  --carte-filet: color-mix(in oklab, var(--encre) 34%, transparent);
}
[data-edition="ring"] .cadre {
  border-style: solid;
  border-width: 2px;
}
[data-edition="ring"] .cadre::before,
[data-edition="ring"] .cadre::after { content: none; }
[data-edition="ring"] .presta-grille--jointive > *,
[data-edition="ring"] .pied-haut--cadres > * { margin: 0 -2px -2px 0; }
[data-edition="ring"] .oeil,
[data-edition="ring"] .micro {
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--encre);
}
[data-edition="ring"] .oeil-trait {
  height: 0.6rem;
  max-width: 5.5rem;
  opacity: 1;
  background: repeating-linear-gradient(135deg,
    var(--accent) 0 2px, transparent 2px 6px);
}
[data-edition="ring"] .etiquette {
  background: var(--accent);
  color: var(--sur-accent);
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 0.12em;
}
/* La séparation des chiffres passe elle aussi à la trame : c'est le peigne
   des marges du thème, remonté d'un cran. */
[data-edition="ring"] .chif + .chif {
  border-left: 0;
  background-image: repeating-linear-gradient(135deg,
    var(--filet-fort) 0 1px, transparent 1px 5px);
  background-size: 6px 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

/* ── TABLE — la carte du restaurant ───────────────────────────────────
   Une carte n'écrit pas ses intitulés en petites capitales espacées : elle
   les écrit à la main, en italique, dans la police des titres, ouverts d'un
   tiret cadratin. Chaque tête de section est refermée d'un filet — le filet
   de menu —, et le prix quitte la monospace pour l'italique : c'est la
   ligne qu'on lit en premier. */
[data-edition="table"] .oeil,
[data-edition="table"] .micro,
[data-edition="table"] .pied-titre,
[data-edition="table"] .chif-intitule {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: var(--t-petit);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}
[data-edition="table"] .oeil::before { content: "—"; }
[data-edition="table"] .oeil-trait { display: none; }
[data-edition="table"] .presta-prix {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: var(--t-base);
  letter-spacing: 0;
}
/* Le filet ne touche QUE les têtes de section. Dans le bandeau scindé, la
   même classe enveloppe le titre, le chapô et les boutons : un trait sous
   l'appel à l'action y serait un contresens. */
[data-edition="table"] .section > .enveloppe > .tete,
[data-edition="table"] .faq-tete > .tete {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--filet-fort);
}

/* ── STUDIO — presque rien ────────────────────────────────────────────
   Le cadre ne se dessine plus. Il ne reste que ses deux équerres, agrandies
   et passées à l'indigo : les traits de coupe d'un tirage, avec le contenu
   RETIRÉ à l'intérieur. La grille jointive s'ouvre en grand, les filets
   pâlissent, le libellé s'étire. Ne restent que le blanc, l'écart et ce
   qu'on est venu lire.

   Les équerres avaient d'abord été SORTIES du bloc, à un centimètre au
   dehors : sur la capture, elles tombaient sur la règle verticale du
   conteneur et se lisaient comme une salissure, pas comme une intention.
   Elles sont revenues au coin du bloc, où elles cadrent quelque chose. */
[data-edition="studio"] .cadre {
  border-color: transparent;
  padding: clamp(1.35rem, 2.4vw, 2rem);
}
[data-edition="studio"] .cadre::before,
[data-edition="studio"] .cadre::after {
  width: 1.15rem;
  height: 1.15rem;
  border-color: var(--accent);
}
[data-edition="studio"] .cadre::before { top: 0; left: 0; }
[data-edition="studio"] .cadre::after { bottom: 0; right: 0; }
[data-edition="studio"] .presta-grille--jointive { gap: var(--y-bloc) calc(var(--gout) * 3); }
[data-edition="studio"] .pied-haut--cadres { gap: var(--y-bloc) calc(var(--gout) * 3); }
[data-edition="studio"] .presta-grille--jointive > *,
[data-edition="studio"] .pied-haut--cadres > * { margin: 0; }
[data-edition="studio"] .oeil,
[data-edition="studio"] .micro {
  letter-spacing: 0.3em;
  font-size: calc(var(--t-micro) * 0.92);
}
[data-edition="studio"] .depliant,
[data-edition="studio"] .depliant:first-of-type {
  border-color: color-mix(in oklab, var(--encre) 8%, transparent);
}