/* ================================================
   Mon Salon Fidèle – main.css
   CSS global : classes réutilisables sur toutes les pages
   Tailwind CSS (CDN) complète ce fichier.
   ================================================ */


/* ------------------------------------------------
   GRADIENTS (réutilisés sur toutes les pages)
   ------------------------------------------------ */

.gradient-text {
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-bg {
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
}


/* ------------------------------------------------
   ANIMATIONS (fade-up : entrées animées)
   ------------------------------------------------ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up  { animation: fadeUp 0.6s ease both; }
.delay-1  { animation-delay: 0.1s; }
.delay-2  { animation-delay: 0.2s; }
.delay-3  { animation-delay: 0.3s; }
.delay-4  { animation-delay: 0.4s; }


/* ------------------------------------------------
   CARDS GÉNÉRIQUES (hover lift + shadow rose)
   ------------------------------------------------ */

.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(233, 30, 140, 0.1);
  border-color: rgba(233, 30, 140, 0.25);
}


/* ------------------------------------------------
   TARGET-CARD-BAR (barre gradient en top-border au hover)
   ------------------------------------------------ */

.target-card-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E91E8C, #F97316);
  border-radius: 12px 12px 0 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.target-card-bar:hover::before {
  opacity: 1;
}


/* ------------------------------------------------
   STEP-CARD (cards dark section "Comment ça marche")
   ------------------------------------------------ */

.step-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease;
}
.step-card:hover {
  background: rgba(255, 255, 255, 0.1);
}


/* ------------------------------------------------
   HOME ONLY – Hero gradient de fond
   (spécifique à la section hero de index.html)
   ------------------------------------------------ */

.hero-gradient {
  background: linear-gradient(160deg, #fff9fb 0%, #fff5f0 60%, #ffffff 100%);
}


/* ------------------------------------------------
   HOME ONLY – Mockup QR code (section hero)
   ------------------------------------------------ */

.mockup-qr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  width: 112px;
  height: 112px;
}
.mockup-qr-cell {
  border-radius: 2px;
}

/* ------------------------------------------------
   SCROLL REVEAL (générique – toutes les pages)
   ------------------------------------------------ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}