/* Charte A « Salle obscure » : thème sombre unique, accent or, angles droits. */
@font-face { font-family: "Antonio"; src: url("/polices/antonio-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/polices/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --fond: #0b0b0c;
  --ecran: #050505;
  --texte: #ece8e1;
  --doux: #9a958d;
  --trait: #2a2826;
  --or: #f5a524;
  --f-titre: "Antonio", "Arial Narrow", sans-serif;
  --f-texte: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--f-texte); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border-radius: 0; }

#entree, #fin { min-height: 100dvh; max-width: 1100px; margin: 0 auto; padding: clamp(24px, 6vw, 72px) 16px; display: flex; flex-direction: column; justify-content: center; }
.logo { display: block; width: clamp(140px, 18vw, 220px); height: auto; }
h1 { font-family: var(--f-titre); font-weight: 200; text-transform: uppercase; font-size: clamp(3rem, 9vw, 6.5rem); line-height: .9; letter-spacing: .01em; margin: 2.5rem 0 2rem; }

form { display: grid; gap: .6rem; max-width: 420px; }
label { font-family: var(--f-mono); font-size: .8rem; color: var(--doux); text-transform: uppercase; letter-spacing: .08em; }
input#code { font-family: var(--f-mono); font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--texte); border: 1px solid var(--trait); border-radius: 0; padding: .85rem 1rem; }
input#code::placeholder { color: #6f6a63; }
input#code:focus { outline: none; border-color: var(--or); }
#erreur { min-height: 1.4em; margin: 0; color: var(--or); font-size: .95rem; }
form button { justify-self: start; background: var(--or); color: #120c02; border: 0; padding: .8rem 2.2rem; font-weight: 600; letter-spacing: .04em; transition: transform .15s ease; }
form button:active { transform: translateY(1px); }
form button:disabled { opacity: .6; cursor: wait; }
.note, #fin-msg { color: var(--doux); max-width: 46ch; line-height: 1.6; margin-top: 3rem; }
#fin-msg { font-size: 1.15rem; color: var(--texte); }

#salle { min-height: 100dvh; display: flex; flex-direction: column; }
#salle header { display: flex; align-items: center; gap: 1.25rem; padding: 14px 16px; max-width: 1600px; width: 100%; margin: 0 auto; }
#salle header .logo { width: 96px; }
h2 { font-family: var(--f-titre); font-weight: 300; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .02em; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discret { background: none; border: 1px solid var(--trait); color: var(--doux); padding: .45rem 1rem; }
.discret:hover { color: var(--texte); border-color: var(--doux); }

#scene { position: relative; width: 100%; max-width: 1600px; margin: auto; background: var(--ecran); aspect-ratio: 16 / 9; max-height: calc(100dvh - 72px); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#scene video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--ecran); }
#scene:fullscreen, #scene:-webkit-full-screen { max-width: none; max-height: none; width: 100vw; height: 100vh; aspect-ratio: auto; }
/* iPhone : pas de plein écran d'élément, la scène remplit l'écran en CSS pour garder le filigrane. */
#scene.plein { position: fixed; inset: 0; z-index: 10; max-width: none; max-height: none; width: 100vw; height: 100dvh; aspect-ratio: auto; }
body.fige { overflow: hidden; }

#filigrane { position: absolute; top: 0; left: 0; pointer-events: none; font-family: var(--f-mono); font-size: clamp(11px, 1.5vw, 18px); color: #fff; opacity: .3; white-space: nowrap; text-shadow: 0 0 2px #000; will-change: transform; }

#controles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 28px 16px 14px; background: linear-gradient(transparent, rgb(5 5 5 / .85)); transition: opacity .3s ease; }
#scene.repos #controles { opacity: 0; pointer-events: none; }
#scene.repos { cursor: none; }
#controles button { background: none; border: 1px solid rgb(245 165 36 / .5); color: var(--texte); padding: .4rem .9rem; font-size: .9rem; min-width: 6.5rem; }
#controles button:hover, #controles button:focus-visible { border-color: var(--or); color: var(--or); outline: none; }
#temps { font-family: var(--f-mono); font-size: .8rem; color: var(--doux); white-space: nowrap; }
#controles input[type="range"] { accent-color: var(--or); }
#barre { flex: 1; min-width: 0; }
#volume { width: 90px; }

@media (max-width: 640px) {
  #salle header .logo { width: 72px; }
  #controles { gap: 8px; padding: 20px 10px 10px; flex-wrap: wrap; }
  #barre { order: -1; flex-basis: 100%; }
  #volume { display: none; }
  #controles button { min-width: 0; padding: .4rem .7rem; }
  #temps { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }