/* Sony Guerdner, location de benne : blocs ET couleurs de HK Service Démolition (hk-3.css + hk-moderne-22.css), classes lbg-, police Gabarito du client. 2026-10-05 */
@font-face{font-family:'Gabarito';src:url('polices/gabarito-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
/* Sony Guerdner – mise en page (d'après « Sony Guerdner Lyon v3 »).
Largeurs de la checklist : --lbg-shell pour l'en-tête et les bandeaux pleine
largeur (gouttière comprise), --lbg-content pour les sections qui ont déjà
leur propre padding. Les deux restent liées : shell = content + 2 × 40 px,
sinon l'en-tête se décale du texte. */
:root {
--lbg-ink: #0F2318;
--lbg-muted: #5B6B60;
--lbg-orange: #E2650F;
--lbg-rust: #B8500B;
--lbg-yellow: #35C67F;
--lbg-line: #E2DED4;
--lbg-cream: #FBF9F4;
--lbg-border: #DDD7C9;
--lbg-placeholder: #CFC9BB;
--lbg-content: 1560px;
--lbg-shell: 1640px;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; font-family: 'Gabarito', system-ui, sans-serif; color: var(--lbg-ink); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4 { margin: 0; font-family: 'Gabarito', sans-serif; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.lbg-site ul, .lbg-site ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--lbg-rust); text-decoration: none; }
a:hover { color: var(--lbg-ink); }
input, textarea, select, button { font-family: 'Gabarito', system-ui, sans-serif; }
img { max-width: 100%; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 90px; }
:focus-visible { outline: 3px solid var(--lbg-yellow); outline-offset: 2px; }
/* Structure */
.lbg-wrap { max-width: var(--lbg-content); margin: 0 auto; }
.lbg-inner { max-width: var(--lbg-shell); margin: 0 auto; padding: 0 40px; }
.lbg-sec { padding: 96px 40px; }
.lbg-sec--flush { padding: 96px 0; }
.lbg-sec--white { background: #FFFFFF; }
.lbg-sec--cream { background: linear-gradient(180deg, #FBF9F4 0%, #F7F4EC 100%); }
.lbg-sec--dark { background: linear-gradient(180deg, #15301F 0%, #181513 100%); color: #FFFFFF; }
.lbg-split { max-width: var(--lbg-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: stretch; }
.lbg-split > *, .lbg-hero__grid > *, .lbg-contact-grid > * { min-width: 0; }
.lbg-stripe { height: 16px; background-image: repeating-linear-gradient(135deg, #0F2318 0 18px, #35C67F 18px 36px); }
/* Typo */
.lbg-eyebrow { font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lbg-rust); }
.lbg-sec--dark .lbg-eyebrow { color: var(--lbg-orange); }
.lbg-h2 { margin-top: 26px; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.06; }
.lbg-sec--dark .lbg-h2 { color: #FFFFFF; }
.lbg-lead { margin-top: 22px; font-size: 19px; line-height: 1.75; color: var(--lbg-muted); }
.lbg-sec--dark .lbg-lead { color: #C9D5CD; }
.lbg-kicker { font-family: 'Gabarito', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lbg-rust); }
.lbg-body { font-size: 18px; line-height: 1.75; color: var(--lbg-muted); }
.lbg-strong-line { font-size: 19px; font-weight: 700; color: var(--lbg-ink); }
/* Photos : vraies balises ![]()
dans un cadre, pour MP Images et MP Visuels */
.lbg-photos { align-self: stretch; display: flex; flex-direction: column; gap: 16px; min-height: 520px; }
.lbg-photo { position: relative; flex: 1; min-height: 240px; border-radius: 14px; overflow: hidden; background: var(--lbg-placeholder); }
.lbg-photo img, .lbg-service__img img, .lbg-hero__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Boutons */
.lbg-btn { display: inline-flex; align-items: center; gap: 10px; padding: 19px 30px; font-size: 18px; font-weight: 700; line-height: 1.2; border-radius: 10px; border: 0; cursor: pointer; white-space: nowrap; }
.lbg-btn--orange { background: var(--lbg-orange); color: #FFFFFF; }
.lbg-btn--orange:hover { background: var(--lbg-rust); color: #FFFFFF; }
.lbg-btn--light { background: #FFFFFF; border: 1px solid var(--lbg-line); color: var(--lbg-ink); padding: 18px 28px; }
.lbg-btn--light:hover { border-color: var(--lbg-ink); color: var(--lbg-ink); }
.lbg-btn--dark { background: var(--lbg-ink); color: #FFFFFF; padding: 16px 24px; font-size: 17px; }
.lbg-btn--dark:hover { background: #000000; color: #FFFFFF; }
/* Listes à puces carrées */
.lbg-bullets { display: grid; gap: 14px; margin-top: 18px; }
.lbg-bullets li { display: flex; gap: 14px; font-size: 18px; line-height: 1.6; color: #2B3A31; }
.lbg-bullets li::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: var(--lbg-orange); margin-top: 8px; }
.lbg-card-cream { background: var(--lbg-cream); border: 1px solid var(--lbg-border); border-radius: 14px; }
/* En-tête : aligné sur le texte des sections, se compacte au défilement */
.lbg-header { position: sticky; top: 0; z-index: 40; background: #FBF8F1; border-bottom: 1px solid transparent; }
.lbg-header.is-scrolled { background: #FFFFFF; border-bottom-color: var(--lbg-line); }
.lbg-header__in { max-width: var(--lbg-shell); margin: 0 auto; padding: 8px 40px; display: flex; align-items: center; gap: 28px; }
.lbg-header.is-compact .lbg-header__in { padding-top: 5px; padding-bottom: 5px; }
.lbg-logo img { height: 54px; width: auto; display: block; }
.lbg-header.is-compact .lbg-logo img { height: 44px; }
.lbg-nav .lbg-btn--dark { padding: 12px 20px; font-size: 16px; }
/* Titre de la bannière en trois lignes */
.lbg-h1__pre { display: block; margin-bottom: 10px; }
/* Prestations : quatre cartes sur deux colonnes */
.lbg-services__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lbg-services__grid--4 .lbg-service__img { height: 300px; }
.lbg-services__grid--4 .lbg-service h3 { font-size: 28px; line-height: 1.15; }
/* Pourquoi nous choisir : cartes titrées */
.lbg-reason h3 { margin-top: 20px; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.lbg-reason h3 + p { margin-top: 10px; }
.lbg-reason p a { color: var(--lbg-rust); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
.lbg-services__grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.lbg-header .lbg-logo img { height: 44px; }
.lbg-header.is-compact .lbg-logo img { height: 38px; }
.lbg-services__grid--4 .lbg-service__img { height: 220px; }
.lbg-services__grid--4 .lbg-service h3 { font-size: 23px; }
}
.lbg-logo__text { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--lbg-ink); }
.lbg-logo__text--light { color: #FFFFFF; }
.lbg-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.lbg-nav__link { position: relative; color: var(--lbg-ink); font-size: 16px; font-weight: 600; }
.lbg-nav__link:hover { color: var(--lbg-rust); }
.lbg-burger { display: none; }
.lbg-nav__mobile { display: none; }
/* Au défilement, l'en-tête passe en noir (essai du 2026-09-13). */
.lbg-header.is-scrolled { background: #0A1810; border-bottom-color: #0A1810; }
.lbg-header.is-scrolled .lbg-logo img { filter: brightness(0) invert(1); }
.lbg-header.is-scrolled .lbg-logo__text { color: #FFFFFF; }
.lbg-header.is-scrolled .lbg-nav__link { color: #FFFFFF; }
.lbg-header.is-scrolled .lbg-nav__link:hover { color: var(--lbg-yellow); }
.lbg-header.is-scrolled .lbg-btn--dark { background: var(--lbg-orange); }
.lbg-header.is-scrolled .lbg-btn--dark:hover { background: var(--lbg-rust); }
.lbg-header.is-scrolled .lbg-burger { background: #1A3A27; border-color: #265034; }
.lbg-header.is-scrolled .lbg-burger span { background: #FFFFFF; }
.lbg-header.is-scrolled .lbg-nav { background: #0A1810; border-color: #1E4029; }
.lbg-header.is-scrolled .lbg-nav .lbg-nav__link { border-bottom-color: #1E4029; }
/* Hero */
.lbg-hero { background: linear-gradient(180deg, #FBF8F1 0%, #F7F4EC 100%); padding: 44px 40px 0; }
.lbg-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: stretch; }
.lbg-h1 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.25; font-weight: 600; color: var(--lbg-muted); }
.lbg-h1__big { display: block; font-size: clamp(64px, 7.6vw, 124px); line-height: .94; font-weight: 700; letter-spacing: -.04em; color: var(--lbg-ink); }
.lbg-h1__sub { display: inline-block; margin-top: 14px; }
.lbg-mark { position: relative; display: inline-block; color: var(--lbg-ink); }
.lbg-mark::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .42em; background: var(--lbg-yellow); z-index: 0; }
.lbg-mark span { position: relative; z-index: 1; }
.lbg-hero__text { margin-top: 26px; font-size: 18px; line-height: 1.7; color: var(--lbg-muted); max-width: 620px; }
.lbg-hero__text strong { color: var(--lbg-ink); }
.lbg-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.lbg-hero__media { position: relative; border-radius: 14px; overflow: hidden; min-height: 420px; background: var(--lbg-placeholder); }
.lbg-tag { position: absolute; top: 18px; left: 18px; background: var(--lbg-orange); color: #FFFFFF; padding: 8px 14px; border-radius: 6px; font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lbg-badge { position: absolute; right: 18px; bottom: 18px; background: var(--lbg-ink); border-radius: 10px; padding: 18px 22px; }
.lbg-badge strong { display: block; font-size: 24px; font-weight: 700; color: #FFFFFF; }
.lbg-badge span { display: block; margin-top: 4px; font-size: 14px; color: #C9D5CD; }
.lbg-stats { max-width: var(--lbg-content); margin: 56px auto 0; border-top: 1px solid var(--lbg-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.lbg-stat { padding: 26px 24px; text-align: center; border-right: 1px solid var(--lbg-line); }
.lbg-stat:last-child { border-right: 0; }
.lbg-stat__v { font-size: 30px; font-weight: 700; color: var(--lbg-ink); }
.lbg-stat__l { margin-top: 6px; font-size: 15px; color: #7B8B80; }
/* 01 Pourquoi */
.lbg-reasons { display: grid; gap: 18px; margin-top: 32px; }
.lbg-reason { padding: 30px; }
.lbg-reason__icon { width: 58px; height: 58px; border-radius: 12px; background: #FBE9DA; display: flex; align-items: center; justify-content: center; }
.lbg-reason p { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--lbg-muted); }
.lbg-reason strong { color: var(--lbg-ink); }
/* 02 Services */
.lbg-services__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 56px; margin-top: 30px; align-items: start; }
.lbg-services__head .lbg-h2, .lbg-services__head .lbg-lead { margin-top: 0; }
.lbg-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px; margin-top: 44px; }
.lbg-service { background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 14px; overflow: hidden; }
.lbg-service--dark { background: var(--lbg-ink); border-color: var(--lbg-ink); color: #FFFFFF; }
.lbg-service__img { position: relative; height: 360px; overflow: hidden; background: var(--lbg-placeholder); }
.lbg-service__body { padding: 40px; }
.lbg-service h3 { font-size: 32px; }
.lbg-service--dark h3 { color: #FFFFFF; }
.lbg-rule { width: 56px; height: 4px; background: var(--lbg-orange); margin-top: 16px; }
.lbg-service--dark .lbg-rule { background: var(--lbg-yellow); }
.lbg-service__text { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--lbg-muted); }
.lbg-service--dark .lbg-service__text { color: #C9D5CD; }
.lbg-service .lbg-kicker { margin-top: 28px; }
.lbg-service--dark .lbg-kicker { color: var(--lbg-yellow); }
.lbg-service--dark .lbg-bullets li { color: #DDE5DF; }
/* 03 Méthode */
.lbg-steps { margin-top: 32px; display: grid; gap: 14px; }
.lbg-step { display: flex; gap: 20px; align-items: flex-start; background: #1A3A27; border-radius: 12px; padding: 24px 26px; }
.lbg-step__n { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; background: var(--lbg-orange); color: #FFFFFF; font-family: 'Gabarito', sans-serif; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lbg-step__t { font-size: 18px; line-height: 1.6; color: #DDE5DF; }
.lbg-note-dark { margin-top: 24px; background: #1A3A27; border-radius: 12px; padding: 28px 30px; font-size: 18px; line-height: 1.75; color: #D8E0DA; }
/* 04 Fondateur */
.lbg-quote { margin: 26px 0 0; background: var(--lbg-cream); border: 1px solid var(--lbg-border); border-radius: 12px; padding: 32px; font-size: 20px; line-height: 1.7; color: #2B3A31; }
.lbg-founder .lbg-bullets li { line-height: 1.65; }
/* 05 Chantiers */
.lbg-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.lbg-shot { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--lbg-placeholder); cursor: zoom-in; }
.lbg-shot img { display: block; width: 100%; height: 340px; object-fit: cover; }
.lbg-shot__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 18px 16px; background: linear-gradient(180deg, rgba(10, 24, 16, 0) 0%, rgba(10, 24, 16, .85) 62%); color: #FFFFFF; font-size: 14px; line-height: 1.4; text-align: left; display: block; }
.lbg-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(10, 24, 16, .95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; cursor: zoom-out; }
.lbg-lightbox img { display: block; max-width: min(1200px, 92vw); max-height: 76vh; border-radius: 12px; object-fit: contain; }
.lbg-lightbox p { font-size: 17px; color: #D8E0DA; text-align: center; max-width: 760px; }
.lbg-lightbox__close { position: absolute; top: 28px; right: 32px; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--lbg-orange); color: #FFFFFF; font-size: 24px; font-weight: 700; cursor: pointer; }
/* 06 Tarifs */
.lbg-prices { margin-top: 28px; display: grid; }
.lbg-prices li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #265034; }
.lbg-prices li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--lbg-orange); display: block; }
.lbg-prices li > span { font-size: 18px; line-height: 1.6; color: #D8E0DA; }
.lbg-prices strong { font-family: 'Gabarito', sans-serif; font-size: 21px; font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.lbg-note-outline { margin-top: 24px; border: 1px solid #265034; border-radius: 12px; padding: 28px; font-size: 18px; line-height: 1.75; color: #D8E0DA; }
.lbg-note-outline strong { color: var(--lbg-yellow); }
.lbg-price-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.lbg-price-cta span { font-size: 18px; color: #C9D5CD; }
.lbg-price-cta span a { color: #FFFFFF; font-weight: 700; }
/* 07 Zone : la carte à gauche, les tarifs juste avant ayant leur visuel à droite */
.lbg-split > .lbg-map { order: -1; }
.lbg-zone-cards { display: grid; gap: 16px; margin-top: 18px; }
.lbg-zone-card { padding: 28px; font-size: 17px; line-height: 1.6; color: #2B3A31; }
.lbg-zone-card__t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: 'Gabarito', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lbg-ink); }
.lbg-map { background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 14px; padding: 20px; }
/* Plus de SVG dessiné à la main ici : la carte est un conteneur Leaflet.
L'ancienne règle « .lbg-map svg {height:auto} » écrasait le SVG des tracés
de Leaflet et le réduisait à zéro. */
.lbg-legend { margin-top: 18px; display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.lbg-legend > span { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--lbg-muted); }
.lbg-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lbg-orange); display: block; }
.lbg-swatch { flex: 0 0 auto; width: 18px; height: 14px; border-radius: 4px; display: block; border: 2px solid var(--lbg-orange); background: rgba(226, 101, 15, .18); }
.lbg-swatch--ain { border-color: #157A45; background: rgba(53, 198, 127, .24); }
.lbg-swatch--isere { border-color: var(--lbg-rust); background: rgba(184, 80, 11, .1); }
/* 08 FAQ : hauteur animable par grid-template-rows */
.lbg-faq-wrap { max-width: 1180px; margin: 0 auto; }
.lbg-faq { margin-top: 40px; display: grid; gap: 12px; }
.lbg-faq__item { background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 12px; overflow: hidden; }
.lbg-faq__h { font-size: inherit; letter-spacing: 0; }
.lbg-faq__q { width: 100%; background: none; border: 0; padding: 26px 30px; display: flex; gap: 22px; align-items: flex-start; justify-content: space-between; cursor: pointer; text-align: left; color: var(--lbg-ink); }
.lbg-faq__label { font-size: 22px; font-weight: 700; color: var(--lbg-ink); line-height: 1.35; }
.lbg-faq__sign { flex: 0 0 auto; width: 36px; height: 36px; background: var(--lbg-orange); color: #FFFFFF; font-size: 22px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.lbg-faq__a { display: grid; grid-template-rows: 0fr; }
.lbg-faq__item.is-open .lbg-faq__a { grid-template-rows: 1fr; }
.lbg-faq__in { min-height: 0; overflow: hidden; }
.lbg-faq__txt { padding: 0 30px 28px; display: grid; gap: 14px; }
.lbg-faq__txt p { font-size: 18px; line-height: 1.75; color: var(--lbg-muted); }
/* 09 Contact */
.lbg-contact-grid { max-width: var(--lbg-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 48px; align-items: start; }
.lbg-phone-card { margin-top: 34px; background: var(--lbg-orange); border-radius: 14px; padding: 34px; }
.lbg-phone-card__label { font-family: 'Gabarito', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FDE3CC; }
.lbg-phone-card a { display: block; margin-top: 10px; font-size: 42px; font-weight: 700; color: #FFFFFF; line-height: 1; }
.lbg-phone-card p { margin-top: 12px; font-size: 18px; font-weight: 600; color: #FFFFFF; }
.lbg-info { margin-top: 16px; display: grid; gap: 14px; }
.lbg-info__item { background: #1A3A27; border-radius: 12px; padding: 24px 26px; }
.lbg-info__label { font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lbg-yellow); }
.lbg-info__item a { display: block; margin-top: 8px; font-size: 20px; font-weight: 700; color: #FFFFFF; word-break: break-word; }
.lbg-info__item p { margin-top: 8px; font-size: 19px; line-height: 1.5; color: #FFFFFF; }
.lbg-mono { font-family: 'Gabarito', sans-serif; }
.lbg-form-card { background: #FFFFFF; color: var(--lbg-ink); border-radius: 14px; padding: clamp(24px, 3vw, 40px); }
.lbg-form-card h3 { font-size: 28px; }
.lbg-form { display: grid; gap: 18px; margin-top: 26px; }
.lbg-field { display: grid; gap: 8px; }
.lbg-field > span { font-size: 15px; font-weight: 600; color: var(--lbg-muted); }
.lbg-field input, .lbg-field textarea { width: 100%; border: 1px solid #CFC9BB; background: #F6F4EF; color: var(--lbg-ink); padding: 15px 16px; font-size: 17px; border-radius: 10px; }
.lbg-field textarea { resize: vertical; }
.lbg-field input:focus, .lbg-field textarea:focus { outline: 2px solid var(--lbg-orange); outline-offset: 0; border-color: var(--lbg-orange); }
.lbg-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lbg-form .lbg-btn { justify-self: start; }
.lbg-form__legal { font-size: 14px; line-height: 1.5; color: #7B8B80; }
.lbg-alert { margin-top: 24px; background: var(--lbg-cream); border-radius: 12px; padding: 26px; }
.lbg-alert--error { background: #FBE9DA; }
.lbg-alert strong { display: block; font-size: 20px; font-weight: 700; color: var(--lbg-ink); }
.lbg-alert p { margin-top: 8px; font-size: 17px; line-height: 1.65; color: var(--lbg-muted); }
.lbg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Pied de page */
.lbg-footer { background: #0A1810; color: #8FA295; padding: 56px 40px 36px; }
.lbg-footer__grid { max-width: var(--lbg-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; align-items: start; }
.lbg-footer__logo { height: 62px; width: auto; display: block; filter: brightness(0) invert(1); }
.lbg-footer__intro { margin-top: 16px; font-size: 15px; line-height: 1.65; max-width: 300px; }
.lbg-footer__title { font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lbg-orange); }
.lbg-footer__list { margin-top: 14px; display: grid; gap: 9px; font-size: 15px; }
.lbg-footer__list a { color: #FFFFFF; }
.lbg-footer__list a:hover { color: var(--lbg-yellow); }
.lbg-footer__strong { font-weight: 700; }
.lbg-footer__bottom { max-width: var(--lbg-content); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid #1E4029; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
/* Pages génériques */
.lbg-page { max-width: 860px; margin: 0 auto; padding: 72px 20px; }
.lbg-page__title { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; }
.lbg-page__content { margin-top: 28px; font-size: 18px; line-height: 1.75; color: var(--lbg-muted); }
.lbg-page__content > * + * { margin-top: 1em; }
/* ---------------------------------------------------------------------- */
/* Responsive : toujours en dernier dans la feuille */
/* ---------------------------------------------------------------------- */
/* Menu mobile. Sept liens plus le téléphone ne tiennent plus sur une ligne
sous 1080 px : le bouton prend le relais avant le seuil de 901 px. */
@media (max-width: 1080px) {
.lbg-header__in { gap: 12px; }
.lbg-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; width: 52px; height: 52px; margin-left: auto; padding: 0; border: 1px solid var(--lbg-line); border-radius: 10px; background: #FFFFFF; cursor: pointer; }
.lbg-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--lbg-ink); transition: transform .3s ease, opacity .2s ease; }
.lbg-header.menu-ouvert .lbg-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lbg-header.menu-ouvert .lbg-burger span:nth-child(2) { opacity: 0; }
.lbg-header.menu-ouvert .lbg-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.lbg-header .lbg-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; padding: 6px 20px 22px; background: #FFFFFF; border-top: 1px solid var(--lbg-line); border-bottom: 1px solid var(--lbg-line); max-height: calc(100vh - 100%); overflow-y: auto; }
.lbg-header .lbg-nav.is-open { display: flex; }
.lbg-header .lbg-nav .lbg-nav__link { display: flex; align-items: center; min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--lbg-line); }
.lbg-header .lbg-nav .lbg-btn { justify-content: center; min-height: 52px; margin-top: 12px; }
.lbg-header .lbg-nav .lbg-nav__mobile { display: inline-flex; }
}
/* Mobile et tablette : une seule colonne, le visuel toujours au-dessus du texte. */
@media (max-width: 900px) {
.lbg-split, .lbg-hero__grid { grid-template-columns: 1fr; }
.lbg-split > .lbg-photos,
.lbg-split > .lbg-map,
.lbg-hero__grid > .lbg-hero__media { order: -1; }
/* Pastilles posées sur la photo de la bannière : plus discrètes. */
.lbg-tag { top: 12px; left: 12px; padding: 6px 10px; font-size: 10px; letter-spacing: .1em; }
.lbg-badge { right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 8px; }
.lbg-badge strong { font-size: 16px; }
.lbg-badge span { margin-top: 2px; font-size: 12px; }
}
@media (max-width: 782px) {
.lbg-stats { grid-template-columns: 1fr 1fr; }
.lbg-stat { border-right: 0; border-bottom: 1px solid var(--lbg-line); }
.lbg-stat:nth-child(odd) { border-right: 1px solid var(--lbg-line); }
.lbg-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 700px) {
.lbg-sec { padding: 64px 20px; }
.lbg-sec--flush { padding: 64px 0; }
.lbg-inner { padding: 0 20px; }
.lbg-hero { padding: 28px 20px 0; }
.lbg-header__in { padding: 10px 20px; }
.lbg-logo img { height: 48px; }
.lbg-header.is-compact .lbg-logo img { height: 40px; }
.lbg-btn--dark { padding: 12px 16px; font-size: 15px; }
.lbg-h1 { font-size: 22px; }
.lbg-h1__big { font-size: 50px; }
.lbg-hero__media { min-height: 300px; }
.lbg-stat { padding: 20px 12px; }
.lbg-stat__v { font-size: 24px; }
.lbg-split { gap: 40px; }
.lbg-photos { min-height: 0; }
.lbg-photo { min-height: 220px; }
.lbg-service__img { height: 240px; }
.lbg-service__body { padding: 28px 24px; }
.lbg-service h3 { font-size: 26px; }
.lbg-shot img { height: 260px; }
.lbg-prices strong { white-space: normal; }
.lbg-faq__q { padding: 20px; }
.lbg-faq__label { font-size: 19px; }
.lbg-faq__txt { padding: 0 20px 22px; }
.lbg-phone-card { padding: 26px; }
.lbg-phone-card a { font-size: 34px; }
.lbg-lightbox { padding: 20px; }
.lbg-lightbox__close { top: 16px; right: 16px; }
.lbg-footer { padding: 48px 20px 32px; }
}
@media (max-width: 560px) {
.lbg-form__row { grid-template-columns: 1fr; }
.lbg-badge span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ---------------------------------------------------------------------- */
/* Ajustements du 2026-09-13, placés en dernier pour l'emporter */
/* ---------------------------------------------------------------------- */
/* En-tête : même hauteur et même logo avant et après le défilement,
seule la couleur de fond change. */
.lbg-header.is-compact .lbg-header__in { padding-top: 8px; padding-bottom: 8px; }
.lbg-header.is-compact .lbg-logo img { height: 54px; }
/* Prestations : deux colonnes (la règle générale de la grille arrive plus bas
dans la feuille, d'où la double classe). */
.lbg-services__grid.lbg-services__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Bannière : plus d'air sous l'en-tête. */
.lbg-hero { padding-top: 72px; }
@media (max-width: 900px) {
.lbg-services__grid.lbg-services__grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.lbg-header__in,
.lbg-header.is-compact .lbg-header__in { padding-top: 10px; padding-bottom: 10px; }
.lbg-header .lbg-logo img,
.lbg-header.is-compact .lbg-logo img { height: 44px; }
.lbg-hero { padding-top: 40px; }
}
/* Titre de la bannière : « Votre entreprise de démolition à Lyon » tient dans
la grande ligne, d'où une taille plus contenue que sur la maquette. */
.lbg-h1 .lbg-h1__big { font-size: clamp(48px, 5.2vw, 88px); line-height: .98; }
@media (max-width: 700px) {
.lbg-h1 .lbg-h1__big { font-size: 40px; line-height: 1; }
}
/* Listes : la remise à zéro « .lbg-site ul, .lbg-site ol » l'emportait sur leur
marge haute, d'où un sur-titre collé à la liste. */
.lbg-site .lbg-bullets { margin-top: 18px; }
.lbg-site .lbg-steps { margin-top: 32px; }
.lbg-site .lbg-prices { margin-top: 28px; }
/* Damier après retrait de « Pourquoi nous choisir » : bannière à droite,
déroulé à gauche, fondateur à droite, tarifs à gauche, carte à droite.
Sur mobile, le visuel reste toujours au-dessus du texte. */
#methode .lbg-split > .lbg-photos,
#tarifs .lbg-split > .lbg-photos { order: -1; }
@media (min-width: 901px) {
.lbg-founder .lbg-split > .lbg-photos,
#zone .lbg-split > .lbg-map { order: 2; }
}
/* En-tête au défilement : blanc avec un filet fin (le noir puis le sable ont
été écartés). Logo en couleur, liens foncés, seul le fond et le filet changent. */
.lbg-header.is-scrolled { background: #FFFFFF; border-bottom-color: var(--lbg-line); }
.lbg-header.is-scrolled .lbg-logo img { filter: none; }
.lbg-header.is-scrolled .lbg-logo__text { color: var(--lbg-ink); }
.lbg-header.is-scrolled .lbg-nav__link { color: var(--lbg-ink); }
.lbg-header.is-scrolled .lbg-nav__link:hover { color: var(--lbg-rust); }
.lbg-header.is-scrolled .lbg-btn--dark { background: var(--lbg-ink); }
.lbg-header.is-scrolled .lbg-btn--dark:hover { background: #000000; }
.lbg-header.is-scrolled .lbg-burger { background: #FFFFFF; border-color: var(--lbg-line); }
.lbg-header.is-scrolled .lbg-burger span { background: var(--lbg-ink); }
.lbg-header.is-scrolled .lbg-nav { background: #FFFFFF; border-color: var(--lbg-line); }
.lbg-header.is-scrolled .lbg-nav .lbg-nav__link { border-bottom-color: var(--lbg-line); }
/* Visionneuse des réalisations : flèches, compteur, miniatures au survol. */
.lbg-lightbox { padding: 40px 100px 150px; }
.lbg-lightbox img { max-width: min(1200px, calc(100vw - 220px)); max-height: calc(100vh - 290px); cursor: pointer; }
.lbg-lightbox__nav { position: absolute; top: calc(50% - 60px); width: 56px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(10, 24, 16, .55); color: #FFFFFF; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; }
.lbg-lightbox__nav:hover, .lbg-lightbox__nav:focus-visible { background: var(--lbg-orange); border-color: var(--lbg-orange); }
.lbg-lightbox__nav--prev { left: 24px; }
.lbg-lightbox__nav--next { right: 24px; }
.lbg-lightbox__count { position: absolute; top: 40px; left: 32px; font-family: 'Gabarito', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #D8E0DA; }
.lbg-lightbox__thumbs { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 10px; padding: 4px 20px; overflow-x: auto; scrollbar-width: none; cursor: default; }
.lbg-lightbox__thumbs::-webkit-scrollbar { display: none; }
.lbg-lightbox__thumb { flex: 0 0 auto; width: 96px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #1A3A27 center / cover no-repeat; opacity: .5; cursor: pointer; transition: opacity .3s ease, border-color .3s ease; }
.lbg-lightbox__thumb:hover, .lbg-lightbox__thumb:focus-visible { opacity: .9; }
.lbg-lightbox__thumb.is-active { opacity: 1; border-color: var(--lbg-orange); }
@keyframes lbg-changement { from { opacity: .2; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
html .lbg-lightbox:not([hidden]) img.is-changing { animation: lbg-changement .45s ease both; }
}
@media (max-width: 1100px) {
.lbg-lightbox__thumbs { justify-content: flex-start; }
}
@media (max-width: 700px) {
.lbg-lightbox { padding: 64px 16px 110px; }
.lbg-lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 250px); }
.lbg-lightbox__nav { top: calc(50% - 50px); width: 42px; height: 42px; }
.lbg-lightbox__nav--prev { left: 8px; }
.lbg-lightbox__nav--next { right: 8px; }
.lbg-lightbox__count { top: 30px; left: 16px; }
.lbg-lightbox__thumbs { bottom: 16px; }
.lbg-lightbox__thumb { width: 72px; height: 52px; }
}
/* Pages légales : titres, listes à puces et liens lisibles. */
.lbg-page__content h2 { margin-top: 2.2em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--lbg-ink); }
.lbg-site .lbg-page__content ul { margin-top: 1em; padding-left: 1.3em; list-style: disc; }
.lbg-page__content li + li { margin-top: .4em; }
.lbg-page__content a { color: var(--lbg-rust); text-decoration: underline; text-underline-offset: 3px; }
.lbg-form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Mot du fondateur : une seule grande photo mise en avant, plus haute sur mobile. */
@media (max-width: 700px) {
.lbg-founder .lbg-photo { min-height: 360px; }
}
/* Bandeau d'informations au-dessus de l'en-tête : nom et ville, adresse,
téléphone, dans cet ordre et rien d'autre. Aligné sur l'en-tête. */
.lbg-bandeau { background: var(--lbg-ink); color: #D8D1C8; font-size: 14px; line-height: 1.4; }
.lbg-bandeau__in { max-width: var(--lbg-shell); margin: 0 auto; padding: 9px 40px; display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; }
.lbg-bandeau__nom { color: #FFFFFF; font-weight: 700; }
.lbg-bandeau__tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 700; white-space: nowrap; }
.lbg-bandeau__tel:hover { color: var(--lbg-yellow); }
.lbg-swatch--france { border-color: var(--lbg-ink); background: rgba(15, 35, 24, .08); }
@media (max-width: 700px) {
.lbg-bandeau__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 20px; font-size: 13px; }
.lbg-bandeau__nom { grid-column: 1; grid-row: 1; }
.lbg-bandeau__tel { grid-column: 2; grid-row: 1; margin-left: 0; }
.lbg-bandeau__adresse { grid-column: 1 / -1; grid-row: 2; }
}
/* ====================================================================== */
/* Rapprochement du design SAD Débarras (2026-09-23) */
/* Repris tel quel de sad-alsace-debarras.fr : bannière noire avec le */
/* visuel cerné de jaune, coup de surligneur dessiné sous les mots-clés */
/* des titres, teinte taupe dans l'alternance des sections, cartes de */
/* prix, étapes reliées en pointillé, cartes arrondies à 18 px. */
/* Aucun texte n'est modifié : tout se joue en CSS et en balises. */
/* ====================================================================== */
:root {
--lbg-sand: #E2DED4;
--lbg-nuit: #0A1810;
/* Le trait de surligneur de SAD, redessiné au jaune HK. */
--lbg-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M3 16C72 4 206 1 297 10 206 10 74 13 5 25Z' fill='%2335C67F'/%3E%3C/svg%3E");
}
/* ---------- Surligneur dessiné, à la place de l'aplat rectangulaire ---- */
.lbg-mark { display: inline; color: inherit; padding: 0 .04em .16em; background: var(--lbg-trait) no-repeat 0 100%; background-size: 100% .32em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lbg-mark::before { display: none; }
.lbg-mark > span { position: static; }
.lbg-h2 .lbg-mark { background-size: 100% .28em; }
/* ---------- Sur-titres : le filet court de SAD avant le texte ---------- */
.lbg-eyebrow { display: flex; align-items: center; gap: 12px; }
.lbg-eyebrow::before { content: ""; flex: 0 0 auto; width: 34px; height: 2px; background: currentColor; }
/* ---------- Respiration des sections, comme sur SAD ------------------- */
.lbg-sec { padding: clamp(72px, 6.4vw, 120px) 40px; }
.lbg-sec--flush { padding: clamp(72px, 6.4vw, 120px) 0; }
.lbg-sec--sand { background: var(--lbg-sand); }
.lbg-sec--sand .lbg-lead, .lbg-sec--sand .lbg-body { color: #5B6B60; }
/* ---------- Bannière noire ------------------------------------------- */
.lbg-hero { position: relative; background: linear-gradient(180deg, #0F2318 0%, var(--lbg-nuit) 100%); color: #FFFFFF; padding-bottom: 0; overflow: hidden; }
.lbg-hero::before { content: ""; position: absolute; top: -220px; right: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 101, 15, .22) 0%, rgba(226, 101, 15, 0) 68%); pointer-events: none; }
.lbg-hero > * { position: relative; }
.lbg-hero .lbg-eyebrow { color: var(--lbg-yellow); }
.lbg-hero .lbg-eyebrow::before { background: var(--lbg-orange); }
.lbg-hero .lbg-h1 { color: #C9D5CD; }
.lbg-hero .lbg-h1__big { color: #FFFFFF; }
.lbg-hero .lbg-mark { color: #FFFFFF; }
.lbg-hero__text { color: #C9D5CD; }
.lbg-hero__text strong { color: #FFFFFF; }
/* Le visuel cerné de jaune, signature de la bannière SAD. */
.lbg-hero__media { border-radius: 18px; outline: 3px solid var(--lbg-yellow); outline-offset: 12px; background: #292524; }
/* Deuxième bouton de la bannière : contour clair sur le noir. */
.lbg-hero .lbg-btn--light { background: transparent; border-color: #57534E; color: #FFFFFF; }
.lbg-hero .lbg-btn--light:hover { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.lbg-hero .lbg-btn--orange:hover { background: #FFFFFF; color: var(--lbg-ink); }
/* Le bandeau de chiffres reste dans la bannière, donc sur le noir. */
.lbg-stats { margin-top: 64px; border-top-color: #20452C; }
.lbg-stat { border-right-color: #20452C; }
.lbg-stat__v { color: #FFFFFF; }
.lbg-stat__l { color: #8FA295; }
/* ---------- Cartes : arrondi commun de 18 px et léger relief ---------- */
.lbg-photo, .lbg-service, .lbg-shot, .lbg-quote, .lbg-card-cream, .lbg-map, .lbg-form-card, .lbg-phone-card { border-radius: 18px; }
.lbg-service { transition: transform .5s var(--lbg-ease, cubic-bezier(.22, 1, .36, 1)), border-color .3s ease; }
.lbg-service:hover { transform: translateY(-5px); }
.lbg-service:not(.lbg-service--dark):hover { border-color: #CFC9BB; }
.lbg-zone-card { transition: border-color .3s ease, transform .4s ease; }
.lbg-zone-card:hover { border-color: var(--lbg-orange); transform: translateY(-3px); }
.lbg-btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.lbg-btn--orange:hover { transform: translateY(-2px); }
/* ---------- Déroulé du chantier : étapes reliées en pointillé --------- */
.lbg-steps { position: relative; gap: 0; }
.lbg-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 20px; align-items: start; background: none; border-radius: 0; padding: 0 0 28px; }
.lbg-step:last-child { padding-bottom: 0; }
.lbg-step::before { content: ""; position: absolute; left: 28px; top: 62px; bottom: 6px; border-left: 3px dashed rgba(226, 101, 15, .55); }
.lbg-step:last-child::before { display: none; }
.lbg-step__n { width: 58px; height: 58px; border-radius: 50%; background: var(--lbg-yellow); color: var(--lbg-ink); font-size: 19px; }
.lbg-step__t { align-self: center; font-size: 18px; line-height: 1.6; color: #DDE5DF; }
.lbg-note-dark { border-radius: 18px; }
/* ---------- Tarifs : la grille devient des cartes, comme les formules -- */
.lbg-prices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.lbg-prices li { display: block; padding: 24px 26px; background: #163322; border: 1px solid #265034; border-bottom: 1px solid #265034; border-radius: 18px; transition: border-color .3s ease, transform .4s ease; }
.lbg-prices li:hover { border-color: var(--lbg-orange); transform: translateY(-3px); }
.lbg-prices li::before { width: 34px; height: 3px; border-radius: 0; margin-bottom: 16px; }
.lbg-prices li > span { display: block; font-size: 17px; color: #C9D5CD; }
.lbg-prices strong { display: block; margin-top: 12px; font-size: 28px; line-height: 1.1; color: var(--lbg-yellow); }
.lbg-note-outline { border-radius: 18px; }
/* ---------- Réalisations : légende qui monte au survol ---------------- */
.lbg-shot__cap { transition: transform .5s ease, opacity .4s ease; }
.lbg-shot:hover .lbg-shot__cap, .lbg-shot:focus-visible .lbg-shot__cap { transform: translateY(-4px); }
/* ---------- FAQ : cartes blanches sur le taupe, accent à l'ouverture --- */
.lbg-faq__item { border-radius: 18px; transition: border-color .3s ease; }
.lbg-faq__item:hover { border-color: #CFC9BB; }
.lbg-faq__item.is-open { border-color: var(--lbg-orange); }
/* ---------- Contact : la carte téléphone gagne un dégradé ------------- */
.lbg-phone-card { background: linear-gradient(135deg, var(--lbg-orange) 0%, var(--lbg-rust) 100%); }
.lbg-info__item { border-radius: 18px; }
/* ---------- Responsive du bloc, donc en dernier ----------------------- */
@media (max-width: 900px) {
.lbg-hero__media { outline-offset: 8px; }
}
@media (max-width: 700px) {
.lbg-sec { padding: 64px 20px; }
.lbg-sec--flush { padding: 64px 0; }
.lbg-hero::before { display: none; }
.lbg-hero__media { outline-width: 2px; outline-offset: 6px; }
.lbg-stats { margin-top: 44px; }
.lbg-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
.lbg-step::before { left: 23px; top: 52px; }
.lbg-step__n { width: 48px; height: 48px; font-size: 16px; }
.lbg-step__t { font-size: 17px; }
.lbg-prices strong { font-size: 25px; }
.lbg-eyebrow::before { width: 24px; }
}
/* ====================================================================== */
/* Reprise du 2026-09-23 (2) : prestations allégées, réalisations en */
/* mosaïque sans légende, grille de tarifs en trois colonnes. */
/* ====================================================================== */
/* ---------- 01 Prestations : moins dense, plus contrasté -------------- */
/* Le damier noir/blanc et les sur-titres en capitales rendaient le bloc
illisible. Toutes les cartes passent en clair, le texte gagne en
contraste et les puces respirent. */
.lbg-service { background: #FFFFFF; border-color: var(--lbg-border); color: var(--lbg-ink); }
.lbg-service h3 { font-size: 27px; line-height: 1.2; color: var(--lbg-ink); }
.lbg-service__body { padding: 34px 36px 36px; }
.lbg-service__text { margin-top: 16px; font-size: 17px; line-height: 1.7; color: #3C4A41; }
.lbg-service .lbg-rule { width: 44px; height: 3px; background: var(--lbg-orange); }
.lbg-service .lbg-bullets { margin-top: 22px; gap: 12px; }
.lbg-service .lbg-bullets li { font-size: 16.5px; line-height: 1.55; color: #265034; gap: 12px; }
.lbg-service .lbg-bullets li::before { width: 8px; height: 8px; border-radius: 2px; margin-top: 9px; }
/* ---------- 04 Réalisations : mosaïque, rien que les photos ----------- */
/* Les légendes posées sur les images ont été retirées : elles restent dans
l'alt et dans l'aria-label du bouton, et s'affichent dans la visionneuse. */
.lbg-gallery--mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 18vw, 290px); gap: 14px; }
.lbg-gallery--mosaique .lbg-shot { height: 100%; border-radius: 16px; background: #15301F; }
.lbg-gallery--mosaique .lbg-shot img { width: 100%; height: 100%; object-fit: cover; }
.lbg-gallery--mosaique .lbg-shot::after { content: ""; position: absolute; inset: 0; background: rgba(10, 24, 16, 0); transition: background .4s ease; pointer-events: none; }
.lbg-gallery--mosaique .lbg-shot:hover::after, .lbg-gallery--mosaique .lbg-shot:focus-visible::after { background: rgba(10, 24, 16, .22); }
.lbg-gallery--mosaique .lbg-shot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.lbg-gallery--mosaique .lbg-shot:nth-child(7) { grid-column: span 2; grid-row: span 2; }
#chantiers.lbg-sec--dark { background: linear-gradient(180deg, #0F2318 0%, var(--lbg-nuit) 100%); }
/* ---------- 05 Tarifs : trois colonnes, lisibles d'un coup d'œil ------ */
.lbg-grille-tarifs { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.lbg-tarif { position: relative; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 18px; overflow: hidden; transition: transform .4s ease, border-color .3s ease; }
.lbg-tarif:hover { transform: translateY(-4px); border-color: var(--lbg-orange); }
.lbg-tarif--vedette { border: 2px solid var(--lbg-orange); }
/* Bandeau plein à l'intérieur de la carte : il suit l'arrondi, contrairement
à un liseré posé sur le bord. */
.lbg-tarif__tete { margin: 0; padding: 13px 18px; background: var(--lbg-ink); color: #FFFFFF; font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.lbg-tarif--vedette .lbg-tarif__tete { background: var(--lbg-orange); }
.lbg-tarif__corps { flex: 1; display: flex; flex-direction: column; padding: 30px 28px 32px; }
.lbg-tarif__nom { font-size: 25px; line-height: 1.15; text-align: center; color: var(--lbg-ink); }
.lbg-tarif__prix { margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--lbg-border); font-family: 'Gabarito', sans-serif; font-size: clamp(23px, 1.9vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-align: center; color: var(--lbg-ink); }
.lbg-tarif__prix small { display: block; margin-bottom: 12px; font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lbg-muted); }
.lbg-tarif__prix span { color: var(--lbg-orange); }
.lbg-tarif__liste { margin-top: 24px; display: grid; gap: 13px; }
.lbg-tarif__liste li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: #3C4A41; }
.lbg-tarif__liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2650F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.lbg-tarifs__pied { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 18px; padding: 26px 30px; }
.lbg-tarifs__pied p { margin: 0; font-size: 17px; line-height: 1.6; color: #3C4A41; max-width: 52ch; }
.lbg-tarifs__pied strong { color: var(--lbg-ink); }
.lbg-tarifs__pied .lbg-price-cta { margin-top: 0; }
.lbg-tarifs__pied .lbg-price-cta span { font-size: 16px; color: var(--lbg-muted); }
.lbg-tarifs__pied .lbg-price-cta span a { color: var(--lbg-ink); }
@media (max-width: 1100px) {
.lbg-gallery--mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 22vw, 240px); }
.lbg-grille-tarifs { grid-template-columns: 1fr; gap: 20px; }
.lbg-tarif__prix { white-space: normal; }
}
@media (max-width: 700px) {
.lbg-service__body { padding: 26px 22px 28px; }
.lbg-service h3 { font-size: 23px; }
.lbg-gallery--mosaique { grid-template-columns: 1fr; grid-auto-rows: 230px; gap: 12px; }
.lbg-gallery--mosaique .lbg-shot:nth-child(1),
.lbg-gallery--mosaique .lbg-shot:nth-child(7) { grid-column: span 1; grid-row: span 1; }
.lbg-tarif__corps { padding: 26px 22px 28px; }
.lbg-tarifs__pied { padding: 22px; }
}
/* ---------- Carte de prestation : pastille + mots courts sur 2 colonnes --- */
.lbg-service__img { border-radius: 0; }
.lbg-service__badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 999px; background: #FFFFFF; color: var(--lbg-ink); font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lbg-service__badge::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--lbg-orange); }
.lbg-points { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.lbg-points li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--lbg-border); font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--lbg-ink); }
.lbg-points li::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--lbg-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.lbg-points li:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 1250px) {
.lbg-points { grid-template-columns: 1fr; }
.lbg-points li:nth-last-child(-n+2) { border-bottom: 1px solid var(--lbg-border); }
.lbg-points li:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
.lbg-service__badge { left: 12px; bottom: 12px; padding: 7px 13px 7px 11px; font-size: 11px; }
.lbg-points li { font-size: 15.5px; padding: 11px 0; }
}
/* Les listes des cartes collaient à leur titre : « .lbg-site ul, .lbg-site ol »
remet toutes les marges à zéro et l'emporte, à deux classes contre une, sur
le margin-top de .lbg-points et de .lbg-tarif__liste. Même piège que pour
.lbg-bullets et .lbg-steps plus haut dans la feuille. */
.lbg-site .lbg-points { margin-top: 30px; }
.lbg-site .lbg-tarif__liste { margin-top: 24px; }
.lbg-service h3 { line-height: 1.25; }
/* ---------- 07 Zone : les villes en pastilles ------------------------- */
/* Trois paragraphes de communes, ça faisait un pavé. Même information, en
pastilles : le bloc se parcourt du regard et aucun nom n'est perdu. */
.lbg-zone-card { padding: 24px 26px 26px; }
.lbg-site .lbg-villes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lbg-villes li { padding: 6px 13px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--lbg-border); font-size: 14px; font-weight: 600; line-height: 1.3; color: #3C4A41; }
.lbg-zone-card__txt { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #3C4A41; }
.lbg-zone-card__txt a { font-weight: 700; }
/* ---------- Bannière : l'accroche passe en puces cochées -------------- */
/* Le paragraphe de présentation faisait quatre lignes pleines, illisible en
haut de page. Même contenu, en points, avec la pastille des prestations. */
.lbg-site .lbg-hero__liste { margin-top: 22px; display: grid; gap: 14px; max-width: 620px; }
.lbg-hero__liste li { display: flex; align-items: flex-start; gap: 13px; font-size: 17px; line-height: 1.55; color: #C9D5CD; }
.lbg-hero__liste li strong { color: #FFFFFF; }
.lbg-hero__liste li::before { content: ""; flex: 0 0 auto; margin-top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--lbg-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.lbg-hero__text { margin-top: 24px; }
/* ---------- Réglages liés au changement de polices (2026-09-23) -------
Bricolage Grotesque porte plus large et plus haut qu'Outfit : les très gros
titres sont ramenés d'un cran et l'interlettrage des étiquettes en Spline
Sans Mono est resserré, sinon les bandeaux des cartes de prix débordent. */
.lbg-h1 .lbg-h1__big { font-size: clamp(44px, 4.8vw, 80px); letter-spacing: -.035em; }
.lbg-h2 { letter-spacing: -.025em; }
.lbg-eyebrow { font-size: 13px; letter-spacing: .16em; }
.lbg-tarif__tete { font-size: 11px; letter-spacing: .1em; }
.lbg-service__badge { font-size: 11px; letter-spacing: .1em; }
.lbg-zone-card__t { font-size: 12px; letter-spacing: .12em; }
.lbg-kicker { font-size: 12px; letter-spacing: .12em; }
.lbg-footer__title { font-size: 11px; letter-spacing: .12em; }
@media (max-width: 700px) {
.lbg-h1 .lbg-h1__big { font-size: 36px; }
.lbg-hero__liste li { font-size: 16px; }
}
/* ---------- 07 Zone : texte réduit et carte Leaflet ------------------- */
/* Quatre cartes de villes empilées, c'était illisible. Il reste trois
étiquettes de département, une ligne de communes et la carte. */
.lbg-zone-texte { align-self: center; }
.lbg-site .lbg-depts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.lbg-depts li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; background: var(--lbg-cream); border: 1px solid var(--lbg-border); font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lbg-ink); }
.lbg-communes { margin-top: 22px; max-width: 62ch; font-size: 15.5px; line-height: 2; color: var(--lbg-muted); }
.lbg-zone-france { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--lbg-ink); font-weight: 600; }
.lbg-zone-france a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* La carte occupe toute la hauteur de la colonne, comme les photos ailleurs. */
.lbg-map { padding: 12px; }
.lbg-carte { height: 100%; min-height: 520px; border-radius: 12px; overflow: hidden; background: var(--lbg-cream); z-index: 0; }
.lbg-carte .leaflet-container { font-family: 'Gabarito', system-ui, sans-serif; background: var(--lbg-cream); }
.lbg-carte .leaflet-control-attribution { font-size: 10.5px; background: rgba(255, 255, 255, .85); }
.lbg-carte .leaflet-bar a { color: var(--lbg-ink); }
.lbg-carte__lyon { display: flex; align-items: center; justify-content: center; }
.lbg-carte__lyon span { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--lbg-ink); color: #FFFFFF; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.lbg-carte__ville i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--lbg-orange); border: 2px solid #FFFFFF; }
.lbg-carte .leaflet-tooltip { font-family: 'Gabarito', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--lbg-ink); border: 1px solid var(--lbg-border); border-radius: 8px; }
@media (max-width: 900px) {
.lbg-carte { min-height: 380px; }
}
@media (max-width: 700px) {
.lbg-map { padding: 8px; }
.lbg-carte { min-height: 320px; }
.lbg-communes { font-size: 15px; line-height: 1.9; }
}
/* Fond OpenStreetMap désaturé : la carte reste lisible sans jurer avec la
palette. Le filtre ne porte que sur les tuiles, pas sur les tracés. */
.lbg-carte .leaflet-tile-pane { filter: grayscale(.62) saturate(.8) brightness(1.04); }
.lbg-carte .leaflet-attribution-flag { display: none !important; }
/* ---------- Mots en gras : lisibles dans chaque contexte --------------- */
/* Le corps de texte est en vert-gris ; le gras revient à l'encre pour
ressortir vraiment, et au blanc sur les fonds sombres. */
.lbg-lead strong, .lbg-body strong, .lbg-communes strong, .lbg-tarif__liste strong,
.lbg-faq__txt strong, .lbg-quote strong, .lbg-service__text strong, .lbg-zone-france strong { color: var(--lbg-ink); font-weight: 700; }
.lbg-sec--dark .lbg-lead strong, .lbg-sec--dark .lbg-body strong, .lbg-sec--dark .lbg-faq__txt strong,
.lbg-step__t strong, .lbg-note-dark strong { color: #FFFFFF; font-weight: 700; }
/* ---------- Puces : la pastille sort du flux ------------------------- */
/* En display:flex, un et le texte qui le suit deviennent deux
éléments de la ligne, séparés par le gap : on voyait un grand blanc après
chaque mot en gras. La pastille passe donc en position absolue et le texte
redevient une ligne normale. */
.lbg-hero__liste li,
.lbg-bullets li { display: block; position: relative; gap: 0; }
.lbg-hero__liste li { padding-left: 35px; }
.lbg-bullets li { padding-left: 26px; }
.lbg-hero__liste li::before,
.lbg-bullets li::before { position: absolute; left: 0; margin-top: 0; }
.lbg-hero__liste li::before { top: 3px; }
.lbg-bullets li::before { top: 9px; }
/* ---------- Pied de page : plan d'accès, badge carbone, mentions ------ */
.lbg-footer__carte { margin: 44px -40px 0; line-height: 0; }
.lbg-footer__carte iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(.55) saturate(.8) brightness(1.02); }
.lbg-carbone { display: inline-flex; flex-direction: column; gap: 2px; max-width: 330px; margin-top: 26px; padding: 14px 18px; border: 1px solid #1E4029; border-radius: 14px; color: #8FA295; }
.lbg-carbone:hover { border-color: var(--lbg-orange); color: #8FA295; }
.lbg-carbone__g { font-family: 'Gabarito', sans-serif; font-size: 20px; font-weight: 700; color: var(--lbg-yellow); }
.lbg-carbone__txt { font-size: 13px; line-height: 1.45; }
.lbg-carbone__txt strong { color: #FFFFFF; }
.lbg-carbone__marque { font-family: 'Gabarito', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7B8B80; margin-top: 4px; }
.lbg-footer__liens { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lbg-footer__liens a { color: #C9D5CD; }
.lbg-footer__liens a:hover { color: var(--lbg-yellow); }
@media (max-width: 700px) {
.lbg-footer__carte { margin: 34px -20px 0; }
.lbg-footer__carte iframe { height: 240px; }
}
/* Lien vers une source officielle dans une carte de prix. */
.lbg-tarif__liste a { color: var(--lbg-rust); text-decoration: underline; text-underline-offset: 3px; }
.lbg-tarif__liste a:hover { color: var(--lbg-ink); }
/* ====================================================================== */
/* Pages simples : mentions légales, politique de confidentialité */
/* Bannière sombre, sommaire qui suit le défilement, corps de texte mis */
/* en forme, encart de contact en fin de page. */
/* ====================================================================== */
.lbg-page { max-width: none; margin: 0; padding: 0; }
.lbg-page__banniere { padding: clamp(48px, 5vw, 86px) 40px clamp(40px, 4.2vw, 68px); background: linear-gradient(180deg, #153021 0%, var(--lbg-nuit) 100%); }
.lbg-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lbg-fil a { color: var(--lbg-yellow); }
.lbg-fil a:hover { color: #FFFFFF; }
.lbg-fil span { color: #7B8B80; }
.lbg-fil__ici { color: #C9D5CD; }
.lbg-page__titre { margin-top: 22px; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.03em; color: #FFFFFF; }
.lbg-page__maj { margin-top: 16px; font-family: 'Gabarito', sans-serif; font-size: 13px; color: #8FA295; }
/* Sommaire à gauche, texte à droite. Le sommaire reste visible au défilement. */
.lbg-page__grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.lbg-somm { position: sticky; top: 104px; }
.lbg-somm__titre { font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lbg-rust); }
.lbg-site .lbg-somm__liste { margin-top: 16px; display: grid; gap: 2px; border-left: 2px solid var(--lbg-border); }
.lbg-somm__liste a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.4; color: var(--lbg-muted); }
.lbg-somm__liste a:hover { border-left-color: var(--lbg-orange); color: var(--lbg-ink); }
/* Corps de texte : même échelle de titre que le reste du site. */
.lbg-page__content { max-width: 68ch; margin-top: 0; font-size: 17.5px; line-height: 1.8; color: #3C4A41; }
.lbg-page__content > *:first-child { margin-top: 0; font-size: 19px; line-height: 1.7; color: var(--lbg-ink); }
.lbg-page__content h2 { margin-top: 1.9em; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; color: var(--lbg-ink); scroll-margin-top: 104px; }
.lbg-page__content h2 + p, .lbg-page__content h2 + ul { margin-top: .8em; }
.lbg-page__content strong { color: var(--lbg-ink); }
.lbg-site .lbg-page__content ul { margin-top: 1.1em; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.lbg-page__content li { position: relative; padding-left: 26px; }
.lbg-page__content li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--lbg-orange); }
.lbg-page__content li + li { margin-top: 0; }
/* Encart de fin : une question, un téléphone, une adresse. */
.lbg-page__aide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: center; }
.lbg-page__aide .lbg-h2 { margin-top: 18px; }
.lbg-page__aide .lbg-lead { margin-top: 14px; }
.lbg-page__aide-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.lbg-page__aide .lbg-btn--light { background: #FFFFFF; }
@media (max-width: 1000px) {
.lbg-page__grille { grid-template-columns: 1fr; }
.lbg-somm { position: static; padding-bottom: 8px; }
.lbg-page__content { max-width: none; }
.lbg-page__aide { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.lbg-page__banniere { padding-left: 20px; padding-right: 20px; }
.lbg-page__content { font-size: 17px; }
.lbg-page__content > *:first-child { font-size: 18px; }
}
/* ---------- Boutons : ne jamais déborder de l'écran ------------------- */
/* .lbg-btn porte white-space:nowrap : un libellé long, « Obtenir un prix pour
mon projet », sortait du téléphone. Sous 700 px le texte revient à la ligne
et le bouton ne dépasse plus la largeur disponible. */
.lbg-btn { max-width: 100%; }
@media (max-width: 700px) {
.lbg-btn { white-space: normal; text-align: center; justify-content: center; padding: 16px 22px; font-size: 17px; }
.lbg-cta-row .lbg-btn, .lbg-price-cta .lbg-btn, .lbg-tarifs__pied .lbg-btn, .lbg-page__aide-actions .lbg-btn { width: 100%; }
.lbg-cta-row, .lbg-price-cta, .lbg-page__aide-actions { width: 100%; }
}
/* ---------- Fonds sombres éclaircis d'un cran ------------------------- */
/* Le vert forêt de JPC tirait vers le noir et écrasait la page. Toutes les
sections sombres montent ensemble, pour que la bannière ne se retrouve pas
plus claire que les sections qui la suivent. */
:root { --lbg-nuit: #12291C; }
.lbg-hero { background: linear-gradient(180deg, #1C4030 0%, #143020 100%); }
.lbg-sec--dark { background: linear-gradient(180deg, #1A3B2A 0%, #14301F 100%); }
#chantiers.lbg-sec--dark { background: linear-gradient(180deg, #17351F 0%, #112619 100%); }
.lbg-page__banniere { background: linear-gradient(180deg, #1C4030 0%, #143020 100%); }
.lbg-footer { background: #112619; }
.lbg-bandeau { background: #143020; }
/* Les blocs posés sur ces fonds suivent, sinon ils disparaissent. */
.lbg-note-dark, .lbg-info__item { background: #22503A; }
.lbg-stats { border-top-color: #2C5A42; }
.lbg-stat { border-right-color: #2C5A42; }
.lbg-carbone { border-color: #2C5A42; }
.lbg-footer__bottom { border-top-color: #2C5A42; }
.lbg-prices li { background: #1B4029; border-color: #2C5A42; }
.lbg-note-outline { border-color: #2C5A42; }
.lbg-shot { background: #17351F; }
.lbg-hero__media { background: #22503A; }
/* ---------- Mot du fondateur : les trois repères du chantier ---------- */
/* Trois cartes identiques et un sur-titre en capitales espacées, c'était
plat. Chacune reçoit son pictogramme dans une pastille sombre, et le
sur-titre devient un vrai titre. */
.lbg-valeurs { margin-top: 22px; display: grid; gap: 12px; }
.lbg-valeur { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--lbg-cream); border: 1px solid var(--lbg-border); border-radius: 18px; padding: 22px 24px; transition: border-color .3s ease; }
.lbg-valeur:hover { border-color: var(--lbg-orange); }
.lbg-valeur__ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--lbg-ink); color: var(--lbg-yellow); }
.lbg-valeur__ico svg { width: 26px; height: 26px; }
.lbg-valeur__t { font-size: 20px; line-height: 1.2; color: var(--lbg-ink); }
.lbg-valeur__corps p { margin-top: 8px; font-size: 16.5px; line-height: 1.65; color: #3C4A41; }
.lbg-valeur strong { color: var(--lbg-ink); }
.lbg-valeur a { color: var(--lbg-rust); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
.lbg-valeur { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px; }
.lbg-valeur__ico { width: 44px; height: 44px; border-radius: 12px; }
.lbg-valeur__ico svg { width: 22px; height: 22px; }
.lbg-valeur__t { font-size: 18px; }
}
/* ---------- FAQ : les énumérations sortent en liste ------------------- */
/* Une suite de durées ou de pièces alignée dans un paragraphe ne se lit pas.
L'intitulé en gras est suivi d'un point, jamais de deux-points. */
.lbg-site .lbg-faq__liste { margin-top: 4px; display: grid; gap: 10px; }
.lbg-faq__liste li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.6; color: var(--lbg-muted); }
.lbg-faq__liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--lbg-orange); }
.lbg-faq__liste strong { color: var(--lbg-ink); }
/* ====================================================================== */
/* Modernisation du 2026-10-02 */
/* Mêmes couleurs (vert HK, orange, crème), mêmes polices, mêmes textes */
/* et mêmes photos. Ce qui change : bannière claire avec un aplat vert */
/* décalé derrière la photo, moins de sections sombres (déroulé et météo */
/* passent en vert pâle), décor discret de ronds et de trames de points, */
/* titres plus grands, zoom au survol des photos, FAQ avec photos, */
/* formulaire posé sur une photo de chantier voilée de vert. */
/* Retour à l'avant : ne plus charger cette feuille (functions.php). */
/* ====================================================================== */
:root {
--lbg-vert-pale: #E3EFE6;
--lbg-sapin: #1C4030;
--lbg-anneau-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%23E2650F' stroke-opacity='.6' stroke-width='3.4' stroke-dasharray='.1 10' stroke-linecap='round'/%3E%3C/svg%3E");
--lbg-anneau-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%2335C67F' stroke-opacity='.75' stroke-width='3.4' stroke-dasharray='.1 10' stroke-linecap='round'/%3E%3C/svg%3E");
--lbg-points-encre: radial-gradient(circle, rgba(15, 35, 24, .2) 1.8px, transparent 2.4px) 0 0 / 18px 18px;
--lbg-points-orange: radial-gradient(circle, rgba(226, 101, 15, .5) 2px, transparent 2.6px) 0 0 / 16px 16px;
}
/* ---------- Fonds de section : pleine largeur, teintes qui se voient ---- */
.lbg-sec--vert { background: var(--lbg-vert-pale); }
.lbg-sec--cream { background: var(--lbg-cream); }
.lbg-sec--sand { background: var(--lbg-cream); }
/* ---------- Titres de section plus grands, une seule taille ------------ */
.lbg-h2 { font-size: clamp(38px, 4.3vw, 64px); line-height: 1.05; }
/* ---------- En-tête : même crème que la bannière ----------------------- */
.lbg-header { background: var(--lbg-cream); }
/* ---------- Bannière : grande photo de chantier pleine largeur ---------- */
/* La photo occupe la droite de l'écran jusqu'au bord, le texte reste à
gauche sur un voile crème qui se fond dans la photo. Tampon « devis
gratuit » posé dans le ciel, repères dans une barre blanche qui chevauche
le bas de la photo. Le texte n'a pas changé. */
.lbg-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--lbg-cream); color: var(--lbg-ink); padding: clamp(64px, 6.4vw, 112px) 40px 48px; }
.lbg-hero::before { display: none; }
.lbg-hero .lbg-hero__fond { position: absolute; top: 0; right: 0; bottom: 0; left: 38%; z-index: -1; overflow: hidden; background: var(--lbg-placeholder); }
.lbg-hero__fond picture,
.lbg-hero__fond img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lbg-hero__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lbg-cream) 0%, rgba(251, 249, 244, .9) 18%, rgba(251, 249, 244, .4) 36%, rgba(251, 249, 244, 0) 56%); }
.lbg-hero__texte { max-width: 660px; }
.lbg-hero .lbg-h1 { color: var(--lbg-muted); }
.lbg-hero .lbg-h1__big,
.lbg-hero .lbg-mark { color: var(--lbg-ink); }
.lbg-hero__text { color: var(--lbg-muted); }
.lbg-hero__text strong,
.lbg-hero__liste li strong { color: var(--lbg-ink); }
.lbg-hero__liste li { color: #3C4A41; }
.lbg-hero .lbg-btn--light { background: #FFFFFF; border-color: var(--lbg-border); color: var(--lbg-ink); }
.lbg-hero .lbg-btn--light:hover { background: #FFFFFF; border-color: var(--lbg-ink); color: var(--lbg-ink); }
.lbg-hero .lbg-btn--orange:hover { background: var(--lbg-rust); color: #FFFFFF; }
/* Sur-titre en pastille blanche, point orange. */
.lbg-hero .lbg-hero__signature { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--lbg-border); color: var(--lbg-ink); font-size: 12px; letter-spacing: .12em; }
.lbg-hero .lbg-hero__signature::before { width: 9px; height: 9px; border-radius: 50%; background: var(--lbg-orange); }
/* Repères : barre blanche, pictogrammes deux tons. */
.lbg-hero .lbg-stats { max-width: var(--lbg-content); margin: clamp(56px, 6vw, 96px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 20px; }
.lbg-hero .lbg-stat { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 22px 26px; text-align: left; border-right: 1px solid var(--lbg-border); border-bottom: 0; }
.lbg-hero .lbg-stat:last-child { border-right: 0; }
.lbg-stat__ico { position: relative; isolation: isolate; flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--lbg-sapin); color: #FFFFFF; }
.lbg-stat__ico::before { content: ""; position: absolute; right: 8px; bottom: 8px; z-index: -1; width: 22px; height: 22px; border-radius: 50%; background: rgba(53, 198, 127, .55); }
.lbg-stat__ico svg { width: 26px; height: 26px; }
.lbg-hero .lbg-stat__v { font-family: 'Gabarito', sans-serif; font-size: clamp(20px, 1.7vw, 25px); font-weight: 700; line-height: 1.1; color: var(--lbg-ink); }
.lbg-hero .lbg-stat__l { margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--lbg-muted); }
/* ---------- Décor de fond : une seule forme discrète, une section sur deux --- */
/* Toujours dans un coin, à moitié coupées par le bord, dans la marge de la
section ou derrière une photo ou une carte blanche, jamais sous un texte. */
.lbg-deco, #meteo { position: relative; isolation: isolate; overflow: hidden; }
.lbg-deco::before, .lbg-deco::after,
#meteo::before, #meteo::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
/* 01 Prestations (blanc) : anneau plein vert en bas à gauche, anneau de points orange en haut à droite */
.lbg-deco--services::before { left: -150px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; border: 30px solid rgba(53, 198, 127, .16); }
.lbg-deco--services::after { display: none; }
/* 02 Déroulé (vert pâle) : disque blanc en haut à droite, trame de points derrière les photos */
.lbg-deco--methode::before { display: none; }
.lbg-deco--methode::after { display: none; }
/* 03 Tarifs (crème) : anneau de points vert en haut à droite, disque vert pâle en bas à gauche */
.lbg-deco--tarifs::before { display: none; }
.lbg-deco--tarifs::after { left: -150px; bottom: -150px; width: 300px; height: 300px; border-radius: 50%; background: rgba(53, 198, 127, .14); }
/* 04 Réalisations (sombre) : un seul anneau vert en haut à droite */
.lbg-deco--chantiers::before { display: none; }
.lbg-deco--chantiers::after { display: none; }
/* 05 Fondateur (blanc) : disque vert pâle derrière la photo, trame au-dessus */
.lbg-deco--fondateur::before { right: -190px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: var(--lbg-vert-pale); }
.lbg-deco--fondateur::after { display: none; }
/* 06 Météo (vert pâle) : anneau blanc en haut à droite, demi-disque orange en bas à gauche */
#meteo::before { right: -110px; top: -150px; width: 300px; height: 300px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .8); }
#meteo::after { left: -50px; bottom: -45px; width: 110px; height: 110px; border-radius: 50%; background: var(--lbg-orange); opacity: .9; }
/* 07 Zone (blanc) : anneau plein vert en haut à droite, trame en bas à droite */
.lbg-deco--zone::before { display: none; }
.lbg-deco--zone::after { display: none; }
/* 08 FAQ (crème) : disque vert pâle derrière les photos, anneau de points orange en bas à gauche */
.lbg-deco--faq::before { right: -180px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(53, 198, 127, .14); }
.lbg-deco--faq::after { display: none; }
/* ---------- 02 Déroulé du chantier : une photo par étape --------------- */
/* Ordinateur : cinq colonnes, pastilles sur un trait en pointillés au-dessus
des photos. Sous 1100 px : une colonne, trait vertical dans l'axe des
pastilles, jusqu'à la pastille suivante. */
.lbg-sec--vert .lbg-eyebrow { color: var(--lbg-rust); }
.lbg-sec--vert .lbg-h2 { color: var(--lbg-ink); }
.lbg-sec--vert .lbg-lead { color: var(--lbg-muted); }
.lbg-sec--vert .lbg-lead strong { color: var(--lbg-ink); }
.lbg-sec--vert .lbg-note-dark { background: #FFFFFF; color: #3C4A41; }
.lbg-sec--vert .lbg-note-dark strong { color: var(--lbg-ink); }
/* Étapes en cartes blanches : photo avec son étiquette, pastille numérotée à
cheval sur le bas de la photo, pointillés d'une carte à la suivante. */
.lbg-site .lbg-etapes { margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.lbg-etape { position: relative; display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border-radius: 22px; }
.lbg-etape__haut { position: relative; }
.lbg-etape__haut::after { content: ""; position: absolute; left: 100%; bottom: -2px; width: 22px; border-top: 4px dotted var(--lbg-sapin); }
.lbg-etape:last-child .lbg-etape__haut::after { display: none; }
.lbg-etape__photo { position: relative; aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; overflow: hidden; background: var(--lbg-placeholder); }
.lbg-etape__photo picture,
.lbg-etape__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lbg-etape__n { position: absolute; left: 20px; bottom: -27px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; border: 4px solid #FFFFFF; background: var(--lbg-sapin); color: #FFFFFF; font-family: 'Gabarito', sans-serif; font-size: 19px; font-weight: 700; }
.lbg-etape__corps { flex: 1; padding: 42px 22px 26px; }
.lbg-etape__t { font-size: 21px; line-height: 1.15; color: var(--lbg-ink); }
.lbg-etape__corps p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #2B3A31; }
.lbg-etape__corps strong { color: var(--lbg-ink); }
.lbg-etapes__note { margin-top: 32px; }
/* ---------- 03 Tarifs : prix de départ, clairs et sans fourchette ------ */
.lbg-prix-grille { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.lbg-prix { display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border: 1px solid var(--lbg-border); border-radius: 20px; overflow: hidden; transition: transform .4s var(--lbg-ease, ease), border-color .3s ease; }
.lbg-prix:hover { transform: translateY(-4px); border-color: var(--lbg-orange); }
.lbg-prix__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lbg-placeholder); }
.lbg-prix__img picture,
.lbg-prix__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lbg-prix__etiquette { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; color: var(--lbg-ink); font-family: 'Gabarito', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lbg-prix__etiquette--orange { background: var(--lbg-orange); color: #FFFFFF; }
.lbg-prix__corps { flex: 1; display: flex; flex-direction: column; padding: 28px 30px 30px; }
.lbg-prix__nom { font-size: 27px; line-height: 1.15; color: var(--lbg-ink); }
.lbg-prix__montant { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: 14px; background: var(--lbg-vert-pale); }
.lbg-prix__montant span { font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lbg-rust); }
.lbg-prix__montant strong { font-family: 'Gabarito', sans-serif; font-size: clamp(38px, 3.2vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--lbg-ink); }
.lbg-prix__pour { margin-top: 22px; font-size: 16px; font-weight: 700; color: var(--lbg-ink); }
.lbg-site .lbg-prix__liste { margin-top: 10px; display: grid; gap: 10px; }
.lbg-prix__liste li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: #3C4A41; }
.lbg-prix__liste li::before,
.lbg-prix-compris__liste li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--lbg-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.lbg-prix__note { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--lbg-muted); }
.lbg-prix__note a { color: var(--lbg-rust); text-decoration: underline; text-underline-offset: 3px; }
.lbg-prix__lien { align-self: flex-start; margin-top: auto; padding-top: 24px; font-size: 16.5px; font-weight: 700; color: var(--lbg-orange); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lbg-prix__lien::after { content: " \2192"; }
.lbg-prix__lien:hover { color: var(--lbg-rust); }
/* Bandeau vert sapin : ce que comprend chaque devis. */
.lbg-prix-compris { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 22px 28px; border-radius: 18px; background: var(--lbg-sapin); color: #FFFFFF; }
.lbg-prix-compris__t { font-family: 'Gabarito', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lbg-yellow); }
.lbg-site .lbg-prix-compris__liste { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.lbg-prix-compris__liste li { position: relative; padding-left: 28px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.lbg-prix-compris__liste li::before { top: 0; background-color: var(--lbg-yellow); }
#tarifs .lbg-tarifs__pied { margin-top: 16px; }
/* ---------- 05 Fondateur : citation sans boîte, repères en cartes blanches */
.lbg-founder .lbg-quote { position: relative; isolation: isolate; margin-top: 34px; padding: 0; background: none; border: 0; border-radius: 0; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.6; color: var(--lbg-ink); }
.lbg-founder .lbg-quote::before { content: none; }
.lbg-valeur { background: #FFFFFF; border-color: var(--lbg-border); }
.lbg-valeur__ico { position: relative; isolation: isolate; background: var(--lbg-sapin); color: #FFFFFF; }
.lbg-valeur__ico::before { content: ""; position: absolute; right: 9px; bottom: 9px; width: 24px; height: 24px; border-radius: 50%; background: rgba(53, 198, 127, .55); z-index: -1; }
/* ---------- 06 Météo : section claire, les cartes blanches ressortent -- */
#meteo.lbg-sec--dark { background: var(--lbg-vert-pale); color: var(--lbg-ink); }
#meteo.lbg-sec--dark .lbg-eyebrow { color: var(--lbg-rust); }
#meteo.lbg-sec--dark .lbg-h2 { color: var(--lbg-ink); }
#meteo .lbg-meteo-source { color: var(--lbg-muted); }
#meteo .lbg-meteo-source a { color: var(--lbg-ink); }
/* ---------- 07 Zone : pastilles de départements en vert pâle ---------- */
.lbg-depts li { background: var(--lbg-vert-pale); border-color: #CFE3D5; }
/* ---------- 08 FAQ : questions à gauche, deux photos à droite ---------- */
.lbg-faq-col .lbg-faq { margin-top: 40px; }
.lbg-faq-photos { min-height: 0; }
/* ---------- 09 Contact : photo de chantier voilée de vert en fond ------ */
.lbg-contact--photo { position: relative; isolation: isolate; overflow: hidden; }
.lbg-contact__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lbg-contact__fond picture,
.lbg-contact__fond img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lbg-contact__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(17, 38, 25, .95) 0%, rgba(20, 48, 32, .9) 50%, rgba(20, 48, 32, .8) 100%); }
.lbg-js .lbg-contact__fond .lbg-revele { opacity: 1 !important; animation: none !important; }
.lbg-contact--photo .lbg-info__item { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
/* Zone sur vert pâle (la météo a été retirée) : pastilles blanches. */
.lbg-sec--vert .lbg-depts li { background: #FFFFFF; border-color: var(--lbg-border); }
/* ---------- 04 Réalisations : avant / après à faire glisser ------------- */
.lbg-avap-bloc { margin-top: 36px; }
.lbg-avap-intro { font-size: 17px; line-height: 1.6; color: #C9D5CD; }
.lbg-avap-intro strong { color: #FFFFFF; }
.lbg-avap-grille { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lbg-avap-carte { margin: 0; min-width: 0; }
.lbg-avap { --p: 50%; position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #17351F; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lbg-avap:focus-visible { outline: 3px solid var(--lbg-yellow); outline-offset: 3px; }
.lbg-avap__apres,
.lbg-avap__avant { position: absolute; inset: 0; }
.lbg-avap__avant { z-index: 1; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.lbg-avap picture,
.lbg-avap img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.lbg-avap__poignee { position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 2; width: 3px; margin-left: -1.5px; background: #FFFFFF; }
.lbg-avap__poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
.lbg-avap.is-glisse .lbg-avap__poignee::after { background-color: var(--lbg-yellow); }
.lbg-avap__label { position: absolute; top: 14px; z-index: 3; padding: 6px 11px; border-radius: 999px; background: rgba(15, 35, 24, .78); color: #FFFFFF; font-family: 'Gabarito', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; pointer-events: none; }
.lbg-avap__label--avant { left: 14px; }
.lbg-avap__label--apres { right: 14px; }
.lbg-avap-carte figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; line-height: 1.4; color: #C9D5CD; }
.lbg-avap-carte figcaption strong { font-size: 17px; color: #FFFFFF; }
/* Les photos d'un comparateur ne s'animent jamais : l'avant et l'après
doivent rester superposés. */
.lbg-js .lbg-avap .lbg-revele,
.lbg-js .lbg-avap-carte.lbg-revele { opacity: 1 !important; animation: none !important; }
#chantiers .lbg-gallery--mosaique { margin-top: 0; }
/* ---------- Zoom au survol des photos (cadre fixe, image qui avance) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.lbg-js .lbg-zoom .lbg-zoom__img,
.lbg-photo img,
.lbg-etape__photo img,
.lbg-prix__img img { transition: transform .6s var(--lbg-ease, ease); }
.lbg-js .lbg-zoom:hover .lbg-zoom__img,
.lbg-js .lbg-zoom:focus-visible .lbg-zoom__img,
.lbg-photo:hover img,
.lbg-etape:hover .lbg-etape__photo img,
.lbg-prix:hover .lbg-prix__img img { transform: scale(1.07); }
}
/* ---------- Damier : la carte passe à gauche, les photos de la FAQ à droite */
@media (min-width: 901px) {
#zone .lbg-split > .lbg-map { order: -1; }
.lbg-faq-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
}
/* ---------------------------------------------------------------------- */
/* Responsive : toujours en dernier */
/* ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
/* Déroulé : une carte par ligne, photo à gauche, pastille sur la jonction,
pointillés d'une carte à la suivante dans l'axe des pastilles. */
.lbg-site .lbg-etapes { grid-template-columns: 1fr; gap: 30px; }
.lbg-etape { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.lbg-etape__haut { height: 100%; }
.lbg-etape__haut::after { display: none; }
.lbg-etape::after { content: ""; position: absolute; left: calc(40% - 2px); top: 100%; height: 30px; border-left: 4px dotted var(--lbg-sapin); }
.lbg-etape:last-child::after { display: none; }
.lbg-etape__photo { aspect-ratio: auto; height: 100%; min-height: 220px; border-radius: 22px 0 0 22px; }
.lbg-etape__n { left: auto; right: -27px; bottom: auto; top: 22px; }
.lbg-etape__corps { align-self: center; padding: 28px 28px 28px 50px; }
}
@media (max-width: 1100px) {
/* Tarifs : une carte par ligne, photo à gauche. */
.lbg-prix-grille { grid-template-columns: 1fr; }
.lbg-avap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lbg-prix { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
.lbg-prix__img { aspect-ratio: auto; min-height: 260px; }
}
@media (max-width: 1000px) {
/* Repères de la bannière : deux par ligne. */
.lbg-hero .lbg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lbg-hero .lbg-stat { border-right: 0; border-bottom: 1px solid var(--lbg-border); }
.lbg-hero .lbg-stat:nth-child(odd) { border-right: 1px solid var(--lbg-border); }
.lbg-hero .lbg-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 900px) {
/* Bannière : la photo passe au-dessus du texte, pleine largeur. */
.lbg-hero { padding: 0 0 48px; }
.lbg-hero .lbg-hero__fond { position: relative; left: auto; height: clamp(300px, 56vw, 460px); }
.lbg-hero__fond::after { background: linear-gradient(180deg, rgba(251, 249, 244, 0) 62%, var(--lbg-cream) 100%); }
.lbg-hero > .lbg-wrap { margin-top: -18px; padding: 0 40px; }
.lbg-hero__texte { max-width: none; }
.lbg-hero .lbg-stats { margin: 40px 40px 0; }
/* FAQ : une seule photo, au-dessus des questions, en paysage. */
.lbg-faq-photos .lbg-photo:nth-child(2) { display: none; }
.lbg-faq-photos .lbg-photo { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
.lbg-h2 { font-size: clamp(31px, 8.4vw, 38px); }
/* Bannière : composition resserrée, le titre arrive dans le premier écran. */
.lbg-hero { padding: 0 0 40px; }
.lbg-hero .lbg-hero__fond { left: 0; height: clamp(260px, 72vw, 340px); }
.lbg-hero > .lbg-wrap { padding: 0 20px; }
.lbg-hero .lbg-stats { margin: 32px 20px 0; }
.lbg-hero .lbg-stat { gap: 12px; padding: 16px 14px; }
.lbg-stat__ico { width: 42px; height: 42px; border-radius: 12px; }
.lbg-stat__ico svg { width: 22px; height: 22px; }
.lbg-stat__ico::before { width: 18px; height: 18px; right: 6px; bottom: 6px; }
.lbg-hero .lbg-stat__v { font-size: 19px; }
.lbg-hero .lbg-stat__l { font-size: 13px; }
/* Décor réduit et logé dans la marge haute ou basse de la section. */
.lbg-deco--services::before { left: -60px; bottom: -70px; width: 120px; height: 120px; border-width: 16px; }
.lbg-deco--services::after { right: -40px; top: -60px; width: 110px; height: 110px; }
.lbg-deco--methode::before { right: -60px; top: -100px; width: 150px; height: 150px; }
.lbg-deco--methode::after { left: 8px; bottom: 10px; width: 100px; height: 44px; }
.lbg-deco--tarifs::before { right: -36px; top: -60px; width: 110px; height: 110px; }
.lbg-deco--tarifs::after { left: -60px; bottom: -80px; width: 130px; height: 130px; }
.lbg-deco--chantiers::before { right: -70px; top: -80px; width: 140px; height: 140px; border-width: 16px; }
.lbg-deco--fondateur::before { right: -60px; bottom: -80px; width: 130px; height: 130px; }
.lbg-deco--fondateur::after { right: 10px; top: 10px; width: 90px; height: 44px; }
#meteo::before { right: -50px; top: -80px; width: 130px; height: 130px; border-width: 14px; }
#meteo::after { left: -36px; bottom: -40px; width: 80px; height: 80px; }
.lbg-deco--zone::before { right: -50px; top: -70px; width: 120px; height: 120px; border-width: 14px; }
.lbg-deco--zone::after { right: 10px; bottom: 8px; width: 90px; height: 44px; }
.lbg-deco--faq::before { right: -60px; top: -90px; width: 140px; height: 140px; }
.lbg-deco--faq::after { left: -50px; bottom: -50px; width: 110px; height: 110px; }
/* Déroulé : photo au-dessus du texte, pastille à cheval, pointillés
d'une carte à la suivante sous la pastille. */
.lbg-site .lbg-etapes { margin-top: 40px; gap: 28px; }
.lbg-etape { display: flex; }
.lbg-etape__haut { height: auto; }
.lbg-etape::after { left: 45px; height: 28px; }
.lbg-etape__photo { aspect-ratio: 16 / 10; height: auto; min-height: 0; border-radius: 20px 20px 0 0; }
.lbg-etape__n { left: 20px; right: auto; top: auto; bottom: -25px; width: 50px; height: 50px; font-size: 17px; }
.lbg-etape__corps { align-self: stretch; padding: 38px 20px 24px; }
.lbg-etape__t { font-size: 21px; }
/* Tarifs : photo au-dessus, prix bien visible. */
.lbg-prix { display: flex; }
.lbg-prix__img { aspect-ratio: 16 / 9; min-height: 0; }
.lbg-prix__corps { padding: 24px 22px 26px; }
.lbg-prix__nom { font-size: 24px; }
.lbg-prix__montant strong { font-size: 40px; }
.lbg-prix-compris { padding: 20px 22px; }
.lbg-site .lbg-prix-compris__liste { flex-direction: column; gap: 10px; }
/* Avant / après : un par ligne, en paysage. */
.lbg-avap-grille { grid-template-columns: 1fr; gap: 26px; }
.lbg-avap { aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
.lbg-hero .lbg-stat { flex-direction: column; align-items: flex-start; }
}
/* ====================================================================== */
/* Polices d'origine du site (Bricolage Grotesque, Schibsted Grotesk, */
/* Spline Sans Mono) avec leurs graisses d origine, titres gras compris. */
/* Aucun trait sous les mots : le mot-clé des titres passe en vert. Fond : */
/* seulement les ronds pâles façon Tigmi. Placé en fin de feuille. */
/* ====================================================================== */
/* Mot-clé des titres : vert, sans trait ni fond. Vert foncé sur les fonds
clairs (lisible), vert HK sur les fonds sombres. */
.lbg-mark { background: none !important; padding: 0 !important; animation: none !important; color: #24935A !important; }
.lbg-mark::before, .lbg-mark::after { display: none !important; }
.lbg-sec--dark .lbg-mark, .lbg-page__banniere .lbg-mark { color: var(--lbg-yellow) !important; }
/* Fond : plus de formes en pseudo-éléments, seulement les ronds pâles à bord
net, un grand coupé dans un coin et un petit sur le bord opposé. */
.lbg-deco::before, .lbg-deco::after { display: none !important; }
#services, .lbg-founder {
background-image:
radial-gradient(circle 260px at right -110px top -130px, var(--lbg-vert-pale) 99.4%, transparent 100%),
radial-gradient(circle 120px at left 6% bottom -70px, #ECE4D6 99%, transparent 100%);
background-repeat: no-repeat;
}
#tarifs, #faq {
background-image:
radial-gradient(circle 300px at left -130px bottom -150px, #E2ECDF 99.4%, transparent 100%),
radial-gradient(circle 100px at right 7% top -50px, #EAE2D3 99%, transparent 100%);
background-repeat: no-repeat;
}
/* Réalisations : rien que des avant / après, trois par ligne. */
.lbg-avap-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) {
.lbg-avap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
#services, .lbg-founder {
background-image:
radial-gradient(circle 150px at right -80px top -90px, var(--lbg-vert-pale) 99.2%, transparent 100%),
radial-gradient(circle 70px at left 6% bottom -44px, #ECE4D6 99%, transparent 100%);
}
#tarifs, #faq {
background-image:
radial-gradient(circle 170px at left -90px bottom -100px, #E2ECDF 99.2%, transparent 100%),
radial-gradient(circle 60px at right 7% top -34px, #EAE2D3 99%, transparent 100%);
}
}
@media (max-width: 700px) {
.lbg-avap-grille { grid-template-columns: 1fr; }
}
/* Sans animations décoratives (2026-10-02) : anim-3.css et anim-3.js ne sont
plus chargés. Restent l'interface et les survols : ouverture fluide des
questions, zoom de la photo sous la souris. */
:root { --lbg-ease: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: no-preference) {
.lbg-faq__a { transition: grid-template-rows .35s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.lbg-service__img img { transition: transform .6s var(--lbg-ease); }
.lbg-service:hover .lbg-service__img img { transform: scale(1.07); }
}
/* ---------- Bannière en deux parties (2026-10-02, « j'aime pas l'image en
fondu ») : texte à gauche sur le crème, photo nette à droite jusqu'au
bord de l'écran, un seul coin arrondi, aucun voile. ------------------ */
.lbg-hero { padding: 0 0 48px; }
.lbg-hero__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(560px, 46vw, 720px); }
.lbg-hero__texte { align-self: center; max-width: none; padding: clamp(48px, 5vw, 88px) clamp(32px, 4vw, 72px) clamp(40px, 4vw, 72px) max(40px, calc((100vw - var(--lbg-content)) / 2)); }
.lbg-hero__texte > * { max-width: 660px; }
.lbg-hero .lbg-hero__fond { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 0; height: auto; min-height: 100%; border-radius: 0 0 0 28px; overflow: hidden; }
.lbg-hero__fond::after { content: none; display: none; }
.lbg-hero .lbg-stats { width: calc(100% - 80px); max-width: var(--lbg-content); margin: 40px auto 0; }
/* Étiquettes sur les photos : rectangulaires, sans pastille. */
.lbg-service__badge, .lbg-prix__etiquette, .lbg-avap__label { border-radius: 4px; }
.lbg-service__badge { padding: 7px 12px; }
.lbg-service__badge::before { display: none; }
/* Déroulé : numéros d'étape en orange. */
.lbg-etape__n { background: var(--lbg-orange); }
/* Réalisations : plus de phrase d'introduction ni de légende. */
.lbg-avap-bloc { margin-top: 40px; }
.lbg-avap-grille { margin-top: 0; }
@media (max-width: 900px) {
.lbg-hero__grille { grid-template-columns: 1fr; min-height: 0; }
.lbg-hero .lbg-hero__fond { order: -1; height: clamp(280px, 60vw, 460px); min-height: 0; border-radius: 0; }
.lbg-hero__texte { padding: 32px 40px 0; }
.lbg-hero__texte > * { max-width: none; }
.lbg-hero .lbg-stats { width: calc(100% - 80px); margin-top: 36px; }
}
@media (max-width: 700px) {
.lbg-hero { padding-bottom: 40px; }
.lbg-hero .lbg-hero__fond { height: clamp(240px, 66vw, 320px); }
.lbg-hero__texte { padding: 26px 20px 0; }
.lbg-hero .lbg-stats { width: calc(100% - 40px); margin-top: 32px; }
}
/* ---------- Bannière : photo encadrée (2026-10-02, « mets pas la photo en
full hauteur ») : arrondie aux quatre coins, à l'intérieur de la largeur
du site, centrée en hauteur à côté du texte. ------------------------- */
.lbg-hero__grille { max-width: calc(var(--lbg-content) + 80px); min-height: 0; margin: 0 auto; padding: clamp(48px, 5vw, 88px) 40px 0; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 4vw, 72px); align-items: center; }
.lbg-hero__texte { padding: 0; }
.lbg-hero .lbg-hero__fond { height: clamp(400px, 34vw, 540px); min-height: 0; border-radius: 24px; }
@media (max-width: 900px) {
.lbg-hero__grille { grid-template-columns: 1fr; padding: 32px 40px 0; gap: 28px; }
.lbg-hero__texte { padding: 0; }
.lbg-hero .lbg-hero__fond { height: clamp(260px, 56vw, 420px); border-radius: 20px; }
}
@media (max-width: 700px) {
.lbg-hero__grille { padding: 20px 20px 0; gap: 24px; }
.lbg-hero .lbg-hero__fond { height: clamp(220px, 60vw, 300px); border-radius: 16px; }
}
/* ---------- Bannière : mix de trois photos (2026-10-02, « mets un mix &
match d'images ») : une grande à gauche, deux petites empilées à droite,
coins arrondis, aucun décor. Une seule photo sur téléphone. ---------- */
.lbg-hero__mix { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; height: clamp(420px, 36vw, 560px); min-width: 0; }
.lbg-hero__mix > div { position: relative; overflow: hidden; border-radius: 20px; background: var(--lbg-placeholder); }
.lbg-hero__mix-a { grid-row: 1 / span 2; }
.lbg-hero__mix picture,
.lbg-hero__mix img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Mot du fondateur raccourci : moins d'air entre les blocs. */
.lbg-founder .lbg-quote { margin-top: 24px; }
.lbg-founder .lbg-valeurs { margin-top: 26px; }
@media (max-width: 900px) {
.lbg-hero__mix { order: -1; height: clamp(300px, 62vw, 460px); }
}
@media (max-width: 600px) {
.lbg-hero__mix { grid-template-columns: 1fr; grid-template-rows: 1fr; height: clamp(220px, 62vw, 300px); }
.lbg-hero__mix-a { grid-row: auto; border-radius: 16px; }
.lbg-hero__mix-b, .lbg-hero__mix-c { display: none; }
}
/* En-tête distinct de la bannière (2026-10-02, « crée une variation entre le
header et le hero ») : en-tête blanc avec un filet, bannière crème. */
.lbg-header, .lbg-header.is-scrolled { background: #FFFFFF; border-bottom: 1px solid var(--lbg-border); }
/* Téléphone dans l'en-tête sur mobile (2026-10-02) : bouton vert sapin à
côté du menu, toujours sous le pouce. Masqué sur grand écran, où le
numéro est déjà dans la navigation. */
.lbg-tel-mobile { display: none; }
@media (max-width: 1080px) {
.lbg-tel-mobile { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 52px; margin-left: auto; padding: 0 16px; border-radius: 10px; background: var(--lbg-ink); color: #FFFFFF; font-size: 16px; font-weight: 700; white-space: nowrap; }
.lbg-tel-mobile:hover { background: #000000; color: #FFFFFF; }
.lbg-tel-mobile + .lbg-burger { margin-left: 0; }
}
@media (max-width: 400px) {
.lbg-tel-mobile { padding: 0 12px; font-size: 15px; }
.lbg-tel-mobile svg { display: none; }
}
/* Prestations : titre seul, centré (2026-10-02). */
#services .lbg-eyebrow { justify-content: center; }
#services .lbg-services__head { display: block; text-align: center; }
#services .lbg-services__head .lbg-h2 { max-width: 900px; margin: 0 auto; }
/* Bannière : le mix de photos prend exactement la hauteur du texte (2026-10-02). */
@media (min-width: 901px) {
.lbg-hero__grille { align-items: stretch; }
.lbg-hero__mix { height: auto; min-height: 420px; }
}
/* Titres seuls (textes d'introduction retirés le 2026-10-02) : le titre de
section n'occupe plus qu'une colonne, le bouton du bas des prix reste seul. */
#methode .lbg-services__head, #tarifs .lbg-services__head { display: block; }
#tarifs .lbg-tarifs__pied { justify-content: center; }
/* Téléphone de l'en-tête mobile : l'icône seule (2026-10-02), le numéro reste
dans l'aria-label du lien. */
@media (max-width: 1080px) {
.lbg-tel-mobile { justify-content: center; width: 52px; padding: 0; }
.lbg-tel-mobile span { display: none; }
.lbg-tel-mobile svg { display: block !important; width: 22px; height: 22px; }
}
/* Bannière sur téléphone : le mix de trois photos en entier (2026-10-02), une
grande à gauche et deux petites empilées, comme sur ordinateur. */
@media (max-width: 600px) {
.lbg-hero__mix { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: clamp(280px, 86vw, 340px); }
.lbg-hero__mix > div { border-radius: 14px; }
.lbg-hero__mix-a { grid-row: 1 / span 2; }
.lbg-hero__mix-b, .lbg-hero__mix-c { display: block; }
}
/* Pied de page : carte avec marges sur les côtés, arrondie, reliée à la fiche
Google (2026-10-02). */
.lbg-footer__carte { max-width: var(--lbg-content); margin: 44px auto 0; border-radius: 18px; overflow: hidden; }
.lbg-footer__gmb { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.lbg-footer__gmb:hover { color: var(--lbg-yellow); }
/* H1 plus grand (2026-10-02). */
.lbg-h1 .lbg-h1__big { font-size: clamp(52px, 5.4vw, 94px); }
/* Bannière : un grand rond pâle en haut à droite, coupé par le bord (2026-10-02). */
.lbg-hero { background-image: radial-gradient(circle 340px at right -120px top -150px, #E3EFE6 99.4%, transparent 100%); background-repeat: no-repeat; }
@media (max-width: 760px) {
.lbg-hero { background-image: radial-gradient(circle 170px at right -70px top -80px, #E3EFE6 99.2%, transparent 100%); }
}
@media (max-width: 700px) {
.lbg-footer__carte { margin-top: 34px; border-radius: 14px; }
.lbg-h1 .lbg-h1__big { font-size: clamp(40px, 11.6vw, 48px); }
}
/* Nouveau logo (boule de démolition, 2026-10-02) : version blanche dans le pied,
sans filtre, pour garder la boule orange. */
.lbg-footer__logo { filter: none; height: 58px; }
@media (max-width: 700px) {
.lbg-header .lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 40px; }
}
/* Logo affiché plus grand (2026-10-02). */
.lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 64px; }
.lbg-footer__logo { height: 66px; }
@media (max-width: 1080px) {
.lbg-header .lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 52px; }
}
@media (max-width: 700px) {
.lbg-header .lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 46px; }
}
@media (max-width: 400px) {
.lbg-header .lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 42px; }
}
/* ====================================================================== */
/* Propre à Sony Guerdner (2026-10-05) : ce que le thème HK n'avait pas. */
/* ====================================================================== */
/* Prix : quatre volumes, donc quatre cartes sur grand écran, deux sur tablette. */
.lbg-prix-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lbg-prix-grille--4 .lbg-prix__corps { padding: 24px 24px 26px; }
.lbg-prix-grille--4 .lbg-prix__nom { font-size: 24px; }
.lbg-prix-grille--4 .lbg-prix__montant strong { font-size: clamp(34px, 2.6vw, 44px); white-space: nowrap; }
.lbg-prix__montant strong small { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.lbg-prix-grille--4 .lbg-prix__liste li { font-size: 15.5px; }
/* Avant / après : trois paires, photos en paysage (les images sont en 4/3). */
.lbg-avap-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lbg-avap-grille--3 .lbg-avap { aspect-ratio: 4 / 3; }
/* Avis Google (Trustindex). */
.lbg-avis__liste { margin-top: 36px; }
/* Fil d'Ariane des pages villes, sur le crème de la bannière. */
.lbg-fil--clair { max-width: var(--lbg-shell); margin: 0 auto; padding: 18px 40px 0; background: var(--lbg-cream); }
main > .lbg-fil--clair { max-width: none; padding-left: max(40px, calc((100% - var(--lbg-content)) / 2)); }
.lbg-fil--clair a { color: var(--lbg-rust); }
.lbg-fil--clair a:hover { color: var(--lbg-ink); }
.lbg-fil--clair span { color: var(--lbg-muted); }
.lbg-fil--clair .lbg-fil__ici { color: var(--lbg-ink); }
/* Logo du pied : le logo est sombre, il se pose sur une carte blanche. */
.lbg-footer__logo-fond { display: inline-block; padding: 10px 14px; border-radius: 12px; background: #FFFFFF; line-height: 0; }
.lbg-footer .lbg-footer__logo { height: 56px; width: auto; filter: none; }
.lbg-footer__list a { color: #FFFFFF; }
.lbg-footer__list a:hover { color: var(--lbg-yellow); }
.lbg-info__item a { color: #FFFFFF; font-weight: 700; word-break: break-word; }
.lbg-communes a { color: var(--lbg-rust); text-decoration: underline; text-underline-offset: 3px; }
/* Formulaire de l'extension guerdner-antispam, habillé comme celui de HK. */
.lbg-form-card .gbf-wrap { margin: 22px 0 0; }
.lbg-form-card .gbf-field { margin-bottom: 18px; }
.lbg-form-card .gbf-field label { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--lbg-muted); }
.lbg-form-card .gbf-req { color: var(--lbg-orange); }
.lbg-form-card .gbf-field input,
.lbg-form-card .gbf-field textarea { width: 100%; border: 1px solid #CFC9BB; border-radius: 10px; background: #F6F4EF; color: var(--lbg-ink); padding: 15px 16px; font-family: inherit; font-size: 17px; line-height: 1.4; }
.lbg-form-card .gbf-field input:focus,
.lbg-form-card .gbf-field textarea:focus { outline: 2px solid var(--lbg-orange); outline-offset: 0; border-color: var(--lbg-orange); }
.lbg-form-card .gbf-field.has-error input,
.lbg-form-card .gbf-field.has-error textarea { border-color: #C0392B; }
.lbg-form-card .gbf-help { color: var(--lbg-muted); font-size: 13.5px; opacity: 1; }
.lbg-form-card .gbf-error { color: #B3261E; }
.lbg-form-card .gbf-legal { margin: 4px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--lbg-muted); opacity: 1; }
.lbg-form-card .gbf-legal a { color: var(--lbg-rust); }
.lbg-form-card .gbf-submit { width: 100%; min-height: 58px; padding: 16px 24px; border: 0; border-radius: 12px; background: var(--lbg-orange); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background .2s ease; }
.lbg-form-card .gbf-submit:hover { background: var(--lbg-rust); }
.lbg-form-card .gbf-msg { border-radius: 10px; border-bottom: 0 !important; }
@media (max-width: 1300px) {
.lbg-prix-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lbg-prix-grille--4 .lbg-prix { display: flex; }
.lbg-prix-grille--4 .lbg-prix__img { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 1100px) {
.lbg-avap-grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.lbg-prix-grille--4 { grid-template-columns: 1fr; }
.lbg-avap-grille--3 { grid-template-columns: 1fr; }
.lbg-fil--clair { padding: 14px 20px 0; }
main > .lbg-fil--clair { padding-left: 20px; }
.lbg-form-card .gbf-field input,
.lbg-form-card .gbf-field textarea { font-size: 16px; }
}
/* Avis Google recopiés (2026-10-05) : plus d'extension, des cartes simples.
Trois par ligne sur ordinateur, deux sur tablette ; sur téléphone une carte
entière par écran, à faire glisser. */
.lbg-avis__note { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 18px; color: var(--lbg-ink); }
.lbg-avis__g { width: 26px; height: 26px; flex: none; }
.lbg-avis__etoiles { color: #F5A623; font-size: 20px; letter-spacing: 2px; line-height: 1; }
.lbg-avis__liste { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lbg-avis__carte { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; border: 1px solid var(--lbg-border); border-radius: 18px; background: #FFFFFF; }
.lbg-avis__carte blockquote { margin: 0; flex: 1; font-size: 17px; line-height: 1.6; color: #2B3A31; }
.lbg-avis__carte figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--lbg-muted); }
.lbg-avis__carte figcaption strong { font-size: 16.5px; color: var(--lbg-ink); }
@media (max-width: 1100px) {
.lbg-avis__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.lbg-avis__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.lbg-avis__carte { scroll-snap-align: start; padding: 22px; }
}
/* Nouveau logo (2026-10-05) : large, pictogramme à gauche. */
.lbg-logo img { height: 58px; width: auto; max-width: none; }
.lbg-footer .lbg-footer__logo { height: 62px; width: auto; }
@media (max-width: 700px) {
.lbg-logo img { height: 44px; }
}
/* Avis en carrousel (2026-10-05) : trois cartes entières par écran, deux sur
tablette, une sur téléphone, flèches au-dessus. Jamais de carte coupée. */
.lbg-avis__fleches { margin-left: auto; display: flex; gap: 10px; }
.lbg-avis__fleche { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--lbg-border); border-radius: 50%; background: #FFFFFF; color: var(--lbg-ink); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.lbg-avis__fleche svg { width: 22px; height: 22px; }
.lbg-avis__fleche:hover { background: var(--lbg-orange); border-color: var(--lbg-orange); color: #FFFFFF; }
.lbg-avis__liste { --ecart: 22px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--ecart)) / 3); gap: var(--ecart); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
.lbg-avis__liste::-webkit-scrollbar { display: none; }
.lbg-avis__carte { scroll-snap-align: start; }
@media (max-width: 1100px) {
.lbg-avis__liste { grid-template-columns: none; grid-auto-columns: calc((100% - var(--ecart)) / 2); }
}
@media (max-width: 700px) {
.lbg-avis__liste { --ecart: 14px; grid-auto-columns: 100%; }
.lbg-avis__fleche { width: 44px; height: 44px; }
}
/* Logo de l'en-tête un peu plus grand. */
.lbg-header .lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 66px; }
@media (max-width: 700px) {
.lbg-header .lbg-logo img, .lbg-header.is-compact .lbg-logo img { height: 48px; }
}
/* Six familles de bennes (2026-10-05) : trois cartes par ligne sur ordinateur. */
.lbg-services__grid.lbg-services__grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lbg-services__grid--6 .lbg-service__img { height: 250px; }
.lbg-services__grid--6 .lbg-service h3 { font-size: 24px; }
.lbg-services__grid--6 .lbg-points { grid-template-columns: 1fr; }
.lbg-services__grid--6 .lbg-points li:nth-last-child(-n+2) { border-bottom: 1px solid var(--lbg-border); }
.lbg-services__grid--6 .lbg-points li:last-child { border-bottom: 0; }
@media (max-width: 1180px) {
.lbg-services__grid.lbg-services__grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.lbg-services__grid.lbg-services__grid--6 { grid-template-columns: 1fr; }
.lbg-services__grid--6 .lbg-service__img { height: 220px; }
}
/* Étapes : sur une section blanche ou crème (pages villes), les cartes blanches
se perdaient dans le fond. Bordure et ombre légère pour les détacher. */
.lbg-etape { border: 1px solid var(--lbg-border); box-shadow: 0 10px 28px rgba(15, 35, 24, .08); }
/* Bouton téléphone de l'en-tête plus grand (2026-10-05), sur ordinateur. */
@media (min-width: 1081px) {
.lbg-header .lbg-nav .lbg-btn--dark { padding: 17px 28px; font-size: 20px; border-radius: 12px; gap: 12px; }
.lbg-header .lbg-nav .lbg-btn--dark svg { width: 22px; height: 22px; }
}