:root{
  --navy:#0F3557; --navy-d:#08243D; --navy-x:#051A2C;
  --bleu:#2E6BA3; --bleu-l:#5E9BD1;
  --vert:#257A50; --vert-l:#3E9A6A; --vert-txt:#1E6742;
  --rouge:#A81719; --rouge-l:#C8433F;
  --papier:#F6F7F6; --surface:#FFFFFF; --surface-2:#EAEEF0;
  --encre:#0E1B25; --encre-2:#3A4C59; --gris:#6C7C88; --gris-l:#95A3AD;
  --trait:#DCE2E6; --trait-2:#B9C4CB;
  --band:#0B2A45; --band-txt:#DCE7F0; --band-tr:rgba(255,255,255,.14);
  --ombre:0 1px 1px rgba(11,42,69,.04), 0 14px 40px -26px rgba(11,42,69,.5);
  --ombre-h:0 2px 4px rgba(11,42,69,.06), 0 22px 54px -28px rgba(11,42,69,.6);
  --d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --t:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:2px;
  --gut:clamp(20px,4vw,44px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#6FA6DA; --navy-d:#8FBDE6; --navy-x:#A9CDEE;
  --bleu:#6FA3D0; --bleu-l:#95BFE0;
  --vert:#4FB183; --vert-l:#6FC79C; --vert-txt:#63BF93;
  --rouge:#E4746F; --rouge-l:#EE9490;
  --papier:#0A1219; --surface:#111C25; --surface-2:#18262F;
  --encre:#E9EFF3; --encre-2:#BDCAD3; --gris:#8496A2; --gris-l:#6A7B87;
  --trait:#22323D; --trait-2:#334754;
  --band:#0E1F2E; --band-txt:#DCE7F0; --band-tr:rgba(255,255,255,.12);
  --ombre:0 1px 1px rgba(0,0,0,.4), 0 14px 40px -26px rgba(0,0,0,.95);
  --ombre-h:0 2px 4px rgba(0,0,0,.5), 0 22px 54px -28px #000;
}}
:root[data-theme="dark"]{
  --navy:#6FA6DA; --navy-d:#8FBDE6; --navy-x:#A9CDEE;
  --bleu:#6FA3D0; --bleu-l:#95BFE0;
  --vert:#4FB183; --vert-l:#6FC79C; --vert-txt:#63BF93;
  --rouge:#E4746F; --rouge-l:#EE9490;
  --papier:#0A1219; --surface:#111C25; --surface-2:#18262F;
  --encre:#E9EFF3; --encre-2:#BDCAD3; --gris:#8496A2; --gris-l:#6A7B87;
  --trait:#22323D; --trait-2:#334754;
  --band:#0E1F2E; --band-txt:#DCE7F0; --band-tr:rgba(255,255,255,.12);
  --ombre:0 1px 1px rgba(0,0,0,.4), 0 14px 40px -26px rgba(0,0,0,.95);
  --ombre-h:0 2px 4px rgba(0,0,0,.5), 0 22px 54px -28px #000;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--t);font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--bleu)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.wrap-n{max-width:900px;margin:0 auto;padding-inline:var(--gut)}

/* ————— eyebrow / labels ————— */
.eyb{font-family:var(--m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--vert);margin:0 0 18px;display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.eyb::before{content:"";width:22px;height:1px;background:var(--vert);flex:none;margin-top:9px}
.eyb.n{color:var(--gris)}.eyb.n::before{background:var(--trait-2)}

/* ————— aperçu ————— */
.preview{background:var(--surface-2);border-bottom:1px solid var(--trait);font-family:var(--m);font-size:11px;color:var(--gris);text-align:center;padding:7px var(--gut);letter-spacing:.03em}
.preview b{color:var(--encre-2);font-weight:500}

/* ————— header ————— */
header.site{position:sticky;top:0;z-index:60;background:var(--papier);border-bottom:1px solid var(--trait)}
@supports (backdrop-filter:blur(1px)){header.site{background:color-mix(in srgb,var(--papier) 86%,transparent);backdrop-filter:saturate(1.7) blur(14px)}}
.bar{display:flex;align-items:center;gap:18px;padding-block:13px;max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand .mark{width:44px;height:44px;display:block;flex:none}
.brand b{font-family:var(--d);font-weight:700;font-size:18px;font-stretch:112%;letter-spacing:.045em;color:var(--navy);display:block;line-height:1}
.brand span{font-family:var(--m);font-size:9.5px;letter-spacing:.26em;color:var(--vert);text-transform:uppercase;display:block;margin-top:3px}
nav.main{margin-left:auto;display:none;gap:2px;align-items:center}
@media(min-width:1040px){nav.main{display:flex}}
nav.main .nl,nav.main .ndb{position:relative;font-family:var(--d);font-weight:500;font-size:14.5px;color:var(--encre-2);text-decoration:none;padding:10px 13px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.2}
nav.main .cv{font-size:9px;opacity:.55;transform:translateY(1px)}
nav.main .nl::after,nav.main .ndb::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--vert);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
nav.main .nl:hover,nav.main .ndb:hover{color:var(--navy)}
nav.main .nl:hover::after,nav.main .ndb:hover::after,nav.main .on::after,nav.main .nd.on .ndb::after{transform:scaleX(1)}
nav.main .on,nav.main .nd.on .ndb{color:var(--navy);font-weight:600}
.nd{position:relative}
.ndp{position:absolute;top:100%;left:-10px;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nd:hover .ndp,.nd:focus-within .ndp{opacity:1;visibility:visible;transform:translateY(0)}
.ndp-in{background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre-h);display:grid;grid-template-columns:300px 232px;min-width:532px}
.ndp-main{padding:12px}
.ndp-main .mi{display:block;padding:10px 12px;text-decoration:none;border-radius:var(--r)}
.ndp-main .mi:hover{background:var(--surface-2)}
.ndp-main .mi b{display:block;font-family:var(--d);font-weight:600;font-size:15px;color:var(--navy);margin-bottom:2px}
.ndp-main .mi span{display:block;font-size:13px;color:var(--gris);line-height:1.4}
.ndp-sub{padding:18px 16px;background:var(--surface-2);border-left:1px solid var(--trait)}
.ndp-t{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:11px}
.ndp-sub a{display:block;font-size:13.8px;color:var(--encre-2);text-decoration:none;padding:5px 0;line-height:1.35}
.ndp-sub a:hover{color:var(--vert)}
.hdr-cta{display:none;margin-left:10px}
@media(min-width:560px){.bar .hdr-cta{display:inline-flex}}
.burger{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--trait-2);border-radius:var(--r);padding:9px 13px;font-family:var(--d);font-weight:600;font-size:13.5px;letter-spacing:.04em;color:var(--navy);cursor:pointer}
.burger i{display:block;width:15px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
.burger i::after{content:"";position:absolute;top:3px;left:0;right:0;height:1.5px;background:currentColor}
@media(min-width:1040px){.burger{display:none}}
#drawer{display:none;border-top:1px solid var(--trait);background:var(--surface);padding:6px var(--gut) 22px;max-height:76vh;overflow:auto}
#drawer.open{display:block}
@media(min-width:1040px){#drawer{display:none!important}}
#drawer .grp{font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:18px 0 4px}
#drawer a{display:block;font-family:var(--d);font-weight:500;font-size:16.5px;color:var(--encre);text-decoration:none;padding:9px 0;border-bottom:1px solid var(--trait)}
#drawer a.sm{font-family:var(--t);font-weight:400;font-size:14.5px;color:var(--encre-2);padding:6px 0 6px 14px;border-bottom:none}

/* ————— boutons ————— */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--d);font-weight:600;font-size:15px;letter-spacing:.012em;padding:13px 22px;border:1.5px solid transparent;border-radius:var(--r);text-decoration:none;cursor:pointer;line-height:1.2;transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--navy);color:var(--papier);border-color:var(--navy);box-shadow:0 8px 22px -14px var(--navy)}
.btn-v{background:var(--vert);color:#fff;border-color:var(--vert);box-shadow:0 8px 22px -12px var(--vert)}
.btn-v:hover{box-shadow:0 12px 30px -12px var(--vert)}
.btn-g{background:transparent;color:var(--navy);border-color:var(--trait-2)}
.btn-g:hover{border-color:var(--navy);background:var(--surface)}
.btn-u{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.btn-w{background:transparent;color:var(--band-txt);border-color:var(--band-tr)}
.btn-w:hover{border-color:var(--band-txt)}
.btn-s{padding:9px 16px;font-size:13.5px}
.btn .ar{font-family:var(--m);font-size:.9em;opacity:.75}
:root[data-theme="dark"] .btn-v,:root[data-theme="dark"] .btn-u{color:#07131C}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-v,:root:not([data-theme="light"]) .btn-u{color:#07131C}}
.btns{display:flex;flex-wrap:wrap;gap:13px;margin:26px 0}

/* ————— hero ————— */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--trait)}
.hero-in{display:grid;gap:34px;padding-block:clamp(40px,6vw,72px) clamp(34px,4.5vw,52px);align-items:center}
@media(min-width:980px){.hero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px}}
.hero h1{font-family:var(--d);font-weight:700;font-stretch:108%;font-size:clamp(2.35rem,5.6vw,4.05rem);line-height:.99;letter-spacing:-.028em;margin:0 0 22px;color:var(--navy);max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--vert);position:relative;white-space:nowrap}
.hero p.lede{font-size:clamp(1.08rem,1.9vw,1.3rem);color:var(--encre-2);max-width:48ch;margin:0}
.hero-fig{position:relative}
.hero-fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig-cap{font-family:var(--m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris-l);margin-top:12px;display:flex;flex-wrap:wrap;gap:5px 13px;justify-content:flex-start}
.fig-cap i{font-style:normal;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fig-cap i::before{content:"";width:14px;height:2.5px;background:currentColor;border-radius:2px}
.c-bleu{color:var(--bleu)}.c-rouge{color:var(--rouge)}.c-navy{color:var(--navy)}.c-vert{color:var(--vert)}
.svg-lab{display:none}
@media(min-width:780px){.svg-lab{display:block}}
.f input:focus,.f select:focus,.f textarea:focus{outline:none}

@media (prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);animation:dr 1.5s cubic-bezier(.6,.05,.25,1) forwards}
  .d1{animation-delay:.15s}.d2{animation-delay:.4s}.d3{animation-delay:.62s}.d4{animation-delay:.84s}
  @keyframes dr{to{stroke-dashoffset:0}}
  .pop{opacity:0;animation:pp .5s ease forwards}
  .p1{animation-delay:1.1s}.p2{animation-delay:1.22s}.p3{animation-delay:1.34s}.p4{animation-delay:1.46s}.p0{animation-delay:.9s}
  @keyframes pp{to{opacity:1}}
  .flow{animation:fl 2.6s linear infinite}
  @keyframes fl{to{stroke-dashoffset:-28}}
}

/* ————— bandes ————— */
.band{background:var(--band);color:var(--band-txt);border-block:1px solid var(--trait)}
.band h2,.band h3{color:#fff}
:root[data-theme="dark"] .band h2,:root[data-theme="dark"] .band h3{color:var(--band-txt)}
.band p{color:rgba(255,255,255,.76)}
:root[data-theme="dark"] .band p{color:var(--encre-2)}
.band .eyb{color:var(--vert-l)}.band .eyb::before{background:var(--vert-l)}
.band a{color:#fff}
.sec{padding-block:clamp(46px,6vw,78px)}
.sec-t{padding-top:clamp(46px,6vw,78px)}

/* ————— titres ————— */
h1.pg{font-family:var(--d);font-weight:700;font-stretch:106%;font-size:clamp(1.95rem,4.4vw,3.05rem);line-height:1.03;letter-spacing:-.024em;margin:0 0 16px;color:var(--navy);max-width:19ch;text-wrap:balance}
h2{font-family:var(--d);font-weight:700;font-stretch:104%;font-size:clamp(1.38rem,2.7vw,1.85rem);line-height:1.12;letter-spacing:-.018em;margin:46px 0 14px;color:var(--navy);text-wrap:balance;max-width:24ch}
h2:first-child{margin-top:0}
h3{font-family:var(--d);font-weight:600;font-size:1.14rem;letter-spacing:-.006em;margin:30px 0 9px;color:var(--encre)}
p{margin:0 0 16px;max-width:64ch}
ul,ol{max-width:64ch;padding-left:22px;margin:0 0 18px}
li{margin-bottom:8px}
li::marker{color:var(--vert)}
strong{font-weight:600;color:var(--encre)}
em{font-style:italic}

/* ————— page head ————— */
.page-hd{border-bottom:1px solid var(--trait);padding-block:clamp(34px,5vw,56px) clamp(28px,4vw,40px);position:relative}
.crumb{font-family:var(--m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);margin:0 0 16px}
.crumb a{color:var(--gris);text-decoration:none}
.crumb a:hover{color:var(--vert)}
p.chapo{font-size:clamp(1.06rem,1.7vw,1.19rem);color:var(--encre-2);max-width:60ch;margin:0}
.body{padding-block:clamp(34px,4.5vw,52px) clamp(48px,6vw,76px)}
.cols{display:grid;gap:38px}
@media(min-width:980px){.cols{grid-template-columns:minmax(0,1fr) 296px;gap:60px;align-items:start}}

/* ————— aside ————— */
aside{position:sticky;top:88px}
@media(max-width:979px){aside{position:static}}
aside .box{background:var(--surface);border:1px solid var(--trait);padding:21px;margin-bottom:16px;box-shadow:var(--ombre)}
aside .box.n{background:var(--band);border-color:var(--band)}
aside .box.n h4{color:var(--vert-l)}
aside .box.n p{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] aside .box.n p{color:var(--encre-2)}
aside h4{font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 12px}
aside p{font-size:14.6px;margin:0 0 12px;color:var(--encre-2);max-width:none}
aside ul{font-size:14.6px;margin:0;padding-left:0;max-width:none;list-style:none}
aside li{margin-bottom:8px;color:var(--encre-2);padding-left:17px;position:relative}
aside li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1.5px;background:var(--vert)}
aside .tel{font-family:var(--d);font-weight:700;font-size:1.42rem;letter-spacing:-.01em;color:#fff;text-decoration:none;display:block;margin-bottom:6px}
:root[data-theme="dark"] aside .tel{color:var(--encre)}

/* ————— tableaux ————— */
.tw{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--trait);background:var(--surface);box-shadow:var(--ombre)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
thead th{font-family:var(--m);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);text-align:left;padding:13px 16px;border-bottom:1px solid var(--trait-2);background:var(--surface-2)}
td{padding:13px 16px;border-bottom:1px solid var(--trait);vertical-align:top;color:var(--encre-2);line-height:1.5}
tbody tr:last-child td{border-bottom:none}
td.k{color:var(--encre);font-weight:600}
td.n,th.n{font-family:var(--m);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px;color:var(--navy);font-weight:500}
:root[data-theme="dark"] td.n{color:var(--navy-d)}

/* ————— callout ————— */
.call{position:relative;background:var(--surface);border:1px solid var(--trait);border-left:3px solid var(--vert);padding:22px 24px;margin:28px 0;max-width:68ch;box-shadow:var(--ombre)}
.call.w{border-left-color:var(--rouge)}
.call .t{font-family:var(--m);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vert);display:block;margin-bottom:10px}
.call.w .t{color:var(--rouge)}
.call p:last-child,.call ul:last-child{margin-bottom:0}

/* ————— steps ————— */
.steps{list-style:none;padding:0;margin:26px 0;max-width:68ch;position:relative}
.steps::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:1px;background:var(--trait)}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:20px;padding-block:16px;margin:0;position:relative}
.steps .no{font-family:var(--m);font-size:10.5px;font-weight:500;color:var(--vert);background:var(--papier);border:1px solid var(--trait);border-radius:50%;width:31px;height:31px;display:flex;align-items:center;justify-content:center;margin-top:2px;z-index:1}
.steps b{display:block;font-family:var(--d);font-size:1.06rem;font-weight:600;color:var(--encre);margin-bottom:4px}
.steps span.d{font-size:15.5px;color:var(--encre-2);display:block}

/* ————— déroulé de chantier (bloc mis en avant) ————— */
.proc{background:var(--surface);border:1px solid var(--trait);border-top:3px solid var(--vert);box-shadow:var(--ombre-h);margin:34px 0 32px;--pp:clamp(20px,4vw,34px)}
.proc-hd{padding:24px var(--pp) 0}
.proc-hd .eyb{margin-bottom:12px}
.proc-hd h2{margin-top:0;margin-bottom:8px}
.proc-hd>p{margin:0;max-width:60ch;color:var(--encre-2)}
.proc-t{display:grid;gap:1px;background:var(--trait);border-top:1px solid var(--trait);margin:22px calc(var(--pp) * -1) 0}
@media(min-width:620px){.proc-t{grid-template-columns:repeat(3,1fr)}}
.proc-t div{background:var(--surface-2);padding:13px var(--pp)}
.proc-t b{display:block;font-family:var(--d);font-weight:700;font-size:1.1rem;letter-spacing:-.012em;color:var(--navy);line-height:1.2}
.proc-t span{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:5px}
.proc .steps{margin:4px 0 0;padding:0 var(--pp) 24px;max-width:none}
.proc .steps::before{left:calc(var(--pp) + 15px)}
.proc .steps .no{background:var(--surface);border-color:var(--trait-2)}
.proc .steps li{padding-block:15px}
.proc .steps li:first-child{padding-top:20px}

/* ————— champ à fournir avant mise en ligne ————— */
.af{background:#FFE9A8;color:#6B4A00;font-family:var(--m);font-size:12px;font-weight:500;padding:2px 7px;border:1px dashed #C8921F;border-radius:2px;white-space:nowrap}
:root[data-theme="dark"] .af{background:#4A3A08;color:#FFD97A;border-color:#8A6A1A}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .af{background:#4A3A08;color:#FFD97A;border-color:#8A6A1A}}

/* ————— cards ————— */
.grid{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);margin:30px 0}
@media(min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid.g3{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--surface);padding:26px 24px 24px;display:flex;flex-direction:column;text-decoration:none;transition:background .2s ease}
.card:hover{background:var(--surface-2)}
.card::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--vert);transition:width .3s cubic-bezier(.5,0,.2,1)}
.card:hover::before{width:100%}
.card.n::before{background:var(--navy)}.card.r::before{background:var(--rouge)}
.card .lab{font-family:var(--m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:14px;display:block}
.card h3{font-family:var(--d);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;margin:0 0 9px;color:var(--navy)}
.card p{font-size:14.8px;color:var(--encre-2);margin:0 0 16px;max-width:none;flex:1;line-height:1.55}
.card .go{font-family:var(--m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vert)}
.band .grid{background:var(--band-tr);border-color:var(--band-tr)}
.band .card{background:transparent}
.band .card:hover{background:rgba(255,255,255,.04)}
.band .card h3{color:#fff}
:root[data-theme="dark"] .band .card h3{color:var(--encre)}
.band .card p{color:rgba(255,255,255,.7)}
:root[data-theme="dark"] .band .card p{color:var(--encre-2)}
.band .card .lab{color:rgba(255,255,255,.45)}

/* ————— avant / après ————— */
.ba{margin:28px 0 30px}
.ba-g{display:grid;gap:14px;align-items:start}
@media(min-width:640px){.ba-g{grid-template-columns:1fr 1fr;gap:18px}}
.ba figure{margin:0;position:relative;background:var(--surface-2);border:1px solid var(--trait);overflow:hidden;display:flex;flex-direction:column}
.ba img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--surface-2)}
.ba .tagp{position:absolute;top:0;left:0;font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--navy);padding:6px 12px}
.ba .tagp.ap{background:var(--vert)}
:root[data-theme="dark"] .ba .tagp{color:#07131C}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ba .tagp{color:#07131C}}
.ba figcaption{font-family:var(--m);font-size:11px;letter-spacing:.06em;color:var(--gris);padding:9px 12px;border-top:1px solid var(--trait);background:var(--surface)}
.ba-m{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px}
.ba-m b{color:var(--vert);font-weight:500}

/* ————— vignettes réalisations ————— */
.rz{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);margin:30px 0}
@media(min-width:700px){.rz{grid-template-columns:repeat(3,1fr)}}
.rz a{background:var(--surface);text-decoration:none;display:block;transition:background .2s ease}
.rz a:hover{background:var(--surface-2)}
.rz img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center}
.rz .z{padding:18px 20px 20px}
.rz .lab{font-family:var(--m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:9px}
.rz h3{font-family:var(--d);font-weight:600;font-size:1.08rem;margin:0 0 7px;color:var(--navy)}
.rz p{font-size:14.4px;color:var(--encre-2);margin:0;max-width:none;line-height:1.5}

/* ————— avis clients ————— */
.avis{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);margin:28px 0}
@media(min-width:820px){.avis.a2{grid-template-columns:1fr 1fr}}
.avis figure{margin:0;background:var(--surface);padding:24px 24px 20px;display:flex;flex-direction:column}
.avis .st{color:var(--vert);font-size:13px;letter-spacing:.22em;margin-bottom:12px;display:block}
.avis blockquote{margin:0 0 16px;font-size:15.6px;line-height:1.6;color:var(--encre-2);flex:1}
.avis blockquote p{margin:0 0 11px;max-width:none}
.avis blockquote p:last-child{margin-bottom:0}
.avis figcaption{font-family:var(--m);font-size:11px;letter-spacing:.08em;color:var(--gris);border-top:1px solid var(--trait);padding-top:12px}
.avis figcaption a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--trait-2)}
.avis figcaption a:hover{color:var(--vert);border-color:var(--vert)}
.band .avis{background:var(--band-tr);border-color:var(--band-tr)}
.band .avis figure{background:transparent}
.band .avis blockquote{color:rgba(255,255,255,.82)}
:root[data-theme="dark"] .band .avis blockquote{color:var(--encre-2)}
.band .avis figcaption{border-color:var(--band-tr);color:rgba(255,255,255,.5)}
.band .avis figcaption a{color:rgba(255,255,255,.7);border-color:var(--band-tr)}
.band .avis .st{color:var(--vert-l)}

/* ————— citation isolée ————— */
.pull{border-left:3px solid var(--vert);padding:6px 0 6px 22px;margin:28px 0;max-width:64ch}
.pull p{font-size:1.08rem;line-height:1.55;color:var(--encre);font-style:italic;margin:0 0 10px}
.pull cite{font-family:var(--m);font-size:11px;letter-spacing:.08em;color:var(--gris);font-style:normal}
.pull cite a{color:var(--gris)}

/* ————— faq ————— */
.faq{margin:24px 0;max-width:68ch}
.faq dt{font-family:var(--d);font-weight:600;font-size:1.06rem;color:var(--encre);margin-top:24px;padding-top:18px;border-top:1px solid var(--trait)}
.faq dt:first-of-type{border-top:none;padding-top:0;margin-top:0}
.faq dd{margin:7px 0 0;color:var(--encre-2);max-width:64ch}

/* ————— zone ————— */
.zone{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px;padding:0;list-style:none;max-width:none}
.zone li{font-family:var(--m);font-size:11.5px;letter-spacing:.04em;color:var(--encre-2);background:var(--surface);border:1px solid var(--trait);padding:5px 11px;margin:0}
.band .zone li{background:transparent;border-color:var(--band-tr);color:rgba(255,255,255,.8)}
:root[data-theme="dark"] .band .zone li{color:var(--encre-2)}

/* ————— formulaire ————— */
form.devis{background:var(--surface);border:1px solid var(--trait);padding:28px;box-shadow:var(--ombre);max-width:660px}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.f label{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.f input,.f select,.f textarea{font-family:var(--t);font-size:16px;padding:12px 13px;border:1px solid var(--trait-2);border-radius:var(--r);background:var(--papier);color:var(--encre)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--vert);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--vert) 16%,transparent)}
.f textarea{min-height:120px;resize:vertical}
.f2{display:grid;gap:0 18px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.hint{font-size:13.8px;color:var(--gris);margin-top:-8px}

/* ————— footer ————— */
footer.site{background:var(--band);color:var(--band-txt);padding-block:56px 26px;margin-top:0}
footer.site .fgrid{display:grid;gap:34px}
@media(min-width:800px){footer.site .fgrid{grid-template-columns:1.5fr 1fr 1fr}}
footer.site h5{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--vert-l);margin:0 0 15px}
footer.site p,footer.site li{font-size:14.8px;color:rgba(255,255,255,.72);max-width:46ch}
:root[data-theme="dark"] footer.site p,:root[data-theme="dark"] footer.site li{color:var(--encre-2)}
footer.site ul{list-style:none;padding:0;margin:0;max-width:none}
footer.site li{margin-bottom:9px}
footer.site a{color:rgba(255,255,255,.86);text-decoration:none}
:root[data-theme="dark"] footer.site a{color:var(--encre)}
footer.site a:hover{color:var(--vert-l)}
.fbrand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.fbrand .mark{width:48px;height:48px;display:block;flex:none}
.fbrand b{font-family:var(--d);font-weight:700;font-size:19px;font-stretch:112%;letter-spacing:.045em;color:#fff;display:block;line-height:1}
:root[data-theme="dark"] .fbrand b{color:var(--encre)}
.fbrand span{font-family:var(--m);font-size:9.5px;letter-spacing:.26em;color:var(--vert-l);text-transform:uppercase;display:block;margin-top:3px}
.legal{border-top:1px solid var(--band-tr);margin-top:38px;padding-top:18px;font-family:var(--m);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.45);display:flex;flex-wrap:wrap;gap:8px 24px}
:root[data-theme="dark"] .legal{color:var(--gris)}

:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}