/* ==========================================================================
   Magic Parc - Fenêtre « Demande de réservation » (bento anniversaire de la
   vitrine Magic Kids)

   Habillage de la fenêtre rendue par inc/anniversaire.php (fp_anniv_demande_render,
   wp_footer) pour le lien « Réserver cet anniversaire » du widget fp-tk,
   partie « anniversaire ». Patron repris de assets/css/arcade-carte.css pour
   le cadre de la fenêtre (cadenas d'accessibilité identique), champs propres
   inspirés de la carte + formulaire de contact (.fp-contact-form, main.css).
   .fp-form-success et .fp-form-errors (messages) sont déjà globaux, main.css,
   non redéfinis ici.

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

.fp-anniv-demande-dialog {
  width: min(100% - 20px, 560px);
  max-width: none;
  max-height: min(92vh, 720px);
  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-anniv-demande-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-anniv-demande-dialog::backdrop {
  background: rgba(0, 0, 0, .6);
  background: color-mix(in srgb, var(--fp-dark) 78%, transparent);
}

.fp-anniv-demande-boite {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(92vh, 720px);
}

.fp-anniv-demande-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-anniv-demande-titre {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  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-anniv-demande-titre:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 4px;
}

.fp-anniv-demande-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-anniv-demande-fermer:hover {
  background: var(--fp-secondary);
  color: var(--fp-paper);
  border-color: transparent;
}
.fp-anniv-demande-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. */
.fp-anniv-demande-corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 24px;
}

/* Récapitulatif : relu dans le bento au clic (assets/js/anniv-demande.js),
   visible sur les TROIS temps. Le total est scindé en montant / unité pour
   que le script ne réécrive que le montant à chaque changement d'add-on
   (Temps 2), aria-live posé sur le montant en PHP. */
.fp-anniv-demande-recap {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--fp-radius-sm);
  background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-cream));
  border: 1px solid color-mix(in srgb, var(--fp-primary) 20%, transparent);
}
.fp-anniv-demande-recap p {
  margin: 0;
}
.fp-anniv-demande-recap p + p {
  margin-top: 4px;
}
.fp-anniv-demande-recap-formule {
  font-family: var(--fp-font-heading);
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--fp-secondary);
}
.fp-anniv-demande-recap-detail {
  font-size: .92rem;
  color: var(--fp-ink-soft);
}
.fp-anniv-demande-recap-total {
  font-weight: 700;
  color: var(--fp-ink);
}
.fp-anniv-demande-recap-total span {
  color: var(--fp-primary);
}

/* Champs : même idiome que .fp-contact-form (main.css), scopé à cette fenêtre. */
.fp-anniv-demande-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* L'attribut natif `hidden` (form.hidden = true, posé après un envoi réussi)
   ne suffit PAS à lui seul ici : un display défini en feuille d'auteur (ci
   dessus) l'emporte toujours sur le display:none de la feuille du navigateur
   pour [hidden], quelle que soit la spécificité. Piège identique pour
   .fp-anniv-demande-step et .fp-anniv-demande-addon* ci-dessous : CHACUN a
   besoin de son propre filet [hidden]. */
.fp-anniv-demande-form[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   PARCOURS EN TROIS TEMPS (2026-09-10) : un <div class="fp-anniv-demande-step">
   par temps (inc/anniversaire.php), affichage tout ou rien piloté par
   l'attribut natif `hidden` (assets/js/anniv-demande.js). Même rythme
   vertical (gap 14px) qu'à l'intérieur du formulaire, pour que le passage
   d'un temps à l'autre ne change rien à la respiration générale.
   -------------------------------------------------------------------------- */
.fp-anniv-demande-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fp-anniv-demande-step[hidden] {
  display: none;
}
.fp-anniv-demande-step-titre {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fp-secondary);
}
/* Le titre du temps reçoit le focus à chaque changement (tabindex -1, posé
   en PHP) : le repère doit rester visible. */
.fp-anniv-demande-step-titre:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 4px;
}
.fp-anniv-demande-step-souslegende {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fp-ink-soft);
}

/* Liste des COMPRIS (Temps 2) : informative, non décochable, aucune case. */
.fp-anniv-demande-compris {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-anniv-demande-compris li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .92rem;
  color: var(--fp-ink);
}
.fp-anniv-demande-compris .fp-i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--fp-primary);
}

/* Add-ons sélectionnables (Temps 2) : une ligne par add-on, masquée par
   défaut (attribut hidden posé en PHP), révélée par le script SEULEMENT si
   le bento porte l'interrupteur correspondant (aucun add-on inventé). */
.fp-anniv-demande-addons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-anniv-demande-addon {
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-sm);
  padding: 10px 14px;
}
.fp-anniv-demande-addon[hidden] {
  display: none;
}
.fp-anniv-demande-addon-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.fp-anniv-demande-addon-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--fp-primary);
}
.fp-anniv-demande-addon-txt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--fp-ink);
}
.fp-anniv-demande-addon-desc {
  font-weight: 400;
  font-size: .82rem;
  color: var(--fp-ink-soft);
}
.fp-anniv-demande-addon-prix {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--fp-primary);
  white-space: nowrap;
}
/* Parfum du gâteau : révélé et rendu requis par le script seulement si la
   case au dessus est cochée. */
.fp-anniv-demande-addon-parfum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding-left: 30px;
}
.fp-anniv-demande-addon-parfum[hidden] {
  display: none;
}
.fp-anniv-demande-addon-parfum select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--fp-line-strong);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-white);
  color: var(--fp-ink);
}

.fp-anniv-demande-field textarea {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fp-line-strong);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-white);
  color: var(--fp-ink);
  resize: vertical;
}
.fp-anniv-demande-field textarea:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 1px;
}

/* Navigation Précédent / Suivant : un seul bouton occupe toute la largeur
   (Temps 1), deux boutons se partagent la ligne à égalité (Temps 2 et 3). */
.fp-anniv-demande-nav {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.fp-anniv-demande-nav .fp-btn {
  flex: 1 1 0;
  justify-content: center;
}
.fp-anniv-demande-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.fp-anniv-demande-field label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--fp-ink);
}
.fp-anniv-demande-req {
  color: var(--fp-danger);
}
.fp-anniv-demande-field input {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fp-line-strong);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-white);
  color: var(--fp-ink);
}
.fp-anniv-demande-field input:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 1px;
}
.fp-anniv-demande-field input[aria-invalid="true"] {
  border-color: var(--fp-danger);
}
.fp-anniv-demande-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fp-anniv-demande-field-age input {
  /* Champ nombre étroit : l'âge ne prend jamais plus de deux chiffres. */
  max-width: 100%;
}

.fp-anniv-demande-legend {
  margin: 0;
  font-size: .85rem;
  color: var(--fp-ink-soft);
}

/* Le bouton d'envoi vit désormais dans .fp-anniv-demande-nav (Temps 3, voir
   plus haut) : sa largeur et son centrage viennent de là. */
.fp-anniv-demande-envoi:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Zone de message (succès ou erreurs), juste au-dessus du formulaire. Les
   classes .fp-form-success / .fp-form-errors sont globales (main.css). */
[data-fp-anniv-demande-message]:empty {
  display: none;
}
[data-fp-anniv-demande-message] {
  margin-bottom: 14px;
}
[data-fp-anniv-demande-message] :focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* Calendrier Flatpickr (champ « Date souhaitée »), même thème que
   .fp-offre-calendar (evenements.css). static:true : inséré comme enfant du
   champ, jamais ajouté à <body> (ce formulaire vit dans une <dialog> modale).
   .flatpickr-wrapper en largeur pleine : sans cette règle, le champ prend la
   largeur de son contenu, plus étroit que les autres champs du formulaire. */
.fp-anniv-demande-form .flatpickr-wrapper {
  display: block;
  width: 100%;
}
.flatpickr-calendar.fp-anniv-demande-calendar {
  font-family: var(--fp-font-body);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-lg);
  border: 0;
}
.fp-anniv-demande-calendar .flatpickr-months .flatpickr-month,
.fp-anniv-demande-calendar .flatpickr-current-month,
.fp-anniv-demande-calendar .flatpickr-current-month input.cur-year,
.fp-anniv-demande-calendar .flatpickr-monthDropdown-months,
.fp-anniv-demande-calendar span.flatpickr-weekday {
  color: var(--fp-secondary);
}
.fp-anniv-demande-calendar .flatpickr-prev-month svg,
.fp-anniv-demande-calendar .flatpickr-next-month svg {
  fill: var(--fp-secondary);
}
.fp-anniv-demande-calendar .flatpickr-day { color: var(--fp-ink); border-radius: var(--fp-radius-sm); }
.fp-anniv-demande-calendar .flatpickr-day.flatpickr-disabled,
.fp-anniv-demande-calendar .flatpickr-day.prevMonthDay,
.fp-anniv-demande-calendar .flatpickr-day.nextMonthDay { color: var(--fp-ink-soft); opacity: .5; }
.fp-anniv-demande-calendar .flatpickr-day:hover { background: var(--fp-cream); }
.fp-anniv-demande-calendar .flatpickr-day.today { border-color: var(--fp-accent); }
.fp-anniv-demande-calendar .flatpickr-day.today:hover,
.fp-anniv-demande-calendar .flatpickr-day.today:focus { border-color: var(--fp-accent); background: var(--fp-cream); }
.fp-anniv-demande-calendar .flatpickr-day.selected,
.fp-anniv-demande-calendar .flatpickr-day.selected:hover,
.fp-anniv-demande-calendar .flatpickr-day.selected:focus {
  background: var(--fp-primary); border-color: var(--fp-primary); color: var(--fp-white);
}

/* 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-anniv-demande-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-anniv-demande-dialog[open] {
    animation: fp-anniv-demande-entree .22s var(--fp-anim-ease, ease-out);
  }
  @keyframes fp-anniv-demande-entree {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 520px) {
  .fp-anniv-demande-row {
    grid-template-columns: 1fr;
  }
  /* Très petit écran : la ligne d'add-on (case + libellé + prix) passe le
     prix à la ligne plutôt que de le comprimer. */
  .fp-anniv-demande-addon-label {
    flex-wrap: wrap;
  }
  .fp-anniv-demande-addon-prix {
    margin-left: 30px;
  }
}

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