/* Brin de Stef, maquette Didone chorégraphiée, compositions photo de l'accueil.
   Complément de index-didone-v1.css, chargé par index.html SEULEMENT.

   Pourquoi un fichier à part : ces trois blocs n'existent que sur l'accueil et
   n'apparaissent sur aucune autre page. Les poser ici évite d'alourdir la
   feuille du système, que les onze pages chargent.

   Les vraies prises de vue de la cliente sont arrivées le 2026-09-14 : lumière
   naturelle, travertin, lin écru, pampa. Elles remplacent les instantanés au
   présentoir en fil de fer. CONSÉQUENCE DIRECTE : les déclarations `filter`
   sépia qui corrigeaient les anciennes photos n'ont plus lieu d'être sur les
   images concernées, et sont neutralisées ci-dessous. Voir DESIGN.md, section
   Photographies.
   Aucun token redéfini, aucune couleur en dur hors variables. */

/* ------------------------------------------ NEUTRALISATION DES FILTRES */
/* Les nouvelles photos sont déjà chaudes et claires : les filtrer une
   seconde fois les délaverait. Le hero garde son mix-blend-mode multiply,
   qui est structurel, mais perd sa correction colorimétrique. */
#stage-hero .shot,
#stage-reveal .shot,
.gesture-frame img { filter: none; }

/* ==================================================================== */
/* HERO : ACCORD DU WORDMARK ET DE LA PHOTO. Révision 9, 2026-09-14.     */
/* ==================================================================== */
/* CE QUE LA RÉVISION 8 N'AVAIT PAS RÉGLÉ. Elle avait sorti le wordmark de la
   colonne de boucles d'oreilles en le poussant à gauche, mais elle l'avait
   laissé à sa place verticale, c'est-à-dire au milieu du cadre. Or au milieu
   du cadre, à gauche, il n'y a pas de vide : il y a le bois flotté (brun
   sombre, y 9 à 26 %) puis les deux bracelets à cordon noir posés sur le lin
   (y 42 à 65 %). Une Didone en encre presque noire traversait donc le bois
   flotté et les cordons. Le défaut signalé par la cliente avait changé de
   sujet, pas de nature.

   CE QUE LA PHOTO OFFRE RÉELLEMENT. Relevé sur le fichier (2750 x 1536) :
     - mur crème hors mise au point, plein cadre, de y 0 à 8 % ;
     - mur crème de x 0 à 41 %, de y 0 à 20 % ;
     - bois flotté et boucles suspendues : x 41 à 64 %, à partir de y 8 % ;
     - bol en grès : x 64 à 98 %, à partir de y 9 % ;
     - pampa, lin, bracelets, dalle de travertin : toute la moitié basse.
   La nature morte a donc sa réserve en HAUT À GAUCHE, un rectangle d'environ
   41 % de large sur 20 % de haut, uniformément clair, sans un détail dedans.
   C'est la place que la photographe a laissée. Le titre y va.

   CE QUE ÇA DONNE. Le nom se pose dans le mur comme une signature de nature
   morte, la bande de mobilier tient le bas, et tout l'entre-deux, bois flotté,
   boucles, bol, bracelets, améthyste, reste à la photo, entier et net. Plus
   rien ne se croise. C'est une composition en diagonale, du nom en haut à
   gauche jusqu'à l'améthyste en bas à droite, pas un titre posé au milieu. */

/* ---------------------------------------------------- VOILE DU HERO */
/* Le voile suit le titre : il devient une nappe de papier dans l'angle haut
   gauche, là où l'encre s'imprime, et s'éteint avant le bois flotté. Plus de
   bande médiane : elle délavait les bracelets pour rien, le titre n'est plus
   là. Un film général très léger reste, il accorde la photo au sable de la
   page sans la toucher. Même idiome que le voile d'encre de l'étage « Chaque
   pièce » plus bas : un seul geste sur le site, en papier ici, en encre là. */
.wash {
  background:
    /* nappe d'angle, calée sur la réserve du mur */
    radial-gradient(118% 62% at 4% -4%,
      rgba(247, 242, 233, .34) 0%,
      rgba(247, 242, 233, .19) 40%,
      transparent 72%),
    rgba(247, 242, 233, .10);
}
/* Mesure : encre --ink (#2A2119) sur le mur ainsi voilé, environ 12,5:1.
   On est très au-dessus de l'AA sans avoir posé la moindre plaque. */

/* -------------------------------------------------- CADRAGE DU HERO */
/* Le pansement de dézoom de la révision 6 reste retiré : la source fait
   2750 px de large, le hero est au traitement du système, plein cadre.
   Seul le point de cadrage est fixé ici.

   Le point monte de 45 % à 18 % sur l'axe Y. Ce réglage ne joue QUE sur les
   cadres plus larges que 1,79, c'est-à-dire les écrans larges et peu hauts,
   les seuls où le `cover` rogne verticalement. Sur ces cadres-là, rogner par
   le bas plutôt qu'au milieu préserve la réserve du mur, donc la place du
   titre ; ce qui part en bas, c'est la tranche de travertin, que la bande de
   mobilier recouvre de toute façon. Sur tous les autres cadres, la valeur est
   inerte et la photo est entière en hauteur.
   L'axe X descend à 42 % : une pointe de décentrement vers la gauche qui
   garde le lin et la pampa dans le cadre quand l'écran se resserre. */
#stage-hero .shot { object-position: 42% 18%; }

/* cadre en portrait, le cover ne garde plus qu'une colonne centrale de la
   photo : on la recentre vers la gauche pour conserver lin, bracelets et
   bois flotté plutôt que le seul bol. La hauteur est entière dans ce cas,
   la valeur Y n'a aucun effet. */
@media (max-width: 900px) { #stage-hero .shot { object-position: 42% 50%; } }
@media (max-width: 560px) { #stage-hero .shot { object-position: 34% 50%; } }

/* -------------------------------------------- PLACEMENT DU BLOC DE TITRE */
/* `.pin` est une grille en `place-items: center`. Le bloc remonte en haut du
   cadre par `align-self`, sans rien changer d'autre à la mécanique : le
   translateY et le fondu au scrub du système continuent de s'appliquer.
   La réserve d'en-tête est en svh, pas en px : elle se resserre avec le cadre
   au lieu de pousser le titre dans le bois flotté sur un écran bas. */
.hero-type {
  align-self: start;
  padding-top: clamp(14px, 4svh, 48px);
}

/* ------------------------------ COMPOSITION DU TITRE, À PARTIR DE 901 px */
/* Le bloc quitte l'axe central et s'aligne sur le montant gauche de la page,
   celui de la marque en haut à gauche de la navigation : une seule verticale
   porte le monogramme, le script et le wordmark.

   Le budget de largeur passe de 54vw à 38vw, la largeur de la réserve moins
   la gouttière. Ce n'est pas une réduction par frilosité, c'est la mesure de
   la place disponible : au-delà, les deux dernières lettres montent sur le
   bois flotté et on retombe exactement sur le défaut d'origine. Le wordmark
   fait encore 76 px de corps à 1440 px et 92 px à 1750 px, seul en haut d'un
   cadre vide : il a toute sa présence parce qu'il n'a plus de concurrence,
   pas parce qu'il est gros.

   Sous 901 px le cadre est en portrait, le `cover` ne garde qu'une colonne de
   la photo et les boucles sortent du cadre : le titre reprend l'axe central
   et toute la largeur, comme avant. Il reste en haut, le mur y est aussi. */
@media (min-width: 901px) {
  .hero-type { text-align: left; }
  .hero-sur {
    display: inline-block;
    transform-origin: 0 100%;
    /* le script est calé sur la même verticale que le B du wordmark, à
       l'approche près de la Caveat */
    margin-left: -.06em;
  }
  .wordmark {
    /* 12 signes, avance moyenne Didone environ .60em, budget de largeur 38vw */
    font-size: min(clamp(3.5rem, 34vw, 20rem), calc(38vw / (12 * .60)));
  }
}

/* Pas d'ombre portée ni de plaque sous le wordmark : le charme de ce hero
   tient au `mix-blend-mode: multiply`, qui fait entrer l'encre dans la
   matière du mur. Une ombre la remettrait au-dessus, en autocollant, et une
   plaque en ferait une bannière commerciale. La réserve du mur et la nappe
   d'angle font le travail de lisibilité sans sortir le mot de l'image. */

/* ==================================================================== */
/* ÉTAGE « CHAQUE PIÈCE » : LISIBILITÉ DE LA LÉGENDE                     */
/* ==================================================================== */
/* Le triptyque est une photo claire de bout en bout : travertin crème, lin
   écru, peau. La légende en bas à gauche est en sable (--sand-50), héritée du
   temps où `filter: brightness(1.18)` ne suffisait pas à éclaircir une photo
   sombre. Depuis la neutralisation des filtres plus haut, elle serait en crème
   sur crème : contraste voisin de 1,2:1, illisible.

   Deuxième défaut, moins visible sur une capture : la légende apparaît à
   partir de p = 0,45 du scrub, alors que le volet d'image n'est descendu qu'à
   45 % de la hauteur. Pendant la moitié de sa vie, elle est donc posée non pas
   sur la photo mais sur le fond de page en sable. Crème sur crème, encore.

   Remède : un voile d'encre sur le coin bas gauche du cadre épinglé, qui
   arrive avec la légende et suit exactement la même courbe d'opacité. Il
   couvre donc les deux cas, fond de page comme photo. Pas de plaque : c'est un
   dégradé qui s'éteint avant le tiers droit (masque horizontal), pour que le
   troisième volet du triptyque, la cheville, reste dans sa lumière. */
#stage-reveal .pin::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(33, 30, 21, .74) 0%,
    rgba(33, 30, 21, .68) 22%,
    rgba(33, 30, 21, .30) 38%,
    transparent 56%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 46%, transparent 82%);
          mask-image: linear-gradient(to right, #000 0%, #000 46%, transparent 82%);
  opacity: clamp(0, calc((var(--p, 0) - .45) * 4), 1);
}

/* Mesures refaites sur la photo réelle (travertin relevé à #E8E0D2) comme sur
   le fond sable, en composant le voile au niveau exact de chaque ligne :
   titre en petites capitales sable, dans la bande 0 à 22 % du bas, 5,96:1 ;
   paragraphe sable à 92 % d'opacité, 5,35:1. AA tenu sur les deux, sans noir
   dur : le voile plafonne à 74 % d'encre et laisse la matière de la pierre. */

@media (max-width: 700px) {
  /* en colonne étroite la légende est plus haute et plus large : le voile
     monte plus haut et le masque horizontal disparaît, sinon les fins de
     ligne sortent de la zone protégée. Vérifié à 320 px. */
  #stage-reveal .pin::after {
    background: linear-gradient(to top,
      rgba(33, 30, 21, .78) 0%,
      rgba(33, 30, 21, .70) 44%,
      rgba(33, 30, 21, .32) 62%,
      transparent 80%);
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* --------------------------------- ÉCHELLE DU TITRE DE LA RÉVÉLATION */
/* Conséquence directe du hero. Le wordmark étant maintenant mesuré sur la
   réserve du mur (76 px à 1440), un titre de section à 8,2vw (102 px à 1440)
   passerait devant le nom de la marque dans la hiérarchie de la page : le h2
   crierait plus fort que le h1. Il redescend à 5vw, plafonné à 4,4rem, soit
   72 px à 1440 et 87 px à 1750, toujours sous le wordmark aux deux tailles.

   Sur mobile, rien ne bouge : c'est le plancher de 2,2rem qui gouvernait déjà
   sous 440 px de large, et il est conservé tel quel.

   Cette règle vit ici et pas dans la feuille du système : `#stage-reveal`
   n'existe que sur l'accueil, les dix autres pages n'ont pas à porter ce
   réglage. Aucun token n'est touché. */
.reveal-title { font-size: clamp(2.2rem, 5vw, 4.4rem); }

/* Le titre reste en `#fff` + `mix-blend-mode: difference`, vérifié et gardé :
   le triptyque est clair partout (travertin, lin, peau), la différence rend
   donc une encre sombre sur toute la largeur du mot, et elle s'inverse d'elle-
   même sur le cordon noir. C'est le seul endroit du site où un texte n'a pas
   de couleur fixe, et c'est justifié : la photo défile derrière lui pendant
   l'essuyage. Pas de voile ajouté sous ce titre, il n'en a pas besoin. */

/* ------------------------------------------------ DÉZOOM DU « GESTE » */
/* Révision 6, conservée : brin_Le geste.jpg est toujours en 512 x 512 px.
   Le fichier est carré, le cadre était en 4/5. Le cadre passe au carré, la
   coupe latérale disparaît entièrement et le cadre est plus petit à largeur
   de colonne égale, donc moins agrandi. L'échelle d'entrée passe de 1.08 à
   1.03 : la photo se pose toujours, mais sans partir zoomée. */
.gesture-frame { aspect-ratio: 1 / 1; }
.gesture-frame img { transform: scale(calc(1.03 - .03 * var(--p, 0))); }

/* ------------------------------- PLANCHE DE LA BANDE « DÉCLARATION » */
/* Une image large posée sous la déclaration, sans cadre ni ombre : un filet
   au-dessus, une légende en mobilier en dessous. Pas d'étage épinglé, pas de
   scrub : la bande reste une bande. */
.plate {
  margin: clamp(36px, 5vw, 64px) 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(18px, 2.4vw, 26px);
}
.plate-frame {
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand-200);
}
.plate-frame img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; color: var(--ink-faint);
}

/* ------------------------------- INVITATION EN BAS DE L'INDEX ILLUSTRÉ */
/* .shop-note existe déjà dans le système, en ligne bouton plus texte. Ici
   elle accueille en plus une petite image, volontairement petite : le
   fichier fourni est en basse résolution, on ne l'agrandit pas. */
.shop-note { align-items: stretch; }
.note-frame {
  flex: 0 0 clamp(160px, 24vw, 260px);
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand-200);
  order: -1;
}
.note-frame img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .note-frame { flex-basis: 100%; }
  .plate-frame { aspect-ratio: 4 / 3; }
  /* le système passait ce cadre en 16/10, ce qui coupait 37 % de la hauteur
     d'un fichier carré. Le 4/3 n'en coupe que 25 % et tient encore dans un
     écran de 568 px de haut avec le titre et les quatre étapes. */
  .gesture-frame { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------- MOUVEMENT RÉDUIT */
/* Le système remet déjà transform:none sur les trois images. Comme cette
   feuille est chargée après lui et redéfinit le transform du « geste », il
   faut le redire ici pour le geste seul. Le hero, lui, ne redéfinit plus
   aucun transform : la règle du système s'applique sans rappel.

   Le système passe aussi `.pin` en `position: static` et lui rend une hauteur
   automatique : le bloc de titre n'est alors plus un élément de grille centré
   mais un bloc dans le flux. `align-self` devient inerte tout seul, et la
   réserve d'en-tête en svh n'a plus de sens dans un cadre sans photo de fond :
   on la remet à zéro.

   Deux rappels pour le voile d'encre du triptyque :
   1. il est piloté par --p, qui vaut 0 sans scrub : on le force à 1, sinon la
      légende redevient illisible ;
   2. le système passe .pin en `position: static` ici, ce qui priverait le
      pseudo-élément de son repère : on le repasse en `relative`, qui ne change
      rien au flux mais lui rend son cadre. */
@media (prefers-reduced-motion: reduce) {
  .hero-type { padding-top: 0; }
  .gesture-frame img { transform: none; }
  #stage-reveal .pin { position: relative; }
  #stage-reveal .pin::after { opacity: 1; }
}