/* ══════════════════════════════════════════════
   LE VOYAGE — Timeline énergétique
   Grandes lignes : énergie, temples, travail.
   ══════════════════════════════════════════════ */

/* ── Timeline ─────────────────────────────────── */
.s-timeline{
  background:var(--calcaire);
  color:var(--encre);
  padding-block:clamp(48px, 7vh, 96px);
  position:relative;
  overflow-x:clip;
}
.timeline-tete{
  max-width:920px;
  margin:0 auto clamp(1.4rem, 3vh, 2.2rem);
  padding-inline:var(--pad-x);
}
@media (min-width:980px){
  .timeline-tete{ max-width:1180px; }
}
.timeline{
  position:relative;
  max-width:920px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.timeline::before{
  content:"";
  position:absolute;
  left:calc(var(--pad-x) + 1.05rem);
  top:0; bottom:0;
  width:2px;
  background:color-mix(in srgb, var(--encre) 12%, transparent);
}
.timeline-fill{
  position:absolute;
  left:calc(var(--pad-x) + 1.05rem);
  top:0;
  width:2px;
  height:0;
  background:linear-gradient(180deg, var(--ocre), var(--ocre-clair));
  pointer-events:none;
  z-index:1;
  transition:height .1s linear;
}
@media (min-width:720px){
  .timeline::before,
  .timeline-fill{ left:calc(var(--pad-x) + 3.1rem); }
}

.phase{
  position:relative;
  margin:2.2em 0 1em;
  padding-left:3.4rem;
}
@media (min-width:720px){ .phase{ padding-left:6.5rem; } }
.phase-nom{
  font-family:var(--f-display);
  font-size:clamp(1.25rem, 2.4vw, 1.75rem);
  font-style:italic;
  font-weight:400;
  color:var(--ocre);
  letter-spacing:.01em;
  line-height:1.25;
}

/* ── Jour ─────────────────────────────────────── */
.jour-etape{
  position:relative;
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:0 .85rem;
  padding:1.35rem 0 1.9rem;
  align-items:start;
}
@media (min-width:720px){
  .jour-etape{
    grid-template-columns:auto 1fr;
    gap:0 clamp(1rem, 3vw, 2rem);
    padding:1.6rem 0 2.4rem;
  }
}
.jour-etape + .jour-etape{
  border-top:1px solid color-mix(in srgb, var(--encre) 10%, transparent);
}

.jour-repere{
  position:relative;
  z-index:2;
  width:2.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding-top:.2rem;
}
@media (min-width:720px){
  .jour-repere{ width:6.2rem; }
}
.jour-repere .point{
  width:.85rem; height:.85rem;
  border-radius:50%;
  background:var(--calcaire);
  border:2px solid var(--ocre);
  box-shadow:0 0 0 4px var(--calcaire);
  transition:background .35s, transform .35s;
}
.jour-etape.visible .point,
.jour-etape:hover .point{
  background:var(--ocre);
  transform:scale(1.15);
}
.jour-chiffre{
  font-family:var(--f-display);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--encre);
  font-variation-settings:"opsz" 144;
}
@media (max-width:719px){
  .jour-chiffre{ display:none; }
}

.jour-corps{ min-width:0; padding-top:.05rem; overflow-wrap:anywhere; }
.jour-meta{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.35em 1em; margin-bottom:.5em;
}
.jour-num-mobile{
  display:none;
  font-family:var(--f-body);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ocre);
}
@media (max-width:719px){ .jour-num-mobile{ display:inline; } }
.jour-date{
  font-size:.88rem;
  opacity:.62;
  font-style:italic;
}
.jour-verbe{
  display:block;
  font-family:var(--f-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.55rem, 6.5vw, 2.7rem);
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--encre);
  line-height:1.15;
  margin:.15em 0 .5em;
  text-wrap:balance;
}
.jour-lieux{
  font-family:var(--f-display);
  font-size:clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight:400;
  line-height:1.35;
  margin:0 0 .65em;
  opacity:.78;
  text-wrap:balance;
}
.jour-lieux a{
  color:inherit;
  border-bottom-color:color-mix(in srgb, var(--ocre) 35%, transparent);
}
.jour-lieux a:hover{ color:var(--ocre); border-bottom-color:var(--ocre); }

.jour-intention{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.08rem, 2.4vw, 1.4rem);
  line-height:1.45;
  color:var(--ocre);
  margin:0 0 .85em;
  max-width:36rem;
}
.jour-texte{
  max-width:38rem;
  font-size:clamp(1.02rem, 2.2vw, 1.12rem);
  line-height:1.7;
  opacity:.9;
}
.jour-texte p + p{ margin-top:.85em; }

.jour-travail{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45em;
  margin-top:1.05em;
  padding:.55em .9em;
  font-size:.82rem;
  letter-spacing:.06em;
  background:color-mix(in srgb, var(--aube) 70%, transparent);
  border-left:3px solid var(--ocre);
  color:var(--encre);
  max-width:100%;
}
.jour-travail strong{ font-weight:500; letter-spacing:.04em; }

/* ── Fleuve — plein cadre ─────────────────────── */
.s-fleuve{
  position:relative;
  color:var(--calcaire);
  min-height:min(72vh, 38rem);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(64px, 10vh, 120px) 0;
}
.fleuve-fond{
  position:absolute; inset:0; z-index:0; margin:0;
}
.fleuve-fond img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1.03);
  transition:transform 1.4s ease;
}
.s-fleuve:hover .fleuve-fond img{ transform:scale(1.08); }
.fleuve-voile{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--osiris) 88%, transparent) 0%,
      color-mix(in srgb, var(--osiris) 55%, transparent) 55%,
      color-mix(in srgb, var(--osiris) 35%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--osiris) 70%, transparent), transparent 50%);
  pointer-events:none;
}
.fleuve-contenu{
  position:relative; z-index:2;
  max-width:40rem;
  padding-inline:var(--pad-x);
}
.fleuve-contenu .sec-titre{
  max-width:14ch;
  color:var(--calcaire);
}
.fleuve-lead{
  margin-top:1.1em;
  font-size:clamp(1.1rem, 2.2vw, 1.3rem);
  line-height:1.55;
  opacity:.9;
  max-width:28rem;
}
.fleuve-faits{
  list-style:none;
  margin-top:1.8em;
  max-width:28rem;
}
.fleuve-faits li{
  padding:1em 0;
  border-bottom:1px solid color-mix(in srgb, var(--calcaire) 16%, transparent);
  line-height:1.55;
  font-size:1.02rem;
}
.fleuve-faits li:last-child{ border-bottom:none; }
.fleuve-faits strong{
  display:block;
  font-family:var(--f-display);
  font-weight:400;
  font-size:1.1rem;
  margin-bottom:.25em;
  color:var(--ocre-clair);
}

.s-fin{ background:var(--aube); padding-block:clamp(56px, 8vh, 96px); }

@media (max-width:719px){
  .s-timeline{ padding-block:clamp(40px, 8vh, 64px); }
  .timeline-tete .sec-titre{ max-width:10ch; }
  .jour-travail{ width:100%; box-sizing:border-box; }
  .s-fleuve{ min-height:min(70vh, 32rem); }
  .fleuve-voile{
    background:
      linear-gradient(0deg,
        color-mix(in srgb, var(--osiris) 92%, transparent) 0%,
        color-mix(in srgb, var(--osiris) 55%, transparent) 45%,
        color-mix(in srgb, var(--osiris) 40%, transparent) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .jour-repere .point{ transition:none; }
  .fleuve-fond img,
  .s-fleuve:hover .fleuve-fond img{ transition:none; transform:none; }
}