@charset "UTF-8";
@import url(main.css);
.spacer { display: none; }

/**************************************************AJUSTEMENTS SEO***********************************************/
#navbarSupportedContent > ul > li.dropdown.px-4 > div > a:nth-child(1) { font-size: 0.8em !important; }

#navbarSupportedContent > ul > li.dropdown.px-4 > div > ul a { transition: all 0.5s ease; }

#navbarSupportedContent > ul > li.dropdown.px-4 > div > ul a:hover { background-color: #F0F1EC !important; }

.first-banner-seo-page .background-image-div-opacity { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FChatGPT_Image_1_avr_2026_10_32_52_fnni.webp?alt=media&token=ba9495d2-a063-4a7c-96b6-0d0f99f3a2cc") !important; opacity: 0.7 !important; }

#bandeau-title-seo .titles { font-weight: 300 !important; }

#photo-text-seo-page h2.titles, #seo-text-images h2.titles { font-weight: 300 !important; }

.first-activity-div .card-cover a, .second-activity-div .card-cover a, .third-activity-div .card-cover a { font-weight: 300 !important; }

.logo-seo-page { background-color: #F0F1EC; border-radius: 10px; padding: 5px; }

#button-seo-page-homepage .button_homepageDoubleScreen { color: #131514 !important; }

#logo-seo-page + div + #contact { background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FChatGPT_Image_1_avr_2026_10_32_52_fnni.webp?alt=media&token=ba9495d2-a063-4a7c-96b6-0d0f99f3a2cc); background-size: cover; background-attachment: fixed; }

/***************************************POP UP Responsive*******************************************/
@media (max-width: 768px) { #srv-popup-devis { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: none !important; } #srv-popup-devis > div { border-radius: 16px !important; padding: 1rem !important; } #srv-popup-devis a { padding-top: 6px !important; } #srv-popup-devis p { font-size: 14px !important; line-height: 1.4rem !important; padding: 0.75rem !important; } }

@media (max-width: 480px) { #srv-popup-devis { left: 10px !important; right: 10px !important; bottom: 10px !important; } #srv-popup-devis > div { padding: 0.9rem !important; border-radius: 14px !important; } #srv-popup-devis .srv-card-icon, #srv-popup-devis a > div:first-child { width: 48px !important; height: 48px !important; margin: 0 auto 14px auto !important; } #srv-popup-devis p { font-size: 13px !important; line-height: 1.3rem !important; margin-bottom: 12px !important; } #srv-popup-devis button { top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; font-size: 14px !important; line-height: 28px !important; } #srv-popup-devis a span { font-size: 14px !important; } #srv-popup-devis svg { max-width: 100% !important; height: auto !important; } }

/*-----------------------------------------Barre de navigation-------------------------------------*/
.animated-border-button:after { background-color: #e36729; }

.animated-border-button.is-active:after { visibility: visible; transform: scaleX(1); }

.animated-border-button.is-active { color: #E36729; font-weight: 600 !important; }

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

.first-activity-div, .second-activity-div, .third-activity-div { border: 1.5px solid rgba(227, 103, 41, 0.35); }

.first-activity-div h2, .second-activity-div h2, .third-activity-div h2 { text-transform: uppercase; }

/*------------------------------------------------------Bloc catalogues-----------------------------------------*/
.catalogues-download { background: #beb4a8; padding: 100px 24px; }

.catalogues-download-inner { max-width: 1100px; margin: 0 auto; }

.catalogues-download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.catalogue-card { display: flex; flex-direction: column; text-decoration: none !important; background: rgba(19, 21, 20, 0.06); border: 1.5px solid rgba(19, 21, 20, 0.1); border-radius: 18px; overflow: hidden; position: relative; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s; }

.catalogue-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #e36729, #62a246); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

.catalogue-card:hover { transform: translateY(-6px); background: rgba(19, 21, 20, 0.1); border-color: rgba(227, 103, 41, 0.35); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12); }

.catalogue-card:hover::after { transform: scaleX(1); }

.catalogue-cover { aspect-ratio: 16 / 6; overflow: hidden; background: #ddd; }

.catalogue-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }

.catalogue-card:hover .catalogue-cover img { transform: scale(1.04); }

.catalogue-content { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; }

.catalogue-content h3 { margin: 0; color: #131514; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }

.catalogue-content p { margin: 0; color: rgba(19, 21, 20, 0.68); font-size: 0.92rem; line-height: 1.75; }

.catalogue-btn { margin-top: 6px; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; background: transparent; color: #131514 !important; border: 2px solid #e36729; clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); padding: 14px 30px 14px 24px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none !important; position: relative; overflow: hidden; transition: color 0.32s; isolation: isolate; }

.catalogue-btn::after { content: ''; position: absolute; inset: 0; background: #e36729; transform: translateX(-105%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; }

.catalogue-card:hover .catalogue-btn { color: #fff !important; }

.catalogue-card:hover .catalogue-btn::after { background: #62a246; transform: translateX(0); }

.catalogue-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 860px) { .catalogues-download { padding: 70px 20px; } .catalogues-download-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

\
 .photo-carousel { position: relative; width: 100%; height: 600px; overflow: hidden; border-radius: inherit; }

.photo-carousel-track { display: flex; height: 100%; will-change: transform; }

.photo-slide { flex: 0 0 100%; width: 100%; height: 100%; }

.photo-slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }

/*----------------------------------------------------Contact------------------------------------------*/
#contact.bg-sixthColor { padding: 150px 0 !important; }

#contact.bg-sixthColor .background-image-div-opacity { background-size: 60%; background-position: center; background-repeat: no-repeat; background-attachment: scroll; }

#contact > div.col-lg-6.text-center.text-color-sixth { padding: 50px !important; }

iframe[src*="google.com/maps"] { display: block; width: 100% !important; height: 420px !important; border: 0 !important; border-radius: 16px; outline: 1.5px solid rgba(227, 103, 41, 0.35); outline-offset: 0px; box-shadow: 0 12px 48px rgba(19, 21, 20, 0.25), 0 0 0 1px rgba(227, 103, 41, 0.1); filter: grayscale(15%) contrast(1.02); }

/* Responsive */
@media (max-width: 600px) { iframe[src*="google.com/maps"] { height: 280px !important; } }

#formContact { background: rgba(19, 21, 20, 0.62) !important; border: 1.5px solid rgba(227, 103, 41, 0.35) !important; border-radius: 20px !important; backdrop-filter: blur(10px) !important; box-shadow: 0 12px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; position: relative !important; }

/* ── Inputs & textarea ── */
#formContact .form-control { background: rgba(19, 21, 20, 0.55) !important; border: 1.5px solid rgba(227, 103, 41, 0.22) !important; border-radius: 8px !important; color: #f0f1ec !important; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s !important; }

#formContact .form-control:focus { background: rgba(19, 21, 20, 0.75) !important; border-color: #e36729 !important; box-shadow: 0 0 0 3px rgba(227, 103, 41, 0.18) !important; color: #f0f1ec !important; outline: none !important; }

/* ── Labels floating ── */
#formContact .form-floating > label { color: rgba(240, 241, 236, 0.5) !important; }

#formContact .form-floating > .form-control:focus ~ label, #formContact .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #e36729 !important; }

/* ── Textarea ── */
#formContact textarea.form-control { resize: vertical; min-height: 140px; }

/* ── Input file ── */
#formContact input.form-control[type="file"] { color: rgba(240, 241, 236, 0.55) !important; font-size: 0.85rem !important; }

\
#formContact input[type="file"]::file-selector-button { background: rgba(227, 103, 41, 0.15) !important; border: 1px solid rgba(227, 103, 41, 0.35) !important; color: #e36729 !important; border-radius: 6px !important; padding: 4px 14px !important; font-size: 0.82rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.22s !important; margin-right: 10px !important; }

#formContact input[type="file"]::file-selector-button:hover { background: rgba(227, 103, 41, 0.28) !important; }

/* ── Bouton supprimer fichier ── */
#erase-file { background: transparent !important; border: 1.5px solid rgba(227, 103, 41, 0.35) !important; color: #e36729 !important; border-radius: 0 8px 8px 0 !important; transition: background 0.22s !important; }

#erase-file:hover { background: rgba(227, 103, 41, 0.2) !important; }

/* ── Checkbox ── */
#formContact .checkbox label { color: rgba(240, 241, 236, 0.62) !important; font-size: 0.85rem !important; }

#formContact .checkbox input[type="checkbox"] { accent-color: #e36729 !important; width: 15px !important; height: 15px !important; cursor: pointer !important; }

#formContact .checkbox a { color: #e36729 !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

#formContact .checkbox a:hover { color: #62a246 !important; }

/* ── Bouton Envoyer ── */
#formContact button[type="submit"] { background: #e36729 !important; color: #fff !important; border: 2px solid #e36729 !important; border-radius: 0 !important; clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%) !important; padding: 14px 32px !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: background 0.32s, border-color 0.32s !important; }

#formContact button[type="submit"]:hover { background: #62a246 !important; border-color: #62a246 !important; color: #fff !important; }

/*-----------------------------------------------------------BLOC AVIS---------------------------------------*/
.owl-carousel .owl-stage-outer { overflow: visible !important; }

div.googleReviews-div { padding: 150px 0; margin: 0 !important; background-color: #beb4a8; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FDA_Terre_As_Mans_2_3l84.webp"); background-size: 60%; background-position: center; background-repeat: no-repeat; }

div.googleReviews-div .card { background-color: #4c453ee6; backdrop-filter: blur(10px); color: white; }

small.text-muted { color: #e48a5c !important; }

/*--------------------------------------------------Bandeau partenaires--------------------------------------------------*/
.partners-strip { background: #131514; padding: 60px 24px; position: relative; overflow: hidden; }

.partners-strip::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); opacity: 0.5; pointer-events: none; }

.partners-strip-inner { max-width: 1250px; margin: 0 auto; position: relative; z-index: 1; }

.partners-header { text-align: center; margin-bottom: 34px; }

.partners-header h2 { margin: 0 0 12px 0; color: #f0f1ec; font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }

.partners-sep { width: 56px; height: 2px; margin: 0 auto; border-radius: 2px; background: linear-gradient(90deg, #e36729, #62a246); }

.partners-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

.partner-card { background: rgba(240, 241, 236, 0.04); border: 1.5px solid rgba(227, 103, 41, 0.22); border-radius: 18px; padding: 24px 20px; display: flex; align-items: center; gap: 18px; min-height: 120px; position: relative; overflow: hidden; backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s; }

.partner-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #e36729, #62a246); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

.partner-card:hover { transform: translateY(-5px); border-color: rgba(227, 103, 41, 0.5); background: rgba(240, 241, 236, 0.07); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28); }

.partner-card:hover::after { transform: scaleX(1); }

.partner-logo-wrap { width: 78px; height: 78px; flex-shrink: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; padding: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

.partner-logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.partner-text { display: flex; flex-direction: column; gap: 6px; }

.partner-text h3 { margin: 0; color: #f0f1ec; font-size: 1rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 980px) { .partners-row { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }

@media (max-width: 600px) { .partners-strip { padding: 50px 18px; } .partner-card { padding: 20px 16px; gap: 14px; min-height: 104px; } .partner-logo-wrap { width: 64px; height: 64px; border-radius: 12px; padding: 8px; } .partner-text h3 { font-size: 0.92rem; } }

/*-----------------------------------------------------SERVICES------------------------------------------------------*/
.services { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: var(--dark); display: flex; align-items: center; justify-content: center; }

/* Carrousel fond */
.srv-slides { position: absolute; inset: 0; z-index: 0; }

.srv-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: srvSlide 20s infinite; }

/*---------------------------------Images de fond du bloc service--------------*/
/*------------TUYAUX-------------------------*/
.srv-slide:nth-child(1) { animation-delay: 0s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_9645_k9ei.webp"); }

/*------------------Maison beige---------------------*/
.srv-slide:nth-child(2) { animation-delay: 5s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FChatGPT_Image_1_avr_2026_10_32_52_fnni.webp"); }

/*----------------Mur jardin------------------------------*/
.srv-slide:nth-child(3) { animation-delay: 10s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_4946_qu97.webp"); }

/*------------------------Terrasse avec portillon---------------*/
.srv-slide:nth-child(4) { animation-delay: 15s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_8516_ykpm.webp"); }

@keyframes srvSlide { 0% { opacity: 0;
    transform: scale(1.04); }
  5% { opacity: 1;
    transform: scale(1.04); }
  22% { opacity: 1;
    transform: scale(1); }
  27% { opacity: 0;
    transform: scale(1); }
  100% { opacity: 0; } }

/* Overlay texturé */
.srv-overlay { position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"), linear-gradient(to bottom, rgba(19, 21, 20, 0.72) 0%, rgba(19, 21, 20, 0.6) 50%, rgba(19, 21, 20, 0.78) 100%); }

/* Cadre carte de jeu */
.srv-card-frame { position: absolute; inset: 28px; z-index: 2; border: 2px solid rgba(240, 241, 236, 0.18); border-radius: 22px; pointer-events: none; }

/* Logos coins */
.srv-corner { position: absolute; z-index: 3; width: 62px; pointer-events: none; }

.srv-corner img { width: 100%; display: block; }

.srv-corner.tl { top: 48px; left: 48px; }

.srv-corner.tr { top: 48px; right: 48px; }

.srv-corner.bl { bottom: 48px; left: 48px; transform: rotate(180deg); }

.srv-corner.br { bottom: 48px; right: 48px; transform: rotate(180deg); }

/* Contenu */
.srv-inner { position: relative; z-index: 4; width: 100%; max-width: 1200px; margin: 0 auto; padding: 150px 80px; display: flex; flex-direction: column; align-items: center; }

/* Header */
.srv-header { text-align: center; margin-bottom: 56px; }

.srv-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }

.eyebrow-line { width: 36px; height: 2px; background: var(--orange); flex-shrink: 0; }

.eyebrow-text { color: var(--orange); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }

.srv-header h2 { color: var(--bg); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.18; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); margin-bottom: 16px; }

.srv-header h2 em { font-style: normal; color: var(--orange); }

/* Séparateur carte */
.card-divider { display: flex; align-items: center; gap: 10px; justify-content: center; }

.card-divider-line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(227, 103, 41, 0.6)); }

.card-divider-line.rev { background: linear-gradient(90deg, rgba(227, 103, 41, 0.6), transparent); }

.suit-cluster { display: flex; gap: 5px; align-items: center; background: rgba(19, 21, 20, 0.85); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(227, 103, 41, 0.28); }

.suit-cluster svg { width: 12px; height: 12px; }

.suit-o { fill: var(--orange); }

.suit-g { fill: var(--green); }

/* Grille cards */
.srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; width: 100%; }

.srv-card { background: rgba(19, 21, 20, 0.58); border: 1.5px solid rgba(227, 103, 41, 0.28); border-radius: 16px; padding: 36px 30px 32px; text-decoration: none; position: relative; overflow: hidden; backdrop-filter: blur(10px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; gap: 0; }

.srv-card::before { content: ''; position: absolute; inset: -1px; border-radius: 16px; background: linear-gradient(135deg, rgba(227, 103, 41, 0.18) 0%, transparent 50%); pointer-events: none; z-index: 0; transition: opacity 0.3s; opacity: 1; }

/* Barre accent top */
.srv-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--green)); border-radius: 16px 16px 0 0; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

.srv-card:hover { transform: translateY(-6px); border-color: rgba(227, 103, 41, 0.6); box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(227, 103, 41, 0.2); }

.srv-card:hover::after { transform: scaleX(1); }

.srv-card-icon { position: relative; z-index: 1; width: 52px; height: 52px; background: rgba(227, 103, 41, 0.12); border: 1.5px solid rgba(227, 103, 41, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; transition: background 0.3s; }

.srv-card:hover .srv-card-icon { background: rgba(227, 103, 41, 0.22); }

.srv-card-icon svg { width: 26px; height: 26px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.srv-card h3 { position: relative; z-index: 1; color: var(--bg); font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

.srv-card p { position: relative; z-index: 1; color: rgba(240, 241, 236, 0.68); font-size: clamp(0.82rem, 1.1vw, 0.92rem); line-height: 1.8; flex: 1; }

.srv-card-arrow { position: relative; z-index: 1; margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: gap 0.25s; }

.srv-card:hover .srv-card-arrow { gap: 14px; }

.srv-card-arrow svg { width: 16px; height: 16px; stroke: var(--orange); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }

.srv-card:hover .srv-card-arrow svg { transform: translateX(4px); }

@media (max-width: 900px) { .srv-grid { grid-template-columns: 1fr; max-width: 480px; } .srv-inner { padding: 80px 28px; } .srv-corner { width: 44px; } .srv-corner.tl, .srv-corner.tr { top: 38px; } .srv-corner.bl, .srv-corner.br { bottom: 38px; } .srv-corner.tl, .srv-corner.bl { left: 36px; } .srv-corner.tr, .srv-corner.br { right: 36px; } .srv-card-frame { inset: 18px; } }

@media (min-width: 901px) and (max-width: 1100px) { .srv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } .srv-inner { padding: 100px 48px; } }

/*------------------------------------------Introduction--------------------------------------------------------------------*/
:root { --orange: #e36729; --bg: #f0f1ec; --green: #62a246; --dark: #131514; }

.intro-section { position: relative; width: 100%; min-height: 110vh; display: flex; align-items: stretch; overflow: hidden; }

.intro-bg { position: absolute; inset: 0; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_4010_nmu8.webp"); background-size: cover; background-position: center; z-index: 0; }

.intro-bg.carrousel { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_7454_38c4.webp"); }

.intro-bg.terrassement { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_4080_006h.webp"); }

.intro-bg.eaux { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_8313_epxf.webp"); }

.intro-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #4e463a 0%, #463b2cdb 50%, #a69277ab 100%); }

.intro-inner { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 80px 60px; }

.intro-text { display: flex; flex-direction: column; }

.intro-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }

.eyebrow-line { width: 36px; height: 2px; background: var(--orange); flex-shrink: 0; }

.eyebrow-text { color: var(--orange); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }

.intro-text h2 { color: var(--bg); font-size: clamp(1.5rem, 2.9vw, 2.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.18; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }

.intro-text h2 em { font-style: normal; color: var(--orange); }

.intro-text h3 { color: var(--green); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 24px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }

.card-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }

.card-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(227, 103, 41, 0.6), transparent); }

.card-divider-line.rev { background: linear-gradient(90deg, transparent, rgba(227, 103, 41, 0.6)); }

.card-suits { display: flex; gap: 6px; align-items: center; }

.card-suits svg { width: 13px; height: 13px; }

.suit-o { fill: var(--orange); }

.suit-g { fill: var(--green); }

.intro-text p { color: rgba(240, 241, 236, 0.75); font-size: clamp(0.88rem, 1.3vw, 1rem); line-height: 1.85; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); margin-bottom: 36px; }

.cta-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; background: transparent; color: #fff !important; border: 2px solid var(--orange); clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); padding: 14px 36px 14px 30px; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; transition: color 0.32s; }

.cta-btn::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform: translateX(-105%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; }

.cta-btn:hover::after { background: var(--green); transform: translateX(0); }

.cta-btn span, .cta-btn svg { position: relative; z-index: 1; }

.cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.map-card { background: rgba(19, 21, 20, 0.6); border: 1.5px solid rgba(227, 103, 41, 0.35); border-radius: 20px; overflow: hidden; backdrop-filter: blur(10px); box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; }

.map-card::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; background: linear-gradient(135deg, rgba(227, 103, 41, 0.2) 0%, transparent 50%, rgba(98, 162, 70, 0.12) 100%); pointer-events: none; z-index: 10; }

.map-header { padding: 16px 22px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(227, 103, 41, 0.2); }

.map-header-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(227, 103, 41, 0.7); flex-shrink: 0; }

.map-header-title { color: var(--bg); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

.map-header-sub { color: rgba(240, 241, 236, 0.4); font-size: 0.73rem; margin-left: auto; letter-spacing: 0.06em; }

#intervention-map { width: 100%; height: 600px; }

@media (max-width: 900px) { .intro-inner { grid-template-columns: 1fr; padding: 60px 28px; gap: 40px; } .cta-btn { align-self: center; } .intro-text { text-align: center; } .intro-eyebrow { justify-content: center; } }

/*----------------------------------------------------Bannière d'accueil------------------------------------------------------*/
:root { --orange: #e36729; --bg: #f0f1ec; --green: #62a246; --dark: #131514; }

.hero { position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--dark); }

.slides { position: absolute; inset: 0; z-index: 0; }

.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: slideShow 25s infinite; }

/*---------------------------------Images de fond du bloc accueil--------------*/
/*------------------------Maison beige--------------------*/
.slide:nth-child(1) { animation-delay: 0s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FChatGPT_Image_1_avr_2026_10_32_52_fnni.webp"); }

/*--------------------Cours graviers portail----------------*/
.slide:nth-child(2) { animation-delay: 5s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_8505_102b.webp"); }

/*----------------------------------------Terrasse escaliers---------*/
.slide:nth-child(3) { animation-delay: 10s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_7455_5hmf.webp"); }

/*-----------------Jardin palmier--------------------------------*/
.slide:nth-child(4) { animation-delay: 15s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_7968_976b.webp"); }

/*----------------------------parterre aménagé--------------*/
.slide:nth-child(5) { animation-delay: 20s; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FIMG_8231_72dl.webp"); }

@keyframes slideShow { 0% { opacity: 0;
    transform: scale(1.04); }
  5% { opacity: 1;
    transform: scale(1.04); }
  18% { opacity: 1;
    transform: scale(1); }
  23% { opacity: 0;
    transform: scale(1); }
  100% { opacity: 0; } }

.overlay { position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"), linear-gradient(to bottom, rgba(19, 21, 20, 0.55) 0%, rgba(19, 21, 20, 0.3) 40%, rgba(19, 21, 20, 0.75) 100%); }

.hero .card-frame { position: absolute; inset: 28px; z-index: 2; border: 2px solid rgba(240, 241, 236, 0.18); border-radius: 22px; pointer-events: none; }

.corner-logo { position: absolute; z-index: 3; width: 62px; }

.corner-logo img { width: 100%; display: block; }

.corner-logo.tl { top: 48px; left: 48px; }

.corner-logo.tr { top: 48px; right: 48px; }

.corner-logo.bl { bottom: 48px; left: 48px; transform: rotate(180deg); }

.corner-logo.br { bottom: 48px; right: 48px; transform: rotate(180deg); }

.hero-content { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }

.inner-card { background: rgba(19, 21, 20, 0.54); border: 1.5px solid rgba(227, 103, 41, 0.35); border-radius: 20px; padding: 44px 52px; max-width: 820px; width: 100%; backdrop-filter: blur(8px); box-shadow: 0 8px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; }

.inner-card::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; background: linear-gradient(135deg, rgba(227, 103, 41, 0.25) 0%, transparent 45%, rgba(98, 162, 70, 0.15) 100%); pointer-events: none; z-index: -1; }

.hero .card-body { display: flex; align-items: center; gap: 40px; }

.logo-col { flex-shrink: 0; }

.site-logo { width: 140px; display: block; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.55)); }

.card-sep { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; height: 160px; position: relative; }

.card-sep::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(227, 103, 41, 0.55) 30%, rgba(227, 103, 41, 0.55) 70%, transparent); transform: translateX(-50%); }

.suit-cluster { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(19, 21, 20, 0.92); padding: 8px 6px; border-radius: 8px; border: 1px solid rgba(227, 103, 41, 0.3); }

.suit-cluster svg { width: 14px; height: 14px; fill: var(--orange); display: block; }

.suit-cluster svg.green { fill: var(--green); }

.text-col { flex: 1; text-align: left; }

.hero h1 { color: var(--bg); font-size: clamp(1.25rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.22; margin-bottom: 10px; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }

.hero h1 span.brand { color: var(--orange); display: block; font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.1; margin-bottom: 4px; }

.hero h2 { color: rgba(240, 241, 236, 0.65); font-size: clamp(0.75rem, 1.3vw, 0.95rem); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 30px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

/* Bouton moderne — wipe + coin coupé */
.cta-btn { display: inline-flex; align-items: center; gap: 14px; background: transparent; color: #fff; border: 2px solid var(--orange); clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); padding: 14px 36px 14px 30px; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; transition: color 0.32s; }

.cta-btn:hover { color: white; }

.cta-btn::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform: translateX(-105%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; }

.cta-btn:hover::after { background: var(--green); transform: translateX(0); }

.cta-btn span, .cta-btn svg { position: relative; z-index: 1; }

.cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 680px) { .card-body { flex-direction: column; text-align: center; gap: 24px; } .text-col { text-align: center; } .card-sep { display: none; } .corner-logo { width: 44px; } .corner-logo.tl, .corner-logo.tr { top: 38px; } .corner-logo.bl, .corner-logo.br { bottom: 38px; } .corner-logo.tl, .corner-logo.bl { left: 36px; } .corner-logo.tr, .corner-logo.br { right: 36px; } .inner-card { padding: 32px 22px 28px; } .card-frame { inset: 18px; } }

/*--------------------------------------------------------Intro des pages secondaires--------------------------------------------*/
.terrassement-block { background: #beb4a8; padding: 80px 40px; position: relative; }

.terrassement-block:has(.photo-carousel) { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FDA_Terre_As_Mans_2_3l84.webp?alt=media&token=61f9e567-565d-4edc-aa9d-0420c6b5e945"), url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FQ1go6GSLh7f1H3gwIFOIHvfEkW83%2Fimages%2FDA_Terre_As_Mans_2_3l84.webp?alt=media&token=61f9e567-565d-4edc-aa9d-0420c6b5e945"); background-size: 40%, 40%; background-position: bottom left, bottom right; background-repeat: no-repeat, no-repeat; }

@media (max-width: 860px) { .terrassement-block { background-image: none; } }

.terrassement-inner { max-width: 1100px; margin: 0 auto; }

/* ── Texte intro ── */
.terrassement-intro { max-width: 1400px; margin: 0 auto 56px; text-align: center; }

.terrassement-intro p { color: #131514; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.9; opacity: 0.82; }

/* ── Séparateur léger ── */
.terrassement-sep { width: 48px; height: 2px; background: linear-gradient(90deg, #e36729, #62a246); margin: 0 auto 48px; border-radius: 2px; }

/* ── Grille icônes ── */
.terrassement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.terr-item { background: rgba(19, 21, 20, 0.06); border: 1.5px solid rgba(19, 21, 20, 0.1); border-radius: 14px; padding: 32px 26px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0; position: relative; overflow: hidden; transition: background 0.28s, border-color 0.28s, transform 0.28s; }

.terr-item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #e36729, #62a246); border-radius: 14px 14px 0 0; transform: scaleX(0); transform-origin: left; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }

.terr-item:hover { background: rgba(19, 21, 20, 0.1); border-color: rgba(227, 103, 41, 0.35); transform: translateY(-4px); }

.terr-item:hover::after { transform: scaleX(1); }

.terr-icon { width: 50px; height: 50px; background: rgba(227, 103, 41, 0.12); border: 1.5px solid rgba(227, 103, 41, 0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }

.terr-icon svg { width: 24px; height: 24px; stroke: #e36729; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.terr-item h4 { color: #131514; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; line-height: 1.3; }

.terr-item p { color: rgba(19, 21, 20, 0.68); font-size: 0.87rem; line-height: 1.75; }

@media (max-width: 860px) { .terrassement-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; } .terrassement-block { padding: 60px 24px; } }

@media (min-width: 861px) and (max-width: 1050px) { .terrassement-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/*--------------------------------------------------------------------Boutons----------------------------------------------*/
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; background: transparent !important; color: #fff !important; border: 2px solid var(--orange) !important; clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%) !important; padding: 14px 36px 14px 30px !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; cursor: pointer !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; transition: all 0.32s !important; z-index: 0 !important; isolation: isolate !important; /* très important */ border-radius: 0 !important; }

a.button_header { color: #131514 !important; }

a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.phone-number-button:hover { color: #fff !important; }

a.button_header::after, a.button_homepageScreen::after, a.button_homepageDoubleScreen::after, a.phone-number-button::after { content: "" !important; position: absolute !important; inset: 0 !important; background: var(--orange) !important; transform: translateX(-105%) !important; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: -1 !important; /* passe derrière le texte */ pointer-events: none !important; }

a.button_header:hover::after, a.button_homepageScreen:hover::after, a.button_homepageDoubleScreen:hover::after, a.phone-number-button:hover::after { background: var(--green) !important; transform: translateX(0) !important; }

/*-----------------------------------------------Galerie infinie-------------------------------------------------------------*/
.infinite-gallery { overflow: hidden; width: 100%; position: relative; margin: 150px 0; }

.gallery-track { display: flex; gap: 20px; width: max-content; animation: scrollGallery 60s linear infinite; }

.gallery-item { flex: 0 0 auto; }

.gallery-item img { max-height: 400px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 15px; display: block; }

/* Animation */
@keyframes scrollGallery { from { transform: translateX(0); }
  to { transform: translateX(-50%); } }

/* Pause au survol (optionnel) */
.infinite-gallery:hover .gallery-track { animation-play-state: paused; }

.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 9999; }

.lightbox.active { opacity: 1; pointer-events: auto; }

.lightbox-image { max-width: 90vw; max-height: 90vh; border-radius: 12px; object-fit: contain; }

.lightbox-close { position: absolute; top: 20px; right: 25px; background: transparent; border: none; color: white; font-size: 40px; cursor: pointer; line-height: 1; }

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