/* =========================================
   PAGE ACCUEIL - SHAPE DIVIDER (FLÈCHE LARGEUR TOTALE)
   ========================================= */
.hero-shape-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: translateY(1px); 
    z-index: 10;
}

.hero-shape-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

.hero-shape-divider .shape-fill {
    fill: var(--bg-main); 
    transition: fill 0.3s ease-in-out;
}

/* Petit effet au survol : la flèche s'écrase un peu */
.hero-shape-divider:hover svg {
    height: 65px;
}

/* =========================================
   SWIPER - EFFET 3D (CARTES ET GOODIES)
   ========================================= */
.swiper-slide-card,
.swiper-slide-goodie {
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.5; /* Assombrit les éléments sur les côtés */
    transform: scale(0.85); /* Réduit la taille des éléments sur les côtés */
}

.swiper-slide-card.swiper-slide-active,
.swiper-slide-goodie.swiper-slide-active {
    opacity: 1; /* Élément central bien visible */
    transform: scale(1); /* Taille normale au centre */
    z-index: 10;
}

/* --- Section Images (Goodies / Ticket) --- */
.promo-banner-img {
    width: 100%;
    max-width: 800px;
    height: auto; /* Garantit que l'image garde ses proportions sans s'écraser */
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-banner-img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

/* ==========================================================================
   CLASSES UTILITAIRES PERSONNALISÉES
   ========================================================================== */
.bg-gacha {
    background-color: var(--gacha) !important;
}

/* Optionnel : un petit effet de survol pour que le bouton soit dynamique */
.bg-gacha:hover {
    filter: brightness(1.1);
}