/* css/platform-frame.css
   The platform in six tabs (lot P1 of the new structure, Greg 19-20.10.2026),
   ported from the validated mock-up
   Docs/claude/maquettes/plateforme-onglets-2026-10-19.html: the top bar with
   the six tabs on a line of their own, a grouped left menu per tab, the page
   in a card with its breadcrumb, the save bar at the foot of an editing page,
   the summary and the question as the mock-up's dialogs, the overview of
   Sante (what is wrong first, or "Tout va bien", then every check with its
   light), and on a phone the tabs scrolling sideways and the menu in a drawer.
   The values are the mock-up's; its tokens are the console's (css/console.css,
   --cs-*), plus the one it added, --cs-sel (the grey of the active item).
   Classes prefixed pf- (the site styles .tab, .card, .btn... already). The
   existing glances, sections, boxes, windows and panels are shown in the card
   as they are drawn (js/platform-frame.js marks them), in the console's
   looks. */

/* --cs-sel is css/console.css's since 25.10.2026 (one set of colours). The
   height of the bar and of the band of the tabs, with their lines. */
:root { --pf-toph: 89px; }

/* ---------------------------------------------------------------- the frame */
body.pf-frame .cs { background: none; }
body.pf-frame .cs-top.pf-top { padding: 0; }
/* The bar's row across the window, its gold line below (css/platform-pages.css,
   the theme), then the band of the tabs. */
.pf-top .pf-barrow { display: block; }
.pf-top .pf-bar { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 0 16px; min-height: 46px; flex-wrap: wrap; }
/* The brand in the logo's face, Alethia Next, as it is drawn: one weight,
   no faux bold, 15 px (Greg, 25.10.2026); the space after it ("PLATEFORME")
   in the running face, small and letter-spaced. */
.pf-top .pf-brand { font: 400 15px/1 "Alethia Next", var(--cs-sans); font-synthesis: none; letter-spacing: .04em; white-space: nowrap; color: var(--cs-fg); text-decoration: none; }
.pf-top .pf-brand b { color: var(--cs-gold); font-weight: 400; }
.pf-top .pf-brand .pf-brand-sfx { font: 500 12px var(--cs-sans); letter-spacing: .12em; color: var(--cs-fg-3); }
.pf-top .pf-sp { flex: 1; }
.pf-top .pf-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.pf-tabs { max-width: 1440px; margin: 0 auto; display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab:not(#cs-none) { appearance: none; border: 0; background: none; color: var(--cs-fg-2); font: 500 13.5px var(--cs-sans); padding: 11px 13px 10px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; border-radius: 0; height: auto; line-height: normal; letter-spacing: normal; text-transform: none; }
.pf-tab:not(#cs-none):hover { color: var(--cs-fg); }
.pf-tab[aria-selected="true"]:not(#cs-none) { color: var(--cs-fg); border-bottom-color: var(--cs-gold); }
.pf-tab .pf-lock { font-size: 10px; color: var(--cs-fg-3); border: 1px solid var(--cs-line-2); padding: 0 4px; border-radius: 3px; }
.pf-bd { font: 600 10.5px var(--cs-mono); min-width: 17px; height: 17px; border-radius: 9px; display: inline-grid; place-items: center; padding: 0 5px; }
.pf-bd-crit { background: var(--cs-crit); color: var(--cs-panel); } .pf-bd-warn { background: var(--cs-warn); color: var(--cs-panel); } .pf-bd-mute { background: var(--cs-sel); color: var(--cs-fg-2); }

.pf-layout { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 18px 16px 56px; }
.pf-side { position: sticky; top: calc(var(--pf-toph) + 18px); align-self: start; max-height: calc(100vh - var(--pf-toph) - 36px); overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.pf-grp + .pf-grp { border-top: 1px solid var(--cs-line); margin-top: 8px; padding-top: 4px; }
.pf-grp-h { font-size: 11px; font-weight: 600; color: var(--cs-fg-3); text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px 5px; }
.pf-it:not(#cs-none) { appearance: none; border: 0; background: none; width: 100%; text-align: left; color: var(--cs-fg-2); font: 500 13px var(--cs-sans); padding: 7px 12px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; text-decoration: none; height: auto; line-height: 1.45; letter-spacing: normal; text-transform: none; }
.pf-it:not(#cs-none):hover { color: var(--cs-fg); background: var(--cs-panel-2); }
.pf-it[aria-current="page"]:not(#cs-none) { background: var(--cs-sel); color: var(--cs-fg); }
.pf-it .pf-nm { flex: 1; min-width: 0; }
.pf-it .pf-bd { min-width: 18px; }
.pf-mnav:not(#cs-none) { display: none; }
.pf-main { min-width: 0; }

.pf-card { background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 6px; padding: 16px 22px 22px; min-width: 0; min-height: 60vh; }
.pf-crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--cs-fg-3); margin-bottom: 10px; }
.pf-crumbs a { color: var(--cs-fg-2); text-decoration: none; }
.pf-crumbs a:hover { color: var(--cs-fg); text-decoration: underline; text-underline-offset: 2px; }
.pf-crumbs .pf-sep { color: var(--cs-fg-3); }
.pf-crumbs .pf-cur { color: var(--cs-fg); }
/* Retour (lot E4b): before the breadcrumb of every page below the top level,
   the console's small button, as its other ways back. */
.pf-crumbrow { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-crumbrow .pf-crumbs { margin-bottom: 0; min-width: 0; }
.pf-crumbrow .pf-back { flex: none; }
.pf-crumbrow .pf-back[hidden] { display: none; }
.pf-ph { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-ph h1 { font-size: 19px; font-weight: 600; margin: 0; text-wrap: balance; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--cs-fg); font-family: var(--cs-sans); line-height: 1.3; }
.pf-ph .pf-lead { margin: 3px 0 0; color: var(--cs-fg-2); max-width: 760px; }
.pf-ph .pf-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pf-ph .pf-acts:empty { display: none; }
.pf-hint { color: var(--cs-fg-3); font-size: 11.5px; }
.pf-sec-t { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-fg-3); margin: 24px 0 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-sec-t .pf-r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pf-lnk:not(#cs-none) { color: var(--cs-gold); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.pf-lnk:not(#cs-none):hover { text-decoration: underline; text-underline-offset: 2px; }

/* The page's blocks: the pieces of the console, the frame's own content and
   the panel, in the order of the page (CSS order), on one or two columns. The
   wrappers that hold a piece let it through (display: contents); the rest of
   the console stays in the document, out of view. */
.pf-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pf-content > :not(.pf-on):not(.pf-path) { display: none !important; }
.pf-content .pf-path { display: contents !important; }
.pf-content .pf-path > :not(.pf-on):not(.pf-path) { display: none !important; }
.pf-content .pf-on { grid-column: 1 / -1; min-width: 0; margin: 0 !important; }
.pf-content .pf-on.pf-half { grid-column: auto; }
.pf-content.pf-g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pf-content .pf-on.pf-rows2 { grid-row: span 2; }
.pf-content .pf-self { display: none !important; }
.pf-content .pf-on[hidden] { display: none !important; }
/* A section shown as a page: its title is the page's; its own buttons stay
   (they are the page's actions), on the right of a thin line. */
.pf-content section.cs-sec.pf-on > .cs-sec-h > h2, .pf-content section.cs-sec.pf-on > .cs-sec-h > p, .pf-content section.cs-sec.pf-on > .cs-sec-h > .cs-new { display: none; }
.pf-content section.cs-sec.pf-on > .cs-sec-h { margin-bottom: 8px; }
.pf-content section.cs-sec.pf-on > .cs-sec-h:not(:has(.cs-act:not(:empty))) { display: none; }
.pf-content .cs-box.pf-on.pf-pad, .pf-content .pf-own .cs-box { padding: 12px 14px; }
.pf-content .cs-glance.pf-on { background: var(--cs-panel); }
.pf-own { min-width: 0; }
.pf-own .pf-sec-t:first-child { margin-top: 0; }
/* A box whose buttons open what is now its own page (Sante, Finances) keeps
   them only for whom the page exists. */
body.pf-frame:not(.pf-sa) .pf-content #p-technique [data-open="logs"],
body.pf-frame:not(.pf-sa) .pf-content #p-technique [data-open="smtp"],
body.pf-frame:not(.pf-sa) .pf-content #p-technique [data-open="webhook"],
body.pf-frame:not(.pf-sa) .pf-content #p-technique [data-key-open],
body.pf-frame:not(.pf-sa) .pf-content #s-fiscal [data-open="vat"],
body.pf-frame:not(.pf-sa) .pf-content #s-fiscal [data-open="bank"] { display: none !important; }

/* ---------------------------------------------------------------- the panel as the page */
.cs-drawer.cs-inpage { position: static; inset: auto; width: auto !important; max-width: none; z-index: auto; box-shadow: none; border: 0; background: none; padding: 0; display: block; }
.cs-drawer.cs-inpage[hidden] { display: none !important; }
.cs-drawer.cs-inpage .cs-dw-h { display: none; }
.cs-drawer.cs-inpage .cs-dw-b { overflow: visible; padding: 0; display: grid; gap: 14px; }
.cs-drawer.cs-inpage .cs-dw-b[hidden] { display: none; }
/* The save bar: sticky at the foot of the card, never born nor gone while
   the page is shown (its nodes kept, js/console/kit.js). */
/* The bar runs to the card's edges by its shadows, not by negative margins:
   a shadow does not widen the panel (no sideways scroll at 375 px). */
.cs-drawer.cs-inpage > .cs-dw-f { --pf-bleed: 22px; position: sticky; bottom: 0; z-index: 5; background: var(--cs-panel); margin: 18px 0 -22px; padding: 10px 0; border-top: 1px solid transparent; min-height: 48px;
  box-shadow: calc(-1 * var(--pf-bleed)) 0 0 var(--cs-panel), var(--pf-bleed) 0 0 var(--cs-panel);
  /* Its gold line across the whole card: the border image drawn beyond the
     bar by its outset (ink, not layout: no sideways scroll at 375 px). */
  border-image: var(--cs-line-grad) 1 / var(--cs-lwn) / 0 var(--pf-bleed); }
.cs-drawer.cs-inpage > .cs-dw-f:empty { display: none; }
.cs-drawer.cs-inpage .cs-dw-f .cs-count { min-width: 220px; }
.cs-drawer.cs-inpage .cs-dw-f [data-dw-close] { display: none; }
.pf-content .cs-drawer.cs-inpage.pf-on:not(:last-child) > .cs-dw-f { margin-bottom: 0; border-radius: 0; }
/* theme.css paints every light link whose address holds "restaurants" as the
   old back button (gold text, the buttons' gradient, !important; md-app.css
   and setup-banner.css met it too): the frame's links to the Restaurants tab
   keep their own look. */
[data-theme="ivory"] body.pf-frame a.pf-tab[href*="restaurants"],
[data-theme="ivory"] body.pf-frame a.pf-it[href*="restaurants"],
[data-theme="ivory"] body.pf-frame .pf-crumbs a[href*="restaurants"],
[data-theme="ivory"] body.pf-frame a.pf-lnk[href*="restaurants"],
[data-theme="ivory"] body.pf-frame .pf-own a[href*="restaurants"] { background: none !important; border-color: transparent !important; }
[data-theme="ivory"] body.pf-frame a.pf-tab[href*="restaurants"],
[data-theme="ivory"] body.pf-frame a.pf-it[href*="restaurants"],
[data-theme="ivory"] body.pf-frame .pf-crumbs a[href*="restaurants"] { color: var(--cs-fg-2) !important; }
[data-theme="ivory"] body.pf-frame a.pf-tab[href*="restaurants"]:hover,
[data-theme="ivory"] body.pf-frame a.pf-tab[href*="restaurants"][aria-selected="true"],
[data-theme="ivory"] body.pf-frame a.pf-it[href*="restaurants"]:hover,
[data-theme="ivory"] body.pf-frame a.pf-it[href*="restaurants"][aria-current="page"],
[data-theme="ivory"] body.pf-frame .pf-crumbs a[href*="restaurants"]:hover { color: var(--cs-fg) !important; }
[data-theme="ivory"] body.pf-frame a.pf-tab[href*="restaurants"]:hover,
[data-theme="ivory"] body.pf-frame a.pf-tab[href*="restaurants"][aria-selected="true"] { color: var(--cs-gold) !important; }
[data-theme="ivory"] body.pf-frame a.pf-it[href*="restaurants"]:hover { background: var(--cs-panel-2) !important; }
[data-theme="ivory"] body.pf-frame a.pf-it[href*="restaurants"][aria-current="page"] { background: var(--cs-sel) !important; }
/* The rights matrix as a page: the window scrolls, not the panel, so its
   headers stick under the platform's bar and its first column at the left
   edge of the body (which scrolls sideways on a phone, below). */
.cs-drawer.cs-inpage .cs-mx thead th { top: var(--pf-toph); }
.cs-drawer.cs-inpage .cs-mx tr.grp-row td.grp { top: calc(var(--pf-toph) + 31px); }
.cs-drawer.cs-inpage .cs-mx th.fn, .cs-drawer.cs-inpage .cs-mx td.fn { left: 0; }
/* The hosted windows: their title and cross are the page's title and the
   breadcrumb; what else their head carries ("Supprimer le restaurant", the
   origin of a restaurant) stays, as in the side panel; a head with nothing
   else goes. Their own "Fermer" at the foot is the breadcrumb's. */
.cs-inpage .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-inpage .cs-hosted > .ro-modal > .ro-modal-head > .ro-modal-title,
.cs-inpage .cs-hosted > .ro-modal > .ro-modal-head > .ro-modal-close,
.cs-inpage .cs-hosted > .ro-modal > .ro-modal-head > [data-close] { display: none !important; }
.cs-inpage .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; }
.cs-inpage .ro-modal-overlay.cs-hosted { position: static !important; inset: auto !important; background: none !important; display: block !important; padding: 0 !important; z-index: auto !important; }
.cs-inpage .ro-modal-overlay.cs-hosted.cs-under { display: none !important; }
.cs-inpage .ro-modal-overlay.cs-hosted > .ro-modal { width: auto !important; max-width: none !important; max-height: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: none !important; margin: 0 !important; transform: none !important; }
/* A window that sets its own width by its id (the reports' window: min(1120px,
   100vw - 48px), !important) takes the page's width too: the id here outweighs
   it, as #csDrawer did in the side panel. */
#pfContent .cs-inpage .ro-modal-overlay.cs-hosted > .ro-modal { width: auto !important; max-width: none !important; }
.cs-inpage .ro-modal-overlay.cs-hosted > .ro-modal > .ro-modal-body { max-height: none !important; overflow: visible !important; padding: 0 !important; }
.cs-inpage .ro-modal-overlay.cs-hosted > .ro-modal > .ro-modal-foot { padding: 12px 0 0 !important; border: 0 !important; background: none !important; }
.cs-inpage .ro-modal-overlay.cs-hosted > .ro-modal > .ro-modal-foot:not(:has(> :not(.cs-dup-close):not([hidden]))) { display: none !important; }
/* A shared window shows its part only (Offres et tarifs: tariffs, referral,
   trial on three pages; the save of each block is its own). */
.cs-inpage .ro-modal-overlay.cs-hosted .bset-block.pf-part-off { display: none !important; }

/* ---------------------------------------------------------------- dialogs */
.cs-rv-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 1060; padding: 16px; }
.cs-rv-ov .cs-rv { width: min(540px, 100%); max-height: 88vh; overflow: auto; overscroll-behavior: contain; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); display: block; }
.cs-rv-ov .cs-rv header { padding: 14px 16px 6px; border-bottom: 0; }
.cs-rv-ov .cs-rv .cs-rv-b { padding: 6px 16px 12px; color: var(--cs-fg-2); display: grid; gap: 8px; }
.cs-rv-ov .cs-rv .cs-review { display: grid; gap: 8px; }
.cs-rv-ov .cs-rv .cs-review-intro { margin: 0; }
.cs-rv-ov .cs-rv .cs-dw-f { border-top: 0; padding: 6px 16px 14px; justify-content: flex-end; position: static; margin: 0; background: none; }
.cs-rv-ov .cs-rv .cs-dw-f .cs-count { margin-right: auto; }
.cs-rv-ov .cs-diff li { font-family: var(--cs-sans); font-size: 12.5px; padding: 6px 8px; border-radius: 4px; background: var(--cs-panel-2); border: 1px solid var(--cs-line); color: var(--cs-fg); }
/* The question before leaving a page with changes (js/toast.js's dialog):
   "Abandonner" on the left in red, as the mock-up. */
body.md-ui dialog.confirm-dialog.cs-leave-dlg .confirm-dialog-foot .confirm-other { color: var(--cs-crit) !important; border: 1px solid var(--cs-crit) !important; background: none !important; margin-right: auto; }

/* ---------------------------------------------------------------- Sante */
.pf-lamp { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 3px var(--cs-panel-2); }
.pf-l-ok { background: var(--cs-ok); } .pf-l-warn { background: var(--cs-warn); } .pf-l-crit { background: var(--cs-crit); } .pf-l-mute { background: var(--cs-fg-3); }
.pf-allgood { display: flex; gap: 16px; align-items: center; border: 1px solid var(--cs-ok); background: var(--cs-ok-bg); border-radius: 8px; padding: 20px 22px; }
.pf-allgood svg { width: 46px; height: 46px; flex: none; color: var(--cs-ok); }
.pf-allgood h2 { margin: 0; font-size: 22px; color: var(--cs-ok); font-family: var(--cs-sans); }
.pf-allgood p { margin: 3px 0 0; color: var(--cs-fg-2); }
.pf-probs { display: grid; gap: 10px; }
.pf-prob { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; border: 1px solid var(--cs-line); border-left: 4px solid var(--cs-warn); border-radius: 6px; padding: 12px 14px; background: var(--cs-panel); }
.pf-prob.crit { border-left-color: var(--cs-crit); background: linear-gradient(90deg, var(--cs-crit-bg), var(--cs-panel) 46%); }
.pf-prob.warn { background: linear-gradient(90deg, var(--cs-warn-bg), var(--cs-panel) 46%); }
.pf-prob .pf-lamp { margin-top: 4px; }
.pf-prob h3 { margin: 0; font-size: 14px; color: var(--cs-fg); font-family: var(--cs-sans); }
.pf-prob .pf-what { color: var(--cs-fg-2); margin-top: 2px; }
.pf-prob .pf-todo { margin-top: 6px; font-size: 12.5px; }
.pf-prob .pf-todo b { color: var(--cs-fg-2); font-weight: 600; }
.pf-prob .pf-go { align-self: center; }
.pf-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.pf-chk-g h4 { margin: 14px 0 2px; font-size: 11.5px; color: var(--cs-fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pf-ck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--cs-line); cursor: pointer; }
.pf-ck:hover { background: var(--cs-panel-2); }
.pf-ck .pf-cn { font-weight: 500; }
.pf-ck .pf-cd { color: var(--cs-fg-3); font-size: 11.5px; }
.pf-ck .pf-cv { font-family: var(--cs-mono); font-size: 12px; text-align: right; color: var(--cs-fg-2); }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--cs-line); }
.pf-list li:last-child { border-bottom: 0; }
.pf-list .pf-when { font-family: var(--cs-mono); color: var(--cs-fg-3); font-size: 11.5px; white-space: nowrap; }
.pf-soon { border: 1px dashed var(--cs-line-2); border-radius: 6px; padding: 16px 18px; color: var(--cs-fg-2); }
.pf-soon b { color: var(--cs-fg); }

/* The settings rows of a page (one row, one panel of settings). */
.pf-rows { border-bottom: 1px solid var(--cs-line); }
.pf-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 8px 28px; padding: 13px 0 13px 14px; border-top: 1px solid var(--cs-line); align-items: start; }
.pf-row.pf-click { cursor: pointer; }
.pf-row.pf-click:hover { background: var(--cs-panel-2); }
.pf-row .pf-rl b { display: block; font-weight: 600; font-size: 13px; color: var(--cs-fg); }
.pf-row .pf-rl .pf-ex { display: block; color: var(--cs-fg-3); font-size: 12px; margin-top: 2px; max-width: 560px; }
.pf-row .pf-rc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.pf-row .pf-val { font-family: var(--cs-mono); font-size: 12.5px; text-align: right; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- phone */
.pf-mdw-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1040; }
.pf-mdw { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); background: var(--cs-panel); border-right: 1px solid var(--cs-line-2); z-index: 1041; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); color: var(--cs-fg); font: 400 13px/1.45 var(--cs-sans); }
.pf-mdw-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--cs-line); font-weight: 600; }
.pf-mdw-h .cs-btn { margin-left: auto; }
.pf-mdw-b { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 6px 8px 20px; }
#pfMenuDrawer[hidden] { display: none; }

@media (max-width: 1180px) { .pf-checks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .pf-content, .pf-content.pf-g21 { grid-template-columns: minmax(0, 1fr); } .pf-content .pf-on.pf-half { grid-column: 1 / -1; } .pf-content .pf-on.pf-rows2 { grid-row: auto; } }
@media (max-width: 860px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); padding-top: 12px; gap: 10px; }
  .pf-side { display: none; }
  .pf-mnav:not(#cs-none) { display: flex; align-items: center; gap: 8px; width: 100%; appearance: none; border: 1px solid var(--cs-line-2); background: var(--cs-panel); color: var(--cs-fg); border-radius: 6px; padding: 9px 12px; font: 500 13px var(--cs-sans); cursor: pointer; text-align: left; height: auto; line-height: 1.45; letter-spacing: normal; text-transform: none; }
  .pf-mnav .pf-g { color: var(--cs-fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
  .pf-mnav .pf-ic { font-size: 15px; line-height: 1; }
  .pf-mnav .pf-chev { margin-left: auto; color: var(--cs-fg-3); }
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-row .pf-rc { justify-content: flex-start; }
  .pf-row .pf-val { text-align: left; }
}
@media (max-width: 560px) {
  .pf-top .pf-bar { gap: 8px; padding: 6px 16px; flex-wrap: nowrap; }
  .pf-top .pf-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .pf-top .pf-brand .pf-brand-sfx { letter-spacing: .06em; }
  /* The space switch stays on a phone (Greg, 25.10.2026: on his mobile the
     platform had no way to a restaurant): shorter, without "Espace :", the
     name cut with an ellipsis; the bar's gaps tighten to make room. */
  .pf-top .pf-who { gap: 6px; }
  body.md-ui .pf-top .md-rsel { max-width: 132px; padding: 1px 6px; }
  body.md-ui .pf-top .md-rsel-label { display: none; }
  body.md-ui .pf-top .md-rsel-name, body.md-ui .pf-top .md-rsel-select { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pf-card { padding: 14px 14px 16px; }
  .cs-drawer.cs-inpage > .cs-dw-f { --pf-bleed: 14px; margin: 16px 0 -16px; padding: 10px 0; }
  .cs-drawer.cs-inpage .cs-dw-f .cs-count { min-width: 0; flex-basis: 100%; }
  /* A wide table (the rights matrix) scrolls sideways inside the page's
     body, never the page itself. */
  .cs-drawer.cs-inpage .cs-dw-b { overflow-x: auto; }
  .pf-prob { grid-template-columns: auto minmax(0, 1fr); }
  .pf-prob .pf-go { grid-column: 2; justify-self: start; }
  .pf-allgood { padding: 16px; }
  .pf-allgood h2 { font-size: 19px; }
  .pf-ph .pf-acts { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pf-layout *, .pf-mdw * { transition: none !important; } }

/* The space switch of the bar (kept, Greg): the mock-up's small chip
   "Espace : Plateforme ▾" instead of the rail's large name. */
body.md-ui .pf-top .md-rsel { flex-direction: row; align-items: center; gap: 4px; border: 1px solid var(--cs-line-2); border-radius: 4px; padding: 1px 8px; max-width: 260px; }
body.md-ui .pf-top .md-rsel-label { font: 400 12px/18px var(--cs-sans); text-transform: none; letter-spacing: 0; color: var(--cs-fg-2); white-space: nowrap; }
body.md-ui .pf-top .md-rsel-label::after { content: " :"; }
body.md-ui .pf-top .md-rsel-name, body.md-ui .pf-top .md-rsel-select { font: 400 12px/18px var(--cs-sans); color: var(--cs-fg-2); }
body.md-ui .pf-top .md-rsel-row { border: 0; min-height: 0; padding: 0; }
body.md-ui .pf-top .md-rsel-row .md-rsel-arrow:not(#cs-none) { font-size: 14px !important; line-height: 18px !important; height: 18px !important; }
body.md-ui .pf-top .md-account-btn { width: 32px; height: 32px; }
body.md-ui .pf-top .md-avatar { width: 28px; height: 28px; font-size: 11px; }

/* One left line for the words (Greg, 26.10.2026: "un peu en zigzag"): the
   brand, the first tab, the menu's headings and entries start their text 12 px
   inside the column, where the entries' own padding puts it; the boxes (a
   chosen entry, the search field) start on the column's edge. */
.pf-top .pf-brand { margin-left: 12px; }
.pf-tabs { padding-left: 15px; }
/* The arrows of a band of tabs that does not fit (js/tab-scroll.js), faded
   into the bar at the band's ends. */
.pf-tabs-arrow:not(#cs-none) {
    position: absolute; top: 0; bottom: 0; z-index: 2; width: 44px; margin: 0; border: 0; border-radius: 0;
    display: flex; align-items: center; cursor: pointer; color: var(--cs-fg-2);
    font: 400 22px/1 var(--cs-sans); height: auto; min-width: 0; box-shadow: none;
}
.pf-tabs-arrow:not(#cs-none):hover { color: var(--cs-gold); }
.pf-tabs-arrow.prev:not(#cs-none) { justify-content: flex-start; padding: 0 0 2px 6px; background: linear-gradient(to right, var(--cs-bar) 60%, transparent); }
.pf-tabs-arrow.next:not(#cs-none) { justify-content: flex-end; padding: 0 6px 2px 0; background: linear-gradient(to left, var(--cs-bar) 60%, transparent); }
.pf-tabs-arrow[hidden] { display: none !important; }
.pf-top .pf-space { margin-left: 18px; }
/* On a phone the bar has no room for the words' line nor the gap after the
   brand: the brand and the restaurant's choice close up. */
@media (max-width: 560px) {
  .pf-top .pf-brand { margin-left: 0; }
  .pf-top .pf-space { margin-left: 0; }
  .pf-top .pf-brand .pf-brand-sfx { display: none; }
}