/*
 * LYBERSCORE SOMMEIL — Design System v1.0
 * UIUX-01 — Référentiel graphique officiel
 * =========================================
 * Ce fichier est la source de vérité pour tous les composants UI.
 * Tout nouveau composant doit obligatoirement provenir de cette bibliothèque.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 1 — TOKENS ÉTENDUS
 * ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Couleurs sémantiques (existant + enrichi) */
    --ds-primary:         #2563eb;
    --ds-primary-dark:    #1d4ed8;
    --ds-primary-light:   #dbeafe;
    --ds-primary-subtle:  #eff6ff;
    --ds-secondary:       #64748b;
    --ds-success:         #10b981;
    --ds-success-light:   #dcfce7;
    --ds-success-subtle:  #f0fdf4;
    --ds-warning:         #f59e0b;
    --ds-warning-light:   #fef3c7;
    --ds-warning-subtle:  #fffbeb;
    --ds-danger:          #ef4444;
    --ds-danger-light:    #fee2e2;
    --ds-danger-subtle:   #fef2f2;
    --ds-info:            #6366f1;
    --ds-info-light:      #e0e7ff;
    --ds-info-subtle:     #eef2ff;
    --ds-purple:          #8b5cf6;
    --ds-purple-light:    #ede9fe;
    --ds-purple-subtle:   #f5f3ff;
    --ds-neutral:         #94a3b8;
    --ds-neutral-light:   #f1f5f9;

    /* Surfaces */
    --ds-surface-0:   #ffffff;
    --ds-surface-1:   #f8fafc;
    --ds-surface-2:   #f1f5f9;
    --ds-surface-3:   #e2e8f0;

    /* Texte */
    --ds-text-primary:   #0f172a;
    --ds-text-secondary: #475569;
    --ds-text-muted:     #94a3b8;
    --ds-text-disabled:  #cbd5e1;

    /* Bordures */
    --ds-border:         #e2e8f0;
    --ds-border-strong:  #cbd5e1;
    --ds-border-focus:   #8b5cf6;

    /* Ombres */
    --ds-shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
    --ds-shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.06);
    --ds-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
    --ds-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
    --ds-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05);

    /* Rayons */
    --ds-radius-sm:  6px;
    --ds-radius-md:  10px;
    --ds-radius-lg:  14px;
    --ds-radius-xl:  20px;
    --ds-radius-pill: 9999px;

    /* Espacements */
    --ds-space-1:  4px;
    --ds-space-2:  8px;
    --ds-space-3:  12px;
    --ds-space-4:  16px;
    --ds-space-5:  20px;
    --ds-space-6:  24px;
    --ds-space-8:  32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* Typographie */
    --ds-font-xs:   0.72rem;
    --ds-font-sm:   0.83rem;
    --ds-font-base: 0.94rem;
    --ds-font-md:   1.05rem;
    --ds-font-lg:   1.2rem;
    --ds-font-xl:   1.4rem;
    --ds-font-2xl:  1.75rem;

    /* Transitions */
    --ds-transition-fast:   all 0.15s ease;
    --ds-transition-base:   all 0.22s ease;
    --ds-transition-slow:   all 0.35s ease;

    /* Z-index */
    --ds-z-dropdown:  100;
    --ds-z-sticky:    200;
    --ds-z-overlay:   300;
    --ds-z-modal:     400;
    --ds-z-toast:     500;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 2 — SKELETON LOADING
 * ───────────────────────────────────────────────────────────────────────────── */
@keyframes ds-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

.ds-skeleton {
    background: linear-gradient(90deg,
        var(--ds-surface-2) 25%,
        var(--ds-surface-3) 50%,
        var(--ds-surface-2) 75%
    );
    background-size: 800px 100%;
    animation: ds-shimmer 1.4s infinite linear;
    border-radius: var(--ds-radius-sm);
}

.ds-skeleton-text {
    height: 14px;
    border-radius: var(--ds-radius-sm);
    margin-bottom: var(--ds-space-2);
}
.ds-skeleton-text.wide   { width: 80%; }
.ds-skeleton-text.medium { width: 55%; }
.ds-skeleton-text.narrow { width: 35%; }

.ds-skeleton-title {
    height: 20px;
    border-radius: var(--ds-radius-sm);
    width: 45%;
    margin-bottom: var(--ds-space-3);
}

.ds-skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ds-skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Skeleton card */
.ds-skeleton-card {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-5);
    display: flex;
    gap: var(--ds-space-4);
    align-items: flex-start;
}

/* Skeleton table rows */
.ds-skeleton-row {
    display: grid;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4) var(--ds-space-6);
    border-bottom: 1px solid var(--ds-border);
    align-items: center;
}
.ds-skeleton-row:last-child { border-bottom: none; }

/* Skeleton KPI */
.ds-skeleton-kpi {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-6);
}

/* Loading state for containers */
.ds-loading-state {
    padding: var(--ds-space-10);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

/* Skeleton Table full */
.ds-skeleton-table {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.ds-skeleton-thead {
    background: var(--ds-surface-2);
    padding: var(--ds-space-4) var(--ds-space-6);
    display: flex;
    gap: var(--ds-space-8);
    border-bottom: 1px solid var(--ds-border);
}
.ds-skeleton-tbody { padding: var(--ds-space-2) 0; }


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 3 — TABLES MODERNES
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-table-wrap {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: var(--ds-shadow-sm);
}

/* Toolbar : recherche + filtres + actions */
.ds-table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-4) var(--ds-space-5);
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-1);
    flex-wrap: wrap;
}

.ds-search-field {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: var(--ds-surface-0);
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 0 var(--ds-space-3);
    transition: var(--ds-transition-base);
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}
.ds-search-field:focus-within {
    border-color: var(--ds-border-focus);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.10);
}
.ds-search-field svg { color: var(--ds-text-muted); flex-shrink: 0; }
.ds-search-field input {
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: var(--ds-font-sm);
    color: var(--ds-text-primary);
    width: 100%;
    min-width: 0;
}
.ds-search-field input:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.ds-table-count {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    white-space: nowrap;
}

/* Table */
.ds-table {
    width: 100%;
    border-collapse: collapse;
}

.ds-table thead {
    background: var(--ds-surface-1);
    border-bottom: 1.5px solid var(--ds-border);
}

.ds-table th {
    padding: 12px var(--ds-space-5);
    text-align: left;
    font-size: var(--ds-font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ds-text-secondary);
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.ds-table th.sortable { cursor: pointer; }
.ds-table th.sortable:hover { color: var(--ds-text-primary); }
.ds-table th .sort-icon {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.4;
    font-size: 10px;
    vertical-align: middle;
}
.ds-table th.sort-asc  .sort-icon,
.ds-table th.sort-desc .sort-icon { opacity: 1; }

.ds-table tbody tr {
    border-bottom: 1px solid var(--ds-border);
    transition: background 0.12s ease;
}
.ds-table tbody tr:last-child { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--ds-surface-1); }
.ds-table tbody tr.clickable { cursor: pointer; }
.ds-table tbody tr.clickable:hover { background: var(--ds-primary-subtle); }

.ds-table td {
    padding: 14px var(--ds-space-5);
    font-size: var(--ds-font-sm);
    color: var(--ds-text-primary);
    vertical-align: middle;
}

.ds-table td.muted { color: var(--ds-text-secondary); }
.ds-table td.center { text-align: center; }
.ds-table td.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--ds-font-xs); }

/* Actions cell */
.ds-table .td-actions {
    display: flex;
    gap: var(--ds-space-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Overflow scroll */
.ds-table-scroll { overflow-x: auto; }

/* Footer : pagination */
.ds-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-3) var(--ds-space-5);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-1);
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

.ds-pagination {
    display: flex;
    gap: var(--ds-space-1);
    align-items: center;
}
.ds-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--ds-space-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-0);
    font-size: var(--ds-font-sm);
    color: var(--ds-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--ds-transition-fast);
}
.ds-page-btn:hover:not(:disabled) {
    background: var(--ds-surface-2);
    border-color: var(--ds-border-strong);
    color: var(--ds-text-primary);
}
.ds-page-btn.active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: white;
    font-weight: 700;
}
.ds-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Empty state */
.ds-table-empty {
    padding: var(--ds-space-12) var(--ds-space-6);
    text-align: center;
}
.ds-table-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--ds-space-4);
    opacity: 0.6;
}
.ds-table-empty-title {
    font-size: var(--ds-font-md);
    font-weight: 600;
    color: var(--ds-text-secondary);
    margin-bottom: var(--ds-space-2);
}
.ds-table-empty-subtitle {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 4 — BADGES
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-font-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.5;
}

.ds-badge--success  { background: var(--ds-success-light);  color: #166534; }
.ds-badge--warning  { background: var(--ds-warning-light);  color: #92400e; }
.ds-badge--danger   { background: var(--ds-danger-light);   color: #991b1b; }
.ds-badge--info     { background: var(--ds-info-light);     color: #3730a3; }
.ds-badge--purple   { background: var(--ds-purple-light);   color: #6d28d9; }
.ds-badge--neutral  { background: var(--ds-neutral-light);  color: #475569; }
.ds-badge--primary  { background: var(--ds-primary-light);  color: #1e40af; }

/* Dot indicator */
.ds-badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Status badges spécifiques */
.ds-status-active    { background: var(--ds-success-light); color: #166534; }
.ds-status-suspended { background: var(--ds-danger-light);  color: #991b1b; }
.ds-status-pending   { background: var(--ds-warning-light); color: #92400e; }
.ds-status-paid      { background: var(--ds-success-light); color: #166534; }
.ds-status-unpaid    { background: var(--ds-warning-light); color: #92400e; }
.ds-status-overdue   { background: var(--ds-danger-light);  color: #991b1b; }
.ds-status-cancelled { background: var(--ds-neutral-light); color: #475569; }
.ds-status-new       { background: var(--ds-info-light);    color: #3730a3; }

/* Pill tags */
.ds-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-font-xs);
    font-weight: 600;
    background: var(--ds-surface-2);
    color: var(--ds-text-secondary);
    border: 1px solid var(--ds-border);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 5 — CARTES KPI
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ds-space-5);
    margin-bottom: var(--ds-space-6);
}

.ds-kpi-card {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-5) var(--ds-space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-4);
    transition: var(--ds-transition-base);
    position: relative;
    overflow: hidden;
    box-shadow: var(--ds-shadow-xs);
}

.ds-kpi-card:hover {
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-2px);
}

.ds-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--ds-primary);
    border-radius: 0 0 0 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.ds-kpi-card:hover::before { opacity: 1; }

/* Couleurs de bordure gauche */
.ds-kpi-card--success::before { background: var(--ds-success);  opacity: 1; }
.ds-kpi-card--warning::before { background: var(--ds-warning);  opacity: 1; }
.ds-kpi-card--danger::before  { background: var(--ds-danger);   opacity: 1; }
.ds-kpi-card--info::before    { background: var(--ds-info);     opacity: 1; }
.ds-kpi-card--purple::before  { background: var(--ds-purple);   opacity: 1; }

.ds-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.ds-kpi-icon--primary  { background: var(--ds-primary-subtle); }
.ds-kpi-icon--success  { background: var(--ds-success-subtle); }
.ds-kpi-icon--warning  { background: var(--ds-warning-subtle); }
.ds-kpi-icon--danger   { background: var(--ds-danger-subtle);  }
.ds-kpi-icon--info     { background: var(--ds-info-subtle);    }
.ds-kpi-icon--purple   { background: var(--ds-purple-subtle);  }
.ds-kpi-icon--neutral  { background: var(--ds-neutral-light);  }

.ds-kpi-body { flex: 1; min-width: 0; }

.ds-kpi-label {
    font-size: var(--ds-font-xs);
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--ds-space-1);
}

.ds-kpi-value {
    font-size: var(--ds-font-xl);
    font-weight: 700;
    color: var(--ds-text-primary);
    line-height: 1.1;
    margin-bottom: var(--ds-space-1);
}

.ds-kpi-sub {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
}

/* Skeleton KPI */
.ds-kpi-card.is-loading .ds-kpi-value { visibility: hidden; }

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 6 — CARTES DE CONTENU
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
    overflow: hidden;
}

.ds-card--elevated {
    box-shadow: var(--ds-shadow-md);
}

.ds-card-header {
    padding: var(--ds-space-5) var(--ds-space-6);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
}

.ds-card-title {
    font-size: var(--ds-font-md);
    font-weight: 700;
    color: var(--ds-text-primary);
}

.ds-card-subtitle {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    margin-top: 2px;
}

.ds-card-body {
    padding: var(--ds-space-6);
}

.ds-card-footer {
    padding: var(--ds-space-4) var(--ds-space-6);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-1);
    display: flex;
    gap: var(--ds-space-3);
    align-items: center;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 7 — EN-TÊTES DE SECTION
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-4);
    padding: var(--ds-space-5) var(--ds-space-6);
    flex-wrap: wrap;
}

.ds-section-title {
    font-size: var(--ds-font-lg);
    font-weight: 700;
    color: var(--ds-text-primary);
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.ds-section-title-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ds-section-subtitle {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    margin-top: var(--ds-space-1);
}

.ds-section-actions {
    display: flex;
    gap: var(--ds-space-3);
    align-items: center;
    flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 8 — BOUTONS COMPLÉMENTAIRES
 * ───────────────────────────────────────────────────────────────────────────── */

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: var(--ds-font-sm);
    cursor: pointer;
    transition: var(--ds-transition-base);
    box-shadow: 0 2px 6px rgba(239,68,68,0.25);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 12px rgba(239,68,68,0.35);
    transform: translateY(-1px);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--ds-text-secondary);
    border: 1.5px solid var(--ds-border);
    padding: 8px 16px;
    border-radius: var(--ds-radius-md);
    font-weight: 500;
    font-size: var(--ds-font-sm);
    cursor: pointer;
    transition: var(--ds-transition-base);
}
.btn-ghost:hover {
    background: var(--ds-surface-2);
    border-color: var(--ds-border-strong);
    color: var(--ds-text-primary);
}

/* Icon button */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--ds-radius-md);
    border: 1.5px solid var(--ds-border);
    background: var(--ds-surface-0);
    color: var(--ds-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--ds-transition-fast);
}
.btn-icon:hover {
    background: var(--ds-surface-2);
    border-color: var(--ds-border-strong);
    color: var(--ds-text-primary);
}

/* Loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: ds-spin 0.6s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes ds-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Link button */
.btn-link {
    background: none;
    border: none;
    color: var(--ds-primary);
    font-weight: 500;
    font-size: var(--ds-font-sm);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--ds-transition-fast);
}
.btn-link:hover { color: var(--ds-primary-dark); }


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 9 — ALERTES & BANDEAUX
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-alert {
    padding: var(--ds-space-4) var(--ds-space-5);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-font-sm);
    display: flex;
    gap: var(--ds-space-3);
    align-items: flex-start;
    border-left: 4px solid transparent;
}

.ds-alert--success { background: var(--ds-success-subtle); border-color: var(--ds-success); color: #166534; }
.ds-alert--warning { background: var(--ds-warning-subtle); border-color: var(--ds-warning); color: #92400e; }
.ds-alert--danger  { background: var(--ds-danger-subtle);  border-color: var(--ds-danger);  color: #991b1b; }
.ds-alert--info    { background: var(--ds-info-subtle);    border-color: var(--ds-info);    color: #3730a3; }
.ds-alert--neutral { background: var(--ds-surface-2);      border-color: var(--ds-border-strong); color: var(--ds-text-secondary); }

.ds-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.ds-alert-body { flex: 1; }
.ds-alert-title { font-weight: 700; margin-bottom: var(--ds-space-1); }


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 10 — FORMULAIRES UNIFIÉS
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-5);
}

.ds-form-row {
    display: flex;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
}

.ds-form-row .ds-field { flex: 1; min-width: 160px; }

.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.ds-field label {
    font-size: var(--ds-font-sm);
    font-weight: 600;
    color: var(--ds-text-secondary);
    letter-spacing: -0.01em;
}

.ds-field .hint {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
    margin-top: -var(--ds-space-1);
}

.ds-field .field-error {
    font-size: var(--ds-font-xs);
    color: var(--ds-danger);
    font-weight: 500;
}

.ds-field input,
.ds-field select,
.ds-field textarea {
    height: 44px;
}
.ds-field textarea { height: auto; min-height: 88px; }

.ds-form-actions {
    display: flex;
    gap: var(--ds-space-3);
    justify-content: flex-end;
    padding-top: var(--ds-space-3);
    border-top: 1px solid var(--ds-border);
    flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 11 — MESSAGERIE
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-messages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-message-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4) var(--ds-space-5);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: var(--ds-transition-fast);
    border: 1px solid transparent;
    position: relative;
}
.ds-message-item:hover {
    background: var(--ds-surface-1);
    border-color: var(--ds-border);
}
.ds-message-item.unread {
    background: var(--ds-primary-subtle);
    border-color: rgba(37,99,235,0.12);
}

.ds-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ds-primary-light);
    color: var(--ds-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ds-font-sm);
    flex-shrink: 0;
}

.ds-message-content { flex: 1; min-width: 0; }
.ds-message-from {
    font-weight: 600;
    font-size: var(--ds-font-sm);
    color: var(--ds-text-primary);
}
.ds-message-subject {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ds-message-preview {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ds-message-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}
.ds-message-date {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
    white-space: nowrap;
}
.ds-unread-dot {
    width: 8px;
    height: 8px;
    background: var(--ds-primary);
    border-radius: 50%;
}

/* Thread */
.ds-thread {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4) 0;
}

.ds-thread-msg {
    max-width: 75%;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}
.ds-thread-msg.sent { align-self: flex-end; align-items: flex-end; }
.ds-thread-msg.received { align-self: flex-start; align-items: flex-start; }

.ds-thread-bubble {
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: 16px;
    font-size: var(--ds-font-sm);
    line-height: 1.5;
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
}
.ds-thread-msg.sent .ds-thread-bubble {
    background: var(--ds-primary);
    color: white;
    border-bottom-right-radius: 4px;
}
.ds-thread-msg.received .ds-thread-bubble {
    background: var(--ds-surface-2);
    color: var(--ds-text-primary);
    border-bottom-left-radius: 4px;
}

.ds-thread-meta {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
}

.ds-reply-box {
    border-top: 1px solid var(--ds-border);
    padding-top: var(--ds-space-4);
    display: flex;
    gap: var(--ds-space-3);
    align-items: flex-end;
}
.ds-reply-box textarea {
    flex: 1;
    min-height: 80px;
    border-radius: var(--ds-radius-md);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 12 — NAVIGATION ADMIN (ENRICHIE)
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ds-danger);
    color: white;
    border-radius: var(--ds-radius-pill);
    font-size: 10px;
    font-weight: 700;
    margin-left: var(--ds-space-1);
    line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 13 — ANIMATIONS
 * ───────────────────────────────────────────────────────────────────────────── */
@keyframes ds-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ds-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ds-success-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.ds-anim-fade-in  { animation: ds-fade-in 0.25s ease both; }
.ds-anim-slide-in { animation: ds-slide-in 0.25s ease both; }
.ds-anim-scale-in { animation: ds-scale-in 0.2s ease both; }

/* Staggered list animation */
.ds-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.ds-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.ds-stagger > *:nth-child(3)  { animation-delay: 80ms; }
.ds-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.ds-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.ds-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.ds-stagger > *:nth-child(7)  { animation-delay: 240ms; }
.ds-stagger > *:nth-child(8)  { animation-delay: 280ms; }
.ds-stagger > *:nth-child(9)  { animation-delay: 320ms; }
.ds-stagger > *:nth-child(10) { animation-delay: 360ms; }

/* Hover lift */
.ds-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ds-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-md);
}

/* Success feedback */
.ds-success-flash {
    animation: ds-success-pop 0.3s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 14 — RESPONSIVE
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ds-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .ds-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ds-kpi-card {
        padding: var(--ds-space-4);
    }
    .ds-kpi-value {
        font-size: var(--ds-font-lg);
    }
    .ds-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ds-table-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .ds-search-field {
        max-width: 100%;
        width: 100%;
    }
    .ds-table th,
    .ds-table td {
        padding: 10px var(--ds-space-3);
        font-size: var(--ds-font-xs);
    }
    .ds-thread-msg { max-width: 90%; }
    .ds-card-body { padding: var(--ds-space-4); }
    .ds-form-row { flex-direction: column; }
}

@media (max-width: 480px) {
    .ds-kpi-grid {
        grid-template-columns: 1fr;
    }
    .ds-table-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .ds-pagination { flex-wrap: wrap; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 15 — UTILITAIRES
 * ───────────────────────────────────────────────────────────────────────────── */
.ds-divider {
    border: none;
    border-top: 1px solid var(--ds-border);
    margin: var(--ds-space-5) 0;
}

.ds-spacer { flex: 1; }

.ds-flex { display: flex; }
.ds-flex-center { display: flex; align-items: center; justify-content: center; }
.ds-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ds-flex-gap-2 { gap: var(--ds-space-2); }
.ds-flex-gap-3 { gap: var(--ds-space-3); }
.ds-flex-gap-4 { gap: var(--ds-space-4); }
.ds-wrap { flex-wrap: wrap; }

.ds-text-xs   { font-size: var(--ds-font-xs);  }
.ds-text-sm   { font-size: var(--ds-font-sm);  }
.ds-text-base { font-size: var(--ds-font-base); }
.ds-text-muted    { color: var(--ds-text-muted);    }
.ds-text-secondary{ color: var(--ds-text-secondary); }
.ds-text-success  { color: var(--ds-success); }
.ds-text-warning  { color: var(--ds-warning); }
.ds-text-danger   { color: var(--ds-danger);  }
.ds-text-primary-color { color: var(--ds-primary); }

.ds-fw-600 { font-weight: 600; }
.ds-fw-700 { font-weight: 700; }

.ds-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Accessibilité */
.ds-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--ds-border-focus);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 16 — ADMIN SECTIONS (thème unifié)
 * ───────────────────────────────────────────────────────────────────────────── */

/* Remplacement des inline-styles dark du tableau de bord facturation */
.billing-org-block {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-5);
    margin-bottom: var(--ds-space-4);
    box-shadow: var(--ds-shadow-xs);
    transition: var(--ds-transition-base);
}
.billing-org-block:hover { box-shadow: var(--ds-shadow-md); }
.billing-org-name {
    font-size: var(--ds-font-md);
    font-weight: 700;
    color: var(--ds-text-primary);
}
.billing-org-meta {
    display: flex;
    gap: var(--ds-space-4);
    margin-top: var(--ds-space-2);
    flex-wrap: wrap;
}
.billing-meta-item {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
}
.billing-amount-block { text-align: right; }
.billing-amount-value {
    font-size: var(--ds-font-xl);
    font-weight: 700;
    color: var(--ds-primary);
}
.billing-amount-label {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
}
.billing-missing-price {
    font-size: var(--ds-font-sm);
    font-weight: 600;
    color: var(--ds-danger);
}
.billing-unpaid-alert {
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-warning-subtle);
    border-radius: var(--ds-radius-sm);
    margin-bottom: var(--ds-space-3);
    font-size: var(--ds-font-sm);
    color: #92400e;
    border: 1px solid var(--ds-warning-light);
}
.billing-no-invoices {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    margin-top: var(--ds-space-3);
    font-style: italic;
}

/* Stats grid dans billing (light) */
.billing-stats-mini {
    display: flex;
    gap: var(--ds-space-4);
    margin: var(--ds-space-4) 0;
    flex-wrap: wrap;
}
.billing-stat-item { text-align: center; }
.billing-stat-value {
    font-size: var(--ds-font-lg);
    font-weight: 700;
    color: var(--ds-text-primary);
}
.billing-stat-label {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
}

/* Config financière */
.fin-config-block {
    padding: var(--ds-space-4);
    background: var(--ds-surface-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    margin-bottom: var(--ds-space-4);
    font-size: var(--ds-font-sm);
}
.fin-config-title {
    font-size: var(--ds-font-sm);
    font-weight: 700;
    color: var(--ds-text-secondary);
    margin-bottom: var(--ds-space-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.fin-config-row {
    color: var(--ds-text-secondary);
    margin-bottom: var(--ds-space-1);
}
.fin-config-error {
    padding: var(--ds-space-4);
    background: var(--ds-danger-subtle);
    border: 1px solid var(--ds-danger-light);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-font-sm);
    color: #991b1b;
    margin-bottom: var(--ds-space-4);
}
.fin-config-missing {
    color: var(--ds-danger);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 17 — BILLING ORG CARDS (Admin facturation)
 * ───────────────────────────────────────────────────────────────────────────── */
.billing-org-block {
    background: var(--ds-surface-0);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-5);
    margin-bottom: var(--ds-space-4);
    box-shadow: var(--ds-shadow-sm);
    transition: box-shadow 0.2s ease;
}
.billing-org-block:hover {
    box-shadow: var(--ds-shadow-md);
}
.billing-org-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text-primary);
    margin-bottom: var(--ds-space-1);
}
.billing-org-meta {
    display: flex;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--ds-space-1);
}
.billing-meta-item {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
}
.billing-amount-block {
    text-align: right;
}
.billing-amount-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ds-primary);
    line-height: 1.2;
}
.billing-amount-label {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
    margin-top: 2px;
}
.billing-missing-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ds-danger);
}
.billing-stats-mini {
    display: flex;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    margin: var(--ds-space-4) 0;
    padding: var(--ds-space-4) 0;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}
.billing-stat-item {
    text-align: center;
    min-width: 80px;
}
.billing-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ds-text-primary);
}
.billing-stat-label {
    font-size: var(--ds-font-xs);
    color: var(--ds-text-muted);
    margin-top: 2px;
}
.billing-unpaid-alert {
    background: var(--ds-warning-subtle);
    border: 1px solid var(--ds-warning-light);
    color: #92400e;
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-2) var(--ds-space-3);
    font-size: var(--ds-font-sm);
    margin-bottom: var(--ds-space-3);
}
.billing-no-invoices {
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    margin-top: var(--ds-space-3);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION 18 — UTILITY CLASSES (CSS atomiques)
 * ───────────────────────────────────────────────────────────────────────────── */

/* Layout */
.ds-flex-between { display: flex; justify-content: space-between; align-items: flex-start; }
.ds-flex-center   { display: flex; align-items: center; gap: var(--ds-space-2); }
.ds-wrap          { flex-wrap: wrap; }
.ds-gap-2         { gap: var(--ds-space-2); }
.ds-gap-4         { gap: var(--ds-space-4); }

/* Typography weights & sizes */
.ds-fw-500  { font-weight: 500; }
.ds-fw-600  { font-weight: 600; }
.ds-fw-700  { font-weight: 700; }
.ds-fw-800  { font-weight: 800; }
.ds-text-xs { font-size: var(--ds-font-xs); }
.ds-text-sm { font-size: var(--ds-font-sm); }

/* Semantic text colours */
.ds-text-primary   { color: var(--ds-text-primary); }
.ds-text-secondary { color: var(--ds-text-secondary); }
.ds-text-muted     { color: var(--ds-text-muted); }
.ds-text-danger    { color: var(--ds-danger); }
.ds-text-success   { color: var(--ds-success); }
.ds-text-warning   { color: var(--ds-warning); }

/* Table cell helpers */
table.ds-table td.muted    { color: var(--ds-text-muted); font-size: var(--ds-font-sm); }
table.ds-table td.center   { text-align: center; }
table.ds-table td.mono     { font-family: var(--ds-font-mono); font-size: var(--ds-font-sm); }
table.ds-table td.td-actions { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Mono helper outside tables */
.mono { font-family: var(--ds-font-mono); font-size: var(--ds-font-sm); }

/* Buttons — variants not already in styles.css */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-secondary);
    padding: 8px 16px;
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover { background: var(--ds-surface-2); border-color: var(--ds-border-strong); }
.btn-small { padding: 4px 10px !important; font-size: 0.78rem !important; border-radius: 6px !important; }
.btn-success {
    background: var(--ds-success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 6px 14px;
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-success:hover { background: #bbf7d0; }
.btn-danger {
    background: var(--ds-danger-light);
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 6px 14px;
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-danger:hover { background: #fecaca; }

/* data-table alias (used in contrat/tarifs) */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ds-font-sm);
}
.data-table th {
    background: var(--ds-surface-2);
    color: var(--ds-text-secondary);
    font-weight: 600;
    font-size: var(--ds-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 2px solid var(--ds-border);
}
.data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text-primary);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td      { background: var(--ds-surface-1); }

/* Admin section content background — enforce light surface */
.admin-section.active {
    background: var(--ds-surface-1);
    border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl);
    min-height: 400px;
}