/* ===========================================================
   Casibom Casino — finish.css
   Tokens (TYPO-05, SPACE-02, CONT-02, BP-01, GEO-05, MOTION-08)
   =========================================================== */

:root {
	/* color tokens (after ±2% shift, .final values) */
	--color-primary: #f6ae22;
	--color-accent: #ffba02;
	--color-accent-pressed: #d0a701;
	--color-bg: #151414;
	--color-bg-elevated: #1c1b1b;
	--color-gradient-light: #36383a;
	--color-gradient-mid: #ffffff;
	--color-text: #ffffff;
	--color-text-muted: #c2c0c1;
	--color-border: rgba(255, 255, 255, 0.10);
	--color-border-strong: rgba(255, 255, 255, 0.18);
	--color-rg-banner: #dc2626;

	/* TYPO-05 — base 17/1.55, display compressed */
	--font-display: 'Bebas Neue', 'Lato', system-ui, sans-serif;
	--font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fs-base: 17px;
	--lh-base: 1.55;
	--fs-xs: 0.78rem;
	--fs-sm: 0.88rem;
	--fs-md: 1rem;
	--fs-lg: 1.18rem;
	--fs-xl: 1.45rem;
	--fs-2xl: 2rem;
	--fs-3xl: 2.6rem;
	--fs-4xl: 3.4rem;
	--ls-display: 0.04em;

	/* SPACE-02 — moderate, 6/12/18/24/40/64 */
	--space-3xs: 4px;
	--space-2xs: 6px;
	--space-xs: 12px;
	--space-sm: 18px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;

	/* CONT-02 — 980 site, 640 readable */
	--container-site: 980px;
	--container-readable: 640px;
	--container-padding-desktop: 32px;
	--container-padding-mobile: 18px;

	/* BP-01 — std */
	--bp-mobile: 720px;
	--bp-tablet: 1024px;

	/* GEO-05 — light geometry, small radius (4-8) */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
	--shadow-glow: 0 0 0 1px rgba(246, 174, 34, 0.35);

	/* MOTION-08 — moderate, ease-out emphasised */
	--ease-out: cubic-bezier(0.16, 0.84, 0.32, 1);
	--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 140ms;
	--dur-base: 220ms;
	--dur-slow: 380ms;

	/* layout */
	--header-height-desktop: 96px;
	--header-height-mobile: 72px;
}

/* ===== Skip link a11y ===== */
.skip-link {
	position: absolute;
	left: 8px;
	top: -200px !important;
	z-index: 9999;
	background: var(--color-accent);
	color: #000;
	padding: 8px 14px;
	border-radius: var(--radius-md);
	font-weight: 700;
}
.skip-link:focus { top: 8px !important; }

/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html {
	font-size: var(--fs-base);
	color-scheme: dark;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: var(--font-body);
	line-height: var(--lh-base);
	color: var(--color-text);
	background: var(--color-bg);
	padding-top: calc(var(--header-height-desktop) + 28px);
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--color-accent-pressed); }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	letter-spacing: var(--ls-display);
	line-height: 1.1;
	margin: 0 0 var(--space-sm);
	font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
button { font: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	html { scroll-behavior: auto; }
}

/* ===== RG-banner (responsible gaming, fixed above header) ===== */
.rg-banner {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 101;
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-rg-banner);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	text-transform: uppercase;
}

/* ===========================================================
   HEADER — HEAD-15 (single row, centered logo, nav both sides)
   STICKY-02 — fixed with shrink-on-scroll
   NAV-01 — inline single row
   =========================================================== */
.pupitre {
	position: fixed;
	top: 28px;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(21, 20, 20, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--dur-base) var(--ease-std),
	            height var(--dur-base) var(--ease-std),
	            box-shadow var(--dur-base) var(--ease-std);
}
.pupitre.is-shrunk {
	background: rgba(21, 20, 20, 0.98);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.pupitre-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
	height: var(--header-height-desktop);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-md);
	transition: height var(--dur-base) var(--ease-std);
}
.pupitre.is-shrunk .pupitre-inner { height: 76px; }

/* nav split — left and right around center logo */
.pupitre-nav-left,
.pupitre-nav-right {
	display: flex;
	align-items: center;
	min-width: 0;
}
.pupitre-nav-left { justify-content: flex-end; }
.pupitre-nav-right { justify-content: flex-start; }

.pupitre-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 26px);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.pupitre-nav a {
	color: var(--color-text);
	text-decoration: none;
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.92rem;
	font-weight: 700;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: color var(--dur-fast) var(--ease-std),
	            border-color var(--dur-fast) var(--ease-std);
}
.pupitre-nav a:hover,
.pupitre-nav a[aria-current='page'] {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* center logo */
.pupitre-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.pupitre-logo, .pupitre-logo img, .pupitre-logo-img { flex-shrink: 0; }
.pupitre-logo img, .pupitre-logo-img {
	height: 88px;
	width: auto;
	display: block;
	mix-blend-mode: screen;
	transition: height var(--dur-base) var(--ease-std);
}
.pupitre.is-shrunk .pupitre-logo img { height: 64px; }

/* burger (mobile only) */
.pupitre-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	margin-left: auto !important;
	flex-shrink: 0;
}
.pupitre-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.pupitre-toggle span::before,
.pupitre-toggle span::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: currentColor;
}
.pupitre-toggle span::before { top: -7px; }
.pupitre-toggle span::after { top: 7px; }

/* mobile drawer */
.pupitre-mobile {
	display: none;
	position: fixed;
	top: calc(var(--header-height-mobile) + 28px);
	left: 0; right: 0; bottom: 0;
	background: var(--color-bg);
	padding: var(--space-md);
	overflow-y: auto;
	border-top: 1px solid var(--color-border);
	z-index: 99;
}
.pupitre-mobile.is-open { display: block; }
.pupitre-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pupitre-mobile a {
	display: block;
	padding: 14px 4px;
	color: var(--color-text);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.05rem;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
}
.pupitre-mobile a[aria-current='page'] { color: var(--color-accent); }

/* ===========================================================
   HERO — HERO-02 (image right, text left, dark gradient frame)
   =========================================================== */
.enseigne {
	position: relative;
	padding-block: var(--space-2xl) var(--space-xl);
	background:
		radial-gradient(ellipse 60% 70% at 80% 20%, rgba(246, 174, 34, 0.10), transparent 60%),
		linear-gradient(180deg, #1a1818 0%, var(--color-bg) 100%);
	overflow: hidden;
}
.enseigne-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}
.enseigne-text { min-width: 0; }
.enseigne-eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--color-accent);
	padding: 6px 12px;
	border: 1px solid rgba(246, 174, 34, 0.4);
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-md);
}
.enseigne-title {
	margin: 0 0 var(--space-md);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.enseigne-subtitle {
	color: var(--color-text-muted);
	font-size: var(--fs-lg);
	max-width: 480px;
	margin: 0 0 var(--space-lg);
}
.enseigne-actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}
.enseigne-cta,
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: var(--color-accent);
	color: #0e0d0d !important;
	border: none;
	border-radius: var(--radius-md);
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-std),
	            transform var(--dur-fast) var(--ease-std),
	            box-shadow var(--dur-fast) var(--ease-std);
}
.enseigne-cta:hover,
.btn-primary:hover {
	background: var(--color-accent-pressed);
	color: #0e0d0d !important;
	box-shadow: var(--shadow-glow);
	transform: translateY(-1px);
}
.enseigne-cta-secondary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: transparent;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-std),
	            color var(--dur-fast) var(--ease-std);
}
.enseigne-cta-secondary:hover,
.btn-secondary:hover {
	border-color: var(--color-accent);
	color: var(--color-accent) !important;
	background: transparent;
}

.enseigne-media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
	background: #0e0d0d;
}
.enseigne-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.enseigne-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, transparent 30%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}

/* ===========================================================
   PAGE-HEADER — PHEAD-04 (centered, dotted divider above)
   =========================================================== */
.nef {
	padding-block: var(--space-2xl) var(--space-lg);
	background:
		radial-gradient(ellipse 40% 60% at 50% 0%, rgba(246, 174, 34, 0.08), transparent 60%),
		var(--color-bg);
	text-align: center;
	border-bottom: 1px dotted var(--color-border);
}
.nef-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.nef-eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--color-accent);
	margin-bottom: var(--space-sm);
}
.nef-title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(2rem, 4.4vw, 3rem);
}
.nef-lead {
	color: var(--color-text-muted);
	max-width: 700px;
	margin: 0 auto;
	font-size: var(--fs-md);
}

/* ===========================================================
   PROSE — PROSE-06 (drop cap on first paragraph, accent rules)
   =========================================================== */
.affiche {
	padding-block: var(--space-xl);
}
.affiche-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.affiche h2 {
	margin-top: var(--space-xl);
	padding-bottom: var(--space-2xs);
	border-bottom: 1px solid var(--color-border);
	position: relative;
}
.affiche h2::after {
	content: '';
	position: absolute;
	left: 0; bottom: -1px;
	width: 72px;
	height: 2px;
	background: var(--color-accent);
}
.affiche h3 {
	margin-top: var(--space-lg);
	color: var(--color-accent);
}
.affiche p,
.affiche ul,
.affiche ol {
	font-size: var(--fs-md);
	color: var(--color-text);
}
.affiche p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 3.4rem;
	float: left;
	line-height: 0.9;
	padding-right: 12px;
	padding-top: 6px;
	color: var(--color-accent);
}
.affiche a { font-weight: 600; }
.affiche-figure {
	margin: var(--space-lg) 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
}
.affiche-figure img {
	width: 100%;
	height: auto;
	display: block;
}
.affiche-figure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-md);
	margin: var(--space-lg) 0;
}
.affiche-figure-grid figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
}
.affiche-figure-grid img { width: 100%; height: auto; display: block; }

/* ===========================================================
   ITEMS-GRID — GRID-02 (2-up cards, numbered badge)
   =========================================================== */
.vignette {
	padding-block: var(--space-xl);
	background:
		linear-gradient(180deg, var(--color-bg) 0%, #1a1818 100%);
}
.vignette-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.vignette-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}
.vignette-title { margin: 0; }
.vignette-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vignette;
}
.vignette-item {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	position: relative;
	counter-increment: vignette;
	transition: border-color var(--dur-base) var(--ease-std),
	            transform var(--dur-base) var(--ease-out);
}
.vignette-item:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}
.vignette-item::before {
	content: counter(vignette, decimal-leading-zero);
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	font-family: var(--font-display);
	font-size: 1.4rem;
	color: var(--color-accent);
	letter-spacing: 0.04em;
}
.vignette-item-title {
	font-size: var(--fs-lg);
	margin: 0 0 var(--space-2xs);
	padding-right: 60px;
}
.vignette-item-text {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin: 0;
}

/* ===========================================================
   FAQ — FAQ-10 (numbered accordion with chevron)
   =========================================================== */
.panneau {
	padding-block: var(--space-xl);
}
.panneau-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.panneau-title { margin-bottom: var(--space-lg); }
.panneau-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.panneau-item {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-std);
}
.panneau-item.is-open { border-color: var(--color-accent); }
.panneau-question {
	width: 100%;
	background: transparent;
	border: none;
	color: var(--color-text);
	padding: var(--space-md);
	text-align: left;
	font-size: var(--fs-md);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	cursor: pointer;
	font-family: var(--font-body);
}
.panneau-question:hover { color: var(--color-accent); }
.panneau-question-icon {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var(--dur-base) var(--ease-out);
	color: var(--color-accent);
}
.panneau-item.is-open .panneau-question-icon {
	transform: rotate(180deg);
	border-color: var(--color-accent);
}
.panneau-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--dur-slow) var(--ease-out);
}
.panneau-item.is-open .panneau-answer { max-height: 800px; }
.panneau-answer-inner {
	padding: 0 var(--space-md) var(--space-md);
	color: var(--color-text-muted);
	font-size: var(--fs-md);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
}

/* ===========================================================
   REVIEWS — REV-09 (3-column grid, star row, dated)
   =========================================================== */
.passerelle {
	padding-block: var(--space-xl);
	background:
		linear-gradient(180deg, #1a1818 0%, var(--color-bg) 100%);
}
.passerelle-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.passerelle-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
	gap: var(--space-md);
}
.passerelle-rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}
.passerelle-rating strong {
	color: var(--color-accent);
	font-family: var(--font-display);
	font-size: 1.6rem;
	letter-spacing: 0.04em;
}
.passerelle-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.passerelle-item {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}
.passerelle-stars {
	font-family: monospace;
	color: var(--color-accent);
	letter-spacing: 2px;
	font-size: 0.95rem;
}
.passerelle-author {
	font-weight: 700;
	font-size: var(--fs-md);
	margin: 0;
}
.passerelle-text {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	margin: var(--space-2xs) 0 0;
}

/* ===========================================================
   CTA-BLOCK — CTA-08 (full-bleed gradient strip)
   =========================================================== */
.cadre {
	padding-block: var(--space-xl);
}
.cadre-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.cadre-panel {
	background:
		radial-gradient(ellipse 60% 80% at 100% 50%, rgba(246, 174, 34, 0.22), transparent 60%),
		linear-gradient(135deg, #2b2725 0%, #1a1818 100%);
	border: 1px solid rgba(246, 174, 34, 0.30);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-lg);
	align-items: center;
}
.cadre-title {
	margin: 0 0 var(--space-2xs);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.cadre-text {
	color: var(--color-text-muted);
	margin: 0;
	max-width: 580px;
}

/* ===========================================================
   DATA-TABLE — TABLE-02 (bordered, accent header row)
   =========================================================== */
.relief {
	padding-block: var(--space-lg);
}
.relief-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
	overflow-x: auto;
}
.relief-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.relief-table thead {
	background: linear-gradient(180deg, rgba(246, 174, 34, 0.25), rgba(246, 174, 34, 0.10));
}
.relief-table th {
	text-align: left;
	padding: 14px 16px;
	font-family: var(--font-display);
	letter-spacing: 0.04em;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border-strong);
	font-weight: 700;
}
.relief-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
}
.relief-table tr:last-child td { border-bottom: none; }
.relief-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }

/* ===========================================================
   LEGAL-SECTION — LEGAL-01 (left-aligned doc, numbered headings)
   =========================================================== */
.tympan {
	padding-block: var(--space-xl);
}
.tympan-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.tympan-intro {
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
	border-left: 2px solid var(--color-accent);
	padding-left: var(--space-md);
	margin: 0 0 var(--space-lg);
}
.tympan-section {
	margin-bottom: var(--space-lg);
}
.tympan-section h2 {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-2xs);
}
.tympan-section p { color: var(--color-text); }
.tympan-contacts {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	list-style: none;
	margin: var(--space-lg) 0;
}
.tympan-contacts li {
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
}
.tympan-contacts li:last-child { border-bottom: none; }
.tympan-disclaimer {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-style: italic;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

/* ===========================================================
   CONTACT-FORM — FORM-05 (single column, focus accent)
   =========================================================== */
.cloche {
	padding-block: var(--space-xl);
}
.cloche-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.cloche-intro {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
	max-width: 700px;
}
.cloche-form {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	display: grid;
	gap: var(--space-md);
}
.cloche-field { display: grid; gap: var(--space-2xs); }
.cloche-label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text);
}
.cloche-input,
.cloche-textarea {
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	font: inherit;
	transition: border-color var(--dur-fast) var(--ease-std);
}
.cloche-input:focus,
.cloche-textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}
.cloche-textarea { min-height: 140px; resize: vertical; }
.cloche-submit {
	justify-self: start;
}
.cloche-success {
	display: none;
	background: rgba(246, 174, 34, 0.10);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	color: var(--color-text);
}
.cloche-success.is-visible { display: block; }

/* ===========================================================
   AUTHOR-CARD — AUTH-05 (portrait left, bio right, expertise pills)
   =========================================================== */
.linteau {
	padding-block: var(--space-xl);
}
.linteau-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.linteau-card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--space-lg);
	align-items: start;
}
.linteau-portrait {
	width: 180px;
	height: 180px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: #0e0d0d;
}
.linteau-portrait img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.linteau-name {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 4px;
}
.linteau-role {
	color: var(--color-accent);
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.92rem;
	margin: 0 0 var(--space-sm);
}
.linteau-bio {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-md);
}
.linteau-expertise {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.linteau-expertise li {
	background: rgba(246, 174, 34, 0.10);
	border: 1px solid rgba(246, 174, 34, 0.30);
	color: var(--color-text);
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
}
.linteau-articles {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}
.linteau-articles-heading {
	font-size: var(--fs-xl);
	margin: 0 0 var(--space-md);
}
.linteau-articles-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.linteau-articles-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
}
.linteau-articles-item:last-child { border-bottom: none; }

/* ===========================================================
   AUTHOR-BYLINE — BYLINE-07 (boxed footer block with portrait + bio)
   =========================================================== */
.voussure {
	padding-block: var(--space-xl);
}
.voussure-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.voussure-card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-md);
	align-items: center;
}
.voussure-portrait {
	width: 72px; height: 72px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: #0e0d0d;
}
.voussure-portrait img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.voussure-meta { min-width: 0; }
.voussure-label {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}
.voussure-name {
	font-size: var(--fs-lg);
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
}
.voussure-name a {
	color: var(--color-text);
	text-decoration: none;
}
.voussure-name a:hover { color: var(--color-accent); }
.voussure-role {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	margin: 2px 0 0;
}

/* ===========================================================
   COOKIE-BANNER — COOK-06 (bottom pill, 3 buttons, sliding in)
   =========================================================== */
.vitrine {
	position: fixed;
	bottom: var(--space-md);
	left: var(--space-md);
	right: var(--space-md);
	max-width: 640px;
	margin: 0 auto;
	z-index: 90;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-md);
	display: none;
}
.vitrine.is-visible { display: block; animation: vitrine-in var(--dur-slow) var(--ease-out); }
@keyframes vitrine-in {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
.vitrine-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-md);
	align-items: center;
}
.vitrine-message {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin: 0;
}
.vitrine-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.vitrine-button {
	border: none;
	padding: 10px 16px;
	border-radius: var(--radius-md);
	font-family: var(--font-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85rem;
	font-weight: 700;
}
.vitrine-button-accept {
	background: var(--color-accent);
	color: #0e0d0d;
}
.vitrine-button-accept:hover { background: var(--color-accent-pressed); }
.vitrine-button-decline {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
}
.vitrine-button-decline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ===========================================================
   ERROR-BLOCK — ERR-06 (big numeric 404, centered)
   =========================================================== */
.dossier {
	padding-block: var(--space-2xl);
	text-align: center;
}
.dossier-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.dossier-code {
	font-family: var(--font-display);
	font-size: clamp(8rem, 20vw, 14rem);
	color: var(--color-accent);
	line-height: 0.9;
	margin: 0;
	letter-spacing: -0.04em;
}
.dossier-title {
	margin: 0 0 var(--space-md);
}
.dossier-text {
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0 auto var(--space-lg);
}

/* ===========================================================
   FOOTER — FOOT-10 (3-col grid, license band, payment strip)
   =========================================================== */
.brochure {
	background: #0d0c0c;
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-xl) var(--space-md);
	color: var(--color-text-muted);
}
.brochure-inner {
	max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
	margin: 0 auto;
	padding-inline: var(--container-padding-desktop);
}
.brochure-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}
.brochure-brand-logo {
	height: 56px;
	width: auto;
	margin-bottom: var(--space-sm);
	mix-blend-mode: screen;
}
.brochure-brand-text {
	font-size: var(--fs-sm);
	max-width: 320px;
	margin: 0;
}
.brochure-col-heading {
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text);
	font-size: 0.92rem;
	margin: 0 0 var(--space-sm);
}
.brochure-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.brochure-list a {
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: var(--fs-sm);
}
.brochure-list a:hover { color: var(--color-accent); }

.brochure-license {
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	align-items: center;
	margin-bottom: var(--space-md);
}
.brochure-badge {
	background: rgba(220, 38, 38, 0.18);
	border: 1px solid rgba(220, 38, 38, 0.45);
	color: #fca5a5;
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-size: 0.92rem;
	flex-shrink: 0;
}
.brochure-license-text {
	font-size: var(--fs-xs);
	margin: 0;
	color: var(--color-text-muted);
}

.brochure-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	font-size: var(--fs-xs);
}
.brochure-copy { margin: 0; }
.brochure-tagline { margin: 0; color: var(--color-text-muted); }
.brochure-brand { min-width: 0; }
.brochure-col { min-width: 0; }
.linteau-body { min-width: 0; }

/* ===========================================================
   Sticky strategy STICKY-02 helpers (handled in HEAD-15 above)
   =========================================================== */

/* ===========================================================
   Utility
   =========================================================== */
.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;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1024px) {
	.pupitre-nav { gap: 12px; }
	.pupitre-nav a { font-size: 0.82rem; }
	.enseigne-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.cadre-panel { grid-template-columns: 1fr; }
	.passerelle-list { grid-template-columns: repeat(2, 1fr); }
	.vignette-list { grid-template-columns: 1fr; }
	.linteau-card { grid-template-columns: 1fr; }
	.linteau-portrait { width: 140px; height: 140px; }
	.brochure-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	body { padding-top: calc(var(--header-height-mobile) + 28px); }
	.pupitre-inner {
		height: var(--header-height-mobile);
		grid-template-columns: 1fr auto;
	}
	.pupitre.is-shrunk .pupitre-inner { height: 64px; }
	.pupitre-nav-left,
	.pupitre-nav-right { display: none; }
	.pupitre-logo {
		justify-self: start;
		justify-content: flex-start;
	}
	.pupitre-logo img { height: 60px; }
	.pupitre.is-shrunk .pupitre-logo img { height: 50px; }
	.pupitre-toggle { display: flex; }

	.enseigne { padding-block: var(--space-xl) var(--space-lg); }
	.enseigne-title { font-size: 2rem; }
	.nef { padding-block: var(--space-xl) var(--space-md); }
	.cadre-panel { padding: var(--space-lg); }
	.passerelle-list { grid-template-columns: 1fr; }
	.brochure-grid { grid-template-columns: 1fr; }
	.brochure-bottom { flex-direction: column; align-items: flex-start; }
	.vitrine {
		left: var(--space-2xs); right: var(--space-2xs); bottom: var(--space-2xs);
	}
	.vitrine, .vitrine-inner {
		padding: 12px 14px !important;
		gap: 8px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}
	.vitrine-title, .vitrine-heading { display: none !important; }
	.vitrine-button, .vitrine button {
		padding: 8px 14px !important;
		font-size: 12px !important;
		min-height: 36px !important;
	}
	.vitrine-inner { grid-template-columns: 1fr; }
	.vitrine-actions { width: 100%; justify-content: stretch; }
	.vitrine-button { flex: 1; }
	.linteau-card { grid-template-columns: 1fr; }
	.affiche p:first-of-type::first-letter { font-size: 2.4rem; }
}