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

/*-------------------------------------------------------------------------bloc image droite---------------------------------------------------------------------------------*/
#bloc-image-droite li { color: #344247; }

#bloc-image-droite-isolation li { color: #ffffff; }

#bloc-image-droite-isolation { scroll-margin-top: 90px; background-color: #344247; }

#bloc-image-droite-peinture li { color: #ffffff; }

#bloc-image-droite-peinture { scroll-margin-top: 90px; background-color: #344247; }

.image-droite { background-color: #ffffff; }

/*------------------------------------------------------------------------bloc image gauche---------------------------------------------------------------------------------*/
#bloc-image-gauche-plâtrerie li { color: #344247; }

#bloc-image-gauche-plâtrerie { scroll-margin-top: 90px; background-color: #ffffff; }

#bloc-image-gauche-finitions li { color: #344247; }

#bloc-image-gauche-finitions { scroll-margin-top: 90px; background-color: #ffffff; }

#bloc-image-gauche-huisseries li { color: #344247; }

#bloc-image-gauche-huisseries { scroll-margin-top: 90px; background-color: #ffffff; }

.image-gauche { background-color: #344247; }

/*------------------------------------------------------------------------augmentation header------------------------------------------------------------------------------*/
.navbar-brand { height: 10vh !important; width: 10vw !important; }

.logo_nav { height: 9vh !important; }

/*-----------------------------------------------------------------------------Bloc maps------------------------------------------------------------------------------------*/
.maps-section .content { color: #344247 !important; }

.maps-section .map-content { padding: 50px; }

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

.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { color: #344247 !important; font-family: 'Mukta', sans-serif; }

/*-----------------------------------------------------------------------------texte footer-----------------------------------------------------------------------------------*/
footer, footer p, footer a, footer li, footer ul, footer i { color: #9B9C5E !important; font-family: 'Mukta', sans-serif; font-size: 1rem; }

footer h5 { color: #9B9C5E !important; font-family: 'Quicksand', sans-serif; font-size: 1.25rem; /* légèrement plus grand pour se démarquer */ }

.text-color-third { color: #9B9C5E !important; font-family: 'Mukta', sans-serif; font-size: 1rem; text-align: left; hyphens: auto; }

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

/*-----------------------------------------------------------------écriture bouton téléphone header-------------------------------------------------------------------------*/
.text-color-fourth { color: #ffffff !important; font-family: 'Mukta', sans-serif; }

/*-----------------------------------------------------------------------surlignement header--------------------------------------------------------------------------------*/
.animated-border-button:after { background-color: #9B9C5E; }

/*------------------------------------------------------------------------effet hover header---------------------------------------------------------------------------------*/
.animated-border-button span { transition: color 0.3s ease; }

.animated-border-button:hover span { color: #9B9C5E !important; }

/*-------------------------------------------------------------------grossissement bouton header---------------------------------------------------------------------------*/
.button-header-telephone { transition: transform 0.3s ease, border 0.3s ease; display: inline-block; font-family: 'Mukta', sans-serif; font-weight: 600 !important; border: 2px solid #ffffff; font-size: 1rem; }

.button-header-telephone:hover { transform: scale(1.1); }

/*-----------------------------------------------------------------------grossissement bouton------------------------------------------------------------------------------*/
.button_homepageDoubleScreen { transition: transform 0.3s ease; display: inline-block; border: 2px solid #ffffff !important; }

.button_homepageDoubleScreen:hover { transform: scale(1.05); }

/* -----------------------------------------------------------------------bouton contact envoyer---------------------------------------------------------------------------- */
button.btn-outline-dark { --bs-btn-color: #ffffff; --bs-btn-border-color: #9B9C5E; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #B1B372; --bs-btn-hover-border-color: #B1B372; --bs-btn-bg: #9B9C5E; --bs-gradient: none; background-color: var(--bs-btn-bg); color: var(--bs-btn-color); }

/* -----------------------------------------------------------------------Flèche retour en haut------------------------------------------------------------------------------ */
/* Bouton Retour en haut */
#back-to-top { position: fixed; bottom: 24px; right: 24px; background-color: #9B9C5E; color: #ffffff !important; font-size: 20px; font-weight: bold !important; line-height: 1; text-align: center; padding: 14px 18px; border-radius: 100%; border: 2px solid #ffffff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; text-decoration: none; opacity: 0; pointer-events: none; z-index: 9999; min-width: 48px; /* 👈 meilleure accessibilité mobile */ min-height: 48px; /* 👈 idem */ transform: scale(0.9); /* 👈 effet “pop” à l’apparition */ transition: opacity .3s ease, transform .3s ease, background-color .3s ease; }

/* Visible après le défilement */
#back-to-top.show { opacity: 1; pointer-events: auto; transform: scale(1); }

/* Effet au survol */
#back-to-top:hover { background-color: #B1B372; transform: translateY(-3px); }

/* Défilement fluide global (même sans JS) */
html { scroll-behavior: smooth; }

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

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

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

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

.img-wrapper img { border-radius: 30px; width: 100%; }

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

.img-overlay i { color: #9B9C5E; 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, #prevButton, #exitButton { background-color: #9B9C5E; color: #fff; font-size: 1.2em; transition: background-color 0.3s; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

#nextButton:hover, #prevButton:hover, #exitButton:hover { background-color: #B1B372; }

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

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

.img-responsive { height: 100% !important; object-fit: cover !important; }

/*------------------------------------------------------------------------------bloc avis------------------------------------------------------------------------------------*/
.batiplaque-section { background: #ffffff; padding: 80px 20px; text-align: center; }

.batiplaque-section h2 { font-size: 38px; font-weight: 700 !important; font-family: 'Quicksand', sans-serif; margin-bottom: 10px; color: #9B9C5E; }

.batiplaque-intro { font-size: 20px; font-family: 'Mukta', sans-serif; color: #344247; margin-bottom: 40px; }

.batiplaque-avis { display: flex; justify-content: center; align-items: stretch; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }

.batiplaque-carte { background: #fff; border-radius: 12px; width: 320px; padding: 30px 20px; box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; justify-content: space-between; text-align: center; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border: 2px solid transparent; min-height: 400px; }

.batiplaque-carte:hover { transform: translateY(-6px); border-color: #9B9C5E !important; box-shadow: 0px 8px 20px rgba(155, 156, 94, 0.45); }

.batiplaque-carte h3 { font-weight: 700 !important; font-size: 18px; font-family: 'Quicksand', sans-serif; color: #344247; margin: 0 0 5px; }

.batiplaque-date { color: #344247; font-size: 14px; font-family: 'Mukta', sans-serif; margin-bottom: 15px; }

.batiplaque-texte { flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: #344247; font-size: 15px; font-family: 'Mukta', sans-serif; line-height: 1.6; margin: 15px 0; padding: 0 5px; }

.batiplaque-stars { color: #9B9C5E !important; font-size: 18px; margin-top: 20px; }

/*-----------------------------------------------------------------------------bloc presta-----------------------------------------------------------------------------------*/
.batiplaque-card { position: relative; height: 45vh; overflow: hidden; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; }

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

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

.batiplaque-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; z-index: 0; overflow: hidden; }

.batiplaque-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; }

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

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

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

.batiplaque-overlay h3 { color: #ffffff; font-size: 2.5rem; font-weight: 600 !important; margin: 0; }

/*-------------------------------------------------------------------------bloc waoo presta---------------------------------------------------------------------------------*/
/* SECTION HERO AVEC IMAGE DE FOND */
.presta5-batiplaque-hero { height: 100vh; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FSBWMiAIHlJdbO5nZ5Q99E3aFSZD2%2Fimages%2FDesign_sans_titre_-_2025-11-24T112622881_swpq.webp") center/cover no-repeat; color: white; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px 20px; text-align: center; position: relative; }

/* FOND FONCÉ TRANSPARENT */
.presta5-batiplaque-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 0; }

.presta5-batiplaque-content { max-width: 900px; margin-top: auto; margin-bottom: auto; position: relative; z-index: 2; }

.presta5-batiplaque-content h1 { font-size: 3rem; font-weight: 800; font-family: 'Quicksand', sans-serif; margin-bottom: 30px; text-transform: uppercase; }

.presta5-batiplaque-content p { font-size: 1.1rem; font-family: 'Mukta', sans-serif; line-height: 1.6; opacity: 0.95; }

/* BARRE DE CARDS */
.presta5-batiplaque-cards { display: flex; width: 100%; gap: 15px; padding: 0 10px 10px 10px; position: relative; z-index: 2; }

/* --- CARDS VERSION ANIMÉE PRO --- */
.presta5-batiplaque-card { flex: 1; background: #ffffff; color: #333; height: 280px; border-radius: 20px; position: relative; overflow: hidden; cursor: pointer; text-decoration: none; box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.16); border: 2px solid transparent; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }

/* Bande beige (titre par défaut) */
.presta5-batiplaque-card span { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 10px; background: #9B9C5E; font-family: 'Mukta', sans-serif; font-size: 1.1rem; font-weight: 600; color: #fff; text-align: center; transition: all 0.35s ease; z-index: 2; }

/* Description (cachée au départ) */
.presta5-batiplaque-desc { position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; background: #9B9C5E; padding: 30px 20px; text-align: center; opacity: 0; z-index: 1; transition: all 0.35s ease; }

.presta5-batiplaque-desc h3 { margin-bottom: 10px; font-size: 1.3rem; font-weight: 700; font-family: 'Mukta', sans-serif; color: #fff; }

.presta5-batiplaque-desc p { font-size: 1rem; line-height: 1.5; font-family: 'Mukta', sans-serif; color: #fff; }

/* Hover */
.presta5-batiplaque-card:hover { transform: translateY(-6px); border-color: #9B9C5E; box-shadow: 0px 8px 20px rgba(155, 156, 94, 0.55); }

.presta5-batiplaque-card:hover span { bottom: 100%; }

.presta5-batiplaque-card:hover .presta5-batiplaque-desc { bottom: 0; opacity: 1; }

/* Icône dans la zone blanche */
.presta5-batiplaque-icon { width: 70px; /* ajuste la taille comme tu veux */ height: auto; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.35s ease; z-index: 1; }

/* L’icône disparaît au hover */
.presta5-batiplaque-card:hover .presta5-batiplaque-icon { opacity: 0; }

/* =========================== 📱 RESPONSIVE (TABLETTE) =========================== */
@media (max-width: 992px) { .presta5-batiplaque-content h1 { font-size: 2.4rem; } .presta5-batiplaque-content p { font-size: 1rem; } .presta5-batiplaque-cards { gap: 10px; } .presta5-batiplaque-card { height: 240px; } .presta5-batiplaque-icon { width: 60px; top: 42%; } }

/* =========================== 📱 RESPONSIVE (SMARTPHONE) =========================== */
@media (max-width: 768px) { /* Réduit la hauteur de la section pour éviter le scroll vertical */ .presta5-batiplaque-hero { height: auto; padding-top: 90px; padding-bottom: 60px; } /* Titre */ .presta5-batiplaque-content h1 { font-size: 2rem; margin-bottom: 20px; } /* Paragraphe */ .presta5-batiplaque-content p { font-size: 0.95rem; line-height: 1.5; } /* Cards en grille 2 colonnes */ .presta5-batiplaque-cards { flex-wrap: wrap; justify-content: center; gap: 20px; } .presta5-batiplaque-card { flex: none; width: 45%; height: 220px; } .presta5-batiplaque-icon { width: 55px; top: 43%; } }

/* =========================== 📱 RESPONSIVE (PETIT MOBILE) =========================== */
@media (max-width: 480px) { .presta5-batiplaque-content h1 { font-size: 1.8rem; } .presta5-batiplaque-content p { font-size: 0.9rem; } /* Cards : 1 colonne pour un max de lisibilité */ .presta5-batiplaque-card { width: 100%; height: 220px; } .presta5-batiplaque-icon { width: 50px; top: 44%; } }

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