/*
 * Zayn Shop — jetons de marque et composants réutilisables.
 * Source : assets/branding/charte001-003.png. Détail et usages : docs/design-system.md.
 * Les couleurs sont aussi déclarées dans le Kit global Elementor et les options Porto (mêmes valeurs).
 * Propriétés logiques (margin-inline, inset-inline…) pour rester compatible RTL (arabe).
 */

:root {
	--zayn-plum: #3E1B3D;
	--zayn-burgundy: #7A1533;
	--zayn-rose-gold: #D4A574;
	--zayn-rose-gold-text: #93653A; /* rose gold assombri : texte sur ivoire/blanc, 4,8:1 (AA). Pas sur blush. */
	--zayn-blush: #F4D7C9;
	--zayn-ivory: #FFF9F5;
	--zayn-black: #1A1A1A;
	--zayn-white: #FFFFFF;
	--zayn-line: #EADBD2;

	--zayn-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--zayn-font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	--zayn-radius: 4px;
	--zayn-space-section: clamp(3.5rem, 8vw, 7rem);
	--zayn-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Surtitre éditorial (« NOS CATÉGORIES ») */
.zayn-eyebrow {
	margin: 0 0 .5rem;
	font-family: var(--zayn-font-text);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--zayn-rose-gold-text);
}

.zayn-title {
	margin: 0 0 1rem;
	font-family: var(--zayn-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	color: var(--zayn-plum);
}

/* Boutons : primaire prune, secondaire contour. Classe utilisable dans Elementor (Avancé › Classes CSS). */
.zayn-btn,
.zayn-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .95em 1.8em;
	border: 1px solid var(--zayn-plum);
	border-radius: var(--zayn-radius);
	background: var(--zayn-plum);
	color: var(--zayn-white);
	font-family: var(--zayn-font-text);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background-color .25s var(--zayn-ease), color .25s var(--zayn-ease);
}
.zayn-btn:hover,
.zayn-btn .elementor-button:hover { background: var(--zayn-burgundy); border-color: var(--zayn-burgundy); color: var(--zayn-white); }

.zayn-btn--ghost,
.zayn-btn--ghost .elementor-button { background: transparent; color: var(--zayn-plum); }
.zayn-btn--ghost:hover,
.zayn-btn--ghost .elementor-button:hover { background: var(--zayn-plum); color: var(--zayn-white); }

.zayn-btn--gold,
.zayn-btn--gold .elementor-button { background: var(--zayn-blush); border-color: var(--zayn-rose-gold); color: var(--zayn-plum); }

:where(.zayn-btn, .zayn-btn .elementor-button):focus-visible { outline: 2px solid var(--zayn-rose-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}