/* ==========================================================================
   reservations.css - fidelite RParc /reservations/ (charge via is_page_template).
   Couleurs : tokens var(--fp-*) uniquement (discipline verifiee par check-zones).
   Structure RParc reproduite : hero a motif (pattes colorees), bandeau d'intro,
   trois grandes cartes de reservation (activite / table / nuit), etapes du
   parcours de reservation, encart d'aide, CTA de cloture.
   Scope : .page-template-template-reservations
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO - bandeau a motif clair, titre direct, sous-titre. Le RParc pose ici
   une bande coloree a pattes plutot qu'une photo plein cadre : on l'imite avec
   un fond clair, motif RParc en image de fond (editable) et overlay leger.
   -------------------------------------------------------------------------- */
.page-template-template-reservations .fp-hero {
  min-height: min(58vh, 520px);
  align-items: center;
  background:
    color-mix(in srgb, var(--fp-secondary) 16%, var(--fp-paper));
  background-image:
    image-set(
      url("https://raiffeisen-parc.ch/wp-content/uploads/2025/04/bg-pattes-color-100-1024x320.webp") 1x
    );
  background-size: cover;
  background-position: center;
  padding: calc(var(--fp-nav-h) + 48px) 0 56px;
}

/* Overlay clair (et non sombre) pour garder une ambiance ludique et lisible. */
.page-template-template-reservations .fp-hero-overlay {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fp-paper) 55%, transparent) 0%,
    color-mix(in srgb, var(--fp-paper) 78%, transparent) 100%
  );
}

.page-template-template-reservations .fp-hero-inner {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}
.page-template-template-reservations .fp-hero-eyebrow { color: var(--fp-primary); }
.page-template-template-reservations .fp-hero-title {
  color: var(--fp-ink);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.page-template-template-reservations .fp-hero-lead {
  color: var(--fp-ink-soft);
  margin-left: auto;
  margin-right: auto;
}
.page-template-template-reservations .fp-hero-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   INTRO - bref texte d'accroche centre sous le hero (fond clair).
   -------------------------------------------------------------------------- */
.page-template-template-reservations .fp-intro { padding-top: var(--fp-section-y-sm); }
.page-template-template-reservations .fp-intro .fp-wrap { text-align: center; }
.page-template-template-reservations .fp-intro .fp-lead { max-width: 28ch; margin-inline: auto; }
.page-template-template-reservations .fp-intro-body { margin-inline: auto; }

/* --------------------------------------------------------------------------
   FORMULES - les trois grandes voies de reservation (activite / table / nuit).
   Le RParc les pose en 3 colonnes : grandes cartes a bord arrondi, icone en
   haut, titre, description, bouton plein. On agrandit et on met en relief.
   -------------------------------------------------------------------------- */
.page-template-template-reservations .fp-formules-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}
.page-template-template-reservations .fp-formule {
  align-items: flex-start;
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  padding: 36px 32px 32px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fp-secondary) 7%, var(--fp-paper)) 0%,
      var(--fp-paper) 60%
    );
  box-shadow: var(--fp-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-template-template-reservations .fp-formule:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--fp-primary) 60%, transparent);
  box-shadow: var(--fp-shadow-lg);
}

/* Pastille d'accent en haut de chaque carte (puce ludique facon RParc). */
.page-template-template-reservations .fp-formule::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  border-radius: var(--fp-radius);
  margin-bottom: 18px;
  background:
    radial-gradient(
      circle at 30% 30%,
      var(--fp-accent) 0%,
      var(--fp-primary) 75%
    );
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--fp-primary) 70%, transparent);
}

.page-template-template-reservations .fp-formule-title {
  font-size: 1.45rem;
  color: var(--fp-ink);
}
.page-template-template-reservations .fp-formule-desc {
  color: var(--fp-ink-soft);
  font-size: 1rem;
}
/* Le bouton de chaque carte passe en plein (primaire) pour appeler au clic. */
.page-template-template-reservations .fp-formule .fp-btn-ghost {
  background: var(--fp-primary);
  color: var(--fp-paper);
  border-color: transparent;
  box-shadow: 0 10px 24px -12px var(--fp-primary);
}
.page-template-template-reservations .fp-formule .fp-btn-ghost:hover {
  background: var(--fp-primary-dark);
  color: var(--fp-paper);
}

/* --------------------------------------------------------------------------
   ETAPES - "comment ca marche" : parcours de reservation en cartes numerotees.
   Le RParc rassure avec un deroule simple ; on aligne sur la creme du theme.
   -------------------------------------------------------------------------- */
.page-template-template-reservations .fp-etapes-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.page-template-template-reservations .fp-etape {
  background: var(--fp-paper);
  border-radius: var(--fp-radius-lg);
  border-color: var(--fp-line);
  position: relative;
  overflow: hidden;
}
.page-template-template-reservations .fp-etape::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--fp-primary),
    var(--fp-accent)
  );
}
.page-template-template-reservations .fp-etape-num {
  background: color-mix(in srgb, var(--fp-secondary) 90%, var(--fp-ink));
}

/* --------------------------------------------------------------------------
   FAQ eventuelle sur la page reservation : conserve l'accordeon du theme,
   simple ajustement d'aere.
   -------------------------------------------------------------------------- */
.page-template-template-reservations .fp-faq { background: var(--fp-cream); }
.page-template-template-reservations .fp-faq-list { border-top-color: var(--fp-line-strong); }

/* --------------------------------------------------------------------------
   CTA de cloture - bandeau plein en primaire avec photo de fond editable.
   -------------------------------------------------------------------------- */
.page-template-template-reservations .fp-cta-section {
  padding: calc(var(--fp-section-y) + 8px) 0;
}
.page-template-template-reservations .fp-cta-section:not(.fp-has-bg) .fp-cta-photo,
.page-template-template-reservations .fp-cta-photo:empty {
  background-image:
    url("https://raiffeisen-parc.ch/wp-content/uploads/2025/12/arcades-1.webp");
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .page-template-template-reservations .fp-hero { min-height: min(52vh, 440px); }
  .page-template-template-reservations .fp-formule { padding: 30px 24px 26px; }
}