/* ==========================================================================
   Rejenox Paris — Main Stylesheet
   Design system, layout, components
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Brand colours */
	--color-primary:   #570013;
	--color-bordeaux:  #800020;
	--color-bordeaux-dark: #5e0018;
	--color-cream:     #fbf9f4;
	--color-surface:   #f0eee9;
	--color-charcoal:  #1b1c19;
	--color-charcoal-light: #2c2d29;
	--color-stone:     #635e53;
	--color-ocre:      #c9a96e;
	--color-white:     #ffffff;

	/* Typography */
	--font-serif:  'Cormorant Garamond', Georgia, serif;
	--font-sans:   'Montserrat', system-ui, -apple-system, sans-serif;

	/* Font sizes — fluid scale */
	--text-xs:   0.75rem;    /* 12px */
	--text-sm:   0.875rem;   /* 14px */
	--text-base: 1rem;       /* 16px */
	--text-md:   1.125rem;   /* 18px */
	--text-lg:   1.25rem;    /* 20px */
	--text-xl:   1.5rem;     /* 24px */
	--text-2xl:  2rem;       /* 32px */
	--text-3xl:  2.5rem;     /* 40px */
	--text-4xl:  3.25rem;    /* 52px */
	--text-5xl:  4rem;       /* 64px */

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout */
	--container-max:  1280px;
	--container-px:   1.5rem;
	--navbar-height:  72px;

	/* Radius */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
	--shadow-md:  0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
	--shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
	--shadow-xl:  0 20px 25px -5px rgb(0 0 0 / .12), 0 8px 10px -6px rgb(0 0 0 / .12);

	/* Transitions */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;

	/* Z-index layers */
	--z-base:    0;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-overlay:  300;
	--z-modal:    400;
	--z-toast:    500;
}

/* ==========================================================================
   2. Modern CSS Reset
   ========================================================================== */

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

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

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-charcoal);
	background-color: var(--color-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

/* ==========================================================================
   3. Base Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 300; }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-3xl)); }
h4 { font-size: clamp(var(--text-lg),  2vw,   var(--text-2xl)); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: 1.8;
	margin: 0 0 var(--space-5);
	color: var(--color-stone);
}

/* ==========================================================================
   4. Accessibility — Skip Link & Screen Reader Only
   ========================================================================== */

.skip-link {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-6);
	background-color: var(--color-bordeaux);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-sm);
	transform: translateY(-200%);
	transition: transform var(--transition-base);
}

.skip-link:focus {
	transform: translateY(0);
	outline: 3px solid var(--color-ocre);
	outline-offset: 3px;
}

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

/* ==========================================================================
   5. Layout Utilities
   ========================================================================== */

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

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
	padding-top: calc(var(--navbar-height) + var(--space-12));
	padding-bottom: var(--space-20);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-8);
	background-color: var(--color-bordeaux);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	transition:
		background-color var(--transition-base),
		color            var(--transition-base),
		border-color     var(--transition-base),
		transform        var(--transition-fast);
	white-space: nowrap;
	text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--color-bordeaux-dark);
	outline: none;
}

.btn-primary:focus-visible {
	outline: 3px solid var(--color-ocre);
	outline-offset: 3px;
}

.btn-primary:active {
	transform: translateY(1px);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-8);
	background-color: transparent;
	color: var(--color-bordeaux);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: var(--radius-sm);
	border: 2px solid var(--color-bordeaux);
	transition:
		background-color var(--transition-base),
		color            var(--transition-base);
	text-decoration: none;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background-color: var(--color-bordeaux);
	color: var(--color-white);
	outline: none;
}

.btn-outline:focus-visible {
	outline: 3px solid var(--color-ocre);
	outline-offset: 3px;
}

/* ==========================================================================
   7. Navigation / Site Header
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
	height: var(--navbar-height);
	background-color: transparent;
	transition:
		background-color var(--transition-slow),
		box-shadow       var(--transition-slow),
		backdrop-filter  var(--transition-slow);
}

.site-header.scrolled {
	background-color: rgb(251 249 244 / 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	gap: var(--space-8);
}

/* Brand / Logo */
.site-header__brand {
	flex-shrink: 0;
	margin-right: auto;
}

.site-header__brand .custom-logo {
	height: 48px;
	width: auto;
}

.site-header__name {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 300;
	font-style: italic;
	color: var(--color-primary);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.site-header__name:hover {
	color: var(--color-bordeaux);
}

/* Nav list */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	position: relative;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-charcoal);
	text-decoration: none;
	padding-bottom: var(--space-1);
	transition: color var(--transition-fast);
}

.site-nav__list a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-bordeaux);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--transition-base);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-page-ancestor > a {
	color: var(--color-bordeaux);
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-page-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.site-nav__list a:focus-visible {
	outline: 2px solid var(--color-ocre);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Submenu */
.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + var(--space-3));
	left: 50%;
	transform: translateX(-50%);
	min-width: 200px;
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
	padding: var(--space-2) 0;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity      var(--transition-base),
		transform    var(--transition-base);
	transform: translateX(-50%) translateY(-8px);
}

.site-nav__list li {
	position: relative;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.site-nav__list .sub-menu li {
	display: block;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-sm);
	text-transform: none;
	letter-spacing: 0.02em;
}

.site-nav__list .sub-menu a::after {
	display: none;
}

/* CTA */
.site-header__cta {
	flex-shrink: 0;
}

/* Hamburger */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: var(--space-2);
	flex-shrink: 0;
}

.hamburger__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-charcoal);
	border-radius: var(--radius-full);
	transition:
		transform var(--transition-base),
		opacity   var(--transition-base);
	transform-origin: center;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   8. Mobile Navigation
   ========================================================================== */

@media (max-width: 900px) {
	.hamburger {
		display: flex;
	}

	.site-header__cta {
		display: none;
	}

	.site-nav {
		position: absolute;
		top: var(--navbar-height);
		left: 0;
		right: 0;
		background-color: var(--color-white);
		box-shadow: var(--shadow-lg);
		padding: var(--space-4) var(--container-px) var(--space-6);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-slow);
	}

	.site-nav.is-open {
		max-height: 600px;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.site-nav__list > li {
		width: 100%;
		border-bottom: 1px solid var(--color-surface);
	}

	.site-nav__list > li:last-child {
		border-bottom: none;
	}

	.site-nav__list > li > a {
		display: block;
		padding: var(--space-4) 0;
		font-size: var(--text-sm);
	}

	.site-nav__list > li > a::after {
		display: none;
	}

	.site-nav__list .sub-menu {
		position: static;
		transform: none;
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
		padding: 0 0 var(--space-2) var(--space-4);
	}

	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu {
		transform: none;
	}

	.site-nav__list .sub-menu a {
		padding: var(--space-2) 0;
	}
}

/* ==========================================================================
   9. Entry Content (WordPress editor output)
   ========================================================================== */

.entry-content {
	font-size: var(--text-md);
	line-height: 1.85;
	color: var(--color-stone);
}

.entry-content > * + * {
	margin-top: var(--space-6);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--color-charcoal);
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
}

.entry-content a {
	color: var(--color-bordeaux);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.entry-content a:hover {
	color: var(--color-bordeaux-dark);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-6);
	list-style: revert;
	margin-bottom: var(--space-5);
}

.entry-content blockquote {
	border-left: 3px solid var(--color-ocre);
	margin: var(--space-8) 0;
	padding: var(--space-4) var(--space-6);
	background-color: var(--color-surface);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-style: italic;
	color: var(--color-charcoal);
}

.entry-content img {
	border-radius: var(--radius-md);
	width: 100%;
	height: auto;
}

.entry-content figure {
	margin: var(--space-8) 0;
}

.entry-content figcaption {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-stone);
	margin-top: var(--space-3);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-surface);
	text-align: left;
}

.entry-content th {
	background-color: var(--color-surface);
	font-weight: 600;
	font-family: var(--font-sans);
}

/* ==========================================================================
   10. Post / Archive Cards (content-excerpt.php)
   ========================================================================== */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: var(--space-8);
	margin-top: var(--space-10);
}

.card {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow  var(--transition-base),
		transform   var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-4px);
}

.card__thumbnail {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin: 0;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.card:hover .card__img {
	transform: scale(1.04);
}

.card__body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.card__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.entry-category {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-bordeaux);
	background-color: rgb(128 0 32 / 0.08);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	transition: background-color var(--transition-fast);
}

.entry-category:hover {
	background-color: rgb(128 0 32 / 0.16);
}

.card__title {
	font-size: var(--text-xl);
	margin: 0;
}

.card__title a {
	color: var(--color-charcoal);
	transition: color var(--transition-fast);
}

.card__title a:hover {
	color: var(--color-bordeaux);
}

.card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0;
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-2);
}

.card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-stone);
}

.card__read-more {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-bordeaux);
	transition: color var(--transition-fast);
}

.card__read-more:hover {
	color: var(--color-bordeaux-dark);
}

/* ==========================================================================
   11. Single Post
   ========================================================================== */

.single-article {
	max-width: 860px;
	margin-inline: auto;
}

.single-article__header {
	margin-bottom: var(--space-8);
}

.single-article__categories {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.single-article__title {
	margin-bottom: var(--space-5);
}

.single-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-stone);
}

.single-article__thumbnail {
	margin: 0 0 var(--space-10);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.single-article__img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.single-article__caption {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-stone);
	margin-top: var(--space-3);
	font-style: italic;
}

.single-article__footer {
	margin-top: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-surface);
}

.single-article__share {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.single-article__share-label {
	font-size: var(--text-sm);
	font-weight: 600;
	margin: 0;
	color: var(--color-charcoal);
}

.share-link {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	transition: opacity var(--transition-fast);
}

.share-link--facebook {
	background-color: #1877f2;
	color: var(--color-white);
}

.share-link--twitter {
	background-color: var(--color-charcoal);
	color: var(--color-white);
}

.share-link:hover {
	opacity: 0.85;
}

/* Tags */
.entry-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.entry-tags__list li a {
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-stone);
	background-color: var(--color-surface);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	transition:
		background-color var(--transition-fast),
		color            var(--transition-fast);
}

.entry-tags__list li a:hover {
	background-color: var(--color-bordeaux);
	color: var(--color-white);
}

/* ==========================================================================
   12. Post Navigation
   ========================================================================== */

.post-navigation {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-surface);
}

.nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}

.nav-previous,
.nav-next {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.nav-next {
	text-align: right;
}

.nav-subtitle {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-stone);
}

.nav-title {
	display: block;
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	color: var(--color-charcoal);
	transition: color var(--transition-fast);
}

.nav-previous a:hover .nav-title,
.nav-next a:hover .nav-title {
	color: var(--color-bordeaux);
}

/* Pagination */
.navigation.pagination {
	margin-top: var(--space-12);
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-charcoal);
	border-radius: var(--radius-sm);
	transition:
		background-color var(--transition-fast),
		color            var(--transition-fast);
}

.nav-links .page-numbers:hover {
	background-color: var(--color-surface);
}

.nav-links .page-numbers.current {
	background-color: var(--color-bordeaux);
	color: var(--color-white);
}

/* ==========================================================================
   13. Archive / Blog header
   ========================================================================== */

.archive-wrap,
.single-wrap,
.page-wrap,
.search-wrap,
.error-404-wrap {
	padding-top: var(--space-8);
}

.archive-header,
.search-header {
	margin-bottom: var(--space-8);
}

.archive-title,
.search-title {
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	color: var(--color-charcoal);
}

.archive-description {
	color: var(--color-stone);
	font-size: var(--text-md);
	margin-top: var(--space-3);
}

.search-query {
	color: var(--color-bordeaux);
}

.search-count {
	font-size: var(--text-sm);
	color: var(--color-stone);
}

.search-form-wrap {
	margin-top: var(--space-4);
}

/* ==========================================================================
   14. Search Form
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 480px;
}

.search-form .search-field {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	background-color: var(--color-white);
	color: var(--color-charcoal);
	transition: border-color var(--transition-fast);
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--color-bordeaux);
}

.search-form .search-submit {
	padding: var(--space-3) var(--space-6);
	background-color: var(--color-bordeaux);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.search-form .search-submit:hover {
	background-color: var(--color-bordeaux-dark);
}

/* ==========================================================================
   15. 404 Page
   ========================================================================== */

.error-404 {
	max-width: 600px;
	margin-inline: auto;
	text-align: center;
	padding: var(--space-16) 0;
}

.error-404__code {
	font-family: var(--font-serif);
	font-size: 10rem;
	font-weight: 300;
	line-height: 1;
	color: var(--color-surface);
	margin: 0;
	letter-spacing: -0.04em;
}

.error-404__title {
	margin-top: calc(var(--space-6) * -1);
	color: var(--color-charcoal);
}

.error-404__description {
	color: var(--color-stone);
	margin-bottom: var(--space-8);
}

.error-404__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

.error-404__home-link {
	margin: 0;
}

/* ==========================================================================
   16. No Results
   ========================================================================== */

.no-results {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	padding: var(--space-16) 0;
}

.no-results__title {
	color: var(--color-charcoal);
}

.no-results__description {
	color: var(--color-stone);
	margin-bottom: var(--space-8);
}

.no-results__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

.no-results__home {
	margin: 0;
}

/* ==========================================================================
   17. Page Template
   ========================================================================== */

.page-article {
	max-width: 900px;
	margin-inline: auto;
}

.page-article__title {
	margin-bottom: var(--space-8);
}

.page-article__thumbnail {
	margin: 0 0 var(--space-10);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.page-article__img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   18. Entry Meta
   ========================================================================== */

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-stone);
}

.meta-sep {
	color: var(--color-ocre);
}

.posted-on a,
.byline a {
	color: var(--color-stone);
	transition: color var(--transition-fast);
}

.posted-on a:hover,
.byline a:hover {
	color: var(--color-bordeaux);
}

/* ==========================================================================
   19. Comments
   ========================================================================== */

.comments-area {
	max-width: 860px;
	margin-inline: auto;
	margin-top: var(--space-16);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-surface);
}

.comments-title,
.comment-reply-title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-8);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-10);
}

.comment {
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-surface);
}

.comment-body {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--space-4);
}

.comment-author .avatar {
	border-radius: 50%;
	width: 48px;
	height: 48px;
}

.comment-meta {
	font-size: var(--text-sm);
	color: var(--color-stone);
	margin-bottom: var(--space-3);
}

.comment-metadata a {
	color: var(--color-stone);
}

.comment-content p {
	font-size: var(--text-sm);
	margin: 0;
}

.reply a {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-bordeaux);
}

/* Comment form */
.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.comment-form p {
	margin: 0;
}

.comment-form label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	margin-bottom: var(--space-2);
	color: var(--color-charcoal);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	background-color: var(--color-white);
	color: var(--color-charcoal);
	transition: border-color var(--transition-fast);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-bordeaux);
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.comment-form .submit {
	align-self: flex-start;
}

.comment-notes {
	font-size: var(--text-sm);
	color: var(--color-stone);
	margin: 0;
}

/* ==========================================================================
   20. Sidebar / Widgets
   ========================================================================== */

.sidebar {
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.widget {
	margin-bottom: var(--space-8);
}

.widget:last-child {
	margin-bottom: 0;
}

.widget-title {
	font-size: var(--text-lg);
	color: var(--color-charcoal);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-ocre);
}

/* ==========================================================================
   21. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-charcoal);
	color: var(--color-cream);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-12);
	padding-top: var(--space-16);
	padding-bottom: var(--space-12);
}

.site-footer__logo-text {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-style: italic;
	font-weight: 300;
	color: var(--color-ocre);
	margin: 0 0 var(--space-3);
	letter-spacing: 0.02em;
}

.site-footer__tagline {
	font-size: var(--text-sm);
	color: rgb(251 249 244 / 0.65);
	margin: 0 0 var(--space-3);
}

.site-footer__address {
	font-size: var(--text-sm);
	color: rgb(251 249 244 / 0.45);
	margin: 0;
}

.site-footer__heading {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ocre);
	margin-bottom: var(--space-5);
}

.site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__list a {
	font-size: var(--text-sm);
	color: rgb(251 249 244 / 0.7);
	transition: color var(--transition-fast);
}

.site-footer__list a:hover {
	color: var(--color-cream);
}

/* Footer bottom bar */
.site-footer__bottom {
	border-top: 1px solid rgb(251 249 244 / 0.08);
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
	gap: var(--space-4);
	flex-wrap: wrap;
}

.site-footer__copyright {
	font-size: var(--text-xs);
	color: rgb(251 249 244 / 0.45);
	margin: 0;
}

.site-footer__credit {
	font-size: var(--text-xs);
	color: rgb(251 249 244 / 0.35);
	margin: 0;
}

.site-footer__credit a {
	color: var(--color-ocre);
	transition: color var(--transition-fast);
}

.site-footer__credit a:hover {
	color: var(--color-cream);
}

/* ==========================================================================
   22. WordPress Core Compatibility
   ========================================================================== */

/* Alignments */
.alignleft {
	float: left;
	margin-right: var(--space-6);
	margin-bottom: var(--space-4);
}

.alignright {
	float: right;
	margin-left: var(--space-6);
	margin-bottom: var(--space-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-bottom: var(--space-4);
}

.wp-block-image.alignfull {
	margin-inline: calc(-1 * var(--container-px));
}

/* Captions */
.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: var(--text-sm);
	color: var(--color-stone);
	text-align: center;
	margin-top: var(--space-2);
}

/* Sticky posts */
.sticky .card {
	border: 2px solid var(--color-ocre);
}

/* Page links */
.page-links {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-stone);
}

/* ==========================================================================
   23. Responsive — Tablet & Mobile
   ========================================================================== */

@media (max-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	:root {
		--container-px: 1rem;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
		padding-top: var(--space-10);
		padding-bottom: var(--space-8);
	}

	.site-footer__brand {
		grid-column: auto;
	}

	.nav-links {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.nav-next {
		text-align: left;
	}

	.posts-grid {
		grid-template-columns: 1fr;
	}

	.single-article__share {
		flex-wrap: wrap;
	}

	.comment-body {
		grid-template-columns: 1fr;
	}

	.comment-author .avatar {
		display: none;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.error-404__code {
		font-size: 6rem;
	}

	.search-form {
		flex-direction: column;
	}
}

/* ==========================================================================
   24. Header — classes réelles (header.php)
   ========================================================================== */

/* Always visible background with border */
.site-header {
	background-color: rgb(251 249 244 / 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid #D0D0D0;
	box-shadow: 0 2px 20px rgb(0 0 0 / 0.06);
}

/* Logo */
.site-header__logo {
	flex-shrink: 0;
	margin-right: auto;
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 600;
	font-style: italic;
	color: var(--color-charcoal);
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-header__logo:hover {
	color: var(--color-bordeaux);
}

/* Bouton panier header */
.site-header__cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	padding-left: 2rem;
	padding-right: 2rem;
	min-width: 130px;
	justify-content: center;
}

.site-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	color: var(--color-primary);
	font-family: var(--font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	line-height: 1;
}

.site-header__logo img {
	height: 48px;
	width: auto;
}

/* Nav wrapper (links + CTA) */
.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

/* Nav links list (generated by wp_nav_menu) */
.site-header__links {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__links a {
	position: relative;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-stone);
	text-decoration: none;
	padding-bottom: 2px;
	transition: color var(--transition-fast);
}

.site-header__links a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--color-bordeaux);
	transition: width var(--transition-base);
}

.site-header__links a:hover,
.site-header__links .current-menu-item > a {
	color: var(--color-charcoal);
}

.site-header__links a:hover::after,
.site-header__links .current-menu-item > a::after {
	width: 100%;
}

/* CTA "Commander" in header */
.site-header__nav > .btn-primary {
	padding: 0.75rem 1.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
}

/* Mobile: hide nav, show hamburger */
@media (max-width: 900px) {
	.site-header__nav {
		display: none;
		position: absolute;
		top: var(--navbar-height);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		background-color: var(--color-cream);
		border-top: 1px solid #E0E0E0;
		padding: var(--space-6) var(--container-px);
		gap: var(--space-4);
		box-shadow: var(--shadow-lg);
	}

	.site-header__nav.is-open {
		display: flex;
	}

	.site-header__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.site-header__links > li {
		width: 100%;
		border-bottom: 1px solid #E0E0E0;
	}

	.site-header__links > li > a {
		display: block;
		padding: var(--space-4) 0;
		font-size: var(--text-sm);
	}

	.site-header__links > li > a::after {
		display: none;
	}

	.site-header__nav > .btn-primary {
		width: 100%;
		text-align: center;
		margin-top: var(--space-2);
	}

	.hamburger {
		display: flex;
	}
}

/* ==========================================================================
   25. Footer — classes réelles (footer.php)
   ========================================================================== */

/* Barre bordeaux en haut du footer */
.site-footer__top-bar {
	height: 4px;
	background-color: var(--color-bordeaux);
}

/* Grid 3 colonnes */
.site-footer__col:first-child {
	grid-column: 1;
}

/* Logo dans le footer */
.site-footer__logo {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 600;
	font-style: italic;
	color: var(--color-cream);
	margin: 0 0 var(--space-2);
	letter-spacing: 0.02em;
}

/* Localisation */
.site-footer__location {
	font-size: var(--text-sm);
	color: rgb(251 249 244 / 0.55);
	margin: 0 0 var(--space-6);
	font-weight: 300;
}

/* Contact items */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.site-footer__contact-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: var(--text-xs);
	color: rgb(251 249 244 / 0.4);
	margin: 0;
}

.site-footer__contact-item svg {
	display: inline;
	flex-shrink: 0;
}

.site-footer__contact-item a {
	color: rgb(251 249 244 / 0.4);
	transition: color var(--transition-fast);
}

.site-footer__contact-item a:hover {
	color: var(--color-cream);
}

/* Badges 4.8★ / 100% */
.site-footer__badges {
	display: flex;
	gap: var(--space-3);
}

.site-footer__badge {
	border: 1px solid rgb(251 249 244 / 0.15);
	padding: var(--space-2) var(--space-3);
	text-align: center;
}

.site-footer__badge-value {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-ocre);
	margin: 0;
	line-height: 1;
}

.site-footer__badge-label {
	font-size: 0.625rem;
	color: rgb(251 249 244 / 0.4);
	margin: 0.25rem 0 0;
}

/* Mini CTA block */
.site-footer__cta-block {
	border: 1px solid rgb(251 249 244 / 0.15);
	padding: var(--space-5);
	margin-top: var(--space-8);
}

.site-footer__cta-title {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-cream);
	margin: 0 0 var(--space-2);
}

.site-footer__cta-desc {
	font-size: var(--text-xs);
	color: rgb(251 249 244 / 0.5);
	font-weight: 300;
	margin: 0 0 var(--space-4);
}

.btn-primary--block {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.625rem;
}

/* Responsive footer */
@media (max-width: 1024px) {
	.site-footer__col:first-child {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   26. Home page — front-page.php
   ========================================================================== */

/* Override site-main padding on the front page */
.home-page .site-main {
	padding-top: 0;
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Utility: section eyebrow & title accents
   -------------------------------------------------------------------------- */

.section-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-ocre);
	margin: 0 0 var(--space-3);
}

.section-title {
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-4);
}

.section-title__accent {
	color: var(--color-bordeaux);
	font-style: italic;
}

.fine-border {
	border: 1px solid #e0e0e0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.home-hero {
	display: grid;
	grid-template-columns: 55fr 45fr;
	min-height: 100svh;
	overflow: hidden;
}

/* Left / content */
.home-hero__content {
	background-color: var(--color-cream);
	padding: calc(var(--navbar-height) + var(--space-8)) var(--space-12) var(--space-8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-4);
}

/* Badge */
.home-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid var(--color-bordeaux);
	color: var(--color-bordeaux);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
}

.home-hero__badge svg {
	flex-shrink: 0;
	color: var(--color-bordeaux);
}

/* H1 — Titre principal */
.home-hero__main-title {
	font-family: var(--font-serif);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	line-height: 1.1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.02em;
}

.home-hero__main-title-brand {
	font-weight: 700;
	font-style: normal;
	color: var(--color-charcoal);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.home-hero__main-title-claim {
	font-weight: 600;
	font-style: italic;
	color: var(--color-bordeaux);
	font-size: 0.9em;
	letter-spacing: -0.01em;
}

/* Accroche prix */
.home-hero__deride {
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	font-style: italic;
	color: var(--color-charcoal);
	margin: 0;
}

/* Promesse clé */
.home-hero__promise {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-bordeaux);
	border: 1px solid var(--color-bordeaux);
	display: inline-block;
	padding: var(--space-1) var(--space-4);
	margin: 0;
}

/* Sous-titre */
.home-hero__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.65;
	margin: 0;
	max-width: 420px;
}

/* Divider */
.home-hero__divider {
	width: 40px;
	height: 2px;
	background-color: var(--color-ocre);
	flex-shrink: 0;
}

/* Slogan secondaire — compact, une seule ligne */
.home-hero__slogan {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3em;
	font-family: var(--font-serif);
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	font-weight: 400;
	color: var(--color-stone);
	margin: 0;
}

.home-hero__slogan-accent {
	font-style: italic;
	color: var(--color-bordeaux);
	font-weight: 500;
}

.home-hero__title-region {
	color: var(--color-stone);
	font-weight: 400;
}

/* Checklist */
.home-hero__checklist {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin: 0;
}

.home-hero__check-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-charcoal);
	line-height: 1.5;
}

.home-hero__check-item em {
	color: var(--color-stone);
	font-style: italic;
}

.home-hero__check-box {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--color-ocre);
	border-radius: var(--radius-sm);
	color: var(--color-ocre);
	margin-top: 1px;
}

/* Price */
.home-hero__price {
	margin: 0;
}

.home-hero__price-amount {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--color-ocre);
}

/* CTA */
.btn-primary--lg {
	padding: var(--space-4) var(--space-10);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
}

/* Fine print */
.home-hero__fine-print {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	margin: 0;
}

/* Right / image */
.home-hero__image-wrap {
	position: relative;
	overflow: hidden;
}

.home-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right bottom;
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */

.trust-bar {
	background-color: var(--color-bordeaux);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	padding: var(--space-4) var(--space-6);
}

.trust-bar__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgb(255 255 255 / 0.9);
	white-space: nowrap;
}

.trust-bar__icon {
	color: rgb(255 255 255 / 0.7);
	flex-shrink: 0;
}

.trust-bar__divider {
	width: 1px;
	height: 24px;
	background-color: rgb(255 255 255 / 0.2);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Philosophy
   -------------------------------------------------------------------------- */

.philosophy {
	background-color: var(--color-white);
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	padding: var(--space-20) 0;
}

.philosophy__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-16);
}

.philosophy__header .section-title {
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}

.philosophy__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0;
}

.philosophy__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.philosophy__card {
	background-color: var(--color-cream);
	border: 1px solid #e0e0e0;
	padding: var(--space-8);
	border-radius: var(--radius-md);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--transition-base);
}

.philosophy__card:hover {
	box-shadow: var(--shadow-md);
}

.philosophy__card-accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--color-ocre);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-base);
}

.philosophy__card:hover .philosophy__card-accent {
	transform: scaleX(1);
}

.philosophy__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background-color: var(--color-bordeaux);
	border-radius: var(--radius-md);
	color: var(--color-white);
	margin-bottom: var(--space-5);
}

.philosophy__card-title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-2);
}

.philosophy__card-subtitle {
	margin: 0 0 var(--space-4);
}

.philosophy__card-body {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Needs section
   -------------------------------------------------------------------------- */

.needs-section {
	background-color: #f5f1e8;
	padding: var(--space-20) 0;
}

.needs-section__header {
	max-width: 480px;
	margin: 0 0 var(--space-12);
}

.needs-section__header .section-title {
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}

.needs-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-items: stretch;
}

/* Default card */
.needs-card {
	background-color: var(--color-white);
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Featured card */
.needs-card--featured {
	background-color: var(--color-bordeaux);
	border-color: var(--color-bordeaux);
	color: var(--color-white);
}

.needs-card__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background-color: rgb(27 28 25 / 0.06);
	border-radius: var(--radius-md);
	color: var(--color-bordeaux);
	flex-shrink: 0;
}

.needs-card__icon-box--featured {
	background-color: rgb(255 255 255 / 0.15);
	color: var(--color-white);
}

.needs-card__age {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-stone);
	margin: 0;
}

.needs-card__age--featured {
	color: rgb(255 255 255 / 0.7);
}

.needs-card__title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0;
}

.needs-card__title--featured {
	color: var(--color-white);
}

.needs-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

.needs-card__list li {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	padding-left: var(--space-4);
	position: relative;
	line-height: 1.5;
}

.needs-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-ocre);
}

.needs-card__list--featured li {
	color: rgb(255 255 255 / 0.8);
}

.needs-card__list--featured li::before {
	background-color: rgb(255 255 255 / 0.6);
}

.needs-card__hint {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	color: var(--color-stone);
	font-style: italic;
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid #e0e0e0;
	line-height: 1.6;
}

.needs-card__hint--featured {
	color: rgb(255 255 255 / 0.75);
	border-top-color: rgb(255 255 255 / 0.2);
}

/* --------------------------------------------------------------------------
   Expertise
   -------------------------------------------------------------------------- */

.expertise {
	background-color: var(--color-white);
	border-top: 1px solid #e0e0e0;
	padding: var(--space-20) 0;
}

.expertise__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-12);
}

.expertise__header .section-title {
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}

.expertise__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--color-stone);
	margin: 0;
	line-height: 1.7;
}

.expertise__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	max-width: 896px;
	margin: 0 auto var(--space-10);
}

.expertise__card {
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	padding: var(--space-10);
	transition: border-color var(--transition-base);
}

.expertise__card:hover {
	border-color: var(--color-ocre);
}

.expertise__icon-box {
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	color: var(--color-bordeaux);
	margin-bottom: var(--space-5);
	transition: border-color var(--transition-base);
}

.expertise__card:hover .expertise__icon-box {
	border-color: var(--color-ocre);
}

.expertise__actif-eyebrow {
	margin-bottom: var(--space-2);
}

.expertise__card-name {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-2);
}

.expertise__card-tagline {
	font-family: var(--font-serif);
	font-size: var(--text-md);
	color: var(--color-bordeaux);
	font-style: italic;
	margin: 0 0 var(--space-4);
}

.expertise__card-desc {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0;
}

/* Made in France banner */
.expertise__banner {
	max-width: 896px;
	margin: 0 auto;
	background-color: #fdf8ee;
	border: 1px solid #e8d9b0;
	border-radius: var(--radius-md);
	padding: var(--space-6) var(--space-8);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.expertise__banner-left {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.expertise__banner-flag {
	font-size: 2rem;
	line-height: 1;
}

.expertise__banner-title {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-1);
}

.expertise__banner-sub {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	margin: 0;
}

.expertise__banner-badges {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.expertise__badge {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-stone);
	border: 1px solid #e0e0e0;
	background-color: var(--color-white);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Offer Duo
   -------------------------------------------------------------------------- */

.offer-duo {
	background-color: #fbf6ee;
	padding: var(--space-20) 0;
}

.offer-duo__header {
	text-align: center;
	margin-bottom: var(--space-12);
}

.offer-duo__header .section-title {
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}

.offer-duo__brand {
	color: var(--color-bordeaux);
}

.offer-duo__card {
	max-width: 896px;
	margin: 0 auto;
	background-color: var(--color-white);
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
	display: grid;
	grid-template-columns: 42fr 58fr;
}

/* Image column */
.offer-duo__image-col {
	position: relative;
	min-height: 420px;
	background-color: var(--color-surface);
}

.offer-duo__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.offer-duo__badge {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	width: 64px;
	height: 64px;
	background-color: var(--color-bordeaux);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-align: center;
	z-index: 1;
}

.offer-duo__volume-label {
	position: absolute;
	bottom: var(--space-4);
	left: 50%;
	transform: translateX(-50%);
	background-color: rgb(255 255 255 / 0.85);
	backdrop-filter: blur(4px);
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-charcoal);
	white-space: nowrap;
}

/* Details column */
.offer-duo__details {
	padding: var(--space-10) var(--space-10) var(--space-10);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	justify-content: center;
}

.offer-duo__product-name {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0;
}

.offer-duo__product-desc {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	margin: 0;
}

/* Pricing box */
.offer-duo__pricing {
	background-color: #fdf8ee;
	border: 1px solid #e8d9b0;
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
}

.offer-duo__price-main {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.offer-duo__price-current {
	font-family: var(--font-serif);
	font-size: var(--text-4xl);
	font-weight: 700;
	color: var(--color-bordeaux);
	line-height: 1;
}

.offer-duo__price-old {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	color: var(--color-stone);
	text-decoration: line-through;
	opacity: 0.7;
}

.offer-duo__price-sub {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	margin: 0 0 var(--space-3);
}

.offer-duo__saving-badge {
	display: inline-block;
	background-color: var(--color-bordeaux);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
}

/* Guarantees */
.offer-duo__guarantees {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.offer-duo__guarantee {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-charcoal);
}

.offer-duo__check {
	flex-shrink: 0;
	color: #22863a;
}

/* Fine print */
.offer-duo__fine-print {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	text-align: center;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonials {
	background-color: var(--color-white);
	border-top: 1px solid #e0e0e0;
	padding: var(--space-20) 0;
}

.testimonials__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-8);
	margin-bottom: var(--space-12);
	flex-wrap: wrap;
}

.testimonials__header-left {
	flex: 1;
	min-width: 260px;
}

.testimonials__header-left .section-title {
	font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
	margin: 0;
}

.testimonials__aggregate {
	flex-shrink: 0;
	background-color: #fdf8ee;
	border: 1px solid #e8d9b0;
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-6);
	text-align: center;
}

.testimonials__stars {
	display: flex;
	justify-content: center;
	gap: 2px;
	color: var(--color-ocre);
	margin-bottom: var(--space-1);
}

.testimonials__rating {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-1);
}

.testimonials__count {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	margin: 0;
}

/* Reviews grid */
.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-items: stretch;
}

/* Review card */
.review-card {
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	position: relative;
}

.review-card--featured {
	border-color: var(--color-bordeaux);
	border-width: 2px;
}

.review-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.review-card__stars {
	display: flex;
	gap: 2px;
	color: var(--color-ocre);
}

.review-card__verified {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #22863a;
	background-color: #f0fff4;
	border: 1px solid #c3e6cb;
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.review-card__quote {
	font-family: var(--font-serif);
	font-size: 3.5rem;
	line-height: 0.8;
	color: rgb(201 169 110 / 0.3);
	display: block;
	margin-top: var(--space-2);
}

.review-card__text {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0;
	flex: 1;
}

.review-card__text p {
	margin: 0;
}

.review-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid #e0e0e0;
	flex-wrap: wrap;
}

.review-card__author {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0;
}

.review-card__meta {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	margin: 0;
}

.review-card__right {
	text-align: right;
}

.review-card__date {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	margin: 0 0 var(--space-1);
}

.review-card__product {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-bordeaux);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Expert Advice
   -------------------------------------------------------------------------- */

.expert-advice {
	background-color: #f5f1e8;
	border-top: 1px solid #e0e0e0;
	padding: var(--space-20) 0;
}

.expert-advice__grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: var(--space-12);
	align-items: start;
}

/* Sidebar */
.expert-advice__sidebar-inner {
	position: sticky;
	top: calc(var(--navbar-height) + var(--space-6));
}

.expert-advice__sidebar-inner .section-title {
	font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
}

.expert-advice__subtitle {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0 0 var(--space-6);
}

.expert-advice__local-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background-color: var(--color-white);
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
}

.expert-advice__local-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: rgb(201 169 110 / 0.15);
	border-radius: var(--radius-md);
	color: var(--color-ocre);
	margin-top: 2px;
}

.expert-advice__local-title {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-1);
}

.expert-advice__local-desc {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-stone);
	margin: 0;
	line-height: 1.5;
}

/* Tips */
.expert-advice__tips {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.tip-card {
	background-color: var(--color-white);
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	padding: var(--space-7);
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	transition: border-color var(--transition-base);
}

.tip-card:hover {
	border-color: var(--color-bordeaux);
}

.tip-card__number {
	font-family: var(--font-serif);
	font-size: 2.5rem;
	font-weight: 700;
	color: rgb(201 169 110 / 0.35);
	line-height: 1;
	flex-shrink: 0;
	width: 48px;
	text-align: right;
	padding-top: 2px;
}

.tip-card__body {
	flex: 1;
}

.tip-card__title {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0 0 var(--space-3);
	transition: color var(--transition-base);
}

.tip-card:hover .tip-card__title {
	color: var(--color-bordeaux);
}

.tip-card__desc {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-stone);
	line-height: 1.7;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive — Home page sections
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.philosophy__grid,
	.needs-section__grid,
	.testimonials__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.expertise__grid {
		grid-template-columns: 1fr;
		max-width: 600px;
	}

	.offer-duo__card {
		grid-template-columns: 1fr;
	}

	.offer-duo__image-col {
		min-height: 280px;
	}

	.expert-advice__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.expert-advice__sidebar-inner {
		position: static;
	}
}

@media (max-width: 768px) {
	/* Hero stacks */
	.home-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.home-hero__content {
		padding: calc(var(--navbar-height) + var(--space-10)) var(--space-6) var(--space-10);
	}

	.home-hero__image-wrap {
		height: 300px;
		position: relative;
	}

	/* Trust bar wraps nicely */
	.trust-bar__divider {
		display: none;
	}

	.trust-bar {
		gap: var(--space-2);
		padding: var(--space-4);
	}

	.trust-bar__item {
		padding: var(--space-2) var(--space-3);
		font-size: 10px;
	}

	/* Philosophy, needs, testimonials: single column */
	.philosophy__grid,
	.needs-section__grid,
	.testimonials__grid {
		grid-template-columns: 1fr;
	}

	/* Offer duo details */
	.offer-duo__details {
		padding: var(--space-8) var(--space-6);
	}

	/* Testimonials header stacks */
	.testimonials__header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Expert advice sidebar not sticky */
	.expert-advice__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.home-hero__content {
		padding: calc(var(--navbar-height) + var(--space-8)) var(--space-4) var(--space-8);
		gap: var(--space-5);
	}

	.offer-duo__pricing {
		padding: var(--space-4);
	}

	.offer-duo__price-current {
		font-size: var(--text-3xl);
	}

	.tip-card {
		padding: var(--space-5);
		gap: var(--space-4);
	}

	.tip-card__number {
		font-size: 2rem;
		width: 36px;
	}
}

/* ==========================================================================
   26. Le Mag — Archive Blog
   ========================================================================== */

.mag-page {
	background-color: var(--color-cream);
	padding-top: var(--navbar-height);
}

/* ── Hero éditorial ── */
.mag-hero { padding-top: 4rem; padding-bottom: 6rem; }
.mag-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; }
.mag-hero__eyebrow { display: block; font-family: var(--font-sans); font-size: .6875rem; text-transform: uppercase; letter-spacing: .2em; color: var(--color-ocre); margin-bottom: 1rem; }
.mag-hero__title { font-family: var(--font-serif); font-size: clamp(2.5rem,6vw,4.5rem); font-weight: 300; line-height: 1.1; color: var(--color-primary); margin: 0 0 2rem; }
.mag-hero__title em { font-style: italic; }
.mag-hero__desc { font-family: var(--font-sans); font-size: 1.0625rem; color: var(--color-stone); line-height: 1.75; max-width: 36rem; margin: 0 0 2rem; }
.mag-hero__cta { display: inline-flex; align-items: center; gap: .75rem; }
.mag-hero__visual { position: relative; padding-bottom: 2rem; }
.mag-hero__img-wrap { aspect-ratio: 4/5; overflow: hidden; border-radius: .5rem; box-shadow: 0 20px 60px rgb(0 0 0/.18); transform: rotate(2deg) translateX(1rem); background-color: var(--color-surface); }
.mag-hero__img { width: 100%; height: 100%; object-fit: cover; }
.mag-hero__quote { position: absolute; bottom: -2rem; left: -2rem; width: 66%; aspect-ratio: 1; background-color: var(--color-cream); border-radius: .5rem; padding: 1.5rem; box-shadow: 0 8px 32px rgb(0 0 0/.1); display: flex; flex-direction: column; justify-content: center; }
.mag-hero__quote-text { font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; color: var(--color-primary); margin: 0 0 .75rem; line-height: 1.5; }
.mag-hero__quote-author { font-family: var(--font-sans); font-size: .6875rem; text-transform: uppercase; letter-spacing: .15em; color: var(--color-stone); margin: 0; }

/* ── Filtre catégories ── */
.mag-filter { margin-bottom: 3rem; }
.mag-filter__list { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e0bfbf; }
.mag-filter__tab { font-family: var(--font-sans); font-size: .6875rem; text-transform: uppercase; letter-spacing: .15em; color: var(--color-stone); text-decoration: none; padding: 0 0 1.25rem; margin-right: 2rem; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); }
.mag-filter__tab:hover { color: var(--color-primary); }
.mag-filter__tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Grille articles ── */
.mag-grid { padding-bottom: 5rem; }
.mag-grid__inner { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 3rem; row-gap: 5rem; }

/* ── Card article ── */
.mag-card { display: flex; flex-direction: column; }
.mag-card__thumb-link { display: block; text-decoration: none; }
.mag-card__thumb { aspect-ratio: 16/10; overflow: hidden; border-radius: .5rem; margin-bottom: 1.5rem; position: relative; background-color: var(--color-surface); }
.mag-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; display: block; }
.mag-card:hover .mag-card__img { transform: scale(1.05); }
.mag-card__img--placeholder { background: linear-gradient(135deg, var(--color-surface), var(--color-cream)); }
.mag-card__category-badge { position: absolute; top: 1rem; left: 1rem; background-color: rgb(251 249 244/.9); backdrop-filter: blur(8px); color: var(--color-primary); font-family: var(--font-sans); font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; padding: .25rem .75rem; border-radius: 999px; }
.mag-card__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.mag-card__date, .mag-card__read-time { font-family: var(--font-sans); font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: #bba584; }
.mag-card__sep { display: block; width: 2rem; height: 1px; background-color: #e0bfbf; flex-shrink: 0; }
.mag-card__title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; line-height: 1.35; color: var(--color-charcoal); margin: 0 0 1rem; flex: 1; }
.mag-card__title a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
.mag-card:hover .mag-card__title a { color: var(--color-primary); }
.mag-card__excerpt { font-family: var(--font-sans); font-size: .8125rem; color: var(--color-stone); line-height: 1.7; margin: 0 0 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mag-card__link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--color-primary); text-decoration: none; transition: gap var(--transition-base); }
.mag-card__link:hover { gap: .875rem; }

/* ── Newsletter bento ── */
.mag-newsletter { grid-column: span 2; display: flex; flex-direction: column; gap: 2rem; padding: 3rem; background-color: var(--color-surface); border-radius: .5rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .mag-newsletter { flex-direction: row; align-items: center; gap: 3rem; } }
.mag-newsletter__deco { position: absolute; top: 0; right: 0; width: 16rem; height: 16rem; border-radius: 50%; background-color: rgb(87 0 19/.05); transform: translate(50%,-50%); pointer-events: none; }
.mag-newsletter__copy { flex: 1; position: relative; z-index: 1; }
.mag-newsletter__title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; color: var(--color-primary); margin: 0 0 1rem; }
.mag-newsletter__title em { font-style: italic; }
.mag-newsletter__desc { font-family: var(--font-sans); font-size: .8125rem; color: var(--color-stone); line-height: 1.75; margin: 0; }
.mag-newsletter__form-wrap { flex: 1; position: relative; z-index: 1; }
.mag-newsletter__form { display: flex; flex-direction: column; gap: 1rem; }
.mag-newsletter__input { width: 100%; background: transparent; border: none; border-bottom: 2px solid #e0bfbf; padding: .75rem 0; font-family: var(--font-sans); font-size: .875rem; color: var(--color-charcoal); outline: none; transition: border-color var(--transition-fast); }
.mag-newsletter__input:focus { border-bottom-color: var(--color-primary); }
.mag-newsletter__submit { width: 100%; text-align: center; border-radius: .5rem; padding: 1rem; font-size: .6875rem; letter-spacing: .15em; }
.mag-newsletter__legal { font-family: var(--font-sans); font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; color: #bba584; margin: .75rem 0 0; }

/* ── Pagination Le Mag ── */
.mag-pagination { margin-top: 4rem; display: flex; justify-content: center; }
.mag-pagination .nav-links { display: flex; align-items: center; gap: .5rem; }
.mag-pagination .page-numbers { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-sans); font-size: .75rem; border: 1px solid #e0bfbf; color: var(--color-stone); text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); }
.mag-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.mag-pagination .page-numbers.current { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.mag-pagination .page-numbers.dots { border: none; }

/* ── Responsive Le Mag ── */
@media (max-width: 1024px) {
	.mag-grid__inner { grid-template-columns: repeat(2,1fr); }
	.mag-newsletter { grid-column: span 2; }
}
@media (max-width: 768px) {
	.mag-hero__grid { grid-template-columns: 1fr; }
	.mag-hero__visual { display: none; }
	.mag-grid__inner { grid-template-columns: 1fr; row-gap: 3rem; }
	.mag-newsletter { grid-column: span 1; }
	.mag-filter__tab { margin-right: 1rem; }
}

/* ==========================================================================
   27. Print styles
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.comments-area,
	.post-navigation,
	.sidebar {
		display: none;
	}

	.site-main {
		padding-top: 0;
	}

	body {
		font-size: 12pt;
		color: #000;
		background: #fff;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		color: #555;
	}
}

/* ═══════════════════════════════════════════════════════════
   § 27 — Single Article (single.php)
═══════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.single-article {
	background-color: var(--color-cream);
	color: var(--color-charcoal);
	padding-top: var(--navbar-height);
}

/* ── Hero ── */
.single-hero {
	padding-top: 3rem;
	padding-bottom: 2rem;
}

.single-hero__meta-top {
	margin-bottom: 1.5rem;
}

.single-hero__cat-badge {
	display: inline-block;
	padding: 0.25rem 1rem;
	background-color: #eae8e3;
	color: var(--color-stone);
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 99px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.single-hero__cat-badge:hover {
	background-color: var(--color-bordeaux);
	color: #fff;
}

.single-hero__title {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.15;
	color: var(--color-primary);
	margin: 0 0 1.5rem;
	max-width: 820px;
}

.single-hero__title em {
	font-style: italic;
}

.single-hero__byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-stone);
	margin-bottom: 2.5rem;
}

.single-hero__sep {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #e0bfbf;
	flex-shrink: 0;
}

.single-hero__img-wrap {
	position: relative;
	width: 100%;
	height: clamp(240px, 40vw, 600px);
	border-radius: 12px;
	overflow: hidden;
}

.single-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.single-hero__img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(87, 0, 19, 0.2), transparent);
	pointer-events: none;
}

/* ── Body (sidebar + content) ── */
.single-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	padding-top: 3rem;
	padding-bottom: 5rem;
}

@media (min-width: 900px) {
	.single-body {
		grid-template-columns: 240px 1fr;
		gap: 4rem;
		align-items: start;
	}
}

/* ── Sidebar ── */
.single-sidebar {
	display: none;
}

@media (min-width: 900px) {
	.single-sidebar {
		display: block;
	}
}

.single-sidebar__sticky {
	position: sticky;
	top: calc(var(--navbar-height) + 2rem);
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.single-toc {
	background-color: #f5f3ee;
	border-radius: 12px;
	padding: 1.75rem;
}

.single-toc__title {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	color: var(--color-primary);
	margin: 0 0 1rem;
}

.single-toc__cats {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.single-toc__cat-link {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--color-stone);
	text-decoration: none;
	transition: color 0.2s;
}

.single-toc__cat-link:hover {
	color: var(--color-primary);
}

.single-toc__hint {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	color: var(--color-stone);
	margin: 0;
	opacity: 0.8;
}

.single-share {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.single-share__label {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8c7071;
}

.single-share__btns {
	display: flex;
	gap: 0.75rem;
}

.single-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #e0bfbf;
	color: var(--color-primary);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	text-decoration: none;
}

.single-share__btn:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* ── Article Content ── */
.single-content {
	font-family: var(--font-sans);
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--color-charcoal);
}

/* WordPress Gutenberg / classic editor typography */
.single-content p {
	margin: 0 0 1.5rem;
}

.single-content h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2rem);
	color: var(--color-primary);
	margin: 3rem 0 1rem;
	line-height: 1.2;
}

.single-content h3 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.35rem;
	color: var(--color-primary);
	margin: 2rem 0 0.75rem;
}

.single-content h4,
.single-content h5,
.single-content h6 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-charcoal);
	margin: 1.5rem 0 0.5rem;
}

/* Chapô / lead paragraph */
.single-content > p:first-child,
.single-content .lead {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	line-height: 1.6;
	color: var(--color-stone);
	margin-bottom: 2.5rem;
}

.single-content blockquote {
	border-left: 4px solid var(--color-primary);
	background-color: rgba(245, 243, 238, 0.5);
	padding: 2rem 2rem 2rem 2.5rem;
	margin: 2.5rem 0;
	border-radius: 0 8px 8px 0;
}

.single-content blockquote p {
	font-family: var(--font-serif);
	font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	font-style: italic;
	color: var(--color-primary);
	margin: 0 0 0.75rem;
}

.single-content blockquote cite {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-style: normal;
	color: #8c7071;
}

.single-content ul,
.single-content ol {
	margin: 0 0 1.5rem 1.5rem;
	padding: 0;
}

.single-content li {
	margin-bottom: 0.5rem;
}

.single-content a {
	color: var(--color-bordeaux);
	text-underline-offset: 3px;
}

.single-content a:hover {
	color: var(--color-primary);
}

.single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 2rem auto;
}

.single-content .wp-block-image figcaption,
.single-content figure figcaption {
	font-size: 0.8rem;
	color: var(--color-stone);
	text-align: center;
	margin-top: 0.5rem;
}

/* ── CTA Card ── */
.single-cta-card {
	position: relative;
	background-color: var(--color-primary);
	border-radius: 16px;
	overflow: hidden;
	margin-top: 4rem;
	padding: 2.5rem;
}

.single-cta-card__deco {
	position: absolute;
	right: -5rem;
	bottom: -5rem;
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	background-color: var(--color-bordeaux);
	opacity: 0.5;
	filter: blur(60px);
	pointer-events: none;
}

.single-cta-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 640px) {
	.single-cta-card__inner {
		flex-direction: row;
		align-items: center;
	}
}

.single-cta-card__copy {
	flex: 1;
	text-align: center;
}

@media (min-width: 640px) {
	.single-cta-card__copy {
		text-align: left;
	}
}

.single-cta-card__eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.5rem;
}

.single-cta-card__title {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 300;
	color: #fff;
	margin: 0 0 0.75rem;
}

.single-cta-card__desc {
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 1.75rem;
	max-width: 360px;
}

.single-cta-card__btn {
	display: inline-block;
	padding: 0.85rem 2rem;
	background-color: var(--color-cream);
	color: var(--color-primary);
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 8px;
	transition: transform 0.25s, box-shadow 0.25s;
}

.single-cta-card__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.single-cta-card__img-wrap {
	width: 100%;
	max-width: 180px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
	background-color: #f5f3ee;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.single-cta-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Inter-article Navigation ── */
.single-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding-top: 3rem;
	padding-bottom: 3rem;
	border-top: 1px solid #e0bfbf;
}

@media (min-width: 640px) {
	.single-nav {
		grid-template-columns: 1fr 1fr;
	}
}

.single-nav__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid #e4e2dd;
	border-radius: 10px;
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s;
	background-color: #fff;
}

.single-nav__item:hover {
	border-color: var(--color-primary);
	background-color: #fff9f7;
}

.single-nav__item--next {
	text-align: right;
}

.single-nav__dir {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-stone);
}

.single-nav__item--next .single-nav__dir {
	justify-content: flex-end;
}

.single-nav__title {
	font-family: var(--font-serif);
	font-size: 1rem;
	color: var(--color-primary);
	line-height: 1.3;
}

/* ── Articles similaires ── */
.single-related {
	padding-top: 3rem;
	padding-bottom: 5rem;
	border-top: 1px solid #e4e2dd;
}

.single-related__title {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	color: var(--color-primary);
	margin: 0 0 2.5rem;
}

.single-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

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

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

/* ── Page links (multi-page posts) ── */
.page-links {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--color-stone);
	margin: 2rem 0;
}

.page-links a {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: 1px solid #e0bfbf;
	border-radius: 4px;
	color: var(--color-primary);
	margin-left: 0.25rem;
	text-decoration: none;
}

.page-links a:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   § 28 — Page Contact (page-contact.php)
═══════════════════════════════════════════════════════════ */

.contact-page {
	background-color: var(--color-cream);
	color: var(--color-charcoal);
	padding-top: var(--navbar-height);
}

/* ── Hero ── */
.contact-hero {
	padding: 5rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-hero__eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-ocre);
	margin-bottom: 1rem;
}

.contact-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--color-primary);
	margin: 0 0 1.5rem;
	max-width: 700px;
}

.contact-hero__title em {
	font-style: italic;
}

.contact-hero__desc {
	font-family: var(--font-sans);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-stone);
	max-width: 520px;
	margin: 0;
}

/* ── Main (form + info) ── */
.contact-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	padding-bottom: 6rem;
}

@media (min-width: 1024px) {
	.contact-main {
		grid-template-columns: 7fr 5fr;
		gap: 6rem;
	}
}

/* ── Form ── */
.contact-form-wrap {
	background-color: #f5f3ee;
	border-radius: 16px;
	padding: 2.5rem;
}

@media (min-width: 768px) {
	.contact-form-wrap {
		padding: 3.5rem;
	}
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px) {
	.contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact-form__label {
	font-family: var(--font-sans);
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-stone);
}

.contact-form__input {
	background: transparent;
	border: none;
	border-bottom: 2px solid #e0bfbf;
	padding: 0.75rem 0;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--color-charcoal);
	outline: none;
	transition: border-color 0.2s;
	width: 100%;
}

.contact-form__input::placeholder {
	color: #ccc;
}

.contact-form__input:focus {
	border-bottom-color: var(--color-primary);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-form__footer {
	padding-top: 0.5rem;
}

.contact-form__submit {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

/* ── Info panel ── */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact-info__title {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 300;
	color: var(--color-primary);
	margin: 0;
}

.contact-info__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact-info__row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: var(--color-stone);
	line-height: 1.6;
}

.contact-info__row svg {
	color: var(--color-ocre);
	flex-shrink: 0;
	margin-top: 2px;
}

.contact-info__row a {
	color: var(--color-stone);
	text-decoration: none;
	transition: color 0.2s;
}

.contact-info__row a:hover {
	color: var(--color-primary);
}

.contact-info__img-wrap {
	position: relative;
	width: 100%;
	height: 260px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #eae8e3;
}

.contact-info__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.85;
	transition: transform 0.6s;
}

.contact-info__img-wrap:hover .contact-info__img {
	transform: scale(1.04);
}

.contact-info__img-badge {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	background-color: rgba(251, 249, 244, 0.9);
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-charcoal);
}

/* ── FAQ ── */
.contact-faq {
	background-color: #eae8e3;
	padding: 5rem 0;
}

.contact-faq__head {
	text-align: center;
	margin-bottom: 3.5rem;
}

.contact-faq__title {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 300;
	color: var(--color-primary);
	margin: 0 0 1.25rem;
}

.contact-faq__rule {
	width: 48px;
	height: 3px;
	background-color: var(--color-ocre);
	margin: 0 auto;
	border-radius: 2px;
}

.contact-faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 768px) {
	.contact-faq__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 3rem;
	}
}

.contact-faq__item {
	border-bottom: 1px solid #e0bfbf;
	padding: 1.5rem 0;
}

.contact-faq__item[open] .contact-faq__chevron {
	transform: rotate(180deg);
}

.contact-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--color-primary);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* remove default marker */
.contact-faq__question::-webkit-details-marker { display: none; }
.contact-faq__question::marker { display: none; }

.contact-faq__chevron {
	flex-shrink: 0;
	color: #e0bfbf;
	transition: transform 0.3s;
}

.contact-faq__answer {
	font-family: var(--font-sans);
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--color-stone);
	margin: 0.75rem 0 0;
	max-width: 480px;
}

/* ═══════════════════════════════════════════════════════════
   § 29 — Page Produit (page-produit.php)
═══════════════════════════════════════════════════════════ */

.produit-page {
	background-color: var(--color-cream);
	color: var(--color-charcoal);
	padding-top: var(--navbar-height);
}

/* ── Hero ── */
.produit-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	padding-top: 3rem;
	padding-bottom: 4rem;
	align-items: center;
}

@media (min-width: 768px) {
	.produit-hero { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

.produit-hero__visual { position: relative; order: 2; }
@media (min-width: 768px) { .produit-hero__visual { order: 1; } }

.produit-hero__deco {
	position: absolute; top: -3rem; left: -3rem;
	width: 16rem; height: 16rem; border-radius: 50%;
	background-color: #e9e2d3; filter: blur(60px); opacity: 0.5; pointer-events: none;
}

.produit-hero__img-frame {
	position: relative; background-color: #f5f3ee;
	border-radius: 16px; overflow: hidden; aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center; padding: 2rem;
}

.produit-hero__img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 10px; transition: transform 0.7s;
}

.produit-hero__img-frame:hover .produit-hero__img { transform: scale(1.04); }

.produit-hero__content { display: flex; flex-direction: column; gap: 1.25rem; order: 1; }
@media (min-width: 768px) { .produit-hero__content { order: 2; } }

.produit-hero__badge {
	display: inline-block; padding: 0.25rem 0.85rem; border-radius: 99px;
	background-color: #e9e2d3; color: #696458;
	font-family: var(--font-sans); font-size: 0.68rem;
	font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

.produit-hero__title {
	font-family: var(--font-sans);
	font-size: clamp(3rem, 8vw, 5rem);
	font-weight: 700; letter-spacing: -0.03em; line-height: 1;
	color: var(--color-primary); margin: 0;
}

.produit-hero__subtitle {
	font-family: var(--font-serif); font-size: 1.25rem;
	font-style: italic; color: var(--color-stone); margin: -0.5rem 0 0;
}

.produit-hero__desc {
	font-family: var(--font-sans); font-size: 0.95rem;
	line-height: 1.7; color: var(--color-charcoal); max-width: 420px; margin: 0;
}

.produit-hero__stars { display: flex; align-items: center; gap: 0.5rem; color: #C19A6B; font-size: 1.1rem; }
.produit-hero__reviews { font-family: var(--font-sans); font-size: 0.82rem; color: var(--color-stone); }

/* ── Prix ── */
.produit-prix {
	border-left: 4px solid var(--color-primary);
	background-color: #f0eee9; border-radius: 0 12px 12px 0;
	padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
}

.produit-prix__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.produit-prix__label { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-stone); margin: 0 0 0.25rem; }
.produit-prix__amount { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 700; color: var(--color-primary); margin: 0; }
.produit-prix__unit { font-size: 0.85rem; font-weight: 400; color: var(--color-stone); }
.produit-prix__crossed { font-family: var(--font-sans); font-size: 0.85rem; text-decoration: line-through; color: var(--color-stone); margin: 0; }
.produit-prix__duo-hint { font-family: var(--font-sans); font-size: 0.78rem; color: var(--color-bordeaux); margin: 0; font-style: italic; }
.produit-prix__btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.produit-prix__hint { font-family: var(--font-sans); font-size: 0.72rem; font-style: italic; text-align: center; color: var(--color-stone); margin: 0; }

/* ── Benefices ── */
.produit-benefits { position: relative; overflow: hidden; background-color: #f5f3ee; padding: 5rem 0; }
.produit-benefits__bg-img { position: absolute; inset: 0; pointer-events: none; }
.produit-benefits__bg-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.08; }
.produit-benefits__inner { position: relative; z-index: 1; }
.produit-benefits__head { text-align: center; margin-bottom: 3.5rem; }
.produit-benefits__title { font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 300; color: var(--color-charcoal); margin: 0 0 0.75rem; }
.produit-benefits__subtitle { font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-stone); margin: 0; }

.produit-benefits__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .produit-benefits__grid { grid-template-columns: 2fr 1fr; } }

.produit-card { border-radius: 16px; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.produit-card--large { background-color: rgba(251,249,244,0.95); border: 1px solid rgba(224,191,191,0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.produit-card--dark { background-color: var(--color-primary); color: #fff; box-shadow: 0 8px 32px rgba(87,0,19,0.25); }
.produit-card__icon { color: var(--color-primary); }
.produit-card--dark .produit-card__icon { color: rgba(255,255,255,0.8); }
.produit-card__title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 300; color: var(--color-primary); margin: 0; }
.produit-card--dark .produit-card__title { color: #fff; }
.produit-card__text { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.7; color: var(--color-stone); margin: 0; max-width: 480px; }
.produit-card--dark .produit-card__text { color: rgba(255,255,255,0.8); }
.produit-card__stats { display: flex; gap: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(224,191,191,0.2); margin-top: auto; }
.produit-card__stat-value { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 700; color: var(--color-primary); margin: 0 0 0.15rem; }
.produit-card__stat-label { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-stone); margin: 0; }
.produit-card__water { margin-top: auto; aspect-ratio: 16/9; border-radius: 8px; background: linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.2); }

/* ── Texture ── */
.produit-texture { display: grid; grid-template-columns: 1fr; gap: 4rem; padding-top: 5rem; padding-bottom: 5rem; align-items: center; }
@media (min-width: 768px) { .produit-texture { grid-template-columns: 1fr 1fr; } }
.produit-texture__title { font-family: var(--font-serif); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 300; line-height: 1.2; color: var(--color-charcoal); margin: 0 0 2rem; }
.produit-texture__sub { opacity: 0.6; }
.produit-texture__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; }
.produit-texture__item { display: flex; gap: 1.25rem; align-items: flex-start; }
.produit-texture__icon-wrap { width: 48px; height: 48px; border-radius: 50%; background-color: #eae8e3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); }
.produit-texture__item-title { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--color-charcoal); margin: 0 0 0.35rem; }
.produit-texture__item-desc { font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.6; color: var(--color-stone); margin: 0; }
.produit-texture__visual { position: relative; }
.produit-texture__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.12); display: block; }
.produit-texture__quote { position: absolute; bottom: -2rem; right: -1.5rem; background-color: var(--color-cream); border: 1px solid rgba(224,191,191,0.1); border-radius: 12px; padding: 1.25rem 1.5rem; max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
@media (max-width: 640px) { .produit-texture__quote { position: static; margin-top: 1.5rem; max-width: 100%; } }
.produit-texture__quote-text { font-family: var(--font-sans); font-size: 0.78rem; font-style: italic; color: var(--color-stone); line-height: 1.6; margin: 0 0 0.5rem; }
.produit-texture__quote-author { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-charcoal); margin: 0; }

/* ── Duo ── */
.produit-duo-section { background-color: #e4e2dd; padding: 4rem 0; }
.produit-duo { position: relative; background-color: var(--color-cream); border: 2px solid rgba(87,0,19,0.1); border-radius: 20px; padding: 3rem; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; overflow: hidden; }
@media (min-width: 640px) { .produit-duo { grid-template-columns: 1fr 1fr; } }
.produit-duo__badge { position: absolute; top: 0; right: 0; background-color: var(--color-primary); color: #fff; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5rem 2.5rem; transform: rotate(45deg) translate(1.5rem,-1.5rem); transform-origin: top right; }
.produit-duo__visual { display: flex; justify-content: center; }
.produit-duo__img { width: 100%; max-width: 280px; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); }
.produit-duo__content { display: flex; flex-direction: column; gap: 1rem; }
.produit-duo__title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 300; color: var(--color-charcoal); margin: 0; }
.produit-duo__desc { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.7; color: var(--color-stone); margin: 0; }
.produit-duo__price { display: flex; align-items: baseline; gap: 0.75rem; }
.produit-duo__price-main { font-family: var(--font-sans); font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.produit-duo__price-old { font-family: var(--font-sans); font-size: 1rem; text-decoration: line-through; color: var(--color-stone); }
.produit-duo__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.produit-duo__perks li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-size: 0.88rem; color: var(--color-charcoal); }

/* ── Rituel ── */
.produit-rituel { padding-top: 5rem; padding-bottom: 5rem; text-align: center; }
.produit-rituel__title { font-family: var(--font-serif); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 300; color: var(--color-charcoal); margin: 0 0 4rem; }
.produit-rituel__steps { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .produit-rituel__steps { grid-template-columns: repeat(3,1fr); gap: 4rem; } }
.produit-rituel__step { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.produit-rituel__num { font-family: var(--font-serif); font-size: 3rem; font-style: italic; color: #8c7071; opacity: 0.35; line-height: 1; }
.produit-rituel__step-title { font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-charcoal); margin: 0; }
.produit-rituel__step-desc { font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.6; color: var(--color-stone); margin: 0; max-width: 220px; }
.produit-rituel__tip { display: inline-block; background-color: #f5f3ee; border-radius: 12px; padding: 2rem 2.5rem; }
.produit-rituel__tip-text { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--color-primary); margin: 0 0 0.5rem; }
.produit-rituel__tip-label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-stone); margin: 0; }

/* ── Avis ── */
.produit-avis { background-color: var(--color-cream); border-top: 1px solid rgba(224,191,191,0.1); padding: 5rem 0; }
.produit-avis__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.5rem; }
.produit-avis__title { font-family: var(--font-serif); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 300; color: var(--color-charcoal); margin: 0 0 0.5rem; }
.produit-avis__score { display: flex; align-items: center; gap: 0.5rem; }
.produit-avis__stars { color: var(--color-primary); font-size: 1rem; }
.produit-avis__score-text { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--color-charcoal); }
.produit-avis__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .produit-avis__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .produit-avis__grid { grid-template-columns: repeat(3,1fr); } }
.produit-avis__card { background-color: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 0.75rem; }
.produit-avis__card--lg-only { display: none; }
@media (min-width: 1024px) { .produit-avis__card--lg-only { display: flex; } }
.produit-avis__card-head { display: flex; justify-content: space-between; align-items: center; }
.produit-avis__card-name { font-family: var(--font-sans); font-weight: 700; font-size: 0.88rem; color: var(--color-charcoal); }
.produit-avis__card-stars { color: var(--color-primary); font-size: 0.7rem; }
.produit-avis__card-text { font-family: var(--font-sans); font-size: 0.85rem; font-style: italic; line-height: 1.6; color: var(--color-stone); margin: 0; }
.produit-avis__verified { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8c7071; }

.produit-avis__all-link { font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: underline; text-underline-offset: 6px; color: var(--color-charcoal); opacity: 0.7; transition: opacity 0.2s; white-space: nowrap; }
.produit-avis__all-link:hover { opacity: 1; }
@media (max-width: 639px) { .produit-avis__all-link { display: none; } }

/* Hero blur deco alias */
.produit-hero__blur-deco { position: absolute; top: -3rem; left: -3rem; width: 16rem; height: 16rem; border-radius: 50%; background-color: #e9e2d3; filter: blur(60px); opacity: 0.5; pointer-events: none; }

/* Card top wrapper */
.produit-card__top { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }

/* Water image inside dark card */
.produit-card__water-img { margin-top: auto; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; }
.produit-card__water-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; opacity: 0.6; }

/* Best-seller ribbon (top-right rotated) */
.produit-duo__badge-ribbon { position: absolute; top: 0; right: 0; background-color: var(--color-primary); color: #fff; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5rem 2.5rem; transform: rotate(45deg) translate(1.5rem, -1.5rem); transform-origin: top right; }

/* Prix btn — full width */
.produit-prix__btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; }

/* Duo btn — full width */
.produit-duo__btn { display: flex; align-items: center; justify-content: center; width: 100%; }

/* ═══════════════════════════════════════════════════════════
   § 30 — Pages Légales (politique, mentions, cgv, cookies)
═══════════════════════════════════════════════════════════ */

.legal-page {
	background-color: var(--color-cream);
	padding-top: var(--navbar-height);
	min-height: 100vh;
}

/* ── Hero ── */
.legal-page__hero {
	background-color: var(--color-primary);
	padding: 4rem 0 3rem;
}

.legal-page__eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	margin-bottom: 0.75rem;
}

.legal-page__title {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 300;
	color: #fff;
	margin: 0 0 0.75rem;
}

.legal-page__date {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: rgba(255,255,255,0.5);
	margin: 0;
}

/* ── Layout ── */
.legal-page__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	padding-top: 3rem;
	padding-bottom: 5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.legal-page__body {
		grid-template-columns: 220px 1fr;
		gap: 5rem;
	}
}

/* ── ToC ── */
.legal-toc {
	background-color: #f5f3ee;
	border-radius: 12px;
	padding: 1.5rem;
}

@media (min-width: 1024px) {
	.legal-toc {
		position: sticky;
		top: calc(var(--navbar-height) + 2rem);
	}
}

.legal-toc__title {
	font-family: var(--font-serif);
	font-size: 1rem;
	color: var(--color-primary);
	margin: 0 0 1rem;
}

.legal-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.legal-toc__list li { font-family: var(--font-sans); font-size: 0.8rem; }

.legal-toc__list a {
	color: var(--color-stone);
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.2s;
	display: block;
}

.legal-toc__list a:hover { color: var(--color-primary); }

/* ── Content ── */
.legal-content { min-width: 0; }
.legal-content--single { grid-column: 1 / -1; }

.legal-section {
	margin-bottom: 3.5rem;
	padding-bottom: 3.5rem;
	border-bottom: 1px solid #eae8e3;
}

.legal-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.legal-section__title {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 1.25rem;
	scroll-margin-top: calc(var(--navbar-height) + 1.5rem);
}

.legal-section h3 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-charcoal);
	margin: 1.5rem 0 0.6rem;
	letter-spacing: 0.03em;
}

.legal-section p {
	font-family: var(--font-sans);
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--color-charcoal);
	margin: 0 0 1rem;
}

.legal-section ul,
.legal-section ol {
	font-family: var(--font-sans);
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--color-charcoal);
	margin: 0 0 1rem 1.5rem;
	padding: 0;
}

.legal-section li { margin-bottom: 0.35rem; }

.legal-section a {
	color: var(--color-bordeaux);
	text-underline-offset: 3px;
}

.legal-section a:hover { color: var(--color-primary); }

/* Card encadrée */
.legal-card {
	background-color: #f5f3ee;
	border-left: 3px solid var(--color-primary);
	border-radius: 0 8px 8px 0;
	padding: 1.25rem 1.5rem;
	margin: 1rem 0;
}

.legal-card p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.7;
}

/* Note de mise en évidence */
.legal-note {
	background-color: #fff8e7;
	border: 1px solid #f0d060;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	font-size: 0.85rem !important;
	color: #6b5a00 !important;
}

/* Tableau */
.legal-table-wrap {
	overflow-x: auto;
	margin: 1rem 0;
	border-radius: 8px;
	border: 1px solid #e0bfbf;
}

.legal-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: 0.85rem;
}

.legal-table th {
	background-color: var(--color-primary);
	color: #fff;
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
}

.legal-table td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid #f0eee9;
	color: var(--color-charcoal);
	vertical-align: top;
}

.legal-table tr:last-child td { border-bottom: none; }

.legal-table tr:nth-child(even) td { background-color: #faf9f6; }

/* ═══════════════════════════════════════════════════════════
   § 31 — Page Remboursements (page-remboursements.php)
═══════════════════════════════════════════════════════════ */

/* Résumé 3 cartes */
.retours-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

@media (max-width: 640px) {
	.retours-grid { grid-template-columns: 1fr; }
}

.retours-card {
	background-color: #f5f3ee;
	border-radius: 12px;
	padding: 1.75rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.retours-card__icon {
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

.retours-card__value {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--color-primary);
	margin: 0;
}

.retours-card__label {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	color: var(--color-stone);
	margin: 0;
}

/* Alerte hygiène */
.retours-alert {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background-color: #fff8e7;
	border: 1px solid #f0d060;
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2.5rem;
}

.retours-alert svg { color: #b45309; flex-shrink: 0; margin-top: 2px; }

.retours-alert p {
	font-family: var(--font-sans);
	font-size: 0.88rem;
	line-height: 1.6;
	color: #6b5a00;
	margin: 0;
}

/* Étapes retour */
.retours-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.retours-step {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.retours-step__num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 0.88rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.retours-step__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-charcoal);
	margin: 0 0 0.3rem;
}

.retours-step__desc {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-stone);
	margin: 0;
}

.retours-step__desc a {
	color: var(--color-bordeaux);
	text-decoration: none;
}

.retours-step__desc a:hover { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════
   § 32 — Page Cookies (page-cookies.php)
═══════════════════════════════════════════════════════════ */

/* Catégories cookies */
.cookies-category {
	margin-bottom: 2.5rem;
}

.cookies-category__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.cookies-category__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-charcoal);
	margin: 0 0 0.3rem;
}

.cookies-category__desc {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--color-stone);
	margin: 0;
	max-width: 480px;
}

.cookies-category__badge {
	display: inline-block;
	padding: 0.25rem 0.85rem;
	border-radius: 99px;
	font-family: var(--font-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
}

.cookies-category__badge--required {
	background-color: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.cookies-category__badge--optional {
	background-color: #fff8e7;
	color: #92400e;
	border: 1px solid #fde68a;
}

/* Code inline */
.legal-table code {
	font-family: 'Courier New', monospace;
	font-size: 0.78rem;
	background-color: #f0eee9;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	color: var(--color-bordeaux);
}

/* Navigateurs */
.cookies-browsers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}

.cookies-browser {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid #e0bfbf;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--color-charcoal);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.cookies-browser:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background-color: #fff9f7;
}

.cookies-browser__name { font-weight: 600; }


/* ==========================================================================
   Boutique — Archive produits WooCommerce
   ========================================================================== */

.boutique-page__header {
	background-color: var(--color-cream);
	padding: calc(var(--navbar-height) + var(--space-12)) 0 var(--space-10);
	border-bottom: 1px solid var(--color-surface);
}

.boutique-page__title {
	font-family: var(--font-serif);
	font-size: var(--text-4xl);
	font-weight: 600;
	color: var(--color-charcoal);
	margin: 0;
}

.boutique-page__content {
	padding-top: var(--space-12);
	padding-bottom: var(--space-20);
}