/* =============================================
   SECTION A2 — « Le labo »
   Playground interactif : un terrain de jeu + une rampe de sélection +
   des commandes contextuelles. Les 6 mécanismes sont les vrais effets
   du thème (hero-fx, scramble, magnetic, cursor, draw, ticker), rejoués
   en live et manipulables, pas six cartes qui tournent seules.
   Tokens : charte Pixora (style.css :root). Aucun webfont ajouté.
   Classes préfixées a2- pour éviter toute collision avec le reste du site.
   ============================================= */

.a2-lab {
  position: relative;
  overflow: hidden;
  --a2-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;
}
.a2-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 50% at 25% 0%, rgba(197, 241, 53, 0.05), transparent 60%);
  pointer-events: none;
}
.a2-lab .container { position: relative; }

/* ---- En-tête ---- */
.a2-lab__eyebrow {
  font-family: var(--a2-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-volt);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.a2-lab__eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-volt);
  opacity: 0.7;
}
.a2-lab h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: var(--space-sm) 0;
  max-width: 20ch;
}
.a2-lab h2 .text-volt { color: var(--color-volt); }
.a2-lab__lede {
  color: var(--color-slate);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 56ch;
}

/* =============================================
   MOTEUR (rail + stage + commandes)
   ============================================= */
.a2-engine {
  position: relative;
  margin-top: var(--space-lg);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}

.a2-engine__body {
  display: grid;
  grid-template-columns: 208px 1fr;
}
@media (max-width: 860px) {
  .a2-engine__body { grid-template-columns: 1fr; }
}

/* ---- Rail de sélection (tablist) ---- */
.a2-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem;
  border-right: 1px solid var(--border-hairline);
  background: rgba(6, 11, 24, 0.35);
}
@media (max-width: 860px) {
  .a2-rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-hairline);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

.a2-rail__btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  flex-shrink: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-slate);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
@media (max-width: 860px) {
  .a2-rail__btn { width: auto; }
  .a2-rail__label { white-space: nowrap; }
}
.a2-rail__btn:hover { color: var(--color-ivory); background: rgba(197, 241, 53, 0.06); }
.a2-rail__btn.is-active {
  color: var(--color-noir);
  background: var(--color-volt);
  border-color: var(--color-volt);
}
.a2-rail__btn.is-active .a2-rail__icon { color: var(--color-noir); }
.a2-rail__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-mint); }
.a2-rail__btn:focus-visible {
  outline: 2px solid var(--color-volt);
  outline-offset: 2px;
}

/* ---- Terrain de jeu ---- */
.a2-stage {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(13, 27, 62, 0.55), transparent);
}
@media (min-width: 861px) { .a2-stage { min-height: 360px; } }
.a2-stage:focus-visible { outline: 2px solid var(--color-volt); outline-offset: -2px; }

.a2-stage__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  transition: opacity 0.6s ease;
}
.a2-stage[data-a2-active="aurora"] .a2-stage__bg { opacity: 0.9; }

.a2-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
}
.a2-panel[hidden] { display: none; }

.a2-readout {
  font-family: var(--a2-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--color-slate);
  background: rgba(6, 11, 24, 0.55);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  align-self: flex-start;
  margin: auto auto 0 0;
}
.a2-readout b { color: var(--color-volt); font-weight: 700; }

/* 1. Aurora + streaks */
.a2-aurora { position: absolute; inset: 0; }
.a2-blob { position: absolute; border-radius: 50%; filter: blur(38px); opacity: 0.55; mix-blend-mode: screen; will-change: transform; }
.a2-blob--v { width: 150px; height: 150px; background: var(--color-volt); left: 8%; top: 20%; animation: a2-drift1 calc(9s / var(--a2-aurora-speed, 1)) ease-in-out infinite; }
.a2-blob--m { width: 130px; height: 130px; background: var(--color-mint); right: 10%; top: 35%; animation: a2-drift2 calc(11s / var(--a2-aurora-speed, 1)) ease-in-out infinite; }
.a2-blob--d { width: 170px; height: 170px; background: #2b3f8a; left: 40%; bottom: -20%; animation: a2-drift1 calc(13s / var(--a2-aurora-speed, 1)) ease-in-out infinite reverse; }
@keyframes a2-drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -14px); } }
@keyframes a2-drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 12px); } }
.a2-streaks { position: absolute; inset: 0; width: 100%; height: 100%; }
.a2-streak-pulse { stroke-dasharray: 100; stroke-dashoffset: 100; animation: a2-pulse calc(3.6s / var(--a2-aurora-speed, 1)) linear infinite; }
.a2-streak-pulse.b { animation-duration: calc(5.2s / var(--a2-aurora-speed, 1)); animation-delay: 1.4s; }
@keyframes a2-pulse { 0% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: -100; } }

@keyframes a2-pulse-boost { 0% { filter: brightness(1); } 35% { filter: brightness(1.7); } 100% { filter: brightness(1); } }
.a2-stage.a2-is-pulsing .a2-stage__bg { animation: a2-pulse-boost 0.9s ease; }

/* 2. Scramble */
.a2-scramble { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -0.02em; color: var(--color-ivory); cursor: default; user-select: none; text-align: center; word-break: break-word; }
.a2-scramble .text-volt { color: var(--color-volt); }

/* 3. Magnetic */
.a2-mag { position: relative; display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--color-noir); background: var(--color-volt); border: none; border-radius: var(--radius-pill, 999px); padding: 0.85rem 1.5rem; cursor: pointer; text-decoration: none; will-change: transform; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.a2-mag:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 3px; }

/* 4. Curseur */
.a2-cursor-zone { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: none; }
.a2-cursor-zone--hide-native { cursor: none; }
.a2-cursor__hint { font-family: var(--a2-mono); font-size: 0.7rem; color: var(--color-slate); letter-spacing: 0.05em; }
.a2-cursor__dot, .a2-cursor__follow { position: absolute; top: 0; left: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.a2-cursor__dot { width: 6px; height: 6px; background: var(--color-volt); transform: translate(-50%, -50%); }
.a2-cursor__follow { width: 30px; height: 30px; border: 1px solid var(--color-mint); transform: translate(-50%, -50%); }

/* 5. Ligne qui se dessine */
.a2-draw { width: 80%; height: 60px; }
.a2-draw__path { stroke: var(--color-volt); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.a2-draw__grid { stroke: var(--border-strong); stroke-width: 1; }

/* 6. Bandeau défilant */
.a2-tick { font-family: var(--a2-mono); font-size: 0.8rem; color: var(--color-slate); white-space: nowrap; overflow: hidden; width: 100%; }
.a2-tick__track { display: inline-block; padding-left: 100%; animation: a2-tick 14s linear infinite; }
@keyframes a2-tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---- Commandes contextuelles ---- */
.a2-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border-hairline);
  background: rgba(6, 11, 24, 0.35);
}
.a2-controls__group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.a2-controls__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--a2-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-slate);
  text-transform: uppercase;
}
.a2-controls__field input[type="range"] {
  width: 110px;
  accent-color: var(--color-volt);
}
.a2-controls__text {
  min-width: 0;
  flex: 1 1 140px;
  max-width: 220px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.a2-controls__text:focus-visible { outline: 2px solid var(--color-volt); outline-offset: 1px; }
.a2-controls__btn {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.a2-controls__btn:hover { border-color: var(--color-volt); color: var(--color-volt); }
.a2-controls__btn[aria-pressed="true"] { background: var(--color-mint); color: var(--color-noir); border-color: var(--color-mint); }
.a2-controls__btn:focus-visible,
.a2-controls__reset:focus-visible { outline: 2px solid var(--color-volt); outline-offset: 2px; }
.a2-controls__reset {
  margin-left: auto;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-slate);
  font-family: var(--a2-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.a2-controls__reset:hover { color: var(--color-ivory); }

/* ---- Lecture courante (tag + hint, remplace les 6 meta de cartes) ---- */
.a2-engine__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.75rem 1rem 1rem;
}
.a2-engine__tag { font-family: var(--a2-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-mint); }
.a2-engine__hint { font-size: 0.82rem; color: rgba(142, 155, 184, 0.72); }

.a2-lab__foot {
  margin-top: var(--space-md);
  font-family: var(--a2-mono);
  font-size: 0.72rem;
  color: rgba(142, 155, 184, 0.6);
  letter-spacing: 0.04em;
}
.a2-lab__foot b { color: var(--color-ivory); font-weight: 500; }

/* ---- Animation d'accueil, très courte, jouée une fois ---- */
.a2-engine.is-booting .a2-rail__btn {
  animation: a2-boot-rail 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.a2-engine.is-booting .a2-rail__btn:nth-child(1) { animation-delay: 0s; }
.a2-engine.is-booting .a2-rail__btn:nth-child(2) { animation-delay: 0.04s; }
.a2-engine.is-booting .a2-rail__btn:nth-child(3) { animation-delay: 0.08s; }
.a2-engine.is-booting .a2-rail__btn:nth-child(4) { animation-delay: 0.12s; }
.a2-engine.is-booting .a2-rail__btn:nth-child(5) { animation-delay: 0.16s; }
.a2-engine.is-booting .a2-rail__btn:nth-child(6) { animation-delay: 0.2s; }
@keyframes a2-boot-rail { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.a2-engine.is-booting .a2-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(197, 241, 53, 0.35), transparent);
  transform: translateY(-100%);
  animation: a2-boot-scan 0.6s ease-out;
  pointer-events: none;
}
@keyframes a2-boot-scan { to { transform: translateY(100%); } }

/* ---- Perf : n'anime les boucles que quand le moteur est visible ---- */
.a2-engine:not(.is-inview) .a2-blob,
.a2-engine:not(.is-inview) .a2-streak-pulse,
.a2-engine:not(.is-inview) .a2-tick__track {
  animation-play-state: paused;
}

/* ---- Conflit curseur global : masqué pendant la démo du curseur maison ---- */
body.a2-cursor-live #cursor-dot,
body.a2-cursor-live #cursor-follower {
  opacity: 0 !important;
}

/* ---- Mouvement réduit : on fige les boucles et on cache les réglages inutiles ---- */
@media (prefers-reduced-motion: reduce) {
  .a2-blob,
  .a2-streak-pulse,
  .a2-tick__track,
  .a2-stage.a2-is-pulsing .a2-stage__bg,
  .a2-engine.is-booting .a2-rail__btn,
  .a2-engine.is-booting .a2-stage::after {
    animation: none !important;
  }
  .a2-draw__path { transition: none !important; stroke-dashoffset: 0 !important; }
  .a2-mag { transition: none !important; }
  [data-a2-controls="aurora"] input[type="range"],
  [data-a2-action="aurora-pulse"],
  [data-a2-controls="magnetic"] input[type="range"],
  [data-a2-action="magnetic-test"],
  [data-a2-controls="cursor"] input[type="range"],
  [data-a2-action="cursor-replay"],
  [data-a2-controls="ticker"] input[type="range"],
  [data-a2-action="ticker-direction"] {
    display: none;
  }
}

/* ---- Mobile : panneau plus compact, commandes empilées ---- */
@media (max-width: 560px) {
  .a2-controls { padding: 0.7rem 0.85rem; }
  .a2-controls__group { gap: 0.5rem; }
  .a2-controls__reset { margin-left: 0; }
  .a2-engine__meta { padding: 0.6rem 0.85rem 0.9rem; }
}