/* ==========================================================================
   bons-cadeaux.css - fidelite visuelle de la page « Bons cadeaux » du parc.
   Charge via is_page_template('template-bons-cadeaux.php'). Scope strict :
   .page-template-template-bons-cadeaux. Couleurs : tokens var(--fp-*) UNIQUEMENT.
   Structure RParc reproduite : hero clair avec mascotte, intro chaleureuse,
   cartes de bons (montants) empilees facon « catalogue cadeau », FAQ, CTA.
   Images de fond = URLs RParc en fallback editable (wp-content/uploads).
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO : sur la page bons cadeaux du RParc, le hero est clair et accueillant
   (mascotte bowling sur fond pastel) plutot que la photo sombre par defaut.
   On allege l'overlay et on cale un fond pastel + illustration cadeau.
   -------------------------------------------------------------------------- */
.page-template-template-bons-cadeaux .fp-hero {
  min-height: min(64vh, 560px);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--fp-accent) 30%, transparent), transparent 46%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--fp-primary) 22%, transparent), transparent 50%),
    var(--fp-cream);
}
.page-template-template-bons-cadeaux .fp-hero-slide {
  background-image: url('https://raiffeisen-parc.ch/wp-content/uploads/2024/06/Mascotte_couleurs_full-bowling.svg');
  background-size: clamp(220px, 26vw, 360px);
  background-position: right 6% bottom -8%;
  background-repeat: no-repeat;
  opacity: .96;
}
/* Hero clair : overlay quasi nul, texte en encre + accents chauds */
.page-template-template-bons-cadeaux .fp-hero-overlay {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fp-cream) 10%, transparent) 0%,
    color-mix(in srgb, var(--fp-cream) 55%, transparent) 100%
  );
}
.page-template-template-bons-cadeaux .fp-hero-inner { color: var(--fp-ink); max-width: 640px; }
.page-template-template-bons-cadeaux .fp-hero-eyebrow { color: var(--fp-primary); }
.page-template-template-bons-cadeaux .fp-hero-title { color: var(--fp-ink); }
.page-template-template-bons-cadeaux .fp-hero-lead { color: var(--fp-ink-soft); opacity: 1; }

/* --------------------------------------------------------------------------
   INTRO : ton chaleureux, lead serre et centre facon accroche cadeau.
   -------------------------------------------------------------------------- */
.page-template-template-bons-cadeaux .fp-intro { padding-bottom: var(--fp-section-y-sm); }
.page-template-template-bons-cadeaux .fp-intro .fp-lead { max-width: 24ch; }
.page-template-template-bons-cadeaux .fp-intro .fp-prose { max-width: 60ch; }

/* --------------------------------------------------------------------------
   FORMULES (= « Composez votre commande » du RParc) : cartes de bons
   presentees comme un catalogue cadeau. Fond creme, cartes blanches a coins
   genereux, liseret accent et puce cadeau decorative en haut a droite.
   -------------------------------------------------------------------------- */
.page-template-template-bons-cadeaux .fp-formules { background: var(--fp-cream); }
.page-template-template-bons-cadeaux .fp-formules-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.page-template-template-bons-cadeaux .fp-formule {
  position: relative;
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fp-accent) 8%, var(--fp-paper)), var(--fp-paper) 38%);
  box-shadow: var(--fp-shadow);
  padding: 34px 30px 30px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-template-template-bons-cadeaux .fp-formule::before {
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-accent) 40%, transparent);
}
.page-template-template-bons-cadeaux .fp-formule:hover {
  transform: translateY(-5px);
  box-shadow: var(--fp-shadow-lg);
  border-color: color-mix(in srgb, var(--fp-primary) 55%, var(--fp-line));
}
.page-template-template-bons-cadeaux .fp-formule-title {
  position: relative;
  font-size: 1.45rem;
  color: var(--fp-ink);
}
/* Liseret accent sous le titre du bon, facon etiquette cadeau */
.page-template-template-bons-cadeaux .fp-formule-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 12px;
  border-radius: var(--fp-pill);
  background: var(--fp-primary);
}
.page-template-template-bons-cadeaux .fp-formule-desc { color: var(--fp-ink-soft); }
.page-template-template-bons-cadeaux .fp-formule .fp-btn {
  align-self: flex-start;
  background: var(--fp-primary);
  color: var(--fp-paper);
  border-color: transparent;
  box-shadow: 0 10px 24px -12px var(--fp-primary);
}
.page-template-template-bons-cadeaux .fp-formule .fp-btn:hover { background: var(--fp-primary-dark); }

/* --------------------------------------------------------------------------
   FORMULAIRE DE COMMANDE ([fp_bons_cadeaux]) : le plugin charge son CSS. On
   se contente d'affiner SON CADRE conteneur (la section generique), sans
   toucher aux classes internes du plugin.
   -------------------------------------------------------------------------- */
.page-template-template-bons-cadeaux .fp-generic {
  background: var(--fp-paper);
}
.page-template-template-bons-cadeaux .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 : sur fond clair, ton doux. Reprend l'accordeon partage de main.css.
   -------------------------------------------------------------------------- */
.page-template-template-bons-cadeaux .fp-faq { background: var(--fp-paper); }
.page-template-template-bons-cadeaux .fp-faq-q { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   CTA final : bandeau cadeau, photo RParc en fond editable + degrade chaud.
   -------------------------------------------------------------------------- */
.page-template-template-bons-cadeaux .fp-cta-section { background: var(--fp-primary); }
.page-template-template-bons-cadeaux .fp-cta-photo {
  background-image: url('https://raiffeisen-parc.ch/wp-content/uploads/2024/06/Rafy-CarteCadeau2.svg');
  background-size: clamp(180px, 22vw, 300px);
  background-position: right 8% center;
  background-repeat: no-repeat;
  opacity: .5;
}

/* --------------------------------------------------------------------------
   Responsive : la mascotte du hero passe en filigrane discret sur mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .page-template-template-bons-cadeaux .fp-hero-slide {
    background-position: right -10% bottom -6%;
    background-size: 180px;
    opacity: .6;
  }
  .page-template-template-bons-cadeaux .fp-cta-photo { opacity: .28; }
}