/* ============================================================
   JESSPROD — cv-space.css
   Espace CV immersif (9 chapitres) — piloté par le scroll.
   Base = liste verticale lisible (mobile / mouvement réduit / sans JS).
   .cv-scene  = scène épinglée avec profondeur (desktop, ajouté par JS)
   .cv-anim   = apparition au scroll (mobile, ajouté par JS)
   ============================================================ */

.cv-space {
  --S: min(92vw, 520px);                 /* côté du carré image */
  --OH: -0.35;                           /* part de l'image hors écran : 35 % */
  position: relative;
  z-index: 1;
  background-color: var(--dark);
  color: var(--text-main);
  overflow-x: clip;
}
.cv-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Base : liste verticale ---------- */
.cv-track { padding: 5.5rem 0 3rem; }
.cv-stage { position: relative; }
.cv-bg, .cv-count, .cv-fade { display: none; }
.cv-chaps { list-style: none; margin: 0; padding: 0; }
.cv-chap { position: relative; margin: 0 0 5.5rem; }
.cv-card { display: flex; flex-direction: column; gap: 1.8rem; }

.cv-img {
  position: relative;
  width: var(--S); height: var(--S);
  flex: none;
  margin: 0;
}
.cv-img::before {                         /* halo doré derrière l'image */
  content: ""; position: absolute; inset: -12%;
  background: radial-gradient(circle, rgba(201,162,39,.20), transparent 62%);
  pointer-events: none;
}
.cv-img img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
/* l'image déborde d'un quart hors du site */
.cv-chap.is-left  .cv-img { margin-left: calc(var(--S) * var(--OH)); }
.cv-chap.is-right .cv-img { margin-left: auto; margin-right: calc(var(--S) * var(--OH)); }

.cv-text { padding: 0 1.6rem; max-width: 560px; }
.cv-num {
  display: block; margin-bottom: .7rem;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; color: var(--gold);
}
.cv-lead {
  display: block; margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5.6vw, 1.85rem);
  font-weight: 400; line-height: 1.22;
  color: var(--cream);
}
.cv-text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.98rem, 3.9vw, 1.06rem);
  line-height: 1.75;
  color: rgba(240, 235, 224, .8);
}
.cv-chap.is-right .cv-text { margin-left: auto; }

/* Bouton final « Travailler avec moi » (même style que les boutons du site) */
.cv-cta { margin-top: 1.6rem; text-decoration: none; }
.cv-cta span { transition: transform .3s ease; display: inline-block; }
.cv-cta:hover span { transform: translateX(4px); }
.cv-scene .cv-cta { margin-top: 1.8rem; font-size: clamp(.85rem, .95vw, 1rem); }

/* ---------- Mobile : apparition au scroll, l'image entre par son bord ---------- */
.cv-anim .cv-img {
  opacity: 0;
  transform: translateX(-42vw);
  transition: opacity .9s var(--im-ease-out, ease), transform 1.1s var(--im-ease-out, ease);
}
.cv-anim .is-right .cv-img { transform: translateX(42vw); }
.cv-anim .cv-text {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s ease .2s, transform 1s var(--im-ease-out, ease) .2s;
}
.cv-anim .cv-chap.is-in .cv-img,
.cv-anim .cv-chap.is-in .cv-text { opacity: 1; transform: none; }

/* ============================================================
   SCÈNE (desktop) : tout est piloté par le scroll via JS
   ============================================================ */
.cv-scene { --S: min(90vh, 70vw, 1100px); --cv-k: 1; }   /* image = 90 % de la hauteur de l'écran */
/* la zone démarre plus haut : on rogne le grand vide sous la galerie (8rem de marge vide) */
.cv-scene { margin-top: -6rem; }
.cv-scene .cv-track { padding: 0; }                 /* hauteur posée par JS */
.cv-scene .cv-stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  contain: layout paint;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(201,162,39,.05), transparent 70%),
    var(--dark);
}
.cv-scene .cv-bg { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cv-dust {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 1000px);
  background-repeat: repeat;
  will-change: transform;
}
.cv-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.20), transparent 68%);
  will-change: transform;
}
.cv-orb.o1 { width: 46vw; height: 46vw; left: 27vw; top: -10vh; }
.cv-orb.o2 { width: 34vw; height: 34vw; left: 38vw; top: 62vh; background: radial-gradient(circle, rgba(212,135,74,.12), transparent 65%); }

.cv-scene .cv-chaps { position: absolute; inset: 0; }
.cv-scene .cv-chap {
  position: absolute; top: 50%; margin: 0;
  translate: 0 -50%;                    /* centré verticalement, sans calque plein écran */
  width: max-content;
  display: flex; align-items: center;
  opacity: 0;                           /* JS révèle les chapitres proches */
}
.cv-scene .cv-chap.is-left  { left: 0;  transform-origin: 100% 50%; }
.cv-scene .cv-chap.is-right { right: 0; transform-origin: 0% 50%; }
.cv-scene .cv-card { flex-direction: row; align-items: center; gap: clamp(1.4rem, 2.6vw, 3rem); }
.cv-scene .is-right .cv-card { flex-direction: row-reverse; }
.cv-scene .cv-img { margin: 0; }
.cv-scene .is-left  .cv-img { margin-left: calc(var(--S) * var(--OH)); }
.cv-scene .is-right .cv-img { margin-right: calc(var(--S) * var(--OH)); margin-left: 0; }
.cv-scene .cv-text { width: min(34vw, 560px); min-width: 260px; max-width: none; padding: 0; }
.cv-scene .cv-text p { font-size: calc(clamp(1rem, 1.6vw, 1.5rem) * var(--cv-k)); line-height: 1.7; }
.cv-scene .cv-lead { font-size: calc(clamp(1.7rem, 3vw, 3rem) * var(--cv-k)); margin-bottom: .7rem; }
.cv-scene .cv-text { margin: 0; }

/* chapitre 3 : image plus grande (100 % de la hauteur d'écran), scène uniquement */
.cv-scene .cv-chap[data-i="3"] { --S: min(100vh, 76vw, 1200px); }

/* dégradés haut/bas : adoucissent les « bouts » des chapitres voisins */
.cv-scene .cv-fade {
  display: block; position: absolute; left: 0; right: 0; height: 9vh;
  pointer-events: none; z-index: 3;
}
.cv-scene .cv-fade.top    { top: 0;    background: linear-gradient(to bottom, var(--dark) 15%, transparent); }
.cv-scene .cv-fade.bottom { bottom: 0; background: linear-gradient(to top, var(--dark) 10%, transparent); }

/* compteur 03 / 09 */
.cv-scene .cv-count {
  display: flex; align-items: center; gap: .9rem;
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  z-index: 4; pointer-events: none;
  padding: .55rem 1.1rem; border-radius: 100px;
  background: rgba(13,12,8,.82); border: 1px solid rgba(201,162,39,.18);
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; color: var(--text-muted);
}
.cv-count-n { color: var(--gold); min-width: 1.6em; text-align: right; }
.cv-count-bar { position: relative; width: 70px; height: 1px; background: rgba(201,162,39,.25); }
.cv-count-bar b {
  position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* mouvement réduit : liste simple, sans animation */
@media (prefers-reduced-motion: reduce) {
  .cv-anim .cv-img, .cv-anim .cv-text { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Pendant la scène : on coupe les effets coûteux du reste du site
   (flou de la barre de menu, fusion du curseur, boucles d'ambiance)
   pour garder le défilement parfaitement fluide.
   ============================================================ */
body.cv-active .nav,
body.cv-active .nav.scrolled {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(13, 12, 8, .94);
}
body.cv-active .cursor { mix-blend-mode: normal; }
body.cv-active .im-hero-fixed,
body.cv-active .im-hero-fixed * { animation-play-state: paused !important; }