/*
Theme Name: Courts Bouillon
Theme URI: https://courts-bouillon.fr/
Author: Thomas Sellem
Author URI: https://sellem.tv
Description: Custom Courts Bouillon theme.
Version: 1.0.0
Text Domain: courts-bouillon
*/

:root {
	--color-primary: #FF9900;
	--color-primary-dark: #DB8300;
	--color-secondary: #2900A3;
	--color-bg: #F7F2E9;
	--color-text: #1A1A1A;
	--font-heading: "Proxima Nova Condensed", Arial Narrow, Arial, sans-serif;
	--font-body: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

body {
	padding-top: 60px;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
}

body.has-announcement {
	padding-top: 88px;
}

/* -- Header -- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 2px solid #000;
}

.site-announcement {
	background: #1A1410;
	color: #fff;
	text-align: center;
	padding: 6px 16px;
}

.site-announcement__text {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.site-nav {
	display: flex;
	align-items: center;
	max-width: 1280px;
	gap: 24px;
	height: 60px;
	padding: 0 24px;
	margin: 0 auto;
}

.site-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header .site-logo__img {
	display: block;
	height: 36px;
	width: auto;
	max-width: none;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin-left: auto;
}

.nav-links a {
	display: inline-block;
	color: #000;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 4px;
	transition: border-color 0.15s;
}

.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
	border-color: var(--color-primary);
}

.nav-cta {
	display: inline-block;
	padding: 8px 16px;
	background: #fff;
	border: 2px solid #000;
	color: #000;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}

.nav-cta:hover {
	background: #000;
	color: #fff;
}

/* Hamburger */

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	margin-left: auto;
}

.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Cross formation: top/bottom bars rotate to meet at the middle bar's own
   position, translateY(7px)/-7px being exactly gap (5px) + bar height (2px)
   apart — the vertical distance between adjacent bars — so they land
   exactly on top of where the middle bar (faded out) already sits. */
body.mobile-menu-open .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

body.mobile-menu-open .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

body.mobile-menu-open .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
	display: none;
}

@media (max-width: 768px) {
	.site-nav .nav-links,
	.site-nav .nav-cta {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.mobile-menu {
		display: flex;
		flex-direction: column;
		gap: 32px;
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 40px 24px;
		background: var(--color-bg);
		border-top: 2px solid #000;
		overflow-y: auto;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.mobile-menu.is-open {
		opacity: 1;
	}

	.mobile-menu[hidden] {
		display: none;
	}

	body.has-announcement .mobile-menu {
		top: 88px;
	}

	/* margin-left: 0 — .nav-links--mobile also carries the plain .nav-links
	   class (same <ul>, both classes — see header.php), whose own
	   margin-left: auto is meant to push the desktop nav right inside
	   .site-nav's row layout. Left alone, that same auto margin becomes a
	   cross-axis auto-margin inside this flex COLUMN instead, which flexbox
	   treats as an alignment override — it was pushing the whole links list
	   to the right edge instead of stretching it left like every other
	   child here. */
	.mobile-menu .nav-links--mobile {
		display: flex;
		flex-direction: column;
		gap: 20px;
		list-style: none;
		margin-left: 0;
		align-items: stretch;
	}

	/* overflow: hidden per link (not on the whole list) — each link needs
	   its own clipping box so its slide-up reveal below hides inside its
	   own line rather than the whole menu clipping together. */
	.mobile-menu .nav-links--mobile li {
		overflow: hidden;
	}

	.mobile-menu .nav-links--mobile a {
		display: block;
		color: #000;
		font-weight: 800;
		font-size: 1.75rem;
		line-height: 1.1;
		text-transform: uppercase;
		text-decoration: none;
		font-family: "proxima-nova-condensed", sans-serif;
	}

	.mobile-menu .nav-links--mobile .current-menu-item > a,
	.mobile-menu .nav-links--mobile .current_page_item > a {
		color: var(--color-primary);
	}

	.nav-cta--mobile {
		align-self: flex-start;
		padding: 14px 24px;
		font-size: 0.875rem;
	}

	/* Slide-up-with-stagger reveal, played once per open (mobile-menu.js
	   adds .is-open a frame after clearing [hidden], so the transition has
	   a "before" state to animate from instead of just snapping in). Each
	   link starts translated fully below its own clipping box (li's
	   overflow: hidden above) and fades/slides into place; nth-child delays
	   stagger them. .nav-cta--mobile isn't a list item — same treatment,
	   delayed to land just after the last covered link. */
	.mobile-menu .nav-links--mobile a,
	.nav-cta--mobile {
		transform: translateY(100%);
		opacity: 0;
		transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out;
	}

	.mobile-menu.is-open .nav-links--mobile a,
	.mobile-menu.is-open .nav-cta--mobile {
		transform: translateY(0);
		opacity: 1;
	}

	.mobile-menu .nav-links--mobile li:nth-child(1) a { transition-delay: 0.03s; }
	.mobile-menu .nav-links--mobile li:nth-child(2) a { transition-delay: 0.08s; }
	.mobile-menu .nav-links--mobile li:nth-child(3) a { transition-delay: 0.13s; }
	.mobile-menu .nav-links--mobile li:nth-child(4) a { transition-delay: 0.18s; }
	.mobile-menu .nav-links--mobile li:nth-child(5) a { transition-delay: 0.23s; }
	.mobile-menu .nav-links--mobile li:nth-child(6) a { transition-delay: 0.28s; }
	.mobile-menu .nav-links--mobile li:nth-child(7) a { transition-delay: 0.33s; }
	.mobile-menu .nav-links--mobile li:nth-child(8) a { transition-delay: 0.38s; }

	.nav-cta--mobile {
		transition-delay: 0.23s;
	}

	body.mobile-menu-open {
		overflow: hidden;
	}
}

/* -- Buttons -- */

.btn {
	display: inline-block;
	padding: 14px 32px;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	transition: background 0.2s;
}

.btn:hover {
	background: var(--color-primary-dark);
}

.btn--outline {
	background: transparent;
	color: var(--color-secondary);
	border: 1px solid var(--color-secondary);
}

.btn--outline:hover {
	background: var(--color-secondary);
	color: #fff;
}

/* -- Hero -- */

.hero {
	position: relative;
	overflow: hidden;
	padding: 96px 48px;
	background-color: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
}

.hero__season-tag {
	position: absolute;
	top: 32px;
	right: 48px;
	display: inline-block;
	background: #fff;
	border: 2px solid #000;
	padding: 8px 16px;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transform: rotate(3deg);
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
}

.hero__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
}

.hero__meta-issue {
	font-size: 0.8125rem;
	color: #7a7263;
}

.hero__title {
	display: flex;
	flex-direction: column;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 7rem;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--color-secondary);
}

.hero__issue-number {
	font-size: 1.2rem;
	letter-spacing: 0.15em;
	color: #9a9184;
	margin-top: .3rem;
	margin-bottom: 1.2rem;
}

.hero__description {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #3a352c;
	max-width: 420px;
	margin-bottom: 1.2rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero__countdown-label {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b6355;
}

.hero__prolongation-badge {
	margin-bottom: .4rem;
}

.hero__countdown {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: .6rem;
	margin-bottom: 1.5rem;
}

.hero__countdown-sep {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	animation: cb-blink 1s steps(1, end) infinite;
}

@keyframes cb-blink {
	0%, 49% {
		color: #000;
	}
	50%, 100% {
		color: #b3b3b3;
	}
}

.hero__countdown-block {
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid #000;
	color: #fff;
}

.hero__countdown-block:nth-of-type(odd) {
	background: #000;
}

.hero__countdown-block:nth-of-type(even) {
	background: var(--color-secondary);
}

.hero__countdown-value {
	font-family: "proxima-nova-condensed", sans-serif;
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
}

.hero__countdown-unit {
	margin-top: 4px;
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
}

.hero__cta {
	position: relative;
	display: inline-block;
	margin-top: 8px;
	padding: 16px 32px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 6px 6px 0 var(--color-secondary);
	transition: transform 0.15s, box-shadow 0.15s;
}

.hero__cta:hover {
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 var(--color-secondary);
}

.hero__cta-note {
	font-style: italic;
	font-size: 0.75rem;
	color: #7a7263;
	max-width: 320px;
}

/* -- Hero : cover -- */

.hero__right {
	display: flex;
	justify-content: center;
}

.hero__cover-stack {
	position: relative;
	width: 100%;
	max-width: 380px;
}

.hero__cover-shadow {
	position: absolute;
	inset: 0;
	background: #d8d0c0;
	filter: blur(2px) saturate(0.5);
	border: 2px solid rgba(0, 0, 0, 0.13);
}

.hero__cover-shadow--1 {
	transform: rotate(-6deg) translate(-10px, 10px);
	z-index: 1;
}

.hero__cover-shadow--2 {
	transform: rotate(5deg) translate(12px, 6px);
	opacity: 0.7;
	z-index: 2;
}

.hero__cover {
	position: relative;
	z-index: 3;
	background: #fff;
	border: 4px solid #000;
	transform: rotate(-2deg)
}

.hero__cover-tape {
	position: absolute;
	top: -18px;
	left: 50%;
	width: 110px;
	height: 34px;
	background: rgba(255, 153, 0, 0.9);
	transform: translateX(-50%) rotate(-4deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	z-index: 5;
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.hero__cover-top {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	z-index: 4;
	font-family: var(--font-heading);
	text-transform: uppercase;
}

.hero__cover-brand {
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__cover-issue {
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__cover-media {
	overflow: hidden;
	background: #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 480px;
	font-size: 0.875rem;
	color: #999;
}

.hero__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__cover-theme {
	position: relative;
	background: var(--color-primary);
	padding: 14px 16px;
}

.hero__cover-theme-text {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}

.hero__cover-theme-tag {
	position: absolute;
	bottom: -12px;
	left: 16px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 4px 10px;
}

.hero__cover-rubriques {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	list-style: none;
	background: #f2ede2;
	padding: 20px 16px 14px;
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #4a4335;
}

.hero__cover-badge {
	position: absolute;
	bottom: -22px;
	right: -22px;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--color-secondary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.3;
	transform: rotate(-12deg);
	border: 2px solid #fff;
	z-index: 6;
}

.hero__cover-star {
	position: absolute;
	bottom: -14px;
	left: -14px;
	color: var(--color-primary);
	z-index: 6;
}

/* -- Hero : fallback -- */

.hero__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 480px;
	margin: 0 auto;
	padding: 96px 0;
}

.hero__empty .hero__label {
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-secondary);
	padding: 6px 14px;
	transform: rotate(-2deg);
}

.hero__empty .hero__title {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}

.hero__empty .hero__desc {
	font-size: 1rem;
	line-height: 1.6;
	color: #444;
}

/* "Laptop" tier — between the full desktop scale above (tuned for a large
   monitor, where the 1280px-max content sits with plenty of margin either
   side) and the ≤900px mobile stack below. Without this, a ~1366px screen
   renders the exact same 7rem hero title etc. as a 2560px one, except the
   1280px content now fills almost the whole window edge to edge, so
   everything reads as oversized instead of comfortably large. */
@media (max-width: 1680px) {
	.hero {
		padding: 72px 48px;
	}

	.hero__grid {
		gap: 40px;
	}

	.hero__title {
		font-size: 4rem;
	}

	.hero__cover-stack {
		max-width: 300px;
	}

	.hero__cover-media {
		height: 340px;
	}
}

@media (max-width: 900px) {
	.hero {
		padding: 88px 24px 56px;
	}

	.hero__season-tag {
		position: static;
		align-self: flex-end;
		margin-bottom: 24px;
	}

	.hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.hero__right {
		order: -1;
	}

	.hero__title {
		font-size: 2.75rem;
	}

	.hero__cover-stack {
		max-width: 320px;
	}

	.hero__cover-media {
		height: 400px;
	}
}

/* -- Torn divider (hero -> about) -- */

.torn-divider {
	position: relative;
	z-index: 1;
	height: 56px;
	margin-top: -1px;
	margin-bottom: -56px;
	background: var(--color-bg);
	box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.2);
	clip-path: polygon(
		0% 0%, 100% 0%,
		98% 45%, 96% 80%, 93% 38%, 91% 70%, 89% 55%, 87% 85%, 84% 42%, 82% 75%,
		80% 60%, 78% 83%, 76% 36%, 73% 65%, 71% 78%, 69% 50%, 67% 85%, 64% 58%,
		62% 73%, 60% 40%, 58% 81%, 56% 53%, 53% 68%, 51% 85%, 49% 45%, 47% 73%,
		44% 60%, 42% 83%, 40% 38%, 38% 77%, 36% 63%, 33% 85%, 31% 48%, 29% 75%,
		27% 65%, 24% 45%, 22% 83%, 20% 40%, 18% 70%, 16% 55%, 13% 80%, 11% 47%,
		9% 85%, 7% 52%, 4% 75%, 2% 60%, 0% 85%
	);
}

.torn-divider--light {
	background: #1A1410;
	margin-top: -56px;
	margin-bottom: -1px;
	clip-path: polygon(
		0% 100%, 100% 100%,
		98% 55%, 96% 20%, 93% 62%, 91% 30%, 89% 45%, 87% 15%, 84% 58%, 82% 25%,
		80% 40%, 78% 17%, 76% 64%, 73% 35%, 71% 22%, 69% 50%, 67% 15%, 64% 42%,
		62% 27%, 60% 60%, 58% 19%, 56% 47%, 53% 32%, 51% 15%, 49% 55%, 47% 27%,
		44% 40%, 42% 17%, 40% 62%, 38% 23%, 36% 37%, 33% 15%, 31% 52%, 29% 25%,
		27% 35%, 24% 55%, 22% 17%, 20% 60%, 18% 30%, 16% 45%, 13% 20%, 11% 53%,
		9% 15%, 7% 48%, 4% 25%, 2% 40%, 0% 15%
	);
}

.torn-divider--dark {
	background: #1A1410;
}

/* Combine with .torn-divider--light for its jagged-top geometry — this only
   overrides the color, same way .torn-divider--dark reuses the default
   jagged-bottom geometry. Needed where a beige section sits below a
   differently-colored one (e.g. white above / beige below) — the plain
   .torn-divider is invisible there since its jagged edge already matches
   a beige section below. */
.torn-divider--beige {
	background: var(--color-bg);
}

/* -- Featured -- */

.featured {
	padding: 80px 48px;
}

.featured__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 40px;
}

.featured__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.product-card {
	transition: transform 0.2s;
}

.product-card:nth-child(odd) {
	transform: rotate(-1deg);
}

.product-card:nth-child(even) {
	transform: rotate(1deg);
}

.product-card:hover {
	transform: rotate(0deg);
}

.product-card__media {
	aspect-ratio: 3 / 4;
	background: #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	color: #999;
	margin-bottom: 16px;
	box-shadow: 6px 6px 0 rgba(41, 0, 163, 0.08);
	clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 92% 100%, 84% 95%, 76% 99%, 68% 94%, 60% 100%, 52% 95%, 44% 99%, 36% 94%, 28% 100%, 20% 95%, 12% 99%, 4% 94%, 0% 97%);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.product-card__title {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
}

.product-card__price {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary-dark);
}

/* -- About -- */

.about {
	background-color: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
}

.about__media {
	position: relative;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	color: #999;
}

.about__media-img {
	width: 75%;
	max-width: 1000px;
	height: auto;
}

.about__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 100px 48px 72px;
	gap: 16px;
}

.about__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 8px;
}

.about__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 3rem;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--color-secondary);
	margin-bottom: 8px;
}

.about__text {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #3a352c;
}

/* Tablette et moins */
@media (max-width: 1024px) {
	.about {
		grid-template-columns: 1fr;
	}

	.about__media {
		display: none;
	}

	.torn-divider {
		clip-path: polygon(
			0% 0%, 100% 0%,
			98% 45%, 93% 38%, 89% 55%, 84% 42%, 80% 60%, 76% 36%, 71% 78%, 67% 85%,
			62% 73%, 58% 81%, 53% 68%, 49% 45%, 44% 60%, 40% 38%, 36% 63%, 31% 48%,
			27% 65%, 22% 83%, 18% 70%, 13% 80%, 9% 85%, 4% 75%, 0% 85%
		);
	}

	.torn-divider--light {
		clip-path: polygon(
			0% 100%, 100% 100%,
			98% 55%, 93% 62%, 89% 45%, 84% 58%, 80% 40%, 76% 64%, 71% 22%, 67% 15%,
			62% 27%, 58% 19%, 53% 32%, 49% 55%, 44% 40%, 40% 62%, 36% 37%, 31% 52%,
			27% 35%, 22% 17%, 18% 30%, 13% 20%, 9% 15%, 4% 25%, 0% 15%
		);
	}
}

/* -- Newsletter -- */

.newsletter {
	position: relative;
	overflow: hidden;
	padding: 96px 48px;
	text-align: center;
	background-color: #1A1410;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.035),
		rgba(255, 255, 255, 0.035) 1px,
		transparent 1px,
		transparent 14px
	);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.newsletter__label {
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: .7rem;
}

.newsletter__title {
	display: flex;
	flex-direction: column;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 8vw, 5rem);
	line-height: 0.95;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.newsletter__title-line--white {
	color: #fff;
}

.newsletter__title-line--orange {
	color: var(--color-primary);
}

.newsletter__meta {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.6;
	color: #c9c2b8;
	max-width: 480px;
	margin-bottom: 1rem;
}

.newsletter .newsletter-form__input {
	padding: 14px 18px;
	background: #fff;
	color: #1a1410;
	border: 2px solid #000;
}

.newsletter .newsletter-form__input::placeholder {
	color: #9a9184;
}

.newsletter .newsletter-form__input:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.newsletter .newsletter-form__submit {
	padding: 16px 32px;
	box-shadow: 6px 6px 0 #000;
}

.newsletter .newsletter-form__submit:hover {
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #000;
}

.newsletter__note {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8177;
}

@media (max-width: 600px) {
	.newsletter__star {
		width: 90px;
		height: 90px;
		bottom: -12px;
		left: -12px;
	}
}

/* -- Articles -- */

.articles {
	background: #fff;
	padding: 80px 48px;
}

.articles--subscriptions {
	padding-bottom: 0;
}

/* WooCommerce Subscriptions appends its own "/ mois" (etc.) span to
   get_price_html() — redundant here, "Nos abonnements" cards on the
   homepage just show the base price. */
.home .article-card__price .subscription-details {
	display: none !important;
}

.articles__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-size: 3rem;
	font-weight: bolder;
	text-transform: uppercase;
	max-width: 1280px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.articles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 4px solid #000;
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s;
}

.article-card:hover {
	transform: translateY(-4px);
}

.article-card__tape {
	position: absolute;
	top: -14px;
	left: 50%;
	width: 90px;
	height: 28px;
	background: rgba(255, 153, 0, 0.9);
	transform: translateX(-50%) rotate(-4deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	z-index: 3;
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.article-card__top {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	z-index: 2;
	font-family: var(--font-heading);
	text-transform: uppercase;
}

.article-card__brand {
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.article-card__media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #fff;
}

.article-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article-card__banner {
	flex: 1;
	background: var(--color-primary);
	padding: 14px 16px;
}

.article-card__banner-text {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
	padding-right: 48px;
}

.article-card__price {
	position: absolute;
	bottom: -16px;
	right: -16px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--color-secondary);
	color: #fff;
	border: 2px solid #fff;
	text-align: center;
	line-height: 1.1;
	transform: rotate(-8deg);
	z-index: 4;
}

.article-card__price del {
	display: block;
	font-weight: 400;
	opacity: 0.7;
	text-decoration: line-through;
}

.article-card__price ins {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.article-card__price .woocommerce-Price-amount {
	font-family: "proxima-nova-condensed", sans-serif;
	font-size: 1.2rem;
	font-weight: bolder;
}

.article-card__price del .woocommerce-Price-amount {
	font-size: 0.625rem;
	font-weight: 400;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.about__content {
		padding: 56px 40px;
	}

	.about__title {
		font-size: 2.25rem;
	}

	.newsletter {
		padding: 64px 40px;
	}

	.newsletter__title {
		font-size: clamp(2.25rem, 6vw, 3.25rem);
	}

	.articles {
		padding: 56px 40px;
	}

	.articles__title {
		font-size: 2.25rem;
	}
}

/* Tablette et moins */
@media (max-width: 1024px) {
	.articles__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.featured,
	.newsletter,
	.articles {
		padding-left: 24px;
		padding-right: 24px;
	}

	.about__content {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* -- Single product -- */

.product-page {
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
}

.product-page__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 0 96px;
}

.product-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9a9184;
	margin-bottom: 32px;
}

.product-breadcrumb__link {
	color: #9a9184;
	text-decoration: none;
}

.product-breadcrumb__link:hover {
	color: var(--color-secondary);
}

.product-breadcrumb__sep {
	color: #c9c2b8;
}

.product-breadcrumb__current {
	color: #1a1a1a;
	font-weight: 800;
}

.product-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

/* Gallery */

.product-gallery {
	/* Grid items default to min-width: auto, sizing the track to fit the
	   widest child's intrinsic content — without this, .product-gallery__thumbs
	   (a nowrap flex row) forces the whole column wider as thumbnails are
	   added instead of scrolling within it. */
	min-width: 0;
}

.product-gallery__frame {
	position: relative;
	border: 4px solid #000;
	background: #fff;
	aspect-ratio: 3 / 4;
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-gallery__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 0.875rem;
	background: #e8e8e8;
}

.product-gallery__badge {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 800;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transform: rotate(-10deg);
	border: 2px solid #fff;
	z-index: 4;
}

.product-gallery__tape {
	position: absolute;
	top: -16px;
	left: 50%;
	width: 120px;
	height: 32px;
	z-index: 3;
	transform: translateX(-50%) rotate(-3deg);
	background: repeating-linear-gradient(
		45deg,
		rgba(255, 153, 0, 0.9) 0px,
		rgba(255, 153, 0, 0.9) 8px,
		rgba(255, 210, 140, 0.9) 8px,
		rgba(255, 210, 140, 0.9) 16px
	);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.product-gallery__star {
	position: absolute;
	bottom: -16px;
	right: -16px;
	width: 36px;
	height: 36px;
	color: var(--color-primary);
	z-index: 4;
}

.product-gallery__thumbs {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.product-gallery__thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	padding: 0;
	background: none;
	border: 3px solid #e8e0d0;
	cursor: pointer;
	overflow: hidden;
}

.product-gallery__thumb.is-active {
	border-color: var(--color-primary);
}

.product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Info */

.product-info__context {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.product-info__context-label {
	color: var(--color-secondary);
	text-decoration: underline;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.product-info__drop-link {
	color: var(--color-secondary);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.product-info__drop-link:hover {
	text-decoration: underline;
}

.product-info__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.product-info__title-black {
	color: #000;
}

.product-info__title-orange {
	color: var(--color-primary);
}

.product-info__title-violet {
	color: var(--color-secondary);
}

.product-info__subtitle {
	font-weight: 700;
	font-size: 0.9375rem;
	color: #8a8177;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 20px;
}

.product-info__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 2rem;
	color: #000;
	margin-bottom: 20px;
}

.product-info__price-note {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #9a9184;
}

.product-info__parution {
	margin-top: -14px;
	margin-bottom: 20px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: #3a352c;
}

.product-info__description {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.7;
	color: #3a352c;
	border-left: 6px solid var(--color-primary);
	padding-left: 20px;
	margin-bottom: 24px;
}

.product-info__description p:not(:last-child) {
	margin-bottom: 12px;
}

.product-info__auteurices-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b6355;
	margin-bottom: 10px;
}

/* Reuses .nl-guests__list/.nl-guests__badge as-is for the badge look itself
   (same visual treatment as the newsletter page's guest names) — this
   overrides just the list's own centered/max-width layout, which made
   sense as a standalone full-width section but not sitting left-aligned
   under a paragraph here. Compound selector (not source order) is what
   guarantees this wins over .nl-guests__list's own rule. */
.product-info__auteurices.nl-guests__list {
	justify-content: flex-start;
	max-width: none;
	margin: 0 0 24px;
	transition: margin-bottom 0.3s ease;
}

/* Toggled by auteurices-toggle.js alongside .product-info__auteurices-more's
   own .is-open — while the "more" panel is open, its own 16px padding-top
   already separates it from this row, so the full 24px here on top of that
   read as too big a gap; shrinking it down keeps just one clean gap instead
   of two stacked ones. */
.product-info__auteurices.is-open {
	margin-bottom: 0;
}

/* Toggle badge (7th+ auteurices): same badge look, kept upright — specificity
   has to beat .nl-guests__badge:nth-child(odd/even/3n)'s own transform, which
   would otherwise randomly tilt the button along with its arrow. */
.product-info__auteurices .nl-guests__badge.product-info__auteurices-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: none;
	cursor: pointer;
}

.product-info__auteurices-toggle-icon {
	margin-left: 8px;
	transition: transform 0.3s ease;
}

.product-info__auteurices-toggle[aria-expanded="true"] .product-info__auteurices-toggle-icon {
	transform: rotate(180deg);
}

/* Collapsed by default (max-height: 0). All layout/padding lives on
   -inner, never on this element: a padding here wouldn't compress to 0
   at max-height: 0 (border-box doesn't shrink a fixed px padding below its
   own value — confirmed live 2026-09-10, left a permanent 40px sliver
   showing), and margin is never clipped by overflow/max-height either way.
   Keeping this element padding-free also means the scrollHeight JS reads to
   pick the open target is always just "whatever -inner naturally needs" —
   nothing on this element can be mid-transition when that's measured.
   cubic-bezier here (vs. plain ease) is a slightly gentler deceleration —
   smoother-reading for a reveal of this size. */
.product-info__auteurices-more {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fades in on top of the slide — a pure max-height reveal reads as an
   abrupt crop at the bottom edge; cross-fading the content in as the panel
   grows is what actually sells "smooth". */
.product-info__auteurices-more-inner {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 16px 14px;
	padding: 16px 0 24px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.product-info__auteurices-more.is-open .product-info__auteurices-more-inner {
	opacity: 1;
}

.product-info__stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #1a1a1a;
	margin-bottom: 28px;
}

.product-info__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.product-info__stock-dot--in {
	background: #2e7d32;
}

.product-info__stock-dot--out {
	background: #c0392b;
}

.product-info__stock-count {
	color: var(--color-secondary);
	text-decoration: underline;
}

.product-cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.qty-selector {
	display: flex;
	align-items: stretch;
	border: 2px solid #000;
}

.qty-selector__btn {
	width: 44px;
	background: #fff;
	border: none;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.qty-selector__btn:hover {
	background: #f0ede6;
}

.qty-selector__input {
	width: 52px;
	border: none;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	-moz-appearance: textfield;
}

.qty-selector__input::-webkit-outer-spin-button,
.qty-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.product-cta__submit {
	flex: 1;
	position: relative;
	padding: 16px 32px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	box-shadow: 6px 6px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
}

.product-cta__submit:hover {
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #000;
}

.product-cta__submit:disabled {
	background: #ccc;
	color: #888;
	cursor: not-allowed;
	box-shadow: 6px 6px 0 #999;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.product-page__inner {
		padding: 24px 0 64px;
	}

	.product-main {
		grid-template-columns: 2fr 3fr;
		gap: 40px;
	}

	.product-info__title {
		font-size: clamp(2rem, 4vw, 2.75rem);
	}
}

@media (max-width: 900px) {
	.product-page__inner,
	.related-products__inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	.product-main {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.product-info__title {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}
}

/* -- Drop origin -- */

.drop-origin__card {
	position: relative;
	background: #fff;
	border: 4px solid #000;
	margin-bottom: 40px;
}

.drop-origin__band {
	background: var(--color-secondary);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 12px 24px;
}

.drop-origin__body {
	padding: 24px 24px 40px;
	padding-bottom: 0;
}

.drop-origin__context {
	color: var(--color-secondary);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 12px;
}

.drop-origin__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 16px;
}

.drop-origin__description {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.7;
	color: #3a352c;
	max-width: 640px;
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.drop-origin__status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: #1a1a1a;
	margin-bottom: 8px;
}

.drop-origin__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #000;
	flex-shrink: 0;
}

.drop-origin__dates {
	font-style: italic;
	font-size: 0.8125rem;
	color: #8a8177;
	margin-bottom: 20px;
}

.drop-origin__progress {
	width: 100%;
	height: 10px;
	background: #e5dcc5;
	border: 1px solid #000;
	overflow: hidden;
	margin-bottom: 8px;
}

.drop-origin__progress-bar {
	height: 100%;
	background: var(--color-secondary);
}

.drop-origin__progress-label {
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #6b6355;
	margin-bottom: 28px;
}

.drop-origin__cta {
	position: relative;
	display: inline-block;
	padding: 16px 32px;
	background: #fff;
	color: #000;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid #000;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
	transition: transform 0.15s, box-shadow 0.15s;
}

.drop-origin__cta:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* -- Related products -- */

.related-products {
	background-color: #fff;
	padding-bottom: 64px;
	padding-top: 128px;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.related-products {
		padding-top: 64px;
	}
}

.related-products__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.related-products__heading {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 32px;
}

.related-products__heading-black {
	color: #000;
}

.related-products__heading-violet {
	color: var(--color-secondary);
}

.related-products__heading-line {
	flex: 1;
	min-width: 40px;
	border-top: 3px dashed #000;
}

.related-products__heading-star {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
	flex-shrink: 0;
}

.related-products__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 1024px) {
	.related-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.related-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 4px solid #000;
	color: inherit;
	text-decoration: none;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
	transition: transform 0.15s, box-shadow 0.15s;
}

.related-card:hover {
	transform: translate(2px, 2px);
	box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.12);
}

.related-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 4px solid #000;;
}

.related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-card__badge {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 0.9375rem;
	color: #fff;
	border: 2px solid #fff;
	transform: rotate(-8deg);
}

.related-card__badge--numero {
	background: var(--color-secondary);
}

.related-card__badge--new {
	background: var(--color-primary);
	color: #000;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.related-card__badge--star {
	background: none;
	border: none;
	width: 32px;
	height: 32px;
	top: -8px;
	right: -8px;
	color: var(--color-primary);
}

/* Category "patch" — reuses .hero__cover-tape's torn-tape clip-path so it
   reads as the same collage/washi-tape sticker, not another circular badge
   like .related-card__badge above. Top-left (badges above sit top-right) —
   direct child of .related-card, not .related-card__media, since media has
   overflow: hidden for its cropped image and would clip the patch's
   left: -10px overhang. */
.related-card__patch {
	position: absolute;
	top: 10px;
	left: -4%;
	z-index: 2;
	background: var(--color-primary);
	color: #000;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 6px 16px 6px 20px;
	transform: rotate(-25deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.related-card__drop-banner {
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 8px 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.related-card__body {
	padding: 16px;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
}

.related-card__name {
	font-weight: 700;
	color: #000;
	margin-bottom: 4px;
}

.related-card__theme {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 0.8125rem;
	color: #8a8177;
	margin-bottom: 8px;
}

.related-card__price {
	font-weight: 700;
	text-align: end;
	color: var(--color-secondary);
}

.related-card__excerpt {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6b6355;
}

/* "La presse en parle" — press-clipping patches, single-product.php, right
   under "Ajouter au panier". Small cards in the same idiom as
   .drop-origin__card (white, 3px black border, hard drop-shadow) rather
   than a rounded/soft look — plus a pinned washi-tape strip at the top
   (-tape reuses .product-gallery__tape's torn-tape clip-path) and a slight
   per-card rotate, so the row reads as clippings stuck to a corkboard. */
.product-press {
	margin-top: 28px;
}

.product-press__title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b6355;
	margin-bottom: 22px;
}

.product-press__list {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 20px;
}

.product-press__patch {
	position: relative;
	width: 160px;
	box-sizing: border-box;
	padding: 18px 14px 14px;
	text-align: center;
	background: #fff;
	border: 3px solid #000;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
}

.product-press__patch:nth-child(odd) {
	transform: rotate(-3deg);
}

.product-press__patch:nth-child(even) {
	transform: rotate(2.5deg);
}

.product-press__patch-tape {
	position: absolute;
	top: -14px;
	left: 50%;
	width: 68px;
	height: 26px;
	z-index: 1;
	transform: translateX(-50%) rotate(-4deg);
	background: repeating-linear-gradient(
		45deg,
		rgba(255, 153, 0, 0.85) 0px,
		rgba(255, 153, 0, 0.85) 7px,
		rgba(255, 210, 140, 0.85) 7px,
		rgba(255, 210, 140, 0.85) 14px
	);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.product-press__patch:nth-child(3n) .product-press__patch-tape {
	transform: translateX(-50%) rotate(3deg);
	background: repeating-linear-gradient(
		45deg,
		rgba(41, 0, 163, 0.85) 0px,
		rgba(41, 0, 163, 0.85) 7px,
		rgba(150, 130, 220, 0.85) 7px,
		rgba(150, 130, 220, 0.85) 14px
	);
}

.product-press__patch-outlet {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #000;
	margin-bottom: 6px;
}

.product-press__patch-quote {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 0.75rem;
	line-height: 1.35;
	color: #3a352c;
}

@media (max-width: 640px) {
	.product-press__patch {
		width: 140px;
	}
}

/* -- Toast notices -- */

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 300;
	max-width: 360px;
	padding: 16px 20px;
	background: #fff;
	color: #000;
	border: 3px solid #000;
	border-left-width: 8px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.4;
	list-style: none;
	animation: cb-toast-in 0.3s ease;
}

.woocommerce-message.is-hiding,
.woocommerce-error.is-hiding,
.woocommerce-info.is-hiding {
	animation: cb-toast-out 0.3s ease forwards;
}

@keyframes cb-toast-in {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes cb-toast-out {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(20px);
		opacity: 0;
	}
}

.woocommerce-message {
	border-left-color: var(--color-secondary);
}

.woocommerce-info {
	border-left-color: var(--color-primary);
}

.woocommerce-error {
	border-left-color: #c0392b;
}

.woocommerce-error li {
	list-style: none;
}

.woocommerce-error li:not(:last-child) {
	margin-bottom: 8px;
}

.woocommerce-message a.button.wc-forward {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 16px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	text-decoration: none;
}

@media (max-width: 480px) {
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info {
		left: 16px;
		right: 16px;
		max-width: none;
	}
}

/* -- Shop archive -- */

.shop-page {
	background-color: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
	padding-bottom: 96px;
}

.shop-page__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 48px 0;
}

.shop-header {
	margin-bottom: 56px;
}

.shop-header__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 16px;
}

.shop-header__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.95;
	text-transform: uppercase;
}

.shop-header__title-black {
	color: #000;
}

.shop-header__title-orange {
	color: var(--color-primary);
}

.shop-drop {
	padding: 40px 0;
	border-top: 2px solid #000;
}

.shop-drop:last-child {
	padding-bottom: 0;
}

.shop-drop__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 16px;
	margin-bottom: 28px;
}

.shop-drop__status {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
	padding: 5px 12px;
}

.shop-drop__status--open {
	background: var(--color-secondary);
}

.shop-drop__status--upcoming {
	background: var(--color-primary);
	color: #000;
}

.shop-drop__status--closed {
	background: #000;
}

.shop-drop__title {
	flex-basis: 100%;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1;
	text-transform: uppercase;
	color: #000;
}

.shop-drop__title-link {
	color: inherit;
	text-decoration: none;
}

.shop-drop__title-link:hover {
	text-decoration: underline;
}

.shop-drop__theme {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 0.9375rem;
	color: #8a8177;
}

.shop-drop__grid,
.shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.shop-drop__empty {
	font-style: italic;
	color: #8a8177;
	font-size: 0.9375rem;
}

.shop-empty {
	font-style: italic;
	color: #8a8177;
	padding: 40px 0;
}

/* Toolbar (search + sort) */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 2px solid #000;
}

.shop-toolbar__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.shop-filter {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: #fff;
	border: 2px solid #000;
	color: #000;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shop-filter:hover {
	background: #000;
	color: #fff;
}

.shop-filter.is-active {
	background: var(--color-primary);
	border-color: #000;
	color: #000;
}

.shop-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 10px;
}

.shop-toolbar__sort-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b6355;
	white-space: nowrap;
}

.shop-toolbar__sort-select {
	padding: 12px 16px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	color: #000;
	cursor: pointer;
}

.shop-toolbar__sort-select:focus {
	outline: none;
	border-color: var(--color-primary);
}

.shop-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.shop-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
}

.shop-pagination .page-numbers li {
	display: flex;
}

.shop-pagination a.page-numbers,
.shop-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 2px solid #000;
	background: #fff;
	color: #000;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
}

.shop-pagination a.page-numbers:hover {
	background: #000;
	color: #fff;
}

.shop-pagination span.page-numbers.current {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}

.shop-pagination span.page-numbers.dots {
	border: none;
	background: none;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.shop-page {
		padding-bottom: 64px;
	}

	.shop-page__inner {
		padding: 32px 40px 0;
	}

	.shop-header {
		margin-bottom: 40px;
	}

	.shop-header__title {
		font-size: clamp(2.25rem, 5vw, 3.25rem);
	}
}

@media (max-width: 1024px) {
	.shop-drop__grid,
	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.shop-page__inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	.shop-drop__grid,
	.shop-grid {
		grid-template-columns: 1fr;
	}

	.shop-toolbar {
		justify-content: flex-start;
	}
}

/* -- Cart page -- */

.cart-page {
	background-color: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
	min-height: 60vh;
}

.cart-page__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 48px 96px;
}

.cart-page__header {
	margin-bottom: 40px;
}

.cart-page__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 16px;
}

.cart-page__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 0.95;
	text-transform: uppercase;
}

.cart-page__title-black {
	color: #000;
}

.cart-page__title-orange {
	color: var(--color-primary);
}

/* Empty state */

.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 420px;
	padding: 8px 0 64px;
}

.cart-empty__media {
	width: 100%;
	max-width: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 0.875rem;
	overflow: hidden;
}

.cart-empty__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-empty__message {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.0625rem;
	color: #3a352c;
}

/* Grid */

.cart-page__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: start;
}

/* Cart table */

.woocommerce-cart-form table.cart {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 4px solid #000;
}

.woocommerce-cart-form table.cart thead th {
	text-align: left;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a8177;
	padding: 16px;
	border-bottom: 2px solid #000;
}

.woocommerce-cart-form table.cart tbody tr.cart_item {
	border-bottom: 1px solid #e5dcc5;
}

.woocommerce-cart-form table.cart td {
	padding: 16px;
	vertical-align: middle;
}

.woocommerce-cart-form table.cart .product-thumbnail img {
	max-width: 72px;
	max-height: 72px;
	width: auto;
	height: auto;
	border: 2px solid #000;
	display: block;
}

.woocommerce-cart-form table.cart .product-name a {
	color: #000;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-cart-form table.cart .product-name a:hover {
	text-decoration: underline;
}

.woocommerce-cart-form table.cart .product-price,
.woocommerce-cart-form table.cart .product-subtotal {
	font-weight: 700;
	color: var(--color-secondary);
}

.woocommerce-cart-form table.cart .quantity .qty {
	width: 64px;
	padding: 10px;
	border: 2px solid #000;
	text-align: center;
	font-weight: 700;
	font-family: var(--font-body);
}

.woocommerce-cart-form table.cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding-bottom: 2px;
	color: #fff !important;
	background: #000;
	text-decoration: none;
	font-size: 1rem;
	border-radius: 50%;
}

.woocommerce-cart-form table.cart .product-remove a.remove:hover {
	color: #fff !important;
	background: #c0392b;
}

.woocommerce-cart-form .actions {
	padding: 20px 16px;
}

.woocommerce-cart-form .coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 16px;
}

.woocommerce-cart-form .coupon .input-text {
	flex: 1;
	width: auto;
	min-width: 180px;
	padding: 12px 14px;
	border: 2px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.woocommerce-cart-form .coupon .input-text:focus {
	outline: none;
	border-color: var(--color-primary);
}

.woocommerce-cart-form .coupon button {
	padding: 12px 20px;
	background: #fff;
	border: 2px solid #000;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.8125rem;
	cursor: pointer;
}

.woocommerce-cart-form .coupon button:hover {
	background: #000;
	color: #fff;
}

/* Quantity changes auto-submit via JS (cart-auto-update.js) instead. */
.woocommerce-cart-form button[name="update_cart"] {
	display: none;
}

/* Totals */

.cart-collaterals {
	width: 100%;
}

/* Bouillon Club: WooCommerce Subscriptions prints "Essai gratuit : X jours"
   under the product name via .woocommerce-subscriptions-product-details__trial
   — the first-payment date is already shown in the totals below, so this is
   redundant on this page. Confirmed class name (was previously guessing at
   .subscription-details, which matched nothing). !important because this
   plugin's own CSS targets the same class. */
.woocommerce-subscriptions-product-details__trial {
	display: none !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	background: #fff;
	border: 4px solid #000;
	padding: 32px 24px;
	box-sizing: border-box;
}

.cart_totals h2 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 20px;
}

.cart_totals table.shop_table {
	width: 100%;
	margin-bottom: 24px;
}

.cart_totals table.shop_table tr {
	border-bottom: 1px solid #e5dcc5;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
}

.cart_totals table.shop_table th {
	color: #6b6355;
	font-weight: 600;
}

.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
	border-top: 2px solid #000;
	border-bottom: none;
	padding-top: 16px;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--color-secondary);
	font-family: "proxima-nova-condensed", sans-serif;
}

.wc-proceed-to-checkout a.checkout-button.button.alt {
	display: block;
	width: 100%;
	text-align: center;
	padding: 16px 24px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	box-shadow: 6px 6px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
}

.wc-proceed-to-checkout a.checkout-button.button.alt:hover {
	background: var(--color-primary);
	color: #000;
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #000;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.cart-page__inner {
		padding: 32px 40px 64px;
	}

	.cart-page__header {
		margin-bottom: 24px;
	}

	.cart-page__title {
		font-size: clamp(2.25rem, 5vw, 2.75rem);
	}
}

@media (max-width: 900px) {
	.cart-page__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.cart-page__inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 700px) {
	.woocommerce-cart-form table.cart thead {
		display: none;
	}

	.woocommerce-cart-form table.cart,
	.woocommerce-cart-form table.cart tbody,
	.woocommerce-cart-form table.cart tr,
	.woocommerce-cart-form table.cart td {
		display: block;
		width: 100%;
	}

	.woocommerce-cart-form table.cart tr.cart_item {
		padding: 16px;
	}

	.woocommerce-cart-form table.cart td {
		padding: 6px 0;
		border: none;
	}

	.woocommerce-cart-form table.cart td[data-title]::before {
		content: attr(data-title) ": ";
		display: block;
		margin-bottom: 4px;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.6875rem;
		color: #8a8177;
	}
}

/* -- Checkout page -- */

.checkout-page {
	background-color: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
	min-height: 60vh;
}

.checkout-page__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 48px 96px;
}

.checkout-page__header {
	margin-bottom: 40px;
}

.checkout-page__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 16px;
}

.checkout-page__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 0.95;
	text-transform: uppercase;
}

.checkout-page__title-black {
	color: #000;
}

.checkout-page__title-orange {
	color: var(--color-primary);
}

/* Grid */

.checkout-page__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: start;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.checkout-page__inner {
		padding: 32px 40px 64px;
	}

	.checkout-page__header {
		margin-bottom: 24px;
	}

	.checkout-page__title {
		font-size: clamp(2.25rem, 5vw, 2.75rem);
	}
}

@media (max-width: 900px) {
	.checkout-page__grid {
		grid-template-columns: 1fr;
	}
}

/* Form fields */

.checkout-page .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

@media (max-width: 640px) {
	.checkout-page__inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	.checkout-page .col2-set {
		grid-template-columns: 1fr;
	}
}

.checkout-page #customer_details.col2-set {
	display: block;
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
}

.checkout-page #customer_details .col-1,
.checkout-page #customer_details .col-2 {
	float: none;
	width: 100%;
}

/* WooCommerce's own default is float:left/right + width:48% (side by side)
   — used sitewide (login/register, my account edit-address...), not just on
   the checkout page above. Stack full-width everywhere instead. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	float: none;
	width: 100%;
}

/* Coupon field — always visible, not tucked behind a notification toggle */

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: none;
	padding: 0;
	margin: 0;
}

.checkout-page__coupon {
	background: #fff;
	border: 4px solid #000;
	padding: 20px;
	margin-bottom: 32px;
}

.checkout-page form.checkout_coupon {
	display: flex !important;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.checkout-page form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
}

.checkout-page form.checkout_coupon .form-row-first {
	flex: 1;
	min-width: 200px;
}

.checkout-page form.checkout_coupon .form-row-last {
	flex: none;
}

.checkout-page form.checkout_coupon button.button {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	border: none;
	padding: 12px 24px;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s;
}

.checkout-page form.checkout_coupon button.button:hover {
	background: var(--color-primary-dark);
}

.checkout-page form.checkout_coupon .clear {
	display: none;
}

.checkout-page h3 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 20px;
}

.checkout-page .form-row {
	margin-bottom: 16px;
}

.checkout-page .form-row label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6355;
	margin-bottom: 6px;
}

.checkout-page .form-row .required {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.checkout-page input.input-text,
.checkout-page select,
.checkout-page textarea {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: #000;
}

.checkout-page input.input-text:focus,
.checkout-page select:focus,
.checkout-page textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}

.checkout-page .woocommerce-input-wrapper {
	display: block;
}

/* Billing now comes second (form-shipping.php is the primary/first block,
   form-billing.php the secondary one hidden behind a checkbox) — the top
   margin moves to whichever block is second. */
.checkout-page .woocommerce-billing-fields {
	margin-top: 24px;
}

.checkout-page #cb-billing-different {
	margin-top: 8px;
}

.checkout-page .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: #3a352c;
	text-transform: none;
	font-weight: 400;
}

/* Order review */

.checkout-page__review-card {
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	margin-bottom: 24px;
}

.checkout-page__review-heading {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 20px;
}

.checkout-page__review table.shop_table,
.checkout-page table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-radius: 0;
	border-collapse: separate;
}

.checkout-page table.woocommerce-checkout-review-order-table th,
.checkout-page table.woocommerce-checkout-review-order-table td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid #e5dcc5;
}

.checkout-page table.woocommerce-checkout-review-order-table tr.order-total th,
.checkout-page table.woocommerce-checkout-review-order-table tr.order-total td {
	border-top: 2px solid #000;
	border-bottom: none;
	padding-top: 16px;
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--color-secondary);
	font-family: "proxima-nova-condensed", sans-serif;
}

/* Payment methods */

.checkout-page #payment {
	background: none;
	border-radius: 0;
	padding: 0;
}

.checkout-page #payment ul.wc_payment_methods {
	list-style: none;
	background: #fff;
	border: 4px solid #000;
	padding: 20px;
	margin-bottom: 20px;
}

.checkout-page #payment ul.wc_payment_methods li.wc_payment_method {
	padding: 10px 0;
	border-bottom: 1px solid #e5dcc5;
}

.checkout-page #payment ul.wc_payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}

.checkout-page #payment ul.wc_payment_methods label {
	display: inline;
	text-transform: none;
	font-weight: 700;
	font-size: 0.9375rem;
	color: #000;
}

.checkout-page #payment .payment_box {
	margin-top: 12px;
	padding: 14px;
	background: var(--color-bg);
	font-size: 0.875rem;
	color: #3a352c;
}

/* Card form (WC_Payment_Gateway_CC): expiry and CVC side by side default to
   a 47%-ish float that's too narrow for the "Cryptogramme" label/placeholder
   — stack them full-width instead. */
.checkout-page #payment .payment_box .form-row-first,
.checkout-page #payment .payment_box .form-row-last {
	float: none;
	width: 100%;
}

/* WooCommerce sets the CVC input's width via an inline style="width:100px"
   attribute — override it so it fills its now full-width row. */
.checkout-page #payment .payment_box .wc-credit-card-form-card-cvc {
	width: 100% !important;
}

.checkout-page .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 20px;
	font-size: 0.875rem;
}

.checkout-page #payment .form-row.place-order {
	background: #fff;
	margin: 0;
}

#place_order {
	display: block;
	width: 100%;
	padding: 16px 24px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	cursor: pointer;
	box-shadow: 6px 6px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
}

#place_order:hover {
	background: var(--color-primary);
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #000;
}

/* Order confirmation */

.order-confirmation__number {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--color-secondary);
	text-transform: uppercase;
}

.order-confirmation__actions {
	margin-top: 40px;
}

/* Order tracking — status stepper + optional parcel info, shown on both the
   order-received page and My Account > view order */

.order-tracking {
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	margin-top: 24px;
}

.order-tracking--problem {
	background: #fff5f0;
	border: 4px solid var(--color-primary-dark);
	color: #7a1f00;
	font-weight: 700;
}

.order-tracking__heading {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 20px;
}

.order-tracking__progress {
	max-width: none;
	margin-bottom: 12px;
}

.order-tracking__steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	gap: 8px;
	margin-bottom: 8px;
}

.order-tracking__step {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #a39b8b;
}

.order-tracking__step.is-done {
	color: var(--color-secondary);
}

.order-tracking__step:last-child {
	text-align: right;
}

.order-tracking__parcel {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e5dcc5;
}

.order-tracking__parcel-label {
	font-size: 0.9375rem;
}

.order-tracking__parcel-label a {
	color: var(--color-secondary);
	font-weight: 700;
}

@media (max-width: 480px) {
	.order-tracking__steps {
		flex-direction: column;
		gap: 4px;
	}

	.order-tracking__step:last-child {
		text-align: left;
	}
}

/* Order details table + customer addresses (shown below the confirmation
   message on checkout/order-received, and on My Account > view order) */

.checkout-page .woocommerce-order-details,
.checkout-page .woocommerce-customer-details,
.account-page .woocommerce-order-details,
.account-page .woocommerce-customer-details {
	margin-top: 40px;
	max-width: 720px;
}

.checkout-page .woocommerce-order-details__title,
.checkout-page .woocommerce-column__title,
.account-page .woocommerce-order-details__title,
.account-page .woocommerce-column__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 16px;
}

.checkout-page table.woocommerce-table--order-details,
.account-page table.woocommerce-table--order-details {
	width: 100%;
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	border-collapse: separate;
	margin-bottom: 32px;
}

.checkout-page table.woocommerce-table--order-details th,
.checkout-page table.woocommerce-table--order-details td,
.account-page table.woocommerce-table--order-details th,
.account-page table.woocommerce-table--order-details td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid #e5dcc5;
}

.checkout-page .woocommerce-customer-details,
.account-page .woocommerce-customer-details {
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
}

.checkout-page .woocommerce-columns--addresses,
.account-page .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.checkout-page address,
.account-page address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #3a352c;
}

/* Related subscriptions table — WC Subscriptions injects this itself, inside
   .woocommerce-order-details, via the same woocommerce_order_details_after_
   order_table hook cb_order_tracking_status() (inc/order-tracking.php) uses
   for the tracker right after it. Comes with no styling of its own; matched
   to the order-details table right above it rather than left unstyled.
   Scoped to inside .woocommerce-order-details specifically (not every
   .woocommerce-orders-table--subscriptions) so the separate My Account >
   Abonnements tab table isn't affected — not asked for, and its own table
   isn't wrapped in this same "header immediately before it" markup anyway. */

.checkout-page .woocommerce-order-details header:has(+ table.woocommerce-orders-table--subscriptions),
.account-page .woocommerce-order-details header:has(+ table.woocommerce-orders-table--subscriptions) {
	margin: 32px 0 16px;
}

.checkout-page .woocommerce-order-details header:has(+ table.woocommerce-orders-table--subscriptions) h2,
.account-page .woocommerce-order-details header:has(+ table.woocommerce-orders-table--subscriptions) h2 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin: 0;
}

.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions,
.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions {
	width: 100%;
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	border-collapse: separate;
	margin-bottom: 32px;
}

.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions th,
.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions td,
.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions th,
.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid #e5dcc5;
}

.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions a.button,
.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions a.button {
	display: inline-block;
	padding: 6px 16px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 2px solid #000;
	box-shadow: 3px 3px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
}

.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions a.button:hover,
.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions a.button:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 #000;
}

/* Same row-per-block responsive treatment as .account-orders-table
   (My Account > Commandes) below — this table has 5 columns too, so it
   needs the same stacking, not just the account-orders-table one. */
@media (max-width: 768px) {
	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions thead,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions thead {
		display: none;
	}

	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody tr,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody tr {
		display: block;
		padding: 20px 0;
		border-bottom: 1px solid #e5dcc5;
	}

	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody tr:last-child,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody tr:last-child {
		border-bottom: none;
	}

	/* table....shop_table_responsive tbody tr td::before, not just
	   table....subscriptions td::before: WooCommerce's own
	   ".woocommerce table.shop_table_responsive tr td::before" outranks a
	   shorter selector here — same issue already worked around below for
	   .account-orders-table. */
	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody td,
	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody th,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody td,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody th {
		display: block;
		padding: 6px 0;
		border-bottom: none;
		text-align: right;
	}

	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody tr td::before,
	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody tr th::before,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody tr td::before,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions.shop_table_responsive tbody tr th::before {
		content: attr(data-title) " ";
		float: left;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #a39b8b;
	}

	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody td.woocommerce-orders-table__cell-order-actions,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody td.woocommerce-orders-table__cell-order-actions {
		text-align: left;
		padding-top: 12px;
	}

	.checkout-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody td.woocommerce-orders-table__cell-order-actions::before,
	.account-page .woocommerce-order-details table.woocommerce-orders-table--subscriptions tbody td.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}
}

/* My Account > view a single subscription (myaccount/view-subscription.php,
   WC Subscriptions' own template — no .woocommerce-order-details wrapper
   here at all, its 3 tables/headings sit directly in
   .woocommerce-MyAccount-content instead). ">" (direct child) on the
   headings and table.order_details specifically: .order_details is the same
   class the regular order-details page's table carries too, and without
   ">" these rules would also catch that one (nested a level deeper, inside
   .woocommerce-order-details) — harmless in practice since the values match,
   but ">" keeps this section scoped to only what's actually on this page. */

.account-page .woocommerce-MyAccount-content table.subscription_details {
	width: 100%;
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	border-collapse: separate;
	margin-bottom: 32px;
}

.account-page .woocommerce-MyAccount-content table.subscription_details td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid #e5dcc5;
	vertical-align: top;
}

.account-page .woocommerce-MyAccount-content table.subscription_details tr:last-child td {
	border-bottom: none;
}

.account-page .woocommerce-MyAccount-content table.subscription_details td:first-child {
	font-weight: 700;
	width: 220px;
}

.account-page .woocommerce-MyAccount-content > h2:has(+ table.order_details) {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin: 0 0 16px;
}

.account-page .woocommerce-MyAccount-content > table.order_details {
	width: 100%;
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	border-collapse: separate;
	margin-bottom: 32px;
}

.account-page .woocommerce-MyAccount-content > table.order_details th,
.account-page .woocommerce-MyAccount-content > table.order_details td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid #e5dcc5;
}

.account-page .woocommerce-MyAccount-content > header:has(+ table.woocommerce-orders-table--orders) {
	margin: 32px 0 16px;
}

.account-page .woocommerce-MyAccount-content > header:has(+ table.woocommerce-orders-table--orders) h2 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin: 0;
}

.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders {
	width: 100%;
	background: #fff;
	border: 4px solid #000;
	padding: 24px;
	border-collapse: separate;
	margin-bottom: 32px;
}

.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders th,
.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders td {
	padding: 12px 8px;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid #e5dcc5;
}

.account-page .woocommerce-MyAccount-content table.subscription_details a.button,
.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders a.button {
	display: inline-block;
	padding: 6px 16px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 2px solid #000;
	box-shadow: 3px 3px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
	margin: 0 8px 8px 0;
}

.account-page .woocommerce-MyAccount-content table.subscription_details a.button:hover,
.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders a.button:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 #000;
}

/* "Commandes associées" table has 5 columns, same row-per-block stacking as
   the related-subscriptions table above and .account-orders-table below. */
@media (max-width: 768px) {
	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders thead {
		display: none;
	}

	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders tbody tr {
		display: block;
		padding: 20px 0;
		border-bottom: 1px solid #e5dcc5;
	}

	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders tbody tr:last-child {
		border-bottom: none;
	}

	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders.shop_table_responsive tbody td,
	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders.shop_table_responsive tbody th {
		display: block;
		padding: 6px 0;
		border-bottom: none;
		text-align: right;
	}

	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders.shop_table_responsive tbody tr td::before,
	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders.shop_table_responsive tbody tr th::before {
		content: attr(data-title) " ";
		float: left;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #a39b8b;
	}

	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders tbody td.woocommerce-orders-table__cell-order-actions {
		text-align: left;
		padding-top: 12px;
	}

	.account-page .woocommerce-MyAccount-content table.woocommerce-orders-table--orders tbody td.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}
}

/* My Account > view order also shows customer-visible order notes
   ("Order updates", myaccount/view-order.php) — no equivalent on the
   checkout/order-received page, so this is account-page only. Scoped to the
   heading right before that notes list (:has(+ ...)) rather than every h2 in
   .woocommerce-MyAccount-content — that generic form was also catching the
   "Adresse de facturation/livraison" headings on My Account > Adresses. */

.account-page .woocommerce-MyAccount-content h2:has(+ .woocommerce-OrderUpdates) {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin: 40px 0 16px;
}

.woocommerce-OrderUpdates {
	list-style: none;
}

.woocommerce-OrderUpdate {
	background: #fff;
	border: 4px solid #000;
	padding: 16px 20px;
	margin-bottom: 16px;
}

.woocommerce-OrderUpdate-meta {
	font-size: 0.8125rem;
	font-weight: 700;
	color: #a39b8b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}

.woocommerce-OrderUpdate-description p {
	margin: 0;
}

/* -- FOOTER -- */

#newsletter {
	scroll-margin-top: 88px;
}

.site-footer {
	position: relative;
	background-color: #1A1410;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.035),
		rgba(255, 255, 255, 0.035) 1px,
		transparent 1px,
		transparent 14px
	);
	color: #fff;
}

.site-footer__mountains {
	line-height: 0;
}

.site-footer__mountains-svg {
	width: 100%;
	height: auto;
	display: block;
}

.site-footer__mountains-svg polygon {
	fill: #2b2119;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 48px 64px;
}

.site-footer__logo {
	display: inline-block;
	margin-bottom: 16px;
}

.site-footer__logo-img {
	display: block;
	width: 315px;
	height: auto;
	animation: float 4s ease-in-out infinite;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-6px) rotate(1deg);
	}
}

.site-footer__baseline {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #c9c2b8;
	margin-bottom: 24px;
	max-width: 440px;
}

.site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.site-footer__social-link {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 700;
	font-size: 0.875rem;
}

.site-footer__social-link:hover {
	color: var(--color-primary-dark);
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.site-footer__nav a {
	color: #8a8177;
	text-decoration: none;
	font-size: 0.8125rem;
}

.site-footer__nav a:hover {
	color: #c9c2b8;
}

.site-footer__newsletter-label {
	display: block;
	color: var(--color-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.site-footer__newsletter-title {
	display: flex;
	flex-direction: column;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}

.site-footer__newsletter-text {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #c9c2b8;
	margin-bottom: 20px;
	max-width: 380px;
}

.newsletter-form {
	display: flex;
	max-width: 380px;
}

.newsletter-form__input {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	background: #241c15;
	border: 1px solid #4a4033;
	color: #fff;
	font-size: 0.9375rem;
	font-family: var(--font-body);
}

.newsletter-form__input::placeholder {
	color: #7a7263;
}

.newsletter-form__input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.newsletter-form__submit {
	padding: 14px 24px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 4px 4px 0 #000;
	transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.newsletter-form__submit:hover {
	background: var(--color-primary-dark);
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #000;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 48px;
	border-top: 1px solid #332a20;
}

.site-footer__copyright {
	color: #8a8177;
	font-size: 0.75rem;
}

.site-footer__legal {
	display: flex;
	gap: 20px;
}

.site-footer__legal a {
	color: #8a8177;
	font-size: 0.75rem;
	text-decoration: none;
}

.site-footer__legal a:hover {
	color: #c9c2b8;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.site-footer__inner {
		gap: 40px;
		padding: 48px 48px 56px;
	}

	.site-footer__logo-img {
		width: 240px;
	}
}

@media (max-width: 900px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 48px 24px;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 24px;
	}

	.newsletter-form {
		max-width: none;
	}
}

/* ===== PAGE À PROPOS ===== */

.apropos-hero {
	padding: 120px 48px 96px;
	text-align: center;
	background: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
}

.apropos-hero__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	line-height: 0.95;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.apropos-hero__title-black {
	color: #000;
}

/* -- Section 2 : texte principal -- */

.apropos-content {
	background: #fff;
	padding: 96px 48px;
}

.apropos-content__inner {
	max-width: 900px;
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #3a352c;
}

.apropos-content__inner p {
	margin-bottom: 1.4em;
}

.apropos-content__inner p:last-child {
	margin-bottom: 0;
}

.apropos-content__inner a {
	color: var(--color-secondary);
}

.apropos-content__inner strong {
	color: #1a1a1a;
}

/* -- Section 3 : équipe -- */

.apropos-team {
	position: relative;
	overflow: hidden;
	padding: 96px 48px;
	text-align: center;
	background-color: #1A1410;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.035),
		rgba(255, 255, 255, 0.035) 1px,
		transparent 1px,
		transparent 14px
	);
	color: #fff;
}

.apropos-team__star {
	display: inline-flex;
	margin-bottom: 8px;
}

.apropos-team__label {
	display: block;
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: .7rem;
}

.apropos-team__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 6vw, 3.5rem);
	line-height: 0.95;
	text-transform: uppercase;
	margin-bottom: 56px;
}

.apropos-team__title-orange {
	color: var(--color-primary);
}

.apropos-team__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 40px 24px;
	max-width: 1100px;
	margin: 0 auto;
}

.apropos-team__card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.apropos-team__card:nth-child(odd) {
	transform: rotate(-2deg);
}

.apropos-team__card:nth-child(even) {
	transform: rotate(2deg);
}

.apropos-team__card:nth-child(3n) {
	transform: rotate(-1deg) translateY(8px);
}

.apropos-team__photo {
	position: relative;
	width: 100%;
	max-width: 200px;
	aspect-ratio: 3 / 4;
	background: #fff;
	border: 4px solid #000;
	box-shadow: 6px 6px 0 rgba(255, 153, 0, 0.25);
	margin-bottom: 16px;
}

.apropos-team__photo-tape {
	position: absolute;
	top: -14px;
	left: 50%;
	width: 80px;
	height: 26px;
	background: rgba(255, 153, 0, 0.9);
	transform: translateX(-50%) rotate(-4deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	z-index: 2;
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.apropos-team__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.apropos-team__name {
	font-weight: 700;
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}

.apropos-team__role {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 0.875rem;
	color: #c9c2b8;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.apropos-hero {
		padding: 88px 48px 64px;
	}

	.apropos-hero__title {
		font-size: clamp(2.25rem, 6vw, 3.5rem);
	}

	.apropos-content {
		padding: 64px 48px;
	}

	.apropos-team {
		padding: 64px 48px;
	}

	.apropos-team__title {
		font-size: clamp(2rem, 5vw, 2.5rem);
		margin-bottom: 40px;
	}
}

@media (max-width: 900px) {
	.apropos-team__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.apropos-hero {
		padding: 96px 24px 64px;
	}

	.apropos-content {
		padding: 64px 24px;
	}

	.apropos-team {
		padding: 64px 24px;
	}

	.apropos-team__grid {
		grid-template-columns: 1fr;
		max-width: 280px;
	}

	.apropos-team__card:nth-child(n) {
		transform: none;
	}
}

/* ===== PAGE NEWSLETTER ===== */

.nl-hero {
	position: relative;
	overflow: hidden;
	padding: 120px 48px 96px;
	text-align: center;
	background-color: #1A1410;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.035),
		rgba(255, 255, 255, 0.035) 1px,
		transparent 1px,
		transparent 14px
	);
}

.nl-hero__star {
	display: inline-flex;
	margin-bottom: 8px;
}

.nl-hero__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 7vw, 5rem);
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	max-width: 720px;
	margin: 0 auto 20px;
}

.nl-hero__title-word:nth-child(4) {
	color: var(--color-primary);
}

.nl-hero__subtitle {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.0625rem;
	color: #c9c2b8;
}

/* -- Section 2 : contenu -- */

.nl-content {
	background: #fff;
	padding: 96px 48px;
	text-align: center;
}

.nl-list {
	list-style: none;
	max-width: 480px;
	margin: 0 auto 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}

.nl-list__item {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.125rem;
	color: #3a352c;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.nl-list__bullet {
	color: var(--color-primary-dark);
	flex-shrink: 0;
}

.nl-conclusion {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	max-width: 560px;
	margin: 0 auto;
}

/* -- Section 3 : inscription (imbriquée dans .nl-content) -- */

.nl-form-section {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.nl-form {
	width: 100%;
}

/* -- Section 4 : ils sont déjà passés dans la newsletter -- */

.nl-guests {
	background: var(--color-bg);
	padding: 96px 48px 112px;
	text-align: center;
}

.nl-guests__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.1875rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #1a1a1a;
	margin-bottom: 40px;
}

.nl-guests__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 14px;
	max-width: 760px;
	margin: 0 auto;
}

.nl-guests__badge {
	display: inline-block;
	background: #f7f2e9;
	border: 2px solid #000;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 0.875rem;
	color: #1a1a1a;
}

.nl-guests__badge:nth-child(odd) {
	transform: rotate(-2deg);
}

.nl-guests__badge:nth-child(even) {
	transform: rotate(2deg);
}

.nl-guests__badge:nth-child(3n) {
	transform: rotate(-1deg);
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.nl-hero {
		padding: 88px 48px 64px;
	}

	.nl-hero__title {
		font-size: clamp(2.25rem, 6vw, 3.25rem);
	}

	.nl-content {
		padding: 64px 48px;
	}

	.nl-guests {
		padding: 64px 48px 80px;
	}
}

@media (max-width: 640px) {
	.nl-hero {
		padding: 96px 24px 64px;
	}

	.nl-content,
	.nl-guests {
		padding: 64px 24px;
	}

	.nl-form-section {
		padding: 0 24px 64px;
	}

	.nl-list {
		margin-top: 24px;
	}

	.nl-list__item {
		font-size: 1rem;
	}

	.nl-conclusion {
		font-size: 1.25rem;
	}
}

/* ===== PAGE CONTACT ===== */

.contact-hero {
	padding: 120px 48px 96px;
	text-align: center;
	background: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
}

.contact-hero__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 7vw, 5rem);
	line-height: 1;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 20px;
}

.contact-hero__title-accent {
	color: var(--color-primary);
}

.contact-hero__subtitle {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #3a352c;
	max-width: 560px;
	margin: 0 auto;
}

/* -- Section 2 : contacts par profil -- */

.contact-profiles {
	background: #fff;
	padding: 96px 48px;
}

.contact-profiles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px 28px;
	max-width: 1200px;
	margin: 0 auto;
}

.contact-card {
	height: fit-content;
	position: relative;
	background: var(--color-bg);
	border: 4px solid #000;
}

.contact-card:nth-child(1) {
	transform: rotate(-2deg);
}

.contact-card:nth-child(2) {
	transform: rotate(1.5deg);
}

.contact-card:nth-child(3) {
	transform: rotate(-1deg);
}

.contact-card:nth-child(4) {
	grid-column: 2;
	transform: rotate(2deg);
}

.contact-card__tape {
	position: absolute;
	top: -20px;
	left: 50%;
	width: 80px;
	height: 26px;
	background: rgba(255, 153, 0, 0.9);
	transform: translateX(-50%) rotate(-4deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	z-index: 2;
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.contact-card__band {
	background: var(--color-secondary);
	color: #fff;
	font-weight: 700;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 14px 20px;
}

.contact-card__body {
	padding: 24px 20px 28px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #3a352c;
}

.contact-card__body p + p {
	margin-top: 14px;
}

.contact-card__body a {
	color: var(--color-secondary);
	font-weight: 700;
}

.contact-card__list {
	list-style: none;
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-card__list a {
	color: var(--color-secondary);
	font-weight: 700;
}

.contact-card__note {
	font-style: italic;
	font-size: 0.8125rem;
	color: #7a7263;
}

/* -- Section 3 : formulaire (même section, fond blanc) -- */

.contact-form-section__intro {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.7;
	color: #3a352c;
	text-align: center;
	max-width: 560px;
	margin: 72px auto 32px;
}

.contact-form-section__intro a {
	color: var(--color-secondary);
	font-weight: 700;
	font-style: normal;
}

.contact-form-card {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	border: 4px solid #000;
	box-shadow: 8px 8px 0 rgba(41, 0, 163, 0.12);
	padding: 40px;
}

.contact-form__notice {
	padding: 12px 16px;
	margin-bottom: 24px;
	font-weight: 700;
	font-size: 0.9375rem;
	border: 2px solid #000;
}

.contact-form__notice--success {
	background: #eaf6ec;
	color: #1a5c2a;
}

.contact-form__notice--error {
	background: #fbeaea;
	color: #8a1f1f;
}

.contact-form__notice a {
	color: inherit;
	text-decoration: underline;
}

.contact-form__honeypot {
	position: absolute;
	left: -5000px;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.contact-form__field {
	margin-bottom: 20px;
}

.contact-form__field label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6355;
	margin-bottom: 6px;
}

.contact-form__input {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: #000;
}

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

.contact-form__textarea {
	resize: vertical;
}

.contact-form__file {
	font-family: var(--font-body);
	font-size: 0.875rem;
}

.contact-form__submit {
	display: inline-block;
	margin-top: 8px;
	padding: 16px 40px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	box-shadow: 6px 6px 0 #000;
	transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.contact-form__submit:hover {
	background: var(--color-primary-dark);
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #000;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.contact-hero {
		padding: 88px 48px 64px;
	}

	.contact-hero__title {
		font-size: clamp(2.25rem, 6vw, 3.25rem);
	}

	.contact-profiles {
		padding: 96px 48px;
	}
}

@media (max-width: 900px) {
	.contact-profiles__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}

	.contact-card:nth-child(n) {
		transform: none;
	}

	.contact-card:nth-child(4) {
		grid-column: auto;
	}
}

@media (max-width: 640px) {
	.contact-hero {
		padding: 96px 24px 64px;
	}

	.contact-profiles {
		padding: 64px 24px;
	}

	.contact-form-section__intro {
		margin-top: 48px;
	}

	.contact-form-card {
		padding: 28px 20px;
	}

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

/* ===== TEMPLATE PAGE GÉNÉRIQUE (CGV, Mentions légales...) ===== */

.page-header {
	padding: 120px 48px 96px;
	text-align: center;
	background: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
}

.page-header__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1;
	text-transform: uppercase;
	color: #000;
}

.page-header__title-black {
	color: #000;
}

.page-header__title-orange {
	color: var(--color-primary);
}

.page-body {
	background: #fff;
	padding: 96px 48px;
}

.page__content {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: #3a352c;
}

.page__content h2 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.75rem;
	text-transform: uppercase;
	color: #000;
	margin: 48px 0 16px;
}

.page__content h3 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #000;
	margin: 32px 0 12px;
}

.page__content h2:first-child,
.page__content h3:first-child {
	margin-top: 0;
}

.page__content p {
	margin-bottom: 1.2em;
}

.page__content ul,
.page__content ol {
	margin: 0 0 1.2em 1.4em;
}

.page__content li {
	margin-bottom: 0.4em;
}

/* ===== PAGE 404 ===== */

.error-404__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 16px;
}

.error-404__content {
	text-align: center;
}

.error-404__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
	flex-wrap: wrap;
}

/* .page__content a (higher specificity: class + element) otherwise wins
   over .btn's own color:#fff and turns the solid button's text violet —
   the outline button is unaffected since it wants that violet anyway. */
.page__content a.btn:not(.btn--outline) {
	color: #fff;
}

.page__content a {
	color: var(--color-secondary);
	font-weight: 700;
}

.page__content strong {
	color: #1a1a1a;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.page-header {
		padding: 88px 48px 64px;
	}

	.page-header__title {
		font-size: clamp(2.25rem, 5vw, 2.75rem);
	}

	.page-body {
		padding: 64px 48px;
	}
}

@media (max-width: 640px) {
	.page-header {
		padding: 96px 24px 64px;
	}

	.page-body {
		padding: 64px 24px;
	}
}

/* ===== PAGE MON COMPTE ===== */

.account-page {
	background-color: var(--color-bg);
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(26, 26, 26, 0.04),
		rgba(26, 26, 26, 0.04) 1px,
		transparent 1px,
		transparent 28px
	);
	min-height: 60vh;
}

.account-page__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 48px 96px;
}

.account-page__header {
	margin-bottom: 40px;
}

.account-page__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-secondary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 16px;
}

.account-page__title {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 0.95;
	text-transform: uppercase;
}

.account-page__title-black {
	color: #000;
}

.account-page__title-orange {
	color: var(--color-primary);
}

.account-page__grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 900px) {
	.account-page__grid {
		grid-template-columns: 1fr;
	}
}

/* Nav — taped sticky-note block, on the left */

.account-nav {
	position: relative;
	order: 1;
	background: #fff;
	border: 4px solid #000;
	padding: 28px 24px 24px;
	transform: rotate(-1.5deg);
}

/* WooCommerce's own .woocommerce-account .woocommerce-MyAccount-navigation
   rule (float:left; width:30%) has the same specificity (2 classes) — this
   needs the .account-page__grid prefix to win on source order. */
.account-page__grid .account-nav {
	float: none;
	width: 100%;
	margin: 0;
}

.account-nav__tape {
	position: absolute;
	top: -20px;
	left: 50%;
	width: 80px;
	height: 26px;
	background: rgba(255, 153, 0, 0.9);
	transform: translateX(-50%) rotate(-4deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	z-index: 2;
	clip-path: polygon(
		0% 0%, 100% 0%,
		94% 12%, 100% 25%, 94% 37%, 100% 50%, 94% 62%, 100% 75%, 94% 87%, 100% 100%,
		0% 100%,
		6% 87%, 0% 75%, 6% 62%, 0% 50%, 6% 37%, 0% 25%, 6% 12%
	);
}

.account-nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.account-nav li a {
	display: block;
	padding: 10px 12px;
	font-weight: 700;
	font-size: 0.9375rem;
	color: #1a1a1a;
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
	transition: color 0.15s;
}

.account-nav li:last-child a {
	border-bottom: none;
}

.account-nav li.is-active a {
	color: var(--color-secondary);
}

.account-nav li a:hover {
	color: var(--color-primary-dark);
}

/* Content — classic block */

.woocommerce-MyAccount-content {
	order: 2;
	background: #fff;
	border: 4px solid #000;
	padding: 32px;
}

/* Same specificity issue as .account-nav above — WooCommerce's own rule
   (float:right; width:68%) needs a 2-class selector to win. */
.account-page__grid .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin: 0;
}

.woocommerce-MyAccount-content p {
	margin-bottom: 16px;
}

.woocommerce-MyAccount-content a {
	color: var(--color-secondary);
}

/* Same specificity fix as on 404.php — .woocommerce-MyAccount-content a
   (class + element) otherwise beats .btn's own color:#fff. */
.woocommerce-MyAccount-content a.btn {
	color: #fff;
}

.woocommerce-MyAccount-content mark {
	background: none;
	font-weight: 700;
	color: inherit;
}

/* Orders list (My Account > Commandes) — myaccount/orders.php */

.account-orders-table {
	width: 100%;
	border-collapse: collapse;
}

/* .account-orders-table.shop_table_responsive, not just .account-orders-table:
   WooCommerce's own ".woocommerce table.my_account_orders td, th" rule
   (2 classes) otherwise beats a single-class selector here and its
   padding: 4px 8px wins instead of ours. */
.account-orders-table.shop_table_responsive thead th {
	text-align: left;
	padding: 14px 16px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #a39b8b;
	border-bottom: 2px solid #000;
}

.account-orders-table.shop_table_responsive tbody td,
.account-orders-table.shop_table_responsive tbody th {
	padding: 20px 16px;
	font-size: 0.9375rem;
	font-weight: 400;
	text-align: left;
	border-bottom: 1px solid #e5dcc5;
	vertical-align: middle;
}

.account-orders-table.shop_table_responsive tbody tr:last-child td,
.account-orders-table.shop_table_responsive tbody tr:last-child th {
	border-bottom: none;
}

.account-orders-table .woocommerce-orders-table__cell-order-number a {
	font-weight: 700;
	color: #000;
}

.account-orders-table a.button {
	display: inline-block;
	padding: 8px 20px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 2px solid #000;
	box-shadow: 3px 3px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
}

.account-orders-table a.button:hover {
	background: var(--color-primary);
	color: #000;
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 #000;
}

@media (max-width: 768px) {
	.account-orders-table thead {
		display: none;
	}

	.account-orders-table tbody tr {
		display: block;
		padding: 20px 0;
		border-bottom: 1px solid #e5dcc5;
	}

	/* block, not flex: an order-total cell like "76,00 € pour 1 article" mixes
	   a <span> price and a trailing text node — flex would treat those as two
	   items and space them apart. A floated label leaves the value's own
	   inline content to wrap normally on the right. */
	table.account-orders-table.shop_table_responsive tbody td,
	table.account-orders-table.shop_table_responsive tbody th {
		display: block;
		padding: 6px 0;
		border-bottom: none;
		text-align: right;
	}

	/* table.....shop_table_responsive tbody tr td::before, not just
	   .account-orders-table td::before: WooCommerce's own
	   ".woocommerce table.shop_table_responsive tr td::before" (which prints
	   its own "Label: " and floats it) is more specific than a 1-class,
	   3-element selector — it was winning and pushing our value flush
	   against the label instead of onto its own line/edge. */
	table.account-orders-table.shop_table_responsive tbody tr td::before,
	table.account-orders-table.shop_table_responsive tbody tr th::before {
		content: attr(data-title) " ";
		float: left;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #a39b8b;
	}

	.account-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
		text-align: left;
		padding-top: 12px;
	}

	.account-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}
}

.account-orders-empty {
	text-align: center;
	padding: 24px 0;
}

.account-orders-empty__message {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.0625rem;
	color: #3a352c;
	margin-bottom: 24px;
}

/* Login / register (logged-out /mon-compte/) — myaccount/form-login.php.
   Not wrapped by .account-page__grid: WooCommerce only renders that around
   the dashboard once logged in, so this is styled on its own. */

.account-page #customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.account-page #customer_login {
		grid-template-columns: 1fr;
	}
}

.account-page .u-column1,
.account-page .u-column2 {
	background: #fff;
	border: 4px solid #000;
	padding: 32px;
}

/* My Account > Adresses — myaccount/my-address.php. .u-column1/.u-column2
   are shared with #customer_login above, which is why the block styling
   lives there — this is just what's specific to the addresses page. */

.account-page .woocommerce-Address-title h2 {
	margin-top: 0;
}

.account-page .woocommerce-Address + .woocommerce-Address {
	margin-top: 32px;
}

/* Explicit placement — auto-placement was inexplicably sending these two
   items to different rows instead of side by side on row 1. */
.account-page .u-column1 {
	grid-column: 1;
	grid-row: 1;
}

.account-page .u-column2 {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 900px) {
	.account-page .u-column1,
	.account-page .u-column2 {
		grid-column: 1;
	}

	.account-page .u-column2 {
		grid-row: 2;
	}
}

.account-page #customer_login h2 {
	font-family: "proxima-nova-condensed", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 24px;
}

.account-page #customer_login .form-row {
	margin-bottom: 16px;
}

.account-page #customer_login .form-row label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6355;
	margin-bottom: 6px;
}

.account-page #customer_login .form-row .required {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.account-page #customer_login input.input-text {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: #000;
}

.account-page #customer_login input.input-text:focus {
	outline: none;
	border-color: var(--color-primary);
}

.account-page .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: #3a352c;
	text-transform: none;
	font-weight: 400;
	margin-bottom: 0;
}

.account-page #customer_login .woocommerce-button {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 14px 24px;
	background: var(--color-primary);
	color: #000;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	cursor: pointer;
	box-shadow: 6px 6px 0 #000;
	transition: transform 0.15s, box-shadow 0.15s;
}

.account-page #customer_login .woocommerce-button:hover {
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #000;
}

.account-page .woocommerce-LostPassword {
	margin-top: 16px;
	font-size: 0.875rem;
}

.account-page .woocommerce-LostPassword a {
	color: var(--color-secondary);
}

.account-page #customer_login p:not(.form-row):not(.woocommerce-LostPassword) {
	font-size: 0.875rem;
	color: #3a352c;
	margin-bottom: 16px;
}

/* "Laptop" tier — see the matching comment above .hero's own 1500px block. */
@media (max-width: 1680px) {
	.account-page__inner {
		padding: 32px 40px 64px;
	}

	.account-page__header {
		margin-bottom: 24px;
	}

	.account-page__title {
		font-size: clamp(2.25rem, 5vw, 2.75rem);
	}
}

@media (max-width: 640px) {
	.account-page__inner {
		padding: 32px 24px 64px;
	}

	.account-nav {
		transform: none;
	}

	.account-page .u-column1,
	.account-page .u-column2 {
		padding: 24px;
	}
}