:root{
  --ground:#E9EDEF; --surface:#FFFFFF; --surface-2:#F4F7F8; --panneau:#0C1A1F;
  --ink:#0A1417; --ink-2:#455C62; --ink-3:#7A9099; --line:#D2DADD; --line-fort:#B6C3C8;
  --glacier:#0E7F97; --glacier-fort:#09647A; --glacier-voile:#DCEFF4;
  --ember:#C8440D; --ember-clair:#F0913E; --ember-voile:#FBE8DA;
  --laiton:#8C7118; --ok:#0D7A55; --ok-voile:#DDF1E9;
  --r:10px; --r-l:18px;
  --ombre:0 1px 1px rgba(10,20,23,.04), 0 10px 26px rgba(10,20,23,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080F12; --surface:#101B1F; --surface-2:#16242A; --panneau:#060D10;
    --ink:#E6EFF1; --ink-2:#9AB0B7; --ink-3:#70878F; --line:#22323A; --line-fort:#2F444D;
    --glacier:#3FB8D2; --glacier-fort:#7FD8EA; --glacier-voile:#0E2A33;
    --ember:#F2762E; --ember-clair:#F7A35F; --ember-voile:#2C1509;
    --laiton:#CBA639; --ok:#3EBE91; --ok-voile:#0C2A22;
    --ombre:0 1px 1px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#080F12; --surface:#101B1F; --surface-2:#16242A; --panneau:#060D10;
  --ink:#E6EFF1; --ink-2:#9AB0B7; --ink-3:#70878F; --line:#22323A; --line-fort:#2F444D;
  --glacier:#3FB8D2; --glacier-fort:#7FD8EA; --glacier-voile:#0E2A33;
  --ember:#F2762E; --ember-clair:#F7A35F; --ember-voile:#2C1509;
  --laiton:#CBA639; --ok:#3EBE91; --ok-voile:#0C2A22;
  --ombre:0 1px 1px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
/* Sans cette ligne, une règle d'affichage plus précise l'emporte sur l'attribut
   hidden et fait réapparaître des blocs qui doivent rester cachés. */
[hidden]{display:none !important}
body{margin:0; background:var(--ground); color:var(--ink); font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo","Archivo Black",Impact,sans-serif; font-variation-settings:"wdth" 110; letter-spacing:-.02em; text-wrap:balance; margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
.zone{width:100%; max-width:1180px; margin-inline:auto; padding-inline:18px}
a{color:inherit}
:focus-visible{outline:2px solid var(--glacier); outline-offset:2px; border-radius:4px}
button{font:inherit}

/* entete */
.annonce{background:var(--panneau); color:#CFE4EA; font-size:12.5px}
.annonce .zone{display:flex; gap:8px 24px; justify-content:space-between; align-items:center; padding-block:9px; flex-wrap:wrap}
.annonce b{color:#fff}
header.chapeau{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.chapeau .zone{display:flex; align-items:center; gap:14px; height:66px}
.marque{display:flex; align-items:center; gap:11px; text-decoration:none; cursor:pointer}
.sceau{width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,var(--glacier),var(--glacier-fort)); display:grid; place-items:center; color:#fff; font-family:"Archivo"; font-weight:800; font-size:15px}
.marque-nom{font-family:"Archivo"; font-weight:800; font-size:16.5px; line-height:1}
.marque-nom span{display:block; font-family:"IBM Plex Mono"; font-size:9.5px; font-weight:500; color:var(--ink-3); margin-top:4px; letter-spacing:.14em}
nav.liens{display:none; margin-left:auto; gap:22px; font-size:14.5px; font-weight:500}
nav.liens a{text-decoration:none; color:var(--ink-2); padding-block:6px; border-bottom:2px solid transparent; cursor:pointer}
nav.liens a:hover{color:var(--ink)}
nav.liens a.actif{color:var(--ink); border-color:var(--glacier)}
.outils{margin-left:auto; display:flex; align-items:center; gap:8px}
nav.liens ~ .outils{margin-left:18px}
@media(min-width:900px){nav.liens{display:flex}}
.burger{display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid var(--line-fort); background:var(--surface); border-radius:var(--r); cursor:pointer; color:var(--ink)}
.burger:hover{border-color:var(--glacier)}
.menu{display:none; border-top:1px solid var(--line); background:var(--surface); box-shadow:var(--ombre)}
.menu.ouvert{display:block}
.menu a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; text-decoration:none; border-bottom:1px solid var(--line); font-weight:600; cursor:pointer}
.menu a:hover{background:var(--surface-2)}
.menu a .flottant{font-family:"IBM Plex Mono"; font-size:12.5px; color:var(--ink-3); font-weight:500}
.menu .groupe{padding:14px 18px 6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
@media(min-width:900px){.burger{display:none} .menu{display:none !important}}
.bouton{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-fort); background:var(--surface); color:var(--ink); font-weight:600; font-size:14.5px; padding:10px 16px; border-radius:var(--r); cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, transform .1s}
.bouton:hover{border-color:var(--glacier)}
.bouton:active{transform:translateY(1px)}
.bouton.fort{background:var(--glacier); border-color:var(--glacier); color:#fff}
.bouton.fort:hover{background:var(--glacier-fort); border-color:var(--glacier-fort)}
.bouton.braise{background:var(--ember); border-color:var(--ember); color:#fff}
.bouton.fantome{background:transparent; border-color:transparent; color:var(--ink-2); padding:10px}
.bouton.grand{padding:14px 22px; font-size:16px}
.bouton[disabled]{opacity:.45; cursor:not-allowed}
.compte{min-width:21px; height:21px; padding-inline:6px; border-radius:999px; background:var(--ember); color:#fff; font-size:12px; font-weight:700; display:inline-grid; place-items:center; font-family:"IBM Plex Mono"}

/* ecrans */
.ecran{display:none}
.ecran.actif{display:block}
@keyframes apparait{from{opacity:.4} to{opacity:1}}
section{padding-block:42px}
.fil{font-size:13px; color:var(--ink-3); padding-block:16px 0}
.fil a{cursor:pointer; text-decoration:none}
.fil a:hover{text-decoration:underline}
.tete{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.tete h2{font-size:clamp(23px,4.2vw,32px); font-weight:800}
.tete p{margin:6px 0 0; color:var(--ink-2); max-width:58ch}

/* accueil */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:-10%; background:
  radial-gradient(60% 70% at 78% 10%, color-mix(in srgb, var(--ember-clair) calc(var(--t,.4)*36%), transparent), transparent 68%),
  radial-gradient(58% 66% at 10% 90%, color-mix(in srgb, var(--glacier) calc((1 - var(--t,.4))*32%), transparent), transparent 66%);
  transition:background .45s ease; pointer-events:none}
.hero .zone{position:relative; display:grid; gap:26px; padding-block:34px 40px}
@media(min-width:940px){.hero .zone{grid-template-columns:1.04fr .96fr; gap:44px; padding-block:54px; align-items:center}}
.oeil{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ember); background:var(--ember-voile); border-radius:999px; padding:6px 13px}
h1{font-size:clamp(32px,7vw,56px); font-weight:800; line-height:1.03; margin:16px 0 0}
h1 em{font-style:normal; color:var(--glacier); display:block}
.chapo{color:var(--ink-2); font-size:17px; max-width:48ch; margin:16px 0 0; text-align:justify; hyphens:auto}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.faits{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.fait b{display:block; font-family:"IBM Plex Mono"; font-size:18px; font-weight:600}
.fait span{font-size:12.5px; color:var(--ink-3)}

.pupitre{background:var(--panneau); color:#E8F3F6; border-radius:var(--r-l); padding:20px; box-shadow:var(--ombre); border:1px solid rgba(255,255,255,.07)}
.pupitre h2{font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8FB6C0; margin-bottom:14px}
.lecture{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.lecture .chiffre{font-family:"IBM Plex Mono"; font-weight:600; font-size:clamp(42px,10vw,60px); line-height:.92; color:#fff}
.lecture .unite{font-size:12px; color:#8FB6C0; letter-spacing:.16em; text-transform:uppercase; padding-bottom:8px}
.reglette{margin:18px 0 4px}
.reglette label{display:flex; justify-content:space-between; font-size:13px; color:#9CC0C9; margin-bottom:10px}
.reglette label b{font-family:"IBM Plex Mono"; color:#fff; font-size:16px}
input[type=range]{width:100%; -webkit-appearance:none; appearance:none; background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:10px; border-radius:999px; background:linear-gradient(90deg,#2C7F92,#3FB8D2 32%,#F0913E 72%,#C8440D)}
input[type=range]::-moz-range-track{height:10px; border-radius:999px; background:linear-gradient(90deg,#2C7F92,#3FB8D2 32%,#F0913E 72%,#C8440D)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; margin-top:-8px; border-radius:50%; background:#fff; border:4px solid #0C1A1F; box-shadow:0 0 0 2px #fff; cursor:grab}
input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fff; border:4px solid #0C1A1F; box-shadow:0 0 0 2px #fff}
.graduations{display:flex; justify-content:space-between; font-family:"IBM Plex Mono"; font-size:11px; color:#7A9AA3; margin-top:8px}
.options{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.bascule{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#CFE4EA; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:8px 12px; border-radius:999px; cursor:pointer}
.bascule input{accent-color:#3FB8D2; width:15px; height:15px}
.bascule:has(input:checked){border-color:#3FB8D2; background:rgba(63,184,210,.14)}
.verdict{margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.verdict p{margin:0; font-size:13.5px; color:#9CC0C9; flex:1 1 180px}
.verdict p b{color:#fff}

.trois{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:760px){.trois{grid-template-columns:repeat(3,1fr)}}
.porte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:20px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:6px; transition:border-color .2s, transform .2s}
.porte:hover{border-color:var(--glacier); transform:translateY(-2px)}
.porte b.btu{font-family:"IBM Plex Mono"; font-size:26px; font-weight:600; letter-spacing:-.02em}
.porte span.piece{font-size:14px; color:var(--ink-2)}
.porte span.des{font-size:13px; color:var(--ink-3); margin-top:6px}

.avis{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:800px){.avis{grid-template-columns:repeat(3,1fr)}}
.avis blockquote{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; font-size:14.5px; color:var(--ink-2)}
.avis .etoiles{color:#E8A33D; font-size:14px}
.avis cite{display:block; margin-top:10px; font-style:normal; font-size:13px; color:var(--ink-3)}

/* catalogue */
.catalogue{display:grid; gap:20px; align-items:start}
@media(min-width:980px){.catalogue{grid-template-columns:258px 1fr; gap:28px}}
.filtres{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:16px; position:sticky; top:82px}
.filtres h3{font-size:14px; margin-bottom:10px}
.bloc-filtre{padding:12px 0; border-top:1px solid var(--line)}
.bloc-filtre:first-of-type{border-top:0; padding-top:0}
.bloc-filtre p{margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.case{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:14px; cursor:pointer}
.case input{width:16px; height:16px; accent-color:var(--glacier)}
.case .nb{margin-left:auto; color:var(--ink-3); font-size:12px; font-family:"IBM Plex Mono"}
.recherche{position:relative; margin-bottom:14px}
.recherche input{width:100%; padding:11px 12px 11px 34px; border:1px solid var(--line-fort); border-radius:var(--r); background:var(--surface); color:var(--ink); font:inherit; font-size:15px}
.recherche svg{position:absolute; left:11px; top:12px; color:var(--ink-3)}
.barre{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.barre .compteur{font-size:13.5px; color:var(--ink-3); margin-right:auto; font-family:"IBM Plex Mono"}
.barre select{padding:9px 11px; border:1px solid var(--line-fort); border-radius:var(--r); background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
.replier{display:block; width:100%}
@media(min-width:980px){.replier{display:none}}
.filtres.cache{display:none}
@media(min-width:980px){.filtres.cache{display:block}}

.grille{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:620px){.grille{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grille{grid-template-columns:repeat(3,1fr)}}
.article{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s}
.article:hover{transform:translateY(-3px); box-shadow:var(--ombre)}
.article.conseille{border-color:var(--glacier); box-shadow:0 0 0 1px var(--glacier)}
.visuel{position:relative; aspect-ratio:5/3; background:linear-gradient(168deg,var(--surface-2), color-mix(in srgb, var(--glacier-voile) 70%, var(--surface-2))); border:0; padding:0; width:100%; cursor:pointer}
.visuel svg{width:100%; height:100%; display:block}
.drapeau{position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--glacier); color:#fff}
.drapeau.chaud{background:var(--ember)}
.drapeau.calme{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-fort)}
.corps{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1}
.reference{font-family:"IBM Plex Mono"; font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase}
.article h3{font-size:18.5px; font-weight:800}
.article h3 button{all:unset; cursor:pointer}
.btu{font-family:"IBM Plex Mono"; font-size:13px; color:var(--ink-2)}
.btu strong{font-size:21px; color:var(--ink); font-weight:600}
.specs{display:grid; grid-template-columns:1fr; gap:4px; font-size:13px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:11px}
.specs div{display:flex; justify-content:space-between; gap:8px}
.specs span{color:var(--ink-3)}
.specs b{font-family:"IBM Plex Mono"; font-weight:600}
.pied-article{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.prix{font-family:"IBM Plex Mono"; font-size:21px; font-weight:600; letter-spacing:-.03em}
.prix small{display:block; font-family:"Public Sans"; font-size:11.5px; color:var(--ink-3); font-weight:400; letter-spacing:0}
.vide{grid-column:1/-1; border:1px dashed var(--line-fort); border-radius:var(--r-l); padding:34px; text-align:center; color:var(--ink-2)}

/* fiche */
.fiche{display:grid; gap:26px; padding-bottom:30px}
@media(min-width:900px){.fiche{grid-template-columns:1.02fr .98fr; gap:40px}}
.fiche .visuel{border:1px solid var(--line); border-radius:var(--r-l); cursor:default}
.fiche h1{font-size:clamp(27px,5vw,40px); margin:8px 0 0}
.note-ligne{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); margin-top:10px}
.note-ligne .etoiles{color:#E8A33D}
.resume{color:var(--ink-2); margin:14px 0 0}
.atouts{margin:16px 0 0; padding-left:18px; color:var(--ink-2); font-size:15px}
.atouts li{margin-bottom:6px}
.table-specs{width:100%; border-collapse:collapse; font-size:14px; margin-top:20px}
.table-specs th,.table-specs td{text-align:left; padding:10px 2px; border-bottom:1px solid var(--line)}
.table-specs th{font-weight:500; color:var(--ink-3); width:52%}
.table-specs td{font-family:"IBM Plex Mono"}
.achat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; margin-top:20px; display:grid; gap:12px}
.pose-option{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line-fort); border-radius:var(--r); padding:12px; cursor:pointer}
.pose-option input{margin-top:3px; width:17px; height:17px; accent-color:var(--glacier)}
.pose-option b{display:block; font-size:14.5px}
.pose-option small{color:var(--ink-3)}
.pose-option:has(input:checked){border-color:var(--glacier); background:var(--glacier-voile)}
.ligne-achat{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.quantite{display:inline-flex; align-items:center; border:1px solid var(--line-fort); border-radius:var(--r); overflow:hidden}
.quantite button{width:34px; height:36px; border:0; background:var(--surface); color:var(--ink); font-size:17px; cursor:pointer}
.quantite button:hover{background:var(--surface-2)}
.quantite span{min-width:34px; text-align:center; font-family:"IBM Plex Mono"}

/* panier */
.panier{display:grid; gap:20px; align-items:start}
@media(min-width:900px){.panier{grid-template-columns:1fr 330px; gap:28px}}
.ligne{display:grid; grid-template-columns:96px 1fr; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:14px; margin-bottom:12px}
.ligne .mini{border-radius:var(--r); overflow:hidden; background:var(--surface-2); border:1px solid var(--line); align-self:start}
.ligne h3{font-size:16px}
.ligne .meta{font-size:13px; color:var(--ink-3)}
.ligne-bas{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px}
.supprimer{background:none; border:0; color:var(--ember); font-size:13px; cursor:pointer; padding:4px}
.recap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; position:sticky; top:82px; display:grid; gap:8px}
.recap h3{font-size:16px; margin-bottom:4px}
.recap-ligne{display:flex; justify-content:space-between; font-size:14.5px; color:var(--ink-2)}
.recap-ligne b{font-family:"IBM Plex Mono"; color:var(--ink)}
.recap-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:12px; margin-top:6px; font-weight:700}
.recap-total b{font-family:"IBM Plex Mono"; font-size:24px}

/* commande */
.commande{display:grid; gap:20px; align-items:start}
@media(min-width:900px){.commande{grid-template-columns:1fr 330px; gap:28px}}
.carte-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:20px; margin-bottom:14px}
.carte-form h3{font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.carte-form h3 b{width:22px; height:22px; border-radius:50%; background:var(--glacier); color:#fff; display:grid; place-items:center; font-size:12px; font-family:"IBM Plex Mono"}
.formulaire{display:grid; gap:13px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.champ label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--ink-2)}
.champ input,.champ select{width:100%; font:inherit; font-size:15px; padding:11px 12px; border:1px solid var(--line-fort); border-radius:var(--r); background:var(--surface); color:var(--ink)}
.champ input.faux{border-color:var(--ember)}
.mode{display:flex; align-items:center; gap:10px; border:1px solid var(--line-fort); border-radius:var(--r); padding:12px; cursor:pointer; font-size:14.5px; margin-bottom:8px}
.mode input{accent-color:var(--glacier); width:16px; height:16px}
.mode:has(input:checked){border-color:var(--glacier); background:var(--glacier-voile)}
.mode .detail{margin-left:auto; color:var(--ink-3); font-size:12.5px; font-family:"IBM Plex Mono"}
.fini{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:30px 22px; text-align:center; max-width:560px; margin-inline:auto}
.fini .coche{width:56px; height:56px; border-radius:50%; background:var(--ok-voile); color:var(--ok); display:grid; place-items:center; margin:0 auto 16px; font-size:28px}
.fini .numero{font-family:"IBM Plex Mono"; font-size:22px; font-weight:600; margin:12px 0}

/* infos */
.depliant{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden}
.depliant summary{padding:15px 16px; cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px}
.depliant summary::-webkit-details-marker{display:none}
.depliant summary::after{content:"+"; color:var(--glacier); font-size:20px; line-height:1}
.depliant[open] summary::after{content:"\2212"}
.depliant .dedans{padding:0 16px 16px; color:var(--ink-2); font-size:14.5px}

/* pied */
footer.socle{background:var(--panneau); color:#9CC0C9; margin-top:40px; padding-block:34px 20px; font-size:14px}
footer.socle .zone{display:grid; gap:24px}
@media(min-width:780px){footer.socle .zone{grid-template-columns:1.5fr 1fr 1fr}}
footer.socle h4{color:#fff; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; font-family:"Archivo"}
footer.socle ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
footer.socle a{text-decoration:none; cursor:pointer}
footer.socle a:hover{color:#fff}
.mentions{border-top:1px solid rgba(255,255,255,.1); margin-top:26px; padding-top:16px; font-size:12px; color:#6F8F99; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

.message{position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px); background:var(--ink); color:var(--ground); padding:12px 18px; border-radius:var(--r); font-size:14px; opacity:0; pointer-events:none; transition:all .24s ease; z-index:70; max-width:calc(100vw - 32px); text-align:center}
.message.visible{opacity:1; transform:translate(-50%,0)}

/* ---------- bascule particulier / professionnel ---------- */
.segments{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px}
.segments button{border:0; background:transparent; color:var(--ink-2); font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer; white-space:nowrap}
.segments button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
@media(max-width:620px){.segments button{padding:7px 10px; font-size:12.5px}}

/* ---------- espace professionnel ---------- */
.pro-tete{background:var(--panneau); color:#DCEAEE; border-bottom:1px solid rgba(255,255,255,.08)}
.pro-tete .zone{padding-block:34px 32px; display:grid; gap:20px}
@media(min-width:900px){.pro-tete .zone{grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding-block:46px}}
.pro-tete h1{color:#fff; font-size:clamp(28px,5.4vw,44px)}
.pro-tete p{color:#9CC0C9; margin:14px 0 0; font-size:16.5px}
.pro-avantages{display:grid; gap:10px}
.pro-avantage{display:flex; gap:11px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:13px 14px}
.pro-avantage b{color:#fff; display:block; font-size:14.5px}
.pro-avantage span{color:#9CC0C9; font-size:13.5px}
.pro-avantage i{font-style:normal; color:#7FD8EA; font-family:"IBM Plex Mono"; font-size:13px; min-width:44px}

.metiers{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:560px){.metiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.metiers{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}}
.metier{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:border-color .2s, transform .2s}
.metier:hover{border-color:var(--glacier); transform:translateY(-2px)}
.metier[aria-pressed="true"]{border-color:var(--glacier); box-shadow:0 0 0 1px var(--glacier); background:var(--glacier-voile)}
.metier .pictogramme{width:38px; height:38px; border-radius:11px; background:var(--glacier-voile); color:var(--glacier-fort); display:grid; place-items:center; margin-bottom:4px}
.metier b{font-size:16.5px; font-family:"Archivo"; font-weight:800}
.metier span{font-size:13.5px; color:var(--ink-2)}

.atelier{display:grid; gap:20px; align-items:start; margin-top:22px}
@media(min-width:900px){.atelier{grid-template-columns:1fr 380px; gap:28px}}
.panneau-config{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:20px}
.panneau-config h3{font-size:17px; margin-bottom:4px}
.panneau-config .sous{color:var(--ink-2); font-size:14px; margin:0 0 16px}
.curseur{margin-bottom:18px}
.curseur label{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:8px}
.curseur label b{font-family:"IBM Plex Mono"; font-size:17px}
.curseur input[type=range]{width:100%}
.curseur input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:999px; background:linear-gradient(90deg,var(--glacier),var(--ember-clair))}
.curseur input[type=range]::-moz-range-track{height:8px; border-radius:999px; background:linear-gradient(90deg,var(--glacier),var(--ember-clair))}
.curseur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; margin-top:-8px; border-radius:50%; background:var(--surface); border:3px solid var(--glacier); box-shadow:var(--ombre); cursor:grab}
.curseur input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:var(--surface); border:3px solid var(--glacier)}
.curseur .aide{font-size:12.5px; color:var(--ink-3)}
.interrupteur{display:flex; align-items:center; gap:10px; border:1px solid var(--line-fort); border-radius:var(--r); padding:12px; cursor:pointer; font-size:14.5px; margin-bottom:10px}
.interrupteur input{accent-color:var(--glacier); width:17px; height:17px}
.interrupteur:has(input:checked){border-color:var(--glacier); background:var(--glacier-voile)}
.interrupteur .note{margin-left:auto; font-size:12.5px; color:var(--ink-3); font-family:"IBM Plex Mono"}

.devis{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:20px; position:sticky; top:82px}
.devis h3{font-size:16px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline}
.devis h3 span{font-family:"IBM Plex Mono"; font-size:12px; color:var(--ink-3); font-weight:400}
.devis table{width:100%; border-collapse:collapse; font-size:13.5px}
.devis td{padding:7px 0; border-bottom:1px solid var(--line); vertical-align:top}
.devis td.q{font-family:"IBM Plex Mono"; width:34px; color:var(--ink-3)}
.devis td.p{font-family:"IBM Plex Mono"; text-align:right; white-space:nowrap}
.devis .zone-total{display:grid; gap:5px; margin-top:12px}
.devis .l{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-2)}
.devis .l b{font-family:"IBM Plex Mono"; color:var(--ink)}
.devis .l.remise b{color:var(--ok)}
.devis .tot{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:11px; margin-top:6px; font-weight:700}
.devis .tot b{font-family:"IBM Plex Mono"; font-size:23px}
.devis .mention{font-size:12px; color:var(--ink-3); margin-top:6px}
.paliers{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap}
.palier{font-family:"IBM Plex Mono"; font-size:11.5px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink-3)}
.palier.atteint{border-color:var(--ok); color:var(--ok); background:var(--ok-voile)}


/* ---------- compte professionnel ---------- */
.compte-pro{display:grid; gap:20px; align-items:start}
@media(min-width:920px){.compte-pro{grid-template-columns:1fr 330px; gap:28px}}
.fiche-societe{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:22px}
.fiche-societe h3{font-size:16px; margin:22px 0 12px; display:flex; align-items:center; gap:9px}
.fiche-societe h3:first-child{margin-top:0}
.fiche-societe h3 b{width:22px; height:22px; border-radius:50%; background:var(--glacier); color:#fff; display:grid; place-items:center; font-size:12px; font-family:"IBM Plex Mono"}
.depot{display:flex; align-items:center; gap:12px; border:1px dashed var(--line-fort); border-radius:var(--r); padding:14px; cursor:pointer; background:var(--surface-2)}
.depot:hover{border-color:var(--glacier)}
.depot input[type=file]{display:none}
.depot .icone{width:38px; height:38px; border-radius:10px; background:var(--glacier-voile); color:var(--glacier-fort); display:grid; place-items:center; flex:0 0 auto}
.depot b{display:block; font-size:14.5px}
.depot small{color:var(--ink-3)}
.depot.rempli{border-style:solid; border-color:var(--ok); background:var(--ok-voile)}
.depot.rempli .icone{background:var(--ok); color:#fff}
.engagement{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin-top:10px; cursor:pointer}
.engagement input{margin-top:3px; width:17px; height:17px; accent-color:var(--glacier)}
.aide-champ{font-size:12.5px; color:var(--ink-3); margin-top:5px}
.aide-champ.faux{color:var(--ember)}
.encart{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:20px; position:sticky; top:82px}
.encart h3{font-size:15px; margin-bottom:12px}
.encart ul{margin:0; padding-left:18px; color:var(--ink-2); font-size:14px; display:grid; gap:8px}
.encart .rappel{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.jeton-societe{display:inline-flex; align-items:center; gap:8px; background:var(--glacier-voile); border:1px solid var(--glacier); color:var(--glacier-fort); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; max-width:250px}
.jeton-societe .rond{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:0 0 auto}
.jeton-societe .nom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:1180px){.jeton-societe{display:none}}
.bandeau-compte{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--ok-voile); border:1px solid var(--ok); color:var(--ok); border-radius:var(--r); padding:12px 14px; font-size:14px; margin-bottom:20px}
.bandeau-compte b{font-family:"IBM Plex Mono"}
.bandeau-compte button{margin-left:auto}


/* ---------- questionnaire de pre-etude ---------- */
.parcours{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.parcours button{flex:1 1 90px; border:0; background:transparent; padding:0; cursor:pointer; text-align:left}
.parcours .tige{height:5px; border-radius:3px; background:var(--line); margin-bottom:7px}
.parcours button[data-etat="faite"] .tige{background:var(--ok)}
.parcours button[data-etat="ici"] .tige{background:var(--glacier)}
.parcours span{font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}
.parcours button[data-etat="ici"] span{color:var(--ink); font-weight:600}

.etape h3{font-size:19px; margin-bottom:4px}
.etape .sous{color:var(--ink-2); font-size:14.5px; margin:0 0 18px}
.groupe-q{margin-bottom:20px}
.groupe-q > p.q{margin:0 0 9px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.choix{display:flex; flex-wrap:wrap; gap:8px}
.choix label{border:1px solid var(--line-fort); border-radius:999px; padding:9px 14px; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; background:var(--surface)}
.choix label:hover{border-color:var(--glacier)}
.choix input{position:absolute; opacity:0; width:0; height:0}
.choix label:has(input:checked){border-color:var(--glacier); background:var(--glacier-voile); color:var(--glacier-fort); font-weight:600}
.espaces{display:grid; gap:10px}
.espace{display:grid; grid-template-columns:1fr; gap:10px; border:1px solid var(--line); border-radius:var(--r); padding:12px; background:var(--surface-2)}
.espace.actif{border-color:var(--glacier); background:var(--glacier-voile)}
.espace-tete{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; cursor:pointer}
.espace-tete input{width:17px; height:17px; accent-color:var(--glacier)}
.espace-tete .cap{margin-left:auto; font-family:"IBM Plex Mono"; font-size:12.5px; color:var(--ink-3); font-weight:500}
.espace-champs{display:none; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.espace.actif .espace-champs{display:grid}
.champ-court label{display:block; font-size:12px; color:var(--ink-2); margin-bottom:4px; font-weight:600}
.champ-court input,.champ-court select{width:100%; font:inherit; font-size:14.5px; padding:8px 10px; border:1px solid var(--line-fort); border-radius:8px; background:var(--surface); color:var(--ink)}
.navigation{display:flex; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.navigation .bouton{flex:1}
.vigilance{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.vigilance b{font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:8px}
.vigilance ul{margin:0; padding-left:16px; font-size:13px; color:var(--ink-2); display:grid; gap:6px}
.vigilance li::marker{color:var(--ember)}
.pastille-etude{display:inline-block; background:var(--ember-voile); color:var(--ember); border-radius:6px; padding:2px 7px; font-size:11.5px; font-weight:700; margin-left:6px}
.synthese-espace{font-size:12.5px; color:var(--ink-3)}
table.recap-espaces{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px}
table.recap-espaces th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:6px 0; border-bottom:1px solid var(--line)}
table.recap-espaces td{padding:8px 0; border-bottom:1px solid var(--line); vertical-align:top}
table.recap-espaces td.n{font-family:"IBM Plex Mono"; text-align:right; white-space:nowrap}


.verrou{border:1px solid var(--line); border-radius:var(--r); padding:16px; background:var(--surface-2); text-align:center; margin-top:12px}
.verrou .cadenas{width:38px; height:38px; border-radius:50%; background:var(--glacier-voile); color:var(--glacier-fort); display:grid; place-items:center; margin:0 auto 10px}
.verrou b{display:block; font-size:15px}
.verrou p{margin:6px 0 12px; font-size:13.5px; color:var(--ink-2)}
.masque{font-family:"IBM Plex Mono"; color:var(--ink-3); letter-spacing:.12em}


/* ---------- preuves chiffrees ---------- */
.preuves{background:var(--surface); border-bottom:1px solid var(--line)}
.preuves .zone{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding-block:20px}
@media(min-width:820px){.preuves .zone{grid-template-columns:repeat(4,1fr)}}
.preuve{display:flex; gap:11px; align-items:flex-start}
.preuve .val{font-family:"IBM Plex Mono"; font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.2}
.preuve .quoi{font-size:13px; color:var(--ink-2)}
.preuve .etoiles{color:#E8A33D; font-size:13px; letter-spacing:-1px}

/* ---------- comparateur ---------- */
.comparer{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); cursor:pointer; padding-top:4px}
.comparer input{width:15px; height:15px; accent-color:var(--glacier)}
.barre-comparer{position:fixed; left:50%; bottom:18px; transform:translate(-50%,100px); z-index:55;
  background:var(--panneau); color:#E8F3F6; border-radius:999px; padding:10px 12px 10px 18px;
  display:flex; align-items:center; gap:14px; box-shadow:var(--ombre); transition:transform .25s ease; max-width:calc(100vw - 24px)}
.barre-comparer.visible{transform:translate(-50%,0)}
.barre-comparer span{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.voile-comp{position:fixed; inset:0; background:rgba(6,13,16,.55); z-index:60; display:none; padding:16px; overflow-y:auto}
.voile-comp.ouvert{display:block}
.boite-comp{background:var(--surface); border-radius:var(--r-l); max-width:900px; margin:24px auto; padding:20px; border:1px solid var(--line)}
.boite-comp .tete-comp{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.tableau-comp{width:100%; border-collapse:collapse; font-size:13.5px}
.tableau-comp th, .tableau-comp td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.tableau-comp thead th{font-size:14.5px; font-family:"Archivo"; font-weight:800}
.tableau-comp td.n{font-family:"IBM Plex Mono"}
.tableau-comp tr td:first-child{color:var(--ink-3); width:30%}
.enveloppe-comp{overflow-x:auto}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}


/* =====================================================================
   IDENTITÉ B : LE FABRICANT INDUSTRIEL
   Papier technique, grille apparente, filets nets, chiffres géants,
   un seul accent, l'orange de signalétique. Ces règles passent en
   dernier et remplacent celles du dessus.
   ===================================================================== */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --ground:#F2F1EC; --surface:#FFFFFF; --surface-2:#EAE7DF; --panneau:#121210;
  --ink:#101010; --ink-2:#4C4C46; --ink-3:#8C8C83;
  --line:#D9D5CB; --line-fort:#101010;
  --glacier:#E8500F; --glacier-fort:#C43F08; --glacier-voile:#FBE6DA;
  --ember:#E8500F; --ember-clair:#FF8A4C; --ember-voile:#FBE6DA;
  --laiton:#9A7B14; --ok:#1F6F4A; --ok-voile:#E2F0E8;
  --r:0px; --r-l:0px;
  --ombre:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#F2F1EC; --surface:#FFFFFF; --surface-2:#EAE7DF; --panneau:#121210;
    --ink:#101010; --ink-2:#4C4C46; --ink-3:#8C8C83;
    --line:#D9D5CB; --line-fort:#101010;
    --glacier:#E8500F; --glacier-fort:#C43F08; --glacier-voile:#FBE6DA;
    --ember:#E8500F; --ember-clair:#FF8A4C; --ember-voile:#FBE6DA;
    --ok:#1F6F4A; --ok-voile:#E2F0E8; --ombre:none;
  }
}

/* le papier millimétré */
body{
  background:
    repeating-linear-gradient(0deg, rgba(16,16,16,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(16,16,16,.045) 0 1px, transparent 1px 34px),
    var(--ground);
  color:var(--ink);
}

/* typographie mécanique */
h1, h2, .porte b.btu, .lecture .chiffre, .tableau-comp thead th, .pro-tete h1{
  font-family:"Anton","Archivo",Impact,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:-.005em;
}
h1{ font-size:clamp(42px,8.8vw,84px); line-height:.9; margin:18px 0 0 }
h1 em{ color:var(--ember) }
h2{ font-size:clamp(26px,5vw,46px); line-height:.95 }
h3{ font-family:"Archivo",sans-serif; font-weight:800; text-transform:none }
.chapo{ color:var(--ink-2); font-size:clamp(15px,1.6vw,17.5px) }
.tete{ border-bottom:3px solid var(--ink); padding-bottom:12px }
.oeil{ background:var(--ink); color:#fff; border-radius:0; letter-spacing:.2em; font-size:10.5px; padding:7px 12px }

/* bandeaux et en-tête */
.annonce{ background:var(--ink); color:#C9C6BC; border:0 }
.annonce b{ color:#fff }
header.chapeau{ background:rgba(242,241,236,.94); border-bottom:2px solid var(--ink) }
.sceau{ background:var(--ink); color:#fff; border-radius:0; font-family:"Anton",sans-serif; font-size:18px }
.marque-nom{ font-family:"Anton",sans-serif; font-weight:400; letter-spacing:.02em; font-size:19px; text-transform:uppercase }
.marque-nom span{ letter-spacing:.22em; color:var(--ink-3) }
nav.liens a{ color:var(--ink-2); text-transform:uppercase; font-size:11.5px; letter-spacing:.14em; font-weight:700 }
nav.liens a.actif, nav.liens a:hover{ color:var(--ink); border-color:var(--ember) }

/* commandes */
.bouton{ background:#fff; border:1.5px solid var(--ink); color:var(--ink); border-radius:0;
  text-transform:uppercase; letter-spacing:.1em; font-size:11.5px; font-weight:800; padding:13px 20px; box-shadow:3px 3px 0 var(--ink) }
.bouton:hover{ background:var(--ink); color:#fff; box-shadow:none; transform:translate(3px,3px) }
.bouton.fort{ background:var(--ember); border-color:var(--ink); color:#fff }
.bouton.fort:hover{ background:var(--ink); color:#fff }
.bouton.braise{ background:var(--ink); color:#fff }
.bouton.fantome{ background:none; border-color:transparent; box-shadow:none; color:var(--ink-2) }
.bouton.fantome:hover{ background:none; color:var(--ink); transform:none }
.bouton.grand{ padding:17px 26px; font-size:12.5px }
.compte{ background:var(--ember); color:#fff; border-radius:0; font-family:"IBM Plex Mono" }
.segments{ background:#fff; border:1.5px solid var(--ink); border-radius:0; padding:0 }
.segments button{ border-radius:0; text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:800; padding:9px 14px }
.segments button[aria-pressed="true"]{ background:var(--ink); color:#fff }
.jeton{ border-radius:0; border:1.5px solid var(--ink); font-weight:700 }
.jeton[aria-pressed="true"]{ background:var(--ember); border-color:var(--ink); color:#fff }

/* accueil */
.hero{ border-bottom:2px solid var(--ink); background:transparent }
.hero::before{ background:
  radial-gradient(60% 60% at 85% 10%, rgba(232,80,15, calc(var(--t,.4) * .20)), transparent 70%) }
.faits{ border-top:1px solid var(--ink) }
.fait b{ font-family:"Anton",sans-serif; font-size:26px; color:var(--ink) }
.fait span{ text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--ink-3) }
.actions .bouton{ min-width:200px; justify-content:center }

/* l'instrument, seul bloc noir de la page */
.pupitre{ background:var(--panneau); border:2px solid var(--ink); border-radius:0; box-shadow:8px 8px 0 rgba(16,16,16,.18) }
.pupitre h2{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.26em; color:var(--ember-clair); text-transform:uppercase }
.lecture .chiffre{ font-family:"Anton",sans-serif; font-size:clamp(58px,13vw,88px); color:#fff }
.lecture .unite{ color:#8C8C83 }
.bascule{ border-radius:0; border-color:rgba(255,255,255,.2) }
.bascule:has(input:checked){ border-color:var(--ember-clair); background:rgba(232,80,15,.18) }
.verdict p b{ color:var(--ember-clair) }

/* preuves : une bande de chiffres */
.preuves{ background:var(--ink); border:0 }
.preuve .val{ font-family:"Anton",sans-serif; font-size:30px; color:#fff }
.preuve .quoi{ color:#A9A69C; text-transform:uppercase; letter-spacing:.1em; font-size:10px }
.preuve .etoiles{ color:var(--ember-clair) }

/* portes de puissance */
.porte{ background:#fff; border:1.5px solid var(--ink); border-radius:0; box-shadow:5px 5px 0 rgba(16,16,16,.12) }
.porte:hover{ border-color:var(--ink); background:var(--surface-2); transform:translate(2px,2px); box-shadow:3px 3px 0 rgba(16,16,16,.12) }
.porte b.btu{ font-size:38px }
.porte span.piece{ color:var(--ink-2) }
.porte span.des{ font-family:"IBM Plex Mono"; font-size:11.5px; letter-spacing:.04em }

/* fiches produit : des documents, pas des cartes */
.article{ background:#fff; border:1.5px solid var(--ink); border-radius:0; box-shadow:5px 5px 0 rgba(16,16,16,.10); position:relative }
.article:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 rgba(16,16,16,.10) }
.article.conseille{ box-shadow:5px 5px 0 var(--ember) }
.visuel{ background:#fff; border-bottom:1.5px solid var(--ink); position:relative }
.visuel::after{ content:attr(data-etiquette); position:absolute; left:0; bottom:0;
  font-family:"IBM Plex Mono"; font-size:10px; letter-spacing:.14em; color:var(--ink-3);
  background:var(--surface-2); border-top:1px solid var(--line); border-right:1px solid var(--line); padding:3px 8px }
.drapeau{ border-radius:0; background:var(--ember); color:#fff; letter-spacing:.12em; border:1.5px solid var(--ink) }
.drapeau.calme{ background:#fff; color:var(--ink); }
.drapeau.chaud{ background:var(--ink); color:#fff }
.corps{ position:relative; z-index:1 }
.reference{ color:var(--ink); background:var(--surface-2); display:inline-block; padding:3px 7px; letter-spacing:.1em; border:1px solid var(--line) }
.article h3{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:24px; letter-spacing:-.005em }
.btu{ border-top:1px solid var(--line); padding-top:8px }
.btu strong{ font-family:"Anton",sans-serif; font-size:26px; color:var(--ink) }
.specs{ border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--surface-2); padding:11px 10px; margin-inline:-2px }
.specs span{ text-transform:uppercase; letter-spacing:.06em; font-size:10.5px }
.prix{ font-family:"Anton",sans-serif; font-size:28px; letter-spacing:0 }
.prix small{ font-family:"IBM Plex Mono"; letter-spacing:.02em }
.comparer{ text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; font-weight:700; border-top:1px solid var(--line); padding-top:9px }

/* panneaux, formulaires, blocs */
.filtres, .recap, .devis, .encart, .carte-form, .panneau-config, .fiche-societe, .acc, .ligne, .depliant, .brique, .duel, .achat, .verrou, .boite-comp, .avis blockquote, .metier, .vide, .pro-avantage{
  background:#fff; border:1.5px solid var(--ink); border-radius:0; box-shadow:none }
.brique{ border-left-width:6px }
.bloc-filtre p{ color:var(--ink); letter-spacing:.16em; font-size:11px }
.recherche input, .barre select, .champ input, .champ select, .champ-court input, .champ-court select, .tri select{
  background:#fff; border:1.5px solid var(--ink); border-radius:0; color:var(--ink) }
.mode, .pose-option, .interrupteur, .espace, .depot, .choix label{ border-radius:0; border-width:1.5px; border-color:var(--ink); background:#fff }
.mode:has(input:checked), .pose-option:has(input:checked), .interrupteur:has(input:checked), .espace.actif, .choix label:has(input:checked){
  background:var(--ember-voile); border-color:var(--ember) }
.parcours .tige{ background:var(--line); height:6px; border:1px solid var(--ink) }
.parcours button[data-etat="ici"] .tige{ background:var(--ember) }
.parcours button[data-etat="faite"] .tige{ background:var(--ink) }
.parcours span{ text-transform:uppercase; letter-spacing:.08em; font-size:10px }

/* professionnels */
.pro-tete{ background:var(--ink); border-bottom:2px solid var(--ink) }
.pro-tete h1{ color:#fff }
.pro-tete p{ color:#B9B6AC }
.pro-avantage{ background:#fff; color:var(--ink) }
.pro-avantage b{ color:var(--ink) }
.pro-avantage span{ color:var(--ink-2) }
.pro-avantage i{ color:var(--ember); font-family:"Anton",sans-serif; font-size:17px }
.metier .pictogramme{ background:var(--ink); color:#fff; border-radius:0 }
.metier[aria-pressed="true"]{ background:var(--ember-voile); box-shadow:4px 4px 0 var(--ember) }
.metier b{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:19px }
.devis h3{ border-bottom:2px solid var(--ink); padding-bottom:8px }
.devis .tot b{ font-family:"Anton",sans-serif; font-size:28px }
.palier{ border-radius:0; border:1px solid var(--ink); font-size:10.5px; letter-spacing:.06em }
.palier.atteint{ background:var(--ok-voile); border-color:var(--ok); color:var(--ok) }

/* bas de page et divers */
.rassure{ background:#fff; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink) }
.reseau{ background:var(--ink); border:0 }
.reseau h2{ color:#fff }
.pays{ border-radius:0; border:1px solid rgba(255,255,255,.25) }
.pays.siege{ background:var(--ember); border-color:var(--ember); color:#fff }
footer.socle{ background:var(--ink); border-top:0 }
footer.socle h4{ letter-spacing:.16em }
.barre-comparer{ background:var(--ember); color:#fff; border:2px solid var(--ink); border-radius:0 }
.barre-comparer .bouton{ background:#fff; color:var(--ink); box-shadow:none; border-color:var(--ink) }
.barre-comparer .bouton.fantome{ background:none; color:#fff; border-color:transparent }
.message{ background:var(--ink); color:#fff; border-radius:0; letter-spacing:.06em; font-weight:700 }
.tableau-comp thead th{ font-size:19px }
.etoiles, .avis .etoiles, .note-ligne .etoiles{ color:var(--ember) }
.remplissage.inverter{ background:var(--ember) }
.remplissage.classique{ background:var(--ink) }
.piste{ background:var(--surface-2); border:1px solid var(--ink); border-radius:0 }
.economie{ background:var(--ok-voile); color:var(--ok); border:1.5px solid var(--ok); border-radius:0 }
.fini .coche, .verrou .cadenas{ border-radius:0; background:var(--ember); color:#fff }
.quantite{ border-radius:0; border-color:var(--ink); border-width:1.5px }
.bandeau-compte{ border-radius:0; border-width:1.5px }
.depliant summary::after{ color:var(--ember) }
.jeton-societe{ border-radius:0; border-color:var(--ink); background:#fff; color:var(--ink) }
.jeton-societe[hidden]{ display:none }
.jeton-societe .rond{ background:var(--ok) }


.titre-outil{ font-family:"Anton",sans-serif; font-size:clamp(22px,3.4vw,30px); color:#fff; text-transform:uppercase; line-height:1; margin:10px 0 10px }
.mode-emploi{ color:#A9A69C; font-size:13.5px; margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.16) }
.etiquette-lecture{ font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#8C8C83; margin-bottom:6px }

button{ color:inherit; -webkit-text-fill-color:currentColor }
.metier, .porte, .visuel, .article h3 button, .parcours button{ color:var(--ink); -webkit-text-fill-color:var(--ink) }
.metier b, .porte b.btu{ color:var(--ink); -webkit-text-fill-color:var(--ink) }
.metier[aria-pressed="true"] b{ color:var(--ink) }
.bouton.fort, .bouton.braise{ color:#fff; -webkit-text-fill-color:#fff }
.segments button[aria-pressed="true"]{ color:#fff; -webkit-text-fill-color:#fff }

.parcours{ display:block; margin-bottom:20px; padding-bottom:16px; border-bottom:1.5px solid var(--ink) }
.parcours-tete{ display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px }
.jauge{ height:10px; border:1.5px solid var(--ink); background:#fff }
.jauge i{ display:block; height:100%; background:var(--ember); transition:width .3s ease }
.points{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap }
.point-etape{ width:36px; height:36px; border:1.5px solid var(--ink); background:#fff; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--ink); padding:0 }
.point-etape[data-etat="ici"]{ background:var(--ember); color:#fff; -webkit-text-fill-color:#fff }
.point-etape[data-etat="faite"]{ background:var(--ink); color:#fff; -webkit-text-fill-color:#fff }
.point-etape:hover{ outline:2px solid var(--ember); outline-offset:1px }
.parcours button{ flex:none; text-align:center }
.points .point-etape{ flex:0 0 36px; display:inline-grid; place-items:center }
.espace-tete{ flex-wrap:wrap }
.espace-tete .cap{ font-size:11px }
@media(max-width:640px){ .espace-tete .cap{ display:none } }
.panneau-config, .devis, .atelier > *{ min-width:0 }
.espace-champs{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) }
.champ-court input, .champ-court select{ min-width:0 }

/* en-tête sur téléphone : la bascule prend sa propre ligne */
@media(max-width:760px){
  .chapeau .zone{ height:auto; flex-wrap:wrap; gap:10px; padding-block:10px }
  .marque{ flex:1 1 auto }
  .outils{ margin-left:0; width:100%; flex-wrap:wrap; gap:8px }
  .outils .panier-lien, .outils .bouton{ flex:1 1 auto }
  .burger{ order:1 }
  .segments{ order:3; flex:1 1 100%; width:100%; display:flex }
  .segments button{ flex:1; padding:12px 8px; font-size:12px }
}
.etape h3{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(20px,3.6vw,26px); margin-bottom:6px }

.demarche{ border:1.5px solid var(--ink); background:#fff; padding:14px; margin-bottom:10px }
.demarche.obligatoire{ border-left:6px solid var(--ember) }
.demarche.vigilance{ border-left:6px solid var(--ink) }
.demarche.libre{ border-left:6px solid var(--ok) }
.demarche h4{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:17px; margin:0 0 4px }
.demarche .delai{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); display:block; margin-bottom:6px }
.demarche p{ margin:0 0 8px; font-size:14px; color:var(--ink-2) }
.demarche .source{ font-size:12px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:7px }
.modele-lettre{ background:var(--surface-2); border:1.5px solid var(--ink); padding:12px; font-size:13px; line-height:1.5; white-space:pre-wrap; margin-top:8px; max-height:260px; overflow:auto }

@media(max-width:1320px){
  nav.liens{ gap:16px }
  nav.liens a{ font-size:10.5px; letter-spacing:.08em; white-space:nowrap }
}
.planches{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px }
.planches .visuel{ border:1.5px solid var(--ink); aspect-ratio:4/3 }
.fiche .visuel{ border:1.5px solid var(--ink) }

/* ---------- adresse et version, au bas de l'accueil ---------- */
.plaque{ display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:flex-end;
  border:1.5px solid var(--ink); background:#fff; box-shadow:5px 5px 0 rgba(16,16,16,.10); padding:16px 18px }
.plaque-titre{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px }
.plaque-lien{ font-size:14px; color:var(--ember); text-decoration:underline; word-break:break-all; letter-spacing:.01em }
.plaque-version span.mono{ font-size:20px; font-weight:600; color:var(--ink); display:flex; align-items:baseline; gap:10px }
.plaque-version small{ font-family:"Public Sans",sans-serif; font-size:12.5px; font-weight:400; color:var(--ink-3) }
@media(max-width:520px){ .plaque{ display:grid; gap:14px } }

/* ---------- nos photos et vidéos ---------- */
.medias{ display:grid; gap:16px; grid-template-columns:1fr }
@media(min-width:900px){ .medias{ grid-template-columns:minmax(280px,360px) 1fr; gap:24px; align-items:start } }
.cadre-video{ border:1.5px solid var(--ink); background:#000; box-shadow:5px 5px 0 rgba(16,16,16,.12); position:relative }
.cadre-video video{ display:block; width:100%; height:auto; background:#000 }
.cadre-video .legende{ position:absolute; left:0; bottom:0; background:var(--ink); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; padding:5px 9px; text-transform:uppercase }
.galerie{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media(min-width:620px){ .galerie{ grid-template-columns:repeat(2,1fr) } }
.cliche{ border:1.5px solid var(--ink); background:#fff; box-shadow:5px 5px 0 rgba(16,16,16,.10); position:relative; overflow:hidden }
.cliche img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/5 }
.cliche figcaption{ position:absolute; left:0; bottom:0; background:var(--surface-2); border-top:1px solid var(--line);
  border-right:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em;
  padding:4px 8px; text-transform:uppercase; color:var(--ink) }
.mot-atelier{ font-size:15px; color:var(--ink-2); margin:0 0 14px; max-width:60ch }

/* ---------- accueil : la photo d'abord ---------- */
.hero-photo{ position:relative; background:#0B0B0A; border-bottom:2px solid var(--ink); overflow:hidden }
.hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; opacity:.42 }
.hero-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,10,.35) 0%, rgba(11,11,10,.55) 55%, rgba(11,11,10,.92) 100%) }
.hero-photo .zone{ position:relative; z-index:2; padding-block:44px 34px; min-height:clamp(400px,58vh,600px);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start }
.hero-photo h1{ color:#fff; margin:16px 0 0; text-shadow:0 2px 30px rgba(0,0,0,.55) }
.hero-photo h1 em{ color:var(--ember-clair) }
.hero-photo .chapo{ color:#E3E0D8; max-width:56ch; margin-top:14px }
.oeil.clair{ background:#fff; color:var(--ink) }
.bouton.clair{ background:transparent; border-color:#fff; color:#fff; box-shadow:3px 3px 0 rgba(255,255,255,.35) }
.bouton.clair:hover{ background:#fff; color:var(--ink); box-shadow:none }
.credit-photo{ margin-top:18px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#9C978C }
@media(max-width:620px){ .hero-photo .zone{ min-height:clamp(360px,54vh,520px) } }

/* le calcul, en pleine largeur, plus bas dans la page */
#outil .pupitre{ padding:26px }
@media(min-width:900px){ #outil .pupitre{ padding:34px 40px } }
#outil .lecture{ align-items:baseline }
#outil .mode-emploi{ max-width:70ch }
#outil .options{ gap:10px }

/* ================= pages légales ================= */
.legal-grille{display:grid; gap:26px; align-items:start}
@media(min-width:900px){.legal-grille{grid-template-columns:250px minmax(0,1fr)}}
.legal-menu{display:grid; gap:8px}
@media(min-width:900px){.legal-menu{position:sticky; top:96px; display:grid; gap:0; border:1.5px solid var(--ink); background:var(--surface); box-shadow:4px 4px 0 var(--ink)}}
.legal-menu button{
  appearance:none; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:12px 14px; text-align:left; cursor:pointer; display:flex; gap:10px; align-items:baseline;
}
@media(min-width:900px){.legal-menu button{border:0; border-bottom:1px solid var(--line)}
  .legal-menu button:last-child{border-bottom:0}}
.legal-menu button span{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); font-weight:500}
.legal-menu button:hover{background:var(--surface-2)}
.legal-menu button.actif{background:var(--ink); color:#fff}
.legal-menu button.actif span{color:#C9C6BC}

.legal-corps{max-width:74ch; font-size:15.5px; color:var(--ink-2)}
.legal-corps > p:first-child{margin-top:0}
.legal-corps h3{
  font-family:"Anton","Archivo",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink); font-size:clamp(17px,2.6vw,21px); line-height:1.1; margin:30px 0 10px;
  padding-top:14px; border-top:2px solid var(--ink);
}
.legal-corps h3:first-of-type{margin-top:4px}
.legal-corps h4{font-family:"Archivo",sans-serif; font-weight:800; font-size:14.5px; color:var(--ink); margin:18px 0 6px; text-transform:none}
.legal-corps p{margin:0 0 12px}
.legal-corps ul{margin:0 0 14px; padding-left:18px}
.legal-corps li{margin-bottom:6px}
.legal-corps b, .legal-corps strong{color:var(--ink)}
.legal-corps a{color:var(--ember); text-decoration:underline; cursor:pointer}
.retract{display:grid; gap:20px; align-items:start}
@media(min-width:920px){.retract{grid-template-columns:1fr 340px; gap:28px}}
.depliant .dedans a{color:var(--ember); text-decoration:underline; cursor:pointer; font-weight:600}
.formule-type{background:var(--surface-2); border:1.5px solid var(--ink); padding:14px; font-size:13.5px; line-height:1.55; white-space:pre-wrap; margin-top:10px}
.aide-champ a{color:var(--ember); text-decoration:underline; cursor:pointer; font-weight:600}
.mentions .liens-legaux{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.mentions .liens-legaux a{cursor:pointer; text-decoration:none}
.mentions .liens-legaux a:hover{text-decoration:underline}
.legal-date{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px}

.legal-cadre{border:1.5px solid var(--ink); background:var(--surface); box-shadow:4px 4px 0 var(--ink); padding:18px; margin:0 0 18px}
.legal-cadre h4{margin-top:0}
.legal-cadre p:last-child, .legal-cadre ul:last-child{margin-bottom:0}
.legal-alerte{border-left:5px solid var(--ember); background:var(--ember-voile); padding:14px 16px; margin:0 0 18px; color:var(--ink)}
.legal-alerte p:last-child{margin-bottom:0}

.legal-fiche{border:1.5px solid var(--ink); background:var(--surface); margin:0 0 14px; overflow:hidden}
.legal-fiche > summary{
  padding:14px 16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font-family:"Archivo",sans-serif; font-weight:800; color:var(--ink); font-size:14.5px;
}
.legal-fiche > summary::-webkit-details-marker{display:none}
.legal-fiche > summary::after{content:"+"; color:var(--ember); font-family:"IBM Plex Mono",monospace; font-size:19px; line-height:1}
.legal-fiche[open] > summary::after{content:"\2212"}
.legal-fiche[open] > summary{background:var(--ink); color:#fff}
.legal-fiche[open] > summary::after{color:#fff}
.legal-lignes{padding:4px 16px 16px; display:grid; gap:0}
.legal-lignes > div{display:grid; gap:2px; padding:11px 0; border-bottom:1px solid var(--line)}
.legal-lignes > div:last-child{border-bottom:0}
@media(min-width:620px){.legal-lignes > div{grid-template-columns:190px minmax(0,1fr); gap:14px; align-items:baseline}}
.legal-lignes dt, .legal-lignes .cle{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.legal-lignes .val{color:var(--ink-2); font-size:14.5px}


/* =====================================================================
   IDENTITÉ C : PAPIER ET CUIVRE
   Fond papier chaud, encre charbon, un accent cuivre, un second terre
   brûlée. Typographie Archivo, Archivo Narrow pour les commandes,
   Space Mono pour les chiffres. Bords fins, coins légèrement adoucis,
   plus aucune ombre portée. Ce bloc passe en dernier : il ne change que
   l'habillage, jamais le fonctionnement.
   ===================================================================== */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --paper:#F2EEE3; --char:#2A2721; --copper:#B2552C; --terra:#8C3B22;
  --encre:#4B463D; --carte:#F9F6EE; --sourdine:#E7E1D1;

  --ground:#F2EEE3; --surface:#F9F6EE; --surface-2:#E7E1D1; --panneau:#2A2721;
  --ink:#2A2721; --ink-2:#4B463D; --ink-3:#736D62;
  --line:rgba(42,39,33,.12); --line-fort:rgba(42,39,33,.20);
  --glacier:#B2552C; --glacier-fort:#8C3B22; --glacier-voile:#F0E3D7;
  --ember:#B2552C; --ember-clair:#D9763F; --ember-voile:#F0E3D7;
  --laiton:#8C6A1E; --ok:#3F6B4E; --ok-voile:#E2EBE3;
  --r:min(1vw,6px); --r-l:min(1vw,14px);
  --ombre:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#F2EEE3; --surface:#F9F6EE; --surface-2:#E7E1D1; --panneau:#2A2721;
    --ink:#2A2721; --ink-2:#4B463D; --ink-3:#736D62;
    --line:rgba(42,39,33,.12); --line-fort:rgba(42,39,33,.20);
    --glacier:#B2552C; --glacier-fort:#8C3B22; --glacier-voile:#F0E3D7;
    --ember:#B2552C; --ember-clair:#D9763F; --ember-voile:#F0E3D7;
    --ok:#3F6B4E; --ok-voile:#E2EBE3; --ombre:none;
  }
}

/* le papier, uni */
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
}
.mono, .prix, .reference, .btu, .specs b, .devis td.p, .devis td.q,
.legal-lignes .cle, .plaque-titre, .plaque-version span.mono, .credit-photo,
.parcours-tete, .point-etape, .graduations, .palier, .fait b, .preuve .val{
  font-family:"Space Mono",ui-monospace,SFMono-Regular,monospace;
}

/* titrage : plus de capitales, plus de condensé écrasé */
h1, h2, .porte b.btu, .lecture .chiffre, .tableau-comp thead th, .pro-tete h1,
.article h3, .metier b, .etape h3, .demarche h4, .legal-corps h3,
.devis .tot b, .preuve .val{
  font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;
  font-weight:600; text-transform:none; letter-spacing:-.01em;
}
h1{ font-size:clamp(30px,5.2vw,46px); line-height:1.12; margin:18px 0 0; text-wrap:balance }
h1 em{ color:var(--copper); font-style:italic; display:inline }
h2{ font-size:clamp(23px,3.4vw,30px); line-height:1.18; text-wrap:balance }
h3{ font-family:"Archivo",sans-serif; font-weight:600; text-transform:none }
.chapo{ color:var(--ink-2); font-size:clamp(15px,1.6vw,18px); line-height:1.6; text-align:left }
.tete{ border-bottom:0; padding-bottom:0; align-items:flex-end }
.tete h2{ max-width:40ch }
.tete p{ color:var(--ink-2) }

/* le surtitre : une ligne de capitales cuivre, sans pastille */
.oeil{
  background:none; color:var(--copper); border-radius:0; padding:0;
  font-family:"Space Mono",monospace; font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; display:block; margin-bottom:10px;
}
.oeil.clair{ background:none; color:#E7B893 }

/* bandeau d'annonce et en-tête */
.annonce{ background:var(--char); color:rgba(242,238,227,.8) }
.annonce .zone{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.04em; padding-block:8px }
.annonce b{ color:var(--paper); font-weight:700 }
header.chapeau{ background:rgba(242,238,227,.92); border-bottom:1px solid rgba(42,39,33,.10); backdrop-filter:blur(10px) }
@media(min-width:761px){ .chapeau .zone{ height:64px } }
.sceau{
  width:28px; height:28px; border-radius:0; background:var(--copper); color:var(--paper);
  font-family:"Archivo",sans-serif; font-weight:700; font-size:14px;
}
.marque-nom{ font-family:"Archivo",sans-serif; font-weight:600; font-size:18px; letter-spacing:-.01em; text-transform:none; color:var(--char) }
.marque-nom span{ font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.18em; color:var(--ink-3) }
nav.liens{ gap:28px }
nav.liens a{
  font-family:"Archivo Narrow","Archivo",sans-serif; font-size:15px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-2); border-bottom:0; padding-block:4px;
}
nav.liens a:hover{ color:var(--copper) }
nav.liens a.actif{
  color:var(--char); border-bottom:0;
  text-decoration:underline; text-decoration-color:var(--copper);
  text-decoration-thickness:2px; text-underline-offset:4px;
}
.menu{ background:var(--carte); border-top:1px solid var(--line) }
.menu a{ font-family:"Archivo Narrow","Archivo",sans-serif; font-weight:500; font-size:15.5px }
.menu a:hover{ background:var(--sourdine) }
.menu .groupe{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.2em; color:var(--copper) }
.menu a .flottant{ font-family:"Space Mono",monospace; font-size:11px }

/* commandes : un filet fin, jamais d'ombre */
.bouton{
  font-family:"Archivo Narrow","Archivo",sans-serif; font-weight:600; font-size:15px;
  letter-spacing:0; text-transform:none; border-radius:0; box-shadow:none;
  background:transparent; color:var(--char); border:1px solid rgba(42,39,33,.25);
  padding:11px 20px; transition:color .15s, background-color .15s, border-color .15s;
}
.bouton:hover{ background:transparent; color:var(--copper); border-color:var(--copper); box-shadow:none; transform:none }
.bouton.fort{ background:var(--copper); border-color:var(--copper); color:var(--paper) }
.bouton.fort:hover{ background:var(--terra); border-color:var(--terra); color:var(--paper) }
.bouton.braise{ background:var(--char); border-color:var(--char); color:var(--paper) }
.bouton.braise:hover{ background:var(--copper); border-color:var(--copper); color:var(--paper) }
.bouton.clair{ background:transparent; border-color:rgba(242,238,227,.45); color:var(--paper); box-shadow:none }
.bouton.clair:hover{ background:var(--paper); border-color:var(--paper); color:var(--char) }
.bouton.fantome{ border-color:transparent; background:none; color:var(--ink-2) }
.bouton.fantome:hover{ color:var(--copper); border-color:transparent }
.bouton.grand{ padding:13px 22px; font-size:16px }
.compte{ background:var(--copper); color:var(--paper); border-radius:0; font-family:"Space Mono",monospace; font-size:11px }
.segments{ background:var(--carte); border:1px solid var(--line-fort); border-radius:0; padding:0 }
.segments button{
  font-family:"Archivo Narrow","Archivo",sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0; text-transform:none; border-radius:0; padding:9px 16px; color:var(--ink-2);
}
.segments button[aria-pressed="true"]{ background:var(--char); color:var(--paper); -webkit-text-fill-color:var(--paper) }

/* accueil */
.hero{ border-bottom:1px solid var(--line); background:var(--ground) }
.hero::before{ background:none }
.hero-photo{ background:var(--char); border-bottom:1px solid var(--line) }
.hero-photo img{ opacity:.55 }
.hero-photo::after{ background:linear-gradient(180deg, rgba(42,39,33,.35) 0%, rgba(42,39,33,.6) 55%, rgba(42,39,33,.92) 100%) }
.hero-photo h1{ color:var(--paper); text-shadow:none }
.hero-photo h1 em{ color:#E7B893 }
.hero-photo .chapo{ color:rgba(242,238,227,.78) }
.credit-photo{ color:rgba(242,238,227,.6); font-size:11px; letter-spacing:.15em }
.faits{ border-top:1px solid var(--line) }
.fait b{ font-family:"Archivo",sans-serif; font-weight:600; font-size:26px; color:var(--char) }
.fait span{ font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:var(--ink-3) }
.actions .bouton{ min-width:0 }

/* la bande de chiffres : terre brûlée */
.preuves{ background:var(--terra); border:0 }
.preuves .zone{ padding-block:30px }
.preuve .val{ font-family:"Archivo",sans-serif; font-weight:600; font-size:30px; line-height:1; color:var(--paper) }
.preuve .quoi{ font-family:"Space Mono",monospace; color:rgba(242,238,227,.72); text-transform:uppercase; letter-spacing:.06em; font-size:11px; margin-top:8px }
.preuve .etoiles{ color:rgba(242,238,227,.9) }

/* l'outil de calcul : le seul bloc charbon de la page */
.pupitre{
  background:var(--char); border:0; border-radius:var(--r-l); box-shadow:none; color:var(--paper);
}
.pupitre h2{
  font-family:"Space Mono",monospace; font-weight:400; font-size:11px; letter-spacing:.2em;
  color:var(--copper); text-transform:uppercase;
}
.titre-outil{ font-family:"Archivo",sans-serif; font-weight:600; font-size:clamp(23px,3.2vw,30px); color:var(--paper); text-transform:none; line-height:1.2 }
.mode-emploi{ color:rgba(242,238,227,.7); border-bottom:1px solid rgba(242,238,227,.15); font-size:15px }
.etiquette-lecture{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.1em; color:rgba(242,238,227,.6) }
.lecture .chiffre{ font-family:"Archivo",sans-serif; font-weight:600; font-size:clamp(40px,7vw,52px); color:var(--copper) }
.lecture .unite{ color:rgba(242,238,227,.6); font-family:"Space Mono",monospace; letter-spacing:.06em }
.reglette label{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(242,238,227,.6) }
.reglette label b{ font-family:"Space Mono",monospace; color:var(--paper); font-size:14px }
.graduations{ color:rgba(242,238,227,.5); font-size:10px }
input[type=range]{ accent-color:var(--copper) }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:99px; background:rgba(242,238,227,.22) }
input[type=range]::-moz-range-track{ height:6px; border-radius:99px; background:rgba(242,238,227,.22) }
input[type=range]::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-7px; background:var(--copper); border:0; box-shadow:none }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; background:var(--copper); border:0 }
.bascule{
  border-radius:0; border:1px solid rgba(242,238,227,.2); background:rgba(242,238,227,.05);
  font-family:"Archivo Narrow","Archivo",sans-serif; font-size:15px; color:rgba(242,238,227,.8);
}
.bascule:has(input:checked){ border-color:var(--copper); background:rgba(178,85,44,.22); color:var(--paper) }
.bascule input{ accent-color:var(--copper) }
.verdict{ border-top:1px solid rgba(242,238,227,.15) }
.verdict p{ color:rgba(242,238,227,.7) }
.verdict p b{ color:var(--copper) }
#outil .pupitre{ padding:26px }
@media(min-width:900px){ #outil .pupitre{ padding:34px 40px } }

/* surfaces : une carte claire, un filet, un coin adouci */
.filtres, .recap, .devis, .encart, .carte-form, .panneau-config, .fiche-societe,
.acc, .ligne, .depliant, .brique, .duel, .achat, .verrou, .boite-comp,
.avis blockquote, .metier, .vide, .pro-avantage, .porte, .article, .demarche,
.legal-fiche, .plaque, .cadre-video, .cliche, .legal-cadre{
  background:var(--carte); border:1px solid rgba(42,39,33,.10); border-radius:var(--r-l); box-shadow:none;
}
.porte:hover, .article:hover, .metier:hover{ transform:none; box-shadow:none; border-color:rgba(178,85,44,.6) }
.porte b.btu{ font-family:"Archivo",sans-serif; font-weight:600; font-size:32px; color:var(--char) }
.porte span.piece{ color:var(--ink-2); font-size:14.5px }
.porte span.des{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--ink-3) }

/* fiches produit */
.article.conseille{ border-color:var(--copper); box-shadow:0 0 0 1px var(--copper) }
.visuel{ background:var(--sourdine); border-bottom:1px solid rgba(42,39,33,.10); border-radius:var(--r-l) var(--r-l) 0 0 }
.visuel::after{ background:rgba(242,238,227,.85); border:0; color:var(--ink-3); font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; padding:3px 8px }
.drapeau{
  border-radius:var(--r); border:0; background:var(--copper); color:var(--paper);
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.06em; padding:4px 8px; font-weight:400;
}
.drapeau.calme{ background:rgba(42,39,33,.06); color:var(--char); border:1px solid rgba(42,39,33,.12) }
.drapeau.chaud{ background:var(--char); color:var(--paper) }
.reference{
  background:rgba(42,39,33,.05); border:1px solid rgba(42,39,33,.10); border-radius:var(--r);
  color:var(--char); font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.04em;
  text-transform:none; padding:5px 8px;
}
.article h3{ font-size:20px }
.btu{ border-top:1px solid var(--line); padding-top:8px; font-family:"Space Mono",monospace; color:var(--ink-2) }
.btu strong{ font-family:"Archivo",sans-serif; font-weight:600; font-size:22px; color:var(--char) }
.specs{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:transparent; padding:11px 0; margin-inline:0;
}
.specs span{ font-family:"Archivo Narrow","Archivo",sans-serif; text-transform:none; letter-spacing:0; font-size:13px; color:var(--ink-3) }
.specs b{ font-family:"Space Mono",monospace; font-size:12.5px; color:var(--char) }
.prix{ font-family:"Space Mono",monospace; font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--char) }
.prix small{ font-family:"Space Mono",monospace; font-weight:400; color:var(--ink-3); letter-spacing:0; font-size:11px }
.comparer{ font-family:"Archivo Narrow","Archivo",sans-serif; text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; border-top:1px solid var(--line) }
.table-specs th{ font-family:"Archivo Narrow","Archivo",sans-serif; color:var(--ink-3) }
.table-specs td{ font-family:"Space Mono",monospace; font-size:13px }

/* formulaires */
.recherche input, .barre select, .champ input, .champ select,
.champ-court input, .champ-court select, .tri select, #tri{
  background:var(--carte); border:1px solid rgba(42,39,33,.18); border-radius:var(--r); color:var(--char);
  font-family:"Archivo",sans-serif;
}
.recherche input:focus, .champ input:focus, .champ select:focus{ outline:2px solid var(--copper); outline-offset:1px }
.mode, .pose-option, .interrupteur, .espace, .depot, .choix label{
  border-radius:var(--r); border:1px solid rgba(42,39,33,.18); background:var(--carte);
}
.choix label{ border-radius:99px; font-family:"Archivo Narrow","Archivo",sans-serif; font-size:14.5px }
.mode:has(input:checked), .pose-option:has(input:checked), .interrupteur:has(input:checked),
.espace.actif, .choix label:has(input:checked){
  background:var(--ember-voile); border-color:var(--copper); color:var(--terra);
}
input[type=checkbox], input[type=radio]{ accent-color:var(--copper) }
.champ label, .champ-court label{ font-family:"Archivo Narrow","Archivo",sans-serif; color:var(--ink-2) }
.aide-champ{ font-family:"Archivo",sans-serif; color:var(--ink-3) }
.bloc-filtre p{ font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--copper); text-transform:uppercase }
.case{ font-family:"Archivo Narrow","Archivo",sans-serif; font-size:14.5px }
.case .nb{ font-family:"Space Mono",monospace; font-size:11px }
.compteur{ font-family:"Space Mono",monospace; font-size:12.5px; color:var(--ink-3) }

/* professionnels */
.pro-tete{ background:var(--char); border-bottom:0 }
.pro-tete h1{ color:var(--paper); font-family:"Archivo",sans-serif; font-weight:600; text-transform:none }
.pro-tete h1 em{ color:#E7B893 }
.pro-tete p{ color:rgba(242,238,227,.72) }
.pro-avantage{ background:rgba(242,238,227,.06); border:1px solid rgba(242,238,227,.14); border-radius:var(--r-l) }
.pro-avantage b{ color:var(--paper) }
.pro-avantage span{ color:rgba(242,238,227,.7) }
.pro-avantage i{ font-family:"Archivo",sans-serif; font-weight:600; font-size:17px; color:#E7B893 }
.metier .pictogramme{ background:var(--ember-voile); color:var(--terra); border-radius:var(--r) }
.metier[aria-pressed="true"]{ background:var(--ember-voile); border-color:var(--copper); box-shadow:none }
.metier b{ font-family:"Archivo",sans-serif; font-weight:600; font-size:18px; text-transform:none }
.metier span{ color:var(--ink-2) }
.devis h3{ border-bottom:1px solid var(--line); padding-bottom:10px; font-family:"Archivo",sans-serif; font-weight:600 }
.devis h3 span{ font-family:"Space Mono",monospace; color:var(--ink-3) }
.devis .tot b{ font-family:"Space Mono",monospace; font-weight:700; font-size:22px }
.palier{ border-radius:99px; border:1px solid var(--line-fort); font-size:11px; letter-spacing:.02em; color:var(--ink-3) }
.palier.atteint{ background:var(--ok-voile); border-color:var(--ok); color:var(--ok) }
.parcours{ border-bottom:1px solid var(--line) }
.parcours-tete{ font-size:11px; letter-spacing:.1em; color:var(--ink-3) }
.jauge{ height:6px; border:0; background:rgba(42,39,33,.12); border-radius:99px; overflow:hidden }
.jauge i{ background:var(--copper) }
.point-etape{
  width:34px; height:34px; border:1px solid var(--line-fort); background:var(--carte);
  border-radius:99px; font-size:12.5px; color:var(--ink-2);
}
.points .point-etape{ flex:0 0 34px }
.point-etape[data-etat="ici"]{ background:var(--copper); border-color:var(--copper); color:var(--paper); -webkit-text-fill-color:var(--paper) }
.point-etape[data-etat="faite"]{ background:var(--char); border-color:var(--char); color:var(--paper); -webkit-text-fill-color:var(--paper) }
.point-etape:hover{ outline:2px solid var(--copper); outline-offset:1px }
.etape h3{ font-size:clamp(19px,2.8vw,23px); text-transform:none }
.groupe-q > p.q{ font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--copper) }
.vigilance b{ font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.14em; color:var(--copper) }
.pastille-etude{ background:var(--ember-voile); color:var(--terra); border-radius:var(--r); font-family:"Space Mono",monospace; font-weight:400 }
.bandeau-compte{ border-radius:var(--r-l); border:1px solid var(--ok); background:var(--ok-voile) }
.jeton-societe{ border-radius:99px; border:1px solid var(--line-fort); background:var(--carte); color:var(--char) }
.verrou .cadenas, .fini .coche{ border-radius:99px; background:var(--copper); color:var(--paper) }
.masque{ font-family:"Space Mono",monospace; color:var(--ink-3) }

/* où poser le groupe */
.demarche{ padding:16px }
.demarche.obligatoire{ border-left:4px solid var(--copper) }
.demarche.vigilance{ border-left:4px solid var(--char) }
.demarche.libre{ border-left:4px solid var(--ok) }
.demarche h4{ font-family:"Archivo",sans-serif; font-weight:600; font-size:17px; text-transform:none }
.demarche .delai{ font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:var(--copper) }
.demarche .source{ border-top:1px solid var(--line); color:var(--ink-3) }
.modele-lettre{ background:var(--sourdine); border:1px solid var(--line); border-radius:var(--r); font-family:"Space Mono",monospace; font-size:12.5px }

/* dépliants et pages légales */
.depliant summary{ font-family:"Archivo",sans-serif; font-weight:600 }
.depliant summary::after{ color:var(--copper) }
.legal-menu{ border:1px solid rgba(42,39,33,.10); background:var(--carte); box-shadow:none; border-radius:var(--r-l); overflow:hidden }
.legal-menu button{
  font-family:"Archivo Narrow","Archivo",sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0; text-transform:none; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink-2); padding:13px 16px;
}
.legal-menu button:last-child{ border-bottom:0 }
.legal-menu button span{ font-family:"Space Mono",monospace; font-size:11px; color:var(--ink-3) }
.legal-menu button:hover{ background:var(--sourdine); color:var(--char) }
.legal-menu button.actif{ background:var(--copper); color:var(--paper); -webkit-text-fill-color:var(--paper) }
.legal-menu button.actif span{ color:rgba(242,238,227,.7) }
@media(max-width:899px){ .legal-menu{ border-radius:var(--r-l) } }
.legal-corps h3{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:clamp(18px,2.4vw,21px);
  text-transform:none; border-top:1px solid var(--line); color:var(--char);
}
.legal-corps a{ color:var(--copper) }
.legal-date{ font-family:"Space Mono",monospace; letter-spacing:.06em; color:var(--ink-3) }
.legal-cadre{ padding:18px }
.legal-alerte{ border-left:4px solid var(--copper); background:var(--ember-voile) }
.legal-fiche > summary{ font-family:"Archivo",sans-serif; font-weight:600 }
.legal-fiche > summary::after{ font-family:"Space Mono",monospace; color:var(--copper) }
.legal-fiche[open] > summary{ background:var(--char); color:var(--paper) }
.legal-fiche[open] > summary::after{ color:var(--paper) }
.legal-lignes .cle{ font-size:10.5px; letter-spacing:.14em; color:var(--copper) }
.formule-type{ background:var(--sourdine); border:1px solid var(--line); border-radius:var(--r); font-family:"Space Mono",monospace; font-size:12.5px }

/* médias, plaque, bas de page */
.cadre-video{ background:var(--char) }
.cadre-video .legende{ background:var(--char); color:var(--paper); font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.12em }
.cliche figcaption{ background:rgba(242,238,227,.9); border:0; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--ink-2) }
.plaque{ padding:18px }
.plaque-titre{ font-family:"Space Mono",monospace; letter-spacing:.2em; color:var(--copper) }
.plaque-lien{ font-family:"Space Mono",monospace; color:var(--copper) }
.plaque-version span.mono{ font-family:"Archivo",sans-serif; font-weight:600; font-size:22px; color:var(--char) }
.plaque-version small{ font-family:"Archivo",sans-serif; color:var(--ink-3) }
footer.socle{ background:var(--char); color:rgba(242,238,227,.7); border-top:0 }
footer.socle h4{ font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.2em; color:var(--copper); text-transform:uppercase }
footer.socle a:hover{ color:var(--paper) }
footer.socle .mono{ font-family:"Space Mono",monospace }
.mentions{ border-top:1px solid rgba(242,238,227,.12); color:rgba(242,238,227,.5) }

/* comparateur, messages, avis */
.barre-comparer{ background:var(--char); color:var(--paper); border:0; border-radius:99px }
.barre-comparer .bouton{ background:var(--copper); border-color:var(--copper); color:var(--paper) }
.barre-comparer .bouton:hover{ background:var(--terra); border-color:var(--terra) }
.barre-comparer .bouton.fantome{ background:none; border-color:transparent; color:rgba(242,238,227,.7) }
.voile-comp{ background:rgba(42,39,33,.55) }
.tableau-comp thead th{ font-size:17px }
.message{ background:var(--char); color:var(--paper); border-radius:var(--r); font-weight:500; letter-spacing:0; font-family:"Archivo",sans-serif }
.avis blockquote{ padding:20px }
.etoiles, .avis .etoiles, .note-ligne .etoiles{ color:var(--copper) }
.avis cite{ font-family:"Space Mono",monospace; font-size:12px; color:var(--ink-3) }
.economie{ background:var(--ok-voile); color:var(--ok); border:1px solid var(--ok); border-radius:var(--r) }
.quantite{ border-radius:var(--r); border:1px solid var(--line-fort) }
.quantite button{ background:var(--carte); color:var(--char) }
.quantite button:hover{ background:var(--sourdine) }
.fini .numero{ font-family:"Space Mono",monospace }
:focus-visible{ outline:2px solid var(--copper); outline-offset:2px; border-radius:2px }

/* Le formulaire type contient de longues lignes de points : on les laisse
   défiler dans leur cadre plutôt que d'élargir la page. */
.legal-grille > *{ min-width:0 }
.formule-type{ overflow-x:auto; font-size:12px }