/* ==========================================================================
   Hero cinématique — page Shop uniquement.
   Fichier isolé, sur le même modèle exact que observatoire-cinematic.css et
   glossary-hero (photo/vidéo plein écran + halo doré + canvas décoratif +
   entrée en cascade + fondu de sortie) : ne modifie jamais style.css ni
   .page-hero partagé par les autres pages. S'applique uniquement aux
   éléments portant .shop-hero.
   Fond : une vraie photo (libre de droits, aucune génération IA) d'un poste
   de trading multi-écrans — pas de composition fabriquée en CSS/IA, sur le
   même principe que la photo/vidéo réelle utilisée en fond de l'Observatoire
   et du Glossaire.
   ========================================================================== */

.page-hero.shop-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin-top: -1px;
  min-height: min(100vh, 880px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}

.shop-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
.shop-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('https://images.pexels.com/photos/31650949/pexels-photo-31650949.jpeg?auto=compress&cs=tinysrgb&w=2400&dpr=1');
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.shop-hero-photo.is-ready { opacity: 1; }

.shop-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Halo doré discret, identique en esprit à celui de l'Observatoire/Glossaire */
.shop-hero-sunhalo {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 42vw;
  max-width: 560px;
  height: 42vw;
  max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 199, 147, 0.16), transparent 68%);
  z-index: 1;
  pointer-events: none;
}

.shop-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(4, 9, 20, 0.72) 0%, rgba(4, 9, 20, 0.5) 32%, rgba(4, 9, 20, 0.62) 100%),
    radial-gradient(circle at 46% 42%, rgba(4, 9, 20, 0.2), rgba(4, 9, 20, 0.68) 82%);
  pointer-events: none;
}

/* Fondu de sortie : mélange la couleur du Hero avec le fond de la section suivante */
.shop-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  min-height: 120px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%);
  pointer-events: none;
}
.dark-section .shop-hero-fade {
  /* CORRECTIF 2026-08-13 : aligné sur le "noir vrai" #08090b du reste du
     thème Premium, plutôt que var(--navy-deep) (patch bleuté). */
  background: linear-gradient(180deg, rgba(5, 14, 28, 0) 0%, #08090b 90%);
}

.shop-hero-inner {
  position: relative;
  z-index: 5;
  padding: 80px 0 56px;
  text-align: center;
}
.shop-hero-inner .eyebrow { color: var(--gold-light); justify-content: center; }
.shop-hero-inner h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.shop-hero-inner p {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.shop-hero-scroll-cue {
  margin: 26px auto 0;
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.55);
  animation: shop-cue-bounce 2.4s ease-in-out infinite;
}
.shop-hero-scroll-cue svg { width: 100%; height: 100%; }
@keyframes shop-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(8px); opacity: 0.9; }
}

/* --- Entrée en cascade (même mécanique que .obs-anim-item / .glossary-hero-anim) --- */
.shop-hero-anim {
  opacity: 0;
  transform: translateY(20px);
}
.shop-hero-anim.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Responsive --- */
@media (max-width: 760px) {
  .page-hero.shop-hero { min-height: 78vh; }
  .shop-hero-inner { padding: 60px 0 36px; }
  .shop-hero-sunhalo { width: 70vw; height: 70vw; top: 2%; left: -12%; }
  .shop-hero-fade { height: 16%; min-height: 90px; }
}

/* --- Accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .shop-hero-canvas { display: none; }
  .shop-hero-scroll-cue { animation: none; }
  .shop-hero-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}