/* ============================================================
   LEXIQUE — Calages communs V2 + WOW
   - Menu sticky qui suit le scroll
   - Titres lisibles
   - Comparateur de minéralisation visible
   - Readability fixes
   À charger après tous les autres CSS.
   ============================================================ */

/* =========================================================
   EN-TÊTE / PIED DE PAGE — toujours en absolu dans la marge
   (restaure le positionnement contre tout override en flow)
   ========================================================= */
.page { position: relative !important; }

/* Titre de couverture : « Fertilisation » toujours en vert lime,
   en ligne (override du thème crème) comme en PDF. */
.page .display .cover-accent { color: #D4F15A !important; -webkit-text-fill-color: #D4F15A !important; }
.page > .page-header {
  position: absolute !important;
  top: 22px !important;
  bottom: auto !important;
  left: var(--page-pad-x) !important;
  right: var(--page-pad-x) !important;
}
.page > .page-footer {
  position: absolute !important;
  bottom: 20px !important;
  top: auto !important;
  left: var(--page-pad-x) !important;
  right: var(--page-pad-x) !important;
}

/* =========================================================
   MENU NAVIGATION — fixé en haut, suit le scroll
   ========================================================= */
.nav-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  /* renforce le contraste sur les bandeaux de famille */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

/* Petit padding pour que le contenu ne passe pas sous le menu */
.stage,
.book {
  padding-top: 64px;
}
/* mais pas en impression */
@media print {
  .stage, .book { padding-top: 0 !important; }
  .nav-bar { display: none !important; }
}

/* =========================================================
   TITRES — toujours nets, fallback fonts safe
   ========================================================= */
h2.chapter-title,
h3.section-title,
.section-title {
  font-variation-settings: normal !important;
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: balance;
  text-rendering: optimizeLegibility;
}

/* Sur le V2 / Wow le titre était trop léger en italique — on densifie */
h3.section-title {
  font-weight: 500;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.08;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

h2.chapter-title {
  font-weight: 400;
  font-size: clamp(48px, 7vw, 72px);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

h1.cover-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* eyebrow toujours visible */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sienna);
  margin-bottom: 8px;
  display: block !important;
  opacity: 1 !important;
}

/* =========================================================
   COMPARATEUR DE MINÉRALISATION — lecture confortable
   ========================================================= */
.min-compare-svg {
  max-width: 100%;
  height: auto;
}
.min-compare-svg text {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 2px;
  stroke-linejoin: round;
}
.min-compare-svg circle { paint-order: stroke; }

/* sur la version sombre Wow, on inverse le halo des labels */
body.wow .min-compare-svg text,
[data-theme="dark"] .min-compare-svg text {
  stroke: #0a0c0d;
  stroke-width: 2.5px;
  fill: #fbf8f2;
}
body.wow .min-compare-svg line,
[data-theme="dark"] .min-compare-svg line {
  stroke: rgba(251, 248, 242, 0.22) !important;
}

/* =========================================================
   READABILITY — page text never below 14px effective
   ========================================================= */
.body-text { font-size: 14.5px; line-height: 1.62; }
.body-text strong { color: var(--ink); }

/* tooltips reste lisibles */
.tooltip {
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================
   ANIMATIONS — on coupe les animations bloquantes pendant scroll
   pour éviter les flashs de titre invisible
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  h2.chapter-title,
  h3.section-title,
  .eyebrow {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SCROLL SMOOTHING — défilement fluide, mais respecte la
   préférence utilisateur
   ========================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* ancre sous le menu */
}

/* =========================================================
   COMPAREATEUR : style des cartes du classement
   ========================================================= */
.ranking-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--paper-2);
  border: 0.5px solid var(--paper-edge);
}
.ranking-row.top {
  background: var(--sage-pale);
  border-color: var(--sage);
}

/* =========================================================
   SCROLL — un seul conteneur de défilement (html = viewport)
   garantit la molette partout (Wow + V2)
   ========================================================= */
html {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: auto;
}
body {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}
.stage {
  overflow: visible !important;
  min-height: 100vh !important;
}
/* tous les décors plein écran ne captent jamais le pointeur */
.wow-mesh, .wow-mesh *,
.wow-cursor, .wow-cursor-ring,
.wr-bg, .wr-roots, .wr-soil, .wr-pulse,
.stage::before, body::before, body::after {
  pointer-events: none !important;
}
/* les racines / particules injectées dans les pages restent décoratives */
.page > .wr-bg { pointer-events: none !important; }