/* =========================================================
   DA du site lequilibristebienetre.fr
   ========================================================= */
:root {
  --terracotta: #D35355;
  --orange: #D96B2F;
  --ink: #382D2D;
  --ink-soft: #7A6E6E;
  --cream: #EDE2D7;
  --cream-light: #F7F1EA;
  --white: #FFFFFF;
  --gradient: linear-gradient(90deg, #D96B2F, #D35355);

  --font-title: 'Philosopher', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --fil-x: 28px;          /* position horizontale du fil dans la colonne des chapitres */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(211,83,85,.45) transparent; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--terracotta); }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.placeholder { font-style: italic; color: var(--ink-soft); }

/* mot masqué (révélation par glissement) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- intro ---------- */
.hero {
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 96px 24px 48px;
  position: relative;
}
.hero__eyebrow {
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 22px;
}
.hero__title {
  font-size: clamp(40px, 7vw, 88px); line-height: 1.04; max-width: 13ch;
  margin-bottom: 26px;
}
.hero__sign { width: 72px; height: 66px; color: var(--terracotta); margin-bottom: 26px; }
.hero__text { max-width: 620px; font-size: 18px; text-align: left; }
.hero__text:empty { display: none; }
.hero__text p:last-child { margin-bottom: 0; }
.hero__scroll {
  position: absolute; bottom: 36px; left: 50%;
  width: 1px; height: 64px; overflow: hidden; background: rgba(56,45,45,.14);
}
.hero__scroll span {
  position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--terracotta); animation: scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint { to { top: 100%; } }

/* ---------- la frise : 2 colonnes ---------- */
.frise {
  display: grid;
  grid-template-columns: 44% 1fr;
  position: relative;
}

/* --- la scène (colonne gauche, fixe) --- */
.stage {
  position: sticky; top: 0; height: 100vh;
  background: var(--cream);
  overflow: hidden;
  display: flex; align-items: center;
}
.stage__blob {
  position: absolute; width: 130%; left: -25%; top: 50%; margin-top: -65%;
  color: var(--terracotta); opacity: .07;
  fill: currentColor;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.stage__inner {
  position: relative; width: 100%;
  padding: 0 9% 0 12%;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
}

.stage__year {
  font-family: var(--font-title);
  line-height: .9; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  min-height: 1em;
}
.stage__year-main { font-size: clamp(88px, 11vw, 168px); display: inline-flex; }
.stage__year-main.is-word { font-size: clamp(52px, 5.6vw, 84px); font-style: italic; }
/* le dégradé est posé sur CHAQUE caractère : un parent en background-clip:text
   rend invisibles ses enfants animés en transform (bug Chrome) */
.stage__year-main .c, .chapter__year .c {
  display: inline-block; will-change: transform;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* le dégradé ne peint que la boîte du caractère : on l'agrandit (padding)
     sans bouger la mise en page (margin négative) pour ne pas couper
     les jambages de l'italique (g, O…) */
  padding: .22em .08em; margin: -.22em -.08em;
}
.stage__year-suffix { font-size: clamp(22px, 2.2vw, 32px); color: var(--terracotta); opacity: .85; }

.stage__icons {
  position: relative; width: clamp(140px, 16vw, 220px); aspect-ratio: 1;
  margin: 14px 0 6px;
}
.stage__icon {
  position: absolute; inset: 0; color: var(--terracotta);
  visibility: hidden; opacity: 0;
}
.stage__icon svg { width: 100%; height: 100%; overflow: visible; }
.stage__icon [stroke] { stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }

.stage__title { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.1; }
.stage__tagline { font-size: 17px; color: var(--ink-soft); margin: 8px 0 0; min-height: 1.2em; }
.stage__tagline:empty { display: none; }

.stage__progress {
  margin-top: 26px;
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .2em; color: var(--ink-soft);
}
.stage__bar { flex: 0 0 120px; height: 1px; background: rgba(56,45,45,.15); position: relative; }
.stage__bar i {
  position: absolute; left: 0; top: -.5px; height: 2px; width: 100%;
  background: var(--gradient); transform-origin: 0 50%; transform: scaleX(0);
}
.stage__count { color: var(--terracotta); }

/* --- le fil des chapitres (colonne droite) --- */
.flow {
  position: relative;
  padding: 14vh 9% 14vh calc(var(--fil-x) + 56px);
}
.fil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.fil__ghost { fill: none; stroke: rgba(56,45,45,.12); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.fil__line  { fill: none; stroke: url(#fil-gradient); stroke-width: 2.2; stroke-linecap: round; }
.fil__marker { fill: var(--cream-light); stroke: rgba(211,83,85,.45); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.fil__marker.is-lit { fill: var(--terracotta); stroke: var(--terracotta); }
.fil__pen circle:first-child { fill: rgba(211,83,85,.16); }
.fil__pen circle:last-child { fill: var(--terracotta); }

.chapter {
  min-height: 56vh;
  padding-bottom: 12vh;
  opacity: .32;
  transition: opacity .5s ease;
}
.chapter.is-active { opacity: 1; }
.chapter:last-child { min-height: 0; padding-bottom: 0; }

/* en-tête de chapitre : visible seulement sur mobile (la scène le remplace sur desktop) */
.chapter__head { display: none; }

.chapter__group + .chapter__group { margin-top: 26px; }
.chapter__label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 12px;
}
.chapter__label svg { width: 18px; height: 18px; }
.chapter__list li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 17px; line-height: 1.5;
}
.chapter__list li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px;
  background: var(--terracotta); border-radius: 2px;
}
.chapter__empty { color: var(--ink-soft); font-style: italic; }

/* liens vers les attestations (PDF) dans les puces Diplôme */
.chapter__list a {
  color: var(--terracotta); text-decoration: none;
  border-bottom: 1px solid rgba(211,83,85,.35); padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.chapter__list a:hover { border-color: var(--terracotta); }
.chapter__list a[href$=".pdf"]::after {
  content: "PDF"; display: inline-block; margin-left: 6px; padding: 1px 5px 0;
  font-size: 9.5px; letter-spacing: .1em; line-height: 1.5; vertical-align: 2px;
  color: var(--terracotta); border: 1px solid rgba(211,83,85,.4); border-radius: 4px;
}
.chapter__list .date { color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.chapter__list .sub { display: block; margin-top: 3px; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }

/* récit replié */
.chapter__more {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(211,83,85,.35); border-radius: 999px;
  background: none; padding: 10px 18px;
  color: var(--terracotta); font-weight: 500; font-size: 14px;
  transition: background .3s, color .3s;
}
.chapter__more:hover, .chapter__more[aria-expanded="true"] { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.chapter__more::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s;
}
.chapter__more[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(2px); }
.chapter__recit { height: 0; overflow: hidden; opacity: 0; }
.chapter__recit-inner { padding-top: 20px; max-width: 58ch; font-size: 17px; }

/* ---------- conclusion ---------- */
.outro {
  max-width: 680px; margin: 0 auto; text-align: center;
  padding: 16vh 24px 18vh;
}
.outro__eyebrow { font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; }
.outro__title { font-size: clamp(34px, 5vw, 56px); margin-bottom: 22px; }
.outro__text { text-align: left; font-size: 18px; }
.outro__text p:last-child { margin-bottom: 0; }

/* ---------- mobile / tablette ---------- */
@media (max-width: 900px) {
  :root { --fil-x: 22px; }
  .frise { display: block; }
  .stage { display: none; }
  .flow { padding: 8vh 20px 8vh calc(var(--fil-x) + 34px); }

  .chapter { min-height: 0; padding-bottom: 12vh; opacity: 1; }
  .chapter__head { display: block; margin-bottom: 20px; }
  .chapter__year {
    font-family: var(--font-title); font-size: 64px; line-height: 1;
    display: inline-flex; align-items: baseline; gap: 10px;
  }
  .chapter__year-main.is-word { font-size: 40px; font-style: italic; }
  .chapter__year small { font-size: 20px; color: var(--terracotta); }
  .chapter__icon { width: 92px; aspect-ratio: 1; color: var(--terracotta); margin: 12px 0 10px; }
  .chapter__icon svg { width: 100%; height: 100%; overflow: visible; }
  .chapter__icon [stroke] { stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .chapter__title { font-size: 30px; line-height: 1.1; }
  .chapter__tagline { color: var(--ink-soft); margin: 6px 0 0; }
  .chapter__tagline:empty { display: none; }
  .chapter__list li { font-size: 16px; }
  .hero { min-height: 80vh; }
}

/* ---------- accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scroll span { animation: none; }
  .chapter { opacity: 1; }
}