@charset "UTF-8";
@import url(main.css);
.bloc-slider-homepage { width: auto !important; }

.b-bloc-divider { border: none !important; border-width: none !important; box-shadow: none !important; background-color: #fff !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 { border: 2px solid #f89f34 !important; border-radius: 0px !important; box-shadow: none !important; transition: 0.3s ease; }

.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: 2px solid #f89f34 !important; border-radius: 0px !important; box-shadow: none !important; transition: 0.3s ease; }

.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 { border: 2px solid #f89f34 !important; border-radius: 0px !important; box-shadow: none !important; transition: 0.3s ease; }

::after { background-color: #df9a49 !important; }

.logo-footer > .logo_nav { height: 16vh !important; }

row.justify-content-between.pt-4.my-2.border-top.text-center.text-color-third { border-top: var(--bs-border-width) var(--bs-border-style) #df9a49 !important; }

form#formContact { border: 2px solid #df9a49 !important; border-radius: 0px !important; margin-top: 25px; }

/* ===================================== LOGO & MARQUE ===================================== */
/* Conteneur du logo (Bootstrap .navbar-brand) */
.navbar-brand { height: 11vh !important; width: 11vw !important; }

/* Image du logo */
.logo_nav { height: 10vh !important; transition: all 0.3s ease; }

/* Décalage du logo à gauche dans la navbar */
.navbar .logo_nav { padding-left: 2rem; }

/* Effet hover léger sur le logo */
.logo_nav:hover { transform: scale(1.025); }

.sliderLogoContainer { width: 15vw !important; }

nav#navigation-bar-show { border-bottom: 1px solid #f89f34 !important; }

@media (max-width: 600px) { .sliderLogoContainer.mx-auto { width: 45vw !important; margin-bottom: 45px; } }

div#fullHeight { height: 75vh; }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { box-shadow: none !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0px !important; color: #fff !important; }

nav#navigation-bar-hide { box-shadow: 0 8px 45px rgba(0, 0, 0, 0.3); }

.carousel-inner-homepage .carousel-item-homepage > img { animation: none !important; -webkit-animation: none !important; -o-animation: none !important; }

a.button_homepageScreen { border-radius: 0px; color: #fff !important; }

/*-------------------------------------------------------------------------------------------------SERVICES-----------------------------------------------------------------------------------------*/
/* =============================== SECTION SERVICES ================================ */
.services-section { padding: 100px 5%; background: #f6f6f6; overflow: hidden; }

/* =============================== HEADER ================================ */
.section-header { position: relative; text-align: center; margin-bottom: 80px; }

/* =============================== TITRES ================================ */
.titles { display: inline-block; position: relative; z-index: 1; }

.small-title { display: block; font-size: 19px; letter-spacing: 3px; font-weight: 600; color: #f89f34; margin-bottom: 10px; }

/* H2 = référence des décors */
.section-header h2 { position: relative; font-size: clamp(24px, 4vw, 36px); font-weight: 700; color: #111; line-height: 1.15; padding: 0 90px; /* espace pour les décors */ }

/* =============================== IMAGES DÉCORATIVES AUTOUR DU H2 ================================ */
.decor { position: absolute; top: 50%; transform: translateY(-50%); width: 90px; /* taille desktop */ height: auto; pointer-events: none; user-select: none; z-index: 0; }

/* Calées sur le H2 */
.decor-left { left: 41%; transform: translate(-115%, -43%); }

.decor-right { right: 41%; transform: translate(115%, -43%); }

/* =============================== GRID SERVICES ================================ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* =============================== CARTES ================================ */
.service-card { background: #ffffffab; border: 0.01px solid #555; padding: 30px; display: flex; flex-direction: column; }

.service-card img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 25px; }

.service-card h3 { font-size: 19px; margin-bottom: 15px; font-weight: 600; }

.service-card p { font-size: 14px; line-height: 1.7; color: #555; flex-grow: 1; }

/* =============================== BOUTON ================================ */
.btn { margin-top: 25px; background: #f89f34 !important; color: #111 !important; border-radius: 0px !important; padding: 14px 20px !important; font-size: 13px !important; font-weight: 600; text-decoration: none; text-align: center; text-transform: uppercase; letter-spacing: 1px; transition: background 0.3s ease; }

.btn:hover { background: #e6a72f !important; }

/* =============================== RESPONSIVE TABLETTE ================================ */
@media (max-width: 1024px) { .services-section { padding: 80px 5%; } .services-grid { grid-template-columns: 1fr; gap: 50px; } .section-header { margin-bottom: 60px; } .section-header h2 { font-size: 28px; padding: 0 70px; } .decor { width: 70px; } .decor-left { transform: translate(-110%, -50%); } .decor-right { transform: translate(110%, -50%); } }

/* =============================== RESPONSIVE MOBILE ================================ */
@media (max-width: 480px) { .section-header h2 { font-size: 24px; padding: 0 55px; } .decor { width: 70px; } .decor-left { transform: translate(-220%, -41%); } .decor-right { transform: translate(220%, -41%); } }

/*-------------------------------------------------------------------------------------------------PRESENTATION-----------------------------------------------------------------------------------------*/
/* =============================== PRÉSENTATION ENTREPRISE ================================ */
.presentation-entreprise { position: relative; padding: clamp(80px, 8vw, 130px) 5%; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FUokExqCW67MVRlcnJUgEkrEBCDH2%2Fimages%2FDesign_sans_titre_-_2026-01-20T120704966_x2t9.webp"); background-size: cover; background-position: center right; background-repeat: no-repeat; background-attachment: scroll; overflow: hidden; }

/* voile de lisibilité amélioré */
.presentation-entreprise::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.25) 100%); z-index: 0; }

.presentation-entreprise-inner { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 3vw, 40px); align-items: center; }

.presentation-entreprise-content { justify-self: center; }

/* =============================== IMAGE GAUCHE ================================ */
.presentation-entreprise-image { max-width: 120%; margin-left: 5%; position: relative; animation: fadeInLeft 0.8s ease-out; }

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

.presentation-entreprise-image::before { content: ""; position: absolute; top: -20px; left: -20px; right: 20px; bottom: 20px; background: linear-gradient(135deg, #f89f34 0%, #ff8c2a 100%); border-radius: 0px; z-index: -1; opacity: 0.15; }

.presentation-entreprise-image { max-width: 75%; /* image plus petite */ margin-left: 0; /* supprime le décalage inutile */ justify-self: center; /* centre l’image dans sa colonne */ position: relative; animation: fadeInLeft 0.8s ease-out; }

/* =============================== TEXTE ================================ */
.presentation-entreprise-content { color: #1f2933; animation: fadeInRight 0.8s ease-out; position: relative; padding-left: 30px; }

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

.presentation-entreprise-content::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 80px; background: linear-gradient(180deg, #f89f34 0%, #ff8c2a 100%); border-radius: 2px; }

.presentation-entreprise-eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #f89f34; margin-bottom: 16px; font-weight: 700; position: relative; display: inline-block; }

.presentation-entreprise-eyebrow::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 50%; height: 2px; background: linear-gradient(90deg, #f89f34, transparent); }

.presentation-entreprise-title { font-size: clamp(30px, 4vw, 54px); font-weight: 700; margin-bottom: 28px; line-height: 1.15; color: #111827; letter-spacing: -0.5px; }

.presentation-entreprise-title span { color: #f89f34; position: relative; display: inline-block; }

.presentation-entreprise-text { font-size: 17px; line-height: 1.9; color: #4b5563; max-width: 560px; position: relative; padding-left: 20px; border-left: 2px solid rgba(248, 159, 52, 0.2); }

.presentation-entreprise-text strong { color: #111827; font-weight: 700; background: linear-gradient(120deg, rgba(248, 159, 52, 0.1) 0%, transparent 100%); padding: 2px 6px; border-radius: 0px; }

/* Bouton CTA optionnel */
.presentation-entreprise-cta { margin-top: 32px; }

.presentation-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: linear-gradient(135deg, #f89f34 0%, #ff8c2a 100%); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 0px; border: none; cursor: pointer; box-shadow: 0 8px 20px rgba(248, 159, 52, 0.3); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; }

.presentation-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(248, 159, 52, 0.4); background: linear-gradient(135deg, #ff8c2a 0%, #f89f34 100%); }

.presentation-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s ease; }

.presentation-btn:hover svg { transform: translateX(4px); }

/* =============================== RESPONSIVE – PRÉSENTATION ================================ */
/* Tablette */
@media (max-width: 1024px) { .presentation-entreprise-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 50px; } .presentation-entreprise-image { max-width: 50%; /* image réduite */ margin: 0 auto; } .presentation-entreprise-image::before { top: -14px; left: -14px; right: 14px; bottom: 14px; opacity: 0.18; /* rectangle toujours visible */ } .presentation-entreprise-content { display: flex; flex-direction: column; align-items: center; padding-left: 0; } .presentation-entreprise-content::before { display: none; } .presentation-entreprise-text { max-width: 640px; text-align: left; } }

/* Mobile */
@media (max-width: 768px) { .presentation-entreprise { background-attachment: scroll; } .presentation-entreprise-image { max-width: 85%; } .presentation-entreprise-image::before { top: -10px; left: -10px; right: 10px; bottom: 10px; opacity: 0.2; } }

/* Petit mobile */
@media (max-width: 480px) { .presentation-entreprise { padding: 60px 20px; } .presentation-entreprise-image { max-width: 100%; } .presentation-entreprise-image::before { top: -8px; left: -8px; right: 8px; bottom: 8px; } .presentation-entreprise-title { font-size: 26px; } .presentation-entreprise-text { font-size: 15px; padding-left: 0; border-left: none; } .presentation-btn { padding: 14px 26px; font-size: 14px; } }

/*-------------------------------------------------------------------------------------------------REALISATIONS-----------------------------------------------------------------------------------------*/
/* =============================== SECTION RÉALISATIONS ================================ */
.realisation-coutarel { padding: 90px 5%; background: #fff; text-align: center; }

/* TITRES */
.realisation-coutarel-eyebrow { font-size: 11px; letter-spacing: 3px; color: #9aa0a6; font-weight: 600; margin-bottom: 8px; }

.realisation-coutarel-title { font-size: 28px; font-weight: 700; margin-bottom: 50px; color: #222; }

/* =============================== GRID ================================ */
.realisation-coutarel-grid { max-width: 1100px; margin: 0 auto 45px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ITEM */
.realisation-coutarel-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #f0f0f0; }

.realisation-coutarel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================== BOUTON ================================ */
.realisation-coutarel-btn { display: inline-block; padding: 14px 34px; border: 2px solid #f4a63a; color: #f4a63a; font-size: 12px; letter-spacing: 2px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; }

.realisation-coutarel-btn:hover { background: #f4a63a; color: #ffffff; }

/* =============================== RESPONSIVE ================================ */
@media (max-width: 900px) { .realisation-coutarel-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 520px) { .realisation-coutarel-grid { grid-template-columns: 1fr; } }

\
 .zone-intervention { padding: clamp(110px, 12vw, 180px) clamp(20px, 6vw, 80px); background: #f6f6f6 !important; }

/* =============================== CONTAINER ================================ */
.zone-intervention-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 80px); align-items: center; padding-bottom: 30px; }

.zone-intervention-inner > :first-child { justify-self: center; }

/* =============================== TEXTE ================================ */
.zone-eyebrow { color: #f4a63a; font-size: 12px; letter-spacing: 3px; font-weight: 700; margin-bottom: 14px; }

.zone-title { font-size: clamp(30px, 4.5vw, 48px); font-weight: 800; line-height: 1.15; margin-bottom: 22px; color: #000; }

.zone-text { font-size: 16px; line-height: 1.7; color: #000; max-width: 560px; margin-bottom: 35px; }

/* =============================== LISTE DES VILLES ================================ */
.zone-lists { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); /* ✅ 3 colonnes desktop */ gap: 18px 50px; margin-bottom: 40px; color: #000; }

.zone-city { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; white-space: nowrap; }

/* Icône localisation */
.zone-city::before { content: ""; width: 18px; height: 18px; display: inline-block; background-color: #f4a63a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/%3E%3C/svg%3E") no-repeat center/contain; }

/* =============================== CTA ================================ */
.zone-cta { display: inline-flex; justify-content: center; align-items: center; padding: 16px 36px; border: 2px solid #f4a63a; background: transparent; color: #f4a63a; font-size: 11px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; }

.zone-cta:hover { background: #f4a63a; color: #fff; }

/* =============================== MAP ================================ */
.zone-map-wrapper { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #1f1f1f; margin: 0 auto; }

.zone-map-wrapper iframe { width: 100%; height: 100%; border: 0; }

/* =============================== RESPONSIVE ================================ */
/* TABLETTE */
@media (max-width: 1000px) { .zone-intervention-inner { grid-template-columns: 1fr; text-align: center; } .zone-text { margin-left: auto; margin-right: auto; } .zone-lists { grid-template-columns: repeat(2, minmax(160px, 1fr)); justify-items: center; gap: 16px 40px; } .zone-city { justify-content: center; } .zone-cta { margin: 0 auto; } }

/* MOBILE */
@media (max-width: 600px) { .zone-lists { grid-template-columns: 1fr; gap: 14px; } }

/* TRÈS PETIT MOBILE */
@media (max-width: 500px) { .zone-intervention { padding: 70px 20px; } .zone-lists { gap: 12px; } }

/*-------------------------------------------------------------------------------------------------INTRO-----------------------------------------------------------------------------------------*/
/* =============================== INTRO COURATEL ================================ */
.intro-couratel { position: relative; padding: clamp(60px, 8vw, 120px) 5%; overflow: hidden; /* IMAGE DE FOND */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FUokExqCW67MVRlcnJUgEkrEBCDH2%2Fimages%2FDesign_sans_titre_-_2026-01-20T154145477_9frr.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; }

/* Contenu au-dessus du fond */
.intro-couratel-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.25) 100%); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }

.intro-couratel-content { justify-self: center; }

/* =============================== TEXTE ================================ */
.intro-couratel-content h2 { font-size: 3rem; line-height: 1.15; margin-bottom: 20px; color: #1a1a1a; }

.intro-couratel-highlight { color: #f89f34; }

.intro-couratel-text { font-size: 18px; line-height: 1.7; color: #555; max-width: 520px; margin-bottom: 35px; }

/* CTA */
.intro-couratel-cta { display: inline-block; padding: 16px 42px; border: 1.5px solid #f89f34; background: transparent; color: #f89f34; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; text-decoration: none; border-radius: 0; transition: all 0.3s ease; }

.intro-couratel-cta:hover { background: #f89f34; color: #ffffff; }

/* =============================== IMAGES ================================ */
.intro-couratel-images { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.intro-couratel-image { overflow: hidden; border-radius: 0; }

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

/* Tailles images */
.intro-couratel-image-large { grid-column: 1 / -1; height: 280px; }

.intro-couratel-image-small { height: 180px; }

/* =============================== RESPONSIVE ================================ */
@media (max-width: 900px) { .intro-couratel-inner { grid-template-columns: 1fr; text-align: center; } .intro-couratel-text { margin-left: auto; margin-right: auto; } .intro-couratel-images { max-width: 600px; margin: 0 auto; } }

@media (max-width: 480px) { .intro-couratel-image-large { height: 200px; } .intro-couratel-image-small { height: 160px; } .intro-couratel-cta { width: 100%; max-width: 280px; } }

/*-------------------------------------------------------------------------------------------------Services terrassement-----------------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }

.terre-coutarel-section { background: #f6f6f6; padding: 100px 40px; display: flex; justify-content: center; }

.terre-coutarel-container { max-width: 1400px; width: 100%; }

/* EN-TÊTE */
.terre-coutarel-header { text-align: center; margin-bottom: 60px; }

.terre-coutarel-title { font-size: clamp(32px, 5vw, 48px); font-weight: 400; color: #000; margin-bottom: 16px; }

.terre-coutarel-subtitle { font-size: 15px; color: #000; line-height: 1.6; max-width: 720px; margin: 0 auto; }

/* GRILLE */
.terre-coutarel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* CARTE */
.terre-coutarel-card { background: rgba(255, 255, 255, 0.3); border: 1px solid #F89F34; padding: 40px 28px; text-align: center; backdrop-filter: blur(10px); }

/* IMAGE */
.terre-coutarel-icon { width: 70px; height: 70px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; }

.terre-coutarel-icon img { width: 150%; height: 150%; object-fit: contain; }

/* TITRE CARTE */
.terre-coutarel-card-title { font-size: 20px; font-weight: 500; color: #000; margin-bottom: 14px; font-family: 'Georgia', serif; }

/* TEXTE */
.terre-coutarel-card-desc { font-size: 14px; line-height: 1.7; color: #000; }

/* RESPONSIVE */
@media (max-width: 1200px) { .terre-coutarel-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { .terre-coutarel-section { padding: 80px 20px; } .terre-coutarel-grid { grid-template-columns: 1fr; gap: 20px; } }

/*-------------------------------------------------------------------------------------------------Services assainissement-----------------------------------------------------------------------------------------*/
\
 * { margin: 0; padding: 0; box-sizing: border-box; }

/* =============================== SECTION GLOBALE ================================ */
.assainissement-section { position: relative; background: #f6f6f6; padding: 110px 20px 100px; overflow: hidden; }

.assainissement-container { max-width: 1400px; margin: 0 auto; }

/* =============================== FILIGRANE CENTRÉ SUR LE H2 ================================ */
.assainissement-watermark { position: absolute; top: 90px; /* ajuste précisément la hauteur du H2 */ left: 50%; transform: translateX(-50%); width: 380px; height: 380px; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FUokExqCW67MVRlcnJUgEkrEBCDH2%2Fimages%2FDesign_sans_titre_-_2026-01-19T154111344_f0b5.webp") center/contain no-repeat; opacity: 0.06; pointer-events: none; z-index: 1; }

/* =============================== HEADER ================================ */
.assainissement-header { text-align: center; max-width: 900px; margin: 0 auto 80px; position: relative; z-index: 2; }

.assainissement-logo { width: 70px; height: 70px; margin: 0 auto 22px; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FUokExqCW67MVRlcnJUgEkrEBCDH2%2Fimages%2FDesign_sans_titre_-_2026-01-19T154111344_f0b5.webp") center/contain no-repeat; }

.assainissement-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #f89f34; margin-bottom: 14px; display: inline-block; }

.assainissement-title { font-size: clamp(34px, 5vw, 56px); font-weight: 500; letter-spacing: 1px; color: #111; margin-bottom: 22px; }

.assainissement-subtitle { font-size: 17px; color: #555; line-height: 1.7; }

/* =============================== CARTES ================================ */
.assainissement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; position: relative; z-index: 2; }

.assainissement-card { background: #ffffff; border-radius: 0px; border: 0.01px solid #555; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }

.assainissement-card-image { height: 220px; background: linear-gradient(135deg, #e6e2db, #f4f1eb); }

.assainissement-card-content { padding: 28px 26px 32px; }

.assainissement-card-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #f89f34; /* ORANGE */ margin-bottom: 10px; display: inline-block; }

.assainissement-card-title { font-size: 20px; font-weight: 600; color: #111; margin-bottom: 14px; }

.assainissement-card-text { font-size: 15px; color: #555; line-height: 1.7; }

/* =============================== RESPONSIVE ================================ */
@media (max-width: 1024px) { .assainissement-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 640px) { .assainissement-grid { grid-template-columns: 1fr; } .assainissement-watermark { width: 260px; height: 260px; top: 150px; } }

/*-------------------------------------------------------------------------------------------------Accompagnement-----------------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }

.grille-coutarel-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1400px; margin: 0 auto; padding: 100px 40px; align-items: center; background-color: #fff !important; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FUokExqCW67MVRlcnJUgEkrEBCDH2%2Fimages%2FDesign_sans_titre_-_2026-01-20T154145477_9frr.webp") center/cover no-repeat; }

/* =============================== COLONNE IMAGES – MOSAÏQUE COMPACTE ================================ */
.grille-coutarel-images { position: relative; width: 100%; height: 520px; }

.grille-coutarel-image { position: absolute; object-fit: cover; border-radius: 0px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }

/* Grande image à gauche */
.image-1 { width: 55%; height: 80%; margin-top: 50px; top: 0; left: 0; }

/* Image en haut à droite */
.image-2 { width: 40%; height: 48%; top: 0; right: 0; }

/* Image en bas à droite */
.image-3 { width: 40%; height: 48%; bottom: 0; right: 0; }

/* =============================== COLONNE TEXTE ================================ */
.grille-coutarel-content { max-width: 520px; }

.grille-coutarel-title { font-size: clamp(36px, 5vw, 52px); font-weight: 600; color: #1a1a1a; margin-bottom: 30px; letter-spacing: -0.5px; }

.grille-coutarel-title span { color: #f89f34; }

.grille-coutarel-text { font-size: 18px; line-height: 1.8; color: #555; margin-bottom: 20px; }

/* =============================== RESPONSIVE (centrage uniquement) ================================ */
@media (max-width: 1024px) { .grille-coutarel-section { grid-template-columns: 1fr; gap: 50px; padding: 80px 30px; text-align: center; } .grille-coutarel-content { margin: 0 auto; } .grille-coutarel-images { margin: 0 auto; margin-bottom: 35px; } .image-2, .image-3 { display: none; } .image-1 { position: static; width: 100%; height: 100%; } }

@media (max-width: 768px) { .grille-coutarel-section { padding: 60px 20px; } .grille-coutarel-images { height: 280px; } }

/*-------------------------------------------------------------------------------------------------Réalisations-----------------------------------------------------------------------------------------*/
.realisation-cauterel { background: #ffffff; padding: 120px 40px 80px; text-align: center; }

.realisation-cauterel-subtitle { display: block; font-style: italic; font-size: 2.2rem; color: #f89f34; margin-bottom: 0px; }

.realisation-cauterel-titre { font-size: 56px; font-weight: 600; color: #1f1f1f; margin-bottom: 50px; margin-top: 2px; }

/* Filtres */
.realisation-cauterel-filtres { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; }

.realisation-cauterel-filtres button { background: transparent; border: 2px solid #f89f34; color: #f89f34; padding: 10px 26px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; }

.realisation-cauterel-filtres button:hover, .realisation-cauterel-filtres button.actif { background: #f89f34; color: #ffffff; }

/* Grille */
.realisation-cauterel-grille { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* Items – format paysage */
.realisation-cauterel-item { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }

.realisation-cauterel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive */
@media (max-width: 992px) { .realisation-cauterel-grille { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .realisation-cauterel-grille { grid-template-columns: 1fr; } .realisation-cauterel-titre { font-size: 32px; } }

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