@charset "UTF-8";
@import url(main.css);
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #5da629 !important; }

a.dropdown-item.text-color-fourth { color: #5da629 !important; }

div#contour { border: 2px solid #77a428; border-radius: 20px !important; box-shadow: none !important; transition: 0.3s  ease; }

.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative { border: 2px solid #77a428; border-radius: 20px !important; box-shadow: none !important; transition: 0.3s  ease; }

.mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { border: 2px solid #77a428; border-radius: 20px !important; box-shadow: none !important; transition: 0.3s  ease; }

h5.mb-3 { color: #5da629 !important; }

.mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.175) !important; }

form#formContact { border: 2px solid #77a428; border-radius: 8px; box-shadow: 0 0 4px rgba(119, 164, 40, 0.25), 0 0 8px rgba(119, 164, 40, 0.15); transition: 0.3s; }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.175) !important; }

.b-bloc-divider { border: none !important; border-width: none !important; box-shadow: none !important; background-color: #f8f8f9 !important; }

#inverse > .flex-lg-row-reverse { flex-direction: row !important; }

ul { color: #5da629; }

.slider-with-features-carousel-logo { height: 28vh !important; }

i.bi.bi-instagram.fs-4 { color: #74b935; }

i.bi.bi-facebook.fs-4 { color: #74b935; }

h5.mb-4 { color: #5da329; }

i.bi.bi-geo-alt { color: #74b935; }

i.bi.bi-telephone { color: #74b935; }

#fond.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { margin: 0 !important; width: 100%; margin-bottom: 4rem !important; }

/*------------------- bouton accueil - version verte --------------------------*/
a#phone-analytics-tag-video-bloc { display: inline-block; border: 2px solid #77a428; border-radius: 30px; padding: 10px 28px; color: #fff !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; text-decoration: none; background: #77a428 !important; }

/* Hover + mouvement */
a#phone-analytics-tag-video-bloc:hover, a#phone-analytics-tag-video-bloc:focus, a#phone-analytics-tag-video-bloc:active { background-color: #89c941 !important; border-color: #89c941 !important; transform: translateY(-4px); box-shadow: 0 6px 20px rgba(119, 164, 40, 0.35) !important; }

a#phone-analytics-tag-video-bloc:hover span, a#phone-analytics-tag-video-bloc:hover strong, a#phone-analytics-tag-video-bloc:hover svg { color: #fff !important; fill: #fff !important; }

/*------------------- bouton CTA home page - version verte --------------------------*/
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { display: inline-block; border: 2px solid #77a428; border-radius: 30px; padding: 10px 28px; color: #fff !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; text-decoration: none; background: #77a428 !important; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:focus, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:active { background-color: #89c941 !important; border-color: #89c941 !important; transform: translateY(-4px); box-shadow: 0 6px 20px rgba(119, 164, 40, 0.35); }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover span, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover strong { color: #fff !important; fill: #fff !important; }

/*------------------- bouton nav - version verte --------------------------*/
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { display: inline-block; border: 2px solid #77a428; border-radius: 30px; padding: 10px 28px; color: #77a428 !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; background: transparent !important; }

/* Hover + mouvement */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:focus, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:active { background-color: #89c941 !important; border-color: #89c941 !important; color: #fff !important; transform: translateY(-4px); box-shadow: 0 6px 20px rgba(119, 164, 40, 0.35); }

/* Texte interne */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover span, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover strong, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover svg { color: #fff !important; fill: #fff !important; }

/* ----------------------------------------------------------------------------------------Accueil------------------------------------------------------------------------------------------*/
/* ------------------------------- HERO ACCUEIL JR --------------------------------*/
.accueil-jr { position: relative; width: 100%; min-height: 85vh; padding: 80px 20px; display: flex; align-items: center; justify-content: center; text-align: center; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FxpJPFwsiQXh1ZXvUx5DjpxEPeRH2%2Fimages%2FDesign_sans_titre_-_2025-11-28T161022968_f3f1.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Overlay sombre */
.accueil-jr-overlay { position: absolute; inset: 0; background: rgba(19, 27, 38, 0.78); z-index: 1; }

/* Contenu */
.accueil-jr-content { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; color: #fff; }

/* Logo */
.accueil-jr-logo { margin-bottom: 15px; }

.accueil-jr-logo img { width: 300px; height: auto; object-fit: contain; }

/* TITRE (H1 fusionné) */
.accueil-jr-title { font-size: 3.2rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; margin-top: 10px; }

.accueil-jr-title span { text-transform: none; }

/* Sous-titre intégré au H1 */
.accueil-jr-subtitle-inline { display: block; color: #5DA629; font-size: 1.7rem; margin-top: 5px; font-weight: 700; }

/* Paragraphe */
.accueil-jr-text { font-size: 1.1rem; line-height: 1.7; margin-bottom: 45px; color: rgba(255, 255, 255, 0.9); }

/* Boutons */
.accueil-jr-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

.accueil-jr-btn { padding: 15px 28px; border-radius: 12px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: 0.3s ease; }

/* Bouton principal */
.accueil-jr-btn-primary { background: #5DA629; color: #fff; }

.accueil-jr-btn-primary:hover { background: #4D8C20; }

/* Bouton secondaire */
.accueil-jr-btn-secondary { border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; background: rgba(255, 255, 255, 0.05); }

.accueil-jr-btn-secondary:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.12); }

/* Responsive */
@media (max-width: 768px) { .accueil-jr-title { font-size: 2.5rem; } .accueil-jr-subtitle-inline { font-size: 1.3rem; } .accueil-jr-logo img { width: 180px; } }

/* ----------------------------------------------------------------------------------------Services------------------------------------------------------------------------------------------*/
/* ----------------------------------- SECTION SERVICES — service-jr ----------------------------------- */
/* Fond plein largeur */
.service-jr { width: 100%; background-color: #e7e7e7; padding: 80px 0; text-align: center; }

/* Contenu centré */
.service-jr > * { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* ---------- HEADER ---------- */
.service-jr-header h2 { font-size: 2.6rem; font-weight: 800; margin-bottom: 10px; color: #131B26; }

.service-jr-header p { color: #5b5b5b; font-size: 1.1rem; max-width: 750px; margin: 0 auto 50px auto; }

/* ---------- GRID ---------- */
.service-jr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; max-width: 1300px; margin: auto; }

/* ---------- CARDS ---------- */
.service-jr-card { background: #fff; padding: 30px; border-radius: 20px; transition: 0.3s ease; /* ⭐ permet d’aligner les CTA en bas */ display: flex; flex-direction: column; align-items: center; }

.service-jr-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07); }

/* ---------- ICONES ---------- */
.service-jr-icon { width: 70px; height: 70px; margin: 0 auto 20px; background: linear-gradient(135deg, #DFF2D1, #eefbea); border-radius: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; }

.service-jr-card:hover .service-jr-icon { background: rgba(119, 164, 40, 0.25); }

.service-jr-icon img { width: 60px; height: 60px; object-fit: contain; }

/* ---------- TITRES ---------- */
.service-jr-card h3 { margin-bottom: 10px; font-size: 1.3rem; font-weight: 700; color: #131B26; transition: color 0.3s ease; }

.service-jr-card:hover h3 { color: #77a428; }

/* ---------- TEXTES ---------- */
.service-jr-card p { font-size: 1rem; color: #585858; line-height: 1.5; min-height: 70px; text-align: center; }

/* ---------- CTA ALIGNÉ EN BAS ---------- */
.service-jr-link { display: inline-block; /* ⭐ pousse le bouton en bas pour l’alignement horizontal */ margin-top: auto; padding: 10px 22px; border-radius: 30px; border: 2px solid #77a428; color: #77a428; font-weight: 600; text-decoration: none; transition: all 0.3s ease; background: transparent; }

.service-jr-link:hover { background: #77a428; color: #fff; border-color: #77a428; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(119, 164, 40, 0.25); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) { .service-jr-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } }

@media (max-width: 600px) { .service-jr-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------------------Services menuiseries------------------------------------------------------------------------------------------*/
/* --------------------------- SERVICE JR 2 - STYLE BLOC ---------------------------- */
.service-jr2 { max-width: 1300px; margin: 70px auto; padding: 0 20px; }

/* GRID */
.service-jr2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }

/* CARD */
.service-jr2-card { background: #ffffff; padding: 35px; border-radius: 18px; /* ⭐ Ombre subtile mais plus présente (relief permanent) */ box-shadow: 0 9px 30px rgba(0, 0, 0, 0.18); /* Optionnel mais propre */ transition: 0.3s ease; }

/* ICON */
.service-jr2-icon { width: 70px; height: 70px; background: #eef6e4; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }

.service-jr2-icon img { width: 36px; height: 36px; object-fit: contain; /* Rend ton SVG vert si il est noir à la base */ filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(650%) hue-rotate(41deg) brightness(88%) contrast(86%); }

/* TITRE */
.service-jr2-card h3 { font-size: 1.45rem; font-weight: 800; color: #131B26; margin-bottom: 12px; }

/* DESCRIPTION */
.service-jr2-card p { color: #5b5b5b; font-size: 1.05rem; margin-bottom: 20px; }

/* LISTE */
.service-jr2-card ul { list-style: none; padding-left: 0; }

.service-jr2-card ul li { position: relative; padding-left: 18px; margin-bottom: 8px; color: #3d3d3d; font-size: 1rem; }

/* PUCE VERTE */
.service-jr2-card ul li::before { content: ""; width: 7px; height: 7px; background: #77a428; border-radius: 50%; position: absolute; left: 0; top: 7px; }

/* RESPONSIVE */
@media (max-width: 992px) { .service-jr2-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 650px) { .service-jr2-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------------------Artisan +------------------------------------------------------------------------------------------*/
/* --------------------------------------------------- SECTION ARTISAN MENUISIER — FOND LARGE + BLOC CENTRÉ --------------------------------------------------- */
/* SECTION ARTISAN MENUISIER — fond full width + marge haut/bas */
.artisan-menuisier { width: 100%; background-color: #e7e7e7; /* fond sur toute la largeur */ padding: 80px 0; /* marge haut/bas */ }

/* Contenu centré et limité */
.artisan-menuisier-inner { max-width: 1350px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: center; border-radius: 20px; }

/* TITRE & PARAGRAPHE */
.artisan-menuisier-left h2 { font-size: 2.9rem; font-weight: 800; color: #131B26; margin-bottom: 20px; }

.artisan-menuisier-left > p { font-size: 1.15rem; color: #556070; line-height: 1.6; max-width: 620px; margin-bottom: 35px; }

/* ÉTAPES NUMÉROTÉES */
.artisan-menuisier-step { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }

.artisan-menuisier-number { width: 40px; height: 40px; background: #eef6e4; color: #77a428; border-radius: 12px; font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }

.artisan-menuisier-step h3 { font-size: 1.25rem; font-weight: 700; color: #131B26; margin: 0 0 4px 0; }

.artisan-menuisier-step p { color: #6d7886; margin: 0; font-size: 1rem; }

/* CTA */
.artisan-menuisier-cta { display: inline-block; margin-top: 32px; padding: 15px 40px; border-radius: 14px; font-size: 1.1rem; font-weight: 600; text-decoration: none; background: #77a428; color: #fff; transition: 0.3s ease; box-shadow: 0 6px 18px rgba(119, 164, 40, 0.18); }

.artisan-menuisier-cta:hover { background: #89c941; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(119, 164, 40, 0.25); }

/* IMAGE */
.artisan-menuisier-right img { width: 100%; height: auto; object-fit: cover; border-radius: 28px; }

/* RESPONSIVE */
@media (max-width: 992px) { .artisan-menuisier-inner { grid-template-columns: 1fr; gap: 40px; } .artisan-menuisier-right { order: -1; } .artisan-menuisier-left h2 { font-size: 2.4rem; } .artisan-menuisier-left > p { max-width: 100%; } }

@media (max-width: 600px) { .artisan-menuisier-cta { width: 100%; text-align: center; } }

/* ----------------------------------------------------------------------------------------Prestation isolation------------------------------------------------------------------------------------------*/
/* --------------------------------------------------- SECTION ISOLATION AVANTAGES (style premium) --------------------------------------------------- */
.isolation-avantages { max-width: 1350px; margin: 80px auto; padding: 0 20px; text-align: center; }

/* -------- HEADER -------- */
.isolation-avantages-header .badge { display: inline-block; background: #e8f8e0; color: #77a428; padding: 8px 18px; border-radius: 16px; font-weight: 600; font-size: 1.3rem; margin-bottom: 18px; }

.isolation-avantages-header h2 { font-size: 2.4rem; font-weight: 800; color: #131B26; margin-bottom: 15px; }

.isolation-avantages-header p { font-size: 1.1rem; color: #556070; max-width: 700px; margin: 0 auto 50px auto; }

/* -------- GRID -------- */
.isolation-avantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }

/* -------- CARD -------- */
.isolation-avantages-card { background: #fff; padding: 30px; border-radius: 18px; text-align: left; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }

/* Icon box */
.icon-box { width: 60px; height: 60px; background: #eef6e4; display: flex; align-items: center; justify-content: center; border-radius: 14px; margin-bottom: 18px; }

.icon-box img { width: 60px; height: 60px; object-fit: contain; filter: none !important; }

/* Title */
.isolation-avantages-card h3 { font-size: 1.25rem; font-weight: 700; color: #131B26; margin-bottom: 8px; }

/* Text */
.isolation-avantages-card p { color: #6d7886; font-size: 1rem; line-height: 1.45; }

/* -------- RESPONSIVE -------- */
@media (max-width: 992px) { .isolation-avantages-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

@media (max-width: 600px) { .isolation-avantages-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------------------Prestation Plaquiste------------------------------------------------------------------------------------------*/
/* --------------------------- SERVICE JR 2 - STYLE BLOC ---------------------------- */
.service-jr2 { max-width: 1300px; margin: 70px auto; padding: 0 20px; }

/* GRID */
.service-jr2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }

/* CARD */
.service-jr2-card { background: #ffffff; padding: 35px; border-radius: 18px; /* ⭐ Ombre subtile mais plus présente (relief permanent) */ box-shadow: 0 9px 30px rgba(0, 0, 0, 0.18); /* Optionnel mais propre */ transition: 0.3s ease; }

/* ICON */
.service-jr2-icon { width: 70px; height: 70px; background: #eef6e4; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }

.service-jr2-icon img { width: 60px; height: 60px; object-fit: contain; /* Filtre retiré */ filter: none !important; }

/* ----- TITRE & DESCRIPTION ----- */
.service-jr2-header { text-align: center; margin-bottom: 60px; }

.service-jr2-header h2 { font-size: 2.4rem; font-weight: 800; color: #131B26; margin-bottom: 15px; }

.service-jr2-header p { font-size: 1.1rem; color: #556070; max-width: 700px; margin: 0 auto; }

/* TITRE */
.service-jr2-card h3 { font-size: 1.45rem; font-weight: 800; color: #131B26; margin-bottom: 12px; }

/* DESCRIPTION */
.service-jr2-card p { color: #5b5b5b; font-size: 1.05rem; margin-bottom: 20px; }

/* LISTE */
.service-jr2-card ul { list-style: none; padding-left: 0; }

.service-jr2-card ul li { position: relative; padding-left: 18px; margin-bottom: 8px; color: #3d3d3d; font-size: 1rem; }

/* PUCE VERTE */
.service-jr2-card ul li::before { content: ""; width: 7px; height: 7px; background: #77a428; border-radius: 50%; position: absolute; left: 0; top: 7px; }

/* RESPONSIVE */
@media (max-width: 992px) { .service-jr2-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 650px) { .service-jr2-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------------------Presta domotique------------------------------------------------------------------------------------------*/
/* --------------------------------------------------- DOMOTIQUE JR — Structure en 6 cartes modernes --------------------------------------------------- */
.domotique-jr { max-width: 1300px; margin: 70px auto; padding: 0 20px; }

/* GRID */
.domotique-jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }

/* CARD */
.domotique-jr-card { background: #ffffff; padding: 35px; border-radius: 18px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }

/* ICON */
.domotique-jr-icon { width: 70px; height: 70px; background: #eef6e4; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }

.domotique-jr-icon img { width: 60px; height: 60px; object-fit: contain; filter: none; }

.domotique-jr-header { text-align: center; margin-bottom: 60px; }

.domotique-jr-header h2 { font-size: 2.6rem; font-weight: 800; color: #131B26; margin-bottom: 12px; }

.domotique-jr-header p { font-size: 1.15rem; color: #556070; max-width: 700px; margin: 0 auto; }

/* TITRE */
.domotique-jr-card h3 { font-size: 1.35rem; font-weight: 800; color: #131B26; margin-bottom: 12px; }

/* TEXTE */
.domotique-jr-card p { color: #556070; font-size: 1.05rem; line-height: 1.55; }

/* RESPONSIVE */
@media (max-width: 992px) { .domotique-jr-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 650px) { .domotique-jr-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------------------Réseaux------------------------------------------------------------------------------------------*/
/* ------------------------------ SECTION RÉSEAUX — JR MENUISERIES ------------------------------ */
.reseaux-jr { background: #e7e7e7; padding: 80px 20px; text-align: center; }

.reseaux-jr-top { color: #77a428; font-size: 1rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; }

.reseaux-jr h2 { font-size: 2.6rem; font-weight: 800; color: #131B26; margin-bottom: 10px; }

.reseaux-jr p { font-size: 1.1rem; color: #555; margin-bottom: 50px; }

.reseaux-jr-icons { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }

.reseaux-jr-item { text-decoration: none; color: #131B26; text-align: center; transition: 0.3s ease; }

/* Cercle */
.reseaux-jr-icon { width: 150px; height: 150px; border-radius: 50%; border: 3px solid #77a428; background: #fff; display: flex; justify-content: center; align-items: center; position: relative; transition: 0.3s ease; }

/* IMG normales */
.reseaux-jr-icon .icon-default { width: 70px; height: 70px; object-fit: contain; transition: opacity 0.3s ease; }

/* IMG hover (cachée au départ) */
.reseaux-jr-icon .icon-hover { width: 80px; height: 80px; object-fit: contain; position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity 0.3s ease; }

/* Swap au hover */
.reseaux-jr-item:hover .icon-default { opacity: 0; }

.reseaux-jr-item:hover .icon-hover { opacity: 1; }

/* Effet hover */
.reseaux-jr-item:hover .reseaux-jr-icon { transform: scale(1.08); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); border-color: #6a9222; }

.reseaux-jr-item:hover span { color: #77a428; }

/* Text */
.reseaux-jr-item span { display: block; margin-top: 12px; font-size: 1.2rem; font-weight: 600; transition: 0.3s ease; }

/* ----------------------------------------------------------------------------------------Carte------------------------------------------------------------------------------------------*/
/* ----------------------------------- SECTION LOCALISATION — JR MENUISERIES ----------------------------------- */
.localisation-jr { display: flex; align-items: center; justify-content: center; gap: 200px; padding: 70px 20px; background-color: #F8F8F9; }

/* ------- COLONNE GAUCHE ------- */
.localisation-jr-left { max-width: 520px; }

.localisation-jr-left h2 { font-size: 2.6rem; font-weight: 800; color: #12212E; margin-bottom: 15px; }

.localisation-jr-separator { width: 120px; height: 4px; background: #77a428; border-radius: 10px; margin-bottom: 25px; }

.localisation-jr-left p { font-size: 1.13rem; line-height: 1.55; color: #3d3d3d; margin-bottom: 35px; }

/* ------- INFOS LIGNES ------- */
.localisation-jr-item { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; font-size: 1.1rem; color: #12212E; font-weight: 500; }

.localisation-jr-item img { width: 28px; height: 28px; filter: invert(61%) sepia(38%) saturate(800%) hue-rotate(45deg) brightness(90%) contrast(90%); /* icônes en vert */ }

/* ------- CTA ------- */
.localisation-jr-cta { display: inline-block; padding: 14px 32px; border: 2px solid #77a428; border-radius: 50px; font-size: 1.1rem; font-weight: 700; color: #77a428; text-decoration: none; transition: 0.3s ease; margin-top: 15px; }

.localisation-jr-cta:hover { background: #77a428; color: #fff; }

/* ------- COLONNE DROITE ------- */
.localisation-jr-right img { width: 105%; max-width: 580px; border-radius: 14px; display: block; }

/* ----------------------------------- RESPONSIVE ----------------------------------- */
@media (max-width: 950px) { .localisation-jr { flex-direction: column; text-align: center; gap: 40px; } .localisation-jr-left { max-width: 90%; } .localisation-jr-item { justify-content: center; } .localisation-jr-right img { max-width: 75%; margin: auto; } }

@media (max-width: 500px) { .localisation-jr-left h2 { font-size: 2.1rem; } .localisation-jr-cta { padding: 12px 28px; font-size: 1rem; } }

/*-------------------Galerie Custom--------------------------*/
#custom-gallery { padding-top: 40px; }

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

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

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

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

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

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

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

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

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

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

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

#nextButton:hover { opacity: 0.7; }

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

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

#prevButton:hover { opacity: 0.7; }

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

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

#exitButton:hover { opacity: 0.7; }

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

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

/* ----------------------------------------------------------------------------------------Carte sans cta------------------------------------------------------------------------------------------*/
/* ----------------------------------- SECTION CARTE — JR MENUISERIES ----------------------------------- */
.carte-bloc { display: flex; align-items: center; justify-content: center; gap: 200px; padding: 70px 20px; background-color: #F8F8F9; }

/* ------- IMAGE GAUCHE ------- */
.carte-bloc-right img { width: 105%; max-width: 580px; border-radius: 14px; display: block; }

/* ------- TEXTE DROITE ------- */
.carte-bloc-left { max-width: 520px; }

.carte-bloc-left h2 { font-size: 2.6rem; font-weight: 800; color: #12212E; margin-bottom: 15px; }

.carte-bloc-separator { width: 120px; height: 4px; background: #77a428; border-radius: 10px; margin-bottom: 25px; }

.carte-bloc-left p { font-size: 1.13rem; line-height: 1.55; color: #3d3d3d; margin-bottom: 35px; }

/* ------- INFOS ------- */
.carte-bloc-item { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; font-size: 1.1rem; color: #12212E; font-weight: 500; }

.carte-bloc-item img { width: 28px; height: 28px; filter: invert(61%) sepia(38%) saturate(800%) hue-rotate(45deg) brightness(90%) contrast(90%); }

/* ----------------------------------- RESPONSIVE ----------------------------------- */
@media (max-width: 950px) { .carte-bloc { flex-direction: column; text-align: center; gap: 40px; } .carte-bloc-left { max-width: 90%; } .carte-bloc-item { justify-content: center; } .carte-bloc-right img { max-width: 75%; margin: auto; width: 100%; } }

@media (max-width: 500px) { .carte-bloc-left h2 { font-size: 2.1rem; } }

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