@charset "UTF-8";
@import url(main.css);
#accueil { height: 0 !important; }

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

#artipole .fs-5.lead p:last-of-type:not(li p)::after, #contact div.col-lg-6.text-center.text-color-sixth > div > p:nth-child(2)::after { content: ""; display: block; width: 180px; /* À ajuster selon votre design */ height: 80px; /* À ajuster selon votre design */ margin: 20px auto 0; /* espace au-dessus et centrage */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2Flogo-artipole-_7grm.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; }

#plastor .fs-5.lead p:last-of-type:not(li p)::after { content: ""; display: block; width: 180px; /* À ajuster selon votre design */ height: 80px; /* À ajuster selon votre design */ margin: 20px auto 0; /* espace au-dessus et centrage */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2Fplastor_transparence_swku.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; }

#galerie .fs-5.lead p:last-of-type:not(li p)::after { content: ""; display: block; width: 100%; height: 300px; margin: 20px auto 0; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2FBanniere_8_gshu.webp); background-size: contain; background-repeat: no-repeat; background-position: center; }

.spacer { margin-top: 8vh !important; }

/*-------------------------------------------------------------------------------------------Ajustements SEO------------------------------------------*/
.first-activity-div .card h3 a, .second-activity-div .card h3 a, .third-activity-div .card h3 a { color: white !important; -webkit-text-fill-color: white !important; font-weight: 100; letter-spacing: 1px; }

.first-banner-seo-page .background-image-div-opacity { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2FBanniere_5_mof6.webp?alt=media&token=cf13cd0e-a6e2-4ca1-8972-a4b79df1c4de) !important; opacity: 1 !important; }

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

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

/*------------------------------------------------------------------------------ BLOC AGENCES -----------------------------*/
.agences { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4rem; padding: 4rem; }

.agences-address { display: flex; flex-direction: column; gap: 0.5rem !important; }

.agences-cards { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 4rem; width: 90%; }

.agences-card { display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 0.75rem; width: 30%; padding: 2rem; border-radius: 1rem; background-color: white; box-shadow: -0.5rem 0.5rem 0 0 #FF0013; }

.agences-card p { margin-bottom: 0rem !important; }

.agences-line { height: 2px; width: 50%; background-color: #B61622; }

.agences-link { display: flex; align-items: center; justify-content: start; color: black; text-decoration: none; transition: all 0.3s ease; font-weight: 400; }

.agences-link:hover { color: #D02D25; }

.agences-icon { height: 1rem; padding-right: 0.5rem; filter: grayscale(1); }

@media screen and (max-width: 992px) { .agences { padding: 4rem 2rem; gap: 3rem; } .agences-cards { flex-direction: column; gap: 2rem; width: 100%; } .agences-card { width: 100%; } }

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

/*-----------------------------------------------Formulaire de contact---------------------------------------*/
#contact .titles { font-size: 1.25rem !important; line-height: 1.5 !important; width: 80%; margin-left: auto; margin-right: auto; }

#contact div.col-lg-6.text-center.text-color-sixth > div > p:nth-child(1) { background-color: #B61622; color: white; padding: 20px; border-radius: 10px; }

/*--------------------------------------------Ajustements SEO-------------------------------------------*/
.first-activity-div .titles h3, .second-activity-div .titles h3, .third-activity-div .titles h3 { width: 80%; margin-left: 0; font-size: 2rem !important; }

/*---------------------------------------------------Barre de navigation-------------------------------------*/
nav { font-family: 'Lilita One'; text-transform: uppercase; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); }

ul.dropdown-menu { color: black !important; font-family: 'Open Sans'; background-color: white; text-align: center !important; min-width: 220px; margin-top: 20px; }

ul.dropdown-menu .animated-border-button { background-color: transparent; font-size: 0.9rem !important; font-weight: 600; }

.navbar-brand { width: 12vw !important; height: 8vh !important; }

.logo_nav { height: 8vh !important; }

.dropdown-menu[data-bs-popper] { left: auto !important; right: auto !important; }

.navbar-nav li.px-4 { padding-right: 1rem !important; padding-left: 1rem !important; }

/*-----------------------------------------Boutons-----------------------------------------------------*/
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, .filter-btn { display: inline-block !important; transition: all 0.2s ease-in !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; color: #090909 !important; cursor: pointer !important; font-size: 18px !important; border-radius: 0.5em !important; background-color: #e8e8e8 !important; border: 1px solid #e8e8e8 !important; font-weight: 100 !important; letter-spacing: 0.5px; }

a.button_header:active, a.button_homepageScreen:active, a.button_homepageDoubleScreen:active, .filter-btn:active { color: #666 !important; box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff !important; }

a.button_header:before, a.button_homepageScreen:before, a.button_homepageDoubleScreen:before, .filter-btn:before { content: "" !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) scaleY(1) scaleX(1.25) !important; top: 100% !important; width: 140% !important; height: 180% !important; background-color: rgba(0, 0, 0, 0.05) !important; border-radius: 50% !important; display: block !important; transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important; z-index: -1 !important; }

a.button_header:after, a.button_homepageScreen:after, a.button_homepageDoubleScreen:after, .filter-btn:after { content: "" !important; position: absolute !important; left: 55% !important; transform: translateX(-50%) scaleY(1) scaleX(1.45) !important; top: 180% !important; width: 160% !important; height: 190% !important; background-color: #b61622 !important; border-radius: 50% !important; display: block !important; transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important; z-index: -1 !important; }

a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, .filter-btn:hover { color: #ffffff !important; border: 1px solid #b61622 !important; }

a.button_header:hover:before, a.button_homepageScreen:hover:before, a.button_homepageDoubleScreen:hover:before, .filter-btn:hover:before { top: -35% !important; background-color: #b61622 !important; transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important; }

a.button_header:hover:after, a.button_homepageScreen:hover:after, a.button_homepageDoubleScreen:hover:after, .filter-btn:hover:after { top: -45% !important; background-color: #b61622 !important; transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important; }

/*------------------------------------------Bannières CTA----------------------------------------*/
.cta_banner { min-height: 400px; }

.cta_banner .titles::before { content: ''; background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2FLogo_blanc_png_vmoi.webp?alt=media&token=0f296a8f-b7a0-4b66-90e1-234b6beaa995); height: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; margin-left: auto; margin-right: auto; }

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

h3 { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2FBanniere_1_wiws.webp); background-size: 200%; background-position: 0% 0%; font-size: 2rem; font-family: 'Lilita One'; width: fit-content; margin-left: auto; margin-right: auto; }

.mx-auto.col-lg-11.text-color-primary.shadow-lg h4 { background-image: linear-gradient(0deg, #ff0013, #b61622); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; width: fit-content; }

.mx-auto.col-lg-11.text-color-primary.shadow-lg { margin-top: 0 !important; margin-bottom: 0 !important; }

@media (min-width: 1200px) { .h3, h3 { font-size: 2.5rem !important; } }

.row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative:has(.portrait-video) .col-lg-6, .row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative:has(.portrait-video) .col-lg-5 { height: fit-content; }

.portrait-video { border-radius: 15px; }

#artipole h3, #notre-philosophie h3, #introduction h3, #intervention h3, #inverse h3, #plastor h3, #parquet-ancien h3, #galerie h3, #pvc h3, #ciment h3, #beton h3 { width: 80%; margin-left: 0; font-size: 2rem !important; }

#notre-philosophie div.flex-lg-row-reverse, #inverse div.flex-lg-row-reverse { flex-direction: row !important; }

img.d-block.mx-lg-auto.img-fluid { max-height: 550px; }

/*-------------------------------------------------------------------Bloc pictos-----------------------------------------------------------*/
.picto_card { margin: 150px 0; }

.picto_card p { font-size: 1.25rem; font-weight: 300; }

/*--------------------------------------------------------------------Bloc Google------------------------------------------------------------------*/
div.mb-5.googleReviews-div { margin-bottom: 0 !important; padding-bottom: 100px; }

/*------------------------------------------------------------------------Bloc Maps-------------------------------------------------------------------*/
.maps-section { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2Fynr0ZDP8gFaWLFdSpaTaTVxXAT23%2Fimages%2FBanniere_esln.webp); background-size: cover; background-attachment: fixed; background-position: center; padding: 100px 20px; }

.maps-section .content { color: white !important; }

.maps-section iframe { border-radius: 15px !important; }

#mapDiv > div > div.gm-style > div:nth-child(4) > div > div { border-radius: 10px !important; }

/*---------------------------------------------------------------------------------------------------------Bannière vidéo Accueil----------------------------*/
.image-video-logo { width: 30% !important; margin-bottom: 10vh; }

@media only screen and (max-width: 500px) { .image-video-logo { width: 50% !important; } }

.videoTitle { width: 100% !important; }

.video-background-holder { position: relative; /* important pour positionner l'image dedans */ z-index: 1020; }

.side-image { position: absolute; right: 0; top: 65%; width: 18vw; transform: translateY(-50%); z-index: 10; }

.side-image img { max-height: 80vh; /* limite la taille pour ne pas dépasser la vidéo */ width: auto; }

@media (max-width: 1053px) { .side-image { bottom: 5% !important; width: 40vw !important; transform: none !important; } .ms-header__title { font-size: 3rem !important; } .ms-slider__word { font-size: 3rem !important; } }

@media (max-width: 760px) { .side-image { bottom: 5% !important; width: 60vw !important; transform: none !important; } .ms-header__title { font-size: 1.5rem !important; } .ms-slider__word { font-size: 1.5rem !important; } }

/*----------------------------------------------------------------------------------Animation de texte-------------------------------*/
.ms-header { display: flex; align-items: center; justify-content: center; }

.ms-header__title { flex: 1 1 100%; width: 100%; text-align: left; font-size: 3.5rem; color: white; }

.ms-slider { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: middle; mask-image: linear-gradient(transparent, white, white, white, transparent); mask-type: luminance; mask-mode: alpha; }

.ms-slider__words { display: inline-block; margin: 0; padding: 0; list-style: none; animation-name: wordSlider; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 30s; }

.ms-slider__word { display: block; color: white; font-size: 3.5rem; letter-spacing: normal; text-align: left; padding: 2px 2px 2px 10px; }

@keyframes wordSlider { 0%, 9% { transform: translateY(0%); }
  11%, 20% { transform: translateY(-10%); }
  22%, 31% { transform: translateY(-20%); }
  33%, 42% { transform: translateY(-30%); }
  44%, 53% { transform: translateY(-40%); }
  55%, 64% { transform: translateY(-50%); }
  66%, 75% { transform: translateY(-60%); }
  77%, 86% { transform: translateY(-70%); }
  88%, 97% { transform: translateY(-80%); }
  100% { transform: translateY(-90%); } }

@media only screen and (max-width: 775px) { .ms-slider { transform: none; transform-origin: unset; margin-top: 0; } .ms-slider__word { text-align: center; padding: 2px; } .ms-header__title { font-size: 2rem; } }

/*----------------------------------------Séparateurs--------------------------------------------*/
.colour-block { background-color: #e8e8e8; }

.skew-cc { width: 100%; height: 100px; margin-bottom: 100px; background: linear-gradient(to right bottom, #e8e8e8 49%, transparent 50%), linear-gradient(-50deg, transparent 16px, transparent 0); }

.skew-c { width: 100%; height: 100px; background: linear-gradient(to left bottom, transparent 49%, #e8e8e8 50%); }

/*--------------------------------------------------------------------------------------------------Blog card-------------------------------------*/
/*----------------Arrière plan--------------------------*/
.bg-skincare { padding: 100px 0 !important; display: flex; width: 100%; flex-wrap: wrap; justify-content: center; gap: 40px; }

.blog-card { width: 20%; height: 400px; position: relative; color: #fff; top: 20%; right: 0; left: 0; 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: cover; }

.blog-card a { text-decoration: none; transition: all 1s; }

.blog-card .color-overlay { background: #93632ab3; width: 60vw; 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, #37386799); width: 60vw; 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: 70px; }

.blog-card:hover .color-overlay, .blog-card.is-hover .color-overlay { background: #7f1010e0; }

.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 { font-size: 2.5rem; }

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

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

.intro a { color: #ddd; pointer-events: none; text-decoration: 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 { margin-left: auto !important; margin-right: auto !important; font-family: 'Lilita One' !important; }

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

@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; border-radius: 0 !important; } .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: #93632ab3; } .blog-card .title-content { margin-top: 70px; } }

/* -------------------------------------------------------------------------Bloc Partenaires-------------------------------------------------------------------------------- */
.bloc-partenaires { padding: 60px 20px 20px; text-align: center; overflow: visible; position: relative; }

/* --- Slider --- */
.bloc-partenaires-slider { height: 150px; position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; /* au lieu de center */ margin: 100px 0; }

/* Piste qui défile : 2 x 100vw = 200vw */
.bloc-partenaires-track { display: flex; width: max-content; /* laisse le navigateur calculer */ animation: partenaires-scroll 40s linear infinite; }

/* 8 logos = 8 x 12.5vw = 100vw */
.bloc-partenaires-item { flex: 0 0 12.5vw; /* chaque logo occupe 1/8 de la largeur de l'écran */ display: flex; justify-content: center; align-items: center; }

/* Logos */
.bloc-partenaires-item img { max-width: 80%; height: 150px; object-fit: contain; opacity: 1; transition: transform 0.3s ease, opacity 0.3s ease; }

/* --- Animation fluide --- */
@keyframes partenaires-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } }

/* --- Responsive --- */
@media (max-width: 768px) { .bloc-partenaires-header h2 { font-size: 1.8rem; } .bloc-partenaires-slider { height: 120px; } .bloc-partenaires-item img { height: 120px; } }

/*----------------------------------------------------Cartes des services--------------------------------------------------*/
.fd-entete-triple { display: grid; grid-template-columns: repeat(3, 1fr); height: 100vh; overflow: hidden; }

.fd-entete-box { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; text-decoration: none; color: #f1f2ed; transition: transform 0.6s ease, filter 0.4s ease; }

.fd-entete-box:hover { transform: scale(1.02); z-index: 2; filter: brightness(1.1); }

/* --- Superposition bleue --- */
.fd-entete-overlay { position: absolute; inset: 0; background: #93632ab3; transition: background 0.4s ease; }

.fd-entete-box:hover .fd-entete-overlay { background: #7f1010e0; }

/* --- Bloc texte avec fond noir --- */
.fd-entete-content { position: absolute; bottom: 12%; left: 10%; right: 10%; z-index: 2; padding: 20px 25px; text-align: left; }

.fd-entete-content h2 { font-size: 1.9rem; margin-bottom: 8px; }

.fd-entete-content p { margin: 0; color: white; }

/* --- Responsive tablette --- */
@media (max-width: 1024px) { .fd-entete-triple { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .fd-entete-box { flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; } .fd-entete-content { bottom: 10%; left: 6%; right: 6%; padding: 18px 20px; } .fd-entete-content h2 { font-size: 1.9rem; } .fd-entete-content p { font-size: 0.95rem; } }

/* --- Responsive mobile --- */
@media (max-width: 600px) { .fd-entete-triple { display: flex; flex-direction: column; height: auto; overflow: visible; } .fd-entete-box { width: 100%; height: 33.33vh; /* chaque bloc occupe 1/3 de la hauteur de l’écran */ flex: none; } .fd-entete-content { bottom: 10%; left: 5%; right: 5%; padding: 12px 16px; } .fd-entete-content h2 { font-size: 1.4rem; } .fd-entete-content p { font-size: 0.85rem; } }

/*--------------------------------------------------------------------------Galerie photo--------------------------------------*/
.realisations-section { padding: 60px 20px; }

.overlay { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

.filter-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }

.filter-btn { padding: 12px 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 52px; line-height: 1.2; transition: background 0.2s; text-align: center; background-color: white !important; font-family: 'Lilita One'; }

.filter-btn p { margin-bottom: 0 !important; }

.filter-btn.active { background-color: #b61622 !important; color: white !important; }

.realisations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.realisation-card { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; }

.realisation-card:hover { transform: translateY(-4px); }

.realisation-card img { width: 100%; height: 320px; object-fit: cover; display: block; cursor: pointer; }

.realisation-card.hidden { display: none; }

/* Modal pour l’image agrandie */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; }

.modal-content { max-width: 500px; max-height: 70vh; width: auto; height: auto; border-radius: 8px; background: #fff; }

.modal-close { position: absolute; top: 24px; right: 32px; color: #fff; font-size: 36px; font-weight: bold; cursor: pointer; z-index: 1100; }

.modal-close:hover { color: #ffae42; }

@media (max-width: 900px) { .filter-tabs { gap: 8px; font-size: 0.9rem; } .filter-btn { padding: 10px 20px; font-size: 1rem; min-height: 48px; } .realisations-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .realisation-card img { height: 240px; } .modal-content { max-width: 90%; max-height: 90%; } }

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