/* ==========================================================================
   GLOBAL - Custom Properties, Reset, Base Typography
   ========================================================================== */

:root {
	/* Couleurs */
	--fg-chocolate-dark: #2C1810;
	--fg-chocolate-rich: #4A2C1A;
	--fg-cream: #F5F0E8;
	--fg-gold: #C8A96E;
	--fg-black: #1A1A1A;
	--fg-white: #FDFBF7;
	--fg-text-muted: #6B5B4E;
	--fg-swiss-red: #D52B1E;

	/* Typographie */
	--fg-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--fg-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	/* Tailles fluides */
	--fg-text-sm: 0.875rem;
	--fg-text-base: 1rem;
	--fg-text-lg: 1.25rem;
	--fg-text-xl: clamp(1.5rem, 3vw, 2.25rem);
	--fg-text-2xl: clamp(2rem, 5vw, 3.5rem);
	--fg-text-hero: clamp(2.5rem, 6vw, 5rem);

	/* Espacement */
	--fg-space-xs: 0.5rem;
	--fg-space-sm: 1rem;
	--fg-space-md: 2rem;
	--fg-space-lg: 4rem;
	--fg-space-xl: 6rem;
	--fg-space-2xl: 8rem;

	/* Layout */
	--fg-content-width: 720px;
	--fg-wide-width: 1200px;
	--fg-max-width: 1440px;

	/* Transitions */
	--fg-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--fg-transition-fast: 150ms var(--fg-ease);
	--fg-transition-base: 300ms var(--fg-ease);
	--fg-transition-slow: 600ms var(--fg-ease);

	/* Bordures */
	--fg-radius-sm: 4px;
	--fg-radius-md: 8px;
	--fg-radius-lg: 16px;
}

/* ==========================================================================
   Reset minimal
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--fg-font-body);
	font-size: var(--fg-text-base);
	line-height: 1.7;
	color: var(--fg-chocolate-dark);
	background-color: var(--fg-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: var(--fg-chocolate-rich);
	text-decoration: none;
	transition: color var(--fg-transition-fast);
}

a:hover {
	color: var(--fg-gold);
}

.fg-page-content a,
.fg-contact-info a,
.fg-product-details a {
	text-decoration: underline;
}

ul,
ol {
	list-style: none;
}

/* ==========================================================================
   Typographie de base
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fg-font-heading);
	font-weight: 500;
	line-height: 1.2;
	color: var(--fg-chocolate-dark);
}

h1 { font-size: var(--fg-text-hero); }
h2 { font-size: var(--fg-text-2xl); }
h3 { font-size: var(--fg-text-xl); }
h4 { font-size: var(--fg-text-lg); }

p {
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

/* Letterspacing sur les labels uppercase */
.fg-label {
	font-family: var(--fg-font-body);
	font-size: var(--fg-text-sm);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-chocolate-rich);
}

.fg-label,
.fg-card__meta,
.fg-badge {
	font-family: var(--fg-font-body);
	font-weight: 500;
}

/* Filet dore sous les titres de section */
.fg-section-title {
	position: relative;
	display: inline-block;
	padding-bottom: var(--fg-space-xs);
}

.fg-section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 2px;
	background-color: var(--fg-gold);
}

/* Centrer le filet quand le titre est centre */
.has-text-align-center .fg-section-title::after,
.fg-section-title.fg-section-title--center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* ==========================================================================
   Focus visible (accessibilite clavier)
   ========================================================================== */

:focus {
	outline: none;
}

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

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
	background-color: var(--fg-gold);
	color: var(--fg-white);
}

/* ==========================================================================
   Texture subtile (appliquee sur sections creme)
   ========================================================================== */

.fg-texture {
	position: relative;
}

.fg-texture::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 0;
}

.fg-texture > * {
	position: relative;
	z-index: 1;
}