/**
 * BoisVision — remise à zéro et styles de base.
 *
 * Ce thème n'utilise PAS les couches CSS (@layer), et c'est délibéré.
 *
 * Une déclaration placée dans une couche a une priorité INFÉRIEURE à une
 * déclaration hors couche, quelle que soit sa spécificité. Or WordPress
 * imprime les styles issus de theme.json > styles — dont la règle de lien
 * `:root :where(a:not(.wp-element-button)) { color; text-decoration }` — hors
 * de toute couche. Ranger le CSS du thème dans des couches revenait donc à
 * laisser theme.json colorer et souligner CHAQUE lien du site : navigation,
 * pied de page, titres de cartes et jusqu'au texte des boutons.
 *
 * L'ordre de la cascade est assuré autrement : par les dépendances déclarées
 * dans inc/enqueue.php, qui font en outre suivre les feuilles du thème
 * immédiatement après les styles globaux de WordPress.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--bv-sticky-offset);
	tab-size: 4;
}

body {
	min-height: 100svh;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas,
picture {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: inherit;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

body {
	background-color: var(--bv-paper);
	color: var(--bv-bark);
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-md);
	line-height: 1.65;
	letter-spacing: -0.005em;
}

/*
 * Grain de papier.
 *
 * Posé sur un pseudo-élément `fixed` et `pointer-events: none` : il ne
 * participe jamais au défilement, donc le GPU ne le recompose pas à
 * chaque frame. L'attacher à un conteneur scrollable tuerait les
 * performances mobiles.
 */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--bv-z-toast);
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

h1,
h2,
h3,
h4 {
	font-family: var(--bv-font-display);
	font-weight: 600;
	font-variation-settings: "SOFT" var(--bv-display-soft), "WONK" var(--bv-display-wonk);
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	font-size: var(--bv-text-3xl);
	letter-spacing: -0.03em;
}

h2 {
	font-size: var(--bv-text-2xl);
}

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

h4 {
	font-size: var(--bv-text-lg);
	letter-spacing: -0.01em;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--bv-ember);
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
	transition: color var(--bv-dur-fast) var(--bv-ease);
}

a:hover {
	color: var(--bv-ember-700);
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--bv-text-xs);
}

hr {
	border: 0;
	border-top: var(--bv-line);
	margin-block: var(--bv-space-xl);
}

/*
 * Chiffres à chasse fixe partout où une colonne de nombres doit
 * s'aligner : prix, volumes en stères, taux d'humidité, kWh.
 */
.bv-price,
.bv-num,
.bv-spec__value,
.bv-badge,
.bv-eyebrow,
table {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
 * Accessibilité
 * ------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--bv-ember);
	outline-offset: 3px;
	border-radius: var(--bv-r-xs);
}

:focus:not(:focus-visible) {
	outline: none;
}

.bv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bv-skip-link {
	position: absolute;
	z-index: var(--bv-z-skip);
	inset-inline-start: var(--bv-space-sm);
	inset-block-start: -100%;
	padding: var(--bv-space-xs) var(--bv-space-md);
	background: var(--bv-char);
	color: var(--bv-paper);
	border-radius: 0 0 var(--bv-r) var(--bv-r);
	font-size: var(--bv-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: inset-block-start var(--bv-dur-fast) var(--bv-ease-out);
}

.bv-skip-link:focus {
	inset-block-start: 0;
	color: var(--bv-paper);
}

::selection {
	background: var(--bv-ember);
	color: var(--bv-paper);
}

/*
 * Respect de prefers-reduced-motion.
 *
 * On neutralise le mouvement, mais on force aussi les éléments animés
 * à l'entrée à rester visibles : sans ce garde-fou, une préférence
 * système rendrait tout le contenu révélé au scroll invisible.
 */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}