/**
 * Studio Tabs, socle.
 *
 * Les jetons de la direction "Studio Tabs, bois brut et geste net" sont declares
 * ici une seule fois, puis consommes par shop.css, product.css et checkout.css.
 * Ils reprennent exactement les valeurs du kit Elementor pour qu'un bloc construit
 * dans le builder et un bloc stylé ici ne divergent jamais.
 */

:root {
	--st-bg: #ffffff;
	--st-surface: #f6f6f6;
	--st-sand: #f8f8f8;
	--st-ink: #3d1e14;
	--st-muted: #7a6a5f;
	--st-accent: #a3280a;
	--st-accent-deep: #702d1d;
	--st-line: #e4ded9;

	--st-font: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
	--st-font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--st-radius-sm: 8px;
	--st-radius-md: 15px;
	--st-radius-pill: 999px;

	--st-space-xs: 8px;
	--st-space-sm: 16px;
	--st-space-md: 32px;
	--st-space-lg: 64px;
	--st-space-xl: 120px;

	--st-container: 1140px;

	/* Un seul degrade pour tous les boutons du site, et son inverse au survol. */
	--st-btn: linear-gradient(140deg, #702d1d 42%, #3d1e14 100%);
	--st-btn-hover: linear-gradient(140deg, #3d1e14 42%, #702d1d 100%);
}

/* Le fond est peint explicitement : une page transparente emprunte le fond de l'hote. */
body {
	background-color: var(--st-bg);
	color: var(--st-ink);
	font-family: var(--st-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Les grands titres se tiennent serres : l'interlignage par defaut du navigateur
   sur du 50px est le signe le plus visible d'une page non travaillee. */
h1,
h2,
h3,
h4 {
	font-family: var(--st-font);
	color: var(--st-ink);
	font-weight: 500;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2.375rem, 1.6rem + 3.4vw, 4.0625rem);
	line-height: 1.02;
}

h2 {
	font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3.125rem);
	line-height: 1.06;
	font-weight: 400;
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);
	line-height: 1.25;
}

/* Une ligne de texte trop longue est un tell : on borne la mesure, pas la colonne. */
.st-measure {
	max-width: 68ch;
}

/* Libelles d'interface : la seule place de Figtree. */
.st-label {
	font-family: var(--st-font-ui);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--st-muted);
}

/**
 * Boutons.
 *
 * WooCommerce pose la classe .button sur une quinzaine d'elements differents,
 * du "ajouter au panier" au "appliquer le code promo". On les traite ensemble
 * pour qu'aucun bouton n'echappe a la charte.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-xs);
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: var(--st-radius-pill);
	background-color: transparent;
	background-image: var(--st-btn);
	color: #ffffff;
	font-family: var(--st-font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
	background-image: var(--st-btn-hover);
	color: #ffffff;
}

/* Un leger enfoncement vend l'action au doigt, la ou le survol n'existe pas. */
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
	transform: translateY(1px);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var(--st-line);
	color: var(--st-muted);
	cursor: not-allowed;
}

.st-button--ghost,
.woocommerce a.button.st-button--ghost {
	background-color: transparent;
	border-color: var(--st-ink);
	color: var(--st-ink);
}

.st-button--ghost:hover,
.woocommerce a.button.st-button--ghost:hover {
	background-color: var(--st-ink);
	color: #ffffff;
}

/**
 * Focus visible.
 *
 * Le contour par defaut disparait sur fond brique : on le redessine avec un
 * decalage pour qu'il reste lisible sur les deux fonds.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--st-accent);
	outline-offset: 2px;
	border-radius: var(--st-radius-sm);
}

/* Champs de formulaire, communs a la recherche, au panier et au tunnel. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty,
.wc-block-components-text-input input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-sm);
	background-color: var(--st-bg);
	color: var(--st-ink);
	font-family: var(--st-font);
	/* 16px minimum : en dessous, iOS zoome au focus et casse la mise en page. */
	font-size: 1rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--st-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--st-accent);
}

::placeholder {
	color: var(--st-muted);
	opacity: 1;
}

/**
 * Messages WooCommerce.
 *
 * Par defaut ils arrivent avec une bordure haute coloree qui ne correspond a
 * aucune couleur de la marque.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 3px solid var(--st-accent);
	border-radius: var(--st-radius-sm);
	background-color: var(--st-surface);
	color: var(--st-ink);
	font-family: var(--st-font);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--st-accent);
}

/**
 * Bandeau de reassurance.
 *
 * Livraison offerte France, Belgique, Luxembourg et paiement en trois fois :
 * les deux seuls arguments que la marque tient aujourd'hui.
 */
.st-reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-sm) var(--st-space-md);
	align-items: center;
	justify-content: center;
	padding: 14px var(--st-space-sm);
	background-color: var(--st-surface);
	color: var(--st-ink);
	font-size: 0.875rem;
	text-align: center;
}

.st-reassurance__item {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-xs);
}

@media (max-width: 767px) {
	/* Sur mobile la reassurance defile plutot que de manger trois lignes de haut. */
	.st-reassurance {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.st-reassurance::-webkit-scrollbar {
		display: none;
	}

	.st-reassurance__item {
		flex: 0 0 auto;
	}
}

/* La direction est a motion 0.3 : les entrees restent discretes et s'effacent
   completement pour qui a demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/**
 * L'attribut hidden doit gagner.
 *
 * Plusieurs feuilles du site posent un display explicite sur les boutons et les
 * blocs ; sans cette regle, masquer un element en JavaScript par elem.hidden ne
 * produit rien du tout.
 */
[hidden] {
	display: none !important;
}

/**
 * Decompte de conservation du panier.
 *
 * Present dans le panneau lateral et sur la page panier. Discret tant qu'il
 * reste du temps, il ne passe a l'accent que dans les deux dernieres minutes.
 */
.st-hold {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 var(--st-space-sm);
	padding: 9px 12px;
	border-radius: var(--st-radius-pill, 999px);
	background-color: var(--st-surface, #f6f6f6);
	color: var(--st-muted, #7a6a5f);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.8125rem;
	line-height: 1.2;
}

.st-hold__time {
	color: var(--st-ink, #3d1e14);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.st-hold--urgent {
	background-color: rgba(163, 40, 10, 0.08);
	color: var(--st-accent, #a3280a);
}

.st-hold--urgent .st-hold__time {
	color: var(--st-accent, #a3280a);
}