/*
 * Design System Specification: The Architectural Authority
 * Tokens & Foundations
 */

:root {
    /* Colors - Core */
    --ds-color-primary: #D97706; /* Amber Accent — usage sur fond SOMBRE (nav) ou en icône/bordure */
    /* Amber assombri pour texte/surfaces sur fond CLAIR : #D97706 + blanc = 3.18:1 (< WCAG AA).
       #B45309 (amber-700) + blanc = 5.0:1 ✓ ; #92400E (amber-800) en texte sur clair = 6.2:1 ✓. */
    --ds-color-primary-strong: #B45309; /* boutons pleins amber (texte blanc) — AA */
    --ds-color-primary-on-light: #92400E; /* texte/titre amber sur surface claire — AA */
    --ds-color-primary-base: #1b0900;
    --ds-color-on-primary: #FFFFFF;

    --ds-color-secondary-container: #c2d4ff;
    --ds-color-on-secondary-container: #4a5b80;
    --ds-color-secondary: #4d5e83;

    --ds-color-surface: #f6fafe;
    --ds-color-surface-container-low: #f0f4f8;
    --ds-color-surface-container-high: #e4e9ed;
    --ds-color-surface-container-highest: #dfe3e7;
    --ds-color-surface-lowest: #FFFFFF;

    --ds-color-on-surface: #171c1f;
    --ds-color-on-surface-variant: #44474e;

    --ds-color-error: #ba1a1a;
    --ds-color-on-error: #ffffff;

    --ds-color-success: #3a1c00;
    --ds-color-on-success: #d27200;

    --ds-color-outline-variant: #c5c6cf;

    /* Typography */
    --ds-font-family-body: 'Inter', sans-serif;
    --ds-font-family-data: 'JetBrains Mono', monospace;

    /* Spacing & Sizes */
    --ds-spacing-1: 0.25rem;
    --ds-spacing-2: 0.4rem;
    --ds-spacing-3: 0.75rem;
    --ds-spacing-4: 1rem;

    --ds-radius-default: 0px;
    --ds-radius-sm: 0px;
    --ds-radius-none: 0px;

    /* Z-Index */
    --ds-z-index-dropdown: 1000;
    --ds-z-index-sticky: 1020;
    --ds-z-index-fixed: 1030;
    --ds-z-index-modal-backdrop: 1040;
    --ds-z-index-modal: 1050;
    --ds-z-index-popover: 1060;
    --ds-z-index-tooltip: 1070;
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */

.ds-font-body {
    font-family: var(--ds-font-family-body);
}

.ds-font-data {
    font-family: var(--ds-font-family-data);
}

.ds-headline-lg {
    font-family: var(--ds-font-family-body);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-color-on-surface);
}

.ds-title-sm {
    font-family: var(--ds-font-family-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-color-on-surface);
}

.ds-label-sm {
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-color-on-surface-variant);
}

/* Titre de section amber sur fond CLAIR (ex. « Tous les devis » en tête de liste).
   Remplace le pattern hard-codé `text-[#D97706] tracking-wider uppercase`, qui
   tombait à 2.88:1 (< AA). Utilise l'amber assombri (6.2:1). Réservé aux surfaces
   claires — NE PAS utiliser sur la barre de navigation sombre (l'amber vif y reste). */
.ds-section-title {
    font-family: var(--ds-font-family-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-color-primary-on-light);
}

/* Override de collision : le thème Bootstrap de DevExpress (blazing-berry.bs5)
   déclare `.text-secondary { color: #888 !important }`, ce qui détourne notre
   utilitaire Tailwind homonyme sur TOUS les textes muted (labels, pagers…),
   les faisant tomber à 3.38:1 (< AA). On restaure le token secondaire (6.8:1). */
.text-secondary {
    color: var(--ds-color-secondary) !important;
}

.ds-currency {
    font-family: var(--ds-font-family-data);
    text-align: right;
    letter-spacing: 1px;
}

/* ==========================================================================
   Surfaces & Elevation
   ========================================================================== */

.ds-surface {
    background-color: var(--ds-color-surface);
    color: var(--ds-color-on-surface);
}

.ds-surface-panel {
    background-color: var(--ds-color-surface-container-low);
    border-radius: var(--ds-radius-default);
}

.ds-surface-inset {
    background-color: var(--ds-color-surface-container-high);
    border-radius: var(--ds-radius-default);
}

/* Ambient Shadows */
.ds-shadow-ambient {
    box-shadow: 0 0 24px rgba(23, 28, 31, 0.04); /* 4% opacity of on_surface */
}

/* Glassmorphism */
.ds-glass {
    background-color: rgba(246, 250, 254, 0.85); /* surface at 85% */
    backdrop-filter: blur(20px);
}

/* ==========================================================================
   Buttons (Machined Precision)
   ========================================================================== */

.ds-btn {
    font-family: var(--ds-font-family-body);
    border-radius: var(--ds-radius-default);
    padding: var(--ds-spacing-2) var(--ds-spacing-4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-spacing-2);
}

.ds-btn:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
}

.ds-focus-ring:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
}

.ds-focus-ring-inset:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: -2px;
}

@media (forced-colors: active) {
    .ds-focus-ring:focus-visible,
    .ds-focus-ring-inset:focus-visible,
    .ds-btn:focus-visible {
        outline-color: Highlight;
    }
}

.ds-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button — fond amber assombri (--ds-color-primary-strong) pour garantir
   un contraste AA du texte blanc (5.0:1 au lieu de 3.18:1 avec l'amber d'accent). */
.ds-btn-primary {
    background-color: var(--ds-color-primary-strong);
    color: var(--ds-color-on-primary);
}

.ds-btn-primary:hover:not(:disabled) {
    background-color: var(--ds-color-primary-base); /* Shift to higher contrast */
}

/* Success Button (validation : texte blanc sur fond vert) */
.ds-btn-success {
    background-color: #16a34a; /* green-600 */
    color: #ffffff;
}

.ds-btn-success:hover:not(:disabled) {
    background-color: #15803d; /* green-700 */
}

/* Secondary Button */
.ds-btn-secondary {
    background-color: var(--ds-color-secondary-container);
    color: var(--ds-color-on-secondary-container);
}

.ds-btn-secondary:hover:not(:disabled) {
    background-color: var(--ds-color-secondary);
    color: var(--ds-color-surface);
}

/* Tertiary / Ghost Button */
.ds-btn-ghost {
    background-color: transparent;
    color: var(--ds-color-on-surface-variant);
    padding: var(--ds-spacing-2);
}

.ds-btn-ghost:hover:not(:disabled) {
    background-color: var(--ds-color-surface-container-high);
    color: var(--ds-color-on-surface);
}

/* Outline Button (secondaire discret : Annuler/Retour dans les formulaires) */
.ds-btn-outline {
    background-color: transparent;
    color: var(--ds-color-on-surface-variant);
    border: 1px solid var(--ds-color-outline, #cbd5e1);
}

.ds-btn-outline:hover:not(:disabled) {
    background-color: var(--ds-color-surface-container-high);
    color: var(--ds-color-on-surface);
}

/* Destructive Button (réservé aux actions destructives : annuler un document,
   supprimer, rejeter). Rouge, distinct du primaire ET du secondaire. */
.ds-btn-destructive {
    background-color: transparent;
    color: #b91c1c; /* red-700 */
    border: 1px solid #fca5a5; /* red-300 */
}

.ds-btn-destructive:hover:not(:disabled) {
    background-color: #fef2f2; /* red-50 */
    border-color: #b91c1c;
}

/* Alias transitoire : d'anciens appels utilisaient Class="ds-btn-error"
   (classe autrefois inexistante). Conserve le rendu destructif si un usage
   résiduel réapparaît ; la migration remplace ces appels par Variant="destructive". */
.ds-btn-error {
    background-color: transparent !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}

.ds-btn-error:hover:not(:disabled) {
    background-color: #fef2f2 !important;
    border-color: #b91c1c !important;
}

/* Warning Button (actions nécessitant attention mais non destructives) */
.ds-btn-warning {
    background-color: transparent;
    color: #92400e; /* amber-800 */
    border: 1px solid #fcd34d; /* amber-300 */
}

.ds-btn-warning:hover:not(:disabled) {
    background-color: #fffbeb; /* amber-50 */
    border-color: #92400e;
}

/* Neutral Button (actions déprioritisées, secondaires discrètes) */
.ds-btn-neutral {
    background-color: transparent;
    color: #475569; /* slate-600 */
    border: 1px solid #cbd5e1; /* slate-300 */
}

.ds-btn-neutral:hover:not(:disabled) {
    background-color: #f8fafc; /* slate-50 */
    border-color: #475569;
}

/* Info Button (actions informatives / navigation vers un contexte) */
.ds-btn-info {
    background-color: transparent;
    color: #1d4ed8; /* blue-700 */
    border: 1px solid #93c5fd; /* blue-300 */
}

.ds-btn-info:hover:not(:disabled) {
    background-color: #eff6ff; /* blue-50 */
    border-color: #1d4ed8;
}

/* Item de menu « … » (OverflowMenu) — CDC UX-03 */
.ds-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--ds-color-on-surface);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.ds-menu-item:hover:not(:disabled) {
    background-color: var(--ds-color-surface-container-high);
}

.ds-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ds-menu-item.ds-menu-item-danger {
    color: #b91c1c; /* red-700 */
}

.ds-menu-item.ds-menu-item-danger:hover:not(:disabled) {
    background-color: #fef2f2; /* red-50 */
}

/* ==========================================================================
   Data Tables
   ========================================================================== */

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ds-font-family-body);
    font-size: 0.875rem;
}

.ds-table th {
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-color-on-surface-variant);
    text-align: left;
    padding: var(--ds-spacing-2) var(--ds-spacing-3);
    background-color: var(--ds-color-surface-container-high);
}

.ds-table td {
    padding: 0 var(--ds-spacing-3);
    height: 36px; /* Fixed 36px height */
    vertical-align: middle;
}

/* Alternating Row Stripes (No horizontal lines) */
.ds-table tbody tr:nth-child(odd) {
    background-color: var(--ds-color-surface);
}

.ds-table tbody tr:nth-child(even) {
    background-color: var(--ds-color-surface-container-low);
}

/* Ghost Border fallback for extreme density if needed */
.ds-table.ds-table-bordered td {
    border-bottom: 1px solid rgba(197, 198, 207, 0.15); /* outline_variant at 15% */
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ds-badge-success {
    background-color: #16a34a; /* green-600 */
    color: #ffffff;
}

.ds-badge-critical {
    background-color: var(--ds-color-error);
    color: var(--ds-color-on-error);
}

.ds-badge-neutral {
    background-color: var(--ds-color-surface-container-highest);
    color: var(--ds-color-on-surface-variant);
}

/* Info / Clôturé : gris-ardoise discret (distinct du vert « Validé », peu voyant) */
.ds-badge-info {
    background-color: #475569; /* slate-600 */
    color: #ffffff;
}

/* Warning : ambre (alerte / en cours) */
.ds-badge-warning {
    background-color: #f59e0b; /* amber-500 */
    color: #1c1917; /* texte sombre pour le contraste */
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */

.ds-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-1);
    margin-bottom: var(--ds-spacing-4);
}

.ds-label {
    font-family: var(--ds-font-family-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-color-on-surface-variant);
}

.ds-input {
    background-color: var(--ds-color-surface-container-highest);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--ds-radius-default) var(--ds-radius-default) 0 0;
    padding: var(--ds-spacing-2) var(--ds-spacing-3);
    font-family: var(--ds-font-family-body);
    font-size: 0.875rem;
    color: var(--ds-color-on-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    width: 100%;
}

.ds-input:focus, .ds-input:focus-visible {
    outline: none;
    border-bottom-color: var(--ds-color-primary); /* Terminal input style */
    background-color: var(--ds-color-surface-container-high);
}

.ds-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Layout Helpers (Responsive)
   ========================================================================== */

/* Grid Columns */
.ds-grid {
    display: grid;
    gap: var(--ds-spacing-4);
}

/* Mobile-first Base: 1 col */
.ds-grid { grid-template-columns: 1fr; }

/* Tablet */
@media (min-width: 768px) {
    .ds-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
    .ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .ds-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
}

/* ==========================================================================
   Responsive Safety Nets (mobile)
   Filets de sécurité indépendants de Tailwind : garantissent un rendu mobile
   correct même sur les pages dont les tableaux/grilles n'ont pas été
   explicitement enveloppés.
   ========================================================================== */

/* 1) Empêche tout débordement horizontal de la page (scroll latéral parasite).
      overflow-x est limité au mobile pour ne pas neutraliser position:sticky sur desktop. */
html, body { max-width: 100%; }
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
}

/* 2) Conteneur de défilement horizontal pour les tableaux denses.
      À appliquer autour d'un <table> : <div class="ds-table-wrap">…</div> */
.ds-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 3) Filet de sécurité : sur petit écran, tout .ds-table devient défilable
      horizontalement même sans wrapper explicite (évite la troncature).
      Le scope est limité au mobile pour ne pas altérer le rendu desktop. */
@media (max-width: 767px) {
    .ds-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Réduit la densité de padding des surfaces sur mobile pour gagner en largeur utile. */
    .ds-surface { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* 4) Les inputs et selects ne doivent jamais déborder de leur conteneur. */
.ds-input, .ds-select, select.ds-input, textarea.ds-input {
    max-width: 100%;
}

/* ==========================================================================
   Masquage de la sidebar (desktop) — toggle « Masquer/Afficher le menu »
   En CSS GLOBALE (pas scopée) : .sidebar-collapsed est posée sur #app-root,
   et #sidebar/#main-content/#desktop-footer ont des IDs globaux.
   ========================================================================== */
@media (min-width: 768px) {
    .sidebar-collapsed #sidebar { transform: translateX(-100%); }
    .sidebar-collapsed #main-content { margin-left: 0 !important; }
    .sidebar-collapsed #desktop-footer { left: 0 !important; }
}

/* ==========================================================================
   Composants socle ERP UX (Lot 1) — SmartButton / WorkflowProgressBar /
   BusinessTimeline / RelationLinks. Cf. SPEC §4. Classes manuelles (pas Tailwind).
   ========================================================================== */

/* --- SmartButton (§4.2) --- */
.ds-smartbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-spacing-2);
    padding: var(--ds-spacing-2) var(--ds-spacing-3);
    border-radius: var(--ds-radius-default);
    border: 1px solid var(--ds-color-surface-container-highest);
    background-color: var(--ds-color-surface-container-low);
    color: var(--ds-color-on-surface);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ds-smartbtn:hover:not(.ds-smartbtn-disabled):not(.ds-smartbtn-static) {
    background-color: var(--ds-color-surface-container-high);
    border-color: var(--ds-color-primary);
}
.ds-smartbtn:focus-visible {
    outline: 2px solid var(--ds-color-primary);
    outline-offset: 2px;
}
.ds-smartbtn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ds-smartbtn-static {
    cursor: default;
}
.ds-smartbtn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--ds-color-primary);
    color: var(--ds-color-on-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* --- WorkflowProgressBar (§4.3) --- */
.ds-workflow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-spacing-2);
}
.ds-workflow-step {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-spacing-2);
}
.ds-workflow-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.ds-workflow-label a { text-decoration: none; color: inherit; }
.ds-workflow-label { font-size: 0.8125rem; font-weight: 600; }
.ds-workflow-step-todo    { color: var(--ds-color-on-surface-variant); }
.ds-workflow-step-current { color: var(--ds-color-primary); }
.ds-workflow-step-done    { color: #16a34a; }
.ds-workflow-step-blocked { color: var(--ds-color-error); }
.ds-workflow-connector {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    height: 2px;
    background-color: var(--ds-color-surface-container-highest);
}
.ds-workflow-connector-done { background-color: #16a34a; }

/* --- BusinessTimeline (§4.4) --- */
.ds-timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--ds-color-surface-container-highest);
}
.ds-timeline-item {
    position: relative;
    padding: 0 0 var(--ds-spacing-4) var(--ds-spacing-4);
}
.ds-timeline-dot {
    position: absolute;
    left: -0.5rem;
    top: 0.125rem;
    color: var(--ds-color-primary);
    background-color: var(--ds-color-surface);
    border-radius: 999px;
}

/* --- RelationLinks (§4.5) --- */
.ds-relations { display: flex; flex-direction: column; gap: var(--ds-spacing-3); }
.ds-relation-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-color-surface-container-high);
    color: var(--ds-color-on-surface-variant);
    font-size: 0.75rem;
    text-decoration: none;
}
.ds-relation-chip-link { color: var(--ds-color-primary); }
.ds-relation-chip-link:hover { text-decoration: underline; }
.ds-relation-chip-na { opacity: 0.6; }

/* --- Cockpits par rôle (tuiles d'accès) --- */
.ds-cockpit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ds-spacing-3);
}
.ds-cockpit-tile {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-3);
    padding: var(--ds-spacing-4);
    border-radius: var(--ds-radius-default);
    border: 1px solid var(--ds-color-surface-container-highest);
    background-color: var(--ds-color-surface-container-low);
    color: var(--ds-color-on-surface);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ds-cockpit-tile:hover {
    background-color: var(--ds-color-surface-container-high);
    border-color: var(--ds-color-primary);
    transform: translateY(-1px);
}
.ds-cockpit-tile .ds-cockpit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ds-radius-default);
    background-color: var(--ds-color-surface-container-highest);
    color: var(--ds-color-primary);
    flex-shrink: 0;
}
.ds-cockpit-tile-title { font-weight: 600; font-size: 0.9rem; }
.ds-cockpit-tile-desc { font-size: 0.7rem; color: var(--ds-color-on-surface-variant); }

/* Worklist transverse (/worklist) : lignes actionnables avec compteur + deep-link */
.ds-worklist {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-2);
}
.ds-worklist-row {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-3);
    padding: var(--ds-spacing-3) var(--ds-spacing-4);
    border-radius: var(--ds-radius-default);
    border: 1px solid var(--ds-color-surface-container-highest);
    background-color: var(--ds-color-surface-container-low);
    color: var(--ds-color-on-surface);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ds-worklist-row:hover {
    background-color: var(--ds-color-surface-container-high);
    border-color: var(--ds-color-primary);
}
.ds-worklist-row--empty { opacity: 0.65; }
.ds-worklist-label { flex: 1; font-size: 0.875rem; }
.ds-worklist-zero { color: #16a34a; font-size: 1.25rem; }

/* ==========================================================================
   Tooltips (CSS-only)
   ========================================================================== */

/* Tooltip Container */
[data-tooltip] {
    position: relative;
}

/* Tooltip Text */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1e293b; /* Slate 800 */
    color: #ffffff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: var(--ds-z-index-tooltip, 1070);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    text-transform: none; /* Override parent button text-transform */
    letter-spacing: normal;
}

/* Tooltip Arrow */
[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: 112%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: var(--ds-z-index-tooltip, 1070);
    pointer-events: none;
}

/* Show on Hover */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Cartes de documents (mobile) — DocumentCardList (CDC UX P1.5)
   Les listes denses (DxGrid, 8-11 colonnes) sont illisibles < 768px.
   La page rend la grille dans `.hidden md:block` et ces cartes en dessous.
   `.ds-card-list` est masquée sur desktop pour éviter tout double rendu.
   ========================================================================== */
.ds-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Filet de sécurité : jamais visible en ≥768px (double sécurité avec `md:hidden`). */
@media (min-width: 768px) {
    .ds-card-list { display: none; }
}

.ds-doc-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ds-color-surface-container-highest, #e2e8f0);
    border-radius: var(--ds-radius-lg, 0.75rem);
    background-color: var(--ds-color-surface-container-low, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ds-doc-card--empty {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
}

/* Ligne de tête : n° du document (lien) à gauche, statut à droite. */
.ds-doc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ds-doc-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ds-color-on-surface, #0f172a);
    /* Tap-target confortable (WCAG 2.5.5) sans casser l'alignement. */
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
}

/* Grille de métadonnées libellé / valeur. */
.ds-doc-card-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

.ds-doc-card-meta dt {
    color: var(--ds-color-on-surface-variant, #64748b);
    font-weight: 500;
}

.ds-doc-card-meta dd {
    margin: 0;
    color: var(--ds-color-on-surface, #0f172a);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Montant mis en évidence (bas de carte). */
.ds-doc-card-amount {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ds-color-on-surface, #0f172a);
    white-space: nowrap;
}

/* Pied de carte : montant + actions, séparé par un filet léger. */
.ds-doc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ds-color-surface-container-highest, #eef2f7);
}

/* Neutralise la couleur de lien visité dans le contenu principal (UX-71). */
main a:visited {
    color: inherit;
}

/* ── Barre de totaux sticky §S2-1 ─────────────────────────────────────────── */

.ds-totaux-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--ds-color-surface, #ffffff);
    border-top: 2px solid var(--ds-color-primary-strong, #b45309);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

.ds-totaux-bar__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    flex: 1;
    min-width: 0;
}

.ds-totaux-bar__item {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.ds-totaux-bar__label {
    color: var(--ds-color-on-surface-variant, #64748b);
}

.ds-totaux-bar__value {
    font-weight: 600;
    color: var(--ds-color-on-surface, #0f172a);
}

.ds-totaux-bar__ttc {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ds-color-primary-strong, #b45309);
}

.ds-totaux-bar__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Responsive : empilement sur mobile */
@media (max-width: 640px) {
    .ds-totaux-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .ds-totaux-bar__actions {
        justify-content: flex-end;
    }
}

/* Variante non-sticky (Sticky=false) */
.ds-totaux-bar--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    border-top: 2px solid var(--ds-color-primary-container, #fde68a);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* ── Barre de sauvegarde sticky (UX-62/63/64) ────────────────────────────── */
.ds-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--ds-color-surface, #ffffff);
    border-top: 1px solid var(--ds-color-surface-variant-border, #e2e8f0);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 0.625rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ds-save-bar--dirty {
    border-top-color: var(--ds-color-primary-strong, #b45309);
}