/* ============================================================
   FORÊT DE BAMBOUS — fond commun à tout le site
   Accueil : .hp-rest (sous le hero). Autres pages : calque derrière
   .vp-page, qui laisse voir l'image du haut puis descend jusqu'au footer.
   ============================================================ */

:root {
  /* Premier plan sur les bords, milieu, fond */
  --vp-forest:
    linear-gradient(0deg, rgba(6, 16, 10, .85) 0, rgba(6, 16, 10, 0) 220px),
    radial-gradient(ellipse 46% 55% at 50% 45%, rgba(8, 20, 12, .62), rgba(8, 20, 12, .2) 75%, rgba(8, 20, 12, 0)),
    url("/public/bamboo-side-l.svg") left calc(var(--vp-rail-space) - 30px) top 60px / 190px auto repeat-y,
    url("/public/bamboo-side-r.svg") right -24px top 260px / 190px auto repeat-y,
    linear-gradient(100deg, transparent 18%, color-mix(in srgb, var(--vp-orange) 6%, transparent) 24%, transparent 31%, transparent 62%, color-mix(in srgb, var(--vp-orange) 5%, transparent) 68%, transparent 74%),
    url("/public/bamboo-mid.svg") center top / 560px auto repeat,
    linear-gradient(180deg, rgba(12, 30, 16, .35), rgba(12, 30, 16, .35)),
    url("/public/bamboo-back.svg") left top / 420px auto repeat,
    linear-gradient(180deg, #0d2213 0%, #10301a 50%, #0b1d10 100%);
}

/* Pages intérieures (et wiki) : la forêt apparaît en fondu sous l'en-tête.
   --vp-tint : filtre de couleur posé par le thème de saison (themes.css) */
.vp-page,
.vp-wiki { isolation: isolate; }
.hp-rest::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--vp-section) 0, rgba(11, 23, 14, .6) 140px, rgba(11, 23, 14, 0) 320px),
    var(--vp-forest);
  filter: var(--vp-tint, none);
}
.vp-page::before,
.vp-wiki::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--vp-rail-space));
  right: 0;
  pointer-events: none;
  background: var(--vp-forest);
  filter: var(--vp-tint, none);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 160px, #000 420px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 160px, #000 420px);
}

/* La forêt touche le pied de page : plus de bande vide entre les deux */
body.vp-body > .vp-footer { margin-top: 0; }

/* Mobile : pas de bambous de premier plan (ils passaient sous le texte),
   forêt plus sombre et plus fine pour garder le contenu lisible */
@media (max-width: 991.98px) {
  :root {
    --vp-forest:
      linear-gradient(0deg, rgba(6, 16, 10, .85) 0, rgba(6, 16, 10, 0) 220px),
      linear-gradient(180deg, rgba(8, 20, 12, .42), rgba(8, 20, 12, .42)),
      url("/public/bamboo-mid.svg") center top / 380px auto repeat,
      linear-gradient(180deg, rgba(12, 30, 16, .35), rgba(12, 30, 16, .35)),
      url("/public/bamboo-back.svg") left top / 300px auto repeat,
      linear-gradient(180deg, #0d2213 0%, #10301a 50%, #0b1d10 100%);
  }
}