/* ==========================================================================
   CHECKPOINT Arcade : feuille de style unique, partagée par les 8 pages.
   Toute modification ici se répercute sur l'ensemble du site.
   ========================================================================== */

:root {
  --room: #0E0B16;          /* noir-violet de la salle */
  --carpet: #2A1E3F;        /* violet moquette */
  --carpet-deep: #1A1228;
  --amber: #FFB000;         /* phosphore ambre CRT */
  --amber-dim: #8a6410;
  --magenta: #FF2E88;
  --cyan: #23D5D5;
  --ink: #EDE6F2;           /* texte principal */
  --ink-dim: #9C8FB0;       /* texte secondaire */
  --display: 'Bungee', sans-serif;
  --body: 'Archivo', sans-serif;
  --crt: 'VT323', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--room);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--room); }

a { color: var(--amber); }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amber);
  color: var(--room);
  padding: 0.7rem 1.2rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Bandeau pré-ouverture (toutes les pages) ---------- */
.preopen {
  background: var(--carpet-deep);
  border-bottom: 1px solid var(--magenta);
  text-align: center;
  padding: 0.5rem 1rem;
  font-family: var(--crt);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--magenta);
}
.preopen a { color: var(--magenta); }

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--room) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--carpet);
}

.logo {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--amber);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.logo span { color: var(--ink); }

.main-nav { margin-left: auto; display: flex; gap: 1.2rem; align-items: center; }
.main-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--amber); }
.main-nav a[aria-current="page"] {
  color: var(--amber);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
}

.coin-slot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--crt);
  font-size: 1.25rem;
  color: var(--amber);
}
.coin-slot button {
  font-family: var(--display);
  font-size: 0.72rem;
  background: none;
  border: 2px solid var(--amber);
  color: var(--amber);
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.coin-slot button:hover { background: var(--amber); color: var(--room); }
.coin-slot button:active { transform: translateY(2px); }
.credits { min-width: 5.5ch; white-space: nowrap; }
.credits.max {
  color: var(--magenta);
  text-shadow: 0 0 12px rgba(255,46,136,0.7);
}
.credits.bump { animation: bump 0.3s; }
@keyframes bump { 40% { transform: scale(1.35); color: #fff; } }

/* 99 crédits : la machine sature */
body.jackpot { animation: jackpot 1.3s steps(1) both; }
@keyframes jackpot {
  0%   { filter: none; transform: none; }
  12%  { filter: invert(1) hue-rotate(90deg); }
  22%  { filter: none; }
  38%  { filter: saturate(4) hue-rotate(-45deg); transform: translateX(5px); }
  50%  { filter: none; transform: translateX(-5px); }
  64%  { filter: invert(1); transform: none; }
  76%  { filter: contrast(3) brightness(1.6); }
  100% { filter: none; transform: none; }
}

/* ---------- Titres ---------- */
h1 {
  font-family: var(--display);
  line-height: 1.02;
  color: var(--amber);
  text-shadow:
    0 0 18px rgba(255,176,0,0.45),
    0 0 60px rgba(255,176,0,0.25);
}
h1 .alt { color: var(--ink); text-shadow: none; }

h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--ink);
  margin-top: 0.4rem;
  line-height: 1.1;
}

h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
}

/* ---------- Hero (accueil uniquement) ---------- */
.hero {
  position: relative;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem 5rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255,176,0,0.13), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% -10%, rgba(255,46,136,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% -10%, rgba(35,213,213,0.10), transparent 60%),
    var(--room);
}

/* scanlines discrètes sur le héros uniquement */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(0,0,0,0.18) 3px 4px
  );
  mix-blend-mode: multiply;
}

.hero > * { position: relative; z-index: 1; }

.hero .eyebrow {
  font-family: var(--crt);
  font-size: 1.4rem;
  color: var(--amber);
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
}
.hero .eyebrow .blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero h1 {
  font-size: clamp(2.3rem, 7.5vw, 5.4rem);
  text-transform: uppercase;
  animation: tube-on 2.2s ease-out both;
}

@keyframes tube-on {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  12%  { opacity: 0.2; }
  20%  { opacity: 1; }
  26%  { opacity: 0.4; }
  36%  { opacity: 1; }
  100% { opacity: 1; }
}

.hero p.tagline {
  max-width: 38rem;
  margin: 1.6rem auto 2.4rem;
  color: var(--ink-dim);
  font-size: 1.12rem;
}
.hero p.tagline strong { color: var(--ink); font-weight: 600; }

.press-start {
  font-family: var(--display);
  font-size: 1rem;
  background: var(--amber);
  color: var(--room);
  border: none;
  padding: 1rem 2.2rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 0 var(--amber-dim), 0 0 35px rgba(255,176,0,0.35);
  transition: transform 0.08s, box-shadow 0.08s;
}
.press-start:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--amber-dim), 0 0 45px rgba(255,176,0,0.5); }
.press-start:active { transform: translateY(6px); box-shadow: 0 0 0 var(--amber-dim); }

/* ---------- En-tête des pages internes ---------- */
.page-head {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 5vw, 4rem) 0;
  max-width: 74rem;
  margin: 0 auto;
}
.page-head .eyebrow {
  font-family: var(--crt);
  font-size: 1.3rem;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-head h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  margin-top: 0.3rem;
}
.page-head .intro {
  max-width: 44rem;
  margin-top: 1.4rem;
  color: var(--ink-dim);
  font-size: 1.1rem;
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  padding: 1rem clamp(1.2rem, 5vw, 4rem) 0;
  max-width: 74rem;
  margin: 0 auto;
  font-family: var(--crt);
  font-size: 1.15rem;
  color: var(--ink-dim);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.breadcrumb li:not(:last-child)::after { content: " ›"; color: var(--carpet); }
.breadcrumb a { color: var(--ink-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb [aria-current="page"] { color: var(--amber); }

/* ---------- Ticker ---------- */
.ticker {
  border-top: 1px solid var(--carpet);
  border-bottom: 1px solid var(--carpet);
  background: var(--carpet-deep);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-block;
  font-family: var(--crt);
  font-size: 1.5rem;
  color: var(--amber);
  padding: 0.55rem 0;
  animation: ticker 38s linear infinite;
}
.ticker-track span { margin: 0 2.2rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 5vw, 4rem); }

.section-head {
  max-width: 74rem;
  margin: 0 auto 2.5rem;
}
.section-head .eyebrow {
  font-family: var(--crt);
  font-size: 1.3rem;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-head .lede {
  max-width: 44rem;
  margin-top: 1rem;
  color: var(--ink-dim);
}
.narrow { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* ---------- Mur de marquees ---------- */
.marquee-wall {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}

.marquee {
  --glow: var(--amber);
  position: relative;
  border: 3px solid var(--carpet);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--carpet-deep), var(--room));
  padding: 2rem 1.6rem 1.7rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.marquee:hover, .marquee:focus-within {
  border-color: var(--glow);
  box-shadow:
    0 0 0 1px var(--glow),
    0 0 40px color-mix(in srgb, var(--glow) 35%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--glow) 12%, transparent);
  transform: translateY(-4px);
}
.marquee h2, .marquee h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--glow);
  margin: 0 0 0.7rem;
  transition: text-shadow 0.25s;
}
.marquee:hover h2, .marquee:hover h3 {
  text-shadow: 0 0 16px color-mix(in srgb, var(--glow) 65%, transparent);
}
.marquee p { color: var(--ink-dim); font-size: 0.98rem; }
.marquee .count {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-family: var(--crt);
  font-size: 1.15rem;
  color: var(--ink-dim);
}

.m-magenta { --glow: var(--magenta); }
.m-cyan    { --glow: var(--cyan); }
.m-amber   { --glow: var(--amber); }

/* ---------- Liste nominative des machines (/nos-jeux) ---------- */
.famille {
  max-width: 74rem;
  margin: 0 auto 2.6rem;
  border-left: 3px solid var(--glow, var(--amber));
  padding-left: clamp(1rem, 3vw, 1.8rem);
}
.famille .count-line {
  font-family: var(--crt);
  font-size: 1.2rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}
.famille > p { color: var(--ink-dim); max-width: 44rem; margin: 0.6rem 0 1.2rem; }

.jeux-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1.6rem;
}
.jeux-liste li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--carpet);
  color: var(--ink);
}
.jeu-annee {
  font-family: var(--crt);
  font-size: 1.05rem;
  color: var(--ink-dim);
  margin-left: auto;
}
.a-remplir {
  font-family: var(--crt);
  font-size: 1.15rem;
  color: var(--magenta);
  border: 2px dashed var(--magenta);
  padding: 0.8rem 1rem;
  margin-top: 0.6rem;
}

/* ---------- Tarifs : écran CRT ---------- */
.crt-wrap { max-width: 46rem; margin: 0 auto; }
.crt-bezel {
  background: #17131f;
  border: 3px solid #3a3145;
  border-radius: 18px;
  padding: clamp(1.2rem, 4vw, 2.4rem);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.crt-screen {
  position: relative;
  background: #120d02;
  border-radius: 10px;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  font-family: var(--crt);
  color: var(--amber);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.55;
  box-shadow: inset 0 0 60px rgba(255,176,0,0.07);
  overflow: hidden;
}
.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.22) 2px 3px);
}
.crt-screen .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dashed rgba(255,176,0,0.25);
  padding: 0.45rem 0;
}
.crt-screen .row:last-of-type { border-bottom: none; }
.crt-screen .row.special {
  color: var(--magenta);
  text-shadow: 0 0 12px rgba(255,46,136,0.45);
  border-bottom: none;
  margin-top: 0.5rem;
}
.crt-screen .title {
  text-align: center;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  color: #ffd671;
}
.crt-screen .note {
  margin-top: 1.2rem;
  color: rgba(255,176,0,0.65);
  font-size: 0.85em;
  text-align: center;
}
.crt-caption {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin-top: 1.1rem;
}

/* ---------- Cartes ---------- */
.split {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 1.4rem;
}
.card {
  border: 3px solid var(--carpet);
  border-radius: 10px;
  padding: 2rem 1.8rem;
  background: var(--carpet-deep);
  display: flex;
  flex-direction: column;
}
.card h2, .card h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 0.8rem;
}
.card p { color: var(--ink-dim); margin-bottom: 1.2rem; }
.card .cta-line {
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
  margin-top: auto;
}
.card .cta-line:hover { text-decoration: underline; }

/* ---------- Bloc « l'essentiel » (anniversaires) ---------- */
.essentiel {
  max-width: 74rem;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--carpet);
  border: 3px solid var(--carpet);
  border-radius: 10px;
  overflow: hidden;
}
.essentiel div {
  background: var(--carpet-deep);
  padding: 1.1rem 1.2rem;
}
.essentiel dt {
  font-family: var(--crt);
  font-size: 1.1rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.essentiel dd {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--amber);
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}

/* ---------- Formulaires ---------- */
.form-wrap {
  max-width: 44rem;
  margin: 0 auto;
  border: 3px solid var(--carpet);
  border-radius: 10px;
  background: var(--carpet-deep);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
}
.form-grid .full { grid-column: 1 / -1; }
.form-wrap label {
  display: block;
  font-family: var(--crt);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.form-wrap input,
.form-wrap textarea,
.form-wrap select {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--room);
  border: 2px solid var(--carpet);
  border-radius: 5px;
  padding: 0.65rem 0.8rem;
}
.form-wrap input:focus,
.form-wrap textarea:focus,
.form-wrap select:focus { border-color: var(--amber); outline: none; }
.form-wrap textarea { min-height: 7rem; resize: vertical; }
.form-wrap .hint { color: var(--ink-dim); font-size: 0.9rem; margin-top: 1rem; }
.form-wrap button[type="submit"] {
  font-family: var(--display);
  font-size: 0.95rem;
  background: var(--amber);
  color: var(--room);
  border: none;
  padding: 0.9rem 2rem;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 1.4rem;
  box-shadow: 0 5px 0 var(--amber-dim);
  transition: transform 0.08s, box-shadow 0.08s;
}
.form-wrap button[type="submit"]:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--amber-dim); }
.form-wrap button[type="submit"]:active { transform: translateY(5px); box-shadow: 0 0 0 var(--amber-dim); }
.hp { position: absolute; left: -9999px; }

/* ---------- Infos pratiques ---------- */
.infos {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
}
.infos h2, .infos h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--amber);
  margin: 0 0 1rem;
}
.hours { width: 100%; border-collapse: collapse; }
.hours td {
  padding: 0.35rem 0;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--carpet);
}
.hours td:last-child { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.infos p { color: var(--ink-dim); }
.infos strong { color: var(--ink); }
.previsionnel {
  font-family: var(--crt);
  font-size: 1.1rem;
  color: var(--magenta);
  margin-top: 0.9rem;
  letter-spacing: 0.05em;
}

/* ---------- Maillage : pages liées ---------- */
.aussi {
  max-width: 74rem;
  margin: 0 auto;
  border-top: 1px solid var(--carpet);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
}
.aussi .label {
  font-family: var(--crt);
  font-size: 1.15rem;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.aussi a { font-weight: 700; text-decoration: none; }
.aussi a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--carpet);
  padding: 3rem clamp(1.2rem, 5vw, 4rem) 3.5rem;
  text-align: center;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.5rem;
  margin-bottom: 2rem;
}
.footer-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.footer-nav a:hover { color: var(--amber); }
footer .gameover {
  font-family: var(--crt);
  font-size: 1.6rem;
  color: var(--amber);
  margin-bottom: 0.6rem;
}
footer .small { color: var(--ink-dim); font-size: 0.9rem; }

/* ---------- Page 404 ---------- */
.erreur {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.erreur h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
.erreur p { color: var(--ink-dim); margin: 1.4rem 0 2rem; max-width: 34rem; }

/* ---------- Responsive ---------- */
/* Sous 1060px la barre passe sur deux rangées : le logo et le compteur en
   haut, la navigation complète en dessous. Elle n'est jamais masquée : c'est
   le seul chemin vers les sept autres pages. */
@media (max-width: 1060px) {
  header { flex-wrap: wrap; gap: 1rem; row-gap: 0.7rem; }
  .main-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; }
  .coin-slot { margin-left: auto; }
}
@media (max-width: 760px) {
  .coin-slot { font-size: 1.05rem; }
  .main-nav a { font-size: 0.8rem; }
  .hero { min-height: 72vh; }
}
@media (max-width: 480px) {
  header { gap: 0.9rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  .logo { font-size: 1rem; }
  .hero h1 { font-size: 2.2rem; }
  .page-head h1 { font-size: 1.75rem; }
  .preopen { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 { animation: none; }
  .ticker-track { animation: none; }
  .hero .eyebrow .blink { animation: none; }
  .marquee, .press-start { transition: none; }
  body.jackpot { animation: none; }
}

/* ---------- Zones tactiles ----------
   Sur écran tactile et sur mobile, les liens de navigation et les appels à
   l'action passent d'une vingtaine de pixels à ~44px de haut : en dessous,
   ils sont difficiles à viser au pouce. Les souris gardent la mise en page
   compacte. Sur la barre de navigation, le soulignement de la page courante
   se retrouve en bas de la zone cliquable et se lit comme un indicateur
   d'onglet, ce qui est le comportement attendu sur mobile. */
@media (pointer: coarse), (max-width: 760px) {
  .logo { padding: 0.35rem 0; }
  .main-nav a { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .breadcrumb ol { gap: 0.4rem 0.6rem; }
  .breadcrumb a { padding: 0.4rem 0; }
  .cta-line { display: inline-block; padding: 0.55rem 0; }
  .aussi { gap: 0.3rem 1.6rem; }
  .aussi a { padding: 0.55rem 0; }
  .footer-nav { gap: 0 1.5rem; }
  .footer-nav a { padding: 0.65rem 0; }
  .infos a { display: inline-block; padding: 0.35rem 0; }
}

/* ---------- « CONTINUE ? » du pied de page ----------
   Le compteur a été retiré : le texte est devenu le lien de retour à
   l'accueil. Soulignement plutôt que bordure, pour qu'il reste collé au
   texte même quand la zone cliquable est agrandie au toucher. */
.gameover a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color 0.15s;
}
.gameover a:hover { color: #fff; }

@media (pointer: coarse), (max-width: 760px) {
  .preopen a { display: inline-block; padding: 0.45rem 0; }
  .gameover a { display: inline-block; padding: 0.35rem 0; }
}

/* ---------- Validation des formulaires ---------- */
.form-wrap [aria-invalid="true"] { border-color: var(--magenta); }
.field-error {
  font-family: var(--crt);
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--magenta);
  margin-top: 0.35rem;
}
.form-bilan {
  font-weight: 700;
  color: var(--magenta);
  margin-top: 1.2rem;
}

/* Case de consentement : texte courant, pas une étiquette de champ */
.form-wrap label.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-family: var(--body);
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
  cursor: pointer;
}
.form-wrap label.check input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--amber);
}

/* ---------- Pied de page : réglage des cookies ---------- */
.footer-nav .cookie-link {
  font-family: var(--body);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 0;
}
.footer-nav .cookie-link:hover { color: var(--amber); }
.footer-nav .cookie-link[hidden] { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .footer-nav .cookie-link { padding: 0.65rem 0; }
}

/* ---------- Tableaux de texte (confidentialité) ---------- */
.tableau-wrap { overflow-x: auto; margin: 0 0 1.3rem; }
.tableau {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tableau th {
  font-family: var(--crt);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: left;
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-bottom: 2px solid var(--carpet);
}
.tableau td {
  color: var(--ink-dim);
  vertical-align: top;
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px solid var(--carpet);
}
.tableau td:first-child { color: var(--ink); font-weight: 600; }
.tableau code { font-family: var(--crt); font-size: 1.1rem; color: var(--ink); }

/* Les commandes de réglage des cookies n'apparaissent qu'avec JavaScript */
[data-consent-open][hidden] { display: none !important; }