@charset "UTF-8";
@import url(main.css);
.photoTitleText:has(p:empty) { display: none; }

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

.spacer { display: none; }

footer img.logo_nav { width: 10vw !important; }

div.mb-5 { margin-bottom: 0 !important; }

div.mt-5 { margin-top: 0 !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%2FwNLW2Z5jDCPcDb0zmAfbQIXz8XW2%2Fimages%2F046_2lfh.webp?alt=media&token=d9ad7c0f-86bb-44d4-87d8-e4babb7b548e) !important; }

.first-banner-seo-page { margin-top: 12vh; }

.first-banner-seo-page-title h1 { font-size: 1.8rem; }

a.first-banner-seo-page-button { background-color: white; transition: all 0.5s ease !important; font-weight: normal !important; }

a.first-banner-seo-page-button:hover { background-color: #a80c06; color: white !important; }

#button-seo-page-homepage a.button_homepageDoubleScreen { background-color: #a80c06; color: white !important; transition: all 0.5s ease !important; font-weight: normal !important; }

#logo-seo-page { background-color: #382c23; }

.logo-seo-page { background-color: #382c23; }

div#custom-cards .logo_nav { background-color: #382c23; }

.cta_banner img.logo_nav { background-color: #382c23; }

.phone-number-button { background-color: #a80c06; color: white !important; transition: all 0.5s ease !important; font-weight: normal !important; border-radius: var(--bs-border-radius-pill) !important; }

div.maps-section .content { background-color: #382c23; }

/*-----------------------------------------------Bannière accueil-------------------------------*/
.bd-placeholder-img { height: 70vh !important; }

img.slider-with-features-carousel-logo { height: 9vh !important; }

h1 { font-weight: 400 !important; margin-bottom: 50px !important; }

/*-----------------------------Titres ------------------------*/
#titre { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

#titre .titles h1::before, #titre .titles h1::after, #titre .titles h2::before, #titre .titles h2::after { content: ""; display: inline-block; height: 2px; /* épaisseur de la ligne */ background-color: #a80d07; width: 80px; /* longueur des lignes */ margin: 0 15px; /* espace entre le texte et la ligne */ vertical-align: middle; }

.banner { min-height: 500px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FwNLW2Z5jDCPcDb0zmAfbQIXz8XW2%2Fimages%2FChatGPT_Image_2_oct_2025_11_41_23_2zi5.webp); background-position: center; background-size: cover; background-repeat: no-repeat; margin: 150px 0; }

#titre.banner h2::before, #titre.banner h2::after { background-color: white !important; }

@media screen and (max-width: 1300px) { #titre .titles h1::before, #titre .titles h1::after, #titre .titles h2::before, #titre .titles h2::after { display: none; } }

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

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

#myGallery img { position: relative !important; width: 100% !important; max-width: 400px !important; /* largeur max de chaque vignette */ height: 300px !important; /* hauteur uniforme */ object-fit: cover !important; border-radius: 8px !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; }

/*------------------------Paragraphes----------------------------*/
#titre .lead { width: 80%; margin-left: auto; margin-right: auto; }

img.d-block.mx-lg-auto.img-fluid { object-fit: contain !important; max-height: 300px; }

#intro .col-12.col-sm-8.col-lg-5.my-0.order-2.order-lg-2.order-xl-2.order-xxl-2, #associes .col-12.col-sm-8.col-lg-5.my-0.order-2.order-lg-2.order-xl-2.order-xxl-2 { width: fit-content; }

.row.align-items-center.g-5.py-2.px-4.mt-5.position-relative.z-1 { justify-content: center; }

.presentation + div .mx-auto { background-color: #382c23; border-radius: 30px !important; }

/*------------------------------Barre de navigation-----------------------------------*/
a.navbar-brand { width: 16vw !important; height: 14vh !important; }

img.logo_nav { height: 100%; width: 100%; object-fit: contain !important; }

/*--------------------------------------------------Galerie projets--------------------------------------------------------*/
.galerie-projets { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; margin: 40px auto; overflow: hidden; }

.galerie-projets a { transition: transform 0.3s ease; /* durée + type de transition */ display: inline-block; }

.galerie-projets a:hover { transform: scale(1.1) !important; /* toujours utiliser transform, pas scale seul */ }

.galerie-projets-container { display: flex; gap: 40px; overflow: hidden; scroll-behavior: smooth; width: 80%; }

.galerie-projets-item { flex: 0 0 calc(20% - 26px); /* 5 visibles */ text-align: center; align-content: space-between; }

@media screen and (max-width: 939px) { .galerie-projets-item { flex: 0 0 calc(70% - 26px) !important; } }

.galerie-projets-image img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }

@media screen and (max-width: 939px) { .galerie-projets h3 { font-size: 1rem; } }

.galerie-projets h3 { margin-top: 15px; margin-bottom: 20px; font-size: 1.5rem; width: 80%; margin-left: auto; margin-right: auto; min-height: 60px; }

.galerie-projets-separator { width: 60%; height: 2px; background-color: #A80D07; margin: 10px auto; }

@media screen and (max-width: 939px) { .galerie-projets p { font-size: 0.8rem; } }

.galerie-projets p { margin-bottom: 15px; }

.galerie-projets-arrow { font-size: 2rem; cursor: pointer; user-select: none; color: #A80D07; padding: 10px; }

/*-------------------------------------------------------------------------------------------------------------------------Boutons----------------*/
.d-grid.gap-2.d-sm-flex.justify-content-sm-center a { transition: transform 0.3s ease; /* durée + type de transition */ }

.d-grid.gap-2.d-sm-flex.justify-content-sm-center a:hover { transform: scale(1.1); /* toujours utiliser transform, pas scale seul */ }

.d-grid.gap-2.d-sm-flex.justify-content-sm-center span::before { content: ''; display: block; width: 60px; height: 60px; margin-left: auto; margin-right: auto; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FwNLW2Z5jDCPcDb0zmAfbQIXz8XW2%2Fimages%2Fpeinture_SVG_d2ek.webp); background-size: contain; background-position: center; }

/*------------------------------------------Bouton Fixe en bas à droite------------------------------*/
.btnFixe { position: fixed; bottom: 20px; right: 20px; z-index: 10; width: 5em; transition: width 0.5s ease; }

.btnFixe:hover { width: 6em; transition: width 0.5s ease; }

@media (max-width: 768px) { .btnFixe { width: 3.5em; } .btnFixe:hover { width: 4em; } }

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

div#accueil { height: 0 !important; }

/*----------------------Bloc réseaux---------------------------*/
div.socialsMiroir-div { padding-top: 6rem !important; padding-bottom: 6rem !important; margin: 0 0 150px 0; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FwNLW2Z5jDCPcDb0zmAfbQIXz8XW2%2Fimages%2FChatGPT_Image_2_oct_2025_13_09_13_0yan.webp); background-size: cover; background-position: center; }

.instagram-media-rendered { height: 500px !important; min-height: 500px !important; }

/*---------------------Bannière CTA---------------------*/
div.cta_banner { padding-top: 4rem !important; padding-bottom: 4rem !important; min-height: 500px; }

div.cta_banner div.background-image-div-opacity { background-attachment: scroll !important; }

/* -------------Bloc Pictos-----------------*/
.picto_card { min-height: 500px; align-content: center; }

.picto_card .background-image-div-opacity { opacity: 0.6; }

.svg-picto-card > svg { width: 30% !important; height: 30% !important; }

/*----------------Bloc Maps-------------------------*/
.maps-section .content { color: white !important; }

/*----------------Bloc avis----------------*/
#google-reviews-widget .owl-stage-outer { overflow: visible !important; }

.googleReviews-div .container .card { background-color: #382c07; }

.googleReviews-div .container .card .text-center { color: white; }

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

#contact { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FwNLW2Z5jDCPcDb0zmAfbQIXz8XW2%2Fimages%2FChatGPT_Image_2_oct_2025_13_09_13_0yan.webp); background-size: cover; background-position: center; }

#contact .text-center { color: black !important; }

/*-------------------------------------------Galerie d'images--------------------------*/
#myGallery img { border-radius: 5px; }

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

@media screen and (max-width: 570px) { #custom-gallery { display: none; } }

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

/* Bloc image parfaitement rond */
#custom-gallery .image { position: relative; aspect-ratio: 1 / 1; /* carré automatique */ border-radius: 50%; overflow: hidden; margin: 20px 0; /* plus de width:100% ici → on laisse Bootstrap gérer */ }

/* Wrapper rond */
.img-wrapper { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }

/* Image qui remplit le cercle */
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.1); /* zoom par défaut */ transition: transform 0.5s ease; }

/* Effet interne : dézoom au hover */
.img-wrapper:hover img { transform: scale(1); }

/* Contour blanc interne au hover */
.img-wrapper::after { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 2px solid #fff; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }

.img-wrapper:hover::after { opacity: 1; }

/* Overlay transparent : juste le + */
.img-overlay { background: transparent !important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; border-radius: 50%; transition: opacity 0.3s ease; pointer-events: none; }

.img-wrapper:hover .img-overlay { opacity: 1; }

.img-overlay i { color: #fff; font-size: 3em; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); pointer-events: auto; }

/*---------------------- Lightbox ---------------------*/
#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%; border-radius: 0; /* Lightbox : images normales */ }

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

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

/* Boutons navigation Lightbox */
#nextButton, #prevButton, #exitButton { background-color: #ffffff; /* bouton blanc */ color: #3A3026; /* flèche foncée */ font-size: 1.2em; transition: all 0.3s; border: none; border-radius: 50%; /* bouton rond */ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

#nextButton:hover, #prevButton:hover, #exitButton:hover { background-color: #A80D07; /* bouton rouge au hover */ color: #ffffff; }

@media screen and (min-width: 768px) { #nextButton, #prevButton, #exitButton { font-size: 1.6em; width: 50px; height: 50px; } }

#exitButton { position: absolute; top: 125px; right: 15px; }

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