/* ============================================================
   AUX3D — public site styles
   Tokens ported from the Aux3D Design System (colors_and_type.css);
   sections implement the Vitrine Aux3D landing design.
   ============================================================ */

/* ── Fonts (self-hosted: no third-party requests on the public surface) ──
   Alphakind — display font by Khurasan; "100% free for personal use &
   commercial use" per the distributed More Info.txt.
   Nunito — SIL Open Font License 1.1; variable-weight latin subset. */
@font-face {
  font-family: 'Alphakind';
  src: url('fonts/Alphakind.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   AUX3D DESIGN SYSTEM — Colors & Typography Tokens
   ============================================================ */

:root {
  /* ── Base Color Palette ─────────────────────────────────── */
  --color-red:          #8B2E2E;   /* primary brand red, mug body */
  --color-red-dark:     #5A1212;   /* deep red, shadows, strong text */
  --color-red-bg:       #C45050;   /* warm rose, social/promo backgrounds */
  --color-red-light:    #E8807A;   /* lighter red tint */

  --color-amber:        #D4922A;   /* primary gold/amber, logo text */
  --color-amber-light:  #F5C518;   /* bright gold, highlights, accents */
  --color-amber-dark:   #9B6A10;   /* deep amber, text on light */

  --color-orange:       #F07820;   /* promotional energy, CTA backgrounds */
  --color-orange-dark:  #C05A08;   /* darker orange for hover states */

  --color-cream:        #EDE0C8;   /* foam, warm off-white, light surfaces */
  --color-cream-dark:   #D4C4A0;   /* slightly deeper cream for borders */

  --color-slate:        #4F5D6D;   /* mug rim grey, neutral accents — darkened from
                                      #6B7A8D so 12px muted text clears WCAG AA (4.5:1)
                                      on the cream and white surfaces it sits on */
  --color-slate-light:  #9AAABB;   /* light slate */
  --color-slate-dark:   #3E4D5C;   /* dark slate */

  --color-dark:         #2A1008;   /* near-black, text, outlines */
  --color-white:        #FFFFFF;

  /* Tavern additions used by the Vitrine page design */
  --color-paper:        #FFF8E8;   /* input/progress surfaces */
  --color-error:        #E57373;   /* "complet" / closed states */

  /* ── Semantic Colors ────────────────────────────────────── */
  --color-bg:           var(--color-cream);      /* default page background */
  --color-bg-dark:      var(--color-dark);       /* dark surface */
  --color-bg-brand:     var(--color-red);        /* brand-colored surface */
  --color-bg-promo:     var(--color-orange);     /* promotional surface */

  --color-text:         var(--color-dark);       /* primary text */
  --color-text-muted:   var(--color-slate);      /* secondary/muted text */
  --color-text-on-dark: var(--color-cream);      /* text on dark backgrounds */
  --color-text-on-brand:var(--color-cream);      /* text on red/brand bg */

  --color-primary:      var(--color-red);        /* primary action color */
  --color-primary-hover:var(--color-red-dark);
  --color-accent:       var(--color-amber);      /* accent/highlight */
  --color-accent-bright:var(--color-amber-light);

  --color-border:       var(--color-dark);       /* default border */
  --color-border-light: var(--color-cream-dark); /* subtle border */

  /* ── Typography ─────────────────────────────────────────── */
  --font-display:  'Alphakind', 'Impact', sans-serif;
  --font-body:     'Nunito', 'Arial Rounded MT Bold', sans-serif;
  --font-mono:     'Courier New', monospace;

  /* Scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.12em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows (comic-book offset style) ───────────────────── */
  --shadow-sm:   3px 3px 0px var(--color-dark);
  --shadow-md:   4px 4px 0px var(--color-dark);
  --shadow-lg:   6px 6px 0px var(--color-dark);
  --shadow-red:  4px 4px 0px var(--color-red-dark);
  --shadow-amber:4px 4px 0px var(--color-amber-dark);
  --shadow-glow: 0 0 16px oklch(0.7 0.18 60 / 0.5); /* warm amber glow */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   80ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   300ms ease;
}

/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Always show the vertical scrollbar so the centered header can't slide left/right between short
   pages (no scrollbar) and tall ones (scrollbar present). scrollbar-gutter: stable is the modern
   way, but it does not reserve space alongside the custom ::-webkit-scrollbar in Chromium here
   (verified), so force the scrollbar instead. */
html { scroll-behavior: smooth; overflow-y: scroll; }

html, body { min-height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

img { max-width: 100%; }

a { text-decoration: none; color: inherit; }

button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-dark); }
::-webkit-scrollbar-thumb { background: var(--color-red); border-radius: var(--radius-sm); }

:focus-visible {
  outline: 3px solid var(--color-amber);
  outline-offset: 2px;
}

.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fade-up 0.4s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none; }
  /* transition: none (not a 0.01ms duration) — a duration alone creates an
     "all"-property transition on every element, which freezes computed values
     mid-retarget in throttled/hidden tabs. */
  * { transition: none !important; }
}

/* ── Semantic element styles (from the design system sheet) ── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-cream-dark);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Primitives — buttons, badge & panel
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn-primary { background: var(--color-red);      color: var(--color-cream); box-shadow: var(--shadow-md); }
.btn-amber   { background: var(--color-amber);    color: var(--color-dark);  box-shadow: var(--shadow-md); }

/* Every button lifts, ghosts included: fill is the hierarchy signal, and a secondary action that
   neither casts a shadow nor moves reads as disabled next to one that does. */
.btn-primary:hover, .btn-amber:hover, .btn-ghost:hover {
  box-shadow: var(--shadow-lg);
  transform: translate(-1px, -1px);
}

.btn-primary:active, .btn-amber:active, .btn-ghost:active {
  box-shadow: 2px 2px 0 var(--color-dark);
  transform: translate(2px, 2px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-dark);
  box-shadow: var(--shadow-md);
}

.btn-ghost:hover { background: rgba(42, 16, 8, 0.06); }

/* Ghost for dark surfaces (hero): the base ghost's dark text/border vanish on red. */
.btn-ghost--light {
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.btn-ghost--light:hover { background: rgba(237, 224, 200, 0.12); }

.btn-lg { font-size: 19px; padding: 14px 32px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-amber);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 14px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-extrabold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-dark);
}

/* The site's one card recipe — cream face, heavy outline, offset shadow. Named three ways for
   the three surfaces that carry it; keep them on one rule so they can never drift apart. */
.panel,
.contact-form-panel,
.auth-card {
  background: var(--color-cream);
  border: 3px solid var(--color-dark);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) 28px;
}

/* Shared section title (cream sections) + light variant (dark sections) */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-dark);
  line-height: var(--leading-tight);
}

.section-title--light { color: var(--color-amber); }

.section-sub {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.section-sub--light { color: var(--color-slate-light); }

/* ============================================================
   Forms — shared by the contact form and every account page.
   Scoped to .form-field rather than to the pages that host it: the
   two surfaces had drifted into one comma-selector nobody could read.
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  /* 16px exactly: iOS Safari zooms the whole page when a focused field is any smaller. */
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-paper);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
  box-shadow: inset 2px 2px 0 rgba(42, 16, 8, 0.08);
  padding: 10px 12px;
}

.form-field textarea { resize: vertical; min-height: 160px; }

/* Blazor stamps .invalid on fields that failed validation. */
.form-field input.invalid,
.form-field textarea.invalid { border-color: var(--color-red); }

.validation-message {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-red);
}

/* The submit button sits tighter to the last field than the field-to-field rhythm. */
form .btn { margin-top: var(--space-2); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-4);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.form-check input { accent-color: var(--color-red); width: 18px; height: 18px; }

/* Groups a long form into short steps (the register page's eight fields). */
.form-group-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-red-dark);
  margin: var(--space-6) 0 var(--space-4);
}

.form-group-title:first-of-type { margin-top: 0; }

.form-banner {
  border: 2px solid var(--color-dark);
  /* A fat stripe in the opposite brand colour — the banner has to register before it is read. */
  border-left-width: 10px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
}

.form-banner--success {
  background: var(--color-amber);
  color: var(--color-dark);
  border-left-color: var(--color-red);
}

.form-banner--error {
  background: var(--color-red);
  color: var(--color-cream);
  border-left-color: var(--color-amber);
}

.form-banner--success a { color: var(--color-red-dark); text-decoration: underline; }
.form-banner--error a { color: var(--color-amber-light); font-weight: var(--weight-extrabold); }

/* Data-collection notice under the register & contact forms. */
.privacy-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
}

.privacy-note a { color: var(--color-red); font-weight: var(--weight-bold); text-decoration: underline; }
.privacy-note a:hover { color: var(--color-red-dark); }

/* Honeypot: parked far off-screen rather than display:none — some bots skip
   fields they can tell are invisible. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-cream);
  border-bottom: 3px solid var(--color-dark);
  box-shadow: 0 2px 0 var(--color-dark);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: auto;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-dark);
  border: 2px solid var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.brand-mark img { height: 38px; width: 38px; object-fit: contain; }

.brand .wordmark {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-red);
  -webkit-text-stroke: 1.5px var(--color-dark);
  line-height: 1;
}

.site-nav { display: flex; gap: var(--space-1); align-items: center; }

.site-nav a {
  display: inline-block;
  background: transparent;
  color: var(--color-dark);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-weight: var(--weight-bold);
  font-size: 14px;
  transition: background var(--transition-base), color var(--transition-base);
}

.site-nav a:hover { background: rgba(42, 16, 8, 0.08); }

.site-nav a.active {
  background: var(--color-red);
  color: var(--color-cream);
  border-color: var(--color-dark);
  box-shadow: var(--shadow-sm);
}

/* ── Mobile nav drawer (<details>, shown ≤768px — see the Responsive section) ── */

.nav-drawer { display: none; margin-left: auto; }

.nav-drawer > summary {
  list-style: none;          /* Firefox */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.nav-drawer > summary::-webkit-details-marker { display: none; }
.nav-drawer > summary:hover { background: rgba(42, 16, 8, 0.08); }

/* Three bars from one element: the middle is the box, the outer two its pseudo-elements. */
.burger, .burger::before, .burger::after {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-dark);
}

.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -8px; }
.burger::after { top: 8px; }

.nav-drawer[open] > summary .burger { background: var(--color-red); }
.nav-drawer[open] > summary .burger::before { top: -7px; }
.nav-drawer[open] > summary .burger::after { top: 7px; }

.site-nav-panel {
  position: absolute;        /* the sticky .site-header is the containing block */
  top: 100%;
  left: 0;
  right: 0;
  z-index: 199;              /* under the header itself (200) */
  display: flex;
  flex-direction: column;
  background: var(--color-cream);
  border-bottom: 3px solid var(--color-dark);
  box-shadow: 0 6px 0 rgba(42, 16, 8, 0.15);
  padding: var(--space-2) var(--space-4) var(--space-4);
}

.site-nav-panel a, .site-nav-panel .nav-linkish {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;          /* comfortable touch target; the inline pills were 36px */
  padding: 0 var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-dark);
  text-align: left;
}

.site-nav-panel .nav-form { display: block; width: 100%; }

.site-nav-panel a:hover, .site-nav-panel .nav-linkish:hover { background: rgba(42, 16, 8, 0.08); }

.site-nav-panel a.active {
  background: var(--color-red);
  color: var(--color-cream);
  border-color: var(--color-dark);
}

/* ── Skip link (WCAG 2.4.1) — off-screen until it takes focus ── */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 300;
  padding: var(--space-3) var(--space-5);
  background: var(--color-red);
  color: var(--color-cream);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
}

.skip-link:focus { top: var(--space-3); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  background: var(--color-bg-brand);
  border-bottom: 3px solid var(--color-dark);
  /* 80px above a 36px badge was more than twice the weight of the element it introduced, so it
     read as a void rather than as breathing room. Mobile already sits at 56px. */
  padding: var(--space-16) var(--space-6) 72px;
  position: relative;
  overflow: hidden;
}

.hero-watermark {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 440px;
  height: 440px;
  object-fit: contain;
  opacity: 0.10;
  pointer-events: none;
}

.hero-chevron {
  position: absolute;
  left: -60px;
  bottom: 20px;
  font-family: var(--font-display);
  font-size: 220px;
  color: var(--color-red-dark);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hero-inner { max-width: 1280px; margin-inline: auto; position: relative; z-index: 1; }

.hero-content { max-width: 680px; }

.hero .badge { margin-bottom: 22px; }

.hero h1 {
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1.0;
  color: var(--color-cream);
  letter-spacing: 0.04em;
  -webkit-text-stroke: 2px var(--color-dark);
  margin-bottom: 22px;
}

.hero-lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-cream);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 560px; /* 500px wrapped the lead onto three lines with a two-word orphan */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  /* Phone widths still left "société." alone on a third line. Progressive enhancement: browsers
     without it wrap exactly as before, so nothing depends on support. */
  text-wrap: pretty;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Reassurance line under the buttons: supporting weight, never competing with the lead above. */
.hero-reassure {
  margin-top: 18px;
  max-width: 540px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  text-wrap: pretty;
}

/* ============================================================
   Stats strip
   ============================================================ */

/* Cream, not amber: hero red, this strip and the promo orange are neighbouring hot hues, and
   stacked with only a 3px rule between them the top of the page read as one continuous block.
   A light band here also lets amber go back to being an accent (buttons, coin, titles on dark). */
.stats {
  background: var(--color-cream);
  border-bottom: 3px solid var(--color-dark);
}

.stats ul {
  list-style: none;
  max-width: 1280px;
  margin-inline: auto;
  padding: 18px var(--space-6);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.stats li {
  text-align: center;
  padding: 0 var(--space-8);
  border-right: 2px solid rgba(42, 16, 8, 0.25);
}

.stats li:last-child { border-right: none; }

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  color: var(--color-dark);
  letter-spacing: 0.04em;
  line-height: var(--leading-tight);
}

.stat-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  color: var(--color-red-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* The figure and its label are one target, so the tap area is the whole stat, not a word of it. */
.stat-link { display: block; text-decoration: none; }

.stat-link:hover .stat-value { color: var(--color-amber-dark); }

/* Sized to the digits' cap height rather than the em box: at 0.8em the star stood taller than
   the number it qualifies and read as the headline. */
.stat-star { width: 0.72em; height: 0.72em; fill: var(--color-amber-dark); vertical-align: -0.04em; }

/* ============================================================
   Menu promo band
   ============================================================ */

.menu-promo {
  background: var(--color-bg-promo);
  border-top: 3px solid var(--color-dark);
  border-bottom: 3px solid var(--color-dark);
  padding: 56px var(--space-6);
  position: relative;
  overflow: hidden;
}

.menu-promo-chevrons {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 280px;
  color: var(--color-dark);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.menu-promo-inner { max-width: 1280px; margin-inline: auto; position: relative; z-index: 1; }

.menu-promo-content { max-width: 560px; }

.menu-promo h2 {
  font-size: clamp(32px, 6vw, 48px);
  color: var(--color-dark);
  -webkit-text-stroke: 1.5px var(--color-dark);
  letter-spacing: 0.04em;
  line-height: 1.0;
  margin-bottom: 14px;
}

.menu-promo p {
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

/* ============================================================
   Marché teaser band (landing) — what écus buy, read from the
   real catalog. Cream between the orange promo and the dark
   social band, which otherwise meet edge to edge.
   ============================================================ */

.marche-band {
  background: var(--color-cream);
  border-bottom: 3px solid var(--color-dark);
  padding: var(--space-16) var(--space-6);
}

.marche-band-inner { max-width: 1280px; margin-inline: auto; text-align: center; }

.marche-band .section-header { margin-bottom: var(--space-8); }

.marche-band .section-sub {
  font-size: 17px;
  color: var(--color-text);
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.6;
}

.marche-shelf-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-red-dark);
  margin-bottom: var(--space-4);
}

/* Centred wrap rather than a grid: the catalog can hold exactly one item on launch day, and a
   three-column grid would pin that card left behind two empty tracks. */
.marche-shelf {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.marche-shelf-item {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-paper);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5) var(--space-4);
}

.marche-shelf-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* auto pushes the price to the card's floor, so prices line up across cards whose names and
   blurbs run to different lengths. */
.marche-shelf-price {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-amber-dark);
  font-variant-numeric: tabular-nums;
}

.marche-shelf-more {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.marche-band-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Social band (soirées & événements)
   ============================================================ */

.social-band {
  background: var(--color-bg-dark);
  border-bottom: 3px solid var(--color-amber);
  padding: var(--space-16) var(--space-6);
}

.social-band-inner { max-width: 1280px; margin-inline: auto; }

.social-band .section-header { margin-bottom: var(--space-8); }

.social-cards {
  display: grid;
  /* auto-fit, not auto-fill: with only two cards, empty ghost tracks would pin the
     pair left and leave a dead third column at desktop widths. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.social-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-dark);
  border: 2px solid var(--color-amber);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-amber);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.social-card:hover {
  box-shadow: 6px 6px 0 var(--color-amber-dark);
  transform: translate(-2px, -2px);
}

.social-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-amber);
  line-height: var(--leading-tight);
}

.social-card p {
  font-size: 13px;
  color: var(--color-slate-light);
  line-height: 1.55;
}

.social-card-cta {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  color: var(--color-amber-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--color-bg-dark);
  border-top: 3px solid var(--color-amber);
  padding: var(--space-12) var(--space-6) 28px;
}

.site-footer .footer-inner { max-width: 1280px; margin-inline: auto; }

.footer-columns {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.footer-brand { flex: 1 1 220px; }

.footer-brand .brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 14px;
}

.footer-brand img { height: 52px; width: 52px; object-fit: contain; }

.footer-brand .wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber);
  -webkit-text-stroke: 1px var(--color-amber-dark);
  line-height: 1;
}

.footer-brand p {
  font-size: 13px;
  color: var(--color-slate-light);
  line-height: 1.65;
  max-width: 240px;
}

.footer-col { flex: 0 1 190px; }

.footer-col--nav { flex-basis: 140px; }

.footer-heading {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}

.footer-col--nav a {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-cream);
  /* padding instead of margin: keeps the visual pitch while giving the 13px text a
     >=24px hit area (WCAG 2.2 target size). Same idea on the other footer/aside links. */
  padding-block: 4px;
  margin-bottom: 0;
  transition: color var(--transition-base);
}

.footer-col--nav a:hover { color: var(--color-amber); }

.footer-contact address a {
  display: inline-block;
  padding-block: 4px;
}

.footer-hours { scroll-margin-top: 90px; }

.footer-hours .hours-open {
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--color-cream);
  margin-bottom: 4px;
}

.footer-hours .hours-time { font-size: 13px; color: var(--color-slate-light); }

.footer-contact address {
  font-style: normal;
  font-size: 13px;
  color: var(--color-cream);
  line-height: 1.8;
}

.footer-contact a { color: var(--color-amber); font-weight: var(--weight-bold); }

.footer-contact a:hover { color: var(--color-amber-light); }

.footer-bottom {
  border-top: 1px solid var(--color-slate-dark);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* slate-light, not slate: this line sits on the dark footer, where the (darkened)
   slate fails contrast the other way around. */
.footer-bottom span { font-size: var(--text-xs); color: var(--color-slate-light); }

/* ============================================================
   Error page
   ============================================================ */

.error-panel {
  max-width: 560px;
  margin: var(--space-16) auto;
  padding: 0 var(--space-6);
  text-align: center;
}

.error-panel .panel {
  background: var(--color-cream);
  border: 3px solid var(--color-dark);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) 28px;
}

.error-panel h1 {
  font-size: var(--text-5xl);
  color: var(--color-red);
  margin-bottom: var(--space-3);
}

.error-panel .error-code {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--color-amber);
  -webkit-text-stroke: 2px var(--color-dark);
  margin-bottom: var(--space-2);
}

.error-panel p { margin-bottom: var(--space-3); }

.error-panel .error-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* ============================================================
   Page head (shared by menu & contact)
   ============================================================ */

.page-head {
  background: var(--color-cream);
  border-bottom: 3px solid var(--color-dark);
  padding: var(--space-12) var(--space-6) var(--space-10);
}

.page-head-inner { max-width: 1280px; margin-inline: auto; }

/* Anchor targets must clear the 68px sticky header, or a jump hides the card's own title. */
.page-head, .menu-card { scroll-margin-top: 76px; }

.menu-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.menu-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
}

.menu-toc a:hover { background: var(--color-amber); }

/* ============================================================
   Menu page
   ============================================================ */

.menu-section {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-5);
}

/* Before the catalog has anything published — a new deployment, or a comptoir outage on a
   cold start. Reads as an invitation rather than an error. */
.menu-empty {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* At three-column widths a 3n+1 card count strands the last card bottom-left with an
   empty two-thirds row; centering the orphan balances the tail. Narrower layouts
   (1-2 columns) never look stranded, so the rule stays inside the media query. */
@media (min-width: 1240px) {
  .menu-grid > .menu-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

.menu-card {
  display: flex;
  flex-direction: column;
  background: #fff; /* the design's menu cards are white, not paper/cream */
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* clips the header band to the rounded corners */
}

.menu-card-head {
  padding: 14px var(--space-5) 12px;
  border-bottom: 2px solid var(--color-dark);
}

.menu-card-head h2,
.menu-card-head .menu-card-note { color: inherit; }

.menu-card-head h2 {
  font-size: var(--text-2xl);
  letter-spacing: 0.04em;
  line-height: var(--leading-tight);
}

.menu-card-note {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  margin-top: 2px;
  opacity: 0.85;
}

/* Accent bands — light backgrounds carry dark text, dark backgrounds cream. */
.menu-card-head--amber   { background: var(--color-amber);      color: var(--color-dark); }
.menu-card-head--orange  { background: var(--color-orange);     color: var(--color-dark); }
.menu-card-head--red     { background: var(--color-red);        color: var(--color-cream); }
.menu-card-head--darkred { background: var(--color-red-dark);   color: var(--color-cream); }
.menu-card-head--slate   { background: var(--color-slate-dark); color: var(--color-cream); }

.menu-items {
  list-style: none;
  padding: var(--space-2) var(--space-5) var(--space-4);
}

.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-cream-dark);
}

.menu-row:last-child { border-bottom: none; }

.menu-row-text { display: flex; flex-direction: column; gap: 2px; }

.menu-row-name { font-size: var(--text-base); font-weight: var(--weight-extrabold); }

/* 13px, not the 12px --text-xs: this is the only prose on the page a customer actually reads. */
.menu-row-desc { font-size: 13px; line-height: var(--leading-snug); color: var(--color-slate); }

/* Every line of the carte is this shape, sized drinks included: a drink sold in several sizes
   prints one row per size rather than a tariff of columns beside the name. So there is one row
   style and no arithmetic keeping the amounts in line — they align because they are all the last
   item of an identical row. The columns-beside-the-name treatment is what this replaced: it never
   quite lined up with the single-price rows around it, since a centred amount inside a fixed-pitch
   cell sits ~10px short of one flushed to the row's edge. */
.menu-price {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-red);
  white-space: nowrap;
}

.menu-card-back {
  margin-top: auto;               /* pinned to the card's bottom whatever its item count */
  align-self: flex-end;
  padding: var(--space-2) var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.menu-card-back:hover { color: var(--color-red); }

.menu-info {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-8);
  background: var(--color-red);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-8);
}

.menu-info h2 {
  color: var(--color-cream);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.menu-info p {
  position: relative;
  z-index: 1;
  color: var(--color-cream);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}

.menu-info p + p { margin-top: var(--space-3); }

.menu-info-chevrons {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 160px;
  color: var(--color-dark);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Contact page
   ============================================================ */

.contact-section {
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
}

.contact-info {
  background: var(--color-dark);
  border: 2px solid var(--color-amber);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-amber);
  padding: var(--space-6);
}

.contact-info h2 {
  color: var(--color-amber);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.contact-info-block { margin-bottom: var(--space-4); }

.contact-info-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-amber-light);
  margin-bottom: 2px;
}

.contact-info-block p { color: var(--color-cream); font-size: 14px; line-height: 1.6; }

.contact-info-block a {
  color: var(--color-amber);
  font-weight: var(--weight-bold);
  display: inline-block;
  padding-block: 4px; /* >=24px hit area, see footer links */
}

.contact-info-block a:hover { color: var(--color-amber-light); }

.contact-info-note {
  border-top: 1px dashed var(--color-slate-dark);
  padding-top: var(--space-4);
  font-size: 13px;
  color: var(--color-slate-light);
}

/* ============================================================
   Account & auth pages
   ============================================================ */

/* Logout is a form, not a link, but must read as one of the nav items. */
.nav-form { display: inline-flex; margin: 0; }

.nav-linkish {
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 14px;
  color: var(--color-dark);
  cursor: pointer;
  transition: background var(--transition-base);
}

.nav-linkish:hover { background: rgba(42, 16, 8, 0.08); }

.auth-shell {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

/* The profile page carries two-column rows, so it gets more room. */
.auth-shell--wide { max-width: 760px; }

/* The sheet spends 240px on its identity rail before the rubrics start, and at 760px that left
   the inventory two slots wide on a desktop. */
.auth-shell--sheet { max-width: 940px; }

/* Pages that only announce an outcome: no form to align to, so centre them. */
.auth-card--message { text-align: center; }

/* Same casing and tracking as .section-title, one step down — a signed-out page is one task,
   not a landing. Kept a separate class because it is red-dark on a card, not dark on a band. */
.auth-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  color: var(--color-red-dark);
  margin-bottom: var(--space-3);
}

.auth-sub {
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.auth-note {
  font-size: 14px;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.auth-alt {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.auth-alt a, .auth-note a {
  color: var(--color-red);
  font-weight: var(--weight-bold);
  text-decoration: underline;
}

.auth-alt a:hover, .auth-note a:hover { color: var(--color-red-dark); }

.auth-card--message .btn { margin-top: var(--space-2); }

/* Account area sub-navigation, in the page-head band. Same pill as the menu index and the
   header nav — the account area is not a different product. */
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.account-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
}

.account-tabs a:hover { background: var(--color-amber-light); }

.account-tabs a.active {
  background: var(--color-amber);
  box-shadow: var(--shadow-sm);
}

.account-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  background: var(--color-paper);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.account-facts dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.account-facts dd { font-size: 15px; font-weight: var(--weight-semibold); word-break: break-word; }

.account-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-red-dark);
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-cream-dark);
}

/* Opening a card, the divider rule would sit above nothing. */
.account-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ============================================================
   Fiche de personnage — one sheet, ruled into rubrics
   ============================================================ */

/* Identity down the left, rubrics on the right: the shape a character sheet has. One column below
   768px, where 240px of rail would leave the rubrics too narrow to read. */
.sheet {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  background: var(--color-cream);
  border: 3px solid var(--color-dark);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) 28px;
}

.sheet-identity { text-align: center; }

/* The rule between rail and rubrics is what makes it read as one ruled sheet rather than two
   columns that happen to sit together. Only while there are two columns to divide. */
@media (min-width: 769px) {
  .sheet-identity {
    padding-right: var(--space-6);
    border-right: 2px solid var(--color-cream-dark);
  }
}

/* The medallion is positioned against this frame, so it must establish the containing block. */
.sheet-portrait {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto var(--space-2);
  display: grid;
  place-items: center;
  background: var(--color-paper);
  border: 3px solid var(--color-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Dimmed: the frame is a slot awaiting the avatar builder, and a crisp logo would read as the
   portrait itself rather than as a placeholder. */
.sheet-portrait img { opacity: 0.35; }

.sheet-portrait-note {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.sheet-medallion {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 62px;
  height: 62px;
  display: grid;
  place-content: center;
  gap: 0;
  background: var(--color-amber);
  border: 3px solid var(--color-dark);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

.sheet-medallion-label {
  font-size: 10px;
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-red-dark);
  text-align: center;
}

.sheet-medallion-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-dark);
  text-align: center;
}

.sheet-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-red-dark);
  margin-bottom: 2px;
}

.sheet-epithet { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* <details> with no JavaScript: the summary is the whole affordance, so it has to look like a
   control rather than a stray line of text. */
.sheet-rename { text-align: left; }

.sheet-rename > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--color-red);
  text-decoration: underline;
}

.sheet-rename > summary::-webkit-details-marker { display: none; }
.sheet-rename > summary::before { content: "✎"; text-decoration: none; }
.sheet-rename > summary:hover { color: var(--color-red-dark); }
.sheet-rename[open] > summary { margin-bottom: var(--space-4); }

.sheet-block + .sheet-block { margin-top: var(--space-8); }

.sheet-rubric {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-red-dark);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-cream-dark);
}

.sheet-subrubric {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-red-dark);
  margin: var(--space-6) 0 var(--space-3);
}

.sheet-season {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-red-dark);
  margin-bottom: var(--space-2);
}

.sheet-figure-line, .sheet-purse { display: flex; align-items: baseline; gap: var(--space-2); }

.sheet-figure {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}

.sheet-figure-unit {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-red-dark);
}

/* The coin leads the purse line, so it aligns to the figure's baseline rather than to a label's. */
.sheet-purse .ecu-icon { align-self: center; }

.sheet-note { font-size: 14px; color: var(--color-text-muted); margin-top: var(--space-2); }

/* Item slots, not a list of cards: square tiles are what an inventory looks like, and they are
   the grid future items drop into. */
.sheet-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--space-3);
}

.sheet-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
  padding: var(--space-3);
  text-align: center;
  background: var(--color-paper);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
}

.sheet-slot--empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-cream-dark);
}

.sheet-slot-name {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: var(--leading-tight);
  color: var(--color-red-dark);
}

.sheet-slot-date { font-size: var(--text-xs); color: var(--color-text-muted); }

/* The écu coin (placeholder art — see Components/Layout/EcuIcon.razor). Sized in em so it rides
   whatever text names the currency, from a 10px table header to the purse line. */
.ecu-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
}

/* Leading a figure rather than a label, so it is sized against the number beside it. */
.ecu-icon--large { width: 34px; height: 34px; vertical-align: 0; }

/* Progress WITHIN the level, never the raw season total (SEASONS.md): a fresh 0→100 % bar per
   level is what keeps late levels feeling as close as early ones. */
.season-progress {
  height: 18px;
  background: var(--color-paper);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.season-progress-fill {
  height: 100%;
  background: var(--color-amber);
}

/* ============================================================
   Marché — catalog, purse and ledger history (/compte/marche)
   ============================================================ */

.marche-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.marche-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-cream-dark);
}

.marche-item-text { display: flex; flex-direction: column; gap: 2px; }

.marche-item-name { font-weight: var(--weight-bold); }

.marche-item-desc { font-size: var(--text-sm); color: var(--color-text-muted); }

.marche-item-price {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nothing-here-yet block: a first-visit account is the common case, not an error, so it gets
   a real invitation rather than a grey sentence. Reuses the header's logo — already loaded. */
.empty-state {
  text-align: center;
  background: var(--color-paper);
  border: 2px dashed var(--color-cream-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}

.empty-state img { width: 72px; height: 72px; opacity: 0.7; }

.empty-state h3 { font-size: var(--text-xl); margin: var(--space-3) 0 var(--space-2); }

.empty-state p {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 auto var(--space-5);
}

.empty-state p:last-child { margin-bottom: 0; }

/* Ledger table — scrolls within its own box on narrow screens. */
.ledger-scroll { overflow-x: auto; margin-bottom: var(--space-4); }

.ledger-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.ledger-table th, .ledger-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-cream-dark);
}

.ledger-table thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
}

.ledger-table .ledger-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zebra striping, only while this is actually a table: below 640px each row becomes its own card
   with its own background, and tinting every other card reads as a rendering fault, not a stripe. */
@media (min-width: 641px) {
  .ledger-table tbody tr:nth-child(even) { background: rgba(212, 196, 160, 0.25); }
}

@media (max-width: 640px) {
  /* Five columns don't fit a phone, and a sideways-scrolling box is a poor way to read your
     own points history — so each row becomes a card. Changing `display` on table elements
     strips their implicit ARIA roles, which is why the markup restates them explicitly. */
  .ledger-scroll { overflow-x: visible; }

  .ledger-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ledger-table tr {
    display: block;
    background: var(--color-paper);
    border: 2px solid var(--color-dark);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }

  .ledger-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: 3px 0;
    border-bottom: none;
    text-align: right;
  }

  .ledger-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
  }

  /* A purchase carries no description, so its Détail cell is empty: as a card line that would
     be a label with nothing beside it. Only ::before would render, and only here. */
  .ledger-table td:empty { display: none; }
}

/* ============================================================
   Legal / privacy page
   ============================================================ */

.legal {
  max-width: 820px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

.legal-prose { font-size: 16px; line-height: var(--leading-relaxed); color: var(--color-text); }

.legal-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-red-dark);
  margin: var(--space-8) 0 var(--space-3);
}

.legal-prose h2:first-child { margin-top: 0; }

.legal-prose h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: var(--space-6) 0 var(--space-2);
}

.legal-prose p { margin-bottom: var(--space-4); }
.legal-prose ul { margin: 0 0 var(--space-4); padding-left: 1.3em; list-style: disc; }
.legal-prose li { margin-bottom: 6px; }
.legal-prose a { color: var(--color-red); font-weight: var(--weight-bold); text-decoration: underline; }
.legal-prose a:hover { color: var(--color-red-dark); }

.legal-facts {
  display: grid;
  gap: var(--space-3);
  background: var(--color-paper);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.legal-facts dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.legal-facts dd { font-size: 15px; }

.legal-updated { font-size: 14px; color: var(--color-text-muted); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  /* 768px is where the widest header still fits inline: a Staff session shows six items and needs
     ~750px. Below it every auth state overflowed, so all of them get the drawer. */
  .site-nav { display: none; }
  .nav-drawer { display: block; }

  .hero { padding: 56px var(--space-5) var(--space-12); }
  .hero-watermark { width: 260px; height: 260px; }
  .hero-chevron { display: none; }

  .stats ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 0;
  }
  .stats li { border-right: none; padding: 0 var(--space-4); }
  .stats li:nth-child(odd) { border-right: 2px solid rgba(42, 16, 8, 0.25); }

  .menu-promo { padding: var(--space-10) var(--space-5); }
  .menu-promo-chevrons { font-size: 200px; right: -40px; }

  .marche-band, .social-band { padding: 44px var(--space-5); }

  .footer-columns { gap: var(--space-8); }

  .page-head { padding: var(--space-10) var(--space-5) var(--space-8); }

  .menu-section, .contact-section { padding: var(--space-8) var(--space-5) var(--space-12); }
  .menu-grid { grid-template-columns: 1fr; }
  .menu-info { padding: var(--space-5); }
  .menu-info-chevrons { font-size: 120px; right: -24px; }

  .contact-layout { grid-template-columns: 1fr; }

  .auth-shell { padding: var(--space-8) var(--space-5) var(--space-12); }
  .panel, .contact-form-panel, .auth-card { padding: var(--space-6) var(--space-5); }
  /* Alphakind is chunky: a long uppercase title needs the step down to stay on two lines. */
  .auth-title { font-size: var(--text-2xl); }
  /* Side-by-side fields get too narrow to type in below this width. */
  .form-row { grid-template-columns: 1fr; }

  /* The sheet's rail and rubrics stack: 240px of rail would leave the rubrics unreadably narrow.
     The identity block keeps its centred alignment, which is what it wants as a banner. */
  .sheet {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
  }
}

@media (max-width: 520px) {
  /* The drawer leaves the header at ~250px of content, so the wordmark no longer has to be
     dropped here and the nav pills no longer have to shrink. */
  .site-header .container { padding-inline: var(--space-4); }

  .account-facts { grid-template-columns: 1fr; }

  /* A 240px card floating in a 335px column reads as a stray ticket; on a phone the shelf is
     a stack, so each card takes the width the rest of the page takes. */
  .marche-shelf-item { flex: 1 1 100%; }
}

/* ============================================================
   Staff back-office (/gestion). MudBlazor owns the shell since M7 — app bar, drawer and nav are
   real components on the circuit (see Components/Layout/StaffLayout.razor) — and takes the brand
   palette through its theme. What is left here is the brand mark, the sign-out form Mud has no
   component for, and the page primitives shared by both wings. The back-office is deliberately
   flatter and squarer than the public site: same colours, different register, so staff know at a
   glance which surface they are on. It is light-only; there is no dark theme to keep in step.
   ============================================================ */
.staff-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
}

/* Sign-out posts a form rather than calling a service, so it cannot be a MudButton; match the
   app bar's text buttons by hand. nowrap because a cramped phone bar otherwise breaks the label
   over two lines. */
.staff-signout {
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--color-white);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.staff-signout:hover { background: rgba(255, 255, 255, 0.15); }

/* On a phone the bar has room for the essentials only: the brand keeps "Aux 3D", the suffix goes,
   and "Voir le site" collapses to its icon (markup in StaffLayout). */
@media (max-width: 640px) {
  .staff-brand-suffix { display: none; }
}

/* 1240, not the public site's 1280: dense tables (Carte & marges) need the air, and the drawer
   already eats 240px of the viewport. */
.staff-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--space-6); }

/* The page title is the one place the display font appears inside /gestion — not the public
   page-head band, which is full-bleed and pill-heavy and would fight a dense admin screen. */
.staff-page-head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-cream-dark);
}

.staff-page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.staff-page-actions { display: flex; align-items: center; gap: var(--space-2); }

.staff-page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

.staff-page-head p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* `td.`, not a bare class: MudBlazor.min.css loads after this file, so its equally-specific
   .mud-table-cell would win on source order and the figures would stay left-aligned. The header
   over a figure column carries the same class — a right-aligned value under a left-aligned
   heading reads as two columns. */
td.staff-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.staff-num { text-align: right; }

/* The curve editor's XP fields: keep the input the width of a figure, flush right like every
   other figure, so the editable table still reads as a table. */
.staff-curve-field { max-width: 140px; margin-left: auto; }
.staff-curve-field input { text-align: right; }

/* The sort arrow occupies its slot even while invisible, and MudBlazor puts it AFTER the label —
   on a right-aligned header that parks the text one icon short of the figures under it. Flip the
   arrow to the left so the text lands flush; text-align covers a header that wraps to two lines,
   whose inner lines would otherwise left-align inside the label box. */
th.staff-num .mud-table-sort-label { flex-direction: row-reverse; text-align: right; }
th.staff-num .mud-table-sort-label-icon { margin-left: 0; margin-right: 4px; }

/* A heading inside a page, under the page title: smaller, neutral, still ruled. */
.staff-section-title {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.staff-section-title:first-of-type { margin-top: 0; }

.staff-section-lede {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.staff-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

.staff-stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-cream-dark);
  border-left: 4px solid var(--color-slate-light);
  border-radius: 3px;
}

.staff-stat--points { border-left-color: var(--color-red); }

.staff-stat-value {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.staff-stat-label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* MudToggleGroup lays itself out as a full-width grid; a two-way direction switch should read as
   a compact control, not a banner across the whole card. */
.staff-direction { max-width: 340px; }

.staff-preview {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-amber);
  background: rgba(212, 196, 160, 0.25);
  color: var(--color-text);
}

.staff-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.staff-empty p { margin: var(--space-2) 0 0; }
.staff-empty-hint { font-size: var(--text-sm); }

.staff-loading { display: flex; justify-content: center; padding: var(--space-12) 0; }

/* A stored Loyverse payload, shown verbatim. pre would otherwise stretch the dialog to the width of
   its longest line; scrolling the block keeps the dialog itself from scrolling sideways. */
.staff-payload {
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-3);
  background: var(--color-cream);
  border: 1px solid var(--color-cream-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

@media (max-width: 640px) {
  .staff-main { padding: var(--space-4); }
}

/* ================================================================
   Procurement pages. Mud palette vars only exist where MudBlazor's
   CSS loads, i.e. on /gestion — the only place these appear.
   ================================================================ */

/* Winning supplier's row in the expanded price comparison (Comparaison des prix). */
.winner-row td { background-color: var(--mud-palette-success-hover); }

/* Public menu composition board. An empty zone still needs height: it is the drop target that
   un-files an item, so it has to be aimable when nothing is in it. */
.composition-zone {
  min-height: 3rem;
  padding: var(--space-2);
  border: 1px dashed var(--mud-palette-lines-default);
  border-radius: 3px;
}

.composition-heading {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.composition-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-left: 3px solid var(--color-cream-dark);
  border-radius: 3px;
  cursor: grab;
}

.composition-row:hover { border-left-color: var(--color-amber); }

.composition-grip { color: var(--mud-palette-text-disabled); }

/* Name over blurb, so a long blurb cannot push the prices off the row. */
.composition-text { display: flex; flex-direction: column; min-width: 0; }
.composition-name { font-weight: 600; }

.composition-note,
.composition-empty { color: var(--mud-palette-text-secondary); font-size: 0.85em; }

.composition-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.composition-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.composition-price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* Ingest invoice drop zone. */
.ingest-drop-zone {
  border: 2px dashed var(--mud-palette-lines-inputs);
  cursor: pointer;
}
.ingest-drop-zone:hover,
.ingest-drop-zone-dragging {
  border-color: var(--mud-palette-primary);
  background-color: var(--mud-palette-primary-hover);
}