/* ==========================================================================
   activite.css - affinages des pages de DETAIL d'activite
   (bowling, simulateur-de-course, jumping-jack, billard, arcades,
   realite-virtuelle, karaoke, zone-de-jeux, simulateur-de-golf, padel,
   tennis, squash, pickleball, badminton, five-club-fitness...).
   Charge via is_page_template('template-activite.php').
   Objectif Phase B : reproduire le LOOK du Raiffeisen Parc (hero court avec
   overlay sombre, sections sobres en alternance blanc / creme, cartes a coins
   moderes et ombres douces, table de tarifs zebree, FAQ accordeon a filets
   fins, CTA final sur image). Couleurs : tokens var(--fp-*) UNIQUEMENT
   (aucun #hex tolere par check-zones).
   Scope systematique : .page-template-template-activite
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO : le RParc affiche un hero plus court que l'accueil, photo de l'activite
   en fond, overlay sombre, eyebrow « ... a Rennaz », gros titre, sous-titre et
   une rangee de boutons (Reserver / Tarifs / Horaires).
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-hero {
  min-height: min(62vh, 520px);
  padding-bottom: 54px;
}
.page-template-template-activite .fp-hero-overlay {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fp-dark) 28%, transparent) 0%,
    color-mix(in srgb, var(--fp-dark) 50%, transparent) 55%,
    color-mix(in srgb, var(--fp-dark) 82%, transparent) 100%
  );
}
.page-template-template-activite .fp-hero-inner {
  max-width: 700px;
}
.page-template-template-activite .fp-hero-eyebrow {
  color: var(--fp-accent);
}
.page-template-template-activite .fp-hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}
.page-template-template-activite .fp-hero-lead {
  max-width: 50ch;
}
/* Rangee d'actions facon RParc : un bouton plein + des boutons secondaires
   clairs (Tarifs / Horaires) qui ressortent sur l'image. */
.page-template-template-activite .fp-hero-actions {
  gap: 12px;
}
.page-template-template-activite .fp-hero-actions .fp-btn-ghost {
  color: var(--fp-paper);
  border-color: var(--fp-line-light);
  background: color-mix(in srgb, var(--fp-paper) 8%, transparent);
}
.page-template-template-activite .fp-hero-actions .fp-btn-ghost:hover {
  background: color-mix(in srgb, var(--fp-paper) 18%, transparent);
  border-color: var(--fp-paper);
  color: var(--fp-paper);
}

/* --------------------------------------------------------------------------
   INTRO : phrase d'accroche large et centree, prose secondaire en gris.
   Le RParc garde un fond blanc tres aere.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-intro .fp-lead {
  max-width: 24ch;
}
.page-template-template-activite .fp-intro-body {
  margin-top: 20px;
}
.page-template-template-activite .fp-intro-body.fp-prose {
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   ATOUTS A ICONES : le RParc aligne 3 atouts sobres (icone + titre + courte
   description), fond blanc, cartes a peine marquees. On adoucit la carte par
   defaut du theme : moins de bordure, plus d'air, pastille d'icone douce.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-features {
  background: var(--fp-paper);
}
.page-template-template-activite .fp-features-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.page-template-template-activite .fp-feature {
  border-color: color-mix(in srgb, var(--fp-line) 70%, transparent);
  border-radius: var(--fp-radius-sm);
  box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--fp-ink) 50%, transparent);
}
.page-template-template-activite .fp-feature-icon {
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-paper));
}

/* --------------------------------------------------------------------------
   GALERIE : le RParc montre une mosaique d'images cliquables, coins doux.
   On resserre la grille et on adoucit le rayon pour coller au look photo.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-galerie-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.page-template-template-activite .fp-galerie-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--fp-radius-sm);
  box-shadow: 0 10px 26px -20px color-mix(in srgb, var(--fp-ink) 55%, transparent);
}
.page-template-template-activite .fp-galerie-item:hover {
  transform: translateY(-3px) scale(1.01);
}

/* --------------------------------------------------------------------------
   ETAPES « Comment ca marche » : 3 etapes numerotees sur fond creme. Le RParc
   reste sobre : pastilles rondes, cartes legeres, filet discret.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-etapes-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.page-template-template-activite .fp-etape {
  border-radius: var(--fp-radius-sm);
  border-color: color-mix(in srgb, var(--fp-line) 80%, transparent);
  background: var(--fp-paper);
}
.page-template-template-activite .fp-etape-num {
  background: var(--fp-primary);
  box-shadow: 0 8px 18px -10px var(--fp-primary);
}

/* --------------------------------------------------------------------------
   FORMULES : 3 cartes (anniversaire / EVG / entreprise). Le RParc = fond blanc,
   coins ~12px, ombre douce, bordure fine qui se teinte au survol, bouton ancre.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-formule {
  border-width: 1px;
  border-radius: var(--fp-radius);
  border-color: var(--fp-line);
  box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--fp-ink) 50%, transparent);
  padding: 28px 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s ease;
}
.page-template-template-activite .fp-formule:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--fp-primary) 55%, var(--fp-line));
  box-shadow: 0 26px 48px -24px color-mix(in srgb, var(--fp-ink) 52%, transparent);
}
.page-template-template-activite .fp-formule-title {
  font-size: 1.32rem;
}

/* --------------------------------------------------------------------------
   TARIFS : le RParc presente une table HTML claire, en-tetes en gris doux,
   lignes zebrees, filets fins. On habille la table generee par le theme/module.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-tarifs {
  background: var(--fp-cream);
}
.page-template-template-activite .fp-tarifs-body {
  margin-top: 26px;
  overflow-x: auto;
}
.page-template-template-activite .fp-tarifs-table {
  border-radius: var(--fp-radius);
  box-shadow: 0 16px 38px -24px color-mix(in srgb, var(--fp-ink) 45%, transparent);
}
.page-template-template-activite .fp-tarifs-table th {
  background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-paper));
  font-family: var(--fp-font-heading);
  font-weight: 600;
  color: var(--fp-ink);
}
.page-template-template-activite .fp-tarifs-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--fp-cream) 55%, var(--fp-paper));
}
.page-template-template-activite .fp-tarifs-table td,
.page-template-template-activite .fp-tarifs-table th {
  border-bottom-color: var(--fp-line);
}

/* --------------------------------------------------------------------------
   FAQ : accordeon sobre du RParc, filets fins, question en gras, icone +/-.
   Le markup du theme (filet haut/bas, icone en croix) colle deja ; on affine
   l'espacement, la pastille d'icone et le survol.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-faq {
  background: var(--fp-paper);
}
.page-template-template-activite .fp-faq-list {
  max-width: 860px;
}
.page-template-template-activite .fp-faq-q {
  font-size: 1.1rem;
  padding: 20px 6px;
}
.page-template-template-activite .fp-faq-q:hover {
  color: var(--fp-primary);
}
.page-template-template-activite .fp-faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-paper));
}
.page-template-template-activite .fp-faq-q[aria-expanded="true"] .fp-faq-icon {
  background: color-mix(in srgb, var(--fp-primary) 18%, var(--fp-paper));
}

/* --------------------------------------------------------------------------
   RELATED « Et aussi au parc » : grille de cartes facon hub, coins moderes,
   ombre douce, bordure qui se teinte au survol.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-related .fp-card {
  border-radius: var(--fp-radius-sm);
  border-color: var(--fp-line);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--fp-ink) 45%, transparent);
}
.page-template-template-activite .fp-related .fp-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fp-primary) 40%, var(--fp-line));
  box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--fp-ink) 50%, transparent);
}
.page-template-template-activite .fp-related .fp-card-media {
  aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   CTA FINAL : le RParc cloture chaque page sur un bandeau image (« Reserver
   mon bowling ! ») avec overlay sombre. On renforce l'overlay et la photo.
   -------------------------------------------------------------------------- */
.page-template-template-activite .fp-cta-section {
  padding: calc(var(--fp-section-y) + 6px) 0;
}
.page-template-template-activite .fp-cta-photo {
  opacity: 0.42;
}
.page-template-template-activite .fp-cta-overlay {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fp-primary) 78%, transparent),
    color-mix(in srgb, var(--fp-primary-dark) 90%, transparent)
  );
}

/* --------------------------------------------------------------------------
   Mobile : hero plus compact, cartes en 1 colonne, table scrollable.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .page-template-template-activite .fp-hero {
    min-height: min(68vh, 440px);
  }
  .page-template-template-activite .fp-hero-actions .fp-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .page-template-template-activite .fp-galerie-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
}