/**
 * ============================================
 * SYSTÈME DE DESIGN VURTO.AI - COMPOSANTS CSS
 * ============================================
 * 
 * Ce fichier contient tous les styles pour les composants réutilisables.
 * Tous les styles utilisent les variables définies dans design-system-variables.css
 * 
 * IMPORTANT : Ne modifiez pas directement les couleurs ici, utilisez les variables CSS.
 */

/* ============================================
   CORRECTIF GLOBAL — décidé le 24/08/2026
   ============================================
   Le bundle vendor (style.bundle.css) fixe .form-check-input:checked en dur sur
   #1b84ff (bleu Metronic), sans passer par une variable --bs-* : aucune checkbox/
   radio/switch native de l'app n'était donc en #6366f1 malgré la décision.
*/
.form-check-input:checked {
    background-color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}

/* Carte générique Bootstrap (.card brut, sans .cockpit-results ni .ds-card) — décidé
   le 24/08/2026 : radius 16px, bordure 1px #ececf1, hover shadow-md + translateY(-2px).
   Sans ce correctif, .card retombe sur les valeurs vendor (radius 10px, bordure
   #F1F1F4, ombre quasi invisible 0px 3px 4px rgba(0,0,0,.03), aucun hover) — c'est
   ce qui rendait les cartes "plates"/sans relief sur les pages qui n'utilisent pas
   .cockpit-results (ex. Comparaison SEO ↔ LLM, Trafic & ROI, Documentation...). */
.card {
    /* !important nécessaire : la plupart des .card du repo sont combinées avec des
       utilitaires Bootstrap !important (.border-0, .border, .border-gray-300,
       .shadow-sm, .shadow-lg...) qui écraseraient sinon silencieusement ce correctif. */
    border: 1px solid #ececf1 !important;
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-sm) !important;
    transition: box-shadow var(--ds-transition-base), transform var(--ds-transition-base);
}
.card:hover {
    box-shadow: var(--ds-shadow-md) !important;
    transform: translateY(-2px);
}

/* ============================================
   BOUTONS
   ============================================
*/

/* Bouton de base */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-spacing-sm);
    padding: 0.625rem 1.25rem;
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-semibold);
    line-height: var(--ds-line-height-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-btn);
    transition: all var(--ds-transition-base);
    position: relative;
    overflow: hidden;
}

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

.ds-btn:disabled,
.ds-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Effet de brillance au survol */
.ds-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--ds-transition-slower);
}

.ds-btn:hover::before {
    left: 100%;
}

/* Bouton primaire */
.ds-btn-primary {
    background: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-secondary) 100%);
    color: var(--ds-text-inverse);
    border-color: transparent;
    box-shadow: var(--ds-shadow-primary);
}

.ds-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
    color: var(--ds-text-inverse);
}

.ds-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--ds-shadow-md);
}

/* Bouton secondaire (outline) */
.ds-btn-secondary {
    background: transparent;
    color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}

.ds-btn-secondary:hover {
    background: var(--ds-color-primary);
    color: var(--ds-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-md);
}

/* Bouton success */
.ds-btn-success {
    background: linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-success-dark) 100%);
    color: var(--ds-text-inverse);
    border-color: transparent;
    box-shadow: var(--ds-shadow-success);
}

.ds-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
    color: var(--ds-text-inverse);
}

/* Bouton warning */
.ds-btn-warning {
    background: linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-warning-dark) 100%);
    color: var(--ds-text-inverse);
    border-color: transparent;
    box-shadow: var(--ds-shadow-warning);
}

.ds-btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.4);
    color: var(--ds-text-inverse);
}

/* Bouton danger */
.ds-btn-danger {
    background: linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-danger-dark) 100%);
    color: var(--ds-text-inverse);
    border-color: transparent;
    box-shadow: var(--ds-shadow-danger);
}

.ds-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.4);
    color: var(--ds-text-inverse);
}

/* Bouton info */
.ds-btn-info {
    background: linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-info-dark) 100%);
    color: var(--ds-text-inverse);
    border-color: transparent;
    box-shadow: var(--ds-shadow-info);
}

.ds-btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(6, 182, 212, 0.4);
    color: var(--ds-text-inverse);
}

/* Bouton light (fond clair) */
.ds-btn-light-primary {
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary);
    border-color: var(--ds-color-primary-200);
}

.ds-btn-light-primary:hover {
    background: var(--ds-color-primary);
    color: var(--ds-text-inverse);
    border-color: var(--ds-color-primary);
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-md);
}

.ds-btn-light-success {
    background: var(--ds-color-success-50);
    color: var(--ds-color-success);
    border-color: var(--ds-color-success-200);
}

.ds-btn-light-success:hover {
    background: var(--ds-color-success);
    color: var(--ds-text-inverse);
    border-color: var(--ds-color-success);
}

.ds-btn-light-warning {
    background: var(--ds-color-warning-50);
    color: var(--ds-color-warning);
    border-color: var(--ds-color-warning-200);
}

.ds-btn-light-warning:hover {
    background: var(--ds-color-warning);
    color: var(--ds-text-inverse);
    border-color: var(--ds-color-warning);
}

.ds-btn-light-danger {
    background: var(--ds-color-danger-50);
    color: var(--ds-color-danger);
    border-color: var(--ds-color-danger-200);
}

.ds-btn-light-danger:hover {
    background: var(--ds-color-danger);
    color: var(--ds-text-inverse);
    border-color: var(--ds-color-danger);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.ds-btn-light-info {
    background: var(--ds-color-info-50);
    color: var(--ds-color-info);
    border-color: var(--ds-color-info-200);
}

.ds-btn-light-info:hover {
    background: var(--ds-color-info);
    color: var(--ds-text-inverse);
    border-color: var(--ds-color-info);
}

/* Bouton light neutre (équivalent Bootstrap btn-light) */
.ds-btn-light {
    background: var(--ds-bg-secondary);
    color: var(--ds-text-secondary);
    border-color: var(--ds-border-color);
}

.ds-btn-light:hover {
    background: var(--ds-bg-tertiary);
    color: var(--ds-text-primary);
    border-color: var(--ds-border-color-dark);
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-md);
}

/* Tailles de boutons */
.ds-btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--ds-font-size-xs);
    border-radius: var(--ds-radius-sm);
}

.ds-btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--ds-font-size-base);
    border-radius: var(--ds-radius-lg);
}

.ds-btn-xl {
    padding: 1rem 2rem;
    font-size: var(--ds-font-size-lg);
    border-radius: var(--ds-radius-lg);
}

/* Bouton avec icône uniquement */
.ds-btn-icon {
    padding: 0.625rem;
    width: 2.5rem;
    height: 2.5rem;
}

.ds-btn-icon-sm {
    padding: 0.5rem;
    width: 2rem;
    height: 2rem;
}

.ds-btn-icon-lg {
    padding: 0.875rem;
    width: 3rem;
    height: 3rem;
}

/* ============================================
   BADGES / INDICATEURS
   ============================================
*/

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-spacing-xs);
    padding: 0.25rem 0.625rem;
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--ds-radius-full);
    transition: all var(--ds-transition-fast);
}

.ds-badge-primary {
    background: var(--ds-color-primary-100);
    color: var(--ds-color-primary-700);
    border: 1px solid var(--ds-color-primary-200);
}

.ds-badge-success {
    background: var(--ds-color-success-100);
    color: var(--ds-color-success-700);
    border: 1px solid var(--ds-color-success-200);
}

.ds-badge-warning {
    background: var(--ds-color-warning-100);
    color: var(--ds-color-warning-700);
    border: 1px solid var(--ds-color-warning-200);
}

.ds-badge-danger {
    background: var(--ds-color-danger-100);
    color: var(--ds-color-danger-700);
    border: 1px solid var(--ds-color-danger-200);
}

.ds-badge-info {
    background: var(--ds-color-info-100);
    color: var(--ds-color-info-700);
    border: 1px solid var(--ds-color-info-200);
}

.ds-badge-secondary {
    background: var(--ds-color-secondary-100);
    color: var(--ds-color-secondary-700);
    border: 1px solid var(--ds-color-secondary-200);
}

/* Badge avec fond solide */
.ds-badge-solid-primary {
    background: var(--ds-color-primary);
    color: var(--ds-text-inverse);
}

.ds-badge-solid-success {
    background: var(--ds-color-success);
    color: var(--ds-text-inverse);
}

.ds-badge-solid-warning {
    background: var(--ds-color-warning);
    color: var(--ds-text-inverse);
}

.ds-badge-solid-danger {
    background: var(--ds-color-danger);
    color: var(--ds-text-inverse);
}

.ds-badge-solid-info {
    background: var(--ds-color-info);
    color: var(--ds-text-inverse);
}

/* Tailles de badges */
.ds-badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

.ds-badge-lg {
    padding: 0.375rem 0.875rem;
    font-size: var(--ds-font-size-sm);
}

/* ============================================
   ALERTES / MESSAGES
   ============================================
*/

.ds-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-spacing-md);
    padding: var(--ds-spacing-md) var(--ds-spacing-lg);
    margin-bottom: var(--ds-spacing-md);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

.ds-alert-dismissible {
    padding-right: 3rem;
}

.ds-alert-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
}

.ds-alert-content {
    flex: 1;
    min-width: 0;
}

.ds-alert-title {
    font-size: var(--ds-font-size-base);
    font-weight: var(--ds-font-weight-semibold);
    margin-bottom: var(--ds-spacing-xs);
}

.ds-alert-message {
    font-size: var(--ds-font-size-sm);
    line-height: var(--ds-line-height-relaxed);
}

.ds-alert-close {
    position: absolute;
    top: var(--ds-spacing-md);
    right: var(--ds-spacing-md);
    padding: var(--ds-spacing-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--ds-transition-fast);
}

.ds-alert-close:hover {
    opacity: 1;
}

/* Variantes d'alertes */
.ds-alert-success {
    background: var(--ds-color-success-50);
    border-color: var(--ds-color-success-200);
    color: var(--ds-color-success-800);
}

.ds-alert-success .ds-alert-icon {
    color: var(--ds-color-success);
}

.ds-alert-error,
.ds-alert-danger {
    background: var(--ds-color-danger-50);
    border-color: var(--ds-color-danger-200);
    color: var(--ds-color-danger-800);
}

.ds-alert-error .ds-alert-icon,
.ds-alert-danger .ds-alert-icon {
    color: var(--ds-color-danger);
}

.ds-alert-warning {
    background: var(--ds-color-warning-50);
    border-color: var(--ds-color-warning-200);
    color: var(--ds-color-warning-800);
}

.ds-alert-warning .ds-alert-icon {
    color: var(--ds-color-warning);
}

.ds-alert-info {
    background: var(--ds-color-info-50);
    border-color: var(--ds-color-info-200);
    color: var(--ds-color-info-800);
}

.ds-alert-info .ds-alert-icon {
    color: var(--ds-color-info);
}

/* ============================================
   CARTES / CARDS
   ============================================
*/

.ds-card {
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    transition: all var(--ds-transition-base);
}

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

.ds-card-header {
    padding: var(--ds-spacing-lg);
    border-bottom: 1px solid var(--ds-border-color-light);
    background: var(--ds-bg-secondary);
}

.ds-card-title {
    font-size: var(--ds-font-size-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-primary);
    margin: 0;
}

.ds-card-body {
    padding: var(--ds-spacing-lg);
}

.ds-card-footer {
    padding: var(--ds-spacing-lg);
    border-top: 1px solid var(--ds-border-color-light);
    background: var(--ds-bg-secondary);
}

/* ============================================
   RANGÉES DE KPI (STAT ROW)
   ============================================
   Rangée compacte de mini-cartes chiffrées : icône + valeur + label.
   Remplace les gros blocs card-body pleine hauteur et les cartes chiffre isolées.
*/

.ds-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ds-spacing-md);
    margin-bottom: var(--ds-spacing-xl);
}

.ds-kpi-card {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-md);
    padding: var(--ds-spacing-md) var(--ds-spacing-lg);
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-kpi);
    box-shadow: var(--ds-shadow-sm);
    transition: all var(--ds-transition-base);
}

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

.ds-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-md);
}

.ds-kpi-icon i {
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
}

.ds-kpi-icon.ds-kpi-icon-primary { background: var(--ds-color-primary-100); color: var(--ds-color-primary); }
.ds-kpi-icon.ds-kpi-icon-secondary { background: var(--ds-color-secondary-100); color: var(--ds-color-secondary); }
.ds-kpi-icon.ds-kpi-icon-success { background: var(--ds-color-success-100); color: var(--ds-color-success); }
.ds-kpi-icon.ds-kpi-icon-warning { background: var(--ds-color-warning-100); color: var(--ds-color-warning); }
.ds-kpi-icon.ds-kpi-icon-danger { background: var(--ds-color-danger-100); color: var(--ds-color-danger); }
.ds-kpi-icon.ds-kpi-icon-info { background: var(--ds-color-info-100); color: var(--ds-color-info); }

.ds-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-kpi-value {
    font-size: var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-primary);
    line-height: var(--ds-line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-kpi-label {
    font-size: var(--ds-font-size-xs);
    color: var(--ds-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-weight: var(--ds-font-weight-semibold);
    border-radius: var(--ds-radius-full);
    flex-shrink: 0;
}

.ds-kpi-trend.ds-kpi-trend-up { background: var(--ds-color-success-100); color: var(--ds-color-success-700); }
.ds-kpi-trend.ds-kpi-trend-down { background: var(--ds-color-danger-100); color: var(--ds-color-danger-700); }

/* Version compacte (padding réduit, pour tableaux de bord très denses) */
.ds-kpi-row-sm .ds-kpi-card {
    padding: 0.75rem var(--ds-spacing-md);
    gap: var(--ds-spacing-sm);
}

.ds-kpi-row-sm .ds-kpi-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.ds-kpi-row-sm .ds-kpi-value {
    font-size: var(--ds-font-size-lg);
}

/* ============================================
   CARTES DE NAVIGATION (NAV CARD)
   ============================================
   Grille de tuiles-liens colorées (ex : accueil Administration).
*/

.ds-nav-section {
    margin-bottom: var(--ds-spacing-xl);
}

.ds-nav-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ds-font-size-base);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-primary);
    margin-bottom: var(--ds-spacing-lg);
    padding-bottom: var(--ds-spacing-sm);
    border-bottom: 1px solid var(--ds-border-color-light);
}

.ds-nav-section-title i {
    font-size: 1.25rem;
    color: var(--ds-text-tertiary);
}

.ds-nav-card {
    background: var(--ds-bg-primary);
    border-radius: var(--ds-radius-lg);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--ds-border-color-light);
    border-left: 4px solid transparent;
    transition: all var(--ds-transition-base);
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
}

.ds-nav-card:hover {
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.ds-nav-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--ds-spacing-md);
    flex-shrink: 0;
}

.ds-nav-card-icon i {
    font-size: 1.625rem;
    line-height: 1;
    color: inherit;
}

.ds-nav-card-content h6 {
    font-size: var(--ds-font-size-base);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-primary);
    margin-bottom: 0.25rem;
}

.ds-nav-card-content p {
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-muted);
    margin: 0;
}

/* Variantes de couleur — tokens du design system uniquement */
.ds-nav-card-primary { border-left-color: var(--ds-color-primary); }
.ds-nav-card-primary .ds-nav-card-icon { background: var(--ds-color-primary-100); color: var(--ds-color-primary); }

.ds-nav-card-secondary { border-left-color: var(--ds-color-secondary); }
.ds-nav-card-secondary .ds-nav-card-icon { background: var(--ds-color-secondary-100); color: var(--ds-color-secondary); }

.ds-nav-card-success { border-left-color: var(--ds-color-success); }
.ds-nav-card-success .ds-nav-card-icon { background: var(--ds-color-success-100); color: var(--ds-color-success); }

.ds-nav-card-warning { border-left-color: var(--ds-color-warning); }
.ds-nav-card-warning .ds-nav-card-icon { background: var(--ds-color-warning-100); color: var(--ds-color-warning); }

.ds-nav-card-danger { border-left-color: var(--ds-color-danger); }
.ds-nav-card-danger .ds-nav-card-icon { background: var(--ds-color-danger-100); color: var(--ds-color-danger); }

.ds-nav-card-info { border-left-color: var(--ds-color-info); }
.ds-nav-card-info .ds-nav-card-icon { background: var(--ds-color-info-100); color: var(--ds-color-info); }

.ds-nav-card-pink { border-left-color: var(--ds-color-pink); }
.ds-nav-card-pink .ds-nav-card-icon { background: rgba(236, 72, 153, 0.1); color: var(--ds-color-pink); }

.ds-nav-card-teal { border-left-color: var(--ds-color-teal); }
.ds-nav-card-teal .ds-nav-card-icon { background: rgba(20, 184, 166, 0.1); color: var(--ds-color-teal); }

/* ============================================
   TABLEAUX
   ============================================
*/

.ds-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}

.ds-table thead {
    background: var(--ds-bg-secondary);
}

.ds-table thead th {
    padding: var(--ds-spacing-md) var(--ds-spacing-xl);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-secondary);
    text-align: left;
    border-bottom: 2px solid var(--ds-border-color);
}

.ds-table tbody tr {
    transition: background-color var(--ds-transition-fast);
}

.ds-table tbody tr:hover {
    background: var(--ds-bg-secondary);
}

.ds-table tbody td {
    padding: var(--ds-spacing-md) var(--ds-spacing-xl);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-primary);
    border-bottom: 1px solid var(--ds-border-color-light);
    vertical-align: middle;
}

.ds-table tbody tr:last-child td {
    border-bottom: none;
}

/* Respiration des cellules au bord d'un cadre — toutes pages.
   Metronic retire le padding des 1re et dernière cellules (.table:not(.table-bordered)
   td:first-child, .table.gs-0 …), ce qui suppose un tableau posé dans un card-body
   paddé. Dès que le tableau porte son propre cadre (.ds-table) ou touche le bord de
   la carte (card-body p-0, table-responsive enfant direct de .card), le texte colle
   au trait. Spécificité volontairement > règles Metronic (0,3,1), sans !important :
   les utilitaires ps-* / pe-* et les cartes mobiles (data-mobile-cards) gardent la main.
   Les tableaux avec un gs-N explicite (N ≠ 0) conservent leur gouttière. */
.ds-table.ds-table.ds-table:not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :first-child,
.ds-table.ds-table.ds-table.gs-0 > :not(caption) > tr > :first-child,
.card-body.p-0.p-0 > .table:not(.ds-table):not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :first-child,
.card-body.p-0.p-0 > .table.gs-0:not(.ds-table) > :not(caption) > tr > :first-child,
.card-body.p-0.p-0 > .table-responsive > .table:not(.ds-table):not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :first-child,
.card-body.p-0.p-0 > .table-responsive > .table.gs-0:not(.ds-table) > :not(caption) > tr > :first-child,
.card.card > .table-responsive > .table:not(.ds-table):not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :first-child,
.card.card > .table-responsive > .table.gs-0:not(.ds-table) > :not(caption) > tr > :first-child {
    padding-left: var(--ds-table-edge-padding, var(--ds-spacing-md));
}
.ds-table.ds-table.ds-table:not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :last-child,
.ds-table.ds-table.ds-table.gs-0 > :not(caption) > tr > :last-child,
.card-body.p-0.p-0 > .table:not(.ds-table):not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :last-child,
.card-body.p-0.p-0 > .table.gs-0:not(.ds-table) > :not(caption) > tr > :last-child,
.card-body.p-0.p-0 > .table-responsive > .table:not(.ds-table):not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :last-child,
.card-body.p-0.p-0 > .table-responsive > .table.gs-0:not(.ds-table) > :not(caption) > tr > :last-child,
.card.card > .table-responsive > .table:not(.ds-table):not([class^="gs-"]):not([class*=" gs-"]) > :not(caption) > tr > :last-child,
.card.card > .table-responsive > .table.gs-0:not(.ds-table) > :not(caption) > tr > :last-child {
    padding-right: var(--ds-table-edge-padding, var(--ds-spacing-md));
}

/* Tableau avec lignes alternées */
.ds-table-striped tbody tr:nth-child(even) {
    background: var(--ds-bg-secondary);
}

/* Tableau compact */
.ds-table-sm thead th,
.ds-table-sm tbody td {
    padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    font-size: var(--ds-font-size-xs);
}

/* ============================================
   MENUS DÉROULANTS / DROPDOWNS
   ============================================
*/

.ds-dropdown {
    position: relative;
    display: inline-block;
}

.ds-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--ds-spacing-xs));
    left: 0;
    min-width: 200px;
    max-width: 400px;
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xl);
    z-index: var(--ds-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--ds-transition-base);
    padding: var(--ds-spacing-sm);
}

.ds-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ds-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-sm);
    padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-primary);
    text-decoration: none;
    border-radius: var(--ds-radius-md);
    transition: all var(--ds-transition-fast);
    cursor: pointer;
}

.ds-dropdown-item:hover {
    background: var(--ds-bg-secondary);
    color: var(--ds-color-primary);
    transform: translateX(4px);
}

.ds-dropdown-item.danger {
    color: var(--ds-color-danger);
}

.ds-dropdown-item.danger:hover {
    background: var(--ds-color-danger-50);
    color: var(--ds-color-danger);
}

.ds-dropdown-divider {
    height: 1px;
    margin: var(--ds-spacing-sm) 0;
    background: var(--ds-border-color);
}

.ds-dropdown-header {
    padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-tertiary);
}

/* ============================================
   FILTRES COMPACTS (COMPACT FILTERS)
   ============================================
   Filtres avec checkboxes multiples, recherche et compteur
*/

.ds-filter-container {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-sm);
    flex-wrap: wrap;
}

.ds-filter-dropdown {
    position: relative;
    display: inline-block;
}

.ds-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-primary);
    cursor: pointer;
    transition: all var(--ds-transition-base);
    white-space: nowrap;
}

.ds-filter-btn:hover {
    background: var(--ds-bg-secondary);
    border-color: var(--ds-border-color-dark);
}

.ds-filter-btn.active {
    background: var(--ds-color-primary-50);
    border-color: var(--ds-color-primary);
    color: var(--ds-color-primary-700);
}

.ds-filter-btn.active .ds-filter-icon {
    color: var(--ds-color-primary);
}

.ds-filter-icon {
    color: var(--ds-text-tertiary);
    transition: color var(--ds-transition-fast);
}

.ds-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ds-color-primary);
    color: var(--ds-text-inverse);
    border-radius: var(--ds-radius-full);
    font-size: 0.7rem;
    font-weight: var(--ds-font-weight-semibold);
}

.ds-filter-btn.active .ds-filter-count {
    background: var(--ds-color-primary-700);
}

.ds-filter-menu {
    position: absolute;
    top: calc(100% + var(--ds-spacing-sm));
    left: 0;
    min-width: 320px;
    max-width: 400px;
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xl);
    z-index: var(--ds-z-dropdown);
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--ds-transition-base);
    animation: ds-fadeInUp 0.2s ease;
}

@keyframes ds-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ds-filter-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ds-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ds-border-color-light);
}

.ds-filter-header-title {
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-primary);
}

.ds-filter-actions {
    display: flex;
    gap: var(--ds-spacing-sm);
    font-size: var(--ds-font-size-xs);
}

.ds-filter-action {
    color: var(--ds-color-primary);
    text-decoration: none;
    font-weight: var(--ds-font-weight-medium);
    transition: color var(--ds-transition-fast);
}

.ds-filter-action:hover {
    color: var(--ds-color-primary-dark);
    text-decoration: underline;
}

.ds-filter-search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ds-border-color-light);
}

.ds-filter-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-font-size-sm);
    font-family: var(--ds-font-family);
    color: var(--ds-text-primary);
    background: var(--ds-bg-primary);
    outline: none;
    transition: border-color var(--ds-transition-fast);
}

.ds-filter-search-input:focus {
    border-color: var(--ds-border-color-focus);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ds-filter-search-input::placeholder {
    color: var(--ds-text-muted);
}

.ds-filter-options {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ds-spacing-sm) 0;
}

/* Scrollbar personnalisée pour les options */
.ds-filter-options::-webkit-scrollbar {
    width: 6px;
}

.ds-filter-options::-webkit-scrollbar-track {
    background: var(--ds-bg-secondary);
    border-radius: 3px;
}

.ds-filter-options::-webkit-scrollbar-thumb {
    background: var(--ds-border-color-dark);
    border-radius: 3px;
}

.ds-filter-options::-webkit-scrollbar-thumb:hover {
    background: var(--ds-text-tertiary);
}

.ds-filter-option {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-spacing-sm);
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color var(--ds-transition-fast);
}

.ds-filter-option:hover {
    background: var(--ds-bg-secondary);
}

.ds-filter-option.hidden {
    display: none;
}

.ds-filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--ds-color-primary);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--ds-border-color-dark);
    background: var(--ds-bg-primary);
    position: relative;
    transition: all var(--ds-transition-fast);
}

.ds-filter-option input[type="checkbox"]:checked {
    background: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}

.ds-filter-option input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ds-text-inverse);
    font-size: 0.75rem;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
}

.ds-filter-option input[type="checkbox"]:hover {
    border-color: var(--ds-color-primary);
}

.ds-filter-option-label {
    flex: 1;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-primary);
    line-height: var(--ds-line-height-normal);
    user-select: none;
}

.ds-filter-option:hover .ds-filter-option-label {
    color: var(--ds-color-primary);
}

.ds-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--ds-color-danger-50);
    border: 1px solid var(--ds-color-danger-200);
    border-radius: 50%;
    color: var(--ds-color-danger);
    cursor: pointer;
    transition: all var(--ds-transition-base);
    flex-shrink: 0;
    font-size: var(--ds-font-size-xs);
    line-height: 1;
    position: relative;
}

.ds-filter-reset::before {
    content: '×';
    font-size: 1.2rem;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ds-filter-reset:hover {
    background: var(--ds-color-danger);
    border-color: var(--ds-color-danger);
    color: var(--ds-text-inverse);
    transform: scale(1.1);
}

.ds-filter-reset.hidden {
    display: none;
}


/* Bouton de fermeture intégré au filtre (à côté du bouton) */
.ds-filter-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--ds-color-danger-50);
    border: 1px solid var(--ds-color-danger-200);
    border-radius: 50%;
    color: var(--ds-color-danger);
    cursor: pointer;
    transition: all var(--ds-transition-base);
    flex-shrink: 0;
    font-size: var(--ds-font-size-xs);
    line-height: 1;
}

.ds-filter-close-btn:hover {
    background: var(--ds-color-danger);
    border-color: var(--ds-color-danger);
    color: var(--ds-text-inverse);
    transform: scale(1.1);
}

.ds-filter-close-btn::before {
    content: '×';
    font-size: 1.2rem;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
}

/* Style pour le filtre avec bouton de fermeture intégré */
.ds-filter-dropdown.has-close-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-spacing-xs);
}

.ds-filter-dropdown.has-close-btn .ds-filter-close-btn {
    margin-left: var(--ds-spacing-xs);
}

/* Version compacte des filtres */
.ds-filter-compact .ds-filter-btn {
    padding: 0.375rem 0.75rem;
    font-size: var(--ds-font-size-xs);
    gap: 0.3rem;
}

.ds-filter-compact .ds-filter-icon {
    font-size: 0.875rem;
}

.ds-filter-compact .ds-filter-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.65rem;
}

.ds-filter-compact .ds-filter-menu {
    min-width: 280px;
    max-width: 350px;
}

.ds-filter-compact .ds-filter-header {
    padding: 0.625rem 0.875rem;
    font-size: 0.7rem;
}

.ds-filter-compact .ds-filter-search {
    padding: 0.5rem 0.875rem;
}

.ds-filter-compact .ds-filter-search-input {
    padding: 0.375rem 0.625rem;
    font-size: var(--ds-font-size-xs);
}

.ds-filter-compact .ds-filter-options {
    max-height: 240px;
    padding: 0.375rem 0;
}

.ds-filter-compact .ds-filter-option {
    padding: 0.5rem 0.875rem;
    gap: 0.5rem;
}

.ds-filter-compact .ds-filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.ds-filter-compact .ds-filter-option-label {
    font-size: var(--ds-font-size-xs);
}

.ds-filter-compact .ds-filter-action {
    font-size: 0.7rem;
}

.ds-filter-compact .ds-filter-reset {
    width: 20px;
    height: 20px;
}

.ds-filter-compact .ds-filter-reset::before {
    font-size: 1rem;
}

/* Version très compacte (mini) */
.ds-filter-mini .ds-filter-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    gap: 0.25rem;
}

.ds-filter-mini .ds-filter-icon {
    font-size: 0.75rem;
}

.ds-filter-mini .ds-filter-count {
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 0.6rem;
}

.ds-filter-mini .ds-filter-menu {
    min-width: 240px;
    max-width: 300px;
}

.ds-filter-mini .ds-filter-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.65rem;
}

.ds-filter-mini .ds-filter-search {
    padding: 0.375rem 0.75rem;
}

.ds-filter-mini .ds-filter-search-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

.ds-filter-mini .ds-filter-options {
    max-height: 200px;
    padding: 0.25rem 0;
}

.ds-filter-mini .ds-filter-option {
    padding: 0.375rem 0.75rem;
    gap: 0.375rem;
}

.ds-filter-mini .ds-filter-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

.ds-filter-mini .ds-filter-option-label {
    font-size: 0.7rem;
}

.ds-filter-mini .ds-filter-action {
    font-size: 0.65rem;
}

.ds-filter-mini .ds-filter-reset {
    width: 18px;
    height: 18px;
}

.ds-filter-mini .ds-filter-reset::before {
    font-size: 0.9rem;
}

/* ============================================
   SÉLECTEUR MULTIPLE (MULTI-SELECT)
   ============================================
   Dropdown avec sélection multiple et recherche
*/

.ds-multi-select {
    position: relative;
    width: 100%;
}

.ds-multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ds-bg-secondary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-full);
    cursor: pointer;
    transition: all var(--ds-transition-base);
    min-height: 44px;
}

.ds-multi-select-trigger:hover {
    background: var(--ds-bg-tertiary);
    border-color: var(--ds-border-color-dark);
}

.ds-multi-select.is-open .ds-multi-select-trigger {
    border-color: var(--ds-border-color-focus);
    background: var(--ds-bg-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ds-multi-select-trigger-content {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    gap: var(--ds-spacing-sm);
}

.ds-multi-select-placeholder {
    color: var(--ds-text-muted);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
}

.ds-multi-select-selection {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ds-multi-select-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-secondary) 100%);
    color: var(--ds-text-inverse);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-semibold);
}

.ds-multi-select-label {
    color: var(--ds-text-primary);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
}

/* Quand le badge count est présent, le label ne doit pas afficher le nombre */
.ds-multi-select-selection:has(.ds-multi-select-count) .ds-multi-select-label {
    /* Le label affiche juste "éléments sélectionnés" sans le nombre */
}

/* Variante : afficher le nombre uniquement dans le badge, pas dans le texte */
.ds-multi-select-label-with-count::after {
    content: ' éléments sélectionnés';
}

/* Variante : afficher le nombre uniquement dans le texte, pas dans le badge */
.ds-multi-select-count.hidden {
    display: none;
}

.ds-multi-select-arrow {
    color: var(--ds-text-tertiary);
    transition: transform var(--ds-transition-base);
    flex-shrink: 0;
}

.ds-multi-select.is-open .ds-multi-select-arrow {
    transform: rotate(180deg);
    color: var(--ds-color-primary);
}

.ds-multi-select-menu {
    position: absolute;
    top: calc(100% + var(--ds-spacing-xs));
    left: 0;
    right: 0;
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-xl);
    z-index: var(--ds-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--ds-transition-base);
}

.ds-multi-select.is-open .ds-multi-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ds-multi-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ds-border-color-light);
    background: var(--ds-bg-secondary);
    border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
}

.ds-multi-select-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-sm);
}

.ds-multi-select-action {
    display: inline-flex;
    align-items: center;
    color: var(--ds-color-primary);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-medium);
    text-decoration: none;
    transition: color var(--ds-transition-fast);
}

.ds-multi-select-action:hover {
    color: var(--ds-color-primary-dark);
}

.ds-multi-select-separator {
    color: var(--ds-border-color-dark);
    font-size: var(--ds-font-size-xs);
}

.ds-multi-select-search {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--ds-border-color-light);
    gap: var(--ds-spacing-sm);
}

.ds-multi-select-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--ds-font-size-sm);
    font-family: var(--ds-font-family);
    color: var(--ds-text-primary);
}

.ds-multi-select-search-input::placeholder {
    color: var(--ds-text-muted);
}

.ds-multi-select-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: var(--ds-bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--ds-transition-fast);
    color: var(--ds-text-tertiary);
}

.ds-multi-select-search-clear:hover {
    background: var(--ds-bg-tertiary);
    color: var(--ds-text-primary);
}

.ds-multi-select-options {
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ds-spacing-sm) 0;
    max-height: 280px;
}

.ds-multi-select-option {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background-color var(--ds-transition-fast);
    gap: var(--ds-spacing-sm);
}

.ds-multi-select-option:hover {
    background: var(--ds-bg-secondary);
}

.ds-multi-select-option.is-hidden {
    display: none;
}

.ds-multi-select-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.ds-multi-select-checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--ds-border-color-dark);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-bg-primary);
    transition: all var(--ds-transition-fast);
}

.ds-multi-select-checkmark i {
    opacity: 0;
    color: var(--ds-text-inverse);
    font-size: 0.65rem;
    transition: opacity var(--ds-transition-fast);
}

.ds-multi-select-option:hover .ds-multi-select-checkmark {
    border-color: var(--ds-color-primary);
}

.ds-multi-select-checkbox:checked + .ds-multi-select-checkmark {
    background: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-secondary) 100%);
    border-color: var(--ds-color-primary);
}

.ds-multi-select-checkbox:checked + .ds-multi-select-checkmark i {
    opacity: 1;
}

.ds-multi-select-option-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ds-multi-select-option-label {
    color: var(--ds-text-primary);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-multi-select-option-sublabel {
    color: var(--ds-text-tertiary);
    font-size: var(--ds-font-size-xs);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-multi-select-empty,
.ds-multi-select-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ds-text-muted);
    font-size: var(--ds-font-size-sm);
}

.ds-multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
}

.ds-multi-select-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-secondary) 100%);
    color: var(--ds-text-inverse);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-font-size-xs);
    font-weight: var(--ds-font-weight-medium);
}

.ds-multi-select-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--ds-transition-fast);
}

.ds-multi-select-tag-remove:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Tailles */
.ds-multi-select-sm .ds-multi-select-trigger {
    padding: 0.5rem 0.75rem;
    min-height: 36px;
}

.ds-multi-select-sm .ds-multi-select-placeholder,
.ds-multi-select-sm .ds-multi-select-label {
    font-size: var(--ds-font-size-xs);
}

.ds-multi-select-sm .ds-multi-select-count {
    min-width: 18px;
    height: 18px;
    font-size: 0.7rem;
}

.ds-multi-select-lg .ds-multi-select-trigger {
    padding: 1rem 1.25rem;
    min-height: 52px;
}

.ds-multi-select-lg .ds-multi-select-placeholder,
.ds-multi-select-lg .ds-multi-select-label {
    font-size: var(--ds-font-size-base);
}

.ds-multi-select.is-disabled .ds-multi-select-trigger {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Version compacte du sélecteur multiple */
.ds-multi-select-compact .ds-multi-select-trigger {
    padding: 0.5rem 0.875rem;
    min-height: 36px;
}

.ds-multi-select-compact .ds-multi-select-placeholder,
.ds-multi-select-compact .ds-multi-select-label {
    font-size: var(--ds-font-size-xs);
}

.ds-multi-select-compact .ds-multi-select-count {
    min-width: 18px;
    height: 18px;
    font-size: 0.7rem;
}

.ds-multi-select-compact .ds-multi-select-menu {
    min-width: 280px;
}

.ds-multi-select-compact .ds-multi-select-header {
    padding: 0.625rem 0.875rem;
    font-size: var(--ds-font-size-xs);
}

.ds-multi-select-compact .ds-multi-select-search {
    padding: 0.375rem 0.875rem;
}

.ds-multi-select-compact .ds-multi-select-search-input {
    font-size: var(--ds-font-size-xs);
}

.ds-multi-select-compact .ds-multi-select-options {
    max-height: 240px;
    padding: 0.375rem 0;
}

.ds-multi-select-compact .ds-multi-select-option {
    padding: 0.5rem 0.875rem;
}

.ds-multi-select-compact .ds-multi-select-checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
}

.ds-multi-select-compact .ds-multi-select-option-label {
    font-size: var(--ds-font-size-xs);
}

.ds-multi-select-compact .ds-multi-select-option-sublabel {
    font-size: 0.65rem;
}

/* Version très compacte (mini) du sélecteur multiple */
.ds-multi-select-mini .ds-multi-select-trigger {
    padding: 0.375rem 0.75rem;
    min-height: 32px;
}

.ds-multi-select-mini .ds-multi-select-placeholder,
.ds-multi-select-mini .ds-multi-select-label {
    font-size: 0.7rem;
}

.ds-multi-select-mini .ds-multi-select-count {
    min-width: 16px;
    height: 16px;
    font-size: 0.65rem;
}

.ds-multi-select-mini .ds-multi-select-menu {
    min-width: 240px;
}

.ds-multi-select-mini .ds-multi-select-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
}

.ds-multi-select-mini .ds-multi-select-search {
    padding: 0.25rem 0.75rem;
}

.ds-multi-select-mini .ds-multi-select-search-input {
    font-size: 0.7rem;
}

.ds-multi-select-mini .ds-multi-select-options {
    max-height: 200px;
    padding: 0.25rem 0;
}

.ds-multi-select-mini .ds-multi-select-option {
    padding: 0.375rem 0.75rem;
}

.ds-multi-select-mini .ds-multi-select-checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.ds-multi-select-mini .ds-multi-select-option-label {
    font-size: 0.7rem;
}

.ds-multi-select-mini .ds-multi-select-option-sublabel {
    font-size: 0.6rem;
}

/* ============================================
   MODAUX
   ============================================
*/

.ds-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ds-bg-overlay);
    z-index: var(--ds-z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--ds-transition-base);
}

.ds-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.ds-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    max-width: 90vw;
    max-height: 90vh;
    background: var(--ds-bg-primary);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-2xl);
    z-index: var(--ds-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--ds-transition-base);
    display: flex;
    flex-direction: column;
}

.ds-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.ds-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-spacing-lg);
    border-bottom: 1px solid var(--ds-border-color);
}

.ds-modal-title {
    font-size: var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-primary);
    margin: 0;
}

.ds-modal-close {
    padding: var(--ds-spacing-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--ds-transition-fast);
    font-size: var(--ds-font-size-xl);
    color: var(--ds-text-secondary);
}

.ds-modal-close:hover {
    opacity: 1;
}

.ds-modal-body {
    padding: var(--ds-spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.ds-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-spacing-md);
    padding: var(--ds-spacing-lg);
    border-top: 1px solid var(--ds-border-color);
}

/* ============================================
   FORMULAIRES
   ============================================
*/

.ds-form-group {
    margin-bottom: var(--ds-spacing-lg);
}

.ds-form-label {
    display: block;
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-primary);
    margin-bottom: var(--ds-spacing-xs);
}

.ds-form-label.required::after {
    content: ' *';
    color: var(--ds-color-danger);
}

.ds-form-input,
.ds-form-select,
.ds-form-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-size-sm);
    line-height: var(--ds-line-height-normal);
    color: var(--ds-text-primary);
    background: var(--ds-bg-primary);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-md);
    transition: all var(--ds-transition-fast);
}

.ds-form-input:focus,
.ds-form-select:focus,
.ds-form-textarea:focus {
    outline: none;
    border-color: var(--ds-border-color-focus);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ds-form-input:disabled,
.ds-form-select:disabled,
.ds-form-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--ds-bg-secondary);
}

.ds-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.ds-form-help {
    display: block;
    margin-top: var(--ds-spacing-xs);
    font-size: var(--ds-font-size-xs);
    color: var(--ds-text-tertiary);
}

.ds-form-error {
    display: block;
    margin-top: var(--ds-spacing-xs);
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-danger);
}

.ds-form-input.error,
.ds-form-select.error,
.ds-form-textarea.error {
    border-color: var(--ds-color-danger);
}

.ds-form-input.error:focus,
.ds-form-select.error:focus,
.ds-form-textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ============================================
   LISTES
   ============================================
*/

.ds-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ds-list-item {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-md);
    padding: var(--ds-spacing-md);
    border-bottom: 1px solid var(--ds-border-color-light);
    transition: background-color var(--ds-transition-fast);
}

.ds-list-item:last-child {
    border-bottom: none;
}

.ds-list-item:hover {
    background: var(--ds-bg-secondary);
}

.ds-list-item-icon {
    flex-shrink: 0;
    color: var(--ds-text-tertiary);
}

.ds-list-item-content {
    flex: 1;
    min-width: 0;
}

.ds-list-item-title {
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-primary);
    margin: 0 0 var(--ds-spacing-xs) 0;
}

.ds-list-item-subtitle {
    font-size: var(--ds-font-size-xs);
    color: var(--ds-text-tertiary);
    margin: 0;
}

.ds-list-item-action {
    flex-shrink: 0;
}

/* Liste avec bordures */
.ds-list-bordered {
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}

.ds-list-bordered .ds-list-item {
    border-bottom: 1px solid var(--ds-border-color-light);
}

.ds-list-bordered .ds-list-item:last-child {
    border-bottom: none;
}

/* ============================================
   ICÔNES
   ============================================
*/

.ds-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-icon-sm {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.ds-icon-md {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

.ds-icon-lg {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
}

.ds-icon-xl {
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
}

/* Icône avec fond */
.ds-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-md);
}

.ds-icon-wrapper-primary {
    background: var(--ds-color-primary-100);
    color: var(--ds-color-primary);
}

.ds-icon-wrapper-success {
    background: var(--ds-color-success-100);
    color: var(--ds-color-success);
}

.ds-icon-wrapper-warning {
    background: var(--ds-color-warning-100);
    color: var(--ds-color-warning);
}

.ds-icon-wrapper-danger {
    background: var(--ds-color-danger-100);
    color: var(--ds-color-danger);
}

.ds-icon-wrapper-info {
    background: var(--ds-color-info-100);
    color: var(--ds-color-info);
}

/* ============================================
   INDICATEURS DE CHARGEMENT
   ============================================
*/

.ds-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--ds-border-color);
    border-top-color: var(--ds-color-primary);
    border-radius: 50%;
    animation: ds-spin 1s linear infinite;
}

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

.ds-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.ds-spinner-lg {
    width: 2rem;
    height: 2rem;
    border-width: 4px;
}

.ds-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

/* ============================================
   PROGRESS BARS
   ============================================
*/

.ds-progress {
    width: 100%;
    height: 0.5rem;
    background: var(--ds-bg-secondary);
    border-radius: var(--ds-radius-full);
    overflow: hidden;
}

.ds-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-secondary) 100%);
    border-radius: var(--ds-radius-full);
    transition: width var(--ds-transition-slow);
}

.ds-progress-bar-success {
    background: linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-success-dark) 100%);
}

.ds-progress-bar-warning {
    background: linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-warning-dark) 100%);
}

.ds-progress-bar-danger {
    background: linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-danger-dark) 100%);
}

/* ============================================
   MODÈLES D'IA (AI MODELS / LLM TAGS)
   ============================================
*/

/* Tag/Bouton de modèle d'IA de base */
.ds-ai-model {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-semibold);
    line-height: var(--ds-line-height-normal);
    border-radius: var(--ds-radius-md);
    border: 1px solid transparent;
    background: var(--ds-bg-secondary);
    color: var(--ds-text-primary);
    cursor: pointer;
    user-select: none;
    transition: all var(--ds-transition-base);
    position: relative;
    white-space: nowrap;
}

.ds-ai-model:hover {
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-sm);
}

.ds-ai-model:active {
    transform: translateY(0);
}

.ds-ai-model:focus {
    outline: 2px solid var(--ds-border-color-focus);
    outline-offset: 2px;
}

.ds-ai-model.disabled,
.ds-ai-model:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icône du modèle */
.ds-ai-model-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.ds-ai-model-icon img,
.ds-ai-model-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Texte du modèle */
.ds-ai-model-text {
    color: inherit;
    font-weight: inherit;
}

/* Variante sélectionnée */
.ds-ai-model.selected {
    box-shadow: var(--ds-shadow-md);
}

/* Variante checkbox (pour sélection multiple) */
.ds-ai-model-checkbox {
    position: relative;
}

.ds-ai-model-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
}

.ds-ai-model-checkbox input[type="checkbox"]:checked + .ds-ai-model {
    box-shadow: var(--ds-shadow-md);
}

/* OpenAI - Couleurs teal/vert */
.ds-ai-model-openai {
    background: rgba(16, 163, 127, 0.08);
    border-color: rgba(16, 163, 127, 0.2);
    color: #10a37f;
}

.ds-ai-model-openai:hover {
    background: rgba(16, 163, 127, 0.12);
    border-color: rgba(16, 163, 127, 0.3);
}

.ds-ai-model-openai.selected {
    background: rgba(16, 163, 127, 0.15);
    border-color: #10a37f;
    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.1);
}

/* Gemini - Couleurs violet/pourpre */
.ds-ai-model-gemini {
    background: rgba(142, 68, 173, 0.08);
    border-color: rgba(142, 68, 173, 0.2);
    color: #8e44ad;
}

.ds-ai-model-gemini:hover {
    background: rgba(142, 68, 173, 0.12);
    border-color: rgba(142, 68, 173, 0.3);
}

.ds-ai-model-gemini.selected {
    background: rgba(142, 68, 173, 0.15);
    border-color: #8e44ad;
    box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
}

/* Claude (Anthropic) - Couleurs orange */
.ds-ai-model-claude,
.ds-ai-model-anthropic {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.2);
    color: #d97706;
}

.ds-ai-model-claude:hover,
.ds-ai-model-anthropic:hover {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.3);
}

.ds-ai-model-claude.selected,
.ds-ai-model-anthropic.selected {
    background: rgba(217, 119, 6, 0.15);
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

/* Perplexity - Couleurs cyan/bleu */
.ds-ai-model-perplexity {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.ds-ai-model-perplexity:hover {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
}

.ds-ai-model-perplexity.selected {
    background: rgba(14, 165, 233, 0.15);
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Tailles */
.ds-ai-model-sm {
    padding: 0.5rem 0.75rem;
    font-size: var(--ds-font-size-xs);
    gap: 0.5rem;
}

.ds-ai-model-sm .ds-ai-model-icon {
    width: 20px;
    height: 20px;
}

.ds-ai-model-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--ds-font-size-base);
    gap: 0.75rem;
}

.ds-ai-model-lg .ds-ai-model-icon {
    width: 28px;
    height: 28px;
}

/* Variante sans bordure (plus subtile) */
.ds-ai-model-outline {
    background: transparent;
}

.ds-ai-model-outline.ds-ai-model-openai {
    border-color: rgba(16, 163, 127, 0.3);
}

.ds-ai-model-outline.ds-ai-model-gemini {
    border-color: rgba(142, 68, 173, 0.3);
}

.ds-ai-model-outline.ds-ai-model-claude,
.ds-ai-model-outline.ds-ai-model-anthropic {
    border-color: rgba(217, 119, 6, 0.3);
}

.ds-ai-model-outline.ds-ai-model-perplexity {
    border-color: rgba(14, 165, 233, 0.3);
}

/* Variante remplie (plus visible) */
.ds-ai-model-filled.ds-ai-model-openai {
    background: #10a37f;
    border-color: #10a37f;
    color: #ffffff;
}

.ds-ai-model-filled.ds-ai-model-gemini {
    background: #8e44ad;
    border-color: #8e44ad;
    color: #ffffff;
}

.ds-ai-model-filled.ds-ai-model-claude,
.ds-ai-model-filled.ds-ai-model-anthropic {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
}

.ds-ai-model-filled.ds-ai-model-perplexity {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
}

.ds-ai-model-filled:hover {
    opacity: 0.9;
}

/* Container pour grouper plusieurs modèles */
.ds-ai-models-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-sm);
    align-items: center;
}

.ds-ai-models-group.ds-ai-models-group-center {
    justify-content: center;
}

.ds-ai-models-group.ds-ai-models-group-between {
    justify-content: space-between;
}

/* ============================================
   ONGLETS (TABS) - RÉSULTATS DE RECHERCHE
   ============================================
*/

/* Container pour les onglets — segmented control (référence : .cockpit-subnav--segmented,
   déjà utilisé sur 10+ pages en prod ; la pilule translucide reste réservée aux chips/filtres,
   pas aux onglets — décision actée le 25/08/2026). */
.ds-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--ds-color-gray-100);
    border-radius: var(--ds-radius-md);
}

.ds-tabs-container {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
}

.ds-tabs-container::-webkit-scrollbar {
    display: none;
}

/* Onglet de base */
.ds-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-semibold);
    line-height: var(--ds-line-height-normal);
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ds-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: all var(--ds-transition-base);
    position: relative;
    white-space: nowrap;
    border-radius: var(--ds-radius-sm);
    text-decoration: none;
}

.ds-tab:hover {
    color: var(--ds-text-primary);
    background: rgba(255, 255, 255, 0.55);
}

.ds-tab:focus {
    outline: 2px solid var(--ds-border-color-focus);
    outline-offset: 2px;
}

.ds-tab:disabled,
.ds-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* État actif — pastille blanche + ombre légère (segmented control), pas de soulignement */
.ds-tab.active {
    background: var(--ds-bg-primary);
    color: var(--ds-text-primary);
    border-color: transparent;
    box-shadow: var(--ds-shadow-sm);
}

/* Icône dans l'onglet */
.ds-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--ds-radius-sm);
    background: rgba(0, 0, 0, 0.05);
    transition: all var(--ds-transition-base);
}

.ds-tab-icon img,
.ds-tab-icon svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: all var(--ds-transition-base);
    display: block;
}

.ds-tab:hover .ds-tab-icon {
    background: rgba(0, 0, 0, 0.08);
}

.ds-tab:hover .ds-tab-icon img,
.ds-tab:hover .ds-tab-icon svg {
    opacity: 0.9;
}

.ds-tab.active .ds-tab-icon {
    background: currentColor;
}

.ds-tab.active .ds-tab-icon img,
.ds-tab.active .ds-tab-icon svg {
    opacity: 1;
    filter: brightness(0) invert(1); /* Rendre l'icône blanche sur fond coloré */
}

/* Texte de l'onglet */
.ds-tab-text {
    color: inherit;
    font-weight: inherit;
}

/* Variantes de couleurs pour les modèles d'IA */
.ds-tab-color-openai {
    --tab-color: #10a37f;
}

.ds-tab-color-openai.active {
    color: #10a37f;
}

.ds-tab-color-openai.active .ds-tab-icon {
    background: #10a37f;
}

.ds-tab-color-gemini {
    --tab-color: #8e44ad;
}

.ds-tab-color-gemini.active {
    color: #8e44ad;
}

.ds-tab-color-gemini.active .ds-tab-icon {
    background: #8e44ad;
}

.ds-tab-color-claude,
.ds-tab-color-anthropic {
    --tab-color: #d97706;
}

.ds-tab-color-claude.active,
.ds-tab-color-anthropic.active {
    color: #d97706;
}

.ds-tab-color-claude.active .ds-tab-icon,
.ds-tab-color-anthropic.active .ds-tab-icon {
    background: #d97706;
}

.ds-tab-color-perplexity {
    --tab-color: #0ea5e9;
}

.ds-tab-color-perplexity.active {
    color: #0ea5e9;
}

.ds-tab-color-perplexity.active .ds-tab-icon {
    background: #0ea5e9;
}

/* Variante avec bordure pour l'onglet actif (comme dans l'image) */
.ds-tabs-bordered .ds-tab.active {
    border: 1px solid var(--ds-border-color);
    border-bottom-color: transparent;
    background: var(--ds-bg-primary);
}

.ds-tabs-bordered .ds-tab-color-openai.active {
    border-color: rgba(16, 163, 127, 0.3);
}

.ds-tabs-bordered .ds-tab-color-gemini.active {
    border-color: rgba(142, 68, 173, 0.3);
}

.ds-tabs-bordered .ds-tab-color-claude.active,
.ds-tabs-bordered .ds-tab-color-anthropic.active {
    border-color: rgba(217, 119, 6, 0.3);
}

.ds-tabs-bordered .ds-tab-color-perplexity.active {
    border-color: rgba(14, 165, 233, 0.3);
}

/* Tailles */
.ds-tabs-sm .ds-tab {
    padding: 0.625rem 1rem;
    font-size: var(--ds-font-size-xs);
    gap: 0.375rem;
}

.ds-tabs-sm .ds-tab-icon {
    width: 20px;
    height: 20px;
}

.ds-tabs-sm .ds-tab-icon img,
.ds-tabs-sm .ds-tab-icon svg {
    width: 16px;
    height: 16px;
}

.ds-tabs-lg .ds-tab {
    padding: 1rem 1.5rem;
    font-size: var(--ds-font-size-base);
    gap: 0.75rem;
}

.ds-tabs-lg .ds-tab-icon {
    width: 28px;
    height: 28px;
}

.ds-tabs-lg .ds-tab-icon img,
.ds-tabs-lg .ds-tab-icon svg {
    width: 22px;
    height: 22px;
}

/* Variante compacte (sans padding wrapper) */
.ds-tabs-compact .ds-tabs-wrapper {
    padding: 0;
    border-bottom: none;
}

.ds-tabs-compact .ds-tab {
    border-radius: var(--ds-radius-md);
}

.ds-tabs-compact .ds-tab.active {
    border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
}

/* Variante centrée */
.ds-tabs-centered .ds-tabs-container {
    justify-content: center;
}

/* Variante avec espacement égal */
.ds-tabs-justified .ds-tab {
    flex: 1;
    justify-content: center;
}

/* Contenu des onglets */
.ds-tab-content {
    display: none;
    padding: var(--ds-spacing-lg);
    background: var(--ds-bg-primary);
}

.ds-tab-content.active {
    display: block;
}

/* Animation de transition */
.ds-tab-content {
    animation: ds-fadeIn 0.3s ease-in-out;
}

@keyframes ds-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   UTILITAIRES
   ============================================
*/

/* Espacements */
.ds-mt-xs { margin-top: var(--ds-spacing-xs); }
.ds-mt-sm { margin-top: var(--ds-spacing-sm); }
.ds-mt-md { margin-top: var(--ds-spacing-md); }
.ds-mt-lg { margin-top: var(--ds-spacing-lg); }
.ds-mt-xl { margin-top: var(--ds-spacing-xl); }

.ds-mb-xs { margin-bottom: var(--ds-spacing-xs); }
.ds-mb-sm { margin-bottom: var(--ds-spacing-sm); }
.ds-mb-md { margin-bottom: var(--ds-spacing-md); }
.ds-mb-lg { margin-bottom: var(--ds-spacing-lg); }
.ds-mb-xl { margin-bottom: var(--ds-spacing-xl); }

.ds-p-xs { padding: var(--ds-spacing-xs); }
.ds-p-sm { padding: var(--ds-spacing-sm); }
.ds-p-md { padding: var(--ds-spacing-md); }
.ds-p-lg { padding: var(--ds-spacing-lg); }
.ds-p-xl { padding: var(--ds-spacing-xl); }

/* Texte */
.ds-text-primary { color: var(--ds-text-primary); }
.ds-text-secondary { color: var(--ds-text-secondary); }
.ds-text-tertiary { color: var(--ds-text-tertiary); }
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-inverse { color: var(--ds-text-inverse); }

.ds-text-success { color: var(--ds-color-success); }
.ds-text-warning { color: var(--ds-color-warning); }
.ds-text-danger { color: var(--ds-color-danger); }
.ds-text-info { color: var(--ds-color-info); }

.ds-text-center { text-align: center; }
.ds-text-left { text-align: left; }
.ds-text-right { text-align: right; }

.ds-font-weight-light { font-weight: var(--ds-font-weight-light); }
.ds-font-weight-normal { font-weight: var(--ds-font-weight-normal); }
.ds-font-weight-medium { font-weight: var(--ds-font-weight-medium); }
.ds-font-weight-semibold { font-weight: var(--ds-font-weight-semibold); }
.ds-font-weight-bold { font-weight: var(--ds-font-weight-bold); }

/* Display */
.ds-d-none { display: none; }
.ds-d-block { display: block; }
.ds-d-inline { display: inline; }
.ds-d-inline-block { display: inline-block; }
.ds-d-flex { display: flex; }
.ds-d-inline-flex { display: inline-flex; }

/* Flexbox */
.ds-flex-row { flex-direction: row; }
.ds-flex-column { flex-direction: column; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-flex-nowrap { flex-wrap: nowrap; }
.ds-justify-start { justify-content: flex-start; }
.ds-justify-end { justify-content: flex-end; }
.ds-justify-center { justify-content: center; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-around { justify-content: space-around; }
.ds-align-start { align-items: flex-start; }
.ds-align-end { align-items: flex-end; }
.ds-align-center { align-items: center; }
.ds-align-stretch { align-items: stretch; }
.ds-gap-xs { gap: var(--ds-spacing-xs); }
.ds-gap-sm { gap: var(--ds-spacing-sm); }
.ds-gap-md { gap: var(--ds-spacing-md); }
.ds-gap-lg { gap: var(--ds-spacing-lg); }
.ds-gap-xl { gap: var(--ds-spacing-xl); }

/* ============================================
   RESPONSIVE
   ============================================
*/

@media (max-width: 768px) {
    .ds-btn {
        padding: 0.5rem 1rem;
        font-size: var(--ds-font-size-xs);
    }
    
    .ds-card-header,
    .ds-card-body,
    .ds-card-footer {
        padding: var(--ds-spacing-md);
    }
    
    .ds-modal {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .ds-table {
        font-size: var(--ds-font-size-xs);
    }
    
    .ds-table thead th,
    .ds-table tbody td {
        padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    }
}

/*
   ============================================
   SWEETALERT2 (vurtoAlert / vurtoConfirm / vurtoToast)
   Aligne les couleurs par défaut de SweetAlert2 sur les tokens du design system.
   ============================================
*/
.swal2-icon.swal2-success {
    border-color: var(--ds-color-success) !important;
    color: var(--ds-color-success) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--ds-color-success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--ds-color-success-light) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--ds-color-danger) !important;
    color: var(--ds-color-danger) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--ds-color-danger) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--ds-color-warning) !important;
    color: var(--ds-color-warning) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--ds-color-info) !important;
    color: var(--ds-color-info) !important;
}

.swal2-icon.swal2-question {
    border-color: var(--ds-color-primary) !important;
    color: var(--ds-color-primary) !important;
}

.swal2-timer-progress-bar {
    background: var(--ds-color-primary) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--ds-color-primary) !important;
    border-radius: var(--ds-radius-btn) !important;
}

.swal2-styled.swal2-deny {
    background-color: var(--ds-color-danger) !important;
    border-radius: var(--ds-radius-btn) !important;
}

.swal2-styled.swal2-cancel {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: var(--ds-radius-btn) !important;
}

.swal2-popup {
    border-radius: var(--ds-radius-modal, 16px) !important;
}