/* =====================================================================
   Rapports SI OneRetail : feuille de l'application (refonte HIG du 20/10/2026).
   Construite sur web/static/tokens.css (chargé avant) : aucune couleur en dur
   ici, uniquement des jetons. Langage Apple (typographie système, échelle iOS,
   grille de 8 pt, rayons concentriques, boutons capsule, champs de 44 px,
   listes groupées, contrôles segmentés, feuilles), thème sombre choisi ou
   automatique (tokens.css). Palette bleue du 28/10/2026 : actions en bleu
   (--accent), alertes en orange (--alert, « Critique » plein --critical),
   erreurs bloquantes en rouge (--danger, octogone), « Information » en
   gris-bleu (--info), montants négatifs en bordeaux (--negative) avec le
   signe −, enseignes en pastille (.ens : Franprix ronde, Monoprix carrée).
   Les tableaux (colonnes, ordre, intitulés, formats) ne sont pas touchés.
   ===================================================================== */

/* ---------- Socle ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--tr-text); color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
::selection { background: var(--accent-tint-hover); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.sr { position: absolute; inset-inline-start: 0; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: var(--space-3); top: -80px; z-index: 200; background: var(--bg-elevated); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-weight: var(--fw-semibold); box-shadow: var(--shadow-2); }
.skip:focus { top: var(--space-3); }
.icon { flex: none; }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; color: var(--label-2); }
.muted { color: var(--label-2); }
.small { font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.nc { font-style: italic; color: var(--label-2); }
.neg { color: var(--negative); }
.tab { font-variant-numeric: tabular-nums; }
.link { color: var(--accent); font-weight: var(--fw-semibold); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: none; }
.link:hover { text-decoration: underline; }
kbd, .kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-xs); background: var(--fill-3); font: var(--fw-semibold) var(--fs-caption2) var(--font); letter-spacing: var(--tr-caption); color: var(--label-2); }
[hidden] { display: none !important; }

/* ---------- Boutons : capsules (primaire plein, secondaire teinté) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); height: var(--control-h); padding: 0 var(--space-5); border-radius: var(--radius-full); border: 0; font-size: var(--fs-subhead); font-weight: var(--fw-semibold); letter-spacing: var(--tr-text); cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { border-radius: var(--radius-full); }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-fill-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-fill-active); }
.btn-secondary { background: var(--accent-tint); color: var(--accent); }
.btn-secondary:hover:not(:disabled) { background: var(--accent-tint-hover); }
.btn-sm { min-height: var(--control-h-sm); height: var(--control-h-sm); padding: 0 var(--space-3-5); font-size: var(--fs-footnote); gap: var(--space-1-5); }
.btn[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); }
/* barres d'outils (en-tête de page, en-tête du résultat, bandeau d'indicateurs, barre supérieure) :
   boutons gris (« bezeled gray » HIG), pictogramme d'accent ; le rouge reste une petite touche */
.topbar .btn-secondary, .page-actions .btn-secondary, .card-actions .btn-secondary, .kpi-bandeau-actions .btn-secondary, .ed-acts-sec .btn-secondary, .pi-barre .btn-secondary { background: var(--fill-3); color: var(--label); }
.topbar .btn-secondary:hover:not(:disabled), .page-actions .btn-secondary:hover:not(:disabled), .card-actions .btn-secondary:hover:not(:disabled), .kpi-bandeau-actions .btn-secondary:hover:not(:disabled), .ed-acts-sec .btn-secondary:hover:not(:disabled), .pi-barre .btn-secondary:hover:not(:disabled) { background: var(--fill-2); }
.topbar .btn-secondary .icon, .page-actions .btn-secondary .icon, .card-actions .btn-secondary .icon, .kpi-bandeau-actions .btn-secondary .icon, .ed-acts-sec .btn-secondary .icon, .pi-barre .btn-secondary .icon { color: var(--accent); }
.btn-secondary[aria-expanded="true"], .btn-secondary[aria-pressed="true"] { background: var(--accent-tint-hover); color: var(--accent); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--radius-full); border: 0; background: var(--fill-3); color: var(--label-2); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
.icon-btn:hover { background: var(--fill-2); color: var(--label); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { border-radius: var(--radius-full); }

/* ---------- Champs : 44 px, fond rempli, anneau d'accent au focus ---------- */
.input { width: 100%; height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--bg-elevated); color: var(--label); font-size: var(--fs-subhead); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.input::placeholder { color: var(--label-3); }
.input:hover:not(:focus):not(:disabled) { border-color: var(--separator); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.input:disabled { opacity: .5; }
.input[aria-invalid="true"] { border-color: var(--danger); }
select.input { appearance: none; -webkit-appearance: none; padding-inline-end: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238792A2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.input-sm { font-size: var(--fs-footnote); }
.field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.field-label { font-weight: var(--fw-semibold); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label); }
.field-hint { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.field-error { display: flex; gap: var(--space-1-5); align-items: flex-start; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--danger); font-weight: var(--fw-medium); }
.field-error .icon { margin-top: 1px; }
.field-error small { color: var(--label-2); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); font-size: var(--fs-subhead); cursor: pointer; user-select: none; }
.check input { width: 20px; height: 20px; accent-color: var(--accent-fill); margin: 0; }
textarea.input { height: auto; min-height: 88px; padding: var(--space-3); resize: vertical; line-height: var(--lh-subhead); }

/* ---------- Badges (capsules d'état : teinte + libellé) ---------- */
.badge { display: inline-flex; gap: var(--space-1); align-items: center; min-height: 22px; padding: 0 var(--space-2); font-size: var(--fs-caption1); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: var(--tr-caption); color: var(--label); white-space: nowrap; background: var(--fill-3); border-radius: var(--radius-full); }
.badge-ok { color: var(--green); background: var(--green-tint); }
/* palette bleue (28/10/2026) : alerte en orange (clair : « Alerte », plein : « Critique »), erreur bloquante en rouge,
   « Information » en gris-bleu ; neutre en gris ardoise */
.badge-warn, .badge-alerte { color: var(--alert); background: var(--alert-tint); }
.badge-critique { color: var(--on-critical); background: var(--critical); }
.badge-danger { color: var(--danger); background: var(--danger-tint); }
.badge-info { color: var(--info); background: var(--info-tint); }
.badge-neutre { color: var(--neutral); background: var(--neutral-tint); }
/* code enseigne : pastille pleine à gauche du nom, toujours avec le texte (ronde : Franprix, carrée : Monoprix),
   jamais d'icône ni de fond teinté ; le texte garde sa couleur normale */
.ens { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ens::before { content: ""; flex: none; width: 9px; height: 9px; }
.ens.fp::before { background: var(--franprix); border-radius: 50%; }
.ens.mp::before { background: var(--monoprix); border-radius: 2px; }
/* série Monoprix dans un graphique à deux enseignes : hachurée (lisible sans la couleur) */
.serie-fp { background: var(--franprix); }
.serie-mp { background-color: var(--monoprix); background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .32) 4px 6px); }
.tag-ht { display: inline-flex; align-items: center; font-style: normal; font-size: var(--fs-caption2); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; padding: 1px var(--space-1-5); border-radius: var(--radius-xs); background: var(--fill-3); color: var(--label-2); white-space: nowrap; }
.code-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: var(--fs-caption2); font-weight: var(--fw-bold); background: var(--fill-3); color: var(--label); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Logo : toujours sur plaque blanche (charte), recadré sur ses marges ---------- */
.logo-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--logo-plate); border-radius: var(--radius-md); overflow: hidden; }
.logo-plate img { display: block; height: 116px; width: auto; max-width: none; margin: -30px -18px; }
.logo-plate.sm img { height: 72px; margin: -19px -12px; }

/* ---------- Coquille : menu latéral + barre supérieure ---------- */
.shell { display: flex; min-height: 100vh; }
/* colonne du menu peinte par la coquille sur toute la hauteur du document (le menu, fixe, défile à l'intérieur) */
@media (min-width: 961px) {
  .shell { background: linear-gradient(90deg, var(--bg-elevated) calc(var(--sidebar-w) - 1px), var(--separator-soft) calc(var(--sidebar-w) - 1px) var(--sidebar-w), transparent var(--sidebar-w)); }
}
.sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-elevated); border-inline-end: 1px solid var(--separator-soft); display: flex; flex-direction: column; z-index: 40; transition: transform var(--dur-normal) var(--ease-out); }
.brand-bar { display: none; }
.sidebar-brand { padding: var(--space-4) var(--space-5) var(--space-2); }
.brand-caption { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--label-2); font-weight: var(--fw-medium); margin-top: var(--space-1); }
.nav { padding: var(--space-2) var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); color: var(--label); font-size: var(--fs-subhead); font-weight: var(--fw-regular); line-height: 1.25; position: relative; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-link span { min-width: 0; overflow-wrap: anywhere; }
.nav-link .icon { color: var(--label-2); }
.nav-link:hover { background: var(--bg-hover); }
.nav-link:active { background: var(--bg-pressed); }
.nav-link.active { background: var(--accent-fill); color: var(--on-accent); font-weight: var(--fw-semibold); }
.nav-link.active .icon { color: var(--on-accent); }
.nav-link:focus-visible { border-radius: var(--radius-md); }
.nav-link .badge { margin-inline-start: auto; }
.nav-section { margin: var(--space-4) var(--space-3) var(--space-1); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-semibold); color: var(--label-2); }
.sidebar-foot { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--separator-soft); }
.proto-tag { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-caption1); color: var(--label-2); font-weight: var(--fw-semibold); }
.foot-sub { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--label-2); margin-top: 2px; }
.sidebar-backdrop { display: none; }
.main { flex: 1; min-width: 0; margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; }
/* barre supérieure : matériau translucide (le contenu défile dessous), repli opaque sans backdrop-filter */
.topbar { position: sticky; top: 0; z-index: 30; height: 52px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-8); background: var(--bg-chrome-solid); border-bottom: 1px solid var(--separator-soft); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg-chrome); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.topbar-title { font-size: var(--fs-headline); font-weight: var(--fw-semibold); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); }
.menu-btn, .topbar-logo { display: none; }
.menu-btn { align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--accent); cursor: pointer; flex: none; }
.menu-btn:hover { background: var(--bg-hover); }
.search-trigger { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2) 0 var(--space-3); min-width: 240px; border: 0; border-radius: var(--radius-md); background: var(--fill-3); color: var(--label-2); cursor: pointer; font-size: var(--fs-subhead); transition: background-color var(--dur-fast) var(--ease-out); }
.search-trigger:hover { background: var(--fill-2); }
.search-trigger span { flex: 1; text-align: start; }
.user-wrap { position: relative; }
.user-chip { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--radius-full); border: 0; background: transparent; cursor: pointer; text-align: start; transition: background-color var(--dur-fast) var(--ease-out); }
.user-chip:hover { background: var(--bg-hover); }
.user-chip .icon { color: var(--label-3); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: var(--fs-caption1); font-weight: var(--fw-bold); flex: none; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta b { font-size: var(--fs-footnote); font-weight: var(--fw-semibold); }
.user-meta span { font-size: var(--fs-caption1); color: var(--label-2); }
/* menus : coins 14 px, ombre douce, lignes de 44 px */
.popover { position: absolute; top: 50px; inset-inline-end: 0; width: 340px; max-width: calc(100vw - 24px); background: var(--bg-elevated); border-radius: var(--radius-popover); box-shadow: var(--shadow-3); z-index: 60; overflow: hidden; transform-origin: top right; animation: or-pop var(--dur-fast) var(--ease-out); }
.popover-head { padding: var(--space-3) var(--space-4); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--separator-soft); display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; }
.popover-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-4); border: 0; border-bottom: 1px solid var(--separator-soft); background: transparent; cursor: pointer; text-align: start; }
.popover-item:last-child { border-bottom: 0; }
.popover-item:hover { background: var(--bg-hover); }
.popover-item[aria-checked="true"] { background: var(--accent-tint); }
.popover-item .pi-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.popover-item .pi-text b { font-size: var(--fs-subhead); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.popover-item .pi-text span { font-size: var(--fs-footnote); color: var(--label-2); }
.user-menu-foot { padding: var(--space-3) var(--space-4); display: flex; justify-content: flex-end; }
/* sélecteur d'apparence Clair / Sombre / Auto (menu du compte, pages de connexion ; theme.js) */
.theme-choix { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.theme-choix-lib { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.theme-choix .seg { flex-wrap: nowrap; }
.theme-choix .seg button { min-width: 56px; }
.popover .theme-choix { min-height: var(--touch); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--separator-soft); }
.popover .theme-choix-lib { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); }
.dev-tag { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 24px; padding: 0 var(--space-2-5); border-radius: var(--radius-full); background: var(--orange-tint); color: var(--orange); font-size: var(--fs-caption1); font-weight: var(--fw-semibold); white-space: nowrap; }
.dev-tag-mobile { display: none; }
.dev-banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--orange-tint); color: var(--label); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-medium); }
.dev-banner .icon { color: var(--orange); }

/* bandeau de fraîcheur : ligne d'état discrète sous la barre */
.fresh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5) var(--space-3); padding: var(--space-2) var(--space-8); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.fresh > span:last-child { flex: 1 1 480px; min-width: 0; }
.fresh .sep { color: var(--label-3); }
.fresh b { color: var(--label); font-weight: var(--fw-semibold); }
.fresh.fresh-err { background: var(--danger-tint); color: var(--label); box-shadow: inset 3px 0 0 var(--danger); }
.fresh.fresh-err b { color: var(--danger); }
.content { padding: var(--space-6) var(--space-8) var(--space-12); max-width: 1480px; width: 100%; margin: 0 auto; }
.content:focus { outline: none; box-shadow: none; }

/* ---------- Pages ---------- */
.page { display: flex; flex-direction: column; gap: var(--space-5); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-head h2 { font-family: var(--font-display); font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); overflow-wrap: anywhere; }
.page-sub { color: var(--label-2); margin-top: var(--space-1); max-width: 820px; font-size: var(--fs-subhead); }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--label-2); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-medium); margin-bottom: var(--space-1); }
.crumbs a { color: var(--accent); }
.crumbs a:hover { text-decoration: underline; }
.crumbs .icon { color: var(--label-3); }

/* ---------- Cartes : fond élevé, coins 16 px, ombre discrète ---------- */
.card { background: var(--bg-elevated); border-radius: var(--radius-card); box-shadow: var(--shadow-1); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; flex-wrap: wrap; }
.card-head h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-semibold); letter-spacing: var(--tr-text); }
.card-head h3 .icon { color: var(--label-2); }
.card-sub { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); margin-top: 2px; }
.card-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.card-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.card-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--separator-soft); font-size: var(--fs-footnote); color: var(--label-2); }
.card-foot a { color: var(--accent); font-weight: var(--fw-semibold); }
.card-foot a:hover { text-decoration: underline; }

/* ---------- Indicateurs ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.kpi { background: var(--bg-elevated); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; color: inherit; }
a.kpi { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
a.kpi:hover { box-shadow: var(--shadow-2); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 28px; }
.kpi-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); font-weight: var(--fw-semibold); }
.kpi-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--fill-3); color: var(--label-2); display: flex; align-items: center; justify-content: center; flex: none; }
.kpi-value { font-family: var(--font-display); font-size: var(--fs-title1); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); font-variant-numeric: tabular-nums; line-height: var(--lh-title1); overflow-wrap: anywhere; }
.kpi-value small { font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--label-2); letter-spacing: 0; margin-inline-start: var(--space-1); }
.kpi-hint { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.kpi-hint b { color: var(--label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.kpi-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-caption1); color: var(--label-2); margin-top: var(--space-1); }
.delta { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--fill-3); color: var(--label); font-size: var(--fs-caption1); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-link { margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--accent); display: flex; align-items: center; gap: var(--space-1); }
.kpi-link .icon { color: var(--accent); }
a.kpi:hover .kpi-link span { text-decoration: underline; }
.kpi-sm .kpi-value { font-size: var(--fs-title2); line-height: var(--lh-title2); }
.kpi-wide { grid-column: span 2; }
.mini-leg { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: var(--space-1-5); font-size: var(--fs-caption1); color: var(--label); }
.mini-leg span { display: inline-flex; align-items: center; gap: 5px; }
.mini-leg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.kpi ol { margin: var(--space-1) 0 0; padding-inline-start: 18px; font-size: var(--fs-footnote); color: var(--label); display: flex; flex-direction: column; gap: 3px; }
.kpi ol li::marker { color: var(--label-2); font-variant-numeric: tabular-nums; }
.kpi ol .v { font-variant-numeric: tabular-nums; color: var(--label); font-weight: var(--fw-semibold); white-space: nowrap; }
.kpi ol .muted { font-size: var(--fs-caption1); }
.kpi .kpi-plus summary { cursor: pointer; font-size: var(--fs-caption1); color: var(--accent); margin-top: var(--space-1); }
.kpi-rapport { display: flex; flex-direction: column; }
.kpi-rapport .kpi-hint.small { font-size: var(--fs-caption1); }
.lien-art { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; color: var(--label); text-decoration: underline; text-decoration-color: var(--separator); text-underline-offset: 2px; }
.lien-art:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- Barres d'outils, contrôles segmentés ---------- */
.filter-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* contrôle segmenté : piste grise, segment choisi en relief */
.seg { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; border-radius: 9px; background: var(--seg-track); flex-wrap: wrap; min-height: var(--seg-h); }
.seg button { position: relative; border: 0; background: transparent; padding: 0 var(--space-3); min-height: calc(var(--seg-h) - 4px); border-radius: 7px; font-size: var(--fs-footnote); font-weight: var(--fw-medium); color: var(--label); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.seg button:hover:not([aria-pressed="true"]):not([aria-checked="true"]) { background: var(--fill-4); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--seg-thumb); box-shadow: var(--seg-thumb-shadow); font-weight: var(--fw-semibold); }
.seg button:focus-visible { border-radius: 7px; }
/* comparaison sans historique (début d'activité, 29/10/2026) : grisée, hachures discrètes, curseur « interdit » ;
   texte --label-2 (6,2:1 sur blanc) : lisible, distinct d'un bouton actif ; le motif est dans l'info-bulle */
.seg button.cmp-indispo, .seg button[aria-disabled="true"] { color: var(--label-2); font-weight: var(--fw-medium); cursor: not-allowed; background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--fill-3) 5px 6px); }
.seg button.cmp-indispo:hover { background-color: transparent; }
.seg button.cmp-indispo[aria-pressed="true"] { background-color: var(--seg-thumb); box-shadow: none; outline: 1px dashed var(--separator); outline-offset: -1px; }
.sticker.indispo { background: transparent; border: 1px dashed var(--separator); color: var(--label-2); font-weight: var(--fw-medium); cursor: help; }
.note-indispo { color: var(--label-2); }
.kpi-indispo .kpi-value, .kpi-indispo .kpi-sous { color: var(--label-2); }
.input.param-date { width: 124px; font-variant-numeric: tabular-nums; }
.table td.cell-libre { white-space: normal; overflow-wrap: anywhere; min-width: 9em; }
.chip[aria-disabled="true"], .chip[aria-disabled="true"]:hover { color: var(--label-2); cursor: not-allowed; background: transparent; box-shadow: inset 0 0 0 1px var(--separator); }
.seg-sm { min-height: 28px; }
.seg-sm button { min-height: 24px; padding: 0 var(--space-2-5); font-size: var(--fs-caption1); }
.lock-note { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--fill-3); font-size: var(--fs-footnote); color: var(--label); }
.lock-note .icon { color: var(--label-2); }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-footnote); color: var(--label); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.legend em { font-style: normal; color: var(--label-2); }
.ax { font: var(--fw-medium) var(--fs-caption2) var(--font); fill: var(--label-2); font-variant-numeric: tabular-nums; }
.hbars { display: flex; flex-direction: column; gap: var(--space-2-5); }
.hb-row { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2-5); font-size: var(--fs-footnote); }
.hb-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 10px; background: var(--chart-track); border-radius: var(--radius-full); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--chart-bar); }
.hb-val { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; }
.hb-val span { color: var(--label-2); font-weight: var(--fw-medium); margin-inline-start: var(--space-1-5); }
.hb-row.is-nc i { background: var(--chart-bar-nc); }
/* état vide */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); color: var(--label-2); }
.empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--fill-3); display: flex; align-items: center; justify-content: center; color: var(--label-2); margin-bottom: var(--space-2); }
.empty h4 { color: var(--label); font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-semibold); }
.empty p { font-size: var(--fs-subhead); max-width: 420px; }
.empty .btn { margin-top: var(--space-2); }
/* listes d'alertes (diapositives, aide) */
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alert-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--row-h); padding: var(--space-2-5) var(--space-1); border-bottom: 1px solid var(--separator-soft); }
.alert-list li:last-child { border-bottom: 0; }
.alert-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.alert-ic.n1 { background: var(--alert-tint); color: var(--alert); }
.alert-ic.n0 { background: var(--critical); color: var(--on-critical); }   /* niveau « Critique » (28/10/2026) : orange plein */
.alert-ic.n3 { background: var(--info-tint); color: var(--info); }
.alert-ic.ok { background: var(--green-tint); color: var(--green); }
.alert-t { font-weight: var(--fw-semibold); }
.alert-t .badge { margin-inline-start: var(--space-1-5); vertical-align: 1px; }
.alert-s { font-size: var(--fs-footnote); color: var(--label-2); margin-top: 1px; }
.dash-filtres { flex-wrap: wrap; justify-content: flex-end; }
.dash-perso { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.dash-perso[hidden] { display: none; }
.cmp-comparables { color: var(--accent); font-weight: var(--fw-semibold); cursor: help; }
.cmp-table th.cmp-lab { background: none; text-transform: none; letter-spacing: 0; font-size: var(--fs-footnote); color: var(--label); font-weight: var(--fw-regular); border-bottom: 1px solid var(--separator-soft); white-space: normal; }
.cmp-table td.num, .cmp-table th.num { text-align: end; }
#tuiles:empty, #note-cmp:empty { display: none; }
/* encadrés : zone teintée, coins 12 px, pictogramme d'état */
.callout { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.callout > .icon { color: var(--label-2); margin-top: 1px; }
.callout p { color: var(--label); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.callout p + p { margin-top: var(--space-1); }
.callout.info { background: var(--fill-4); box-shadow: none; }
.callout.info > .icon { color: var(--green); }
.callout.warn { background: var(--alert-tint); box-shadow: inset 3px 0 0 var(--alert-fill); }
.callout.warn > .icon { color: var(--alert); }
/* erreur bloquante (données indisponibles, échec) : rouge, octogone ; réservé à ce qui empêche d'utiliser un chiffre */
.callout.err { background: var(--danger-tint); box-shadow: inset 3px 0 0 var(--danger); }
.callout.err > .icon { color: var(--danger); }
.callout a { color: var(--accent); font-weight: var(--fw-semibold); }
.callout a:hover { text-decoration: underline; }

/* ---------- Paramètres d'un rapport ---------- */
.params { padding: var(--space-4) var(--space-5); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4) var(--space-8); }
.pgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); align-content: flex-start; }
.pgroup + .pgroup { border-inline-start: 1px solid var(--separator-soft); padding-inline-start: var(--space-8); }
.pgroup legend { width: 100%; padding: 0; margin-bottom: var(--space-2); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--label-2); }
.pgroup legend span { font-weight: var(--fw-regular); }
.pgroup .field { width: 150px; }
.pgroup .field.wide { width: 100%; max-width: 420px; }
.pgroup .field.sel { width: 200px; }
.shortcuts { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
/* pastilles (raccourcis, magasins) : capsules grises, choisies en teinte d'accent */
.chip { display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-full); border: 0; background: var(--fill-3); cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-footnote); color: var(--label); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
.chip:hover { background: var(--fill-2); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { border-radius: var(--radius-full); }
.chip[aria-pressed="true"] { background: var(--accent-tint-hover); color: var(--accent); font-weight: var(--fw-semibold); }
.chip-bu { font-size: var(--fs-caption2); font-weight: var(--fw-semibold); color: var(--label-2); letter-spacing: .04em; text-transform: uppercase; align-self: center; margin-inline: var(--space-1) 2px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
.params-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2-5); border-top: 1px solid var(--separator-soft); padding-top: var(--space-3); }
.params-foot .field-hint { margin-inline-end: auto; }

/* ---------- Tableau de rapport ---------- */
.search-box { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; max-width: 420px; }
.search-box > .icon { position: absolute; inset-inline-start: var(--space-3); color: var(--label-2); pointer-events: none; }
.search-box .input { padding-inline-start: 38px; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.tag-f { display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-h-sm); padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--radius-full); border: 0; background: var(--accent-tint); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--accent); cursor: pointer; }
.tag-f:hover { background: var(--accent-tint-hover); }
.tag-f .icon { color: var(--accent); }
.table-wrap { overflow: auto; max-height: 68vh; border-top: 1px solid var(--separator-soft); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.table th { text-align: start; font-size: var(--fs-footnote); color: var(--label-2); font-weight: var(--fw-semibold); height: var(--row-h); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--separator); background: var(--bg-elevated); white-space: nowrap; vertical-align: bottom; }
.table td { height: var(--row-h); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--separator-soft); vertical-align: middle; white-space: nowrap; background: var(--bg-elevated); }
.table td.wrap { white-space: normal; min-width: 220px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table .code { font-variant-numeric: tabular-nums; color: var(--label); }
.rpt thead th { position: sticky; top: 0; z-index: 3; }
.rpt thead tr.tot th { top: var(--h-entete, 44px); background: var(--bg-inset); color: var(--label); font-weight: var(--fw-bold); font-size: var(--fs-footnote); border-bottom: 2px solid var(--separator-opaque); vertical-align: middle; font-variant-numeric: tabular-nums; }
.rpt thead tr.tot th.vide { color: var(--label-3); font-weight: var(--fw-medium); }
.rpt th .th-in { display: flex; align-items: flex-end; gap: var(--space-1); }
.rpt th.num .th-in { justify-content: flex-end; }
.rpt th.aide { cursor: help; }
.rpt th.aide .sort { cursor: pointer; }
.rpt .sort { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; font-weight: var(--fw-semibold); white-space: nowrap; border-radius: var(--radius-xs); }
.rpt .sort:hover, .rpt .sort[data-actif] { color: var(--label); }
.rpt .sort .icon { color: var(--label-3); }
.rpt .sort[data-actif] .icon { color: var(--accent); }
.rpt .info { display: inline-flex; color: var(--label-3); cursor: help; border-radius: 50%; }
.rpt .info:hover { color: var(--label-2); }
.rpt .sur { display: block; margin-bottom: var(--space-1); }
.rpt .ajout { border-inline-start: 2px solid var(--separator-opaque); }
.rpt th.horst, .rpt td.horst { background-color: color-mix(in srgb, var(--bg-elevated), var(--label) 3%); color: var(--label-2); }
.rpt thead tr.tot th.horst { background: var(--bg-inset); }
.rpt .fige { position: sticky; z-index: 2; background-clip: padding-box; }
.rpt thead th.fige { z-index: 4; }
.rpt thead tr.h th.fige { background-color: var(--bg-elevated); }
.rpt tbody td.fige { background-color: var(--bg-elevated); }
/* colonnes figées : ombre à droite de la dernière, visible seulement quand le tableau défile (classe « defile ») */
.rpt .fige-der::after { content: ""; position: absolute; top: 0; bottom: -1px; right: -14px; width: 14px; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .04) 40%, rgba(0, 0, 0, 0)); box-shadow: inset 1px 0 0 var(--separator); }
.table-wrap.defile .rpt .fige-der::after { opacity: 1; }
.rpt .sous-fige, .rpt .sous-fige.neg { color: transparent; }
.rpt .sous-fige > * { opacity: 0; }
.rpt tbody tr.cliquable { cursor: pointer; }
.rpt tbody tr.cliquable:hover td { background: color-mix(in srgb, var(--bg-elevated), var(--label) 4%); }
.rpt tbody tr.cliquable:active td { background: color-mix(in srgb, var(--bg-elevated), var(--label) 8%); }
.rpt tbody tr.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.rpt td.neg { color: var(--negative); }
.rpt td.nc { font-style: italic; color: var(--label-2); }
.rpt td.wrap { min-width: 320px; max-width: 440px; }
.rpt td.wrap-t { white-space: normal; min-width: 160px; max-width: 260px; }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2-5); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--separator-soft); }
.pagin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.pagin button { min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 var(--space-2-5); border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-footnote); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pagin button:hover:not(:disabled) { background: var(--accent-tint); }
.pagin button[aria-current="page"] { background: var(--accent-fill); color: var(--on-accent); }
.pagin button:disabled { color: var(--label-3); cursor: not-allowed; }
.pagin .ell { color: var(--label-2); padding: 0 var(--space-1); }
.page-size { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-footnote); color: var(--label-2); }
.page-size .input { width: auto; height: var(--control-h-sm); }

/* tableaux simples (comparatif, administration) */
.table.simple th { font-size: var(--fs-footnote); color: var(--label-2); font-weight: var(--fw-semibold); background: var(--bg-elevated); }
.card .table-wrap.flat { max-height: none; border-top: 1px solid var(--separator-soft); border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* ---------- Feuille latérale (fiche article) ---------- */
.overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 90; opacity: 0; transition: opacity var(--dur-normal) var(--ease-out); }
.overlay.open { opacity: 1; }
.drawer { position: fixed; top: var(--space-3); bottom: var(--space-3); inset-inline-end: var(--space-3); width: 480px; max-width: calc(100vw - 24px); background: var(--bg-elevated); z-index: 91; border-radius: var(--radius-sheet); box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(100% + 24px)); transition: transform var(--dur-normal) var(--ease-out); }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--separator-soft); }
.drawer-head h3 { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-bold); flex: 1; overflow-wrap: anywhere; }
.drawer-head .card-sub { margin-top: var(--space-1); }
.drawer-body { padding: var(--space-4) var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); flex: 1; overscroll-behavior: contain; }
.drawer-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--separator-soft); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--fs-footnote); }
.dl dt { color: var(--label-2); }
.dl dd { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.sec-t { font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--label-2); margin-bottom: var(--space-2); }
.drawer .table { font-size: var(--fs-footnote); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-inset); }
.drawer .table th, .drawer .table td { background: transparent; }
.drawer .table tr.tot td { font-weight: var(--fw-bold); background: var(--fill-4); }

/* ---------- Feuilles (dialogues) ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background-color: var(--scrim); display: flex; align-items: center; justify-content: center; padding: var(--space-4); animation: or-fondu var(--dur-fast) var(--ease-out); }
.modal { background: var(--bg-elevated); border-radius: var(--radius-sheet); width: 100%; max-width: 560px; max-height: calc(100% - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow-3); overflow: hidden; animation: or-feuille var(--dur-normal) var(--ease-spring); }
.modal-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; padding: var(--space-3) var(--space-4); gap: var(--space-3); border-bottom: 1px solid var(--separator-soft); }
.modal-head h3 { grid-column: 2; text-align: center; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-semibold); }
.modal-head > :last-child:not(h3) { grid-column: 3; justify-self: end; }
.modal-body { padding: var(--space-5); overflow: auto; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-subhead); }
.modal-body ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: var(--space-1-5); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--separator-soft); }
.cols-list { columns: 2; column-gap: var(--space-5); }
.cols-list label { display: flex; gap: var(--space-2); align-items: center; min-height: 36px; break-inside: avoid; font-size: var(--fs-subhead); }
.cols-list input { width: 20px; height: 20px; accent-color: var(--accent-fill); }

/* recherche Ctrl+K : façon Spotlight */
.palette { position: fixed; top: 14vh; left: 50%; transform: translateX(-50%); width: 640px; max-width: calc(100vw - 24px); background: var(--bg-elevated); border-radius: var(--radius-sheet); box-shadow: var(--shadow-3); overflow: hidden; z-index: 101; animation: or-palette var(--dur-normal) var(--ease-spring); }
.palette-in { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--separator-soft); }
.palette-in .icon { color: var(--label-2); width: 22px; height: 22px; }
.palette-in input { flex: 1; height: 56px; border: 0; outline: none; font-size: var(--fs-title3); background: transparent; color: var(--label); }
.palette-in input::placeholder { color: var(--label-3); }
.palette-in input:focus-visible { box-shadow: none; }
.palette ul { list-style: none; margin: 0; padding: var(--space-2); max-height: 50vh; overflow-y: auto; }
.palette li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--row-h); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); cursor: pointer; }
.palette li:hover { background: var(--bg-hover); }
.palette li[aria-selected="true"] { background: var(--accent-fill); color: var(--on-accent); }
.palette li .pk { font-size: var(--fs-caption1); font-weight: var(--fw-semibold); color: var(--label-2); }
.palette li .pn { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette li .pd { font-size: var(--fs-footnote); color: var(--label-2); white-space: nowrap; }
.palette li[aria-selected="true"] .pk, .palette li[aria-selected="true"] .pd { color: var(--on-accent); opacity: .85; }
.palette-foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--separator-soft); font-size: var(--fs-caption1); color: var(--label-2); flex-wrap: wrap; }

/* infobulle, notification */
.tip { position: fixed; z-index: 120; max-width: 300px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-tooltip); color: var(--on-tooltip); font-size: var(--fs-footnote); line-height: var(--lh-footnote); pointer-events: none; opacity: 0; transition: opacity var(--dur-instant) var(--ease-out); box-shadow: var(--shadow-2); }
.tip.on { opacity: 1; }
.tip b { font-weight: var(--fw-bold); }
.tip .tl { display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--space-2); align-items: center; margin-top: var(--space-1); }
.tip .tl i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.tip .tl span:last-child { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.toast { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 130; background: var(--bg-tooltip); color: var(--on-tooltip); padding: var(--space-2-5) var(--space-4); border-radius: var(--radius-popover); box-shadow: var(--shadow-2); font-size: var(--fs-footnote); font-weight: var(--fw-medium); max-width: min(420px, calc(100vw - 32px)); animation: or-toast var(--dur-normal) var(--ease-spring); transition: opacity var(--dur-normal) var(--ease-out); }
.toast.part { opacity: 0; }

/* contrôles qualité, listes simples */
.ctrl-list { list-style: none; margin: 0; padding: 0; }
.ctrl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; min-height: var(--row-h); padding: var(--space-2) 0; border-bottom: 1px solid var(--separator-soft); font-size: var(--fs-subhead); }
.ctrl-list li:last-child { border-bottom: 0; }
.ctrl-list b { font-variant-numeric: tabular-nums; text-align: end; }

/* ---------- Écrans d'information : connexion, messages ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.login-card { width: 100%; max-width: 460px; border-radius: var(--radius-sheet); box-shadow: var(--shadow-2); }
.login-head { padding: var(--space-8) var(--space-8) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }
.login-head .logo-plate { margin-bottom: var(--space-2); }
.login-head h1 { text-wrap: balance; font-family: var(--font-display); font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); }
.login-head .page-sub, .login-head p { max-width: 380px; font-size: var(--fs-subhead); }
.login-body { padding: var(--space-4) var(--space-8) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.login-body > .btn-primary, .login-body > div > .btn, .login-actions > .btn { width: 100%; }
.login-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.login-actions .link { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: var(--fw-medium); }
.login-body .field-hint .mono { white-space: nowrap; }
/* liste groupée des comptes (mode développement) */
.compte-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; background: var(--bg-inset); border-radius: var(--radius-lg); }
.compte-list li + li { border-top: 1px solid var(--separator-soft); }
.compte-list button { width: 100%; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); border: 0; background: transparent; cursor: pointer; text-align: start; transition: background-color var(--dur-fast) var(--ease-out); }
.compte-list button:hover { background: var(--bg-hover); }
.compte-list button::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline-start: auto; border-right: 2px solid var(--label-3); border-top: 2px solid var(--label-3); transform: rotate(45deg); }
.compte-list .pi-text { display: flex; flex-direction: column; min-width: 0; }
.compte-list .pi-text b { font-size: var(--fs-subhead); font-weight: var(--fw-semibold); }
.compte-list .pi-text span { font-size: var(--fs-footnote); color: var(--label-2); overflow-wrap: anywhere; }

/* calcul en cours : indicateur d'activité */
.calcul { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-10) var(--space-4); color: var(--label-2); flex-wrap: wrap; text-align: center; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--fill-2); border-top-color: var(--accent); animation: tourne .8s linear infinite; flex: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.res-meta { font-size: var(--fs-footnote); color: var(--label-2); }
.ecarts-ht { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: 0 var(--space-5) var(--space-3); font-size: var(--fs-footnote); align-items: center; }
.ecarts-ht b { font-variant-numeric: tabular-nums; }
.erreur-globale { margin: 0 var(--space-5) var(--space-3); }
/* formulaires de l'administration */
.admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); align-items: end; }
.admin-form .field { min-width: 0; }
.fiche-wrap { overflow-x: auto; }
.table.admin-comptes th, .table.admin-comptes td { white-space: normal; padding-inline: var(--space-2-5); }
.admin-edit { flex-wrap: wrap; gap: var(--space-1-5) var(--space-2); }
.admin-edit select[data-profil] { max-width: 100%; }

/* ---------- Animations (courbes Apple ; neutralisées par prefers-reduced-motion dans tokens.css) ---------- */
@keyframes or-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes or-feuille { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes or-palette { from { opacity: 0; transform: translateX(-50%) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes or-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes or-toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes or-montee { from { transform: translateY(100%); } to { transform: none; } }

/* =====================================================================
   Accueil : en-tête, étiquettes, blocs d'analyse (graphiques par jetons)
   ===================================================================== */
#page-accueil { display: flex; flex-direction: column; gap: var(--space-5); }
#page-accueil > #dash-etat:empty { display: none; }
.accueil-tete { margin-bottom: 0; align-items: flex-end; }
.surtitre { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-semibold); color: var(--label-2); margin-bottom: var(--space-1); }
.page-head h2.accueil-titre { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); }
.accueil-titre em { font-style: normal; font-weight: var(--fw-regular); color: var(--label-2); font-size: var(--fs-title3); letter-spacing: var(--tr-title); margin-inline-start: var(--space-1); }
#d-periode { max-width: 240px; }

/* les 8 étiquettes : cartes, chiffre en Title 1, évolution en pastille */
.etiquettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); grid-auto-flow: dense; }
.etq { background: var(--bg-elevated); border-radius: var(--radius-card); padding: var(--space-4); position: relative; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow-1); color: inherit; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
a.etq:hover { box-shadow: var(--shadow-2); }
a.etq:active { transform: scale(.985); }
a.etq:focus-visible { box-shadow: var(--shadow-focus), var(--shadow-1); border-radius: var(--radius-card); }
.etq-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-semibold); color: var(--label-2); }
.etq-prix { font-family: var(--font-display); font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-bold); letter-spacing: var(--tr-large); margin: var(--space-2) 0 var(--space-0-5); display: flex; align-items: baseline; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--label); overflow: hidden; }
.etq-prix .pc { font-size: .64em; font-weight: var(--fw-semibold); letter-spacing: 0; }
.etq-prix .u { font-family: var(--font); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--label-2); margin-inline-start: var(--space-1-5); }
.etq-prix.moyen { font-size: var(--fs-title2); }
.etq-prix.neg .pi { color: var(--negative); }
.etq-sous { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); margin: 2px 0 0; }
.etq-sous b { font-weight: var(--fw-semibold); color: var(--label); font-variant-numeric: tabular-nums; }
.etq-sous span[tabindex] { white-space: nowrap; outline: none; }
.etq-sous + .etq-sous { margin-top: 1px; }
.perfo { margin-top: auto; padding-top: var(--space-3); display: flex; gap: var(--space-1) var(--space-1-5); align-items: center; flex-wrap: wrap; font-size: var(--fs-caption1); color: var(--label-2); }
.etq .vs { color: var(--label-2); }
.voir { margin-inline-start: auto; font-size: var(--fs-caption1); font-weight: var(--fw-semibold); color: var(--accent); white-space: nowrap; }
/* évolutions (M-1, S-1, J-7) : pastille grise ; vigilance et évolution défavorable (alerte) en orange clair, avec leur flèche */
.sticker { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--fill-3); color: var(--label); font-size: var(--fs-caption1); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticker.marque { background: var(--fill-3); color: var(--label); }
.sticker.neutre { font-weight: var(--fw-medium); color: var(--label-2); }
.sticker.vigilance { background: var(--alert-tint); color: var(--alert); }
.sticker.alerte { background: var(--alert-tint); color: var(--alert); }
.etq.vedette .etq-h > span:first-child { color: var(--accent); }
.etq.vedette, .etq.large { grid-column: span 2; }
.hachure { background-color: var(--chart-hatch-bg) !important; background-image: repeating-linear-gradient(-45deg, var(--chart-hatch-bg) 0 5px, var(--chart-hatch-line) 5px 7px) !important; }
.etq-2col { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-end; }
.etq-liste { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-footnote); }
.etq-liste li { display: flex; justify-content: space-between; gap: var(--space-2); outline: none; }
.etq-liste li span { color: var(--label-2); font-variant-numeric: tabular-nums; }
.etq-liste li b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mini-barres { display: flex; flex-direction: column; gap: var(--space-1-5); margin-top: var(--space-1); }
.mini-barres .mb { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: 28px; font-size: var(--fs-footnote); }
.mini-barres .mb > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-barres .mb > i { display: block; height: 10px; border-radius: var(--radius-full); background: var(--chart-bar); }
.mini-barres .mb > b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.mini-barres .mb > b small { color: var(--label-2); font-size: var(--fs-caption1); font-weight: var(--fw-medium); }
.anneaux { display: flex; gap: var(--space-4); justify-content: space-around; margin-top: var(--space-2); flex-wrap: wrap; }
.anneau { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-caption1); min-width: 72px; border-radius: var(--radius-sm); }
.anneau svg { width: 72px; height: 72px; }
.anneau svg text { font: var(--fw-bold) 13px var(--font); fill: var(--label); }
.anneau b { font-weight: var(--fw-medium); color: var(--label-2); font-variant-numeric: tabular-nums; }
.anneau .tx { color: var(--label); font-weight: var(--fw-bold); }

/* blocs d'un onglet */
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.planche-tete { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-3); }
.planche-t { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-headline); font-weight: var(--fw-semibold); color: var(--label); }
.planche-t .icon { color: var(--label-2); }
.planche-s { color: var(--label-2); font-size: var(--fs-footnote); line-height: var(--lh-footnote); margin: 2px 0 0; }
.planche-s b { color: var(--label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c12 { grid-column: span 12; }
.vide-etat { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; text-align: center; padding: var(--space-6) var(--space-3); color: var(--label-2); font-size: var(--fs-footnote); }
.vide-etat b { color: var(--label); font-size: var(--fs-subhead); font-weight: var(--fw-semibold); }

/* calendrier : rampe bleue ; le seul meilleur jour en case la plus forte, cerclée d'orange (mise en valeur) */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.cal .jt { font-size: var(--fs-caption2); font-weight: var(--fw-semibold); letter-spacing: var(--tr-caption); color: var(--label-2); text-align: center; padding: var(--space-1) 2px; border-radius: var(--radius-xs); }
.cal .jt.we { color: var(--label); background: var(--fill-4); }
.cal .vide { min-width: 0; }
.cal .j { aspect-ratio: 1.35 / 1; border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-2); display: flex; flex-direction: column; justify-content: space-between; text-align: start; min-width: 0; cursor: default; font: inherit; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cal .j:hover, .cal .j:focus-visible { transform: scale(1.05); box-shadow: var(--shadow-2); position: relative; z-index: 2; outline: none; }
.cal .j.nul { border: 1px dashed var(--separator); }
.cal .j .n { font-size: var(--fs-footnote); font-weight: var(--fw-bold); line-height: 1; }
.cal .j .v { font-size: var(--fs-caption1); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.cal .j.max .v { font-weight: var(--fw-bold); }
.cal .j.max { box-shadow: inset 0 0 0 3px var(--chart-best); }
.cal .j.max:hover, .cal .j.max:focus-visible { box-shadow: inset 0 0 0 3px var(--chart-best), var(--shadow-2); }
.rampe { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-caption1); color: var(--label-2); margin-top: var(--space-3); }
.rampe span.r { height: 8px; flex: 0 1 180px; min-width: 80px; border-radius: var(--radius-full); }
.rampe .pastille-max { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--chart-ramp-4); box-shadow: inset 0 0 0 2px var(--chart-best); vertical-align: -2px; margin-inline-end: 3px; }
/* rythme de la semaine */
.barres-js { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); align-items: end; height: 200px; padding-top: 18px; position: relative; }
.barres-js .b { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: var(--space-1); min-width: 0; outline: none; }
.barres-js .b i { display: block; width: 70%; max-width: 44px; background: var(--chart-6); border-radius: var(--radius-xs) var(--radius-xs) 2px 2px; }
.barres-js .b.min i { background: var(--chart-4); }
.barres-js .b.max i { background: var(--chart-best); }
.barres-js .b:focus-visible i { box-shadow: var(--shadow-focus); }
.barres-js .b span { position: relative; z-index: 1; font-size: var(--fs-caption2); font-weight: var(--fw-semibold); color: var(--label); white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--bg-elevated); padding: 0 3px; border-radius: 3px; }
.barres-js .b em { font-style: normal; font-size: var(--fs-caption1); color: var(--label-2); }
.barres-js .moy { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--label-3); pointer-events: none; }
.barres-js .moy span { display: none; }
/* départements × jours */
.heat-wrap { overflow-x: auto; }
.heat { display: grid; gap: 2px; align-items: center; }
.heat .lab { font-size: var(--fs-caption1); padding-inline-end: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.heat .cel { height: 22px; border-radius: 3px; border: 0; padding: 0; min-width: 0; cursor: default; }
.heat .cel:hover, .heat .cel:focus-visible { outline: 2px solid var(--label); outline-offset: 0; box-shadow: none; }
.heat .jx { font-size: var(--fs-caption2); color: var(--label-2); text-align: center; font-variant-numeric: tabular-nums; }
/* mosaïque du mix */
.tm { position: relative; height: 320px; border-radius: var(--radius-lg); overflow: hidden; }
.tm .t { position: absolute; border: 2px solid var(--bg-elevated); padding: var(--space-2); overflow: hidden; color: var(--chart-ink-light); display: flex; flex-direction: column; gap: 2px; text-align: start; border-radius: var(--radius-md); cursor: default; font: inherit; transition: filter var(--dur-fast) var(--ease-out); }
.tm .t:hover, .tm .t:focus-visible { filter: brightness(1.06); outline: none; box-shadow: inset 0 0 0 2px var(--label); }
.tm .t b { font-size: var(--fs-footnote); font-weight: var(--fw-bold); line-height: 1.15; }
.tm .t span { font-size: var(--fs-caption1); line-height: 1.25; font-variant-numeric: tabular-nums; }
.tm .t.sombre, .tm .t.hachure { color: var(--chart-ink-dark); }
.tm .t.hachure b, .tm .t.hachure span { background: var(--bg-elevated); color: var(--label); padding: 1px var(--space-1); border-radius: 3px; align-self: flex-start; }
/* cascade du CA à la marge */
.wf svg { width: 100%; height: auto; display: block; overflow: visible; }
.wf text { font-family: var(--font); font-size: 11px; fill: var(--label); font-variant-numeric: tabular-nums; }
.wf .lbl { font-size: 11.5px; fill: var(--label-2); }
.wf .val { font-weight: var(--fw-semibold); fill: var(--label); }
.wf .val.neg { fill: var(--negative); }
.wf-liste { display: none; list-style: none; margin: 0 0 var(--space-2); padding: 0; flex-direction: column; }
.wf-liste li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: 36px; padding: var(--space-1-5) 0; border-bottom: 1px solid var(--separator-soft); font-size: var(--fs-footnote); }
.wf-liste li > span { color: var(--label); font-weight: var(--fw-semibold); }
.wf-liste li.ded > span { color: var(--label-2); font-weight: var(--fw-regular); padding-inline-start: var(--space-2-5); }
.wf-liste li.tot > span { color: var(--label); }
.wf-liste li > i { display: block; height: 10px; border-radius: var(--radius-full); min-width: 2px; }
.wf-liste li > b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
/* face à face des magasins */
.faf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center; }
.faf .ent { font-size: var(--fs-subhead); font-weight: var(--fw-bold); display: flex; gap: var(--space-1-5); align-items: center; }
.faf .ent i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.faf .ent.d { justify-content: flex-end; }
.faf .m { font-size: var(--fs-caption1); color: var(--label-2); text-align: center; white-space: nowrap; padding: 0 var(--space-1); }
.faf .cote { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; min-height: 28px; }
.faf .cote.g { flex-direction: row-reverse; }
.faf .cote i { display: block; height: 12px; border-radius: var(--radius-full); min-width: 2px; }
.faf .cote span { font-size: var(--fs-caption1); white-space: nowrap; color: var(--label-2); font-variant-numeric: tabular-nums; }
.faf .cote.mieux span { font-weight: var(--fw-bold); color: var(--label); }
/* listes (top 5, fournisseurs) : lignes groupées numérotées */
.liste-top { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.liste-top li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-2); min-height: var(--row-h); padding: var(--space-2) 0; border-bottom: 1px solid var(--separator-soft); font-size: var(--fs-footnote); align-items: center; counter-increment: t; }
.liste-top li:last-child { border-bottom: 0; }
.liste-top li::before { content: counter(t); font-size: var(--fs-caption1); font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; }
.liste-top li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.liste-top li > b { font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste-top li > b small { color: var(--label-2); font-size: var(--fs-caption1); font-weight: var(--fw-medium); }
.deux-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.deux-col .planche-s { margin-bottom: var(--space-1-5); }
/* alertes : liste groupée (icône teintée + libellé + badge), lignes de 44 px au moins */
.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alertes li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--row-h); padding: var(--space-2-5) 0; border-bottom: 1px solid var(--separator-soft); }
.alertes li:last-child { border-bottom: 0; }
.alertes .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--info-tint); color: var(--info); }
.alertes li.niv-critique .ic { background: var(--critical); color: var(--on-critical); }   /* « Critique » : orange plein (28/10/2026) */
.alertes li.niv-alerte .ic { background: var(--alert-tint); color: var(--alert); }
.alertes li.niv-ok .ic { background: var(--green-tint); color: var(--green); }
.alertes p { margin: 0; font-size: var(--fs-subhead); font-weight: var(--fw-semibold); }
.alertes p .badge { margin-inline-start: var(--space-1-5); vertical-align: 1px; }
.alertes p small { display: block; color: var(--label-2); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-regular); margin-top: 2px; }

/* Accueil à onglets */
/* =====================================================================
   Accueil à onglets (16/10/2026, retour « pages trop chargées ») :
   étiquettes simplifiées, 3 alertes principales, puis un seul onglet
   affiché à la fois. Refonte HIG (20/10/2026) : onglets en contrôle
   segmenté, alertes en liste groupée, une carte par onglet ; les blocs
   de l'onglet n'ont pas de cadre, l'espace les sépare.
   ===================================================================== */
.etiquettes.simples { gap: var(--space-4); }
.etiquettes.simples .etq.simple { grid-column: auto; box-shadow: var(--shadow-1); }
.etiquettes.simples a.etq.simple:hover { box-shadow: var(--shadow-2); }
.etiquettes.simples .perfo { min-height: 48px; align-content: flex-start; row-gap: var(--space-1); }
.etiquettes.simples .perfo > span:not(.sticker):not(:only-child) { flex-basis: 100%; }
.note-cmp { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--fs-footnote); color: var(--label-2); }
/* alertes de l'en-tête : liste groupée dans une carte */
#alertes-tete:empty { display: none; }
.alertes-tete { display: flex; flex-direction: column; gap: var(--space-1); background: var(--bg-elevated); border-radius: var(--radius-card); padding: var(--space-3) var(--space-5) var(--space-2); box-shadow: var(--shadow-1); }
.alertes-entete { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; min-height: 32px; }
.alertes-titre { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-headline); font-weight: var(--fw-semibold); color: var(--label); }
.alertes-titre .icon { color: var(--label-2); }
.alertes-titre .badge { margin-inline-start: 2px; }
.alertes-sep { color: var(--label-3); font-weight: var(--fw-regular); }
.alertes p small.seuil-critique { margin-top: 0; }
.alertes-nb { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--fill-3); font-size: var(--fs-caption1); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--label); }
.alertes.alertes-compactes li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.alertes.alertes-compactes p { font-size: var(--fs-subhead); }
.lien-alerte { display: inline-flex; align-items: center; min-height: var(--control-h-sm); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--accent); white-space: nowrap; }
.lien-alerte:hover { text-decoration: underline; }
.lien-plus { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--touch); border: 0; background: none; padding: 0; font: var(--fw-semibold) var(--fs-subhead) var(--font); color: var(--accent); cursor: pointer; }
.lien-plus:hover { text-decoration: underline; }
/* onglets : contrôle segmenté (piste grise, segment choisi en relief) */
.onglets { display: flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 2px; border-radius: 9px; background: var(--seg-track); overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border: 0; background: none; padding: 0 var(--space-5); border-radius: 7px; font: var(--fw-medium) var(--fs-subhead) var(--font); letter-spacing: var(--tr-text); color: var(--label); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.onglet:hover:not([aria-selected="true"]) { background: var(--fill-4); }
.onglet[aria-selected="true"] { background: var(--seg-thumb); box-shadow: var(--seg-thumb-shadow); font-weight: var(--fw-semibold); }
.onglet:focus-visible { border-radius: 7px; }
.onglet-carte { background: var(--bg-elevated); border-radius: var(--radius-card); padding: var(--space-6); min-width: 0; margin-top: calc(var(--space-2) * -1); box-shadow: var(--shadow-1); animation: or-fondu var(--dur-fast) var(--ease-out); }
.onglet-carte:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-card); }
.onglet-grille { gap: var(--space-8) var(--space-10); }
.onglet-attente { padding: var(--space-12) var(--space-4); }
.bloc, .bloc-corps { min-width: 0; }
.bloc { box-shadow: none; }
.bloc-t { margin: 0; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-semibold); color: var(--label); }
.bloc .source { font-size: var(--fs-caption1); color: var(--label-2); margin-top: var(--space-3); }
.bloc .source a { color: var(--accent); font-weight: var(--fw-semibold); }
.bloc .source a:hover { text-decoration: underline; }
.bloc .table-wrap.flat { border: 0; border-radius: var(--radius-lg); overflow-x: auto; background: var(--bg-inset); }
.bloc .table-wrap.flat .table th, .bloc .table-wrap.flat .table td { background: transparent; }

/* Écran rapport allégé */
/* =====================================================================
   Écran rapport allégé (16/10/2026, retour « pages trop chargées ») :
   titre compact + info-bulle « ⓘ », paramètres obligatoires sur une
   ligne, filtres repliés (pastilles supprimables), bandeau de 4
   indicateurs clés repliable. Refonte HIG (20/10/2026) : champs de
   44 px, barre d'outils en 3 zones, en-tête du résultat compact.
   Le tableau (colonnes, ordre, intitulés, Total) n'est pas touché.
   ===================================================================== */
.main:has(#page-rapport) .fresh { padding-block: var(--space-1-5); }
.content:has(> #page-rapport) { padding-block: var(--space-4) var(--space-8); }
#page-rapport { gap: var(--space-3); }
#page-rapport .page-head { align-items: center; flex-wrap: nowrap; }
#page-rapport .page-head > div:first-child { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); min-width: 0; }
#page-rapport .crumbs { margin-bottom: 0; flex-basis: 100%; }
#page-rapport .crumbs > :nth-last-child(-n+2) { display: none; } /* le nom du rapport est le titre juste dessous */
#page-rapport .page-head h2 { font-size: var(--fs-title2); line-height: var(--lh-title2); letter-spacing: var(--tr-title); }
#page-rapport .feuille-nom { margin: 0; font-size: var(--fs-footnote); color: var(--label-2); }
#page-rapport .rpt-titre { position: relative; }
#page-rapport .notes-wrap { align-self: center; }
#page-rapport .info-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--accent); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
#page-rapport .info-btn:hover, #page-rapport .info-btn[aria-expanded="true"] { background: var(--accent-tint); }
#page-rapport .info-btn:focus-visible { border-radius: 50%; }
#page-rapport .notes-pop { position: absolute; z-index: 30; top: calc(100% + var(--space-2)); inset-inline-start: 0; width: min(560px, 80vw); padding: var(--space-4); background: var(--bg-elevated); border-radius: var(--radius-popover); box-shadow: var(--shadow-3); font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label); display: flex; flex-direction: column; gap: var(--space-2); animation: or-pop var(--dur-fast) var(--ease-out); transform-origin: top left; }
#page-rapport .notes-pop p { margin: 0; }
#page-rapport .notes-pop .page-sub { color: var(--label); font-weight: var(--fw-semibold); font-size: var(--fs-subhead); max-width: none; flex-basis: auto; margin: 0; }
#page-rapport .notes-pop a { color: var(--accent); font-weight: var(--fw-semibold); }
#page-rapport .notes-pop a:hover { text-decoration: underline; }
#page-rapport span.info { display: inline-flex; vertical-align: -2px; color: var(--label-3); cursor: help; border-radius: 50%; }
#page-rapport span.info:hover, #page-rapport span.info:focus-visible { color: var(--label-2); }
/* paramètres obligatoires sur une ligne, filtres repliés */
#page-rapport .params-card form { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
#page-rapport .params-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
#page-rapport .pg-oblig { flex: 1 1 0; min-width: 0; align-items: flex-start; gap: var(--space-2) var(--space-3); }
#page-rapport .pg-oblig .field { position: relative; width: 140px; gap: var(--space-1); }
#page-rapport .pg-oblig .field.raccourcis { width: auto; }
#page-rapport .pg-oblig .field.field-inv { width: min(470px, 100%); }
#page-rapport .pg-oblig .field:has(> #inv-statut) { width: auto; max-width: 330px; }
#page-rapport .pg-oblig .field-label { min-height: 18px; display: inline-flex; align-items: center; gap: var(--space-1); }
#page-rapport .pg-oblig .shortcuts { min-height: var(--control-h); align-items: center; }
#page-rapport .inv-statut { min-height: var(--control-h); display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: nowrap; line-height: 1.3; font-size: var(--fs-footnote); color: var(--label); }
#page-rapport .inv-statut .badge { flex: none; }
/* message d'erreur sous le champ, sans décaler les autres paramètres */
#page-rapport .pg-oblig .field-error { position: absolute; top: 100%; inset-inline-start: 0; margin-top: var(--space-1); width: max-content; max-width: 460px; z-index: 2; }
#page-rapport .params-card form:has(.pg-oblig .field-error:not([hidden])) { padding-bottom: 34px; }
#page-rapport .params-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
#page-rapport .params-actions .btn, #page-rapport .params-actions .lock-note { height: var(--control-h); }
#page-rapport .btn-filtres { background: var(--fill-3); color: var(--label); }
#page-rapport .btn-filtres:hover { background: var(--fill-2); }
#page-rapport .btn-filtres .nb-filtres { color: var(--label-2); font-weight: var(--fw-medium); }
#page-rapport .btn-filtres .nb-filtres.on { color: var(--accent); font-weight: var(--fw-bold); }
#page-rapport .btn-filtres .icon { transition: transform var(--dur-fast) var(--ease-out); color: var(--label-2); }
#page-rapport .btn-filtres[aria-expanded="true"] .icon { transform: rotate(180deg); }
#page-rapport .pastilles:empty { display: none; }
#page-rapport .pgroup .field.wide { max-width: none; }
#page-rapport .filtres-panel { border-top: 1px solid var(--separator-soft); padding-top: var(--space-3); gap: var(--space-3) var(--space-4); }
#page-rapport .filtres-panel legend { margin-bottom: 0; }
#page-rapport .filtres-panel .field { gap: var(--space-1); }
#page-rapport .filtres-panel .field-q { width: min(360px, 100%); }
#page-rapport .filtres-panel .search-box { max-width: none; min-width: 0; flex: none; }
#page-rapport .filtres-foot { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
#page-rapport .filtres-foot .field-hint { margin-inline-end: auto; }
/* bandeau des 4 indicateurs clés (une ligne), le reste derrière « + d'indicateurs (n) » */
#page-rapport .kpi-bandeau { display: flex; align-items: stretch; gap: var(--space-2); }
#page-rapport .kpi-cles { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
#page-rapport .kpi-rapport .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
#page-rapport .kpi-rapport .kpi { padding: var(--space-2) var(--space-3); gap: 1px; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
#page-rapport .kpi-rapport .kpi-top { min-height: 20px; }
/* 20/10/2026 : libellé et ligne secondaire sur deux lignes au plus (texte complet dans l'info-bulle) ;
   rangées partagées (subgrid) : libellés, valeurs et lignes secondaires des 4 cartes restent alignés */
#page-rapport .kpi-cles { grid-template-rows: repeat(3, auto); }
#page-rapport .kpi-rapport .kpi-cle { padding: var(--space-2) var(--space-3); gap: 0; max-height: none; overflow: hidden;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
#page-rapport .kpi-cle .kpi-label, #page-rapport .kpi-cle .kpi-sous { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; overflow-wrap: anywhere; align-self: start; }
#page-rapport .kpi-cle .kpi-label { font-size: var(--fs-caption1); line-height: var(--lh-caption1); cursor: help; align-self: end; }
#page-rapport .kpi-cle .kpi-value, #page-rapport .kpi-rapport .kpi-sm .kpi-value { font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* 21/10/2026 : valeur texte (magasin de « Valorisation Inventaire ») affichée en entier : code en valeur, nom dessous, retour à la ligne */
#page-rapport .kpi-cle .kpi-value.kpi-value-texte { display: flex; flex-direction: column; white-space: normal; overflow: visible; text-overflow: clip; }
#page-rapport .kpi-cle .kpi-txt-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-rapport .kpi-cle .kpi-txt-nom { font-family: var(--font); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-semibold); letter-spacing: var(--tr-text); color: var(--label); overflow-wrap: break-word; }
#page-rapport .kpi-cle .kpi-txt-seul { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
#page-rapport .kpi-cle .kpi-sous { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--label-2); }
#page-rapport .kpi-cle .kpi-sous b { color: var(--label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
#page-rapport .kpi-rapport .kpi-hint { font-size: var(--fs-caption1); line-height: var(--lh-caption1); }
#page-rapport .kpi-rapport .kpi ol { font-size: var(--fs-caption1); gap: 1px; margin-top: 2px; }
#page-rapport .kpi-bandeau-actions { flex: none; display: flex; align-items: center; gap: var(--space-1-5); }
#page-rapport .kpi-plus-panel { margin-top: var(--space-2); }
#page-rapport .kpi-plus-panel .kpi { max-height: none; overflow: visible; }
#page-rapport .kpi-rapport p.kpi-pied { margin: var(--space-1) 0 0 !important; font-size: var(--fs-caption1); color: var(--label-2); }
#page-rapport .calcul-kpi { padding: var(--space-1-5) 0; justify-content: flex-start; }
/* en-tête du résultat : titre et décompte à gauche, exports à droite */
#page-rapport .res-head { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); align-items: center; }
#page-rapport .res-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); min-width: 0; }
#page-rapport .res-titre .card-sub { margin-top: 0; }
#page-rapport .res-head .res-meta { font-size: var(--fs-footnote); }
#page-rapport .note-ext { padding: 0 var(--space-5) var(--space-1-5); font-size: var(--fs-caption1); color: var(--label-2); }
#page-rapport .search-box .input { height: var(--control-h); }
#page-rapport > .callout { padding: var(--space-2) var(--space-4); }

/* =====================================================================
   Adaptation à la largeur (iPad, téléphone)
   ===================================================================== */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .params { grid-template-columns: 1fr; }
  .pgroup + .pgroup { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--separator-soft); padding-top: var(--space-4); }
}
@media (max-width: 1180px) {
  .etiquettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille { grid-template-columns: minmax(0, 1fr); }
  .c5, .c6, .c7, .c12 { grid-column: auto; }
}
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .search-trigger { min-width: 0; width: var(--touch); padding: 0; justify-content: center; border-radius: 50%; }
  .search-trigger span, .search-trigger kbd { display: none; }
  #page-rapport .kpi-cles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; border-inline-end: 0; visibility: hidden; transition: transform var(--dur-normal) var(--ease-out), visibility 0s linear var(--dur-normal); }
  .sidebar.open { transform: none; box-shadow: var(--shadow-3); visibility: visible; transition: transform var(--dur-normal) var(--ease-out); }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 39; animation: or-fondu var(--dur-fast) var(--ease-out); }
  .main { margin-inline-start: 0; }
  .menu-btn, .topbar-logo { display: inline-flex; }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-title { display: none; }
  .topbar-right { margin-inline-start: auto; }
  .user-meta span { display: none; }
  .fresh { padding: var(--space-1-5) var(--space-4); }
  .content { padding: var(--space-4) var(--space-4) var(--space-10); }
}
@media (max-width: 640px) {
  .etiquettes { grid-template-columns: minmax(0, 1fr); }
  .etq.vedette, .etq.large { grid-column: span 1; }
  .grille { gap: var(--space-5); }
  .deux-col { grid-template-columns: 1fr; }
  .alertes li, .alertes.alertes-compactes li { grid-template-columns: 30px minmax(0, 1fr); }
  .alertes li .btn, .alertes.alertes-compactes li .lien-alerte { grid-column: 2; justify-self: start; }
  .cal .j { padding: var(--space-1); }
  .cal .j .v { font-size: 9.5px; }
  .faf { grid-template-columns: minmax(0, 1fr) minmax(0, 92px) minmax(0, 1fr); column-gap: var(--space-2); }
  .faf .m { white-space: normal; font-size: var(--fs-caption2); line-height: 1.25; }
  .faf .cote span { font-size: var(--fs-caption2); }
  .faf .cote { gap: var(--space-1); }
  .dash-filtres { justify-content: flex-start; width: 100%; }
  .dash-filtres > select.input, #d-periode { flex: 1 1 100%; max-width: none; width: 100% !important; }
  .dash-filtres > .seg { flex: 1 1 100%; }
  .dash-filtres > .seg button { flex: 1; }
  .onglet-carte { padding: var(--space-4) var(--space-3); }
  .onglets { align-self: stretch; }
  .onglet { padding: 0 var(--space-3); font-size: var(--fs-footnote); }
  .alertes-tete { padding: var(--space-3) var(--space-4) var(--space-2); }
  .wf { display: none; }
  .wf-liste { display: flex; }
  /* 8 étiquettes en 2 colonnes compactes : titre, chiffre, évolution */
  .etiquettes.simples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .etiquettes.simples .etq.simple, .etiquettes.simples .etq.simple.vedette { grid-column: auto; padding: var(--space-3); border-radius: var(--radius-lg); }
  .etiquettes.simples .etq-h { font-size: var(--fs-caption1); line-height: var(--lh-caption1); }
  .etiquettes.simples .etq-h span { overflow: hidden; text-overflow: ellipsis; }
  .etiquettes.simples .etq-prix { font-size: var(--fs-title3); line-height: var(--lh-title3); margin: var(--space-1) 0 0; }
  .etiquettes.simples .etq-prix .u { font-size: var(--fs-caption2); margin-inline-start: 3px; }
  .etiquettes.simples .etq-sous { display: none; }
  .etiquettes.simples .perfo { min-height: 0; padding-top: var(--space-1-5); gap: var(--space-1); }
  .etiquettes.simples .perfo .vs { display: none; }
  .etiquettes.simples .sticker { height: 20px; padding: 0 var(--space-1-5); font-size: var(--fs-caption2); }
  .note-cmp { margin-top: calc(var(--space-1) * -1); font-size: var(--fs-caption1); }
}
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-wide { grid-column: auto; }
  .user-meta { display: none; }
  .user-chip { padding: var(--space-1); }
  .user-chip > .icon { display: none; }
  .topbar-right > .dev-tag { display: none; }
  .topbar-right { gap: var(--space-1); }
  .btn-pres kbd { display: none; }
  .btn-pres { width: var(--touch); height: var(--touch); padding: 0; border-radius: 50%; }
  .sidebar-foot .dev-tag-mobile { display: inline-flex; }
  .page-head h2 { font-size: var(--fs-title2); line-height: var(--lh-title2); }
  .page-head h2.accueil-titre { font-size: var(--fs-title1); line-height: var(--lh-title1); }
  .pgroup .field, .pgroup .field.sel { width: 100%; }
  .hb-row { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; font-size: var(--fs-caption1); }
  .hb-val span { display: none; }
  .alert-list li { grid-template-columns: auto minmax(0, 1fr); }
  .alert-list li .btn { grid-column: 2; justify-self: start; }
  .dl { grid-template-columns: 120px minmax(0, 1fr); }
  .cols-list { columns: 1; }
  .palette { top: var(--space-3); }
  .palette li { grid-template-columns: 64px minmax(0, 1fr); }
  .palette li .pd { display: none; }
  .admin-form { grid-template-columns: 1fr; }
  .toast { right: var(--space-4); left: var(--space-4); max-width: none; }
  /* feuilles : depuis le bas de l'écran, poignée de 36 × 5 px */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { max-width: none; max-height: 92vh; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; animation: or-montee var(--dur-normal) var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
  .modal::before, .drawer::before { content: ""; display: block; flex: none; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-1); margin: var(--space-2) auto 0; }
  .drawer { top: 8vh; bottom: 0; inset-inline: 0; width: auto; max-width: none; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; transform: translateY(100%); }
  .drawer.open { transform: none; }
  /* tableaux de rapport en cartes (une carte par ligne) */
  .table-wrap.cartes { max-height: none; overflow: visible; }
  .cartes .rpt, .cartes .rpt tbody, .cartes .rpt thead { display: block; }
  .cartes .rpt thead tr.h { display: none; }
  .cartes .rpt tr { display: block; margin: var(--space-3); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-inset); }
  .cartes .rpt thead tr.tot { margin-top: var(--space-3); }
  .cartes .rpt td, .cartes .rpt thead tr.tot th { display: flex; justify-content: space-between; gap: var(--space-3); position: static; height: auto; min-height: 36px; white-space: normal; text-align: end; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--separator-soft); box-shadow: none; background: transparent; }
  .cartes .rpt td::before, .cartes .rpt thead tr.tot th::before { content: attr(data-label); color: var(--label-2); font-weight: var(--fw-medium); text-align: start; font-style: normal; flex: none; max-width: 48%; }
  .cartes .rpt thead tr.tot th.vide { display: none; }
  .cartes .rpt td:empty { display: none; }
  .cartes .rpt .ajout { border-inline-start: 0; }
  .cartes .rpt .fige-der::after { content: none; }
  .table-foot { padding: var(--space-3); }
  #page-rapport .page-head { flex-wrap: wrap; }
  #page-rapport .kpi-bandeau { flex-direction: column; }
  #page-rapport .kpi-cle .kpi-value, #page-rapport .kpi-rapport .kpi-sm .kpi-value { font-size: var(--fs-headline); line-height: var(--lh-headline); }
  #page-rapport .kpi-cle .kpi-value small { font-size: var(--fs-caption2); }
  #page-rapport .kpi-bandeau-actions { justify-content: flex-end; }
  #page-rapport .params-actions { margin-inline-start: 0; justify-content: flex-start; }
  #page-rapport .pg-oblig { flex-basis: 100%; }
  #page-rapport .pg-oblig .field { width: calc(50% - 6px); }
  #page-rapport .pg-oblig .field.raccourcis, #page-rapport .pg-oblig .field.field-inv, #page-rapport .pg-oblig .field:has(> #inv-statut) { width: 100%; max-width: none; }
  #page-rapport .pg-oblig .field-error { position: static; width: auto; max-width: none; }
  #page-rapport .params-card form:has(.pg-oblig .field-error:not([hidden])) { padding-bottom: var(--space-3); }
  #page-rapport .page-actions .btn { font-size: 0; gap: 0; width: var(--touch); height: var(--touch); padding: 0; border-radius: 50%; }
  #page-rapport .notes-pop { width: min(560px, calc(100vw - 32px)); }
  .login-head { padding: var(--space-6) var(--space-5) var(--space-2); }
  .login-body { padding: var(--space-4) var(--space-5) var(--space-6); }
}
/* pointeur grossier (écran tactile) : toutes les cibles à 44 px */
@media (pointer: coarse) {
  :root { --control-h-sm: 44px; --seg-h: 40px; }
  .search-trigger { height: var(--touch); }
}

/* =====================================================================
   États de chargement (28/10/2026, retour de l'utilisateur : « on dirait une
   erreur, il affiche la partie inférieure puis la carte des KPI »).
   Squelettes présents dès le HTML initial, avec les MÊMES classes que le
   contenu final (étiquettes, alertes, blocs, bandeau d'indicateurs) : les
   hauteurs de ligne sont celles du contenu, aucun bloc ne bouge à l'arrivée
   des données. Le texte des squelettes est fait d'espaces de chiffre (U+2007) :
   rien de lisible, même en contraste élevé, jamais de « 0 » ni de « — »
   provisoire. Reflet animé neutralisé par prefers-reduced-motion.
   ===================================================================== */
.sq { color: transparent !important; border-radius: 6px; background-color: var(--fill-2); background-image: linear-gradient(90deg, transparent 0, var(--fill-4) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none; pointer-events: none; overflow-wrap: anywhere; animation: or-reflet 1.6s var(--ease-in-out) infinite; }
.sq-bloc { display: block; border-radius: var(--radius-lg); background-color: var(--fill-3); background-image: linear-gradient(90deg, transparent 0, var(--fill-4) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: or-reflet 1.6s var(--ease-in-out) infinite; }
@keyframes or-reflet { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .sq, .sq-bloc { animation: none !important; } }
@media (forced-colors: active) { .sq, .sq-bloc { forced-color-adjust: none; background: GrayText; } }
/* étiquettes en attente : même carte, sans lien ni survol */
.etq.sq-etq, .kpi.sq-kpi { pointer-events: none; }
/* pictogrammes posés par app.js (span[data-ico] remplacé par un svg de data-s px, 18 par défaut) : place réservée dès
   le premier affichage, pour que boutons et barres ne bougent pas à leur arrivée */
span[data-ico] { display: inline-block; inline-size: 18px; block-size: 18px; flex: none; }
span[data-ico][data-s="12"] { inline-size: 12px; block-size: 12px; } span[data-ico][data-s="13"] { inline-size: 13px; block-size: 13px; }
span[data-ico][data-s="14"] { inline-size: 14px; block-size: 14px; } span[data-ico][data-s="15"] { inline-size: 15px; block-size: 15px; }
span[data-ico][data-s="16"] { inline-size: 16px; block-size: 16px; } span[data-ico][data-s="20"] { inline-size: 20px; block-size: 20px; }
span[data-ico][data-s="22"] { inline-size: 22px; block-size: 22px; }
.search-box > span[data-ico] { position: absolute; inset-inline-start: var(--space-3); }
/* zone d'état ne portant qu'un texte pour lecteurs d'écran : hors du flux (pas d'espace réservé qui disparaîtrait) */
#page-accueil > #dash-etat:has(> .sr:only-child), #page-marge > #mg-etat:has(> .sr:only-child) { position: absolute; }
.sq-rond { display: inline-block; width: 20px; height: 20px; border-radius: 50%; }
.btn.sq { min-width: 0; }
.alertes-tete .ic:empty { background: var(--fill-3); }
@media (min-width: 1181px) { .etiquettes.simples.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etq.sq-etq .sticker.sq, .badge.sq { border: 0; border-radius: var(--radius-full); }
.etq.sq-etq .perfo .sq + .sq { margin-inline-start: 0; }
/* hauteurs réservées aux graphiques et tableaux en attente (proches du rendu final) */
.sq-h-120 { height: 120px; } .sq-h-200 { height: 200px; } .sq-h-240 { height: 240px; } .sq-h-280 { height: 280px; }
.sq-h-320 { height: 320px; } .sq-h-360 { height: 360px; } .sq-h-400 { height: 400px; }
.bloc-attente .planche-tete { min-height: 0; }
.bloc-attente .bloc-corps { margin-top: var(--space-4); }
/* tableau de rapport en attente : en-tête puis lignes de 44 px */
.sq-table { display: flex; flex-direction: column; padding: 0 var(--space-5) var(--space-4); }
.sq-table .sq-ligne { display: flex; align-items: center; gap: var(--space-4); min-height: var(--row-h); border-bottom: 1px solid var(--separator-soft); }
.sq-table .sq-ligne.sq-entete { border-bottom-color: var(--separator); }
.sq-table .sq-ligne > .sq { flex: 1 1 0; min-width: 0; font-size: var(--fs-footnote); line-height: 1; }
.sq-table .sq-ligne > .sq.sq-large { flex-grow: 3; }
.sq-statut { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: var(--label-2); font-size: var(--fs-footnote); }
.sq-statut .spinner { width: 16px; height: 16px; border-width: 2px; }
.sq-statut .btn { margin-inline-start: auto; }
/* apparition douce des valeurs (fondu court, neutralisé par prefers-reduced-motion dans tokens.css) */
.apparition { animation: or-fondu var(--dur-fast) var(--ease-out) both; }
/* en-tête de l'accueil et de la rubrique Marge : filtres toujours sous le titre (même disposition avant et après
   l'arrivée des données, le titre définitif étant plus long que « Tableau de bord ») */
#page-accueil .accueil-tete, #page-marge .accueil-tete { flex-direction: column; align-items: flex-start; }
#page-accueil .accueil-tete .dash-filtres, #page-marge .accueil-tete .dash-filtres { justify-content: flex-start; }