@charset "UTF-8";
@import url(main.css);
strong { font-weight: bolder; font-family: 'Parkinsans'; font-size: 1.1em; }

@media (min-width: 1200px) { .h3, h3 { font-size: 2.2rem !important; } }

h3 { color: #0f9c4c; }

.spacer { display: none; }

#fullHeight > lottie-player { display: none; }

/*---------------------------------------------BLOC VIDEO----------------*/
.video-wrapper { width: 80%; margin: auto; padding: 20px 0; }

#video-custom { display: block; width: 100%; border-radius: 40px; outline: none; box-shadow: 0 0 0 2px #d6ce6a, 0 0 18px 6px rgba(241, 234, 133, 0.6), 0 0 45px 12px rgba(241, 234, 133, 0.3); }

/*---------------------------------------------TITRES DANS LES CTA----------------*/
div.cta_banner { padding: 1rem 0 !important; min-height: 10vh !important; margin-top: 150px !important; }

div.cta_banner p { max-width: 1300px; }

#title-custom { margin-bottom: -50px; }

/*------------------------------------------------Formulaire de contact---------------------------------*/
#contact > div.row.align-items-center.g-lg-5.py-5.position-relative > div.col-lg-6.text-center.text-color-sixth { display: none; }

#contact > div.row.align-items-center.g-lg-5.py-5.position-relative > div.col-md-10.d-flex.justify-content-center.col-lg-6 { width: 100% !important; }

#formContact { background: radial-gradient(circle at 50% 50%, rgba(149, 193, 28, 0.22), transparent 60%), radial-gradient(circle at 60% 40%, rgba(15, 156, 76, 0.16), transparent 60%), repeating-radial-gradient(circle at 50% 50%, rgba(15, 156, 76, 0.09) 0px, rgba(15, 156, 76, 0.09) 2px, transparent 2px, transparent 7px); }

/*--------------------------------Formulaire TALLY-----------------------------*/
.tally-form-title { display: none; }

.YegdU { background-color: #ffffffd1 !important; }

.tally-form-content { background: radial-gradient(circle at 50% 50%, rgba(149, 193, 28, 0.22), transparent 60%), radial-gradient(circle at 60% 40%, rgba(15, 156, 76, 0.16), transparent 60%), repeating-radial-gradient(circle at 50% 50%, rgba(15, 156, 76, 0.09) 0px, rgba(15, 156, 76, 0.09) 2px, transparent 2px, transparent 7px); }

/*-------------------------------------------------------RESPONSIVE-----------------------------------------------------*/
@media (max-width: 900px) { div.hero-top h1 { font-size: 1rem !important; padding: 10px 10px 10px 50px; width: 80%; } div.hero-brand { font-size: 3rem; } img.hero-logo { max-width: 100px; } .scene { scale: 1.3; } div.sg-intro-text h2 { font-size: 2.5rem !important; } div.sg-intro-main h2 { font-size: 2.5rem !important; } div.fd-entete-triple h3 { margin-bottom: 0 !important; } }

/*--------------------------------------------Barre de navigation--------------------------------------------------*/
nav { font-family: 'Parkinsans'; color: #4a661d; }

.navbar-brand { width: 4vw !important; height: 10vh !important; }

.logo_nav { height: 10vh !important; }

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

nav.navbar { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

#navbarSupportedContent > div > a:nth-child(2) { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQAUDZLuL31d48w0UcxA4p7rM3vB3%2Fimages%2Fpexels-olenagoldman-933701_rojh.webp) !important; background-position: center !important; background-size: cover !important; }

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

/*-----------------------------------------------------Ajustements SEO-------------------------------------------------*/
div:has(> .first-activity-div) { padding: 100px 0; }

div.first-activity-div, div.second-activity-div, div.third-activity-div { border-radius: 30px !important; }

/*--------------------------------------------------------------- PARALLAX LOGOS----------------------------------------------*/
.sg-intro { position: relative; isolation: isolate; }

.sg-parallax-logos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.p-logo { position: absolute; width: 160px; filter: grayscale(100%) contrast(110%); transition: transform 0.1s linear; }

/* Positions initiales (répartition naturelle) */
.l1 { top: 10%; left: 5%; }

.l2 { top: 20%; right: 10%; }

.l3 { bottom: 15%; left: 20%; }

.l4 { bottom: 25%; right: 15%; }

.l5 { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* La carte reste au-dessus */
.sg-intro-card { position: relative; z-index: 10; }

/*----------------------------------------------------------Bloc avis Google----------------------------------*/
.googleReviews-div .owl-carousel .owl-stage-outer { overflow: visible !important; }

/*----------------------------------------------------------Présentation de l'entreprise------------------------*/
/* ===== GRID MODERNE ===== */
.sg-intro-grid-modern { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }

/* Texte principal */
.sg-intro-main h2 { margin-bottom: 1rem; font-size: 3.5rem !important; font-family: 'Parkinsans'; }

.sg-intro-main h3 { margin-bottom: 2rem; color: #0f9c4c; font-weight: 500; }

.sg-intro-main p { margin-bottom: 1.2rem; max-width: 500px; }

/* Colonne expertise moderne */
.sg-intro-features { display: flex; flex-direction: column; gap: 1rem; }

.sg-feature { padding: 1rem 1.5rem; border-radius: 40px; background: rgba(15, 156, 76, 0.08); border: 1px solid rgba(15, 156, 76, 0.15); backdrop-filter: blur(6px); transition: all 0.3s ease; }

.sg-feature:hover { background: linear-gradient(90deg, #95c11c, #0f9c4c); color: white; transform: translateX(6px); box-shadow: 0 10px 30px rgba(15, 156, 76, 0.3); }

/* Responsive */
@media (max-width: 900px) { .sg-intro-grid-modern { grid-template-columns: 1fr; } }

/*---------------------------------------------------------HERO BANNER-----------------------------------------------*/
.hero-sweetgarden { position: relative; height: 100vh; overflow: hidden; display: grid; place-items: center; color: white; }

/* ===== Background matière ===== */
.bg-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, #0f9c4c, #4a661d); }

/*==================Halo dynamique===========================*/
.bg-halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(149, 193, 28, 0.35), transparent 60%), radial-gradient(circle at 60% 40%, rgba(15, 156, 76, 0.25), transparent 60%), repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 2px, transparent 2px, transparent 6px); mix-blend-mode: overlay; animation: haloFloat 12s ease-in-out infinite alternate; transition: background 0.2s ease; }

@keyframes haloFloat { 0% { background-position: 45% 55%, 55% 45%, center; }
  100% { background-position: 55% 45%, 45% 55%, center; } }

/*------CARDS--------------*/
.scene, .a3d { display: grid; }

.scene { position: absolute; inset: 0; width: 100vw; height: 100%; overflow: hidden; perspective: 35em; mask: linear-gradient(90deg, transparent, black 15% 85%, transparent); z-index: 2; }

.a3d { place-self: center; transform-style: preserve-3d; animation: ry 60s linear infinite; animation-play-state: paused; }

.hero-sweetgarden:hover .a3d { animation-play-state: running; }

/* rotation */
@keyframes ry { to { rotate: y 1turn; } }

/* ============================= */
/* CARDS */
/* ============================= */
.hero-sweetgarden .card { grid-area: 1 / 1; /* IMPORTANT */ width: 22vw; /* largeur relative écran */ aspect-ratio: 7 / 10; object-fit: cover; border-radius: 24px !important; border: none !important; backface-visibility: hidden; /* calcul dynamique */ transform: rotateY(calc(var(--i) * (1turn / 9))) translateZ(calc( -1 * (0.5 * 22vw + 0.5em) / tan(0.5 * (1turn / 9)))); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); }

/* ===== Content ===== */
.hero-content { position: relative; z-index: 2; width: 100%; height: 100%; }

/* ========================= */
/* HERO MAIN - CENTRÉ EXACT */
/* ========================= */
.hero-main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; align-items: center; filter: drop-shadow(2px 4px 6px black); }

.hero-logo { max-width: 150px; }

.hero-brand { font-size: 5rem; font-family: 'Parkinsans'; }

.secondaires .hero-brand { font-size: 3rem !important; }

.secondaires .hero-logo { max-width: 80px; }

/* ========================= */
/* HERO BOTTOM - EN BAS */
/* ========================= */
.hero-bottom { position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; max-width: 800px; }

/* ========================= */
/* HERO TOP- EN HAUT*/
/* ========================= */
.hero-top { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; max-width: 800px; }

.hero-top h1 { font-size: 1.5rem !important; }

.hero-top h1 { text-align: left; padding: 1.2rem 2.5rem 1.2rem 4.5rem; border-radius: 999px; backdrop-filter: blur(50px); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.4); color: white; display: inline-block; }

/* Loupe */
.hero-top h1::before { content: ""; position: absolute; left: -22px; /* dépasse pour effet percé */ top: 50%; transform: translateY(-50%); width: 70px; height: 70px; background: white; -webkit-mask: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQAUDZLuL31d48w0UcxA4p7rM3vB3%2Ftextfiles%2FVotre%20texte%20de%20paragraphe.svg?alt=media&token=bfcb879d-639e-48a0-ae4c-a858e2e3f28b") no-repeat center/contain; mask: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQAUDZLuL31d48w0UcxA4p7rM3vB3%2Ftextfiles%2FVotre%20texte%20de%20paragraphe.svg?alt=media&token=bfcb879d-639e-48a0-ae4c-a858e2e3f28b") no-repeat center/contain; }

/* ===== Lottie ===== */
.hero-scroll { position: absolute; bottom: 30px; width: 50px; animation: float 2.5s ease-in-out infinite; }

@keyframes float { 0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); } }

/*----------------------------------------------------Cartes des services ACCUEIL--------------------------------------------------*/
.fd-entete-triple { display: grid; grid-template-columns: repeat(3, 1fr); height: 60vh; overflow: hidden; }

.fd-entete-triple h3 { color: white; margin-bottom: 40px; width: fit-content; font-size: 3.5rem !important; }

.fd-entete-box { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; text-decoration: none; color: #f1f2ed; transition: transform 0.6s ease, filter 0.4s ease; margin: 5px; }

.fd-entete-box:hover { transform: scale(1.02); z-index: 2; }

/* --- Superposition--- */
.fd-entete-overlay { position: absolute; inset: 0; background: #00000054; transition: background 0.4s ease; }

.fd-entete-box:hover .fd-entete-overlay { background: #3d4718c7; }

section.fd-entete-triple > a:nth-child(3) > div.fd-entete-overlay { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQAUDZLuL31d48w0UcxA4p7rM3vB3%2Fimages%2FLogo_seul_2_fjnv.webp); background-repeat: no-repeat; background-size: 30%; background-position: top right; }

/* --- Bloc texte avec fond noir --- */
.fd-entete-content { position: absolute; bottom: 12%; left: 10%; right: 10%; z-index: 2; padding: 20px 25px; text-align: left; }

.fd-entete-content img { width: 80px; height: 80px; margin-bottom: 10px; }

.fd-entete-content h2 { font-size: 1.9rem; margin-bottom: 8px; }

.fd-entete-content p { margin: 0; color: white; }

/* --- Responsive tablette --- */
@media (max-width: 1024px) { .fd-entete-triple { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .fd-entete-box { flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; } .fd-entete-content { bottom: 10%; left: 6%; right: 6%; padding: 18px 20px; } .fd-entete-content h2 { font-size: 1.9rem; } .fd-entete-content p { font-size: 0.95rem; } }

/* --- Responsive mobile --- */
@media (max-width: 600px) { .fd-entete-triple { display: flex; flex-direction: column; height: auto; overflow: visible; } .fd-entete-box { width: 100%; height: 33.33vh; /* chaque bloc occupe 1/3 de la hauteur de l’écran */ flex: none; } .fd-entete-content { bottom: 10%; left: 5%; right: 5%; padding: 12px 16px; } .fd-entete-content h2 { font-size: 1.4rem; } .fd-entete-content p { font-size: 0.85rem; } }

/*---------------------------------------------------------------------Cards des différents services paysagers----------------------------------*/
.sg-services-grid-modern { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }

/* Desktop large : 4 cartes */
.sg-services-grid-modern .sg-service-card { width: calc((100% - 3 * 2rem) / 4); }

/* Laptop / tablette paysage : 3 cartes */
@media (max-width: 1200px) { .sg-services-grid-modern .sg-service-card { width: calc((100% - 2 * 2rem) / 3); } }

/* Tablette : 2 cartes */
@media (max-width: 768px) { .sg-services-grid-modern .sg-service-card { width: calc((100% - 1 * 2rem) / 2); } }

/* Mobile : 1 carte */
@media (max-width: 480px) { .sg-services-grid-modern .sg-service-card { width: 100%; } }

/* ========================= */
/* CARDS IMAGE BACKGROUND */
/* ========================= */
.sg-service-card { position: relative; padding: 2.5rem 2rem; border-radius: 32px; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; color: white; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.4s ease; }

/* Overlay sombre premium */
.sg-service-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 73, 19, 0.95) 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.27) 70%, rgba(0, 0, 0, 0) 100%); z-index: 0; }

/* Texte au-dessus de l’overlay */
.sg-service-card h3, .sg-service-card p { position: relative; z-index: 1; color: white; }

.sg-service-card h3 { margin-bottom: 2.8rem; font-family: 'Parkinsans'; font-size: 1.8rem !important; text-shadow: 4px 4px 23px rgba(0, 0, 0, 0.6); }

.sg-service-card p { line-height: 1.6; opacity: 0.95; }

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

@media (max-width: 700px) { .sg-services-grid-modern { grid-template-columns: 1fr; } .sg-service-card { min-height: 220px; } }

/*--------------------------------------------------------------------CSS Paragraphe + carrousel-----------------------------------*/
/* ============================= */
/* INTRO SECTION (fond blanc) */
/* ============================= */
.sg-intro { padding: 2.5rem 1.5rem; }

.sg-intro-card { position: relative; max-width: 1600px; margin: 0 auto; border-radius: 48px; overflow: hidden; padding: 3rem; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.08); }

/* Fond “base” (vert très très léger) */
.sg-card-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(15, 156, 76, 0.08), rgba(74, 102, 29, 0.08)); }

/* Halo interactif + texture pointillée */
.sg-card-halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(149, 193, 28, 0.22), transparent 60%), radial-gradient(circle at 60% 40%, rgba(15, 156, 76, 0.16), transparent 60%), repeating-radial-gradient(circle at 50% 50%, rgba(15, 156, 76, 0.09) 0px, rgba(15, 156, 76, 0.09) 2px, transparent 2px, transparent 7px); mix-blend-mode: multiply; animation: sgHaloFloat 12s ease-in-out infinite alternate; transition: background 0.2s ease; }

@keyframes sgHaloFloat { 0% { background-position: 45% 55%, 55% 45%, center; }
  100% { background-position: 55% 45%, 45% 55%, center; } }

/* Contenu au-dessus du fond */
.sg-intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: center; }

/* Texte */
.sg-intro-text p { margin-top: 1rem; color: rgba(0, 0, 0, 0.72); }

.sg-intro-text h2 { font-size: 3.5rem !important; font-family: 'Parkinsans'; }

/* ============================= */
/* CAROUSEL */
/* ============================= */
.sg-intro-carousel { position: relative; border-radius: 32px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); }

.sg-carousel-viewport { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }

.sg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.03); transition: opacity 0.8s ease, transform 1.2s ease; }

.sg-slide.active { opacity: 1; transform: scale(1); }

/* Navigation */
.sg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(0, 0, 0, 0.25); color: white; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease; backdrop-filter: blur(10px); }

.sg-nav:hover { transform: translateY(-50%) scale(1.06); background: rgba(0, 0, 0, 0.35); }

.sg-prev { left: 12px; }

.sg-next { right: 12px; }

/* Dots */
.sg-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 10px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.35); }

.sg-dot { width: 10px; height: 10px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.45); transition: transform 0.25s ease, background 0.25s ease; }

.sg-dot.active { background: #95c11c; transform: scale(1.2); }

/* Responsive */
@media (max-width: 900px) { .sg-intro-card { padding: 2rem; border-radius: 36px; } .sg-intro-grid { grid-template-columns: 1fr; } .sg-carousel-viewport { aspect-ratio: 16 / 10; } }

/*-----------------------------------------SLIDER LOGOS PARTENAIRES-----------------------------------------------*/
.logo-slider { overflow: hidden; width: 100%; position: relative; }

.logo-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: scroll 35s linear infinite; }

.logo-track img { height: 150px; width: auto; object-fit: contain; display: block; transition: transform 0.3s ease; background-color: white !important; border-radius: 20px; }

/* Petit effet au hover */
.logo-track img:hover { transform: scale(1.05); }

@keyframes scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } }

/* Pause au survol */
.logo-slider:hover .logo-track { animation-play-state: paused; }

/* SECTION AVEC BACKGROUND + OVERLAY */
.partners-section { margin-top: 100px !important; position: relative; padding: 100px 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQAUDZLuL31d48w0UcxA4p7rM3vB3%2Fimages%2FIMG_2641_dw1l.webp?alt=media&token=c97334a5-7b37-449c-beee-902de6e7da8e"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; overflow: hidden; }

/* Overlay */
.partners-section::before { content: ""; position: absolute; inset: 0; background: #3d4718b3; z-index: 1; }

/* Pour que le contenu passe AU-DESSUS de l’overlay */
.partners-section > * { position: relative; z-index: 2; }

/* ===================================================================== Boutons WAOUW ===== */
.hero-cta { margin-top: 2rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

/* ===== GLOW (style original conservé) ===== */
.btn-glow, a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button { font-size: 1.1rem !important; position: relative !important; padding: 0.5rem 1.5rem !important; border-radius: 60px !important; background: linear-gradient(90deg, #95c11c, #0f9c4c) !important; color: white !important; text-decoration: none !important; overflow: hidden !important; transition: 0.4s !important; box-shadow: 0 0 0 rgba(149, 193, 28, 0.6) !important; }

.btn-glow:hover, a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.phone-number-button:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 40px rgba(149, 193, 28, 0.6) !important; }

/* ===== GLASS (style original conservé) ===== */
.btn-glass { padding: 0.5rem 1.5rem !important; border-radius: 60px; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); text-decoration: none; color: white !important; transition: 0.4s; font-size: 1.1rem !important; }

.btn-glass:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); }

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