/* Variantes de mise en page des nouveaux articles — 2026-08-05 */
body[class*="article-layout--"] .article-head{position:relative;padding-top:4.5rem;padding-bottom:3rem}
body[class*="article-layout--"] .article-head:before{position:absolute;top:1rem;right:0;font-family:Georgia,serif;font-size:clamp(5rem,13vw,11rem);font-weight:700;line-height:1;opacity:.06;content:"GUIDE"}
body[class*="article-layout--"] .article-hero{border-radius:1.5rem;box-shadow:0 24px 65px rgba(17,43,35,.13)}
body[class*="article-layout--"] .article-layout{gap:clamp(2rem,5vw,5rem)}
body[class*="article-layout--"] .toc{top:7rem;border-top:4px solid currentColor;border-radius:0 0 1rem 1rem}
body[class*="article-layout--"] .article-content h2{position:relative;padding-left:1.2rem}
body[class*="article-layout--"] .article-content h2:before{position:absolute;top:.15em;bottom:.15em;left:0;width:4px;border-radius:3px;background:currentColor;content:"";opacity:.35}
.article-layout--conversion .article-head{background:linear-gradient(135deg,#eef8f5,#fff)}.article-layout--conversion .key-takeaway{border-left:6px solid #2c8b73}
.article-layout--local .article-head{background:radial-gradient(circle at 80% 20%,#e3efe4,transparent 35%)}.article-layout--local .article-hero{clip-path:polygon(0 0,94% 0,100% 14%,100% 100%,0 100%)}
.article-layout--visual .article-hero,.article-layout--trade-garden .article-hero{border-radius:48% 52% 42% 58%/54% 45% 55% 46%}.article-layout--visual .article-head,.article-layout--trade-garden .article-head{background:#f2f5e9}
.article-layout--casebook .article-content,.article-layout--trade-renovation .article-content{counter-reset:section}.article-layout--casebook .article-content h2:after,.article-layout--trade-renovation .article-content h2:after{counter-increment:section;content:"0" counter(section);position:absolute;right:100%;margin-right:1rem;color:#b98965;font-size:.7em}
.article-layout--pricing .article-head{background:#173a32;color:white}.article-layout--pricing .article-head h1,.article-layout--pricing .article-meta{color:white}.article-layout--pricing .article-hero{border-radius:.35rem}
.article-layout--trade-water .article-head{background:linear-gradient(135deg,#e8f7f9,#fff)}.article-layout--trade-water .article-hero{border-radius:2.5rem 2.5rem .5rem .5rem}
.article-layout--trade-electric .article-head{background-image:linear-gradient(rgba(212,174,37,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(212,174,37,.09) 1px,transparent 1px);background-size:36px 36px}.article-layout--trade-electric .article-hero{border:3px solid #d2ad2e;border-radius:.5rem}
.article-layout--trade-wood .article-head{background:#efe2d1}.article-layout--trade-wood .article-hero{border:10px solid #fff;border-radius:0;outline:1px solid #a37b58}
.article-layout--trade-renovation .article-head{background:linear-gradient(90deg,#eee8e0 50%,#faf8f5 50%)}.article-layout--trade-renovation .article-hero{border-radius:0}
@media(max-width:760px){body[class*="article-layout--"] .article-head{padding-top:3rem}.article-layout--casebook .article-content h2:after,.article-layout--trade-renovation .article-content h2:after{display:none}}

/* Dark mode renforcé — nouveaux articles — 2026-08-05 */
html[data-theme="dark"] body[class*="article-layout--"] { background:#0d1718; color:#edf8f4; }
html[data-theme="dark"] body[class*="article-layout--"] .article-head { background:#102020; color:#edf8f4; border-color:#35534b; }
html[data-theme="dark"] body[class*="article-layout--"] .article-head:before { color:#d8eee7; opacity:.045; }
html[data-theme="dark"] body[class*="article-layout--"] :is(.article-head h1,.article-meta,.eyebrow) { color:#edf8f4; }
html[data-theme="dark"] body[class*="article-layout--"] .article-meta { color:#b8cfca; }
html[data-theme="dark"] body[class*="article-layout--"] .article-hero { background:#152526; border-color:#35534b; box-shadow:0 24px 65px rgba(0,0,0,.38); }
html[data-theme="dark"] body[class*="article-layout--"] :is(.toc,.key-takeaway,.pillar-return,.action-panel,.mini-card) { background:#152526!important; border-color:#35534b!important; color:#edf8f4; }
html[data-theme="dark"] body[class*="article-layout--"] .toc a { color:#c7ddd7; border-color:#35534b; }
html[data-theme="dark"] body[class*="article-layout--"] .toc a:hover { color:#a3f0d5; background:#1b302e; }
html[data-theme="dark"] body[class*="article-layout--"] .article-content :is(p,li) { color:#bfd0ca!important; }
html[data-theme="dark"] body[class*="article-layout--"] .article-content :is(h2,h3,strong) { color:#edf8f4; }
html[data-theme="dark"] body[class*="article-layout--"] .article-content a { color:#91e7cc; text-decoration-color:#5fae98; }
html[data-theme="dark"] body[class*="article-layout--"] .article-content a:hover { color:#c8ffec; }
html[data-theme="dark"] body[class*="article-layout--"] .key-takeaway span,
html[data-theme="dark"] body[class*="article-layout--"] .action-label { color:#b6ff2d; }
html[data-theme="dark"] body[class*="article-layout--"] .cta { background:linear-gradient(135deg,#17332e,#102221); border:1px solid #41635a; color:#edf8f4; }
html[data-theme="dark"] body[class*="article-layout--"] .cta :is(h2,p) { color:#edf8f4!important; }
html[data-theme="dark"] body[class*="article-layout--"] .cta .btn { background:#b6ff2d; color:#07130e; }
html[data-theme="dark"] body[class*="article-layout--"] .related { background:#101d1d; border-color:#35534b; }
html[data-theme="dark"] body[class*="article-layout--"] .related h2 { color:#edf8f4; }
html[data-theme="dark"] body[class*="article-layout--"] .mini-card:hover { border-color:#76c9ae!important; background:#1b302e!important; }

html[data-theme="dark"] .article-layout--conversion .article-head { background:linear-gradient(135deg,#102521,#0d1718); }
html[data-theme="dark"] .article-layout--local .article-head { background:radial-gradient(circle at 80% 20%,rgba(76,130,91,.22),transparent 36%),#10201d; }
html[data-theme="dark"] :is(.article-layout--visual,.article-layout--trade-garden) .article-head { background:#132019; }
html[data-theme="dark"] .article-layout--pricing .article-head { background:#10271f; }
html[data-theme="dark"] .article-layout--trade-water .article-head { background:linear-gradient(135deg,#102a2d,#0d1718); }
html[data-theme="dark"] .article-layout--trade-electric .article-head { background-color:#12191a; background-image:linear-gradient(rgba(225,190,65,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(225,190,65,.1) 1px,transparent 1px); }
html[data-theme="dark"] .article-layout--trade-electric .article-hero { border-color:#d9b83c; }
html[data-theme="dark"] .article-layout--trade-wood .article-head { background:#211a16; }
html[data-theme="dark"] .article-layout--trade-wood .article-hero { border-color:#32271f; outline-color:#b1845e; }
html[data-theme="dark"] .article-layout--trade-renovation .article-head { background:linear-gradient(90deg,#201c19 50%,#111a19 50%); }
html[data-theme="dark"] :is(.article-layout--casebook,.article-layout--trade-renovation) .article-content h2:after { color:#d3a37e; }
html[data-theme="dark"] body[class*="article-layout--"] :focus-visible { outline:3px solid #b6ff2d; outline-offset:4px; }

/* Harmonisation dark des nouveaux articles avec la page d’accueil — 2026-08-05 */
html[data-theme="dark"] body[class*="article-layout--"] {
    --article-bg: #101b1a;
    --article-bg-soft: #172522;
    --article-surface: #1a2927;
    --article-surface-raised: #20322e;
    --article-text: #d8e7e0;
    --article-muted: #a9c0b7;
    --article-line: #35534b;
    --article-line-strong: #496b60;
    --article-green: #78c4a0;
    --article-green-strong: #9bdbba;
    --article-clay: #ef9b78;
    --article-gold: #e6bd6b;
    --article-lime: #b6ff2d;
    --article-accent: var(--article-green);
    --article-accent-2: var(--article-clay);
    background: var(--article-bg);
    color: var(--article-text);
}
html[data-theme="dark"] body.article-layout--conversion { --article-accent: var(--article-clay); --article-accent-2: var(--article-green); }
html[data-theme="dark"] body.article-layout--local { --article-accent: var(--article-green-strong); --article-accent-2: var(--article-gold); }
html[data-theme="dark"] body.article-layout--visual,
html[data-theme="dark"] body.article-layout--trade-garden { --article-accent: var(--article-green); --article-accent-2: var(--article-gold); }
html[data-theme="dark"] body.article-layout--casebook,
html[data-theme="dark"] body.article-layout--trade-renovation { --article-accent: var(--article-gold); --article-accent-2: var(--article-clay); }
html[data-theme="dark"] body.article-layout--pricing { --article-accent: var(--article-clay); --article-accent-2: var(--article-gold); }
html[data-theme="dark"] body.article-layout--trade-water { --article-accent: var(--article-green); --article-accent-2: var(--article-clay); }
html[data-theme="dark"] body.article-layout--trade-electric { --article-accent: var(--article-gold); --article-accent-2: var(--article-green); }
html[data-theme="dark"] body.article-layout--trade-wood { --article-accent: var(--article-clay); --article-accent-2: var(--article-gold); }

html[data-theme="dark"] body[class*="article-layout--"] .article-head {
    background:
      radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--article-accent) 18%, transparent), transparent 34%),
      linear-gradient(145deg, var(--article-bg-soft), var(--article-bg));
    color: var(--article-text);
    border-color: var(--article-line);
}
html[data-theme="dark"] body[class*="article-layout--"] :is(.article-head h1,.article-content h2,.article-content h3,.related h2,.toc strong,.action-panel h2,.cta h2) { color: var(--article-text); }
html[data-theme="dark"] body[class*="article-layout--"] :is(.article-meta,.breadcrumb,.article-content p,.article-content li,.toc a,.cta p) { color: var(--article-muted)!important; }
html[data-theme="dark"] body[class*="article-layout--"] :is(.eyebrow,.action-label,.key-takeaway>span) { color: var(--article-accent); }
html[data-theme="dark"] body[class*="article-layout--"] .eyebrow::before,
html[data-theme="dark"] body[class*="article-layout--"] .article-content h2::before { background: var(--article-accent-2); opacity: 1; }

html[data-theme="dark"] body[class*="article-layout--"] :is(.toc,.key-takeaway,.pillar-return,.action-panel,.mini-card,.cta) {
    background: var(--article-surface)!important;
    border-color: var(--article-line)!important;
    color: var(--article-text);
    box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
html[data-theme="dark"] body[class*="article-layout--"] .key-takeaway { border-left: 5px solid var(--article-accent)!important; }
html[data-theme="dark"] body[class*="article-layout--"] .toc { border-top-color: var(--article-accent)!important; }
html[data-theme="dark"] body[class*="article-layout--"] .toc a:hover,
html[data-theme="dark"] body[class*="article-layout--"] .mini-card:hover {
    background: var(--article-surface-raised)!important;
    border-color: var(--article-accent)!important;
    color: #f4fbf7!important;
}
html[data-theme="dark"] body[class*="article-layout--"] .article-content a,
html[data-theme="dark"] body[class*="article-layout--"] .breadcrumb a,
html[data-theme="dark"] body[class*="article-layout--"] .pillar-return a {
    color: var(--article-green-strong);
    text-decoration-color: rgba(155,219,186,.58);
}
html[data-theme="dark"] body[class*="article-layout--"] .article-content a:hover { color: #c8ffec; }
html[data-theme="dark"] body[class*="article-layout--"] .cta .btn {
    background: var(--article-lime);
    color: #101b1a;
    box-shadow: 0 12px 28px rgba(182,255,45,.16);
}
html[data-theme="dark"] body[class*="article-layout--"] .cta .btn:hover { background: #c8ff63; color: #101b1a; }
html[data-theme="dark"] body[class*="article-layout--"] .related { background: var(--article-bg-soft); border-color: var(--article-line); }
html[data-theme="dark"] body[class*="article-layout--"] .article-hero {
    background: var(--article-surface);
    border-color: var(--article-line-strong);
    box-shadow: 0 24px 65px rgba(0,0,0,.36);
}
html[data-theme="dark"] body[class*="article-layout--"] :focus-visible { outline: 3px solid var(--article-lime); outline-offset: 4px; }

/* Les variantes gardent leur rythme, mais utilisent uniquement vert, argile et or de l’accueil. */
html[data-theme="dark"] .article-layout--trade-electric .article-head {
    background-color: var(--article-bg-soft);
    background-image: linear-gradient(rgba(230,189,107,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(230,189,107,.10) 1px,transparent 1px);
}
html[data-theme="dark"] .article-layout--trade-electric .article-hero { border-color: var(--article-gold); }
html[data-theme="dark"] .article-layout--trade-wood .article-hero { border-color: var(--article-line-strong); outline-color: var(--article-clay); }
html[data-theme="dark"] :is(.article-layout--casebook,.article-layout--trade-renovation) .article-content h2::after { color: var(--article-gold); }