/* FLASHCARDS-FR — single custom stylesheet (Spec §14).
   All brand tokens live here as CSS custom properties; no other custom CSS files.
   Loads AFTER the Bootstrap 5.3.8 CDN stylesheet. */

/* PALETTE REPOINTED TO BONMOT 2026-08-24 (redesign step 1b). Values only — no
   selector, rule or markup changed, so this commit is purely a recolour and the
   whole suite stays green. Shape (4px frames, 12px radius, no shadows) and type
   are untouched: those are not tokenised and belong to step 2.

   Previous FLASHCARDS-FR values are kept inline so any single token can be
   reverted without digging through git.

   RESOLVED IN 2c — kept for the reasoning: --fc-link used to be half of a
   mutually-inverted pair with --fc-bg-navbar. The chrome rendered link-colour
   text on navbar-colour ground, while .fc-btn-lancer and .fc-btn-try-again did
   the reverse — navbar colour as TEXT on link colour as FILL — so the token
   could not move without half-migrating those buttons. 2c put both buttons on
   white-over---fc-blue, after which --fc-link had one job and was free to
   change. If you ever give a button `background-color: var(--fc-link)` again,
   you re-create the knot. */
:root {
  --fc-bg-page: #F7F8FD;   /* was #D1EBE6 teal — BonMot shell, near-white     */
  /* ── STEP 5: the NavBar went LIGHT and the token SPLIT ────────────────────
     --fc-bg-navbar was #17203A ink navy, itself an interim standing in for the
     original #0410B2 electric blue. BonMot's chrome is a white bar with dark
     text, so it is now white — and --fc-bg-footer was split off to keep the
     footer dark, because the two merely happened to share a colour.

     EVERY chrome colour had to move with it. Measured against white, all seven
     of the old ones failed: --fc-link 1.85:1, --fc-selection 1.41:1,
     --fc-white 1.00:1, --fc-red-on-dark 2.81:1, --fc-admin-link 3.06:1,
     --fc-disabled 3.74:1, the brand red 3.83:1. A light bar is not a
     background change; it inverts every foreground in the chrome.

     --fc-link, --fc-red-on-dark and --fc-white KEEP their dark-ground values
     and their jobs — the FOOTER is still dark, so those are exactly what it
     needs. Do not repoint them at light-ground values. */
  --fc-bg-navbar: #FFFFFF; /* was #17203A (step 5) — BonMot's white chrome    */
  /* Split from --fc-bg-navbar in step 5 so the footer could stay dark while the
     bar went white. Matched to the bar by request 2026-08-26; kept as its own
     token so re-darkening is one edit here. Previous value: #17203A. */
  --fc-bg-footer: #FFFFFF; /* was #17203A ink navy                           */
  --fc-bg-card: #FFFFFF;   /* unchanged                                       */
  --fc-blue: #2048E8;      /* was #0433FF — BonMot UI blue                    */
  --fc-red: #E82024;       /* was #FF2600 — BonMot red. LARGE text and
                              non-text accents only — at 15-16px it is 4.25:1
                              on the page, under AA. Use the two below.      */
  /* Step 2f. One brand red cannot serve every ground, so it is split by USE:
       --fc-red         55px titles, box accent edges (large / non-text)
       --fc-red-text    small red text on the page or a card
       --fc-red-on-dark red text on the navy chrome
     The last one exists because the zero-cards badge is red on #17203A and
     scored 3.58:1 — a pre-existing failure, worse before the repaint (3.21:1
     on the old blue bar). Fixing it needs a LIGHTER red, the opposite
     direction from the small-text fix, which is why one token cannot do both. */
  --fc-red-text: #D51B21;    /* 4.94:1 on page, 5.24:1 on card white         */
  /* NO CONSUMER since step 5. It was the zero-cards badge on the navy chrome;
     the bar went white and that badge moved to --fc-red-text. Kept, with
     --fc-link below, as the DARK-GROUND pair — see the note there. */
  --fc-red-on-dark: #F4726F; /* 5.74:1 on a #17203A ground                   */
  /* NO CONSUMER since the footer was matched to the NavBar (2026-08-26): the
     footer was its last use site, and the app now has NO dark ground at all.

     --fc-link and --fc-red-on-dark are kept as the dark-ground pair. Both are
     contrast-derived values (8.72:1 and 5.74:1 on #17203A) and re-deriving
     them is real work, so re-darkening the footer stays a one-line change to
     --fc-bg-footer plus repointing three declarations. Delete them only if
     that revert is ruled out for good.
     History: was #76D6FF; RELEASED in step 2c when LANCER and Try Again
     stopped using it as a fill, which is what allowed it to become a light
     tint of --fc-blue rather than a colour that had to double as a button. */
  --fc-link: #9BC0FF;      /* light link text on a #17203A ground (8.72:1)  */
  --fc-disabled: #7A849E;  /* was #929292 — cool grey. Slightly DARKER on
                              purpose: the old grey scored ~2.8:1 on white,
                              which fails small text; this lifts it to ~3.6:1
                              while still reading as muted.                   */
  --fc-selection: #FFD479; /* unchanged — amber highlight still reads well on
                              the navy chrome, and .fc-menu-selected uses it
                              as a background with dark text.                 */
  --fc-orange: #F8741C;    /* was #FF9300 — BonMot logo orange (ESPAÑOL label)*/
  --fc-olive: #9058D8;     /* was #929000 — BonMot purple. The four card-box
                              frames must stay mutually distinct; with citation
                              on --fc-disabled and francais/france on blue/red,
                              purple is what keeps Vocabulaire separable. Note
                              this does NOT match the mockup's tone assignment
                              (there Vocabulaire is blue and France purple) —
                              the frames get their own tokens in step 2/3.    */
  --fc-green-frame: #2E965A; /* was #00A800 — BonMot green, one shade down so
                              the 2px BOX 2.2 frame clears 3:1 on white       */
  /* --fc-bar-blue (#007DFF) was REMOVED in step 2b. Its only consumer was the
     coloured `hr` bar inside BOX 2.3, and card-type colour now lives on the
     ::before top edge instead of an internal bar. §14 of this spec still lists
     it; that line is stale. */
  --fc-btn-analyser: #E82024; /* was #FF2F92 magenta — BonMot red             */
  /* Button greens are DARKER than BonMot's #38B068 on purpose: these carry
     white text, and #38B068 scores only 2.77:1 against white. #26824D reaches
     4.79:1. Note the values replaced here also failed — #009051 was 4.11:1 and
     #008F00 was 4.26:1 — so this fixes a pre-existing contrast defect rather
     than introducing one. Use --fc-green-frame for borders, these for fills. */
  --fc-btn-oui: #26824D;      /* was #009051                                  */
  --fc-btn-soumettre: #26824D; /* was #008F00                                 */
  /* Darkened in step 5: #8A93AE was 3.06:1 on the now-white bar, and this is
     small italic text. #6B748F reaches 4.65:1 while still reading as silver. */
  --fc-admin-link: #6B748F;   /* was #8A93AE, was #C0C0C0 — italic admin link */
  /* Body ink and on-dark text. Added 2026-08-24 as pure aliases for the black
     and white that were hard-coded across the file, so a palette change is one
     edit here rather than a hunt through eleven declarations. --fc-ink is
     SEPARATE from --fc-white on purpose, and --fc-white is separate from
     --fc-bg-card: card grounds and on-dark label text merely happen to share a
     value today, and a redesign can move one without dragging the other. */
  --fc-ink: #17203A;       /* was #000000 — BonMot ink. Pure black is what
                              dates a page fastest; a dark navy carries the
                              same weight without the harshness.             */
  --fc-white: #FFFFFF;     /* unchanged — on-dark label text                 */
  /* Was referenced as var(--fc-text-muted, #6c757d) but never defined, so the
     Bootstrap fallback was doing the work. Named here, then repointed at
     BonMot's soft ink. */
  --fc-text-muted: #5A6480; /* was #6c757d                                   */

  /* ── Shape (redesign step 2a, 2026-08-24) ─────────────────────────────────
     Declared at the values already in force, so wiring them up renders NO
     differently — the same discipline as 1a. Step 2b changes the values, and
     because every consumer now reads a token that is a one-line edit rather
     than a hunt through the file.

     --fc-shadow / --fc-shadow-lift are deliberately `none`: the stylesheet has
     ZERO box-shadow rules today, so `none` is the honest current value. The
     BonMot look is largely elevation, so this is the token 2b moves first.

     --fc-line is separated from --fc-disabled even though they hold the same
     colour right now. They mean different things — one is a hairline rule, the
     other is muted text and the Citation frame — and BonMot moves the hairline
     to a much lighter #E4E7F2 while muted text stays dark. Splitting them here
     is what lets 2b move one without dragging the other, exactly as --fc-ink
     was split from --fc-white in 1a.                                        */
  --fc-radius: 22px;       /* was 12px (step 2b) — .fc-box                   */
  --fc-radius-sm: 8px;     /* form controls (step 2d) — auth fields, BOX 2.2,
                              and the Bootstrap .form-control override.
                              Buttons take --fc-radius-pill instead.         */
  --fc-radius-pill: 999px; /* step 2c — all .fc-btn buttons                  */
  --fc-line: #E4E7F2;      /* was #7A849E (step 2b) — DECORATIVE hairlines
                              only: box borders and the internal rule.       */
  /* Form-control boundaries are NOT --fc-line. WCAG 1.4.11 wants 3:1 for a UI
     component boundary, and #E4E7F2 is 1.23:1 on white — fine for a decorative
     rule, far too faint for the edge of a field you must find and click. Held
     at the value it already had (3.74:1), which clears the threshold. Every
     field also gets a focus ring in 2d — see the form-controls section. */
  --fc-line-strong: #7A849E;
  /* Elevation, replacing 4px hard frames as the way a BOX separates itself
     from the page. Tinted with the ink hue rather than neutral black so the
     shadow sits in the same colour family as the rest of the palette. */
  --fc-shadow: 0 8px 30px rgba(23, 32, 58, 0.08);       /* was none          */
  /* --fc-shadow-lift has NO consumer yet: it is the hover/raised state for a
     BOX, and nothing hovers a BOX until the page structure work in step 4.
     Kept declared so the pair reads as one decision rather than leaving a
     lone shadow value to be guessed at later. */
  --fc-shadow-lift: 0 18px 45px rgba(23, 32, 58, 0.14); /* was none          */

  /* ── Type scale (redesign step 3, 2026-08-25) ─────────────────────────────
     48 hard-coded px font-sizes in 13 distinct values became this ladder of
     ten. Two things change beyond tidiness:

     1. rem, not px. A px font-size IGNORES the reader's browser font-size
        setting — the one accessibility control non-technical users actually
        find. Everything below scales with it. Fixed BUTTON dimensions moved to
        rem in the same pass for the same reason: a 30px-tall, 75px-wide OUI
        button with text that can grow is a clipped button. At the default
        16px root these are pixel-identical to what they replaced.
     2. clamp() on the three display tiers. The 55px title had exactly one
        breakpoint (38px below 768px) and nothing in between, so it overflowed
        every width in the gap. The ramp runs 480px→1200px viewport; the two
        @media font-size overrides that used to do this job were DELETED, since
        clamp covers the whole range continuously.

     WCAG 1.4.4 (resize to 200%) is why each clamp keeps a rem term in its
     middle argument. A preferred value of pure vw would freeze under browser
     zoom — the layout viewport shrinks as you zoom, so vw cancels the zoom
     out. Never write these as `clamp(2rem, 4vw, 3rem)`.

     Only two values were collapsed, both UPWARD so nothing got smaller:
     12px→13px (the ENGLISH/ESPAÑOL labels, the icon glyphs) and 24px→26px
     (the 🇫🇷 flag, joining the Vocabulaire word). Everything else kept its
     size exactly.

     NOT here: .fc-beta-prompt / .fc-beta-have-account (1.25em) and
     .bilingual-secondary (0.90em) stay relative on purpose — they must track
     whatever they sit inside, so a fixed tier would break them. And .fc-box
     stays 600px: box width is structure, which is step 4.                   */
  --fc-text-xs: 0.8125rem;  /* 13px — translation labels, error codes, glyphs */
  --fc-text-sm: 0.875rem;   /* 14px — menu items, char count, footer fine print */
  --fc-text-base: 0.9375rem; /* 15px — the app's real body size              */
  --fc-text-md: 1rem;       /* 16px — form labels, buttons, menu titles      */
  --fc-text-lg: 1.125rem;   /* 18px — card body copy, NavBar links           */
  --fc-text-xl: 1.25rem;    /* 20px — citation text, the BOX 2.2 field       */
  --fc-text-2xl: 1.625rem;  /* 26px — the Vocabulaire word, the flag         */
  /* Display tiers. Each ramps 480px→1200px of viewport between its floor and
     the size that used to be hard-coded; the max is the old fixed value, so
     nothing grew. */
  --fc-text-h2: clamp(1.5rem, 1.083rem + 1.389vw, 2.125rem);      /* 24→34px */
  --fc-text-h1: clamp(1.75rem, 1.25rem + 1.667vw, 2.5rem);        /* 28→40px */
  --fc-text-display: clamp(2.375rem, 1.667rem + 2.361vw, 3.4375rem); /* 38→55px */

  /* Icon-button diameter. In rem so the circle grows WITH the glyph inside it
     — at a larger root size a fixed 28px circle would clip a scaled ▼. */
  --fc-icon-btn: 1.75rem;  /* 28px */
  /* Card-page button dimensions (§10.1, §10.4): 170×30, 130×30, 75×30. */
  --fc-btn-h: 1.875rem;        /* 30px */
  --fc-btn-w-lancer: 10.625rem; /* 170px */
  --fc-btn-w-analyser: 8.125rem; /* 130px */
  --fc-btn-w-oui: 4.6875rem;   /* 75px */

  /* ── Card-type identity (redesign step 4a, 2026-08-26) ────────────────────
     Anticipated by the 1b note on --fc-olive: "the frames get their own
     tokens". They do now, because step 4a puts the four card types on the
     Accueil tiles as well as the BOX edges, and a type that is purple on one
     page and blue on another is not an identity.

     Split fill/text for the same reason --fc-red was split in 2f: the mockup
     uses one colour for both the arrow FILL (white glyph on it) and the 13px
     bold LABEL (on white), and no single value clears both bars. Measured on
     white — fills need 3:1 as UI components, label text needs 4.5:1:

       coral   #F05858  3.36:1  ok as fill, FAILS as label  -> text #C4342F 5.41
       purple  #9058D8  4.59:1  ok as both, text variant is calmer -> #6F3CB0 7.12
       blue    #2048E8  6.66:1  ok as both, one value serves
       red     #E82024  4.50:1  ok as fill, text uses the 2f --fc-red-text

     TWO deliberate departures from the mockup:
     1. Citation was --fc-disabled GREY on the live BOX edge. Grey reads as
        disabled, and it was the weakest of the four; it takes the mockup's
        coral. This is the one card page whose top edge changes colour.
     2. Français Trivia keeps BLUE. The mockup gives it green #38B068, which
        is 2.77:1 — it fails as a fill AND as label text, the same trap that
        the button greens hit in 1b. Blue is what the live BOX already uses
        and it passes everywhere. Do not "restore" the green. */
  --fc-type-citation: #F05858;
  --fc-type-citation-text: #C4342F;
  --fc-type-vocabulaire: #9058D8;      /* same value as --fc-olive */
  --fc-type-vocabulaire-text: #6F3CB0;
  --fc-type-francais: #2048E8;         /* same value as --fc-blue  */
  --fc-type-francais-text: #2048E8;
  --fc-type-france: #E82024;           /* same value as --fc-red   */
  --fc-type-france-text: #D51B21;      /* same value as --fc-red-text */

  /* Hero gradient top stop, and the darker blue for a primary button's hover.
     #1838C0 is 8.88:1 on white, so a hover state never drops below the rest. */
  --fc-lavender: #EFF1FD;
  --fc-blue-dark: #1838C0;
  --fc-radius-md: 16px;  /* tiles and sample cards; --fc-radius (22px) is BOXes */

  /* Log-in / sign-up field width. The browser default (`size=20`) rendered
     202px; this is 1.5×. One edit here changes both forms, and .fc-auth-form
     is width: fit-content so the form follows on its own. */
  --fc-auth-input-w: 19rem;  /* 304px */
}

/* ── Base ──────────────────────────────────────────────────────────────── */

body {
  background-color: var(--fc-bg-page);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fc-ink);
}

/* ── Titles (two-tone display; Accueil subtitle one tier down) ─────────── */

.fc-title {
  font-size: var(--fc-text-display);
  font-weight: bold;
}

.fc-title-blue { color: var(--fc-blue); }
.fc-title-red  { color: var(--fc-red); }
/* .fc-text-red is NOT defined here — it already exists further down as the
   French-flag red (#EF4135), which is a different red from --fc-red (#FF2600).
   A duplicate rule was briefly added here and was dead code: the later one wins
   the cascade. Body-copy red belongs to that rule; this section is titles. */
/* Accueil "FLASHCARDS-" gray per concept image 002.
   NO CONSUMER since 2026-08-26: its two use sites were the hero wordmark
   (replaced by the BonMot lockup) and the Explore heading (which now names the
   cards instead of the product). Kept alongside .fc-text-blue / .fc-text-ink,
   which are orphaned for the same reason — the FLASHCARDS-FR text wordmark is
   simply no longer drawn anywhere. All three go together if the rename is
   completed, and all three come back together if it is reverted. */
.fc-title-gray { color: var(--fc-disabled); }

.fc-example-title {
  font-size: var(--fc-text-h2);
  color:  var(--fc-disabled);
}

/* .fc-subtitle was DELETED in step 4a. Its only use site was the Accueil
   "Vocabulaire - Trivia" line, and the restructured hero renders that as a
   compact brand descriptor instead. .fc-section-title is the same size tier
   plus bold and centring — use that if a page needs a section heading. */

/* Page intro paragraphs: one tier above body for the leading line (the French
   second line scales down via .bilingual-secondary) */
.fc-intro {
  font-size: var(--fc-text-lg);
}

/* Red NOTE label on the Accueil examples image */
.fc-note-label {
  color: var(--fc-red-text);
}

/* Accueil beta-request prompt — bold, 1.5× the surrounding text. Relative (em)
   rather than a fixed px so the .bilingual-secondary line, itself 0.85em, keeps
   its proportion when a non-French locale adds the French underneath. */
.fc-beta-prompt {
  font-size: 1.25em;
  font-weight: bold;
}

/* The log-in line under the same form — 1.25× body text, em for the same
   reason. Bold comes from .fw-bold in the view, so this stays size-only. */
.fc-beta-have-account {
  font-size: 1.25em;
}

/* Accueil symbols legend: one inline-block column per item, so the French
   .bilingual-secondary line stacks under its own item rather than breaking the row */
.fc-symbols-legend .fc-symbol-item {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.5rem;
}

/* The NavBar brand is now the BonMot mark (an image), so .fc-text-blue and
   .fc-text-ink no longer have a use site. They are KEPT rather than deleted:
   the site is still FLASHCARDS-FR everywhere else, and reverting the brand to
   the two-tone text wordmark should not also require re-deriving its colours.
   .fc-text-red is still live — the beta "Vous avez déjà un compte ?" strings
   carry it — and --fc-red-text is what fixed it there too (the French-flag
   #EF4135 was 3.83:1, under AA on the page ground). */
.fc-text-blue {
  color: var(--fc-blue);
}

/* NavBar brand mark. Sized by HEIGHT so it sits on the bar's optical baseline
   regardless of the artwork's aspect ratio; the 400px-wide asset gives ~2.7x
   for retina at this size. */
.fc-navbar-logo {
  height: 2.5rem;
  width: auto;
}

@media (max-width: 575.98px) {
  .fc-navbar-logo { height: 2rem; }
}

.fc-text-white {
  color: var(--fc-white);
}

/* The brand wordmark's hyphen. Was .fc-text-white, invisible once the bar went
   white in step 5 — the separator simply vanished and the wordmark read
   "FLASHCARDSFR". .fc-text-white itself is kept: the footer is still dark. */
.fc-text-ink {
  color: var(--fc-ink);
}

.fc-text-red {
  color: var(--fc-red-text); /* was #EF4135 French-flag red — see above */
}

.fc-preserve-lines { white-space: pre-line; }

/* ── Auth pages (concept image 008) ────────────────────────────────────── */

.fc-auth-title {
  font-size: var(--fc-text-h1);
  font-weight: bold;
}

.fc-auth-subtitle {
  font-size: var(--fc-text-lg);
  font-style: italic;
}

.fc-auth-form {
  width: fit-content;
}

/* Step 2d: the auth form KEEPS its <table> markup — no view change was needed.
   The grid of bordered cells that concept image 008 called for is dropped, and
   the field boundary moves onto the input itself. That turns "label cell |
   input cell" into "label text, then a rounded field", which is the modern
   shape, using only CSS. (I expected this might need the table replaced; it
   did not, so 2d stayed in step 2.) */
.fc-auth-table {
  border-collapse: separate;
  border-spacing: 0 0.4rem;
  background-color: transparent;
}

.fc-auth-table td {
  border: 0;
  padding: 0 0.5rem;
  vertical-align: middle;
}

.fc-auth-label {
  font-size: var(--fc-text-md);
  font-style: italic;
  white-space: nowrap;
}

/* Width is explicit rather than left to the browser's default `size=20`, which
   rendered these at 202px — cramped for an email address, the longest thing
   anyone types here. 19rem is 1.5× that. .fc-auth-form is width: fit-content,
   so the form grows with it and needs no separate change.
   See the stacking media query below for what keeps this off the edge of a
   phone; max-width is the belt-and-braces for anything narrower still. */
.fc-auth-input {
  font-size: var(--fc-text-md);
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line-strong);
  border-radius: var(--fc-radius-sm);
  padding: 0.5rem 0.85rem;
  width: var(--fc-auth-input-w);
  max-width: 100%;
}

/* Below sm the label/input pair STACKS. The auth form is a <table> with a
   nowrap label cell beside the field, so on a narrow screen the two compete
   for one line: measured via CDP device metrics, the widened field overflowed
   by 3px at 414px and 45px at 320px. (The old 202px field just fitted, which
   is why this only appeared when the field grew.)

   Collapsing the table to blocks puts the label above its field and lets the
   field use the full width, which is the better mobile form anyway. Note
   Chrome will NOT resize a window below 500px — `resize_to(320, …)` silently
   gives you 500 — so this must be verified with
   Emulation.setDeviceMetricsOverride or it looks fine while being broken. */
@media (max-width: 575.98px) {
  .fc-auth-form { width: 100%; }

  .fc-auth-table,
  .fc-auth-table tbody,
  .fc-auth-table tr,
  .fc-auth-table td {
    display: block;
    width: 100%;
  }

  .fc-auth-table td { padding: 0; }

  .fc-auth-label {
    margin-bottom: 0.15rem;
    white-space: normal; /* the nowrap that caused the squeeze is pointless once stacked */
  }

  .fc-auth-input { width: 100%; }
}

/* ── Form controls: one focus treatment for every field ─────────────────────
   .fc-auth-input previously carried `outline: none` with NOTHING in its place,
   so keyboard users had no focus indicator at all on the log-in and sign-up
   forms — a WCAG 2.4.7 failure, not a style preference. Fixed here, and the
   same ring is given to the other two families so the app has one behaviour
   rather than three.

   The ring is 3px OUTSET. That is safe inside .fc-box-22 despite the
   `overflow: hidden` added in 2b, because the BOX carries Bootstrap `p-3`
   (16px) — the ring sits well inside the padding. If that padding ever
   shrinks, or the ring grows, switch to an inset shadow instead. */
.fc-auth-input:focus,
.fc-box22-input:focus,
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--fc-blue);
  box-shadow: 0 0 0 3px rgba(32, 72, 232, 0.18);
}

/* Bootstrap's own form-control is used by 14 fields (contact, beta request,
   admin, verification, password reset, account deletion) against 15 using
   .fc-auth-input. Matching radius and border here keeps the app from having
   two different-looking inputs; Bootstrap loads first, so this wins. */
.form-control,
.form-select {
  border-color: var(--fc-line-strong);
  border-radius: var(--fc-radius-sm);
}

/* Placeholders move off --fc-disabled (3.74:1) onto --fc-text-muted (5.6:1).
   Still clearly secondary, but readable — a placeholder is often the only
   hint of the expected format. */
.fc-auth-input::placeholder,
.fc-box22-input::placeholder,
.form-control::placeholder {
  color: var(--fc-text-muted);
  opacity: 1; /* Firefox dims placeholders by default; the colour above is
                 already the intended tone, so let it stand on its own. */
}

.fc-btn.fc-btn-soumettre {
  padding: 0.375rem 1.5rem;
}

/* ── BOXES (600px, rounded except BOX 2.2) ─────────────────────────────── */

/* Step 2b: the 4px coloured frame that used to identify each card type is
   replaced by a hairline + elevation + a 5px coloured top edge. Same job —
   fencing AI output off from page chrome, and saying at a glance which card
   this is — modern treatment.
   position/overflow exist for the ::before edge: overflow clips it to the
   rounded corners, which is what keeps the edge from squaring off the top. */
.fc-box {
  width: 600px;
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  position: relative;
  overflow: hidden;
}

/* The accent bar. Renders nothing until a .fc-box-* type sets the variable,
   so a bare .fc-box shows no edge rather than a black one — `transparent` is
   the fallback, not `currentColor`. */
.fc-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--fc-box-accent, transparent);
}

/* Generation progress (§10.2 D) — elapsed counter + reassurance inside the
   BOX while a card is being generated. Removed with the BOX when the result
   (or error) replaces it, so it needs no idle state. */
.fc-generation-progress {
  font-size: var(--fc-text-base);
  color: var(--fc-text-muted);
  padding: 1.5rem 0;
}

.fc-generation-elapsed {
  font-variant-numeric: tabular-nums; /* keeps the digits from jittering */
  margin-left: 0.4rem;
}

/* .fc-box-square is GONE (step 2b). It existed only to hold BOX 2.2 at
   border-radius: 0 per the original §10.4 "rectangle, no rounding"; BOX 2.2
   now rounds like every other box. Removed rather than left as a no-op class,
   so nobody applies it later expecting square corners. Its one use site in
   cards/_vocab_regions.html.erb was dropped in the same change. */

/* Internal rule separating French from the translations. Now a plain hairline:
   the card's colour identity moved to the top edge, so a coloured bar here as
   well would be a third cue saying the same thing. */
.fc-box hr {
  border-top: 1px solid var(--fc-line);
  opacity: 1;
}

/* Card-type identity (§10.4). Step 2b: `border: 4px solid <colour>` and the
   matching coloured `hr` bar are both replaced by one accent variable driving
   the ::before top edge. Colours are unchanged — only where they appear.
   Reverting to framed boxes means restoring the border/hr pairs below and
   dropping .fc-box::before; the tokens themselves need no change. */
/* Step 4a repointed these at the --fc-type-* tokens so the BOX edge and the
   Accueil tile for the same card type can never drift apart. Three are the
   same colour they already were; CITATION changes grey -> coral. */
.fc-box-citation        { --fc-box-accent: var(--fc-type-citation); }
.fc-box-vocabulaire     { --fc-box-accent: var(--fc-type-vocabulaire); }
.fc-box-francais-trivia { --fc-box-accent: var(--fc-type-francais); }
.fc-box-france-trivia   { --fc-box-accent: var(--fc-type-france); }

/* Selections echoed at the BOX top, body size, colors per §10.4 */
.fc-box-selections { font-size: var(--fc-text-base); }
.fc-selection-echo { margin-right: 0.5rem; }
.fc-echo-black     { color: var(--fc-ink); }
.fc-echo-red       { color: var(--fc-red-text); }
.fc-echo-blue      { color: var(--fc-blue); }

/* BOX content (§10.4) */
.fc-citation-text       { font-size: var(--fc-text-xl); }
.fc-citation-author     { font-size: var(--fc-text-md); font-style: italic; text-align: right; }
.fc-trivia-text         { font-size: var(--fc-text-lg); }
/* 24px→26px in step 3: the flag joins the Vocabulaire word on one tier. */
.fc-france-flag         { font-size: var(--fc-text-2xl); }
.fc-vocab-word          { font-size: var(--fc-text-2xl); font-weight: bold; }
.fc-vocab-pronunciation { font-size: var(--fc-text-lg); }
.fc-vocab-definition    { font-size: var(--fc-text-sm); }
.fc-vocab-sentence      { font-size: var(--fc-text-lg); }

/* Collapsible translations section. The two labels were 12px and moved up to
   the 13px tier in step 3 — the smallest type in the app, and it was the one
   telling you which language you were reading. */
.fc-label-english { font-size: var(--fc-text-xs); color: var(--fc-blue); }
.fc-label-espanol { font-size: var(--fc-text-xs); color: var(--fc-orange); }
.fc-translation   { font-size: var(--fc-text-sm); font-style: italic; }
/* ▼▲ expand (§10.4), ▶ speech (§13.1), ⬇ download (§13.2).

   Step 2e: these were bare glyphs — `background: none; border: 0` — which read
   as decoration rather than as things you can press, and gave a pointer target
   only as large as the character itself. They are now circular controls with a
   real 28px hit area. */
.fc-box-toggle,
.fc-box-play,
.fc-box-download {
  width: var(--fc-icon-btn);
  height: var(--fc-icon-btn);
  padding: 0;
  /* --fc-line-strong, not --fc-line: at 1.23:1 the decorative hairline would
     be invisible as a control boundary. Arguably WCAG 1.4.11 is already met by
     the glyph itself (5.88:1), which is what identifies the control — but the
     entire point of making these circular is that they should LOOK pressable,
     and a boundary you cannot see does not do that. Same token the form
     fields use in 2d. */
  border: 1px solid var(--fc-line-strong);
  border-radius: 50%;
  background-color: var(--fc-bg-card);
  color: var(--fc-text-muted);
  font-size: var(--fc-text-xs);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.fc-box-toggle:hover,
.fc-box-play:hover,
.fc-box-download:hover {
  background-color: var(--fc-blue);
  border-color: var(--fc-blue);
  color: var(--fc-white);
}

/* ▶ sits inline ahead of a passage — and on Vocabulaire, ahead of four
   separate lines. vertical-align drops the circle onto the text baseline
   instead of letting it ride high on the line box. */
.fc-box-play {
  vertical-align: -0.35em;
  margin-right: 0.4rem;
}

/* Global UI lock while speech plays (§13.1): body carries .fc-ui-locked —
   all NavBar/footer links and buttons inert + grayed until end/error/cancel */
.fc-ui-locked .fc-navbar a,
.fc-ui-locked .fc-navbar button,
.fc-ui-locked .fc-footer a,
.fc-ui-locked button,
.fc-ui-locked input[type="submit"] {
  pointer-events: none;
  color: var(--fc-disabled);
}

/* The icon buttons gained a border and a fill in 2e, so muting their text
   colour alone would leave them looking live while the UI is locked. */
.fc-ui-locked .fc-box-toggle,
.fc-ui-locked .fc-box-play,
.fc-ui-locked .fc-box-download {
  border-color: var(--fc-line);
  background-color: transparent;
}

/* ☰ card-page selection menus (concept §9): title one tier above its items */
.fc-card-menu-title {
  font-size: var(--fc-text-md);
  font-weight: bold;
  color: var(--fc-blue);
  text-decoration: none;
}

.fc-card-menu .dropdown-item { font-size: var(--fc-text-sm); }

/* Chosen item echoed under the ☰ menu title (like the NavBar): one tier below
   the title, same menu color (black, for now). */
.fc-card-menu-selection {
  display: block;
  font-size: var(--fc-text-sm);
  color: var(--fc-red-text);
}

/* The picked menu item */
.fc-menu-selected { background-color: var(--fc-selection); }

/* Vocabulaire test flow (§10.4): question, BOX 2.2, BOX 2.3 */
.fc-vocab-question { font-size: var(--fc-text-md); font-weight: bold; }

.fc-btn-oui {
  width: var(--fc-btn-w-oui);
  height: var(--fc-btn-h);
  font-size: var(--fc-text-md);
}

.fc-box-22 { --fc-box-accent: var(--fc-green-frame); }

.fc-box22-label { font-size: var(--fc-text-base); }

.fc-char-count       { font-size: var(--fc-text-sm); }
.fc-char-count-alert { color: var(--fc-red-text); }

.fc-box22-input {
  font-size: var(--fc-text-xl);
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line-strong);
  border-radius: var(--fc-radius-sm);
  padding: 0.5rem 0.85rem;
}

.fc-btn-analyser {
  width: var(--fc-btn-w-analyser);
  height: var(--fc-btn-h);
  font-size: var(--fc-text-md);
}

.fc-box-analyse    { --fc-box-accent: var(--fc-red); }

.fc-analyse-header { font-size: var(--fc-text-base); }
.fc-analyse-text   { font-size: var(--fc-text-lg); }

/* Trilingual error lines (§15): French at body size, En/Es one tier down, italic */
.fc-error-fr        { font-size: var(--fc-text-base); color: var(--fc-red-text); }
.fc-error-secondary { font-size: var(--fc-text-xs); font-style: italic; color: var(--fc-red-text); }
.fc-error-code      { font-size: var(--fc-text-xs); color: var(--fc-disabled); }

/* Try Again (§15) — re-submits the page's LANCER/ANALYSER form */
.fc-btn-try-again {
  background-color: var(--fc-blue);
  color: var(--fc-white);
  font-size: var(--fc-text-sm);
  font-weight: bold;
  border: 0;
  padding: 2px 16px;
}

/* Post-completion instruction text (§10.1 pt 6) */
.fc-instructions { font-size: var(--fc-text-base); }

/* ── Buttons (colors per tokens; dimensions refined on the card pages) ─── */

/* Step 2c: every button becomes a pill. Radius is set on the family rather
   than per button, so .fc-btn-analyser and .fc-btn-try-again — which carried
   no radius at all and rendered as hard rectangles — pick it up too.
   Dimensions were deliberately untouched here: the fixed 170×30 / 130×30 /
   75×30 are §10.1/§10.4 values and changing them moves layout, which belonged
   to step 3. A 30px-tall pill is still a pill. Step 3 then converted them to
   rem tokens (--fc-btn-w-*, --fc-btn-h) at the same visual size.

   CAVEAT FOUND 2026-08-26: a rule set on this family only reaches buttons whose
   MARKUP carries .fc-btn. Two never did — cards/_lancer_button_state and
   cards/_error_message — so LANCER and Try Again sat outside all of this and
   rendered as hard rectangles (border-radius 0px) with no hover or press
   feedback, from step 2c right through step 5. Both now carry the class, and
   every button in the app is in the family. Before assuming a button gets this
   treatment, grep the VIEW, not the stylesheet. */
.fc-btn {
  color: var(--fc-white);
  font-weight: bold;
  border: 0;
  border-radius: var(--fc-radius-pill);
  transition: filter 0.12s ease, transform 0.12s ease;
}

.fc-btn:hover { filter: brightness(1.08); }
.fc-btn:active { transform: translateY(1px); }

.fc-btn-analyser  { background-color: var(--fc-btn-analyser); }
.fc-btn-oui       { background-color: var(--fc-btn-oui); }
.fc-btn-soumettre { background-color: var(--fc-btn-soumettre); }

/* LANCER la CARTE (§10.1 pt 4). Step 2c flips it from pale-fill/dark-text to
   BonMot's primary: white on --fc-blue, 6.66:1. This is what RELEASES
   --fc-link — it and --fc-bg-navbar were a mutually-inverted pair, with the
   chrome rendering link-on-navbar and these two buttons rendering the reverse.
   With the buttons on their own colours, --fc-link is free to be nothing but
   "light link text on dark chrome". */
.fc-btn-lancer {
  background-color: var(--fc-blue);
  color: var(--fc-white);
  width: var(--fc-btn-w-lancer);
  height: var(--fc-btn-h);
  font-size: var(--fc-text-md);
  font-weight: bold;
  border: 0;
}

/* ── Landing-page bands (redesign step 4a) ───────────────────────────────────
   Ported from bonmot.css and renamed bm- -> fc-. Used by Accueil only for now;
   the card pages get theirs in 4b/4c. Every inline `style=` in the mockup
   became a class here — house rule #9 forbids inline styles on the live site,
   and the mockup had ~10 of them.

   These bands are full-bleed <section>s that break OUT of the page container,
   unlike everything above, which lives inside .container. That is the whole
   structural change of step 4: bands with their own grounds, rather than one
   centred column of stacked paragraphs. */

/* Hero: the tinted band. Gradient rather than a flat fill so the band fades
   into the page ground instead of ending on a hard line. */
.fc-hero {
  background: linear-gradient(180deg, var(--fc-lavender) 0%, var(--fc-bg-page) 100%);
  padding: 3rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(32, 72, 232, 0.16);
  border-radius: var(--fc-radius-pill);
  color: var(--fc-blue);   /* 5.92:1 on the lavender band */
  font-size: var(--fc-text-sm);
  padding: 0.45rem 1rem;
}

.fc-tagline {
  font-size: var(--fc-text-h1);
  font-weight: bold;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 0;
}

/* The BonMot brand lockup in the Accueil hero. Capped by WIDTH rather than
   height so the wordmark scales with the column, and max-width: 100% so it
   never pushes the hero wider on a phone.

   The artwork's background was keyed to transparent (it shipped as an opaque
   near-white RGB PNG, which would have drawn a white box on the tinted hero
   band). Its letter COUNTERS are still opaque white — a border-connected key
   cannot reach an enclosed region, and that same rule is what stops it
   punching a hole in the flag's white stripe. Invisible against this band and
   against the white NavBar; if the lockup is ever put on a dark ground, it
   needs a properly transparent export instead. */
.fc-brand-lockup {
  width: 17rem;
  max-width: 100%;
  height: auto;
}

.fc-tagline-accent { color: var(--fc-blue); }

/* The two-tone brand descriptor under the wordmark ("Vocabulaire - Trivia").
   It uses --fc-red-TEXT, not --fc-red: this line was a 34px subtitle on the
   old page, where large-text 3:1 applied, and step 4a shrank it to a 13px
   label on the tinted hero band. At that size --fc-red measures 4.00:1 on the
   lavender and fails; the text red reaches 4.66:1. Shrinking text is exactly
   when a colour that used to pass stops passing. */
.fc-brand-descriptor-blue { color: var(--fc-blue); }
.fc-brand-descriptor-red  { color: var(--fc-red-text); }

/* The hand-drawn rule under the accent line. An inline SVG rather than a
   border-bottom so it keeps the wobble; aria-hidden, purely decorative. */
.fc-underline {
  position: relative;
  display: inline-block;
}

.fc-underline svg {
  position: absolute;
  left: 0;
  bottom: -0.42em;
  width: 100%;
  height: 0.34em;
  overflow: visible;
}

.fc-underline svg path { stroke: var(--fc-red); }

.fc-lede {
  color: var(--fc-text-muted);
  font-size: var(--fc-text-lg);
  line-height: 1.6;
  max-width: 34rem;
  margin: 1.25rem 0 0;
}

.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fc-text-muted);
  font-size: var(--fc-text-sm);
}

.fc-chip-icon {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(32, 72, 232, 0.10);
  flex: 0 0 auto;
}

/* ── Hero sample-card fan ────────────────────────────────────────────────────
   A flex row, NOT absolute positioning: the three specimens keep their fan on
   desktop via rotation + negative margins, and simply unstack into a readable
   column on small screens instead of piling on top of one another. */
.fc-fan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1rem 0;
}

.fc-sample {
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow);
  padding: 1rem;
  width: 13rem;
  flex: 0 0 auto;
  transition: transform 0.14s ease;
}

.fc-sample-1 { transform: rotate(-7deg) translateY(0.875rem); z-index: 1; }
.fc-sample-2 { transform: scale(1.1);   z-index: 3; margin: 0 -1.125rem; }
.fc-sample-3 { transform: rotate(7deg)  translateY(0.875rem); z-index: 2; }

.fc-sample:hover { transform: translateY(-0.375rem) rotate(0deg) scale(1.02); }

.fc-sample-tag {
  display: inline-block;
  border-radius: var(--fc-radius-pill);
  font-size: var(--fc-text-xs);
  font-weight: bold;
  padding: 0.15rem 0.6rem;
}

/* ── Type pills: ONE validated tint/text pair per card type ──────────────────
   Shared by the Accueil sample tags (4a) and the card-page badges (4b), so
   there is a single set of measured combinations rather than two that drift.
   Each is the type colour as a light tint behind its own darkened text
   variant, and each was measured on white:

     citation     0.14 -> #FDE8E8  4.61:1
     vocabulaire  0.14 -> #EFE8FA  5.97:1
     francais     0.12 -> #E4E9FC  5.50:1
     france       0.08 -> #FDEDED  4.62:1

   THE ALPHAS ARE NOT ALL THE SAME AND MUST NOT BE MADE SO. Red is much the
   darkest base, so 0.14 of it gives a far deeper tint than 0.14 of coral —
   #D51B21 on the 0.12 version measured 4.33:1, under AA. Equal alphas look
   tidier in the file and fail in the browser. */
.fc-type-pill-citation {
  background-color: rgba(240, 88, 88, 0.14);
  color: var(--fc-type-citation-text);
}

.fc-type-pill-vocabulaire {
  background-color: rgba(144, 88, 216, 0.14);
  color: var(--fc-type-vocabulaire-text);
}

.fc-type-pill-francais {
  background-color: rgba(32, 72, 232, 0.12);
  color: var(--fc-type-francais-text);
}

.fc-type-pill-france {
  background-color: rgba(232, 32, 36, 0.08);
  color: var(--fc-type-france-text);
}

.fc-sample-quote,
.fc-sample-fact {
  font-size: var(--fc-text-xs);
  line-height: 1.45;
  color: var(--fc-ink);
}

.fc-sample-openquote {
  font-size: var(--fc-text-2xl);
  color: var(--fc-line-strong);
}

.fc-sample-author {
  font-size: var(--fc-text-xs);
  color: var(--fc-type-citation-text);
  text-align: right;
}

.fc-sample-word { font-size: var(--fc-text-xl); font-weight: bold; }

.fc-sample-ipa {
  font-size: var(--fc-text-xs);
  color: var(--fc-text-muted);
}

.fc-sample-gloss {
  font-size: var(--fc-text-sm);
  color: var(--fc-blue);
}

/* The specimen's Écouter control is a NON-button <span>: nothing on this page
   plays audio, and a real <button> here would be a control that does nothing
   when pressed — worse for a screen-reader user than plain text. */
.fc-sample-listen {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fc-text-xs);
  color: var(--fc-text-muted);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-pill);
  padding: 0.2rem 0.7rem;
}

/* ── Explore band ────────────────────────────────────────────────────────── */

.fc-explore { padding: 3.5rem 0; }

.fc-section-title {
  font-size: var(--fc-text-h2);
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}

/* Category tile. The icon slot holds the existing card-type PNG rather than
   the mockup's typographic glyph — the artwork already exists and carries more
   identity than a letterform. */
.fc-cat-card {
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow);
  padding: 1.35rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* --fc-shadow-lift finally has a consumer — it was declared in 2a for exactly
   this and sat unused through steps 2 and 3. */
.fc-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fc-shadow-lift);
}

.fc-cat-icon {
  width: 3.875rem;
  height: 3.875rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.fc-cat-label {
  font-size: var(--fc-text-xs);
  font-weight: bold;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.fc-cat-desc {
  color: var(--fc-text-muted);
  font-size: var(--fc-text-sm);
  line-height: 1.4;
  margin: 0;
}

.fc-cat-arrow {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fc-white);
  flex: 0 0 auto;
  margin-left: auto;
}

/* Per-type colouring: label takes the TEXT variant, arrow fill the plain one. */
.fc-cat-citation .fc-cat-label    { color: var(--fc-type-citation-text); }
.fc-cat-citation .fc-cat-arrow    { background-color: var(--fc-type-citation); }
.fc-cat-vocabulaire .fc-cat-label { color: var(--fc-type-vocabulaire-text); }
.fc-cat-vocabulaire .fc-cat-arrow { background-color: var(--fc-type-vocabulaire); }
.fc-cat-francais .fc-cat-label    { color: var(--fc-type-francais-text); }
.fc-cat-francais .fc-cat-arrow    { background-color: var(--fc-type-francais); }
.fc-cat-france .fc-cat-label      { color: var(--fc-type-france-text); }
.fc-cat-france .fc-cat-arrow      { background-color: var(--fc-type-france); }

/* Visitors get the same tile without a link, so the four types stay visible
   and the page does not change shape on sign-in — only the hover lift and the
   pointer go away. */
.fc-cat-card-static { cursor: default; }
.fc-cat-card-static:hover {
  transform: none;
  box-shadow: var(--fc-shadow);
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */

.fc-trust {
  background-color: var(--fc-bg-page);
  border-top: 1px solid var(--fc-line);
  padding: 2.5rem 0;
}

.fc-trust-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* Vertical rules between columns, suppressed on the first of each row so a
   wrapped grid never shows a leading divider. */
.fc-trust-col + .fc-trust-col .fc-trust-item {
  border-left: 1px solid var(--fc-line);
  padding-left: 1.5rem;
}

.fc-trust-icon { font-size: var(--fc-text-xl); }

.fc-trust-title {
  font-size: var(--fc-text-sm);
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.fc-trust-desc {
  color: var(--fc-text-muted);
  font-size: var(--fc-text-xs);
  line-height: 1.45;
  margin: 0;
}

/* ── Card-page bands (redesign step 4b) ──────────────────────────────────────
   The four card pages share cards/_card_page, so this section serves all of
   them; only the type pill and the BOX accent vary. Same band idea as 4a —
   a tinted head, then the controls, then the BOX on the page ground. */

.fc-page-head {
  background: linear-gradient(180deg, var(--fc-lavender) 0%, var(--fc-bg-page) 100%);
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.fc-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--fc-radius-pill);
  font-size: var(--fc-text-xs);
  font-weight: bold;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.85rem;
}

/* The h1 keeps --fc-red for its red half. At display size (38–55px) the 4.00:1
   it measures on the lavender band clears the 3:1 large-text bar; only the
   13px brand descriptor on Accueil needed the darker --fc-red-text. */
.fc-page-lede {
  color: var(--fc-text-muted);
  font-size: var(--fc-text-md);
  line-height: 1.6;
  max-width: 46rem;
  margin: 1rem auto 0;
}

/* ── Controls row ────────────────────────────────────────────────────────────
   The ☰ menus and LANCER now sit on ONE row instead of LANCER living below in
   the scaffold. Centred, wrapping to a column on narrow screens so LANCER is
   never squeezed against a selector.

   Two kinds of control share this row and they do NOT behave alike:
     · the ☰ card menus are CLIENT-side — they arm a hidden input and echo a
       label, no request (cards/_selection_menu);
     · Choix Niveau is a real PATCH that persists to the user and deliberately
       reloads the page (PreferencesController#level).
   They are styled identically on purpose — both are "pick a value" — but do
   not merge their markup. */
.fc-controls { padding: 2rem 0 0.5rem; }

.fc-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem 3rem;
}

.fc-select { text-align: center; }

.fc-select-label {
  display: block;
  color: var(--fc-text-muted);
  font-size: var(--fc-text-xs);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.fc-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line-strong);
  border-radius: var(--fc-radius-pill);
  box-shadow: var(--fc-shadow);
  color: var(--fc-ink);
  font-size: var(--fc-text-md);
  font-weight: bold;
  padding: 0.6rem 1.35rem;
  min-width: 15rem;
  text-decoration: none;
}

.fc-select-btn:hover {
  border-color: var(--fc-blue);
  color: var(--fc-blue);
}

/* Visitors see the menus but cannot change a persisted preference (§5). Muted
   and inert, rather than hidden, so the page does not change shape on sign-in. */
.fc-select-btn.fc-nav-disabled {
  color: var(--fc-text-muted);
  pointer-events: none;
  box-shadow: none;
}

.fc-select-caret { color: var(--fc-text-muted); }

.fc-select-hint {
  color: var(--fc-text-muted);
  font-size: var(--fc-text-xs);
  line-height: 1.5;
  max-width: 22rem;
  margin: 0.5rem auto 0;
}

.fc-lancer-wrap { text-align: center; }

.fc-box-section { padding: 1.5rem 0 0.5rem; }

/* ── Audio voice picker (2026-08-27) ─────────────────────────────────────────
   One line directly above the BOX: the word "Audio", then two small radios with
   their labels to the right. Centred over the card (2026-08-27).

   The width cap stays even though the content is centred: the BOX is a fixed
   600px centred by .mx-auto, so capping this line to the same width keeps the
   two centred on the same axis at every viewport. Centring inside a
   full-container line would drift out of alignment as the container grows. */
.fc-audio-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 600px;
  max-width: 100%;
  margin: 0 auto 0.6rem;
}

.fc-audio-label {
  color: var(--fc-text-muted);
  font-size: var(--fc-text-xs);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fc-audio-options {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* The <label> wraps its radio, so the text is part of the hit target. */
.fc-audio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: var(--fc-text-sm);
  margin: 0;
}

/* "Small" per the request, but not below 14px: a radio is a UI component and
   shrinking it past this makes it hard to hit accurately on a touch screen.
   The wrapping <label> is what actually gives it a comfortable target. */
.fc-audio-radio {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  accent-color: var(--fc-blue);
  flex: 0 0 auto;
}

/* hamburger_item wraps the label in .fc-menu-item, which is a space-between
   flex row built for dropdown rows. Inline here it would stretch and push the
   translation to the far right, so it collapses to its content. */
.fc-audio-option .fc-menu-item {
  display: inline-flex;
  gap: 0.35rem;
}

/* Wrapped rows stay centred too — justify-content above applies per line. */
@media (max-width: 575.98px) {
  .fc-audio-line {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }
}

/* ── Static / auth page bodies (redesign steps 4c–4d) ────────────────────────
   The band below shared/_page_head. Replaces the `py-4` that each of eighteen
   views carried on its own container, so the gap under every page head is one
   value rather than eighteen. */
.fc-page-body { padding: 2.5rem 0 3.5rem; }

/* White panel behind a form or a block of prose, so auth pages and the tabbed
   footer pages read as a sheet on the page ground rather than text floating on
   it. Same treatment as .fc-box, one radius tier down — a form is not a card. */
.fc-page-panel {
  background-color: var(--fc-bg-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow);
  padding: 2rem;
}

/* Auth forms are width: fit-content, so their panel must shrink to them rather
   than stretching the full container — otherwise a two-field log-in sits in a
   1140px-wide sheet. Below sm the form goes full-width (see the auth stacking
   query), and the panel follows it. */
.fc-page-panel-narrow {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 575.98px) {
  .fc-page-panel { padding: 1.25rem; }
  .fc-page-panel-narrow { width: 100%; }
}

/* ── Button modifiers for the landing bands ──────────────────────────────────
   These sit on top of .fc-btn, which already supplies the pill radius, bold
   weight and white text. .fc-btn-ghost has to undo two of those. */
.fc-btn-primary {
  background-color: var(--fc-blue);
  box-shadow: 0 6px 18px rgba(32, 72, 232, 0.28);
}

.fc-btn-primary:hover { background-color: var(--fc-blue-dark); }

.fc-btn-ghost {
  background-color: var(--fc-bg-card);
  color: var(--fc-ink);              /* .fc-btn sets white — must be undone */
  border: 1px solid var(--fc-line-strong);  /* .fc-btn sets border: 0       */
  box-shadow: var(--fc-shadow);
}

.fc-btn-ghost:hover { color: var(--fc-blue); }

.fc-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-size: var(--fc-text-md);
}

/* Applied to a button while its request is in flight */
.pulsing {
  animation: fc-pulse 1.2s ease-in-out infinite;
}

@keyframes fc-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.35; }
  100% { opacity: 1; }
}

/* Applied to the Cartes-restantes badge when the counter is ≤ 10 */
.flashing {
  animation: fc-flash 1s step-start infinite;
}

@keyframes fc-flash {
  0%, 100% { visibility: visible; }
  50%      { visibility: hidden; }
}

/* ── NavBar (redesign step 5: a WHITE bar with dark text) ────────────────────
   Every foreground in here moved when the bar went light — see the token block
   at the top for the seven that failed on white. The FOOTER stayed dark, which
   is why --fc-link / --fc-white / --fc-red-on-dark still exist and still hold
   dark-ground values: they serve the footer now, not this bar. */

.fc-navbar {
  background-color: var(--fc-bg-navbar);
  border-bottom: 1px solid var(--fc-line);
  padding-block: 0.6rem;
}

/* Toggler on a LIGHT bar: dark strokes, not the white ones the navy bar used. */
.fc-navbar .navbar-toggler {
  border-color: var(--fc-line-strong);
}

.fc-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(23,32,58,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Collapsed (hamburger) menu — stack both nav lists into one left-aligned
   column instead of side-by-side columns. Only applies below the xl expand
   breakpoint; the horizontal layout at ≥1200px is unaffected. */
@media (max-width: 1199.98px) {
  .fc-navbar .navbar-collapse {
    flex-direction: column;
    align-items: flex-start;
  }

  .fc-navbar .navbar-nav {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  /* the dropdown items carry .text-center for the horizontal bar — left-align
     them in the stacked menu (overrides the utility's !important) */
  .fc-navbar .navbar-nav .text-center {
    text-align: left !important;
  }
}

.fc-navbar .navbar-brand,
.fc-navbar .nav-link {
  color: var(--fc-ink);
  font-size: var(--fc-text-md);
  font-weight: 600;
}

.fc-navbar .nav-link:hover,
.fc-navbar .nav-link:focus,
.fc-navbar .navbar-brand:hover {
  color: var(--fc-blue);
}

/* The page you are on. A weight change alone would be too quiet on a bar this
   plain, and colour alone is never the only cue — this is both. */
.fc-navbar .nav-link.fc-nav-active {
  color: var(--fc-blue);
  border-bottom: 2px solid var(--fc-blue);
}

/* Disabled / clicked links (visitor mode, generation in progress) */
.fc-navbar .nav-link.fc-nav-disabled,
.fc-navbar .dropdown-item.fc-nav-disabled {
  color: var(--fc-disabled);
  pointer-events: none;
}

/* Hamburger list items: French regular + En/Es italic to the right */
.fc-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--fc-text-sm);
}

.fc-menu-secondary {
  font-style: italic;
}

/* Current selection under a menu title. Was --fc-selection amber, which is
   1.41:1 on white — it only ever worked because the bar was dark. */
.fc-selection-label {
  display: block;
  color: var(--fc-text-muted);
  font-size: var(--fc-text-sm);
}

.fc-tutoriel-body { white-space: pre-line; }

.fc-lang-link-text { color: var(--fc-blue); }

/* ── Locale switcher (🌐 FR ⌄) ────────────────────────────────────────────── */

.fc-lang-link {
  color: var(--fc-ink);
  text-decoration: none;
  font-size: var(--fc-text-md);
}

.fc-lang-link.fc-lang-active {
  color: var(--fc-blue);
  font-weight: bold;
}

.fc-lang-separator {
  color: var(--fc-line-strong);
}

/* The 👤 account menu is GONE (2026-08-27) and its rules with it —
   .fc-account-toggle, .fc-account-menu, .fc-account-section. It was introduced
   in step 5 to hold Audio, Admin, Supprimer le compte and Se déconnecter;
   Audio moved to the card pages and Admin to a top-level nav link, leaving two
   items behind a click. Those two are plain nav links now. */

/* ── Cartes restantes ────────────────────────────────────────────────────────
   Stays in the bar and stays visible — it flashes at ≤10 and reddens at 0, and
   §11's hard wall is only fair because the user watched it coming. Now a pill
   so it reads as a status chip rather than another nav link. */
.fc-cards-restantes {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--fc-ink);
  background-color: var(--fc-bg-page);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-pill);
  font-size: var(--fc-text-sm);
  padding: 0.3rem 0.85rem;
}

.fc-cards-count {
  color: var(--fc-blue);
  font-weight: bold;
}

/* Zero cards (§15): the whole badge goes bold red. --fc-red-text, NOT
   --fc-red-on-dark — that one is 2.81:1 on white and belongs to the footer. */
.fc-cards-restantes.fc-cards-zero,
.fc-cards-zero .fc-cards-count {
  color: var(--fc-red-text);
  font-weight: bold;
}

.fc-cards-restantes.fc-cards-zero {
  border-color: var(--fc-red-text);
  background-color: rgba(232, 32, 36, 0.06);
}

/* Admin link — italic silver, admins only. The .fc-account-menu half of this
   selector was dropped on 2026-08-27 when Admin moved out of the 👤 menu and
   back to a top-level nav link. */
.fc-navbar .nav-link.fc-admin-link {
  color: var(--fc-admin-link);
  font-style: italic;
}

/* Compact number field for the admin Duplicate Count Limit setting (~half width) */
.fc-setting-number {
  width: 5rem;
}

/* ── Footer — MATCHES THE NAVBAR (2026-08-26) ────────────────────────────────
   Step 5 kept this dark and split --fc-bg-footer off precisely so it could
   stay dark while the bar went white. That was reversed by request: the two
   pieces of chrome now read as one, bracketing the page.

   --fc-bg-footer is KEPT as its own token rather than folded into
   --fc-bg-navbar, so re-darkening the footer is a one-line edit here and not a
   re-derivation of every foreground below. Its previous value is #17203A.

   Type mirrors .fc-navbar .nav-link exactly — same size, same weight, same ink,
   same blue hover — because "matches the navbar" should mean the links look
   like navbar links, not merely that the ground is the same colour. */

.fc-footer {
  background-color: var(--fc-bg-footer); /* was #17203A ink navy */
  color: var(--fc-ink);                  /* was --fc-white       */
  border-top: 1px solid var(--fc-line);  /* mirrors the bar's border-bottom */
}

.fc-footer a {
  color: var(--fc-ink);                  /* was --fc-link, 1.85:1 on white */
  font-size: var(--fc-text-md);
  font-weight: 600;
  text-decoration: none;
}

.fc-footer a:hover,
.fc-footer a:focus {
  color: var(--fc-blue);
}

/* The · between links. Muted like .fc-lang-separator in the bar, so the
   punctuation does not read at the same weight as the links it divides. */
.fc-footer-sep {
  color: var(--fc-line-strong);
}

/* Secondary, not body: a copyright line is the least important text on the
   page and --fc-ink would give it the same emphasis as the links above it. */
.fc-footer .fc-copyright {
  color: var(--fc-text-muted);           /* was --fc-white */
  font-size: var(--fc-text-sm);
}

/* ── Bilingual chrome text (selected locale + smaller italic French line) ─── */

.bilingual-secondary {
  display: block;
  font-size: 0.90em;
  font-style: italic;
}

.hyphenate {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ── Responsive (below md) ─────────────────────────────────────────────── */

/* Step 3 removed the .fc-title (38px) and .fc-subtitle (24px) overrides that
   used to live here. They were a single step at 768px with nothing in between,
   so a 55px title overflowed every width in the gap; --fc-text-display and
   --fc-text-h2 now ramp continuously and reach those same floors on their own.
   The .fc-box width override stays — box width is structure, not type. */
@media (max-width: 767.98px) {
  .fc-box {
    width: 100%;
    max-width: 600px;
  }

  /* Step 4a: the fan is a desktop conceit. Below md the three specimens
     un-rotate and stack, because overlapping rotated cards on a narrow screen
     hide each other's text. The hover transform is dropped with them — there
     is no hover on touch, and leaving it would make a tap look like a bug. */
  .fc-fan {
    flex-direction: column;
    gap: 1rem;
  }

  .fc-sample-1,
  .fc-sample-2,
  .fc-sample-3 {
    transform: none;
    margin: 0;
    width: 100%;
    max-width: 20rem;
  }

  .fc-sample:hover { transform: none; }

  /* The dividers are vertical rules between columns; once the grid is one
     column they would draw a line down the left of every item. */
  .fc-trust-col + .fc-trust-col .fc-trust-item {
    border-left: 0;
    padding-left: 0;
  }
}

/* ── Page-width caps (opt-in) ────────────────────────────────────────────
   Bootstrap's .container-md/-lg/-xl only make the container FLUID *below*
   that breakpoint; *above* it they still grow to the full .container
   max-widths (up to 1320px at ≥1400px), so they do NOT narrow a wide page.
   To actually cap page width, add one of these alongside .container (values
   mirror the Bootstrap breakpoint container widths). Loaded after Bootstrap,
   so these win over the responsive .container max-widths. */
.fc-maxw-md  { max-width: 720px; }
.fc-maxw-lg  { max-width: 960px; }
.fc-maxw-xl  { max-width: 1140px; }
.fc-maxw-xxl { max-width: 1320px; }