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

a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { display: none; }

.navbar { box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); /* Optionnel : ajoute une ombre subtile */ }

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

.fs-2.fw-700.titles { margin-bottom: 30px; margin-top: 80px; }

div#contact { background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a1a1a1' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); }

.lh-1.mb-3.titles { margin-top: -350px; text-align: left; padding-left: 80px; }

form#formContact { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); border-radius: 20px; }

.b-bloc-divider { height: 40px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

.lh-1.mb-3.titles p { line-height: 1.4; margin-top: 15px; }

button.w-100.btn.btn-outline-dark { color: #000 !important; transition: all 0.3s ease; background: linear-gradient(135deg, #fff, #838383); font-weight: 600; font-family: 'Afacad Flux'; letter-spacing: 1px; border: 2px solid #dadbdd; border-radius: 0px; }

button.w-100.btn.btn-outline-dark { background: linear-gradient(135deg, #fff, #838383); color: #000 !important; transform: translateY(-2px); }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { background: linear-gradient(135deg, #fff, #838383); border: 2px solid #dadbdd; border-radius: 0px !important; }

h2.realisations-title { text-align: center; padding: 40px; background-color: black; color: white; font-size: 34px; margin-bottom: -40px; }

h2.nettoyage-title { text-align: center; padding: 40px; background-color: black; color: white; font-size: 34px; }

.fs-6.lead.mt-4.mb-4 { font-size: 17px !important; color: #555; }

button.faq-question.faq-button.w-100.text-start.d-flex.justify-content-between.align-items-center.p-3.text-color-fourth { background-color: #dadbdd !important; }

.faq-answer.faq-description.p-3 { font-size: 18px; }

section.faq-section.position-relative.py-5.bg-primaryColor.text-color-primary { padding-top: 0px !important; }

.photoTitleText { padding: 0; margin-bottom: 0; }

/* -------------------------------------------------------------- RÉALISATIONS VIDÉO -------------------------------------------------------------- */
.realisations-video-section { padding: 100px 0; background: #ffffff; }

.realisations-video-container { max-width: 1500px; margin: 0 auto; padding: 0 6%; }

.realisations-video-title { text-align: center; font-size: 2.6rem; margin-bottom: 60px; }

/* Grille */
.realisations-video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

/* Carte vidéo */
.video-card { position: relative; border-radius: 15px; overflow: hidden; background: #000; }

/* Vidéo */
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bouton play */
.video-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #fff; background: rgba(0, 0, 0, 0.35); border: none; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; }

.video-play-btn:hover { background: rgba(0, 0, 0, 0.5); transform: scale(1.05); }

/* Quand la vidéo joue */
.video-card.playing .video-play-btn { display: none; }

@media (max-width: 1200px) { .realisations-video-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .realisations-video-grid { grid-template-columns: 1fr; } .video-play-btn { font-size: 36px; } }

/*-------------------Galerie Custom--------------------------*/
#custom-gallery .img-overlay { border-radius: 15px; }

#custom-gallery .img-wrapper { border-radius: 15px; overflow: hidden; }

#custom-gallery { padding-top: 40px; }

@media screen and (min-width: 991px) { #custom-gallery { padding: 60px 30px 0 30px; } }

#custom-gallery .image { height: 400px !important; margin: 20px 0; }

.img-wrapper { position: relative; height: 100%; margin-top: 15px; }

.img-wrapper img { width: 100%; }

.img-overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; }

.img-overlay i { color: #fff; font-size: 3em; }

#overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#overlay img { margin: 0; width: 80%; height: auto; object-fit: contain; padding: 5%; }

@media screen and (min-width: 768px) { #overlay img { width: 60%; } }

@media screen and (min-width: 1200px) { #overlay img { width: 50%; } }

#nextButton { color: #fff; font-size: 2em; transition: opacity 0.8s; }

#nextButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #nextButton { font-size: 3em; } }

#prevButton { color: #fff; font-size: 2em; transition: opacity 0.8s; }

#prevButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #prevButton { font-size: 3em; } }

#exitButton { color: #fff; font-size: 2em; transition: opacity 0.8s; position: absolute; top: 15px; right: 15px; }

#exitButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #exitButton { font-size: 3em; } }

.img-responsive { height: 100% !important; object-fit: cover !important; }

/* ============================ SAVOIR-FAIRE PLEIN ÉCRAN ============================ */
.savoirfaire-full { background-color: #fff; color: #0a2e50; width: 100vw; margin: 0; padding: 0; overflow-x: hidden; }

.savoirfaire-container { display: flex; justify-content: space-evenly; align-items: center; /* ✅ centrage vertical */ width: 100%; min-height: 450px; text-align: center; }

/* --- Éléments --- */
.savoirfaire-item { flex: 1; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* --- Icônes PNG --- */
.savoirfaire-icon img { width: 100px; /* ✅ taille modifiable ici */ height: auto; margin-bottom: 25px; opacity: 0.9; }

/* --- Titres --- */
.savoirfaire-item h3 { font-size: 1.8rem; margin-bottom: 10px; color: #000; }

/* --- Paragraphes --- */
.savoirfaire-item p { color: #555; opacity: 0.9; font-size: 18px; max-width: 390px; margin: 0 auto; }

/* --- Séparateur --- */
.savoirfaire-divider { width: 1px; height: 240px; background-color: #000; align-self: center; }

/* --- Responsive --- */
@media (max-width: 1024px) { .savoirfaire-container { flex-direction: column; align-items: center; } .savoirfaire-divider { width: 50%; height: 1px; background-color: #000; margin: 25px 0; } .savoirfaire-item { width: 100%; max-width: 600px; padding: 50px 20px; } .savoirfaire-icon img { width: 70px; } }

/* -------------------------------------------------------------- SECTION TEXTE + IMAGE -------------------------------------------------------------- */
.texte-image-section { padding: 100px 0; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a1a1a1' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); }

.texte-image-container { max-width: 1400px; margin: 0 auto; padding: 0 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

/* Texte */
.texte-image-text h2 { font-size: 2.6rem; margin-bottom: 20px; }

.texte-image-text p { font-size: 18px; line-height: 1.6; color: #555; max-width: 520px; }

/* Image carrée */
.image-square { position: relative; width: 90%; aspect-ratio: 1 / 1; /* carré */ overflow: hidden; border-radius: 20px; }

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

@media (max-width: 900px) { .texte-image-container { grid-template-columns: 1fr; gap: 48px; } .texte-image-text { text-align: center; } .texte-image-text p { margin: 0 auto; } .image-square { max-width: 420px; margin: 0 auto; } }

/* -------------------------------------------------------------- FORMULES DE NETTOYAGE -------------------------------------------------------------- */
.formules-section { padding: 120px 0; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a1a1a1' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); }

.formules-container { max-width: 1400px; margin: 0 auto; padding: 0 6%; text-align: center; }

.formules-title { font-size: 2.8rem; margin-bottom: 16px; }

.formules-intro { font-size: 20px; color: #555; margin-bottom: 70px; }

/* Grille */
.formules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

/* Carte */
.formule-card { background: linear-gradient(0deg, #fff, #d7d7d7); padding: 40px 32px; transition: all 0.35s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-bottom: 2px solid #000000; }

.formule-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); background: #ffffff; }

/* Header carte */
.formule-header { margin-bottom: 24px; }

.formule-header h3 { font-size: 28px; margin-bottom: 10px; }

/* Description */
.formule-description { font-size: 18px; line-height: 1.6; color: #555; }

.formule-highlight .formule-description { color: #e0e0e0; }

/* Bloc prix */
.formule-price { margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; }

.price-from { font-size: 16px; color: #777; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; font-family: 'Afacad Flux'; }

.price-amount { font-size: 34px; font-weight: 800; color: #000; line-height: 1; font-family: 'Cormorant'; }

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

@media (max-width: 600px) { .formules-grid { grid-template-columns: 1fr; } .formules-title { font-size: 2.2rem; } }

/* ============================== HEADER IMAGE – PAGES SERVICES ============================== */
.header-image-sols { position: relative; width: 100%; height: 55vh; min-height: 380px; overflow: hidden; background-color: #242020; }

/* Image de fond */
.header-image-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

/* Overlay sombre élégant */
.header-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(213, 213, 213, 0.75) 0%, rgba(71, 71, 71, 0.79) 50%, rgba(0, 0, 0, 0.78) 100%); z-index: 2; pointer-events: none; }

/* Container */
.header-image-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-image-logo { display: flex; align-items: center; justify-content: right; }

.header-image-logo img { max-width: 220px; width: 100%; height: auto; }

/* Texte + trait */
.header-image-text-lined { display: flex; align-items: center; gap: 50px; }

/* Trait doré */
.header-image-line { width: 4px; background-color: #dadbdd; margin-top: 6px; margin-bottom: 6px; height: 200px; }

/* Texte */
.header-image-text-content h1 { font-size: 55px; color: #ffffff; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); line-height: 1.1; }

/* ============================== RESPONSIVE ============================== */
/* Tablettes */
@media (max-width: 900px) { .header-image-container { grid-template-columns: 1fr; gap: 30px; padding: 30px 20px; justify-items: center; text-align: center; } .header-image-logo { justify-content: center; } .header-image-logo img { max-width: 180px; } .header-image-text-lined { justify-content: center; gap: 20px; } .header-image-text-content { display: flex; flex-direction: column; align-items: center; } .header-image-text-content p { max-width: 100%; } }

/* Mobiles */
@media (max-width: 600px) { .header-image-sols { height: auto; min-height: 500px; padding: 40px 0; } .header-image-container { padding: 20px 15px; gap: 25px; } .header-image-logo img { max-width: 150px; } .header-image-text-lined { flex-direction: column; align-items: center; gap: 15px; } /* Trait horizontal mobile */ .header-image-line { width: 60px; height: 4px; margin: 0; } .header-image-text-content h1 { margin-bottom: 1rem; letter-spacing: 1px; font-size: 45px; } }

/* Très petits écrans */
@media (max-width: 400px) { .header-image-sols { min-height: 450px; } .header-image-logo img { max-width: 130px; } .header-image-container { padding: 15px 10px; } }

/* ============================== RÉSEAUX SOCIAUX  ============================== */
.reseaux-sociaux-section { background-color: #000; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; padding: 100px 20px; position: relative; text-align: center; }

/* Contenu au-dessus */
.reseaux-sociaux-container { position: relative; z-index: 1; max-width: 1250px; margin: 0 auto; }

/* Textes */
.reseaux-sociaux-title { color: #FFFFFF; font-size: 40px; line-height: 1.2; margin-bottom: 20px; }

.reseaux-sociaux-description { color: #F1F1F1; font-size: 19px; margin-bottom: 50px; opacity: 0.95; }

/* Liens */
.reseaux-sociaux-links { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.reseaux-sociaux-link { display: flex; align-items: center; gap: 15px; padding: 20px 40px; background: linear-gradient(135deg, #fff, #838383); color: #000; text-decoration: none; font-size: 16px; font-weight: 600; transition: all 0.3s ease; border: 2px solid #dadbdd; }

.reseaux-sociaux-link:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }

/* Icônes */
.reseaux-sociaux-icon { width: 30px; height: 30px; transition: all 0.3s ease; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 640px) { .reseaux-sociaux-title { font-size: 36px; } .reseaux-sociaux-links { flex-direction: column; gap: 20px; } .reseaux-sociaux-link { justify-content: center; width: 100%; max-width: 320px; margin: 0 auto; } }

/* -------------------------------------------------------------- MAP VERTICALE SOUS TEXTE (SUPERPOSÉE) -------------------------------------------------------------- */
.map-card-section { max-width: 1500px; /* même largeur que ton layout */ margin: 0 auto; padding: 0 80px; position: relative; padding-bottom: 100px; }

/* Carte map */
.map-card { width: 50%; /* largeur colonne gauche */ margin-top: -560px; /* 🔑 remonte sur le bloc contact */ border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); background: #fff; position: relative; z-index: 10; }

/* Iframe */
.map-card iframe { width: 100%; height: 500px; border: 0; display: block; }

/* -------------------------------------------------------------- RESPONSIVE MAP (MODE NORMAL SOUS FORMULAIRE) -------------------------------------------------------------- */
@media (max-width: 900px) { .map-card-section { padding: 40px 24px 60px; } .map-card { width: 100%; margin-top: 0; /* 🔥 on annule la superposition */ border-radius: 16px; } .map-card iframe { height: 320px; } .lh-1.mb-3.titles { margin-top: 0px; text-align: center; padding-left: 0px; } div#contact { background-color: #f7f7f7 !important; background: none; } }

/* -------------------------------------------------------------- SECTION TEXTE + VIDÉO -------------------------------------------------------------- */
.text-video-section { padding: 100px 0; background: #f7f7f7; }

.text-video-container { max-width: 1400px; margin: 0 auto; padding: 0 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

/* Bloc vidéo */
.video-square { position: relative; width: 100%; aspect-ratio: 1 / 1; /* 💡 clé du carré */ overflow: hidden; border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); }

.video-square video { width: 100%; height: 100%; object-fit: cover; /* recadrage propre */ }

/* Bloc texte */
.text-block { display: flex; align-items: flex-start; gap: 28px; }

/* Trait vertical */
.vertical-line { width: 3px; height: 415px; /* hauteur visible garantie */ background: #000; flex-shrink: 0; position: relative; margin-top: 8px; }

/* Étoile en bas du trait */
.line-star { position: absolute; bottom: -14px; /* dépasse légèrement */ left: 50%; transform: translateX(-50%); font-size: 20px; color: #111; background: #f7f7f7; /* masque le trait derrière */ padding: 0 4px; }

/* Contenu texte */
.text-content h2 { font-size: 2.6rem; margin: 0 0 25px; line-height: 1.2; }

.text-content p { font-size: 18px; color: #555; max-width: 520px; }

/* Bloc vidéo */
.video-block video { width: 100%; border-radius: 16px; object-fit: cover; }

/* -------------------------------------------------------------- RESPONSIVE SECTION TEXTE + VIDÉO -------------------------------------------------------------- */
@media (max-width: 900px) { .text-video-section { padding: 70px 0; } .text-video-container { grid-template-columns: 1fr; /* empilement */ gap: 48px; } /* Texte en premier */ .text-block { order: 1; gap: 20px; } /* Vidéo en dessous */ .video-square { order: 2; max-width: 420px; margin: 0 auto; } /* Trait vertical */ .vertical-line { height: 460px; width: 1.5px; } .line-star { font-size: 18px; bottom: -12px; } /* Titres */ .text-content h2 { font-size: 1.9rem; margin-bottom: 18px; } .text-content p { font-size: 16px; max-width: 100%; } }

/* -------------------------------------------------------------- HERO SECTION ACCUEIL -------------------------------------------------------------- */
.hero-video { position: relative; height: 100vh; width: 100%; overflow: hidden; color: #fff; font-family: Arial, sans-serif; }

/* Vidéo en fond */
.hero-video__bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 1; }

/* Overlay sombre */
.hero-video__overlay { position: absolute; inset: 0; z-index: 2; }

/* Contenu à gauche */
.hero-video__content { position: relative; z-index: 3; max-width: 700px; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding-top: 50px; }

/* Logo */
.hero-video__logo { max-width: 40vh; }

/* Titre */
.hero-video h1 { font-size: 3rem; line-height: 1.2; margin: 0; margin-bottom: 10px; }

/* Bouton */
.btn-contact { display: inline-block; width: fit-content; padding: 14px 28px; background: #ffffff; color: #000 !important; text-decoration: none; transition: all 0.3s ease; background: linear-gradient(135deg, #fff, #838383); font-weight: 600; font-family: 'Afacad Flux'; letter-spacing: 1px; border: 2px solid #dadbdd; }

.btn-contact:hover { background: linear-gradient(135deg, #fff, #838383); color: #000 !important; transform: translateY(-2px); }

/* --------RESPONSIVE HERO VIDÉO------------------ */
@media (max-width: 900px) { .hero-video { height: 100vh; } .hero-video__content { max-width: 100%; padding: 40px 24px; align-items: center; /* CENTRAGE horizontal */ text-align: center; /* CENTRAGE texte */ } .hero-video__logo { max-width: 200px; } .hero-video h1 { font-size: 2.6rem; } .btn-contact { margin-top: 16px; } }

/* -------------------------------------------------------------- SERVICES -------------------------------------------------------------- */
/* Section qui se superpose */
.services-overlap { position: relative; margin-top: -50px; /* valeur clé pour la superposition */ z-index: 5; padding-bottom: 80px; }

/* Conteneur */
.services-container { max-width: 1600px; margin: 0 auto; padding: 0 6%; }

/* Carte principale */
.services-card-wide { background: #ffffff; border-radius: 20px; padding: 48px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

/* Service individuel */
.service-item { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Icône */
/* Icônes image */
.service-icon-img { width: 140px; height: 140px; object-fit: contain; margin: 0 auto; margin-bottom: -20px; }

.service-text { min-height: 70px; flex-grow: 0; font-size: 18px; line-height: 1.2; color: #555; max-width: 260px; margin: 0 auto; margin-bottom: 30px; }

/* Titres */
.service-item h3 { font-size: 2rem; margin: 0; color: #111; min-height: 80px; /* ajuste selon ton design */ display: flex; align-items: center; /* centre verticalement */ justify-content: center; text-align: center; margin: 0 0 20px; }

/* Boutons centrés */
.service-item .btn-contact { margin: 0 auto; margin-top: auto; }

/* -------------------RESPONSIVE SERVICES------------------------ */
@media (max-width: 900px) { .services-overlap { margin-top: -30px; padding-bottom: 60px; } .services-container { padding: 0 24px; } /* Carte principale */ .services-card-wide { grid-template-columns: 1fr; /* 1 service par ligne */ padding: 32px 24px; gap: 48px; } /* Icônes */ .service-icon-img { width: 100px; height: 100px; margin-bottom: -10px; } /* Titres */ .service-item h3 { font-size: 1.6rem; min-height: auto; /* on libère la contrainte */ margin-bottom: 12px; } /* Textes */ .service-text { font-size: 16px; min-height: auto; max-width: 100%; margin-bottom: 24px; } /* Bouton */ .service-item .btn-contact { margin-top: 0; } }

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