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

#navigation-bar-hide { opacity: 1 !important; top: 0 !important; }

strong { font-weight: 800 !important; }

/*-------------------------------------------------------Ajustements SEO------------------------------------------------------*/
.first-banner-seo-page .background-image-div-opacity { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2FBannieres_mpqm.webp?alt=media&token=82643abb-5197-4f92-836d-5d8d548cf8be) !important; opacity: 1 !important; }

nav .dropdown { display: none; }

div#custom-cards .logo_nav { content: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2F65843376a2e46_images_medium_3rup.webp") !important; }

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

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

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

#introduction .col-lg-7, #nos-services .col-lg-7, #serrurerie .col-lg-7, #vitrerie .col-lg-7, #porte .col-lg-7, #portail .col-lg-7, #renovation .col-lg-7, #amenagement .col-lg-7, #entretien .col-lg-7, #toiture .col-lg-7, #facade .col-lg-7 { position: relative; background-color: black; border-radius: 20px; padding: 50px; }

#introduction .titles, #introduction .lead, #nos-services .titles, #nos-services .lead, #serrurerie .titles, #serrurerie .lead, #vitrerie .titles, #vitrerie .lead, #porte .titles, #porte .lead, #portail .titles, #portail .lead, #renovation .titles, #renovation .lead, #amenagement .titles, #amenagement .lead, #entretien .titles, #entretien .lead, #toiture .titles, #toiture .lead, #facade .titles, #facade .lead { position: relative; z-index: 5; }

#introduction .col-lg-7::before, #nos-services .col-lg-7::before, #serrurerie .col-lg-7::before, #vitrerie .col-lg-7::before, #porte .col-lg-7::before, #portail .col-lg-7::before, #renovation .col-lg-7::before, #amenagement .col-lg-7::before, #entretien .col-lg-7::before, #toiture .col-lg-7::before, #facade .col-lg-7::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 600px; height: 700px; background-size: contain; background-repeat: no-repeat; background-position: center; }

#introduction .col-lg-7::before, #serrurerie .col-lg-7::before, #porte .col-lg-7::before, #renovation .col-lg-7::before, #entretien .col-lg-7::before { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2FParagraphe_3_cakt.webp); }

#nos-services .col-lg-7::before, #vitrerie .col-lg-7::before, #portail .col-lg-7::before, #amenagement .col-lg-7::before, #facade .col-lg-7::before { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2FParagraphe_4_atbf.webp); }

#nos-services ul { color: white; }

/*-----------------------------Avis GOOGLE--------------------------------------------*/
.googleReviews-div .container .card { background-color: black; color: white; }

/*----------------------------------------------Bannière accueil----------------*/
.carousel-homepage div.sliderLogoContainer { width: 20vw !important; }

.carousel-homepage .titleText { letter-spacing: normal !important; text-align: left !important; margin-top: 0 !important; }

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

/*------------------Galerie images--------------------------------------------------------*/
#myGallery img { border-radius: 30px; }

/*-----------------------------------------------------AVANT APRES--------------------------------*/
.image-before-after-container { border-radius: 30px; }

.before-after-images-column { min-height: 600px !important; }

/*----------------------------------Bannière vidéo------------------------------------*/
.video-background-holder { height: 80vh !important; }

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

.videoTitle .titleText { letter-spacing: normal !important; text-align: left !important; margin-top: 0 !important; width: 80% !important; }

.video-background-content { width: 100vw !important; max-width: none !important; }

.videoTitle { width: 80% !important; max-width: none !important; }

/*--------------------------------------Bannière CTA--------------------------*/
.cta_banner { min-height: 450px; }

#entete .content { width: 80% !important; text-align: left; }

/*---------------------Boutons-------------------------*/
:root { --glow-hue: 222deg; --shadow-hue: 180deg; --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
  ); --spring-duration: 1.33s; }

@property --shimmer { syntax: "<angle>";
  inherits: false;
  initial-value: 33deg; }

@keyframes shimmer { 0% { --shimmer: 0deg; }
  100% { --shimmer: 360deg; } }

@keyframes shine { 0% { opacity: 0; }
  15% { opacity: 1; }
  55% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes text { 0% { background-position: 100% center; }
  100% { background-position: -100% center; } }

button { background-color: #4A9AEA; padding: 0.8em 1.2em; position: relative; isolation: isolate; border-radius: 0.66em !important; scale: 1; transition: all var(--spring-duration) var(--spring-easing); border: none; outline: none; }

button:hover:not(:active), button.active { transition-duration: calc(var(--spring-duration) * 0.5); scale: 1.1; box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 0 0 transparent; }

button:active { scale: 1.1; transition-duration: calc(var(--spring-duration) * 0.5); }

.shimmer { position: absolute; inset: -40px; border-radius: inherit; mask-image: conic-gradient(from var(--shimmer, 0deg), transparent 0%, transparent 10%, black 36%, black 45%, transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%); mask-size: cover; mix-blend-mode: plus-lighter; animation: shimmer 1.5s linear infinite both; }

button:hover .shimmer::before, button:hover .shimmer::after, button.active .shimmer::before, button.active .shimmer::after { opacity: 1; animation: shine 1.2s ease-in 1 forwards; }

.shimmer::before, .shimmer::after { transition: all 0.5s ease; opacity: 0; content: ""; border-radius: inherit; position: absolute; mix-blend-mode: color; inset: 40px; pointer-events: none; }

.shimmer::before { box-shadow: 0 0 2px 1px hsl(var(--glow-hue) 30% 85%), 0 0 4px 2px hsl(var(--glow-hue) 30% 70%), 0 0 8px 3px hsl(var(--glow-hue) 50% 65%); z-index: -1; }

.shimmer::after { box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 60% 90%), inset 0 0 2px 1px hsl(var(--glow-hue) 80% 75%); z-index: 2; }

button .text { color: #231c4f; background-clip: text; background-color: var(--bg); background-image: linear-gradient(120deg, transparent, hsla(var(--glow-hue), 100%, 80%, 0.66) 40%, hsla(var(--glow-hue), 100%, 90%, 0.9) 50%, transparent 52%); background-repeat: no-repeat; background-size: 300% 300%; background-position: center 200%; }

button:hover .text, button.active .text { animation: text 0.66s ease-in 1 both; }

a.button_homepageDoubleScreen { transition: background-color 0.5s ease; border-radius: 10px !important; color: white !important; }

.button_homepageScreen { transition: background-color 0.5s ease; border-radius: 10px !important; color: white !important; }

a.grow.button_header { transition: all 0.5s ease; border-radius: 10px !important; color: white !important; font-weight: 700 !important; font-size: 1.3em; }

/*-------------------------------------------Formulaire de contact-----------------------------------------------*/
#contact .titles { font-size: 1.25rem !important; line-height: 1.5 !important; }

#contact .text-center::before { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2FParagraphe_3_cakt.webp); }

#contact .text-center { position: relative; background-color: black; border-radius: 20px; padding: 50px; }

#contact .titles { position: relative; z-index: 5; }

#contact .text-center::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 600px; height: 700px; background-size: contain; background-repeat: no-repeat; background-position: center; }

#contact h2 { margin-bottom: 100px; }

/* --------------------------------------------------------------------Pop up----------------------------------------------*/
:root { --popup-chape-w: 300px; --popup-chape-h: 180px; --popup-chape-brand: #313a40; --popup-chape-black: #121315; --popup-chape-white: #fff; --popup-chape-muted: #cdcdcd; --popup-chape-radius: 10px; --popup-chape-anim-dur: 1000ms; }

.popup-chape { visibility: hidden; opacity: 0; transition: opacity .2s ease; position: fixed; bottom: 20px; right: 20px; width: var(--popup-chape-w); height: var(--popup-chape-h); overflow: hidden; border-radius: var(--popup-chape-radius); box-shadow: -0.5rem 0.5rem 0 0 white; isolation: isolate; background: #000; color: var(--popup-chape-white); z-index: 9999; }

@media (max-width: 819px) { .popup-chape { width: 50vw; height: 180px; } }

.popup-chape__bg { position: absolute; inset: 0; background: center/cover no-repeat url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2Fbanniere_bleue_pb4n.webp"); z-index: 1; }

.popup-chape__content { position: absolute; inset: 0; padding: 16px; z-index: 3; display: grid; align-content: center; gap: 8px; }

.popup-chape__eyebrow { text-transform: uppercase; font-size: 20px; }

@media (max-width: 819px) { .popup-chape__eyebrow { font-size: 16px; } }

.popup-chape__title { font-size: 16px; line-height: 1.2; margin: 0; }

@media (max-width: 819px) { .popup-chape__title { font-size: 15px; } }

.popup-chape__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.popup-chape__btn { font-size: 0.9rem; background-color: #313A40; border-radius: 0.4rem !important; padding: 0.7rem 1rem !important; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4); width: fit-content; height: 52px; white-space: nowrap; text-overflow: ellipsis; align-content: center; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease; /* pour un hover fluide */ text-decoration: none; }

@media (max-width: 819px) { .popup-chape__btn { padding: 0.6rem 0.3rem !important; height: 45px; font-size: 0.7rem; } }

.popup-chape__btn--primary { background: var(--popup-chape-white); color: var(--popup-chape-black); }

.popup-chape__btn--ghost { background: var(--popup-chape-brand); color: var(--popup-chape-white); }

.popup-chape__btn--primary:hover { color: black !important; }

.popup-chape__btn:hover { transform: translateY(-1px); }

.popup-chape__btn:active { transform: translateY(0); }

/* Effet wipe */
.popup-chape__wipe { position: absolute; inset: 0; background: var(--popup-chape-white); z-index: 4; transform-origin: right center; will-change: transform; }

.popup-chape__wipe.animate { animation: popup-chape-wipe var(--popup-chape-anim-dur) ease forwards; }

@keyframes popup-chape-wipe { 0% { transform: scaleX(0); }
  40% { transform: scaleX(1); }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(0);
    transform-origin: left center; } }

/* Apparition du contenu */
.popup-chape.is-visible { visibility: visible; opacity: 1; }

[data-popup-chape-anim] { opacity: 0; transform: translateY(10px); }

.popup-chape__appear { animation: popup-chape-fadeIn .6s ease forwards; animation-delay: 0.6s; }

.popup-chape__appear-2 { animation: popup-chape-fadeIn .6s ease forwards; animation-delay: 0.8s; }

.popup-chape__appear-3 { animation: popup-chape-fadeIn .6s ease forwards; animation-delay: 1s; }

@keyframes popup-chape-fadeIn { to { opacity: 1;
    transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { .popup-chape__wipe.animate { animation: none; } [data-popup-chape-anim] { opacity: 1; transform: none; } }

/*--------------------------Cartes de services Custom----------------------*/
.custom-cards-2 { width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; gap: 20px; justify-content: center; -webkit-justify-content: center; max-width: 1300px; margin-left: auto; margin-right: auto; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FfGvnqLu530aA7sJSM88tpvGS1Yz2%2Fimages%2F587335_3yyp.webp); background-position: left bottom; background-size: 30px; background-repeat: no-repeat; }

.card__img { visibility: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 100px; 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: 12px; border-top-right-radius: 12px; top: 0; }

.custom-card-2 { align-content: end; transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); background-color: #4A9AEA; width: 40%; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); }

.custom-card-2:hover { box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1); transform: scale(1.1, 1.1); }

.card__info { z-index: 2; position: relative; background-color: #4A9AEA; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 16px 24px 24px 24px; }

.card__info p { text-align: center; }

.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 */ } }

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