/**
 * ============================================================================
 *  main.css  —  THÈME "LOGICIEL MÉDICAL PRO" (sombre, minimaliste)
 * ============================================================================
 *  Organisation :
 *    1. Variables de design (palette, espacements, typographie)
 *    2. Reset & base
 *    3. Canvas / layout général
 *    4. Barre d'outils
 *    5. Panneaux latéraux (commun)
 *    6. Arbre anatomique (panneau gauche)
 *    7. Inspecteur clinique (panneau droit)
 *    8. Overlay de chargement
 *    9. Scrollbars & responsive
 * ============================================================================
 */

/* ───────────────────────── 1. VARIABLES DE DESIGN ───────────────────────── */
:root {
  /* Palette sombre clinique */
  --bg-0: #070a0f;          /* fond le plus profond */
  --bg-1: #0a0e14;          /* fond scène */
  --bg-2: #11161f;          /* panneaux */
  --bg-3: #161d28;          /* éléments surélevés */
  --bg-hover: #1c2533;

  --border: #232c3a;
  --border-soft: #1a2230;

  --text-0: #e6edf3;        /* texte principal */
  --text-1: #aab4c0;        /* texte secondaire */
  --text-2: #6b7686;        /* texte atténué */

  --accent: #2dd4bf;        /* teal médical (couleur d'action) */
  --accent-dim: #1f9d8e;
  --accent-glow: rgba(45, 212, 191, 0.15);
  --danger: #f87171;
  --warn: #fbbf24;

  /* Typographie */
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  /* Métriques */
  --panel-w: 320px;
  --toolbar-h: 52px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ───────────────────────── 2. RESET & BASE ───────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-1);
  color: var(--text-0);
  font-family: var(--font-ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* L'attribut HTML [hidden] doit TOUJOURS l'emporter, même quand une règle
   author force display:grid/flex (sinon le UA `display:none` est écrasé). */
[hidden] {
  display: none !important;
}

/* ───────────────────────── 3. CANVAS / LAYOUT ───────────────────────── */
#viewport-container {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#viewport {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  /* Léger dégradé radial pour donner de la profondeur au "studio" 3D */
  background: radial-gradient(circle at 50% 35%, #131a26 0%, var(--bg-1) 60%, var(--bg-0) 100%);
}

/* ───────────────────────── 4. BARRE D'OUTILS ───────────────────────── */
#toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--toolbar-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.92), rgba(10, 14, 20, 0.72));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.toolbar-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.brand-mark {
  color: var(--accent);
  font-size: 20px;
  align-self: center;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.brand-logo {
  width: 28px;
  height: 28px;
  align-self: center;
  display: block;
  filter: drop-shadow(0 0 7px var(--accent-glow));
}
.brand-text {
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 300;
}
.brand-text strong {
  font-weight: 700;
  color: var(--accent);
}
.brand-sub {
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.18s ease;
}
.tool-btn:hover {
  color: var(--text-0);
  border-color: var(--accent-dim);
  background: var(--bg-hover);
}
.toolbar-stat {
  margin-left: 6px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: var(--radius-sm);
}

/* Lien vers le site de l'auteur (services / automatisations) */
.toolbar-link {
  margin-left: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.16s ease;
}
.toolbar-link:hover {
  color: #04201c;
  background: var(--accent);
  border-color: var(--accent);
}

/* ───────────────────────── 5. PANNEAUX (COMMUN) ───────────────────────── */
.panel {
  position: fixed;
  top: calc(var(--toolbar-h) + 12px);
  bottom: 12px;
  width: var(--panel-w);
  z-index: 15;
  display: flex;
  flex-direction: column;
  background: rgba(17, 22, 31, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#panel-left { left: 12px; }
#inspector { right: 12px; }

/* ── Boutons de masquage des panneaux (desktop) : libèrent la vue 3D ──────────
   Petits onglets verticaux collés au bord intérieur de chaque panneau. Au clic,
   le panneau glisse hors écran et le bouton va se coller au bord. */
.panel-toggle {
  position: fixed;
  top: 50%;
  z-index: 16;
  width: 20px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-1);
  background: rgba(17, 22, 31, 0.92);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1), right 0.3s cubic-bezier(0.4,0,0.2,1),
              background 0.16s, color 0.16s;
}
.panel-toggle:hover { color: var(--text-0); background: var(--bg-hover); border-color: var(--accent-dim); }
.panel-toggle--left  { left:  calc(12px + var(--panel-w)); border-radius: 0 8px 8px 0; border-left: none; }
.panel-toggle--right { right: calc(12px + var(--panel-w)); border-radius: 8px 0 0 8px; border-right: none; }

/* États repliés : panneau hors écran + bouton au bord */
body.collapse-left  #panel-left              { transform: translateX(calc(-100% - 16px)); }
body.collapse-left  .panel-toggle--left      { left: 0; }
body.collapse-right #inspector               { transform: translateX(calc(100% + 16px)); }
body.collapse-right .panel-toggle--right     { right: 0; }

.panel-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.panel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-1);
}
.panel-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-2);
}

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* ───────────────────────── 6. ARBRE ANATOMIQUE ───────────────────────── */
.tree-node { --accent: var(--accent); }

.tree-row {
  display: grid;
  grid-template-columns: 18px 22px 1fr auto 52px;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
.tree-row:hover { background: var(--bg-hover); }
.tree-row.is-selected {
  background: var(--accent-glow);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Compteur de structures (groupes) */
.tree-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-2);
  padding: 1px 5px;
  background: var(--bg-0);
  border-radius: 8px;
  min-width: 0;
}

/* Indentation par niveau (l'arbre peut descendre profond avec Z-Anatomy) */
.tree-level-1 > .tree-row { padding-left: 14px; }
.tree-level-2 > .tree-row { padding-left: 22px; }
.tree-level-3 > .tree-row { padding-left: 30px; }
.tree-level-4 > .tree-row { padding-left: 38px; }

.tree-caret {
  width: 18px;
  font-size: 10px;
  color: var(--text-2);
  text-align: center;
  transition: color 0.12s;
}
.tree-caret:hover { color: var(--text-0); }
.tree-caret.is-leaf { visibility: hidden; }

.tree-eye {
  width: 22px;
  font-size: 12px;
  opacity: 0.85;
  filter: grayscale(0.2);
  transition: opacity 0.12s;
}
.tree-eye.is-off { opacity: 0.35; }
.tree-eye:hover { opacity: 1; }

.tree-label {
  font-size: 12.5px;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.tree-level-0 > .tree-row .tree-label {
  font-weight: 600;
  color: var(--text-0);
}
/* Les feuilles (meshes cliniques), quel que soit leur niveau de profondeur */
.tree-row.is-mesh .tree-label {
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* Bord gauche coloré : système racine ET buckets de classification */
.tree-level-0 > .tree-row,
.tree-row.tree-accented {
  border-left: 2px solid var(--accent);
}

/* Slider d'opacité compact */
.tree-opacity {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3);
  outline: none;
  cursor: pointer;
}
.tree-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-1);
  box-shadow: 0 0 4px var(--accent-glow);
}
.tree-opacity::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid var(--bg-1);
  border-radius: 50%;
  background: var(--accent);
}

.tree-children { /* repliable */ }

/* Champ de recherche */
.tree-search {
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--text-0);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease;
}
.tree-search::placeholder { color: var(--text-2); }
.tree-search:focus { border-color: var(--accent-dim); }

/* Liste de résultats de recherche (plate) */
.tree-results { padding: 4px; }
.tree-result-count {
  font-size: 10.5px;
  color: var(--text-2);
  padding: 4px 8px 8px;
  font-family: var(--font-mono);
}
.tree-result {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
.tree-result:hover { background: var(--bg-hover); }
.tree-result-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-0);
}
.tree-result-fr { font-size: 11px; color: var(--accent); }
.tree-noresult {
  padding: 16px;
  font-size: 12.5px;
  color: var(--text-2);
  text-align: center;
}

/* ───────────────────────── 7. INSPECTEUR CLINIQUE ───────────────────────── */
/* Animation d'apparition du panneau quand une fiche s'affiche */
#inspector { transform: translateX(0); }
#inspector.is-active .insp-header,
#inspector.is-active .insp-field,
#inspector.is-active .insp-empty-note {
  animation: insp-rise 0.4s ease both;
}
@keyframes insp-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.insp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  text-align: center;
  color: var(--text-2);
}
.insp-placeholder-icon { font-size: 40px; margin-bottom: 14px; opacity: 0.5; }

.insp-header {
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.insp-system-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.insp-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-0);
}
.insp-latin {
  font-style: italic;
  color: var(--text-1);
  font-size: 13px;
  margin-top: 2px;
}
.insp-meshname {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--bg-0);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  word-break: break-all;
}

.insp-field { padding: 0 6px 14px; }
.insp-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.insp-field-value {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-1);
}

/* Fiche "sans données" : message propre, centré, plus de dump de code brut */
.insp-empty-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  color: var(--text-2);
  line-height: 1.55;
}
.insp-empty-note code { color: var(--accent); font-family: var(--font-mono); }
.insp-empty-icon { font-size: 30px; opacity: 0.5; margin-bottom: 10px; }
.insp-empty-title { font-size: 13.5px; color: var(--text-1); margin-bottom: 8px; }
.insp-empty-hint { font-size: 12px; }
.insp-copy-btn {
  margin-top: 14px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}
.insp-copy-btn:hover { color: var(--text-0); border-color: var(--accent-dim); background: var(--bg-hover); }

/* Bouton "N masquée(s)" dans la barre d'outils (état d'alerte) */
.tool-btn--warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-3));
}
.tool-btn--warn:hover {
  color: #fff;
  background: color-mix(in srgb, var(--warn) 30%, var(--bg-3));
  border-color: var(--warn);
}

/* État "Afficher" du bouton bascule de l'inspecteur (structure masquée) */
.insp-btn--active {
  background: var(--warn);
  color: #2a1e02;
  border-color: var(--warn);
  font-weight: 600;
}
.insp-btn--active:hover { background: #fcd34d; }

/* Zone de notes personnelles (révision) */
.insp-notes {
  padding: 4px 6px 14px;
  margin-top: 6px;
  border-top: 1px solid var(--border-soft);
}
.insp-notes-area {
  width: 100%;
  min-height: 90px;
  margin-top: 8px;
  padding: 9px 10px;
  resize: vertical;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-0);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease;
}
.insp-notes-area::placeholder { color: var(--text-2); }
.insp-notes-area:focus { border-color: var(--accent-dim); }
.insp-notes-status {
  display: block;
  margin-top: 5px;
  min-height: 14px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent);
}

/* Boutons d'action de l'inspecteur */
.insp-actions {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
}
.insp-btn {
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-0);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.16s ease;
}
.insp-btn:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
.insp-btn--primary {
  background: var(--accent);
  color: #04201c;
  font-weight: 600;
  border-color: var(--accent);
}
.insp-btn--primary:hover { background: #3fe8d3; }
.insp-btn--ghost {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--text-2);
}
.insp-btn--ghost:hover { color: var(--text-0); }

/* ───────────────────────── 8. OVERLAY DE CHARGEMENT ───────────────────────── */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #0d1320 0%, var(--bg-0) 100%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-card {
  width: min(420px, 86vw);
  text-align: center;
  padding: 30px;
}
.loader-pulse {
  display: inline-block;
  line-height: 0;
  animation: loader-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px var(--accent-glow));
}
.loader-pulse img { width: 64px; height: 64px; display: block; }
@keyframes loader-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.loader-title {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-0);
  letter-spacing: 0.5px;
}
.loader-tagline {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--accent);
  letter-spacing: 0.3px;
}
.loader-system {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  min-height: 18px;
  font-family: var(--font-mono);
}
.loader-bar-track {
  margin-top: 20px;
  height: 5px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--accent-glow);
}
.loader-percent-row {
  margin-top: 10px;
  font-family: var(--font-mono);
}
.loader-percent { font-size: 13px; color: var(--accent); }
.loader-errors {
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--warn);
}
/* Wordmark de la marque sur le splash + crédit licence des modèles */
.loader-title { letter-spacing: 6px; font-weight: 300; }
.loader-credit {
  margin-top: 22px;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--text-2);
}
.loader-credit strong { color: var(--text-1); font-weight: 600; }
.loader-author {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-2);
}
.loader-author a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.loader-author a:hover { text-decoration: underline; }

/* ───────────────────────── 9. SCROLLBARS & RESPONSIVE ───────────────────────── */
.panel-scroll::-webkit-scrollbar { width: 8px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* Le canvas capte tous les gestes tactiles (pinch/rotation → OrbitControls),
   sans laisser le navigateur scroller/zoomer la page. */
#viewport { touch-action: none; }

/* Barre d'onglets mobile : masquée sur desktop */
#mobile-tabs { display: none; }

/* Écrans intermédiaires (tablette paysage) : on rétrécit un peu les panneaux */
@media (min-width: 769px) and (max-width: 980px) {
  :root { --panel-w: 264px; }
}

/* ───────── MOBILE (≤768px) : panneaux en BOTTOM SHEETS + onglets bas ───────── */
@media (max-width: 768px) {
  :root { --mtab-h: 56px; }

  /* ── Barre d'outils mobile : boutons COMPACTS en ICÔNE SEULE (anti-débordement) ──
     « N masquées » + « Réinitialiser » débordaient de l'écran. On masque les
     libellés texte (on garde l'emoji + le compteur), le sous-titre, le compteur
     de structures et le nom de marque (le logo suffit) → tout rentre. */
  #toolbar { padding: 0 10px; }
  .brand-sub,
  .brand-text,
  .toolbar-stat { display: none; }
  .tb-label { display: none; }                 /* boutons en icône seule */
  /* Boutons COMPACTS : beaucoup d'icônes (recadrer, masquées, reset, quiz, premium,
     lien) tiennent sur un écran étroit sans toucher le logo. */
  .tool-btn { padding: 5px 7px; font-size: 15.5px; line-height: 1; }
  .tb-count { font-size: 12px; }               /* le compteur « N » reste lisible, pas géant */
  .toolbar-actions { gap: 3px; }
  /* Lien auteur compact (icône seule) sur mobile pour ne pas déborder. */
  .toolbar-link { margin-left: 2px; padding: 5px 6px; font-size: 13px; }
  .toolbar-link .link-label { display: none; }
  /* Un peu d'air entre le logo et les boutons. */
  .toolbar-brand { margin-right: 6px; }

  /* Pas de boutons de masquage des panneaux sur mobile (les onglets bas gèrent ça). */
  .panel-toggle { display: none; }

  /* Panneaux → feuilles inférieures coulissantes (pleine largeur), au-dessus
     de la barre d'onglets. Masquées par défaut (translateY), révélées par l'onglet. */
  .panel {
    top: auto;
    left: 0;
    right: 0;
    /* ── ÎLOT FLOTTANT ─────────────────────────────────────────────────────
       Carte CENTRÉE, ni collée à droite ni en pleine largeur : du vide (donc le
       modèle 3D) reste visible à GAUCHE et à DROITE de la boîte.
       width + margin auto = centrage classique d'un élément fixed. */
    width: calc(100% - 32px);
    margin: 0 auto;
    height: 56vh;
    /* Respiration au-dessus de la barre d'onglets → 3D visible aussi en bas. */
    bottom: calc(var(--mtab-h) + env(safe-area-inset-bottom, 0px) + 16px);
    border-radius: 16px;            /* carte : tous les coins arrondis */
    border: 1px solid var(--border);
    /* Verre dépoli : on voit le modèle 3D « passer » derrière la carte. */
    background: rgba(15, 20, 28, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* iOS / Safari */
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  }
  /* État MASQUÉ par défaut, posé par ID pour battre la règle desktop
     `#inspector { transform: translateX(0) }` (même spécificité, mais postérieure). */
  /* On RÉINITIALISE left/right au niveau ID (sinon les règles desktop
     `#panel-left{left:12px}` / `#inspector{right:12px}` battent `.panel` par
     spécificité et décentrent l'îlot). margin:auto peut alors centrer. */
  #panel-left,
  #inspector { left: 0; right: 0; transform: translateY(115%); }
  /* L'onglet actif révèle son panneau (spécificité attribut+id → l'emporte). */
  body[data-mobile-panel="tree"] #panel-left { transform: translateY(0); }
  body[data-mobile-panel="inspector"] #inspector { transform: translateY(0); }

  /* Barre d'onglets fixée en bas (gère l'encoche via safe-area) */
  #mobile-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: calc(var(--mtab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10, 14, 20, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .mtab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-2);
    border-right: 1px solid var(--border-soft);
    transition: color 0.15s, background 0.15s;
  }
  .mtab:last-child { border-right: none; }
  .mtab.is-active { color: var(--accent); background: var(--accent-glow); }

  /* ── SLIDERS D'OPACITÉ : entièrement visibles & manipulables 0→100% au doigt ──
     BUG corrigé : la piste à largeur FIXE (64px) débordait de sa colonne de
     grille (52px) ; le bord droit — donc le curseur à 100% — était rogné par
     l'overflow:hidden du panneau, rendant impossible le retour à pleine opacité.
     FIX : (1) colonne du slider élargie, (2) piste en largeur FLUIDE (100% de sa
     colonne → ne déborde plus), (3) marge de sécurité à droite du panneau pour que
     le curseur à 100% ne touche jamais le bord, (4) curseur (thumb) agrandi pour
     le tactile. */
  .tree-row {
    grid-template-columns: 22px 30px 1fr auto 84px;
    gap: 6px;
  }
  .tree-opacity {
    width: 100%;     /* épouse sa colonne au lieu d'un fixe qui débordait/rognait */
    height: 6px;
  }
  .tree-opacity::-webkit-slider-thumb { width: 18px; height: 18px; }
  .tree-opacity::-moz-range-thumb     { width: 18px; height: 18px; }
  /* Le thumb à 100% n'est jamais collé/coupé par le bord droit de l'écran. */
  #panel-left .panel-scroll { padding-right: 14px; }

  /* ── Noms de sections COMPLETS sur mobile ────────────────────────────────────
     Pas de survol tactile → on remplace la troncature « … » par un retour à la
     ligne : le nom entier (« Système musculaire », « Système nerveux & organes
     des sens »…) s'affiche sur plusieurs lignes. */
  .tree-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
}

/* ───────────────────────── 10. FREEMIUM / PAYWALL ─────────────────────────
   Verrouillage Premium : dossiers cadenassés dans l'arbre, résultats de
   recherche verrouillés, bouton Premium (toolbar) et pop-up d'achat. */

/* Dossier-système verrouillé dans l'arbre : même grille que .tree-row
   (caret · 🔒 · libellé · compteur · badge), ligne entière cliquable. */
.tree-row--locked { cursor: pointer; }
.tree-row--locked .tree-label { color: var(--text-2); }
.tree-row--locked:hover .tree-label { color: var(--text-1); }

/* Dossier « à charger à la demande » (système gratuit pas encore chargé). */
.tree-row--lazy { cursor: pointer; }
.tree-row--lazy .tree-label { color: var(--text-1); }
.tree-row--lazy:hover .tree-label { color: var(--text-0); }
.tree-lock {
  font-size: 11px;
  text-align: center;
  filter: grayscale(0.3);
}
.tree-premium-pill {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn);
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  white-space: nowrap;
}

/* Résultat de recherche verrouillé : visible (téaser) mais grisé + cadenas. */
.tree-result.is-locked .tree-result-name { color: var(--text-2); }
.tree-result.is-locked .tree-result-fr { color: var(--text-2); }
.tree-result-lock { margin-right: 5px; font-size: 10px; }

/* Bouton Premium de la barre d'outils : accent doré discret. */
.tool-btn--premium {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--bg-3));
}
.tool-btn--premium:hover {
  color: #fff;
  background: color-mix(in srgb, var(--warn) 28%, var(--bg-3));
  border-color: var(--warn);
}

/* ── Pop-up d'achat ────────────────────────────────────────────────────── */
.paywall-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200; /* au-dessus de tout (overlay de chargement = 100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.paywall-backdrop.is-open { opacity: 1; }

.paywall-card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px 26px 20px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 60px rgba(45, 212, 191, 0.07);
  text-align: center;
  transform: translateY(8px);
  transition: transform 0.22s ease;
}
.paywall-backdrop.is-open .paywall-card { transform: translateY(0); }

.paywall-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 6px 9px;
  font-size: 13px;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.paywall-close:hover { color: var(--text-0); background: var(--bg-hover); }

.paywall-icon { font-size: 34px; margin-bottom: 6px; }
.paywall-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.paywall-lead {
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 14px;
}

.paywall-perks {
  list-style: none;
  text-align: left;
  margin: 0 auto 18px;
  display: grid;
  gap: 7px;
}
.paywall-perks li {
  font-size: 12.5px;
  color: var(--text-1);
  padding: 7px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.paywall-buy {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #04201c;
  background: var(--accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.paywall-buy:hover { background: #3fe8d3; }
.paywall-buy:active { transform: scale(0.985); }

.paywall-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--text-2);
  font-size: 11.5px;
}
.paywall-divider::before,
.paywall-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.paywall-form {
  display: flex;
  gap: 8px;
}
.paywall-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-0);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s;
}
.paywall-input:focus { border-color: var(--accent-dim); }
.paywall-input.is-error {
  border-color: var(--danger);
  animation: paywall-shake 0.3s ease;
}
@keyframes paywall-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.paywall-unlock {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-0);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  white-space: nowrap;
}
.paywall-unlock:hover { border-color: var(--accent-dim); background: var(--bg-hover); }
.paywall-unlock:disabled { opacity: 0.6; cursor: wait; }

.paywall-error {
  margin-top: 10px;
  font-size: 12px;
  color: var(--danger);
}
.paywall-error.is-success { color: var(--accent); font-weight: 600; }

.paywall-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-2);
}

/* ───────────────────────── 11. PANNEAU « MES NOTES » ─────────────────────────
   Pied du panneau gauche : liste repliable des structures annotées
   + export/import JSON. */
.notes-panel {
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
  background: rgba(10, 14, 20, 0.5);
}

.notes-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.notes-head:hover { background: var(--bg-hover); }

.notes-caret {
  width: 12px;
  font-size: 10px;
  color: var(--text-2);
}
.notes-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.notes-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-2);
  padding: 1px 6px;
  background: var(--bg-0);
  border-radius: 8px;
}
.notes-tools {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.notes-tool {
  padding: 3px 7px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.15s;
}
.notes-tool:hover { background: var(--bg-3); border-color: var(--border); }
.notes-tool:disabled { opacity: 0.4; cursor: default; }

.notes-body {
  max-height: 32vh;          /* la liste ne dévore jamais l'arbre au-dessus */
  overflow-y: auto;
  padding: 2px 6px 8px;
}

.notes-empty {
  padding: 8px 8px 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-2);
}

.notes-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
.notes-item:hover { background: var(--bg-hover); }
.notes-item-name {
  font-size: 12px;
  color: var(--text-0);
}
.notes-item-snippet {
  font-size: 10.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Note orpheline (structure absente du modèle) : consultable mais non ciblable. */
.notes-item.is-orphan { cursor: default; }
.notes-item.is-orphan .notes-item-name { color: var(--text-2); }
/* Note sur structure Premium verrouillée : visible, clic → pop-up. */
.notes-item.is-locked .notes-item-name { color: var(--text-2); }

.notes-status {
  padding: 6px 8px 0;
  font-size: 11px;
  color: var(--accent);
}
.notes-status.is-error { color: var(--danger); }

/* ───────────────────────── 12. QUIZ « CLIQUE SUR LA STRUCTURE » ─────────────
   Barre flottante au-dessus de la vue 3D (desktop + mobile). */

/* Bouton barre d'outils */
.tool-btn--quiz {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-3));
}
.tool-btn--quiz:hover {
  color: #04201c;
  background: var(--accent);
  border-color: var(--accent);
}

.quiz-bar {
  position: fixed;
  top: calc(var(--toolbar-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;                 /* au-dessus de la 3D et des panneaux */
  width: min(440px, calc(100vw - 24px));
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border-top: 3px solid var(--accent); /* liseré d'état (vert/rouge en feedback) */
  transition: border-top-color 0.2s ease;
}
.quiz-bar.is-correct { border-top-color: #34d399; }
.quiz-bar.is-wrong { border-top-color: var(--danger); }

/* ── Mode jeu ── */
.quiz-play { position: relative; padding: 12px 16px 14px; }
.quiz-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 6px;
}
.quiz-score { color: var(--accent); }
.quiz-prompt {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.quiz-prompt-label { font-size: 12.5px; color: var(--text-1); }
.quiz-target { font-size: 18px; font-weight: 700; color: var(--text-0); line-height: 1.2; }
.quiz-feedback {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.quiz-bar.is-correct .quiz-feedback { color: #34d399; }
.quiz-bar.is-wrong .quiz-feedback { color: var(--danger); }
.quiz-feedback strong { color: var(--text-0); }
.quiz-quit {
  margin-left: auto; /* poussé à droite de l'en-tête */
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.quiz-quit:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ── Écran de résultats ── */
.quiz-results { padding: 20px 18px; text-align: center; }
.quiz-results-icon { font-size: 34px; }
.quiz-results-title { font-size: 16px; font-weight: 700; margin: 4px 0 8px; }
.quiz-results-score {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
}
.quiz-results-msg { font-size: 12.5px; color: var(--text-1); margin: 6px 0 14px; }
.quiz-results-actions { display: flex; gap: 8px; justify-content: center; }
.quiz-btn {
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-0);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.quiz-btn:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
.quiz-btn--primary { background: var(--accent); color: #04201c; font-weight: 600; border-color: var(--accent); }
.quiz-btn--primary:hover { background: #3fe8d3; }

/* Bloc « Masquer / Valider » (anti miss-click) : Valider prend la place, Masquer compact. */
.quiz-confirm { margin-top: 8px; display: flex; gap: 8px; align-items: stretch; }
.quiz-confirm [data-quiz-validate] { flex: 1; }
.quiz-btn--hide { flex: 0 0 auto; } /* neutre (base .quiz-btn), juste pour voir derrière */
.quiz-hint { margin-top: 8px; font-size: 11px; color: var(--text-2); }
.quiz-hint strong { color: var(--text-1); }

/* Bloc après validation (feedback + bouton suivant) */
.quiz-answered { display: flex; flex-direction: column; gap: 10px; }
.quiz-next { align-self: flex-start; }

/* Confort tactile : tous les boutons du quiz ont une cible suffisante. */
.quiz-btn { min-height: 38px; }

/* ── Menu du quiz (mode + portée) ── */
.quiz-menu { padding: 12px 16px 14px; }
.quiz-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.quiz-modes { display: flex; gap: 8px; margin: 8px 0 12px; }
.quiz-mode {
  flex: 1; min-height: 36px; padding: 7px 10px; font-size: 12.5px;
  color: var(--text-1); background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: all 0.15s;
}
.quiz-mode:hover { background: var(--bg-hover); }
.quiz-mode.is-active { background: var(--accent); color: #04201c; font-weight: 600; border-color: var(--accent); }
.quiz-section { font-size: 11px; color: var(--text-2); margin-bottom: 8px; }
.quiz-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-scope {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; min-height: 34px; font-size: 12px;
  color: var(--text-0); background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: all 0.15s;
}
.quiz-scope:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
.quiz-scope-best { font-family: var(--font-mono); font-size: 10px; color: var(--warn); }

/* ── Options QCM (mode inverse) ── */
.quiz-options { display: grid; gap: 8px; margin-top: 8px; }
.quiz-option { width: 100%; text-align: left; }
.quiz-option.is-correct { background: #0f3d28; color: #6ee7b0; border-color: #34d399; font-weight: 600; }
.quiz-option.is-wrong { background: #3d1620; color: #ff8aa0; border-color: var(--danger); }
.quiz-option:disabled { cursor: default; }

/* ── État ACTIF d'un bouton d'outil (ex. mode léger) ── */
.tool-btn--on {
  color: #04201c;
  background: var(--accent);
  border-color: var(--accent);
}

/* ───────────────────────── 13. ONBOARDING (1re visite) ───────────────────────── */
.onb-backdrop {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 8, 12, 0.74); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.onb-backdrop.is-open { opacity: 1; }
.onb-card {
  width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 26px 24px 22px; text-align: center;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 60px rgba(45, 212, 191, 0.08);
  transform: translateY(8px); transition: transform 0.22s ease;
}
.onb-backdrop.is-open .onb-card { transform: translateY(0); }
.onb-icon { font-size: 34px; }
.onb-title { font-size: 19px; font-weight: 700; margin: 4px 0 4px; }
.onb-lead { font-size: 13px; color: var(--accent); margin-bottom: 14px; }
.onb-steps { list-style: none; text-align: left; display: grid; gap: 9px; margin: 0 0 14px; }
.onb-steps li {
  font-size: 12.5px; color: var(--text-1); line-height: 1.4;
  padding: 9px 11px; background: var(--bg-1);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  display: flex; gap: 9px; align-items: flex-start;
}
.onb-steps strong { color: var(--text-0); }
.onb-emoji { font-size: 16px; flex: 0 0 auto; }
.onb-note { font-size: 11px; color: var(--text-2); margin-bottom: 16px; }
.onb-btn {
  width: 100%; min-height: 42px; padding: 11px 16px;
  font-size: 14px; font-weight: 600; color: #04201c;
  background: var(--accent); border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.onb-btn:hover { background: #3fe8d3; }

/* ── Adaptation mobile : barre de quiz COMPACTE (ne dévore pas l'écran) ── */
@media (max-width: 768px) {
  .quiz-bar {
    top: calc(var(--toolbar-h) + 6px);
    width: calc(100vw - 16px);
  }
  .quiz-play { padding: 9px 12px 10px; }      /* moins de marge intérieure */
  .quiz-meta { margin-bottom: 4px; }
  .quiz-prompt { gap: 6px; }
  .quiz-target { font-size: 15px; line-height: 1.15; }
  .quiz-prompt-label { font-size: 11.5px; }
  .quiz-confirm { margin-top: 6px; gap: 6px; }
  .quiz-hint { margin-top: 6px; font-size: 10px; line-height: 1.25; } /* discret */
  .quiz-answered { gap: 8px; }
  .quiz-feedback { font-size: 12px; }
  .quiz-btn { min-height: 34px; padding: 7px 10px; } /* boutons un peu plus ras */
  .quiz-next { width: 100%; align-self: stretch; }
  .quiz-results { padding: 16px 14px; }
  .quiz-results-actions { flex-direction: column; }
  .quiz-results-actions .quiz-btn { width: 100%; }
}