@charset "UTF-8";
@import url(main.css);
/*-------------------SCROLLING BANNER--------------------------*/
.scrolling-banner { overflow: hidden; white-space: nowrap; width: 100%; background: transparent; border-top: 1.2px solid #8c9eca; border-bottom: 1.2px solid #8c9eca; margin-top: 100px !important; margin-bottom: 100px !important; }

.scrolling-track { display: inline-block; padding: 20px 0; animation: scroll-left 25s linear infinite; }

.scrolling-banner h2 { font-size: 4em; /* taille du texte augmentée */ display: flex; gap: 60px; align-items: center; font-weight: 600 !important; text-transform: uppercase; color: #21459c; line-height: 1.2; }

.scrolling-content { display: inline-flex; align-items: center; gap: 20px; margin-right: 100px; }

.separator-icon { height: 45px; width: auto; vertical-align: middle !important; }

.inline-icon { height: 0.75em; vertical-align: middle; margin: 0em !important; }

.scrolling-link { display: block; text-decoration: none; color: inherit; }

.scrolling-link:hover { cursor: pointer; }

@keyframes scroll-left { 0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); } }

/*-------------------SOMMAIRE--------------------------*/
#section-titres .container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }

.titre-liste a { text-decoration: none; display: block; }

.titre-liste a h2 { text-transform: uppercase; color: #8C9ECA; font-style: italic; font-weight: 600 !important; font-size: 2em; text-align: center; margin: 10px 0 0 0; padding-top: 4px; position: relative; transition: color 0.3s ease; cursor: pointer; }

.titre-liste a h2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; border-top: 1.5px solid #8C9ECA; transition: border-color 0.3s ease; }

.titre-liste a:hover h2 { color: #21459C; }

.titre-liste a:hover h2::before { border-top-color: #21459C; }

/*-------------------Galerie Custom--------------------------*/
#custom-gallery { padding-bottom: 40px !important; }

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

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

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

.img-wrapper img { width: 100%; }

.gallery-title-wrapper { background-color: #8C9ECA; text-align: center; padding: 10px 0; margin-bottom: 0px; }

.gallery-title { color: #21459C; margin: 0; font-size: 2.2em; font-weight: 600 !important; }

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

.img-overlay i { color: #fff; 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 { color: #fff; font-size: 2em; transition: opacity 0.8s; }

#nextButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #nextButton { font-size: 3em; } }

#prevButton { color: #fff; font-size: 2em; transition: opacity 0.8s; }

#prevButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #prevButton { font-size: 3em; } }

#exitButton { color: #fff; font-size: 2em; transition: opacity 0.8s; position: absolute; top: 15px; right: 15px; }

#exitButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #exitButton { font-size: 3em; } }

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

/*--------------------STYLE BOUTONS CTA BANNER-----------------*/
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2[href="/contactez-nous-pour-vos-projets-de-menuiserie-metallerie/"] { background-color: #21459C; color: #8C9ECA !important; border: 2px solid #8C9ECA; text-decoration: none; transition: all 0.3s ease; }

/* Effet au survol */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2[href="/contactez-nous-pour-vos-projets-de-menuiserie-metallerie/"]:hover { background-color: #8C9ECA; color: #ffffff !important; }

/*--------------------carousel des pages secondaires-----------------*/
.spacer { display: none; }

#secondaires { height: 0 !important; }

#secondaires + style + #fullHeight { height: 60vh; }

/*----------------------------------------  Shadowbox navbar homepage*/
.navbar { box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); }

/*----------------------------------------  Supprimer bandeau pages secondaires*/
.websitePageTitle-div { display: none !important; }

/*----------------------------------------  Patchwork égal et couleurs */
div.redirectsCards-div > .row > .col { position: relative; overflow: hidden; }

div.redirectsCards-div > .row > .col img { display: block; width: 100%; height: auto; transition: opacity 0.3s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

/* Première image */
div.redirectsCards-div > .row > .col:nth-child(1):hover img { opacity: 0; }

div.redirectsCards-div > .row > .col:nth-child(1):hover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FqZV4g9hCIhck31QzR5XPerUBEc32%2Fimages%2Fmenuiserie_couleurs_bdy0.webp"); background-size: cover; background-position: center; z-index: 1; opacity: 1; transition: opacity 0.3s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

/* Deuxième image */
div.redirectsCards-div > .row > .col:nth-child(2):hover img { opacity: 0; }

div.redirectsCards-div > .row > .col:nth-child(2):hover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FqZV4g9hCIhck31QzR5XPerUBEc32%2Fimages%2Fmetallerie_couleurs_0r0q.webp"); background-size: cover; background-position: center; z-index: 1; opacity: 1; transition: opacity 0.3s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

/* Troisième image */
div.redirectsCards-div > .row > .col:nth-child(3):hover img { opacity: 0; }

div.redirectsCards-div > .row > .col:nth-child(3):hover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FqZV4g9hCIhck31QzR5XPerUBEc32%2Fimages%2Frealisations_couleurs_7oml.webp"); background-size: cover; background-position: center; z-index: 1; opacity: 1; transition: opacity 0.3s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

@media all and (min-width: 990px) { div.row-cols-1 > div.col { width: 33.3333333333% !important; } }

/*  -----------------------------------------------------------------------------Ajout des palmiers----*/
#prez1 h2 { display: flex; }

#prez1 h2::before { content: ""; width: 50px; height: 50px; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FqZV4g9hCIhck31QzR5XPerUBEc32%2Fimages%2Fornement_h2_17i1.webp"); background-size: cover; background-position: center; flex-shrink: 0; /* Empêche l'image de se redimensionner */ }

/*  -----------------------------------------------------------------------------Ajout des palmiers BLANCS----*/
#prez2 h2 { display: flex; }

#prez2 h2::before { content: ""; width: 50px; height: 50px; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FqZV4g9hCIhck31QzR5XPerUBEc32%2Fimages%2Fornement_h22_4u45.webp"); background-size: cover; background-position: center; flex-shrink: 0; /* Empêche l'image de se redimensionner */ }

/*--------------------------------------------------------------------------------- Cards homepage*/
.cards-container { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; padding-top: 10px; padding-bottom: 10px; }

.custom-card { width: 350px; height: 350px; background-color: #F0F0F0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 20px; border: 2px solid #8C9ECA; cursor: pointer; }

.custom-card::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background-color: #8C9ECA; z-index: 1; transition: height 0.6s ease; }

.custom-card:hover::before { height: 100%; }

.custom-card .card-icon { max-width: 60%; max-height: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; z-index: 0; pointer-events: none; transition: opacity 0.4s ease; }

.custom-card:hover .card-icon { opacity: 0; }

.custom-card .card-title { position: relative; color: #21459C; font-size: 42px; font-weight: 600; z-index: 2; text-align: center; transition: opacity 0.4s ease; }

.custom-card:hover .card-title { opacity: 0; }

.hover-content { position: absolute; top: 20px; left: 20px; z-index: 3; color: black; opacity: 0; transform: translateY(50px); transition: opacity 0.2s ease, transform 0.2s ease; }

.custom-card:hover .hover-content { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s; }

.hover-content h5 { font-size: 42px; font-weight: 600; margin: 0 0 10px 0; }

.hover-content p { font-size: 16px; line-height: 1.4; margin: 0; max-width: 300px; }

.card-link { text-decoration: none; display: inline-block; }

/* ------------------------------------------------------------BOUTON DEVIS EN BAS A DROITE */
.btnDevis img { height: 80px; transition: all 0.4s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

/* Style normal */
.btnDevis { position: fixed; bottom: 10px; right: 10px; z-index: 20 !important; }

/* Style HOVER */
.btnDevis:hover img { height: 100px; }

/* ------------------------------------------------------------BOUTON SOMMAIRE*/
.btnSommaire img { height: 50px; transition: all 0.4s cubic-bezier(0.86, 0.01, 0.15, 0.99); }

/* Style normal*/
.btnSommaire { position: fixed; bottom: 110px; right: 23px; z-index: 20 !important; }

/* Style HOVER*/
.btnSommaire:hover img { height: 60px; }

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

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

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

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