/* ============================================================
   WOW — FIXES de lisibilité + navigation + scroll bounds
   À charger en TOUT DERNIER, écrase le reste.
   ============================================================ */

/* ============================================================
   1. LISIBILITÉ — forcer texte clair partout dans les pages
   ============================================================ */
body .page,
body .page *:not(.eyebrow):not(.section-title):not(.fiche-name):not(em):not(.page-num):not(svg):not(svg *):not(.badge):not(.badge *) {
  color: rgba(251, 248, 242, 0.88) !important;
}

/* Texte primary sur fond sombre */
body .page h1, body .page h2, body .page h3, body .page h4, body .page h5,
body .page p, body .page li, body .page td, body .page span, body .page div,
body .page label {
  color: rgba(251, 248, 242, 0.92) !important;
}

/* Strong / bold */
body .page strong, body .page b {
  color: #FBF8F2 !important;
}

/* Italiques restent lime */
body .page em, body .page i {
  color: #D4F15A !important;
}

/* Headers / footers de page */
body .page-header, body .page-header span,
body .page-footer, body .page-footer span {
  color: rgba(251, 248, 242, 0.6) !important;
}

/* Petits caractères / small caps */
body .page .small-caps, body .page .mono, body .page .body-text,
body .page .lead {
  color: rgba(251, 248, 242, 0.85) !important;
}

/* Eyebrow garde sa couleur famille (déjà géré par wow-modern-import) */

/* Fiches secondaires */
body .page .fiche-secondary-label,
body .page .fiche-stat-label,
body .page .fiche-sec-k,
body .page .fiche-subtitle {
  color: rgba(251, 248, 242, 0.65) !important;
}

/* Tooltips inline */
body .term {
  color: #D4F15A !important;
}

/* Boutons "Comparer" sur les fiches */
body .fiche-compare {
  background: rgba(255,255,255,0.08) !important;
  color: #FBF8F2 !important;
  border-color: rgba(212,241,90,0.4) !important;
}

/* Liens internes */
body a:not(.nav-chapter):not(.nav-btn) {
  color: #D4F15A !important;
}

/* SVG textes spécifiques (cycle azote, schémas) */
body .page svg text,
body .page svg tspan {
  fill: rgba(251, 248, 242, 0.85) !important;
}

/* Modal détail — déjà sombre mais on renforce */
body .detail-modal,
body .detail-modal * {
  color: rgba(251, 248, 242, 0.88) !important;
}
body .detail-modal h1, body .detail-modal h2, body .detail-modal h3 {
  color: #FBF8F2 !important;
}
body .detail-modal em { color: #D4F15A !important; }

/* ============================================================
   2. BARRE DE NAVIGATION — lisible, élégante
   ============================================================ */
body .nav-bar {
  background: rgba(10, 14, 13, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(212, 241, 90, 0.15) !important;
  box-shadow:
    0 1px 0 rgba(212, 241, 90, 0.1) inset,
    0 8px 32px rgba(0, 0, 0, 0.6) !important;
  padding: 12px 24px !important;
  z-index: 1000 !important;
}

body .nav-brand {
  color: #FBF8F2 !important;
}
body .nav-brand img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95;
}
body .nav-brand span {
  color: rgba(251, 248, 242, 0.6) !important;
}

/* Container des chapitres — léger fond pour le contraste */
body .nav-bar {
  flex-wrap: nowrap !important;
  gap: 16px;
}

/* Container des chapitres — défilable sur une seule ligne */
body .nav-chapters {
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 4px 6px !important;
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  border-radius: 99px !important;
  gap: 2px !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
body .nav-chapters::-webkit-scrollbar { display: none; }

body .nav-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

body .nav-chapter {
  color: rgba(251, 248, 242, 0.7) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 10px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  transition: all 0.25s ease !important;
  white-space: nowrap;
}
body .nav-chapter:hover {
  color: #D4F15A !important;
  background: rgba(212, 241, 90, 0.08) !important;
}
body .nav-chapter.active {
  background: linear-gradient(135deg, #D4F15A, #0E7C5A) !important;
  color: #063F2D !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(212, 241, 90, 0.35);
}

/* Onglet Académie : pastille lime épinglée à droite du menu, toujours visible */
body a.nav-chapter-academie {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #D4F15A !important;
  background: rgba(212, 241, 90, 0.06) !important;
  border: 1px solid rgba(212, 241, 90, 0.45) !important;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
body a.nav-chapter-academie:hover {
  color: #063F2D !important;
  background: linear-gradient(135deg, #D4F15A, #0E7C5A) !important;
  border-color: #D4F15A !important;
}

/* Outils à droite */
body .nav-tools .nav-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FBF8F2 !important;
  border: 1px solid rgba(212, 241, 90, 0.25) !important;
  padding: 7px 14px !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}
body .nav-tools .nav-btn:hover {
  background: rgba(212, 241, 90, 0.15) !important;
  border-color: #D4F15A !important;
  color: #D4F15A !important;
}

/* Magic indicator déjà géré par wow-mix */

/* ============================================================
   3. SCROLL BOUNDS — pas de overscroll, pas de fond visible
      au-delà de la dernière page
   ============================================================ */
html, body {
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

body {
  background: #0a0c0d !important;
}

/* Le stage doit s'arrêter pile à la dernière page */
body .stage {
  min-height: auto !important;
  padding-top: 90px !important;
  padding-bottom: 60px !important;
}

body .book {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* La dernière page : pas de marge en bas */
body .page:last-child {
  margin-bottom: 0 !important;
}

/* Ancre de fin pour bloquer le scroll */
body::after {
  content: "";
  display: block;
  height: 0;
}

/* ============================================================
   5. BLOCS CLAIRS INTERNES — translucides pour laisser voir
      les animations de fond (racines, particules, mesh)
   ============================================================ */
body .page [style*="--cream"],
body .page [style*="--paper-2"],
body .page [style*="--paper)"] {
  background-color: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border-color: rgba(212,241,90,0.14) !important;
}
/* Racines / particules plus présentes sur le fond sombre */
body .wr-roots { opacity: 0.7 !important; }
body .wr-soil  { opacity: 0.5 !important; }
body .wr-pulse { opacity: 0.8 !important; }
/* le mesh global un peu plus marqué */
body .wow-mesh { opacity: 0.6 !important; }
@media print {
  /* Force les couleurs CSS à s'imprimer (sinon Chrome supprime les fonds) */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* On garde le fond sombre */
  html, body {
    background: #0a0c0d !important;
  }
  body {
    overflow: visible !important;
  }

  /* On masque uniquement l'UI interactive */
  .nav-bar,
  .wow-cursor, .wow-cursor-ring,
  .magic-indicator,
  .compare-tray,
  .detail-modal-backdrop {
    display: none !important;
  }

  /* On fige les animations (pas de tremblement / position aléatoire) */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* On préserve le mesh / blobs / racines en arrière-plan */
  .wow-blob, .wow-mesh,
  .wr-bg, .wr-roots, .wr-soil, .wr-pulse {
    /* on les rend visibles */
  }

  /* Stage : pas de padding, pas de fond séparé */
  .stage {
    padding: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    display: block !important;
  }
  .stage::before { display: none !important; }

  .book {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Chaque .page = une feuille A4 */
  .page {
    page-break-after: always;
    page-break-inside: avoid;
    break-after: page;
    break-inside: avoid;
    width: 210mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 auto !important;
    padding: 18mm 16mm !important;
    box-shadow: none !important;
    border: 1px solid rgba(212, 241, 90, 0.15) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* On laisse le fond sombre des pages */
  }
  .page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Texte reste clair pour l'impression sombre */
  .page, .page * {
    color: rgba(251, 248, 242, 0.88) !important;
  }
  .page strong, .page b, .page h1, .page h2, .page h3, .page h4 {
    color: #FBF8F2 !important;
  }
  .page em, .page i {
    color: #D4F15A !important;
  }

  /* Pas de scrollbar */
  ::-webkit-scrollbar { display: none !important; }

  /* PDF A4 sans marges (les marges sont dans .page) */
  @page {
    size: A4 portrait;
    margin: 0;
  }

  /* Petit garde-fou : si la page contient des éléments absolus
     qui sortent, on force overflow hidden */
  .page > * {
    max-width: 100%;
  }
}