:root {
  --ch-accent: #C8AA6A;
  --ch-bg: #0A0A0E;
  --ch-ink: #EDF0F0;
  --ch-muted: rgba(237, 240, 240, 0.65);
}
[data-theme="light"] {
  --ch-accent: #9A7D38;
  --ch-bg: #E8E1D4;
  --ch-ink: #0A0A0E;
  --ch-muted: rgba(10, 10, 14, 0.6);
}

/* transparent : #chargement (z:50) porte son propre fond pendant le
   chargement ; un fond opaque ici masquerait #scene (canvas, z:-1) une
   fois la vidéo active — html devient le fond "canvas" spécial du
   navigateur, peint sous TOUT le reste y compris les z-index négatifs. */
html { background: transparent; height: 100lvh; }
body { overflow-x: hidden; position: static; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* z-index négatif, pas 0 : .hero-bg-video (site existant) est aussi à
     z-index:0 dans le contexte racine (.hero n'isole pas de contexte
     d'empilement propre), donc l'égalité se départageait par ordre DOM —
     #scene arrivant après .hero-section dans le DOM, il passait PAR-DESSUS
     la vidéo du Hero. z-index négatif = toujours sous tout contenu normal
     (Hero, marquee, chapitres en z-index:auto), jamais de bleed-through. */
  z-index: -1;
}

#chargement {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ch-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
#chargement-barre {
  width: 200px;
  height: 2px;
  background: rgba(128, 128, 128, 0.25);
  position: relative;
  overflow: hidden;
}
#chargement-barre::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--progres, 0%);
  background: var(--ch-accent);
  transition: width 0.15s linear;
}
#chargement.fondu { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }

.repli-statique #scene { display: none; }

#barre-scroll {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--ch-accent);
  z-index: 40;
  pointer-events: none;
}

#contenu { position: relative; z-index: 1; height: 900vh; }
#chapitres { position: relative; z-index: 1; }

.chapitre {
  position: fixed;
  top: 50%;
  max-width: min(46vw, 640px);
  transform: translateY(-50%);
  padding: 2.5rem 2.75rem;
  pointer-events: none;
  color: var(--ch-ink);
}
.chapitre::before {
  content: '';
  position: absolute;
  inset: -2rem;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(8px);
  z-index: -1;
}
[data-theme="light"] .chapitre::before {
  background: radial-gradient(ellipse at center, rgba(232, 225, 212, 0.75), transparent 72%);
}
.chapitre--gauche { left: 6vw; text-align: left; }
.chapitre--droite { right: 6vw; text-align: right; }
.chapitre--centre { left: 50%; transform: translate(-50%, -50%); text-align: center; }

.chapitre-titre {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* contour doré fin : le texte reste lisible même sur une frame vidéo
     sombre, quel que soit le thème (le fill utilise déjà --ch-ink). */
  -webkit-text-stroke: 0.6px #C8AA6A;
  paint-order: stroke fill;
}
.chapitre-titre span { display: block; }
.chapitre-corps {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  color: var(--ch-muted);
  margin-top: 1rem;
  max-width: 46ch;
}
.chapitre--droite .chapitre-corps { margin-left: auto; }
.chapitre-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  /* .chapitre parent est pointer-events:none (laisse passer le scroll sous
     le texte) — sans ce override, ces liens étaient injoignables au clic
     malgré leur apparence de bouton. */
  pointer-events: auto;
}
.chapitre--droite .chapitre-tags { justify-content: flex-end; }
.chapitre-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--ch-couleur, var(--ch-accent));
  color: var(--ch-couleur, var(--ch-accent));
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.chapitre-tag:hover {
  background: var(--ch-couleur, var(--ch-accent));
  color: var(--ch-bg);
  transform: translateY(-1px);
}
.chapitre-actions { margin-top: 1.5rem; pointer-events: auto; }

/* Cadre "moniteur" : bezel qui héberge le contenu des démos existantes
   (inchangées), sans compositing vidéo réel — juste une composition
   visuelle assumée, pas un tracking d'écran dans les frames. */
.chapitre-moniteur {
  margin-top: 1.5rem;
  pointer-events: auto;
  border-radius: 18px;
  border: 1px solid rgba(237, 240, 240, 0.14);
  border-top: 2px solid var(--ch-couleur, var(--ch-accent));
  background: rgba(12, 12, 16, 0.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  max-width: 560px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.chapitre-moniteur:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .chapitre-moniteur {
  background: rgba(232, 225, 212, 0.6);
  border-color: rgba(10, 10, 14, 0.1);
}
/* Formes par chapitre — ouverture demandée sur les formes/placement */
.chapitre-moniteur--carre { aspect-ratio: 1; max-width: 360px; }
.chapitre-moniteur--large { max-width: 760px; }
/* Le widget Lancement (texte + mockup navigateur côte à côte) déborde du
   .chapitre parent (min(46vw,640px)) : élargi pour ce chapitre seulement,
   le texte (titre/corps) garde sa largeur propre (46ch sur .chapitre-corps). */
#chapitre-lancement { max-width: min(64vw, 900px); }
/* .ln-panel (mockup navigateur) n'a que du contenu position:absolute :
   largeur intrinsèque ~0, le flex row se contractait au lieu d'utiliser
   la place disponible (même piège que le widget ARES, en largeur). */
.chapitre-moniteur .ln-panel { min-width: 320px; }
/* Widgets à contenu absolument positionné (ex. svc-04/ARES) qui tiraient
   leur hauteur de l'ancienne grille CSS magazine (supprimée) : sans elle,
   ils s'effondrent à hauteur nulle une fois relocalisés dans le moniteur. */
.chapitre-moniteur--scene { height: 400px; }
.chapitre-moniteur--scene > div,
.chapitre-moniteur--scene .svc-item { height: 100%; }

/* Nav verticale, ancrée à droite — masquée par défaut (autoAlpha via GSAP,
   voir chapitres.js), révélée seulement à l'entrée dans #contenu, jamais
   pendant le Hero. */
#chapitres-nav {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  visibility: hidden;
}

/* Piste de progression globale : trait fin derrière la pile de boutons,
   rempli de haut en bas au fil du scroll dans #contenu (self.progress du
   ScrollTrigger maître de la nav). */
#chapitres-nav-piste {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(237, 240, 240, 0.14);
  border-radius: 999px;
  z-index: 0;
}
[data-theme="light"] #chapitres-nav-piste { background: rgba(10, 10, 14, 0.12); }
#chapitres-nav-progres {
  width: 100%;
  height: calc(var(--progres-scroll, 0) * 100%);
  background: var(--ch-accent);
  border-radius: 999px;
}

.chapitre-nav-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ch-muted);
}
.cnb-anneau {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  transition: opacity 0.2s ease;
}
.cnb-anneau-fond {
  fill: rgba(10, 10, 14, 0.55);
  stroke: rgba(237, 240, 240, 0.18);
  stroke-width: 1.5;
}
[data-theme="light"] .cnb-anneau-fond { fill: rgba(232, 225, 212, 0.65); stroke: rgba(10, 10, 14, 0.14); }
.cnb-anneau-prog {
  fill: none;
  stroke: var(--ch-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.cnb-icone {
  position: relative;
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.chapitre-nav-btn:hover .cnb-icone { color: var(--ch-ink); }
.chapitre-nav-btn.actif .cnb-icone { color: var(--ch-accent); transform: scale(1.15); }
.chapitre-nav-btn.actif .cnb-anneau-fond { stroke: var(--ch-accent); }

@media (max-width: 768px) {
  .chapitre { max-width: 84vw; padding: 1.5rem; left: 8vw !important; right: 8vw !important; text-align: left !important; transform: translateY(-50%) !important; }
  .chapitre--droite .chapitre-corps,
  .chapitre--droite .chapitre-tags { margin-left: 0; justify-content: flex-start; }
  .chapitre-moniteur { max-width: 100%; }
  .chapitre-moniteur--scene { height: 320px; }

  /* Sur mobile, la nav perd ses boutons (pas la place) mais garde la piste
     de progression, reconvertie à l'horizontale et ancrée en bas — même
     source de vérité (--progres-scroll) et même logique d'apparition
     (masquée pendant le Hero, cf. ScrollTrigger onEnter/onLeaveBack dans
     chapitres.js) que la nav desktop. */
  #chapitres-nav {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    padding: 0;
    gap: 0;
  }
  .chapitre-nav-btn { display: none; }
  #chapitres-nav-piste {
    position: static;
    width: 100%;
    height: 4px;
    transform: none;
  }
  #chapitres-nav-progres {
    height: 100%;
    width: calc(var(--progres-scroll, 0) * 100%);
  }
}

.chapitre-cta {
  display: inline-block;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ch-bg);
  background: var(--ch-accent);
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  margin-right: 0.6rem;
  margin-bottom: 0.5rem;
}
.chapitre-cta--fantome {
  background: transparent;
  color: var(--ch-ink);
  border: 1px solid var(--ch-muted);
}