/* Mise en page de chaque scène. Mobile d'abord, enrichi à partir de 900 px. */

.scene {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(120px, 16vh, 180px) var(--gutter) clamp(80px, 12vh, 140px);
  overflow: clip;
}
.scene__inner { position: relative; isolation: isolate; width: 100%; max-width: 1280px; margin-inline: auto; }
/* Mêmes marges que les autres scènes (aligné à gauche) ; seule la largeur du contenu est limitée */
.scene__inner--narrow { display: grid; gap: clamp(18px, 3vw, 32px); justify-items: start; }
.scene__inner--narrow .faq { width: 100%; max-width: 880px; }
.scene__head { display: grid; gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(32px, 6vw, 72px); }

/* ---------- 1. Accueil ---------- */
.scene--accueil { padding-top: clamp(110px, 14vh, 150px); padding-bottom: clamp(50px, 8vh, 90px); }
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  min-height: calc(100svh - 190px);
  text-align: center;
}
.hero > * { position: relative; z-index: 2; }
.hero__stage { position: static; isolation: isolate; display: grid; place-items: center; width: 100%; }
.hero__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-names);
  font-weight: var(--names-weight);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: clamp(4.2rem, 23vw, 5.4rem);
  line-height: .95;
  /* 0 et non -.04em (valeur de tp-chez-sevanova.online, pensée pour des titres plus petits) : à cette taille et en gras,
     un interlettrage négatif fait se chevaucher les lettres. Mesuré dans tests/e2e_check.py. */
  letter-spacing: 0;
  color: var(--display);
}
/* Titre sans ombre (demande de Thomas, 2026-10-28). Si une ombre revient : jamais text-shadow (chaque lettre est un bloc
   séparé, l'ombre d'une lettre éclaircirait le bord de la précédente = « dégradé »), utiliser filter: drop-shadow. */
.hero__lead { text-shadow: 0 0 .5em color-mix(in srgb, var(--bg) 80%, transparent); }
.hero__lead { max-width: 28ch; font-size: clamp(1.15rem, 1.5vw + .6rem, 1.7rem); line-height: 1.35; }
.hero__lead { max-width: 28ch; font-size: clamp(1.15rem, 1.5vw + .6rem, 1.7rem); line-height: 1.35; }
.hero__info { display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 26px); }
.br-m { display: inline; }

.hero { padding-block: 70vw 52vw; }
.hero__photo { position: absolute; z-index: 1; }
/* A et B sont dans .hero__stage (static) : positions relatives à .hero, donc au haut de la scène, sous l'en-tête */
.hero__photo--a { width: 30vw; left: -10vw; top: 2vw; }
.hero__photo--b { width: 29vw; right: -10vw; top: 20vw; }
.hero__photo--c { width: 42vw; left: 24vw; bottom: 0; }

/* Écran large : le titre tient sur une ligne ; photos agrandies, elles passent derrière les textes (comme la réf). */
@media (min-width: 900px) {
  /* Le titre (et donc le cercle) au milieu de la scène, comme la réf ; texte et bouton dessous */
  .hero { display: grid; grid-template-rows: 1fr auto 1fr; padding-block: 0 2.2rem; }
  .hero__stage { grid-row: 2; }
  .hero__info { grid-row: 3; align-self: start; margin-top: clamp(10px, 2vh, 28px); }
  .br-m { display: none; }
  .hero__title { font-size: clamp(5rem, 11.4vw, 12rem); }
  .hero__photo--a { width: min(19vw, 36vh); left: calc(2vw - var(--gutter)); top: 0; }
  .hero__photo--b { width: min(17vw, 32vh); right: calc(4.2vw - var(--gutter)); top: 2vw; }
  .hero__photo--c { width: min(18vw, 34vh); left: auto; right: 11%; bottom: -9%; }
}

/* ---------- 2. Programme ---------- */
.scene--programme .scene__title { margin-bottom: .2em; }

/* ---------- 3. Lieu ---------- */
.lieu { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.lieu__text { display: grid; gap: clamp(16px, 2.4vw, 28px); justify-items: start; }
.lieu__addr { font-size: clamp(1.2rem, 1.6vw + .6rem, 1.8rem); line-height: 1.35; }
.lieu__note { max-width: 40ch; opacity: .9; }
.lieu__photo { width: 100%; }
@media (min-width: 900px) {
  .lieu { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* ---------- 6. Cadeau ---------- */
.cadeau { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.cadeau__text { display: grid; gap: clamp(18px, 2.4vw, 30px); justify-items: start; }
.cadeau__photo { width: min(84vw, 560px); justify-self: center; }
@media (min-width: 900px) {
  .cadeau { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* ---------- 7. Playlist ---------- */
.playlist { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.playlist__text { display: grid; gap: clamp(14px, 2vw, 22px); justify-items: start; }
.playlist__photo { width: min(90vw, 640px); justify-self: center; }
@media (min-width: 900px) {
  .playlist { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}