/* ==========================================================================
   home.css — landing Tellyah
   --------------------------------------------------------------------------
   Arc narratif de la page : contemplation (hero) → manifeste (anti-pression
   sociale) → univers (chemins narratifs) → dualité (raconter / explorer)
   → émotions (la vraie mesure) → FAQ → embarquement (CTA final).
   ========================================================================== */

header {
  padding: 0 20px;                            /* sticky + glass : voir main.css */
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   Hero — immersion pleine page, entrée séquencée
   --------------------------------------------------------------------------
   L'image astronaute couvre tout le hero ; le contenu typographique entre
   par vagues (slug → titre → sous-titre → CTAs → note).
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;                         /* contient les z-index */
  min-height: 92vh;
  /* Full-bleed viewport : casse le max-width 1200px du <main> */
  width: 100vw;
  left: 50%;
  right: 50%;
  /* Remonte sous la nav sticky pour une impression "pleine page" */
  margin: -72px -50vw 0;
  padding: 120px 24px 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero {
    min-height: 100vh;
    padding: 120px 48px 96px;
    justify-content: center;
  }
}

@media (min-width: 1200px) {
  .hero {
    padding-left: max(48px, calc((100vw - 1200px) / 2 + 24px));
    padding-right: max(48px, calc((100vw - 1200px) / 2 + 24px));
  }
}

/* ----- Background : image full-cover + overlay --------------------------- */

.hero-bg-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Image paysage (1448×1086) : full cover, légère sur-échelle pour absorber
   le parallax vertical posé par home.js (translate3d sur scroll). */
.hero-bg-layer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  transform: translateZ(0) scale(1.08);
  will-change: transform;
}

/* Overlay multi-couches :
   1. Voile nightblue global
   2. Gradient renforcé côté texte (gauche desktop / bas mobile)
   3. Halo chaud doré discret dans la zone texte
   4. Vignette de sortie pour fondre vers la section suivante */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 15, 44, 0.35),
      rgba(10, 15, 44, 0.50)
    ),
    linear-gradient(100deg,
      rgba(10, 15, 44, 0.75) 0%,
      rgba(10, 15, 44, 0.45) 45%,
      rgba(10, 15, 44, 0.15) 75%,
      rgba(10, 15, 44, 0.00) 100%
    ),
    radial-gradient(700px 500px at 18% 55%,
      rgba(255, 178, 26, 0.10),
      transparent 70%),
    linear-gradient(180deg,
      transparent 70%,
      var(--bg-night) 100%
    );
  pointer-events: none;
}

@media (max-width: 899px) {
  /* Mobile : contenu en bas → on assombrit le bas, le haut respire. */
  .hero-bg-overlay {
    background:
      linear-gradient(180deg,
        rgba(10, 15, 44, 0.30) 0%,
        rgba(10, 15, 44, 0.55) 35%,
        rgba(10, 15, 44, 0.88) 70%,
        var(--bg-night) 100%
      ),
      radial-gradient(400px 300px at 30% 80%,
        rgba(255, 178, 26, 0.08),
        transparent 70%);
  }
}

/* ----- Slug éditorial (coin haut gauche) ---------------------------------- */

.hero-slug {
  position: absolute;
  top: 92px;
  left: 24px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
  animation: hero-rise .8s cubic-bezier(.22, .61, .36, 1) both;
}

.hero-slug em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 14, "SOFT" 100, "WONK" 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-transform: none;
  margin-right: 2px;
}

@media (min-width: 900px) {
  .hero-slug {
    top: 104px;
    left: 48px;
  }
}

@media (min-width: 1200px) {
  .hero-slug {
    left: max(48px, calc((100vw - 1200px) / 2 + 24px));
  }
}

/* ----- Contenu principal -------------------------------------------------- */

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

@media (min-width: 900px) {
  .hero-content {
    max-width: 720px;
  }
}

/* Badge statut : bêta ouverte */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0 0 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold-soft);
  background: rgba(255, 204, 51, 0.08);
  border: 1px solid rgba(255, 204, 51, 0.28);
  border-radius: var(--radius-pill);
  animation: hero-rise .8s cubic-bezier(.22, .61, .36, 1) .05s both;
}

.hero-badge .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255, 204, 51, 0.55);
  animation: badge-pulse 2.4s ease-out infinite;
}

@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 204, 51, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0); }
}

.hero-title {
  margin: 0 0 26px;
  color: var(--text);
  position: relative;
  animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) .15s both;
}

/* Le mot italisé prend la lumière : dégradé orange → doré */
.hero-title em {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  display: inline-block;
  color: var(--gold);                         /* fallback sans background-clip */
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-clip:text ne peint que dans la boîte de l'élément ; avec le
     line-height serré du h1 (0.98), jambages (y), accents (À) et débords
     italiques sortiraient de la zone peinte et seraient tronqués. On étend
     la boîte en padding et on compense en marges : zéro impact layout. */
  padding: 0.14em 0.1em 0.24em 0.04em;
  margin: -0.14em -0.1em -0.24em -0.04em;
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 36px;
  max-width: 560px;
  opacity: 0.88;
  animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) .28s both;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) .4s both;
}

.cta-icon {
  flex: 0 0 auto;
}

.hero-note {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 20, "SOFT" 100, "WONK" 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 480px;
  letter-spacing: 0.01em;
  animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) .52s both;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Aide TestFlight (iOS) ----------------------------------------------- */
/*
   Guide ultra-court « comment installer sur iPhone ». Élément <details> natif :
   replié par défaut (une seule ligne discrète sur Android/desktop), déplié
   d'office sur iPhone par home.js. Réutilisé dans le hero et la finale.
*/
.tf-help {
  max-width: 460px;
  margin: 14px 0 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
  animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) .46s both;
}

.tf-help-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  list-style: none;                 /* masque le triangle natif (Firefox) */
}

.tf-help-summary::-webkit-details-marker {
  display: none;                    /* masque le triangle natif (WebKit) */
}

.tf-help-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tf-help-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.tf-help-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0.55;
  transition: transform .2s ease;
}

.tf-help[open] .tf-help-chevron {
  transform: rotate(180deg);
}

.tf-help-body {
  padding: 2px 16px 16px;
}

.tf-help-intro {
  margin: 0 0 13px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.tf-help-intro strong,
.tf-step-desc strong {
  font-weight: 600;
  color: var(--gold-soft);
}

.tf-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tf-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.tf-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--grad-warm);
  border-radius: 50%;
}

.tf-step-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

.tf-step-link {
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 204, 51, 0.4);
  transition: color .15s ease, border-color .15s ease;
}

.tf-step-link:hover {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
}

.tf-help-foot {
  margin: 13px 0 0;
  font-size: 12.5px;
  color: var(--subtle);
}

/* Dans la finale (centrée), le bloc se centre mais garde un texte aligné à
   gauche pour la lisibilité des étapes. */
.finale .tf-help {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  animation: none;
}

/* ----- Scroll indicator ---------------------------------------------------- */

.hero-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
  display: none;
}

@media (min-width: 900px) {
  .hero-scroll {
    display: block;
  }
}

.hero-scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 8px;
  background: var(--gold);
  border-radius: 999px;
  transform: translateX(-50%);
  animation: scroll-dot 2.2s ease-in-out infinite;
}

@keyframes scroll-dot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  30%  { opacity: 1; }
  80%  { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ==========================================================================
   Têtes de section — kicker doré + display + sous-titre
   ========================================================================== */

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.section-kicker {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-head h2 {
  margin: 0 0 14px;
}

.section-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* ==========================================================================
   Manifeste — ce que Tellyah refuse, ce que Tellyah choisit.
   Les refus sont rayés d'un trait chaud ; la dernière ligne s'illumine.
   ========================================================================== */

.manifesto {
  padding: 96px 0 48px;
  text-align: center;
}

@media (min-width: 768px) {
  .manifesto {
    padding: 130px 0 72px;
  }
}

.manifesto-line {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 110, "SOFT" 60, "WONK" 0;
  font-size: clamp(28px, 5.2vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--subtle);
}

.manifesto-line s {
  text-decoration-line: line-through;
  text-decoration-color: rgba(255, 145, 0, 0.65);
  text-decoration-thickness: 0.06em;
}

.manifesto-line--keep {
  margin-top: 26px;
  color: var(--text);
  font-style: italic;
  font-variation-settings: "opsz" 110, "SOFT" 100, "WONK" 0;
}

.manifesto-line--keep em {
  font-style: italic;
  display: inline-block;
  color: var(--gold);
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Même garde-fou que .hero-title em : la zone peinte couvre jambages
     et débords italiques (cf. commentaire là-bas). */
  padding: 0.12em 0.1em 0.22em 0.04em;
  margin: -0.12em -0.1em -0.22em -0.04em;
}

/* ==========================================================================
   Bandes immersives (univers, réactions)
   --------------------------------------------------------------------------
   L'image n'est plus une vignette : c'est une couche d'ambiance full-bleed,
   sans cadre, fondue dans le nightblue par un masque elliptique très
   progressif. Desktop : l'image émerge d'un bord du viewport (gauche pour
   l'univers, droite pour les réactions), le texte lui répond sur l'autre
   colonne. Mobile : l'image devient le ciel de la section, le texte
   émerge de son fondu — même langage que le hero. `--py` est le décalage
   parallax posé par home.js (0 si absent / reduced-motion).
   ========================================================================== */

.immersion {
  position: relative;
  isolation: isolate;
  /* Full-bleed viewport : casse le max-width 1200px du <main> */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin: 16px -50vw;
  padding: 0 24px 64px;
  overflow: hidden;
}

@media (min-width: 900px) {
  .immersion {
    display: flex;
    align-items: center;
    min-height: 92vh;
    margin: 0 -50vw;
    padding: 130px 48px;
  }
}

@media (min-width: 1200px) {
  .immersion {
    padding-left: max(48px, calc((100vw - 1200px) / 2 + 24px));
    padding-right: max(48px, calc((100vw - 1200px) / 2 + 24px));
  }
}

/* ----- Couche image --------------------------------------------------------- */

.immersion-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Halo doré d'ambiance, côté image */
.immersion-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 56vw;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(255, 178, 26, 0.10) 0%,
    rgba(255, 145, 0, 0.04) 45%,
    transparent 70%);
  filter: blur(30px);
}

.immersion--universe .immersion-bg::before  { left: -14vw; }
.immersion--reactions .immersion-bg::before { right: -14vw; }

.immersion-bg img {
  position: absolute;
  /* Masque elliptique : le sujet reste plein, les bords se dissolvent
     dans la nuit — aucune découpe, aucun cadre. */
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at center,
    #000 30%,
    rgba(0, 0, 0, 0.75) 52%,
    rgba(0, 0, 0, 0.30) 70%,
    transparent 84%);
          mask-image: radial-gradient(ellipse 58% 52% at center,
    #000 30%,
    rgba(0, 0, 0, 0.75) 52%,
    rgba(0, 0, 0, 0.30) 70%,
    transparent 84%);
  will-change: transform;
}

@media (min-width: 900px) {
  .immersion-bg img {
    top: 50%;
    width: min(52vw, 740px);
    height: auto;
    transform: translateY(calc(-50% + var(--py, 0px)));
  }

  .immersion--universe .immersion-bg img  { left: -7vw; }
  .immersion--reactions .immersion-bg img { right: -7vw; }
}

@media (max-width: 899px) {
  /* Mobile : l'image est le ciel de la section, centrée, fondue vers le
     bas — le texte vient se poser dans son fondu. */
  .immersion-bg img {
    top: -24px;
    left: 50%;
    width: min(96vw, 480px);
    height: auto;
    transform: translateX(-50%) translateY(var(--py, 0px));
    -webkit-mask-image: radial-gradient(ellipse 64% 54% at 50% 42%,
      #000 30%,
      rgba(0, 0, 0, 0.75) 52%,
      rgba(0, 0, 0, 0.28) 72%,
      transparent 86%);
            mask-image: radial-gradient(ellipse 64% 54% at 50% 42%,
      #000 30%,
      rgba(0, 0, 0, 0.75) 52%,
      rgba(0, 0, 0, 0.28) 72%,
      transparent 86%);
  }
}

/* ----- Contenu --------------------------------------------------------------- */

.immersion-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .immersion-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
  }

  .immersion--universe .immersion-copy  { grid-column: 7 / 13; }
  .immersion--reactions .immersion-copy { grid-column: 1 / 7; }
}

@media (max-width: 899px) {
  /* Le texte démarre dans le fondu bas de l'image (hauteur ≈ largeur ×1.5,
     on recouvre le dernier quart). */
  .immersion-inner {
    padding-top: calc(min(96vw, 480px) * 1.12);
    text-align: center;
  }
}

/* Contre-dérive parallax du texte (data-parallax négatif → devance le
   scroll → perçu au premier plan, l'image perçue lointaine) */
.immersion-copy[data-parallax] {
  transform: translateY(var(--py, 0px));
}

.immersion-copy .section-kicker {
  text-align: left;
}

.immersion-copy h2 {
  margin: 0 0 18px;
}

.immersion-copy > p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 52ch;
}

@media (max-width: 899px) {
  .immersion-copy .section-kicker {
    text-align: center;
  }

  .immersion-copy > p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Constellation narrative — un départ, des choix, plusieurs fins.
   Les lignes se tracent à l'apparition (.is-visible), le chemin doré
   se révèle en dernier.
   ========================================================================== */

.paths-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  overflow: visible;
}

.pline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.20);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4, 0, .2, 1) var(--d, 0s);
}

/* L'état "non tracé" n'existe qu'avec JS : sans lui, la constellation
   est simplement visible en entier (pas de contenu perdu). */
html.js .pline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pline--gold {
  stroke: url(#tly-path-gold);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 7px rgba(255, 178, 26, 0.5));
}

html.js .is-visible .pline {
  stroke-dashoffset: 0;
}

.pnode {
  fill: rgba(255, 255, 255, 0.75);
  transition: opacity .6s ease var(--d, 0s);
}

html.js .pnode {
  opacity: 0;
}

.pnode--start,
.pnode--gold {
  fill: var(--gold);
  filter: drop-shadow(0 0 8px rgba(255, 204, 51, 0.65));
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3.2s ease-in-out infinite;
}

html.js .is-visible .pnode {
  opacity: 1;
}

@keyframes node-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

.paths-caption {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100, "WONK" 0;
  font-size: 14.5px;
  color: var(--subtle);
  text-align: center;
}

/* ==========================================================================
   À toi de jouer — une bulle de telly jouable (miroir de l'app)
   --------------------------------------------------------------------------
   Une scène, « Que fais-tu ? », deux choix. Le choix s'illumine en doré,
   l'autre s'estompe (mais reste cliquable : changer d'avis fait partie du
   jeu), le dénouement de la branche apparaît avec son émo, et la barre de
   progression avance d'une bulle. home.js orchestre (setupChoiceDemo).
   ========================================================================== */

/* Sans JS la démo serait inerte : on la retire du flux. */
html:not(.js) .play {
  display: none;
}

.play {
  padding: 48px 0;
}

@media (min-width: 768px) {
  .play {
    padding: 64px 0 88px;
  }
}

.play-card {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 22px 30px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .play-card {
    padding: 36px 44px 38px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Flash doré au moment du choix — la classe est (re)posée par home.js */
.play-card.is-flashing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(440px 300px at 50% 28%,
    rgba(255, 204, 51, 0.18),
    transparent 70%);
  animation: play-flash .9s ease-out forwards;
}

@keyframes play-flash {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ----- Progression — clin d'œil aux tirets de lecture de l'app ------------ */

.play-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
}

.play-progress .dash {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background .5s ease .2s, box-shadow .5s ease .2s;
}

.play-progress .dash:first-child {
  background: var(--gold);
}

.play-card[data-state="chosen"] .play-progress .dash:nth-child(2) {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 204, 51, 0.5);
}

/* ----- Scène + question ---------------------------------------------------- */

.play-scene {
  margin: 0 auto 16px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

.play-question {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 40, "SOFT" 100, "WONK" 0;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--text);
}

/* ----- Choix ---------------------------------------------------------------- */

.play-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}

.play-choice {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  text-align: center;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--stroke-hi);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease,
              opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}

.play-choice:hover {
  background: var(--card-hi);
  border-color: rgba(255, 204, 51, 0.4);
  transform: translateY(-1px);
}

.play-choice:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.play-choice.is-chosen {
  border-color: rgba(255, 204, 51, 0.6);
  background: rgba(255, 204, 51, 0.08);
  box-shadow: 0 6px 24px rgba(255, 178, 26, 0.18);
}

/* L'autre branche s'estompe mais reste une invitation */
.play-choice.is-dimmed {
  opacity: 0.45;
}

.play-choice.is-dimmed:hover {
  opacity: 0.85;
}

/* ----- Dénouement ------------------------------------------------------------ */

/* L'animation rejoue à chaque bascule : le panneau repasse par
   display:none (hidden), ce qui réinitialise son animation CSS. */
.play-outcome-panel {
  margin-top: 24px;
  animation: outcome-rise .6s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes outcome-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.play-outcome-panel p {
  margin: 0 auto 14px;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.92;
}

/* ----- Après le choix --------------------------------------------------------- */

/* Révélé via l'attribut hidden (home.js, comme les panneaux) — surtout ne
   pas poser de `display` ici : une règle auteur battrait la règle UA
   [hidden]{display:none} (cf. le piège corrigé sur .hint). L'animation ne
   joue qu'à la première révélation : une bascule de branche ne repasse
   pas par display:none, donc ne la relance pas. */
.play-after {
  animation: outcome-rise .6s cubic-bezier(.22, .61, .36, 1) .2s both;
}

.play-punchline {
  margin: 22px 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 20, "SOFT" 100, "WONK" 0;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.play-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.play-switch {
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(255, 204, 51, 0.5);
  padding: 4px 2px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.play-switch:hover {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
}

.play-switch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Dualité — raconter / explorer. Les personnages émergent du nightblue.
   ========================================================================== */

.duality {
  padding: 72px 0 56px;
}

@media (min-width: 768px) {
  .duality {
    padding: 100px 0 90px;
  }
}

.duality-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .duality-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* ----- Carte : zone d'influence sans cadre dur ----------------------------- */

.duality-card {
  position: relative;
  padding: 16px 20px 30px;
  text-align: center;
  background: transparent;
  border: none;
  transition: transform .4s ease;
}

/* Hairline qui s'évanouit — limite suggérée, jamais imposée */
.duality-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    transparent 70%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity .4s ease;
}

.duality-card:hover {
  transform: translateY(-4px);
}

.duality-card:hover::before {
  opacity: 1;
}

/* ----- Média : portrait → cercle à bords alpha ----------------------------- */

.duality-card-media {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Parallax à deux vitesses : les deux personnages dérivent à des rythmes
   différents (amplitudes distinctes dans le HTML) → profondeur entre eux */
.duality-card-media[data-parallax] {
  transform: translateY(var(--py, 0px));
}

/* Halo d'ambiance — position différente par variante */
.duality-card-media::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle at var(--aura-x, 50%) var(--aura-y, 50%),
    rgba(255, 178, 26, 0.30) 0%,
    rgba(255, 145, 0, 0.14) 28%,
    rgba(255, 145, 0, 0.05) 55%,
    transparent 80%);
  filter: blur(44px);
  pointer-events: none;
  z-index: 0;
  animation: duality-breathe 14s ease-in-out infinite;
  will-change: transform, opacity;
}

.duality-card:hover .duality-card-media::before {
  animation-duration: 6s;
}

/* Variantes d'aura : tella émerge du bas, reada est appelé vers le haut */
.duality-card--tella {
  --aura-x: 50%;
  --aura-y: 78%;
}

.duality-card--reada {
  --aura-x: 50%;
  --aura-y: 22%;
}

@keyframes duality-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.06); }
}

/* Cercle à bords alpha : l'image bleed dans le fond, pas de découpe photo */
.duality-card-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: radial-gradient(
    circle at center,
    #000 58%,
    rgba(0, 0, 0, 0.90) 68%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.18) 92%,
    transparent 100%);
          mask-image: radial-gradient(
    circle at center,
    #000 58%,
    rgba(0, 0, 0, 0.90) 68%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.18) 92%,
    transparent 100%);
  filter:
    drop-shadow(0 20px 34px rgba(0, 0, 0, 0.50))
    drop-shadow(0 4px 14px rgba(255, 145, 0, 0.14));
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.duality-card:hover .duality-card-media img {
  transform: scale(1.04);
}

/* ----- Typographie ---------------------------------------------------------- */

.duality-card-name {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--text);
}

.duality-card-body {
  margin: 0 auto;
  max-width: 36ch;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

/* ==========================================================================
   Émotions — chips flottantes, vocabulaire du ressenti
   ========================================================================== */

.emo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 899px) {
  .emo-chips {
    justify-content: center;
  }
}

.emo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  animation: chip-float 6s ease-in-out var(--d, 0s) infinite;
}

.emo-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--gold));
  box-shadow: 0 0 8px var(--c, var(--gold));
}

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  padding: 32px 0 64px;
}

@media (min-width: 768px) {
  .faq {
    padding: 48px 0 100px;
  }
}

.faq-inner {
  max-width: 720px;
  margin: 0 auto;
}

.faq-inner .section-head {
  margin-bottom: 36px;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}

.faq-item:hover {
  background: var(--card-hi);
}

.faq-item[open] {
  border-color: rgba(255, 204, 51, 0.30);
  background: var(--card-hi);
}

.faq-item summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  transition: transform .2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 20px 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   Finale — l'embarquement
   ========================================================================== */

.finale {
  position: relative;
  text-align: center;
  padding: 96px 0 72px;
}

@media (min-width: 768px) {
  .finale {
    padding: 130px 0 100px;
  }
}

/* Aurore dorée derrière le titre */
.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 320px at 50% 38%,
    rgba(255, 178, 26, 0.13),
    rgba(255, 145, 0, 0.05) 55%,
    transparent 78%);
  filter: blur(10px);
  pointer-events: none;
}

.finale > * {
  position: relative;
}

.finale-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}

.finale-title em {
  font-style: italic;
  display: inline-block;
  color: var(--gold);
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Même garde-fou que .hero-title em : la zone peinte couvre jambages
     et débords italiques (cf. commentaire là-bas). */
  padding: 0.12em 0.1em 0.22em 0.04em;
  margin: -0.12em -0.1em -0.22em -0.04em;
}

.finale-sub {
  margin: 0 0 34px;
  font-size: 16px;
  color: var(--muted);
}

.finale .cta-row {
  justify-content: center;
  margin-bottom: 0;
  animation: none;
}

/* ==========================================================================
   Deep-link hint
   ========================================================================== */

/* `display: flex` battrait l'attribut `hidden` (règle UA) — on ne
   l'applique donc que lorsque le hint est effectivement révélé. */
.hint[hidden] {
  display: none;
}

.hint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  margin: 48px auto 0;
  max-width: 720px;
  background: rgba(255, 145, 0, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.hint p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.hint .mono {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--subtle);
}

.dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 145, 0, 0.15);
  flex: 0 0 auto;
}