/* ==========================================================================
   Casino Days NZ — blueprint.css
   Tokens: TYPO-02 · SPACE-10 · CONT-07 · GEO-09 · MOTION-08 · BP-02
   Components: HEAD-13 FOOT-05 HERO-12 PHEAD-01 GRID-12 FAQ-02 REV-03 CTA-01
               PROSE-06 TABLE-05 LEGAL-02 FORM-07 COOK-07 ERR-07 BYLINE-05
               AUTH-08 BREAD-01
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
	/* Palette (colors.final from spec) */
	--color-primary: #151628;
	--color-accent: #5148ca;
	--color-accent-pressed: #4238b6;
	--color-bg: #ffffff;
	--color-bg-elevated: #f4f4fb;
	--color-gradient-light: #b7b2e7;
	--color-gradient-mid: #716dd3;
	--color-text: #212b39;
	--color-text-muted: #55607a;
	--color-rg-banner: #dc2626;
	/* light text tokens for dark / accent surfaces */
	--color-on-dark: rgba(255, 255, 255, 0.94);
	--color-on-dark-muted: rgba(255, 255, 255, 0.72);
	--color-on-accent: #ffffff;
	--color-on-accent-muted: rgba(255, 255, 255, 0.88);

	/* Typography — TYPO-02 Compact Modular */
	--font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fw-regular: 400;
	--fw-medium: 600;
	--fw-bold: 700;
	--fw-black: 800;
	--fs-h1: 44px;
	--fs-h2: 34px;
	--fs-h3: 26px;
	--fs-h4: 20px;
	--fs-h5: 16px;
	--fs-h6: 14px;
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-micro: 12px;
	--lh-tight: 1.2;
	--lh-normal: 1.55;
	--lh-loose: 1.7;
	--ls-tight: -0.01em;
	--ls-normal: 0;
	--ls-wide: 0.02em;

	/* Spacing — SPACE-10 Mild Geometric */
	--space-2xs: 4px;
	--space-xs: 7px;
	--space-sm: 11px;
	--space-md: 17px;
	--space-lg: 26px;
	--space-xl: 40px;
	--space-2xl: 60px;
	--space-3xl: 90px;

	/* Container — CONT-07 (site width from spec) */
	--container-site: 1320px;
	--container-readable: 720px;
	--container-padding-mobile: 16px;
	--container-padding-tablet: 24px;
	--container-padding-desktop: 48px;
	--container-padding: var(--container-padding-desktop);

	/* Geometry — GEO-09 Glass Refraction */
	--radius-xs: 2px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-pill: 9999px;
	--radius-circle: 50%;
	--border-thin: 1px;
	--border-medium: 2px;
	--shadow-sm: 0 4px 12px rgba(21, 22, 40, 0.10);
	--shadow-md: 0 8px 24px rgba(21, 22, 40, 0.14);
	--shadow-lg: 0 16px 48px rgba(21, 22, 40, 0.20);

	/* Motion — MOTION-08 Mixed Curated */
	--dur-fast: 150ms;
	--dur-base: 220ms;
	--dur-slow: 450ms;
	--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Layout helpers */
	--header-h-desktop: 88px;
	--header-h-mobile: 66px;
}

/* --- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background: var(--color-bg);
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); line-height: var(--lh-tight); color: var(--color-text); }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-pressed); }
button { font-family: inherit; cursor: pointer; }

/* --- a11y ---------------------------------------------------------------- */
.skip-link {
	position: absolute; left: var(--space-md); top: var(--space-md);
	z-index: 200; background: var(--color-primary); color: #fff;
	padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
}
.skip-link:not(:focus) { top: -200px !important; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Shared inner wrappers (single section width) ------------------------ */
.pave-inner, .fenetre-inner, .chapitre-inner, .coffre-inner, .pilier-inner,
.borne-inner, .vitrail-inner, .linteau-inner, .blason-inner, .chevet-inner,
.seuil-inner, .pignon-inner, .fiche-inner, .medaillon-inner, .encart-inner,
.cahier-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--container-padding-desktop);
	width: 100%;
}

/* Section roots (GRID/FAQ/REV/TABLE/LEGAL/FORM) */
.pilier, .borne, .vitrail, .blason, .encart, .chevet { display: block; }
section { padding-block: var(--space-2xl); }
.section-alt { background: var(--color-bg-elevated); }

/* --- RG banner ----------------------------------------------------------- */
.rg-banner {
	background: var(--color-rg-banner); color: #fff;
	font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
	text-align: center; padding: 6px var(--space-md); min-height: 28px;
	display: flex; align-items: center; justify-content: center;
}

/* --- Header — HEAD-13 Big Logo Banner (.pave) ---------------------------- */
.pave {
	position: sticky; top: 0; z-index: 100;
	background: var(--color-bg);
	border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.08);
	transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pave.is-blurred {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: var(--shadow-sm);
}
.pave-inner {
	display: flex; align-items: center; gap: var(--space-lg);
	min-height: var(--header-h-desktop);
}
.pave-logo { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 2px; }
.pave-logo-word {
	font-family: var(--font-display); font-weight: var(--fw-black);
	font-size: 26px; letter-spacing: var(--ls-tight); color: var(--color-primary);
	line-height: 1;
}
.pave-logo-dot { color: var(--color-accent); font-weight: var(--fw-black); font-size: 26px; }
.pave-nav { margin-left: auto; }
.pave-list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-md); list-style: none; }
.pave-link {
	font-family: var(--font-body); font-weight: var(--fw-medium);
	font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide);
	color: var(--color-text); white-space: nowrap;
}
.pave-link:hover, .pave-link[aria-current='page'] { color: var(--color-accent); }
.pave-auth { flex-shrink: 0; }
.pave-auth-btn {
	display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
	padding: 9px var(--space-lg); border: var(--border-thin) solid var(--color-primary);
	border-radius: var(--radius-md); color: var(--color-primary); background: var(--color-bg);
	font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small);
	text-transform: uppercase; letter-spacing: var(--ls-wide);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pave-auth-btn:hover { background: var(--color-primary); color: #fff; }
.pave-toggle {
	display: none; margin-left: auto; flex-shrink: 0;
	width: 44px; height: 44px; border: var(--border-thin) solid rgba(21, 22, 40, 0.15);
	border-radius: var(--radius-sm); background: transparent; padding: 0;
	align-items: center; justify-content: center;
}
.pave-toggle-bar, .pave-toggle-bar::before, .pave-toggle-bar::after {
	content: ''; display: block; width: 20px; height: 2px; background: var(--color-primary); position: relative;
}
.pave-toggle-bar::before { position: absolute; top: -6px; }
.pave-toggle-bar::after { position: absolute; top: 6px; }
.pave-drawer { display: none; }

/* --- Breadcrumbs — BREAD-01 (.pignon) ------------------------------------ */
.pignon { border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.06); }
.pignon-inner { padding-block: var(--space-md); }
.pignon-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); list-style: none; }
.pignon-item { font-size: var(--fs-small); }
.pignon-item a { color: var(--color-text-muted); }
.pignon-item a:hover { color: var(--color-accent); }
.pignon-item[aria-current='page'] { color: var(--color-text); }
.pignon-sep { color: var(--color-text-muted); user-select: none; }
.pignon { padding-block: 0; }

/* --- Hero — HERO-12 Editorial Opening (.chapitre) ------------------------ */
.chapitre { padding-block: var(--space-3xl) 0; }
.chapitre-inner { display: flex; flex-direction: column; align-items: center; }
.chapitre-text { max-width: 820px; text-align: center; }
.chapitre-kicker {
	font-style: italic; font-size: var(--fs-small); color: var(--color-accent);
	letter-spacing: var(--ls-wide); margin-bottom: var(--space-md);
}
.chapitre-title {
	font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: var(--ls-tight);
	color: var(--color-text);
}
.chapitre-lead {
	font-size: var(--fs-h5); font-style: italic; color: var(--color-text-muted);
	line-height: var(--lh-normal); max-width: 600px; margin: var(--space-md) auto 0;
}
.chapitre-meta {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: var(--space-sm); margin-top: var(--space-lg);
	font-size: var(--fs-micro); letter-spacing: var(--ls-wide); color: var(--color-text-muted);
	text-transform: uppercase;
}
.chapitre-figure { width: 100%; margin: var(--space-2xl) 0 0; }
.chapitre-image {
	width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg);
}
.chapitre-caption { font-style: italic; font-size: var(--fs-micro); color: var(--color-text-muted); padding-top: var(--space-xs); text-align: center; }

/* --- Page header — PHEAD-01 (.coffre) ------------------------------------ */
.coffre { padding-block: var(--space-3xl) var(--space-xl); border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.06); }
.coffre-inner { display: flex; flex-direction: column; gap: var(--space-md); }
.coffre-eyebrow {
	font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small);
	text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent);
}
.coffre-title { font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); max-width: 920px; }
.coffre-divider { width: 60px; height: 2px; background: var(--color-accent); }
.coffre-description { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); max-width: 720px; }

/* --- Prose — PROSE-06 Centered Quiet (.cahier) --------------------------- */
.cahier { padding-block: var(--space-xl); }
.cahier-heading { font-size: var(--fs-h3); font-weight: var(--fw-bold); text-align: center; color: var(--color-text); margin-bottom: var(--space-md); max-width: var(--container-readable); margin-inline: auto; }
.cahier-heading::after { content: ''; display: block; width: 48px; height: 2px; background: var(--color-accent); margin: var(--space-sm) auto 0; }
.cahier-body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text); max-width: var(--container-readable); margin-inline: auto; }
.cahier-body p { margin-bottom: var(--space-md); }
.cahier-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.cahier-body ol, .cahier-body ul { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.cahier-body li { margin-bottom: var(--space-xs); }
.cahier-figure { margin: var(--space-lg) 0; }
.cahier-figure img { width: 100%; border-radius: var(--radius-lg); }

/* --- Items grid — GRID-12 Ribbon Initials (.pilier) ---------------------- */
.pilier-heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-lg); }
.pilier-list { list-style: none; display: flex; flex-direction: column; }
.pilier-item { display: flex; gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.08); }
.pilier-initial {
	flex-shrink: 0; width: 96px; height: 96px; background: var(--color-accent);
	border-radius: var(--radius-md); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h1);
}
.pilier-content { flex: 1; }
.pilier-item-title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--space-xs); }
.pilier-item-text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); }

/* --- Reviews — REV-03 Carousel Strip (.vitrail) -------------------------- */
.vitrail-heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-lg); }
.vitrail-rail {
	display: flex; gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: var(--space-md); -webkit-overflow-scrolling: touch;
}
.vitrail-item {
	flex: 0 0 340px; scroll-snap-align: start; min-height: 240px;
	padding: var(--space-lg); background: var(--color-bg);
	border: var(--border-thin) solid rgba(21, 22, 40, 0.12); border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
.vitrail-item-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.vitrail-author { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-text); }
.vitrail-date { font-size: var(--fs-micro); color: var(--color-text-muted); }
.vitrail-rating { margin-bottom: var(--space-sm); }
.vitrail-rating-label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-accent); }
.vitrail-rating-bar { margin-top: var(--space-2xs); width: 60%; height: 4px; border-radius: var(--radius-pill); background: rgba(81, 72, 202, 0.2); overflow: hidden; }
.vitrail-rating-fill { height: 100%; background: var(--color-accent); }
.vitrail-text { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }

/* --- CTA — CTA-01 Full-Width Accent Strip (.linteau) --------------------- */
.linteau { background: var(--color-accent); padding-block: var(--space-2xl); }
.linteau-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.linteau-text { flex: 1; }
.linteau-title { font-size: var(--fs-h2); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--color-on-accent); max-width: 720px; }
.linteau-description { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-on-accent-muted); margin-top: var(--space-sm); max-width: 580px; }
.linteau-button {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	min-width: 220px; height: 56px; padding-inline: var(--space-2xl);
	background: var(--color-bg); color: var(--color-accent);
	font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide);
	border-radius: var(--radius-md);
	transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.linteau-button:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

/* --- FAQ — FAQ-02 Always-Open (.borne) ----------------------------------- */
.borne-heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-lg); }
.borne-list { max-width: 900px; }
.borne-question { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--color-text); margin: 0 0 var(--space-sm); }
.borne-answer { margin: 0 0 var(--space-xl); }
.borne-answer p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }

/* --- Data table — TABLE-05 Compact Dense (.blason) ----------------------- */
.blason-heading { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-bottom: var(--space-md); }
.blason-scroll { overflow-x: auto; }
.blason-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.blason-thead { background: var(--color-bg-elevated); }
.blason-header { padding: var(--space-sm); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-bold); color: var(--color-text); text-align: left; }
.blason-cell { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-small); border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.08); color: var(--color-text-muted); }
.blason-row td:first-child { color: var(--color-text); font-weight: var(--fw-medium); }

/* --- Legal — LEGAL-02 Numbered Sections (.encart) ------------------------ */
.encart-body { counter-reset: legal-section; max-width: var(--container-readable); margin-inline: auto; }
.encart-intro { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text); margin-bottom: var(--space-md); }
.encart-updated { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.encart-section { counter-increment: legal-section; margin-bottom: var(--space-lg); }
.encart-section-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); margin: var(--space-xl) 0 var(--space-md); }
.encart-section-heading::before { content: counter(legal-section) '. '; color: var(--color-accent); font-weight: var(--fw-bold); margin-right: var(--space-2xs); }
.encart-section-paragraph { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.encart-support { background: var(--color-bg-elevated); padding: var(--space-lg); border-radius: var(--radius-md); margin-top: var(--space-xl); }
.encart-support h2 { font-size: var(--fs-h4); margin-bottom: var(--space-sm); }
.encart-contacts-list { list-style: disc; padding-left: var(--space-lg); }
.encart-contacts-item { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.encart-disclaimer { padding: var(--space-md); background: rgba(220, 38, 38, 0.08); border-left: 3px solid var(--color-rg-banner); border-radius: var(--radius-xs); font-size: var(--fs-small); color: var(--color-text); margin-top: var(--space-xl); }

/* --- Contact form — FORM-07 Card + Accent Header (.chevet) --------------- */
.chevet-intro, .chevet-card { max-width: var(--container-readable); margin-inline: auto; }
.chevet-intro { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.chevet-card { position: relative; background: var(--color-bg-elevated); padding: var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.chevet-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--color-accent); }
.chevet-success { display: none; margin-bottom: var(--space-md); padding: var(--space-md); background: rgba(34, 197, 94, 0.12); border: var(--border-thin) solid rgba(34, 197, 94, 0.35); border-radius: var(--radius-md); color: var(--color-text); }
.chevet-success.is-visible { display: block; }
.chevet-form { display: flex; flex-direction: column; gap: var(--space-md); }
.chevet-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.chevet-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text); }
.chevet-input, .chevet-textarea {
	font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text);
	background: var(--color-bg); border: var(--border-thin) solid rgba(21, 22, 40, 0.18);
	border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); width: 100%;
}
.chevet-input { height: 48px; }
.chevet-textarea { min-height: 120px; resize: vertical; }
.chevet-input:focus, .chevet-textarea:focus { outline: none; border-color: var(--color-accent); }
.chevet-submit {
	align-self: flex-start; height: 48px; padding-inline: var(--space-xl); border: none;
	background: var(--color-accent); color: #fff; border-radius: var(--radius-md);
	font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide);
	transition: background var(--dur-fast) var(--ease-out);
}
.chevet-submit:hover { background: var(--color-accent-pressed); }

/* --- Author card — AUTH-08 Minimal Avatar (.medaillon) ------------------- */
.medaillon { display: inline-flex; flex-direction: row; gap: var(--space-md); align-items: center; }
.medaillon-portrait { width: 88px; height: 88px; border-radius: var(--radius-circle); object-fit: cover; object-position: center top; flex-shrink: 0; }
.medaillon-body { display: flex; flex-direction: column; gap: var(--space-2xs); }
.medaillon-name { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.medaillon-name a { color: var(--color-accent); text-decoration: underline; }
.medaillon-role { font-size: var(--fs-small); color: var(--color-text-muted); }
.medaillon-bio { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); margin-top: var(--space-md); max-width: 820px; }
.medaillon-expertise { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.medaillon-tag { font-size: var(--fs-small); padding: var(--space-2xs) var(--space-sm); background: var(--color-bg-elevated); border-radius: var(--radius-pill); color: var(--color-text); }
.medaillon-articles { padding-block: var(--space-lg); margin-top: var(--space-lg); border-top: var(--border-thin) solid rgba(21, 22, 40, 0.08); }
.medaillon-articles-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); margin-bottom: var(--space-md); }
.medaillon-articles-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; }
.medaillon-articles-item { font-size: var(--fs-body); line-height: var(--lh-normal); }
.medaillon-articles-item a { color: var(--color-accent); text-decoration: underline; }
.medaillon-articles-item a:hover { color: var(--color-accent-pressed); }

/* --- Author byline — BYLINE-05 Horizontal Bar (.fiche) ------------------- */
.fiche { background: var(--color-primary); padding-block: var(--space-lg); }
.fiche-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.fiche-author-info { display: flex; align-items: center; gap: var(--space-md); flex: 1; }
.fiche-portrait { width: 56px; height: 56px; border-radius: var(--radius-circle); object-fit: cover; object-position: center top; flex-shrink: 0; }
.fiche-text { display: flex; flex-direction: column; gap: var(--space-2xs); }
.fiche-eyebrow { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-on-dark-muted); }
.fiche-name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-on-dark); }
.fiche-name a { color: var(--color-gradient-light); text-decoration: underline; }
.fiche-name a:hover { color: #fff; }
.fiche-role { font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.fiche-date { font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.fiche-cta {
	flex-shrink: 0; display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-md);
	border: var(--border-thin) solid var(--color-gradient-light); color: var(--color-gradient-light);
	background: var(--color-primary);
	font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); border-radius: var(--radius-md);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fiche-cta:hover { background: var(--color-gradient-light); color: var(--color-primary); }

/* --- Error — ERR-07 Geometric Pattern (.seuil) --------------------------- */
.seuil {
	padding-block: var(--space-3xl);
	background-image:
		linear-gradient(rgba(81, 72, 202, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(81, 72, 202, 0.07) 1px, transparent 1px);
	background-size: 40px 40px;
}
.seuil-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; }
.seuil-title { font-size: var(--fs-h1); font-weight: var(--fw-black); color: var(--color-text); }
.seuil-text { font-size: var(--fs-h5); color: var(--color-text-muted); line-height: var(--lh-normal); max-width: 600px; }
.seuil-button {
	height: 52px; display: inline-flex; align-items: center; padding-inline: var(--space-xl);
	background: var(--color-accent); color: #fff; border-radius: var(--radius-md);
	font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seuil-button:hover { background: var(--color-accent-pressed); color: #fff; }

/* --- Content figures (per-page images) ----------------------------------- */
.figrow { padding-block: var(--space-lg); }
.figrow-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.figrow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); }
.figrow-figure { margin: 0; }
.figrow-figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* --- Footer — FOOT-05 Four-Column (.fenetre) ----------------------------- */
.fenetre { background: var(--color-primary); color: var(--color-on-dark); padding-block: var(--space-2xl); }
.fenetre-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-xl); }
.fenetre-brand-word { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 24px; color: #fff; }
.fenetre-tagline { font-size: var(--fs-small); color: var(--color-on-dark-muted); line-height: var(--lh-normal); margin-top: var(--space-sm); max-width: 320px; }
.fenetre-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: var(--ls-wide); color: #fff; margin-bottom: var(--space-md); }
.fenetre-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.fenetre-list a { font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.fenetre-list a:hover { color: var(--color-gradient-light); }
.fenetre-bottom { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin: var(--space-xl) auto 0; padding: var(--space-lg) var(--container-padding-desktop) 0; border-top: var(--border-thin) solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; text-align: center; }
.fenetre-copyright { font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.fenetre-disclaimer { font-size: var(--fs-micro); color: var(--color-on-dark-muted); }

/* --- Cookie banner — COOK-07 Discrete Toast (.relief) -------------------- */
.relief {
	position: fixed; inset-block-end: var(--space-md); inset-inline-end: var(--space-md);
	z-index: 90; width: 320px; max-width: calc(100vw - 2 * var(--space-md));
	display: none; background: var(--color-bg); border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-sm); padding: var(--space-md); box-shadow: var(--shadow-md);
}
.relief.is-visible { display: block; }
.relief-message { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text); margin-bottom: var(--space-sm); }
.relief-actions { display: flex; gap: var(--space-sm); }
.relief-button { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); border: none; background: transparent; padding: 6px 4px; }
.relief-button--accept { color: var(--color-accent); }
.relief-button--accept:hover { color: var(--color-accent-pressed); }
.relief-button--decline { color: var(--color-text-muted); }
.relief-button--decline:hover { color: var(--color-text); }

/* --- Tablet / mobile ----------------------------------------------------- */
@media (max-width: 1179px) {
	.pave-nav, .pave-auth { display: none; }
	.pave-toggle { display: inline-flex; }
	.pave-drawer.is-open {
		display: block; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--color-bg); border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.08);
		box-shadow: var(--shadow-md); padding: var(--space-md) var(--container-padding-desktop) var(--space-lg);
	}
	.pave { position: sticky; }
	.pave-drawer-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
	.pave-drawer-link { display: block; padding: var(--space-sm) 0; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small); color: var(--color-text); border-bottom: var(--border-thin) solid rgba(21, 22, 40, 0.06); }
	.pave-drawer-link:hover, .pave-drawer-link[aria-current='page'] { color: var(--color-accent); }
	.pave-drawer-auth { margin-top: var(--space-md); display: inline-flex; padding: 10px var(--space-lg); border: var(--border-thin) solid var(--color-primary); border-radius: var(--radius-md); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small); color: var(--color-primary); }
	.fenetre-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 819px) {
	:root {
		--fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 18px; --fs-h5: 15px; --fs-h6: 13px;
		--fs-body: 15px; --fs-small: 13px; --fs-micro: 11px;
		--container-padding: var(--container-padding-tablet);
	}
	.pave-inner, .fenetre-inner, .chapitre-inner, .coffre-inner, .pilier-inner,
	.borne-inner, .vitrail-inner, .linteau-inner, .blason-inner, .chevet-inner,
	.seuil-inner, .pignon-inner, .fiche-inner, .medaillon-inner,
	.cahier-inner, .encart-inner, .figrow-inner, .pave-drawer.is-open,
	.fenetre-bottom { padding-inline: var(--container-padding-tablet); }
	.linteau-inner { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
	.linteau-button { width: 100%; }
	.fiche-inner { flex-direction: column; align-items: flex-start; }
	.fiche-cta { width: 100%; justify-content: center; }
	.pilier-item { flex-direction: column; gap: var(--space-md); }
	.pilier-initial { width: 72px; height: 72px; }
	.medaillon { flex-direction: column; text-align: center; align-items: center; }
	.medaillon-portrait { width: 96px; height: 96px; }
}

@media (max-width: 719px) {
	:root { --container-padding: var(--container-padding-mobile); }
	.pave-inner, .fenetre-inner, .chapitre-inner, .coffre-inner, .pilier-inner,
	.borne-inner, .vitrail-inner, .linteau-inner, .blason-inner, .chevet-inner,
	.seuil-inner, .pignon-inner, .fiche-inner, .medaillon-inner,
	.cahier-inner, .encart-inner, .figrow-inner, .pave-drawer.is-open,
	.fenetre-bottom { padding-inline: var(--container-padding-mobile); }
	.pave-inner { min-height: var(--header-h-mobile); }
	.fenetre-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.vitrail-item { flex-basis: 280px; }
	.relief { padding: 12px 14px; }
	.relief-message { font-size: 13px; line-height: 1.35; }
	.relief-actions { flex-direction: column; }
	.relief-button { min-height: 36px; }
}

[class*='-fig'] img, [class*='-media'] img, main figure img, article figure img { width: 100% !important; max-height: 58vh !important; object-fit: cover; object-position: center; }