@charset "UTF-8";
@import url(main.css);
a.btn-google:visited { color: white !important; }

a.sf-more:visited { color: white !important; }

#accueil { height: 0 !important; border: 0 !important; }

.spacer { display: none; }

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

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

.bandeau.border-bottom-1.row { background-color: #9aac61; }

.px-4.py-5.my-5.text-center.cta_banner.bg-sixthColor { background-color: white; }

span.display-5.fw-bold.text-body-emphasis.titles { color: #2e1308; }

a.p-3.fw-bold.fs-6.m-2.phone-number-button.text-decoration-none { background-color: #2e7415 !important; border-radius: 0 50px 50px 50px; }

a.p-3.fw-bold.fs-6.m-2.phone-number-button.text-decoration-none:hover { background-color: #9aac61 !important; color: white; }

.background-image-div-opacity { background: #b9c493; opacity: 1 !important; }

.display-5.titles.mt-lg-5.mx-5.mb-2.fw-bold.text-body-emphasis.first-banner-seo-page-title > h1 { color: 2e1308 !important; }

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

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover { background-color: #9aac61 !important; color: white; }

.px-5.pt-5.display-6.text-color-primary.titles { color: #2e1308 !important; }

span.display-4.fw-bold.lh-1.text-body-emphasis.mb-3.titles { display: none; }

/* ================================ CUSTOM FORMULAIRE DE CONTACT ====================================== */
form#formContact { background: #2e7415 !important; border: 2px solid #2e1308 !important; border-radius: 0px !important; }

.lh-1.mb-3.titles { background-color: #2e7415; padding-top: 50px; padding-bottom: 50px; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); }

button.w-100.btn.btn-outline-dark { border-radius: 0px 50px 50px 50px !important; background-color: transparent !important; border: 2px solid #FFFFFF; color: white; }

button.w-100.btn.btn-outline-dark:hover { background-color: #99ad63; color: white; }

.checkbox.mb-3 { color: white; }

/* ================================ CUSTOM BOUTON COOKIES ====================================== */
div#termsfeed-com---nb { border-radius: 0px; background-color: #2e7415; }

p#cc-nb-title { color: white; }

p#cc-nb-text { color: white; }

button.cc-nb-okagree { border-radius: 0px 50px 50px 50px !important; }

button.cc-nb-reject { border-radius: 0px 50px 50px 50px !important; }

button.cc-nb-changep { border-radius: 0px 50px 50px 50px !important; }

/* ================================ MODIFICATIONS FOOTER/HEADER ====================================== */
.col-8.col-md-2.mb-3.text-color-third { color: #331C0C !important; }

p.text-color-third { color: #331C0C !important; }

.d-flex.flex-column.flex-sm-row.justify-content-between.pt-4.my-2.border-top.text-center.text-color-third { color: #331C0C !important; }

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

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 50px 50px 50px !important; }

.bg-thirdColor:has(footer) { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FIdentite_visuelle_A_lecoute_de_larbre_nb83.webp"); background-size: contain; background-position: 38% bottom; background-repeat: no-repeat; padding-top: 100px; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { width: 150px; }

/* ================================ MODIFICATIONS BLOC SEO ====================================== */
.card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { border-radius: 0px !important; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); }

.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 { box-shadow: none !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 { box-shadow: none !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 { box-shadow: none !important; }

/* =========================================================================🌿 HERO D'ACCUEIL ===================================================================== */
.hero-arbre { position: relative; height: 100vh; min-height: 100vh; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FFond_hero_daccueil_1_5zlm.webp"); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; /* centrer horizontalement */ font-family: 'PT Serif', serif; color: #FFFFFF; overflow: hidden; /* pour l'overlay */ }

/* Overlay sombre */
.hero-arbre::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); /* intensité réglable */ z-index: 0; /* derrière le contenu */ }

/* Conteneur interne */
.hero-arbre-overlay { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; /* centrer horizontalement */ padding: 80px 7%; box-sizing: border-box; background: none; /* supprimer l’ancien marron */ }

/* ============================ 📝 CONTENU TEXTUEL ============================ */
.hero-arbre-content { max-width: 650px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }

/* Logo */
.hero-arbre-logo { width: 200px; margin: 0 auto 0px; display: block; }

.hero-arbre h1 { font-family: 'DM Serif Display', serif; font-size: 3.2rem; margin: 15px 0 10px; }

.hero-arbre-subtitle { font-size: 1.1rem; max-width: 480px; }

/* ============================ 🍃 BOUTONS FEUILLES ============================ */
.hero-arbre-buttons { margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }

.btn-custom, .btn-custom-outline { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; cursor: pointer; transition: all 0.2s ease; border-radius: 0px 50px 50px 50px; }

/* Bouton vert plein */
.btn-custom { background: #2E7415; color: #FFFFFF; border: none; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }

.btn-custom:hover { background: #99AD63; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }

/* Bouton contour blanc */
.btn-custom-outline { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }

.btn-custom-outline:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }

/* ============================ 🟩 CARTES CATÉGORIES ============================ */
.hero-categories { margin-top: 120px; display: flex; justify-content: center; align-items: stretch; gap: 20px; flex-wrap: nowrap; padding-bottom: 10px; }

.hero-cat-card { background: #FFFFFF; padding: 25px; text-align: center; border-radius: 0 0 20px 0px; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); width: clamp(120px, 15vw, 160px); flex-shrink: 1; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }

.hero-cat-card img { width: clamp(36px, 4vw, 50px); height: clamp(36px, 4vw, 50px); }

.hero-cat-card p { margin-top: 12px; font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 600; color: #331C0C; font-family: 'PT Serif', serif; }

/* ============================ 📱 RESPONSIVE ============================ */
@media (max-width: 960px) { .hero-arbre { height: 100vh; min-height: 100vh; padding-bottom: 0; } }

@media (max-width: 900px) { .hero-categories, .hero-cat-card { display: none !important; } .hero-arbre h1 { font-size: 2.4rem; } }

@media (max-height: 820px) { /* laptop typique */ .hero-categories { margin-top: 50px; /* encore plus compact pour petits écrans portables */ } }

@media (max-width: 600px) { .hero-arbre h1 { font-size: 2rem; } .hero-arbre-subtitle { font-size: 1rem; } }

/* =========================================================================🌿 CARDS SERVICES ===================================================================== */
.services-section { padding: 100px 7%; background: #FFFFFF; text-align: center; }

/* TITRES */
.services-header h2 { font-family: 'DM Serif Display', serif; font-size: 2.7rem; color: #2E7415; margin-bottom: 5px; }

.services-header p { font-family: 'PT Serif', serif; font-size: 1rem; color: #331C0C; opacity: 0.7; margin-bottom: 50px; }

/* GRID */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; }

/* CARDS */
.service-card { background: #2E7415; border-radius: 0 0 20px 0px; overflow: hidden; position: relative; /* angle coupé en bas à droite */ clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); }

/* 1 carte sur 2 en vert clair */
.service-card:nth-child(even) { background: #CDE5B7; }

/* Adapter les textes pour les cartes claires */
.service-card:nth-child(even) .service-content h3, .service-card:nth-child(even) .service-content p { color: #2E7415; /* texte foncé */ }

.service-card:nth-child(even) .btn-service { color: #2E7415; border-color: #2E7415; }

.service-card:nth-child(even) .btn-service:hover { background: rgba(0, 0, 0, 0.05); }

.service-img img { width: 100%; height: 200px; object-fit: cover; }

/* CONTENU */
.service-content { padding: 35px 25px 40px; text-align: center; color: #FFFFFF; }

.service-content h3 { font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: #FFFFFF; margin-bottom: 10px; }

.service-content p { font-family: 'PT Serif', serif; font-size: 0.95rem; color: #FFFFFF; opacity: 0.9; margin-bottom: 25px; }

.btn-service { display: inline-block; background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; padding: 10px 26px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; text-decoration: none; /* Forme feuille */ border-radius: 0px 40px 40px 40px; /* Hover soft */ transition: transform 0.25s ease, box-shadow 0.25s ease; }

.btn-service:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); /* 🔽 ombre plus légère */ }

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

@media (max-width: 650px) { .services-grid { grid-template-columns: 1fr; } }

/* =========================================================================🌿 A PROPOS ===================================================================== */
.bloc-fixe-top { height: 150px; background: #fff; }

/* ================================ SECTION BLANCHE AU-DESSUS (permet le chevauchement du bloc) =================================== */
.bloc-fixe-top { height: 150px; background: #fff; }

/* ================================ SECTION AVEC IMAGE FIXE (PARALLAX) =================================== */
.bloc-fixe { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FFond_hero_daccueil_w1ln.webp?alt=media&token=4b81058d-b7e2-447c-a2d2-22297b57d3b7"); background-size: cover; background-position: center; background-attachment: fixed; padding: 120px 0; position: relative; z-index: 1; }

/* Overlay sombre */
.bloc-fixe::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); /* intensité réglable */ z-index: -1; }

/* ================================ CONTENEUR =================================== */
.bloc-fixe-container { width: 90%; max-width: 1300px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }

/* ================================ BLOC TEXTE (fond vert) =================================== */
.bloc-fixe-texte { background: #2E7415; padding: 50px 60px; color: #FFFFFF; border-radius: 0 0 20px 0px; /* angle coupé */ clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); /* effet chevauché (monte sur le blanc au-dessus) */ margin-top: -200px; position: relative; z-index: 10; }

.bloc-fixe-texte h2 { font-family: 'DM Serif Display', serif; font-size: 2rem; margin-bottom: 20px; color: #FFFFFF; }

.bloc-fixe-texte p { font-family: 'PT Serif', serif; line-height: 1.6; margin-bottom: 25px; }

/* ================================ LISTE AVEC FLÈCHES =================================== */
.bloc-fixe-liste { list-style: none; padding: 0; margin: 0; }

.bloc-fixe-liste li { margin-bottom: 18px; font-family: 'PT Serif', serif; position: relative; padding-left: 25px; font-size: 1rem; }

/* Flèche */
.bloc-fixe-liste li::before { content: "›"; position: absolute; left: 0; top: 0; color: #CDE5B7; font-size: 1.3rem; }

/* ================================ RESPONSIVE =================================== */
@media (max-width: 900px) { .bloc-fixe-container { grid-template-columns: 1fr; } .bloc-fixe-texte { margin-top: -100px; } .bloc-fixe-image { height: 250px; } }

@media (max-width: 600px) { .bloc-fixe-top { height: 100px; } .bloc-fixe-texte { padding: 40px 30px; margin-top: -80px; } }

/* =========================================================================🌿 SAVOIR-FAIRE ===================================================================== */
/* SECTION SAVOIR-FAIRE STYLE TEAM */
.savoir-faire-team { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; padding: 100px 7%; background: #FFFFFF; }

/* COLONNE GAUCHE */
.sf-left h2 { font-family: 'DM Serif Display', serif; font-size: 2.8rem; line-height: 1.1; color: #2E7415; }

.sf-left h2 span { color: #2E7415; }

.sf-left p { font-family: 'PT Serif', serif; font-size: 1rem; color: #331C0C; opacity: 0.85; margin: 18px 0 30px; max-width: 360px; }

/* CTA texte simple */
.sf-more { display: inline-block; background: #2E7415; color: #FFFFFF; padding: 10px 26px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 0px 40px 40px 40px; transition: transform 0.25s ease, box-shadow 0.25s ease; }

.sf-more:hover { color: #FFFFFF; background: #99ad63; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); }

/* GRID DES CARTES À DROITE */
.sf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

/* CARTE SAVOIR-FAIRE */
.sf-card-team { background: #CDE5B7; border-radius: 0 0 20px 0; overflow: hidden; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12); position: relative; padding: 0; /* Très important pour éviter le blanc autour de l’image */ clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); }

/* IMAGE EN HAUT */
.sf-card-team img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* CONTENU DE LA CARTE */
.sf-card-body { padding: 22px 22px 26px; }

.sf-card-body h3 { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: #331C0C; margin-bottom: 10px; }

.sf-card-body p { font-family: 'PT Serif', serif; font-size: 0.95rem; color: #331C0C; opacity: 0.85; line-height: 1.5; }

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

@media (max-width: 900px) { .savoir-faire-team { grid-template-columns: 1fr; text-align: center; } .sf-left { margin-bottom: 40px; } .sf-left p { margin-left: auto; margin-right: auto; } }

@media (max-width: 650px) { .sf-cards { grid-template-columns: 1fr; } }

/* =========================================================================🌿 MAPS ===================================================================== */
/* SECTION GLOBALE */
.contact-map-section { position: relative; width: 100%; margin-top: 0px; padding-bottom: 0px; /* espace sous les cards pour que le footer ne touche pas */ }

/* MAP EN FOND */
.contact-map-bg { width: 100%; height: 450px; overflow: hidden; position: relative; }

.contact-map-bg iframe { width: 100%; height: 100%; filter: brightness(0.9); /* sombre comme ton exemple */ }

/* CONTAINER DES CARDS */
.contact-map-cards { position: relative; /* plus d'absolu -> reste dans le flux */ max-width: 1100px; margin: -120px auto 0; /* remonte les cards sur la map */ display: flex; justify-content: center; gap: 35px; flex-wrap: nowrap; /* une seule ligne */ white-space: nowrap; z-index: 2; /* au-dessus de la map */ }

/* CARDS */
.contact-card { background: #2E7415; padding: 40px 35px; width: 260px; text-align: center; border-radius: 0 0 20px 0px; /* angle coupé */ clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15); }

.icon-circle { background: none; width: auto; height: auto; border-radius: 0; margin: 0 auto 15px; display: flex; justify-content: center; align-items: center; }

.icon-circle img { width: 40px; height: 40px; }

/* TITRE / TEXTE */
.contact-card h3 { font-family: 'DM Serif Display', serif; margin-bottom: 8px; color: #FFFFFF; }

.contact-card p { font-family: 'PT Serif', serif; color: #FFFFFF; opacity: 0.8; }

/* RESPONSIVE */
@media (max-width: 900px) { .contact-map-cards { flex-direction: column; /* les cartes passent en colonne */ align-items: center; gap: 25px; white-space: normal; /* autorise les retours à la ligne */ margin-top: -100px; /* overlap plus doux sur mobile */ } .contact-card { width: 90%; max-width: 360px; } }

@media (max-width: 600px) { .contact-map-bg { height: 320px; } .contact-card { padding: 30px 25px; } .icon-circle img { width: 55px; height: 55px; } }

/* =========================================================================🌿 AVIS GOOGLE ===================================================================== */
.photo-bg { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FFond_hero_daccueil_w1ln.webp?alt=media&token=4b81058d-b7e2-447c-a2d2-22297b57d3b7"); /* 🔥 remplace ici */ background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; padding: 100px 7%; position: relative; }

/* OVERLAY sombre pour lisibilité */
.photo-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); /* tu peux mettre #331C0C70 pour un marron */ z-index: 0; }

/* CONTENU AU-DESSUS */
.google-reviews-section * { position: relative; z-index: 1; }

/* Header */
.google-reviews-header { text-align: center !important; width: 100%; }

.google-reviews-header h2 { font-family: 'DM Serif Display', serif; font-size: 2.4rem; color: #FFFFFF; margin-bottom: 10px; }

.google-reviews-header p { font-family: 'PT Serif', serif; color: #FFFFFF; opacity: 0.85; margin-bottom: 50px; }

/* GRID */
.google-reviews-grid { display: grid; gap: 35px; grid-template-columns: repeat(3, 1fr); }

.review-card { background: #FFFFFF; border-radius: 0 0 20px 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); padding: 35px 30px; text-align: left; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); /* --- UNIFORMISATION HAUTEUR --- */ min-height: 200px; /* ajuste selon ton rendu */ display: flex; flex-direction: column; justify-content: space-between; }

/* Stars */
.review-stars { font-size: 1.4rem; color: #2E7415; margin-bottom: 12px; font-weight: 700; letter-spacing: 2px; font-family: 'DM Serif Display', serif; }

/* Name */
.review-card h3 { font-family: 'DM Serif Display', serif; font-size: 1.2rem; color: #2E7415; margin-bottom: 10px; }

/* Text */
.review-text { font-family: 'PT Serif', serif; font-size: 0.95rem; color: #331C0C; opacity: 0.85; line-height: 1.5; }

/* Date */
.review-date { display: inline-block; margin-top: 12px; font-family: 'PT Serif', serif; font-size: 0.82rem; color: #2E7415; opacity: 0.7; }

/* CTA */
.google-reviews-cta { text-align: center !important; width: 100%; margin-top: 40px; }

.btn-google { display: inline-block; background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; padding: 10px 26px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 0px 40px 40px 40px; transition: transform 0.25s ease, box-shadow 0.25s ease; }

.btn-google:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); color: #FFFFFF; }

/* RESPONSIVE */
@media (max-width: 1000px) { .google-reviews-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 650px) { .google-reviews-grid { grid-template-columns: 1fr; } }

/* ========================================================================🌿 EN TETE SERVICES ===================================================================== */
.header-elagage { position: relative; padding: 120px 7%; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FFond_hero_daccueil_1_5zlm.webp"); background-size: cover; background-position: center; color: #FFFFFF; }

/* Overlay vert */
.header-elg-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(51, 28, 12, 0.15), rgba(51, 28, 12, 0.35)); }

/* Content */
.header-elg-content { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 70px; z-index: 2; }

/* Colonne gauche */
.header-elg-left { max-width: 550px; }

.header-eyebrow { letter-spacing: 0.20em; text-transform: uppercase; font-size: 0.9rem; opacity: 0.9; }

.header-elg-left h1 { font-family: 'DM Serif Display', serif; font-size: 3rem; line-height: 1.2; margin: 15px 0 20px; }

.header-elg-left p { font-family: 'PT Serif', serif; font-size: 1.1rem; margin-bottom: 30px; max-width: 480px; }

/* Bouton feuille */
.btn-elg { display: inline-block; background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; padding: 10px 26px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; text-decoration: none; /* Forme feuille */ border-radius: 0px 40px 40px 40px; /* Hover soft */ transition: transform 0.25s ease, box-shadow 0.25s ease; }

.btn-elg:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); /* 🔽 ombre plus légère */ }

/* Colonne droite */
.header-elg-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }

/* Cartes */
.elg-card { background: #FFFFFF; color: #2E7415; padding: 35px 28px; border-radius: 0 0 20px 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); transition: 0.25s ease; cursor: pointer; }

/* HOVER : carte verte + textes blancs */
.elg-card:hover { background: #2E7415 !important; transform: translateY(-4px); box-shadow: 0 20px 34px rgba(0, 0, 0, 0.22); }

/* Titre devient blanc */
.elg-card:hover h3 { color: #FFFFFF !important; }

/* Lien devient blanc */
.elg-card:hover a { color: #FFFFFF !important; }

.elg-card h3 { font-family: 'DM Serif Display', serif; font-size: 1.3rem; margin-bottom: 12px; color: #2E7415; }

.elg-card a { font-family: 'PT Serif', serif; font-weight: 700; text-decoration: none; color: #2E7415; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; transition: 0.2s ease; pointer-events: none; }

.elg-card a:hover { color: #99AD63; }

/* RESPONSIVE */
@media (max-width: 1000px) { .header-elg-content { flex-direction: column; } .header-elg-right { width: 100%; } }

/* ========================================================================🌿 QUALITES ===================================================================== */
/* SECTION */
.qualites-section { background: #FFFFFF; padding: 50px; text-align: center; }

/* GRID */
.qualites-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; }

/* CARD */
.qualite-card { background: #FFFFFF; padding: 35px 30px; text-align: center; border-radius: 0 0 20px 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1); transition: 0.25s ease; }

/* ICONES PNG */
.qualite-icon img { width: 52px; /* taille parfaite pour ta DA */ height: 52px; object-fit: contain; display: block; margin: 0 auto 15px; filter: brightness(0) saturate(100%) invert(38%) sepia(77%) saturate(308%) hue-rotate(63deg) brightness(92%) contrast(95%); /* → recolorisation en vert #2E7415 */ }

/* TITRES */
.qualite-card h3 { font-family: 'DM Serif Display', serif; color: #2E7415; font-size: 1.25rem; margin-bottom: 10px; }

/* TEXTES */
.qualite-card p { font-family: 'PT Serif', serif; color: #331C0C; opacity: .85; line-height: 1.55; font-size: 0.95rem; }

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

@media (max-width: 700px) { .qualites-grid { grid-template-columns: 1fr; } }

/* ========================================================================🌿 SERVICES DROITE ================================================================== */
.presentation-taille-photo { background: #FFFFFF; padding: 100px 7%; }

/* GRID 50/50 */
.taille-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* TEXTE */
.taille-text h2 { font-family: 'DM Serif Display', serif; font-size: 2.4rem; color: #2E7415; margin-bottom: 20px; }

.taille-text p { font-family: 'PT Serif', serif; font-size: 1.05rem; line-height: 1.7; color: #331C0C; opacity: .9; margin-bottom: 22px; }

.elagage-eyebrow { font-family: 'PT Serif', serif; text-transform: uppercase; letter-spacing: 0.15em; color: #2E7415; font-size: 0.85rem; opacity: 0.8; display: block; margin-bottom: 8px; }

/* IMAGE + SHAPE CONTAINER */
.taille-image-wrapper { position: relative; width: 100%; height: 450px; }

/* FORME DERRIÈRE L’IMAGE — OPTION D */
.taille-bg-shape { position: absolute; right: 50px; /* dépasse vers l'extérieur */ top: 40px; width: 75%; height: 80%; background: #CDE5B7; /* vert clair de ta palette */ border-radius: 0 0px 0px 0; /* forme douce arrondie */ z-index: 1; }

/* IMAGE – AU-DESSUS DE LA FORME */
.taille-image { position: relative; z-index: 2; width: 80%; height: 80%; object-fit: cover; border-radius: 0px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.12); }

/* RESPONSIVE */
@media (max-width: 950px) { .taille-grid { grid-template-columns: 1fr; } .taille-image-wrapper { height: 350px; } .taille-bg-shape { right: -20px; width: 85%; } }

/* ========================================================================🌿 SERVICES GAUCHE ================================================================== */
.presentation-taille-photo-inv { background: #FFFFFF; padding: 100px 7%; }

/* GRID 50/50 */
.taille-grid-inv { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* TEXTE */
.taille-text-inv h2 { font-family: 'DM Serif Display', serif; font-size: 2.4rem; color: #2E7415; margin-bottom: 20px; }

.taille-text-inv p { font-family: 'PT Serif', serif; font-size: 1.05rem; line-height: 1.7; color: #331C0C; opacity: .9; margin-bottom: 22px; }

.elagage-eyebrow-inv { font-family: 'PT Serif', serif; text-transform: uppercase; letter-spacing: 0.15em; color: #2E7415; font-size: 0.85rem; opacity: 0.8; display: block; margin-bottom: 8px; }

/* IMAGE + SHAPE */
.taille-image-wrapper-inv { position: relative; width: 100%; height: 450px; }

/* SHAPE — VERSION INVERSE */
.taille-bg-shape-inv { position: absolute; left: -80px; /* dépasse maintenant à gauche */ top: 40px; width: 75%; height: 80%; background: #CDE5B7; border-radius: 0; z-index: 1; }

/* IMAGE */
.taille-image-inv { position: relative; z-index: 2; width: 80%; height: 80%; object-fit: cover; border-radius: 0px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.12); }

/* RESPONSIVE */
@media (max-width: 950px) { .taille-grid-inv { grid-template-columns: 1fr; } .taille-image-wrapper-inv { height: 350px; } .taille-bg-shape-inv { left: -20px; width: 85%; } }

/* ========================================================================🌿 REALISATIONS ================================================================== */
.realisations-section { background-color: #FFFFFF; /* blanc cassé doux */ padding: 100px 7%; text-align: center; }

/* ----- ONGLET / BOUTONS ----- */
.realisations-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 40px; }

.tab-button { font-family: 'PT Serif', serif; background-color: #2E7415; color: #FFFFFF; border: none; padding: 10px 22px; border-radius: 0px 20px 20px 20px; /* forme feuille */ cursor: pointer; transition: all 0.3s ease; font-size: 0.95rem; }

.tab-button:hover { background-color: #245C11; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }

.tab-button.active { background-color: #CDE5B7; color: #2E1308; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }

/* ----- CONTENU DES ONGLET ----- */
.tab-content { display: none; animation: fadeIn 0.5s ease; }

.tab-content.active { display: block; }

/* ----- GALERIE MOSAÏQUE (3 colonnes) ----- */
.gallery { display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 25px; margin-top: 40px; }

.gallery img { width: 300px; height: 300px; object-fit: cover; object-position: center; border-radius: 0; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: #DFD8D2; }

/* ----- ANIMATION ----- */
@keyframes fadeIn { from { opacity: 0;
    transform: translateY(10px); }
  to { opacity: 1;
    transform: translateY(0); } }

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

@media (max-width: 650px) { .gallery { grid-template-columns: 1fr; } .gallery img { width: 100%; max-width: 100%; height: auto; } }

/* =========================================================================🌿 HEADER RÉALISATIONS ============================================================== */
.header-realisations { position: relative; width: 100%; height: 380px; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FFond_hero_daccueil_w1ln.webp?alt=media&token=4b81058d-b7e2-447c-a2d2-22297b57d3b7"); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }

/* Overlay brun naturel */
.header-real-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(46, 19, 8, 0.55), rgba(46, 19, 8, 0.45)); }

/* Contenu */
.header-real-content { position: relative; text-align: center; color: #FFFFFF; padding: 0 20px; max-width: 900px; }

.header-realisations h1 { font-family: 'DM Serif Display', serif; font-size: 3rem; margin-bottom: 15px; color: #FFFFFF; }

.header-realisations p { font-family: 'PT Serif', serif; font-size: 1.2rem; opacity: .9; line-height: 1.6; }

/* RESPONSIVE */
@media (max-width: 800px) { .header-realisations { height: 300px; } .header-realisations h1 { font-size: 2.3rem; } .header-realisations p { font-size: 1rem; } }

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

.animated-border-button { background-color: transparent !important; transition: background-color 0.3s ease; color: white !important; text-transform: uppercase; font-family: 'DM Serif Display', serif; }

.animated-border-button.scrolled { color: #331C0C !important; }

.navbar { background-color: transparent !important; transition: background-color 0.3s ease; }

.navbar.scrolled { background-color: white !important; }

.navbar-brand { width: unset; }

.logo_scrolled { content: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FK3plqeOix7WWaEigHGtcMkEtOAo1%2Fimages%2FLogo_A_lecoute_de_larbre_9384.webp?alt=media&token=a57b072c-fe5a-46bc-8375-09de584cacac"); }

@media only screen and (max-width: 768px) { .navbar-nav { background-color: white; } .navbar-collapse { background-color: white; } .animated-border-button { color: #331C0C !important; } }

@media only screen and (max-width: 1172px) { h1 { font-size: calc(1rem + 1.5vw) !important; } }

.animated-border-button.scrolled:after { background-color: #331C0C !important; }

.animated-border-button:after { background-color: white !important; }

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