/* ============================================================
   SUNNYSIDE — landing teaser.
   Charte reprise de la couverture du dossier artistique :
   fond rouge-orangé au centre, assombri jusqu'au noir sur les
   bords (vignette), typographie géométrique en jaune.
   Aucun spoiler.
   ============================================================ */

:root {
  --black:  #080201;
  --yellow: #F4C420;
  --grey:   #E0C9A8;
  --sans:   'Montserrat', 'Century Gothic', 'Futura', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { background: var(--black); }

::selection { background: var(--yellow); color: var(--black); }
a { color: var(--yellow); text-decoration: none; }
input:focus { outline: none; }

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--yellow);
  font-family: var(--sans);
  overflow: hidden;

  /* Fond rouge profond : la lumière chaude vient du halo (.halo), qui suit le
     curseur. Au repos, halo centré → même rendu qu'un dégradé fixe. */
  background:
    radial-gradient(ellipse 60% 58% at 50% 42%,
      #B02107 0%,
      #A11C06 14%,
      #881404 30%,
      #660E03 46%,
      #3E0702 62%,
      #1E0400 78%,
      #0D0200 90%,
      var(--black) 100%);
}

/* Halo chaud mobile : suit le curseur en parallaxe douce (app.js).
   Placé SOUS la vignette (z-index 0 < 1) pour que les bords restent noirs. */
.halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78vmax;
  height: 78vmax;
  margin: -39vmax 0 0 -39vmax;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background: radial-gradient(circle at center,
      rgba(255,118,34,.86) 0%,
      rgba(246,92,22,.60) 20%,
      rgba(205,45,12,.32) 40%,
      rgba(130,22,6,.12) 58%,
      transparent 74%);
}

/* Assombrissement supplémentaire des bords et des coins (comme sur l'affiche). */
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 70% 68% at 50% 44%,
      transparent 38%, rgba(6,1,0,.35) 62%, rgba(6,1,0,.75) 82%, rgba(6,1,0,.96) 100%);
}

/* ---- Barre haute : sélecteur de langue ---- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 22px clamp(20px, 5vw, 52px);
}

#lang-toggle {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--yellow);
  background: none;
  border: 1.5px solid rgba(244,196,32,.5);
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#lang-toggle:hover { background: var(--yellow); color: #1a0400; }

/* ---- Bloc central ---- */

.center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 5vh, 60px) clamp(20px, 5vw, 52px);
}

/* Crédits de production — gras, très tracké (comme sur l'affiche). */
.kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(11px, 1.5vw, 17px);
  letter-spacing: .3em;
  margin-right: -.3em;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.5;
}
.kicker--present {
  font-size: clamp(9px, 1.15vw, 13px);
  letter-spacing: .34em;
  margin-right: -.34em;
  margin-bottom: clamp(6px, 1.2vh, 14px);
}

.wordmark {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(44px, 11.5vw, 150px);
  letter-spacing: .1em;
  margin-right: -.1em;               /* compense le tracking sur la dernière lettre */
  line-height: 1.05;
  color: var(--yellow);
}

/* Sous-titre (position du « DOSSIER ARTISTIQUE » de l'affiche). */
.film-tell {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: .3em;
  margin-right: -.3em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-top: clamp(8px, 1.6vh, 16px);
}

/* ---- Formulaire ---- */

.form-block {
  width: 100%;
  max-width: 430px;
  margin-top: clamp(38px, 7vh, 76px);
}

.form-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(10px, 1.15vw, 12.5px);
  letter-spacing: .22em;
  margin-right: -.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}

#subscribe-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

#subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--yellow);
  background: rgba(20, 4, 1, .42);
  border: 1.5px solid rgba(244,196,32,.45);
  padding: 13px 16px;
  transition: border-color .2s;
}
#subscribe-form input[type="email"]::placeholder { color: rgba(224,201,168,.55); }
#subscribe-form input[type="email"]:focus { border-color: var(--yellow); }

#subscribe-form button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1a0400;
  background: var(--yellow);
  border: none;
  padding: 13px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
#subscribe-form button:hover { background: #FFE071; transform: translateY(-1px); }

/* piège anti-spam (honeypot) : hors écran */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-success {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 21px);
  letter-spacing: .04em;
  color: var(--yellow);
  padding: 12px 0;
}

.form-error {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFB4A2;
  margin-top: 10px;
}

/* ---- Pied de page ---- */

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(18px, 3.5vh, 30px);
}

/* Petite clef discrète → page d'administration. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;          /* garde une zone cliquable confortable */
  width: 32px;
  height: 32px;
  color: var(--yellow);
  opacity: .3;
  transition: opacity .25s, transform .25s;
}
.key svg { width: 15px; height: 15px; }
.key:hover, .key:focus-visible { opacity: .95; transform: rotate(-12deg); }
.copyright {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .24em;
  margin-right: -.24em;
  text-transform: uppercase;
  color: rgba(244,196,32,.42);
}

/* ---- Apparition au chargement ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Liens réservés aux personnes connectées (accès avant mise en ligne). */
.preview-links {
  display: inline-flex;
  gap: 16px;
  align-items: center;
}
.preview-links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--yellow);
  opacity: .75;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,196,32,.4);
  padding-bottom: 2px;
}
.preview-links a:hover { opacity: 1; border-bottom-color: var(--yellow); }

/* Icône de déconnexion (barre des personnes connectées). */
.logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: none;
  border: none;
  color: var(--yellow);
  opacity: .7;
  cursor: pointer;
  transition: opacity .2s;
}
.logout svg { width: 15px; height: 15px; }
.logout:hover { opacity: 1; }