/* ============================================================
   Spinanga Casino — plate.css
   TYPO-07 · SPACE-07 · CONT (1420) · GEO-01 · MOTION-03 · BP-06 · NAME-06
   Desktop-first media queries (max-width). Breakpoints BP-06.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
	/* Colors */
	--brand-color: #001c2b;
	--accent: #00f8be;
	--highlight-active: #00dda2;
	--canvas: #001f32;
	--panel-bg: #04283f;
	--gradient-from: #00e3da;
	--gradient-mid: #fddc07;
	--text-color: #ffffff;
	--ink-soft: #c0bfc0;
	--alert-bg: #dc2626;

	/* Fonts */
	--display-font: 'Inter', 'Fira Sans Condensed', 'Rubik', sans-serif;
	--body-font: 'Oswald', 'Fira Sans Condensed', 'Rubik', sans-serif;

	/* Typography — TYPO-07 Airy Generous (desktop) */
	--text-h1: 48px;
	--size-h2: 36px;
	--type-h3: 26px;
	--text-h4: 21px;
	--text-h5: 18px;
	--size-h6: 16px;
	--size-body: 19px;
	--text-sm: 16px;
	--size-xs: 14px;

	--leading-tight: 1.2;
	--lh-base: 1.7;
	--line-loose: 2.0;

	--letter-tight: -0.01em;
	--ls-normal-x: 0;
	--letter-wide: 0.02em;

	--fw-normal: 400;
	--weight-medium: 500;
	--font-bold: 600;

	/* Spacing — SPACE-07 Fibonacci-like */
	--gap-2xs: 3px;
	--gutter-xs: 8px;
	--gap-sm: 13px;
	--gutter-md: 21px;
	--spacing-lg: 34px;
	--gap-xl: 55px;
	--gutter-2xl: 89px;
	--gutter-3xl: 144px;

	/* Section vertical rhythm (A-09 safe: 34+34 = 68 <= 110) */
	--sec-y-x: var(--spacing-lg);

	/* Container — CONT (1420) */
	--container: 1420px;
	--measure: 720px;
	--gutter-mobile: 16px;
	--container-padding-tablet-x: 32px;
	--inset-desktop: 24px;

	/* Geometry — GEO-01 Sharp Industrial (radius 0) */
	--rounded-xs: 0;
	--corner-sm: 0;
	--round-md: 0;
	--corner-lg: 0;
	--round-full: 0;
	--round-circle: 50%;
	--shadow-xs-x: none;
	--shade-sm: 0 1px 0 rgba(0, 0, 0, 0.08);
	--depth-md: 0 2px 0 rgba(0, 0, 0, 0.12);
	--depth-lg: 0 4px 0 rgba(0, 0, 0, 0.16);
	--border-width: 1px;
	--border-medium-x: 2px;
	--border-thick-x: 4px;

	/* Motion — MOTION-03 Dynamic Modern */
	--duration-fast: 200ms;
	--transition-base: 300ms;
	--transition-slow: 500ms;
	--timing: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-x: cubic-bezier(0.7, 0, 0.84, 0);
	--ease-in-out-x: cubic-bezier(0.83, 0, 0.17, 1);
	--ease-spring-x: cubic-bezier(0.34, 1.56, 0.64, 1);

	--header-h-x: 152px;
}

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

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--canvas);
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: var(--size-body);
	font-weight: var(--fw-normal);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	padding-top: var(--header-h-x);
}

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

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--text-color);
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: var(--gutter-md);
	top: var(--gutter-md);
	z-index: 200;
	background: var(--accent);
	color: var(--brand-color);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	padding: var(--gutter-xs) var(--gutter-md);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
}

.skip-link:not(:focus) {
	top: -200px !important;
}

.page {
	display: block;
}

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

/* ============================================================
   HEADER — HEAD-03 Compact Top Bar + Main Bar · STICKY-01
   ============================================================ */
.calice-haut {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--canvas);
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.calice-haut-topbar {
	background: var(--brand-color);
}

.calice-haut-topbar-bar {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter-md);
}

.calice-haut-info {
	font-size: var(--size-xs);
	color: var(--ink-soft);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calice-haut-auth-btn {
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	padding-block: var(--gap-2xs);
	padding-inline: var(--spacing-lg);
	border: var(--border-width) solid var(--accent);
}

.calice-haut-auth-btn--register-x {
	background: var(--accent);
	color: var(--brand-color);
}

.calice-haut-auth-btn--register-x:hover {
	background: var(--highlight-active);
	color: var(--brand-color);
}

.calice-haut-main {
	background: var(--canvas);
}

.calice-haut-main-bar {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--gutter-md);
	min-height: 104px;
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.calice-haut-logo,
.calice-haut-logo img {
	flex-shrink: 0;
}

.calice-haut-logo {
	display: inline-flex;
	align-items: center;
}

.calice-haut-logo-img {
	height: 88px;
	width: auto;
	mix-blend-mode: normal;
}

.calice-haut-toggle {
	margin-left: auto !important;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	padding: 8px;
}

.calice-haut-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--text-color);
}

.calice-haut-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.calice-haut-nav-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--gutter-md);
}

.calice-haut-nav-item {
	display: flex;
	align-items: center;
}

.calice-haut-nav-item--more {
	position: relative;
}

.calice-haut-link {
	font-family: var(--body-font);
	font-weight: var(--fw-normal);
	font-size: var(--text-sm);
	color: var(--ink-soft);
	white-space: nowrap;
	padding-block: var(--gap-2xs);
	transition: color var(--duration-fast) var(--timing);
}

.calice-haut-link:hover {
	color: var(--text-color);
}

body[data-current='/'] .calice-haut-nav-list a[data-nav='/'],
body[data-current='/bonus/'] .calice-haut-nav-list a[data-nav='/bonus/'],
body[data-current='/member-login/'] .calice-haut-nav-list a[data-nav='/member-login/'],
body[data-current='/equipe/'] .calice-haut-nav-list a[data-nav='/equipe/'],
body[data-current='/code-promo/'] .calice-haut-nav-list a[data-nav='/code-promo/'],
body[data-current='/machines-a-sous/'] .calice-haut-nav-list a[data-nav='/machines-a-sous/'],
body[data-current='/get-in-touch/'] .calice-haut-nav-list a[data-nav='/get-in-touch/'] {
	color: var(--accent);
}

.calice-haut-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-2xs);
	background: transparent;
	border: 0;
	color: var(--ink-soft);
	font: inherit;
	font-family: var(--body-font);
	font-size: var(--text-sm);
	padding: var(--gap-2xs) var(--gutter-xs);
}

.calice-haut-more-toggle:hover {
	color: var(--text-color);
}

.calice-haut-more-chevron {
	transition: transform var(--duration-fast) var(--timing);
}

.calice-haut-more-toggle[aria-expanded='true'] .calice-haut-more-chevron {
	transform: rotate(180deg);
}

.calice-haut-more-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 0;
	padding: var(--gutter-xs) 0;
	background: var(--panel-bg);
	border: var(--border-width) solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--depth-md);
	min-width: 220px;
	z-index: 110;
}

.calice-haut-more-menu[hidden] {
	display: none;
}

.calice-haut-more-menu.is-open {
	display: block;
}

.calice-haut-more-link {
	display: block;
	padding: var(--gutter-xs) var(--gutter-md);
	color: var(--text-color);
	white-space: nowrap;
	font-size: var(--text-sm);
	transition: background var(--duration-fast) var(--timing), color var(--duration-fast) var(--timing);
}

.calice-haut-more-link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--accent);
}

/* Mobile drawer — inside header, hidden on desktop */
.calice-haut-drawer {
	position: fixed;
	top: var(--header-h-x);
	left: 0;
	right: 0;
	background: var(--canvas);
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);
	display: none;
	z-index: 99;
	max-height: calc(100vh - var(--header-h-x));
	overflow-y: auto;
}

.calice-haut-drawer.is-open {
	display: block;
}

.calice-haut-drawer-list {
	display: flex;
	flex-direction: column;
}

.calice-haut-drawer-item {
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.calice-haut-drawer-link {
	display: block;
	padding: var(--gutter-md);
	font-size: var(--size-h6);
	color: var(--text-color);
	transition: color var(--duration-fast) var(--timing);
}

.calice-haut-drawer-link:hover {
	color: var(--accent);
}

/* ============================================================
   FOOTER — FOOT-08 Newspaper Masthead
   ============================================================ */
.hypostyle-fin {
	background: var(--canvas);
	padding-block: var(--gap-xl);
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.hypostyle-fin-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.hypostyle-fin-masthead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-sm);
	text-align: center;
	padding-block: var(--gutter-md);
	border-top: var(--border-thick-x) solid var(--text-color);
	border-bottom: var(--border-thick-x) solid var(--text-color);
}

.hypostyle-fin-logo,
.hypostyle-fin-logo img {
	flex-shrink: 0;
}

.hypostyle-fin-logo-img {
	height: 72px;
	width: auto;
}

.hypostyle-fin-issue {
	font-family: var(--body-font);
	font-size: var(--size-xs);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.hypostyle-fin-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-xl);
	padding-block: var(--spacing-lg);
}

.hypostyle-fin-col {
	display: block;
}

.hypostyle-fin-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h6);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--text-color);
	margin-bottom: var(--gutter-md);
}

.hypostyle-fin-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.hypostyle-fin-list a {
	font-size: var(--text-sm);
	color: var(--ink-soft);
	transition: color var(--duration-fast) var(--timing);
}

.hypostyle-fin-list a:hover {
	color: var(--accent);
}

.hypostyle-fin-bottom {
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.12);
	padding-top: var(--gutter-md);
	text-align: center;
}

.hypostyle-fin-copyright {
	font-size: var(--size-xs);
	color: var(--ink-soft);
}

/* ============================================================
   HERO — HERO-01 Full-Bleed Cinematic
   ============================================================ */
.parterre-haut {
	position: relative;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	min-height: 600px;
	max-height: 860px;
	height: 82vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.parterre-haut-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 1;
	transition: transform 600ms var(--timing);
}

.parterre-haut:hover .parterre-haut-image {
	transform: scale(1.03);
}

.parterre-haut-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 20, 32, 0.15), rgba(0, 20, 32, 0.78));
}

.parterre-haut-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	padding-block: var(--gutter-2xl);
}

.parterre-haut-eyebrow {
	display: inline-block;
	font-family: var(--body-font);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--accent);
	margin-bottom: var(--gap-sm);
}

.parterre-haut-title {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h1);
	line-height: var(--leading-tight);
	color: #ffffff;
	max-width: 820px;
}

.parterre-haut-subtitle {
	font-family: var(--body-font);
	font-weight: var(--fw-normal);
	font-size: var(--text-h5);
	line-height: var(--lh-base);
	color: rgba(255, 255, 255, 0.88);
	max-width: 640px;
	margin-top: var(--gutter-md);
}

.parterre-haut-cta {
	display: inline-flex;
	align-items: center;
	margin-top: var(--spacing-lg);
	min-height: 56px;
	padding-inline: var(--gap-xl);
	background: var(--accent);
	color: var(--brand-color);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h6);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	box-shadow: var(--depth-md);
	transition: background var(--transition-base) var(--timing), color var(--transition-base) var(--timing), transform var(--transition-base) var(--ease-spring-x);
}

.parterre-haut-cta:hover {
	background: var(--highlight-active);
	color: var(--brand-color);
	transform: translateY(-2px);
	box-shadow: var(--depth-lg);
}

/* ============================================================
   PAGE HEADER — PHEAD-07 Number + Title
   ============================================================ */
.loggia-haute-pur {
	padding-block: var(--sec-y-x);
}

.loggia-haute-pur-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--spacing-lg);
	align-items: start;
}

.loggia-haute-pur-number {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: calc(var(--text-h1) * 1.4);
	line-height: 1;
	color: var(--accent);
}

.loggia-haute-pur-body {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-md);
}

.loggia-haute-pur-title {
	font-size: var(--text-h1);
	line-height: var(--leading-tight);
	color: var(--text-color);
}

.loggia-haute-pur-description {
	font-family: var(--body-font);
	font-size: var(--text-h5);
	line-height: var(--lh-base);
	color: var(--ink-soft);
}

/* ============================================================
   INLINE CTA — INLINE-CTA-02 Centered Prompt Card
   ============================================================ */
.jube-vif {
	padding-block: var(--sec-y-x);
}

.jube-vif-card {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	background: var(--panel-bg);
	border: var(--border-width) solid rgba(255, 255, 255, 0.1);
	padding: var(--spacing-lg);
}

.jube-vif-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h4);
	margin-bottom: var(--gap-sm);
}

.jube-vif-subtext {
	font-family: var(--body-font);
	font-size: var(--size-body);
	color: var(--ink-soft);
	margin-bottom: var(--gutter-md);
}

.jube-vif-btn {
	display: inline-flex;
	align-items: center;
	background: var(--accent);
	color: var(--brand-color);
	padding: var(--gap-sm) var(--gap-xl);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	transition: background var(--transition-base) var(--timing), color var(--transition-base) var(--timing);
}

.jube-vif-btn:hover {
	background: var(--highlight-active);
	color: var(--brand-color);
}

/* ============================================================
   ITEMS GRID — GRID-02 Numbered Vertical Strip
   ============================================================ */
.reliquaire-profond {
	padding-block: var(--sec-y-x);
}

.reliquaire-profond-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.reliquaire-profond-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h2);
	margin-bottom: var(--spacing-lg);
}

.reliquaire-profond-list {
	display: flex;
	flex-direction: column;
}

.reliquaire-profond-item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--gutter-md);
	padding-block: var(--gap-xl);
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.reliquaire-profond-num {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h1);
	line-height: 1;
	letter-spacing: var(--letter-tight);
	color: var(--accent);
	align-self: start;
	transition: transform var(--transition-base) var(--timing);
}

.reliquaire-profond-item:hover .reliquaire-profond-num {
	transform: scale(1.1);
}

.reliquaire-profond-item-body {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.reliquaire-profond-item-title {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--type-h3);
}

.reliquaire-profond-item-text {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--ink-soft);
}

/* ============================================================
   PROSE — PROSE-07 Numbered Section Headers
   ============================================================ */
.credence-sombre {
	padding-block: var(--sec-y-x);
	counter-reset: section;
}

.credence-sombre-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.credence-sombre-article {
	display: block;
}

.credence-sombre-h2 {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h2);
	line-height: var(--leading-tight);
	color: var(--text-color);
	margin-top: var(--gap-xl);
	margin-bottom: var(--gutter-md);
}

.credence-sombre-h2:first-child {
	margin-top: 0;
}

.credence-sombre-h2::before {
	counter-increment: section;
	content: counter(section, decimal-leading-zero) ". ";
	color: var(--accent);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	margin-right: var(--gap-sm);
}

.credence-sombre-p {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--text-color);
	margin-bottom: var(--gutter-md);
}

.credence-sombre-list,
.credence-sombre-ord {
	margin-bottom: var(--gutter-md);
	padding-left: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: var(--gutter-xs);
}

.credence-sombre-list {
	list-style: disc;
}

.credence-sombre-ord {
	list-style: decimal;
}

.credence-sombre-list li,
.credence-sombre-ord li {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--text-color);
}

.credence-sombre-article a,
.credence-sombre-p a,
.credence-sombre-list a,
.credence-sombre-ord a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--duration-fast) var(--timing);
}

.credence-sombre-article a:hover {
	text-decoration-thickness: 2px;
	color: var(--accent);
}

.credence-sombre-p strong,
.credence-sombre-list strong,
.credence-sombre-ord strong {
	font-weight: var(--font-bold);
	color: var(--text-color);
}

.credence-sombre-p em {
	font-style: italic;
}

/* Prose media (per-page images) */
.credence-sombre-media {
	padding-block: var(--sec-y-x);
}

.credence-sombre-media-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.credence-sombre-figure {
	margin: 0;
}

.credence-sombre-figure-img {
	width: 100%;
	height: auto;
	border: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   DATA TABLE — TABLE-03 Card-Style Per Row (responsive)
   ============================================================ */
.gradin-profond {
	padding-block: var(--sec-y-x);
}

.gradin-profond-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.gradin-profond-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h2);
	margin-bottom: var(--spacing-lg);
}

.gradin-profond-scroll {
	overflow-x: auto;
}

.gradin-profond-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--panel-bg);
}

.gradin-profond-table thead th {
	background: var(--brand-color);
	color: var(--accent);
	font-family: var(--body-font);
	font-weight: var(--weight-medium);
	font-size: var(--size-h6);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	text-align: left;
	padding: var(--gutter-md);
}

.gradin-profond-table tbody td {
	padding: var(--gutter-md);
	font-size: var(--size-body);
	color: var(--ink-soft);
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.06);
}

.gradin-profond-table tbody td:first-child {
	color: var(--text-color);
	font-weight: var(--weight-medium);
}

/* ============================================================
   FAQ — FAQ-08 Bordered Box with Indicator Bar
   ============================================================ */
.ecrin-vaste {
	padding-block: var(--sec-y-x);
}

.ecrin-vaste-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.ecrin-vaste-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h2);
	margin-bottom: var(--spacing-lg);
}

.ecrin-vaste-list {
	background: rgba(0, 28, 43, 0.5);
	border: var(--border-width) solid rgba(255, 255, 255, 0.1);
	padding: var(--gap-xl);
}

.ecrin-vaste-item {
	box-shadow: inset 4px 0 0 var(--accent);
	padding-left: var(--gutter-md);
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.ecrin-vaste-item:last-child {
	border-bottom: 0;
}

.ecrin-vaste-dt {
	margin: 0;
}

.ecrin-vaste-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter-md);
	text-align: left;
	background: transparent;
	border: 0;
	padding-block: var(--gutter-md);
	color: var(--text-color);
	font-family: var(--body-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h5);
	transition: color var(--duration-fast) var(--timing);
}

.ecrin-vaste-question:hover {
	color: var(--accent);
}

.ecrin-vaste-question-text {
	flex: 1;
}

.ecrin-vaste-icon {
	flex-shrink: 0;
	font-size: var(--text-h4);
	color: var(--accent);
	transition: transform var(--transition-base) var(--timing);
}

.ecrin-vaste-question[aria-expanded='true'] .ecrin-vaste-icon {
	transform: rotate(45deg);
}

.ecrin-vaste-answer {
	padding-top: var(--gap-sm);
	padding-bottom: var(--gutter-md);
}

.ecrin-vaste-answer[hidden] {
	display: none;
}

.ecrin-vaste-answer p {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--ink-soft);
}

/* ============================================================
   REVIEWS — REV-09 Magazine Pull-Quote (date policy: none)
   ============================================================ */
.monstrance-secret {
	padding-block: var(--sec-y-x);
}

.monstrance-secret-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.monstrance-secret-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h2);
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

.monstrance-secret-list {
	display: flex;
	flex-direction: column;
}

.monstrance-secret-item {
	padding-block: var(--gap-xl);
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.monstrance-secret-item:last-child {
	border-bottom: 0;
}

.monstrance-secret-quote {
	margin: 0 auto;
	max-width: 720px;
}

.monstrance-secret-text {
	font-family: var(--display-font);
	font-weight: var(--weight-medium);
	font-style: italic;
	font-size: var(--type-h3);
	line-height: var(--leading-tight);
	color: var(--text-color);
}

.monstrance-secret-attribution {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gutter-md);
	flex-wrap: wrap;
	margin-top: var(--gutter-md);
}

.monstrance-secret-author {
	font-family: var(--body-font);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--ink-soft);
}

.monstrance-secret-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--gutter-xs);
	font-size: var(--text-sm);
	color: var(--accent);
}

.monstrance-secret-rating-num {
	color: var(--ink-soft);
}

.monstrance-secret-stars {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 18px;
	line-height: 0;
}

.monstrance-secret-stars-grey,
.monstrance-secret-stars-gold {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	height: 18px;
	overflow: hidden;
	white-space: nowrap;
}

.monstrance-secret-stars-grey {
	width: 100%;
}

.monstrance-secret-stars-grey svg {
	fill: rgba(255, 255, 255, 0.5);
}

.monstrance-secret-stars-gold svg {
	fill: var(--accent);
}

.monstrance-secret-stars svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ============================================================
   CTA BLOCK — CTA-10 Magazine Pull-Quote
   ============================================================ */
.console-haut {
	padding-block: var(--sec-y-x);
}

.console-haut-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	text-align: center;
}

.console-haut-statement {
	margin: 0 auto;
	max-width: 900px;
}

.console-haut-statement p {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-style: italic;
	font-size: var(--text-h1);
	line-height: var(--leading-tight);
	color: var(--text-color);
}

.console-haut-sub {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--ink-soft);
	max-width: 580px;
	margin: var(--gutter-md) auto 0;
}

.console-haut-link {
	display: inline-block;
	margin-top: var(--spacing-lg);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h5);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color var(--duration-fast) var(--timing);
}

.console-haut-link:hover {
	color: var(--highlight-active);
}

/* ============================================================
   LEGAL SECTION — LEGAL-08 Minimal Plain
   ============================================================ */
.ecrin-lourd {
	padding-block: var(--sec-y-x);
}

.ecrin-lourd-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.ecrin-lourd-intro {
	font-family: var(--body-font);
	font-size: var(--text-h5);
	line-height: var(--lh-base);
	color: var(--text-color);
	margin-bottom: var(--spacing-lg);
}

.ecrin-lourd-section {
	margin-bottom: var(--spacing-lg);
}

.ecrin-lourd-h3 {
	font-family: var(--body-font);
	font-weight: var(--font-bold);
	font-size: var(--type-h3);
	color: var(--text-color);
	margin-top: var(--gap-xl);
	margin-bottom: var(--gutter-md);
}

.ecrin-lourd-p {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--ink-soft);
	margin-bottom: var(--gutter-md);
}

.ecrin-lourd-support {
	margin-top: var(--gap-xl);
	background: var(--panel-bg);
	padding: var(--spacing-lg);
	border: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.ecrin-lourd-support-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-top: var(--gutter-md);
}

.ecrin-lourd-support-list li {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--lh-base);
	color: var(--ink-soft);
}

.ecrin-lourd-support-list a {
	color: var(--accent);
	text-decoration: underline;
}

.ecrin-lourd-disclaimer {
	margin-top: var(--gap-xl);
	font-family: var(--body-font);
	font-size: var(--text-sm);
	line-height: var(--lh-base);
	color: var(--ink-soft);
	padding: var(--gutter-md);
	background: rgba(220, 38, 38, 0.08);
	border-left: 3px solid var(--alert-bg);
}

/* ============================================================
   CONTACT FORM — FORM-04 (renders full stacked; message present)
   ============================================================ */
.oriflamme-robuste {
	padding-block: var(--sec-y-x);
}

.oriflamme-robuste-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.oriflamme-robuste-intro {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--ink-soft);
	margin-bottom: var(--spacing-lg);
	max-width: 720px;
}

.oriflamme-robuste-success {
	display: none;
	padding: var(--gutter-md);
	background: rgba(0, 248, 190, 0.12);
	border: var(--border-width) solid rgba(0, 248, 190, 0.4);
	color: var(--text-color);
	margin-bottom: var(--gutter-md);
}

.oriflamme-robuste-success.is-visible {
	display: block;
}

.oriflamme-robuste-form {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-md);
	background: var(--panel-bg);
	padding: var(--spacing-lg);
	border: var(--border-width) solid rgba(255, 255, 255, 0.08);
	max-width: 720px;
}

.oriflamme-robuste-field {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-xs);
}

.oriflamme-robuste-label {
	font-family: var(--body-font);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--text-color);
}

.oriflamme-robuste-input,
.oriflamme-robuste-textarea {
	font-family: var(--body-font);
	font-size: var(--size-body);
	color: var(--text-color);
	background: var(--canvas);
	border: var(--border-medium-x) solid rgba(255, 255, 255, 0.12);
	padding: var(--gap-sm) var(--gutter-md);
}

.oriflamme-robuste-input {
	height: 48px;
}

.oriflamme-robuste-textarea {
	min-height: 120px;
	resize: vertical;
}

.oriflamme-robuste-input:focus,
.oriflamme-robuste-textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.oriflamme-robuste-submit {
	align-self: flex-start;
	height: 48px;
	padding-inline: var(--gap-xl);
	background: var(--accent);
	color: var(--brand-color);
	border: var(--border-width) solid var(--accent);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	transition: background var(--duration-fast) var(--timing), color var(--duration-fast) var(--timing);
}

.oriflamme-robuste-submit:hover {
	background: var(--highlight-active);
	color: var(--brand-color);
}

/* ============================================================
   AUTHOR CARD — AUTH-05-style profile on /equipe/
   ============================================================ */
.receptacle-classique {
	padding-block: var(--sec-y-x);
}

.receptacle-classique-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
}

.receptacle-classique-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--gap-xl);
	align-items: start;
	background: var(--panel-bg);
	padding: var(--gap-xl) var(--spacing-lg);
	border: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.receptacle-classique-portrait {
	width: 140px;
	height: 140px;
	border-radius: var(--round-circle);
	object-fit: cover;
	object-position: center 20%;
	background: var(--panel-bg);
	border: 3px solid var(--panel-bg);
	box-sizing: content-box;
}

.receptacle-classique-body {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-md);
}

.receptacle-classique-job {
	font-family: var(--body-font);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--accent);
}

.receptacle-classique-name {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-h2);
}

.receptacle-classique-bio {
	font-family: var(--body-font);
	font-size: var(--size-body);
	line-height: var(--line-loose);
	color: var(--ink-soft);
}

.receptacle-classique-expertise {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter-xs);
}

.receptacle-classique-tag {
	padding: var(--gap-2xs) var(--gap-sm);
	background: var(--brand-color);
	color: var(--text-color);
	font-size: var(--size-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
}

/* ============================================================
   AUTHOR BYLINE — BYLINE-03 Thin Strip (date policy: none)
   ============================================================ */
.verriere-fluide {
	padding-block: var(--sec-y-x);
}

.verriere-fluide-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);
	padding-top: var(--gutter-md);
}

.verriere-fluide-portrait {
	width: 28px;
	height: 28px;
	border-radius: var(--round-circle);
	object-fit: cover;
	object-position: center 20%;
	background: var(--canvas);
	border: 2px solid var(--canvas);
	box-sizing: content-box;
	flex-shrink: 0;
}

.verriere-fluide-meta {
	font-family: var(--body-font);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.verriere-fluide-name {
	color: var(--accent);
	transition: text-decoration-thickness var(--duration-fast) var(--timing);
}

.verriere-fluide-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent);
}

.verriere-fluide-role {
	color: var(--ink-soft);
}

/* ============================================================
   ERROR BLOCK — ERR-08 Search-Suggestion Style
   ============================================================ */
.chapelle-calme {
	padding-block: var(--gutter-2xl);
}

.chapelle-calme-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--gutter-md);
}

.chapelle-calme-code {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: clamp(80px, 18vw, 200px);
	line-height: 1;
	color: var(--accent);
}

.chapelle-calme-title {
	font-size: var(--text-h1);
	max-width: 720px;
}

.chapelle-calme-text {
	font-family: var(--body-font);
	font-size: var(--text-h5);
	line-height: var(--lh-base);
	color: var(--ink-soft);
	max-width: 600px;
}

.chapelle-calme-button {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding-inline: var(--gap-xl);
	background: var(--accent);
	color: var(--brand-color);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	transition: background var(--duration-fast) var(--timing), color var(--duration-fast) var(--timing);
}

.chapelle-calme-button:hover {
	background: var(--highlight-active);
	color: var(--brand-color);
}

.chapelle-calme-suggestions {
	margin-top: var(--spacing-lg);
	width: 100%;
	max-width: 720px;
	background: var(--panel-bg);
	padding: var(--spacing-lg);
	border: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.chapelle-calme-suggestions-heading {
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--text-h4);
	margin-bottom: var(--gutter-md);
}

.chapelle-calme-suggestions-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gutter-md);
}

.chapelle-calme-suggestions-list a {
	font-size: var(--size-body);
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--timing);
}

.chapelle-calme-suggestions-list a:hover {
	color: var(--highlight-active);
}

/* ============================================================
   COOKIE BANNER — COOK-07 Discrete Toast
   ============================================================ */
.bosquet-pur {
	position: fixed;
	inset-block-end: var(--gutter-md);
	inset-inline-end: var(--gutter-md);
	width: 320px;
	max-width: 320px;
	z-index: 120;
	display: none;
}

.bosquet-pur.is-visible {
	display: block;
}

.bosquet-pur-toast {
	background: var(--canvas);
	border-left: 4px solid var(--accent);
	padding: var(--gutter-md);
	box-shadow: var(--depth-md);
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);
	border-right: var(--border-width) solid rgba(255, 255, 255, 0.1);
	border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.bosquet-pur-title {
	display: none;
}

.bosquet-pur-message {
	font-family: var(--body-font);
	font-size: var(--text-sm);
	line-height: var(--lh-base);
	color: var(--ink-soft);
	margin-bottom: var(--gap-sm);
}

.bosquet-pur-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	padding-inline: var(--gutter-md);
	background: var(--accent);
	color: var(--brand-color);
	border: var(--border-width) solid var(--accent);
	font-family: var(--display-font);
	font-weight: var(--font-bold);
	font-size: var(--size-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	transition: background var(--duration-fast) var(--timing), color var(--duration-fast) var(--timing);
}

.bosquet-pur-button--accept {
	width: 100%;
}

.bosquet-pur-button:hover {
	background: var(--highlight-active);
	color: var(--brand-color);
}

/* ============================================================
   RESPONSIVE — BP-06 desktop-first
   --bp-lg 1160 · --bp-md 860 · --bp-sm 580
   ============================================================ */
@media (max-width: 1159px) {
	.hypostyle-fin-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
	}
}

@media (max-width: 859px) {
	:root {
		/* mobile type scale — TYPO-07 */
		--text-h1: 32px;
		--size-h2: 26px;
		--type-h3: 22px;
		--text-h4: 19px;
		--text-h5: 17px;
		--size-h6: 15px;
		--size-body: 18px;
		--text-sm: 15px;
		--size-xs: 13px;
		--header-h-x: 128px;
	}

	.calice-haut-main-bar {
		min-height: 92px;
	}

	.calice-haut-logo-img {
		height: 72px;
	}

	/* HEAD-03: topbar hidden below bp-md, main bar behaves like HEAD-01 */
	.calice-haut-topbar {
		display: none;
	}

	:root {
		--header-h-x: 92px;
	}

	.calice-haut-nav {
		display: none;
	}

	.calice-haut-toggle {
		display: flex;
	}

	.calice-haut-drawer {
		top: 92px;
		max-height: calc(100vh - 92px);
	}

	.parterre-haut {
		min-height: 480px;
		height: 70vh;
	}

	.loggia-haute-pur-inner {
		grid-template-columns: 1fr;
		gap: var(--gap-sm);
	}

	.loggia-haute-pur-number {
		font-size: calc(var(--text-h1) * 1.2);
	}

	.reliquaire-profond-item {
		grid-template-columns: 60px 1fr;
		gap: var(--gap-sm);
	}

	.receptacle-classique-card {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		justify-items: center;
		text-align: center;
	}

	.receptacle-classique-portrait {
		width: 120px;
		height: 120px;
	}

	.receptacle-classique-expertise {
		justify-content: center;
	}

	.monstrance-secret-text {
		font-size: var(--text-h4);
	}

	.console-haut-statement p {
		font-size: var(--size-h2);
	}

	.parterre-haut-cta,
	.chapelle-calme-button {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 719px) {
	/* Cookie compact — hide title, small padding, min-height 36 */
	.bosquet-pur {
		width: auto;
		max-width: none;
		inset-inline-start: var(--gutter-md);
		inset-inline-end: var(--gutter-md);
	}

	.bosquet-pur-toast {
		padding: 12px 14px;
	}

	.bosquet-pur-message {
		font-size: 13px;
	}

	.bosquet-pur-button {
		min-height: 36px;
	}
}

@media (max-width: 579px) {
	.hypostyle-fin-grid {
		grid-template-columns: 1fr;
	}

	.oriflamme-robuste-submit {
		align-self: stretch;
		width: 100%;
		justify-content: center;
	}
}