/* ============================================================
   Gransino Casino — coat-warm.css
   TYPO-09 / SPACE-02 / CONT-05 / BP-08 / GEO-02 / MOTION-08 / NAME-01
   ============================================================ */

/* ---- tokens ---- */
:root {
  --site-brand-color: #1c1e20;
  --site-secondary: #f78847;
  --site-accent-dark: #e8682a;
  --site-surface: #131415;
  --site-surface-raised: #1d1f21;
  --site-gradient-from: #fec49e;
  --site-grad-mid: #ffa462;
  --site-text-color: #ffffff;
  --site-fg-muted: #afb2b6;
  --site-notice-bg: #dc2626;
  --site-color-line: rgba(255,255,255,0.08);

  --site-heading-font: "Anton", "Oswald", Impact, sans-serif;
  --site-font-text: "Jost", "Inter", Arial, sans-serif;

  --site-type-h1: 52px; --site-fs-h2: 32px; --site-text-h3: 24px; --site-size-h4: 19px;
  --site-type-h5: 16px; --site-fs-h6: 14px; --site-size-body: 17px; --site-type-small: 14px; --site-size-xs: 12px;
  --site-leading-tight: 1.15; --site-lh-base: 1.55; --site-leading-loose: 1.7;
  --site-ls-tight: 0; --site-ls-normal: 0; --site-ls-wide: 0.02em;
  --site-weight-regular: 400; --site-fw-medium: 500; --site-font-bold: 700;

  --site-gutter-2xs: 8px; --site-gutter-xs: 12px; --site-spacing-sm: 16px; --site-gutter-md: 24px;
  --site-gutter-lg: 32px; --site-spacing-xl: 48px; --site-space-2xl: 72px; --site-gap-3xl: 112px;
  --site-sec-y: 44px;

  --site-container: 1140px;
  --site-prose-width: 670px;
  --site-container-narrow: 580px;
  --site-container-default: 880px;
  --site-container-wide: 1120px;
  --site-inset-mobile: 20px;
  --site-container-padding-tablet: 32px;
  --site-gutter-desktop: 64px;

  --site-bp-sm: 620px; --site-bp-md: 940px; --site-bp-lg: 1200px; --site-bp-xl: 1620px;

  --site-round-xs: 4px; --site-rounded-sm: 8px; --site-round-md: 12px; --site-round-lg: 20px;
  --site-radius-pill: 9999px; --site-radius-circle: 50%;
  --site-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --site-shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --site-elevation-2: 0 6px 18px rgba(0,0,0,0.12);
  --site-elevation-3: 0 12px 32px rgba(0,0,0,0.16);
  --site-stroke-thin: 1px; --site-border-medium: 2px; --site-border-thick: 3px;

  --site-duration-fast: 150ms; --site-transition-base: 220ms; --site-transition-slow: 450ms;
  --site-ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --site-ease-in: cubic-bezier(0.55,0.06,0.68,0.19);
  --site-ease-in-out: cubic-bezier(0.645,0.045,0.355,1);
  --site-ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--site-surface);
  color: var(--site-text-color);
  font-family: var(--site-font-text);
  font-size: var(--site-size-body);
  font-weight: var(--site-weight-regular);
  line-height: var(--site-lh-base);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--site-leading-tight); }
p { margin: 0; }
ul, ol { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---- a11y ---- */
.skip-link {
  position: fixed; left: var(--site-gutter-md); top: var(--site-gutter-md); z-index: 200;
  background: var(--site-secondary); color: var(--site-surface);
  padding: var(--site-gutter-2xs) var(--site-spacing-sm); border-radius: var(--site-rounded-sm);
  font-weight: var(--site-font-bold);
}
.skip-link:not(:focus) { top: -200px !important; }
.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.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- shared section inners (literal calc — verify-widths) ---- */
.secteur-inner   { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.mosaique-inner  { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.nef-inner       { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.classeur-inner  { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.planche-inner   { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.crypte-inner    { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.coupole-inner   { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.cloche-inner    { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.etiquette-inner { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.zone-inner      { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.manchette-inner { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.pupitre-inner   { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.media-band-inner{ max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }
.vestibule-inner { max-width: calc(var(--site-container) + 2 * var(--site-gutter-desktop)); margin-inline: auto; padding-inline: var(--site-gutter-desktop); }

/* prose / legal readable reading-column, still full-width -inner */
.coupole-inner > * { max-width: var(--site-prose-width); margin-inline: auto; }

/* ============================================================
   HEADER — HEAD-10 Tall Editorial + NAV-03 two-row + AUTH-BOTH
   ============================================================ */
.chevet { background: var(--site-surface); border-bottom: 1px solid rgba(255,255,255,0.06); }
.chevet-bar { max-width: 1440px; margin-inline: auto; padding-inline: var(--site-gutter-md); }
.chevet-row { display: flex; align-items: center; }
.chevet-row--top { min-height: 108px; justify-content: space-between; }
.chevet-row--bottom { min-height: 52px; justify-content: space-between; gap: var(--site-gutter-md); padding-bottom: var(--site-gutter-xs); }
.chevet-logo { flex-shrink: 0; display: inline-flex; }
.chevet-logo-pill { display: inline-flex; align-items: center; background: #ffffff; padding: 6px 14px; border-radius: var(--site-round-md); }
.chevet-logo-img { height: 96px; width: auto; flex-shrink: 0; }
.chevet-logo img { height: 96px; width: auto; }

.chevet-toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; background: transparent; border: 0; padding: 8px; }
.chevet-toggle-bar { display: block; width: 26px; height: 3px; background: var(--site-text-color); border-radius: 2px; }

.chevet-nav { display: flex; flex-direction: column; gap: var(--site-gutter-2xs); }
.chevet-nav-list { display: flex; flex-wrap: nowrap; gap: var(--site-gutter-lg); list-style: none; margin: 0; padding: 0; }
.chevet-nav-list--top { }
.chevet-nav-list--bottom { padding-top: var(--site-gutter-2xs); border-top: 1px solid var(--site-color-line); }
.chevet-nav-item { }
.chevet-link { font-family: var(--site-heading-font); font-weight: var(--site-fw-medium); font-size: var(--site-fs-h6); letter-spacing: var(--site-ls-wide); color: var(--site-text-color); white-space: nowrap; padding-block: var(--site-gutter-2xs); transition: color var(--site-duration-fast) var(--site-ease); }
.chevet-link:hover { color: var(--site-secondary); }
.chevet-link--active { color: var(--site-secondary); }

.chevet-auth { display: flex; gap: var(--site-spacing-sm); align-items: center; flex-shrink: 0; }
.chevet-auth-btn { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-size-xs); letter-spacing: var(--site-ls-wide); text-transform: uppercase; padding-inline: var(--site-gutter-md); height: 40px; display: inline-flex; align-items: center; border-radius: var(--site-round-md); white-space: nowrap; flex-shrink: 0; transition: background var(--site-transition-base) var(--site-ease), color var(--site-transition-base) var(--site-ease); }
.chevet-auth-btn--site-login { background: var(--site-surface); border: 1px solid var(--site-text-color); color: var(--site-text-color); }
.chevet-auth-btn--site-login:hover { background: var(--site-text-color); color: var(--site-surface); }
.chevet-auth-btn--site-register { background: var(--site-secondary); border: 1px solid var(--site-secondary); color: var(--site-surface); }
.chevet-auth-btn--site-register:hover { background: var(--site-accent-dark); border-color: var(--site-accent-dark); color: var(--site-surface); }

.chevet-drawer { display: none; border-top: 1px solid var(--site-color-line); background: var(--site-surface); }
.chevet-drawer.is-open { display: block; }
.chevet-drawer-list { list-style: none; margin: 0; padding: var(--site-spacing-sm) var(--site-gutter-md); display: flex; flex-direction: column; gap: var(--site-gutter-2xs); }
.chevet-drawer-item { }
.chevet-drawer-link { display: block; font-family: var(--site-heading-font); font-size: var(--site-type-h5); color: var(--site-text-color); padding: var(--site-gutter-xs) 0; }
.chevet-drawer-link:hover { color: var(--site-secondary); }
.chevet-drawer-link--site-login,
.chevet-drawer-link--site-register { color: var(--site-secondary); font-weight: var(--site-font-bold); text-transform: uppercase; letter-spacing: var(--site-ls-wide); font-size: var(--site-type-small); }

/* ============================================================
   HERO — HERO-09 Two-Column Card Stack
   ============================================================ */
.secteur { background: var(--site-surface); padding-block: var(--site-sec-y); }
.secteur-inner { display: grid; grid-template-columns: 60% 40%; gap: var(--site-space-2xl); align-items: center; }
.secteur-content { padding-block: var(--site-gutter-lg); }
.secteur-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-type-h1); line-height: var(--site-leading-tight); color: var(--site-text-color); }
.secteur-subtitle { margin-top: var(--site-gutter-md); max-width: 480px; font-size: var(--site-size-body); line-height: var(--site-leading-loose); color: var(--site-fg-muted); }
.secteur-cta { display: inline-flex; align-items: center; margin-top: var(--site-gutter-lg); background: var(--site-secondary); color: var(--site-surface); font-family: var(--site-font-text); font-weight: var(--site-fw-medium); font-size: var(--site-fs-h6); padding: var(--site-spacing-sm) var(--site-gutter-lg); border-radius: var(--site-round-md); box-shadow: var(--site-elevation-2); transition: transform var(--site-transition-base) var(--site-ease-spring), background var(--site-transition-base) var(--site-ease), box-shadow var(--site-transition-base) var(--site-ease); }
.secteur-cta:hover { background: var(--site-accent-dark); color: var(--site-surface); transform: scale(1.04); box-shadow: var(--site-elevation-3); }
.secteur-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--site-gutter-md); }
.secteur-feature { display: flex; gap: var(--site-gutter-md); align-items: flex-start; padding: var(--site-gutter-md); background: var(--site-surface-raised); border-radius: var(--site-round-md); border: 1px solid var(--site-color-line); }
.secteur-feature-num { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-text-h3); color: var(--site-secondary); line-height: 1; }
.secteur-feature-title { font-size: var(--site-size-body); font-weight: var(--site-font-bold); line-height: var(--site-leading-tight); color: var(--site-text-color); }

/* hero entrance animation (MOTION-08) */
.secteur-title { animation: hero-rise var(--site-transition-base) var(--site-ease-spring) both; }
.secteur-subtitle { animation: hero-rise var(--site-transition-base) var(--site-ease-spring) 150ms both; }
.secteur-cta { animation: hero-rise var(--site-transition-base) var(--site-ease-spring) 300ms both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   PAGE-HEADER — PHEAD-02 Compact Centered
   ============================================================ */
.mosaique { background: var(--site-surface); padding-block: var(--site-sec-y); }
.mosaique-inner { text-align: center; }
.mosaique-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-type-h1); line-height: var(--site-leading-tight); color: var(--site-text-color); }
.mosaique-divider { display: block; width: 64px; height: 3px; background: var(--site-secondary); border-radius: 2px; margin: var(--site-gutter-md) auto; }
.mosaique-desc { max-width: 580px; margin: 0 auto; color: var(--site-fg-muted); font-size: var(--site-size-body); line-height: var(--site-lh-base); }

/* ============================================================
   PROSE — PROSE-01 Classic Long-Read
   ============================================================ */
.coupole { background: var(--site-surface); padding-block: var(--site-sec-y); }
.coupole h2 { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-fs-h2); line-height: var(--site-leading-tight); color: var(--site-text-color); margin-top: var(--site-space-2xl); margin-bottom: var(--site-gutter-md); }
.coupole h2:first-child { margin-top: 0; }
.coupole p { font-size: var(--site-size-body); line-height: var(--site-leading-loose); color: var(--site-text-color); margin-bottom: var(--site-gutter-md); }
.coupole ul, .coupole ol { margin: 0 auto var(--site-gutter-md); padding-left: var(--site-gutter-lg); color: var(--site-text-color); }
.coupole li { font-size: var(--site-size-body); line-height: var(--site-lh-base); margin-bottom: var(--site-gutter-2xs); }
.coupole a { color: var(--site-secondary); text-decoration: underline; text-underline-offset: 3px; transition: text-decoration-thickness var(--site-duration-fast) var(--site-ease); }
.coupole a:hover { text-decoration-thickness: 2px; color: var(--site-secondary); }
.coupole strong { font-weight: var(--site-font-bold); color: var(--site-text-color); }
.coupole em { font-style: italic; color: var(--site-text-color); }

/* ============================================================
   ITEMS-GRID — GRID-01 Three-Column Bordered Cards
   ============================================================ */
.nef { background: var(--site-surface); padding-block: var(--site-sec-y); }
.nef-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-fs-h2); color: var(--site-text-color); margin-bottom: var(--site-gutter-lg); }
.nef-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--site-gutter-lg); }
.nef-item { padding: var(--site-gutter-lg); background: var(--site-surface-raised); border: 1px solid rgba(175,178,182,0.15); border-radius: var(--site-round-md); transition: border-color var(--site-transition-base) var(--site-ease); }
.nef-item:hover { border-color: var(--site-secondary); }
.nef-item-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-size-h4); line-height: var(--site-leading-tight); color: var(--site-text-color); margin-bottom: var(--site-spacing-sm); }
.nef-item-text { font-family: var(--site-font-text); font-size: var(--site-size-body); line-height: var(--site-lh-base); color: var(--site-fg-muted); }

/* ============================================================
   DATA-TABLE — TABLE-01 Striped Rows Classic
   ============================================================ */
.cloche { background: var(--site-surface); padding-block: var(--site-sec-y); }
.cloche-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-fs-h2); color: var(--site-text-color); margin-bottom: var(--site-gutter-lg); }
.cloche-wrap { overflow-x: auto; border-radius: var(--site-round-md); border: 1px solid var(--site-color-line); }
.cloche-table { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--site-surface-raised); }
.cloche-table th { background: var(--site-brand-color); color: var(--site-secondary); font-family: var(--site-font-text); font-weight: var(--site-fw-medium); text-transform: uppercase; font-size: var(--site-fs-h6); letter-spacing: var(--site-ls-wide); padding: var(--site-gutter-md); text-align: left; }
.cloche-table td { padding: var(--site-gutter-md); font-size: var(--site-size-body); color: var(--site-fg-muted); text-align: left; }
.cloche-table td:first-child { color: var(--site-text-color); font-weight: var(--site-fw-medium); }
.cloche-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.cloche-table tbody tr:hover { background: rgba(255,255,255,0.04); transition: background var(--site-duration-fast) var(--site-ease); }

/* ============================================================
   REVIEWS — REV-02 Quote-Style Editorial
   ============================================================ */
.planche { background: var(--site-surface); padding-block: var(--site-sec-y); }
.planche-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-fs-h2); color: var(--site-text-color); margin-bottom: var(--site-gutter-md); text-align: center; }
.planche-list { list-style: none; margin: 0; padding: 0; }
.planche-item { position: relative; max-width: var(--site-prose-width); margin: 0 auto; padding-block: var(--site-spacing-xl); border-bottom: 1px solid var(--site-color-line); }
.planche-item:last-child { border-bottom: 0; }
.planche-quote { margin: 0; position: relative; padding-top: var(--site-gutter-md); }
.planche-quote::before { content: "\201C"; position: absolute; top: -12px; left: -8px; font-family: var(--site-heading-font); font-size: var(--site-type-h1); color: var(--site-secondary); line-height: 1; }
.planche-quote p { font-family: var(--site-heading-font); font-weight: var(--site-weight-regular); font-style: normal; font-size: var(--site-size-h4); line-height: var(--site-leading-tight); color: var(--site-text-color); }
.planche-attribution { display: flex; gap: var(--site-spacing-sm); align-items: center; margin-top: var(--site-spacing-sm); font-size: var(--site-type-small); color: var(--site-fg-muted); }
.planche-author { font-style: normal; font-weight: var(--site-fw-medium); color: var(--site-text-color); }
.planche-rating-text { color: var(--site-secondary); font-weight: var(--site-font-bold); }

/* ============================================================
   FAQ — FAQ-04 Side-Numbered Accordion
   ============================================================ */
.classeur { background: var(--site-surface); padding-block: var(--site-sec-y); }
.classeur-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-fs-h2); color: var(--site-text-color); margin-bottom: var(--site-gutter-lg); }
.classeur-list { list-style: none; margin: 0; padding: 0; }
.classeur-item { display: grid; grid-template-columns: 60px 1fr; align-items: start; padding-block: var(--site-spacing-sm); border-bottom: 1px solid var(--site-color-line); }
.classeur-num { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-text-h3); color: var(--site-secondary); align-self: start; grid-row: 1; }
.classeur-q { grid-column: 2; grid-row: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--site-gutter-md); width: 100%; text-align: left; background: var(--site-surface-raised); color: var(--site-text-color); border: 0; border-radius: var(--site-rounded-sm); padding: var(--site-spacing-sm) var(--site-gutter-md); font-family: var(--site-heading-font); font-size: var(--site-type-h5); font-weight: var(--site-fw-medium); }
.classeur-q-text { flex: 1; }
.classeur-icon { flex-shrink: 0; width: 12px; height: 12px; border-right: 2px solid var(--site-secondary); border-bottom: 2px solid var(--site-secondary); transform: rotate(45deg); transition: transform var(--site-transition-base) var(--site-ease); }
.classeur-q[aria-expanded="true"] .classeur-icon { transform: rotate(-135deg); }
.classeur-a { grid-column: 2; grid-row: 2; overflow: hidden; }
.classeur-a[hidden] { display: none; }
.classeur-a-inner { padding: var(--site-spacing-sm) var(--site-gutter-md) var(--site-gutter-md); }
.classeur-a-inner p { font-size: var(--site-size-body); line-height: var(--site-lh-base); color: var(--site-fg-muted); }

/* ============================================================
   CTA-BLOCK — CTA-03 Split Visual + Text (mode A solid accent)
   ============================================================ */
.crypte { background: var(--site-surface); padding-block: var(--site-sec-y); }
.crypte-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--site-space-2xl); align-items: stretch; }
.crypte-content { padding-block: var(--site-gutter-lg); }
.crypte-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-fs-h2); color: var(--site-text-color); }
.crypte-text { margin-top: var(--site-gutter-md); font-size: var(--site-size-body); line-height: var(--site-leading-loose); color: var(--site-fg-muted); }
.crypte-btn { display: inline-flex; margin-top: var(--site-gutter-lg); background: var(--site-secondary); color: var(--site-surface); font-family: var(--site-font-text); font-weight: var(--site-fw-medium); font-size: var(--site-fs-h6); padding: var(--site-spacing-sm) var(--site-gutter-lg); border-radius: var(--site-round-md); box-shadow: var(--site-elevation-2); transition: background var(--site-transition-base) var(--site-ease), transform var(--site-transition-base) var(--site-ease-spring); }
.crypte-btn:hover { background: var(--site-accent-dark); color: var(--site-surface); transform: scale(1.04); }
.crypte-visual { min-height: 300px; display: flex; align-items: center; justify-content: center; background: var(--site-secondary); border-radius: var(--site-round-lg); }
.crypte-visual-mark { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: 96px; color: var(--site-surface); text-align: center; line-height: 1; }

/* ============================================================
   INLINE-CTA — INLINE-CTA-01 Compact Banner Strip
   ============================================================ */
.manchette { background: var(--site-secondary); padding-block: var(--site-gutter-md); }
.manchette-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--site-gutter-md); }
.manchette-text { font-size: var(--site-type-h5); font-weight: var(--site-font-bold); color: var(--site-surface); }
.manchette-btn { flex-shrink: 0; background: var(--site-surface); color: var(--site-secondary); font-weight: var(--site-font-bold); padding: var(--site-spacing-sm) var(--site-gutter-lg); border-radius: var(--site-round-md); transition: background var(--site-transition-base) var(--site-ease), color var(--site-transition-base) var(--site-ease); }
.manchette-btn:hover { background: var(--site-brand-color); color: var(--site-secondary); }

/* ============================================================
   AUTHOR-BYLINE — BYLINE-06 Minimal
   ============================================================ */
.placard { background: var(--site-surface); padding-block: var(--site-gutter-md); }
.placard-hold { max-width: var(--site-prose-width); margin-inline: auto; padding-inline: var(--site-gutter-desktop); display: flex; gap: var(--site-gutter-md); align-items: center; }
.placard-text { flex: 1; font-size: var(--site-type-small); font-style: italic; color: var(--site-fg-muted); }
.placard-name { color: var(--site-secondary); text-decoration: underline; text-underline-offset: 3px; font-style: normal; }
.placard-name:hover { text-decoration-thickness: 2px; }
.placard-divider { margin-inline: 4px; }
.placard-role { }
.placard-portrait { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--site-radius-circle); object-fit: cover; }

/* ============================================================
   AUTHOR-CARD — AUTH-07 Quote-Style with Portrait
   ============================================================ */
.vestibule { background: var(--site-surface); padding-block: var(--site-sec-y); }
.vestibule-card { display: grid; grid-template-columns: 100px 1fr; gap: var(--site-gutter-lg); background: var(--site-surface-raised); padding: var(--site-spacing-xl); border-radius: var(--site-round-md); border-left: 4px solid var(--site-secondary); max-width: 880px; margin-inline: auto; }
.vestibule-portrait { width: 100px; height: 100px; border-radius: var(--site-radius-circle); object-fit: cover; }
.vestibule-body { display: flex; flex-direction: column; }
.vestibule-quote-mark { font-family: var(--site-heading-font); font-size: var(--site-type-h1); color: var(--site-secondary); line-height: 0.8; }
.vestibule-bio { font-style: italic; font-size: var(--site-type-h5); line-height: var(--site-lh-base); color: var(--site-text-color); }
.vestibule-attribution { margin-top: var(--site-gutter-md); font-size: var(--site-type-small); letter-spacing: var(--site-ls-wide); color: var(--site-fg-muted); }
.vestibule-articles { max-width: 880px; margin: var(--site-spacing-xl) auto 0; }
.vestibule-articles-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-text-h3); color: var(--site-text-color); margin-bottom: var(--site-gutter-md); }
.vestibule-articles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--site-gutter-2xs); }
.vestibule-articles-item { border-bottom: 1px solid var(--site-color-line); padding-block: var(--site-gutter-2xs); }
.vestibule-articles-link { color: var(--site-secondary); text-decoration: underline; text-underline-offset: 3px; }
.vestibule-articles-link:hover { text-decoration-thickness: 2px; }

/* ============================================================
   LEGAL-SECTION — LEGAL-04 Bordered Article Box
   ============================================================ */
.etiquette { background: var(--site-surface); padding-block: var(--site-sec-y); }
.etiquette-box { position: relative; max-width: calc(var(--site-prose-width) + 2 * var(--site-space-2xl)); margin-inline: auto; background: var(--site-surface-raised); padding: var(--site-space-2xl); border-radius: var(--site-round-lg); border: 1px solid var(--site-color-line); box-shadow: var(--site-shadow-sm); }
.etiquette-updated { position: absolute; top: var(--site-gutter-md); right: var(--site-gutter-md); font-size: var(--site-size-xs); color: var(--site-fg-muted); }
.etiquette-section { margin-bottom: var(--site-gutter-lg); }
.etiquette-section-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-text-h3); color: var(--site-text-color); margin-bottom: var(--site-spacing-sm); }
.etiquette-box p { font-size: var(--site-size-body); line-height: var(--site-leading-loose); color: var(--site-text-color); margin-bottom: var(--site-spacing-sm); }
.etiquette-contacts-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-text-h3); color: var(--site-text-color); margin-bottom: var(--site-spacing-sm); }
.etiquette-contacts { padding-left: var(--site-gutter-lg); color: var(--site-fg-muted); }
.etiquette-contact-item { font-size: var(--site-size-body); line-height: var(--site-lh-base); margin-bottom: var(--site-gutter-2xs); }
.etiquette-disclaimer { margin-top: var(--site-gutter-lg); font-size: var(--site-type-small); font-style: italic; color: var(--site-fg-muted); }

/* ============================================================
   CONTACT-FORM — FORM-07 Card-Style Dark + Accent Header
   ============================================================ */
.zone { background: var(--site-surface); padding-block: var(--site-sec-y); }
.zone-intro { max-width: var(--site-prose-width); margin: 0 auto var(--site-gutter-lg); text-align: center; color: var(--site-fg-muted); font-size: var(--site-size-body); line-height: var(--site-lh-base); }
.zone-card { max-width: 640px; margin-inline: auto; border-radius: var(--site-round-lg); overflow: hidden; box-shadow: var(--site-elevation-2); }
.zone-card-top { height: 8px; background: var(--site-secondary); }
.zone-card-body { background: var(--site-surface-raised); padding: var(--site-spacing-xl); display: flex; flex-direction: column; gap: var(--site-gutter-md); }
.zone-field { display: flex; flex-direction: column; gap: var(--site-gutter-2xs); }
.zone-label { font-size: var(--site-type-small); font-weight: var(--site-fw-medium); color: var(--site-text-color); }
.zone-input, .zone-textarea { background: var(--site-surface); color: var(--site-text-color); border: 1px solid var(--site-color-line); border-radius: var(--site-rounded-sm); padding: var(--site-spacing-sm); font-family: var(--site-font-text); font-size: var(--site-size-body); }
.zone-input:focus, .zone-textarea:focus { outline: 2px solid var(--site-secondary); outline-offset: 1px; }
.zone-textarea { resize: vertical; }
.zone-submit { align-self: center; background: var(--site-secondary); color: var(--site-surface); font-family: var(--site-font-text); font-weight: var(--site-font-bold); font-size: var(--site-fs-h6); padding: var(--site-spacing-sm) var(--site-space-2xl); border: 0; border-radius: var(--site-round-md); transition: background var(--site-transition-base) var(--site-ease); }
.zone-submit:hover { background: var(--site-accent-dark); color: var(--site-surface); }
.zone-success { background: var(--site-brand-color); color: var(--site-text-color); padding: var(--site-gutter-md); border-radius: var(--site-rounded-sm); font-size: var(--site-size-body); text-align: center; }

/* ============================================================
   MEDIA (per-page images)
   ============================================================ */
.media-band { background: var(--site-surface); padding-block: var(--site-sec-y); }
.media-figure { margin: 0; border-radius: var(--site-round-md); overflow: hidden; border: 1px solid var(--site-color-line); }
.media-figure-img { width: 100%; height: auto; display: block; }
.media-figure--context { max-width: 880px; margin-inline: auto; }
.media-figure-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--site-gutter-lg); }
.media-figure--tile { }
.media-caption { margin-top: var(--site-gutter-2xs); font-size: var(--site-type-small); color: var(--site-fg-muted); }

/* ============================================================
   COOKIE — COOK-03 Corner Card
   ============================================================ */
.poteau { position: fixed; inset-block-end: var(--site-gutter-md); inset-inline-end: var(--site-gutter-md); width: 360px; max-width: calc(100vw - 2 * var(--site-gutter-md)); z-index: 90; background: var(--site-surface-raised); border-radius: var(--site-round-lg); padding: var(--site-gutter-lg); box-shadow: var(--site-elevation-3); border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: var(--site-gutter-md); }
.poteau[hidden] { display: none; }
.poteau-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-type-h5); text-transform: uppercase; letter-spacing: var(--site-ls-wide); color: var(--site-secondary); }
.poteau-message { font-size: var(--site-type-small); line-height: var(--site-lh-base); color: var(--site-fg-muted); }
.poteau-actions { display: flex; gap: var(--site-spacing-sm); }
.poteau-btn { width: 50%; height: 40px; border: 0; border-radius: var(--site-round-md); font-family: var(--site-font-text); font-weight: var(--site-font-bold); font-size: var(--site-type-small); transition: background var(--site-transition-base) var(--site-ease), color var(--site-transition-base) var(--site-ease); }
.poteau-btn--site-accept { background: var(--site-secondary); color: var(--site-surface); }
.poteau-btn--site-accept:hover { background: var(--site-accent-dark); color: var(--site-surface); }
.poteau-btn--site-decline { background: var(--site-brand-color); color: var(--site-text-color); border: 1px solid var(--site-color-line); }
.poteau-btn--site-decline:hover { background: var(--site-text-color); color: var(--site-surface); }

/* ============================================================
   ERROR — ERR-04 Full-Bleed Atmospheric
   ============================================================ */
.vitrail { position: relative; min-height: 82vh; display: flex; align-items: center; justify-content: center; background-image: url("/cache/panorama.webp"); background-size: cover; background-position: center; }
.vitrail-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.85)); }
.vitrail-content { position: relative; z-index: 1; text-align: center; max-width: 680px; padding: var(--site-spacing-xl); }
.vitrail-title { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-type-h1); color: var(--site-text-color); }
.vitrail-text { margin-top: var(--site-gutter-md); font-size: var(--site-type-h5); color: var(--site-text-color); }
.vitrail-btn { display: inline-flex; margin-top: var(--site-gutter-lg); background: var(--site-secondary); color: var(--site-surface); font-family: var(--site-font-text); font-weight: var(--site-font-bold); padding: var(--site-spacing-sm) var(--site-spacing-xl); border-radius: var(--site-round-md); transition: background var(--site-transition-base) var(--site-ease); }
.vitrail-btn:hover { background: var(--site-accent-dark); color: var(--site-surface); }

/* ============================================================
   FOOTER — FOOT-08 Newspaper Masthead
   ============================================================ */
.pupitre { background: var(--site-surface); padding-block: var(--site-spacing-xl); }
.pupitre-masthead { display: flex; flex-direction: column; align-items: center; gap: var(--site-spacing-sm); text-align: center; border-top: 4px solid var(--site-text-color); border-bottom: 4px solid var(--site-text-color); padding-block: var(--site-gutter-lg); }
.pupitre-logo { display: inline-flex; }
.pupitre-logo-pill { display: inline-flex; align-items: center; background: #ffffff; padding: 6px 14px; border-radius: var(--site-round-md); }
.pupitre-logo-img { height: 88px; width: auto; }
.pupitre-logo img { height: 88px; width: auto; }
.pupitre-issue { font-family: var(--site-heading-font); letter-spacing: var(--site-ls-wide); font-size: var(--site-type-small); color: var(--site-fg-muted); text-transform: uppercase; }
.pupitre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--site-gutter-lg); margin-top: var(--site-spacing-xl); }
.pupitre-col { }
.pupitre-col-heading { font-family: var(--site-heading-font); font-weight: var(--site-font-bold); font-size: var(--site-type-h5); text-transform: uppercase; letter-spacing: var(--site-ls-wide); color: var(--site-text-color); margin-bottom: var(--site-spacing-sm); }
.pupitre-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--site-gutter-2xs); }
.pupitre-col-item { }
.pupitre-col-link { font-size: var(--site-type-small); color: var(--site-fg-muted); transition: color var(--site-duration-fast) var(--site-ease); }
.pupitre-col-link:hover { color: var(--site-secondary); }
.pupitre-bottom { margin-top: var(--site-spacing-xl); text-align: center; }
.pupitre-copy { font-size: var(--site-size-xs); color: var(--site-fg-muted); }

/* ============================================================
   RESPONSIVE — BP-08 (mobile-first overrides)
   ============================================================ */
@media (max-width: 940px) {
  :root {
    --site-type-h1: 30px; --site-fs-h2: 24px; --site-text-h3: 20px; --site-size-h4: 17px;
    --site-type-h5: 15px; --site-fs-h6: 13px; --site-size-body: 16px; --site-type-small: 13px; --site-size-xs: 11px;
  }
  .secteur-inner, .mosaique-inner, .nef-inner, .classeur-inner, .planche-inner,
  .crypte-inner, .coupole-inner, .cloche-inner, .etiquette-inner, .zone-inner,
  .manchette-inner, .pupitre-inner, .media-band-inner { padding-inline: var(--site-inset-mobile); }
  .placard-hold { padding-inline: var(--site-inset-mobile); }

  .chevet-row--top { min-height: 80px; }
  .chevet-row--bottom { display: none; }
  .chevet-toggle { display: flex; }
  .chevet-logo-img, .chevet-logo img { height: 64px; }

  .secteur-inner { grid-template-columns: 1fr; gap: var(--site-gutter-lg); }
  .crypte-inner { grid-template-columns: 1fr; gap: var(--site-gutter-lg); }
  .crypte-visual { min-height: 180px; }
  .crypte-visual-mark { font-size: 64px; }
  .nef-list { grid-template-columns: 1fr; }
  .vestibule-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .vestibule-portrait { margin-inline: auto; }
  .pupitre-grid { grid-template-columns: 1fr; gap: var(--site-gutter-md); text-align: center; }
  .pupitre-col-list { align-items: center; }
  .media-figure-row { grid-template-columns: 1fr; }
  .manchette-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .manchette-btn { text-align: center; }
  .classeur-item { grid-template-columns: 40px 1fr; }
  .classeur-num { font-size: var(--site-size-h4); }
}

@media (min-width: 1200px) {
  .nef-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1199px) and (min-width: 941px) {
  .nef-list { grid-template-columns: repeat(2, 1fr); }
}