/* --- PERSONNALISATION DU CAROUSEL BOOTSTRAP --- */

/* 1. Transformation des barres en points (comme Slick) */
#mainHeroSlider .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 6px;
    margin-right: 6px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.2);
    opacity: 0.7;
    transition: transform 0.2s ease;
}

#mainHeroSlider .carousel-indicators .active {
    opacity: 1;
    transform: scale(1.2);
    background-color: #000;
}

/* 2. Gestion de la lisibilité (Fond / Ombre) */
#mainHeroSlider .carousel-indicators {
    background: linear-gradient(transparent, rgba(0,0,0,0.3));
    margin-bottom: 0;
    padding: 20px 0;
    bottom: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    z-index: 2; /* Assure que les points restent cliquables au-dessus des textes */
}

/* 3. Style des flèches avec ombre portée pour la lisibilité */
#mainHeroSlider .carousel-control-prev-icon,
#mainHeroSlider .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 50%;
    border-radius: 50%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: background-color 0.3s ease;
}

#mainHeroSlider .carousel-control-prev-icon:hover,
#mainHeroSlider .carousel-control-next-icon:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* --- COMPORTEMENT DE L'IMAGE (Anti-écrasement Universel) --- */
.slider-img-fit {
    width: 100%;
    height: 500px; /* Force la hauteur à 500px sur SMARTPHONE (<768px) */
    object-fit: cover;
    object-position: center; /* Garde le produit centré lors du rognage */
}

/* --- COMPORTEMENT TEXTE DYNAMIQUE MOBILE (Par défaut) --- */
.slider-item-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: relative;
}

.slider-caption-overlay {
    position: relative; /* Sur mobile, se place naturellement sous l'image */
    width: 100%;
    /* On dégage le padding et le fond blanc ici ! */
}

.slider-caption-custom {
    width: 100%;
    text-align: center;
    max-width: initial;
    /* Le padding est maintenant ici, pour que la couleur de fond remplisse bien l'espace */
    padding: 25px 15px 35px 15px;

    /* Sur mobile : Fond solide (100%), pas de bords arrondis, pas de blur */
    --bs-bg-opacity: 1;
    backdrop-filter: none;
    border-radius: 0;

    position: absolute;
    bottom: 100%;
}

.slider-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.2;
    font-style: italic;
}

.slider-subtitle {
    font-size: 1rem;
    margin-bottom: 0;
}

/* --- COMPORTEMENT DESKTOP (PC & Tablettes Paysage) --- */
@media (min-width: 768px) {
    .slider-img-fit {
        height: auto;
        min-height: 340px;
        object-fit: cover;
        object-position: center;
    }

    .slider-item-container {
        display: block; /* Annule le mode colonne Flexbox */
    }

    .slider-caption-overlay {
        position: absolute; /* Sur PC, on flotte au-dessus de l'image */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background: transparent;
        z-index: 1;
        pointer-events: none;
    }

    .slider-caption-custom {
        max-width: 50%;
        width: auto;
        padding: 30px !important; /* Retrouve sa taille de bulle */

        /* LA MAGIE EST ICI : On active la transparence, le blur et les arrondis uniquement sur PC */
        --bs-bg-opacity: 0.85;
        backdrop-filter: blur(4px);
        border-radius: 0.4rem; /* Equivalent de rounded-4 */

        bottom: initial;
        position: initial;
    }

    /* --- ALIGNEMENTS DANS LE CONTAINER BOOTSTRAP --- */
    .caption-gauche { margin-right: auto; text-align: left; }
    .caption-centre { margin: 0 auto; text-align: center; }
    .caption-droite { margin-left: auto; text-align: right; }

    .slider-title { font-size: 2.5rem; margin-bottom: 10px; }
    .slider-subtitle { font-size: 1.5rem; }
}