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

/*=============================== PAGES SEO =====================================*/
.px-4.py-5.my-5.text-center.cta_banner.bg-sixthColor { background: #667852; }

a.p-3.fw-bold.fs-6.m-2.phone-number-button.text-decoration-none { border: 1px solid white; margin-top: 25px !important; color: white; }

span.display-5.fw-bold.text-body-emphasis.titles { text-transform: uppercase; color: white; }

h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { text-transform: uppercase; }

a.fw-light.grow.button_header.text-color-fourth.rounded-pill.p-2.text-decoration-none.all-activities-button { border-radius: 0px !important; }

.display-5.titles.mt-lg-5.mx-5.mb-2.fw-bold.text-body-emphasis.first-banner-seo-page-title h1 { text-transform: uppercase; font-weight: 600; font-size: 60px !important; }

a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px; }

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { text-transform: uppercase; color: #414141; }

h2.display-6.fw-bold.p-3.pt-lg-3.titles { text-transform: uppercase; color: #414141; }

.px-5.pt-5.display-6.text-color-primary.titles { text-transform: uppercase; color: #414141; }

span.display-4.fw-bold.lh-1.text-body-emphasis.mb-3.titles { text-transform: uppercase; color: #414141; }

.row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative.bg-sixthColor.text-color-sixth { box-shadow: none !important; }

div#seo-text-images { box-shadow: none !important; }

.card.seo-frequently-card.mb-3.border-0.shadow-lg.rounded-3.col-lg-8.p-0.bg-sixthColor.text-color-sixth { box-shadow: none !important; }

div#photo-text-seo-page-text p { font-size: 16px !important; font-weight: 400; }

/*=============================== CUSTOM NAV BAR =====================================*/
.zptop-navbar { width: 100%; min-height: 82px; padding: 0; background-color: white !important; border-bottom: 1px solid rgba(102, 120, 82, 0.18); box-shadow: none; transition: background-color 0.3s ease, box-shadow 0.3s ease, min-height 0.3s ease; }

a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #414141 !important; font-family: 'Manrope'; font-size: 13px !important; font-weight: 600; }

.zptop-navbar *, .zptop-navbar *::before, .zptop-navbar *::after { box-sizing: border-box; }

.zptop-navbar.is-scrolled { min-height: 72px; background-color: rgba(255, 255, 255, 0.99); box-shadow: 0 8px 28px rgba(65, 65, 65, 0.09); }

/* ========================================================= CONTENEUR ========================================================= */
.zptop-navbar__container { width: 100%; max-width: 1540px; min-height: inherit; margin: 0 auto; padding: 0 42px; display: flex; align-items: center; }

/* ========================================================= LOGO ========================================================= */
.zptop-navbar__brand { flex-shrink: 0; margin: 0; padding: 0; display: flex; align-items: center; }

.zptop-navbar__logo { width: auto; height: 58px; display: block; object-fit: contain; transition: height 0.3s ease; }

.zptop-navbar.is-scrolled .zptop-navbar__logo { height: 50px; }

/* ========================================================= COLLAPSE ========================================================= */
.zptop-navbar__collapse { min-width: 0; }

/* ========================================================= MENU ========================================================= */
.zptop-navbar__menu { margin: 0 auto; padding: 0 25px; display: flex; align-items: center; justify-content: center; gap: 4px; }

.zptop-navbar__item { position: relative; padding: 0; margin: 0; }

.zptop-navbar__link { position: relative; padding: 29px 17px; display: block; color: #414141; font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1; font-weight: 650; letter-spacing: 0.45px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.3s ease, transform 0.3s ease; }

.zptop-navbar.is-scrolled .zptop-navbar__link { padding-top: 24px; padding-bottom: 24px; }

/* Trait au survol */
.zptop-navbar__link::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 20px; height: 1px; background-color: #667852; transform: scaleX(0); transform-origin: right center; transition: transform 0.35s ease; text-decoration: none !important; }

.zptop-navbar.is-scrolled .zptop-navbar__link::after { bottom: 16px; }

.zptop-navbar__link:hover { color: #667852; text-decoration: none !important; }

.zptop-navbar__link:hover::after { transform: scaleX(1); transform-origin: left center; text-decoration: none !important; }

/* ========================================================= BOUTON TÉLÉPHONE ========================================================= */
.zptop-navbar__actions { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }

.zptop-navbar__phone { min-height: 52px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; color: #ffffff; background-color: #667852; border: 1px solid #667852; font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 0.45px; text-decoration: none; white-space: nowrap; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.zptop-navbar__phone i { font-size: 15px; line-height: 1; }

.zptop-navbar__phone:hover { color: #667852; background-color: #ffffff; border-color: #667852; transform: translateY(-3px); }

/* ========================================================= BOUTON MENU MOBILE ========================================================= */
.zptop-navbar__toggler { width: 48px; height: 44px; padding: 10px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background-color: #667852; border: 1px solid #667852; border-radius: 0; box-shadow: none; }

.zptop-navbar__toggler:focus { box-shadow: none; }

.zptop-navbar__toggler-line { width: 23px; height: 1px; display: block; background-color: #ffffff; transition: transform 0.3s ease, opacity 0.3s ease; }

/* Animation du burger quand le menu est ouvert */
.zptop-navbar__toggler[aria-expanded="true"] .zptop-navbar__toggler-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.zptop-navbar__toggler[aria-expanded="true"] .zptop-navbar__toggler-line:nth-child(2) { opacity: 0; }

.zptop-navbar__toggler[aria-expanded="true"] .zptop-navbar__toggler-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ========================================================= ÉCRANS INTERMÉDIAIRES ========================================================= */
@media screen and (max-width: 1250px) { .zptop-navbar__container { padding: 0 24px; } .zptop-navbar__menu { padding: 0 14px; } .zptop-navbar__link { padding-left: 11px; padding-right: 11px; font-size: 12px; } .zptop-navbar__link::after { left: 11px; right: 11px; } .zptop-navbar__phone { padding: 0 18px; font-size: 12px; } }

/* ========================================================= TABLETTE ET MOBILE ========================================================= */
@media screen and (max-width: 991px) { .zptop-navbar { min-height: 74px; } .zptop-navbar.is-scrolled { min-height: 68px; } .zptop-navbar__container { padding: 0 20px; flex-wrap: wrap; } .zptop-navbar__logo { height: 50px; } .zptop-navbar.is-scrolled .zptop-navbar__logo { height: 46px; } .zptop-navbar__toggler { display: flex; margin-left: auto; } .zptop-navbar__collapse { width: calc(100% + 40px); margin: 0 -20px; padding: 12px 20px 24px; background-color: #ffffff; border-top: 1px solid rgba(102, 120, 82, 0.16); box-shadow: 0 18px 30px rgba(65, 65, 65, 0.08); } .zptop-navbar__menu { width: 100%; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; } .zptop-navbar__item { width: 100%; border-bottom: 1px solid rgba(65, 65, 65, 0.09); } .zptop-navbar__link, .zptop-navbar.is-scrolled .zptop-navbar__link { width: 100%; padding: 17px 4px; font-size: 13px; text-align: left; } .zptop-navbar__link::after, .zptop-navbar.is-scrolled .zptop-navbar__link::after { left: 4px; right: auto; bottom: 11px; width: 34px; } .zptop-navbar__actions { width: 100%; margin-top: 20px; } .zptop-navbar__phone { width: 100%; min-height: 54px; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media screen and (max-width: 420px) { .zptop-navbar__container { padding: 0 16px; } .zptop-navbar__collapse { width: calc(100% + 32px); margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; } .zptop-navbar__logo { height: 45px; } .zptop-navbar__toggler { width: 44px; height: 42px; } }

/* ========================================================= RÉDUCTION DES ANIMATIONS ========================================================= */
@media (prefers-reduced-motion: reduce) { .zptop-navbar, .zptop-navbar__logo, .zptop-navbar__link, .zptop-navbar__link::after, .zptop-navbar__phone, .zptop-navbar__toggler-line { transition: none; } }

/*============================ 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, .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, .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 { border-radius: 0px !important; box-shadow: none !important; border: 1px solid #667852; padding: 50px 60px !important; }

.card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { box-shadow: none !important; border-radius: 0px !important; }

.black-screen { display: none !important; }

/*============================================================================================== HERO D'ACCUEIL ======================================================================================================*/
.zptop-hero { position: relative; isolation: isolate; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #414141; }

.zptop-hero *, .zptop-hero *::before, .zptop-hero *::after { box-sizing: border-box; }

/* Image de fond */
.zptop-hero__background { position: absolute; z-index: -3; inset: 0; }

.zptop-hero__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.02); animation: zptopHeroZoom 16s ease-in-out infinite alternate; }

/* Voile pour améliorer la lisibilité */
.zptop-hero__overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(25, 25, 25, 0.25) 0%, rgba(25, 25, 25, 0.42) 50%, rgba(25, 25, 25, 0.34) 100%); }

/* Contenu */
.zptop-hero__container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 130px 40px 100px; }

.zptop-hero__content { max-width: 920px; margin: 0 auto; text-align: center; }

/* Petit titre manuscrit */
.zptop-hero__eyebrow { margin: 0 0 22px; color: #ffffff; font-family: "Allura", cursive; font-size: 38px; line-height: 1; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28); }

/* Titre */
.zptop-hero__title { margin: 0; color: #ffffff; font-family: "Barlow Condensed", sans-serif; font-size: 72px; line-height: 1; font-weight: 600 !important; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); }

/* Description */
.zptop-hero__description { max-width: 680px; margin: 27px auto 0; color: rgba(255, 255, 255, 0.92); font-family: "Manrope", sans-serif; font-size: 17px; line-height: 1.7; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32); }

/* Bouton */
.zptop-hero__button { min-height: 56px; margin-top: 34px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background-color: #667852; border: 1px solid #667852; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.6px; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.zptop-hero__button:hover { color: #667852; background-color: #fff; border-color: #667852; transform: translateY(-3px); }

/* Formes inspirées du logo */
.zptop-hero__decorations { position: absolute; z-index: -1; inset: 0; pointer-events: none; }

.zptop-hero__shape { position: absolute; display: block; border-radius: 10px 24px 12px 22px; transform: rotate(32deg); }

.zptop-hero__shape--1 { top: 16%; left: 7%; width: 75px; height: 50px; background-color: rgba(255, 255, 255, 0.1); }

.zptop-hero__shape--2 { right: 8%; bottom: 18%; width: 95px; height: 64px; background-color: rgba(202, 202, 202, 0.13); }

.zptop-hero__shape--3 { top: 24%; right: 16%; width: 48px; height: 72px; background-color: rgba(102, 120, 82, 0.2); }

.zptop-hero__scroll { position: absolute; left: 50%; bottom: 28px; z-index: 5; width: 34px; height: 46px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-decoration: none; }

.zptop-hero__scroll span { width: 14px; height: 14px; display: block; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(45deg); animation: zptopScrollArrow 1.8s infinite; }

.zptop-hero__scroll span:nth-child(2) { margin-top: -5px; animation-delay: 0.2s; }

@keyframes zptopScrollArrow { 0% { opacity: 0;
    transform: translateY(-6px) rotate(45deg); }
  50% { opacity: 1; }
  100% { opacity: 0;
    transform: translateY(8px) rotate(45deg); } }

.zptop-hero__scroll:hover span { border-color: #315C4C; }

/* Tablette */
@media screen and (max-width: 991px) { .zptop-hero { min-height: 680px; } .zptop-hero__container { padding: 120px 35px 90px; } .zptop-hero__title { font-size: 60px; } .zptop-hero__eyebrow { font-size: 34px; } }

/* Mobile */
@media screen and (max-width: 767px) { .zptop-hero { min-height: 650px; } .zptop-hero__image { object-position: center; } .zptop-hero__overlay { background: rgba(25, 25, 25, 0.48); } .zptop-hero__container { padding: 110px 24px 70px; } .zptop-hero__eyebrow { margin-bottom: 18px; font-size: 30px; } .zptop-hero__title { font-size: 46px; line-height: 1.03; } .zptop-hero__title br { display: none; } .zptop-hero__description { margin-top: 24px; font-size: 15px; line-height: 1.65; } .zptop-hero__button { width: 100%; max-width: 290px; margin-top: 30px; } .zptop-hero__shape--1 { left: -25px; } .zptop-hero__shape--2 { right: -30px; } .zptop-hero__shape--3 { display: none; } .zptop-hero__scroll { bottom: 20px; } .zptop-hero__scroll span { width: 12px; height: 12px; } }

@media screen and (max-width: 420px) { .zptop-hero__title { font-size: 39px; } }

@media (prefers-reduced-motion: reduce) { .zptop-hero__image { animation: none; } .zptop-hero__scroll span { animation: none; opacity: 1; } }

/*===================================================================================================== A PROPOS / PRESENTATION =======================================================================================================*/
.zptop-about { position: relative; width: 100%; padding: 130px 40px; overflow: hidden; background-color: #ffffff; }

.zptop-about *, .zptop-about *::before, .zptop-about *::after { box-sizing: border-box; }

.zptop-about__container { width: 100%; max-width: 1450px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 0; }

/* ========================================================= DÉCORATIONS DE FOND ========================================================= */
.zptop-about__decorations { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }

.zptop-about__decoration { position: absolute; display: block; border-radius: 10px 24px 12px 22px; transform: rotate(35deg); }

/* Grande forme gris clair en haut à gauche */
.zptop-about__decoration--1 { top: -85px; left: -70px; width: 210px; height: 160px; background-color: rgba(202, 202, 202, 0.22); }

/* Contour vert derrière le contenu */
.zptop-about__decoration--2 { top: 23%; left: 4%; width: 125px; height: 95px; border: 1px solid rgba(102, 120, 82, 0.2); background-color: transparent; transform: rotate(48deg); }

/* Petite forme grise près de la galerie */
.zptop-about__decoration--3 { top: 11%; right: 8%; width: 95px; height: 68px; background-color: rgba(160, 160, 160, 0.14); transform: rotate(26deg); }

/* Forme verte très légère en bas à droite */
.zptop-about__decoration--4 { right: 65px; bottom: 150px; width: 220px; height: 170px; background-color: rgba(36, 77, 63, 0.08); transform: rotate(38deg); }

/* Petit éclat minéral */
.zptop-about__decoration--5 { right: 41%; bottom: 7%; width: 55px; height: 42px; background-color: rgba(65, 65, 65, 0.08); transform: rotate(56deg); }

/* Le contenu reste au-dessus des décorations */
.zptop-about__container { position: relative; z-index: 2; }

/* ========================================================= CONTENU ========================================================= */
.zptop-about__content { width: 100%; max-width: 750px; }

.zptop-about__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; color: #667852; font-family: "Allura", cursive; font-size: 33px; line-height: 1; }

.zptop-about__title { margin: 0; color: #414141; font-family: "Barlow Condensed", sans-serif; font-size: 58px; line-height: 1.02; font-weight: 600 !important; letter-spacing: 0.5px; text-transform: uppercase; }

.zptop-about__description { margin: 27px 0 0; color: #676767; font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.8; }

.zptop-about__description + .zptop-about__description { margin-top: 15px; }

/* ========================================================= POINTS FORTS ========================================================= */
.zptop-about__highlights { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }

.zptop-about__highlight { display: flex; align-items: center; gap: 13px; color: #414141; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 600 !important; }

.zptop-about__highlight span { width: 11px; height: 11px; flex-shrink: 0; display: block; background-color: #667852; border-radius: 2px 5px 2px 5px; transform: rotate(35deg); }

/* ========================================================= BOUTON ========================================================= */
.zptop-about__button { min-height: 56px; margin-top: 35px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff !important; background-color: #667852; border: 1px solid #667852; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.zptop-about__button:hover { color: #667852 !important; background-color: transparent; border-color: #667852 !important; transform: translateY(-3px); }

/* ========================================================= GALERIE CARRÉE — 4 IMAGES ========================================================= */
.zptop-about__gallery { position: relative; width: 100%; max-width: 650px; aspect-ratio: 1 / 1; margin-left: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; }

.zptop-about__image { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; background-color: #cacaca; border: 5px solid #ffffff; }

.zptop-about__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.55s ease; }

/* Image avec une bordure plus épaisse */
.zptop-about__image--main { grid-column: 1; grid-row: 1; border-width: 35px; }

/* ========================================================= PLACEMENT DES 4 IMAGES ========================================================= */
.zptop-about__image--top-left { grid-column: 1; grid-row: 1; }

.zptop-about__image--top-right { grid-column: 2; grid-row: 1; }

/* Image en bas à gauche avec la bordure plus épaisse */
.zptop-about__image--main { grid-column: 1; grid-row: 2; border-width: 35px; }

.zptop-about__image--bottom-right { grid-column: 2; grid-row: 2; }

/* ========================================================= TRÈS GRANDS ÉCRANS ========================================================= */
@media screen and (min-width: 1700px) { .zptop-about__container { max-width: 1550px; } .zptop-about__gallery { max-width: 700px; } }

/* ========================================================= TABLETTE ========================================================= */
@media screen and (max-width: 1100px) { .zptop-about { padding: 100px 35px; } .zptop-about__container { grid-template-columns: 1fr; gap: 70px; } .zptop-about__content { max-width: 760px; } .zptop-about__gallery { max-width: 650px; margin: 0 auto; } .zptop-about__decoration--2 { left: -35px; } .zptop-about__decoration--3 { right: -25px; } .zptop-about__decoration--5 { right: 12%; bottom: 3%; } }

/* ========================================================= MOBILE ========================================================= */
@media screen and (max-width: 767px) { .zptop-about { padding: 80px 22px; } .zptop-about__container { gap: 50px; } .zptop-about__eyebrow { margin-bottom: 18px; font-size: 29px; } .zptop-about__eyebrow-line { width: 38px; } .zptop-about__title { font-size: 43px; line-height: 1.05; } .zptop-about__description { margin-top: 23px; font-size: 15px; line-height: 1.7; } .zptop-about__description + .zptop-about__description { margin-top: 14px; } .zptop-about__highlights { margin-top: 25px; } .zptop-about__button { width: 100%; margin-top: 30px; } .zptop-about__gallery { max-width: 100%; gap: 7px; } .zptop-about__image { border-width: 3px; } .zptop-about__image--main { border-width: 25px; } .zptop-about__decoration--1 { top: -55px; left: -65px; width: 155px; height: 120px; } .zptop-about__decoration--2 { top: 26%; left: -55px; width: 105px; height: 80px; } .zptop-about__decoration--3 { top: 45%; right: -40px; width: 85px; height: 60px; } .zptop-about__decoration--4 { right: -75px; bottom: -45px; width: 170px; height: 130px; } .zptop-about__decoration--5 { display: none; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media screen and (max-width: 420px) { .zptop-about { padding: 70px 18px; } .zptop-about__title { font-size: 38px; } .zptop-about__eyebrow { font-size: 27px; } .zptop-about__gallery { gap: 5px; } .zptop-about__image--main { border-width: 25px; } }

/* ========================================================= RÉDUCTION DES ANIMATIONS ========================================================= */
@media (prefers-reduced-motion: reduce) { .zptop-about__image img, .zptop-about__button { transition: none; } .zptop-about__image:hover img { transform: none; } }

/*=================================================================================================== CITATION / SEPARATION BLOC ====================================================================================================*/
.zptop-quote-banner { position: relative; width: 100%; padding: 10px 30px; overflow: hidden; background-color: #fff; }

.zptop-quote-banner *, .zptop-quote-banner *::before, .zptop-quote-banner *::after { box-sizing: border-box; }

.zptop-quote-banner__container { position: relative; z-index: 2; width: 100%; max-width: 1050px; margin: 0 auto; text-align: center; }

.zptop-quote-banner__text { max-width: 900px; margin: 0 auto; padding: 0; color: #667852; font-family: "Allura", cursive; font-size: 46px; line-height: 1.25; font-weight: 400; letter-spacing: 0.2px; border: none; }

/* Formes de fond discrètes inspirées du logo */
.zptop-quote-banner::before, .zptop-quote-banner::after { content: ""; position: absolute; pointer-events: none; border-radius: 12px 28px 14px 24px; }

.zptop-quote-banner::before { top: 15px; left: -45px; width: 110px; height: 90px; background-color: rgba(65, 65, 65, 0.05); transform: rotate(35deg); }

.zptop-quote-banner::after { right: -85px; bottom: 5px; width: 145px; height: 95px; border: 1px solid rgba(102, 120, 82, 0.18); transform: rotate(42deg); }

@media screen and (max-width: 991px) { .zptop-quote-banner { padding: 58px 30px; } .zptop-quote-banner__text { font-size: 40px; } }

@media screen and (max-width: 767px) { .zptop-quote-banner { padding: 50px 22px; } .zptop-quote-banner__text { font-size: 34px; line-height: 1.3; } }

@media screen and (max-width: 420px) { .zptop-quote-banner { padding: 45px 18px; } .zptop-quote-banner__text { font-size: 29px; } }

/*============================================================================================ LES SERVICES ============================================================================================================*/
/* ========================================================= BLOC SERVICES — ZP TOP ========================================================= */
.zptop-services { position: relative; width: 100%; padding: 130px 40px; background-color: #fff; overflow: hidden; }

.zptop-services *, .zptop-services *::before, .zptop-services *::after { box-sizing: border-box; }

.zptop-services__container { width: 100%; max-width: 1450px; margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: stretch; }

/* ========================================================= CARTE INTRO ========================================================= */
.zptop-services__intro { position: relative; min-width: 0; min-height: 100%; padding: 42px 30px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background-color: #667852; color: #ffffff; }

.zptop-services__intro-signature { margin: 0 0 12px; color: rgba(255, 255, 255, 0.88); font-family: "Allura", cursive; font-size: 34px; line-height: 1; }

.zptop-services__intro-title { width: 100%; max-width: 100%; margin: 0; overflow-wrap: break-word; word-break: normal; color: #ffffff; font-family: "Barlow Condensed", sans-serif; font-size: 40px; line-height: 1.05; font-weight: 600 !important; letter-spacing: 0.3px; text-transform: uppercase; }

.zptop-services__intro-text { margin: 22px 0 0; color: rgba(255, 255, 255, 0.88); font-family: "Manrope", sans-serif; font-size: 15px; line-height: 1.8; }

.zptop-services__intro-button { min-height: 54px; margin-top: 30px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; color: #ffffff; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.65); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.zptop-services__intro-button:hover { color: #667852; background-color: #ffffff; border-color: #ffffff; transform: translateY(-3px); }

/* ========================================================= GRILLE DES SERVICES ========================================================= */
.zptop-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.zptop-services__card { position: relative; min-height: 225px; padding: 24px; display: flex; align-items: flex-end; justify-content: flex-start; border: none; cursor: pointer; overflow: hidden; background-color: #cacaca; background-size: cover; background-position: center; text-align: left; transition: transform 0.35s ease, box-shadow 0.35s ease; }

.zptop-services__card:hover { transform: translateY(-5px); box-shadow: 0 18px 35px rgba(65, 65, 65, 0.18); }

.zptop-services__card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0.08) 0%, rgba(20, 20, 20, 0.2) 40%, rgba(20, 20, 20, 0.7) 100%); }

.zptop-services__card-title { position: relative; z-index: 2; display: block; color: #ffffff; font-family: "Barlow Condensed", sans-serif; font-size: 30px; line-height: 1.05; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.5px; }

/* ========================================================= MODAL ========================================================= */
.zptop-services__modal { position: fixed; z-index: 999; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

.zptop-services__modal.is-active { opacity: 1; visibility: visible; }

.zptop-services__modal-backdrop { position: absolute; inset: 0; background-color: rgba(20, 20, 20, 0.62); }

.zptop-services__modal-dialog { position: relative; z-index: 2; width: 100%; max-width: 620px; padding: 48px 38px 38px; background-color: #ffffff; box-shadow: 0 25px 55px rgba(0, 0, 0, 0.18); }

.zptop-services__modal-close { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border: none; background: none; color: #414141; font-size: 30px; line-height: 1; cursor: pointer; }

.zptop-services__modal-signature { margin: 0 0 10px; color: #667852; font-family: "Allura", cursive; font-size: 32px; line-height: 1; }

.zptop-services__modal-title { margin: 0; color: #414141; font-family: "Barlow Condensed", sans-serif; font-size: 42px; line-height: 1.04; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.4px; }

.zptop-services__modal-text { margin: 22px 0 0; color: #666666; font-family: "Manrope", sans-serif; font-size: 15px; line-height: 1.8; }

.zptop-services__modal-button { min-height: 52px; margin-top: 28px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background-color: #667852; border: 1px solid #667852; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }

.zptop-services__modal-button:hover { color: #667852; background-color: transparent; transform: translateY(-3px); }

/* ========================================================= RESPONSIVE ========================================================= */
@media screen and (max-width: 1200px) { .zptop-services__container { grid-template-columns: 300px 1fr; } .zptop-services__grid { grid-template-columns: repeat(2, 1fr); } }

@media screen and (max-width: 991px) { .zptop-services { padding: 100px 30px; } .zptop-services__container { grid-template-columns: 1fr; gap: 22px; } .zptop-services__intro { min-height: auto; } }

@media screen and (max-width: 767px) { .zptop-services { padding: 80px 22px; } .zptop-services__intro { padding: 34px 24px; } .zptop-services__intro-title { font-size: 36px; } .zptop-services__grid { grid-template-columns: 1fr; gap: 14px; } .zptop-services__card { min-height: 210px; } .zptop-services__card-title { min-height: 84px; padding: 20px 22px; font-size: 28px; } .zptop-services__modal-dialog { padding: 40px 24px 28px; } .zptop-services__modal-title { font-size: 34px; } }

@media screen and (max-width: 420px) { .zptop-services { padding: 70px 18px; } .zptop-services__intro-title { font-size: 32px; } .zptop-services__card-title { min-height: 78px; font-size: 25px; } .zptop-services__modal-title { font-size: 29px; } }

/*=============================================================================================== BLOC DE REASSURANCE / POURQUOI ME CHOISIR ? ======================================================================================*/
/* ========================================================= POURQUOI ME CHOISIR — ZP TOP ========================================================= */
.zptop-why { position: relative; width: 100%; padding: 125px 40px; overflow: hidden; background-color: #ffffff; }

.zptop-why *, .zptop-why *::before, .zptop-why *::after { box-sizing: border-box; }

.zptop-why__container { position: relative; z-index: 2; width: 100%; max-width: 1650px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr); align-items: center; gap: 90px; }

/* ========================================================= GALERIE ========================================================= */
.zptop-why__gallery { width: 100%; height: 610px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 15px; }

.zptop-why__image { position: relative; width: 100%; margin: 0; overflow: hidden; background-color: #cacaca; }

.zptop-why__image--left { height: 470px; }

.zptop-why__image--center { height: 610px; }

.zptop-why__image--right { height: 520px; }

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

/* Petit contour sur l’image centrale */
.zptop-why__image--center { padding: 9px; background-color: #667852; }

.zptop-why__image--center img { width: 100%; height: 100%; }

/* ========================================================= CONTENU ========================================================= */
.zptop-why__content { width: 100%; max-width: 690px; }

.zptop-why__eyebrow { margin: 0 0 18px; color: #667852; font-family: "Allura", cursive; font-size: 36px; line-height: 1; }

.zptop-why__title { margin: 0; color: #414141; font-family: "Barlow Condensed", sans-serif; font-size: 56px; line-height: 1.03; font-weight: 600 !important; letter-spacing: 0.4px; text-transform: uppercase; }

.zptop-why__intro { margin: 25px 0 0; color: #6d6d6d; font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.75; }

/* ========================================================= AVANTAGES ========================================================= */
.zptop-why__advantages { display: flex; flex-direction: column; gap: 22px; margin-top: 34px; }

.zptop-why__advantage { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: flex-start; gap: 18px; }

.zptop-why__icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }

.zptop-why__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }

.zptop-why__advantage-content h3 { margin: 0; color: #414141; font-family: "Barlow Condensed", sans-serif; font-size: 25px; line-height: 1.1; font-weight: 600 !important; letter-spacing: 0.3px; text-transform: uppercase; }

.zptop-why__advantage-content p { margin: 8px 0 0; color: #737373; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.65; }

/* ========================================================= BOUTON ========================================================= */
.zptop-why__button { min-height: 56px; margin-top: 35px; padding: 0 31px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background-color: #667852; border: 1px solid #667852; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; }

.zptop-why__button:hover { color: #667852; background-color: transparent; transform: translateY(-3px); }

/* ========================================================= DÉCORATIONS DE FOND ========================================================= */
.zptop-why__decorations { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }

.zptop-why__decoration { position: absolute; display: block; border-radius: 12px 28px 14px 24px; }

.zptop-why__decoration--1 { top: 90px; right: -65px; width: 220px; height: 170px; background-color: rgba(102, 120, 82, 0.07); transform: rotate(38deg); }

.zptop-why__decoration--2 { left: -75px; bottom: 65px; width: 190px; height: 145px; border: 1px solid rgba(102, 120, 82, 0.14); transform: rotate(44deg); }

/* ========================================================= TABLETTE ========================================================= */
@media screen and (max-width: 1150px) { .zptop-why { padding: 100px 35px; } .zptop-why__container { grid-template-columns: 1fr; gap: 70px; } .zptop-why__gallery { max-width: 850px; height: 570px; margin: 0 auto; } .zptop-why__image--left { height: 440px; } .zptop-why__image--center { height: 570px; } .zptop-why__image--right { height: 485px; } .zptop-why__content { max-width: 760px; } }

/* ========================================================= MOBILE ========================================================= */
@media screen and (max-width: 767px) { .zptop-why { padding: 80px 22px; } .zptop-why__container { gap: 50px; } .zptop-why__gallery { height: 390px; gap: 7px; } .zptop-why__image--left { height: 310px; } .zptop-why__image--center { height: 390px; padding: 5px; } .zptop-why__image--right { height: 340px; } .zptop-why__eyebrow { font-size: 31px; } .zptop-why__title { font-size: 43px; line-height: 1.05; } .zptop-why__intro { margin-top: 22px; font-size: 15px; line-height: 1.7; } .zptop-why__advantages { gap: 21px; margin-top: 30px; } .zptop-why__advantage { grid-template-columns: 46px minmax(0, 1fr); gap: 15px; } .zptop-why__icon { width: 46px; height: 46px; } .zptop-why__advantage-content h3 { font-size: 23px; } .zptop-why__button { width: 100%; margin-top: 30px; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media screen and (max-width: 420px) { .zptop-why { padding: 70px 18px; } .zptop-why__gallery { height: 335px; gap: 5px; } .zptop-why__image--left { height: 270px; } .zptop-why__image--center { height: 335px; } .zptop-why__image--right { height: 290px; } .zptop-why__title { font-size: 38px; } .zptop-why__advantage { grid-template-columns: 42px minmax(0, 1fr); } .zptop-why__icon { width: 42px; height: 42px; } }

/* ========================================================= RÉDUCTION DES ANIMATIONS ========================================================= */
@media (prefers-reduced-motion: reduce) { .zptop-why__image img, .zptop-why__button { transition: none; } .zptop-why__image:hover img { transform: none; } }

/*================================================================================================== MAPS + FAQ ===============================================================================================================*/
.zptop-info { position: relative; width: 100%; padding: 120px 40px; overflow: hidden; background-color: #fff; }

.zptop-info *, .zptop-info *::before, .zptop-info *::after { box-sizing: border-box; }

.zptop-info__container { position: relative; z-index: 2; width: 100%; max-width: 1450px; margin: 0 auto; display: grid; grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr); align-items: stretch; gap: 28px; }

/* ========================================================= ENCADRÉS ========================================================= */
.zptop-info__map-card, .zptop-info__faq-card { position: relative; min-width: 0; box-shadow: 0 18px 45px rgba(65, 65, 65, 0.1); }

.zptop-info__map-card { display: flex; flex-direction: column; background-color: #ffffff; border: 1px solid rgba(65, 65, 65, 0.1); }

.zptop-info__faq-card { overflow: hidden; background: linear-gradient(145deg, #667852 0%, #5f704c 100%); border: 1px solid #667852; }

/* ========================================================= PETITS TITRES ========================================================= */
.zptop-info__eyebrow { margin: 0 0 14px; color: #667852; font-family: "Allura", cursive; font-size: 34px; line-height: 1; }

/* ========================================================= ZONE D’INTERVENTION ========================================================= */
.zptop-info__map-content { padding: 40px 34px 34px; }

.zptop-info__map-title { margin: 0; color: #414141; font-family: "Barlow Condensed", sans-serif; font-size: 43px; line-height: 1.04; font-weight: 600 !important; letter-spacing: 0.3px; text-transform: uppercase; }

.zptop-info__map-text { margin: 20px 0 0; color: #717171; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.75; }

.zptop-info__map { width: 100%; min-height: 430px; flex: 1; overflow: hidden; border-top: 1px solid rgba(65, 65, 65, 0.1); }

.zptop-info__map iframe { width: 100%; height: 100%; min-height: 430px; display: block; border: 0; filter: grayscale(15%); }

/* ========================================================= CONTENU FAQ ========================================================= */
.zptop-info__faq-content { position: relative; z-index: 2; padding: 40px 44px 44px; }

.zptop-info__faq-heading { max-width: 700px; margin-bottom: 32px; }

.zptop-info__faq-card .zptop-info__eyebrow { color: rgba(255, 255, 255, 0.78); }

.zptop-info__faq-title { margin: 0; color: #ffffff; font-family: "Barlow Condensed", sans-serif; font-size: 48px; line-height: 1.04; font-weight: 600 !important; letter-spacing: 0.3px; text-transform: uppercase; }

.zptop-info__faq-intro { max-width: 650px; margin: 20px 0 0; color: rgba(255, 255, 255, 0.78); font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.75; }

/* ========================================================= ACCORDÉON ========================================================= */
.zptop-info__accordion { border-top: 1px solid rgba(255, 255, 255, 0.22); }

.zptop-info__faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }

.zptop-info__faq-question { position: relative; width: 100%; min-height: 78px; padding: 23px 54px 23px 0; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; color: #ffffff; font-family: "Barlow Condensed", sans-serif; font-size: 24px; line-height: 1.15; font-weight: 600 !important; letter-spacing: 0.2px; text-align: left; cursor: pointer; transition: color 0.3s ease, padding-left 0.3s ease; }

.zptop-info__faq-question:hover, .zptop-info__faq-item.is-open .zptop-info__faq-question { color: rgba(255, 255, 255, 0.74); }

.zptop-info__faq-item.is-open .zptop-info__faq-question { padding-left: 8px; }

/* ========================================================= ICÔNE PLUS / MOINS ========================================================= */
.zptop-info__faq-icon { position: absolute; top: 50%; right: 4px; width: 30px; height: 30px; flex-shrink: 0; transform: translateY(-50%); }

.zptop-info__faq-icon::before, .zptop-info__faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: #ffffff; transform: translate(-50%, -50%); transition: opacity 0.3s ease, transform 0.3s ease; }

.zptop-info__faq-icon::before { width: 18px; height: 1px; }

.zptop-info__faq-icon::after { width: 1px; height: 18px; }

.zptop-info__faq-item.is-open .zptop-info__faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

/* ========================================================= RÉPONSES AVEC OUVERTURE FLUIDE ========================================================= */
.zptop-info__faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 0.45s ease, opacity 0.35s ease; }

.zptop-info__faq-item.is-open .zptop-info__faq-answer { grid-template-rows: 1fr; opacity: 1; }

.zptop-info__faq-answer-inner { min-height: 0; overflow: hidden; }

.zptop-info__faq-answer p { margin: 0; padding: 0 56px 26px 8px; color: rgba(255, 255, 255, 0.78); font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.75; }

/* ========================================================= DÉCORATIONS GÉNÉRALES DU BLOC ========================================================= */
.zptop-info__decorations { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }

.zptop-info__decoration { position: absolute; display: block; pointer-events: none; }

.zptop-info__decoration--1 { top: 105px; left: 300px; width: 290px; height: 220px; border-radius: 35px 82px 40px 74px; background-color: rgba(102, 120, 82, 0.09); transform: rotate(36deg); }

.zptop-info__decoration--2 { right: -95px; bottom: -80px; width: 265px; height: 195px; border: 1px solid rgba(102, 120, 82, 0.18); border-radius: 30px 74px 35px 68px; transform: rotate(43deg); }

.zptop-info__decoration--3 { top: 32%; left: 2%; width: 150px; height: 105px; border-radius: 18px 46px 22px 42px; background-color: rgba(160, 160, 160, 0.1); transform: rotate(28deg); }

.zptop-info__decoration--4 { top: 13%; right: 7%; width: 105px; height: 75px; border-radius: 14px 35px 17px 31px; background-color: rgba(102, 120, 82, 0.08); transform: rotate(48deg); }

.zptop-info__decoration--5 { left: 45%; bottom: 7%; width: 72px; height: 72px; border: 1px solid rgba(65, 65, 65, 0.1); transform: rotate(45deg); }

/* ========================================================= DÉCORATIONS DANS LA FAQ ========================================================= */
.zptop-info__faq-card-decoration { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }

.zptop-info__faq-shape { position: absolute; display: block; pointer-events: none; }

.zptop-info__faq-shape--1 { top: -65px; right: -45px; width: 190px; height: 145px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px 66px 32px 60px; transform: rotate(38deg); }

.zptop-info__faq-shape--2 { left: -55px; bottom: -70px; width: 175px; height: 130px; border-radius: 24px 58px 28px 52px; background-color: rgba(255, 255, 255, 0.045); transform: rotate(42deg); }

/* ========================================================= TABLETTE ========================================================= */
@media screen and (max-width: 1100px) { .zptop-info { padding: 100px 35px; } .zptop-info__container { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: 22px; } .zptop-info__map-content { padding: 34px 28px 30px; } .zptop-info__map-title { font-size: 38px; } .zptop-info__faq-content { padding: 34px 34px 38px; } .zptop-info__faq-title { font-size: 43px; } .zptop-info__faq-question { font-size: 22px; } }

/* ========================================================= PETITE TABLETTE ========================================================= */
@media screen and (max-width: 850px) { .zptop-info__container { grid-template-columns: 1fr; } .zptop-info__map, .zptop-info__map iframe { min-height: 350px; } .zptop-info__decoration--3 { left: -45px; } .zptop-info__decoration--4 { right: -30px; } .zptop-info__decoration--5 { display: none; } }

/* ========================================================= MOBILE ========================================================= */
@media screen and (max-width: 767px) { .zptop-info { padding: 80px 22px; } .zptop-info__container { gap: 18px; } .zptop-info__map-content { padding: 30px 24px 27px; } .zptop-info__eyebrow { font-size: 30px; } .zptop-info__map-title { font-size: 37px; } .zptop-info__map, .zptop-info__map iframe { min-height: 300px; } .zptop-info__faq-content { padding: 30px 24px 32px; } .zptop-info__faq-heading { margin-bottom: 25px; } .zptop-info__faq-title { font-size: 38px; } .zptop-info__faq-question { min-height: 70px; padding: 20px 45px 20px 0; font-size: 21px; } .zptop-info__faq-answer p { padding: 0 42px 22px 8px; } .zptop-info__decoration--1 { top: -75px; left: -95px; width: 220px; height: 165px; } .zptop-info__decoration--2 { right: -100px; bottom: -65px; width: 215px; height: 160px; } .zptop-info__decoration--3 { top: 28%; left: -60px; width: 120px; height: 85px; } .zptop-info__decoration--4 { top: 55%; right: -45px; width: 90px; height: 65px; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media screen and (max-width: 420px) { .zptop-info { padding: 70px 18px; } .zptop-info__map-content, .zptop-info__faq-content { padding-left: 20px; padding-right: 20px; } .zptop-info__faq-title, .zptop-info__map-title { font-size: 34px; } .zptop-info__faq-question { font-size: 20px; } }

/* ========================================================= RÉDUCTION DES ANIMATIONS ========================================================= */
@media (prefers-reduced-motion: reduce) { .zptop-info__faq-question, .zptop-info__faq-icon::before, .zptop-info__faq-icon::after, .zptop-info__faq-answer { transition: none; } }

/*=========================================================================================== EN TETE : PAGE SECONDAIRE ============================================================================================================*/
/* ========================================================= EN-TÊTE PAGE RÉALISATIONS — ZP TOP ========================================================= */
.zptop-page-hero { position: relative; isolation: isolate; width: 100%; min-height: 60vh; display: flex; align-items: center; overflow: hidden; background-color: #414141; }

.zptop-page-hero *, .zptop-page-hero *::before, .zptop-page-hero *::after { box-sizing: border-box; }

/* ========================================================= IMAGE DE FOND ========================================================= */
.zptop-page-hero__background { position: absolute; z-index: -4; inset: 0; }

.zptop-page-hero__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.02); animation: zptopPageHeroZoom 16s ease-in-out infinite alternate; }

/* ========================================================= VOILE SOMBRE ========================================================= */
.zptop-page-hero__overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(25, 25, 25, 0.25) 0%, rgba(25, 25, 25, 0.42) 50%, rgba(25, 25, 25, 0.34) 100%); }

/* ========================================================= CONTENEUR ========================================================= */
.zptop-page-hero__container { width: 100%; max-width: 1450px; margin: 0 auto; padding: 120px 60px 90px; }

.zptop-page-hero__layout { width: 100%; display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 80px; }

/* ========================================================= LOGO À GAUCHE ========================================================= */
.zptop-page-hero__logo-wrapper { display: flex; align-items: center; justify-content: flex-start; }

.zptop-page-hero__logo { width: 100%; max-width: 240px; height: auto; display: block; object-fit: contain; }

/* ========================================================= CONTENU À DROITE ========================================================= */
.zptop-page-hero__content { width: 100%; max-width: 760px; text-align: left; }

.zptop-page-hero__title { margin: 0; color: #ffffff; font-family: "Barlow Condensed", sans-serif; font-size: 68px; line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 4px 28px rgba(0, 0, 0, 0.25); }

.zptop-page-hero__description { max-width: 650px; margin: 24px 0 0; color: rgba(255, 255, 255, 0.88); font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.75; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24); }

/* ========================================================= BOUTON ALIGNÉ AU TEXTE ========================================================= */
.zptop-page-hero__button { min-height: 56px; margin-top: 32px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background-color: #667852; border: 1px solid #667852; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.zptop-page-hero__button:hover { color: #667852; background-color: #ffffff; border-color: #ffffff; transform: translateY(-3px); }

/* ========================================================= DÉCORATIONS ========================================================= */
.zptop-page-hero__decorations { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }

.zptop-page-hero__shape { position: absolute; display: block; border-radius: 12px 28px 14px 24px; pointer-events: none; }

.zptop-page-hero__shape--1 { top: 13%; left: 7%; width: 110px; height: 78px; background-color: rgba(255, 255, 255, 0.08); transform: rotate(34deg); }

.zptop-page-hero__shape--2 { right: 8%; bottom: 12%; width: 145px; height: 105px; border: 1px solid rgba(255, 255, 255, 0.12); transform: rotate(42deg); }

.zptop-page-hero__shape--3 { top: 20%; right: 18%; width: 65px; height: 48px; background-color: rgba(102, 120, 82, 0.35); transform: rotate(29deg); }

/* ========================================================= TABLETTE ========================================================= */
@media screen and (max-width: 991px) { .zptop-page-hero { min-height: 560px; } .zptop-page-hero__container { padding: 110px 35px 75px; } .zptop-page-hero__layout { grid-template-columns: 210px minmax(0, 1fr); gap: 50px; } .zptop-page-hero__logo { max-width: 200px; } .zptop-page-hero__title { font-size: 58px; } }

/* ========================================================= MOBILE ========================================================= */
@media screen and (max-width: 767px) { .zptop-page-hero { min-height: 570px; } .zptop-page-hero__container { padding: 100px 22px 65px; } .zptop-page-hero__layout { grid-template-columns: 1fr; gap: 35px; } .zptop-page-hero__logo-wrapper { justify-content: flex-start; } .zptop-page-hero__logo { max-width: 155px; } .zptop-page-hero__title { font-size: 46px; line-height: 1.03; } .zptop-page-hero__description { margin-top: 21px; font-size: 15px; line-height: 1.65; } .zptop-page-hero__button { width: 100%; max-width: 290px; margin-top: 28px; } .zptop-page-hero__shape--1 { left: -40px; } .zptop-page-hero__shape--2 { right: -55px; } .zptop-page-hero__shape--3 { display: none; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media screen and (max-width: 420px) { .zptop-page-hero__title { font-size: 40px; } .zptop-page-hero__logo { max-width: 140px; } }

/* ========================================================= RÉDUCTION DES ANIMATIONS ========================================================= */
@media (prefers-reduced-motion: reduce) { .zptop-page-hero__image { animation: none; } .zptop-page-hero__button { transition: none; } }

/*===================================================================================================== GALERIE DE REALISATIONS =================================================================================================*/
/* ========================================================= GALERIE SIMPLE — ZP TOP ========================================================= */
.zptop-gallery-grid { position: relative; width: 100%; padding: 110px 40px; overflow: hidden; background-color: #ffffff; }

.zptop-gallery-grid *, .zptop-gallery-grid *::before, .zptop-gallery-grid *::after { box-sizing: border-box; }

.zptop-gallery-grid__container { width: 100%; max-width: 1450px; margin: 0 auto; }

/* ========================================================= EN-TÊTE ========================================================= */
.zptop-gallery-grid__heading { width: 100%; max-width: 760px; margin: 0 auto 55px; text-align: center; }

.zptop-gallery-grid__eyebrow { margin: 0 0 14px; color: #667852; font-family: "Allura", cursive; font-size: 36px; line-height: 1; }

.zptop-gallery-grid__title { margin: 0; color: #414141; font-family: "Barlow Condensed", sans-serif; font-size: 54px; line-height: 1.04; font-weight: 600 !important; letter-spacing: 0.4px; text-transform: uppercase; }

/* ========================================================= GRILLE ========================================================= */
.zptop-gallery-grid__list { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* ========================================================= IMAGES ========================================================= */
.zptop-gallery-grid__item { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #cacaca; }

.zptop-gallery-grid__item img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ========================================================= TABLETTE ========================================================= */
@media screen and (max-width: 1050px) { .zptop-gallery-grid { padding: 95px 35px; } .zptop-gallery-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; } }

/* ========================================================= MOBILE ========================================================= */
@media screen and (max-width: 767px) { .zptop-gallery-grid { padding: 80px 22px; } .zptop-gallery-grid__heading { margin-bottom: 42px; } .zptop-gallery-grid__eyebrow { font-size: 31px; } .zptop-gallery-grid__title { font-size: 42px; } .zptop-gallery-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media screen and (max-width: 420px) { .zptop-gallery-grid { padding: 70px 18px; } .zptop-gallery-grid__title { font-size: 37px; } .zptop-gallery-grid__list { gap: 6px; } }

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