/* ═══════════════════════════════════════════════════════════════
   NAVGLOBAL.CSS — Stratfu · Navbar duale unifiée (classes + donjons)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base commune ───────────────────────────────────────────── */
body {
  padding-top: 72px !important;
}

.none {
  display: none !important;
}

/* ── Conteneurs navbar (commun aux deux) ────────────────────── */
#nav-container,
#nav-classe-container {
  position: fixed;
  top: 16px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* ── Wrapper principal ──────────────────────────────────────── */
#stratfu-nav-wrapper,
#stratfu-nav-classe-wrapper,
#stratfu-nav-dual-wrapper {
  pointer-events: auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ── Navbar duale principale ────────────────────────────────── */
#stratfu-nav-dual {
  position: relative;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  font-family: 'Roboto', system-ui, sans-serif;
  width: 100%;
  max-width: 1200px;
  /* overflow: hidden; ← SUPPRIMÉ */
}

/* ── Panels navbar (classe / donjon) ────────────────────────── */
.nav-panel {
  display: none;
  width: 100%;
}

.nav-panel.nav-panel-active {
  display: flex;
  align-items: center;
}

/* Animations roulement */
@keyframes rollExitUp {
  from {
    opacity: 1;
    transform: translateY(0)
  }

  to {
    opacity: 0;
    transform: translateY(-16px)
  }
}

@keyframes rollEnterDown {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

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

@keyframes rollExitDown {
  from {
    opacity: 1;
    transform: translateY(0)
  }

  to {
    opacity: 0;
    transform: translateY(16px)
  }
}

@keyframes rollEnterUp {
  from {
    opacity: 0;
    transform: translateY(-16px)
  }

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

.nav-panel.roll-exit-up {
  animation: rollExitUp 0.22s ease forwards;
}

.nav-panel.roll-enter-down {
  animation: rollEnterDown 0.22s ease forwards;
}

.nav-panel.roll-exit-down {
  animation: rollExitDown 0.22s ease forwards;
}

.nav-panel.roll-enter-up {
  animation: rollEnterUp 0.22s ease forwards;
}

/* ── Panel DONJONS ──────────────────────────────────────────── */
#nav-panel-donjon {
  background: var(--theme-nav-bg, #100a02);
  border: 0.5px solid var(--theme-nav-border, #3a2008);
  height: 48px;
  padding: 0 1rem;
  border-radius: 15px;
  gap: 0;
}

/* ── Panel CLASSES ──────────────────────────────────────────── */
#nav-panel-classe {
  background: var(--classe-nav-bg, #0a0a0a);
  border: 0.5px solid var(--classe-nav-border, rgba(255, 255, 255, 0.1));
  height: 48px;
  padding: 0 0.75rem;
  border-radius: 15px;
  gap: 0;
}

/* ── Éléments communs aux deux panels ───────────────────────── */
.nav-inner,
.nav-classe-inner {
  width: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  height: 48px;
  gap: 0;
}

/* ── Logo DONJONS ───────────────────────────────────────────── */
.nav-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-right: 1px solid var(--theme-nav-separator, #2a1804);
  height: 100%;
  transition: background 0.2s;
  border-radius: 11px 0 0 11px;
}

.nav-logo:hover {
  background: var(--theme-nav-hover-bg, #1e1206);
}

.nav-logo:hover .nav-logo-text {
  text-shadow: 0 0 10px var(--theme-accent, #e8913a);
}

.nav-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 0 1.5rem;
  height: 100%;
}

.nav-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--theme-accent, #e8913a);
  line-height: 1;
  transition: text-shadow 0.2s;
}

/* ── Logo CLASSES ───────────────────────────────────────────── */
.nav-classe-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 0 1rem 0 0.4rem;
  height: 100%;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.nav-classe-logo:hover {
  opacity: 0.75;
}

.nav-classe-logo-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--classe-accent, rgba(255, 255, 255, 0.9));
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(var(--classe-accent-rgb, 255, 255, 255), 0.4);
}

.nav-classe-logo-sep {
  color: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.25);
  font-size: 13px;
}

.nav-classe-logo-sub {
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Séparateurs ────────────────────────────────────────────── */
.nav-classe-sep-v {
  width: 1px;
  height: 26px;
  background: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.12);
  flex-shrink: 0;
  margin: 0 6px;
}

/* ── Tranches DONJONS ───────────────────────────────────────── */
.nav-tranches {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
  padding: 0 8px;
  gap: 2px;
  overflow: visible;
}

.nav-tranches::-webkit-scrollbar {
  display: none;
}

.tranche-item {
  position: relative;
  flex: 1;
}

.tranche-btn {
  background: none;
  border: none;
  color: var(--theme-accent, rgba(245, 200, 120, 0.7));
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  padding: 0 4px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  white-space: nowrap;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  letter-spacing: 0.02em;
}

.tranche-btn:hover {
  color: var(--theme-accent, #e8913a);
  background: var(--theme-nav-hover-bg, #1e1206);
}

.tranche-btn.open {
  color: var(--theme-accent, #e8913a);
  background: var(--theme-nav-hover-bg, #1e1206);
  border: 0.5px solid var(--theme-nav-border, #3a2008);
}

.chevron {
  font-size: 12px;
  transition: transform 0.2s;
}

.tranche-btn.open .chevron {
  transform: rotate(180deg);
}

.tranche-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--theme-nav-bg, #100a02);
  border: 0.5px solid var(--theme-nav-border, #3a2008);
  border-top: 2px solid var(--theme-dropdown-border-top, #e8913a);
  border-radius: 0 0 8px 8px;
  min-width: 240px;
  z-index: 999;
  flex-direction: column;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tranche-dropdown.open {
  display: flex;
}

.dropdown-left .tranche-dropdown {
  left: auto;
  right: 0;
}

.tranche-dropdown a {
  font-size: 13px;
  color: var(--theme-accent, rgba(245, 200, 120, 0.7));
  text-decoration: none;
  padding: 7px 16px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tranche-dropdown a img:first-child {
  will-change: transform;
  transition: transform 0.08s ease-out;
}

.tranche-dropdown a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.tranche-dropdown a:hover {
  background: var(--theme-nav-hover-bg, #1e1206);
  color: var(--theme-accent, #e8913a);
  border-left-color: var(--theme-accent, #e8913a);
}

.tranche-dropdown a.nav-active {
  color: var(--theme-active, #e8913a);
  font-weight: 600;
  border-left-color: var(--theme-active, #e8913a);
  background: var(--theme-nav-hover-bg, #1e1206);
}

/* ── Liste classes ──────────────────────────────────────────── */
.nav-classe-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1px;
  padding: 0 2px;
}

.nav-classe-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s;
  position: relative;
}

.nav-classe-link:hover {
  background: rgba(var(--c), 0.15);
}

.nav-classe-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: box-shadow 0.25s;
  will-change: transform;
}

.nav-classe-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 5px;
  opacity: 0.5;
  transition: opacity 0.2s, filter 0.2s;
}

.nav-classe-link:hover .nav-classe-icon {
  opacity: 0.85;
}

/* Classe active : aura */
.nav-classe-link.nav-classe-active .nav-classe-icon-wrap {
  box-shadow:
    0 0 0 2px rgba(var(--c), 0.7),
    0 0 10px rgba(var(--c), 0.6),
    0 0 22px rgba(var(--c), 0.3);
}

.nav-classe-link.nav-classe-active .nav-classe-icon {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(var(--c), 0.8));
}

/* ── Boutons toggle (communs) ──────────────────────────────── */
.nav-dual-toggle,
.nav-toggle-btn,
.nav-toggle-btn-classe {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 14px;
  height: 26px;
  background: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
  white-space: nowrap;
  pointer-events: auto;
}

/* Toggle DONJONS */
#nav-panel-donjon .nav-dual-toggle,
#nav-panel-donjon .nav-toggle-btn {
  border: 1px solid rgba(var(--theme-accent-rgb, 232, 145, 58), 0.35);
  color: var(--theme-accent, #e8913a);
}

#nav-panel-donjon .nav-dual-toggle:hover,
#nav-panel-donjon .nav-toggle-btn:hover {
  background: rgba(var(--theme-accent-rgb, 232, 145, 58), 0.12);
  border-color: var(--theme-accent, #e8913a);
}

/* Toggle CLASSES */
#nav-panel-classe .nav-dual-toggle,
#nav-classe-container .nav-toggle-btn-classe {
  border: 1px solid rgba(var(--classe-accent-rgb, 255, 255, 255), 0.25);
  color: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.75);
}

#nav-panel-classe .nav-dual-toggle:hover,
#nav-classe-container .nav-toggle-btn-classe:hover {
  background: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.1);
  border-color: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.5);
  color: rgba(var(--classe-accent-rgb, 255, 255, 255), 0.95);
}

/* ── WIP liens (grisés si la page n'existe pas) ──────────────── */
.tranche-dropdown a.wip {
  color: rgba(150, 150, 160, 0.45);
  font-style: italic;
  cursor: default;
  pointer-events: none;
}

.tranche-dropdown a.wip:hover {
  background: none;
  border-left-color: transparent;
  color: rgba(150, 150, 160, 0.45);
}

.tranche-dropdown a.wip img:first-child {
  opacity: 0.3;
}

/* ── Transitions page (commun) ──────────────────────────────── */
html {
  background: #000;
}

body {
  opacity: 0;
  animation: pageFadeIn 0.35s ease forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body.page-fade-out {
  opacity: 1;
  animation: pageFadeOut 0.25s ease forwards;
}

@keyframes pageFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ── Pointer-events ────────────────────────────────────────── */
#nav-donjon-wrap,
#nav-classe-wrap {
  pointer-events: auto;
}/* ═══════════════════════════════════════════════════════════════
   NAVBAR MOBILE — Menu burger responsive
   À AJOUTER À LA FIN de navbar.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Menu burger : visible uniquement sur mobile ──────────────── */
.mobile-burger {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: var(--theme-nav-bg, #0a0a0a);
  border: 1px solid var(--theme-nav-border, #2a2a2a);
  border-radius: 10px;
  cursor: pointer;
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.mobile-burger:hover {
  background: var(--theme-nav-hover-bg, #141414);
  border-color: var(--theme-accent, #c8a040);
}

.mobile-burger span {
  width: 24px;
  height: 2.5px;
  background: var(--theme-accent, #c8a040);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animation X quand menu ouvert */
.mobile-burger.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-burger.active span:nth-child(2) {
  opacity: 0;
}

.mobile-burger.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Overlay menu mobile ───────────────────────────────────────── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
}

/* ── Container du menu mobile ──────────────────────────────────── */
.mobile-menu-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 400px;
  background: var(--theme-nav-bg, #0a0a0a);
  border-left: 1px solid var(--theme-nav-border, #2a2a2a);
  z-index: 2001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.mobile-menu-container.active {
  transform: translateX(0);
}

/* ── Header du menu mobile ─────────────────────────────────────── */
.mobile-menu-header {
  padding: 20px;
  border-bottom: 1px solid var(--theme-nav-border, #2a2a2a);
  position: sticky;
  top: 0;
  background: var(--theme-nav-bg, #0a0a0a);
  z-index: 10;
}

.mobile-menu-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--theme-accent, #c8a040);
  text-align: center;
  margin-bottom: 12px;
}

/* ── Switch Donjon/Classe dans le menu mobile ──────────────────── */
.mobile-nav-switch {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 4px;
}

.mobile-nav-switch-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--theme-meta, #888);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-nav-switch-btn.active {
  background: var(--theme-accent, #c8a040);
  color: #000;
}

/* ── Navigation par étages ─────────────────────────────────────── */
.mobile-nav-stage {
  display: none;
  animation: slideInRight 0.3s ease;
}

.mobile-nav-stage.active {
  display: block;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Breadcrumb (fil d'Ariane) ─────────────────────────────────── */
.mobile-breadcrumb {
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--theme-nav-border, #2a2a2a);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--theme-meta, #888);
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-breadcrumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.mobile-breadcrumb-arrow {
  font-size: 16px;
}

.mobile-breadcrumb-text {
  font-weight: 500;
}

/* ── Liste des items ───────────────────────────────────────────── */
.mobile-nav-list {
  padding: 8px 0;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--theme-text, #d0d0d0);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-nav-item:hover {
  background: var(--theme-nav-hover-bg, #141414);
  padding-left: 24px;
}

.mobile-nav-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.mobile-nav-item-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.mobile-nav-item-text {
  font-size: 15px;
  font-weight: 500;
}

.mobile-nav-item-arrow {
  font-size: 18px;
  color: var(--theme-meta, #888);
  transition: transform 0.2s ease;
}

.mobile-nav-item:hover .mobile-nav-item-arrow {
  transform: translateX(4px);
}

/* ── Badge niveau (pour les tranches) ─────────────────────────── */
.mobile-nav-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--theme-accent, #c8a040);
  color: #000;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

/* ── Media query : afficher sur mobile uniquement ──────────────── */
@media (max-width: 1050px) {
  /* Cacher la navbar desktop */
  #stratfu-nav-dual {
    display: none !important;
  }

  /* Afficher le burger */
  .mobile-burger {
    display: flex;
  }

  /* Afficher l'overlay et container quand actif */
  .mobile-menu-overlay.active {
    display: block;
  }

  .mobile-menu-container.active {
    display: block;
  }

  /* Réduire le padding-top du body */
  body {
    padding-top: 68px !important;
  }
}

/* ── Desktop : tout masqué ─────────────────────────────────────── */
@media (min-width: 1051px) {
  .mobile-burger,
  .mobile-menu-overlay,
  .mobile-menu-container {
    display: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   NAVBAR MOBILE — Menu burger responsive
   À AJOUTER À LA FIN de navbar.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Menu burger : visible uniquement sur mobile ──────────────── */
.mobile-burger {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: var(--theme-nav-bg, #0a0a0a);
  border: 1px solid var(--theme-nav-border, #2a2a2a);
  border-radius: 10px;
  cursor: pointer;
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.mobile-burger:hover {
  background: var(--theme-nav-hover-bg, #141414);
  border-color: var(--theme-accent, #c8a040);
}

.mobile-burger span {
  width: 24px;
  height: 2.5px;
  background: var(--theme-accent, #c8a040);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animation X quand menu ouvert */
.mobile-burger.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-burger.active span:nth-child(2) {
  opacity: 0;
}

.mobile-burger.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Overlay menu mobile ───────────────────────────────────────── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
}

/* ── Container du menu mobile ──────────────────────────────────── */
.mobile-menu-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 400px;
  background: var(--theme-nav-bg, #0a0a0a);
  border-left: 1px solid var(--theme-nav-border, #2a2a2a);
  z-index: 2001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.mobile-menu-container.active {
  transform: translateX(0);
}

/* ── Header du menu mobile ─────────────────────────────────────── */
.mobile-menu-header {
  padding: 20px;
  border-bottom: 1px solid var(--theme-nav-border, #2a2a2a);
  position: sticky;
  top: 0;
  background: var(--theme-nav-bg, #0a0a0a);
  z-index: 10;
}

.mobile-menu-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--theme-accent, #c8a040);
  text-align: center;
  margin-bottom: 12px;
}

/* ── Switch Donjon/Classe dans le menu mobile ──────────────────── */
.mobile-nav-switch {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 4px;
}

.mobile-nav-switch-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--theme-meta, #888);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-nav-switch-btn.active {
  background: var(--theme-accent, #c8a040);
  color: #000;
}

/* ── Navigation par étages ─────────────────────────────────────── */
.mobile-nav-stage {
  display: none;
  animation: slideInRight 0.3s ease;
}

.mobile-nav-stage.active {
  display: block;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Breadcrumb (fil d'Ariane) ─────────────────────────────────── */
.mobile-breadcrumb {
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--theme-nav-border, #2a2a2a);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--theme-meta, #888);
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-breadcrumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.mobile-breadcrumb-arrow {
  font-size: 16px;
}

.mobile-breadcrumb-text {
  font-weight: 500;
}

/* ── Liste des items ───────────────────────────────────────────── */
.mobile-nav-list {
  padding: 8px 0;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--theme-text, #d0d0d0);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-nav-item:hover {
  background: var(--theme-nav-hover-bg, #141414);
  padding-left: 24px;
}

.mobile-nav-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.mobile-nav-item-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.mobile-nav-item-text {
  font-size: 15px;
  font-weight: 500;
}

.mobile-nav-item-arrow {
  font-size: 18px;
  color: var(--theme-meta, #888);
  transition: transform 0.2s ease;
}

.mobile-nav-item:hover .mobile-nav-item-arrow {
  transform: translateX(4px);
}

/* ── Badge niveau (pour les tranches) ─────────────────────────── */
.mobile-nav-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--theme-accent, #c8a040);
  color: #000;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

/* ── Media query : afficher sur mobile uniquement ──────────────── */
@media (max-width: 1050px) {
  /* Cacher la navbar desktop */
  #stratfu-nav-dual {
    display: none !important;
  }

  /* Afficher le burger */
  .mobile-burger {
    display: flex;
  }

  /* Afficher l'overlay et container quand actif */
  .mobile-menu-overlay.active {
    display: block;
  }

  .mobile-menu-container.active {
    display: block;
  }

  /* Réduire le padding-top du body */
  body {
    padding-top: 68px !important;
  }
}

/* ── Desktop : tout masqué ─────────────────────────────────────── */
@media (min-width: 1051px) {
  .mobile-burger,
  .mobile-menu-overlay,
  .mobile-menu-container {
    display: none !important;
  }
}

/* ── Logo fixe mobile (haut gauche) — même style que le burger ── */
.mobile-logo-fixed {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--theme-nav-bg, #0a0a0a);
  border: 1px solid var(--theme-nav-border, #2a2a2a);
  cursor: pointer;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mobile-logo-fixed img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
}

.mobile-logo-fixed:hover {
  background: var(--theme-nav-hover-bg, #141414);
  border-color: var(--theme-accent, #c8a040);
}

/* ── Bouton pause animation mobile — même forme que le burger ─── */
.mobile-stop-btn {
  display: none;
  position: fixed;
  top: 72px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--theme-nav-bg, #0a0a0a);
  border: 1px solid var(--theme-nav-border, #2a2a2a);
  cursor: pointer;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  padding: 0;
}

.mobile-stop-btn:hover {
  background: var(--theme-nav-hover-bg, #141414);
  border-color: var(--theme-accent, #c8a040);
  color: var(--theme-accent, #c8a040);
}

@media (max-width: 1050px) {
  .mobile-logo-fixed,
  .mobile-stop-btn {
    display: flex;
  }
}

@media (min-width: 1051px) {
  .mobile-logo-fixed,
  .mobile-stop-btn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BOUTON MODE LISIBLE MOBILE
   Calqué sur .mobile-stop-btn, positionné juste en dessous
══════════════════════════════════════════════════════════════ */

.mobile-lisible-btn {
  display: none;
  position: fixed;
  top: 128px; /* 72px stop-btn + 48px hauteur + 8px gap */
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--theme-nav-bg, #0a0a0a);
  border: 1px solid var(--theme-nav-border, #2a2a2a);
  cursor: pointer;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  padding: 0;
}

.mobile-lisible-btn:hover,
.mobile-lisible-btn.active {
  background: var(--theme-nav-hover-bg, #141414);
  border-color: var(--theme-accent, #c8a040);
  color: var(--theme-accent, #c8a040);
}

@media (max-width: 1050px) {
  .mobile-lisible-btn {
    display: flex;
  }
}

@media (min-width: 1051px) {
  .mobile-lisible-btn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MODE LISIBLE — body.mode-lisible
   Fond page blanc cassé · cards blanc pur · texte noir
   Canvas atténué · badges et états adaptés
══════════════════════════════════════════════════════════════ */

body.mode-lisible {
  --theme-card-bg:        #ffffff;
  --theme-card-border:    rgba(0,0,0,0.18);
  --theme-text:           #1a1a1a;
  --theme-meta:           #555555;
  --theme-placeholder-bg: rgba(255,255,255,0.9);
  --theme-body-bg:        #d4cfc7;
  background: #d4cfc7 !important;
}

body.mode-lisible #bg-canvas {
  opacity: 0.12 !important;
}

/* Cards → fond blanc */
body.mode-lisible .card,
body.mode-lisible .monster-card,
body.mode-lisible .boss-card,
body.mode-lisible .stele-card,
body.mode-lisible .info-badge,
body.mode-lisible .header-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.15) !important;
}

body.mode-lisible .tip-card-body {
  background: #f7f5f2 !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* Textes */
body.mode-lisible .card-text,
body.mode-lisible .monster-desc,
body.mode-lisible .stele-desc,
body.mode-lisible .tip-card-text,
body.mode-lisible .res-item {
  color: #1a1a1a !important;
}

body.mode-lisible .tip-card-title {
  color: var(--theme-accent);
}

body.mode-lisible .monster-condition {
  background: rgba(0,0,0,0.04) !important;
  border-top-color: rgba(0,0,0,0.12) !important;
  color: #2a2a2a !important;
}

/* Badges */
body.mode-lisible .badge-green  { background: #e6f4d8; color: #2e6b10; }
body.mode-lisible .badge-amber  { background: #fef3d8; color: #8a5000; }
body.mode-lisible .badge-red    { background: #fde8e8; color: #9b1a1a; }
body.mode-lisible .badge-purple { background: #ede8fe; color: #5b20b0; }
body.mode-lisible .badge-blue   { background: #e8f0fe; color: #1a3a9b; }
body.mode-lisible .badge-teal   { background: #e0f8f0; color: #0a6040; }
body.mode-lisible .badge-coral  { background: #fde8de; color: #8a2a00; }
body.mode-lisible .badge-pink   { background: #fde0ec; color: #8a1040; }
body.mode-lisible .badge-honey  { background: #fef6d0; color: #6a4800; }
body.mode-lisible .badge-gold   { background: #fdf3d0; color: #5a3800; border-color: rgba(180,130,20,0.35); }

/* États nommés, danger, placeholder */
body.mode-lisible .state-name        { color: #8a6e00 !important; }
body.mode-lisible .danger            { color: #c0151a !important; }
body.mode-lisible .text-placeholder  { color: #777777 !important; }

/* Titres */
body.mode-lisible h2 { color: var(--theme-accent) !important; }

/* Focus */
body.mode-lisible .focus-step    { background: #ffffff !important; border-color: rgba(0,0,0,0.15) !important; color: #1a1a1a; }
body.mode-lisible .focus-num     { background: var(--theme-accent) !important; color: #fff !important; }
body.mode-lisible .section-label { color: #333333 !important; }
body.mode-lisible .arrow         { color: #666 !important; }

/* Sublimations */
body.mode-lisible .sublimation-inline      { background: #f0ede8; border-color: rgba(0,0,0,0.1); }
body.mode-lisible .sublimation-inline-text { color: #2a2a2a; }
body.mode-lisible .sublimation-inline-name { color: #555; }

/* Séparateur */
body.mode-lisible .section-sep { border-top-color: rgba(0,0,0,0.15) !important; }

/* Transitions douces sur les éléments affectés */
.card, .monster-card, .boss-card, .stele-card,
.tip-card-body, .info-badge, .monster-condition,
.monster-desc, .stele-desc, .card-text,
.focus-step, .sublimation-inline, .section-sep {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ── Interventions en mode lisible ── */
body.mode-lisible .card-intervention {
  --si-res-bg:     rgba(0,0,0,0.04);
  --si-res-border: rgba(0,0,0,0.12);
  --si-label:      #444;
  --si-filename:   #888;
  color: #1a1a1a;
}

body.mode-lisible .card-intervention[data-stele="anathar"] {
  --si-bg:           #fdf8ee;
  --si-border:       rgba(180,120,20,0.3);
  --si-glow:         rgba(200,150,40,0.08);
  --si-inset:        rgba(160,100,20,0.03);
  --si-badge-bg:     #fef3d0;
  --si-badge-color:  #7a5500;
  --si-badge-border: rgba(180,120,20,0.3);
  --si-label:        #7a5500;
}

body.mode-lisible .card-intervention[data-stele="aguabrial"] {
  --si-bg:           #edfcfb;
  --si-border:       rgba(0,160,140,0.3);
  --si-glow:         rgba(26,200,180,0.08);
  --si-inset:        rgba(0,180,160,0.03);
  --si-badge-bg:     #d0f8f0;
  --si-badge-color:  #006a58;
  --si-badge-border: rgba(0,160,140,0.3);
  --si-label:        #006a58;
}

body.mode-lisible .card-intervention[data-stele="cire-momore"] {
  --si-bg:           #faf0ff;
  --si-border:       rgba(140,60,200,0.3);
  --si-glow:         rgba(144,80,210,0.08);
  --si-inset:        rgba(120,40,180,0.03);
  --si-badge-bg:     #f0e0ff;
  --si-badge-color:  #6a1fa0;
  --si-badge-border: rgba(140,60,200,0.3);
  --si-label:        #6a1fa0;
  box-shadow: 0 0 12px rgba(144,80,210,0.15), inset 0 0 12px rgba(140,60,200,0.04) !important;
  animation: none !important;
}

body.mode-lisible .card-intervention[data-stele="cire-momore-ankylse"] {
  --si-bg:           #f0f1f8;
  --si-border:       rgba(80,90,160,0.3);
  --si-glow:         rgba(90,100,160,0.08);
  --si-inset:        rgba(60,70,130,0.03);
  --si-badge-bg:     #e0e4f4;
  --si-badge-color:  #3a4490;
  --si-badge-border: rgba(80,90,160,0.3);
  --si-label:        #3a4490;
}

body.mode-lisible .card-intervention[data-stele="harebourg"] {
  --si-bg:           #eef8fc;
  --si-border:       rgba(30,140,170,0.3);
  --si-glow:         rgba(48,160,192,0.08);
  --si-inset:        rgba(30,120,160,0.03);
  --si-badge-bg:     #d0eff8;
  --si-badge-color:  #0a5a78;
  --si-badge-border: rgba(30,140,170,0.3);
  --si-label:        #0a5a78;
}

/* Texte dans les tips internes aux interventions */
body.mode-lisible .card-intervention .card-text,
body.mode-lisible .card-intervention .tip,
body.mode-lisible .card-intervention p {
  color: #1a1a1a !important;
}