/* ── /evenement.html — billet de soirée 974.ch ──────────────────────────────
   Direction : un BILLET / fanzine de péi, pas une nième « landing page ».
   Les numéros de section, le trait pointillé, le tampon incliné et la plaque
   blanche du QR reprennent l'imaginaire du ticket de soirée ; tout le reste
   vient de styles.css : mêmes variables, mêmes polices (Inter 900 pour les
   titres, Lora italique pour la voix créole), mêmes boutons et même pied de
   page. Aucune couleur nouvelle, aucun vert, aucune police distante.

   POURQUOI UN FICHIER SÉPARÉ
   styles.css est déjà le SHELL de l'accueil (1169 lignes, précachées). Y
   ajouter une page entière ferait re-télécharger la feuille de l'accueil à
   chaque correction de la soirée — et risquerait de casser une mise en page
   éprouvée par 48 tests e2e. Ici : zéro sélecteur commun, zéro régression.
   evenement.css est chargée APRÈS styles.css et n'utilise que ses tokens.

   LÉGÈRETÉ : aucune image de fond, aucune vidéo, aucun script inline (CSP
   `style-src 'self'`). Les apparitions sont des animations CSS autonomes :
   sans JavaScript, la page reste entièrement lisible.

   LE FOND ANIMÉ : le faisceau du haut vient de styles.css (même pile
   .bg-stack / .bg-photo / .bg-beams que l'accueil) ; le canvas et son animation
   sont dans evenement.js, le même code que app.js. Le fond reste figé en
   mouvement réduit. */
:root { --ev-encre: var(--night); }

.ev-page { max-width: 780px; padding-top: calc(112px + env(safe-area-inset-top)); padding-bottom: 40px }
.ev-page section, .ev-page header { scroll-margin-top: 120px }
.ev-in { animation: evIn .75s var(--ease-pull) both }
.ev-page > .ev-in:nth-child(2) { animation-delay: .08s }
.ev-page > .ev-in:nth-child(3) { animation-delay: .14s }
.ev-page > .ev-in:nth-child(4) { animation-delay: .2s }
.ev-page > .ev-in:nth-child(5) { animation-delay: .26s }
@keyframes evIn { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .ev-in { animation: none !important; opacity: 1; transform: none }
}

/* ── En-tête : même marque que le pied de l'accueil, format « billet » ───── */
.ev-back { margin: 0 0 18px }
.ev-back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--yellow); text-decoration: underline; text-underline-offset: 3px }
.ev-back .icon { width: 17px; height: 17px }
/* Le logo de l'ASSOCIATION 974.ch passe au-dessus du texte, en colonne : à
   cette taille (150 → 260 px), il ne tient plus à côté du chapô sans le
   tasser. Il reste le PREMIER élément de la page — c'est le premier regard
   des personnes qui scannent le QR sur place. */
.ev-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px }
/* Le logo de l'association a un fond BLANC dans son fichier d'origine : on le
   garde tel quel (le « 974 » et le « en Suisse » sont en blanc, le rendre
   transparent les effacerait) et on le pose donc comme une carte claire sur
   le fond sombre de la page. `contain` plutôt que `cover` : le logo est
   rectangulaire (900×604), `cover` en rognerait les bords. */
.ev-logo { width: clamp(150px, 46vw, 260px); height: auto; flex: none; border-radius: 16px; background: #FBFCFC; object-fit: contain; box-shadow: 0 12px 34px rgba(2,4,53,.5) }
.ev-eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.6 }
.ev-eyebrow strong { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--yellow) }
.ev-title { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 900; font-size: clamp(38px, 8.4vw, 68px); line-height: .98; letter-spacing: -.045em; color: var(--white); margin: 0 0 20px }
.ev-title-accent { color: var(--yellow) }
/* Le sous-titre « Bienvenue au Coin Studio Photo » est BLANC (demande de
   l'organisateur, 2026-11-07) : le rouge appartenait à l'ancienne formulation
   du titre, et il tirait l'œil vers une ligne qui n'est plus la nouvelle. */
/* Les cocotiers ne doivent jamais se retrouver SEULS sur une ligne : le
   palmier de droite est collé à « Photo », celui de gauche à « Bienvenue ».
   Sans ces deux groupes insécables, le second cocotier tombait à la ligne
   tout seul sous le titre (2026-11-07). */
.ev-palm { white-space: nowrap }
.ev-title em { display: block; font-family: var(--serif); font-weight: 400; font-size: .6em; letter-spacing: -.02em; line-height: 1.35; color: var(--white); margin-top: 10px }
/* L'heure du shooting : elle PORTAIT la pastille « Coin shooting dès 19H »,
   retirée le 2026-11-07 pour ne pas la dire deux fois. Elle est maintenant la
   ligne la plus lue de l'en-tête — d'où le 19h en jaune.
   Tailles relevées le 2026-11-07 : l'en-tête doit se lire d'un coup d'œil
   (« le size important pour la coque ») — 16 px et 15 px passaient trop
   près du corps du texte. */
.ev-debut { font-size: 19px; font-weight: 700; color: var(--cream); margin: 0 0 8px }
.ev-debut strong { color: var(--yellow) }
.ev-date { font-size: 18px; font-weight: 600; color: var(--cream); margin-bottom: 18px }
.ev-horaires { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px }
.ev-horaires span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); font-size: 12.5px; color: var(--cream) }
.ev-horaires .icon { width: 16px; height: 16px; color: var(--yellow) }

/* ── Le billet : fond de carte, liseré jaune, « perforation » sur les bords ── */
.ev-billet { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px 28px; box-shadow: 0 26px 70px rgba(2,4,53,.5); overflow: hidden }
.ev-billet::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--yellow) 0 38%, var(--red) 38% 72%, var(--blue) 72% 100%) }
.ev-billet::after { content: ""; position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: radial-gradient(circle at 100% 0, rgba(241,217,10,.14), transparent 70%); pointer-events: none }
.ev-num { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--yellow); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-right: 9px; vertical-align: 3px }
.ev-h2 { font-family: "Inter", -apple-system, sans-serif; font-weight: 900; font-size: clamp(23px, 4.4vw, 32px); line-height: 1.1; letter-spacing: -.03em; color: var(--white); margin: 0 0 16px }
.ev-h2 .ev-num { font-family: var(--font) }
.ev-p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 0 0 15px }
.ev-p strong { color: var(--cream) }
.ev-creole { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(18px, 3.4vw, 23px); line-height: 1.55; color: var(--yellow); margin: 0 0 18px }
.ev-perf { display: flex; align-items: center; gap: 10px; margin: 26px 0; color: var(--line) }
.ev-perf::before, .ev-perf::after { content: ""; flex: 1; border-top: 1.5px dashed currentColor }
.ev-perf span { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--night); border: 1.5px solid var(--line) }
.ev-tampon { display: inline-block; transform: rotate(-6deg); border: 2px solid var(--red-bright); color: var(--red-bright); border-radius: 8px; padding: 7px 13px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 6px }
.ev-credit { font-size: 13px; color: var(--muted); margin: 0 }
.ev-credit a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px }
.ev-credit strong { color: var(--cream) }

/* ── Partage : le lien et le bouton, en bas de page ─────────────────────── */
/* Le bouton de partage est CENTRÉ et tout en bas (demande de l'organisateur,
   2026-11-07) : c'est le dernier geste de la page, et il doit sauter aux
   yeux — pas se perdre en haut à gauche d'un bloc de texte. */
.ev-url { display: block; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); font-size: 13px; line-height: 1.5; color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere }
.ev-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px }
.ev-actions .button { min-height: 50px; font-size: 13px; padding: 13px 22px }

/* ── Formulaire : mêmes champs que l'accueil, une seule colonne sur mobile ── */
.ev-form-card { margin-top: 34px; background: rgba(15,17,23,.55); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 24px; box-shadow: 0 26px 70px rgba(2,4,53,.55) }
.ev-form-lead { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--yellow); margin: 0 0 6px }
.ev-required { font-size: 11.5px; color: var(--muted); margin: 0 0 22px }
.ev-required span { color: var(--red-bright) }
.ev-fieldset { padding: 0; margin: 0 0 26px; min-width: 0; border: 0 }
.ev-fieldset + .ev-fieldset { padding-top: 24px; border-top: 1px solid var(--line-soft) }
.ev-legend { display: flex; align-items: center; padding: 0; margin-bottom: 16px; font-size: 14px; font-weight: 650; color: var(--cream) }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px }
@media (min-width: 560px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.ev-field { min-width: 0 }
.ev-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--cream) }
.ev-tag { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--navy); background: var(--yellow); border-radius: 99px; padding: 2px 8px }
.ev-field input[type="text"], .ev-field input[type="tel"], .ev-field input[type="email"] { display: block; width: 100%; min-height: 48px; height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--field); color: var(--cream); font-size: 14px; -webkit-appearance: none; appearance: none; transition: border-color .18s, box-shadow .18s }
.ev-field input::placeholder { color: var(--muted-soft); opacity: 1 }
.ev-field input:hover { border-color: var(--blue-bright) }
.ev-field input:focus { border-color: var(--yellow); outline: 0; box-shadow: 0 0 0 4px rgba(241,217,10,.16) }
.ev-field input[aria-invalid="true"] { border-color: var(--red-bright); background: rgba(229,13,19,.10) }
.ev-hint { font-size: 11.5px; line-height: 1.6; color: var(--muted); margin: 7px 0 0 }
.ev-hint strong { color: var(--yellow) }
.ev-error { font-size: 12px; line-height: 1.5; color: var(--error); margin: 6px 0 0 }

/* Deux cas, un seul choix : radio réel, état coché en CSS (aucun JS). */
.ev-choix { display: grid; gap: 11px }
@media (min-width: 560px) { .ev-choix { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.ev-choix-label { position: relative; display: block; min-height: 44px; cursor: pointer }
.ev-choix-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.ev-choix-face { display: block; height: 100%; padding: 16px 15px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--field); transition: border-color .2s ease, background-color .2s ease, transform .2s ease }
.ev-choix-label:hover .ev-choix-face { border-color: var(--blue-bright) }
.ev-choix-label input:focus-visible + .ev-choix-face { outline: 3px solid var(--yellow); outline-offset: 3px }
.ev-choix-label input:checked + .ev-choix-face { border-color: var(--yellow); background: rgba(241,217,10,.09); transform: translateY(-2px) }
/* A est en ROUGE, B en BLEU (2026-11-07, 23 h 33). L'organisateur a inversé
   les deux couleurs : « le rouge fait appel à la restriction ». Le cas A
   restreint l'usage des photos (envoi privé, aucune publication), le cas B
   l'autorise — c'est donc le A qui porte le rouge, et le B le bleu. Le bleu et
   le rouge restent les deux couleurs du drapeau de La Réunion ; seul leur
   affectation change.
   Contraste du blanc : 4,8:1 sur --red (#E50D13), 6,3:1 sur --blue (#1058CE).
   Les deux passent le AA pour ce texte gras de 12 px. */
.ev-choix-lettre { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--red); color: var(--white); font-weight: 800; font-size: 12px; margin-bottom: 10px }
.ev-choix-label:nth-child(2) .ev-choix-lettre { background: var(--blue); color: var(--white) }
.ev-choix-titre { display: block; font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 7px; line-height: 1.35 }
.ev-choix-texte { display: block; font-size: 12.5px; line-height: 1.6; color: var(--muted) }

/* Confirmations : cible tapable ≥ 44 px, comme sur l'accueil. */
.ev-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 11px 13px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); cursor: pointer }
.ev-consent:hover { border-color: var(--blue-bright) }
.ev-consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--yellow) }
.ev-consent-texte { font-size: 13px; line-height: 1.55; color: var(--cream) }
/* `display:block` est une correction de lecture, pas une coquetterie : sans
   lui la mention collait au titre (« Protection de vos donnéesVos
   coordonnées… »), mesuré en capture 390×844. Le texte juridique doit
   commencer à sa propre ligne pour être lu comme une explication distincte. */
.ev-consent-mention { display: block; font-size: 11.5px; line-height: 1.65; color: var(--muted); margin: 6px 0 0 }
.ev-consent-mention--hors-label { padding: 0 4px 0 45px; max-width: 62ch }
.ev-consent-mention--hors-label strong { color: var(--cream) }
.ev-consent-mention a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px }
.ev-consent-texte .icon { width: 17px; height: 17px; color: var(--yellow); margin-right: 5px }
.ev-consent[aria-invalid="true"] { border-color: var(--red-bright) }

.ev-form-bottom { margin-top: 4px }
.ev-restitution-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-size: 12.5px; line-height: 1.65; color: var(--muted) }
.ev-restitution-note .icon { width: 18px; height: 18px; color: var(--yellow); margin-top: 2px }
.ev-restitution-note strong { color: var(--cream) }
.ev-notice { font-size: 12.5px; line-height: 1.6; padding: 11px 14px; border-radius: 11px; margin: 0 0 14px }
.ev-notice-error { color: var(--white); background: rgba(229,13,19,.18); border: 1px solid var(--red-bright) }
.ev-notice-offline { color: var(--cream); background: rgba(16,88,206,.18); border: 1px solid var(--blue-bright) }
.ev-submit { width: 100%; min-height: 54px; font-size: 14px }
.ev-submit .icon { width: 18px; height: 18px }
.ev-form-foot { font-size: 11.5px; color: var(--muted-soft); text-align: center; margin: 14px 0 0 }
.ev-form-foot a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px }

/* Confirmation : A et B ne disent PAS la même chose, et c'est le point. */
.ev-confirmation { margin-top: 34px; text-align: center; background: var(--card); border: 1px solid rgba(241,217,10,.45); border-radius: var(--radius); padding: 32px 26px; box-shadow: 0 26px 70px rgba(2,4,53,.55) }
.ev-confirmation .success-symbol { margin: 0 auto 18px }
.ev-confirmation h2 { font-family: "Inter", sans-serif; font-weight: 900; font-size: clamp(26px, 5vw, 36px); letter-spacing: -.03em; color: var(--white); margin: 0 0 10px }
.ev-confirmation-lead { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--yellow); margin: 0 0 20px }
.ev-recap { text-align: left; padding: 16px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); margin: 0 0 18px }
.ev-recap h3 { font-size: 13px; font-weight: 700; color: var(--yellow); margin: 0 0 8px; letter-spacing: .03em }
.ev-recap p { font-size: 13.5px; line-height: 1.7; color: var(--cream); margin: 0 }
.ev-confirmation p.ev-restitution { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 0 0 22px }
.ev-confirmation .button { min-height: 46px }

/* Pied de page : .site-footer de styles.css + une ligne propre à la soirée. */
.ev-footer-note { width: 100%; text-align: center; font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--muted-soft); margin: 0 0 10px }
.site-footer { flex-wrap: wrap; gap: 8px 18px }