/* ============================================
   HERO BACKGROUND - BREIZHIT V3.0
   Background image avec overlay adaptatif
   
   ✅ CORRECTION AUDIT - Configuration cockpit:
   - Light mode: Overlay violet foncé #0f0c29 à 65% (cockpit)
   - Dark mode: Overlay violet-900 à 100% (opaque)
   - Image assombrie pour meilleur contraste (brightness 0.5)
   
   Design cockpit: Violet foncé, contraste élevé, lisibilité parfaite
   ============================================ */

:root {
  --hero-violet: var(--primary, #6C4DFF);
}

/* Base layer for hero backgrounds */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
}

/* Ensure the hero section can host absolute layers */
.hero-has-bg {
  position: relative;
  overflow: hidden;
}

/* ============================================
   IMAGE DE FOND - background-hero.jpg
   ✅ CORRECTION AUDIT: Image assombrie pour design cockpit
   ============================================ */
.hero-background-image {
  background-image: url('../assets/images/background-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  /* ✅ Image encore moins visible avec brightness réduit */
  filter: brightness(0.35) contrast(1.1);
}

/* Fallback si l'image n'est pas dans src/assets */
@supports not (background-image: url('../assets/images/background-hero.jpg')) {
  .hero-background-image {
    background-image: url('../assets/images/background-hero.jpg');
  }
}

/* ============================================
   OVERLAY ADAPTATIF - LIGHT MODE
   ✅ Dégradé violet très sombre avec opacité augmentée pour overlay plus foncé
   
   Configuration :
   - Dégradé violet/magenta très foncé (tons très sombres)
   - Opacité: 93% pour un effet encore plus prononcé
   - Maintient le contraste du texte
   ============================================ */
.hero-overlay-light {
  /* ✅ Dégradé violet très sombre style premium - overlay plus foncé */
  background: linear-gradient(135deg, 
    rgba(15, 8, 40, 0.93) 0%, 
    rgba(25, 12, 60, 0.93) 25%,
    rgba(40, 15, 75, 0.93) 50%, 
    rgba(50, 20, 85, 0.93) 75%,
    rgba(60, 25, 95, 0.93) 100%
  );
  opacity: 1;
  z-index: 1;
}

/* ============================================
   OVERLAY ADAPTATIF - DARK MODE
   ✅ Overlay réduit pour laisser voir l'image de fond
   
   Configuration :
   - Violet foncé avec opacité réduite à 60%
   - Laisse apparaître l'image background en dark mode
   - Assure toujours un bon contraste du texte blanc
   ============================================ */
.hero-overlay-dark {
  /* bg-violet-900: #4c1d95 à 60% opacité */
  background-color: rgba(76, 29, 149, 0.6);
  opacity: 0; /* Masqué par défaut */
  z-index: 1;
}

/* ============================================
   TOGGLE LIGHT/DARK OVERLAYS
   Bascule entre les deux overlays selon le thème
   ============================================ */
.hero-overlay-light { opacity: 1; }
.hero-overlay-dark { opacity: 0; }

[data-theme="dark"] .hero-overlay-light { opacity: 0; }
[data-theme="dark"] .hero-overlay-dark { opacity: 1; }

/* Safety: ensure hero text remains readable with proper z-index */
.hero-has-bg .hero-content {
  position: relative;
  z-index: 10;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ✅ CORRECTION AUDIT: Même overlay cockpit sur mobile
   Background uniforme sur tous les écrans
   ============================================ */
@media (max-width: 768px) {
  .hero-overlay-light {
    /* Mobile: même overlay violet foncé cockpit */
    background-color: rgba(15, 12, 41, 0.65);
  }
  
  .hero-overlay-dark {
    /* Mobile: violet-900 à 100% (identique desktop) */
    background-color: rgba(76, 29, 149, 1.0);
  }
}