File: C:\\Users\\solig\\Documents\\Codex\\2026-09-06\\referenced-chatgpt-conversation-this-is-an\\outputs\\bati-facile\\assets\\css\\style.css
:root{--ink:#102a43;--blue:#0e4f8b;--blue-deep:#093a69;--blue-pale:#eaf4fb;--green:#159b70;--yellow:#f7c948;--cream:#fbfaf6;--line:#d7e1e7;--muted:#587080;--white:#fff;--shadow:0 18px 45px rgba(16,42,67,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;z-index:5;background:#fff;padding:.6rem 1rem}
.site-header{height:80px;padding:0 max(5vw,28px);display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line);background:rgba(251,250,246,.96);position:sticky;top:0;z-index:3}
.brand{display:flex;align-items:center;gap:9px;font-size:1.15rem;font-weight:800;letter-spacing:-.06em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:var(--blue);color:#fff;font-size:.95rem;letter-spacing:0}
.brand-accent{color:var(--green)}
.main-nav{display:flex;gap:24px;margin-left:auto;font-size:.87rem;font-weight:700}
.main-nav a{color:var(--muted);padding:27px 0 23px;border-bottom:3px solid transparent}
.main-nav a.active,.main-nav a:hover{color:var(--blue);border-color:var(--green)}
.header-link{font-size:.8rem;font-weight:800;color:var(--blue)}
.header-link span{color:var(--green);font-size:1.1rem;margin-left:4px}
.hero{min-height:540px;display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;padding:76px max(7vw,32px) 60px;overflow:hidden;background:linear-gradient(108deg,#eff8fb 0%,#f8fbf7 62%,#f7f1d9 100%)}
.hero-copy{max-width:700px}
.eyebrow{margin:0 0 14px;color:var(--green);font-size:.73rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.hero h1,.section-heading h2,.method h2,.featured h2,.tutorial h1,.tutorial h2{letter-spacing:-.055em;line-height:1.12}
.hero h1{margin:0;color:var(--blue-deep);font-size:clamp(2.7rem,5vw,4.65rem)}
.hero-lead{max-width:590px;margin:23px 0 28px;color:#3a586b;font-size:1.06rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;align-items:center;gap:13px;padding:13px 19px;border-radius:7px;font-size:.84rem;font-weight:800;transition:.2s}
.button-primary{color:#fff;background:var(--blue);box-shadow:0 7px 16px rgba(14,79,139,.2)}
.button-primary:hover{background:var(--blue-deep);transform:translateY(-1px)}
.button-primary span{color:var(--yellow);font-size:1.2rem}
.button-ghost{border:1px solid #a9bdc7;color:var(--blue)}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:26px;color:var(--muted);font-size:.77rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.hero-art{position:relative;min-height:380px}
.sun{position:absolute;width:230px;height:230px;right:3%;top:20px;border-radius:50%;background:#f9d65e;opacity:.65}
.house{position:absolute;right:11%;bottom:34px;width:300px;height:250px}
.roof{position:absolute;left:2px;top:7px;width:0;height:0;border-left:149px solid transparent;border-right:149px solid transparent;border-bottom:105px solid #0d5a94}
.chimney{position:absolute;right:37px;top:0;width:35px;height:70px;background:#d5e9e7}
.wall{position:absolute;bottom:0;left:23px;width:253px;height:165px;background:#fffdf6;border-radius:3px 3px 0 0;box-shadow:inset 0 -12px #e5f0e4}
.window{position:absolute;top:36px;width:48px;height:55px;background:#b9dfdf;border:7px solid #3e80a6}
.window.one{left:30px}
.window.two{right:28px}
.door{position:absolute;bottom:0;left:105px;width:45px;height:87px;background:#e9bc54}
.plant{position:absolute;bottom:27px;left:12%;width:80px;height:100px}
.plant:after{content:"";position:absolute;bottom:0;left:28px;width:28px;height:30px;border-radius:4px 4px 14px 14px;background:#e6c15a}
.plant span,.plant i,.plant b{position:absolute;bottom:26px;width:25px;height:60px;border-radius:100% 0;background:#3e9b78;transform-origin:bottom}
.plant span{left:23px;transform:rotate(-34deg)}
.plant i{left:42px;transform:rotate(11deg);background:#20735e}
.plant b{left:1px;transform:rotate(-62deg);background:#67b792}
.ground{position:absolute;left:-20%;right:-20%;bottom:0;height:42px;border-radius:50%;background:#b4d6c4}
.intro-strip{display:flex;justify-content:center;gap:34px;align-items:center;padding:20px 6vw;background:var(--blue-deep);color:#dfeefa;font-size:.85rem}
.intro-strip p{margin:0}
.intro-strip span{color:var(--yellow)}
.section{padding:92px max(7vw,32px)}
.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:35px}
.section-heading h2,.method h2{margin:0;font-size:clamp(2rem,3.5vw,3rem)}
.section-heading>p{max-width:365px;margin:0;color:var(--muted);font-size:.9rem}
.category-list{border-top:1px solid var(--line)}
.category-item{border-bottom:1px solid var(--line)}
.category-toggle{width:100%;display:grid;grid-template-columns:62px 1fr 40px 28px;gap:15px;align-items:center;padding:22px 10px;border:0;background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.category-number{color:#83a0ad;font-size:.8rem;font-weight:800}
.category-title strong{display:block;font-size:1.25rem;letter-spacing:-.03em}
.category-title small{color:var(--muted);font-size:.82rem}
.category-icon{font-size:1.6rem;color:var(--green);text-align:center}
.chevron{color:var(--blue);font-size:1.4rem;transition:.2s}
.category-item.open .chevron{transform:rotate(45deg)}
.category-panel{display:none;justify-content:space-between;gap:25px;padding:0 55px 26px 77px;color:var(--muted);font-size:.88rem}
.category-item.open .category-panel{display:flex}
.category-panel p{max-width:600px;margin:0 0 12px}
.text-link{display:inline-block;color:var(--blue);font-weight:800}
.text-link span{color:var(--green);margin-left:6px}
.tag,.coming{align-self:start;padding:5px 10px;border-radius:100px;background:#e1f2ea;color:#167955;font-size:.7rem;font-weight:800;white-space:nowrap}
.coming{background:#eff2f4;color:#6a7e88}
.featured{padding:0 max(7vw,32px) 96px}
.featured-card{display:grid;grid-template-columns:1fr .75fr;overflow:hidden;border-radius:14px;background:var(--blue-deep);color:#fff;box-shadow:var(--shadow)}
.featured-content{padding:50px 55px}
.featured .eyebrow{color:#74d8b3}
.topic{margin:0;color:#b8d2e3;font-size:.76rem;font-weight:800}
.topic span{color:var(--yellow)}
.featured h2{margin:11px 0 14px;font-size:2.55rem}
.featured-content>p:not(.eyebrow):not(.topic){max-width:530px;color:#deebf3;font-size:.93rem}
.featured ul{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:22px 0;list-style:none;color:#d9edf1;font-size:.76rem}
.featured li:before{content:"✓";color:#71d6ad;font-weight:800;margin-right:6px}
.radiator-art{position:relative;min-height:310px;background:linear-gradient(135deg,#d6eee7,#f7dc81);overflow:hidden}
.radiator-top{position:absolute;left:23%;top:59px;width:54%;height:17px;background:#edf4f1;border-radius:7px}
.radiator{position:absolute;left:22%;top:74px;width:57%;height:157px;display:flex;justify-content:space-between}
.radiator i{width:12%;height:100%;border-radius:8px;background:#fffdf7;box-shadow:inset -4px 0 #dfece8}
.radiator-pipe{position:absolute;left:31%;top:230px;width:38%;height:36px;border-left:11px solid #d7dfdc;border-right:11px solid #d7dfdc;border-bottom:11px solid #d7dfdc;border-radius:0 0 14px 14px}
.air{position:absolute;color:#1b926f;font-size:4rem;font-weight:800;animation:float 2s ease-in-out infinite}
.a1{left:19%;top:38px}
.a2{left:10%;top:95px;animation-delay:.4s}
.a3{right:15%;top:30px;animation-delay:.7s}
@keyframes float{50%{transform:translateY(-9px);opacity:.65}
}
.method{padding:92px max(7vw,32px);background:#f0f8f5}
.method>h2{max-width:650px}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.method-grid article{padding:21px 19px;border-radius:8px;background:#fff}
.method-grid span{color:var(--green);font-size:.75rem;font-weight:800}
.method-grid h3{margin:27px 0 7px;font-size:1rem}
.method-grid p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.6}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px max(5vw,28px);background:#092d50;color:#b6d0df;font-size:.72rem}
.site-footer p{margin:0}
.site-footer .brand{color:#fff}


/* Tutorial */.tutorial{max-width:920px;margin:auto;padding:28px 32px 80px}
.breadcrumb{color:#718693;font-size:.75rem}
.breadcrumb a{color:var(--blue);font-weight:700}
.tutorial-hero{position:relative;padding:55px 290px 65px 0;border-bottom:1px solid var(--line)}
.tutorial h1{margin:0;font-size:clamp(2.5rem,5.5vw,4.3rem);color:var(--blue-deep)}
.tutorial-intro{max-width:625px;color:#486475;font-size:1.03rem}
.meta{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}
.meta span{padding:7px 12px;border-radius:5px;background:var(--blue-pale);color:#315c73;font-size:.72rem;font-weight:800}
.meta b{color:var(--green)}
.tutorial-visual{position:absolute;right:0;bottom:50px;width:245px;height:190px;border-radius:12px;background:linear-gradient(135deg,#d9eee8,#f9dd7a);overflow:hidden}
.tutorial-visual .radiator-top{top:35px}
.tutorial-visual .radiator{top:47px;height:100px}
.tutorial-visual .radiator-pipe{top:146px;height:23px;border-width:7px}
.tutorial-visual .air{font-size:2.6rem}
.tutorial-visual .a1{top:12px}
.tutorial-visual .a2{top:49px}
.tutorial-visual .a3{top:12px}
.toc{margin:40px 0 55px;padding:30px 33px;border-radius:10px;background:#e8f4ef}
.toc h2{margin:0;font-size:1.8rem}
.toc>div>p:not(.eyebrow){max-width:550px;margin:8px 0 0;color:#486475;font-size:.85rem}
.toc-columns{display:grid;grid-template-columns:1.1fr 1.25fr 1fr;gap:23px;margin-top:25px}
.toc h3{margin:0 0 9px;color:#177453;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.toc a{display:block;padding:5px 0;color:var(--blue);font-size:.75rem;font-weight:700}
.toc a:hover{text-decoration:underline}
.tutorial section:not(.toc){padding:0 0 43px;margin-bottom:42px;border-bottom:1px solid var(--line)}
.tutorial section>h2{display:flex;align-items:center;gap:13px;margin:0 0 20px;font-size:1.65rem}
.tutorial section>h2>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:.72rem;letter-spacing:0}
.tutorial p{font-size:.92rem}
.tutorial ul{padding-left:22px}
.check-list,.avoid-list{display:grid;gap:8px}
.check-list li::marker{content:'✓  ';color:var(--green);font-weight:800}
.avoid-list li::marker{content:'×  ';color:#c77b32;font-weight:800}
.notice{margin:22px 0;padding:15px 18px;border-left:4px solid var(--green);border-radius:0 6px 6px 0;background:#eef8f4}
.notice b{color:#177453;font-size:.76rem}
.notice p{margin:3px 0 0;font-size:.82rem}
.notice-warning{border-color:#dda92e;background:#fff7df}
.notice-warning b{color:#a87000}
.notice-rule{border-color:var(--blue);background:var(--blue-pale)}
.notice-rule b{color:var(--blue)}
.notice-stop{border-color:#bb5f48;background:#fff0ec}
.notice-stop b{color:#a24937}
.info-table{border:1px solid var(--line);border-radius:7px;overflow:hidden}
.info-table div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.82rem}
.info-table div:last-child{border:0}
.easy{color:var(--green);font-weight:800}
.tool-list{list-style:none;padding:0!important}
.tool-list li{margin:10px 0;padding:12px 16px;border-radius:6px;background:#f1f5f5;font-size:.86rem}
.tool-list li:before{content:'⌁';margin-right:10px;color:var(--green);font-weight:800}
.steps{counter-reset:step;padding:0!important;list-style:none}
.steps>li{position:relative;min-height:58px;padding:0 0 25px 63px;counter-increment:step}
.steps>li:before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-size:.82rem;font-weight:800}
.steps>li:not(:last-child):after{content:'';position:absolute;top:42px;bottom:0;left:18px;border-left:1px dashed #a7bdc8}
.steps h3{margin:0 0 4px;font-size:1rem}
.steps p{margin:0}
.steps.compact li{padding-bottom:18px}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:20px 0;padding:19px;border-radius:7px;background:#eff8f5;color:#50707e;font-size:.78rem;font-weight:700}
.flow i{color:var(--green);font-style:normal}
.flow strong{color:#177453}
.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.two-cards div{padding:21px;border-radius:8px;background:#eef6f8}
.two-cards h3{margin:0;font-size:.92rem}
.two-cards p{margin-bottom:0;font-size:.82rem}
.tutorial .final-advice{padding:45px 48px;margin-top:60px;border:0;border-radius:10px;background:var(--blue-deep);color:#e1eff7}
.final-advice .eyebrow{color:#77d8b4}
.tutorial .final-advice h2{color:#fff;font-size:2rem}
.final-advice p{max-width:720px}
.back-top{text-align:center}
.back-top a{color:var(--blue);font-size:.8rem;font-weight:800}


@media(max-width:760px){.site-header{height:65px;padding:0 20px}
.main-nav,.header-link{display:none}
.hero{grid-template-columns:1fr;padding:58px 26px 20px}
.hero-art{min-height:250px}
.house{transform:scale(.78);transform-origin:bottom right}
.intro-strip{display:block;padding:16px 26px}
.intro-strip span{display:none}
.intro-strip p+p{margin-top:5px}
.section,.method{padding:62px 26px}
.section-heading{display:block}
.section-heading>p{margin-top:12px}
.category-toggle{grid-template-columns:35px 1fr 28px 20px;padding:19px 0}
.category-panel{padding:0 10px 22px 35px}
.category-item.open .category-panel{display:block}
.tag{display:inline-block;margin-top:12px}
.featured{padding:0 26px 62px}
.featured-card{grid-template-columns:1fr}
.featured-content{padding:34px 27px}
.radiator-art{min-height:245px}
.method-grid{grid-template-columns:1fr 1fr}
.site-footer{display:block}
.site-footer p{margin-top:12px}
.tutorial{padding:20px 22px 60px}
.tutorial-hero{padding:42px 0 245px}
.tutorial-visual{bottom:25px;left:0;width:100%;height:190px}
.toc{padding:25px 20px}
.toc-columns,.two-cards{grid-template-columns:1fr}
.tutorial section>h2{font-size:1.38rem}
.info-table div{grid-template-columns:1fr;gap:3px}
.tutorial .final-advice{padding:32px 24px}
.flow{display:block}
.flow i{display:inline-block;margin:0 8px}
.flow span,.flow strong{display:inline-block;margin:4px 0}
}



/* Homepage: white, warm and deliberately understated. */
.home-warm{background:#fff;color:#171a18}
.warm-home{min-height:100vh;display:grid;grid-template-columns:245px 1fr}
.warm-sidebar{display:flex;flex-direction:column;padding:45px 35px 30px;border-right:1px solid #eeeeeb;background:#fff}
.warm-sidebar nav{display:grid;gap:19px;margin-top:105px}
.warm-sidebar nav a{font-size:.87rem;font-weight:600;color:#252825}
.warm-sidebar nav .selected,.warm-sidebar nav a:hover{color:#5a9cba}
.warm-sidebar nav .selected:before{content:'—';padding-right:8px;color:#81bf57}
.sidebar-footer{margin-top:auto;color:#778078;font-size:.7rem;line-height:1.7}
.sidebar-footer p{margin:8px 0 0}
.leaf{color:#8dbd62;font-size:.85rem}
.warm-stage{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#fff 61%,#f7fbf2 100%)}
.warm-header{display:flex;align-items:center;justify-content:flex-end;padding:40px 64px;position:relative;z-index:2}
.warm-wordmark{font-size:1.8rem;font-weight:700;letter-spacing:-.075em}
.warm-wordmark span{color:#63b4d2}
.warm-wordmark b{color:#5fb77b;font-weight:500}
.warm-wordmark em{color:#92c86e;font-style:normal}
.mobile-logo{display:none}
.header-quiet-link{margin-left:auto;color:#29302b;font-size:.76rem;font-weight:600}
.header-quiet-link span{color:#72b4ca;padding-left:5px}
.warm-copy{position:relative;z-index:1;max-width:600px;padding:86px 45px 150px 10.5vw}
.warm-kicker{margin:0 0 17px;color:#80af5e;font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.warm-copy h1{margin:0;font-size:clamp(3rem,5.2vw,5.2rem);font-weight:500;letter-spacing:-.075em;line-height:1.05}
.warm-copy h1 i{color:#61a9c4;font-family:Georgia,serif;font-weight:400}
.warm-lead{max-width:470px;margin:27px 0;color:#66716a;font-size:.92rem;line-height:1.85}
.warm-button{display:inline-flex;gap:22px;align-items:center;padding:13px 18px;border-radius:2px;background:#1d2823;color:#fff;font-size:.78rem;font-weight:700}
.warm-button span{color:#a4cf78;font-size:1.2rem}
.positive-home{position:absolute;right:3.3%;top:115px;width:min(49vw,700px);height:calc(100% - 115px);min-height:590px}
.sun-warm{position:absolute;right:7%;top:5%;width:90px;height:90px;border-radius:50%;background:#f7df91}
.cloud{position:absolute;border-radius:80px;background:#f7faf5}
.cloud:before,.cloud:after{content:'';position:absolute;border-radius:50%;background:inherit}
.cloud-one{top:11%;left:2%;width:97px;height:18px}
.cloud-one:before{left:20px;bottom:5px;width:28px;height:28px}
.cloud-one:after{left:45px;bottom:3px;width:37px;height:37px}
.cloud-two{top:29%;right:1%;width:75px;height:15px}
.cloud-two:before{left:20px;bottom:4px;width:25px;height:25px}
.eco-house{position:absolute;right:13%;bottom:10%;width:min(66%,440px);height:55%}
.roof-warm{position:absolute;top:0;right:0;width:79%;height:125px;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);background:#355359;transform:skewY(-16deg);transform-origin:bottom}
.solar{position:absolute;top:24px;width:32%;height:48px;background:repeating-linear-gradient(90deg,#8bc6d4 0 14px,#446b74 15px 18px),repeating-linear-gradient(0deg,transparent 0 13px,#446b74 14px 16px);border:3px solid #e8f4ed}
.solar-one{left:20%}
.solar-two{right:10%}
.house-body{position:absolute;right:0;bottom:0;width:88%;height:73%;background:#f1efe6;box-shadow:20px 20px 45px rgba(58,84,64,.11)}
.green-wall{position:absolute;left:0;bottom:0;width:28%;height:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:7px;background:#58804d}
.green-wall i{border-radius:40% 60% 35% 65%;background:#8db961}
.green-wall i:nth-child(3n){background:#3e6e48}
.green-wall i:nth-child(2n){background:#b5ce70}
.window-large{position:absolute;left:38%;top:24%;width:31%;height:43%;background:#9bcbd1;border:8px solid #f9f7ef}
.window-large span{display:block;height:100%;border-left:2px solid #edf5ee;border-right:2px solid #edf5ee}
.window-small{position:absolute;right:9%;top:24%;width:15%;height:24%;background:#9bcbd1;border:5px solid #f9f7ef}
.door-warm{position:absolute;right:13%;bottom:0;width:18%;height:48%;background:#54796d}
.house-base{position:absolute;right:-7%;bottom:-4px;width:104%;height:14px;background:#d4d8cf}
.ground-warm{position:absolute;right:-15%;bottom:-12%;width:112%;height:34%;border-radius:50% 50% 0 0;background:#e7f0da}
.tree{position:absolute;bottom:6%;width:105px;height:220px;z-index:1}
.tree-left{left:3%}
.tree-right{right:0;transform:scale(.72);transform-origin:bottom}
.tree:after{content:'';position:absolute;bottom:0;left:48px;width:9px;height:105px;background:#99785a}
.tree i,.tree b,.tree span{position:absolute;border-radius:50%;background:#77aa62}
.tree i{left:3px;top:22px;width:72px;height:97px}
.tree b{left:40px;top:0;width:72px;height:105px;background:#5c965d}
.tree span{left:45px;top:80px;width:63px;height:85px;background:#9dc56e}
.warm-question{position:absolute;z-index:2;bottom:37px;left:10.5vw;display:flex;align-items:center;gap:23px;color:#68736a;font-size:.75rem}
.warm-question a{padding:10px 14px;border:1px solid #d8e3d3;background:rgba(255,255,255,.7);color:#29352d;font-weight:700}
.warm-question b{padding-left:17px;color:#75ac66;font-size:1rem}
@media(max-width:800px){.warm-home{display:block}
.warm-sidebar{display:none}
.warm-stage{min-height:100vh}
.warm-header{padding:24px}
.warm-header .warm-wordmark{display:none}
.warm-copy{padding:70px 28px 350px}
.positive-home{width:100%;height:390px;right:0;top:auto;bottom:20px}
.warm-question{left:28px;bottom:18px;display:block}
.warm-question span{display:none}
.warm-question a{display:inline-block}
.eco-house{right:10%;bottom:14%;width:61%;height:55%}
.warm-copy h1{font-size:3rem}
}



/* Reference-led, realistic BatiÉtape landing page. */
.bf-site{background:#fff;color:#07152d;font-size:16px}
.bf-nav{height:98px;display:flex;align-items:center;gap:38px;padding:12px 4%;position:relative;z-index:2;background:rgba(255,255,255,.94)}
.bf-logo{display:flex;gap:10px;align-items:flex-start;min-width:305px}
.bf-home-icon{display:block;flex:0 0 62px;width:62px;height:62px;background-image:url('../images/logo-bati-etape.svg');background-position:center;background-repeat:no-repeat;background-size:contain;font-size:0}
.bf-logo b,.bf-logo em{display:inline-block;font-size:2.2rem;line-height:1;font-style:normal;letter-spacing:-.08em}
.bf-logo b{color:#101c34}
.bf-logo em{color:#53a92e}
.bf-logo small{display:block;margin:4px 0 0 3px;color:#111b30;font-size:.76rem;font-weight:700}
.bf-nav nav{display:flex;align-items:stretch;gap:38px;margin-left:auto}
.bf-nav nav a{padding:28px 0 17px;border-bottom:2px solid transparent;font-size:.86rem;font-weight:800}
.bf-nav nav .active{border-color:#1c9037}
.bf-actions{display:flex;gap:14px;margin-left:auto}
.bf-actions button{height:48px;border:1px solid #ecf0f4;border-radius:8px;background:#fff;color:#10203b;font:700 .76rem Manrope;padding:0 17px;box-shadow:0 2px 8px rgba(10,36,58,.04)}
.bf-actions button:first-child{font-size:1.8rem;padding:0 16px}
.bf-hero{position:relative;display:flex;aspect-ratio:1402 / 540;max-width:93%;margin:0 auto;overflow:hidden;background:#fff}
.bf-hero-copy{position:relative;z-index:1;width:45%;padding:48px 0 60px 4%;background:linear-gradient(90deg,#fff 65%,rgba(255,255,255,.87) 83%,rgba(255,255,255,0))}
.bf-hero h1{margin:0;color:#0b1c3b;font-size:clamp(2.3rem,3.55vw,4rem);font-weight:800;line-height:1.23;letter-spacing:-.065em}
.bf-hero h1 strong{color:#4e9a47}
.bf-hero-copy>p{max-width:405px;margin:17px 0;color:#14213a;font-size:.87rem;font-weight:600;line-height:1.65}
.bf-main-cta{display:flex;align-items:center;gap:17px;width:318px;margin-top:18px;padding:15px 24px;border-radius:9px;background:#188b38;color:#fff;font-size:.9rem;font-weight:800}
.bf-main-cta:first-letter{font-size:1.3rem}
.bf-main-cta b{margin-left:auto;font-size:1.4rem;color:#dcf4d5}
.bf-help{display:block;margin:13px 0 0 24px;color:#0e1a32;font-size:.72rem;font-weight:600;line-height:1.45}
.bf-photo{position:absolute;inset:0;background-image:url('../images/hero-interface-final.png');background-repeat:no-repeat;background-size:100% 100%;background-position:center}
.bf-benefits{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:93%;margin:-170px auto 35px;padding:20px 24px;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(15,35,70,.11)}
.bf-benefits article{display:flex;gap:14px;align-items:center;padding:0 18px;border-right:1px solid #e5e8eb}
.bf-benefits article:last-child{border:0}
.bf-benefits i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:1.55rem;font-style:normal}
.bf-benefits .energy{background:#eef8e9;color:#63ae42}
.bf-benefits .durable{background:#fff8e9;color:#f4af1f}
.bf-benefits .safe{background:#eef7ff;color:#2682e9}
.bf-benefits .pro{background:#f6efff;color:#934dd7}
.bf-benefits b,.bf-benefits span{display:block;font-size:.76rem}
.bf-benefits b{font-weight:800}
.bf-benefits span{color:#536078;font-size:.67rem}
.bf-problems{position:relative;display:grid;grid-template-columns:1fr 355px;gap:25px;max-width:92%;margin:0 auto 25px;padding:0 0 20px}
.bf-problems-title{grid-column:1;display:flex;justify-content:flex-start;align-items:end}
.bf-problems-title h2{margin:0;font-size:1.35rem;letter-spacing:-.04em;display:inline-block;border-bottom:2px solid #159b70;padding-bottom:4px}.bf-problems-title a{color:#1375dc;border-bottom:1px solid #1375dc;font-size:.7rem;font-weight:700}
.bf-problem-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
.bf-problem-grid a{min-height:174px;padding:18px 12px;border:1px solid #e9edf1;border-radius:10px;background:#fff;box-shadow:0 3px 8px rgba(18,36,60,.04);text-align:center}
.bf-problem-grid i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:#f3f9ff;color:#2685eb;font-size:1.75rem;font-style:normal}
.bf-problem-grid i.problem-icon{width:58px;height:58px;margin-bottom:8px;border-radius:0;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain}
.bf-problem-grid i.problem-water{background-image:url('../images/problem-water.png')}
.bf-problem-grid i.problem-heating{background-image:url('../images/problem-heating.png')}
.bf-problem-grid i.problem-electricity{background-image:url('../images/problem-electricity.png')}
.bf-problem-grid i.problem-renovation{background-image:url('../images/problem-renovation.png')}
.bf-problem-grid i.problem-other{background-image:url('../images/problem-other.png')}
.bf-problem-grid a:nth-child(2) i{background:#effbe7;color:#58a731}
.bf-problem-grid a:nth-child(3) i{background:#fff7e6;color:#efa923}
.bf-problem-grid a:nth-child(4) i{background:#fff0e8;color:#ef8e34}
.bf-problem-grid a:nth-child(5) i{background:#f7efff;color:#9152d7}
.bf-problem-grid a i.problem-icon{background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain}
.bf-problem-grid a i.problem-water{background-image:url('../images/problem-water.png')}
.bf-problem-grid a i.problem-heating{background-image:url('../images/problem-heating.png')}
.bf-problem-grid a i.problem-electricity{background-image:url('../images/problem-electricity.png')}
.bf-problem-grid a i.problem-renovation{background-image:url('../images/problem-renovation.png')}
.bf-problem-grid a i.problem-other{background-image:url('../images/problem-other.png')}
.bf-problem-grid b,.bf-problem-grid span{display:block}
.bf-problem-grid b{font-size:.76rem}
.bf-problem-grid span{margin-top:5px;color:#5d6880;font-size:.63rem;line-height:1.45}
.bf-ai{grid-column:2;grid-row:1 / span 2;margin:0;padding:19px 23px;border-radius:12px;background:linear-gradient(135deg,#effaf0,#f9fcfb)}
.bf-ai h3{margin:0;color:#169041;font-size:1rem}
.bf-ai h3 i{color:#55b55a;font-style:normal}
.bf-ai p{font-size:.75rem;line-height:1.75}
.bf-ai ul{padding:0;margin:15px 0;list-style:none;font-size:.67rem;line-height:2}
.bf-ai li:before{content:'●';margin-right:9px;color:#54ae37}
.bf-ai>a{display:block;padding:10px;border-radius:5px;background:#168a38;color:#fff;text-align:center;font-size:.72rem;font-weight:700}
.bf-footer{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:0;max-width:92%;margin:0 auto 22px;padding:14px 34px;border:1px solid #e9edf1;border-radius:12px;background:#fafcfc}
.bf-footer>div{display:flex;gap:16px;align-items:center;padding:0 28px;border-right:1px solid #e1e6e7}
.bf-footer>div:last-child{border:0}
.bf-footer i{color:#24923d;font-size:1.75rem;font-style:normal}
.bf-footer p{margin:0}
.bf-footer b,.bf-footer span{display:block}
.bf-footer b{font-size:.68rem}
.bf-footer span{color:#5c6880;font-size:.61rem;line-height:1.45}
@media(max-width:1050px){.bf-nav{gap:18px}
.bf-logo{min-width:215px}
.bf-logo b,.bf-logo em{font-size:1.65rem}
.bf-nav nav{gap:19px}
.bf-hero-copy{width:52%}
.bf-photo{left:0}
.bf-problem-grid{grid-template-columns:repeat(3,1fr)}
.bf-problems{grid-template-columns:1fr 300px}
}
@media(max-width:760px){.bf-nav{height:auto;padding:15px 20px}
.bf-nav nav,.bf-actions{display:none}
.bf-logo{min-width:0}
.bf-hero{min-height:0}
.bf-hero-copy{width:100%;padding:37px 24px;background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.7))}
.bf-photo{left:0;top:0;opacity:1;background-size:cover;background-position:center}
.bf-benefits{grid-template-columns:1fr 1fr;max-width:92%;margin:-16px auto 35px;padding:10px}
.bf-benefits article{padding:10px;border-right:0}
.bf-problems{display:block}
.bf-problems-title{margin-bottom:16px}
.bf-problem-grid{grid-template-columns:1fr 1fr}
.bf-ai{margin-top:18px}
.bf-footer{grid-template-columns:1fr;padding:15px}
.bf-footer>div{padding:10px;border:0}
}



/* Library and guide pages, aligned to the approved BatiÉtape interface. */
.library-hero{padding:70px 7% 78px;background:linear-gradient(115deg,#f4faf4,#f7fbff)}
.library-hero>p,.library-heading>div>p,.section-label{margin:0 0 10px;color:#248f42;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.library-hero h1{margin:0;max-width:720px;font-size:clamp(2.4rem,4.5vw,4.5rem);letter-spacing:-.065em;line-height:1.1}
.library-search{display:flex;align-items:center;gap:15px;max-width:760px;margin-top:31px;padding:8px 8px 8px 20px;border-radius:10px;background:#fff;box-shadow:0 8px 22px rgba(16,47,70,.09);color:#7d8796;font-size:.8rem}
.library-search button{margin-left:auto;padding:12px 20px;border:0;border-radius:6px;background:#168a38;color:#fff;font:800 .72rem Manrope}
.library-content{max-width:88%;margin:50px auto}
.library-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}
.library-heading h2{margin:0;font-size:1.8rem;letter-spacing:-.05em}
.library-heading>span{max-width:350px;color:#617086;font-size:.75rem}
.library-layout{display:grid;grid-template-columns:210px 1fr;gap:45px}
.library-categories{display:grid;align-content:start;gap:5px}
.library-categories button{display:flex;justify-content:space-between;padding:12px;border:0;border-radius:5px;background:transparent;color:#344158;text-align:left;font:700 .76rem Manrope}
.library-categories .selected{background:#eaf7eb;color:#168a38}
.library-categories b{font-size:.65rem}
.guide-results{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:24px}
.guide-card{overflow:hidden;border:1px solid #e8edf1;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(11,36,64,.06)}
.guide-image{position:relative;height:155px;display:grid;place-items:center;background:linear-gradient(135deg,#dff1e2,#f5e0a0);color:#448f43}
.guide-image span{font-size:4rem}
.guide-image i{position:absolute;top:15px;left:15px;padding:4px 8px;border-radius:4px;background:#fff;color:#268842;font-size:.63rem;font-style:normal;font-weight:800}
.guide-card>div:last-child{padding:19px}
.guide-meta{margin:0;color:#3e9648;font-size:.63rem;font-weight:800;letter-spacing:.08em}
.guide-card h3{margin:8px 0;font-size:1.2rem}
.guide-card p:not(.guide-meta){color:#5b6880;font-size:.75rem;line-height:1.65}
.guide-card strong{color:#198a38;font-size:.72rem}
.guide-card strong b{padding-left:8px}
.coming-card{padding:35px;border-radius:12px;background:#f6f8f9;color:#617086}
.coming-card span{font-size:.8rem;font-weight:800}
.coming-card p{max-width:300px;font-size:.75rem;line-height:1.7}
.guide-breadcrumb{max-width:87%;margin:27px auto 0;color:#657288;font-size:.7rem}
.guide-breadcrumb a{color:#1a7fe0;font-weight:700}
.guide-hero{display:flex;justify-content:space-between;gap:50px;max-width:87%;margin:28px auto 48px;padding:46px 4.5%;border-radius:16px;background:linear-gradient(120deg,#f3fbf2,#f1f8ff)}
.guide-hero>div{max-width:620px}
.guide-hero h1{margin:0;font-size:clamp(2.4rem,4.5vw,4.2rem);letter-spacing:-.065em;line-height:1.08}
.guide-hero>div>p:not(.guide-meta){margin:17px 0;color:#4d5e75;font-size:.9rem;line-height:1.75}
.guide-tags{display:flex;flex-wrap:wrap;gap:8px}
.guide-tags span{padding:6px 10px;border-radius:5px;background:#fff;color:#38536b;font-size:.68rem;font-weight:700}
.guide-hero aside{width:220px;align-self:center;padding:20px;border-radius:11px;background:#fff}
.guide-hero aside i{display:block;color:#50a740;font-size:2.4rem;font-style:normal}
.guide-hero aside b{font-size:.8rem}
.guide-hero aside p{color:#5f6b7d;font-size:.7rem;line-height:1.6}
.guide-main{display:grid;grid-template-columns:205px minmax(0,700px);gap:60px;max-width:87%;margin:0 auto 90px}
.guide-toc{position:sticky;top:115px;align-self:start;display:grid;gap:10px;padding:18px;border-left:2px solid #d9e8d9}
.guide-toc b{margin-bottom:6px;font-size:.75rem}
.guide-toc a{color:#5b6980;font-size:.72rem}
.guide-main article section{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid #e7ebee}
.guide-main article h2{margin:0 0 19px;font-size:1.95rem;letter-spacing:-.05em;line-height:1.18}
.guide-main article p{color:#4d5d73;font-size:.85rem;line-height:1.85}
.guide-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guide-checks div{padding:17px;border:1px solid #e7ecee;border-radius:8px;background:#fbfdfd}
.guide-checks b{font-size:.78rem}
.guide-checks p{margin:5px 0 0;font-size:.72rem!important;line-height:1.6!important}
.guide-steps{display:grid;gap:18px;padding:0;list-style:none;counter-reset:step}
.guide-steps li{position:relative;padding-left:52px;counter-increment:step}
.guide-steps li:before{content:counter(step);position:absolute;top:0;left:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1b913c;color:#fff;font-size:.7rem;font-weight:800}
.guide-steps b{font-size:.87rem}
.guide-steps p{margin:3px 0;font-size:.76rem!important;line-height:1.65!important}
.guide-warning{margin-top:27px;padding:18px 20px;border-left:4px solid #e4ab2e;border-radius:0 8px 8px 0;background:#fff7df}
.guide-warning b{color:#a87600;font-size:.76rem}
.guide-warning p{margin:4px 0 0;font-size:.75rem!important;line-height:1.6!important}
.guide-stop{border:0!important;padding:30px!important;border-radius:12px;background:#f8fbf9}
@media(max-width:850px){.library-layout,.guide-main{grid-template-columns:1fr}
.library-categories{grid-template-columns:repeat(3,1fr)}
.guide-main{gap:25px}
.guide-toc{position:static;grid-template-columns:1fr 1fr}
.guide-hero{display:block}
.guide-hero aside{width:auto;margin-top:25px}
.guide-results{grid-template-columns:1fr}
.library-heading{display:block}
.library-heading>span{display:block;margin-top:10px}
}
@media(max-width:550px){.library-hero{padding:45px 24px}
.library-content,.guide-main,.guide-breadcrumb{max-width:90%}
.library-search span{font-size:.65rem}
.library-search button{padding:10px}
.library-categories{grid-template-columns:1fr 1fr}
.guide-checks{grid-template-columns:1fr}
.guide-main article h2{font-size:1.55rem}
}


/* A calmer, more editorial reading rhythm for long guides. */
.tutorial{max-width:980px}
.tutorial-hero{border:0;padding-bottom:76px}
.tutorial-hero:after{content:"Observer · Comprendre · Agir avec mesure";display:block;margin-top:25px;color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tutorial section:not(.toc){max-width:760px;padding:0 0 48px;margin:0 auto 58px;border:0}
.tutorial section:not(.toc):not(.final-advice){position:relative}
.tutorial section:not(.toc):not(.final-advice):after{content:'';position:absolute;bottom:0;left:0;width:52px;border-bottom:2px solid #b8dccc}
.tutorial section>h2{font-size:clamp(1.65rem,3vw,2.15rem);line-height:1.2}
.tutorial section>h2>span{display:none}
.toc{padding:43px 45px;border-radius:14px;background:linear-gradient(135deg,#eaf5f1,#edf6fb)}
.toc-columns{margin-top:32px}
.toc-columns>div{padding-right:15px;border-right:1px solid #c6ddd7}
.toc-columns>div:last-child{border:0}
.toc a{padding:7px 0;font-size:.8rem}
.notice{margin:27px 0;padding:18px 21px}
.tutorial .final-advice{max-width:none;margin-top:25px}
.steps>li:before{background:var(--green)}