/* ============================================================================
   styles.css — KALVERA
   Aucune couleur en dur : tout passe par les variables de tokens.css (règle 1).

   LES HAUTEURS DE SECTION SONT UNE DONNÉE MESURÉE, PAS UN GOÛT. La cible fait
   33 051 px répartis ainsi : 3600 · 900 · 2166 · 1999 · 136 · 8424 · 1622 · 1051 ·
   1636 · 1044 · 1325 · 1328 · 1243 · 1216 · 1800 · 1764 · 1800. Ce sont elles qui
   fixent la COURSE de chaque geste lié au défilement : une section deux fois plus
   courte rendrait tous ses scrubs deux fois plus rapides. Elles sont donc écrites
   dans la même unité fluide que le reste (calc(Npx rem / 14.4)), ce qui les rend
   exactes à 1440 px de large et proportionnelles ailleurs.
   ============================================================================ */

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--nuit);
  color: var(--pierre);
  font-family: var(--font-body);
  font-size: var(--p4);
  line-height: var(--lh-p4);
  letter-spacing: var(--ls-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.sr-seulement {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Typographie ──────────────────────────────────────────────────────────── */
h1, h2, h3, .grand-titre, .faux-titre-grand, .compteur, .annees, .pied-mot,
.mot-signe, .promoteur-marque, .valeur {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-titre);
  margin: 0;
}
h1, .mot-signe        { font-size: var(--h1); line-height: var(--lh-h1); }
h2, .faux-titre-grand { font-size: var(--h2); line-height: var(--lh-h2); }
h3, .grand-titre      { font-size: var(--h3); line-height: var(--lh-h3); }
.compteur, .annees, .pied-mot { font-size: var(--h1); line-height: var(--lh-h1); }
.promoteur-marque, .valeur    { font-size: var(--h5); line-height: var(--lh-h5); }

.p3 { font-size: var(--p3); line-height: var(--lh-p3); letter-spacing: var(--ls-texte); margin: 0 0 var(--u-24); }
.p4 { font-size: var(--p4); line-height: var(--lh-p4); letter-spacing: var(--ls-texte); margin: 0; }
.p6, .sur-titre, .faux-titre {
  font-size: var(--p6); line-height: var(--lh-p6); letter-spacing: var(--ls-texte);
  text-transform: uppercase; margin: 0;
}

/* ── En-tête : 76 px MESURÉS chez la cible, et sous les 120 px du filtre ───── */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--entete-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--u-24);
  font-size: var(--p6); text-transform: uppercase; letter-spacing: var(--ls-texte);
  mix-blend-mode: difference;
}
.marque { font-family: var(--font-display); font-size: var(--h6); letter-spacing: var(--ls-titre); }
.marque sup { font-size: .45em; vertical-align: super; }
.nav-liens { display: flex; gap: var(--u-24); }
.nav-droite { display: flex; align-items: center; gap: var(--u-24); }
.nav-cta { border: 1px solid var(--pierre-50); border-radius: 999px; padding: var(--u-8) var(--u-16); }

/* L'ÉGALISEUR — 14 barres de 2 px, l'animation autonome principale de la cible.
   Le nombre et la taille viennent de la mesure : `div.sound_list_item`, 14 éléments
   de 2 px de large et 5 à 7 px de haut. Les leur, pas une invention. */
.sound_list { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound_list_item { width: 2px; height: 14px; background: var(--pierre); transform-origin: 50% 100%; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
main > section {
  position: relative;
  width: 100%;
  padding: var(--u-104) var(--u-48);
  /* `clip` ET NON `hidden`. MESURÉ le 2026-08-25 : `overflow: hidden` établit un
     conteneur de défilement, et un `position: sticky` descendant n'a donc plus rien
     à quoi s'accrocher. Conséquence relevée au balayage du clone : le rail de la
     section 5 partait à l'écran 53 et laissait 7000 px de VIDE — Δ 0 %, 0 %, 0 % sur
     onze paliers d'affilée. `overflow: clip` rogne sans créer de scrollport : sticky
     survit. Un seul mot de CSS valait deux sections mortes. */
  overflow: clip;
}
main > section.clair { background: var(--pierre); color: var(--nuit); }
main > section.clair .bouton { border-color: var(--nuit); }

#hero         { height: calc(3600rem / var(--ratio)); padding: 0; }
#prolog       { height: calc(900rem  / var(--ratio)); }
#about        { height: calc(2166rem / var(--ratio)); }
#location     { height: calc(1999rem / var(--ratio)); }
#charniere    { height: calc(136rem  / var(--ratio)); padding: 0; display: flex; align-items: center; }
#benefits     { height: calc(8424rem / var(--ratio)); }
#commissioning{ height: calc(1622rem / var(--ratio)); }
#finance      { height: calc(1051rem / var(--ratio)); }
#legend       { height: calc(1636rem / var(--ratio)); }
#seasons      { height: calc(1044rem / var(--ratio)); }
#developer    { height: calc(1325rem / var(--ratio)); }
#factoids     { height: calc(1328rem / var(--ratio)); }
#gallery      { height: calc(1243rem / var(--ratio)); }
#blog         { height: calc(1216rem / var(--ratio)); }
#cta          { height: calc(1800rem / var(--ratio)); }
#faq          { height: calc(1764rem / var(--ratio)); }
#pied         { height: calc(1800rem / var(--ratio)); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero-w { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.hero-s { text-align: center; z-index: 2; }
.sur-titre { margin-bottom: var(--u-24); opacity: .7; }
.mot-signe { font-size: calc(220rem / var(--ratio)); line-height: .9; }
.hero-accroche { max-width: calc(560rem / var(--ratio)); margin: var(--u-24) auto 0; opacity: .8; }
.hero-gravure { position: absolute; width: 46%; opacity: .35; left: -6%; bottom: 8%; }
.hero-gravure--2 { left: auto; right: -8%; bottom: 22%; width: 52%; opacity: .28; }
.hero-coord { position: absolute; left: var(--u-48); bottom: var(--u-48); opacity: .55; }

/* ── Le bloc révélé caractère par caractère ───────────────────────────────── */
.bloc-revele {
  font-family: var(--font-display);
  font-size: var(--h4); line-height: 1.25; letter-spacing: var(--ls-titre);
  text-align: center; max-width: calc(920rem / var(--ratio));
  margin: 0 auto; text-transform: uppercase;
}
.bloc-revele--grand { font-size: var(--h3); }
.split-char { display: inline-block; will-change: opacity; }

/* ── Colonnes ─────────────────────────────────────────────────────────────── */
.colonne-double { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cellule); align-items: start; }
.col { position: relative; }
.cadre { width: 100%; opacity: .8; }

.reperes { display: grid; gap: var(--u-12); margin-top: var(--u-40); }
.reperes > div { display: flex; justify-content: space-between; border-top: 1px solid var(--pierre-50); padding-top: var(--u-8); }

/* ── Décors ───────────────────────────────────────────────────────────────── */
/* OPACITÉS ET TAILLES CALÉES SUR LA MESURE, PAS SUR LE GOÛT. Le diff pixel du
   balayage retient un écart à partir de 8/255 de luminance. Une gravure à 22 %
   d'opacité sur `--nuit` franchit ce seuil sur une partie seulement de son tracé :
   elle bouge, et la mesure ne le voit pas. Mesuré : amplitude 0,391 contre la cible.
   La cible déplace des PHOTOGRAPHIES PLEIN CADRE — ici, à défaut, des gravures assez
   grandes et assez contrastées pour toucher la même surface. */
.deco  { position: absolute; opacity: .62; pointer-events: none; }
.deco--gauche { left: -10%;  top: 6%;   width: 62%; }
.deco--droite { right: -10%; top: 22%;  width: 58%; }
.deco--bas    { left: 8%;    bottom: -18%; width: 78%; }
.deco--coin   { right: 2%;   bottom: 4%; width: 44%; }
.scene { position: absolute; opacity: .58; pointer-events: none; }
.scene--1 { left: -8%;  top: 10%;  width: 56%; }
.scene--2 { right: -10%; top: 38%; width: 64%; }
.scene--3 { left: 22%;  bottom: 4%; width: 60%; }

/* ── Titre filant (trois rangées, vitesses différentes) ───────────────────── */
.titre-file { display: grid; gap: 0; margin-bottom: var(--u-72); }
.file-rang { display: block; white-space: nowrap; will-change: transform; }
.file-rang[data-rang="1"] { opacity: .55; }
.file-rang[data-rang="2"] { opacity: .3; }

/* ── Bandeaux ─────────────────────────────────────────────────────────────── */
.bandeau-filet { display: flex; white-space: nowrap; width: 100%; overflow: hidden; opacity: .6; }
.bandeau-filet span { padding-right: var(--u-24); }

.fin-marquee { display: flex; white-space: nowrap; overflow: hidden; width: 100%; margin-bottom: var(--u-72); }
.fin-marquee-piste { display: flex; will-change: transform; font-size: var(--h6); text-transform: uppercase; letter-spacing: var(--ls-texte); }
.fin-marquee-piste span { padding-right: var(--u-24); }

/* ── Benefits : rail horizontal piloté au défilement vertical ─────────────── */
.benefits-tete { position: sticky; top: calc(var(--entete-h) + var(--u-40)); z-index: 3; mix-blend-mode: difference; }
.benefits-titre { max-width: calc(900rem / var(--ratio)); }
.rail-piste { position: sticky; top: 26vh; overflow: clip; margin-top: var(--u-72); }
.rail { display: flex; gap: var(--cellule); will-change: transform; }
.carte {
  flex: 0 0 calc(420rem / var(--ratio));
  border: 1px solid var(--pierre-50); padding: var(--u-32);
  background: var(--pierre-10); min-height: calc(320rem / var(--ratio));
}
.carte h3 { font-size: var(--h5); line-height: var(--lh-h5); margin: var(--u-16) 0 var(--u-16); }
/* Les cartes portent une gravure : sans elle, le rail déplace du texte fin, qui ne
   touche presque aucune surface. La cible déplace des photographies. */
.carte img { width: 100%; opacity: .7; margin-top: var(--u-16); }

/* ── Calendrier ───────────────────────────────────────────────────────────── */
.carte-calendrier { border: 1px solid var(--pierre-50); padding: var(--u-48); max-width: calc(760rem / var(--ratio)); background: var(--pierre-10); }
.annees { font-size: var(--h2); line-height: var(--lh-h2); }
.annees span { opacity: .5; }
.jalons { display: grid; gap: var(--u-12); margin: var(--u-40) 0 var(--u-24); }
.jalons > div { display: flex; justify-content: space-between; border-top: 1px solid var(--pierre-50); padding-top: var(--u-8); }
.note { opacity: .55; }

/* ── Finance ──────────────────────────────────────────────────────────────── */
.grand-chiffre { font-size: var(--h1); }
.chiffres { display: grid; gap: var(--u-16); }
.chiffres > div { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--pierre-50); padding-top: var(--u-12); }

/* ── Saisons ──────────────────────────────────────────────────────────────── */
.saison-titre { text-align: center; margin-bottom: var(--u-48); }
.saison { display: inline-block; will-change: opacity, transform; }
.saisons-corps { position: relative; max-width: calc(760rem / var(--ratio)); margin: 0 auto; min-height: calc(200rem / var(--ratio)); }
.saisons-corps p { position: absolute; inset: 0; opacity: 0; }
.saisons-corps p[data-saison-bloc="0"] { opacity: 1; }

/* ── Promoteur et CTA : les deux gestes DÉCLENCHÉS ────────────────────────── */
.carte-promoteur, .cta-carte {
  border: 1px solid var(--pierre-50); padding: var(--u-48);
  max-width: calc(700rem / var(--ratio)); background: var(--pierre-10);
  transform-origin: 50% 50%;
}
.cta-carte { margin: 0 auto; text-align: center; }
.carte-promoteur .p4 { margin-top: var(--u-24); }
.bouton { display: inline-block; margin-top: var(--u-24); border: 1px solid var(--pierre); border-radius: 999px; padding: var(--u-12) var(--u-32); font-size: var(--p6); text-transform: uppercase; letter-spacing: var(--ls-texte); }

/* ── Chiffres ─────────────────────────────────────────────────────────────── */
.chiffres-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cellule); }
.chiffres-grille > div { display: grid; gap: var(--u-12); }
.chiffres-grille .p6 { opacity: .6; }

/* ── Galerie ──────────────────────────────────────────────────────────────── */
.titre-eclate { display: flex; justify-content: space-between; margin-bottom: var(--u-48); }
.galerie-piste { display: flex; gap: var(--u-24); overflow: hidden; }
.galerie-carte { flex: 0 0 calc(380rem / var(--ratio)); margin: 0; }
.galerie-carte img { width: 100%; border: 1px solid var(--pierre-50); background: var(--pierre-10); }
.galerie-carte figcaption { margin-top: var(--u-12); opacity: .6; }

/* ── Journal ──────────────────────────────────────────────────────────────── */
.entrees { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cellule); margin-top: var(--u-48); }
.entree img { width: 100%; border: 1px solid var(--nuit-50); background: var(--nuit-10); margin-bottom: var(--u-16); }
.entree h3 { font-size: var(--h5); line-height: var(--lh-h5); margin: var(--u-8) 0 var(--u-12); }
.entree .p6 { opacity: .6; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.panneaux { max-width: calc(900rem / var(--ratio)); margin-top: var(--u-48); }
.panneaux details { border-top: 1px solid var(--nuit-50); padding: var(--u-24) 0; }
.panneaux summary { font-family: var(--font-display); font-size: var(--h6); letter-spacing: var(--ls-titre); cursor: pointer; list-style: none; }
.panneaux summary::-webkit-details-marker { display: none; }
.panneaux details p { margin-top: var(--u-16); opacity: .75; }

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.pied-w { position: relative; z-index: 2; transform-origin: 50% 100%; }
.pied-mot { font-size: calc(200rem / var(--ratio)); line-height: .85; }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cellule); margin: var(--u-72) 0 var(--u-48); }
.pied-colonnes > div { display: grid; gap: var(--u-8); align-content: start; }
.pied-colonnes span { opacity: .5; }
.pied-filet { border-top: 1px solid var(--pierre-50); padding-top: var(--u-16); opacity: .5; }

/* ── Mobile : PARITÉ TACTILE. Ce qui bouge au desktop bouge au mobile — le diff
       mesure aux DEUX viewports (règle 5 de cs-build). On réduit la mise en page,
       jamais le mouvement. ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .colonne-double, .entrees, .chiffres-grille, .pied-colonnes { grid-template-columns: 1fr; }
  .nav-liens { display: none; }
  main > section { padding: var(--u-72) var(--u-24); }
  .mot-signe { font-size: calc(120rem / var(--ratio)); }
  .pied-mot  { font-size: calc(96rem / var(--ratio)); }
  .carte { flex-basis: 78vw; }
  .galerie-carte { flex-basis: 72vw; }
}

/* Le h1 n'est JAMAIS caché en CSS sans garde `.has-js` : sans elle, un échec du script
   ferait disparaître le LCP (règle 4 de cs-build). */
.has-js .bloc-revele .split-char { opacity: .1; }

@media (prefers-reduced-motion: reduce) {
  .has-js .bloc-revele .split-char { opacity: 1 !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   PHOTOGRAPHIES — ajoutées le 2026-08-25 après le côte-à-côte.

   CE QUI MANQUAIT N'ÉTAIT NI LA STRUCTURE NI LE MOUVEMENT. Les trois notes passaient
   déjà leurs seuils (structure 0,983 · motion 0,813 · garde-fou PASS) et l'écart
   restait évident à l'œil : la cible déplace des photographies plein cadre, le clone
   déplaçait des traits. L'amplitude le chiffrait — 0,532, soit la moitié de la surface
   touchée par la cible — et je ne l'avais pas écoutée.

   Les images sont de VRAIES photographies sous licence libre (Openverse, usage
   commercial et modification autorisés), BICHROMÉES dans la palette de la marque
   #232a33 → #8299ad. Le duotone n'est pas une coquetterie : c'est ce que fait la cible
   avec les siennes, et c'est ce qui permet d'ajouter de la matière sans introduire une
   seule couleur que la spec ne déclare pas. Provenance complète, auteur et licence par
   image : ../images-provenance/PROVENANCE.json
   ============================================================================ */

img[src^="photos/"] { object-fit: cover; }

.deco  { opacity: .38; }
.deco--gauche { left: -12%; top: 4%;    width: 66%; }
.deco--droite { right: -12%; top: 20%;  width: 62%; }
.deco--bas    { left: 4%;   bottom: -20%; width: 84%; }
.deco--coin   { right: 0%;  bottom: 2%; width: 48%; }

.scene { opacity: .42; }
.scene--1 { left: -10%;  top: 8%;   width: 60%; }
.scene--2 { right: -12%; top: 34%;  width: 68%; }
.scene--3 { left: 18%;   bottom: 2%; width: 64%; }

/* Le cadre occupe toute sa colonne, en format portrait comme chez la cible. */
.cadre { width: 100%; aspect-ratio: 3 / 4; opacity: 1; }

/* Le hero porte deux photographies plein cadre : c'est là que la cible est la plus
   dense, et c'est le premier écran. */
.hero-gravure    { width: 62%; opacity: .5; left: -12%; bottom: 2%; }
.hero-gravure--2 { width: 68%; opacity: .42; right: -14%; bottom: 16%; }

/* Les cartes du rail portent une photographie, pas une vignette. */
.carte img { width: 100%; aspect-ratio: 16 / 10; opacity: .85; }

.galerie-carte img { aspect-ratio: 4 / 5; }
.entree img { aspect-ratio: 3 / 2; }

/* L'attribution CC BY : lisible, discrète, jamais masquée. */
.pied-credits { margin-top: var(--u-12); opacity: .4; text-transform: none; letter-spacing: 0; }

/* ============================================================================
   COMPOSITION EN BANDES — reconstruit le 2026-08-25 sur relevé de `geometrie.mjs`.

   ── L'HYPOTHÈSE PRÉCÉDENTE A ÉTÉ MESURÉE PUIS REJETÉE ───────────────────────────
   Premier essai : faire déborder les images jusqu'aux bords. La géométrie s'alignait
   (images pleine largeur 0,06 → 1,88 contre 2,00 chez la cible) et la COMPOSITION
   BAISSAIT — 0,481 → 0,461. Une photographie qui remplit tout le cadre produit une
   encre UNIFORME, or la corrélation mesure la STRUCTURE de l'encre. La cible n'est pas
   « pleine de choses » : elle a des choses à des endroits précis, avec du vide franc
   ailleurs. Relevé sur sa §2 : le profil horizontal descend à 0,28 sur ses colonnes de
   bord, contre 0,42 chez le clone. Son vide est plus vide.

   ── CE QUE LA GÉOMÉTRIE DIT VRAIMENT ────────────────────────────────────────────
   Sur la soixantaine de blocs relevés chez la cible, presque TOUS font l = 0,98 ou
   l = 1,00. Sa mise en page est un empilement de BANDES HORIZONTALES pleine largeur :

     filet fin        h ≈ 0,07   (div.u-136, en haut ET en bas de presque chaque section)
     bande de contenu h ≈ 0,20
     bande de contenu h ≈ 0,35
     grande scène     h ≈ 0,50 à 1,13   (souvent PLUS HAUTE que sa section, elle déborde)
     filet fin        h ≈ 0,07

   Le contenu ne flotte pas : il vit DANS une bande, sur une grille interne à 98 %.
   C'est cette alternance bande pleine / filet fin qui structure l'encre — pas la
   quantité d'image.
   ============================================================================ */

/* Les filets fins qui ouvrent et ferment chaque section — h ≈ 7 %, l = 98 %.
   Chez la cible ce sont des `div.u-136` / `u-104` / `u-72`, présents dans DOUZE
   sections sur dix-sept. Ils ne portent aucun contenu : ils découpent. */
main > section::before,
main > section::after {
  content: ''; position: absolute; left: 1%; width: 98%;
  height: 7%; pointer-events: none; z-index: 1;
  border-top: 1px solid var(--pierre-50);
}
main > section::before { top: 0; }
main > section::after  { bottom: 0; border-top: 0; border-bottom: 1px solid var(--pierre-50); }
#charniere::before, #charniere::after { display: none; }

/* LES DÉCORS DEVIENNENT DES BANDES, pas des rectangles flottants. Pleine largeur,
   hauteur donnée, position verticale donnée — exactement la forme relevée chez la
   cible. `object-fit: cover` fait le reste : une bande de 22 % de haut sur toute la
   largeur cadre la photographie, elle ne la déforme pas. */
.deco, .scene {
  left: 0; right: auto; margin-left: 0;
  width: 100%; max-width: none;
  object-fit: cover;
}
.deco--gauche { top: 7%;  height: 20%; opacity: .34; }
.deco--droite { top: 29%; height: 26%; opacity: .30; }
.deco--bas    { top: 57%; height: 43%; bottom: auto; opacity: .40; }
.deco--coin   { top: 27%; height: 12%; bottom: auto; right: auto; opacity: .26; }
.scene--1 { top: 8%;  height: 22%; opacity: .36; }
.scene--2 { top: 32%; height: 30%; opacity: .32; }
/* LA GRANDE SCÈNE : plus haute que sa part de section, elle DÉBORDE — c'est la forme
   relevée en §2 (h 1,13) et §11 (h 1,54) chez la cible. */
.scene--3 { top: 55%; height: 52%; bottom: auto; opacity: .44; }

/* Le contenu passe AU-DESSUS des bandes et occupe 98 % de la largeur, comme la
   `div.grid` de la cible — plus une colonne centrée étroite. */
main > section > *:not(img) { position: relative; z-index: 2; }
.colonne-double, .benefits-tete, .chiffres-grille, .entrees,
.panneaux, .pied-w, .saisons-corps, .galerie-piste {
  width: 98%; max-width: none; margin-left: auto; margin-right: auto;
}

/* Le hero : une scène plein écran derrière le mot-signe, comme la cible pose son
   canvas en l = 1,00 h = 1,00. */
.hero-gravure, .hero-gravure--2 {
  left: 0; right: auto; width: 100%; margin-left: 0;
  height: 100vh; top: 0; bottom: auto; object-fit: cover;
}
.hero-gravure    { opacity: .46; }
.hero-gravure--2 { opacity: .22; }

/* Le cadre des colonnes doubles reste dans sa colonne : la cible n'a PAS d'image
   flottant à mi-largeur, elle a des bandes. On lui rend sa place dans la grille. */
#about .cadre, #location .cadre {
  position: static; width: 100%; height: auto; aspect-ratio: 3 / 4;
}

/* Les cartes, la galerie et le journal : format cadré, pas des vignettes. */
.carte img         { aspect-ratio: 3 / 2; opacity: .9; }
.galerie-carte img { aspect-ratio: 3 / 4; }
.entree img        { aspect-ratio: 4 / 3; }

/* ── LE CONTRASTE — corrigé le 2026-08-25, troisième hypothèse, mesurée ────────
   `composition.mjs` note l'ÉCART-TYPE DE LUMINANCE par cellule : l'énergie d'arêtes.
   Mes photographies étaient posées à 30-46 % d'opacité sur un fond sombre. La
   bichromie leur donne pourtant une plage de 47 unités de clarté (#232a33 L 15 →
   #8299ad L 62) — exactement celle de la cible (#2c2824 L 16 → #a89474 L 62). À 34 %
   d'opacité sur du sombre, cette plage tombe à une quinzaine d'unités : j'étouffais
   le signal même que l'instrument cherche.
   La cible pose ses photographies À PLEINE OPACITÉ. On fait pareil. */
.deco  { opacity: .92; }
.scene { opacity: .88; }
.deco--coin { opacity: .8; }
.hero-gravure    { opacity: .9; }
.hero-gravure--2 { opacity: .55; }
.carte img { opacity: 1; }
.cadre     { opacity: 1; }

/* Le texte doit rester lisible PAR-DESSUS. La cible pose ses titres sur un voile,
   pas directement sur la photographie. */
main > section > *:not(img) { text-shadow: 0 1px 14px rgba(35, 42, 51, .85); }
.colonne-double .col, .benefits-tete, .carte, .carte-calendrier,
.chiffres, .saisons-corps, .panneaux, .pied-w, .cta-carte, .carte-promoteur {
  background: linear-gradient(rgba(35,42,51,.72), rgba(35,42,51,.72));
  backdrop-filter: blur(2px);
}
main > section.clair > *:not(img) { text-shadow: 0 1px 14px rgba(232, 239, 233, .85); }
main > section.clair .col, main > section.clair .panneaux, main > section.clair .entrees {
  background: linear-gradient(rgba(130,153,173,.78), rgba(130,153,173,.78));
}

/* Le voile de lisibilité s'applique aux BLOCS DE TEXTE, pas aux titres collants
   pleine largeur : sur `.benefits-tete` il dessinait un bandeau noir en travers. */
.benefits-tete { background: none; backdrop-filter: none; }
.benefits-titre {
  display: inline-block;
  background: linear-gradient(rgba(35,42,51,.7), rgba(35,42,51,.7));
  padding: var(--u-8) var(--u-16);
}
.titre-eclate, .saison-titre { background: none; backdrop-filter: none; }