@charset "UTF-8";
@import url(main.css);
/*----------------------------------------------------------------------------bloc counter %--------------------------------------------------------------------------------*/
.counter-item.counters-number.titles.mb-2.text-color-sixth { font-family: 'Sarabun', sans-serif; font-weight: 700 !important; font-size: 64px !important; color: #3FC3ED !important; }

/* ----------------------------------------------------------------------------- CUSTOM HEADER LE PLOMBIER BRETON ----------------------------------------------------------------------------- */
.custom-header { position: fixed; top: 0; right: 0; left: 0; z-index: 9999; width: 100%; margin: 0; padding: 0 !important; background: transparent !important; border: none; box-shadow: none; --bs-navbar-padding-y: 0; --bs-navbar-padding-x: 0; transition: top 0.4s ease; }

/* CONTENEUR PRINCIPAL */
.custom-header .container-fluid { margin: 0; padding: 18px 24px; background-color: #000000; border: none; border-radius: 0; transition: margin 0.4s ease, padding 0.4s ease, background-color 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, border-color 0.4s ease; }

/* HEADER AU SCROLL */
.custom-header.scrolled { top: 14px; }

.custom-header.scrolled .container-fluid { margin-right: 20px; margin-left: 20px; padding: 12px 24px; background-color: rgba(0, 0, 0, 0.92); border: 1px solid rgba(63, 195, 237, 0.65); border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* LOGO */
.custom-header .logo_nav { display: block; width: auto; height: 72px; object-fit: contain; transition: height 0.4s ease; }

.custom-header.scrolled .logo_nav { height: 56px; }

/* MARQUE */
.custom-header .navbar-brand { margin-right: 20px; padding: 0; }

/* NAVIGATION */
.custom-header .navbar-nav { gap: 0; }

/* LIENS DU MENU */
.custom-header .nav-link, .custom-header .navbar-nav .nav-link { color: #FBFBFF !important; transition: color 0.3s ease; }

.custom-header .nav-link:hover, .custom-header .navbar-nav .nav-link:hover { color: #3FC3ED !important; }

/* BOUTONS ANIMÉS DU MENU UNIQUEMENT */
.custom-header .animated-border-button { background-color: transparent !important; cursor: pointer; }

.custom-header .animated-border-button span { color: #FBFBFF; transition: color 0.3s ease, opacity 0.3s ease; }

.custom-header .animated-border-button:hover span { color: #3FC3ED !important; }

/* BURGER */
.custom-header .navbar-toggler { padding: 8px 10px; background-color: transparent; border: none; box-shadow: none !important; }

.custom-header .navbar-toggler:focus, .custom-header .navbar-toggler:active { box-shadow: none !important; }

.custom-header .navbar-toggler-icon { filter: invert(1); }

/* ----------------------------------------------------------------------------- */
/* TABLETTE ET MOBILE                                                            */
/* ----------------------------------------------------------------------------- */
@media (max-width: 991px) { .custom-header .container-fluid { padding: 12px 14px; background-color: #000000; } .custom-header.scrolled { top: 8px; } .custom-header.scrolled .container-fluid { margin-right: 10px; margin-left: 10px; padding: 10px 14px; background-color: rgba(0, 0, 0, 0.94); border: 1px solid rgba(63, 195, 237, 0.55); border-radius: 18px; box-shadow: 0 8px 24px rgba(2, 127, 171, 0.26); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .custom-header .logo_nav, .custom-header.scrolled .logo_nav { height: 52px; } .custom-header .navbar-brand { margin-right: 0; } /* MENU DÉROULANT MOBILE */ .custom-header .navbar-collapse { margin-top: 12px; padding: 18px; background-color: #000000; border: 1px solid rgba(63, 195, 237, 0.55); border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); } .custom-header .navbar-nav { width: 100%; } .custom-header .custom-nav-list { width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; } .custom-header .custom-header-phone-wrap { display: flex; justify-content: center; width: 100%; margin-top: 10px; } }

/* ----------------------------------------------------------------------------- */
/* PETIT MOBILE                                                                  */
/* ----------------------------------------------------------------------------- */
@media (max-width: 575px) { .custom-header .container-fluid { padding: 10px 12px; } .custom-header.scrolled .container-fluid { margin-right: 8px; margin-left: 8px; padding: 10px 12px; border-radius: 16px; } .custom-header .logo_nav, .custom-header.scrolled .logo_nav { height: 46px; } .custom-header .navbar-collapse { margin-top: 10px; padding: 14px; border-radius: 16px; } }

/*-------------------------------------------------------------------------image fixe formulaire-----------------------------------------------------------------------------*/
.background-image-div-opacity { background-attachment: scroll; }

/*-----------------------------------------------------------------------padding bloc avant/après---------------------------------------------------------------------------*/
.photoTitleText.text-color-sixth { padding: 3%; }

/*-----------------------------------------------------------------------space page secondaire-----------------------------------------------------------------------------*/
.spacer { display: none; }

/*------------------------------------------------------------------------formulaire de contact------------------------------------------------------------------------------*/
form#formContact { font-family: 'Sarabun', sans-serif; }

/*------------------------------------------------------------------------augmentation header------------------------------------------------------------------------------*/
.navbar-brand { height: 10vh !important; width: 14vw !important; }

.logo_nav { height: 10vh !important; }

/*--------------------------------------------------------------------enlever recherche fréquente---------------------------------------------------------------------------*/
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { display: none !important; }

/*----------------------------------------------------------------------------Bloc maps-------------------------------------------------------------------------------------*/
.maps-section .content { color: #FBFBFF !important; }

.maps-section .map-content { padding: 50px; }

.maps-section iframe { border-radius: 20px !important; }

.item-content.mx-5 { color: #FBFBFF !important; font-family: 'Sarabun', sans-serif; }

/*-----------------------------------------------------------------------ancre bloc qui suis-je-------------------------------------------------------------------------------*/
#decouvrir { scroll-margin-top: 90px; }

/*---------------------------------------------------------------------ancre bloc presta accueil------------------------------------------------------------------------------*/
#presta { scroll-margin-top: 60px; }

/*---------------------------------------------------------------------ancre bloc real accueil------------------------------------------------------------------------------*/
#realisation { scroll-margin-top: 90px; }

/*---------------------------------------------------------------------ancre bloc cta accueil------------------------------------------------------------------------------*/
#contact { scroll-margin-top: 90px; }

/*----------------------------------------------------------------------------texte footer------------------------------------------------------------------------------------*/
footer, footer p, footer a, footer li, footer ul, footer i { color: #FBFBFF !important; font-family: 'Sarabun', sans-serif; font-size: 1rem; }

footer h5 { color: #027FAB !important; font-family: 'Ubuntu', sans-serif; font-weight: 700 !important; font-size: 1.25rem; /* légèrement plus grand pour se démarquer */ }

.text-color-third { color: #FBFBFF !important; font-family: 'Sarabun', sans-serif; font-size: 1rem; text-align: left; hyphens: auto; }

/* ------------------------------------------------------------------------------ombre---------------------------------------------------------------------------------------*/
div.shadow-lg { box-shadow: none !important; }

/*-----------------------------------------------------------------------surlignement header--------------------------------------------------------------------------------*/
.animated-border-button:after { background-color: #027FAB !important; }

.animated-border-button span { transition: color 0.3s ease; }

.animated-border-button:hover span { color: #027FAB !important; }

/*--------------------------------------------------------------------------Bouton header-----------------------------------------------------------------------------------*/
.button-header-telephone { position: relative; display: inline-block; margin: 15px; padding: 8px 15px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #FBFBFF !important; background: transparent; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FBFBFF; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #FBFBFF; }

.button-header-telephone:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.button-header-telephone:active { transform: scale(0.9); }

/*---------------------------------------------------------------------Bouton first impression-------------------------------------------------------------------------------*/
.button_homepageFirstScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #027FAB !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #027FAB !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #027FAB; }

.button_homepageFirstScreen:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.button_homepageFirstScreen:active { transform: scale(0.9); }

/*--------------------------------------------------------------------------Bouton simple-----------------------------------------------------------------------------------*/
.button_homepageDoubleScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #027FAB !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #027FAB !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #027FAB; }

.button_homepageDoubleScreen:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.button_homepageDoubleScreen:active { transform: scale(0.9); }

/*--------------------------------------------------------------------------Bouton cta-----------------------------------------------------------------------------------*/
.button_ctaDoubleScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #FBFBFF !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FBFBFF !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #FBFBFF; }

.button_ctaDoubleScreen:hover { color: #027FAB !important; box-shadow: inset 0 -100px 0 0 #FBFBFF !important; border-color: #FBFBFF !important; transform: scale(0.95) !important; }

.button_ctaDoubleScreen:active { transform: scale(0.9); }

/*--------------------------------------------------------------------------Bouton presta-----------------------------------------------------------------------------------*/
.button_prestaDoubleScreen { position: relative; display: inline-block; padding: 10px 20px; text-align: center; font-weight: 700 !important; font-size: 16px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #027FAB !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #027FAB !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #027FAB; }

.button_prestaDoubleScreen:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.button_prestaDoubleScreen:active { transform: scale(0.9); }

/*-------------------------------------------------------------------------Bouton en-tête-----------------------------------------------------------------------------------*/
.button_secondepageDoubleScreen { position: relative; display: inline-block; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #FBFBFF !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #FBFBFF !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #FBFBFF; }

.button_secondepageDoubleScreen:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.button_secondepageDoubleScreen:active { transform: scale(0.9); }

/*----------------------------------------------------------------------------Bouton seo------------------------------------------------------------------------------------*/
.all-activities-button { position: relative; display: inline-block; margin: 15px; padding: 15px 30px; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #027FAB !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #027FAB !important; border-radius: 30px; box-shadow: inset 0 0 0 0 #027FAB; }

.all-activities-button:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.all-activities-button:active { transform: scale(0.9); }

/*----------------------------------------------------------------------------bloc seo------------------------------------------------------------------------------------*/
.first-activity-div, .second-activity-div, .third-activity-div { border: #027FAB; }

.fs-6 { font-family: 'Sarabun', sans-serif; font-weight: 400 !important; }

/*----------------------------------------------------------------------------Bouton avis------------------------------------------------------------------------------------*/
.button_homepageScreen { position: relative; display: inline-block; margin: 15px; padding: 12px 16px !important; text-align: center; font-weight: 700 !important; font-size: 18px; font-family: 'Ubuntu', sans-serif; letter-spacing: 1px; text-decoration: none; color: #027FAB !important; background: transparent !important; cursor: pointer; transition: ease-out 0.5s; border: 2px solid #027FAB !important; border-radius: 30px !important; box-shadow: inset 0 0 0 0 #027FAB; }

.button_homepageScreen:hover { color: #FBFBFF !important; box-shadow: inset 0 -100px 0 0 #027FAB !important; border-color: #027FAB !important; transform: scale(0.95) !important; }

.button_homepageScreen:active { transform: scale(0.9); }

/* ----------------------------------------------------------------------Flèche retour en haut------------------------------------------------------------------------------- */
/* Bouton Retour en haut */
#back-to-top { position: fixed; bottom: 24px; right: 24px; background-color: #027FAB; color: #FBFBFF !important; font-size: 20px; font-weight: 700 !important; line-height: 1; text-align: center; padding: 14px 18px; border-radius: 100%; border: 2px solid #f6fff4; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; text-decoration: none; opacity: 0; pointer-events: none; z-index: 9999; min-width: 48px; /* 👈 meilleure accessibilité mobile */ min-height: 48px; /* 👈 idem */ transform: scale(0.9); /* 👈 effet “pop” à l’apparition */ transition: opacity .3s ease, transform .3s ease, background-color .3s ease; }

/* Visible après le défilement */
#back-to-top.show { opacity: 1; pointer-events: auto; transform: scale(1); }

/* Effet au survol */
#back-to-top:hover { background-color: #3FC3ED; border: 2px solid #FBFBFF; color: #FBFBFF !important; transform: translateY(-3px); }

/* Défilement fluide global (même sans JS) */
html { scroll-behavior: smooth; }

/* -----------------------------------------------------------------------PREMIÈRE IMPRESSION - LE PLOMBIER BRETON------------------------------------------------------------------------ */
.first-plombier-breton { position: relative; display: flex; align-items: center; width: 100%; height: 100vh; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }

/* OVERLAY */
.first-plombier-breton::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(251, 251, 255, 0.96) 0%, rgba(251, 251, 255, 0.88) 45%, rgba(63, 195, 237, 0.38) 72%, rgba(2, 127, 171, 0.22) 100%); }

/* CONTENU */
.first-plombier-breton-container { position: relative; z-index: 2; width: 90%; margin: auto; }

.first-plombier-breton-text { max-width: 720px; color: #000000; }

.first-plombier-breton-tagline { display: block; color: #3FC3ED; font-family: "Sarabun", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.first-plombier-breton-text h1 { margin: 15px 0; color: #027FAB; font-family: "Ubuntu", sans-serif; font-size: 72px; font-weight: 700; line-height: 1.05; }

.first-plombier-breton-text p { margin: 0 0 32px; color: #000000; font-family: "Sarabun", sans-serif; font-size: 19px; font-weight: 400; line-height: 1.7; }

/* RESPONSIVE TABLETTE */
@media (max-width: 900px) { .first-plombier-breton { height: auto; min-height: 700px; text-align: center; background-position: center; } .first-plombier-breton::after { background: linear-gradient(180deg, rgba(251, 251, 255, 0.92) 0%, rgba(251, 251, 255, 0.86) 65%, rgba(63, 195, 237, 0.34) 100%); } .first-plombier-breton-container { padding: 120px 0 80px; } .first-plombier-breton-text { max-width: 680px; margin: auto; } .first-plombier-breton-text h1 { font-size: 48px; } .first-plombier-breton-text p { font-size: 17px; } .first-plombier-breton-tagline { font-size: 14px; letter-spacing: 1px; } }

/* RESPONSIVE MOBILE */
@media (max-width: 600px) { .first-plombier-breton { min-height: 650px; } .first-plombier-breton-container { width: 88%; padding: 110px 0 70px; } .first-plombier-breton-text h1 { margin: 12px 0; font-size: 40px; line-height: 1.1; } .first-plombier-breton-text p { margin-bottom: 26px; font-size: 16px; line-height: 1.6; } .first-plombier-breton-tagline { font-size: 12px; } }

/* -----------------------------------------------------------------------PRÉSENTATION - LE PLOMBIER BRETON------------------------------------------------------------------------ */
.qjs-plombier-breton-section, .qjs-plombier-breton-section * { box-sizing: border-box; }

.qjs-plombier-breton-section { padding: 90px 24px; background: #FBFBFF; font-family: "Sarabun", sans-serif; }

.qjs-plombier-breton-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.92fr 1fr; gap: 64px; align-items: center; }

/* IMAGE */
.qjs-plombier-breton-media { position: relative; }

.qjs-plombier-breton-media__frame { position: relative; overflow: hidden; border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.28); }

.qjs-plombier-breton-media__frame img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; }

.qjs-plombier-breton-media__badge { position: absolute; bottom: -22px; left: -22px; padding: 16px 22px; display: flex; align-items: center; gap: 12px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.22); }

.qjs-plombier-breton-media__badge-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(63, 195, 237, 0.16); border-radius: 50%; }

.qjs-plombier-breton-media__badge-icon svg { width: 22px; height: 22px; fill: none; stroke: #027FAB; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.qjs-plombier-breton-media__badge-text strong { display: block; color: #000000; font-size: 15px; font-weight: 700 !important; }

.qjs-plombier-breton-media__badge-text span { color: rgba(0, 0, 0, 0.62); font-size: 12.5px; }

/* CONTENU */
.qjs-plombier-breton-content { padding-left: 12px; }

.qjs-plombier-breton-pill { margin-bottom: 22px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; background: rgba(63, 195, 237, 0.16); color: #027FAB; border-radius: 999px; font-size: 12.5px; font-weight: 700 !important; letter-spacing: 0.06em; text-transform: uppercase; }

.qjs-plombier-breton-pill::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: #3FC3ED; border-radius: 50%; }

.qjs-plombier-breton-title { margin: 0 0 26px; color: #027FAB; font-family: "Ubuntu", sans-serif; font-size: 40px; font-weight: 700 !important; line-height: 1.18; }

.qjs-plombier-breton-title span { color: #3FC3ED; }

.qjs-plombier-breton-name { margin: 0 0 14px; color: #000000; font-size: 16px; font-weight: 700 !important; }

.qjs-plombier-breton-text { color: rgba(0, 0, 0, 0.7); font-size: 15.5px; line-height: 1.75; }

.qjs-plombier-breton-text p { margin: 0; }

.qjs-plombier-breton-tags { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }

.qjs-plombier-breton-tag { padding: 9px 16px; background: #FFFFFF; color: #000000; border: 1px solid rgba(2, 127, 171, 0.24); border-radius: 999px; font-size: 13px; font-weight: 600 !important; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

.qjs-plombier-breton-tag:hover { background: #027FAB; color: #FBFBFF; border-color: #027FAB; }

/* RESPONSIVE */
@media (max-width: 880px) { .qjs-plombier-breton-wrap { grid-template-columns: 1fr; gap: 54px; } .qjs-plombier-breton-content { padding-left: 0; } .qjs-plombier-breton-media__frame img { aspect-ratio: 16 / 10; } .qjs-plombier-breton-media__badge { bottom: -20px; left: 16px; padding: 14px 18px; } .qjs-plombier-breton-title { font-size: 32px; } }

@media (max-width: 480px) { .qjs-plombier-breton-section { padding: 64px 18px; } .qjs-plombier-breton-wrap { gap: 36px; } .qjs-plombier-breton-media__frame { border-radius: 16px; } .qjs-plombier-breton-media__frame img { aspect-ratio: 4 / 3; } .qjs-plombier-breton-media__badge { display: none; } .qjs-plombier-breton-title { font-size: 28px; } .qjs-plombier-breton-text { font-size: 15px; } }

/* ------------------------------------------------ÉTAPES - LE PLOMBIER BRETON------------------------------------------------ */
.etape-plombier-breton, .etape-plombier-breton * { box-sizing: border-box; }

.etape-plombier-breton { max-width: 1300px; margin: 0 auto; padding: 70px 40px; background: #FBFBFF; text-align: center; font-family: "Sarabun", sans-serif; }

.etape-plombier-breton-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 16px; background: rgba(63, 195, 237, 0.1); border: 1px solid rgba(2, 127, 171, 0.18); border-radius: 999px; color: #027FAB; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.etape-plombier-breton-dot { width: 8px; height: 8px; display: inline-block; flex-shrink: 0; background: #3FC3ED; border-radius: 50%; }

.etape-plombier-breton-title { margin: 0 0 42px; color: #027FAB; font-family: "Ubuntu", sans-serif; font-size: 42px; font-weight: 700 !important; line-height: 1.2; }

.etape-plombier-breton-title span { color: #3FC3ED; }

.etape-plombier-breton-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: left; }

.etape-plombier-breton-card { padding: 32px 24px; background: rgba(63, 195, 237, 0.04); border-top: 1px solid rgba(2, 127, 171, 0.14); border-bottom: 1px solid rgba(2, 127, 171, 0.14); border-left: 1px solid rgba(2, 127, 171, 0.14); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.etape-plombier-breton-card:hover { background: rgba(63, 195, 237, 0.12); border-color: rgba(2, 127, 171, 0.38); transform: translateY(-4px); }

.etape-plombier-breton-card-last { border-right: 1px solid rgba(2, 127, 171, 0.14); }

.etape-plombier-breton-num { width: 50px; height: 50px; margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; background: #027FAB; border-radius: 50%; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 15px; font-weight: 700; }

.etape-plombier-breton-card-title { min-height: 54px; margin: 0 0 12px; color: #000000; font-family: "Ubuntu", sans-serif; font-size: 20px; font-weight: 700 !important; line-height: 1.35; }

.etape-plombier-breton-card-text { margin: 0; color: rgba(0, 0, 0, 0.68); font-family: "Sarabun", sans-serif; font-size: 14px; line-height: 1.65; }

/* TABLETTE */
@media (max-width: 1100px) { .etape-plombier-breton-grid { grid-template-columns: repeat(2, 1fr); } .etape-plombier-breton-card:nth-child(2) { border-right: 1px solid rgba(2, 127, 171, 0.14); } .etape-plombier-breton-card:nth-child(3), .etape-plombier-breton-card:nth-child(4) { border-top: none; } }

@media (max-width: 700px) { .etape-plombier-breton { padding: 55px 24px; } .etape-plombier-breton-title { margin-bottom: 32px; font-size: 34px; } .etape-plombier-breton-grid { grid-template-columns: 1fr; } .etape-plombier-breton-card { padding: 28px 22px; border-right: 1px solid rgba(2, 127, 171, 0.14); border-bottom: none; } .etape-plombier-breton-card:nth-child(2) { border-top: none; } .etape-plombier-breton-card-last { border-bottom: 1px solid rgba(2, 127, 171, 0.14); } .etape-plombier-breton-card:hover { transform: none; } .etape-plombier-breton-card-title { min-height: auto; } }

/* MOBILE */
@media (max-width: 576px) { .etape-plombier-breton { padding: 45px 16px; } .etape-plombier-breton-badge { padding: 6px 12px; font-size: 11px; } .etape-plombier-breton-title { margin-bottom: 26px; font-size: 28px; line-height: 1.25; } .etape-plombier-breton-card { padding: 24px 16px; } .etape-plombier-breton-num { width: 44px; height: 44px; margin-bottom: 14px; font-size: 14px; } .etape-plombier-breton-card-title { font-size: 18px; } .etape-plombier-breton-card-text { font-size: 14px; line-height: 1.6; } }

/* ----------------------------------------------------------------BLOC PRESTATIONS - LE PLOMBIER BRETON---------------------------------------------------------------- */
.presta-plombier-breton-section, .presta-plombier-breton-section *, .presta-plombier-breton-section *::before, .presta-plombier-breton-section *::after { box-sizing: border-box; }

.presta-plombier-breton-section { position: relative; width: 100%; min-height: 100vh; padding: 80px 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: "Sarabun", sans-serif; }

/* FOND */
.presta-plombier-breton-bg { position: absolute; inset: 0; z-index: 0; }

.presta-plombier-breton-bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* OVERLAY */
.presta-plombier-breton-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(145deg, rgba(0, 31, 43, 0.97) 0%, rgba(1, 78, 106, 0.93) 55%, rgba(2, 127, 171, 0.82) 100%); }

/* CONTENU */
.presta-plombier-breton-content { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* SURTITRE */
.presta-plombier-breton-eyebrow { margin: 0 0 13px; color: #3FC3ED; font-family: "Ubuntu", sans-serif; font-size: 14px; font-weight: 700 !important; letter-spacing: 3px; text-transform: uppercase; }

/* TITRE */
.presta-plombier-breton-title { max-width: 850px; margin: 0 0 14px; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 48px; font-weight: 700 !important; line-height: 1.15; }

.presta-plombier-breton-title span { color: #3FC3ED; }

/* INTRODUCTION */
.presta-plombier-breton-subtitle { max-width: 780px; margin: 0 0 48px; color: rgba(251, 251, 255, 0.82); font-family: "Sarabun", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; }

/* GRILLE */
.presta-plombier-breton-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* CARTES */
.presta-plombier-breton-card { position: relative; min-height: 315px; padding: 27px 19px 23px; display: flex; flex-direction: column; align-items: center; gap: 11px; overflow: hidden; background: rgba(251, 251, 255, 0.09); border: 1px solid rgba(251, 251, 255, 0.18); border-radius: 16px; color: #FBFBFF; text-align: center; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }

.presta-plombier-breton-card::before { content: ""; position: absolute; top: 0; left: 29%; width: 42%; height: 3px; background: var(--presta-plombier-breton-accent); border-radius: 0 0 4px 4px; }

.presta-plombier-breton-card:hover { transform: translateY(-6px); background: rgba(251, 251, 255, 0.16); border-color: rgba(63, 195, 237, 0.58); }

.presta-plombier-breton-card:active { transform: translateY(-2px); }

.presta-plombier-breton-card:focus-visible { outline: 2px solid var(--presta-plombier-breton-accent); outline-offset: 4px; }

/* ICÔNES */
.presta-plombier-breton-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--presta-plombier-breton-icon-bg); border: 1px solid var(--presta-plombier-breton-icon-border); border-radius: 14px; color: var(--presta-plombier-breton-accent); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

.presta-plombier-breton-icon svg { width: 24px; height: 24px; }

.presta-plombier-breton-card:hover .presta-plombier-breton-icon { background: #027FAB; border-color: #3FC3ED; color: #FBFBFF; }

/* TEXTES */
.presta-plombier-breton-card-title { margin: 0; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 20px; font-weight: 700 !important; line-height: 1.3; }

.presta-plombier-breton-card-desc { flex: 1; margin: 0; color: rgba(251, 251, 255, 0.76); font-family: "Sarabun", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; }

/* BADGES */
.presta-plombier-breton-tag { display: inline-block; margin-top: 2px; padding: 5px 12px; background: var(--presta-plombier-breton-tag-bg); border-radius: 20px; color: #FBFBFF; font-family: "Sarabun", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; transition: background-color 0.25s ease, color 0.25s ease; }

.presta-plombier-breton-card:hover .presta-plombier-breton-tag { background: #027FAB; color: #FBFBFF; }

/* CARTES BLEUES */
.presta-plombier-breton-card--blue { --presta-plombier-breton-accent: #3FC3ED; --presta-plombier-breton-icon-bg: rgba(63, 195, 237, 0.2); --presta-plombier-breton-icon-border: rgba(63, 195, 237, 0.48); --presta-plombier-breton-tag-bg: rgba(63, 195, 237, 0.28); }

/* CARTES CLAIRES */
.presta-plombier-breton-card--light { --presta-plombier-breton-accent: #FBFBFF; --presta-plombier-breton-icon-bg: rgba(251, 251, 255, 0.13); --presta-plombier-breton-icon-border: rgba(251, 251, 255, 0.3); --presta-plombier-breton-tag-bg: rgba(251, 251, 255, 0.14); }

/* RESPONSIVE */
@media (max-width: 1200px) { .presta-plombier-breton-grid { grid-template-columns: repeat(2, 1fr); } .presta-plombier-breton-card { min-height: 285px; } }

@media (max-width: 768px) { .presta-plombier-breton-section { padding: 64px 18px; } .presta-plombier-breton-title { font-size: 38px; } .presta-plombier-breton-subtitle { margin-bottom: 35px; font-size: 15px; } }

@media (max-width: 576px) { .presta-plombier-breton-section { padding: 55px 16px; } .presta-plombier-breton-grid { grid-template-columns: 1fr; } .presta-plombier-breton-eyebrow { font-size: 12px; letter-spacing: 2px; } .presta-plombier-breton-title { font-size: 30px; line-height: 1.2; } .presta-plombier-breton-card { min-height: auto; padding: 25px 18px 22px; } .presta-plombier-breton-card:hover { transform: none; } .presta-plombier-breton-card-title { font-size: 19px; } .presta-plombier-breton-card-desc { font-size: 14px; } }

/* ----------------------------------------------------------------AVIS CLIENTS - LE PLOMBIER BRETON---------------------------------------------------------------- */
.avis-plombier-breton, .avis-plombier-breton * { box-sizing: border-box; }

.avis-plombier-breton { position: relative; padding: 80px 0; overflow: hidden; font-family: "Sarabun", sans-serif; }

/* IMAGE DE FOND */
.avis-plombier-breton-bg { position: absolute; inset: 0; z-index: 0; }

.avis-plombier-breton-bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* OVERLAY BLEU */
.avis-plombier-breton-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(0, 35, 48, 0.96) 0%, rgba(2, 91, 125, 0.92) 55%, rgba(2, 127, 171, 0.84) 100%); }

/* CONTENU */
.avis-plombier-breton-content { position: relative; z-index: 2; }

.avis-plombier-breton-container { width: 90%; max-width: 1200px; margin: 0 auto 36px; }

.avis-plombier-breton-intro { max-width: 760px; margin: 0 auto; text-align: center; }

.avis-plombier-breton-eyebrow { display: inline-block; margin-bottom: 12px; color: #3FC3ED; font-family: "Sarabun", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.avis-plombier-breton-intro h2 { margin: 0 0 12px; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 42px; font-weight: 700 !important; line-height: 1.2; }

.avis-plombier-breton-intro p { margin: 0; color: rgba(251, 251, 255, 0.82); font-family: "Sarabun", sans-serif; font-size: 16px; line-height: 1.7; }

/* SLIDER */
.avis-plombier-breton-slider { width: 100%; overflow: hidden; }

.avis-plombier-breton-track { display: flex; width: max-content; animation: avisPlombierBretonScroll 45s linear infinite; }

.avis-plombier-breton-slider:hover .avis-plombier-breton-track { animation-play-state: paused; }

.avis-plombier-breton-group { display: flex; flex-shrink: 0; gap: 24px; padding-right: 24px; }

/* CARTES */
.avis-plombier-breton-card { flex: 0 0 350px; padding: 25px; display: flex; flex-direction: column; background: rgba(251, 251, 255, 0.97); border: 1px solid rgba(63, 195, 237, 0.42); border-radius: 20px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.75); transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }

.avis-plombier-breton-card:hover { transform: translateY(-5px); background: #FBFBFF; border-color: #3FC3ED; }

.avis-plombier-breton-stars { margin-bottom: 14px; color: #027FAB; font-size: 18px; letter-spacing: 2px; }

.avis-plombier-breton-card > p { flex: 1; min-height: 210px; margin: 0 0 22px; color: rgba(0, 0, 0, 0.72); font-family: "Sarabun", sans-serif; font-size: 15px; line-height: 1.65; }

/* INFORMATIONS CLIENT */
.avis-plombier-breton-client { display: flex; align-items: center; gap: 12px; }

.avis-plombier-breton-client > span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(63, 195, 237, 0.16); border-radius: 50%; color: #027FAB; font-size: 15px; font-weight: 700; }

.avis-plombier-breton-client strong { display: block; color: #000000; font-size: 14px; font-weight: 700 !important; }

.avis-plombier-breton-client small { color: rgba(0, 0, 0, 0.55); font-size: 12.5px; }

.avis-plombier-breton-cta { width: 90%; max-width: 1200px; margin: 60px auto 0; display: flex; justify-content: center; text-align: center; }

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

/* RESPONSIVE TABLETTE */
@media (max-width: 768px) { .avis-plombier-breton { padding: 64px 0; } .avis-plombier-breton-container { margin-bottom: 30px; } .avis-plombier-breton-intro h2 { font-size: 34px; } .avis-plombier-breton-intro p { font-size: 15px; } .avis-plombier-breton-card { flex-basis: 310px; } .avis-plombier-breton-card > p { min-height: 230px; } }

/* RESPONSIVE MOBILE */
@media (max-width: 576px) { .avis-plombier-breton { padding: 55px 0; } .avis-plombier-breton-container { width: 88%; } .avis-plombier-breton-intro h2 { font-size: 29px; } .avis-plombier-breton-card { flex-basis: 280px; padding: 22px; } .avis-plombier-breton-card > p { min-height: 250px; font-size: 14px; line-height: 1.6; } .avis-plombier-breton-client strong { font-size: 13px; } .avis-plombier-breton-client small { font-size: 11.5px; } }

/* ACCESSIBILITÉ */
@media (prefers-reduced-motion: reduce) { .avis-plombier-breton-track { animation: none; } }

/* ------------------------------------------------HORAIRES ET INSTAGRAM - LE PLOMBIER BRETON------------------------------------------------ */
.rs-horaire-plombier-breton-section, .rs-horaire-plombier-breton-section *, .rs-horaire-plombier-breton-section *::before, .rs-horaire-plombier-breton-section *::after { box-sizing: border-box; }

.rs-horaire-plombier-breton-section { position: relative; min-height: 500px; padding: 60px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: "Sarabun", sans-serif; }

/* FOND */
.rs-horaire-plombier-breton-bg { position: absolute; inset: 0; z-index: 0; }

.rs-horaire-plombier-breton-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* OVERLAY BLEU */
.rs-horaire-plombier-breton-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(145deg, rgba(0, 31, 43, 0.97) 0%, rgba(1, 78, 106, 0.93) 55%, rgba(2, 127, 171, 0.84) 100%); }

/* MISE EN PAGE */
.rs-horaire-plombier-breton-wrapper { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 550px 1fr; gap: 40px; align-items: center; }

/* BLOC HORAIRES */
.rs-horaire-plombier-breton-horaire { position: relative; width: 100%; padding: 32px; background: #FBFBFF; border: 1px solid rgba(63, 195, 237, 0.32); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26); transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease; }

.rs-horaire-plombier-breton-horaire:hover { transform: translateY(-6px); border-color: #3FC3ED; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34); }

/* EN-TÊTE HORAIRES */
.rs-horaire-plombier-breton-header { margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }

.rs-horaire-plombier-breton-icon-wrapper { padding: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(63, 195, 237, 0.14); border-radius: 10px; }

.rs-horaire-plombier-breton-icon { width: 24px; height: 24px; color: #027FAB; }

.rs-horaire-plombier-breton-horaire h2 { margin: 0; color: #027FAB; font-family: "Ubuntu", sans-serif; font-size: 26px; font-weight: 700 !important; }

/* JOURS */
.rs-horaire-plombier-breton-schedule { display: flex; flex-direction: column; gap: 8px; }

.rs-horaire-plombier-breton-day-row { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 8px; transition: background-color 0.2s ease; }

.rs-horaire-plombier-breton-day-row:hover { background: rgba(63, 195, 237, 0.08); }

.rs-horaire-plombier-breton-day-row.today { background: rgba(63, 195, 237, 0.13); border-left: 4px solid #027FAB; }

.rs-horaire-plombier-breton-day-name { color: #000000; font-size: 15px; font-weight: 600; }

.rs-horaire-plombier-breton-today-badge { margin-left: 8px; color: #027FAB; font-size: 11px; font-weight: 700; }

.rs-horaire-plombier-breton-hours { color: #027FAB; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.rs-horaire-plombier-breton-hours.closed { color: #027FAB; font-weight: 700 !important; }

/* STATUT DISPONIBLE */
.rs-horaire-plombier-breton-open-status { margin-top: 18px; padding: 13px 16px; background: #027FAB; border: 1px solid #027FAB; border-radius: 8px; color: #FBFBFF; text-align: center; font-size: 15px; font-weight: 700; }

/* INSTAGRAM */
.rs-horaire-plombier-breton-rs { width: 100%; max-width: 900px; margin: 0 auto; padding: 60px 20px; position: relative; text-align: center; }

.rs-horaire-plombier-breton-eyebrow { display: inline-block; margin-bottom: 14px; color: #3FC3ED; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.rs-horaire-plombier-breton-rs h2 { margin: 0 0 24px; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 40px; font-weight: 700 !important; line-height: 1.2; }

.rs-horaire-plombier-breton-rs h2 span { color: #FBFBFF; text-decoration: underline; text-decoration-color: #3FC3ED; text-decoration-thickness: 4px; text-underline-offset: 8px; }

.rs-horaire-plombier-breton-rs p { max-width: 520px; margin: 0 auto 32px; color: rgba(251, 251, 255, 0.8); font-size: 15px; line-height: 1.7; }

.rs-horaire-plombier-breton-buttons { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }

.rs-horaire-plombier-breton-link { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; background: rgba(251, 251, 255, 0.1); border: 1px solid rgba(251, 251, 255, 0.2); border-radius: 24px; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }

.rs-horaire-plombier-breton-link img { display: block; width: 62px; height: 62px; object-fit: contain; transition: transform 0.3s ease, filter 0.3s ease; }

.rs-horaire-plombier-breton-link:hover { transform: translateY(-6px); background: rgba(63, 195, 237, 0.18); border-color: #3FC3ED; }

.rs-horaire-plombier-breton-link:hover img { transform: scale(1.08); filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.32)); }

/* TABLETTE */
@media (max-width: 900px) { .rs-horaire-plombier-breton-wrapper { max-width: 600px; grid-template-columns: 1fr; gap: 20px; } .rs-horaire-plombier-breton-rs { padding: 50px 20px 20px; } .rs-horaire-plombier-breton-rs h2 { margin-bottom: 24px; font-size: 32px; } .rs-horaire-plombier-breton-link { width: 82px; height: 82px; } .rs-horaire-plombier-breton-link img { width: 55px; height: 55px; } }

/* MOBILE */
@media (max-width: 480px) { .rs-horaire-plombier-breton-section { padding: 45px 16px; } .rs-horaire-plombier-breton-horaire { padding: 24px 18px; } .rs-horaire-plombier-breton-rs { padding: 32px 18px 10px; } .rs-horaire-plombier-breton-horaire h2 { font-size: 22px; } .rs-horaire-plombier-breton-rs h2 { font-size: 28px; } .rs-horaire-plombier-breton-rs p { font-size: 14px; } .rs-horaire-plombier-breton-day-row { padding: 10px 12px; align-items: flex-start; flex-direction: column; gap: 5px; } .rs-horaire-plombier-breton-day-name, .rs-horaire-plombier-breton-hours { font-size: 15px; } .rs-horaire-plombier-breton-hours { text-align: left; } .rs-horaire-plombier-breton-today-badge { margin-left: 6px; font-size: 12px; } .rs-horaire-plombier-breton-open-status { padding: 12px; font-size: 14px; } .rs-horaire-plombier-breton-link { width: 74px; height: 74px; border-radius: 20px; } .rs-horaire-plombier-breton-link img { width: 50px; height: 50px; } }

/* --------------------------------------------------------------------------GALERIE - LE PLOMBIER BRETON-------------------------------------------------------------------------- */
.gallery-plombier-breton-section, .gallery-plombier-breton-section *, .gallery-plombier-breton-section *::before, .gallery-plombier-breton-section *::after { box-sizing: border-box; }

.gallery-plombier-breton-section { width: 100%; background-color: #FBFBFF; font-family: "Sarabun", sans-serif; }

/* EN-TÊTE */
.gallery-plombier-breton-header { padding: 120px 20px 40px; background-color: #FBFBFF; text-align: center; }

.gallery-plombier-breton-subtitle { display: inline-block; margin-bottom: 12px; color: #3FC3ED; font-size: 12px; font-weight: 800 !important; letter-spacing: 0.18em; text-transform: uppercase; }

.gallery-plombier-breton-header h2 { margin: 0; color: #027FAB; font-family: "Ubuntu", sans-serif; font-size: 48px; font-weight: 700 !important; line-height: 1.15; letter-spacing: -0.02em; }

.gallery-plombier-breton-divider { width: 48px; height: 3px; margin: 18px auto 0; background-color: #3FC3ED; border-radius: 2px; }

/* CONTENEUR */
.gallery-plombier-breton-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 30px 0px; background-color: #FBFBFF; }

/* GRILLE */
.gallery-plombier-breton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* IMAGES */
.gallery-plombier-breton-item { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background-color: rgba(63, 195, 237, 0.1); border: 1px solid rgba(2, 127, 171, 0.18); border-radius: 14px; cursor: pointer; outline: none; }

.gallery-plombier-breton-item:focus-visible { outline: 3px solid #3FC3ED; outline-offset: 4px; }

.gallery-plombier-breton-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease, filter 0.45s ease; }

.gallery-plombier-breton-item:hover img { filter: saturate(1.05); transform: scale(1.07); }

/* OVERLAY AU SURVOL */
.gallery-plombier-breton-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(2, 127, 171, 0.68), rgba(63, 195, 237, 0.56)); border-radius: 14px; opacity: 0; transition: opacity 0.3s ease; }

.gallery-plombier-breton-item:hover .gallery-plombier-breton-overlay, .gallery-plombier-breton-item:focus-visible .gallery-plombier-breton-overlay { opacity: 1; }

.gallery-plombier-breton-overlay i { color: #FBFBFF; font-size: 2.2em; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); }

/* LIGHTBOX */
.gallery-plombier-breton-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; flex-direction: column; padding: 70px 20px 30px; background: linear-gradient(145deg, rgba(0, 0, 0, 0.97) 0%, rgba(1, 59, 80, 0.97) 55%, rgba(2, 127, 171, 0.96) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.gallery-plombier-breton-lightbox.active { display: flex; }

.gallery-plombier-breton-lightbox-inner { position: relative; display: flex; align-items: center; justify-content: center; width: 94%; max-width: 1000px; }

.gallery-plombier-breton-lightbox-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; }

.gallery-plombier-breton-lightbox-image { display: block; max-width: 78%; max-height: 76vh; object-fit: contain; background-color: #FBFBFF; border: 2px solid rgba(63, 195, 237, 0.42); border-radius: 10px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }

/* BOUTONS LIGHTBOX */
.gallery-plombier-breton-lightbox-btn, .gallery-plombier-breton-lightbox-close { display: flex; align-items: center; justify-content: center; padding: 0; background-color: rgba(251, 251, 255, 0.12); border: 1px solid rgba(251, 251, 255, 0.32); border-radius: 50%; color: #FBFBFF; font-family: "Sarabun", sans-serif; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }

.gallery-plombier-breton-lightbox-btn { flex-shrink: 0; width: 44px; height: 44px; margin: 0 8px; font-size: 38px; font-weight: 300; }

.gallery-plombier-breton-lightbox-close { position: absolute; top: -50px; right: 8%; width: 38px; height: 38px; font-size: 30px; font-weight: 300; }

.gallery-plombier-breton-lightbox-btn span, .gallery-plombier-breton-lightbox-close span { display: block; line-height: 1; transform: translateY(-2px); }

.gallery-plombier-breton-lightbox-btn:hover, .gallery-plombier-breton-lightbox-close:hover { background-color: #3FC3ED; border-color: #3FC3ED; color: #000000; transform: scale(1.06); }

.gallery-plombier-breton-lightbox-btn:focus-visible, .gallery-plombier-breton-lightbox-close:focus-visible { outline: 3px solid #3FC3ED; outline-offset: 4px; }

/* COMPTEUR */
.gallery-plombier-breton-lightbox-counter { margin-top: 16px; color: rgba(251, 251, 255, 0.8); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }

/* RESPONSIVE */
@media screen and (max-width: 1024px) { .gallery-plombier-breton-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

@media screen and (max-width: 768px) { .gallery-plombier-breton-header { padding: 90px 18px 35px; } .gallery-plombier-breton-header h2 { font-size: 38px; } .gallery-plombier-breton-container { padding: 0 18px 65px; } .gallery-plombier-breton-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery-plombier-breton-overlay { background: linear-gradient(135deg, rgba(2, 127, 171, 0.26), rgba(63, 195, 237, 0.24)); opacity: 1; } .gallery-plombier-breton-item:active .gallery-plombier-breton-overlay { background: linear-gradient(135deg, rgba(2, 127, 171, 0.72), rgba(63, 195, 237, 0.62)); } .gallery-plombier-breton-lightbox-image { max-width: 76%; } }

@media screen and (max-width: 600px) { .gallery-plombier-breton-lightbox { padding-right: 10px; padding-left: 10px; } .gallery-plombier-breton-lightbox-inner { width: 100%; max-width: 100%; } .gallery-plombier-breton-lightbox-image { max-width: calc(100% - 90px); max-height: 70vh; border-radius: 8px; } .gallery-plombier-breton-lightbox-btn { width: 38px; height: 38px; margin: 0 4px; font-size: 30px; } .gallery-plombier-breton-lightbox-close { top: -46px; right: 44px; width: 34px; height: 34px; font-size: 28px; } }

@media screen and (max-width: 480px) { .gallery-plombier-breton-header { padding: 75px 16px 30px; } .gallery-plombier-breton-subtitle { font-size: 11px; letter-spacing: 0.14em; } .gallery-plombier-breton-header h2 { font-size: 30px; } .gallery-plombier-breton-container { padding: 0 12px 55px; } .gallery-plombier-breton-grid { gap: 8px; } .gallery-plombier-breton-item, .gallery-plombier-breton-overlay { border-radius: 10px; } .gallery-plombier-breton-overlay i { font-size: 1.6em; } .gallery-plombier-breton-lightbox-image { max-width: calc(100% - 78px); } .gallery-plombier-breton-lightbox-btn { width: 34px; height: 34px; margin: 0 3px; font-size: 28px; } }

/* ----------------------------------------------------------------BLOC EN-TÊTE - LE PLOMBIER BRETON---------------------------------------------------------------- */
.en-tete-plombier-breton-section, .en-tete-plombier-breton-section *, .en-tete-plombier-breton-section *::before, .en-tete-plombier-breton-section *::after { box-sizing: border-box; }

/* SECTION */
.en-tete-plombier-breton-section { position: relative; min-height: 70vh; padding: 200px 60px 80px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 48px; overflow: hidden; font-family: "Sarabun", sans-serif; }

/* IMAGE DE FOND */
.en-tete-plombier-breton-bg { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-position: center; background-size: cover; }

/* OVERLAY */
.en-tete-plombier-breton-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(145deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 55, 75, 0.94) 55%, rgba(2, 127, 171, 0.82) 100%); }

/* CONTENU */
.en-tete-plombier-breton-content { position: relative; z-index: 2; flex: 1; min-width: 300px; max-width: 50%; display: flex; flex-direction: column; align-items: flex-start; }

/* SURTITRE */
.en-tete-plombier-breton-eyebrow { margin: 0 0 13px !important; color: #3FC3ED !important; font-family: "Sarabun", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 3px; text-transform: uppercase; }

/* TITRE */
.en-tete-plombier-breton-content h1 { margin: 0 0 20px; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 48px; font-weight: 700 !important; line-height: 1.15; }

.en-tete-plombier-breton-content h1 span { display: block; color: #3FC3ED; }

/* TEXTE */
.en-tete-plombier-breton-content > p:not(.en-tete-plombier-breton-eyebrow) { max-width: 560px; margin: 0 0 32px; color: rgba(251, 251, 255, 0.84); font-family: "Sarabun", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.75; }

/* IMAGE À DROITE */
.en-tete-plombier-breton-image { position: relative; z-index: 2; flex: 1; min-width: 300px; max-width: 48%; }

.en-tete-plombier-breton-image-wrapper { position: relative; overflow: hidden; border: 1px solid rgba(63, 195, 237, 0.42); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* TRAIT BLEU */
.en-tete-plombier-breton-image-wrapper::before { content: ""; position: absolute; top: 0; left: 29%; z-index: 3; width: 42%; height: 2px; background-color: #3FC3ED; border-radius: 0 0 4px 4px; }

.en-tete-plombier-breton-image img { display: block; width: 100%; height: 430px; object-fit: cover; object-position: center; }

/* REFLET */
.en-tete-plombier-breton-image-wrapper::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 40%; background: linear-gradient(to top, rgba(2, 127, 171, 0.42), transparent); pointer-events: none; }

/* TABLETTE */
@media (max-width: 900px) { .en-tete-plombier-breton-section { padding: 140px 24px 70px; flex-direction: column; } .en-tete-plombier-breton-content, .en-tete-plombier-breton-image { width: 100%; max-width: 100%; align-items: center; text-align: center; } .en-tete-plombier-breton-content h1 { font-size: 40px; } .en-tete-plombier-breton-content > p:not(.en-tete-plombier-breton-eyebrow) { max-width: 680px; } .en-tete-plombier-breton-image img { height: 400px; } }

/* MOBILE */
@media (max-width: 480px) { .en-tete-plombier-breton-section { min-height: auto; padding: 120px 16px 55px; gap: 36px; } .en-tete-plombier-breton-content, .en-tete-plombier-breton-image { min-width: 0; } .en-tete-plombier-breton-eyebrow { font-size: 11px !important; letter-spacing: 2px; } .en-tete-plombier-breton-content h1 { font-size: 32px; line-height: 1.18; } .en-tete-plombier-breton-content > p:not(.en-tete-plombier-breton-eyebrow) { font-size: 14px; line-height: 1.65; } .en-tete-plombier-breton-image-wrapper { border-radius: 14px; } .en-tete-plombier-breton-image img { height: 280px; } }

/* ----------------------------------------------------------------SOUS-PRESTATIONS - LE PLOMBIER BRETON---------------------------------------------------------------- */
.step-plombier-breton, .step-plombier-breton *, .step-plombier-breton *::before, .step-plombier-breton *::after { box-sizing: border-box; }

.step-plombier-breton { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; padding: 80px 50px 160px; overflow: hidden; background-color: #FBFBFF; font-family: "Sarabun", sans-serif; }

/* INTRODUCTION */
.step-plombier-breton-intro { position: relative; z-index: 2; }

.step-plombier-breton-intro h2 { margin: 0 0 24px; color: #027FAB; font-family: "Ubuntu", sans-serif; font-size: 42px; font-weight: 700 !important; line-height: 1.15; }

.step-plombier-breton-intro h2 span { color: #3FC3ED; }

.step-plombier-breton-intro p { max-width: 330px; margin: 0; color: rgba(0, 0, 0, 0.68); font-size: 16px; line-height: 1.8; }

/* TIMELINE */
.step-plombier-breton-timeline { position: relative; width: 100%; aspect-ratio: 800 / 460; }

.step-plombier-breton-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.step-plombier-breton-halo { fill: none; stroke: rgba(63, 195, 237, 0.14); stroke-width: 28; stroke-linecap: round; }

.step-plombier-breton-path { fill: none; stroke: #027FAB; stroke-width: 3; stroke-linecap: round; }

.step-plombier-breton-dot-svg { fill: #000000; }

.step-plombier-breton-dot-link { display: block; cursor: pointer; }

.step-plombier-breton-dot-link .step-plombier-breton-dot-svg { transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, fill 0.25s ease; }

.step-plombier-breton-dot-link:hover .step-plombier-breton-dot-svg { fill: #3FC3ED; transform: scale(1.35); }

/* ÉTAPES */
.step-plombier-breton-step { position: absolute; z-index: 3; }

.step-plombier-breton-number { position: absolute; top: 8px; color: rgba(2, 127, 171, 0.11); font-family: "Ubuntu", sans-serif; font-size: 110px; font-weight: 700; line-height: 1; pointer-events: none; white-space: nowrap; }

.step-plombier-breton-content { position: absolute; top: 26px; width: 220px; }

.step-plombier-breton-content-link { display: block; color: inherit; text-decoration: none; transform-origin: center; transition: transform 0.25s ease; }

.step-plombier-breton-content-link:hover { transform: scale(1.04); }

.step-plombier-breton-content h3 { margin: 0 0 8px; color: #000000; font-family: "Ubuntu", sans-serif; font-size: 20px; font-weight: 700 !important; line-height: 1.2; transition: color 0.25s ease; }

.step-plombier-breton-content p { margin: 0; color: rgba(0, 0, 0, 0.65); font-size: 14px; line-height: 1.7; transition: color 0.25s ease; }

.step-plombier-breton-content-link:hover h3 { color: #027FAB; }

.step-plombier-breton-content-link:hover p { color: #000000; }

/* POSITION DES 4 ÉTAPES */
.step-plombier-breton-step-1 { top: 16%; left: 4%; }

.step-plombier-breton-step-2 { top: 42%; left: 34%; transform: translateX(-50%); }

.step-plombier-breton-step-3 { top: 68%; left: 62%; transform: translateX(-50%); }

.step-plombier-breton-step-4 { top: 94%; right: 4%; }

.step-plombier-breton-step-1 .step-plombier-breton-number, .step-plombier-breton-step-1 .step-plombier-breton-content { left: 0; }

.step-plombier-breton-step-2 .step-plombier-breton-number, .step-plombier-breton-step-2 .step-plombier-breton-content, .step-plombier-breton-step-3 .step-plombier-breton-number, .step-plombier-breton-step-3 .step-plombier-breton-content { left: 50%; text-align: center; transform: translateX(-50%); }

.step-plombier-breton-step-4 .step-plombier-breton-number, .step-plombier-breton-step-4 .step-plombier-breton-content { right: 0; text-align: right; }

/* TABLETTE */
@media (max-width: 1235px) { .step-plombier-breton { grid-template-columns: 1fr; gap: 30px; padding: 80px 24px 160px; } .step-plombier-breton-intro p { max-width: 100%; } .step-plombier-breton-timeline { aspect-ratio: 800 / 520; } .step-plombier-breton-content { width: 180px; } }

/* MOBILE */
@media (max-width: 710px) { .step-plombier-breton { grid-template-columns: 1fr; gap: 34px; padding: 65px 20px; } .step-plombier-breton-intro h2 { font-size: 32px; } .step-plombier-breton-svg { display: none; } .step-plombier-breton-timeline { display: flex; flex-direction: column; gap: 36px; aspect-ratio: auto; } .step-plombier-breton .step-plombier-breton-step { position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: 60px 1fr !important; column-gap: 14px !important; align-items: flex-start !important; padding-left: 14px; border-left: 3px solid #027FAB; transform: none !important; } .step-plombier-breton .step-plombier-breton-number { position: relative !important; inset: auto !important; grid-column: 1 !important; display: block !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; color: rgba(2, 127, 171, 0.15); font-size: 48px !important; line-height: 1 !important; text-align: left !important; transform: none !important; } .step-plombier-breton .step-plombier-breton-content { position: relative !important; inset: auto !important; grid-column: 2 !important; width: auto !important; padding-top: 4px; text-align: left !important; transform: none !important; } .step-plombier-breton-content-link:hover { transform: none; } .step-plombier-breton-content h3 { font-size: 18px; } .step-plombier-breton-content p { font-size: 14px; } }

@media (max-width: 480px) { .step-plombier-breton { padding: 55px 16px; } .step-plombier-breton-intro h2 { font-size: 28px; } .step-plombier-breton-intro p { font-size: 15px; line-height: 1.7; } }

/* ------------------------------------------------TEXTES PRESTATIONS - LE PLOMBIER BRETON--------------------------------------------------------- */
.texte-presta-plombier-breton, .texte-presta-plombier-breton *, .texte-presta-plombier-breton *::before, .texte-presta-plombier-breton *::after { box-sizing: border-box; }

.texte-presta-plombier-breton { position: relative; padding: 120px 80px 80px; overflow: hidden; background-color: #FBFBFF; font-family: "Sarabun", sans-serif; }

/* IMAGE DE FOND */
.texte-presta-plombier-breton-bg { position: absolute; inset: 0; z-index: 0; }

.texte-presta-plombier-breton-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* OVERLAY */
.texte-presta-plombier-breton::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(325deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 59, 80, 0.95) 58%, rgba(2, 127, 171, 0.84) 100%); }

.texte-presta-plombier-breton-overlay { position: relative; z-index: 2; width: 100%; max-width: 1350px; margin: 0 auto; }

/* LIGNES */
.texte-presta-plombier-breton-row { display: flex; align-items: center; justify-content: space-between; gap: 80px; margin-bottom: 110px; scroll-margin-top: 150px; }

.texte-presta-plombier-breton-row:last-of-type { margin-bottom: 70px; }

.texte-presta-plombier-breton-row.reverse { flex-direction: row-reverse; }

/* IMAGES */
.texte-presta-plombier-breton-image { flex: 0 0 40%; display: flex; }

.texte-presta-plombier-breton-row:not(.reverse) .texte-presta-plombier-breton-image { justify-content: flex-start; }

.texte-presta-plombier-breton-row.reverse .texte-presta-plombier-breton-image { justify-content: flex-end; }

.texte-presta-plombier-breton-image img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: center; border: 1px solid rgba(63, 195, 237, 0.42); border-radius: 20px; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42); }

/* TEXTES */
.texte-presta-plombier-breton-text { flex: 0 0 54%; color: #FBFBFF; text-align: left; }

.texte-presta-plombier-breton-text h2 { margin: 0 0 24px; color: #FBFBFF; font-family: "Ubuntu", sans-serif; font-size: 38px; font-weight: 700 !important; line-height: 1.12; }

.texte-presta-plombier-breton-text h2 span { color: #3FC3ED; }

.texte-presta-plombier-breton-text p { max-width: 850px; margin: 0; color: rgba(251, 251, 255, 0.88); font-family: "Sarabun", sans-serif; font-size: 16px; line-height: 1.75; }

/* BOUTON */
.texte-presta-plombier-breton-btn-wrap { display: flex; align-items: center; justify-content: center; margin-top: 10px; }

/* TABLETTE */
@media (max-width: 1024px) { .texte-presta-plombier-breton { padding: 90px 40px; } .texte-presta-plombier-breton-row, .texte-presta-plombier-breton-row.reverse { flex-direction: column; align-items: flex-start; gap: 38px; margin-bottom: 85px; } .texte-presta-plombier-breton-image, .texte-presta-plombier-breton-text { flex: 1 1 100%; width: 100%; } .texte-presta-plombier-breton-image { justify-content: flex-start !important; } .texte-presta-plombier-breton-image img { height: 430px; } .texte-presta-plombier-breton-text h2 { font-size: 36px; } }

/* MOBILE */
@media (max-width: 767px) { .texte-presta-plombier-breton { padding: 75px 20px; } .texte-presta-plombier-breton-row, .texte-presta-plombier-breton-row.reverse { gap: 28px; margin-bottom: 70px; } .texte-presta-plombier-breton-row:last-of-type { margin-bottom: 50px; } .texte-presta-plombier-breton-image img { height: 280px; border-radius: 14px; } .texte-presta-plombier-breton-text h2 { margin-bottom: 18px; font-size: 28px; } .texte-presta-plombier-breton-text p { font-size: 15px; line-height: 1.7; } .texte-presta-plombier-breton-btn-wrap a { width: 100%; text-align: center; } }

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