/* ==========================================================================
   Page Projets — l'histoire au scroll
   ========================================================================== */

/* Barre de progression du récit */
.story-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  background: var(--line);
}
.story-progress i{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--orange));
}

/* Indicateur de chapitre courant */
.story-chapter{
  position: fixed;
  bottom: 26px;
  right: clamp(20px, 4vw, 48px);
  z-index: 90;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(251,250,246,0.85);
  backdrop-filter: blur(4px);
  transition: color .4s;
}
@media (max-width: 780px){ .story-chapter{ display: none; } }

/* ==========================================================================
   Prologue
   ========================================================================== */

.prologue{
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px clamp(20px, 5vw, 64px) 80px;
}
.prologue__kicker{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.prologue__title{
  margin-top: 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 6.4vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.prologue__title em{ font-style: normal; color: var(--pink); }
.prologue__lede{
  margin-top: 24px;
  max-width: 58ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.prologue__hint{
  margin-top: 46px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Chapitres
   ========================================================================== */

.chapter{
  position: relative;
  z-index: 1;
  padding: 0 clamp(20px, 5vw, 64px) clamp(70px, 10vh, 120px);
  border-top: 1px solid var(--line);
}

.chapter__intro{
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.chapter__num{
  position: absolute;
  right: -1vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(11rem, 34vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16,16,16,0.14);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.chapter__title{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.chapter__title.is-visible{ opacity: 1; transform: none; }
.chapter__title em{ font-style: normal; color: var(--pink); }

.chapter__sub{
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* ==========================================================================
   Projets — planches alternées animées
   ========================================================================== */

.proj{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(34px, 6vh, 64px) 0;
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.proj[data-side="left"]{  transform: translateX(-60px); }
.proj[data-side="right"]{ transform: translateX(60px); }
.proj.is-visible{ opacity: 1; transform: none; }
.proj[data-side="right"] .proj__art{ order: 2; }

.proj__art{
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 460/340;
  background: #0d0d0d;
}
.proj__art svg{ width: 100%; height: 100%; display: block; transition: transform .6s var(--ease); }
.proj:hover .proj__art svg{ transform: scale(1.04); }
.proj__art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.proj:hover .proj__art img{ transform: scale(1.04); }

.proj__cat{
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.proj__name{
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  letter-spacing: -0.01em;
}
.proj__desc{
  margin-top: 14px;
  color: var(--muted);
  max-width: 48ch;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
}

/* Apparitions génériques du récit */
.st-reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.st-reveal.is-visible{ opacity: 1; transform: none; }

@media (max-width: 820px){
  .story-progress{ height: 2px; }
  .story-chapter{ display: none; }

  .prologue{
    min-height: auto;
    padding: 112px 18px 74px;
  }
  .prologue__title{
    margin-top: 0;
    max-width: 12ch;
    font-size: clamp(2.25rem, 11.4vw, 3.45rem);
    line-height: 1.04;
    text-wrap: balance;
  }
  .prologue__lede{
    margin-top: 22px;
    max-width: 32ch;
    font-size: 1rem;
  }
  .prologue__hint{
    margin-top: 34px;
    font-size: 10.5px;
  }

  .chapter{
    padding: 0 18px 58px;
  }
  .chapter__intro{
    min-height: auto;
    justify-content: flex-end;
    padding: 74px 0 34px;
  }
  .chapter__num{
    right: -12px;
    top: 18%;
    font-size: clamp(7rem, 36vw, 12rem);
    -webkit-text-stroke-width: 1px;
  }
  .chapter__title{
    font-size: clamp(2.1rem, 10.8vw, 3.5rem);
    line-height: 1.02;
    max-width: 12ch;
    text-wrap: balance;
  }
  .chapter__sub{
    max-width: 28ch;
    font-size: 1rem;
  }

  .proj{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px 0;
  }
  .proj[data-side="right"] .proj__art{ order: 0; }
  .proj[data-side="left"],
  .proj[data-side="right"]{ transform: translateY(36px); }
  .proj__art{
    border-radius: 10px;
    aspect-ratio: 16/11;
  }
  .proj__body{
    padding: 0 2px;
  }
  .proj__cat{
    font-size: 9.5px;
    letter-spacing: 0.15em;
  }
  .proj__name{
    margin-top: 8px;
    font-size: clamp(1.42rem, 7vw, 2rem);
    line-height: 1.08;
  }
  .proj__desc{
    margin-top: 10px;
    max-width: none;
    font-size: 0.96rem;
  }
  .st-reveal,
  .chapter__title,
  .proj{
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 520px){
  .prologue__title{
    font-size: clamp(2rem, 10vw, 2.7rem);
  }
  .chapter__title{
    font-size: clamp(1.9rem, 9.8vw, 2.65rem);
  }
  .chapter__intro{
    min-height: auto;
  }
}