@charset "UTF-8";
@import url(main.css);
div#fullHeight { height: 75vh; }

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

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: #000 !important; }

.mx-1.mx-lg-4.mb-5 { margin-top: 50px !important; }

@media (max-width: 600px) { .sliderLogoContainer.mx-auto { width: 20vw !important; margin-bottom: 5px; margin-top: 95px !important; } }

.logo-footer > .logo_nav { height: 14vh !important; }

.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { border: 2px solid #FFE832 !important; border-radius: 0px !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 #FFE832 !important; border-radius: 0px !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 #FFE832 !important; border-radius: 0px !important; box-shadow: none !important; transition: 0.3s ease; }

4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { box-shadow: none !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0px !important; }

.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative { padding-top: 8rem !important; padding-bottom: 8rem !important; }

.background-image-div-opacity { background-attachment: local !important; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { background-color: transparent !important; border: 2px solid #ffffff !important; border-radius: 0px; color: #ffffff !important; transition: all 0.3s ease; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover { background-color: #FFB800 !important; border-color: #FFB800 !important; color: #ffffff !important; }

.sliderLogoContainer { width: 10vw !important; margin-top: 15px !important; }

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

/*-----------------------------------------------------------------------------------------INTRO---------------------------------------------------------------------------------------------------*/
/* ── Palette ── */
.intro-lbv2 { --lb-yellow: #FFE832; --lb-blue: #3DD9F5; --lb-dark: #111111; --lb-grey: #555555; --lb-bg: #f5f6f8; }

/* ── Section ── */
.intro-lbv2 { background-color: var(--lb-bg); padding: 100px 6%; position: relative; overflow: hidden; }

/* ── Conteneur ── */
.intro-lbv2__container { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 80px; }

/* ── Image ── */
.intro-lbv2__image { flex: 1; position: relative; }

/* Coin décoratif jaune derrière l'image */
.intro-lbv2__image::before { content: ''; position: absolute; bottom: -12px; left: -12px; width: 80px; height: 80px; background: var(--lb-yellow); border-radius: 12px 0 0 0; z-index: 0; }

.intro-lbv2__image img { width: 100%; height: auto; display: block; position: relative; z-index: 1; border-radius: 4px; }

/* ── Contenu ── */
.intro-lbv2__content { flex: 1; max-width: 600px; }

/* ── Surtitle ── */
.intro-lbv2__surtitle { display: flex; align-items: center; gap: 20px; font-size: 13px; letter-spacing: 3px; font-weight: 700; color: var(--lb-dark); margin-bottom: 25px; }

/* Ligne jaune */
.intro-lbv2__line { display: flex; width: 60px; height: 3px; background: var(--lb-yellow); border-radius: 2px; flex-shrink: 0; }

/* ── Titre ── */
.intro-lbv2__title { font-size: 42px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--lb-dark); margin-bottom: 30px; }

/* Mot mis en valeur avec underline jaune */
.intro-lbv2__highlight { position: relative; display: inline-block; color: var(--lb-dark); }

.intro-lbv2__highlight::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 6px; background: var(--lb-yellow); z-index: -1; border-radius: 2px; }

/* ── Texte ── */
.intro-lbv2__text { font-size: 19px; line-height: 1.7; color: var(--lb-grey); margin-bottom: 40px; }

/* ── Bouton ── */
.intro-lbv2__button { display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; background: transparent; border: 2px solid var(--lb-yellow); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--lb-dark); border-radius: 4px; transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; }

.intro-lbv2__button:hover { background: var(--lb-yellow); color: var(--lb-dark); transform: translateY(-2px); }

.intro-lbv2__arrow { font-size: 18px; transition: transform 0.2s ease; }

.intro-lbv2__button:hover .intro-lbv2__arrow { transform: translate(3px, -3px); }

/* ── Responsive ── */
@media (max-width: 992px) { .intro-lbv2__container { flex-direction: column; gap: 50px; text-align: center; } .intro-lbv2__content { max-width: 100%; } .intro-lbv2__title { font-size: 30px; } .intro-lbv2__surtitle { justify-content: center; } .intro-lbv2__button { margin: 0 auto; } }

/*-----------------------------------------------------------------------------------------SERVICES---------------------------------------------------------------------------------------------------*/
/* ── Palette ── */
.services-lb2 { --lb-yellow: #FFE832; --lb-dark: #111111; --lb-grey: #666666; --lb-light: #f7f7f7; --lb-white: #e9ebef; --lb-border: #e8e8e8; }

/* ── Section ── */
.services-lb2 { background-color: var(--lb-white); padding: 80px 6%; }

/* ── Header ── */
.services-lb2__header { text-align: center; margin-bottom: 50px; }

.services-lb2__surtitle { font-size: 17px; font-weight: 600; color: var(--lb-yellow); letter-spacing: 1px; margin-bottom: 12px; }

.services-lb2__title { font-size: 41px; text-transform: uppercase; font-weight: 700; color: var(--lb-dark); line-height: 1.25; margin: 0; }

/* ── Grille ── */
.services-lb2__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* ── Carte ── */
.services-lb2__card { background: var(--lb-white); border: 1px solid var(--lb-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: row; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.07); transition: box-shadow 0.35s ease, transform 0.35s ease; }

.services-lb2__card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.13), 0 28px 60px rgba(0, 0, 0, 0.11); transform: translateY(-4px); }

/* ── Image ── */
.services-lb2__card-image { width: 45%; flex-shrink: 0; overflow: hidden; }

.services-lb2__card-image img { width: 100%; height: 120%; object-fit: cover; display: block; transition: transform 0.4s ease; }

.services-lb2__card:hover .services-lb2__card-image img { transform: scale(1.05); }

/* ── Body ── */
.services-lb2__card-body { padding: 24px 20px; display: flex; background: #fff; flex-direction: column; justify-content: center; gap: 10px; }

/* ── Icône ── */
.services-lb2__card-icon { width: 84px; height: 84px; flex-shrink: 0; }

.services-lb2__card-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Titre carte ── */
.services-lb2__card-title { font-size: 19px; font-weight: 700; color: var(--lb-dark); margin: 0; line-height: 1.3; }

/* ── Texte carte ── */
.services-lb2__card-text { font-size: 17px; line-height: 1.6; color: var(--lb-grey); margin: 0; }

/* ── Lien ── */
.services-lb2__card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lb-dark); text-decoration: none; margin-top: 4px; transition: color 0.2s ease; }

.services-lb2__card-link:hover { color: var(--lb-yellow); }

.services-lb2__card-arrow { transition: transform 0.2s ease; }

.services-lb2__card-link:hover .services-lb2__card-arrow { transform: translateX(4px); }

/* ── Responsive ── */
@media (max-width: 900px) { .services-lb2__grid { grid-template-columns: 1fr; } .services-lb2__card { flex-direction: row; } .services-lb2__card-image { width: 40%; } }

@media (max-width: 580px) { .services-lb2__card { flex-direction: column; } .services-lb2__card-image { width: 100%; height: 200px; } .services-lb2__title { font-size: 26px; } }

/*-----------------------------------------------------------------------------------------REALISATIONS---------------------------------------------------------------------------------------------------*/
/* ── Palette ── */
.projets-lb2 { --lb-yellow: #FFE832; --lb-dark: #111111; --lb-grey: #666666; --lb-white: #ebebef; }

/* ── Section ── */
.projets-lb2 { background-color: var(--lb-white); padding: 70px 6%; }

/* ── Header ── */
.projets-lb2__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; gap: 20px; position: relative; overflow: hidden; min-height: 100px; }

/* ── Left / Right au-dessus du bg ── */
.projets-lb2__header-left, .projets-lb2__header-right { position: relative; z-index: 1; }

/* ── Surtitle ── */
.projets-lb2__surtitle { font-size: 13px; font-weight: 600; color: var(--lb-yellow); letter-spacing: 1px; margin-bottom: 10px; filter: brightness(0.82); }

/* ── Titre ── */
.projets-lb2__title { font-size: 52px; font-weight: 700; color: var(--lb-dark); line-height: 1.2; margin: 0; }

/* ── Bouton contour jaune ── */
.projets-lb2__btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; background: transparent; border: 2px solid var(--lb-yellow); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--lb-dark); border-radius: 4px; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; }

.projets-lb2__btn:hover { background: var(--lb-yellow); color: var(--lb-dark); transform: translateY(-2px); }

.projets-lb2__btn-arrow { transition: transform 0.2s ease; }

.projets-lb2__btn:hover .projets-lb2__btn-arrow { transform: translateX(4px); }

/* ── Grille photos ── */
.projets-lb2__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Item photo ── */
.projets-lb2__item { overflow: hidden; border-radius: 6px; aspect-ratio: 3 / 4; }

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

.projets-lb2__item:hover img { transform: scale(1.06); }

/* ── Responsive ── */
@media (max-width: 768px) { .projets-lb2__header { flex-direction: column; align-items: flex-start; } .projets-lb2__bg-text { font-size: 60px; } .projets-lb2__title { font-size: 26px; } .projets-lb2__grid { grid-template-columns: 1fr; } .projets-lb2__item { aspect-ratio: 16 / 9; } }

/*-----------------------------------------------------------------------------------------PARTENAIRES---------------------------------------------------------------------------------------------------*/
/* ── Palette ── */
.partenaires-lb { --lb-yellow: #FFE832; --lb-dark: #111111; --lb-grey: #555555; --lb-white: #ffffff; --lb-bg: #f7f7f7; --lb-border: #e2e2e2; }

/* ── Section ── */
.partenaires-lb { background-color: var(--lb-bg); padding: 80px 6%; }

/* ── Conteneur principal ── */
.partenaires-lb__container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 80px; /* ✅ garantit que le contenu reste cliquable si un overlay existe ailleurs */ position: relative; z-index: 1; }

/* ── Colonne gauche ── */
.partenaires-lb__left { flex: 1; min-width: 0; }

/* ── Surtitle ── */
.partenaires-lb__surtitle { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: var(--lb-grey); text-transform: uppercase; margin-bottom: 14px; }

/* ── Titre ── */
.partenaires-lb__title { font-size: 36px; font-weight: 800; color: var(--lb-dark); line-height: 1.15; margin-bottom: 20px; text-transform: uppercase; }

/* ── Texte ── */
.partenaires-lb__text { font-size: 18px; line-height: 1.7; color: var(--lb-grey); margin-bottom: 24px; }

/* ── Liste ── */
.partenaires-lb__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.partenaires-lb__list li { font-size: 18px; color: var(--lb-dark); padding-left: 22px; position: relative; font-weight: 500; }

.partenaires-lb__list li::before { content: '✓'; position: absolute; left: 0; color: var(--lb-yellow); font-weight: 700; filter: brightness(0.85); }

/* ── Colonne droite ── */
.partenaires-lb__right { flex: 1; min-width: 0; }

/* ── Grille logos ── */
.partenaires-lb__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; }

/* ── Carte logo (⚠️ maintenant ce sont des <a>) ── */
.partenaires-lb__logo-card { background: var(--lb-white); border: 1px solid var(--lb-border); border-radius: 8px; /* ✅ indispensable pour un <a> : supprime le style lien + rend toute la carte cliquable */ display: flex; text-decoration: none; color: inherit; cursor: pointer; align-items: center; justify-content: center; padding: 32px 24px; transition: box-shadow 0.3s ease, transform 0.3s ease; }

.partenaires-lb__logo-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09); transform: translateY(-2px); }

/* Troisième logo centré sur toute la largeur */
.partenaires-lb__logo-card--wide { grid-column: 1 / -1; }

.partenaires-lb__logo-card img { max-width: 220px; max-height: 60px; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(100%); opacity: 0.7; transition: filter 0.3s ease, opacity 0.3s ease; }

.partenaires-lb__logo-card:hover img { filter: grayscale(0%); opacity: 1; }

/* ✅ si tu as des pseudo-éléments décoratifs sur .partenaires-lb ailleurs, ils ne bloqueront plus les clics */
.partenaires-lb::before, .partenaires-lb::after { pointer-events: none; }

/* ── Responsive ── */
@media (max-width: 900px) { .partenaires-lb__container { flex-direction: column; gap: 50px; align-items: center; text-align: center; } .partenaires-lb__left, .partenaires-lb__right { width: 100%; } .partenaires-lb__title { font-size: 28px; } .partenaires-lb__list { align-items: center; } .partenaires-lb__list li { padding-left: 0; padding-right: 0; text-align: left; display: flex; align-items: center; gap: 8px; } .partenaires-lb__list li::before { position: relative; left: unset; } }

@media (max-width: 480px) { .partenaires-lb__grid { grid-template-columns: 1fr; } .partenaires-lb__logo-card--wide { grid-column: 1; } }

/*-----------------------------------------------------------------------------------------MENUISERIE---------------------------------------------------------------------------------------------------*/
/* ============================== HEADER ACCUEIL LB MENUISERIE ============================== */
.accueil-lb { position: relative; width: 100%; height: 55vh; min-height: 400px; overflow: hidden; background-color: #000; }

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

/* Overlay bois chaud */
.accueil-lb__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.75) 100%); z-index: 1; }

/* Container */
.accueil-lb__container { position: relative; z-index: 2; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 60px; }

/* Logo */
.accueil-lb__logo { display: flex; align-items: center; justify-content: flex-start; }

.accueil-lb__logo img { max-width: 260px; width: 100%; height: auto; }

/* Texte + ligne */
.accueil-lb__text-wrapper { display: flex; align-items: stretch; gap: 60px; }

/* Ligne verticale bois */
.accueil-lb__line { width: 4px; background-color: #d7cb65; border-radius: 2px; flex-shrink: 0; }

/* Titre */
.accueil-lb__text h1 { font-weight: 700; font-size: 35px; color: #ffffff; text-transform: uppercase; line-height: 1.15; margin-bottom: 1.5rem; letter-spacing: 1px; }

/* Description */
.accueil-lb__text p { font-size: clamp(15px, 2vw, 18px); color: #f2f2f2; max-width: 520px; line-height: 1.6; margin: 0; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) { .accueil-lb__container { grid-template-columns: 1fr; gap: 30px; padding: 40px 30px; justify-items: center; text-align: center; } .accueil-lb__logo { justify-content: center; } .accueil-lb__logo img { max-width: 180px; } .accueil-lb__text-wrapper { flex-direction: column; align-items: center; gap: 20px; } .accueil-lb__line { width: 60px; height: 4px; } }

@media (max-width: 600px) { .accueil-lb { height: auto; padding: 80px 0; } .accueil-lb__container { padding: 30px 20px; } .accueil-lb__logo img { max-width: 150px; } }

/*-----------------------------------------------------------------------------------------MENUISERIE INTERIEUR---------------------------------------------------------------------------------------------------*/
.serv-lb-wrapper { width: 100%; margin: 0; padding: 100px 20px; position: relative; overflow: hidden; /* Fond pleine largeur plus élégant */ background: #e9ebef; }

.serv-lb-wrapper > * { position: relative; max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ================= HEADER ================= */
.serv-lb-header { text-align: center; margin-bottom: 80px; position: relative; }

/* Ligne décorative au-dessus */
.serv-lb-header::before { content: ""; width: 80px; height: 3px; background: #FFB800; display: block; margin: 0 auto 25px auto; }

/* Ligne fine sous le titre */
.serv-lb-header::after { content: ""; width: 140px; height: 1px; background: #dcdcdc; display: block; margin: 25px auto 0 auto; }

.serv-lb-header h2 { font-size: 40px; font-weight: 700; color: #1f1f1f; margin: 0 0 20px 0; letter-spacing: 1px; text-transform: uppercase; }

.serv-lb-header p { font-size: 22px; color: #555; line-height: 1.8; margin: 0 auto; max-width: 720px; }

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

/* ================= CARD ================= */
.serv-lb-card { background: #ffffff; border: 1px solid #e5e5e5; padding: 50px 35px; text-align: center; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }

.serv-lb-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); transform: translateY(-6px); }

/* Carte jaune */
.serv-lb-card.serv-lb-card-yellow { background: #FFB800; border-color: #FFB800; color: white; }

.serv-lb-card.serv-lb-card-yellow h3 { color: white; }

.serv-lb-card.serv-lb-card-yellow p { color: rgba(255, 255, 255, 0.95); }

/* ================= ICON ================= */
.serv-lb-card-icon { width: 90px; height: 90px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; }

.serv-lb-card-icon img { width: 150%; height: 150%; object-fit: contain; }

/* ================= TEXT ================= */
.serv-lb-card h3 { font-size: 19px; font-weight: 700; color: #222; margin: 0 0 15px 0; text-transform: uppercase; letter-spacing: 0.5px; }

.serv-lb-card p { font-size: 14px; color: #666; line-height: 1.7; margin: 0; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) { .serv-lb-wrapper { padding: 80px 20px; } .serv-lb-header h2 { font-size: 32px; } .serv-lb-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { .serv-lb-wrapper { padding: 70px 16px; } .serv-lb-header h2 { font-size: 28px; } .serv-lb-grid { grid-template-columns: 1fr; } }

@media (max-width: 480px) { .serv-lb-wrapper { padding: 60px 14px; } .serv-lb-header h2 { font-size: 24px; } }

/*-----------------------------------------------------------------------------------------MENUISERIE EXTERIEUR---------------------------------------------------------------------------------------------------*/
.menuis-extlb-wrapper { width: 100%; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgizCcesudNUBlI4ChHwOBFJByu02%2Fimages%2FDesign_sans_titre_-_2026-02-25T144735712_fsm7.webp"); background-size: cover; background-position: center; background-attachment: fixed; position: relative; min-height: 470px; display: flex; align-items: center; }

.menuis-extlb-overlay { background: rgba(0, 0, 0, 0.55); width: 100%; padding: 80px 20px; display: flex; align-items: center; }

.menuis-extlb-container { width: 100%; max-width: 1300px; /* élargi légèrement */ margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; /* cartes plus larges */ gap: 70px; align-items: center; /* centrage vertical propre */ }

.menuis-extlb-content { color: white; transform: translateY(0); /* supprime décalage */ display: flex; flex-direction: column; justify-content: center; }

.menuis-extlb-content h2 { font-size: 40px; font-weight: 700; color: white; margin: 0 0 20px 0; text-transform: uppercase; line-height: 1.3; }

.menuis-extlb-content > p { font-size: 19px; color: rgba(255, 255, 255, 0.85); line-height: 1.8; margin: 0; }

.menuis-extlb-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }

.menuis-extlb-card { background: rgba(0, 0, 0, 0.3); border: 2px solid white; padding: 55px 55px; /* plus large pour effet carré */ min-height: 260px; /* hauteur fixe pour effet plus carré */ display: flex; flex-direction: column; justify-content: center; transition: all 0.3s ease; backdrop-filter: blur(2px); }

.menuis-extlb-card h3 { font-size: 21px; font-weight: 700; text-transform: uppercase; color: #FFB800; margin: 0 0 15px 0; line-height: 1.4; }

.menuis-extlb-card p { font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin: 0; }

/* Responsive - Tablette */
@media (max-width: 1024px) { .menuis-extlb-overlay { padding: 60px 20px; } .menuis-extlb-container { grid-template-columns: 1fr; gap: 40px; text-align: center; } .menuis-extlb-content { transform: translateY(0); align-items: center; } .menuis-extlb-content h2 { font-size: 32px; } .menuis-extlb-content > p { font-size: 13px; } .menuis-extlb-cards-grid { gap: 25px; } .menuis-extlb-card { padding: 40px 35px; min-height: auto; } .menuis-extlb-card h3 { font-size: 17px; } .menuis-extlb-card p { font-size: 12px; } }

/* Responsive - Mobile */
@media (max-width: 768px) { .menuis-extlb-wrapper { min-height: auto; } .menuis-extlb-overlay { padding: 50px 16px; } .menuis-extlb-container { gap: 30px; text-align: center; } .menuis-extlb-content h2 { font-size: 28px; margin-bottom: 15px; } .menuis-extlb-content > p { font-size: 12px; line-height: 1.6; } .menuis-extlb-cards-grid { grid-template-columns: 1fr; gap: 20px; } .menuis-extlb-card { padding: 30px 25px; } .menuis-extlb-card h3 { font-size: 16px; margin-bottom: 12px; } .menuis-extlb-card p { font-size: 11px; } }

@media (max-width: 480px) { .menuis-extlb-overlay { padding: 40px 14px; } .menuis-extlb-container { gap: 25px; text-align: center; } .menuis-extlb-content h2 { font-size: 24px; } .menuis-extlb-content > p { font-size: 11px; } .menuis-extlb-cards-grid { gap: 16px; } .menuis-extlb-card { padding: 25px 20px; } .menuis-extlb-card h3 { font-size: 15px; } .menuis-extlb-card p { font-size: 10px; } }

/*-----------------------------------------------------------------------------------------INTRO PAGE---------------------------------------------------------------------------------------------------*/
.intro-menuilb-wrapper { width: 100%; background-color: #e9ebef; padding: 100px 20px; position: relative; overflow: hidden; }

.intro-menuilb-wrapper::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(230, 194, 0, 0.08) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.intro-menuilb-container { width: 100%; max-width: 950px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }

.intro-menuilb-label { display: inline-block; font-size: 12px; font-weight: 600; color: #E6C200; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; }

.intro-menuilb-label::before { content: ''; display: inline-block; width: 30px; height: 2px; background-color: #E6C200; margin-right: 12px; vertical-align: middle; }

.intro-menuilb-label::after { content: ''; display: inline-block; width: 30px; height: 2px; background-color: #E6C200; margin-left: 12px; vertical-align: middle; }

.intro-menuilb-title { font-size: 48px; font-weight: 700; color: #222; margin: 0 0 25px 0; line-height: 1.3; }

.intro-menuilb-divider { width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #E6C200, transparent); margin: 0 auto 30px; }

.intro-menuilb-text { font-size: 19px; color: #555; line-height: 1.9; margin: 0 0 45px 0; }

.intro-menuilb-button { display: inline-block; padding: 14px 45px; background-color: white; color: #222; text-decoration: none; font-size: 14px; font-weight: 600; border: 2px solid #E6C200; border-radius: 3px; transition: all 0.4s ease; position: relative; overflow: hidden; }

.intro-menuilb-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: #E6C200 !important; transition: left 0.4s ease; z-index: -1; }

.intro-menuilb-button:hover { color: white; border-color: #E6C200; background-color: #E6C200 !important; }

.intro-menuilb-button:hover::before { left: 0; }

/* Responsive - Tablette */
@media (max-width: 1024px) { .intro-menuilb-wrapper { padding: 80px 20px; } .intro-menuilb-wrapper::before { width: 350px; height: 350px; top: -30%; right: -5%; } .intro-menuilb-title { font-size: 36px; margin-bottom: 20px; } .intro-menuilb-text { font-size: 15px; margin-bottom: 35px; } .intro-menuilb-button { padding: 12px 40px; font-size: 13px; } }

/* Responsive - Mobile */
@media (max-width: 768px) { .intro-menuilb-wrapper { padding: 60px 16px; } .intro-menuilb-wrapper::before { width: 250px; height: 250px; top: -20%; right: -15%; opacity: 0.5; } .intro-menuilb-container { max-width: 100%; } .intro-menuilb-label { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 12px; } .intro-menuilb-label::before, .intro-menuilb-label::after { width: 20px; margin-right: 8px; margin-left: 8px; } .intro-menuilb-title { font-size: 28px; margin-bottom: 15px; } .intro-menuilb-divider { margin-bottom: 25px; } .intro-menuilb-text { font-size: 14px; line-height: 1.8; margin-bottom: 30px; } .intro-menuilb-button { padding: 11px 35px; font-size: 12px; } }

@media (max-width: 480px) { .intro-menuilb-wrapper { padding: 50px 14px; } .intro-menuilb-wrapper::before { width: 180px; height: 180px; top: -10%; right: -20%; } .intro-menuilb-label { font-size: 10px; } .intro-menuilb-label::before, .intro-menuilb-label::after { width: 15px; margin-right: 6px; margin-left: 6px; } .intro-menuilb-title { font-size: 22px; margin-bottom: 12px; } .intro-menuilb-text { font-size: 13px; margin-bottom: 25px; } .intro-menuilb-button { padding: 10px 30px; font-size: 11px; } }

/*-----------------------------------------------------------------------------------------FACEBOOK---------------------------------------------------------------------------------------------------*/
.facebook-lb { background: #e9ebef; padding: 120px 20px; text-align: center; position: relative; overflow: hidden; }

.facebook-lb::before { content: ''; position: absolute; top: -40%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(230, 194, 0, 0.06) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.facebook-lb::after { content: ''; position: absolute; bottom: -30%; right: -5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(47, 107, 79, 0.05) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.facebook-lb-container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

.facebook-lb-header { margin-bottom: 70px; }

.facebook-lb-top { color: #E6C200; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 15px; display: inline-block; padding: 8px 20px; background: rgba(230, 194, 0, 0.1); border-radius: 20px; border: 1px solid rgba(230, 194, 0, 0.3); }

.facebook-lb h2 { font-size: 52px; font-weight: 700; color: #2f2f2f; margin: 20px 0 20px; line-height: 1.3; }

.facebook-lb-header > p { font-size: 17px; color: #666; margin: 0; line-height: 1.8; max-width: 700px; margin: 0 auto; }

.facebook-lb-icons { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }

.facebook-lb-item { text-decoration: none; color: inherit; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; display: flex; flex-direction: column; align-items: center; }

.facebook-lb-item::before { content: ''; position: absolute; inset: -20px; background: radial-gradient(circle at 30% 30%, rgba(230, 194, 0, 0.1), transparent 70%); border-radius: 50%; opacity: 0; transition: opacity 0.4s ease; z-index: -1; }

.facebook-lb-item:hover { transform: translateY(-12px); }

.facebook-lb-item:hover::before { opacity: 1; }

.facebook-lb-icon { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; background: transparent; border-radius: 16px; box-shadow: none; border: 2px solid transparent; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: visible; }

.facebook-lb-icon::before { content: ''; position: absolute; inset: -15px; background: radial-gradient(circle at 30% 30%, rgba(230, 194, 0, 0.45), transparent 70%); border-radius: 50%; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; z-index: -1; }

.facebook-lb-item:hover .facebook-lb-icon::before { opacity: 1; transform: scale(1.15); }

.facebook-lb-icon img { width: 130px; height: auto; object-fit: contain; transition: transform 0.4s ease; }

.facebook-lb-item:hover .facebook-lb-icon img { transform: scale(1.1); }

.facebook-lb-item span { display: block; font-size: 20px; font-weight: 700; color: #2f2f2f; margin-top: 5px; transition: color 0.3s ease; }

.facebook-lb-item::after { content: 'Nous suivre'; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: #E6C200; text-transform: uppercase; letter-spacing: 1px; opacity: 0; transition: all 0.4s ease; }

.facebook-lb-item:hover::after { bottom: -45px; opacity: 1; }

/* Responsive - Tablette */
@media (max-width: 1024px) { .facebook-lb { padding: 100px 20px; } .facebook-lb h2 { font-size: 40px; } .facebook-lb-header > p { font-size: 15px; } .facebook-lb-icon { width: 200px; height: 200px; margin-bottom: 20px; } .facebook-lb-icon img { width: 85px; } .facebook-lb-item span { font-size: 18px; } }

/* Responsive - Mobile */
@media (max-width: 768px) { .facebook-lb { padding: 80px 16px; } .facebook-lb::before { width: 280px; height: 280px; top: -30%; left: -15%; } .facebook-lb::after { width: 250px; height: 250px; bottom: -20%; right: -10%; } .facebook-lb-header { margin-bottom: 50px; } .facebook-lb-top { font-size: 11px; padding: 6px 16px; margin-bottom: 12px; } .facebook-lb h2 { font-size: 32px; margin: 15px 0; } .facebook-lb-header > p { font-size: 14px; } .facebook-lb-icons { gap: 30px; } .facebook-lb-icon { width: 180px; height: 180px; margin-bottom: 18px; } .facebook-lb-icon img { width: 75px; } .facebook-lb-item span { font-size: 16px; } .facebook-lb-item::after { bottom: -25px; font-size: 10px; } .facebook-lb-item:hover::after { bottom: -38px; } }

@media (max-width: 480px) { .facebook-lb { padding: 70px 14px; } .facebook-lb::before { width: 200px; height: 200px; top: -25%; left: -20%; } .facebook-lb::after { width: 180px; height: 180px; bottom: -15%; right: -15%; } .facebook-lb-header { margin-bottom: 40px; } .facebook-lb-top { font-size: 10px; padding: 5px 14px; } .facebook-lb h2 { font-size: 26px; margin: 12px 0; } .facebook-lb-header > p { font-size: 13px; line-height: 1.6; } .facebook-lb-icons { gap: 20px; } .facebook-lb-icon { width: 160px; height: 160px; margin-bottom: 15px; border-radius: 12px; } .facebook-lb-icon img { width: 65px; } .facebook-lb-item span { font-size: 15px; } .facebook-lb-item::after { bottom: -20px; font-size: 9px; } .facebook-lb-item:hover::after { bottom: -33px; } }

/*-----------------------------------------------------------------------------------------CLOISON---------------------------------------------------------------------------------------------------*/
.case-cartelb-wrapper { width: 100%; padding: 120px 20px 10px 20px; position: relative; overflow: hidden; /* Nouvelle image de fond */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgizCcesudNUBlI4ChHwOBFJByu02%2Fimages%2FLB_Plaquiste_Menuiserie_P_3_4itn.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Overlay pour lisibilité */
.case-cartelb-wrapper::before { content: ""; position: absolute; inset: 0; background: #f7f7f7; z-index: 0; }

.case-cartelb-container { width: 100%; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: flex-start; position: relative; z-index: 1; }

.case-cartelb-title { font-size: 48px; font-weight: 700; color: #2a2a28; margin: 0 0 60px 0; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.5px; }

.case-cartelb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 42px 50px; }

.case-cartelb-stat-item { display: flex; gap: 26px; align-items: flex-start; }

/* ============================= CARRÉS SIMPLES (sans coupé) ============================= */
.case-cartelb-stat-number-box { width: 90px; height: 90px; min-width: 90px; display: flex; align-items: center; justify-content: center; border: 1px solid #d5d0ca; background: transparent; }

.case-cartelb-stat-number { font-size: 42px; font-weight: 700; color: #2a2a28; margin: 0; }

.case-cartelb-stat-title { font-size: 17px; font-weight: 700; color: #2a2a28; margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 0.9px; line-height: 1.35; }

.case-cartelb-stat-text { font-size: 16px; color: #5a5a54; line-height: 1.7; margin: 0; }

/* ============================= IMAGE DROITE SIMPLE ============================= */
.case-cartelb-image-wrapper { width: 100%; display: flex; justify-content: flex-end; }

.case-cartelb-image { width: 100%; max-width: 520px; aspect-ratio: 3 / 4; overflow: hidden; }

.case-cartelb-image img { width: 100%; height: 80%; object-fit: cover; display: block; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) { .case-cartelb-container { grid-template-columns: 1fr; gap: 50px; } .case-cartelb-image-wrapper { order: -1; justify-content: center; } .case-cartelb-title { text-align: center; /* centre le gros titre */ } }

@media (max-width: 768px) { .case-cartelb-wrapper { padding: 80px 16px 60px 16px; /* réduit le bas */ } .case-cartelb-title { font-size: 32px; margin-bottom: 40px; text-align: center; /* centre le titre */ } .case-cartelb-stats { grid-template-columns: 1fr; gap: 30px; } .case-cartelb-image { max-width: 100%; aspect-ratio: 16 / 9; } }

@media (max-width: 480px) { .case-cartelb-wrapper { padding: 60px 14px 50px 14px; /* encore plus compact */ } .case-cartelb-title { font-size: 26px; margin-bottom: 50px; text-align: center; /* centre le titre */ } .case-cartelb-stat-number-box { width: 60px; height: 60px; min-width: 60px; } .case-cartelb-stat-number { font-size: 26px; } }

.platre-lb-wrapper { width: 100%; background-color: #e9ebef; padding: 100px 20px; position: relative; overflow: hidden; }

.platre-lb-wrapper::before { content: ''; position: absolute; top: 50px; right: 5%; width: 80px; height: 80px; background: linear-gradient(135deg, #E6C200 0%, transparent 70%); border-radius: 50%; opacity: 0.15; z-index: 0; }

.platre-lb-wrapper::after { content: ''; position: absolute; bottom: 80px; left: 3%; width: 60px; height: 60px; background: linear-gradient(135deg, #E6C200 0%, transparent 70%); border-radius: 50%; opacity: 0.1; z-index: 0; }

.platre-lb-container { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }

.platre-lb-image-wrapper { width: 100%; display: flex; justify-content: flex-start; position: relative; }

.platre-lb-image-wrapper::before { content: ''; position: absolute; top: -15px; left: -15px; width: 30px; height: 30px; border-top: 2px solid #E6C200; border-left: 2px solid #E6C200; opacity: 0.6; z-index: 2; }

.platre-lb-image-wrapper::after { content: ''; position: absolute; bottom: -15px; right: -15px; width: 30px; height: 30px; border-bottom: 2px solid #E6C200; border-right: 2px solid #E6C200; opacity: 0.6; z-index: 2; }

.platre-lb-image { width: 100%; max-width: 650px; aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); position: relative; z-index: 1; }

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

.platre-lb-content { display: flex; flex-direction: column; }

.platre-lb-label { font-size: 12px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 15px 0; }

.platre-lb-title { font-size: 48px; font-weight: 700; color: #2a2a28; margin: 0 0 30px 0; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.5px; }

.platre-lb-divider { width: 60px; height: 3px; background-color: #E6C200; margin: 0 0 30px 0; }

.platre-lb-description { font-size: 19px; color: #555; line-height: 1.8; margin: 0 0 50px 0; }

.platre-lb-cta { display: inline-block; padding: 15px 50px; background-color: #E6C200; color: #2a2a28; text-decoration: none; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: all 0.4s ease; border: 2px solid #E6C200; border-radius: 2px; width: fit-content; }

.platre-lb-cta:hover { background-color: transparent; color: #E6C200; border-color: #E6C200; }

/* Responsive - Tablette */
@media (max-width: 1024px) { .platre-lb-wrapper { padding: 80px 20px; } .platre-lb-container { grid-template-columns: 1fr; gap: 50px; } .platre-lb-image-wrapper { justify-content: center; } .platre-lb-content { text-align: center; align-items: center; } .platre-lb-divider { margin-left: auto; margin-right: auto; } }

/* Responsive - Mobile */
@media (max-width: 768px) { .platre-lb-wrapper { padding: 60px 16px; } .platre-lb-container { gap: 40px; } .platre-lb-image-wrapper { justify-content: center; } .platre-lb-content { text-align: center; align-items: center; } .platre-lb-title { font-size: 32px; } .platre-lb-divider { margin-left: auto; margin-right: auto; } }

@media (max-width: 480px) { .platre-lb-wrapper { padding: 50px 14px; } .platre-lb-container { gap: 30px; } .platre-lb-content { text-align: center; align-items: center; } .platre-lb-title { font-size: 26px; } .platre-lb-divider { margin-left: auto; margin-right: auto; } }

/*-----------------------------------------------------------------------------------------FAUX PLAFONDS---------------------------------------------------------------------------------------------------*/
.faux-plafonds-cards-lb { width: 100%; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgizCcesudNUBlI4ChHwOBFJByu02%2Fimages%2FLB_Plaquiste_Menuiserie_P_4_36ax.webp"); background-size: cover; background-position: center; background-attachment: scroll; padding: 100px 20px; position: relative; overflow: hidden; }

.faux-plafonds-cards-lb::before { content: ''; position: absolute; inset: 0; background: rgba(247, 247, 247, 0.85); z-index: 0; }

.faux-plafonds-cards-lb::after { content: ''; position: absolute; bottom: -15%; right: 5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(230, 194, 0, 0.05) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.faux-plafonds-cards-lb__container { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

.faux-plafonds-cards-lb__header { text-align: center; margin-bottom: 70px; }

.faux-plafonds-cards-lb__title { font-size: 44px; font-weight: 700; color: #000; margin-bottom: 25px; text-transform: uppercase; letter-spacing: -0.3px; line-height: 1.2; }

.faux-plafonds-cards-lb__description { font-size: 18px; color: #555; line-height: 1.8; margin-bottom: 60px; max-width: 800px; margin-left: auto; margin-right: auto; }

.faux-plafonds-cards-lb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }

.faux-plafonds-cards-lb__card { background: #fff; padding: 40px 30px; border: 1px solid #e0dcd6; border-radius: 4px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }

.faux-plafonds-cards-lb__card:nth-child(2) { border: 2px solid #E6C200; }

.faux-plafonds-cards-lb__card-icon { width: 100px; height: 100px; background: rgba(230, 194, 0, 0.12); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }

.faux-plafonds-cards-lb__card-icon img { width: 70%; height: 70%; object-fit: contain; }

.faux-plafonds-cards-lb__card-title { font-size: 19px; font-weight: 700; color: #2a2a28; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; }

.faux-plafonds-cards-lb__card-text { font-size: 17px; color: #666; line-height: 1.7; }

/*-----------------------------------------------------------------------------------------JOINT---------------------------------------------------------------------------------------------------*/
.jointoyeur-lb-wrapper { width: 100%; background-color: #f7f7f7; padding: 100px 20px; position: relative; overflow: hidden; }

.jointoyeur-lb-wrapper::before { content: ''; position: absolute; top: 50px; right: 5%; width: 80px; height: 80px; background: #f7f7f7; border-radius: 50%; opacity: 0.15; z-index: 0; }

.jointoyeur-lb-wrapper::after { content: ''; position: absolute; bottom: 80px; left: 3%; width: 60px; height: 60px; background: linear-gradient(135deg, #E6C200 0%, transparent 70%); border-radius: 50%; opacity: 0.1; z-index: 0; }

.jointoyeur-lb-container { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }

/* TEXTE GAUCHE */
.jointoyeur-lb-content { display: flex; flex-direction: column; }

.jointoyeur-lb-title { font-size: 48px; font-weight: 700; color: #2a2a28; margin: 0 0 30px 0; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.5px; }

.jointoyeur-lb-divider { width: 60px; height: 3px; background-color: #E6C200; margin: 0 0 30px 0; }

.jointoyeur-lb-description { font-size: 19px; color: #555; line-height: 1.8; margin: 0; }

/* IMAGE DROITE */
.jointoyeur-lb-image-wrapper { width: 100%; display: flex; justify-content: flex-end; position: relative; }

.jointoyeur-lb-image-wrapper::before { content: ''; position: absolute; top: -15px; left: -15px; width: 30px; height: 30px; border-top: 2px solid #E6C200; border-left: 2px solid #E6C200; opacity: 0.6; z-index: 2; }

.jointoyeur-lb-image-wrapper::after { content: ''; position: absolute; bottom: -15px; right: -15px; width: 30px; height: 30px; border-bottom: 2px solid #E6C200; border-right: 2px solid #E6C200; opacity: 0.6; z-index: 2; }

.jointoyeur-lb-image { width: 100%; max-width: 650px; aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); position: relative; z-index: 1; }

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

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) { .jointoyeur-lb-wrapper { padding: 80px 20px; } .jointoyeur-lb-container { grid-template-columns: 1fr; gap: 50px; } .jointoyeur-lb-content { order: 1; align-items: center; /* centre en flex */ text-align: center; /* centre le texte */ } .jointoyeur-lb-image-wrapper { order: 2; justify-content: center; /* centre l’image */ } .jointoyeur-lb-divider { margin-left: auto; /* centre le trait */ margin-right: auto; } .jointoyeur-lb-title { font-size: 40px; } .jointoyeur-lb-description { font-size: 15px; } }

@media (max-width: 768px) { .jointoyeur-lb-wrapper { padding: 60px 16px; } .jointoyeur-lb-content { align-items: center; text-align: center; } .jointoyeur-lb-image-wrapper { justify-content: center; } .jointoyeur-lb-divider { margin-left: auto; margin-right: auto; } .jointoyeur-lb-title { font-size: 32px; } .jointoyeur-lb-description { font-size: 14px; line-height: 1.7; } }

@media (max-width: 480px) { .jointoyeur-lb-wrapper { padding: 50px 14px; } .jointoyeur-lb-content { align-items: center; text-align: center; } .jointoyeur-lb-image-wrapper { justify-content: center; } .jointoyeur-lb-divider { margin-left: auto; margin-right: auto; } .jointoyeur-lb-title { font-size: 26px; } .jointoyeur-lb-description { font-size: 13px; } }

/*-----------------------------------------------------------------------------------------ETAPES TERRASSE---------------------------------------------------------------------------------------------------*/
/* ================================================== SECTION WRAPPER ================================================== */
.quatre-lb-wrapper { width: 100%; margin: 0; padding: 100px 20px; position: relative; overflow: hidden; background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 50%, #f5f1eb 100%); }

/* Effets décoratifs arrière-plan */
.quatre-lb-wrapper::before { content: ''; position: absolute; top: -40%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 184, 0, 0.08) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

.quatre-lb-wrapper::after { content: ''; position: absolute; bottom: -30%; left: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 184, 0, 0.06) 0%, transparent 70%); border-radius: 50%; z-index: 0; }

/* Contenu centré */
.quatre-lb-wrapper > * { position: relative; max-width: 1200px; margin: 0 auto; z-index: 1; }

/* ================================================== HEADER ================================================== */
.quatre-lb-header { text-align: center; margin-bottom: 80px; position: relative; }

/* Ligne décorative haut */
.quatre-lb-header::before { content: ""; width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #FFB800, transparent); display: block; margin: 0 auto 25px; }

/* Ligne décorative bas */
.quatre-lb-header::after { content: ""; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #dcdcdc, transparent); display: block; margin: 25px auto 0; }

.quatre-lb-header h2 { font-size: 48px; font-weight: 700; color: #1f1f1f; margin: 0 0 15px; letter-spacing: -0.5px; text-transform: uppercase; line-height: 1.2; }

.quatre-lb-header p { font-size: 25px; color: #666; line-height: 1.8; margin: 0 auto; max-width: 720px; font-weight: 300; }

/* ================================================== GRID ================================================== */
.quatre-lb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

/* ================================================== CARD ================================================== */
.quatre-lb-card { background: #ffffff; border: 1px solid #e5e5e5; padding: 50px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; }

/* Numéro */
.quatre-lb-card::before { content: attr(data-step); position: absolute; top: 20px; left: 20px; width: 45px; height: 45px; background: rgba(255, 184, 0, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 25px; color: #FFB800; z-index: 2; }

/* Cartes jaunes (2 et 3) */
.quatre-lb-card:nth-child(2), .quatre-lb-card:nth-child(3) { background: linear-gradient(135deg, #FFB800 0%, #FFC520 100%); border-color: #FFB800; color: white; box-shadow: 0 8px 24px rgba(255, 184, 0, 0.25); }

.quatre-lb-card:nth-child(2)::before, .quatre-lb-card:nth-child(3)::before { background: rgba(255, 255, 255, 0.25); color: white; }

.quatre-lb-card:nth-child(2) h3, .quatre-lb-card:nth-child(3) h3 { color: white; }

.quatre-lb-card:nth-child(2) p, .quatre-lb-card:nth-child(3) p { color: rgba(255, 255, 255, 0.95); }

/* ================================================== ICON ================================================== */
.quatre-lb-card-icon { width: 100px; height: 100px; margin: 20px 0 30px; display: flex; align-items: center; justify-content: center; background: rgba(255, 184, 0, 0.08); }

.quatre-lb-card:nth-child(2) .quatre-lb-card-icon, .quatre-lb-card:nth-child(3) .quatre-lb-card-icon { background: rgba(255, 255, 255, 0.2); }

.quatre-lb-card-icon img { width: 160%; height: 160%; object-fit: contain; }

/* ================================================== TEXT ================================================== */
.quatre-lb-card h3 { font-size: 20px; font-weight: 700; color: #222; margin: 0 0 18px; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.3; }

.quatre-lb-card p { font-size: 17px; color: #666; line-height: 1.8; margin: 0; font-weight: 400; }

/* ================================================== RESPONSIVE ================================================== */
@media (max-width: 1024px) { .quatre-lb-wrapper { padding: 80px 20px; } .quatre-lb-header h2 { font-size: 32px; } .quatre-lb-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .quatre-lb-card { padding: 40px 30px; } }

@media (max-width: 768px) { .quatre-lb-wrapper { padding: 70px 16px; } .quatre-lb-header h2 { font-size: 28px; } .quatre-lb-header p { font-size: 14px; } .quatre-lb-grid { grid-template-columns: 1fr; gap: 25px; } .quatre-lb-card { padding: 35px 25px; } .quatre-lb-card-icon { width: 85px; height: 85px; } .quatre-lb-card h3 { font-size: 18px; } .quatre-lb-card p { font-size: 13px; } }

@media (max-width: 480px) { .quatre-lb-wrapper { padding: 60px 14px; } .quatre-lb-header h2 { font-size: 24px; } .quatre-lb-header p { font-size: 13px; } .quatre-lb-card { padding: 30px 20px; } .quatre-lb-card-icon { width: 75px; height: 75px; } .quatre-lb-card h3 { font-size: 16px; } .quatre-lb-card p { font-size: 12px; } }

/*-------------------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; }

/* ================================================ ISOLATION – Doublage thermique ================================================ */
.isolation_doublage { padding: 120px 40px; background: #f7f7f7; position: relative; overflow: hidden; }

.isolation_doublage::before { content: ''; position: absolute; top: 0; right: 0; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 229, 0, 0.04) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }

.isolation_doublage__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; align-items: center; }

/* ───────── IMAGE GAUCHE ───────── */
.isolation_doublage__image { position: relative; }

.isolation_doublage__image img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ───────── CONTENU DROITE ───────── */
.isolation_doublage__content { position: relative; z-index: 2; }

.isolation_doublage__subtitle { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #000; margin-bottom: 20px; display: block; }

.isolation_doublage__title { font-size: clamp(32px, 4vw, 48px); margin: 0 0 30px 0; text-transform: uppercase; letter-spacing: 1.5px; color: #1a1a1a; font-weight: 600; line-height: 1.2; }

.isolation_doublage__title::after { content: ""; display: block; width: 80px; height: 4px; background: #ffe500; margin-top: 24px; border-radius: 2px; }

.isolation_doublage__description { font-size: 18px; line-height: 1.85; color: #555; margin-bottom: 32px; font-weight: 400; }

.isolation_doublage__description strong { color: #1a1a1a; font-weight: 700; }

.isolation_doublage__features { display: flex; flex-direction: column; gap: 24px; }

.isolation_doublage__feature { padding: 20px; border: 2px solid #1a1a1a; border-radius: 0px; }

.isolation_doublage__feature_title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.isolation_doublage__feature_desc { font-size: 14px; color: #666; line-height: 1.6; margin: 0; }

/* ───────── RESPONSIVE MOBILE (768px et moins) ───────── */
@media (max-width: 768px) { .isolation_doublage { padding: 80px 24px; } .isolation_doublage__inner { grid-template-columns: 1fr; gap: 50px; align-items: center; } .isolation_doublage__image { max-width: 500px; margin: 0 auto; } .isolation_doublage__content { text-align: center; max-width: 100%; margin: 0 auto; } .isolation_doublage__subtitle { margin-bottom: 20px; } .isolation_doublage__title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 24px; } .isolation_doublage__title::after { width: 60px; height: 3px; margin-top: 18px; margin-left: auto; margin-right: auto; } .isolation_doublage__description { font-size: 16px; margin-bottom: 28px; } .isolation_doublage__features { gap: 18px; max-width: 500px; margin: 0 auto; } .isolation_doublage__feature { padding: 18px; text-align: left; } .isolation_doublage__feature_title { font-size: 14px; margin-bottom: 6px; } .isolation_doublage__feature_desc { font-size: 13px; } }

/* ───────── RESPONSIVE PETIT MOBILE (560px et moins) ───────── */
@media (max-width: 560px) { .isolation_doublage { padding: 60px 18px; } .isolation_doublage__inner { gap: 40px; } .isolation_doublage__image { max-width: 100%; } .isolation_doublage__content { text-align: center; } .isolation_doublage__subtitle { font-size: 11px; letter-spacing: 2px; } .isolation_doublage__title { font-size: clamp(20px, 2.8vw, 28px); margin-bottom: 20px; } .isolation_doublage__title::after { width: 50px; height: 3px; margin-top: 16px; } .isolation_doublage__description { font-size: 15px; line-height: 1.75; margin-bottom: 24px; } .isolation_doublage__features { gap: 16px; max-width: 100%; } .isolation_doublage__feature { padding: 16px; border-width: 1.5px; } .isolation_doublage__feature_title { font-size: 13px; } .isolation_doublage__feature_desc { font-size: 12px; } }

/* ───────── RESPONSIVE TRÈS PETIT MOBILE (380px et moins) ───────── */
@media (max-width: 380px) { .isolation_doublage { padding: 45px 16px; } .isolation_doublage__title { font-size: clamp(18px, 2.5vw, 24px); } .isolation_doublage__description { font-size: 14px; } .isolation_doublage__feature { padding: 14px; } }

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