/* ============================================================
EcoTherma · Design system 2026 (aperçu « f », revu à l'étape 5)
Une seule famille : Inter. Palette fermée : bleu nuit, vert,
vert clair d'accent, blanc cassé, gris clair, gris foncé texte.
Les nuances intermédiaires sont dérivées via color-mix / rgba.
============================================================ */
/* ---------- 1. Variables ---------- */
:root{
--navy:#09243A; /* bleu nuit : fonds sombres, titres */
--green:#16864A; /* vert : actions, accents */
--green-light:#B7E4A1; /* vert clair : accent sur fond sombre */
--offwhite:#F7F8F5; /* blanc cassé : fond de page */
--grey:#E7ECEA; /* gris clair : bordures, séparateurs */
--text:#263746; /* gris foncé : texte courant */
--white:#FFFFFF; /* blanc pur : cartes */
/* Dérivés (aucune couleur nouvelle) */
--text-muted:color-mix(in srgb,var(--text) 72%,var(--white));
--text-soft:color-mix(in srgb,var(--text) 55%,var(--white));
--green-hover:color-mix(in srgb,var(--green) 85%,var(--navy));
--green-tint:color-mix(in srgb,var(--green-light) 38%,var(--white));
--green-ring:color-mix(in srgb,var(--green) 22%,transparent);
--navy-soft:color-mix(in srgb,var(--navy) 88%,var(--white));
--navy-line:rgba(255,255,255,.14);
--navy-text:rgba(255,255,255,.78);
--navy-text-strong:rgba(255,255,255,.92);
--shadow-sm:0 1px 2px rgba(9,36,58,.06),0 1px 3px rgba(9,36,58,.04);
--shadow-md:0 8px 24px rgba(9,36,58,.08),0 2px 6px rgba(9,36,58,.05);
--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto;
--fs-xs:.75rem;
--fs-sm:.9rem;
--fs-base:1rem;
--fs-md:1.0625rem;
--fs-lg:clamp(1.125rem,1.05rem + .35vw,1.3rem);
--fs-h3:clamp(1.15rem,1.05rem + .5vw,1.4rem);
--fs-h2:clamp(1.75rem,1.3rem + 1.9vw,2.6rem);
--fs-h1:clamp(2.1rem,1.45rem + 2.9vw,3.6rem);
--fs-num:clamp(2rem,1.5rem + 1.8vw,3rem);
--s-1:.5rem;--s-2:1rem;--s-3:1.5rem;--s-4:2rem;--s-5:3rem;--s-6:4rem;--s-7:5.5rem;
--section:clamp(4rem,3rem + 4.5vw,7rem);
--gutter:clamp(1.25rem,4vw,3rem);
--max:1200px;
--nav-h:4.5rem;
--radius:6px;
--radius-sm:4px;
--ease:cubic-bezier(.22,.61,.36,1);
--t-fast:.22s;
--t-med:.5s;
}
/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.65;color:var(--text);background:var(--offwhite);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--green-light);color:var(--navy)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. Typographie ---------- */
h1,h2,h3,h4{color:var(--navy);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.025em;line-height:1.06}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.3}
h4{font-size:var(--fs-base);letter-spacing:0}
p{max-width:62ch}
p+p{margin-top:1em}
strong{font-weight:600}
.eyebrow{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s-2)}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--text-muted);max-width:56ch}
.muted{color:var(--text-muted)}
.small{font-size:var(--fs-sm)}
.num{font-size:var(--fs-num);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section);padding-bottom:var(--section)}
.section-head{max-width:46rem;margin-bottom:var(--s-6)}
.section-head h2{margin-bottom:var(--s-2)}
.section-head .lead{margin-top:var(--s-2)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head--center .lead{margin-left:auto;margin-right:auto}
.bg-offwhite{background:var(--offwhite)}
.bg-white{background:var(--white)}
.bg-navy{background:var(--navy);color:var(--navy-text)}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--white)}
.bg-navy .eyebrow{color:var(--green-light)}
.bg-navy .lead,.bg-navy .muted{color:var(--navy-text)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-6);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
/* ---------- 5. Boutons & liens ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:0 1.6rem;font-size:var(--fs-sm);font-weight:600;letter-spacing:.005em;line-height:1;border-radius:var(--radius);border:1px solid var(--green);background:var(--green);color:var(--white);white-space:nowrap;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{background:var(--green-hover);border-color:var(--green-hover);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn svg{width:1.05rem;height:1.05rem;transition:transform var(--t-fast) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--outline{background:transparent;color:var(--navy);border-color:color-mix(in srgb,var(--navy) 30%,transparent)}
.btn--outline:hover{background:var(--white);border-color:var(--navy);color:var(--navy);box-shadow:var(--shadow-sm)}
.btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{background:rgba(255,255,255,.08);border-color:var(--white);box-shadow:none}
.btn--sm{min-height:2.6rem;padding:0 1.1rem;font-size:var(--fs-sm)}
.link{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:600;color:var(--green);transition:color var(--t-fast),gap var(--t-fast) var(--ease)}
.link svg{width:1rem;height:1rem;transition:transform var(--t-fast) var(--ease)}
.link:hover{color:var(--green-hover)}
.link:hover svg{transform:translateX(3px)}
.bg-navy .link{color:var(--green-light)}
.bg-navy .link:hover{color:var(--white)}
/* ---------- 6. Navigation ---------- */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:color-mix(in srgb,var(--offwhite) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--grey);transition:box-shadow var(--t-fast)}
.nav.scrolled{box-shadow:var(--shadow-sm)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.nav-logo{display:flex;align-items:center;flex:0 0 auto}
.nav-logo img{height:2.5rem;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:var(--fs-sm);font-weight:500;color:var(--text);padding:.35rem 0;position:relative;transition:color var(--t-fast)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:1.25rem}
.nav-phone{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);font-weight:600;color:var(--navy);white-space:nowrap}
.nav-phone svg{width:1rem;height:1rem;color:var(--green)}
.nav-phone:hover{color:var(--green)}
.nav-cta{min-height:2.7rem;padding:0 1.2rem}
.nav-phone--icon{display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:var(--radius);border:1px solid var(--grey);color:var(--green);background:var(--white)}
.nav-phone--icon svg{width:1.1rem;height:1.1rem}
.nav-burger{display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:var(--radius);border:1px solid var(--grey);background:var(--white)}
.nav-burger span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast)}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;background:var(--offwhite);border-bottom:1px solid var(--grey);box-shadow:var(--shadow-md);padding:var(--s-3) var(--gutter) var(--s-4);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;font-size:1.05rem;font-weight:500;color:var(--navy);padding:.8rem 0;border-bottom:1px solid var(--grey)}
.mobile-menu a:last-of-type{border-bottom:0}
.mobile-menu .mm-cta{display:inline-flex;margin-top:var(--s-3);border-bottom:0;font-size:var(--fs-sm);color:var(--white)}
.mobile-menu .mm-meta{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9}
.mobile-menu .mm-meta a{display:inline;padding:0;border:0;font-size:inherit;font-weight:500;color:var(--navy)}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--white);min-height:clamp(34rem,82vh,50rem);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 65%} /* photo portrait 3:4 (chaufferie pellets) : on vise collecteurs + chaudière, sous le plafond */
.hero-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,36,58,.94) 0%,rgba(9,36,58,.86) 38%,rgba(9,36,58,.52) 64%,rgba(9,36,58,.22) 100%)}
.hero .wrap{width:100%;padding-top:calc(var(--section) * .9);padding-bottom:calc(var(--section) * .9)}
.hero-copy{max-width:40rem}
.hero .eyebrow{color:var(--green-light)}
.hero h1{color:var(--white);margin-bottom:var(--s-3);max-width:15ch}
.hero .lead{color:var(--navy-text-strong);margin-bottom:var(--s-4);max-width:44ch}
.hero-points{display:flex;flex-direction:column;gap:.7rem;margin-bottom:var(--s-5)}
.hero-points li{display:flex;align-items:center;gap:.8rem;font-size:var(--fs-sm);font-weight:500;color:var(--navy-text-strong)}
.hero-points svg{flex:0 0 auto;width:1.35rem;height:1.35rem;color:var(--green-light)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.hero-note{font-size:var(--fs-xs);color:rgba(255,255,255,.62);max-width:48ch;line-height:1.6} /* étape 5 : petite ligne grise sous les boutons, sans filet ni bandeau */
.hero-note strong{color:rgba(255,255,255,.8);font-weight:500}
/* ---------- 8. Notre méthode ---------- */
.method{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-6);align-items:start}
.method-media{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.method-media figure{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--grey)}
.method-media img{width:100%;height:100%;object-fit:cover}
.method-media figcaption{margin-top:.8rem;font-size:var(--fs-xs);color:var(--text-soft);letter-spacing:.06em;text-transform:uppercase}
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--grey)}
.step:last-child{border-bottom:1px solid var(--grey)}
.step-num{font-size:var(--fs-sm);font-weight:700;color:var(--green);letter-spacing:.06em;padding-top:.35rem;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:.45rem}
.step p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65;max-width:50ch}
/* ---------- 9. Nos solutions (cartes) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--green) 35%,var(--grey))}
.card-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--grey)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{display:flex;flex-direction:column;flex:1;padding:var(--s-3) var(--s-3) var(--s-4)}
.card h3{margin-bottom:.5rem}
.card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;margin-bottom:var(--s-3)}
.card .link{margin-top:auto}
.cards-note{margin-top:var(--s-5);padding:var(--s-3) var(--s-4);background:var(--white);border:1px solid var(--grey);border-left:3px solid var(--green);border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--text-muted)}
.cards-note p{max-width:none}
.cards-note strong{color:var(--navy)}
/* ---------- 10. Réalisations ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:var(--s-3)}
.gallery-item{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.gallery-item.is-large{grid-column:span 2;grid-row:span 2}
.gallery-item.is-large.is-right{grid-column:3/span 2}
.gallery-item figure{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--grey);aspect-ratio:4/3;flex:1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery-item:hover img{transform:scale(1.03)}
.gallery-caption{display:flex;flex-direction:column;gap:.15rem}
.gallery-type{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.gallery-label{font-size:var(--fs-sm);font-weight:500;color:var(--navy);line-height:1.4}
.gallery-caption .link{font-size:var(--fs-xs);margin-top:.25rem}
.gallery+.gallery{margin-top:var(--s-3)}
/* Étude de cas */
.case{margin-top:var(--s-7);padding:clamp(1.75rem,4vw,3.5rem);background:var(--navy);color:var(--navy-text);border-radius:var(--radius);overflow:hidden}
.case-head{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-5);align-items:end;margin-bottom:var(--s-5)}
.case-head h2{color:var(--white);margin-bottom:var(--s-2)}
.case-head .eyebrow{color:var(--green-light)}
.case-head .lead{color:var(--navy-text)}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.case-fact{padding-top:.8rem;border-top:1px solid var(--navy-line)}
.case-fact .num{color:var(--green-light);font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem)}
.case-fact-label{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--navy-text);margin-top:.4rem;line-height:1.5}
.strip{position:relative}
.strip-track{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.25rem}
.strip-track::-webkit-scrollbar{display:none}
.strip-slide{flex:0 0 min(100%,30rem);scroll-snap-align:start;display:flex;flex-direction:column;gap:.7rem}
.strip-slide figure{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-sm);background:var(--navy-soft)}
.strip-slide img{width:100%;height:100%;object-fit:cover}
.strip-phase{display:inline-block;align-self:flex-start;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--green-light);padding:.25rem .55rem;border-radius:3px}
.strip-text{font-size:var(--fs-sm);color:var(--navy-text-strong)}
.strip-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-3)}
.strip-dots{display:flex;gap:.4rem;flex-wrap:wrap}
.strip-dot{width:1.6rem;height:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:background var(--t-fast)}
.strip-dot.active{background:var(--green-light)}
.strip-arrows{display:flex;gap:.5rem}
.strip-prev,.strip-next{width:2.75rem;height:2.75rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;justify-content:center;color:var(--white);transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.strip-prev svg,.strip-next svg{width:1.1rem;height:1.1rem}
.strip-prev:hover,.strip-next:hover{background:var(--green-light);border-color:var(--green-light);color:var(--navy)}
.case-details{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--navy-line)}
.case-detail h4{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--green-light);margin-bottom:.5rem;font-weight:600}
.case-detail p{font-size:var(--fs-sm);color:var(--navy-text);line-height:1.6}
.case-cta{margin-top:var(--s-4)}
/* ---------- 11. Pourquoi EcoTherma ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.why-item{padding:var(--s-4);background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.why-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.icon-box{width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--green-tint);color:var(--green);margin-bottom:var(--s-3)}
.icon-box svg{width:1.4rem;height:1.4rem}
.why-item h3{font-size:1.05rem;margin-bottom:.5rem}
.why-item p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
/* ---------- 12. À propos ---------- */
.about{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-6);align-items:start}
.about-text p{color:var(--text);max-width:58ch}
.about-text h2{margin-bottom:var(--s-3)}
.about-quote{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border-left:3px solid var(--green);background:var(--white);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-md);font-weight:500;color:var(--navy);line-height:1.5}
.about-quote cite{display:block;margin-top:.6rem;font-style:normal;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.team{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.person{background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden}
.person-photo{aspect-ratio:1/1;overflow:hidden;background:var(--grey)}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person-body{padding:var(--s-3)}
.person h3{font-size:1.05rem;margin-bottom:.15rem}
.person-role{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}
.person p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.certs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s-3)}
.certs span{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--white);border:1px solid var(--grey);border-radius:999px;padding:.45rem .85rem}
.certs svg{width:.9rem;height:.9rem;color:var(--green)}
/* ---------- 13. Avis & confiance ---------- */
.reviews-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-5)}
.reviews-score{display:flex;align-items:center;gap:1rem;padding:var(--s-2) var(--s-3);background:var(--offwhite);border:1px solid var(--grey);border-radius:var(--radius)}
.reviews-score .num{font-size:2.25rem}
.stars{display:inline-flex;gap:.15rem;color:var(--green)}
.stars svg{width:1rem;height:1rem}
.reviews-score .meta{font-size:var(--fs-sm);color:var(--text-muted);margin-top:.2rem}
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.review{display:flex;flex-direction:column;gap:.9rem;padding:var(--s-3);background:var(--offwhite);border:1px solid var(--grey);border-radius:var(--radius)}
.review .stars svg{width:.85rem;height:.85rem}
.review blockquote{font-size:var(--fs-sm);line-height:1.6;color:var(--text);flex:1}
.review cite{font-style:normal;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.reviews-more{margin-top:var(--s-4)}
.brands{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--grey);display:grid;grid-template-columns:5fr 7fr;gap:var(--s-4);align-items:center}
.brands p{font-size:var(--fs-sm);color:var(--text-muted)}
.brands ul{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:var(--fs-md);font-weight:600;color:var(--navy);letter-spacing:-.01em}
/* ---------- 14. Contact & formulaire ---------- */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-6);align-items:start}
.contact-copy{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.contact-copy h2{margin-bottom:var(--s-3)}
.contact-copy .lead{margin-bottom:var(--s-4)}
.contact-infos{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--navy-line)}
.contact-info h4{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--green-light);font-weight:600;margin-bottom:.3rem}
.contact-info p{font-size:var(--fs-sm);color:var(--navy-text);line-height:1.6}
.contact-info a{color:var(--white);font-weight:500}
.contact-info a:hover{color:var(--green-light)}
.form-wrapper{background:var(--white);color:var(--text);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.75rem);box-shadow:var(--shadow-md)}
#form-confirmation{display:none;text-align:center;padding:var(--s-5) var(--s-3)}
#form-confirmation h3{margin-bottom:1rem}
#form-confirmation p{color:var(--text-muted);font-size:var(--fs-sm);max-width:40ch;margin:0 auto .6rem}
.form-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-bottom:var(--s-4)}
.form-step-indicator{padding-top:.75rem;border-top:3px solid var(--grey);transition:border-color var(--t-fast)}
.form-step-indicator .step-dot{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.15rem}
.form-step-indicator .step-label{font-size:var(--fs-sm);color:var(--text-soft)}
.form-step-indicator.active{border-color:var(--green)}
.form-step-indicator.active .step-dot{color:var(--green)}
.form-step-indicator.active .step-label{color:var(--navy);font-weight:500}
.form-step-indicator.done{border-color:var(--green-light)}
.form-step-indicator.done .step-dot{color:var(--green)}
.form-step-indicator.done .step-label{color:var(--text)}
.form-step-panel{display:none}
.form-step-panel.active{display:block;animation:fadeUp .4s var(--ease)}
.form-step-title{font-size:var(--fs-h3);font-weight:700;color:var(--navy);letter-spacing:-.01em;margin-bottom:var(--s-3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-bottom:var(--s-3)}
.form-row.single{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.form-group label{font-size:var(--fs-sm);font-weight:500;color:var(--navy)}
.form-group .req{color:var(--green)}
.form-group input,.form-group select,.form-group textarea{width:100%;font:inherit;font-size:var(--fs-base);color:var(--text);background:var(--white);border:1px solid color-mix(in srgb,var(--grey) 70%,var(--text));border-radius:var(--radius-sm);padding:.75rem .9rem;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.form-group select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem;cursor:pointer}
.form-group textarea{min-height:7rem;resize:vertical}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-soft)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}
.form-group .is-invalid{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 15%,transparent)}
.form-group .hint{font-size:var(--fs-xs);color:var(--text-soft)}
.upload-area{border:1px dashed color-mix(in srgb,var(--green) 55%,var(--grey));background:var(--green-tint);border-radius:var(--radius-sm);padding:var(--s-4);text-align:center;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.upload-area:hover,.upload-area.has-files{border-color:var(--green);border-style:solid}
.upload-area strong{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:.3rem;color:var(--navy)}
.upload-area p{font-size:var(--fs-xs);color:var(--text-muted);max-width:none}
.form-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--grey)}
.btn-next,.btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:0 1.5rem;font-size:var(--fs-sm);font-weight:600;border-radius:var(--radius);background:var(--green);color:var(--white);border:1px solid var(--green);transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.btn-next:hover,.btn-submit:hover{background:var(--green-hover);border-color:var(--green-hover);box-shadow:var(--shadow-sm)}
.btn-submit:disabled{opacity:.6;cursor:default;box-shadow:none}
.btn-prev{font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);padding:.5rem 0;transition:color var(--t-fast)}
.btn-prev:hover{color:var(--navy)}
.form-disclaimer{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-soft);line-height:1.6;max-width:none}
.form-disclaimer strong{color:var(--text-muted);font-weight:500}
/* ---------- 15. FAQ ---------- */
.faq{display:grid;grid-template-columns:4fr 8fr;gap:var(--s-6);align-items:start}
.faq-intro h2{margin-bottom:var(--s-2)}
.faq-item{border-top:1px solid var(--grey)}
.faq-item:last-child{border-bottom:1px solid var(--grey)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);text-align:left;padding:1.2rem 0;font-size:var(--fs-md);font-weight:600;color:var(--navy);transition:color var(--t-fast)}
.faq-question:hover,.faq-item.open .faq-question{color:var(--green)}
.faq-question .plus{flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--grey);position:relative;color:var(--green);transition:background var(--t-fast),border-color var(--t-fast)}
.faq-item.open .faq-question .plus{background:var(--green-tint);border-color:transparent}
.faq-question .plus::before,.faq-question .plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform var(--t-fast) var(--ease)}
.faq-question .plus::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.faq-question .plus::after{width:2px;height:12px;transform:translate(-50%,-50%)}
.faq-item.open .faq-question .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--t-med) var(--ease)}
.faq-item.open .faq-answer{max-height:30rem}
.faq-answer p{padding:0 3rem 1.4rem 0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;max-width:60ch}
/* ---------- 16. Pied de page ---------- */
.footer{background:var(--navy);color:var(--navy-text);padding:var(--s-7) 0 var(--s-4)}
.footer .wrap{display:grid;grid-template-columns:4fr 2.5fr 2.5fr 3fr;gap:var(--s-5) var(--s-4)}
.footer-brand .footer-logo{display:inline-flex;background:var(--white);padding:.4rem .6rem;border-radius:var(--radius-sm);margin-bottom:var(--s-3)}
.footer-brand .footer-logo img{height:2.25rem;width:auto}
.footer-brand p{font-size:var(--fs-sm);line-height:1.7;max-width:34ch}
.footer-col h4{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--green-light);font-weight:600;margin-bottom:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:var(--fs-sm);color:var(--navy-text);transition:color var(--t-fast)}
.footer-col a:hover{color:var(--white)}
.footer-col p{font-size:var(--fs-sm);line-height:1.8}
.footer-col address{font-style:normal;font-size:var(--fs-sm);line-height:1.8}
.footer-col address a{color:var(--white);font-weight:500}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--navy-line);font-size:var(--fs-xs);color:var(--navy-text)}
.footer-bottom a{color:var(--navy-text-strong)}
.footer-bottom a:hover{color:var(--white)}
.footer-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
/* ---------- 17. Mouvement ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none}
}
/* ---------- 18. Responsive ---------- */
@media (max-width:1100px){
.cards{grid-template-columns:repeat(2,1fr)}
.why{grid-template-columns:repeat(2,1fr)}
.reviews{grid-template-columns:repeat(2,1fr)}
.case-details{grid-template-columns:repeat(2,1fr)}
.footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.nav-links,.nav-phone,.nav-cta{display:none}
.nav-burger,.nav-phone--icon{display:inline-flex}
.nav-right{gap:.6rem}
.hero{min-height:0}
.hero-media img{object-position:center 55%}
.hero-veil{background:linear-gradient(180deg,rgba(9,36,58,.9) 0%,rgba(9,36,58,.86) 60%,rgba(9,36,58,.7) 100%)}
.method{grid-template-columns:1fr;gap:var(--s-5)}
.method-media{position:static}
.method-media figure{aspect-ratio:3/2}
.case-head{grid-template-columns:1fr;gap:var(--s-4)}
.case-facts{grid-template-columns:repeat(4,1fr)}
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery-item.is-large{grid-column:1/-1;grid-row:auto}
.gallery-item.is-large.is-right{grid-column:1/-1}
.about{grid-template-columns:1fr}
.brands{grid-template-columns:1fr}
.contact{grid-template-columns:1fr}
.contact-copy{position:static}
.faq{grid-template-columns:1fr;gap:var(--s-4)}
}
@media (max-width:600px){
:root{--gutter:1.25rem;--nav-h:4rem}
.hero .wrap{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.hero-media img{object-position:center}
.hero h1{max-width:none}
.hero-actions .btn{width:100%}
.cards{grid-template-columns:1fr}
.why{grid-template-columns:1fr}
.reviews{grid-template-columns:1fr}
.case{padding:var(--s-3);border-radius:var(--radius-sm)}
.case-facts{grid-template-columns:1fr 1fr}
.case-details{grid-template-columns:1fr}
.strip-slide{flex-basis:100%}
.gallery{grid-template-columns:1fr}
.team{grid-template-columns:1fr 1fr;gap:var(--s-2)}
.person-body{padding:var(--s-2)}
.form-progress{grid-template-columns:1fr 1fr}
.form-row{grid-template-columns:1fr}
.form-nav{flex-direction:column-reverse;align-items:stretch}
.form-nav .btn-next,.form-nav .btn-submit{width:100%}
.footer .wrap{grid-template-columns:1fr}
.footer-bottom{flex-direction:column}
}
@media (max-width:400px){
.team{grid-template-columns:1fr}
}
/* ---------- 19. Pages intérieures (étape 2) ----------
Toutes les règles sont préfixées .page- et n'affectent pas l'accueil. */
/* Bandeau de titre (étape 2 bis : une promesse par page, grande photo) */
.page-hero{background:var(--offwhite);border-bottom:1px solid var(--grey)}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:var(--s-6);align-items:center;padding-top:calc(var(--section) * .6);padding-bottom:calc(var(--section) * .6)}
.page-hero h1{font-size:clamp(1.9rem,1.35rem + 2.1vw,3rem);margin-bottom:var(--s-3);max-width:22ch}
.page-hero .lead{margin-bottom:var(--s-4);color:var(--text);max-width:60ch}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.page-hero-media{min-width:0}
.page-hero-img{height:clamp(22rem,40vw,34rem);overflow:hidden;border-radius:var(--radius);background:var(--grey);box-shadow:var(--shadow-md)}
.page-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.page-hero--plain .wrap{grid-template-columns:1fr}
.page-hero--plain h1{max-width:28ch}
/* Bandeau d'information (projets planifiés, TVA, etc.) */
.page-notice{background:var(--navy);color:var(--navy-text-strong);font-size:var(--fs-sm);line-height:1.6;padding:.9rem 0}
.page-notice p{max-width:none;text-align:center}
.page-notice strong{color:var(--white);font-weight:600}
/* Sommaire */
.page-toc{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;padding:var(--s-3) var(--s-4);background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);margin-bottom:var(--s-6)}
.page-toc-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.page-toc a{font-size:var(--fs-sm);font-weight:500;color:var(--navy);padding:.2rem 0;border-bottom:1px solid transparent;transition:border-color var(--t-fast),color var(--t-fast)}
.page-toc a:hover{color:var(--green);border-bottom-color:var(--green)}
/* Mise en page du contenu */
.page-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-6);align-items:start}
.page-grid>*{min-width:0} /* audit images 11/10 : les tableaux défilent dans leur cadre, la page ne déborde plus sur mobile */
.page-grid--even{grid-template-columns:1fr 1fr}
.page-aside{display:flex;flex-direction:column;gap:var(--s-3);position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.page-narrow{max-width:48rem;margin-left:auto;margin-right:auto}
.page-prose h2{margin-bottom:var(--s-3)}
.page-prose h3{margin-top:var(--s-4);margin-bottom:var(--s-2)}
.page-prose>h3:first-child,.page-prose>h4:first-child{margin-top:0}
.page-prose h4{margin-top:var(--s-3);margin-bottom:.5rem}
.page-prose p{color:var(--text);max-width:62ch}
.page-prose p+p,.page-prose ul+p,.page-prose p+ul{margin-top:1em}
.page-prose ul{display:flex;flex-direction:column;gap:.45rem;margin:var(--s-2) 0 var(--s-3)}
.page-prose li{position:relative;padding-left:1.5rem;max-width:62ch;line-height:1.55}
.page-prose li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--green)}
.page-prose a:not(.btn):not(.link){color:var(--green);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page-prose a:not(.btn):not(.link):hover{color:var(--green-hover)}
.page-prose .btn{margin-top:var(--s-3)}
/* Encadrés */
.page-box{background:var(--white);border:1px solid var(--grey);border-left:3px solid var(--green);border-radius:var(--radius);padding:var(--s-3) var(--s-4)}
.page-box h4{margin:0 0 .45rem}
.page-box p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.65;max-width:none}
.page-box--warning{border-left-color:var(--navy);background:var(--offwhite)}
.page-box--warning h4{color:var(--navy)}
.page-prose .page-box{margin-top:var(--s-4)}
.page-boxes{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5)}
/* Bloc « étapes » (réutilise .steps / .step du design system) */
.page-steps{max-width:46rem;margin:0 auto}
.page-steps .step h4{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.3;margin:0 0 .45rem}
.page-steps .step p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65;max-width:50ch}
/* Chiffres clés */
.page-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.page-stat{background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);padding:var(--s-4) var(--s-3);text-align:center}
.page-stat .num{color:var(--green);margin-bottom:.5rem}
.page-stat-label{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5;max-width:none}
/* Grille de cartes (prestations, photos à envoyer) */
.page-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.page-feature{background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);padding:var(--s-4);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.page-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.page-feature .icon-box{margin-bottom:var(--s-2)}
.page-feature h4{font-size:1.05rem;margin:0 0 .5rem}
.page-feature p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;max-width:none}
/* Tableaux (comparatif, prix) : défilement horizontal sur mobile */
.page-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s-3) 0;border:1px solid var(--grey);border-radius:var(--radius);background:var(--white)}
.page-table{width:100%;min-width:36rem;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.5}
.page-table th,.page-table td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--grey)}
.page-table thead th{background:var(--offwhite);color:var(--navy);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.page-table tbody tr:last-child td{border-bottom:0}
.page-table td:first-child{color:var(--navy);font-weight:500}
.page-table td.good{color:var(--green);font-weight:600;white-space:nowrap}
.page-table td.medium{color:var(--text-muted);font-weight:500;white-space:nowrap}
.page-table strong{color:var(--navy)}
/* FAQ en accordéon (details / summary) */
.page-faq{margin-top:var(--s-3)}
.page-faq details{border-top:1px solid var(--grey)}
.page-faq details:last-child{border-bottom:1px solid var(--grey)}
.page-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:1.1rem 0;font-size:var(--fs-md);font-weight:600;color:var(--navy);transition:color var(--t-fast)}
.page-faq summary::-webkit-details-marker{display:none}
.page-faq summary::after{content:"";flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--grey);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center;transition:transform var(--t-fast) var(--ease),background-color var(--t-fast)}
.page-faq summary:hover,.page-faq details[open] summary{color:var(--green)}
.page-faq details[open] summary::after{transform:rotate(45deg);background-color:var(--green-tint);border-color:transparent}
.page-faq details p{padding:0 3rem 1.3rem 0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;max-width:62ch}
.page-faq details a{color:var(--green);font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* Galerie photos */
.page-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.page-gallery--2{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.page-gallery figure{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--grey)}
.page-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.page-gallery figure:hover img{transform:scale(1.03)}
.page-gallery figcaption{margin-top:.5rem;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4}
/* Encadré d'appel à l'action (fin de contenu) */
.page-cta{display:grid;grid-template-columns:1fr auto;gap:var(--s-4);align-items:center;background:var(--white);border:1px solid var(--grey);border-left:3px solid var(--green);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.5rem)}
.page-cta h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);margin-bottom:.6rem}
.page-cta p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;max-width:none}
/* Bloc contact commun (bleu nuit, avant le pied de page) */
.page-contact .wrap{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-6);align-items:center}
.page-contact-title{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance;color:var(--white);max-width:none;margin-bottom:var(--s-2)}
.page-contact .lead{margin-bottom:var(--s-4)}
.page-contact-infos{display:flex;flex-direction:column;gap:var(--s-3);padding-left:var(--s-5);border-left:1px solid var(--navy-line)}
.page-contact-infos h4{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--green-light);font-weight:600;margin-bottom:.3rem}
.page-contact-infos p{font-size:var(--fs-sm);color:var(--navy-text);line-height:1.6;max-width:none}
.page-contact-infos a{color:var(--white);font-weight:500}
.page-contact-infos a:hover{color:var(--green-light)}
/* Formulaires des pages intérieures (noms, ids et action inchangés) */
.page-form{max-width:48rem;margin:0 auto;background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.75rem);box-shadow:var(--shadow-md)}
.page-form .form-row{margin-bottom:var(--s-3)}
.page-form input[type="file"]{padding:.7rem .9rem;background:var(--offwhite);border-style:dashed;cursor:pointer}
.page-form .btn-submit{width:100%;margin-top:var(--s-2)}
.page-form-note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-soft);text-align:center;line-height:1.6;max-width:none}
.page-form-success{text-align:center;padding:var(--s-5) var(--s-3)}
.page-form-success h3{margin-bottom:1rem}
.page-form-success p{color:var(--text-muted);font-size:var(--fs-sm);max-width:44ch;margin:0 auto .6rem}
.page-form-success .page-form-success-mark{width:3rem;height:3rem;margin:0 auto var(--s-3);border-radius:50%;background:var(--green-tint);color:var(--green);display:flex;align-items:center;justify-content:center}
.page-form-success .page-form-success-mark svg{width:1.4rem;height:1.4rem}
/* Responsive des composants de page */
@media (max-width:1100px){
.page-gallery:not(.page-gallery--2){grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
.page-hero .wrap{grid-template-columns:1fr;gap:var(--s-4)}
.page-hero h1{max-width:none}
.page-hero-img{height:auto;aspect-ratio:4/3}
.page-grid,.page-grid--even{grid-template-columns:1fr;gap:var(--s-5)}
.page-aside{position:static}
.page-features{grid-template-columns:repeat(2,1fr)}
.page-gallery{grid-template-columns:repeat(2,1fr)}
.page-cta{grid-template-columns:1fr}
.page-contact .wrap{grid-template-columns:1fr;gap:var(--s-4)}
.page-contact-infos{padding-left:0;border-left:0;padding-top:var(--s-4);border-top:1px solid var(--navy-line)}
}
@media (max-width:600px){
.page-hero-actions .btn{width:100%}
.page-toc{padding:var(--s-2) var(--s-3)}
.page-stats{grid-template-columns:1fr}
.page-features{grid-template-columns:1fr}
.page-table{min-width:30rem}
.page-faq details p{padding-right:0}
.page-form .btn-submit{width:100%}
}
/* ---------- 20. Étape 2 bis : avant / après, schémas, vignettes, formulaire par étapes, pied de page ----------
Règles préfixées .page- (pages intérieures) ou .footer- (pied de page commun aux 7 pages). */
/* Bloc « Avant / après » sous le bandeau */
.page-ba{padding-top:var(--s-5);padding-bottom:var(--s-5)}
.page-ba-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem var(--s-3);margin-bottom:var(--s-3)}
.page-ba-head h2{font-size:var(--fs-h3);letter-spacing:-.01em}
.page-ba-head p{font-size:var(--fs-sm);color:var(--text-muted);max-width:none}
.page-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.page-ba figure{background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);overflow:hidden;min-width:0}
.page-ba-img{aspect-ratio:3/2;background:var(--grey);overflow:hidden}
.page-ba-img img{width:100%;height:100%;object-fit:cover}
.page-ba figcaption{display:flex;align-items:center;gap:.7rem;padding:.8rem var(--s-3);font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.page-ba-tag{flex:0 0 auto;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--green-tint);padding:.25rem .55rem;border-radius:3px}
/* Schémas (SVG inline pour les pictos et les axes, texte en HTML pour rester lisible sur mobile) */
.page-schema{background:var(--white);border:1px solid var(--grey);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2.5rem);margin-top:var(--s-4)}
.page-schema-title{font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s-3);max-width:none}
.page-schema-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.page-schema-col{text-align:center;padding:var(--s-3) var(--s-2);border:1px solid var(--grey);border-radius:var(--radius);background:var(--offwhite);display:flex;flex-direction:column;align-items:center}
.page-schema-col svg{width:3.5rem;height:3.5rem;margin:0 auto var(--s-2);color:var(--navy)}
.page-schema-col.is-current svg{color:var(--green)}
.page-schema-col h4{font-size:var(--fs-base);margin:0 0 .35rem;max-width:22ch}
.page-schema-col p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5;max-width:26ch;margin:0}
.page-schema-temp{display:inline-block;margin-top:auto;padding-top:var(--s-2);font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.page-schema-bar{margin-top:var(--s-3)}
.page-schema-bar svg{width:100%;height:auto}
.page-schema-bar .bar-low{stroke:var(--green);stroke-width:10;stroke-linecap:round}
.page-schema-bar .bar-mid{stroke:var(--green-light);stroke-width:10}
.page-schema-bar .bar-high{stroke:var(--navy-soft);stroke-width:10;stroke-linecap:round}
.page-schema-bar .dot-green{fill:var(--white);stroke:var(--green);stroke-width:3}
.page-schema-bar .dot-navy{fill:var(--white);stroke:var(--navy);stroke-width:3}
.page-schema-bar-labels{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:.6rem;font-size:var(--fs-sm);font-weight:600}
.page-schema-bar-labels span:first-child{color:var(--green)}
.page-schema-bar-labels span:last-child{color:var(--navy);text-align:right}
.page-schema-axis{margin-top:var(--s-3)}
.page-schema-axis svg{width:100%;height:auto}
.page-schema-axis .axis-line{stroke:var(--grey);stroke-width:8;stroke-linecap:round}
.page-schema-axis .axis-cold{stroke:var(--navy);stroke-width:8;stroke-linecap:round}
.page-schema-axis .axis-warm{stroke:var(--green);stroke-width:8;stroke-linecap:round}
.page-schema-axis .axis-mark{fill:var(--white);stroke:var(--navy);stroke-width:3}
.page-schema-axis-labels{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-2);margin-top:.6rem;font-size:var(--fs-sm);font-weight:600}
.page-schema-axis-labels span:first-child{color:var(--navy)}
.page-schema-axis-labels span:nth-child(2){color:var(--text-muted);text-align:center}
.page-schema-axis-labels span:last-child{color:var(--green);text-align:right}
.page-schema-caption{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--grey);text-align:center;font-weight:600;color:var(--navy);max-width:none}
.page-schema-hyb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:var(--s-3);align-items:stretch}
.page-schema-hyb .page-schema-col.is-reg{background:var(--navy);border-color:var(--navy);color:var(--navy-text)}
.page-schema-hyb .page-schema-col.is-reg svg{color:var(--green-light)}
.page-schema-hyb .page-schema-col.is-reg h4{color:var(--white)}
.page-schema-hyb .page-schema-col.is-reg p{color:var(--navy-text)}
.page-schema-ecs{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border:1px dashed color-mix(in srgb,var(--navy) 30%,var(--grey));border-radius:var(--radius);font-size:var(--fs-sm);color:var(--text)}
.page-schema-ecs svg{flex:0 0 auto;width:1.6rem;height:1.6rem;color:var(--navy)}
.page-schema-ecs p{max-width:none;margin:0}
.page-schema-ecs strong{color:var(--navy)}
/* Vignettes compactes (photos attendues) */
.page-features--compact .page-feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-3);align-items:start;padding:var(--s-3)}
.page-features--compact .page-feature .icon-box{margin:0;grid-row:1/3}
.page-features--compact .page-feature h4,.page-features--compact .page-feature p{grid-column:2;min-width:0} /* audit images 11/10 : titre et texte en colonne 2, icône sur deux lignes */
.page-features--compact .page-feature h4{margin:0 0 .3rem;font-size:var(--fs-base)}
.page-features--compact .page-feature p{font-size:var(--fs-sm)}
/* Formulaire par étapes des pages intérieures (même technique que l'accueil) */
.page-form .form-progress{grid-template-columns:repeat(3,1fr)}
.page-form .form-nav .btn-submit{width:auto;margin-top:0}
.page-form .form-nav .btn-prev{color:var(--text-muted)}
.page-form .page-form-note{margin-top:var(--s-3)}
/* Pied de page commun (7 pages) */
.footer-brand .footer-certs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-3)}
.footer-brand .footer-certs span{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-text-strong);border:1px solid var(--navy-line);border-radius:999px;padding:.4rem .75rem}
.footer-brand .footer-certs svg{width:.85rem;height:.85rem;color:var(--green-light)}
.footer-bottom p{max-width:none;line-height:1.9}
.footer-bottom .footer-sep{opacity:.55;padding:0 .35rem}
@media (max-width:900px){
.page-ba-grid{grid-template-columns:1fr}
.page-schema-hyb{grid-template-columns:1fr 1fr}
.page-schema-hyb .page-schema-col.is-reg{grid-column:1/-1;order:-1}
}
@media (max-width:600px){
.page-schema-cols,.page-schema-hyb{grid-template-columns:1fr}
.page-schema-col p,.page-schema-col h4{max-width:none}
.page-schema-bar,.page-schema-axis{display:none}
.page-form .form-progress{grid-template-columns:repeat(3,1fr);gap:.5rem}
.page-form .form-step-indicator .step-label{font-size:var(--fs-xs)}
.page-form .form-nav .btn-submit{width:100%}
}
/* ---------- 21. Photos de chantier 2026 (étape 3) : recadrage des portraits 3:4 ---------- */
/* Les cadres gardent leur ratio (cartes 4:3, galerie 4:3, bandeau 40vw / 4:3, méthode 4:5 / 3:2) :
object-fit:cover est déjà en place, ces classes déplacent seulement le point d'intérêt. */
.img-pos-high{object-position:center 38%}
.img-pos-low{object-position:center 60%}
/* ---------- 22. Étape 4 : pages communes, À propos, Réalisations (galerie + lightbox) ----------
Règles préfixées .page-, .real-, .lb- ou limitées à un contexte ; aucune règle existante modifiée. */
/* Ligne de localités sous le chapeau (pages communes) */
.page-hero .lead:has(+ .page-hero-zone){margin-bottom:var(--s-2)}
.page-hero-zone{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);font-weight:600;color:var(--navy);margin-bottom:var(--s-4);max-width:none}
.page-hero-zone svg{width:1rem;height:1rem;color:var(--green);flex:none}
/* Accueil : lien « Voir toutes nos réalisations » sous la galerie */
.gallery-more{margin-top:var(--s-4)}
/* Page À propos : bloc « Pourquoi EcoTherma » sous la présentation, marques sans filet, en-tête des avis */
.page-why{margin-top:var(--s-7)}
.brands--page{margin-top:0;padding-top:0;border-top:0;grid-template-columns:1fr;gap:var(--s-3)}
.reviews-head .section-head{margin-bottom:0}
/* Page Réalisations : grille par famille (cadres 3:4, photo paysage sur 2 colonnes en 3:2) */
.real-section{padding-top:calc(var(--section) * .7);padding-bottom:calc(var(--section) * .7)}
.real-section .page-toc{margin-bottom:var(--s-3)}
.real-note{font-size:var(--fs-sm);color:var(--text-muted)}
.real-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-4)}
.real-head h2,.real-head h3{margin-bottom:var(--s-1)}
.real-head .lead{font-size:var(--fs-base);max-width:60ch}
.real-count{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap;padding-bottom:.35rem}
.real-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4) var(--s-2)}
.real-item{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.real-item--wide{grid-column:span 2}
.real-link{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--grey);cursor:zoom-in}
.real-item--wide .real-link{aspect-ratio:3/2}
.real-link img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.real-link:hover img{transform:scale(1.03)}
.real-link:focus-visible{outline-offset:2px}
.real-item figcaption{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45}
.real-phase{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-right:.5rem}
.real-case{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--grey)}
.real-case h3{font-size:var(--fs-h3)}
/* Lightbox :