/*
 * Outreach stylesheet — démo PMI Lakelive.
 *
 * Hand-crafted, no Tailwind / no PostCSS pipeline. Volontairement compact
 * pour réduire les surprises de build sur 2 jours.
 */

/* ───────── Brand fonts (IQOS Sans Latin W02) ───────── */
@font-face {
  font-family: 'IQOS Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/IQOSW02-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'IQOS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IQOSW02-Regular.woff') format('woff');
}

@font-face {
  font-family: 'IQOS Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/IQOSW02-Bold.woff2') format('woff2');
}

/* ───────── Reset minimal ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Tokens design partagés. Le système distingue trois niveaux :
 *  - `pill` : actions (inputs, boutons) — silhouette caractéristique
 *    du parti pris IQOS.
 *  - `surface` : cartes et conteneurs (experience-card, date cards,
 *    banner) — radius modéré qui reste cohérent entre tous les blocs.
 *  - `sharp` : médias internes (image dans la card) — accent discret.
 *
 * Couleur de fond Page 2 alignée avec la teinte chaude des photos
 * festival (crème ivoire) pour adoucir le saut visuel hero → form.
 */
:root {
  --radius-pill: 999px;
  --radius-surface: 12px;
  --radius-sharp: 8px;
  /*
   * Palette dark Page 2 alignée sur celle de la landing (`.landing` /
   * `.festival-card`) : fond `#0a0a0a` quasi-noir, surfaces `#1a1a1a`,
   * borders `#2a2a2a`, texte blanc pur + muted en `rgba(255,255,255,
   * 0.7)`. Accent turquoise `#00d1d2` partagé. La cohérence visuelle
   * entre la page de répartition (landing 5 festivals) et le form
   * d'inscription tient à ce token-set commun.
   */
  --color-page-form-bg: #0a0a0a;
  /*
   * Hiérarchie de surfaces dark thème :
   * - `card-bg` : containers (experience-card, fields--plus-one,
   *   form-assigned-date) — légèrement plus sombre que les inputs pour
   *   créer une "boîte" qui contient les éléments interactifs.
   * - `surface` : éléments interactifs (inputs, fieldset legend).
   */
  --color-page-form-card-bg: #131313;
  --color-page-form-surface: #1a1a1a;
  --color-page-form-surface-border: #2a2a2a;
  --color-page-form-text: #ffffff;
  --color-page-form-text-muted: rgba(255, 255, 255, 0.7);
  --color-accent: #00d1d2;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family:
    'IQOS Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1a1a1a;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ───────── Hero (Page 1 / Page 3) ───────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: #fff;
}

.hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/*
 * Background-images statiques portés par CSS class plutôt que par
 * interpolation `style={...}` côté JSX. Limite la surface XSS quand
 * le contenu wave deviendra DB-driven (ADR-0029) : `@kitajs/html`
 * n'escape pas les valeurs interpolées dans un attribut `style` à
 * l'intérieur d'un `url('...')`.
 *
 * Brief PMI Platform : chaque festival a son propre visuel P1 et P3.
 * Montreux Jazz utilise deux photos distinctes (Marc Ducrest /
 * Renaud Alouche). Paleo, Swiss Dream Parade et Venoge partagent une
 * seule photo entre P1 et P3 (brief « P1 and P3 »).
 */
.hero__image--lakelive-p1 {
  background-image: url('/images/lakelive-p1.jpg');
}
.hero__image--lakelive-p3 {
  background-image: url('/images/lakelive-p3.jpg');
}

.hero__image--montreux-p1 {
  background-image: url('/images/montreux-p1.jpg');
}
.hero__image--montreux-p3 {
  background-image: url('/images/montreux-p3.jpg');
}

.hero__image--swiss-dream-parade-p1,
.hero__image--swiss-dream-parade-p3 {
  background-image: url('/images/swiss-dream-parade.jpg');
}

.hero__image--venoge-p1,
.hero__image--venoge-p3 {
  background-image: url('/images/venoge.jpg');
}

.hero__image--paleo-p1,
.hero__image--paleo-p3 {
  background-image: url('/images/paleo.jpg');
}

/*
 * Tint coloré conservé en overlay `::after` pour assurer la lisibilité
 * du texte blanc par-dessus la photo, et garder une identité visuelle
 * par festival même lorsque les hero images partagent un cadrage.
 */
.hero__image--lakelive-p1,
.hero__image--lakelive-p3 {
  --hero-tint: 30, 80, 160;
}

.hero__image--montreux-p1,
.hero__image--montreux-p3 {
  --hero-tint: 90, 40, 130;
}

.hero__image--swiss-dream-parade-p1,
.hero__image--swiss-dream-parade-p3 {
  --hero-tint: 200, 40, 120;
}

.hero__image--venoge-p1,
.hero__image--venoge-p3 {
  --hero-tint: 40, 130, 80;
}

.hero__image--paleo-p1,
.hero__image--paleo-p3 {
  --hero-tint: 210, 110, 30;
}

.hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.2) 40%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--hero-tint, 0, 0, 0), 0.25) 0%,
      rgba(var(--hero-tint, 0, 0, 0), 0.15) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.hero__title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  margin: 0 0 1rem 0;
  max-width: 28ch;
  line-height: 1.15;
}

.hero__subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.125rem);
  margin: 0 0 2rem 0;
  max-width: 40ch;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/*
 * Sur-titre et sous-titre Page 1 (« YOU RECEIVED AN INVITATION FROM »
 * au-dessus du hero, « A UNIQUE EXPERIENCE » sous le hero). Style
 * uppercase, letter-spacing élevé, casse comme une accroche
 * d'invitation premium.
 */
.hero__subtitle--top,
.hero__subtitle--bottom {
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__subtitle--bottom {
  margin: 0.25rem 0 1.5rem 0;
}

/*
 * Phrase optionnelle « On vous attend le … » affichée Page 3 quand le
 * recipient a choisi une date sur un festival multi-dates. Resserre la
 * marge basse du subtitle précédent et accentue le label de date.
 */
.hero__date-confirmation {
  margin-top: -1rem;
  font-weight: 600;
}

/*
 * Placeholders structurels Page 3 (spam warning + contact RewardPulse).
 * Le wording final viendra avec les contenus définitifs ; le bloc reste
 * discret pour ne pas concurrencer l'information principale (titre +
 * confirmation de date).
 */
/*
 * Surface translucide alignée sur `hero__context-date` (Page 1) :
 * `rgba(0, 0, 0, 0.35)` + radius soft + no border + text-shadow.
 * Donne une cohérence visuelle entre Page 1 et Page 3 (mêmes blocs
 * d'info posés sur le hero__image, lisibilité par contraste léger
 * + ombre, sans bordure qui découpe le bloc de la photo).
 */
.page3__spam-warning {
  margin-top: 2rem;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  max-width: 44ch;
}

.page3__contact {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 0.5rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  max-width: 44ch;
}

.page3__contact a {
  color: inherit;
  text-decoration: underline;
}

/*
 * Nom du festival affiché entre le titre hero et le CTA. Indispensable
 * pour différencier visuellement les 5 festivals tant que tous
 * partagent les mêmes hero images stub.
 */
.hero__festival-name {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin: 0 0 1.5rem 0;
  color: rgba(255, 255, 255, 0.95);
}

/*
 * Stack des 2 CTAs (claim primary + decline ghost) sur Page 1 hero :
 * largeur identique pour les 2 boutons (alignement visuel demandé).
 * Width fixée via max-width + flex column dans `.hero__cta-stack`.
 */
.hero__cta-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 18rem;
  gap: 0.75rem;
}

.hero__cta {
  background-color: #fff;
  color: #000;
  border: none;
  padding: 0.9rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.hero__cta:hover {
  transform: translateY(-1px);
  background-color: #f0f0f0;
}

.hero__decline-form {
  margin: 0;
  display: block;
  width: 100%;
}

.hero__cta--ghost {
  margin-top: 0;
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-family: inherit;
  cursor: pointer;
}

.hero__cta--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hero__footer {
  position: relative;
  z-index: 1;
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.hero__footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hero__footer-credit {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

.brand-mark {
  font-family: 'IQOS Breathing', 'IQOS Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #00d1d2;
}

/*
 * Logo PNG fourni par PMI (cyan icon + cream wordmark IQOS). Bien
 * lisible sur fond sombre (variant hero). Sur fond clair (variant
 * light, page-message / footer-mini), on retombe sur le wordmark texte
 * `.brand-mark` cyan — pas de version dark du logo encore exportée.
 */
.brand-mark__logo {
  display: inline-block;
  height: 28px;
  width: auto;
  vertical-align: middle;
}

/* ───────── Form (Page 2) ───────── */
.page-form {
  min-height: 100vh;
  background-color: var(--color-page-form-bg);
  color: var(--color-page-form-text);
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/*
 * Bandeau LegalMentionsFooter en pied de Page 2 : casse le padding
 * horizontal du `.page-form` pour atteindre les bords du viewport
 * (full-bleed). Marge bas négative pour combler le padding bas.
 */
.page-form > .legal-mentions {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -2rem;
  width: calc(100% + 2rem);
  max-width: none;
}

/*
 * Banner hero en tête de Page 2 — affiche la même photo que P1 pour
 * renforcer la continuité visuelle entre l'invitation et le formulaire.
 * L'image est portée par `wave.imageClasses.p1`, qui déclare déjà la
 * `background-image` ; le tint coloré n'est pas appliqué ici car le
 * pseudo `::after` est scopé à `.hero__image`.
 *
 * Avec le thème sombre, la photo conserve sa pleine présence — le
 * fond sombre derrière prolonge naturellement l'ambiance des tints
 * hero P1 sans besoin de masque de fondu.
 */
.form-assigned-date {
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-page-form-text);
  background-color: var(--color-page-form-card-bg);
  border: 1px solid var(--color-page-form-surface-border);
  border-radius: var(--radius-surface);
}

.form-wrap {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-header {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-page-form-text);
  border-bottom: 1px solid var(--color-page-form-surface-border);
  padding-bottom: 0.75rem;
  margin: 0;
}

.experience-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--color-page-form-card-bg);
  border: 1px solid var(--color-page-form-surface-border);
  border-radius: var(--radius-surface);
  align-items: center;
}

.experience-card__image {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--radius-sharp);
  background-size: cover;
  background-position: center;
  background-color: #333;
}

.experience-card__image--lakelive {
  background-image: url('/images/lakelive-card.jpg');
}
.experience-card__image--montreux {
  background-image: url('/images/montreux-card.jpg');
}
.experience-card__image--swiss-dream-parade {
  background-image: url('/images/swiss-dream-parade.jpg');
}
.experience-card__image--venoge {
  background-image: url('/images/venoge.jpg');
}
.experience-card__image--paleo {
  background-image: url('/images/paleo.jpg');
}

.experience-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.experience-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-page-form-text);
  margin: 0;
}

.experience-card__people {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.experience-card__description {
  font-size: 0.875rem;
  color: var(--color-page-form-text-muted);
  line-height: 1.4;
  margin: 0;
}

.form-help {
  font-size: 0.85rem;
  color: var(--color-page-form-text-muted);
  margin: 0;
}

/*
 * Le `<form>` lui-même est un flex column avec le même gap que
 * `form-wrap` — sans cette règle, .fields + .disclaimer + .cta-confirm
 * se collent les uns aux autres car form n'est pas l'enfant direct de
 * form-wrap pour le gap.
 */
.form-wrap > form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  /*
   * Reset `<fieldset>` UA styles : la classe `.fields` est portée par un
   * `<fieldset>` (sémantique a11y pour le groupe `+1` et le picker date).
   * Sans reset, Chrome/Firefox dessinent une bordure 2px grise par défaut
   * qui s'apparente à un cadre blanc sur le thème dark — incohérent avec
   * le radius pill des autres surfaces du form.
   */
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/*
 * Surface dédiée au groupe `+1` : fond subtil + radius + padding pour
 * donner une hiérarchie visuelle claire (vs les champs principaux) sans
 * tomber dans la bordure UA blanche. La legend est extraite du flux
 * inline pour servir de titre de section au-dessus.
 */
.fields--plus-one {
  background-color: var(--color-page-form-card-bg);
  border: 1px solid var(--color-page-form-surface-border);
  border-radius: var(--radius-surface);
  padding: 1rem;
  /* Restaure le grid-template inline car le padding affecte le calcul. */
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.fields--plus-one > legend.field__label {
  /*
   * `<legend>` flotte par défaut dans la bordure du fieldset (sans
   * bordure on veut un titre de section classique en haut). `float: left`
   * mélange mal avec un parent `display: grid` — la legend prenait une
   * cellule du grid et désalignait firstName/lastName.
   *
   * `grid-column: 1 / -1` aligne la legend en travers de toutes les
   * colonnes (titre de section sur une ligne dédiée), et firstName +
   * lastName tombent côte-à-côte sur la ligne 2 en 2 colonnes égales.
   */
  grid-column: 1 / -1;
  margin: 0 0 0.5rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--color-page-form-text);
  text-transform: uppercase;
  font-weight: 700;
  padding: 0;
}

@media (max-width: 480px) {
  .fields--plus-one {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fields {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-page-form-text-muted);
  text-transform: uppercase;
}

.field__input {
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-page-form-surface-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-page-form-surface);
  /* 1rem (16px) minimum : iOS Safari déclenche un zoom auto au focus
     sur tout input < 16px. Ne pas redescendre sous cette valeur. */
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-page-form-text);
  width: 100%;
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.field__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: transparent;
}

/*
 * Override de l'autofill Safari/Chrome qui force un fond jaune
 * incompatible avec le thème sombre. Le box-shadow inset géant
 * « peint » le fond surface par-dessus le user-agent style.
 */
.field__input:-webkit-autofill,
.phone-input__number:-webkit-autofill {
  -webkit-text-fill-color: var(--color-page-form-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-page-form-surface) inset;
  caret-color: var(--color-page-form-text);
}

.field--error .field__input,
.field--error .phone-input {
  border-color: #c4304b;
}

.field--error .field__input:focus,
.field--error .phone-input:focus-within {
  outline-color: #c4304b;
}

.field__error {
  font-size: 0.78rem;
  color: #c4304b;
  margin: 0.15rem 0 0 0.25rem;
}

/*
 * Sélecteur de date — carte calendrier mobile-first.
 *
 * Chaque option est rendue comme une petite carte stack (weekday court
 * en haut, jour numérique mis en valeur, mois court en bas) au lieu
 * d'un pill horizontal qui forçait certains labels longs (DE
 * "Donnerstag, 23. Juli") à passer sur 2 lignes. Le pattern « carte
 * calendrier » est aussi plus lisible scannablement quand l'utilisateur
 * compare 5-6 dates entre elles.
 */
.field--dates {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.6rem;
}

.field--dates > .field__label {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
}

.field--dates > .field__error {
  grid-column: 1 / -1;
}

.field--dates__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 5.25rem;
  padding: 0.65rem 0.4rem;
  border: 1px solid var(--color-page-form-surface-border);
  border-radius: var(--radius-surface);
  background-color: var(--color-page-form-surface);
  cursor: pointer;
  color: var(--color-page-form-text);
  text-align: center;
  transition:
    border-color 120ms ease-out,
    background-color 120ms ease-out,
    transform 120ms ease-out,
    box-shadow 120ms ease-out;
}

.field--dates__option:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.field--dates__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.field--dates__weekday {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-page-form-text-muted);
  line-height: 1;
}

.field--dates__day {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-page-form-text);
  font-variant-numeric: tabular-nums;
}

.field--dates__month {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-page-form-text-muted);
  line-height: 1;
  text-transform: capitalize;
}

.field--dates__option:has(.field--dates__input:checked) {
  border-color: var(--color-accent);
  border-width: 2px;
  padding: calc(0.65rem - 1px) calc(0.4rem - 1px);
  background-color: rgba(0, 209, 210, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 209, 210, 0.25);
}

.field--dates__option:has(.field--dates__input:checked) .field--dates__weekday,
.field--dates__option:has(.field--dates__input:checked) .field--dates__month {
  color: var(--color-accent);
}

.field--dates__option:has(.field--dates__input:checked) .field--dates__day {
  color: var(--color-accent);
}

.field--dates__option:has(.field--dates__input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.field--error.field--dates .field--dates__option {
  border-color: #c4304b;
}

.field--error.field--dates .field--dates__option:has(.field--dates__input:checked) {
  border-color: #c4304b;
}

.form-error-summary {
  padding: 0.75rem 1rem;
  background-color: rgba(196, 48, 75, 0.12);
  border: 1px solid #c4304b;
  border-radius: var(--radius-surface);
  color: #ff8095;
  font-size: 0.85rem;
}

/*
 * <phone-input> en input-group : la pill et la bordure sont portées
 * par le wrapper, le <select> et l'<input> sont transparents et se
 * partagent une frontière interne discrète. Focus-within propage
 * l'outline turquoise même quand l'utilisateur est dans le select.
 */
.phone-input {
  display: flex;
  width: 100%;
  border: 1px solid var(--color-page-form-surface-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-page-form-surface);
  overflow: hidden;
}

.phone-input:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.phone-input__country {
  flex-shrink: 0;
  padding: 0.8rem 0.6rem 0.8rem 1rem;
  border: none;
  border-right: 1px solid var(--color-page-form-surface-border);
  background-color: transparent;
  /* 1rem minimum : iOS auto-zoom — voir `.field__input`. */
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-page-form-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) center,
    calc(100% - 0.65rem) center;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

.phone-input__country option {
  background-color: var(--color-page-form-surface);
  color: var(--color-page-form-text);
}

.phone-input__country:focus {
  outline: none;
}

.phone-input__number {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: none;
  background-color: transparent;
  /* 1rem minimum : iOS auto-zoom — voir `.field__input`. */
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-page-form-text);
}

.phone-input__number::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.phone-input__number:focus {
  outline: none;
}

.disclaimer {
  font-size: 0.78rem;
  color: var(--color-page-form-text-muted);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.cta-confirm {
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: transparent;
  /* Outlined inverse aligné sur `.festival-card__cta` (landing) :
     bordure white/0.7 + texte plein blanc → hover plein blanc +
     texte noir. Couleur explicite obligatoire (certains user-agent
     mobiles appliquent sinon une couleur système incohérente). */
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  color: var(--color-page-form-text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.cta-confirm:hover,
.cta-confirm:focus-visible {
  background-color: var(--color-page-form-text);
  color: #000;
}

.footer-mini {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-page-form-text-muted);
  text-transform: uppercase;
  margin: 1rem 0 0 0;
}

.footer-mini a {
  color: inherit;
}

/* ───────── Terms (CGU) ───────── */
/*
 * Page CGU servie par `($locale).terms.tsx`. Hérite de la palette
 * dark partagée (`--color-page-form-*`) pour rester cohérente avec
 * la Page 2 form qui pointe vers elle en `target="_blank"`.
 */
.terms {
  min-height: 100vh;
  background-color: var(--color-page-form-bg);
  color: var(--color-page-form-text);
  padding: 4rem 1.5rem 3rem 1.5rem;
  display: flex;
  justify-content: center;
}

.terms__article {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.terms__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-page-form-surface-border);
}

.terms__title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.terms__last-update {
  font-size: 0.85rem;
  color: var(--color-page-form-text-muted);
  margin: 0;
}

.terms__rules {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding-left: 1.25rem;
}

.terms__rule {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-page-form-text);
}

.terms__legal-mentions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-page-form-surface-border);
}

.terms__legal-paragraph {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-page-form-text-muted);
  margin: 0;
}

.terms__footer {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-page-form-surface-border);
}

.terms__back {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-page-form-text);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.terms__back:hover,
.terms__back:focus-visible {
  background-color: var(--color-page-form-text);
  color: #000;
}

/* ───────── Decline / Expired (sobre) ───────── */
.page-message {
  min-height: 100vh;
  background-color: #f3f0e8;
  color: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.page-message__title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  color: #0a0a0a;
}

.page-message__footer {
  margin-top: 2rem;
}

/*
 * Sur Page Decline (et Expired si même structure), BrandFooter rend
 * `.footer-mini` qui hérite par défaut de `--color-page-form-text-muted`
 * (blanc 70 % opaque, conçu pour la Page 2 dark thème). Override scopé
 * sur le footer message pour aligner sur le brief « tout le texte en
 * noir sur not interested ».
 */
.page-message__footer .footer-mini {
  color: #0a0a0a;
}

.page-message__footer .brand-mark {
  color: #0a0a0a;
}

.page-message__body {
  font-size: 1rem;
  color: #0a0a0a;
  max-width: 40ch;
  line-height: 1.5;
  margin: 0;
}

/* ───────── Landing page (index `/`) ───────── */
.landing {
  min-height: 100vh;
  background-color: #0a0a0a;
  color: #fff;
  padding: 3rem 1.5rem 4rem 1.5rem;
}

/*
 * LegalMentionsFooter rendu dans `.landing` : casse le padding 1.5rem/4rem
 * du parent pour atteindre les bords du viewport, comme pour `.page-form`.
 */
.landing > .legal-mentions {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-bottom: -4rem;
  margin-top: 3rem;
  width: calc(100% + 3rem);
  max-width: none;
}

.landing__header {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.landing__logo {
  width: 56px;
  height: auto;
  display: block;
}

.landing__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.landing__subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

.festival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.festival-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.festival-card:hover {
  transform: translateY(-2px);
  border-color: #00d1d2;
}

.festival-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #333;
  background-image: url('/images/lakelive-card.jpg');
}

.festival-card__body {
  padding: 1.25rem 1.25rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.festival-card__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.festival-card__people {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #00d1d2;
  margin: 0;
  text-transform: uppercase;
}

.festival-card__description {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.festival-card__cta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1rem;
  text-align: center;
  margin-top: 0.5rem;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.festival-card:hover .festival-card__cta {
  background-color: #fff;
  color: #000;
}

/* ───────── Language switcher (header) ───────── */
/*
 * Toggle EN / FR fixé en haut à droite de toutes les pages outreach.
 * Server-rendered, pas de JS — chaque option pointe sur l'URL miroir
 * dans l'autre locale calculée par `swapLocaleUrl`.
 */
.language-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  gap: 0;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.language-switcher__item {
  min-width: 38px;
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.language-switcher__item:hover {
  color: #fff;
}

.language-switcher__item--active {
  background-color: rgba(255, 255, 255, 0.95);
  color: #000;
}

.language-switcher--light {
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.15);
}

.language-switcher--light .language-switcher__item {
  color: rgba(0, 0, 0, 0.6);
}

.language-switcher--light .language-switcher__item:hover {
  color: #000;
}

.language-switcher--light .language-switcher__item--active {
  background-color: #1a1a1a;
  color: #fff;
}

/* ───────── Hero context (Page 1) ───────── */
/*
 * Bloc explicite affiché entre le titre marketing et le CTA pour
 * répondre au retour métier post-démo 26/05 : « on ne sait pas ce
 * que l'on a gagné, lequel, à quelle date ni ce qu'il faut faire ».
 */
.hero__context {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1.75rem 0;
  max-width: 36ch;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.hero__context-tickets {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.35;
}

.hero__context-date {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  margin: 0.15rem 0 1.25rem 0;
  line-height: 1.35;
  padding: 0.35rem 0.85rem;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

.hero__context-action {
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.4rem 0 0 0;
  line-height: 1.4;
}

/* ───────── Field checkbox (+18 obligatoire, T05) ───────── */
/*
 * Remplace l'ancien `<p class="disclaimer">` purement textuel. Le
 * `required` HTML5 empêche le submit natif si non cochée. Sur mobile,
 * label cliquable suffisamment grand pour le tap (target ≥ 44 px via
 * line-height + padding).
 */
.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #333;
  line-height: 1.5;
}

.field-checkbox__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 0.15rem;
  cursor: pointer;
  accent-color: #00d1d2;
}

.field-checkbox__label {
  flex: 1;
  color: var(--color-page-form-text);
}

/* ───────── Mobile-first ajustements (≤ 480 px) ───────── */
/*
 * Suite à la remontée métier 26/05 « majorité usage mobile », garanties
 * minimales sur viewport étroit :
 *  - CTA tactiles ≥ 48 px de haut (Apple HIG / Material).
 *  - Padding latéral ≥ 1 rem pour éviter le débordement et la
 *    coupure des titres en bord d'écran.
 *  - Champs form ≥ 48 px (zone tactile confortable).
 *  - Festival grid en 1 colonne sur écran ≤ 480 px.
 *  - Language switcher légèrement plus compact pour ne pas chevaucher
 *    le contenu hero centré.
 */
@media (max-width: 480px) {
  .hero__content {
    padding: 3.5rem 1rem 1.5rem 1rem;
  }
  .hero__cta {
    min-height: 48px;
    width: 100%;
    max-width: 320px;
    padding: 1rem 1.25rem;
  }
  .page-form {
    padding: 4rem 0.75rem 2rem 0.75rem;
  }
  .field__input {
    min-height: 48px;
  }
  .cta-confirm {
    min-height: 52px;
  }
  .festival-grid {
    grid-template-columns: 1fr;
  }
  .landing {
    padding: 4rem 1rem 3rem 1rem;
  }
  .language-switcher {
    top: 0.75rem;
    right: 0.75rem;
  }
  .language-switcher__item {
    min-width: 34px;
    min-height: 30px;
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
  }
}

/* ───────── Legal mentions footer (18+ + avertissements PMI) ───────── */
/*
 * Composant `LegalMentionsFooter` rendu en bandeau pleine largeur en bas
 * de chaque page (landing + Page 1 + Page 2 + Page 3). Layout responsive :
 * - Desktop (≥ 720px) : grille 2 colonnes (badge 18+ compact à gauche,
 *   paragraphes pleine largeur à droite). Optimise la hauteur du bandeau
 *   en exploitant la largeur disponible.
 * - Mobile : stack vertical centré (badge → paragraphes).
 *
 * Le sigle 18+ est un glyphe textuel circulaire (pas d'asset binaire en
 * repo, ratio constant, accessible ARIA via `aria-label`).
 *
 * Le bandeau s'étend `align-self: stretch` pour casser la contrainte
 * `align-items: center` du parent (`.page-form`) et passer en
 * full-bleed. Le z-index 2 le hisse au-dessus du `.hero__image` (z-0)
 * et de `.hero__content` (z-1).
 *
 * Convention PMI tobacco : variant `light` (fond blanc, texte noir)
 * partout par défaut — les mentions légales doivent rester lisibles
 * indépendamment du thème de la page hôte.
 */
.legal-mentions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 100%;
  gap: 0.6rem;
  padding: 0.85rem clamp(1rem, 5vw, 2.5rem);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
}

@media (min-width: 720px) {
  .legal-mentions {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: 0.7rem clamp(1.5rem, 4vw, 3rem);
  }
}

.legal-mentions__paragraph {
  margin: 0;
  max-width: 100%;
}

.legal-mentions__age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1.5px solid currentColor;
  user-select: none;
}

@media (min-width: 720px) {
  .legal-mentions__age-badge {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.72rem;
  }
}

/*
 * Wrapper texte (les 2 paragraphes consolidated + adultsOnly) — sur
 * desktop, ils s'étendent sur la largeur restante après le badge ; sur
 * mobile, ils se centrent sous le badge.
 */
.legal-mentions__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.legal-mentions--dark {
  background-color: #0a0a0a;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-mentions--dark .legal-mentions__age-badge {
  background-color: #000;
  color: #fff;
}

.legal-mentions--light {
  background-color: #ffffff;
  color: #0a0a0a;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-mentions--light .legal-mentions__age-badge {
  background-color: #ffffff;
  color: #0a0a0a;
}