/* Fox & Mama, refonte 2026, v3 « musée vivant ».
   Site vitrine (pas de boutique). Photos entières, tissus de la marque en fond, orange du logo.
   Le moteur (scrollcraft.css) n'est pas modifié : jetons seulement. */

/* Figtree, choisie par Max le 07/10/2026 (titres et texte). Le nom est porté par le logo dessiné. */
@font-face {
  font-family: "Figtree"; font-style: normal; font-display: swap;
  src: url("fonts/figtree-normal-latin.woff2") format("woff2"); font-weight: 300 900;
}
@font-face {
  font-family: "Figtree"; font-style: italic; font-display: swap;
  src: url("fonts/figtree-italic-latin.woff2") format("woff2"); font-weight: 300 900;
}

:root {
  --sc-canvas:     #EFE8DD;
  --sc-surface:    #F8F4ED;
  --sc-ink:        #241B13;
  --sc-ink-soft:   #534330;   /* 5,5:1 sur le fil le plus foncé du tissu lin */
  --sc-accent:     #F79335;   /* l'orange du renard, prélevé sur le logo */
  --sc-accent-ink: #2A1606;
  --sc-font-display: "Figtree", system-ui, sans-serif;
  --sc-font-text:    "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 30 30% 30%;
  --sc-hairline: hsl(30 25% 25% / 0.14);

  --orange-texte: #9A3F0C;   /* même orange, assombri pour le petit texte sur fond clair */
  --passe: #FBF8F2;          /* le passe-partout des photos */
  --tissu-lin:    url("assets/tissu-lin.webp");
  --tissu-sable:  url("assets/tissu-sable.webp");
  --tissu-blanc:  url("assets/tissu-blanc.webp");
  --tissu-orange: url("assets/tissu-orange.webp");
  --barre-h: 6.2rem;
  /* Une étoffe par section, toutes tirées des photos et fichiers de Fox & Mama (_outils/tissus.py).
     Affichées à la MOITIÉ de leur taille en pixels : nettes en haute densité, jamais agrandies. */
  --e-entree:  url("assets/etoffes/s-entree.webp")  0 0 / 262px 34.5px;  /* pied-de-poule, sous le Basset */
  --e-salles:  url("assets/etoffes/s-salles.webp")  0 0 / 175px 175px;   /* tapis de laine, sous le Chat, assombri */
  --e-reserve: url("assets/etoffes/s-reserve.webp") 0 0 / 180px 180px;   /* tissu fleuri, sous le Hérisson */
  --e-mama:    url("assets/etoffes/s-mama.webp")    0 0 / 131.5px 144.5px; /* chevron de la grille des prix (motif d'origine du PDF) */
  --e-famille: url("assets/etoffes/s-famille.webp") 0 0 / 113px 113px;   /* tweed du logo, assombri, trame fine */
  --e-voyages: url("assets/etoffes/s-voyages.webp") 0 0 / 86px 260px;    /* tricot rouge, sous le Lapin */
  --e-sortie:  url("assets/etoffes/s-sortie.webp")  0 0 / 86px 260px;    /* tricot, à l'orange du renard */
  /* Le logo : même tissu que la page, détaché par une ombre portée (demande de Max). */
  --logo-ombre: drop-shadow(3px 6px 6px hsl(28 40% 22% / 0.28)) drop-shadow(8px 16px 18px hsl(28 40% 22% / 0.18));
  --cadre-ombre: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 12px 30px -10px hsl(var(--sc-shadow-color) / 0.35);
}

body { background: var(--sc-canvas) var(--tissu-lin); background-size: 168px 185px; }
:focus-visible { outline-color: var(--orange-texte); }
img { user-select: none; -webkit-user-drag: none; }

/* --------------------------------------------------------- vocabulaire -- */
.etiquette {
  margin: 0; display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--sc-ink-soft);
}
.titre {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.texte { margin: 0; max-width: 44ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.texte--grand { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.6em; padding: 0.5rem 0; justify-self: start;
  background: none; border: 0; cursor: pointer; color: var(--sc-ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em;
}
.lien-fleche::after { content: "→"; transition: translate 160ms var(--sc-ease-out); }
.lien-fleche--retour::after { content: none; }
.lien-fleche--retour::before { content: "←"; transition: translate 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .lien-fleche--retour:hover::before { translate: -4px 0; } }
@media (hover: hover) and (pointer: fine) { .lien-fleche:hover::after { translate: 4px 0; } }
.fermer {
  min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; cursor: pointer;
  border: 0; background: var(--sc-surface); color: var(--sc-ink); font-weight: 500; box-shadow: var(--cadre-ombre);
}

/* Le cadre de musée : la photo entière sur un passe-partout. */
.cadre { margin: 0; }
.cadre .vue, .salle__cadre .vue, .piece__cadre .vue {
  display: inline-block; position: relative; line-height: 0;
  --pad: clamp(6px, 0.7vw, 12px);
  background: var(--passe); padding: var(--pad);
  box-shadow: var(--cadre-ombre);
}
.vue > img { max-width: 100%; height: auto; }
.cadre figcaption {
  margin-top: 0.7rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft);
}

/* ---------------------------------------------------- les yeux vivants -- */
.vue--detouree, .bete { position: relative; display: block; line-height: 0; }
.vue--detouree > img, .bete > img { width: 100%; height: auto; max-width: none; }
/* Les yeux se posent sur l'image elle-même (couche .yeux calée sur l'img, passe-partout exclu). */
.yeux { position: absolute; inset: var(--pad, 0); pointer-events: none; }
.oeil { position: absolute; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%; }
.pupille {
  position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 38% 34%, #3b3631 0, #141110 58%, #0c0a09 100%);
  box-shadow: 0 0.5px 1px rgb(0 0 0 / 0.35); will-change: transform;
}
.pupille::after {
  content: ""; position: absolute; width: 26%; height: 26%; left: 22%; top: 18%;
  border-radius: 50%; background: rgb(255 255 255 / 0.85);
}

/* ------------------------------------------------------------- barre -- */
.evite {
  position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-surface); transform: translateY(-200%);
}
.evite:focus-visible { transform: none; }
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--barre-h);
  display: flex; align-items: center; gap: var(--sc-6); padding-inline: var(--sc-gutter);
  --monte: 0px;
}
/* Le fond de la barre : une pièce de tissu clair (chevron blanc) coupée droit, avec les petites
   imperfections d'une coupe aux ciseaux, qui s'arrondit autour du logo. Dessinée en SVG par page.js
   (barreTissu) d'après la position réelle du logo, à chaque image pendant la réduction :
   la coupe passe sous le logo (10 % de débord), la couture fine suit le bord à 5 px, l'ombre dessous. */
.barre > .barre__tissu {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--barre-h) + 48px);
  z-index: -1; pointer-events: none; overflow: visible;
  transform: none; transition: none;
  filter: drop-shadow(0 2px 2.5px hsl(28 40% 14% / 0.26)) drop-shadow(0 6px 10px hsl(28 40% 14% / 0.12));
}
.barre__couture { fill: none; stroke: hsl(32 22% 58% / 0.85); stroke-width: 1.3; stroke-dasharray: 6 5; stroke-linecap: round; }
.barre > * { transition: transform 320ms var(--sc-ease-out); transform: translate3d(0, var(--monte), 0); }
body.barre-reduite .barre { --monte: calc(var(--barre-h) * -0.19); }
/* Le logo, posé sur la barre : seuls ses 10 % du bas dépassent sous la coupe (--barre-h + 4 px).
   La réduction se fait autour de ce point (transform-origin 0 90 %) : le débord reste de 10 %. */
.barre { --logo: 6.5rem; }
.barre__marque { align-self: flex-start; margin-right: auto; margin-top: calc(var(--barre-h) + 4px - var(--logo) * 0.9); border-radius: 50%; }
.barre > .barre__marque { transform: translate3d(0, calc(var(--monte) * 2), 0); }
.barre__marque img { display: block; width: var(--logo); height: var(--logo); transition: transform 320ms var(--sc-ease-out); transform-origin: 0 90%; }
body.barre-reduite .barre__marque img { transform: scale(0.62); }
.barre__nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.barre__nav a {
  text-decoration: none; font-size: 0.9rem; padding-block: 0.5rem;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 0 2px no-repeat;
  transition: background-size 220ms var(--sc-ease-out);
}
.barre__nav a[aria-current="true"] { background-size: 100% 2px; }
@media (hover: hover) and (pointer: fine) { .barre__nav a:hover { background-size: 100% 2px; } }
.barre__plan {
  min-height: 2.6rem; padding: 0 1.15rem; border-radius: 999px; cursor: pointer; font-weight: 500; font-size: 0.9rem;
  background: var(--sc-ink); color: var(--sc-surface); border: 0;
  transition: background-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.barre__plan:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .barre__plan:hover { background: #3A2C1F; } }

/* ------------------------------------------------------------ 1 · entrée -- */
.entree { --p: var(--sc-p, 0); background: var(--e-entree), var(--sc-canvas); --sc-ink-soft: #2E2418; }
.entree > * { position: absolute; }
.entree__mur {
  inset: -10% 0 0 0; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 62% 30%, hsl(40 100% 98% / 0.3), transparent 70%);
  transform: translate3d(0, calc(var(--p) * -30px), 0);
}
.entree__titre {
  z-index: 2; left: var(--sc-gutter); top: calc(var(--barre-h) + 5vh); width: min(40rem, 44vw);
  transform: translate3d(0, calc(var(--p) * -50px), 0) scale(calc(1 - var(--p) * 0.06));
  transform-origin: 0 0; opacity: clamp(0, calc(1 - var(--p) * 1.25), 1);
}
.entree__accroche {
  margin: 1.2rem 0 0; font-weight: 600; font-size: clamp(2.8rem, 1.4rem + 4.4vw, 6.2rem);
  line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance;
}
.entree__intro { margin: 1.4rem 0 0; max-width: 30ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }
.cadre--loin {
  z-index: 1; right: calc(var(--sc-gutter) + 1vw); top: calc(var(--barre-h) + 1vh); width: 11vw;
  transform: translate3d(0, calc(var(--p) * -40px), 0);
}
.cadre--centre {
  z-index: 3; left: 52vw; top: 40vh; width: 40vw;
  transform: translate3d(0, calc(var(--p) * -110px), 0) scale(calc(1 + var(--p) * 0.04));
}
.cadre--pres {
  z-index: 4; left: calc(var(--sc-gutter) + 2vw); bottom: -9vh; width: 27vw;
  transform: translate3d(0, calc(var(--p) * -260px), 0);
}
.cadre--loin .vue, .cadre--centre .vue, .cadre--pres .vue { width: 100%; }
.cadre--loin .vue > img, .cadre--centre .vue > img, .cadre--pres .vue > img { width: 100%; }
.entree__premier {
  z-index: 5; right: -3vw; bottom: -17vw; width: min(26vw, 30rem); filter: blur(1.2px);
  transform: translate3d(0, calc(var(--p) * -320px), 0) rotate(-8deg);
}

/* -------------------------------------------------------- 2 · collection -- */
.collection {
  padding-top: var(--sc-section); background: var(--e-salles), #2A251F;
  --sc-ink: #F4EEE4; --sc-ink-soft: #E2D8C6; color: var(--sc-ink);   /* 8,4:1 et 6,8:1 sur le fil le plus clair */
}
.collection__tete { display: grid; gap: 1.2rem; }
.collection__tete .titre { max-width: 16ch; }
.salle { padding-block: clamp(3.5rem, 8vw, 8rem); }
.salle__grille {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center;
}
.salle__oeuvre { margin: 0; grid-column: 1 / 9; display: flex; justify-content: center; }
.salle__cartel { grid-column: 9 / 13; display: grid; gap: 1.1rem; align-content: center; }
.salle--d .salle__oeuvre { grid-column: 5 / 13; order: 2; }
.salle--d .salle__cartel { grid-column: 1 / 5; order: 1; }
.salle__cadre { border: 0; padding: 0; background: none; cursor: zoom-in; max-width: 100%; }
.salle__cadre .vue > img { max-height: 74vh; width: auto; transition: opacity 180ms var(--sc-ease-out); }
.salle__cadre .vue.change > img { opacity: 0.15; }
@media (hover: hover) and (pointer: fine) {
  .salle__cadre .vue { transition: translate 260ms var(--sc-ease-out), box-shadow 260ms var(--sc-ease-out); }
  .salle__cadre:hover .vue { translate: 0 -4px; box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.12), 0 22px 40px -14px hsl(var(--sc-shadow-color) / 0.4); }
}
.salle__nom {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em;
}
.salle__mot { margin: 0; font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.salle__faits { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; font-variant-numeric: tabular-nums; }
.salle__faits li { display: grid; gap: 0.1rem; }
.salle__faits span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.salle__vignettes, .visionneuse__vignettes { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.vignette {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer; border-radius: 2px; overflow: hidden;
  background: var(--passe); outline: 2px solid transparent; outline-offset: 2px; opacity: 0.72;
  transition: opacity 160ms var(--sc-ease-out), outline-color 160ms var(--sc-ease-out);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette[aria-current="true"] { outline-color: var(--sc-accent); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .vignette:hover { opacity: 1; } }
.vignette:focus-visible { outline-color: var(--orange-texte); opacity: 1; }

/* ---------------------------------------------- 3 · toutes les créatures -- */
.reserve { background: var(--e-reserve), var(--sc-surface); }
.rail {
  list-style: none; margin: 0; height: 100%; width: max-content; align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem); padding: var(--barre-h) var(--sc-gutter) 2rem;
}
.rail__tete { flex: none; width: min(26rem, 80vw); display: grid; gap: 1.2rem; }
.rail__fin { flex: none; width: min(22rem, 76vw); }
.piece { flex: none; }
.piece__cadre {
  display: grid; justify-items: start; gap: 0.35rem; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; color: inherit;
}
.piece__cadre .vue > img { height: min(46vh, 26rem); width: auto; max-width: none; }
.piece__nom { margin-top: 0.8rem; font-weight: 600; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.02em; }
.piece__vues { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .piece__cadre .vue { transition: translate 260ms var(--sc-ease-out); }
  .piece__cadre:hover .vue { translate: 0 -6px; }
}

/* --------------------------------------------------------- 4 · la Mama -- */
.mama { background: var(--e-mama), var(--sc-canvas); }
.mama__grille { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.mama__logo { width: clamp(12rem, 26vw, 24rem); height: auto; filter: var(--logo-ombre); }
.mama .sc-stack > * + * { margin-top: 1.4rem; }

/* --------------------------------------------------------- 5 · la famille -- */
/* Une section qui défile normalement (plus d'épinglage) : le titre et l'interrupteur au-dessus,
   la vitrine sur le reste de l'écran, la phrase dessous. La vitrine mesure sa propre hauteur
   (container-type) : les peluches se règlent dessus. */
.famille {
  background: var(--e-famille), #17140F; --sc-ink: #F4EEE4; --sc-ink-soft: #D9CDB8; color: var(--sc-ink);
  height: max(100svh, 40rem); box-sizing: border-box;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(0.8rem, 2vh, 1.4rem);
  padding: calc(var(--barre-h) + 1.4rem) var(--sc-gutter) clamp(1rem, 2.4vh, 1.8rem);
}
.famille__titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.famille__titre .etiquette { margin-bottom: 0.5rem; }
.titre--vitrine { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); }
/* Le meuble : un cadre peint (--cadre), un intérieur profond (--prof) dont on voit le plafond,
   le sol et les côtés en perspective, fond uni sans texture. Deux portes vitrées, accrochées au cadre,
   s'ouvrent vers le visiteur pendant le défilement (page.js écrit --ouv, de 0 à 1). */
.meuble {
  position: relative; z-index: 2; min-height: 0;
  --cadre: clamp(8px, 0.9vw, 13px); --prof: clamp(16px, 2.6vw, 40px);
  border: var(--cadre) solid #F1EBE1; border-radius: 3px;
  box-shadow: inset 0 0 0 1px hsl(30 25% 40% / 0.25), 0 1px 0 hsl(40 40% 98% / 0.5), 0 22px 44px -20px hsl(0 0% 0% / 0.75);
}
.vitrine {
  position: relative; height: 100%; container-type: size; overflow: hidden;
  background:
    radial-gradient(ellipse 22% 34% at 18% 0%, hsl(42 100% 99% / 0.55), transparent 70%),
    radial-gradient(ellipse 22% 34% at 50% 0%, hsl(42 100% 99% / 0.55), transparent 70%),
    radial-gradient(ellipse 22% 34% at 82% 0%, hsl(42 100% 99% / 0.55), transparent 70%),
    #EEE7DB;
}
/* Le volume (murs, plafond et ses lampes, sol, étagères en profondeur, ombres) : un SVG dessiné
   par page.js (vitrineVolume) sur une seule perspective, calée sur la position réelle des peluches. */
.vitrine__volume { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: filter 420ms var(--sc-ease-out); }
.portes { position: absolute; inset: 0; z-index: 3; pointer-events: none; perspective: 3200px; }
.porte {
  position: absolute; top: 0; bottom: 0; width: 50%; box-sizing: border-box;
  border: clamp(5px, 0.6vw, 9px) solid #F1EBE1;
  background:
    linear-gradient(118deg, transparent 18%, hsl(0 0% 100% / 0.26) 30%, hsl(0 0% 100% / 0.06) 38%, transparent 52%, hsl(0 0% 100% / 0.14) 68%, transparent 76%),
    hsl(180 25% 92% / 0.07);
  box-shadow: inset 0 0 0 1px hsl(30 25% 40% / 0.2), 0 0 0 1px hsl(30 25% 40% / 0.15);
  will-change: transform;
}
.porte::after { content: ""; position: absolute; top: calc(50% - 1rem); width: 4px; height: 2rem; border-radius: 2px; background: #C9BCA8; }
.porte--g { left: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--ouv, 0) * -96deg)); }
.porte--g::after { right: 5px; }
.porte--d { right: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--ouv, 0) * 96deg)); }
.porte--d::after { left: 5px; }
.vitrine__rayons {
  position: relative; list-style: none; margin: 0; padding: calc(var(--prof) + 2.4cqh) calc(var(--prof) + 1.5vw) calc(var(--prof) + 16px); height: 100%; box-sizing: border-box;
  z-index: 1; display: grid; grid-template-rows: repeat(3, 1fr); row-gap: 14px;
  --rayon-h: calc((97.6cqh - 2 * var(--prof) - 44px) / 3 * 0.84);
}
.rayon { position: relative; display: flex; justify-content: space-evenly; align-items: flex-end; padding-bottom: 6px; }
.rayon::after {
  display: none; content: ""; position: absolute; left: -1.5vw; right: -1.5vw; bottom: 0; height: 6px; background: #FFFDF9;
  box-shadow: 0 1px 0 hsl(30 20% 70%), 0 12px 18px -10px hsl(var(--sc-shadow-color) / 0.45);
}
.bete--f {
  border: 0; padding: 0; background: none; cursor: zoom-in; color: inherit; margin-bottom: -1px;
  filter: drop-shadow(0 6px 6px hsl(var(--sc-shadow-color) / 0.3)); transition: translate 220ms var(--sc-ease-out);
}
.bete--f > img { height: calc(var(--rayon-h) * var(--h, 1)); width: auto; }
@media (hover: hover) and (pointer: fine) { .bete--f:hover { translate: 0 -6px; } }
.bete--f:focus-visible { outline-offset: 6px; }
.famille__arret {
  margin: 0; text-align: center;
  font-weight: 500; font-style: italic; font-size: var(--sc-t-lg);
}
.famille__etiquette {
  position: absolute; z-index: 4; left: 50%; bottom: 2.2vh; margin: 0; translate: -50% 0;
  background: var(--sc-ink); color: var(--sc-surface); padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.9rem; white-space: nowrap; opacity: 0; transition: opacity 160ms var(--sc-ease-out);
}
.famille__etiquette.est-la { opacity: 1; }

/* ----------------------------------------------------------- 6 · voyages -- */
.voyages { overflow-x: clip; overflow-y: visible; background: var(--e-voyages), #7E1F22; --sc-ink: #F6F0E6; --sc-ink-soft: #F0E4D4; color: var(--sc-ink); }
.voyages__tete { display: grid; gap: 1.2rem; margin-bottom: var(--sc-8); }
.voyages__mur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: var(--sc-8); align-items: start; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; background: var(--passe); padding: clamp(5px, 0.6vw, 10px); box-shadow: var(--cadre-ombre); }
.photo figcaption { margin-top: 0.8rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.photo--a { grid-column: 1 / 6; }
.photo--b { grid-column: 7 / 10; margin-top: var(--sc-9); }
.photo--c { grid-column: 10 / 13; margin-top: var(--sc-6); }
.photo--d { grid-column: 2 / 6; }
.photo--e { grid-column: 7 / 11; margin-top: calc(var(--sc-9) * -1); }
.photo--f { grid-column: 1 / 5; margin-top: var(--sc-6); }
.photo--g { grid-column: 9 / 13; margin-top: calc(var(--sc-8) * -1); }

/* ------------------------------------------------------------ 7 · sortie -- */
.sortie {
  background: var(--e-sortie), var(--sc-accent);
  display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: 1fr auto; align-items: center;
  --sc-ink-soft: #3E2309; --sc-hairline: hsl(24 60% 20% / 0.22);
}
.sortie__plaque { padding: var(--barre-h) 0 0 var(--sc-gutter); display: grid; gap: 1.4rem; }
.sortie__phrase {
  margin: 0; font-weight: 600;
  font-size: clamp(2.1rem, 1.2rem + 3.3vw, 4.4rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 17ch;
}
.sortie__contact { margin: 0; color: var(--sc-ink-soft); }
.sortie__bete { justify-self: center; width: min(40vw, 40rem); padding-top: var(--barre-h); position: relative; }
.sortie__bete::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -0.6rem; height: 1.4rem; z-index: -1;
  background: radial-gradient(closest-side, hsl(20 60% 22% / 0.45), transparent);
}
.pied {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 1.2rem var(--sc-gutter);
  font-size: 0.85rem; color: var(--sc-ink-soft);
}
.pied img { width: 3rem; height: 3rem; filter: drop-shadow(2px 4px 4px hsl(20 60% 18% / 0.35)); }
.pied p { margin: 0; }

/* ----------------------------------------------------------- les dialogues -- */
dialog { padding: 0; border: 0; color: var(--sc-ink); max-width: none; max-height: none; }
dialog::backdrop { background: hsl(30 25% 15% / 0.45); }
.plan, .visionneuse {
  width: 100vw; height: 100dvh; margin: 0; inset: 0;
  background: var(--sc-canvas) var(--tissu-lin); background-size: 168px 185px;
}
.plan[open] { display: grid; grid-template-rows: auto 1fr; }
.plan__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem var(--sc-gutter); }
.plan__tete .titre { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.plan__grille {
  list-style: none; margin: 0; padding: 2rem var(--sc-gutter) 3rem; overflow: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 2rem 1.5rem; align-content: start;
}
.plan__grille a { display: grid; gap: 0.6rem; text-decoration: none; }
.plan__grille img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--passe); padding: 6px; box-shadow: var(--cadre-ombre); transition: translate 220ms var(--sc-ease-out); }
.plan__grille span { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
@media (hover: hover) and (pointer: fine) { .plan__grille a:hover img { translate: 0 -4px; } }

.visionneuse[open] { display: grid; grid-template-columns: 1fr min(24rem, 32vw); }
/* Fermer : une croix en haut à droite de la visionneuse. */
.croix {
  position: absolute; top: 1rem; right: 1rem; z-index: 5; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--cadre-ombre);
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1), scale 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) { .croix:hover { rotate: 90deg; scale: 1.06; } }
.croix:active { scale: 0.94; }
.croix:focus-visible { outline: 2px solid var(--orange-texte); outline-offset: 3px; }
.visionneuse__scene { position: relative; display: grid; place-items: center; padding: 2rem 4.5rem; min-height: 0; }
.visionneuse__vue { display: grid; place-items: center; max-height: 100%; }
.visionneuse__vue .vue { --pad: 10px; display: inline-block; position: relative; line-height: 0; background: var(--passe); padding: var(--pad); box-shadow: var(--cadre-ombre); }
.visionneuse__vue .vue > img { max-width: none; height: auto; }
.visionneuse__fleche {
  position: absolute; top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--sc-surface); color: var(--sc-ink); font-size: 1.6rem; line-height: 1; box-shadow: var(--cadre-ombre);
}
.visionneuse__fleche--g { left: 1rem; }
.visionneuse__fleche--d { right: 1rem; }
.visionneuse__cartel {
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem; padding: 2rem 2rem 1.5rem;
  background: var(--sc-surface); overflow: auto;
}
.visionneuse__nom { margin: 0.8rem 0 0; font-weight: 600; font-size: 2.2rem; line-height: 1.02; letter-spacing: -0.03em; }
.visionneuse__mot { margin: 0.6rem 0 0; font-style: italic; color: var(--sc-ink-soft); }
.visionneuse__mot:empty { display: none; }
.visionneuse__vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.visionneuse__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }

/* -------------------------------------------------------------- téléphone -- */
@media (max-width: 860px) {
  :root { --barre-h: 4.8rem; }
  .barre { --logo: 4.6rem; }
  .barre__nav { display: none; }
  .barre__plan { min-height: 2.75rem; }

  .entree__titre { top: calc(var(--barre-h) + 2svh); width: auto; right: var(--sc-gutter); }
  .entree__accroche { font-size: 12vw; margin-top: 0.7rem; }
  .entree__intro { font-size: var(--sc-t-base); margin-top: 0.8rem; }
  .cadre--loin { width: 24vw; top: auto; bottom: 47svh; right: var(--sc-gutter); }
  .cadre--centre { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 14svh; }
  .cadre--pres { width: 44vw; left: auto; right: 4vw; bottom: -4svh; }
  .entree__premier { display: none; }

  .salle__grille { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .salle__oeuvre, .salle--d .salle__oeuvre, .salle__cartel, .salle--d .salle__cartel { grid-column: 1; order: 0; }
  .salle__cadre .vue > img { max-height: 62svh; }
  .salle__vignettes { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .piece__cadre .vue > img { height: 38svh; }
  .mama__grille { grid-template-columns: 1fr; }
  .mama__logo { width: 13rem; }

  .famille { padding-inline: var(--sc-3); }
  .vitrine__rayons {
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 1fr);
    padding: calc(var(--prof) + 1.5cqh) var(--prof) calc(var(--prof) + 12px); column-gap: 1vw; row-gap: 12px; align-items: end;
    --rayon-h: calc((98.5cqh - 2 * var(--prof) - 48px) / 4 * 0.86);
  }
  .rayon { display: contents; }
  .rayon::after { display: none; }
  .bete--f { justify-self: center; margin-bottom: 6px; }
  .bete--f[data-bete="Cameleon-1"] { display: none; }
  .bete--f > img { height: auto; width: auto; max-width: 100%; max-height: calc(var(--rayon-h) * var(--h, 1)); }
  .famille__arret { font-size: var(--sc-t-base); }

  .voyages__mur { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--sc-6); }
  .photo--a { grid-column: 1 / 6; }
  .photo--b { grid-column: 3 / 7; margin-top: 0; }
  .photo--c { grid-column: 1 / 5; margin-top: 0; }
  .photo--d { grid-column: 2 / 7; }
  .photo--e { grid-column: 1 / 5; margin-top: 0; }
  .photo--f { grid-column: 2 / 7; margin-top: 0; }
  .photo--g { grid-column: 1 / 5; margin-top: 0; }

  .sortie { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .sortie__plaque { padding: calc(var(--barre-h) + 2svh) var(--sc-gutter) 0; }
  .sortie__bete { width: 78vw; padding-top: 0; align-self: center; }

  .visionneuse[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .visionneuse__scene { padding: 1rem 0.5rem 4rem; }
  .visionneuse__vue .vue { --pad: 6px; }
  .visionneuse__scene { min-height: 56dvh; }
  .visionneuse__fleche { top: auto; bottom: 0.5rem; translate: none; }
  .visionneuse__cartel { padding: 1rem var(--sc-gutter); grid-template-rows: auto auto auto; gap: 0.9rem; }
  .visionneuse__nom { font-size: 1.8rem; }
  .visionneuse__vignettes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 860px) and (max-height: 700px) {
  .entree__intro { display: none; }
  .cadre--centre { bottom: 12svh; }
}

/* ------------------------------------------------------- mouvement réduit -- */
@media (prefers-reduced-motion: reduce) {
  .entree__mur, .entree__titre, .cadre--loin, .cadre--centre, .cadre--pres, .entree__premier { transform: none; opacity: 1; }
  .salle__cadre .vue > img { transition: none; }
}

/* ----------------------------------------------- les pièces cousues ensemble --
   Chaque section est une pièce de tissu dont le bord haut, irrégulier, chevauche
   la pièce précédente : ombre portée dessous, rang de points de couture le long du bord
   (assets/coutures/, _outils/coutures.py). Le bord ondule autour du haut de la section. */
main > section, main > div { position: relative; }
#entree { z-index: 1; } #collection { z-index: 2; } #reserve { z-index: 3; } #mama { z-index: 4; }
#famille { z-index: 5; } #voyages { z-index: 6; } #sortie { z-index: 7; }
#collection { --e: var(--e-salles), #2A251F; --c: 1; }
#reserve    { --e: var(--e-reserve), var(--sc-surface); --c: 2; }
#mama       { --e: var(--e-mama), var(--sc-canvas); --c: 3; }
#famille    { --e: var(--e-famille), #17140F; --c: 4; }
#voyages    { --e: var(--e-voyages), #7E1F22; --c: 5; }
#sortie     { --e: var(--e-sortie), var(--sc-accent); --c: 6; }
.cousue::before, .cousue::after {
  content: ""; position: absolute; left: 0; right: 0; top: -46px; height: 60px; pointer-events: none;
}
.cousue::before { z-index: 30; background: var(--ombre) repeat-x 0 0 / 600px 60px; }
.cousue::after {
  z-index: 31;
  background: var(--points) repeat-x 0 0 / 600px 60px, var(--e);
  background-position: 0 0, 0 46px;
  -webkit-mask: var(--lisiere) repeat-x 0 0 / 600px 60px; mask: var(--lisiere) repeat-x 0 0 / 600px 60px;
}
#collection { --lisiere: url("assets/coutures/lisiere-1.png"); --ombre: url("assets/coutures/ombre-1.png"); --points: url("assets/coutures/points-1-moyen.png"); }
#reserve    { --lisiere: url("assets/coutures/lisiere-2.png"); --ombre: url("assets/coutures/ombre-2.png"); --points: url("assets/coutures/points-2-moyen.png"); }
#mama       { --lisiere: url("assets/coutures/lisiere-3.png"); --ombre: url("assets/coutures/ombre-3.png"); --points: url("assets/coutures/points-3-moyen.png"); }
#famille    { --lisiere: url("assets/coutures/lisiere-4.png"); --ombre: url("assets/coutures/ombre-4.png"); --points: url("assets/coutures/points-4-chaud-moyen.png"); }
#voyages    { --lisiere: url("assets/coutures/lisiere-6.png"); --ombre: url("assets/coutures/ombre-6.png"); --points: url("assets/coutures/points-6-moyen.png"); }
#sortie     { --lisiere: url("assets/coutures/lisiere-7.png"); --ombre: url("assets/coutures/ombre-7.png"); --points: url("assets/coutures/points-7-moyen.png"); }

/* ---------------------------------------- la vitrine : tout éclairé ou au faisceau --
   Par défaut, la vitrine est éclairée (fond de lin, trois lampes). L'interrupteur la passe
   dans le noir : un faisceau éclaire les peluches et suit la souris (page.js écrit --sx, --sy) ;
   sans souris, il passe doucement d'une créature à l'autre. Le nom suit le pointeur. */
.vitrine__nuit {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 420ms var(--sc-ease-out);
  background:
    radial-gradient(circle var(--spot, 230px) at var(--sx, 50%) var(--sy, 30%), hsl(42 90% 80% / 0.16), transparent 70%),
    radial-gradient(circle var(--spot, 230px) at var(--sx, 50%) var(--sy, 30%), transparent 0, transparent 35%, hsl(30 30% 3% / 0.55) 70%, hsl(30 30% 3% / 0.9) 100%);
}
.vitrine.est-faisceau { background: transparent; }
.vitrine.est-faisceau .vitrine__nuit { opacity: 1; }
.vitrine.est-faisceau .vitrine__volume { filter: brightness(0.45); }
.vitrine.est-faisceau .rayon::after { background: #EDE4D4; box-shadow: 0 10px 18px -10px hsl(0 0% 0% / 0.6); }

/* L'interrupteur : deux mots de part et d'autre d'un rail ; la bille va du côté choisi. */
.interrupteur {
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0 0.2rem;
  background: none; border: 0; color: var(--sc-ink-soft); font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer;
}
.interrupteur__rail {
  position: relative; width: 3.1rem; height: 1.7rem; border-radius: 999px; flex: none;
  background: hsl(40 30% 92% / 0.18); box-shadow: inset 0 0 0 1px hsl(40 30% 92% / 0.35);
  transition: background-color 220ms var(--sc-ease-out);
}
.interrupteur__rail::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #F4EEE4; box-shadow: 0 1px 3px hsl(0 0% 0% / 0.4);
  transition: translate 220ms var(--sc-ease-out);
}
.interrupteur[aria-checked="true"] .interrupteur__rail { background: var(--sc-accent); box-shadow: none; }
.interrupteur[aria-checked="true"] .interrupteur__rail::after { translate: 1.4rem 0; }
.interrupteur[aria-checked="false"] .interrupteur__mot:first-child,
.interrupteur[aria-checked="true"] .interrupteur__mot:last-child { color: var(--sc-ink); }
.interrupteur:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 999px; }
.etiquette-curseur {
  position: fixed; left: 0; top: 0; z-index: 70; margin: 0; pointer-events: none;
  padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--sc-surface); color: var(--sc-ink);
  font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: var(--cadre-ombre);
  opacity: 0; transition: opacity 140ms var(--sc-ease-out); will-change: transform;
}
.etiquette-curseur.est-la { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
}

/* ------------------------------------------- entrée : photos en plein écran --
   Trois photos entières, plein écran, qui se succèdent au défilement (fondu, léger recul).
   Chaque photo est dimensionnée « en couverture » par son conteneur (--ar), pour que les
   yeux, posés en % de l'image, restent exactement sur les yeux cousus. --fx / --fy : point
   de l'image gardé au centre quand l'écran la recadre (téléphone). */
.entree { background: #1A1612; }
.entree .plein { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.entree .plein .vue {
  --pad: 0px; position: absolute; padding: 0; background: none; box-shadow: none;
  --W: max(100vw, calc(100svh * var(--ar))); --H: max(100svh, calc(100vw / var(--ar)));
  width: var(--W); height: var(--H); left: 0; top: 0;
  /* Décalage borné : le point --fx/--fy vient au centre sans jamais découvrir un bord de l'image. */
  translate: calc(-1 * clamp(0px, var(--W) * var(--fx, 0.5) - 50vw, var(--W) - 100vw))
             calc(-1 * clamp(0px, var(--H) * var(--fy, 0.5) - 50svh, var(--H) - 100svh));
  transform: scale(1.06); transform-origin: calc(100% * var(--fx, 0.5)) 50%;
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.entree .plein .vue > img { width: 100%; height: 100%; max-width: none; display: block; }
.entree .plein figcaption {
  position: absolute; right: var(--sc-gutter); bottom: clamp(1.25rem, 4vh, 2.5rem); z-index: 3;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #F6F0E6;
  text-shadow: 0 1px 6px hsl(0 0% 0% / 0.6);
}
/* Voile seulement sous le texte (coin bas gauche), la photo garde son contraste ailleurs. */
.entree__voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top right, hsl(25 30% 6% / 0.82) 0%, hsl(25 30% 6% / 0.55) 30%, transparent 60%);
}
.entree .entree__titre {
  z-index: 4; left: var(--sc-gutter); top: auto; bottom: clamp(2rem, 9vh, 6rem); width: min(44rem, 70vw);
  --sc-ink: #F6F0E6; --sc-ink-soft: #EDE3D3; color: var(--sc-ink);
}
.entree .entree__titre .etiquette { color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .entree .entree__titre { width: auto; right: var(--sc-gutter); bottom: 3svh; }
  .entree .entree__accroche { font-size: 11vw; }
  .entree__voile { background: linear-gradient(to top, hsl(25 30% 6% / 0.85) 0%, hsl(25 30% 6% / 0.5) 38%, transparent 62%); }
  .entree .plein figcaption { bottom: auto; top: calc(var(--barre-h) + 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .entree .plein .vue { transform: none; }
}

/* --------------------- le bouton « pièce de tissu cousue » (salles) --
   Un morceau de feutre orange : bordure, puis un rang de points de couture à l'intérieur,
   posé légèrement de travers. Le point de couture est un contour pointillé ; le focus clavier
   passe donc par un anneau d'ombre, pas par le contour. */
.piece-cousue {
  justify-self: start; position: relative; cursor: pointer;
  padding: 0.95rem 1.5rem; margin-top: 0.6rem;
  font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: #FFFFFF;
  text-shadow: 0 1px 1px hsl(0 0% 0% / 0.25);
  /* La couleur de la peluche de la salle (--piece), avec la trame du tricot par-dessus. */
  background: url("assets/etoffes/s-bouton.webp") 0 0 / 86px 260px, var(--piece, #9A3F0C);
  background-blend-mode: multiply, normal;
  border: 2px solid var(--piece-bord, #5C2507); border-radius: 3px;
  outline: 1.5px dashed hsl(40 70% 95% / 0.95); outline-offset: -7px;
  rotate: -2deg;
  box-shadow: 0 2px 0 hsl(24 60% 20% / 0.35), 0 10px 22px -10px hsl(0 0% 0% / 0.6);
  /* Survol : la pièce se soulève (léger zoom, se redresse), l'ombre s'allonge ; sortie en douceur (ease-out). */
  --survol: cubic-bezier(0.22, 1, 0.36, 1);
  transition: rotate 520ms var(--survol), translate 520ms var(--survol), scale 520ms var(--survol), box-shadow 520ms var(--survol);
}
.piece-cousue::after { content: " →"; }
@media (hover: hover) and (pointer: fine) {
  .piece-cousue:hover {
    rotate: -0.8deg; translate: 0 -3px; scale: 1.04;
    box-shadow: 0 3px 0 hsl(24 60% 20% / 0.3), 0 22px 34px -14px hsl(0 0% 0% / 0.62);
  }
}
.piece-cousue:active { translate: 0 1px; scale: 1.01; transition-duration: 120ms; }
.piece-cousue:focus-visible { outline: 1.5px dashed hsl(40 70% 95% / 0.95); outline-offset: -7px; box-shadow: 0 0 0 3px #241B13, 0 0 0 6px #F6F0E6; }

.entree .entree__titre--2, .entree .entree__titre--3 { pointer-events: none; }

/* Les diapos de l'entrée basculent d'un coup (page.js pose data-diapo = 0, 1 ou 2 selon la
   position dans l'entrée, aux mêmes seuils qu'avant : 0,30 et 0,64) : la photo arrive en fondu court
   et se pose (léger recul), son texte et sa légende la suivent. Défilement libre, dans les deux sens. */
.entree .plein { opacity: 0; transition: opacity 650ms ease-out; }
.entree .plein:nth-of-type(1),
.entree[data-diapo="1"] .plein:nth-of-type(2),
.entree[data-diapo="2"] .plein:nth-of-type(2),
.entree[data-diapo="2"] .plein:nth-of-type(3) { opacity: 1; }
.entree[data-diapo="0"] .plein:nth-of-type(1) .vue,
.entree[data-diapo="1"] .plein:nth-of-type(2) .vue,
.entree[data-diapo="2"] .plein:nth-of-type(3) .vue { transform: scale(1); }
.entree .plein figcaption { opacity: 0; transition: opacity 400ms ease-out; }
.entree[data-diapo="0"] .plein:nth-of-type(1) figcaption,
.entree[data-diapo="1"] .plein:nth-of-type(2) figcaption,
.entree[data-diapo="2"] .plein:nth-of-type(3) figcaption { opacity: 1; transition-delay: 250ms; }
.entree .entree__titre {
  opacity: 0; transform: translate3d(0, 18px, 0); pointer-events: none;
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.entree[data-diapo="0"] .entree__titre--1,
.entree[data-diapo="1"] .entree__titre--2,
.entree[data-diapo="2"] .entree__titre--3 {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 220ms, transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}
@media (prefers-reduced-motion: reduce) {
  .entree .plein, .entree .plein .vue, .entree .plein figcaption, .entree .entree__titre { transition: none; transform: none; }
}

/* Deuxième et troisième photos (Grenouille, Hérisson) : le texte passe à droite (bureau),
   la légende à gauche, et le voile bascule du coin bas gauche au coin bas droit avec la Grenouille. */
@media (min-width: 861px) {
  .entree .entree__titre--2, .entree .entree__titre--3 { left: auto; right: var(--sc-gutter); text-align: right; }
  .entree .entree__titre--2 .etiquette, .entree .entree__titre--3 .etiquette { justify-content: flex-end; }
  .entree .entree__titre--2 .entree__intro, .entree .entree__titre--3 .entree__intro { margin-left: auto; }
  .entree .plein:nth-of-type(2) figcaption, .entree .plein:nth-of-type(3) figcaption { right: auto; left: var(--sc-gutter); }
  .entree__voile { background: none; }
  .entree__voile::before, .entree__voile::after { content: ""; position: absolute; inset: 0; transition: opacity 700ms ease-out; }
  .entree__voile::before { background: linear-gradient(to top right, hsl(25 30% 6% / 0.82) 0%, hsl(25 30% 6% / 0.55) 30%, transparent 60%); }
  .entree__voile::after { background: linear-gradient(to top left, hsl(25 30% 6% / 0.82) 0%, hsl(25 30% 6% / 0.55) 30%, transparent 60%); opacity: 0; }
  .entree:not([data-diapo="0"]) .entree__voile::before { opacity: 0; }
  .entree:not([data-diapo="0"]) .entree__voile::after { opacity: 1; }
}

/* Jamais de gris : une couleur vive par salle (lapins rouge, chats bordeaux, ours orange vif : choix de Max ;
   hiboux : rouge du nœud), foncée juste assez pour un texte blanc à 4,6:1 au moins. */
.salle[data-creature="lapins"] { --piece: #E7172F; --piece-bord: #8F0717; }  /* rouge (demande de Max), blanc 4.6:1 */
.salle[data-creature="chats"]  { --piece: #7A122C; --piece-bord: #4C0718; }  /* bordeaux (demande de Max), blanc 10.8:1 */
.salle[data-creature="ours"]   { --piece: #D04500; --piece-bord: #812B00; }  /* orange vif, blanc 4.63:1 */
.salle[data-creature="hiboux"] { --piece: #E02837; --piece-bord: #8B121C; }  /* rouge du nœud, blanc 4.64:1 */