/* =========================================================
   RollXO Casino — design.css
   TYPO-09 · SPACE-01 · CONT-01 · BP-03 · GEO-01 · MOTION-01
   Header HEAD-02 · Footer FOOT-04 · Hero HERO-12
   Class roots:
     .terrasse  header
     .secteur   footer
     .balise    hero
     .niche     page-header
     .panneau   items-grid
     .tribune   faq
     .palier    reviews
     .crypte    cta-block
     .grille    prose
     .loggia    data-table
     .retable   legal-section
     .oriel     contact-form
     .registre  author-card
     .bandeau   author-byline
     .console   cookie-banner
     .cadre     error-block
     .dossier   breadcrumbs
   Anti-footprint rule order: alphabetical
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --color-accent: #eab94c;
    --color-accent-pressed: #e4a61c;
    --color-bg: #090a15;
    --color-bg-elevated: #11131f;
    --color-bg-soft: #14162a;
    --color-border: #25273d;
    --color-gradient-light: #f7cf49;
    --color-gradient-mid: #ffffff;
    --color-primary: #0e0f1d;
    --color-rg-banner: #dc2626;
    --color-text: #ffffff;
    --color-text-muted: #c0c0c0;

    --font-display: "Roboto", "Inter", system-ui, sans-serif;
    --font-body: "Roboto", "Inter", system-ui, sans-serif;

    /* TYPO-09 — scale 1.250 (compact) */
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-26: 26px;
    --fs-32: 32px;
    --fs-40: 40px;
    --fs-52: 52px;
    --fs-64: 64px;

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-base: 1.55;
    --lh-loose: 1.7;

    /* SPACE-01 — 4-base linear */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* CONT-01 */
    --container-site: 1320px;
    --container-readable: 720px;
    --container-padding-desktop: 32px;
    --container-padding-mobile: 16px;

    /* GEO-01 */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* MOTION-01 */
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 320ms;
    --ease-out: cubic-bezier(.2, .65, .2, 1);

    --header-height-desktop: 96px;
    --header-height-mobile: 72px;
    --rg-banner-height: 28px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: var(--lh-base);
    min-height: 100vh;
    padding-top: calc(var(--header-height-desktop) + var(--rg-banner-height));
}
img, picture, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: transparent; border: 0; cursor: pointer; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--color-accent-pressed); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.01em; }

/* ---------- Skip link / a11y ---------- */
.skip-link:not(:focus) { top: -200px !important; }
.skip-link {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 999;
    padding: 10px 16px;
    background: var(--color-accent);
    color: #000;
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

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

/* =========================================================
   HEADER — HEAD-02 (single row, logo-left, nav-right, auth)
   ========================================================= */
.terrasse {
    background: rgba(14, 15, 29, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height-desktop);
    left: 0;
    position: fixed;
    right: 0;
    top: var(--rg-banner-height);
    z-index: 100;
}
.terrasse-inner {
    align-items: center;
    display: flex;
    gap: var(--space-lg);
    height: 100%;
    margin: 0 auto;
    max-width: 1440px;
    padding-inline: var(--space-md);
    width: 100%;
}
.terrasse-logo {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none;
}
.terrasse-logo img { flex-shrink: 0; }
.terrasse-logo-pill {
    align-items: center;
    background: #fff;
    border-radius: var(--radius-md);
    display: inline-flex;
    padding: 6px 14px;
}
.terrasse-logo-img {
    display: block;
    height: 88px;
    width: auto;
}
.terrasse-nav {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
}
.terrasse-nav-list {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}
.terrasse-nav-link {
    color: var(--color-text);
    display: inline-flex;
    font-size: var(--fs-15);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
    white-space: nowrap;
}
.terrasse-nav-link:hover,
.terrasse-nav-link[aria-current="page"] {
    background: rgba(234, 185, 76, 0.12);
    color: var(--color-accent);
}
.terrasse-auth {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--space-sm);
}
.terrasse-auth-btn {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    color: #0e0f1d;
    flex-shrink: 0;
    font-weight: 700;
    font-size: var(--fs-14);
    letter-spacing: 0.04em;
    padding-inline: var(--space-lg);
    padding-block: 10px;
    text-transform: uppercase;
    transition: background var(--t-fast) var(--ease-out);
    white-space: nowrap;
}
.terrasse-auth-btn:hover {
    background: var(--color-accent-pressed);
    color: #0e0f1d;
}
.terrasse-toggle {
    align-items: center;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    display: none;
    height: 44px;
    justify-content: center;
    margin-left: auto !important;
    width: 44px;
}
.terrasse-toggle span,
.terrasse-toggle span::before,
.terrasse-toggle span::after {
    background: var(--color-accent);
    border-radius: 2px;
    display: block;
    height: 2px;
    position: relative;
    width: 20px;
}
.terrasse-toggle span::before { content: ""; position: absolute; top: -6px; }
.terrasse-toggle span::after { content: ""; position: absolute; top: 6px; }

.terrasse-mobile {
    background: #0e0f1d;
    border-top: 1px solid var(--color-border);
    display: none;
    left: 0;
    padding: var(--space-md) var(--space-md) var(--space-xl);
    position: fixed;
    right: 0;
    top: calc(var(--rg-banner-height) + var(--header-height-mobile));
    z-index: 99;
}
.terrasse-mobile.is-open { display: block; }
.terrasse-mobile-list { display: grid; gap: 4px; }
.terrasse-mobile-link {
    color: var(--color-text);
    display: block;
    font-size: var(--fs-16);
    font-weight: 600;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
}
.terrasse-mobile-link[aria-current="page"],
.terrasse-mobile-link:hover {
    background: var(--color-bg-soft);
    color: var(--color-accent);
}

@media (max-width: 1024px) {
    .terrasse { height: var(--header-height-mobile); }
    .terrasse-logo-img { height: 60px; }
    .terrasse-nav, .terrasse-auth { display: none; }
    .terrasse-toggle { display: inline-flex; }
    body { padding-top: calc(var(--header-height-mobile) + var(--rg-banner-height)); }
}
@media (max-width: 720px) {
    .terrasse-logo-pill { padding: 4px 10px; }
    .terrasse-logo-img { height: 60px; }
}

/* =========================================================
   HERO — HERO-12 (split: left text, right image card)
   ========================================================= */
.balise {
    background:
        radial-gradient(60% 70% at 75% 30%, rgba(234, 185, 76, 0.22), transparent 65%),
        radial-gradient(80% 80% at 10% 90%, rgba(247, 207, 73, 0.10), transparent 70%),
        linear-gradient(180deg, #0b0c1a 0%, #090a15 100%);
    padding: var(--space-4xl) 0 var(--space-3xl);
    position: relative;
    overflow: hidden;
}
.balise-inner {
    align-items: center;
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1.05fr 0.95fr;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
    width: 100%;
}
.balise-eyebrow {
    align-items: center;
    color: var(--color-accent);
    display: inline-flex;
    font-size: var(--fs-14);
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
}
.balise-eyebrow::before {
    background: var(--color-accent);
    content: "";
    display: inline-block;
    height: 2px;
    width: 36px;
}
.balise-title {
    font-size: clamp(var(--fs-40), 5vw, var(--fs-64));
    line-height: 1.05;
    margin-bottom: var(--space-lg);
    color: var(--color-text);
}
.balise-title span { color: var(--color-accent); }
.balise-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-18);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-xl);
    max-width: 580px;
}
.balise-cta {
    align-items: center;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    color: #0e0f1d;
    display: inline-flex;
    font-size: var(--fs-16);
    font-weight: 800;
    gap: 10px;
    letter-spacing: 0.06em;
    padding: 18px 36px;
    text-transform: uppercase;
    transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.balise-cta:hover {
    background: var(--color-accent-pressed);
    color: #0e0f1d;
    transform: translateY(-2px);
}
.balise-cta::after {
    content: "→";
    font-size: 18px;
}
.balise-meta {
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-14);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.balise-meta span::before {
    color: var(--color-accent);
    content: "◆ ";
}
.balise-media {
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px -20px rgba(234, 185, 76, 0.25);
    overflow: hidden;
    position: relative;
}
.balise-media img {
    display: block;
    height: auto;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}
.balise-badge {
    background: rgba(14, 15, 29, 0.85);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    bottom: 24px;
    color: var(--color-text);
    left: 24px;
    padding: 14px 18px;
    position: absolute;
}
.balise-badge strong { color: var(--color-accent); display: block; font-size: var(--fs-22); }
.balise-badge span { color: var(--color-text-muted); font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 1024px) {
    .balise-inner { grid-template-columns: 1fr; }
    .balise { padding: var(--space-3xl) 0 var(--space-2xl); }
}
@media (max-width: 720px) {
    .balise-inner { padding-inline: var(--container-padding-mobile); }
    .balise-cta { width: 100%; justify-content: center; }
    .balise-badge { bottom: 16px; left: 16px; padding: 10px 14px; }
}

/* =========================================================
   PAGE-HEADER — PHEAD-01 (compact head for subpages)
   ========================================================= */
.niche {
    background: linear-gradient(180deg, #0b0c1a 0%, #090a15 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3xl) 0 var(--space-2xl);
}
.niche-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
    text-align: center;
}
.niche-eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.niche-title {
    color: var(--color-text);
    font-size: clamp(var(--fs-32), 4vw, var(--fs-52));
    margin: var(--space-md) auto 0;
    max-width: 940px;
}
.niche-lead {
    color: var(--color-text-muted);
    font-size: var(--fs-18);
    line-height: var(--lh-loose);
    margin: var(--space-lg) auto 0;
    max-width: 720px;
}

@media (max-width: 720px) {
    .niche { padding: var(--space-2xl) 0; }
    .niche-inner { padding-inline: var(--container-padding-mobile); }
}

/* =========================================================
   BREADCRUMBS — BREAD-04 (slim bar under header)
   ========================================================= */
.dossier {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
}
.dossier-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.dossier-list {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-14);
    gap: 8px;
}
.dossier-list a {
    color: var(--color-text-muted);
    transition: color var(--t-fast) var(--ease-out);
}
.dossier-list a:hover { color: var(--color-accent); }
.dossier-list li[aria-current="page"] {
    color: var(--color-accent);
    font-weight: 600;
}
.dossier-sep {
    color: var(--color-border);
    margin: 0 4px;
}
@media (max-width: 720px) {
    .dossier-inner { padding-inline: var(--container-padding-mobile); }
}

/* =========================================================
   PROSE — PROSE-05 (long-form body content)
   ========================================================= */
.grille {
    padding: var(--space-3xl) 0;
}
.grille-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.grille-body {
    color: var(--color-text);
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
}
.grille-body h2 {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 2.6vw, var(--fs-32));
    letter-spacing: -0.01em;
    margin: var(--space-2xl) 0 var(--space-md);
    position: relative;
    padding-bottom: 10px;
}
.grille-body h2::after {
    background: var(--color-accent);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 60px;
}
.grille-body h2:first-child { margin-top: 0; }
.grille-body h3 {
    color: var(--color-text);
    font-size: var(--fs-20);
    margin: var(--space-xl) 0 var(--space-sm);
}
.grille-body p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}
.grille-body ul,
.grille-body ol {
    color: var(--color-text-muted);
    list-style: revert;
    margin: var(--space-md) 0 var(--space-md) var(--space-lg);
}
.grille-body li {
    margin-bottom: 8px;
    padding-left: 4px;
}
.grille-body li::marker { color: var(--color-accent); }
.grille-body strong { color: var(--color-text); }
.grille-body a {
    color: var(--color-accent);
    border-bottom: 1px solid rgba(234, 185, 76, 0.4);
}
.grille-body a:hover { color: var(--color-accent-pressed); border-bottom-color: var(--color-accent-pressed); }
.grille-figure {
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.grille-figure img { width: 100%; height: auto; display: block; }
.grille-figcaption {
    color: var(--color-text-muted);
    font-size: var(--fs-12);
    padding: 10px 16px;
    background: var(--color-bg-elevated);
    font-style: italic;
}
@media (max-width: 720px) {
    .grille { padding: var(--space-2xl) 0; }
    .grille-inner { padding-inline: var(--container-padding-mobile); }
}

/* =========================================================
   ITEMS-GRID — GRID-01 (3 cols, evenly weighted cards)
   ========================================================= */
.panneau {
    background: var(--color-bg);
    padding: var(--space-3xl) 0;
}
.panneau-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.panneau-head {
    margin-bottom: var(--space-2xl);
    text-align: center;
}
.panneau-eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.panneau-title {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 3vw, var(--fs-40));
    margin-top: var(--space-sm);
}
.panneau-list {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panneau-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.panneau-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
}
.panneau-item-num {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--fs-22);
    font-weight: 800;
    letter-spacing: 0.05em;
}
.panneau-item-title {
    color: var(--color-text);
    font-size: var(--fs-18);
    line-height: var(--lh-snug);
}
.panneau-item-text {
    color: var(--color-text-muted);
    font-size: var(--fs-14);
    line-height: var(--lh-loose);
}
@media (max-width: 1024px) {
    .panneau-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .panneau-list { grid-template-columns: 1fr; }
    .panneau-inner { padding-inline: var(--container-padding-mobile); }
    .panneau { padding: var(--space-2xl) 0; }
}

/* =========================================================
   FAQ — FAQ-10 (accordion + soft separators)
   ========================================================= */
.tribune {
    background: var(--color-bg);
    padding: var(--space-3xl) 0;
}
.tribune-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.tribune-head {
    margin-bottom: var(--space-2xl);
    text-align: center;
}
.tribune-eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tribune-title {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 3vw, var(--fs-40));
    margin-top: var(--space-sm);
}
.tribune-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tribune-item {
    border-top: 1px solid var(--color-border);
    padding: 0;
}
.tribune-item:last-child { border-bottom: 1px solid var(--color-border); }
.tribune-question {
    align-items: center;
    color: var(--color-text);
    display: flex;
    font-family: var(--font-display);
    font-size: var(--fs-18);
    font-weight: 700;
    gap: var(--space-md);
    justify-content: space-between;
    padding: 22px 0;
    text-align: left;
    width: 100%;
}
.tribune-question[aria-expanded="true"] { color: var(--color-accent); }
.tribune-icon {
    align-items: center;
    background: var(--color-bg-soft);
    border-radius: 50%;
    color: var(--color-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--fs-18);
    height: 32px;
    justify-content: center;
    transition: transform var(--t-base) var(--ease-out);
    width: 32px;
}
.tribune-question[aria-expanded="true"] .tribune-icon { transform: rotate(45deg); }
.tribune-answer {
    color: var(--color-text-muted);
    display: none;
    font-size: var(--fs-15);
    line-height: var(--lh-loose);
    padding: 0 0 var(--space-lg) 0;
}
.tribune-answer.is-open { display: block; }
@media (max-width: 720px) {
    .tribune { padding: var(--space-2xl) 0; }
    .tribune-inner { padding-inline: var(--container-padding-mobile); }
    .tribune-question { font-size: var(--fs-16); }
}

/* =========================================================
   REVIEWS — REV-08 (card grid 2-col w/ rating bar)
   ========================================================= */
.palier {
    background: var(--color-bg-elevated);
    padding: var(--space-3xl) 0;
}
.palier-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.palier-head {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin-bottom: var(--space-2xl);
}
.palier-title {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 3vw, var(--fs-40));
}
.palier-aggregate {
    align-items: center;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: var(--fs-14);
    gap: 8px;
}
.palier-aggregate strong {
    color: var(--color-accent);
    font-size: var(--fs-26);
}
.palier-list {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.palier-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    position: relative;
}
.palier-card-head {
    align-items: center;
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}
.palier-author {
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 700;
}
.palier-rating {
    color: var(--color-accent);
    font-size: var(--fs-14);
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.palier-text {
    color: var(--color-text-muted);
    font-size: var(--fs-15);
    line-height: var(--lh-loose);
}
@media (max-width: 720px) {
    .palier { padding: var(--space-2xl) 0; }
    .palier-inner { padding-inline: var(--container-padding-mobile); }
    .palier-list { grid-template-columns: 1fr; }
}

/* =========================================================
   CTA — CTA-03 (gold gradient panel)
   ========================================================= */
.crypte {
    padding: var(--space-3xl) 0;
}
.crypte-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.crypte-panel {
    align-items: center;
    background:
        radial-gradient(120% 100% at 90% 0%, rgba(247, 207, 73, 0.22), transparent 60%),
        linear-gradient(135deg, #1a1226 0%, #0e0f1d 80%);
    border: 1px solid rgba(234, 185, 76, 0.45);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1.4fr auto;
    overflow: hidden;
    padding: var(--space-2xl);
    position: relative;
}
.crypte-panel::before {
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-pressed) 100%);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}
.crypte-eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.crypte-title {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 3vw, var(--fs-40));
    margin: var(--space-sm) 0 var(--space-md);
}
.crypte-text {
    color: var(--color-text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
}
.crypte-button {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    color: #0e0f1d;
    display: inline-flex;
    font-size: var(--fs-16);
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 18px 36px;
    text-transform: uppercase;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
    white-space: nowrap;
}
.crypte-button:hover {
    background: var(--color-accent-pressed);
    color: #0e0f1d;
    transform: translateY(-2px);
}
@media (max-width: 1024px) {
    .crypte-panel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .crypte { padding: var(--space-2xl) 0; }
    .crypte-inner { padding-inline: var(--container-padding-mobile); }
    .crypte-panel { padding: var(--space-xl); }
    .crypte-button { width: 100%; justify-content: center; text-align: center; }
}

/* =========================================================
   LEGAL — LEGAL-01 (sectioned policy layout)
   ========================================================= */
.retable {
    padding: var(--space-3xl) 0;
}
.retable-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.retable-intro {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg) var(--space-xl);
}
.retable-section { margin-bottom: var(--space-2xl); }
.retable-heading {
    color: var(--color-text);
    font-size: var(--fs-22);
    margin-bottom: var(--space-md);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.retable-section p {
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-sm);
}
.retable-contacts {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
}
.retable-contacts h3 {
    color: var(--color-text);
    font-size: var(--fs-18);
    margin-bottom: var(--space-md);
}
.retable-contacts ul {
    color: var(--color-text-muted);
    display: grid;
    gap: 10px;
}
.retable-contacts li {
    padding-left: 22px;
    position: relative;
}
.retable-contacts li::before {
    color: var(--color-accent);
    content: "◆";
    left: 0;
    position: absolute;
    top: 0;
}
.retable-disclaimer {
    color: var(--color-text-muted);
    font-size: var(--fs-14);
    font-style: italic;
    margin-top: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
}
@media (max-width: 720px) {
    .retable { padding: var(--space-2xl) 0; }
    .retable-inner { padding-inline: var(--container-padding-mobile); }
}

/* =========================================================
   CONTACT FORM — FORM-07 (split: intro left, form right)
   ========================================================= */
.oriel {
    padding: var(--space-3xl) 0;
}
.oriel-inner {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1fr 1.2fr;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.oriel-intro p {
    color: var(--color-text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-md);
}
.oriel-channels {
    color: var(--color-text-muted);
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}
.oriel-channel {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}
.oriel-channel strong { color: var(--color-accent); display: block; font-size: var(--fs-14); letter-spacing: 0.1em; margin-bottom: 4px; text-transform: uppercase; }
.oriel-form {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-xl);
}
.oriel-field {
    display: grid;
    gap: 6px;
}
.oriel-label {
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.oriel-input,
.oriel-textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--fs-15);
    padding: 12px 14px;
    transition: border-color var(--t-fast) var(--ease-out);
    width: 100%;
}
.oriel-input:focus,
.oriel-textarea:focus { border-color: var(--color-accent); outline: none; }
.oriel-textarea { min-height: 160px; resize: vertical; }
.oriel-submit {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    color: #0e0f1d;
    font-size: var(--fs-16);
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 16px 32px;
    text-transform: uppercase;
    transition: background var(--t-fast) var(--ease-out);
}
.oriel-submit:hover { background: var(--color-accent-pressed); color: #0e0f1d; }
.oriel-success {
    background: rgba(234, 185, 76, 0.12);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: none;
    padding: var(--space-md) var(--space-lg);
}
.oriel-success.is-shown { display: block; }
@media (max-width: 1024px) {
    .oriel-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .oriel { padding: var(--space-2xl) 0; }
    .oriel-inner { padding-inline: var(--container-padding-mobile); }
    .oriel-form { padding: var(--space-lg); }
}

/* =========================================================
   AUTHOR-BYLINE — BYLINE-07 (compact strip footer of article)
   ========================================================= */
.bandeau {
    padding: var(--space-xl) 0;
}
.bandeau-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.bandeau-card {
    align-items: center;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
}
.bandeau-portrait {
    border-radius: 50%;
    flex-shrink: 0;
    height: 72px;
    object-fit: cover;
    width: 72px;
    border: 2px solid var(--color-accent);
}
.bandeau-meta {
    display: grid;
    gap: 4px;
}
.bandeau-by {
    color: var(--color-text-muted);
    font-size: var(--fs-12);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.bandeau-name a {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-18);
    font-weight: 700;
    border-bottom: 1px solid transparent;
}
.bandeau-name a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.bandeau-role {
    color: var(--color-accent);
    font-size: var(--fs-14);
    font-weight: 600;
}
@media (max-width: 720px) {
    .bandeau-inner { padding-inline: var(--container-padding-mobile); }
    .bandeau-card { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   AUTHOR-CARD — AUTH-01 (full profile card on /about/)
   ========================================================= */
.registre {
    padding: var(--space-3xl) 0;
}
.registre-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.registre-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 220px 1fr;
    padding: var(--space-2xl);
}
.registre-portrait {
    border-radius: var(--radius-md);
    height: 220px;
    object-fit: cover;
    width: 220px;
    border: 2px solid var(--color-accent);
}
.registre-name {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 3vw, var(--fs-40));
}
.registre-job {
    color: var(--color-accent);
    font-size: var(--fs-16);
    font-weight: 600;
    margin: 8px 0 var(--space-md);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.registre-bio {
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-lg);
}
.registre-expertise-head {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-18);
    margin-bottom: var(--space-sm);
}
.registre-expertise {
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.registre-expertise li {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--fs-13);
    padding: 6px 14px;
}
.registre-articles {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xl);
    padding: var(--space-xl);
}
.registre-articles-heading {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-20);
    margin-bottom: var(--space-md);
}
.registre-articles-list {
    display: grid;
    gap: 10px;
}
.registre-articles-item {
    color: var(--color-text-muted);
    padding-left: 22px;
    position: relative;
}
.registre-articles-item::before {
    color: var(--color-accent);
    content: "▸";
    left: 0;
    position: absolute;
}
@media (max-width: 1024px) {
    .registre-card { grid-template-columns: 1fr; text-align: center; }
    .registre-portrait { margin: 0 auto; }
    .registre-expertise { justify-content: center; }
}
@media (max-width: 720px) {
    .registre { padding: var(--space-2xl) 0; }
    .registre-inner { padding-inline: var(--container-padding-mobile); }
    .registre-card { padding: var(--space-lg); }
    .registre-portrait { height: 180px; width: 180px; }
}

/* =========================================================
   ERROR-BLOCK — ERR-03 (centered 404)
   ========================================================= */
.cadre {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - var(--header-height-desktop) - var(--rg-banner-height) - 200px);
    padding: var(--space-3xl) 0;
}
.cadre-inner {
    margin: 0 auto;
    max-width: 680px;
    padding-inline: var(--container-padding-desktop);
    text-align: center;
}
.cadre-code {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: clamp(80px, 14vw, 180px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}
.cadre-title {
    color: var(--color-text);
    font-size: clamp(var(--fs-26), 3vw, var(--fs-40));
    margin: var(--space-md) 0 var(--space-md);
}
.cadre-text {
    color: var(--color-text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-xl);
}
.cadre-button {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    color: #0e0f1d;
    display: inline-flex;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 16px 32px;
    text-transform: uppercase;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cadre-button:hover {
    background: var(--color-accent-pressed);
    color: #0e0f1d;
}

/* =========================================================
   COOKIE BANNER — COOK-04 (sticky bottom bar)
   ========================================================= */
.console {
    background: rgba(14, 15, 29, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-accent);
    bottom: 0;
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 90;
}
.console.is-shown { display: block; }
.console-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding: var(--space-lg) var(--container-padding-desktop);
}
.console-message {
    color: var(--color-text-muted);
    flex: 1 1 380px;
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
}
.console-actions {
    display: flex;
    gap: var(--space-sm);
}
.console-button {
    border-radius: var(--radius-pill);
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 12px 22px;
    text-transform: uppercase;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.console-button--accept {
    background: var(--color-accent);
    color: #0e0f1d;
}
.console-button--accept:hover { background: var(--color-accent-pressed); color: #0e0f1d; }
.console-button--decline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.console-button--decline:hover { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
@media (max-width: 720px) {
    .console, .console-inner {
        padding: 12px 14px !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .console-title, .console-heading { display: none !important; }
    .console-button, .console button {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    .console-actions { width: 100%; justify-content: space-between; }
}

/* =========================================================
   FOOTER — FOOT-04 (4-col: brand, nav, legal, contact)
   ========================================================= */
.secteur {
    background: #06070f;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3xl);
}
.secteur-inner {
    margin: 0 auto;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    padding-inline: var(--container-padding-desktop);
}
.secteur-grid {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    padding-bottom: var(--space-2xl);
}
.secteur-brand-logo-pill {
    background: #fff;
    border-radius: var(--radius-md);
    display: inline-flex;
    margin-bottom: var(--space-md);
    padding: 6px 14px;
}
.secteur-brand-logo {
    display: block;
    height: 64px;
    width: auto;
}
.secteur-brand-text {
    color: var(--color-text-muted);
    font-size: var(--fs-14);
    line-height: var(--lh-loose);
    max-width: 320px;
}
.secteur-licence {
    color: var(--color-text-muted);
    font-size: var(--fs-12);
    margin-top: var(--space-md);
    letter-spacing: 0.04em;
}
.secteur-heading {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
}
.secteur-list {
    display: grid;
    gap: 10px;
}
.secteur-list a {
    color: var(--color-text-muted);
    font-size: var(--fs-14);
    transition: color var(--t-fast) var(--ease-out);
}
.secteur-list a:hover { color: var(--color-accent); }
.secteur-contact {
    color: var(--color-text-muted);
    display: grid;
    gap: 10px;
    font-size: var(--fs-14);
}
.secteur-contact a { color: var(--color-text); }
.secteur-contact a:hover { color: var(--color-accent); }
.secteur-rg {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    padding: var(--space-lg) 0;
}
.secteur-rg-badges {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-12);
    gap: var(--space-md);
    letter-spacing: 0.08em;
}
.secteur-rg-badge {
    align-items: center;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    display: inline-flex;
    font-weight: 700;
    height: 32px;
    padding: 0 12px;
}
.secteur-rg-text {
    color: var(--color-text-muted);
    font-size: var(--fs-12);
    max-width: 720px;
}
.secteur-bottom {
    align-items: center;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-12);
    gap: var(--space-md);
    justify-content: space-between;
    padding: var(--space-lg) 0;
}
.secteur-copyright { letter-spacing: 0.04em; }
@media (max-width: 1024px) {
    .secteur-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .secteur { padding-top: var(--space-2xl); }
    .secteur-inner { padding-inline: var(--container-padding-mobile); }
    .secteur-grid { grid-template-columns: 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); }
}