/* ═══════════════════════════════════════════════════════════════════════
   competences.html — page dédiée Compétences
   Stages : auth → char picker → polygone rotatif → voie tree
   Design : sobre (peu d'animations sur la page racine, lourdes uniquement
   sur les éléments interactifs au focus)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --comp-bg:        #04060e;
  --comp-bg-2:      #08101e;
  --comp-surface:   rgba(8, 16, 30, 0.86);
  --comp-border:    rgba(77, 163, 255, 0.18);
  --comp-cyan:      #00e5ff;
  --comp-text:      #e2e6f0;
  --comp-text-2:    #c8cde0;
  --comp-text-3:    #9aa0b8;
  --comp-muted:     #5a7a90;
  --comp-locked:    #34405a;
  --comp-ready:     #00e5ff;
  --comp-egg:       #ffd60a;

  --font-h: 'Orbitron', sans-serif;
  --font-b: 'Rajdhani', 'Exo 2', sans-serif;
  --font-m: 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100vh;
  background: var(--comp-bg);
  color: var(--comp-text);
  font-family: var(--font-b);
  overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at top right, rgba(0,229,255,0.05), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(139,92,246,0.04), transparent 65%);
}

a { color: var(--comp-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-m); color: var(--comp-cyan);
       padding: 1px 5px; background: rgba(0,229,255,0.08);
       border-radius: 3px; font-size: .92em; }

/* ─── AUTH GATE ────────────────────────────────────────────────────────── */
.login-gate {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: var(--comp-bg);
}
.login-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,229,255,0.06) 0%, transparent 70%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 100px);
}
.login-box {
  position: relative; z-index: 2;
  text-align: center; max-width: 440px; padding: 40px 32px;
}
.login-logo {
  font-family: var(--font-h); font-weight: 900; font-size: 2.4rem;
  letter-spacing: .35em; color: var(--comp-cyan);
  text-shadow: 0 0 24px var(--comp-cyan); margin-bottom: 4px;
}
.login-tag {
  font-family: var(--font-m); font-size: 0.662rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .25em;
  color: var(--comp-text-3); margin-bottom: 32px; opacity: .8;
}
.login-desc {
  font-family: var(--font-b); font-size: 1rem; color: var(--comp-text-2);
  line-height: 1.6; margin-bottom: 24px;
}
.login-input-wrap {
  margin: 28px 0 12px;
}
#link-code {
  width: 100%;
  background: rgba(2,6,16,0.7);
  border: 1px solid var(--comp-border);
  border-radius: 6px;
  padding: 16px 20px;
  font-family: var(--font-m); font-size: 1.1rem; letter-spacing: .35em;
  color: var(--comp-cyan);
  text-align: center; text-transform: uppercase;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
#link-code:focus { border-color: var(--comp-cyan);
  box-shadow: 0 0 18px color-mix(in srgb, var(--comp-cyan) 40%, transparent); }
.code-error {
  font-family: var(--font-m); font-size: 0.662rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .12em;
  color: #FF4757; min-height: 18px; margin-bottom: 14px;
}
.code-btn {
  width: 100%; padding: 14px 24px;
  font-family: var(--font-h); font-weight: 800; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--comp-cyan), #4DA3FF);
  border: none; border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--comp-cyan) 30%, transparent);
  transition: box-shadow .25s, transform .25s;
}
.code-btn:hover { transform: translateY(-1px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--comp-cyan) 50%, transparent); }
.code-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.login-hint {
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .12em;
  color: var(--comp-text-3); margin-top: 22px;
}

/* ─── APP (visible après auth) ─────────────────────────────────────────── */
.comp-app { display: none; }
.comp-app.ready { display: block; }

.comp-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(6,12,28,0.96), rgba(4,8,20,0.92));
  border-bottom: 1px solid var(--comp-border);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 50;
}
.comp-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--comp-cyan), transparent);
  opacity: .35;
}
.comp-back {
  font-family: var(--font-h); font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--comp-text-3); display: flex; align-items: center; gap: 6px;
  transition: color .2s;
}
.comp-back:hover { color: var(--comp-cyan); text-decoration: none; }
.comp-title {
  flex: 1;
  font-family: var(--font-h); font-weight: 900; font-size: 1rem;
  letter-spacing: .35em; color: var(--comp-cyan);
  text-shadow: 0 0 14px var(--comp-cyan);
}
.comp-user {
  font-family: var(--font-m); font-size: 0.662rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .14em;
  color: var(--comp-text-2);
}
.comp-logout {
  font-family: var(--font-h); font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important; font-weight: 700;
  letter-spacing: .14em;
  background: transparent; color: var(--comp-text-3);
  border: 1px solid var(--comp-border); border-radius: 4px;
  padding: 7px 14px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.comp-logout:hover { color: #FF4757; border-color: #FF4757; }

.comp-stage {
  padding: 36px 32px 60px;
  position: relative; z-index: 1;
  animation: stageFadeIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes stageFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stage-intro { max-width: 720px; margin-bottom: 28px; }
.stage-tag {
  font-family: var(--font-m); font-size: 0.577rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .26em;
  text-transform: uppercase; color: var(--comp-cyan); opacity: .7;
  margin-bottom: 10px;
}
.stage-title {
  font-family: var(--font-h); font-weight: 900; font-size: 1.65rem;
  letter-spacing: .06em; color: #fff; margin: 0 0 8px;
  text-shadow: 0 0 22px color-mix(in srgb, var(--comp-cyan) 30%, transparent);
}
.stage-desc {
  font-family: var(--font-b); font-size: 1rem; color: var(--comp-text-2);
  line-height: 1.65; margin: 0; max-width: 580px;
}

.stage-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--comp-text-3);
  border: 1px solid var(--comp-border); border-radius: 5px;
  padding: 8px 16px; cursor: pointer;
  font-family: var(--font-h); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 22px;
  transition: color .2s, border-color .2s, background .2s;
}
.stage-back:hover { color: var(--comp-cyan); border-color: var(--comp-cyan);
  background: color-mix(in srgb, var(--comp-cyan) 8%, transparent); }

/* ─── Stage A : Char picker ────────────────────────────────────────────── */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  max-width: 1200px;
}
.char-loading {
  font-family: var(--font-m); font-size: .6rem; letter-spacing: .18em;
  color: var(--comp-text-3); padding: 40px; text-align: center;
}
.char-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(8,14,32,0.85), rgba(4,8,20,0.92));
  border: 1px solid var(--comp-border);
  border-radius: 8px;
  cursor: pointer; overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.char-card-img {
  width: 96px; height: 128px;
  background-color: rgba(2,6,16,0.7);
  background-size: cover; background-position: center;
  border: 1px solid var(--comp-border);
  border-radius: 5px;
  flex-shrink: 0;
}
.char-card-img.empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: 2rem; font-weight: 900;
  color: var(--comp-muted); opacity: .5;
}
.char-card-body { min-width: 0; }
.char-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--comp-cyan), transparent);
  opacity: .4; transition: opacity .3s;
}
.char-card:hover {
  border-color: var(--comp-cyan); transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--comp-cyan) 18%, transparent);
}
.char-card:hover::before { opacity: 1; }
.char-card-tag {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-m); font-size: 0.505rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .2em;
  text-transform: uppercase; color: var(--comp-cyan); opacity: .65;
}
.char-card.active .char-card-tag { color: #44ff88; opacity: 1; }
.char-card-name {
  font-family: var(--font-h); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .04em; color: #fff; margin-bottom: 4px;
}
.char-card-meta {
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .14em;
  color: var(--comp-text-3); text-transform: uppercase; margin-bottom: 14px;
}
.char-card-stats {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  font-family: var(--font-b); font-size: .82rem;
}
.char-card-stat { color: var(--comp-text-2); display: flex; align-items: center; gap: 4px; }
.char-card-stat strong { color: var(--comp-cyan); font-weight: 700; }

/* ─── Stage B : Polyèdre 3D rotatif (Three.js) ────────────────────── */
.polyhedron-wrap {
  position: relative;
  width: 100%; max-width: 720px;
  aspect-ratio: 1; margin: 20px auto;
  /* Halo radial subtil derrière le cristal */
  background: radial-gradient(ellipse at center, rgba(0,229,255,0.06) 0%, transparent 65%);
}
#polyhedron-canvas {
  display: block;
  width: 100%; height: 100%;
  cursor: grab;
}
#polyhedron-canvas:active { cursor: grabbing; }

/* Overlays HTML pour les labels de voies (positionnés via projection JS) */
.poly-labels {
  position: absolute; inset: 0;
  pointer-events: none;
}
.poly-label {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-h); font-weight: 800; font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  padding: 4px 9px;
  background: rgba(2,6,16,0.78);
  border: 1px solid var(--vc, var(--comp-cyan));
  border-radius: 3px;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--vc, var(--comp-cyan));
  box-shadow: 0 0 10px color-mix(in srgb, var(--vc, var(--comp-cyan)) 40%, transparent);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  cursor: pointer;
  /* Base 60%, modulée par la profondeur Z (--depth set par JS) */
  opacity: calc(var(--depth, 1) * 0.6);
  transition: opacity .15s;
}
.poly-label:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--vc, var(--comp-cyan)) 22%, rgba(2,6,16,0.78));
}

.polygon-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; max-width: 35%;
  text-align: center; pointer-events: none;
  z-index: 3;
}
.polygon-center-name {
  font-family: var(--font-h); font-weight: 900; font-size: 1.1rem;
  letter-spacing: .08em; color: #fff;
  text-shadow: 0 0 18px var(--comp-cyan); margin-bottom: 4px;
}
.polygon-center-sub {
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .2em;
  color: var(--comp-text-3); text-transform: uppercase;
}

/* Callout : info bulle reliée par un trait au sommet cliqué */
.polygon-callout {
  position: absolute;
  background: linear-gradient(180deg, rgba(8,14,32,0.96), rgba(4,8,20,0.98));
  border: 1.5px solid var(--vc, var(--comp-cyan));
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 240px; max-width: 320px;
  font-family: var(--font-b);
  box-shadow: 0 0 28px color-mix(in srgb, var(--vc, var(--comp-cyan)) 35%, transparent);
  opacity: 0; pointer-events: none;
  transform: scale(.9);
  transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
  z-index: 5;
}
.polygon-callout.shown { opacity: 1; pointer-events: all; transform: scale(1); }
.polygon-callout-name {
  font-family: var(--font-h); font-weight: 900; font-size: .95rem;
  letter-spacing: .08em;
  color: var(--vc, var(--comp-cyan));
  text-shadow: 0 0 14px var(--vc, var(--comp-cyan));
  margin-bottom: 4px;
}
.polygon-callout-focus {
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .18em;
  color: var(--comp-text-3); text-transform: uppercase; margin-bottom: 12px;
}
.polygon-callout-desc {
  font-family: var(--font-b); font-size: .9rem; color: var(--comp-text-2);
  line-height: 1.55; margin-bottom: 14px;
}
.polygon-callout-enter {
  display: block; width: 100%;
  font-family: var(--font-h); font-weight: 800; font-size: .65rem;
  letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--vc, var(--comp-cyan)) 30%, rgba(2,6,16,0.7)),
              color-mix(in srgb, var(--vc, var(--comp-cyan)) 18%, rgba(2,6,16,0.7)));
  color: #fff;
  border: 1px solid var(--vc, var(--comp-cyan));
  border-radius: 5px;
  padding: 11px 18px; cursor: pointer;
  transition: background .25s, box-shadow .25s, transform .25s;
}
.polygon-callout-enter:hover {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--vc, var(--comp-cyan)) 50%, rgba(2,6,16,0.7)),
              color-mix(in srgb, var(--vc, var(--comp-cyan)) 28%, rgba(2,6,16,0.7)));
  transform: translateY(-1px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--vc, var(--comp-cyan)) 50%, transparent);
}
/* Trait du callout vers le sommet */
.polygon-leader {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4;
}
.polygon-leader line {
  stroke: var(--vc, var(--comp-cyan)); stroke-width: 1.5; stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 6px var(--vc, var(--comp-cyan)));
  opacity: 0; transition: opacity .35s;
}
.polygon-leader.shown line { opacity: .9; }

/* ═══════════════════════════════════════════════════════════════════════
   STAGE C — Voie tree v2 (refonte complète : scatter pseudo-random, HUD
   glassmorphism, multi-select, palette d'états locked/unlocked, polish UI/UX
   premium). Repris du proto docs/proto/voie-v2/index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* Variables additionnelles pour la palette d'états du tree v2 */
:root {
  --vt-locked-red:    #6e1620;
  --vt-locked-stroke: #8b1f2c;
  --vt-unlocked-blue: #4DA3FF;
  --vt-gold:          #ffd60a;
  --vt-violet:        #9b59ff;
  --vt-jade:          #34d399;
  --vt-cyan:          #00e5ff;
}

/* Stage C → plein écran immersif sous la nav globale.
   Back + voie-header + voie-topbar flottent en overlay dans le viewport.
   Le viewport prend toute la hauteur disponible (100vh - comp-header). */

#stage-voie {
  padding: 0;
  overflow: hidden;
}
#stage-voie .voie-layout {
  height: calc(100vh - 52px);
  min-height: 0;
}

/* Overlay top-gauche : fond dégradé qui s'estompe vers le bas */
.voie-top-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 20px 14px;
  background: linear-gradient(180deg,
    rgba(4,8,20,0.93) 0%,
    rgba(4,8,20,0.80) 60%,
    transparent 100%);
  pointer-events: none;
}
.voie-top-overlay > * { pointer-events: auto; }

/* Bouton retour dans l'overlay : auto-aligné à gauche */
.voie-top-overlay .stage-back {
  align-self: flex-start;
  margin-bottom: 0;
}

/* Header voie dans l'overlay : compact */
.voie-top-overlay .voie-header {
  margin-bottom: 0;
}

/* Topbar dans l'overlay : flat (pas de border/fond propre, fond géré par l'overlay) */
.voie-top-overlay .voie-topbar {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.voie-top-overlay .voie-topbar::before { display: none; }

.voie-header {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px;
}
.voie-header-name {
  font-family: var(--font-h); font-weight: 900; font-size: 1.5rem;
  letter-spacing: .12em; color: var(--vc, var(--comp-cyan));
  text-shadow: 0 0 18px var(--vc, var(--comp-cyan));
}
.voie-header-focus {
  font-family: var(--font-m); font-size: .6rem; letter-spacing: .2em;
  color: var(--comp-text-3); text-transform: uppercase;
}

.voie-topbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(8,14,32,0.78), rgba(4,8,20,0.78));
  border: 1px solid var(--comp-border); border-radius: 8px;
  margin-bottom: 18px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.voie-topbar::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vc, var(--comp-cyan)), transparent);
  opacity: .45;
}
.vt-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: rgba(2,6,16,0.65);
  border: 1px solid color-mix(in srgb, var(--comp-cyan) 24%, transparent);
  border-radius: 999px;
  font-family: var(--font-m); font-size: 0.649rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--comp-text-2);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.05);
  transition: border-color .2s, box-shadow .2s;
}
.vt-pill:hover {
  border-color: color-mix(in srgb, var(--comp-cyan) 55%, transparent);
  box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.08), 0 0 12px rgba(0, 229, 255, 0.15);
}
.vt-pill .lbl { opacity: .65; }
.vt-pill .val { font-family: var(--font-h); font-weight: 800; font-size: .85rem;
                color: #fff; }
.vt-pill.cyan .val { color: var(--comp-cyan); text-shadow: 0 0 10px var(--comp-cyan); }
.vt-pill.gold .val { color: var(--comp-egg); text-shadow: 0 0 10px var(--comp-egg); }
.vt-pill.voie .val { color: var(--vc); text-shadow: 0 0 10px var(--vc); }

.voie-layout {
  /* Plus de side panel — viewport plein écran avec HUD overlay (style proto v2) */
  display: block;
  height: calc(100vh - 230px); min-height: 600px;
  position: relative;
}

.voie-viewport {
  /* Doit remplir tout .voie-layout — sans ça, le viewport s'effondre à la hauteur
     intrinsèque de son contenu SVG (~150px). */
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(15,25,55,0.5), rgba(2,6,16,0.96) 65%),
    /* Hex pattern repris exactement du proto skill-trees-hex/template.html */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' width='60' height='52'><path d='M30 0 L60 17 L60 52 L30 0 Z M30 0 L0 17 L0 52 L30 0 Z M0 17 L30 35 L60 17 M0 52 L30 35 L60 52' fill='none' stroke='%2300e5ff' stroke-opacity='0.05' stroke-width='1'/></svg>"),
    var(--comp-bg-2);
  background-size: auto, 60px 52px, auto;
  border: 1px solid var(--comp-border);
  border-radius: 8px;
  position: relative; overflow: hidden;
  cursor: grab; user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 0 60px rgba(0, 0, 0, 0.55);
}
/* Vignette + accent radial pour ambiance "dashboard premium".
   z-index 0 : reste sous la SVG (.voie-svg) et sous la minimap/zoom (z-index 10). */
.voie-viewport::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at top right, rgba(0,229,255,0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(77,163,255,0.04), transparent 60%);
}
.voie-svg { position: relative; z-index: 1; }
.voie-viewport:active { cursor: grabbing; }

.voie-svg { display: block; width: 100%; height: 100%; }

/* ── Minimap ── */
.voie-minimap {
  position: absolute; bottom: 12px; right: 12px; z-index: 10;
  border-radius: 5px; overflow: hidden;
  opacity: 0.78;
  transition: opacity .2s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.voie-minimap:hover { opacity: 1; }

/* ── Contrôles de zoom — glassmorphism premium ── */
.voie-zoom-ctrl {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  display: flex; flex-direction: column; gap: 5px;
  pointer-events: auto;
  padding: 5px;
  background: linear-gradient(180deg, rgba(8,14,32,0.65), rgba(4,8,20,0.65));
  border: 1px solid rgba(0,229,255,0.16);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 14px rgba(0,0,0,0.4);
}
.vzc-btn {
  width: 30px; height: 30px;
  background: rgba(2,6,16,0.55);
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: 5px;
  color: rgba(0,229,255,0.8);
  font-size: 16px; line-height: 1; text-align: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .12s;
}
.vzc-btn:hover {
  border-color: var(--comp-cyan);
  color: #fff;
  background: rgba(0,229,255,0.1);
  box-shadow:
    inset 0 0 10px rgba(0,229,255,0.18),
    0 0 12px rgba(0,229,255,0.3);
  text-shadow: 0 0 8px var(--comp-cyan);
}
.vzc-btn:active { transform: scale(0.93); }

/* ── HUD flottant dans le viewport (style proto · v6) ──────────────────── */
.voie-hud {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.voie-hud-top {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: auto;
}
.voie-hud-label {
  font-family: var(--font-m); font-size: 0.625rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .32em;
  text-transform: uppercase; color: var(--comp-text-3); opacity: .85;
}
.voie-hud-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 26px;
  background: linear-gradient(180deg, rgba(12,18,40,0.95), rgba(7,13,30,0.95));
  border-radius: 999px;
  border: 1px solid var(--vc, var(--comp-cyan));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 24px color-mix(in srgb, var(--vc, var(--comp-cyan)) 35%, transparent),
    0 0 1px var(--vc, var(--comp-cyan));
}
.voie-hud-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff,
              var(--vc, var(--comp-cyan)) 60%,
              color-mix(in srgb, var(--vc, var(--comp-cyan)) 50%, #000) 100%);
  box-shadow:
    0 0 10px var(--vc, var(--comp-cyan)),
    0 0 20px color-mix(in srgb, var(--vc, var(--comp-cyan)) 50%, transparent),
    inset 0 0 4px rgba(255,255,255,0.6);
}
.voie-hud-num {
  font-family: var(--font-h); font-weight: 800; font-size: 1.5rem;
  color: var(--vc, var(--comp-cyan));
  text-shadow: 0 0 12px var(--vc, var(--comp-cyan));
  letter-spacing: .04em;
}
.voie-hud-progress {
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .22em;
  text-transform: uppercase; color: var(--comp-text-3);
  opacity: .75;
}
.voie-hud-help {
  position: absolute; bottom: 14px; left: 16px;
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .18em;
  color: var(--comp-text-3); text-transform: uppercase;
  line-height: 1.9; opacity: .6;
  pointer-events: none;
}
.voie-hud-help strong {
  color: var(--vc, var(--comp-cyan));
  font-weight: 600;
}

/* ── Cases / nœuds — palette v2 : locked rouge sombre, unlocked bleu ────── */
.vc-node { cursor: pointer; transition: transform .22s cubic-bezier(.34, 1.4, .64, 1); }
.vc-node:hover .vnode-inner-marker { transform: scale(1.1); }

/* Cercle principal — fond gradient SVG, stroke selon état */
.vc-node-hex {
  fill: url(#vt-node-core);
  stroke: var(--vt-locked-stroke);
  stroke-opacity: 0.85;
  stroke-width: 1.4;
  transition: stroke .25s, stroke-width .25s, stroke-opacity .25s, filter .25s;
}
.vc-node.locked .vc-node-hex { fill: url(#vt-node-core-locked); }

/* Halo externe — filtre glow-soft (2 couches au lieu de 3 du glow-neon).
   Caché par défaut (les locked n'ont pas de halo path rendu). */
.vc-node-halo {
  opacity: 0;
  filter: url(#vt-glow-soft);
  pointer-events: none;
  transition: opacity .35s;
}
.vc-node.ready .vc-node-halo    { opacity: .18; }
.vc-node.unlocked .vc-node-halo {
  opacity: .25;
  animation: vcUnlockedPulse 3.6s ease-in-out infinite;
}
.vc-node.selected .vc-node-halo {
  opacity: .42;
  animation: vcSelectedBreath 2.4s ease-in-out infinite;
}
.vc-node.origin .vc-node-halo {
  opacity: .35;
  animation: vcUnlockedPulse 4s ease-in-out infinite;
}
@keyframes vcUnlockedPulse {
  0%,100% { opacity: .22; }
  50%     { opacity: .38; }
}
@keyframes vcSelectedBreath {
  0%,100% { opacity: .32; }
  50%     { opacity: .50; }
}

/* Anneau interne fin */
.vc-node-inner {
  fill: none;
  stroke-width: 0.7;
  stroke-opacity: 0.75;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

/* ─ États (v8 — perf-safe, glow néon via CSS blur sur le halo) ─ */

/* READY : adjacent à un débloqué, prêt à acheter — halo cyan pulsant */
/* READY — adjacent à un débloqué, prêt à acheter (cyan dashed animé) */
.vc-node.ready .vc-node-hex {
  stroke: var(--vt-cyan);
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
  stroke-opacity: .85;
  animation: vcReadyDash 3s linear infinite;
}
.vc-node.ready .vc-node-inner { opacity: .4; stroke-dasharray: 1.5 1.5; }
@keyframes vcReadyDash { to { stroke-dashoffset: -14; } }

/* UNLOCKED — couleur déterminée par le node-color CSS var (set par JS).
   Trait plus épais, halo pulsant lent, anneau interne visible. */
.vc-node.unlocked .vc-node-hex {
  stroke-width: 2.2;
  stroke-opacity: 1;
}
.vc-node.unlocked .vc-node-inner { opacity: .7; }

/* LOCKED — rouge sombre, discret, pas de halo. Pas de fill override (déjà appliqué). */
.vc-node.locked .vc-node-hex { stroke-opacity: 0.85; }
.vc-node[data-reachable="false"] { cursor: not-allowed; opacity: 0.65; }

/* SELECTED — anneau pointillé épais, halo plus large, anneau interne en rotation */
.vc-node.selected .vc-node-hex {
  stroke-width: 2.6;
  stroke-dasharray: 3 2.5;
  stroke-opacity: 1;
}
.vc-node.selected .vc-node-inner {
  opacity: 1; stroke-dasharray: 2 2;
  animation: vcInnerSpin 9s linear infinite;
}
@keyframes vcInnerSpin { to { stroke-dashoffset: -20; } }

/* ORIGIN — toujours allumé, anneau interne plus visible */
.vc-node.origin .vc-node-inner { opacity: 1; stroke-width: 1; }

/* Hover (sauf locked-unreachable) — boost halo + scale subtil */
.vc-node:not([data-reachable="false"]):hover .vc-node-halo { opacity: .55; }
.vc-node:not([data-reachable="false"]):hover .vc-node-inner { opacity: 1; }

/* Icône centrale — police serif comme dans le proto skill-trees-hex
   (rendu net des symboles géométriques unicode : ◆ ◉ ✦ ◈ ◐ etc.) */
.vc-node-icon {
  fill: #fff;
  font-family: 'Cambria Math', 'STIXGeneral', 'DejaVu Serif', serif;
  font-weight: 600; font-size: 15px;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  transition: fill .25s;
}
.vc-node.locked .vc-node-icon { opacity: .35; }

/* Label monospace sous le nœud (uniquement origin / palier / egg pour ne pas surcharger).
   Filtre drop-shadow pour bien le détacher des lignes/halos voisins. */
.vc-node-label {
  font-family: var(--font-m);
  font-size: 8px;font-family:'AquireLight','Rajdhani',sans-serif!important; font-weight: 600; letter-spacing: 1.6px;
  fill: var(--comp-text-2);
  text-anchor: middle; dominant-baseline: hanging; pointer-events: none;
  paint-order: stroke;
  stroke: rgba(2,6,16,0.85); stroke-width: 2.5px; stroke-linejoin: round;
  transition: fill .25s, opacity .25s;
}
.vc-node.locked .vc-node-label { fill: var(--vt-locked-red); opacity: .75; }
.vc-node.palier .vc-node-label { font-size: 10px;font-family:'AquireLight','Rajdhani',sans-serif!important; }

/* ── Couleurs par type/état (palette v2) — appliquées via JS sur l'élément
       avec la variable --node-color qui détermine stroke / halo fill / inner / icon.
   ─────────────────────────────────────────────────────────────────────── */
.vc-node .vc-node-halo  { fill:   var(--node-color, var(--vt-locked-red)); }
.vc-node .vc-node-inner { stroke: var(--node-color, var(--vt-locked-red)); }
.vc-node[data-type="origin"] .vc-node-icon { fill: var(--node-color, var(--vt-cyan)); }
.vc-node:not(.locked) .vc-node-hex { stroke: var(--node-color, var(--vt-cyan)); }
.vc-node:not(.locked) .vc-node-icon { fill: #fff; }

/* Tailles d'icône par type */
.vc-node.origin .vc-node-icon { font-size: 17px; }
.vc-node.palier .vc-node-icon { font-size: 18px; }
.vc-node.egg .vc-node-icon { font-size: 14px; }

/* Label sous le nœud — couleur selon type (palette v2) */
.vc-node.origin .vc-node-label { fill: var(--vt-cyan); }
.vc-node.palier:not(.locked) .vc-node-label { fill: var(--node-color); }
.vc-node.egg:not(.locked) .vc-node-label { fill: var(--vt-gold); }
.vc-node.navarites:not(.locked) .vc-node-label,
.vc-node.nav:not(.locked) .vc-node-label { fill: var(--vt-violet); }
.vc-node.jahartites:not(.locked) .vc-node-label { fill: var(--vt-jade); }

/* ── Edges — palette v2 : locked rouge sombre, ready cyan dashed, unlocked blanc ── */
.vc-edge {
  fill: none;
  stroke-linecap: round;
  transition: stroke .35s, opacity .35s, stroke-width .35s;
}
/* Verrouillé : rouge sombre ténu */
.vc-edge.locked  {
  stroke: var(--vt-locked-stroke);
  stroke-opacity: 0.35;
  stroke-width: 0.9;
}
/* Prêt : pointillés animés couleur voie */
.vc-edge.ready   {
  stroke: rgba(0, 229, 255, 0.55);
  stroke-width: 1.3;
  stroke-dasharray: 4 5;
  animation: vcEdgeReady 1.8s linear infinite;
}
@keyframes vcEdgeReady { to { stroke-dashoffset: -9; } }
/* Débloqué : trait blanc 1.2px + filtre SVG vt-glow-line (exact du proto) */
.vc-edge.unlocked {
  stroke: #ffffff;
  stroke-width: 1.2;
  opacity: .85;
  stroke-linecap: round;
  filter: url(#vt-glow-line);
  animation: vcEdgeUnlockedPulse 2.8s ease-in-out infinite;
}
@keyframes vcEdgeUnlockedPulse {
  0%, 100% { opacity: .85; stroke-width: 1.2; }
  50%     { opacity: 1; stroke-width: 1.6; }
}

/* ── Side panel supprimé — Stage C v2 fonctionne en HUD + tooltip overlay ── */

/* HUD top center dans le viewport — glassmorphism premium (repris du proto v2) */
.voie-hud {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.voie-hud-top {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 28px 14px;
  background: linear-gradient(180deg, rgba(8,12,28,0.55), rgba(4,8,20,0.35));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 24px rgba(0,0,0,0.4);
}
.voie-hud-top::before {
  content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vt-cyan), transparent);
  opacity: .6;
}
.voie-hud-label {
  font-family: var(--font-m); font-size: 0.577rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .32em;
  color: var(--comp-text-3); text-transform: uppercase; opacity: .85;
}
.voie-hud-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 20px;
  background: linear-gradient(180deg, rgba(2,7,19,0.85), rgba(2,7,19,0.65));
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 12px rgba(0,229,255,0.08),
    0 0 18px rgba(0,229,255,0.15);
  margin-top: 2px;
}
.voie-hud-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--vt-cyan) 55%, #007a99);
  box-shadow: 0 0 12px var(--vt-cyan), 0 0 4px #fff, inset 0 0 3px rgba(255,255,255,0.6);
  animation: vtDotPulse 2.4s ease-in-out infinite;
}
@keyframes vtDotPulse {
  0%,100% { box-shadow: 0 0 8px var(--vt-cyan), 0 0 3px #fff, inset 0 0 3px rgba(255,255,255,0.6); }
  50%     { box-shadow: 0 0 16px var(--vt-cyan), 0 0 6px #fff, inset 0 0 4px rgba(255,255,255,0.8); }
}
.voie-hud-num {
  font-family: var(--font-h); font-weight: 800; font-size: 1.35rem;
  color: #fff; text-shadow: 0 0 14px rgba(0,229,255,0.5);
  font-variant-numeric: tabular-nums;
}
.voie-hud-pending {
  font-family: var(--font-h); font-weight: 700; font-size: .95rem;
  color: #FF4757; text-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  transition: opacity .3s, transform .3s;
}
.voie-hud-pending.zero { opacity: 0; transform: translateX(-6px); }
.voie-hud-progress {
  font-family: var(--font-m); font-size: 0.577rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .22em;
  text-transform: uppercase; color: var(--comp-text-3); opacity: .7;
}

/* Help text bottom-left (overlay sur viewport) */
.voie-hud-help {
  position: absolute; bottom: 14px; left: 16px;
  font-family: var(--font-m); font-size: 0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .18em;
  color: var(--comp-text-3); text-transform: uppercase;
  line-height: 1.9; opacity: .55;
  pointer-events: none;
}
.voie-hud-help strong { color: var(--vt-cyan); font-weight: 600; }

/* Boutons d'action Apply / Unselect (overlay sur viewport, bas-centre) */
.voie-actions {
  position: absolute; bottom: 22px; left: 0; right: 0;
  z-index: 6;
  display: flex; justify-content: center; gap: 14px;
  pointer-events: none;
}
.va-btn {
  pointer-events: auto;
  cursor: pointer; user-select: none;
  padding: 12px 24px;
  background: linear-gradient(180deg, rgba(8,12,28,0.65), rgba(4,8,20,0.45));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 150px;
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1),
              border-color .22s, box-shadow .25s;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 18px rgba(0,0,0,0.45);
}
.va-btn::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vt-cyan), transparent);
  opacity: .45; transition: opacity .22s;
}
.va-btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% -20%, rgba(0,229,255,0.12), transparent 65%);
  opacity: 0; transition: opacity .25s;
}
.va-btn:hover {
  border-color: var(--vt-cyan);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 28px rgba(0,229,255,0.32),
    0 8px 22px rgba(0,0,0,0.5);
}
.va-btn:hover::before, .va-btn:hover::after { opacity: 1; }
.va-btn:active { transform: translateY(-1px) scale(0.98); }
.va-btn .key {
  font-family: var(--font-h); font-weight: 800; font-size: .7rem;
  letter-spacing: .18em; color: #fff;
  text-shadow: 0 0 6px rgba(0,229,255,0.25);
}
.va-btn .lbl {
  font-family: var(--font-m); font-size: 0.577rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .22em;
  color: var(--comp-text-3); text-transform: uppercase;
}
.va-btn.apply.has-pending {
  border-color: var(--vt-cyan);
  background: linear-gradient(180deg, rgba(0,229,255,0.22), rgba(7,13,30,0.65));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 32px rgba(0,229,255,0.45),
    0 8px 22px rgba(0,0,0,0.5);
  animation: vtApplyPulse 2.2s ease-in-out infinite;
}
.va-btn.apply.has-pending .key {
  color: #fff; text-shadow: 0 0 12px var(--vt-cyan), 0 0 4px #fff;
}
.va-btn.apply.has-pending::after { opacity: 1; }
@keyframes vtApplyPulse {
  0%,100% { box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 24px rgba(0,229,255,0.4),
    0 8px 22px rgba(0,0,0,0.5); }
  50%     { box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 38px rgba(0,229,255,0.6),
    0 8px 22px rgba(0,0,0,0.5); }
}
.va-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.va-btn.disabled:hover {
  transform: none; border-color: rgba(0,229,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 18px rgba(0,0,0,0.45);
}
.va-btn.disabled:hover::before { opacity: .45; }
.va-btn.disabled:hover::after { opacity: 0; }

/* Scan line overlay — touche "interface holographique" */
.voie-scan-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(180deg,
    rgba(0, 229, 255, 0.008) 0,
    rgba(0, 229, 255, 0.008) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode: screen;
}
.voie-scan-sweep {
  position: absolute; left: 0; right: 0; height: 120px;
  pointer-events: none; z-index: 4;
  background: linear-gradient(180deg, transparent 0%, rgba(0,229,255,0.022) 50%, transparent 100%);
  animation: vtScanSweep 9s linear infinite;
}
@keyframes vtScanSweep {
  0%   { top: -120px; }
  100% { top: 100%; }
}

/* Tooltip flottant (hover sur une case) */
.voie-tooltip {
  position: fixed; z-index: 30;
  min-width: 210px; max-width: 300px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(12,18,40,0.97), rgba(7,13,30,0.97));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,229,255,0.4);
  border-radius: 5px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(0,229,255,0.12);
  pointer-events: none; opacity: 0;
  transition: opacity .15s, transform .15s;
  transform: translateY(4px);
}
.voie-tooltip.show { opacity: 1; transform: translateY(0); }
.voie-tooltip::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vt-cyan), transparent);
  opacity: .6;
}
.vt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vt-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,0.2), rgba(2,7,19,0.9) 70%);
  border: 1px solid rgba(0,229,255,0.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
  font-family: 'Cambria Math', 'STIXGeneral', serif;
}
.vt-title {
  font-family: var(--font-h); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em;
  color: #fff; text-transform: uppercase;
}
.vt-effects { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.vt-effect {
  display: flex; justify-content: space-between;
  font-family: var(--font-m); font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .12em;
  color: var(--comp-text-2);
}
.vt-effect .v { color: #fff; font-weight: 700; }
.vt-cost {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(0,229,255,0.18);
  font-family: var(--font-m); font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .15em;
  text-transform: uppercase; color: var(--vt-cyan);
}
.vt-cost.unaffordable { color: #FF4757; }
.vt-status {
  margin-top: 4px; font-family: var(--font-m);
  font-size: 0.649rem;font-family:'AquireLight','Rajdhani',sans-serif!important; letter-spacing: .2em; font-weight: 600;
}

/* ─── Toast ─── */
.comp-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  background: rgba(8, 14, 32, 0.96);
  border: 1px solid var(--comp-cyan);
  border-radius: 6px;
  font-family: var(--font-h); font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  box-shadow: 0 0 22px color-mix(in srgb, var(--comp-cyan) 35%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 9999;
}
.comp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.comp-toast.error { border-color: #FF4757; box-shadow: 0 0 22px rgba(255,71,87,0.4); }
.comp-toast.success { border-color: #44ff88; box-shadow: 0 0 22px rgba(68,255,136,0.4); }

@media (max-width: 700px) {
  .comp-stage { padding: 24px 18px 50px; }
  .stage-title { font-size: 1.3rem; }
  .polygon-wrap { aspect-ratio: 1; max-width: 100%; }
  .voie-layout { height: auto; }
}

/* ═════ Refonte mobile chirurgicale (Phase D) ══════════════════════════
   Causes du "rien d'accessible" sur mobile :
   1. Le polyhèdre 3D Three.js exigeait une viewport large + drag-rotate
      souris (mal mappé en touch). On contraint sa hauteur en mobile.
   2. Stage-voie : la viewport SVG était trop large pour le scroll.
   3. Char-grid : cards trop grandes, 1 par ligne, padding ample.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header compact */
  .comp-header {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .comp-title {
    font-size: 1.1rem !important;
    letter-spacing: 0.18em;
  }
  .comp-back, .comp-logout {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
  }

  /* Char picker — grille adaptative (auto-fill) */
  .char-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .char-card {
    min-height: auto !important;
    padding: 14px 16px !important;
  }

  /* Stage polygon — polyhèdre 3D : hauteur contrainte, scaling fit */
  .polyhedron-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 60vh !important;
    max-width: calc(100vw - 36px) !important;
    margin: 0 auto !important;
  }
  #polyhedron-canvas {
    width: 100% !important;
    height: 100% !important;
    touch-action: none; /* le drag rotate intercepte les touches */
  }
  .poly-labels span,
  .poly-labels .vertex-label {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
  .polygon-callout {
    font-size: 0.78rem !important;
    max-width: 80vw !important;
  }

  /* Stage voie — SVG tree scrollable en pan touch */
  .voie-layout {
    height: auto !important;
    min-height: 60vh;
  }
  .voie-viewport {
    width: 100% !important;
    height: auto !important;
    min-height: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .voie-svg {
    /* Le SVG peut être plus large que la viewport — on permet le scroll */
    min-width: 100%;
    height: auto;
  }
  .voie-topbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px !important;
  }
  .voie-hud, .voie-actions {
    /* Reposiotionner les overlays flottants au bas du viewport */
    position: sticky !important;
    bottom: 8px;
    z-index: 50;
  }

  /* Tooltip — full-width sur petit écran */
  .voie-tooltip {
    max-width: 90vw !important;
    font-size: 0.78rem !important;
  }

  /* Login gate — boîte raisonnable */
  .login-box {
    padding: 22px 18px !important;
    max-width: 92vw !important;
  }
  .login-logo { font-size: 1.6rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   COMPÉTENCES — MOBILE TOUCHES SUPPLÉMENTAIRES  ≤ 768px
   (étend le mobile CSS existant dans ce fichier)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Boutons back / logout */
  .comp-back,
  .comp-logout {
    min-height: 44px;
    display:    inline-flex;
    align-items: center;
    padding:    10px 16px;
    font-size:  .78rem;
  }

  /* Stage titre */
  .stage-title { font-size: 1.2rem; letter-spacing: .12em; }

  /* Callout polygone */
  .polygon-callout { font-size: .82rem; }
}

@media (max-width: 480px) {
  /* Polyèdre 3D — viewport contraint */
  .polyhedron-wrap,
  .polygon-wrap {
    max-width: calc(100vw - 24px);
    margin: 0 auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .comp-back:active,
  .comp-logout:active  { opacity: .8; }
  .char-card:active    { transform: none; border-color: rgba(77,163,255,.25); }
}