@charset "UTF-8";
@import url(main.css);
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box !important; color: #001c52 !important; border: 2px solid transparent; font-weight: 600; padding: 10px 18px !important; }

/* ==================================================  ÉTAPES D'UN PROJET — MADY PEINTURE  ================================================== */
.mady-project-steps { --mady-step-color: #168366; --mady-step-color-rgb: 22, 131, 102; position: relative; width: 100%; padding: 0px 30px 120px; overflow: hidden; background-color: #FFFFFF; }

.mady-project-steps *, .mady-project-steps *::before, .mady-project-steps *::after { box-sizing: border-box; }

.mady-project-steps__container { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; }

/* ================================================== COULEURS SELON LA PAGE ================================================== */
/* PEINTURE INTÉRIEURE */
.mady-project-steps--painting { --mady-step-color: #168366; --mady-step-color-rgb: 22, 131, 102; }

/* PAPIER PEINT ET DÉCORATION */
.mady-project-steps--wallpaper { --mady-step-color: #C7AA09; --mady-step-color-rgb: 199, 170, 9; }

/* PARQUETS ET BOISERIES */
.mady-project-steps--wood { --mady-step-color: #BA4F05; --mady-step-color-rgb: 186, 79, 5; }

/* ENDUIT ET PRÉPARATION */
.mady-project-steps--drywall { --mady-step-color: #9C1447; --mady-step-color-rgb: 156, 20, 71; }

/* ================================================== EN-TÊTE ================================================== */
.mady-project-steps__header { width: 100%; max-width: 900px; margin: 0 auto 75px; text-align: center; }

.mady-project-steps__eyebrow { margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 15px; color: #011C51; font-family: 'Birthstone'; font-size: 50px; line-height: 1.4; }

.mady-project-steps__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

.mady-project-steps__title { max-width: 900px; margin: 0 auto; color: #011C51; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

/* ================================================== ÉTAPES ================================================== */
.mady-project-steps__timeline { position: relative; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }

/* Ligne reliant les étapes */
.mady-project-steps__line { position: absolute; top: 35px; right: 9%; left: 9%; height: 2px; background-color: rgba(var(--mady-step-color-rgb), 0.22); }

/* ================================================== ÉTAPE ================================================== */
.mady-project-steps__item { position: relative; z-index: 2; width: 100%; text-align: center; }

/* ================================================== NUMÉRO ================================================== */
.mady-project-steps__number { position: relative; width: 72px; height: 72px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--mady-step-color); border-radius: 50%; background-color: #FFFFFF; color: var(--mady-step-color); font-size: 17px; line-height: 1; letter-spacing: 1.5px; box-shadow: 0 0 0 10px #FFFFFF; }

/* ================================================== TEXTES ================================================== */
.mady-project-steps__item-title { margin: 0; color: #011C51; font-size: 21px; line-height: 1.3; letter-spacing: 0.4px; text-transform: uppercase; }

.mady-project-steps__description { max-width: 245px; margin: 17px auto 0; color: #536079; font-size: 15px; line-height: 1.7; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 1100px) { .mady-project-steps { padding: 100px 25px; } .mady-project-steps__header { margin-bottom: 60px; } .mady-project-steps__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 30px; } .mady-project-steps__line { display: none; } .mady-project-steps__description { max-width: 280px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 700px) { .mady-project-steps { padding: 75px 18px; } .mady-project-steps__header { margin-bottom: 50px; } .mady-project-steps__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .mady-project-steps__eyebrow-line { width: 45px; } .mady-project-steps__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .mady-project-steps__timeline { grid-template-columns: 1fr; gap: 42px; } .mady-project-steps__number { width: 64px; height: 64px; margin-bottom: 22px; font-size: 15px; } .mady-project-steps__item-title { font-size: 20px; } .mady-project-steps__description { max-width: 450px; margin-top: 13px; font-size: 15px; } }

/* ================================================== PRESTATIONS PAPIER PEINT — MADY PEINTURE  ================================================== */
.mady-wallpaper-services { width: 100%; padding: 120px 30px; background-color: #FFFFFF; box-sizing: border-box; }

.mady-wallpaper-services *, .mady-wallpaper-services *::before, .mady-wallpaper-services *::after { box-sizing: border-box; }

.mady-wallpaper-services__container { width: 100%; max-width: 1320px; margin: 0 auto; }

/* ================================================== EN-TÊTE ================================================== */
.mady-wallpaper-services__header { width: 100%; max-width: 900px; margin: 0 auto 60px; text-align: center; }

.mady-wallpaper-services__eyebrow { margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 15px; color: #011d51; font-family: 'Birthstone'; font-size: 50px; line-height: 1.4; }

.mady-wallpaper-services__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

.mady-wallpaper-services__title { max-width: 950px; margin: 0 auto; color: #011C51; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

/* ================================================== LISTES ================================================== */
.mady-wallpaper-services__lists { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; }

.mady-wallpaper-services__list { margin: 0; padding: 0; list-style: none; }

.mady-wallpaper-services__item { position: relative; min-height: 72px; padding: 21px 20px 21px 38px; display: flex; align-items: center; border-bottom: 1px solid rgba(1, 28, 81, 0.12); color: #011C51; font-size: 18px; line-height: 1.5; }

.mady-wallpaper-services__item:first-child { border-top: 1px solid rgba(1, 28, 81, 0.12); }

.mady-wallpaper-services__item::before { content: ""; position: absolute; top: 50%; left: 5px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--mady-service-color); box-shadow: 0 0 0 6px rgba(var(--mady-service-color-rgb), 0.18); transform: translateY(-50%); }

/* PEINTURE INTÉRIEURE — VERT */
.mady-wallpaper-services--painting { --mady-service-color: #168366; --mady-service-color-rgb: 22, 131, 102; }

/* PAPIER PEINT ET DÉCORATION — JAUNE */
.mady-wallpaper-services--wallpaper { --mady-service-color: #C7AA09; --mady-service-color-rgb: 199, 170, 9; }

/* PARQUETS ET BOISERIES — ORANGE */
.mady-wallpaper-services--wood { --mady-service-color: #BA4F05; --mady-service-color-rgb: 186, 79, 5; }

/* ENDUIT ET PRÉPARATION — ROSE */
.mady-wallpaper-services--drywall { --mady-service-color: #9C1447; --mady-service-color-rgb: 156, 20, 71; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .mady-wallpaper-services { padding: 100px 25px; } .mady-wallpaper-services__header { margin-bottom: 50px; } .mady-wallpaper-services__eyebrow { font-size: 50px; } .mady-wallpaper-services__title { font-size: 42px; } .mady-wallpaper-services__lists { column-gap: 45px; } .mady-wallpaper-services__item { padding-right: 10px; font-size: 17px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 700px) { .mady-wallpaper-services { padding: 75px 18px; } .mady-wallpaper-services__header { margin-bottom: 40px; } .mady-wallpaper-services__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .mady-wallpaper-services__eyebrow-line { width: 45px; } .mady-wallpaper-services__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .mady-wallpaper-services__lists { grid-template-columns: 1fr; gap: 0; } .mady-wallpaper-services__list:nth-child(2) .mady-wallpaper-services__item:first-child { border-top: 0; } .mady-wallpaper-services__item { min-height: 64px; padding: 18px 10px 18px 35px; font-size: 16px; } .mady-wallpaper-services__item::before { width: 10px; height: 10px; box-shadow: 0 0 0 5px rgba(var(--mady-service-color-rgb), 0.14); } }

/* ================================================== HEADER DES PAGES — MADY PEINTURE ================================================== */
.page-header-mady { position: relative; isolation: isolate; width: 100%; min-height: 530px; overflow: hidden; background-color: #011C51; color: #FFFFFF; }

.page-header-mady *, .page-header-mady *::before, .page-header-mady *::after { box-sizing: border-box; }

.spacer { display: none; }

/* ================================================== IMAGE DE FOND ================================================== */
.page-header-mady__image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* ================================================== OVERLAY COMMUN ================================================== */
.page-header-mady__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(var(--header-color-main), 0.9) 0%, rgba(var(--header-color-main), 0.6) 45%, rgba(var(--header-color-main), 0.4) 72%, rgba(var(--header-color-main), 0.2) 100%); }

/* ================================================== COULEURS SELON LA PAGE ================================================== */
/* PAGE PEINTURE */
.page-header-mady--peinture { --header-color-main: 22, 131, 102; }

/* PAGE PAPIER PEINT */
.page-header-mady--papier-peint { --header-color-main: 199, 170, 9; }

/* PAGE PARQUETS ET BOISERIES */
.page-header-mady--parquets { --header-color-main: 186, 79, 5; }

/* PAGE ENDUIT ET PRÉPARATION */
.page-header-mady--enduit { --header-color-main: 156, 20, 71; }

/* PAGE CONTACT */
.page-header-mady--contact { --header-color-main: 6, 98, 179; }

/* ================================================== CONTENU ================================================== */
.page-header-mady__container { position: relative; z-index: 1; width: 100%; max-width: 1400px; min-height: 530px; margin: 0 auto; padding: 150px 60px 100px; display: flex; align-items: center; }

.page-header-mady__content { width: 100%; max-width: 850px; }

/* ================================================== EYEBROW ================================================== */
.page-header-mady__eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; color: #FFFFFF; font-family: 'Birthstone'; font-size: 55px; line-height: 1.4; }

.page-header-mady__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; margin-bottom: 15px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

/* ================================================== TITRE ================================================== */
.page-header-mady__title { max-width: 850px; margin: 0; color: #FFFFFF; font-size: 45px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 5px 25px rgba(0, 0, 0, 0.18); }

.page-header-mady__intro { max-width: 720px; margin-top: 24px; color: rgba(255, 255, 255, 0.88); font-size: 18px; line-height: 1.7; }

.page-header-mady__intro p { margin: 0; }

/* ================================================== RESPONSIVE TABLETTE ================================================== */
@media screen and (max-width: 991px) { .page-header-mady { min-height: 470px; } .page-header-mady__container { min-height: 470px; padding: 135px 40px 85px; } .page-header-mady__eyebrow { font-size: 55px; } .page-header-mady__title { font-size: 43px; } .page-header-mady__overlay { background: linear-gradient(90deg, rgba(var(--header-color-main), 0.92) 0%, rgba(var(--header-color-main), 0.78) 55%, rgba(var(--header-color-main), 0.48) 100%); } }

/* ================================================== RESPONSIVE MOBILE ================================================== */
@media screen and (max-width: 767px) { .page-header-mady { min-height: 480px; } .page-header-mady__container { min-height: 480px; padding: 120px 22px 60px; align-items: flex-end; } .page-header-mady__overlay { background: linear-gradient(180deg, rgba(var(--header-color-main), 0.4) 0%, rgba(var(--header-color-main), 0.6) 45%, rgba(var(--header-color-main), 0.8) 100%); } .page-header-mady__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 46px; line-height: 1.15; } .page-header-mady__eyebrow-line { width: 45px; margin-bottom: 10px; } .page-header-mady__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .page-header-mady__intro { max-width: 100%; margin-top: 20px; color: rgba(255, 255, 255, 0.92); font-size: 16px; line-height: 1.65; } }

/* ==================================================  BLOC SEO — MADY PEINTURE  ================================================== */
.fs-6.lead.mt-4.mb-4 p { color: #536079; font-size: 17px; line-height: 1.75; font-weight: 400; }

.first-activity-div.shadow-lg { box-shadow: none !important; }

.second-activity-div.shadow-lg { box-shadow: none !important; }

.third-activity-div.shadow-lg { box-shadow: none !important; }

.display-6.titles.fw-bold.text-body-emphasis.lh-1 { margin-bottom: 1rem !important; }

.first-activity-title, .second-activity-title, .third-activity-title { position: relative; }

.first-activity-title::after, .second-activity-title::after, .third-activity-title::after { content: ""; display: block; width: 150px; height: 2px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); margin-top: 15px; }

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

/* ==================================================  ADRESSE FOOTER — MADY PEINTURE  ================================================== */
footer > div.row.justify-content-center.justify-content-lg-around.text-center.text-lg-start > div:nth-child(3) > div:nth-child(2) > p { font-size: 0; }

footer > div.row.justify-content-center.justify-content-lg-around.text-center.text-lg-start > div:nth-child(3) > div:nth-child(2) > p::before { content: "Basé à Cherbourg-en-Cotentin (50120)"; font-size: 16px; }

/* ==================================================  ZONE D'INTERVENTION — MADY PEINTURE  ================================================== */
.zone-mady-peinture { position: relative; width: 100%; padding: 120px 30px; overflow: hidden; background: #011c51; }

.zone-mady-peinture *, .zone-mady-peinture *::before, .zone-mady-peinture *::after { box-sizing: border-box; }

.zone-mady-peinture__container { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 90px; }

/* ================================================== GOOGLE MAPS ================================================== */
.zone-mady-peinture__map-wrapper { position: relative; width: 100%; padding: 0 28px 0px 0; }

.zone-mady-peinture__map { position: relative; z-index: 2; width: 100%; height: 580px; overflow: hidden; border-radius: 28px; background-color: #FFFFFF; box-shadow: 0 28px 65px rgba(0, 10, 42, 0.35); }

.zone-mady-peinture__map iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ================================================== CONTENU ================================================== */
.zone-mady-peinture__content { width: 100%; max-width: 620px; }

.zone-mady-peinture__eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; color: #FFFFFF; font-family: 'Birthstone'; font-size: 50px; line-height: 1.4; }

.zone-mady-peinture__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; margin-bottom: 15px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

.zone-mady-peinture__title { max-width: 620px; margin: 0; color: #FFFFFF; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

.zone-mady-peinture__description { max-width: 590px; margin-top: 28px; color: rgba(255, 255, 255, 0.8); font-size: 17px; line-height: 1.8; }

.zone-mady-peinture__description p { margin-top: 0; margin-bottom: 17px; }

.zone-mady-peinture__description p:last-child { margin-bottom: 0; }

/* ================================================== LOCALITÉS ================================================== */
.zone-mady-peinture__locations { width: 100%; margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }

.zone-mady-peinture__locations span { min-height: 38px; padding: 8px 17px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50px; background-color: rgba(1, 28, 81, 0.36); color: #FFFFFF; font-size: 14px; line-height: 1.3; }

/* ================================================== BOUTON ================================================== */
.zone-mady-peinture__button-wrapper { margin-top: 40px; }

.zone-mady-peinture__button p { margin-bottom: 0; }

.zone-mady-peinture__button { min-height: 58px; padding: 15px 31px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 50px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; color: #FFFFFF; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 14px 32px rgba(0, 10, 42, 0.24); transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }

.zone-mady-peinture__button:hover { color: #011C51; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 10, 42, 0.32); }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 1100px) { .zone-mady-peinture { padding: 100px 25px; } .zone-mady-peinture__container { gap: 60px; } .zone-mady-peinture__map { height: 510px; } .zone-mady-peinture__eyebrow { font-size: 50px; } .zone-mady-peinture__title { font-size: 42px; } }

/* ================================================== TABLETTE VERTICALE ================================================== */
@media screen and (max-width: 850px) { .zone-mady-peinture__container { grid-template-columns: 1fr; gap: 70px; } .zone-mady-peinture__map-wrapper { max-width: 700px; margin: 0 auto; } .zone-mady-peinture__content { max-width: 700px; margin: 0 auto; } .zone-mady-peinture__description { max-width: 680px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 620px) { .zone-mady-peinture { padding: 75px 18px; } .zone-mady-peinture__container { gap: 55px; } .zone-mady-peinture__map-wrapper { padding: 0 12px 18px 0; } .zone-mady-peinture__map { height: 390px; border-width: 5px; border-radius: 20px; } .zone-mady-peinture__map-decor { border-radius: 20px; } .zone-mady-peinture__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .zone-mady-peinture__eyebrow-line { width: 45px; } .zone-mady-peinture__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .zone-mady-peinture__description { margin-top: 22px; font-size: 16px; line-height: 1.7; } .zone-mady-peinture__locations { margin-top: 26px; gap: 8px; } .zone-mady-peinture__locations span { min-height: 36px; padding: 7px 14px; font-size: 13px; } .zone-mady-peinture__button-wrapper { margin-top: 32px; } .zone-mady-peinture__button { width: 100%; min-height: 56px; padding: 14px 22px; border-radius: 50px; } }

@media screen and (max-width: 420px) { .zone-mady-peinture__map { height: 340px; } }

/* ================================================== GALERIE DE RÉALISATIONS — MADY PEINTURE ================================================== */
.custom-gallery-block { position: relative; width: 100%; padding: 105px 30px 105px; overflow: hidden; background-color: #FFFFFF; }

.custom-gallery-block *, .custom-gallery-block *::before, .custom-gallery-block *::after, .custom-gallery-lightbox *, .custom-gallery-lightbox *::before, .custom-gallery-lightbox *::after { box-sizing: border-box; }

/* ================================================== EN-TÊTE ================================================== */
.custom-gallery-header { width: 100%; max-width: 1050px; margin: 0 auto 55px; text-align: center; }

.custom-gallery-eyebrow { margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 15px; color: #011c51; font-family: 'Birthstone'; font-size: 50px; line-height: 1.4; }

.custom-gallery-eyebrow__line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; margin-bottom: 15px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

.custom-gallery-title { max-width: 800px; margin: 0 auto; color: #011C51; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

.custom-gallery-intro { max-width: 820px; margin: 25px auto 0; color: #536079; font-size: 17px; line-height: 1.75; }

.custom-gallery-intro p { margin-top: 0; margin-bottom: 15px; }

.custom-gallery-intro p:last-child { margin-bottom: 0; }

/* ================================================== GRILLE ================================================== */
.custom-gallery-grid { width: 100%; }

.custom-gallery-item { height: 400px !important; margin-bottom: 30px; }

.custom-gallery-card { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background-color: #011C51; box-shadow: 0 18px 40px rgba(1, 28, 81, 0.12); }

.custom-gallery-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; text-decoration: none; cursor: pointer; }

.custom-gallery-image { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; transition: transform 0.6s ease, filter 0.6s ease; }

/* ================================================== SURVOL DES IMAGES ================================================== */
.custom-gallery-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #FFFFFF; background: rgba(1, 28, 81, 0.76); opacity: 0; transition: opacity 0.4s ease; }

.custom-gallery-hover__icon { position: relative; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid transparent; border-radius: 50px; background: linear-gradient(#011C51, #011C51) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; color: #FFFFFF; font-size: 24px; opacity: 0; transform: scale(0.75); transition: opacity 0.4s ease, transform 0.4s ease; }

.custom-gallery-link:hover .custom-gallery-image, .custom-gallery-link:focus-visible .custom-gallery-image { transform: scale(1.06); filter: brightness(0.82); }

.custom-gallery-link:hover .custom-gallery-hover, .custom-gallery-link:focus-visible .custom-gallery-hover { opacity: 1; }

.custom-gallery-link:hover .custom-gallery-hover__icon, .custom-gallery-link:focus-visible .custom-gallery-hover__icon { opacity: 1; transform: scale(1); }

.custom-gallery-link:focus-visible { outline: 3px solid #0395D8; outline-offset: -6px; }

/* ================================================== LIGHTBOX ================================================== */
.custom-gallery-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 30px 80px; background: rgba(1, 12, 39, 0.95); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.custom-gallery-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.custom-gallery-lightbox__visual { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.custom-gallery-lightbox__image { display: block; width: auto; height: auto; max-width: 85vw; max-height: 88vh; margin: 0; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }

/* ================================================== COMMANDES DE LA LIGHTBOX ================================================== */
.custom-gallery-lightbox__button { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50px; background-color: rgba(1, 28, 81, 0.58); color: #FFFFFF; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; }

.custom-gallery-lightbox__button:hover { background-color: #035BA9; }

.custom-gallery-lightbox__button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 5px; }

.custom-gallery-lightbox__previous, .custom-gallery-lightbox__next { top: 50%; width: 55px; height: 80px; font-size: 28px; transform: translateY(-50%); }

.custom-gallery-lightbox__previous { left: 20px; }

.custom-gallery-lightbox__next { right: 20px; }

.custom-gallery-lightbox__previous:hover { transform: translate(-4px, -50%); }

.custom-gallery-lightbox__next:hover { transform: translate(4px, -50%); }

.custom-gallery-lightbox__close { top: 15px; right: 15px; width: 55px; height: 55px; font-size: 26px; }

.custom-gallery-lightbox__counter { position: absolute; bottom: 18px; left: 50%; color: #FFFFFF; font-size: 14px; letter-spacing: 0.08em; transform: translateX(-50%); }

body.custom-gallery-lightbox-open { overflow: hidden; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 991px) { .custom-gallery-block { padding: 95px 25px 85px; } .custom-gallery-header { margin-bottom: 45px; } .custom-gallery-eyebrow { font-size: 50px; } .custom-gallery-title { font-size: 43px; } .custom-gallery-item { height: 350px !important; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 767px) { .custom-gallery-block { padding: 75px 18px 65px; } .custom-gallery-header { margin-bottom: 38px; } .custom-gallery-eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .custom-gallery-eyebrow__line { width: 45px; } .custom-gallery-title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .custom-gallery-intro { margin-top: 20px; font-size: 16px; line-height: 1.7; } .custom-gallery-item { height: 320px !important; margin-bottom: 18px; } .custom-gallery-card, .custom-gallery-link { border-radius: 16px; } .custom-gallery-hover { display: none; } .custom-gallery-lightbox { padding: 60px 45px; } .custom-gallery-lightbox__image { max-width: 90vw; max-height: 80vh; } .custom-gallery-lightbox__previous, .custom-gallery-lightbox__next { width: 40px; height: 60px; font-size: 20px; } .custom-gallery-lightbox__previous { left: 2px; } .custom-gallery-lightbox__next { right: 2px; } .custom-gallery-lightbox__close { top: 5px; right: 5px; width: 45px; height: 45px; font-size: 21px; } }

@media screen and (max-width: 480px) { .custom-gallery-item { height: 280px !important; } }

@media screen and (max-width: 767px) { .custom-gallery-header { margin: 0 auto 38px; text-align: center; } .custom-gallery-eyebrow { justify-content: center; } .custom-gallery-title, .custom-gallery-intro { margin-right: auto; margin-left: auto; } }

/* ================================================== VALEURS ET ENGAGEMENTS — MADY PEINTURE  ================================================== */
.values-mady-peinture { position: relative; width: 100%; padding: 125px 30px; overflow: hidden; background: linear-gradient(180deg, #011C51 0%, #075383 38%, #0b6ca9 100%); }

.values-mady-peinture *, .values-mady-peinture *::before, .values-mady-peinture *::after { box-sizing: border-box; }

.values-mady-peinture__container { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; gap: 100px; }

/* ================================================== COLONNE DE PRÉSENTATION ================================================== */
.values-mady-peinture__presentation { width: 100%; max-width: 520px; }

.values-mady-peinture__eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; color: #FFFFFF; font-family: 'Birthstone'; font-size: 50px; line-height: 1.4; }

.values-mady-peinture__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; margin-bottom: 15px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

.values-mady-peinture__title { max-width: 520px; margin: 0; color: #FFFFFF; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

.values-mady-peinture__intro { max-width: 490px; margin-top: 28px; color: rgba(255, 255, 255, 0.76); font-size: 17px; line-height: 1.8; }

.values-mady-peinture__intro p { margin-top: 0; margin-bottom: 15px; }

.values-mady-peinture__intro p:last-child { margin-bottom: 0; }

/* ================================================== BOUTON ================================================== */
.values-mady-peinture__button-wrapper { margin-top: 40px; }

.values-mady-peinture__button p { margin-bottom: 0px; }

.values-mady-peinture__button { min-height: 58px; padding: 15px 31px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 50px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; color: #011c51 !important; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }

.values-mady-peinture__button:hover { color: #011C51; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; transform: translateY(-3px); box-shadow: 0 16px 35px rgba(0, 9, 35, 0.3); }

/* ================================================== GRILLE DES ENGAGEMENTS ================================================== */
.values-mady-peinture__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 75px; row-gap: 75px; }

/* ================================================== ENGAGEMENT ================================================== */
.values-mady-peinture__item { position: relative; width: 100%; }

.values-mady-peinture__icon-wrapper { position: relative; width: 78px; height: 78px; margin-bottom: 26px; }

.values-mady-peinture__icon-circle { position: absolute; top: 0; right: 0; width: 58px; height: 58px; border-radius: 50%; opacity: 0.25; }

.values-mady-peinture__icon { position: absolute; left: 0; bottom: 0; z-index: 2; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; }

.values-mady-peinture__icon-image { width: 54px; height: 54px; display: block; object-fit: contain; object-position: center; }

/* ================================================== COULEURS DES ICÔNES ================================================== */
.values-mady-peinture__item--blue { color: #0395D8; }

.values-mady-peinture__item--blue .values-mady-peinture__icon-circle { background-color: #17bf80; }

.values-mady-peinture__item--green { color: #15BB99; }

.values-mady-peinture__item--green .values-mady-peinture__icon-circle { background-color: #ccc507; }

.values-mady-peinture__item--yellow { color: #F7B805; }

.values-mady-peinture__item--yellow .values-mady-peinture__icon-circle { background-color: #ff7908; }

.values-mady-peinture__item--pink { color: #EE2272; }

.values-mady-peinture__item--pink .values-mady-peinture__icon-circle { background-color: #f52981; }

/* ================================================== TEXTES ================================================== */
.values-mady-peinture__item-title { margin: 0; color: #FFFFFF; font-size: 25px; line-height: 1.25; letter-spacing: 0.5px; text-transform: uppercase; }

.values-mady-peinture__item-description { max-width: 400px; margin-top: 17px; color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.75; }

.values-mady-peinture__item-description p { margin: 0; }

/* ================================================== TABLETTE ================================================== */
@media screen and (max-width: 1100px) { .values-mady-peinture { padding: 105px 30px; } .values-mady-peinture__container { grid-template-columns: 0.8fr 1.2fr; gap: 60px; } .values-mady-peinture__grid { column-gap: 45px; row-gap: 60px; } .values-mady-peinture__eyebrow { font-size: 50px; } .values-mady-peinture__title { font-size: 42px; } .values-mady-peinture__item-title { font-size: 22px; } }

/* ================================================== TABLETTE VERTICALE ================================================== */
@media screen and (max-width: 850px) { .values-mady-peinture__container { grid-template-columns: 1fr; gap: 75px; } .values-mady-peinture__presentation { max-width: 700px; } .values-mady-peinture__title { max-width: 680px; } .values-mady-peinture__intro { max-width: 650px; } .values-mady-peinture__grid { column-gap: 55px; } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 620px) { .values-mady-peinture { padding: 75px 18px 80px; } .values-mady-peinture__container { gap: 60px; } .values-mady-peinture__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .values-mady-peinture__eyebrow-line { width: 45px; } .values-mady-peinture__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .values-mady-peinture__intro { margin-top: 22px; font-size: 16px; line-height: 1.7; } .values-mady-peinture__button-wrapper { margin-top: 32px; } .values-mady-peinture__button { width: 100%; min-height: 56px; padding: 14px 22px; border-radius: 50px; } .values-mady-peinture__grid { grid-template-columns: 1fr; gap: 48px; } .values-mady-peinture__icon-wrapper { margin-bottom: 22px; } .values-mady-peinture__item-title { font-size: 22px; } .values-mady-peinture__item-description { margin-top: 14px; font-size: 15px; line-height: 1.7; } }

/* ================================================== SERVICES — MADY PEINTURE ================================================== */
.services-mady-peinture { position: relative; width: 100%; padding: 115px 30px 130px; overflow: hidden; background-color: #011C51; }

.services-mady-peinture *, .services-mady-peinture *::before, .services-mady-peinture *::after { box-sizing: border-box; }

.services-mady-peinture__container { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; }

/* ================================================== EN-TÊTE ================================================== */
.services-mady-peinture__header { width: 100%; max-width: 850px; margin-bottom: 58px; }

.services-mady-peinture__eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; color: #FFFFFF; font-family: 'Birthstone'; font-size: 50px; line-height: 1.4; }

.services-mady-peinture__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; border-radius: 50px; margin-bottom: 15px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

.services-mady-peinture__title { max-width: 800px; margin: 0; color: #FFFFFF; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

.services-mady-peinture__intro { max-width: 720px; margin-top: 25px; color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.75; }

.services-mady-peinture__intro p { margin: 0; }

/* ================================================== CONTENEUR DES CARTES ================================================== */
.services-mady-peinture__cards { width: 100%; min-height: 600px; display: flex; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; background-color: #011640; box-shadow: 0 30px 70px rgba(0, 8, 35, 0.35); }

/* ================================================== CARTE ================================================== */
.services-mady-peinture__card { position: relative; min-width: 0; min-height: 600px; flex: 1; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(255, 255, 255, 0.22); transition: flex 0.5s ease; }

.services-mady-peinture__card:last-child { border-right: 0; }

.services-mady-peinture__cards:hover .services-mady-peinture__card { flex: 0.92; }

.services-mady-peinture__cards .services-mady-peinture__card:hover { flex: 1.42; }

/* ================================================== IMAGE ================================================== */
.services-mady-peinture__card-image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.7s ease, filter 0.5s ease; }

.services-mady-peinture__card:hover .services-mady-peinture__card-image { transform: scale(1.07); filter: contrast(1.03); }

/* ================================================== FILTRES DE COULEUR ================================================== */
.services-mady-peinture__card-overlay { position: absolute; inset: 0; z-index: -2; transition: opacity 0.4s ease; }

/* BLEU DU LOGO */
.services-mady-peinture__card--blue .services-mady-peinture__card-overlay { background: linear-gradient(180deg, rgba(22, 131, 102, 0) 0%, rgba(22, 131, 102, 0.15) 48%, rgba(22, 131, 102, 0.98) 100%); }

/* VERT / TURQUOISE DU LOGO */
.services-mady-peinture__card--green .services-mady-peinture__card-overlay { background: linear-gradient(180deg, rgba(199, 170, 9, 0) 0%, rgba(199, 170, 9, 0.15) 48%, rgba(199, 170, 9, 0.98) 100%); }

/* JAUNE / ORANGE DU LOGO */
.services-mady-peinture__card--orange .services-mady-peinture__card-overlay { background: linear-gradient(180deg, rgba(247, 184, 5, 0) 0%, rgba(247, 151, 5, 0.15) 48%, rgba(186, 79, 5, 0.98) 100%); }

/* ROSE / ROUGE DU LOGO */
.services-mady-peinture__card--pink .services-mady-peinture__card-overlay { background: linear-gradient(180deg, rgba(238, 34, 114, 0) 0%, rgba(238, 34, 114, 0.15) 48%, rgba(156, 20, 71, 0.98) 100%); }

.services-mady-peinture__card:hover .services-mady-peinture__card-overlay { opacity: 0.92; }

/* ================================================== CONTENU DES CARTES ================================================== */
.services-mady-peinture__card-content { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 42px 34px 38px; color: #FFFFFF; }

.services-mady-peinture__card-category { margin-bottom: 15px; color: rgba(255, 255, 255, 0.76); font-size: 13px; line-height: 1.3; letter-spacing: 2.6px; text-transform: uppercase; }

.services-mady-peinture__card-title { max-width: 320px; margin: 0; color: #FFFFFF; font-size: 28px; line-height: 1.15; letter-spacing: 0.8px; text-transform: uppercase; }

.services-mady-peinture__card-description { max-width: 340px; max-height: 0; margin-top: 0; overflow: hidden; color: rgba(255, 255, 255, 0.88); font-size: 15px; line-height: 1.65; opacity: 0; transform: translateY(12px); transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease, transform 0.4s ease; }

.services-mady-peinture__card-description p { margin: 0; }

.services-mady-peinture__card:hover .services-mady-peinture__card-description { max-height: 150px; margin-top: 18px; opacity: 1; transform: translateY(0); }

/* ================================================== BOUTON DES CARTES ================================================== */
.services-mady-peinture__card-button { width: max-content; min-height: 48px; max-height: 0; margin-top: 0; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50px; background-color: rgba(1, 28, 81, 0.2); color: #FFFFFF; font-size: 13px; line-height: 1.2; letter-spacing: 1px; font-weight: 600 !important; text-decoration: none; text-transform: uppercase; opacity: 0; transform: translateY(12px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.4s ease, transform 0.4s ease, color 0.25s ease, background-color 0.25s ease; }

.services-mady-peinture__card:hover .services-mady-peinture__card-button { max-height: 48px; margin-top: 25px; opacity: 1; transform: translateY(0); }

.services-mady-peinture__card-button:hover { background-color: #FFFFFF; color: #011C51; }

/* ================================================== RESPONSIVE TABLETTE ================================================== */
@media screen and (max-width: 1100px) { .services-mady-peinture { padding: 100px 25px 110px; } .services-mady-peinture__title { font-size: 43px; } .services-mady-peinture__cards { min-height: 560px; } .services-mady-peinture__card { min-height: 560px; } .services-mady-peinture__card-content { padding: 34px 25px; } .services-mady-peinture__card-title { font-size: 24px; } .services-mady-peinture__card-number { top: 26px; right: 22px; font-size: 46px; } }

/* ================================================== TABLETTE VERTICALE ================================================== */
@media screen and (max-width: 900px) { .services-mady-peinture__cards { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .services-mady-peinture__card, .services-mady-peinture__card--featured, .services-mady-peinture__cards:hover .services-mady-peinture__card, .services-mady-peinture__cards .services-mady-peinture__card:hover { min-height: 500px; flex: none; } .services-mady-peinture__card { border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .services-mady-peinture__card:nth-child(2n) { border-right: 0; } .services-mady-peinture__card:nth-child(3), .services-mady-peinture__card:nth-child(4) { border-bottom: 0; } .services-mady-peinture__card-description { max-height: 150px; margin-top: 18px; opacity: 1; transform: translateY(0); } .services-mady-peinture__card-button { max-height: 48px; margin-top: 25px; opacity: 1; transform: translateY(0); } }

/* ================================================== MOBILE ================================================== */
@media screen and (max-width: 620px) { .services-mady-peinture { padding: 75px 18px 85px; } .services-mady-peinture__header { margin-bottom: 40px; } .services-mady-peinture__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .services-mady-peinture__eyebrow-line { width: 45px; } .services-mady-peinture__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .services-mady-peinture__intro { margin-top: 20px; font-size: 16px; line-height: 1.7; } .services-mady-peinture__cards { display: block; border-radius: 22px; } .services-mady-peinture__card, .services-mady-peinture__card--featured, .services-mady-peinture__cards:hover .services-mady-peinture__card, .services-mady-peinture__cards .services-mady-peinture__card:hover { min-height: 470px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .services-mady-peinture__card:last-child { border-bottom: 0; } .services-mady-peinture__card-content { padding: 32px 24px; } .services-mady-peinture__card-title { font-size: 27px; } .services-mady-peinture__card-description { font-size: 15px; } .services-mady-peinture__card-button { width: 100%; min-height: 50px; border-radius: 50px; } }

/* ================================================== BLOC À PROPOS — MADY PEINTURE  ================================================== */
.about-mady-peinture { position: relative; width: 100%; padding: 120px 30px; overflow: hidden; background-color: #FFFFFF; }

.about-mady-peinture *, .about-mady-peinture *::before, .about-mady-peinture *::after { box-sizing: border-box; }

.about-mady-peinture__container { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: 100px; }

/* ================================================== PARTIE VISUELLE ================================================== */
.about-mady-peinture__visual { position: relative; width: 100%; padding: 0 35px 55px 0; }

.about-mady-peinture__image-wrapper { position: relative; width: 100%; height: 620px; }

.about-mady-peinture__image { position: relative; z-index: 2; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: 28px; box-shadow: 0 25px 60px rgba(1, 28, 81, 0.16); }

/* Rectangle bleu derrière la photo */
.about-mady-peinture__decor { position: absolute; left: -20px; top: -20px; z-index: 1; width: 75%; height: 75%; border-radius: 8px; background-color: #011C51; }

/* ================================================== LOGO ================================================== */
.about-mady-peinture__logo-card { position: absolute; right: 0; bottom: 0; z-index: 4; width: 250px; min-height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 4px solid #FFFFFF; border-radius: 8px; background-color: #011C51; box-shadow: 0 18px 40px rgba(1, 28, 81, 0.22); }

.about-mady-peinture__logo { width: 100%; max-height: 135px; display: block; object-fit: contain; }

/* ================================================== CONTENU ================================================== */
.about-mady-peinture__content { position: relative; width: 100%; max-width: 650px; }

/* EYEBROW */
.about-mady-peinture__eyebrow { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; color: #011c51; font-family: 'Birthstone'; font-size: 50px; line-height: 1.1; }

.about-mady-peinture__eyebrow-line { width: 72px; height: 3px; flex-shrink: 0; margin-bottom: 15px; border-radius: 50px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 22%, #F7B805 47%, #FB680F 68%, #F6283A 84%, #EE2272 100%); }

/* TITRE */
.about-mady-peinture__title { max-width: 650px; margin: 0; color: #011C51; font-size: 40px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

/* TEXTE */
.about-mady-peinture__text { max-width: 620px; margin-top: 30px; color: #33415C; font-size: 17px; line-height: 1.8; }

.about-mady-peinture__text p { margin-top: 0; margin-bottom: 18px; }

.about-mady-peinture__text p:last-child { margin-bottom: 0; }

/* ================================================== LISTE DES SERVICES ================================================== */
.about-mady-peinture__services { width: 100%; margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; }

.about-mady-peinture__service { display: flex; align-items: center; gap: 12px; color: #011C51; font-size: 16px; line-height: 1.4; }

.about-mady-peinture__service-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background-color: #0395D8; box-shadow: 0 0 0 5px rgba(3, 149, 216, 0.1); }

.about-mady-peinture__service:nth-child(2) .about-mady-peinture__service-dot { background-color: #F7B805; box-shadow: 0 0 0 5px rgba(247, 184, 5, 0.12); }

.about-mady-peinture__service:nth-child(3) .about-mady-peinture__service-dot { background-color: #EE2272; box-shadow: 0 0 0 5px rgba(238, 34, 114, 0.1); }

.about-mady-peinture__service:nth-child(4) .about-mady-peinture__service-dot { background-color: #15BB99; box-shadow: 0 0 0 5px rgba(21, 187, 153, 0.1); }

/* ================================================== BOUTON ================================================== */
.about-mady-peinture__button-wrapper { margin-top: 42px; }

.about-mady-peinture__button { position: relative; min-height: 58px; padding: 15px 30px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 50px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; color: #001c52 !important; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 12px 28px rgba(1, 28, 81, 0.18); transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease; }

.about-mady-peinture__button p { margin-bottom: 0px; }

.about-mady-peinture__button:hover { color: #011C51; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; transform: translateY(-3px); box-shadow: 0 17px 34px rgba(1, 28, 81, 0.22); }

/* ================================================== RESPONSIVE TABLETTE ================================================== */
@media screen and (max-width: 1100px) { .about-mady-peinture { padding: 100px 30px; } .about-mady-peinture__container { gap: 65px; } .about-mady-peinture__image-wrapper { height: 540px; } .about-mady-peinture__logo-card { width: 210px; min-height: 130px; } .about-mady-peinture__eyebrow { font-size: 48px; } .about-mady-peinture__title { font-size: 42px; } .about-mady-peinture__services { grid-template-columns: 1fr; } }

/* ================================================== RESPONSIVE MOBILE ET TABLETTE VERTICALE ================================================== */
@media screen and (max-width: 850px) { .about-mady-peinture { padding: 85px 25px; } .about-mady-peinture__container { grid-template-columns: 1fr; gap: 75px; } .about-mady-peinture__visual { max-width: 650px; margin: 0 auto; } .about-mady-peinture__content { max-width: 650px; margin: 0 auto; } .about-mady-peinture__services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================== RESPONSIVE MOBILE ================================================== */
@media screen and (max-width: 600px) { .about-mady-peinture { padding: 70px 18px; } .about-mady-peinture__container { gap: 60px; } .about-mady-peinture__visual { padding: 0 15px 45px 0; } .about-mady-peinture__image-wrapper { height: 420px; } .about-mady-peinture__decor { right: -15px; bottom: -20px; display: none; } .about-mady-peinture__logo-card { right: 0; width: 175px; min-height: 105px; padding: 16px; border-width: 6px; } .about-mady-peinture__logo { max-height: 75px; } .about-mady-peinture__eyebrow { margin-bottom: 16px; gap: 11px; font-size: 43px; } .about-mady-peinture__eyebrow-line { width: 45px; } .about-mady-peinture__title { font-size: 34px; line-height: 1.13; letter-spacing: 1px; } .about-mady-peinture__text { margin-top: 24px; font-size: 16px; line-height: 1.7; } .about-mady-peinture__services { margin-top: 28px; grid-template-columns: 1fr; gap: 15px; } .about-mady-peinture__button-wrapper { margin-top: 34px; } .about-mady-peinture__button { width: 100%; min-height: 56px; padding: 14px 22px; border-radius: 50px; } }

/* ================================================== PETITS ÉCRANS ================================================== */
@media screen and (max-width: 390px) { .about-mady-peinture__image-wrapper { height: 360px; } .about-mady-peinture__logo-card { width: 155px; } .about-mady-peinture__eyebrow { font-size: 38px; } .about-mady-peinture__title { font-size: 30px; } }

/* -------------------------------------------------- HERO ACCUEIL -------------------------------------------------- */
.hero-mady-peinture { position: relative; isolation: isolate; width: 100%; height: 100vh; overflow: hidden; background-color: #011C51; color: #FFFFFF; }

.hero-mady-peinture *, .hero-mady-peinture *::before, .hero-mady-peinture *::after { box-sizing: border-box; }

/* -------------------------------------------------- VIDÉO -------------------------------------------------- */
.hero-mady-peinture__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; background-color: #011C51; }

.hero-mady-peinture__video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* -------------------------------------------------- FILTRE -------------------------------------------------- */
.hero-mady-peinture__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(1, 28, 81, 0.97) 0%, rgba(1, 28, 81, 0.88) 34%, rgba(1, 28, 81, 0.62) 58%, rgba(1, 28, 81, 0.5) 82%, rgba(1, 28, 81, 0.25) 100%); }

/* -------------------------------------------------- CONTENEUR -------------------------------------------------- */
.hero-mady-peinture__container { position: relative; z-index: 1; width: 100%; max-width: 1400px; min-height: 780px; margin: 0 auto; padding: 100px 60px 130px; display: flex; align-items: center; }

.hero-mady-peinture__content { width: 100%; max-width: 820px; }

/* -------------------------------------------------- PETIT TITRE -------------------------------------------------- */
.hero-mady-peinture__eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; color: #FFFFFF; font-size: 55px; line-height: 1.4; font-family: 'Birthstone'; }

.hero-mady-peinture__eyebrow-line { width: 65px; height: 3px; flex-shrink: 0; margin-bottom: 15px; border-radius: 20px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 25%, #F7B805 50%, #FB680F 70%, #EE2272 100%); }

/* -------------------------------------------------- TITRE -------------------------------------------------- */
.hero-mady-peinture__title { max-width: 700px; margin: 0; color: #FFFFFF; font-size: 45px; line-height: 1.08; letter-spacing: 1.5px; text-transform: uppercase; }

/* -------------------------------------------------- INTRODUCTION -------------------------------------------------- */
.hero-mady-peinture__intro { max-width: 720px; margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 19px; font-weight: 400; line-height: 1.75; }

/* -------------------------------------------------- BOUTONS -------------------------------------------------- */
.hero-mady-peinture__buttons { margin-top: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }

.hero-mady-peinture__button { min-height: 56px; padding: 15px 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }

.hero-mady-peinture__button p { margin-bottom: 0px; }

.hero-mady-peinture__button--primary { border: 2px solid transparent; background: linear-gradient(#011C51, #011C51) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; color: #FFFFFF; box-shadow: 0 12px 30px rgba(1, 28, 81, 0.35); }

.hero-mady-peinture__button--primary:hover { color: #011C51; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #0395D8, #15BB99, #F7B805, #FB680F, #EE2272) border-box; transform: translateY(-3px); box-shadow: 0 16px 35px rgba(1, 28, 81, 0.45); }

.hero-mady-peinture__button--secondary { border: 2px solid rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

.hero-mady-peinture__button--secondary:hover { border-color: #FFFFFF; background-color: #FFFFFF; color: #011C51; transform: translateY(-3px); }

/* -------------------------------------------------- LIGNE MULTICOLORE BASSE -------------------------------------------------- */
.hero-mady-peinture__bottom-line { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 7px; background: linear-gradient(90deg, #0395D8 0%, #15BB99 18%, #49B943 32%, #F7B805 47%, #FB680F 63%, #F6283A 78%, #EE2272 100%); }

/* -------------------------------------------------- TABLETTE -------------------------------------------------- */
@media screen and (max-width: 991px) { .hero-mady-peinture { min-height: 720px; } .hero-mady-peinture__container { min-height: 720px; padding: 160px 40px 110px; } .hero-mady-peinture__overlay { background: linear-gradient(90deg, rgba(1, 28, 81, 0.96) 0%, rgba(1, 28, 81, 0.84) 55%, rgba(1, 28, 81, 0.48) 100%); } .hero-mady-peinture__content { max-width: 700px; } .hero-mady-peinture__title { font-size: 52px; } .hero-mady-peinture__intro { font-size: 18px; } }

/* -------------------------------------------------- MOBILE -------------------------------------------------- */
@media screen and (max-width: 767px) { .hero-mady-peinture { min-height: 680px; } .hero-mady-peinture__container { min-height: 680px; padding: 135px 22px 85px; align-items: center; } .hero-mady-peinture__overlay { background: linear-gradient(180deg, rgba(1, 28, 81, 0.85) 0%, rgba(1, 28, 81, 0.8) 45%, rgba(1, 28, 81, 0.6) 100%); } .hero-mady-peinture__video { object-position: 60% center; } .hero-mady-peinture__eyebrow { margin-bottom: 20px; gap: 10px; font-size: 42px; letter-spacing: 1.6px; } .hero-mady-peinture__eyebrow-line { width: 38px; margin-bottom: 15px; } .hero-mady-peinture__title { font-size: 40px; line-height: 1.12; letter-spacing: -0.7px; } .hero-mady-peinture__intro { font-size: 16px; line-height: 1.65; } .hero-mady-peinture__buttons { margin-top: 32px; flex-direction: column; align-items: stretch; } .hero-mady-peinture__button { width: 100%; min-height: 54px; padding: 14px 20px; } .hero-mady-peinture__bottom-line { height: 6px; } }

/* -------------------------------------------------- PETITS MOBILES -------------------------------------------------- */
@media screen and (max-width: 420px) { .hero-mady-peinture__container { padding-right: 18px; padding-left: 18px; } .hero-mady-peinture__title { font-size: 35px; } .hero-mady-peinture__eyebrow-line { width: 28px; } }

/* -------------------------------------------------- RÉDUCTION DES ANIMATIONS -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .hero-mady-peinture__video { display: none; } .hero-mady-peinture__button { transition: none; } }

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