/* ===================================
   BACKGROUND SLIDESHOW - VERSION PUBLIC
   Diaporama d'arrière-plan pour le site public
   Appliqué uniquement aux sections Services et Avis clients
   Style sombre comme l'espace client
   =================================== */

/* Conteneur du diaporama en arrière-plan fixe */
.slideshow-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000000;
}

.slideshow-background .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.slideshow-background .slide.active {
    opacity: 1;
}

/* Overlay noir léger pour garder la lisibilité mais voir les images */
.slideshow-background .slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* S'assurer que tout le contenu reste au-dessus */
body {
    position: relative;
}

/* Header et navigation */
header,
nav,
.navbar,
.navbar-ultra-modern {
    position: relative;
    z-index: 1000 !important;
}

/* UNIQUEMENT les sections Services et Avis - fond sombre semi-transparent comme l'espace client */
.services-modern,
section.services-modern,
section#services,
.testimonials-premium,
section.testimonials-premium,
section#testimonials {
    position: relative;
    z-index: 100 !important;
    background: rgba(28, 28, 30, 0.65) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Adapter les couleurs de texte pour le fond sombre */
.services-modern h2,
.services-modern h3,
.services-modern h4,
.services-modern .section-title-modern,
section#services h2,
section#services h3,
section#services h4,
section#services .section-title-modern,
.testimonials-premium h2,
.testimonials-premium h3,
.testimonials-premium h4,
.testimonials-premium .section-title-modern,
section#testimonials h2,
section#testimonials h3,
section#testimonials h4,
section#testimonials .section-title-modern {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Texte paragraphes */
.services-modern p,
section#services p,
.testimonials-premium p,
section#testimonials p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Cards services - fond sombre prestige avec accents dorés */
.services-modern .card,
.services-modern .service-card,
.services-modern .service-card-modern,
section#services .card,
section#services .service-card,
section#services .service-card-modern,
.service-card-modern,
div.service-card-modern,
.col .service-card-modern {
    background: linear-gradient(145deg, rgba(28, 28, 30, 0.95) 0%, rgba(44, 44, 46, 0.95) 100%) !important;
    background-color: rgba(28, 28, 30, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(212, 175, 55, 0.15),
        0 0 0 1px rgba(212, 175, 55, 0.1) inset !important;
    transition: all 0.4s ease !important;
}

/* Forcer le fond noir sur toutes les parties des cartes */
.services-modern .service-card-modern::before,
section#services .service-card-modern::before,
.service-card-modern::before {
    background: transparent !important;
}

.services-modern .service-card-modern *,
section#services .service-card-modern * {
    background-color: transparent !important;
}

/* Conteneur de la carte - fond noir forcé */
.services-modern .service-card-modern > div,
section#services .service-card-modern > div,
.service-card-modern > div {
    background: transparent !important;
    background-color: transparent !important;
}

.services-modern .card:hover,
.services-modern .service-card:hover,
.services-modern .service-card-modern:hover,
section#services .card:hover,
section#services .service-card:hover,
section#services .service-card-modern:hover,
.service-card-modern:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    background: linear-gradient(145deg, rgba(28, 28, 30, 0.98) 0%, rgba(44, 44, 46, 0.98) 100%) !important;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(212, 175, 55, 0.3),
        0 0 0 1px rgba(212, 175, 55, 0.2) inset !important;
}

/* Titres des cartes - doré élégant avec dégradé */
.services-modern .card h3,
.services-modern .card h4,
.services-modern .card h5,
.services-modern .service-card h3,
.services-modern .service-card h4,
.services-modern .service-card h5,
.services-modern .service-card-modern h3,
.services-modern .service-card-modern h4,
.services-modern .service-card-modern h5,
section#services .card h3,
section#services .card h4,
section#services .card h5,
section#services .service-card h3,
section#services .service-card h4,
section#services .service-card h5,
section#services .service-card-modern h3,
section#services .service-card-modern h4,
section#services .service-card-modern h5,
.service-card-modern h3,
.service-card-modern h4,
.service-card-modern h5 {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3)) !important;
    font-weight: 600 !important;
}

/* Texte des cartes - blanc pur pour contraste */
.services-modern .card p,
.services-modern .service-card p,
.services-modern .service-card-modern p,
section#services .card p,
section#services .service-card p,
section#services .service-card-modern p,
.service-card-modern p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Icônes des services - doré brillant */
.services-modern .card i,
.services-modern .service-card i,
.services-modern .service-card-modern i,
section#services .card i,
section#services .service-card i,
section#services .service-card-modern i,
.service-card-modern i {
    color: #D4AF37 !important;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)) !important;
    transition: all 0.3s ease !important;
}

.services-modern .card:hover i,
.services-modern .service-card:hover i,
.services-modern .service-card-modern:hover i,
section#services .card:hover i,
section#services .service-card:hover i,
section#services .service-card-modern:hover i,
.service-card-modern:hover i {
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8)) !important;
    transform: scale(1.1) !important;
}

/* Boutons dans les cartes */
.services-modern .card .btn,
.services-modern .service-card .btn,
.services-modern .service-card-modern .btn,
section#services .card .btn,
section#services .service-card .btn,
section#services .service-card-modern .btn,
.service-card-modern .btn {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%) !important;
    border: none !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}

.services-modern .card .btn:hover,
.services-modern .service-card .btn:hover,
.services-modern .service-card-modern .btn:hover,
section#services .card .btn:hover,
section#services .service-card .btn:hover,
section#services .service-card-modern .btn:hover,
.service-card-modern .btn:hover {
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Cards témoignages - fond sombre prestige avec accents dorés */
.testimonials-premium .testimonial-card,
.testimonials-premium .testimonial-card-premium,
section#testimonials .testimonial-card,
section#testimonials .testimonial-card-premium {
    background: linear-gradient(145deg, rgba(28, 28, 30, 0.95) 0%, rgba(44, 44, 46, 0.95) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(212, 175, 55, 0.1),
        0 0 0 1px rgba(212, 175, 55, 0.1) inset !important;
    transition: all 0.4s ease !important;
}

.testimonials-premium .testimonial-card:hover,
.testimonials-premium .testimonial-card-premium:hover,
section#testimonials .testimonial-card:hover,
section#testimonials .testimonial-card-premium:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(212, 175, 55, 0.2),
        0 0 0 1px rgba(212, 175, 55, 0.2) inset !important;
}

/* Texte des témoignages */
.testimonials-premium .testimonial-card *,
.testimonials-premium .testimonial-card-premium *,
section#testimonials .testimonial-card *,
section#testimonials .testimonial-card-premium * {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Nom du client - doré élégant avec dégradé */
.testimonials-premium .testimonial-name,
.testimonials-premium .testimonial-card h4,
.testimonials-premium .testimonial-card h5,
section#testimonials .testimonial-name,
section#testimonials .testimonial-card h4,
section#testimonials .testimonial-card h5 {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
    font-weight: 600 !important;
}

/* Étoiles dorées brillantes */
.testimonials-premium .rating-stars,
.testimonials-premium .testimonial-rating,
section#testimonials .rating-stars,
section#testimonials .testimonial-rating {
    color: #D4AF37 !important;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

.testimonials-premium .fa-star,
section#testimonials .fa-star {
    color: #D4AF37 !important;
}

/* Assurer la lisibilité du contenu dans ces sections */
.services-modern .container,
.testimonials-premium .container,
section#services .container,
section#testimonials .container {
    position: relative;
    z-index: 101;
}

/* Icônes et éléments décoratifs */
.services-modern .fa,
.services-modern .fas,
.services-modern .far,
section#services .fa,
section#services .fas,
section#services .far,
.testimonials-premium .fa,
.testimonials-premium .fas,
.testimonials-premium .far,
section#testimonials .fa,
section#testimonials .fas,
section#testimonials .far {
    color: #D4AF37 !important;
}