/* base.css — reset, layout du shell, composants du système (DESIGN.md §3).
   Révision 2026-08-18 (D15) : matière OPAQUE. Plus de `backdrop-filter`, plus de dégradé de fond, plus de
   reflet spéculaire, plus de capsule sur les contrôles — c'était le langage macOS 26, Clément l'a rejeté.
   Ce qui sépare deux surfaces ici, c'est un filet de 1 px ; ce qui répond au survol, c'est un fond teinté.
   Les classes ne changent pas : les modules héritent. */
*, *::before, *::after { box-sizing: border-box; }
/* dimensions du shell qui changent avec la largeur (les couleurs, elles, ne vivent que dans tokens.css) */
:root { --barre-h: 56px; --card-pad: var(--s-5); }   /* --barre-h : la barre du bas en mobile ; --card-pad : marge interne des cartes */
/* html porte aussi le fond : en PWA sur iOS, le rebond en bout de page montre le fond de html, pas celui de body -
   sans ça, un éclair blanc à chaque tirage. overscroll-behavior coupe le rebond et le « tirer pour rafraîchir ». */
html { -webkit-text-size-adjust: 100%; background: var(--canvas); overscroll-behavior: none; }
body {
  margin: 0; min-height: 100vh; color: var(--text-primary);
  background: var(--canvas);
  font: 400 var(--fs-body)/1.5 var(--font-sans); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;   /* le voile gris d'iOS au toucher : nos contrôles ont déjà leur état d'appui */
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.01em; }
p { text-wrap: pretty; overflow-wrap: anywhere; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
.num, .kpi-value, td.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; color: var(--sidebar-text);
  background: var(--sidebar);
  display: flex; flex-direction: column; padding: var(--s-5) var(--s-3); overflow: hidden;
}
.sidebar::after { /* profondeur décorative — sidebar uniquement (DESIGN.md §2.5), bords nets */
  content: ''; position: absolute; inset: auto -60px -80px auto; width: 320px; height: 320px; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.05) 0 70px, transparent 71px), radial-gradient(circle at 70% 70%, rgba(206,154,59,.07) 0 130px, transparent 131px);
}
.brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-6); color: var(--sidebar-text-strong); position: relative; }
.brand-mark { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; object-fit: cover; background: var(--sidebar-active); }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: var(--sidebar-text); opacity: .7; }
.nav { display: flex; flex-direction: column; gap: 2px; position: relative; }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3); height: 34px; padding: 0 var(--s-3); border-radius: var(--r-md);
  color: var(--sidebar-text); font-size: var(--fs-nav); font-weight: 500; text-decoration: none; position: relative;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--sidebar-hover); text-decoration: none; }
.nav-item .icon { width: 16px; height: 16px; opacity: .8; }
.nav-item kbd { margin-left: auto; font: 500 11px/1 var(--font-mono); opacity: .35; }
.nav-item.active { color: var(--sidebar-text-strong); background: var(--sidebar-active); }
.nav-item.active .icon { opacity: 1; }
.nav-item.active::before { /* rail : le repère de position, à la place du reflet de verre */
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 2px 2px 0; background: var(--sidebar-text-strong);
}
.nav-item.active kbd { opacity: .6; }
.nav-item:focus-visible { outline-color: #fff; }
/* ---- Coulisses (D29) : le repli où vivent Santé, Équipe et la file de go complète ---- */
.nav-coulisses { margin-top: var(--s-3); border-top: 1px solid var(--sidebar-hairline); padding-top: var(--s-3); }
.nav-coulisses-sum { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); cursor: pointer; list-style: none;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sidebar-text); opacity: .6; user-select: none; min-height: 28px; }
.nav-coulisses-sum::-webkit-details-marker { display: none; }
.nav-coulisses-sum:hover { opacity: .9; }
.nav-coulisses-sum:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: var(--r-sm); }
.nav-coulisses-chev { transition: transform .15s ease; }
.nav-coulisses[open] .nav-coulisses-chev { transform: rotate(90deg); }
.nav-coulisses-corps { display: flex; flex-direction: column; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-coulisses-chev { transition: none; } }

.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); position: relative; }
.sync-chip {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--sidebar-hover); border: 1px solid var(--sidebar-hairline);
  font-size: var(--fs-label); line-height: 1.3;
}
.sync-chip .dot { flex: none; }
.sync-chip .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-chip button { margin-left: auto; background: none; border: 0; color: inherit; padding: 4px; border-radius: var(--r-sm); display: grid; place-items: center; }
.sync-chip button:hover { background: rgba(255,255,255,.14); }
.sync-chip button .icon { width: 14px; height: 14px; }
.sync-chip.is-warn { background: rgba(217,119,6,.32); border-color: rgba(255,255,255,.18); color: #fff; }
.sync-chip.is-danger { background: rgba(220,38,38,.38); border-color: rgba(255,255,255,.18); color: #fff; }
.sidebar-hint { font-size: 11px; color: var(--sidebar-text); opacity: .5; padding: 0 var(--s-3); }
.sidebar-hint kbd { font-family: var(--font-mono); }

.main { min-width: 0; padding: var(--s-6) var(--s-7) var(--s-9); }
.page-head { display: flex; align-items: center; gap: var(--s-4); min-height: 36px; margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--fs-page-title); font-weight: var(--fw-page-title); letter-spacing: var(--ls-page-title); }
.page-head .spacer { flex: 1; }
.page-head .actions { display: flex; gap: var(--s-2); align-items: center; }
#banners { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
#banners:empty { display: none; }
.banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-body-sm); }
.banner .icon { width: 16px; height: 16px; flex: none; }
.banner.warn { background: var(--warn-soft); color: var(--warn-text); }
.banner.danger { background: var(--danger-soft); color: var(--danger-text); }
.banner .banner-action { margin-left: auto; }
.banner .btn.sm { margin: -2px 0; }

/* ---------- grille & cartes ---------- */
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--card-pad); min-width: 0; }
.card.is-lifted { box-shadow: var(--shadow-2); }
/* l'en-tête de carte est séparé par un filet pleine largeur — le repère qui structure sans ombre */
.card-head {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; gap: var(--s-3); min-height: 22px;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--s-4); padding: var(--s-3) var(--card-pad);
  border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { font-size: var(--fs-card-title); font-weight: var(--fw-card-title); letter-spacing: 0; }
.card-head .spacer { flex: 1; }
.card-head .fresh { margin-left: auto; }
.card-body { min-width: 0; }
.card + .card { margin-top: 0; }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: var(--s-2); }
.kpi-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.kpi-label { font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); }
.kpi-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.kpi-value { font-size: var(--fs-kpi); font-weight: var(--fw-kpi); letter-spacing: var(--ls-kpi); line-height: 1.1; }
.kpi-sub { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* pastilles — rectangles à angles doux, jamais des gélules */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-label); font-weight: 500; line-height: 1; white-space: nowrap; }
.pill .icon { width: 12px; height: 12px; }
.pill.ok { background: var(--ok-soft); color: var(--ok-text); }
.pill.warn { background: var(--warn-soft); color: var(--warn-text); }
.pill.danger { background: var(--danger-soft); color: var(--danger-text); }
.pill.neutral { background: var(--surface-muted); color: var(--text-secondary); border: 1px solid var(--border); }
.pill.sky { background: var(--data-sky); color: var(--text-primary); }
.pill.lavender { background: var(--data-lavender); color: var(--text-primary); }
.pill.mint { background: var(--data-mint); color: var(--text-primary); }
.pill.navy { background: var(--primary-soft); color: var(--primary); }
.pill.orange { background: var(--accent-warm-soft); color: var(--accent-warm-text); }

/* fraîcheur (D6) */
.fresh { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--border-strong); display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.danger { background: var(--danger); }
.fresh.danger { color: var(--danger-text); } .fresh.warn { color: var(--warn-text); }

/* boutons — pleins, sans dégradé ni reflet ; l'appui assombrit, il ne déplace pas */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding: 0 var(--s-3);
  border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--fs-body-sm); font-weight: 500; white-space: nowrap;
  position: relative; transition: background .12s, border-color .12s, color .12s;
}
.btn .icon { width: 15px; height: 15px; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.primary:active:not(:disabled) { background: var(--primary-active); }
.btn.secondary { background: var(--control-bg); color: var(--text-primary); border-color: var(--control-border); }
.btn.secondary:hover { background: var(--control-bg-hover); border-color: var(--border-strong); }
.btn.secondary:active:not(:disabled) { background: var(--track); }
.btn.ghost { background: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--hover-tint); color: var(--text-primary); }
.btn.ghost:active:not(:disabled) { background: var(--hover-tint-strong); }
.btn.danger { background: var(--danger-soft); color: var(--danger-text); }
.btn.danger:hover { background: #FBD5D5; }
.btn.sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--fs-body-sm); }
.btn.icon-only { width: var(--control-h); padding: 0; }
.btn.icon-only.sm { width: var(--control-h-sm); }
.btn:disabled { opacity: .45; cursor: default; }
a.btn:hover { text-decoration: none; }
.btn kbd { font: 500 11px/1 var(--font-mono); opacity: .6; margin-left: 2px; }

/* champs */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); }
.input, .select, .textarea { height: var(--control-h-sm); padding: 0 10px; border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-body-sm); min-width: 0; transition: border-color .12s; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.textarea { height: auto; min-height: 72px; padding: var(--s-2) 10px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring); }
.input::placeholder { color: var(--text-muted); }

/* tables (CRM new gen) */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--card-pad)); padding: 0 var(--card-pad); max-width: calc(100% + 2 * var(--card-pad)); -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.table th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); height: 32px; padding: 0 10px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; z-index: 1; }
.table td { height: var(--row-h); padding: 0 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-muted); }
.table tbody tr.is-selected td { background: var(--primary-soft); }
.table td.num, .table th.num { text-align: right; }
table.table.is-fixed { table-layout: fixed; }
.table th.sortable { padding: 0; }
.th-sort { all: unset; cursor: pointer; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; width: 100%; box-sizing: border-box; }
.th-sort:hover { color: var(--text-primary); }
.th-sort:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.th-sort-ind { font-size: 11px; }
.table th.num .th-sort { justify-content: flex-end; }
.table td.wrap { white-space: normal; }
.table .row-actions { opacity: 0; transition: opacity .1s; display: inline-flex; gap: 4px; }
.table tr:hover .row-actions, .table tr:focus-within .row-actions { opacity: 1; }
@media (hover: none) { .table .row-actions { opacity: 1; } }

/* listes */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: var(--s-3); min-height: 42px; padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .sub { font-size: var(--fs-body-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .amount { font-weight: 500; }
.list-row .amount.plus { color: var(--ok-text); }
.dot-color { width: 10px; height: 10px; border-radius: var(--r-pill); flex: none; }

/* états */
.empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-muted); font-size: var(--fs-body-sm); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.empty strong { display: block; color: var(--text-secondary); font-weight: 500; margin-bottom: 4px; }
/* « Disponible sur le Mac » (lib.js › indisponible) : même carte vide, une icône au-dessus, ton neutre - jamais rouge */
.empty.indisponible > .icon { display: block; width: 22px; height: 22px; margin: 0 auto var(--s-2); color: var(--text-muted); }
.skeleton { background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 50%, var(--surface-muted) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-xs); min-height: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* toasts — surface sombre pleine */
#toasts { position: fixed; right: var(--s-6); bottom: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); z-index: 60; }
.toast {
  background: #12201B; color: #fff; padding: 10px var(--s-4); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  font-size: var(--fs-body-sm); max-width: 380px; display: flex; gap: var(--s-2); align-items: center; animation: toast-in .14s ease-out;
}
.toast.ok { background: #14532D; } .toast.danger { background: #7F1D1D; } .toast.warn { background: #78350F; }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }

/* palette ⌘K — panneau plein sur voile sombre (pas de flou) */
.palette-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: grid; place-items: start center; padding-top: 12vh; }
.palette {
  width: min(620px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.palette input { width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--border); padding: 0 var(--s-4); font-size: 15px; outline: none; background: transparent; }
.palette input:focus-visible { box-shadow: inset 0 -2px 0 var(--focus-ring); }
.palette ul { list-style: none; margin: 0; padding: var(--s-2); max-height: 50vh; overflow: auto; }
.palette li { display: flex; align-items: center; gap: var(--s-3); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-body-sm); cursor: pointer; }
.palette li .icon { width: 15px; height: 15px; color: var(--text-muted); }
.palette li .src { margin-left: auto; font-size: var(--fs-label); color: var(--text-muted); }
.palette li.is-active { background: var(--primary-soft); color: var(--primary); }
.palette .hint { padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); display: flex; gap: var(--s-4); }
.palette kbd { font-family: var(--font-mono); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 5px; }

/* aide raccourcis */
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-4); font-size: var(--fs-body-sm); }
.help-grid kbd { font-family: var(--font-mono); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 6px; font-size: 12px; }

/* ---------- « Plus » : la feuille du bas (mobile, chantier « appli mobile » 2026-09-02) ----------
   La barre du bas ne porte que quatre pages ; « Plus » ouvre une feuille qui monte du bas avec le reste, les
   coulisses, l'état de synchro et le bouton Synchroniser (tout ce que la colonne de gauche porte sur desktop).
   Matière opaque comme la palette ⌘K : surface pleine, angles 12 px en haut, voile --scrim sans flou. */
.nav-plus { display: none; border: 0; background: none; font: inherit; cursor: pointer; }
.feuille-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; align-items: flex-end; }
.feuille {
  width: 100%; max-height: calc(100vh - 48px); overflow: auto; background: var(--surface);
  border-top: 1px solid var(--border-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3);
  padding: var(--s-2) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
}
.feuille-head { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-2); }
.feuille-head h2 { font-size: var(--fs-card-title); font-weight: var(--fw-card-title); }
.feuille-head .spacer { flex: 1; }
.feuille-titre { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: var(--s-3) var(--s-3) var(--s-1); }
.feuille-item {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r-md);
  color: var(--text-primary); font-size: var(--fs-body); font-weight: 500; text-decoration: none;
}
.feuille-item:hover { background: var(--hover-tint); text-decoration: none; }
.feuille-item.active { background: var(--primary-soft); color: var(--primary); }
.feuille-item .icon { width: 18px; height: 18px; color: var(--text-secondary); }
.feuille-item.active .icon { color: var(--primary); }
.feuille-item kbd { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.feuille-sync { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3) var(--s-3) 0; border-top: 1px solid var(--border); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.feuille-sync .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.feuille-sync.is-warn .txt { color: var(--warn-text); }
.feuille-sync.is-danger .txt { color: var(--danger-text); }
.feuille-sync .btn { flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  :root { --sidebar-w: 60px; }
  .brand-name, .brand-sub, .nav-item span.label, .nav-item kbd, .sidebar-hint, .sync-chip .txt, .nav-coulisses-sum span { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .sync-chip { justify-content: center; }
  .sync-chip button { margin-left: 0; }
  .col-3 { grid-column: span 6; } .col-4 { grid-column: span 6; } .col-8, .col-6 { grid-column: span 12; }
  .main { padding: var(--s-5); }
}
/* ---- mobile (< 768 px) : la barre du bas, les zones sûres iOS, les cibles de 44 px (chantier « appli mobile » 2026-09-02) ---- */
@media (max-width: 767px) {
  :root { --card-pad: var(--s-4); }
  .shell { grid-template-columns: 1fr; }
  /* la colonne devient une barre du bas : 4 pages + « Plus ». Elle descend sous l'indicateur d'accueil de l'iPhone
     (safe-area) sans que les cibles y passent. Rien n'y est sélectionnable : un appui long ne surligne pas un onglet. */
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; z-index: 40;
    height: calc(var(--barre-h) + env(safe-area-inset-bottom)); padding: 0 var(--s-1) env(safe-area-inset-bottom);
    flex-direction: row; align-items: stretch; border-top: 1px solid var(--sidebar-hairline);
    user-select: none; -webkit-user-select: none;
  }
  .sidebar::after { display: none; }
  .brand, .sidebar-bottom, .nav-coulisses { display: none; }   /* tout ça vit dans la feuille « Plus » */
  .nav { flex-direction: row; width: 100%; gap: 0; justify-content: space-around; align-items: stretch; }
  .nav-item { display: none; }
  .nav-item[data-mobile] {
    display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 44px; height: var(--barre-h);
    padding: 0 2px; border-radius: 0; font-size: 10px; font-weight: 500; line-height: 1;
  }
  .nav-item[data-mobile] .icon { width: 20px; height: 20px; }
  .nav-item[data-mobile] kbd { display: none; }
  .nav-item[data-mobile] .label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item.active { background: var(--sidebar-active); }
  .nav-item.active::before { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: 16px; height: 2px; border-radius: 2px 2px 0 0; }
  .nav-plus { display: flex; color: var(--sidebar-text); }
  .nav-plus:hover { background: var(--sidebar-hover); }
  .nav-plus:focus-visible { outline-color: #fff; }
  /* le plan de travail : sous l'encoche en haut, au-dessus de la barre en bas */
  .main { padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--s-4) calc(var(--barre-h) + env(safe-area-inset-bottom) + var(--s-5)); }
  .page-head { flex-wrap: wrap; row-gap: var(--s-2); }
  .page-head h1 { flex: 1 1 auto; min-width: 0; }
  .page-head .actions { flex-wrap: wrap; max-width: 100%; }
  .col-3, .col-4, .col-6, .col-8 { grid-column: span 12; }
  .table .row-actions { opacity: 1; }
  .table td { height: 44px; }
  /* cibles de 44 px : boutons, champs, lignes. Un pouce n'est pas un curseur. */
  .btn, .btn.sm { height: 44px; }
  .btn.icon-only, .btn.icon-only.sm { width: 44px; }
  .input, .select { height: 44px; }
  .list-row { min-height: 48px; }
  /* 16 px minimum dans un champ : en dessous, iOS zoome la page à la prise de focus */
  .input, .select, .textarea, .palette input { font-size: 16px; }
  .banner { flex-wrap: wrap; }
  .banner .banner-action { margin-left: 0; }
  #toasts { left: var(--s-4); right: var(--s-4); bottom: calc(var(--barre-h) + env(safe-area-inset-bottom) + var(--s-3)); }
  .toast { max-width: none; }
  .palette-backdrop { padding-top: max(var(--s-4), env(safe-area-inset-top)); }
  .palette { width: calc(100vw - 16px); }
  .kpi-value { font-size: 26px; }
}