/*
Theme Name: Cuervo
Description: Boutique de maroquinerie 100 % cuir naturel — portefeuilles, sacs, vestes, ceintures et accessoires.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: jild
*/

/* ---------- Jetons ---------- */
:root {
	--cuir: #9c4a1a;
	--cuir-fonce: #7a3712;
	--cuir-clair: #e3a878;
	--encre: #1e1511;
	--encre-2: #2c201a;
	--creme: #faf5ec;
	--sable: #f0e6d4;
	--ligne: #dfd1ba;
	--texte: #1e1511;
	--texte-doux: #66564a;
	--vert: #1f4a3d;
	--blanc: #fff;
	--focus: #1f4a3d;

	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(16px, 4vw, 48px);
	--max: 1280px;
	--radius: 6px;
	--radius-sm: 4px;
	--shadow: 0 10px 30px -12px rgb(30 21 17 / 0.28);

	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--t-fast: 160ms;
	--t-med: 280ms;

	--z-header: 40;
	--z-scrim: 90;
	--z-drawer: 100;
	--z-toast: 110;
	--header-h: 72px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--creme);
	color: var(--texte);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }

a { color: inherit; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

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

.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--encre);
	color: var(--creme);
	border-radius: var(--radius-sm);
	font-weight: 700;
}
.skip-link:focus { top: 16px; }

.container {
	width: min(100% - 2 * var(--gutter), var(--max));
	margin-inline: auto;
}

.icon { flex: none; }

/* ---------- Éléments communs ---------- */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--cuir);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
/* Le point sellier : signature graphique de la marque. */
.eyebrow::before {
	content: "";
	flex: none;
	width: 34px;
	border-top: 2px dashed currentColor;
}
.eyebrow--light { color: var(--cuir-clair); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 22px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: 56px; padding-inline: 28px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--cuir); color: var(--blanc); }
.btn--primary:hover { background: var(--cuir-fonce); }

.btn--outline { background: transparent; border-color: var(--encre); color: var(--encre); }
.btn--outline:hover { background: var(--encre); color: var(--creme); }

.btn--ghost-light { border-color: rgb(250 245 236 / 0.5); color: var(--creme); }
.btn--ghost-light:hover { background: var(--creme); border-color: var(--creme); color: var(--encre); }

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: inherit;
	transition: background-color var(--t-fast);
}
.icon-btn:hover { background: rgb(30 21 17 / 0.08); }

.round-btn {
	display: inline-grid;
	place-items: center;
	width: 52px; height: 52px;
	background: var(--creme);
	border: 1px solid var(--ligne);
	border-radius: 50%;
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.round-btn:hover:not(:disabled) { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.round-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 700;
	text-underline-offset: 5px;
}
.link-arrow .icon { transition: transform var(--t-fast); }
.link-arrow:hover .icon { transform: translateX(4px); }

.badge {
	display: inline-block;
	padding: 5px 10px;
	background: var(--encre);
	color: var(--creme);
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
}
.badge--green { background: var(--vert); }
.badge--sale { background: var(--cuir); color: var(--blanc); }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(36px, 5vw, 60px); }
.section--flush-top { padding-top: 0; }
.section--sand { background: var(--sable); }

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 32px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* ---------- Bandeau promo ---------- */
.promo-bar {
	padding: 11px var(--gutter);
	background: linear-gradient(90deg, var(--cuir) 0%, var(--cuir-fonce) 45%, var(--encre) 100%);
	color: var(--blanc);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}
.promo-bar strong { font-weight: 800; letter-spacing: 0.12em; }

/* ---------- En-tête ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--creme);
	border-bottom: 1px solid var(--ligne);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--header-h);
}
.site-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-header__account { display: none; }

.logo {
	display: inline-flex;
	flex-direction: column;
	padding: 6px 4px;
	line-height: 1;
	text-decoration: none;
}
.logo__word {
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.03em;
}
.logo--light { color: var(--creme); }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: clamp(14px, 1.7vw, 26px); }
.main-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.main-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 6px;
	border-top: 2px dashed var(--cuir);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-med) var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); }
.is-sale { color: var(--cuir); }

.cart-btn { position: relative; }
.cart-btn__count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	background: var(--cuir);
	color: var(--blanc);
	border-radius: 10px;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.search-bar { border-top: 1px solid var(--ligne); background: var(--creme); }
.search-bar__inner { display: flex; align-items: center; gap: 12px; padding-block: 8px; }
.search-bar input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 4px;
	background: none;
	border: 0;
	font-size: 1.05rem;
}
.search-bar input:focus { outline: none; }
.search-bar__inner:focus-within { box-shadow: inset 0 -2px 0 var(--cuir); }

@media (min-width: 640px) {
	.site-header__account { display: inline-grid; }
}
@media (min-width: 1200px) {
	.site-header__menu { display: none; }
	.site-header__inner { gap: clamp(20px, 3vw, 44px); }
	.main-nav { display: block; }
}

/* ---------- Tiroirs (menu, panier) ---------- */
.scrim {
	position: fixed;
	inset: 0;
	z-index: var(--z-scrim);
	background: rgb(30 21 17 / 0.55);
	opacity: 0;
	transition: opacity var(--t-med);
}
.scrim.is-open { opacity: 1; }

.drawer {
	position: fixed;
	top: 0; bottom: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw - 44px);
	background: var(--creme);
	box-shadow: var(--shadow);
	transition: transform var(--t-med) var(--ease-out);
	overscroll-behavior: contain;
}
.drawer--left { left: 0; transform: translateX(-100%); }
.drawer--right { right: 0; transform: translateX(100%); }
.drawer.is-open { transform: none; }

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 12px 14px 24px;
	border-bottom: 1px solid var(--ligne);
}
.drawer__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }

.drawer__nav { overflow-y: auto; padding: 8px 24px 24px; }
.drawer__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 54px;
	border-bottom: 1px solid var(--ligne);
	font-size: 1.08rem;
	font-weight: 700;
	text-decoration: none;
}

/* Panier */
.cart__empty {
	display: grid;
	justify-items: center;
	gap: 16px;
	margin: auto;
	padding: 24px;
	color: var(--texte-doux);
	text-align: center;
}
.cart__items { flex: 1; overflow-y: auto; padding: 0 24px; }
.cart__items:empty { display: none; }
.cart-item {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	gap: 4px 14px;
	padding-block: 18px;
	border-bottom: 1px solid var(--ligne);
}
.cart-item img { grid-row: span 2; width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-item__name { font-weight: 700; line-height: 1.3; }
.cart-item__color { color: var(--texte-doux); font-size: 0.875rem; }
.cart-item__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-item__row { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ligne); border-radius: var(--radius-sm); }
.qty button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; }
.qty button:hover { background: var(--sable); }
.qty span { min-width: 28px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.cart-item__remove {
	min-height: 40px;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--texte-doux);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cart-item__remove:hover { color: var(--encre); }

.cart__foot { padding: 18px 24px 24px; border-top: 1px solid var(--ligne); background: var(--sable); }
.cart__code label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 700; }
.cart__code-row { display: flex; gap: 8px; }
.cart__code input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	background: var(--creme);
	border: 1px solid #a8957d;
	border-radius: var(--radius-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cart__code-msg { min-height: 1.4em; margin-top: 6px; font-size: 0.875rem; }
.cart__code-msg.is-error { color: #a12a1a; }
.cart__code-msg.is-ok { color: var(--vert); font-weight: 700; }
.cart__totals { display: grid; gap: 6px; margin-block: 10px 16px; }
.cart__totals > div { display: flex; justify-content: space-between; gap: 16px; }
.cart__totals dd { font-variant-numeric: tabular-nums; }
.cart__total { padding-top: 10px; border-top: 1px dashed #a8957d; font-size: 1.2rem; font-weight: 800; }
.cart__note { margin-top: 10px; color: var(--texte-doux); font-size: 0.85rem; text-align: center; }

.toast {
	position: fixed;
	left: 50%; bottom: 24px;
	z-index: var(--z-toast);
	max-width: calc(100vw - 32px);
	padding: 14px 20px;
	background: var(--encre);
	color: var(--creme);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	font-weight: 600;
	opacity: 0;
	transform: translate(-50%, 16px);
	pointer-events: none;
	transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Hero ---------- */
.hero { display: grid; background: var(--encre); color: var(--creme); --focus: var(--cuir-clair); }
.hero__media { order: -1; aspect-ratio: 4 / 3; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(36px, 6vw, 88px) var(--gutter);
}
.hero__lead { max-width: 52ch; margin-top: 20px; color: #dccfbd; font-size: clamp(1.02rem, 1.3vw, 1.18rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1.5px dashed rgb(227 168 120 / 0.45);
	color: #dccfbd;
	font-size: 0.92rem;
	font-weight: 600;
}
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .icon { color: var(--cuir-clair); }

@media (min-width: 900px) {
	.hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); min-height: min(76vh, 720px); }
	.hero__media { order: 0; aspect-ratio: auto; position: relative; }
	.hero__media img { position: absolute; inset: 0; }
	.hero__text { padding-left: max(var(--gutter), (100vw - var(--max)) / 2); padding-right: clamp(40px, 5vw, 80px); }
}

/* ---------- Compte à rebours ---------- */
.countdown { background: var(--cuir); color: var(--blanc); --focus: var(--blanc); }
.countdown__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 16px 40px;
	padding-block: 22px;
	text-align: center;
}
.countdown__offer span { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.15; }
.countdown__offer small { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.countdown__offer strong { letter-spacing: 0.12em; }
.countdown__label { margin-bottom: 4px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.countdown__units { display: flex; justify-content: center; gap: 10px; }
.countdown__units > div { position: relative; display: grid; min-width: 64px; }
.countdown__units > div + div::before {
	content: ":";
	position: absolute;
	left: -8px; top: 0;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.1;
	opacity: 0.7;
}
.countdown__units span { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__units small { font-size: 0.8rem; font-weight: 700; }

/* ---------- Catégories ---------- */
.cats {
	display: flex;
	gap: clamp(14px, 2.4vw, 36px);
	margin-inline: calc(-1 * var(--gutter));
	padding: 6px var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cats li { flex: none; scroll-snap-align: start; }
.cat { display: grid; justify-items: center; gap: 12px; width: clamp(92px, 11vw, 132px); text-decoration: none; }
.cat__img {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	outline: 1.5px dashed transparent;
	outline-offset: 5px;
	transition: outline-color var(--t-fast);
}
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease-out); }
.cat:hover .cat__img { outline-color: var(--cuir); }
.cat:hover img { transform: scale(1.06); }
.cat__label { font-size: 0.98rem; font-weight: 700; line-height: 1.25; text-align: center; }
@media (min-width: 1100px) { .cats { justify-content: space-between; overflow: visible; } }

/* ---------- Tuiles collections ---------- */
.tiles { display: grid; gap: clamp(14px, 2.4vw, 32px); }
.tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3.6;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--encre-2);
	color: var(--blanc);
	text-decoration: none;
	--focus: var(--vert);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tile:hover img { transform: scale(1.04); }
.tile::after {
	content: "";
	position: absolute;
	inset: 35% 0 0;
	background: linear-gradient(to top, rgb(30 21 17 / 0.82), transparent);
}
.tile__content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: clamp(20px, 3vw, 40px);
	text-align: center;
}
.tile__title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.tile:hover .btn--primary { background: var(--cuir-fonce); }

@media (min-width: 760px) {
	.tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(130px, 15vw, 196px); }
	.tile { aspect-ratio: auto; }
	.tile:nth-child(1) { grid-area: 1 / 1 / 4 / 2; }
	.tile:nth-child(2) { grid-area: 1 / 2 / 3 / 3; }
	.tile:nth-child(3) { grid-area: 4 / 1 / 6 / 2; }
	.tile:nth-child(4) { grid-area: 3 / 2 / 6 / 3; }
}

/* ---------- Carte produit ---------- */
.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--sable); aspect-ratio: 1; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.card__body { display: flex; flex: 1; flex-direction: column; padding-top: 14px; }
.card__name { font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.card__leather { margin-top: 2px; color: var(--texte-doux); font-size: 0.875rem; line-height: 1.4; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; }
.prix { font-size: 1.08rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.prix--sale { color: var(--cuir); }
.prix--old { color: var(--texte-doux); font-size: 0.95rem; font-weight: 500; }

.swatches { display: flex; align-items: center; gap: 4px; margin-block: 8px 14px; }
.swatch {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
}
.swatch::before {
	content: "";
	width: 18px; height: 18px;
	background: var(--swatch);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgb(30 21 17 / 0.2);
	transition: box-shadow var(--t-fast);
}
.swatch:hover::before { box-shadow: 0 0 0 2px var(--creme), 0 0 0 3.5px rgb(30 21 17 / 0.45); }
.swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--creme), 0 0 0 4px var(--encre); }
.section--sand .swatch:hover::before { box-shadow: 0 0 0 2px var(--sable), 0 0 0 3.5px rgb(30 21 17 / 0.45); }
.section--sand .swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--sable), 0 0 0 4px var(--encre); }
.swatches__label { margin-left: 6px; color: var(--texte-doux); font-size: 0.85rem; }
.card__add { margin-top: auto; }

/* ---------- Carrousel ---------- */
.carousel__track {
	display: flex;
	gap: clamp(16px, 2.4vw, 32px);
	padding: 4px max(var(--gutter), (100vw - var(--max)) / 2) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--gutter), (100vw - var(--max)) / 2);
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > li { flex: none; width: clamp(236px, 23vw, 296px); scroll-snap-align: start; }
.carousel__controls { display: flex; align-items: center; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.carousel__progress { flex: 1; height: 3px; margin-right: clamp(8px, 3vw, 40px); overflow: hidden; background: var(--ligne); border-radius: 2px; }
.carousel__progress span { display: block; width: 30%; height: 100%; background: var(--encre); border-radius: 2px; transform-origin: left; }

/* ---------- Engagements ---------- */
.pledge__intro { max-width: 760px; }
.pledge__intro > p:last-child { margin-top: 20px; color: var(--texte-doux); font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.pledges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(28px, 4vw, 48px); margin-top: clamp(36px, 5vw, 60px); }
.pledge__icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; background: var(--encre); color: var(--creme); border-radius: 50%; }
.pledges h3 { font-size: 1.15rem; font-weight: 800; }
.pledges p { margin-top: 8px; color: var(--texte-doux); }

/* ---------- Savoir-faire ---------- */
.craft { padding-block: clamp(56px, 8vw, 112px); background: var(--encre); color: var(--creme); --focus: var(--cuir-clair); }
.craft__grid { display: grid; gap: clamp(48px, 6vw, 88px); align-items: center; }
.craft__media { position: relative; padding-bottom: 12%; }
.craft__img-main { width: 88%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.craft__img-inset {
	position: absolute;
	right: 0; bottom: 0;
	width: 46%;
	aspect-ratio: 9 / 7;
	object-fit: cover;
	border: 6px solid var(--encre);
	border-radius: var(--radius);
}
.steps { counter-reset: step; display: grid; gap: 26px; margin-top: 36px; }
.steps li {
	counter-increment: step;
	position: relative;
	padding-left: 64px;
}
.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0; top: -4px;
	color: var(--cuir-clair);
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
}
.steps li + li { padding-top: 26px; border-top: 1.5px dashed rgb(227 168 120 / 0.35); }
.steps li + li::before { top: 22px; }
.steps h3 { font-size: 1.2rem; font-weight: 800; }
.steps p { margin-top: 6px; color: #d5c7b5; }
@media (min-width: 960px) { .craft__grid { grid-template-columns: 1.05fr 1fr; } }

/* ---------- Boutique ---------- */
.shop__count { color: var(--texte-doux); font-weight: 600; }
.chips {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--gutter)) clamp(24px, 3vw, 40px);
	padding: 4px var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
	flex: none;
	min-height: 44px;
	padding: 0 18px;
	background: transparent;
	border: 1.5px solid var(--ligne);
	border-radius: 22px;
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--encre); }
.chip[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.chip--sale { color: var(--cuir); }
@media (min-width: 900px) { .chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; } }

.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(14px, 2.4vw, 32px); }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; } }
@media (max-width: 479px) {
	.shop-grid .card__add span:not(.sr-only) { font-size: 0.88rem; }
	.shop-grid .card__add { padding-inline: 8px; }
	.shop-grid .card__add .icon { display: none; }
	.shop-grid .swatches__label { display: none; }
}
.shop__empty { display: grid; justify-items: center; gap: 16px; padding: 48px 0; color: var(--texte-doux); text-align: center; }

/* ---------- Newsletter ---------- */
.newsletter { padding-block: clamp(48px, 6vw, 80px); background: var(--sable); }
.newsletter__inner { display: grid; gap: 28px; align-items: center; }
.newsletter__inner > div > p { max-width: 46ch; margin-top: 12px; color: var(--texte-doux); }
.newsletter__form label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 700; }
.newsletter__row { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter__row input {
	flex: 1 1 220px;
	min-width: 0;
	height: 52px;
	padding: 0 14px;
	background: var(--creme);
	border: 1px solid #a8957d;
	border-radius: var(--radius-sm);
}
.newsletter__row input[aria-invalid="true"] { border-color: #a12a1a; box-shadow: 0 0 0 1px #a12a1a; }
.newsletter__row .btn { min-height: 52px; }
.newsletter__msg { min-height: 1.5em; margin-top: 8px; font-size: 0.92rem; font-weight: 600; }
.newsletter__msg.is-error { color: #a12a1a; }
.newsletter__msg.is-ok { color: var(--vert); }
@media (min-width: 900px) { .newsletter__inner { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- Pied de page ---------- */
.site-footer { padding-top: clamp(48px, 6vw, 80px); background: var(--encre); color: #d5c7b5; --focus: var(--cuir-clair); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px 48px; }
.site-footer__brand p { max-width: 34ch; margin-top: 18px; }
.site-footer h2 { margin-bottom: 14px; color: var(--creme); font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.site-footer li a:hover { color: var(--creme); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__legal { margin-top: clamp(36px, 5vw, 64px); padding-block: 22px; border-top: 1.5px dashed rgb(227 168 120 / 0.3); font-size: 0.88rem; }

/* ---------- Pages génériques ---------- */
.prose { max-width: 760px; padding-block: clamp(48px, 7vw, 96px); }
.prose > article > * + * { margin-top: 1.1em; }
.prose a:not(.btn) { color: var(--cuir); text-underline-offset: 3px; }

/* ---------- Apparition au défilement ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.js-reveal .reveal { opacity: 1; transform: none; }
}


/* =====================================================================
   Boutique WooCommerce
   ===================================================================== */

.section--page { padding-top: clamp(32px, 5vw, 64px); }
.page-title { font-size: clamp(2.1rem, 4vw, 3.2rem); }

.card__media { display: block; }
.card__name a { text-decoration: none; }
.card__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Toute la photo mène à la fiche produit. */
.card__name a::after { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 1; }
.card__add[aria-busy="true"] { opacity: 0.6; cursor: progress; }

a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.chip[aria-current="page"] { background: var(--encre); border-color: var(--encre); color: var(--creme); }

.btn--whatsapp { background: #075e54; color: var(--blanc); }
.btn--whatsapp:hover { background: #054a42; }
.btn:disabled { opacity: 0.6; cursor: progress; }

.cart-btn__state { position: absolute; top: 2px; right: 0; }
.cart-btn__state .cart-btn__count { position: static; display: block; }

.navigation.pagination { margin-top: clamp(32px, 5vw, 56px); }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--ligne);
	border-radius: 22px;
	font-weight: 700;
	text-decoration: none;
}
.page-numbers.current { background: var(--encre); border-color: var(--encre); color: var(--creme); }
a.page-numbers:hover { border-color: var(--encre); }

/* ---------- Fiche produit ---------- */
.product { padding-block: clamp(20px, 3vw, 36px) clamp(56px, 8vw, 104px); }

.breadcrumb { margin-bottom: clamp(16px, 2.4vw, 28px); color: var(--texte-doux); font-size: 0.9rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumb li + li::before { content: "/"; margin-inline: 10px; color: #a8957d; }
.breadcrumb a { text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--encre); }
.breadcrumb [aria-current] { color: var(--encre); font-weight: 600; }

.product__grid { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px) {
	.product__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
	.gallery { position: sticky; top: calc(var(--header-h) + 24px); }
}

.gallery { display: grid; gap: 12px; }
.gallery__stage {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--sable);
	cursor: zoom-in;
}
.gallery__stage > img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 260ms var(--ease-out);
}
.gallery__stage.is-zoomed { cursor: zoom-out; touch-action: none; }
.gallery__stage.is-zoomed > img { transform: scale(2.4); }
.gallery__badges { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; transition: opacity var(--t-fast); }
.gallery__zoom { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; }
.gallery__zoom span { line-height: 0; }
.gallery__zoom-out,
.gallery__zoom[aria-pressed="true"] .gallery__zoom-in { display: none; }
.gallery__zoom[aria-pressed="true"] .gallery__zoom-out { display: block; }
.gallery__nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; transition: opacity var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__stage.is-zoomed .gallery__nav,
.gallery__stage.is-zoomed .gallery__badges { opacity: 0; pointer-events: none; }

.gallery__thumbs { display: flex; gap: 10px; margin: -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs li { flex: none; }
.gallery__thumb {
	display: block;
	width: clamp(64px, 9vw, 88px);
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	background: var(--sable);
	border: 0;
	border-radius: var(--radius-sm);
	opacity: 0.7;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity var(--t-fast), outline-color var(--t-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; outline-color: var(--encre); }
.gallery__thumb:focus-visible { outline: 3px solid var(--focus); opacity: 1; }

.product__title { font-size: clamp(2rem, 3.6vw, 3rem); }
.product__matiere { margin-top: 8px; color: var(--texte-doux); font-size: 1.05rem; }
.product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 20px; }
.product__price .prix { font-size: 1.7rem; }
.product__price .prix--old { font-size: 1.15rem; }
.product__promo {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 12px;
	background: var(--sable);
	border: 1.5px dashed var(--cuir);
	border-radius: var(--radius-sm);
	font-size: 0.92rem;
}
.product__promo strong { letter-spacing: 0.08em; }
.product__excerpt { margin-top: 20px; color: var(--texte-doux); font-size: 1.05rem; }

.buy { display: grid; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.buy fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.buy legend, .buy__qty label { display: block; margin-bottom: 10px; padding: 0; font-size: 0.95rem; font-weight: 700; }
.buy legend span { color: var(--texte-doux); font-weight: 500; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px 0 12px;
	border: 1.5px solid var(--ligne);
	border-radius: 22px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--t-fast), background-color var(--t-fast);
}
.pill:hover { border-color: var(--encre); }
.pill:has(input:checked) { background: var(--sable); border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.pill:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.pill__dot { width: 18px; height: 18px; background: var(--swatch); border-radius: 50%; box-shadow: 0 0 0 1px rgb(30 21 17 / 0.25); }

.buy__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.buy__add { flex: 1 1 220px; }
.buy .qty { height: 56px; background: var(--creme); border-color: #a8957d; }
.buy .qty button { width: 46px; height: 100%; }
.buy .qty input {
	width: 48px; height: 100%;
	padding: 0;
	background: none;
	border: 0;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.buy .qty input::-webkit-inner-spin-button,
.buy .qty input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.product__stock { color: #a12a1a; font-weight: 700; }
.product__admin-note { padding: 10px 14px; background: #fff7e0; border: 1px solid #e2c56f; border-radius: var(--radius-sm); font-size: 0.9rem; }

.product__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; color: var(--texte-doux); font-size: 0.92rem; font-weight: 600; }
.product__trust li { display: inline-flex; align-items: center; gap: 8px; }
.product__trust .icon { color: var(--cuir); }

.accordion { margin-top: 28px; border-top: 1px solid var(--ligne); }
.accordion details { border-bottom: 1px solid var(--ligne); }
.accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { transition: transform var(--t-med) var(--ease-out); }
.accordion details[open] summary .icon { transform: rotate(45deg); }
.accordion__body { padding-bottom: 20px; color: var(--texte-doux); }
.accordion__body > * + * { margin-top: 0.8em; }
.specs { display: grid; gap: 8px; }
.specs > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.specs dt { color: var(--encre); font-weight: 700; }

/* ---------- Panier latéral (mini-panier WooCommerce) ---------- */
.widget_shopping_cart_content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.woocommerce-mini-cart { flex: 1; margin: 0; padding: 0 24px; overflow-y: auto; }
.woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 2px 14px;
	align-content: start;
	min-height: 112px;
	padding: 18px 40px 18px 0;
	border-bottom: 1px solid var(--ligne);
	transition: opacity var(--t-fast);
}
.woocommerce-mini-cart-item > a:not(.remove) { grid-column: 2; font-weight: 700; line-height: 1.3; text-decoration: none; }
.woocommerce-mini-cart-item > a:not(.remove):hover { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-mini-cart-item img {
	position: absolute;
	left: 0; top: 18px;
	width: 76px !important; height: 76px;
	margin: 0 !important;
	float: none !important;
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.woocommerce-mini-cart-item .variation { grid-column: 2; display: flex; gap: 6px; margin: 0; padding: 0; border: 0; color: var(--texte-doux); font-size: 0.875rem; }
.woocommerce-mini-cart-item .variation dt,
.woocommerce-mini-cart-item .variation dd,
.woocommerce-mini-cart-item .variation p { margin: 0; padding: 0; float: none; font-weight: 500; }
.woocommerce-mini-cart-item .quantity { grid-column: 2; font-weight: 700; font-variant-numeric: tabular-nums; }
.woocommerce-mini-cart-item a.remove {
	position: absolute;
	right: 0; top: 14px;
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	color: var(--texte-doux) !important;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}
.woocommerce-mini-cart-item a.remove:hover { background: var(--sable) !important; color: var(--encre) !important; }
.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 18px 24px 0;
	background: var(--sable);
	border-top: 1px solid var(--ligne);
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}
.woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 14px 24px 12px; background: var(--sable); }
.woocommerce-mini-cart__buttons:last-child { padding-bottom: 24px; }
.widget_shopping_cart_content > .whatsapp-wrap { padding: 0 24px 24px; background: var(--sable); }
.woocommerce-mini-cart__empty-message { margin: auto; padding: 24px; color: var(--texte-doux); text-align: center; }

/* ---------- Boutons, champs et messages WooCommerce ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-mini-cart__buttons .button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 20px;
	background: transparent;
	border: 2px solid var(--encre);
	border-radius: var(--radius-sm);
	color: var(--encre);
	font-family: var(--font-body);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-mini-cart__buttons .button:hover { background: var(--encre); color: var(--creme); }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.checkout,
.woocommerce-mini-cart__buttons .button.checkout,
.woocommerce #payment #place_order {
	background: var(--cuir);
	border-color: var(--cuir);
	color: var(--blanc);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.checkout:hover,
.woocommerce-mini-cart__buttons .button.checkout:hover,
.woocommerce #payment #place_order:hover { background: var(--cuir-fonce); border-color: var(--cuir-fonce); color: var(--blanc); }
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] { padding: 10px 20px; border-color: var(--ligne); color: var(--texte-doux); }

.prose--wide { max-width: var(--max); }
.prose--wide .page-title { margin-bottom: clamp(20px, 3vw, 36px); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-cart table.cart td.actions .coupon .input-text {
	min-height: 48px;
	padding: 10px 12px;
	background: var(--blanc);
	border: 1px solid #a8957d;
	border-radius: var(--radius-sm);
	font-size: 1rem;
}
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 180px; }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 26px; }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
.woocommerce form .form-row label { font-size: 0.92rem; font-weight: 700; }
.woocommerce table.shop_table { background: var(--blanc); border-color: var(--ligne); border-radius: var(--radius); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--ligne); }
.woocommerce table.shop_table .product-name a { font-weight: 700; text-decoration: none; }
.woocommerce table.cart img { width: 72px; border-radius: var(--radius-sm); }
.woocommerce .quantity .qty { width: 72px; min-height: 44px; border: 1px solid #a8957d; border-radius: var(--radius-sm); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review { padding: clamp(16px, 2.4vw, 28px); background: var(--sable); border-radius: var(--radius); }
.woocommerce-checkout #payment { background: transparent; }
.woocommerce-checkout #payment div.payment_box { background: var(--creme); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--creme); }
.prose .woocommerce h2, .prose .woocommerce h3 { margin-bottom: 14px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button { margin-bottom: 10px; font-size: 1.05rem; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--sable);
	border-top-color: var(--cuir);
	border-radius: var(--radius-sm);
	color: var(--encre);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--cuir); }
.woocommerce-error { border-top-color: #a12a1a; }
.woocommerce a { text-underline-offset: 3px; }
.woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; }
.woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--sable); }

/* Le style par défaut de WooCommerce remet à zéro ces listes : on reprend la main dans le tiroir. */
.drawer ul.woocommerce-mini-cart { padding: 0 24px; list-style: none; }
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item { padding: 18px 40px 18px 0; }
.drawer .woocommerce-mini-cart-item > a:not(.remove) { display: block; margin: 0; }
.drawer .woocommerce-mini-cart-item dl.variation { margin: 0; padding: 0; border: 0; }
.drawer .woocommerce-mini-cart-item dl.variation dt,
.drawer .woocommerce-mini-cart-item dl.variation dd { float: none; clear: none; margin: 0; padding: 0; }
.drawer .woocommerce-mini-cart-item a.remove { left: auto; }

/* =====================================================================
   Cuervo v3 : logo animé, fiche produit compacte, boutons flottants
   ===================================================================== */

/* ---------- Logo ---------- */
.logo__word { display: inline-block; padding: 4px 6px 0 2px; overflow: hidden; white-space: nowrap; }
.logo__char { display: inline-block; transform-origin: 50% 100%; will-change: transform; }

/* ---------- Avant l'entrée en scène ----------
   Ces éléments sont animés par GSAP (main.js, « revealSelector »). On les
   masque dès le premier affichage pour éviter qu'ils clignotent ; la classe
   .has-motion est retirée si GSAP ne se charge pas. Gardez les deux listes
   identiques. */
.has-motion :is(.section__head, .pledge__intro, .cats > li, .tile, .pledges > li, .steps > li, .craft__media,
	.carousel__track > li, .shop-grid > li, .newsletter__inner > *, .product__info > *, .gallery, .chips,
	.hero__text > *, .logo__mark, .logo__text > *) { visibility: hidden; }

/* GSAP pilote ces transformations image par image : une transition CSS par-dessus les ferait traîner. */
.has-motion :is(.card__media img, .tile img, .gallery__stage > img, .btn, .round-btn, .fab) { transition-property: background-color, color, border-color, opacity; }
.has-motion .gallery__stage.is-zoomed > img { transform: none; }

/* ---------- Ajout au panier ---------- */
.fly-ghost {
	position: fixed;
	z-index: 120;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	pointer-events: none;
}
.btn.is-added { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.toast { display: flex; align-items: center; gap: 14px; }
.toast.is-open { pointer-events: auto; }
.toast__action {
	flex: none;
	min-height: 36px;
	padding: 0 12px;
	background: none;
	border: 1.5px solid rgb(250 245 236 / 0.55);
	border-radius: var(--radius-sm);
	color: var(--creme);
	font-weight: 700;
	white-space: nowrap;
}
.toast__action:hover { background: var(--creme); color: var(--encre); }
.toast__action:focus-visible { outline-color: var(--cuir-clair); }

/* ---------- Boutons flottants ---------- */
.fab {
	position: fixed;
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 30;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 22px -6px rgb(30 21 17 / 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility var(--t-med), background-color var(--t-fast);
}
.fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab--whatsapp { left: max(20px, env(safe-area-inset-left)); background: #0f7a44; color: var(--blanc); }
.fab--whatsapp:hover { background: #0b6337; }
.fab--top { right: max(20px, env(safe-area-inset-right)); background: var(--encre); color: var(--creme); }
.fab--top:hover { background: var(--cuir); }
@media (max-width: 640px) {
	.fab { width: 50px; height: 50px; bottom: 16px; }
	.fab--whatsapp { left: 16px; }
	.fab--top { right: 16px; }
	.toast { bottom: 80px; }
}

/* ---------- Page boutique ---------- */
.page-intro { max-width: 62ch; margin-top: 12px; color: var(--texte-doux); font-size: 1.05rem; }

/* ---------- Fiche produit : tout tient dans l'écran ---------- */
.product { padding-top: 14px; }
.breadcrumb { margin-bottom: 14px; }
.product__info .eyebrow { margin-bottom: 8px; }
.product__title { font-size: clamp(1.8rem, 2.5vw, 2.5rem); }
.product__matiere { margin-top: 4px; font-size: 1rem; }
.product__pricing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.product__price { margin-top: 0; }
.product__price .prix { font-size: 1.6rem; }
.product__promo { margin-top: 0; padding: 4px 10px; font-size: 0.88rem; }
.product__stock--low { margin-top: 8px; color: var(--cuir); font-size: 0.92rem; }
.product__excerpt {
	display: -webkit-box;
	margin-top: 12px;
	overflow: hidden;
	font-size: 1rem;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}
.buy { gap: 14px; margin-top: 16px; padding-top: 16px; }
.buy legend, .buy__qty label { margin-bottom: 6px; }
.buy__qty label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.buy__row { align-items: stretch; gap: 10px; }
.buy .qty { height: 52px; }
.buy__row .btn { flex: 1 1 210px; min-height: 52px; padding-inline: 12px; font-size: 0.95rem; white-space: nowrap; }
.product__trust { margin-top: 16px; gap: 6px 20px; font-size: 0.88rem; }
.accordion { margin-top: 20px; }

@media (min-width: 900px) {
	.product__grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); }
	/* La photo prend la hauteur restante sous l'en-tête : rien à faire défiler pour voir le produit. */
	.gallery {
		--stage: clamp(320px, calc(100dvh - 214px), 620px);
		grid-template-columns: 68px var(--stage);
		top: calc(var(--header-h) + 16px);
	}
	.gallery:not(:has(.gallery__thumbs)) { grid-template-columns: var(--stage); }
	.gallery__stage { grid-column: -2 / -1; grid-row: 1; width: var(--stage); height: var(--stage); }
	.gallery__thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		max-height: var(--stage);
		overflow-x: visible;
		overflow-y: auto;
	}
	.gallery__thumb { width: 60px; }
}
@media (min-width: 900px) and (max-height: 760px) {
	.product__title { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
	.product__excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
	.pill { min-height: 40px; }
	.buy .qty, .buy__row .btn { height: 48px; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.fab { transform: none; }
}

/* =====================================================================
   Page de connexion
   ===================================================================== */

.login-page .woocommerce { max-width: none; }
.login-page .woocommerce-notices-wrapper:not(:empty) { width: min(100% - 2 * var(--gutter), 560px); margin: 20px auto 0; }
.login { display: grid; min-height: calc(100dvh - var(--header-h)); }
.login__visual { position: relative; display: none; overflow: hidden; background: var(--encre); color: var(--creme); }
.login__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login__visual::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgb(30 21 17 / 0.9), transparent); }
.login__quote { position: absolute; left: clamp(28px, 4vw, 56px); right: clamp(28px, 4vw, 56px); bottom: clamp(28px, 5vw, 64px); z-index: 1; }
.login__tagline { max-width: 14ch; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.login__panel { display: grid; place-items: center; padding: clamp(32px, 6vw, 72px) var(--gutter); }
.login__box { width: min(100%, 440px); }
.login__title { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.login__lead { margin-top: 12px; color: var(--texte-doux); font-size: 1.05rem; }
.login__form { display: grid; gap: 18px; margin-top: 28px; }
.login__field { display: grid; gap: 6px; }
.login__field label { font-size: 0.95rem; font-weight: 700; }
.login__field input {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	background: var(--blanc);
	border: 1.5px solid #a8957d;
	border-radius: var(--radius-sm);
	font-size: 1rem;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login__field input:focus-visible { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgb(31 74 61 / 0.35); }
.login__password { position: relative; }
.login__password input { padding-right: 104px; }
.login__toggle {
	position: absolute;
	right: 6px; top: 6px;
	height: 42px;
	padding: 0 12px;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--cuir-fonce);
	font-size: 0.9rem;
	font-weight: 700;
}
.login__toggle:hover { background: var(--sable); }
.login__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 0.95rem; }
.login__row a { color: var(--cuir-fonce); font-weight: 700; text-underline-offset: 4px; }
.login__remember { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.login__remember input { width: 20px; height: 20px; accent-color: var(--cuir); }
.login__back { margin-top: 28px; padding-top: 20px; border-top: 1.5px dashed var(--ligne); }
.login__back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--texte-doux); font-weight: 600; text-decoration: none; }
.login__back a:hover { color: var(--encre); }
.login-page .woocommerce-error { margin: 0; }

@media (min-width: 900px) {
	.login { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
	.login__visual { display: block; }
}

/* =====================================================================
   Commande express
   ===================================================================== */

.qo {
	width: min(520px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	padding: 0;
	background: var(--creme);
	border: 0;
	border-radius: 14px;
	box-shadow: 0 30px 80px -20px rgb(30 21 17 / 0.6);
	color: var(--texte);
}
.qo::backdrop { background: rgb(30 21 17 / 0.6); backdrop-filter: blur(3px); }
.qo[open] { animation: qo-in 260ms var(--ease-out); }
@keyframes qo-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.qo__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 14px 24px; background: var(--creme); border-bottom: 1px solid var(--ligne); }
.qo__head h2 { font-size: 1.6rem; }
.qo__form, .qo__done { display: grid; gap: 14px; padding: 18px 24px 24px; }
.qo__lead { color: var(--texte-doux); }
.qo__field { display: grid; gap: 5px; }
.qo__field label { font-size: 0.95rem; font-weight: 700; }
.qo__field input {
	width: 100%;
	height: 52px;
	padding: 0 14px;
	background: var(--blanc);
	border: 1.5px solid #a8957d;
	border-radius: var(--radius-sm);
	font-size: 1rem;
}
.qo__field input:focus-visible { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgb(31 74 61 / 0.35); }
.qo__field input[aria-invalid="true"] { border-color: #a12a1a; box-shadow: 0 0 0 1px #a12a1a; }
.qo__error { color: #a12a1a; font-size: 0.9rem; font-weight: 600; }
.qo__error--form { padding: 10px 14px; background: #f6d6d1; border-radius: var(--radius-sm); color: #6d150c; }
.qo__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.qo__totals { display: grid; gap: 6px; padding: 14px 16px; background: var(--sable); border-radius: var(--radius-sm); }
.qo__totals div { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.qo__totals dt span { color: var(--texte-doux); }
.qo__total { margin-top: 4px; padding-top: 10px; border-top: 1.5px dashed #a8957d; font-size: 1.12rem; font-weight: 800; }
.qo__done { justify-items: center; text-align: center; outline: none; }
.qo__done h2 { font-size: 1.7rem; }
.qo__done p { color: var(--texte-doux); }
.qo__check { display: grid; place-items: center; width: 68px; height: 68px; background: var(--vert); border-radius: 50%; color: var(--blanc); }
.qo .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
@media (max-width: 520px) {
	.qo { width: 100vw; max-width: none; max-height: 100dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
}

/* =====================================================================
   Finitions (audit mobile + animations)
   ===================================================================== */

/* En-tête qui s'efface en descendant */
.site-header { transition: box-shadow var(--t-med); }
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgb(30 21 17 / 0.45); }

/* Couture de lecture : un point sellier se coud sous l'en-tête au fil du défilement. */
.site-header__stitch { display: none; }
.has-motion .site-header__stitch {
	display: block;
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	border-top: 2px dashed var(--cuir);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* Rubrique en cours dans le menu */
.main-nav a[aria-current]::after { transform: scaleX(1); }
.main-nav a[aria-current] { color: var(--cuir-fonce); }

/* Texte : pas de mot orphelin en fin de paragraphe */
p, li, dd { text-wrap: pretty; }

/* Pression sur les boutons */
.btn:active, .round-btn:active, .icon-btn:active { transform: scale(0.96); }

/* Contour léger sur les photos, pour qu'elles ne se fondent pas dans le fond */
.card__media::after, .gallery__stage::after, .tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
	pointer-events: none;
}

/* Carte produit : deuxième photo au survol */
.card__zoom { position: absolute; inset: 0; display: block; }
.card__zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media-alt { opacity: 0; transition: opacity 450ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.card:hover .card__media-alt { opacity: 1; }
}
html:not(.has-motion) .card:hover .card__zoom { transform: scale(1.045); transition: transform 500ms var(--ease-out); }
.card:hover .card__media img { transform: none; }
.card__badges { z-index: 2; }

/* Titres découpés en mots */
.split-line { padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Pastilles de couleur : 40 px au doigt */
@media (pointer: coarse), (max-width: 640px) {
	.swatches { gap: 2px; }
	.swatch { width: 40px; height: 40px; }
	.swatch::before { width: 20px; height: 20px; }
}

/* Message « ajouté au panier » : pleine largeur en haut de l'écran sur mobile */
.toast__action { min-height: 44px; }
@media (max-width: 640px) {
	.toast {
		top: calc(var(--header-h) + 10px);
		bottom: auto;
		left: 12px;
		right: 12px;
		max-width: none;
		justify-content: space-between;
		transform: translateY(-12px);
	}
	.toast.is-open { transform: none; }
}

/* Connexion : lien « mot de passe oublié » assez haut pour le doigt */
.login__row a { display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================================
   Logo Cuervo : emblème + nom
   ===================================================================== */
.logo { flex-direction: row; align-items: center; gap: 10px; }
.logo__text { display: flex; flex-direction: column; }
.logo__mark {
	position: relative;
	flex: none;
	width: 48px; height: 48px;
	-webkit-mask: var(--mark) center / contain no-repeat;
	mask: var(--mark) center / contain no-repeat;
}
.logo__mark img { display: block; width: 100%; height: 100%; }
/* Reflet lumineux, visible seulement là où il y a du métal (masque) */
.logo__shine {
	position: absolute;
	inset: -10%;
	background: linear-gradient(110deg, transparent 32%, rgb(255 238 214 / 0.9) 50%, transparent 68%);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}
.site-footer .logo__mark { width: 56px; height: 56px; }
@media (max-width: 640px) {
	.site-header .logo__mark { width: 40px; height: 40px; }
	.site-header .logo { gap: 8px; }
}
.login__emblem { display: block; width: 76px; height: 76px; margin-bottom: 18px; }