@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/inter-300_800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/inter-300_800-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: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-400_800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-400_800-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: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/sora-400_800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/sora-400_800-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: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/spacegrotesk-400_700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/spacegrotesk-400_700-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/jetbrainsmono-400_700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/jetbrainsmono-400_700-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: 400 900; font-display: swap; src: url(../fonts/archivo-700_900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/archivo-700_900-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; }

/* ==========================================================================
   ECO POWER - Design System
   ========================================================================== */
:root {
  --green: #46a61e; --green-d: #2f7f0f; --green-l: #6cc93e; --lime: #a4dd23;
  --blue: #1273d4; --blue-d: #0b4e9b; --sky: #35b6f0; --sun: #ffb300; --sun-l: #ffd24c;
  --orange: #ff8a1e; --orange-d: #e06400; --orange-l: #ffb35c;
  --amber: #ffc53d; --gold: #ffe08a;
  --dawn-1: #061121; --dawn-2: #0d2038; --dawn-3: #35263a; --dawn-4: #8a4a1c;
  --ink: #0d1b22; --ink-2: #24393f; --muted: #5b7280; --line: #ece4c4;
  --bg: #ffffff; --bg-soft: #fff3cf; --bg-sky: #fff3cf; --bg-ink: #08131a;
  --grad-green: linear-gradient(120deg, var(--green-d), var(--green) 45%, var(--lime));
  --grad-sun: linear-gradient(120deg, #ff6a00, var(--orange) 42%, var(--amber));
  --grad-sky: linear-gradient(120deg, var(--blue-d), var(--blue) 50%, var(--sky));
  --grad-mix: linear-gradient(115deg, var(--green) 0%, #58c23a 30%, var(--sky) 68%, var(--blue) 100%);
  --grad-solar: linear-gradient(100deg, var(--orange-d) 0%, var(--orange) 26%, var(--amber) 52%, #9ad82a 100%);
  --grad-dawn: linear-gradient(172deg, #061121 0%, #0c1e35 34%, #2b2440 62%, #7a4218 86%, #c9761f 100%);
  --grad-ink: linear-gradient(160deg, #0c1f26 0%, #0a1a2b 55%, #17303F 100%);
  --grad-dusk: linear-gradient(150deg, #07132a 0%, #16233d 42%, #4a2b30 72%, #a35a1c 100%);
  --radius-xs: 8px; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(13,27,34,.06);
  --shadow-sm: 0 6px 16px -6px rgba(13,27,34,.12);
  --shadow: 0 18px 40px -20px rgba(13,27,34,.28);
  --shadow-lg: 0 40px 80px -36px rgba(13,27,34,.38);
  --shadow-green: 0 20px 40px -18px rgba(70,166,30,.5);
  --shadow-sun: 0 22px 44px -18px rgba(255,138,30,.58);
  --container: 1200px; --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(64px, 8vw, 120px);
  --font-head: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
img, svg, video { display: block; max-width: 100%; height: auto; }
svg { width: 1.2em; height: 1.2em; flex: none; }
svg.icon-sprite { width: 0; height: 0; }
/* Marque : logo entièrement vectorisé (emblème + mot-symbole + slogan) */
/* Le logo est un fichier externe, donc sa couleur ne peut pas être pilotée en
   CSS : on charge les deux versions et on affiche celle qui se lit sur le fond.
   Les deux sont mises en cache une fois pour tout le site. */
.brand-logo { height: 46px; width: auto; aspect-ratio: 1609 / 300; display: block; }
.brand-logo--clair { display: none; }
.drawer-head .brand-logo { height: 34px; }
@media (max-width: 1360px) { .brand-logo { height: 38px; } }
@media (max-width: 620px) { .brand-logo { height: 34px; } }
@media (max-width: 420px) { .brand-logo { height: 31px; } }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

body {
  font-family: var(--font-body); font-size: clamp(15.5px, .4vw + 15px, 17px); line-height: 1.65;
  color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
h1,h2,h3,h4,h5 { font-family: var(--font-head); color: var(--ink); line-height: 1.05; font-weight: 900; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1400px; }
.section { padding-block: var(--section-y); position: relative; }
.section--soft { background: radial-gradient(130% 160% at 8% -10%, #fff3cf 0%, #ffffff 55%); }
.section--sky { background: radial-gradient(130% 160% at 92% 112%, #fff3cf 0%, #ffffff 55%); }
.section--ink { background: var(--grad-ink); color: #cfe3d6; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:1000px){ .g-4{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:660px){ .g-2,.g-3,.g-4{grid-template-columns:1fr;} }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; }
.split > *, .grid > * { min-width: 0; }
@media (max-width:900px){ .split{grid-template-columns:1fr;} }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-d); background: rgba(70,166,30,.1); padding: 7px 15px; border-radius: 8px; margin-bottom: 18px; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--green); box-shadow: 0 0 0 4px rgba(70,166,30,.18); }
.section--ink .eyebrow { color:#bff08f; background: rgba(164,221,35,.14); }
.lead { font-size: clamp(1.02rem, 1.1vw + .7rem, 1.22rem); color: var(--muted); max-width: 62ch; line-height: 1.7; }
.section--ink .lead { color:#a9c6b8; }
.head { max-width: 760px; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-inline: auto; }
.head p { margin-top: 16px; }

.btn { --btn-bg: var(--grad-green); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; padding: 15px 28px; border-radius: 10px; background: var(--btn-bg); color: #fff; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: var(--shadow-green); white-space: nowrap; isolation: isolate; }
.btn::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(120deg, var(--green-l), var(--lime)); opacity:0; transition: opacity .35s var(--ease); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -18px rgba(70,166,30,.62); }
.btn:hover::after { opacity: 1; }
/* Reflet lumineux qui balaye les CTA principaux : ils attirent l'œil sans crier */
.btn:not(.btn--ghost):not(.btn--light)::before { content:""; position:absolute; top:-12%; bottom:-12%; left:-55%; width:42%; z-index:-1; pointer-events:none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5) 46%, transparent); transform: translateX(-130%) skewX(-18deg); animation: btnSheen 6s var(--ease) infinite; }
@keyframes btnSheen { 0%, 6% { transform: translateX(-130%) skewX(-18deg); } 46%, 100% { transform: translateX(430%) skewX(-18deg); } }
.btn:hover::before { animation-duration: 2.6s; }
.btn:active { transform: translateY(-1px) scale(.985); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sun { --btn-bg: var(--grad-sun); box-shadow: 0 20px 40px -18px rgba(255,143,0,.55); }
.btn--sun::after { background: linear-gradient(120deg, var(--sun-l), #ffe08a); }
.btn--ink { --btn-bg: var(--grad-ink); box-shadow: var(--shadow); }
.btn--ink::after { background: linear-gradient(120deg,#14313a,#1c4a2c); }
.btn--ghost { --btn-bg: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn--ghost::after { background: var(--bg-soft); }
.btn--light { --btn-bg: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.28); color:#fff; box-shadow:none; backdrop-filter: blur(8px); }
.btn--light::after { background: rgba(255,255,255,.16); }
.btn--lg { padding: 18px 36px; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; color: var(--green-d); }
.link-arrow svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.is-stuck { border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(13,27,34,.22); }
.topbar { background: var(--grad-ink); color: #cfe6d6; font-size: .82rem; padding: 8px 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; opacity: .92; }
.topbar a:hover { opacity: 1; color: #fff; }
.topbar svg { width: 14px; height: 14px; }
.topbar-trust { display: inline-flex; gap: 18px; align-items: center; }
.topbar-trust > span { display: inline-flex; align-items: center; gap: 7px; }
.topbar-badge { display: inline-flex; align-items: center; gap: 6px; color: #bff08f; font-weight: 600; }
@media (max-width:780px){ .topbar-trust{display:none;} .topbar .container{justify-content:center;} }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.nav-links { min-width: 0; display: flex; align-items: center; gap: 2px; }
.nav-links > li > a, .nav-links > li > button { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 500; font-size: .885rem; color: var(--ink-2); padding: 10px 10px; border-radius: 11px; transition: background .25s, color .25s; white-space: nowrap; }
.nav-links > li > a:hover, .nav-links > li > button:hover, .nav-links > li.active > a { background: var(--bg-soft); color: var(--green-d); }
.has-sub { position: relative; }
.has-sub > button .chev { width: 14px; height: 14px; transition: transform .3s; }
.has-sub:hover > button .chev, .has-sub:focus-within > button .chev { transform: rotate(180deg); }
.submenu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px); background:#fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px; min-width: 296px; opacity:0; visibility:hidden; transition: all .28s var(--ease); z-index: 20; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.submenu a { display:flex; gap:12px; padding:11px 12px; border-radius:10px; align-items:flex-start; }
.submenu a:hover { background: var(--bg-soft); }
.submenu .ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.submenu .ico svg { width:17px; height:17px; color:#fff; }
.submenu .txt { display:block; }
.submenu .txt b { display:block; font-family: var(--font-head); font-size:.89rem; color: var(--ink); }
.submenu .txt span { font-size:.79rem; color: var(--muted); line-height:1.4; }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.nav-cta .btn { padding: 12px 20px; font-size: .9rem; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.nav-phone svg { width: 17px; height: 17px; color: var(--green); }
@media (max-width:1240px){ .nav-phone span.num{display:none;} }
.burger { display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); place-items:center; }
.burger svg { width:22px; height:22px; }
@media (max-width:1080px){ .nav-links,.nav-cta .btn{display:none;} .burger{display:grid;} }

/* ---------- Menu latéral : panneau premium, items tactiles, CTA toujours atteignable ---------- */
.drawer { position: fixed; inset: 0; z-index: 120; background: rgba(6,17,26,.55); backdrop-filter: blur(6px); opacity:0; visibility:hidden; transition: opacity .32s var(--ease), visibility .32s; }
.drawer.open { opacity:1; visibility:visible; }
.drawer-panel { position:absolute; right:0; top:0; bottom:0; width: min(430px,92vw); background:#fff; display:flex; flex-direction:column; overflow:hidden; border-radius: 26px 0 0 26px; transform: translateX(100%); transition: transform .44s var(--ease-out); box-shadow: -34px 0 90px -34px rgba(6,17,26,.6); }
.drawer.open .drawer-panel { transform: none; }

.drawer-top { position:relative; padding: 16px 18px 15px; background: var(--grad-dusk); color:#cfe0ee; overflow:hidden; }
.drawer-top::before { content:""; position:absolute; z-index:0; pointer-events:none; width:520px; aspect-ratio:1; right:-190px; top:-230px; background: repeating-conic-gradient(from 0deg, rgba(255,197,61,.16) 0deg 1.1deg, transparent 1.1deg 9deg); -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.45) 26%, transparent 66%); mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.45) 26%, transparent 66%); animation: rayRotate 150s linear infinite; }
.drawer-top .brand-logo--ink { display: none; }
.drawer-top .brand-logo--clair { display: block; }
.drawer-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.drawer-close { width:40px; height:40px; border-radius:999px; display:grid; place-items:center; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; transition: background .3s, transform .35s var(--ease); }
.drawer-close:hover, .drawer-close:focus-visible { background: rgba(255,255,255,.24); transform: rotate(90deg); }
.drawer-close svg { width:18px; height:18px; }
.drawer-tag { position:relative; z-index:1; margin-top:13px; font-size:.85rem; line-height:1.45; color:#b5c8d9; }
.drawer-proof { position:relative; z-index:1; display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:12px; font-size:.78rem; color:#a4b8c9; }
.drawer-proof b { font-family: var(--font-head); font-weight:700; font-size:.86rem; color:#fff; }
.drawer-proof .pf-star { width:14px; height:14px; color: var(--amber); }

.drawer-body { flex:1; overflow-y:auto; overscroll-behavior: contain; padding: 14px 12px 18px; }
.drawer-label { font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; color: var(--muted); font-weight:700; padding: 0 10px; margin-bottom:8px; }
.drawer-nav + .drawer-label { margin-top:18px; }
.drawer-nav { display:grid; gap:3px; }
.drawer-nav a { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:16px; transition: background .25s, box-shadow .25s, transform .25s var(--ease); }
.drawer-nav a:hover, .drawer-nav a:focus-visible { background: var(--bg-soft); transform: translateX(3px); }
.drawer-nav a.is-current { background: rgba(70,166,30,.09); box-shadow: inset 0 0 0 1px rgba(70,166,30,.25); }
.d-ico { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background: var(--grad-ink); flex:none; box-shadow: 0 8px 18px -10px rgba(13,27,34,.5); }
.d-ico svg { width:19px; height:19px; }
.d-txt { flex:1; min-width:0; }
.d-txt b { display:block; font-family: var(--font-head); font-weight:600; font-size:.94rem; color: var(--ink); line-height:1.25; }
.d-txt i { display:block; font-style:normal; font-size:.77rem; color: var(--muted); margin-top:2px; }
.d-chev { width:16px; height:16px; color: var(--muted); opacity:.55; transition: transform .3s var(--ease), opacity .3s; }
.drawer-nav a:hover .d-chev, .drawer-nav a.is-current .d-chev { transform: translateX(3px); opacity:1; color: var(--green-d); }

.drawer-foot { border-top:1px solid var(--line); padding: 12px 15px calc(11px + env(safe-area-inset-bottom)); background:#fff; box-shadow: 0 -16px 34px -26px rgba(13,27,34,.45); }
.drawer-foot-row { display:flex; align-items:center; gap:8px; }
.drawer-foot-row .btn { flex:1; padding:14px 16px; font-size:.9rem; }
.drawer-note { text-align:center; font-size:.71rem; color: var(--muted); margin-top:8px; }

.drawer-nav--sm a { padding: 7px 10px; }
.drawer-nav--sm .d-ico { width: 28px; height: 28px; border-radius: 9px; box-shadow:none; }
.drawer-nav--sm .d-ico svg { width: 15px; height: 15px; }
@keyframes drawerIn { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform:none; } }
.drawer.open.anim .drawer-nav a { animation: drawerIn .42s var(--ease-out) both; }
.drawer.open.anim .drawer-nav a:nth-child(1) { animation-delay:.05s; }
.drawer.open.anim .drawer-nav a:nth-child(2) { animation-delay:.10s; }
.drawer.open.anim .drawer-nav a:nth-child(3) { animation-delay:.15s; }
.drawer.open.anim .drawer-nav a:nth-child(4) { animation-delay:.20s; }
.drawer.open.anim .drawer-nav a:nth-child(5) { animation-delay:.25s; }
.drawer.open.anim .drawer-nav a:nth-child(6) { animation-delay:.30s; }
@media (max-width:370px) { .d-txt i { display:none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(52px,7vw,104px) clamp(70px,8vw,130px); }
.hero-bg { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(13,27,34,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,34,.035) 1px, transparent 1px); background-size:56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 75%); }
.hero-inner { display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(30px,5vw,64px); align-items:center; }
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr;} }
.hero h1 { margin-bottom: 20px; }
.hero h1 .hl { background: var(--grad-mix); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: clamp(1.05rem, 1.2vw + .7rem, 1.28rem); }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; }
.hero-badge { display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:500; color: var(--ink-2); }
.hero-badge svg { width:19px; height:19px; color: var(--green); flex:none; }
.hero-media { position: relative; }
.hero-media .scene { width:100%; height:auto; filter: drop-shadow(0 30px 60px rgba(13,27,34,.18)); }
.float-card { position:absolute; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.7); border-radius: var(--radius-sm); padding:13px 17px; box-shadow: var(--shadow); display:flex; align-items:center; gap:12px; }
.float-card .num { font-family: var(--font-mono); font-weight:700; font-size:1.2rem; color: var(--green-d); line-height:1; }
.float-card .lbl { font-size:.74rem; color: var(--muted); line-height:1.3; }
.fc-1 { top:8%; left:-4%; animation: float 6s ease-in-out infinite; }
.fc-2 { bottom:12%; right:-3%; animation: float 7.5s ease-in-out infinite .8s; }
.fc-3 { bottom:-2%; left:8%; animation: float 6.8s ease-in-out infinite .4s; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@media (max-width:520px){ .float-card{display:none;} .fc-1{display:flex;top:2%;left:0;} }

/* ---------- Trust ---------- */
.trust { border-block: 1px solid var(--line); background:#fff; padding-block:22px; }
.trust-inner { display:flex; align-items:center; gap: clamp(20px,4vw,54px); flex-wrap:wrap; justify-content:center; }
.trust-item { display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:600; color: var(--ink-2); font-family: var(--font-head); }
.trust-item svg { width:20px; height:20px; color: var(--green); }

/* ---------- Cards ---------- */
.card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: clamp(22px,2.4vw,32px); position:relative; overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-bottom: 10px; font-size: clamp(1rem, .9vw + .35rem, 1.19rem); hyphens: none; overflow-wrap: break-word; text-wrap: pretty; }
.card p { color: var(--muted); font-size: .95rem; }
.card .card-link { margin-top: 20px; }
.ico-badge { width:54px; height:54px; border-radius:11px; display:grid; place-items:center; margin-bottom:20px; background: var(--grad-green); box-shadow: var(--shadow-green); }
.ico-badge svg { width:26px; height:26px; color:#fff; }
.ico-badge--sky { background: var(--grad-sky); box-shadow: 0 20px 40px -18px rgba(18,115,212,.5); }
.ico-badge--sun { background: var(--grad-sun); box-shadow: 0 20px 40px -18px rgba(255,143,0,.5); }
.ico-badge--ink { background: var(--grad-ink); box-shadow: var(--shadow); }
.card--feature { padding-top: 34px; }
.card--feature::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--grad-green); opacity:0; transition: opacity .4s; }
.card--feature:hover::before { opacity:1; }
.card--sky::before { background: var(--grad-sky); }
.card--sun::before { background: var(--grad-sun); }
.card-dark { background: var(--grad-ink); border:0; color:#b4cfc0; }
.card-dark h3 { color:#fff; }
.card-dark p { color:#9db8ab; }

.stat { text-align:center; padding: 26px 16px; }
.stat .n { font-family: var(--font-mono); font-weight:700; font-size: clamp(2.1rem,4vw,3.1rem); line-height:1; background: var(--grad-mix); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .t { margin-top:10px; font-size:.9rem; color: var(--muted); }
.section--ink .stat .t { color:#9db8ab; }

/* ---------- Parcours solaire (méthode, journée-type) ---------- */
.journey {
  --jgap: clamp(14px, 2.2vw, 30px);
  --dash: rgba(120,144,155,.34);
  --node-bg: #fff; --node-bd: rgba(70,166,30,.2); --node-ic: var(--green-d);
  --num-bg: #fff; --num-c: var(--muted); --num-bd: var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--jgap);
}
.journey-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

.journey-node {
  position: relative; z-index: 2; width: 74px; height: 74px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 28px;
  background: var(--node-bg); border: 1px solid var(--node-bd);
  box-shadow: 0 14px 28px -16px rgba(13,27,34,.28);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), background .6s var(--ease), border-color .6s var(--ease);
}
.journey-node svg { width: 29px; height: 29px; color: var(--node-ic); transition: color .55s var(--ease); }
.journey-node b {
  position: absolute; top: -10px; right: -10px; min-width: 32px; height: 32px; padding: 0 8px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--num-bg); color: var(--num-c); border: 1px solid var(--num-bd);
  font-family: var(--font-head); font-size: .73rem; font-weight: 800; letter-spacing: .02em;
  transition: background .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.journey-node::after {
  content: ""; position: absolute; inset: -8px; border-radius: 22px; pointer-events: none;
  border: 1px dashed rgba(255,138,30,0); transition: border-color .7s var(--ease);
}

.journey-step.is-on .journey-node { background: var(--grad-sun); border-color: transparent; box-shadow: var(--shadow-sun), 0 0 0 9px rgba(255,138,30,.1); transform: translateY(-5px); }
.journey-step.is-on .journey-node svg { color: #fff; }
.journey-step.is-on .journey-node b { background: var(--ink); color: var(--amber); border-color: transparent; }
.journey-step.is-on .journey-node::after { border-color: rgba(255,138,30,.42); }

/* le trait qui relie les étapes */
.journey-link {
  position: absolute; z-index: 1; top: 36px; height: 2px; left: calc(50% + 48px); right: calc(-50% - var(--jgap) + 48px);
  background-image: repeating-linear-gradient(90deg, var(--dash) 0 5px, transparent 5px 11px);
}
/* pas de connecteur après la dernière étape (évite un débordement horizontal) */
.journey-step:last-child .journey-link { display: none; }

.journey-link::before {
  content: ""; position: absolute; top: -3px; width: 9px; height: 8px; border-radius: var(--radius-full); opacity: 0;
  background: var(--amber); box-shadow: 0 0 14px 4px rgba(255,197,61,.8);
}
.journey-link::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--orange-d), var(--orange) 55%, var(--amber));
  box-shadow: 0 0 12px rgba(255,158,44,.6);
  transition: transform .85s var(--ease-out) .2s;
}
.journey-step.is-on .journey-link::after { transform: scaleX(1); }
.journey-step.is-on .journey-link::before { animation: journeyRun 3.2s linear .95s infinite both; }
@keyframes journeyRun { 0% { left: -3%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* la carte de contenu */
.journey-body {
  position: relative; width: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2vw, 28px);
  box-shadow: var(--shadow-xs);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.journey-body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-solar); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out) .25s;
}
.journey-body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background-image: linear-gradient(rgba(18,115,212,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18,115,212,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(130% 110% at 100% 0%, #000, transparent 70%);
}
.journey-step.is-on .journey-body::before { transform: scaleX(1); }
.journey-step.is-on .journey-body { box-shadow: 0 24px 46px -26px rgba(13,27,34,.32); }
.journey-body:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.journey-body:hover::after { opacity: 1; }
.journey-body h3 { margin-bottom: 10px; font-size: clamp(1.02rem, .8vw + .5rem, 1.2rem); text-wrap: pretty; }
.journey-body p { color: var(--muted); font-size: .93rem; }

.journey-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-d); margin-bottom: 12px; }
.journey-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255,138,30,.16); }

/* variante sur fond sombre (crépuscule) */
.section--ink .journey {
  --dash: rgba(255,197,61,.42);
  --node-bg: rgba(9,22,38,.72); --node-bd: rgba(255,179,92,.32); --node-ic: var(--amber);
  --num-bg: rgba(9,22,38,.92); --num-c: #ffd08a; --num-bd: rgba(255,179,92,.38);
}
.section--ink .journey-body h3 { color: var(--ink); }
.section--ink .journey-tag { color: #ffca7a; }
.section--ink .journey-body { border-color: rgba(255,255,255,.1); }

@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; }
  .journey-step { flex-direction: row; align-items: flex-start; text-align: left; padding-bottom: 34px; }
  .journey-step:last-child { padding-bottom: 0; }
  .journey-node { width: 62px; height: 62px; border-radius: 14px; margin: 0 20px 0 0; flex: none; }
  .journey-node svg { width: 25px; height: 25px; }
  .journey-node b { top: -8px; right: -8px; min-width: 27px; height: 27px; font-size: .66rem; }
  .journey-node::after { inset: -6px; border-radius: 18px; }
  .journey-link { top: 62px; bottom: 0; height: auto; width: 2px; left: 30px; right: auto; background-image: repeating-linear-gradient(180deg, var(--dash) 0 5px, transparent 5px 11px); }
  .journey-link::before { display: none; }
  .journey-link::after { transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--orange-d), var(--orange) 55%, var(--amber)); }
  .journey-step.is-on .journey-link::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .journey-link::before { display: none; } }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap:46px; width:max-content; animation: scroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee-item { font-family: var(--font-head); font-weight:600; color: var(--muted); font-size:.95rem; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.marquee-item svg { width:18px; height:18px; color: var(--green); }

/* ---------- Banderole avis (rappel social sous le hero) ---------- */
.review-band { position:relative; background: var(--grad-dusk); color:#dbe6f0; padding-block:16px; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,197,61,.3), inset 0 -1px 0 rgba(255,197,61,.18); }
.review-band::before { content:""; position:absolute; inset:0; background: radial-gradient(620px 120px at 10% 0%, rgba(255,138,30,.28), transparent 70%); pointer-events:none; }
.review-band .container { position:relative; }
.review-band-inner { display:grid; grid-template-columns: auto minmax(0,1fr) auto; align-items:center; gap: clamp(14px,2.2vw,30px); }
.review-band-score { display:flex; align-items:center; gap:10px; font-family: var(--font-head); white-space:nowrap; padding-right: clamp(14px,2.2vw,30px); border-right:1px solid rgba(255,255,255,.16); }
.review-band-score .stars { display:flex; gap:2px; color: var(--amber); }
.review-band-score .stars svg { width:15px; height:15px; filter: drop-shadow(0 0 6px rgba(255,197,61,.55)); }
.review-band-score b { color:#fff; font-size:1rem; }
.review-band-meta { color:#a9bccd; font-size:.82rem; font-weight:500; }
.review-band .marquee-track { gap:34px; animation-duration:58s; }
.review-band-marquee { mask-image: linear-gradient(90deg, transparent, #000 11%, #000 88%, transparent); }
.review-q { font-weight:500; color:#e7eef5; font-size:.9rem; gap:9px; }
.review-q b { font-family: var(--font-head); font-weight:600; font-size:.8rem; color: var(--amber); }
.review-band-link { display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:600; font-size:.84rem; color:#ffd08a; white-space:nowrap; border-bottom:1px solid rgba(255,208,138,.45); padding-bottom:2px; }
.review-band-link svg { width:15px; height:15px; transition: transform .3s var(--ease); }
.review-band-link:hover { color:#fff; border-color: rgba(255,255,255,.6); }
.review-band-link:hover svg { transform: translateX(4px); }
@media (max-width: 1100px) {
  .review-band-inner { grid-template-columns: 1fr; justify-items:center; gap:12px; text-align:center; padding-block:3px; }
  .review-band-score { border-right:0; padding-right:0; }
  .review-band-marquee { width:100%; }
}
@media (prefers-reduced-motion: reduce) { .review-band-score .stars svg { filter:none; } }

/* ---------- Testimonials ---------- */
.quote { display:flex; flex-direction:column; gap:18px; }
.quote .stars { display:flex; gap:3px; }
.quote .stars svg { width:18px; height:18px; color: var(--sun); }
.quote blockquote { font-size:1rem; color: var(--ink-2); line-height:1.7; }
.quote footer { display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar { width:44px; height:44px; border-radius:50%; background: var(--grad-green); color:#fff; display:grid; place-items:center; font-family: var(--font-head); font-weight:700; font-size:.92rem; flex:none; }
.quote footer b { display:block; font-family: var(--font-head); font-size:.9rem; color: var(--ink); }
.quote footer span { font-size:.81rem; color: var(--muted); }

/* ---------- Forms ---------- */
.form-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,40px); box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display:block; font-family: var(--font-head); font-size:.85rem; font-weight:600; color: var(--ink); margin-bottom:7px; }
.field label .req { color:#d64545; }
.field input, .field select, .field textarea { width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius: var(--radius-xs); background:#fbfdfb; transition: border-color .25s, box-shadow .25s, background .25s; font-size:.95rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--green); background:#fff; box-shadow: 0 0 0 4px rgba(70,166,30,.12); }
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.check { display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color: var(--muted); }
.check input { width:auto; margin-top:3px; flex:none; accent-color: var(--green); }
.form-note { font-size:.78rem; color: var(--muted); margin-top:12px; text-align:center; }
.form-status { display:none; padding:14px 16px; border-radius: var(--radius-xs); font-size:.9rem; margin-bottom:16px; }
.form-status.show { display:block; }
.form-status.ok { background:#ecf8e7; color: var(--green-d); border:1px solid rgba(70,166,30,.3); }
.form-status.err { background:#fdeceb; color:#b3352d; border:1px solid rgba(179,53,45,.25); }

/* ---------- Simulator ---------- */
.sim { background: var(--grad-ink); border-radius: var(--radius-lg); padding: clamp(24px,3.4vw,44px); color:#cfe3d6; overflow:hidden; position:relative; }
.sim::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(164,221,35,.28), transparent 65%); top:-180px; right:-120px; filter: blur(30px); }
.sim h2, .sim h3 { color:#fff; }
.sim-grid { display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(24px,3vw,44px); position:relative; z-index:1; }
@media (max-width:860px){ .sim-grid{grid-template-columns:1fr;} }
.sim-control { margin-bottom: 26px; }
.sim-control .lbl-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sim-control label { font-family: var(--font-head); font-weight:600; font-size:.92rem; color:#e6f2ea; }
.sim-control output { font-family: var(--font-mono); font-weight:700; color:#bff08f; font-size:1.05rem; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background: rgba(255,255,255,.14); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background: var(--grad-green); border:3px solid #0b1a12; box-shadow: 0 4px 14px rgba(70,166,30,.6); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:20px; height:20px; border:3px solid #0b1a12; border-radius:50%; background: var(--green); cursor:pointer; }
.sim-result { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: clamp(20px,2.6vw,30px); backdrop-filter: blur(6px); }
.sim-result .big { font-family: var(--font-mono); font-weight:700; font-size: clamp(2rem,4vw,2.9rem); background: var(--grad-sun); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.sim-kpis { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.sim-kpi { background: rgba(255,255,255,.04); border-radius: var(--radius-xs); padding:13px 14px; }
.sim-kpi .v { font-family: var(--font-mono); font-weight:700; color:#fff; font-size:1.05rem; }
.sim-kpi .k { font-size:.74rem; color:#9db8ab; }
.sim-tags { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.sim-select { width:100%; appearance:none; background: rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bff08f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px; border:1px solid rgba(255,255,255,.18); border-radius: var(--radius-xs); color:#fff; font-family: var(--font-head); font-weight:600; font-size:.95rem; padding:13px 44px 13px 15px; cursor:pointer; transition: border-color .2s, background-color .2s; }
.sim-select:hover { border-color: rgba(191,240,143,.5); }
.sim-select:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.sim-select option { background:#13231a; color:#fff; }
.sim-courbe { margin:0 0 26px; }
.sim-courbe svg { display:block; width:100%; height:auto; color:#cfe3d6; overflow:visible; }
.sim-courbe #sim-trait { filter: drop-shadow(0 0 7px rgba(255,201,60,.45)); }
.sim-courbe #sim-soleil { filter: drop-shadow(0 0 11px rgba(255,201,60,.85)); transition: cx .45s cubic-bezier(.22,1,.36,1), cy .45s cubic-bezier(.22,1,.36,1); }
.sim-courbe figcaption { font-size:.76rem; color:#9db8ab; line-height:1.5; margin-top:6px; }
.sim-courbe figcaption strong, .sim-courbe figcaption span { color:#bff08f; font-weight:600; }
.sim-alerte { margin-top:16px; padding:12px 14px; border-radius: var(--radius-xs); border-left:3px solid #ffc93c; background: rgba(255,201,60,.1); color:#f3e6c8; font-size:.8rem; line-height:1.55; }
.chip { font-size:.74rem; padding:6px 12px; border-radius:999px; background: rgba(164,221,35,.14); color:#bff08f; font-weight:600; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 4px; cursor:pointer; font-family: var(--font-head); font-weight:600; color: var(--ink); font-size: clamp(1rem,1.1vw + .7rem,1.12rem); list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .pm { width:30px; height:30px; border-radius:50%; background: var(--bg-soft); display:grid; place-items:center; flex:none; transition: transform .3s var(--ease), background .3s; }
.faq-item summary .pm svg { width:15px; height:15px; color: var(--green-d); }
.faq-item[open] summary .pm { background: var(--grad-green); transform: rotate(135deg); }
.faq-item[open] summary .pm svg { color:#fff; }
.faq-item .ans { padding: 0 4px 24px; color: var(--muted); max-width: 80ch; }

/* ---------- Page hero ---------- */
.page-hero { position:relative; padding-block: clamp(40px,5vw,76px) clamp(38px,5vw,66px); background: var(--grad-ink); color:#cfe3d6; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:620px; height:620px; border-radius:50%; background: radial-gradient(circle, rgba(70,166,30,.35), transparent 62%); top:-300px; right:-160px; filter: blur(20px); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:#fff; max-width: 20ch; }
.page-hero .lead { color:#a9c6b8; margin-top:18px; }
.crumbs { display:flex; gap:8px; align-items:center; font-size:.82rem; color:#8fae9f; margin-bottom:20px; flex-wrap:wrap; }
.crumbs a:hover { color:#fff; }
.crumbs svg { width:13px; height:13px; opacity:.6; }
.crumbs [aria-current] { color:#cfe6d6; }

/* ---------- Article ---------- */
.article { max-width: 780px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.4rem,2.2vw,1.9rem); }
.prose h3 { margin-top: 1.5em; }
.prose ul li { position:relative; padding-left:30px; margin-top:.6em; color: var(--ink-2); }
.prose ul li::before { content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px; border-radius:50%; background: var(--grad-green); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position:relative; padding-left:30px; margin-top:.6em; color: var(--ink-2); }
.prose ol li::before { content: counter(n); position:absolute; left:0; top:.05em; width:22px; height:22px; border-radius:50%; background: var(--bg-soft); color: var(--green-d); font-size:.75rem; font-weight:700; display:grid; place-items:center; font-family: var(--font-head); }
.prose blockquote { border-left:4px solid var(--green); background: var(--bg-soft); padding:18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; color: var(--ink-2); }
.prose a { color: var(--green-d); font-weight:600; text-decoration: underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.prose table { width:100%; border-collapse: collapse; font-size:.92rem; }
.prose th, .prose td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.prose th { font-family: var(--font-head); color: var(--ink); background: var(--bg-soft); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 1.2em; }
.table-wrap table { min-width: 600px; }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; padding: 14px 22px; }
  .btn--lg { padding: 16px 26px; }
  .prose h2 { font-size: 1.35rem; }
  .cta-band { border-radius: var(--radius); }
  .field input, .field select, .field textarea { font-size: 1rem; }
}
.toc { background: var(--bg-soft); border-radius: var(--radius); padding:22px 26px; border:1px solid var(--line); }
.toc h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); margin-bottom:12px; }
.toc ol li { padding-left:26px; margin-top:.5em; font-size:.9rem; }
.toc a:hover { color: var(--green-d); }
.toc ol li::before { background: #fff; box-shadow: 0 1px 3px rgba(13,27,34,.08); }

/* ---------- Misc ---------- */
.pill-list { display:flex; flex-wrap:wrap; gap:8px; }
.pill { font-size:.8rem; padding:7px 14px; border-radius:999px; background: var(--bg-soft); border:1px solid var(--line); color: var(--ink-2); }
.pill:hover { border-color: var(--green); color: var(--green-d); }
.checklist li { display:flex; gap:11px; align-items:flex-start; margin-top:12px; color: var(--ink-2); }
.checklist svg { width:20px; height:20px; color: var(--green); flex:none; margin-top:2px; }
.checklist--light li { color:#cfe3d6; }
.checklist--light svg { color: var(--lime); }
.badge-card { display:flex; gap:16px; align-items:flex-start; }
.badge-card .ico { flex:none; }
.price-card { display:flex; flex-direction:column; }
.price-card .amount { font-family: var(--font-head); font-weight:800; font-size:2rem; color: var(--ink); margin:8px 0 4px; }
.price-card .amount small { font-size:.8rem; font-weight:500; color: var(--muted); }
.zone-list { columns:3; column-gap:32px; }
@media (max-width:760px){ .zone-list{columns:2;} }
@media (max-width:440px){ .zone-list{columns:1;} }
.zone-list li { break-inside: avoid; padding:6px 0; color: var(--ink-2); font-size:.93rem; display:flex; gap:8px; align-items:center; }
.zone-list li svg { width:15px; height:15px; color: var(--green); flex:none; }
.map-wrap { border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background: var(--bg-soft); }
.map-wrap iframe { width:100%; height:380px; border:0; display:block; }

.project { border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.project:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.project .thumb { aspect-ratio:4/3; position:relative; display:grid; place-items:center; }
.project .thumb svg { width:62%; height:auto; }
.project .body { padding: 20px 22px 24px; }
.project .meta { display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color: var(--muted); margin-bottom:10px; }
.project .meta b { color: var(--green-d); font-weight:700; font-family: var(--font-head); }

/* ---------- CTA band ---------- */
.cta-band { position:relative; overflow:hidden; background: var(--grad-ink); border-radius: var(--radius-lg); padding: clamp(32px,5vw,64px); color:#cfe3d6; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 82% 20%, rgba(164,221,35,.3), transparent 55%); }
.cta-band .inner { position:relative; z-index:1; display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cta-band h2 { color:#fff; max-width: 22ch; }
.cta-band p { color:#a9c6b8; margin-top:12px; }
.cta-band .cta-actions { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.cta-band .cta-note { display:inline-flex; align-items:center; gap:8px; margin-top:0; font-size:.83rem; color:#a3c0b1; }
.cta-band .cta-note svg { width:15px; height:15px; color: var(--lime); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-ink); color:#93ac9e; padding-top: clamp(48px,6vw,78px); font-size:.9rem; }
.site-footer h4 { color:#fff; font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap: clamp(24px,3vw,46px); }
@media (max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.site-footer p { line-height:1.7; }
.site-footer a { transition: color .25s; }
.site-footer a:hover { color:#fff; }
.footer-links li { margin-bottom: 10px; }
.footer-contact li { display:flex; gap:11px; margin-bottom:13px; align-items:flex-start; }
.footer-contact svg { width:17px; height:17px; color: var(--green-l); flex:none; margin-top:3px; }
.footer-social { display:flex; gap:10px; margin-top:18px; }
.footer-social a { width:38px; height:38px; border-radius:11px; background: rgba(255,255,255,.07); display:grid; place-items:center; }
.footer-social a:hover { background: var(--green); }
.footer-social svg { width:17px; height:17px; }
.footer-bottom { margin-top: clamp(34px,4vw,54px); border-top:1px solid rgba(255,255,255,.1); padding-block: 22px 26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.81rem; }
.footer-bottom ul { display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Sticky mobile CTA ---------- */
/* Carte compacte et centrée : elle ne doit jamais occuper l'écran ni gêner la lecture. */
.mobile-cta { position: fixed; left:50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index:95; display:none; grid-template-columns: 1fr auto; align-items:center; gap:8px; width: min(560px, calc(100% - 24px)); padding: 8px 8px 7px 10px; background: rgba(255,255,255,.95); backdrop-filter: blur(16px) saturate(1.3); border:1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 48px -24px rgba(13,27,34,.5); transform: translate(-50%,150%); opacity:0; transition: transform .45s var(--ease), opacity .35s var(--ease); }
.mobile-cta.show { transform: translate(-50%,0); opacity:1; }
.mobile-cta .mcta-main { padding:13px 20px; font-size:.9rem; white-space:nowrap; box-shadow: 0 12px 26px -12px rgba(255,122,0,.62); }
.mobile-cta .mcta-main svg { width:17px; height:17px; }
.mcta-call, .drawer-call { display:grid; place-items:center; width:48px; height:48px; border-radius:999px; border:1.5px solid var(--line); background: var(--bg-soft); color: var(--green-d); flex:none; transition: transform .3s var(--ease), background .3s, border-color .3s; }
.mcta-call:hover, .mcta-call:focus-visible, .drawer-call:hover, .drawer-call:focus-visible { background:#fff; border-color: var(--green); transform: translateY(-2px); }
.mcta-call svg, .drawer-call svg { width:19px; height:19px; }
.mobile-cta .mcta-note { grid-column: 1 / -1; text-align:center; font-size:.72rem; line-height:1.25; color: var(--muted); }
.mobile-cta .mcta-note b { color: var(--green-d); font-weight:700; }
@media (max-width:1080px){ .mobile-cta{display:grid;} .footer-bottom{ padding-bottom: 104px; } }
@media (max-width:420px){ .mobile-cta .mcta-main{ padding:12px 14px; font-size:.83rem; gap:8px; } .mobile-cta .mcta-call{ width:44px; height:44px; } }

/* ---------- Reveal ---------- */
/* Masquage conditionné à la présence de JavaScript : sans le préfixe .js,
   un script bloqué ou en erreur laisserait ces blocs invisibles pour
   toujours, y compris pour les robots d'indexation. */
.js [data-reveal] { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal].in { opacity:1; transform:none; }
.js [data-reveal][data-delay="1"] { transition-delay:.09s; }
.js [data-reveal][data-delay="2"] { transition-delay:.18s; }
.js [data-reveal][data-delay="3"] { transition-delay:.27s; }
.js [data-reveal][data-delay="4"] { transition-delay:.36s; }
.js [data-reveal][data-delay="5"] { transition-delay:.45s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .marquee-track, .float-card { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn::before { display: none; }
}

/* ---------- Utilities ---------- */
.mb-0{margin-bottom:0;} .mb-sm{margin-bottom:16px;} .mb{margin-bottom:28px;} .mb-lg{margin-bottom:46px;}
.mt{margin-top:28px;} .mt-lg{margin-top:46px;}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:12px; top:-80px; background: var(--green-d); color:#fff; padding:12px 18px; border-radius:10px; z-index:200; transition: top .25s; }
.skip-link:focus { top:12px; }
.text-green { color: var(--green-d); }
.bg-soft { background: var(--bg-soft); }
.rounded { border-radius: var(--radius); }
.overflow-hidden { overflow:hidden; }

/* ==========================================================================
   IDENTITÉ SOLAIRE : l'arc du soleil, la lumière, le mouvement
   ========================================================================== */

/* ---------- Barre de progression "course du soleil" ---------- */
.scroll-sun { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 130; pointer-events: none; }
.scroll-sun i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #ff6a00, var(--orange), var(--amber) 55%, #9ad82a);
  box-shadow: 0 0 14px rgba(255, 158, 44, .85);
  transition: width .12s linear;
}

.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sky-stars { animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }
.sky-sun { will-change: transform; }

.ray-fan {
  position: absolute; z-index: 1; width: 140%; aspect-ratio: 1; left: 63%; top: 40%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,197,61,.22) 0deg 1.1deg, transparent 1.1deg 9deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.45) 24%, transparent 64%);
  mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.45) 24%, transparent 64%);
  animation: rayspin 130s linear infinite; pointer-events: none;
}
/* rayspin : réservé aux éléments HTML centrés par translate(-50%,-50%) (le keyframe le réintroduit).
   rayRotate : rotation pure, sans translation, à utiliser pour tout élément positionné autrement
   (et pour les groupes SVG, dont le pivot est transform-origin). */
@keyframes rayspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ray-fan { animation-name: rayspin; }
@keyframes rayRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.orbit { position: absolute; z-index: 1; border-radius: 50%; left: 50%; top: 52%; pointer-events: none; }
.orbit-1 { width: 156%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px dashed rgba(255,179,92,.2); }
.orbit-2 { width: 108%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px dashed rgba(255,224,138,.14); }

.hero--dawn .hero-media { position: relative; z-index: 0; }
.hero--dawn .hero-media::before {
  content: ""; position: absolute; inset: -16% -12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,60,.42), rgba(255,110,0,.12) 46%, transparent 68%);
  filter: blur(18px);
}

/* ---------- Ligne d'énergie (séparateur de sections) ---------- */
.energy-divider { position: relative; height: 1px; overflow: hidden; background: linear-gradient(90deg, transparent, rgba(255,138,30,.28), rgba(18,115,212,.22), transparent); }
.energy-divider::after {
  content: ""; position: absolute; top: -1px; left: -25%; width: 25%; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: pulseRun 5.5s linear infinite;
}
@keyframes pulseRun { to { left: 100%; } }

/* ---------- Cartes "cellule solaire" ---------- */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background-image: linear-gradient(rgba(18,115,212,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18,115,212,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000, transparent 68%);
  mask-image: radial-gradient(130% 110% at 100% 0%, #000, transparent 70%);
}
.card:hover::after { opacity: 1; }
.card--feature::before { height: 3px; background: var(--grad-solar); }
.card--sky::before { background: var(--grad-sky); }
.card--sun::before { background: var(--grad-sun); }

.crumbs { color: #93a8ba; }
.crumbs [aria-current] { color: #e6eef5; }
.crumbs a:hover { color: #ffd08a; }


/* ---------- Divisions ---------- */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ray-fan, .sky-stars, .energy-divider::after { animation: none !important; }
  .scroll-sun i { transition: none; }
}

/* ---------- Animation de l'illustration ---------- */
.scene-rays, .scene-sun, .scene-halo { transform-box: view-box; transform-origin: 468px 152px; }
.scene-rays { animation: rayRotate 46s linear infinite; }
.scene-sun { animation: sunBreathe 5.5s ease-in-out infinite; }
.scene-halo { animation: haloPulse 5.5s ease-in-out infinite; }
@keyframes sunBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes haloPulse { 0%,100% { opacity:.8; transform: scale(1); } 50% { opacity:1; transform: scale(1.09); } }
.scene-array { animation: arrayFloat 7.5s ease-in-out infinite; }
@keyframes arrayFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.scene-flow { animation: flowDash 1.6s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset: -40; } }
.scene-pulse { animation: pulseMove 2.6s ease-in-out infinite; }
@keyframes pulseMove {
  0% { transform: translate(300px, 356px); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate(392px, 352px); opacity: 0; }
}
.scene-charge { transform-box: fill-box; transform-origin: left center; animation: chargePulse 4.5s ease-in-out infinite; }
@keyframes chargePulse { 0%,100% { transform: scaleX(.9); } 50% { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .scene-rays, .scene-sun, .scene-halo, .scene-array, .scene-flow, .scene-pulse, .scene-charge { animation: none !important; }
}


/* ---------- Arc solaire plein hero + soleil mobile ---------- */
.hero-arc-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky-arc-layer { position: absolute; inset: 0; width: 100%; height: 100%;
  /* la trajectoire du soleil s'efface dans le bas-gauche : elle ne traverse plus le texte du héros */
  -webkit-mask-image: linear-gradient(to top right, transparent 0 26%, rgba(0,0,0,.45) 40%, #000 54%);
  mask-image: linear-gradient(to top right, transparent 0 26%, rgba(0,0,0,.45) 40%, #000 54%);
}
.sun-marker {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffbe8, #ffd24c 42%, #ff8a1e 78%, #f06a00);
  box-shadow: 0 0 0 7px rgba(255,158,44,.13), 0 0 34px 10px rgba(255,138,30,.45);
  will-change: left, top; pointer-events: none;
}
.sun-marker::after {
  content: ""; position: absolute; inset: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,60,.32), transparent 66%);
}

/* ---------- Annuaire des zones ---------- */
.zone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .zone-list { grid-template-columns: 1fr 1fr; gap: 12px 24px; } }
.zone-list > li { border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 14px; padding: 14px 16px; background: var(--card-bg, rgba(255,255,255,.04)); }
.zone-dep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; text-decoration: none; }
.zone-dep strong { font-size: 1.05rem; }
.zone-code { opacity: .55; font-size: .9rem; }
.zone-prod { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--accent); white-space: nowrap; }
.zone-communes { margin: 8px 0 0; font-size: .85rem; line-height: 1.7; opacity: .8; }
.zone-communes a { text-decoration: none; }
.zone-communes a:hover { text-decoration: underline; }
.chart-wrap { margin: 28px 0 0; }
.chart-months { width: 100%; height: auto; color: currentColor; }
.chart-wrap figcaption { margin-top: 10px; font-size: .82rem; opacity: .6; }

/* ---------- avis clients ----------
   Deux blocs : une banderole fine sous la barre de garanties, et une section
   complète plus bas. Les deux ne sortent du générateur que si src/data/avis.json
   contient de vrais avis, donc ce CSS ne s'applique à rien tant que c'est vide. */
.avis-etoiles { display:inline-flex; gap:2px; vertical-align:middle; }
.avis-etoiles svg { display:block; }
.avis-etoiles .on { fill: var(--amber); }
.avis-etoiles .off { fill: rgba(13,27,34,.16); }
.avis-g { width:17px; height:17px; flex:none; }

/* Banderole */
.avis-bande { background: linear-gradient(100deg, #fffaf0, #f6fbf2 55%, #f1f8fd); border-bottom:1px solid var(--line); padding-block:14px; overflow:hidden; }
.avis-bande-inner { display:flex; align-items:center; gap: clamp(14px,2.4vw,30px); }
.avis-note { display:flex; align-items:center; gap:8px; flex:none; font-family: var(--font-head); }
.avis-note strong { font-size:1.22rem; font-weight:800; color: var(--ink); line-height:1; }
.avis-note span { font-size:.76rem; color: var(--muted); font-weight:600; }
.avis-defile { flex:1 1 auto; min-width:0; overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.avis-piste { display:flex; width:max-content; gap:38px; animation: avis-defile 46s linear infinite; }
.avis-bande:hover .avis-piste, .avis-piste:focus-within { animation-play-state: paused; }
@keyframes avis-defile { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.avis-extrait { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:.82rem; color: var(--ink-2); }
.avis-extrait q { font-style:italic; quotes:'\201C' '\201D'; }
.avis-extrait b { font-family: var(--font-head); font-weight:600; font-size:.76rem; color: var(--muted); }
.avis-lien { flex:none; font-family: var(--font-head); font-weight:600; font-size:.8rem; color: var(--green-d); border-bottom:1px solid rgba(47,127,15,.3); padding-bottom:1px; transition: color .25s, border-color .25s; }
.avis-lien:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) {
  .avis-bande-inner { flex-wrap:wrap; justify-content:center; row-gap:10px; }
  .avis-defile { order:3; flex-basis:100%; }
}
@media (prefers-reduced-motion: reduce) { .avis-piste { animation:none; } }

/* Section complète */
.avis-score { display:flex; align-items:center; gap: clamp(14px,2vw,24px); background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 20px clamp(20px,2.6vw,30px); box-shadow: var(--shadow-sm); max-width:560px; margin:0 auto clamp(26px,3.4vw,42px); }
.avis-score .avis-g { width:30px; height:30px; }
.avis-score-note { font-family: var(--font-head); font-size:1.05rem; color: var(--muted); line-height:1; margin-bottom:6px; }
.avis-score-note strong { font-size:2.1rem; font-weight:800; color: var(--ink); }
.avis-score p { font-size:.78rem; color: var(--muted); margin-top:6px; }
.avis-score .avis-lien { margin-left:auto; }
@media (max-width: 560px) { .avis-score { flex-wrap:wrap; } .avis-score .avis-lien { margin-left:0; flex-basis:100%; } }

.avis-grille { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); align-items:start; }
@media (max-width: 980px) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .avis-grille { grid-template-columns: 1fr; } }
.avis-carte { margin:0; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: clamp(20px,2.4vw,26px); box-shadow: var(--shadow-xs); position:relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.avis-carte:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.avis-carte::before { content:'\201C'; position:absolute; top:6px; right:18px; font-family: var(--font-head); font-size:4.6rem; line-height:1; color: rgba(70,166,30,.1); pointer-events:none; }
.avis-tete { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.avis-carte blockquote { margin:0; font-size:.94rem; line-height:1.65; color: var(--ink-2); position:relative; z-index:1; }
.avis-carte figcaption { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
.avis-auteur { font-family: var(--font-head); font-weight:700; font-size:.92rem; color: var(--ink); }
.avis-meta { font-size:.8rem; color: var(--green-d); font-weight:600; }
.avis-date { font-size:.72rem; color: var(--muted); }

/* ---------- états de formulaire ----------
   Un champ en erreur doit se voir sans couleur seule : bordure, fond, et un
   message écrit sous le champ, relié par aria-describedby. */
.field-error { display:none; margin-top:6px; font-size:.78rem; line-height:1.4; color:#b3352d; }
.field-error.show { display:block; }
.field-error::before { content:'⚠ '; }
.field [aria-invalid="true"] { border-color:#d4544a; background:#fdf6f5; }
.field [aria-invalid="true"]:focus-visible { outline-color:#d4544a; }
.btn[aria-busy="true"] { cursor:progress; opacity:.85; }
.btn-spinner { width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation: btn-spin .7s linear infinite; display:inline-block; vertical-align:-2px; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 2s; } }

/* ---------- page de remerciement ---------- */
.merci-bloc { max-width:780px; margin:0 auto; text-align:center; }
/* Le page-hero est sombre : la coche doit être lumineuse, pas vert foncé. */
.merci-coche { width:76px; height:76px; margin:0 auto 24px; display:grid; place-items:center; border-radius:50%; background: rgba(164,221,35,.14); box-shadow: 0 0 0 1px rgba(164,221,35,.26), 0 18px 40px -20px rgba(164,221,35,.5); }
.merci-coche svg { width:48px; height:48px; fill:none; stroke: var(--lime); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.merci-coche circle { stroke: rgba(164,221,35,.32); stroke-width:2; }
.merci-coche path { stroke-dasharray:40; stroke-dashoffset:40; animation: merci-trace .7s var(--ease) .15s forwards; }
@keyframes merci-trace { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce) { .merci-coche path { animation:none; stroke-dashoffset:0; } }
.merci-etapes { list-style:none; display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,1.8vw,22px); max-width:1120px; margin:0 auto; padding:0; }
@media (max-width: 900px) { .merci-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .merci-etapes { grid-template-columns: 1fr; } }
.merci-etapes li { background:#fff; border:1px solid var(--line); border-left:3px solid var(--green); border-radius: var(--radius-sm); padding: 20px 22px; }
.merci-etapes b { display:block; font-family: var(--font-head); font-size:.95rem; color: var(--ink); margin-bottom:8px; }
.merci-etapes p { font-size:.86rem; line-height:1.6; color: var(--muted); }

/* Pied de page sombre : version claire du logo. */
.site-footer .brand-logo--ink { display: none; }
.site-footer .brand-logo--clair { display: block; }


/* ==========================================================================
   COUCHE DESIGN ECO POWER
   ==========================================================================
   Feuille unique, écrite d'un bloc après avoir retiré quinze couches de
   correctifs empilés. Une décision par composant, et une seule.

   Principe : la couleur ne vient pas des fonds de section mais des
   photographies, des cartes et des accents. Deux surfaces teintées sur toute
   la page d'accueil, pas huit. Le reste respire en blanc cassé.

   Trois familles, trois rôles, jamais interchangeables :
     vert   = la marque, la garantie, l'action à faire ;
     bleu   = la donnée, la mesure, le relevé ;
     orange = la lumière, la production, ce qui réchauffe.
   ========================================================================== */

:root {
  --foret: #16323F;
  --foret-fonce: #0D2230;
  --energie: #2E8B3C;
  --citron: #C3E86D;
  --bleu: #1A6A9B;
  --bleu-clair: #4FA3D1;
  --orange: #D97A1E;
  --orange-fonce: #B5600F;

  --casse: #FDFEFC;
  --voile-vert: #EBF7E0;
  --voile-bleu: #E6F4FB;
  --voile-chaud: #FDF4E3;
  --sauge: #DDE5DC;
  --anthracite: #16232C;
  --gris: #5E6B63;

  --ink: var(--anthracite);
  --ink-2: #3C4941;
  --muted: var(--gris);
  --line: var(--sauge);
  --bg: var(--casse);
  --bg-soft: var(--voile-vert);
  --bg-sky: var(--voile-bleu);
  --green: var(--energie);
  --green-d: var(--foret);
  --green-l: #3E8763;
  --lime: var(--citron);
  --blue: var(--bleu);
  --amber: var(--orange);

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(56px, 7vw, 104px);
  --radius-xs: 8px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px;

  /* Une seule échelle d'ombres, teintée du vert de la marque. */
  --ombre-1: 0 1px 2px rgba(18,44,60,.05), 0 2px 8px -4px rgba(18,44,60,.1);
  --ombre-2: 0 2px 4px rgba(18,44,60,.04), 0 12px 28px -16px rgba(18,44,60,.26);
  --ombre-3: 0 4px 8px rgba(18,44,60,.05), 0 28px 56px -28px rgba(18,44,60,.34);
}

html, body { background: var(--casse); }
body { color: var(--ink-2); }

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--anthracite); text-wrap: balance; }
h1 { font-size: clamp(33px, 4.4vw, 58px); font-weight: 800; line-height: 1.03; letter-spacing: -.034em; }
h2 { font-size: clamp(26px, 2.9vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; }
h3 { font-size: clamp(18px, 1.3vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: clamp(17px, .5vw + 15.6px, 19px); line-height: 1.55; color: var(--gris); max-width: 58ch; }
p, li { max-width: 70ch; }

/* Le sur-titre : un point coloré et un mot, sans pastille ni capitales. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); background: none; padding: 0; border-radius: 0;
  margin-bottom: 14px; box-shadow: none;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); box-shadow: none;
}

/* ---------- Les surfaces : deux teintes, pas huit ---------- */
.section { background: transparent; }
.section--vert { background: var(--voile-vert); }
.section--bleu { background: var(--voile-bleu); }
.section--soft, .section--sky, .section--ink, .section--lumiere { background: transparent; color: var(--ink-2); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--anthracite); }
.section--ink .lead { color: var(--gris); }
.section--ink .eyebrow { color: var(--gris); background: none; }
.section--ink .stat .t { color: var(--gris); }

/* ---------- Boutons : trois niveaux nettement distincts ---------- */
.btn {
  --btn-bg: var(--foret);
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  letter-spacing: -.005em;
  min-height: 50px; padding: 0 26px; border-radius: 10px;
  background: var(--btn-bg); color: #fff;
  border: 0; box-shadow: var(--ombre-2);
  transition: background-color .2s var(--ease), transform .16s var(--ease), box-shadow .2s var(--ease);
}
.btn::before, .btn::after { content: none; }
.btn:hover { background: var(--foret-fonce); transform: translateY(-2px); box-shadow: var(--ombre-3); }
.btn:active { transform: translateY(0); box-shadow: var(--ombre-1); }
.btn:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.btn--lg { min-height: 54px; padding: 0 30px; font-size: 16px; }
.btn--sun { --btn-bg: var(--orange); }
.btn--sun:hover { background: var(--orange-fonce); }
.btn--ink { --btn-bg: var(--anthracite); }
.btn--ghost, .btn--light {
  --btn-bg: #fff;
  /* Le fond est posé en dur, pas seulement par la variable : sans cela, une
     règle ultérieure qui ne change que la couleur du texte laissait un
     libellé blanc sur fond blanc, donc un bouton vide à l'écran. */
  background: #fff; color: var(--foret);
  border: 1px solid var(--sauge); box-shadow: var(--ombre-1);
  backdrop-filter: none; min-height: 48px;
}
.btn--ghost:hover, .btn--light:hover {
  background: #fff; color: var(--foret); border-color: var(--foret);
  transform: translateY(-2px); box-shadow: var(--ombre-2);
}
/* Sur fond sombre, le secondaire s'inverse. */
.hero--dawn .btn--ghost, .hero--dawn .btn--light,
.site-footer .btn--ghost, .site-footer .btn--light {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.34);
}
.hero--dawn .btn--ghost:hover, .site-footer .btn--ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* ---------- Les cartes : la trame est ici, pas dans les fonds ---------- */
.card, .project, .avis-carte, .merci-etapes li {
  position: relative; isolation: isolate;
  background: #fff; border: 1px solid var(--sauge); border-radius: var(--radius);
  box-shadow: var(--ombre-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::after, .card--feature::before, .card--sky::before, .card--sun::before { content: none; }
/* La trame vit à l'intérieur de l'encart : une texture fine, en haut à droite,
   qui se densifie au survol. C'est la signature, et elle ne gêne aucun texte. */
.card::before, .project::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(26,106,155,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,106,155,.1) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 62%);
  opacity: .5; transition: opacity .35s var(--ease);
}
.card:hover::before, .project:hover::before { opacity: 1; }
.card:hover, .project:hover, .avis-carte:hover {
  transform: translateY(-4px); box-shadow: var(--ombre-3); border-color: rgba(26,106,155,.32);
}
.card-dark { background: var(--foret); color: #cfe0d5; border: 0; }
.card-dark h3 { color: #fff; }
.card-dark p { color: #a8c2b2; }

/* ---------- Pictogrammes : une couleur par sens, jamais par section ---------- */
.ico-badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--voile-vert); color: var(--energie);
  box-shadow: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.ico-badge svg { width: 22px; height: 22px; stroke-width: 1.9; color: inherit; }
/* Mesure et donnée. */
.ico-badge--sky { background: var(--voile-bleu); color: var(--bleu); }
/* Production et lumière. */
.ico-badge--sun { background: var(--voile-chaud); color: var(--orange-fonce); }
.ico-badge--ink { background: var(--foret); color: #fff; }
.card:hover .ico-badge { background: var(--foret); color: #fff; }
.card:hover .ico-badge--sky { background: var(--bleu); }
.card:hover .ico-badge--sun { background: var(--orange); }

/* ---------- Étiquettes et puces ---------- */
.pill {
  background: #fff; border: 1px solid var(--sauge); color: var(--ink-2);
  box-shadow: var(--ombre-1);
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.pill:hover { border-color: var(--bleu); color: var(--bleu); transform: translateY(-2px); }
.chip {
  background: var(--voile-bleu); color: var(--bleu); border-radius: 6px;
  font-family: var(--font-mono); font-weight: 500;
}
.stat { border-left: 2px solid var(--bleu); padding-left: 18px; }
.stat .n { color: var(--bleu); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.stat .t { color: var(--gris); }
.link-arrow { color: var(--bleu); }
.link-arrow:hover { color: var(--orange-fonce); }
.journey-tag { color: var(--orange-fonce); }
.energy-divider { background: var(--sauge); }
.scroll-sun i { background: linear-gradient(90deg, var(--orange), var(--citron) 60%, var(--energie)); }

/* ---------- L'en-tête ----------
   Plus aucun trait sous les onglets : ils faisaient deux soulignements
   concurrents dès qu'une page était active. La page courante se signale par la
   graisse et la couleur, ce qui suffit et ne dessine rien. */
.topbar {
  background: var(--foret); color: rgba(255,255,255,.82);
  border: 0; padding-block: 9px; font-size: 13px;
}
.topbar a { color: rgba(255,255,255,.82); opacity: 1; }
.topbar a:hover { color: #fff; }
.topbar svg { color: var(--citron); }
.topbar-badge, .topbar-badge svg { color: var(--citron); font-weight: 600; }

.site-header {
  background: rgba(248, 250, 247, .78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(18,44,60,.07);
  box-shadow: none;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { background: rgba(248, 250, 247, .94); box-shadow: var(--ombre-1); }

.nav-links > li > a, .nav-links > li > button {
  position: relative; background: none; border-radius: 8px;
  padding: 9px 13px; font-weight: 500; color: var(--ink-2);
  transition: color .22s var(--ease);
}
.nav-links > li > a::after, .nav-links > li > button::after { content: none; }
.nav-links > li > a:hover, .nav-links > li > button:hover { color: var(--foret); }
.nav-links > li.active > a { color: var(--foret); font-weight: 700; }
.nav-links > li > a:focus-visible, .nav-links > li > button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }
.has-sub > button .chev { opacity: .5; }
.has-sub:hover > button .chev { opacity: 1; }

/* Au-dessus du hero photographique, l'en-tête se fond dans l'image. */
body.has-dark-hero .site-header:not(.is-stuck) {
  background: rgba(14, 38, 31, .3);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255,255,255,.14);
}
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > a,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > button,
body.has-dark-hero .site-header:not(.is-stuck) .nav-phone,
body.has-dark-hero .site-header:not(.is-stuck) .has-sub > button .chev { color: rgba(255,255,255,.88); }
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > a:hover,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > button:hover,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li.active > a { color: #fff; }
body.has-dark-hero .site-header:not(.is-stuck) .nav-phone svg { color: var(--citron); }
body.has-dark-hero .site-header:not(.is-stuck) .burger { border-color: rgba(255,255,255,.3); color: #fff; }
body.has-dark-hero .site-header:not(.is-stuck) .brand-logo--ink { display: none; }
body.has-dark-hero .site-header:not(.is-stuck) .brand-logo--clair { display: block; }
body.has-dark-hero .topbar { background: rgba(10, 32, 26, .62); backdrop-filter: blur(10px); }
body.has-dark-hero { --hdr: 110px; }
body.has-dark-hero .hero--dawn { margin-top: calc(-1 * var(--hdr)); padding-top: calc(var(--hdr) + clamp(34px, 4vw, 64px)); }
@media (max-width: 780px) { body.has-dark-hero { --hdr: 104px; } }

/* ---------- Le hero ---------- */
.hero--dawn {
  position: relative; isolation: isolate;
  background: var(--foret-fonce); color: rgba(255,255,255,.9);
  padding-bottom: clamp(100px, 11vw, 168px);
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.hero-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(12,32,45,.9) 0%, rgba(12,32,45,.74) 32%, rgba(12,47,73,.44) 64%, rgba(12,47,73,.2) 100%),
    linear-gradient(180deg, rgba(8,28,22,.52) 0%, transparent 28%, transparent 72%, rgba(8,28,22,.4) 100%);
}
.hero--dawn > .container { position: relative; z-index: 2; }
.hero-arc-wrap { z-index: 2; }
.hero--dawn h1 { color: #fff; text-shadow: 0 2px 24px rgba(6,20,16,.4); }
.hero--dawn h1 .hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--citron); }
.hero--dawn .lead { color: rgba(255,255,255,.84); }
.hero--dawn .lead strong { color: #fff; }
.hero--dawn .eyebrow { color: var(--citron); }
.hero--dawn .eyebrow::before { background: var(--citron); }
.hero--dawn .hero-badge { color: rgba(255,255,255,.82); }
.hero--dawn .hero-badge svg { color: var(--citron); }
.ray-fan, .sky-stars { display: none; }
.orbit-1, .orbit-2 { border-color: rgba(255,255,255,.1); }
.hero-grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }

/* Les étiquettes de données, posées sur la photographie. */
.hero-media--photo { min-height: clamp(300px, 34vw, 420px); position: relative; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.96); border: 0;
  border-left: 3px solid var(--bleu);
  box-shadow: 0 18px 36px -18px rgba(6,20,16,.8);
  backdrop-filter: blur(8px);
  animation: etiquetteArrivee .65s var(--ease) backwards;
}
.float-card .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.28rem; font-weight: 700; color: var(--bleu); line-height: 1; letter-spacing: -.03em; }
.float-card .lbl { font-size: .74rem; line-height: 1.3; color: var(--gris); }
.fc-1 { top: 6%; left: 2%; animation-delay: .3s; }
.fc-2 { bottom: 30%; right: 0; animation-delay: .45s; border-left-color: var(--orange); }
.fc-2 .num { color: var(--orange-fonce); }
.fc-3 { bottom: 4%; left: 14%; animation-delay: .6s; border-left-color: var(--energie); }
.fc-3 .num { color: var(--energie); }
@keyframes etiquetteArrivee { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } }
@media (max-width: 980px) { .hero-media--photo { min-height: 210px; margin-top: 26px; } .fc-1 { left: 0; } }
@media (max-width: 620px) { .fc-2 { display: none; } }

/* ---------- Le bandeau des certifications ----------
   Il était posé sous le hero comme une ligne de texte rapportée. Il devient une
   barre de verre qui chevauche la limite entre la photographie et le contenu :
   c'est ce qui donne de la profondeur à une page plate, et ça règle du même
   coup le raccord entre les deux zones. */
.trust {
  position: relative; z-index: 4;
  margin-top: clamp(-78px, -7vw, -58px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
  background: none; border: 0; padding-block: 0;
}
.trust .container { padding-inline: var(--gutter); }
.trust-inner {
  list-style: none; margin: 0; padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 30px);
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 54px -30px rgba(6,20,16,.6), 0 1px 2px rgba(18,44,60,.06);
  justify-content: initial;
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 400; font-size: inherit; color: var(--ink-2);
  position: relative; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* Un filet vertical sépare les garanties, plutôt qu'une tuile autour de chacune :
   c'est plus calme et ça se lit comme une seule affirmation en quatre temps. */
.trust-item + .trust-item::before {
  content: ""; position: absolute; left: clamp(-15px, -1vw, -7px); top: 6px; bottom: 6px;
  width: 1px; background: var(--sauge);
}
.trust-item:hover { transform: none; box-shadow: none; }
.trust-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--voile-vert); color: var(--energie);
  box-shadow: none;
}
.trust-ico svg { width: 18px; height: 18px; stroke-width: 2; color: inherit; }
.trust-item--bleu .trust-ico { background: var(--voile-bleu); color: var(--bleu); }
.trust-item--chaud .trust-ico { background: var(--voile-chaud); color: var(--orange-fonce); }
.trust-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trust-txt b { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--anthracite); line-height: 1.2; }
.trust-txt small { font-size: .74rem; color: var(--gris); line-height: 1.3; }
@media (max-width: 980px) {
  .trust { margin-top: clamp(-54px, -5vw, -34px); }
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
  .trust-item:nth-child(3)::before { content: none; }
}
@media (max-width: 560px) {
  .trust { margin-top: 20px; }
  .trust-inner { grid-template-columns: 1fr; gap: 14px; }
  .trust-item + .trust-item::before { left: 0; right: 0; top: -7px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- La section commerciale ----------
   Elle était en vert forêt avec un bouton vert forêt posé dessus : le bouton
   disparaissait dans son propre fond, et c'est précisément lui qui doit sauter
   aux yeux. Elle passe en clair, le bouton redevient le seul aplat vert de la
   zone, et la carte prend du relief au lieu d'un aplat uni. */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(118deg, var(--voile-chaud) 0%, #FFFDF7 46%, var(--voile-vert) 100%);
  border: 1px solid var(--sauge);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 56px);
  color: var(--ink-2);
  box-shadow: var(--ombre-3);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(217,122,30,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,122,30,.1) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 58%);
  mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 58%);
  animation: none; width: auto; aspect-ratio: auto; right: auto; top: auto;
}
.cta-band::after { content: none; }
.cta-band h2 { color: var(--anthracite); max-width: 20ch; }
.cta-band p { color: var(--gris); margin-top: 12px; max-width: 48ch; }
.cta-band .cta-note { color: var(--gris); }
.cta-band .cta-note svg { color: var(--energie); }
.cta-band .btn { box-shadow: 0 16px 32px -16px rgba(18,44,60,.55); }
.cta-band .btn:hover { box-shadow: 0 22px 40px -18px rgba(18,44,60,.65); }
.cta-band .btn--ghost, .cta-band .btn--light {
  background: #fff; color: var(--foret); border-color: var(--sauge);
}
.cta-band .btn--ghost:hover, .cta-band .btn--light:hover { border-color: var(--foret); background: #fff; }

/* ---------- Le pied de page ----------
   La photographie s'affichait en pleine lumière et le texte devenait
   illisible : le voile était en z-index négatif, donc peint derrière le fond
   de son propre parent. Ici la couleur de base est posée sur le pied de page
   lui-même, la photographie vient par-dessus en opacité réduite, et le voile
   est un élément à part entière. Le texte reste lisible quelle que soit
   l'image. */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--foret-fonce);
  color: rgba(255,255,255,.72);
  padding-top: clamp(64px, 7vw, 100px);
  font-size: .92rem;
}
.footer-photo { position: absolute; inset: 0; z-index: 0; opacity: .3; }
.footer-photo picture, .footer-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; display: block;
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(12,32,45,.94) 0%, rgba(12,32,45,.84) 42%, rgba(20,52,70,.7) 100%),
    linear-gradient(180deg, rgba(12,32,45,.9) 0%, transparent 30%);
}
.site-footer > .container, .site-footer .footer-bottom { position: relative; z-index: 2; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(28px, 3.6vw, 52px); z-index: 3; pointer-events: none;
  background: var(--casse);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--citron); }
.site-footer p { color: rgba(255,255,255,.72); }
.site-footer strong { color: #fff; }
.footer-contact svg { color: var(--citron); }
.footer-social a:hover { background: var(--energie); }

/* ---------- La pente, signature de rupture ---------- */
.hero--dawn > .container::after {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(-1 * clamp(100px, 11vw, 168px));
  width: 100vw; height: clamp(30px, 3.6vw, 54px);
  z-index: 3; pointer-events: none;
  background: var(--casse);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.page-hero {
  position: relative; overflow: hidden;
  background: var(--voile-vert); color: var(--ink-2);
  padding-block: clamp(40px,5vw,76px) calc(clamp(38px,5vw,66px) + 40px);
  border-bottom: 0;
}
.page-hero::before, .page-hero::after { content: none; }
.page-hero .pente {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(26px, 3.4vw, 48px); z-index: 2; pointer-events: none;
  background: var(--casse);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.page-hero h1 { color: var(--anthracite); }
.page-hero .lead { color: var(--gris); }
.crumbs, .crumbs a { color: var(--gris); }
.crumbs a:hover { color: var(--foret); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ---------- Les avis ----------
   Le guillemet géant en filigrane et la carte bordée faisaient daté. La note
   se lit en premier, la citation respire, et l'auteur se signale par une
   initiale colorée plutôt que par une ligne de métadonnées. */
.avis-carte { padding: clamp(24px, 2.6vw, 32px); }
.avis-carte::before { content: none; }
.avis-tete { margin-bottom: 16px; }
.avis-carte blockquote {
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 500;
  line-height: 1.55; letter-spacing: -.012em; color: var(--anthracite);
}
.avis-carte figcaption {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sauge);
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center;
}
.avis-carte figcaption::before {
  content: ""; grid-row: 1 / 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--voile-bleu);
  box-shadow: inset 0 0 0 1px rgba(26,106,155,.2);
}
.avis-auteur { font-size: .9rem; color: var(--anthracite); align-self: end; }
.avis-meta { font-size: .78rem; color: var(--bleu); align-self: start; }
.avis-date { grid-column: 2; font-size: .72rem; color: var(--gris); }
.avis-etoiles .on { fill: var(--orange); }
.avis-etoiles .off { fill: var(--sauge); }
.avis-score { background: #fff; border: 1px solid var(--sauge); box-shadow: var(--ombre-1); }
.avis-exemple { background: var(--voile-chaud); border-color: rgba(217,122,30,.3); color: var(--orange-fonce); }
.avis-bande { background: var(--voile-vert); border-bottom: 1px solid var(--sauge); }

/* ---------- Le bloc photo et son propos ---------- */
.bloc-duo { background: #fff; border: 1px solid var(--sauge); border-radius: var(--radius-lg); box-shadow: var(--ombre-2); }
.bloc-duo-image::after {
  background: linear-gradient(104deg, rgba(12,32,45,.76) 0%, rgba(12,47,73,.4) 48%, rgba(12,47,73,.06) 80%, transparent 100%);
}
.bloc-duo-mesure strong { color: var(--citron); }
.carte-zone { border-color: var(--sauge); background: #fff; box-shadow: var(--ombre-1); }
.carte-facade:hover { background: var(--voile-bleu); }
.carte-ico { background: var(--voile-bleu); color: var(--bleu); box-shadow: none; }
.carte-ico svg { color: inherit; }
.carte-txt b { color: var(--anthracite); }
.carte-txt small { color: var(--gris); }

/* ---------- Le simulateur ---------- */
.sim {
  background: #fff; border: 1px solid var(--sauge); border-radius: var(--radius-lg);
  box-shadow: var(--ombre-2); color: var(--ink-2);
}
.sim::after { content: none; }
.sim h2, .sim h3 { color: var(--anthracite); }
.sim-result { background: var(--voile-chaud); border: 1px solid rgba(217,122,30,.2); box-shadow: none; }
.sim-result .big { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--orange-fonce); font-family: var(--font-mono); }
.sim-kpi { background: var(--casse); border: 1px solid var(--sauge); box-shadow: none; }
.sim-kpi .v { color: var(--anthracite); }
.sim-kpi .k { color: var(--gris); }
.sim-control label { color: var(--anthracite); }
.sim-control output { color: var(--bleu); }
.sim-select { background-color: #fff; border-color: var(--sauge); color: var(--anthracite); }
.sim-courbe #sim-trait { stroke: var(--bleu); filter: none; }
.sim-courbe #sim-soleil { fill: var(--orange); filter: none; }
.sim-courbe figcaption, .sim-courbe svg { color: var(--gris); }
.sim-courbe figcaption strong, .sim-courbe figcaption span { color: var(--bleu); }
.sim-alerte { background: var(--voile-chaud); border-left-color: var(--orange); color: var(--orange-fonce); }
input[type=range] { background: var(--sauge); }
input[type=range]::-webkit-slider-thumb { background: var(--bleu); border: 3px solid #fff; box-shadow: var(--ombre-1); }
input[type=range]::-moz-range-thumb { background: var(--bleu); border: 3px solid #fff; }

/* ==========================================================================
   MISE EN PAGE DES COMPOSANTS INTRODUITS APRÈS LA FEUILLE D'ORIGINE
   ==========================================================================
   Ces blocs avaient leur mise en page dans les couches de correctifs qui ont
   été retirées. Ils sont réécrits ici, à leur place, une seule fois.
   ========================================================================== */

/* ---------- Photographies de section ---------- */
.photo {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--voile-bleu);
  aspect-ratio: 4 / 3;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(12,47,73,.04) 0%, rgba(18,44,60,.26) 100%);
  transition: opacity .4s var(--ease);
}
.card:hover .photo img, .project:hover .photo img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .photo img { transition: none; } }

/* ---------- Le bloc photo et son propos ---------- */
.bloc-duo { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.bloc-duo-image { position: relative; min-height: 400px; }
.bloc-duo-image picture, .bloc-duo-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.bloc-duo-image::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bloc-duo-mesure {
  position: absolute; z-index: 2;
  left: clamp(22px, 3vw, 34px); bottom: clamp(22px, 3vw, 34px);
  margin: 0; color: #fff; display: flex; align-items: baseline; gap: 12px;
}
.bloc-duo-mesure strong {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 700; line-height: .9; letter-spacing: -.04em;
}
.bloc-duo-mesure span { font-size: .82rem; line-height: 1.35; color: rgba(255,255,255,.9); }
.bloc-duo-texte { padding: clamp(28px, 3.2vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.bloc-duo-texte h2 { max-width: 16ch; }
.bloc-duo-texte .lead { max-width: 44ch; }
@media (max-width: 980px) {
  .bloc-duo { grid-template-columns: 1fr; }
  .bloc-duo-image { min-height: 240px; aspect-ratio: 16 / 9; }
  .bloc-duo-image::after { background: linear-gradient(180deg, rgba(12,32,45,.2) 0%, rgba(12,32,45,.72) 100%) !important; }
}

/* ---------- La carte des zones, chargée au clic ---------- */
.carte-zone { margin-top: clamp(14px, 1.8vw, 22px); border: 1px solid var(--sauge); border-radius: var(--radius-lg); overflow: hidden; }
.carte-facade {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.6vw, 32px);
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-2);
  transition: background-color .25s var(--ease);
}
.carte-facade:focus-visible { outline: 3px solid var(--bleu); outline-offset: -3px; }
.carte-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.carte-ico svg { width: 22px; height: 22px; stroke-width: 1.9; }
.carte-txt { display: flex; flex-direction: column; gap: 4px; }
.carte-txt b { font-family: var(--font-head); font-weight: 700; font-size: .98rem; }
.carte-txt small { font-size: .8rem; line-height: 1.5; max-width: 62ch; }
.carte-zone iframe { width: 100%; height: clamp(300px, 36vw, 420px); border: 0; display: block; }

/* ---------- Le bandeau des avis en maquette ---------- */
.avis-exemple {
  max-width: 700px; margin: 0 auto clamp(22px, 3vw, 32px);
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid rgba(217,122,30,.3);
  font-size: .85rem; line-height: 1.55; text-align: center;
}

/* ---------- Quelques utilitaires restés orphelins ---------- */
.note { border-left: 3px solid var(--orange); background: var(--voile-chaud); padding: 13px 16px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: .9rem; color: var(--ink-2); }
.arc-glow { display: none; }

/* ==========================================================================
   CORRECTIONS D'USAGE
   ========================================================================== */

/* ---------- Les onglets du menu, lisibles sur le hero ----------
   La règle d'origine donnait à la page courante un fond vert pâle et un texte
   vert foncé, hérité du menu sur fond blanc. Posé sur une photographie sombre,
   ça faisait une pastille claire au texte illisible. */
.nav-links > li > a,
.nav-links > li > button,
.nav-links > li.active > a,
.nav-links > li > a:hover,
.nav-links > li > button:hover { background: none; }
.nav-links > li.active > a { color: var(--foret); font-weight: 700; }
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li.active > a,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > a:hover,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > button:hover {
  color: #fff; background: none;
}

/* ---------- Notre méthode : le dégradé revient, la trame entre dans les cadres ----
   La section était devenue un aplat bleu uni et ses jalons avaient viré à
   l'orange, qui est la couleur de la lumière et non celle du parcours. Le fond
   redevient un dégradé, les jalons reprennent le bleu de la mesure, et la
   trame se loge dans les encarts d'étape comme partout ailleurs. */
.section--bleu {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(79,163,209,.16) 0%, transparent 58%),
    linear-gradient(168deg, #EDF4FA 0%, #E6F0F7 44%, #F3F7F5 100%);
}
.journey-body {
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff; border: 1px solid var(--sauge); border-radius: var(--radius);
  box-shadow: var(--ombre-1);
}
.journey-body::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .55; transition: opacity .45s var(--ease);
  background-image:
    linear-gradient(rgba(217,122,30,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,122,30,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 62%);
}
.journey-step.is-on .journey-body::after { opacity: 1; }
.journey-body h3 { color: var(--anthracite); }

/* ---------- Le tableau de chiffrage ----------
   Il était plat : une crème uniforme, un grand nombre orange posé dessus et
   six cases blanches sans hiérarchie. Le résultat principal prend maintenant
   un fond profond qui le détache nettement, les indicateurs deviennent des
   cellules en verre, et l'ensemble gagne la profondeur qui manquait. */
.sim-result {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(158deg, #FFF8EC 0%, #FDF1DC 52%, #FBEAD0 100%);
  border: 1px solid rgba(217,122,30,.22);
  box-shadow: 0 20px 44px -26px rgba(181,96,15,.5), inset 0 1px 0 rgba(255,255,255,.8);
  border-radius: var(--radius-lg);
}
.sim-result::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(217,122,30,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,122,30,.13) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 120% at 100% 0%, #000 0%, transparent 60%);
  mask-image: radial-gradient(100% 120% at 100% 0%, #000 0%, transparent 60%);
}
/* Le chiffre principal ne flotte plus sur le fond : il s'appuie sur une plaque
   sombre, ce qui lui donne le poids d'un résultat et non d'un titre. */
.sim-result .eyebrow { color: var(--orange-fonce); }
.sim-result .big {
  display: block; width: fit-content;
  margin: 2px 0 4px; padding: 10px 20px 12px;
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--foret) 0%, #16483A 60%, #103A2E 100%);
  color: #fff;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -.045em;
  box-shadow: 0 16px 32px -18px rgba(18,44,60,.75), inset 0 1px 0 rgba(255,255,255,.14);
}
.sim-kpis { gap: 12px; }
.sim-kpi {
  position: relative;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius);
  padding: 14px 15px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -12px rgba(181,96,15,.5), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sim-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(181,96,15,.6); }
.sim-kpi .v { font-size: 1.14rem; color: var(--anthracite); letter-spacing: -.03em; }
.sim-kpi .k { font-size: .73rem; color: var(--gris); margin-top: 3px; }
.sim-tags { margin-top: 20px; }
.sim-result .chip { background: rgba(255,255,255,.76); color: var(--orange-fonce); border: 1px solid rgba(217,122,30,.2); }
.sim-result .chip strong { color: var(--foret); }
.sim-result .btn { width: 100%; margin-top: 18px; }
.sim-alerte { background: rgba(255,255,255,.7); border-left: 3px solid var(--orange); color: #6B4A14; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }

/* ==========================================================================
   LES FONDS SONT DES DÉGRADÉS, PAS DES BLOCS
   ==========================================================================
   Les surfaces teintées étaient des aplats uniformes. Elles redeviennent des
   dégradés : une lumière qui entre par un angle et se dissout vers le blanc
   cassé, de sorte qu'aucune section ne se termine sur une ligne de couleur
   franche. C'est aussi ce qui raccorde les sections entre elles sans rupture.
   ========================================================================== */

.section--vert {
  background:
    radial-gradient(112% 86% at 8% -12%, rgba(47,127,15,.14) 0%, transparent 56%),
    linear-gradient(168deg, #EDF5E8 0%, #F3F8EF 46%, var(--casse) 100%);
}
.section--bleu {
  background:
    radial-gradient(118% 90% at 88% -12%, rgba(79,163,209,.2) 0%, transparent 58%),
    linear-gradient(168deg, #E9F2F9 0%, #F0F6FA 46%, var(--casse) 100%);
}
/* L'en-tête des pages intérieures suit la même logique. */
.page-hero {
  background:
    radial-gradient(100% 120% at 92% -20%, rgba(217,122,30,.14) 0%, transparent 56%),
    linear-gradient(166deg, #EEF5E9 0%, #F4F9F1 50%, var(--casse) 100%);
}
/* Le bandeau des avis également. */
.avis-bande {
  background: linear-gradient(100deg, #EEF5E9 0%, #F5F9F2 52%, var(--casse) 100%);
  border-bottom: 1px solid var(--sauge);
}

/* ---------- Le titre du hero retrouve son dégradé ----------
   La moitié accentuée était devenue un aplat citron. Elle reprend le dégradé
   qui fait la liaison entre les deux familles de la palette, du citron au bleu
   du ciel en passant par le vert. */
.hero--dawn h1 .hl, h1 .hl {
  background: linear-gradient(102deg, var(--citron) 0%, #A6E59B 34%, #7FD3E8 72%, var(--bleu-clair) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Sur fond clair, le dégradé part du vert de la marque vers le bleu cellule. */
.page-hero h1 .hl, .section h2 .hl {
  background: linear-gradient(102deg, var(--foret) 0%, var(--energie) 40%, var(--bleu) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ==========================================================================
   RETOUR DES EFFETS VALIDÉS
   ==========================================================================
   En refaisant la feuille d'un bloc, j'ai emporté des réglages qui avaient été
   validés : le halo coloré sous les boutons, la dissolution des fonds teintés
   à leurs bords, et la densité des trames. Ils sont rétablis ici, sur la base
   propre.
   ========================================================================== */

/* ---------- Les fonds teintés se dissolvent, ils ne se découpent plus ----------
   Un dégradé enfermé dans un rectangle reste un bloc : on voit sa limite en
   haut et en bas. Un masque fait disparaître la teinte à ses deux extrémités,
   de sorte qu'elle naît du blanc cassé et y retourne. C'est la différence entre
   les deux captures. */
.section--vert, .section--bleu {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(70px, 9vw, 130px), #000 calc(100% - clamp(70px, 9vw, 130px)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(70px, 9vw, 130px), #000 calc(100% - clamp(70px, 9vw, 130px)), transparent 100%);
}
/* La teinte peut donc être plus franche au centre, puisqu'elle s'efface aux bords. */
.section--vert {
  background:
    radial-gradient(110% 80% at 10% 0%, rgba(47,127,15,.16) 0%, transparent 60%),
    linear-gradient(170deg, #E9F3E2 0%, #EFF6EA 52%, #E9F3E2 100%);
}
.section--bleu {
  background:
    radial-gradient(116% 84% at 88% 0%, rgba(79,163,209,.24) 0%, transparent 60%),
    linear-gradient(170deg, #E4EFF8 0%, #EDF4FA 52%, #E4EFF8 100%);
}
.page-hero {
  background:
    radial-gradient(100% 120% at 92% -20%, rgba(217,122,30,.16) 0%, transparent 56%),
    linear-gradient(166deg, #EAF3E4 0%, #F2F8EE 56%, var(--casse) 100%);
}

/* ---------- Le halo coloré revient sous les boutons ----------
   L'ombre neutre ne donnait aucun relief. Chaque bouton reprend le halo de sa
   famille, qui s'intensifie au survol. */
.btn { box-shadow: 0 14px 28px -14px rgba(18,44,60,.62), 0 2px 5px -2px rgba(18,44,60,.28); }
.btn:hover { box-shadow: 0 22px 40px -16px rgba(18,44,60,.72), 0 3px 8px -3px rgba(18,44,60,.3); }
.btn:active { box-shadow: 0 6px 14px -10px rgba(18,44,60,.6); }
.btn--sun { box-shadow: 0 14px 28px -14px rgba(217,122,30,.65), 0 2px 5px -2px rgba(217,122,30,.3); }
.btn--sun:hover { box-shadow: 0 22px 40px -16px rgba(217,122,30,.75); }
.btn--ghost, .btn--light { box-shadow: 0 8px 18px -12px rgba(18,44,60,.4); }
.btn--ghost:hover, .btn--light:hover { box-shadow: 0 16px 30px -14px rgba(18,44,60,.5); }
.cta-band .btn { box-shadow: 0 16px 32px -14px rgba(18,44,60,.68); }

/* ---------- Plus de trame, et plus visible ----------
   Elle était trop discrète pour se lire comme une signature. Elle gagne en
   densité et s'étend aux encarts qui ne l'avaient pas : solutions, avis,
   étapes du remerciement, bloc des zones. */
.card::before, .project::before, .avis-carte::before, .merci-etapes li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(26,106,155,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,106,155,.16) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(135% 125% at 100% 0%, #000 0%, transparent 66%);
  mask-image: radial-gradient(135% 125% at 100% 0%, #000 0%, transparent 66%);
  opacity: .7; transition: opacity .35s var(--ease);
}
.card:hover::before, .project:hover::before, .avis-carte:hover::before { opacity: 1; }
.bloc-duo-texte { position: relative; isolation: isolate; }
.bloc-duo-texte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,106,155,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,106,155,.14) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 60%);
  mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 60%);
}

/* ---------- Le simulateur : du relief, enfin ----------
   Le panneau restait un rectangle blanc posé à plat. Il reçoit une lumière
   d'angle, une trame, un relief marqué, et chaque commande devient un élément
   manipulable plutôt qu'une ligne de formulaire. */
.sim {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(217,122,30,.1) 0%, transparent 56%),
    radial-gradient(80% 60% at 0% 100%, rgba(26,106,155,.08) 0%, transparent 58%),
    #fff;
  border: 1px solid var(--sauge);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 64px -34px rgba(18,44,60,.45), 0 2px 6px -3px rgba(18,44,60,.12);
  padding: clamp(24px, 3vw, 44px);
}
.sim::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,106,155,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,106,155,.1) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(90% 90% at 4% 4%, #000 0%, transparent 62%);
  mask-image: radial-gradient(90% 90% at 4% 4%, #000 0%, transparent 62%);
}

/* Chaque commande devient une ligne posée, avec sa valeur mise en évidence. */
.sim-control {
  position: relative; margin-bottom: 22px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--casse); border: 1px solid var(--sauge);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sim-control:hover, .sim-control:focus-within { border-color: rgba(26,106,155,.4); box-shadow: 0 10px 22px -16px rgba(26,106,155,.6); }
.sim-control label { font-size: .9rem; }
.sim-control output {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.04rem; font-weight: 700; color: var(--bleu); letter-spacing: -.03em;
  background: #fff; padding: 3px 10px; border-radius: 7px;
  border: 1px solid rgba(26,106,155,.2);
}
.sim-select { box-shadow: 0 2px 6px -4px rgba(18,44,60,.4); }
.sim-select:hover { border-color: var(--bleu); }
input[type=range] { height: 7px; }
input[type=range]::-webkit-slider-thumb {
  width: 24px; height: 24px;
  background: linear-gradient(140deg, var(--bleu-clair), var(--bleu) 62%, #14547C);
  border: 3px solid #fff;
  box-shadow: 0 6px 14px -6px rgba(26,106,155,.8);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--bleu); border: 3px solid #fff;
  box-shadow: 0 6px 14px -6px rgba(26,106,155,.8);
}

/* La courbe de production repose sur sa propre plaque, comme un relevé. */
.sim-courbe {
  padding: 16px 18px 12px; border-radius: var(--radius);
  background: linear-gradient(170deg, #FFFBF2 0%, #FFF7E8 100%);
  border: 1px solid rgba(217,122,30,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.sim-courbe #sim-trait { stroke-width: 3; filter: drop-shadow(0 3px 6px rgba(26,106,155,.35)); }
.sim-courbe #sim-soleil { filter: drop-shadow(0 0 10px rgba(217,122,30,.75)); r: 8; }
.sim label.check { color: var(--anthracite); }

/* ==========================================================================
   L'ORANGE DEVIENT LA COULEUR DE L'ACTION
   ==========================================================================
   Le bouton principal était en vert forêt, c'est à dire de la même famille que
   le pied de page, les surfaces vertes et le bandeau du haut. Résultat : dans
   le pied de page il disparaissait dans son propre fond, et ailleurs il se
   confondait avec le décor. L'orange prend donc le rôle de l'action, le vert
   garde celui de la marque et des surfaces, le bleu celui de la donnée.

   Le système devient lisible d'un coup d'œil : tout ce qui est orange se
   clique. C'est aussi le meilleur choix de conversion, puisque c'est la seule
   couleur qui ressort sur les trois fonds du site, le clair, le vert et la
   photographie.

   Nuance retenue : #B05C0D, et pas l'orange vif de la palette. Le texte blanc
   sur l'orange vif ne donne que 3,1 contre 1, ce qui est sous le seuil
   d'accessibilité pour un libellé de 15 px. Celui-ci donne 4,8 contre 1.
   ========================================================================== */

:root { --action: #B05C0D; --action-fort: #92480A; --action-clair: #D97A1E; }

.btn {
  --btn-bg: var(--action);
  box-shadow: 0 14px 28px -14px rgba(176,92,13,.7), 0 2px 5px -2px rgba(176,92,13,.32);
}
.btn:hover {
  background: var(--action-fort);
  box-shadow: 0 22px 40px -16px rgba(176,92,13,.78), 0 3px 8px -3px rgba(176,92,13,.34);
}
.btn:active { box-shadow: 0 6px 14px -10px rgba(176,92,13,.7); }
.btn:focus-visible { outline: 3px solid var(--foret); outline-offset: 2px; }
.btn--sun { --btn-bg: var(--action); }
.btn--sun:hover { background: var(--action-fort); }
/* Le bouton sombre reste disponible pour les rares cas où l'orange ne convient
   pas, par exemple sur une surface déjà chaude. */
.btn--ink { --btn-bg: var(--foret); box-shadow: 0 14px 28px -14px rgba(18,44,60,.6); }
.btn--ink:hover { background: var(--foret-fonce); }

/* Dans le pied de page, l'orange ressort franchement sur le vert profond :
   c'est précisément le cas que le vert sur vert rendait illisible. */
.site-footer .btn { box-shadow: 0 16px 32px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.cta-band .btn { box-shadow: 0 16px 32px -14px rgba(176,92,13,.6); }
/* Sur le hero, la photographie est déjà chaude au couchant : le halo est
   renforcé pour que le bouton s'en détache. */
.hero--dawn .btn { box-shadow: 0 18px 36px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); }

/* Les éléments qui signalaient l'action en vert suivent. */
.sim-result .btn { width: 100%; }
.mcta-main { background: var(--action) !important; }
.mobile-cta .mcta-main { box-shadow: 0 12px 26px -12px rgba(176,92,13,.7); }

/* La trame quitte la colonne de texte du bloc des zones et passe sur l'onglet
   de la carte, juste en dessous : c'est là qu'elle sert, puisque cet onglet est
   le seul élément vide de la section. */
.bloc-duo-texte::before { content: none; }
.carte-zone { position: relative; isolation: isolate; overflow: hidden; }
.carte-zone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,106,155,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,106,155,.16) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(130% 150% at 100% 0%, #000 0%, transparent 64%);
  mask-image: radial-gradient(130% 150% at 100% 0%, #000 0%, transparent 64%);
  opacity: .8; transition: opacity .35s var(--ease);
}
.carte-facade:hover ~ *, .carte-zone:hover::before { opacity: 1; }
.carte-zone.chargee::before { content: none; }

/* ==========================================================================
   L'ORANGE VIF, AVEC DU TEXTE SOMBRE
   ==========================================================================
   Le #B05C0D précédent était un orange brûlé, terne : il fallait le foncer à ce
   point pour que du texte blanc y reste lisible. L'orange vif de la marque est
   bien plus juste, mais aucun de ses tons ne porte du texte blanc au-dessus de
   3,1 contre 1, ce qui est sous le seuil pour un libellé de 15 px.

   La sortie est celle que le cahier prescrit déjà pour le vert citron, page 4 :
   « Utiliser le vert citron avec texte foncé, jamais avec du texte blanc de
   petite taille. » Le bouton porte donc le dégradé orange vif, et son libellé
   passe en vert forêt. Le couple donne 4,7 contre 1 au point le plus sombre du
   dégradé, et il est bien plus affirmé qu'un aplat brun avec du blanc dessus.
   ========================================================================== */

:root { --action: #F7881C; --action-fort: #E8720F; --action-clair: #FFB03C; }

.btn {
  background: linear-gradient(118deg, #FFB03C 0%, #FF9A28 46%, #F7881C 100%);
  color: var(--foret);
  box-shadow: 0 14px 28px -14px rgba(232,114,15,.75), 0 2px 6px -2px rgba(232,114,15,.4);
}
.btn svg { color: var(--foret); }
.btn:hover {
  background: linear-gradient(118deg, #FFBC52 0%, #FFA534 46%, #FF9220 100%);
  color: var(--foret);
  box-shadow: 0 22px 42px -16px rgba(232,114,15,.85), 0 3px 9px -3px rgba(232,114,15,.44);
}
.btn:active { box-shadow: 0 6px 14px -10px rgba(232,114,15,.7); }
.btn:focus-visible { outline: 3px solid var(--foret); outline-offset: 2px; }
.btn--sun { background: linear-gradient(118deg, #FFB03C 0%, #FF9A28 46%, #F7881C 100%); color: var(--foret); }
/* Le bouton sombre garde son texte blanc : il sert sur les surfaces chaudes. */
.btn--ink { background: var(--foret); color: #fff; box-shadow: 0 14px 28px -14px rgba(18,44,60,.62); }
.btn--ink:hover { background: var(--foret-fonce); color: #fff; }
.btn--ink svg { color: #fff; }

/* Sur fond sombre, le halo s'appuie sur du noir pour que l'orange se détache
   de la photographie et du vert profond du pied de page. */
.hero--dawn .btn, .site-footer .btn {
  box-shadow: 0 18px 38px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14);
}
.cta-band .btn { box-shadow: 0 16px 34px -14px rgba(232,114,15,.68); }
.mcta-main { background: linear-gradient(118deg, #FFB03C, #F7881C) !important; color: var(--foret) !important; }
.mcta-main svg { color: var(--foret); }

/* ==========================================================================
   UN SEUL ORANGE PAR ÉCRAN, ET IL EST LUMINEUX
   ==========================================================================
   Deux corrections.

   D'abord, tout était orange : un bouton de navigation et un bouton de
   conversion portaient la même couleur, donc l'orange ne signalait plus rien.
   Le vert redevient la couleur du bouton ordinaire, et l'orange est réservé au
   seul geste qui compte, faire chiffrer son toit. Il y en a un par écran.

   Ensuite, en ramenant la palette à une seule nuance d'orange accessible,
   j'avais éteint l'orange décoratif : les jalons de la méthode et les
   pictogrammes avaient perdu leur éclat. Les usages décoratifs, qui ne portent
   pas de texte, retrouvent l'orange vif de la marque.
   ========================================================================== */

:root {
  /* Décoratif : aucune contrainte de contraste, donc l'orange d'origine. */
  --orange-vif: #FF8A1E;
  --ambre: #FFC53D;
  --orange: var(--orange-vif);
  --amber: var(--ambre);
  --grad-sun: linear-gradient(120deg, #FF6A00 0%, #FF8A1E 42%, #FFC53D 100%);
  --shadow-sun: 0 20px 40px -18px rgba(255,138,30,.6);
}

/* ---------- Le bouton ordinaire : vert de marque, texte blanc ---------- */
.btn {
  background: var(--foret); color: #fff;
  box-shadow: 0 14px 28px -14px rgba(18,44,60,.6), 0 2px 5px -2px rgba(18,44,60,.26);
}
.btn svg { color: #fff; }
.btn:hover {
  background: var(--foret-fonce); color: #fff;
  box-shadow: 0 22px 40px -16px rgba(18,44,60,.7);
}

/* ---------- Le bouton de conversion : le vert clair du logo ----------
   Le client a demandé que l'orange des CTA passe au vert clair de son logo,
   celui du mot ECO. On reprend exactement ce dégradé (stEco du fichier de
   marque : #2F7F0F → #57BB1C → #8FDB2C), éclairci pour un libellé sombre.

   Le libellé reste en vert très sombre : aucun ton de ce vert ne porte du
   blanc au-dessus de 2,5 contre 1. Avec l'encre verte, le couple tient
   5,6 contre 1 au point le plus sombre du dégradé et 9,2 au plus clair,
   contre 5,0 au minimum avec l'ancien orange — donc plus lisible qu'avant,
   en plus d'être la couleur de la marque. */
.btn--sun {
  background: linear-gradient(118deg, #8FDB2C 0%, #6CC93E 45%, #4FB01A 100%);
  color: #10281A;
  box-shadow: 0 16px 32px -14px rgba(79,176,26,.62), 0 2px 6px -2px rgba(79,176,26,.34);
}
.btn--sun svg { color: #10281A; }
.btn--sun:hover {
  background: linear-gradient(118deg, #9BE53C 0%, #78D648 45%, #57BB1C 100%);
  color: #10281A;
  box-shadow: 0 24px 44px -16px rgba(79,176,26,.72);
}
.btn--sun:focus-visible { outline: 3px solid var(--foret); outline-offset: 2px; }
.hero--dawn .btn--sun, .site-footer .btn--sun {
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.2);
}
.mcta-main { background: linear-gradient(118deg, #8FDB2C, #4FB01A) !important; color: #10281A !important; }

/* ---------- Les jalons et pictogrammes retrouvent leur éclat ---------- */
.journey-step.is-on .journey-node {
  background: var(--grad-sun);
  box-shadow: 0 18px 34px -14px rgba(255,138,30,.7), 0 0 0 9px rgba(255,138,30,.12);
}
.journey-step.is-on .journey-node b { background: var(--anthracite); color: var(--ambre); }
.journey-step.is-on .journey-node::after { border-color: rgba(255,138,30,.45); }
.ico-badge--sun { background: linear-gradient(140deg, #FFC25A, #FF8A1E); color: var(--foret); }
.ico-badge--sun svg { color: var(--foret); }
.card:hover .ico-badge--sun { background: var(--grad-sun); }
.trust-item--chaud .trust-ico { background: linear-gradient(140deg, #FFD98A, #FF9A28); color: var(--foret); }
.trust-item--chaud .trust-ico svg { color: var(--foret); }

/* ---------- L'en-tête du menu latéral s'accorde au hero ---------- */
.drawer-top {
  background:
    linear-gradient(102deg, rgba(12,32,45,.94) 0%, rgba(12,44,62,.86) 100%),
    url("/assets/img/photos/hero-panneaux-860.jpg") center 40% / cover no-repeat;
  color: rgba(255,255,255,.88);
}
.drawer-top::before { content: none; }
.drawer-tag { color: rgba(255,255,255,.7); }
.drawer-proof { color: rgba(255,255,255,.82); }
.drawer-proof b { color: #fff; }
.drawer-close { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }
.drawer-close:hover { background: rgba(255,255,255,.2); }
.drawer-top .brand-logo--ink { display: none; }
.drawer-top .brand-logo--clair { display: block; }

/* ---------- La photographie des en-têtes de page intérieure ----------
   Elle n'est pas une texture de fond : elle occupe le tiers droit de l'en-tête
   et se fond vers la gauche par un masque, pour que le titre garde un fond
   plein et que la photo garde ses vraies couleurs là où on la voit. */
.page-photo {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  width: min(50%, 720px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 34%, #000 72%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 34%, #000 72%);
}
.page-photo picture, .page-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 52%; display: block;
}
/* Un voile très léger accorde la photo au vert de la marque, et la pente du bas
   reprend la main sur le dernier tiers. */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--voile-vert) 0%, var(--voile-vert) 36%, color-mix(in oklab, var(--voile-vert) 62%, transparent) 52%, transparent 76%);
}
/* La photo garde ses couleurs, juste accordée au vert de la marque et au sol
   crème de la page : un léger voile chaud en haut, le fond de page en bas. */
.page-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 58%, color-mix(in oklab, var(--casse) 70%, transparent) 100%),
    radial-gradient(130% 150% at 94% -14%, rgba(255,181,61,.2) 0%, transparent 56%);
}
.page-hero { min-height: clamp(240px, 26vw, 340px); }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero .pente { z-index: 3; }
.page-hero .lead { max-width: 44ch; }

@media (max-width: 900px) {
  /* Sur mobile le texte prend toute la largeur : la photo repasse en fond
     discret plutôt qu'en colonne, sinon elle passe sous les mots. */
  .page-photo {
    inset: auto 0 0 0; width: 100%; height: 56%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 34%, #000 68%, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 34%, #000 68%, #000 86%, transparent 100%);
  }
  .page-photo picture, .page-photo img { object-position: 50% 42%; }
  .page-photo::after {
    background: linear-gradient(180deg, transparent 0%, transparent 62%, color-mix(in oklab, var(--casse) 62%, transparent) 100%);
  }
  .page-hero::after {
    background: linear-gradient(180deg, var(--voile-vert) 0%, color-mix(in oklab, var(--voile-vert) 70%, transparent) 38%, transparent 62%);
  }
  .page-hero .lead { max-width: none; }
}

/* ==========================================================================
   LA BATTERIE DE DÉFILEMENT, DÉFINITION UNIQUE
   ==========================================================================
   Six blocs successifs la décrivaient et se contredisaient : le tube était
   déclaré vertical alors que la charge se remplissait encore en largeur, et la
   largeur était forcée à 100 %. Elle restait donc vide quoi qu'il arrive.
   Tout est réuni ici, une fois pour toutes. */
.batterie {
  position: fixed; z-index: 90;
  right: clamp(12px, 1.6vw, 22px); left: auto;
  top: 50%; bottom: auto;
  transform: translateY(-50%) translateX(16px);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0; border: 0; background: none; box-shadow: none;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,.9,.3,1);
}
.batterie.vue { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Le tube : un cylindre, donc un modelé transversal du bord sombre au centre
   clair, pas un simple creux. Le vide reste neutre pour qu'on lise le niveau. */
.batterie-corps {
  position: relative; display: block; overflow: hidden;
  width: 19px; height: clamp(96px, 14vh, 142px);
  border: 0; border-radius: 10px; padding: 0;
  background:
    linear-gradient(95deg,
      rgba(18,30,24,.34) 0%,
      rgba(255,255,255,.46) 34%,
      rgba(255,255,255,.66) 48%,
      rgba(255,255,255,.36) 62%,
      rgba(18,30,24,.3) 100%),
    rgba(28,36,31,.16);
  box-shadow:
    inset 0 3px 7px rgba(16,32,24,.4),
    inset 0 -3px 6px rgba(16,32,24,.26),
    inset 0 0 0 1.5px rgba(255,255,255,.7),
    0 14px 30px -12px rgba(16,42,32,.6);
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
}
/* La borne positive, posée au-dessus de la cellule. */
.batterie-corps::after {
  content: ""; position: absolute; left: 50%; top: -6px; right: auto; bottom: auto;
  transform: translateX(-50%);
  width: 9px; height: 5px; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(95deg, #2A3A31, #51665B 45%, #2A3A31);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* La lumière spéculaire : un trait fin, décalé, fixe. C'est elle qui donne le
   cylindre, donc elle ne bouge pas avec le niveau. */
.batterie-corps::before {
  content: ""; position: absolute; z-index: 3;
  left: 4px; top: 7px; bottom: 7px; width: 3.5px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 44%, rgba(255,255,255,.12) 100%);
  filter: blur(.4px); pointer-events: none;
}
/* La charge monte du bas vers le haut : c'est la HAUTEUR que le script pilote. */
.batterie-charge {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  display: block; width: auto; height: 0%; min-height: 9px;
  border-radius: 8px;
  background:
    linear-gradient(95deg,
      rgba(0,0,0,.26) 0%,
      rgba(255,255,255,.34) 36%,
      rgba(255,255,255,.5) 50%,
      rgba(255,255,255,.2) 66%,
      rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, #FFD36B 0%, #C3E86D 26%, #7FCB4C 56%, #2E8B3C 100%);
  box-shadow: 0 0 20px rgba(160,220,90,.8), inset 0 2px 0 rgba(255,255,255,.85);
  transition: height .18s linear;
}
.batterie.pleine .batterie-charge {
  box-shadow: 0 0 26px rgba(118,200,74,.95), inset 0 2px 0 rgba(255,255,255,.9);
}
.batterie-valeur {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .72rem; font-weight: 700; letter-spacing: -.04em;
  color: var(--foret); text-align: center;
  background: rgba(255,255,255,.9); padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(16,42,32,.6), inset 0 0 0 1px rgba(18,44,60,.08);
}
.batterie-valeur small { font-size: .62em; opacity: .6; margin-left: 1px; }
.batterie.pleine .batterie-valeur { color: var(--energie); }

/* Sur mobile elle reste, mais plus discrète : une cellule courte collée au
   bord droit, sans la pastille de pourcentage qui mangerait l'écran. */
@media (max-width: 760px) {
  .batterie { right: 8px; gap: 0; }
  .batterie-corps { width: 13px; height: clamp(64px, 11vh, 86px); border-radius: 7px; }
  .batterie-corps::after { width: 7px; height: 4px; top: -5px; }
  .batterie-corps::before { left: 3px; width: 2.5px; }
  .batterie-charge { border-radius: 6px; min-height: 7px; }
  .batterie-valeur { display: none; }
}
/* Un mouvement qui se répète à chaque défilement n'a pas à être imposé. */
@media (prefers-reduced-motion: reduce) {
  .batterie { transition: none; }
  .batterie-charge { transition: none; }
}

/* ---------- Le pied de page ne repeint plus le bouton de conversion ----------
   La règle .site-footer a imposait un blanc à 72 % au libellé, qui passait
   donc en blanc sur orange : illisible, et incohérent avec les mêmes boutons
   ailleurs sur le site, où le libellé est vert forêt. */
.site-footer .btn--sun, .site-footer .btn--sun svg,
.site-footer .btn--sun:hover, .site-footer .btn--sun:focus-visible { color: var(--foret); }

/* ---------- L'en-tête du menu mobile prend le bandeau, pas le hero ----------
   La photo du hero, recadrée dans une bande courte, ne montrait plus que du
   ciel. Le bandeau 32:9 est fait pour ce format. */
.drawer-top {
  background:
    linear-gradient(102deg, rgba(12,32,45,.9) 0%, rgba(12,44,62,.8) 100%),
    url("/assets/img/photos/bandeau-panneaux-1100.jpg") center 52% / cover no-repeat;
}

/* ==========================================================================
   PASSE MOBILE
   ==========================================================================
   Trois défauts mesurés au doigt plutôt qu'à l'œil : le bas du pied de page
   passait sous la barre d'appel fixe, le hero ouvrait sur 238 px de vide, et
   la case de consentement faisait 13 px de côté, soit la moitié de la cible
   tactile minimale. */
@media (max-width: 760px) {
  /* La barre d'appel est fixe : le document doit lui réserver sa hauteur,
     sinon elle recouvre la fin du pied de page. */
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mobile-cta { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* Un hero qui s'ouvre sur un écran et demi fait perdre le premier message. */
  .hero { padding-block: 74px 52px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-badges { margin-top: 22px; gap: 9px 16px; }
  .hero .lead { font-size: 1rem; }

  /* Cible tactile : 24 px est le minimum WCAG 2.2, 26 px laisse une marge. */
  .form-rgpd input[type="checkbox"], .form-check input[type="checkbox"],
  form input[type="checkbox"] {
    width: 26px; height: 26px; min-width: 26px; flex: none;
    accent-color: var(--foret);
  }
  /* Le numéro du bandeau haut se touche aussi : on lui donne de la hauteur. */
  .topbar a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* Les réseaux sociaux ne sont pas encore ouverts : le conteneur vide ne doit
   pas laisser son espacement dans le pied de page. */
.footer-social:empty { display: none; }

/* ---------- Les réseaux sociaux, emplacement réservé ----------
   Les comptes ne sont pas ouverts. L'icône reste visible pour montrer où ils
   prendront place, mais elle n'est pas un lien et se distingue d'un compte
   actif : elle est en retrait, et l'infobulle dit ce qu'il en est. */
.reseau-attente {
  position: relative;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.2);
  color: rgba(255,255,255,.4);
  cursor: default;
}
.reseau-attente svg { width: 17px; height: 17px; }
.reseau-attente em {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(3px);
  white-space: nowrap; font-style: normal; font-size: .7rem; font-weight: 600;
  padding: 5px 9px; border-radius: 8px;
  background: var(--anthracite); color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
}
.reseau-attente:hover em, .reseau-attente:focus-visible em {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Chaque photographie place son sujet ailleurs, et le bandeau n'est visible
   qu'en partie : la page dit quel point doit rester dans la fenêtre. */
.page-photo picture, .page-photo img { object-position: var(--cadrage, 60% 52%); }

/* ---------- Le retour en haut ----------
   Il ne s'affiche qu'une fois que la remontée coûte réellement quelque chose,
   c'est-à-dire après un écran et demi, et il s'efface dès qu'on revient. Il se
   place au-dessus de la batterie de défilement, sur le même bord droit, pour
   que les deux repères de lecture soient au même endroit. */
.remonter {
  position: fixed; z-index: 92;
  right: clamp(12px, 1.6vw, 22px);
  bottom: clamp(18px, 2.4vw, 30px);
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(238,244,234,.86));
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  color: var(--foret);
  box-shadow: 0 14px 30px -14px rgba(16,42,32,.6), inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity .32s var(--ease), transform .32s var(--ease-out),
              box-shadow .3s, background .3s;
}
.remonter svg {
  width: 20px; height: 20px;
  transform: rotate(180deg);          /* le chevron du sprite pointe vers le bas */
  transition: transform .3s var(--ease-out);
}
.remonter.vue { opacity: 1; transform: none; }
.remonter:hover, .remonter:focus-visible {
  background: linear-gradient(140deg, #fff, var(--voile-vert));
  box-shadow: 0 20px 38px -14px rgba(16,42,32,.7), inset 0 1px 0 #fff;
}
.remonter:hover svg, .remonter:focus-visible svg { transform: rotate(180deg) translateY(2px); }
.remonter:active { transform: translateY(1px) scale(.97); }
.remonter:focus-visible { outline: 3px solid var(--foret); outline-offset: 3px; }

/* La batterie occupe le milieu du bord droit : le bouton se glisse en dessous,
   et sur mobile la barre d'appel fixe lui laisse sa place. */
@media (max-width: 760px) {
  .remonter {
    width: 42px; height: 42px;
    right: 10px;
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .remonter { transition: opacity .2s linear; }
  .remonter svg { transition: none; }
}

/* ==========================================================================
   REFONTE LUMINEUSE — LE VERT SAPIN SORT DE LA PALETTE
   ==========================================================================
   Trois décisions, appliquées à tout le site :

     1. Plus aucun vert sapin. Les surfaces sombres (barre haute, pied de page,
        en-tête posé sur la photographie, menu latéral) passent à une ardoise
        bleutée : plus neutre, plus lumineuse, elle laisse respirer le vert de
        marque au lieu de le répéter deux fois.
     2. Le vert de la marque reste la seule couleur d'action, mais dans une
        version soutenue : le vert clair du logo ne porte pas de texte blanc
        (2,5 contre 1). Le dégradé retenu tient 5,0 à 6,4 contre 1, mesuré au
        point le plus clair, donc au-dessus du seuil de 4,5 pour un libellé.
        Les libellés des CTA passent donc au blanc, comme demandé.
     3. Les CTA secondaires perdent leur fond plein : un simple contour
        transparent, qui les met à leur place sans les faire disparaître.
   ========================================================================== */

:root {
  /* --- Surfaces sombres : ardoise, plus de vert --- */
  --foret: #16323F;
  --foret-fonce: #0D2230;
  --energie: #2E8B3C;

  /* --- Neutres dégrisés : plus de vert dans les gris --- */
  --casse: #FFFFFF;
  --sauge: #E6EBEE;
  --anthracite: #16232C;
  --gris: #5E6E78;
  --ink-2: #3B4B56;

  /* --- Voiles plus clairs : de la lumière, pas de la couleur --- */
  --voile-vert: #F2FBEA;
  --voile-bleu: #EEF7FD;
  --voile-chaud: #FFF8EC;

  /* --- L'action : le vert du logo, version qui porte du blanc --- */
  --action: #318318;
  --action-fort: #2A6D12;
  --action-clair: #3E9E1F;
  /* Le point le plus clair du dégradé est choisi sur mesure : #318318 tient
     4,78 contre 1 avec un libellé blanc. Un ton plus clair (#3A9420) tombe à
     3,86 et repasse sous le seuil. Le survol fonce au lieu d'éclaircir :
     éclaircir faisait perdre le contraste. */
  --action-fond: linear-gradient(118deg, #318318 0%, #2C7614 52%, #276A10 100%);
  --action-fond-survol: linear-gradient(118deg, #2F7F17 0%, #2A6E12 52%, #24640E 100%);
  --action-halo: 0 16px 32px -14px rgba(47,127,23,.5), 0 2px 6px -2px rgba(47,127,23,.26);

  /* --- Le secondaire : un contour, jamais un fond --- */
  --contour: rgba(22,50,63,.26);

  --grad-ink: linear-gradient(160deg, #0D2230 0%, #123243 58%, #16323F 100%);
  --ombre-1: 0 1px 2px rgba(18,44,60,.05), 0 2px 8px -4px rgba(18,44,60,.1);
  --ombre-2: 0 2px 4px rgba(18,44,60,.04), 0 12px 28px -16px rgba(18,44,60,.24);
  --ombre-3: 0 4px 8px rgba(18,44,60,.05), 0 28px 56px -28px rgba(18,44,60,.3);
}

/* ---------- Les blancs : encore plus clairs ---------- */
html, body { background: #fff; }
.card, .project, .avis-carte, .merci-etapes li { border-color: var(--sauge); }

/* ---------- Barre haute et en-tête ---------- */
.topbar { background: var(--foret); }
.topbar svg, .topbar-badge, .topbar-badge svg { color: var(--citron); }
body.has-dark-hero .topbar { background: rgba(12,32,45,.58); }
.site-header { background: rgba(255,255,255,.88); border-bottom-color: rgba(22,50,63,.09); }
.site-header.is-stuck { background: rgba(255,255,255,.97); }
body.has-dark-hero .site-header:not(.is-stuck) { background: rgba(12,32,45,.32); }

/* ---------- Pied de page : le voile vert sapin disparaît ---------- */
.site-footer { background: var(--foret-fonce); }
.site-footer::after {
  background:
    linear-gradient(102deg, rgba(10,26,38,.88) 0%, rgba(13,34,48,.76) 46%, rgba(20,52,70,.58) 100%),
    linear-gradient(180deg, rgba(10,26,38,.8) 0%, transparent 34%);
}
.footer-photo { opacity: .34; }
.footer-social a:hover { background: var(--action); }
.footer-contact svg { color: var(--citron); }
.drawer-top {
  background: linear-gradient(102deg, rgba(10,30,44,.94) 0%, rgba(14,40,58,.86) 100%);
}

/* ---------- Le CTA principal : vert de marque, libellé blanc ---------- */
.btn, .btn--sun, .btn--ink {
  background: var(--action-fond) !important;
  color: #fff !important;
  box-shadow: var(--action-halo);
}
.btn svg, .btn--sun svg, .btn--ink svg { color: #fff; }
.btn:hover, .btn--sun:hover, .btn--ink:hover {
  background: var(--action-fond-survol) !important;
  color: #fff !important;
  box-shadow: 0 22px 42px -16px rgba(47,127,23,.6), 0 3px 9px -3px rgba(47,127,23,.3);
}
.btn:active, .btn--sun:active { box-shadow: 0 6px 14px -10px rgba(47,127,23,.5); }
.btn:focus-visible, .btn--sun:focus-visible, .btn--ink:focus-visible {
  outline: 3px solid var(--action-clair); outline-offset: 2px;
}
.hero--dawn .btn, .hero--dawn .btn--sun, .site-footer .btn, .site-footer .btn--sun,
.cta-band .btn, .mcta-main {
  box-shadow: 0 18px 38px -14px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.16);
}
.mcta-main { background: var(--action-fond) !important; color: #fff !important; }
.mcta-main svg { color: #fff; }

/* Les définitions du CTA secondaire qui vivaient ici — contour transparent,
   puis verre dépoli, puis trame, puis relief — ont été retirées : elles se
   contredisaient entre elles et laissaient le fond vert du CTA principal
   s'appliquer au secondaire. Sa définition est désormais unique et se trouve
   en fin de feuille, après toutes les autres. */
/* ---------- L'encadré de conversion : la lumière chaude de la charte ----------
   Sans elle, l'encadré n'était qu'un aplat vert pâle : une couleur de plus et
   une lumière de moins. Le voile chaud part du coin gauche et se dissout. */
.cta-band {
  background: linear-gradient(118deg, var(--voile-chaud) 0%, #FFFFFF 48%, var(--voile-vert) 100%);
  border-color: var(--sauge);
  box-shadow: var(--ombre-3);
}
.cta-band::before {
  background-image:
    linear-gradient(rgba(49,131,24,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,131,24,.07) 1px, transparent 1px);
}
.cta-band h2 { color: var(--anthracite); }
.cta-band p, .cta-band .cta-note { color: var(--gris); }
.cta-band .cta-note svg { color: var(--action); }
.cta-band .btn--ghost:hover, .cta-band .btn--light:hover {
  background: rgba(49,131,24,.07) !important; border-color: var(--action); color: var(--action-fort) !important;
}

/* ---------- Le simulateur : bleu de mesure, vert de marque ---------- */
.sim { background: #fff; border-color: var(--sauge); box-shadow: var(--ombre-2); }
.sim-result { background: #F4FBF0; border: 1px solid rgba(49,131,24,.16); }
.sim-result .big { color: var(--action); }
.sim-kpi { background: #F7FBF9; border-color: var(--sauge); }
.sim-kpi .v { color: var(--anthracite); }
.sim-kpi .k { color: var(--gris); }
.sim-control label { color: var(--anthracite); }
.sim-control output { color: var(--bleu); }
.sim-select { border-color: var(--sauge); color: var(--anthracite); }
.sim-courbe #sim-trait { stroke: var(--bleu); }
.sim-courbe #sim-soleil { fill: var(--action); }
.sim-courbe figcaption, .sim-courbe svg { color: var(--gris); }
.sim-courbe figcaption strong, .sim-courbe figcaption span { color: var(--bleu); }
.sim-alerte { background: var(--voile-bleu); border-left-color: var(--bleu); color: var(--ink-2); }
input[type=range] { background: var(--sauge); }
input[type=range]::-webkit-slider-thumb { background: var(--action); border: 3px solid #fff; }
input[type=range]::-moz-range-thumb { background: var(--action); border: 3px solid #fff; }

/* ---------- Restes de vert sapin : journal, encarts, étiquettes ---------- */
.note { border-left-color: var(--bleu); background: var(--voile-bleu); }
.avis-exemple { background: #fff; border-color: var(--sauge); color: var(--ink-2); }
.journey-step.is-on .journey-node b { background: var(--anthracite); color: var(--citron); }
.ico-badge--sun, .trust-item--chaud .trust-ico { color: var(--foret); }

/* (Le verre dépoli à 72 % essayé ici a été retiré : sur une photographie, le
   secondaire redevient le verre blanc à 10 % de la définition finale.) */
/* ==========================================================================
   V3 — LUMINEUX : LE VERT PASSE EN MODE LUMIÈRE
   ==========================================================================
   (Périmé par le bloc V4 : le client a demandé le libellé blanc sur son vert
   vif. Il est appliqué là-bas, avec une ombre portée sous les lettres.)

   Le client veut des CTA éclatants. Le vert du logo le permet, mais avec une
   contrainte non négociable : aucun ton du vert clair ne porte du blanc
   (#8FDB2C ne donne que 2,7 contre 1). Un libellé blanc exigerait de revenir à
   un vert sombre, donc d'éteindre le bouton.

   La sortie est celle de la charte citée plus haut dans cette feuille : le vert
   clair se porte avec un texte sombre. Le CTA devient donc un dégradé citron →
   vert éclatant, libellé en encre verte (8,6 contre 1 au point le plus clair,
   6,2 au plus sombre), halo vert coloré, et une petite brillance en haut qui
   donne le relief. C'est le bouton le plus lumineux du site.
   ========================================================================== */

:root {
  --action-vif-1: #CBF277;
  --action-vif-2: #93DF2F;
  --action-vif-3: #63D02A;
  --action-vif-4: #43B41D;
  --action-encre: #0A2A10;
  --action-fond: linear-gradient(118deg, var(--action-vif-1) 0%, var(--action-vif-2) 36%, var(--action-vif-3) 70%, var(--action-vif-4) 100%);
  --action-fond-survol: linear-gradient(118deg, #D8F98C 0%, #A5E93E 36%, #6FDC31 70%, #4CC022 100%);
  --action-halo: 0 16px 34px -14px rgba(99,208,42,.55), 0 3px 8px -3px rgba(67,180,29,.35);
}

/* ---------- Le CTA principal : citron → vert éclatant ---------- */
.btn, .btn--sun, .btn--ink {
  background: var(--action-fond) !important;
  color: var(--action-encre) !important;
  box-shadow: var(--action-halo), inset 0 1px 0 rgba(255,255,255,.55);
  border: 1px solid rgba(67,180,29,.35);
}
.btn svg, .btn--sun svg, .btn--ink svg { color: var(--action-encre); }
.btn:hover, .btn--sun:hover, .btn--ink:hover {
  background: var(--action-fond-survol) !important;
  color: var(--action-encre) !important;
  box-shadow: 0 24px 46px -16px rgba(99,208,42,.62), 0 4px 10px -3px rgba(67,180,29,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn:focus-visible, .btn--sun:focus-visible, .btn--ink:focus-visible {
  outline: 3px solid var(--action-encre); outline-offset: 3px;
}
.hero--dawn .btn, .hero--dawn .btn--sun, .site-footer .btn, .site-footer .btn--sun,
.cta-band .btn, .mcta-main {
  box-shadow: 0 20px 44px -14px rgba(10,42,16,.45), 0 0 0 1px rgba(255,255,255,.3), var(--action-halo);
}
.mcta-main { background: var(--action-fond) !important; color: var(--action-encre) !important; }
.mcta-main svg { color: var(--action-encre); }

/* (La trame de cellule dans le secondaire a été retirée elle aussi : à cette
   taille, un motif fin se lit comme une salissure.) */
/* ---------- Le simulateur : résultat lumineux, plus de vert sur vert ----------
   Le chiffre principal passe au bleu de la donnée — la famille de couleurs que
   le site réserve aux mesures — sur une carte blanche. Le vert ne sert plus
   qu'aux repères (curseurs, soleil de la courbe). */
.sim { background: #fff; }
.sim-result {
  background: #fff; border: 1px solid rgba(46,159,216,.22);
  box-shadow: 0 22px 44px -30px rgba(26,106,155,.5);
}
.sim-result .big { color: var(--bleu); }
.sim-kpi { background: #FBFDFF; border-color: rgba(22,50,63,.08); }
.sim-kpi .v { color: var(--anthracite); }
.sim-kpi .k { color: var(--gris); }
.sim-control output { color: var(--bleu); }
.sim-courbe #sim-trait { stroke: #2E9FD8; }
.sim-courbe #sim-soleil { fill: #63D02A; }
.sim-courbe figcaption strong, .sim-courbe figcaption span { color: var(--bleu); }
.sim-alerte { background: var(--voile-bleu); border-left-color: #2E9FD8; color: var(--ink-2); }
input[type=range] { background: #E3EEF4; }
input[type=range]::-webkit-slider-thumb { background: #63D02A; border: 3px solid #fff; box-shadow: 0 3px 8px -3px rgba(67,180,29,.6); }
input[type=range]::-moz-range-thumb { background: #63D02A; border: 3px solid #fff; }

/* ---------- L'en-tête des pages intérieures : halo chaud, blanc éclairci ---------- */
.page-hero {
  background:
    radial-gradient(100% 120% at 92% -20%, rgba(217,122,30,.18) 0%, transparent 56%),
    radial-gradient(96% 110% at 4% -12%, rgba(47,127,15,.1) 0%, transparent 54%),
    linear-gradient(166deg, #F5FAF1 0%, #FBFDF9 56%, #fff 100%);
}

/* ---------- Les voiles : plus clairs, la photo respire ---------- */
.hero-voile {
  background:
    linear-gradient(100deg, rgba(12,32,45,.8) 0%, rgba(13,36,52,.6) 34%, rgba(16,48,70,.32) 66%, rgba(18,54,78,.1) 100%),
    linear-gradient(180deg, rgba(10,26,38,.3) 0%, transparent 26%, transparent 74%, rgba(10,26,38,.22) 100%);
}
.site-footer::after {
  background:
    linear-gradient(102deg, rgba(10,26,38,.82) 0%, rgba(13,34,48,.68) 46%, rgba(20,52,70,.5) 100%),
    linear-gradient(180deg, rgba(10,26,38,.72) 0%, transparent 34%);
}
/* ==========================================================================
   V4 — LA LUMIÈRE REVIENT, LES VERTS PORTENT DU BLANC
   ==========================================================================
   Trois décisions du client, appliquées ensemble.

   1. Les fonds redeviennent ce qu'ils étaient : un dégradé doux, vert ou bleu,
      et par-dessus le halo radial chaud de la charte (§4). C'est lui, la
      lumière : sans lui, les sections se lisaient comme des aplats vides. Les
      blancs, eux, restent des blancs — aucun fond coloré derrière.

   2. Les CTA verts portent un libellé blanc. Le vert ordinaire est celui qui
      le permet : #318318 donne 4,78 contre 1 avec du blanc au point le plus
      clair de son dégradé, 5,9 au plus sombre. Le CTA de conversion garde le
      vert vif validé, avec le libellé blanc demandé.

   3. Le résultat du simulateur passe en mode lumière : cadre en dégradé vif,
      chiffre sur plaque citron → vert clair, encre sombre. Plus aucun vert
      sombre, et plus de grille dans les boutons secondaires.
   ========================================================================== */

:root {
  /* Le vert ordinaire : assez profond pour porter du blanc. */
  --action-profond: linear-gradient(118deg, #318318 0%, #2C7614 52%, #276A10 100%);
  --action-profond-sv: linear-gradient(118deg, #2F7F17 0%, #2A6E12 52%, #24640E 100%);
  --action-profond-halo: 0 16px 32px -14px rgba(47,127,23,.5), 0 2px 6px -2px rgba(47,127,23,.26);
}

/* ---------- 1. Les fonds : dégradé + halo chaud, jamais un aplat ---------- */
.section--vert {
  background:
    radial-gradient(112% 86% at 8% -12%, rgba(47,127,15,.15) 0%, transparent 56%),
    radial-gradient(104% 76% at 94% -14%, rgba(255,152,44,.18) 0%, transparent 58%),
    linear-gradient(170deg, #F2FAEC 0%, #FAFDF8 52%, #F2FAEC 100%);
}
.section--bleu {
  background:
    radial-gradient(116% 84% at 88% -10%, rgba(79,163,209,.22) 0%, transparent 60%),
    radial-gradient(96% 70% at 6% -14%, rgba(255,160,60,.15) 0%, transparent 56%),
    linear-gradient(170deg, #F0F8FD 0%, #FAFDFF 52%, #F0F8FD 100%);
}
.avis-bande {
  background: linear-gradient(100deg, var(--voile-chaud) 0%, #FFFDF8 48%, var(--voile-vert) 100%);
  border-bottom: 1px solid var(--sauge);
}

/* ---------- 2. Les CTA verts portent un libellé blanc ---------- */
.btn, .btn--ink {
  background: var(--action-profond) !important;
  color: #fff !important;
  border: 0;
  box-shadow: var(--action-profond-halo), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn svg, .btn--ink svg { color: #fff; }
.btn:hover, .btn--ink:hover {
  background: var(--action-profond-sv) !important;
  color: #fff !important;
  box-shadow: 0 24px 44px -16px rgba(47,127,23,.6), 0 3px 9px -3px rgba(47,127,23,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn:focus-visible, .btn--ink:focus-visible { outline: 3px solid var(--foret); outline-offset: 3px; }

/* Le CTA de conversion : le vert vif validé, libellé blanc demandé.
   L'ombre portée sous les lettres n'est pas décorative : sur le vert clair,
   le blanc seul se dissout. Elle redonne un bord sombre à chaque lettre. */
.btn--sun, .mcta-main {
  background: var(--action-fond) !important;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid rgba(67,180,29,.4);
  text-shadow: 0 1px 2px rgba(8,44,12,.52), 0 0 12px rgba(8,44,12,.28);
  box-shadow: var(--action-halo), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--sun svg, .mcta-main svg { color: #fff; text-shadow: none; }
.btn--sun:hover, .mcta-main:hover {
  background: var(--action-fond-survol) !important;
  color: #fff !important;
}
.btn--sun:focus-visible, .mcta-main:focus-visible { outline: 3px solid var(--foret); outline-offset: 3px; }

/* (Le « relief » en dégradé clair essayé ici a été retiré : il donnait au
   secondaire un fond presque blanc, donc très proche du principal.) */
/* ---------- 4. Le résultat du simulateur : mode lumière ---------- */
.sim-result-lbl { font-size: .82rem; color: var(--gris); margin-bottom: 6px; }
.sim-result {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, #D8F98C 0%, #63D02A 52%, #43B41D 100%) border-box !important;
  border: 2px solid transparent;
  /* L'ombre seule change de famille : c'est le bleu de la donnée, à intensité
     et géométrie identiques. Le cadre, la lumière du coin et les chiffres
     restent exactement ce qu'ils étaient. */
  box-shadow:
    0 30px 60px -32px rgba(26,106,155,.55),
    0 3px 8px -4px rgba(22,50,63,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* La trame quitte le cadre : à la place, une lumière. */
.sim-result::before {
  background-image:
    radial-gradient(70% 58% at 100% 0%, rgba(203,242,119,.5) 0%, rgba(203,242,119,0) 72%),
    radial-gradient(56% 46% at 0% 100%, rgba(255,197,61,.2) 0%, rgba(255,197,61,0) 70%);
  /* Hérité de l'ancienne trame : sans ces deux remises à zéro, les halos se
     répétaient toutes les 24 px et faisaient un semis de pastilles. */
  background-size: auto, auto;
  background-repeat: no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}
.sim-result .eyebrow { color: var(--action-fort); }
/* Le chiffre clé : une plaque qui éclaire, des chiffres en encre. Le vert clair
   ne porte pas d'encre verte, il porte du noir — c'est là toute la différence
   avec le vert sur vert d'avant. */
.sim-result .big {
  background: linear-gradient(118deg, #F6FFDE 0%, #D9F79D 50%, #BCEE72 100%);
  color: #0B2A11;
  border: 1px solid rgba(99,208,42,.4);
  box-shadow: 0 18px 36px -18px rgba(99,208,42,.75), inset 0 1px 0 rgba(255,255,255,.9);
}
.sim-result .sim-kpi, .sim-kpi {
  background: #fff;
  border: 1px solid rgba(22,50,63,.09);
  box-shadow: 0 6px 16px -12px rgba(47,127,23,.35), inset 0 1px 0 #fff;
}
.sim-kpi:hover { box-shadow: 0 14px 26px -16px rgba(47,127,23,.45), inset 0 1px 0 #fff; }
.sim-result .chip { background: rgba(255,255,255,.92); color: var(--action-fort); border: 1px solid rgba(99,208,42,.35); }
.sim-result .chip strong { color: var(--anthracite); }
.sim-alerte { background: var(--voile-chaud); border-left-color: var(--orange); color: #6B4A14; }

/* ---------- 5. Les curseurs : un point de couleur, lumineux ---------- */
input[type=range] { background: #E3EEF4; }
input[type=range]::-webkit-slider-thumb {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 34% 30%, #9BDCF8 0%, #2E9FD8 52%, #1A6A9B 100%);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(46,159,216,.16), 0 8px 18px -6px rgba(26,106,155,.75);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(46,159,216,.2), 0 10px 22px -6px rgba(26,106,155,.85);
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.07); }
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: radial-gradient(circle at 34% 30%, #9BDCF8 0%, #2E9FD8 52%, #1A6A9B 100%);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(46,159,216,.16), 0 8px 18px -6px rgba(26,106,155,.75);
}
/* Le point de la courbe : le même point, posé sur le relevé. */
.sim-courbe #sim-soleil {
  r: 8px; fill: #63D02A; stroke: #fff; stroke-width: 2.5;
  filter: drop-shadow(0 0 10px rgba(99,208,42,.9)) drop-shadow(0 4px 8px rgba(26,106,155,.28));
}

/* ---------- 6. Les voiles : la lumière chaude revient, plus clairs ---------- */
.hero-voile {
  background:
    radial-gradient(52% 46% at 86% 52%, rgba(255,178,66,.26) 0%, rgba(255,178,66,0) 68%),
    linear-gradient(100deg, rgba(12,32,45,.78) 0%, rgba(13,36,52,.58) 34%, rgba(16,48,70,.3) 66%, rgba(18,54,78,.1) 100%),
    linear-gradient(180deg, rgba(8,32,24,.34) 0%, transparent 28%, transparent 72%, rgba(8,32,24,.3) 100%);
}
.site-footer::after {
  background:
    radial-gradient(66% 76% at 90% 104%, rgba(255,178,66,.2) 0%, rgba(255,178,66,0) 66%),
    linear-gradient(102deg, rgba(10,26,38,.84) 0%, rgba(13,34,48,.7) 46%, rgba(20,52,70,.52) 100%),
    linear-gradient(180deg, rgba(10,26,38,.74) 0%, transparent 34%);
}
/* ==========================================================================
   V5 — LE BANDEAU, LES ONGLETS, LA FAQ ET LE TITRE
   ==========================================================================
   Quatre demandes du client, un même fil : ce qui était plat prend du relief,
   sans quitter la palette (vert de la marque, bleu de la mesure, lumière
   chaude) et sans toucher aux couleurs validées du titre — le blanc reste
   blanc, le dégradé reste le même.
   ========================================================================== */

/* ---------- 1. Le bandeau du haut n'est plus gris ----------
   Il était un mélange d'ardoise translucide posé sur la photographie : à cet
   endroit, plus personne ne voyait à quelle marque il appartenait. Il devient
   la signature du site : dégradé ardoise → vert profond, filet lumineux
   citron → vert → bleu en bas (les trois familles de la palette), et la
   lumière chaude du lever dans le coin de l'appel. */
.topbar {
  position: relative;
  color: rgba(255,255,255,.86);
  background:
    radial-gradient(62% 240% at 6% 50%, rgba(255,168,64,.22) 0%, rgba(255,168,64,0) 62%),
    linear-gradient(100deg, #0B1F2A 0%, #123140 44%, #17452E 100%);
  border-bottom: 0;
}
/* Le filet de lumière, en bas du bandeau. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--citron) 0%, #63D02A 46%, var(--bleu-clair) 100%);
  box-shadow: 0 1px 10px rgba(99,208,42,.35);
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--citron); }
/* L'appel : une pastille claire sur le bandeau, avec un anneau de citron. */
.topbar .container > a {
  padding: 4px 14px 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(195,232,109,.35);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.topbar .container > a:hover {
  background: rgba(195,232,109,.16);
  box-shadow: inset 0 0 0 1px rgba(195,232,109,.7), 0 6px 18px -10px rgba(195,232,109,.7);
  transform: translateY(-1px);
}
.topbar .container > a svg { color: var(--citron); }
.topbar .topbar-trust > span { color: rgba(255,255,255,.86); }
/* Sur la photographie du hero : même matière, en verre teinté de vert. */
body.has-dark-hero .topbar {
  background:
    radial-gradient(62% 240% at 6% 50%, rgba(255,168,64,.24) 0%, rgba(255,168,64,0) 62%),
    linear-gradient(100deg, rgba(9,26,36,.88) 0%, rgba(14,42,36,.82) 50%, rgba(23,69,46,.78) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}

/* Une fois la barre collée en haut de la page, le bandeau repasse en opaque :
   en verre sur du blanc, il redeviendrait le gris qu'on vient de retirer. */
body.has-dark-hero .site-header.is-stuck .topbar {
  background:
    radial-gradient(62% 240% at 6% 50%, rgba(255,168,64,.22) 0%, rgba(255,168,64,0) 62%),
    linear-gradient(100deg, #0B1F2A 0%, #123140 44%, #17452E 100%);
}

/* ---------- 2. Les onglets du menu prennent vie ----------
   Sous le libellé, un trait de lumière qui naît au centre en dégradé (citron →
   vert → bleu) et s'allume d'un halo vert ; derrière, un voile de lime très
   léger ; le libellé se pose en vert forêt et monte d'un pixel. La page
   courante garde le trait et la graisse : un seul trait possible par onglet,
   jamais deux. Le chevron de « Services » se retourne. */
.nav-links > li > a, .nav-links > li > button {
  position: relative;
  transition: color .22s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.nav-links > li > a::before, .nav-links > li > button::before {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: calc(100% - 26px); height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--citron) 0%, #63D02A 48%, var(--bleu-clair) 100%);
  box-shadow: 0 1px 10px rgba(99,208,42,.6);
  transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%;
  opacity: 0;
  transition: transform .34s var(--ease), opacity .34s var(--ease);
  pointer-events: none;
}
.nav-links > li > a:hover, .nav-links > li > button:hover,
.nav-links > li > a:focus-visible, .nav-links > li > button:focus-visible {
  background-color: rgba(99,208,42,.11);
  color: var(--foret);
  transform: translateY(-1px);
}
.nav-links > li > a:hover::before, .nav-links > li > button:hover::before,
.nav-links > li > a:focus-visible::before, .nav-links > li > button:focus-visible::before {
  transform: translateX(-50%) scaleX(1); opacity: 1;
}
.nav-links > li.active > a { color: var(--foret); font-weight: 700; }
.nav-links > li.active > a::before { transform: translateX(-50%) scaleX(1); opacity: .95; }
.has-sub > button .chev { transition: transform .32s var(--ease), opacity .3s var(--ease); }
.has-sub:hover > button .chev, .has-sub:focus-within > button .chev { transform: rotate(180deg); }
/* Sur la photographie, le voile s'inverse : plus clair, jamais vert sur vert. */
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > a:hover,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > button:hover,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > a:focus-visible,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > button:focus-visible {
  background-color: rgba(255,255,255,.13);
  color: #fff;
}
/* Les entrées du sous-menu suivent le même mouvement : l'icône grandit. */
.submenu a { transition: background-color .25s var(--ease), transform .28s var(--ease); }
.submenu a:hover { background: rgba(99,208,42,.1); transform: translateX(3px); }
.submenu a:hover .ico { transform: scale(1.06); }
.submenu .ico { transition: transform .28s var(--ease); }

/* ---------- 3. La FAQ répond au survol ----------
   La question reçoit un voile de lumière qui vient de la gauche, un filet vert
   à son bord, et le bouton « + » se met en attente : fond de lime très clair,
   anneau vert, quart de tour. À l'ouverture, il prend le dégradé plein — l'état
   ouvert reste donc bien distinct de l'état survolé. */
/* isolation: isolate par sécurité : sans elle, le voile passe derrière le fond
   de la section et disparaît, exactement comme il l'a fait. C'est le même
   réglage que les encarts. */
.faq-item { position: relative; isolation: isolate; transition: background-color .3s var(--ease); }
.faq-item summary { position: relative; transition: color .25s var(--ease), padding-left .32s var(--ease); }
.faq-item summary::before {
  content: ""; position: absolute; left: -6px; right: -10px; top: 5px; bottom: 5px; z-index: -1;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(99,208,42,.18) 0%, rgba(99,208,42,.06) 50%, rgba(99,208,42,0) 100%);
  box-shadow: inset 4px 0 0 0 var(--energie);
  opacity: 0; transform: scaleX(.985); transform-origin: left center;
  transition: opacity .3s var(--ease), transform .38s var(--ease);
}
.faq-item summary:hover::before, .faq-item summary:focus-visible::before { opacity: 1; transform: none; }
.faq-item summary:hover, .faq-item summary:focus-visible { color: var(--action-fort); padding-left: 7px; }
.faq-item summary .pm { transition: transform .38s var(--ease), background .38s var(--ease), box-shadow .32s var(--ease); }
.faq-item summary:hover .pm, .faq-item summary:focus-visible .pm {
  background: #EAF7DC;
  box-shadow: inset 0 0 0 1px rgba(99,208,42,.5), 0 10px 20px -12px rgba(47,127,23,.55);
  transform: rotate(90deg) scale(1.05);
}
.faq-item[open] summary .pm { transform: rotate(135deg); }

/* ---------- 4. Le titre du hero prend de la lumière ----------
   Les couleurs sont intactes : le blanc reste blanc, le dégradé reste le même.
   Le relief vient d'ailleurs — une aura chaude et verte posée derrière le
   titre, une ombre plus profonde sous les lettres, une entrée en matière qui
   monte en se défloutant, et une respiration très lente de l'aura. Le point du
   sur-titre bat doucement, comme un témoin allumé. */
.hero--dawn h1 {
  position: relative; isolation: isolate;
  text-shadow: 0 3px 30px rgba(6,20,16,.6), 0 1px 3px rgba(6,20,16,.4), 0 0 64px rgba(99,208,42,.14);
  animation: titreMonte .95s var(--ease-out) .04s backwards;
}
.hero--dawn h1::before {
  content: ""; position: absolute; z-index: -1; inset: -16% -10% -12% -16%;
  background:
    radial-gradient(52% 60% at 15% 26%, rgba(255,176,66,.2) 0%, rgba(255,176,66,0) 70%),
    radial-gradient(58% 70% at 84% 80%, rgba(99,208,42,.18) 0%, rgba(99,208,42,0) 72%);
  filter: blur(28px);
  animation: auraTitre 9s var(--ease) infinite;
  pointer-events: none;
}
.hero--dawn .eyebrow { animation: titreMonte .8s var(--ease-out) backwards; }
.hero--dawn .eyebrow::before { animation: temoin 3.4s var(--ease) infinite; }
.hero--dawn .lead { animation: titreMonte .95s var(--ease-out) .22s backwards; }
.hero--dawn .btn-row { animation: titreMonte .95s var(--ease-out) .34s backwards; }
.hero--dawn .hero-badges { animation: titreMonte .95s var(--ease-out) .44s backwards; }

@keyframes titreMonte {
  from { opacity: 0; transform: translateY(20px); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes auraTitre { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes temoin {
  0%, 100% { box-shadow: 0 0 0 0 rgba(195,232,109,.5); }
  50% { box-shadow: 0 0 0 6px rgba(195,232,109,0); }
}
/* ==========================================================================
   V6 — LES FONDS DU DÉPÔT, À L'IDENTIQUE
   ==========================================================================
   Le client l'a demandé deux fois, clairement : les fonds doivent redevenir
   ceux du dépôt tel qu'il l'a reçu. Ce bloc les repose à la valeur exacte
   d'origine — mêmes teintes de vert et de bleu, mêmes halos, mêmes voiles
   ardoise, mêmes trames — et ne corrige que les blancs, qui passent au blanc
   pur (fond de page, cartes, verres clairs).

   Vérification : les fonds calculés au navigateur ont été relevés sur la
   version d'origine et sur celle-ci, puis comparés. Seuls restent différents
   ce qui a été demandé autrement — le bandeau du haut, mis en avant — et les
   blancs, éclaircis. Tout le reste est identique au dépôt.

   Ce bloc reprend aussi les trois dernières demandes : un titre de hero qui
   s'éclaire au lieu de s'assombrir, des libellés de CTA verts écrits en noir
   avec leur ombre, et un cadre de simulateur à ombre orange.
   ========================================================================== */

/* ---------- Les surfaces profondes retrouvent leur vert d'origine ---------- */
:root {
  --foret: #173F32;
  --foret-fonce: #0F2B22;
  --ombre-1: 0 1px 2px rgba(23,63,50,.05), 0 2px 8px -4px rgba(23,63,50,.1);
  --ombre-2: 0 2px 4px rgba(23,63,50,.04), 0 12px 28px -16px rgba(23,63,50,.26);
  --ombre-3: 0 4px 8px rgba(23,63,50,.05), 0 28px 56px -28px rgba(23,63,50,.34);
}

/* ---------- Les sections, l'en-tête intérieur, le bandeau des avis ---------- */
.section--vert {
  background:
    radial-gradient(110% 80% at 10% 0%, rgba(47,127,15,.16) 0%, transparent 60%),
    linear-gradient(170deg, #E9F3E2 0%, #EFF6EA 52%, #E9F3E2 100%);
}
.section--bleu {
  background:
    radial-gradient(116% 84% at 88% 0%, rgba(79,163,209,.24) 0%, transparent 60%),
    linear-gradient(170deg, #E4EFF8 0%, #EDF4FA 52%, #E4EFF8 100%);
}
.page-hero {
  background:
    radial-gradient(100% 120% at 92% -20%, rgba(217,122,30,.16) 0%, transparent 56%),
    linear-gradient(166deg, #EAF3E4 0%, #F2F8EE 56%, #fff 100%);
}
.avis-bande {
  background: linear-gradient(100deg, #EEF5E9 0%, #F5F9F2 52%, #fff 100%);
  border-bottom: 1px solid var(--sauge);
}
.avis-exemple {
  background: var(--voile-chaud);
  border-color: rgba(217,122,30,.3);
  color: var(--orange-fonce);
}
.note { border-left: 3px solid var(--orange); background: var(--voile-chaud); }

/* ---------- L'encadré de conversion, avec sa trame d'origine ---------- */
.cta-band {
  background: linear-gradient(118deg, var(--voile-chaud) 0%, #FFFDF7 46%, var(--voile-vert) 100%);
  box-shadow: var(--ombre-3);
}
.cta-band::before {
  background-image:
    linear-gradient(rgba(217,122,30,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,122,30,.1) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ---------- Le hero et son voile, le pied de page et le sien ----------
   Le dépôt d'origine posait sur ces deux photographies un voile si dense qu'on
   ne voyait plus l'image, seulement un aplat sombre. Le client l'a dit : le
   voile doit être retiré, la version claire était meilleure. Les deux voiles
   redeviennent donc légers — la lumière chaude du coin, un dégradé qui part de
   l'ardoise et se dissout — et le texte reste lisible. */
.hero--dawn { background: var(--foret-fonce); }
.hero-voile {
  background:
    radial-gradient(52% 46% at 86% 52%, rgba(255,178,66,.3) 0%, rgba(255,178,66,0) 68%),
    linear-gradient(100deg, rgba(12,32,45,.68) 0%, rgba(13,36,52,.46) 34%, rgba(16,48,70,.22) 66%, rgba(18,54,78,.06) 100%),
    linear-gradient(180deg, rgba(8,32,24,.24) 0%, transparent 26%, transparent 74%, rgba(8,32,24,.2) 100%);
}
/* Le pied de page suit le même traitement que le hero : la photographie reste
   pleine, et le voile n'est plus qu'une lumière chaude dans le coin et un
   dégradé qui part de l'ardoise et se dissout. Le voile dense du dépôt
   (#0A1A26 à 94 %) est ce qui assombrissait tout le bas de page : il est
   retiré, seule la zone du texte garde de quoi rester lisible. */
.site-footer { background: var(--foret-fonce); }
.footer-photo { opacity: .72; }
.site-footer::after {
  background:
    radial-gradient(62% 74% at 88% 104%, rgba(255,178,66,.28) 0%, rgba(255,178,66,0) 68%),
    linear-gradient(102deg, rgba(12,32,45,.64) 0%, rgba(13,36,52,.36) 46%, rgba(18,54,78,.12) 100%),
    linear-gradient(180deg, rgba(8,28,34,.26) 0%, transparent 34%);
}

/* ---------- Le tiroir du menu retrouve sa photographie ---------- */
.drawer-top {
  background:
    linear-gradient(102deg, rgba(10,38,30,.9) 0%, rgba(12,44,62,.8) 100%),
    url("/assets/img/photos/bandeau-panneaux-1100.jpg") center 52% / cover no-repeat;
}

/* ---------- L'en-tête posé sur la photographie du hero ---------- */
body.has-dark-hero .site-header:not(.is-stuck) {
  background: rgba(14, 38, 31, .3);
  border-bottom-color: rgba(255,255,255,.14);
}

/* ==========================================================================
   LE TITRE DU HERO S'ÉCLAIRE, IL NE S'ASSOMBRIT PLUS
   ==========================================================================
   Un fond creusé derrière les lettres avait été essayé : le titre paraissait
   encore plus terne, et le client l'a refusé. L'aura claire validée revient
   donc derrière le titre, et les lettres ne portent plus que de la lumière —
   ni ombre portée sombre, ni voile. Le blanc et le dégradé ne changent pas.
   ========================================================================== */
/* Les lettres ne portent plus aucun voile sombre : elles reçoivent une lueur
   blanche, puis la lumière chaude puis verte de la palette. Le contraste avec
   la photographie vient du voile du hero, pas d'une ombre sous les lettres. */
.hero--dawn h1 {
  text-shadow:
    0 0 24px rgba(255,255,255,.6),
    0 0 56px rgba(255,222,164,.36),
    0 0 112px rgba(132,222,74,.22);
}
/* La partie en couleur du titre s'allume franchement. Le dégradé finissait sur
   le bleu de travail (#4FA3D1), qui virait au gris sur la photographie : ses
   quatre arrêts remontent en clarté, du citron pâle au bleu du ciel, sans
   quitter une seule des trois familles de la palette. Le halo suit la même
   montée — un citron clair, puis un cyan clair. */
.hero--dawn h1 .hl {
  background: linear-gradient(102deg, #E6F8A6 0%, #CDF3BC 34%, #A5E9F6 72%, #B4E2FB 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(216,246,140,.42)) drop-shadow(0 0 50px rgba(150,222,240,.36));
}
@keyframes auraTitre { 0%, 100% { opacity: .84; } 50% { opacity: 1; } }

/* ==========================================================================
   LES LIBELLÉS DES CTA VERTS PASSENT EN NOIR
   ==========================================================================
   Le client a tranché : encre sombre sur les verts, avec l'ombre conservée —
   mais une ombre claire, qui détache la lettre au lieu de la noircir.

   Le vert ordinaire est remonté d'un ton : en noir sur le vert profond
   (#318318), le libellé tombait à 4,4 contre 1 ; sur ce vert-ci il tient
   6,7 à 12,3 selon le point du dégradé. Le CTA de conversion, lui, garde son
   vert vif — encre sur citron → lime : 8,7 à 14,5 contre 1.
   ========================================================================== */
:root {
  --action-profond: linear-gradient(118deg, #7ED32B 0%, #5CC22A 52%, #46A81C 100%);
  --action-profond-sv: linear-gradient(118deg, #8ADC38 0%, #64CB2E 52%, #4DB01F 100%);
}
.btn, .btn--ink {
  background: var(--action-profond) !important;
  color: #10281A !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.btn svg, .btn--ink svg { color: #10281A; }
.btn:hover, .btn--ink:hover { background: var(--action-profond-sv) !important; color: #10281A !important; }
.btn--sun, .mcta-main {
  color: #10281A !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 20px rgba(255,255,255,.35);
}
.btn--sun svg, .mcta-main svg { color: #10281A; }
.btn--sun:hover, .mcta-main:hover { color: #10281A !important; }

/* ==========================================================================
   LE CADRE DU SIMULATEUR : OMBRE ORANGE, CHIFFRES EN BLEU
   ==========================================================================
   Le reste du bloc ne bouge pas : cadre en dégradé vert, chiffre clé sur
   plaque citron, étiquettes vertes, curseurs et courbe inchangés.
   ========================================================================== */
.sim-result {
  box-shadow:
    0 30px 60px -32px rgba(255,138,30,.5),
    0 3px 8px -4px rgba(22,50,63,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.sim-kpi .v { color: var(--bleu); }

/* ==========================================================================
   LES CTA SECONDAIRES REVIENNENT À CE QU'ILS ÉTAIENT
   ==========================================================================
   Un bouton secondaire porte aussi la classe `.btn` : la règle des libellés en
   noir, écrite plus haut sur `.btn`, lui imposait donc le fond vert du CTA
   principal. Les deux boutons devenaient identiques, et la différence validée
   avait disparu. La correction de fond serait un `:not(.btn--ghost)` dans le
   sélecteur du principal, à répéter sur chacune des couches héritées de cette
   feuille ; ici, une seule définition finale dit ce qu'est un secondaire, et
   le dit après tout le reste.

   Fond clair : blanc, libellé vert forêt, contour sauge, ombre courte. Au
   survol il se soulève de 2 px et l'ombre s'allonge.
   Sur une photographie — hero, pied de page, bannière sombre — : verre blanc à
   10 %, libellé blanc, contour blanc à 34 %, qui s'éclaircit au survol.
   ========================================================================== */
.btn--ghost, .btn--light {
  background: #fff !important;
  background-image: none !important;
  color: var(--foret) !important;
  border: 1px solid var(--sauge);
  min-height: 48px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
  box-shadow: 0 8px 18px -12px rgba(23,63,50,.4) !important;
}
.btn--ghost svg, .btn--light svg { color: currentColor; text-shadow: none; }
.btn--ghost:hover, .btn--light:hover {
  background: #fff !important;
  background-image: none !important;
  color: var(--foret) !important;
  border-color: var(--foret);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(23,63,50,.5) !important;
}
.cta-band .btn--ghost, .cta-band .btn--light {
  background: #fff !important; color: var(--foret) !important; border-color: var(--sauge);
}
.cta-band .btn--ghost:hover, .cta-band .btn--light:hover {
  border-color: var(--foret); background: #fff !important;
}
.hero--dawn .btn--ghost, .hero--dawn .btn--light,
.site-footer .btn--ghost, .site-footer .btn--light,
.page-hero--sombre .btn--ghost, .page-hero--sombre .btn--light {
  background: rgba(255,255,255,.1) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.34);
}
.hero--dawn .btn--ghost svg, .hero--dawn .btn--light svg,
.site-footer .btn--ghost svg, .site-footer .btn--light svg,
.page-hero--sombre .btn--ghost svg, .page-hero--sombre .btn--light svg { color: #fff; }
.hero--dawn .btn--ghost:hover, .hero--dawn .btn--light:hover,
.site-footer .btn--ghost:hover, .site-footer .btn--light:hover,
.page-hero--sombre .btn--ghost:hover, .page-hero--sombre .btn--light:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: #fff;
  color: #fff !important;
}

/* ==========================================================================
   LE RELIEF REVIENT SUR LES ENCARTS
   ==========================================================================
   Au retour aux fonds du dépôt, les encarts — dont ceux qui portent le nom
   d'une ville — n'avaient plus qu'une ombre de deux pixels, presque
   invisible : à l'écran, ils se lisaient comme des aplats. Ils reprennent le
   relief d'avant : une ombre portée teintée du vert de la marque, courte au
   repos, plus longue et plus haute au survol. Ni le rayon, ni la bordure, ni
   le soulèvement de 4 px ne changent.
   ========================================================================== */
:root {
  --relief: 0 10px 24px -16px rgba(23,63,50,.5), 0 2px 6px -3px rgba(23,63,50,.12);
  --relief-haut: 0 22px 44px -24px rgba(23,63,50,.45), 0 4px 10px -5px rgba(23,63,50,.14);
}
.card, .project, .avis-carte, .merci-etapes li { box-shadow: var(--relief); }
.card:hover, .project:hover, .avis-carte:hover { box-shadow: var(--relief-haut); }

/* ==========================================================================
   PASSAGE EN PLEINE LUMIÈRE
   ==========================================================================
   Le client veut un site lumineux. Les voiles sombres posés sur les
   photographies, le bandeau haut et le tiroir du menu restaient de l'ancienne
   direction nocturne. Ils s'éclaircissent tous, et là où du texte doit rester
   lisible le voile est local et dosé, jamais étalé sur toute l'image.
   Rien d'autre n'est touché.
   ========================================================================== */

/* ---------- 1. Le hero ----------
   La photographie reste pleine lumière. Le texte garde un fond, mais confiné
   à la colonne de gauche et fondu avant le milieu : la moitié droite de
   l'image n'est plus voilée du tout. */
.hero-voile {
  background:
    linear-gradient(97deg,
      rgba(12,38,31,.70) 0%,
      rgba(14,42,34,.60) 22%,
      rgba(16,46,38,.34) 42%,
      rgba(18,50,42,.10) 58%,
      rgba(20,54,46,0) 70%),
    radial-gradient(58% 52% at 78% 34%, rgba(255,250,224,.26) 0%, rgba(255,250,224,0) 70%),
    linear-gradient(180deg, rgba(10,34,28,.20) 0%, transparent 22%, transparent 82%, rgba(10,34,28,.14) 100%);
}

/* Le soleil de midi : un cœur blanc, un halo pâle, plus aucune braise. */
.sun-marker {
  background: radial-gradient(circle at 40% 36%, #FFFFFF 0%, #FFFDF2 34%, #FFE9A8 68%, #FFD873 100%);
  box-shadow: 0 0 0 8px rgba(255,249,219,.22), 0 0 44px 14px rgba(255,243,196,.55);
}
.sun-marker::after {
  background: radial-gradient(circle, rgba(255,250,222,.42), transparent 68%);
}

/* ---------- 2. Le bandeau haut ----------
   Il restait sur l'ardoise de nuit. Il passe en voile vert très clair, texte
   vert forêt : le couple donne plus de 10 contre 1, donc largement lisible. */
.topbar {
  color: var(--foret);
  background:
    radial-gradient(64% 240% at 6% 50%, rgba(255,214,122,.34) 0%, rgba(255,214,122,0) 62%),
    linear-gradient(100deg, #EAF3E6 0%, #F2F8EF 46%, #E8F1F6 100%);
}
.topbar::after {
  background: linear-gradient(90deg, var(--energie) 0%, #7FCB4C 46%, var(--bleu-clair) 100%);
  box-shadow: 0 1px 8px rgba(127,203,76,.28);
  opacity: .8;
}
.topbar a, .topbar .topbar-trust > span { color: var(--foret); }
.topbar a:hover { color: var(--energie); }
.topbar svg { color: var(--energie); }
.topbar-badge, .topbar-badge svg { color: var(--energie); }
.topbar .container > a {
  background: rgba(23,63,50,.07);
  box-shadow: inset 0 0 0 1px rgba(47,107,79,.3);
}
.topbar .container > a:hover {
  background: rgba(47,107,79,.14);
  box-shadow: inset 0 0 0 1px rgba(47,107,79,.55), 0 6px 16px -10px rgba(47,107,79,.6);
}
.topbar .container > a svg { color: var(--energie); }
/* Posé sur la photographie du hero : même voile clair, en verre. */
body.has-dark-hero .topbar,
body.has-dark-hero .site-header.is-stuck .topbar {
  color: var(--foret);
  background:
    radial-gradient(64% 240% at 6% 50%, rgba(255,214,122,.3) 0%, rgba(255,214,122,0) 62%),
    linear-gradient(100deg, rgba(238,246,234,.9) 0%, rgba(244,250,242,.86) 48%, rgba(234,243,249,.88) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}
/* L'en-tête lui-même, posé sur la photo, suit le même éclaircissement. */
body.has-dark-hero .site-header:not(.is-stuck) {
  background: rgba(248,250,247,.4);
  border-bottom-color: rgba(23,63,50,.12);
}
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > a,
body.has-dark-hero .site-header:not(.is-stuck) .nav-links > li > button,
body.has-dark-hero .site-header:not(.is-stuck) .nav-phone { color: var(--foret); }
body.has-dark-hero .site-header:not(.is-stuck) .brand-logo--clair { display: none; }
body.has-dark-hero .site-header:not(.is-stuck) .brand-logo--ink { display: block; }

/* ---------- 3. Le pied de page ----------
   Accordé au hero : même logique, voile confiné à la colonne de texte. */
.site-footer { background: #E9F1EA; color: var(--gris); }
.footer-photo { opacity: .5; }
.site-footer::after {
  background:
    linear-gradient(99deg,
      rgba(236,244,235,.93) 0%,
      rgba(238,246,237,.82) 30%,
      rgba(240,247,240,.5) 56%,
      rgba(242,248,242,.24) 100%),
    radial-gradient(60% 72% at 88% 104%, rgba(255,240,196,.4) 0%, rgba(255,240,196,0) 68%);
}
.site-footer, .site-footer p, .site-footer li, .site-footer .footer-links a { color: var(--gris); }
.site-footer h4 { color: var(--foret); }
.site-footer strong, .site-footer b { color: var(--foret) !important; }
.site-footer a { color: var(--energie); }
.site-footer a:hover { color: var(--foret); }
.site-footer svg { color: var(--energie); }
.site-footer .brand-logo--clair { display: none; }
.site-footer .brand-logo--ink { display: block; }
.footer-bottom { border-top-color: rgba(23,63,50,.14); }
.reseau-attente {
  background: rgba(23,63,50,.05);
  border-color: rgba(23,63,50,.22);
  color: rgba(23,63,50,.45);
}

/* ---------- 4. Le tiroir du menu, sur mobile ----------
   L'en-tête du tiroir restait nocturne et les pastilles d'icônes étaient des
   aplats sombres. Tout passe en clair, et chaque famille garde sa couleur,
   portée par le pictogramme plutôt que par le fond. */
.drawer-top {
  color: var(--foret);
  background:
    linear-gradient(102deg, rgba(234,244,232,.9) 0%, rgba(230,242,246,.84) 100%),
    url("/assets/img/photos/bandeau-panneaux-1100.jpg") center 52% / cover no-repeat;
}
.drawer-top .brand-logo--clair { display: none; }
.drawer-top .brand-logo--ink { display: block; }
.drawer-tag { color: var(--energie); }
.drawer-proof { color: var(--gris); }
.drawer-proof b { color: var(--foret); }
.drawer-close {
  background: rgba(23,63,50,.08);
  border-color: rgba(23,63,50,.2);
  color: var(--foret);
}
.drawer-close:hover, .drawer-close:focus-visible { background: rgba(23,63,50,.16); }

.d-ico, .submenu .ico {
  background: var(--voile-vert);
  box-shadow: inset 0 0 0 1px rgba(23,63,50,.1);
  color: var(--energie);
}
.d-ico svg, .submenu .ico svg { color: inherit; }
.ico--soleil { background: #FFF1DA; color: #B4620A; }
.ico--mesure { background: #E6F0F8; color: var(--bleu); }
.ico--vert   { background: #E6F2EA; color: var(--energie); }
.ico--foret  { background: #E3EEE7; color: var(--foret); }