/* ==========================================================================
   anniversaire.css - fidelite visuelle de la page « Reservation anniversaire »
   du parc. Charge via is_page_template('template-anniversaire.php'). Scope
   strict : .page-template-template-anniversaire. Couleurs : tokens var(--fp-*)
   UNIQUEMENT. Structure RParc reproduite : hero festif, intro rassurante,
   cartes de formules (Bowling / Jumping Jack / a la carte) avec prix mis en
   avant, etapes numerotees du parcours de reservation, FAQ, CTA.
   Images de fond = URLs RParc en fallback editable (wp-content/uploads).
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO : ambiance fete enfant. Photo RParc en fond + overlay chaud festif et
   touche de confettis via degrades de tokens.
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-hero { min-height: min(72vh, 640px); }
.page-template-template-anniversaire .fp-hero-slide {
  background-image: url('https://raiffeisen-parc.ch/wp-content/uploads/2024/06/bowling-anniversaire.jpg');
}
.page-template-template-anniversaire .fp-hero-overlay {
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--fp-accent) 35%, transparent), transparent 40%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fp-primary) 30%, transparent) 0%,
      color-mix(in srgb, var(--fp-dark) 70%, transparent) 78%,
      color-mix(in srgb, var(--fp-dark) 86%, transparent) 100%
    );
}
.page-template-template-anniversaire .fp-hero-eyebrow { color: var(--fp-accent); }

/* --------------------------------------------------------------------------
   INTRO : message « sans stress », centre et aere.
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-intro { text-align: center; }
.page-template-template-anniversaire .fp-intro .fp-eyebrow { justify-content: center; }
.page-template-template-anniversaire .fp-intro .fp-lead { max-width: 26ch; margin-inline: auto; }
.page-template-template-anniversaire .fp-intro .fp-prose { max-width: 62ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   FORMULES : 3 cartes de formules anniversaire facon RParc (Bowling,
   Jumping Jack, a la carte). Cartes colorees, coin festif, prix « des X CHF »
   mis en valeur, bouton plein.
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-formules { background: var(--fp-paper); }
.page-template-template-anniversaire .fp-formules-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}
.page-template-template-anniversaire .fp-formule {
  position: relative;
  border: 2px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  background: var(--fp-paper);
  padding: 32px 30px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Bandeau colore en tete de carte, cle de l'identite festive du RParc */
.page-template-template-anniversaire .fp-formule::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
}
.page-template-template-anniversaire .fp-formule:hover {
  transform: translateY(-6px);
  border-color: var(--fp-primary);
  box-shadow: var(--fp-shadow-lg);
}
.page-template-template-anniversaire .fp-formule-title {
  margin-top: 6px;
  font-size: 1.5rem;
  color: var(--fp-primary);
}
.page-template-template-anniversaire .fp-formule-desc { color: var(--fp-ink-soft); }
/* Le « des X CHF » glisse souvent en fin de description : on le fait ressortir */
.page-template-template-anniversaire .fp-formule-desc strong {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--fp-font-heading);
  font-size: 1.2rem;
  color: var(--fp-ink);
}
.page-template-template-anniversaire .fp-formule .fp-btn {
  align-self: flex-start;
  background: var(--fp-primary);
  color: var(--fp-paper);
  border-color: transparent;
}
.page-template-template-anniversaire .fp-formule .fp-btn:hover { background: var(--fp-primary-dark); }

/* --------------------------------------------------------------------------
   ETAPES : « Comment ca marche » du RParc, parcours de reservation numerote.
   Sur fond creme, cartes reliees visuellement, pastilles numero en accent.
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-etapes { background: var(--fp-cream); }
.page-template-template-anniversaire .fp-etapes-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.page-template-template-anniversaire .fp-etape {
  position: relative;
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius);
  padding: 30px 26px 28px;
}
.page-template-template-anniversaire .fp-etape-num {
  background: var(--fp-primary);
  color: var(--fp-paper);
  width: 50px;
  height: 50px;
  font-size: 1.1rem;
  box-shadow: 0 10px 22px -12px var(--fp-primary);
}
.page-template-template-anniversaire .fp-etape-title { color: var(--fp-ink); }
.page-template-template-anniversaire .fp-etape-desc { color: var(--fp-ink-soft); }

/* --------------------------------------------------------------------------
   FORMULAIRE DE RESERVATION ([fp_anniversaire]) : plugin avec son propre CSS.
   On affine seulement SON CADRE conteneur (la section generique).
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-generic { background: var(--fp-paper); }
.page-template-template-anniversaire .fp-generic .fp-prose {
  max-width: var(--fp-wrap);
  border-radius: var(--fp-radius-lg);
  border: 1px solid var(--fp-line);
  background: var(--fp-cream);
  padding: clamp(20px, 4vw, 44px);
  box-shadow: var(--fp-shadow);
}

/* --------------------------------------------------------------------------
   FAQ : fond clair, ton rassurant pour les parents.
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-faq { background: var(--fp-paper); }

/* --------------------------------------------------------------------------
   CTA final : bandeau festif, photo RParc en fond editable.
   -------------------------------------------------------------------------- */
.page-template-template-anniversaire .fp-cta-section { background: var(--fp-primary); }
.page-template-template-anniversaire .fp-cta-photo {
  background-image: url('https://raiffeisen-parc.ch/wp-content/uploads/2024/06/anniversaire-enfants.jpg');
  opacity: .42;
}
.page-template-template-anniversaire .fp-cta-overlay {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fp-primary) 68%, transparent),
    color-mix(in srgb, var(--fp-primary-dark) 88%, transparent)
  );
}

/* --------------------------------------------------------------------------
   Responsive.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .page-template-template-anniversaire .fp-hero { min-height: min(64vh, 520px); }
}