/* ==================================================
   JOURNEY INTRO
   Sans JS ou avec reduced motion : un simple écran d'ouverture
   suivi des chapitres. journey--live active le scrollytelling.
   ================================================== */

.journey {
  --wall: #DDE3EA;
  --floor: #AEB7C2;
  --frame: #F6F7F9;
  --door: #24324A;
  --ink: #16202E;
  position: relative;
  background: var(--wall);
  color: var(--ink);
}

.journey__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.journey__canvas,
.journey__door,
.journey__chapter {
  display: none;
}

.journey__door-text {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.journey__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 8vw, 5rem);
  font-weight: 600;
  line-height: 1.02;
  color: var(--ink);
}

.journey__role {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  color: var(--ink);
}

.journey__hint {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #3A4A5E;
}

.journey__skip {
  position: absolute;
  z-index: 6;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  color: #FFF8EA;
  font-size: 0.85rem;
  text-decoration: none;
}

.journey__skip:hover {
  background: rgba(10, 14, 40, 0.8);
}

/* Version non animée */
.journey:not(.journey--live) .journey__chapter {
  display: block;
  padding: 1.5rem;
  max-width: 44rem;
  margin: 0 auto;
}

.journey:not(.journey--live) .journey__skip {
  display: none;
}

.journey:not(.journey--live) .journey__chapters {
  padding-bottom: 3rem;
}

/* Scrollytelling */
.journey--live {
  height: 900vh;
  height: 900svh;
}

.journey--live .journey__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  perspective: 1400px;
}

.journey--live .journey__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.journey--live .journey__door {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% var(--door-cy, 50%);
  perspective: 1400px;
  perspective-origin: 50% var(--door-cy, 50%);
  will-change: transform, opacity;
}

.journey__leaves {
  position: absolute;
  left: var(--door-x);
  top: var(--door-top);
  width: var(--door-w);
  height: var(--door-h);
  transform-style: preserve-3d;
  perspective: 1400px;
}

.journey__leaf {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #2B3B56, var(--door) 45%, #1D293D);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05), inset 0 0 50px rgba(0, 0, 0, 0.35);
  transform-origin: left center;
  backface-visibility: visible;
  will-change: transform;
}

.journey__handle {
  position: absolute;
  right: 4%;
  top: 60%;
  width: 13%;
  height: 1.5%;
  border-radius: 4px;
  background: linear-gradient(#E4E8ED, #9AA5B1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Posters et post-it : tout est proportionnel à la largeur de la porte */
.journey__poster {
  position: absolute;
  margin: 0;
  padding: calc(var(--door-w) * 0.014);
  background: #FFFFFF;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.journey__poster::before {
  content: '';
  position: absolute;
  top: calc(var(--door-w) * -0.018);
  left: 50%;
  width: 34%;
  height: calc(var(--door-w) * 0.04);
  background: rgba(240, 230, 190, 0.75);
  transform: translateX(-50%) rotate(-2deg);
}

.journey__poster img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #C9D2DC;
}

.journey__poster figcaption {
  padding-top: calc(var(--door-w) * 0.01);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(var(--door-w) * 0.04);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.journey__poster--1 { left: 6%; top: 5%; width: 44%; transform: rotate(-2deg); }
.journey__poster--2 { left: 54%; top: 8%; width: 40%; transform: rotate(1.6deg); }
.journey__poster--3 { left: 8%; top: 37%; width: 38%; transform: rotate(1.4deg); }
.journey__poster--4 { left: 50%; top: 34%; width: 44%; transform: rotate(-1.2deg); }
.journey__poster--5 { left: 12%; top: 67%; width: 42%; transform: rotate(-1.8deg); }

.journey__note {
  position: absolute;
  width: 25%;
  padding: calc(var(--door-w) * 0.018);
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-size: calc(var(--door-w) * 0.046);
  font-weight: 600;
  line-height: 1.05;
  color: #1F2733;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.4);
}

.journey__note--yellow { left: 66%; top: 63.5%; background: #FFE770; transform: rotate(3deg); }
.journey__note--pink { left: 60%; top: 77%; background: #FF9EBB; transform: rotate(-4deg); }
.journey__note--green { left: 37%; top: 29%; width: 21%; background: #A9EDB0; transform: rotate(-5deg); }
.journey__note--blue { left: 3%; top: 58%; width: 23%; background: #9FD8FF; transform: rotate(-3deg); }
.journey__note--yellow2 { left: 36%; top: 85%; background: #FFE770; transform: rotate(2.5deg); }

.journey__wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.journey__wall-shape {
  fill: var(--wall);
  fill-rule: evenodd;
  stroke: var(--frame);
  stroke-width: 16;
}

.journey__wall-dado {
  fill: var(--floor);
}

.journey--live .journey__door-text {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 0;
  justify-content: flex-start;
  padding-top: max(1.75rem, 6svh);
  pointer-events: none;
}

.journey--live .journey__name {
  font-size: clamp(2.1rem, min(6vw, 8svh), 4rem);
}

.journey__door-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* La photo : au mur sur grand écran, sur la porte sur mobile */
.journey__frame {
  display: none;
  position: absolute;
}

.journey__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.journey--live .journey__frame--wall {
  display: block;
  left: calc(var(--door-x) + var(--door-w) + 1.5rem);
  bottom: 9%;
  width: min(24vw, 42svh);
}

@media screen and (max-width: 899px) {
  .journey--live .journey__frame--wall {
    display: none;
  }

  .journey--live .journey__frame--leaf {
    display: block;
    right: 0;
    bottom: 1%;
    width: 44%;
  }

  .journey__note--pink {
    display: none;
  }
}

/* Sur grand écran, le nom encadre la porte */
@media screen and (min-width: 900px) {
  .journey--live .journey__door-text {
    display: block;
    padding: 0;
    text-align: left;
  }

  .journey--live .journey__name {
    font-size: clamp(3rem, min(6.2vw, 12svh), 6rem);
  }

  .journey--live .journey__name span {
    position: absolute;
    top: 34%;
  }

  .journey--live .journey__name span:first-child {
    right: calc(100% - var(--door-x) + 2rem);
  }

  .journey--live .journey__name span:last-child,
  .journey--live .journey__door-meta {
    left: calc(var(--door-x) + var(--door-w) + 2rem);
  }

  .journey--live .journey__door-meta {
    position: absolute;
    top: calc(34% + clamp(4rem, min(7.4vw, 14svh), 7.2rem));
  }
}

.journey--live .journey__hint {
  margin-top: 0.1rem;
}

.journey--live .journey__chapter {
  display: block;
  position: absolute;
  z-index: 3;
  left: clamp(1.25rem, 7vw, 6rem);
  right: clamp(1.25rem, 7vw, 6rem);
  bottom: clamp(4.5rem, 13svh, 7rem);
  max-width: 34rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}

.journey__chapter-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 5.4vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  color: inherit;
}

.journey__chapter-text {
  margin-top: 0.6rem;
  max-width: 30rem;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.5;
  color: inherit;
}

.journey--live .journey__chapter:not(.journey__chapter--dark-text) {
  color: #FFF8EA;
}

.journey--live .journey__chapter--dark-text {
  color: #142033;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.85);
}

/* Sur les bougies, le texte a besoin d'un fond */
.journey__chapter--panel {
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: rgba(4, 19, 27, 0.72);
  text-shadow: none;
}

/* La nav n'apparaît qu'une fois la traversée terminée */
body.journey-playing .header {
  opacity: 0;
  visibility: hidden;
}

.header {
  transition: opacity 0.35s ease, visibility 0.35s;
}

.journey--done .journey__skip {
  visibility: hidden;
}

@media screen and (max-width: 640px) {
  .journey--live {
    height: 760vh;
    height: 760svh;
  }

  .journey__skip {
    right: 0.9rem;
    bottom: 0.9rem;
  }
}