/* ============================================================
   Frumzi (frumzi-gr-3) — motif-66.css
   Design system: TYPO-05 · SPACE-07 · CONT-06 · BP-03 · GEO-07 · MOTION-04
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Colours (RANDOM_SPEC .final values) */
  --color-primary: #0b2071;
  --color-accent: #21c5ac;
  --color-accent-pressed: #1ca78f;
  --color-bg: #09133a;
  --color-bg-elevated: #111c52;
  --color-gradient-light: #ffffff;
  --color-gradient-mid: #3569ff;
  --color-text: #ffffff;
  --color-text-muted: #bdbcbc;
  --color-rg-banner: #dc2626;

  /* Fonts (brand local -> Google substitutes: display=Outfit, body=Source Sans 3) */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  /* Typography TYPO-05 (desktop) */
  --fs-h1: 72px; --fs-h2: 44px; --fs-h3: 28px; --fs-h4: 20px; --fs-h5: 16px; --fs-h6: 14px;
  --fs-body: 18px; --fs-small: 15px; --fs-micro: 12px;
  --lh-tight: 1.05; --lh-normal: 1.5; --lh-loose: 1.7;
  --ls-tight: -0.03em; --ls-normal: 0; --ls-wide: 0.05em;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 800;

  /* Spacing SPACE-07 (Fibonacci-like) */
  --space-2xs: 3px; --space-xs: 8px; --space-sm: 13px; --space-md: 21px;
  --space-lg: 34px; --space-xl: 55px; --space-2xl: 89px; --space-3xl: 144px;

  /* Container CONT-06 (site width from spec = 1280px) */
  --container-site: 1280px;
  --container-readable: 720px;
  --container-padding-mobile: 12px;
  --container-padding-tablet: 20px;
  --container-padding-desktop: 32px;

  /* Geometry GEO-07 (dashed editorial) */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-pill: 9999px; --radius-circle: 50%;
  --shadow-sm: none; --shadow-md: 0 6px 20px rgba(0,0,0,0.28); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
  --border-thin: 1px; --border-medium: 2px; --border-thick: 3px;

  /* Motion MOTION-04 (sharp snappy) */
  --dur-fast: 80ms; --dur-base: 120ms; --dur-slow: 180ms;
  --ease-out: cubic-bezier(0.5, 0, 0.5, 1);

  --header-h: 104px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  padding-top: calc(var(--header-h) + 2 * var(--space-md));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { margin: 0; }

/* ---- a11y ---- */
.skip-link {
  position: fixed; left: var(--space-md); top: var(--space-md); z-index: 200;
  background: var(--color-accent); color: var(--color-bg); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md); font-weight: var(--fw-bold); text-decoration: none;
}
.skip-link:not(:focus) { top: -200px !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.site-main { display: block; }

/* ============================================================
   HEADER — HEAD-11 floating pill · NAV-02 · AUTH-LOGIN · STICKY-01
   ============================================================ */
.strip-deep {
  position: fixed; top: var(--space-md); left: 50%; transform: translateX(-50%);
  width: calc(100% - 2 * var(--space-md)); max-width: 1100px; height: var(--header-h);
  z-index: 50; background: rgba(9, 19, 58, 0.85); backdrop-filter: blur(12px);
  border: var(--border-thin) solid rgba(255,255,255,0.10); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.strip-deep-bar {
  display: flex; align-items: center; gap: var(--space-md);
  height: 100%; width: 100%; padding-inline: var(--space-md);
}
.strip-deep-logo { flex-shrink: 0; display: inline-flex; align-items: center; text-decoration: none; }
.strip-deep-logo-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; padding: 6px 10px; border-radius: var(--radius-md);
}
.strip-deep-logo-img { height: 88px; width: auto; display: block; flex-shrink: 0; }
.strip-deep-nav { margin-left: auto; }
.strip-deep-nav-list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.strip-deep-nav-item { position: relative; }
.strip-deep-nav-item--more { position: relative; }
.strip-deep-link {
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small);
  color: var(--color-text); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.strip-deep-link:hover { color: var(--color-accent); }
.strip-deep-link[aria-current='page'] { color: var(--color-accent); }
.strip-deep-more-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  background: transparent; border: 0; cursor: pointer; color: var(--color-text); font: inherit;
  font-size: var(--fs-small); font-weight: var(--fw-medium); padding: 0;
}
.strip-deep-more-chevron { transition: transform var(--dur-fast) var(--ease-out); font-size: 10px; }
.strip-deep-more-toggle[aria-expanded='true'] .strip-deep-more-chevron { transform: rotate(180deg); }
.strip-deep-more-menu {
  position: absolute; top: calc(100% + var(--space-sm)); right: 0; margin: 0;
  padding: var(--space-xs) 0; list-style: none; background: var(--color-bg-elevated);
  border: var(--border-thin) solid rgba(255,255,255,0.10); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); min-width: 200px; z-index: 110;
}
.strip-deep-more-menu[hidden] { display: none; }
.strip-deep-more-link {
  display: block; padding: var(--space-xs) var(--space-md); color: var(--color-text);
  text-decoration: none; white-space: nowrap; font-size: var(--fs-small);
}
.strip-deep-more-link:hover, .strip-deep-more-link:focus { background: rgba(255,255,255,0.06); color: var(--color-accent); }
.strip-deep-auth { flex-shrink: 0; display: flex; align-items: center; }
.strip-deep-auth-btn {
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  height: 40px; padding-inline: var(--space-lg);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: var(--ls-wide); text-decoration: none;
  color: var(--color-text); background: transparent; border: var(--border-thin) solid var(--color-text);
  border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.strip-deep-auth-btn:hover { background: var(--color-text); color: var(--color-bg); }
.strip-deep-toggle {
  display: none; margin-left: auto; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; cursor: pointer;
}
.strip-deep-toggle-bar { display: block; height: 2px; width: 100%; background: var(--color-text); border-radius: 2px; }
.strip-deep-drawer { display: none; }
.strip-deep-drawer-list { list-style: none; margin: 0; padding: var(--space-md); }
.strip-deep-drawer-item { padding-block: var(--space-xs); border-bottom: var(--border-thin) dashed rgba(255,255,255,0.10); }

/* ============================================================
   BREADCRUMBS — BREAD-01
   ============================================================ */
.crown-core { padding-block: var(--space-md); border-bottom: var(--border-thin) dashed rgba(255,255,255,0.10); }
.crown-core-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.crown-core-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.crown-core-item { font-size: var(--fs-small); color: var(--color-text); }
.crown-core-item + .crown-core-item::before { content: '/'; margin-right: var(--space-xs); color: rgba(189,188,188,0.5); }
.crown-core-link { color: var(--color-text-muted); text-decoration: none; }
.crown-core-link:hover { color: var(--color-accent); }

/* ============================================================
   PAGE HEADER — PHEAD-02 compact centered
   ============================================================ */
.fresque-neat { padding-block: var(--space-xl); background: var(--color-bg); }
.fresque-neat-inner {
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  margin-inline: auto; padding-inline: var(--container-padding-desktop);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center;
}
.fresque-neat-eyebrow { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent); }
.fresque-neat-title { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--color-text); max-width: 920px; }
.fresque-neat-divider { width: 60px; height: 2px; background: var(--color-accent); margin-inline: auto; }
.fresque-neat-description { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); max-width: 640px; }
.fresque-neat-meta { font-size: var(--fs-small); color: var(--color-text-muted); }
.fresque-neat-time { color: var(--color-text-muted); }

/* ============================================================
   HERO — HERO-04 slider
   ============================================================ */
.transom-sleek { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.transom-sleek-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.transom-sleek-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(9,19,58,0.94) 0%, rgba(9,19,58,0.72) 55%, rgba(11,32,113,0.45) 100%); }
.transom-sleek-track { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; width: 100%; }
.transom-sleek-slide { width: 100%; }
.transom-sleek-slide[hidden] { display: none; }
.transom-sleek-content {
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  margin-inline: auto; padding-inline: var(--container-padding-desktop);
  display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start;
}
.transom-sleek-title { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--color-text); max-width: 900px; }
.transom-sleek-subtitle { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); max-width: 620px; }
.transom-sleek-btn {
  display: inline-flex; align-items: center; height: 52px; padding-inline: var(--space-xl);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: var(--ls-wide); text-decoration: none;
  color: var(--color-bg); background: var(--color-accent); border: 0; border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.transom-sleek-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.transom-sleek-controls {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: var(--space-lg);
  display: flex; align-items: center; gap: var(--space-md);
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); width: 100%;
  padding-inline: var(--container-padding-desktop); justify-content: flex-start;
}
.transom-sleek-prev, .transom-sleek-next {
  width: 44px; height: 44px; border-radius: var(--radius-circle); cursor: pointer;
  background: rgba(255,255,255,0.10); border: var(--border-thin) solid rgba(255,255,255,0.25);
  color: var(--color-text); font-size: 18px; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.transom-sleek-prev:hover, .transom-sleek-next:hover { background: rgba(255,255,255,0.22); }
.transom-sleek-dots { display: flex; gap: var(--space-xs); }
.transom-sleek-dot { width: 10px; height: 10px; border-radius: var(--radius-circle); border: 0; cursor: pointer; background: rgba(255,255,255,0.30); padding: 0; }
.transom-sleek-dot.is-active { background: var(--color-accent); }

/* ============================================================
   INLINE CTA — INLINE-CTA-03
   ============================================================ */
.porte-crisp { padding-block: var(--space-md); text-align: center; }
.porte-crisp-line { font-size: var(--fs-h6); line-height: var(--lh-normal); }
.porte-crisp-strong { color: var(--color-text); font-weight: var(--fw-bold); }
.porte-crisp-link { color: var(--color-accent); text-decoration: underline; font-weight: var(--fw-bold); }
.porte-crisp-link:hover { color: var(--color-accent-pressed); text-decoration-thickness: 2px; }

/* ============================================================
   PER-PAGE IMAGES — plate-shot
   ============================================================ */
.plate-shot { padding-block: var(--space-md); }
.plate-shot-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.plate-shot-figure { margin: 0; border: var(--border-thin) dashed rgba(255,255,255,0.14); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-elevated); }
.plate-shot-figure--wide { width: 100%; }
.plate-shot-img { width: 100%; height: auto; display: block; }
.plate-shot-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

/* ============================================================
   PROSE — PROSE-05 wide tech documentation
   ============================================================ */
.linteau-sleek { padding-block: var(--space-xl); }
.linteau-sleek-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.linteau-sleek-h2 {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h3);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text);
  margin-block-start: var(--space-lg); margin-block-end: var(--space-md); padding-top: var(--space-sm);
  border-top: var(--border-medium) solid transparent;
}
.linteau-sleek-h2::before { content: ''; display: block; width: 40px; height: 2px; background: var(--color-accent); margin-bottom: var(--space-sm); }
.linteau-sleek-h2:first-child { margin-block-start: 0; }
.linteau-sleek-p { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); margin-block-end: var(--space-md); }
.linteau-sleek-list, .linteau-sleek-olist { margin: 0 0 var(--space-md); padding-left: var(--space-lg); color: var(--color-text-muted); }
.linteau-sleek-li { font-size: var(--fs-body); line-height: var(--lh-normal); margin-block-end: var(--space-xs); }
.linteau-sleek-link { color: var(--color-accent); text-decoration: underline; }
.linteau-sleek-link:hover { color: var(--color-accent-pressed); }

/* ============================================================
   ITEMS GRID — GRID-07 editorial article list
   ============================================================ */
.lozenge-sharp { padding-block: var(--space-xl); }
.lozenge-sharp-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.lozenge-sharp-heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin-bottom: var(--space-lg); }
.lozenge-sharp-item { margin-block-end: var(--space-lg); }
.lozenge-sharp-item-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-text); }
.lozenge-sharp-item-divider { width: 60px; height: 2px; background: var(--color-accent); margin-block: var(--space-sm); }
.lozenge-sharp-item-text { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }

/* ============================================================
   DATA TABLE — TABLE-03 responsive card rows
   ============================================================ */
.ardoise-apex { padding-block: var(--space-md); }
.ardoise-apex-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.ardoise-apex-table { width: 100%; border-collapse: collapse; background: var(--color-bg-elevated); border-radius: var(--radius-md); overflow: hidden; }
.ardoise-apex-table th, .ardoise-apex-table td { padding: var(--space-md); text-align: left; border-bottom: var(--border-thin) dashed rgba(255,255,255,0.12); }
.ardoise-apex-table th { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-text); background: rgba(11,32,113,0.4); }
.ardoise-apex-table td { color: var(--color-text-muted); }

/* ============================================================
   REVIEWS — REV-03 horizontal carousel strip
   ============================================================ */
.cartouche-raw { padding-block: var(--space-xl); }
.cartouche-raw-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.cartouche-raw-heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin-bottom: var(--space-lg); }
.cartouche-raw-rail { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-sm); }
.cartouche-raw-card { flex: 0 0 360px; scroll-snap-align: start; padding: var(--space-lg); background: var(--color-bg-elevated); border: var(--border-thin) dashed rgba(255,255,255,0.14); border-radius: var(--radius-md); min-height: 240px; display: flex; flex-direction: column; gap: var(--space-sm); }
.cartouche-raw-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.cartouche-raw-author { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-text); }
.cartouche-raw-date { font-size: var(--fs-micro); color: var(--color-text-muted); }
.cartouche-raw-rating-label { font-size: var(--fs-small); color: var(--color-accent); font-weight: var(--fw-bold); }
.cartouche-raw-rating-bar { position: relative; width: 60%; height: 4px; background: rgba(189,188,188,0.2); border-radius: var(--radius-pill); }
.cartouche-raw-rating-fill { position: absolute; inset-block: 0; left: 0; background: var(--color-accent); border-radius: var(--radius-pill); }
.cartouche-raw-text { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); }
.cartouche-raw-dots { display: flex; gap: var(--space-xs); margin-top: var(--space-md); }
.cartouche-raw-dot { width: 10px; height: 10px; border-radius: var(--radius-circle); border: 0; cursor: pointer; background: rgba(189,188,188,0.3); padding: 0; }
.cartouche-raw-dot.is-active { background: var(--color-accent); }

/* ============================================================
   FAQ — FAQ-06 anchored linked list
   ============================================================ */
.corniche-deep { padding-block: var(--space-xl); }
.corniche-deep-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.corniche-deep-heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin-bottom: var(--space-lg); }
.corniche-deep-toc { padding: var(--space-lg); background: rgba(11,32,113,0.28); border-radius: var(--radius-md); margin-bottom: var(--space-xl); }
.corniche-deep-toc-list { margin: 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.corniche-deep-toc-link { font-size: var(--fs-body); color: var(--color-text-muted); text-decoration: none; }
.corniche-deep-toc-link:hover { color: var(--color-text); text-decoration: underline; }
.corniche-deep-list { margin: 0; }
.corniche-deep-q { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--color-text); margin-block-start: var(--space-lg); padding-top: var(--space-md); border-top: var(--border-thin) dashed rgba(255,255,255,0.12); scroll-margin-top: calc(var(--header-h) + 2 * var(--space-md)); }
.corniche-deep-a { margin: 0; }
.corniche-deep-a-text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); margin-top: var(--space-xs); }

/* ============================================================
   CTA BLOCK — CTA-07 vertical card with decorative number
   ============================================================ */
.armoire-cool { padding-block: var(--space-xl); }
.armoire-cool-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.armoire-cool-card { padding: var(--space-xl); background: var(--color-bg-elevated); border: var(--border-medium) dashed var(--color-accent); border-radius: var(--radius-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.armoire-cool-deco { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: 1; color: var(--color-accent); }
.armoire-cool-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.armoire-cool-text { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); max-width: 640px; }
.armoire-cool-btn { display: inline-flex; align-items: center; height: 52px; padding-inline: var(--space-xl); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); text-decoration: none; color: var(--color-bg); background: var(--color-accent); border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.armoire-cool-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

/* ============================================================
   AUTHOR BYLINE — BYLINE-06 minimal
   ============================================================ */
.enseigne-raw { padding-block: var(--space-md); }
.enseigne-raw-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); display: flex; align-items: center; gap: var(--space-md); }
.enseigne-raw-text { flex: 1; font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; }
.enseigne-raw-by { text-transform: uppercase; letter-spacing: var(--ls-wide); font-style: normal; font-size: var(--fs-micro); color: var(--color-text-muted); margin-right: var(--space-2xs); }
.enseigne-raw-name { color: var(--color-accent); text-decoration: underline; font-style: normal; font-weight: var(--fw-bold); }
.enseigne-raw-name:hover { text-decoration-thickness: 2px; }
.enseigne-raw-divider { margin-inline: var(--space-2xs); }
.enseigne-raw-role { }
.enseigne-raw-date { margin-left: var(--space-xs); color: var(--color-text-muted); }
.enseigne-raw-portrait { width: 40px; height: 40px; border-radius: var(--radius-circle); object-fit: cover; object-position: center 20%; background: var(--color-bg); border: 2px solid var(--color-bg); box-sizing: content-box; flex-shrink: 0; }

/* ============================================================
   AUTHOR CARD — AUTH-05 (/about/) + articles list
   ============================================================ */
.gallery-flux { padding-block: var(--space-xl); }
.gallery-flux-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.gallery-flux-card { display: flex; gap: var(--space-lg); align-items: flex-start; padding: var(--space-lg); background: var(--color-bg-elevated); border: var(--border-thin) dashed rgba(255,255,255,0.14); border-radius: var(--radius-lg); }
.gallery-flux-portrait { width: 140px; height: 140px; border-radius: var(--radius-lg); object-fit: cover; flex-shrink: 0; }
.gallery-flux-body { display: flex; flex-direction: column; gap: var(--space-xs); }
.gallery-flux-job-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent); font-weight: var(--fw-bold); }
.gallery-flux-bio { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); }
.gallery-flux-exp-heading { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--color-text); margin-top: var(--space-sm); }
.gallery-flux-exp-list { margin: 0; padding-left: var(--space-lg); color: var(--color-text-muted); }
.gallery-flux-exp-item { font-size: var(--fs-small); margin-block-end: var(--space-2xs); }
.gallery-flux-articles { padding-block: var(--space-lg); }
.gallery-flux-articles-heading { font-size: var(--fs-h4); font-family: var(--font-display); font-weight: var(--fw-bold); margin-bottom: var(--space-md); }
.gallery-flux-articles-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
.gallery-flux-articles-item { font-size: var(--fs-body); line-height: var(--lh-normal); }
.gallery-flux-articles-item a { color: var(--color-accent); text-decoration: underline; }
.gallery-flux-articles-item a:hover { color: var(--color-accent-pressed); }

/* ============================================================
   LEGAL — LEGAL-04 bordered article box
   ============================================================ */
.joist-edge { padding-block: var(--space-xl); }
.joist-edge-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.joist-edge-box { position: relative; padding: var(--space-xl); background: var(--color-bg-elevated); border: var(--border-thin) dashed rgba(255,255,255,0.14); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.joist-edge-updated { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.joist-edge-intro { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.joist-edge-block { margin-block-end: var(--space-lg); }
.joist-edge-h2 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-text); margin-block-start: var(--space-lg); margin-block-end: var(--space-sm); }
.joist-edge-block:first-of-type .joist-edge-h2 { margin-block-start: 0; }
.joist-edge-p { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); margin-block-end: var(--space-sm); }
.joist-edge-list { margin: 0 0 var(--space-sm); padding-left: var(--space-lg); color: var(--color-text-muted); }
.joist-edge-li { font-size: var(--fs-body); line-height: var(--lh-normal); margin-block-end: var(--space-2xs); }
.joist-edge-disclaimer { font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; border-top: var(--border-thin) dashed rgba(255,255,255,0.12); padding-top: var(--space-md); }

/* ============================================================
   CONTACT FORM — FORM-02 two-column
   ============================================================ */
.chevet-opus { padding-block: var(--space-xl); }
.chevet-opus-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.chevet-opus-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-xl); }
.chevet-opus-aside { padding: var(--space-lg); background: rgba(11,32,113,0.28); border-radius: var(--radius-md); }
.chevet-opus-aside-title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--space-sm); }
.chevet-opus-intro { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.chevet-opus-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.chevet-opus-contact { display: flex; flex-direction: column; gap: var(--space-2xs); }
.chevet-opus-contact-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent); }
.chevet-opus-contact-link { color: var(--color-text); text-decoration: underline; }
.chevet-opus-contact-link:hover { color: var(--color-accent); }
.chevet-opus-contact-value { color: var(--color-text-muted); font-size: var(--fs-small); }
.chevet-opus-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.chevet-opus-label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text); }
.chevet-opus-input { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text); background: var(--color-bg-elevated); border: var(--border-thin) solid rgba(255,255,255,0.14); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.chevet-opus-input:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.chevet-opus-textarea { resize: vertical; min-height: 120px; }
.chevet-opus-submit { margin-top: var(--space-sm); align-self: flex-start; height: 48px; padding-inline: var(--space-xl); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-bg); background: var(--color-accent); border: 0; border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.chevet-opus-submit:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.chevet-opus-success { margin-top: var(--space-md); padding: var(--space-md); background: rgba(34,197,94,0.12); border: var(--border-thin) solid rgba(34,197,94,0.35); border-radius: var(--radius-md); color: var(--color-text); }
.chevet-opus-form.is-hidden { display: none; }

/* ============================================================
   ERROR — ERR-04 full-bleed atmospheric
   ============================================================ */
.ledge-modern { position: relative; min-height: calc(100vh - var(--header-h) - 2 * var(--space-md)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ledge-modern-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ledge-modern-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,19,58,0.6), rgba(9,19,58,0.9)); }
.ledge-modern-content { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding-inline: var(--container-padding-desktop); }
.ledge-modern-code { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); color: var(--color-accent); line-height: 1; }
.ledge-modern-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-text); }
.ledge-modern-text { font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); max-width: 560px; }
.ledge-modern-btn { display: inline-flex; align-items: center; height: 52px; padding-inline: var(--space-xl); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); text-decoration: none; color: var(--color-bg); background: var(--color-accent); border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ledge-modern-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

/* ============================================================
   FOOTER — FOOT-02 two-row
   ============================================================ */
.terrasse-dark { padding-block: var(--space-xl); background: var(--color-bg); border-top: var(--border-thin) solid rgba(255,255,255,0.10); }
.terrasse-dark-inner { max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); }
.terrasse-dark-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.terrasse-dark-row--top { padding-bottom: var(--space-md); }
.terrasse-dark-row--bottom { border-top: var(--border-thin) solid rgba(255,255,255,0.08); padding-top: var(--space-md); }
.terrasse-dark-logo { flex-shrink: 0; display: inline-flex; }
.terrasse-dark-logo-pill { display: inline-flex; align-items: center; background: #ffffff; padding: 5px 9px; border-radius: var(--radius-md); }
.terrasse-dark-logo-img { height: 48px; width: auto; display: block; }
.terrasse-dark-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.terrasse-dark-nav-item { }
.terrasse-dark-link { color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-small); }
.terrasse-dark-link:hover { color: var(--color-text); }
.terrasse-dark-copy { font-size: var(--fs-micro); color: var(--color-text-muted); }
.terrasse-dark-legal-list { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.terrasse-dark-legal-link { color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-micro); }
.terrasse-dark-legal-link:hover { color: var(--color-text); }
.terrasse-dark-note { margin-top: var(--space-md); font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--color-text-muted); }

/* ============================================================
   COOKIE BANNER — COOK-06
   ============================================================ */
.filigree-flux { position: fixed; inset-block-end: var(--space-md); inset-inline: var(--space-md); max-width: 720px; margin-inline: auto; z-index: 90; background: var(--color-bg-elevated); border: var(--border-thin) solid rgba(255,255,255,0.12); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.filigree-flux[hidden] { display: none; }
.filigree-flux.is-visible { display: block; }
.filigree-flux-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md); }
.filigree-flux-message { flex: 1 1 280px; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); }
.filigree-flux-actions { display: flex; align-items: center; gap: var(--space-sm); }
.filigree-flux-button { height: 36px; padding-inline: var(--space-md); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); border-radius: var(--radius-md); cursor: pointer; border: 0; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.filigree-flux-button--accept { background: var(--color-accent); color: var(--color-bg); }
.filigree-flux-button--accept:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.filigree-flux-button--decline { background: transparent; color: var(--color-text); border: var(--border-thin) solid rgba(255,255,255,0.20); }
.filigree-flux-button--decline:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }
.filigree-flux-prefs { font-size: var(--fs-small); color: var(--color-text-muted); text-decoration: underline; }
.filigree-flux-prefs:hover { color: var(--color-accent); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================
   Responsive — desktop-first (BP-03: 900 / 600)
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 22px; --fs-h4: 18px; --fs-h5: 14px; --fs-h6: 12px;
    --fs-body: 17px; --fs-small: 14px; --fs-micro: 11px;
    --header-h: 78px;
  }
  .strip-deep { width: 94%; height: var(--header-h); }
  .strip-deep-logo-img { height: 56px; }
  .strip-deep-nav, .strip-deep-auth { display: none; }
  .strip-deep-toggle { display: flex; }
  .strip-deep.is-open .strip-deep-drawer { display: block; }
  .strip-deep-drawer { position: absolute; top: calc(100% + var(--space-sm)); left: 0; right: 0; background: var(--color-bg-elevated); border: var(--border-thin) solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .transom-sleek { min-height: 420px; }
  .transom-sleek-controls { padding-inline: var(--container-padding-mobile); }
  .chevet-opus-grid { grid-template-columns: 1fr; }
  .plate-shot-row { grid-template-columns: 1fr; }
  .gallery-flux-card { flex-direction: column; }
  .cartouche-raw-card { flex-basis: 300px; }
  .crown-core-inner, .fresque-neat-inner, .transom-sleek-content, .linteau-sleek-inner, .lozenge-sharp-inner, .ardoise-apex-inner, .cartouche-raw-inner,
  .corniche-deep-inner, .armoire-cool-inner, .enseigne-raw-inner, .gallery-flux-inner, .joist-edge-inner, .chevet-opus-inner, .terrasse-dark-inner, .plate-shot-inner {
    padding-inline: var(--container-padding-tablet);
  }
  .terrasse-dark-row { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}

@media (max-width: 600px) {
  .crown-core-inner, .fresque-neat-inner, .transom-sleek-content, .linteau-sleek-inner, .lozenge-sharp-inner, .ardoise-apex-inner, .cartouche-raw-inner,
  .corniche-deep-inner, .armoire-cool-inner, .enseigne-raw-inner, .gallery-flux-inner, .joist-edge-inner, .chevet-opus-inner, .terrasse-dark-inner, .plate-shot-inner {
    padding-inline: var(--container-padding-mobile);
  }
  .enseigne-raw-inner { flex-direction: column-reverse; align-items: flex-start; }
  .armoire-cool-card, .joist-edge-box { padding: var(--space-lg); }
  .filigree-flux-body { flex-direction: column; align-items: stretch; }
  .filigree-flux-actions { flex-wrap: wrap; }
  .filigree-flux-button { flex: 1 1 auto; }
}

/* ---- structural nav/form wrappers (orphan-class fix) ---- */
.terrasse-dark-nav { display: block; }
.terrasse-dark-legal-nav { display: block; }
.chevet-opus-main { display: block; }

.plate-shot-figure img{max-width:100%;max-height:56vh;width:auto;height:auto;margin-inline:auto;display:block}

@media (max-width: 768px) {
  .filigree-flux-prefs { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 768px) {
  .filigree-flux,
  .filigree-flux-body { padding: 12px; gap: 10px; }
}

@media (max-width: 768px) {
  .filigree-flux, .filigree-flux-body { font-size: 0.82rem; line-height: 1.35; }
}

@media (max-width: 768px) {
  .filigree-flux-message { font-size: 0.78rem; line-height: 1.32; }
}

@media (max-width: 768px) {
  .filigree-flux-message { flex: 0 0 auto; }
}


@media (max-width: 768px) {
  .transom-sleek-controls { bottom: 8px; }
  .transom-sleek-btn { margin-bottom: 64px; }
}