@charset "UTF-8";
@import url(main.css);
/************************** NAVBAR ****************************/
#navbarSupportedContent > ul > li.dropdown.px-4 > div > a:nth-child(1) { font-weight: 600; text-transform: uppercase !important; }

.animated-border-button:after { background-color: #F5EC19; }

#navbarSupportedContent > div > a { background-color: #f5ec19 !important; color: #180c0c !important; padding: 5px 10px !important; border-radius: 10px !important; border: 2px solid #f5ec19 !important; font-weight: 700; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 0 12px rgba(245, 236, 25, 0.45); }

#navbarSupportedContent > div > a:hover { background-color: transparent !important; color: #f5ec19 !important; transform: translateY(-4px); box-shadow: 0 0 25px rgba(245, 236, 25, 0.8); }

/************************** HERO ****************************/
.carousel-item-homepage img, .first-carousel-img { transform: none !important; transition: none !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; }

.sliderLogoContainer { width: clamp(80px, 11vw, 180px) !important; margin: 0 auto; }

.sliderLogoContainer img, .fondDegradeLogo { width: 100%; height: auto; object-fit: contain !important; }

.bloc-slider-homepage { width: 95% !important; max-width: 1200px !important; }

.titleText { max-width: 1100px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; letter-spacing: 0.06em !important; }

a.button_homepageScreen { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 28px !important; margin-bottom: 18px !important; padding: 14px 30px !important; background: transparent !important; border: 4px solid #f5ec19 !important; border-radius: 12px !important; color: #f5ec19 !important; text-decoration: none !important; text-align: center !important; box-shadow: 0 0 14px rgba(245, 236, 25, 0.28) !important; transition: all 0.3s ease !important; }

a.button_homepageScreen:hover { background: transparent !important; color: #f5ec19 !important; transform: translateY(-4px) !important; box-shadow: 0 0 18px rgba(245, 236, 25, 0.55), 0 0 38px rgba(245, 236, 25, 0.35) !important; }

@media (max-width: 768px) { a.button_homepageScreen { margin-top: 22px !important; margin-bottom: 14px !important; padding: 13px 24px !important; max-width: 90% !important; } }

@media (max-width: 480px) { a.button_homepageScreen { width: auto !important; padding: 12px 20px !important; border-radius: 10px !important; } }

/************************** BANDEAU DECENNALE ****************************/
body > main > div.wrapper > div > div.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative { padding-top: 2rem !important; padding-bottom: 2rem !important; min-height: auto !important; }

@media (max-width: 768px) { body > main > div.wrapper > div > div.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } }

@media (max-width: 480px) { body > main > div.wrapper > div > div.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative { padding-top: 1rem !important; padding-bottom: 1rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } }

/************************** BLOC SERVICE ****************************/
.christo-services-section { position: relative; background: #180c0c; padding: 90px 24px 130px; overflow: hidden; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }

.christo-services-inner { max-width: 1450px; margin: 0 auto; position: relative; z-index: 2; }

.christo-services-heading { max-width: 820px; margin: 0 auto 55px; text-align: center; }

.christo-services-title { margin-bottom: 18px; }

.christo-services-intro { max-width: 760px; margin: 0 auto; }

/* GRID DES CARTES */
.christo-services-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* CARTE */
.christo-service-card { height: 410px; border-radius: 18px; overflow: hidden; position: relative; display: flex; text-decoration: none; transition: transform 0.35s ease, box-shadow 0.35s ease; }

/* IMAGE */
.christo-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* OVERLAY */
.christo-service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.08)); z-index: 1; transition: background 0.35s ease; }

.christo-service-card:hover::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.45)); }

/* CONTENU */
.christo-service-content { position: relative; z-index: 2; width: 100%; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }

.christo-service-title { margin-bottom: 14px; }

/* TEXTE CACHE AU REPOS */
.christo-service-text { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .35s ease, max-height .35s ease; }

/* ICON */
.christo-service-card::before { content: "➜"; position: absolute; top: 24px; right: 24px; width: 64px; height: 64px; border: 3px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: white; z-index: 5; opacity: 0; transform: scale(0.85); transition: opacity .35s ease, transform .35s ease; }

/* HOVER */
.christo-service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35); }

.christo-service-card:hover::before { opacity: 1; transform: scale(1); }

.christo-service-card:hover .christo-service-text { opacity: 1; max-height: 180px; }

/* TABLET */
@media (max-width: 1100px) { .christo-services-container { grid-template-columns: repeat(2, 1fr); } .christo-service-card { height: 390px; } .christo-service-text { opacity: 1; max-height: none; overflow: visible; } .christo-service-card::before { opacity: 1; transform: none; } }

/* MOBILE */
@media (max-width: 700px) { .christo-services-section { padding: 70px 18px 90px; clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%); } .christo-services-container { grid-template-columns: 1fr; gap: 18px; } .christo-service-card { height: 340px; } .christo-service-content { padding: 22px; } .christo-service-card::before { width: 56px; height: 56px; font-size: 24px; top: 18px; right: 18px; } }

/************************** BLOC "POURQUOI CHOISIR Christo Elec" ****************************/
.christo-values-section { position: relative; background: #b80607; padding: 95px 24px 75px; overflow: hidden; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }

.christo-values-inner { max-width: 1180px; margin: 0 auto; }

.christo-values-heading { text-align: center; margin-bottom: 45px; }

.christo-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }

.christo-value-item { position: relative; text-align: center; padding: 26px 28px; }

.christo-value-item:not(:last-child)::after { content: ""; position: absolute; top: 18%; right: 0; width: 2px; height: 64%; background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); border-radius: 20px; }

.christo-value-icon { margin-bottom: 16px; }

.christo-value-title { margin-bottom: 8px; }

.christo-value-text { max-width: 220px; margin: 0 auto; }

@media (max-width: 950px) { .christo-values-section { padding: 85px 20px 65px; clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); } .christo-values-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .christo-value-item:nth-child(2)::after { display: none; } }

@media (max-width: 600px) { .christo-values-section { padding: 70px 18px 55px; clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%); } .christo-values-grid { grid-template-columns: 1fr; gap: 22px; } .christo-value-item { padding: 22px 18px; } .christo-value-item:not(:last-child)::after { top: auto; right: 50%; bottom: -12px; width: 70%; height: 2px; transform: translateX(50%); } }

/************************** BLOC ZONE D'INTERVENTION ****************************/
body > main > div.wrapper > div > section:nth-child(11) { position: relative; overflow: hidden; clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }

/************************** CTA ****************************/
a.button_homepageDoubleScreen p { margin: 0 !important; }

a.button_homepageDoubleScreen { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 28px !important; margin-bottom: 18px !important; padding: 14px 30px !important; background: transparent !important; border: 4px solid #f5ec19 !important; border-radius: 12px !important; color: #f5ec19 !important; text-decoration: none !important; text-align: center !important; box-shadow: 0 0 14px rgba(245, 236, 25, 0.28) !important; transition: all 0.3s ease !important; }

a.button_homepageDoubleScreen:hover { background: transparent !important; color: #f5ec19 !important; transform: translateY(-4px) !important; box-shadow: 0 0 18px rgba(245, 236, 25, 0.55), 0 0 38px rgba(245, 236, 25, 0.35) !important; }

@media (max-width: 768px) { a.button_homepageDoubleScreen { margin-top: 22px !important; margin-bottom: 14px !important; padding: 13px 24px !important; max-width: 90% !important; } }

@media (max-width: 480px) { a.button_homepageDoubleScreen { width: auto !important; padding: 12px 20px !important; border-radius: 10px !important; } }

/***************************************** PAGE PRESTATION *******************************************/
/******************* HERO **********************/
/*#secondaires {
height : 0 !important; 
}*/
#fullHeight { height: 85vh !important; min-height: 85vh !important; }

.spacer { display: none !important; }

/******************* CUSTOM SERVICE **********************/
.christo-intro-section { position: relative; background: #ffffff; padding: 90px 24px 120px; overflow: hidden; }

.christo-intro-section::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 55px; background: #f5ec19; clip-path: polygon(0 100%, 100% 0, 100% 100%); }

.christo-intro-container { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 70px; }

.christo-intro-image { width: 50%; }

.christo-intro-image img { width: 100%; height: 420px; object-fit: cover; border-radius: 18px; display: block; }

.christo-intro-content { width: 50%; }

.christo-intro-icon { width: 55px; height: 55px; object-fit: contain; margin-bottom: 25px; display: block; }

.christo-intro-title { margin-bottom: 22px; }

.christo-intro-description { line-height: 1.7; }

/* Tablette */
@media (max-width: 900px) { .christo-intro-container { flex-direction: column; gap: 40px; } .christo-intro-image, .christo-intro-content { width: 100%; } .christo-intro-image img { height: 350px; } .christo-intro-section { padding: 70px 20px 100px; } }

/* Mobile */
@media (max-width: 600px) { .christo-intro-section { padding: 55px 18px 90px; } .christo-intro-image img { height: 260px; border-radius: 14px; } .christo-intro-icon { width: 45px; height: 45px; margin-bottom: 18px; } .christo-intro-section::after { height: 35px; } }

/******************* CUSTOM SERVICE INVERSE **********************/
.christo-intro-reverse-section { position: relative; background: #ffffff; padding: 90px 24px 120px; overflow: hidden; }

/* Trait jaune oblique inversé */
.christo-intro-reverse-section::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 55px; background: #f5ec19; clip-path: polygon(0 0, 100% 100%, 0 100%); }

.christo-intro-reverse-container { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 70px; }

.christo-intro-reverse-content { width: 50%; }

.christo-intro-reverse-icon { width: 55px; height: 55px; object-fit: contain; margin-bottom: 25px; display: block; }

.christo-intro-reverse-title { margin-bottom: 22px; }

.christo-intro-reverse-description { line-height: 1.7; }

.christo-intro-reverse-image { width: 50%; }

.christo-intro-reverse-image img { width: 100%; height: 420px; object-fit: cover; border-radius: 18px; display: block; }

/* Tablette */
@media (max-width: 900px) { .christo-intro-reverse-container { flex-direction: column; gap: 40px; } .christo-intro-reverse-content, .christo-intro-reverse-image { width: 100%; } .christo-intro-reverse-image img { height: 350px; } .christo-intro-reverse-section { padding: 70px 20px 100px; } }

/* Mobile */
@media (max-width: 600px) { .christo-intro-reverse-section { padding: 55px 18px 90px; } .christo-intro-reverse-image img { height: 260px; border-radius: 14px; } .christo-intro-reverse-icon { width: 45px; height: 45px; margin-bottom: 18px; } .christo-intro-reverse-section::after { height: 35px; } }

/******************* LES SOLUTIONS **********************/
.christo-equipment-section { background: #ffffff; padding: 90px 24px; }

.christo-equipment-container { max-width: 1200px; margin: 0 auto; }

.christo-equipment-heading { text-align: center; margin-bottom: 50px; }

/* GRID */
.christo-equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* CARTE */
.christo-equipment-card { position: relative; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform .3s ease, box-shadow .3s ease; }

.christo-equipment-card:last-child { grid-column: 2; }

.christo-equipment-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15); }

/* IMAGE */
.christo-equipment-card > img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* ICON */
.christo-equipment-icon { position: absolute; top: 190px; left: 25px; width: 58px; height: 58px; background: #f5ec19; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; }

.christo-equipment-icon img { width: 30px; height: 30px; object-fit: contain; }

/* CONTENU */
.christo-equipment-content { padding: 45px 25px 30px; min-height: 150px; }

.christo-equipment-title { margin-bottom: 12px; }

.christo-equipment-text { line-height: 1.5; }

/* TABLETTE */
@media (max-width: 950px) { .christo-equipment-section { padding: 75px 20px; } .christo-equipment-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

@media (max-width: 950px) and (max-width: 950px) { .christo-equipment-card:last-child { grid-column: auto; } }

@media (max-width: 950px) { .christo-equipment-card > img { height: 210px; } .christo-equipment-icon { top: 180px; } }

/* MOBILE */
@media (max-width: 600px) { .christo-equipment-section { padding: 60px 18px; } .christo-equipment-grid { grid-template-columns: 1fr; gap: 20px; } .christo-equipment-card > img { height: 200px; } .christo-equipment-icon { top: 170px; left: 20px; width: 52px; height: 52px; } .christo-equipment-icon img { width: 26px; height: 26px; } .christo-equipment-content { padding: 40px 20px 25px; } }

/* CTA BULLE DEVIS */
#bulle-container { right: 25px !important; bottom: 25px !important; }

#bulle-container .bulle-link { width: 100px !important; height: 100px !important; }

#bulle-container .bulle-image { object-fit: contain; display: block; }

/* Tablette */
@media (max-width: 900px) { #bulle-container { right: 20px !important; bottom: 20px !important; } #bulle-container .bulle-link { width: 90px !important; height: 90px !important; } }

/* Mobile */
@media (max-width: 600px) { #bulle-container { right: 15px !important; bottom: 15px !important; } #bulle-container .bulle-link { width: 75px !important; height: 75px !important; } }

body > main > div.wrapper > div > div:nth-child(5) > div > h2 > strong > span { color: white !important; }

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