/* ==========================================================================
   LAYOUT - Conteneurs, grilles, utilitaires de positionnement
   ========================================================================== */

.fg-container {
	width: 100%;
	max-width: var(--fg-max-width);
	margin-inline: auto;
	padding-inline: var(--fg-space-sm);
}

@media (min-width: 768px) {
	.fg-container {
		padding-inline: var(--fg-space-md);
	}
}

.fg-container--wide {
	max-width: var(--fg-wide-width);
}

.fg-container--narrow {
	max-width: var(--fg-content-width);
}

.fg-container--full {
	max-width: none;
	padding-inline: 0;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.fg-section {
	padding-block: clamp(var(--fg-space-lg), 8vw, var(--fg-space-2xl));
}

.fg-section--cream {
	background-color: var(--fg-cream);
}

.fg-section--dark {
	background-color: var(--fg-chocolate-dark);
	color: var(--fg-white);
}

.fg-section--dark h1,
.fg-section--dark h2,
.fg-section--dark h3,
.fg-section--dark h4 {
	color: var(--fg-white);
}

.fg-section--dark .fg-label {
	color: var(--fg-gold);
}

.fg-section--dark a {
	color: var(--fg-gold);
}

.fg-section--dark .fg-pullquote {
	color: var(--fg-white);
}

/* ==========================================================================
   Grilles
   ========================================================================== */

.fg-grid {
	display: grid;
	gap: var(--fg-space-md);
}

.fg-grid--2 {
	grid-template-columns: 1fr;
}

.fg-grid--3 {
	grid-template-columns: 1fr;
}

/* Grille asymetrique (anti-AI slop) */
.fg-grid--asymmetric {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.fg-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.fg-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.fg-grid--asymmetric {
		grid-template-columns: 1fr 1.2fr;
	}
}

@media (min-width: 1024px) {
	.fg-grid--3 {
		grid-template-columns: 1fr 1.2fr 0.8fr;
	}

	.fg-grid--asymmetric {
		grid-template-columns: 1fr 1.4fr 0.6fr;
	}
}

/* ==========================================================================
   Split layout (carte, etc.)
   ========================================================================== */

.fg-split {
	display: flex;
	flex-direction: column;
	gap: 0;
}

@media (min-width: 1024px) {
	.fg-split {
		flex-direction: row;
		min-height: calc(100vh - 80px);
	}

	.fg-split__main {
		flex: 0 0 60%;
	}

	.fg-split__sidebar {
		flex: 0 0 40%;
		overflow-y: auto;
	}
}

/* ==========================================================================
   Utilitaires d'espacement
   ========================================================================== */

.fg-mt-sm { margin-top: var(--fg-space-sm); }
.fg-mt-md { margin-top: var(--fg-space-md); }
.fg-mt-lg { margin-top: var(--fg-space-lg); }
.fg-mb-sm { margin-bottom: var(--fg-space-sm); }
.fg-mb-md { margin-bottom: var(--fg-space-md); }
.fg-mb-lg { margin-bottom: var(--fg-space-lg); }

/* ==========================================================================
   Utilitaires de texte
   ========================================================================== */

.fg-text-center { text-align: center; }
.fg-text-muted { color: var(--fg-text-muted); }

/* ==========================================================================
   Image avec debordement (broken grid)
   ========================================================================== */

.fg-overflow-image {
	position: relative;
}

@media (min-width: 1024px) {
	.fg-overflow-image--right {
		margin-right: calc(-1 * var(--fg-space-lg));
	}

	.fg-overflow-image--left {
		margin-left: calc(-1 * var(--fg-space-lg));
	}
}

/* ==========================================================================
   Page content (Gutenberg)
   ========================================================================== */

.fg-page-content {
	padding-block: var(--fg-space-lg);
}

.fg-page-content > * + * {
	margin-top: 1.5em;
}

/* ==========================================================================
   Intro Homepage
   ========================================================================== */

.fg-intro {
	max-width: var(--fg-content-width);
	margin-bottom: var(--fg-space-lg);
}

.fg-intro__text {
	margin-top: var(--fg-space-sm);
	font-size: var(--fg-text-lg);
	color: var(--fg-chocolate-rich);
	line-height: 1.8;
}

.fg-intro__values {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-space-md);
}

@media (min-width: 768px) {
	.fg-intro__values {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fg-intro__value {
	text-align: center;
	padding: var(--fg-space-md);
	background-color: var(--fg-white);
	border-radius: var(--fg-radius-md);
	border: 1px solid rgba(200, 169, 110, 0.2);
}

.fg-intro__value-icon {
	margin-inline: auto;
	margin-bottom: var(--fg-space-sm);
	width: 40px;
}

.fg-intro__value-title {
	font-size: var(--fg-text-base);
	margin-bottom: var(--fg-space-xs);
}

.fg-intro__value-desc {
	font-size: var(--fg-text-sm);
	color: var(--fg-text-muted);
	margin-bottom: 0;
}

/* ==========================================================================
   Products Preview Homepage
   ========================================================================== */

.fg-products-preview__header {
	margin-bottom: var(--fg-space-lg);
}

.fg-products-preview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-space-md);
	margin-bottom: var(--fg-space-lg);
}

@media (min-width: 640px) {
	.fg-products-preview__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fg-products-preview__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fg-products-preview__cta {
	text-align: center;
}

/* ==========================================================================
   Chef Homepage
   ========================================================================== */

.fg-chef {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-space-lg);
	align-items: center;
}

@media (min-width: 768px) {
	.fg-chef {
		grid-template-columns: 1fr 2fr;
	}
}

.fg-chef__image {
	border-radius: var(--fg-radius-md);
	overflow: hidden;
}

.fg-chef__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fg-chef__content {
	display: flex;
	flex-direction: column;
	gap: var(--fg-space-md);
}

.fg-chef__cite {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-style: normal;
}

.fg-chef__name {
	font-family: var(--fg-font-heading);
	font-size: var(--fg-text-lg);
	color: var(--fg-white);
}

.fg-chef__title {
	font-size: var(--fg-text-sm);
	color: var(--fg-gold);
	letter-spacing: 0.08em;
}

/* ==========================================================================
   CTA B2B Homepage
   ========================================================================== */

.fg-cta-b2b {
	background-color: var(--fg-chocolate-rich);
	color: var(--fg-white);
}

.fg-cta-b2b h2,
.fg-cta-b2b h3,
.fg-cta-b2b .fg-label {
	color: inherit;
}

.fg-cta-b2b .fg-section-title {
	color: var(--fg-white);
}

.fg-cta-b2b .fg-section-title::after {
	background-color: var(--fg-gold);
}

.fg-cta-b2b__inner {
	text-align: center;
	max-width: 800px;
	margin-inline: auto;
}

.fg-cta-b2b__content {
	margin-bottom: var(--fg-space-lg);
}

.fg-cta-b2b__content p {
	color: rgba(253, 251, 247, 0.8);
	font-size: var(--fg-text-lg);
	max-width: 55ch;
	margin-inline: auto;
}

.fg-cta-b2b__args {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-space-md);
	margin-bottom: var(--fg-space-lg);
}

@media (min-width: 640px) {
	.fg-cta-b2b__args {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fg-cta-b2b__arg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	padding: var(--fg-space-md);
	border: 1px solid rgba(200, 169, 110, 0.3);
	border-radius: var(--fg-radius-md);
}

.fg-cta-b2b__arg-number {
	font-family: var(--fg-font-heading);
	font-size: var(--fg-text-2xl);
	color: var(--fg-gold);
	line-height: 1;
}

.fg-cta-b2b__arg-number small {
	font-size: 0.5em;
	vertical-align: super;
}

.fg-cta-b2b__arg-label {
	font-size: var(--fg-text-sm);
	color: rgba(253, 251, 247, 0.7);
	text-align: center;
}

/* ==========================================================================
   Map Teaser Homepage
   ========================================================================== */

.fg-map-teaser__inner {
	max-width: var(--fg-content-width);
}

.fg-map-teaser__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fg-space-sm);
}

.fg-map-teaser__content p {
	font-size: var(--fg-text-lg);
	color: var(--fg-chocolate-rich);
}