/* =========================================================
   FortunePlay Casino — site.css
   Tokens, layout, and component styles.
   ========================================================= */

/* --- Tokens ---------------------------------------------- */
:root {
    --color-primary: #1c1c30;
    --color-accent: #f5b102;
    --color-bg: #0f0f16;
    --color-accent-pressed: #d49805;
    --color-gradient-light: #FFFFFF;
    --color-gradient-mid: #fd663d;
    --color-text: #FFFFFF;
    --color-text-muted: #c1bfbf;
    --color-bg-elevated: #15151f;
    --color-border: #29293d;
    --color-rg-banner: #dc2626;

    --font-display: 'Cormorant', 'Playfair Display', Georgia, serif;
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --fs-h1: clamp(2.2rem, 4.4vw, 3.6rem);
    --fs-h2: clamp(1.65rem, 2.4vw, 2.25rem);
    --fs-h3: clamp(1.2rem, 1.6vw, 1.4rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --lh-tight: 1.18;
    --lh-body: 1.65;

    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 18px;
    --space-lg: 28px;
    --space-xl: 44px;
    --space-2xl: 72px;
    --space-3xl: 110px;

    --container-site: 1280px;
    --container-readable: 710px;
    --container-padding-desktop: 32px;
    --container-padding-mobile: 18px;

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

    --motion-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-med: 240ms cubic-bezier(0.4, 0, 0.2, 1);

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

/* --- Reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--header-height-desktop);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.005em;
    margin: 0 0 var(--space-md) 0;
    color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-md) 0; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--motion-fast); }
a:hover { color: var(--color-accent-pressed); }
ul, ol { padding-left: 1.2rem; margin: 0 0 var(--space-md) 0; }
li { margin-bottom: 6px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* --- Section wrapper ------------------------------------ */
.section-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.section { padding: var(--space-2xl) 0; }

/* --- Header (HEAD-10 — Two-row, auth bottom) ------------ */
.pignon {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    z-index: 100;
}
.pignon-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: var(--space-md);
    display: flex;
    flex-direction: column;
}
.pignon-row {
    display: flex; align-items: center; gap: var(--space-lg);
    width: 100%;
    min-height: 86px;
}
.pignon-row-bottom {
    min-height: 52px;
    border-top: 1px solid var(--color-border);
    justify-content: flex-end;
}
.pignon-logo, .pignon-logo img { flex-shrink: 0; }
.pignon-logo { display: inline-flex; align-items: center; }
.pignon-logo-img { height: 88px; width: auto; }
.pignon-nav { margin-left: auto; }
.pignon-nav-list {
    display: flex; flex-wrap: nowrap; gap: var(--space-lg);
    list-style: none; padding: 0; margin: 0;
}
.pignon-nav-list a {
    color: var(--color-text); font-weight: 600;
    font-size: 0.98rem; letter-spacing: 0.02em;
    padding: 6px 0; border-bottom: 2px solid transparent;
}
.pignon-nav-list a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.pignon-nav-list a[aria-current='page'] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.pignon-auth-btn {
    white-space: nowrap; flex-shrink: 0;
    background: var(--color-accent); color: var(--color-primary);
    padding: 12px var(--space-lg); border-radius: var(--radius-pill);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 0.9rem;
}
.pignon-auth-btn:hover { background: var(--color-accent-pressed); color: var(--color-primary); }
.pignon-toggle {
    display: none; margin-left: auto !important; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    align-items: center; justify-content: center;
    background: transparent; color: var(--color-text);
}
.pignon-toggle:hover { background: var(--color-border); }
.pignon-toggle-bar { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.pignon-toggle-bar::before, .pignon-toggle-bar::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.pignon-toggle-bar::before { top: -7px; }
.pignon-toggle-bar::after { top: 7px; }
.pignon-mobile {
    display: none;
    position: fixed; top: var(--header-height-mobile); left: 0; right: 0; bottom: 0;
    background: var(--color-primary); padding: var(--space-lg);
    overflow-y: auto;
}
.pignon-mobile.is-open { display: block; }
.pignon-mobile-list { list-style: none; padding: 0; margin: 0 0 var(--space-lg) 0; display: flex; flex-direction: column; gap: 6px; }
.pignon-mobile-list a {
    display: block; padding: 14px var(--space-md);
    color: var(--color-text); font-weight: 600;
    border-radius: var(--radius-md); border: 1px solid var(--color-border);
}
.pignon-mobile-list a[aria-current='page'] { color: var(--color-accent); border-color: var(--color-accent); }
.pignon-mobile-auth { display: block; text-align: center; }

@media (max-width: 1100px) {
    body { padding-top: var(--header-height-mobile); }
    .pignon-inner { flex-direction: row; align-items: center; min-height: var(--header-height-mobile); }
    .pignon-row { min-height: var(--header-height-mobile); width: 100%; flex: 1; }
    .pignon-row-bottom { display: none; }
    .pignon-logo-img { height: 60px; }
    .pignon-nav { display: none; }
    .pignon-toggle { display: inline-flex; }
}

/* --- Hero (HERO-02 — Split, text left + image right) ---- */
.carnet {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg) 100%);
    padding: var(--space-2xl) 0;
    position: relative;
    overflow: hidden;
}
.carnet::after {
    content: ''; position: absolute; right: -100px; top: -80px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(245, 177, 2, 0.18) 0%, transparent 65%);
    pointer-events: none;
}
.carnet-inner {
    width: 100%;
    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-xl);
    align-items: center;
    position: relative; z-index: 1;
}
.carnet-eyebrow {
    display: inline-block; color: var(--color-accent);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em;
    margin-bottom: var(--space-md);
}
.carnet-title { font-size: var(--fs-h1); margin-bottom: var(--space-lg); }
.carnet-subtitle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 480px;
    margin-bottom: var(--space-xl);
}
.carnet-cta {
    display: inline-block; background: var(--color-accent); color: var(--color-primary);
    padding: 16px var(--space-xl); border-radius: var(--radius-pill);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    box-shadow: 0 10px 30px rgba(245, 177, 2, 0.32);
}
.carnet-cta:hover { background: var(--color-accent-pressed); color: var(--color-primary); transform: translateY(-1px); }
.carnet-figure { position: relative; }
.carnet-figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }

@media (max-width: 860px) {
    .carnet-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .carnet-figure { order: -1; max-width: 540px; margin: 0 auto; }
}

/* --- Page header (PHEAD-01) ------------------------------ */
.feuille {
    background: var(--color-primary);
    padding: var(--space-2xl) 0 var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}
.feuille-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.feuille-eyebrow {
    display: inline-block; color: var(--color-accent);
    font-size: 0.86rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em;
    margin-bottom: var(--space-md);
}
.feuille-title { font-size: var(--fs-h1); margin-bottom: var(--space-md); }
.feuille-lede { color: var(--color-text-muted); max-width: 740px; font-size: 1.08rem; }
.feuille-meta { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--space-md); }

/* --- Prose (PROSE-01) ----------------------------------- */
.imposte { background: var(--color-bg); padding: var(--space-2xl) 0; }
.imposte-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.imposte-body h2 { margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.imposte-body h2:first-child { margin-top: 0; }
.imposte-body p { color: var(--color-text-muted); font-size: 1.04rem; }
.imposte-body p strong { color: var(--color-text); }
.imposte-body ul, .imposte-body ol { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.imposte-body ul li, .imposte-body ol li { padding-left: 4px; }
.imposte-body a { color: var(--color-accent); border-bottom: 1px dotted var(--color-accent); }
.imposte-body a:hover { color: var(--color-accent-pressed); border-bottom-color: var(--color-accent-pressed); }

/* --- Items grid (GRID-02 — Card grid) ------------------- */
.cour { background: var(--color-primary); padding: var(--space-2xl) 0; }
.cour-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.cour-heading { font-size: var(--fs-h2); margin-bottom: var(--space-xl); }
.cour-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); list-style: none; padding: 0; margin: 0; }
.cour-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: transform var(--motion-med), border-color var(--motion-med);
}
.cour-item:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.cour-item-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.25rem; margin: 0 0 10px 0; color: var(--color-accent);
}
.cour-item-text { color: var(--color-text-muted); font-size: 0.98rem; margin: 0; }

@media (max-width: 980px) { .cour-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cour-list { grid-template-columns: 1fr; } }

/* --- Data table (TABLE-07) ------------------------------ */
.oriel { background: var(--color-bg); padding: var(--space-2xl) 0; }
.oriel-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.oriel-heading { font-size: var(--fs-h2); margin-bottom: var(--space-lg); }
.oriel-table {
    width: 100%; border-collapse: collapse;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--color-border);
}
.oriel-table th, .oriel-table td {
    padding: 16px var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.oriel-table th {
    background: var(--color-primary);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 1.05rem;
}
.oriel-table td { color: var(--color-text-muted); }
.oriel-table tr:last-child td { border-bottom: none; }

/* --- Reviews (REV-10) ----------------------------------- */
.fresque { background: var(--color-bg); padding: var(--space-2xl) 0; }
.fresque-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.fresque-heading { font-size: var(--fs-h2); margin-bottom: var(--space-xl); }
.fresque-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); list-style: none; padding: 0; margin: 0; }
.fresque-card {
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}
.fresque-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.fresque-author { font-weight: 700; color: var(--color-text); font-family: var(--font-display); font-size: 1.1rem; }
.fresque-stars { color: var(--color-accent); letter-spacing: 0.06em; font-size: 0.95rem; }
.fresque-date { color: var(--color-text-muted); font-size: var(--fs-small); }
.fresque-body { color: var(--color-text-muted); margin: 0; font-size: 0.98rem; }

@media (max-width: 760px) { .fresque-list { grid-template-columns: 1fr; } }

/* --- FAQ (FAQ-09 — accordion) --------------------------- */
.console { background: var(--color-primary); padding: var(--space-2xl) 0; }
.console-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.console-heading { font-size: var(--fs-h2); margin-bottom: var(--space-xl); }
.console-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.console-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.console-question {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md);
    width: 100%; padding: 18px var(--space-lg);
    text-align: left;
    color: var(--color-text); font-weight: 600; font-size: 1.05rem;
}
.console-question:hover { background: var(--color-border); color: var(--color-accent); }
.console-icon { flex-shrink: 0; transition: transform var(--motion-fast); font-size: 1.2rem; color: var(--color-accent); }
.console-question[aria-expanded='true'] .console-icon { transform: rotate(45deg); }
.console-answer {
    padding: 0 var(--space-lg) 18px;
    color: var(--color-text-muted); font-size: 1rem;
    display: none;
}
.console-question[aria-expanded='true'] + .console-answer { display: block; }

/* --- CTA block (CTA-08) --------------------------------- */
.corniche {
    background: linear-gradient(120deg, var(--color-gradient-mid) 0%, var(--color-accent) 100%);
    color: var(--color-primary);
    padding: var(--space-2xl) 0;
}
.corniche-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    text-align: center;
}
.corniche-title { color: var(--color-primary); font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.corniche-text { color: var(--color-primary); max-width: 720px; margin: 0 auto var(--space-xl); font-size: 1.05rem; }
.corniche-btn {
    display: inline-block; background: var(--color-primary); color: var(--color-text);
    padding: 16px var(--space-xl); border-radius: var(--radius-pill);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.corniche-btn:hover { background: #000; color: var(--color-accent); }

/* --- Inline CTA (INLINE-CTA-01) ------------------------- */
.pilier {
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-xl) 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.pilier-content { flex: 1; min-width: 240px; }
.pilier-title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 6px 0; color: var(--color-text); }
.pilier-text { color: var(--color-text-muted); margin: 0; font-size: 0.98rem; }
.pilier-btn {
    flex-shrink: 0;
    background: var(--color-accent); color: var(--color-primary);
    padding: 14px var(--space-lg); border-radius: var(--radius-pill);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    font-size: 0.9rem;
}
.pilier-btn:hover { background: var(--color-accent-pressed); color: var(--color-primary); }

/* --- Author byline (BYLINE-04) -------------------------- */
.vignette {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}
.vignette-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--color-accent);
    flex-shrink: 0;
}
.vignette-meta { display: flex; flex-direction: column; gap: 2px; }
.vignette-prefix { color: var(--color-text-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; }
.vignette-name { color: var(--color-text); font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; }
.vignette-name a { color: var(--color-text); }
.vignette-name a:hover { color: var(--color-accent); }
.vignette-role { color: var(--color-text-muted); font-size: var(--fs-small); }
.vignette-date { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: 2px; }

/* --- Author card (AUTH-05) ------------------------------ */
.cadre {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: grid; grid-template-columns: 180px 1fr; gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-xl);
}
.cadre-portrait {
    width: 180px; height: 180px; border-radius: var(--radius-lg);
    object-fit: cover; border: 3px solid var(--color-accent);
}
.cadre-name { font-size: 1.6rem; margin: 0 0 6px 0; }
.cadre-role { color: var(--color-accent); font-weight: 700; margin: 0 0 var(--space-md) 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; }
.cadre-bio { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.cadre-expertise-heading { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 8px 0; color: var(--color-text); }
.cadre-expertise-list { color: var(--color-text-muted); margin: 0; }
.cadre-articles { margin-top: var(--space-xl); }
.cadre-articles-heading { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: var(--space-md); }
.cadre-articles-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cadre-articles-item a {
    display: block;
    padding: 14px var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: border-color var(--motion-fast);
}
.cadre-articles-item a:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 720px) {
    .cadre { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .cadre-portrait { margin: 0 auto; }
}

/* --- Legal section (LEGAL-04) --------------------------- */
.ardoise { background: var(--color-bg); padding: var(--space-2xl) 0; }
.ardoise-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.ardoise-section { margin-bottom: var(--space-xl); }
.ardoise-section h2 { font-size: 1.4rem; color: var(--color-accent); margin-bottom: var(--space-md); }
.ardoise-section p { color: var(--color-text-muted); }
.ardoise-support {
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
}
.ardoise-support h2 { color: var(--color-text); font-size: 1.2rem; margin-bottom: 10px; }
.ardoise-support ul { color: var(--color-text-muted); margin: 0; }
.ardoise-disclaimer { color: var(--color-text-muted); font-style: italic; font-size: 0.95rem; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }

/* --- Contact form (FORM-04) ----------------------------- */
.bandeau { background: var(--color-bg); padding: var(--space-2xl) 0; }
.bandeau-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.bandeau-grid {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl);
    align-items: start;
}
.bandeau-intro { color: var(--color-text-muted); font-size: 1.06rem; }
.bandeau-form {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex; flex-direction: column; gap: var(--space-md);
}
.bandeau-field { display: flex; flex-direction: column; gap: 6px; }
.bandeau-label { color: var(--color-text); font-weight: 600; font-size: 0.95rem; }
.bandeau-input, .bandeau-textarea {
    width: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px var(--space-md);
    font: inherit;
    transition: border-color var(--motion-fast);
}
.bandeau-input:focus, .bandeau-textarea:focus { outline: none; border-color: var(--color-accent); }
.bandeau-textarea { min-height: 140px; resize: vertical; }
.bandeau-submit {
    background: var(--color-accent); color: var(--color-primary);
    padding: 14px var(--space-lg); border-radius: var(--radius-pill);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    align-self: flex-start;
}
.bandeau-submit:hover { background: var(--color-accent-pressed); color: var(--color-primary); }
.bandeau-success { padding: var(--space-md); border-radius: var(--radius-md); background: rgba(245, 177, 2, 0.1); border: 1px solid var(--color-accent); color: var(--color-text); }
.bandeau-success.is-hidden { display: none; }

@media (max-width: 760px) { .bandeau-grid { grid-template-columns: 1fr; } }

/* --- Error block (ERR-05) ------------------------------- */
.relief {
    min-height: 60vh; display: flex; align-items: center;
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-bg) 100%);
    padding: var(--space-2xl) 0;
}
.relief-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    text-align: center;
}
.relief-code { font-family: var(--font-display); font-size: 7rem; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-md); }
.relief-title { font-size: var(--fs-h1); margin-bottom: var(--space-md); }
.relief-text { color: var(--color-text-muted); max-width: 560px; margin: 0 auto var(--space-xl); font-size: 1.08rem; }
.relief-btn {
    display: inline-block; background: var(--color-accent); color: var(--color-primary);
    padding: 14px var(--space-xl); border-radius: var(--radius-pill);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.relief-btn:hover { background: var(--color-accent-pressed); color: var(--color-primary); }

/* --- Page image / figure -------------------------------- */
.page-figure { margin: 0 0 var(--space-xl) 0; }
.page-figure img {
    width: 100%; max-height: 520px; object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

/* --- Footer (FOOT-09 — masthead newspaper-style) -------- */
.porte {
    background: var(--color-primary);
    color: var(--color-text-muted);
    padding: var(--space-2xl) 0 var(--space-lg);
    border-top: 4px solid var(--color-accent);
}
.porte-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.porte-masthead {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-md); margin-bottom: var(--space-xl);
}
.porte-mast-issue {
    font-family: var(--font-display); font-style: italic;
    color: var(--color-text-muted); font-size: 1.05rem;
    letter-spacing: 0.04em;
}
.porte-mast-brand {
    font-family: var(--font-display); font-weight: 700;
    color: var(--color-accent); font-size: 1.6rem; letter-spacing: 0.04em;
}
.porte-mast-tag {
    color: var(--color-text-muted); font-size: 0.92rem;
    text-transform: uppercase; letter-spacing: 0.14em;
}
.porte-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.porte-about p { color: var(--color-text-muted); font-size: 0.95rem; }
.porte-logo-img { height: 64px; width: auto; margin-bottom: var(--space-md); }
.porte-col-heading { color: var(--color-accent); font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-md); }
.porte-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.porte-list a { color: var(--color-text-muted); font-size: 0.95rem; }
.porte-list a:hover { color: var(--color-accent); }
.porte-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted); font-size: 0.85rem;
}
.porte-bottom-license { color: var(--color-text-muted); }
.porte-rg { display: inline-flex; align-items: center; gap: 8px; color: var(--color-rg-banner); font-weight: 700; }

@media (max-width: 860px) {
    .porte-masthead { flex-direction: column; text-align: center; }
    .porte-grid { grid-template-columns: 1fr; }
    .porte-bottom { flex-direction: column; text-align: center; }
}

/* --- Cookie banner (COOK-01 — bottom bar) --------------- */
.lisere {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--color-primary);
    border-top: 1px solid var(--color-accent);
    z-index: 90;
    display: none;
}
.lisere.is-shown { display: block; }
.lisere-inner {
    max-width: 1200px; margin: 0 auto;
    padding: var(--space-md) var(--container-padding-desktop);
    display: flex; align-items: center; gap: var(--space-md);
}
.lisere-text { flex: 1; color: var(--color-text-muted); font-size: 0.95rem; }
.lisere-actions { display: flex; gap: 10px; flex-shrink: 0; }
.lisere-btn {
    padding: 10px var(--space-md); border-radius: var(--radius-pill);
    font-weight: 700; font-size: 0.88rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer;
}
.lisere-btn-accept { background: var(--color-accent); color: var(--color-primary); border: 0; }
.lisere-btn-accept:hover { background: var(--color-accent-pressed); color: var(--color-primary); }
.lisere-btn-decline { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.lisere-btn-decline:hover { color: var(--color-text); border-color: var(--color-text); }

@media (max-width: 720px) {
    .lisere, .lisere-inner {
        padding: 12px 14px !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .lisere-inner { flex-direction: column; align-items: stretch; padding-block: 12px !important; padding-inline: 14px !important; }
    .lisere-title, .lisere-heading { display: none !important; }
    .lisere-button, .lisere button {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    .lisere-actions { width: 100%; }
    .lisere-btn { flex: 1; }
}

/* --- Mobile typography touchups ------------------------- */
@media (max-width: 600px) {
    body { font-size: 1rem; }
    .section, .imposte, .cour, .console, .fresque, .oriel, .feuille, .corniche, .ardoise, .bandeau { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .relief-code { font-size: 5rem; }
    .pilier { flex-direction: column; align-items: stretch; text-align: center; }
    .pilier-btn { align-self: center; }
}