/*
 * KLOUDY — feuille principale.
 * Les valeurs proviennent du KLOUDY Design System (tokens/*.css) : ne pas arrondir.
 */

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	/* Neutres — palette dominante, sable à pierre */
	--color-bg-cream: #FFFEF4;
	--color-bg-white: #FFFFFF;
	--color-bg-ivory: #F7F7F5;
	--color-beige-light: #EDE9E1;
	--color-beige: #E1D4C1;
	--color-taupe: #C9C3B7;
	--color-taupe-dark: #BFAC9B;
	--color-stone: #A8A49B;
	--color-brown-warm: #97897E;
	--color-charcoal-soft: #605355;
	--color-ink: #1A1A1A;
	--color-ink-pure: #111111;

	/* Accents — utilisés comme encre, jamais comme aplat */
	--color-accent-gold: #C9A24B;
	--color-accent-sale: #C41E3A;
	--color-accent-sage: #8B9B7E;

	/* Texte */
	--color-text-primary: #1A1A1A;
	--color-text-secondary: #4A4540;
	--color-text-muted: #8A8378;
	--color-text-inverse: #FFFFFF;

	/* Surfaces & filets */
	--color-surface-card: #FFFFFF;
	--color-surface-soft: #F7F7F5;
	--color-surface-warm: #EDE9E1;
	--color-surface-badge: #111111;
	--color-surface-announce: #FFFEF4;
	--color-border-hairline: #E5E1D8;
	--color-border-swatch: rgba(0, 0, 0, .15);

	/* Contrôles */
	--btn-primary-bg: #111111;
	--btn-primary-text: #FFFFFF;
	--btn-primary-bg-hover: #1A1A1A;
	--btn-secondary-bg: #E1D4C1;
	--btn-secondary-text: #1A1A1A;
	--btn-secondary-bg-hover: #D8C8B2;
	--btn-ghost-border: #1A1A1A;

	/* Fonds photo de substitution */
	--photo-bg-1: #E1D4C1;
	--photo-bg-2: #BFAC9B;
	--photo-bg-3: #C9C3B7;
	--photo-bg-4: #8B9B7E;
	--photo-bg-5: #605355;

	/* Typographie */
	--font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
	--font-script: 'Great Vibes', 'Alex Brush', cursive;
	--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

	--fs-logo: 28px;
	--fs-h1-hero: 24px;
	--fs-section-title: 19px;
	--fs-product-title: 16px;
	--fs-price: 16px;
	--fs-body: 17px;
	--fs-caption: 14px;
	--fs-badge: 13px;
	--fs-btn: 15px;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--tracking-section: .08em;
	--tracking-badge: .05em;
	--lh-body: 1.5;
	--lh-heading: 1.2;

	/* Espacement — échelle 4px stricte */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* Mise en page & formes */
	--grid-gutter: 2px;
	--container-max: 1000px;
	--container-padding: 16px;
	--radius-card: 0px;
	--radius-photo: 0px;
	--btn-radius: 2px;
	--radius-pill: 999px;
	--aspect-product: 3 / 4;
	--hairline: 1px solid var(--color-border-hairline);

	/* Élévation */
	--shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
	--shadow-overlay-card: 0 8px 24px rgba(0, 0, 0, .12);
	--scrim-photo: linear-gradient(to top, rgba(26, 26, 26, .45), rgba(26, 26, 26, 0));

	/* Mouvement — lent et discret */
	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;
	--press-scale: .985;
}

/* =========================================================================
   2. Base
   ========================================================================= */

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

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

body {
	margin: 0;
	background: var(--color-bg-white);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Layout colonne : le pied de page reste collé au bas, sans blanc en dessous
   quand le contenu est plus court que la fenêtre. */
.k-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

@supports (min-height: 100dvh) {
	.k-site {
		min-height: 100dvh;
	}
}

.k-main {
	flex: 1 0 auto;
}

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

a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-standard);
}

a:hover {
	color: var(--color-text-secondary);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	margin: 0;
}

p {
	margin: 0 0 var(--space-4);
}

ul, ol {
	margin: 0;
	padding: 0;
}

button {
	font-family: var(--font-body);
	color: inherit;
}

input,
select,
textarea {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text-primary);
}

:focus-visible {
	outline: 1px solid var(--color-text-primary);
	outline-offset: 2px;
}

::selection {
	background: var(--color-beige);
	color: var(--color-text-primary);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.k-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--color-ink-pure);
	color: var(--color-text-inverse);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
}

.k-skip:focus {
	left: var(--space-4);
	top: var(--space-4);
	color: var(--color-text-inverse);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   3. Mise en page
   ========================================================================= */

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

.k-section {
	padding-block: var(--space-8);
}

.k-section--ivory {
	background: var(--color-bg-ivory);
}

.k-section__body {
	margin-top: var(--space-6);
}

.k-section__cta {
	margin-top: var(--space-6);
	text-align: center;
}

.k-main--shop {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-7) var(--container-padding) var(--space-8);
	width: 100%;
}

/* =========================================================================
   4. Typographie de marque
   ========================================================================= */

.k-wordmark__text {
	font-family: var(--font-script);
	line-height: 1.1;
	letter-spacing: .01em;
	display: block;
}

.k-wordmark a {
	color: inherit;
}

.k-wordmark--inverse {
	color: var(--color-text-inverse);
}

.k-wordmark__logo {
	max-height: 40px;
	width: auto;
	margin-inline: auto;
}

.k-wordmark__tagline {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.k-ornament {
	color: var(--color-accent-gold);
	letter-spacing: .3em;
	margin-bottom: var(--space-3);
	line-height: 1;
}

.k-section-title {
	text-align: center;
}

.k-section-title--left {
	text-align: left;
}

.k-section-title__text {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-section-title);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	line-height: var(--lh-heading);
	margin: 0;
}

.k-section-title__sub {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-caption);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.k-section-title--inverse .k-section-title__text {
	color: var(--color-text-inverse);
}

.k-section-title--inverse .k-section-title__sub {
	color: rgba(255, 255, 255, .8);
}

/* =========================================================================
   5. Boutons
   ========================================================================= */

.k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 14px 32px;
	border: 0;
	border-radius: var(--btn-radius);
	font-family: var(--font-body);
	font-size: var(--fs-btn);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--dur-base) var(--ease-standard),
		color var(--dur-base) var(--ease-standard),
		opacity var(--dur-base) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard);
}

.k-btn:active {
	transform: scale(var(--press-scale));
}

.k-btn--primary {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
}

.k-btn--primary:hover {
	background: var(--btn-primary-bg-hover);
	color: var(--btn-primary-text);
}

.k-btn--secondary {
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-text);
}

.k-btn--secondary:hover {
	background: var(--btn-secondary-bg-hover);
	color: var(--btn-secondary-text);
}

.k-btn--ghost {
	background: transparent;
	color: var(--color-text-primary);
	box-shadow: inset 0 0 0 1px var(--btn-ghost-border);
}

.k-btn--ghost:hover {
	background: rgba(26, 26, 26, .04);
	color: var(--color-text-primary);
}

.k-btn--quiet {
	background: transparent;
	color: var(--color-text-secondary);
	padding: 6px 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.k-btn--quiet:hover {
	color: var(--color-text-primary);
}

.k-btn--sm {
	padding: 10px 20px;
	font-size: var(--fs-caption);
}

.k-btn--lg {
	padding: 18px 44px;
	font-size: var(--fs-product-title);
}

.k-btn--block {
	width: 100%;
}

.k-btn--pill {
	border-radius: var(--radius-pill);
}

.k-btn[disabled],
.k-btn.disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* =========================================================================
   6. Barre d'annonce & en-tête
   ========================================================================= */

.k-announce {
	background: var(--color-surface-announce);
	padding: var(--space-2) var(--container-padding);
	border-block: 0;
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	text-align: center;
}

.k-announce .k-marquee__group {
	gap: var(--space-3);
}

.k-announce__item,
.k-announce__sep {
	white-space: nowrap;
	flex: 0 0 auto;
}

.k-announce__sep {
	opacity: .45;
}

.k-header {
	background: var(--color-bg-white);
	border-bottom: var(--hairline);
	padding: var(--space-4) var(--container-padding);
	position: relative;
	z-index: 30;
}

.k-header--sticky {
	position: sticky;
	top: 0;
}

.k-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-4);
}

.k-header__brand {
	text-align: center;
}

.k-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
}

.k-iconbtn {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: color var(--dur-base) var(--ease-standard);
}

.k-iconbtn:hover {
	color: var(--color-text-secondary);
}

.k-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 14px;
	padding: 3px 4px;
	background: var(--color-ink-pure);
	color: var(--color-text-inverse);
	font-size: 8px;
	line-height: 1;
	text-align: center;
}

.k-cart-count.is-empty {
	display: none;
}

/* Navigation */

.k-nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-width: 0;
}

.k-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-left: -12px;
	justify-content: flex-start;
}

.k-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	list-style: none;
}

.k-nav__list li {
	position: relative;
}

.k-nav__list a {
	display: inline-block;
	padding: 2px 0;
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	border-bottom: 1px solid transparent;
}

.k-nav__list a:hover,
.k-nav__list .current-menu-item > a,
.k-nav__list .current_page_item > a {
	color: var(--color-text-primary);
	border-bottom-color: var(--color-text-primary);
}

.k-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	list-style: none;
	background: var(--color-bg-white);
	border: var(--hairline);
	padding: var(--space-3) var(--space-4);
	min-width: 180px;
	display: grid;
	gap: var(--space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(2px);
	transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}

.k-nav__list li:hover > .sub-menu,
.k-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Recherche */

/* Recherche — superposition pleine largeur qui descend du haut (style vitrine). */
.k-search {
	position: fixed;
	inset: 0;
	z-index: 200;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.k-search__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: rgba(26, 26, 26, .5);
	cursor: pointer;
}

.k-search__bar {
	position: relative;
	background: var(--color-bg-white);
	padding: var(--space-5) var(--container-padding);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	animation: k-search-in .25s var(--ease-standard, ease);
}

@keyframes k-search-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.k-search__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.k-search form[role="search"],
.k-searchform {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1;
	min-width: 0;
	border: 1px solid var(--color-border-hairline);
	border-radius: 8px;
	background: var(--color-bg-white);
	padding: 4px var(--space-4);
}

.k-searchform__field,
.k-search input[type="search"],
.k-search input[type="text"],
.k-search .search-field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 14px 0;
	font-size: 15px;
}

.k-searchform__field:focus,
.k-search input:focus {
	outline: none;
}

.k-searchform__submit,
.k-search form[role="search"] button[type="submit"] {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--color-text-secondary);
	display: inline-flex;
	align-items: center;
	padding: var(--space-2);
}

.k-search__close {
	flex: 0 0 auto;
}

/* =========================================================================
   19. Page de remerciement (commande reçue) — allure éditoriale mode
   ========================================================================= */

.k-thankyou {
	max-width: 620px;
	margin-inline: auto;
	padding-block: var(--space-6);
}

.k-thankyou__logo {
	text-align: center;
	margin-bottom: var(--space-6);
}

.k-thankyou__logo img {
	max-height: 44px;
	width: auto;
	display: inline-block;
}

.k-thankyou__hero {
	text-align: center;
	margin-bottom: var(--space-7);
}

.k-thankyou__title {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: 30px;
	line-height: var(--lh-heading);
	letter-spacing: .01em;
	margin: var(--space-3) 0 var(--space-3);
}

.k-thankyou__lead {
	color: var(--color-text-secondary);
	font-size: 15px;
	line-height: var(--lh-body);
	max-width: 440px;
	margin: 0 auto;
}

.k-thankyou__meta {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: var(--hairline);
}

.k-thankyou__meta li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-4) var(--space-5);
	border-top: var(--hairline);
	border-left: var(--hairline);
}

.k-thankyou__meta li:nth-child(-n + 2) {
	border-top: 0;
}

.k-thankyou__meta li:nth-child(odd) {
	border-left: 0;
}

.k-thankyou__meta span {
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.k-thankyou__meta strong {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: 16px;
	color: var(--color-text-primary);
}

.k-thankyou__reassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-5);
	margin-bottom: var(--space-7);
	font-size: var(--fs-body);
	color: var(--color-text-secondary);
}

.k-thankyou__reassure span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.k-thankyou__reassure .k-icon {
	color: var(--color-brown-warm);
}

/* La table de détails de commande WooCommerce, sobre et aérée. */
.k-thankyou .woocommerce-order-details__title,
.k-thankyou .woocommerce-column__title {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-section-title);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	margin: var(--space-6) 0 var(--space-3);
}

.k-thankyou .woocommerce-table,
.k-thankyou table.shop_table {
	width: 100%;
	border: var(--hairline);
	border-collapse: collapse;
	font-size: var(--fs-body);
}

.k-thankyou .woocommerce-table th,
.k-thankyou .woocommerce-table td,
.k-thankyou table.shop_table th,
.k-thankyou table.shop_table td {
	padding: var(--space-3) var(--space-4);
	border-top: var(--hairline);
	text-align: left;
}

.k-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

@media (max-width: 560px) {
	.k-thankyou__title {
		font-size: 24px;
	}

	.k-thankyou__actions .k-btn {
		flex: 1 1 100%;
	}
}

/* Tiroir mobile */

.k-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.k-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, .45);
}

.k-drawer__panel {
	position: relative;
	background: var(--color-bg-white);
	padding: var(--space-5) var(--container-padding) var(--space-6);
	max-height: 100%;
	overflow-y: auto;
}

.k-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.k-drawer__list {
	list-style: none;
}

.k-drawer__list li {
	border-bottom: var(--hairline);
}

.k-drawer__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-primary);
}

.k-drawer__list .sub-menu {
	list-style: none;
	padding-left: var(--space-4);
}

.k-drawer__foot {
	display: flex;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.k-drawer__foot a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

/* =========================================================================
   7. Hero
   ========================================================================= */

.k-hero {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--space-8) var(--space-5);
	background: linear-gradient(135deg, var(--color-taupe-dark), var(--color-stone));
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.k-hero--photo {
	background-repeat: no-repeat;
}

.k-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim-photo);
}

.k-hero__content {
	position: relative;
	text-align: center;
	max-width: 640px;
}

.k-hero__title {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-h1-hero);
	line-height: var(--lh-heading);
	color: var(--color-text-inverse);
	margin: 0;
}

.k-hero__sub {
	margin: var(--space-3) 0 var(--space-5);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

/* =========================================================================
   8. Bande catégories
   ========================================================================= */

.k-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gutter);
}

.k-cat {
	position: relative;
	display: block;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.k-cat__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim-photo);
	transition: opacity var(--dur-base) var(--ease-standard);
}

.k-cat:hover .k-cat__scrim {
	opacity: .8;
}

.k-cat__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-4);
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--fs-section-title);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

/* =========================================================================
   9. Bande promo
   ========================================================================= */

.k-promo {
	background: linear-gradient(135deg, var(--color-taupe-dark), var(--color-stone));
	background-size: cover;
	background-position: center;
	padding: var(--space-7) var(--container-padding);
}

.k-promo__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	justify-content: flex-end;
}

.k-promo__card {
	background: var(--color-bg-white);
	box-shadow: var(--shadow-overlay-card);
	padding: var(--space-6) var(--space-5);
	max-width: 320px;
	width: 100%;
	text-align: center;
}

.k-promo__list {
	display: inline-block;
	text-align: left;
}

.k-promo__icon {
	color: var(--color-accent-gold);
	margin-bottom: var(--space-3);
	line-height: 0;
}

.k-promo__title {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: 18px;
	margin: 0 0 var(--space-3);
}

.k-promo__list {
	list-style: none;
	margin: 0 0 var(--space-4);
	font-size: var(--fs-product-title);
	color: var(--color-text-secondary);
}

.k-promo__list li {
	position: relative;
	padding-left: var(--space-3);
	margin-bottom: var(--space-1);
}

.k-promo__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 1px;
	background: var(--color-accent-gold);
}

/* =========================================================================
   10. Instagram
   ========================================================================= */

.k-insta__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--grid-gutter);
	margin-top: var(--space-5);
}

.k-insta__tile {
	display: block;
	aspect-ratio: 9 / 16;
	background-size: cover;
	background-position: center;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.k-insta__tile:hover {
	opacity: .88;
}

/* Grille Instagram — publications cliquables (style vitrine). */
.k-insta__grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

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

.k-insta__grid--3 .k-insta__tile,
.k-insta__grid--4 .k-insta__tile {
	position: relative;
	overflow: hidden;
}

/* Pastille Instagram au centre — signale une publication cliquable. */
.k-insta__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(26, 26, 26, .18);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.k-insta__tile:hover .k-insta__play {
	opacity: 1;
}

.k-insta__play .k-icon {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
}

@media (max-width: 640px) {
	.k-insta__grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   11. Pied de page
   ========================================================================= */

.k-footer {
	background: var(--color-beige-light);
	margin-top: var(--space-8);
	padding: var(--space-7) var(--container-padding);
}

.k-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.2fr repeat(3, 1fr);
	gap: var(--space-6);
}

.k-footer__social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.k-footer__heading {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
}

.k-footer__list {
	list-style: none;
}

.k-footer__list li {
	margin-bottom: 6px;
}

.k-footer__list a {
	font-size: var(--fs-product-title);
	color: var(--color-text-secondary);
}

.k-footer__list a:hover {
	color: var(--color-text-primary);
}

.k-footer__bottom {
	max-width: var(--container-max);
	margin: var(--space-6) auto 0;
	border-top: 1px solid rgba(0, 0, 0, .06);
	padding-top: var(--space-4);
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	font-size: var(--fs-caption);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* =========================================================================
   12. Blog, pages, commentaires
   ========================================================================= */

.k-prose {
	max-width: 680px;
	margin-inline: auto;
	color: var(--color-text-secondary);
}

.k-prose h1,
.k-prose h2,
.k-prose h3 {
	color: var(--color-text-primary);
	margin: var(--space-6) 0 var(--space-3);
	font-size: 18px;
}

.k-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.k-prose blockquote {
	margin: var(--space-5) 0;
	padding-left: var(--space-4);
	border-left: 1px solid var(--color-accent-gold);
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--color-text-primary);
}

.k-page__media {
	margin: var(--space-6) 0;
}

.k-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6) var(--space-5);
	margin-top: var(--space-6);
}

.k-post__media img {
	width: 100%;
	aspect-ratio: var(--aspect-product);
	object-fit: cover;
}

.k-post__date {
	margin: var(--space-3) 0 var(--space-2);
	font-size: var(--fs-caption);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.k-post__title {
	font-size: 16px;
	margin-bottom: var(--space-2);
}

.k-post__excerpt {
	font-size: var(--fs-product-title);
	color: var(--color-text-secondary);
}

.k-postnav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: var(--hairline);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
}

.k-empty {
	text-align: center;
	padding: var(--space-8) 0;
	color: var(--color-text-secondary);
}

.k-comments {
	max-width: 680px;
	margin: var(--space-8) auto 0;
}

.k-comments__list {
	list-style: none;
	margin: var(--space-5) 0;
}

.k-comments__list .comment-body {
	padding: var(--space-4) 0;
	border-bottom: var(--hairline);
	font-size: var(--fs-product-title);
	color: var(--color-text-secondary);
}

.k-comments .comment-reply-title {
	font-family: var(--font-display);
	font-size: var(--fs-section-title);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	margin-bottom: var(--space-4);
}

.k-comments input[type="text"],
.k-comments input[type="email"],
.k-comments input[type="url"],
.k-comments textarea {
	width: 100%;
	border: var(--hairline);
	background: var(--color-bg-white);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	border-radius: 0;
}

.k-comments .submit {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border: 0;
	border-radius: var(--btn-radius);
	padding: 14px 32px;
	font-size: var(--fs-btn);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	cursor: pointer;
}

/* Pagination */

.navigation.pagination,
.woocommerce-pagination {
	margin-top: var(--space-7);
	text-align: center;
}

.navigation.pagination .nav-links,
.woocommerce-pagination ul {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
	border: 0;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--space-2);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	color: var(--color-text-muted);
	border: 1px solid transparent;
}

.page-numbers.current,
.page-numbers:hover {
	color: var(--color-text-primary);
	border-color: var(--color-border-hairline);
}

/* =========================================================================
   13. Adaptatif
   ========================================================================= */

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

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

	.k-promo__inner {
		justify-content: center;
	}
}

@media (max-width: 720px) {
	.k-nav__list {
		display: none;
	}

	.k-nav__toggle {
		display: inline-flex;
	}

	.k-header {
		padding-block: var(--space-3);
	}

	.k-header__actions {
		gap: var(--space-3);
	}

	.k-hide-mobile {
		display: none;
	}

	.k-section {
		padding-block: var(--space-7);
	}

	/* Sur mobile : carrousel horizontal glissable avec barre de défilement,
	   au lieu d'un empilement vertical. */
	.k-cats {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-3);
		scrollbar-width: thin;
		scrollbar-color: var(--color-border-swatch) transparent;
	}

	.k-cats::-webkit-scrollbar {
		height: 4px;
	}

	.k-cats::-webkit-scrollbar-thumb {
		background: var(--color-border-swatch);
		border-radius: 2px;
	}

	.k-cats::-webkit-scrollbar-track {
		background: transparent;
	}

	.k-cat {
		flex: 0 0 48%;
		scroll-snap-align: start;
		min-height: 0;
		aspect-ratio: 9 / 14;
	}

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

	.k-footer__bottom {
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.k-posts {
		grid-template-columns: 1fr;
	}

	.k-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   14. Compléments
   ========================================================================= */

body.k-locked {
	overflow: hidden;
}

.k-backlink {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.k-backlink:hover {
	color: var(--color-text-primary);
}

.k-search-again {
	max-width: 420px;
	margin: var(--space-5) auto 0;
}

.k-404 {
	text-align: center;
	padding-block: var(--space-8);
}

.k-pagelinks {
	margin-top: var(--space-5);
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

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

.k-widget__title {
	font-family: var(--font-display);
	font-size: var(--fs-section-title);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	margin-bottom: var(--space-3);
}

.k-widget ul {
	list-style: none;
	font-size: var(--fs-product-title);
	color: var(--color-text-secondary);
}

.k-widget li {
	margin-bottom: var(--space-2);
}

/* =========================================================================
   15. Bandeau defilant
   ========================================================================= */

.k-marquee {
	--k-marquee-speed: 40;
	--k-marquee-distance: 0px;
	--k-marquee-duration: 30s;

	position: relative;
	overflow: hidden;
	padding-block: var(--space-3);
	border-block: var(--hairline);
	background: var(--color-bg-cream);
	color: var(--color-text-primary);
	user-select: none;
}

.k-marquee--ivory {
	background: var(--color-bg-ivory);
}

.k-marquee--beige {
	background: var(--color-beige-light);
}

.k-marquee--white {
	background: var(--color-bg-white);
}

.k-marquee--ink {
	background: var(--color-ink-pure);
	color: var(--color-text-inverse);
	border-block-color: var(--color-ink-pure);
}

.k-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.k-marquee__group {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	flex: 0 0 auto;
}

/* L'espace de raccord n'existe que lorsque la bande défile : sans lui, une
   ligne immobile serait décentrée d'autant. */

.k-marquee.is-ready .k-marquee__group {
	padding-right: var(--space-6);
}

.k-marquee__item {
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: var(--fs-section-title);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	line-height: 1.2;
}

.k-marquee--sm .k-marquee__item {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: var(--fw-regular);
}

.k-marquee--lg .k-marquee__item {
	font-size: var(--fs-h1-hero);
}

.k-marquee__sep {
	flex: 0 0 auto;
	line-height: 1;
}

.k-marquee__sep--ornament {
	color: var(--color-accent-gold);
	font-size: 11px;
	letter-spacing: .2em;
}

.k-marquee__sep--dot {
	opacity: .45;
}

/* Sans JavaScript, une seule ligne centree et immobile. */

.k-marquee:not(.is-ready) .k-marquee__track {
	width: 100%;
	justify-content: center;
}

.k-marquee.is-ready .k-marquee__track {
	animation: k-marquee-scroll var(--k-marquee-duration) linear infinite;
}

.k-marquee--right.is-ready .k-marquee__track {
	animation-direction: reverse;
}

.k-marquee--pause:hover .k-marquee__track,
.k-marquee--pause:focus-within .k-marquee__track {
	animation-play-state: paused;
}

@keyframes k-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(var(--k-marquee-distance) * -1), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-marquee.is-ready .k-marquee__track {
		animation: none;
		justify-content: center;
	}
}

/* La barre d'annonce emprunte le mécanisme du bandeau, mais ne defile que
   sur mobile : au-dela elle reste une ligne centree et immobile. */

.k-marquee--mobile:not(.is-ready) .k-marquee__track {
	flex-wrap: wrap;
	justify-content: center;
}

/* Le point de raccord final ne sert qu'a la boucle : ligne immobile, on le cache. */

.k-announce:not(.is-ready) .k-marquee__group > .k-announce__sep:last-child {
	display: none;
}

/* Section pleine largeur : la grille court d'un bord a l'autre, le texte
   garde la gouttiere du conteneur. */

.k-section--wide {
	width: 100%;
	padding-inline: 0;
}

.k-section--wide > .k-section-title,
.k-section--wide > .k-section__cta {
	padding-inline: var(--container-padding);
}

/* =========================================================================
   15. Produit à la une (spotlight)
   ========================================================================= */

.k-spotlight__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: var(--space-8);
	margin-top: var(--space-6);
}

.k-spotlight__media {
	position: relative;
}

.k-spotlight__main {
	position: relative;
	display: block;
	aspect-ratio: var(--aspect-product);
	overflow: hidden;
	background: var(--color-beige-light);
	border-radius: var(--radius-photo);
}

.k-spotlight__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow, .6s) var(--ease-standard, ease);
}

.k-spotlight__main:hover img {
	transform: scale(1.03);
}

/* Vignette décalée qui déborde sur la gouttière. */
.k-spotlight__thumb {
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: 40%;
	max-width: 190px;
	aspect-ratio: var(--aspect-product);
	overflow: hidden;
	background: var(--color-bg-white);
	border: 6px solid var(--color-bg-white);
	box-shadow: var(--shadow-overlay-card);
	border-radius: var(--radius-photo);
}

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

.k-spotlight__body {
	max-width: 440px;
}

.k-spotlight__eyebrow {
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

.k-spotlight__title {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: var(--lh-heading);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
}

.k-spotlight__price {
	font-size: 16px;
	color: var(--color-text-primary);
	margin-bottom: var(--space-4);
}

.k-spotlight__price del {
	color: var(--color-text-muted);
	margin-right: var(--space-2);
	font-size: var(--fs-body);
}

.k-spotlight__price ins {
	text-decoration: none;
	color: var(--color-accent-sale);
}

.k-spotlight__desc {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-5);
}

.k-spotlight__cta {
	align-self: flex-start;
}

@media (max-width: 782px) {
	.k-spotlight__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.k-spotlight__body {
		max-width: none;
		text-align: center;
	}

	.k-spotlight__thumb {
		right: var(--space-3);
		bottom: var(--space-3);
		width: 34%;
	}

	.k-spotlight__title {
		font-size: 24px;
	}
}

/* =========================================================================
   16. Bannière produit immersive (feature)
   ========================================================================= */

.k-feature {
	background-position: center 22%;
}

/* Voile plein cadre : le texte centré reste lisible sur toute photo. */
.k-feature .k-hero__scrim {
	background: linear-gradient( to top, rgba(26, 26, 26, .55), rgba(26, 26, 26, .3) );
}

.k-feature__content {
	max-width: 620px;
}

.k-feature__eyebrow {
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	margin: 0 0 var(--space-3);
}

.k-feature__title {
	font-size: 34px;
}

.k-feature__text {
	max-width: 520px;
	margin: var(--space-4) auto var(--space-6);
	font-size: 15px;
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, .92);
}

@media (max-width: 782px) {
	.k-feature__title {
		font-size: 26px;
	}

	.k-feature__text {
		font-size: 14px;
	}
}

/* =========================================================================
   17. Carrousel promotions (accueil) — rangée glissante sur tous les écrans
   ========================================================================= */

/* Section promos : moins d'espace vide sous la rangée et avant/après le bouton. */
.k-sale .k-section__cta {
	margin-top: var(--space-3);
}

.k-sale {
	padding-bottom: var(--space-5);
}

.k-carousel {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Déborde jusqu'aux bords pour laisser voir la carte suivante. */
	margin-inline: calc(var(--container-padding) * -1);
	padding-inline: var(--container-padding);
	padding-bottom: var(--space-2);
}

.k-carousel::-webkit-scrollbar {
	display: none;
}

.k-carousel ul.products,
.woocommerce .k-carousel ul.products,
.k-carousel ul.products.columns-2,
.k-carousel ul.products.columns-3,
.k-carousel ul.products.columns-4,
.k-carousel ul.products.columns-5,
.k-carousel ul.products.columns-6 {
	display: flex !important;
	flex-wrap: nowrap;
	width: max-content;
	grid-template-columns: none !important;
	gap: var(--grid-gutter);
	scroll-snap-type: x mandatory;
	margin: 0;
}

.k-carousel ul.products li.product,
.woocommerce .k-carousel ul.products li.product {
	/* vw (et non %) : dans un carrousel flex nowrap, un % se calcule sur la
	   largeur démesurée du <ul>, ce qui gonflait énormément les cartes. */
	flex: 0 0 clamp(150px, 19vw, 200px);
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	float: none !important;
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.k-carousel ul.products li.product,
	.woocommerce .k-carousel ul.products li.product {
		flex-basis: 30vw;
	}
}

/* Même gabarit que la rangée « Nouveautés » (k-scroller) sur mobile. */
@media (max-width: 720px) {
	.k-carousel ul.products li.product,
	.woocommerce .k-carousel ul.products li.product {
		flex-basis: 42vw;
	}
}

/* =========================================================================
   21. Sélecteur de langue (en-tête)
   ========================================================================= */

.k-lang {
	display: inline-flex;
	align-items: center;
}

.k-lang ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-2);
}

.k-lang a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	text-decoration: none;
	padding: 4px 2px;
}

.k-lang a:hover {
	color: var(--color-text-primary);
}

/* Drapeau du sélecteur de langue. */
.k-lang__flag {
	display: block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
	flex: 0 0 auto;
}

.k-lang__code {
	line-height: 1;
}

/* =========================================================================
   20. Témoignages — captures d'avis, grille contenue (jamais pleine largeur)
   ========================================================================= */

/* Fond doux et travaillé, en accord avec la vitrine. */
.k-testi {
	background:
		radial-gradient( circle at 12% 12%, rgba(201, 162, 75, .06), transparent 42% ),
		radial-gradient( circle at 88% 88%, rgba(191, 172, 155, .12), transparent 46% ),
		var(--color-bg-ivory);
}

.k-testi__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-6);
}

/* Une seule mosaïque : pleine largeur du conteneur, centrée. */
.k-testi--single .k-testi__grid {
	grid-template-columns: 1fr;
	max-width: 920px;
	margin-inline: auto;
}

.k-testi__item {
	margin: 0;
	background: var(--color-bg-white);
	border: var(--hairline);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.k-testi__item img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.k-testi__grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
}

/* =========================================================================
   18. Service client — photo en forme organique + message (avant le footer)
   ========================================================================= */

.k-service {
	text-align: center;
}

.k-service__inner {
	max-width: 560px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.k-service__media {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-5);
}

/* Forme fluide, propre à kloudy — jamais un simple carré. */
.k-service__blob {
	display: block;
	width: min(340px, 78%);
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center top;
	background-color: var(--color-beige-light);
	border-radius: 42% 58% 63% 37% / 45% 45% 55% 55%;
	box-shadow: var(--shadow-card);
}

.k-service__eyebrow {
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-section);
	text-transform: uppercase;
	color: var(--color-brown-warm);
	margin: 0 0 var(--space-3);
}

.k-service__title {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: 24px;
	line-height: var(--lh-heading);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
}

.k-service__text {
	max-width: 480px;
	margin: 0 auto var(--space-5);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-secondary);
}

@media (max-width: 560px) {
	.k-service__title {
		font-size: 21px;
	}
}