:root {
  --bg-dark: #0a0a0c;
  --bg-mid: #12121a;
  --anthracite: #1a1a24;
  --white: #f4f4f6;
  --white-dim: rgba(244, 244, 246, 0.85);
  --neon: #00d4ff;
  --neon-dim: rgba(0, 212, 255, 0.4);
  --neon-glow: rgba(0, 212, 255, 0.15);
  --separator: rgba(255, 255, 255, 0.08);
  --font: 'Inter', -apple-system, sans-serif;
  --lock-red: #c53030;
  --lock-red-dim: rgba(197, 48, 48, 0.5);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-weight: 300;
  color: var(--white);
  background: var(--bg-dark);
}

/* === Fond : dégradé + bokeh + particules === */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 120%, rgba(0, 212, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 0%, var(--bg-mid) 0%, var(--bg-dark) 70%);
}

.bokeh {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bokeh span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 45%, transparent 70%);
  animation: float 12s ease-in-out infinite;
}

.bokeh span:nth-child(1) { width: 32px; height: 32px; left: 3%; top: 8%; animation-delay: 0s; }
.bokeh span:nth-child(2) { width: 28px; height: 28px; left: 78%; top: 12%; animation-delay: -2s; }
.bokeh span:nth-child(3) { width: 36px; height: 36px; left: 42%; top: 48%; animation-delay: -5s; }
.bokeh span:nth-child(4) { width: 24px; height: 24px; left: 90%; top: 72%; animation-delay: -1s; }
.bokeh span:nth-child(5) { width: 32px; height: 32px; left: 8%; top: 78%; animation-delay: -4s; }
.bokeh span:nth-child(6) { width: 30px; height: 30px; left: 58%; top: 82%; animation-delay: -7s; }
.bokeh span:nth-child(7) { width: 26px; height: 26px; left: 50%; top: 6%; animation-delay: -3s; }
.bokeh span:nth-child(8) { width: 28px; height: 28px; left: 88%; top: 42%; animation-delay: -6s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  25% { transform: translate(55px, -45px) scale(1.08); opacity: 1; }
  50% { transform: translate(-45px, 40px) scale(0.94); opacity: 0.92; }
  75% { transform: translate(40px, 35px) scale(1.05); opacity: 1; }
}

/* Particules fines */
.particles {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: 
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.08), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.1), transparent);
  background-size: 200px 200px;
  animation: particleMove 30s linear infinite;
}

@keyframes particleMove {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: -200px -200px, 200px 0, 0 200px, -100px 100px, 100px -100px; }
}

/* Vignette */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.5) 100%);
}

/* === Contenu principal === */
.container {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2rem 3rem 2.5rem;
}

/* Sous-titre discret en haut à gauche */
.subtitle {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(244, 244, 246, 0.5);
  margin-bottom: auto;
  padding-top: 0.5rem;
}

/* Bloc central : titre + menu */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
}

/* Titre principal IA ODYSSEY */
.title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.5em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 0 40px var(--neon-glow);
}

/* Titre : au survol, lettres → symboles (I→!, A→@, O→0, S→5, S→$, E→3 avec vibration) */
.title-char {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.title-char-main {
  display: inline-block;
}

.title-char-alt {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
  transition: opacity 0.1s ease;
}

.title-char:hover .title-char-main {
  opacity: 0;
}

.title-char:hover .title-char-alt {
  opacity: 1;
  animation: tvJitter 0.08s steps(1) infinite;
}

@keyframes tvJitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-2px, 1px); }
  75% { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}

/* Menu (style Detroit) */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.menu-item {
  position: relative;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  transition: color 0.2s ease;
}

.menu-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 212, 255, 0.06);
  opacity: 0;
  transition: opacity 0.2s ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.menu-item::after {
  content: '';
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0.3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 0 8px var(--neon-dim);
}

.menu-item:hover {
  color: var(--white);
}

.menu-item:hover::before,
.menu-item.active::before {
  opacity: 1;
}

.menu-item:hover::after,
.menu-item.active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Effet glitch au survol */
.menu-item .glitch-wrap {
  position: relative;
  display: inline-block;
}

.menu-item .glitch-wrap::before,
.menu-item .glitch-wrap::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.menu-item:hover .glitch-wrap::before {
  opacity: 0.8;
  color: var(--neon);
  animation: glitch1 0.15s ease infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.menu-item:hover .glitch-wrap::after {
  opacity: 0.8;
  color: #ff00aa;
  animation: glitch2 0.2s ease infinite;
  clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
}

@keyframes glitch1 {
  0% { transform: translate(-1px, 0); }
  100% { transform: translate(1px, 0); }
}

@keyframes glitch2 {
  0% { transform: translate(1px, 0); }
  100% { transform: translate(-1px, 0); }
}

/* Décor : angles de visée + coordonnées (visible au hover) */
.menu-item .corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--neon);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.menu-item:hover .corner,
.menu-item.active .corner {
  opacity: 0.6;
}

.menu-item .corner-tl { top: 2px; left: 2px; border-top-width: 1px; border-left-width: 1px; }
.menu-item .corner-tr { top: 2px; right: 2px; border-top-width: 1px; border-right-width: 1px; }
.menu-item .corner-bl { bottom: 2px; left: 2px; border-bottom-width: 1px; border-left-width: 1px; }
.menu-item .corner-br { bottom: 2px; right: 2px; border-bottom-width: 1px; border-right-width: 1px; }

.menu-item .coord {
  position: absolute;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--neon-dim);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.menu-item:hover .coord,
.menu-item.active .coord {
  opacity: 1;
}

.menu-item .coord-tl { top: -0.9rem; left: 0; }
.menu-item .coord-br { bottom: -0.9rem; right: 0; }

/* Séparateur entre boutons */
.separator {
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: var(--separator);
  margin: 0.1rem 0;
}

/* START : plus imposant */
.menu-item.menu-item--start {
  font-size: 1.15rem;
  letter-spacing: 0.35em;
  padding: 0.85rem 1.5rem;
  margin-bottom: 0.5rem;
}

/* START désactivé après clic : plus de réaction à la souris */
.menu-item.menu-item--inactive {
  pointer-events: none;
  cursor: default;
}

.menu-item.menu-item--start::after {
  left: 1.5rem;
  right: 1.5rem;
}

/* Menu secondaire (caché par défaut, apparaît après START) */
.menu-secondary {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.menu-secondary.visible {
  display: flex;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.footer {
  margin-top: auto;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(244, 244, 246, 0.35);
  text-align: right;
  padding-top: 1rem;
}

/* ========== TRANSITION SYSTÈME ========== */

/* Loading Rail : barre ultra-fine en haut */
.loading-rail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 0;
  height: 2px;
  background: var(--neon);
  box-shadow: 0 0 12px var(--neon), 0 0 24px var(--neon-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.loading-rail.active {
  opacity: 1;
  animation: loadingRailRun 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.loading-rail.done {
  opacity: 0;
  transition: opacity 0.35s ease;
}

@keyframes loadingRailRun {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Glitch global (décalage RGB) sur le menu */
.main-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s ease;
}

.main-view.glitch-active {
  animation: glitchScreen 0.3s ease-out;
}

.main-view.glitch-active .menu-item {
  animation: buttonVibrate 0.3s ease-out;
}

@keyframes glitchScreen {
  0% { filter: none; transform: translate(0, 0); }
  10% { filter: none; transform: translate(-2px, 1px); }
  20% {
    filter: drop-shadow(3px 0 0 rgba(255, 0, 80, 0.6)) drop-shadow(-2px 0 0 rgba(0, 212, 255, 0.6));
    transform: translate(2px, -1px);
  }
  30% {
    filter: drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.5)) drop-shadow(2px 0 0 rgba(0, 212, 255, 0.5));
    transform: translate(-1px, 2px);
  }
  40% {
    filter: drop-shadow(2px 0 0 rgba(255, 0, 80, 0.4)) drop-shadow(-3px 0 0 rgba(0, 212, 255, 0.4));
    transform: translate(1px, -2px);
  }
  50%, 100% { filter: none; transform: translate(0, 0); }
}

@keyframes buttonVibrate {
  0%, 100% { transform: scale(1); }
  15%, 85% { transform: scale(1.02); }
  50% { transform: scale(1.02); }
}

/* Message fugace (typographie technique) */
.transition-message {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 18;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--neon-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.transition-message.visible {
  opacity: 1;
  animation: messageFlicker 1.5s ease-in-out;
}

@keyframes messageFlicker {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Grain de film (bruit visuel) */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease;
}

.film-grain.intensified {
  opacity: 0.12;
}

/* ---------- Séquence Nouvelle Partie : Glitch, Scanline, Cercle LED ---------- */
body.np-glitch-active .container {
  animation: npGlitchRGB 0.4s steps(2, end) forwards;
}

@keyframes npGlitchRGB {
  0% { filter: none; transform: translateX(0); }
  25% { filter: drop-shadow(5px 0 0 rgba(255, 0, 0, 0.5)) drop-shadow(-5px 0 0 rgba(0, 255, 255, 0.5)); transform: translateX(-3px); }
  50% { filter: drop-shadow(-4px 0 0 rgba(0, 255, 0, 0.4)) drop-shadow(4px 0 0 rgba(255, 0, 255, 0.4)); transform: translateX(3px); }
  75% { filter: drop-shadow(3px 0 0 rgba(255, 200, 0, 0.3)); transform: translateX(-2px); }
  100% { filter: none; transform: translateX(0); }
}

.np-glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
}

.np-scanline {
  position: fixed;
  left: 0;
  right: 0;
  height: 6px;
  top: -20px;
  z-index: 101;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.7), transparent);
  box-shadow: 0 0 24px var(--neon), 0 0 60px rgba(0, 212, 255, 0.4);
  opacity: 0;
}

.np-scanline.active {
  opacity: 1;
  animation: npScanlineDown 0.3s linear forwards;
}

@keyframes npScanlineDown {
  from { top: -20px; }
  to { top: 100vh; }
}

.main-view.np-exit {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  pointer-events: none;
}

.np-led-circle {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-radius: 50%;
  border: 4px solid var(--neon);
  box-shadow: 0 0 30px var(--neon), inset 0 0 20px rgba(0, 212, 255, 0.2);
  z-index: 102;
  pointer-events: none;
  opacity: 0;
}

.np-led-circle.visible {
  animation: npLedSequence 1.1s ease-out forwards;
}

@keyframes npLedSequence {
  0% {
    opacity: 0;
    transform: scale(0.3);
    border-color: var(--neon);
    box-shadow: 0 0 30px var(--neon), inset 0 0 20px rgba(0, 212, 255, 0.2);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    border-color: var(--neon);
    box-shadow: 0 0 40px var(--neon), 0 0 60px var(--neon-glow), inset 0 0 20px rgba(0, 212, 255, 0.3);
  }
  35% {
    border-color: #f0d030;
    box-shadow: 0 0 50px #f0d030, 0 0 80px rgba(240, 208, 48, 0.5), inset 0 0 25px rgba(240, 208, 48, 0.25);
  }
  55% {
    border-color: #e74c3c;
    box-shadow: 0 0 55px #e74c3c, 0 0 90px rgba(231, 76, 60, 0.5), inset 0 0 25px rgba(231, 76, 60, 0.25);
  }
  75% {
    opacity: 1;
    transform: scale(1.15);
    border-color: #fff;
    box-shadow: 0 0 70px rgba(255, 255, 255, 0.8), 0 0 100px var(--neon), inset 0 0 40px rgba(255, 255, 255, 0.3);
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 120px rgba(255, 255, 255, 0.9), 0 0 80px var(--neon), inset 0 0 60px rgba(255, 255, 255, 0.4);
  }
}

/* Vue Niveau 1 (cachée par défaut) */
.view-level1 {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 3rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.view-level1.visible {
  display: flex;
  opacity: 1;
}

.view-level1 .title--level1 {
  letter-spacing: 0.4em;
}

.level1-subtitle {
  margin-top: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-dim);
}

/* Masquage de la vue principale après transition */
.main-view.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Bloc à la place de START : message + barre de chargement (même couleur) */
.start-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  margin-bottom: 0.5rem;
}

.start-loading.visible {
  display: flex;
}

.start-loading-text {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--neon);
}

.start-loading-bar {
  width: 180px;
  height: 2px;
  background: rgba(0, 212, 255, 0.2);
  overflow: hidden;
}

.start-loading-bar-fill {
  height: 100%;
  width: 0;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon-dim);
  animation: startBarFill 1s ease-out forwards;
}

.start-loading.visible .start-loading-bar-fill {
  animation: startBarFill 1s ease-out forwards;
}

@keyframes startBarFill {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Après START : rien ne bouge, juste le menu apparaît */
.main-view.state-secondary .menu .menu-item--start {
  display: none;
}

.main-view.state-secondary .start-loading {
  display: none;
}

.main-view.state-secondary .menu-secondary {
  display: flex;
  opacity: 1;
  flex-direction: column;
  align-items: center;
}

.main-view .menu-secondary {
  opacity: 0;
}

/* Apparition type jeu vidéo : de bas en haut, smooth */
.menu-secondary .menu-item,
.menu-secondary .separator {
  opacity: 0;
  transform: translateY(18px);
  animation: menuItemReveal 0.5s ease-out forwards;
}

.main-view.state-secondary .menu-secondary .menu-item,
.main-view.state-secondary .menu-secondary .separator {
  opacity: 0;
  transform: translateY(18px);
  animation: menuItemReveal 0.5s ease-out forwards;
}

.main-view.state-secondary .menu-secondary .separator:nth-child(1) { animation-delay: 0.05s; }
.main-view.state-secondary .menu-secondary .menu-item:nth-of-type(1) { animation-delay: 0.12s; }
.main-view.state-secondary .menu-secondary .separator:nth-child(3) { animation-delay: 0.22s; }
.main-view.state-secondary .menu-secondary .menu-item:nth-of-type(2) { animation-delay: 0.3s; }
.main-view.state-secondary .menu-secondary .separator:nth-child(5) { animation-delay: 0.4s; }
.main-view.state-secondary .menu-secondary .menu-item:nth-of-type(3) { animation-delay: 0.48s; }
.main-view.state-secondary .menu-secondary .separator:nth-child(7) { animation-delay: 0.58s; }
.main-view.state-secondary .menu-secondary .menu-item:nth-of-type(4) { animation-delay: 0.66s; }
.main-view.state-secondary .menu-secondary .separator:nth-child(9) { animation-delay: 0.74s; }
.main-view.state-secondary .menu-secondary .menu-item:nth-of-type(5) { animation-delay: 0.82s; }

@keyframes menuItemReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu.start-loading-visible .menu-item--start {
  display: none;
}

/* ========== ARCHITECTURE PAGES (Detroit Style) ========== */

.page-section {
  display: none;
  flex: 1;
  flex-direction: column;
  position: relative;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.page-section.visible {
  display: flex;
}

.page-section.blurring {
  filter: blur(8px);
  opacity: 0.7;
  pointer-events: none;
}

.page-section.fade-in {
  animation: pageFadeIn 0.5s ease-out forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Bouton RETOUR (discret, haut droite) */
.btn-retour {
  position: absolute;
  top: 0.5rem;
  right: 2rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 246, 0.4);
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.btn-retour:hover {
  color: var(--neon-dim);
}

a.btn-retour {
  text-decoration: none;
}

/* Retour carte chapitres (pages niveau — toujours visible) */
.level-page-retour {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 50;
}

.level-page--shooter .level-page-retour {
  cursor: pointer;
}

/* ---------- Chapitre 1 — Pyramide (univers couleur dédié, hors thème cyan menu) ---------- */
.level-page--pyramid {
  min-height: 100vh;
  overflow-x: hidden;
  cursor: default;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(90, 40, 100, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #120a18 0%, #0a0e16 100%);
}

.ch1-pyramid-lesson-panel {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(7, 10, 16, 0.9);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.ch1-pyramid-lesson-panel.visible {
  opacity: 1;
  visibility: visible;
}

.ch1-pyramid-lesson-inner {
  width: min(94vw, 46rem);
  padding: 1.3rem 1.3rem 1.15rem;
  background: linear-gradient(180deg, rgba(36, 19, 52, 0.95) 0%, rgba(15, 11, 25, 0.94) 100%);
  border: 1px solid rgba(255, 184, 123, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 184, 123, 0.15), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.ch1-pyramid-lesson-title {
  margin: 0 0 1.6rem;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 800;
  color: #ffd6b5;
  text-shadow: 0 0 18px rgba(255, 170, 100, 0.28);
  text-align: center;
}

.ch1-pyramid-lesson-copy {
  margin: 0 0 0.55rem;
  font-size: clamp(0.85rem, 1.9vw, 0.98rem);
  line-height: 1.55;
  color: rgba(255, 235, 220, 0.9);
}

.ch1-pyramid-lesson-steps {
  margin: 0.2rem 0 0.65rem 1rem;
  padding: 0;
  color: rgba(255, 235, 220, 0.95);
  font-size: clamp(0.86rem, 1.95vw, 0.99rem);
  line-height: 1.55;
}

.ch1-pyramid-lesson-steps li {
  margin: 0 0 0.45rem;
}

.ch1-pyramid-lesson-keyword {
  font-weight: 700;
  color: #ffe5d1;
}

.ch1-pyramid-lesson-step-note {
  display: block;
  margin-top: 0.14rem;
  font-size: clamp(0.76rem, 1.7vw, 0.86rem);
  font-style: italic;
  color: rgba(255, 215, 190, 0.72);
}

.ch1-pyramid-lesson-copy--final {
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.ch1-pyramid-lesson-callout {
  margin: 1.35rem 0 0;
  font-size: clamp(0.9rem, 2.1vw, 1.02rem);
  font-weight: 700;
  color: #ffe5d1;
  text-align: center;
}

.ch1-pyramid-go-btn {
  display: block;
  margin: 1.9rem auto 0;
  min-width: 11rem;
  padding: 0.85rem 2.1rem;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff2e6;
  border: 1px solid rgba(255, 188, 138, 0.8);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 152, 88, 0.32) 0%, rgba(255, 106, 42, 0.28) 100%);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 170, 110, 0.3), 0 0 28px rgba(255, 136, 66, 0.42);
  animation: ch1GoPulse 1.4s ease-in-out infinite;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.ch1-pyramid-go-btn:hover {
  background: linear-gradient(180deg, rgba(255, 166, 104, 0.44) 0%, rgba(255, 115, 54, 0.4) 100%);
  box-shadow: 0 0 0 1px rgba(255, 202, 164, 0.4), 0 0 34px rgba(255, 148, 77, 0.58);
  transform: translateY(-2px) scale(1.02);
}

@keyframes ch1GoPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(255, 170, 110, 0.3), 0 0 24px rgba(255, 136, 66, 0.36);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 1px rgba(255, 203, 170, 0.45), 0 0 40px rgba(255, 148, 77, 0.62);
  }
}

.ch1-pyramid-header {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  padding: 0.65rem 1rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 180, 120, 0.22);
  background: linear-gradient(180deg, rgba(35, 18, 48, 0.95) 0%, rgba(18, 12, 28, 0.88) 100%);
}

.ch1-pyramid-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 3.2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #fff5f0;
  text-shadow: 0 0 28px rgba(255, 140, 90, 0.35);
}

.ch1-pyramid-sub {
  margin: 0 auto;
  max-width: 44rem;
  font-size: clamp(0.82rem, 1.85vw, 0.95rem);
  line-height: 1.5;
  color: rgba(255, 230, 210, 0.88);
}

.ch1-pyramid-sub-tagline {
  display: inline-block;
  margin-top: 0.45rem;
}

/* Chapitre 1 — Niveau 2 (page tampon avant mini-jeu dédié) */
.level-page--ch1-l2 {
  overflow-x: hidden;
}

.ch1-l2-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 200, 160, 0.65);
  text-transform: uppercase;
}

.ch1-l2-stub-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
  min-height: 0;
}

.ch1-l2-stub-card {
  width: min(100%, 34rem);
  padding: 1.5rem 1.35rem;
  background: linear-gradient(180deg, rgba(30, 22, 40, 0.92) 0%, rgba(16, 12, 24, 0.9) 100%);
  border: 1px solid rgba(255, 160, 110, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.ch1-l2-stub-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff8f2;
  text-align: center;
}

.ch1-l2-stub-copy {
  margin: 0 0 0.75rem;
  font-size: clamp(0.85rem, 1.9vw, 0.95rem);
  line-height: 1.55;
  color: rgba(255, 235, 220, 0.9);
  text-align: center;
}

.ch1-l2-stub-copy--dim {
  font-size: clamp(0.78rem, 1.7vw, 0.88rem);
  color: rgba(255, 220, 200, 0.55);
}

.ch1-l2-stub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.35rem;
  justify-content: center;
}

.ch1-l2-stub-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(120, 220, 255, 0.95);
  text-decoration: none;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ch1-l2-stub-link:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.55);
}

/* Chapitre 1 — Niveau 2 : mémoire (15 cartes) — même emprise que la pyramide (stage) */
.level-page--ch1-memory {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ch1-memory-page-main {
  flex: 1;
  min-height: 0;
}

.ch1-memory-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.7rem;
  padding: 0;
  position: relative;
}

.level-page--ch1-memory .ch1-pyramid-stage {
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

.ch1-memory-stage-inner {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.15rem 2.6rem;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0.7rem 0.65rem 0.7rem;
  box-sizing: border-box;
}

.ch1-memory-game {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.85rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(32, 20, 44, 0.92) 0%, rgba(15, 10, 24, 0.9) 100%);
  border: 1px solid rgba(255, 170, 125, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.ch1-memory-won {
  order: 3;
  flex: 0 0 min(28rem, 40vw);
  align-self: stretch;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0.8rem 0.85rem;
  background: linear-gradient(180deg, rgba(38, 22, 52, 0.92) 0%, rgba(18, 12, 30, 0.9) 100%);
  border: 1px solid rgba(200, 140, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.ch1-memory-won.ch1-memory-won--round2 {
  flex-basis: min(28rem, 36vw);
  max-height: 100%;
}

.ch1-memory-won.ch1-memory-won--focus {
  border-color: rgba(255, 200, 125, 0.78);
  box-shadow: 0 0 0 2px rgba(255, 190, 110, 0.35), 0 12px 30px rgba(0, 0, 0, 0.42);
}

.ch1-memory-won-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  gap: 0.7rem;
  min-height: 0;
}

.ch1-memory-won-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 255, 200, 0.85);
  text-align: center;
}

.ch1-memory-won-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.ch1-memory-won-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 240, 225, 0.95);
  background: rgba(80, 40, 120, 0.35);
  border: 1px solid rgba(255, 180, 130, 0.32);
  border-radius: 8px;
  animation: ch1MemoryChipIn 0.45s ease;
  max-width: 100%;
}

.ch1-memory-won-chip-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@keyframes ch1MemoryChipIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ch1-memory-won-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #1a0a20;
  background: linear-gradient(180deg, #ffd6a8 0%, #e8a060 100%);
  border-radius: 6px;
}

.ch1-memory-won-lbl {
  letter-spacing: 0.04em;
}

.ch1-memory-won-phrase {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(250, 234, 220, 0.94);
}

.ch1-memory-status {
  margin: 0 0 0.55rem;
}

.ch1-memory-timer {
  width: 100%;
  min-height: clamp(4rem, 7vw, 5.2rem);
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.8vw, 1.4rem);
  padding: 0.55rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 38, 66, 0.85) 0%, rgba(9, 22, 44, 0.92) 100%);
  border: 1px solid rgba(125, 220, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(80, 170, 255, 0.22), 0 0 30px rgba(80, 210, 255, 0.24), inset 0 0 26px rgba(35, 140, 220, 0.18);
}

.ch1-memory-timer-label {
  font-size: clamp(0.58rem, 1.1vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(195, 235, 255, 0.85);
  text-transform: uppercase;
}

.ch1-memory-timer-value {
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: #aeefff;
  text-shadow: 0 0 12px rgba(120, 230, 255, 0.65), 0 0 22px rgba(58, 170, 255, 0.45);
}

.ch1-memory-timer--hidden {
  display: none;
}


.ch1-memory-grid {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.25rem);
  width: 100%;
  max-width: min(100%, 44rem);
  height: auto;
  max-height: 100%;
  margin: 0 auto;
  padding: 0.35rem 0 0.2rem;
  align-content: center;
  justify-items: center;
}

.ch1-memory-round2-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(4, 8, 16, 0.68);
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.ch1-memory-round2-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ch1-memory-round2-panel {
  width: min(92vw, 28rem);
  padding: 1.2rem 1rem 1rem;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 38, 66, 0.95) 0%, rgba(9, 22, 44, 0.96) 100%);
  border: 1px solid rgba(125, 220, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(80, 170, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.48);
}

.ch1-memory-round2-title {
  margin: 0 0 0.95rem;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 800;
  color: #d7f4ff;
  text-shadow: 0 0 14px rgba(120, 230, 255, 0.4);
}

.ch1-memory-grid--7 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  max-width: min(100%, 36rem);
}

.ch1-memory-grid--7 .ch1-memory-cell:nth-child(7) {
  grid-column: 2;
}

.ch1-memory-grid--13 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  max-width: min(100%, 40rem);
}

.ch1-memory-stage--shuffling {
  pointer-events: none;
}

.ch1-memory-stage--shuffling::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(230, 150, 255, 0.25) 0%, transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(255, 200, 255, 0.1) 1px,
      rgba(255, 200, 255, 0.1) 3px
    );
  animation: ch1MemoryShuffleVeil 1.25s ease-in-out;
}

@keyframes ch1MemoryShuffleVeil {
  0%,
  100% {
    opacity: 0.35;
  }
  45% {
    opacity: 1;
  }
}

.ch1-memory-stage--shuffling .ch1-memory-grid {
  animation: ch1MemoryShuffleToss 1.2s ease-in-out;
}

@keyframes ch1MemoryShuffleToss {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    filter: blur(0);
  }
  15% {
    transform: rotate(-1.2deg) scale(0.985);
  }
  35% {
    transform: rotate(1.5deg) scale(1.02);
    filter: blur(0.5px);
  }
  55% {
    transform: rotate(-2deg) scale(0.97);
    filter: blur(1px);
  }
  75% {
    transform: rotate(1deg) scale(1.015);
    filter: blur(0.3px);
  }
}

.ch1-memory-stage--shuffling .ch1-memory-cell:not(.ch1-memory-cell--empty) {
  animation: ch1MemoryCellJitter 0.3s ease-in-out infinite alternate;
}

.ch1-memory-stage--shuffling .ch1-memory-cell:nth-child(odd) {
  animation-delay: -0.12s;
}

.ch1-memory-stage--shuffling .ch1-memory-cell:nth-child(3n) {
  animation-delay: -0.22s;
}

@keyframes ch1MemoryCellJitter {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(1px, -2px) rotate(0.8deg);
  }
}

.ch1-memory-cell {
  position: relative;
  width: 100%;
  max-width: 8.4rem;
  aspect-ratio: 0.72 / 1;
  min-height: 0;
  min-width: 0;
}

.ch1-memory-cell--empty {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.ch1-memory-card {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  background: transparent;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}

.ch1-memory-card:focus-visible {
  outline: 2px solid rgba(255, 200, 140, 0.85);
  outline-offset: 2px;
  border-radius: 10px;
}

.ch1-memory-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.48s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 10px;
}

.ch1-memory-card.is-flipped .ch1-memory-card-inner {
  transform: rotateY(180deg);
}

/* Lueur sur le bouton, pas sur la face 3D : filter sur .ch1-memory-card-inner cassait le retournement (on voyait encore « ? »). */
.ch1-memory-card.ch1-memory-card--good.is-flipped {
  z-index: 2;
  border-radius: 11px;
  animation: ch1MemoryGoodAura 1.25s ease-in-out infinite;
}

@keyframes ch1MemoryGoodAura {
  0%,
  100% {
    box-shadow: 0 0 14px rgba(130, 255, 200, 0.55), 0 0 32px rgba(100, 220, 255, 0.28);
  }
  50% {
    box-shadow: 0 0 24px rgba(160, 255, 210, 0.85), 0 0 44px rgba(120, 230, 255, 0.42);
  }
}

.ch1-memory-card--pair-win.is-flipped .ch1-memory-card-inner {
  animation: ch1MemoryPairWin 0.42s ease forwards;
}

.ch1-memory-card.ch1-memory-card--pair-win.is-flipped {
  z-index: 3;
  border-radius: 11px;
  box-shadow: 0 0 22px rgba(180, 255, 140, 0.65), 0 0 40px rgba(120, 220, 100, 0.35);
}

@keyframes ch1MemoryPairWin {
  0% {
    transform: rotateY(180deg) scale(1);
  }
  40% {
    transform: rotateY(180deg) scale(1.06);
  }
  100% {
    transform: rotateY(180deg) scale(1);
  }
}

.ch1-memory-card.ch1-memory-card--wrong.is-flipped {
  z-index: 2;
  border-radius: 11px;
  animation: ch1MemoryWrongAura 0.36s ease-in-out 2;
}

.ch1-memory-card--wrong.is-flipped .ch1-memory-card-inner {
  transition: transform 0.68s cubic-bezier(0.42, -0.2, 0.32, 1.28);
}

@keyframes ch1MemoryWrongAura {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 60, 60, 0);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 80, 80, 0.55), 0 0 28px rgba(255, 40, 40, 0.25);
  }
}

.ch1-memory-card--wrong.is-flipped .ch1-memory-face--front {
  animation: ch1MemoryWrongTint 0.8s ease-in-out;
}

@keyframes ch1MemoryWrongTint {
  0%,
  100% {
    box-shadow: inset 0 0 0 rgba(255, 80, 80, 0);
  }
  50% {
    box-shadow: inset 0 0 24px rgba(255, 60, 60, 0.35);
  }
}

.ch1-memory-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
  padding: 0.35rem;
}

.ch1-memory-face--back {
  transform: translateZ(1px);
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 800;
  color: rgba(255, 210, 170, 0.9);
  background: linear-gradient(155deg, rgba(72, 38, 95, 0.95) 0%, rgba(35, 18, 52, 0.98) 100%);
  border: 1px solid rgba(200, 150, 255, 0.35);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}

.ch1-memory-face--front {
  transform: rotateY(180deg) translateZ(1px);
  gap: 0.2rem;
  background: linear-gradient(155deg, rgba(48, 28, 68, 0.98) 0%, rgba(22, 14, 36, 0.98) 100%);
  border: 1px solid rgba(255, 170, 120, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.ch1-memory-face--skull {
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1;
  color: rgba(255, 200, 200, 0.95);
  text-shadow: 0 0 18px rgba(255, 100, 100, 0.45);
}

.ch1-memory-num {
  font-size: clamp(0.85rem, 2.6vw, 1.25rem);
  font-weight: 800;
  color: #ffd6a8;
  text-shadow: 0 0 12px rgba(255, 160, 100, 0.35);
}

.ch1-memory-lbl {
  font-size: clamp(0.5rem, 1.5vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1.2;
  color: rgba(255, 230, 210, 0.92);
}

.ch1-memory-win-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 6, 14, 0.82);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.ch1-memory-next-btn {
  margin-top: 0.35rem;
  align-self: center;
}

.ch1-memory-next-btn--hidden {
  display: none;
}

.ch1-memory-finished {
  margin: 0.2rem 0 0;
  align-self: center;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(192, 255, 180, 0.95);
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(110, 220, 120, 0.4);
}

.ch1-memory-finished--hidden {
  display: none;
}

.ch1-memory-win-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ch1-memory-win-panel {
  width: min(94vw, 26rem);
  padding: 1.35rem 1.25rem 1.45rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(36, 22, 52, 0.97) 0%, rgba(16, 12, 28, 0.96) 100%);
  border: 1px solid rgba(200, 150, 255, 0.45);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 180, 130, 0.12), 0 18px 48px rgba(0, 0, 0, 0.55);
}

.ch1-memory-win-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #c4f0a8;
  text-shadow: 0 0 22px rgba(120, 220, 100, 0.35);
}

.ch1-memory-win-copy {
  margin: 0 0 1.1rem;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  line-height: 1.5;
  color: rgba(255, 230, 215, 0.9);
}

.ch1-memory-win-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.ch1-memory-win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #1a1020;
  background: linear-gradient(180deg, #ffd6a8 0%, #d89050 100%);
  border: 1px solid rgba(255, 200, 140, 0.5);
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ch1-memory-win-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 160, 80, 0.35);
}

.ch1-memory-win-btn--ghost {
  color: rgba(255, 220, 200, 0.95);
  background: transparent;
  border-color: rgba(200, 160, 255, 0.45);
}

.ch1-memory-win-btn--ghost:hover {
  background: rgba(200, 150, 255, 0.12);
  box-shadow: none;
}

@media (max-width: 720px) {
  .ch1-memory-stage-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ch1-memory-timer {
    width: 100%;
    min-height: 4.3rem;
    flex-direction: row;
  }

  .ch1-memory-timer-label {
    font-size: 0.62rem;
  }

  .ch1-memory-timer-value {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .ch1-memory-won {
    order: 3;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 5.5rem;
  }

  .ch1-memory-game {
    order: 1;
  }

  .ch1-memory-won-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .ch1-memory-won-title {
    flex: 0 0 auto;
  }

  .ch1-memory-won-list {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch1-memory-card-inner {
    transition-duration: 0.01ms;
  }

  .ch1-memory-won-chip,
  .ch1-memory-card.ch1-memory-card--good.is-flipped,
  .ch1-memory-card.ch1-memory-card--pair-win.is-flipped,
  .ch1-memory-card--pair-win.is-flipped .ch1-memory-card-inner,
  .ch1-memory-card.ch1-memory-card--wrong.is-flipped,
  .ch1-memory-stage--shuffling .ch1-memory-grid,
  .ch1-memory-stage--shuffling::after,
  .ch1-memory-stage--shuffling .ch1-memory-cell:not(.ch1-memory-cell--empty) {
    animation: none !important;
  }

  .ch1-memory-stage--shuffling .ch1-memory-grid {
    filter: none !important;
  }
}

.ch1-pyramid-win-panel {
  position: fixed;
  top: 31%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 10px));
  z-index: 35;
  width: min(96vw, 40rem);
  padding: 1.35rem 1.35rem 1.45rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
  background: linear-gradient(180deg, rgba(16, 48, 28, 0.94) 0%, rgba(10, 32, 22, 0.92) 100%);
  border: 1px solid rgba(74, 222, 128, 0.55);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(34, 197, 94, 0.15);
}

.ch1-pyramid-win-panel.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.ch1-pyramid-success-title {
  margin: 0 0 0.95rem;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4ade80;
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.55);
}

.ch1-pyramid-precision-line {
  margin: 0 0 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(220, 255, 230, 0.95);
}

.ch1-pyramid-precision-val {
  color: #86efac;
  font-size: 1.1rem;
  font-weight: 800;
}

.ch1-pyramid-win-lead {
  margin: 0 0 0.85rem;
  font-size: clamp(0.85rem, 1.95vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: rgba(220, 255, 235, 0.98);
  text-align: center;
}

.ch1-pyramid-win-copy {
  margin: 0;
  font-size: clamp(0.72rem, 1.65vw, 0.82rem);
  line-height: 1.7;
  color: rgba(209, 250, 229, 0.88);
  text-align: left;
}

.ch1-pyramid-end-actions {
  position: fixed;
  left: 50%;
  bottom: max(4.25rem, calc(env(safe-area-inset-bottom) + 3.5rem));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 0.7rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ch1-pyramid-end-actions.visible {
  opacity: 1;
  visibility: visible;
}

.ch1-pyramid-action-btn {
  min-width: 8.5rem;
  padding: 0.58rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  color: #dcfce7;
  background: rgba(16, 48, 28, 0.78);
  border: 1px solid rgba(74, 222, 128, 0.55);
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ch1-pyramid-action-btn:hover {
  background: rgba(22, 72, 40, 0.9);
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.32);
}

.ch1-pyramid-main {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0.5rem 0.75rem 1rem;
  box-sizing: border-box;
}

.ch1-pyramid-status {
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.75rem;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: #fec89a;
  text-shadow: 0 0 18px rgba(255, 180, 120, 0.45);
}

.ch1-pyramid-stage {
  position: relative;
  width: min(96vw, 980px);
  height: min(calc(100vh - 248px), 70vh);
  max-height: 740px;
  min-height: 300px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 160, 120, 0.25), 0 16px 48px rgba(0, 0, 0, 0.55);
}

.ch1-pyramid-canvas,
.ch1-pyramid-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ch1-pyramid-fx {
  pointer-events: none;
  z-index: 2;
}

.ch1-pyramid-canvas {
  z-index: 1;
}

.ch1-pyramid-hint {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 215, 190, 0.55);
}

.ch1-pyramid-hint.hidden {
  visibility: hidden;
  height: 1.2em;
}

.ch1-identify-stage {
  background: linear-gradient(180deg, rgba(48, 22, 66, 0.94) 0%, rgba(20, 10, 34, 0.92) 100%);
  border: 1px solid rgba(206, 150, 255, 0.35);
}

.ch1-identify-stage-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  gap: 0.7rem;
  padding: 0.85rem;
}

.ch1-identify-stage--success .ch1-identify-stage-inner {
  gap: 0.35rem;
  padding: 0.55rem;
}

.ch1-identify-stage--success .ch1-identify-infos,
.ch1-identify-stage--success .ch1-identify-topbar {
  display: none;
}

.ch1-identify-stage--success .ch1-identify-actions {
  display: none;
}

.ch1-identify-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ch1-identify-target,
.ch1-identify-score {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.18rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f2d2ff;
  text-shadow: 0 0 14px rgba(208, 138, 255, 0.32);
  text-align: center;
}

.ch1-identify-board-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid rgba(199, 148, 255, 0.4);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(8, 4, 18, 0.75);
}

.ch1-identify-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.ch1-identify-success-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  padding: 1.25rem 1.5rem;
  background: rgba(8, 4, 18, 0.86);
  backdrop-filter: blur(4px);
  overflow: auto;
}

.ch1-identify-success-overlay.visible {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;
}

.ch1-identify-success-title {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #4ade80;
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.35);
  text-align: center;
}

.ch1-identify-win-copy {
  margin: 0;
  max-width: none;
  font-size: clamp(1.03rem, 2.25vw, 1.3rem);
  line-height: 1.9;
  color: rgba(209, 250, 229, 0.92);
  text-align: justify;
  hyphens: auto;
  column-count: 2;
  column-gap: 3.6rem;
}

.ch1-identify-win-item {
  margin: 0 0 1.85rem;
  break-inside: avoid;
}

.ch1-identify-win-title {
  display: block;
  font-weight: 900;
  font-size: 1.18em;
  line-height: 1.25;
  margin: 0 0 0.55rem;
  color: rgba(226, 255, 232, 0.98);
  text-shadow: 0 0 18px rgba(74, 222, 128, 0.25);
}

.ch1-identify-win-body {
  display: block;
}

.ch1-identify-success-overlay .ch1-identify-win-item:last-child {
  margin-bottom: 0;
}

.ch1-identify-lives {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.2rem;
}

.ch1-identify-heart {
  font-size: 1.05rem;
  color: rgba(255, 92, 120, 0.98);
  text-shadow:
    0 0 8px rgba(255, 92, 120, 0.55),
    0 0 18px rgba(255, 92, 120, 0.25);
  transition: opacity 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease;
}

.ch1-identify-heart.off {
  opacity: 0.38;
  text-shadow:
    0 0 6px rgba(255, 92, 120, 0.35),
    0 0 14px rgba(255, 92, 120, 0.15);
  filter: grayscale(0.15);
}

.ch1-identify-infos {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch1-identify-keys {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}

.ch1-identify-keys-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
}

.ch1-identify-key {
  width: clamp(2.2rem, 4.4vw, 2.8rem);
  height: clamp(2.2rem, 4.4vw, 2.8rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(210, 170, 255, 0.58);
  background: linear-gradient(180deg, rgba(54, 27, 82, 0.88) 0%, rgba(28, 13, 48, 0.92) 100%);
  box-shadow: 0 0 0 1px rgba(190, 135, 255, 0.22), 0 0 14px rgba(168, 104, 255, 0.25);
  color: #f5dcff;
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 10px rgba(228, 188, 255, 0.5);
}

.ch1-identify-actions {
  display: flex;
  justify-content: flex-end;
}

.ch1-identify-restart {
  min-width: 8.8rem;
}

/* ---------- CH1 LEVEL 4 : QUIZZ INFO ---------- */
.ch1-quiz-main {
  width: min(95vw, 1000px);
  margin: 0 auto;
  justify-content: center;
  gap: 0.7rem;
}

.ch1-quiz-stage {
  position: relative;
  width: 100%;
  min-height: min(70vh, 700px);
  border: 1px solid rgba(206, 150, 255, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(48, 22, 66, 0.94) 0%, rgba(20, 10, 34, 0.92) 100%);
  box-shadow: 0 0 0 1px rgba(190, 135, 255, 0.18), 0 16px 40px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem;
}

.ch1-quiz-question-wrap {
  flex: 1;
  min-height: 0;
  border: 1px solid rgba(199, 148, 255, 0.35);
  border-radius: 12px;
  background: rgba(8, 4, 18, 0.68);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.4rem;
  gap: 0.9rem;
}

.ch1-quiz-question {
  margin: 0;
  width: min(90%, 900px);
  font-size: clamp(1.55rem, 4.2vw, 2.55rem);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  color: #f5dcff;
  text-shadow: 0 0 18px rgba(208, 138, 255, 0.3);
}

.ch1-quiz-question.ch1-quiz-question--result {
  width: min(92%, 940px);
  max-height: 100%;
  overflow: auto;
  font-size: clamp(0.98rem, 2.1vw, 1.2rem);
  font-weight: 600;
  line-height: 1.78;
  text-align: left;
  color: rgba(224, 250, 233, 0.96);
  text-shadow: none;
  padding-right: 0.2rem;
}

.ch1-quiz-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ch1-quiz-btn {
  min-height: 6.2rem;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: clamp(1.7rem, 4.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ch1-quiz-btn.is-hidden {
  display: none;
}

.ch1-quiz-btn:hover {
  transform: translateY(-2px) scale(1.01);
}

.ch1-quiz-btn:active {
  transform: translateY(0) scale(0.995);
}

.ch1-quiz-btn--yes {
  background: linear-gradient(180deg, rgba(40, 196, 108, 0.98) 0%, rgba(23, 140, 77, 0.98) 100%);
  border-color: rgba(134, 239, 172, 0.7);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.45), inset 0 1px 0 rgba(232, 255, 241, 0.4);
}

.ch1-quiz-btn--yes:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 28px rgba(74, 222, 128, 0.6), inset 0 1px 0 rgba(232, 255, 241, 0.45);
}

.ch1-quiz-btn--no {
  background: linear-gradient(180deg, rgba(236, 72, 97, 0.98) 0%, rgba(172, 29, 53, 0.98) 100%);
  border-color: rgba(252, 165, 165, 0.75);
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.45), inset 0 1px 0 rgba(255, 232, 236, 0.38);
}

.ch1-quiz-btn--no:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 28px rgba(248, 113, 113, 0.6), inset 0 1px 0 rgba(255, 232, 236, 0.45);
}

.ch1-quiz-btn--next {
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(120, 76, 255, 0.98) 0%, rgba(84, 42, 201, 0.98) 100%);
  border-color: rgba(206, 183, 255, 0.8);
  box-shadow: 0 0 24px rgba(167, 139, 250, 0.55), inset 0 1px 0 rgba(246, 242, 255, 0.35);
}

.ch1-quiz-btn--next.is-visible {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: center;
  width: min(72%, 22rem);
}

.ch1-quiz-btn--next:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 30px rgba(167, 139, 250, 0.68), inset 0 1px 0 rgba(246, 242, 255, 0.45);
}

.ch1-quiz-feedback {
  position: absolute;
  left: 50%;
  bottom: 8.2rem;
  transform: translateX(-50%) scale(0.94);
  min-height: 1.2em;
  margin: 0;
  padding: 0.2rem 0.7rem;
  font-size: clamp(1.25rem, 3.1vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(214, 253, 226, 0.96);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.ch1-quiz-feedback.is-good {
  color: #86efac;
  text-shadow: 0 0 22px rgba(74, 222, 128, 0.55);
}

.ch1-quiz-feedback.is-bad {
  color: #fca5a5;
  text-shadow: 0 0 22px rgba(248, 113, 113, 0.5);
}

.ch1-quiz-feedback.is-visible {
  animation: ch1QuizFeedbackBounce 0.65s cubic-bezier(0.2, 0.88, 0.22, 1.12) forwards;
}

@keyframes ch1QuizFeedbackBounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(16px) scale(0.85);
  }
  45% {
    opacity: 1;
    transform: translateX(-50%) translateY(-7px) scale(1.08);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.ch1-pyramid-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 30;
  padding: 0.55rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fecdd3;
  background: rgba(80, 20, 30, 0.92);
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
  max-width: min(90vw, 22rem);
  text-align: center;
}

.ch1-pyramid-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---------- CHAPITRES : grille néon chaud (10 niveaux) ---------- */
#menu-chapitres {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  flex-direction: column;
  padding: 4.5vh 4.5vw 4vh;
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(110% 85% at 50% 0%, rgba(0, 212, 255, 0.16) 0%, rgba(0, 120, 255, 0.1) 42%, transparent 72%),
    linear-gradient(180deg, #0a1018 0%, #070b12 100%);
}

#menu-chapitres.visible {
  display: flex;
}

.chapitres-header {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.6rem;
  width: min(100%, 1120px);
  margin: 0 auto 1.1rem;
  padding: 0.35rem 0 1.1rem;
  border-bottom: 1px solid rgba(120, 210, 255, 0.22);
}

.chapitre-tab {
  flex: 1 1 0;
  min-width: 68px;
  max-width: 116px;
  min-height: 58px;
  padding: 0.5rem 0.35rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(140, 215, 255, 0.45);
  border-radius: 10px;
  color: rgba(6, 20, 34, 0.95);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(220, 245, 255, 0.45);
}

.chapitre-tab:nth-child(1) { background: linear-gradient(180deg, #d8f4ff 0%, #b9eaff 100%); }
.chapitre-tab:nth-child(2) { background: linear-gradient(180deg, #c5edff 0%, #a6e1ff 100%); }
.chapitre-tab:nth-child(3) { background: linear-gradient(180deg, #b1e5ff 0%, #92d8ff 100%); }
.chapitre-tab:nth-child(4) { background: linear-gradient(180deg, #9fdcff 0%, #7ccfff 100%); }
.chapitre-tab:nth-child(5) { background: linear-gradient(180deg, #8bd4ff 0%, #66c2ff 100%); }
.chapitre-tab:nth-child(6) { background: linear-gradient(180deg, #74c8ff 0%, #52b5ff 100%); }
.chapitre-tab:nth-child(7) { background: linear-gradient(180deg, #62bbff 0%, #439fff 100%); }
.chapitre-tab:nth-child(8) { background: linear-gradient(180deg, #58abff 0%, #3a8dff 100%); }
.chapitre-tab:nth-child(9) { background: linear-gradient(180deg, #4f9cff 0%, #347dff 100%); }
.chapitre-tab:nth-child(10) { background: linear-gradient(180deg, #458cff 0%, #2f6fff 100%); }

.chapitre-tab:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.chapitre-tab--active {
  border-color: rgba(220, 245, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(214, 244, 255, 0.7), 0 0 18px rgba(0, 212, 255, 0.42), 0 10px 20px rgba(0, 0, 0, 0.3);
}

.chapitre-tab--locked {
  filter: grayscale(0.25) brightness(0.75);
  color: rgba(10, 28, 42, 0.72);
}

.chapitre-tab--locked::after {
  content: '•';
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
  font-size: 0.85rem;
}

.chapitre-tab--locked.chapitre-tab--selected {
  border-color: rgba(166, 221, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(166, 221, 255, 0.28);
}

.chapitres-levels-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.2rem 0 0.3rem;
}

.chapitres-levels-title {
  margin: -5.5rem 0 0.65rem;
  text-align: center;
  font-size: clamp(0.95rem, 2.1vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e2f6ff;
  text-shadow:
    0 0 24px rgba(0, 212, 255, 0.35),
    0 1px 0 rgba(0, 40, 80, 0.45);
}

.chapitres-levels-intro {
  margin: 0 0 1.9rem;
  text-align: center;
  font-size: clamp(0.76rem, 1.55vw, 0.9rem);
  line-height: 1.6;
  color: rgba(181, 233, 255, 0.82);
  font-style: italic;
}

.chapitres-levels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  width: min(100%, 980px);
  margin: 0 auto;
}

.chapter-level-card {
  position: relative;
  min-height: 96px;
  padding: 0.9rem 0.8rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(124, 209, 255, 0.4);
  background: linear-gradient(180deg, rgba(60, 170, 255, 0.16) 0%, rgba(33, 104, 214, 0.12) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.chapter-level-card-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: rgba(162, 225, 255, 0.72);
}

.chapter-level-card-label {
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(230, 246, 255, 0.96);
}

.chapter-level-card--active {
  border-color: rgba(182, 233, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(189, 235, 255, 0.34), 0 0 20px rgba(79, 178, 255, 0.34), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.chapter-level-card--active:hover {
  transform: translateY(-3px);
}

.chapter-level-card--locked {
  border-color: rgba(74, 130, 168, 0.5);
  opacity: 0.55;
  cursor: default;
}

.chapter-level-card--locked::after {
  content: 'VERROUILLÉ';
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  color: rgba(186, 227, 255, 0.74);
}

.chapter-level-card--test .chapter-level-card-label { color: #dff3ff; }

.chapter-level-card--test {
  grid-column: 2;
  grid-row: 5;
}

.chapitres-progress {
  flex-shrink: 0;
  padding: 1rem 1rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(100%, 960px);
  margin: 0 auto;
}

.chapitres-progress-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(167, 224, 255, 0.8);
  min-width: 3rem;
}

.chapitres-progress-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.chapitres-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7fd7ff 0%, #4bb5ff 55%, #2f7dff 100%);
  box-shadow: 0 0 14px rgba(84, 184, 255, 0.6);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.chapitres-progress-value {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgba(186, 234, 255, 0.95);
}

.chapter-level-card-ready {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 0.9rem 0.8rem 0.8rem;
  background: linear-gradient(180deg, rgba(42, 157, 82, 0.34) 0%, rgba(19, 88, 55, 0.28) 100%);
  border: 1px solid rgba(124, 255, 179, 0.7);
  box-sizing: border-box;
  z-index: 3;
}

.chapter-level-card-ready.visible {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chapter-level-card-ready-title {
  margin: 0 0 0.6rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #b5ffcf;
  text-shadow: 0 0 14px rgba(54, 255, 130, 0.4);
}

.chapter-level-card-ready-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
}

.chapter-level-card-ready-btn {
  padding: 0.48rem 0.78rem;
  border-radius: 8px;
  border: 1px solid rgba(124, 255, 179, 0.55);
  background: rgba(38, 118, 72, 0.22);
  color: #d7ffe6;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  cursor: pointer;
}

.chapter-level-card-ready-btn:hover {
  box-shadow: 0 0 14px rgba(72, 255, 149, 0.32);
}

.chapter-level-card-ready-btn--start {
  background: rgba(42, 157, 82, 0.35);
}

.chapter-level-card-ready-btn--cancel {
  border-color: rgba(252, 165, 165, 0.28);
  background: rgba(220, 80, 80, 0.09);
  color: rgba(255, 218, 218, 0.72);
}

.chapter-level-card-ready-btn--cancel:hover {
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.2);
  background: rgba(220, 80, 80, 0.14);
  border-color: rgba(252, 165, 165, 0.4);
  color: rgba(255, 228, 228, 0.88);
}

.chapitres-side-leaderboard {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  width: min(32vw, 400px);
  z-index: 47;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(130, 210, 255, 0.45);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
    linear-gradient(180deg, rgba(18, 42, 72, 0.98) 0%, rgba(8, 22, 42, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.12),
    0 0 32px rgba(0, 120, 200, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(0, 212, 255, 0.04);
  padding: 1.35rem 1.25rem 1.25rem;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
}

.chapitres-side-leaderboard.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.chapitres-leaderboard-title {
  flex-shrink: 0;
  margin: 0 0 0.35rem;
  font-size: clamp(1.12rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0fbff;
  text-align: center;
  text-shadow: 0 0 24px rgba(0, 212, 255, 0.35);
}

.chapitres-leaderboard-sub {
  flex-shrink: 0;
  margin: 0 0 1rem;
  font-size: clamp(0.78rem, 1.4vw, 0.88rem);
  font-weight: 500;
  color: rgba(176, 228, 255, 0.88);
  letter-spacing: 0.06em;
  text-align: center;
}

.chapitres-leaderboard-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0.25rem 0.15rem 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  overflow-y: auto;
  color: rgba(230, 246, 255, 0.96);
  font-size: clamp(0.84rem, 1.5vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.chapitres-leaderboard-list li {
  width: 100%;
  text-align: center;
}

#menu-chapitres .chapter-level-card.is-ready {
  border-color: rgba(124, 255, 179, 0.7);
  box-shadow: 0 0 0 1px rgba(124, 255, 179, 0.35), 0 0 20px rgba(64, 236, 136, 0.34), 0 14px 26px rgba(0, 0, 0, 0.34);
}

#menu-chapitres .chapter-level-card.is-ready .chapter-level-card-kicker,
#menu-chapitres .chapter-level-card.is-ready .chapter-level-card-label {
  visibility: hidden;
}

.chapitres-locked-msg {
  position: fixed;
  left: 50%;
  top: 31%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--lock-red);
  text-shadow: 0 0 20px var(--lock-red-dim), 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
  opacity: 0;
  pointer-events: none;
}

.chapitres-locked-msg.visible,
.chapitres-access-msg.visible {
  animation: lockedMsgShow 1.2s ease-out forwards;
}

.chapitres-access-msg {
  position: fixed;
  left: 50%;
  top: 31%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--lock-red);
  text-shadow: 0 0 20px var(--lock-red-dim), 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
  opacity: 0;
  pointer-events: none;
}

@keyframes lockedMsgShow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.chapter-level-card--locked.shake {
  animation: nodeShake 0.4s ease-out;
}

@keyframes nodeShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ---------- TUTORIEL : protocole, ambiance néon ---------- */
#menu-tuto {
  position: relative;
  overflow: hidden;
}

.tuto-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0, 212, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 60%, rgba(0, 120, 200, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(8, 14, 22, 0.97) 0%, rgba(5, 8, 14, 0.98) 100%);
  z-index: 0;
}

.tuto-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 212, 255, 0.03) 2px,
    rgba(0, 212, 255, 0.03) 3px
  );
  opacity: 0.45;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
}

#menu-tuto .page-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.6rem 2rem 6.5rem;
  min-height: 0;
}

#menu-tuto .page-content--scroll {
  overflow-y: auto;
  justify-content: flex-start;
}

.tuto-block {
  max-width: 640px;
  width: 100%;
  padding-bottom: 2.5rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: rgba(230, 238, 246, 0.92);
}

/* Léger surplus de hauteur pour permettre un mini-scroll de confort */
.tuto-block::after {
  content: '';
  display: block;
  height: clamp(32px, 5vh, 56px);
}

.tuto-title {
  margin: 0;
  padding-bottom: 0.15rem;
  text-align: center;
  font-size: clamp(1.35rem, 4.2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #e8f6ff;
  text-shadow:
    0 0 40px rgba(0, 212, 255, 0.35),
    0 0 80px rgba(0, 140, 220, 0.15);
  animation: tutoTitleGlow 4s ease-in-out infinite;
}

@keyframes tutoTitleGlow {
  0%,
  100% {
    text-shadow:
      0 0 36px rgba(0, 212, 255, 0.32),
      0 0 72px rgba(0, 140, 220, 0.12);
  }
  50% {
    text-shadow:
      0 0 48px rgba(0, 212, 255, 0.45),
      0 0 96px rgba(0, 160, 230, 0.18);
  }
}

.tuto-lead {
  margin: 1.85rem 0 0;
  text-align: center;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(200, 235, 255, 0.95);
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.tuto-intro {
  margin: 2.1rem 0 2.75rem;
  text-align: center;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.75;
  opacity: 0.92;
  color: rgba(210, 226, 240, 0.88);
}

.tuto-section {
  position: relative;
  margin-bottom: 2.5rem;
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.18);
  background: linear-gradient(145deg, rgba(0, 40, 70, 0.22) 0%, rgba(0, 25, 45, 0.12) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}

.tuto-section::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0);
  transition: box-shadow 0.45s ease;
}

.tuto-section:hover {
  border-color: rgba(0, 212, 255, 0.42);
  background: linear-gradient(145deg, rgba(0, 48, 82, 0.28) 0%, rgba(0, 30, 52, 0.16) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(0, 212, 255, 0.12),
    0 0 1px rgba(0, 212, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -20px 40px -24px rgba(0, 212, 255, 0.06);
}

.tuto-section:hover::after {
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.07);
}

.tuto-section:last-of-type {
  margin-bottom: 0;
}

.tuto-h3 {
  margin: 0 0 0.85rem;
  text-align: center;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8ecff;
  background: linear-gradient(90deg, #8ad4ff 0%, #e8f8ff 50%, #8ad4ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tutoH3Shimmer 8s ease-in-out infinite;
}

@keyframes tutoH3Shimmer {
  0%,
  100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

.tuto-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(220, 232, 244, 0.9);
}

.tuto-body--justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.tuto-method-list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  list-style: none;
}

.tuto-method-list li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(220, 232, 244, 0.9);
}

.tuto-method-list li:last-child {
  margin-bottom: 0;
}

.tuto-method-list li::before {
  content: '▸';
  position: absolute;
  left: -0.85rem;
  top: 0.05em;
  font-size: 0.75rem;
  color: rgba(0, 212, 255, 0.55);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.35);
}

.tuto-strong {
  color: var(--neon-dim);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
}

#menu-tuto > .btn-retour {
  z-index: 2;
}

/* Cyber-Snake : mini-jeu Tutoriel (néon bleu sur fond noir) */
.tuto-cybersnake-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.tuto-cybersnake-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tuto-data-counter {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(0, 212, 255, 0.9);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.tuto-canvas {
  display: block;
  background: #000;
  border: 1px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Indication clavier : 4 flèches disposées comme sur un clavier, avec pulsation */
.tuto-arrows-hint {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
  align-items: center;
  justify-items: center;
  width: 72px;
  margin-top: 0.25rem;
}

.tuto-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(0, 212, 255, 0.9);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 3px;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
  animation: tutoArrowPulse 1.8s ease-in-out infinite;
}

.tuto-arrow--up {
  grid-column: 2;
  grid-row: 1;
}

.tuto-arrow--left {
  grid-column: 1;
  grid-row: 2;
}

.tuto-arrow--down {
  grid-column: 2;
  grid-row: 2;
}

.tuto-arrow--right {
  grid-column: 3;
  grid-row: 2;
}

@keyframes tutoArrowPulse {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 6px rgba(0, 212, 255, 0.2); border-color: rgba(0, 212, 255, 0.35); }
  50% { opacity: 1; box-shadow: 0 0 14px rgba(0, 212, 255, 0.45); border-color: rgba(0, 212, 255, 0.6); }
}

.tuto-reboot-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #e74c3c;
  text-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.tuto-reboot-msg.visible {
  animation: tutoRebootShow 1.2s ease-out forwards;
}

@keyframes tutoRebootShow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.tuto-border-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 rgba(0, 212, 255, 0);
  opacity: 0;
  z-index: 4;
}

.tuto-border-flash.active {
  animation: tutoBorderFlash 0.3s ease-out forwards;
}

@keyframes tutoBorderFlash {
  0% { opacity: 1; box-shadow: inset 0 0 50px rgba(0, 212, 255, 0.25); border-color: rgba(0, 212, 255, 0.4); }
  100% { opacity: 0; box-shadow: inset 0 0 0 rgba(0, 212, 255, 0); border-color: transparent; }
}

/* ---------- CRÉDITS : générique de fin animé (style Detroit) ---------- */
#menu-credits .page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  min-height: 0;
}

#menu-credits .page-content--credits {
  overflow: visible;
}

.credits-roller-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 300px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.credits-roller-wrap:hover .credits-roller {
  animation-play-state: paused;
}

.credits-roller {
  display: flex;
  flex-direction: column;
  animation: creditsScroll 25s linear infinite;
}

.credits-roller-content {
  flex-shrink: 0;
  padding: 0 0.5rem 2rem;
  text-align: center;
}

.credits-line {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: rgba(244, 244, 246, 0.85);
}

.credits-roller-content .credits-line:last-child {
  margin-bottom: 0;
}

@keyframes creditsScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ---------- PARAMÈTRES : placeholder ---------- */
#menu-parametres .page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.parametres-placeholder {
  font-size: 0.85rem;
  color: rgba(244, 244, 246, 0.5);
  letter-spacing: 0.05em;
}

/* ---------- Pages niveaux (chapters) : barre XP + zone chat ---------- */
.level-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  color: var(--white);
}

.level-page .xp-bar {
  flex-shrink: 0;
  height: 6px;
  background: var(--anthracite);
  overflow: hidden;
}

.level-page .xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--neon-dim));
  box-shadow: 0 0 12px var(--neon-glow);
  transition: width 0.4s ease;
}

.level-page .chat-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.5rem;
  border-top: 1px solid var(--separator);
}

.level-page .chat-zone-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.level-page .chat-zone-input input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--anthracite);
  border: 1px solid var(--separator);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.9rem;
}

.level-page .chat-zone-input input:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon-glow);
}

/* ---------- Niveau 1 : L'Invasion Invisible (Arcade Shooter) ---------- */
.level-page--shooter {
  overflow: hidden;
  cursor: none;
}

.level-page--shooter .level1-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0.9rem 1rem;
  background: rgba(10, 10, 12, 0.9);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.level1-titles {
  text-align: center;
}

.level1-main-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--neon);
  text-shadow: 0 0 20px var(--neon-glow);
  margin: 0 0 0.35rem 0;
}

.level1-subtitle {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(244, 244, 246, 0.85);
  margin: 0;
  line-height: 1.35;
}

.level1-score {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--neon);
  text-shadow: 0 0 12px var(--neon-glow);
}

.level1-game-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding-top: 100px;
  padding-bottom: 52px;
}

.level1-circle-wrap {
  position: relative;
  width: min(85vmin, 640px);
  height: min(85vmin, 640px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0, 212, 255, 0.35);
  box-shadow: 0 0 50px rgba(0, 212, 255, 0.12), inset 0 0 60px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.level1-start-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  z-index: 15;
  border-radius: 50%;
}

.level1-start-overlay.hidden {
  display: none;
}

.level1-start-text {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--neon);
  text-shadow: 0 0 30px var(--neon-glow);
  transition: transform 0.2s, text-shadow 0.2s;
}

.level1-start-overlay:hover .level1-start-text {
  transform: scale(1.05);
  text-shadow: 0 0 40px var(--neon-glow);
}

.level1-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  cursor: none;
}

.level1-score-bar {
  margin-top: 0.75rem;
  padding: 0.4rem 0;
}

.level1-crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  pointer-events: none;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.level1-circle-wrap.shake {
  animation: level1Shake 0.22s ease-out;
}

@keyframes level1Shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(5px, -5px); }
  60% { transform: translate(-4px, -4px); }
  80% { transform: translate(4px, 3px); }
}

.level1-decode-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, backdrop-filter 0.7s ease, visibility 0s 0.7s;
  cursor: default;
}

.level1-decode-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, backdrop-filter 0.7s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.level1-error-msg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #e74c3c;
  text-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
  text-align: center;
  padding: 1rem 1.5rem;
  max-width: 90vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.level1-error-msg.visible {
  opacity: 1;
  visibility: visible;
  animation: level1ErrorPulse 0.4s ease-out;
}

@keyframes level1ErrorPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); }
  50% { transform: translate(-50%, -50%) scale(1.02); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.level1-crosshair-outer {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--neon-glow);
}

.level1-crosshair-mid {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 212, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.level1-crosshair-inner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon);
}

.level1-reveal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 10, 12, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  cursor: default;
}

.level1-reveal.visible {
  opacity: 1;
  visibility: visible;
}

.level1-reveal-buttons {
  text-align: center;
  padding: 2rem;
}

.level1-reveal-buttons.hidden {
  display: none;
}

.level1-reveal-soluce {
  display: none;
  width: 100%;
  max-width: 90vw;
  padding: 2rem;
  max-height: 90vh;
  overflow: hidden;
  flex-direction: column;
}

.level1-reveal-soluce.visible {
  display: flex;
}

.level1-reveal-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.level1-btn {
  padding: 0.7rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--neon);
  background: transparent;
  border: 1px solid rgba(0, 212, 255, 0.45);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s, box-shadow 0.2s;
}

.level1-btn:hover {
  background: rgba(0, 212, 255, 0.12);
  box-shadow: 0 0 24px var(--neon-glow);
}

.level1-reveal .level1-btn,
.level1-reveal .level1-btn-back {
  cursor: pointer;
}

.level1-reveal-inner {
  width: 100%;
  max-width: 560px;
  padding: 0 2rem 2rem;
  text-align: center;
  margin: 0 auto;
}

.level1-reveal-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--neon);
  text-shadow: 0 0 20px var(--neon-glow);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.level1-reveal-list-wrap {
  height: 280px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.level1-reveal-list-wrap--fixed {
  flex: 1;
  min-height: 50vh;
  max-height: 65vh;
  overflow-y: auto;
  margin-bottom: 1.5rem;
  mask-image: none;
  -webkit-mask-image: none;
}

.level1-reveal-list {
  animation: level1RevealScroll 35s linear infinite;
}

.level1-reveal-list--fixed {
  animation: none;
}

.level1-reveal-list p {
  font-size: 0.7rem;
  line-height: 1.9;
  color: rgba(244, 244, 246, 0.9);
  margin-bottom: 0.5rem;
  text-align: left;
}

.level1-reveal-inner--soluce .level1-reveal-list p {
  font-size: 1.15rem;
  line-height: 2;
  margin-bottom: 1rem;
}

.level1-reveal-title--soluce {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.level1-reveal-inner--soluce {
  max-width: 720px;
  width: 100%;
  text-align: left;
}

.level1-reveal-list strong {
  color: var(--neon-dim);
}

.level1-reveal-inner--soluce .level1-reveal-list strong {
  color: var(--neon);
  font-size: 1.05em;
}

.level1-btn-back {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--neon);
  background: transparent;
  border: 1px solid rgba(0, 212, 255, 0.4);
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.level1-btn-back:hover {
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 20px var(--neon-glow);
}

@keyframes level1RevealScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ---------- Niveau 2 : Le Billard des Capacités ---------- */
.level-page--billiard {
  overflow: hidden;
}

.level2-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: rgba(10, 10, 12, 0.92);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.level2-header .xp-bar {
  height: 4px;
  background: var(--anthracite);
  overflow: hidden;
  border-radius: 2px;
}

.level2-header .xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--neon-dim));
  box-shadow: 0 0 8px var(--neon-glow);
  transition: width 0.3s ease;
}

.level2-titles {
  text-align: center;
}

.level2-main-title {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--neon);
  text-shadow: 0 0 20px var(--neon-glow);
  margin: 0 0 0.25rem 0;
}

.level2-subtitle {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(244, 244, 246, 0.9);
  margin: 0;
}

.level2-billiard-wrap {
  position: fixed;
  inset: 0;
  z-index: 5;
  padding-top: 80px;
  padding-bottom: 1rem;
  overflow: visible;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.level2-pockets {
  position: absolute;
  inset: 0 0 4rem 0;
  top: 100px;
  pointer-events: none;
  padding: 0 6%;
  box-sizing: border-box;
  overflow: visible;
}

.level2-pocket {
  position: absolute;
  min-width: 100px;
  max-width: 22vw;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

.level2-pocket--tl { left: 6%; top: 0; right: auto; margin-bottom: 1.5rem; }
.level2-pocket--tr { right: 6%; left: auto; top: 0; margin-bottom: 1.5rem; }
.level2-pocket--bl { left: 6%; bottom: 0; top: auto; right: auto; justify-content: flex-start; margin-top: 2rem; }
.level2-pocket--br { right: 6%; bottom: 0; left: auto; top: auto; justify-content: flex-start; margin-top: 2rem; }
/* Bottom pockets: scored list at top (same size as label), label below — avoid overlap with table */
.level2-pocket--bl .level2-pocket-label,
.level2-pocket--br .level2-pocket-label { order: 2; }
.level2-pocket--bl .level2-pocket-scored,
.level2-pocket--br .level2-pocket-scored { order: 1; margin-bottom: 0.5rem; }
.level2-pocket--bl .level2-scored-title,
.level2-pocket--br .level2-scored-title { font-size: clamp(0.7rem, 1.5vw, 0.95rem); }
.level2-pocket--bl .level2-scored-def,
.level2-pocket--br .level2-scored-def { font-size: clamp(0.58rem, 1.2vw, 0.78rem); }

.level2-pocket-label {
  font-size: clamp(0.9rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 0.2rem;
  line-height: 1.15;
  width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.level2-pocket-scored {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  margin-bottom: 0.25rem;
  min-height: 0;
  max-width: 100%;
  word-break: break-word;
}

.level2-scored-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
  text-align: center;
}


.level2-scored-item--glitch {
  animation: level2ScoredGlitch 0.55s ease-out;
}

@keyframes level2ScoredGlitch {
  0% { opacity: 0; transform: scale(0.92); filter: brightness(0.4); }
  8% { opacity: 1; transform: translateX(-4px) scale(1.02); filter: brightness(1.5); }
  16% { transform: translateX(4px) scale(0.98); filter: brightness(0.7); }
  24% { transform: translateX(-2px) scale(1.01); filter: brightness(1.2); }
  32% { transform: translateX(2px) scale(1); filter: brightness(0.9); }
  40% { transform: translateX(-1px); filter: brightness(1.1); }
  50% { transform: translateX(1px); filter: brightness(1); }
  60%, 100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}

.level2-scored-title {
  font-size: clamp(0.7rem, 1.6vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.level2-scored-def {
  font-size: clamp(0.58rem, 1.25vw, 0.8rem);
  font-weight: 500;
  opacity: 0.95;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.level2-pocket--tl .level2-pocket-scored,
.level2-pocket--tl .level2-scored-title,
.level2-pocket--tl .level2-scored-def { color: rgba(0, 212, 255, 0.95); }
.level2-pocket--tr .level2-pocket-scored,
.level2-pocket--tr .level2-scored-title,
.level2-pocket--tr .level2-scored-def { color: rgba(46, 204, 113, 0.95); }
.level2-pocket--bl .level2-pocket-scored,
.level2-pocket--bl .level2-scored-title,
.level2-pocket--bl .level2-scored-def { color: rgba(231, 76, 60, 0.95); }
.level2-pocket--br .level2-pocket-scored,
.level2-pocket--br .level2-scored-title,
.level2-pocket--br .level2-scored-def { color: rgba(241, 196, 15, 0.95); }

.level2-pocket--tl .level2-pocket-label { color: #00d4ff; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); }
.level2-pocket--tr .level2-pocket-label { color: #2ecc71; text-shadow: 0 0 10px rgba(46, 204, 113, 0.5); }
.level2-pocket--bl .level2-pocket-label { color: #e74c3c; text-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
.level2-pocket--br .level2-pocket-label { color: #f1c40f; text-shadow: 0 0 10px rgba(241, 196, 15, 0.5); }

.level2-table-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78vw;
  height: 78vh;
  max-width: 1200px;
  max-height: 800px;
  border: 2px solid rgba(0, 212, 255, 0.35);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.12), inset 0 0 80px rgba(0, 0, 0, 0.4);
}

.level2-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0e12 0%, #050508 100%);
  cursor: crosshair;
}

.level2-actions {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.level2-btn-try {
  padding: 0.5rem 1.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--neon);
  background: transparent;
  border: 1px solid rgba(0, 212, 255, 0.45);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s, box-shadow 0.2s;
}

.level2-btn-try:hover {
  background: rgba(0, 212, 255, 0.12);
  box-shadow: 0 0 20px var(--neon-glow);
}


.level2-reveal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 10, 12, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  cursor: default;
}

.level2-reveal.visible {
  opacity: 1;
  visibility: visible;
}

.level2-reveal-inner {
  max-width: 560px;
  padding: 2rem;
  text-align: center;
}

.level2-reveal-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: rgba(244, 244, 246, 0.95);
  margin: 0 0 1.5rem 0;
}

.level2-reveal-title strong {
  color: var(--neon);
}

.level2-reveal-sub {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.65;
  color: rgba(220, 230, 255, 0.9);
  margin: 0 0 1.5rem 0;
}

.level2-reveal-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  text-align: left;
}

.level2-reveal-col {
  padding: 0.75rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
}

.level2-reveal-col-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin: 0 0 0.6rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
}

.level2-reveal-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: rgba(244, 244, 246, 0.9);
}

.level2-reveal-col--text .level2-reveal-col-title { color: #00d4ff; }
.level2-reveal-col--creation .level2-reveal-col-title { color: #2ecc71; }
.level2-reveal-col--vision .level2-reveal-col-title { color: #e74c3c; }
.level2-reveal-col--audio .level2-reveal-col-title { color: #f1c40f; }

.level2-btn-back {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--neon);
  background: transparent;
  border: 1px solid rgba(0, 212, 255, 0.4);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.level2-btn-back:hover {
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 20px var(--neon-glow);
}

/* ========== NIVEAU 3 — La Matrice du Prompt ========== */
body.level-page--matrice {
  overflow: auto;
  min-height: 100vh;
}

.level-page--matrice .level3-matrice-wrap {
  flex: 1;
  min-height: 0;
}

.level3-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, rgba(10, 15, 22, 0.98) 0%, rgba(5, 8, 12, 0.95) 100%);
  border-bottom: 2px solid #00d4ff;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
}

.level3-titles { text-align: center; }
.level3-main-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.15em;
  text-shadow: 0 0 24px rgba(0, 212, 255, 0.5);
}
.level3-subtitle {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: rgba(0, 212, 255, 0.95);
  margin: 0;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.level3-matrice-wrap {
  position: relative;
  z-index: 5;
  padding: 100px 1.5rem 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
}

.level3-panier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 100, 140, 0.12) 100%);
  border: 2px solid rgba(0, 212, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255,255,255,0.06);
}

.level3-badge {
  padding: clamp(0.6rem, 1.5vw, 0.9rem) clamp(1rem, 2.5vw, 1.4rem);
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
  border: 2px solid;
}
/* Pulsation sur les badges non verrouillés = on peut les saisir */
.level3-badge:not(.locked) {
  animation: level3BadgePulse 2s ease-in-out infinite;
}
.level3-badge.locked,
.level3-badge.dragging { animation: none; }
@keyframes level3BadgePulse {
  0%, 100% { filter: brightness(1); opacity: 1; }
  50% { filter: brightness(1.25); opacity: 1; }
}
.level3-badge--role:not(.locked) { animation-name: level3BadgePulseRole; }
.level3-badge--contexte:not(.locked) { animation-name: level3BadgePulseContexte; }
.level3-badge--tache:not(.locked) { animation-name: level3BadgePulseTache; }
.level3-badge--etapes:not(.locked) { animation-name: level3BadgePulseEtapes; }
.level3-badge--contraintes:not(.locked) { animation-name: level3BadgePulseContraintes; }
.level3-badge--format:not(.locked) { animation-name: level3BadgePulseFormat; }
@keyframes level3BadgePulseRole {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 120, 215, 0.4); }
  50% { box-shadow: 0 0 28px rgba(0, 120, 215, 0.8); }
}
@keyframes level3BadgePulseContexte {
  0%, 100% { box-shadow: 0 0 16px rgba(155, 77, 202, 0.4); }
  50% { box-shadow: 0 0 28px rgba(155, 77, 202, 0.8); }
}
@keyframes level3BadgePulseTache {
  0%, 100% { box-shadow: 0 0 16px rgba(230, 126, 34, 0.4); }
  50% { box-shadow: 0 0 28px rgba(230, 126, 34, 0.8); }
}
@keyframes level3BadgePulseEtapes {
  0%, 100% { box-shadow: 0 0 16px rgba(39, 174, 96, 0.4); }
  50% { box-shadow: 0 0 28px rgba(39, 174, 96, 0.8); }
}
@keyframes level3BadgePulseContraintes {
  0%, 100% { box-shadow: 0 0 16px rgba(231, 76, 60, 0.4); }
  50% { box-shadow: 0 0 28px rgba(231, 76, 60, 0.8); }
}
@keyframes level3BadgePulseFormat {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 188, 212, 0.4); }
  50% { box-shadow: 0 0 28px rgba(0, 188, 212, 0.8); }
}
.level3-badge--role {
  background: rgba(0, 120, 215, 0.55);
  border-color: #0078d7;
  box-shadow: 0 0 16px rgba(0, 120, 215, 0.4);
}
.level3-badge--contexte {
  background: rgba(138, 43, 226, 0.55);
  border-color: #9b4dca;
  box-shadow: 0 0 16px rgba(155, 77, 202, 0.4);
}
.level3-badge--tache {
  background: rgba(230, 126, 34, 0.55);
  border-color: #e67e22;
  box-shadow: 0 0 16px rgba(230, 126, 34, 0.4);
}
.level3-badge--etapes {
  background: rgba(39, 174, 96, 0.55);
  border-color: #27ae60;
  box-shadow: 0 0 16px rgba(39, 174, 96, 0.4);
}
.level3-badge--contraintes {
  background: rgba(231, 76, 60, 0.55);
  border-color: #e74c3c;
  box-shadow: 0 0 16px rgba(231, 76, 60, 0.4);
}
.level3-badge--format {
  background: rgba(0, 188, 212, 0.55);
  border-color: #00bcd4;
  box-shadow: 0 0 16px rgba(0, 188, 212, 0.4);
}

.level3-badge:hover {
  filter: brightness(1.15);
  transform: translateY(-3px) scale(1.02);
}
.level3-badge--role:hover { box-shadow: 0 0 28px rgba(0, 120, 215, 0.6), 0 4px 12px rgba(0,0,0,0.3); }
.level3-badge--contexte:hover { box-shadow: 0 0 28px rgba(155, 77, 202, 0.6), 0 4px 12px rgba(0,0,0,0.3); }
.level3-badge--tache:hover { box-shadow: 0 0 28px rgba(230, 126, 34, 0.6), 0 4px 12px rgba(0,0,0,0.3); }
.level3-badge--etapes:hover { box-shadow: 0 0 28px rgba(39, 174, 96, 0.6), 0 4px 12px rgba(0,0,0,0.3); }
.level3-badge--contraintes:hover { box-shadow: 0 0 28px rgba(231, 76, 60, 0.6), 0 4px 12px rgba(0,0,0,0.3); }
.level3-badge--format:hover { box-shadow: 0 0 28px rgba(0, 188, 212, 0.6), 0 4px 12px rgba(0,0,0,0.3); }

.level3-badge:active { cursor: grabbing; }
.level3-badge.dragging {
  opacity: 0.35;
  pointer-events: none;
}
/* Fantôme pendant le glisser (suit la souris) */
.level3-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  margin: -0.5em 0 0 -0.5em;
  padding: clamp(0.6rem, 1.5vw, 0.9rem) clamp(1rem, 2.5vw, 1.4rem);
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 8px;
  border: 2px solid;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transform: scale(1.05);
}
.level3-drag-ghost.level3-badge--role { background: rgba(0, 120, 215, 0.9); border-color: #0078d7; }
.level3-drag-ghost.level3-badge--contexte { background: rgba(138, 43, 226, 0.9); border-color: #9b4dca; }
.level3-drag-ghost.level3-badge--tache { background: rgba(230, 126, 34, 0.9); border-color: #e67e22; }
.level3-drag-ghost.level3-badge--etapes { background: rgba(39, 174, 96, 0.9); border-color: #27ae60; }
.level3-drag-ghost.level3-badge--contraintes { background: rgba(231, 76, 60, 0.9); border-color: #e74c3c; }
.level3-drag-ghost.level3-badge--format { background: rgba(0, 188, 212, 0.9); border-color: #00bcd4; }
.level3-badge.locked {
  cursor: default;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.35) 0%, rgba(39, 174, 96, 0.4) 100%);
  border-color: #2ecc71;
  color: #fff;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
}
/* Une fois placé, le badge disparaît de la barre du haut */
.level3-panier .level3-badge.locked {
  display: none !important;
}
.level3-badge.shake {
  animation: level3Shake 0.4s ease;
}

@keyframes level3Shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); border-color: #e74c3c; background: rgba(231, 76, 60, 0.2); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.level3-table-wrap {
  flex: 1;
  min-height: 280px;
  overflow-x: auto;
  border: 2px solid rgba(0, 212, 255, 0.5);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.08), inset 0 0 60px rgba(0,0,0,0.3);
}

.level3-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.8rem, 2vw, 1rem);
  min-height: 100%;
}

.level3-th {
  padding: clamp(0.85rem, 2vw, 1.2rem) clamp(1rem, 2.5vw, 1.4rem);
  text-align: left;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
  border-bottom: 2px solid rgba(0, 212, 255, 0.4);
  border-right: 1px solid rgba(0, 212, 255, 0.2);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}
.level3-th:last-child { border-right: none; }

.level3-td {
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.35rem);
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
  border-right: 1px solid rgba(0, 212, 255, 0.12);
  vertical-align: middle;
  line-height: 1.45;
}
.level3-td:last-child { border-right: none; }

.level3-td--etape { width: 160px; min-width: 140px; }
/* Colonne 2 : PROMPT PARESSEUX — gris, faible (opacité 0.6) */
.level3-th--basic {
  color: rgba(160, 155, 145, 0.8);
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.level3-td--basic {
  color: rgba(140, 135, 125, 0.95);
  max-width: 32%;
  font-weight: 500;
  filter: blur(0.4px);
  opacity: 0.6;
  font-style: italic;
}
/* Colonne 3 : PROMPT D'ÉLITE — néon, net, structuré */
.level3-th--mega {
  color: #00d4ff;
  text-shadow: 0 0 14px rgba(0, 212, 255, 0.5);
}
.level3-td--mega {
  color: #00e5ff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
  font-weight: 600;
  max-width: 38%;
  filter: none;
  opacity: 1;
  font-style: normal;
}
/* Quand une étape est validée, la cellule Élite brille en bleu néon */
.level3-row.validated .level3-td--mega {
  color: #00d1ff;
  text-shadow: 0 0 14px rgba(0, 209, 255, 0.6);
  box-shadow: inset 0 0 20px rgba(0, 209, 255, 0.12);
}

.level3-td--drop {
  min-height: 56px;
  cursor: copy;
  background: rgba(80, 100, 140, 0.12);
  border-right: 1px solid rgba(160, 120, 255, 0.25);
}
.level3-td--drop.drag-over {
  background: rgba(0, 212, 255, 0.25);
  box-shadow: inset 0 0 0 3px #00d4ff;
}
.level3-td--drop.filled {
  background: rgba(46, 204, 113, 0.08);
  border-right-color: rgba(46, 204, 113, 0.25);
}
.level3-td--drop.filled .level3-vide { display: none; }
.level3-td--drop.filled .level3-badge-slot { display: inline; }
.level3-td--drop .level3-badge-slot { display: none; }

.level3-vide {
  color: rgba(180, 170, 220, 0.85);
  font-size: clamp(0.72rem, 1.7vw, 0.9rem);
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
}
/* Pulsation douce sur [DÉPOSER ICI] tant que la case n'est pas remplie */
.level3-td--drop:not(.filled) .level3-deposer {
  animation: level3DeposerPulse 1.8s ease-in-out infinite;
}
.level3-td--drop.filled .level3-deposer { animation: none; }
@keyframes level3DeposerPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Flash "PRÉCISION +20%" après un bon dépôt */
.level3-precision-flash {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  padding: 0.5rem 1rem;
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #00e676;
  text-shadow: 0 0 20px rgba(0, 230, 118, 0.8);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(0, 230, 118, 0.6);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.2s ease;
}
.level3-precision-flash.visible {
  opacity: 1;
  visibility: visible;
  animation: level3PrecisionPop 0.5s ease;
}
@keyframes level3PrecisionPop {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.level3-row.validated {
  animation: level3RowScan 0.6s ease;
}

@keyframes level3RowScan {
  0% { background: rgba(0, 212, 255, 0.15); }
  50% { background: rgba(0, 212, 255, 0.25); }
  100% { background: transparent; }
}

/* Cellule FORMAT : texte statique vs tableau Markdown défilant */
.level3-td--mega-format {
  position: relative;
  overflow: hidden;
}
.level3-mega-static { display: inline; }
.level3-mega-markdown-scroll {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(0, 20, 40, 0.6);
  border-radius: 4px;
  padding: 0.5rem;
}
.level3-td--mega-format.format-unlocked .level3-mega-static { display: none; }
.level3-td--mega-format.format-unlocked .level3-mega-markdown-scroll {
  display: block;
}
.level3-markdown-scroll-inner {
  animation: level3MarkdownScroll 18s linear infinite;
}
.level3-mega-markdown-scroll .level3-markdown-pre {
  margin: 0 0 1rem 0;
  font-size: 0.65rem;
  line-height: 1.35;
  color: #00d1ff;
  white-space: pre;
}
.level3-mega-markdown-scroll .level3-markdown-pre code {
  font-family: 'Consolas', 'Monaco', monospace;
  text-shadow: 0 0 8px rgba(0, 209, 255, 0.4);
}
@keyframes level3MarkdownScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.level3-reveal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 8, 12, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}

.level3-reveal.visible {
  opacity: 1;
  visibility: visible;
}

.level3-reveal-inner {
  text-align: center;
  max-width: 560px;
  padding: 2.5rem;
}

.level3-reveal-title {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #00d4ff;
  margin: 0 0 0.75rem 0;
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.level3-reveal-sub {
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: #e0ecf4;
  margin: 0 0 1rem 0;
  line-height: 1.55;
}
.level3-reveal-inner--lesson {
  max-width: 640px;
  text-align: left;
}
.level3-reveal-inner--lesson .level3-reveal-title { text-align: center; }
.level3-reveal-inner--lesson .level3-reveal-sub { text-align: left; }
.level3-reveal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  color: #e0ecf4;
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.6;
}
.level3-reveal-list li {
  margin-bottom: 0.6rem;
  padding-left: 1.25rem;
  position: relative;
}
.level3-reveal-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #00d4ff;
}
.level3-reveal-quote {
  margin: 1.25rem 0 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #00d4ff;
  background: rgba(0, 212, 255, 0.08);
  color: #c8e4f0;
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.55;
  font-style: italic;
}
.level3-reveal-inner--lesson .level3-btn-back { margin-top: 0.5rem; }
.level3-result-bandeau {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: rgba(0, 212, 255, 0.95);
  margin: 0 0 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background: rgba(0, 50, 80, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 6px;
  line-height: 1.5;
  max-width: 90%;
}

.level3-btn-back {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.08);
  border: 2px solid rgba(0, 212, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  border-radius: 6px;
}

.level3-btn-back:hover {
  background: rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.35);
  transform: scale(1.02);
}