@charset "UTF-8";
@import url(main.css);
/*---------------------- bouton XX -------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;600;700&display=swap");
:root { --h: 145; /* teinte du vert (0–360) */ --s: 55%; /* saturation */ --l-dark: 25%; /* vert foncé */ --l-light: 50%; /* vert clair */ --radius: 999px; /* pill shape */ --blur: 20px; /* intensité du flou */ --glass-bg: rgba(255, 255, 255, 0.05); /* voile transparent */ }

/* Bouton lien */
a.button_homepageScreen { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: 0.9rem 2rem; font: 600 1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); /* bordure verre */ border-radius: var(--radius); /* Dégradé vert très léger + verre translucide */ background: linear-gradient(135deg, hsla(var(--h), var(--s), var(--l-dark), 0.25), hsla(var(--h), var(--s), var(--l-light), 0.25)), var(--glass-bg); /* Effet glass */ backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); /* Safari */ /* Relief subtil */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease; -webkit-tap-highlight-color: transparent; }

a.button_homepageScreen:hover { background: linear-gradient(135deg, hsla(var(--h), var(--s), calc(var(--l-dark)), 0.35), hsla(var(--h), var(--s), calc(var(--l-light)), 0.35)), var(--glass-bg); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

a.button_homepageScreen:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

a.button_homepageScreen:focus-visible { outline: none; box-shadow: 0 0 0 4px hsla(var(--h), 65%, 55%, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* État “désactivé” pour un lien */
a.button_homepageScreen[aria-disabled="true"], a.button_homepageScreen.is-disabled { opacity: .6; pointer-events: none; cursor: not-allowed; }

/*-------------------- bouton header -------------------------*/
:root { --h: 145; /* teinte du vert (0–360) */ --s: 55%; /* saturation */ --l-dark: 25%; /* vert foncé */ --l-light: 50%; /* vert clair */ --radius: 999px; /* pill shape */ --blur: 20px; /* intensité du flou */ --glass-bg: rgba(255, 255, 255, 0.05); /* voile transparent */ }

/* Bouton lien */
a.button_homepageScreen { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: 0.9rem 2rem; font: 600 1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); /* bordure verre */ border-radius: var(--radius); /* Dégradé vert très léger + verre translucide */ background: linear-gradient(135deg, hsla(var(--h), var(--s), var(--l-dark), 0.25), hsla(var(--h), var(--s), var(--l-light), 0.25)), var(--glass-bg); /* Effet glass */ backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); /* Safari */ /* Relief subtil */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease; -webkit-tap-highlight-color: transparent; }

a.button_homepageScreen:hover { background: linear-gradient(135deg, hsla(var(--h), var(--s), calc(var(--l-dark)), 0.35), hsla(var(--h), var(--s), calc(var(--l-light)), 0.35)), var(--glass-bg); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

a.button_homepageScreen:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

a.button_homepageScreen:focus-visible { outline: none; box-shadow: 0 0 0 4px hsla(var(--h), 65%, 55%, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* État “désactivé” pour un lien */
a.button_homepageScreen[aria-disabled="true"], a.button_homepageScreen.is-disabled { opacity: .6; pointer-events: none; cursor: not-allowed; }

/*------------------------------- XX ---------------------------------------------*/
:root { --h: 145; /* teinte du vert (0–360) */ --s: 55%; /* saturation */ --l-dark: 25%; /* vert foncé */ --l-light: 50%; /* vert clair */ --radius: 999px; /* pill shape */ --blur: 20px; /* intensité du flou */ --glass-bg: rgba(255, 255, 255, 0.05); /* voile transparent */ }

/* Style commun */
.button_homepageScreen, .button-header-telephone, .button_homepageDoubleScreen { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: 0.9rem 2rem; font: 600 1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); /* bordure verre */ border-radius: var(--radius); background: linear-gradient(135deg, hsla(var(--h), var(--s), var(--l-dark), 0.25), hsla(var(--h), var(--s), var(--l-light), 0.25)), var(--glass-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease; -webkit-tap-highlight-color: transparent; }

/* Hover */
.button_homepageScreen:hover, .button-header-telephone:hover, .button_homepageDoubleScreen:hover { background: linear-gradient(135deg, hsla(var(--h), var(--s), var(--l-dark), 0.35), hsla(var(--h), var(--s), var(--l-light), 0.35)), var(--glass-bg); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

/* Active */
.button_homepageScreen:active, .button-header-telephone:active, .button_homepageDoubleScreen:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* Focus */
.button_homepageScreen:focus-visible, .button-header-telephone:focus-visible, .button_homepageDoubleScreen:focus-visible { outline: none; box-shadow: 0 0 0 4px hsla(var(--h), 65%, 55%, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* Désactivé */
.button_homepageScreen[disabled], .button-header-telephone[disabled], .button_homepageDoubleScreen[disabled], .button_homepageScreen.is-disabled, .button-header-telephone.is-disabled, .button_homepageDoubleScreen.is-disabled { opacity: .6; pointer-events: none; cursor: not-allowed; }

/*-------------------------- tous les boutons -----------------------*/
.button_homepageScreen, .button-header-telephone, .button_homepageDoubleScreen { min-height: 48px; padding-inline: 20px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: .5rem; }

/*--------------------------Cartes de services Custom----------------------*/
.custom-cards-2 { width: 100%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; max-width: 1500px; margin: 50px auto 100px auto; }

.card__img { visibility: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 235px; border-top-left-radius: 12px; border-top-right-radius: 12px; }

.card__img--hover { transition: 0.2s all ease-out; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; position: absolute; height: 235px; border-top-left-radius: 12px; border-top-right-radius: 12px; top: 0; }

.custom-card-2 { margin-right: 25px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F8uP7VxqC26QunERVxNqflwbqUkx2%2Fimages%2F1_wmdu.webp); background-size: cover; background-attachment: fixed; background-position: center; width: 33.3%; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); }

.custom-card-2:hover { box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1); transform: scale(1.1, 1.1); background-color: white !important; background-image: unset; }

.card__info { z-index: 2; background-color: transparent; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding: 16px 24px 24px 24px; }

.card__title { margin-top: 5px; margin-bottom: 10px; }

.custom-card-2:hover .card__img--hover { height: 100%; opacity: 0.4; }

.custom-card-2:hover .card__info { position: relative; }

.custom-card-2:hover .card__info-hover { opacity: 1; }

@media (max-width: 1024px) { .custom-cards-2 { flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */ padding: 0 5rem; } .custom-card-2 { width: 48%; /* Deux cartes par ligne sur tablette */ margin-bottom: 20px; } }

@media (max-width: 768px) { .custom-card-2 { width: 100%; /* Une carte par ligne sur mobile */ margin-right: 0; /* Supprime les marges */ } }

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

/*------------------ CTA ---------------------*/
.cta-section { text-align: center; margin: 5rem 0; }

.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

/* Traits avant/après */
.cta-line { display: block; width: 1px; height: 80px; background: rgba(0, 0, 0, 0.15); }

/* Bouton en glassmorphisme vert */
.cta-button { display: inline-block; padding: 0.9rem 2.2rem; font-size: 1.1rem; font-weight: 600; color: #ffffff !important; text-decoration: none; border-radius: 50px; background: linear-gradient(135deg, rgba(29, 99, 58, 0.4), rgba(57, 198, 116, 0.4)), rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; }

.cta-button:hover { background: linear-gradient(135deg, rgba(40, 138, 81, 0.55), rgba(77, 203, 130, 0.55)), rgba(255, 255, 255, 0.12); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25); }

/*---------------- bloc netlincking -----*/
/* === Fonts (chargement via balise <link> recommandé dans le <head>) === */
/* Supprimer si déjà inclus dans le HTML */
/* === Variables === */
:root { --container-max: 1380px; --radius: 22px; --gap: clamp(1.2rem, 2.2vw, 2rem); --shadow: 0 20px 40px rgba(0,0,0,.16); /* image de feuillage intégrée AU BLOC (remplace l’URL par la tienne) */ --foliage-img: url("https://images.unsplash.com/photo-1484318571209-661cf29a69c3?q=80&w=1600"); --text:#16301f; --white:#fff; }

/* ===== Section ===== */
.prestations-block { padding: clamp(2rem, 3vw, 3rem) 0; }

/* ===== Carte principale (fond feuillage + voile CLAIR flouté) ===== */
.prestations-inner { position: relative; max-width: var(--container-max); margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background-image: var(--foliage-img); background-repeat: no-repeat; background-size: cover; background-position: center 55%; /* évite trop de ciel (dominante bleue) */ background-blend-mode: normal; /* neutralise les mélanges globaux */ filter: none; /* évite un filtre hérité du CMS */ padding: clamp(1.2rem, 2vw, 1.8rem); display: grid; grid-template-columns: 1.05fr 1.95fr; /* gauche | droite */ gap: var(--gap); align-items: center; }

/* Voile clair + flou (lumineux, pas sombre) */
.prestations-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 480px at 18% 22%, rgba(255, 255, 255, 0.18), transparent 60%), radial-gradient(1200px 480px at 82% 78%, rgba(255, 255, 255, 0.14), transparent 60%), rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 0; }

/* le contenu passe au-dessus du voile */
.prestations-left, .prestations-right { position: relative; z-index: 1; }

/* ===== Colonne gauche ===== */
.prestations-block .prestations-left h2 { font-family: "Fraunces", serif !important; font-weight: 700 !important; font-optical-sizing: auto; font-synthesis-weight: auto; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.12; color: var(--text); margin: 0 0 .6rem 0; }

.prestations-left p { font-family: Inter, system-ui, sans-serif; color: #244633; margin: 0 0 1.1rem 0; max-width: 52ch; }

/* === Bouton vert glass (style « Voir la fiche ») — seulement dans ce bloc */
.prestations-left .btn-glass { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.8rem; border-radius: 999px; color: #ffffff; font-weight: 700; text-decoration: none; background: linear-gradient(135deg, rgba(58, 169, 120, 0.38), rgba(178, 228, 199, 0.38)), rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }

.prestations-left .btn-glass:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(58, 169, 120, 0.48), rgba(178, 228, 199, 0.48)), rgba(255, 255, 255, 0.12); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ===== Colonne droite : 3 vignettes ===== */
.prestations-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }

/* Carte cliquable */
.card-thumb { position: relative; display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); isolation: isolate; transform: translateZ(0); text-decoration: none; background: none; /* pas de double arrière-plan */ }

/* Image */
.card-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; display: block; transition: transform .45s ease; }

/* voile sombre léger */
.card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0) 55%); opacity: .55; transition: opacity .3s ease; }

/* Titre au survol */
.card-title { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: auto; width: max-content; max-width: 92%; padding: .5rem .9rem; border-radius: 6px; font-family: "Fraunces", serif; font-weight: 700; letter-spacing: .2px; color: #fff; font-size: 1.1rem; background: rgba(0, 0, 0, 0.55); opacity: 0; translate: 0 8px; transition: opacity .28s ease, translate .28s ease; }

/* Hover/focus */
.card-thumb:hover img { transform: scale(1.06); }

.card-thumb:hover::after { opacity: .35; }

.card-thumb:hover .card-title, .card-thumb:focus-visible .card-title { opacity: 1; translate: 0 0; outline: none; }

/* ===== Responsive ===== */
@media (max-width: 1100px) { .prestations-inner { grid-template-columns: 1fr; } .prestations-right { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 760px) { .prestations-right { grid-template-columns: repeat(2, 1fr); } .card-title { font-size: 1rem; } }

@media (max-width: 480px) { .prestations-right { grid-template-columns: 1fr; } .card-title { opacity: 1; translate: 0 0; } /* mobile : visible par défaut */ }

/*----------------------- tel + adresse bloc maps ---------------*/
.item-content .d-flex.py-3 { color: #000000 !important; /* texte noir */ }

/*------------ Titre H1, H2, H3 -----------------*/
/* Style des H1, H2, H3 avec barre verticale à gauche */
h1, h2 { position: relative; padding-left: 12px; /* espace entre le texte et la barre */ }

/* Barre verticale */
h1::before, h2::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; /* prend toute la hauteur du titre */ width: 2px; /* épaisseur de la barre */ background-color: #2D531A; /* ta couleur */ border-radius: 2px; }

/*---------------------------- arrière-plan bloc texte + image ------------------------*/
.col-lg-7.my-0.order-1.order-lg-1.order-xl-1.order-xxl-1 { position: relative; z-index: 1; }

/* Demi-cercle ovale centré et plus bas */
.col-lg-7.my-0.order-1.order-lg-1.order-xl-1.order-xxl-1::before { content: ""; position: absolute; top: 100px; /* plus bas qu'avant (ajuste selon ton besoin) */ left: 50%; transform: translateX(-50%); width: 400px; /* largeur ovale */ height: 200px; /* hauteur ovale */ background: rgba(46, 77, 46, 0.1); border-top-left-radius: 400px; border-top-right-radius: 400px; z-index: -1; }

/*---------------- HEADER --------*/
/************ NAVBAR GLASS + RESET ************/
nav.navbar, .navbar.nav-fixed.navbar-expand-lg.fixed-top.navbar-fixed-top.text-color-secondary { /* verre + blur */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); padding-block: 10px; }

/* Menu : neutralise fonds/soulignures hérités */
nav.navbar .navbar-nav, nav.navbar .navbar-nav * { background: transparent !important; background-image: none !important; text-decoration: none !important; box-shadow: none !important; border: 0 !important; }

nav.navbar .navbar-nav { gap: 22px; }

nav.navbar .navbar-nav .nav-link { color: #fff !important; display: inline-block !important; padding: .55rem .9rem !important; border-radius: 10px !important; line-height: 1 !important; }

nav.navbar .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.1) !important; }

nav.navbar .navbar-nav .nav-link.active, nav.navbar .navbar-nav .show > .nav-link { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; }

/* Si tu as plusieurs groupes .navbar-nav, le DERNIER part à droite tout seul */
nav.navbar .navbar-collapse > .navbar-nav:last-of-type { margin-left: auto; }

/* Variante quand la navbar traverse une section très claire */
nav.navbar.is-on-light { background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)), rgba(255, 255, 255, 0.22) !important; border-bottom-color: rgba(255, 255, 255, 0.55) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); }

/* (Option) Mobile: on peut réduire un peu l’écart entre liens */
@media (max-width: 992px) { nav.navbar .navbar-nav { gap: 10px; } }

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