/* =====================================================================
 * HABiTEK — pages.css
 * Styles des sections de pages (héros, à-propos, stats, graphiques,
 * pied de page…). Complète assets/css/site.css.
 * ===================================================================== */

/* ---- Petits utilitaires de couleur ------------------------------ */
.t-yellow { color: var(--habitek-yellow); }
.t-ink    { color: var(--habitek-ink); }
.t-red    { color: var(--habitek-red); }

/* Réinitialise le soulignement hérité sur la navigation et la marque. */
.nav__link,
.nav__brand,
.dl,
.backlink,
.social { border-bottom: 0; }

/* ================================================================
 *  HÉROS (réutilisable sur toutes les pages)
 * ============================================================== */
.page-hero {
	position: relative;
	background: var(--habitek-ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.page-hero__photo,
.page-hero__scrim { position: absolute; inset: 0; z-index: 0; }
.page-hero__photo > .photo,
.page-hero__photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.page-hero__scrim--side   { background: linear-gradient(105deg, rgba(20,20,20,0.92) 0 42%, rgba(20,20,20,0.45) 100%); }
.page-hero__scrim--bottom { background: linear-gradient(180deg, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.92) 100%); }

.page-hero__blob {
	position: absolute; right: -90px; top: -90px;
	width: 360px; height: 360px; border-radius: 50%;
	background: var(--habitek-red); opacity: 0.85; z-index: 1;
}
.page-hero__dot {
	position: absolute; right: 70px; top: 56px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--habitek-yellow); box-shadow: 0 0 30px rgba(245,197,24,.6); z-index: 1;
}
.page-hero__inner {
	position: relative; z-index: 2;
	padding-top: 100px; padding-bottom: 92px;
}
.page-hero__title {
	color: #fff;
	font-size: clamp(40px, 6vw, 90px);
	line-height: 0.98;
}
.page-hero__lead {
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.6;
	color: rgba(255,255,255,0.84);
	max-width: 62ch;
	margin: 26px 0 0;
}
.page-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* ================================================================
 *  À PROPOS / PASSIVHAUS (accueil)
 * ============================================================== */
.about { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.passivhaus { border-radius: 20px; }
.passivhaus__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.passivhaus__emoji { font-size: 30px; line-height: 1; }
.passivhaus__intro { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.passivhaus__list { display: grid; gap: 10px; }
.passivhaus__row { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.passivhaus__foot { margin: 18px 0 0; font-size: 14px; font-style: italic; color: var(--fg-3); }

/* ================================================================
 *  CHIFFRES CLÉS / SECTIONS SOMBRES
 * ============================================================== */
.stats { background: var(--habitek-ink); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stat { border-left: 3px solid var(--habitek-red); padding-left: 22px; }
.stat__icon { font-size: 28px; margin-bottom: 10px; }
.stat__big { color: var(--habitek-yellow); font-size: clamp(40px, 5vw, 68px); }
.stat__label { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.78); }

/* ================================================================
 *  COLONNES GÉNÉRIQUES
 * ============================================================== */
.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.two-col--center { align-items: center; }
.two-col--top { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* ================================================================
 *  JAUGE (Ice Box 2025)
 * ============================================================== */
.gauge { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.gauge__dial-wrap { display: flex; justify-content: center; }
.gauge__dial { position: relative; width: 230px; height: 230px; }
.gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ================================================================
 *  COUPE D'ENVELOPPE (Ice Box 2025)
 * ============================================================== */
.layers { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 2px solid var(--habitek-ink); }
.layers__row { color: #fff; padding: 20px 22px; display: flex; align-items: center; gap: 14px; min-height: 78px; }
.layers__num { font-family: var(--font-mono); font-size: 13px; opacity: .85; min-width: 26px; }
.layers__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; }
.layers__ice { background: var(--habitek-ink); color: rgba(255,255,255,0.7); padding: 14px 22px; font-family: var(--font-mono); font-size: 12px; text-align: center; }
.layers-legend { display: flex; flex-direction: column; gap: 16px; }
.layers-legend__row { display: flex; gap: 14px; align-items: flex-start; }
.layers-legend__sw { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; margin-top: 4px; }
.layers-legend__t { font-weight: 700; color: var(--habitek-ink); font-size: 17px; }
.layers-legend__d { color: var(--fg-2); font-size: 15.5px; line-height: 1.5; }

/* ================================================================
 *  HISTOGRAMME 20 JOURS (Ice Box 2025)
 * ============================================================== */
.ice-bars { display: flex; align-items: flex-end; gap: clamp(3px, 0.8vw, 10px); height: 230px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.ice-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ice-bars__temp { font-family: var(--font-mono); font-size: 10px; color: var(--habitek-yellow); margin-bottom: 4px; }
.ice-bars__bar { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--habitek-red-soft), var(--habitek-red)); border-radius: 4px 4px 0 0; }
.ice-bars__axis { display: flex; gap: clamp(3px, 0.8vw, 10px); margin-top: 8px; }
.ice-bars__day { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.45); }

/* ================================================================
 *  TABLEAU DE BORD LIVE (ICEBOX 2026)
 * ============================================================== */
.now-row { display: flex; gap: 28px; }

/* ================================================================
 *  ÉQUIPE
 * ============================================================== */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ================================================================
 *  PARTENAIRES — mur de logos
 * ============================================================== */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.logo-wall a { border: 0; display: block; }
.logo-tile { display: flex; align-items: center; justify-content: center; padding: 26px; min-height: 132px; background: #fff; }
.logo-tile--dark { background: var(--habitek-ink); }
.logo-tile img { max-height: 64px; max-width: 82%; width: auto; object-fit: contain; }

/* ================================================================
 *  CONTACT — formulaires
 * ============================================================== */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.dl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 18px; align-items: center; }
.form-notice { padding: 14px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.form-notice--ok { background: var(--badge-eco-green-bg); color: var(--badge-eco-green); border: 1px solid var(--badge-eco-green); }

/* ================================================================
 *  PIED DE PAGE
 * ============================================================== */
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 46px; align-items: start; }
.foot__mark { height: 60px; margin-bottom: 16px; }
.foot__slogan { font-family: var(--font-text); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--habitek-yellow); margin-bottom: 8px; }
.foot__tagline { font-size: 30px; color: #fff; margin-bottom: 16px; }
.foot__blurb { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0; max-width: 360px; }
.foot__h { font-family: var(--font-text); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--habitek-yellow); margin: 0 0 16px; }
.foot__links { display: flex; flex-direction: column; gap: 11px; }
.foot__links a,
.foot__muted { font-family: var(--font-text); font-size: 15px; }
.foot__muted { color: rgba(255,255,255,0.62); }
.foot__bar { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: .04em; }

/* ================================================================
 *  RESPONSIVE
 * ============================================================== */
@media (max-width: 980px) {
	.about { grid-template-columns: 1fr; }
	.two-col { grid-template-columns: 1fr; }
	.gauge { grid-template-columns: 1fr; gap: 32px; }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.page-hero__inner { padding-top: 80px; padding-bottom: 72px; }
}
@media (max-width: 820px) {
	.two-col--top { grid-template-columns: 1fr; }
	.cards-2 { grid-template-columns: 1fr; }
	.stats__grid { grid-template-columns: 1fr; }
	.foot__grid { grid-template-columns: 1fr 1fr; }
	.contact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.form-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.foot__grid { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.now-row { gap: 18px; }
	.stats__grid { gap: 20px; }
}