@charset "UTF-8";
@import url(main.css);
.navbar { transition: all 0.3s ease; border-bottom: 1px solid #4f4045; }

.navbar.scrolled { background-color: rgba(108, 184, 115, 0.4) !important; backdrop-filter: blur(1rem); border-bottom: 1px solid #4f4045; }

\
div#fullHeight { display: none !important; }

.spacer { display: none; }

.b-bloc-divider { box-shadow: none !important; border: none !important; }

/* Cartes services cliquables */
.services-grid .service-item { text-decoration: none; color: inherit; display: block; }

/*======================== CUSTOM FORMULAIRE DE CONTACT =================================*/
button.w-100.btn.btn-outline-dark { border: 2px solid #6cb873; color: #4f4045; font-weight: 550; }

button.w-100.btn.btn-outline-dark:hover { background-color: white !important; transform: translateY(-0.05em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

div#contact { padding: 50px 20px !important; }

/*======================== CUSTOM HEADER =================================*/
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 10px !important; background-color: white !important; border: 2px solid #6cb873 !important; color: #4f4045 !important; font-weight: 550; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover { transform: translateY(-0.05em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

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

/*======================== CUSTOM AVIS GOOGLE =================================*/
a#maps-url { border-radius: 10px !important; background-color: white !important; border: 2px solid #6cb873 !important; color: #4f4045 !important; font-weight: 550 !important; }

a#maps-url:hover { transform: translateY(-0.45em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

.owl-stage { margin-top: 50px; margin-bottom: 50px; }

.card.rounded-3.shadow-lg.mx-4.mb-4 { border: 1px solid #60ac66; }

/*======================== CUSTOM BLOC SEO =================================*/
.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; }

.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.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; }

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

.black-screen { display: none; }

/*======================== CUSTOM BLOC MAPS =================================*/
.col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { color: #4f4045 !important; }

/*=================================================================== Hero d'Accueil ==========================================================================*/
.hero-metamorphose { position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Vidéo */
.hero-metamorphose-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Overlay */
.hero-metamorphose-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(79, 64, 69, 0.85), rgba(92, 101, 89, 0.65)); z-index: 1; }

/* Contenu */
.hero-metamorphose-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 20px; color: #ffffff; }

/* Logo */
.hero-metamorphose-logo { margin-bottom: 20px; animation: fadeDown 1s ease-out; }

.hero-metamorphose-logo img { max-width: 250px; width: 100%; height: auto; filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.35)); }

/* Sous-titre */
.hero-metamorphose-subtitle { font-family: 'Californication', cursive; font-size: clamp(1.8rem, 3vw, 2.6rem); color: #6cb873; margin-bottom: 10px; animation: fadeDown 1s ease-out; }

/* Titre */
.hero-metamorphose-title { font-family: 'Californication', cursive; font-weight: 500; font-size: clamp(2.8rem, 5vw, 5.8rem); margin: 0 0 20px; animation: fadeUp 1s ease-out 0.2s both; }

.hero-metamorphose-title span { color: #6cb873; }

/* Description */
.hero-metamorphose-description { font-family: 'PT Serif', serif; font-size: 1.1rem; line-height: 1.7; margin-bottom: 40px; animation: fadeUp 1s ease-out 0.4s both; }

/* ======================= BOUTON MÉTAMORPHOSE ======================= */
.btn-metamorphose { --button_radius: 1em; --button_color: #ffffff; --button_outline_color: #6cb873; font-family: 'PT Serif', serif; font-size: 17px; font-weight: 700; border: none; cursor: pointer; border-radius: var(--button_radius); background: var(--button_outline_color); box-shadow: 0 10px 25px rgba(108, 184, 115, 0.35); padding: 0; text-decoration: none; display: inline-block; }

.btn-metamorphose .button_top { display: block; border: 2px solid var(--button_outline_color); border-radius: var(--button_radius); padding: 0.9em 2.2em; background: var(--button_color); color: #4f4045; transform: translateY(-0.3em); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.btn-metamorphose:hover .button_top { transform: translateY(-0.45em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

.btn-metamorphose:active .button_top { transform: translateY(0); box-shadow: 0 5px 12px rgba(108, 184, 115, 0.25); }

/* Animations */
@keyframes fadeUp { from { opacity: 0;
    transform: translateY(25px); }
  to { opacity: 1;
    transform: translateY(0); } }

@keyframes fadeDown { from { opacity: 0;
    transform: translateY(-25px); }
  to { opacity: 1;
    transform: translateY(0); } }

/* Responsive */
@media (max-width: 768px) { .hero-metamorphose-logo img { max-width: 120px; } .hero-metamorphose-description { font-size: 1rem; } }

/*=================================================================== A PROPOS ==========================================================================*/
.a-propos { position: relative; width: 100%; padding: 100px 20px 150px; font-family: 'PT Serif', serif; color: #4f4045; }

/* FOND IMAGE */
.a-propos::before { content: ""; position: absolute; inset: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFond_a_propos_1_59cl.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

/* OVERLAY */
.a-propos::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); z-index: 1; }

/* ================================== CONTENEUR CENTRÉ ================================== */
.a-propos-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }

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

.a-propos-image { border-radius: 0px; overflow: hidden; box-shadow: none; }

.a-propos-image.large { grid-row: span 2; border-radius: 200px 200px 0 0; }

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

.a-propos-image.large img, .a-propos-image.small img { height: 500px; }

/* ================================== CONTENU TEXTE ================================== */
.a-propos-contenu { padding: 20px; }

.a-propos-tagline { font-family: 'Californication', cursive; font-size: 50px; color: #6cb873; margin-bottom: 20px; }

.a-propos-titre { font-size: 52px; font-weight: 700; line-height: 1.2; margin-bottom: 30px; }

.a-propos-description { font-size: 16px; line-height: 1.8; color: #5c6559; margin-bottom: 40px; }

/* ================================== BOUTON ================================== */
.a-propos-bouton { /* Reset lien */ display: inline-block; text-decoration: none; color: inherit; /* Variables */ --button_radius: 1em; --button_color: #ffffff; --button_outline_color: #6cb873; font-family: 'PT Serif', serif; font-size: 17px; font-weight: 700; border: none; cursor: pointer; padding: 0; background: var(--button_outline_color); border-radius: var(--button_radius); box-shadow: 0 10px 25px rgba(108, 184, 115, 0.35); }

/* Couche haute */
.a-propos-bouton-top { display: block; box-sizing: border-box; border: 2px solid var(--button_outline_color); border-radius: var(--button_radius); padding: 0.9em 2.2em; background: var(--button_color); color: #4f4045; transform: translateY(-0.3em); transition: transform 0.15s ease, box-shadow 0.15s ease; }

/* Hover */
.a-propos-bouton:hover .a-propos-bouton-top { transform: translateY(-0.45em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

/* Active */
.a-propos-bouton:active .a-propos-bouton-top { transform: translateY(0); box-shadow: 0 5px 12px rgba(108, 184, 115, 0.25); }

/* ================================== RESPONSIVE ================================== */
@media (max-width: 968px) { .a-propos-inner { grid-template-columns: 1fr; gap: 40px; } .a-propos-titre { font-size: 42px; } }

@media (max-width: 640px) { .a-propos-inner { padding: 0 20px; } .a-propos-images { grid-template-columns: 1fr; } .a-propos-image.large { grid-row: span 1; } .a-propos-image.large img, .a-propos-image.small img { height: 300px; } }

/*=================================================================== Nos services ==========================================================================*/
.nos-services { position: relative; padding: 100px 20px 150px; overflow: hidden; /* Image de fond */ background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFond_services_3_vpks.webp?alt=media&token=c66c41c4-7127-4980-ad27-6b483f014945"); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Overlay pour lisibilité */
.nos-services::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); z-index: 0; }

/* Tout le contenu passe au-dessus */
.nos-services > * { position: relative; z-index: 1; }

.section-title { text-align: center; margin-bottom: 70px; position: relative; z-index: 1; }

.section-title .subtitle { font-family: 'Californication', cursive; font-size: clamp(1.8rem, 3vw, 3.5rem); color: #6cb873; margin-bottom: 10px; }

.section-title h2 { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: clamp(2.2rem, 4vw, 3.5rem); color: #4f4045; margin: 0; }

.services-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; position: relative; z-index: 1; }

.service-item { background: white !important; overflow: hidden; border-radius: 0; box-shadow: 0 5px 20px rgba(79, 64, 69, 0.1); transition: border-radius 0.5s ease, transform 0.4s ease, box-shadow 0.4s ease; cursor: pointer; }

.service-item:hover { border-radius: 150px 150px 0 0; transform: translateY(-15px); box-shadow: 0 20px 40px rgba(108, 184, 115, 0.3); }

.service-image-wrapper { width: 100%; height: 350px; overflow: hidden; position: relative; }

.service-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }

.service-item:hover .service-image { transform: scale(1.08); }

.service-info { background: white; padding: 30px 25px; text-align: center; }

.service-info h3 { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: 1.4rem; color: #4f4045; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 1.5px; }

.service-info .service-subtitle { font-family: 'Californication', cursive; font-size: 1.7rem; color: #6cb873; margin: 0; }

@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }

@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } .nos-services { padding: 60px 20px 100px; } }

/*=========================================================== POURQUOI NOUS CHOSIIR ? ============================================================================*/
.pourquoi-nous-choisir { background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFond_a_propos_1_59cl.webp?alt=media&token=126b8723-7c21-43df-b983-e0daed894495") center/cover; padding: 100px 20px; position: relative; }

.pourquoi-title { text-align: center; margin-bottom: 80px; }

.pourquoi-title .subtitle { font-family: 'Californication', cursive; font-size: clamp(1.8rem, 3vw, 3.5rem); color: #6cb873; margin-bottom: 10px; }

.pourquoi-title h2 { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: clamp(2.2rem, 4vw, 3.5rem); color: #4f4045; margin: 0; }

.pourquoi-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; }

.pourquoi-item { text-align: center; padding: 40px 30px; background: white; border-radius: 20px; transition: all 0.4s ease; border: 2px solid transparent; }

.pourquoi-item:hover { transform: translateY(-10px); border-color: #6cb873; box-shadow: 0 15px 40px rgba(108, 184, 115, 0.2); }

.pourquoi-icon { width: 100px; height: 100px; margin: 0 auto 25px; background: linear-gradient(135deg, #6cb873 0%, #5ca862 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.4s ease; }

.pourquoi-item:hover .pourquoi-icon { transform: scale(1.1) rotate(5deg); }

.pourquoi-icon::before { content: ''; position: absolute; width: 110px; height: 110px; border: 2px solid #6cb873; border-radius: 50%; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; }

.pourquoi-item:hover .pourquoi-icon::before { opacity: 1; transform: scale(1.2); }

.pourquoi-icon svg { width: 50px; height: 50px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pourquoi-content h3 { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: 1.5rem; color: #4f4045; margin: 0 0 15px 0; }

.pourquoi-content p { font-family: 'PT Serif', serif; font-size: 1rem; line-height: 1.7; color: #5c6559; margin: 0; }

.pourquoi-cta { text-align: center; margin-top: 60px; }

.btn-metamorphose { --button_radius: 1em; --button_color: #ffffff; --button_outline_color: #6cb873; font-family: 'PT Serif', serif; font-size: 17px; font-weight: 700; border: none; cursor: pointer; border-radius: var(--button_radius); background: var(--button_outline_color); box-shadow: 0 10px 25px rgba(108, 184, 115, 0.35); padding: 0; text-decoration: none; display: inline-block; }

.btn-metamorphose .button_top { display: block; box-sizing: border-box; border: 2px solid var(--button_outline_color); border-radius: var(--button_radius); padding: 0.9em 2.2em; background: var(--button_color); color: #4f4045; transform: translateY(-0.3em); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.btn-metamorphose:hover .button_top { transform: translateY(-0.45em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

.btn-metamorphose:active .button_top { transform: translateY(0); box-shadow: 0 5px 12px rgba(108, 184, 115, 0.25); }

@media (max-width: 768px) { .pourquoi-container { grid-template-columns: 1fr; gap: 40px; } .pourquoi-nous-choisir { padding: 60px 20px; } }

/*=========================================================================== GALERIE DE REALISATIONS ==============================================================*/
.galerie-section { background: white; padding: 60px 0; overflow: hidden; position: relative; }

.galerie-scroll-container { position: relative; width: 100%; overflow: hidden; }

.galerie-scroll-wrapper { display: flex; width: fit-content; animation: scroll-infinite 40s linear infinite; }

.galerie-scroll-wrapper:hover { animation-play-state: paused; }

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

.galerie-track { display: flex; gap: 25px; }

.galerie-item { flex-shrink: 0; width: 400px; height: 300px; border-radius: 15px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.galerie-item:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(108, 184, 115, 0.3); }

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

.galerie-item-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(79, 64, 69, 0.85), transparent); padding: 20px; transform: translateY(100%); transition: transform 0.3s ease; }

.galerie-item:hover .galerie-item-overlay { transform: translateY(0); }

.galerie-item-overlay h3 { font-family: 'PT Serif', serif; font-weight: 700; font-size: 1.2rem; color: white; margin: 0 0 5px 0; }

.galerie-item-overlay p { font-family: 'PT Serif', serif; font-size: 0.9rem; color: #e8e8e8; margin: 0; }

.galerie-fade { position: absolute; top: 0; width: 150px; height: 100%; pointer-events: none; z-index: 2; }

.galerie-fade-left { left: 0; background: linear-gradient(to right, white, transparent); }

.galerie-fade-right { right: 0; background: linear-gradient(to left, white, transparent); }

@media (max-width: 768px) { .galerie-item { width: 300px; height: 250px; } .galerie-section { padding: 60px 0; } }

/*==================================================================== PRESENTATION ============================================================================*/
.presentation-entreprise { position: relative; background-color: #fff; padding: 150px 40px; }

.presentation-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.presentation-contenu { padding: 20px; }

.presentation-surtitre { font-family: 'Californication', cursive; font-size: 50px; color: #6cb873; margin-bottom: 10px; }

.presentation-titre { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: 42px; color: #4f4045; line-height: 1.2; margin-bottom: 25px; }

.presentation-texte { font-family: 'PT Serif', serif; font-size: 17px; line-height: 1.8; color: #5c6559; margin-bottom: 20px; }

.presentation-image { position: relative; height: 550px; }

.presentation-image-principale { width: 100%; height: 100%; border-radius: 500px 500px 0 0; overflow: hidden; box-shadow: 0 20px 40px rgba(108, 184, 115, 0.3); }

.presentation-image-principale img { width: 100%; height: 100%; object-fit: cover; }

.presentation-badge { position: absolute; bottom: 30px; right: 30px; background-color: #6cb873; color: #ffffff; padding: 25px 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(108, 184, 115, 0.4); text-align: center; }

.presentation-badge-nombre { font-family: 'PT Serif', serif; font-weight: 700; font-size: 38px; line-height: 1; margin-bottom: 5px; }

.presentation-badge-texte { font-family: 'PT Serif', serif; font-size: 14px; opacity: 0.95; }

.presentation-bouton { --button_radius: 1em; --button_color: #ffffff; --button_outline_color: #6cb873; font-family: 'PT Serif', serif; font-size: 17px; font-weight: 700; border: none; cursor: pointer; border-radius: var(--button_radius); background: var(--button_outline_color); box-shadow: 0 10px 25px rgba(108, 184, 115, 0.35); padding: 0; text-decoration: none; display: inline-block; margin-top: 30px; }

.presentation-bouton-top { display: block; box-sizing: border-box; border: 2px solid var(--button_outline_color); border-radius: var(--button_radius); padding: 0.9em 2.2em; background: var(--button_color); color: #4f4045; transform: translateY(-0.3em); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.presentation-bouton:hover .presentation-bouton-top { transform: translateY(-0.45em); box-shadow: 0 12px 25px rgba(108, 184, 115, 0.45); }

.presentation-bouton:active .presentation-bouton-top { transform: translateY(0); box-shadow: 0 5px 12px rgba(108, 184, 115, 0.25); }

@media (max-width: 968px) { .presentation-container { grid-template-columns: 1fr; gap: 50px; } .presentation-titre { font-size: 36px; } .presentation-image { height: 400px; } }

@media (max-width: 640px) { .presentation-entreprise { padding: 60px 20px; } .presentation-titre { font-size: 32px; } .presentation-surtitre { font-size: 28px; } .presentation-image { height: 350px; } .presentation-badge { bottom: 20px; right: 20px; padding: 20px 25px; } .presentation-badge-nombre { font-size: 32px; } }

/* =============================================================  HEADER VIDÉO - AUTRES PAGES ======================================================================= */
.header-video-sols { position: relative; width: 100%; height: 55vh; /* ↓ moins haut */ min-height: 380px; /* ↓ plus compact */ overflow: hidden; background-color: #050505; }

/* Vidéo de fond */
.header-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Overlay sombre */
.header-video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(79, 64, 69, 0.85), rgba(92, 101, 89, 0.65)); z-index: 1; }

/* Container principal */
.header-video-container { position: relative; z-index: 2; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 60px; }

/* Logo */
.header-video-logo img { max-width: 320px; width: 100%; }

/* Texte + trait */
.header-video-text-lined { display: flex; align-items: stretch; /* le trait prend la hauteur du texte */ gap: 30px; }

/* Trait rouge vertical */
.header-video-line { width: 5px; background-color: #6cb873; margin-top: 6px; /* alignement précis au H1 */ margin-bottom: 6px; /* alignement à la fin de la phrase */ border-radius: 2px; }

/* Contenu texte */
.header-video-text-content h1 { color: #FFFFFF; font-size: 56px; font-weight: 900 !important; line-height: 1.1; margin: 0 0 25px 0; /* important pour l’alignement du trait */ }

.header-video-text-content p { color: #E6E6E6; font-size: 18px; max-width: 520px; line-height: 1.6; margin: 0; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) { .header-video-container { grid-template-columns: 1fr; text-align: center; } .header-video-logo { margin-bottom: 30px; } .header-video-text-lined { justify-content: center; gap: 20px; } .header-video-text-content h1 { font-size: 42px; } }

@media (max-width: 600px) { .header-video-sols { height: 60vh; min-height: 420px; } .header-video-text-lined { flex-direction: column; align-items: center; } /* Le trait devient horizontal sur mobile */ .header-video-line { width: 60px; height: 4px; margin: 10px 0; } .header-video-text-content h1 { font-size: 34px; } .header-video-text-content p { font-size: 16px; } }

/*========================================================================== REALISATIONS ========================================================================*/
.realisations-section { background: #fff; padding: 100px 20px; position: relative; }

.realisations-title { text-align: center; margin-bottom: 60px; }

.realisations-title .subtitle { font-family: 'Californication', cursive; font-size: clamp(1.8rem, 3vw, 2.5rem); color: #6cb873; margin-bottom: 10px; }

.realisations-title h2 { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: clamp(2.2rem, 4vw, 3.5rem); color: #4f4045; margin: 0; }

.realisations-filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; }

.filtre-btn { --button_radius: 0.5em; --button_color: #ffffff; --button_outline_color: #6cb873; font-family: 'PT Serif', serif; font-size: 15px; font-weight: 700; border: none; cursor: pointer; border-radius: var(--button_radius); background: var(--button_outline_color); box-shadow: 0 5px 15px rgba(108, 184, 115, 0.25); padding: 0; text-decoration: none; display: inline-block; transition: all 0.3s ease; }

.filtre-btn .button_top { display: block; box-sizing: border-box; border: 2px solid var(--button_outline_color); border-radius: var(--button_radius); padding: 0.7em 1.8em; background: var(--button_color); color: #4f4045; transform: translateY(-0.2em); transition: transform 0.15s ease, background 0.15s ease; }

.filtre-btn:hover .button_top { transform: translateY(-0.3em); }

.filtre-btn:active .button_top { transform: translateY(0); }

.filtre-btn.active { --button_outline_color: #6cb873; }

.filtre-btn.active .button_top { background: #6cb873; color: white; transform: translateY(0); }

.realisations-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; }

.realisation-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(79, 64, 69, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; opacity: 1; cursor: pointer; }

.realisation-card.hidden { display: none; }

.realisation-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(108, 184, 115, 0.3); }

.realisation-image { width: 100%; height: 350px; overflow: hidden; position: relative; }

.realisation-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.realisation-card:hover .realisation-image img { transform: scale(1.1); }

.no-results { text-align: center; padding: 60px 20px; display: none; }

.no-results.show { display: block; }

.no-results p { font-family: 'PT Serif', serif; font-size: 1.2rem; color: #5c6559; }

@media (max-width: 768px) { .realisations-grid { grid-template-columns: 1fr; } .realisations-section { padding: 60px 20px; } .realisations-filtres { gap: 10px; } .filtre-btn { font-size: 14px; } }

/*========================================================================= RESEAUX SOCIAUX ==================================================================*/
.fd-social { position: relative; text-align: center; padding: 100px 40px; color: #4f4045; overflow: hidden; }

/* Image de fond */
.fd-social::before { content: ""; position: absolute; inset: 0; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFond_a_propos_1_59cl.webp?alt=media&token=126b8723-7c21-43df-b983-e0daed894495"); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

/* Overlay blanc doux */
.fd-social::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); z-index: 1; }

/* Tout le contenu passe au-dessus */
.fd-social > * { position: relative; z-index: 2; }

/* ============================ EN-TÊTE ============================ */
.fd-social-header { margin-bottom: 60px; }

.fd-social-subtitle { display: block; font-family: 'Californication', cursive; color: #6cb873; font-size: 3.5rem; margin-bottom: 10px; }

.fd-social-header h2 { font-family: 'PT Serif', serif; font-size: 2.4rem; color: #4f4045; letter-spacing: 1px; margin-bottom: 15px; font-weight: 700 !important; }

.fd-social-header p { font-family: 'PT Serif', serif; font-size: 1.05rem; color: #5c6559; line-height: 1.7; max-width: 700px; margin: 0 auto; }

/* ============================ LIENS RÉSEAUX SOCIAUX ============================ */
.fd-social-links { display: flex; justify-content: center; align-items: center; gap: 80px; flex-wrap: wrap; }

.fd-social-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform 0.3s ease; }

/* Icônes */
.fd-social-item img { width: 70px; height: 70px; margin-bottom: 12px; border-radius: 14px; background-color: transparent; /* Icônes marron */ filter: brightness(0) saturate(100%) invert(29%) sepia(7%) saturate(510%) hue-rotate(315deg) brightness(94%) contrast(90%); transition: transform 0.3s ease, filter 0.3s ease; }

.fd-social-item span { font-family: 'PT Serif', serif; color: #4f4045; font-size: 1rem; font-weight: 600; }

/* ============================ HOVER ============================ */
.fd-social-item:hover { transform: translateY(-6px); }

.fd-social-item:hover img { /* Vert charte au hover */ filter: brightness(0) saturate(100%) invert(63%) sepia(23%) saturate(457%) hue-rotate(82deg) brightness(96%) contrast(90%); transform: translateY(-5px); }

.fd-social-item:hover span { color: #6cb873; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 768px) { .fd-social { padding: 80px 25px; } .fd-social-header h2 { font-size: 2rem; } .fd-social-links { gap: 50px; } .fd-social-item img { width: 60px; height: 60px; } }

/*================================================================== DESCRIPTION DU SERVICE =====================================================================*/
.amenagement-paysager { position: relative; background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFond_a_propos_1_59cl.webp?alt=media&token=126b8723-7c21-43df-b983-e0daed894495"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 200px 40px; }

/* Overlay pour lisibilité */
.amenagement-paysager::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); z-index: 1; }

.amenagement-paysager-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.amenagement-paysager-contenu { position: relative; z-index: 3; }

.amenagement-paysager-surtitre { font-family: 'Californication', cursive; font-size: 50px; color: #6cb873; margin-bottom: 10px; }

.amenagement-paysager-titre { font-family: 'PT Serif', serif; font-weight: 700 !important; font-size: 42px; color: #4f4045; line-height: 1.2; margin-bottom: 25px; }

.amenagement-paysager-description { font-family: 'PT Serif', serif; font-size: 17px; line-height: 1.8; color: #5c6559; margin-bottom: 30px; }

.amenagement-paysager-liste { list-style: none; padding: 0; margin: 0; }

.amenagement-paysager-liste li { font-family: 'PT Serif', serif; font-size: 16px; color: #5c6559; padding-left: 30px; margin-bottom: 15px; position: relative; line-height: 1.6; }

.amenagement-paysager-liste li::before { content: "✓"; position: absolute; left: 0; color: #6cb873; font-weight: 700; font-size: 20px; }

.amenagement-paysager-images { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.amenagement-paysager-image { border-radius: 0px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }

.amenagement-paysager-image.grande { grid-row: span 2; border-radius: 200px 200px 0 0; }

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

.amenagement-paysager-image.grande img { height: 500px; }

.amenagement-paysager-image.petite img { height: 240px; }

@media (max-width: 968px) { .amenagement-paysager-container { grid-template-columns: 1fr; gap: 50px; } .amenagement-paysager-titre { font-size: 36px; } .amenagement-paysager-images { grid-template-columns: 1fr; } .amenagement-paysager-image.grande { grid-row: span 1; } .amenagement-paysager-image.grande img, .amenagement-paysager-image.petite img { height: 350px; } }

@media (max-width: 640px) { .amenagement-paysager { padding: 60px 20px; } .amenagement-paysager-titre { font-size: 32px; } .amenagement-paysager-surtitre { font-size: 28px; } .amenagement-paysager-image.grande img, .amenagement-paysager-image.petite img { height: 300px; } }

/* =================================================================== PARTENAIRES – MÉTAMORPHOSE ================================================================= */
.partners-section { position: relative; padding: 10px 40px; background: #ffffff; overflow: hidden; }

/* CONTAINER */
.partners-container { max-width: 1600px; margin: 0 auto; }

/* =========================== HEADER =========================== */
.partners-header { text-align: center; max-width: 750px; margin: 0 auto 70px; }

.partners-eyebrow { font-family: 'Californication', cursive; font-size: 3.5rem; color: #6cb873; display: block; }

/* =========================== WRAPPER =========================== */
.partners-logos-wrapper { overflow: hidden; position: relative; width: 100%; padding: 30px 0; }

/* SLIDER */
.partners-logos-slider { display: flex; align-items: center; width: fit-content; animation: partners-scroll 90s linear infinite; }

.partners-logos-slider:hover { animation-play-state: paused; }

/* =========================== LOGO CARD =========================== */
.partners-logo-item { flex: 0 0 auto; width: 180px; height: 100px; background: #ffffff; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 22px; padding: 20px; box-shadow: 0 8px 25px rgba(79, 64, 69, 0.08); transition: transform 0.35s ease, box-shadow 0.35s ease; }

.partners-logo-item img { max-width: 140px; max-height: 60px; object-fit: contain; filter: grayscale(100%); opacity: 0.8; transition: filter 0.35s ease, opacity 0.35s ease; }

/* Hover doux & naturel */
.partners-logo-item:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(108, 184, 115, 0.25); }

.partners-logo-item:hover img { filter: grayscale(0%); opacity: 1; }

/* =========================== ANIMATION =========================== */
@keyframes partners-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(-70%); } }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1024px) { .partners-title { font-size: 2.4rem; } }

@media (max-width: 768px) { .partners-section { padding: 70px 25px; } .partners-eyebrow { font-size: 1.8rem; } .partners-title { font-size: 2rem; } .partners-logo-item { width: 160px; height: 90px; margin: 0 16px; } }

@media (max-width: 480px) { .partners-title { font-size: 1.7rem; } .partners-logo-item { width: 140px; height: 80px; margin: 0 12px; } }

/* =============================================================== MAPS – MÉTAMORPHOSE (BG IMAGE) =============================================================== */
.maps-section { position: relative; padding: 50px 0; overflow: hidden; /* IMAGE DE FOND */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFond_a_propos_1_59cl.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* OVERLAY BLANC DOUX */
.maps-section::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); z-index: 0; }

/* CONTENU AU-DESSUS */
.maps-wrapper { position: relative; z-index: 1; padding: 50px 50px; }

/* HEADER */
.maps-header { text-align: center; margin-bottom: 70px; }

.maps-badge { font-family: 'Californication', cursive; font-size: 3.5rem; color: #6cb873; margin-bottom: 10px; }

.maps-title { font-family: 'PT Serif', serif; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700 !important; color: #4f4045; margin: 0; }

/* GRID */
.maps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

/* CARD */
.map-card { background: #ffffff; box-shadow: 0 15px 40px rgba(79, 64, 69, 0.15); transition: transform 0.4s ease, box-shadow 0.4s ease; }

.map-card:hover { transform: translateY(-8px); box-shadow: 0 25px 55px rgba(108, 184, 115, 0.25); }

/* MAP */
.map-container { position: relative; height: 300px; overflow: hidden; }

.map-container iframe { width: 100%; height: 100%; border: none; filter: saturate(0.7); transition: filter 0.4s ease; }

.map-card:hover iframe { filter: saturate(1); }

.map-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(79, 64, 69, 0.45) 100%); }

/* INFO */
.map-info { padding: 30px; position: relative; }

.map-info::before { content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 3px; background: #6cb873; }

.map-type { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6cb873; margin-bottom: 8px; }

.map-name { font-family: 'PT Serif', serif; font-size: 22px; font-weight: 700 !important; color: #4f4045; margin-bottom: 12px; }

.map-address, .map-hours { font-size: 14px; color: #5c6559; margin-bottom: 6px; }

/* RESPONSIVE */
@media (max-width: 1024px) { .maps-grid { grid-template-columns: 1fr; } .maps-section { padding: 70px 0; } }

/* ==================================================================== CREDIT D'IMPOT ======================================================================= */
/* ================================ BANDEAU BLANC QUI PERMET LE CHEVAUCHEMENT =================================== */
.bloc-fixe-top { height: 150px; background: #FFFFFF; }

/* ================================ SECTION PARALLAX =================================== */
.valeurs-bloc { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F9m6PDwwFCvWk57DvnFdRlsoyhIp1%2Fimages%2FFOND_contact_2_bnab.webp"); background-size: cover; background-position: center; background-attachment: fixed; padding: 120px 0; position: relative; z-index: 1; }

/* Overlay doux beige */
.valeurs-bloc::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(47, 79, 58, 0.1); z-index: -1; }

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

/* ================================ BLOC TEXTE (marron Terre Happy) =================================== */
.valeurs-texte { background: #4f4045; padding: 60px 70px; color: #FFFFFF; border-radius: 0px; margin-top: -200px; position: relative; z-index: 10; padding-bottom: 100px; }

.valeurs-texte h2 { font-family: "PT Serif", serif; font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 25px; color: #FFFFFF; }

.valeurs-texte p { font-family: 'PT Serif', serif; font-size: 1.05rem; line-height: 1.8; color: #f1f1f1; max-width: 520px; }

/* ================================ LOGO EN PASTILLE INCLINÉE =================================== */
.logo-pastille { position: absolute; top: -30px; right: -30px; width: 180px; height: auto; display: flex; align-items: center; justify-content: center; transform: rotate(15deg); z-index: 20; }

.logo-pastille img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.2)); }

/* ================================ RESPONSIVE =================================== */
@media (max-width: 900px) { .bloc-fixe-container { grid-template-columns: 1fr; } .valeurs-texte { margin-top: -120px; padding: 40px 30px; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%); } .valeurs-image { height: 260px; border-radius: 0 0 20px 20px; } .logo-pastille { width: 140px; top: -20px; right: -20px; } }

@media (max-width: 600px) { .bloc-fixe-top { height: 100px; } .logo-pastille { width: 110px; top: -15px; right: -15px; } }

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