/* Hublot — design system v3.3, composants `hb-*`. Chargé après tokens.css. Toutes les couleurs et tailles viennent des tokens ; aucun hexadécimal ici.
   Depuis la v3, le rebranchement métier `[data-activity="boucherie"]`, les courbes `--ease-*` (alias `--hb-ease-*`) et la densité `[data-density="touch"]` sont dans tokens.css :
   les classes `-touch` restent valables pour forcer la taille tactile d'un élément hors densité touch. */

/* Base */
body { margin: 0; font: var(--text-body); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.hb-display { font: var(--text-display); letter-spacing: 0; }
.hb-h1 { font: var(--text-h1); letter-spacing: -.3px; color: var(--brand); margin: 0; }
.hb-h2 { font: var(--text-h2); letter-spacing: -.2px; color: var(--ink); margin: 0; }
.hb-h3 { font: var(--text-h3); letter-spacing: 0; color: var(--ink); margin: 0; }
.hb-small { font: var(--text-small); color: var(--ink-muted); }
.hb-muted { color: var(--ink-muted); }
.hb-num { font-variant-numeric: tabular-nums; }
.hb-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.hb-stack { display: flex; flex-direction: column; gap: var(--space-3); }
a.hb-link { color: var(--link); text-decoration: underline; }

/* Page : gouttières, en-tête titre + actions */
.hb-page { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.hb-page--narrow { max-width: var(--content-max); margin: 0 auto; }
.hb-page-title { font: var(--text-h1); letter-spacing: -.3px; margin: 0; color: var(--brand); }
.hb-page-sub { font: var(--text-small); color: var(--ink-muted); margin: 2px 0 0; }
.hb-head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.hb-head__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Bouton. Un seul `hb-btn-primary` par écran ; le neutre porte un filet visible ; le destructif reste en contour. */
.hb-btn { font: var(--text-body); font-weight: 500; height: var(--control); --hb-btn-pad: var(--space-4); padding: 0 var(--hb-btn-pad); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform 140ms var(--hb-ease-out), background-color 120ms ease, box-shadow 120ms ease; }
.hb-btn:active { transform: scale(.97); box-shadow: none; }
.hb-btn .hb-ico, .hb-btn .v-icon { color: var(--brand); font-size: var(--icon); width: var(--icon); height: var(--icon); }
.hb-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hb-btn-primary .hb-ico, .hb-btn-primary .v-icon { color: var(--on-brand); }
.hb-btn-secondary { background: var(--slate); border-color: var(--slate); color: var(--on-slate); }
.hb-btn-secondary .hb-ico, .hb-btn-secondary .v-icon { color: var(--on-slate); }
.hb-btn-danger { color: var(--danger); border-color: var(--danger); }
.hb-btn-danger .hb-ico, .hb-btn-danger .v-icon { color: var(--danger); }
.hb-btn-quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--brand); }
.hb-btn-sm { height: var(--control-sm); --hb-btn-pad: var(--space-3); padding: 0 var(--hb-btn-pad); font-size: var(--fs-small); }
.hb-btn-touch { height: var(--control-touch); --hb-btn-pad: var(--space-5); padding: 0 var(--hb-btn-pad); font-size: 17px; }
[data-density="touch"] .hb-btn { --hb-btn-pad: var(--space-5); padding: 0 var(--hb-btn-pad); }
[data-density="touch"] .hb-btn-icon { padding: 0; }
.hb-btn-touch-lg { height: var(--control-touch-lg); --hb-btn-pad: var(--space-6); padding: 0 var(--hb-btn-pad); font-size: 17px; width: 100%; justify-content: center; }
.hb-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* Bouton à icône seule : carré, neutre au repos, prend la couleur métier au survol ; la variante danger ne rougit qu'au survol. Toujours une infobulle. */
.hb-btn-icon { position: relative; width: var(--control); height: var(--control); padding: 0; justify-content: center; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-muted); }
.hb-btn-icon .hb-ico, .hb-btn-icon .v-icon { color: inherit; }
.hb-btn:focus-visible, .hb-field:focus-visible, .hb-editable:focus-visible, .hb-tab:focus-visible, .hb-nav a:focus-visible, .hb-check:focus-visible, .hb-chip:focus-visible, .hb-radio:focus-visible, .hb-switch:focus-visible, .hb-segmented > button:focus-visible, .hb-stepper > button:focus-visible, .hb-key:focus-visible, .hb-listing-item:focus-visible, .hb-pagination-pages > button:focus-visible, .hb-details > summary:focus-visible, .hb-tip:focus-visible, .hb-fab:focus-visible, .hb-bottom-nav > a:focus-visible, .hb-bottom-nav > button:focus-visible, .hb-tree summary:focus-visible, .hb-tree-leaf:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .hb-btn:hover { background: var(--surface-hover); border-color: var(--ink-muted); }
  .hb-btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
  .hb-btn-secondary:hover { filter: brightness(.94); border-color: var(--slate); }
  .hb-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
  .hb-btn-quiet:hover { background: var(--brand-soft); border-color: transparent; }
  .hb-btn-icon:hover { background: var(--surface-sunken); border-color: transparent; color: var(--brand); }
  .hb-btn-icon.hb-btn-icon-danger:hover { background: var(--danger-soft); color: var(--danger); }
}

/* Champ : filet visible au repos, plus foncé au survol, couleur métier au focus. */
.hb-label { display: block; font: var(--text-label); color: var(--ink); margin-bottom: var(--space-1); }
.hb-field { font: var(--text-body); height: var(--control); width: 100%; box-sizing: border-box; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); transition: border-color 120ms ease, box-shadow 120ms ease; }
.hb-field::placeholder { color: var(--ink-faint); }
.hb-field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.hb-field:disabled { background: var(--surface-sunken); color: var(--ink-muted); cursor: default; }
textarea.hb-field { height: auto; padding: var(--space-2) var(--space-3); resize: vertical; }
.hb-field-touch { height: var(--control-touch); font-size: 17px; padding: 0 var(--space-4); }
.hb-field-num { text-align: right; font-variant-numeric: tabular-nums; }
.hb-field-mono { font: var(--text-mono); background: var(--surface-sunken); }
.hb-field[aria-invalid="true"] { border-color: var(--danger); }
.hb-hint { font: var(--text-small); color: var(--ink-muted); margin-top: var(--space-1); }
.hb-hint-error { color: var(--danger); }
.hb-group { display: flex; flex-direction: column; min-width: 200px; }
/* Champ composé (unité, stepper) : le cadre porte le filet et le focus, le champ intérieur n'a ni filet ni fond. L'unité suit la valeur, même taille, en `ink-muted`. */
.hb-suffix, .hb-stepper { display: flex; align-items: center; height: var(--control); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); overflow: hidden; transition: border-color 120ms ease, box-shadow 120ms ease; }
.hb-suffix > .hb-field, .hb-stepper > .hb-field { height: 100%; border: 0; border-radius: 0; background: transparent; }
.hb-suffix > .hb-field:focus, .hb-stepper > .hb-field:focus { box-shadow: none; }
.hb-suffix:focus-within, .hb-stepper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.hb-suffix:has(> .hb-field[aria-invalid="true"]), .hb-stepper:has(> .hb-field[aria-invalid="true"]) { border-color: var(--danger); }
.hb-suffix:has(> .hb-field:disabled), .hb-stepper:has(> .hb-field:disabled) { background: var(--surface-sunken); }
.hb-suffix > .hb-field { flex: 1; min-width: 0; padding-right: var(--space-1); }
.hb-suffix > span { flex: none; padding-right: var(--space-3); color: var(--ink-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .hb-field:hover:not(:disabled):not(:focus), :is(.hb-suffix, .hb-stepper):hover:not(:focus-within):not(:has(> .hb-field:disabled)) { border-color: var(--ink-muted); }
  .hb-group > .hb-time:hover:not([aria-expanded="true"]):not(:disabled):not(:focus-visible) { border-color: var(--ink-muted); background: var(--surface-raised); box-shadow: none; }
}

/* Texte éditable en place (titre, description) : se lit comme du texte, se reconnaît comme un champ.
   Au repos : filet discret et crayon `hb-editable-hint` posé dans le champ, à droite ; au survol : filet plein et fond ; au focus : couleur métier, le crayon disparaît.
   Le groupe prend la largeur disponible : l'appelant la borne (`max-width`) pour que le champ ne s'étire pas sur toute la page. */
.hb-editable-group { position: relative; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.hb-editable-group--multiline { align-items: flex-start; }
.hb-editable { font: inherit; color: inherit; width: calc(100% + 2 * var(--space-2)); box-sizing: border-box; margin: 0 calc(-1 * var(--space-2)); padding: var(--space-1) calc(var(--icon) + 2 * var(--space-2)) var(--space-1) var(--space-2); background: transparent; border: 1px dashed var(--line); border-radius: var(--radius-md); transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
.hb-editable::placeholder { color: var(--ink-faint); font-style: italic; }
.hb-editable:focus { outline: none; background: var(--surface-raised); border: 1px solid var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.hb-editable:focus ~ .hb-editable-hint { opacity: 0; }
.hb-editable:disabled { border-color: transparent; cursor: default; }
.hb-editable:disabled ~ .hb-editable-hint { display: none; }
textarea.hb-editable { resize: none; }
.hb-editable-hint { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: var(--icon); width: var(--icon); height: var(--icon); line-height: 1; pointer-events: none; transition: opacity 120ms ease, color 120ms ease; }
.hb-editable-group--multiline .hb-editable-hint { top: calc(var(--space-1) + 1px + var(--lh-body) / 2); }
@media (hover: hover) and (pointer: fine) {
  .hb-editable:hover:not(:disabled):not(:focus) { border: 1px solid var(--line-strong); background: var(--surface-raised); }
  .hb-editable-group:hover .hb-editable-hint { color: var(--brand); }
}

/* Case à cocher */
.hb-check { appearance: none; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--surface-raised); margin: 0; flex: none; cursor: pointer; display: grid; place-items: center; transition: transform 120ms var(--hb-ease-out), background-color 120ms ease, border-color 120ms ease; }
.hb-check:active { transform: scale(.9); }
.hb-check:checked { background: var(--brand); border-color: var(--brand); }
.hb-check:checked::after { content: ""; width: 5px; height: 10px; border: solid var(--on-brand); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.hb-check:disabled { opacity: .5; cursor: default; }
.hb-check-touch, [data-density="touch"] .hb-check { width: 28px; height: 28px; }
.hb-check-touch:checked::after, [data-density="touch"] .hb-check:checked::after { width: 7px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .hb-check:hover:not(:checked):not(:disabled) { border-color: var(--brand); } }
.hb-check-label { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--ink); }

/* Badge d'état (point + mot) et puce (avatar + nom) */
.hb-badge { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--text-label); line-height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); white-space: nowrap; }
.hb-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.hb-badge-success { background: var(--success-soft); color: var(--success); }
.hb-badge-warning { background: var(--warning-soft); color: var(--warning); }
.hb-badge-danger { background: var(--danger-soft); color: var(--danger); }
.hb-badge-info { background: var(--brand-soft); color: var(--brand); }
.hb-badge-slate { background: var(--slate-soft); color: var(--slate); }
.hb-badge-plain::before { display: none; }
.hb-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-2) 0 3px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font: var(--text-small); font-weight: 500; white-space: nowrap; max-width: 100%; cursor: default; }
.hb-chip > span { overflow: hidden; text-overflow: ellipsis; }
.hb-chip-action { cursor: pointer; }
.hb-chip-more { padding: 0 var(--space-2); color: var(--ink-muted); background: var(--surface-sunken); border-color: transparent; }
.hb-avatar { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--slate); color: var(--on-slate); font: 600 10px/20px var(--font-sans); text-align: center; flex: none; letter-spacing: .02em; }
.hb-chip .hb-avatar { width: 18px; height: 18px; line-height: 18px; font-size: 9px; }
.hb-avatar-group { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { .hb-chip-action:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } }

/* Carte : blanche, filet et ombre, posée sur la page grisée. `hb-card-h` en-tête avec filet sous lui. */
.hb-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hb-card-h { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.hb-card-h h2, .hb-card-h__title { margin: 0; font: var(--text-h3); letter-spacing: 0; color: var(--ink); }
.hb-card-h__sub { font: var(--text-small); color: var(--ink-muted); }
.hb-card-h__icon { color: var(--brand); display: inline-flex; }
.hb-card-h__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.hb-card-body { padding: var(--space-4) var(--space-5); }
/* Barre d'actions (pied de carte, dialogue, formulaire) : Annuler / Fermer en premier dans le DOM donc à gauche, l'action principale en dernier donc à droite, toujours un espace entre les deux. */
.hb-card-foot, .hb-actions { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-2); background: var(--surface-hover); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.hb-card-foot > :first-child, .hb-actions > :first-child, .hb-dialog-actions > :first-child { margin-right: auto; }
.hb-card-foot > :only-child, .hb-actions > :only-child, .hb-dialog-actions > :only-child { margin-right: 0; margin-left: auto; }
/* Bouton discret en tête de pied : son texte s'aligne sur le contenu de la carte, le fond de survol déborde dans la marge. */
.hb-card-foot > .hb-btn-quiet:first-child:not(:only-child), .hb-actions > .hb-btn-quiet:first-child:not(:only-child), .hb-dialog-actions > .hb-btn-quiet:first-child:not(:only-child) { margin-left: calc(-1 * var(--hb-btn-pad)); }
/* Bandeau teinté en tête de carte (titre d'une check-list, fiche) : la couleur métier en fond doux, le titre en `brand`. */
.hb-card-banner { padding: var(--space-4) var(--space-5); background: var(--brand-soft); border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* Zone en retrait dans une carte (groupe de champs, encadré) */
.hb-sunken { background: var(--surface-sunken); border-radius: var(--radius-md); }

/* Tuile de chiffre clé */
.hb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.hb-tile { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); border-top: 3px solid var(--accent); }
.hb-tile-label { font: var(--text-label); font-weight: 400; color: var(--ink-muted); }
.hb-tile-value { font: var(--text-number-xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hb-tile-delta { font: var(--text-small); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-1); }
.hb-tile-delta b { font-weight: 500; }
.hb-tile-delta.up b { color: var(--success); }
.hb-tile-delta.down b { color: var(--danger); }
.hb-tile--text .hb-tile-value { font: var(--text-h3); letter-spacing: 0; }
.hb-spark { display: block; width: 100%; height: 28px; margin-top: var(--space-2); }
.hb-spark .fill { fill: var(--accent-soft); }
.hb-spark .stroke { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.hb-spark .dot { fill: var(--brand); }

/* Tableau : en-tête en retrait, lignes séparées par un filet, survol teinté */
.hb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.hb-table { width: 100%; border-collapse: collapse; font: var(--text-body); }
.hb-table th { text-align: left; font: var(--text-label); color: var(--ink-muted); background: var(--surface-sunken); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.hb-table td { padding: 0 var(--space-3); height: var(--row); border-bottom: 1px solid var(--line); vertical-align: middle; }
.hb-table tr:last-child td { border-bottom: 0; }
.hb-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.hb-table .mono { font: var(--text-mono); color: var(--ink-muted); }
.hb-table tr[aria-selected="true"] td { background: var(--brand-soft); }
@media (hover: hover) and (pointer: fine) { .hb-table tbody tr:hover td { background: var(--surface-hover); } }
.hb-table-touch td { height: var(--control-touch); font-size: 17px; }
.hb-table-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font: var(--text-small); color: var(--ink-muted); }
/* Tableau, suite : en-tête triable (`aria-sort` sur le th), en-tête collant, colonne de sélection, ligne de totaux, variante dense. */
.hb-table th[aria-sort] { cursor: pointer; user-select: none; }
.hb-table th[aria-sort]::after { content: "\2195"; margin-left: 4px; color: var(--ink-faint); }
.hb-table th[aria-sort="ascending"]::after { content: "\2191"; color: var(--brand); }
.hb-table th[aria-sort="descending"]::after { content: "\2193"; color: var(--brand); }
.hb-table th[aria-sort="ascending"], .hb-table th[aria-sort="descending"] { color: var(--brand); }
.hb-table--sticky th { position: sticky; top: 0; z-index: 1; }
.hb-table .sel { width: 22px; padding-right: 0; }
.hb-table tfoot td { font-weight: 500; background: var(--surface-sunken); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.hb-table--dense td { height: var(--control-sm); }
.hb-cell-title { font-weight: 500; color: var(--ink); }
.hb-cell-title--empty { font-weight: 400; color: var(--ink-muted); }
.hb-cell-sub { font: var(--text-small); color: var(--ink-muted); margin-top: 1px; white-space: nowrap; }
.hb-cell-sub > span + span::before { content: '·'; margin: 0 6px; }

/* Fiche : liste clé / valeur, bloc de code */
.hb-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-4); margin: 0; }
.hb-kv dt { font: var(--text-small); color: var(--ink-muted); }
.hb-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hb-code { font: var(--text-mono); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 60vh; color: var(--ink); }
.mono { font: var(--text-mono); background: var(--surface-sunken); color: var(--ink); border-radius: var(--radius-sm); padding: 0 4px; }
.mono--plain, .hb-cell-sub .mono { background: transparent; padding: 0; color: inherit; }

/* Panneau latéral */
.hb-drawer-h { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); background: var(--surface-raised); position: sticky; top: 0; z-index: 1; }
.hb-drawer-h__text { flex: 1; min-width: 0; }
.hb-drawer-h h2, .hb-drawer-h__title { margin: 0; font: var(--text-h2); letter-spacing: -.2px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-drawer-h__sub { font: var(--text-small); color: var(--ink-muted); margin-top: 2px; }
.hb-drawer-h__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.hb-drawer-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.hb-drawer-section > h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font: var(--text-label); color: var(--ink-muted); }
.hb-drawer-section > h3 .spacer { flex: 1; }

/* Navigation latérale : fond sombre métier, entrée active en couleur d'accent avec barre */
.hb-nav { width: var(--sidenav); background: var(--nav); color: var(--nav-ink); display: flex; flex-direction: column; gap: 20px; padding: 20px var(--space-3); box-sizing: border-box; min-height: 100%; }
.hb-nav-brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); font: var(--text-display); font-size: 22px; line-height: 28px; }
.hb-nav-brand i { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--accent); box-shadow: inset 0 0 0 4px var(--nav); outline: 3px solid var(--accent); outline-offset: -1px; flex: none; }
.hb-nav-sections { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.hb-nav-section { display: flex; flex-direction: column; gap: 2px; }
.hb-nav-group { display: flex; align-items: center; gap: var(--space-1); width: 100%; margin: 0; border: 0; background: none; font: var(--text-label); text-transform: uppercase; letter-spacing: .04em; text-align: left; color: var(--nav-muted); padding: 0 10px 4px; cursor: pointer; }
.hb-nav-group span { flex: 1; }
.hb-nav-group .chev { color: inherit; opacity: .6; transition: transform 200ms var(--hb-ease-out); }
.hb-nav-group[aria-expanded="true"] .chev { transform: rotate(90deg); }
.hb-nav-items { display: flex; flex-direction: column; gap: 2px; }
.hb-nav a, .v-application .hb-nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; padding: 0 10px; border-radius: var(--radius-md); color: var(--nav-muted); text-decoration: none; font: var(--text-body); position: relative; box-sizing: border-box; }
.hb-nav a .ico, .hb-nav a .v-icon, .hb-nav a .material-icons { width: 22px; height: 22px; font-size: 22px; color: currentColor; flex: none; }
.hb-nav a .ico { border-radius: var(--radius-sm); background: currentColor; opacity: .55; }
.hb-nav a[aria-current="page"], .v-application .hb-nav a[aria-current="page"] { color: var(--nav-active); background: var(--nav-active-bg); font-weight: 500; }
.hb-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--nav-active); }
.hb-nav a[aria-current="page"] .ico { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .hb-nav a:hover, .v-application .hb-nav a:hover { color: var(--nav-ink); background: var(--nav-hover); } .hb-nav-group:hover { color: var(--nav-ink); } }
@media (prefers-reduced-motion: reduce) { .hb-nav-group .chev { transition: none; } }
@media (max-width: 599.98px) { .hb-nav a { min-height: 44px; } }
.hb-nav-rail { width: var(--sidenav-rail); }
.hb-nav-rail a { justify-content: center; padding: 0; }
.hb-nav-rail .hb-nav-group, .hb-nav-rail a span, .hb-nav-rail .hb-nav-brand span { display: none; }
.hb-nav-rail .hb-nav-brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* Onglets : filet sous la rangée, l'actif en couleur métier avec barre de 3 px */
.hb-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); padding: 0; overflow-x: auto; }
.hb-tab { font: var(--text-body); font-weight: 500; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: var(--space-3) var(--space-4); color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-md) var(--radius-md) 0 0; white-space: nowrap; }
.hb-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); background: var(--brand-soft); }
.hb-tab .count, .hb-count { font: var(--text-label); line-height: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hb-tab[aria-selected="true"] .count { background: var(--surface-raised); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .hb-tab:hover { color: var(--ink); background: var(--surface-hover); } }

/* Barre d'outils : boutons à icône seule alignés, sur fond de page, de carte ou de bandeau teinté ; le menu ⋮ regroupe le secondaire et le destructif. */
.hb-toolbar { display: flex; align-items: center; gap: var(--space-1); }
.hb-toolbar .hb-btn-icon { background: transparent; }
.hb-toolbar-sep { width: 1px; height: 20px; background: var(--line-strong); opacity: .5; margin: 0 var(--space-1); }
@media (hover: hover) and (pointer: fine) { .hb-card-banner .hb-btn-icon:hover, .hb-toolbar .hb-btn-icon:hover { background: var(--surface-raised); box-shadow: var(--shadow-sm); } }
/* Puce à bascule (filtre) : neutre au repos, teinte métier quand elle est active. */
.hb-chip-toggle { height: var(--control-sm); padding: 0 var(--space-3) 0 var(--space-2); gap: var(--space-1); font: var(--text-small); font-weight: 500; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink-muted); }
.hb-chip-toggle .material-icons, .hb-chip-toggle .v-icon { font-size: 18px; color: inherit; }
.hb-chip-toggle[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
/* Onglet « + » : crée un nouvel onglet, en bout de rangée, icône seule avec infobulle. */
.hb-tab-add { flex: none; align-self: center; width: 32px; height: 32px; padding: 0; justify-content: center; margin: 0 0 2px var(--space-1); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; }
.hb-tab-add .material-icons, .hb-tab-add .v-icon { font-size: 20px; color: inherit; }
@media (hover: hover) and (pointer: fine) { .hb-tab-add:hover { border-style: solid; border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .hb-chip-toggle:hover { border-color: var(--brand); color: var(--brand); } }
/* Bandeau : titre et actions sur une même ligne de base, la toolbar calée en haut à droite. */
.hb-card-banner .hb-head { align-items: flex-start; }
.hb-card-banner .hb-head__actions { margin-top: 2px; }

/* Alerte */
.hb-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); border-left-width: 4px; background: var(--surface-raised); color: var(--ink); }
.hb-alert .ico { width: 20px; height: 20px; border-radius: var(--radius-full); flex: none; margin-top: 1px; background: currentColor; }
.hb-alert b { font-weight: 500; }
.hb-alert p { margin: 0; }
.hb-alert-info { background: var(--brand-soft); border-color: var(--brand); }
.hb-alert-info .ico, .hb-alert-info b { color: var(--brand); }
.hb-alert-success { background: var(--success-soft); border-color: var(--success); }
.hb-alert-success .ico, .hb-alert-success b { color: var(--success); }
.hb-alert-warning { background: var(--warning-soft); border-color: var(--warning); }
.hb-alert-warning .ico, .hb-alert-warning b { color: var(--warning); }
.hb-alert-danger { background: var(--danger-soft); border-color: var(--danger); }
.hb-alert-danger .ico, .hb-alert-danger b { color: var(--danger); }
.hb-alert .hb-btn, .hb-alert .v-btn { margin-left: auto; height: var(--control-sm); padding: 0 var(--space-3); }

/* Liste de lignes (tâches, commentaires) : carte à filet et ombre, une ligne par entrée sur une grille fixe.
   Colonnes : poignée · case · contenu · colonne droite (date, personnes, actions) à largeurs fixes, pour que tout s'aligne d'une ligne à l'autre.
   Au repos, une ligne ne montre que du texte ; le survol révèle la poignée, le lien d'ajout et les actions ; le clic sur un texte l'édite. */
.hb-list { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-card); }
.hb-list-row { display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); transition: background-color 120ms ease; }
.hb-list-row:last-child { border-bottom: 0; }
.hb-list-row--done .hb-list-title, .hb-list-row--done .hb-inline-title { color: var(--ink-muted); text-decoration: line-through; }
.hb-list-row--comment { background: var(--surface-sunken); box-shadow: inset 3px 0 0 var(--accent); }
.hb-list-row--comment .hb-inline-title { font-weight: 400; }
.hb-list-handle { display: flex; align-items: center; justify-content: center; width: 20px; height: 22px; margin-top: 1px; opacity: 0; transition: opacity 120ms ease; }
.hb-list-check { margin-top: 1px; }
.hb-list-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; color: var(--brand); }
.hb-list-icon .material-icons, .hb-list-icon .v-icon { font-size: 20px; color: inherit; }
.hb-list-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding-top: 1px; }
.hb-list-title { font: var(--text-body-strong); color: var(--ink); }
.hb-list-desc { font: var(--text-small); color: var(--ink-muted); }
.hb-list-meta { font: var(--text-small); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Texte éditable d'une ligne : nu au repos ; au survol de la ligne, seul le texte sous le pointeur prend la forme d'un champ (les deux à la fois feraient deux boîtes collées) ; couleur métier au focus. */
.hb-inline { font: inherit; color: inherit; width: 100%; box-sizing: border-box; display: block; margin: -2px calc(-1 * var(--space-2)); padding: 1px var(--space-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); outline: none; transition: background-color 120ms ease, border-color 120ms ease; }
.hb-inline::placeholder { color: var(--ink-faint); }
.hb-inline-title { font: var(--text-body-strong); color: var(--ink); }
.hb-inline-desc { font: var(--text-small); color: var(--ink-muted); resize: none; }
.hb-inline:focus { background: var(--surface-raised); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); color: var(--ink); }
.hb-inline:disabled { cursor: default; }
/* Lien discret d'ajout (description, détail) : visible au survol de la ligne seulement. */
.hb-list-add { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); border: 0; padding: 0; margin: 0 0 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); background: none; font: var(--text-small); color: var(--ink-faint); cursor: pointer; border-radius: var(--radius-sm); opacity: 0; transition: opacity 120ms ease, color 120ms ease; }
.hb-list-add .material-icons, .hb-list-add .v-icon { font-size: 16px; color: inherit; }
/* Colonne droite : date, personnes, actions, chacune à largeur fixe. */
.hb-list-side { display: grid; grid-template-columns: 112px 104px 64px; column-gap: var(--space-3); align-items: center; height: 24px; margin-top: 0; }
.hb-list-side--comment { grid-template-columns: 64px; }
.hb-list-date { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); border: 0; border-radius: var(--radius-sm); background: none; font: var(--text-small); color: var(--ink-muted); white-space: nowrap; cursor: pointer; }
.hb-list-date .material-icons, .hb-list-date .v-icon { font-size: 18px; color: inherit; }
.hb-list-date:disabled { cursor: default; }
.hb-list-date--today { color: var(--brand); font-weight: 500; }
.hb-list-date--late { color: var(--danger); font-weight: 500; }
.hb-list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; opacity: 0; transition: opacity 120ms ease; }
.hb-list-actions .hb-btn-icon { width: var(--control-sm); height: var(--control-sm); }
.hb-list-actions .hb-btn-icon .material-icons, .hb-list-actions .hb-btn-icon .v-icon { font-size: 18px; }
/* Personnes : avatars empilés, noms en infobulle ; vide = un avatar pointillé « + ». Peut être un <button>. */
.hb-avatar-stack { border: 0; padding: 0; background: none; font: inherit; }
.hb-avatar-stack:disabled { cursor: default; }
.hb-avatar-stack { display: inline-flex; align-items: center; height: 24px; cursor: pointer; border-radius: var(--radius-full); }
.hb-avatar-stack .hb-avatar { width: 24px; height: 24px; line-height: 24px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface-raised); }
.hb-avatar-stack .hb-avatar + .hb-avatar, .hb-avatar-stack .hb-avatar + .hb-avatar-more { margin-left: -6px; }
.hb-avatar-more { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font: 500 11px/24px var(--font-sans); text-align: center; box-shadow: 0 0 0 2px var(--surface-raised); }
.hb-avatar-add { width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--radius-full); border: 1px dashed var(--line-strong); color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; }
.hb-avatar-add .material-icons, .hb-avatar-add .v-icon { font-size: 16px; color: inherit; }
.hb-list-row--comment .hb-list-body { padding-top: 1px; }
@media (hover: hover) and (pointer: fine) {
  .hb-list-row:hover { background: var(--surface-hover); }
  .hb-list-row--comment:hover { background: var(--surface-sunken); }
  .hb-list-row:hover .hb-list-handle, .hb-list-row:hover .hb-list-actions, .hb-list-row:hover .hb-list-add, .hb-list-row:focus-within .hb-list-actions { opacity: 1; }
  .hb-list-row:hover .hb-inline:not(:focus):not(:disabled) { cursor: text; }
  .hb-list-row:hover .hb-inline:hover:not(:focus):not(:disabled) { background: var(--surface-raised); border-color: var(--line-strong); }
  .hb-list-add:hover, .hb-avatar-stack:hover .hb-avatar-add { color: var(--brand); border-color: var(--brand); }
  .hb-list-date:hover { background: var(--surface-sunken); color: var(--ink); }
}
@media (hover: none) { .hb-list-handle, .hb-list-actions, .hb-list-add { opacity: 1; } }
/* Glisser-déposer : réordonner une liste par sa poignée. Les classes suivent les options de Sortable.js (vuedraggable) : `handle: '.hb-handle'`, `ghostClass: 'hb-drag-ghost'` (l'emplacement d'arrivée dans la liste), `dragClass: 'hb-drag-lifted'` (la copie qui suit le pointeur, avec `forceFallback: true`). `hb-list-handle` et `hb-list-row--ghost` de la liste de tâches en sont les variantes. */
:is(.hb-handle, .hb-list-handle) { position: relative; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; color: var(--ink-faint); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.hb-handle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 22px; }
:is(.hb-handle, .hb-list-handle) :is(.material-icons, .v-icon) { font-size: 20px; color: inherit; }
:is(.hb-handle, .hb-list-handle):active { cursor: grabbing; }
:is(.hb-handle, .hb-list-handle):focus-visible { opacity: 1; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:is(.hb-drag-ghost, .hb-list-row--ghost) { opacity: 1; background: var(--brand-soft); outline: 1px dashed var(--brand); outline-offset: -1px; box-shadow: none; }
:is(.hb-drag-ghost, .hb-list-row--ghost) > * { visibility: hidden; }
.hb-drag-lifted { opacity: 1 !important; background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-md); scale: 1.02; cursor: grabbing; }
.hb-drag-lifted :is(.hb-handle, .hb-list-handle) { opacity: 1; color: var(--brand); cursor: grabbing; }
.hb-drop-over { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { :is(.hb-handle, .hb-list-handle):hover { color: var(--ink-muted); background: var(--surface-sunken); } }
@media (pointer: coarse) { :is(.hb-handle, .hb-list-handle)::before { content: ""; position: absolute; inset: calc((22px - var(--touch-target)) / 2) calc((20px - var(--touch-target)) / 2); } }

/* Ligne de tâche compacte (tablette) */
.hb-task { display: flex; align-items: center; gap: var(--space-4); height: var(--control-touch); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-raised); font-size: 17px; }
[data-density="touch"] .hb-task { height: var(--row); }
.hb-task:last-child { border-bottom: 0; }
.hb-task .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-task input:checked ~ .title { color: var(--ink-muted); text-decoration: line-through; }
.hb-task .time { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: 15px; }
.hb-task .hb-field { width: 112px; }
.hb-task a { color: var(--link); font-size: 15px; }

/* État vide. Dans une liste, l'état vide est une ligne squelette qui garde la forme d'une tâche (`hb-list-row--empty`) ; le bloc centré pointillé (`hb-empty`) sert aux pages sans liste. */
.hb-list-row--empty { align-items: center; color: var(--ink-faint); border-bottom: 1px dashed var(--line-strong); background: transparent; }
.hb-list-row--empty .hb-list-handle { opacity: 1; }
.hb-list-row--empty .hb-check { pointer-events: none; border-style: dashed; background: transparent; }
.hb-list-row--empty .hb-list-title { color: var(--ink-faint); font-weight: 400; font-style: italic; }
.hb-list-row--empty .hb-skeleton { flex: 1; max-width: 240px; }
.hb-skeleton { display: block; height: 10px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.hb-skeleton + .hb-skeleton { margin-top: var(--space-2); width: 60%; }
.hb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); max-width: 440px; margin: 0 auto; }
.hb-empty .ring { width: 48px; height: 48px; border-radius: var(--radius-full); border: 6px solid var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); margin-bottom: var(--space-2); }
.hb-empty h3 { margin: 0; font: var(--text-h3); color: var(--ink); }
.hb-empty p { margin: 0; font: var(--text-body); }
.hb-empty .hb-btn { margin-top: var(--space-2); }
.hb-empty--flat { border: 0; padding: var(--space-6) var(--space-4); }

/* Toast : confirmation après une action (« Cuisson enregistrée »). Posé en bas au centre, sur fond `ink`, une seule ligne, disparaît seul ; jamais porteur d'une erreur bloquante (une erreur reste dans une alerte). */
.hb-toast { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: var(--z-toast); display: inline-flex; align-items: center; gap: var(--space-3); max-width: min(560px, calc(100% - 2 * var(--space-4))); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--surface-raised); font: var(--text-body); box-shadow: var(--shadow-md); }
.hb-toast .ico { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--success); flex: none; }
.hb-toast-danger .ico { background: var(--danger); }
.hb-toast .hb-btn { height: var(--control-sm); border-color: transparent; background: transparent; color: var(--accent); box-shadow: none; margin-left: var(--space-2); }
.hb-toast-enter { animation: hb-toast-in var(--duration-menu) var(--ease-out); }
@keyframes hb-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Accessibilité : texte lu par le lecteur d'écran seulement ; lien d'évitement visible au focus. */
.hb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hb-skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-tooltip); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: var(--text-body-strong); }
.hb-skip-link:focus { top: var(--space-4); outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Dialogue (contenu d'un v-dialog ou d'un <dialog>) */
.hb-dialog { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.hb-dialog-h { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); font: var(--text-h2); letter-spacing: -.2px; }
.hb-dialog-body { padding: var(--space-4) var(--space-5); font: var(--text-body); }
.hb-dialog-actions { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-hover); display: flex; align-items: center; gap: var(--space-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Menu flottant (contenu d'un v-menu ou d'un popover maison) */
.hb-menu { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-1) 0; min-width: 200px; }
.hb-menu-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control); padding: 0 var(--space-4); font: var(--text-body); color: var(--ink); cursor: pointer; white-space: nowrap; }
.hb-menu-item[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); }
.hb-menu-sep { height: 1px; background: var(--line); margin: var(--space-1) 0; }
@media (hover: hover) and (pointer: fine) { .hb-menu-item:hover { background: var(--surface-hover); } }

/* Filtres en tête de carte */
.hb-filters { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hb-filters > .v-input { flex: 0 0 220px; max-width: 220px; }
.hb-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); align-items: center; }
.hb-filter-grid > * { min-width: 0; }
.hb-filter-grid__actions { display: flex; align-items: center; gap: var(--space-1); }

/* Bouton radio et interrupteur : même filet et même couleur métier que la case à cocher ; 28 px en densité touch. `hb-choices` empile les options (`--row` les aligne). */
.hb-radio { appearance: none; width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--line-strong); background: var(--surface-raised); margin: 0; flex: none; cursor: pointer; display: grid; place-items: center; box-sizing: border-box; transition: border-color 120ms ease; }
.hb-radio:checked { border-color: var(--brand); }
.hb-radio:checked::after { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand); }
.hb-radio:disabled { opacity: .5; cursor: default; }
[data-density="touch"] .hb-radio { width: 28px; height: 28px; }
[data-density="touch"] .hb-radio:checked::after { width: 14px; height: 14px; }
.hb-switch { appearance: none; width: 40px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--line-strong); background: var(--surface-sunken); margin: 0; flex: none; cursor: pointer; position: relative; box-sizing: border-box; transition: background-color 160ms ease, border-color 160ms ease; }
.hb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ink-muted); transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.hb-switch:checked { background: var(--brand); border-color: var(--brand); }
.hb-switch:checked::after { transform: translateX(18px); background: var(--on-brand); }
.hb-switch:disabled { opacity: .5; cursor: default; }
[data-density="touch"] .hb-switch { width: 52px; height: 28px; }
[data-density="touch"] .hb-switch::after { width: 20px; height: 20px; }
[data-density="touch"] .hb-switch:checked::after { transform: translateX(24px); }
.hb-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.hb-choices--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
.hb-check-label > .hb-small { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .hb-radio:hover:not(:checked):not(:disabled), .hb-switch:hover:not(:checked):not(:disabled) { border-color: var(--brand); } }

/* Liste déroulante native : la boîte d'un champ, un chevron en bout ; pour un choix court sans recherche (sinon v-select / v-autocomplete). */
.hb-select { position: relative; display: block; }
.hb-select > .hb-field { appearance: none; padding-right: calc(var(--space-3) + 24px); cursor: pointer; }
.hb-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.hb-select:focus-within::after { border-color: var(--brand); }

/* Icône en tête de champ (recherche, téléphone) et bouton d'effacement en bout. */
.hb-prefix { position: relative; }
.hb-prefix > .material-icons, .hb-prefix > .v-icon, .hb-prefix > .ico { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); font-size: var(--icon); width: var(--icon); height: var(--icon); color: var(--ink-muted); pointer-events: none; }
.hb-prefix > .hb-field { padding-left: calc(var(--space-3) + var(--icon) + var(--space-2)); }
.hb-prefix:focus-within > .material-icons, .hb-prefix:focus-within > .v-icon, .hb-prefix:focus-within > .ico { color: var(--brand); }
.hb-prefix > .hb-clear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: calc(var(--control) - 8px); height: calc(var(--control) - 8px); }
.hb-prefix.has-clear > .hb-field { padding-right: var(--control); }

/* Sélecteur de quantité : « − champ + » ; le champ reste saisissable, les boutons ajustent par pas. Prend la hauteur de contrôle de la densité. */
.hb-stepper { display: inline-flex; align-items: stretch; }
.hb-group > .hb-stepper { display: flex; }
.hb-stepper > button { flex: none; width: calc(var(--control) - 2px); border: 0; background: var(--surface-sunken); color: var(--brand); font: var(--text-h3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.hb-stepper > button:disabled { color: var(--ink-faint); cursor: default; }
.hb-stepper > .hb-field { width: 72px; text-align: center; font-variant-numeric: tabular-nums; padding: 0 var(--space-1); }
.hb-group > .hb-stepper > .hb-field { flex: 1; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .hb-stepper > button:hover:not(:disabled) { background: var(--brand-soft); } }

/* Formulaire : grille de champs à deux colonnes (une seule sur téléphone), groupe avec légende, marque « requis » sur le libellé. */
.hb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hb-form-full { grid-column: 1 / -1; }
.hb-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hb-fieldset > legend, .hb-legend { padding: 0; margin: 0 0 var(--space-1); font: var(--text-label); color: var(--ink); }
.hb-label-required::after { content: " *"; color: var(--danger); }

/* Contrôle segmenté : un choix exclusif parmi deux à cinq (Jour / Semaine / Mois), un seul bouton pressé (`aria-pressed`). */
.hb-segmented { display: inline-flex; padding: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); box-sizing: border-box; }
.hb-segmented > button { border: 0; background: transparent; height: calc(var(--control) - 6px); padding: 0 var(--space-3); border-radius: calc(var(--radius-md) - 2px); font: var(--text-small); font-weight: 500; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.hb-segmented > button .material-icons, .hb-segmented > button .v-icon { font-size: 18px; color: inherit; }
.hb-segmented > button[aria-pressed="true"] { background: var(--surface-raised); color: var(--brand); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) { .hb-segmented > button:hover:not([aria-pressed="true"]) { color: var(--ink); } }

/* Progression : barre (`--value` en %, `hb-progress--busy` sans valeur), anneau tournant, surcouche de chargement, étapes numérotées. */
.hb-progress { height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.hb-progress > i { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--brand); transition: width 240ms var(--ease-out); }
.hb-progress-success > i { background: var(--success); }
.hb-progress-warning > i { background: var(--warning); }
.hb-progress-danger > i { background: var(--danger); }
.hb-progress--busy > i { width: 40%; animation: hb-busy 1.2s var(--ease-move) infinite; }
.hb-progress-label { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--text-small); color: var(--ink-muted); margin-bottom: var(--space-1); font-variant-numeric: tabular-nums; }
@keyframes hb-busy { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.hb-spinner { display: inline-block; width: var(--icon); height: var(--icon); box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--brand-soft); border-top-color: var(--brand); animation: hb-spin .8s linear infinite; flex: none; }
.hb-spinner-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes hb-spin { to { transform: rotate(360deg); } }
.hb-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--ink-muted); font: var(--text-small); border-radius: inherit; }
.hb-loading::before { content: ""; position: absolute; inset: 0; background: var(--surface-raised); opacity: .8; border-radius: inherit; }
.hb-loading > * { position: relative; }
.hb-steps { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.hb-steps > li { flex: 1; display: flex; align-items: center; gap: var(--space-2); font: var(--text-small); color: var(--ink-muted); min-width: 0; white-space: nowrap; }
.hb-steps > li::before { counter-increment: step; content: counter(step); width: 26px; height: 26px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--line-strong); background: var(--surface-raised); color: var(--ink-muted); font: var(--text-label); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hb-steps > li::after { content: ""; flex: 1; height: 2px; background: var(--line); min-width: var(--space-4); }
.hb-steps > li:last-child { flex: none; }
.hb-steps > li:last-child::after { display: none; }
.hb-steps > li[aria-current="step"] { color: var(--brand); font-weight: 500; }
.hb-steps > li[aria-current="step"]::before { border-color: var(--brand); color: var(--brand); }
.hb-steps > li.done { color: var(--ink); }
.hb-steps > li.done::before { content: "\2713"; background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hb-steps > li.done::after { background: var(--brand); }

/* Pagination : le compte « 1–25 sur 312 » à gauche, les pages à droite, la courante en couleur métier, les flèches en boutons à icône. */
.hb-pagination { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font: var(--text-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hb-pagination-pages { display: inline-flex; gap: 2px; margin-left: auto; }
.hb-pagination-pages > button { min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font: var(--text-small); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hb-pagination-pages > button .material-icons, .hb-pagination-pages > button .v-icon { font-size: 18px; color: inherit; }
.hb-pagination-pages > button[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hb-pagination-pages > button:disabled { color: var(--ink-faint); cursor: default; }
.hb-pagination-pages > span { min-width: var(--control-sm); text-align: center; line-height: var(--control-sm); color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) { .hb-pagination-pages > button:hover:not([aria-current="page"]):not(:disabled) { background: var(--surface-hover); border-color: var(--line); } }

/* Fil d'Ariane : au-dessus du titre de page, la page courante sans lien. */
.hb-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: var(--text-small); color: var(--ink-muted); }
.hb-breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.hb-breadcrumb li + li::before { content: "\203A"; margin-right: var(--space-1); color: var(--ink-faint); }
.hb-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .hb-breadcrumb a:hover { color: var(--brand); text-decoration: underline; } }

/* Accordéon (`<details>`) : titre avec chevron, contenu en retrait ; un seul ou plusieurs à la suite. Séparateur : filet seul ou avec un mot au milieu. */
.hb-details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.hb-details + .hb-details { margin-top: var(--space-2); }
.hb-details > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: var(--control); padding: 0 var(--space-4); font: var(--text-body-strong); color: var(--ink); cursor: pointer; border-radius: inherit; }
.hb-details > summary::-webkit-details-marker { display: none; }
.hb-details > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-right: var(--space-1); flex: none; transition: transform 160ms var(--ease-out); }
.hb-details[open] > summary::before { transform: rotate(45deg); }
.hb-details[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.hb-details > summary > .hb-small, .hb-details > summary > .hb-badge, .hb-details > summary > .hb-count { margin-left: auto; }
.hb-details-body { padding: var(--space-3) var(--space-4); }
.hb-divider { display: flex; align-items: center; gap: var(--space-3); font: var(--text-label); color: var(--ink-muted); margin: var(--space-2) 0; }
.hb-divider::before, .hb-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (hover: hover) and (pointer: fine) { .hb-details > summary:hover { background: var(--surface-hover); } }

/* Chronologie (historique d'une fiche, journal de synchro) : heure en tabulaire à gauche, point sur un trait, texte à droite ; le point prend la couleur de l'état (`tone-success`, `tone-warning`, `tone-danger`, `tone-brand` : pas `success` seul, que Vuetify peint en fond). */
.hb-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hb-timeline > li { position: relative; display: grid; grid-template-columns: 64px 12px minmax(0, 1fr); column-gap: var(--space-3); padding-bottom: var(--space-4); }
.hb-timeline > li::before { content: ""; grid-column: 2; grid-row: 1; width: 12px; height: 12px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--surface-raised); border: 3px solid var(--line-strong); margin-top: 4px; position: relative; z-index: 1; }
.hb-timeline > li::after { content: ""; position: absolute; left: calc(64px + var(--space-3) + 5px); top: 16px; bottom: -4px; width: 2px; background: var(--line); }
.hb-timeline > li:last-child { padding-bottom: 0; }
.hb-timeline > li:last-child::after { display: none; }
.hb-timeline > li.tone-success::before { border-color: var(--success); }
.hb-timeline > li.tone-warning::before { border-color: var(--warning); }
.hb-timeline > li.tone-danger::before { border-color: var(--danger); }
.hb-timeline > li.tone-brand::before { border-color: var(--brand); background: var(--brand); }
.hb-timeline-time { grid-column: 1; grid-row: 1; font: var(--text-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; padding-top: 1px; }
.hb-timeline-body { grid-column: 3; grid-row: 1; min-width: 0; font: var(--text-body); color: var(--ink); }
.hb-timeline-body b { font-weight: 500; }
.hb-timeline-body p { margin: 2px 0 0; font: var(--text-small); color: var(--ink-muted); }

/* Infobulle sans Vuetify (`data-tip`) : au survol et au focus, sous l'élément. Dans une app Vuetify, préférer v-tooltip. */
.hb-tip { position: relative; }
.hb-tip::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translate(-50%, -2px); z-index: var(--z-tooltip); padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--ink); color: var(--surface-raised); font: var(--text-small); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-tooltip) ease, transform var(--duration-tooltip) var(--ease-out); }
.hb-tip:hover::after, .hb-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Pavé numérique (tablette : poids, prix, PLU) : touches de 64 px, le montant saisi au-dessus en `hb-amount`. Le « C » efface, la coche valide en couleur métier. */
.hb-amount { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--space-2); font: var(--text-number-xl); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.hb-amount > small { font: var(--text-h3); color: var(--ink-muted); }
.hb-amount--placeholder { color: var(--ink-faint); }
.hb-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.hb-key { height: 64px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: var(--text-h2); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform var(--duration-press) var(--ease-out), background-color 120ms ease; -webkit-tap-highlight-color: transparent; }
.hb-key:active { transform: scale(.96); background: var(--surface-sunken); box-shadow: none; }
.hb-key .material-icons, .hb-key .v-icon { font-size: 28px; color: inherit; }
.hb-key-muted { background: var(--surface-sunken); color: var(--ink-muted); font: var(--text-h3); }
.hb-key-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hb-key-wide { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) { .hb-key:hover { border-color: var(--ink-muted); } .hb-key-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } }

/* Barre de validation collée (tablette, formulaire long) : résumé ou total à gauche, actions à droite, au-dessus du contenu qui défile. */
.hb-footbar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
.hb-footbar > :first-child { margin-right: auto; }
.hb-footbar-total { font: var(--text-number); font-variant-numeric: tabular-nums; color: var(--ink); }
.hb-footbar-total > small { font: var(--text-small); color: var(--ink-muted); margin-right: var(--space-2); }

/* Liste simple (réglages, menus de tablette, résultats) : icône, libellé et sous-texte, valeur ou chevron à droite ; chaque entrée fait au moins une ligne. */
.hb-listing { margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.hb-listing-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--row); padding: var(--space-2) var(--space-4); box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font: var(--text-body); text-align: left; text-decoration: none; cursor: pointer; }
.hb-listing > li:last-child > .hb-listing-item, .hb-listing > .hb-listing-item:last-child { border-bottom: 0; }
.hb-listing-item > .material-icons, .hb-listing-item > .v-icon, .hb-listing-item > .ico { color: var(--brand); font-size: var(--icon); width: var(--icon); height: var(--icon); flex: none; }
.hb-listing-item > .text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hb-listing-item > .text > small { font: var(--text-small); color: var(--ink-muted); }
.hb-listing-item > .value { font: var(--text-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hb-listing-item > .chev { width: 7px; height: 7px; border: solid var(--ink-faint); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 4px; flex: none; }
.hb-listing-item[aria-current="true"] { background: var(--brand-soft); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .hb-listing-item:hover { background: var(--surface-hover); } }

/* Zone de dépôt de fichier : pointillé, icône métier, texte ; couleur métier quand un fichier la survole (`hb-dropzone--over`). L'`<input type="file">` reste dedans, caché. */
.hb-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--ink-muted); font: var(--text-small); text-align: center; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.hb-dropzone > .material-icons, .hb-dropzone > .v-icon { font-size: 32px; color: var(--brand); }
.hb-dropzone b { font: var(--text-body-strong); color: var(--ink); }
.hb-dropzone input[type="file"] { display: none; }
.hb-dropzone--over { border-color: var(--brand); background: var(--brand-soft); }
@media (hover: hover) and (pointer: fine) { .hb-dropzone:hover { border-color: var(--brand); } }

/* Squelette de chargement, suite : ligne de texte, bloc, cercle ; `hb-skeleton-pulse` sur le squelette ou son conteneur y fait passer un balayage (voir Mouvement). */
.hb-skeleton--text { height: 12px; }
.hb-skeleton--block { height: 80px; border-radius: var(--radius-md); }
.hb-skeleton--circle { width: 40px; height: 40px; border-radius: var(--radius-full); }
.hb-skeleton + .hb-skeleton--block { width: auto; }
.hb-skeleton + .hb-skeleton--circle { width: 40px; }

/* Point d'état seul (dans un onglet, à côté d'un nom) et pastille sur un bouton à icône (notification, compte). */
.hb-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ink-muted); flex: none; vertical-align: middle; }
.hb-dot-success { background: var(--success); }
.hb-dot-warning { background: var(--warning); }
.hb-dot-danger { background: var(--danger); }
.hb-dot-brand { background: var(--brand); }
.hb-btn-icon > .hb-dot { position: absolute; top: 6px; right: 6px; box-shadow: 0 0 0 2px var(--surface-raised); }
.hb-btn-icon > .hb-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 10px; box-sizing: border-box; background: var(--danger); color: var(--on-danger); box-shadow: 0 0 0 2px var(--surface-raised); }

/* Touche clavier dans une aide (`<kbd>`), avatars en trois tailles, avatar image. */
.hb-kbd { font: var(--text-mono); font-size: 12px; line-height: 18px; padding: 0 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); }
.hb-avatar-md { width: 32px; height: 32px; line-height: 32px; font-size: 13px; }
.hb-avatar-lg { width: 48px; height: 48px; line-height: 48px; font-size: 18px; }
.hb-avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }

/* Curseur (`<input type="range">`) : piste fine, poignée en couleur métier, 28 px de poignée en densité touch ; la valeur s'affiche à côté dans `hb-range-value`. */
.hb-range { display: flex; align-items: center; gap: var(--space-3); }
.hb-range > input[type="range"] { appearance: none; flex: 1; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.hb-range > input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); border: 1px solid var(--line); }
.hb-range > input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); border: 1px solid var(--line); }
.hb-range > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: var(--radius-full); background: var(--brand); border: 3px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--brand); }
.hb-range > input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--brand); border: 3px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--brand); }
.hb-range > input[type="range"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-full); }
.hb-range > input[type="range"]:disabled { opacity: .5; cursor: default; }
.hb-range-value { min-width: 56px; text-align: right; font: var(--text-body-strong); font-variant-numeric: tabular-nums; }
[data-density="touch"] .hb-range > input[type="range"] { height: 28px; }
[data-density="touch"] .hb-range > input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }

/* Barre de navigation basse (tablette, téléphone) : trois à cinq entrées, icône au-dessus du libellé, l'active en couleur métier. Collée en bas, au-dessus du contenu. */
.hb-bottom-nav { position: sticky; bottom: 0; z-index: var(--z-nav); display: flex; background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
.hb-bottom-nav > a, .hb-bottom-nav > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--control-touch-lg); padding: var(--space-1) var(--space-2); border: 0; background: none; color: var(--ink-muted); font: var(--text-label); text-decoration: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.hb-bottom-nav .material-icons, .hb-bottom-nav .v-icon { font-size: 24px; color: inherit; }
.hb-bottom-nav > [aria-current="page"] { color: var(--brand); }
.hb-bottom-nav > [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 2px 2px; background: var(--brand); }
.hb-bottom-nav .hb-count { position: absolute; top: 6px; left: calc(50% + 6px); background: var(--danger); color: var(--on-danger); line-height: 16px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; box-sizing: border-box; }

/* Bouton flottant : l'action principale d'un écran tactile quand la barre de validation ne convient pas (créer, scanner). Un seul par écran, en bas à droite. */
.hb-fab { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-sticky); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 56px; height: 56px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font: var(--text-body-strong); box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--duration-press) var(--ease-out), background-color 120ms ease; -webkit-tap-highlight-color: transparent; }
.hb-fab .material-icons, .hb-fab .v-icon { font-size: 24px; color: inherit; }
.hb-fab:active { transform: scale(.95); }
.hb-fab--icon { padding: 0; width: 56px; }
.hb-fab--static { position: static; }
@media (hover: hover) and (pointer: fine) { .hb-fab:hover { background: var(--brand-hover); } }

/* Bannière de page : message qui concerne toute la page (hors ligne, version à mettre à jour, période de clôture), sous la barre du haut, fermable. Pour un message local à une carte : `hb-alert`. */
.hb-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); background: var(--brand-soft); color: var(--ink); font: var(--text-body); border-bottom: 1px solid var(--line); }
.hb-banner > .material-icons, .hb-banner > .v-icon { color: var(--brand); font-size: var(--icon); flex: none; }
.hb-banner > p { margin: 0; flex: 1; min-width: 0; }
.hb-banner b { font-weight: 500; }
.hb-banner-warning { background: var(--warning-soft); }
.hb-banner-warning > .material-icons, .hb-banner-warning > .v-icon { color: var(--warning); }
.hb-banner-danger { background: var(--danger-soft); }
.hb-banner-danger > .material-icons, .hb-banner-danger > .v-icon { color: var(--danger); }
.hb-banner .hb-btn { height: var(--control-sm); }

/* Arborescence : `<details>` imbriqués (rayons, familles, produits). Chaque niveau décale de 20 px ; une feuille est un lien ou un bouton sans chevron. */
.hb-tree { margin: 0; padding: 0; list-style: none; font: var(--text-body); }
.hb-tree ul { margin: 0; padding: 0 0 0 20px; list-style: none; }
.hb-tree summary, .hb-tree-leaf { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--ink); cursor: pointer; text-decoration: none; border: 0; background: none; width: 100%; box-sizing: border-box; text-align: left; font: inherit; }
.hb-tree summary::-webkit-details-marker { display: none; }
.hb-tree summary::before { content: ""; width: 6px; height: 6px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; flex: none; transition: transform 160ms var(--ease-out); }
.hb-tree details[open] > summary::before { transform: rotate(45deg); }
.hb-tree-leaf { padding-left: calc(var(--space-2) + 16px); }
.hb-tree-leaf[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.hb-tree .hb-count, .hb-tree .hb-badge { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .hb-tree summary:hover, .hb-tree-leaf:hover { background: var(--surface-hover); } }

/* Erreur de page : la page entière n'a pas pu se charger (réseau, droits, introuvable). Centré, icône, titre, cause en une phrase, une action pour réessayer ou revenir. Pour une erreur de champ : `hb-hint-error` ; pour une erreur locale : `hb-alert-danger`. */
.hb-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); max-width: 480px; margin: 0 auto; color: var(--ink-muted); }
.hb-error > .material-icons, .hb-error > .v-icon { font-size: 48px; color: var(--danger); margin-bottom: var(--space-2); }
.hb-error h2 { margin: 0; font: var(--text-h2); color: var(--ink); }
.hb-error p { margin: 0; font: var(--text-body); }
.hb-error .hb-code { text-align: left; width: 100%; max-height: 160px; font-size: 12px; }
.hb-error .hb-row { margin-top: var(--space-3); justify-content: center; }

/* Prix et poids : une valeur et son unité, alignés sur la ligne de base, chiffres tabulaires ; trois tailles. `hb-measure--muted` pour un prix barré ou secondaire. */
.hb-measure { display: inline-flex; align-items: baseline; gap: 3px; font: var(--text-number); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-number); color: var(--ink); white-space: nowrap; }
.hb-measure > small { font: var(--text-small); color: var(--ink-muted); }
.hb-measure-lg { font: var(--text-h2); letter-spacing: 0; }
.hb-measure-lg > small { font: var(--text-body); }
.hb-measure-xl { font: var(--text-number-xl); letter-spacing: -.02em; }
.hb-measure-xl > small { font: var(--text-h3); }
.hb-measure--muted { color: var(--ink-muted); }
.hb-measure--strike { color: var(--ink-faint); text-decoration: line-through; }
.hb-measure--up { color: var(--success); }
.hb-measure--down { color: var(--danger); }

/* Panneau à onglets dans un panneau latéral ou une carte : `hb-tabs` au-dessus, un panneau visible à la fois (`hidden` sur les autres). */
.hb-tabpanel { padding: var(--space-4) 0 0; }
.hb-tabpanel[hidden] { display: none; }

/* Sélecteur d'heure à la manière d'iOS (`Hublot.timePicker`, `Hublot.timeField`, script dans bundle.js).
   Deux roues en boucle, heures et minutes ; la ligne au centre est la valeur, posée sur une bande grise arrondie ; les autres tournent sur un cylindre et s'effacent.
   On fait défiler au doigt, à la molette ou au clavier (flèches, Page, Début, Fin) ; un appui sur une ligne l'amène au centre ; la roue s'arrête net sur une valeur.
   `hb-time` est la pastille d'heure d'iOS : un appui ouvre les roues dans une bulle (`hb-popover`), la valeur change en direct. */
.hb-timepicker { --wheel-item: 36px; --wheel-rows: 5; position: relative; display: inline-flex; justify-content: center; gap: 2px; padding: 0 var(--space-2); user-select: none; -webkit-user-select: none; }
[data-density="touch"] .hb-timepicker { --wheel-item: 44px; }
[data-density="compact"] .hb-timepicker { --wheel-item: 32px; }
.hb-timepicker::before { content: ""; position: absolute; left: var(--space-1); right: var(--space-1); top: 50%; height: var(--wheel-item); transform: translateY(-50%); border-radius: var(--radius-md); background: var(--surface-sunken); pointer-events: none; transition: box-shadow var(--duration-state) ease; }
.hb-timepicker:has(.hb-wheel:focus-visible)::before { box-shadow: 0 0 0 2px var(--focus-ring); }
.hb-wheel { position: relative; width: 72px; height: calc(var(--wheel-item) * var(--wheel-rows)); overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; perspective: 520px; outline: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); }
.hb-wheel::-webkit-scrollbar { display: none; }
.hb-wheel-track { padding: calc(var(--wheel-item) * (var(--wheel-rows) - 1) / 2) 0; transform-style: preserve-3d; }
.hb-wheel-item { height: var(--wheel-item); display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: normal; font: 400 22px/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink); cursor: pointer; backface-visibility: hidden; will-change: transform, opacity; }
[data-density="touch"] .hb-wheel-item { font-size: 24px; }
[data-density="compact"] .hb-wheel-item { font-size: 19px; }
.hb-wheel-item.is-selected { font-weight: 500; }
/* Pastille d'heure : fond gris arrondi, chiffres tabulaires ; en couleur métier tant que la bulle est ouverte. */
.hb-time { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: var(--control); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font: var(--text-body); font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--duration-state) ease, background-color var(--duration-state) ease, transform var(--duration-press) var(--ease-out); }
.hb-time[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); }
/* Dans un formulaire, l'heure prend le cadre d'un champ : même filet, même fond, valeur à gauche. */
.hb-group > .hb-time { width: 100%; justify-content: flex-start; border: 1px solid var(--line-strong); background: var(--surface-raised); }
.hb-group > .hb-time[aria-expanded="true"], .hb-group > .hb-time:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); color: var(--ink); background: var(--surface-raised); }
.hb-time:active { transform: scale(.97); }
.hb-time:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hb-time:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .hb-time:hover:not([aria-expanded="true"]):not(:disabled) { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--line); } }
/* Bulle flottante (ouverte par un script : sélecteur d'heure, petit réglage) : niveau 4, s'ouvre en ressort depuis la pastille. */
.hb-popover { position: fixed; z-index: var(--z-dropdown); padding: var(--space-2) var(--space-1); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: hb-pop-in var(--duration-menu) var(--ease-spring); }
@media (prefers-reduced-motion: reduce) { .hb-popover { animation: hb-fade-in var(--duration-state) ease; } .hb-time, .hb-timepicker::before { transition: none; } }

/* Plateformes : un même balisage sur poste, tablette Android, iPhone et iPad.
   – Thème natif : les contrôles du système (sélecteurs, barres de défilement, champs date) suivent le thème ; `accent-color` les met à la couleur métier.
   – Tactile (`pointer: coarse`) : pas de surbrillance grise au toucher, pas de délai de double-tap, et les champs à 16 px au moins (sinon Safari iOS zoome à la saisie).
   – Zones de sécurité (encoche, barre d'accueil, iPad en multitâche) : pages, barres collées, bouton flottant et toast s'écartent de `env(safe-area-inset-*)` ; l'application pose `viewport-fit=cover` dans la balise viewport.
   – Hauteur d'écran : un conteneur plein écran prend `100dvh` (la barre d'adresse de Safari iOS va et vient), avec `100vh` en repli. */
:root { color-scheme: light; accent-color: var(--brand); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; } }
.hb-btn, .hb-time, .hb-chip, .hb-tab, .hb-tab-add, .hb-check, .hb-radio, .hb-switch, .hb-key, .hb-listing-item, .hb-list-date, .hb-avatar-stack, .hb-segmented > button, .hb-stepper > button, .hb-pagination-pages > button, .hb-bottom-nav > a, .hb-bottom-nav > button, .hb-fab, .hb-nav a, .hb-tree summary, .hb-tree-leaf, .hb-details > summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (pointer: coarse) {
  .hb-field, .hb-editable, .hb-inline, .hb-stepper > .hb-field, .hb-select > .hb-field, .hb-suffix > span, .hb-time { font-size: max(16px, 1em); }
}
.hb-page { padding-left: max(var(--space-6), env(safe-area-inset-left)); padding-right: max(var(--space-6), env(safe-area-inset-right)); }
.hb-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
.hb-footbar { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
.hb-fab { right: max(var(--space-5), calc(env(safe-area-inset-right) + var(--space-3))); bottom: max(var(--space-5), calc(env(safe-area-inset-bottom) + var(--space-3))); }
.hb-toast { bottom: max(var(--space-5), calc(env(safe-area-inset-bottom) + var(--space-3))); }
.hb-nav { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* Contraste renforcé (réglage d'accessibilité iOS, Android, macOS, Windows) : filets au niveau des bordures de champ, texte secondaire en encre, anneau de focus de 3 px. */
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --ink-muted: var(--ink); --ink-faint: var(--ink-muted); }
  .hb-btn:focus-visible, .hb-field:focus-visible, .hb-check:focus-visible, .hb-radio:focus-visible, .hb-switch:focus-visible, .hb-tab:focus-visible, .hb-chip:focus-visible { outline-width: 3px; }
  .hb-card, .hb-list, .hb-table-wrap, .hb-tile, .hb-menu, .hb-dialog { border-color: var(--line-strong); }
}

/* Mouvement : une réponse à chaque action, rien qui bouge seul hors chargement.
   Ressort (`--ease-spring`) pour ce qui confirme (coche, interrupteur, toast, menu qui s'ouvre) ; sortie rapide (`--ease-out`) pour ce qui change d'état ; balayage pour ce qui charge.
   Tout est coupé ou ramené à un fondu sous `prefers-reduced-motion`. */
.hb-btn { transition: transform var(--duration-press) var(--ease-out), background-color var(--duration-state) ease, border-color var(--duration-state) ease, box-shadow var(--duration-state) ease, color var(--duration-state) ease; }
.hb-btn:focus-visible, .hb-field:focus-visible, .hb-check:focus-visible, .hb-radio:focus-visible, .hb-switch:focus-visible, .hb-tab:focus-visible, .hb-chip:focus-visible, .hb-key:focus-visible { animation: hb-focus-in var(--duration-state) var(--ease-out); }
@keyframes hb-focus-in { from { outline-offset: 5px; outline-color: transparent; } }
.hb-check:checked::after { animation: hb-check-in var(--duration-menu) var(--ease-spring); }
@keyframes hb-check-in { from { opacity: 0; transform: translateY(-1px) rotate(45deg) scale(.3); } }
.hb-radio:checked::after { animation: hb-dot-in var(--duration-menu) var(--ease-spring); }
@keyframes hb-dot-in { from { transform: scale(0); } }
.hb-switch::after { transition: transform var(--duration-menu) var(--ease-spring), width var(--duration-press) var(--ease-out), background-color var(--duration-state) ease; }
.hb-switch:active:not(:disabled)::after { width: 18px; }
.hb-switch:checked:active:not(:disabled)::after { transform: translateX(14px); }
[data-density="touch"] .hb-switch:active:not(:disabled)::after { width: 26px; }
[data-density="touch"] .hb-switch:checked:active:not(:disabled)::after { transform: translateX(18px); }
.hb-tab, .hb-chip-toggle, .hb-segmented > button, .hb-listing-item, .hb-list-row, .hb-nav a, .hb-pagination-pages > button { transition: background-color var(--duration-state) ease, color var(--duration-state) ease, border-color var(--duration-state) ease, box-shadow var(--duration-state) ease; }
.hb-menu, .hb-dialog { animation: hb-pop-in var(--duration-menu) var(--ease-spring); transform-origin: top center; }
.hb-dialog { animation-duration: var(--duration-drawer); transform-origin: center; }
@keyframes hb-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.hb-toast-enter { animation: hb-toast-in var(--duration-drawer) var(--ease-spring); }
/* Ligne ajoutée (tâche, commentaire, relevé) : un éclat métier qui s'éteint, pour retrouver d'un coup d'œil ce qui vient d'arriver. */
.hb-list-row--new, .hb-listing-item.is-new, .hb-table tr.is-new td { animation: hb-flash 1.6s var(--ease-out); }
@keyframes hb-flash { from { background-color: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); } }
/* Squelette : un balayage lumineux de gauche à droite plutôt qu'un clignotement. */
.hb-skeleton-pulse .hb-skeleton, .hb-skeleton.hb-skeleton-pulse { position: relative; overflow: hidden; animation: none; }
.hb-skeleton-pulse .hb-skeleton::after, .hb-skeleton.hb-skeleton-pulse::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-raised), transparent); opacity: .7; transform: translateX(-100%); animation: hb-sweep 1.4s var(--ease-move) infinite; }
@keyframes hb-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .hb-btn, .hb-switch::after, .hb-tab, .hb-chip-toggle, .hb-segmented > button, .hb-listing-item, .hb-list-row, .hb-nav a, .hb-pagination-pages > button { transition: none; }
  .hb-check:checked::after, .hb-radio:checked::after, .hb-btn:focus-visible, .hb-field:focus-visible, .hb-check:focus-visible, .hb-radio:focus-visible, .hb-switch:focus-visible, .hb-tab:focus-visible, .hb-chip:focus-visible, .hb-key:focus-visible, .hb-skeleton-pulse .hb-skeleton::after, .hb-skeleton.hb-skeleton-pulse::after { animation: none; }
  .hb-menu, .hb-dialog, .hb-toast-enter, .hb-list-row--new, .hb-listing-item.is-new, .hb-table tr.is-new td { animation: hb-fade-in var(--duration-state) ease; }
  .hb-switch:active:not(:disabled)::after { width: auto; }
}
@keyframes hb-fade-in { from { opacity: 0; } }

@media (max-width: 599.98px) {
  .hb-page { padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right)) var(--space-4) max(var(--space-4), env(safe-area-inset-left)); gap: var(--space-4); }
  .hb-head > :first-child { flex: 1 1 100%; min-width: 0; }
  .hb-head__actions { margin-left: 0; flex-wrap: wrap; max-width: 100%; }
  .hb-card-h { flex-wrap: wrap; padding: var(--space-3) var(--space-4); row-gap: var(--space-2); }
  .hb-card-h__actions { flex-wrap: wrap; max-width: 100%; }
  .hb-tiles { grid-template-columns: minmax(0, 1fr); }
  .hb-cell-sub { white-space: normal; }
  .hb-kv { grid-template-columns: 1fr; gap: 2px var(--space-4); }
  .hb-kv dd { margin-bottom: var(--space-2); }
  .hb-drawer-h { flex-wrap: wrap; }
  .hb-drawer-h h2, .hb-drawer-h .hb-drawer-h__title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
  .hb-alert { flex-wrap: wrap; }
  .hb-alert .hb-btn, .hb-alert .v-btn { margin-left: 0; }
  .hb-list-row { grid-template-columns: 20px 22px minmax(0, 1fr); }
  .hb-list-side { grid-column: 3; grid-template-columns: auto auto 1fr; justify-items: start; margin-top: var(--space-2); }
  .hb-list-actions, .hb-list-add, .hb-list-handle { opacity: 1; }
  .hb-filters .v-input { max-width: none !important; flex: 1 1 100%; }
  .hb-form { grid-template-columns: minmax(0, 1fr); }
  .hb-steps > li:not([aria-current="step"]) > span { display: none; }
  .hb-timeline > li { grid-template-columns: 44px 12px minmax(0, 1fr); }
  .hb-timeline > li::after { left: calc(44px + var(--space-3) + 5px); }
  .hb-footbar { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .hb-pagination-pages { margin-left: 0; }
  .hb-banner { padding: var(--space-2) var(--space-4); flex-wrap: wrap; }
}
@media (min-width: 600px) and (max-width: 959.98px) { .hb-page { padding: var(--space-5); } }
@media (prefers-reduced-motion: reduce) {
  .hb-btn, .hb-check, .hb-field, .hb-editable, .hb-list-row, .hb-switch, .hb-switch::after, .hb-progress > i, .hb-key, .hb-details > summary::before, .hb-tip::after, .hb-fab, .hb-tree summary::before { transition: none; }
  .hb-toast-enter, .hb-progress--busy > i { animation: none; }
  .hb-spinner { animation-duration: 1.6s; }
  .hb-btn:active, .hb-check:active, .hb-key:active, .hb-fab:active { transform: none; }
}