/* sylva-hero.css — fond 3D « racine moussue » (voir assets/sylva/sylva-hero.js).
   Depuis le 2026-09-02 après-midi le calque est FIXE DERRIÈRE TOUT LE SITE (enfant de <body>, z 0) :
   la caméra suit le scroll et des branches apparaissent le long de la page. Fond = noir chaud
   Klarity, nappe de lumière dorée sur le premier écran seulement (--sylva-pool, pilotée par le JS).
   Empilement : .sylva-hero (z 0) < #particleCanvas (z 0, après dans le DOM) < .site-content (z 1,
   contient #cineStage z 5 rendu transparent) < nav (z 200), menu, chatbot, loader, curseur. */

/* Le contenu au-dessus du calque, de façon garantie (les blocs statiques sans transform étaient
   peints avant un fixed z 0) ; le filigrane secret repasse au-dessus du contenu. */
.site-content { position: relative; z-index: 1; }
body .secret-watermark { z-index: 2; }
/* Le panneau d'intro laisse voir la scène : son fond est porté par le calque */
#cineStage { background: transparent !important; }
:root { --sylva-u: calc(100vw / 1600); }
@media (min-width: 1900px) { :root { --sylva-u: calc(1900px / 1600); } }

.sylva-hero {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; isolation: isolate;   /* garde le canvas (z 3) dans ce calque, sous les textes */
  pointer-events: none;
  /* fond Klarity d'origine (celui de #cineStage avant la scène) : noir chaud + or en haut à gauche,
     vert profond en bas à droite */
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(200,169,110,0.08) 0%, transparent 45%),
    radial-gradient(120% 110% at 100% 100%, rgba(27,46,31,0.28) 0%, transparent 50%),
    #1A1714;
}
/* nappe de lumière en bas, dans laquelle la racine est posée */
.sylva-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--sylva-pool, 1);   /* 1 sur le premier écran, 0 une fois passé (JS) */
  background:
    radial-gradient(72% 44% at 50% 117%, rgba(200,169,110,.34) 0%, rgba(200,169,110,.14) 42%, rgba(200,169,110,.03) 72%, rgba(200,169,110,0) 88%),
    linear-gradient(180deg, rgba(200,169,110,0) 54%, rgba(200,169,110,.02) 78%, rgba(200,169,110,.06) 100%);
}
/* Bloc de référence 1600 × 880 centré : le script y place la racine en unités de stage.
   Centré par marges et non par transform (un transform créerait un contexte d'empilement). */
.sylva-stage {
  position: absolute; left: 50%; top: 50%;
  margin-left: calc(-800 * var(--sylva-u));
  margin-top: calc(-440 * var(--sylva-u));
  width: calc(1600 * var(--sylva-u));
  height: calc(880 * var(--sylva-u));
}
#sylvaScene {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity .45s cubic-bezier(.22,.61,.36,1);
}
.sylva-ready #sylvaScene { opacity: 1; }
/* (2026-09-05) scene coupee (rendu logiciel ou effondrement mesure) : le fond CSS ci-dessus reste seul */
.sylva-off #sylvaScene { display: none; }

/* Écrans étroits (≤ 900 px) : stage 760u × 1625u (placement ARCH_N / FAR_N du script), centré.
   L'unité suit aussi la hauteur pour que la composition entière tienne dans l'écran ;
   si le stage est moins large que l'écran, le script agrandit les racines pour couvrir. */
@media (max-width: 900px) {
  :root {
    --sylva-u: min(100vw / 760, 100vh / 1625);
    --sylva-u: min(100vw / 760, 100svh / 1625);
  }
  .sylva-stage {
    margin-left: calc(-380 * var(--sylva-u));
    margin-top: calc(-812.5 * var(--sylva-u));
    width: calc(760 * var(--sylva-u));
    height: calc(1625 * var(--sylva-u));
  }
  .sylva-hero::after {
    background:
      radial-gradient(90% 30% at 50% 74%, rgba(200,169,110,.28) 0%, rgba(200,169,110,.10) 46%, rgba(200,169,110,0) 82%),
      linear-gradient(180deg, rgba(200,169,110,0) 62%, rgba(200,169,110,.04) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #sylvaScene { opacity: 1 !important; transition: none !important; }
}

/* ── Lisibilité du bloc texte sur la mousse ──────────────────────────────
   Halo sombre doux DERRIÈRE le titre / sous-titre / bouton (pas sur le fond : la racine
   reste visible autour), et sous-titre un peu plus présent. Suit l'opacité du bloc. */
#cineStage .cine-resolve::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 46% at 50% 52%,
    rgba(26, 23, 20, 0.46) 0%, rgba(26, 23, 20, 0.30) 45%, rgba(26, 23, 20, 0) 100%);
}
#cineStage .cine-resolve .hero-subtitle {
  color: rgba(250, 247, 242, 0.80);
  text-shadow: 0 1px 14px rgba(26, 23, 20, 0.6);
}
@media (max-width: 900px) {
  #cineStage .cine-resolve::before {
    background: radial-gradient(ellipse 95% 42% at 50% 50%,
      rgba(26, 23, 20, 0.58) 0%, rgba(26, 23, 20, 0.36) 50%, rgba(26, 23, 20, 0) 100%);
  }
}

/* ── Lisibilité au-dessus d'une mousse animée (body.has-sylva, posé quand la scène tourne) ──
   Le verre des cartes (rgba 6 %) laissait passer 94 % du fond : on lui donne une assise sombre
   dans la charte ; les textes nus (en-têtes, étapes, notes, pied de page) reçoivent un halo
   comme le bloc titre du hero ; les gris les plus faibles remontent un peu. Sans WebGL, rien
   de tout ça ne s'applique : le site garde son aspect d'origine. */
body.has-sylva .service-card,
body.has-sylva .pricing-card,
body.has-sylva .stats-inner,
body.has-sylva .cta-inner {
  background: linear-gradient(var(--glass), var(--glass)), rgba(26, 23, 20, 0.78);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.65);
}
body.has-sylva .pricing-card.featured { background: linear-gradient(rgba(200,169,110,.04), rgba(200,169,110,.04)), rgba(26, 23, 20, 0.82); }
body.has-sylva .pricing-card.premium  { background: linear-gradient(160deg, rgba(200,169,110,.09), rgba(200,169,110,.02)), rgba(26, 23, 20, 0.85); }
body.has-sylva .cta-inner {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,169,110,.06), transparent),
              linear-gradient(var(--glass), var(--glass)), rgba(26, 23, 20, 0.80);
}
body.has-sylva .form-input { background: rgba(26, 23, 20, 0.55); }

body.has-sylva .services-header, body.has-sylva .process-header, body.has-sylva .showcase-header > div,
body.has-sylva .pricing-header, body.has-sylva .process-step, body.has-sylva .footer-top,
body.has-sylva .pricing-note, body.has-sylva .footer-bottom, body.has-sylva .marquee-section { position: relative; isolation: isolate; }
body.has-sylva .services-header::before, body.has-sylva .process-header::before, body.has-sylva .showcase-header > div::before,
body.has-sylva .pricing-header::before, body.has-sylva .process-step::before, body.has-sylva .footer-top::before {
  content: ''; position: absolute; inset: -2rem -3rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(26,23,20,.62) 0%, rgba(26,23,20,.35) 55%, rgba(26,23,20,0) 100%);
}
body.has-sylva .section-title, body.has-sylva .section-tag, body.has-sylva .services-desc, body.has-sylva .showcase-desc,
body.has-sylva .pricing-desc, body.has-sylva .step-title, body.has-sylva .step-desc, body.has-sylva .pricing-note,
body.has-sylva .pricing-group-title, body.has-sylva .footer-col a, body.has-sylva .footer-col h4, body.has-sylva .footer-tagline,
body.has-sylva .footer-copy, body.has-sylva .marquee-item span, body.has-sylva .stat-number, body.has-sylva .stat-label {
  text-shadow: 0 1px 14px rgba(26,23,20,.65), 0 0 2px rgba(26,23,20,.8);
}
body.has-sylva .service-text { color: rgba(250,247,242,.58); }
body.has-sylva .step-desc { color: rgba(250,247,242,.55); }
body.has-sylva .pricing-note, body.has-sylva .footer-tagline, body.has-sylva .footer-col a { color: rgba(250,247,242,.5); }
body.has-sylva .stat-label { color: rgba(250,247,242,.45); }
body.has-sylva .marquee-item span { color: rgba(250,247,242,.35); }
body.has-sylva .footer-copy { color: rgba(250,247,242,.3); }
/* La barre de navigation floute un fond désormais animé : flou plus léger, sans transition dessus */
body.has-sylva nav.scrolled { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.has-sylva nav { transition: background 0.5s ease, top 0.4s ease; }