/* ==========================================================================
   Magic Parc - « Le pack EVG / EVJF » (page Événements privés, section EVG et
   EVJF seulement)

   Habillage de la fenêtre rendue par inc/evenements-prives.php
   (fp_render_evenement_offre) au clic sur le bouton « Voir le pack EVG /
   EVJF ». Patron repris quasi trait pour trait de assets/css/arcade-carte.css,
   classes renommées fp-pack-evg-* pour ne rien partager avec cette autre
   fenêtre (les deux peuvent coexister sur des pages différentes).

   Mobile d'abord. Couleurs uniquement en var(--fp-*).
   ========================================================================== */

.fp-pack-evg-dialog {
  width: min(100% - 20px, 480px);
  max-width: none;
  max-height: min(90vh, 560px);
  padding: 0;
  border: 0;
  border-radius: var(--fp-radius-lg);
  background: var(--fp-paper);
  color: var(--fp-ink);
  box-shadow: var(--fp-shadow-lg);
  overflow: hidden;
}
.fp-pack-evg-dialog[open] { display: flex; }

/* Le fond assombri. Deux déclarations volontairement : ::backdrop n'hérite les
   propriétés personnalisées de son élément d'origine que depuis Chrome 122,
   Firefox 118 et Safari 17.4 (même remarque que arcade-carte.css). */
.fp-pack-evg-dialog::backdrop {
  background: rgba(0, 0, 0, .6);
  background: color-mix(in srgb, var(--fp-dark) 78%, transparent);
}

.fp-pack-evg-boite {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(90vh, 560px);
}

.fp-pack-evg-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--fp-line);
}
.fp-pack-evg-titre {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  line-height: 1.1;
  color: var(--fp-ink);
}
/* Le titre reçoit le focus à l'ouverture (tabindex -1) : le repère doit rester
   visible, sans quoi personne ne sait où il vient d'atterrir. */
.fp-pack-evg-titre:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 4px;
}

.fp-pack-evg-fermer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fp-line);
  border-radius: 50%;
  background: var(--fp-paper);
  color: var(--fp-ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.fp-pack-evg-fermer:hover {
  background: var(--fp-secondary);
  color: var(--fp-paper);
  border-color: transparent;
}
.fp-pack-evg-fermer:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* Défilement INTERNE : sur un petit écran en paysage, la fenêtre peut dépasser
   la hauteur disponible. Rien n'est jamais coupé, c'est le corps qui défile,
   pas la page derrière. */
.fp-pack-evg-corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 24px;
}

/* Liste des prestations : puce ronde à coche, même idiome visuel que
   .fp-evo-puce de la section (assets/css/evenements.css), reprise ici pour
   que la fenêtre reste cohérente avec le bouton qui l'ouvre. */
.fp-pack-evg-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fp-pack-evg-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fp-ink);
}
.fp-pack-evg-puce {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fp-primary) 30%, transparent);
  background: color-mix(in srgb, var(--fp-primary) 12%, var(--fp-paper));
  color: var(--fp-primary);
}
.fp-pack-evg-puce svg { width: 15px; height: 15px; }

.fp-pack-evg-note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--fp-radius);
  background: color-mix(in srgb, var(--fp-accent) 22%, var(--fp-paper));
  font-size: .95rem;
  font-weight: 600;
  color: var(--fp-secondary-dark);
}

.fp-pack-evg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}
.fp-pack-evg-offre:focus-visible,
.fp-pack-evg-fermer-action:focus-visible {
  outline: 2px solid var(--fp-secondary-dark);
  outline-offset: 3px;
}

/* Le fond de page ne défile pas derrière la fenêtre. La classe est posée sur
   <html> par le script. */
html.fp-pack-evg-fige { overflow: hidden; }

/* Animation d'ouverture, désactivée dès que le système demande moins de
   mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .fp-pack-evg-dialog[open] {
    animation: fp-pack-evg-entree .22s var(--fp-anim-ease, ease-out);
  }
  @keyframes fp-pack-evg-entree {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 560px) {
  .fp-pack-evg-entete { padding: 20px 20px 14px 24px; }
  .fp-pack-evg-corps { padding: 20px 24px 28px; }
}