@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sora-600.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/sora-600.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/sora-600.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hanken-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spacemono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/spacemono-700.woff2) format('woff2')}

/* ============================================================================
   Le Carnet du Bois — thème (guide bois de chauffage, Ille-et-Vilaine).
   DA « inspirée Woodbhai, personnalisée » : photo-first, accent tan + braise +
   vert forêt, titres Sora, corps Hanken Grotesk, cotes Space Mono, signature
   bois-de-bout. Concaténé au build : fonts + bootstrap purgé + ce fichier.
   Anti-footprint réseau : 0 tiret cadratin, 0 année visible (gérés au générateur).
   ========================================================================== */
:root{
  --cream:#FBF6EE; --sable:#EFE6D6; --sable-2:#F5EEE1; --ink:#1A1613; --ink-2:#2A231C;
  --tan:#C0894A; --tan-d:#A06E33; --braise:#D0512A; --braise-d:#B23F1C; --foret:#3B4A3C; --foret-l:#5E7460;
  --gris:#6E6459; --line:rgba(26,22,19,.12);
  --disp:'Sora',system-ui,sans-serif; --sans:'Hanken Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --shadow:0 30px 70px -34px rgba(26,22,19,.5); --shadow-s:0 10px 28px -14px rgba(26,22,19,.35);
  --wrap:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--ink-2); background:var(--cream); margin:0; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--ink); text-wrap:balance}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.2rem)}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tan-d); font-weight:700; display:inline-flex; align-items:center; gap:.5rem}
.eyebrow::before{content:"+"; color:var(--braise); font-size:1.1em; font-weight:700}
.btn{border:0; border-radius:4px; padding:.95rem 1.6rem; font-weight:700; font-family:var(--sans); font-size:.98rem; display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; transition:transform .2s,background .2s; letter-spacing:.01em}
.btn svg{width:17px; height:17px; flex:none}
.btn-tan{background:var(--tan); color:#fff} .btn-tan:hover{background:var(--tan-d); color:#fff; transform:translateY(-2px)}
.btn-braise{background:var(--braise); color:#fff} .btn-braise:hover{background:var(--braise-d); color:#fff; transform:translateY(-2px)}
.btn-out{background:transparent; color:var(--ink); border:2px solid var(--ink)} .btn-out:hover{background:var(--ink); color:#fff}
.btn-outw{background:rgba(255,255,255,.06); color:#fff; border:2px solid rgba(255,255,255,.4)} .btn-outw:hover{border-color:var(--tan); background:#fff; color:var(--ink)}
.section{padding:clamp(3.4rem,7vw,5.5rem) 0}
.shead h2{font-size:clamp(2rem,4.4vw,3.2rem); margin:.7rem 0 .8rem}
.shead p{color:var(--gris); font-size:1.06rem; max-width:56ch; margin:0}

/* topline + header */
.topline{background:var(--ink); color:#d8cdb9; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em}
.topline .wrap{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0}
.topline b{color:var(--tan)}
.head{position:sticky; top:0; z-index:30; background:rgba(251,246,238,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.head .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px}
.brand{display:flex; align-items:center; gap:.65rem; font-family:var(--disp); font-weight:800; font-size:1.28rem; color:var(--ink); letter-spacing:-.03em}
.brand .ring{width:38px; height:38px; flex:none}
.brand span{color:var(--braise)}
.nav{display:flex; gap:1.6rem; align-items:center}
.nav a{font-weight:600; font-size:.94rem; color:var(--ink-2)} .nav a:hover{color:var(--braise)}
.nav .plus{color:var(--tan); font-weight:700}
.burger{display:none; background:none; border:0; color:var(--ink); padding:.3rem; cursor:pointer}
.burger svg{width:28px; height:28px}
.scrim{position:fixed; inset:0; background:rgba(20,16,12,.5); opacity:0; visibility:hidden; transition:.25s; z-index:40}
.scrim.open{opacity:1; visibility:visible}
.mnav{position:fixed; top:0; right:0; bottom:0; width:min(80vw,320px); background:var(--cream); z-index:50; transform:translateX(100%); transition:transform .3s; padding:5rem 1.6rem 2rem; display:flex; flex-direction:column; gap:.4rem; box-shadow:var(--shadow)}
.mnav.open{transform:translateX(0)}
.mnav a{font-family:var(--disp); font-weight:700; font-size:1.15rem; color:var(--ink); padding:.6rem 0; border-bottom:1px solid var(--line)}
.mnav .close{position:absolute; top:1.2rem; right:1.2rem; background:none; border:0; font-size:1.8rem; color:var(--ink); cursor:pointer}

/* HERO photo */
.hero{position:relative; color:#fff; overflow:hidden}
.hero .bg{position:absolute; inset:0; z-index:0}
.hero .bg img{width:100%; height:100%; object-fit:cover}
.hero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(20,16,12,.92) 0%, rgba(20,16,12,.72) 42%, rgba(20,16,12,.28) 72%, rgba(20,16,12,.15) 100%)}
.hero .wrap{position:relative; z-index:1; padding:clamp(4rem,10vw,7.5rem) 0}
.hero .inner{max-width:640px}
.hero .eyebrow{color:var(--tan)} .hero .eyebrow::before{color:var(--braise)}
.hero h1{color:#fff; font-size:clamp(2.6rem,6vw,4.6rem); margin:1.1rem 0 1.2rem; letter-spacing:-.03em}
.hero h1 em{font-style:normal; color:var(--tan)}
.hero p.lead{color:rgba(255,255,255,.82); font-size:1.15rem; max-width:44ch; margin-bottom:2rem}
.hero .actions{display:flex; gap:.9rem; flex-wrap:wrap}
.hero-strip{position:relative; z-index:1; background:rgba(20,16,12,.55); backdrop-filter:blur(4px); border-top:1px solid rgba(255,255,255,.12)}
.hero-strip .wrap{display:flex; gap:0; padding-block:0}
.hero-strip div{flex:1; padding:1.1rem clamp(1rem,3vw,2rem); border-right:1px solid rgba(255,255,255,.12); color:#fff}
.hero-strip div:last-child{border-right:0}
.hero-strip .n{font-family:var(--mono); font-weight:700; font-size:1.4rem; color:var(--tan)}
.hero-strip .l{font-size:.8rem; color:rgba(255,255,255,.68); margin-top:.2rem}

/* trust */
.trust{background:var(--foret); color:#e7eee7}
.trust .wrap{display:flex; flex-wrap:wrap; gap:1rem 2.4rem; justify-content:center; padding:.85rem 0; font-family:var(--mono); font-size:.78rem; letter-spacing:.03em}
.trust b{color:#fff}

/* about + meters + overlap */
.about .wrap{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.about .lead2{color:var(--gris); font-size:1.06rem; margin:.9rem 0 0}
.meters{display:flex; flex-direction:column; gap:1.5rem; margin-top:1.8rem}
.meter{display:flex; align-items:center; gap:1.2rem}
.ring{width:96px; height:96px; flex:none; position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .c{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:1.1rem; color:var(--ink)}
.ring .c small{font-size:.6em; color:var(--tan-d)}
.meter h3{font-size:1.2rem; margin-bottom:.2rem} .meter p{color:var(--gris); font-size:.92rem; margin:0}
.overlap{position:relative; min-height:420px}
.overlap img{position:absolute; border-radius:6px; box-shadow:var(--shadow)}
.overlap .a{width:74%; top:0; left:0; aspect-ratio:4/5; object-fit:cover}
.overlap .b{width:58%; bottom:0; right:0; aspect-ratio:1; object-fit:cover; border:8px solid var(--tan)}

/* combustibles gallery */
.gal-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2rem; flex-wrap:wrap}
.arrows{display:flex; gap:.5rem}
.arrows button{width:46px; height:46px; border:0; background:var(--ink); color:#fff; border-radius:4px; font-size:1.1rem; cursor:pointer; transition:background .2s}
.arrows button:hover{background:var(--braise)}
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.gcard{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-s); display:block}
.gcard img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.gcard:hover img{transform:scale(1.06)}
.gcard .cap{position:absolute; inset:auto 0 0 0; padding:1.1rem; background:linear-gradient(transparent, rgba(20,16,12,.88)); color:#fff}
.gcard .cap .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tan)}
.gcard .cap h3{color:#fff; font-size:1.15rem; margin-top:.2rem}

/* comparatif */
.compare{background:var(--sable); border-radius:14px; padding:clamp(1.6rem,3vw,2.6rem)}
/* Conteneur posé par le générateur autour de tout <table> du corps : sans lui le tableau
   déborde de l'écran sur mobile au lieu de défiler dans son propre cadre. */
.tw{overflow-x:auto; margin:0 0 1.2rem}
.ctable{width:100%; border-collapse:collapse; font-size:.94rem}
.ctable th{text-align:left; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); padding:.7rem .9rem; border-bottom:2px solid var(--line)}
.ctable td{padding:.9rem .9rem; border-bottom:1px solid var(--line)}
.ctable td:first-child{font-weight:800; font-family:var(--disp)}
.ctable .v{font-family:var(--mono); font-weight:700; color:var(--braise-d)}
.ctable tr:last-child td{border-bottom:0}

/* conseils cards */
.acards{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.1rem}
.acard{background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.4rem; transition:transform .2s,box-shadow .2s; position:relative; overflow:hidden; display:block}
.acard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--braise); opacity:0; transition:opacity .2s}
.acard:hover{transform:translateY(-3px); box-shadow:var(--shadow-s)} .acard:hover::before{opacity:1}
.acard .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--foret-l); margin-bottom:.5rem}
.acard h3{font-size:1.08rem; line-height:1.2} .acard p{font-size:.87rem; color:var(--gris); margin:.5rem 0 0}

/* cta */
.cta{position:relative; overflow:hidden; border-radius:16px; color:#fff}
.cta .bg{position:absolute; inset:0; z-index:0} .cta .bg img{width:100%; height:100%; object-fit:cover}
.cta .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,16,12,.94), rgba(20,16,12,.7))}
.cta .in{position:relative; z-index:1; padding:clamp(2.4rem,5vw,4rem); max-width:620px}
.cta h2{color:#fff; font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:.8rem}
.cta p{color:rgba(255,255,255,.82); margin:0 0 1.6rem}

/* footer */
.foot{background:var(--ink); color:rgba(216,205,185,.72); padding:3.2rem 0 2rem; font-size:.9rem}
.foot .grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem}
.foot h4{color:#fff; font-family:var(--disp); font-size:1rem; margin-bottom:.9rem}
.foot a{display:block; color:rgba(216,205,185,.72); padding:.25rem 0} .foot a:hover{color:var(--tan)}
.foot .fb{display:flex; align-items:center; gap:.5rem; color:#fff; font-family:var(--disp); font-weight:800; font-size:1.2rem; margin-bottom:.7rem}
.foot .fb .ring{width:30px;height:30px}
.foot-bottom{border-top:1px solid rgba(216,205,185,.14); margin-top:2.2rem; padding-top:1.4rem; font-family:var(--mono); font-size:.72rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:rgba(216,205,185,.5)}

/* pages intérieures (guides/conseils) */
.crumb{border-bottom:1px solid var(--line); background:var(--sable-2)}
.crumb .wrap{display:flex; align-items:center; gap:.5rem; padding-block:.9rem; font-family:var(--mono); font-size:.76rem; color:var(--gris)}
.crumb a:hover{color:var(--braise)} .crumb span{color:var(--ink); font-weight:700}
.art-hero{padding:clamp(2.4rem,5vw,3.6rem) 0 0}
.art-hero .eyebrow{margin-bottom:.6rem}
.art-hero h1{font-size:clamp(2rem,4.5vw,3.1rem); max-width:20ch}
.art-hero .lead{color:var(--gris); font-size:1.12rem; max-width:60ch; margin-top:1rem}
.art-meta{display:flex; gap:.8rem; align-items:center; margin-top:1.2rem; font-family:var(--mono); font-size:.76rem; color:var(--gris)}
.art-meta i{width:4px;height:4px;border-radius:50%;background:var(--sable);display:inline-block}
.pg-body{padding:clamp(2rem,5vw,3.5rem) 0}
.pg-body .wrap{display:grid; grid-template-columns:250px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.pg-side{position:sticky; top:100px; display:flex; flex-direction:column; gap:1.4rem}
.toc{font-size:.9rem} .toc__h{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tan-d); display:block; margin-bottom:.7rem}
.toc a{display:block; color:var(--gris); padding:.3rem 0; border-left:2px solid var(--line); padding-left:.9rem}
.toc a:hover,.toc a.on{color:var(--ink); border-color:var(--braise)}
.side-cta{background:var(--sable); border-radius:10px; padding:1.3rem}
.side-cta p{font-size:.9rem; color:var(--gris); margin:.4rem 0 1rem}
.pg-main{max-width:72ch; min-width:0}
.pg-sec{margin-bottom:2.6rem; scroll-margin-top:100px}
.pg-sec h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1rem}
.pg-sec h3{font-size:1.16rem; margin:1.7rem 0 .5rem}
.pg-sec p{margin:0 0 1.05rem; color:#3B342C}
.pg-sec ul{margin:0 0 1.2rem; padding-left:0; list-style:none}
.pg-sec ul li{position:relative; padding-left:1.6rem; margin-bottom:.5rem; color:#3B342C}
.pg-sec ul li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:2px; background:var(--tan)}
/* Listes ordonnées : les procédures réellement séquentielles (allumage, mesure) passent en <ol>,
   qui n'avait aucun style et retombait sur le rendu par défaut du navigateur au milieu d'une page
   entièrement composée. Numéro en Space Mono braise, comme les autres repères chiffrés du site.
   Cible `.pg-sec ol` et pas une classe : sanitizeBody retire les `class` du corps des articles. */
.pg-sec ol{margin:0 0 1.2rem; padding-left:0; list-style:none; counter-reset:etape}
.pg-sec ol li{position:relative; padding-left:2.4rem; margin-bottom:.7rem; color:#3B342C; counter-increment:etape}
.pg-sec ol li::before{content:counter(etape); position:absolute; left:0; top:0; width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.78rem; font-weight:700; color:#fff; background:var(--braise); border-radius:50%}
.pg-sec a{color:var(--braise-d); text-decoration:underline; text-underline-offset:3px}
.faqi{border:1px solid var(--line); border-radius:8px; margin-bottom:.7rem; background:#fff; overflow:hidden}
.faqi summary{cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--disp); font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary .chev{transition:transform .2s; color:var(--braise); flex:none}
.faqi[open] summary .chev{transform:rotate(180deg)}
.faqi__a{padding:0 1.3rem 1.2rem; color:#3B342C}
/* Vidéo en façade. Le bouton porte la vignette ; le lecteur YouTube ne le remplace qu'au clic. */
.vid{margin:0 0 2.2rem}
.vid__go{display:block; position:relative; width:100%; padding:0; border:0; background:var(--ink); border-radius:10px; overflow:hidden; cursor:pointer; line-height:0}
.vid__go img{width:100%; height:auto; display:block; opacity:.86; transition:opacity .25s,transform .4s}
.vid__go:hover img{opacity:1; transform:scale(1.02)}
.vid__play{position:absolute; inset:0; margin:auto; width:68px; height:68px; border-radius:50%; background:var(--braise); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(20,16,12,.45); transition:transform .25s}
.vid__play svg{width:30px; height:30px; margin-left:3px}
.vid__go:hover .vid__play{transform:scale(1.08)}
.vid iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:10px; display:block}
.vid figcaption{margin-top:.7rem; font-size:.86rem; color:var(--gris); display:flex; gap:.6rem; flex-wrap:wrap; align-items:baseline; line-height:1.5}
.vid figcaption span{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tan-d)}

/* Repères : les faits chiffrés qui portent l'article, ramassés en fin de page. */
.reperes{display:grid; gap:.6rem; margin:0 0 1.2rem; padding:0; list-style:none}
.pg-sec ul.reperes li{padding:.85rem 1.1rem .85rem 1.2rem; margin:0; background:var(--sable-2); border-left:3px solid var(--tan); border-radius:0 6px 6px 0; font-size:.95rem}
.pg-sec ul.reperes li::before{content:none}
.ilinks{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem}
.ilink{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; background:#fff; border:1px solid var(--line); border-radius:8px; font-weight:600; transition:transform .2s,border-color .2s}
.ilink:hover{border-color:var(--tan); transform:translateY(-2px)} .ilink svg{width:16px;height:16px;color:var(--tan);flex:none}

@media(max-width:900px){
  .nav{display:none} .burger{display:inline-flex}
  .about .wrap{grid-template-columns:1fr; gap:2.5rem} .overlap{min-height:340px}
  .gal{grid-template-columns:1fr 1fr}
  .foot .grid{grid-template-columns:1fr 1fr}
  .pg-body .wrap{grid-template-columns:1fr} .pg-side{position:static; flex-direction:column-reverse} .toc{display:none}
}
/* Sous 560px, marque + bouton + burger ne tiennent plus sur une ligne : le nom de marque se
   cassait en trois lignes et passait sous le bouton. Le menu mobile contient deja « Nos conseils »,
   masquer le bouton du bandeau ne retire donc aucun acces. */
@media(max-width:560px){ .head .btn{display:none} .hero-strip .wrap{flex-wrap:wrap} .hero-strip div{flex:1 1 50%} .gal{grid-template-columns:1fr} .foot .grid{grid-template-columns:1fr} }
/* `html` et pas `*` : le sélecteur universel (0,0,0) perdait contre `html{scroll-behavior:smooth}`
   (0,0,1) plus haut, donc la préférence « moins d'animations » n'avait aucun effet sur le
   défilement. Les ancres de sommaire sautaient quand meme en glissant. */
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn,.acard,.gcard img,.ilink{transition:none} }