/* Le Sixième Cadre — salle de musée bordeaux (plafond blanc, corniche, spots, parquet)
   Unité de mesure du mur : --cq (1 % de la largeur du mur sur ordinateur). */

/* Polices hébergées avec la page (aucune requête vers Google) */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/montserrat-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }

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

:root {
  --ink: #f3e9d2;
  --muted: #cdbd9e;
  --gold: #d8b968;
  --gold-hi: #f2dc92;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

html { background: #2b0507; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background: #2b0507;
}
button, input { font: inherit; color: inherit; }

/* ---------- La salle : velours bordeaux ---------- */
.room {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #5a0b0f 0%, #690e13 22%, #5c0c10 55%, #430809 82%, #2f0506 100%);
  overflow: hidden;
}
/* La lumière tombe du plafond : les bords de la salle sont dans l'ombre */
.vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 40%, transparent 52%, rgba(10, 0, 0, .5) 100%);
}

/* Plafond à caissons et corniche */
.ceiling {
  position: relative; z-index: 3; height: clamp(46px, 5.2vw, 78px);
  background: linear-gradient(180deg, #8f8c88 0, #bdbab5 45%, #d6d3ce 100%);
}
.ceiling::before {
  content: ""; position: absolute; inset: 9px 5% 0; border: 2px solid rgba(255, 255, 255, .45); border-bottom: 0;
  box-shadow: inset 0 0 22px rgba(60, 56, 50, .35), 0 0 0 5px rgba(120, 116, 110, .3);
}
.ceiling::after {
  content: ""; position: absolute; inset: 20px calc(5% + 22px) 0; border: 1px solid rgba(255, 255, 255, .3); border-bottom: 0;
}
.cornice {
  position: relative; z-index: 3; height: 28px;
  background: linear-gradient(180deg, #dedbd6 0, #f6f5f2 12%, #c6c3bd 26%, #fdfcfa 40%, #d9d6d0 54%, #aaa69f 68%, #ebe9e5 82%, #8b8780 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.track { position: absolute; left: 50%; top: 100%; width: min(100%, 1600px); height: 0; transform: translateX(-50%); }
.spot {
  position: absolute; left: calc(var(--x, 50) * 1%); top: -4px; width: 20px; height: 38px; margin-left: -10px;
  background: linear-gradient(90deg, #6d6a66, #f0eeea 40%, #9c9892 70%, #55524e);
  border-radius: 3px 3px 9px 9px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.spot.s1 { --x: 28; } .spot.s2 { --x: 72; } .spot.s3 { display: none; }
html[data-layout="grid"] .spot.s1 { --x: 18; } html[data-layout="grid"] .spot.s2 { --x: 50; } html[data-layout="grid"] .spot.s3 { display: block; --x: 82; }
html[data-layout="row"] .spot.s1 { --x: 25.1; } html[data-layout="row"] .spot.s2 { --x: 58.5; } html[data-layout="row"] .spot.s3 { display: block; --x: 91.9; }
.spot::before { content: ""; position: absolute; left: 50%; bottom: -3px; width: 12px; height: 5px; margin-left: -6px; border-radius: 50%; background: #fff4de; box-shadow: 0 0 14px 6px rgba(255, 218, 170, .75); }
.spot::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: min(26vw, 420px); height: 300px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 56% 50% at 50% 30%, rgba(255, 150, 130, .34), rgba(255, 120, 100, .12) 60%, transparent 80%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); mix-blend-mode: screen;
}

/* ---------- En-tête ---------- */
.intro { position: relative; z-index: 3; text-align: center; padding: clamp(40px, 5.5vw, 70px) 22px clamp(2px, .6vw, 10px); }
h1 {
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; text-indent: .16em;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.1; color: #f6ecd4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(255, 190, 150, .18);
}
.rule { position: relative; width: min(300px, 56vw); height: 1px; margin: 14px auto 11px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg); background: #5a0b0f; border: 1px solid var(--gold); }
.date { margin-top: 5px; font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lede { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .55em; text-indent: .55em; font-size: clamp(.8rem, 1.1vw, 1rem); color: var(--gold); }

/* ---------- Le mur ---------- */
.wall { position: relative; z-index: 1; }
.stage {
  position: relative; width: min(100%, 1600px); margin: 0 auto;
  aspect-ratio: 100 / 40; container-type: inline-size;
  --cq: 1cqw; --fmin: 13px; --fs: 1.18;
}
/* Gabarits (choisis par app.js) : une seule rangée sur grand écran, grille 3×2 sur écran moyen, colonne sur téléphone */
.stage[data-layout="row"]  { aspect-ratio: 100 / 39; --bs: .72; }
.stage[data-layout="grid"] { aspect-ratio: 100 / 92; --bs: .92; }
.stage[data-layout="row"]  .work { --w: 15.4; }
.stage[data-layout="grid"] .work { --w: 22; }
/* flaques de lumière sur le velours, autour de chaque cadre */
.pool {
  --pl: 30;
  position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  left: calc((var(--cx) - var(--pl) / 2) * var(--cq)); top: calc((var(--cy) - var(--pl) * .52) * var(--cq)); width: calc(var(--pl) * var(--cq)); height: calc(var(--pl) * .88 * var(--cq));
  background: radial-gradient(closest-side, rgba(230, 80, 64, .30), rgba(220, 70, 58, .12) 55%, transparent 100%);
}
.stage[data-layout="grid"] .pool { --pl: 44; }
.work { position: absolute; width: calc(var(--w) * var(--cq)); }

/* ---------- Les cadres (images générées par outils/generer_cadres.py) ---------- */
.s-rococo  { --b: calc(3.4 * var(--cq) * var(--bs, 1)); --m: calc(.5 * var(--cq) * var(--bs, 1));  --liner: #15120c; --bevel: rgba(0, 0, 0, .5);   --slip: #a98334; --bi: url("assets/cadres/bande-rococo.webp"); }
.s-ebony   { --b: calc(3 * var(--cq) * var(--bs, 1));   --m: calc(1.3 * var(--cq) * var(--bs, 1)); --liner: #ece8dc; --bevel: #fbf9f2;            --slip: #a98334; --bi: url("assets/cadres/bande-ebony.webp"); }
.s-oldgold { --b: calc(3.2 * var(--cq) * var(--bs, 1)); --m: calc(.5 * var(--cq) * var(--bs, 1));  --liner: #151c19; --bevel: rgba(0, 0, 0, .5);   --slip: #9b8a4a; --bi: url("assets/cadres/bande-oldgold.webp"); }
.s-silver  { --b: calc(3 * var(--cq) * var(--bs, 1));   --m: calc(1.3 * var(--cq) * var(--bs, 1)); --liner: #efede7; --bevel: #fff;               --slip: #9fa3ac; --bi: url("assets/cadres/bande-silver.webp"); }
.s-crown   { --b: calc(3.8 * var(--cq) * var(--bs, 1)); --m: calc(.5 * var(--cq) * var(--bs, 1));  --liner: #0d0f12; --bevel: rgba(0, 0, 0, .45);  --slip: #a98334; --bi: url("assets/cadres/bande-crown.webp"); }

/* Accrochage : chaque tableau est centré sur sa place (--cx, --cy), sur une même ligne d'accrochage */
.work {
  --fh: calc((var(--w) * var(--cq) - 2 * var(--b) - 2 * var(--m)) / var(--ar) + 2 * var(--b) + 2 * var(--m));
  left: calc(var(--cx) * var(--cq) - var(--w) * var(--cq) / 2);
  top: calc(var(--cy) * var(--cq) - var(--fh) / 2);
}

.frame {
  position: relative; z-index: 2; display: block; width: 100%; padding: 0; text-align: left; cursor: zoom-in; background: none;
  border: var(--b) solid #6f5622; user-select: none; -webkit-user-select: none;
  border-image-source: var(--bi); border-image-slice: 224; border-image-width: var(--b); border-image-repeat: round;
  box-shadow: 0 calc(1.6 * var(--cq)) calc(2.6 * var(--cq)) rgba(0, 0, 0, .6), 0 calc(.4 * var(--cq)) calc(.7 * var(--cq)) rgba(0, 0, 0, .55);
  transition: transform .6s ease, filter .6s ease;
}
.frame:hover { transform: translateY(calc(-.2 * var(--cq))); filter: brightness(1.06); }
.frame:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 10px; }
.frame img { -webkit-user-drag: none; user-select: none; }

/* Le tableau, en retrait : le cadre lui jette une ombre en haut à gauche */
.mat {
  position: relative; z-index: 1; display: block; padding: var(--m); background: var(--liner);
  box-shadow: inset calc(.45 * var(--cq)) calc(.55 * var(--cq)) calc(1.1 * var(--cq)) rgba(0, 0, 0, .55), inset 0 0 0 calc(.14 * var(--cq)) var(--slip);
}
.art {
  position: relative; display: block; line-height: 0;
  box-shadow: 0 0 0 calc(.1 * var(--cq)) rgba(0, 0, 0, .55), 0 0 0 calc(.28 * var(--cq)) var(--bevel, rgba(0, 0, 0, .35));
}
.art img { display: block; width: 100%; height: auto; }
.art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 28%, transparent 42%);
  box-shadow: inset 0 0 calc(1.2 * var(--cq)) rgba(0, 0, 0, .45);
}

/* ---------- Plaque de musée, à côté du tableau ---------- */
.label {
  position: absolute; z-index: 3; left: 50%; top: calc((var(--py) - var(--cy)) * var(--cq) + var(--fh) / 2); translate: -50% 0; width: calc(var(--w) * var(--cq) + .5 * var(--cq));
  padding: calc(1 * var(--cq)) calc(1.1 * var(--cq)) calc(1.2 * var(--cq)); text-align: left;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .24) 0 36%, rgba(255, 255, 255, 0) 36.3%),
    linear-gradient(180deg, #c7a458 0%, #b99743 55%, #a98a3d 100%);
  box-shadow: 0 calc(.55 * var(--cq)) calc(1 * var(--cq)) rgba(0, 0, 0, .55), 0 calc(.1 * var(--cq)) calc(.2 * var(--cq)) rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(255, 238, 180, .35), inset 0 calc(-.18 * var(--cq)) calc(.4 * var(--cq)) rgba(80, 55, 10, .35);
  color: #2b2b2b;
}
.label .t {
  display: block; font-family: var(--sans); font-weight: 700; line-height: 1.22; text-wrap: balance;
  font-size: max(var(--tmin, 12.5px), calc(.98 * var(--cq))); color: #2a2a2a;
}
.label .d {
  display: block; margin-top: .7em; font-family: var(--sans); font-style: italic; font-weight: 400; line-height: 1.38;
  font-size: max(var(--dmin, 12px), calc(.9 * var(--cq))); color: #2a2a2a;
}
.who {
  display: block; margin-top: .9em; padding-top: .7em; border-top: 1px solid rgba(60, 42, 8, .4); font-family: var(--sans); font-weight: 600;
  letter-spacing: .02em; font-size: max(12px, calc(.9 * var(--cq))); color: #2a2a2a;
  opacity: 0; transform: translateY(4px); transition: opacity 1.4s ease, transform 1.4s ease; transition-delay: var(--d, 0s);
}
.who:empty { display: none; }
.solved .who { opacity: 1; transform: none; }
.who .num { color: #6a4c10; margin-right: .6em; font-weight: 700; }
.who mark { background: none; color: #7a0f14; font-weight: 800; }
.lb-title { display: block; margin-bottom: .5em; font-family: var(--sans); font-style: normal; font-weight: 700; letter-spacing: .02em; color: #f2dc92; }

/* ---------- Le sixième cadre ---------- */
.is-empty .frame { cursor: default; }
.is-empty .frame:hover { transform: none; filter: none; }
.void {
  aspect-ratio: 1500 / 1076; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 25%, #56090d 0%, #3a0709 60%, #260406 100%);
}
.void::after { z-index: 2; }
.void img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: brightness(.05) blur(8px) saturate(.6); transform: scale(1.06);
  transition: opacity 2.6s ease, filter 3.4s ease, transform 4.4s ease;
}
.void.revealed img { opacity: 1; filter: none; transform: none; }
.is-empty .beam { display: none; }
.solved .is-empty .frame { cursor: zoom-in; }
.solved .is-empty .frame:hover { transform: translateY(calc(-.2 * var(--cq))); filter: brightness(1.05); }

/* Saisie : même plaque de musée */
.plaque { width: calc(var(--w) * var(--cq) + 1.8 * var(--cq)); }
.ask .d { margin-top: .6em; margin-bottom: .9em; }
.row { display: flex; flex-direction: column; align-items: stretch; gap: calc(.8 * var(--cq)); }
input {
  min-width: 0; padding: .55em .65em; border-radius: 0; border: 1px solid rgba(60, 40, 8, .7);
  background: rgba(255, 250, 235, .9); color: #1f1f1f; font-family: var(--sans); font-size: max(16px, calc(1.05 * var(--cq))); font-style: italic;
  box-shadow: inset 0 calc(.12 * var(--cq)) calc(.3 * var(--cq)) rgba(0, 0, 0, .25);
}
input::placeholder { color: rgba(40, 40, 40, .5); }
input:focus { outline: none; box-shadow: inset 0 calc(.12 * var(--cq)) calc(.3 * var(--cq)) rgba(0, 0, 0, .25), 0 0 0 2px #2a2a2a; }
.row button {
  align-self: flex-start; padding: .6em 1.3em; border-radius: 0; cursor: pointer; border: 0; background: #2a2a2a; color: #f2dc92;
  font-family: var(--sans); font-weight: 700; font-size: max(12.5px, calc(.9 * var(--cq))); letter-spacing: .04em;
  transition: filter .25s, transform .25s;
}
.row button:hover { filter: brightness(1.35); }
.row button:active { transform: translateY(1px); }
.row button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.msg { min-height: 1.3em; margin-top: calc(.7 * var(--cq)); font-family: var(--sans); font-style: italic; font-size: max(12.5px, calc(.9 * var(--cq))); color: #6a0d10; }
.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 15% { transform: translateX(-6px); } 35% { transform: translateX(5px); } 55% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }

.done[hidden] { display: none; }
.done > * { opacity: 0; transform: translateY(6px); transition: opacity 1.6s ease, transform 1.6s ease; }
.solved .done > * { opacity: 1; transform: none; }
.solved .done > :nth-child(1) { transition-delay: 2.4s; }
.solved .done > :nth-child(2) { transition-delay: 2.9s; }
.solved .done > :nth-child(3) { transition-delay: 3.4s; }
.solved .done > :nth-child(4) { transition-delay: 4s; }
.done .by { display: block; margin-top: .9em; font-family: var(--sans); font-weight: 600; font-size: max(12.5px, calc(.9 * var(--cq))); color: #2a2a2a; }
.again {
  margin-top: 1em; background: none; border: 1px solid rgba(40, 30, 8, .55); color: #2a2a2a; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 11.5px; padding: .4em .9em;
}
.again:hover { background: rgba(40, 30, 8, .12); }
.instant * { transition: none !important; animation: none !important; transition-delay: 0s !important; }

/* ---------- Déplacer les tableaux ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.work.flip { transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.work.dragging { z-index: 30; transition: none; cursor: grabbing; }
.work.dragging .frame { cursor: grabbing; box-shadow: 0 calc(3 * var(--cq)) calc(5 * var(--cq)) rgba(0, 0, 0, .7); }
.work.dragging .label { opacity: .6; }
.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.work.drop .frame { outline: 2px dashed var(--gold-hi); outline-offset: 9px; }
.work:not(.is-empty) .frame { cursor: grab; }
.work:not(.is-empty) .frame:active { cursor: grabbing; }
.grip {
  position: absolute; z-index: 5; right: 0; top: 0; translate: 40% -40%; width: max(32px, calc(2.9 * var(--cq))); aspect-ratio: 1;
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 238, 180, .55); background: linear-gradient(180deg, #3a2e17, #17110a); color: #f2dc92;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 236, 170, .3); transition: scale .25s, box-shadow .25s;
}
.grip svg { width: 56%; height: 56%; }
.grip:hover { scale: 1.1; }
.grip:focus-visible { outline: 2px solid #fff4cd; outline-offset: 2px; }
.work.is-selected .grip { box-shadow: 0 0 0 3px #fff4cd, 0 0 0 5px var(--gold-hi); }
.picking .work:not(.is-selected) .grip { box-shadow: 0 0 0 2px var(--gold-hi), 0 3px 8px rgba(0, 0, 0, .6); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { scale: 1.14; } }
.work.is-selected .frame { outline: 2px solid var(--gold-hi); outline-offset: 9px; }

/* ---------- Indices ---------- */
.hints { position: relative; z-index: 3; width: min(1120px, calc(100% - 44px)); margin: 0 auto; padding: clamp(10px, 2vw, 30px) 0 clamp(40px, 6vw, 76px); text-align: center; }
.hints h2 {
  margin-bottom: 22px; font-family: var(--display); font-weight: 500; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .55em; text-indent: .55em; color: var(--gold);
}
.hint-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 18px; align-items: stretch; }
.hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 22px 26px; min-height: 150px;
  background: linear-gradient(180deg, rgba(40, 6, 8, .78), rgba(24, 3, 5, .86)); border: 1px solid rgba(216, 185, 104, .5);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .3), inset 0 0 0 5px rgba(216, 185, 104, .2), 0 14px 30px rgba(0, 0, 0, .45);
}
.hint .num { font-family: var(--display); font-size: 1.7rem; letter-spacing: .12em; color: var(--gold); }
.hint-btn {
  padding: .6em 1.4em; cursor: pointer; background: none; border: 1px solid rgba(216, 185, 104, .6); color: var(--gold-hi);
  font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background .3s, border-color .3s, opacity .3s;
}
.hint-btn:hover:not(:disabled) { background: rgba(216, 185, 104, .14); border-color: var(--gold-hi); }
.hint-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.hint-btn:disabled { opacity: .35; cursor: not-allowed; }
.hint.is-open .hint-btn { display: none; }
.hint-body[hidden] { display: none; }
.hint-body { animation: fade .9s ease; }
.hint-body p { font-family: var(--serif); font-style: italic; font-weight: 400; color: #f3e9d2; font-size: 1.22rem; line-height: 1.5; text-wrap: balance; }
.hint-body .poem-line { font-size: 1.05rem; line-height: 1.7; text-wrap: wrap; }
@media (max-width: 900px) { .hint-list { grid-template-columns: 1fr; } }

/* ---------- Plinthe et parquet ---------- */
.floor { position: relative; z-index: 2; }
.baseboard { height: 22px; background: linear-gradient(180deg, #e9e3d6, #cbc3b2 40%, #a79f8e 75%, #6d6757); box-shadow: 0 -10px 26px rgba(0, 0, 0, .45); }
.parquet {
  height: clamp(56px, 6.5vw, 96px);
  background:
    radial-gradient(70% 90% at 50% 0, rgba(255, 190, 120, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 7.5%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, #7b4c2a 0%, #5a3519 55%, #3a210f 100%);
}

/* ---------- Agrandissement ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
  background: rgba(14, 2, 3, .94); backdrop-filter: blur(4px); cursor: zoom-out;
  animation: fade .35s ease;
}
.lightbox[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.lightbox figure { max-width: 100%; text-align: center; }
.lightbox img { max-width: 94vw; max-height: 76vh; width: auto; height: auto; box-shadow: 0 0 0 10px #15100a, 0 0 0 11px #8c6c2c, 0 24px 80px rgba(0, 0, 0, .9); }
.lightbox figcaption { margin-top: 28px; font-size: clamp(1rem, 1.6vw, 1.35rem); max-width: 34em; color: #e6dbc1; }
.lb-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 1px solid rgba(216, 185, 104, .5); background: none; color: var(--gold-hi); font-size: 28px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: rgba(216, 185, 104, .15); }

/* ---------- Écrans étroits : accrochage en colonne, plaque sous le tableau ---------- */
@media (max-width: 900px) {
  .stage {
    aspect-ratio: auto; display: flex; flex-direction: column; gap: 9vw; padding: 7vw 8vw 8vw;
    --cq: 1.5cqw; --tmin: 15px; --dmin: 14px;
  }
  .pool, .spot::after { display: none; }
  .work { position: relative; left: auto; top: auto; width: var(--mw); align-self: var(--ma); }
  .label { position: relative; left: auto; top: auto; translate: none; width: auto; margin: calc(3 * var(--cq)) calc(-1 * var(--cq)) 0; }
  .plaque { width: auto; }
}
@media (max-width: 760px) { .stage { --cq: 1.9cqw; } }

@media (prefers-reduced-motion: reduce) {
  .picking .work .grip { animation: none; }
  .work.flip { transition-duration: .01s; }
  .void img, .who, .done > * { transition-duration: .01s !important; transition-delay: 0s !important; }
}