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

ul li p { line-height: 0.40; }

.row.flex-lg-row-reverse.mt-5 { margin-top: 0rem !important; }

.row.flex-lg-row.mt-5 { margin-top: 0rem !important; }

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

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

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

#serviceflouhover .servhover-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25), 0 0 8px rgba(192, 125, 57, 0.4); border-color: #ebba18; }

/* 🌟 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: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); position: absolute; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(-12px); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); 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: transform 0.4s ease, opacity 0.4s ease; }

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

#serviceflouhover .servhover-card h3 { font-size: 24px; /* ajuste : 18px / 19px / 20px */ font-weight: 600 !important; /* 500 = semi, 600 = bien lisible, 700 = très marqué */ margin-bottom: 18px; /* ESPACE sous le h3 */ line-height: 1.2; }

#serviceflouhover .servhover-card p { font-size: 18px; /* ajuste : 14px / 15px / 16px */ font-weight: 500 !important; /* 400 normal, 500 plus lisible */ line-height: 1.35; /* interligne du texte */ }

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

#serviceflouhover .servhover-title::after { content: ""; display: block; width: 80px; height: 4px; background-color: #ebba18; margin: 8px auto 0; border-radius: 2px; }

/* 🌟 BOUTON */
#serviceflouhover .servhover-btn { display: inline-block; margin-top: 20px; padding: 8px 18px; background: #ebba18; color: black; text-decoration: none; border-radius: 20px; font-size: 16px; font-weight: 500 !important; /* 400 normal, 500 plus lisible */ text-align: center; border: 2px solid transparent; }

#serviceflouhover .servhover-btn:hover { background: transparent; color: #ebba18; border: 2px solid #ebba18; }

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

/* 🌟 RESPONSIVE */
@media screen and (max-width: 1024px) { /* Grille */ #serviceflouhover .servhover-container { flex-wrap: wrap; justify-content: center; gap: 20px; } /* Cartes */ #serviceflouhover .servhover-card { width: 300px; } /* Overlay : un peu plus lisible */ #serviceflouhover .servhover-card-content { padding: 22px; background: rgba(0, 0, 0, 0.5); } /* Typo tablette */ #serviceflouhover .servhover-card h3 { font-size: 22px; margin-bottom: 14px; } #serviceflouhover .servhover-card p { font-size: 16px; } #serviceflouhover .servhover-btn { font-size: 15px; } }

/* 🌟 MOBILE */
@media screen and (max-width: 768px) { /* Grille */ #serviceflouhover .servhover-container { flex-wrap: wrap !important; justify-content: center !important; } /* Carte : largeur stable */ #serviceflouhover .servhover-card { width: 350px !important; } /* Overlay toujours visible */ #serviceflouhover .servhover-card-content { opacity: 1 !important; transform: translateY(0) !important; background: rgba(0, 0, 0, 0.45) !important; /* ou ton dégradé si tu préfères */ } /* Contenu visible (ATTENTION: on scope h3) */ #serviceflouhover .servhover-card-content p, #serviceflouhover .servhover-btn, #serviceflouhover .servhover-card h3 { opacity: 1 !important; transform: translateY(0) !important; } /* Désactive l'effet hover sur mobile */ #serviceflouhover .servhover-card:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; } #serviceflouhover .servhover-card:hover img { transform: none !important; } }

@media (hover: none) { #serviceflouhover .servhover-card-content, #serviceflouhover .servhover-card h3, #serviceflouhover .servhover-card p, #serviceflouhover .servhover-btn { opacity: 1; transform: none; } }

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

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

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

/*------------------------------------------Bouton Fixe en bas à droite------------------------------*/
.btnFixe { position: fixed; bottom: 20px; right: 20px; z-index: 10; width: 100px; transition: width 0.5s ease; }

.btnFixe:hover { width: 115px; transition: width 0.5s ease; }

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