@charset "UTF-8";
@import url(main.css);
/* ============================================================ SOMMAIRE ============================================================ 0. IMPORTATION DES POLICES & ICÔNES 1. STRUCTURE GLOBALE, HEADER & BOUTONS HAUT DE PAGE 2. HERO HEADER (VIDÉO ACCUEIL) 3. SECTION SERVICES M'ELEC (5 CARTES CENTRÉES) 4. STYLE DES BOUTONS (Séparés) 5. BLOC CONSEILS (CUSTOM CARDS / FORFAITS) 6. TITRES PAGES 7. STYLE DES ICÔNES (STRUCTURE UNIQUEMENT) 8. BLOC MAPS 9. RESPONSIVE MOBILE (SMARTPHONES & TABLETTES) 10. PAGE CONTACT ============================================================ */
/* ============================================================ 0. IMPORTATION DES POLICES & ICÔNES ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* ============================================================ 1. STRUCTURE GLOBALE, HEADER & BOUTONS HAUT DE PAGE ============================================================ */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0.3rem !important; padding: 0.5rem 1rem !important; }

i.bi.bi-telephone.fs-6, .photoTitleText, .item-content.mx-5 { display: none !important; }

.button-header-telephone, a#phone-analytics-tag-video-bloc { font-family: 'Merriweather Sans', sans-serif !important; font-weight: 700 !important; color: white !important; border-radius: 0.3rem !important; text-decoration: none !important; }

.button-header-telephone { padding: 0.5rem 1.3rem !important; }

a#phone-analytics-tag-video-bloc { padding: 1.3rem !important; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0.3rem; padding: 1rem 1.3rem; }

.mx-auto.col-lg-11.shadow-lg.bg-primaryColor:not(.first-activity-div):not(.second-activity-div):not(.third-activity-div) { box-shadow: none !important; margin: 0 !important; width: 100% !important; padding-bottom: 6rem !important; padding-top: 3rem !important; border-radius: 0 !important; }

.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { margin-top: 0px !important; }

img.d-block.mx-lg-auto.img-fluid { border-radius: 2rem; }

.display-5.titles.mb-2.fw-bold.text-body-emphasis.ctaLinks-title.text-color-sixth { text-shadow: 2px 1px white; }

.lead.p-4.text-color-sixth { text-shadow: 2px 1px #0976BD; }

nav.breadcrumb.mb-0.fil-ariane.d-flex.justify-content-center.justify-content-lg-end.p-3 { DISPLAY: none !important; }

/* ============================================================ 2. HERO HEADER (VIDÉO ACCUEIL) ============================================================ */
#fullHeight .videoTitle { width: 100% !important; max-width: 100% !important; }

h1 { text-shadow: 2px 1px white; }

#fullHeight .mb-4 { margin-bottom: 5rem !important; }

/* ============================================================ 3. SECTION SERVICES M'ELEC (5 CARTES CENTRÉES) ============================================================ */
.services-melec { width: 100% !important; padding: 80px 20px !important; background-color: #ffffff !important; background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FSagnj1B60wUkK3tdfpY1xc3BVsl2%2Fimages%2FELEMENT_FOND_MELEC_nhur.webp?alt=media&token=0345eb58-2eb3-44bf-9403-407abaeee3c5) !important; background-repeat: no-repeat !important; background-position: bottom right !important; background-size: 50% !important; box-sizing: border-box !important; }

.services-melec-container { max-width: 1400px !important; margin: 0 auto !important; }

.services-melec-header { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; margin-bottom: 60px !important; }

.services-melec-title { font-family: 'Merriweather Sans', sans-serif !important; font-size: clamp(30px, 5vw, 42px) !important; font-weight: 800 !important; text-transform: uppercase !important; color: #0976BD !important; margin: 0 !important; }

.services-melec-divider { width: 180px !important; height: 4px !important; background: #96C942 !important; margin: 20px 0 !important; }

.services-melec-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 30px !important; margin-bottom: 50px !important; }

.services-melec-card { display: block !important; position: relative !important; overflow: hidden !important; text-decoration: none !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; cursor: pointer !important; border-radius: 3rem !important; width: 100% !important; max-width: 380px !important; }

.services-melec-card-image { position: relative !important; aspect-ratio: 4 / 5 !important; }

.services-melec-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.6s ease !important; }

.services-melec-card:hover .services-melec-card-image img { transform: scale(1.1) !important; }

.services-melec-card-content { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; padding: 30px !important; transition: all 0.4s ease !important; z-index: 2 !important; }

.services-melec-card:hover .services-melec-card-content { background: rgba(150, 201, 66, 0.95) !important; }

.services-melec-card-title { font-family: 'Merriweather Sans', sans-serif !important; font-weight: 800 !important; font-size: 1.8rem !important; color: #FFFFFF !important; text-transform: uppercase !important; margin: 0 !important; text-shadow: 0 2px 10px rgba(9, 118, 189, 0.5) !important; transition: all 0.4s ease !important; }

.services-melec-card:hover .services-melec-card-title { color: #fff !important; transform: translateY(-10px) !important; text-shadow: none !important; }

.services-melec-card-text { font-family: 'Roboto', sans-serif !important; font-size: 1rem !important; color: #FFFFFF !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; transition: all 0.4s ease !important; }

.services-melec-card:hover .services-melec-card-text { opacity: 1 !important; max-height: 200px !important; margin-top: 15px !important; color: #fff !important; }

/* ============================================================ 4. STYLE DES BOUTONS (Séparés) ============================================================ */
.services-melec-cta { text-align: center !important; }

.services-melec-btn { display: inline-block !important; padding: 15px 35px !important; background-color: #96C942 !important; color: #ffffff !important; font-family: 'Merriweather Sans', sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; text-decoration: none !important; border-radius: 5px !important; border: none !important; transition: all 0.3s ease !important; }

.services-melec-btn:hover { background-color: #93B5D5 !important; color: #ffffff !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; }

#custom-cards .card .d-flex.flex-column.h-100 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

#custom-cards .card ul.d-flex { justify-content: center !important; padding-left: 0 !important; margin-left: 0 !important; }

#custom-cards .card ul.d-flex.list-unstyled.mt-auto li { margin-left: 0 !important; margin-right: 0 !important; }

#custom-cards .btn-light { display: block !important; margin: 0 auto !important; padding: 10px 20px !important; background-color: #96C942 !important; color: #ffffff !important; font-family: 'Merriweather Sans', sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; text-decoration: none !important; border-radius: 5px !important; border: none !important; transition: all 0.3s ease !important; text-align: center !important; width: fit-content !important; }

#custom-cards .btn-light:hover { background-color: #93B5D5 !important; color: #ffffff !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; }

/* ============================================================ 5. BLOC CONSEILS (CUSTOM CARDS / FORFAITS) ============================================================ */
#custom-cards { width: 100% !important; margin: 0 auto !important; padding: 10px 20px !important; }

#custom-cards .row { justify-content: center !important; }

#custom-cards .card { border: none !important; border-radius: 25px !important; max-width: 380px !important; margin: 0 auto !important; height: 450px !important; }

#custom-cards .card span[style*="color: #96C942"] { text-shadow: 2px 1px white !important; }

/* ============================================================ 6. MASQUAGE DES TITRES CMS (REPARTIR DE ZÉRO) ============================================================ */
h1.display-3.my-0 { color: #0a76bd; font-family: 'Merriweather Sans'; font-weight: 900; text-transform: uppercase; font-size: 3.5rem; }

hr.title-picture-line { color: #96c942; width: 30rem; }

/* ============================================================ 7. STYLE DES ICÔNES (STRUCTURE UNIQUEMENT) ============================================================ */
.accompagnement_text h3::after { font-family: "bootstrap-icons" !important; display: block !important; text-align: center !important; width: 100% !important; font-size: 2.2rem !important; color: #96c942 !important; margin-top: 15px !important; font-style: normal !important; font-weight: normal !important; }

.col-lg-6.p-0.order-1.order-lg-2.order-xl-2.order-xxl-2.img-services-list { border-radius: 2rem !important; }

.accompagnement_text.position-relative { text-align: center; }

body > main > div.wrapper > div > div.accompagnement_text.position-relative > div.content.position-relative.z-1 > div { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ============================================================ 8. BLOC MAPS ============================================================ */
body > main > div.wrapper > div > div.maps-section.position-relative.bg-sixthColor > div.content-container.position-relative > div > div.col-sm-12.col-lg-6.col-xl-8.map-content > iframe { border-radius: 2rem; }

.maps-section.position-relative.bg-sixthColor { padding: 2rem 4rem; padding-bottom: 8rem; }

#background-fixed-unset { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FSagnj1B60wUkK3tdfpY1xc3BVsl2%2Fimages%2FELEMENT_FOND_MELEC_nhur.webp?alt=media&token=0345eb58-2eb3-44bf-9403-407abaeee3c5); }

.mb-4.text-center.display-6.titles { text-align: left !important; }

body > main > div.wrapper > div > div.maps-section.position-relative.bg-sixthColor > div.content-container.position-relative > div > div.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth > div.mb-4.text-center.display-6.titles > h3 { font-size: 2.5rem; }

.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { width: 45%; }

.col-sm-12.col-lg-6.col-xl-8.map-content { width: 50%; padding-left: 5rem; }

/* ============================================================ 9. RESPONSIVE MOBILE (SMARTPHONES & TABLETTES) ============================================================ */
@media (max-width: 991px) { div#background-fixed-unset { display: none; } .services-melec { background-image: none !important; background-color: #ffffff !important; padding: 50px 15px !important; } #fullHeight .videoTitle h1, #fullHeight .videoTitle h2, #fullHeight .videoTitle h3, #fullHeight .videoTitle .display-6 { font-size: 1.1rem !important; } .col-lg-7.my-0.order-1.order-lg-1, .col-lg-7.my-0.order-1.order-lg-1 * { text-align: center !important; } .row.flex-lg-row-reverse.align-items-center.position-relative.z-1 { padding: 0 15px !important; margin-top: 2rem !important; } #custom-cards .card .btn-light { font-size: 0.8rem !important; padding: 10px 20px !important; } .col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth, .col-sm-12.col-lg-6.col-xl-8.map-content { width: 100% !important; padding-left: 0 !important; } .maps-section.position-relative.bg-sixthColor { padding: 2rem 1rem !important; } a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { padding: 0.6rem 1rem !important; font-size: 0.85rem !important; } hr.title-picture-line { width: 50% !important; margin-left: 0 !important; margin-right: auto !important; } h1.display-3.my-0 { color: #0a76bd; font-family: 'Merriweather Sans'; font-weight: 900; text-transform: uppercase; font-size: 2rem; } hr.title-picture-line { color: #96c942; width: 30rem; } }

/* ============================================================ 10. PAGE CONTACT ============================================================ */
#contact > div.row.align-items-center.g-lg-5.py-5.position-relative > div.col-lg-6.text-center.text-color-sixth > div > h2 { text-shadow: 2px 1px #96c942; }

.row.align-items-center.g-lg-5.py-5.position-relative { margin-top: 3rem; }

button.w-100.btn.btn-outline-dark { color: white !important; border-color: #96c942 !important; background-color: #96c942 !important; text-transform: uppercase; font-family: 'Merriweather Sans', 'Roboto', 'Arial'; font-weight: 900; transition: all 0.3s ease !important; }

button.w-100.btn.btn-outline-dark:hover { border-color: #0976bd !important; background-color: #0976bd !important; }

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