/**
 * BoisVision — composants.
 *
 * Une seule mécanique d'interaction dans tout le thème : LE REMPLISSAGE PAR
 * LE BAS. Au survol, un fond monte depuis l'arête inférieure via scaleY() et
 * transform-origin: bottom, comme une flamme qui prend. Les cartes, les
 * boutons, les liens de filtre et les onglets partagent ce mouvement.
 *
 * On n'anime que transform et opacity, donc jamais de recalcul de layout.
 */

/* ===============================================================
 * Surtitre
 * ============================================================ */

.bv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: var(--bv-text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bv-muted);
}

.bv-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	background: currentcolor;
	opacity: 0.5;
}

.bv-eyebrow--bare::before {
	display: none;
}

.bv-eyebrow--ember {
	color: var(--bv-ember);
}

/* ===============================================================
 * Chapô et en-tête de section
 * ============================================================ */

.bv-lede {
	font-size: var(--bv-text-lg);
	line-height: 1.5;
	color: var(--bv-muted);
	max-width: 54ch;
}

.bv-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-sm);
	margin-block-end: var(--bv-space-xl);
}

@media (width >= 900px) {

	.bv-section-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--bv-space-lg);
	}

	.bv-section-head--split .bv-lede {
		max-width: 38ch;
		text-align: end;
	}
}

/* ===============================================================
 * Boutons
 *
 * Pilule + icône imbriquée dans son propre disque, flush contre le
 * padding interne droit. L'icône se décale en diagonale au survol :
 * la tension cinétique vient de l'intérieur du bouton, pas d'un
 * déplacement du bouton entier.
 * ============================================================ */

.bv-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--bv-r-pill);
	font-size: var(--bv-text-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--bv-dur-mid) var(--bv-ease),
		border-color var(--bv-dur-mid) var(--bv-ease),
		transform var(--bv-dur-fast) var(--bv-ease);
}

.bv-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--bv-dur-mid) var(--bv-ease-mass);
}

.bv-btn:hover::before,
.bv-btn:focus-visible::before {
	transform: scaleY(1);
}

.bv-btn:active {
	transform: scale(0.98);
}

.bv-btn--primary {
	background-color: var(--bv-ember);
	color: var(--bv-paper);
}

.bv-btn--primary::before {
	background-color: var(--bv-ember-700);
}

.bv-btn--primary:hover,
.bv-btn--primary:focus-visible {
	color: var(--bv-paper);
}

.bv-btn--dark {
	background-color: var(--bv-char);
	color: var(--bv-paper);
}

.bv-btn--dark::before {
	background-color: var(--bv-ember);
}

.bv-btn--dark:hover,
.bv-btn--dark:focus-visible {
	color: var(--bv-paper);
}

.bv-btn--ghost {
	border-color: var(--bv-shade-14);
	color: var(--bv-bark);
	background-color: transparent;
}

.bv-btn--ghost::before {
	background-color: var(--bv-bark);
}

.bv-btn--ghost:hover,
.bv-btn--ghost:focus-visible {
	color: var(--bv-paper);
	border-color: var(--bv-bark);
}

.bv-btn--quiet {
	padding-inline: 0.35rem;
	color: var(--bv-muted);
	background: none;
}

.bv-btn--quiet:hover {
	color: var(--bv-ember);
}

.bv-btn--lg {
	padding: 1.1rem 2rem;
	font-size: var(--bv-text-md);
}

.bv-btn--sm {
	padding: 0.6rem 1.1rem;
	font-size: var(--bv-text-xs);
}

.bv-btn--block {
	display: flex;
	inline-size: 100%;
}

.bv-btn[disabled],
.bv-btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* Icône imbriquée : le « bouton dans le bouton ». */
.bv-btn__icon {
	display: grid;
	place-items: center;
	inline-size: 1.9em;
	block-size: 1.9em;
	margin-inline-end: -0.7rem;
	border-radius: var(--bv-r-pill);
	background-color: var(--bv-glow-12);
	flex: none;
	transition: transform var(--bv-dur-mid) var(--bv-ease-out);
}

.bv-btn--ghost .bv-btn__icon {
	background-color: var(--bv-shade-08);
}

.bv-btn:hover .bv-btn__icon,
.bv-btn:focus-visible .bv-btn__icon {
	transform: translate3d(2px, -1px, 0) scale(1.06);
}

.bv-btn--lg .bv-btn__icon {
	margin-inline-end: -1rem;
}

/* ===============================================================
 * Double-bezel
 *
 * Une coque externe discrète contient un cœur au rayon concentrique
 * calculé : --bv-core-r = --bv-shell-r - --bv-shell-pad. Les courbes
 * restent parallèles, comme sur une pièce usinée.
 * ============================================================ */

.bv-shell {
	padding: var(--bv-shell-pad);
	border: var(--bv-line);
	border-radius: var(--bv-shell-r);
	background-color: var(--bv-shade-04);
}

.bv-shell--light {
	background-color: var(--bv-paper);
}

.bv-core {
	border-radius: var(--bv-core-r);
	background-color: var(--bv-paper);
	box-shadow: var(--bv-sh-inset);
	overflow: hidden;
}

/* ===============================================================
 * Cartes
 * ============================================================ */

.bv-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	background-color: var(--bv-paper);
	border: var(--bv-line);
	border-radius: var(--bv-r);
	overflow: hidden;
	transition: border-color var(--bv-dur-mid) var(--bv-ease);
}

.bv-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--bv-linen);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--bv-dur-slow) var(--bv-ease-mass);
}

.bv-card:hover::before,
.bv-card:focus-within::before {
	transform: scaleY(1);
}

.bv-card:hover,
.bv-card:focus-within {
	border-color: var(--bv-shade-14);
}

.bv-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background-color: var(--bv-linen);
	overflow: hidden;
}

.bv-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.bv-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-2xs);
	padding: var(--bv-space-md);
	flex: 1;
}

.bv-card__title {
	font-size: var(--bv-text-lg);
	line-height: 1.2;
}

.bv-card__title a {
	color: inherit;
	text-decoration: none;
}

/*
 * Zone cliquable étendue : le lien du titre couvre toute la carte,
 * ce qui évite d'imbriquer un <a> autour d'éléments interactifs
 * (bouton d'ajout au panier), ce qui serait invalide.
 */
.bv-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--bv-z-base);
}

.bv-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bv-space-sm);
	margin-block-start: auto;
	padding-block-start: var(--bv-space-sm);
}

.bv-card__foot > * {
	position: relative;
	z-index: var(--bv-z-raised);
}

/* ===============================================================
 * Badges et étiquettes
 * ============================================================ */

.bv-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.7em;
	border-radius: var(--bv-r-xs);
	font-size: var(--bv-text-xs);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	background-color: var(--bv-linen);
	color: var(--bv-muted);
}

.bv-badge--ember {
	background-color: var(--bv-ember-050);
	color: var(--bv-ember-700);
}

.bv-badge--moss {
	background-color: var(--bv-moss-050);
	color: var(--bv-moss);
}

.bv-badge--solid {
	background-color: var(--bv-char);
	color: var(--bv-paper);
}

.bv-badge--outline {
	background: none;
	border: var(--bv-line);
}

.bv-badge__icon {
	inline-size: 1em;
	block-size: 1em;
	flex: none;
}

/* ===============================================================
 * Fiches techniques
 * ============================================================ */

.bv-specs {
	display: grid;
	gap: 0;
	margin: 0;
	border-block-start: var(--bv-line);
}

.bv-specs__row {
	display: grid;
	grid-template-columns: minmax(9rem, 40%) 1fr;
	gap: var(--bv-space-sm);
	padding-block: 0.7rem;
	border-block-end: var(--bv-line);
	font-size: var(--bv-text-sm);
}

.bv-specs__label {
	color: var(--bv-muted);
	margin: 0;
}

.bv-specs__value {
	margin: 0;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.bv-specs__unit {
	color: var(--bv-muted);
	font-weight: 400;
}

/* Puces de caractéristiques dans les cartes produit. */
.bv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.bv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.22em 0.55em;
	border: var(--bv-line);
	border-radius: var(--bv-r-xs);
	font-size: var(--bv-text-xs);
	color: var(--bv-muted);
	background-color: var(--bv-paper);
}

.bv-chip svg {
	inline-size: 0.95em;
	block-size: 0.95em;
	color: var(--bv-faint);
}

/* ===============================================================
 * Prix
 * ============================================================ */

.bv-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	font-family: var(--bv-font-display);
	font-size: var(--bv-text-xl);
	font-weight: 600;
	color: var(--bv-bark);
	line-height: 1;
}

.bv-price del {
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-sm);
	font-weight: 400;
	color: var(--bv-muted);
	text-decoration-thickness: 1px;
}

.bv-price ins {
	text-decoration: none;
	color: var(--bv-ember);
}

.bv-price__unit {
	font-family: var(--bv-font-body);
	font-size: var(--bv-text-xs);
	font-weight: 400;
	color: var(--bv-muted);
	letter-spacing: 0;
}

/* ===============================================================
 * Formulaires
 * ============================================================ */

.bv-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bv-label {
	font-size: var(--bv-text-sm);
	font-weight: 500;
	color: var(--bv-bark);
}

.bv-hint {
	font-size: var(--bv-text-xs);
	color: var(--bv-muted);
}

.bv-input,
.bv-select,
.bv-textarea {
	inline-size: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--bv-shade-14);
	border-radius: var(--bv-r);
	background-color: var(--bv-paper);
	color: var(--bv-bark);
	font-size: var(--bv-text-sm);
	line-height: 1.4;
	transition:
		border-color var(--bv-dur-fast) var(--bv-ease),
		box-shadow var(--bv-dur-fast) var(--bv-ease);
}

.bv-input::placeholder,
.bv-textarea::placeholder {
	color: var(--bv-faint);
}

.bv-input:focus,
.bv-select:focus,
.bv-textarea:focus {
	outline: none;
	border-color: var(--bv-ember);
	box-shadow: 0 0 0 3px var(--bv-ember-050);
}

.bv-textarea {
	min-block-size: 8rem;
	resize: vertical;
}

.bv-select {
	appearance: none;
	padding-inline-end: 2.4rem;
	background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.bv-field--error .bv-input,
.bv-field--error .bv-select,
.bv-field--error .bv-textarea {
	border-color: var(--bv-danger);
}

.bv-field__error {
	font-size: var(--bv-text-xs);
	color: var(--bv-danger);
}

.bv-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--bv-text-sm);
	cursor: pointer;
}

.bv-choice input {
	margin-block-start: 0.2em;
	accent-color: var(--bv-ember);
	flex: none;
}

/*
 * Groupe de choix segmenté : chaque option est un vrai radio, masqué
 * visuellement mais toujours atteignable au clavier. Le label reçoit
 * le style, et :has() propage l'état coché au parent.
 */
.bv-segment {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.bv-segment__option {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55rem 0.95rem;
	border: 1px solid var(--bv-shade-14);
	border-radius: var(--bv-r);
	font-size: var(--bv-text-sm);
	cursor: pointer;
	transition:
		color var(--bv-dur-mid) var(--bv-ease),
		border-color var(--bv-dur-mid) var(--bv-ease);
}

.bv-segment__option::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--bv-char);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--bv-dur-mid) var(--bv-ease-mass);
}

.bv-segment__option:hover {
	border-color: var(--bv-shade-14);
}

.bv-segment__option:has(input:checked) {
	color: var(--bv-paper);
	border-color: var(--bv-char);
}

.bv-segment__option:has(input:checked)::before {
	transform: scaleY(1);
}

.bv-segment__option:has(input:focus-visible) {
	outline: 2px solid var(--bv-ember);
	outline-offset: 2px;
}

.bv-segment__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ===============================================================
 * Sélecteur de quantité
 * ============================================================ */

.bv-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--bv-shade-14);
	border-radius: var(--bv-r);
	overflow: hidden;
}

.bv-qty__btn {
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	color: var(--bv-muted);
	transition: background-color var(--bv-dur-fast) var(--bv-ease), color var(--bv-dur-fast) var(--bv-ease);
}

.bv-qty__btn:hover {
	background-color: var(--bv-linen);
	color: var(--bv-bark);
}

.bv-qty input {
	inline-size: 3rem;
	border: 0;
	border-inline: 1px solid var(--bv-rule);
	text-align: center;
	font-variant-numeric: tabular-nums;
	background: none;
	appearance: textfield;
}

.bv-qty input::-webkit-outer-spin-button,
.bv-qty input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* ===============================================================
 * Messages
 * ============================================================ */

.bv-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--bv-space-xs);
	padding: var(--bv-space-sm) var(--bv-space-md);
	border-radius: var(--bv-r);
	border-inline-start: 2px solid currentcolor;
	font-size: var(--bv-text-sm);
	background-color: var(--bv-linen);
	color: var(--bv-bark);
}

.bv-notice svg {
	flex: none;
	margin-block-start: 0.15em;
}

.bv-notice--success {
	background-color: var(--bv-success-bg);
	color: var(--bv-success);
}

.bv-notice--warning {
	background-color: var(--bv-warning-bg);
	color: var(--bv-warning);
}

.bv-notice--error {
	background-color: var(--bv-danger-bg);
	color: var(--bv-danger);
}

/* ===============================================================
 * Fil d'Ariane
 * ============================================================ */

.bv-breadcrumb {
	font-size: var(--bv-text-xs);
	color: var(--bv-muted);
}

.bv-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.bv-breadcrumb a:hover {
	color: var(--bv-ember);
	text-decoration: underline;
}

.bv-breadcrumb__sep {
	display: inline-block;
	margin-inline: 0.5em;
	opacity: 0.55;
}

/* ===============================================================
 * Pagination
 * ============================================================ */

.bv-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin-block-start: var(--bv-space-xl);
}

.bv-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.75rem;
	block-size: 2.75rem;
	padding-inline: 0.65rem;
	border: var(--bv-line);
	border-radius: var(--bv-r);
	font-size: var(--bv-text-sm);
	color: var(--bv-bark);
	text-decoration: none;
	transition: border-color var(--bv-dur-fast) var(--bv-ease), background-color var(--bv-dur-fast) var(--bv-ease);
}

.bv-pagination .page-numbers:hover {
	border-color: var(--bv-shade-14);
	background-color: var(--bv-linen);
}

.bv-pagination .page-numbers.current {
	background-color: var(--bv-char);
	border-color: var(--bv-char);
	color: var(--bv-paper);
}

.bv-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ===============================================================
 * Accordéon natif
 * ============================================================ */

.bv-accordion {
	border-block-start: var(--bv-line);
}

.bv-accordion__item {
	border-block-end: var(--bv-line);
}

.bv-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bv-space-sm);
	padding-block: var(--bv-space-sm);
	font-family: var(--bv-font-display);
	font-size: var(--bv-text-lg);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bv-accordion__summary::-webkit-details-marker {
	display: none;
}

.bv-accordion__sign {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	position: relative;
	color: var(--bv-ember);
}

.bv-accordion__sign::before,
.bv-accordion__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1.5px;
	background: currentcolor;
	transition: transform var(--bv-dur-mid) var(--bv-ease-out);
}

.bv-accordion__sign::after {
	transform: rotate(90deg);
}

.bv-accordion__item[open] .bv-accordion__sign::after {
	transform: rotate(0deg);
}

.bv-accordion__body {
	padding-block-end: var(--bv-space-md);
	color: var(--bv-muted);
	max-width: 62ch;
}

/* ===============================================================
 * Tableaux
 * ============================================================ */

.bv-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

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

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

.bv-table thead th {
	font-size: var(--bv-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bv-muted);
	border-block-end-color: var(--bv-shade-14);
}

.bv-table tbody th {
	font-weight: 500;
	color: var(--bv-muted);
}

/* ===============================================================
 * Médias
 * ============================================================ */

.bv-media {
	position: relative;
	overflow: hidden;
	background-color: var(--bv-linen);
	border-radius: var(--bv-r);
}

.bv-media > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

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

.bv-media--square {
	aspect-ratio: 1;
}

.bv-media--landscape {
	aspect-ratio: 3 / 2;
}

.bv-media--wide {
	aspect-ratio: 16 / 9;
}