/**
 * SW Médias — Immobilier Nancy — immo.css v3.0.0
 * Composants spécifiques à la famille immo : hero v2, stats banner, fiche quartier, etc.
 */

/* === Hero v2 (front page immo) === */
.sw-hero {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: flex-end;
	color: var(--color-white);
	overflow: hidden;
	border-radius: var(--radius-lg);
	margin: var(--space-4) 0 var(--space-12);
	background: var(--color-primary);
}
.sw-hero__bg { position: absolute; inset: 0; z-index: 0; }
.sw-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.sw-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,69,0.2) 0%, rgba(20,40,69,0.85) 80%); z-index: 1; }
.sw-hero__inner { position: relative; z-index: 2; padding: var(--space-12) var(--space-8); max-width: 720px; }
.sw-hero__eyebrow { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--color-accent); color: var(--color-primary); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.sw-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--color-white); margin: 0 0 var(--space-4); line-height: var(--lh-tight); }
.sw-hero__lead { font-size: var(--fs-lead); color: rgba(255,255,255,0.92); margin-bottom: var(--space-6); max-width: 600px; }
.sw-hero__stats { display: flex; gap: var(--space-8); margin-bottom: var(--space-6); flex-wrap: wrap; }
.sw-hero__stat { color: var(--color-white); }
.sw-hero__stat-value { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-bold); color: var(--color-accent); line-height: 1; font-variant-numeric: tabular-nums; }
.sw-hero__stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.7); margin-top: var(--space-1); }
.sw-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* === Stats banner === */
.sw-stats-banner { background: var(--color-sand); padding: var(--space-8) 0; margin: var(--space-12) 0; border-radius: var(--radius-lg); }
.sw-stats-banner__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
.sw-stats-banner__item { padding: 0 var(--space-3); border-right: 1px solid var(--color-border); }
.sw-stats-banner__item:last-child { border-right: 0; }
.sw-stats-banner__value { display: block; font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-bold); color: var(--color-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.sw-stats-banner__label { display: block; font-size: var(--fs-small); color: var(--color-stone); margin-top: var(--space-2); }
.sw-stats-banner__trend { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-1); font-size: var(--fs-xs); padding: 2px 6px; border-radius: var(--radius-pill); }
.sw-stats-banner__trend--up { background: rgba(4,120,87,0.1); color: var(--color-success); }
.sw-stats-banner__trend--down { background: rgba(220,38,38,0.1); color: var(--color-danger); }
@media (max-width: 900px) { .sw-stats-banner__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); } .sw-stats-banner__item { border-right: 0; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); } }

/* === Quartier card (refonte) === */
.sw-card--quartier { position: relative; }
.sw-card--quartier .sw-card__media { aspect-ratio: 4/3; }
.sw-card--quartier .sw-card__price { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; }
.sw-card--quartier .sw-card__price-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--color-accent-dark); line-height: 1; font-variant-numeric: tabular-nums; }
.sw-card--quartier .sw-card__price-label { color: var(--color-stone); font-size: var(--fs-small); }
.sw-card--quartier .sw-card__perks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.sw-card--quartier .sw-card__perks span { background: var(--color-border-soft); color: var(--color-primary); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.sw-card--quartier .sw-card__cp { position: absolute; top: var(--space-3); right: var(--space-3); background: rgba(31,41,55,0.8); color: var(--color-white); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-family: var(--font-mono); }

/* === Quartier single page === */
.sw-quartier { padding-top: var(--space-6); }
.sw-quartier__header { margin-bottom: var(--space-8); }
.sw-quartier__title { font-size: var(--fs-h1); margin-bottom: var(--space-2); }
.sw-quartier__postal { color: var(--color-stone); font-size: var(--fs-lead); margin-bottom: var(--space-4); display: flex; gap: var(--space-3); align-items: center; }
.sw-quartier__postal-cp { background: var(--color-sand); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-small); }
.sw-quartier__hero { margin: 0 0 var(--space-8); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.sw-quartier__hero img { aspect-ratio: 21/9; object-fit: cover; width: 100%; }

.sw-quartier__grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-10); align-items: start; }
.sw-quartier__sidebar { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 900px) { .sw-quartier__grid { grid-template-columns: 1fr; } .sw-quartier__sidebar { position: static; } }

/* Stats box (sidebar) */
.sw-stats-box { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.sw-stats-box h3 { font-family: var(--font-body); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-stone); margin-bottom: var(--space-4); font-weight: var(--fw-bold); }
.sw-stats { display: grid; gap: var(--space-3); margin: 0; }
.sw-stat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.sw-stat:last-child { padding-bottom: 0; border: 0; }
.sw-stat dt { color: var(--color-stone); font-size: var(--fs-small); margin: 0; }
.sw-stat dd { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-primary); font-size: 1.25rem; margin: 0; font-variant-numeric: tabular-nums; }
.sw-stat--meta dd { font-family: var(--font-body); font-weight: var(--fw-regular); color: var(--color-stone); font-size: var(--fs-small); }

/* Quartier map */
.sw-quartier__map { width: 100%; height: 320px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-sand); }

/* Listes points forts / vigilance */
.sw-list-checks { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.sw-list-checks li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-8); }
.sw-list-checks li::before { content: "✓"; position: absolute; left: 0; top: var(--space-2); width: 22px; height: 22px; line-height: 22px; text-align: center; background: var(--color-success); color: var(--color-white); border-radius: 50%; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.sw-list-warns { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.sw-list-warns li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-8); }
.sw-list-warns li::before { content: "!"; position: absolute; left: 0; top: var(--space-2); width: 22px; height: 22px; line-height: 22px; text-align: center; background: var(--color-warn); color: var(--color-white); border-radius: 50%; font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* CTA estimation */
.sw-cta-estimation { margin: var(--space-12) 0; padding: var(--space-8); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); border-radius: var(--radius-lg); display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); align-items: center; }
.sw-cta-estimation h2 { color: var(--color-white); font-family: var(--font-display); margin: 0 0 var(--space-3); }
.sw-cta-estimation p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.sw-cta-estimation .sw-button { white-space: nowrap; }
@media (max-width: 600px) { .sw-cta-estimation { grid-template-columns: 1fr; text-align: center; } }

/* Estimation page */
.sw-estimation { padding-top: var(--space-6); }
.sw-estimation__intro { color: var(--color-stone); font-size: var(--fs-lead); margin-bottom: var(--space-8); }
.sw-estimation__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start; }
.sw-estimation__form { background: var(--color-white); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sw-estimation__rgpd { font-size: var(--fs-xs); color: var(--color-stone); margin-top: var(--space-3); }
.sw-estimation__trust { background: var(--color-sand); padding: var(--space-6); border-radius: var(--radius-lg); position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.sw-estimation__trust h2 { font-family: var(--font-body); font-size: var(--fs-h4); margin: 0 0 var(--space-4); padding: 0; border: 0; }
@media (max-width: 900px) { .sw-estimation__grid { grid-template-columns: 1fr; } .sw-estimation__trust { position: static; } }

/* === Front-page sections === */
.sw-section-quartiers { padding: var(--space-12) 0; background: var(--color-bg-soft); margin: var(--space-12) calc(50% - 50vw) 0; padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.sw-section-quartiers .sw-container { background: transparent; padding: 0 var(--space-4); }

/* Guide / pillar page */
.sw-guide__faq { margin-top: var(--space-12); }
.sw-faq-list dt { font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--color-primary); padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--color-border); cursor: pointer; }
.sw-faq-list dt:first-child { border-top: 0; }
.sw-faq-list dd { margin: 0 0 var(--space-4); color: var(--color-stone); font-size: var(--fs-small); line-height: var(--lh-loose); }

/* === Newsletter inline === */
.sw-newsletter-inline { margin: var(--space-12) 0; padding: var(--space-8); background: var(--color-sand); border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.sw-newsletter-inline h2 { font-family: var(--font-display); margin: 0 0 var(--space-2); color: var(--color-primary); }
.sw-newsletter-inline p { color: var(--color-stone); margin: 0; }
.sw-newsletter-inline-form { display: flex; gap: var(--space-2); }
.sw-newsletter-inline-form input[type="email"] { flex: 1; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); }
.sw-newsletter-inline-form button { padding: var(--space-3) var(--space-5); background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: var(--fw-semi); }
@media (max-width: 600px) { .sw-newsletter-inline { grid-template-columns: 1fr; text-align: center; } }

/* === TOC (sticky) === */
.sw-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); background: var(--color-bg-soft); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border-left: 3px solid var(--color-accent); max-width: 280px; }
.sw-toc__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-stone); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.sw-toc ul { list-style: none; padding: 0; margin: 0; }
.sw-toc li { margin-bottom: var(--space-2); }
.sw-toc a { color: var(--color-stone); font-size: var(--fs-small); }
.sw-toc a:hover, .sw-toc .is-active a { color: var(--color-primary); font-weight: var(--fw-semi); }
.sw-toc li.level-3 { padding-left: var(--space-4); font-size: var(--fs-xs); }
@media (max-width: 900px) { .sw-toc { position: static; max-width: 100%; } }

/* === Related articles === */
.sw-related { margin: var(--space-16) 0 var(--space-8); padding-top: var(--space-8); border-top: 2px solid var(--color-accent); }
.sw-related__title { font-size: var(--fs-h3); margin-bottom: var(--space-6); }

/* === Sticky CTA mobile === */
.sw-sticky-cta { display: none; }
@media (max-width: 900px) {
	.sw-sticky-cta {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: var(--z-overlay);
		background: var(--color-white);
		border-top: 1px solid var(--color-border);
		padding: var(--space-3) var(--space-4);
		box-shadow: var(--shadow-lg);
		transform: translateY(100%);
		transition: transform var(--transition-base);
	}
	.sw-sticky-cta.is-visible { transform: translateY(0); }
	.sw-sticky-cta .sw-button { width: 100%; }
}

/* === Hero estimation form === */
.sw-hero-estim { background: rgba(255,255,255,0.96); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-6) 0; max-width: 560px; box-shadow: var(--shadow-lg); }
.sw-hero-estim__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sw-hero-estim select, .sw-hero-estim input[type="number"] { flex: 1; min-width: 120px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-dark); font-size: var(--fs-body); }
.sw-hero-estim select:focus, .sw-hero-estim input:focus { border-color: var(--color-accent); outline: 0; box-shadow: 0 0 0 3px rgba(201,169,97,0.2); }
.sw-hero-estim .sw-button { flex: 0 0 auto; }
.sw-hero-estim__hint { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-stone); }
@media (max-width: 600px) {
	.sw-hero-estim__row { flex-direction: column; }
	.sw-hero-estim select, .sw-hero-estim input, .sw-hero-estim .sw-button { width: 100%; }
}

/* === Carte quartiers home === */
.sw-home-map-section { margin: var(--space-16) 0; }
.sw-home-map { width: 100%; height: 480px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); background: var(--color-sand); }
.sw-home-map .sw-map-popup { font-family: var(--font-body); }
.sw-home-map .sw-map-popup__name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-primary); font-size: 1rem; margin-bottom: 2px; }
.sw-home-map .sw-map-popup__price { color: var(--color-accent-dark); font-weight: var(--fw-semi); }
.sw-home-map .sw-map-popup a { color: var(--color-primary); font-size: var(--fs-small); font-weight: var(--fw-semi); }
@media (max-width: 600px) { .sw-home-map { height: 360px; } }

/* === Stats counter animation === */
.sw-counter[data-target] { font-variant-numeric: tabular-nums; }