/* ============================================================
   evenement.html — la page d'une fête.
   Réorganisée le 29 septembre 2026, à la demande du client, d'après la
   page d'un événement DICE, dans la charte La Bringue :
   - ordinateur : deux colonnes. À gauche l'affiche (ou le carré de la
     couleur de l'organisateur), qui reste à l'écran au défilement ; à
     droite, dans l'ordre de lecture : le titre, la date, le lieu, les
     portes et l'âge, la barre d'achat, À propos, Où, et l'encadré de
     l'organisateur. Une fête passée montre ses contenus sous le titre ;
   - sous 900 px : une seule colonne dans le même ordre, l'affiche en
     tête, la barre d'achat collée en bas de l'écran (style.css).
   Une seule zone de tarifs et d'achat : la barre. L'ancienne liste des
   tarifs du bas de page et son second bouton ont été retirés, et la
   section « Infos pratiques » aussi : tout ce qu'elle disait est dans
   la tête de la page (voir evenement.html, « une fois chacun »).

   Page bleue avec la teinte de la fête (style.css, « La couleur de la
   fête ») : tout texte hors surface s'écrit en --ink ou --ink-soft, qui
   valent le papier ici. Pire cas mesuré sur le haut du dégradé : 7,74.
   Aucune opacité sur un texte : elle ferait tomber ces mesures. Dans la
   barre (surface papier), --ink-mute vaut le bleu doux : 10,29.
   ============================================================ */

/* --- Le rythme vertical ---
   Deux écarts, et deux seulement, dans la colonne de droite :
   - entre deux sections (À propos, Où, Présenté par…), un grand blanc
     constant : 64 px sur ordinateur, 48 px sous 900 px ;
   - entre le titre d'une section et son contenu, et entre deux blocs
     d'une même section, un petit : 12 px, 10 px sous 900 px.
   Le rapport de 5 pour 1 fait le travail de la proximité : un titre se
   lit avec ce qui le suit, jamais avec ce qui le précède. Les filets qui
   séparaient les sections ont été retirés : avec ce blanc, ils ne
   disaient plus rien (règle 6 de style.css, aucun élément décoratif sans
   information), et ils collaient aux titres (la marge de .ev-sec était
   annulée par « .ev section{padding-block:0} »). */
:root{
  --ev-entre-sections:64px;
  --ev-sous-titre:12px;
}
@media (max-width:900px){
  :root{
    --ev-entre-sections:48px;
    --ev-sous-titre:10px;
  }
}

/* Les sections de la page gardent leur propre marge : celle, générale,
   de style.css (section{padding-block}) est remise à zéro. */
.ev section{padding-block:0}

.ev{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(32px,4.5vw,72px); align-items:start;
  padding-top:14px; padding-bottom:var(--rythme);
}

/* --- L'affiche ---
   Le cadre prend la proportion naturelle de l'affiche (--ratio, posé
   par evenement.html au chargement, bornée de 4:5 à 16:9) : l'affiche
   le remplit sans vide et sans rien couper. Au-delà des bornes, seul
   le trop-plein est rogné, au centre (cover, style.css). Carré avant le
   chargement, et pour le carré de couleur d'une fête sans affiche.
   Elle reste à l'écran pendant qu'on lit la colonne de droite ; le
   décalage laisse la place de l'en-tête collé (102 px). Sur
   ordinateur, sa hauteur ne dépasse pas l'écran moins ce décalage :
   c'est la largeur qui se réduit, centrée sur le fond de la page. */
.ev-affiche{position:sticky; top:124px}
.ev-affiche .visuel{
  aspect-ratio:var(--ratio,1); border-radius:var(--lb-radius);
  width:min(100%, calc((100vh - 148px) * var(--ratio,1)));
  margin-inline:auto;
}

/* --- La tête : titre, date, lieu, portes et âge --- */
.ev-info{min-width:0}
.ev-entete #pastille:empty{display:none}
.ev-info h1{
  font-size:clamp(40px,5.2vw,76px); line-height:.92; margin:0 0 20px;
  overflow-wrap:break-word;
}
.ev-quand{font-size:clamp(18px,1.6vw,21px); font-weight:800; color:var(--ink)}
.ev-quand::first-letter{text-transform:uppercase}
.ev-ou, .ev-faits{margin-top:4px; font-size:clamp(17px,1.5vw,19px); color:var(--ink-soft)}
.ev-faits[hidden]{display:none}
/* Date ou lieu changés : le mot en jaune gras sur le haut de la page
   (5,17 au pire cas du dégradé, #FFC93C ; 7,08 sur le bleu plein),
   l'ancienne valeur en --ink-soft. Jamais de rouge. */
.ev-change{font-weight:800; color:var(--lb-jaune)}
.ev-avant{white-space:normal}
.ev-encart{margin-top:calc(var(--ev-sous-titre) * 2); padding:16px 18px}

/* --- La barre d'achat, sur ordinateur ---
   Ses règles communes sont dans style.css ; ne s'ajoute ici que ce qui
   est propre à la page réorganisée : la description du tarif choisi et
   la ligne « prix final ». Le prix d'appel (« Dès 5 000 F ») a été
   retiré : chaque tarif porte déjà son prix. */
@media (min-width:901px){
  .ev .barre-achat{margin-top:28px; padding:18px}
}
.barre-detail[hidden], .barre-note[hidden], .barre-total[hidden]{display:none}
.barre-detail{font-size:14px; color:var(--ink-soft); margin-top:-4px}
.barre-note{font-size:13px; color:var(--ink-mute)}

/* --- La confirmation, à la place de la barre --- */
.ev-merci{padding:36px 0 8px; scroll-margin-top:124px}
.ev-merci h2{font-size:clamp(26px,3vw,34px)}
.ev-merci .billet-final{margin-top:calc(var(--ev-sous-titre) * 2)}
.ev-merci .merci-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}

/* --- Les sections de lecture ---
   Sans filet : le blanc seul les sépare (voir « Le rythme vertical »). */
.ev .ev-sec{margin-top:var(--ev-entre-sections)}
.ev-sec > h2{font-size:clamp(20px,2vw,24px); margin-bottom:var(--ev-sous-titre); color:var(--ink)}
/* pre-line : les paragraphes saisis par l'organisateur restent des paragraphes. */
.ev-texte{font-size:18px; color:var(--ink-soft); max-width:62ch; white-space:pre-line}
.ev-texte + .ev-texte{margin-top:var(--ev-sous-titre)}
.ev-leg{color:var(--ink-soft); font-size:16px}
.ev-leg + .contenus{margin-top:var(--ev-sous-titre)}

/* Où : l'adresse quand elle est donnée, puis la carte et ses liens, au
   même petit écart que sous le titre. */
.ev-sec .lieu-carte{margin-top:0}
.ev-sec .ev-texte:not([hidden]) + .lieu-carte{margin-top:var(--ev-sous-titre)}
.ev-sec .lieu-liens{margin-top:var(--ev-sous-titre)}
.ev-sec .orga-bloc{margin-top:0}
/* La photo de l'organisateur : ronde, comme .profil-photo d'organisateur.css. */
.initiales--photo{border-radius:50%; overflow:hidden}
.initiales--photo img{width:100%; height:100%; object-fit:cover; display:block}

/* Une fête passée sans contenus : une ligne à la place de la barre. */
.ev-passee{margin-top:28px; font-size:18px; color:var(--ink)}
.ev-passee span{font-weight:800}
.ev-passee a{color:var(--ink); text-decoration:underline; display:inline-block; min-height:40px; padding-block:8px}

/* Un paiement en attente : la barre ne garde que sa phrase et son lien. */
.barre--attente > :not(#attente){display:none}
.barre-attente{font-size:16px; color:var(--ink)}
.barre-attente a{color:var(--ink); text-decoration:underline; display:inline-block; min-height:40px; padding-block:8px}

/* --- Sous 900 px : une colonne, QUOI, QUAND et OÙ d'abord ---
   Une recette à 375 × 812 mesurait la barre collée à 593 px, la date à
   647 et le lieu à 706 : l'affiche en tête poussait la tête sous la
   barre. La colonne de droite s'ouvre (display:contents) pour que la
   tête passe avant l'affiche ; le reste garde l'ordre du document.
   Sans affiche, le carré de couleur est retiré : il ne portait aucune
   information, et le haut de la page a déjà cette couleur. */
@media (max-width:900px){
  .ev{display:flex; flex-direction:column; padding-top:8px}
  .ev-info{display:contents}
  .ev-info > *{order:2}
  .ev-info > .ev-entete{order:0}
  .ev-affiche{order:1; position:static; margin:24px 0 0}
  .ev-affiche--sans{display:none}
  .ev-affiche .visuel{width:100%; max-width:560px}
  .ev-info h1{margin-bottom:12px}
  /* La barre collée reste basse : la description et la ligne « prix
     final » se serrent. */
  .barre-detail{font-size:13px; margin-top:-2px}
  .barre-note{font-size:12px}
  .ev-merci{padding-top:28px}
  /* La mascotte se serre : les QR doivent tenir dans l'écran. */
  .ev-merci .lb-mascotte--merci{width:72px}
}

/* --- La vitrine : cette page dans le téléphone du décor de l'accueil ---
   (evenement.html?vitrine=1, voir « La vitrine » dans evenement.html).
   Rien n'y change de la page, sauf deux choses qu'un téléphone n'a pas :
   la barre de défilement, retirée, et le rond qui marque un geste,
   puisqu'aucun doigt ne touche l'écran. Le rond est bleu, cerné de
   papier : il se lit sur le papier de la barre et du panneau comme sur
   le bleu de la page. Il ne porte aucun texte. */
html.vitrine{scrollbar-width:none}
html.vitrine::-webkit-scrollbar{display:none}
/* Le panneau y est ouvert sans être modal (voir evenement.html) : il
   passe au-dessus de la barre collée, comme le fait un dialogue modal. */
html.vitrine .resa-panneau{z-index:100}
.vitrine-doigt{
  position:fixed; z-index:99; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  border:3px solid var(--lb-bleu); background:color-mix(in srgb, var(--lb-bleu) 30%, transparent);
  box-shadow:0 0 0 2px var(--lb-papier);
  opacity:0; pointer-events:none;
}
.vitrine-doigt.tape{animation:vitrine-tape .5s ease-out}
@keyframes vitrine-tape{0%{opacity:0; transform:scale(1.7)} 35%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(.85)}}