/* ==========================================================================
   PROMO « FOIRE DU VALAIS » (inc/offre-foire.php), accueil seulement.
   Billet en deux parts (corps blanc + talon teal perforé), légèrement penché,
   confettis qui flottent derrière, entrée en « pop » et reflet sur le bouton.
   Tout le mouvement est coupé sous prefers-reduced-motion.
   ========================================================================== */

.fp-foire {
  --fp-foire-encoche: 9px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  max-width: 540px;
  margin: 26px auto 0;
  text-align: center;
  transform: rotate(-1.5deg);
  /* Ombre posée par filter et non box-shadow : elle suit les encoches
     découpées par les masques des deux parts. */
  filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--fp-ink) 45%, transparent));
  transition: transform .35s var(--fp-anim-ease);
  animation: fp-foire-pop .9s var(--fp-anim-ease) .5s both;
}
.fp-foire:hover,
.fp-foire:focus-within { transform: rotate(0deg) translateY(-3px); }

/* Accroche du héro masquée pendant la promo (Marino, 2026-09-28) : cette
   feuille n'est chargée que billet actif, l'accroche revient donc seule à la
   fin de la Foire. Le texte reste intact dans Gutenberg. */
.page-template-template-home .fp-hero-lead { display: none; }

/* Encoches rondes de part et d'autre de la perforation. */
.fp-foire-corps,
.fp-foire-talon {
  --fp-foire-cote: 100%;
  -webkit-mask:
    radial-gradient(circle at var(--fp-foire-cote) 0, transparent var(--fp-foire-encoche), black calc(var(--fp-foire-encoche) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--fp-foire-cote) 100%, transparent var(--fp-foire-encoche), black calc(var(--fp-foire-encoche) + .5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--fp-foire-cote) 0, transparent var(--fp-foire-encoche), black calc(var(--fp-foire-encoche) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--fp-foire-cote) 100%, transparent var(--fp-foire-encoche), black calc(var(--fp-foire-encoche) + .5px)) bottom / 100% 51% no-repeat;
}
.fp-foire-talon { --fp-foire-cote: 0%; }

.fp-foire-corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 22px 18px;
  background: var(--fp-white);
  border-radius: var(--fp-radius-sm) 0 0 var(--fp-radius-sm);
  color: var(--fp-ink);
}
.fp-foire-eyebrow {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-primary);
}
.fp-foire-prix {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1;
  color: var(--fp-secondary-dark);
}
.fp-foire-ancien {
  display: block;
  margin-top: 4px;
  font-family: var(--fp-font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--fp-ink-soft);
}
.fp-foire-bouton {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}
/* Reflet qui balaie le bouton toutes les quelques secondes. */
.fp-foire-bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--fp-white) 55%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: fp-foire-reflet 4.5s ease-in-out 1.6s infinite;
  pointer-events: none;
}

.fp-foire-talon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  padding: 14px 14px 16px 16px;
  background: linear-gradient(160deg, var(--fp-primary), var(--fp-secondary));
  border-left: 2px dashed color-mix(in srgb, var(--fp-white) 60%, transparent);
  border-radius: 0 var(--fp-radius-sm) var(--fp-radius-sm) 0;
  color: var(--fp-white);
}
.fp-foire-credits {
  font-family: var(--fp-font-heading);
  font-size: 2.9rem;
  line-height: .9;
  animation: fp-foire-battement 2.8s ease-in-out 1.8s infinite;
}
.fp-foire-credits-txt {
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.fp-foire-credits-note {
  margin-top: 6px;
  font-size: .75rem;
  line-height: 1.2;
  opacity: .88;
}

/* Mention de validité, sous les deux parts du billet. */
.fp-foire-mention {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--fp-white);
  opacity: .72;
  text-wrap: balance;
}

/* Confettis : points et petits traits en fond, derrière le billet (le filter
   du parent crée le contexte d'empilement qui les garde sous les deux parts). */
.fp-foire-confettis {
  position: absolute;
  inset: -22px -30px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--fp-white) 3px, transparent 3.5px) 4% 18% / 12px 12px no-repeat,
    radial-gradient(circle, var(--fp-accent) 4px, transparent 4.5px) 12% 88% / 12px 12px no-repeat,
    radial-gradient(circle, var(--fp-sand) 3px, transparent 3.5px) 30% 2% / 10px 10px no-repeat,
    radial-gradient(circle, var(--fp-cream) 2.5px, transparent 3px) 55% 98% / 10px 10px no-repeat,
    radial-gradient(circle, var(--fp-accent) 3.5px, transparent 4px) 74% 4% / 12px 12px no-repeat,
    radial-gradient(circle, var(--fp-white) 4px, transparent 4.5px) 97% 30% / 12px 12px no-repeat,
    radial-gradient(circle, var(--fp-sand) 3px, transparent 3.5px) 93% 92% / 10px 10px no-repeat,
    linear-gradient(var(--fp-accent), var(--fp-accent)) 1% 60% / 10px 4px no-repeat,
    linear-gradient(var(--fp-white), var(--fp-white)) 42% 0% / 4px 10px no-repeat,
    linear-gradient(var(--fp-sand), var(--fp-sand)) 88% 1% / 10px 4px no-repeat,
    linear-gradient(var(--fp-white), var(--fp-white)) 99% 70% / 4px 10px no-repeat,
    linear-gradient(var(--fp-accent), var(--fp-accent)) 22% 100% / 4px 10px no-repeat;
  animation: fp-foire-flotte 5s ease-in-out infinite alternate;
}

@keyframes fp-foire-pop {
  0%   { opacity: 0; transform: scale(.82) rotate(-7deg); }
  60%  { opacity: 1; transform: scale(1.04) rotate(.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-1.5deg); }
}
@keyframes fp-foire-reflet {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
@keyframes fp-foire-battement {
  0%, 70%, 100% { transform: scale(1); }
  80% { transform: scale(1.14) rotate(-3deg); }
  90% { transform: scale(.97); }
}
@keyframes fp-foire-flotte {
  from { transform: translateY(-5px) rotate(-1deg); }
  to   { transform: translateY(5px) rotate(1deg); }
}

/* Téléphone : billet plus compact, talon plus étroit. */
@media (max-width: 560px) {
  .fp-foire { margin-top: 18px; margin-bottom: 22px; }
  .fp-foire-corps { padding: 12px 12px 14px; }
  .fp-foire-talon { width: 108px; padding: 10px 8px 12px 10px; }
  .fp-foire-credits { font-size: 2.3rem; }
  .fp-foire-credits-txt { font-size: .7rem; }
  .fp-foire-credits-note { font-size: .68rem; }
  .fp-foire-prix { font-size: 1.6rem; }
  .fp-foire-bouton { padding-left: 16px; padding-right: 16px; font-size: .88rem; }
}


@media (prefers-reduced-motion: reduce) {
  .fp-foire,
  .fp-foire-bouton::after,
  .fp-foire-credits,
  .fp-foire-confettis { animation: none; }
  .fp-foire { transition: none; }
  .fp-foire-bouton::after { display: none; }
}