/* ==========================================================================
   Atelier Kuroi — main.css
   Variables, reset, base typography, layout
   ========================================================================== */

:root {
	/* Palette — noirs chauds, doré discret, profondeur atmosphérique */
	--noir: #060605;
	--noir-deep: #040403;
	--noir-soft: #0a0908;
	--blanc: #f2ede6;
	--blanc-soft: rgba(242, 237, 230, 0.9);
	--blanc-warm: rgba(234, 225, 210, 0.94);
	--or: #c4a574;
	--or-light: rgba(196, 165, 116, 0.58);
	--or-muted: rgba(196, 165, 116, 0.26);
	--or-glow: rgba(196, 165, 116, 0.07);
	--or2: #9a7848;
	--g1: #100f0e;
	--g2: #181615;
	--g3: #201e1c;
	--g4: #282624;
	--muted: #8f8a82;
	--muted-light: rgba(143, 138, 130, 0.85);
	--line-subtle: rgba(255, 251, 245, 0.055);
	--line-gold: rgba(196, 165, 116, 0.2);
	--vignette-soft: radial-gradient(ellipse 115% 90% at 50% 50%, transparent 44%, rgba(0, 0, 0, 0.5) 100%);
	--light-pool: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(196, 165, 116, 0.06) 0%, transparent 68%);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Spacing — respiration éditoriale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.75rem;
	--space-lg: 3rem;
	--space-xl: 4.5rem;
	--space-2xl: clamp(3.25rem, 5.5vw, 5.25rem);
	--space-3xl: clamp(4.5rem, 7.5vw, 7.5rem);
	--space-4xl: clamp(7rem, 11vw, 11rem);

	/* Typography */
	--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans: 'Jost', system-ui, -apple-system, sans-serif;
	--text-xs: clamp(0.58rem, 0.54rem + 0.14vw, 0.68rem);
	--text-sm: clamp(0.68rem, 0.64rem + 0.18vw, 0.8rem);
	--text-base: clamp(0.88rem, 0.84rem + 0.18vw, 0.96rem);
	--text-lg: clamp(1.02rem, 0.96rem + 0.22vw, 1.12rem);
	--text-h3: clamp(1.35rem, 1.22rem + 0.45vw, 1.65rem);
	--text-h2: clamp(1.9rem, 1.45rem + 2vw, 3.85rem);
	--text-h1: clamp(2.6rem, 1.85rem + 4.5vw, 7rem);
	--leading-tight: 1.08;
	--leading-title: 1.12;
	--leading-body: 1.75;
	--leading-lead: 2.05;

	/* Motion — lente, discrète, luxe silencieux */
	--ease-slow: 0.72s cubic-bezier(0.19, 1, 0.22, 1);
	--ease-medium: 0.48s cubic-bezier(0.22, 0.1, 0.22, 1);
	--ease-luxe: 0.85s cubic-bezier(0.19, 1, 0.22, 1);

	/* Layout */
	--container-max: 1180px;
	--container-narrow: 1080px;
	--nav-height: 4.75rem;
	--prose-measure: clamp(520px, 38vw, 680px);
}

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

a, button {
	touch-action: manipulation;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(196, 165, 116, 0.1);
}

body {
	background:
		radial-gradient(ellipse 85% 45% at 50% -8%, rgba(196, 165, 116, 0.028) 0%, transparent 58%),
		radial-gradient(ellipse 55% 35% at 100% 100%, rgba(80, 62, 44, 0.018) 0%, transparent 52%),
		var(--noir-deep);
	color: var(--blanc);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: var(--text-base);
	line-height: var(--leading-body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9997;
	opacity: 0.018;
	mix-blend-mode: overlay;
	background-image: var(--grain);
	background-repeat: repeat;
	background-size: 200px 200px;
}

/* Custom cursor only on real mouse / fine pointer devices. */
@media (hover: hover) and (pointer: fine) {
	body.has-custom-cursor:has(#cursor),
	html.has-custom-cursor:has(#cursor) body {
		cursor: none;
	}

	html.has-custom-cursor:has(#cursor) a,
	html.has-custom-cursor:has(#cursor) button,
	html.has-custom-cursor:has(#cursor) [role="button"],
	html.has-custom-cursor:has(#cursor) label,
	body.has-custom-cursor:has(#cursor) a,
	body.has-custom-cursor:has(#cursor) button,
	body.has-custom-cursor:has(#cursor) [role="button"],
	body.has-custom-cursor:has(#cursor) label {
		cursor: none;
	}

	html.has-custom-cursor:has(#cursor) input,
	html.has-custom-cursor:has(#cursor) textarea,
	html.has-custom-cursor:has(#cursor) select,
	html.has-custom-cursor:has(#cursor) [contenteditable="true"],
	body.has-custom-cursor:has(#cursor) input,
	body.has-custom-cursor:has(#cursor) textarea,
	body.has-custom-cursor:has(#cursor) select,
	body.has-custom-cursor:has(#cursor) [contenteditable="true"] {
		cursor: text;
	}
}

/* Native pointer while Matomo consent banner is open (above custom cursor z-index). */
html.kuroi-consent-open,
html.kuroi-consent-open body,
body.kuroi-consent-open {
	cursor: auto;
}

html.kuroi-consent-open #cursor,
html.kuroi-consent-open #cursor-ring,
html.kuroi-consent-open #cursor-x,
body.kuroi-consent-open #cursor,
body.kuroi-consent-open #cursor-ring,
body.kuroi-consent-open #cursor-x {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.kuroi-consent-open a,
html.kuroi-consent-open button,
html.kuroi-consent-open [role="button"],
html.kuroi-consent-open label,
body.kuroi-consent-open a,
body.kuroi-consent-open button,
body.kuroi-consent-open [role="button"],
body.kuroi-consent-open label {
	cursor: pointer;
}

html.kuroi-consent-open input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.kuroi-consent-open textarea,
html.kuroi-consent-open select,
html.kuroi-consent-open [contenteditable="true"],
body.kuroi-consent-open input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body.kuroi-consent-open textarea,
body.kuroi-consent-open select,
body.kuroi-consent-open [contenteditable="true"] {
	cursor: text;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

a:focus-visible, button:focus-visible {
	outline: 1px solid rgba(196, 165, 116, 0.42);
	outline-offset: 4px;
	box-shadow: 0 0 0 3px rgba(196, 165, 116, 0.07);
	transition: box-shadow var(--ease-medium), outline-color var(--ease-medium);
}

.skip-link {
	position: absolute; top: -100%; left: var(--space-sm); z-index: 10001;
	background: var(--or); color: var(--noir); padding: var(--space-xs) var(--space-sm);
	font-size: var(--text-sm); letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: var(--space-sm); }

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

.section {
	padding: var(--space-3xl) var(--space-md);
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.section-inner { max-width: var(--container-max); margin: 0 auto; }

.section-tag {
	font-size: var(--text-xs);
	letter-spacing: 0.52em;
	text-transform: uppercase;
	color: rgba(196, 165, 116, 0.72);
	margin-bottom: var(--space-md);
}

h1, h2, h3 {
	font-family: var(--font-serif);
	font-weight: 300;
	line-height: var(--leading-title);
}

h1 {
	font-size: var(--text-h1);
	letter-spacing: 0.04em;
	line-height: var(--leading-tight);
}

h2 {
	font-size: var(--text-h2);
	margin-bottom: var(--space-lg);
	letter-spacing: 0.015em;
}

h2 em {
	font-style: italic;
	color: var(--or);
	font-weight: 300;
	letter-spacing: 0.02em;
}

h3 {
	font-size: var(--text-h3);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--line-subtle);
	letter-spacing: 0.03em;
}

.lead {
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
	line-height: var(--leading-lead);
	color: rgba(242, 237, 230, 0.76);
	max-width: 36rem;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.lead + .lead { margin-top: var(--space-md); }

.kuroi-custom-logo .custom-logo-link { display: inline-block; text-decoration: none; }
.kuroi-custom-logo img { max-height: 2.5rem; width: auto; }

.page-content, .single-content, .index-content, .error-content {
	padding: calc(var(--nav-height) + var(--space-2xl)) var(--space-md) var(--space-3xl);
	max-width: var(--container-narrow); margin: 0 auto;
}
.page-content h1, .single-content h1, .error-content h1 { margin-bottom: var(--space-lg); }
.page-content p, .single-content p, .index-content p {
	margin-bottom: var(--space-md);
	color: rgba(242, 237, 230, 0.76);
	line-height: var(--leading-lead);
}

.page-body :is(h2, h3, h4, .wp-block-heading),
.single-body :is(h2, h3, h4, .wp-block-heading) {
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
	font-family: var(--font-serif);
	font-weight: 400;
	color: var(--blanc-soft);
	line-height: var(--leading-tight);
}
.page-body :is(h2, .wp-block-heading):first-of-type,
.single-body :is(h2, .wp-block-heading):first-of-type { margin-top: var(--space-xl); }
.page-body h3, .single-body h3 { font-size: var(--text-xl); }
.page-body h4, .single-body h4 { font-size: var(--text-lg); }
.page-body :is(ul, ol, .wp-block-list),
.single-body :is(ul, ol, .wp-block-list) {
	margin: 0 0 var(--space-md);
	padding-left: 1.25em;
}
.page-body ul, .single-body ul,
.page-body .wp-block-list, .single-body .wp-block-list { list-style: disc; }
.page-body ol, .single-body ol { list-style: decimal; }
.page-body li, .single-body li {
	margin-bottom: var(--space-sm);
	color: rgba(240, 235, 228, 0.76);
	line-height: var(--leading-lead);
}
.page-body a:not(.wp-block-button__link),
.single-body a:not(.wp-block-button__link) {
	color: var(--or-light);
	transition: color var(--ease-medium);
}
.page-body a:not(.wp-block-button__link):hover,
.single-body a:not(.wp-block-button__link):hover { color: var(--blanc-soft); }
.page-body :is(blockquote, .wp-block-quote),
.single-body :is(blockquote, .wp-block-quote) {
	margin: var(--space-xl) 0;
	padding: var(--space-md) var(--space-lg);
	border-left: 2px solid var(--or-muted);
	color: rgba(240, 235, 228, 0.78);
	font-family: var(--font-serif);
	font-style: italic;
}
.page-body :is(img, .wp-block-image img),
.single-body :is(img, .wp-block-image img) {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}
.page-body .wp-block-image,
.single-body .wp-block-image { margin: var(--space-xl) 0; }
.page-body .wp-block-button,
.single-body .wp-block-button { margin: var(--space-lg) 0; }
.page-body .wp-block-button__link,
.single-body .wp-block-button__link {
	display: inline-block;
	padding: 0.85em 1.6em;
	background: var(--or);
	color: var(--noir) !important;
	text-decoration: none;
	font-size: var(--text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background var(--ease-medium);
}
.page-body .wp-block-button__link:hover,
.single-body .wp-block-button__link:hover { background: var(--or-light); }
.page-body .wp-block-columns,
.single-body .wp-block-columns {
	display: grid;
	gap: var(--space-lg);
	margin: var(--space-xl) 0;
}
@media (min-width: 768px) {
	.page-body .wp-block-columns:not(.is-not-stacked-on-mobile),
	.single-body .wp-block-columns:not(.is-not-stacked-on-mobile) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.legal-notice {
	padding: var(--space-md);
	margin-bottom: var(--space-xl);
	border: 1px solid var(--line-subtle);
	color: rgba(240, 235, 228, 0.58);
	font-size: var(--text-sm);
}
.page-body .cta-main,
.single-body .cta-main {
	display: inline-block;
	margin-top: var(--space-md);
	margin-bottom: var(--space-xl);
	text-decoration: none;
}

.index-list {
	list-style: none;
	margin: var(--space-xl) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}
.index-card {
	padding: var(--space-lg);
	border: 1px solid var(--line-subtle);
	background: rgba(255, 255, 255, 0.02);
}
.index-card h2 {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 400;
	line-height: var(--leading-tight);
}
.index-card h2 a {
	text-decoration: none;
	color: var(--blanc-soft);
	transition: color var(--ease-medium);
}
.index-card h2 a:hover { color: var(--or); }
.index-card .index-excerpt {
	margin: 0 0 var(--space-md);
	color: rgba(240, 235, 228, 0.68);
	line-height: var(--leading-lead);
}
.index-card .index-more {
	display: inline-block;
	font-size: var(--text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--or-light);
	transition: color var(--ease-medium);
}
.index-card .index-more:hover { color: var(--blanc-soft); }
.index-meta { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.15em; margin-bottom: var(--space-sm); }
.single-meta {
	font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.2em;
	text-transform: uppercase; margin-bottom: var(--space-lg);
}

/* Curseur V1.3.3 — anneau en D de collier + lanière / rivet */
#cursor,
#cursor-ring,
#cursor-x {
	display: none;
}

html.has-custom-cursor #cursor,
body.has-custom-cursor #cursor {
	display: block;
	position: fixed;
	width: 2.5px;
	height: 2.5px;
	border-radius: 50%;
	background: #e0c892;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	box-shadow:
		0 0 0 1px rgba(8, 8, 8, 0.55),
		0 0 2px rgba(8, 8, 8, 0.35);
	transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), height 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
	opacity: 1;
}

/* Anneau en D (plat en haut, arrondi en bas) — V1.3.4 raffiné */
html.has-custom-cursor #cursor-ring,
body.has-custom-cursor #cursor-ring {
	display: block;
	position: fixed;
	width: 29px;
	height: 31px;
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -40%);
	box-sizing: border-box;
	border: 1.85px solid #c9a96e;
	/* Sommet nettement plus plat, flancs plus droits, base en D */
	border-radius: 3px 3px 55% 55% / 2px 2px 58% 58%;
	background: transparent;
	box-shadow:
		0 0 0 1px rgba(8, 8, 8, 0.5),
		inset 0 0 0 0.5px rgba(8, 8, 8, 0.28);
	opacity: 0.96;
	transition:
		width 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease,
		border-color 0.24s ease,
		transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lanière de cuir */
html.has-custom-cursor #cursor-ring::before,
body.has-custom-cursor #cursor-ring::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -10px;
	width: 6px;
	height: 10px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #16120f 0%, #2a221c 50%, #3a2f24 100%);
	border: 0.75px solid rgba(201, 169, 110, 0.58);
	border-bottom: none;
	border-radius: 1.5px 1.5px 0 0;
	box-sizing: border-box;
	transition: height 0.24s cubic-bezier(0.22, 1, 0.36, 1), width 0.24s ease, top 0.24s ease;
}

/* Rivet sur la lanière */
html.has-custom-cursor #cursor-ring::after,
body.has-custom-cursor #cursor-ring::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -6.5px;
	width: 3.25px;
	height: 3.25px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ead7ad 0%, #c9a96e 42%, #7a6540 100%);
	box-shadow: 0 0 0 0.6px rgba(8, 8, 8, 0.55);
	transition: top 0.24s ease, width 0.24s ease, height 0.24s ease, opacity 0.24s ease;
}

/* Croix de Saint-André — uniquement au survol */
html.has-custom-cursor #cursor-x,
body.has-custom-cursor #cursor-x {
	display: block;
	position: fixed;
	width: 34px;
	height: 34px;
	pointer-events: none;
	z-index: 9997;
	transform: translate(-50%, -40%) rotate(45deg) scale(0.4);
	opacity: 0;
	transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	background:
		linear-gradient(#c9a96e, #c9a96e) center / 30px 1.15px no-repeat,
		linear-gradient(#c9a96e, #c9a96e) center / 1.15px 30px no-repeat;
	filter: drop-shadow(0 0 1px rgba(8, 8, 8, 0.75));
}

html.has-custom-cursor.is-cursor-hover #cursor-x,
body.has-custom-cursor.is-cursor-hover #cursor-x {
	opacity: 0.55;
	transform: translate(-50%, -40%) rotate(45deg) scale(1);
}

html.has-custom-cursor.is-cursor-hover #cursor,
body.has-custom-cursor.is-cursor-hover #cursor {
	width: 2px;
	height: 2px;
	opacity: 1;
}

html.has-custom-cursor.is-cursor-hover #cursor-ring,
body.has-custom-cursor.is-cursor-hover #cursor-ring {
	width: 38px;
	height: 40px;
	border-color: #d4b87a;
	opacity: 1;
	transform: translate(-50%, -40%);
}

html.has-custom-cursor.is-cursor-hover #cursor-ring::before,
body.has-custom-cursor.is-cursor-hover #cursor-ring::before {
	height: 9px;
	top: -9px;
	width: 5.5px;
}

html.has-custom-cursor.is-cursor-hover #cursor-ring::after,
body.has-custom-cursor.is-cursor-hover #cursor-ring::after {
	top: -6px;
	width: 3px;
	height: 3px;
}

html.has-custom-cursor.is-cursor-click #cursor,
body.has-custom-cursor.is-cursor-click #cursor {
	width: 2px;
	height: 2px;
	opacity: 0.8;
}

html.has-custom-cursor.is-cursor-click #cursor-ring,
body.has-custom-cursor.is-cursor-click #cursor-ring {
	width: 22px;
	height: 24px;
	opacity: 0.78;
}

html.has-custom-cursor.is-cursor-click #cursor-ring::before,
body.has-custom-cursor.is-cursor-click #cursor-ring::before {
	height: 6px;
	top: -7px;
}

html.has-custom-cursor.is-cursor-click #cursor-x,
body.has-custom-cursor.is-cursor-click #cursor-x {
	opacity: 0.22;
	transform: translate(-50%, -40%) rotate(45deg) scale(0.72);
}

@media (prefers-reduced-motion: reduce) {
	html.has-custom-cursor #cursor,
	html.has-custom-cursor #cursor-ring,
	html.has-custom-cursor #cursor-ring::before,
	html.has-custom-cursor #cursor-ring::after,
	html.has-custom-cursor #cursor-x,
	body.has-custom-cursor #cursor,
	body.has-custom-cursor #cursor-ring,
	body.has-custom-cursor #cursor-ring::before,
	body.has-custom-cursor #cursor-ring::after,
	body.has-custom-cursor #cursor-x {
		transition: none;
	}
}