@charset "UTF-8";
@import url(main.css);
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #133948 !important; font-family: Nunito !important; font-weight: 600 !important; }

h3.fw-bold.mb-2.fs-4.text-body-emphasis { color: #133a48 !important; }

ul.d-flex.justify-content-center.flex-wrap.list-unstyled.mt-auto.mx-0 { color: #133a48; }

.bandeau.border-bottom-1.row { background-color: #349b9a; }

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: #133a48 !important; }

ul.dropdown-menu.text-color-fourth.show { background-color: #349b9a !important; }

.page-content { background-attachment: fixed !important; }

.spacer { display: none !important; }

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

/**************** NAVBAR ****************/
#navigation-bar-hide { opacity: 1 !important; top: 0 !important; }

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

.logo_nav { height: 10vh !important; transition: all 0.3s ease; }

.navbar .logo_nav { padding-left: 2rem; }

.navbar { transition: all 0.3s ease; }

.navbar.scrolled { background-color: rgba(252, 252, 252, 0.8) !important; backdrop-filter: blur(1rem); box-shadow: 0 2px 5px rgba(19, 57, 72, 0.2) !important; }

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

.logo_nav:hover { transform: scale(1.025); }

a.grow.button_header { border-radius: 0 !important; padding: 0.75rem 1rem !important; border: 1px solid #FCFCFC !important; background-color: #349B9A !important; color: #FCFCFC !important; transition: all 0.8s ease; position: relative; overflow: hidden; }

a.grow.button_header::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #FCFCFC; transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

a.grow.button_header:hover { transform: scale(1) !important; border: 1px solid #349B9A; color: #349B9A !important; }

a.grow.button_header:hover::after { width: 250%; }

.animated-border-button.scrolled:after { background-color: #349B9A; }

\
.animated-border-button.scrolled span { color: #133948 !important; }

/**************** HERO ****************/
.hero-buttons { display: flex; justify-content: center; align-items: center; gap: 1rem; }

@media screen and (max-width: 992px) { .hero-buttons { flex-direction: column; } }

.hero-button { text-decoration: none; display: inline-block; border-radius: 0 !important; padding: 0.75rem 1rem !important; border: 1px solid #fcfcfc !important; color: #fcfcfc !important; transition: all 0.8s ease; position: relative; overflow: hidden; cursor: pointer; font-size: 1.5rem; }

.hero2 .hero-button { font-size: 1rem; }

.hero-button::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #349B9A; transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

.hero-button:hover { transform: scale(1) !important; border: 1px solid #349B9A; color: #fcfcfc !important; }

.hero-button:hover::after { width: 250%; }

div#fullHeight { clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%); }

/**************** PRESTATIONS ****************/
.prestations { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; padding: 10rem 6rem; background-color: rgba(36, 108, 107, 0.1); clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); }

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

.presta-cards { display: flex; justify-content: center; align-items: center; gap: 2rem; width: 100%; }

.presta-card { text-decoration: none; color: #fcfcfc; display: block; background-size: cover !important; background-blend-mode: darken; width: calc(25% - 2rem); height: 20rem; border: 1px solid #349B9A; transition: all 0.8s ease; position: relative; overflow: hidden; cursor: pointer; }

.presta-card::after { content: ""; position: absolute; left: -60%; top: 0; width: 0; height: 100%; background-color: rgba(52, 155, 154, 0.8); transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

.presta-card:hover { transform: scale(1); }

.presta-card:hover::after { width: 250%; }

.presta-card-content { width: 100%; height: 100%; padding: 2rem; display: flex; flex-direction: column; justify-content: end; align-items: start; }

@media screen and (max-width: 992px) { .prestations { padding: 8rem 2rem; clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%); } .presta-cards { flex-direction: column; } .presta-card { width: 100%; } }

/**************** CARTE ****************/
.carte-agence { display: flex; align-items: center; justify-content: center; gap: 6rem; position: relative; height: max-content; padding: 6rem; }

.carte-text-container { display: flex; flex-direction: column; justify-content: center; align-items: start; max-width: 100%; gap: 2rem; }

.carte-line { width: 50%; height: 0.4rem; background-color: #246C6B; }

.carte-icon { height: 2rem; }

.carte-link { display: flex; justify-content: start; align-items: center; gap: 1rem; text-decoration: none; color: #246C6B; font-weight: 600; transition: all 0.3s ease; }

.carte-link p { margin-bottom: 0 !important; }

.link-hover:hover { color: #349B9A; }

.carte-map { object-fit: contain; width: 40%; }

.carte-button { border: 1px solid #349B9A; padding: .75rem 1rem; text-decoration: none; color: #349B9A; background-color: #fcfcfc; transition: all 0.8s ease; position: relative; overflow: hidden; }

.carte-button::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #349B9A; transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

.carte-button:hover { transform: scale(1) !important; border: 1px solid #349B9A; color: #FCFCFC !important; }

.carte-button:hover::after { width: 250%; }

@media screen and (max-width: 1200px) { .carte-agence { flex-direction: column; align-items: start; gap: 3rem; padding: 2rem; } .carte-map { width: 80%; margin: auto; } }

/**************** GOOGLE REVIEWS ****************/
.card.p-2.rounded-3.shadow-lg.px-4.border-0.d-flex.justify-content-lg-between { border-radius: 0 !important; border: 1px solid #1D4B5C !important; background: rgba(252, 252, 252, 0.1) !important; backdrop-filter: blur(4px); box-shadow: 0 0 2rem 0 rgba(19, 57, 72, 0.1) !important; color: #133948; margin-top: 4rem; }

.googleReviews-div h3 { font-family: 'Days One'; color: #1D4B5C; }

a#maps-url { border-radius: 0 !important; padding: 0.75rem 1rem !important; border: 1px solid #349B9A !important; color: #349B9A !important; transition: all 0.8s ease; position: relative; overflow: hidden; display: inline-block; }

a#maps-url::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #349B9A; transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

a#maps-url:hover { transform: scale(1) !important; color: #FCFCFC !important; }

a#maps-url:hover::after { width: 250%; }

.googleReviews-div .card.rounded-3.shadow-lg.mx-4.mb-4 { border-radius: 0 !important; border: 1px solid #1D4B5C; background: rgba(252, 252, 252, 0.1); backdrop-filter: blur(8px); box-shadow: 0 0 2rem 0 rgba(19, 57, 72, 0.1) !important; margin-top: 2rem !important; margin-bottom: 2rem !important; }

/**************** PICTOS ****************/
div#pictos { padding: 6rem 0; clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%); }

@media screen and (max-width: 992px) { div#pictos { clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); } }

#Calque_1, #Calque_2, #Calque_3, #Calque_4, #Calque_5 { height: 6rem; width: 100%; }

/**************** À PROPOS ****************/
.container.my-5.col-lg-11.position-relative { margin: 0 !important; width: 100%; max-width: 2000px !important; }

.portrait-video { pointer-events: none; }

.portrait-video::-webkit-media-controls { display: none !important; }

.portrait-video::-webkit-media-controls-enclosure { display: none !important; }

.portrait-video::-webkit-media-controls-panel { display: none !important; }

.portrait-video::-moz-media-controls { display: none !important; }

.portrait-video { width: 100%; height: auto; display: block; }

.row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative { box-shadow: none !important; align-items: center !important; }

.display-5.fw-bold.p-4.pt-lg-2.titles { display: none; }

.lead.mb-4 { margin-bottom: 0 !important; }

/**************** BLOC SEO ****************/
.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative, .mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { border-radius: 0 !important; border: 1px solid #1D4B5C; background: rgba(252, 252, 252, 0.1); backdrop-filter: blur(8px); box-shadow: 0 0 2rem 0 rgba(19, 57, 72, 0.2) !important; }

.first-activity-div .card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg, .second-activity-div .card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg, .third-activity-div .card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { border-radius: 0 !important; box-shadow: none !important; }

/**************** HERO PAGES SECONDAIRES ****************/
.hero2 { width: 100%; height: 80vh; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

.hero-overlay { width: 100%; height: 100%; background-color: rgba(52, 155, 154, 0.2); backdrop-filter: blur(2rem) saturate(0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center !important; gap: 1rem; padding: 0 20%; }

@media screen and (max-width: 992px) { .hero-overlay { padding: 0 2rem; } }

.hero2-arrow { height: 3rem; }

/**************** SERVICES SERRURERIE ****************/
.type { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4rem; padding: 6rem; }

#exterieur.type { padding: 12rem 6rem; background-color: rgba(52, 155, 154, 0.1); clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); }

.type-top { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }

.type-cards { display: flex; justify-content: center; align-items: start; gap: 2rem; width: 100%; }

.type-card { display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(252, 252, 252, 0.2); backdrop-filter: blur(8px); width: 18vw; border: 1px solid #1D4B5C; box-shadow: 0rem 0rem 2rem 0rem rgba(19, 57, 72, 0.2); }

#habitat .type-card, #exterieur .type-card { width: 25vw; }

#habitat .type-card { background: rgba(29, 75, 92, 0.1); }

#exterieur .type-card { background: #fcfcfc; }

#habitat .type-img, #exterieur .type-img { height: 17vw; }

.type-img { height: 18vw; width: 100%; display: flex; justify-content: center; align-items: center; object-fit: cover; }

.type-text { width: calc(100% - 2rem); padding: 1rem; display: flex; flex-direction: column; align-items: start; }

@media screen and (max-width: 992px) { .type { padding: 3rem 2rem; gap: 3rem; } .type-cards { flex-direction: column; gap: 5rem; } .type-card, #habitat .type-card, #exterieur .type-card { flex-direction: column; align-items: center; width: 80vw; margin: auto; } .type-img, #habitat .type-img, #exterieur .type-img { width: 100%; height: 60vw; } }

/**************** CTA ****************/
.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative { backdrop-filter: blur(4px); padding: 10rem 2rem !important; clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%); }

.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative .background-image-div-opacity { background-attachment: scroll !important; }

a.button_homepageDoubleScreen { border-radius: 0 !important; padding: 0.75rem 1rem !important; border: 1px solid #349B9A !important; background-color: #FCFCFC !important; color: #349B9A !important; transition: all 0.8s ease; position: relative; overflow: hidden; }

a.button_homepageDoubleScreen span { transition: all 0.8s ease; }

a.button_homepageDoubleScreen::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #349B9A; transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

a.button_homepageDoubleScreen:hover { transform: scale(1) !important; border: 1px solid #FCFCFC; }

a.button_homepageDoubleScreen:hover span { color: #FCFCFC !important; }

a.button_homepageDoubleScreen:hover::after { width: 250%; }

#clear a.button_homepageDoubleScreen, #clear2 a.button_homepageDoubleScreen { border-radius: 0 !important; padding: 0.75rem 1rem !important; border: 1px solid #349B9A !important; background-color: transparent !important; color: #349B9A !important; transition: all 0.8s ease; position: relative; overflow: hidden; }

#clear a.button_homepageDoubleScreen span, #clear2 a.button_homepageDoubleScreen span { transition: all 0.8s ease; }

#clear a.button_homepageDoubleScreen::after, #clear2 a.button_homepageDoubleScreen::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #349B9A; transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

#clear a.button_homepageDoubleScreen:hover, #clear2 a.button_homepageDoubleScreen:hover { transform: scale(1) !important; border: 1px solid #349B9A; }

#clear a.button_homepageDoubleScreen:hover span, #clear2 a.button_homepageDoubleScreen:hover span { color: #FCFCFC !important; }

#clear a.button_homepageDoubleScreen:hover::after, #clear2 a.button_homepageDoubleScreen:hover::after { width: 250%; }

div#clear, div#clear2 { padding: 4rem 2rem !important; clip-path: none !important; backdrop-filter: none; }

/**************** MENUISERIE ****************/
#none { display: none; }

div#parquet, div#verriere { margin: 0 !important; width: 100%; border-radius: 0 !important; padding: 10rem 2rem !important; clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); background-color: rgba(52, 155, 154, 0.1) !important; }

div#cloison, div#porte { margin: 0 !important; width: 100%; border-radius: 0 !important; box-shadow: none !important; }

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

::marker { color: #246C6B; }

img.d-block.mx-lg-auto.img-fluid { box-shadow: 0 0 2rem 0 rgba(19, 57, 72, 0.3); object-fit: cover; width: 35vw; height: 25vw; }

@media screen and (max-width: 992px) { img.d-block.mx-lg-auto.img-fluid { width: 80vw; height: 60vw; } }

#parquet img.d-block.mx-lg-auto.img-fluid, #verriere img.d-block.mx-lg-auto.img-fluid { border: 1px solid #fcfcfc; }

#cloison img.d-block.mx-lg-auto.img-fluid, #porte img.d-block.mx-lg-auto.img-fluid { border: 1px solid #349B9A; }

/**************** MIROITERIE ****************/
#miroiterie.container.my-5.col-lg-11.photoText-div { margin: 0 !important; width: 100% !important; max-width: 2000px; padding: 0 6rem; }

@media screen and (max-width: 992px) { #miroiterie.container.my-5.col-lg-11.photoText-div { padding: 2rem; } }

#miroiterie .row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative.bg-primaryColor.text-color-primary { align-items: center; gap: 2rem; }

#miroiterie .col-lg-6.p-3.p-lg-4.pt-lg-2.position-relative.z-1 { width: 60%; }

#miroiterie .col-lg-5.offset-lg-1.p-0.m-2.overflow-hidden.position-relative.z-1 { width: 31%; box-shadow: 0 0 2rem 0 rgba(19, 57, 72, 0.2) !important; border: 1px solid #349B9A; }

/**************** GALERIE RÉALISATIONS ****************/
.realisations-section { background: transparent; padding: 60px 20px; }

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

.realisations-main-title { text-align: center; font-size: 2.8rem; color: #133948; margin-bottom: 32px; font-family: 'Days One', Arial, sans-serif; }

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

.filter-btn { background: transparent; border: 1px solid #349B9A; color: #349B9A; font-size: 1.1rem; padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; transition: all 0.8s ease; position: relative; overflow: hidden; display: inline-block; }

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

.filter-btn::after { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: rgba(52, 155, 154, 0.5); transform: skewX(45deg); z-index: -1; transition: width 0.8s ease; }

.filter-btn:hover { transform: scale(1) !important; border: 1px solid #349B9A; color: #fcfcfc; }

.filter-btn:hover::after { width: 250%; }

.filter-btn.active { background: #349B9A; color: #fcfcfc; border: 1px solid #349B9A; }

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

.realisation-card { overflow: hidden; box-shadow: 0 0 1rem 0 rgba(19, 57, 72, 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(29, 75, 92, 0.8); align-items: center; justify-content: center; }

.modal-content { max-width: 1000px; max-height: 70vh; width: auto; height: auto; border-radius: 0 !important; background: #fcfcfc; }

.modal-close { position: absolute; top: 24px; right: 32px; color: #fcfcfc; font-size: 36px; font-weight: bold; cursor: pointer; z-index: 1100; transition: all 0.3s ease; }

.modal-close:hover { color: #349B9A; }

@media (max-width: 900px) { .filter-tabs { gap: 8px; font-size: 0.9rem; } .filter-btn { font-size: 1rem; } .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%; } }

/**************** CONTACT ****************/
div#contact { padding: 6rem 2rem 10rem 2rem !important; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }

form#formContact { border-radius: 0 !important; box-shadow: 0 0 2rem 0 rgba(19, 57, 72, 0.3) !important; }

#contact .col-lg-6.text-center.text-color-sixth { text-align: left !important; padding-left: 6rem; }

@media screen and (max-width: 992px) { #contact .col-lg-6.text-center.text-color-sixth { padding-left: 1.75rem; } }

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

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

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

.img-wrapper { position: relative; height: 100%; clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%); margin-top: 15px; }

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

.img-overlay { background: rgba(19, 57, 72, 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(19, 57, 72, 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; }

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