/* Page projet : un récit court en chapitres, avancé section par section comme l'accueil. */

/* Ouverture du projet */
.panel-cover .cover-image { filter: brightness(0.62); transform: scale(1.06); transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1); }
.panel-cover.is-active .cover-image { transform: scale(1); }
.cover-text {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(56px, 12vh, 120px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.cover-title {
  margin: 10px 0 0;
  max-width: 14em;
  font-family: var(--font, var(--display));
  font-weight: var(--w, 400);
  font-style: var(--fi, normal);
  font-stretch: var(--st, 100%);
  letter-spacing: var(--ls, -0.02em);
  font-size: clamp(34px, min(7.4vw, 13vh), 120px);
  line-height: 1.02;
  text-transform: uppercase;
}
.cover-detail { margin: 14px 0 0; color: #d4d4d6; font-size: clamp(14px, 1.3vw, 18px); }
.cover-text > * { opacity: 0; transform: translateY(18px); }
.panel-cover.is-active .cover-text > * { animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.panel-cover.is-active .cover-title { animation-delay: 0.12s; }
.panel-cover.is-active .cover-detail { animation-delay: 0.24s; }
.cover-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  animation: hint 2.4s ease-in-out infinite;
}

/* Planches qu'on ne recadre pas : l'image entière, posée sur un fond flouté tiré d'elle-même */
.cover-contain .cover-image { object-fit: contain; object-position: 85% 50%; filter: none; background: #000; }

/* Chapitres : une, deux ou trois images par écran */
.panel-story { background: var(--ground); }
.story-grid { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); gap: 2px; }
.story-duo .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-trio .story-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.frame { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.frame-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  opacity: 0;
  transition: opacity 0.9s ease, transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.frame-contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 10cqh, 96px) clamp(12px, 4cqw, 56px) clamp(60px, 11cqh, 104px);
}
.story-duo .frame-contain, .story-trio .frame-contain { padding-left: clamp(10px, 2cqw, 32px); padding-right: clamp(10px, 2cqw, 32px); }
.frame-contain .frame-media {
  position: relative;
  z-index: 1;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: translateY(24px) scale(0.97);
}
.frame-contain video.frame-media { width: 100%; height: 100%; box-shadow: none; }
/* Le film occupe tout l'écran ; en portrait, on le montre en entier. */
.story-film .frame-contain { padding: 0; }
.story-film video.frame-media { object-fit: cover; }
.frame-backdrop {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(40px) brightness(0.35) saturate(1.2);
}
.panel-story.is-active .frame-media { opacity: 1; transform: none; }
.panel-story.is-active .frame:nth-child(2) .frame-media { transition-delay: 0.12s; }
.panel-story.is-active .frame:nth-child(3) .frame-media { transition-delay: 0.24s; }

.chapter {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(20px, 5cqh, 52px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(14px);
}
.panel-story.is-active .chapter { animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; }
.chapter-number { font-size: 13px; letter-spacing: 0.2em; opacity: 0.7; }
.chapter-name { font-family: var(--display); font-size: clamp(20px, min(3cqw, 5cqh), 44px); letter-spacing: -0.01em; }

/* Fin : projet suivant */
.panel-next .next-image { filter: brightness(0.4); transform: scale(1.04); transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); }
.panel-next.is-active .next-image { transform: scale(1); }
.next-link {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.next-title {
  font-family: var(--font, var(--display));
  font-weight: var(--w, 400);
  font-style: var(--fi, normal);
  font-stretch: var(--st, 100%);
  letter-spacing: var(--ls, -0.02em);
  font-size: clamp(34px, min(7vw, 12vh), 112px);
  line-height: 1.02;
  text-transform: uppercase;
}
.next-link:hover { opacity: 1; }
.next-link:hover .next-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.end-links {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 6vh, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
}
.end-links a { padding: 6px 0; border-bottom: 1px solid currentColor; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }

.panel-missing { display: flex; align-items: center; padding: 0 var(--gutter); }
.missing-text a { text-decoration: underline; text-underline-offset: 4px; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes hint { 0%, 100% { opacity: 0.25; transform: translate(-50%, 0); } 50% { opacity: 0.8; transform: translate(-50%, 6px); } }

@media (max-aspect-ratio: 1/1) {
  .story-duo .story-grid { grid-template-columns: none; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .story-trio .story-grid { grid-template-columns: none; grid-template-rows: 1.4fr 1fr 1fr; }
  .story-film video.frame-media { object-fit: contain; }
  .story-duo .frame-contain, .story-trio .frame-contain { padding: 12px; }
  .story-duo .frame-contain:first-child, .story-trio .frame-contain:first-child { padding-top: 64px; }
  .story-duo .frame-contain:last-child, .story-trio .frame-contain:last-child { padding-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-text > *, .frame-media, .chapter { opacity: 1; transform: none; transition: none; animation: none; }
  .cover-hint { animation: none; }
}