/* Hublot — design system v3.3.1. GÉNÉRÉ par scripts/build.mjs le 2026-11-09 depuis tokens/hublot.tokens.json : ne pas modifier à la main.
   Modes : thème par [data-theme="light"|"dark"|"auto"] sur <html> ; métier par [data-activity="poissonnerie"|"boucherie"] sur <html>, une vue ou une carte ;
   densité par [data-density="normal"|"compact"|"touch"] sur <html> (compact : crm-front ; touch : tablette en rayon). Les composants (bundle.css) n'utilisent que les emplacements brand*, accent*, nav*. */
:root, [data-theme="light"] {
  --surface: #f3f5f8; /* Fond de page, légèrement grisé pour que les cartes blanches se détachent. Tout le texte `ink*` se lit dessus. */
  --surface-raised: #ffffff; /* Cartes, panneaux, menus, lignes de liste et de tableau : ce qui est posé sur `surface`. */
  --surface-sunken: #eceff3; /* Zones en retrait : en-têtes de tableau, groupes de champs, commentaires, fond de code/PLU. */
  --surface-hover: #f6f8fa; /* Survol d'une ligne, d'un champ éditable au repos, d'un bouton neutre. */
  --line: #dde3ea; /* Filets et séparateurs de lignes. Décoratif, jamais porteur de sens seul. */
  --line-strong: #8794a3; /* Bordure des champs de saisie, cases à cocher, boutons neutres : ≥ 3:1 sur `surface-raised`, un champ se voit avant d'être cliqué. */
  --ink: #1a2230; /* Texte principal, titres, chiffres. */
  --ink-muted: #5b6675; /* Texte secondaire, libellés, métadonnées, icônes neutres. */
  --ink-faint: #8b95a3; /* Placeholders, texte désactivé, indices d'édition : jamais pour une information indispensable. */
  --poissonnerie: #376374; /* Couleur principale Poissonnerie, le bleu pétrole (logo, site, barre latérale). */
  --poissonnerie-hover: #2b515f; /* Survol et appui du bouton principal Poissonnerie. */
  --poissonnerie-soft: #e1eef2; /* Fond teinté derrière du texte `poissonnerie` : ligne sélectionnée, onglet actif, badge info. */
  --on-poissonnerie: #ffffff; /* Texte et icônes sur un fond `poissonnerie`. */
  --poissonnerie-accent: #8ac3d5; /* Couleur secondaire Poissonnerie, le bleu clair : remplissage, repère de navigation, série 1 des graphiques. Jamais comme texte sur fond clair. */
  --poissonnerie-accent-soft: #e8f4f7; /* Bandeau ou carte teintée Poissonnerie. */
  --on-poissonnerie-accent: #12313a; /* Texte sur un aplat `poissonnerie-accent`. */
  --poissonnerie-nav: #2f5563; /* Fond de la barre latérale Poissonnerie : la couleur principale, un ton plus sombre, comme sur la tablette et magasin. */
  --poissonnerie-nav-active: #a6d3e1; /* Texte, icône et repère de l'entrée active sur `poissonnerie-nav` (v3 : éclairci de #8ac3d5 à #a6d3e1 pour passer 5:1 sur la barre). */
  --poissonnerie-shade: rgba(16, 52, 66, 0.07); /* Teinte des ombres en Poissonnerie : bleu pétrole, jamais un gris neutre. Utilisée par les tokens d'ombre, pas directement. */
  --poissonnerie-shade-strong: rgba(16, 52, 66, 0.15); /* Teinte appuyée des ombres en Poissonnerie (portée longue des surfaces flottantes). */
  --boucherie: #9d0419; /* Couleur principale Boucherie, le rouge bordeaux. */
  --boucherie-hover: #7d0314; /* Survol et appui du bouton principal Boucherie. */
  --boucherie-soft: #f9e3e6; /* Fond teinté derrière du texte `boucherie`. */
  --on-boucherie: #ffffff; /* Texte et icônes sur un fond `boucherie`. */
  --boucherie-accent: #e44353; /* Couleur secondaire Boucherie, le rouge vif : remplissage, repère, série 1. Jamais comme texte sur fond clair. */
  --boucherie-accent-soft: #fbe6e8; /* Bandeau ou carte teintée Boucherie. */
  --on-boucherie-accent: #2a0508; /* Texte sur un aplat `boucherie-accent` : sombre dans les deux thèmes (le blanc ne passait que 4:1 sur le rouge vif). */
  --boucherie-nav: #7a0a1c; /* Fond de la barre latérale Boucherie. */
  --boucherie-nav-active: #f59aa3; /* Texte, icône et repère de l'entrée active sur `boucherie-nav`. */
  --boucherie-shade: rgba(64, 12, 22, 0.07); /* Teinte des ombres en Boucherie : bordeaux sombre. */
  --boucherie-shade-strong: rgba(64, 12, 22, 0.15); /* Teinte appuyée des ombres en Boucherie. */
  --brand: var(--poissonnerie); /* Emplacement métier : l'action principale, le lien actif, l'onglet courant, les icônes d'action. Les composants n'utilisent que les emplacements, jamais une couleur métier directement. */
  --brand-hover: var(--poissonnerie-hover); /* Survol et appui de `brand`. */
  --brand-soft: var(--poissonnerie-soft); /* Fond teinté derrière du texte `brand`. */
  --on-brand: var(--on-poissonnerie); /* Texte et icônes sur `brand`. Jamais du blanc en dur : `brand` s'éclaircit dans le thème sombre. */
  --accent: var(--poissonnerie-accent); /* Emplacement métier : remplissage (icône, repère, série 1 des graphiques, bandeau). Jamais comme texte sur fond clair. */
  --accent-soft: var(--poissonnerie-accent-soft); /* Bandeau ou carte teintée du métier. */
  --on-accent: var(--on-poissonnerie-accent); /* Texte sur un aplat `accent`, jamais blanc. */
  --nav: var(--poissonnerie-nav); /* Fond de la barre latérale, sombre dans les deux thèmes. */
  --shade: var(--poissonnerie-shade); /* Ombre courte du métier (contact avec la surface). */
  --shade-strong: var(--poissonnerie-shade-strong); /* Ombre portée du métier (élévation). */
  --nav-ink: #ffffff; /* Libellés et icônes de navigation sur `nav`. */
  --nav-muted: rgba(255, 255, 255, 0.78); /* Entrées inactives sur `nav`. */
  --nav-hover: rgba(255, 255, 255, 0.10); /* Survol d'une entrée sur `nav`. */
  --nav-active: var(--poissonnerie-nav-active); /* Texte, icône et barre de l'entrée active. */
  --nav-active-bg: rgba(255, 255, 255, 0.12); /* Fond de l'entrée active. */
  --info: var(--brand); /* Information neutre : bandeau, aide contextuelle. Suit le métier. */
  --slate: #535b7c; /* Bleu ardoise des titres du site : bouton secondaire plein, série 2, badge neutre teinté. */
  --slate-soft: #eaecf2; /* Fond teinté derrière du texte `slate`. */
  --on-slate: #ffffff; /* Texte sur `slate`. */
  --success: #1e7a4c; /* Terminé, payé, en ligne, conforme. Toujours accompagné d'un mot ou d'une icône. */
  --success-soft: #e0f3e8; /* Fond d'un badge ou d'une alerte `success`. */
  --on-success: #ffffff; /* Texte sur un aplat `success`. */
  --warning: #9a5200; /* À vérifier, expire bientôt, stock bas, DLC proche. */
  --warning-soft: #fdf0dc; /* Fond d'un badge ou d'une alerte `warning`. */
  --on-warning: #ffffff; /* Texte sur un aplat `warning`. */
  --danger: #b3261e; /* Erreur, impayé, hors ligne, action destructive. Un bouton destructif reste en contour, jamais en aplat rouge. */
  --danger-soft: #fbe9e7; /* Fond d'un badge ou d'une alerte `danger`. */
  --on-danger: #ffffff; /* Texte sur un aplat `danger`. */
  --link: #25667a; /* Liens dans le texte, souligné. */
  --focus-ring: #1a8bad; /* Anneau de focus clavier : 2 px d'écart puis 2 px pleins. */
  --chart-1: var(--accent); /* Série 1 des graphiques ECharts : l'accent du métier. */
  --chart-2: var(--slate); /* Série 2. */
  --chart-3: var(--warning); /* Série 3. */
  --chart-4: var(--success); /* Série 4. */
  --chart-5: var(--brand); /* Série 5 : le `brand` du métier. */
  --chart-grid: var(--line); /* Grille et axes des graphiques. */
  --shadow-sm: 0 1px 1px var(--shade), 0 1px 3px var(--shade); /* Niveau 1 : bouton, touche, puce. Juste assez pour décoller du fond. */
  --shadow-card: 0 1px 2px var(--shade), 0 6px 16px -6px var(--shade-strong); /* Niveau 2 : carte, liste, tableau posés sur la page grisée. */
  --shadow-md: 0 2px 4px var(--shade), 0 12px 28px -8px var(--shade-strong); /* Niveau 3 : menu, infobulle riche, barre collée, bouton flottant. */
  --shadow-lg: 0 4px 8px var(--shade), 0 24px 48px -12px var(--shade-strong); /* Niveau 4 : dialogue, panneau latéral. Le seul niveau qui masque ce qu'il recouvre. */
}
[data-theme="dark"] {
  --surface: #0f141b;
  --surface-raised: #161d27;
  --surface-sunken: #0c1117;
  --surface-hover: #1b2430;
  --line: #243040;
  --line-strong: #637386;
  --ink: #e6ebf1;
  --ink-muted: #9aa7b6;
  --ink-faint: #6c7886;
  --poissonnerie: #8ac3d5;
  --poissonnerie-hover: #a6d3e1;
  --poissonnerie-soft: #8ac3d524;
  --on-poissonnerie: #0f141b;
  --poissonnerie-accent: #8ac3d5;
  --poissonnerie-accent-soft: #8ac3d51f;
  --on-poissonnerie-accent: #0f141b;
  --poissonnerie-nav: #0c1419;
  --poissonnerie-nav-active: #8ac3d5;
  --poissonnerie-shade: rgba(0, 0, 0, 0.42);
  --poissonnerie-shade-strong: rgba(0, 0, 0, 0.62);
  --boucherie: #f28b95;
  --boucherie-hover: #f7aab2;
  --boucherie-soft: #e4435324;
  --on-boucherie: #0f141b;
  --boucherie-accent: #e44353;
  --boucherie-accent-soft: #e443531f;
  --on-boucherie-accent: #1b0305;
  --boucherie-nav: #1b1014;
  --boucherie-nav-active: #f59aa3;
  --boucherie-shade: rgba(0, 0, 0, 0.42);
  --boucherie-shade-strong: rgba(0, 0, 0, 0.62);
  --brand: var(--poissonnerie);
  --brand-hover: var(--poissonnerie-hover);
  --brand-soft: var(--poissonnerie-soft);
  --on-brand: var(--on-poissonnerie);
  --accent: var(--poissonnerie-accent);
  --accent-soft: var(--poissonnerie-accent-soft);
  --on-accent: var(--on-poissonnerie-accent);
  --nav: var(--poissonnerie-nav);
  --shade: var(--poissonnerie-shade);
  --shade-strong: var(--poissonnerie-shade-strong);
  --nav-ink: #e6ebf1;
  --nav-muted: #c3ccd6;
  --nav-hover: rgba(255, 255, 255, 0.08);
  --nav-active: var(--poissonnerie-nav-active);
  --nav-active-bg: rgba(255, 255, 255, 0.10);
  --info: var(--brand);
  --slate: #aab4c0;
  --slate-soft: #1c2531;
  --on-slate: #0f141b;
  --success: #6fd39d;
  --success-soft: #2f9e6429;
  --on-success: #0f141b;
  --warning: #f0b068;
  --warning-soft: #d9822b2e;
  --on-warning: #0f141b;
  --danger: #f28b8b;
  --danger-soft: #d645452e;
  --on-danger: #0f141b;
  --link: #8ac3d5;
  --focus-ring: #5cc6f2;
  --chart-1: var(--accent);
  --chart-5: var(--brand);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px var(--shade), 0 6px 16px -6px var(--shade-strong);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px var(--shade), 0 12px 28px -8px var(--shade-strong);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 8px var(--shade), 0 24px 48px -12px var(--shade-strong);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --surface: #0f141b;
    --surface-raised: #161d27;
    --surface-sunken: #0c1117;
    --surface-hover: #1b2430;
    --line: #243040;
    --line-strong: #637386;
    --ink: #e6ebf1;
    --ink-muted: #9aa7b6;
    --ink-faint: #6c7886;
    --poissonnerie: #8ac3d5;
    --poissonnerie-hover: #a6d3e1;
    --poissonnerie-soft: #8ac3d524;
    --on-poissonnerie: #0f141b;
    --poissonnerie-accent: #8ac3d5;
    --poissonnerie-accent-soft: #8ac3d51f;
    --on-poissonnerie-accent: #0f141b;
    --poissonnerie-nav: #0c1419;
    --poissonnerie-nav-active: #8ac3d5;
    --poissonnerie-shade: rgba(0, 0, 0, 0.42);
    --poissonnerie-shade-strong: rgba(0, 0, 0, 0.62);
    --boucherie: #f28b95;
    --boucherie-hover: #f7aab2;
    --boucherie-soft: #e4435324;
    --on-boucherie: #0f141b;
    --boucherie-accent: #e44353;
    --boucherie-accent-soft: #e443531f;
    --on-boucherie-accent: #1b0305;
    --boucherie-nav: #1b1014;
    --boucherie-nav-active: #f59aa3;
    --boucherie-shade: rgba(0, 0, 0, 0.42);
    --boucherie-shade-strong: rgba(0, 0, 0, 0.62);
    --brand: var(--poissonnerie);
    --brand-hover: var(--poissonnerie-hover);
    --brand-soft: var(--poissonnerie-soft);
    --on-brand: var(--on-poissonnerie);
    --accent: var(--poissonnerie-accent);
    --accent-soft: var(--poissonnerie-accent-soft);
    --on-accent: var(--on-poissonnerie-accent);
    --nav: var(--poissonnerie-nav);
    --shade: var(--poissonnerie-shade);
    --shade-strong: var(--poissonnerie-shade-strong);
    --nav-ink: #e6ebf1;
    --nav-muted: #c3ccd6;
    --nav-hover: rgba(255, 255, 255, 0.08);
    --nav-active: var(--poissonnerie-nav-active);
    --nav-active-bg: rgba(255, 255, 255, 0.10);
    --info: var(--brand);
    --slate: #aab4c0;
    --slate-soft: #1c2531;
    --on-slate: #0f141b;
    --success: #6fd39d;
    --success-soft: #2f9e6429;
    --on-success: #0f141b;
    --warning: #f0b068;
    --warning-soft: #d9822b2e;
    --on-warning: #0f141b;
    --danger: #f28b8b;
    --danger-soft: #d645452e;
    --on-danger: #0f141b;
    --link: #8ac3d5;
    --focus-ring: #5cc6f2;
    --chart-1: var(--accent);
    --chart-5: var(--brand);
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px var(--shade), 0 6px 16px -6px var(--shade-strong);
    --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px var(--shade), 0 12px 28px -8px var(--shade-strong);
    --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 8px var(--shade), 0 24px 48px -12px var(--shade-strong);
  }
}
/* Métier Boucherie : rebranche les emplacements. Posé sur <html>, une vue ou une carte ; un écran ne mélange pas les deux métiers. */
[data-activity="boucherie"] {
  --brand: var(--boucherie);
  --brand-hover: var(--boucherie-hover);
  --brand-soft: var(--boucherie-soft);
  --on-brand: var(--on-boucherie);
  --accent: var(--boucherie-accent);
  --accent-soft: var(--boucherie-accent-soft);
  --on-accent: var(--on-boucherie-accent);
  --nav: var(--boucherie-nav);
  --shade: var(--boucherie-shade);
  --shade-strong: var(--boucherie-shade-strong);
  --nav-active: var(--boucherie-nav-active);
  --info: var(--brand);
  --chart-1: var(--accent);
  --chart-5: var(--brand);
}
/* Métier Poissonnerie posé explicitement (une carte Poissonnerie dans un écran Boucherie, une page de comparaison). */
[data-activity="poissonnerie"] {
  --brand: var(--poissonnerie);
  --brand-hover: var(--poissonnerie-hover);
  --brand-soft: var(--poissonnerie-soft);
  --on-brand: var(--on-poissonnerie);
  --accent: var(--poissonnerie-accent);
  --accent-soft: var(--poissonnerie-accent-soft);
  --on-accent: var(--on-poissonnerie-accent);
  --nav: var(--poissonnerie-nav);
  --shade: var(--poissonnerie-shade);
  --shade-strong: var(--poissonnerie-shade-strong);
  --nav-active: var(--poissonnerie-nav-active);
  --info: var(--brand);
  --chart-1: var(--accent);
  --chart-5: var(--brand);
}
:root {
  /* Espacements, rayons, tailles. Les tailles marquées « densité » changent sous [data-density]. */
  --space-1: 4px; /* Écart icône/texte, marge interne d'un badge. */
  --space-2: 8px; /* Écart entre contrôles d'une même ligne, marge interne des puces. */
  --space-3: 12px; /* Marge interne des champs et cellules (desktop). */
  --space-4: 16px; /* Marge interne des cartes, gouttière de page mobile, marge interne des champs (tablette). */
  --space-5: 24px; /* Gouttière de page desktop, entre deux cartes. */
  --space-6: 32px; /* Entre deux sections d'une page. */
  --space-7: 48px; /* Entre deux sections du site public, état vide. */
  --space-8: 64px; /* Marge de section du site public. */
  --radius-sm: 4px; /* Badges, cases à cocher, cellules surlignées. */
  --radius-md: 8px; /* Boutons, champs, onglets, alertes, menus. */
  --radius-lg: 10px; /* Cartes, panneaux, tuiles, listes. */
  --radius-full: 999px; /* Puces, avatars, le disque du logo. */
  --control: 36px; /* Hauteur des boutons, champs et lignes denses. Suit la densité : 34 px en compact, 48 px en touch. */
  --control-sm: 30px; /* Petit bouton, bouton d'alerte. 44 px en touch : la cible tactile minimale. */
  --control-touch: 48px; /* Boutons, champs, lignes de liste et cases à cocher sur tablette (classes `-touch`, valable quelle que soit la densité). */
  --control-touch-lg: 56px; /* Bouton d'action principal en pied d'écran tablette. */
  --row: 44px; /* Ligne de tableau ou de liste : une sous-ligne y tient encore. */
  --icon: 20px; /* Icône dans un bouton ou une ligne. */
  --touch-target: 44px; /* Taille minimale d'une cible tactile, sur toutes les plateformes. */
  --sidenav: 248px; /* Largeur de la barre latérale dépliée. */
  --sidenav-rail: 64px; /* Largeur du rail replié (tablette, CRM réduit). */
  --content-max: 1280px; /* Largeur maximale du contenu d'une page CRM. */
  --topbar-height: 56px; /* Hauteur de la barre du haut (`v-app-bar`). */
  /* Polices et échelle de texte (densité normale : magasin, tablette hors rayon) */
  --font-display: "Paytone One", Roboto, system-ui, sans-serif; /* Paytone One (Google Fonts, une graisse) : l'accroche, le titre d'écran d'accueil, le mot-symbole « Hublot ». */
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Roboto 400, 500, 600 : tout le reste. */
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Codes PLU, EAN, identifiants, SQL. */
  --fs-body: 15px; /* Texte courant. */
  --fs-small: 13px; /* Métadonnées, aides, légendes. */
  --fs-label: 13px; /* Libellés de champ, en-têtes de colonne. Même taille que `small` : le libellé se distingue de l’aide par la graisse et la couleur, jamais par la taille. */
  --fs-h1: 24px; /* Titre de page. */
  --fs-h2: 20px; /* Titre de section. */
  --fs-h3: 16px; /* Sous-titre. */
  --fs-number-xl: 32px; /* Chiffre clé d'une tuile. */
  --fs-display: 32px; /* Accroche en Paytone One. Jamais en dessous de 24 px. */
  --fs-clock: 24px; /* Horloge de l'en-tête tablette. */
  --lh-body: 22px;
  --lh-small: 20px;
  --lh-label: 18px;
  --lh-h1: 32px;
  --lh-h2: 28px;
  --lh-h3: 24px;
  --lh-number-xl: 36px;
  --lh-display: 40px;
  --lh-clock: 28px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  /* Styles de texte composés : font: var(--text-h1) ; letter-spacing: var(--ls-h1) */
  --text-display: 400 var(--fs-display)/var(--lh-display) var(--font-display); /* Accroche, titre d'écran d'accueil tablette, mot-symbole « Hublot ». Un seul par page. */
  --ls-display: 0;
  --text-h1: 600 var(--fs-h1)/var(--lh-h1) var(--font-sans); /* Titre de page, en couleur `brand`. Paytone One reste au mot-symbole. */
  --ls-h1: -0.3px;
  --text-h2: 600 var(--fs-h2)/var(--lh-h2) var(--font-sans); /* Titre de section, de carte ou de dialogue. */
  --ls-h2: -0.2px;
  --text-h3: 600 var(--fs-h3)/var(--lh-h3) var(--font-sans); /* Sous-titre, titre d'une ligne de liste ou de tâche. */
  --ls-h3: 0;
  --text-body: 400 var(--fs-body)/var(--lh-body) var(--font-sans); /* Texte courant : formulaires, cellules, paragraphes. */
  --ls-body: 0;
  --text-body-strong: 500 var(--fs-body)/var(--lh-body) var(--font-sans); /* Titre d'une ligne de liste, nom dans une cellule. */
  --ls-body-strong: 0;
  --text-body-tablet: 400 17px/24px var(--font-sans); /* Texte courant sur tablette en rayon, quelle que soit la densité (équivaut à `body` en densité touch). */
  --ls-body-tablet: 0;
  --text-small: 400 var(--fs-small)/var(--lh-small) var(--font-sans); /* Métadonnées, aide sous un champ, légende. En `ink-muted`. */
  --ls-small: 0;
  --text-label: 500 var(--fs-label)/var(--lh-label) var(--font-sans); /* Libellé de champ, en-tête de colonne, titre de section d'une fiche. Casse de phrase (plus de capitales depuis la v2). */
  --ls-label: 0;
  --text-number-xl: 600 var(--fs-number-xl)/var(--lh-number-xl) var(--font-sans); /* Chiffre clé d'une tuile, chiffres tabulaires. */
  --ls-number-xl: -0.02em;
  --text-number: 500 var(--fs-body)/var(--lh-body) var(--font-sans); /* Montant ou poids dans une cellule, aligné à droite, chiffres tabulaires. */
  --ls-number: 0;
  --text-clock: 600 var(--fs-clock)/var(--lh-clock) var(--font-sans); /* Horloge de l'en-tête tablette. */
  --ls-clock: 0;
  --text-mono: 400 var(--fs-small)/var(--lh-small) var(--font-mono); /* Codes PLU, EAN, identifiants, SQL. Sur `surface-sunken`. */
  --ls-mono: 0;
  /* Mouvement, plans, points de rupture (informatifs : un @media ne lit pas une variable) */
  --duration-press: 120ms; /* Enfoncement d'un bouton, d'une touche, d'une case. */
  --duration-state: 180ms; /* Changement d'état : couleur, fond, filet, survol, focus. */
  --duration-tooltip: 150ms; /* Infobulle. */
  --duration-menu: 220ms; /* Menu, toast, accordéon, apparition d'une ligne. */
  --duration-drawer: 360ms; /* Panneau latéral, dialogue. */
  --ease-out: cubic-bezier(.23, 1, .32, 1); /* Tout ce qui entre (ease-out fort). */
  --ease-move: cubic-bezier(.77, 0, .175, 1); /* Ce qui se déplace à l'écran. */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* Panneaux latéraux. */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 20.6%, 1.061 24.5%, 1.077 28.3%, 1.071 32.3%, 1.035 41.4%, 1.008 50.5%, 0.997 60.4%, 1); /* Ressort léger (7 % de dépassement) : coche, interrupteur, toast, menu qui s'ouvre. Réponse à une action seulement. Repli : ease sur les navigateurs sans linear(). */
  --z-sticky: 10; /* En-tête collant, barre d'outils. */
  --z-nav: 20; /* Barre latérale, barre du haut. */
  --z-dropdown: 100; /* Menus, popovers, sélecteurs de date. */
  --z-drawer: 200; /* Panneau latéral. */
  --z-modal: 300; /* Dialogues et leur voile. */
  --z-toast: 400; /* Toasts, snackbars. */
  --z-tooltip: 500; /* Infobulles, au-dessus de tout. */
  --bp-sm: 600px; /* Téléphone au-dessous ; tablette portrait au-dessus (Vuetify `sm`). */
  --bp-md: 960px; /* Tablette paysage, CRM avec rail (Vuetify `md`). */
  --bp-lg: 1280px; /* Desktop, barre latérale dépliée (Vuetify 3 `lg` ; Vuetify 2 utilise 1264 px). */
  --bp-xl: 1920px; /* Grand écran (Vuetify 3 `xl` ; Vuetify 2 utilise 1904 px). */
  /* Alias v2 */
  --hb-ease-out: var(--ease-out); --hb-ease-move: var(--ease-move); --hb-ease-drawer: var(--ease-drawer);
}
/* Densité compacte : le CRM interne (crm-front), tableaux denses, 13,5 px, contrôles 34 px. */
[data-density="compact"] {
  --control: 34px;
  --control-sm: 30px;
  --row: 40px;
  --icon: 18px;
  --fs-body: 13.5px;
  --fs-small: 12.5px;
  --fs-label: 12.5px;
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-number-xl: 28px;
  --fs-display: 32px;
  --lh-body: 20px;
  --lh-small: 18px;
  --lh-label: 16px;
  --lh-h1: 32px;
  --lh-h2: 26px;
  --lh-h3: 22px;
  --lh-number-xl: 34px;
  --lh-display: 40px;
}
/* Densité touch : la tablette en rayon, lue debout, souvent d'une main : 17 px, contrôles 48 px, lignes 56 px. Remplace les classes -touch posées une à une. */
[data-density="touch"] {
  --control: 48px;
  --control-sm: 44px;
  --row: 56px;
  --icon: 24px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 15px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-number-xl: 36px;
  --fs-display: 36px;
  --lh-body: 24px;
  --lh-small: 22px;
  --lh-label: 20px;
  --lh-h1: 36px;
  --lh-h2: 30px;
  --lh-h3: 26px;
  --lh-number-xl: 40px;
  --lh-display: 44px;
}