/* ========================================= */
/* STYLE.CSS - CHARTE VERT + BLANC         */
/* ========================================= */

/* === CARROUSEL FEEDBACK RESPONSIVE === */
@media screen and (max-width: 767px) {
    #carouselFeedback {
        padding: 0 20px;
    }
    
    #carouselFeedback .carou-control .carou-icon {
        background-color: rgba(45, 88, 56, 0.6); /* CORRIGÉ: Vert foncé avec 60% opacité */
        border-radius: 50%;
        padding: 5px !important;
        display: flex;
        align-items: center; /* AJOUTÉ: Centrage vertical */
        justify-content: center; /* AJOUTÉ: Centrage horizontal */
        transition: all 0.3s ease; /* AJOUTÉ: Transition fluide */
        backdrop-filter: blur(10px); /* AJOUTÉ: Effet de flou moderne */
        border: 2px solid rgba(255, 255, 255, 0.2); /* AJOUTÉ: Bordure subtile */
    }
    
    /* Effet hover pour les icônes de contrôle */
    #carouselFeedback .carou-control .carou-icon:hover {
        background-color: rgba(45, 88, 56, 0.8); /* AJOUTÉ: Plus opaque au hover */
        transform: scale(1.1); /* AJOUTÉ: Légère augmentation */
        border-color: rgba(255, 255, 255, 0.4); /* AJOUTÉ: Bordure plus visible */
    }
    
    #carouselFeedback .carou-control .carou-icon span {
        width: 1.2rem !important;
        height: 1.2rem !important;
        color: white; /* AJOUTÉ: Couleur blanche pour contraste */
        display: flex; /* AJOUTÉ: Flexbox pour centrage */
        align-items: center; /* AJOUTÉ: Centrage vertical */
        justify-content: center; /* AJOUTÉ: Centrage horizontal */
    }
    
    /* Amélioration de l'accessibilité */
    #carouselFeedback .carou-control {
        transition: opacity 0.3s ease; /* AJOUTÉ: Transition */
    }
    
    #carouselFeedback .carou-control:focus {
        outline: 2px solid rgba(45, 88, 56, 0.8); /* AJOUTÉ: Focus visible */
        outline-offset: 2px;
    }
    
    /* États actifs pour les contrôles */
    #carouselFeedback .carou-control:active .carou-icon {
        background-color: #2d5838; /* AJOUTÉ: Vert plein quand pressé */
        transform: scale(0.95); /* AJOUTÉ: Légère réduction au clic */
    }
}

/* === CARROUSEL FEEDBACK DESKTOP === */
@media screen and (min-width: 768px) {
    #carouselFeedback .carou-control .carou-icon {
        background-color: rgba(45, 88, 56, 0.4); /* AJOUTÉ: Version desktop moins opaque */
        border-radius: 50%;
        padding: 8px; /* AJOUTÉ: Padding plus grand sur desktop */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.1);
    }
    
    #carouselFeedback .carou-control .carou-icon:hover {
        background-color: rgba(45, 88, 56, 0.7);
        transform: scale(1.15);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 5px 15px rgba(45, 88, 56, 0.3); /* AJOUTÉ: Ombre au hover */
    }
    
    #carouselFeedback .carou-control .carou-icon span {
        width: 1.5rem; /* AJOUTÉ: Plus grand sur desktop */
        height: 1.5rem;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* === CARROUSEL GÉNÉRAL === */
#carouselFeedback {
    position: relative; /* AJOUTÉ: Position relative pour les contrôles */
}

/* Amélioration des indicateurs du carrousel */
#carouselFeedback .carousel-indicators button {
    background-color: rgba(45, 88, 56, 0.5); /* AJOUTÉ: Indicateurs verts */
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    transition: all 0.3s ease;
}

#carouselFeedback .carousel-indicators button.active,
#carouselFeedback .carousel-indicators button:hover {
    background-color: #2d5838; /* AJOUTÉ: Indicateur actif en vert plein */
    transform: scale(1.2);
}

/* Animation d'apparition des slides */
#carouselFeedback .carousel-item {
    transition: transform 0.6s ease-in-out; /* AJOUTÉ: Transition plus fluide */
}

/* Amélioration du contenu des slides */
#carouselFeedback .carousel-item .card {
    border: none;
    background-color: rgba(248, 249, 250, 0.95); /* AJOUTÉ: Background semi-transparent */
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(45, 88, 56, 0.1);
    transition: all 0.3s ease;
}

#carouselFeedback .carousel-item .card:hover {
    transform: translateY(-5px); /* AJOUTÉ: Effet hover sur les cartes */
    box-shadow: 0 15px 35px rgba(45, 88, 56, 0.15);
}