/**
 * BoisVision — page d'accueil, calculateur et comparateur.
 *
 * Chargée uniquement sur la page d'accueil, sur le gabarit Comparateur et
 * partout où le shortcode du calculateur est rendu (voir inc/enqueue.php et
 * boisvision_render_calculator()). Le thème de référence chargeait sa feuille
 * d'accueil sur 100 % des pages.
 */

/* ===============================================================
 * Bandeau d'accueil
 *
 * Split éditorial asymétrique : la typographie occupe la colonne
 * étroite, l'image la large. Pas de photo pleine largeur voilée de
 * noir avec le titre posé dessus — c'est le gabarit universel.
 * ============================================================ */

.bv-hero {
	position: relative;
	padding-block: var(--bv-space-xl) var(--bv-space-2xl);
	overflow: hidden;
}

.bv-hero__inner {
	display: grid;
	gap: var(--bv-space-lg);
	align-items: center;
}

@media (width >= 900px) {

	.bv-hero__inner {
		grid-template-columns: 6fr 5fr;
		gap: var(--bv-space-xl);
	}
}

.bv-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-md);
}

.bv-hero__title {
	font-size: var(--bv-text-3xl);
	letter-spacing: -0.035em;
}

@media (width >= 1200px) {

	.bv-hero__title {
		font-size: var(--bv-text-display);
	}
}

.bv-hero__actions {
	margin-block-start: var(--bv-space-2xs);
}

.bv-hero__media {
	position: relative;
}

/*
 * Les cernes débordent derrière l'image : le motif signature du thème
 * sert d'ancrage visuel plutôt que de décor posé à côté.
 */
.bv-hero__rings {
	position: absolute;
	inset-block-start: -18%;
	inset-inline-end: -22%;
	inline-size: 60%;
	aspect-ratio: 1;
	z-index: -1;
	color: var(--bv-rule);
	pointer-events: none;
}

.bv-hero__rings .bv-rings {
	block-size: 100%;
}

@media (width >= 900px) {

	.bv-hero__media .bv-media--portrait {
		aspect-ratio: 5 / 6;
	}
}

/* ===============================================================
 * Grille de catégories
 * ============================================================ */

.bv-cat {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 15rem;
	padding: var(--bv-space-md);
	border-radius: var(--bv-r-lg);
	overflow: hidden;
	color: var(--bv-paper);
	text-decoration: none;
	background-color: var(--bv-bark);
}

.bv-cat__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.bv-cat__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--bv-dur-slow) var(--bv-ease-out);
}

/*
 * Voile monté depuis le bas : c'est la même mécanique que le survol
 * des boutons, appliquée ici en permanence pour garantir la lisibilité
 * du texte, puis renforcée au survol.
 */
.bv-cat::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--gradient--char-veil);
	transition: opacity var(--bv-dur-mid) var(--bv-ease);
}

.bv-cat:hover .bv-cat__media img,
.bv-cat:focus-visible .bv-cat__media img {
	transform: scale(1.04);
}

.bv-cat__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.bv-cat__name {
	font-family: var(--bv-font-display);
	font-size: var(--bv-text-xl);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.bv-cat__count {
	font-size: var(--bv-text-xs);
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

.bv-bento__lead .bv-cat__name,
.bv-bento__lead.bv-cat .bv-cat__name {
	font-size: var(--bv-text-2xl);
}

/* ===============================================================
 * Calculateur
 * ============================================================ */

.bv-calc__core {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

@media (width >= 900px) {

	.bv-calc__core {
		grid-template-columns: 1.25fr 1fr;
	}
}

.bv-calc__form {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-md);
	padding: var(--bv-space-lg);
}

.bv-calc__head {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-2xs);
}

.bv-calc__title {
	font-size: var(--bv-text-xl);
}

.bv-calc__fields {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-md);
}

.bv-calc__fields fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bv-calc__surface {
	position: relative;
}

.bv-calc__surface .bv-input {
	padding-inline-end: 3rem;
}

.bv-calc__unit {
	position: absolute;
	inset-inline-end: 0.95rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
	font-size: var(--bv-text-sm);
	color: var(--bv-muted);
	pointer-events: none;
}

.bv-calc__actions {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-2xs);
	align-items: flex-start;
}

/* ---------------------------------------------------------------
 * Résultat
 * ------------------------------------------------------------ */

.bv-calc__result {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-sm);
	justify-content: center;
	padding: var(--bv-space-lg);
	background-color: var(--bv-char);
	color: color-mix(in srgb, var(--bv-paper) 80%, transparent);
}

.bv-calc__result:empty::before {
	content: "";
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 8rem;
	background-image: radial-gradient(circle at 50% 100%, var(--bv-glow-06) 0%, transparent 60%);
}

.bv-calc__result[data-state="loading"] {
	opacity: 0.6;
}

.bv-calc__result[data-state="error"] {
	color: var(--bv-danger-bg);
}

.bv-calc__figure {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.bv-calc__value {
	font-family: var(--bv-font-display);
	font-size: var(--bv-text-3xl);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bv-paper);
	font-variant-numeric: tabular-nums;
	font-variation-settings: "SOFT" var(--bv-display-soft), "WONK" var(--bv-display-wonk);
}

.bv-calc__unit-label {
	font-size: var(--bv-text-sm);
	color: var(--bv-ember);
	font-weight: 600;
}

.bv-calc__summary {
	font-size: var(--bv-text-sm);
}

.bv-calc__energy {
	font-size: var(--bv-text-xs);
	opacity: 0.7;
}

.bv-calc__products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-block-start: var(--bv-space-sm);
	border-block-start: 1px solid var(--bv-glow-12);
}

.bv-calc__product-link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.4rem;
	border-radius: var(--bv-r);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--bv-dur-fast) var(--bv-ease);
}

.bv-calc__product-link:hover {
	background-color: var(--bv-glow-06);
	color: var(--bv-paper);
}

.bv-calc__product-link img {
	inline-size: 3rem;
	block-size: 3rem;
	object-fit: cover;
	border-radius: var(--bv-r-xs);
	flex: none;
}

.bv-calc__product-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.bv-calc__product-title {
	font-size: var(--bv-text-sm);
	line-height: 1.25;
}

.bv-calc__product-price {
	font-size: var(--bv-text-xs);
	color: var(--bv-ember);
	font-weight: 600;
}

/* ===============================================================
 * Comparateur
 * ============================================================ */

.bv-compare {
	inline-size: 100%;
	font-size: var(--bv-text-sm);
}

.bv-compare th,
.bv-compare td {
	padding: 0.9rem 1rem;
	text-align: start;
	border-block-end: var(--bv-line);
	vertical-align: top;
}

.bv-compare thead th {
	font-family: var(--bv-font-display);
	font-size: var(--bv-text-lg);
	font-weight: 600;
	letter-spacing: -0.02em;
	border-block-end-color: var(--bv-shade-14);
}

.bv-compare tbody th {
	font-weight: 500;
	color: var(--bv-muted);
	inline-size: 30%;
}

.bv-compare td {
	font-variant-numeric: tabular-nums;
}

/*
 * Sous 900px le tableau se transforme en cartes empilées : chaque
 * cellule affiche son intitulé de colonne via data-label. Un tableau
 * qui déborde horizontalement est illisible au pouce.
 */
@media (width < 900px) {

	.bv-compare,
	.bv-compare thead,
	.bv-compare tbody,
	.bv-compare tr,
	.bv-compare th,
	.bv-compare td {
		display: block;
	}

	.bv-compare thead {
		display: none;
	}

	.bv-compare tr {
		margin-block-end: var(--bv-space-md);
		border: var(--bv-line);
		border-radius: var(--bv-r);
		overflow: hidden;
	}

	.bv-compare tbody th {
		inline-size: auto;
		background-color: var(--bv-linen);
		font-weight: 600;
		color: var(--bv-bark);
	}

	.bv-compare td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--bv-text-xs);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--bv-muted);
		margin-block-end: 0.15rem;
	}
}

/* ===============================================================
 * Contenu éditable de l'accueil
 * ============================================================ */

.bv-prose--front {
	max-width: none;
}

.bv-search-wrap {
	margin-block-end: var(--bv-space-lg);
	max-inline-size: 40rem;
}