/* ===========================
   INDEX PAGE STYLES — Épicerie Tropicale
   Spécifique à la page d'accueil (hero section)
   =========================== */

/* Image Masking for elegant hero */
.hero-gradient {
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
}

/* Diaporama hero — 2 images en fondu (CSS pur, animation 12s) */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: heroFade 12s infinite ease-in-out;
}
.hero-slide:nth-of-type(2) {
    animation-delay: -6s;
}
@keyframes heroFade {
    0%, 45%  { opacity: 1; }
    50%, 95% { opacity: 0; }
    100%     { opacity: 1; }
}