/* ==========================================================================
   STYLE.CSS
   Le bloc "RÉGLAGES" juste en dessous est celui que tu peux ajuster.
   Toutes les positions dans la scène sont en % de l'écran 4:3, ce qui veut
   dire qu'elles restent identiques sur tous les appareils.
   Repère utile : l'écran fait 320×240 "pixels virtuels" ; si tu dessines ton
   décor à 320×240 (ou 640×480, 960×720…), 1 % de largeur = 3,2 px virtuels.
   ========================================================================== */

/* Titres : Instrument Serif italique. Textes et interface : JetBrains Mono (size-adjust = taille ramenée à celle de l'ancienne police) */
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 72%; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; size-adjust: 72%; }

/* ===================== RÉGLAGES ===================== */
:root {
  /* Couleurs */
  --ink: #0b0a0c;          /* fond de page */
  --paper: #f4f1ea;        /* blanc */
  --accent: #e8322b;       /* rouge REC */
  --gold: #ffd23f;         /* surbrillance */
  --cta: #d3261c;          /* boutons d'action (Jouer sur itch.io…) et pastilles NEW */
  --cta-dark: #7a120c;     /* relief des boutons */
  --cta-ink: #fff4e6;      /* texte sur rouge */
  --choice: #b9a2ff;       /* couleur des choix de dialogue */
  --action: #7fe08a;       /* ligne d'action ("Regarder ...") */

  /* Polices */
  --f-title: "Instrument Serif", Georgia, serif;          /* titres (en italique) */
  --f-pixel: "JetBrains Mono", ui-monospace, monospace;    /* petites étiquettes de l'interface */
  --f-text: "JetBrains Mono", ui-monospace, monospace;     /* textes, dialogues */

  /* Scène de la boutique (en % de l'écran) */
  /* Le vendeur : le cadre de ses animations, en % de l'écran.
     Les animations sont découpées dans la compo 960 × 720 : x 224, y 104, 416 × 616 px.
     Garde ces valeurs tant que tu exportes avec le même cadrage. */
  --seller-left: 23.333%;
  --seller-top: 14.444%;
  --seller-w: 43.333%;
  --seller-h: 85.556%;
  --seller-x: 47%;        /* centre de la tête (sert à placer la bulle) */

  /* Étalonnage : harmonise la lumière des éléments avec le décor.
     brightness = luminosité, contrast = contraste, saturate = intensité des couleurs. none = inchangé */
  --seller-filter: brightness(1);
  --boxes-filter: brightness(.95) saturate(.95);
  --choice-size: 4.8;     /* taille des choix de dialogue, en % de la hauteur de l'écran (ils rapetissent seuls si besoin) */
  --panel-h: 21;          /* hauteur de l'interface SOUS l'écran, en % de la hauteur de l'écran (sans unité).
                             Les choix rapetissent tout seuls s'il en faut plus : jamais de barre de défilement. */
  /* Zoom du décor */
  --cam-zoom: 1.03;       /* zoom de la caméra. Garde au moins 1.03 avec le balancement, sinon les bords de l'image apparaissent */
  --bg-zoom: 1;           /* zoom de la photo du décor : 1 = photo entière. Plus grand = plus zoomé.
                             En dessous de 1, des bandes noires apparaissent sur les côtés */
  --bg-y: 50%;            /* quand --bg-zoom > 1 : quelle partie garder (0% = le haut, 100% = le bas) */
  --bubble-y: 19%;        /* bulle de dialogue : hauteur depuis le haut de l'écran */
  --bubble-dx: 6%;        /* bulle : décalage à droite du centre du vendeur (plus petit = plus près de la tête) */
  --bubble-w: 40%;        /* bulle : largeur maximale */

  /* Rayon */
  --box-h: 27;            /* hauteur d'une boîte en % de l'écran (sans unité) — plus grand = moins de jeux par ligne */

  /* Fiche contact (position et taille en % de l'écran) */
  --card-x: 2.5%;          /* distance au bord gauche */
  --card-y: 3.5%;          /* distance au haut */
  --card-w: 27%;           /* largeur */
  --card-paper: #efe6cf;   /* couleur de la pancarte */
  --card-ink: #17130f;     /* couleur du texte */
  --card-name: #c8231c;    /* couleur du nom */
  --bar: #2b5d34;          /* barre du haut de la fiche projet */

  --gap: 10px;             /* marge autour de l'écran */
}
/* ==================== FIN DES RÉGLAGES ==================== */

:root { --vh: 1vh; }
@supports (height: 1dvh) { :root { --vh: 1dvh; } }

/* ---- Taille de l'écran 4:3 ----
   Ordinateur, tablette, téléphone couché : l'écran 4:3 le plus grand possible, centré.
   Téléphone debout : fiche contact en haut, écran pleine largeur, interface en dessous. */
:root {
  /* l'écran 4:3 + l'interface en dessous doivent tenir dans la fenêtre */
  --sw: min(calc(100vw - 2 * var(--gap)), calc((100 * var(--vh) - 2 * var(--gap)) / (1 + var(--panel-h) / 100) * 4 / 3));
  --sh: calc(var(--sw) * 3 / 4);
  --u: calc(var(--sh) / 100);            /* 1 % de la hauteur de l'écran */
  --cover: 0%;                           /* rien ne cache le bas de l'image */
}
@media (max-height: 520px) { :root { --gap: 8px; } }
@media (max-aspect-ratio: 1/1) {
  :root { --gap: 0px; --sw: 100vw; --cover: 0%; }
}


*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(#1b181f 1px, transparent 1.5px) 0 0 / 6px 6px, var(--ink);
  color: var(--paper);
  font-family: var(--f-text);
  font-size: 1.25rem; line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pixel, .pixel-covers .cover, .sprite { image-rendering: pixelated; }

/* Curseurs pixel */
/* (les deux petites images sont intégrées ici : aucune requête en plus) */
:root { --cur: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAqElEQVR42u3YQQqAIBAF0F+0yw4grrz/oVpFB6jWtpowF0mBOmP+VSCBvb5DhEmNblKjA5P0YJZrQ1yk2AkNdLEuMwBAG+sAYNuPrgn5Qlyk+AuVlpIjVEpKnlBuKblCuaTkC6WWqkcolZR8IW3s4zp9dX6VkiNEEtSRML+Z1B29c++03ATC9VDwP5M61RPX06GYTK4u8etQ6c7w79DbG8I/JNXPoZZYTokDaQVFYex6AAAAAElFTkSuQmCC"); --cur-hot: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAhElEQVR42mNkIBHw8nD/xyb++ctXRgYqACaGQQbIdtCnYyYMn46ZDB4HDboQGnXQqINGHUQkYMRV8hICsJKZUv2DPoRYkEteooJU7yAjNp/+v2RPVEjxWZ0ZTUPDKw0xktsegqU5WJoYbQ+NOmjUQaMOonc5NGL6ZaNgFIyCUTAKBjsAAJuALOeWEH/4AAAAAElFTkSuQmCC"); }
.frame { cursor: var(--cur) 0 0, auto; }
.frame a, .frame button, .hotspot, .seller, .new-arrival, .box { cursor: var(--cur-hot) 15 13, pointer; }
.busy .seller, .busy .hotspot, .busy .new-arrival { cursor: var(--cur) 0 0, wait; }

/* =====================================================================
   MISE EN PAGE
   ===================================================================== */
.frame { display: grid; place-items: center; min-height: calc(100 * var(--vh)); padding: var(--gap); }
@media (max-aspect-ratio: 1/1) { .frame { display: block; padding: 0 0 28px; } }

/* =====================================================================
   L'ÉCRAN
   ===================================================================== */
.monitor {
  position: relative;
  width: var(--sw);
  background: #000;
  box-shadow: 0 0 0 4px #000, 0 0 0 7px #2c2832, 0 0 0 10px #000, 10px 12px 0 10px rgba(0, 0, 0, .45);
}
.screen { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.screen.power-on { animation: power-on 1s steps(14) both; }
@media (max-aspect-ratio: 1/1) {
  .monitor { box-shadow: 0 4px 0 #000; }
}

.view { position: absolute; inset: 0; }

/* =====================================================================
   FICHE CONTACT (la pancarte en haut à gauche)
   ===================================================================== */
.card {
  position: absolute; z-index: 8;
  left: var(--card-x); top: var(--card-y); width: var(--card-w);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.2) calc(var(--u) * 1.8);
  background: var(--card-paper); color: var(--card-ink);
  font-size: max(13px, calc(var(--u) * 2.8)); line-height: 1.05;
  /* bordure pixel à coins crantés */
  box-shadow: 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000, 7px 7px 0 rgba(0, 0, 0, .45);
}
.card-tape {
  position: absolute; left: 50%; top: calc(var(--u) * -1.4); width: 34%; height: calc(var(--u) * 2.8);
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 210, 63, .82);
}
.card-avatar { float: right; width: 28%; aspect-ratio: 1; margin: 0 0 .4em .6em; box-shadow: 0 0 0 3px #000; }
.card-name {
  margin: 0;
  font: italic 400 max(22px, calc(var(--u) * 6.4))/.86 var(--f-title); letter-spacing: -.01em;
  color: var(--card-name); overflow-wrap: anywhere;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
}
.card-name span { display: block; }
.card-role {
  display: inline-block; margin: .55em 0 0; padding: .35em .45em .25em;
  font: 700 max(10px, calc(var(--u) * 2.5))/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .08em;
  background: var(--card-ink); color: var(--card-paper);
}
.card-status { margin: .5em 0 0; display: flex; align-items: center; gap: .4em; color: #1f7a33; }
.card-status::before { content: ""; flex: none; width: .45em; height: .45em; background: #2fbf4f; animation: blink 1.4s steps(1) infinite; }
.card-bio { margin: .4em 0 0; color: #5a5146; }
.card-links { list-style: none; margin: .6em 0 0; padding: .5em 0 0; border-top: 2px dashed rgba(23, 19, 15, .35); display: grid; grid-template-columns: minmax(0, 1fr); gap: .1em; }
/* Écrans très bas (téléphone couché) : la pancarte suit la taille de l'écran, sans minimum */
@media (max-height: 520px) and (min-aspect-ratio: 1001/1000) {
  .card { font-size: calc(var(--u) * 2.8); }
  .card-name { font-size: calc(var(--u) * 6.4); }
  .card-role { font-size: calc(var(--u) * 2.5); }
}
.card-links a { display: flex; align-items: center; gap: .45em; padding: .12em .3em; margin: 0 -.3em; text-decoration: none; min-width: 0; }
.card-links a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-links a:hover, .card-links a:focus-visible { background: var(--card-ink); color: var(--gold); outline: none; }
.card-links svg { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; shape-rendering: crispEdges; }
.card.ping { animation: ping .4s steps(2) 4; }

/* Sur le rayon : la pancarte se replie (nom + icônes) */
@media (min-aspect-ratio: 1001/1000) {
  [data-view="shelf"] .card { width: auto; max-width: 60%; display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6); }
  [data-view="shelf"] .card-name { font-size: max(14px, calc(var(--u) * 3.2)); white-space: nowrap; }
  [data-view="shelf"] .card-name span { display: inline; }
  [data-view="shelf"] :is(.card-tape, .card-avatar, .card-role, .card-status, .card-bio) { display: none; }
  [data-view="shelf"] .card-links { display: flex; gap: .15em; margin: 0; padding: 0; border: 0; }
  [data-view="shelf"] .card-links a { margin: 0; padding: .2em; }
  [data-view="shelf"] .card-links a span { display: none; }
}

/* Téléphone debout : la fiche passe au-dessus de l'écran */
@media (max-aspect-ratio: 1/1) {
  .card {
    position: relative; z-index: 50; left: auto; top: auto; width: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
    padding: 18px 16px 14px; font-size: 1.35rem;
    box-shadow: 0 4px 0 #000;
  }
  .card > * { grid-column: 1; justify-self: start; }
  .card-tape, .card-avatar { display: none; }
  .card-name { font-size: clamp(32px, 12vw, 52px); }
  .card-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .card-links a { margin: 0; }
  .card > .card-settings { grid-column: 2; grid-row: 1 / span 3; }
}

/* =====================================================================
   MENU CAMÉSCOPE (langue + effets, en haut à droite)
   ===================================================================== */
.osd {
  position: absolute; z-index: 5; top: calc(var(--u) * 2.6); right: calc(var(--u) * 3);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.3);
  font: 700 max(9px, calc(var(--u) * 2.1))/1 var(--f-pixel); letter-spacing: .06em;
  text-shadow: 2px 2px 0 #000;
}
.has-detail .osd { display: none; }

.settings { display: flex; flex-direction: column; align-items: flex-end; gap: .45em; }
.setting { display: flex; align-items: center; gap: .3em; }
.setting-label { margin-right: .35em; font-weight: 400; text-transform: uppercase; opacity: .85; }
.pix-toggle { font: inherit; padding: .32em .42em .22em; color: var(--paper); text-shadow: inherit; }
.pix-toggle:hover { color: var(--gold); }
.pix-toggle[aria-pressed="true"] { background: var(--paper); color: var(--ink); text-shadow: none; box-shadow: 2px 2px 0 #000; }
.pix-toggle[aria-pressed="true"]:hover { background: var(--gold); }
.card-settings { display: none; }
@media (max-aspect-ratio: 1/1) {
  .osd { display: none; }
  .card-settings { display: flex; font: 700 10px/1 var(--f-pixel); letter-spacing: .06em; }
  .card-settings .pix-toggle { color: var(--card-ink); text-shadow: none; padding: 6px 7px 5px; }
  .card-settings .pix-toggle[aria-pressed="true"] { background: var(--card-ink); color: var(--card-paper); box-shadow: none; }
}

/* =====================================================================
   VUE 1 : BOUTIQUE
   ===================================================================== */
.cam { position: absolute; inset: 0; transform: scale(var(--cam-zoom)); animation: sway 14s ease-in-out infinite; }
.no-sway { --cam-zoom: 1; }   /* caméra fixe : plus besoin de zoomer pour cacher les bords */
.no-sway .cam { animation: none; }
.layer { position: absolute; }
.layer-bg, .hotspots { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer-bg { object-fit: cover; object-position: 50% var(--bg-y); scale: var(--bg-zoom); transform-origin: 50% var(--bg-y); }

/* Zones cliquables */
.hotspot { position: absolute; display: block; }
.debug .hotspot { outline: 2px dashed var(--gold); background: rgba(255, 210, 63, .15); }
.debug .hotspot::after { content: attr(data-debug); position: absolute; left: 2px; top: 2px; font: 9px/1 var(--f-pixel); color: var(--gold); text-shadow: 1px 1px 0 #000; }

.seller {
  position: absolute; left: var(--seller-left); top: var(--seller-top); width: var(--seller-w); height: var(--seller-h);
  pointer-events: none;   /* seul le personnage est cliquable, pas le vide autour */
}
.seller-media { position: absolute; inset: 0; display: grid; }
.seller-media > * { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; filter: var(--seller-filter); }
.seller-hit { position: absolute; left: 22%; right: 22%; top: 0; bottom: 0; pointer-events: auto; }
.sprite {
  aspect-ratio: 78 / 106;
  background-repeat: no-repeat;
  background-size: calc(var(--frames) * 100%) 100%;
  animation: sprite var(--dur) steps(var(--frames), jump-none) var(--iter) both;
}
.seller:hover .seller-media > * { filter: var(--seller-filter) drop-shadow(0 0 0 var(--gold)) drop-shadow(2px 0 0 var(--gold)) drop-shadow(-2px 0 0 var(--gold)); }
.seller.glitch-out .seller-media { animation: glitch-out .9s steps(10) forwards; }
.seller.gone .seller-media { visibility: hidden; }

/* Les nouveautés : elles lévitent au-dessus du tabouret "NEW" (positions dans site.js → scene.arrivals) */
.new-arrivals { position: absolute; inset: 0; pointer-events: none; }
.new-arrival {   /* point d'ancrage = l'endroit du tabouret au-dessus duquel flotte la boîte */
  position: absolute; width: 0; height: 0; pointer-events: none;
  --lift: calc(var(--u) * 3.2); --float: calc(var(--u) * 1.2);
}
.na-shadow {   /* ombre sur le bois, qui rétrécit quand la boîte monte */
  position: absolute; left: 0; top: 0; width: calc(var(--h) * .62); height: calc(var(--h) * .1);
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 20, 5, .55), transparent);
  animation: na-shadow var(--speed, 9s) ease-in-out var(--delay, 0s) infinite;
}
.na-box {
  position: absolute; left: 0; bottom: var(--lift); height: var(--h); aspect-ratio: 27 / 38;
  translate: -50% 0; pointer-events: auto;
  animation: na-float var(--speed, 9s) ease-in-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 0 #000);
}
.na-box .tb { position: absolute; inset: 0; transition: transform .25s steps(3); }
.new-arrival:hover .na-box .tb, .new-arrival:focus-visible .na-box .tb { transform: translateY(-8%) scale(1.06); }
.new-arrival:focus-visible { outline: none; }
.new-arrival:focus-visible .tb-front { box-shadow: 0 0 0 2px var(--gold); }
.tb-front { position: absolute; inset: 0; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.tb-front img { width: 100%; height: 100%; object-fit: cover; filter: var(--boxes-filter); }
.tb-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.22), transparent 38%), linear-gradient(90deg, rgba(0,0,0,.35) 0 5%, transparent 5%); }
.tb-side {   /* la tranche, vue de biais (le vendeur est à gauche des boîtes) */
  position: absolute; top: 0; right: 100%; width: 9%; height: 100%;
  background: var(--spine, #222); filter: brightness(.6);
  transform-origin: 100% 50%; transform: skewY(-12deg);
}
@keyframes na-float { 0%, 100% { translate: -50% 0; } 50% { translate: -50% calc(var(--float) * -1); } }
@keyframes na-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .8; opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .na-box, .na-shadow { animation: none; } }

/* Pastille étoilée "NEW" (comptoir et rayon) */
.badge {
  position: absolute; z-index: 4; top: -.55em; right: -.75em; pointer-events: none;
  font: 700 max(7px, calc(var(--u) * 1.35))/1 var(--f-pixel); text-transform: uppercase;
  filter: drop-shadow(2px 2px 0 #000);
  animation: badge 2.4s steps(2) infinite;
}
.badge span {   /* autocollant de prix octogonal, cerclé de blanc */
  display: grid; place-items: center; width: 3.7em; aspect-ratio: 1;
  padding-top: .1em;
  background: var(--cta); color: var(--cta-ink);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: inset 0 0 0 .22em var(--cta), inset 0 0 0 .34em var(--cta-ink);
}
@keyframes badge { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-6deg) translateY(-2px); } }

/* Bulle (style mockup : noire, texte pixel, coins crantés) */
/* Bulle : à droite de la tête, pointe vers la bouche, derrière le vendeur */
.bubble {
  position: absolute;
  top: var(--bubble-y); left: calc(var(--seller-x) + var(--bubble-dx));
  width: max-content; max-width: var(--bubble-w);
  text-wrap: pretty;      /* lignes bien remplies, pas de mot tout seul à la fin */
  overflow-wrap: break-word; hyphens: none;
  padding: .3em .9em .45em .65em;
  background: #0d0c0b; color: var(--paper);
  font-size: max(12px, calc(var(--u) * 3.2)); line-height: 1.05; text-align: left;
  box-shadow: 0 -3px 0 var(--paper), 0 3px 0 var(--paper), -3px 0 0 var(--paper), 3px 0 0 var(--paper), 6px 6px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
}
.bubble::after {   /* pointe en escalier, vers la gauche */
  content: ""; position: absolute; right: calc(100% + 3px); top: calc(var(--u) * 2.2); width: 12px; height: 12px;
  background: var(--paper);
  clip-path: polygon(100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 33%, 0 33%, 0 0);
}
.bubble .ghost { visibility: hidden; }
.bubble { transition: opacity .4s steps(4); }
.bubble.fade { opacity: 0; }
/* Téléphone : l'écran est trop petit pour une bulle à côté de la tête :
   elle se pose en bas de l'image, sur toute la largeur, et pointe vers le haut */
@media (max-aspect-ratio: 1/1) {
  .bubble { z-index: 4; top: auto; bottom: 4%; left: 3%; right: 3%; width: auto; max-width: none; font-size: 15px; line-height: 1.2; padding: .45em .7em .5em; }
  .bubble::after { right: auto; left: 44%; top: auto; bottom: calc(100% + 3px); clip-path: polygon(0 100%, 100% 100%, 100% 66%, 66% 66%, 66% 33%, 33% 33%, 33% 0, 0 0); }
}
/* ▼ "suite" : dans le coin, hors du texte (sinon il ferait passer le dernier mot à la ligne) */
.bubble-more { display: none; position: absolute; right: .3em; bottom: -.15em; font-size: .7em; color: var(--gold); animation: blink .8s steps(1) infinite; }
.bubble.has-more .bubble-more { display: block; }

/* =====================================================================
   INTERFACE POINT & CLICK (en bas de l'écran)
   ===================================================================== */
.panel {   /* sous l'écran, comme dans les vieux point & click */
  position: relative; z-index: 10; height: calc(var(--u) * var(--panel-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  background: var(--ink);
  border-top: 3px solid #2c2832;
  box-shadow: inset 0 3px 0 #000;
  overflow: hidden;       /* jamais de barre : main.js rapetisse les choix pour qu'ils tiennent */
}
.action-line {   /* en surimpression en bas de l'image, comme dans les vieux point & click */
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(var(--u) * 2); margin: 0;
  pointer-events: none;
  font: 700 max(10px, calc(var(--u) * 2.8))/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .05em;
  color: var(--action); text-align: center;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.choices { list-style: none; margin: 0; padding: 0; transition: opacity .2s; --fit: 1; }
.choices.two-cols {   /* 5 choix ou plus : deux colonnes, qui se lisent de haut en bas */
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column;
  column-gap: calc(var(--u) * 3);
}
.busy .choices { opacity: .3; pointer-events: none; }
.choice {   /* le numéro à gauche, le texte aligné à côté même s'il passe à la ligne */
  position: relative; display: flex; gap: .5em; align-items: baseline; width: 100%;
  padding: .04em 0 .04em 1.2em;
  text-align: left; color: var(--choice);
  font-size: calc(max(16px, var(--u) * var(--choice-size)) * var(--fit)); line-height: 1.02;
}
.choice::before { content: "▶"; position: absolute; left: 0; font-size: .7em; top: .3em; opacity: 0; }
.choice:hover, .choice:focus-visible { color: var(--gold); outline: none; }
.choice:hover::before, .choice:focus-visible::before { opacity: 1; animation: nudge .5s steps(2) infinite; }
.choice-key { flex: none; font-size: .7em; opacity: .45; }
@media (hover: none) { .choice-key, .action-line { display: none; } }
@media (max-aspect-ratio: 1/1) {
  .panel { position: relative; height: auto; padding: 12px 16px 14px; border-top-width: 4px; }
  .choice { font-size: 1.45rem; padding-top: .15em; padding-bottom: .15em; }
  .choices.two-cols { display: block; }
}

/* =====================================================================
   BOÎTE DE JEU 3D
   ===================================================================== */
.box {
  --depth: calc(var(--u) * 1.8); --turn: 16deg; --lift: 0px;
  position: relative; display: block; isolation: isolate;
  aspect-ratio: 27 / 38; width: 100%;
  perspective: calc(var(--u) * 120);
  text-decoration: none;
}
.box::after { content: ""; position: absolute; left: 6%; right: -4%; bottom: -5%; height: 6%; background: rgba(0, 0, 0, .55); z-index: -1; }
.box-3d {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(var(--lift)) rotateY(calc(var(--turn) + var(--ry, 0deg))) rotateX(var(--rx, 0deg));
  transition: transform .3s steps(6);
}
.box-front { position: absolute; inset: 0; overflow: hidden; background: #111; transform: translateZ(calc(var(--depth) / 2)); }
.box-front img { width: 100%; height: 100%; object-fit: cover; }
.box-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0 3%, rgba(255,255,255,.2) 3% 5%, transparent 5%); }
.box-spine {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--depth);
  background: var(--spine, #222);
  box-shadow: inset 2px 0 0 rgba(255,255,255,.12), inset -2px 0 0 rgba(0,0,0,.3);
  transform: translateX(calc(var(--depth) / -2)) rotateY(-90deg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.box-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 8px/1 var(--f-pixel); text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.8); }
a.box:hover, a.box:focus-visible { --turn: 3deg; --lift: calc(var(--u) * -1.5); }
a.box:focus-visible { outline: none; }
a.box:hover .box-front, a.box:focus-visible .box-front { box-shadow: 0 0 0 3px var(--gold); }
.flip-clone { position: fixed !important; z-index: 200; margin: 0; transform-origin: 0 0; pointer-events: none; }

/* =====================================================================
   VUE 2 : LE RAYON
   ===================================================================== */
.shelf { bottom: var(--cover); }
.shelf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shelf-scroll {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 15.5) calc(var(--u) * 4) calc(var(--u) * 3);
  scrollbar-width: thin; scrollbar-color: var(--paper) #000;
}
.shelf-title {
  position: absolute; top: calc(var(--u) * 3); left: 50%; transform: translateX(-50%); margin: 0;
  font: italic 400 max(18px, calc(var(--u) * 5.4))/1 var(--f-title);
  color: var(--paper); text-shadow: 2px 0 0 var(--accent), -2px 0 0 #3caaff;
}
.shelf-grid {
  list-style: none; margin: auto 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(74px, calc(var(--u) * var(--box-h) * .82)), 1fr));
  column-gap: 0; row-gap: calc(var(--u) * 5);
}
.shelf-item { isolation: isolate; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 calc(var(--u) * 1.4) calc(var(--tag-h) + var(--u) * 2.4); --tag-h: max(36px, calc(var(--u) * 7.6)); }
.shelf-item .box { width: auto; height: max(90px, calc(var(--u) * var(--box-h))); }
.shelf-item::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: calc(var(--tag-h) - var(--u) * .2); height: calc(var(--u) * 2.6);
  background: linear-gradient(#b08050 0 25%, #7c5130 25% 70%, #4a2d17 70%);
  box-shadow: 0 calc(var(--u) * 1.2) 0 rgba(0, 0, 0, .5);
}
.grid-in .shelf-item { animation: drop-in .4s steps(5) backwards; animation-delay: calc(var(--i) * 60ms + 100ms); }
.stand {   /* l'étiquette de prix accrochée à la planche : taille fixe, jamais de chevauchement */
  position: absolute; z-index: 2; bottom: calc(var(--u) * .4); left: 50%; transform: translateX(-50%) rotate(var(--tilt, -1.5deg));
  width: min(86%, max(70px, calc(var(--u) * var(--box-h) * .78))); height: var(--tag-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em;
  padding: calc(var(--u) * .6) calc(var(--u) * .8);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 3px 4px 0 2px rgba(0, 0, 0, .45);
  text-align: center;
}
.stand::before {   /* l'attache */
  content: ""; position: absolute; top: calc(var(--u) * -1.3); left: 50%; width: 2px; height: calc(var(--u) * 1.3); background: #000;
}
.shelf-item:nth-child(even) .stand { --tilt: 1.2deg; }
.stand-title {
  font: 700 max(7px, calc(var(--u) * 1.75))/1.15 var(--f-pixel); text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
/* petits écrans : police plus étroite et lisible pour les titres */
@media (max-aspect-ratio: 1/1), (max-height: 600px) {
  .shelf-item { --tag-h: 44px; }
  .stand { width: 94%; gap: 2px; padding: 3px 4px; }
  .stand-title { font: 400 14px/.95 var(--f-text); letter-spacing: .02em; }
}
.stand-year { font-size: max(11px, calc(var(--u) * 2.3)); line-height: 1; color: var(--accent); }
.shelf-box { position: relative; display: block; }
.shelf-box .badge { font-size: max(8px, calc(var(--u) * 1.6)); top: -.5em; right: -.6em; }
.whisper {
  position: absolute; z-index: 6; left: 50%; bottom: calc(var(--u) * 4); margin: 0;
  transform: translateX(-50%); max-width: 90%; padding: .1em .6em;
  background: #000; color: #d8d1c4; font-size: max(14px, calc(var(--u) * 3.8));
  opacity: 0; transition: opacity .8s steps(4); pointer-events: none;
}
.whisper.show { opacity: 1; }

/* =====================================================================
   VUE 3 : FICHE PROJET
   ===================================================================== */
.detail {
  position: absolute; inset: 0; z-index: 20;
  overflow-y: auto; overscroll-behavior: contain;
  background: #121014; outline: none;
  container-type: inline-size;
  scrollbar-width: thin; scrollbar-color: var(--paper) #000;
}
@media (max-aspect-ratio: 1/1) { .detail { position: fixed; z-index: 100; } }
/* Tailles de texte de la fiche projet : elles suivent la largeur de l'écran.
   Pour tout agrandir ou réduire, change ces valeurs (min, proportion, max). */
.detail {
  --t-body:    clamp(20px, 2.6cqw, 40px);    /* textes, listes */
  --t-lead:    clamp(22px, 3cqw, 46px);      /* phrase d'accroche, citations */
  --t-meta:    clamp(19px, 2.35cqw, 36px);   /* valeurs de la fiche récap */
  --t-caption: clamp(17px, 2cqw, 30px);      /* légendes des images */
  --t-h2:      clamp(14px, 1.65cqw, 25px);   /* titres de section */
  --t-label:   clamp(13px, 1.75cqw, 27px);   /* petites étiquettes (ANNÉE, RÔLE, onglets, boutons) */
}
.detail-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: clamp(12px, 1.6cqw, 26px);
  padding: clamp(10px, 1.2cqw, 20px) clamp(12px, 1.8cqw, 30px); background: var(--bar);
  border-bottom: 3px solid #000;
  font: 700 clamp(14px, 1.9cqw, 30px)/1 var(--f-pixel); text-transform: uppercase;
}
.bar-name { font: italic 400 clamp(24px, 3.2cqw, 50px)/1 var(--f-title); text-transform: none; color: var(--paper); text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-links { display: flex; gap: 2px; flex: none; }
@media (max-width: 520px) { .bar-links { display: none; } }
.bar-links a { display: grid; place-items: center; padding: clamp(5px, .6cqw, 10px); }
.bar-links a:hover, .bar-links a:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.bar-links svg { width: clamp(20px, 2.4cqw, 36px); height: clamp(20px, 2.4cqw, 36px); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; shape-rendering: crispEdges; }
.detail-bar .settings { margin-left: auto; flex-direction: row; font-size: clamp(14px, 1.9cqw, 30px); text-shadow: none; }
.detail-bar .setting-label { display: none; }
.detail-bar .settings { gap: clamp(10px, 1.2cqw, 20px); }
.bar-sound { margin-right: 2px; font-size: 1.2em; }
.back-btn { flex: none; text-decoration: none; padding: .5em .8em .42em; background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 #000; }
.back-btn:hover { background: var(--gold); }

.detail-inner {
  display: grid; gap: 22px 32px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "side" "main";
  padding: 20px clamp(14px, 4cqw, 36px) 48px;
}
@container (min-width: 700px) {
  .detail-inner { grid-template-columns: minmax(200px, 30cqw) minmax(0, 1fr); grid-template-areas: "side head" "side main"; grid-template-rows: auto 1fr; }
  .detail-side { position: sticky; top: 56px; align-self: start; }
  .detail-head { align-self: end; }
}
.detail-head { grid-area: head; min-width: 0; }
.detail-main { grid-area: main; min-width: 0; }
.detail-side { grid-area: side; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.big-box-wrap { width: min(46cqw, 200px); padding: 4px 0 8px; }
@container (min-width: 700px) { .big-box-wrap { width: min(100%, 22cqw); } }
.box--big { --depth: 22px; animation: turntable 8s steps(16) infinite; }
.box--big .box-spine span { font-size: 11px; }
@property --turn { syntax: "<angle>"; inherits: true; initial-value: 16deg; }
@keyframes turntable { 0%, 100% { --turn: 24deg; } 50% { --turn: -10deg; } }

.meta-card { width: 100%; margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .3em .8em; padding: .8em 1em; font-size: var(--t-meta); background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 #000; }
.meta-card dt { font: 700 var(--t-label)/1.9 var(--f-pixel); text-transform: uppercase; opacity: .6; }
.meta-card dd { margin: 0; font-size: var(--t-meta); line-height: 1.05; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pix-btn {   /* bouton rétro : bordure pixel crantée + relief */
  display: inline-block; padding: .8em 1.15em 1em; margin-bottom: 3px;
  font: 700 var(--t-label)/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  color: var(--cta-ink); background: var(--cta);
  box-shadow: 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000,
              inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -.35em 0 var(--cta-dark),
              6px 7px 0 rgba(0, 0, 0, .45);
  text-shadow: 2px 2px 0 var(--cta-dark);
  transition: transform .08s steps(2);
}
.pix-btn:hover { filter: brightness(1.12); }
.pix-btn:active { transform: translateY(3px); box-shadow: 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000, inset 0 3px 0 rgba(0, 0, 0, .25), 3px 3px 0 rgba(0, 0, 0, .45); }

.detail-title { margin: 0 0 6px; font: italic 400 clamp(2.6rem, 8.5cqw, 6.5rem)/.95 var(--f-title); overflow-wrap: anywhere; text-shadow: 2px 0 0 var(--accent), -2px 0 0 #3caaff; }
.tagline { margin: .2em 0 0; font-size: var(--t-lead); line-height: 1.1; color: #cfc7b8; }

.videos { margin-bottom: 30px; }
.tabs { display: flex; gap: 4px; padding-left: 10px; }
.tabs button { font: 700 var(--t-label)/1 var(--f-pixel); text-transform: uppercase; padding: .55em .75em .5em; background: #2a2630; color: #bbb; }
.tabs button[aria-selected="true"] { background: #3a3542; color: var(--gold); }
.tv { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 0 0 8px #3a3542, 0 0 0 11px #000, 8px 8px 0 11px rgba(0,0,0,.4); margin: 11px; }
.tv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.tv iframe, .tv video, .tv-facade, .tv-facade img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.tv-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 46px; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 0 3px #000, 4px 4px 0 3px #000; }
.tv-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border: 11px solid transparent; border-left: 17px solid var(--paper); border-right: 0; }
.tv-facade:hover .tv-play { background: var(--gold); }
.tv-empty { position: absolute; inset: 0; display: grid; place-items: center; background: #1b1a1e; }
.tv-empty::before { content: ""; position: absolute; inset: -40px; background: var(--noise); opacity: .5; animation: grain .4s steps(4) infinite; }
.tv-empty span { position: relative; font: 700 var(--t-h2)/1 var(--f-pixel); text-transform: uppercase; background: #000; padding: 8px 12px; }

.blk { margin: 0 0 1.6em; font-size: var(--t-body); }
.blk h2 { display: inline-block; margin: 0 0 .7em; font: italic 400 calc(var(--t-h2) * 1.7)/1 var(--f-title); padding: 4px 12px 6px; background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 #000; }
.prose { font-size: var(--t-body); line-height: 1.2; max-width: 60ch; }
.prose p { margin: 0 0 .7em; }
.prose strong { color: var(--gold); font-weight: 400; }
.prose em { color: #ff8a80; font-style: normal; }
.prose a { color: var(--gold); }
.blk-list ul { margin: 0; padding: 0; list-style: none; font-size: var(--t-body); line-height: 1.15; }
.blk-list li { padding-left: 1.3em; position: relative; margin-bottom: .3em; }
.blk-list li::before { content: "■"; position: absolute; left: 0; color: var(--accent); font-size: .75em; top: .2em; }
.blk-quote { margin: 0 0 1.6em; font-size: var(--t-body); padding: 12px 16px; border-left: 4px solid var(--accent); background: rgba(255,255,255,.04); }
.blk-quote p { margin: 0 0 .3em; font-size: var(--t-lead); line-height: 1.1; }
.blk-quote cite { font: var(--t-label)/1 var(--f-pixel); text-transform: uppercase; opacity: .7; font-style: normal; }
.snap { margin: 0; padding: 6px 6px 0; background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 #000; }
.snap-btn { display: block; width: 100%; cursor: zoom-in; }
.snap img { width: 100%; height: auto; background: #222; }
.snap figcaption { padding: .3em .1em .4em; font-size: var(--t-caption); }
.snap:not(:has(figcaption)) { padding-bottom: 6px; }
.blk-image:not(.wide) .snap { max-width: min(100%, 44cqw); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(max(200px, 26cqw), 100%), 1fr)); gap: 18px; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; color: var(--paper); cursor: zoom-out; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox img { max-width: 94vw; max-height: 84vh; object-fit: contain; image-rendering: pixelated; }
.lightbox p { text-align: center; margin: 8px 0 0; }

/* =====================================================================
   EFFETS (par-dessus l'écran)
   ===================================================================== */
:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-scan { z-index: 30; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); }
.fx-vignette { z-index: 31; background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.fx-grain { z-index: 32; opacity: .07; }
.fx-grain::before { content: ""; position: absolute; inset: -60px; background: var(--noise); animation: grain .5s steps(5) infinite; }
.no-fx .fx-scan, .no-fx .fx-grain, .no-fx .fx-vignette { display: none; }
.static .fx-grain { opacity: .45; }
.static .cam, .static .shelf-grid { animation: jitter .12s steps(2) infinite; }
.fx-black { z-index: 40; background: #000; opacity: 1; transition: opacity .4s steps(6); }
.fx-hands { z-index: 41; visibility: hidden; }
.fx-hands::before { content: ""; position: absolute; inset: 0; background: #050404; opacity: 0; }
.fx-hands.play { visibility: visible; }
.fx-hands.play::before { animation: hands-dark var(--dur) steps(12) forwards; }
.fx-hands.custom::before { display: none; }
.hands-custom { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card, .osd { transition: opacity .35s; }
.blinded .card, .blinded .osd { opacity: 0; transition-duration: .15s; }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes blink { 50% { opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes ping { 50% { transform: translate(-4px, -2px); } }
@keyframes sway {
  0%, 100% { transform: scale(var(--cam-zoom)) translate(0, 0) rotate(0); }
  25% { transform: scale(var(--cam-zoom)) translate(-.3%, .2%) rotate(-.18deg); }
  50% { transform: scale(var(--cam-zoom)) translate(.15%, -.15%) rotate(.1deg); }
  75% { transform: scale(var(--cam-zoom)) translate(.3%, .15%) rotate(.2deg); }
}
@keyframes power-on {
  0% { transform: scale(1, .004); filter: brightness(4); }
  35% { transform: scale(1, .004); filter: brightness(4); }
  55% { transform: scale(1, 1); filter: brightness(2) contrast(1.5); }
  100% { transform: none; filter: none; }
}
@keyframes sprite { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(18px, -26px); } 60% { transform: translate(-12px, -8px); } 80% { transform: translate(26px, 20px); } }
@keyframes jitter { 0% { transform: scale(var(--cam-zoom)) translate(3px, -1px); } 100% { transform: scale(var(--cam-zoom)) translate(-3px, 1px); } }
@keyframes glitch-out {
  0% { opacity: 1; clip-path: inset(0); transform: none; }
  15% { clip-path: inset(10% 0 55% 0); transform: translateX(-10%); }
  25% { clip-path: inset(0); transform: translateX(8%); filter: hue-rotate(90deg) contrast(1.6); }
  40% { opacity: .3; clip-path: inset(40% 0 20% 0); transform: translateX(-4%); }
  50% { opacity: 1; clip-path: inset(0); transform: none; filter: invert(1); }
  60% { opacity: .15; filter: none; }
  70% { opacity: .9; clip-path: inset(0 0 70% 0); transform: translateX(12%); }
  85% { opacity: .4; clip-path: inset(60% 0 0 0); transform: scaleX(1.3) scaleY(.05); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: scaleX(1.6) scaleY(.01); }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-20px); } }
@keyframes hands-dark { 0% { opacity: 0; } 30%, 58% { opacity: 1; } 90%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fx-grain::before, .sprite { animation: none !important; }
}