/* Polices auto-hébergées (licence OFL) : aucune requête vers Google Fonts. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/unbounded-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('fonts/unbounded-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Polices de la plateforme : Barlow Condensed pour les titres, Manrope pour le texte.
   Le logo garde Unbounded ; chaque room garde sa propre typographie. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/barlow-condensed-latin-700-italic.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/barlow-condensed-latin-ext-700-italic.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/barlow-condensed-latin-600-italic.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/barlow-condensed-latin-ext-600-italic.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Limelight';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/limelight-latin-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Limelight';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/limelight-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Univers visuels ------------------------------------------------------
   La plateforme est claire et colorée, façon affiches de jeu. Chaque room
   redéfinit les mêmes variables pour plonger les joueurs dans son ambiance. */

:root {
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

body[data-theme='platform'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Fond sombre ; le beige reste sur les contours et les ombres, pour détourer les visuels. */
  --bg: #16120f;
  --surface: #221c17;
  --panel: var(--surface);
  --panel-2: #2c241e;
  --text: #f6f0e4;
  --muted: #b8ac9b;
  --line: #e9dfcc;
  --accent: #ff5a36;
  --accent-ink: #1a1512;
  --accent-2: #ff8a6b;
  --sun: #ffc94a;
  --sky: #a9c8ff;
  --rose: #ffb3c4;
  --ok: #7ad69a;
  --danger: #ff6b6b;
  --warning: #ffb547;
  --input-bg: #0f0c0a;
  --border-w: 2px;
  --radius: 18px;
  --shadow: 5px 5px 0 var(--line);
  --button-shadow: 3px 3px 0 var(--line);
  color-scheme: dark;
  background: var(--bg);
}

body[data-theme='halcyon'] {
  --bg: #02121c;
  --surface: rgba(7, 34, 50, 0.82);
  --panel: var(--surface);
  --panel-2: #0c3045;
  --text: #e2f3f8;
  --muted: #93b9c6;
  --line: #1f5470;
  --accent: #ffb547;
  --accent-ink: #261600;
  --accent-2: #7fdbff;
  --ok: #8be38b;
  --danger: #ff6b5b;
  --warning: #ffb547;
  --input-bg: rgba(1, 12, 19, 0.85);
  --border-w: 1px;
  --radius: 14px;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, #0f4d68 0%, #052235 45%, var(--bg) 100%)
    fixed var(--bg);
}

/* Le Dernier Train pour Vienne : art déco, bordeaux et or, documents tapés à la machine. */
body[data-theme='train-vienne'] {
  --display: 'Limelight', 'Didot', Georgia, serif;
  --bg: #160a0f;
  --surface: rgba(44, 17, 26, 0.92);
  --panel: var(--surface);
  --panel-2: #3a1722;
  --text: #f4e7cd;
  --muted: #c9ae8a;
  --line: #7d5e33;
  --accent: #e3b85c;
  --accent-ink: #1e0c10;
  --accent-2: #f0d08a;
  --ok: #a6dca8;
  --danger: #ff8a7a;
  --warning: #e3b85c;
  --input-bg: rgba(15, 5, 9, 0.85);
  --border-w: 1px;
  --radius: 4px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background:
    repeating-conic-gradient(
        from 0deg at 50% -10%,
        rgba(227, 184, 92, 0.06) 0deg 4deg,
        transparent 4deg 12deg
      )
      fixed,
    radial-gradient(ellipse 120% 70% at 50% 0%, #4a1626 0%, #220c14 50%, var(--bg) 100%) fixed
      var(--bg);
}

/* --- Base ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

/* Le texte remplit ses lignes ; typeset() (util.js) évite seulement les coupures gênantes :
   ponctuation ou unité seule en début de ligne, petit mot seul en fin de paragraphe. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 17px/1.55 var(--body);
}

h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0 0 10px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
}

h2 {
  font-size: 20px;
  font-weight: 600;
}

h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

p {
  margin: 0 0 10px;
}

a {
  color: var(--accent-2);
}

main {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 14px;
}

.mono {
  font-family: var(--mono);
}

.error {
  color: var(--danger);
  min-height: 1.5em;
  font-weight: 600;
}

.solved {
  color: var(--ok);
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.row.space {
  justify-content: space-between;
}

.row > input {
  flex: 1;
  min-width: 140px;
  margin: 0;
}

.scroll-x {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
}

/* --- En-tête --------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--line);
}

/* Sur la plateforme, la barre est beige pour se détacher du fond sombre. Les couleurs
   sont redéfinies pour son contenu : logo, menu, pastille « Rejoindre ». Une fois la page
   descendue, elle devient translucide et floute ce qui passe dessous. */
body[data-theme='platform'] .topbar {
  --bg: #e9dfcc;
  --surface: #e9dfcc;
  --text: #1a1512;
  --muted: #5a5048;
  --line: #1a1512;
  background: #e9dfcc;
  border-bottom-color: #e9dfcc;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

body[data-theme='platform'].scrolled .topbar {
  background: rgba(233, 223, 204, 0.78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Blocs de couleur claire (jaune, bleu, rose) sur le fond sombre : texte foncé. */
body[data-theme='platform'] :is(.offer-visual, .vote.chosen, mark, .how-icon) {
  --text: #1a1512;
  --muted: #5a5048;
  --surface: #fffbf3;
  --accent-2: #c4371a;
  color: #1a1512;
}

body[data-theme='halcyon'] .topbar {
  background: rgba(2, 18, 28, 0.72);
  backdrop-filter: blur(8px);
}

.brand {
  font-family: 'Unbounded', system-ui, sans-serif !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.brand svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.brand .keyhole {
  fill: var(--bg);
}

#status {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  text-align: right;
}

/* Menu hors partie : offres, compte, et « Rejoindre » en pastille. */
.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
}

#status .topnav a {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

#status .topnav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

#status .pill-link {
  border: var(--border-w) solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--surface);
}

#status .topnav .nav-icon {
  display: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* La barre porte tout le menu sur grand écran ; elle s'allège à mesure que la place manque,
   et le menu latéral ne revient que sur téléphone. */
@media (max-width: 1100px) {
  #status .topnav .nav-wider {
    display: none;
  }
}

@media (max-width: 920px) {
  #status .topnav .nav-wide {
    display: none;
  }
}

@media (max-width: 480px) {
  .topnav {
    gap: 16px;
  }

  #status .topnav .nav-icon {
    display: block;
  }

  #status .nav-label,
  #status .pill-link,
  #status .topnav a[href='#/offres'] {
    display: none;
  }
}

#status .timer {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

#status .timer.low {
  color: var(--danger);
}

/* --- Composants -------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.narrow {
  max-width: 480px;
  margin: 32px auto;
}

input,
textarea,
button,
.button {
  font: inherit;
}

input,
textarea {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 12px;
  color: var(--text);
  background: var(--input-bg);
  border: var(--border-w) solid var(--line);
  border-radius: 10px;
}

label,
legend {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

input:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

button,
.button {
  display: inline-block;
  padding: 12px 20px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--border-w) solid var(--line);
  border-radius: 999px;
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

button:hover:not(:disabled),
.button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--line);
}

button:active:not(:disabled),
.button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--line);
}

button.ghost,
.button.ghost {
  background: var(--surface);
  color: var(--text);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body[data-theme='halcyon'] button,
body[data-theme='halcyon'] .button {
  border-color: var(--accent);
}

body[data-theme='halcyon'] button:hover:not(:disabled),
body[data-theme='halcyon'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(255, 181, 71, 0.45);
}

body[data-theme='halcyon'] button.ghost,
body[data-theme='halcyon'] .button.ghost {
  background: transparent;
  color: var(--accent);
}

.eyebrow {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  margin-bottom: 12px;
}

.lead {
  font-size: 19px;
  margin-bottom: 22px;
}

.back {
  display: inline-block;
  margin: 8px 0 16px;
  font-weight: 600;
  text-decoration: none;
}

.warning {
  border-color: var(--warning);
  color: var(--warning);
  font-weight: 600;
}

.difficulty {
  color: var(--accent);
  letter-spacing: 2px;
  font-size: 12px;
  white-space: nowrap;
}

.difficulty .off {
  color: var(--muted);
  opacity: 0.35;
}

.chips {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  border: var(--border-w) solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 600;
}

.two-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.two-cols ul {
  padding-left: 20px;
  margin-top: 0;
}

.two-cols li {
  margin-bottom: 6px;
}

/* --- Accueil ----------------------------------------------------------------- */

.hero-actions {
  gap: 14px;
}

/* Bouton secondaire : contour clair, sans aplat ni ombre portée. */
.button.outline {
  background: transparent;
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 55%, transparent);
  box-shadow: none;
}

.button.outline:hover {
  border-color: var(--text);
  box-shadow: none;
  transform: none;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* --- Hero vidéo ----------------------------------------------------------------------
   Pleine largeur sous la barre : la vidéo des rooms en fond, un voile sombre à gauche
   pour le texte, et un fondu vers le fond du site en bas pour enchaîner sans coupure. */
.hero-cinema {
  --title: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ui: 'Manrope', var(--body);
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  height: clamp(460px, 70svh, 680px);
  margin: -16px 0 56px calc(50% - 50vw);
  overflow: hidden;
  background: #0d0a08;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-cinema::before,
.hero-cinema::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero-cinema::before {
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(13, 10, 8, 0.88) 0%,
    rgba(13, 10, 8, 0.62) 38%,
    rgba(13, 10, 8, 0.18) 72%,
    rgba(13, 10, 8, 0.1) 100%
  );
}

.hero-cinema::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, var(--bg));
}

.hero-cinema-text {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 16px 4vh;
  font-family: var(--ui);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--ui);
  line-height: 1.4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--line);
}

.hero-kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent);
}

.hero-cinema-title {
  max-width: 11em;
  margin: 0 0 22px;
  font-family: var(--title);
  font-size: clamp(42px, 5.6vw, 82px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}

/* Le surlignage a sa propre hauteur, un peu détaché de la ligne du dessus : il ne doit
   pas mordre sur les lettres qui descendent (le « Q » de « Chaque »). */
.hero-cinema-title mark {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.16em;
  padding: 0.06em 0.14em 0.02em;
  line-height: 1;
  border-radius: 6px;
  background: var(--sun);
  color: #1a1512;
}

.hero-cinema-lead {
  max-width: 30em;
  margin: 0 0 34px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

.hero-cinema .button {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (max-width: 860px) {
  .hero-cinema {
    height: clamp(480px, 76svh, 640px);
    align-items: flex-end;
  }

  /* Sur un écran vertical, le voile monte du bas : le texte s'y pose, le décor reste au-dessus. */
  .hero-cinema::before {
    background: linear-gradient(
      180deg,
      rgba(13, 10, 8, 0.25) 0%,
      rgba(13, 10, 8, 0.55) 45%,
      rgba(13, 10, 8, 0.92) 78%
    );
  }

  .hero-video {
    object-position: 62% 50%;
  }

  .hero-cinema-text {
    padding-bottom: 48px;
  }

  .hero-cinema-title {
    font-size: clamp(38px, 11vw, 56px);
  }

  .hero-kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .hero-cinema .hero-actions .button {
    flex: 1 1 100%;
    text-align: center;
  }
}

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* Catégories : une tuile par univers, avec l'illustration d'une de ses rooms. */
/* Les tuiles défilent à l'horizontale ; les flèches apparaissent dès qu'elles débordent. */
.cat-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 40px;
}

/* Fenêtre des tuiles : au bord où la liste continue, l'image s'estompe dans un léger flou
   au lieu d'être coupée net. */
.cat-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
}

.cat-viewport::before,
.cat-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 72px;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.25s ease;
}

.cat-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
}

.cat-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
  mask-image: linear-gradient(270deg, #000, transparent);
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
}

.cat-carousel.more-before .cat-viewport::before,
.cat-carousel.more-after .cat-viewport::after {
  opacity: 1;
}

.cat-tiles {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 3px 2px;
}

.cat-tiles::-webkit-scrollbar {
  display: none;
}

button.cat-arrow {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 50%;
  box-shadow: none;
}

.cat-carousel.overflows button.cat-arrow {
  display: grid;
  place-items: center;
}

button.cat-arrow:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

button.cat-arrow:disabled {
  opacity: 0.25;
}

button.cat-tile {
  position: relative;
  flex: 0 0 210px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2px;
  min-height: 96px;
  padding: 14px 14px 12px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(14, 11, 9, 0.15), rgba(14, 11, 9, 0.85)),
    var(--art, none) center 30% / cover,
    var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 35%, transparent);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease;
  filter: saturate(0.8) brightness(0.9);
}

button.cat-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: none;
  filter: none;
  border-color: var(--line);
}

button.cat-tile[aria-pressed='true'] {
  filter: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* « Toutes » n'a pas d'illustration : un aplat corail. */
button.cat-tile:not([style]) {
  background: var(--panel-2);
}

button.cat-tile:not([style])[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-ink);
}

.cat-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.cat-tile small {
  font-size: 12px;
  opacity: 0.75;
}

.group-title {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 18px;
}

.group-empty {
  margin-bottom: 48px;
}

/* Rooms jouables : l'illustration en grand, les informations dessous, sans rien cacher du décor. */
.rooms {
  --per-row: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 56px;
}

/* Trois par ligne, la dernière ligne centrée (5 rooms : 3 + 2) ; quatre quand elles tombent juste (4 ou 8). */
.rooms > .room-card {
  flex: 0 1 calc((100% - (var(--per-row) - 1) * 24px) / var(--per-row));
  min-width: 0;
}

.rooms[data-count='4'],
.rooms[data-count='8'] {
  --per-row: 4;
}

@media (max-width: 1050px) {
  .rooms,
  .rooms[data-count='4'],
  .rooms[data-count='8'] {
    --per-row: 2;
  }
}

@media (max-width: 560px) {
  .rooms,
  .rooms[data-count='4'],
  .rooms[data-count='8'] {
    --per-row: 1;
  }
}

.room-card {
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 30%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.card-art {
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  background: #14111a;
}

.card-art .room-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.92);
  transition:
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.4s ease;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}

.card-theme {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin: 0 0 8px;
}

.card-title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 10px;
}

.card-blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 16px;
}

.card-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 0;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
}

.card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-meta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.7;
}

.card-footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 18%, transparent);
}

.card-price {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--sun);
}

.card-record {
  font-size: 13px;
  white-space: nowrap;
  color: var(--muted);
}

.card-record.none {
  display: none;
}

.card-stars,
.proof-stars {
  color: var(--sun);
}

/* Sous l'accroche du hero : la note des joueurs et les évasions. */
.hero-proof {
  margin: -6px 0 22px;
  font-size: 15px;
  color: color-mix(in srgb, var(--text) 85%, transparent);
}

/*
 * Téléphone : des cartes compactes, image à gauche et l'essentiel à droite (toute la carte mène à
 * la fiche). Les 9 rooms tiennent en trois écrans au lieu de dix.
 */
@media (max-width: 560px) {
  .rooms {
    gap: 12px;
    margin-bottom: 40px;
  }

  .rooms > .room-card {
    flex-direction: row;
    min-height: 150px;
  }

  .room-card .card-art {
    flex: none;
    width: 38%;
    aspect-ratio: auto;
    position: relative;
  }

  .room-card .card-body {
    padding: 12px 14px;
  }

  .room-card .card-theme {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .room-card .card-title {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .room-card .card-blurb,
  .room-card .card-cta,
  .room-card .card-record.none,
  .room-card .card-meta .meta-label {
    display: none;
  }

  .room-card .card-meta {
    gap: 4px 12px;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .room-card .card-meta svg {
    width: 14px;
    height: 14px;
  }

  .room-card .card-footer {
    padding-top: 8px;
  }

  .room-card .card-price {
    font-size: 14px;
  }
}

.card-record small {
  opacity: 0.8;
}

/* Le bouton d'action, toujours visible (pas de survol sur mobile) ; il s'allume au survol. */
.card-cta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 999px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.card-cta span {
  transition: transform 0.25s ease;
}

a.room-card:hover,
a.room-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

a.room-card:hover .room-art,
a.room-card:focus-visible .room-art {
  transform: scale(1.05);
  filter: brightness(1.06);
}

a.room-card:hover .card-cta,
a.room-card:focus-visible .card-cta {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

a.room-card:hover .card-cta span {
  transform: translateX(4px);
}

/* Rooms à venir : visibles, mais plus compactes que celles qu'on peut jouer tout de suite. */
.rooms-soon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
  margin-bottom: 64px;
}

.soon-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 20%, transparent);
  border-radius: 14px;
  overflow: hidden;
}

.soon-art .room-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.85);
}

.soon-body {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
}

.soon-body .card-theme {
  font-size: 10px;
  margin-bottom: 4px;
}

.soon-body .card-title {
  font-size: 16px;
  margin-bottom: 6px;
}

.soon-body .card-blurb {
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.soon-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* « Ça me tente » reste discret : le corail est réservé aux rooms jouables. */
.soon-footer .small-button {
  color: var(--text);
  background: transparent;
  border-color: color-mix(in srgb, var(--line) 45%, transparent);
  box-shadow: none;
}

.soon-footer .small-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: none;
  transform: none;
}

.meta-label {
  font-weight: 500;
  color: var(--muted);
}

.voted {
  color: var(--ok);
  font-weight: 700;
  margin: 0;
}

/* Sur téléphone, le doigt fait défiler les tuiles : pas de flèches. */
@media (max-width: 560px) {
  .cat-carousel.overflows button.cat-arrow {
    display: none;
  }

  .cat-viewport {
    margin-inline: -16px;
  }

  .cat-tiles {
    padding: 2px 16px 6px;
  }

  button.cat-tile {
    flex: 0 0 132px;
    min-height: 84px;
  }

  .card-art {
    aspect-ratio: 4 / 3;
  }

  .soon-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .rooms-soon {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Comment ça marche : trois étapes, trois pictogrammes ------------------------ */
.how {
  margin-bottom: 96px;
}

/* Accueil, sous le hero : le défi de la semaine en une ligne. */
.challenge-band {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  margin: 28px 0 56px;
  padding: 12px 18px;
  background:
    linear-gradient(90deg, rgba(255, 201, 74, 0.1), transparent 60%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--sun) 40%, transparent);
  border-radius: 16px;
}

.challenge-band-laurel {
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--sun);
  border-radius: 50%;
}

.challenge-band .eyebrow {
  margin: 0 0 2px;
  color: var(--sun);
}

.challenge-band-title {
  margin: 0;
  font-size: 16px;
}

.challenge-band-action {
  display: flex;
  align-items: center;
  gap: 14px;
}

.challenge-band-link {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Compte à rebours en petit, dans le bandeau. */
.countdown.compact {
  margin: 0;
  gap: 4px;
}

.countdown.compact .cd-unit {
  min-width: 46px;
  padding: 6px 4px 5px;
  border-radius: 9px;
}

.countdown.compact .cd-unit b {
  font-size: 22px;
}

.countdown.compact .cd-unit small {
  font-size: 9px;
}

.countdown.compact i {
  padding-top: 6px;
  font-size: 18px;
}

/*
 * Accueil, après les rooms : la prochaine session publique en grand, sur l'illustration de sa
 * room fondue dans le noir, et les deux sessions suivantes.
 */
.session-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
  gap: 32px;
  align-items: end;
  margin: 0 0 96px;
  padding: 40px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(14, 11, 9, 0.96) 0%,
      rgba(14, 11, 9, 0.82) 45%,
      rgba(14, 11, 9, 0.35) 100%
    ),
    var(--art) center / cover no-repeat,
    var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 22px;
}

.session-feature.live {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.session-feature .eyebrow {
  margin: 0 0 8px;
}

.session-feature-when {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.05;
}

.session-feature-room {
  margin: 6px 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--sun);
}

.session-feature-lead {
  max-width: 34em;
  margin: 0 0 4px;
  color: color-mix(in srgb, var(--text) 85%, transparent);
}

.session-feature .countdown {
  margin: 16px 0 18px;
}

.session-feature-action .session-remind,
.session-feature-action .session-join {
  max-width: 420px;
}

.session-feature-action .session-remind {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.session-feature-action .session-remind .check {
  grid-column: 1 / -1;
  grid-row: 2;
}

.session-feature-action > button {
  padding: 12px 26px;
  font-size: 15px;
}

.session-feature-people {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* Les deux sessions suivantes, en colonne à droite. */
.session-feature-next {
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}

.session-feature-next ul {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.session-feature-next li {
  display: grid;
  gap: 2px;
}

.session-feature-next li span {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
}

.session-feature-next a {
  font-size: 14px;
  font-weight: 700;
}

/* Accueil : le défi de la semaine, sa room, son classement et le laurier à gagner. */
.challenge {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 36px;
  align-items: center;
  margin: 28px 0 72px;
  /* Lien « Classement » (/parties#defi) : le haut du défi reste sous l'en-tête fixe. */
  scroll-margin-top: 90px;
  padding: 28px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--sun) 45%, transparent);
  border-radius: 20px;
}

.challenge-art {
  position: relative;
}

.challenge .challenge-art .room-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.6;
  object-fit: cover;
  border-radius: 14px;
}

/* Le laurier à gagner, en médaillon sur l'illustration. */
.challenge-laurel {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 120px;
  height: 120px;
  background: var(--surface);
  border: 3px solid var(--sun);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.challenge-body .eyebrow {
  color: var(--sun);
}

.challenge-body .section-title {
  margin: 4px 0 10px;
}

.challenge-body .leaderboard {
  margin: 16px 0 20px;
}

/* Le compte à rebours : quatre cases qui défilent, jours, heures, minutes, secondes. */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 6px;
}

.cd-unit {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 64px;
  padding: 10px 8px 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid color-mix(in srgb, var(--sun) 40%, transparent);
  border-radius: 12px;
}

.cd-unit b {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sun);
}

.cd-unit small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.countdown i {
  padding-top: 10px;
  font-style: normal;
  font-family: var(--display);
  font-size: 28px;
  color: color-mix(in srgb, var(--sun) 50%, transparent);
}

.challenge .leaderboard li.podium .lb-rank {
  color: var(--accent-ink);
  background: var(--sun);
}

@media (max-width: 760px) {
  .challenge {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 18px;
    margin-bottom: 64px;
  }

  .challenge .challenge-art .room-art {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .cd-unit {
    min-width: 0;
    flex: 1;
    padding: 8px 4px 6px;
  }

  .cd-unit b {
    font-size: 26px;
  }

  .countdown {
    gap: 4px;
  }

  .countdown i {
    font-size: 20px;
    padding-top: 8px;
  }

  .challenge-laurel {
    width: 88px;
    height: 88px;
    right: 8px;
    bottom: -22px;
  }
}

/* Accueil : « Votre pion vous suit », des pions habillés en file. */
.pawn-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 96px;
}

.pawn-showcase-text p {
  color: var(--muted);
  font-size: 17px;
  max-width: 34em;
}

.pawn-parade {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
  /* Un halo doux sous les pions, qui se fond dans le fond de la page sans bord visible. */
  /* Centré assez haut et éteint avant les bords du bloc : aucun bord coupé. */
  background: radial-gradient(
    ellipse 48% 20% at 50% 74%,
    rgba(255, 166, 61, 0.18),
    rgba(255, 166, 61, 0.06) 55%,
    transparent 100%
  );
}

.pawn-parade li {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 -14px;
  animation: pawn-bob 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.6s);
}

/* Celui du milieu un peu plus grand, au premier plan. */
.pawn-parade li:nth-child(3) {
  z-index: 1;
  transform: scale(1.12);
}

.pawn-parade .pawn-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

@keyframes pawn-bob {
  50% {
    translate: 0 -6px;
  }
}

@media (max-width: 760px) {
  .challenge-band {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    margin: 20px 0 40px;
    padding: 12px;
  }

  .challenge-band-laurel {
    width: 48px;
    height: 48px;
  }

  .challenge-band-title {
    font-size: 14px;
  }

  .challenge-band .countdown,
  .challenge-band-action {
    grid-column: 1 / -1;
  }

  .challenge-band .countdown .cd-unit {
    flex: 1;
  }

  .session-feature {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    margin-bottom: 64px;
    background:
      linear-gradient(
        180deg,
        rgba(14, 11, 9, 0.55) 0%,
        rgba(14, 11, 9, 0.92) 45%,
        rgba(14, 11, 9, 0.97) 100%
      ),
      var(--art) center top / cover no-repeat,
      var(--surface);
  }

  .session-feature-room {
    font-size: 17px;
  }

  .session-feature-action .session-remind {
    grid-template-columns: 1fr;
  }

  .pawn-showcase {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 64px;
  }

  .pawn-parade {
    order: -1;
  }

  .pawn-parade li {
    margin: 0 -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pawn-parade li {
    animation: none;
  }
}

.how-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  position: relative;
}

.how-step {
  position: relative;
  padding: 0 12px;
  text-align: center;
}

/* Étapes en icônes (team building) : un fil les relie sur ordinateur. */
.how-steps:not(:has(.how-shot))::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 16%;
  right: 16%;
  border-top: 2px dashed color-mix(in srgb, var(--line) 25%, transparent);
}

.how-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: var(--border-w) solid var(--line);
  color: #1a1512;
  position: relative;
}

.how-icon.i-1 {
  background: var(--sun);
}
.how-icon.i-2 {
  background: var(--sky);
}
.how-icon.i-3 {
  background: var(--rose);
}

.how-icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Trois mini-écrans du vrai jeu : choisir une room, réunir l'équipe, s'échapper. */
.how-shot {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  aspect-ratio: 4 / 3;
  margin: 0 0 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 166, 61, 0.16), transparent 65%),
    color-mix(in srgb, var(--surface) 94%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 16px;
  transition:
    opacity 0.6s ease,
    translate 0.6s ease;
}

.reveal-ready .how:not(.seen) .how-shot {
  opacity: 0;
  translate: 0 18px;
}

.how-step:nth-child(2) .how-shot {
  transition-delay: 0.15s;
}

.how-step:nth-child(3) .how-shot {
  transition-delay: 0.3s;
}

/* 1 · trois affiches en éventail. */
.shot-rooms span {
  position: absolute;
  width: 38%;
  aspect-ratio: 4 / 4.4;
  left: calc(31% + (var(--i) - 1) * 24%);
  top: 16%;
  rotate: calc((var(--i) - 1) * 9deg);
  z-index: calc(2 - var(--i) * var(--i) + var(--i));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.shot-rooms span:nth-child(2) {
  z-index: 3;
  translate: 0 -6%;
}

.shot-rooms .room-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2 · le salon : le code à partager et les pions qui arrivent. */
.shot-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.shot-code {
  font-family: var(--mono, monospace);
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: 0.3em;
  color: var(--sun);
}

.shot-pawns {
  display: flex;
  justify-content: center;
}

.shot-pawns img {
  width: 25%;
  max-width: 76px;
  height: auto;
  margin: 0 -6px;
}

.shot-chip {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 99px;
}

/* 3 · la victoire : le temps, et les exploits. */
.shot-time {
  font-family: var(--display);
  font-size: clamp(54px, 6.4vw, 84px);
  line-height: 1;
  color: var(--sun);
}

.shot-badges {
  display: flex;
  gap: 8px;
}

.shot-badges span {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sun);
  border: 1px solid var(--sun);
  border-radius: 99px;
}

.how-num {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.how-step h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.how-step p {
  max-width: 26ch;
  margin: 0 auto;
  color: var(--muted);
}

.how-pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 18px 22px;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  background: var(--surface);
  border-radius: 14px;
}

.how-pillars strong {
  display: block;
  color: var(--text);
}

/* --- Une aventure, plusieurs perspectives : trois écrans d'une vraie partie ------- */
.perspectives {
  margin-bottom: 96px;
}

.views {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* Trois écrans au même moment, chacun avec son joueur, l'indice utile encadré, et ce que
   le joueur en dit à l'équipe. */
.view {
  --tone: var(--sun);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 18%, transparent);
  border-radius: 16px;
}

.view.tone-sky {
  --tone: var(--sky);
}

.view.tone-rose {
  --tone: var(--rose);
}

.view figcaption {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
}

.view-player {
  display: inline-block;
  padding: 2px 10px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--tone);
  color: #1a1512;
}

.view-shot {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.view-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* L'indice encadré ; le reste de l'écran s'assombrit autour. */
.view-spot {
  position: absolute;
  border: 2px solid var(--tone);
  border-radius: 8px;
  box-shadow:
    0 0 0 999px rgba(8, 6, 5, 0.42),
    0 0 18px color-mix(in srgb, var(--tone) 60%, transparent);
}

/* La bulle : ce que le joueur dit à voix haute. */
.view-says {
  position: relative;
  margin: 6px 0 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  border-radius: 14px;
}

.view-says::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: inherit;
  border-top: inherit;
  rotate: 45deg;
}

.view-says p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.views-outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin: 22px 0 8px;
  padding: 20px 22px;
  border: var(--border-w) solid var(--accent);
  border-radius: 16px;
}

.views-outcome p {
  flex: 1 1 380px;
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.views-outcome strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  color: var(--text);
}

/* À l'apparition : chaque écran s'allume, son indice s'encadre, le joueur parle ; puis
   la solution. Sans animation (mouvement réduit), tout est visible d'emblée. */
.reveal-ready .perspectives:not(.seen) :is(.view, .view-spot, .view-says, .views-outcome) {
  opacity: 0;
}

.reveal-ready .perspectives:not(.seen) :is(.view, .view-says, .views-outcome) {
  translate: 0 12px;
}

.perspectives :is(.view, .view-spot, .view-says, .views-outcome) {
  transition:
    opacity 0.55s ease,
    translate 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.perspectives .view {
  transition-delay: calc(var(--i) * 0.7s);
}

.perspectives .view-spot {
  transition-delay: calc(var(--i) * 0.7s + 0.35s);
}

.perspectives .view-says {
  transition-delay: calc(var(--i) * 0.7s + 0.6s);
}

.perspectives .views-outcome {
  transition-delay: 2.4s;
}

/* Sur tablette et téléphone, les écrans se font glisser de côté. */
@media (max-width: 960px) {
  .views {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  .views::-webkit-scrollbar {
    display: none;
  }

  .view {
    flex: 0 0 min(82%, 420px);
    scroll-snap-align: center;
  }
}

@media (max-width: 860px) {
  .how-steps,
  .how-pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-steps {
    gap: 28px;
  }

  .how-steps::before {
    display: none;
  }

  .how-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    text-align: left;
    padding: 0;
  }

  /* Accueil : le mini-écran en pleine largeur, au-dessus du texte. */
  .how-step:has(.how-shot) {
    display: block;
    text-align: center;
  }

  .how-shot {
    aspect-ratio: 16 / 9;
  }

  .shot-rooms span {
    width: 26%;
    left: calc(37% + (var(--i) - 1) * 18%);
    top: 10%;
  }

  .how-icon {
    grid-row: span 3;
    width: 64px;
    height: 64px;
    margin: 0;
  }

  .how-icon svg {
    width: 32px;
    height: 32px;
  }

  .how-step p {
    margin: 0;
    max-width: none;
  }
}

/* --- Apparitions au défilement (app.js ajoute .reveal-ready puis .seen) ------------- */
.reveal-ready [data-reveal]:not(.perspectives) {
  transition:
    opacity 0.7s ease,
    translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal-ready [data-reveal]:not(.perspectives):not(.seen) {
  opacity: 0;
  translate: 0 24px;
}

.join h1 {
  font-size: 28px;
}

.code-input {
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.3em;
}

/* --- Fiche de room (déjà dans l'univers de la room) ------------------------- */

/* Décor de fond propre à chaque room (art/fond-<room>.webp, fourni par app.js via --room-bg).
   Posé sur le calque fixe plutôt qu'en background-attachment: fixed, ignoré par Safari iOS. */
body[data-page='sheet'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 45%, var(--bg) 100%),
    var(--room-bg) right top / cover no-repeat var(--bg);
}

.room-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
  padding: 24px 0 36px;
}

.room-hero h1 {
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.room-hero .lead {
  font-weight: 600;
}

.room-hero .back {
  color: var(--text);
}

.room-hero-art {
  justify-self: center;
  width: min(100%, 360px);
}

.room-art.framed {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: rotate(2deg);
}

@media (max-width: 760px) {
  .room-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-hero-art {
    order: -1;
    max-width: 440px;
  }
}

.create {
  border-top: var(--border-w) solid var(--line);
  padding-top: 18px;
  margin-top: 8px;
}

/* --- Ambiance Halcyon : reflets et bulles -------------------------------------- */

.ambience {
  display: none;
}

body[data-theme='halcyon'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='halcyon'] .ambience::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(ellipse 30% 22% at 30% 30%, rgba(127, 219, 255, 0.1), transparent 70%),
    radial-gradient(ellipse 26% 20% at 72% 55%, rgba(127, 219, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 22% 16% at 45% 80%, rgba(255, 181, 71, 0.04), transparent 70%);
  animation: caustics 18s ease-in-out infinite alternate;
}

body[data-theme='halcyon'] .ambience span {
  position: absolute;
  bottom: -20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(201, 245, 255, 0.45);
  opacity: 0;
  animation: bubble 14s linear infinite;
}

body[data-theme='halcyon'] .ambience span:nth-child(1) {
  left: 6%;
  animation-delay: 0s;
}
body[data-theme='halcyon'] .ambience span:nth-child(2) {
  left: 14%;
  width: 5px;
  height: 5px;
  animation-delay: -4s;
  animation-duration: 11s;
}
body[data-theme='halcyon'] .ambience span:nth-child(3) {
  left: 27%;
  animation-delay: -7s;
  animation-duration: 17s;
}
body[data-theme='halcyon'] .ambience span:nth-child(4) {
  left: 38%;
  width: 12px;
  height: 12px;
  animation-delay: -2s;
  animation-duration: 20s;
}
body[data-theme='halcyon'] .ambience span:nth-child(5) {
  left: 52%;
  width: 6px;
  height: 6px;
  animation-delay: -9s;
}
body[data-theme='halcyon'] .ambience span:nth-child(6) {
  left: 63%;
  animation-delay: -5s;
  animation-duration: 16s;
}
body[data-theme='halcyon'] .ambience span:nth-child(7) {
  left: 74%;
  width: 4px;
  height: 4px;
  animation-delay: -1s;
  animation-duration: 10s;
}
body[data-theme='halcyon'] .ambience span:nth-child(8) {
  left: 83%;
  width: 10px;
  height: 10px;
  animation-delay: -11s;
  animation-duration: 19s;
}
body[data-theme='halcyon'] .ambience span:nth-child(9) {
  left: 91%;
  animation-delay: -6s;
}
body[data-theme='halcyon'] .ambience span:nth-child(10) {
  left: 97%;
  width: 5px;
  height: 5px;
  animation-delay: -13s;
  animation-duration: 12s;
}

@keyframes bubble {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(12px, -55vh);
  }
  100% {
    transform: translate(-8px, -110vh);
    opacity: 0;
  }
}

@keyframes caustics {
  to {
    transform: translate(60px, 40px) rotate(4deg);
  }
}

/* --- Partie -------------------------------------------------------------------- */

.lobby h1 {
  font-size: 28px;
}

.code {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 10px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}

@media (max-width: 860px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 560px) {
  .stations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.station,
body[data-theme='halcyon'] .station {
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: var(--border-w) solid var(--line);
  border-radius: 12px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  min-height: 68px;
  padding: 10px 12px;
}

.station strong {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
}

.station small {
  color: var(--muted);
}

.station.mine,
body[data-theme='halcyon'] .station.mine {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

body[data-theme='halcyon'] .card h2::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.log {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  max-height: 320px;
  overflow-y: auto;
}

.log li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.log time {
  font-family: var(--mono);
  color: var(--muted);
  margin-right: 6px;
}

.big-mono {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}

.hint {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.small-button {
  padding: 7px 12px;
  font-size: 11px;
}

.won {
  border-color: var(--ok);
}

details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.manual li {
  margin-bottom: 6px;
}

/* Matériel des postes d'Halcyon */

.breakers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.breaker {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  background: linear-gradient(180deg, #123a50, #0a2433);
}

.breaker .body {
  height: 70px;
  border-radius: 6px;
  margin: 8px auto;
  width: 70%;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.breaker .led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 auto;
  background: #24343b;
  border: 1px solid #3c5560;
}

.breaker .led.on {
  background: #ffd84d;
  box-shadow: 0 0 10px #ffd84d;
}

.breaker button {
  width: 100%;
  padding: 7px 4px;
  font-size: 10px;
}

.breaker.cut {
  opacity: 0.4;
}

.c-rouge {
  background: #c0392b;
}
.c-bleu {
  background: #2e6fd8;
}
.c-jaune {
  background: #e3b505;
}
.c-blanc {
  background: #e8ecef;
}
.c-noir {
  background: #121619;
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 52px);
  gap: 4px;
  margin: 8px 0;
}

.grid4 span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 24px;
  border-radius: 4px;
}

.grid4.paper span {
  background: #e9dfc7;
  color: #3b2f1e;
}

.grid4.plate span {
  background: #7a8a91;
}

.grid4.plate span.hole {
  background: var(--bg);
  box-shadow: inset 0 0 0 2px #4b5b62;
}

.plate-top {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  width: calc(4 * 52px + 3 * 4px);
  text-align: center;
}

.crew td,
.crew th {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.crew .redacted {
  background: #000;
  color: #000;
  user-select: none;
}

.vigenere {
  font-family: var(--mono);
  font-size: 12px;
}

.vigenere td,
.vigenere th {
  width: 18px;
  height: 18px;
  text-align: center;
  padding: 0;
}

.vigenere th {
  color: var(--accent);
}

.note {
  background: #e9dfc7;
  color: #3b2f1e;
  padding: 12px 14px;
  border-radius: 4px;
  font-family: 'Bradley Hand', 'Segoe Print', cursive;
  transform: rotate(-0.6deg);
}

/* --- Avis ------------------------------------------------------------------------ */

.feedback {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.feedback fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.feedback textarea {
  resize: vertical;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}

.pill:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 181, 71, 0.14);
}

.pill input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

/* --- Mouvement réduit ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }

  body[data-theme='halcyon'] .ambience span,
  body[data-theme='train-vienne'] .ambience span,
  body[data-theme='manoir-asselin'] .ambience span,
  body[data-theme='temple-oublie'] .ambience span,
  body[data-theme='observatoire'] .ambience span,
  body[data-theme='dossier-27'] .ambience::before,
  body[data-theme='projet-helix'] .ambience::before,
  body[data-theme='prison-blackstone'] .ambience::before,
  body[data-theme='ile-des-ombres'] .ambience::before,
  .helix-led,
  .scope i {
    display: none;
  }
}

/* --- Formulaires : listes déroulantes ------------------------------------------------ */

select {
  font: inherit;
  flex: 1;
  min-width: 200px;
  padding: 11px 13px;
  color: var(--text);
  background: var(--input-bg);
  border: var(--border-w) solid var(--line);
  border-radius: 10px;
}

/* --- Progression et notifications ----------------------------------------------------- */

.progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.progress-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  font-family: var(--display);
  font-size: 13px;
}

.progress-step.current {
  color: var(--text);
}

.progress-step.current .progress-dot {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.progress-step.done {
  color: var(--ok);
}

.progress-step.done .progress-dot {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--bg);
}

.progress-line {
  flex: 1;
  height: 2px;
  min-width: 12px;
  background: var(--line);
}

@media (max-width: 640px) {
  .progress-label {
    display: none;
  }
  .progress-step.current .progress-label {
    display: inline;
  }
}

.toasts {
  position: fixed;
  z-index: 20;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  width: min(440px, calc(100% - 32px));
  pointer-events: none;
}

.toast {
  padding: 16px 20px;
  border-radius: 14px;
  font-family: var(--display);
  font-size: 18px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  animation: toast-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.toast-success {
  background: var(--accent);
  color: var(--accent-ink);
}

.toast-penalty {
  background: var(--danger);
  color: #1a0505;
}

.toast.leaving {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.92);
  }
}

/* --- Salle d'attente : équipe et record ------------------------------------------------ */

.team-name {
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 6px;
}

.record-line {
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
}

.record-line strong {
  color: var(--accent);
}

.room-body .record {
  margin: 4px 0 0;
  font-weight: 600;
}

/* --- Victoire ---------------------------------------------------------------------- */

.victory {
  text-align: center;
  padding: 32px 0 24px;
}

.victory h1 {
  font-size: clamp(40px, 7vw, 80px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  animation: victory-in 0.8s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.victory .lead {
  margin: 0 auto 26px;
}

.victory-time {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 36px;
  border: 2px solid var(--accent);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}

.victory-time span {
  font-family: var(--display);
  color: var(--muted);
}

.victory-time strong {
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
  color: var(--accent);
}

.badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.badge {
  font-family: var(--display);
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.badge-record {
  background: var(--accent);
  color: var(--accent-ink);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 24px var(--accent);
  }
}

@keyframes victory-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

.victory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.stats-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.stats-list div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.stats-list dt {
  font-size: 13px;
  color: var(--muted);
}

.stats-list dd {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.timeline .mono {
  color: var(--accent);
}

.leaderboard {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.leaderboard li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.leaderboard li.mine {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  outline: 1px solid var(--accent);
}

.lb-rank {
  font-family: var(--display);
  font-size: 18px;
  color: var(--accent);
  text-align: center;
}

.lb-team {
  font-weight: 700;
  min-width: 0;
}

.lb-team small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-time {
  font-size: 18px;
  font-weight: 700;
}

/* --- Train : documents d'époque ------------------------------------------------------ */

body[data-theme='train-vienne'] h1,
body[data-theme='train-vienne'] h2 {
  font-weight: 400;
  letter-spacing: 0.02em;
}

body[data-theme='train-vienne'] h3 {
  font-family: var(--body);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.16em;
}

body[data-theme='train-vienne'] .card {
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 4px var(--panel),
    inset 0 0 0 5px rgba(227, 184, 92, 0.45),
    var(--shadow);
}

body[data-theme='train-vienne'] .card h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

body[data-theme='train-vienne'] button,
body[data-theme='train-vienne'] .button {
  border-radius: 3px;
  border-color: var(--accent);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.08em;
}

body[data-theme='train-vienne'] button:hover:not(:disabled),
body[data-theme='train-vienne'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(227, 184, 92, 0.45);
}

body[data-theme='train-vienne'] button.ghost,
body[data-theme='train-vienne'] .button.ghost {
  background: transparent;
  color: var(--accent);
}

body[data-theme='train-vienne'] .station,
body[data-theme='train-vienne'] .station strong {
  font-family: var(--body);
}

body[data-theme='train-vienne'] .station strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
}

body[data-theme='train-vienne'] .station.mine {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

body[data-theme='train-vienne'] .topbar {
  background: rgba(22, 10, 15, 0.82);
  backdrop-filter: blur(8px);
}

.paper {
  background: #efe2c4;
  color: #2b1a12;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  font-family: 'Courier New', Courier, monospace;
}

.ledger {
  width: 100%;
  font-size: 15px;
}

.ledger th,
.ledger td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px dotted rgba(43, 26, 18, 0.45);
}

.ledger th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.handwritten {
  margin: 12px 0 0;
  color: #7a1f1f;
  font-family: 'Bradley Hand', 'Segoe Print', cursive;
  font-size: 16px;
  transform: rotate(-1deg);
}

.telegram {
  background: #f3e3a8;
  color: #2b1a12;
  padding: 18px 20px;
  margin-bottom: 14px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border-top: 10px solid #d9c27a;
}

.telegram-head {
  font-size: 12px;
  border-bottom: 1px dashed rgba(43, 26, 18, 0.5);
  padding-bottom: 8px;
}

.telegram-code {
  font-size: 22px;
  margin: 12px 0;
  word-spacing: 4px;
}

.notebook {
  background: repeating-linear-gradient(#f6eedb 0 27px, #c9b48c 27px 28px);
  color: #2a2a55;
  padding: 10px 18px 6px 44px;
  border-left: 3px solid #c46a6a;
  font-family: 'Bradley Hand', 'Segoe Print', cursive;
  font-size: 17px;
  line-height: 28px;
}

.notebook p {
  margin: 0;
}

.overheard {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--accent-2);
}

.coats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.coat {
  position: relative;
  padding: 26px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 15px;
}

.coat p {
  margin: 0;
}

.coat-ticket {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 2px 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.05em;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}

.suitcase {
  padding: 16px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
}

.dial {
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  letter-spacing: 0.5em;
  text-align: center;
  max-width: 200px;
}

/* Lumières qui défilent derrière les vitres du train. */
body[data-theme='train-vienne'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='train-vienne'] .ambience::before {
  content: '';
  position: absolute;
  inset: 0 -400px 0 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 380px,
    rgba(255, 214, 140, 0.05) 380px 386px,
    transparent 386px 640px,
    rgba(255, 214, 140, 0.035) 640px 643px
  );
  animation: passing-lights 5s linear infinite;
}

/* La fumée du train : des panaches gris qui s'échappent du bas de l'écran, côté train,
   gonflent en montant et partent vers l'arrière, poussés par la vitesse. */
body[data-theme='train-vienne'] .ambience span {
  position: absolute;
  bottom: -60px;
  right: 18%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 45% 45%,
    rgba(222, 214, 206, 0.46),
    rgba(160, 150, 145, 0.26) 45%,
    transparent 70%
  );
  filter: blur(8px);
  opacity: 0;
  animation: train-smoke 9s ease-out infinite;
}

body[data-theme='train-vienne'] .ambience span:nth-child(1) {
  animation-delay: 0s;
}
body[data-theme='train-vienne'] .ambience span:nth-child(2) {
  right: 22%;
  animation-delay: -1.5s;
  animation-duration: 10s;
}
body[data-theme='train-vienne'] .ambience span:nth-child(3) {
  right: 15%;
  width: 180px;
  height: 180px;
  animation-delay: -3s;
}
body[data-theme='train-vienne'] .ambience span:nth-child(4) {
  right: 20%;
  animation-delay: -4.5s;
  animation-duration: 11s;
}
body[data-theme='train-vienne'] .ambience span:nth-child(5) {
  right: 17%;
  width: 110px;
  height: 110px;
  animation-delay: -6s;
}
body[data-theme='train-vienne'] .ambience span:nth-child(6) {
  right: 21%;
  width: 160px;
  height: 160px;
  animation-delay: -7.5s;
  animation-duration: 10s;
}
body[data-theme='train-vienne'] .ambience span:nth-child(n + 7) {
  display: none;
}

@keyframes train-smoke {
  0% {
    transform: translate(0, 0) scale(0.45);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.55;
  }
  100% {
    transform: translate(-48vw, -95vh) scale(3.2);
    opacity: 0;
  }
}

/* Sur la fiche, le décor peint tient lieu de fond : pas de lumières qui défilent. */
body[data-theme='train-vienne'][data-page='sheet'] .ambience::before {
  display: none;
}

/* --- Ambiance du Manoir : braises de bougie et brume au ras du sol ------------------- */

body[data-theme='manoir-asselin'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='manoir-asselin'] .ambience::before {
  content: '';
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -6%;
  height: 38%;
  background:
    radial-gradient(ellipse 30% 45% at 25% 70%, rgba(190, 170, 230, 0.12), transparent 70%),
    radial-gradient(ellipse 35% 40% at 60% 80%, rgba(210, 195, 240, 0.1), transparent 70%),
    radial-gradient(ellipse 25% 35% at 85% 65%, rgba(190, 170, 230, 0.08), transparent 70%);
  filter: blur(8px);
  animation: mist 26s ease-in-out infinite alternate;
}

body[data-theme='manoir-asselin'] .ambience span {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd08a;
  box-shadow:
    0 0 8px 3px rgba(255, 170, 70, 0.8),
    0 0 22px 6px rgba(255, 140, 40, 0.3);
  opacity: 0;
  animation:
    ember 13s ease-in infinite,
    ember-flicker 0.9s steps(3) infinite;
}

body[data-theme='manoir-asselin'] .ambience span:nth-child(1) {
  left: 8%;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(2) {
  left: 19%;
  animation-delay:
    -5s,
    -0.3s;
  animation-duration: 16s, 1.1s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(3) {
  left: 31%;
  width: 3px;
  height: 3px;
  animation-delay:
    -9s,
    -0.5s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(4) {
  left: 44%;
  animation-delay:
    -2s,
    -0.2s;
  animation-duration: 18s, 0.8s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(5) {
  left: 57%;
  width: 3px;
  height: 3px;
  animation-delay:
    -11s,
    -0.6s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(6) {
  left: 66%;
  animation-delay:
    -7s,
    -0.1s;
  animation-duration: 15s, 1s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(7) {
  left: 76%;
  animation-delay:
    -3s,
    -0.4s;
  animation-duration: 12s, 0.9s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(8) {
  left: 85%;
  width: 5px;
  height: 5px;
  animation-delay:
    -13s,
    -0.7s;
  animation-duration: 19s, 1.2s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(9) {
  left: 92%;
  animation-delay:
    -6s,
    -0.2s;
}
body[data-theme='manoir-asselin'] .ambience span:nth-child(10) {
  left: 50%;
  width: 3px;
  height: 3px;
  animation-delay:
    -15s,
    -0.5s;
  animation-duration: 17s, 1s;
}

@keyframes ember {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  45% {
    transform: translate(18px, -40vh);
  }
  75% {
    transform: translate(-14px, -68vh);
    opacity: 0.6;
  }
  100% {
    transform: translate(10px, -85vh);
    opacity: 0;
  }
}

@keyframes ember-flicker {
  50% {
    filter: brightness(0.6);
  }
}

@keyframes mist {
  to {
    transform: translateX(14%);
  }
}

@keyframes passing-lights {
  to {
    transform: translateX(-640px);
  }
}

/* --- Train : plan, jauge de soupçons et voitures à explorer -------------------------- */

.train-map {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 6px 2px 14px;
  margin-bottom: 10px;
}

.locomotive {
  flex: none;
  width: 70px;
  margin-right: 6px;
  border: 1px solid var(--accent);
  border-radius: 34px 6px 6px 34px;
  background: linear-gradient(180deg, #2b0f18, #12060a);
  position: relative;
}

.locomotive span {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff1c2;
  box-shadow: 0 0 18px #ffd877;
}

.coupling {
  flex: none;
  align-self: center;
  width: 12px;
  height: 4px;
  background: var(--line);
}

body[data-theme='train-vienne'] .car {
  /* Les voitures se partagent la largeur : le train tient en entier, même à 6 voitures. */
  flex: 1 1 0;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 98px;
  padding: 10px 12px 16px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: linear-gradient(180deg, #3d1724, #220c14);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  font-family: var(--body);
}

.car::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -7px;
  height: 12px;
  background: radial-gradient(circle at 10px 6px, #0d0508 5px, transparent 6px) left / 50% 100%
    repeat-x;
}

.car strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.car small {
  color: var(--muted);
}

.car-windows {
  display: flex;
  gap: 5px;
  margin-bottom: 6px;
}

.car-windows i {
  width: 18px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 214, 140, 0.18);
}

body[data-theme='train-vienne'] .car.mine {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(227, 184, 92, 0.35);
}

.car.mine .car-windows i {
  background: #ffd877;
  box-shadow: 0 0 8px #ffd877;
}

.suspicion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-weight: 700;
}

.suspicion > span {
  font-family: var(--display);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.suspicion-bar {
  flex: 1;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.suspicion-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a6dca8, #e3b85c);
  transition: width 0.5s ease;
}

.suspicion.mid .suspicion-bar i {
  background: linear-gradient(90deg, #e3b85c, #ff9d5c);
}

.suspicion.high .suspicion-bar i {
  background: linear-gradient(90deg, #ff9d5c, #ff5a4a);
  animation: pulse 1.2s ease-in-out infinite;
}

.suspicion.high strong {
  color: var(--danger);
}

.hotspots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

body[data-theme='train-vienne'] .hotspot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}

body[data-theme='train-vienne'] .hotspot.open {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.hotspot-icon {
  font-size: 18px;
}

.inspect.fresh {
  animation: inspect-in 0.25s ease;
}

@keyframes inspect-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.radio-set {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #2a1a12, #170d09);
}

.morse-lamp {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid #6b5332;
  background: radial-gradient(circle at 40% 35%, #5a2a20, #2a100c);
}

.morse-lamp.on {
  background: radial-gradient(circle at 40% 35%, #fff4c9, #ffb547);
  box-shadow:
    0 0 24px #ffb547,
    0 0 60px rgba(255, 181, 71, 0.5);
}

.morse-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 4px 14px;
  font-size: 14px;
}

.morse-card div {
  display: flex;
  gap: 8px;
}

.morse-card strong {
  width: 14px;
}

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.door {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #4a2a1a, #2b170e);
}

.door-number {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--display);
}

.door-number.small {
  min-width: 26px;
  height: 26px;
  font-size: 13px;
  margin-right: 8px;
}

.answers {
  list-style: none;
  padding: 0;
  margin: 0;
}

.answers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.answers em {
  color: var(--muted);
}

.overheard footer {
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
  color: var(--muted);
}

.coat.searched {
  border-color: var(--accent);
}

/* --- Inventaire (toutes les rooms à objets) ------------------------------------------- */

.items {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
}

.item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.item-icon {
  font-size: 24px;
  line-height: 1;
}

.item-body {
  min-width: 0;
  flex: 1;
}

.item-body p {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.item.obsolete {
  opacity: 0.6;
}

.item-obsolete {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--muted);
  font-size: 11px;
  color: var(--muted);
}

.give {
  display: flex;
  gap: 6px;
}

.give select {
  min-width: 0;
  padding: 5px 8px;
  font-size: 14px;
}

/* --- Halcyon : poste de contrôle sous pression ---------------------------------------- */

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 45, 62, 0.9), rgba(3, 20, 30, 0.9));
  box-shadow: inset 0 0 30px rgba(127, 219, 255, 0.06);
}

.o2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 320px;
}

.hud-label {
  font-family: var(--display);
  color: var(--accent-2);
}

.o2-bar {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
}

.o2-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7fdbff, #8be38b);
  transition: width 1s linear;
}

.o2-bar.low i {
  background: linear-gradient(90deg, #ff6b5b, #ffb547);
  animation: pulse 1s ease-in-out infinite;
}

#o2-time {
  font-size: 22px;
  color: var(--accent);
}

.readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--muted);
}

.readouts .ok {
  color: var(--ok);
}

.readouts .off {
  color: var(--danger);
}

.alarm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 107, 91, 0.16);
  border: 1px solid var(--danger);
  color: #ffd2cc;
  animation: alarm 1s steps(2) infinite;
}

@keyframes alarm {
  50% {
    background: rgba(255, 107, 91, 0.32);
  }
}

.deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 56px;
  padding: 10px;
  margin-bottom: 16px;
}

.deck::before {
  content: '';
  position: absolute;
  inset: 50% 18% auto;
  height: 4px;
  background: var(--line);
}

.deck::after {
  content: '';
  position: absolute;
  inset: 18% auto 18% 50%;
  width: 4px;
  background: var(--line);
}

body[data-theme='halcyon'] .module {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: radial-gradient(circle at 20% 20%, #10445c, #062030);
  border: 1px solid var(--line);
  border-radius: 40px;
  font-family: var(--body);
}

.module-icon {
  grid-row: span 2;
  font-size: 28px;
}

.module strong {
  font-family: var(--display);
  font-size: 14px;
}

.module small {
  color: var(--muted);
}

body[data-theme='halcyon'] .module.mine {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255, 181, 71, 0.35);
}

body[data-theme='halcyon'] .module.leaking {
  border-color: var(--danger);
  animation: alarm-border 1s steps(2) infinite;
}

@keyframes alarm-border {
  50% {
    box-shadow: 0 0 26px rgba(255, 107, 91, 0.6);
  }
}

.hub {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--bg);
  font-family: var(--display);
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .deck {
    gap: 14px;
  }
  .hub,
  .deck::before,
  .deck::after {
    display: none;
  }
  body[data-theme='halcyon'] .module {
    border-radius: 18px;
  }
}

.console {
  background: linear-gradient(180deg, rgba(8, 36, 52, 0.92), rgba(3, 18, 28, 0.92));
}

.darkness {
  padding: 40px 20px;
  text-align: center;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, #0b1a22, #000);
  color: #6f8a95;
}

.torchlit {
  color: #ffe6a3;
  font-style: italic;
}

.plaque-signal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 6px;
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(255, 230, 163, 0.28),
    rgba(122, 138, 145, 0.25) 60%
  );
  border: 2px solid #7a8a91;
}

.plaque-signal span {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.plaque-signal strong {
  font-size: 20px;
}

.screen {
  padding: 12px 14px;
  border-radius: 8px;
  background: #021018;
  box-shadow: inset 0 0 18px rgba(127, 219, 255, 0.2);
}

body[data-theme='halcyon'] .lever {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 6px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: linear-gradient(180deg, #123a50, #0a2433);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--body);
}

.lever .led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #24343b;
  border: 1px solid #3c5560;
}

.lever .led.on {
  background: #ffd84d;
  box-shadow: 0 0 10px #ffd84d;
}

.lever-body {
  position: relative;
  width: 46px;
  height: 74px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.lever-handle {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 26px;
  height: 22px;
  margin-left: -13px;
  border-radius: 4px;
  background: #d6dde0;
  box-shadow: 0 3px 0 #7d8a90;
  transition: top 0.25s ease;
}

.lever:hover:not(:disabled) .lever-handle {
  top: 14px;
}

.lever.cut .lever-handle {
  top: 44px;
}

.lever.cut {
  opacity: 0.55;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 8px;
  justify-content: start;
}

.keypad-screen {
  grid-column: 1 / -1;
  padding: 10px 14px;
  border-radius: 8px;
  background: #021018;
  color: var(--accent);
  font-size: 26px;
  letter-spacing: 0.2em;
  box-shadow: inset 0 0 18px rgba(255, 181, 71, 0.2);
}

body[data-theme='halcyon'] .key {
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 20px;
  color: var(--text);
  background: linear-gradient(180deg, #1a4a62, #0d3044);
  border: 1px solid var(--line);
  border-radius: 10px;
}

body[data-theme='halcyon'] .key-ok {
  background: var(--accent);
  color: var(--accent-ink);
}

.grid4.paper.covered {
  background: #7a8a91;
  padding: 4px;
  border-radius: 6px;
  width: max-content;
}

.grid4.paper span.masked {
  background: #7a8a91;
  box-shadow: inset 0 0 0 1px #6b7b82;
}

.grid4.paper span.through {
  box-shadow: inset 0 0 0 3px #4b5b62;
}

.plate-controls {
  margin-top: 8px;
}

.plate-mini {
  margin: 4px 0 8px;
}

.plate-mini .plate-top {
  display: block;
  width: auto;
  text-align: left;
  font-size: 11px;
}

.grid4.plate.mini {
  grid-template-columns: repeat(4, 16px);
  gap: 2px;
  margin: 2px 0;
}

.grid4.plate.mini span {
  width: 16px;
  height: 16px;
}

.locked-door {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #4a2a1a 0 38px, #42241a 38px 40px);
}

.smudge {
  color: rgba(43, 26, 18, 0.35);
  letter-spacing: -2px;
}

.leaderboards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 24px;
}

.leaderboards h4 {
  margin: 4px 0;
  font-family: var(--display);
  font-weight: 400;
  color: var(--accent);
}

/* --- Grandes équipes : postes supplémentaires ------------------------------------------ */

.deck.wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.deck.wide .hub,
.deck.wide::before,
.deck.wide::after {
  display: none;
}

@media (max-width: 860px) {
  .deck.wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.gauge {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #031722;
}

.gauge-dial {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid #7a8a91;
  background: conic-gradient(
    from 220deg,
    #8be38b 0 90deg,
    #ffb547 90deg 180deg,
    #ff6b5b 180deg 280deg,
    transparent 280deg
  );
  mask: radial-gradient(circle, transparent 52%, #000 53%);
}

.gauge strong {
  font-size: 20px;
  color: var(--accent-2);
}

.gauge small {
  color: var(--muted);
}

.valves label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  margin: 0;
}

.valves .dial {
  width: 64px;
  margin: 0;
}

.big-rate {
  font-size: 26px;
  font-weight: 700;
  margin: 10px 0 0;
}

body[data-theme='train-vienne'] .car-locomotive {
  border-radius: 34px 8px 8px 34px;
  background: linear-gradient(180deg, #2b0f18, #12060a);
}

/* --- Boutique : offres, achat, compte ----------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  padding: 28px 0 40px;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
}

.site-footer a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.mode-banner {
  display: inline-block;
  border: var(--border-w) dashed var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  background: var(--panel-2);
}

.link-button {
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  color: var(--accent-2);
  background: none;
  border: 0;
  box-shadow: none;
}

.link-button:hover:not(:disabled),
.link-button:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}

.chip {
  display: inline-block;
  border: var(--border-w) solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* Badge des fondateurs, visible aussi dans le salon des rooms (thèmes sombres). */
.badge-founder {
  display: inline-block;
  padding: 3px 10px;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1512;
  background: #ffc94a;
  border: 2px solid #1a1512;
  border-radius: 999px;
}

.keyhole-icon {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--accent);
}

.keyhole-icon .hole {
  fill: var(--bg);
}

/* Page Offres */

.offers-hero {
  max-width: 860px;
  margin: 28px auto 40px;
  text-align: center;
}

.offers-hero h1 {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.offers-hero mark {
  background: var(--sun);
  color: var(--text);
  padding: 0 0.12em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.offers-hero .lead {
  margin: 0 auto 18px;
}

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-bottom: 52px;
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid rgba(233, 223, 204, 0.28);
  border-radius: 16px;
}

.offer.featured {
  border: 2px solid var(--sun);
  box-shadow: 0 18px 40px rgba(255, 201, 74, 0.12);
}

.offer.featured .offer-eyebrow {
  color: var(--sun);
}

.offers.soon .offer {
  background: transparent;
  border-style: dashed;
}

.offer-eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.offer-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin: 0 0 14px;
}

.offer-price {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 8px;
}

.offer-price small {
  font-size: 16px;
}

.offer-per {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}

.perks {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.perks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--accent-2);
}

.offer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.room-picks {
  display: grid;
  gap: 8px;
  width: 100%;
}

.room-pick {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent-ink);
  text-decoration: none;
  background: var(--accent);
  border: var(--border-w) solid var(--line);
  border-radius: 14px;
  box-shadow: var(--button-shadow);
  transition: transform 0.12s ease;
}

.room-pick:hover {
  transform: translate(-1px, -1px);
}

.room-pick img {
  display: block;
  width: 36px;
  height: 50px;
  object-fit: cover;
  border: 2px solid var(--line);
  border-radius: 6px;
}

.room-pick b {
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

.offer-done {
  font-weight: 700;
  margin: 0;
  align-self: center;
}

.offer-sticker {
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 4px 10px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sun);
  background: var(--bg);
  border: 1px solid var(--sun);
  border-radius: 999px;
}

.soon-tag {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: var(--border-w) dashed var(--line);
  border-radius: 999px;
}

.section-title.small-title {
  font-size: clamp(22px, 3vw, 30px);
}

.gift-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
  margin-bottom: 52px;
  background: var(--surface);
  border: 1px solid rgba(233, 223, 204, 0.28);
  border-left: 4px solid var(--rose);
  border-radius: 16px;
}

.gift-band h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
}

.gift-band .eyebrow {
  color: var(--rose);
}

.gift-band h2 mark {
  padding: 0 0.12em;
  border-radius: 6px;
  background: var(--rose);
  color: #1a1512;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.gift-band p:last-child {
  margin: 0;
}

.faq {
  max-width: 820px;
  margin: 0 auto 32px;
}

.faq details {
  padding: 14px 0;
  border-bottom: var(--border-w) solid var(--line);
}

.faq summary {
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-family: var(--display);
  font-weight: 800;
}

.faq details[open] summary::after {
  content: '–';
}

.faq details p {
  margin: 10px 0 0;
}

/* Résumé des offres sur l'accueil */

.pricing-teaser {
  margin-bottom: 96px;
}

.section-head {
  margin-bottom: 26px;
}

.section-head .section-title {
  margin-bottom: 8px;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

/* L'argument qui précède les offres : un seul joueur paie. */
.payer-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 16px 20px;
  margin: 0 0 30px;
  font-size: 16px;
  color: var(--muted);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
}

.payer-note strong {
  font-family: var(--display);
  font-size: 17px;
  color: var(--text);
}

/* --- FAQ -------------------------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin: 0 0 96px;
}

.faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
}

.faq-item summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  font-size: 24px;
  color: var(--accent);
  transition: rotate 0.25s ease;
}

.faq-item[open] summary::after {
  rotate: 45deg;
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.faq-item p {
  margin: 0 0 22px;
  max-width: 64ch;
  color: var(--muted);
}

/* --- Conclusion : l'invitation à gauche, la serrure qui s'ouvre à droite ------------- */
.finale {
  width: 100vw;
  /* Le même écart que entre les autres sections de l'accueil. */
  margin: 32px 0 96px calc(50% - 50vw);
  padding: 140px 16px 150px;
  /* Fondu en haut et en bas : la section se fond dans le fond de la page. */
  background:
    linear-gradient(var(--bg) 0, transparent 140px, transparent calc(100% - 140px), var(--bg) 100%),
    radial-gradient(ellipse at 72% 45%, rgba(255, 201, 74, 0.12), transparent 55%), #0d0a08;
}

.finale-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.finale-lock {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 500px;
  /* La place du cadenas 3D est réservée d'avance : la page ne saute pas à son arrivée. */
  aspect-ratio: 1 / 1.05;
}

.finale-lock img {
  display: block;
  width: 100%;
  height: auto;
}

.finale-lock.has-3d img {
  display: none;
}

.finale-stage {
  width: 100%;
}

.finale-stage canvas {
  display: block;
}

.finale h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

/* « La porte est ouverte » : la phrase s'allume quand la clé a fini de tourner. */
.finale h2 em {
  display: block;
  color: var(--sun);
  transition: text-shadow 0.8s ease;
}

.finale.unlocked h2 em {
  text-shadow: 0 0 28px rgba(255, 201, 74, 0.45);
}

.finale p {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 34px;
  max-width: 30em;
}

@media (max-width: 760px) {
  .finale {
    padding: 120px 16px 130px;
    text-align: center;
  }

  .finale-inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .finale-lock {
    order: -1;
    max-width: 340px;
  }

  .finale p {
    margin-inline: auto;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid rgba(233, 223, 204, 0.28);
  border-radius: 16px;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.plan:hover {
  border-color: var(--line);
  transform: translateY(-3px);
}

.plan.featured {
  border: 1px solid var(--sun);
  background: linear-gradient(180deg, rgba(255, 201, 74, 0.07), transparent 60%), var(--surface);
}

.plan-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan.featured .plan-label {
  color: var(--sun);
}

.plan-name {
  margin: 10px 0 18px;
  font-size: 18px;
  font-weight: 700;
}

.plan-price {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.plan-example {
  margin-top: 8px;
  font-size: 13px;
  color: var(--sun);
}

.plan-perks {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  font-size: 15px;
  color: var(--muted);
}

.plan-perks li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
}

.plan-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

.plan-cta {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid rgba(233, 223, 204, 0.16);
}

.plan-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 4px 10px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sun);
  background: var(--bg);
  border: 1px solid var(--sun);
  border-radius: 999px;
}

/* Page de paiement */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.checkout-summary {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.checkout-summary h1 {
  font-size: clamp(24px, 3vw, 32px);
}

.checkout-art .room-art.framed {
  transform: none;
  box-shadow: none;
  border: var(--border-w) solid var(--line);
}

.checkout-price {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  margin: 0;
}

.checkout-price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.offer-visual {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 5 / 7;
  padding: 12px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  background: var(--sun);
  border: var(--border-w) solid var(--line);
  border-radius: 14px;
}

.offer-visual.v-room,
.offer-visual.v-pack3 {
  background: var(--rose);
}

.offer-visual.v-pass {
  background: var(--sky);
}

.offer-visual .keyhole-icon {
  width: 56px;
  height: 56px;
  color: var(--line);
}

.offer-visual .keyhole-icon .hole {
  fill: var(--surface);
}

.connected {
  margin-bottom: 16px;
}

.connected .link-button {
  margin-left: 8px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 500;
  cursor: pointer;
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.checkout-form button {
  width: 100%;
  padding: 15px 20px;
  font-size: 15px;
}

.login .code-input {
  max-width: 230px;
}

.login .row {
  margin-bottom: 10px;
}

.gift-input {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.demo-pay h1 {
  font-size: 28px;
}

@media (max-width: 860px) {
  .checkout,
  .gift-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .checkout-summary {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .checkout-summary .perks {
    font-size: 15px;
  }

  .checkout-price {
    font-size: 28px;
  }
}

/* Après le paiement */

.thanks {
  text-align: center;
}

.thanks .row {
  justify-content: center;
}

.thanks-art {
  max-width: 170px;
  margin: 0 auto 18px;
}

.gift-code {
  margin: 12px 0 18px;
  padding: 14px;
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--panel-2);
  border: var(--border-w) dashed var(--line);
  border-radius: 12px;
}

/* Compte */

.account-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 24px 0 8px;
}

.account-head h1 {
  font-size: clamp(22px, 3.4vw, 34px);
  overflow-wrap: anywhere;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 24px;
  align-items: start;
}

.my-rooms {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.my-rooms li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--panel-2);
}

.my-room-art {
  grid-row: span 2;
}

.my-room-art img {
  display: block;
  width: 48px;
  height: 67px;
  object-fit: cover;
  border: var(--border-w) solid var(--line);
  border-radius: 8px;
}

.my-room-text strong {
  display: block;
}

.my-room-text small,
.order-list small {
  color: var(--muted);
}

.credit-line {
  font-size: 15px;
}

.vote-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.vote {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: none;
}

.vote img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 8px;
}

.vote.chosen {
  background: var(--sun);
  box-shadow: var(--button-shadow);
}

.order-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.order-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel-2);
}

.order-list small {
  display: block;
}

.order-gift {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fiche d'une room à débloquer (dans l'univers de la room) */

.locked {
  border-top: var(--border-w) solid var(--line);
  padding-top: 18px;
  margin-top: 8px;
}

.locked-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.locked-head h3 {
  color: var(--accent);
  font-size: 14px;
}

.locked-head p {
  margin: 0;
}

.locked .row {
  margin-bottom: 14px;
}

/* Fin de partie : donner envie d'organiser la suivante */

.host-cta {
  text-align: center;
  border-color: var(--accent);
}

.host-cta h2 {
  font-size: clamp(20px, 3vw, 26px);
}

.host-cta p {
  margin: 0 0 16px;
}

.host-cta .row {
  justify-content: center;
}

body[data-theme='train-vienne'] .host-cta h2::after {
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Pages légales */

.legal {
  max-width: 820px;
  margin: 16px auto 0;
}

.legal h1 {
  font-size: clamp(26px, 4vw, 36px);
}

.legal h2 {
  font-size: 17px;
  margin-top: 26px;
}

.legal ul {
  padding-left: 20px;
}

.legal li {
  margin-bottom: 8px;
}

mark.todo {
  padding: 0 4px;
  color: #1a1512;
  background: #ffc94a;
  border-radius: 4px;
}

/* --- Menu latéral ------------------------------------------------------------------ */

.menu-button {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  flex: none;
  color: var(--text);
  background: transparent;
  border: var(--border-w) solid var(--line);
  border-radius: 50%;
  box-shadow: none;
}

.menu-button span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.menu-button:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}

body.menu-open .menu-button span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.menu-open .menu-button span:nth-child(2) {
  opacity: 0;
}

body.menu-open .menu-button span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Le bouton menu n'existe que sur petit écran, et jamais en partie (la barre affiche le chronomètre). */
body[data-page='game'] .menu-button {
  display: none;
}

@media (min-width: 921px) {
  .menu-button {
    display: none;
  }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: rgba(8, 6, 5, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: min(360px, 86vw);
  padding: 22px 26px 28px;
  overflow-y: auto;
  color: #1a1512;
  background: #e9dfcc;
  border-left: 2px solid #1a1512;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.35s;
}

body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .menu {
  transform: none;
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-close {
  align-self: flex-end;
  padding: 6px 12px;
  font-size: 11px;
  color: #1a1512;
  background: transparent;
  border-color: #1a1512;
  box-shadow: none;
}

.menu-links {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
}

.menu-links a {
  display: block;
  padding: 10px 0;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a1512;
  text-decoration: none;
  border-bottom: 2px solid rgba(26, 21, 18, 0.15);
}

.menu-links a:hover,
.menu-links a[aria-current='page'] {
  color: #d93d1a;
}

.menu .button {
  align-self: flex-start;
  border-color: #1a1512;
  box-shadow: 3px 3px 0 #1a1512;
}

.menu-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 13px;
}

.menu-legal a {
  color: #5a5048;
}

/* --- Le Manoir Asselin : nuit bretonne, velours violet et lueur des bougies ------------ */

body[data-theme='manoir-asselin'] {
  --display: Georgia, 'Times New Roman', serif;
  --bg: #0f0a16;
  --surface: rgba(30, 20, 42, 0.9);
  --panel: var(--surface);
  --panel-2: #2a1d3a;
  --text: #eee6f5;
  --muted: #b3a5c4;
  --line: #5b4777;
  --accent: #f2c46d;
  --accent-ink: #1d1206;
  --accent-2: #e8b7ff;
  --ok: #a6e3b4;
  --danger: #ff8f8f;
  --warning: #f2c46d;
  --input-bg: rgba(8, 5, 12, 0.85);
  --border-w: 1px;
  --radius: 12px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background: radial-gradient(ellipse 110% 70% at 50% -10%, #3a2552 0%, #1a1026 50%, var(--bg) 100%)
    fixed var(--bg);
}

body[data-theme='manoir-asselin'] .topbar {
  background: rgba(15, 10, 22, 0.78);
  backdrop-filter: blur(8px);
}

body[data-theme='manoir-asselin'] h1,
body[data-theme='manoir-asselin'] h2 {
  font-style: italic;
  font-weight: 700;
}

body[data-theme='manoir-asselin'] button:hover:not(:disabled),
body[data-theme='manoir-asselin'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(242, 196, 109, 0.4);
}

body[data-theme='manoir-asselin'] button.ghost,
body[data-theme='manoir-asselin'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.candelabra {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 18px 10px;
  margin: 0 auto 18px;
  width: fit-content;
  border-bottom: 3px solid #8a6a3a;
  border-radius: 0 0 40% 40%;
}

.candle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candle .flame {
  width: 10px;
  height: 18px;
  margin-bottom: 2px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6c9 0%, #ffcf5a 45%, #ff8a2b 100%);
  box-shadow: 0 0 14px 4px rgba(255, 190, 80, 0.45);
  animation: flicker 2.4s ease-in-out infinite alternate;
}

.candle.out .flame {
  visibility: hidden;
}

.candle .wax {
  width: 12px;
  height: 38px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #d9cdb4, #f5eedc 45%, #c8b99a);
}

.candle.out .wax::before {
  content: '';
  display: block;
  width: 2px;
  height: 6px;
  margin: -6px auto 0;
  background: #2b2118;
}

.candle:nth-child(2n) .flame {
  animation-duration: 1.9s;
}

.candle:nth-child(3n) .flame {
  animation-delay: -0.8s;
}

@keyframes flicker {
  0% {
    transform: scale(1) rotate(-2deg);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.08, 0.94) rotate(2deg);
  }
  100% {
    transform: scale(0.94, 1.06) rotate(-1deg);
    opacity: 1;
  }
}

.spirit-board {
  padding: 18px;
  margin-bottom: 14px;
  text-align: center;
  background: radial-gradient(ellipse at center, #5a4128 0%, #3a2918 70%);
  border: 1px solid #8a6a3a;
  border-radius: 50% / 18%;
  color: #f4e7cd;
}

.spirit-board .muted {
  color: #d8c3a0;
}

.sigils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
}

.sigil {
  font-size: 30px;
  line-height: 1;
}

.sigils .arrow {
  opacity: 0.5;
}

.grimoire,
.register {
  min-width: 260px;
  margin-bottom: 8px;
}

.grimoire th,
.grimoire td,
.register th,
.register td {
  padding: 4px 12px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.grimoire td {
  font-family: var(--mono);
  font-size: 18px;
}

.grimoire .sigil {
  font-size: 22px;
}

.manoir-note {
  font-style: italic;
  color: var(--muted);
}

.clock-wrap {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 18px;
  text-align: center;
}

.clock {
  width: 170px;
  height: 170px;
}

.clock text {
  font:
    7px Georgia,
    serif;
  fill: #3a2918;
  text-anchor: middle;
}

.clock-rim {
  fill: #8a6a3a;
}

.clock-face {
  fill: #f1e6cc;
}

.hand-hour,
.hand-minute {
  stroke: #1d1206;
  stroke-linecap: round;
}

.hand-hour {
  stroke-width: 3.2;
}

.hand-minute {
  stroke-width: 1.6;
}

.clock-pin {
  fill: #1d1206;
}

.portraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.portrait {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.portrait.taken {
  border-color: var(--accent);
}

.portrait .frame {
  display: grid;
  place-items: center;
  width: 84px;
  height: 104px;
  margin-bottom: 4px;
  font-family: Georgia, serif;
  font-style: italic;
  color: #f1e6cc;
  background: radial-gradient(ellipse at 50% 35%, #4b3a5e, #1d1426);
  border: 6px ridge #a07c45;
  border-radius: 40% / 30%;
}

.portrait.taken .frame {
  opacity: 0.35;
  border-style: dashed;
}

.portrait small {
  color: var(--muted);
}

.letter {
  padding: 16px 20px;
  margin-bottom: 14px;
  font-family: Georgia, serif;
  font-style: italic;
  color: #2b1a12;
  background: #efe2c4;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.letter li {
  margin-bottom: 4px;
}

/* --- Parties publiques ------------------------------------------------------------ */

.public-head {
  max-width: 720px;
  margin: 24px 0 28px;
}

.public-list {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.public-game {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px 12px 12px;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 14px;
}

.public-art .room-art {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
}

.public-body .card-title {
  font-size: 18px;
  margin-bottom: 4px;
}

.public-body p {
  margin: 0;
}

.public-empty {
  max-width: 720px;
}

/* Le bouton son, en bas à gauche, seulement pendant une partie. */
.sound-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  border-radius: 99px;
  box-shadow: none;
  backdrop-filter: blur(4px);
}

body[data-page='game'] .sound-toggle {
  display: inline-flex;
}

.sound-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-toggle svg path:first-child {
  fill: currentColor;
}

/* --- Presse et créateurs ---------------------------------------------------------------- */
.press-about {
  margin-bottom: 48px;
}

.press-about p {
  max-width: 56em;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}

.press-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.press-facts li {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}

.press-facts strong {
  font-family: var(--display);
  font-size: 30px;
  color: var(--sun);
}

.press-facts span {
  font-size: 14px;
  color: var(--muted);
}

.press-block {
  margin-bottom: 48px;
}

.press-video {
  display: block;
  width: 100%;
  max-width: 960px;
  border-radius: 14px;
  background: #000;
}

.press-arts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.press-art {
  display: grid;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.press-art .room-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.25s ease;
}

.press-art:hover .room-art {
  transform: translateY(-3px);
}

.press-art span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.press-art small {
  color: var(--accent);
}

.press-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}

.press-logo {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 22px 14px 14px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 14px;
}

.press-logo.on-dark {
  background: #16120f;
}

.press-logo.on-light {
  color: #16120f;
  background: #f6efe4;
}

.press-logo img {
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.press-logo span {
  font-size: 13px;
  font-weight: 700;
}

.press-creators {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 64px;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.press-creators h2 {
  margin-top: 0;
}

.press-perks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .press-creators {
    grid-template-columns: 1fr;
  }
}

/* Paiement : le code créateur appliqué, ou le champ pour en saisir un. */
.checkout-price s {
  margin-right: 8px;
  font-size: 0.6em;
  color: var(--muted);
}

.creator-applied {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--sun);
}

.creator-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.creator-form input {
  width: 180px;
  text-transform: uppercase;
}

.creator-form .error {
  flex-basis: 100%;
  margin: 0;
}

.creator-open {
  margin-top: 4px;
  font-size: 14px;
}

/* Victoire, joueur sans compte : garder son pion en créant un compte. */
.keep-pawn {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.keep-pawn h3 {
  margin-top: 0;
}

.keep-pawn .pawn-img {
  width: 140px;
  height: 140px;
}

@media (max-width: 560px) {
  .keep-pawn {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* Victoire : partager l'image de l'équipe. */
.share-button {
  margin: 4px 0 18px;
}

.share-dialog .card {
  width: min(560px, 100%);
  margin: auto;
}

.share-dialog h2 {
  margin-top: 0;
}

.share-preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  margin: 0 auto 16px;
  object-fit: contain;
  border-radius: 12px;
}

.share-dialog .row {
  flex-wrap: wrap;
  gap: 10px;
}

.share-dialog p {
  margin: 14px 0 0;
}

/* Quitter une partie entre inconnus : pourquoi, et signaler un joueur si besoin. */
.quit-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* Centrée, mais défile depuis le haut quand elle dépasse l'écran (téléphone). */
  display: flex;
  /* Sous l'en-tête de la partie, qui reste au-dessus. */
  padding: 84px 16px 16px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.quit-dialog form {
  width: min(520px, 100%);
  margin: auto;
}

.quit-dialog h2 {
  margin-top: 0;
}

.quit-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
  padding: 0;
  border: 0;
}

.quit-report {
  display: none;
  gap: 6px;
  margin-bottom: 14px;
}

.quit-dialog:has(#quit-reason-0:checked) .quit-report {
  display: grid;
}

.quit-report p {
  margin: 4px 0 0;
}

/* Sessions publiques : les prochains rendez-vous, avec rappel par e-mail. */
.sessions {
  margin-bottom: 36px;
}

.sessions > .section-title {
  margin: 0 0 6px;
  font-size: 22px;
}

.sessions > p {
  max-width: 760px;
  margin: 0 0 16px;
}

.session-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.session-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 14px;
}

.session-card.live {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.session-art .room-art {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.session-when {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.session-body h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.session-body h3 .chip {
  font-size: 11px;
  vertical-align: middle;
}

.session-body p {
  margin: 0 0 8px;
}

.session-remind,
.session-join {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.session-remind .check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

.session-remind .check input {
  width: auto;
  margin: 0;
}

.session-done {
  color: var(--muted);
  font-size: 14px;
}

.live-dot::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: lock-wait 1.2s ease-in-out infinite;
}

/* « Trouver une équipe » : le choix de la room et du pseudo, puis le salon d'attente commun. */
.find-team {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 40px;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.find-team h2 {
  margin: 0 0 8px;
}

.find-team p {
  margin: 0;
}

.find-team-fields {
  display: grid;
  gap: 6px;
}

.find-team-fields button {
  margin-top: 10px;
}

.public-list-title {
  margin: 0 0 14px;
  font-size: 22px;
}

.match-wait {
  text-align: center;
}

.match-wait h1 {
  font-size: clamp(26px, 3.4vw, 38px);
}

.match-seats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 18px;
  padding: 0;
  list-style: none;
}

.match-seat {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 12px 6px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.25);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 20%, transparent);
  border-radius: 14px;
}

.match-seat.me {
  border-color: var(--accent);
}

.match-seat .pawn-mini {
  width: 64px;
  height: 64px;
}

.match-seat.empty {
  color: var(--muted);
  font-weight: 500;
  border-style: dashed;
}

.match-pawn {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 26px;
  animation: lock-wait 1.6s ease-in-out infinite;
}

.match-seat .captain {
  padding: 1px 8px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
}

@keyframes lock-wait {
  50% {
    opacity: 0.35;
  }
}

@media (max-width: 760px) {
  .find-team {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .match-seats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-pawn {
    animation: none;
  }
}

.public-note {
  margin-bottom: 48px;
}

.public-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 14px;
  margin: 12px 0;
  border: 1px dashed color-mix(in srgb, var(--line) 50%, transparent);
  border-radius: 12px;
}

.public-toggle p {
  margin: 0;
  flex: 1 1 260px;
}

.public-toggle.on {
  border-style: solid;
  border-color: var(--accent);
}

@media (max-width: 560px) {
  .public-game {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .public-art .room-art {
    width: 64px;
    height: 64px;
  }

  .public-game .button {
    grid-column: 1 / -1;
    text-align: center;
  }
}

/* --- Formules d'une room : tableau des offres et choix au paiement --------------------- */

.tier-table {
  display: grid;
  gap: 4px;
  margin: 4px 0 16px;
}

.tier-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.tier-row b {
  font-weight: 700;
}

.tier-row span {
  font-family: var(--display);
  font-weight: 700;
  text-align: right;
}

.tier-row small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.tier-row.featured {
  outline: 2px solid var(--accent);
}

.tier-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0 0 22px;
  border: 0;
}

.tier-picker legend {
  margin-bottom: 10px;
  font-weight: 700;
}

button.tier-option {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 12px 14px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-size: 15px;
  color: var(--text);
  background: var(--panel-2);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 30%, transparent);
  border-radius: 12px;
  box-shadow: none;
}

button.tier-option span {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
}

button.tier-option small {
  color: var(--muted);
}

button.tier-option:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

button.tier-option.chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* --- Modération : exclure, signaler ------------------------------------------------- */

.crew li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.link-button.kick {
  margin-left: auto;
  font-size: 13px;
  color: var(--danger);
}

.report-box {
  margin: 10px 0;
}

.report-box summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
}

.report-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}

.report-form select {
  flex: 1 1 180px;
  min-width: 0;
}

/* --- Typographie de la plateforme ---------------------------------------------------------
   Titres en capitales étroites, comme l'accroche du hero : un peu plus grands pour compenser
   la police condensée. Boutons et petites étiquettes en Manrope, plus lisible en petit. */

body[data-theme='platform'] :is(h1, h2, .section-title):not(.hero-cinema-title, .hero-kicker) {
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.02;
}

body[data-theme='platform'] h1:not(.hero-cinema-title, .hero-kicker) {
  font-size: clamp(36px, 5vw, 60px);
}

body[data-theme='platform'] .section-title {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
}

body[data-theme='platform'] :is(.card-title, .how-step h3, .plan-name, .offer-name, .finale h2) {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.005em;
}

body[data-theme='platform'] .card-title {
  font-size: 25px;
}

body[data-theme='platform'] .how-step h3 {
  font-size: 23px;
}

body[data-theme='platform'] :is(.plan-price, .card-price, .offer-price, .checkout-price) {
  font-family: var(--display);
  font-weight: 700;
}

body[data-theme='platform'] .plan-price {
  font-size: 40px;
}

body[data-theme='platform']
  :is(button, .button, .card-cta, .plan-cta, .cat-name, .faq-item summary) {
  font-family: var(--body);
}

body[data-theme='platform'] :is(button, .button, .card-cta, .plan-cta) {
  font-weight: 700;
  letter-spacing: 0.06em;
}

body[data-theme='platform']
  :is(.eyebrow, .card-theme, .plan-label, .group-title, .how-num, #status .topnav a) {
  font-family: var(--body);
  font-weight: 700;
}

body[data-theme='platform'] .plan-name {
  font-size: 23px;
}

/* Le surlignage peut passer sur deux lignes : on les aère pour qu'elles ne se touchent pas. */
body[data-theme='platform'] .gift-band h2 {
  line-height: 1.3;
}

/* --- Salles immersives (scène 3D dans une station) ------------------------------------ */

.immersive {
  margin: 4px 0 14px;
}

.immersive-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #07051a;
  border: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
}

.immersive-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.immersive-nav {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.immersive-nav button {
  background: rgba(8, 6, 14, 0.7);
  backdrop-filter: blur(4px);
}

.immersive-nav button[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}

.immersive-hint {
  position: absolute;
  top: 10px;
  left: 12px;
  margin: 0;
  font-size: 13px;
  color: rgba(240, 232, 220, 0.8);
  text-shadow: 0 1px 4px #000;
}

.immersive-text {
  margin-bottom: 14px;
}

.immersive-text summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
}

/* --- Liste « Prévenez-moi » --------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.waitlist-form input {
  flex: 1 1 120px;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
}

.waitlist-form .small-button {
  flex: none;
}

.waitlist-form small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
}

.soon-footer .link-button,
.soon-footer .voted {
  font-size: 13px;
  white-space: nowrap;
}

.next-room h3 {
  margin-bottom: 4px;
}

.next-room .waitlist-form {
  max-width: 520px;
}

/* --- Page Team building ------------------------------------------------------------- */

.team-hero .button {
  margin-top: 6px;
}

.team-why,
.team-steps {
  margin-bottom: 56px;
}

.team-rooms {
  margin-bottom: 56px;
}

.team-room-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.team-room {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(233, 223, 204, 0.28);
  color: #fff;
  text-decoration: none;
}

.team-room .room-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.team-room:hover .room-art {
  transform: scale(1.04);
}

.team-room span {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}

.team-room small {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sun);
}

.team-room strong {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.1;
}

.quote {
  scroll-margin-top: 90px;
  margin-bottom: 56px;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}

.quote-grid .wide {
  grid-column: 1 / -1;
}

.quote-grid label {
  display: flex;
  flex-direction: column;
}

.quote-grid select {
  flex: none;
  min-width: 0;
  width: 100%;
  margin-bottom: 12px;
}

/* Page d'aide : trois raccourcis avant le formulaire. */
.help-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 820px;
  margin: 0 auto 36px;
}

.help-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.help-links a:hover {
  border-color: var(--sun);
  transform: translateY(-2px);
}

.help-links span {
  color: var(--muted);
  font-size: 14px;
}

#faq {
  scroll-margin-top: 80px;
}

.faq-more {
  margin: 28px 0 0;
  color: var(--muted);
}

.faq-more a {
  color: var(--sun);
  font-weight: 700;
}

.quote-done h3 {
  color: var(--ok);
}

@media (max-width: 560px) {
  .quote-grid,
  .help-links {
    grid-template-columns: 1fr;
  }
}

/* Flèche « Revenir en haut », en bas à droite. */
.to-top {
  position: fixed;
  z-index: 15;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--sun) 50%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #16120f 88%, transparent);
  color: var(--sun);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.to-top.shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top.shown:hover {
  background: var(--sun);
  color: #16120f;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fiche d'une room : les titres de section ressortent dans la couleur de la room. */
.room-sheet .sheet-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--accent);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.room-sheet .sheet-heading::before {
  content: '';
  flex: none;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* --- Offres : une carte par taille d'équipe, puis le choix de la room ------------------- */

.offers.tiers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 14px;
}

.offers.duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tier-note {
  margin: 0 0 52px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .offers.tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .offers.tiers,
  .offers.duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.room-chooser h1 {
  margin-bottom: 18px;
  font-size: clamp(28px, 4vw, 38px);
}

.room-chooser .room-picks {
  gap: 12px;
  margin-bottom: 14px;
}

.room-pick span {
  display: flex;
  flex-direction: column;
}

.room-pick small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}

.room-pick.owned {
  color: var(--text);
  background: var(--panel-2);
}

/* --- Fiche d'une room : l'histoire à gauche, l'action à droite --------------------------- */

.room-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}

.room-sheet .sheet-heading {
  margin-top: 22px;
}

.sheet-keys,
.sheet-prep {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sheet-keys {
  display: grid;
  gap: 10px;
}

.sheet-keys li,
.sheet-prep li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sheet-keys span,
.sheet-prep span {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.sheet-prep {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--muted);
  font-size: 14px;
}

.sheet-prep span {
  width: 28px;
  height: 28px;
  font-size: 15px;
}

/* La carte d'action reste à l'écran pendant qu'on lit la fiche. */
.sheet-action {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.sheet-action .locked,
.sheet-action .create {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sheet-action p {
  margin: 0;
}

.sheet-action-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sheet-action-label svg {
  width: 22px;
  height: 22px;
}

.sheet-action-price {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.sheet-action-status {
  font-weight: 700;
}

.sheet-action .button,
.sheet-action button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.sheet-action input {
  width: 100%;
  margin: 0;
}

.sheet-action-alt {
  font-size: 14px;
  text-align: center;
}

.sheet-action-foot {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 25%, transparent);
}

@media (max-width: 860px) {
  .room-sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .sheet-action {
    position: static;
  }
}

/* --- Le Temple Oublié : grès, jade et sable qui coule ---------------------------------- */

body[data-theme='temple-oublie'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #120d07;
  --surface: rgba(38, 27, 16, 0.92);
  --panel: var(--surface);
  --panel-2: #3a2a18;
  --text: #f3e9d6;
  --muted: #c2b092;
  --line: #7a6040;
  --accent: #e9b44c;
  --accent-ink: #1e1305;
  --accent-2: #6fcf97;
  --ok: #8fdcae;
  --danger: #ff8a6b;
  --warning: #e9b44c;
  --input-bg: rgba(14, 9, 4, 0.85);
  --border-w: 1px;
  --radius: 10px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background: radial-gradient(ellipse 90% 60% at 50% -10%, #4a3518 0%, #21170c 55%, var(--bg) 100%)
    fixed var(--bg);
}

body[data-theme='temple-oublie'] .topbar {
  background: rgba(18, 13, 7, 0.8);
  backdrop-filter: blur(8px);
}

body[data-theme='temple-oublie'] h1,
body[data-theme='temple-oublie'] h2 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body[data-theme='temple-oublie'] button:hover:not(:disabled),
body[data-theme='temple-oublie'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(233, 180, 76, 0.35);
}

body[data-theme='temple-oublie'] button.ghost,
body[data-theme='temple-oublie'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Le rai de lumière du plafond, et le sable qui tombe en fins filets. */
body[data-theme='temple-oublie'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='temple-oublie'] .ambience::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 38%;
  width: 24%;
  height: 120%;
  background: linear-gradient(180deg, rgba(255, 216, 150, 0.1), rgba(255, 216, 150, 0) 85%);
  transform: skewX(-8deg);
  filter: blur(14px);
  animation: shaft 9s ease-in-out infinite alternate;
}

body[data-theme='temple-oublie'] .ambience span {
  position: absolute;
  top: -12px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f0d6a2;
  box-shadow: 0 0 4px rgba(240, 214, 162, 0.6);
  opacity: 0;
  animation: sand 7s linear infinite;
}

body[data-theme='temple-oublie'] .ambience span:nth-child(1) {
  left: 41%;
  animation-delay: 0s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(2) {
  left: 44%;
  animation-delay: -1.4s;
  animation-duration: 6s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(3) {
  left: 47%;
  animation-delay: -2.8s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(4) {
  left: 50%;
  animation-delay: -4.2s;
  animation-duration: 8s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(5) {
  left: 53%;
  animation-delay: -0.7s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(6) {
  left: 56%;
  animation-delay: -3.5s;
  animation-duration: 6.5s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(7) {
  left: 12%;
  animation-delay: -5s;
  animation-duration: 9s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(8) {
  left: 86%;
  animation-delay: -2s;
  animation-duration: 9.5s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(9) {
  left: 49%;
  animation-delay: -5.6s;
  animation-duration: 5.5s;
}
body[data-theme='temple-oublie'] .ambience span:nth-child(10) {
  left: 45%;
  animation-delay: -6.3s;
}

@keyframes sand {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(105vh);
    opacity: 0;
  }
}

@keyframes shaft {
  to {
    opacity: 0.6;
  }
}

/* Glyphes gravés et nombres en points et en barres. */
.glyph {
  width: 44px;
  height: 44px;
  padding: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #f3e2bd;
  background: linear-gradient(160deg, #6b5232, #4a3721);
  border: 1px solid #8a6c45;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

.glyph .fill {
  fill: currentColor;
  stroke: none;
}

.numeral {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  vertical-align: middle;
}

.numeral .dots {
  display: flex;
  gap: 4px;
}

.numeral .dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.numeral .bar {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}

.door-glyphs {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.door-glyphs .glyph {
  width: 64px;
  height: 64px;
  padding: 10px;
}

.tablet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  padding: 14px;
  margin-bottom: 18px;
  background: linear-gradient(160deg, #5a4429, #3d2c19);
  border: 1px solid #7a6040;
  border-radius: 10px;
}

/* Le bord cassé de la tablette, du côté où manque l'autre moitié. */
.tablet-left {
  border-right: 3px dashed #2a1d0f;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.tablet-right {
  border-left: 3px dashed #2a1d0f;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.tablet-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fresco,
.sky-chart,
.numeral-key {
  padding: 12px 16px;
  margin-bottom: 18px;
  border-left: 3px solid var(--accent-2);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0 10px 10px 0;
}

.fresco p,
.sky-chart p,
.numeral-key p {
  margin: 6px 0;
}

.numeral-example {
  display: flex;
  align-items: center;
  gap: 12px;
}

.offerings {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.offerings li,
.stone-pick {
  display: flex;
  align-items: center;
  gap: 10px;
}

.offerings .numeral {
  margin-left: auto;
}

.stone {
  flex: none;
  width: 22px;
  height: 18px;
  border-radius: 45% 55% 50% 40%;
  background: var(--stone);
  box-shadow:
    inset -3px -3px 5px rgba(0, 0, 0, 0.35),
    inset 2px 2px 3px rgba(255, 255, 255, 0.2);
}

.stone-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.stone-pick {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.stone-pick input {
  width: auto;
  margin: 0;
}

.stone-pick:has(input:checked) {
  border-color: var(--accent);
  background: rgba(233, 180, 76, 0.12);
}

.rings-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ring-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ring-pick select {
  max-width: 200px;
}

.idol-weight {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* --- L'Observatoire : nuit étoilée et phosphore vert des instruments ------------------- */

body[data-theme='observatoire'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #04070f;
  --surface: rgba(10, 18, 34, 0.9);
  --panel: var(--surface);
  --panel-2: #12203a;
  --text: #e6eefc;
  --muted: #9fb0cc;
  --line: #2c4166;
  --accent: #7cf0b4;
  --accent-ink: #04140c;
  --accent-2: #9cc4ff;
  --ok: #7cf0b4;
  --danger: #ff8f8f;
  --warning: #ffd27a;
  --input-bg: rgba(2, 5, 12, 0.85);
  --border-w: 1px;
  --radius: 10px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background: radial-gradient(ellipse 120% 70% at 50% 110%, #12264a 0%, #070d1c 55%, var(--bg) 100%)
    fixed var(--bg);
}

body[data-theme='observatoire'] .topbar {
  background: rgba(4, 7, 15, 0.8);
  backdrop-filter: blur(8px);
}

body[data-theme='observatoire'] h1,
body[data-theme='observatoire'] h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme='observatoire'] button:hover:not(:disabled),
body[data-theme='observatoire'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(124, 240, 180, 0.35);
}

body[data-theme='observatoire'] button.ghost,
body[data-theme='observatoire'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Des étoiles qui scintillent au-dessus de la page. */
body[data-theme='observatoire'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='observatoire'] .ambience span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #dfe9ff;
  box-shadow: 0 0 6px rgba(200, 220, 255, 0.8);
  animation: twinkle 4s ease-in-out infinite;
}

body[data-theme='observatoire'] .ambience span:nth-child(1) {
  left: 6%;
  top: 12%;
  animation-delay: 0s;
}
body[data-theme='observatoire'] .ambience span:nth-child(2) {
  left: 18%;
  top: 34%;
  animation-delay: -1.2s;
}
body[data-theme='observatoire'] .ambience span:nth-child(3) {
  left: 29%;
  top: 8%;
  animation-delay: -2.3s;
}
body[data-theme='observatoire'] .ambience span:nth-child(4) {
  left: 44%;
  top: 22%;
  animation-delay: -0.6s;
}
body[data-theme='observatoire'] .ambience span:nth-child(5) {
  left: 57%;
  top: 6%;
  animation-delay: -3.1s;
}
body[data-theme='observatoire'] .ambience span:nth-child(6) {
  left: 66%;
  top: 28%;
  animation-delay: -1.8s;
}
body[data-theme='observatoire'] .ambience span:nth-child(7) {
  left: 78%;
  top: 14%;
  animation-delay: -2.7s;
}
body[data-theme='observatoire'] .ambience span:nth-child(8) {
  left: 89%;
  top: 38%;
  animation-delay: -0.3s;
}
body[data-theme='observatoire'] .ambience span:nth-child(9) {
  left: 94%;
  top: 9%;
  animation-delay: -3.6s;
}
body[data-theme='observatoire'] .ambience span:nth-child(10) {
  left: 36%;
  top: 42%;
  animation-delay: -1.5s;
}

@keyframes twinkle {
  50% {
    opacity: 0.25;
    transform: scale(0.6);
  }
}

/* L'oscilloscope : du bruit, puis un signal net quand l'antenne est calée. */
.scope {
  position: relative;
  height: 90px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #1f5c43;
  border-radius: 10px;
  background:
    linear-gradient(rgba(124, 240, 180, 0.08) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(124, 240, 180, 0.08) 1px, transparent 1px) 0 0 / 30px 100%,
    #03100b;
}

.scope i {
  position: absolute;
  inset: 0;
  display: block;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 3px,
    rgba(124, 240, 180, 0.5) 3px 4px,
    transparent 4px 9px
  );
  clip-path: polygon(
    0 48%,
    8% 40%,
    13% 58%,
    21% 44%,
    29% 61%,
    36% 39%,
    44% 55%,
    51% 46%,
    59% 62%,
    66% 38%,
    74% 57%,
    81% 43%,
    89% 59%,
    100% 47%,
    100% 53%,
    89% 65%,
    81% 49%,
    74% 63%,
    66% 44%,
    59% 68%,
    51% 52%,
    44% 61%,
    36% 45%,
    29% 67%,
    21% 50%,
    13% 64%,
    8% 46%,
    0 54%
  );
  animation: noise 0.4s steps(4) infinite;
}

.scope.locked i {
  background: none;
  border-top: 2px solid #7cf0b4;
  top: 50%;
  height: 0;
  clip-path: none;
  box-shadow: 0 0 10px #7cf0b4;
  animation: none;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 22px);
}

@keyframes noise {
  to {
    transform: translateX(-9px) scaleY(1.3);
  }
}

/* La carte du ciel : une grille A-H × 1-8. */
.sky-grid {
  border-collapse: collapse;
  margin: 0 auto 10px;
  background: radial-gradient(circle at 50% 40%, #0f2140, #050a16);
}

.sky-grid th {
  padding: 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.sky-grid td {
  width: 58px;
  height: 46px;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgba(156, 196, 255, 0.12);
}

.sky-grid .star .mark {
  display: block;
  font-size: 15px;
  line-height: 1;
}

.sky-grid .star small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #cfdcf5;
}

.c-heron {
  color: #8cc8ff;
}
.c-lanterne {
  color: #ffd27a;
}
.c-chacal {
  color: #ff9ec2;
}

.sky-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-bottom: 18px;
  font-weight: 700;
}

.catalog td,
.catalog th {
  padding: 6px 12px;
  text-align: left;
}

/* Cases pleines et vides de la transmission. */
.bits {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}

.bits i {
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-radius: 3px;
}

.bits i.on {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(124, 240, 180, 0.5);
}

.printout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: #e9e4d4;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.printout .bits i {
  border-color: #1d2a22;
}

.printout .bits i.on {
  background: #1d2a22;
  box-shadow: none;
}

.reading-card {
  padding: 12px 16px;
  margin-bottom: 18px;
  border-left: 3px solid var(--accent-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 10px 10px 0;
}

.bit-values {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 4px;
}

.bit-values span {
  width: 20px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.reading-example {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Dossier N°27 : commissariat de nuit, papier jauni et rubalise ---------------------- */

body[data-theme='dossier-27'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #0e1013;
  --surface: rgba(26, 29, 34, 0.94);
  --panel: var(--surface);
  --panel-2: #2a2e35;
  --text: #ece8de;
  --muted: #a9a59b;
  --line: #4a4f58;
  --accent: #ffcf33;
  --accent-ink: #1a1400;
  --accent-2: #ff6b5e;
  --ok: #8fd6a3;
  --danger: #ff6b5e;
  --warning: #ffcf33;
  --input-bg: rgba(6, 7, 9, 0.85);
  --border-w: 1px;
  --radius: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background: radial-gradient(ellipse 90% 60% at 50% -10%, #2b2f36 0%, #15171b 55%, var(--bg) 100%)
    fixed var(--bg);
}

body[data-theme='dossier-27'] .topbar {
  background: rgba(14, 16, 19, 0.82);
  backdrop-filter: blur(8px);
}

body[data-theme='dossier-27'] h1,
body[data-theme='dossier-27'] h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme='dossier-27'] button:hover:not(:disabled),
body[data-theme='dossier-27'] .button:hover {
  transform: none;
  box-shadow: 0 0 16px rgba(255, 207, 51, 0.35);
}

body[data-theme='dossier-27'] button.ghost,
body[data-theme='dossier-27'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Une bande de rubalise en haut de page, et la lumière blafarde d'un néon. */
body[data-theme='dossier-27'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='dossier-27'] .ambience::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 50%;
  background: radial-gradient(
    ellipse 50% 40% at 50% 0%,
    rgba(210, 230, 255, 0.07),
    transparent 70%
  );
  animation: neon 7s steps(1) infinite;
}

body[data-theme='dossier-27'] .ambience span {
  display: none;
}

@keyframes neon {
  0%,
  100% {
    opacity: 1;
  }
  91% {
    opacity: 0.35;
  }
  93% {
    opacity: 1;
  }
  95% {
    opacity: 0.5;
  }
}

/* Les pièces du dossier : papier jauni, écriture de machine à écrire. */
.dossier-paper {
  position: relative;
  padding: 16px 20px;
  margin-bottom: 16px;
  color: #2a2418;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.55;
  background: linear-gradient(175deg, #efe6cf, #e2d6b6);
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.dossier-paper p {
  margin: 6px 0;
}

.dossier-paper .stamp {
  position: absolute;
  right: 16px;
  bottom: 12px;
  padding: 4px 10px;
  color: #b3261e;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 3px solid #b3261e;
  border-radius: 4px;
  transform: rotate(-8deg);
  opacity: 0.75;
}

.dossier-note {
  padding: 10px 14px;
  margin-bottom: 16px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 207, 51, 0.06);
}

.dossier-table {
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}

.dossier-table th,
.dossier-table td {
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.dossier-table th {
  color: var(--muted);
  font-weight: 700;
}

.watch-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.watch {
  font-size: 26px;
  filter: grayscale(0.4);
}

.statements {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.statements blockquote {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.statements p {
  margin: 0 0 4px;
}

.statements cite {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

/* --- Projet Helix : laboratoire sous confinement, néons froids et alarme ------------------ */

body[data-theme='projet-helix'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #060b0b;
  --surface: rgba(12, 22, 22, 0.92);
  --panel: var(--surface);
  --panel-2: #12302e;
  --text: #e3f4f1;
  --muted: #94b3ae;
  --line: #24524d;
  --accent: #5ff2c8;
  --accent-ink: #022018;
  --accent-2: #ff5d5d;
  --ok: #5ff2c8;
  --danger: #ff5d5d;
  --warning: #ffcf5a;
  --input-bg: rgba(2, 8, 8, 0.85);
  --border-w: 1px;
  --radius: 8px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background: radial-gradient(ellipse 100% 60% at 50% -10%, #11403a 0%, #0a1a19 55%, var(--bg) 100%)
    fixed var(--bg);
}

body[data-theme='projet-helix'] .topbar {
  background: rgba(6, 11, 11, 0.82);
  backdrop-filter: blur(8px);
}

body[data-theme='projet-helix'] h1,
body[data-theme='projet-helix'] h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme='projet-helix'] button:hover:not(:disabled),
body[data-theme='projet-helix'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(95, 242, 200, 0.35);
}

body[data-theme='projet-helix'] button.ghost,
body[data-theme='projet-helix'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Le gyrophare de l'alarme, qui balaie la pièce en rouge. */
body[data-theme='projet-helix'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='projet-helix'] .ambience::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 30% at 85% 0%, rgba(255, 60, 60, 0.12), transparent 70%);
  animation: alarm 2.4s ease-in-out infinite;
}

body[data-theme='projet-helix'] .ambience span {
  display: none;
}

@keyframes alarm {
  50% {
    opacity: 0.2;
  }
}

.helix-console {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  color: #ffb3b3;
  border: 1px solid #6b2a2a;
  border-radius: 8px;
  background: rgba(60, 10, 10, 0.35);
}

.helix-console.stopped {
  color: var(--ok);
  border-color: #1f6b56;
  background: rgba(10, 60, 45, 0.3);
}

.helix-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5d5d;
  box-shadow: 0 0 10px #ff5d5d;
  animation: alarm 1s steps(2) infinite;
}

.helix-console.stopped .helix-led {
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
  animation: none;
}

.codon-table,
.sensors,
.incubators,
.reagent-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.codon-table span,
.sensors span,
.incubators span,
.reagent-labels span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}

.incubators span {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.fragments {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.fragments li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strand {
  display: inline-flex;
  gap: 6px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.strand span {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(95, 242, 200, 0.08);
}

.pairing {
  padding: 10px 14px;
  margin-bottom: 16px;
  border-left: 3px solid var(--accent);
  background: rgba(95, 242, 200, 0.06);
}

.pairing p {
  margin: 4px 0;
}

.mix-form {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.mix-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mix-row input {
  width: 110px;
  margin: 0 0 0 auto;
}

.flask {
  width: 16px;
  height: 22px;
  border-radius: 3px 3px 8px 8px;
  background: var(--flask);
  box-shadow: 0 0 10px var(--flask);
}

/* --- La Prison Blackstone : nuit bleue, torches orangées ------------------------------------ */

body[data-theme='prison-blackstone'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #070a12;
  --surface: rgba(14, 18, 30, 0.93);
  --panel: var(--surface);
  --panel-2: #1b2236;
  --text: #e9e4da;
  --muted: #9aa0b2;
  --line: #2f3850;
  --accent: #ff9a3c;
  --accent-ink: #1d0d00;
  --accent-2: #7fa8ff;
  --ok: #9fd18b;
  --danger: #ff6b5e;
  --warning: #ffcf5a;
  --input-bg: rgba(4, 6, 12, 0.85);
  --border-w: 1px;
  --radius: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background:
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(90, 130, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(255, 140, 50, 0.1), transparent 70%),
    var(--bg) fixed;
}

body[data-theme='prison-blackstone'] .topbar {
  background: rgba(7, 10, 18, 0.84);
  backdrop-filter: blur(8px);
}

body[data-theme='prison-blackstone'] h1,
body[data-theme='prison-blackstone'] h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme='prison-blackstone'] button:hover:not(:disabled),
body[data-theme='prison-blackstone'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(255, 154, 60, 0.35);
}

body[data-theme='prison-blackstone'] button.ghost,
body[data-theme='prison-blackstone'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* La lueur des torches, qui vacille doucement. */
body[data-theme='prison-blackstone'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='prison-blackstone'] .ambience::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 35% 30% at 0% 70%, rgba(255, 140, 50, 0.12), transparent 70%);
  animation: torch 3.2s ease-in-out infinite;
}

body[data-theme='prison-blackstone'] .ambience span {
  display: none;
}

@keyframes torch {
  30% {
    opacity: 0.7;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
}

.taps {
  display: grid;
  gap: 6px;
  padding-left: 22px;
  margin-bottom: 16px;
}

.taps li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.knocks {
  min-width: 5.6em;
  color: var(--accent);
  letter-spacing: 0.25em;
}

.taps .pause {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tap-grid {
  border-collapse: collapse;
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
}

.tap-grid th,
.tap-grid td {
  width: 2.2em;
  height: 2.2em;
  text-align: center;
  border: 1px solid var(--line);
}

.tap-grid th {
  color: var(--muted);
  border-color: transparent;
}

.scratch {
  margin: 0 0 16px;
  color: var(--muted);
  font-style: italic;
}

.prison-table {
  border-collapse: collapse;
  margin-bottom: 16px;
}

.prison-table th,
.prison-table td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.prison-table th {
  color: var(--muted);
  font-weight: 600;
}

.postit {
  display: inline-block;
  padding: 10px 14px;
  margin-bottom: 8px;
  color: #2a2010;
  background: #f1dfa4;
  transform: rotate(-1deg);
}

.exits {
  padding-left: 20px;
  margin-bottom: 8px;
}

.exits li {
  margin-bottom: 4px;
}

.signature {
  text-align: right;
  font-style: italic;
}

/* --- L'Île des Ombres : coucher de soleil, sable noir, lueur des torches -------------------- */

body[data-theme='ile-des-ombres'] {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #0d0806;
  --surface: rgba(28, 18, 12, 0.93);
  --panel: var(--surface);
  --panel-2: #3a2416;
  --text: #f3e6cf;
  --muted: #bda68a;
  --line: #5a3a24;
  --accent: #ffa63d;
  --accent-ink: #2a1300;
  --accent-2: #4fc3c7;
  --ok: #9fd18b;
  --danger: #ff6b5e;
  --warning: #ffd25a;
  --input-bg: rgba(10, 6, 4, 0.85);
  --border-w: 1px;
  --radius: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color-scheme: dark;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 120, 40, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(40, 140, 150, 0.1), transparent 70%),
    var(--bg) fixed;
}

body[data-theme='ile-des-ombres'] .topbar {
  background: rgba(13, 8, 6, 0.84);
  backdrop-filter: blur(8px);
}

body[data-theme='ile-des-ombres'] h1,
body[data-theme='ile-des-ombres'] h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme='ile-des-ombres'] button:hover:not(:disabled),
body[data-theme='ile-des-ombres'] .button:hover {
  transform: none;
  box-shadow: 0 0 18px rgba(255, 166, 61, 0.35);
}

body[data-theme='ile-des-ombres'] button.ghost,
body[data-theme='ile-des-ombres'] .button.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* La houle : une lueur qui monte et descend doucement au bas de l'écran. */
body[data-theme='ile-des-ombres'] .ambience {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-theme='ile-des-ombres'] .ambience::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    rgba(40, 140, 150, 0.14),
    transparent 70%
  );
  animation: swell 7s ease-in-out infinite;
}

body[data-theme='ile-des-ombres'] .ambience span {
  display: none;
}

@keyframes swell {
  50% {
    transform: translateY(6%);
    opacity: 0.7;
  }
}

.flag {
  display: inline-block;
  width: 34px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  background: linear-gradient(var(--top) 50%, var(--bottom) 50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.flag-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.flag-chart > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}

/* La longue-vue : un cercle sombre, les pavillons empilés au centre. */
.spyglass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 180px;
  height: 180px;
  margin: 0 0 16px;
  border: 6px solid #3a2416;
  border-radius: 50%;
  background: radial-gradient(circle, #6fa6b8 0%, #2c4a57 70%, #0d1a20 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
}

.song p,
.carvings p {
  margin: 0 0 6px;
  font-style: italic;
}

.carvings {
  padding: 10px 14px;
  margin-bottom: 16px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 166, 61, 0.06);
}

.island-map {
  border-collapse: collapse;
  margin-bottom: 16px;
}

.island-map th,
.island-map td {
  width: 64px;
  height: 52px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--line);
}

.island-map th {
  width: auto;
  height: auto;
  padding: 4px;
  color: var(--muted);
  border-color: transparent;
}

.island-map td {
  background: rgba(60, 100, 50, 0.12);
}

.island-map td span {
  display: block;
  font-size: 20px;
}

.island-map td small {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  color: var(--muted);
}

.island-map td.dug {
  color: var(--accent);
  font-weight: 800;
}

.crew-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin-bottom: 8px;
}

.crew-form select {
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
}

.crew-form button {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 560px) {
  .crew-form {
    grid-template-columns: 1fr;
  }
}

/* --- Avis des joueurs : sur l'accueil et sur chaque fiche de room ---------------------------- */

.reviews {
  margin-bottom: 96px;
}

.room-sheet .reviews {
  margin: 8px 0 0;
}

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 18px;
}

.reviews-head .section-title {
  margin: 0;
}

.reviews-score {
  margin: 0;
  font-size: 18px;
}

.stars {
  color: var(--sun, #ffc94a);
  letter-spacing: 0.08em;
}

.stars .off {
  color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border: var(--border-w) solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.review-card blockquote {
  margin: 0;
  flex: 1;
}

.review-card blockquote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.review-card figcaption {
  color: var(--muted);
  font-size: 13px;
}

.review-card figcaption strong {
  color: var(--text);
}

.reviews-note {
  max-width: 70ch;
  margin: 14px 0 0;
}

/* Fin de partie : l'avis public d'abord, les remarques privées repliées dessous. */
.public-review {
  padding: 14px 16px;
  margin: 8px 0 12px;
  border: var(--border-w) solid var(--line);
  border-radius: 12px;
}

.public-review textarea {
  margin-bottom: 8px;
}

.feedback label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.feedback label.check input {
  width: auto;
  margin: 0;
}

.private-review {
  margin-bottom: 14px;
}

.private-review summary {
  cursor: pointer;
  color: var(--muted);
  margin-bottom: 8px;
}

/* --- Pion des joueurs : atelier, catalogue, vignettes ------------------------------------------ */

/* Vignette d'un pion : une pastille de sa couleur en attendant le rendu 3D. */
.pawn-img,
.pawn-mini,
.pawn-fallback {
  display: block;
  object-fit: contain;
}

.pawn-img:not([src]),
.pawn-mini:not([src]),
.pawn-fallback:not([src]) {
  background: radial-gradient(circle at 50% 45%, var(--pawn-color) 0 22%, transparent 23%);
}

.crew li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crew .pawn-mini {
  width: 36px;
  height: 36px;
  flex: none;
}

.atelier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 8px 0;
}

/* Profil : le pseudo en grand, en titre de page, et les progrès du joueur. */
.profile-head {
  padding: 24px 0 18px;
}

.profile-name {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 6px 0 12px;
  font-size: 22px;
  color: var(--muted);
}

.profile-name input {
  margin: 0;
  padding: 4px 0;
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--line) 30%, transparent);
  border-radius: 0;
}

.profile-name input:focus {
  border-bottom-color: var(--accent);
  outline: none;
}

.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
  color: var(--muted);
}

.profile-stats strong {
  color: var(--accent);
  font-size: 20px;
}

.profile-account a {
  color: var(--accent);
}

.stage-hint {
  margin: 4px 0 0;
  text-align: center;
}

/* Onglets du panneau : couleurs et objets changent sur place, Collections ouvre sa page. */
.panel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.panel-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}

.panel-tab.active {
  color: var(--accent-ink);
  background: var(--accent);
}

.panel-tab:hover:not(:disabled):not(.active) {
  transform: none;
  box-shadow: none;
  color: var(--text);
}

.panel-help {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}

.swatch .worn {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
}

.saved-note {
  margin: 0 0 0 auto;
  color: var(--ok, #9fd18b);
  font-weight: 700;
}

.room-filters .room-mark {
  margin-right: 6px;
  color: var(--accent);
}

.room-filters .room-mark.played {
  color: var(--muted);
}

.room-filters button.active .room-mark {
  color: var(--accent-ink);
}

/* « Bravo ! » : la carte de l'objet gagné, au-dessus de tout. */
.celebrate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 166, 61, 0.22), rgba(8, 6, 4, 0.82) 60%);
  backdrop-filter: blur(3px);
}

.celebrate[hidden] {
  display: none;
}

.celebrate-card {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 22px 20px;
  text-align: center;
  color: #f6f0e4;
  background: #1c1612;
  border: 1px solid rgba(255, 201, 74, 0.45);
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(255, 166, 61, 0.35);
  animation: celebrate-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.celebrate-card h2 {
  margin: 2px 0 0;
  font-size: 40px;
  color: #ffc94a;
}

.celebrate-card h3 {
  margin: 6px 0 2px;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.celebrate-card p {
  margin: 0 0 14px;
}

.celebrate-stage {
  display: grid;
  place-items: center;
  min-height: 240px;
}

.celebrate-stage .pawn-img {
  width: 220px;
  height: 220px;
}

.trophy-stage {
  width: 100%;
}

.trophy-stage canvas {
  display: block;
}

.celebrate-actions {
  justify-content: center;
}

.celebrate-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #f6f0e4;
  background: transparent;
  border: 0;
  box-shadow: none;
}

@keyframes celebrate-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .celebrate-card {
    animation: none;
  }
}

.atelier-stage {
  position: sticky;
  top: 72px;
  background: radial-gradient(
    ellipse 55% 45% at 50% 60%,
    rgba(255, 166, 61, 0.18),
    transparent 70%
  );
}

.atelier-stage [data-pawn-stage] {
  min-height: 420px;
  display: grid;
  place-items: center;
}

.pawn-stage {
  position: relative;
  width: 100%;
}

.pawn-stage canvas {
  display: block;
  cursor: grab;
  touch-action: pan-y;
}

.pawn-stage canvas:active {
  cursor: grabbing;
}

.pawn-turn {
  position: absolute;
  bottom: 22%;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 22px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 30%, transparent);
  border-radius: 50%;
  box-shadow: none;
}

.pawn-turn-left {
  left: 4%;
}

.pawn-turn-right {
  right: 4%;
}

.atelier-panel {
  padding: 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 16px;
}

.atelier-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.atelier-panel-head h2 {
  font-size: 22px;
  margin: 0;
}

.swatch-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.swatch-group:not(:first-child) {
  margin-top: 22px;
  padding-top: 16px;
  border-top: var(--border-w) solid color-mix(in srgb, var(--line) 18%, transparent);
}

.swatch-group span,
.swatch-subgroup span {
  color: var(--muted);
  font-weight: 500;
}

.swatch-subgroup {
  display: flex;
  gap: 6px;
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
}

/* Les objets défilent dans le panneau : la page reste courte et le pion reste en vue. */
.atelier-scroll {
  max-height: min(600px, calc(100vh - 260px));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -10px;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--line) 40%, transparent) transparent;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.25);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 18%, transparent);
  border-radius: 12px;
  box-shadow: none;
}

.swatch .pawn-img {
  width: 72px;
  height: 72px;
}

/* Trois lignes au plus pour le nom : les vignettes gardent la même hauteur. */
.swatch > span:last-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 2.4em;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

.swatch small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.swatch.chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--accent);
}

.swatch.locked .pawn-img {
  opacity: 0.4;
  filter: grayscale(0.6);
}

.swatch:hover:not(:disabled) {
  transform: none;
  box-shadow: 0 0 0 1px var(--accent);
}

.lock-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  flex: none;
}

.swatch .lock-icon,
.catalog-card > .lock-icon,
.catalog-check {
  position: absolute;
  top: 8px;
  right: 8px;
}

.atelier-locked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  background: rgba(255, 90, 54, 0.1);
  border-radius: 10px;
}

.atelier-summary {
  margin: 24px 0 56px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 16px;
}

.atelier-summary h2 {
  margin: 0 0 14px;
  font-size: 20px;
  color: var(--accent);
}

.atelier-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.summary-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-cell small {
  display: block;
  color: var(--muted);
}

.summary-cell .pawn-img {
  width: 56px;
  height: 56px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.summary-cell .none {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 26px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

@media (max-width: 900px) {
  .atelier {
    grid-template-columns: 1fr;
  }

  .panel-tab {
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .atelier-stage [data-pawn-stage] {
    min-height: 0;
  }

  /* Le pion reste en haut de l'écran pendant qu'on fait défiler les objets dessous. */
  .atelier-stage {
    position: sticky;
    top: var(--topbar-h, 68px);
    z-index: 2;
    background: var(--bg);
    margin: 0 -16px;
    padding: 0 16px;
  }

  .stage-hint {
    display: none;
  }

  .atelier-stage .atelier-locked {
    margin: 0 0 10px;
  }

  .swatches {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
  }

  .swatch .pawn-img {
    width: 60px;
    height: 60px;
  }

  .atelier-scroll {
    max-height: none;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }

  .saved-note {
    margin-left: 0;
  }
}

/* Catalogue : une bannière par collection, puis ses objets. */
.catalogue-hero {
  padding: 32px 0 8px;
}

.catalogue-hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  margin: 6px 0 10px;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
}

.catalog-filters button {
  color: var(--text);
  background: transparent;
  border: var(--border-w) solid color-mix(in srgb, var(--line) 35%, transparent);
  box-shadow: none;
}

.catalog-filters button.active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.collection {
  margin-bottom: 40px;
}

.collection-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 28px 32px;
  margin-bottom: 18px;
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(10, 8, 6, 0.92) 30%, rgba(10, 8, 6, 0.35)),
    var(--banner, none) center / cover,
    var(--surface);
}

.collection-banner h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin: 4px 0 8px;
}

.collection-banner p {
  margin: 0;
  color: var(--muted);
}

.collection-progress {
  display: grid;
  gap: 6px;
  min-width: 140px;
  text-align: right;
}

.collection-progress .bar {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.collection-progress .bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 16px;
  text-align: center;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 20%, transparent);
  border-radius: 14px;
}

.catalog-card .pawn-img {
  width: 140px;
  height: 140px;
}

.catalog-card.locked .pawn-img {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.catalog-card h3 {
  margin: 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.catalog-card p {
  margin: 0;
}

.catalog-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--accent-ink);
  font-weight: 800;
  background: var(--accent);
  border-radius: 50%;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--border-w) solid color-mix(in srgb, var(--line) 35%, transparent);
  border-radius: 999px;
}

.chip.ok {
  color: var(--accent);
  border-color: var(--accent);
}

.chip.locked {
  color: var(--muted);
}

.catalog-more {
  text-align: center;
}

.catalog-cta {
  justify-content: center;
  margin-bottom: 64px;
}

/* Victoire : l'équipe en pions, et ce que la partie a débloqué. */
.victory-team,
.unlocks ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.victory-team li,
.unlocks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.victory-team .pawn-mini,
.unlocks .pawn-mini {
  width: 80px;
  height: 80px;
}

.unlocks {
  text-align: center;
}

.unlocks ul {
  margin-bottom: 16px;
}

/* Profil sans compte : on s'inscrit (ou se connecte) avant de personnaliser son pion. */
.profile-signup {
  margin-top: 32px;
  margin-bottom: 48px;
}

.profile-perks {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 16px 0 24px;
  list-style: none;
}

.profile-perks li {
  position: relative;
  padding-left: 26px;
}

.profile-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

/* Sauvegarde explicite du pion. */
.save-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 16px;
  margin-top: 16px;
}

.save-zone .saved-note,
.save-zone .unsaved-note {
  margin: 0;
}

.unsaved-note {
  color: var(--accent);
  font-weight: 700;
}

.save-zone button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Collections, sous le pion du profil. */
.profile-collections {
  scroll-margin-top: 80px;
  padding-top: 48px;
}

.profile-collections-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 16px;
}

.profile-collections-head .section-title {
  margin: 0;
}

/* Salon : le joueur choisit son pion avant de commencer. */
.lobby-pawn {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 12px;
}

.lobby-pawn h3 {
  margin: 0 0 8px;
}

.lobby-pawn-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lobby-pawn-me {
  width: 96px;
  height: 96px;
  flex: none;
}

.lobby-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.lobby-pawn .lobby-swatch {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: none;
}

.lobby-pawn .lobby-swatch:hover:not(:disabled) {
  transform: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: none;
}

.lobby-pawn .lobby-swatch.chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.lobby-swatch .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.lobby-swatch .pawn-mini {
  width: 36px;
  height: 36px;
}

.lobby-pawn p {
  margin: 6px 0 0;
}

.lobby-pawn a {
  color: var(--accent);
}

@media (max-width: 520px) {
  .lobby-pawn-row {
    align-items: flex-start;
  }

  .lobby-pawn-me {
    width: 72px;
    height: 72px;
  }

  .save-zone {
    justify-content: flex-start;
  }
}

/* Collections : trois étapes, des tuiles à choisir, le prochain défi, puis les objets. */
.unlock-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 8px 0 28px;
  list-style: none;
}

.unlock-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: var(--border-w) solid color-mix(in srgb, var(--line) 20%, transparent);
  border-radius: 14px;
}

.unlock-steps .step-num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
}

.unlock-steps strong {
  font-size: 16px;
}

.unlock-steps li > span:last-child {
  color: var(--muted);
  font-size: 14px;
}

.collection-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.collection-tiles .collection-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 150px;
  padding: 18px 20px;
  overflow: hidden;
  font-family: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.1), rgba(10, 8, 6, 0.88)),
    var(--tile, none) center / cover,
    var(--surface);
  border: 2px solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: 16px;
  box-shadow: none;
  transition:
    transform 0.2s,
    border-color 0.2s;
}

.collection-tiles .tile-clandest {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 90, 54, 0.55), transparent 60%),
    linear-gradient(180deg, #2a1d17, #120d0a);
}

.collection-tiles .tile-rares {
  background:
    radial-gradient(circle at 20% 25%, rgba(125, 20, 20, 0.85), transparent 45%),
    radial-gradient(circle at 55% 30%, rgba(217, 165, 33, 0.7), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(207, 232, 255, 0.6), transparent 45%),
    linear-gradient(180deg, #1d1712, #0e0a08);
}

.collection-tiles .collection-tile:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: none;
}

.collection-tiles .collection-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.tile-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.tile-count {
  font-weight: 700;
  color: var(--accent);
}

.collection-tile .bar {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.collection-tile .bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.soon-rooms {
  margin-bottom: 32px;
}

.soon-rooms p {
  margin: 0 0 8px;
}

.soon-rooms ul {
  display: flex;
  gap: 8px;
  padding: 0 0 4px;
  margin: 0;
  overflow-x: auto;
  list-style: none;
}

.soon-rooms li {
  flex: none;
  display: flex;
  align-items: flex-end;
  width: 128px;
  height: 64px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.85);
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.3), rgba(10, 8, 6, 0.9)),
    var(--tile, none) center / cover;
  border-radius: 10px;
  filter: grayscale(0.7);
  opacity: 0.75;
}

.collection-open-head h3 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
}

.collection-open-head p {
  margin: 4px 0 16px;
}

.next-goal {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  margin-bottom: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--surface);
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 16px;
}

.next-goal .pawn-img {
  flex: none;
  width: 120px;
  height: 120px;
}

.next-goal h3 {
  margin: 2px 0 4px;
  font-size: 26px;
}

.next-goal p {
  margin: 0;
}

.next-goal.complete {
  border-style: solid;
}

@media (max-width: 720px) {
  .unlock-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .unlock-steps li {
    padding: 10px 14px;
  }

  .collection-tiles {
    grid-template-columns: 1fr;
  }

  .collection-tiles .collection-tile {
    min-height: 110px;
  }

  .next-goal {
    gap: 12px;
    padding: 12px 14px;
  }

  .next-goal .pawn-img {
    width: 84px;
    height: 84px;
  }

  .next-goal h3 {
    font-size: 20px;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .catalog-card {
    padding: 10px 8px 12px;
  }

  .catalog-card .pawn-img {
    width: 100px;
    height: 100px;
  }
}

/* Rooms avec une pièce en 3D : un petit ruban sur l'affiche, une puce sur la fiche. */
.card-art {
  position: relative;
}

.badge-3d {
  display: inline-grid;
  place-items: center;
  padding: 2px 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 6px;
}

.card-art .badge-3d {
  position: absolute;
  top: 10px;
  right: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.chips .chip-3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--accent);
}

.sheet-3d {
  margin: -8px 0 20px;
}

/* Reçu d'un achat, imprimable. */
.receipt {
  max-width: 760px;
  margin: 16px auto 48px;
}

.receipt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
}

.receipt-head h1 {
  margin: 4px 0;
  font-size: clamp(28px, 4vw, 40px);
}

.receipt-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 32px;
  margin: 24px 0;
}

.receipt-parties h2 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.receipt-parties p {
  margin: 0;
}

.receipt-lines {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
}

.receipt-lines th,
.receipt-lines td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 25%, transparent);
}

.receipt-lines td:last-child,
.receipt-lines th:last-child,
.receipt-lines tfoot td {
  text-align: right;
  white-space: nowrap;
}

.receipt-lines tfoot th,
.receipt-lines tfoot td {
  font-size: 18px;
  font-weight: 800;
  border-bottom: 0;
}

/* À l'impression : le reçu seul, en noir sur blanc. */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  body > header,
  .topbar,
  #status,
  .site-footer,
  footer,
  .no-print,
  .to-top {
    display: none !important;
  }

  .receipt {
    max-width: none;
    margin: 0;
    color: #000;
    background: #fff;
    border: 0;
    box-shadow: none;
  }

  .receipt .muted,
  .receipt-parties h2 {
    color: #444;
  }

  .receipt .mode-banner {
    color: #000;
    background: #fff;
    border-color: #000;
  }
}

/* --- Fiches des rooms : une animation propre à chaque univers ------------------------------------
 * Seulement sur la fiche (body[data-page='sheet']) : en partie, le décor reste sobre. Les dix
 * particules de .ambience reçoivent une place, une taille et un rythme communs, que chaque
 * univers anime à sa façon. */
.ambience span:nth-child(1) {
  --x: 6%;
  --delay: 0s;
  --dur: 9s;
  --size: 12px;
  --drift: 18px;
}
.ambience span:nth-child(2) {
  --x: 17%;
  --delay: -3.4s;
  --dur: 11s;
  --size: 8px;
  --drift: -14px;
}
.ambience span:nth-child(3) {
  --x: 28%;
  --delay: -6.1s;
  --dur: 8s;
  --size: 16px;
  --drift: 10px;
}
.ambience span:nth-child(4) {
  --x: 39%;
  --delay: -1.7s;
  --dur: 12s;
  --size: 10px;
  --drift: -20px;
}
.ambience span:nth-child(5) {
  --x: 51%;
  --delay: -8.2s;
  --dur: 10s;
  --size: 7px;
  --drift: 16px;
}
.ambience span:nth-child(6) {
  --x: 62%;
  --delay: -4.6s;
  --dur: 9.5s;
  --size: 13px;
  --drift: -12px;
}
.ambience span:nth-child(7) {
  --x: 73%;
  --delay: -2.3s;
  --dur: 11.5s;
  --size: 9px;
  --drift: 22px;
}
.ambience span:nth-child(8) {
  --x: 82%;
  --delay: -7.4s;
  --dur: 8.5s;
  --size: 15px;
  --drift: -16px;
}
.ambience span:nth-child(9) {
  --x: 90%;
  --delay: -5.2s;
  --dur: 12.5s;
  --size: 8px;
  --drift: 12px;
}
.ambience span:nth-child(10) {
  --x: 96%;
  --delay: -9.6s;
  --dur: 10.5s;
  --size: 11px;
  --drift: -10px;
}

/* L'Observatoire : une étoile filante traverse le ciel, de temps en temps. */
body[data-page='sheet'][data-theme='observatoire'] .ambience::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 78%;
  width: 160px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(200, 220, 255, 0.6) 20%, transparent);
  box-shadow: 0 0 8px rgba(220, 235, 255, 0.9);
  opacity: 0;
  transform-origin: left center;
  animation: shooting-star 9s ease-out infinite 1.5s;
}

@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: rotate(-28deg) translateX(0);
  }
  2% {
    opacity: 1;
  }
  10% {
    opacity: 0;
    transform: rotate(-28deg) translateX(-60vw);
  }
  100% {
    opacity: 0;
    transform: rotate(-28deg) translateX(-60vw);
  }
}

/* Projet Helix : des bulles vertes montent du bas de la page, puis éclatent. */
body[data-page='sheet'][data-theme='projet-helix'] .ambience span {
  display: block;
  position: absolute;
  bottom: -30px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(220, 255, 220, 0.9),
    rgba(90, 255, 130, 0.35) 45%,
    rgba(40, 200, 80, 0.08) 75%
  );
  box-shadow: 0 0 12px rgba(80, 255, 120, 0.45);
  opacity: 0;
  animation: helix-bubble var(--dur) ease-in var(--delay) infinite;
}

@keyframes helix-bubble {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  8% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.8;
    transform: translate(var(--drift), -62vh) scale(1);
  }
  86% {
    opacity: 0;
    transform: translate(var(--drift), -64vh) scale(1.9);
  }
  100% {
    opacity: 0;
    transform: translate(var(--drift), -64vh) scale(1.9);
  }
}

/* Repère du décor : l'image de fond (1672×941) couvre la page, calée en haut à droite.
   --iw et --ih donnent sa taille affichée, pour poser un effet sur un point précis du décor :
   left = 100vw − iw × (1 − x), top = ih × y, avec x et y en fraction de l'image. */
body[data-page='sheet'] .ambience {
  --iw: max(100vw, 177.7vh);
  --ih: max(100vh, 56.28vw);
}

body[data-page='sheet'][data-theme='prison-blackstone'] .ambience span,
body[data-page='sheet'][data-theme='dossier-27'] .ambience span {
  position: absolute;
  left: calc(100vw - var(--iw) * (1 - var(--px)));
  top: calc(var(--ih) * var(--py));
  width: calc(var(--iw) * var(--pw));
  height: calc(var(--ih) * var(--ph));
}

/* La Prison Blackstone : un dégradé sombre à gauche pour lire le titre,
   et les projecteurs du mur qui sautent, chacun à son rythme (le ciel reste tranquille). */
body[data-page='sheet'][data-theme='prison-blackstone'] .ambience {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7, 10, 18, 0.85) 28%, transparent 58%),
    linear-gradient(180deg, transparent 45%, var(--bg) 100%),
    var(--room-bg) right top / cover no-repeat var(--bg);
}

body[data-page='sheet'][data-theme='prison-blackstone'] .ambience::before {
  display: none;
}

body[data-page='sheet'][data-theme='prison-blackstone'] .ambience span:nth-child(-n + 3) {
  display: block;
  background: #0b0c18;
  transform: scaleX(1.12);
  clip-path: polygon(var(--bulb-l) 0, var(--bulb-r) 0, 100% 100%, 0 100%);
  mask-image: linear-gradient(180deg, #000 75%, transparent);
  opacity: 0;
  animation: lamp-fault var(--fault) linear var(--fault-delay) infinite;
}

/* Le projecteur au-dessus de la grande porte. */
body[data-page='sheet'][data-theme='prison-blackstone'] .ambience span:nth-child(1) {
  --px: 0.628;
  --py: 0.35;
  --pw: 0.191;
  --ph: 0.46;
  --bulb-l: 47%;
  --bulb-r: 56%;
  --fault: 7s;
  --fault-delay: 1.5s;
}

/* Le projecteur de gauche. */
body[data-page='sheet'][data-theme='prison-blackstone'] .ambience span:nth-child(2) {
  --px: 0.377;
  --py: 0.611;
  --pw: 0.161;
  --ph: 0.23;
  --bulb-l: 47%;
  --bulb-r: 57%;
  --fault: 9s;
  --fault-delay: 4s;
}

/* Le projecteur de droite. */
body[data-page='sheet'][data-theme='prison-blackstone'] .ambience span:nth-child(3) {
  --px: 0.873;
  --py: 0.632;
  --pw: 0.127;
  --ph: 0.16;
  --bulb-l: 44%;
  --bulb-r: 55%;
  --fault: 11s;
  --fault-delay: 6.5s;
}

/* Allumé la plupart du temps, puis quelques coupures sèches. */
@keyframes lamp-fault {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  81% {
    opacity: 1;
  }
  82.5% {
    opacity: 0;
  }
  84% {
    opacity: 1;
  }
  85% {
    opacity: 0.3;
  }
  86% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
}

/* L'Île des Ombres : les braises s'envolent de la grande torche (en haut à droite)
   et des petites torches du ponton, au fond. */
body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span {
  display: block;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d0, #ffa83a 50%, rgba(255, 80, 20, 0));
  opacity: 0;
}

body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(-n + 5) {
  left: calc(100vw - var(--iw) * 0.068 + (var(--x) - 50%) * 0.03);
  top: calc(var(--ih) * 0.1);
  width: calc(var(--size) * 0.85);
  height: calc(var(--size) * 0.85);
  box-shadow:
    0 0 10px rgba(255, 150, 40, 0.9),
    0 0 22px rgba(255, 90, 20, 0.5);
  animation: torch-ember calc(var(--dur) * 0.5) ease-out var(--delay) infinite;
}

/* Les petites torches du ponton : une flamme qui vacille, et une étincelle de temps en temps. */
body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(n + 6) {
  left: calc(100vw - var(--iw) * (1 - var(--px)) - 2px);
  top: calc(var(--ih) * var(--py));
  width: 4px;
  height: 4px;
  box-shadow:
    0 0 6px rgba(255, 150, 40, 0.9),
    0 0 14px rgba(255, 90, 20, 0.6);
  animation: small-ember calc(var(--dur) * 0.35) ease-out var(--delay) infinite;
}

body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(6),
body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(7) {
  --px: 0.909;
  --py: 0.488;
}

body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(8),
body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(9) {
  --px: 0.91;
  --py: 0.547;
}

body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span:nth-child(10) {
  --px: 0.867;
  --py: 0.566;
}

@keyframes torch-ember {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  8% {
    opacity: 1;
  }
  40% {
    transform: translate(calc(var(--drift) * -1.5), -5vh) scale(0.85);
  }
  70% {
    opacity: 0.6;
    transform: translate(calc(var(--drift) * -3), -9vh) scale(0.55);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--drift) * -4), -12vh) scale(0.2);
  }
}

@keyframes small-ember {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 0.6;
    transform: translate(calc(var(--drift) * -0.3), -2vh) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--drift) * -0.5), -3.5vh) scale(0.2);
  }
}

/* Dossier N°27 : la suspension et la lampe de bureau grésillent et s'éteignent en flash. */
body[data-page='sheet'][data-theme='dossier-27'] .ambience span:nth-child(-n + 2) {
  display: block;
  background: radial-gradient(
    ellipse 50% 50% at var(--cx) var(--cy),
    #1c2236 0%,
    #1c2236 35%,
    transparent 75%
  );
  mix-blend-mode: multiply;
  opacity: 0;
  animation: lamp-flash var(--fault) linear var(--fault-delay) infinite;
}

/* La suspension du plafond. */
body[data-page='sheet'][data-theme='dossier-27'] .ambience span:nth-child(1) {
  --px: 0.64;
  --py: -0.08;
  --pw: 0.28;
  --ph: 0.42;
  --cx: 50%;
  --cy: 38%;
  --fault: 8s;
  --fault-delay: 2s;
}

/* La lampe de bureau. */
body[data-page='sheet'][data-theme='dossier-27'] .ambience span:nth-child(2) {
  --px: 0.8;
  --py: 0.27;
  --pw: 0.24;
  --ph: 0.46;
  --cx: 68%;
  --cy: 40%;
  --fault: 10s;
  --fault-delay: 5.5s;
}

@keyframes lamp-flash {
  0%,
  86%,
  100% {
    opacity: 0;
  }
  87% {
    opacity: 0.95;
  }
  88% {
    opacity: 0;
  }
  89.5% {
    opacity: 0.95;
  }
  90.5% {
    opacity: 0;
  }
  92% {
    opacity: 0.6;
  }
  92.5% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page='sheet'] .ambience::after,
  body[data-page='sheet'][data-theme='projet-helix'] .ambience span,
  body[data-page='sheet'][data-theme='ile-des-ombres'] .ambience span,
  body[data-page='sheet'][data-theme='prison-blackstone'] .ambience span,
  body[data-page='sheet'][data-theme='dossier-27'] .ambience span {
    display: none;
  }
}

/* --- Pages « recherche » (escape game gratuit, à distance, à 2…) --------------------- */
.guide-actions {
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.guide-points .how-pillars h2 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--text);
}

.guide-points .how-pillars p {
  margin: 0;
  line-height: 1.55;
}

/* Texte écrit par le serveur pour les moteurs de recherche : remplacé par la page dès que le
   script démarre. Lisible tel quel si le script ne se charge pas. */
.prerender {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 16px;
  line-height: 1.6;
}

.prerender h1 {
  margin-bottom: 16px;
}

.prerender h2 {
  margin-top: 28px;
}