@charset "UTF-8";
@import url(main.css);
div#fullHeight { display: none; }

a:visited { color: white !important; }

div#contact { padding: 50px 0 !important; }

button.w-100.btn.btn-outline-dark { border-radius: 50px; }

.image-before-after-container { border-radius: 20px; }

/*===================== CUSTOM SEO ===================*/
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #A0C4E0 !important; font-family: 'Oswald'; font-size: 1.2rem !important; }

a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2, a.fw-light.grow.button_header.text-color-fourth.rounded-pill.p-2.text-decoration-none.all-activities-button { color: white !important; padding: 12px 20px !important; }

h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { color: black !important; }

a.p-3.fw-bold.fs-6.m-2.phone-number-button.text-decoration-none { background-color: #b8aa30; border-radius: 100px; }

.row.informations-list { background-color: #242020; }

.item-content.mx-5 { color: #ffffff; }

/*===================== CUSTOM BLOC SEO ===================*/
.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 { margin-bottom: 100px !important; padding: 50px 30px !important; }

.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 { padding: 50px 30px !important; }

.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative { padding: 50px 30px !important; }

.black-screen { display: none; }

/*===================== CUSTOM BLOC AVIS GOOGLE ===================*/
.owl-stage { padding: 50px; }

a#maps-url { padding: 14px 25px; color: white !important; }

a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover, a.p-3.fw-bold.fs-6.m-2.phone-number-button.text-decoration-none:hover, a.fw-light.grow.button_header.text-color-fourth.rounded-pill.p-2.text-decoration-none.all-activities-button:hover, a#maps-url:hover { background: #d4c341 !important; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(184, 170, 48, 0.5) !important; }

/*===================== CUSTOM BOUTON COOKIES ===================*/
.cc-nb-main-container { background-color: white; }

/*===================== CUSTOM HEADER ===================*/
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { color: #fff !important; padding: 12px 22px !important; font-weight: 550; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover { background: #d4c341; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(184, 170, 48, 0.5); }

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

@media (max-width: 768px) { a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { margin-bottom: 1rem; } .d-flex.justify-content-center.justify-content-lg-end.text-center.m-1.my-2.my-lg-0 { flex-direction: column; } }

/*======================================================================= HERO D'ACCUEIL ======================================================================*/
.hero-wrapper { background: #ffffff; padding: 0 2rem 2rem 2rem; display: flex; align-items: center; justify-content: center; }

.hero-section { position: relative; width: 100%; max-width: 1800px; height: 800px; border-radius: 0 0 50px 50px; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; }

.hero-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(36, 32, 32, 0.75) 0%, rgba(56, 105, 160, 0.65) 50%, rgba(184, 170, 48, 0.55) 100%); z-index: 2; pointer-events: none; }

.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(1) contrast(1) saturate(1.005); }

.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(36, 32, 32, 0.75) 0%, rgba(56, 105, 160, 0.65) 50%, rgba(184, 170, 48, 0.55) 100%); z-index: 2; pointer-events: none; }

.hero-content { position: relative; z-index: 3; text-align: center; padding: 3rem 2rem; max-width: 900px; }

.logo-container { width: 200px; margin: 0 auto 2rem; animation: fadeInDown 1s ease-out; }

.logo-container img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); }

@keyframes fadeInDown { from { opacity: 0;
    transform: translateY(-30px); }
  to { opacity: 1;
    transform: translateY(0); } }

.hero-title { font-family: 'Oswald', sans-serif; font-weight: 800 !important; font-size: 4.5rem; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 3rem; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); animation: fadeInUp 1s ease-out 0.2s both; line-height: 1.1; }

.hero-description { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 400; color: #ffffff; line-height: 1.7; margin-bottom: 5rem; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); animation: fadeInUp 1s ease-out 0.4s both; }

@keyframes fadeInUp { from { opacity: 0;
    transform: translateY(30px); }
  to { opacity: 1;
    transform: translateY(0); } }

.hero-cta { animation: fadeInUp 1s ease-out 0.6s both; }

.btn-primary { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.1rem; padding: 1.2rem 3.5rem; background: #b8aa30; color: #FFF; border: none; border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; display: inline-block; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.4s ease; }

.btn-primary:hover { background: #d4c341; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(184, 170, 48, 0.5); }

@media (max-width: 768px) { .hero-wrapper { padding: 0.5rem; } .hero-section { height: 600px; border-radius: 15px; } .hero-content { padding: 1.5rem 1rem; display: flex; flex-direction: column; justify-content: center; height: 100%; } .logo-container { width: 150px; margin-bottom: 1.5rem; } .hero-title { font-size: 2rem; margin-bottom: 1rem; line-height: 1.2; } .hero-description { font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.5; } .btn-primary { padding: 0.9rem 2rem; font-size: 0.9rem; } }

@media (max-width: 480px) { .hero-section { height: 550px; } .logo-container { width: 120px; margin-bottom: 1rem; } .hero-title { font-size: 1.6rem; } .hero-description { font-size: 0.9rem; } .btn-primary { padding: 0.8rem 1.5rem; font-size: 0.85rem; } }

/*================================================================ PRESENTATION ==============================================================================*/
.ep-about-wrapper { padding: 12rem 2rem; /* IMAGE DE FOND TRÈS CLAIRE */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FVNC1WPUXn1h5kbeDXN4kaifM2223%2Fimages%2FFond_presentation_2_i7db.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }

.ep-about { max-width: 1600px; margin: 0 auto; }

/* GRID */
.ep-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center; }

/* TEXTE */
.ep-about-content { max-width: 700px; }

.ep-about-eyebrow { font-family: 'Yellowtail', cursive; font-size: 2rem; letter-spacing: 2px; color: #b8aa30; margin-bottom: 1.2rem; display: inline-block; }

.ep-about-title { font-family: 'Oswald', sans-serif; font-size: 3.4rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.15; color: #242020; margin-bottom: 2rem; }

.ep-about-text { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; line-height: 1.9; margin-bottom: 1.6rem; color: #242020; }

.btn-primary { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.1rem; padding: 1.2rem 3.5rem; background: #b8aa30; color: #ffffff; border: none; border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; display: inline-block; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.4s ease; }

.btn-primary:hover { background: #d4c341; color: #FFF; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(184, 170, 48, 0.5); }

/* IMAGE */
.ep-about-visual { border-radius: 50px; overflow: hidden; }

.ep-about-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RESPONSIVE */
@media (max-width: 1024px) { .ep-about-grid { grid-template-columns: 1fr; gap: 3rem; } .ep-about-title { font-size: 2.6rem; } }

@media (max-width: 768px) { .ep-about-wrapper { padding: 6rem 1rem; } .ep-about-title { font-size: 2.2rem; } .btn-primary { width: 100%; text-align: center; } }

/*===================================================================== LES REALISATIONS =========================================================================*/
.ep-realisations { background: #ffffff; padding: 8rem 2rem; }

/* HEADER */
.ep-realisations-header { text-align: center; margin-bottom: 4rem; }

.ep-realisations-eyebrow { font-family: 'Yellowtail', cursive; font-size: 2rem; color: #b8aa30; }

.ep-realisations-title { font-family: 'Oswald', sans-serif; font-size: 3.4rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.5px; color: #242020; }

/* FILTRES */
.ep-realisations-filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 3rem 0 4rem; }

.ep-filtre-btn { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; padding: 0.8rem 1.8rem; border-radius: 50px; border: 2px solid #3869a0; background: transparent; color: #3869a0; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; }

.ep-filtre-btn:hover, .ep-filtre-btn.active { background: #3869a0; color: #ffffff; }

/* GRID */
.ep-realisations-grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }

/* CARD */
.ep-realisation-card { border-radius: 20px; overflow: hidden; cursor: zoom-in; transition: transform 0.4s ease, box-shadow 0.4s ease; }

.ep-realisation-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; display: block; }

.ep-realisation-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); }

.ep-realisation-card:hover img { transform: scale(1.08); }

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

/* NO RESULTS */
.ep-no-results { display: none; text-align: center; margin-top: 4rem; }

.ep-no-results.show { display: block; }

.ep-no-results p { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: #3869a0; }

/* LIGHTBOX */
.ep-lightbox { position: fixed; inset: 0; background: rgba(36, 32, 32, 0.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 9999; }

.ep-lightbox.active { opacity: 1; visibility: visible; }

.ep-lightbox-img { max-width: 90%; max-height: 85%; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }

.ep-lightbox-close { position: absolute; top: 30px; right: 40px; font-size: 3rem; color: #ffffff; cursor: pointer; }

/* RESPONSIVE */
@media (max-width: 768px) { .ep-realisations { padding: 6rem 1rem; } .ep-realisations-title { font-size: 2.4rem; } }

/* ==================================================================== SERVICES SECTION ========================================================================== */
.services-section { background: #ffffff; padding: 4rem 2rem; }

/* HEADER */
.services-header { text-align: center; max-width: 700px; margin: 0 auto 4rem; }

.services-eyebrow { font-family: 'Yellowtail', cursive; font-size: 2rem; letter-spacing: 2px; color: #b8aa30; margin-bottom: 1.2rem; display: inline-block; }

.services-title { font-family: 'Oswald', sans-serif; font-size: 3.4rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.15; color: #242020; margin: 0; }

/* GRID */
.services-grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* CARD LINK */
.service-card { position: relative; height: 550px; overflow: hidden; border-radius: 15px; display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.3s ease; }

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

/* IMAGE */
.service-image { position: absolute; inset: 0; }

.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

.service-card:hover .service-image img { transform: scale(1.1); }

/* OVERLAY */
.service-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 32, 32, 0.3) 0%, rgba(36, 32, 32, 0.8) 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2.5rem; text-align: center; transition: background 0.4s ease; box-sizing: border-box; }

.service-card:hover .service-overlay { background: linear-gradient(180deg, rgba(56, 105, 160, 0.4) 0%, rgba(56, 105, 160, 0.85) 100%); }

/* ICON PNG */
.service-icon { width: 80px; height: 80px; margin: 8rem 0 2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.service-icon img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }

.service-card:hover .service-icon img { transform: scale(1.1); }

/* TITLE */
.service-title { font-family: 'Yellowtail', cursive; font-size: 2.5rem; color: #b8aa30; margin: 0 0 1.5rem; line-height: 1.3; width: 100%; min-height: 6.5rem; display: flex; align-items: center; justify-content: center; }

/* DESCRIPTION */
.service-description { font-family: 'Montserrat', sans-serif; font-size: 1rem; color: #ffffff; line-height: 1.7; margin: 0; width: 100%; padding: 0 1rem; min-height: 5.1rem; }

/* =========================== RESPONSIVE TABLET =========================== */
@media (max-width: 1024px) { .services-section { padding: 3rem 1.5rem; } .services-grid { grid-template-columns: 1fr; gap: 2rem; } .service-card { height: 500px; } .service-overlay { padding: 2rem; justify-content: flex-start; } .service-title { font-size: 2.2rem; min-height: 3.2rem; } .service-description { font-size: 1.05rem; } .service-icon { width: 70px; height: 70px; margin-top: 7rem; } }

/* =========================== RESPONSIVE MOBILE =========================== */
@media (max-width: 768px) { .services-header { margin-bottom: 3rem; } .services-eyebrow { font-size: 1.5rem; margin-bottom: 1rem; } .services-title { font-size: 2.2rem; letter-spacing: 1px; } .services-section { padding: 2rem 1rem; } .services-grid { gap: 1.5rem; } .service-card { height: 500px; } .service-overlay { padding: 2rem 1rem; justify-content: center; } .service-icon { width: 60px; height: 60px; margin: 6rem 0 1.2rem; } .service-title { font-size: 1.6rem; min-height: 2.4rem; margin-bottom: 1rem; } .service-description { font-size: 0.9rem; padding: 0; line-height: 1.6; min-height: 4.8rem; } }

/* =========================== RESPONSIVE SMALL MOBILE =========================== */
@media (max-width: 480px) { .services-eyebrow { font-size: 1.3rem; } .services-title { font-size: 1.8rem; } .service-card { height: 480px; } .service-overlay { padding: 1.5rem 0.8rem; justify-content: flex-start; } .service-icon { margin-top: 5rem; } .service-title { font-size: 1.4rem; min-height: 2rem; } .service-description { font-size: 0.85rem; min-height: 4.25rem; } }

/* ===================================================================== PARTNERS SECTION ======================================================================= */
.partners-section { background: #ffffff; padding: 4rem 2rem; }

/* CONTAINER */
.partners-container { max-width: 1600px; margin: 0 auto; }

/* HEADER */
.partners-header { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; }

.partners-eyebrow { font-family: 'Yellowtail', cursive; font-size: 2rem; color: #b8aa30; margin-bottom: 1rem; display: inline-block; }

.partners-title { font-family: 'Oswald', sans-serif; font-size: 3rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.15; color: #242020; margin: 0; }

/* WRAPPER */
.partners-logos-wrapper { overflow: hidden; position: relative; width: 100%; padding: 1.5rem 0; }

/* SLIDER */
.partners-logos-slider { display: flex; align-items: center; width: fit-content; animation: partners-scroll 90s linear infinite; }

.partners-logos-slider:hover { animation-play-state: paused; }

/* LOGO CARD */
.partners-logo-item { flex: 0 0 auto; width: 180px; height: 100px; background: #ffffff; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin: 0 20px; padding: 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.partners-logo-item img { max-width: 140px; max-height: 60px; object-fit: contain; filter: grayscale(100%); opacity: 0.85; transition: filter 0.3s ease, opacity 0.3s ease; }

.partners-logo-item:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }

.partners-logo-item:hover img { filter: grayscale(0%); opacity: 1; }

/* ANIMATION */
@keyframes partners-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(-80%); } }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1024px) { .partners-title { font-size: 2.4rem; } }

@media (max-width: 768px) { .partners-section { padding: 3rem 1.5rem; } .partners-eyebrow { font-size: 1.4rem; } .partners-title { font-size: 2rem; } .partners-logo-item { width: 160px; height: 90px; margin: 0 15px; } }

@media (max-width: 480px) { .partners-title { font-size: 1.7rem; } .partners-logo-item { width: 140px; height: 80px; margin: 0 12px; } }

/* ================================================================ GALLERY REALISATIONS- ACCUEIL ================================================================= */
.gallery-section { background: #ffffff; padding: 4.5rem 2rem; }

.gallery-container { max-width: 1600px; margin: 0 auto; }

/* GRID */
.gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 260px); gap: 1.5rem; margin-bottom: 3.5rem; }

.gallery-item { position: relative; overflow: hidden; border-radius: 15px; }

/* Image principale */
.gallery-item-large { grid-row: span 2; }

/* Image forcée sous celle de droite */
.gallery-item-bottom { grid-column: 3; grid-row: 2; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* CTA */
.gallery-cta { text-align: center; }

.btn-gallery { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.1rem; padding: 1.2rem 3.5rem; background: #b8aa30; color: #FFF; border: none; border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; display: inline-block; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.4s ease; }

.btn-gallery:hover { background: #d4c341; color: white; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(184, 170, 48, 0.5); }

/* =========================== RESPONSIVE =========================== */
/* Tablettes larges */
@media (max-width: 1200px) { .gallery-grid { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: repeat(2, 240px); gap: 1.2rem; } }

/* Tablettes */
@media (max-width: 1024px) { .gallery-section { padding: 4rem 1.5rem; } .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 1rem; } .gallery-item-large { grid-column: span 2; grid-row: auto; height: 320px; } .gallery-item { height: 240px; } .gallery-item-bottom { grid-column: auto; grid-row: auto; } .btn-gallery { font-size: 1rem; padding: 1.1rem 3rem; } }

/* Mobiles larges */
@media (max-width: 768px) { .gallery-section { padding: 3rem 1.2rem; } .gallery-grid { gap: 0.8rem; margin-bottom: 2.5rem; } .gallery-item-large { height: 280px; } .gallery-item { height: 200px; } .btn-gallery { padding: 1rem 2.5rem; font-size: 0.95rem; letter-spacing: 1px; } }

/* Mobiles */
@media (max-width: 576px) { .gallery-section { padding: 2.5rem 1rem; } .gallery-grid { grid-template-columns: 1fr; gap: 0.75rem; } .gallery-item-large { grid-column: 1; height: 260px; } .gallery-item { height: 220px; } .btn-gallery { padding: 0.9rem 2rem; font-size: 0.85rem; letter-spacing: 0.8px; } }

/* Petits mobiles */
@media (max-width: 400px) { .gallery-section { padding: 2rem 0.8rem; } .gallery-item-large, .gallery-item { height: 200px; } .btn-gallery { padding: 0.85rem 1.8rem; font-size: 0.8rem; } }

/* =================================================================== ZONES D’INTERVENTION =================================================================== */
.zones-bg-section { position: relative; padding: 8rem 2rem; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FVNC1WPUXn1h5kbeDXN4kaifM2223%2Fimages%2FFond_zone_dintervention_1_kg6x.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }

.zones-bg-container { max-width: 1600px; margin: 0 auto; }

/* GRID */
.zones-bg-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }

.zones-bg-eyebrow { font-family: 'Yellowtail', cursive; font-size: 2rem; color: #b8aa30; margin-bottom: 1.5rem; }

.zones-bg-title { font-family: 'Oswald', sans-serif; font-size: 2.6rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.15; color: #242020; margin-bottom: 3rem; }

.zones-bg-text { font-family: 'Montserrat', sans-serif; font-size: 1rem; color: #555; line-height: 1.7; margin: 0; }

/* MAP */
.zones-bg-map { height: 420px; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18); }

.zones-bg-map iframe { width: 100%; height: 100%; border: none; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1024px) { .zones-bg-grid { grid-template-columns: 1fr; } .zones-bg-map { height: 380px; } .zones-bg-content { max-width: 100%; padding: 2.5rem; } }

@media (max-width: 768px) { .zones-bg-section { padding: 4rem 1.5rem; } .zones-bg-title { font-size: 2.1rem; } .zones-bg-map { height: 340px; } }

/* ===================================================================== EN TETE SERVICES ===================================================================== */
.header-image-sols { position: relative; width: 100%; height: 55vh; min-height: 380px; overflow: hidden; background-color: #242020; }

/* Image de fond */
.header-image-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

/* Overlay sombre élégant */
.header-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(36, 32, 32, 0.75) 0%, rgba(56, 105, 160, 0.65) 50%, rgba(184, 170, 48, 0.55) 100%); z-index: 2; pointer-events: none; }

/* Container */
.header-image-container { position: relative; z-index: 2; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 60px; }

/* Logo */
.header-image-logo { display: flex; align-items: center; justify-content: flex-start; }

.header-image-logo img { max-width: 220px; width: 100%; height: auto; }

/* Texte + trait */
.header-image-text-lined { display: flex; align-items: stretch; gap: 30px; }

/* Trait doré */
.header-image-line { width: 4px; background-color: #b8aa30; margin-top: 6px; margin-bottom: 6px; border-radius: 2px; flex-shrink: 0; }

/* Texte */
.header-image-text-content h1 { font-family: 'Oswald', sans-serif; font-weight: 800; font-size: clamp(28px, 5vw, 50px); color: #ffffff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.5rem; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); line-height: 1.1; }

.header-image-text-content p { color: #e6e6e6; font-family: 'Montserrat', sans-serif; font-size: clamp(15px, 2vw, 18px); max-width: 520px; line-height: 1.6; margin: 0; }

/* ============================== RESPONSIVE ============================== */
/* Tablettes */
@media (max-width: 900px) { .header-image-container { grid-template-columns: 1fr; gap: 30px; padding: 30px 20px; justify-items: center; text-align: center; } .header-image-logo { justify-content: center; } .header-image-logo img { max-width: 180px; } .header-image-text-lined { justify-content: center; gap: 20px; } .header-image-text-content { display: flex; flex-direction: column; align-items: center; } .header-image-text-content p { max-width: 100%; } }

/* Mobiles */
@media (max-width: 600px) { .header-image-sols { height: auto; min-height: 500px; padding: 40px 0; } .header-image-container { padding: 20px 15px; gap: 25px; } .header-image-logo img { max-width: 150px; } .header-image-text-lined { flex-direction: column; align-items: center; gap: 15px; } /* Trait horizontal mobile */ .header-image-line { width: 60px; height: 4px; margin: 0; } .header-image-text-content h1 { margin-bottom: 1rem; letter-spacing: 1px; } }

/* Très petits écrans */
@media (max-width: 400px) { .header-image-sols { min-height: 450px; } .header-image-logo img { max-width: 130px; } .header-image-container { padding: 15px 10px; } }

/*============================================================== PRESENTATION DU SERVICE ========================================================================*/
.amenagement-paysager { position: relative; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FVNC1WPUXn1h5kbeDXN4kaifM2223%2Fimages%2FFond_presentation_1_v3ri.webp?alt=media&token=a2a3f217-ab85-4d77-9c1f-5cc4ecc1b964"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 200px 40px; }

/* Overlay pour lisibilité */
.amenagement-paysager::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.5); z-index: 1; }

.amenagement-paysager-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.amenagement-paysager-contenu { position: relative; z-index: 3; }

.amenagement-paysager-surtitre { font-family: 'Yellowtail', cursive; font-size: 2rem; letter-spacing: 2px; color: #b8aa30; margin-bottom: 1.2rem; display: inline-block; }

.amenagement-paysager-titre { font-family: 'Oswald', sans-serif; font-size: 3.4rem; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.15; color: #242020; margin-bottom: 20px; }

.amenagement-paysager-description { font-family: 'PT Serif', serif; font-size: 17px; line-height: 1.8; color: #5c6559; margin-bottom: 30px; }

.amenagement-paysager-liste { list-style: none; padding: 0; margin: 0; }

.amenagement-paysager-liste li { font-family: 'PT Serif', serif; font-size: 16px; color: #5c6559; padding-left: 30px; margin-bottom: 15px; position: relative; line-height: 1.6; }

.amenagement-paysager-liste li::before { content: "✓"; position: absolute; left: 0; color: #3869a0; font-weight: 700 !important; font-size: 20px; }

.amenagement-paysager-images { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.amenagement-paysager-image { border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }

.amenagement-paysager-image.grande { grid-row: span 2; border-radius: 20px; }

.amenagement-paysager-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.amenagement-paysager-image.grande img { height: 500px; }

.amenagement-paysager-image.petite img { height: 240px; }

@media (max-width: 968px) { .amenagement-paysager-container { grid-template-columns: 1fr; gap: 50px; } .amenagement-paysager-titre { font-size: 36px; } .amenagement-paysager-images { grid-template-columns: 1fr; } .amenagement-paysager-image.grande { grid-row: span 1; } .amenagement-paysager-image.grande img, .amenagement-paysager-image.petite img { height: 350px; } }

@media (max-width: 640px) { .amenagement-paysager { padding: 60px 20px; } .amenagement-paysager-titre { font-size: 32px; } .amenagement-paysager-surtitre { font-size: 28px; } .amenagement-paysager-image.grande img, .amenagement-paysager-image.petite img { height: 300px; } }

/*======================================================================== REALISATIONS PAR SERVICES ================================================================*/
.showroom-section { background: #ffffff; padding: 5rem 0; overflow: hidden; position: relative; }

/* GALERIE DÉFILANTE */
.showroom-gallery { display: flex; gap: 24px; animation: showroom-scroll 45s linear infinite; will-change: transform; }

.showroom-gallery:hover { animation-play-state: paused; }

/* ITEM */
.showroom-item { width: 340px; height: 340px; flex-shrink: 0; border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.35s ease, box-shadow 0.35s ease; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }

.showroom-item:hover { transform: translateY(-6px); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14); }

.showroom-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }

.showroom-item:hover img { transform: scale(1.08); }

/* OVERLAY DISCRET AU HOVER */
.showroom-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 32, 32, 0) 0%, rgba(36, 32, 32, 0.35) 100%); opacity: 0; transition: opacity 0.3s ease; }

.showroom-item:hover::after { opacity: 1; }

/* =========================== LIGHTBOX =========================== */
.showroom-lightbox { display: none; position: fixed; inset: 0; background: rgba(36, 32, 32, 0.96); z-index: 9999; justify-content: center; align-items: center; padding: 20px; }

.showroom-lightbox.active { display: flex; }

.showroom-lightbox-content { max-width: 90%; max-height: 90vh; position: relative; }

.showroom-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 12px; }

/* BOUTON FERMETURE */
.showroom-lightbox-close { position: absolute; top: -50px; right: 0; background: transparent; border: none; color: #b8aa30; font-size: 38px; cursor: pointer; width: 48px; height: 48px; transition: transform 0.3s ease, color 0.3s ease; }

.showroom-lightbox-close:hover { color: #ffffff; transform: rotate(90deg); }

/* =========================== ANIMATION =========================== */
@keyframes showroom-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(calc(-364px * 6)); } }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 768px) { .showroom-section { padding: 3.5rem 0; } .showroom-item { width: 260px; height: 260px; } .showroom-gallery { gap: 18px; } @keyframes showroom-scroll { 0% { transform: translateX(0); }
    100% { transform: translateX(calc(-278px * 6)); } } }

/*================================================================= BLOC STAFF ========================================================================*/
.staff-highlight-section { background-color: #fff; padding: 6rem 2rem; }

.staff-highlight-container { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.staff-highlight-image { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); aspect-ratio: 5 / 2; /* ← rectangle */ width: 100%; }

.staff-highlight-image img { width: 100%; height: 100%; object-fit: cover; }

.staff-highlight-content { padding: 2rem; }

.staff-highlight-subtitle { font-family: 'Yellowtail', cursive; font-size: 2rem; color: #b8aa30; margin-bottom: 1rem; }

.staff-highlight-title { font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 3rem; color: #242020; text-transform: uppercase; letter-spacing: 2px; line-height: 1.1; margin-bottom: 2rem; }

.staff-highlight-text { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: #242020; line-height: 1.8; }

@media (max-width: 1024px) { .staff-highlight-section { padding: 4rem 1.5rem; } .staff-highlight-container { grid-template-columns: 1fr; gap: 3rem; } .staff-highlight-image { min-height: 300px; } .staff-highlight-title { font-size: 2.5rem; } }

@media (max-width: 768px) { .staff-highlight-section { padding: 3rem 1rem; } .staff-highlight-image { min-height: 250px; } .staff-highlight-content { padding: 0; } .staff-highlight-subtitle { font-size: 2rem; } .staff-highlight-title { font-size: 2rem; } .staff-highlight-text { font-size: 1rem; } }

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