/* =========================================================================
   Batilux Niger — animations & composants partages
   Convention : ces classes sont consommees par toutes les pages publiques.
   ========================================================================= */

html { scroll-behavior: smooth; }

/* ---------- Scrollbar fine (esthetique) ---------- */
::-webkit-scrollbar { height: 8px; width: 10px; }
::-webkit-scrollbar-thumb { background: #1E3A8A33; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Cartes produit / promo ---------- */
.promo-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(17,24,39,.18);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  will-change: transform;
}
.promo-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 45px -14px rgba(30,58,138,.35);
}
.promo-card img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.promo-card:hover img { transform: scale(1.08); }

.promo-badge {
  background: linear-gradient(120deg, #DC2626, #B91C1C);
  position: relative;
  overflow: hidden;
}
.promo-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: shine 2.6s ease-in-out infinite;
}
@keyframes shine { 0%,20% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } }

/* ---------- Hero ---------- */
.hero-gradient {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.35), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(220,38,38,.25), transparent 55%),
              linear-gradient(135deg, #0b1a4d 0%, #1E3A8A 55%, #111827 100%);
}
.text-gradient-brand {
  background: linear-gradient(90deg, #ffffff 0%, #93c5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Marquee auto-scroll (zones 1s / 2s) ---------- */
.marquee-viewport { overflow-x: hidden; scroll-behavior: smooth; }
.marquee-track { display: flex; gap: 1rem; width: max-content; }

/* ---------- Rotateur 360 degres ---------- */
.rotator360-scene { perspective: 1400px; }
.rotator360-track {
  position: relative;
  transform-style: preserve-3d;
  animation: rotate360 16s linear infinite;
}
.rotator360-scene:hover .rotator360-track,
.rotator360-scene:active .rotator360-track { animation-play-state: paused; }
@keyframes rotate360 { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.rotator360-item {
  position: absolute; top: 0; left: 50%;
  transform-origin: center center;
  backface-visibility: hidden;
}

/* ---------- Popup ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17,24,39,.65);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  padding: 1rem;
}
.popup-overlay.is-open { opacity: 1; pointer-events: auto; }
.popup-panel {
  transform: scale(.85) translateY(20px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.popup-overlay.is-open .popup-panel { transform: scale(1) translateY(0); opacity: 1; }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  animation: wa-pulse 2.4s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}

/* ---------- Lightbox galerie ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.lightbox-overlay.is-open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img { max-height: 88vh; max-width: 92vw; border-radius: .5rem; }

/* ---------- Reveal utilitaire (fallback sans AOS) ---------- */
.fade-in-up { animation: fadeInUp .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Swiper overrides marque ---------- */
.swiper-button-next, .swiper-button-prev { color: #1E3A8A !important; background: #fff; width: 40px !important; height: 40px !important; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 16px !important; font-weight: 900; }
.swiper-pagination-bullet-active { background: #DC2626 !important; }

/* ---------- Ligne d'accent decorative ---------- */
.accent-underline { position: relative; display: inline-block; }
.accent-underline::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 4px; width: 60%;
  background: linear-gradient(90deg, #DC2626, #1E3A8A); border-radius: 999px;
}