/* =========================================================================
   OM Ondele Multiservice — Styles spécifiques à la page d'ACCUEIL
   Chargé après common.css. Ne contient que ce qui est propre à index.html.
   ========================================================================= */

/* Carte de contenu du Hero — point d'ancrage des animations GSAP (accueil.js).
   Fallback no-JS : si GSAP ne s'exécute pas, le contenu reste visible. */
.hero-content {
  will-change: transform, opacity;
}

/* Indicateur de scroll du Hero */
.hero-scroll-indicator {
  color: var(--navy-mid);
}

/* Voile clair du Hero (dégradé lisible par-dessus l'image Marrakech) */
.hero-veil {
  background: linear-gradient(
    to right,
    rgba(246, 244, 239, 0.95) 0%,
    rgba(246, 244, 239, 0.70) 50%,
    transparent 100%
  );
}

/* ----- Motif de l'emblème repris dans le Hero ----- */

/* Diamant doré (divider du logo) */
.hero-diamond {
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}

/* Étincelles dorées scintillantes (motif du logo) */
.hero-sparkle {
  position: absolute;
  z-index: 5;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  animation: hero-twinkle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(201, 168, 76, .35));
}
@keyframes hero-twinkle {
  0%, 100% { opacity: 0; transform: scale(.55) rotate(0deg); }
  50%      { opacity: .95; transform: scale(1) rotate(45deg); }
}

/* Piliers de services du Hero (3 sous-badges de l'emblème) */
.hero-pillar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.hero-pillar + .hero-pillar {
  margin-top: 1rem;
}
.hero-pillar-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(13, 27, 62, .25);
}
.hero-pillar-icon i,
.hero-pillar-icon svg {
  color: var(--gold-light);
}