/* ==========================================================================
   Thème WãJI — styles principaux
   Transposition fidèle de la maquette v3 : maison en noir #0A0A0A / Jost,
   identité Jacintex en violet #3A2174, motif jacinthe, Melodrama + Outfit.
   ========================================================================== */

:root {
	--noir: #0A0A0A;
	--blanc: #FFFFFF;
	--creme: #EDEDEB;
	--fond-doux: #F4F4F2;
	--bord: #E6E6E6;
	--bord-sombre: #232323;
	--bord-form: #D8D8D4;
	--gris-40: #9E9E9E;
	--gris-50: #7C7C7C;
	--gris-60: #6E6E6E;
	--gris-70: #4A4A4A;
	--gris-clair: #C9C9C9;
	--vert: #1B3A2A;            /* états succès (stock, notices) */
	--violet: #3A2174;          /* identité Jacintex */
	--violet-clair: #7D72D2;    /* étiquettes Jacintex sur fond sombre */
	--sans: 'Jost', system-ui, -apple-system, sans-serif;
	--sans-jx: 'Outfit', system-ui, -apple-system, sans-serif;
	--serif: 'Melodrama', Georgia, serif;
	--motif-jx: url("../img/jacintex-motif.png");
	--picto-jx: url("../img/jacintex-picto.png");
	--pad-x: 40px;
	/* --largeur-site: 1440px; */
}

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

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

body {
	margin: 0;
	background: var(--noir);
	color: var(--noir);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--gris-60); }

button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

::selection { background: var(--noir); color: var(--blanc); }

h1, h2, h3, h4, p, ul, figure { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--blanc);
	padding: 12px 20px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ── Cadre du site ────────────────────────────────────────────────────── */
.site {
	max-width: var(--largeur-site);
	margin: 0 auto;
	background: var(--blanc);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main { flex: 1; }

.container-x { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ── Utilitaires typographiques ───────────────────────────────────────── */
.kicker {
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gris-40);
	margin-bottom: 26px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.kicker--light { color: var(--gris-40); }
/* Pictogramme jacinthe (identité Jacintex) à la place de l'ancien carré vert. */
.kicker .dot, .nav-dot {
	width: 15px; height: 15px;
	background: var(--picto-jx) center / contain no-repeat;
	display: inline-block;
	flex: none;
}
.kicker--light .dot { filter: invert(1); }
.kicker__sep { color: var(--gris-40); }

.label-lg {
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 400;
}

.h-display {
	font-size: clamp(46px, 8.2vw, 104px);
	line-height: .92;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.h-display--md { font-size: clamp(42px, 7vw, 88px); line-height: .95; }
.h-display--sm { font-size: clamp(36px, 5.2vw, 64px); line-height: .98; }

.serif-title {
	font-family: var(--serif);
	font-size: clamp(38px, 4.5vw, 58px);
	line-height: 1.08;
	font-weight: 400;
}
.serif-title--md { font-size: clamp(30px, 3.4vw, 42px); }
.serif-title--page { font-size: clamp(34px, 4.5vw, 58px); line-height: 1.1; max-width: 900px; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn {
	display: inline-block;
	padding: 18px 32px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	transition: opacity .18s ease, background .18s ease, color .18s ease;
}
.btn--dark { background: var(--noir); color: var(--blanc); }
.btn--dark:hover { color: var(--blanc); opacity: .82; }
.btn--jacintex { background: var(--violet); color: var(--blanc); }
.btn--jacintex:hover { color: var(--blanc); opacity: .85; }
.btn--outline { border: 1px solid var(--noir); color: var(--noir); }
.btn--outline:hover { background: var(--noir); color: var(--blanc); }
.btn--light { background: var(--blanc); color: var(--noir); }
.btn--light:hover { color: var(--noir); opacity: .85; }
.btn--ghost-light { border: 1px solid rgba(255,255,255,.4); color: var(--blanc); }
.btn--ghost-light:hover { border-color: var(--blanc); color: var(--blanc); }

.btn-underline {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--gris-70);
	padding-bottom: 4px;
	color: inherit;
}
.btn-underline--muted { color: var(--gris-40); }

/* ── Emplacements média ───────────────────────────────────────────────── */
.media-slot {
	position: relative;
	background: var(--creme);
	overflow: hidden;
	display: block;
}
.media-slot img, .media-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #B4B4B0;
}
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.media-caption {
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-40);
}

/* ── Entête ───────────────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	min-height: 72px;
	display: flex;
	align-items: center;
	padding: 0 var(--pad-x);
	gap: 40px;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

.site-logo, .custom-logo-link {
	font-size: 20px;
	letter-spacing: .34em;
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
}
.custom-logo { max-height: 44px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 26px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.site-nav__list a { display: flex; align-items: center; gap: 7px; }
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { border-bottom: 1px solid var(--noir); padding-bottom: 3px; }
.site-nav__list .labo > a::before {
	content: "";
	width: 16px; height: 16px;
	background: var(--picto-jx) center / contain no-repeat;
	display: inline-block;
	flex: none;
}
body.nav-open .site-nav__list .labo > a::before { filter: invert(1); }

.site-header__tools {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.lang-switcher ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 7px; color: var(--gris-40); }
.lang-switcher .current-lang a { color: var(--noir); }
.cart-link { white-space: nowrap; }

.nav-toggle { display: none; }

/* Menu mobile */
@media (max-width: 1023px) {
	.site-header { gap: 20px; min-height: 60px; }
	/* Logo et outils au-dessus de l'overlay du menu. */
	.site-header__brand, .site-header__tools { position: relative; z-index: 45; }
	.nav-toggle { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
	.nav-toggle__close { display: none; }
	body.nav-open .nav-toggle__open { display: none; }
	body.nav-open .nav-toggle__close { display: inline; }
	.site-nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 40;
		background: var(--noir);
		color: var(--blanc);
		padding: 120px var(--pad-x) 60px;
		overflow-y: auto;
	}
	body.nav-open .site-nav { display: block; }
	body.nav-open { overflow: hidden; }
	/* backdrop-filter créerait un bloc conteneur qui piégerait l'overlay fixe. */
	body.nav-open .site-header {
		background: var(--noir);
		color: var(--blanc);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	body.nav-open .site-header a, body.nav-open .site-header button { color: var(--blanc); }
	.site-nav__list { flex-direction: column; gap: 24px; font-size: 16px; letter-spacing: .22em; }
	.site-nav__list .current-menu-item > a { border-bottom-color: var(--blanc); }
}

/* ── Héros de l'accueil ───────────────────────────────────────────────── */
.hero { position: relative; }
.hero__media { height: min(820px, 92vh); }
.hero__overlay {
	position: absolute;
	left: var(--pad-x); right: var(--pad-x); bottom: 40px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	color: var(--blanc);
	mix-blend-mode: difference;
}
.hero__kicker {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.hero__title {
	font-size: clamp(52px, 9vw, 112px);
	line-height: .92;
	letter-spacing: -.01em;
	font-weight: 200;
	text-transform: uppercase;
}
.hero__link {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding-bottom: 10px;
	white-space: nowrap;
	color: var(--blanc);
}
.hero__link:hover { color: var(--blanc); opacity: .75; }

/* ── Listes indexées (collections, matières) ──────────────────────────── */
.index-list { border-bottom: 1px solid var(--bord); }
.index-list__row {
	width: 100%;
	text-align: left;
	padding: 34px 0;
	border-top: 1px solid var(--bord);
	display: grid;
	grid-template-columns: 64px 1fr 220px 130px;
	gap: 32px;
	align-items: baseline;
}
.index-list__num { font-size: 11px; letter-spacing: .16em; color: var(--gris-40); }
.index-list__name {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: -.005em;
}
.index-list__name--sm { font-size: clamp(26px, 3vw, 38px); }
.index-list__note { font-size: 13px; color: var(--gris-60); font-weight: 300; }
.index-list__count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-align: right; }
.index-list__body { font-size: 16px; line-height: 1.8; color: var(--gris-70); font-weight: 300; }

.index-list--detail .index-list__row {
	grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr);
	gap: 40px;
	padding: 44px 0;
	align-items: start;
}
.index-list--detail { border-bottom: 0; }

/* ── Vitrine accueil ──────────────────────────────────────────────────── */
.showcase {
	padding-top: 80px;
	display: grid;
	grid-template-columns: minmax(0,7fr) minmax(0,5fr);
	gap: 24px;
	align-items: end;
}

/* ── Manifeste ────────────────────────────────────────────────────────── */
.manifesto { padding-top: 130px; padding-bottom: 130px; max-width: 1180px; }
.manifesto p {
	font-size: clamp(22px, 2.4vw, 31px);
	line-height: 1.5;
	font-weight: 200;
	text-wrap: pretty;
}
.manifesto p + p { margin-top: 1em; }

/* ── Bloc sombre (Jacintex / Maison) ──────────────────────────────────── */
.dark-block {
	background: var(--noir);
	color: var(--blanc);
	padding: 100px var(--pad-x) 90px;
}
/* Bloc Jacintex de l'accueil : typographie Outfit (charte du laboratoire). */
.dark-block--jacintex { font-family: var(--sans-jx); }
.dark-block__head {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 60px;
	align-items: end;
}
.dark-block__text {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--gris-clair);
	max-width: 520px;
}
.dark-block__links { display: flex; gap: 24px; flex-wrap: wrap; }
.dark-block a:hover { color: var(--blanc); opacity: .8; }

.dark-block--center {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 80px;
	align-items: center;
	padding: 120px var(--pad-x);
}
.dark-block__word {
	font-size: clamp(56px, 7.5vw, 96px);
	line-height: .95;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.dark-block__quote {
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.6;
	font-weight: 200;
	text-wrap: pretty;
}

.pillars {
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1px;
	background: var(--bord-sombre);
}
.pillar {
	background: var(--noir);
	text-align: left;
	padding: 36px 32px 40px;
	display: block;
}
.pillar:hover { color: inherit; }
.pillar__tag {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--violet-clair);
	margin-bottom: 22px;
}
.pillar__title { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 16px; color: var(--blanc); }
.pillar__text { font-size: 14px; line-height: 1.8; color: var(--gris-40); font-weight: 300; }

/* ── Sections à entête ────────────────────────────────────────────────── */
.section-head {
	padding-top: 110px;
	padding-bottom: 40px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
}
.section-head__title { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
.section-head__link { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-60); }

/* ── Grille produits (accueil) ────────────────────────────────────────── */
.product-grid { display: grid; gap: 24px; padding-bottom: 130px; }
.product-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.product-card { display: block; }
.product-card .media-slot { margin-bottom: 16px; }
.product-card__name { font-size: 15px; font-weight: 400; margin-bottom: 6px; color: var(--noir); }
.product-card__price { font-size: 13px; color: var(--gris-60); font-weight: 300; }
.product-card:hover { color: inherit; }
.product-card:hover img { opacity: .92; }

/* ── Journal ──────────────────────────────────────────────────────────── */
.journal-section { padding-bottom: 130px; }
.journal-section .label-lg { margin-bottom: 26px; display: block; }
.journal-section--page { padding-bottom: 90px; }
.journal-row {
	border-top: 1px solid var(--bord);
	padding: 24px 0;
	display: grid;
	grid-template-columns: 120px 1fr 140px;
	gap: 32px;
	align-items: baseline;
}
.journal-list .journal-row:last-child { border-bottom: 1px solid var(--bord); }
.journal-row__date { font-size: 12px; color: var(--gris-40); }
.journal-row__title { font-size: 21px; font-weight: 300; }
.journal-row__tag {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-40);
	text-align: right;
}

/* ── Entêtes de pages ─────────────────────────────────────────────────── */
.page-head { padding-top: 90px; padding-bottom: 50px; }
.page-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.page-head__aside {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-40);
	text-align: right;
}
.page-head__intro { margin-top: 40px; max-width: 820px; }
.page-head__intro p {
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.6;
	font-weight: 200;
	text-wrap: pretty;
}
.page-head__intro p + p { margin-top: 1em; }
.page-head--ruled { padding-top: 100px; padding-bottom: 70px; border-bottom: 1px solid var(--bord); }
.page-head--ruled .kicker { color: var(--gris-60); }
.page-head--shop { padding-bottom: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.page-head__meta { font-size: 12px; color: var(--gris-60); }

/* ── Campagne ─────────────────────────────────────────────────────────── */
.campaign-visuals__full { height: min(760px, 85vh); }
.campaign-visuals__pair { display: grid; grid-template-columns: 1fr 1fr; }
.campaign-visuals__pair .media-slot { height: min(640px, 72vh); }

.quote-block { padding-top: 110px; padding-bottom: 110px; max-width: 900px; }
.quote-block p {
	font-size: clamp(21px, 2.3vw, 29px);
	line-height: 1.5;
	font-weight: 200;
	text-wrap: pretty;
}

/* ── Galerie filtrable ────────────────────────────────────────────────── */
.gallery-section { padding-bottom: 130px; }
.gallery-filter-bar {
	border-top: 1px solid var(--bord);
	padding-top: 60px;
	padding-bottom: 24px;
	display: flex;
	gap: 26px;
	align-items: baseline;
	flex-wrap: wrap;
}
.gallery-filter-bar .label-lg { margin-right: 10px; }
.gallery-filter-bar__note {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
}
.filter-chips { display: flex; gap: 26px; flex-wrap: wrap; }
.filter-chip {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
}
.filter-chip.is-active { color: var(--noir); border-bottom-color: var(--noir); }
.filter-chip:hover { color: var(--noir); }

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 8px;
}
.gallery-item__media { aspect-ratio: 1 / 1; }
.gallery-item--large { grid-column: span 2; }
.gallery-item--large .gallery-item__media { aspect-ratio: 2 / 1; }
.gallery-item.is-hidden { display: none; }
.gallery-item__play {
	position: absolute;
	left: 14px; bottom: 14px;
	background: var(--blanc);
	color: var(--noir);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 8px 12px;
}

/* ── Bandeaux photo & duo ─────────────────────────────────────────────── */
.photo-band { position: relative; height: min(620px, 70vh); background: var(--creme); overflow: hidden; }
.photo-band--short { height: min(420px, 55vh); }
/* Recadrage zoomé (comme la maquette) : masque le texte incrusté des visuels. */
.photo-band--default-tissage {
	background-image: url("../img/defaut-tissage.jpg");
	background-size: auto 300%;
	background-position: center 12%;
}
.photo-band--default-tampon {
	background-image: url("../img/defaut-tampon.jpg");
	background-size: auto 300%;
	background-position: center 82%;
}

.photo-duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: 80px; }
.photo-duo .media-slot { height: min(560px, 64vh); }

.wide-cta {
	width: 100%;
	text-align: left;
	padding: 100px var(--pad-x);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 40px;
}
.wide-cta__label { font-size: clamp(26px, 3.2vw, 40px); font-weight: 200; text-transform: uppercase; }
.wide-cta__sub {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-60);
	white-space: nowrap;
}

/* ── Maison ───────────────────────────────────────────────────────────── */
.two-cols {
	padding-bottom: 110px;
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 80px;
}
.lead-text p, p.lead-text {
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.7;
	font-weight: 200;
	text-wrap: pretty;
}
.lead-text p + p { margin-top: 1em; }

.values-strip {
	padding-top: 90px;
	padding-bottom: 110px;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris-60);
}

/* ── Jacintex ─────────────────────────────────────────────────────────── */
/* Pages du laboratoire : typographie Outfit sur tout le contenu. */
.waji-page-jacintex .site-main,
.waji-page-impact .site-main { font-family: var(--sans-jx); }

.green-hero {
	background-color: var(--violet);
	background-image: var(--motif-jx);
	background-size: 196px 196px;
	background-repeat: repeat;
	color: var(--blanc);
	padding: 100px var(--pad-x) 90px;
}
.green-hero__logo {
	height: clamp(72px, 9vw, 118px);
	width: auto;
	display: block;
	margin: 0 0 34px;
}
.img-invert { filter: invert(1); }
.green-hero__kicker {
	display: inline-block;
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 30px;
	color: var(--blanc);
}
.green-hero__kicker:hover { color: var(--blanc); opacity: 1; }
.green-hero__title {
	font-family: var(--serif);
	font-size: clamp(48px, 6.5vw, 82px);
	line-height: 1;
	font-weight: 400;
	margin-bottom: 26px;
}
.green-hero__intro {
	margin-bottom: 60px;
	font-size: clamp(18px, 1.9vw, 22px);
	line-height: 1.6;
	font-weight: 300;
	max-width: 820px;
	text-wrap: pretty;
}
.green-hero__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 56px;
	max-width: 1180px;
}
.green-hero__col-title {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 14px;
}
.green-hero__col-text { font-size: 16px; line-height: 1.8; font-weight: 300; opacity: .92; }

.methodo { padding-top: 100px; padding-bottom: 120px; }
.methodo__sub { margin: 10px 0 60px; font-size: 15px; color: var(--gris-60); }
.methodo__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 28px;
}
.methodo-step .media-slot { margin-bottom: 22px; }
.methodo-step__num {
	font-family: var(--serif);
	font-size: 32px;
	color: var(--violet);
	line-height: 1;
	margin-bottom: 14px;
}
.methodo-step__title {
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 14px;
}
.methodo-step__items {
	margin: 0;
	padding-left: 16px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--gris-70);
	font-weight: 300;
}
.methodo-step__items li { margin-bottom: 6px; }

.research-cta { padding-bottom: 120px; }
.research-cta__inner {
	border-top: 1px solid var(--bord);
	padding-top: 60px;
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 60px;
	align-items: end;
}
.research-cta .kicker { color: var(--gris-60); margin-bottom: 20px; }
.research-cta__text {
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.6;
	font-weight: 200;
	text-wrap: pretty;
}
.research-cta__buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-self: start; }

/* ── Impact ───────────────────────────────────────────────────────────── */
.impact-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1px;
	background: var(--bord);
}
.impact-pillar { background: var(--blanc); padding: 60px 36px 70px; }
.impact-pillar__tag {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--violet);
	margin-bottom: 24px;
}
.impact-pillar__title { font-family: var(--serif); font-size: 28px; font-weight: 400; margin-bottom: 20px; }
.impact-pillar__body p { font-size: 15px; line-height: 1.85; color: var(--gris-70); font-weight: 300; }
.impact-pillar__body p + p { margin-top: 1em; }

.green-block {
	background-color: var(--violet);
	background-image: var(--motif-jx);
	background-size: 196px 196px;
	background-repeat: repeat;
	color: var(--blanc);
	padding: 100px var(--pad-x) 120px;
}
.green-block__grid {
	display: grid;
	grid-template-columns: 320px minmax(0,1fr);
	gap: 80px;
}
.green-block__intro { margin-top: 18px; font-size: 15px; line-height: 1.8; opacity: .72; font-weight: 300; }
.applications { display: grid; gap: 1px; background: rgba(255,255,255,.2); align-content: start; }
.application {
	background: var(--violet);
	padding: 26px 0;
	display: grid;
	grid-template-columns: 280px minmax(0,1fr);
	gap: 40px;
	align-items: baseline;
}
.application__title { font-family: var(--serif); font-size: 23px; font-weight: 400; }
.application__body { font-size: 15px; line-height: 1.75; opacity: .8; font-weight: 300; }
.green-block__quote {
	margin: 70px 0 0;
	font-family: var(--serif);
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.5;
	max-width: 1000px;
}
.green-block__buttons { margin-top: 56px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.contact-layout__info { padding: 90px var(--pad-x) 110px; }
.contact-layout__info .h-display { margin-bottom: 46px; }
.contact-layout__form { padding: 90px var(--pad-x) 110px; background: var(--fond-doux); }

.contact-rows { max-width: 500px; }
.contact-row {
	border-top: 1px solid var(--bord);
	padding: 20px 0;
	display: grid;
	grid-template-columns: 140px minmax(0,1fr);
	gap: 24px;
}
.contact-rows .contact-row:last-child { border-bottom: 1px solid var(--bord); }
.contact-row__label {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	padding-top: 4px;
}
.contact-row__value { font-size: 16px; }

.contact-form { display: grid; gap: 22px; max-width: 500px; }
.form-field { display: grid; gap: 8px; margin: 0; }
.form-field label {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris-40);
}
.form-field input, .form-field select, .form-field textarea {
	border: 0;
	border-bottom: 1px solid var(--bord-form);
	background: transparent;
	padding: 6px 0 12px;
	font-family: inherit;
	font-size: 15px;
	color: var(--noir);
	border-radius: 0;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	outline: none;
	border-bottom-color: var(--noir);
}
.contact-form .btn { justify-self: start; }
.form-honeypot { position: absolute; left: -9999px; }
.form-notice { padding: 14px 18px; font-size: 14px; margin-bottom: 26px; }
.form-notice--ok { background: #E7EFE9; color: var(--vert); }
.form-notice--error { background: #F7E9E7; color: #7A2E22; }

.faq-section {
	padding-top: 100px;
	padding-bottom: 120px;
	display: grid;
	grid-template-columns: 320px minmax(0,1fr);
	gap: 80px;
}

/* ── Accordéons ───────────────────────────────────────────────────────── */
.accordion { border-top: 1px solid var(--bord); }
.faq-list .accordion:last-child, .product-accordions .accordion:last-child { border-bottom: 1px solid var(--bord); }
.accordion summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	gap: 32px;
	align-items: baseline;
	font-size: 16px;
	font-weight: 300;
}
.faq-list .accordion summary { font-size: 19px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion__mark { color: var(--gris-40); flex: none; }
.accordion__mark::before { content: "+"; }
.accordion[open] .accordion__mark::before { content: "−"; }
.accordion__body { padding: 0 0 24px; font-size: 14px; line-height: 1.8; color: var(--gris-70); font-weight: 300; max-width: 60ch; }

/* ── Boutique ─────────────────────────────────────────────────────────── */
.shop-filter-bar {
	display: flex;
	gap: 26px;
	border-bottom: 1px solid var(--bord);
	align-items: baseline;
	flex-wrap: wrap;
}
.shop-filter-bar .filter-chip { padding-bottom: 18px; border-bottom-width: 2px; }
.shop-filter-bar__sort { margin-left: auto; padding-bottom: 14px; }
.shop-filter-bar__sort .orderby {
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	cursor: pointer;
}

.shop-main { padding-top: 50px; padding-bottom: 130px; }

ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 44px 28px;
}
/* Neutralise la mise en page par flottants de WooCommerce (largeurs, clearfix). */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product,
ul.products li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	clear: none;
}
.shop-card__link { display: block; }
.shop-card__link:hover { color: inherit; }
.shop-card__link:hover img { opacity: .92; }
.shop-card__media { margin-bottom: 18px; }
.shop-card__flag {
	position: absolute;
	top: 14px; left: 14px;
	background: var(--noir);
	color: var(--blanc);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 7px 11px;
}
.shop-card__flag--out { background: var(--blanc); color: var(--noir); }
.shop-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: baseline;
}
.shop-card__collection {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	margin-bottom: 8px;
}
.shop-card__name { font-size: 19px; font-weight: 300; margin: 0; }
.shop-card__price { font-size: 14px; white-space: nowrap; }
.shop-card__price del { color: var(--gris-40); margin-right: 8px; }
.shop-card__price ins { text-decoration: none; }

/* ── Fiche produit ────────────────────────────────────────────────────── */
.product-breadcrumb {
	padding-top: 24px;
	padding-bottom: 24px;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-40);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.product-breadcrumb .is-current { color: var(--noir); }

.product-layout {
	display: grid;
	grid-template-columns: minmax(0,7fr) minmax(0,5fr);
	align-items: start;
}
.product-layout__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 0 24px 60px var(--pad-x);
}
.product-gallery__main { grid-column: 1 / -1; }
.product-layout__summary { padding: 0 var(--pad-x) 130px 24px; }

.product-kicker {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris-40);
	margin-bottom: 18px;
}
.product-title {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 200;
	text-transform: uppercase;
	margin-bottom: 18px;
	line-height: 1.02;
	letter-spacing: -.005em;
}
.product-price { font-size: 20px; margin-bottom: 34px; font-weight: 300; }
.product-price del { color: var(--gris-40); margin-right: 10px; }
.product-price ins { text-decoration: none; }
.product-short { margin-bottom: 40px; }
.product-short p {
	font-size: 16px;
	line-height: 1.85;
	font-weight: 300;
	color: var(--gris-70);
	max-width: 480px;
}
.product-short p + p { margin-top: 1em; }

.product-row { border-top: 1px solid var(--bord); padding: 24px 0; }
.product-row__label {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	margin-bottom: 16px;
	font-weight: 400;
}
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; display: inline-block; }
.swatch.is-active { outline: 1px solid var(--noir); outline-offset: 3px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.chip { border: 1px solid var(--bord); padding: 10px 18px; color: var(--gris-40); }
.chip.is-active { border-color: var(--noir); color: var(--noir); }

/* Formulaire d'achat WooCommerce */
.product-buy { margin: 32px 0 24px; }
.product-buy form.cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.product-buy form.cart.variations_form { display: block; }
.product-buy .variations { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.product-buy .variations td, .product-buy .variations th { padding: 8px 0; text-align: left; }
.product-buy .variations .label label {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	font-weight: 400;
}
.product-buy .variations select {
	border: 1px solid var(--bord);
	background: var(--blanc);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	min-width: 200px;
}
.product-buy .reset_variations { font-size: 12px; color: var(--gris-40); }
.product-buy .woocommerce-variation-add-to-cart { display: flex; gap: 10px; flex-wrap: wrap; }
.product-buy .woocommerce-variation-price { margin-bottom: 16px; font-size: 18px; }

.quantity { display: flex; align-items: center; border: 1px solid var(--noir); }
.quantity .qty {
	width: 52px;
	border: 0;
	text-align: center;
	font-family: inherit;
	font-size: 15px;
	padding: 15px 4px;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { padding: 15px 16px; color: var(--gris-40); font-size: 16px; line-height: 1; }
.qty-btn:hover { color: var(--noir); }

.product-buy .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	background: var(--noir);
	color: var(--blanc);
	padding: 15px 20px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border: 0;
	transition: opacity .18s ease;
}
.product-buy .single_add_to_cart_button:hover { opacity: .82; }
.product-buy .single_add_to_cart_button.disabled { opacity: .4; cursor: not-allowed; }
p.stock.out-of-stock { color: #7A2E22; font-size: 14px; }
p.stock.in-stock { color: var(--vert); font-size: 14px; }

.payment-block { background: var(--fond-doux); padding: 22px 24px; margin-bottom: 26px; }
.payment-block .product-row__label { margin-bottom: 14px; }
.payment-badges { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.payment-badge { background: var(--blanc); border: 1px solid var(--bord); padding: 9px 13px; }

/* ── Collections ──────────────────────────────────────────────────────── */
.collection-tabs {
	display: flex;
	gap: 26px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--bord);
	padding-bottom: 20px;
	flex-wrap: wrap;
}
.collection-tab { color: var(--gris-40); padding-bottom: 6px; }
.collection-tab.is-active { color: var(--noir); border-bottom: 1px solid var(--noir); }
.collection-tab:hover { color: var(--noir); }

.looks-grid {
	padding-top: 50px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0,1fr));
	gap: 24px;
}
.look { grid-column: span var(--span, 6); }
.look:nth-child(4n+2) { align-self: end; }
.look .media-slot { aspect-ratio: 3 / 4; }
.look:nth-child(4n+2) .media-slot { aspect-ratio: 4 / 5; }
.look:nth-child(4n+3) .media-slot { aspect-ratio: 4 / 5; }
.look:nth-child(4n) .media-slot { aspect-ratio: 16 / 10; }
.look__caption {
	margin-top: 14px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-60);
}

.collection-cta {
	padding-top: 110px;
	padding-bottom: 130px;
	margin-top: 110px;
	border-top: 1px solid var(--bord);
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 60px;
	align-items: center;
}
.collection-cta__quote {
	font-size: clamp(20px, 2.2vw, 27px);
	line-height: 1.5;
	font-weight: 200;
	text-wrap: pretty;
}
.collection-cta .btn { justify-self: start; }

/* ── Articles & contenu libre ─────────────────────────────────────────── */
.article__title {
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 200;
	line-height: 1.05;
	max-width: 1000px;
}
.article__head { padding-bottom: 40px; }
.article__media { padding-bottom: 60px; }
.article__body { padding-bottom: 80px; }
.article__footer {
	padding-bottom: 110px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.entry-content { padding-bottom: 90px; max-width: 860px; }
.entry-content--narrow { max-width: 760px; }
.entry-content--tight { padding-bottom: 20px; }
.entry-content p { font-size: 16px; line-height: 1.85; font-weight: 300; color: var(--gris-70); }
.entry-content p + p, .entry-content ul + p, .entry-content p + ul { margin-top: 1.2em; }
.entry-content h2 { font-size: 24px; font-weight: 400; margin: 2em 0 .8em; }
.entry-content h3 { font-size: 18px; font-weight: 500; margin: 1.6em 0 .6em; }
.entry-content ul, .entry-content ol { padding-left: 20px; font-weight: 300; color: var(--gris-70); }
.entry-content li { margin-bottom: .4em; }
.entry-content a { border-bottom: 1px solid var(--gris-40); }
.entry-content img { height: auto; }
.entry-content blockquote {
	margin: 2em 0;
	padding-left: 24px;
	border-left: 2px solid var(--noir);
	font-size: 20px;
	font-weight: 200;
}
.manifesto .entry-content { padding-bottom: 0; }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.page-404 { padding-bottom: 130px; }
.page-404__text { margin: 30px 0 40px; color: var(--gris-60); }
.page-404__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Pagination ───────────────────────────────────────────────────────── */
.pagination-wrap { padding-top: 60px; }
.pagination-wrap .nav-links, .pagination-wrap .woocommerce-pagination ul {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.pagination-wrap .page-numbers { color: var(--gris-40); padding: 6px 2px; }
.pagination-wrap .page-numbers.current { color: var(--noir); border-bottom: 1px solid var(--noir); }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.site-footer { background: var(--noir); color: var(--blanc); padding: 80px var(--pad-x) 48px; }
.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0,1fr) 180px 180px 180px;
	gap: 40px;
	padding-bottom: 60px;
}
.site-footer__logo {
	font-size: 20px;
	letter-spacing: .34em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.site-footer__desc { font-size: 14px; line-height: 1.8; color: var(--gris-40); font-weight: 300; max-width: 300px; }
.site-footer__col-title {
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris-60);
	margin-bottom: 17px;
}
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
	font-size: 13px;
	color: var(--gris-clair);
	font-weight: 300;
}
.site-footer__links a:hover { color: var(--blanc); }
.site-footer__bottom {
	border-top: 1px solid var(--bord-sombre);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-60);
}
.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}
.site-footer__legal li:not(:last-child)::after { content: "·"; margin-left: 8px; }
.site-footer__legal a:hover { color: var(--blanc); }

/* ── WhatsApp & barre mobile ──────────────────────────────────────────── */
.whatsapp-float {
	position: fixed;
	right: 24px; bottom: 24px;
	z-index: 60;
	background: var(--blanc);
	color: var(--noir);
	padding: 14px 20px;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.whatsapp-float:hover { color: var(--noir); opacity: .85; }

.mobile-bar { display: none; }
@media (max-width: 767px) {
	.whatsapp-float { display: none; }
	.mobile-bar {
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 60;
		height: 62px;
		background: var(--noir);
		color: var(--blanc);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		font-size: 10px;
		letter-spacing: .16em;
		text-transform: uppercase;
	}
	.mobile-bar a { color: var(--blanc); }
	.mobile-bar__whatsapp { border: 1px solid var(--gris-70); padding: 9px 14px; }
	.site { padding-bottom: 62px; }
}

/* ── WooCommerce : messages, panier, commande ─────────────────────────── */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none;
	margin: 0 0 30px;
	padding: 16px 20px;
	font-size: 14px;
	background: var(--fond-doux);
	border-left: 2px solid var(--vert);
}
.woocommerce-error { border-left-color: #7A2E22; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: right; }

.woocommerce-cart .site-main > .container-x, .woocommerce-checkout .site-main > .container-x { padding-top: 60px; }
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content,
.woocommerce-account .entry-content { max-width: none; }
.woocommerce-cart-form, .woocommerce-checkout-review-order { font-weight: 300; }
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 14px;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--bord);
	padding: 16px 12px;
	text-align: left;
}
.woocommerce table.shop_table th {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-40);
	font-weight: 400;
}
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.wc-block-components-button, .woocommerce #respond input#submit {
	background: var(--noir);
	color: var(--blanc);
	border: 0;
	border-radius: 0;
	padding: 14px 24px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 400;
	font-family: inherit;
	cursor: pointer;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: var(--noir); color: var(--blanc); opacity: .82; }
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce button.button.alt.disabled {
	background: var(--noir);
	color: var(--blanc);
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
	background: var(--noir);
	color: var(--blanc);
	opacity: .82;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	border: 1px solid var(--bord);
	padding: 12px 14px;
	font-family: inherit;
	border-radius: 0;
	background: var(--blanc);
}
.woocommerce form .form-row label { font-size: 12px; letter-spacing: .08em; color: var(--gris-60); }

/* Pages compte / commandes : centrage doux */
.woocommerce-account .site-main > .container-x { padding-top: 60px; padding-bottom: 90px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* Repli boutique via shortcodes/blocs (autres pages) */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px; font-weight: 300; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
	.methodo__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px 28px; }
	.product-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1023px) {
	:root { --pad-x: 28px; }
	.index-list__row { grid-template-columns: 44px 1fr 110px; }
	.index-list__note { display: none; }
	.index-list--detail .index-list__row { grid-template-columns: 44px minmax(0,1fr); }
	.index-list--detail .index-list__body { grid-column: 2; }
	.dark-block__head, .dark-block--center, .two-cols, .research-cta__inner,
	.collection-cta, .green-block__grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
	.pillars, .impact-pillars { grid-template-columns: minmax(0,1fr); }
	.green-hero__cols { grid-template-columns: minmax(0,1fr); gap: 36px; }
	.contact-layout { grid-template-columns: minmax(0,1fr); }
	.faq-section { grid-template-columns: minmax(0,1fr); gap: 30px; }
	.product-layout { grid-template-columns: minmax(0,1fr); }
	.product-layout__gallery { padding: 0 var(--pad-x) 40px; }
	.product-layout__summary { padding: 0 var(--pad-x) 90px; }
	ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 20px; }
	.gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.application { grid-template-columns: minmax(0,1fr); gap: 8px; }
	.looks-grid .look { grid-column: 1 / -1; }
	.site-footer__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width: 767px) {
	:root { --pad-x: 20px; }
	body { font-size: 15px; }
	.hero__media { height: min(560px, 80vh); }
	.hero__overlay { flex-direction: column; align-items: flex-start; gap: 24px; }
	.showcase { grid-template-columns: minmax(0,1fr); }
	.product-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 14px; }
	.journal-row { grid-template-columns: 90px 1fr; }
	.journal-row__tag { display: none; }
	.journal-row__title { font-size: 17px; }
	.campaign-visuals__pair { grid-template-columns: minmax(0,1fr); }
	.campaign-visuals__pair .media-slot { height: min(480px, 60vh); }
	.photo-duo { grid-template-columns: minmax(0,1fr); }
	.photo-duo .media-slot { height: min(420px, 55vh); }
	.gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.gallery-item--large { grid-column: span 2; }
	ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.shop-card__name { font-size: 15px; }
	.page-head { padding-top: 60px; }
	.page-head--split, .page-head--shop { flex-direction: column; align-items: flex-start; gap: 16px; }
	.page-head__aside { text-align: left; }
	.section-head { padding-top: 70px; }
	.manifesto { padding-top: 80px; padding-bottom: 80px; }
	.dark-block { padding: 70px var(--pad-x) 60px; }
	.dark-block--center { padding: 80px var(--pad-x); }
	.green-hero { padding: 70px var(--pad-x) 60px; }
	.methodo { padding-top: 70px; padding-bottom: 80px; }
	.methodo__grid { grid-template-columns: minmax(0,1fr); }
	.wide-cta { padding: 60px var(--pad-x); flex-direction: column; gap: 16px; }
	.contact-layout__info, .contact-layout__form { padding-top: 60px; padding-bottom: 70px; }
	.site-footer { padding: 60px var(--pad-x) 40px; }
	.site-footer__grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
	.site-footer__bottom { flex-direction: column; gap: 10px; }
	.pagination-wrap { padding-top: 40px; }
}