@charset "UTF-8";
@import url(main.css);
/*---------------------------------------Bannière d'accueil-------------------------------------*/
.carousel-homepage .titles { letter-spacing: normal; }

.carousel-homepage .fondDegradeLogo { max-width: 300px; }

.carousel-item-homepage img { filter: brightness(65%) !important; }

/*---------------------------Barre de navigation--------------------*/
nav.navbar { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

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

/*---------------------------------------------------Paragraphes----------------------------------------------*/
div.shadow-lg { box-shadow: none !important; }

#terrassement img, #paysagiste img, #entretien img, #elagage img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 52px 44px 48px 40px; }

#terrassement h2, #paysagiste h2, #entretien h2, #elagage h2 { font-size: 2.5rem; }

@media (min-width: 992px) { .col-lg-11 { width: 85% !important; } }

div.col-12.col-sm-8.col-lg-5.my-0.order-2.order-lg-2.order-xl-2.order-xxl-2::before { content: ""; position: absolute; inset: -18px -2px; border: 4px solid #EC2D37; border-radius: 52px 44px 48px 40px; transform: rotate(-1.2deg); z-index: -1; }

div.col-12.col-sm-8.col-lg-5.my-0.order-2.order-lg-2.order-xl-2.order-xxl-2 { position: relative; z-index: 2; }

#terrassement { background-color: black; color: white !important; border-radius: 30px !important; }

#paysagiste { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuIRuZaogKyb7CAnjI0rkNqWcLxG3%2Fimages%2FLibres_de_droit_6_ge21.webp); background-size: cover; background-position: center; background-attachment: fixed; color: white !important; border-radius: 30px !important; }

#entretien { background-color: black; color: white !important; border-radius: 30px !important; }

#elagage { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuIRuZaogKyb7CAnjI0rkNqWcLxG3%2Fimages%2FLibres_de_droit_5_4lvm.webp); background-size: cover; background-position: center; background-attachment: fixed; color: white !important; border-radius: 30px !important; }

/* ----------------------------------------------Bloc Espacement----------------------------------------------*/
.b-bloc-divider { height: 50px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/********************* PRESTATIONS *********************/
.prestations { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 6rem; gap: 3rem; background: black; }

.presta-head { display: flex; flex-direction: column; gap: .5rem; }

.presta-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; width: 100%; }

@media screen and (max-widh: 992px) { .presta-cards { flex-direction: column; } }

.presta-card { width: 100%; height: 100%; padding: 2rem; background: #fafcfe; overflow: hidden; display: flex; flex-direction: column; justify-content: start; align-items: center; position: relative; transition: all 0.5s ease-out; box-shadow: 0 0 1rem rgba(0, 3, 3, 0.1); text-decoration: none; border-radius: 2rem; background-image: linear-gradient(rgba(249, 241, 234, 0.3), rgba(249, 241, 234, 0.3)), url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuIRuZaogKyb7CAnjI0rkNqWcLxG3%2Fimages%2FDesign_sans_titre_1_vgtz.webp"); background-attachment: fixed; background-size: cover; background-position: center; }

.presta-card:hover { box-shadow: 0 0 2rem rgba(0, 3, 3, 0.3); }

.presta-card:hover .presta-overlay { transform: scale(6) translateZ(0); }

.presta-card:hover .presta-circle { border-color: red; background: black; }

.presta-card:hover h3 { color: white; }

.presta-card:active { transform: scale(1) translateZ(0); box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11); }

.presta-card h3 { color: white; margin-top: 30px; z-index: 1000; transition: all 0.5s ease-out; margin-top: 30px; flex-grow: 1; /* pousse toutes les cartes à même hauteur */ display: flex; align-items: center; text-align: center; }

.presta-circle { width: 131px; height: 131px; border-radius: 50%; background: black; border: 2px solid red; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; transition: all 0.5s ease-out; }

.presta-card-icon { height: 50%; z-index: 1; transition: opacity 0.5s ease; }

.presta-circle:after { content: ""; width: 118px; height: 118px; display: block; position: absolute; background: black; border-radius: 50%; transition: opacity 0.5s ease-out; }

.presta-overlay { width: 118px; position: absolute; height: 118px; border-radius: 50%; background: #EC2D37; top: 12%; z-index: 0; transition: transform 0.5s ease-out; }

#contact { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuIRuZaogKyb7CAnjI0rkNqWcLxG3%2Fimages%2FLibres_de_droit_3xqk.webp); padding: 100px 0 !important; background-size: cover; background-attachment: fixed; }

#contact .titles { border-radius: 2rem; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuIRuZaogKyb7CAnjI0rkNqWcLxG3%2Fimages%2FDesign_sans_titre_1_vgtz.webp"); background-attachment: fixed; background-size: cover; background-position: center; width: 80%; margin: auto; padding: 50px; line-height: 1.5 !important; }

#contact .titles::before { content: ''; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuIRuZaogKyb7CAnjI0rkNqWcLxG3%2Fimages%2FLogo_SARL_MTP_35_pcjz.webp"); width: 50%; height: 200px; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; }

form { width: 95% !important; }

/*------------------------------Blog card-------------------------------------*/
.blog-card { max-width: 80vw; width: 100%; height: 500px; position: relative; color: #fff; top: 20%; right: 0; left: 0; margin: 50px auto; overflow: hidden; border-radius: 10px; box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5) !important; text-align: center; transition: all 0.4s; background-size: 100% !important; }

.blog-card a { color: #fff; text-decoration: none; transition: all 0.2s; }

.blog-card .color-overlay { background: rgba(0, 0, 0, 0.5); width: 80vw; height: 500px; position: absolute; z-index: 10; top: 0; left: 0; transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1); }

.blog-card .gradient-overlay { background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%); width: 80vw; height: 500px; position: absolute; top: 350px; left: 0; z-index: 15; }

/* HOVER + HOVER JS */
.blog-card:hover, .blog-card.is-hover { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); }

.blog-card:hover .card-info, .blog-card.is-hover .card-info { opacity: 1; bottom: 100px; }

.blog-card:hover .color-overlay, .blog-card.is-hover .color-overlay { background: #3a3a3aa8; }

.blog-card:hover .title-content, .blog-card.is-hover .title-content { margin-top: 70px; }

.title-content { text-align: center; margin: 170px 0 0 0; position: absolute; z-index: 20; width: 100%; top: 0; left: 0; transition: all 0.6s; }

.blog-card h2:after { content: " "; display: block; width: 100px; height: 2px; margin: 20px auto; border: 0; background: #EC2D37; transition: all 0.2s; }

.intro { width: 100%; margin: 0 auto; color: white; font-style: italic; line-height: 22px; }

.intro a { color: #ddd; pointer-events: none; }

.card-info { box-sizing: border-box; padding: 0; width: 100%; position: absolute; bottom: -40px; left: 0; margin: 0 auto; padding: 0 50px; line-height: 1.5; z-index: 20; opacity: 0; transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1); }

.card-info a { display: block; width: fit-content; margin-left: auto !important; margin-right: auto !important; margin-top: 30px; font-size: 0.8em; background: linear-gradient(135deg, #FFD75E 0%, #FFB800 100%) !important; }

.card-info a:hover { color: #fff; }

.card-info a:hover span { filter: brightness(10); opacity: 1; }

.utility-info { position: absolute; bottom: 0px; left: 0; z-index: 20; width: 100%; text-align: left; }

.utility-info:after { content: " "; background: url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg) center no-repeat; background-size: 30px auto; display: block; opacity: 0.4; position: absolute; bottom: 25px; right: 15px; width: 30px; height: 15px; }

.utility-info a:hover { text-decoration: underline; }

.utility-list { list-style-type: none; margin: 0 0 10px 20px; padding: 0; width: 100%; }

.utility-list li { margin: 0 5px 0 0; padding: 3px 0 15px 0px; display: inline-block; font-size: 0.8em; }

ul.utility-list a { text-decoration: none !important; pointer-events: none; }

.licon { position: relative; width: 23px; height: 15px; display: inline-block; vertical-align: middle; }

.licon:before { content: ""; background: url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg?) -2px -6px no-repeat; background-size: 250px; width: 26px; height: 20px; display: inline-block; vertical-align: middle; position: absolute; top: -3px; left: 0; }

.icon-tag:before { background-position: -33px -6px; }

/*--------------------RESPONSIVE----------------------------*/
@media (max-width: 800px) { .blog-card { height: 600px; background-size: cover !important; } .blog-card .color-overlay { height: 600px; } }

@media (max-width: 1400px) { .blog-card { max-width: 70vw; } .blog-card .color-overlay { width: 70vw; } .blog-card .gradient-overlay { width: 70vw; } }

@media (max-width: 1050px) { .blog-card { max-width: 100vw; } .blog-card .color-overlay { width: 100vw; } .blog-card .gradient-overlay { width: 100vw; } .blog-card { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); } .blog-card .card-info { opacity: 1; bottom: 100px; } .blog-card .color-overlay { background: rgba(64, 64, 70, 0.8); } .blog-card .title-content { margin-top: 70px; } }

/*---------------------------------Boutons-------------------------------------------------*/
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen { position: relative !important; display: inline-block !important; padding: 12px 26px !important; border-radius: 12px !important; text-decoration: none !important; color: white !important; overflow: hidden !important; transition: all 0.35s ease !important; z-index: 1 !important; border: none !important; }

/* Effet vague lumineuse */
a.button_header::before, a.button_homepageScreen::before, a.button_homepageDoubleScreen::before { content: "" !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 120% !important; height: 100% !important; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent) !important; transition: all 0.6s ease !important; z-index: -1 !important; }

a.button_header:hover::before, a.button_homepageScreen:hover::before, a.button_homepageDoubleScreen:hover::before { left: 120% !important; }

/* ===== HEADER BUTTON ===== */
a.button_header { background: linear-gradient(135deg, #d62831, #EC2D37 45%, #b71c25, #8f141b) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important; }

a.button_header:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important; }

/* ===== HOMEPAGE SCREEN BUTTON ===== */
a.button_homepageScreen { background: linear-gradient(135deg, #cf2a33, #EC2D37 45%, #a81820, #7d1117) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important; }

a.button_homepageScreen:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important; }

/* ===== DOUBLE SCREEN BUTTON ===== */
a.button_homepageDoubleScreen { background: linear-gradient(135deg, #c3262f, #EC2D37 45%, #96151c, #6a0f14) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important; }

a.button_homepageDoubleScreen:hover { transform: translateY(-4px) scale(1.04) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important; }

/* Clic réaliste */
a.button_header:active, a.button_homepageScreen:active, a.button_homepageDoubleScreen:active { transform: translateY(1px) scale(0.98) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; }

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