/* css/vitrine-style.css
   Lot VP (Greg, 25.10.2026: "1 seul CSS pour toutes les pages sauf pour le
   mode Service"; "Pense a la vitrine aussi : police, couleurs, boutons,
   tuiles, tout !"). The showcase (index.html and its feature pages in four
   languages), the plans, the directory, the legal texts and the sign-in
   pages wear the look of the platform and the Edition: the tokens of
   css/console.css (--cs-*, porcelain light and soft graphite dark, following
   the site's theme switch), the metallic gold lines of css/platform-pages.css
   on boxes, tiles and separators, the solid gold sheen on the main calls to
   action, Atkinson Hyperlegible Next for every text. Nothing here is a value
   of its own: every colour, line and face is a --cs-* token; only sizes,
   radii and spacing are set, the console's family of shapes (square buttons
   of 4 px, boxes of 6 px), larger on the showcase.
   Loaded last, after the shared sheets, by those pages only (body.vp-style;
   the directory, whose page the API also serves from its own copy, imports
   it from css/directory.css and is reached by body.dir-page).
   Two ways in:
     1. a bridge: the Material and older tokens the pages' own sheets read
        (--md-*, --text, --gold...) take the console's values, so every rule
        already written follows without being rewritten;
     2. the pieces whose shape changes (bar, buttons, tiles, fields, chips).
   The tablet's lock screen (js/device-lock.js, body.tl-mode on login.html)
   is the Service mode: it keeps its night, untouched (every rule below
   requires body:not(.tl-mode)). */

/* ---------------------------------------------------------------- 1. the bridge */
/* On the body's children, not on the body: the splash after a sign-in
   (js/splash.js, a child of the body) keeps the night of the brand, as the
   lock screen. */
body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) > :not(.splash-overlay) {
  --md-surface: var(--cs-ground-solid);
  --md-surface-container-lowest: var(--cs-panel);
  --md-surface-container-low: var(--cs-bg);
  --md-surface-container: var(--cs-panel);
  --md-surface-container-high: var(--cs-panel-2);
  --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);
  /* Text on the solid gold: the card's colour reads on it in both themes
     (the gold is dark on porcelain, light on graphite). */
  --md-on-primary: var(--cs-panel);
  --md-primary-container: var(--cs-sel);
  --md-on-primary-container: var(--cs-fg);
  --md-secondary-container: var(--cs-sel);
  --md-on-secondary-container: var(--cs-fg);
  --md-tertiary-container: var(--cs-panel-2);
  --md-on-tertiary-container: var(--cs-fg);
  --md-error: var(--cs-crit);
  --md-error-container: var(--cs-crit-bg);
  --md-on-error-container: var(--cs-crit);
  --md-free: var(--cs-ok);
  --md-free-container: var(--cs-ok-bg);
  --md-on-free-container: var(--cs-ok);
  --md-success: var(--cs-ok);
  --md-success-container: var(--cs-ok-bg);
  --md-on-success-container: var(--cs-ok);
  --md-field-bg: var(--cs-bg);
  --md-scrim: var(--cs-scrim-2);
  --md-font-sans: var(--cs-sans);
  --md-elevation-1: none; --md-elevation-2: none; --md-elevation-3: none; --md-elevation-4: none; --md-elevation-5: none;
  --md-brand-rule-line: var(--cs-line-grad);
  --md-brand-hairline: var(--cs-line);
  --md-brand-hairline-key: var(--cs-line-2);
  --md-brand-ink: var(--cs-fg);
  --md-brand-ink-muted: var(--cs-fg-2);
  --md-brand-glass: var(--cs-panel);
  --md-brand-glass-key: var(--cs-panel-2);
  --md-brand-glass-key-hover: var(--cs-sel);
  --ro-gold-sheen: var(--cs-sheen);
  /* The sheets of before Material 3 (auth.css, pricing.css). */
  --text: var(--cs-fg); --muted: var(--cs-fg-2); --gold: var(--cs-gold); --gold2: var(--cs-gold);
  --line: var(--cs-line); --line-strong: var(--cs-line-2); --panel: var(--cs-panel); --card-bg: var(--cs-panel); --card-bg2: var(--cs-panel-2);
  --font: var(--cs-sans); --input-bg: var(--cs-bg); --input-border: var(--cs-line-2); --input-color: var(--cs-fg); --placeholder: var(--cs-fg-3);
  --danger: var(--cs-crit); --danger-text: var(--cs-crit); --status-active: var(--cs-ok); --bg-elev: var(--cs-panel);
  color-scheme: var(--cs-scheme);
  font-family: var(--cs-sans);
  color: var(--cs-fg);
}

/* The console reserves the scrollbar's gutter (css/console.css, for its
   panels); these pages keep the window's whole width as before: a layer
   fixed over the page still covers it edge to edge, and the tablet's lock
   screen keeps its width. */
html:has(> body.md-ui:is(.vp-style, .dir-page)) { scrollbar-gutter: auto; }

/* The ground: porcelain or graphite, fixed to the window, behind every page
   of the lot (the sign-in pages' night and the tonal discs give way). */
html:root:has(> body.md-ui:is(.vp-style, .dir-page):not(.tl-mode)) { background: var(--cs-ground) !important; background-attachment: fixed !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) { background: transparent !important; font-family: var(--cs-sans); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode)::before, html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode)::after { display: none !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(h1, h2, h3, h4, p, li, label, button, input, select, textarea, summary, a) { font-family: var(--cs-sans); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :focus-visible { outline-color: var(--cs-gold); }

/* ---------------------------------------------------------------- 2. the bar */
/* The bar of the Edition (css/platform-frame.css .pf-top): the bar's colour,
   its gold line below, the tabs' look for the menu; the logo stays the SVG. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--cs-bar); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent; border-image: var(--cs-line-grad) 1 / var(--cs-lwn); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar::after { display: none; }
/* Its width, gaps and sizes stay home.css's, phones included; a little lower. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar-in { height: 56px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-brand { display: flex; align-items: center; text-decoration: none; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-nav { gap: 2px; margin-left: 6px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-nav a { font: 500 14px/1.2 var(--cs-sans); color: var(--cs-fg-2); background: none; padding: 18px 12px 16px; border-radius: 0; border-bottom: 2px solid transparent; text-decoration: none; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-nav a:hover { color: var(--cs-gold); background: none; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-nav a[aria-current="page"] { color: var(--cs-gold); border-image: var(--cs-sheen) 1; }
/* The languages: the console's segmented control (.cs-seg). */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-lang { overflow: hidden; border: var(--cs-lw) solid transparent; border-radius: 4px;
  background: linear-gradient(var(--cs-bar), var(--cs-bar)) padding-box, var(--cs-line-grad) border-box; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-lang :is(a, button, .lang-btn) { min-width: 0; height: auto; margin: 0; font: 500 12px/1 var(--cs-sans) !important; letter-spacing: .04em;
  color: var(--cs-fg-2) !important; background: none !important; border: 0 !important; border-radius: 0 !important; text-decoration: none; cursor: pointer; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-lang :is(a, button, .lang-btn) + :is(a, button, .lang-btn) { border-left: 1px solid var(--cs-line) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-lang :is(a.is-on, button.is-on, .lang-btn.active) { background: var(--cs-sel) !important; color: var(--cs-fg) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-lang :is(a, button):hover { color: var(--cs-fg) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-icon-btn { border-radius: 4px; border: 0; background: none; color: var(--cs-fg-2); cursor: pointer; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-icon-btn:hover { background: var(--cs-panel-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-lang-select { border: var(--cs-lw) solid transparent; border-radius: 4px; color: var(--cs-fg); font: 500 13px/1 var(--cs-sans);
  background: linear-gradient(var(--cs-bar), var(--cs-bar)) padding-box, var(--cs-line-grad) border-box; }

/* ---------------------------------------------------------------- 3. buttons */
/* The console's buttons, square (4 px): the main call in the solid gold, its
   text dark; the others on the button's fill inside a gold line. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 4px;
  font: 600 14px/1 var(--cs-sans); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: filter .15s, background .15s; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-btn.h-btn-filled { background: var(--cs-sheen); color: var(--cs-gold-ink); border: 0; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-btn.h-btn-filled:hover { filter: brightness(1.05); box-shadow: none; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-btn:is(.h-btn-tonal, .h-btn-text) { color: var(--cs-fg); border: var(--cs-lw) solid transparent;
  background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad) border-box; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-btn:is(.h-btn-tonal, .h-btn-text):hover { color: var(--cs-gold); box-shadow: none; }
/* The directory's bar keeps the sign-in's dark text on the gold. */
html body.md-ui:is(.vp-style, .dir-page).dir-page:not(.tl-mode) .h-bar a.h-btn-filled { color: var(--cs-gold-ink); }
/* A long "learn more" wraps on a narrow phone (vitrine.css, S12). */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-feature-text .h-btn { height: auto; min-height: 40px; padding-top: 10px; padding-bottom: 10px; white-space: normal; line-height: 1.3; text-align: center; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-skip { border-radius: 4px; background: var(--cs-sheen); color: var(--cs-gold-ink); }

/* ---------------------------------------------------------------- 4. the showcase's type */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode).md-home { font-size: 16px; line-height: 1.6; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-title { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; font-weight: 600; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-sec-text h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-lead { font-size: 17px; color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.h-feature-text p, .v-sec-text p, .h-card p, .v-card p, .v-found-item p, .h-why-item p, .v-faq .v-answer) { color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.h-note, .v-cap, .h-vat) { color: var(--cs-fg-3); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.h-note a, .v-plans-line a, .v-found-item a.v-link, .v-crumbs a, .v-card .v-more) { color: var(--cs-gold); }
/* The hero's tonal disc goes: the ground has its own light (porcelain). */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-hero::before { display: none; }

/* ---------------------------------------------------------------- 5. tiles and boxes */
/* The console's box (.pf-box): the card's colour inside a thin metallic gold
   line, 6 px corners, no shadow. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.h-facts li, .h-card, .h-why-item, .h-plan, .v-card, .v-found-item, .v-faq details, .v-related a, .v-plans-line, .v-soon-hero,
  .auth-card, .pricing-card, .legal-card, .pr-card, .dir-card, .dir-map-box) {
  border: var(--cs-lw) solid transparent !important; border-radius: 6px !important; box-shadow: none !important; backdrop-filter: none !important;
  background: linear-gradient(var(--cs-panel), var(--cs-panel)) padding-box, var(--cs-line-grad) border-box !important; color: var(--cs-fg) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.v-card, .h-card, .v-related a):is(:hover, :focus-visible) {
  transform: none; background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad) border-box !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.v-card, .h-card) { transition: background .15s; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.v-card h3, .h-card h3, .v-found-item h3, .h-why-item h3, .h-plan h3) { font-weight: 600; color: var(--cs-fg); }
/* The pictograms' squares: the selected item's grey, the pictogram gold. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.v-ico-box, .h-card .h-ic) { border-radius: 4px; background: var(--cs-sel); color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.h-facts .v-ico, .h-facts .h-ic, .v-related .v-ico, .h-chip .h-ic) { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-why-num { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-price { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.h-price small, .v-year, .v-desc) { color: var(--cs-fg-2); }
/* Pills (.cs-pill, .cs-p-gold): 3 px corners, gold on the card. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.v-chip, .h-chip) { border-radius: 3px; background: none; color: var(--cs-gold); border: 1px solid var(--cs-gold); padding: 2px 8px; font-size: 12px; letter-spacing: .04em; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-chip-soon { color: var(--cs-fg-2); border-color: var(--cs-line-2); }
/* The check marks, gold. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-list li::before { background: var(--cs-gold); color: var(--cs-gold); }
/* The questions. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-faq summary::after { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-faq summary:focus-visible { border-radius: 6px; }
/* Screenshots in a frame of gold: 6 px corners, a soft shadow only. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-shot { border-radius: 6px; border: var(--cs-lw) solid transparent;
  background: linear-gradient(var(--cs-bg), var(--cs-bg)) padding-box, var(--cs-line-grad) border-box; box-shadow: 0 24px 48px -26px var(--cs-shadow); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-shots .h-shot { box-shadow: 0 16px 36px -24px var(--cs-shadow); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-shot img { background: var(--cs-bg); }

/* ---------------------------------------------------------------- 6. sections, footer */
/* A tinted section: the field's fill, a gold line above and below. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-section-tint { background: var(--cs-bg); border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-image: var(--cs-line-grad) 1 / var(--cs-lwn); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-suggest { background: var(--cs-sel); color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-footer { background: var(--cs-bar); border-top: 1px solid transparent; border-image: var(--cs-line-grad) 1 / var(--cs-lwn); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-footer .v-foot-h { color: var(--cs-fg-3); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-footer a { color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-footer a:hover { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-footer .site-id { border-top: 1px solid transparent; border-image: var(--cs-line-grad) 1 / var(--cs-lwn); color: var(--cs-fg-3); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .v-footer .site-id a { color: var(--cs-fg-3); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode).v-page .md-footer.md-footer-public { background: var(--cs-bar); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .md-footer.md-footer-public, html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .md-footer-version { font-family: var(--cs-sans); font-size: 12px; color: var(--cs-fg-3); }

/* ---------------------------------------------------------------- 7. the sign-in pages */
/* The card is the console's page card; the heading the console's page title,
   a little larger; the fields the console's, bordered in gold; the button
   the solid gold. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-page { background: none; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-divider { width: 160px; height: 1px; border: 0 !important; background: var(--cs-line-grad) !important; margin: 20px auto !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-heading { font: 600 22px/1.3 var(--cs-sans) !important; color: var(--cs-fg) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.auth-sub, .auth-brand-sub) { color: var(--cs-fg-2) !important; font-size: 14px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-field label { font: 600 12.5px/1.4 var(--cs-sans) !important; letter-spacing: 0 !important; color: var(--cs-fg-2) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-field :is(.auth-radio, .auth-terms label), html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-field.auth-terms label { font-weight: 400 !important; font-size: 13.5px !important; color: var(--cs-fg) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-choice legend { font: 600 12.5px var(--cs-sans); letter-spacing: 0; color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.auth-field, .auth-form) input:not([type="checkbox"]):not([type="radio"]),
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.auth-field, .auth-form) input:not([type="checkbox"]):not([type="radio"]):focus {
  min-height: 44px; padding: 0 12px !important; border-radius: 4px !important; border: var(--cs-lw) solid transparent !important; box-shadow: none !important;
  background: linear-gradient(var(--cs-bg), var(--cs-bg)) padding-box, var(--cs-line-grad) border-box !important;
  color: var(--cs-fg) !important; font: 400 16px var(--cs-sans) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.auth-field, .auth-form) input:not([type="checkbox"]):not([type="radio"]):focus { outline: 2px solid var(--cs-gold) !important; outline-offset: 1px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-field input::placeholder { color: var(--cs-fg-3) !important; opacity: 1; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-field input:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
  -webkit-box-shadow: 0 0 0 1000px var(--cs-bg) inset !important; box-shadow: 0 0 0 1000px var(--cs-bg) inset !important; -webkit-text-fill-color: var(--cs-fg) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-field input:is([type="checkbox"], [type="radio"]) { accent-color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-submit { height: 44px !important; border-radius: 4px !important; border: 0 !important; background: var(--cs-sheen) !important;
  color: var(--cs-gold-ink) !important; font: 600 15px var(--cs-sans) !important; box-shadow: none !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-submit:hover:not(:disabled) { background: var(--cs-sheen) !important; filter: brightness(1.05); box-shadow: none !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-submit:disabled { opacity: .55; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.auth-footer, .auth-footer a, .enr-link) { color: var(--cs-gold) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-info { background: var(--cs-ok-bg) !important; color: var(--cs-ok) !important; border-radius: 4px !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-error { color: var(--cs-crit) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-hint { color: var(--cs-fg-3); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-hint--note { border-radius: 4px; background: var(--cs-panel-2); color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-civility .md-seg__btn { border-color: var(--cs-line-2); color: var(--cs-fg-2); font-family: var(--cs-sans); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-civility .md-seg__btn[aria-checked="true"] { background: var(--cs-sel); color: var(--cs-fg); }
/* The console's segmented control: square ends (4 px), not a pill. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-civility.md-seg { border-radius: 4px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-civility .md-seg__btn { border-radius: 0; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-civility .md-seg__btn:first-child { border-radius: 4px 0 0 4px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-civility .md-seg__btn:last-child { border-radius: 0 4px 4px 0; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.pwd-requirements li, .pwd-hint) { color: var(--cs-fg-3) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.pwd-requirements li.met, .pwd-hint.valid) { color: var(--cs-ok) !important; }
/* The language bar of the card: a gold line above, the console's square
   choices. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-lang-bar { border-top: 1px solid transparent !important; border-image: var(--cs-line-grad) 1 / var(--cs-lwn); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-lang-bar .lang-btn { min-width: 40px; height: 30px; border-radius: 4px !important; color: var(--cs-fg-2) !important; font: 500 13px var(--cs-sans) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-lang-bar .lang-btn:hover { color: var(--cs-fg) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-lang-bar .lang-btn.active { background: var(--cs-sel) !important; color: var(--cs-fg) !important; }
/* The way home: the console's small "Retour" button. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .ro-home { padding: 6px 12px; border-radius: 4px; font: 500 13px/18px var(--cs-sans); color: var(--cs-fg);
  border: var(--cs-lw) solid transparent; background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad) border-box; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .ro-home:hover { color: var(--cs-gold); background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad) border-box; }
/* The logo follows the theme now (the ink one on porcelain); its sweep of
   light stays for the gold one. */
html[data-theme="ivory"] body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-brand-logo { content: url("../img/logo/md/logo-ivory-01-r.svg"); }
html[data-theme="ivory"] body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .auth-brand::after { display: none; }
/* The enrolment of a floor tablet (enroll.html): its six-digit field and its
   notes in the same pieces. */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .enr-note { border-radius: 4px; background: var(--cs-panel-2); color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .enr-countdown { color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .enr-countdown.is-late { color: var(--cs-crit); }

/* ---------------------------------------------------------------- 8. the plans */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card { padding: 28px 28px 22px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card .auth-heading { font-size: clamp(26px, 3vw, 32px) !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-toggle { border: var(--cs-lw) solid transparent; border-radius: 4px; padding: 3px; gap: 3px;
  background: linear-gradient(var(--cs-panel), var(--cs-panel)) padding-box, var(--cs-line-grad) border-box; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-toggle-opt { border-radius: 3px; color: var(--cs-fg-2); font: 600 14px var(--cs-sans); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-toggle-opt.selected { background: var(--cs-sel); color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-toggle-opt:focus-within { outline-color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-amount { font-weight: 700; color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-note { color: var(--cs-ok); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pr-card :is(.plan-pill, .pr-name, .pr-save) { border-radius: 3px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card .acc-cmp-wrap { border: var(--cs-lw) solid transparent; border-radius: 6px; overflow-x: auto;
  background: linear-gradient(var(--cs-panel), var(--cs-panel)) padding-box, var(--cs-line-grad) border-box; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card .acc-cmp { border-collapse: collapse; width: 100%; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card .acc-cmp :is(th, td) { border-color: var(--cs-line); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card .acc-cmp thead th { background: var(--cs-panel-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .pricing-card .acc-cmp tbody tr:nth-child(even) { background: var(--cs-bg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.pricing-vat, .site-id) { color: var(--cs-fg-3); }

/* ---------------------------------------------------------------- 9. the legal texts */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-card { padding: 28px 32px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-tabs a { border-radius: 4px; border: var(--cs-lw) solid transparent; color: var(--cs-fg-2);
  background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-line-grad) border-box; font-weight: 500; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-tabs a:hover { color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-tabs a.active { color: var(--cs-fg); background: linear-gradient(var(--cs-sel), var(--cs-sel)) padding-box, var(--cs-sheen) border-box; font-weight: 600; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-body { color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-body h3 { font-weight: 600; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-body hr { border-top-color: transparent; border-image: var(--cs-line-grad) 1 / var(--cs-lwn); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-table :is(th, td) { border-color: var(--cs-line); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-table th { background: var(--cs-panel-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-body blockquote { border-left-color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .legal-draft { border-radius: 4px; background: var(--cs-warn-bg); color: var(--cs-warn); border-color: var(--cs-warn); }

/* ---------------------------------------------------------------- 10. the directory */
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode).dir-page { color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-title { font-size: clamp(26px, 3vw, 36px); font-weight: 600; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.dir-intro, .dir-card-place, .dir-hours, .dir-terrace) { color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.dir-count, .dir-crumbs) { color: var(--cs-fg-3); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode).dir-page .dir-crumbs a { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-filter label { font-weight: 600; color: var(--cs-fg-2); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-filter .select { border-radius: 4px; border: var(--cs-lw) solid transparent; color: var(--cs-fg); font-family: var(--cs-sans);
  background-color: transparent; background-image: linear-gradient(var(--cs-bg), var(--cs-bg)), var(--cs-line-grad); background-origin: padding-box, border-box; background-clip: padding-box, border-box; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-filter .select:focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 1px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-card { overflow: hidden; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-card.is-on { background: linear-gradient(var(--cs-panel-2), var(--cs-panel-2)) padding-box, var(--cs-sheen) border-box !important; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-card-photo { background: var(--cs-sel); border-radius: 5px 5px 0 0; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-card-initial { color: var(--cs-gold); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode).dir-page .dir-card-name a { color: var(--cs-fg); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-chips li { border-radius: 3px; background: var(--cs-panel-2); color: var(--cs-fg-2); border: 1px solid var(--cs-line); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-closed { color: var(--cs-crit); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-terrace.is-open { color: var(--cs-ok); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-book { border-radius: 4px; background: var(--cs-sheen); color: var(--cs-gold-ink) !important; font-family: var(--cs-sans); font-weight: 600; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-book:hover { filter: brightness(1.05); background: var(--cs-sheen); }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-map { border-radius: 5px; }
html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .dir-cities-list a { color: var(--cs-gold); }

/* ---------------------------------------------------------------- 11. a phone */
/* The menu gives way under 1000 px, as before (home.css; the directory has its own sheet). */
@media (max-width: 1000px) {
  html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-nav { display: none; }
}
@media (max-width: 640px) {
  html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-login { padding: 0 14px; }
  html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.legal-card, .pricing-card) { padding: 20px 16px; }
}
@media (max-width: 440px) {
  html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) .h-bar .h-login { padding: 0 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.md-ui:is(.vp-style, .dir-page):not(.tl-mode) :is(.v-card, .h-card, .h-btn) { transition: none; }
}