/* ==========================================================================
   Page chapeau « Habiter »
   ========================================================================== */

.wc-habiter { color: var(--wc-ink); }
.wc-habiter section { padding: clamp(3rem, 7vw, 6rem) clamp(20px, 5vw, 60px); }
.wc-habiter h2 { font-family: var(--wc-font-display); font-size: var(--wc-fs-3xl); color: var(--wc-marine); line-height: 1.1; }
.wc-habiter h3 { font-family: var(--wc-font-display); color: var(--wc-marine); }

/* Head de section */
.wc-hab-section__head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3.4rem); text-align: center; }
.wc-hab-section__head p { color: var(--wc-muted); font-size: var(--wc-fs-lg); margin-top: .8rem; line-height: 1.6; }
.wc-hab-section__head--light h2 { color: #fff; }
.wc-hab-section__head--light p { color: rgba(255,255,255,.8); }

/* --- HERO --- */
.wc-hab-hero {
	background: linear-gradient(150deg, var(--wc-marine) 0%, var(--wc-marine-2) 55%, #0e3547 100%);
	color: #fff; text-align: center;
}
/* Titres sur fond foncé : toujours en clair (évite texte foncé sur fond foncé) */
.wc-hab-hero h1,
.wc-hab-hero h2,
.wc-hab-hero h3 { color: #fff; }
.wc-hab-hero__inner { max-width: 860px; margin: 0 auto; }
.wc-hab-hero__eyebrow { display: inline-block; font-size: var(--wc-fs-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wc-teal-l); margin-bottom: 1.2rem; }
.wc-hab-hero h1 { font-family: var(--wc-font-display); font-size: var(--wc-fs-hero); line-height: 1.05; margin-bottom: 1.4rem; }
.wc-hab-hero__lead { font-size: var(--wc-fs-xl); line-height: 1.55; color: rgba(255,255,255,.85); max-width: 720px; margin: 0 auto 2.2rem; }
.wc-hab-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.wc-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.wc-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* --- DEUX VOIES --- */
.wc-hab-voies { background: var(--wc-paper); }
.wc-hab-voies__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: var(--wc-maxw); margin: 0 auto; }
.wc-voie {
	display: block; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
	padding: clamp(1.6rem, 3vw, 2.6rem); transition: .2s;
}
.wc-voie:hover { transform: translateY(-4px); box-shadow: var(--wc-shadow); border-color: var(--wc-teal); }
.wc-voie__tag { display: inline-block; font-size: var(--wc-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35em .8em; border-radius: 6px; margin-bottom: 1rem; }
.wc-voie--neuf .wc-voie__tag { background: var(--wc-orange); color: #fff; }
.wc-voie--ancien .wc-voie__tag { background: var(--wc-teal); color: #fff; }
.wc-voie h3 { font-size: var(--wc-fs-2xl); margin-bottom: .8rem; }
.wc-voie > p { color: var(--wc-muted); line-height: 1.6; margin-bottom: 1.2rem; }
.wc-voie__points { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.wc-voie__points li { position: relative; padding-left: 1.6em; margin-bottom: .5em; font-size: var(--wc-fs-sm); color: var(--wc-ink); }
.wc-voie__points li::before { content: '✓'; position: absolute; left: 0; color: var(--wc-teal); font-weight: 700; }
.wc-voie__link { font-weight: 600; color: var(--wc-orange); }

/* --- ENCART SIMULATEUR --- */
.wc-hab-simu { background: var(--wc-paper-2); }
.wc-hab-simu__inner { max-width: var(--wc-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.wc-hab-simu__eyebrow { display: inline-block; font-size: var(--wc-fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wc-teal); margin-bottom: .8rem; }
.wc-hab-simu__text p { color: var(--wc-muted); font-size: var(--wc-fs-lg); line-height: 1.6; margin: 1rem 0 1.8rem; }
.wc-hab-simu__card { background: var(--wc-marine); color: #fff; border-radius: var(--wc-radius); padding: 2rem; box-shadow: var(--wc-shadow); }
.wc-hab-simu__card h1, .wc-hab-simu__card h2, .wc-hab-simu__card h3 { color: #fff; }
.wc-hab-simu__row { display: flex; justify-content: space-between; align-items: center; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.wc-hab-simu__row span { color: rgba(255,255,255,.7); font-size: var(--wc-fs-sm); }
.wc-hab-simu__row b { font-family: var(--wc-font-display); font-size: var(--wc-fs-xl); }
.wc-hab-simu__hint { margin-top: 1.2rem; font-size: var(--wc-fs-xs); color: rgba(255,255,255,.55); text-align: center; }

/* --- ARTICLES --- */
.wc-hab-articles { background: var(--wc-paper); }
.wc-hab-articles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: var(--wc-maxw); margin: 0 auto; }
.wc-article { background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius); padding: clamp(1.6rem, 3vw, 2.2rem); }
.wc-article h3 { font-size: var(--wc-fs-xl); margin-bottom: .8rem; line-height: 1.2; }
.wc-article p { color: var(--wc-muted); line-height: 1.65; margin-bottom: 1rem; }
.wc-article__more { font-weight: 600; color: var(--wc-orange); text-decoration: none; }
.wc-article__more:hover { text-decoration: underline; }

/* --- RÉASSURANCE --- */
.wc-hab-reassurance { background: linear-gradient(150deg, var(--wc-marine), var(--wc-marine-2)); }
.wc-hab-reassurance__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: var(--wc-maxw); margin: 0 auto; }
.wc-pillar { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--wc-radius); padding: 2rem; text-align: center; }
.wc-pillar__icon { font-size: 2rem; color: var(--wc-teal-l); margin-bottom: 1rem; }
.wc-pillar h3 { color: #fff; font-size: var(--wc-fs-xl); margin-bottom: .6rem; }
.wc-pillar p { color: rgba(255,255,255,.75); line-height: 1.6; font-size: var(--wc-fs-sm); }

/* --- CTA FINAL --- */
.wc-hab-cta { background: var(--wc-paper); text-align: center; }
.wc-hab-cta__inner { max-width: 680px; margin: 0 auto; }
.wc-hab-cta p { color: var(--wc-muted); font-size: var(--wc-fs-lg); margin: 1rem 0 2rem; line-height: 1.6; }
.wc-hab-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.wc-hab-cta .wc-btn--ghost { color: var(--wc-marine); border-color: var(--wc-line); }
.wc-hab-cta .wc-btn--ghost:hover { background: var(--wc-paper-2); }

/* --- Responsive --- */
@media (max-width: 860px) {
	.wc-hab-voies__grid,
	.wc-hab-simu__inner,
	.wc-hab-articles__grid,
	.wc-hab-reassurance__grid { grid-template-columns: 1fr; }
}

/* Illustrations dans les cartes voies */
.wc-voie__illus { margin: -1.6rem -1.6rem 1.4rem; border-radius: var(--wc-radius) var(--wc-radius) 0 0; overflow: hidden; aspect-ratio: 8/5; background: linear-gradient(135deg, #12384a, #0a2230); }
.wc-voie__illus img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 861px) {
	.wc-voie__illus { margin: -2.6rem -2.6rem 1.6rem; }
}

/* Encart comparatif */
.wc-hab-compa { background: linear-gradient(135deg, var(--wc-teal), var(--wc-teal-l)); }
.wc-hab-compa__inner { max-width: 820px; margin: 0 auto; text-align: center; color: #fff; }
.wc-hab-compa__badge { display: inline-block; background: var(--wc-orange); color: #fff; font-size: var(--wc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .35em .9em; border-radius: 6px; margin-bottom: 1.2rem; }
.wc-hab-compa h2 { color: #fff; font-size: var(--wc-fs-2xl); line-height: 1.15; margin-bottom: 1rem; }
.wc-hab-compa p { color: rgba(255,255,255,.9); font-size: var(--wc-fs-lg); line-height: 1.6; margin-bottom: 1.8rem; }
.wc-hab-compa .wc-btn--primary { background: #fff; color: var(--wc-marine); }
.wc-hab-compa .wc-btn--primary:hover { background: var(--wc-paper); }