/* ==========================================================================
   Eco’Solutions France — site v2 · « Sous un même toit »
   One stylesheet, mobile first. Sections:
   1 Fonts & tokens  2 Base  3 Components  4 Header  5 Home  6 Service pages
   7 Réalisations  8 Contact  9 Footer & overlays  10 Motion & preferences
   ========================================================================== */

/* 1 ─ Fonts & tokens ─────────────────────────────────────────────────────── */
/* Archivo (SIL OFL), variable: weight 100–900, width 62–125 %. Wide, sturdy letters close to the lettering of the logo. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Brand — sampled from logo-lcg.png */
  --ink: #1A1E22;          /* anthracite of the L and G */
  --ink-2: #3A4046;
  --night: #121619;        /* dark sections */
  --night-2: #1B2126;
  --night-line: #2E363C;
  --green: #2F6F3A;        /* dark green of the monogram — text-safe on light */
  --green-hover: #245A2E;
  --leaf: #8DC54B;         /* light green of the leaf — accent on dark */
  --leaf-hover: #A3D66A;
  --leaf-soft: #E4EFD6;
  /* Warm neutrals */
  --chaux: #FFFFFF;        /* page white */
  --pierre: #EDF0EE;       /* light concrete */
  --paper: #FFFFFF;
  --line: #D2D8D4;
  --line-soft: #E2E7E4;
  --muted: #4E5751;        /* 6.5:1 on --pierre */
  --muted-dark: #B7C0B7;   /* 9:1 on --night */
  --sun: #D8843F;          /* heat, used in diagrams only */
  /* Shape */
  --cut: 16px;             /* chamfered corner, from the hexagonal house of the logo */
  --radius: 4px;
  --radius-sm: 3px;
  --pill: 4px;
  --shadow: 0 1px 2px rgb(26 30 34 / .05), 0 12px 32px -12px rgb(26 30 34 / .18);
  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 68px;
  --section: clamp(56px, 8vw, 112px);
  /* Type */
  --font: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --wide: 116%;            /* width of the display type, close to the lettering of the logo */
  --serif: var(--font);
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.19rem, 1.1rem + .35vw, 1.375rem);
  --step-2: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --step-3: clamp(2rem, 1.45rem + 2.4vw, 3.6rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 5.4rem);
  color-scheme: light;
}
@media (min-width: 1100px) { :root { --header-h: 80px; } }

/* 2 ─ Base ───────────────────────────────────────────────────────────────── */
/* Element defaults live in a cascade layer: any unlayered third-party CSS (the Elfsight
   reviews module) takes precedence over them, and our own component classes still win. */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.6; color: var(--ink); background: var(--chaux);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.05; letter-spacing: -0.032em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
h1 em, h2 em, .hero-title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--green); }
.on-dark h2 em, .audience-pro h2 em, .journey h2 em, .contact h2 em, .roof-method h2 em, .projects-cta h2 em { color: var(--leaf); }
abbr { text-decoration: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.audience-pro :focus-visible, .journey :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .contact :focus-visible, .lightbox :focus-visible, .roof-method :focus-visible, .projects-cta :focus-visible { outline-color: var(--leaf); }
::selection { background: var(--leaf); color: var(--ink); }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 3 ─ Components ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 22px 14px 24px;
  border: 1px solid transparent; border-radius: var(--pill); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.btn .icon { width: 20px; height: 20px; transition: transform .25s; }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-hover); }
.btn-leaf { background: var(--leaf); color: var(--ink); }
.btn-leaf:hover { background: var(--leaf-hover); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-sm { min-height: 44px; padding: 10px 16px 10px 18px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-text { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px; border: 0; background: none; font-weight: 600; color: var(--ink-2); }
.btn-text:hover { color: var(--green); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--green); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .3em; min-height: 44px; }
.text-link:hover { text-decoration-color: currentColor; }
.text-link .icon { width: 18px; height: 18px; }
.text-link.on-dark { color: var(--leaf); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green); }
.eyebrow.on-dark, .on-dark .eyebrow { color: var(--leaf); }
.roof-mark { width: 26px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.eyebrow .roof-mark { transform: translateY(-2px); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: var(--pill); background: var(--leaf-soft); color: var(--green); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.chip .icon { width: 15px; height: 15px; }
.chip.on-dark { background: rgb(141 197 75 / .14); color: var(--leaf); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); flex: none; }
.dot-pro { background: #CFE3B6; box-shadow: 0 0 0 2px rgb(141 197 75 / .35); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.section-head { display: grid; gap: 18px 48px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head > p { max-width: 42ch; color: var(--muted); }
.section-head.on-dark > p { color: var(--muted-dark); }
.section-head.center { text-align: center; justify-items: center; }
.section-head.center .eyebrow { justify-content: center; }
@media (min-width: 900px) { .section-head:not(.center) { grid-template-columns: 1fr auto; align-items: end; } }
.media-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 10px; border-radius: var(--pill); background: rgb(18 22 25 / .72);
  color: #F1F3F2; font-size: .75rem; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.media-tag.is-illustration::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 2px; background: var(--sun); vertical-align: 1px; }
.chamfer, .tile, .feature-media, .page-hero-media, .g-item, .choice, .checklist, .pro-card { --c: var(--cut); clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }
.maquette-note { margin-top: 20px; padding: 12px 14px; border: 1px dashed currentColor; border-radius: var(--radius-sm); font-size: .875rem; opacity: .85; }

/* 4 ─ Header ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { border-color: var(--line-soft); box-shadow: 0 6px 24px -18px rgb(26 30 34 / .35); }
.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: block; flex: none; margin-right: auto; border-radius: 6px; }
.brand img { height: 40px; width: auto; }
@media (min-width: 1100px) { .brand img { height: 48px; } }
.main-nav { display: none; }
.header-cta { display: none; }
.menu-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); font-weight: 600; font-size: .9375rem; }
.menu-icon { display: grid; gap: 5px; width: 18px; }
.menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s; }
.menu-button[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 374px) {
  .header-inner { gap: 8px; }
  .brand img { height: 34px; }
  .menu-button { padding: 8px 12px; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu-button[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--chaux); border-top: 1px solid var(--line-soft); }
.mobile-menu[hidden] { display: none; }
.mm-inner { display: grid; gap: 22px; padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom)); max-width: 640px; margin-inline: auto; }
.mm-group { background: var(--paper); border-radius: var(--radius); padding: 8px 16px 10px; box-shadow: var(--shadow); }
.mm-title { display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.mm-group li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 1.0625rem; font-weight: 600; text-decoration: none; }
.mm-group li.is-sub a { min-height: 44px; padding-left: 16px; font-size: 1rem; font-weight: 500; color: var(--ink-2); border-top-style: dashed; }
.mm-group li em { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--green); }
.mm-links { display: grid; }
.mm-inner > .btn { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 12px 30px -10px rgb(18 22 25 / .5); }
.mm-links a { display: flex; align-items: center; min-height: 52px; font-size: 1.125rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
body.menu-open { overflow: hidden; }
@media (min-width: 1100px) {
  .menu-button, .mobile-menu { display: none !important; }
  .main-nav { display: block; }
  .header-cta { display: inline-flex; }
  .nav-list { display: flex; align-items: center; gap: 4px; }
  .nav-item { position: relative; }
  .nav-trigger, .nav-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: var(--pill); background: none;
    font-size: .9688rem; font-weight: 600; text-decoration: none; color: var(--ink); transition: background-color .2s, color .2s; }
  .nav-trigger .icon { width: 19px; height: 19px; color: var(--green); }
  .nav-trigger .chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
  .nav-trigger:hover, .nav-link:hover, .nav-item.is-open .nav-trigger { background: var(--pierre); }
  .nav-item.is-open .chev { transform: rotate(180deg); }
  .nav-item.is-current > .nav-trigger, .nav-link[aria-current] { box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }
  .nav-panel { position: absolute; top: calc(100% + 12px); left: -8px; width: 420px; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .nav-item.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
  .panel-inner { padding: 14px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: 0 24px 60px -24px rgb(26 30 34 / .35); }
  .panel-title { padding: 6px 12px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .panel-link { display: grid; gap: 2px; padding: 12px; border-radius: 12px; text-decoration: none; transition: background-color .15s; }
  .panel-link:hover { background: var(--chaux); }
  .panel-link strong { font-size: 1rem; }
  .panel-link span { font-size: .875rem; color: var(--muted); }
  .panel-link em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: .75rem; font-weight: 700; color: var(--green); }
  .panel-link em .icon { width: 14px; height: 14px; }
  .panel-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
  .panel-sub a { padding: 6px 12px; border-radius: var(--pill); background: var(--leaf-soft); color: var(--green); font-size: .8125rem; font-weight: 600; text-decoration: none; }
  .panel-sub a:hover { background: #d6e8c0; }
  .panel-all { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px; border-top: 1px solid var(--line-soft); font-size: .875rem; font-weight: 600; color: var(--green); text-decoration: none; }
}

/* 5 ─ Home ───────────────────────────────────────────────────────────────── */
/* Hero slideshow — full-bleed cover, controls bottom right */
.hero { position: relative; isolation: isolate; min-height: max(600px, calc(100svh - var(--header-h))); display: flex; color: #fff; background: var(--night); overflow: hidden; }
.hero-media, .hero-shade { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.slide-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; }
.hero-slide.is-active .slide-img { transform: scale(1); }
.hero-slide .media-tag { left: auto; right: var(--gutter); bottom: auto; top: 18px; }
.hero-shade { z-index: 2; background: linear-gradient(180deg, rgb(18 22 25 / .72) 0%, rgb(18 22 25 / .38) 42%, rgb(18 22 25 / .8) 100%); }
.hero-inner { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-top: clamp(36px, 7vh, 88px); padding-bottom: 20px; }
.hero-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: clamp(20px, 3vh, 34px); font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: #E9EDE6; }
.hero-h1 .roof-mark { color: var(--leaf); }
.hero-h1-sub { color: #C8D1C6; font-weight: 500; }
.hero-h1-sub { flex-basis: 100%; padding-left: 36px; font-size: .875rem; }
@media (min-width: 640px) { .hero-h1-sub { flex-basis: auto; padding-left: 0; font-size: inherit; } .hero-h1-sub::before { content: '·'; margin-right: 10px; color: var(--leaf); } }
.hero-texts { display: grid; }
.hero-text { grid-area: 1 / 1; max-width: 680px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease, visibility 0s .6s; }
.hero-text.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease .15s, transform .7s ease .15s; }
.hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #DDE6D8; }
.hero-title { font-size: var(--step-4); font-weight: 600; line-height: .98; letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
.hero-title em { color: var(--leaf); font-size: 1.04em; }
.hero-lead { max-width: 46ch; margin-top: 20px; font-size: var(--step-1); line-height: 1.5; color: #E4E9E1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.hero-bottom { display: flex; flex-direction: column; gap: 16px; }
.hero-doors { display: none; }
.door { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.door small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }
.door > .icon:first-child { width: 26px; height: 26px; color: var(--leaf); }
.door .door-arrow { margin-left: auto; width: 20px; height: 20px; transition: transform .2s; }
.door:hover .door-arrow { transform: translateY(3px); }
.slider-controls { align-self: flex-end; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--pill); background: rgb(18 22 25 / .6); border: 1px solid rgb(255 255 255 / .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.slider-tabs { display: flex; gap: 6px; padding-left: 10px; }
.slider-tab { display: grid; grid-template-columns: auto; gap: 6px; padding: 8px 2px; min-width: 30px; border: 0; background: none; color: #C8D1C6; text-align: left; }
.tab-num { display: none; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tab-label { display: none; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.tab-bar { display: block; height: 3px; width: 28px; border-radius: 3px; background: rgb(255 255 255 / .28); overflow: hidden; }
.tab-bar i { display: block; height: 100%; width: 0; background: var(--leaf); }
.slider-tab.is-active { color: #fff; }
.slider-tab.is-active .tab-bar i { width: 100%; }
.hero.is-playing .slider-tab.is-active .tab-bar i { width: 0; animation: slide-progress var(--slide-ms, 7000ms) linear forwards; }
.hero.is-held .slider-tab.is-active .tab-bar i { animation-play-state: paused; }
@keyframes slide-progress { to { width: 100%; } }
.slider-buttons { display: flex; gap: 4px; }
.round { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; transition: background-color .2s; }
.round:hover { background: rgb(255 255 255 / .22); }
.round .icon { width: 20px; height: 20px; }
.round .i-play, .hero.is-paused .round .i-pause { display: none; }
.hero.is-paused .round .i-play { display: block; }
.doors-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--night); color: #fff; border-top: 1px solid var(--night-line); }
.doors-band .door { padding: 14px var(--gutter); border-right: 1px solid var(--night-line); font-size: 1rem; }
@media (max-width: 374px) { .doors-band .door { padding-inline: 14px; gap: 8px; font-size: .9375rem; } }
.doors-band .door:last-child { border-right: 0; }
.doors-band .door > .icon:first-child { display: none; }
@media (min-width: 640px) {
  .doors-band .door > .icon:first-child { display: block; }
  .tab-bar { width: 44px; }
}
@media (min-width: 900px) {
  .hero { min-height: max(640px, min(calc(100svh - var(--header-h)), 900px)); }
  .hero-shade { background: linear-gradient(90deg, rgb(18 22 25 / .82) 0%, rgb(18 22 25 / .5) 45%, rgb(18 22 25 / .08) 78%), linear-gradient(0deg, rgb(18 22 25 / .75) 0%, transparent 38%); }
  .hero-inner { padding-bottom: 32px; }
  .hero-bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .hero-doors { display: flex; gap: 12px; }
  .hero-doors .door { min-width: 240px; border-radius: 16px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); color: #fff;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color .2s, border-color .2s; }
  .hero-doors .door:hover { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .35); }
  .doors-band { display: none; }
  .slider-controls { border-radius: 20px; padding: 10px 10px 10px 12px; }
  .slider-tabs { gap: 14px; padding-left: 4px; }
  .slider-tab { min-width: 92px; }
  .tab-num, .tab-label { display: block; }
  .tab-bar { width: 100%; }
  .hero-slide .media-tag { top: 24px; }
}
@media (min-width: 1100px) { .slider-tab { min-width: 108px; } }
@media (max-width: 899px) { .hero-slide .slide-img[style*="object-position"] { object-position: 62% 50%; } }

/* Intro — “Sous un même toit” */
.intro { position: relative; padding-block: var(--section); overflow: hidden; }
.intro-roof { position: relative; height: clamp(44px, 7vw, 96px); margin-bottom: clamp(28px, 4vw, 48px); }
.roof-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roof-line path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.roof-window { position: absolute; left: 50%; top: 52%; width: clamp(14px, 1.8vw, 22px); height: auto; transform: translate(-50%, -50%); fill: var(--green); }
.js .roof-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.2,1) .1s; }
.js .intro-roof.is-in .roof-line path { stroke-dashoffset: 0; }
.js .roof-window { opacity: 0; transition: opacity .6s 1.3s; }
.js .intro-roof.is-in .roof-window { opacity: 1; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.intro-statement h2 { font-size: var(--step-4); max-width: 13ch; }
.intro-statement .lead { max-width: 52ch; margin-top: 24px; }
.facts { display: grid; gap: 0; align-self: end; border-top: 1px solid var(--ink); }
.facts > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .875rem; color: var(--muted); }
.facts dd { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; }
.facts dd .icon { width: 18px; height: 18px; color: var(--green); }
.facts dd a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); text-underline-offset: .25em; min-height: 32px; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: end; } }

/* Audiences */
.audience { padding-block: var(--section); }
.audience-part { background: var(--pierre); }
.bento { display: grid; gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; overflow: hidden; color: #fff; text-decoration: none; background: var(--night); isolation: isolate; }
.tile-media { position: absolute; inset: 0; z-index: -1; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tile-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 22 25 / 0) 18%, rgb(18 22 25 / .5) 48%, rgb(18 22 25 / .92) 100%); }
a.tile:hover .tile-media img, .tile-ecs:hover .tile-media img { transform: scale(1.04); }
.tile-body { display: grid; justify-items: start; gap: 8px; padding: 22px; }
.tile .chip { background: rgb(255 255 255 / .92); }
.tile-title { font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
.tile-title a { text-decoration: none; }
.tile-title a:hover { text-decoration: underline; }
.tile-text { max-width: 36ch; color: #E6EAE3; font-size: 1rem; }
.tile-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; color: var(--leaf); }
.tile-go .icon { width: 18px; height: 18px; transition: transform .2s; }
a.tile:hover .tile-go .icon { transform: translateX(4px); }
.tile-links { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.tile-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .22); font-weight: 600; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s; }
.tile-links a:hover { background: rgb(255 255 255 / .26); }
.tile-links .icon { width: 18px; height: 18px; color: var(--leaf); }
@media (min-width: 700px) { .bento { grid-template-columns: 1fr 1fr; } .tile-lg { grid-column: 1 / -1; min-height: 440px; } }
@media (min-width: 1000px) { .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: 300px 300px; } .tile-lg { grid-column: 1; grid-row: 1 / 3; min-height: 0; } .tile { min-height: 0; } }
.brands { display: grid; gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.brands-title { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brand-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.brand-logos li { display: grid; place-items: center; height: 84px; padding: 16px 20px; background: var(--paper); border-radius: var(--radius-sm); }
.brand-logos img { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; }
@media (min-width: 900px) { .brands { grid-template-columns: 200px 1fr; align-items: center; } .brand-logos { grid-template-columns: repeat(4, 1fr); } }

.audience-pro { background: var(--night); color: #fff; }
.feature-cool { display: grid; background: var(--night-2); border: 1px solid var(--night-line); overflow: hidden; border-radius: 0 var(--radius) var(--radius) var(--radius); }
.feature-media { position: relative; min-height: 280px; }
.feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-body { display: grid; justify-items: start; gap: 14px; padding: clamp(24px, 4vw, 48px); }
.badge { padding: 5px 12px; border-radius: var(--pill); background: var(--leaf); color: var(--ink); font-size: .8125rem; font-weight: 700; }
.feature-body h3 { font-size: var(--step-3); letter-spacing: -0.035em; }
.feature-body > p:not(.badge):not(.mini-title) { color: #D7DED4; max-width: 46ch; }
.mini-title { margin-top: 8px; font-weight: 600; color: #fff; }
.ticks { display: grid; gap: 8px; width: 100%; }
.ticks li { display: flex; align-items: center; gap: 10px; color: #DCE3D8; }
.ticks .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgb(141 197 75 / .16); color: var(--leaf); stroke-width: 2.4; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 10px; }
@media (min-width: 640px) { .ticks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-cool { grid-template-columns: 1.15fr 1fr; } .feature-media { min-height: 520px; } }
.pro-grid { display: grid; gap: 14px; margin-top: 14px; }
.pro-card { position: relative; display: grid; align-content: start; justify-items: start; gap: 10px; min-height: 0; padding: 24px; background: var(--night-2); border: 1px solid var(--night-line); color: #fff; text-decoration: none; overflow: hidden; transition: background-color .25s, border-color .25s; }
.pro-card:hover { background: #222A30; border-color: #3C464D; }
.pro-card strong { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; }
.pro-card > span:not(.chip):not(.pro-icon):not(.pro-go):not(.pro-photo) { color: var(--muted-dark); font-size: 1rem; }
.pro-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgb(141 197 75 / .12); color: var(--leaf); }
.pro-icon .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.pro-go { margin-top: auto; padding-top: 8px; color: var(--leaf); }
.pro-go .icon { width: 22px; height: 22px; transition: transform .2s; }
.pro-card:hover .pro-go .icon { transform: translateX(4px); }
.pro-card.has-photo { padding-top: 0; }
.pro-photo { display: block; width: calc(100% + 48px); margin: 0 -24px 8px; height: 160px; overflow: hidden; }
@media (min-width: 900px) { .pro-card { min-height: 260px; } .pro-photo { height: 180px; } }
.pro-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.pro-card:hover .pro-photo img { transform: scale(1.04); }
@media (min-width: 900px) { .pro-grid { grid-template-columns: repeat(3, 1fr); } }

/* Réalisations teaser — editorial mosaic */
.work { padding-block: var(--section); }
.gallery .g-item { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--pierre); overflow: hidden; text-align: left; color: #fff; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.g-item:hover img { transform: scale(1.04); }
.g-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 40px 14px 12px; background: linear-gradient(180deg, transparent, rgb(18 22 25 / .82)); }
.g-cap small { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leaf); }
.g-cap strong { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.g-item::after { content: ''; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgb(18 22 25 / .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; }
.g-item:hover::after, .g-item:focus-visible::after { opacity: 1; transform: none; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px;
  grid-template-areas: "a b" "a c" "d c" "d e" "f g"; }
.mosaic .m-0 { grid-area: a; } .mosaic .m-1 { grid-area: b; } .mosaic .m-2 { grid-area: c; } .mosaic .m-3 { grid-area: d; }
.mosaic .m-4 { grid-area: e; } .mosaic .m-5 { grid-area: f; } .mosaic .m-6 { grid-area: g; }
@media (max-width: 639px) { .mosaic .g-cap strong { display: none; } .mosaic .g-cap { padding: 28px 10px 8px; } }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 1.1fr 1fr 1fr 1.1fr; grid-auto-rows: 210px; gap: 14px;
    grid-template-areas: "a b b f" "a c d f" "e c d g"; }
}
.work-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }
.cat-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--pill); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: border-color .2s, background-color .2s; }
.cat-links a:hover { border-color: var(--green); background: var(--leaf-soft); }
.cat-links span { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* About & method */
.about { padding-block: var(--section); background: var(--paper); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.about-text h2 { max-width: 14ch; }
.about-text p { max-width: 48ch; margin-top: 18px; color: var(--muted); }
.method-title { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.method { display: grid; counter-reset: step; }
.method li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.method li:last-child { border-bottom: 1px solid var(--line); }
.step-num { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--green); color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.method h3 { font-size: 1.1875rem; }
.method p { color: var(--muted); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.1fr; gap: 80px; } }

/* Reviews — the Elfsight module keeps its own rendering */
.reviews { padding-block: var(--section); }
.reviews-frame { position: relative; min-height: 320px; max-width: 1080px; margin-inline: auto; }
.reviews-fallback { display: grid; justify-items: center; gap: 16px; padding: 40px 24px; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.reviews-fallback[hidden] { display: none; }
.reviews-link { margin-top: 20px; text-align: center; }

/* 6 ─ Service pages ──────────────────────────────────────────────────────── */
.page-hero { padding-top: clamp(12px, 3vw, 32px); padding-bottom: clamp(40px, 6vw, 80px); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 24px; font-size: .875rem; color: var(--muted); }
.breadcrumb a { color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.page-hero .hero-kicker { color: var(--green); }
.page-hero h1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: .98; }
.page-lead { max-width: 48ch; margin-top: 22px; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.page-hero-meta { margin-top: 20px; }
.page-hero .hero-actions { margin-top: 26px; }
.page-hero .text-link { color: var(--ink-2); }
.page-hero-media { position: relative; min-height: 340px; overflow: hidden; background: var(--night); }
.page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-media.is-principle { display: grid; align-items: center; color: #fff; background: radial-gradient(120% 90% at 90% 0%, #2B3A30 0%, var(--night) 60%); }
.principle { padding: clamp(28px, 5vw, 56px); }
.principle-title { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); }
.principle ol { position: relative; display: grid; gap: 26px; }
.principle ol::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; border-left: 1px dashed rgb(141 197 75 / .5); }
.principle li { position: relative; display: flex; align-items: center; gap: 20px; }
.pr-num { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1px solid rgb(141 197 75 / .6); background: var(--night-2); color: var(--leaf); font-weight: 700; }
.principle strong { display: block; font-size: var(--step-1); }
.principle small { display: block; color: var(--muted-dark); font-size: 1rem; }
@media (min-width: 900px) {
  .page-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: stretch; }
  .page-hero-copy { padding-block: 20px; align-self: center; }
  .page-hero-media { min-height: 560px; }
}
.subnav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40; background: rgb(255 255 255 / .94); border-block: 1px solid var(--line-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.subnav-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-size: .9375rem; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--green); border-color: var(--green); }

.understand { padding-block: var(--section); background: var(--paper); }
.understand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.understand-text h2 { max-width: 16ch; margin-bottom: 22px; }
.understand-text p { max-width: 56ch; color: var(--ink-2); }
.understand-text p + p { margin-top: 14px; }
.source-note { margin-top: 26px !important; font-size: .9375rem; color: var(--muted) !important; }
.source-note a { color: var(--green); }
.diagram { padding: clamp(16px, 3vw, 28px); background: var(--chaux); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.diagram-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; margin: 0 auto 8px; width: fit-content; border-radius: var(--pill); background: var(--pierre); }
.diagram-switch button { min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--pill); background: none; font-weight: 600; font-size: .9375rem; color: var(--ink-2); transition: background-color .2s, color .2s; }
.diagram-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.diagram figure[hidden] { display: none; }
.diagram svg { width: 100%; height: auto; max-height: 420px; margin-inline: auto; }
.diagram figcaption { max-width: 60ch; margin: 6px auto 0; text-align: center; font-size: 1rem; color: var(--ink-2); }
.diagram-note { margin-top: 12px; text-align: center; font-size: .8125rem; color: var(--muted); }
.d-house { fill: #fff; stroke: #AEB5B1; stroke-width: 3; }
.d-roof { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.d-equip { fill: #fff; stroke: var(--green); stroke-width: 3; }
.d-line { fill: none; stroke: #8A8F86; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.d-label { font: 600 19px var(--font); fill: var(--ink); }
.d-small { font: 500 16px var(--font); fill: var(--muted); }
.d-sun { fill: #F6D9A8; stroke: var(--sun); stroke-width: 2; }
.d-rays { stroke: var(--sun); stroke-width: 3; stroke-linecap: round; }
.d-panel { fill: #33485A; stroke: #5B7486; stroke-width: 3; }
.d-flow { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 9; }
.d-flow-green { stroke: #4F9A3E; } .d-flow-warm { stroke: var(--sun); }
.mk-green { fill: #4F9A3E; } .mk-warm { fill: var(--sun); }
.d-rooftop { fill: none; stroke-width: 14; stroke-linecap: round; }
.d-rooftop.is-dark { stroke: #3A4046; } .d-rooftop.is-white { stroke: #E9EEF0; filter: drop-shadow(0 0 1px #8A8F86); }
@media (max-width: 680px) { .d-label { font-size: 30px; } .d-small { font-size: 26px; } .diagram { padding: 12px 4px 16px; } .diagram figcaption { padding-inline: 10px; } }
.d-zone-even { fill: #CFE3B6; opacity: .6; } .d-zone-hot { fill: #F0C08E; opacity: .75; } .d-zone-cold { fill: #D9E6EA; }
@media (min-width: 1000px) { .understand-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; } }

.benefits { padding-block: var(--section); }
.benefit-grid { display: grid; gap: 14px; }
.benefit-grid li { padding: 28px; background: var(--paper); border-radius: var(--radius); }
.b-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px; background: var(--leaf-soft); color: var(--green); }
.b-icon .icon { width: 28px; height: 28px; }
.benefit-grid h3 { margin-bottom: 10px; }
.benefit-grid p { color: var(--muted); }
@media (min-width: 900px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } }
.roof-method { display: grid; background: var(--night); color: #fff; }
.roof-method-media { position: relative; min-height: 300px; }
.roof-method-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50% !important; }
.roof-method-body { padding: var(--section) var(--gutter); }
.roof-method-body h2 { max-width: 16ch; }
.method-list { display: grid; margin: 32px 0; }
.method-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--night-line); }
.method-list .step-num { border-color: var(--leaf); color: var(--leaf); }
.method-list p { color: var(--muted-dark); margin-top: 6px; }
@media (min-width: 1000px) { .roof-method { grid-template-columns: 1fr 1fr; } .roof-method-body { padding-inline: clamp(40px, 6vw, 96px); max-width: 720px; } }

.choices { padding-block: var(--section); }
.choice-grid { display: grid; gap: 14px; }
.choice { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px; background: var(--paper); color: inherit; text-decoration: none; transition: box-shadow .25s, transform .25s; }
a.choice:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.choice-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 16px; background: var(--chaux); color: var(--green); }
.choice-icon .icon { width: 36px; height: 36px; stroke-width: 1.4; }
.choice p { color: var(--muted); }
.choice-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; color: var(--green); }
.choice-go .icon { width: 18px; height: 18px; }
@media (min-width: 760px) { .choice-grid.n-2, .choice-grid.n-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .choice-grid.n-3 { grid-template-columns: repeat(3, 1fr); } }

.brands-band { padding-block: clamp(48px, 7vw, 88px); background: var(--paper); border-block: 1px solid var(--line-soft); }
.brands-band-grid { display: grid; gap: 28px; align-items: center; }
.brands-band h2 { font-size: var(--step-2); }
.brands-band p { max-width: 48ch; margin-top: 12px; color: var(--muted); }
.brands-band .brand-logos li { background: var(--chaux); }
@media (min-width: 1000px) { .brands-band-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; } }

.page-photos { padding-block: var(--section); }
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-row .g-item { aspect-ratio: 4 / 5; }
.photo-row.n-1 { grid-template-columns: minmax(0, 520px); }
.more-tile { display: grid; align-content: end; gap: 10px; padding: 22px; aspect-ratio: 4 / 5; background: var(--night); color: #fff; text-decoration: none; --c: var(--cut); clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); transition: background-color .25s; }
.more-tile:hover { background: var(--green); }
.more-num { font-family: var(--serif); font-style: italic; font-size: clamp(2.75rem, 5vw, 4rem); line-height: .9; color: var(--leaf); }
.more-tile:hover .more-num { color: #fff; }
.more-tile > span:not(.more-num) { color: var(--muted-dark); max-width: 22ch; }
.more-tile:hover > span:not(.more-num) { color: #E6EEE0; }
.more-tile strong { display: inline-flex; align-items: center; gap: 8px; }
.more-tile .icon { width: 18px; height: 18px; }
.photo-row.n-3 .more-tile { grid-column: 1 / -1; aspect-ratio: auto; min-height: 180px; }
.photo-row:has(.more-tile) .g-item:first-child { grid-column: auto; aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .photo-row.n-3 .more-tile { grid-column: auto; aspect-ratio: 4 / 5; } }
.photo-row.n-3 .g-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .photo-row { gap: 14px; }
  .photo-row.n-3, .photo-row.n-4 { grid-template-columns: repeat(var(--cols, 3), 1fr); }
  .photo-row.n-4 { --cols: 4; }
  .photo-row.n-3 .g-item:first-child { grid-column: auto; aspect-ratio: 4 / 5; }
}

.project { padding-block: var(--section); background: var(--paper); }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.project-articles h2 { max-width: 16ch; }
.project-intro { max-width: 52ch; margin: 18px 0 8px; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.project-articles article { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.project-articles article h3 { margin-bottom: 10px; }
.project-articles article p { max-width: 60ch; color: var(--muted); }
.note { display: flex; gap: 14px; margin-top: 28px; padding: 18px 20px; border-radius: var(--radius); background: var(--leaf-soft); color: #294B2F; }
.note .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--green); }
.checklist { align-self: start; display: grid; gap: 16px; padding: 30px 28px; background: var(--chaux); border: 1px solid var(--line-soft); }
.check-kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.checklist h3 { font-size: var(--step-2); letter-spacing: -0.025em; }
.checklist h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--green); }
.checklist ul { display: grid; }
.checklist li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.checklist li .icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--leaf-soft); color: var(--green); stroke-width: 2.4; margin-top: 2px; }
.special { display: grid; gap: 12px; justify-items: start; text-wrap: balance; margin-top: 40px; padding: clamp(24px, 4vw, 40px); border-left: 4px solid var(--green); background: var(--chaux); border-radius: 0 var(--radius) var(--radius) 0; }
.special h3 { font-size: var(--step-2); }
.special p { max-width: 70ch; color: var(--muted); }
@media (min-width: 1000px) { .project-grid { grid-template-columns: 1.3fr .9fr; gap: 72px; } .checklist { position: sticky; top: calc(var(--header-h) + 72px); } }

.journey { padding-block: var(--section); background: var(--night); color: #fff; }
.journey-steps { display: grid; gap: 14px; }
.journey-steps li { position: relative; display: grid; gap: 10px; padding: 28px 24px; border: 1px solid var(--night-line); border-radius: var(--radius); background: var(--night-2); }
.journey-steps .step-num { border-color: var(--leaf); color: var(--leaf); margin-bottom: 8px; }
.journey-steps p { color: var(--muted-dark); }
@media (min-width: 900px) {
  .journey-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .journey-steps li:not(:last-child)::after { content: ''; position: absolute; top: 52px; right: -22px; width: 16px; height: 16px; border-top: 2px solid var(--leaf); border-right: 2px solid var(--leaf); transform: rotate(45deg); opacity: .7; }
}

.faq { padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.faq-aside { margin-top: 18px; color: var(--muted); }
.faq-aside a { color: var(--green); font-weight: 600; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); transition: border-color .2s; }
.faq-item[open] { border-color: #A9C98B; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { width: 22px; height: 22px; color: var(--green); transition: transform .25s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { padding: 0 20px 20px; max-width: 64ch; color: var(--muted); }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } }

.related { padding-block: clamp(48px, 7vw, 88px); background: var(--pierre); }
.related-title { margin-bottom: 20px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.related-grid { display: grid; gap: 10px; }
.related-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 12px; padding: 18px 20px; background: var(--paper); border-radius: var(--radius-sm); text-decoration: none; transition: box-shadow .2s; }
.related-card:hover { box-shadow: var(--shadow); }
.related-card .dot { grid-row: span 2; background: var(--green); }
.related-card .dot-pro { background: var(--ink); box-shadow: none; }
.related-card strong { font-size: 1.0625rem; }
.related-card > span:not(.dot) { grid-column: 2; font-size: .9375rem; color: var(--muted); }
.related-card em { grid-column: 3; grid-row: 1; font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--green); }
.related-card .icon { grid-column: 3; grid-row: 2; justify-self: end; width: 20px; height: 20px; color: var(--green); }
@media (min-width: 760px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }

/* 7 ─ Réalisations ───────────────────────────────────────────────────────── */
.projects-hero { padding-block: clamp(16px, 3vw, 32px) clamp(32px, 5vw, 64px); }
.projects-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: end; }
.projects-hero h1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: .98; max-width: 12ch; }
.projects-hero-text p { max-width: 48ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.projects-hero-text .muted { margin-top: 12px; font-size: 1rem; color: var(--muted); }
@media (min-width: 900px) { .projects-hero-grid { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.filter-bar { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 30; padding-block: 12px; background: rgb(255 255 255 / .94); border-block: 1px solid var(--line-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.filter-inner { display: grid; gap: 6px; }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); font-size: .9375rem; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.filters button span { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters button:hover { border-color: var(--green); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters button[aria-pressed="true"] span { color: var(--leaf); }
.filter-status { font-size: .875rem; color: var(--muted); }
@media (min-width: 900px) { .filter-inner { grid-template-columns: 1fr auto; align-items: center; } .filters { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.projects { padding-bottom: var(--section); }
.masonry { columns: 2; column-gap: 10px; padding-top: 24px; }
.masonry .g-item { break-inside: avoid; margin-bottom: 10px; height: auto; }
.masonry .g-item img { height: auto; aspect-ratio: auto; }
.masonry .g-item[hidden] { display: none; }
@media (min-width: 900px) { .masonry { columns: 3; column-gap: 16px; padding-top: 32px; } .masonry .g-item { margin-bottom: 16px; } }
@media (min-width: 1300px) { .masonry { columns: 4; } }
.projects-cta { padding-block: clamp(48px, 7vw, 96px); background: var(--night); color: #fff; }
.projects-cta-inner { display: grid; gap: 24px; justify-items: start; }
.projects-cta h2 { max-width: 20ch; }
@media (min-width: 900px) { .projects-cta-inner { grid-template-columns: 1fr auto; align-items: end; } }

@media (max-width: 379px) { .page-hero h1, .projects-hero h1 { font-size: 2.05rem; } .hero-title { font-size: 2.3rem; } }

/* 8 ─ Contact form (demonstration) ───────────────────────────────────────── */
.contact { padding-block: var(--section); background: var(--night); color: #fff; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.contact-intro > p:not(.eyebrow):not(.maquette-note) { max-width: 44ch; margin-top: 18px; color: #D5DCD2; font-size: var(--step-1); line-height: 1.5; }
.contact-points { display: grid; gap: 14px; margin-top: 28px; }
.contact-points li { display: flex; gap: 12px; color: #D5DCD2; }
.contact-points .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--leaf); }
.contact-points a { color: #fff; }
.contact .maquette-note { color: var(--muted-dark); max-width: 44ch; }
.lead-form { position: relative; padding: clamp(22px, 4vw, 40px); background: var(--chaux); color: var(--ink); border-radius: 20px; box-shadow: 0 30px 80px -40px rgb(0 0 0 / .6); }
.form-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 26px; counter-reset: fp; }
.form-progress li { position: relative; padding-top: 12px; font-size: .8125rem; font-weight: 600; color: var(--muted); counter-increment: fp; }
.form-progress li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line); }
.form-progress li.is-current, .form-progress li.is-done { color: var(--ink); }
.form-progress li.is-current::before, .form-progress li.is-done::before { background: var(--green); }
.no-js .form-progress { display: none; }
.form-step { display: grid; gap: 22px; margin: 0; padding: 0; border: 0; min-width: 0; }
.js .form-step:not(.is-current) { display: none; }
.no-js .form-step + .form-step { margin-top: 28px; }
.step-legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.step-legend span { display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.field { display: grid; gap: 8px; min-width: 0; }
.field-row { display: grid; gap: 22px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; gap: 16px; } }
.field-label { font-size: .9375rem; font-weight: 600; }
.optional { font-weight: 500; color: var(--muted); margin-left: 4px; }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #C3CAC6; border-radius: 12px; background: var(--paper); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgb(47 111 58 / .2); }
.field input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgb(179 38 30 / .12); }
.field-error { font-size: .875rem; font-weight: 600; color: #A12219; }
.field-error[hidden] { display: none; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented label, .chip-choice { position: relative; }
.segmented input, .chip-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 12px; border: 1px solid #C3CAC6; border-radius: 14px; background: var(--paper); font-weight: 600; text-align: center; transition: border-color .2s, background-color .2s, color .2s; }
.segmented .icon { width: 22px; height: 22px; color: var(--green); }
@media (max-width: 479px) { .segmented span { flex-direction: column; gap: 4px; min-height: 64px; font-size: .9375rem; } }
.segmented input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.segmented input:checked + span .icon { color: var(--leaf); }
.segmented input:focus-visible + span, .chip-choice input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group[hidden] { display: none; }
.chip-group-title { flex-basis: 100%; font-size: .8125rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.js .chip-group-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chip-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border: 1px solid #C3CAC6; border-radius: var(--pill); background: var(--paper); font-size: .9375rem; font-weight: 600; transition: border-color .2s, background-color .2s, color .2s; }
.chip-choice:hover span { border-color: var(--green); }
.chip-choice input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.zone-hint { min-height: 1.5em; font-size: .9375rem; color: var(--green); font-weight: 600; }
.zone-hint:empty { min-height: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.form-actions .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .form-actions .btn { flex: 0 0 auto; margin-left: auto; } }
.form-demo { margin-top: 18px; font-size: .8125rem; color: var(--muted); }
.form-done { display: grid; gap: 14px; }
.form-done[hidden] { display: none; }
.done-title { display: flex; align-items: center; gap: 10px; font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; }
.done-title .icon { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 2.6; }
.done-summary { padding: 14px 16px; border-radius: 12px; background: var(--paper); font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; } .contact-intro { position: sticky; top: calc(var(--header-h) + 32px); } }

/* 9 ─ Footer & overlays ──────────────────────────────────────────────────── */
.site-footer { padding: clamp(48px, 7vw, 88px) 0 calc(24px + env(safe-area-inset-bottom)); background: #0C0F11; color: #C6CEC4; }
.footer-top { display: grid; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid var(--night-line); }
.footer-brand img { width: 200px; height: auto; }
.footer-brand p { margin-top: 16px; max-width: 26ch; color: var(--muted-dark); }
.footer-title { margin: 0 0 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); }
.footer-col p + .footer-title { margin-top: 24px; }
.footer-col ul { display: grid; gap: 2px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; color: #E7ECE4; text-decoration: none; }
.footer-col a:hover { color: var(--leaf); text-decoration: underline; }
.footer-col p { color: var(--muted-dark); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 22px; font-size: .875rem; color: #9DA79B; }
.footer-bottom a { color: #E7ECE4; margin-left: auto; }
@media (min-width: 700px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; } }

.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 20px; border-radius: var(--pill); background: var(--green); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 16px 40px -12px rgb(18 22 25 / .55); transform: translateY(160%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sticky-cta .icon { width: 20px; height: 20px; }
.sticky-cta.is-visible { transform: none; }
@media (min-width: 1100px) { .sticky-cta { display: none; } }
@media (max-width: 1099px) { .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(10 12 14 / .96); color: #fff; overflow: hidden; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox::backdrop { background: rgb(10 12 14 / .8); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; padding-top: max(10px, env(safe-area-inset-top)); }
.lb-count { font-size: .875rem; font-weight: 600; color: #C6CEC4; font-variant-numeric: tabular-nums; }
.lb-close, .lb-nav { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; }
.lb-close:hover, .lb-nav:hover { background: rgb(255 255 255 / .22); }
.lb-close .icon, .lb-nav .icon { width: 24px; height: 24px; }
.lb-figure { display: grid; grid-template-rows: 1fr auto; min-height: 0; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); }
.lb-img { width: 100%; height: 100%; min-height: 0; object-fit: contain; touch-action: pan-y; user-select: none; }
.lb-caption { padding: 14px 64px 0; text-align: center; font-size: .9375rem; color: #DCE3D8; }
.lb-nav { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-nav[hidden] { display: none; }
@media (min-width: 900px) { .lb-nav { top: 50%; bottom: auto; transform: translateY(-50%); } .lb-prev { left: 24px; } .lb-next { right: 24px; } .lb-figure { padding-inline: 96px; } }

/* 10 ─ Motion & preferences ─────────────────────────────────────────────── */
/* Content is always visible at rest: the reveal is a short rise, never a fade from invisible. */
.js .reveal { transform: translateY(18px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .slide-img { transform: none !important; }
}
@media (forced-colors: active) { .btn, .chip-choice span, .segmented span, .filters button { border: 1px solid ButtonText; } }
@media print { .site-header, .sticky-cta, .subnav, .filter-bar, .slider-controls, .lightbox { display: none !important; } .hero { min-height: 0; } body { background: #fff; } }

/* 11 ─ v2.1 : coordonnées, en-tête transparent, guides, mentions légales ─── */
/* Header phone */
.header-phone { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--pill); font-weight: 700; font-size: .9375rem; text-decoration: none; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.header-phone .icon { width: 18px; height: 18px; color: var(--green); }
.header-phone:hover { background: var(--pierre); }
@media (min-width: 1100px) { .header-phone { display: inline-flex; } .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 1320px) { .header-phone span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.brand .brand-light { display: none; }

/* Home: full-screen slideshow under a transparent header */
.home .site-header { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); transition: background-color .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s; }
body.home:not(.menu-open) .site-header:not(.is-scrolled) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.home:not(.menu-open) .site-header:not(.is-scrolled) .brand-dark { display: none; }
body.home:not(.menu-open) .site-header:not(.is-scrolled) .brand-light { display: block; }
body.home:not(.menu-open) .site-header:not(.is-scrolled) :is(.nav-trigger, .nav-link, .header-phone) { color: #fff; }
body.home:not(.menu-open) .site-header:not(.is-scrolled) :is(.nav-trigger .icon, .header-phone .icon) { color: var(--leaf); }
body.home:not(.menu-open) .site-header:not(.is-scrolled) :is(.nav-trigger, .nav-link, .header-phone):hover,
body.home:not(.menu-open) .site-header:not(.is-scrolled) .nav-item.is-open .nav-trigger { background: rgb(255 255 255 / .14); }
body.home:not(.menu-open) .site-header:not(.is-scrolled) .menu-button { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); color: #fff; }
body.home:not(.menu-open) .site-header:not(.is-scrolled) .header-cta { background: var(--leaf); color: var(--ink); }
body.home:not(.menu-open) .site-header:not(.is-scrolled) :focus-visible { outline-color: var(--leaf); }
.home .hero { min-height: max(560px, 100svh); }
.home .hero-inner { padding-top: calc(var(--header-h) + clamp(28px, 7vh, 88px)); }
.home .hero-shade { background: linear-gradient(180deg, rgb(18 22 25 / .72) 0%, rgb(18 22 25 / .5) 24%, rgb(18 22 25 / .56) 58%, rgb(18 22 25 / .86) 100%); }
@media (min-width: 900px) {
  .home .hero { min-height: max(640px, 100svh); }
  .home .hero-shade { background: linear-gradient(180deg, rgb(18 22 25 / .62) 0%, transparent 22%), linear-gradient(90deg, rgb(18 22 25 / .8) 0%, rgb(18 22 25 / .45) 45%, rgb(18 22 25 / .05) 78%), linear-gradient(0deg, rgb(18 22 25 / .75) 0%, transparent 38%); }
  .home .hero-slide .media-tag { top: calc(var(--header-h) + 14px); }
}
@media (max-width: 899px) { .home .hero-slide .media-tag { top: calc(var(--header-h) + 10px); } }

/* Mobile menu contact + sticky actions */
.mm-contact { display: grid; gap: 4px; padding: 10px 16px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.mm-contact a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.mm-contact .icon { width: 20px; height: 20px; color: var(--green); }
.sticky-cta { display: flex; gap: 8px; padding: 0; min-height: 0; background: none; box-shadow: none; border-radius: 0; }
.sticky-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 18px; border-radius: var(--pill); font-weight: 700; text-decoration: none; box-shadow: 0 16px 40px -12px rgb(18 22 25 / .55); }
.sticky-call { flex: 0 0 auto; background: var(--ink); color: #fff; }
.sticky-main { flex: 1 1 auto; background: var(--green); color: #fff; }
.sticky-cta .icon { width: 20px; height: 20px; }
@media (min-width: 1100px) { .sticky-cta { display: none; } }

/* Contact block */
.contact-direct { display: grid; gap: 10px; margin-top: 30px; padding: 20px 22px; border: 1px solid var(--night-line); border-radius: var(--radius); background: var(--night-2); }
.contact-direct-title { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); }
.contact-direct a, .contact-address { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.contact-direct a:hover { text-decoration: underline; }
.contact-direct .icon { width: 22px; height: 22px; flex: none; color: var(--leaf); }
.contact-phone { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; min-height: 44px; }
.contact-mail { font-weight: 600; min-height: 40px; }
.contact-address { color: var(--muted-dark); }

/* Footer identity */
.footer-address { margin-top: 20px; font-style: normal; line-height: 1.7; color: var(--muted-dark); }
.footer-address strong { color: #E7ECE4; font-weight: 600; }
.footer-address a { color: #E7ECE4; text-decoration: none; }
.footer-address a:hover { color: var(--leaf); text-decoration: underline; }
.footer-social { display: flex; gap: 16px; margin-top: 14px; }
.footer-social a { display: inline-flex; align-items: center; min-height: 40px; color: var(--leaf); font-weight: 600; }
.footer-bottom a { margin-left: 0; }
.footer-bottom .to-top { margin-left: auto; }

/* Company facts (Qui sommes-nous) */
.company-facts { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line); max-width: 520px; }
.company-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.company-facts dt { color: var(--muted); }
.company-facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.company-facts a { color: var(--green); }

/* Home SEO block */
.home-seo { padding-block: var(--section); background: var(--pierre); }
.home-seo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.home-seo h2 { font-size: var(--step-3); max-width: 16ch; }
.home-seo-text { display: grid; gap: 16px; max-width: 68ch; color: var(--ink-2); }
.home-seo-text a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.home-seo-text a:hover { text-decoration-color: currentColor; }
@media (min-width: 1000px) { .home-seo-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } }

/* Guides */
.guide { padding-block: var(--section); background: var(--chaux); border-top: 1px solid var(--line-soft); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.guide-toc { align-self: start; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.toc-title { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.toc-title .icon { width: 18px; height: 18px; }
.toc-title::-webkit-details-marker { display: none; }
.toc-title::after { content: '+'; margin-left: auto; font-size: 1.25rem; line-height: 1; }
.guide-toc[open] .toc-title::after { content: '–'; }
.guide-toc nav { margin-top: 8px; }
.guide-toc ol { display: grid; gap: 2px; counter-reset: toc; }
.guide-toc li { counter-increment: toc; }
.guide-toc a { display: flex; gap: 10px; padding: 7px 0; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.guide-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .8125rem; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; padding-top: 1px; }
.guide-toc a:hover { color: var(--green); text-decoration: underline; }
.guide-body { min-width: 0; max-width: 760px; }
.g-section { scroll-margin-top: calc(var(--header-h) + 64px); }
.g-section + .g-section, .g-sources { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.g-section h3 { font-size: var(--step-2); letter-spacing: -0.02em; margin-bottom: 14px; }
.g-section p { color: var(--ink-2); }
.g-section p + p, .g-section p + .g-list, .g-section .g-list + p, .g-section .g-table + p, .g-section p + .g-table { margin-top: 14px; }
.g-section strong { color: var(--ink); font-weight: 650; }
.g-list { display: grid; gap: 10px; padding-left: 0; counter-reset: gl; }
ol.g-list > li { position: relative; padding-left: 44px; counter-increment: gl; }
ol.g-list > li::before { content: counter(gl); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--leaf-soft); color: var(--green); font-weight: 700; font-size: .875rem; }
ul.g-list > li { position: relative; padding-left: 26px; }
ul.g-list > li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; background: var(--green); clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.g-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.g-table:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.g-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.g-table thead th { background: var(--ink); color: #fff; text-align: left; font-weight: 600; padding: 12px 14px; }
.g-table tbody th, .g-table td { padding: 12px 14px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.g-table tbody th { font-weight: 500; }
.g-table tbody tr:nth-child(even) { background: var(--chaux); }
.g-glossary dl { display: grid; gap: 12px; }
.g-glossary dl > div { padding: 14px 16px; background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); }
.g-glossary dt { font-weight: 700; }
.g-glossary dd { margin-top: 4px; color: var(--muted); font-size: .9375rem; }
.g-sources p { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.g-sources ul { display: grid; gap: 6px; margin-top: 10px; }
.g-sources a { font-size: .9375rem; color: var(--green); }
@media (min-width: 700px) { .g-glossary dl { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .guide-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 64px; }
  .guide-toc { position: sticky; top: calc(var(--header-h) + 72px); max-height: calc(100vh - var(--header-h) - 96px); overflow-y: auto; }
}

/* Legal notice */
.legal { padding-block: clamp(16px, 3vw, 32px) var(--section); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.legal h1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: .98; }
.legal-lead { margin-top: 18px; max-width: 44ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: var(--step-2); margin: 32px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-2); }
.legal-list { border-top: 1px solid var(--line); }
.legal-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal-list dt { font-size: .875rem; color: var(--muted); }
.legal-list dd { font-weight: 600; overflow-wrap: anywhere; }
.legal-list .is-todo dd { font-weight: 500; color: #8A5A1F; }
@media (min-width: 700px) { .legal-list > div { grid-template-columns: 240px 1fr; gap: 16px; } }
@media (min-width: 1000px) { .legal-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } }

/* 12. Production form, insurance mention -------------------------------- */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-send-error { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #FBEDE8; color: #8A2A12; font-size: .9375rem; font-weight: 500; }
.form-send-error[hidden] { display: none; }
.form-privacy { margin-top: 14px; font-size: .8125rem; color: var(--muted); }
.form-privacy a { color: inherit; }
[data-submit][aria-busy="true"] { opacity: .7; cursor: progress; }
.footer-insurance { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .875rem; color: var(--muted-dark); }
.footer-insurance .icon { width: 18px; height: 18px; flex: none; color: var(--leaf); }
.legal-body .g-list { margin: 12px 0 24px; }
.legal-body .btn { margin-top: 8px; }
/* Header between 1100 and 1320 px: menu, phone and button on one line */
@media (min-width: 1100px) {
  .nav-trigger, .nav-link, .header-cta { white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1319.98px) {
  .nav-list { gap: 0; }
  .nav-trigger, .nav-link { padding-inline: 10px; }
  .header-phone { padding-inline: 8px; }
}
@media (min-width: 1100px) and (max-width: 1219.98px) {
  .brand img { height: 40px; }
  .header-cta { padding-inline: 16px; }
  .nav-trigger, .nav-link { padding-inline: 8px; }
}
/* Hero slides with a separate phone framing (art direction) */
.hero-slide picture { display: contents; }
@media (max-width: 899px) { .hero-slide .slide-img[style*="--pos-m"] { object-position: var(--pos-m) !important; } }
@media (max-width: 899px) {
  .home .hero-title, .home .hero-lead, .home .hero-kicker { text-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 2px 22px rgb(0 0 0 / .55); }
}

/* 13. Eco’Solutions France identity: wide type from the logo, white / concrete / anthracite, square corners */
h1, h2, h3, .hero-title, .hero-h1, .feature-body h3, .page-hero h1, .projects-hero h1, .legal h1 {
  font-stretch: var(--wide); font-weight: 760; letter-spacing: -0.028em; line-height: 1.02; }
h3 { font-stretch: 108%; font-weight: 700; letter-spacing: -0.012em; }
h1 em, h2 em, h3 em, .hero-title em, .checklist h3 em {
  font-family: inherit; font-style: normal; font-weight: inherit; font-size: inherit; letter-spacing: inherit; }
.more-num { font-style: normal; font-weight: 800; font-stretch: var(--wide); letter-spacing: -0.03em; }
.eyebrow, .hero-kicker { text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 700; }
.btn, .header-cta, .sticky-cta a { font-weight: 700; letter-spacing: .005em; }
.btn { min-height: 52px; }
/* A green rule under section titles: a building-trade signature rather than a decorative flourish */
.section-head h2::after, .about h2::after, .home-seo h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 20px; background: var(--green); }
.section-head.center h2::after { margin-inline: auto; }
.on-dark .section-head h2::after, .audience-pro .section-head h2::after { background: var(--leaf); }
/* Phones: the particulier / professionnel choice sits at the bottom of the first screen, not below it */
.door small { text-transform: none; letter-spacing: 0; font-size: .8125rem; opacity: .85; }
.hero-doors .door { border-radius: var(--radius); }
@media (max-width: 899px) {
  .home .hero { min-height: max(500px, calc(100svh - 66px)); }
  .doors-band { background: var(--green); border-top: 0; }
  .doors-band .door { min-height: 66px; border-right-color: rgb(255 255 255 / .22); font-weight: 700; }
  .doors-band .door > .icon:first-child { color: #fff; }
  .doors-band .door small { opacity: .9; }
}
/* Refinements of the identity */
h1, h2, .hero-title, .hero-h1, .feature-body h3, .page-hero h1, .projects-hero h1, .legal h1 { font-weight: 720; font-stretch: 112%; }
.home-seo h2 { font-size: var(--step-2); line-height: 1.12; }
.round { border-radius: var(--radius); }
.slider-controls { border-radius: var(--radius); }
@media (max-width: 899px) {
  .doors-band .door { gap: 10px; padding-inline: 16px; font-size: .9375rem; white-space: nowrap; }
  .doors-band .door span { min-width: 0; }
}
@media (max-width: 419px) { .doors-band .door .door-arrow { display: none; } }
@media (max-width: 420px) { h1, h2, .hero-title, .page-hero h1, .legal h1 { font-stretch: 104%; hyphens: auto; } }
/* Wide letters take more room: display sizes one notch smaller than before */
:root { --step-3: clamp(1.75rem, 1.3rem + 1.9vw, 2.9rem); --step-4: clamp(2.2rem, 1.45rem + 3.1vw, 4.3rem); }
/* Project stories and team photo */
.stories { padding-block: var(--section); background: var(--pierre); }
.stories-grid { display: grid; gap: 20px; margin-top: 36px; }
.story { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; background: var(--paper); border: 1px solid var(--line-soft); border-top: 4px solid var(--green); }
.story-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--pierre); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-body { padding: 22px 22px 26px; }
.story-meta { font-size: .875rem; font-weight: 700; color: var(--green); }
.story h3 { margin: 6px 0 14px; font-size: var(--step-1); }
.story dl { display: grid; gap: 12px; }
.story dt { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.story dd { margin-top: 2px; }
@media (min-width: 900px) { .stories-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }
.team-photo { margin-bottom: 32px; }
.team-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* "Qui sommes-nous": four commitments instead of a table */
.promises { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; padding: 0; list-style: none; }
.promises li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px 18px 20px; background: var(--pierre); border-top: 3px solid var(--green); }
.promises .icon { grid-row: span 2; width: 40px; height: 40px; padding: 8px; background: var(--green); color: #fff; stroke-width: 2; }
.promises strong { font-size: 1.0625rem; font-stretch: 108%; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; }
.promises span { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 560px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promises li { align-content: start; }
.method-title { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 750; font-stretch: 108%; color: var(--ink); }
/* Small labels in normal case: one voice across the site */
.mm-title, .panel-title, .brands-title, .g-cap small, .principle-title, .check-kicker, .related-title, .step-legend span,
.chip-group-title, .footer-title, .contact-direct-title, .toc-title, .g-sources p {
  text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 750; }
.footer-title { font-size: .9375rem; color: #fff; }
.tag-mob { display: none; }
@media (max-width: 899px) { .tag-desk { display: none; } .tag-mob { display: inline; } }