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

footer > div.row.justify-content-center.justify-content-lg-around.text-center.text-lg-start > div:nth-child(3) > div:nth-child(2) { display: none !important; }

.section-title { font-size: 2rem; /* taille du H2 */ font-weight: 700 !important; /* gras */ color: #111111; /* couleur texte */ text-align: center !important; /* centré */ margin: 80px 0 30px 0; /* espace au-dessus et en dessous */ position: relative; }

/* Soulignement décoratif */
.section-title::after { content: ""; display: block; width: 50%; /* largeur relative au texte du H2 */ max-width: 60px; /* limite la longueur */ height: 4px; background-color: #80d759; margin: 10px auto 0 auto; /* centré sous le texte */ border-radius: 2px; }

.photoTitleText h2 { text-align: center; /* centre le texte */ margin-top: 100px; /* marge au-dessus */ margin-bottom: 30px; /* marge en-dessous */ }

.photoTitleText h2::after { content: ""; /* élément vide */ display: block; /* bloc sous le texte */ width: 60px; /* largeur du trait */ height: 4px; /* épaisseur du trait */ background-color: #80d759; /* couleur verte */ margin: 10px auto 0; /* espace au-dessus + centré */ }

.rge-section { background: #367f0f; padding: 40px 20px; border-radius: 15px; margin: 70px auto 50px auto; max-width: 900px; }

.rge-content { display: flex; align-items: center; gap: 45px; flex-wrap: wrap; justify-content: center; }

.rge-logo { width: 170px; /* largeur plus grande */ height: 170px; /* hauteur adaptée */ object-fit: contain; /* conserve les proportions */ }

.rge-text h2 { font-size: 28px; margin-bottom: 10px; color: #fff; /* couleur artisan / cohérence charte */ letter-spacing: 1px; font-weight: 700 !important; /* gras */ margin-bottom: 20px; /* marge sous le titre, tu peux ajuster la valeur */ }

.rge-text p { font-size: 18px; line-height: 1.5; max-width: 500px; color: #fff; /* couleur artisan / cohérence charte */ font-family: 'Montserrat', sans-serif; }

.row.mt-5 { margin-top: 1rem !important; }

.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles h2 { position: relative; /* nécessaire pour le ::after */ padding-bottom: 1rem; /* espace entre le texte et le trait */ }

.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles h2::after { content: ""; position: absolute; left: 0; /* aligné à gauche */ bottom: 0; width: 80px; /* longueur du trait */ height: 4px; /* épaisseur */ background-color: #80d759; /* vert */ }

.page-anchors { display: flex; flex-wrap: wrap; /* permet aux liens de passer à la ligne si écran trop petit */ gap: 20px; /* espace entre les liens */ justify-content: center; /* centre les liens horizontalement */ margin: 60px auto; /* espace autour du bloc */ padding: 0 20px; /* un peu de padding horizontal */ max-width: 1000px; /* largeur maximale du bloc */ background: transparent; /* pas de fond ni contour */ }

.anchor-link { text-decoration: none; color: #367f0f; /* texte vert */ font-weight: 600; padding: 12px 18px; /* espace interne du lien */ border-radius: 8px; text-align: center; border: 2px solid #367f0f; /* contour uniquement autour du lien */ transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* léger relief */ font-family: 'Montserrat', sans-serif; }

.anchor-link:hover { background: #367f0f; /* fond vert au survol */ color: #fff; /* texte blanc */ border-color: #367f0f; /* contour reste vert */ }

/* Responsive pour petits écrans */
@media (max-width: 768px) { .page-anchors { gap: 15px; } .anchor-link { flex: 1 1 calc(50% - 15px); /* 2 liens par ligne sur tablette */ min-width: auto; } }

@media (max-width: 480px) { .anchor-link { flex: 1 1 100%; /* 1 lien par ligne sur mobile */ } }

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

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

/* 🌟 CARTE */
#serviceflouhover .servhover-card { width: 350px; height: 500px; 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: 3px 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 8px rgba(54, 127, 15, 0.4); border-color: #367f0f; }

/* 🌟 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.65), transparent); backdrop-filter: blur(2px); 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: #111111; text-transform: uppercase; letter-spacing: 2px; position: relative; }

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

/* 🌟 BOUTON */
#serviceflouhover .servhover-btn { display: inline-block; margin-top: 10px; padding: 8px 18px; background: #80d759; color: black; font-weight: 600; text-decoration: none; border-radius: 20px; font-size: 15px; text-align: center; border: 2px solid transparent; }

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

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

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

/* 🌟 BOUTONS HEADER / CTA PAGE ACCUEIL */
a.button_homepageScreen, a.button_homepageDoubleScreen, a.button_header-telephone { display: inline-block !important; padding: 8px 18px !important; background: #80d759 !important; color: black !important; text-decoration: none !important; border-radius: 20px !important; font-size: 16px !important; text-align: center !important; border: 2px solid transparent !important; transition: all 0.3s ease !important; }

a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.button_header-telephone:hover { background: transparent !important; color: #80d759 !important; border: 2px solid #80d759 !important; }

/* 🌟 Bouton "Téléphone" header */
a.button_header.button-header-telephone.grow.text-color-fourth { display: inline-block !important; padding: 8px 18px !important; background: #80d759 !important; color: black !important; text-decoration: none !important; border-radius: 20px !important; font-size: 16px !important; text-align: center !important; border: 2px solid transparent !important; transition: all 0.3s ease !important; }

a.button_header.button-header-telephone.grow.text-color-fourth:hover { background: transparent !important; color: #80d759 !important; border: 2px solid #80d759 !important; }

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

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

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

/* H2 des blocs réseaux sociaux */
.text-center.titles.text-color-sixth h2 { position: relative; }

.text-center.titles.text-color-sixth h2::after { content: ""; display: block; width: 50%; max-width: 60px; height: 4px; background-color: #80d759; margin: 10px auto 0 auto; border-radius: 2px; }

.depannage { /* Fond et image */ background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FyAMwjl2X4gMQlLnZqTakJE3zr4J3%2Fimages%2FArt_Toit_rs_9xn7.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; /* Espacement */ padding: clamp(80px, 10vw, 100px) 2rem; text-align: center; /* Couleur de secours */ background-color: #F4F3EE; }

.depannage-container { max-width: 900px; margin: 0 auto; }

.depannage h2 { margin-bottom: 0.75rem; font-size: 2rem; font-weight: 700; color: #fff; }

/* Soulignement décoratif */
.depannage h2::after { content: ""; display: block; width: 50%; max-width: 60px; height: 4px; background-color: #80d759; margin: 10px auto 0; border-radius: 2px; }

.depannage p { color: #fff; max-width: 520px; margin: 0 auto 2.5rem; font-size: 1.13rem; }

.depannage-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* Bouton dépannage – état normal */
.depannage a.depannage-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; border-radius: 999px; font-weight: 600; text-decoration: none; background-color: #80d759; color: #212525; border: 2px solid #80d759; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }

/* Empêche les styles globaux d’écraser la couleur */
.depannage a.depannage-btn, .depannage a.depannage-btn:visited, .depannage a.depannage-btn:active, .depannage a.depannage-btn:focus { color: #212525; text-decoration: none; }

/* Hover */
.depannage a.depannage-btn:hover { background-color: transparent; color: #80d759; transform: translateY(-3px); }

/* Mobile */
@media (max-width: 480px) { .depannage-actions { flex-direction: column; } }

.avis-clients { background-color: #F4F3EE; padding: 80px 20px; }

.avis-container { max-width: 1100px; margin: 0 auto; text-align: center; }

.avis-clients h2 { font-size: 32px; margin-bottom: 50px; color: #111111; }

.avis-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

.avis-card { background-color: #ffffff; padding: 35px 30px; border-radius: 12px; border-top: 3px solid #367f0f; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.avis-card:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(54, 127, 15, 0.2); }

.avis-stars { color: #f4b400; font-size: 20px; margin-bottom: 20px; }

.avis-text { font-size: 16px; line-height: 1.6; color: #111111; margin-bottom: 20px; }

.avis-author { font-size: 14px; color: #777; font-weight: 600; }

.avis-intervention { display: inline-block; margin-bottom: 15px; font-size: 14px; font-weight: 600; color: #367f0f; background-color: #e8f5e9; padding: 6px 12px; border-radius: 20px; }

.avis-clients h2::after { content: ""; display: block; width: 50%; max-width: 60px; height: 4px; background-color: #80d759; margin: 10px auto 0; border-radius: 2px; }

.nav-link { font-weight: 600 !important; }

div#bandeau-title-seo h2.titles { color: #111111 !important; }

h1.display-4.bandeauTitre.titles { color: #111111 !important; }

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