/* ==========================================================================
   Page d'accueil — Guide Éco Rénovation (s'appuie sur lp.css pour les bases)
   ========================================================================== */

/* Navigation dans l'en-tête */
.hdr .nav { display: flex; align-items: center; gap: 22px; }
.hdr .nav a { color: rgba(255,255,255,.88); text-decoration: none; font-size: .92rem; font-weight: 600; }
.hdr .nav a:hover { color: #fff; }
.hdr .nav .nav-cta { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
@media (max-width: 760px) { .hdr .nav a:not(.nav-cta) { display: none; } .hdr .nav .nav-cta { font-size: .8rem; padding: 8px 12px; white-space: nowrap; } }

/* Hero d'accueil : un peu moins haut que la landing */
.hero.home { min-height: 78vh; }
.hero.home .hero-bg img { object-position: center 55%; }
.hero.home h1 em { color: #b9ebcf; }
@media (max-width: 480px) { .hero.home { min-height: 0; } }

/* Titres de section */
.sec-head { max-width: 640px; margin-bottom: 26px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head p { color: var(--ink-2); margin: 0; }

/* Où part la chaleur : barres */
.loss { list-style: none; padding: 0; margin: 18px 0 0; }
.loss li { margin-bottom: 14px; }
.loss .row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.loss .row b { font-family: var(--serif); font-size: 1.15rem; color: var(--green); }
.loss .bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.loss .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--orange), #ffb066); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal.in .loss .bar i, .loss.in .bar i { width: var(--w); }
.caption { font-size: .78rem; color: var(--muted); margin-top: 10px; }

/* Grille d'articles */
.posts { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .posts { grid-template-columns: repeat(3, 1fr); } .post.feature { grid-column: span 2; } }
.post { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post .ph { aspect-ratio: 16/10; overflow: hidden; background: var(--green-soft); position: relative; }
.post .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover .ph img { transform: scale(1.05); }
.post .tagp { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.94); color: var(--green-2); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.post .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.post h3 { font-size: 1.2rem; margin: 0 0 8px; line-height: 1.2; }
.post.feature h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.post p { margin: 0 0 14px; color: var(--ink-2); font-size: .93rem; }
.post .more { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--muted); }
.post .more b { color: var(--green); font-weight: 700; }
@media (min-width: 980px) { .post.feature { flex-direction: row; } .post.feature .ph { flex: 0 0 52%; aspect-ratio: auto; } }

/* Conseils (éco-gestes) */
.tips-section { background: linear-gradient(180deg, var(--green-soft), #fff); }
.tips { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tips { grid-template-columns: repeat(3, 1fr); } }
.tip { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: flex-start; }
.tip .ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: var(--green-soft); display: grid; place-items: center; font-size: 22px; }
.tip h3 { font-size: 1.02rem; margin: 0 0 4px; font-family: var(--sans); letter-spacing: 0; font-weight: 700; line-height: 1.25; }
.tip p { margin: 0 0 8px; font-size: .9rem; color: var(--ink-2); }
.tip .gain { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--green-2); background: var(--green-soft); padding: 4px 10px; border-radius: 999px; }

/* Aides : bloc sombre */
.aides { background: linear-gradient(160deg, #0f2a1d, #164a30); color: #fff; border-radius: 24px; padding: 30px 22px; position: relative; overflow: hidden; }
.aides::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,138,.3), transparent 70%); right: -120px; top: -120px; pointer-events: none; }
.aides h2 { color: #fff; }
.aides > p { color: rgba(255,255,255,.8); max-width: 600px; }
.aides-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 20px 0 22px; position: relative; z-index: 1; }
@media (min-width: 640px) { .aides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .aides { padding: 44px 44px; } .aides-grid { grid-template-columns: repeat(4, 1fr); } }
.aide { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 16px; }
.aide b { display: block; font-family: var(--serif); font-size: 1.15rem; margin-bottom: 4px; color: #ffd28a; }
.aide span { font-size: .84rem; color: rgba(255,255,255,.78); line-height: 1.4; display: block; }
.aides .btn { position: relative; z-index: 1; }

/* Ordre des travaux (réutilise .timeline de lp.css) */
.order .timeline { margin-top: 14px; }
.order .timeline li { margin-bottom: 18px; }

/* Pied de page d'accueil */
.lp-footer .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: .86rem; }
.lp-footer .foot-links a { color: var(--ink-2); text-decoration: none; margin: 0; }
.lp-footer .foot-links a:hover { color: var(--green); }