/* ============================================================
   Bizzo Casino — design tokens
   ============================================================ */
:root {
    --color-primary: #ffd603;
    --color-accent: #f9ac01;
    --color-accent-pressed: #dba101;
    --color-bg: #27102f;
    --color-bg-elevated: #311438;
    --color-gradient-light: #221028;
    --color-gradient-mid: #3f2a46;
    --color-text: #ffffff;
    --color-text-muted: #c1c0c0;
    --color-border: rgba(255, 214, 3, 0.18);
    --color-border-soft: rgba(255, 255, 255, 0.08);
    --color-rg-banner: #dc2626;

    --font-display: "Poppins", Arial, system-ui, sans-serif;
    --font-body: "Poppins", Arial, system-ui, sans-serif;

    --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
    --fs-h2: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem);
    --fs-h3: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --lh-body: 1.65;
    --lh-tight: 1.25;

    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 18px;
    --space-lg: 28px;
    --space-xl: 44px;
    --space-2xl: 68px;
    --space-3xl: 96px;

    --container-site: 1020px;
    --container-readable: 580px;
    --container-padding-desktop: 32px;
    --container-padding-mobile: 18px;

    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-hard: 0 14px 44px rgba(0, 0, 0, 0.5);

    --motion-snap: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-flow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    --header-height-desktop: 96px;
    --header-height-mobile: 72px;
}

/* ============================================================
   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-body);
    color: var(--color-text);
    background: var(--color-bg);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(255, 184, 0, 0.07) 0, transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(124, 58, 173, 0.12) 0, transparent 52%);
    background-attachment: fixed;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--motion-snap); }
a:hover { color: var(--color-accent-pressed); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    margin: 0 0 0.55em;
    letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1.05em; }
strong, b { color: #ffe87a; }
em, i { color: var(--color-text-muted); }
hr { border: 0; border-top: 1px solid var(--color-border-soft); margin: var(--space-xl) 0; }

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

/* Shared container */
.wrap {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
@media (max-width: 720px) {
    .wrap { padding: 0 var(--container-padding-mobile); }
}

/* RG banner */
.rg-banner {
    background: var(--color-rg-banner);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 7px 18px;
    text-transform: uppercase;
}
.rg-banner a { color: #fff; text-decoration: underline; }

/* ============================================================
   Header — HEAD-05 (single-row, centered logo neighbor, wide nav)
   class root: .veilleuse-leger
   ============================================================ */
.veilleuse-leger {
    background: linear-gradient(180deg, #1b0b22 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 50;
}
.veilleuse-leger-inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: var(--header-height-desktop);
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px var(--container-padding-desktop);
}
.veilleuse-leger-logo, .veilleuse-leger-logo img { flex-shrink: 0; }
.veilleuse-leger-logo {
    display: inline-flex;
    align-items: center;
}
.veilleuse-leger-logo-img {
    height: 88px;
    width: auto;
    max-width: 260px;
}
.veilleuse-leger-nav {
    margin-left: auto;
}
.veilleuse-leger-nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}
.veilleuse-leger-nav-link {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 4px;
    position: relative;
    transition: color var(--motion-snap);
}
.veilleuse-leger-nav-link:hover { color: var(--color-primary); }
.veilleuse-leger-nav-link[aria-current="page"] {
    color: var(--color-primary);
}
.veilleuse-leger-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px; bottom: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}
.veilleuse-leger-toggle {
    display: none;
    margin-left: auto !important;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    width: 44px; height: 44px;
    padding: 0;
    color: var(--color-text);
    align-items: center;
    justify-content: center;
}
.veilleuse-leger-toggle-bar {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    margin: 4px 0;
    transition: transform var(--motion-snap);
}
.veilleuse-leger-mobile {
    display: none;
    position: fixed;
    inset: var(--header-height-mobile) 0 0 auto;
    width: min(360px, 86vw);
    background: var(--color-bg-elevated);
    padding: var(--space-lg) var(--space-md);
    box-shadow: var(--shadow-hard);
    transform: translateX(100%);
    transition: transform var(--motion-flow);
    overflow-y: auto;
    z-index: 49;
}
.veilleuse-leger-mobile.is-open {
    display: block;
    transform: translateX(0);
}
.veilleuse-leger-mobile-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.veilleuse-leger-mobile-link {
    display: block;
    padding: 14px 12px;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.veilleuse-leger-mobile-link:hover {
    background: rgba(255, 214, 3, 0.08);
    color: var(--color-primary);
}

@media (max-width: 1100px) {
    .veilleuse-leger-nav { display: none; }
    .veilleuse-leger-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
    .veilleuse-leger-inner {
        min-height: var(--header-height-mobile);
        padding: 10px var(--container-padding-mobile);
    }
    .veilleuse-leger-logo-img { height: 64px; max-width: 200px; }
}

/* ============================================================
   Breadcrumbs — BREAD-04 (pill-on-dark with arrow separator)
   class root: .support-robuste
   ============================================================ */
.support-robuste {
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--color-border-soft);
    padding: 14px 0;
}
.support-robuste-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.support-robuste-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-muted);
}
.support-robuste-item { display: inline-flex; align-items: center; gap: 8px; }
.support-robuste-item + .support-robuste-item::before {
    content: "›";
    color: var(--color-primary);
    margin-right: 4px;
}
.support-robuste-link {
    color: var(--color-text-muted);
    transition: color var(--motion-snap);
}
.support-robuste-link:hover { color: var(--color-primary); }
.support-robuste-current {
    color: var(--color-text);
    font-weight: 500;
}
@media (max-width: 720px) {
    .support-robuste-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Hero — HERO-06 (split overlay: copy left, image right, frame)
   class root: .dais-haut
   ============================================================ */
.dais-haut {
    position: relative;
    background:
        linear-gradient(135deg, rgba(34, 16, 40, 0.92) 0%, rgba(63, 42, 70, 0.7) 100%);
    overflow: hidden;
    padding: var(--space-3xl) 0 var(--space-2xl);
}
.dais-haut::before {
    content: "";
    position: absolute;
    top: -10%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255, 214, 3, 0.22) 0, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
.dais-haut-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    position: relative;
    z-index: 1;
}
.dais-haut-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-primary);
    background: rgba(255, 214, 3, 0.1);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.dais-haut-title {
    font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4rem);
    margin-bottom: var(--space-md);
    background: linear-gradient(180deg, #ffffff 0%, #ffd603 130%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.dais-haut-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.dais-haut-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.dais-haut-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--color-primary);
    color: #27102f;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    box-shadow: 0 10px 28px rgba(255, 214, 3, 0.25);
    transition: transform var(--motion-snap), box-shadow var(--motion-snap), background var(--motion-snap), color var(--motion-snap);
}
.dais-haut-cta:hover {
    background: var(--color-accent-pressed);
    color: #27102f;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 214, 3, 0.3);
}
.dais-haut-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-hard);
    aspect-ratio: 4 / 3;
}
.dais-haut-frame img {
    width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 880px) {
    .dais-haut { padding: var(--space-2xl) 0 var(--space-xl); }
    .dais-haut-inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: 0 var(--container-padding-mobile);
    }
    .dais-haut-frame { aspect-ratio: 16 / 10; max-width: 540px; }
}

/* ============================================================
   Page header — PHEAD-05 (centered eyebrow + h1 on tinted strip)
   class root: .prie-dieu-fluide
   ============================================================ */
.prie-dieu-fluide {
    background: linear-gradient(180deg, #1f0c26 0%, var(--color-bg) 100%);
    padding: var(--space-2xl) 0 var(--space-xl);
    text-align: center;
    border-bottom: 1px solid var(--color-border-soft);
}
.prie-dieu-fluide-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.prie-dieu-fluide-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}
.prie-dieu-fluide-title {
    font-size: clamp(1.85rem, 1.3rem + 2vw, 2.6rem);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}
.prie-dieu-fluide-meta {
    font-size: 13px;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}
@media (max-width: 720px) {
    .prie-dieu-fluide-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Prose — PROSE-01 (clean single-column readable on full site width)
   class root: .loggia-haute-mince
   ============================================================ */
.loggia-haute-mince {
    padding: var(--space-2xl) 0;
}
.loggia-haute-mince-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.loggia-haute-mince h2 {
    margin-top: var(--space-xl);
    color: var(--color-primary);
}
.loggia-haute-mince h2:first-child { margin-top: 0; }
.loggia-haute-mince h3 {
    margin-top: var(--space-lg);
    color: #ffe87a;
}
.loggia-haute-mince p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
}
.loggia-haute-mince a {
    color: var(--color-primary);
    border-bottom: 1px dashed rgba(255, 214, 3, 0.4);
    padding-bottom: 1px;
}
.loggia-haute-mince a:hover {
    color: var(--color-accent-pressed);
    border-bottom-color: var(--color-accent-pressed);
}
.loggia-haute-mince ul li, .loggia-haute-mince ol li { color: var(--color-text-muted); margin-bottom: 6px; }
.loggia-haute-mince-figure {
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
}
.loggia-haute-mince-figure img { width: 100%; }
@media (max-width: 720px) {
    .loggia-haute-mince-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Items grid — GRID-01 (clean 3-col card grid, single accent)
   class root: .niche-brut
   ============================================================ */
.niche-brut {
    padding: var(--space-2xl) 0;
    background: rgba(0, 0, 0, 0.14);
}
.niche-brut-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.niche-brut-heading {
    text-align: left;
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}
.niche-brut-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    list-style: none;
    padding: 0; margin: 0;
}
.niche-brut-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: transform var(--motion-snap), border-color var(--motion-snap);
}
.niche-brut-item:hover {
    transform: translateY(-3px);
    border-color: var(--color-border);
}
.niche-brut-item-title {
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.niche-brut-item-text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 960px) {
    .niche-brut-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .niche-brut-list { grid-template-columns: 1fr; }
    .niche-brut-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   FAQ — FAQ-03 (accordion with chevron, separator lines)
   class root: .parure-grand
   ============================================================ */
.parure-grand {
    padding: var(--space-2xl) 0;
}
.parure-grand-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.parure-grand-heading {
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}
.parure-grand-list {
    border-top: 1px solid var(--color-border-soft);
}
.parure-grand-item {
    border-bottom: 1px solid var(--color-border-soft);
}
.parure-grand-q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--space-md) 0;
    color: var(--color-text);
    font-size: 1.04rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    transition: color var(--motion-snap);
}
.parure-grand-q:hover { color: var(--color-primary); }
.parure-grand-q-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: transform var(--motion-snap), background var(--motion-snap);
}
.parure-grand-q[aria-expanded="true"] .parure-grand-q-icon {
    transform: rotate(45deg);
    background: var(--color-primary);
    color: #27102f;
}
.parure-grand-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--motion-flow), padding var(--motion-flow);
    color: var(--color-text-muted);
    line-height: 1.7;
}
.parure-grand-q[aria-expanded="true"] + .parure-grand-a {
    max-height: 800px;
    padding: 0 0 var(--space-md);
}
@media (max-width: 720px) {
    .parure-grand-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   CTA block — CTA-04 (full-width framed strip, centered content)
   class root: .crucifix-fluide
   ============================================================ */
.crucifix-fluide {
    padding: var(--space-xl) 0;
}
.crucifix-fluide-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.crucifix-fluide-frame {
    background:
        linear-gradient(135deg, rgba(255, 214, 3, 0.1) 0%, rgba(249, 172, 1, 0.16) 100%),
        var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.crucifix-fluide-frame::before {
    content: "";
    position: absolute;
    top: -120px; left: 50%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(255, 214, 3, 0.18) 0, transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
}
.crucifix-fluide-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    color: var(--color-text);
    position: relative;
}
.crucifix-fluide-text {
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto var(--space-lg);
    position: relative;
}
.crucifix-fluide-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    background: var(--color-primary);
    color: #27102f;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    transition: background var(--motion-snap), color var(--motion-snap), transform var(--motion-snap);
    position: relative;
}
.crucifix-fluide-btn:hover {
    background: var(--color-accent-pressed);
    color: #27102f;
    transform: translateY(-2px);
}
@media (max-width: 720px) {
    .crucifix-fluide-inner { padding: 0 var(--container-padding-mobile); }
    .crucifix-fluide-frame { padding: var(--space-xl) var(--space-md); }
}

/* ============================================================
   Data table — TABLE-08 (zebra rows, golden head)
   class root: .dais-austere
   ============================================================ */
.dais-austere {
    padding: var(--space-xl) 0;
}
.dais-austere-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.dais-austere-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-elevated);
}
.dais-austere-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    min-width: 540px;
}
.dais-austere-table thead {
    background: linear-gradient(180deg, rgba(255, 214, 3, 0.14) 0%, rgba(255, 214, 3, 0.06) 100%);
}
.dais-austere-table th {
    color: var(--color-primary);
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
}
.dais-austere-table td {
    padding: 14px 16px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-soft);
}
.dais-austere-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.dais-austere-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
    .dais-austere-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Legal section — LEGAL-03 (numbered sections, bordered card)
   class root: .vigile-dru
   ============================================================ */
.vigile-dru {
    padding: var(--space-2xl) 0;
}
.vigile-dru-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.vigile-dru-intro {
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xl);
    color: var(--color-text-muted);
}
.vigile-dru-updated {
    display: inline-block;
    font-size: 12px;
    color: var(--color-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.vigile-dru-section {
    counter-increment: legal-counter;
    margin-bottom: var(--space-xl);
}
.vigile-dru-section h2 {
    color: var(--color-primary);
    font-size: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.vigile-dru-section h2::before {
    content: counter(legal-counter, decimal-leading-zero);
    color: rgba(255, 214, 3, 0.5);
    font-size: 1rem;
    font-weight: 500;
}
.vigile-dru-list { counter-reset: legal-counter; }
.vigile-dru-section p { color: var(--color-text-muted); }
.vigile-dru-contacts {
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-lg);
    margin-top: var(--space-xl);
}
.vigile-dru-contacts h3 { color: var(--color-primary); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.vigile-dru-contacts ul { color: var(--color-text-muted); }
.vigile-dru-disclaimer {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    opacity: 0.8;
    margin-top: var(--space-xl);
    font-style: italic;
}
@media (max-width: 720px) {
    .vigile-dru-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Contact form — FORM-06 (boxed, two-column intro+form)
   class root: .autel-voile
   ============================================================ */
.autel-voile {
    padding: var(--space-2xl) 0;
}
.autel-voile-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
    align-items: start;
}
.autel-voile-intro h2 { color: var(--color-primary); }
.autel-voile-intro p { color: var(--color-text-muted); }
.autel-voile-form {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}
.autel-voile-field { margin-bottom: var(--space-md); }
.autel-voile-label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
}
.autel-voile-input, .autel-voile-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color var(--motion-snap);
}
.autel-voile-textarea { min-height: 130px; resize: vertical; }
.autel-voile-input:focus, .autel-voile-textarea:focus {
    border-color: var(--color-primary);
    outline: 0;
}
.autel-voile-submit {
    width: 100%;
    padding: 14px 24px;
    background: var(--color-primary);
    color: #27102f;
    font-weight: 700;
    border: 0;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.autel-voile-submit:hover { background: var(--color-accent-pressed); color: #27102f; }
.autel-voile-success {
    display: none;
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 214, 3, 0.1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}
.autel-voile-success.is-visible { display: block; }
@media (max-width: 880px) {
    .autel-voile-inner { grid-template-columns: 1fr; padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Author byline — BYLINE-05 (avatar + name + role + date inline)
   class root: .ostensoir-brut
   ============================================================ */
.ostensoir-brut {
    margin: var(--space-2xl) 0 var(--space-xl);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.ostensoir-brut-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.ostensoir-brut-portrait {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
}
.ostensoir-brut-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ostensoir-brut-text {
    display: flex; flex-direction: column;
    gap: 2px;
}
.ostensoir-brut-name { font-weight: 600; color: var(--color-text); }
.ostensoir-brut-name a { color: var(--color-text); }
.ostensoir-brut-name a:hover { color: var(--color-primary); }
.ostensoir-brut-meta {
    font-size: 13px;
    color: var(--color-text-muted);
}
@media (max-width: 720px) {
    .ostensoir-brut-inner { padding: 0 var(--container-padding-mobile); }
}

/* ============================================================
   Author card — AUTH-08 (large card with portrait + bio + expertise + articles)
   class root: .catafalque-profond
   ============================================================ */
.catafalque-profond {
    padding: var(--space-2xl) 0;
}
.catafalque-profond-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.catafalque-profond-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-xl);
    align-items: start;
}
.catafalque-profond-portrait {
    width: 140px; height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-primary);
}
.catafalque-profond-portrait img { width: 100%; height: 100%; object-fit: cover; }
.catafalque-profond-name {
    margin: 0 0 4px;
    color: var(--color-text);
}
.catafalque-profond-role {
    color: var(--color-primary);
    font-size: 0.95rem;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.catafalque-profond-bio {
    color: var(--color-text-muted);
    line-height: 1.7;
}
.catafalque-profond-expertise {
    display: flex; flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-md);
    list-style: none;
    padding: 0;
}
.catafalque-profond-tag {
    background: rgba(255, 214, 3, 0.1);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.catafalque-profond-articles {
    margin-top: var(--space-xl);
}
.catafalque-profond-articles-heading {
    color: var(--color-text);
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
}
.catafalque-profond-articles-list {
    list-style: none;
    padding: 0; margin: 0;
}
.catafalque-profond-articles-item {
    border-bottom: 1px solid var(--color-border-soft);
    padding: 12px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}
.catafalque-profond-articles-item:last-child { border-bottom: 0; }
.catafalque-profond-articles-item a {
    color: var(--color-text);
    flex: 1 1 60%;
}
.catafalque-profond-articles-item a:hover { color: var(--color-primary); }
.catafalque-profond-articles-item time {
    color: var(--color-text-muted);
    font-size: 13px;
}
@media (max-width: 720px) {
    .catafalque-profond-inner { padding: 0 var(--container-padding-mobile); }
    .catafalque-profond-card { grid-template-columns: 1fr; text-align: left; padding: var(--space-lg); }
    .catafalque-profond-portrait { margin: 0 auto; }
}

/* ============================================================
   Cookie banner — COOK-02 (bottom slide-up bar)
   class root: .gradin-mince
   ============================================================ */
.gradin-mince {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(17, 7, 22, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    padding: var(--space-md) 0;
    z-index: 100;
    transform: translateY(110%);
    transition: transform var(--motion-flow);
}
.gradin-mince.is-visible { transform: translateY(0); }
.gradin-mince-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.gradin-mince-text {
    flex: 1 1 320px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.gradin-mince-actions { display: flex; gap: 10px; }
.gradin-mince-btn {
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.gradin-mince-btn:hover { background: rgba(255, 214, 3, 0.08); color: var(--color-primary); }
.gradin-mince-btn-accept {
    background: var(--color-primary);
    color: #27102f;
    border-color: var(--color-primary);
}
.gradin-mince-btn-accept:hover { background: var(--color-accent-pressed); color: #27102f; border-color: var(--color-accent-pressed); }
@media (max-width: 720px) {
    .gradin-mince, .gradin-mince-inner {
        padding: 12px 14px !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .gradin-mince-title, .gradin-mince-heading { display: none !important; }
    .gradin-mince-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
}

/* ============================================================
   Error block — ERR-04 (centered card, 404)
   class root: .tribune-mince
   ============================================================ */
.tribune-mince {
    padding: var(--space-3xl) 0;
    text-align: center;
}
.tribune-mince-inner {
    /* Ширина внутренней рамки берётся из спеки, а не своим числом: 640px тут
       был единственным отклонением от общей сетки, а узкий токен на сетке
       отменён — берём общую ширину сайта. */
    max-width: var(--container-site);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.tribune-mince-code {
    font-size: clamp(4rem, 3rem + 6vw, 7rem);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-md);
}
.tribune-mince-title { color: var(--color-text); margin-bottom: var(--space-md); }
.tribune-mince-text { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.tribune-mince-btn {
    display: inline-flex;
    padding: 14px 30px;
    background: var(--color-primary);
    color: #27102f;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.tribune-mince-btn:hover { background: var(--color-accent-pressed); color: #27102f; }

/* ============================================================
   Footer — FOOT-07 (3-column dark with brand row above)
   class root: .reliquaire-sombre
   ============================================================ */
.reliquaire-sombre {
    background: linear-gradient(180deg, var(--color-bg) 0%, #17081d 100%);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2xl);
    padding: var(--space-2xl) 0 var(--space-md);
}
.reliquaire-sombre-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.reliquaire-sombre-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: var(--space-xl);
}
.reliquaire-sombre-brand img {
    height: 70px;
    width: auto;
    max-width: 230px;
}
.reliquaire-sombre-tag {
    color: var(--color-text-muted);
    max-width: 420px;
    font-size: 0.9rem;
    margin: 0;
}
.reliquaire-sombre-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.reliquaire-sombre-col-heading {
    color: var(--color-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}
.reliquaire-sombre-col ul {
    list-style: none;
    padding: 0; margin: 0;
}
.reliquaire-sombre-col li { margin-bottom: 8px; }
.reliquaire-sombre-col a {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    transition: color var(--motion-snap);
}
.reliquaire-sombre-col a:hover { color: var(--color-primary); }
.reliquaire-sombre-col p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0 0 8px; }
.reliquaire-sombre-bottom {
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.reliquaire-sombre-rg {
    color: var(--color-text-muted);
    font-weight: 500;
}
.reliquaire-sombre-rg strong { color: #ff8b8b; }
@media (max-width: 780px) {
    .reliquaire-sombre-cols { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
    .reliquaire-sombre-brand-row { flex-direction: column; align-items: flex-start; }
    .reliquaire-sombre-inner { padding: 0 var(--container-padding-mobile); }
}
@media (max-width: 480px) {
    .reliquaire-sombre-cols { grid-template-columns: 1fr; }
}

/* Контентные картинки не занимают почти весь экран (image-gen отдаёт квадраты
   1024×1024 и вертикали 1024×1536). Хиро и логотипы вне <figure> — не задеты. */
main figure img,
article figure img {
	max-height: 56vh;
	width: 100%;
	object-fit: cover;
}

/* Пункты горизонтального меню не рвутся посреди слова (A-21). */
.veilleuse-leger-nav-link {
	white-space: nowrap;
}

/* Три класса стояли в разметке без единого правила. Задаём им те же роли,
   что у соседей по блоку: приглушённая вторая кнопка в куки-плашке, колонка
   текста в первом экране и текстовая часть карточки автора. */
.gradin-mince-btn-decline {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.gradin-mince-btn-decline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}
.dais-haut-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.catafalque-profond-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 10px);
    min-width: 0;
}

/* Полоски кнопки меню стояли в один ряд по горизонтали и сливались в одну
   черту: кнопка была flex-строкой. Ставим их друг под другом и добавляем
   превращение в крестик, когда меню открыто. */
.veilleuse-leger-toggle {
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	/* Панель меню перекрывала кнопку, и крестик был не виден. */
	position: relative;
	z-index: 60;
}
.veilleuse-leger-toggle-bar {
	margin: 0;
	width: 22px;
	transition: transform var(--motion-snap), opacity var(--motion-snap);
}
.veilleuse-leger-toggle[aria-expanded="true"] .veilleuse-leger-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.veilleuse-leger-toggle[aria-expanded="true"] .veilleuse-leger-toggle-bar:nth-child(2) {
	opacity: 0;
}
.veilleuse-leger-toggle[aria-expanded="true"] .veilleuse-leger-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}