@charset "UTF-8";
@import url(main.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #565553 !important; font-family: Noto\ Sans\ JP !important; }

h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { color: #7e7d7b !important; }

.row.row-cols-1.row-cols-lg-3.g-5.py-2 { color: black; }

h2.pb-2.border-bottom { color: black; }

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

.black-screen { background-color: #00000000; }

/* ============================================================ DANTEC GUILLAUME — CSS PERSONNALISÉ Nouvelle identité visuelle 2026 ============================================================ */
/* ============================================================ 📋 SOMMAIRE / TABLE DES MATIÈRES ============================================================ 1. POLICES 2. NAVBAR (Barre de navigation) 3. HEADER / ACCUEIL 4. BOUTONS GÉNÉRAUX 5. IMAGES DE FOND (Blocs avec background) 6. BLOC PRÉSENTATION "À PROPOS" 7. SECTION SERVICES 8. BLOCS CTA (Call To Action) 9. BLOC SEO (Cartes géométriques) 10. PAGE CONTACT 11. PAGE RÉALISATIONS 12. GALERIE D'IMAGES 13. PAGE PRESTATIONS 14. RESPONSIVE (Mobile & Tablette) ============================================================ */
/* ============================================================ 1. POLICES ============================================================ */
/* Import de Noto Sans JP (titres) + Arial déjà disponible dans le CMS pour paragraphes */
/* ============================================================ 2. NAVBAR (Barre de navigation) — Fixe & Compatible CMS ============================================================ */
/* ── Structure de base (Fond toujours blanc géré ici) ── */
#navigation-bar-hide, #navigation-bar-show { position: fixed !important; top: 0 !important; width: 100% !important; height: 120px !important; padding: 0 !important; background: #ffffff !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important; border: none !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; transition: all 0.3s ease !important; z-index: 1030 !important; }

/* ── Disposition Flexbox : Logo à gauche / Menu à droite ── */
#navigation-bar-hide .container, #navigation-bar-show .container, #navigation-bar-hide .container-fluid, #navigation-bar-show .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 100% !important; max-width: 1700px !important; padding: 0 40px !important; }

/* ── Logo à gauche ── */
#navigation-bar-hide .navbar-brand, #navigation-bar-show .navbar-brand { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; }

.logo_nav { height: 16vh; }

.navbar-brand { width: 16vw; height: 16vh; }

#navigation-bar-hide .navbar-brand img, #navigation-bar-show .navbar-brand img { max-height: 100px !important; /* Taille maintenue sur tous les écrans */ width: auto !important; }

/* ── Alignements du menu bureau (Desktop) ── */
@media (min-width: 992px) { #navigation-bar-hide .navbar-collapse, #navigation-bar-show .navbar-collapse { display: flex !important; justify-content: flex-end !important; flex-grow: 0 !important; } #navigation-bar-hide .navbar-nav, #navigation-bar-show .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 35px !important; margin: 0 !important; } }

/* ── Liens de navigation (Typo & Couleurs gérées à 100% par le CMS) ── */
#navigation-bar-hide .animated-border-button, #navigation-bar-show .animated-border-button { /* On garde uniquement le curseur et le retrait des marges parasites */ cursor: pointer !important; padding: 0 !important; transition: color 0.3s ease !important; }

/* ── Couleur de la barre de soulignement au survol ── */
#navigation-bar-hide .animated-border-button::after, #navigation-bar-show .animated-border-button::after, #navigation-bar-hide .animated-border-button::before, #navigation-bar-show .animated-border-button::before { background-color: #009AA2 !important; /* Dark Cyan */ }

/* (Sécurité) Si le CMS utilise une bordure classique plutôt qu'une animation */
#navigation-bar-hide .animated-border-button:hover, #navigation-bar-show .animated-border-button:hover { border-bottom-color: #009AA2 !important; text-decoration-color: #009AA2 !important; }

/* ── Bouton Téléphone (Conservé en CSS) ── */
#navigation-bar-hide .button-header-telephone, #navigation-bar-show .button-header-telephone { font-family: 'Noto Sans JP', Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 0 !important; padding: 10px 24px !important; text-decoration: none !important; transition: all 0.3s ease !important; margin-left: 15px !important; background: transparent !important; border: 2px solid #009AA2 !important; /* Dark Cyan */ color: #009AA2 !important; font-size: 1.2em !important; }

/* Survol du bouton téléphone */
#navigation-bar-hide .button-header-telephone:hover, #navigation-bar-show .button-header-telephone:hover { background: #009AA2 !important; /* Dark Cyan */ color: #ffffff !important; }

/* Cache l'icône téléphone */
.button-header-telephone .bi-telephone { display: none !important; }

/* Burger menu (Mobile) */
#navigation-bar-hide .navbar-toggler, #navigation-bar-show .navbar-toggler { background-color: transparent !important; border-radius: 0 !important; border-color: #009AA2 !important; }

#navigation-bar-hide .navbar-toggler-icon, #navigation-bar-show .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23009AA2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }

/* ============================================================ 3. HEADER / ACCUEIL ============================================================ */
.videoTitle { width: 100% !important; }

#phone-analytics-tag-video-bloc { margin-top: 0px !important; }

.photoTitleText:has(p:empty) { display: none !important; }

/* 💡 Titres avec Noto Sans JP */
.titleText h2:first-of-type, .titleText h1, .titleText h2, .titleText h3 { font-family: 'Noto Sans JP', Arial, sans-serif !important; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) !important; }

.titleText.titles { margin-top: 0rem !important; margin-bottom: 3rem !important; }

/* ── CENTRAGE PARFAIT DU HEADER (Vertical & Horizontal) ── */
/* On écrase le comportement du CMS qui colle le texte en bas */
div:has(> .videoTitle), .carousel-caption { position: absolute !important; top: 50% !important; bottom: auto !important; /* Annule l'ancrage en bas par défaut */ left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; /* Centre mathématiquement au milieu de l'image */ align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; max-width: 1200px !important; /* Évite que le texte touche les flèches du slider sur grand écran */ }

/* On s'assure que les textes sont bien centrés */
.titleText.text-center, .titleText h2 { text-align: center !important; }

/* Centrage de l'éventuel bouton d'appel sur le slider */
a#phone-analytics-tag-video-bloc { margin: 0 auto !important; display: inline-flex !important; max-width: max-content !important; padding: 18px 45px !important; white-space: nowrap !important; font-size: 20px !important; }

div:has(> a#phone-analytics-tag-video-bloc) { width: 100%; text-align: center !important; justify-content: center !important; }

.carousel-inner-homepage .carousel-item-homepage > img { animation: none !important; }

/* ============================================================ 4. BOUTONS GÉNÉRAUX ============================================================ */
/* 💡 Boutons avec Noto Sans JP et couleurs cyan */
.services-carrelage-btn, .button_homepageScreen, a.button_homepageScreen, input[type="submit"], a.button { font-family: 'Noto Sans JP', Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #ffffff !important; background: none !important; border: 2px solid #fff !important; padding: 16px 40px !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; transition: all 0.3s ease !important; border-radius: 0 !important; }

.services-carrelage-btn:hover, .button_homepageScreen:hover, a.button_homepageScreen:hover, input[type="submit"]:hover, a.button:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 20px rgba(0, 154, 162, 0.2) !important; background: #2DC9D5 !important; /* Strong Cyan */ border-color: #2DC9D5 !important; color: #ffffff !important; }

.button_homepageScreen, a.button_homepageScreen { text-align: center !important; margin-top: 60px !important; width: auto !important; max-width: 300px !important; display: block !important; }

.services-carrelage-cta { text-align: center !important; margin-top: 60px !important; width: 100% !important; display: block !important; }

.button_homepageScreen.no-margin-top, a.button_homepageScreen.no-margin-top { margin-top: 0 !important; }

/* ============================================================ 5. IMAGES DE FOND ============================================================ */
.phototext-section[style*="background-color"], section[style*="background-color"] { background-color: transparent !important; }

.background-image, .background-image-div-opacity { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; z-index: 0 !important; }

.phototext-section, .homepage-section { position: relative !important; overflow: hidden !important; }

.phototext-section > .container, .homepage-section > .container { position: relative !important; z-index: 1 !important; }

/* ============================================================ SÉPARATEUR SOUS LE TEXTE "CARRELEUR À LANDIVISIAU..." ============================================================ */
/* 1. Tes réglages d'espacement personnalisés */
span[style*="157, 166"] { display: inline-block !important; position: relative !important; padding-bottom: 40px !important; /* Ton nouvel espacement */ margin-bottom: 15px !important; }

/* 2. La création visuelle de la petite barre Cyan */
span[style*="157, 166"]::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; /* 💡 Si ton texte est centré, remplace cette ligne par : left: 50% !important; transform: translateX(-50%) !important; */ width: 120px !important; height: 3px !important; background-color: #71D4DA !important; /* Couleur Pearl Aqua */ }

/* ============================================================ 6. BLOC PRÉSENTATION "À PROPOS" ============================================================ */
/* ── Structure maintenue pour forcer la pleine largeur de l'écran ── */
.photoText-div.my-5 { margin-top: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

.photoText-div .row { /* Le fond (background-color) a été retiré pour être géré par le CMS */ box-shadow: none !important; border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 3rem !important; margin-left: 0 !important; margin-right: 0 !important; width: 100vw !important; max-width: 100vw !important; }

/* 💡 Les règles de typographie (Noto Sans JP) et de couleurs (Gunmetal, Dark Cyan)  ont été supprimées. Ton CMS a maintenant le contrôle total sur les textes de ce bloc ! */
/* ============================================================ 7. SECTION SERVICES (Cartes Overlay centrées - Hover/Clic) ============================================================ */
.services-carrelage { width: 100% !important; padding: 60px 20px !important; background-color: #ffffff !important; box-sizing: border-box !important; }

/* 💡 LIGNE MODIFIÉE : max-width passé de 1200px à 1400px */
.services-carrelage-container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 50px; }

/* ── EN-TÊTE (Centré, format Colonne) ── */
.services-carrelage-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 20px !important; margin-bottom: 50px !important; color: #424242 !important; /* Gunmetal */ }

/* Titre principal : H3 centré, Noto Sans JP, PAS en gras */
.services-carrelage-title { font-family: 'Noto Sans JP', Arial, sans-serif !important; font-size: clamp(28px, 4vw, 38px) !important; font-weight: 400 !important; /* Retire le gras */ letter-spacing: 0px !important; text-transform: uppercase !important; text-align: center !important; margin: 0 !important; color: #009AA2 !important; /* Dark Cyan */ line-height: 1.2 !important; }

/* Petit séparateur horizontal esthétique sous le titre */
.services-carrelage-divider { width: 120px !important; height: 3px !important; background: #71D4DA !important; /* Pearl Aqua */ }

/* Sous-titre en Arial */
.services-carrelage-subtitle { margin: 0 auto !important; line-height: 1.6 !important; font-size: 1.1rem !important; text-align: center !important; font-family: Arial, sans-serif !important; color: #424242 !important; max-width: 800px !important; /* Pour un beau bloc de texte qui va à la ligne proprement */ }

.services-carrelage-line { display: none !important; }

/* 💡 Grille : L'écart (gap) a été légèrement augmenté pour aérer l'espace gagné */
.services-carrelage-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 50px !important; /* Passé de 40 à 50px */ margin-bottom: 80px !important; }

/* ── LA CARTE ── */
.services-carrelage-card { display: block !important; position: relative !important; cursor: pointer !important; outline: none !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important; }

/* ── L'IMAGE (Format Portrait) ── */
.services-carrelage-card-image { position: relative !important; width: 100% !important; aspect-ratio: 3 / 4 !important; z-index: 1 !important; }

.services-carrelage-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.6s ease !important; }

/* Zoom image */
.services-carrelage-card:hover .services-carrelage-card-image img, .services-carrelage-card:focus .services-carrelage-card-image img { transform: scale(1.1) !important; }

/* ── LE BLOC OVERLAY (Titre + Texte) ── */
.services-carrelage-card-content { position: absolute !important; inset: 0 !important; padding: 30px 20px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; z-index: 2 !important; transition: background 0.4s ease !important; }

/* Au survol/clic : Fond Icy Aqua transparent */
.services-carrelage-card:hover .services-carrelage-card-content, .services-carrelage-card:focus .services-carrelage-card-content { background: rgba(184, 232, 233, 0.95) !important; /* Hex #b8e8e9 */ }

/* ── TITRE DES CARTES (Noto Sans JP, Pas en gras) ── */
.services-carrelage-card-title { font-family: 'Noto Sans JP', Arial, sans-serif !important; font-weight: 400 !important; font-size: 2.2rem !important; margin: 0 !important; color: #ffffff !important; text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6) !important; transition: all 0.4s ease !important; }

/* Changement du titre au survol */
.services-carrelage-card:hover .services-carrelage-card-title, .services-carrelage-card:focus .services-carrelage-card-title { color: #fff !important; /* Dark Cyan */ text-shadow: none !important; transform: translateY(-15px) !important; }

/* ── TEXTE (Arial, Caché par défaut) ── */
.services-carrelage-card-text { font-family: Arial, sans-serif !important; font-size: 1rem !important; line-height: 1.5 !important; color: #009AA2 !important; /* Gunmetal */ width: 80% !important; margin: 0 auto !important; padding: 0 !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: translateY(20px) !important; transition: all 0.4s ease-in-out !important; }

/* Apparition du texte */
.services-carrelage-card:hover .services-carrelage-card-text, .services-carrelage-card:focus .services-carrelage-card-text { max-height: 300px !important; opacity: 1 !important; transform: translateY(0) !important; margin-top: 15px !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; }

/* Bouton "En savoir plus" des services */
a.services-carrelage-btn { background-color: transparent !important; color: #009AA2 !important; border: 2px solid #009AA2 !important; }

a.services-carrelage-btn:hover { background-color: #009AA2 !important; color: #ffffff !important; }

/* ============================================================ 8. BLOCS CTA (Call To Action) ============================================================ */
.cta_banner { width: 100%; margin: auto; min-height: 300px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }

.cta_banner .background-image-div-opacity { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; z-index: 0 !important; }

.background-image-div-opacity[style*="Design_sans_titre_2_x5ng.webp"] { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FmuqZqlPioTdKsuiXPM5YSIVDosK2%2Fimages%2FIMG_20250629_162001_1mpz.webp") !important; background-position: center !important; background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; }

.cta_banner a.button_homepageDoubleScreen, .cta_banner .button_homepageDoubleScreen, .cta_banner a.ctaLinks-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #009AA2 !important; /* Dark Cyan */ border: 2px solid #009AA2 !important; color: #ffffff !important; border-radius: 0 !important; padding: 16px 48px !important; font-family: 'Noto Sans JP', Arial, sans-serif !important; font-weight: 600 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; transition: all 0.3s ease !important; }

.cta_banner a.ctaLinks-button h6, .cta_banner a.ctaLinks-button span, .cta_banner .button_homepageDoubleScreen h6, .cta_banner .button_homepageDoubleScreen span { color: inherit !important; font-family: inherit !important; font-size: inherit !important; margin: 0 !important; padding: 0 !important; transition: color 0.3s ease !important; }

.cta_banner a.button_homepageDoubleScreen:hover, .cta_banner .button_homepageDoubleScreen:hover, .cta_banner a.ctaLinks-button:hover { background-color: #2DC9D5 !important; /* Strong Cyan */ border-color: #2DC9D5 !important; color: #ffffff !important; transform: translateY(-3px) !important; }

div:has(> .first-activity-div) { padding-bottom: 2rem !important; }

/* ============================================================ 9. BLOC SEO — Cartes avec formes géométriques ============================================================ */
.titles p span, .titles h3, .titles h2 { font-family: 'Noto Sans JP', Arial, sans-serif !important; color: #009AA2 !important; }

.lead p { font-family: Arial, sans-serif !important; color: #424242 !important; }

div.card[style*="20200515_193412_fjc7.webp"], div.card[style*="20221222_100238_8w8i.webp"] { -webkit-clip-path: polygon(0% 0, 80% 0, 100% 100%, 20% 100%) !important; clip-path: polygon(0% 0, 80% 0, 100% 100%, 20% 100%) !important; box-shadow: none !important; filter: drop-shadow(0 1rem 3rem rgba(0, 0, 0, 0.1)) !important; border-radius: 0 !important; }

div.card[style*="20251018_190533_vcux.webp"] { -webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%) !important; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%) !important; box-shadow: none !important; filter: drop-shadow(0 1rem 3rem rgba(0, 0, 0, 0.1)) !important; border-radius: 0 !important; }

/* ============================================================ 10. PAGE CONTACT ============================================================ */
div#contact { margin-top: 8rem; }

.bandeau.websitePageTitle-div { display: none !important; }

#contact .background-image-div-opacity { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FmuqZqlPioTdKsuiXPM5YSIVDosK2%2Fimages%2FDesign_sans_titre_4_0n2b.webp") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; opacity: 1 !important; }

#contact button.btn.btn-outline-dark[type="submit"][onclick="sendMail()"] { background-color: #009AA2 !important; /* Dark Cyan */ color: #ffffff !important; border: 2px solid #009AA2 !important; border-radius: 0px !important; font-weight: 600 !important; padding: 12px 30px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; transition: all 0.3s ease !important; background-image: none !important; box-shadow: none !important; font-family: 'Noto Sans JP', Arial, sans-serif !important; }

#contact button.btn.btn-outline-dark[type="submit"][onclick="sendMail()"]:hover { background-color: #2DC9D5 !important; /* Strong Cyan */ border: 2px solid #2DC9D5 !important; color: #ffffff !important; }

#contact .content-container.position-relative { padding-top: 3rem; padding-bottom: 3rem; }

/* ============================================================ 11. PAGE RÉALISATIONS ============================================================ */
.mx-1.mx-lg-4.mb-5 { background-color: #EEF8F9 !important; /* Azure Mist */ padding: 5rem; margin-right: 0rem !important; margin-left: 0rem !important; padding-top: 0.25rem; }

/* ============================================================ 12. GALERIE D'IMAGES ============================================================ */
#custom-gallery { padding: 60px 0; background-color: #ffffff !important; }

/* 💡 Container élargi à 1400px pour laisser bien respirer les 5 photos */
#custom-gallery .container { max-width: 95% !important; margin: 0 auto; }

#image-gallery .row { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; }

/* 💡 PASSAGE À 5 COLONNES : Chaque photo prend 20% de l'espace moins la marge */
#image-gallery .col-lg-3, #image-gallery .col-md-4, #image-gallery .col-sm-6, #image-gallery .col-12 { flex: 0 0 calc(20% - 16px) !important; max-width: calc(20% - 16px) !important; }

.img-wrapper { position: relative; overflow: hidden; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; border-radius: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.4s ease; }

.img-wrapper:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 154, 162, 0.2); }

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

.img-wrapper:hover img { transform: scale(1.1); }

.img-overlay { position: absolute; inset: 0; background: rgba(0, 154, 162, 0.85); /* Dark Cyan */ display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; }

.img-wrapper:hover .img-overlay { opacity: 1; }

.img-overlay i { width: 40px; height: 40px; border: 3px solid #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 300; color: #ffffff; transition: all 0.3s ease; font-style: normal; }

.img-overlay i::before { content: '+'; font-family: Arial, sans-serif; line-height: 1; }

.img-wrapper:hover .img-overlay i { transform: scale(1.15); background: rgba(255, 255, 255, 0.2); }

#overlay { position: fixed; inset: 0; background: rgba(66, 66, 66, 0.95); z-index: 99999; display: none; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

#overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: zoomIn 0.3s ease; }

@keyframes zoomIn { from { transform: scale(0.9);
    opacity: 0; }
  to { transform: scale(1);
    opacity: 1; } }

#prevButton, #nextButton, #exitButton { position: fixed; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3); color: #ffffff; font-size: 2rem; padding: 15px 20px; cursor: pointer; transition: all 0.3s ease; z-index: 100000; }

#prevButton:hover, #nextButton:hover, #exitButton:hover { background: #009AA2; border-color: #009AA2; transform: scale(1.1); }

#prevButton { left: 30px; top: 50%; transform: translateY(-50%); }

#nextButton { right: 30px; top: 50%; transform: translateY(-50%); }

#exitButton { top: 30px; right: 30px; }

#prevButton:hover, #nextButton:hover { transform: translateY(-50%) scale(1.1); }

/* ============================================================ 13. PAGE PRESTATIONS ============================================================ */
.contenu:has(h1) { background-color: #ffffff !important; }

.contenu:has(img[src*="DSC00293"]) { background-color: #ffffff !important; }

/* ============================================================ 14. RESPONSIVE (Mobile & Tablette) ============================================================ */
@media (max-width: 991px) { /* Menu déroulant avec fond Blanc sur tablette/mobile */ #navigation-bar-hide .navbar-collapse, #navigation-bar-show .navbar-collapse { background-color: #ffffff !important; padding: 20px !important; margin-top: 15px !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; } /* Retour des éléments de menu en colonne sur mobile */ #navigation-bar-hide .navbar-nav, #navigation-bar-show .navbar-nav { flex-direction: column !important; gap: 15px !important; text-align: center !important; align-items: center !important; } /* Bouton téléphone aligné au centre sur mobile (Maintien des couleurs) */ #navigation-bar-hide .button-header-telephone, #navigation-bar-show .button-header-telephone { margin-left: 0 !important; margin-top: 10px !important; } .services-carrelage-grid { grid-template-columns: 1fr !important; gap: 60px !important; } /* 💡 C'est ici qu'était l'erreur : width est passé à 100% pour couvrir toute l'image ! */ .services-carrelage-card-content { width: 100% !important; } .services-carrelage-header { grid-template-columns: 1fr; text-align: center; gap: 20px; } .services-carrelage-divider { display: none; } .cta_banner { clip-path: none; width: 100%; margin: 0; } #image-gallery .col-lg-3, #image-gallery .col-md-4, #image-gallery .col-sm-6, #image-gallery .col-12 { flex: 0 0 calc(33.333% - 14px); max-width: calc(33.333% - 14px); } }

@media (max-width: 768px) { .navbar-brand { width: 40vw; height: 16vh; } .titleText h2:first-of-type span { font-size: 2em !important; line-height: 1.2em !important; } a#phone-analytics-tag-video-bloc { font-size: 18px !important; padding: 15px 30px !important; white-space: nowrap !important; max-width: 95vw !important; overflow: hidden !important; text-overflow: clip !important; } #custom-gallery { padding: 40px 0; } #image-gallery .row { gap: 15px; } #image-gallery .col-lg-3, #image-gallery .col-md-4, #image-gallery .col-sm-6, #image-gallery .col-12 { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } .img-overlay i { width: 60px; height: 60px; font-size: 2rem; } #overlay img { max-width: 95vw; max-height: 80vh; } #prevButton, #nextButton { font-size: 1.5rem; padding: 10px 15px; } #prevButton { left: 10px; } #nextButton { right: 10px; } #exitButton { top: 10px; right: 10px; font-size: 1.5rem; padding: 10px 15px; } }

@media (max-width: 480px) { #image-gallery .col-lg-3, #image-gallery .col-md-4, #image-gallery .col-sm-6, #image-gallery .col-12 { flex: 0 0 100%; max-width: 100%; } }

.logo-footer > .logo_nav { height: 10vh; }

/* ============================================================ FIN DU CSS — Site Dantec Guillaume ============================================================ */

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