/* Bloc « Rejoignez notre programme fidélité » (accueil) : carte flottante + 3 étapes + bouton d'inscription. */
.loyalty { background: var(--color-white); padding: 96px 0; overflow: hidden; }
.loyalty[hidden] { display: none; }
.loyalty-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 80px; align-items: center;
}

/* ---------- Carte ---------- */
.loyalty-visual { position: relative; isolation: isolate; padding: 28px 0; }
.loyalty-visual::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242,168,196,0.30), rgba(242,168,196,0) 70%);
  animation: lo-halo 6s ease-in-out infinite;
}
.loyalty-card-float { animation: lo-float 7s ease-in-out infinite; }
.loyalty-card {
  display: block; width: 380px; max-width: 100%; height: auto;
  filter: drop-shadow(0 26px 34px rgba(58,37,48,0.28)); /* l'ombre suit les coins arrondis du PNG */
  transform: rotate(-4deg); transition: transform 0.5s var(--ease);
}
.loyalty-visual:hover .loyalty-card { transform: rotate(0deg) scale(1.02); }

@keyframes lo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes lo-halo { 0%, 100% { opacity: 0.65; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* ---------- Texte ---------- */
.loyalty-eyebrow { margin: 0 0 12px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-dark); }
.loyalty-title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.12; color: var(--color-ink); }
.loyalty-text { margin: 0 0 28px; max-width: 560px; font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.65; color: var(--color-ink-soft); }
.loyalty-steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; max-width: 600px; }
.loyalty-step { display: flex; gap: 16px; align-items: flex-start; }
.loyalty-step-n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  background: var(--color-bg); color: var(--color-accent-dark); border: 1px solid var(--color-line);
}
.loyalty-step-body { display: flex; flex-direction: column; gap: 3px; }
.loyalty-step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-ink); }
.loyalty-step-text { font-family: var(--font-sans); font-size: 0.93rem; line-height: 1.55; color: var(--color-ink-soft); }

.loyalty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.loyalty-cta, .loyalty-link {
  display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; text-decoration: none;
  background: var(--color-accent-dark); color: var(--color-white);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.loyalty-cta:hover, .loyalty-link:hover { background: var(--color-ink); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(58,37,48,0.18); }
.loyalty-cta:focus-visible, .loyalty-link:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.loyalty-cta[hidden], .loyalty-link[hidden] { display: none; }
.loyalty-note { margin: 0; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.5; color: var(--color-ink-soft); }

/* Apparition au défilement (seulement si le JS est actif). */
.loyalty.js-anim .lo-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.loyalty.js-anim .lo-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .loyalty { padding: 72px 0; }
  .loyalty-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .loyalty-visual { justify-self: center; width: 100%; max-width: 380px; }
}
@media (max-width: 640px) {
  .loyalty { padding: 56px 0; }
  .loyalty-inner { padding: 0 20px; }
  .loyalty-visual { padding: 28px 10px; }
  .loyalty-card { transform: rotate(-3deg); }
  .loyalty-cta, .loyalty-link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .loyalty-card-float, .loyalty-visual::before { animation: none; }
  .loyalty-card { transform: none; transition: none; }
  .loyalty.js-anim .lo-reveal { opacity: 1; transform: none; transition: none; }
  .loyalty-cta, .loyalty-link { transition: none; }
}