@charset "UTF-8";
@import url(main.css);
.spacer { display: none; }

lottie-player.lottie-scroll { display: none; }

html { scroll-behavior: smooth; }

div.rounded-3 { border-radius: 50px !important; }

/*--------------------------------------------Ajustements SEO-------------------------------*/
.first-banner-seo-page .background-image-div-opacity, .bandeau { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F3ASLyC7vZqML6bbAjaGfZPGBYAu2%2Fimages%2FBannieres_et_logo_tjug.webp) !important; background-attachment: fixed; background-position: center; background-size: cover; opacity: 1 !important; }

.maps-section { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F3ASLyC7vZqML6bbAjaGfZPGBYAu2%2Fimages%2FBannieres_et_logo_tjug.webp) !important; background-attachment: fixed; background-position: center; background-size: cover; opacity: 1 !important; padding-top: 5rem !important; padding-bottom: 5rem !important; }

.maps-section .item-content { color: white; font-size: 1.5rem; }

/*------------------------------Menu de nav--------------------------*/
.dropdown-menu div.animated-border-button { background-color: white !important; }

/*----------------------------------------------------Bloc actu------------------------------*/
#news-posts-bloc { margin-top: 150px !important; margin-bottom: 150px !important; }

/*-------------------------------------------------Bloc SEO-----------------------*/
div.second-activity-div { background-color: white !important; }

/*----------------------Contact--------------------*/
#contact { border-radius: 50px !important; }

#contact div.titles { font-size: 1.25rem !important; line-height: 1.5 !important; }

#contact .titles::before { content: ''; background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2F3ASLyC7vZqML6bbAjaGfZPGBYAu2%2Fimages%2FBannieres_et_logo_1_p5hi.webp?alt=media&token=89097ddb-2919-4a3a-b0d7-6785fe41bc25); width: 90%; height: 300px; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)); }

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

#secondaires, #contact-banner { height: 0 !important; }

/*-----------------------------Bannière vidéo-----------------------*/
.h1, h1 { font-size: 1.3rem !important; }

.video-background-overlay { opacity: 0.7 !important; }

#secondaires + style + #fullHeight { height: 70vh; }

/*----------------------------------------------Paragraphes---------------------------------------*/
#text { border-radius: 50px !important; margin-left: auto !important; margin-right: auto !important; }

#text .background-image-div-opacity { backdrop-filter: blur(10px); border-radius: 50px !important; }

#text img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)); }

/*--------------------------------------------------------------------------Timeline icones--------------------------------*/
.timeline-icones-chape { padding: 60px 20px; }

.timeline-container { display: flex; align-items: stretch; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1300px; margin: 0 auto; position: relative; }

.timeline-item { text-align: center; width: 22% !important; opacity: 0; transform: translateY(30px); transition: all 1s ease; display: block; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none !important; border-radius: 30px; }

.accueil .timeline-item:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); z-index: 2; }

.timeline-item.visible { opacity: 1; transform: translateY(0); }

.icon-wrapper { width: 80px; height: 80px; margin: 0 auto 15px auto; }

.icon-wrapper img { width: 100%; height: auto; display: block; }

.timeline-item p { max-width: 200px; margin: 0 auto; }

/* Responsive */
@media (max-width: 768px) { .timeline-container { flex-direction: column; } }

/*-------------------------------------------------------------------------------------------Boutons-----------------------------------------*/
a.button_homepageScreen, a.button_header, a.button_homepageDoubleScreen { appearance: none; background-color: #FFFFFF !important; border-radius: 10px !important; border: 2px solid #4E3C03 !important; box-sizing: border-box; color: #4E3C03 !important; font-weight: normal !important; cursor: pointer; display: inline-block; line-height: 1em; margin: 0; outline: 0; position: relative; text-align: center; text-transform: uppercase; transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1), color 100ms cubic-bezier(0.694, 0, 0.335, 1); vertical-align: baseline; white-space: nowrap; overflow: hidden; z-index: 1; isolation: isolate; padding: 1.2em !important; }

#navbarSupportedContent a.button_header { padding: 1.1em !important; }

a.button_homepageScreen::before, a.button_header::before, a.button_homepageDoubleScreen::before { content: ""; position: absolute; inset: 0; /*------------Couleur de l'effet------------------*/ background: #CDAF81; /*--------------------------------*/ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; pointer-events: none; }

a.button_homepageScreen:hover::before, a.button_header:hover::before, a.button_homepageDoubleScreen:hover::before { /*------------Couleur de l'effet------------------*/ background: #CDAF81; /*-------------------------------------*/ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

a.button_homepageScreen:hover, a.button_header:hover, a.button_homepageDoubleScreen:hover { color: white !important; }

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

.slider-before-after-images { border: 3px solid #212529 !important; background: #212529 !important; }

.bi-chevron-left::before, .bi-chevron-right::before { color: white; }

.image-before-after-container { border-radius: 50px; }

.before-after-images-column { max-height: 40vh !important; }

div.avant-apres + div { margin-left: auto !important; margin-right: auto !important; border-radius: 50px !important; }

/*-------------------------------------------------------------------------------------Beaux titres---------------------------------------*/
#contact-banner + style + div.wrapper-text-effect { margin-top: 6rem; }

.wrapper-text-effect { font-size: 7vmin; height: 2em; width: 90%; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: flex-start; margin-top: -3rem; position: relative; line-height: 1; overflow: visible; z-index: 3; }

.wrapper-text-effect.right { justify-content: flex-end; }

.wrapper-text-effect.invert span { color: black; }

.wrapper-text-effect.invert span::before { -webkit-text-stroke: 0.1em var(--color); }

.wrapper-text-effect span { --color: #CDAF81; font-family: "Cal Sans", sans-serif; font-weight: 700; display: block; position: absolute; color: var(--color); letter-spacing: 0em; }

.wrapper-text-effect span::before, .wrapper-text-effect span::after { content: attr(data-text); display: block; position: relative; padding: 0 .1em; z-index: 1; }

.wrapper-text-effect span::before { position: absolute; -webkit-text-stroke: .1em #212529; z-index: 0; }

.wrapper-text-effect span:first-child { transform: translate(-0.255em, -0.25em); }

.wrapper-text-effect span:last-child { --color: #BA9F75; transform: translate(2.55em, 0.45em); }

.wrapper-text-effect.right span:last-child { transform: translate(-1.3em, 0.45em); }

/*--------------------------Cartes de services Custom----------------------*/
.custom-cards-2 { width: 100%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; max-width: 1500px; margin: 1.5rem auto; }

.card__img { visibility: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 235px; border-top-left-radius: 12px; border-top-right-radius: 12px; }

.card__img--hover { transition: 0.2s all ease-out; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; position: absolute; height: 235px; border-top-left-radius: 50px; border-top-right-radius: 50px; top: 0; }

.custom-card-2 { margin-right: 25px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); background-color: white !important; width: 33.3%; position: relative; border-radius: 50px; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

.custom-card-2:hover { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; transform: scale(1.1, 1.1); }

.card__info { z-index: 2; background-color: transparent !important; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; padding: 16px 24px 24px 24px; backdrop-filter: blur(10px); height: 100%; }

.card__info h3 span { font-size: 1.4rem !important; }

.card__title { margin-top: 5px; margin-bottom: 10px; }

.custom-card-2:hover .card__img--hover { height: 100%; opacity: 0.3; }

.custom-card-2:hover .card__info { background-color: transparent; position: relative; }

.custom-card-2:hover .card__info-hover { opacity: 1; }

@media (max-width: 1024px) { .custom-cards-2 { flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */ } .custom-card-2 { width: 48%; /* Deux cartes par ligne sur tablette */ margin-bottom: 20px; } }

@media (max-width: 768px) { .custom-card-2 { width: 100%; /* Une carte par ligne sur mobile */ margin-right: 0; /* Supprime les marges */ } }

/*-------------------Galerie Custom--------------------------*/
#custom-gallery { padding-top: 40px; }

@media screen and (min-width: 991px) { #custom-gallery { padding: 60px 30px 0 30px; } }

#custom-gallery .image { height: 400px !important; margin: 20px 0; }

.img-wrapper { position: relative; height: 100%; margin-top: 15px; }

.img-wrapper img { width: 100%; }

.img-overlay { border-radius: 50px; background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; }

.img-overlay i { color: #fff; font-size: 3em; }

#overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#overlay img { margin: 0; width: 80%; height: auto; object-fit: contain; padding: 5%; }

@media screen and (min-width: 768px) { #overlay img { width: 60%; } }

@media screen and (min-width: 1200px) { #overlay img { width: 50%; } }

#nextButton { color: #fff; font-size: 2em; transition: opacity 0.8s; }

#nextButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #nextButton { font-size: 3em; } }

#prevButton { color: #fff; font-size: 2em; transition: opacity 0.8s; }

#prevButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #prevButton { font-size: 3em; } }

#exitButton { color: #fff; font-size: 2em; transition: opacity 0.8s; position: absolute; top: 15px; right: 15px; }

#exitButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #exitButton { font-size: 3em; } }

.img-responsive { height: 100% !important; object-fit: cover !important; border-radius: 50px; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

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