@charset "UTF-8";
@import url(main.css);
.spacer { margin-top: 7vh !important; }

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

/*---------------------Bannière vidéo----------------------------------------------*/
.video-background-overlay { opacity: 0 !important; }

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

/*------------------------------------------------------------------------Ajustements SEO------------------------------------------*/
.first-activity-div .card-cover a, .second-activity-div .card-cover a, .third-activity-div .card-cover a { font-weight: 300 !important; }

.first-banner-seo-page .background-image-div-opacity { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2FIMG_3168_c9r0.webp?alt=media&token=b97bf8ab-fe6a-45e6-a5ce-5cec5441f41a") !important; }

.first-banner-seo-page h1 { width: 80%; margin: auto; }

#bandeau-title-seo > .titles::before { content: none !important; border-image: none !important; }

.logo-seo-page { border-radius: 30px; }

#bandeau-title-seo .titles, .bandeauTitre { font-weight: 300 !important; }

#photo-text-seo-page h2.titles, #seo-text-images h2.titles { font-weight: 300 !important; }

#logo-seo-page + .my-5.pb-4 + #contact .text-color-sixth { display: none; }

#logo-seo-page + .my-5 + #contact .col-md-10 { width: 100% !important; }

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

/*-----------------------------------------------Bloc facebook---------------------------------------------*/
.socialsMiroir-div.position-relative > div.row.row-cols-1.g-0.row-cols-lg-2.justify-content-center.position-relative > div.col.d-flex.justify-content-center.align-items-center.order-lg-2.order-1 { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2Ffonds_paragraphes_2_s8fn.webp); background-size: cover; background-position: center; }

.socialsMiroir-div .text-center { box-shadow: -1px 15px 30px -12px #202020; border-radius: 10px !important; background-color: #000000b3 !important; width: 80%; padding: 50px; font-size: 1.25rem !important; line-height: 1.5 !important; }

/*--------------------------------------------------Paragraphes----------------------------------------*/
.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { border-radius: 10px !important; }

.first-activity-div, .second-activity-div, .third-activity-div { background: lightgrey !important; }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative .background-image-div-opacity { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2Ffonds_paragraphes_tqoz.webp?alt=media&token=2afc9ad8-e684-4801-9a45-9eec60f9101b) !important; background-size: cover; background-position: center; border-radius: 10px !important; opacity: 0; transition: opacity 0.5s ease; filter: brightness(0.8); }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative:hover .background-image-div-opacity { opacity: 0.5; }

img.d-block.mx-lg-auto.img-fluid { aspect-ratio: 1 / 1; object-fit: cover; max-height: 450px; border-radius: 15px; filter: brightness(0.6); transition: all 0.8s ease; }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative:hover .img-fluid { filter: none; scale: 1.04; }

.row.align-items-center.g-5.py-2.px-4.mt-5.position-relative.z-1 { margin-top: 0 !important; }

.photoTitleText .titles { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 12px 28px 12px 20px; background: white; border-radius: 0 16px 16px 0; border-left: 7px solid transparent; border-image: linear-gradient(180deg, #FFD75E, #FFB800) 1; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.08); }

.photoTitleText .titles::before { content: ""; width: 36px; height: 36px; flex-shrink: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2FSVG_1_aba7.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; }

.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles::after, #fullHeight .titles::after, #fullHeight .titles::before, .socialsMiroir-div .titles::before, .socialsMiroir-div .titles::after, #contact .titles::before, #contact .titles::after { content: none; }

div.row.align-items-center.g-5.py-2.px-4.mt-5.position-relative.z-1 > div.col-lg-7.my-0.order-1.order-lg-1.order-xl-1.order-xxl-1 > div.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 12px 28px 12px 20px; background: white; border-radius: 0 16px 16px 0; border-left: 7px solid transparent; border-image: linear-gradient(180deg, #cb3e12, #cb3e12) 1; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.08); }

div.row.align-items-center.g-5.py-2.px-4.mt-5.position-relative.z-1 > div.col-lg-7.my-0.order-1.order-lg-1.order-xl-1.order-xxl-1 > div.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles h2 { margin-bottom: 0 !important; }

div.row.align-items-center.g-5.py-2.px-4.mt-5.position-relative.z-1 > div.col-lg-7.my-0.order-1.order-lg-1.order-xl-1.order-xxl-1 > div.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles::before { content: ""; width: 36px; height: 36px; flex-shrink: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2FSVG_1_aba7.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; }

/*--------------------------------Nouveau menu---------------------------*/
#nos-prestations .row.g-3 { margin-bottom: 20px; }

.card-custom { position: relative; height: 50vh; overflow: hidden; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.card-custom:hover { transform: translateY(-5px); }

.card-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; position: relative; z-index: 3; }

.card-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; z-index: 0; overflow: hidden; }

.card-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); opacity: 0.3; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; }

.card-custom:hover .card-bg { transform: scale(1.05); }

.card-custom:hover .card-bg::before { opacity: 0.75; }

.card-overlay { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; }

.card-overlay h3 { color: #ffffff; font-size: 2.2rem; margin: 0; }

/*---------------------------Boutons-----------------------------------*/
a.button_header { background: linear-gradient(135deg, #FFF29E 0%, #FFD75E 40%, #FFB800 100%); border-radius: 10px !important; width: fit-content; margin-left: auto !important; margin-right: auto !important; }

/*--------------------------------------------------------Picto card-----------------------------------------------*/
.picto_card { min-height: 350px; align-content: center; margin: 0 auto 50px auto; }

.picto_card .background-image-div-opacity { background-attachment: fixed; background-position: center; }

.picto_card p { color: white; }

/*-----------------------------------------------------------------------------Galeries CMS-----------------------------*/
#myGallery { position: relative !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; height: auto !important; margin-bottom: 150px; }

#myGallery img { position: relative !important; width: 100% !important; max-width: 330px !important; /* largeur max de chaque vignette */ height: 330px !important; /* hauteur uniforme */ object-fit: cover !important; border-radius: 18px !important; margin: 5px !important; transition: transform 0.3s ease !important; left: auto !important; top: auto !important; }

#myGallery img:hover { transform: scale(1.05) !important; z-index: 2 !important; }

/*------------------------------Blog card-------------------------------------*/
.blog-card { max-width: 50vw; 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: 50vw; 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: 50vw; 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: 50px; }

.blog-card:hover .color-overlay, .blog-card.is-hover .color-overlay { background: rgba(64, 64, 70, 0.8); }

.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:hover h3:after, .blog-card.is-hover h3:after { animation: changeLetter 0.3s 1 linear; width: 80%; }

.blog-card h3, h1 { font-size: 1.9em; font-weight: 400; letter-spacing: 1px; margin-bottom: 0; display: inline-block; }

.blog-card h3 a { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); transition: all 0.2s; }

.blog-card h3 a:hover { text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95); }

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

/* Exceptions */
.services-accueil h2:after, .photoTitleText h2:after, div.display-6.fw-bold.text-body-emphasis.lh-1.mb-5.titles > h2:after, .first-activity-div h2:after, .second-activity-div h2:after, .third-activity-div h2:after { content: none !important; }

@keyframes changeLetter { 0% { width: 10%; }
  100% { width: 80%; } }

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

.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-family: 'Cal Sans'; font-size: 1.3rem; padding-left: 17px !important; 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: 700px; background-size: cover !important; } .blog-card .color-overlay { height: 700px; } }

@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; padding: 0 10px !important; } .blog-card .color-overlay { background: rgba(64, 64, 70, 0.8); } .blog-card .title-content { margin-top: 70px; } }

/*-----------------------------------------------Bloc Contact---------------------------------------------*/
#contact > div.row.align-items-center.g-lg-5.py-5.position-relative > div.col-lg-6.text-center.text-color-sixth { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2Ffonds_paragraphes_2_s8fn.webp); background-size: cover; background-position: center; min-height: 500px; align-content: center; }

#contact .titles { box-shadow: -1px 15px 30px -12px #202020; border-radius: 10px !important; background-color: #000000b3 !important; width: 80%; margin-left: auto; margin-right: auto; padding: 50px; font-size: 1.25rem !important; line-height: 1.5 !important; }

/*--------------------------------------------Bloc Avant / Après------------------------------------*/
.image-before-after-container { border-radius: 18px !important; }

.photoTitleText { text-align: left !important; }

.photoTitleText h2 span, .photoTitleText h2 { font-weight: 300 !important; font-size: 2.5rem !important; letter-spacing: 1px !important; max-width: 1000px; text-align: left; margin-bottom: 0 !important; }

@media (max-width: 1400px) { .photoTitleText h2, .photoTitleText h2 span { font-size: 1.7rem !important; } }

/*------Couleur des lignes---*/
.slider-before-after-images:before, .slider-before-after-images:after { background: #cb3e12 !important; }

/*------Couleur du rond---*/
.slider-before-after-images { border: 3px solid #cb3e12 !important; background: #cb3e12 !important; }

/*------Couleur des flêches---*/
.bi-chevron-left::before, .bi-chevron-right::before { color: white; }

/*----------------------------------------------------------------Pulse-------------------------------*/
.svg-picto-card { position: relative; overflow: visible; z-index: 0; }

/* Logo derrière le SVG */
.col:nth-child(1):hover .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2Fpierre_de_pignons_79tu.webp"); }

.col:nth-child(2):hover .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2Fmuret_16ua.webp"); }

.col:nth-child(3):hover .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2Fparpaing_nqq1.webp"); }

.col:nth-child(4):hover .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fq5K0oJwd9LPU8JEQtUAuLvwkyWJ2%2Fimages%2FBeton_erode_bd10.webp"); }

.svg-picto-card::before { content: ""; position: absolute; top: 50%; left: 50%; width: 200px; /* légèrement plus grand que le SVG */ height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center; transform: translate(-50%, -50%) scale(1); z-index: -1; animation: pulseLogo 2.5s ease-in-out infinite; opacity: 0.3; filter: blur(3px); }

/* SVG au-dessus */
.svg-picto-card svg { position: relative; z-index: 1; }

/* Effet "pulse" — respiration douce */
@keyframes pulseLogo { 0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); } }

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