/* ============================================================================
 * kanban.css — Composants spécifiques à la page Kanban (Lot 8 polish).
 *
 * Remplace les classes Tailwind utilisées dans kanban.html + _modale_creer_dossier.html
 * + kanban.js par des composants sémantiques. Tokens et patterns alignés
 * sur style.css (oklch, --rule, --surface, --ink, etc.).
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * Utilitaire .hidden — réplique la classe Tailwind pour rester compatible
 * avec kanban.js qui utilise classList.add/remove("hidden") un peu partout.
 * -------------------------------------------------------------------------- */
.hidden { display: none !important; }

/* --------------------------------------------------------------------------
 * Layout général
 * -------------------------------------------------------------------------- */
.kanban-app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
 * Bandeau lecture seule (mode verrou multi-poste)
 * -------------------------------------------------------------------------- */
.kanban-banner-readonly {
    background: var(--chaud-bg);
    border-bottom: 1px solid oklch(86% 0.07 45);
    color: oklch(35% 0.18 45);
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * Header
 * -------------------------------------------------------------------------- */
.kanban-header {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.kanban-header-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.kanban-header-title h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.kanban-header-title .tagline {
    font-size: 0.75rem;
    color: var(--ink-4);
}
.kanban-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Petit chip avec initiales utilisateur + nom complet à droite */
.kanban-header-user {
    display: none;  /* masqué en sm:hidden ailleurs, ici simple par défaut */
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-right: 0.25rem;
}
@media (min-width: 40rem) { .kanban-header-user { display: inline-flex; } }
.kanban-header-user-ini {
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--surface-hi);
    color: var(--ink-2);
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.625rem;
}

/* Bouton header (icon-only ou avec label) — fond surface, hover discret */
.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.btn-header:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--rule);
}
.btn-header-count {
    display: none;
    margin-left: 0.25rem;
    padding: 0 0.375rem;
    font-size: 0.625rem;
    background: var(--surface-hi);
    color: var(--ink-2);
    border-radius: 999px;
}
.btn-header-count.is-visible { display: inline-block; }
.btn-header-sync {
    border-color: oklch(86% 0.07 45);
    background: var(--chaud-bg);
    color: oklch(35% 0.18 45);
}
.btn-header-sync:hover { background: oklch(94% 0.06 45); }

/* --------------------------------------------------------------------------
 * Barre de filtres
 * -------------------------------------------------------------------------- */
.kanban-filterbar {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.kanban-filterbar-search {
    position: relative;
    flex: 1;
    max-width: 28rem;
}
.kanban-filterbar-search input {
    width: 100%;
    padding: 0.375rem 0.625rem 0.375rem 2rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink);
}
.kanban-filterbar-search input:focus {
    outline: none;
    border-color: var(--today);
    box-shadow: 0 0 0 3px var(--today-bg);
}
.kanban-filterbar-search svg {
    position: absolute;
    left: 0.625rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    color: var(--ink-4);
    pointer-events: none;
}
/* Groupe de boutons (toggle entité/type/nature) */
.filter-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-2);
    background: var(--surface-2);
}
.filter-toggle {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 80ms, color 80ms;
}
.filter-toggle:hover { color: var(--ink); }
.filter-toggle.is-active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-1);
}
.filter-toggle .dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-right: 0.25rem;
}
.filter-toggle .dot-modum  { background: var(--modum); }
.filter-toggle .dot-moenio { background: var(--moenio); }
.filter-toggle .dot-etu    { background: oklch(78% 0.16 95);  /* jaune */ }
.filter-toggle .dot-exe    { background: oklch(72% 0.16 55);  /* orange */ }
.filter-toggle .dot-moe    { background: oklch(72% 0.12 230); /* bleu ciel */ }
.filter-toggle .dot-reha   { background: oklch(65% 0.14 295); /* violet */ }
.filter-toggle .dot-neuf   { background: oklch(64% 0.18 10);  /* rose */ }
.filter-toggle .dot-perimetre { background: oklch(68% 0.15 155); /* vert — mon périmètre */ }

.kanban-filterbar-total {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ink-4);
}
.kanban-filterbar-backup {
    font-size: 0.625rem;
    color: var(--ink-4);
}

/* --------------------------------------------------------------------------
 * Main + colonnes (déjà partiellement dans style.css via .kanban-grid)
 * -------------------------------------------------------------------------- */
.kanban-main {
    flex: 1;
    min-height: 0;        /* permet à .kanban-grid de respecter height:100% */
    overflow: hidden;
    padding: 1rem;
}
.kanban-main > .kanban-grid {
    height: 100%;
    gap: 0.75rem;
    min-height: 0;        /* idem — chaîne min-height: 0 jusqu'aux lanes */
}

/* --------------------------------------------------------------------------
 * Modale dossier — surcharge des classes Tailwind par form-* sémantiques.
 * .modal-overlay / .modal-content existent déjà dans style.css.
 * -------------------------------------------------------------------------- */
.form-row {
    display: block;
    margin-bottom: 0.875rem;
}
.form-row-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.875rem;
}
.form-row-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.875rem;
}
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 0.25rem;
}
.form-label .req     { color: var(--danger); }
.form-label .hint    { color: var(--ink-4); font-weight: 400; }
.form-radio-group {
    display: flex;
    gap: 1rem;
    padding: 0.25rem 0;
}
.form-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}
.form-radio-group .dot-modum  { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--modum); }
.form-radio-group .dot-moenio { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--moenio); }

.modal-footer-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}
.btn-modal-aux {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.btn-modal-aux:hover { background: var(--surface-2); }
.btn-modal-aux.is-danger { color: var(--danger); }
.btn-modal-aux.is-danger:hover { background: var(--danger-bg); }
.btn-modal-aux.is-bordered { border-color: var(--rule-2); color: var(--ink-2); }
.btn-modal-aux.is-bordered:hover { background: var(--surface); }

/* --------------------------------------------------------------------------
 * Modale sync-alert (bandeau jaune + actions)
 * -------------------------------------------------------------------------- */
.modal-sync-alert .modal-header-warning {
    background: var(--chaud-bg);
    border-bottom: 1px solid oklch(86% 0.07 45);
    color: oklch(35% 0.18 45);
}
.sync-alert-list {
    background: var(--surface-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    list-style: none;
}
.sync-alert-list li { margin: 0.25rem 0; }
.sync-alert-list strong { color: var(--ink); }
.sync-alert-bullets {
    padding-left: 1.25rem;
    list-style: disc;
    line-height: 1.6;
}
.sync-alert-bullets li { margin: 0.375rem 0; }

/* --------------------------------------------------------------------------
 * Modale "Créer dossier" (partial _modale_creer_dossier.html)
 * -------------------------------------------------------------------------- */
.cf-alerte-existe {
    background: oklch(96% 0.04 75);
    border: 1px solid oklch(85% 0.10 75);
    color: oklch(45% 0.14 75);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.cf-alerte-existe .icn { font-size: 1rem; line-height: 1; }
.cf-section {
    margin-bottom: 1.25rem;
}
.cf-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    margin-bottom: 0.5rem;
}
.cf-etape-choices {
    display: flex;
    gap: 0.5rem;
}
.cf-etape-choices label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-2);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.cf-etape-choices label:hover { background: var(--surface-2); }
.cf-etape-choices label:has(input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}
.cf-etape-choices input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.cf-etape-hint {
    font-size: 0.75rem;
    color: var(--ink-4);
    margin-top: 0.375rem;
}

.cf-chemins-groupe { margin-bottom: 0.75rem; }
.cf-chemins-groupe-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 0.375rem;
}
.cf-chemin-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0;
}
.cf-chemin-row .col-label {
    width: 6rem;
    flex-shrink: 0;
    color: var(--ink-3);
}
.cf-chemin-row .chemin-value {
    flex: 1;
    font-family: var(--mono);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cf-chemin-row .btn-edit-chemin {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--ink-4);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 80ms, color 80ms;
}
.cf-chemin-row .btn-edit-chemin:hover {
    background: var(--surface-2);
    color: var(--ink-2);
}

.cf-preview {
    background: var(--surface-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ink);
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.cf-form-grid .span-2 { grid-column: span 2; }
.cf-form-grid input[readonly] {
    background: var(--surface-2);
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
 * Colonnes Kanban (injectées par kanban.js)
 * -------------------------------------------------------------------------- */
.kanban-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: oklch(95.5% 0.005 250);
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    overflow: hidden;
}
.kanban-col-header {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
}
.kanban-col-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-2);
    min-width: 0;
}
.kanban-col-title .emoji { flex-shrink: 0; }
.kanban-col-title .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.column-count {
    font-size: 0.75rem;
    color: var(--ink-4);
    flex-shrink: 0;
}
/* Lot 8 polish — Zone scrollable de la colonne (les cartes affaires).
   `flex: 1` pour prendre toute la hauteur restante entre header et footer.
   `min-height: 0` est CRITIQUE en flexbox : sans ça, le contenu repousse
   la colonne au lieu de scroller en interne.
   `overflow-y: auto` active la barre de scroll verticale. */
.kanban-column {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
}
.kanban-column > * + * { margin-top: 0.5rem; }

.kanban-col-footer {
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--rule);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.kanban-col-footer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.column-footer {
    font-size: 0.75rem;
    color: var(--ink-3);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.column-reste {
    font-size: 0.625rem;
    color: var(--ink-4);
    font-family: var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.column-relance {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}
.column-relance > .lbl { font-size: 0.625rem; color: var(--ink-4); }
.column-relance-input {
    width: 2.5rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    text-align: right;
    border-radius: 4px;
    border: 1px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink-2);
}
.column-relance-input:focus {
    outline: none;
    border-color: var(--chaud);
    box-shadow: 0 0 0 1px var(--chaud-bg);
}

/* --------------------------------------------------------------------------
 * Cartes Kanban (style.css définit .kanban-card position:relative,
 * on complète ici pour le rendu complet)
 * -------------------------------------------------------------------------- */
.kanban-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: grab;
    user-select: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.kanban-card:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); }
.kanban-card:active { cursor: grabbing; }
.kcard-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}
.kcard-bar.bar-modum  { background: var(--modum); }
.kcard-bar.bar-moenio { background: var(--moenio); }

.kcard-body {
    padding: 0.5rem 0.625rem 0.5rem 0.875rem;
}
.kcard-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.kcard-text {
    min-width: 0;
    flex: 1;
}
.kcard-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kcard-meta {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kcard-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}
.kcard-numero {
    font-family: var(--mono);
    font-size: 0.625rem;
    line-height: 1;
    color: var(--ink-3);
}
.kcard-numero.is-empty { color: var(--ink-4); }
.kcard-statut-emoji {
    font-size: 1rem;
    line-height: 1;
}
.kcard-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    min-width: 0;
}
.kcard-row-bottom-left,
.kcard-row-bottom-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}
.kcard-row-bottom-right { flex-shrink: 0; }
.kcard-montant {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-2);
}
.kcard-icon-mini {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--ink-4);
}
.kcard-date {
    font-size: 0.625rem;
    color: var(--ink-4);
}
.kcard-relance {
    font-size: 0.6875rem;
    line-height: 1;
}

/* Badge entité (sur la carte) */
.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
}
.badge-entite-modum  { background: var(--modum-bg); color: var(--modum); }
.badge-entite-moenio { background: var(--moenio-bg); color: var(--moenio); }

/* Pastille initiales du chargé d'affaire — neutre, monospace, distincte
   du badge entité (qui est coloré). 3 lettres, lisible mais discret. */
.badge-pill.badge-ca {
    background: var(--surface-hi);
    color: var(--ink-2);
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

/* Pastilles type / nature */
.kcard-tags-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
.kcard-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 500;
}
.kcard-tag.tag-etu     { background: oklch(96% 0.08 95);  color: oklch(40% 0.14 95); }
.kcard-tag.tag-exe     { background: oklch(96% 0.08 55);  color: oklch(45% 0.14 55); }
.kcard-tag.tag-moe     { background: oklch(96% 0.05 230); color: oklch(40% 0.13 230); }
.kcard-tag.tag-reha    { background: oklch(96% 0.06 295); color: oklch(42% 0.14 295); }
.kcard-tag.tag-neuf    { background: oklch(96% 0.06 10);  color: oklch(45% 0.16 10); }
.kcard-tag.tag-default { background: var(--surface-hi); color: var(--ink-2); }

/* --------------------------------------------------------------------------
 * Boutons de la modale Archives / Corbeille (rendus dynamiquement)
 * -------------------------------------------------------------------------- */
.modal-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface);
    margin-bottom: 0.375rem;
}
.modal-list-item-info {
    flex: 1;
    min-width: 0;
}
.modal-list-item-titre {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-list-item-meta {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-top: 0.125rem;
}
.modal-list-item-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* ============================================================================
 * Shim Tailwind — réplique les classes utilitaires de Tailwind utilisées
 * dans kanban.js (templates dynamiques) afin de retirer le CDN Tailwind.
 *
 * Note : on n'inclut que les classes effectivement référencées. Si tu
 * ajoutes une classe Tailwind dans kanban.js, il faudra l'ajouter ici aussi.
 *
 * Couleurs des slates : remplacés par les tokens oklch de style.css quand
 * possible. text-slate-400 ≈ var(--ink-4), border-slate-200 ≈ var(--rule), etc.
 * ============================================================================ */

/* Display & flex */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.inline-block  { display: inline-block; }
.items-center  { align-items: center; }
.justify-end   { justify-content: flex-end; }

/* Margins & paddings */
.mb-3   { margin-bottom: 0.75rem; }
.ml-1   { margin-left: 0.25rem; }
.ml-auto{ margin-left: auto; }
.mr-1   { margin-right: 0.25rem; }
.pb-1   { padding-bottom: 0.25rem; }
.pb-2   { padding-bottom: 0.5rem; }
.pl-3   { padding-left: 0.75rem; }
.pr-3   { padding-right: 0.75rem; }
.px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }

/* Sizes */
.h-2     { height: 0.5rem; }
.w-2     { width: 0.5rem; }
.w-full  { width: 100%; }
.max-w-\[200px\] { max-width: 200px; }

/* Typography */
.text-\[10px\]      { font-size: 10px; }
.text-xs            { font-size: 0.75rem; }
.text-sm            { font-size: 0.875rem; }
.text-center        { text-align: center; }
.text-left          { text-align: left; }
.text-right         { text-align: right; }
.font-normal        { font-weight: 400; }
.font-medium        { font-weight: 500; }
.font-semibold      { font-weight: 600; }
.italic             { font-style: italic; }
.truncate           { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whitespace-nowrap  { white-space: nowrap; }
.align-middle       { vertical-align: middle; }

/* Colors — slate alias vers nos tokens oklch */
.text-slate-300  { color: var(--ink-4); }
.text-slate-400  { color: var(--ink-4); }
.text-slate-500  { color: var(--ink-3); }
.text-slate-600  { color: var(--ink-3); }
.text-slate-700  { color: var(--ink-2); }
.text-slate-900  { color: var(--ink); }
.bg-white        { background-color: var(--surface); }
.bg-slate-100    { background-color: var(--surface-hi); }

/* Couleurs sémantiques (rouges, verts, ambres) — fond clair + texte foncé */
.text-red-600     { color: var(--danger); }
.text-amber-500   { color: oklch(72% 0.18 75); }
.text-indigo-600  { color: oklch(50% 0.18 270); }
.text-emerald-700 { color: oklch(45% 0.13 152); }
.text-rose-700    { color: oklch(45% 0.16 10); }
.bg-rose-50       { background-color: oklch(97% 0.03 10); }
.border-emerald-200 { border-color: oklch(85% 0.08 152); }
.border-rose-200    { border-color: oklch(88% 0.06 10); }
.border-rose-300    { border-color: oklch(80% 0.10 10); }

/* Marques MODUM/MOENIO — alias vers les tokens */
.bg-modum     { background-color: var(--modum); }
.bg-moenio    { background-color: var(--moenio); }
.text-modum   { color: var(--modum); }
.text-moenio  { color: var(--moenio); }
.bg-modum\/10 { background-color: var(--modum-bg); }
.bg-moenio\/10{ background-color: var(--moenio-bg); }

/* Borders */
.border          { border: 1px solid var(--rule); }
.border-b        { border-bottom: 1px solid var(--rule); }
.border-t        { border-top: 1px solid var(--rule); }
.border-t-2      { border-top: 2px solid var(--rule); }
.border-slate-100{ border-color: oklch(95% 0.005 250); }
.border-slate-200{ border-color: var(--rule); }
.border-slate-300{ border-color: var(--rule-2); }
.rounded         { border-radius: var(--radius-sm); }
.rounded-full    { border-radius: 999px; }
.shadow-sm       { box-shadow: var(--shadow-1); }
.cursor-pointer  { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.opacity-50      { opacity: 0.5; }
.invisible       { visibility: hidden; }

/* Hover variants — limitées à celles utilisées */
.hover\:text-slate-600:hover { color: var(--ink-3); }
.hover\:underline:hover      { text-decoration: underline; }
.hover\:bg-slate-100:hover   { background-color: var(--surface-hi); }
.hover\:bg-rose-100:hover    { background-color: oklch(95% 0.04 10); }

/* last:border-0 — bord retiré sur le dernier enfant d'une liste */
tr.border-b:last-child       { border-bottom: 0; }
.last\:border-0:last-child   { border: 0; }