/* ==========================================================================
   04-IMMERSIVE — couche d'expérience
   « Le paysage comme interface. »

   Cette feuille ne remplace rien : elle s'ajoute après 00 à 03 et pousse
   trois idées — une entrée de chapitre, une exploration spatiale des projets
   (le terrain) et un curseur maison sur les appareils à pointeur. Tout est
   facultatif : sans JavaScript, sans survol et sans mouvement, les pages
   restent complètes et lisibles.

   Le second passage du 23-09-2026 a retiré d'ici toutes les couches qui
   peignaient quelque chose : pierre tuilée, grain de pellicule, lumière
   feuillue, halos, voiles de chapitre et film d'ouverture. La section
   « FOND — LE NOIR NU », plus bas, recense ce qui est parti et pourquoi.
   ========================================================================== */

:root {
  /* Échelle typographique d'expérience */
  --t-giga: clamp(2.4rem, 0.55rem + 11.2vw, 10.5rem);
  --t-mega: clamp(2.4rem, 0.85rem + 8.2vw, 8.5rem);
  --t-ultra: clamp(1.9rem, 1rem + 4.4vw, 5rem);

  /* Rythme */
  --rail-w: clamp(19rem, 74vw, 24rem);
  --rail-h: clamp(24rem, 56vh, 32rem);
  /* Filets de plan : les seuls traits de construction du site (bordures de
     bandeau, de légende, de l'ouverture). Ce ne sont pas des fonds. */
  --plan-line: rgba(255, 255, 255, 0.1);
  --plan-line-light: rgba(255, 255, 255, 0.14);

  /* ---- Ce qui n'est PLUS là (second passage du 23-09-2026)
     Trois jetons ont été retirés avec les couches qu'ils réglaient :

       · `--tex-stone` / `--tex-stone-size` : la pierre tuilée du fond de page,
         cadrée dans la texture fournie le 21-09-2026 et accordée à l'échelle
         du film d'ouverture. Elle demandait 33 lignes de justification (tuile
         sans couture, bouclage, absence de symétrie, un pixel de texture par
         pixel d'écran) — cette matière n'existe plus dans la page ;
       · `--rock-night` : la nuit multipliée avec la pierre, qui réglait la
         présence du mur sans toucher au contraste du texte ;
       · `--grain-op` : l'opacité du grain de pellicule.

     Le fond du site est un noir pur, sans matière : il vient de `body`
     (01-base) et de `html` (couleur de rebond). Rien, dans cette feuille, ne
     peint plus le fond de la page. */

  /* La nuit disparaît aussi : plus de `--rock-night`, donc plus de `z-index`
     pour un grain. Le curseur reste au-dessus de tout, visionneuse comprise. */
  --z-cursor: 200;
}

/* ========================================================= FOND — LE NOIR NU
   Ce qui vivait ici et n'y vit plus (second passage du 23-09-2026) :

     · `div.rock` — la pierre tuilée du fond de page, avec son halo chaud et
       son vignettage : un calque fixe, un pixel de texture par pixel d'écran,
       multiplié avec la nuit pour que le mur ne s'éclaircisse pas. C'était la
       seule matière du fond du site. Retiré, avec ses deux `<div>` dans
       `src\partials\page-shell.html`, `index.html` et `projets.html` ;
     · `div.grain` — un grain de pellicule (feTurbulence tuilé, mélange
       « overlay ») posé sur toute la page, typographie comprise. Retiré : le
       noir reste un noir, sans pellicule.

   Il ne subsiste, pour peindre le fond, que la couleur de `body` et celle de
   `html` (01-base) : un noir pur, identique du premier au dernier chapitre.
   Aucun élément n'a donc de fond à raccorder, et aucune couture n'est
   possible. */

/* ============================================== CURSEUR — APPAREILS À POINTEUR
   Le curseur maison ne fait que reformuler ce que le survol fait déjà :
   il n'est jamais la seule façon d'atteindre une information, et il
   n'existe pas sur appareil tactile. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  transition: opacity var(--dur-1) var(--ease);
}

.cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--c-laiton);
  transition: opacity var(--dur-1) var(--ease);
}

.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.6);
  padding: 0.42rem 0.7rem 0.36rem;
  border: var(--hairline) solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--c-blanc);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}

html.has-cursor .cursor { opacity: 1; }
html.has-cursor.cursor-hover .cursor__dot { opacity: 0; }

html.has-cursor.cursor-hover .cursor__label {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}

/* ============================================================== MARQUE / LOGO */
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.72rem;
  min-height: 2.75rem;
}

.brand__mark {
  display: block;
  /* La marque fournie le 23-09-2026 est une plaque carrée (1254 x 1254) :
     fond noir, filet crème, le mot JASMIN et la mention « l'Art du Paysage »
     dans le haut, la fleur de l'oiseau de paradis sous eux. Elle est opaque —
     et c'est voulu : son cadre la tient partout, sur la nuit du site comme
     sur la pierre claire de l'ouverture, sans qu'aucun fond lui soit
     nécessaire.

     La largeur passe par `--mark-w`, que chaque contexte pose (pied de page,
     menu, état « sur photographie »). L'état photographie la pose sur
     l'en-tête, donc *par héritage* : une déclaration faite sur la marque
     elle-même — comme celle des fenêtres étroites, plus bas — l'emporte
     toujours. Sans cela, la règle de l'état photographie (0,4,0) écrasait
     celle des téléphones (0,1,0) et le mot MENU débordait de 14 px à 320 px.

     Le carré se paie en hauteur : 6,5 rem font 104 px de côté, plus les 0,35 rem
     de remplissage du lien en haut et en bas — 115 px, et la barre en porte
     128 (`--header-h`). La revue du 23-09-2026 avait porté la plaque de 58 à
     80 px ; la cinquième passe l'a portée de 80 à 104 px dans la barre, à
     112 px sur la photographie d'ouverture, à 176 px au pied de page et à
     160 px dans le menu plein écran : c'est une marque, pas une vignette. */
  --mark-w: 6.5rem;
  width: var(--mark-w);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  transform: scale(1.05);
  opacity: 1;
}

/* Le filet carré de la vignette de 2022 n'est pas revenu avec la plaque : la
   marque porte son propre cadre crème, et rien d'autre ne lui est nécessaire —
   ni boîte, ni ombre de boîte, ni pastille claire derrière elle. */

.footer__brand .brand__mark {
  --mark-w: 11rem;
  margin-bottom: 1.1rem;
  /* La plaque se pose en sceau au-dessus de la phrase du pied de page : à
     176 px, c'est la plus grande taille de la page, et elle garde ses couleurs
     pleines — l'opacité réduite était un correctif du sceau ivoire de 2022,
     qui n'a plus lieu d'être ici. */
}

/* `.nav-overlay__mark` — la plaque et la phrase « Design de jardins / Sutton »
   en tête du menu plein écran — a été retirée le 23-09-2026 : le menu ne
   s'ouvre que sous 1024 px, c'est-à-dire sur les fenêtres où la plaque de
   l'en-tête est déjà là, juste au-dessus. Deux fois la même marque à l'écran
   au même instant, c'était une fois de trop. */

/* Sous 480 px, la marque se resserre et la barre s'abaisse.
   Le lockup texte n'existe plus à côté d'elle, mais les paliers restent : la
   barre doit tenir la plaque, la navigation et le mot MENU sur une seule ligne.
   Ils déclarent la variable *sur la marque* : elle l'emporte donc sur celle que
   l'en-tête en état « sur photographie » lui transmet. Deux paliers, deux
   hauteurs de barre : 128 px sur bureau, 120 px sous 640 px, 104 px sous
   360 px — une plaque de 88 px y suffit. */
@media (max-width: 640px) {
  :root { --header-h: 7.5rem; }
}

@media (max-width: 480px) {
  .brand__mark { --mark-w: 5.5rem; }
}

@media (max-width: 360px) {
  :root { --header-h: 6.5rem; }
  .brand__mark { --mark-w: 5rem; }
}


/* ================================================== ENTRÉE — LA SCÈNE NOIRE
   L'ouverture ne montre plus de photographie. Trois passes l'avaient allégée :
   le film muet retiré le 23-09-2026, puis la pierre tuilée, le grain et tous
   les voiles. Restait l'image fixe du bec verseur de Westmount — le premier
   écran du site était une illustration du travail. La revue du 23-09-2026
   (troisième passe) la retire à son tour : l'ouverture est une page de titre,
   pas une photographie de chantier.
   Ce qui reste : le noir pur, la grande typographie, et une tige — un filet
   vertical qui monte du bas du cadre jusqu'au registre « 00 Entrée », de la
   lavande du cadre au pied jusqu'au bleu de la fleur en haut. Le bec verseur
   n'est pas perdu : il ouvre la fiche Westmount, où on le regarde en images.
   Voir README §21. */
.entry {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  overflow: hidden;
  isolation: isolate;
  /* Un aplat de noir, et rien d'autre : c'est le fond de la page lui-même. */
  background: var(--bg);
  color: var(--c-blanc);
  padding-top: calc(var(--header-h) + 2rem);
}

/* LA TIGE — RETIRÉE LE 24-09-2026.
   Un filet d'un pixel courait du pied du cadre au registre de chapitre, en
   dégradé du laiton vers le sable. Sur la plaque, la fleur de l'oiseau de
   paradis tenait ce rôle ; sur le site, la tige se lisait comme une barre
   latérale traversant toute la hauteur de l'écran — le seul ornement que
   l'ouverture portait encore. La cinquième passe la retire : l'ouverture est
   le titre, seul sur le noir. Le balisage (.entry__stem) et sa règle sont
   partis ensemble. Voir README §27. */

/* La couche de trame de plan de l'ouverture avait été retirée dès le
   21-09-2026 (ses douze filets d'un pixel se lisaient comme des rayures), et
   son bloc de balisage est retiré à son tour le 23-09-2026 — comme la
   photographie qu'il aurait pu doubler. */

.entry__shell {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* `.entry__top` — la rangée de l'étiquette d'ouverture, qui portait « Sutton ——
   Laurentides · Estrie · Montréal » — a été retirée le 26-09-2026 avec son
   balisage : la règle est partie en même temps, il n'y a plus rien à espacer
   là. Voir README §33. */

.entry__title {
  font-family: var(--font-display);
  font-size: var(--t-giga);
  line-height: 0.94;
  letter-spacing: -0.028em;
  font-weight: 300;
  margin: 0;
}

.entry__word {
  display: block;
  transform: translate3d(0, 0.42em, 0);
  opacity: 0;
  animation: riseWord var(--dur-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}

@keyframes riseWord {
  to { transform: none; opacity: 1; }
}

/* Les deux lignes en italique : l'accent de la plaque, tel quel. */
.entry__word--em {
  font-style: italic;
  color: var(--c-laiton);
  padding-left: clamp(0.5rem, 7vw, 8.5rem);
}

/* Le pied de l'ouverture tenait deux colonnes : les deux faits à une extrémité,
   les deux boutons à l'autre. Les boutons sont partis le 26-09-2026 (README
   §33). La disposition réelle du pied est en `flex` (05-brand.css, qui charge
   après cette feuille) : la grille déclarée ici n'a jamais été celle qui
   s'appliquait, elle part donc avec les boutons, et il ne reste que le filet et
   son air. */
.entry__foot {
  padding-top: clamp(1.2rem, 2.4vw, 2rem);
  border-top: var(--hairline) solid var(--plan-line-light);
}

/* `.entry__lede` — le paragraphe d'accroche de l'ouverture — et `.entry__aside`
   — la colonne qui portait ses coordonnées — n'ont plus de balisage pour les
   porter : ils sont partis avec la refonte de l'ouverture, et leurs règles
   suivent le mouvement le 26-09-2026, en même temps que les deux boutons. Ce
   qui reste de l'ouverture : le titre, et `.entry__meta` pour dire ce qu'il y a
   à voir. */

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  /* SIXIÈME PASSE, 26-09-2026 — la ligne se lit SUR la photographie : son
     ombre portée la décolle de l'image, sans aplat ni boîte. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 16px rgba(0, 0, 0, 0.7);
}

/* `.entry__actions` — la rangée des deux boutons de l'ouverture — a été retirée
   le 26-09-2026 avec eux : « Voir les réalisations » doublait le chapitre
   suivant, « Demander une rencontre » doublait le bouton de l'en-tête. Voir
   README §33. */

.entry__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1rem, 3vw, 2.4rem);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  writing-mode: vertical-rl;
}

/* Le repère de défilement passe à la lavande : lui aussi est un repère, pas un
   appel à l'action. */
.entry__cue i {
  display: block;
  width: 1px;
  height: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--c-sable), rgba(255, 255, 255, 0));
  animation: cueFall 2.8s var(--ease-io) infinite;
}

@keyframes cueFall {
  0% { transform: scaleY(0.2); transform-origin: 50% 0; opacity: 0.2; }
  45% { transform: scaleY(1); transform-origin: 50% 0; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: 50% 100%; opacity: 0; }
}

@media (max-width: 900px) {
  .entry {
    min-height: auto;
    padding-top: calc(var(--header-h) + 4.5rem);
  }
  .entry__cue { display: none; }
  .entry__word--em { padding-left: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .entry__word { opacity: 1; transform: none; animation: none; }
}


/* ============================================== TYPOGRAPHIE ÉDITORIALE MAJEURE */
.statement {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 300;
  line-height: 0.97;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 24ch;
}

.statement em { font-style: italic; color: var(--c-laiton); }
.statement--wide { max-width: 30ch; }
.statement--md { font-size: var(--t-ultra); max-width: 22ch; }
.statement--center { margin-inline: auto; text-align: center; max-width: 26ch; }

/* Bandeau technique : les chiffres du dossier, en petit.
   `.legend` et `.legend--light` ont été retirées le 26-09-2026 avec le chapitre
   « Le paysage » de l'accueil, leur seul usage : 30+ années de pratique,
   16 types de travaux, 3 régions desservies. Les chiffres n'existent plus dans
   le balisage, la règle part avec eux. */

/* ============================== RAIL DE CHAPITRES — RETIRÉ LE 23-09-2026
   Le panneau de verre à droite (mélange par différence avant lui) a été
   retiré du balisage avec ses six filets : il ne se lisait que sur bureau, au
   bord d'une page qui n'a plus de chapitres numérotés, et il fallait le
   tenir à l'écart des photographies. Son observateur est parti aussi
   (experience.js, `initChapterRail`). */

/* ========================================================= LÉGENDE DU TERRAIN */
.terrain-head {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
}

.terrain-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.terrain-hint {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 899px) {
  .terrain-hint--touch { display: flex; }
}

@media (min-width: 900px) {
  .terrain-hint--touch { display: none; }
}

.terrain-hint svg { width: 2rem; height: 0.8rem; }

.rail-bar {
  position: relative;
  height: 1px;
  background: var(--plan-line-light);
  overflow: hidden;
}

.rail-bar i {
  position: absolute;
  inset: 0;
  background: var(--c-laiton-clair);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform 0.15s linear;
}


/* ============================================ TERRAIN — EXPLORATION SPATIALE
   Un seul balisage, deux compositions : plan à partir de 900 px, rail
   glissant en dessous. Sans JavaScript, tout reste cliquable.
   Le plan dessiné ici — vingt-quatre colonnes sur vingt-cinq lignes, chaque
   parcelle posée par ses variables en ligne (--c / --cs / --r / --rs) — est
   celui d'origine. Depuis le 26-09-2026, 06-refonte.css le remplace à partir
   de 900 px par trois colonnes de même taille et remet grid-column / grid-row
   à auto : les positions en ligne ne sont donc plus lues par personne, mais
   elles restent dans index.html comme trace du plan dessiné. Les quatorzième
   et quinzième parcelles, Sutton et Bota Bota, l'ont étendu : Sutton ouvre la
   colonne 17 du rang 18 (aux côtés de Jardin Chinois, colonnes 1 à 8, et de
   Balnea, colonnes 9 à 16), et Bota Bota, ce rang étant plein, ouvre une bande
   de plus sous le plan — colonnes 9 à 16, lignes 22 à 25. */
.terrain {
  --row: clamp(1.7rem, 2.45vw, 2.7rem);
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-template-rows: repeat(25, var(--row));
  gap: clamp(0.4rem, 0.85vw, 0.85rem);
}

.tc {
  position: relative;
  display: block;
  grid-column: var(--c) / span var(--cs);
  grid-row: var(--r) / span var(--rs);
  overflow: hidden;
  background: var(--c-encre);
  color: var(--c-blanc);
  text-decoration: none;
  isolation: isolate;
}

.tc__frame {
  position: absolute;
  inset: -5% 0;
  display: block;
  overflow: hidden;
}

.tc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(0.5) contrast(1.03) brightness(0.92);
  transform: scale(1.01);
  transition: transform var(--dur-3) var(--ease), filter var(--dur-2) var(--ease);
  will-change: transform;
}

.tc__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.8) 100%);
  transition: opacity var(--dur-2) var(--ease);
}

.tc__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: 0.25rem;
  padding: clamp(0.75rem, 1.2vw, 1.2rem);
}

/* `.tc__idx` — le rang du projet sur le plan (« 01 » à « 10 ») — a été retiré
   le 23-09-2026 avec le reste de la numérotation : le nom du lieu nomme la
   tuile, la position sur le plan est donnée par le plan lui-même. */

.tc__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.tc__meta {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.tc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: var(--hairline) solid transparent;
  transition: border-color var(--dur-2) var(--ease);
  pointer-events: none;
}

@media (hover: hover) {
  .tc:hover .tc__img { transform: scale(1.06); filter: none; }
  .tc:hover .tc__meta { max-height: 3.2rem; opacity: 1; }
  .tc:hover::after { border-color: rgba(255, 255, 255, 0.8); }
}

.tc:focus-visible {
  outline: 2px solid var(--c-laiton);
  outline-offset: 3px;
}

.tc:focus-visible .tc__img { filter: none; }
.tc:focus-visible .tc__meta { max-height: 3.2rem; opacity: 1; }
.tc:focus-visible::after { border-color: var(--c-laiton); }

/* ------------------------------- TERRAIN : RAIL GLISSANT (tactile d'abord) */
@media (max-width: 899px) {
  .terrain-hint { display: flex; }

  .terrain {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    height: var(--rail-h);
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
  }

  .terrain::-webkit-scrollbar { display: none; }

  .tc {
    flex: 0 0 var(--rail-w);
    height: 100%;
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: center;
  }

  /* `tc--lead` — la première vignette du plan, deux fois plus large sur le
     plan (2 × 2) — a été retiré le 26 septembre 2026 : sur le rail comme sur
     le plan, les quinze vignettes ont la même largeur, --rail-w. */

  /* Sur écran tactile il n'y a pas de survol : la couleur et les
     métadonnées sont visibles d'emblée. */
  .tc__img { filter: grayscale(0.14) brightness(0.96); }
  .tc__meta { max-height: 3.2rem; opacity: 0.92; }
  .tc::after { border-color: rgba(255, 255, 255, 0.14); }
  .tc__name { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }

  .rail-bar { margin-top: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tc__img, .tc__meta, .tc::after, .tc__veil { transition: none; }
  .rail-bar i { transition: none; }
}




/* ============================================================== ATELIER — MAIN */
.craft {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: end;
}

.craft__media { position: relative; }

.craft__figure {
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.craft__offset { margin-top: clamp(-5rem, -5vw, -1.5rem); }

.craft__quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1.16;
  margin: 0 0 1.4rem;
  max-width: 26ch;
}

.craft__quote em { font-style: italic; color: var(--c-laiton-clair); }

.craft__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--rule);
}

.craft__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--t-small);
  color: var(--fg-muted);
}

.craft__list b {
  font-weight: 400;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .craft { grid-template-columns: minmax(0, 1fr); }
  .craft__offset { margin-top: 0; }
}

/* ================================ RÉALISATIONS — RÉGLAGES DE LA CARTE PROJET */
/* La pastille garde sa taille de 2026 : son filetage, pas sa boîte — le cadre
   a été retiré le 26-09-2026 (voir 03-components). */
.work-card__badge {
  padding: 0.9rem 1rem;
  font-size: 0.58rem;
}

.work-card__title {
  font-weight: 300;
  letter-spacing: -0.01em;
}

.work-card__meta {
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.work-card__meta i {
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: 0.3em;
  background: var(--accent);
}

.work-card__veil {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.72) 100%);
}

.work-card__frame { position: relative; }

.work-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--hairline) solid transparent;
  transition: border-color var(--dur-2) var(--ease);
  pointer-events: none;
}

.work-card:hover .work-card__frame::after,
.work-card:focus-within .work-card__frame::after {
  border-color: rgba(255, 255, 255, 0.8);
}

/* ================================================== FICHE PROJET — DÉTAILS */
.proj-hero__meta span,
.proj-hero__meta i { letter-spacing: 0.18em; }

.gallery__item { cursor: zoom-in; }

/* `.gallery__zoom` — le mot « Agrandir » posé sur chaque photographie — a été
   retiré avec son balisage le 26-09-2026 : la vignette entière est le lien, le
   curseur est un zoom, et le survol assombrit l'image (voir 03-components, où
   vivait sa règle). */

@media (prefers-reduced-motion: reduce) {
  .work-card__frame::after { transition: none; }
}


/* ============================================ INVITATION — FORMULAIRE DIALOGUE
   La dernière étape n'est pas un formulaire administratif : c'est le début
   d'un projet. Chaque étape est une question posée à voix haute. */
.invite__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}

.invite__title {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}

.invite__title em { font-style: italic; color: var(--c-laiton-clair); }
.invite__note { font-size: var(--t-small); color: var(--fg-muted); max-width: 34ch; }

.form.form--dialogue {
  display: grid;
  gap: 0;
  border-top: var(--hairline) solid var(--rule);
}

.form--dialogue .form__step {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.2rem, 2.6vw, 2rem);
  border-bottom: var(--hairline) solid var(--rule);
  align-items: start;
}

.form--dialogue .form__step--last { border-bottom: 0; }

.form--dialogue .form__row--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
}

@media (min-width: 701px) {
  .form--dialogue .form__row--2 .field:first-child:nth-last-child(3) { grid-column: 1 / -1; }
}

.dialogue__idx {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--accent);
}

.dialogue__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.05;
  margin-top: 0.35rem;
}

.dialogue__hint {
  display: block;
  margin: 0.45rem 0 0;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.form.form--dialogue .field__label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.35rem;
}

.form.form--dialogue .field__control {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule-strong);
  border-radius: 0;
  padding: 0.5rem 0 0.62rem;
  font-family: var(--font-sans);
  font-size: var(--t-lede);
  color: var(--fg);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.form.form--dialogue .field__control::placeholder {
  color: var(--fg-faint);
  font-size: var(--t-body);
}

.form.form--dialogue .field__control:focus {
  outline: 0;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.form.form--dialogue select.field__control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.75rem) 1.05rem, calc(100% - 0.4rem) 1.05rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.form.form--dialogue textarea.field__control {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.65;
}

.form.form--dialogue .field.field--error .field__control {
  border-bottom-color: #9c4a34;
  box-shadow: 0 1px 0 0 #9c4a34;
}

.form.form--dialogue .field__error {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c4a34;
}

.form.form--dialogue .checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: var(--t-small);
  color: var(--fg-muted);
  cursor: pointer;
}

.form.form--dialogue .checkbox input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--c-laiton);
}

.form.form--dialogue .form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  padding-top: clamp(1.2rem, 2.6vw, 2rem);
  border-top: var(--hairline) solid var(--rule);
}

.form.form--dialogue .form__status {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-muted);
  max-width: 42ch;
}

.req { color: var(--accent); margin-left: 0.2rem; }


/* ============================================ BANDEAU DÉFILÉ (pied de page) */
.marquee--band {
  border-top: var(--hairline) solid var(--plan-line-light);
  border-bottom: var(--hairline) solid var(--plan-line-light);
  background: var(--c-noir);
  color: var(--c-blanc);
  padding-block: clamp(0.7rem, 1.4vw, 1.05rem);
}

/* ============================================ INVITATION — LA PHOTO DE FIN
   Le dernier chapitre ne rejoue pas les etapes de l'approche : il montre
   l'heure du jardin que les plans ne dessinent pas. La colonne de droite est
   alignee sur le bas du bloc de gauche : la composition se termine sur une
   seule ligne de base, au lieu de laisser un vide sous la photographie. */
.invite__grid {
  align-items: end;
}

.invite__figure {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* ============================== PAGES INTÉRIEURES — RYTHME DU HÉROS DE PAGE
   Le héros de page et le chapitre suivant ne cumulent pas deux espacements
   de section : la respiration reste celle d'un magazine, pas d'un vide. */
.chapter:has(.page-hero) {
  padding-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* ================================ CHAPEAU DE CHAPITRE — TITRE ET LIEN DE SUITE
   Un titre et un lien de suite ne se partagent pas une ligne a parts egales :
   le lien vient s'aligner sur la derniere ligne du titre. En dessous de
   700 px, les deux s'empilent. */
.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
}

@media (max-width: 700px) {
  .chapter-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.chapter-head .link-quiet,
.chapter-head .lede {
  padding-bottom: 0.35rem;
}

/* ============================ LUMIÈRE DES CHAPITRES — CE QU'IL EN RESTE
   Cette section portait cinq couches de lumière, toutes en CSS. La revue du
   23-09-2026 n'en garde qu'une, celle qui ne se voit pas : l'étalonnage des
   photographies (vignettage et filet intérieur), plus bas dans cette feuille.

   Retirés d'ici : l'heure du chapitre (`--light-x` / `--light-y`, un dégradé
   radial par chapitre), la lumière feuillue (quatre taches de soleil animées
   sur 64 s), la pierre tuilée du fond (--tex-stone), la trame de plan des
   chapitres clairs et le balayage lumineux de l'ouverture. Sur un noir pur,
   la lumière ne peut plus venir du fond : elle vient des photographies, et
   d'elles seules. */
:root {
  /* Les jetons d'atmosphère ont été retirés avec leurs couches, le
     23-09-2026 : `--dapple-*` (les quatre taches de soleil sous les arbres,
     qui dérivaient en 64 s) et `--veil-*` (les voiles fondus des chapitres de
     nuit, du chapitre mousse et du pied de page). Sur un noir pur, un voile
     qui assombrit ne fait plus rien d'autre que poser une limite ; les taches
     de soleil, elles, demandaient 0,68 d'opacité pour être vues — c'est
     exactement ce qu'on ne veut plus. Voir « FOND — LE NOIR NU ». */

  /* Étalonnage photographique. Le vignettage et le filet intérieur restent ;
     le voile chaud (`--grade-warm`) part avec l'étalonnage ambré du
     23-09-2026 : les photographies gardent leur propre lumière. */
  --grade-vignette: rgba(9, 8, 6, 0.44);
  --grade-edge: rgba(9, 8, 6, 0.28);
}

/* Un chapitre n'a toujours aucun fond propre — la raison a changé le
   23-09-2026 : non plus parce que la pierre devait rester lisible dessous,
   mais parce que le fond du site est un noir pur et que rien, dans le flux de
   la page, ne doit peindre par-dessus. `isolation: isolate` reste : il garde
   l'étalonnage des photographies à l'intérieur du chapitre. */
.chapter {
  isolation: isolate;
}

/* ============================================ ZÉRO VOILE, ZÉRO TACHE DE SOLEIL
   Deux couches vivaient ici, retirées toutes les deux le 23-09-2026 :

     1. les voiles de chapitre et de pied de page (`.chapter--dark::after`,
        `.chapter--moss::after`, `.site-footer::before`) : des aplats fondus
        verticalement, posés pour creuser certaines surfaces sous la pierre du
        fond. Sur un noir pur, ils n'assombrissent plus rien — la nuit est
        déjà là — et un aplat qui n'assombrit rien ne fait plus que dessiner
        son bord ;
     2. la lumière feuillue (`.chapter::before`) : quatre taches de soleil très
        larges, animées en 64 s, qui donnaient au chapitre de la lumière
        d'extérieur. C'est l'effet le plus visible du site et le premier que la
        revue demande de retirer.

   Les chapitres `--dark` et `--moss` gardent leurs rôles de couleur
   (00-tokens) : ils restent lisibles à l'identique sur le noir commun, et le
   balisage n'a pas à changer. */

/* Étalonnage des photographies : il ne reste que le vignettage, et il devient
   donc le seul. Le voile ambré (`--grade-warm`) a été retiré le 23-09-2026 —
   posé en soft-light sur toutes les images du site, il teintait chaque
   photographie de la même lumière chaude. Le vignettage, lui, sert la lecture :
   il asseoit l'image sur le noir au lieu de la laisser flotter. Le filet
   intérieur donne l'épaisseur d'un tirage monté. */
.frame::after,
.tc__frame::after,
.member__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 104% at 50% 42%, rgba(18, 17, 14, 0) 48%, var(--grade-vignette) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

.proj-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(18, 17, 14, 0) 50%, var(--grade-vignette) 100%);
  mix-blend-mode: soft-light;
}

.frame {
  box-shadow: inset 0 0 0 1px var(--grade-edge);
}

/* Le pied de page n'a plus de source dorée propre : sous un fond noir pur,
   une lumière de pied de page serait un halo de plus. Il n'y en a plus. */

/* L'ouverture respire, elle ne clignote plus : `.entry::after` portait deux
   taches claires en `mix-blend-mode: screen`, animées sur 54 s. Retiré le
   23-09-2026 avec le reste de l'atmosphère — l'ouverture tient maintenant par
   sa photographie, son voile de lisibilité et sa typographie. */

/* --- 5. Typographie intégrée ---------------------------------------------
   Trois réglages seulement, mais ils font tout tenir ensemble :
   · les titres se coupent en lignes équilibrées au lieu de laisser un mot
     seul sur la dernière ligne ;
   · Cormorant reçoit ses ligatures et ses chiffres à l'ancienne, comme un
     livre — c'est ce qui sépare un serif d'un serif de qualité ;
   · toutes les petites capitales du site partagent la même approche
     (interlettrage et chiffres tabulaires) : étiquettes de chapitre,
     légendes, pied de page et rail parlent enfin d'une seule voix. */
h1, h2, h3, .statement, .invite__title, .footer__wordmark {
  text-wrap: balance;
}

.entry__title,
.statement,
.invite__title,
.footer__wordmark,
.craft__quote {
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "onum" 1;
  font-synthesis: none;
}

.label,
.label--accent,
.footer__col-title,
.footer__bottom,
.entry__meta,
.entry__marker,
.tc__meta,
.terrain-hint,
.dialogue__idx {
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* L'italique d'accent est la même partout : laiton, jamais deux fois
   la même teinte sur la page. */
.statement em,
.invite__title em,
.craft__quote em,
.entry__title em,
.lede em {
  font-style: italic;
  color: var(--accent);
}


/* ======================================================== UTILITAIRES NOUVEAUX */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-mt-5 { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.u-mt-6 { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* ====================================================== AJUSTEMENTS ÉCRANS */
@media (max-width: 900px) {
  .marquee--band { padding-block: 0.85rem; }
  .invite__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .form--dialogue .form__step { grid-template-columns: minmax(0, 1fr); }
  .form--dialogue .form__row--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================= CONTRASTE
   Mesuré sur capture : sur les fiches projet, le haut de la photographie
   laissait le texte d'en-tête à ~2,4:1. On prolonge le scrim d'en-tête et on
   donne au bouton d'appel son propre fond translucide. Ces deux règles servent
   aux pages qui ouvrent sur une image ; l'accueil, dont l'ouverture est noire,
   n'en a plus besoin — mais elles ne le gênent pas : sur du noir, un voile noir
   n'a rien à voiler. */
.site-header::before {
  inset: 0 0 -85% 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.56) 48%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Le voile de lisibilité de l'ouverture (`.entry__veil`) est retiré le
   23-09-2026 avec la photographie qu'il protégeait : il n'y a plus rien à
   voiler au-dessus du titre d'accueil. */

/* Le lockup texte de l'en-tête a été retiré le 23-09-2026 (voir
   02-layout.css) : la valeur de contraste qui lui était propre — 0,78 sur la
   ligne de métier — disparaît avec lui. */

/* Le lien de l'en-tête portait un fond noir translucide à flou de verre quand
   l'en-tête flottait sur la photographie, et rien sur les pages à en-tête plein.
   SIXIÈME PASSE, 26-09-2026 : les trois règles sont retirées avec la boîte qu'elles
   habillaient (voir 02-layout, « Le lien de l'en-tête »). Un filet sous le mot
   tient sur la photographie comme sur le noir — c'est même la raison du filet. */

.entry__meta { color: rgba(255, 255, 255, 0.9); }

/* ================================================= ENTRÉE — AJUSTEMENT AU CADRE
   Le titre doit tenir dans la première fenêtre, avec sa ligne de faits visible
   sous le filet. Depuis que l'ouverture n'a plus de photographie pour remplir
   le cadre, c'est le seul réglage qui l'empêche de déborder : un palier de
   hauteur de plus (960 px) couvre les portables 1440 × 900, les plus courants,
   où le titre plein format poussait le pied sous la ligne de flottaison. */
.entry {
  --t-giga: clamp(2.4rem, 0.5rem + 9vw, 7.6rem);
  padding-top: calc(var(--header-h) + 1rem);
}

.entry__shell { padding-bottom: clamp(1.75rem, 4vw, 3.5rem); }

@media (min-width: 901px) and (max-height: 960px) {
  .entry { --t-giga: clamp(2.2rem, 0.5rem + 6.4vw, 5.6rem); }
  .entry__shell { gap: clamp(1.1rem, 2.2vw, 2rem); }
}

@media (min-width: 901px) and (max-height: 820px) {
  .entry { --t-giga: clamp(2.1rem, 5.6vw, 4.4rem); }
  .entry__shell { gap: clamp(1rem, 2vw, 1.6rem); }
}

@media (min-width: 901px) and (max-height: 700px) {
  .entry { --t-giga: clamp(1.9rem, 4.6vw, 3.4rem); }
  .entry__cue { display: none; }
}

@media (max-width: 900px) {
  .entry__title { font-size: clamp(2.15rem, 10.6vw, 3.4rem); }
}

/* ============================================ TERRAIN — PROFONDEUR ET REPÈRES */
.terrain { padding-bottom: 0.25rem; }

@media (min-width: 900px) {
  .terrain-head__row { align-items: baseline; }
  .terrain-hint--pointer { display: flex; }
}

@media (max-width: 899px) {
  .terrain-hint--pointer { display: none; }
}

/* ============================================ CIBLES TACTILES ET DE POINTAGE
   Contrôle mesuré : plusieurs liens en ligne mesuraient 17 à 21 px de haut.
   On leur donne une boîte d'au moins 24 px sans changer la typographie.
   Le rail de chapitres, retiré le 23-09-2026, portait la même règle. */
.link-quiet,
.link-arrow,
.footer__list a,
.nav-overlay__foot a {
  display: inline-block;
  padding-block: 0.3rem;
}

.footer__list a { padding-block: 0.2rem; }

.footer__bottom p { margin: 0 0 0.3rem; }

/* ================================================= MOUVEMENT RÉDUIT — GARANTIE
   Quand le visiteur demande moins de mouvement : plus de curseur maison, plus
   de parallaxe, plus de titre qui monte, et tous les contenus restent
   visibles. */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .tc__veil,
  .rail-bar i { transition: none; }
  /* Ce qui reste animé tient en deux choses : les mots du titre d'ouverture,
     qui montent, et le repère de défilement, qui pulse. Les deux se figent. */
  .entry__word,
  .entry__cue i {
    animation: none !important;
  }
}

/* ================================== CIBLES DEVISÉES : 24 px MINIMUM PARTOUT
   Constat mesuré sur les captures : fil d'Ariane 19 px, coordonnées 13 px,
   case à cocher 18 px. On corrige la boîte, jamais la typographie. */
.crumbs { min-height: 1.5rem; }
.crumbs a { display: inline-block; padding-block: 0.25rem; }

.contact-list__v a,
.contact-list__sub a,
.label a,
.u-underlined,
.prose a,
.note-block a,
.footer__bottom a {
  display: inline-block;
  padding-block: 0.4rem;
}

.form.form--dialogue .checkbox input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
}












/* ============================================ OUVERTURE — REVUE DU 21-09-2026
   Constats mesurés sur les captures 1440 et 390, puis vérifiés à la sonde :
   1. sur la photographie d'ouverture, le libellé de marque tombait sur une
      pierre claire : le mot « Jasmin Garden Design » passait sous le seuil
      de lisibilité (contraste mesuré trop faible sur le ciel et le rocher) ;
   2. le même dessin de logo apparaissait deux fois à 120 px d'écart — le
      sceau du héros puis celui de l'en-tête — ce qui affaiblissait les deux ;
   3. le rail de chapitres, en melange de différence, disparaissait par
      plaques sur la photo et ne tenait qu'à 18 px du bord droit.
   Trois corrections : un voile de lisibilité au-dessus de la photo, un seul
   logo porté par l'en-tête, un rail en verre dont le libellé ne s'affiche
   que sur le chapitre courant. */

/* ------------------------------------------- 1. Lisibilité de l'en-tête photo */
.site-header:not([data-header="plain"]):not(.is-solid) .nav-link,
.site-header:not([data-header="plain"]):not(.is-solid) .nav-toggle {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Le logo unique de l'ouverture respire un peu plus, puisqu'il n'est plus
   concurrencé par un second sceau dans le corps du héros.
   La largeur passe par la variable, posée *sur l'en-tête* : les paliers de
   fenêtre étroite, déclarés sur la marque, gardent ainsi le dernier mot.
   7 rem font 112 px de côté, plus le remplissage du lien : la barre de
   128 px tient toujours.
   PLUS D'OMBRE PORTÉE sur la plaque depuis le 23-09-2026 : elle se lisait
   comme un liseré sale autour du carré — c'est-à-dire, exactement, une
   séparation. La plaque porte son propre filet crème et son propre fond noir ;
   elle tient sur la pierre comme sur la nuit, et à 112 px son cadre se voit
   seul. */
.site-header:not([data-header="plain"]):not(.is-solid) {
  --mark-w: 7rem;
}

/* Le sceau du héros a été retiré du balisage (un seul logo, porté par
   l'en-tête) : la règle .entry__seal d'origine a été supprimée avec lui. */

/* ------------------------------------- 2. Registre « Entrée » de l'ouverture */
/* Le « 00 » de l'ouverture — DM Serif Display, 1,9 rem, lavande — a été
   retiré le 23-09-2026 avec la numérotation : le repère ne porte plus que le
   mot, et la règle `.entry__marker b` est partie avec le balisage. */
.entry__marker {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Les étiquettes capitales de l'ouverture passent au bleu de la plaque. Le
   repère qui les ouvre (« Sutton ») reste à la lavande : le contraste demandé
   pour un texte de 11 px est de 8,0:1 pour le bleu, 9,4:1 pour la lavande —
   les deux tiennent, la hiérarchie est dans le rôle, pas dans la luminosité. */
.entry .label--accent { color: var(--c-laiton); }

.entry .label--accent .label__rule { opacity: 0.8; }

/* ============================== 3. RAIL DE CHAPITRES — RETIRÉ LE 23-09-2026
   Le panneau de verre avait remplacé le mélange par différence sur les
   photographies : ni l'un ni l'autre ne revient. La règle de base et celle-ci
   sont parties ensemble, avec le balisage (index.html) et l'observateur
   (experience.js, `initChapterRail`). */

/* ============================= 4. OUVERTURE — LE BANDEAU D'INDEX
   Un seul réglage reste ici, né du temps où l'ouverture était une
   photographie : le BANDEAU sous le titre. Il disait « Réalisation Westmount —
   fontaine murale en pierre sèche » : c'était la légende de l'image. Sans
   image, la légende n'a plus d'objet — le bandeau devient un index : ce qu'il
   y a à voir (quatorze réalisations, cent vingt-quatre photographies) et le lien
   pour y aller. Le dessin ne change pas (étiquette capitales, filet qui
   s'allonge au survol).

   Le BORD RÉSERVÉ à droite — 7 rem, pour que le libellé de lieu et les boutons
   ne croisent jamais le rail de chapitres — est parti avec le rail, le
   23-09-2026 : l'ouverture retrouve la même gouttière des deux côtés.

   Ce qui a vécu ici et n'y vit plus : le voile de lisibilité de la
   photographie (`.entry__veil`, quatre dégradés calibrés colonne par colonne)
   et son étalonnage (`.entry__img`) ; le film muet à deux pistes en relais
   (22 → 23-09-2026, expérience `initHeroFilm` dans experience.js) ; le grain
   et la trame de plan. L'ouverture est une page de titre noire. */
/* Bandeau d'index sous le titre : le compteur du portfolio et le lien qui y
   mène — ce que la légende de la photographie est devenue. */
.entry__credit {
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

.entry__credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.45rem;
  color: inherit;
  transition: color var(--dur-1) var(--ease);
}

.entry__credit a i {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--c-laiton);
  transition: width var(--dur-2) var(--ease);
}

.entry__credit a:hover,
.entry__credit a:focus-visible { color: var(--c-blanc); }

.entry__credit a:hover i,
.entry__credit a:focus-visible i { width: 2.6rem; }

/* Sous 900 px, le crédit se glisse sous la pile du titre. */
@media (max-width: 900px) {
  .entry__credit { margin-top: 0.2rem; }
}

/* Sur téléphone, le crédit se réduit au nom de la réalisation : la
   description complète se lit sur la fiche, et la ligne reste nette. */
@media (max-width: 700px) {
  .entry__credit a i,
  .entry__credit a span:last-child { display: none; }
}

/* ===================== 5. FICHES PROJET — EN-TÊTE SUR PHOTOGRAPHIE SOMBRE
   Constat : les fiches projet déclarent un en-tête « plain » (texte sombre,
   prévu pour les pages qui s'ouvraient sur fond clair). Or elles s'ouvrent
   sur une photographie de chantier : le texte encre se perdait sur la pierre
   et les liens de navigation devenaient illisibles.
   On rétablit, pour ces pages seulement, l'état d'en-tête clair avec son
   voile, comme sur l'ouverture de l'accueil. L'en-tête redevient opaque au
   premier défilement (seuil de 24 px, propre aux pages « plain »). */
body:has(.proj-hero) .site-header:not(.is-solid) {
  color: var(--c-blanc);
  /* Cinquième passe du 23-09-2026 — la barre devient un verre, comme celle du
     défilement. Le dégradé seul laissait les liens de navigation sous le seuil
     de lisibilité sur la pierre claire de Magog (la passe précédente avait
     mesuré 2,4:1 sur ce même haut de photographie, avant que le voile ne soit
     prolongé) : le flou étale le fond, l'aplat le fonce, et la barre se lit
     d'un seul tenant sans qu'aucun filet n'apparaisse. */
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

body:has(.proj-hero) .site-header:not(.is-solid)::before { opacity: 1; }

/* La plaque des fiches projet passe de 80 à 112 px, comme celle de l'ouverture.
   Le palier est borné à 641 px : au-dessus, la barre de 128 px la porte ; en
   dessous, les paliers de fenêtre étroite déclarés sur la marque reprennent la
   main — c'est le seul moyen, la déclaration d'ici étant plus spécifique. */
@media (min-width: 641px) {
  body:has(.proj-hero) .site-header:not(.is-solid) .brand__mark { --mark-w: 7rem; }
}

/* Le sceau carré de 2022 portait un filet clair pour tenir sur la photographie,
   et les fiches projet recevaient une ombre portée plus appuyée que
   l'ouverture, leur pierre étant plus claire. La plaque de 2026 n'a besoin ni
   de l'un ni de l'autre : elle porte son propre cadre crème, et depuis le
   23-09-2026 elle n'a plus AUCUNE ombre — une ombre autour du carré se lit
   comme une séparation. La règle d'ombre des fiches projet a donc été retirée
   avec celle de l'ouverture. */

/* Le lien de l'en-tête sur les fiches projet réglait sa bordure : la bordure a
   disparu avec la boîte (26-09-2026). Les liens de navigation, eux, gardent leur
   ombre portée sur la photographie. */

body:has(.proj-hero) .site-header:not(.is-solid) .nav-link,
body:has(.proj-hero) .site-header:not(.is-solid) .nav-toggle {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
}



/* ================================ MATIÈRE — CE QU'IL RESTE DU 21-09-2026
   La revue du 21-09-2026 avait donné au site trois matières, toutes en CSS.
   La revue du 23-09-2026 (second passage) en retire deux, et le film :

     1. le grain de pellicule posé au-dessus du contenu — retiré (voir
        « FOND — LE NOIR NU ») ;
     2. la pierre tuilée du fond de page — retirée, avec ses voiles de
        chapitre et ses taches de soleil ;
     3. le grain propre du film d'ouverture — retiré avec le film.

   Ce qui reste est exactement ce que la revue demande : le noir, les
   photographies, la typographie. Les images portent leur vignettage (voir
   « Étalonnage des photographies »), le noir porte le reste. */


/* Contraste des grands titres : un halo très lâche, comme une lettre gravée
   dans la nuit. Volontairement minuscule — au-delà de 5 %, il embue la
   lettre et fait perdre le gain de contraste qu'il devait apporter. */
.entry__title,
.page-hero__title {
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.05);
}

/* ==================================================== IMPRESSION — HYGIÈNE
   Il ne reste presque rien à neutraliser : les couches d'atmosphère ont été
   retirées le 23-09-2026, et l'ouverture n'a plus ni photographie ni trame de
   plan. On garde la règle sur les fonds de chapitre : aucune image de fond ne
   doit partir à l'impression. */
@media print {
  .chapter,
  .chapter--dark,
  .chapter--moss,
  .site-footer { background-image: none; }
}