/* Composant : page Événements. Utilise les variables de style.css (couleurs, polices, espacements).

   Deux blocs : le diaporama des derniers grands rendez-vous (evenements.js pose .is-ready, .is-on et .is-anim) et les articles
   « À venir ». Toutes les diapositives occupent la même cellule de grille : la scène garde la hauteur de la plus haute, rien ne saute.
   Seuls opacity et visibility changent d'une diapositive à l'autre. Fond blanc ; les accents sont le jaune et le biseau à 17°. */

/* ===== Visuels (affiche, photo ou plaque typographique) =====
   Toujours en portrait 4:5, comme les affiches du club : l'affiche n'est jamais rognée (le rapport de l'image est respecté).
   --evt-h = hauteur de l'image ; la largeur en découle (4/5). Sur mobile le visuel est empilé au-dessus du texte. */
.evt-visuel { --evt-w: min(100%, calc(var(--evt-h, 440px) * .8)); width: var(--evt-w); min-width: 0; margin: 0; }
.evt-visuel > img, .evt-zoom > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }
.evt-visuel--affiche > .evt-zoom > img { object-fit: contain; }
.evt-visuel figcaption { display: grid; gap: 2px; padding-top: 10px; font-size: .875rem; line-height: 1.4; }
.evt-visuel figcaption small { color: var(--muted); font-size: .8125rem; }

/* Affiche cliquable : un bouton qui entoure l'image, avec une petite loupe en coin */
.evt-zoom { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.evt-zoom:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.evt-zoom__icone { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--yellow); color: var(--on-yellow); font-size: 1.25rem; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--navy) 70%, transparent); }
@media (hover: hover) { .evt-zoom:hover .evt-zoom__icone { background: #fff; } }

/* Plaque typographique (pas d'image) : aplat bleu nuit, jours en grand, bande jaune inclinée avec le mois et l'année.
   Décorative : le texte à côté dit déjà tout. Les tailles suivent la largeur de la plaque (cqw). */
.evt-plaque { position: relative; overflow: hidden; aspect-ratio: 4 / 5; container-type: inline-size; background: var(--navy); color: #fff; }
.evt-plaque::before { content: ""; position: absolute; inset: auto -20% -12% -20%; height: 34%; background: var(--navy-2); transform: rotate(-12deg); }
.evt-plaque__club { position: absolute; left: 7cqw; top: 7cqw; font: 700 5.2cqw/1 var(--font-title); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #fff 78%, var(--navy)); }
.evt-plaque__jours { position: absolute; left: 7cqw; right: 7cqw; top: 15cqw; font: 700 3.5rem/.9 var(--font-title); font-size: 34cqw; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.evt-plaque__bande { position: absolute; left: -12%; right: -12%; top: 62%; display: block; padding: 4.4cqw 7cqw 4.4cqw calc(12% + 7cqw); background: var(--yellow); color: var(--on-yellow); transform: rotate(-12deg); transform-origin: 50% 50%; }
.evt-plaque__bande > span { display: block; font: 700 1.5rem/1 var(--font-title); font-size: 11cqw; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* ===== Diaporama ===== */
.evt-diapo__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.evt-slide { grid-area: 1 / 1; display: grid; gap: 24px; align-content: start; min-width: 0; }
.evt-slide__visuel { min-width: 0; }
.evt-slide__visuel .evt-visuel { --evt-w: min(100%, 360px); }
.evt-slide__txt { display: grid; gap: 14px; align-content: center; justify-items: start; min-width: 0; }
.evt-slide__txt > * { margin: 0; max-width: 54ch; }
.evt-slide__txt h3 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: .95; overflow-wrap: anywhere; }
.evt-slide__date { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.evt-slide__txt .tag { padding: 6px 12px 6px 10px; font-size: .875rem; }
.evt-slide__txt .tag--next { padding-right: 18px; }
.tag--soon { background: var(--navy); color: #fff; }
.evt-slide__lieu { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-weight: 600; line-height: 1.4; }
.evt-slide__lieu .ph { flex: none; margin-top: .1em; color: var(--text); }
.evt-slide__resume { font-size: 1.125rem; }
.evt-slide__liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.evt-slide__todo { font-size: .9375rem; color: var(--muted); }
@media (min-width: 900px) {
  .evt-slide { --evt-h: clamp(340px, 62vh, 520px); grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; }
  .evt-slide__visuel .evt-visuel { --evt-w: calc(var(--evt-h) * .8); }
}

/* Une seule diapositive visible quand le script est prêt ; les autres restent masquées (aussi pour les lecteurs d'écran) */
.evt-diapo.is-ready .evt-slide { visibility: hidden; opacity: 0; }
.evt-diapo.is-ready .evt-slide.is-on { visibility: visible; opacity: 1; }
.evt-diapo.is-anim .evt-slide { transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.evt-diapo.is-anim .evt-slide.is-on { transition: opacity .5s var(--ease), visibility 0s; }

/* Commandes : précédent, pause, suivant ; points ; compteur. Cachées tant que le script n'est pas prêt. */
.evt-diapo__commandes { display: none; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.evt-diapo.is-ready .evt-diapo__commandes { display: flex; }
.evt-diapo__boutons { display: flex; gap: 8px; }
.evt-btn { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 2px solid var(--navy); border-radius: 0; background: transparent; color: var(--navy); font-size: 1.1rem; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
.evt-btn:focus-visible, .evt-point:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.evt-btn:active { transform: scale(.94); }
@media (hover: hover) { .evt-btn:hover { background: var(--yellow); border-color: var(--navy); } }
.evt-diapo.is-paused .evt-btn[data-play] { background: var(--yellow); }
.evt-diapo__points { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
/* Zone tactile de 44 px ; la bande inclinée dessinée dedans reste fine. Contour bleu nuit : visible sur fond blanc ; courant : jaune. */
.evt-point { position: relative; display: block; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
.evt-point::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 12px; margin-top: -6px; border: 2px solid var(--navy); background: transparent; transform: skewX(-17deg); transition: background-color .2s var(--ease); }
.evt-point[aria-current="true"]::before { background: var(--yellow); }
@media (hover: hover) { .evt-point:hover::before { background: color-mix(in srgb, var(--yellow) 55%, transparent); } .evt-point[aria-current="true"]:hover::before { background: var(--yellow); } }
.evt-diapo__compteur { margin: 0 0 0 auto; font: 600 1.5rem/1 var(--font-title); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.evt-diapo__compteur span { color: var(--text); }
/* Petit écran : boutons et compteur sur une ligne, les points dessous (ils ne tiennent pas à côté) */
@media (max-width: 719px) {
  .evt-diapo__boutons { order: 1; }
  .evt-diapo__compteur { order: 2; }
  .evt-diapo__points { order: 3; flex-basis: 100%; margin: 0 -10px; }
}

/* ===== Articles « À venir » ===== */
.evt-liste { display: grid; gap: clamp(40px, 6vw, 72px); }
.evt { display: grid; gap: 24px; align-content: start; min-width: 0; padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.evt:last-child { padding-bottom: 0; border-bottom: 0; }
.evt__media .evt-visuel { --evt-w: min(100%, 420px); }
/* Sans image : la plaque de date ne sert qu'à côté du texte (sur mobile la pastille de date de l'en-tête suffit) */
@media (max-width: 899px) { .evt__media:has(> .evt-plaque) { display: none; } }
.evt__corps { min-width: 0; }
@media (min-width: 900px) {
  .evt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .evt__media { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* En-tête : pastille de date inclinée (jaune), puis jour de la semaine, titre et lieu */
.evt__tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: start; margin-bottom: 20px; }
.evt__badge { display: grid; align-content: center; justify-items: center; gap: 4px; min-width: 84px; margin: 0; padding: 12px 28px 12px 16px; background: var(--yellow); color: var(--on-yellow); text-align: center; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.evt__badge b { font: 700 2.75rem/.9 var(--font-title); font-variant-numeric: tabular-nums; }
.evt__badge span { font: 700 1rem/1 var(--font-title); letter-spacing: .08em; text-transform: uppercase; }
.evt__quand { margin: 0 0 8px; color: var(--muted); font: 700 .9375rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.evt__tete h3 { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: .95; overflow-wrap: anywhere; }
.evt__lieu { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--muted); font-weight: 600; line-height: 1.4; }
.evt__lieu .ph { flex: none; margin-top: .1em; color: var(--text); }
.evt__lead { max-width: 62ch; margin: 0 0 18px; font-size: 1.1875rem; font-weight: 600; line-height: 1.5; }
.evt__texte p { max-width: 68ch; }
/* Texte d'article justifié et coupé aux syllabes sur écran large seulement (lisibilité des colonnes étroites) */
@media (min-width: 600px) { .evt__texte p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }

/* Informations pratiques : une ligne par donnée, filets fins (même principe que la page Stages) */
.evt__faits { margin: 26px 0 0; }
.evt__faits > div { display: grid; gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.evt__faits > div:last-child { border-bottom: 1px solid var(--line); }
.evt__faits dt { color: var(--muted); font-weight: 700; }
.evt__faits dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 640px) { .evt__faits > div { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); } }

.evt__actions { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; margin: 26px 0 0; }
.evt__todo { max-width: 62ch; margin: 20px 0 0; color: var(--muted); font-size: .9375rem; }
.evt a:focus-visible, .evt-diapo a:focus-visible, .evt-suite a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* Le biseau du bouton principal (clip-path) rognerait l'anneau de focus : il passe en rectangle tant que le bouton a le focus */
.evt__actions .btn--primary:focus-visible { clip-path: none; }
.evt .todo, .evt-slide .todo { border-radius: var(--radius); }

/* Affiche agrandie : fenêtre native, l'affiche entière (jamais rognée) et son crédit */
.evt-dlg { position: fixed; inset: 0; width: fit-content; height: fit-content; max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.evt-dlg::backdrop { background: color-mix(in srgb, var(--navy) 88%, transparent); }
.evt-dlg > img { display: block; width: min(92vw, calc(88dvh * .8)); height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: var(--navy); }
.evt-dlg__credit { margin: 8px 0 0; font-size: .875rem; text-align: center; }
.evt-dlg form { position: absolute; top: 8px; right: 8px; z-index: 1; margin: 0; }
.evt-dlg__x { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 0; background: var(--navy); color: #fff; font-size: 1.25rem; cursor: pointer; -webkit-appearance: none; appearance: none; }
.evt-dlg__x:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (hover: hover) { .evt-dlg__x:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); } }

/* Cas sans événement, et fin de page */
.evt-vide { margin: 0; padding: 40px 24px; border: 2px dashed var(--line); color: var(--muted); text-align: center; max-width: none; }
.evt-suite { max-width: none; margin: clamp(40px, 6vw, 64px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .evt-diapo.is-anim .evt-slide, .evt-diapo.is-anim .evt-slide.is-on, .evt-point::before { transition: none; }
  .evt-btn:active { transform: none; }
}
@media (forced-colors: active) {
  .evt-point[aria-current="true"]::before { background: Highlight; }
  .evt__badge { border: 2px solid currentColor; }
}