/* css/console.css
   The platform console (Greg, 18.10.2026): the three operating menus
   (Restaurants, Finances, Technique) leave Material 3 for a sober, dense
   back-office look. Ported from the validated mock-up
   Docs/claude/maquettes/console-plateforme-2026-10-18.html: same rules, same
   values, same behaviour. Two adaptations only, both for the sake of living
   next to the rest of the site:
     - every class and every token carries a "cs-" prefix. The site already
       styles .btn, .sub, .toast and .brand with !important rules under
       body.md-ui, and names its own tokens --bg, --line, --gold: unprefixed,
       the console would inherit half of them;
     - the light theme follows the site's own switch (js/theme.js writes
       data-theme="ivory" on <html>, dark is the default without attribute),
       not the system preference the mock-up read.
   Fonts: the mock-up loaded IBM Plex from Google Fonts. The site loads no
   third-party font (none of its pages does, and the privacy text names no
   such transfer). Since 25.10.2026 (Greg, for the platform and the
   Edition, which share these sheets) the running text is Atkinson
   Hyperlegible Next, served by the site (fonts/atkinson, SIL OFL, its
   licence beside it); the values too (--cs-mono, with tabular figures:
   Greg did not want the monospace look; a monospace face may come later
   behind the same variable). The brand of the bar is the logo's face,
   Alethia Next (css/variables.css declares it). */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/atkinson/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/atkinson/AtkinsonHyperlegibleNext-Medium.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/atkinson/AtkinsonHyperlegibleNext-SemiBold.woff2) format("woff2"); }

/* The colours (Greg, 25.10.2026, boards "porcelaine" and "graphite doux",
   chosen on the Edition, then for every page that wears the console: one
   set of tokens for the platform and the Edition). Dark first (the site's
   default), then ivory.
     --cs-ground  the page's ground behind the bars, the menu and the card
     --cs-bar     the top bar and the band of the tabs
     --cs-panel   the card, the boxes; --cs-panel-2 a button's fill, a hover;
     --cs-sel     the selected item; --cs-bg a field's fill
     --cs-line-grad  every line, separator and border: a metallic gold
                  running along it, each stop at 62 % ("plus fin"); --cs-line
                  and --cs-line-2 are that gold, solid, where a gradient
                  cannot be drawn (a table's collapsed borders)
     --cs-lw / --cs-lwn  its width: 1 px, a true hairline (0.5 px) on a
                  high-density screen (the number is for border-image-width)
     --cs-sheen   the solid gold: the active tab's line, a gauge, a switch,
                  the primary button, its text dark (--cs-gold-ink)
   The tertiary texts were lifted to 4.5:1 at least: #807667 on the
   porcelain was 4.2:1 (#776d5f: 4.6:1), #8e8a84 on the graphite card 4.06:1
   (#9a968f: 4.7:1). */
:root {
  --cs-ground: #222120; --cs-ground-solid: #222120; --cs-bar: #282725;
  --cs-bg: #252422; --cs-panel: #2d2c2a; --cs-panel-2: #383633; --cs-sel: #383633;
  --cs-line: rgba(246, 200, 92, .36); --cs-line-2: rgba(246, 200, 92, .5);
  --cs-line-grad: linear-gradient(100deg, rgba(143, 106, 40, .62) 0%, rgba(247, 220, 142, .62) 22%, rgba(201, 154, 62, .62) 45%, rgba(255, 231, 163, .62) 68%, rgba(143, 106, 40, .62) 100%);
  --cs-lw: 1px; --cs-lwn: 1;
  --cs-sheen: linear-gradient(135deg, #ffe7a3 0%, #f0c35a 38%, #c99a3e 72%, #987331 100%);
  --cs-fg: #e4e1dc; --cs-fg-2: #bdb9b2; --cs-fg-3: #9a968f;
  --cs-gold: #d7b56b; --cs-gold-ink: #1f1b16;
  --cs-ok: #5fbf8a; --cs-ok-bg: #173226; --cs-warn: #e5a94a; --cs-warn-bg: #3a2c12; --cs-crit: #ef6b62; --cs-crit-bg: #3d1a18;
  --cs-info: #7aa7d9; --cs-info-bg: #182a3d;
  --cs-scrim: rgba(0, 0, 0, .35); --cs-scrim-2: rgba(0, 0, 0, .55); --cs-shadow: rgba(0, 0, 0, .25);
  --cs-sans: "Atkinson Hyperlegible Next", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --cs-mono: "Atkinson Hyperlegible Next", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --cs-scheme: dark;
}
:root[data-theme="ivory"], :root[data-theme="light"] {
  --cs-ground: radial-gradient(700px 380px at 20% 0%, #ffffff, transparent 65%), linear-gradient(180deg, #fdfcfa, #f6f4f0); --cs-ground-solid: #f6f4f0; --cs-bar: #ffffff;
  --cs-bg: #fffdfb; --cs-panel: #ffffff; --cs-panel-2: #f1ece3; --cs-sel: #f1ece3;
  --cs-line: rgba(196, 146, 24, .42); --cs-line-2: rgba(196, 146, 24, .55);
  --cs-line-grad: linear-gradient(100deg, rgba(184, 135, 42, .62) 0%, rgba(240, 207, 115, .62) 22%, rgba(201, 154, 46, .62) 45%, rgba(246, 220, 140, .62) 68%, rgba(167, 122, 32, .62) 100%);
  --cs-sheen: linear-gradient(135deg, #f0cf73 0%, #d4a537 40%, #a77a20 100%);
  --cs-fg: #1f1b16; --cs-fg-2: #4e4539; --cs-fg-3: #776d5f;
  --cs-gold: #8a6620; --cs-gold-ink: #1f1b16;
  --cs-ok: #1f8a52; --cs-ok-bg: #e3f4ea; --cs-warn: #9a6200; --cs-warn-bg: #fdf1dc; --cs-crit: #c0362c; --cs-crit-bg: #fde6e4;
  --cs-info: #2f6aa8; --cs-info-bg: #e5eef8;
  --cs-scheme: light;
}
@media (min-resolution: 2dppx) { :root { --cs-lw: .5px; --cs-lwn: .5; } }

/* The page that wears the console: its main area takes the console's ground
   instead of the Material surface, edge to edge (porcelain or graphite,
   fixed to the window). */
html:has(> body.md-ui.cs-page) { background: var(--cs-ground-solid) !important; }
body.md-ui.cs-page, body.md-ui.cs-page .app, body.md-ui.cs-page .main { background: var(--cs-ground) !important; background-attachment: fixed !important; }
body.md-ui.cs-page .main { padding-left: 0; padding-right: 0; }
body.md-ui.cs-page .main .page { padding: 0; }

.cs, .cs-drawer, .cs-dw-ov, .cs-toast, .cs-ov { color-scheme: var(--cs-scheme); }
.cs *, .cs-drawer *, .cs-ov * { box-sizing: border-box; }
.cs, .cs-drawer, .cs-ov, .cs-toast { background: var(--cs-bg); color: var(--cs-fg); font: 400 13px/1.45 var(--cs-sans); }
/* The console's page lies on the ground (the main area's). */
.cs { background: none; }
/* Figures line up in columns (the values share the running face); set on
   every element, since a rule's font shorthand resets it. */
.cs, .cs *, .cs-drawer, .cs-drawer *, .cs-ov, .cs-ov *, .cs-toast, .pf-mdw, .pf-mdw *, .cs-rv-ov, .cs-rv-ov * { font-variant-numeric: tabular-nums; }
.cs { min-height: 100%; min-width: 0; max-width: 100%; }
/* The page is a grid or flex box in the site's sheets: without this, its
   widest table would set the width of the whole page on a phone. */
body.md-ui.cs-page .main, body.md-ui.cs-page .main .page { min-width: 0; max-width: 100%; }
.cs-wrap { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 48px; }
.cs-num, .cs td.n, .cs-k-val, .cs-mono { font-family: var(--cs-mono); font-variant-numeric: tabular-nums; }

/* Top bar */
.cs-top { position: sticky; top: var(--md-topbar-h, 0px); z-index: 20; background: var(--cs-bar); border-bottom: 1px solid var(--cs-line); }
.cs-top .cs-wrap { display: flex; align-items: center; gap: 18px; padding-block: 0; min-height: 48px; flex-wrap: wrap; }
.cs-brand { font-weight: 700; letter-spacing: .14em; font-size: 12px; white-space: nowrap; }
.cs-brand b { color: var(--cs-gold); font-weight: 700; }
.cs-tabs { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
.cs-tab { appearance: none; border: 0; background: none; color: var(--cs-fg-2); font: 500 13px var(--cs-sans); padding: 14px 12px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.cs-tab:hover { color: var(--cs-fg); }
.cs-tab[aria-selected="true"], .cs-tab[aria-current="page"] { color: var(--cs-fg); border-bottom-color: var(--cs-gold); }
.cs-tab .cs-lock { font-size: 10px; color: var(--cs-fg-3); margin-left: 6px; border: 1px solid var(--cs-line-2); padding: 0 4px; border-radius: 3px; }
.cs-who { display: flex; gap: 6px; align-items: center; color: var(--cs-fg-3); font-size: 12px; }
.cs-seg { display: inline-flex; border: 1px solid var(--cs-line-2); border-radius: 4px; overflow: hidden; }
.cs-seg button { appearance: none; border: 0; background: none; color: var(--cs-fg-2); font: 500 12px var(--cs-sans); padding: 4px 9px; cursor: pointer; }
.cs-seg button[aria-pressed="true"] { background: var(--cs-panel-2); color: var(--cs-fg); }

/* Page head and glance strip */
.cs-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 22px 0 12px; }
.cs-head h1 { font-size: 20px; font-weight: 600; margin: 0; text-wrap: balance; color: var(--cs-fg); font-family: var(--cs-sans); line-height: 1.3; }
.cs-head p { margin: 0; color: var(--cs-fg-2); }
.cs-head .cs-when { margin-left: auto; color: var(--cs-fg-3); font-size: 12px; }
.cs-glance { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--cs-line); background: var(--cs-panel); border-radius: 6px; }
.cs-k { padding: 12px 14px; border-right: 1px solid var(--cs-line); min-width: 0; cursor: pointer; position: relative; text-align: left; background: none; border-top: 0; border-bottom: 0; border-left: 0; color: inherit; font: inherit; }
.cs-k:last-child { border-right: 0; }
.cs-k:hover { background: var(--cs-panel-2); }
.cs-k:focus-visible, .cs button:focus-visible, .cs a:focus-visible, .cs input:focus-visible, .cs select:focus-visible,
.cs-drawer button:focus-visible, .cs-drawer input:focus-visible, .cs-drawer select:focus-visible, .cs-drawer a:focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 1px; }
.cs-k-lbl { color: var(--cs-fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 6px; align-items: center; }
.cs-k-val { font-size: 22px; font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-k-sub { color: var(--cs-fg-2); font-size: 12px; margin-top: 2px; }
.cs-k svg { display: block; margin-top: 6px; width: 100%; height: 22px; }
.cs-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.cs-s-ok { color: var(--cs-ok); } .cs-s-warn { color: var(--cs-warn); } .cs-s-crit { color: var(--cs-crit); } .cs-s-info { color: var(--cs-info); }
.cs-bg-ok { background: var(--cs-ok); } .cs-bg-warn { background: var(--cs-warn); } .cs-bg-crit { background: var(--cs-crit); } .cs-bg-info { background: var(--cs-info); } .cs-bg-mute { background: var(--cs-fg-3); }
.cs-k[data-state="crit"]::before, .cs-k[data-state="warn"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.cs-k[data-state="crit"]::before { background: var(--cs-crit); } .cs-k[data-state="warn"]::before { background: var(--cs-warn); }

/* Sections */
section.cs-sec { margin-top: 26px; scroll-margin-top: calc(var(--md-topbar-h, 0px) + 56px); }
.cs-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cs-sec-h h2 { font-size: 14px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-fg); font-family: var(--cs-sans); }
.cs-sec-h p { margin: 0; color: var(--cs-fg-3); font-size: 12px; }
.cs-sec-h .cs-act { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cs-new { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-gold); border: 1px solid var(--cs-gold); border-radius: 3px; padding: 0 5px; }
.cs-box { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 6px; min-width: 0; }
.cs-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.cs-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cs-stack { display: grid; gap: 12px; margin-top: 12px; }
.cs-pad { padding: 12px 14px; }
.cs-box h3, .cs-h3 { font-size: 12.5px; margin: 0 0 8px; font-weight: 600; color: var(--cs-fg-2); font-family: var(--cs-sans); }
.cs-box p { margin: 10px 0 0; }

/* Tables */
.cs-tw { overflow-x: auto; }
.cs table, .cs-drawer table { width: 100%; border-collapse: collapse; }
.cs th, .cs-drawer th { text-align: left; font-weight: 500; color: var(--cs-fg-3); font-size: 11.5px; padding: 7px 10px; border-bottom: 1px solid var(--cs-line); white-space: nowrap; }
.cs td, .cs-drawer td { padding: 7px 10px; border-bottom: 1px solid var(--cs-line); vertical-align: middle; }
.cs tr:last-child td, .cs-drawer tr:last-child td { border-bottom: 0; }
.cs tbody tr:hover td, .cs-drawer tbody tr:hover td { background: var(--cs-panel-2); }
.cs td.n, .cs th.n, .cs-drawer td.n, .cs-drawer th.n { text-align: right; }
.cs-sub, .cs td .cs-sub { color: var(--cs-fg-3); font-size: 11.5px; }
.cs-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.cs-p-ok { background: var(--cs-ok-bg); color: var(--cs-ok); } .cs-p-warn { background: var(--cs-warn-bg); color: var(--cs-warn); } .cs-p-crit { background: var(--cs-crit-bg); color: var(--cs-crit); } .cs-p-info { background: var(--cs-info-bg); color: var(--cs-info); } .cs-p-mute { background: var(--cs-panel-2); color: var(--cs-fg-2); border: 1px solid var(--cs-line); }
.cs-steps { display: inline-flex; gap: 3px; }
.cs-st { width: 18px; height: 6px; border-radius: 2px; background: var(--cs-line-2); }
.cs-st.done { background: var(--cs-ok); } .cs-st.now { background: var(--cs-gold); }
.cs-score { display: inline-flex; align-items: center; gap: 6px; }
.cs-bar { width: 54px; height: 5px; background: var(--cs-line-2); border-radius: 3px; overflow: hidden; }
.cs-bar i { display: block; height: 100%; }

/* Buttons and forms. The :not(#cs-none) adds an id's weight to a rule that
   matches no id: the site's own field rules reach (0,4,1) with !important
   on the background (theme.css), and a console field must still look like
   the mock-up's. */
.cs-btn:not(#cs-none) { appearance: none; border: 1px solid var(--cs-line-2); background: var(--cs-panel-2); color: var(--cs-fg); font: 500 12px var(--cs-sans); padding: 5px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; height: auto; line-height: normal; letter-spacing: normal; text-transform: none; }
.cs-btn:not(#cs-none):hover { border-color: var(--cs-fg-3); }
.cs-btn.pri:not(#cs-none) { background: var(--cs-gold); color: var(--cs-gold-ink); border-color: var(--cs-gold); }
.cs-btn.sm:not(#cs-none) { padding: 3px 8px; font-size: 11.5px; }
.cs-btn:not(#cs-none):disabled { opacity: .5; cursor: not-allowed; }
.cs-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cs-chip:not(#cs-none) { appearance: none; border: 1px solid var(--cs-line-2); background: none; color: var(--cs-fg-2); font: 500 12px var(--cs-sans); padding: 3px 9px; border-radius: 12px; cursor: pointer; }
.cs-chip[aria-pressed="true"]:not(#cs-none) { color: var(--cs-fg); border-color: var(--cs-gold); background: var(--cs-panel-2); }
.cs input[type="search"]:not(#cs-none), .cs input[type="text"]:not(#cs-none), .cs input[type="number"]:not(#cs-none), .cs input[type="date"]:not(#cs-none), .cs input[type="password"]:not(#cs-none), .cs select:not(#cs-none), .cs textarea:not(#cs-none),
.cs-drawer input[type="search"]:not(#cs-none), .cs-drawer input[type="text"]:not(#cs-none), .cs-drawer input[type="number"]:not(#cs-none), .cs-drawer input[type="date"]:not(#cs-none), .cs-drawer input[type="password"]:not(#cs-none), .cs-drawer select:not(#cs-none), .cs-drawer textarea:not(#cs-none),
.cs-ov input[type="text"]:not(#cs-none), .cs-ov input[type="number"]:not(#cs-none), .cs-ov input[type="date"]:not(#cs-none), .cs-ov input[type="password"]:not(#cs-none), .cs-ov select:not(#cs-none), .cs-ov textarea:not(#cs-none),
.cs input[type="time"]:not(#cs-none), .cs-drawer input[type="time"]:not(#cs-none), .cs-ov input[type="time"]:not(#cs-none) {
  background: var(--cs-bg) !important; color: var(--cs-fg) !important; border: 1px solid var(--cs-line-2) !important; border-radius: 4px !important; font: 400 13px var(--cs-sans) !important; padding: 5px 8px !important; min-width: 0; width: auto; min-height: 0; height: auto; box-shadow: none !important; }
.cs input:not(#cs-none):disabled, .cs-drawer input:not(#cs-none):disabled, .cs-drawer select:not(#cs-none):disabled { opacity: .55; cursor: not-allowed; }
.cs input[type="checkbox"], .cs-drawer input[type="checkbox"] { accent-color: var(--cs-gold); }
.cs-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--cs-line); }
.cs-toolbar strong { font-size: 12.5px; }
.cs-toolbar .cs-chips, .cs-toolbar .cs-push { margin-left: auto; }
.cs-toolbar input[type="search"]:not(#cs-none) { width: 220px; max-width: 100%; }
.cs-phone { font-family: var(--cs-mono); font-size: 12px; user-select: all; }

/* Charts */
.cs-chart { width: 100%; height: 220px; display: block; }
.cs-chart text { fill: var(--cs-fg-3); font: 400 10.5px var(--cs-mono); }
.cs-chart .grid line { stroke: var(--cs-line); }
/* An axis that goes below zero (Finances, a month in loss): the zero line
   stands out from the grid, the negative labels take the colour of a loss. */
.cs-chart .grid line.cs-zero { stroke: var(--cs-fg-3); stroke-width: 1.2; }
.cs-chart text.cs-neg { fill: var(--cs-crit); }
.cs-legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--cs-fg-2); font-size: 12px; }
.cs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cs-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.cs-kv dt { color: var(--cs-fg-2); } .cs-kv dd { margin: 0; text-align: right; font-family: var(--cs-mono); }
.cs-meter { height: 8px; background: var(--cs-line-2); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.cs-meter i { display: block; height: 100%; background: var(--cs-gold); }

/* Modal */
.cs-ov { position: fixed; inset: 0; background: var(--cs-scrim-2); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 16px; }
.cs-ov[hidden] { display: none; }
.cs-dlg { background: var(--cs-panel); border: 1px solid var(--cs-line-2); border-radius: 8px; width: min(520px, 100%); max-height: 90vh; overflow: auto; }
.cs-dlg header { padding: 14px 16px; border-bottom: 1px solid var(--cs-line); display: flex; align-items: center; }
.cs-dlg header h3 { margin: 0; font-size: 15px; }
.cs-dlg header .cs-btn { margin-left: auto; }
.cs-dlg form { padding: 14px 16px; display: grid; gap: 10px; }
.cs-dlg label, .cs-field { display: grid; gap: 4px; color: var(--cs-fg-2); font-size: 12px; }
.cs-dlg .cs-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-dlg footer { display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px 14px; }
.cs-hint { color: var(--cs-fg-3); font-size: 11.5px; margin: 0; }
.cs-toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--cs-panel-2); border: 1px solid var(--cs-line-2); padding: 9px 14px; border-radius: 6px; z-index: 1100; max-width: min(460px, calc(100vw - 32px)); }
.cs-toast[hidden] { display: none; }
.cs-toast.is-crit { border-color: var(--cs-crit); color: var(--cs-crit); }

/* While a panel or a window is open, the page behind does not scroll (Greg,
   18.10.2026); the gutter stays reserved so nothing jumps sideways. */
html { scrollbar-gutter: stable; }
/* The root only: hiding the body's overflow as well made the body its own
   scroll box, and the window jumped back to the top on every opening. */
html.cs-locked { overflow: hidden; }
.cs-dw-b, .cs-dlg { overscroll-behavior: contain; }
/* Side panel: what a row opens. The list stays visible on the left. Above
   the Material top bar and rail (z-index 500), below the site's windows and
   confirmations, which it opens. */
.cs-dw-ov { position: fixed; inset: 0; background: var(--cs-scrim); z-index: 900; }
.cs-dw-ov[hidden], .cs-drawer[hidden] { display: none; }
.cs-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--cs-panel); border-left: 1px solid var(--cs-line-2); z-index: 901; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); box-shadow: -12px 0 30px var(--cs-shadow); }
.cs-dw-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cs-line); }
.cs-dw-h h3 { margin: 0; font-size: 15px; color: var(--cs-fg); font-family: var(--cs-sans); }
.cs-dw-h p { margin: 2px 0 0; color: var(--cs-fg-3); font-size: 12px; }
.cs-dw-h .cs-btn { margin-left: auto; }
.cs-dw-b { flex: 1; overflow: auto; padding: 12px 16px; display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; grid-template-columns: minmax(0, 1fr); }
.cs-dw-f { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--cs-line); flex-wrap: wrap; }
.cs-dw-f .cs-count { color: var(--cs-warn); font-size: 12px; margin-right: auto; }
.cs-dw-f .cs-count.none { color: var(--cs-fg-3); }
.cs-mx th.r, .cs-mx td.r { text-align: center; width: 84px; }
.cs-mx td.grp { color: var(--cs-fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 12px; background: none !important; }
.cs-mx td.changed { background: var(--cs-warn-bg) !important; }
.cs-mx input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cs-gold); cursor: pointer; margin: 0; }
.cs-mx input:disabled { cursor: not-allowed; opacity: .55; }
.cs-ro-note { background: var(--cs-info-bg); color: var(--cs-info); padding: 7px 10px; border-radius: 4px; font-size: 12px; }
.cs-ro-note.is-warn { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-ro-note.is-crit { background: var(--cs-crit-bg); color: var(--cs-crit); }
.cs-diff { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cs-diff li { font-family: var(--cs-mono); font-size: 12px; padding: 4px 8px; border-radius: 3px; overflow-wrap: anywhere; }
.cs-diff .add { background: var(--cs-ok-bg); color: var(--cs-ok); } .cs-diff .rem { background: var(--cs-crit-bg); color: var(--cs-crit); }
.cs-diff .chg { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-hist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--cs-line); border-radius: 6px; }
.cs-hist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--cs-line); }
.cs-hist li:last-child { border-bottom: 0; }
.cs-hist .cs-h-when { font-family: var(--cs-mono); color: var(--cs-fg-3); font-size: 11.5px; white-space: nowrap; }
.cs-hist .cs-h-what { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.cs tr.cs-click { cursor: pointer; }
.cs tr.cs-click td:first-child { color: var(--cs-fg); }
.cs tr.cs-click:hover td:first-child { text-decoration: underline; text-underline-offset: 2px; }

/* The panel's own pieces (fields of a setting, its value line, its errors). */
.cs-fld { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--cs-line); }
.cs-fld:last-child { border-bottom: 0; }
.cs-fld-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cs-fld-h strong { font-size: 13px; font-weight: 600; }
.cs-fld-h code { font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-fg-3); }
.cs-fld-h .cs-pill { margin-left: auto; }
.cs-fld-v { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-fld-v input[type="text"]:not(#cs-none), .cs-fld-v input[type="password"]:not(#cs-none) { flex: 1 1 220px; }
.cs-fld-v input[type="number"]:not(#cs-none) { width: 130px; }
.cs-fld .cs-desc { margin: 0; color: var(--cs-fg-2); font-size: 12px; }
.cs-fld .cs-desc.is-warn { color: var(--cs-warn); }
.cs-fld.changed { background: var(--cs-warn-bg); margin: 0 -8px; padding: 10px 8px; border-radius: 4px; }
.cs-check { display: inline-flex !important; gap: 8px; align-items: center; color: var(--cs-fg); font-size: 13px; cursor: pointer; }
.cs-err { color: var(--cs-crit); font-size: 12px; margin: 0; }
.cs-steps-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cs-steps-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.cs-link { color: var(--cs-gold); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

@media (max-width: 1080px) { .cs-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-k:nth-child(3n) { border-right: 0; } .cs-k:nth-child(-n+3) { border-bottom: 1px solid var(--cs-line); } }
@media (max-width: 860px) { .cs-grid2, .cs-grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cs-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-k { border-right: 1px solid var(--cs-line) !important; border-bottom: 1px solid var(--cs-line); } .cs-k:nth-child(2n) { border-right: 0 !important; } .cs-head .cs-when { margin-left: 0; } .cs-dlg .cs-row2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cs *, .cs-drawer * { transition: none !important; } }
.cs-nowrap { white-space: nowrap; }
.cs-small { font-size: 12px; }
/* The console reads on a phone held upright, as the old boards did: no
   "turn your device" veil on its pages. */
@media (max-width: 1100px) and (orientation: portrait) {
  body.cs-page .rotate-device-overlay { display: none !important; }
  body.cs-page .app, body.cs-page .main, body.cs-page #sidebarHost { visibility: visible; }
}
/* The editors the panel hosts from the rest of the site (the slider
   frames) take the console's fields and buttons. */
.cs-drawer .ro-modal-input:not(#cs-none) { background: var(--cs-bg) !important; color: var(--cs-fg) !important; border: 1px solid var(--cs-line-2) !important; border-radius: 4px !important; min-height: 0; font: 400 13px var(--cs-sans) !important; padding: 5px 8px !important; }
.cs-drawer .ro-modal-btn:not(#cs-none) { height: auto; padding: 5px 10px !important; border-radius: 4px !important; border: 1px solid var(--cs-line-2) !important; background: var(--cs-panel-2) !important; color: var(--cs-fg) !important; font: 500 12px var(--cs-sans) !important; letter-spacing: normal; }
.cs-drawer .ro-modal-btn.primary:not(#cs-none) { background: var(--cs-gold) !important; color: var(--cs-gold-ink) !important; border-color: var(--cs-gold) !important; }
.cs-drawer .set-row { border-bottom-color: var(--cs-line); }
.cs-drawer .set-name, .cs-drawer .scf-family-title { color: var(--cs-fg); }
.cs-drawer .set-desc, .cs-drawer .set-meta, .cs-drawer .scf-intro { color: var(--cs-fg-2); }
.cs-drawer .scf-editor { background: var(--cs-panel-2); border-color: var(--cs-line); }
/* The matrix in the panel: the panel is its only scroller (both ways), so
   the header row and the family headers stay at its top and the column of
   the actions at its left. */
.cs-mxw { min-width: 0; }
.cs-mx thead th { position: sticky; top: -12px; z-index: 3; background: var(--cs-panel); }
.cs-mx th.fn, .cs-mx td.fn { position: sticky; left: -16px; z-index: 2; background: var(--cs-panel); }
.cs-mx thead th.fn { z-index: 4; }
.cs-mx tr.grp-row td.grp { position: sticky; top: 19px; z-index: 2; background: var(--cs-panel) !important; }
.cs-mx tbody tr:hover td.fn { background: var(--cs-panel-2); }
.cs-grp:not(#cs-none) { appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.cs-grp::before { content: "▾ "; }
.cs-grp[aria-expanded="false"]::before { content: "▸ "; }

/* ------------------------------------------------------------------
   Added by the Restaurants and Finances lot (18.10.2026).
   ------------------------------------------------------------------ */

/* No rail on the three menus (Greg, 18.10.2026): js/sidebar.js draws none on
   a body.cs-page and marks it cs-norail; the console's bar is the only bar,
   and carries what the rail's top bar did (the space switch, the account
   menu), moved there by consoleBar(). */
body.md-ui.cs-norail .app, body.md-ui.cs-norail .app.svc-layout { padding-left: 0; }
body.md-ui.cs-norail #sidebarHost { display: none; }
body.md-ui.cs-norail .md-topbar { display: none; }
body.md-ui.cs-norail .main { padding-top: 0; }
body.cs-norail .cs-top { top: 0; }
body.cs-norail section.cs-sec { scroll-margin-top: 64px; }
.cs-shell { display: flex; align-items: center; min-width: 0; }
.cs-shell:empty { display: none; }
.cs-top .md-rsel { max-width: 240px; padding: 0 6px 0 0; }
.cs-top .md-rsel-label { font: 500 10px/14px var(--cs-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--cs-fg-3); }
.cs-top .md-rsel-name, .cs-top .md-rsel-select { font: 500 13px/18px var(--cs-sans); color: var(--cs-fg); }
.cs-top .md-account-btn { width: 36px; height: 36px; }
.cs-top .md-avatar { width: 28px; height: 28px; font-size: 13px; }
.cs-top .md-account-menu { top: 42px; }
.cs-top .sub-banner { margin: 0 auto; max-width: 1320px; }

/* One page, two menus (administration.html, ?m=finances). */
.cs-menu[hidden] { display: none; }
.cs-chip-link:not(#cs-none) { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cs-err-box { margin-top: 12px; }

/* Fields of the side panel and of the small window. */
.cs-form { display: grid; gap: 10px; }
.cs-form .cs-row2, .cs-drawer .cs-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-drawer label.cs-field, .cs-form label { display: grid; gap: 4px; color: var(--cs-fg-2); font-size: 12px; }
.cs-drawer textarea:not(#cs-none), .cs-ov textarea:not(#cs-none) { width: 100%; resize: vertical; }
.cs-drawer select:not(#cs-none), .cs-ov select:not(#cs-none), .cs-drawer input[type="text"]:not(#cs-none), .cs-ov input[type="text"]:not(#cs-none) { width: 100%; }
.cs-file:not(#cs-none) { font: 400 12px var(--cs-sans); color: var(--cs-fg-2); max-width: 100%; }
.cs-field-err { color: var(--cs-crit); font-size: 12px; margin: 0; }
.cs-field-err:empty { display: none; }
.cs-dlg .cs-dlg-msg { margin: 0 16px 10px; }

/* The health score's reasons, the attachments, the call history. */
.cs-reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cs-reasons li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.cs-reasons .cs-pts { font-family: var(--cs-mono); color: var(--cs-crit); min-width: 34px; text-align: right; }
.cs-files { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cs-files li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--cs-line); }
.cs-files li:last-child { border-bottom: 0; }
.cs-files .cs-fname { min-width: 0; overflow-wrap: anywhere; margin-right: auto; }
.cs-msg { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cs-panel-2); border: 1px solid var(--cs-line); border-radius: 4px; padding: 8px 10px; margin: 0; }
.cs-act-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cs td.cs-actions { white-space: nowrap; }
.cs td.cs-spark { width: 130px; }
.cs td.cs-spark svg { display: block; width: 120px; height: 22px; }
.cs-total td { font-weight: 600; }
@media (max-width: 560px) { .cs-form .cs-row2, .cs-drawer .cs-row2 { grid-template-columns: 1fr; } .cs-top .md-rsel { max-width: 150px; } }
.cs td .cs-phone { white-space: nowrap; }
/* The filters first, then the search, as the mock-up lays its toolbars. */
.cs-toolbar #pfFilters, .cs-toolbar #exFilters { margin-left: 0; }
/* A hidden field stays hidden although its label is a grid. */
.cs-dlg label[hidden], .cs-form [hidden], .cs-drawer label[hidden] { display: none; }
.cs-drawer td.cs-mono { white-space: nowrap; }
.cs-brand { color: inherit; text-decoration: none; }
/* The year line of js/revenue-year.js in the VAT box: the console's looks. */
.cs #tileCashYear .ry-tile-row { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-top: 10px; padding: 6px 0 0; border: 0; border-top: 1px solid var(--cs-line); background: none; color: var(--cs-fg-2); font: inherit; text-align: left; cursor: pointer; }
.cs #tileCashYear .summary-value { font-family: var(--cs-mono); color: var(--cs-fg); }
.cs #tileCashYear .summary-value.is-warn { color: var(--cs-warn); }
/* On a narrow screen the reserved gutter costs a window its width (the
   Users window at 360 px): phones scroll with overlay bars, nothing to keep. */
@media (max-width: 600px) { html { scrollbar-gutter: auto; } }

/* ------------------------------------------------------------------
   Added by the side panels lot (19.10.2026, Greg: "Panneau de droite").
   ------------------------------------------------------------------ */

/* The wider panel, for the windows that hold a wide table or an editor. */
.cs-drawer.cs-wide { width: min(1080px, 100%); }
.cs-dw-f:empty { display: none; }
.cs-dw-b[hidden] { display: none; }
.cs-dw-h p .cs-link { font-size: 12px; }

/* Inside the panel the site's tokens take the console's values: what the
   hosted windows (and the editors the panel already held) draw with their
   own sheets reads in the console's colours, type and corners, in both
   themes (the --cs-* tokens follow the theme). */
.cs-drawer {
  --md-surface: var(--cs-panel); --md-surface-container-lowest: var(--cs-bg); --md-surface-container-low: var(--cs-panel-2);
  --md-surface-container: var(--cs-panel-2); --md-surface-container-high: var(--cs-panel); --md-surface-container-highest: var(--cs-panel-2);
  --md-on-surface: var(--cs-fg); --md-on-surface-variant: var(--cs-fg-2); --md-outline: var(--cs-line-2); --md-outline-variant: var(--cs-line);
  --md-primary: var(--cs-gold); --md-on-primary: var(--cs-gold-ink); --md-primary-container: var(--cs-panel-2); --md-on-primary-container: var(--cs-fg);
  --md-secondary-container: var(--cs-panel-2); --md-on-secondary-container: var(--cs-fg); --md-field-bg: var(--cs-bg);
  --md-error: var(--cs-crit); --md-on-error: var(--cs-panel); --md-error-container: var(--cs-crit-bg); --md-on-error-container: var(--cs-crit);
  --md-success: var(--cs-ok); --md-success-container: var(--cs-ok-bg); --md-on-success-container: var(--cs-ok);
  --md-font-sans: var(--cs-sans); --md-shape-xs: 3px; --md-shape-sm: 4px; --md-shape-md: 6px; --md-shape-lg: 6px; --md-shape-xl: 8px; --md-shape-full: 999px;
  --md-elevation-1: none; --md-elevation-2: none; --md-elevation-3: none;
  --dlg-bg: var(--cs-panel); --dlg-pad: 0px; --dlg-field-bg: var(--cs-bg); --dlg-field-h: 30px;
  --panel: var(--cs-panel); --panel2: var(--cs-panel-2); --card-bg: var(--cs-panel); --card-bg2: var(--cs-panel-2); --bg: var(--cs-bg);
  --line: var(--cs-line); --line-strong: var(--cs-line-2); --divider: var(--cs-line); --text: var(--cs-fg); --text-soft: var(--cs-fg-2);
  --muted: var(--cs-fg-3); --muted-dim: var(--cs-fg-3); --dim: var(--cs-fg-3); --gold: var(--cs-gold); --gold2: var(--cs-gold);
  --input-bg: var(--cs-bg); --input-border: var(--cs-line-2); --input-color: var(--cs-fg); --placeholder: var(--cs-fg-3);
  --font: var(--cs-sans); --font-ui: var(--cs-sans); --radius: 4px; --radius2: 6px; --shadow: none; --shadow-card: none; --shadow2: none;
}

/* A hosted window: its veil and its box become plain blocks of the panel
   (the panel is the only scroller, its head carries the title and Fermer). */
.cs-drawer .ro-modal-overlay.cs-hosted { position: static !important; inset: auto !important; display: block !important; opacity: 1 !important; visibility: visible !important;
  padding: 0 !important; margin: 0 !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: auto !important;
  transition: none !important; min-width: 0; width: auto !important; height: auto !important; }
.cs-drawer .ro-modal-overlay.cs-hosted.cs-under { display: none !important; }
.cs-drawer .cs-hosted > .ro-modal { position: static !important; inset: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: none !important; color: var(--cs-fg) !important; padding: 0 !important; margin: 0 !important; font: 400 13px/1.45 var(--cs-sans); }
.cs-drawer .cs-hosted .ro-modal-body { overflow: visible !important; max-height: none !important; height: auto !important; padding: 0 !important; flex: none !important; min-height: 0 !important; }
.cs-drawer .cs-hosted > .ro-modal > .ro-modal-head { padding: 0 0 8px !important; margin: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; gap: 8px; flex-wrap: wrap; }
.cs-drawer .cs-hosted > .ro-modal > .ro-modal-head > .ro-modal-title,
.cs-drawer .cs-hosted > .ro-modal > .ro-modal-head > .ro-modal-close,
.cs-drawer .cs-hosted > .ro-modal > .ro-modal-head > [data-close] { display: none !important; }
.cs-drawer .cs-hosted > .ro-modal > .ro-modal-head:not(:has(> :not(.ro-modal-title):not(.ro-modal-close):not([data-close]):not([hidden]):not(:empty))) { display: none !important; }
/* The window's own actions stay at the foot of the panel while it scrolls. */
.cs-drawer .cs-hosted .ro-modal-foot { position: sticky; bottom: -12px; z-index: 2; background: var(--cs-panel) !important; border-top: 1px solid var(--cs-line) !important;
  padding: 10px 0 !important; margin: 12px 0 0 !important; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
/* Its close and cancel buttons are the panel's Fermer (they would say it
   twice); a foot left with nothing else goes. */
.cs-drawer .cs-hosted .ro-modal-foot :is([data-close], .cs-dup-close) { display: none !important; }
.cs-drawer .cs-hosted .ro-modal-foot:not(:has(> :not([data-close]):not(.cs-dup-close):not([hidden]))) { display: none !important; }
/* The site's chips (md-chips.js) as the console's. */
.cs-drawer .cs-hosted .md-chip:not(#cs-none) { appearance: none; height: auto !important; min-height: 0 !important; border: 1px solid var(--cs-line-2) !important; background: none !important;
  color: var(--cs-fg-2) !important; font: 500 12px var(--cs-sans) !important; padding: 3px 9px !important; border-radius: 12px !important; box-shadow: none !important; gap: 4px; }
.cs-drawer .cs-hosted .md-chip[aria-pressed="true"]:not(#cs-none), .cs-drawer .cs-hosted .md-chip[aria-checked="true"]:not(#cs-none) { color: var(--cs-fg) !important; border-color: var(--cs-gold) !important; background: var(--cs-panel-2) !important; }
.cs-drawer .cs-hosted .md-chip .material-symbols-rounded, .cs-drawer .cs-hosted .md-chip svg { font-size: 14px !important; width: 14px; height: 14px; }
.cs-drawer .cs-hosted .md-chip-group, .cs-drawer .cs-hosted .md-chip-set { gap: 4px !important; flex-wrap: wrap; }
.cs-drawer .cs-hosted select:not(#cs-none) { white-space: nowrap; }
/* Type: the console's sizes in place of the dialog's (24 px headlines,
   40 px fields). */
.cs-drawer .cs-hosted :is(h1, h2, h3, h4) { font-family: var(--cs-sans) !important; color: var(--cs-fg); letter-spacing: normal; }
.cs-drawer .cs-hosted :is(h2, h3) { font-size: 13px !important; line-height: 1.4 !important; font-weight: 600 !important; margin: 0 0 6px; }
.cs-drawer .cs-hosted :is(h4, .bset-title) { font-size: 12.5px !important; font-weight: 600 !important; color: var(--cs-fg-2) !important; text-transform: none; letter-spacing: normal; margin: 0 0 6px; }
.cs-drawer .cs-hosted :is(p, li, .sub-hint, .bset-hint) { font-size: 12.5px; }
.cs-drawer .cs-hosted :is(.sub-hint, .bset-hint, .hint) { color: var(--cs-fg-3) !important; }
.cs-drawer .cs-hosted :is(label, .ro-modal-label) { color: var(--cs-fg-2); font-size: 12px; }
.cs-drawer .cs-hosted :is(input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input:not([type]), select):not(#cs-none) {
  background: var(--cs-bg) !important; color: var(--cs-fg) !important; border: 1px solid var(--cs-line-2) !important; border-radius: 4px !important;
  font: 400 13px var(--cs-sans) !important; padding: 5px 8px !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; max-width: 100%; }
/* A text area keeps the height its window gives it (the legal texts'
   editor is tall), with a floor of a few lines. */
.cs-drawer .cs-hosted textarea:not(#cs-none) { background: var(--cs-bg) !important; color: var(--cs-fg) !important; border: 1px solid var(--cs-line-2) !important; border-radius: 4px !important;
  font: 400 13px/1.45 var(--cs-sans) !important; padding: 6px 8px !important; box-shadow: none !important; max-width: 100%; min-height: 6em; }
.cs-drawer .cs-hosted textarea.lgl-body:not(#cs-none) { min-height: 50vh !important; }
.cs-drawer .cs-hosted :is(input, select, textarea):not(#cs-none):disabled { opacity: .55; cursor: not-allowed; }
.cs-drawer .cs-hosted :is(input, select, textarea):not(#cs-none):focus-visible { outline: 2px solid var(--cs-gold) !important; outline-offset: 1px; }
.cs-drawer .cs-hosted input[type="checkbox"], .cs-drawer .cs-hosted input[type="radio"] { accent-color: var(--cs-gold); }
/* A field changed and not saved yet: marked in place, nothing redrawn. */
.cs-drawer .cs-hosted :is(input, select, textarea).cs-chg:not(#cs-none) { border-color: var(--cs-warn) !important; background: var(--cs-warn-bg) !important; }
.cs-drawer .cs-hosted input[type="checkbox"].cs-chg, .cs-drawer .cs-hosted input[type="radio"].cs-chg { outline: 2px solid var(--cs-warn); outline-offset: 1px; }
/* Buttons: the console's. */
.cs-drawer .cs-hosted :is(.ro-modal-btn, .btn, .md-btn, .sub-btn, .bset-cancel):not(#cs-none) { appearance: none; height: auto !important; min-height: 0 !important; padding: 5px 10px !important;
  border-radius: 4px !important; border: 1px solid var(--cs-line-2) !important; background: var(--cs-panel-2) !important; color: var(--cs-fg) !important;
  font: 500 12px var(--cs-sans) !important; letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; width: auto; }
.cs-drawer .cs-hosted :is(.ro-modal-btn, .btn, .md-btn):is(.primary, .accent):not(#cs-none) { background: var(--cs-gold) !important; color: var(--cs-gold-ink) !important; border-color: var(--cs-gold) !important; }
.cs-drawer .cs-hosted :is(.ro-modal-btn, .btn, .md-btn).danger:not(#cs-none) { background: var(--cs-crit-bg) !important; color: var(--cs-crit) !important; border-color: var(--cs-crit) !important; }
.cs-drawer .cs-hosted :is(.ro-modal-btn, .btn, .md-btn, .sub-btn):not(#cs-none):disabled { opacity: .5; cursor: not-allowed; }
.cs-drawer .cs-hosted .bset-cancel:not(#cs-none) { padding: 0 6px !important; line-height: 18px; }
/* Tables: dense, the console's lines. */
.cs-drawer .cs-hosted table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cs-drawer .cs-hosted th { text-align: left; font-weight: 500 !important; color: var(--cs-fg-3) !important; font-size: 12px !important; padding: 6px 8px !important;
  border-bottom: 1px solid var(--cs-line) !important; background: none !important; text-transform: none; letter-spacing: normal; }
.cs-drawer .cs-hosted td { padding: 6px 8px !important; border-bottom: 1px solid var(--cs-line) !important; background: none; color: var(--cs-fg); vertical-align: middle; }
.cs-drawer .cs-hosted tbody tr:hover td { background: var(--cs-panel-2); }
.cs-drawer .cs-hosted :is(.sub-num, td.n, th.n) { font-family: var(--cs-mono); font-variant-numeric: tabular-nums; }
/* Cards and blocks of the windows: flat boxes with the console's line. */
.cs-drawer .cs-hosted :is(.bset-block, .users-create, .users-listcard, .md-card, .card, .sub-card, .rs-card) { background: var(--cs-panel) !important; border: 1px solid var(--cs-line) !important;
  border-radius: 6px !important; box-shadow: none !important; padding: 12px 14px !important; }
.cs-drawer .cs-hosted .bset-2col { gap: 12px !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important; }
/* A field in a table cell takes the cell (the price grid), and a block whose
   table is still too wide scrolls inside itself: it never runs over the
   block beside it. */
.cs-drawer .cs-hosted td :is(input[type="number"], input[type="text"]):not(#cs-none) { width: 100% !important; min-width: 64px; }
.cs-drawer .cs-hosted .bset-block { overflow-x: auto; }
/* A wide table scrolls in its own box on a phone, never the page. */
.cs-drawer .cs-hosted :is(.ro-modal-body, .bset-block) { min-width: 0; max-width: 100%; }
.cs-drawer .cs-hosted :is(.sub-table-wrap, .table-wrap, .users-table-wrap) { overflow-x: auto; }

/* The summary before saving, and the history, beside a hosted window. */
.cs-review { display: grid; gap: 8px; }
.cs-review-intro { margin: 0; color: var(--cs-fg-2); }
.cs-hist-box { display: grid; gap: 6px; }
.cs-hist-box[hidden], .cs-ro-note[hidden] { display: none; }

/* The DEV banner of dev.resto-one.com (js/env-banner.js) sits on top of the
   page; on the console pages the bar, the page and the panel start below it
   (Greg, 19.10.2026: on a phone it hid the brand and the menus). */
body.cs-page { padding-top: var(--ro-env-banner-h, 0px); }
body.cs-norail .cs-top { top: var(--ro-env-banner-h, 0px); }
.cs-drawer { top: var(--ro-env-banner-h, 0px); }
body.cs-norail section.cs-sec { scroll-margin-top: calc(64px + var(--ro-env-banner-h, 0px)); }
/* Room is made for it here, so its sentence may wrap rather than lose its end. */
body.cs-page #roEnvBanner { left: 0; right: 0; transform: none; margin: 0 auto; width: fit-content; max-width: calc(100vw - 32px);
  white-space: normal; text-overflow: clip; text-align: center; }

/* A phone (Greg, 19.10.2026): the menus on a line of their own, all three
   in view (scrolling sideways if a language makes them longer), the space
   switch whole, and a glance figure that shrinks or wraps rather than
   losing its end. */
/* The space switch: its list lies over the name and the arrow, transparent
   (md-app.css, 03.10.2026); the console's field rule painted it and padded
   it inside a row of 18 px, so its own text showed, cut at the bottom. */
.cs-top .md-rsel-row .md-rsel-select:not(#cs-none) { background: transparent !important; color: transparent !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; min-height: 0 !important; height: 100% !important; }
.cs-top .md-rsel-row { min-height: 24px; padding: 0 2px; border: 1px solid var(--cs-line-2); border-radius: 4px; }
.cs-top .md-rsel-name { overflow: visible; line-height: 20px; }
.cs-top .md-rsel-row .md-rsel-arrow:not(#cs-none) { font-size: 18px !important; line-height: 20px !important; height: 20px !important; overflow: visible !important; }
.cs-k-val { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.2; }
@media (max-width: 720px) {
  .cs-top .cs-wrap { gap: 4px 12px; padding-block: 4px; }
  .cs-top .cs-tabs { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
  .cs-top .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-top .cs-tab { padding: 8px 10px 7px; }
  .cs-top .cs-who { margin-left: auto; }
  .cs-k-val { font-size: 18px; }
}
/* The site's switches inside the panel keep their 48 px (a finger's
   target on a phone); only their words take the console's type. */
.cs-drawer .cs-hosted .md-switch-row { font: 400 13px var(--cs-sans); }

/* The platform's block of a restaurant's panel (19.10.2026, lot
   console-admin): "Restaurant de test" as a switch (the checkbox stays the
   source: role="switch", its own track and thumb), the directory line
   under it; the "Test" badge of the portfolio's rows. */
.cs-plat { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--cs-line); border-radius: 6px; background: var(--cs-panel-2); }
.cs-plat .cs-h3 { margin: 0; }
.cs-switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; min-height: 40px; }
.cs-sw-text { display: grid; gap: 2px; min-width: 0; }
.cs-sw-label { color: var(--cs-fg); font-weight: 500; }
.cs-switch:not(#cs-none) { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; width: 36px; height: 20px; margin: 0; border-radius: 10px;
  border: 1px solid var(--cs-line-2); background: var(--cs-bg); cursor: pointer; transition: background .15s, border-color .15s; }
.cs-switch:not(#cs-none)::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--cs-fg-3); transition: transform .15s, background .15s; }
.cs-switch:not(#cs-none):checked { background: var(--cs-gold); border-color: var(--cs-gold); }
.cs-switch:not(#cs-none):checked::after { transform: translateX(16px); background: var(--cs-gold-ink); }
.cs-switch:not(#cs-none):disabled { opacity: .55; cursor: not-allowed; }
.cs-switch-row:has(.cs-switch:disabled) { cursor: not-allowed; }
.cs-plat a { color: var(--cs-info); }
.cs-test { margin-left: 6px; vertical-align: 1px; }

/* The site's toasts (js/toast.js) in the console's look on every page of the
   one style (Greg, 26.10.2026: "ce n'est pas un toast de l'ancienne
   version ?"): the platform's small box at the bottom right (.cs-toast),
   the thin gold line, the state said by its colour on the icon or the line,
   never a full green or red pill. The Service mode does not load this sheet
   and keeps its snackbar. */
body .toast-container:not(#cs-none) { top: auto; left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: none; align-items: flex-end; }
/* In the Edition, always above its save bar, at one height (the bar's own height changes while a page saves, the toast would jump). */
body.ed-frame .toast-container:not(#cs-none) { bottom: calc(var(--md-footer-h, 22px) + 92px + env(safe-area-inset-bottom, 0px)); }
/* On a phone the bottom belongs to the sticky action bars (onboarding,
   Edition): the toast goes to the top, or it would cover "Continuer". */
@media (max-width: 600px) {
    body .toast-container:not(#cs-none), body.ed-frame .toast-container:not(#cs-none) { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; left: 12px; right: 12px; align-items: stretch; }
}
body .toast-container .toast:not(#cs-none) {
  min-width: 0; max-width: min(460px, calc(100vw - 32px)); padding: 9px 14px !important; gap: 8px;
  border: 1px solid transparent !important; border-radius: 6px !important;
  background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad, var(--cs-line-2)) border-box !important;
  color: var(--cs-fg) !important; font: 400 13px/1.45 var(--cs-sans) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .14) !important;
}
body .toast-container .toast:not(#cs-none) .toast-icon { font-size: 15px; color: var(--cs-fg-2); }
body .toast-container .toast.toast-success:not(#cs-none) .toast-icon { color: var(--cs-ok); }
body .toast-container .toast.toast-warning:not(#cs-none) .toast-icon { color: var(--cs-warn); }
body .toast-container .toast.toast-error:not(#cs-none) { background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, linear-gradient(var(--cs-crit), var(--cs-crit)) border-box !important; color: var(--cs-crit) !important; }
body .toast-container .toast:not(#cs-none) .toast-close { color: var(--cs-fg-3); }

/* Every confirmation and prompt of the site (js/toast.js confirmPopup,
   promptPopup, the hours' guard) on a page of the one style: the console's
   flat panel, as the Edition's own summary already was (Greg, 26.10.2026:
   "Abandonner le changement prevu" was still the round Material dialog).
   The Service mode and the guests' pages do not load this sheet; the
   Edition's own questions (.ed-dlg) keep their rules (edition-frame.css). */
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) {
    background: linear-gradient(var(--cs-panel), var(--cs-panel)) padding-box, var(--cs-line-grad) border-box !important;
    color: var(--cs-fg) !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
    width: min(540px, calc(100vw - 32px)) !important;
    max-width: min(540px, calc(100vw - 32px)) !important;
    font: 400 13px/1.45 var(--cs-sans);
}
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none)::backdrop { background: rgba(0, 0, 0, .55); }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-title { font: 600 15px/1.35 var(--cs-sans) !important; color: var(--cs-fg) !important; letter-spacing: normal !important; }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-dialog-text { color: var(--cs-fg-2) !important; font: 400 13px/1.45 var(--cs-sans) !important; }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-dialog-icon { display: none; }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-dialog-foot .ro-modal-btn {
    border-radius: 4px !important;
    font: 500 12px var(--cs-sans) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 10px !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad) border-box !important;
    color: var(--cs-fg) !important;
}
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-dialog-foot .ro-modal-btn:is(.primary, .warn, .accent) { background: var(--cs-sheen) !important; color: var(--cs-gold-ink) !important; font-weight: 600 !important; }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-dialog-foot .ro-modal-btn.danger { background: none !important; border: 1px solid var(--cs-crit) !important; color: var(--cs-crit) !important; font-weight: 600 !important; }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-dialog-foot .confirm-other { background: none !important; border: 1px solid var(--cs-crit) !important; color: var(--cs-crit) !important; margin-right: auto; }
body.md-ui dialog.confirm-dialog:not(.md-x):not(.ed-dlg):not(#cs-none) .confirm-input { background: var(--cs-panel-2) !important; color: var(--cs-fg) !important; border: 1px solid var(--cs-line-2) !important; border-radius: 4px !important; font: 400 13px var(--cs-sans) !important; }

/* The "Swiss made" band at the bottom in the page's own ground (Greg,
   26.10.2026): the one style's pages and the Edition; the Service mode keeps
   its own. */
body.md-ui:is(.cs-page, .ed-norail) .md-footer:not(#cs-none) { background: var(--cs-ground-solid); }
/* A slimmer band (Greg, 26.10.2026: "rapetisser un tout petit peu"), with a
   strip of the ground above it, so that a page's card shows its rounded foot
   just above the band (edition-frame.css, the save bar). */
body.md-ui:is(.cs-page, .ed-norail) { --md-footer-h: 22px; }
body.md-ui:is(.cs-page, .ed-norail) .md-footer:not(#cs-none) { box-shadow: 0 -16px 0 var(--cs-ground-solid); }
/* The word at the end of a set-up step (js/setup-steps.js, .setb-snack) as
   the toasts above (Greg, 26.10.2026: "j'ai trouve un vestige", the Material
   snackbar in the middle over the save bar): the console's box at the bottom
   right, above the Edition's save bar, its "Continuer" the gold button; at
   the top on a phone. */
body.md-ui .setb-snack:not(#cs-none) {
    left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(12px); width: auto; max-width: min(460px, calc(100vw - 32px)); min-height: 0; gap: 10px; padding: 9px 8px 9px 14px;
    border: 1px solid transparent; border-radius: 6px;
    background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad, var(--cs-line-2)) border-box;
    color: var(--cs-fg); font: 400 13px/1.45 var(--cs-sans); box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
/* The band, the 16 px above it, the save bar (66 px) and a breath of 10 px. */
body.md-ui.ed-frame .setb-snack:not(#cs-none) { bottom: calc(var(--md-footer-h, 22px) + 92px + env(safe-area-inset-bottom, 0px)); }
body.md-ui .setb-snack.is-open:not(#cs-none) { transform: none; }
body.md-ui .setb-snack:not(#cs-none) .setb-snack-icon { font-size: 16px; color: var(--cs-ok); }
body.md-ui .setb-snack:not(#cs-none) .setb-snack-text { margin: 0; }
body.md-ui .setb-snack:not(#cs-none) .setb-snack-go { padding: 4px 11px; border-radius: 4px; background: var(--cs-sheen); color: var(--cs-gold-ink); font: 500 12.5px var(--cs-sans); }
body.md-ui .setb-snack:not(#cs-none) .setb-snack-close { width: 28px; height: 28px; border-radius: 4px; color: var(--cs-fg-3); }
body.md-ui .setb-snack:not(#cs-none) .setb-snack-close:hover { color: var(--cs-fg); background: var(--cs-panel); }
body.md-ui .setb-snack:not(#cs-none) .setb-snack-close .md-icon { font-size: 16px; }
@media (max-width: 600px) {
    body.md-ui .setb-snack:not(#cs-none), body.md-ui.ed-frame .setb-snack:not(#cs-none) { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; left: 12px; right: 12px; max-width: none; flex-wrap: nowrap; }
}