@charset "UTF-8";
@import url(main.css);
div.shadow-lg { box-shadow: none !important; }

/* 🌟 CONTENEUR GLOBAL */
#serviceflouhover .servhover-container-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: auto; padding: 0px; margin-top: 65px; }

/* 🌟 GRILLE DES CARTES */
#serviceflouhover .servhover-container { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }

/* 🌟 CARTE */
#serviceflouhover .servhover-card { width: 300px; height: 440px; border-radius: 15px; overflow: hidden; position: relative; text-align: left; color: white; font-size: 20px; display: flex; flex-direction: column; justify-content: space-between; margin: 0; /* Effet hover moderne */ transform: translateY(0); transition: all 0.35s ease; border: 2px solid transparent; }

#serviceflouhover .servhover-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25), 0 0 15px rgba(251, 72, 0, 0.35); border-color: #FB4800; }

/* 🌟 IMAGE */
#serviceflouhover .servhover-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 0; transition: transform 0.4s ease; }

#serviceflouhover .servhover-card:hover img { transform: scale(1.08); }

/* 🌟 OVERLAY TEXTE */
#serviceflouhover .servhover-card-content { padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%); backdrop-filter: blur(4px); position: absolute; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(20px); transition: all 0.35s ease; z-index: 1; }

#serviceflouhover .servhover-card:hover .servhover-card-content { opacity: 1; transform: translateY(0); }

/* 🌟 TITRES & TEXTES */
#serviceflouhover .servhover-card h3, #serviceflouhover .servhover-card p, #serviceflouhover .servhover-card .servhover-btn { transform: translateY(10px); opacity: 0; transition: all 0.4s ease; }

#serviceflouhover .servhover-card:hover h3, #serviceflouhover .servhover-card:hover p, #serviceflouhover .servhover-card:hover .servhover-btn { transform: translateY(0); opacity: 1; }

/* 🌟 TITRE SECTION */
#serviceflouhover .servhover-title { text-align: center; font-size: 32px; font-weight: bold; margin-bottom: 0px; color: white; letter-spacing: 2px; position: relative; }

#serviceflouhover .servhover-title::first-letter { color: #fb4800; }

/* 🌟 BOUTON */
#serviceflouhover .servhover-btn { display: inline-block; margin-top: 10px; padding: 8px 18px; background: #FB4800; color: black; text-decoration: none; border-radius: 20px; font-size: 16px; text-align: center; border: none; transition: background 0.3s ease; font-family: inherit; /* 👈 même police que les p */ }

#serviceflouhover .servhover-btn:hover { background: #fe7d01; }

/* 🌟 FOND */
#serviceflouhover { background-color: #292021; padding: 60px 0; }

/* 🌟 RESPONSIVE */
@media screen and (max-width: 768px) { #serviceflouhover .servhover-container { flex-wrap: wrap !important; justify-content: center !important; } #serviceflouhover .servhover-card { width: 350px !important; } #serviceflouhover .servhover-card-content { opacity: 1 !important; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent) !important; transform: translateY(0) !important; } #serviceflouhover .servhover-card-content p, #serviceflouhover .servhover-btn, #serviceflouhover h3 { opacity: 1 !important; transform: translateY(0) !important; } }

/*---------------------------------------------------------Avant - Après------------------------------*/
/*------Couleur des lignes---*/
.slider-before-after-images:before, .slider-before-after-images:after { background: #FB4800 !important; }

/*------Couleur du rond---*/
.slider-before-after-images { border: 3px solid #FB4800 !important; background: #FB4800 !important; }

/*------Couleur des flêches---*/
.bi-chevron-left::before, .bi-chevron-right::before { color: #292021; }

.fs-5.lead ul { list-style: none; padding-left: 0; margin-top: 10px; margin-bottom: 10px; }

.fs-5.lead ul li { position: relative; padding-left: 26px; margin-bottom: 6px; /* réduit l’espace vertical */ line-height: 1.35; /* texte plus compact */ }

.fs-5.lead ul li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: #fb4800; /* vert doux adapté au thème sombre */ font-weight: bold; }

/* Supprime l’espace généré par les <p> dans les li */
.fs-5.lead ul li p { margin-bottom: 0; }

.map-content { padding: 25px 25px 25px 40px; color: #BD550F !important; }

main h2::first-letter { color: #fb4800; }

/* Inverser image / texte uniquement pour le bloc #reverse */
@media (min-width: 992px) { #reverse .row.flex-lg-row-reverse { flex-direction: row !important; } }

/*# sourceMappingURL=custom.css.map */