/* ==========================================================================
   Hero cinématique — page Diagnostic uniquement.
   Même mécanique exacte que shop-cinematic.css / observatoire-cinematic.css
   (photo plein écran + halo doré + canvas décoratif + entrée en cascade) :
   fichier isolé, ne modifie jamais style.css ni .page-hero partagé par les
   autres pages. S'applique uniquement aux éléments portant .dg-hero-cinema.
   Photo : une vraie photographie libre de droits (Pexels), aucune
   composition fabriquée en CSS/IA — un adulte qui remplit un carnet
   budgétaire à la main, en écho direct au diagnostic proposé plus bas.
   ========================================================================== */

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

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

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

.dg-hero-sunhalo {
  position: absolute;
  top: 8%;
  right: 2%;
  width: 40vw;
  max-width: 520px;
  height: 40vw;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 199, 147, 0.16), transparent 68%);
  z-index: 1;
  pointer-events: none;
}

.dg-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgba(4, 9, 20, 0.86) 0%, rgba(4, 9, 20, 0.66) 42%, rgba(4, 9, 20, 0.4) 100%),
    linear-gradient(0deg, rgba(4, 9, 20, 0.55) 0%, rgba(4, 9, 20, 0.15) 40%);
  pointer-events: none;
}

.dg-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  min-height: 100px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%);
  pointer-events: none;
}
.dark-section .dg-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%);
}

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

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

.dg-hero-anim {
  opacity: 0;
  transform: translateY(20px);
}
.dg-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);
}

@media (max-width: 760px) {
  .page-hero.dg-hero-cinema { min-height: 72vh; }
  .dg-hero-inner { padding: 56px 0 40px; }
  .dg-hero-sunhalo { width: 70vw; height: 70vw; top: 2%; right: -18%; }
  .dg-hero-fade { height: 14%; min-height: 80px; }
}

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