/**
 * OptiGest360° — Refonte de l'interface : COMPOSANTS
 * ===================================================
 * Transcription du kit de la maquette validée le 2026-09-10 (valeurs exactes :
 * hauteurs, marges, rayons, corps, graisses). Chaque bloc correspond à un
 * composant Blade <x-ui.*> de resources/views/components/ui/.
 *
 * Préfixe `ui-` : aucune règle legacy ne le vise. Les composants posés sur un
 * élément que le bundle stylise déjà (input, select, table…) sont préfixés
 * `html[data-refonte]` pour l'emporter sans !important.
 */

/* ═══ Base ═════════════════════════════════════════════════════════════════ */
.ui-icon { display: block; flex-shrink: 0; }
.ui-icon--spin { animation: ui-spin 0.8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-num { font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-font-mono); }
.ui-strong { font-weight: 600; }
.ui-text-1 { color: var(--ui-text-1); }
.ui-text-2 { color: var(--ui-text-2); }
.ui-text-3 { color: var(--ui-text-3); }
.ui-text-danger { color: var(--ui-danger-fg); }
.ui-sm { font-size: 12.5px; line-height: 16px; }
.ui-xs { font-size: 11.5px; line-height: 14px; }
.ui-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Masquage pour lecteurs d'écran. L'ANCRAGE (left/top) n'est pas décoratif :
   sans lui, la boîte reste à sa POSITION STATIQUE — au bout d'un tableau large,
   x ≈ 930 px — et comme aucun ancêtre n'est positionné, son bloc conteneur est
   le document : l'overflow-x du conteneur qui défile ne peut pas la rogner, et
   `clip` ne rogne que la PEINTURE, jamais la mise en page. Résultat mesuré au
   navigateur sur l'onglet Exercices à 390 px : document à 931 px, soit 541 px
   de débordement dû à un seul span invisible (2026-09-12). Ancrée à l'origine,
   la boîte n'élargit plus rien, où qu'elle soit émise (158 emplois, dont 28
   hors en-tête de tableau). */
.ui-sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ui-caption { font-size: 12.5px; line-height: 16px; color: var(--ui-text-3); }
.ui-eyebrow { font-size: 11.5px; line-height: 14px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-text-3); }

html[data-refonte] .ui-page-title {
    margin: 0; font-family: var(--ui-font-display); font-size: 25px; line-height: 32px;
    font-weight: 600; letter-spacing: -0.01em; color: var(--ui-text-1);
}
html[data-refonte] .ui-card__title {
    margin: 0; font-family: var(--ui-font-display); font-size: 15px; line-height: 20px;
    font-weight: 600; letter-spacing: normal; color: var(--ui-text-1);
}

/* ═══ Mise en page (évite les style="" dans les écrans — Gate E) ═══════════ */
.ui-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-stack--2 { gap: 2px; } .ui-stack--4 { gap: 4px; } .ui-stack--6 { gap: 6px; } .ui-stack--8 { gap: 8px; }
.ui-stack--10 { gap: 10px; } .ui-stack--12 { gap: 12px; } .ui-stack--14 { gap: 14px; } .ui-stack--18 { gap: 18px; }
.ui-stack--20 { gap: 20px; } .ui-stack--24 { gap: 24px; } .ui-stack--28 { gap: 28px; } .ui-stack--32 { gap: 32px; }
.ui-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-row--4 { gap: 4px; } .ui-row--6 { gap: 6px; } .ui-row--10 { gap: 10px; } .ui-row--12 { gap: 12px; } .ui-row--16 { gap: 16px; } .ui-row--24 { gap: 24px; }
.ui-row--between { justify-content: space-between; }
.ui-row--end { justify-content: flex-end; }
.ui-row--start { align-items: flex-start; }
.ui-row--baseline { align-items: baseline; }
.ui-row--wrap { flex-wrap: wrap; }
.ui-push { margin-left: auto; }
.ui-grow { flex: 1; min-width: 0; }
.ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-grid--gap-8 { gap: 8px; } .ui-grid--gap-12 { gap: 12px; } .ui-grid--gap-20 { gap: 20px; } .ui-grid--gap-24 { gap: 24px; }
.ui-grid--stretch { align-items: stretch; }
.ui-span-2 { grid-column: span 2; } .ui-span-3 { grid-column: span 3; } .ui-span-full { grid-column: 1 / -1; }
.ui-sep { height: 1px; margin: 0; border: 0; background: var(--ui-border); }
@media (max-width: 1200px) { .ui-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .ui-grid--4, .ui-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ui-grid, .ui-grid--3, .ui-grid--4, .ui-grid--5 { grid-template-columns: minmax(0, 1fr); } .ui-span-2, .ui-span-3 { grid-column: auto; } }

/* ═══ Bouton — valeurs de la console : 32/40/48, marges 10/12/16, texte 12/13/14,
       icônes 14/15/16, pilule ════════════════════════════════════════════ */
html[data-refonte] .ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; min-width: 0; padding: 0 12px; margin: 0; box-sizing: border-box;
    border-radius: 10px; border: 1px solid var(--ui-border);
    background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; font-weight: 500;
    letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap;
    vertical-align: middle; cursor: pointer; -webkit-user-select: none; user-select: none; box-shadow: none;
    -webkit-appearance: none; appearance: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
html[data-refonte] .ui-btn--sm { height: 32px; padding: 0 10px; font-size: 12px; }
html[data-refonte] .ui-btn--lg { height: 48px; padding: 0 16px; font-size: 14px; }
html[data-refonte] .ui-btn--icon { width: 40px; padding: 0; }
html[data-refonte] .ui-btn--icon.ui-btn--sm { width: 32px; }
html[data-refonte] .ui-btn--icon.ui-btn--lg { width: 48px; }
html[data-refonte] .ui-btn--block { display: flex; width: 100%; }

html[data-refonte] .ui-btn--primary { background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); color: var(--ui-on-accent); }
html[data-refonte] .ui-btn--secondary { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-1); }
html[data-refonte] .ui-btn--ghost { background: transparent; border-color: transparent; color: var(--ui-text-2); }
/* Destructif BORDÉ partout (DL/13) ; PLEIN seulement dans la fenêtre de confirmation. */
html[data-refonte] .ui-btn--danger { background: var(--ui-surface); border-color: var(--ui-danger-border); color: var(--ui-danger-fg); }
html[data-refonte] .ui-btn--danger-fill { background: var(--ui-danger-fill); border-color: var(--ui-danger-fill); color: var(--ui-blanc); }
html[data-refonte] .ui-btn--link { height: auto; padding: 0; gap: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ui-accent-fg); }

html[data-refonte] .ui-btn--primary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-accent-strong-hover); border-color: var(--ui-accent-strong-hover); color: var(--ui-on-accent); }
html[data-refonte] .ui-btn--secondary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .ui-btn--ghost:hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .ui-btn--danger:hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-danger-bg); color: var(--ui-danger-fg); }
html[data-refonte] .ui-btn--danger-fill:hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-danger-fill-hover); border-color: var(--ui-danger-fill-hover); color: var(--ui-blanc); }
html[data-refonte] .ui-btn--link:hover:not(:disabled, [aria-disabled="true"]) { text-decoration: underline; color: var(--ui-accent-fg); }

html[data-refonte] .ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] .ui-btn:disabled,
html[data-refonte] .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
html[data-refonte] .ui-btn.is-loading { cursor: progress; }

/* Bouton-icône discret (actions de ligne, fermeture) : 32 px, rond. */
html[data-refonte] .ui-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; padding: 0; margin: 0; box-sizing: border-box;
    border: 0; border-radius: 10px; background: transparent; color: var(--ui-text-3);
    text-decoration: none; cursor: pointer; box-shadow: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
html[data-refonte] .ui-icon-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .ui-icon-btn:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] .ui-icon-btn:disabled,
html[data-refonte] .ui-icon-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

html[data-refonte] .ui-link {
    display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500;
    color: var(--ui-accent-fg); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
html[data-refonte] .ui-link:hover { color: var(--ui-accent-fg); text-decoration: underline; }
html[data-refonte] .ui-back {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500;
    color: var(--ui-accent-fg); text-decoration: none;
}
html[data-refonte] .ui-back:hover { color: var(--ui-accent-fg); text-decoration: underline; }

/* ═══ Badge de statut — six tons, toujours avec son icône ═════════════════ */
.ui-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; box-sizing: border-box;
    border-radius: 6px; border: 1px solid var(--ui-neutral-border); background: var(--ui-neutral-bg); color: var(--ui-neutral-fg);
    font-family: var(--ui-font-sans); font-size: 11.5px; line-height: 14px; font-weight: 500; white-space: nowrap; vertical-align: middle;
}
.ui-badge--info     { border-color: var(--ui-info-border);     background: var(--ui-info-bg);     color: var(--ui-info-fg); }
.ui-badge--progress { border-color: var(--ui-progress-border); background: var(--ui-progress-bg); color: var(--ui-progress-fg); }
.ui-badge--success  { border-color: var(--ui-success-border);  background: var(--ui-success-bg);  color: var(--ui-success-fg); }
.ui-badge--warning  { border-color: var(--ui-warning-border);  background: var(--ui-warning-bg);  color: var(--ui-warning-fg); }
.ui-badge--danger   { border-color: var(--ui-danger-border);   background: var(--ui-danger-bg);   color: var(--ui-danger-fg); }
/* Catégorie en orange léger (« Avoir », « Facture récurrente ») : un badge, jamais un statut. */
.ui-badge--brand2   { border-color: var(--ui-brand2-border);   background: var(--ui-brand2-bg);   color: var(--ui-brand2-fg); }

/* Pastille de CONTEXTE (orange léger) : l'exercice, « Avoir ». Jamais un statut. */
.ui-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; box-sizing: border-box;
    border-radius: 999px; background: var(--ui-brand2-bg); border: 1px solid var(--ui-brand2-border); color: var(--ui-brand2-fg);
    font-family: var(--ui-font-sans); font-size: 11.5px; line-height: 14px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
/* Étiquette de catégorie NEUTRE (B2B, code journal…). */
.ui-tag {
    display: inline-flex; align-items: center; height: 20px; padding: 0 7px; box-sizing: border-box;
    border-radius: 6px; border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text-2);
    font-family: var(--ui-font-sans); font-size: 11.5px; line-height: 14px; font-weight: 500; white-space: nowrap; vertical-align: middle;
}
.ui-tag--mono { font-family: var(--ui-font-mono); font-size: 11px; }
.ui-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.ui-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
    width: 24px; height: 24px; border-radius: 50%; background: var(--ui-surface-2); color: var(--ui-text-2);
    font-family: var(--ui-font-sans); font-size: 10.5px; line-height: 1; font-weight: 600;
}
.ui-avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.ui-avatar--accent { background: var(--ui-accent-subtle); color: var(--ui-accent-fg); }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ Carte — flottante (console D-025) : rayon 20, ombre douce ═══════════ */
.ui-card {
    background: var(--ui-surface); color: var(--ui-text-1); border-radius: 12px; border: 1px solid var(--ui-border); box-shadow: none;
    padding: 20px; box-sizing: border-box; min-width: 0;
}
.ui-card--p24 { padding: 24px; }
.ui-card--flush { padding: 0; overflow: hidden; }
.ui-card--outlined { border: 1px solid var(--ui-border); box-shadow: none; }
.ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ═══ Mesures ════════════════════════════════════════════════════════════ */
.ui-kpi {
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; padding: 16px;
    box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--ui-text-1);
}
.ui-kpi__label { font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--ui-text-3); }
.ui-kpi__value { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-text-1); white-space: nowrap; font-family: var(--ui-font-sans); }
.ui-kpi--measure .ui-kpi__value { font-size: 20px; line-height: 26px; }
.ui-kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; }
.ui-kpi__count, .ui-kpi__sub { color: var(--ui-text-3); font-size: 12px; line-height: 16px; }
.ui-kpi--success { border-color: var(--ui-success-border); }
.ui-kpi--warning { border-color: var(--ui-warning-border); }
.ui-kpi--danger { border-color: var(--ui-danger-border); }
.ui-kpi--info { border-color: var(--ui-info-border); }
.ui-kpi--progress { border-color: var(--ui-accent-border); }

.ui-mini { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; padding: 12px 16px; box-sizing: border-box; min-width: 0; }
.ui-mini__label { font-size: 12.5px; line-height: 16px; color: var(--ui-text-3); }
.ui-mini__value { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ui-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-mini__sub { color: var(--ui-text-3); font-weight: 400; font-size: 12.5px; }

/* La couleur d'une variation suit le SENS métier, pas la direction. */
.ui-variation { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-text-2); white-space: nowrap; }
.ui-variation--success { color: var(--ui-success-fg); }
.ui-variation--warning { color: var(--ui-warning-fg); }
.ui-variation--danger { color: var(--ui-danger-fg); }
.ui-variation--info { color: var(--ui-info-fg); }
.ui-variation__suffix { color: var(--ui-text-3); font-weight: 400; }

/* Montant en vedette : le chiffre porte la hiérarchie, la devise s'efface. */
.ui-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-amount__currency { margin-left: 5px; font-size: 0.58em; font-weight: 500; letter-spacing: 0; color: var(--ui-text-3); }

/* ═══ Saisie ═════════════════════════════════════════════════════════════ */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html[data-refonte] .ui-field__label { margin: 0; font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--ui-text-2); }
/* Pas d'astérisque (DL/19 §3) : on marque la minorité, les champs optionnels. */
.ui-field__optional { color: var(--ui-text-3); font-weight: 400; }
.ui-field__hint { margin: 0; font-size: 11.5px; line-height: 14px; color: var(--ui-text-3); }
.ui-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-danger-fg); }
.ui-field__error .ui-icon { margin-top: 1px; }

/* Contrôle composé (icône + champ + queue) */
.ui-control {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; box-sizing: border-box; min-width: 0;
    border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ui-control > .ui-icon { color: var(--ui-text-3); }
.ui-control:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-subtle); }
.ui-control.is-invalid { border-color: var(--ui-danger-fg); }
.ui-control.is-readonly { background: var(--ui-surface-2); }
.ui-control.is-disabled { opacity: 0.5; }
.ui-control--xs { height: 28px; } .ui-control--sm { height: 32px; } .ui-control--cell { height: 34px; } .ui-control--lg { height: 40px; } .ui-control--xl { height: 44px; }
.ui-control > .ui-icon-btn { margin-right: -8px; width: 28px; height: 28px; }
html[data-refonte] .ui-control .ui-control__input {
    flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; border-radius: 0;
    background: transparent; color: inherit; font: inherit; box-shadow: none; -webkit-appearance: none; appearance: none;
}
html[data-refonte] .ui-control .ui-control__input::placeholder { color: var(--ui-text-3); opacity: 1; }
html[data-refonte] .ui-control select.ui-control__input { cursor: pointer; }
html[data-refonte] .ui-control .ui-control__input--num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-control__trail { display: flex; color: var(--ui-text-3); flex-shrink: 0; }

/* Champs natifs autonomes */
html[data-refonte] .ui-input,
html[data-refonte] .ui-select,
html[data-refonte] .ui-textarea {
    display: block; width: 100%; height: 36px; margin: 0; padding: 0 12px; box-sizing: border-box;
    border-radius: 12px; border: 1px solid var(--ui-border); background-color: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; box-shadow: none; outline: 0;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
html[data-refonte] .ui-select {
    -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
    background-image: var(--ui-glyph-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}
html[data-refonte] .ui-textarea { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; }
html[data-refonte] .ui-input::placeholder,
html[data-refonte] .ui-textarea::placeholder { color: var(--ui-text-3); opacity: 1; }
html[data-refonte] .ui-input:focus,
html[data-refonte] .ui-select:focus,
html[data-refonte] .ui-textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-subtle); outline: 0; }
html[data-refonte] .ui-input[readonly],
html[data-refonte] .ui-textarea[readonly] { background-color: var(--ui-surface-2); }
html[data-refonte] .ui-input:disabled,
html[data-refonte] .ui-select:disabled,
html[data-refonte] .ui-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
html[data-refonte] .ui-input.is-invalid, html[data-refonte] .ui-input[aria-invalid="true"],
html[data-refonte] .ui-select.is-invalid, html[data-refonte] .ui-select[aria-invalid="true"],
html[data-refonte] .ui-textarea.is-invalid, html[data-refonte] .ui-textarea[aria-invalid="true"] { border-color: var(--ui-danger-fg); }
html[data-refonte] .ui-input--num { text-align: right; font-variant-numeric: tabular-nums; }
html[data-refonte] .ui-input--xs, html[data-refonte] .ui-select--xs { height: 28px; }
html[data-refonte] .ui-input--sm, html[data-refonte] .ui-select--sm { height: 32px; }
html[data-refonte] .ui-input--cell, html[data-refonte] .ui-select--cell { height: 34px; }
html[data-refonte] .ui-input--lg, html[data-refonte] .ui-select--lg { height: 40px; }

/* Case, bouton radio, interrupteur — piste éteinte à 3:1 contre la carte */
html[data-refonte] .ui-check,
html[data-refonte] .ui-radio {
    -webkit-appearance: none; appearance: none; display: inline-block; flex-shrink: 0; vertical-align: middle;
    width: 16px; height: 16px; margin: 0; padding: 0; box-sizing: border-box; cursor: pointer;
    border: 1px solid var(--ui-track-off); background-color: var(--ui-surface);
    background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
html[data-refonte] .ui-check { border-radius: 4px; }
html[data-refonte] .ui-radio { border-radius: 50%; }
html[data-refonte] .ui-check:checked { background-color: var(--ui-accent-strong); border-color: var(--ui-accent-strong); background-image: var(--ui-glyph-check); }
html[data-refonte] .ui-check:indeterminate { background-color: var(--ui-accent-strong); border-color: var(--ui-accent-strong); background-image: var(--ui-glyph-minus); }
html[data-refonte] .ui-radio:checked { border-color: var(--ui-accent-strong); background-image: radial-gradient(circle at center, var(--ui-accent-strong) 0 4px, transparent 4.5px); background-size: 100% 100%; }
html[data-refonte] .ui-switch {
    -webkit-appearance: none; appearance: none; position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle;
    width: 36px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 999px; box-sizing: border-box;
    background: var(--ui-track-off); cursor: pointer; transition: background-color 0.15s ease;
}
html[data-refonte] .ui-switch::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--ui-blanc); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease;
}
html[data-refonte] .ui-switch:checked { background: var(--ui-accent-strong); }
html[data-refonte] .ui-switch:checked::before { transform: translateX(16px); }
html[data-refonte] .ui-check:focus-visible,
html[data-refonte] .ui-radio:focus-visible,
html[data-refonte] .ui-switch:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
html[data-refonte] .ui-check:disabled,
html[data-refonte] .ui-radio:disabled,
html[data-refonte] .ui-switch:disabled { opacity: 0.5; cursor: not-allowed; }

.ui-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ui-choice > input { margin-top: 1px; }
.ui-choice__text { font-size: 13px; line-height: 18px; color: var(--ui-text-1); }
.ui-choice__help { display: block; margin-top: 2px; font-size: 11.5px; line-height: 14px; color: var(--ui-text-3); }

/* Cartes de méthode (fenêtre d'encaissement) */
.ui-option {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; box-sizing: border-box; min-width: 0;
    border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-1);
    font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.ui-option > .ui-icon { color: var(--ui-text-3); }
.ui-option__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-option.is-selected,
input:checked + .ui-option { border-color: var(--ui-accent-border); background: var(--ui-accent-subtle); color: var(--ui-accent-fg); font-weight: 600; }
.ui-option.is-selected > .ui-icon,
input:checked + .ui-option > .ui-icon { color: var(--ui-accent-fg); }
input:focus-visible + .ui-option { box-shadow: var(--ui-focus-ring); }

/* ═══ Sélecteurs segmentés et onglets ═══════════════════════════════════ */
.ui-segmented { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ui-surface-2); border: 1px solid var(--ui-border); }
html[data-refonte] .ui-segmented__item {
    display: flex; align-items: center; height: 30px; padding: 0 14px; margin: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--ui-text-2); font-family: var(--ui-font-sans); font-size: 13px; font-weight: 500;
    white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none;
}
html[data-refonte] .ui-segmented__item.is-active,
html[data-refonte] .ui-segmented__item[aria-pressed="true"],
html[data-refonte] .ui-segmented__item[aria-current="true"] { background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-border); color: var(--ui-text-1); font-weight: 600; }

.ui-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--ui-surface-2); max-width: 100%; overflow-x: auto; box-sizing: border-box; }
html[data-refonte] .ui-tabs__tab {
    display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; margin: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--ui-text-3); font-family: var(--ui-font-sans); font-size: 13px; font-weight: 500;
    white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none;
}
html[data-refonte] .ui-tabs__tab:hover { color: var(--ui-text-1); }
html[data-refonte] .ui-tabs__tab.is-active,
html[data-refonte] .ui-tabs__tab[aria-selected="true"],
html[data-refonte] .ui-tabs__tab[aria-current="page"] { background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-border); font-weight: 600; color: var(--ui-text-1); }
html[data-refonte] .ui-tabs__tab:focus-visible,
html[data-refonte] .ui-segmented__item:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.ui-tabs__count { font-size: 11.5px; font-weight: 600; color: var(--ui-text-3); font-variant-numeric: tabular-nums; }

/* ═══ Retours : alertes, toasts, états vides, squelettes, progression ═════ */
.ui-alert {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; box-sizing: border-box;
    border-radius: 12px; background: var(--ui-info-bg); border: 1px solid var(--ui-info-border); color: var(--ui-info-fg);
}
.ui-alert--success { background: var(--ui-success-bg); border-color: var(--ui-success-border); color: var(--ui-success-fg); }
.ui-alert--warning { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning-fg); }
.ui-alert--danger  { background: var(--ui-danger-bg);  border-color: var(--ui-danger-border);  color: var(--ui-danger-fg); }
.ui-alert--neutral { background: var(--ui-neutral-bg); border-color: var(--ui-neutral-border); color: var(--ui-neutral-fg); }
.ui-alert__icon { margin-top: 1px; display: flex; }
.ui-alert__body { min-width: 0; flex: 1; }
.ui-alert__title { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ui-text-1); }
.ui-alert__text { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ui-text-2); }
.ui-alert__text:first-child { margin-top: 0; }
.ui-alert__action { margin-top: 10px; }
html[data-refonte] .ui-alert__close { margin-left: auto; display: flex; padding: 0; border: 0; background: none; color: var(--ui-text-3); cursor: pointer; }

.ui-toasts { position: fixed; left: 24px; bottom: 24px; z-index: 1100; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.ui-toast {
    pointer-events: auto; position: relative; display: flex; align-items: center; gap: 10px;
    width: 380px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 14px;
    border-radius: 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-overlay);
    color: var(--ui-info-fg); font-family: var(--ui-font-sans);
}
.ui-toast--success { color: var(--ui-success-fg); }
.ui-toast--warning { color: var(--ui-warning-fg); }
.ui-toast--danger { color: var(--ui-danger-fg); }
.ui-toast--loading { color: var(--ui-accent-fg); }
.ui-toast__text { flex: 1; font-size: 13px; line-height: 18px; color: var(--ui-text-1); }
html[data-refonte] .ui-toast__action { padding: 0; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ui-accent-fg); white-space: nowrap; cursor: pointer; }
html[data-refonte] .ui-toast__close { display: flex; padding: 0; border: 0; background: none; color: var(--ui-text-3); cursor: pointer; }
.ui-toast__timer { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--ui-border); overflow: hidden; }
.ui-toast__timer > span { display: block; height: 100%; border-radius: 2px; background: currentColor; transform-origin: left center; animation: ui-toast-timer var(--ui-toast-duree, 5s) linear forwards; }
@keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px; }
.ui-empty__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ui-surface-2); color: var(--ui-text-2); }
.ui-empty--danger .ui-empty__icon { background: var(--ui-danger-bg); color: var(--ui-danger-fg); }
.ui-empty--warning .ui-empty__icon { background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
.ui-empty--info .ui-empty__icon { background: var(--ui-info-bg); color: var(--ui-info-fg); }
.ui-empty--success .ui-empty__icon { background: var(--ui-success-bg); color: var(--ui-success-fg); }
html[data-refonte] .ui-empty__title { margin: 14px 0 0; font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ui-text-1); }
html[data-refonte] .ui-empty__text { margin: 4px 0 0; max-width: 340px; font-size: 13px; line-height: 19px; color: var(--ui-text-2); }
.ui-empty__action { margin-top: 16px; }

.ui-skeleton { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--ui-skeleton); animation: ui-pulse 1.4s ease-in-out infinite; }
@keyframes ui-pulse { 50% { opacity: 0.55; } }

.ui-progress { display: flex; flex-direction: column; gap: 6px; }
.ui-progress__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.ui-progress__label { color: var(--ui-text-1); font-weight: 500; }
.ui-progress__value { color: var(--ui-text-3); font-variant-numeric: tabular-nums; }
.ui-progress__track { height: 6px; border-radius: 999px; background: var(--ui-surface-2); overflow: hidden; }
.ui-progress__bar { height: 100%; border-radius: 999px; background: var(--ui-accent-strong); }

/* ═══ Données : historique, liste d'informations ════════════════════════ */
html[data-refonte] .ui-timeline { margin: 0; padding: 0; list-style: none; }
.ui-timeline__item { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.ui-timeline__item:last-child { padding-bottom: 0; }
.ui-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 3.5px; top: 14px; bottom: -4px; width: 1px; background: var(--ui-border); }
.ui-timeline__dot { margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-text-3); flex-shrink: 0; }
.ui-timeline__dot--info { background: var(--ui-info-fg); }
.ui-timeline__dot--progress { background: var(--ui-progress-fg); }
.ui-timeline__dot--success { background: var(--ui-success-fg); }
.ui-timeline__dot--warning { background: var(--ui-warning-fg); }
.ui-timeline__dot--danger { background: var(--ui-danger-fg); }
.ui-timeline__body { min-width: 0; }
.ui-timeline__title { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-text-1); }
.ui-timeline__meta { font-size: 12px; line-height: 16px; color: var(--ui-text-3); }

html[data-refonte] .ui-infos { margin: 0; padding: 0; }
.ui-infos__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--ui-border); font-size: 13px; line-height: 18px; }
.ui-infos__row:first-child { border-top: 0; }
html[data-refonte] .ui-infos__key { margin: 0; color: var(--ui-text-3); font-weight: 400; }
html[data-refonte] .ui-infos__value { margin: 0; min-width: 0; color: var(--ui-text-1); }

/* ═══ Menus et infobulles ════════════════════════════════════════════════ */
.ui-dropdown { position: relative; display: inline-flex; }
.ui-menu {
    position: absolute; z-index: 1050; top: calc(100% + 4px); right: 0; display: none;
    min-width: 224px; box-sizing: border-box; padding: 4px; border-radius: 12px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow);
    font-family: var(--ui-font-sans); text-align: left;
}
.ui-menu--start { right: auto; left: 0; }
.ui-menu--up { top: auto; bottom: calc(100% + 4px); }
.ui-menu.is-open { display: block; }
html[data-refonte] .ui-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; margin: 0; box-sizing: border-box;
    border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; text-align: left; text-decoration: none;
    white-space: nowrap; cursor: pointer; box-shadow: none;
}
html[data-refonte] .ui-menu__item > .ui-icon { color: var(--ui-text-3); }
html[data-refonte] .ui-menu__item:hover,
html[data-refonte] .ui-menu__item:focus-visible { background: var(--ui-surface-2); color: var(--ui-text-1); outline: none; }
html[data-refonte] .ui-menu__item--danger,
html[data-refonte] .ui-menu__item--danger:hover,
html[data-refonte] .ui-menu__item--danger > .ui-icon { color: var(--ui-danger-fg); }
html[data-refonte] .ui-menu__item.is-selected { font-weight: 600; }
html[data-refonte] .ui-menu__item:disabled,
html[data-refonte] .ui-menu__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; background: transparent; }
.ui-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-menu__check { margin-left: auto; color: var(--ui-accent-fg); }
.ui-menu__header { padding: 8px 10px 4px; font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-text-3); }
.ui-menu__sep { height: 1px; margin: 4px 6px; border: 0; background: var(--ui-border); }
.ui-menu form { margin: 0; }

/* Infobulle : surface bordée, 11,5 px, après 300 ms (console). */
.ui-tooltip {
    display: inline-block; padding: 6px 10px; border-radius: 6px; background: var(--ui-surface); border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow); color: var(--ui-text-1); font-size: 11.5px; line-height: 15px; white-space: nowrap;
}
[data-ui-tooltip] { position: relative; }
/* L'état MASQUÉ est de taille nulle — et ce n'est pas cosmétique.
   `visibility: hidden` ne retire PAS la boîte de la mise en page : une
   infobulle en `left: 50%`, `translateX(-50%)` et `white-space: nowrap`,
   portée par un bouton collé au bord droit (les ronds de la barre haute),
   déborde donc du document en PERMANENCE, sans qu'on la voie jamais. Mesuré le
   2026-09-12 : 15 px de défilement horizontal sur les Paramètres, prouvés par
   témoin (`display: none` sur ce pseudo-élément ramenait 500 px à 485). Un
   `::after` étant invisible à `querySelectorAll`, aucun balayage du DOM ne peut
   le trouver : d'où une chasse en impasse avant d'en arriver ici.
   Taille nulle au repos, taille réelle au survol : le fondu et le délai de
   300 ms sont conservés (les transitions ne portent que sur l'opacité et la
   visibilité, donc le changement de taille est instantané, sans saccade). */
[data-ui-tooltip]::after {
    content: attr(data-ui-tooltip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    width: 0; height: 0; padding: 0; border-width: 0; overflow: hidden;
    border-radius: 6px; border-style: solid; border-color: var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow);
    color: var(--ui-text-1); font: 400 11.5px/15px var(--ui-font-sans); letter-spacing: normal; text-transform: none; white-space: nowrap;
    pointer-events: none; opacity: 0; visibility: hidden; z-index: 1060;
    transition: opacity 0.12s ease 0s, visibility 0s linear 0.12s;
}
/* Le clavier garde l'infobulle EN TOUTES CIRCONSTANCES : cette règle reste
   hors du média ci-dessous. */
[data-ui-tooltip]:focus-visible::after {
    width: auto; height: auto; padding: 6px 10px; border-width: 1px; overflow: visible;
    max-width: min(320px, calc(100vw - 16px));
    opacity: 1; visibility: visible; transition-delay: 0.3s, 0.3s;
}
/* Le survol n'est ouvert qu'aux pointeurs FINS. Sur tactile, `:hover` reste
   COLLÉ après une tape et jusqu'à la tape suivante ailleurs : sans ce garde,
   une tape sur un bouton rond de la barre haute afficherait durablement une
   infobulle à côté d'une icône collée au bord droit — et ramènerait le
   débordement horizontal qu'on vient de supprimer, précisément sur l'appareil
   où il gêne le plus. Le débordement pendant l'affichage n'est acceptable que
   parce qu'un vrai survol prend fin. */
@media (hover: hover) and (pointer: fine) {
    [data-ui-tooltip]:hover::after {
        width: auto; height: auto; padding: 6px 10px; border-width: 1px; overflow: visible;
        max-width: min(320px, calc(100vw - 16px));
        opacity: 1; visibility: visible; transition-delay: 0.3s, 0.3s;
    }
}

/* ═══ Tableau de données — une seule table pour toute l'application ══════ */
.ui-table-wrap { width: 100%; overflow-x: auto; }
html[data-refonte] table.ui-table {
    width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: transparent;
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px; color: var(--ui-text-1);
}
html[data-refonte] .ui-table th {
    padding: 10px 6px; border: 0; border-bottom: 1px solid var(--ui-border); background: transparent;
    font-size: 11.5px; line-height: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ui-text-3); text-align: left; white-space: nowrap; vertical-align: middle;
}
html[data-refonte] .ui-table td {
    height: 44px; padding: 12px 6px; box-sizing: border-box; border: 0; border-top: 1px solid var(--ui-border);
    background: transparent; color: var(--ui-text-1); vertical-align: middle; text-align: left;
}
html[data-refonte] .ui-table tbody tr:first-child td { border-top: 0; }
html[data-refonte] .ui-table th:first-child,
html[data-refonte] .ui-table td:first-child { padding-left: 20px; }
html[data-refonte] .ui-table th:last-child,
html[data-refonte] .ui-table td:last-child { padding-right: 20px; }
html[data-refonte] .ui-table tbody tr:hover td { background: var(--ui-surface-2); }
html[data-refonte] .ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
html[data-refonte] .ui-table .is-num.is-strong { font-weight: 600; }
html[data-refonte] .ui-table .is-muted { color: var(--ui-text-3); }
html[data-refonte] .ui-table .is-secondary { color: var(--ui-text-2); }
html[data-refonte] .ui-table .is-struck { color: var(--ui-text-3); text-decoration: line-through; }
html[data-refonte] .ui-cell-link { color: var(--ui-text-1); text-decoration: none; }
html[data-refonte] .ui-cell-link:hover { color: var(--ui-accent-fg); text-decoration: underline; }
html[data-refonte] .ui-table .is-actions { text-align: right; white-space: nowrap; width: 1%; }
html[data-refonte] .ui-table .is-shrink { width: 1%; white-space: nowrap; }
.ui-table__actions { display: inline-flex; justify-content: flex-end; align-items: center; gap: 2px; }
.ui-table__action-spacer { display: inline-block; width: 32px; height: 32px; flex-shrink: 0; }
html[data-refonte] .ui-table__sort {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; margin: 0; border: 0; background: none;
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; cursor: pointer;
}
html[data-refonte] .ui-table th.is-num .ui-table__sort { justify-content: flex-end; }
html[data-refonte] .ui-table th.is-sorted,
html[data-refonte] .ui-table th.is-sorted .ui-table__sort { color: var(--ui-text-1); }
.ui-table__sort-off { display: flex; opacity: 0.35; }
html[data-refonte] .ui-table tfoot td {
    height: auto; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-2); font-weight: 600;
}
.ui-table__totals-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-text-2); }
html[data-refonte] .ui-doc-link { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-accent-fg); text-decoration: none; }
html[data-refonte] .ui-doc-link:hover { color: var(--ui-accent-fg); text-decoration: underline; }
.ui-cell-sub { font-size: 11.5px; line-height: 14px; font-weight: 500; color: var(--ui-text-3); }
.ui-cell-sub--danger { color: var(--ui-danger-fg); }
.ui-cell-code { font-family: var(--ui-font-mono); font-size: 12px; color: var(--ui-text-2); }
.ui-block-limit { display: block; max-width: 420px; }
html[data-refonte] .ui-table tr[hidden] { display: none; }
/* Lignes de détail (écriture dépliée) : fond surface-2, 12,5 px, encre secondaire. */
html[data-refonte] .ui-table .ui-subrow td { height: auto; padding-top: 7px; padding-bottom: 7px; background: var(--ui-surface-2); color: var(--ui-text-2); font-size: 12.5px; border-top: 0; }
html[data-refonte] .ui-table tbody tr:hover + .ui-subrow td,
html[data-refonte] .ui-table tbody .ui-subrow:hover td { background: var(--ui-surface-2); }
.ui-row-toggle .ui-icon { transition: transform 0.15s ease; }
.ui-row-toggle[aria-expanded="true"] .ui-icon { transform: rotate(90deg); }
/* Table compacte (fenêtres, aides) : lignes de 32 px. */
html[data-refonte] .ui-table--compact td { height: 32px; padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
html[data-refonte] .ui-table--compact th:first-child, html[data-refonte] .ui-table--compact td:first-child { padding-left: 14px; }
html[data-refonte] .ui-table--compact th:last-child, html[data-refonte] .ui-table--compact td:last-child { padding-right: 14px; }
html[data-refonte] .ui-input[type="file"] { height: auto; padding: 7px 12px; }
.ui-import-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 18px; color: var(--ui-text-2); max-height: 180px; overflow-y: auto; }

.ui-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ui-border); flex-wrap: wrap; }
.ui-table-count { font-size: 13px; color: var(--ui-text-2); }
.ui-table-count b { color: var(--ui-text-1); font-weight: 600; }
.ui-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--ui-border); font-size: 12px; color: var(--ui-text-3); flex-wrap: wrap; }
.ui-table-foot__range { font-variant-numeric: tabular-nums; }
.ui-table-foot__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ui-table-foot__perpage { display: flex; align-items: center; gap: 8px; }

/* Sur petit écran, chaque ligne devient une carte (planche « Tableaux »). */
@media (max-width: 640px) {
    html[data-refonte] .ui-table--stack thead { display: none; }
    html[data-refonte] .ui-table--stack,
    html[data-refonte] .ui-table--stack tbody { display: block; }
    html[data-refonte] .ui-table--stack tbody { padding: 12px; }
    html[data-refonte] .ui-table--stack tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px; margin-bottom: 10px;
        border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface);
    }
    html[data-refonte] .ui-table--stack td,
    html[data-refonte] .ui-table--stack td:first-child,
    html[data-refonte] .ui-table--stack td:last-child { display: block; height: auto; padding: 0; border: 0; background: transparent; }
    html[data-refonte] .ui-table--stack tbody tr:hover td { background: transparent; }
    html[data-refonte] .ui-table--stack td[data-mobile="hide"] { display: none; }
    html[data-refonte] .ui-table--stack td[data-mobile="full"] { flex-basis: 100%; }
    html[data-refonte] .ui-table--stack td[data-mobile="end"] { margin-left: auto; }
}

/* ═══ Filtres, pagination, fil d'Ariane ═════════════════════════════════ */
.ui-filterbar { display: flex; flex-direction: column; gap: 12px; }
.ui-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-refonte] .ui-filterbar__clear { margin-left: 4px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--ui-accent-fg); text-decoration: none; cursor: pointer; }
.ui-filterbar__count { margin-left: auto; font-size: 13px; color: var(--ui-text-2); }
.ui-filterbar__form { display: contents; }
/* La recherche prend la place qui reste (340 px dans la maquette) et cède la
   première quand la rangée compte plus de quatre filtres. */
.ui-filterbar__search { flex: 1 1 240px; min-width: 200px; max-width: 340px; }
html[data-refonte] .ui-filterbar .ui-select { width: auto; min-width: 150px; max-width: 220px; }
.ui-filterbar__field { flex: 0 0 auto; min-width: 150px; }
.ui-filterbar__count b { color: var(--ui-text-1); font-weight: 600; }
.ui-filter-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 6px;
    border: 1px solid var(--ui-border); background: var(--ui-surface-2); font-size: 12px; line-height: 18px; color: var(--ui-text-1);
}
.ui-filter-chip__label { color: var(--ui-text-3); }
html[data-refonte] .ui-filter-chip__remove { display: flex; padding: 2px; border-radius: 4px; color: var(--ui-text-3); text-decoration: none; background: none; border: 0; cursor: pointer; }
html[data-refonte] .ui-filter-chip__remove:hover { color: var(--ui-text-1); }

.ui-pagination { display: flex; align-items: center; gap: 4px; }
html[data-refonte] .ui-pagination__page {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; box-sizing: border-box;
    border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-2); font-size: 13px; font-weight: 500;
    font-variant-numeric: tabular-nums; text-decoration: none;
}
html[data-refonte] a.ui-pagination__page:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .ui-pagination__page.is-active { background: var(--ui-accent-strong); color: var(--ui-on-accent); font-weight: 600; }
.ui-pagination__gap { color: var(--ui-text-3); padding: 0 4px; }

html[data-refonte] .ui-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
html[data-refonte] .ui-breadcrumb__item { color: var(--ui-text-3); font-weight: 400; text-decoration: none; white-space: nowrap; }
html[data-refonte] a.ui-breadcrumb__item:hover { color: var(--ui-text-1); }
html[data-refonte] .ui-breadcrumb__item.is-current { color: var(--ui-text-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-breadcrumb__sep { display: flex; color: var(--ui-text-disabled); }

/* ═══ En-têtes de page ═══════════════════════════════════════════════════ */
.ui-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Le bloc titre cède sa largeur (métadonnées qui passent à la ligne) plutôt que
   de rejeter les actions sous le titre : elles restent à droite, alignées en bas. */
.ui-page-header__main { flex: 1 1 320px; min-width: 0; }
.ui-page-header__eyebrow { margin-bottom: 8px; }
.ui-page-header__subtitle { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ui-text-2); }
.ui-page-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ui-page-header__back { margin-bottom: 8px; }
.ui-page-header__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-page-header__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ui-text-3); flex-wrap: wrap; }
.ui-page-header__sep { color: var(--ui-text-disabled); }

/* ═══ Superpositions : fenêtre, confirmation, tiroir ═════════════════════ */
.ui-modal {
    position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center;
    padding: 32px; box-sizing: border-box; background: var(--ui-scrim); overflow-y: auto;
}
.ui-modal.is-active { display: flex; }
.ui-modal__panel {
    width: 560px; max-width: 100%; max-height: calc(100vh - 64px); margin: auto; box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 16px; background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-overlay);
    color: var(--ui-text-1); font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px;
}
.ui-modal--sm .ui-modal__panel { width: 400px; }
.ui-modal--lg .ui-modal__panel { width: 800px; }
.ui-modal--form .ui-modal__panel { width: 640px; }
.ui-modal--confirm .ui-modal__panel { width: 460px; }
.ui-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--ui-border); }
html[data-refonte] .ui-modal__title { margin: 0; font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ui-text-1); }
.ui-modal__subtitle { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ui-text-3); }
html[data-refonte] .ui-modal__close {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; padding: 0; margin: 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--ui-text-3); cursor: pointer;
}
html[data-refonte] .ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
.ui-modal__body { padding: 18px; overflow-y: auto; }
.ui-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--ui-border); flex-wrap: wrap; }

.ui-confirm__body { display: flex; gap: 14px; padding: 20px 20px 16px; }
.ui-confirm__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--ui-danger-bg); color: var(--ui-danger-fg); }
.ui-confirm--warning .ui-confirm__icon { background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
.ui-confirm--info .ui-confirm__icon { background: var(--ui-info-bg); color: var(--ui-info-fg); }
.ui-confirm--success .ui-confirm__icon { background: var(--ui-success-bg); color: var(--ui-success-fg); }
.ui-confirm__main { min-width: 0; flex: 1; }
html[data-refonte] .ui-confirm__title { margin: 0; font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ui-text-1); }
.ui-confirm__text { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--ui-text-2); }
.ui-confirm__extra { margin-top: 14px; }
.ui-confirm__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ui-border); flex-wrap: wrap; }

.ui-drawer { position: fixed; inset: 0; z-index: 1080; display: none; justify-content: flex-end; background: var(--ui-scrim); }
.ui-drawer.is-active { display: flex; }
.ui-drawer__panel {
    width: 480px; max-width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
    background: var(--ui-surface); border-left: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-overlay);
    border-radius: 16px 0 0 16px; color: var(--ui-text-1); font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px;
}
.ui-drawer--wide .ui-drawer__panel { width: 640px; }
.ui-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-border); }
html[data-refonte] .ui-drawer__title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--ui-font-display); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ui-text-1); }
html[data-refonte] .ui-drawer__close {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-3); cursor: pointer;
}
html[data-refonte] .ui-drawer__close:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
.ui-drawer__body { flex: 1; padding: 18px; overflow-y: auto; }
.ui-drawer__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--ui-border); flex-wrap: wrap; }
@media (max-width: 640px) {
    .ui-modal { padding: 0; align-items: flex-end; }
    .ui-modal__panel { width: 100% !important; max-height: 92vh; border-radius: 16px 16px 0 0; margin: 0; }
    .ui-drawer { align-items: flex-end; }
    .ui-drawer__panel, .ui-drawer--wide .ui-drawer__panel { width: 100%; height: auto; max-height: 92vh; border-radius: 16px 16px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
}
html.ui-scroll-locked, html.ui-scroll-locked body { overflow: hidden; }

/* ═══ Tableau de bord ════════════════════════════════════════════════════ */
/* Rappel du périmètre (exercice en pastille orange, dates et comparaison). */
.ui-period { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--ui-text-2); }
.ui-dot--info { color: var(--ui-info-fg); } .ui-dot--success { color: var(--ui-success-fg); }
.ui-dot--warning { color: var(--ui-warning-fg); } .ui-dot--danger { color: var(--ui-danger-fg); }
.ui-dot--progress { color: var(--ui-progress-fg); } .ui-dot--neutral { color: var(--ui-text-3); }
/* « À traiter » : pastille de gravité, volume, libellé, montant, action. */
.ui-todo__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ui-border); }
.ui-todo__row:first-child { border-top: 0; }
.ui-todo__label { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ui-text-2); }
.ui-todo__count { font-weight: 600; color: var(--ui-text-1); font-variant-numeric: tabular-nums; }
.ui-todo__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-todo__amount { font-size: 13px; font-weight: 500; color: var(--ui-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Liste compacte (documents récents) */
.ui-list__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ui-border); }
.ui-list__row:first-child { border-top: 0; }
.ui-list__main { min-width: 0; }
.ui-list__title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-1); font-variant-numeric: tabular-nums; }
.ui-list__sub { font-size: 12px; line-height: 16px; color: var(--ui-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-list__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
/* Tableau posé DANS une carte à marges : pas de marge latérale, pas de survol. */
html[data-refonte] .ui-table--inset th:first-child,
html[data-refonte] .ui-table--inset td:first-child { padding-left: 0; }
html[data-refonte] .ui-table--inset th:last-child,
html[data-refonte] .ui-table--inset td:last-child { padding-right: 0; }
html[data-refonte] .ui-table--inset td { height: auto; padding-top: 11px; padding-bottom: 11px; }
html[data-refonte] .ui-table--inset tbody tr:hover td { background: transparent; }

/* ═══ Fiche de document ══════════════════════════════════════════════════ */
.ui-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .ui-detail-grid { grid-template-columns: minmax(0, 1fr); } }
/* Tableau qui déborde jusqu'aux bords d'une carte à marges (paiements d'une fiche). */
.ui-card__bleed { margin: 0 -20px -20px; }
.ui-card__bleed .ui-table-wrap { border-top: 1px solid var(--ui-border); }

/* Aperçu PAPIER : reste blanc dans les deux thèmes — c'est le document tel qu'il
   sera imprimé (maquette : PAPIER, encres fixes). */
.ui-paper { background: var(--ui-blanc); color: var(--ui-paper-ink); border: 1px solid var(--ui-border); border-radius: 12px; padding: 36px 40px; font-family: var(--ui-font-sans); font-size: 12.5px; line-height: 18px; }
.ui-paper__head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ui-paper__brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ui-paper__tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--ui-paper-tint); border: 1px solid var(--ui-paper-line); font-family: var(--ui-font-display); font-size: 15px; font-weight: 600; color: var(--ui-paper-ink); }
.ui-paper__company { font-size: 15px; line-height: 20px; font-weight: 600; }
.ui-paper__muted { font-size: 11.5px; line-height: 16px; color: var(--ui-paper-muted); }
.ui-paper__title { text-align: right; }
.ui-paper__title-text { font-family: var(--ui-font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: 0.02em; }
.ui-paper__parties { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.ui-paper__party { padding: 14px 16px; border-radius: 10px; background: var(--ui-paper-tint); min-width: 280px; }
.ui-paper__label { font-size: 11px; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-paper-muted); }
.ui-paper__party-name { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 600; }
.ui-paper__dates { font-size: 12.5px; line-height: 20px; color: var(--ui-paper-muted); text-align: right; }
.ui-paper__dates b { color: var(--ui-paper-ink); }
.ui-paper__projects { margin-top: 20px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--ui-paper-line); }
html[data-refonte] .ui-paper a { color: var(--ui-paper-link); text-decoration: none; }
html[data-refonte] .ui-paper a:hover { text-decoration: underline; }
html[data-refonte] .ui-paper table { width: 100%; margin-top: 24px; border-collapse: collapse; background: transparent; font-size: 12.5px; }
html[data-refonte] .ui-paper th { padding: 8px 0 8px 10px; border: 0; border-bottom: 1px solid var(--ui-paper-ink); background: transparent; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-paper-muted); text-align: left; }
html[data-refonte] .ui-paper td { padding: 10px 0 10px 10px; border: 0; border-bottom: 1px solid var(--ui-paper-line); background: transparent; color: var(--ui-paper-ink); vertical-align: top; }
html[data-refonte] .ui-paper th:first-child, html[data-refonte] .ui-paper td:first-child { padding-left: 0; }
html[data-refonte] .ui-paper .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-paper__item-name { font-weight: 600; }
.ui-paper__item-sub { font-size: 11.5px; color: var(--ui-paper-muted); }
.ui-paper__totals { display: flex; justify-content: flex-end; margin-top: 18px; }
.ui-paper__totals-box { width: 300px; max-width: 100%; }
.ui-paper__total { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; color: var(--ui-paper-muted); }
.ui-paper__total span:last-child { color: var(--ui-paper-ink); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-paper__total.is-grand { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ui-paper-ink); color: var(--ui-paper-ink); font-weight: 700; }
.ui-paper__total.is-grand span:last-child { font-weight: 700; }
.ui-paper__total.is-strong span:last-child { font-weight: 700; }
.ui-paper__notes { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; }
.ui-paper__footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--ui-paper-line); text-align: center; font-size: 10.5px; color: var(--ui-paper-muted); }

/* Champ d'affichage seul d'un formulaire (valeur rappelée, non envoyée). */
html[data-refonte] .ui-input.ui-input--display:disabled { opacity: 1; cursor: default; background-color: var(--ui-surface-2); color: var(--ui-text-1); }
/* Méthodes de paiement : cartes de 40 px, quatre par rangée. */
.ui-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ui-methods > label { display: block; min-width: 0; cursor: pointer; }
@media (max-width: 640px) { .ui-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-subhead { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-text-2); }

/* ═══ Patterns métier ════════════════════════════════════════════════════ */
/* Bandeau de synthèse (fenêtre d'encaissement) */
.ui-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ui-surface-2); }
.ui-summary__label { font-size: 11.5px; line-height: 14px; color: var(--ui-text-3); }
.ui-summary__value { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Bloc de totaux : une remise se lit en négatif, jamais en rouge. */
.ui-totals { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ui-totals__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; }
.ui-totals__label { color: var(--ui-text-2); }
.ui-totals__value { color: var(--ui-text-1); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-totals__row.is-strong .ui-totals__value { font-weight: 600; }
.ui-totals__net { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--ui-accent-subtle); border: 1px solid var(--ui-accent-border); }
.ui-totals__net-label { font-size: 12.5px; font-weight: 500; color: var(--ui-accent-fg); }
.ui-totals__net-value { font-family: var(--ui-font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-text-1); }

/* Éditeur de lignes : un tableau compact, les champs rares se déplient. */
.ui-lines { --ui-lines-cols: minmax(0, 1fr) 52px 84px 84px 56px 80px 104px 20px; }
.ui-lines--journal { --ui-lines-cols: 120px minmax(0, 1fr) 150px 150px 20px; }
.ui-lines__head { display: grid; grid-template-columns: var(--ui-lines-cols); gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ui-border); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-text-3); }
.ui-lines__row { display: grid; grid-template-columns: var(--ui-lines-cols); gap: 8px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
.ui-lines--journal .ui-lines__row { align-items: center; padding: 10px 0; }
.ui-lines__cell--num { text-align: right; }
.ui-lines__total { height: 34px; display: flex; align-items: center; justify-content: flex-end; font-size: 13px; font-weight: 600; color: var(--ui-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-lines__total.is-empty { font-weight: 400; color: var(--ui-text-3); }
html[data-refonte] .ui-lines__remove { height: 34px; display: flex; align-items: center; padding: 0; border: 0; background: none; color: var(--ui-text-3); cursor: pointer; }
html[data-refonte] .ui-lines__remove:hover { color: var(--ui-danger-fg); }
.ui-lines__detail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: 10px; background: var(--ui-surface-2); }
html[data-refonte] .ui-lines__toggle { padding: 0; border: 0; background: none; font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--ui-accent-fg); cursor: pointer; }
.ui-lines__totals { display: grid; grid-template-columns: var(--ui-lines-cols); gap: 8px; align-items: center; padding: 12px 0; }
.ui-lines__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--ui-border); flex-wrap: wrap; }
.ui-lines__reason { max-width: 320px; font-size: 12px; color: var(--ui-text-3); text-align: right; }

/* Étapes (bien démarrer, parcours de clôture) */
.ui-step { display: block; flex-shrink: 0; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ui-track-off); }
.ui-step--current { border-color: var(--ui-accent); }
.ui-step--done { display: flex; align-items: center; justify-content: center; border: 0; background: var(--ui-accent-strong); color: var(--ui-on-accent); }

/* ═══ Composants historiques refondus (views-refonte/components) ═════════ */
/* Mesure d'un écran historique (<x-stat-card>) : stat-fit.js réduit un montant
   trop long en posant --ds-stat-value-size, plutôt que de le couper. */
.ui-kpi__value[data-stat-value] { font-size: var(--ds-stat-value-size, 22px); }

/* Liste de configuration d'un module (<x-module-setup-checklist>) : l'en-tête replie la carte. */
html[data-refonte] .ui-card__toggle { width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
html[data-refonte] .ui-card__toggle:focus-visible { outline: none; border-radius: 8px; box-shadow: var(--ui-focus-ring); }
.ui-todo__title { font-weight: 600; }
.ui-done { color: var(--ui-success-fg); }

/* Titre de section d'un formulaire (champs personnalisés). */
html[data-refonte] .ui-form-section__title { margin: 0; font-family: var(--ui-font-display); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text-1); }
.ui-grid__full { grid-column: 1 / -1; }
html[data-refonte] .ui-select.ui-select--multiple { height: auto; padding: 6px 8px; background-image: none; }

/* Messages de session en alertes (<x-flash-messages>). */
.ui-flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.rf-content > .ui-flashes { margin-bottom: 0; }
.ui-alert__list { margin: 4px 0 0; padding-left: 18px; }

/* WhatsApp : bouton secondaire ; le glyphe seul garde la couleur de la marque
   (#128C7E sur fond clair : contraste 4,1:1 ; #25D366 sur fond sombre). */
html[data-refonte] .ui-whatsapp .fa-whatsapp { font-size: 15px; line-height: 1; color: var(--ui-whatsapp); }
html[data-refonte][data-theme="dark"] .ui-whatsapp .fa-whatsapp { color: var(--ui-whatsapp-sombre); }
html[data-refonte] .ui-whatsapp.is-disabled { opacity: 0.5; pointer-events: none; }

/* Liste à recherche (<x-searchable-select>) : l'emporte sur components/searchable-select.css. */
html[data-refonte] .searchable-select__input { padding-right: 34px !important; cursor: pointer; }
html[data-refonte] .searchable-select__chevron { right: 10px; display: flex; color: var(--ui-text-3); }
html[data-refonte] .searchable-select__dropdown {
    top: calc(100% + 4px); z-index: 1050; max-height: 240px; margin: 0; padding: 4px; box-sizing: border-box;
    border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow);
    font-family: var(--ui-font-sans); animation: none;
}
html[data-refonte] .searchable-select__option { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 18px; color: var(--ui-text-1); }
html[data-refonte] .searchable-select__option:hover,
html[data-refonte] .searchable-select__option.is-active { background: var(--ui-surface-2); }
html[data-refonte] .searchable-select__option.is-selected { background: var(--ui-accent-subtle); color: var(--ui-accent-fg); font-weight: 600; }

/* Commentaires internes (<x-comment-section>). Épinglé : orange léger. */
.ui-comments { max-height: 400px; overflow-y: auto; }
.ui-comments__state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 0; font-size: 13px; line-height: 18px; color: var(--ui-text-3); }
.ui-comment { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ui-border); }
.ui-comment:first-child { border-top: 0; padding-top: 0; }
.ui-comment.is-pinned { margin-bottom: 4px; padding: 12px; border-top: 0; border-radius: 12px; background: var(--ui-brand2-bg); }
.ui-comment.is-pinned + .ui-comment { border-top: 0; }
.ui-comment__main { flex: 1; min-width: 0; }
.ui-comment__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-comment__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-comment__pin { display: inline-flex; color: var(--ui-brand2-fg); }
.ui-comment__author { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-1); }
.ui-comment__time { font-size: 12px; line-height: 16px; color: var(--ui-text-3); white-space: nowrap; }
.ui-comment__actions { display: flex; gap: 2px; flex-shrink: 0; }
html[data-refonte] .ui-comment__action { width: 28px; height: 28px; }
html[data-refonte] .ui-comment__action--danger:hover:not(:disabled) { color: var(--ui-danger-fg); }
.ui-comment__text { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--ui-text-1); overflow-wrap: anywhere; }
.ui-comment__mention { color: var(--ui-accent-fg); font-weight: 500; }
.ui-comments__compose { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ui-border); }
.ui-comments__field { position: relative; }
html[data-refonte] .ui-comments__field .ui-textarea { width: 100%; }
.ui-comments__mentions {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 10; max-height: 200px; overflow-y: auto;
    padding: 10px 12px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--ui-border);
    background: var(--ui-surface); box-shadow: var(--ui-shadow); font-size: 12.5px; line-height: 16px; color: var(--ui-text-3); text-align: center;
}

/* Historique d'un document (<x-document-timeline>) : pastille de ton, entrée cliquable. */
.ui-history { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-history__item { position: relative; display: flex; gap: 10px; }
.ui-history__item > .ui-timeline__dot { margin-top: 11px; }
.ui-history__item:not(:last-child)::before { content: ""; position: absolute; left: 3.5px; top: 23px; bottom: -7px; width: 1px; background: var(--ui-border); }
html[data-refonte] .ui-history__entry {
    flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin: 0; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit;
    font-family: inherit; text-align: left; cursor: pointer;
}
html[data-refonte] .ui-history__entry:hover { background: var(--ui-surface-2); }
html[data-refonte] .ui-history__entry:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.ui-history__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-history__title { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-text-1); }
.ui-history__meta { font-size: 12px; line-height: 16px; color: var(--ui-text-3); }
.ui-history__kind { flex-shrink: 0; font-size: 11.5px; line-height: 18px; font-weight: 500; color: var(--ui-text-3); }
.ui-history-detail { display: flex; flex-direction: column; gap: 14px; }
.ui-history-detail__title { display: inline-flex; align-items: center; gap: 8px; }
.ui-history-detail__summary { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text-1); }
.ui-history-detail__meta { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ui-text-3); }
.ui-history-detail__extra { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 18px; color: var(--ui-text-2); }
.ui-history-detail__hash { font-family: var(--ui-font-mono); font-size: 11px; word-break: break-all; }
/* Tracé d'encre sombre sur fond transparent : fond blanc dans les deux thèmes. */
.ui-history-detail__signature { padding: 10px; border: 1px dashed var(--ui-border); border-radius: 8px; background: var(--ui-blanc); text-align: center; }
.ui-history-detail__signature img { max-width: 100%; max-height: 120px; }
.ui-history-detail__warning { color: var(--ui-warning-fg); }
.ui-history-detail__reason { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ui-danger-border); background: var(--ui-danger-bg); }
.ui-history-detail__reason-text { margin-top: 4px; white-space: pre-wrap; font-size: 13px; line-height: 19px; color: var(--ui-text-1); }
.ui-diff { display: flex; flex-direction: column; gap: 6px; }
.ui-diff__table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 18px; }
html[data-refonte] .ui-diff__table th { width: 1%; padding: 6px 12px 6px 0; border-top: 1px solid var(--ui-border); text-align: left; vertical-align: top; white-space: nowrap; font-weight: 500; color: var(--ui-text-2); }
html[data-refonte] .ui-diff__table td { padding: 6px 0; border-top: 1px solid var(--ui-border); color: var(--ui-text-1); overflow-wrap: anywhere; }
.ui-diff__old { padding: 1px 6px; border-radius: 4px; background: var(--ui-danger-bg); color: var(--ui-danger-fg); text-decoration: line-through; }
.ui-diff__new { padding: 1px 6px; border-radius: 4px; background: var(--ui-success-bg); color: var(--ui-success-fg); font-weight: 600; }
.ui-diff__arrow { margin: 0 6px; color: var(--ui-text-3); }

/* ═══ Widget tiers : Choices.js ══════════════════════════════════════════ */
/* Listes de projets de la facture (création, modification). Les anciennes feuilles
   habillaient ce widget (design-system.css, section CHOICES.JS) ; la refonte ne les
   charge pas, et choices.min.css seul dessine une boîte grise en content-box dont
   l'overflow:hidden du conteneur rogne le bord droit. Forme de .ui-input ; classes
   posées par Choices.js, pas par la vue. Survit au retrait des anciennes feuilles :
   le widget, lui, reste. */
html[data-refonte] .choices { margin-bottom: 0; overflow: visible; }
html[data-refonte] .choices select.choices__input { display: none !important; }
html[data-refonte] .choices__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    width: 100%; min-height: 36px; padding: 3px 8px; box-sizing: border-box; overflow: hidden;
    border-radius: 12px; border: 1px solid var(--ui-border); background-color: var(--ui-surface); color: var(--ui-text-1);
    font-family: var(--ui-font-sans); font-size: 13px; line-height: 18px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
html[data-refonte] :is(.choices.is-focused, .choices.is-open) .choices__inner { border-radius: 12px; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-subtle); }
html[data-refonte] .choices.is-disabled .choices__inner { background-color: var(--ui-surface-2); color: var(--ui-text-disabled); cursor: not-allowed; }
html[data-refonte] .choices__list--multiple { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
html[data-refonte] .choices__list--multiple .choices__item {
    display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 2px 4px 2px 9px;
    border-radius: 999px; border: 1px solid var(--ui-accent-border); background: var(--ui-accent-subtle); color: var(--ui-accent-fg);
    font-size: 12px; font-weight: 500; line-height: 16px; word-break: normal;
}
html[data-refonte] .choices__list--multiple .choices__item.is-highlighted { border-color: var(--ui-accent); background: var(--ui-accent-subtle); }
/* Croix de retrait en masque : elle prend la couleur de la pastille (le glyphe blanc
   de choices.min.css disparaîtrait sur un fond clair). */
html[data-refonte] .choices[data-type*="select-multiple"] .choices__button {
    width: 14px; height: 14px; margin: 0 0 0 2px; padding: 0; border: 0; border-radius: 50%;
    background: currentColor; opacity: 0.7; text-indent: -9999px; overflow: hidden;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 4l6 6M10 4l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 4l6 6M10 4l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
html[data-refonte] .choices[data-type*="select-multiple"] .choices__button:is(:hover, :focus-visible) { opacity: 1; }
html[data-refonte] .choices__input--cloned {
    flex: 1; min-width: 10rem; height: auto; margin: 0; padding: 4px 2px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    color: var(--ui-text-1); font-family: var(--ui-font-sans); font-size: 13px;
}
html[data-refonte] .choices__input--cloned::placeholder { color: var(--ui-text-3); opacity: 1; }
html[data-refonte] .choices__input--cloned:focus { outline: 0; }
/* Liste déroulante : même mécanique que les anciennes feuilles (cachée, .is-open l'ouvre). */
html[data-refonte] .choices > .choices__list--dropdown { display: none; }
html[data-refonte] .choices.is-open > .choices__list--dropdown {
    display: block; visibility: visible; z-index: 50; margin-top: 4px; overflow: hidden;
    border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow-overlay);
}
html[data-refonte] .choices__list--dropdown .choices__list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
html[data-refonte] .choices__list--dropdown .choices__item {
    margin: 0; padding: 8px 12px; border: 0; border-radius: 0; background: transparent;
    color: var(--ui-text-1); font-size: 13px; cursor: pointer;
}
@media (min-width: 640px) {
    /* Place de l'aide « Sélectionner » (itemSelectText), posée à droite par choices.min.css. */
    html[data-refonte] .choices__list--dropdown .choices__item--selectable { padding-right: 100px; }
}
html[data-refonte] .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--ui-surface-2); color: var(--ui-text-1); }
html[data-refonte] .choices__list--dropdown .choices__item--disabled { color: var(--ui-text-3); cursor: not-allowed; }
/* « Créer un nouveau projet » en pied de liste (posé par le script de la page). */
html[data-refonte] .choices__list--dropdown .choices-create-action {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    border-top: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-accent-fg);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
html[data-refonte] .choices__list--dropdown .choices-create-action:hover { background: var(--ui-accent-subtle); }

@media (prefers-reduced-motion: reduce) {
    .ui-skeleton { animation: none; }
    .ui-icon--spin { animation-duration: 2.4s; }
    .ui-toast__timer > span { animation: none; }
}