/**
 * UI Components - Styles centralisés pour les composants réutilisables
 * Utilisé par : notifications, file previews, cards, etc.
 * 
 * Utilise les variables CSS du design-system.css pour une maintenabilité optimale
 */

/* ============================================
   BOUTONS UI - Base Commune
   ============================================ */

/**
 * Bouton de base pour toutes les actions UI
 * Propriétés communes à tous les boutons (icône, action, etc.)
 */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-sans);
    font-size: inherit;
    padding: 0;
    margin: 0;
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    outline: none;
}

/* a.ui-btn {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
} */

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

/* ============================================
   BOUTONS ICÔNE - Taille Standard (32x32)
   ============================================ */

/**
 * Style de base pour tous les boutons icône
 * Taille uniforme, apparence harmonisée
 */
 .btn, 
.ui-btn-primary,
.ui-btn-secondary,
.ui-btn-warning,
.ui-btn-danger,
.ui-btn-success,
.ui-btn-info,
.ui-btn-close {
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    line-height: 1;
    border: none;
    transition: all var(--transition-base);
    padding: var(--spacing-sm);
    margin: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* États communs */
.ui-btn-primary:active,
.ui-btn-secondary:active,
.ui-btn-warning:active,
.ui-btn-danger:active,
.ui-btn-success:active,
.ui-btn-info:active,
.ui-btn-close:active {
    transform: scale(0.95);
}

.ui-btn-primary:disabled,
.ui-btn-secondary:disabled,
.ui-btn-warning:disabled,
.ui-btn-danger:disabled,
.ui-btn-success:disabled,
.ui-btn-info:disabled,
.ui-btn-close:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   VARIANTES DE COULEUR - Boutons Icône
   ============================================ */

/* Primary - Actions principales (Play, Start, Resume) */
.ui-btn-primary {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.ui-btn-primary:hover {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

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

.ui-btn-secondary {
    color: var(--color-text-secondary);
    background: var(--color-gray-100);
}
.ui-btn-secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-text-primary);
    box-shadow: 0 2px 8px rgba(113, 128, 150, 0.3);
}
.ui-btn-secondary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Warning - Actions d'avertissement (Pause, Wait) */
.ui-btn-warning {
    color: var(--color-warning);
    background: var(--color-warning-light);
}

.ui-btn-warning:hover {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}

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

/* Danger/Close - Actions destructives (Remove, Delete, Cancel, Close) */
.ui-btn-danger {
    background:rgba(245, 101, 101, 0.253);
    color: var(--color-error); 
}
.ui-btn-close {
    background: rgba(113, 128, 150, 0.1);
    color: var(--color-text-secondary);
}

.ui-btn-danger:hover,
.ui-btn-close:hover {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.ui-btn-danger:focus-visible,
.ui-btn-close:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

/* Success - Actions de validation (Confirm, Validate) */
.ui-btn-success {
    color: var(--color-success);
    background: var(--color-success-light);
}

.ui-btn-success:hover {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

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

/* Info - Actions informatives (Edit, Info, View) */
.ui-btn-info {
    color: var(--color-info);
    background: var(--color-info-light);
}

.ui-btn-info:hover {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
}

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

/* ============================================
   BOUTONS ICÔNE - VARIANTES DE TAILLE
   ============================================ */

/** Extra small (24×24) — actions discrètes dans les commentaires, listes compactes */
.ui-btn--xs {
    min-width: 24px;
    height: 24px;
    padding: 2px;
    margin: 0;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

/** Small (28×28) — actions secondaires, barres d'outils compactes */
.ui-btn--sm {
    min-width: 28px;
    height: 28px;
    padding: 4px;
    margin: var(--spacing-xs);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

/** Loading state for icon buttons */
.ui-btn--loading {
    pointer-events: none;
    opacity: 0.6;
}

.ui-btn--loading i {
    animation: ui-btn-spin 0.8s linear infinite;
}

@keyframes ui-btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   BOUTONS ACTION AVEC TEXTE
   ============================================ */

/**
 * Base commune pour boutons d'action avec texte
 * Utilise les variables du design-system
 */
.ui-btn-action {
    padding: var(--spacing-sm) var(--spacing-base);
    border: none;
    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    line-height: var(--line-height-normal);
    text-decoration: none;
    outline: none;
    min-height: 32px;
}

.ui-btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   VARIANTES DE COULEUR - Boutons Action
   ============================================ */

/* Primary */
.ui-btn-action-primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.ui-btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ui-btn-action-primary:active {
    transform: translateY(0);
}

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

/* Secondary */
.ui-btn-action-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #6c757d 100%);
    color: var(--color-white);
}
.ui-btn-action-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}
.ui-btn-action-secondary:active {
    transform: translateY(0);
}
.ui-btn-action-secondary:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Warning */
.ui-btn-action-warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, #ff9800 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.ui-btn-action-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.ui-btn-action-warning:active {
    transform: translateY(0);
}

.ui-btn-action-warning:focus-visible {
    outline: 2px solid var(--color-warning);
    outline-offset: 2px;
}

/* Danger */
.ui-btn-action-danger {
    background: linear-gradient(135deg, #f56565 0%, var(--color-error) 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3);
}

.ui-btn-action-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
}

.ui-btn-action-danger:active {
    transform: translateY(0);
}

.ui-btn-action-danger:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

/* Success */
.ui-btn-action-success {
    background: linear-gradient(135deg, #48bb78 0%, var(--color-success) 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

.ui-btn-action-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
}

.ui-btn-action-success:active {
    transform: translateY(0);
}

.ui-btn-action-success:focus-visible {
    outline: 2px solid var(--color-success);
    outline-offset: 2px;
}

/* Info */
.ui-btn-action-info {
    background: linear-gradient(135deg, #4299e1 0%, var(--color-info) 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
}

.ui-btn-action-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
}

.ui-btn-action-info:active {
    transform: translateY(0);
}

.ui-btn-action-info:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Ghost - Actions secondaires */
.ui-btn-action-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: var(--border-width) solid var(--border-color-base);
    box-shadow: none;
}

.ui-btn-action-ghost:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-500);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.ui-btn-action-ghost:active {
    transform: translateY(0);
}

.ui-btn-action-ghost:focus-visible {
    outline: 2px solid var(--border-color-base);
    outline-offset: 2px;
}

/* ============================================
   TAILLES - Boutons Action
   ============================================ */

.ui-btn-action-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    min-height: 24px;
}

.ui-btn-action-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-md);
    min-height: 40px;
}

/* ============================================
   GROUPE DE BOUTONS
   ============================================ */

.ui-btn-group {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

/* Boutons avec attribut data-icon */
.ui-btn[data-icon]::before {
    content: attr(data-icon);
    display: block;
}

/* ============================================
   CARTES UI
   ============================================ */

/**
 * Carte de base utilisant les variables du design-system
 */
.ui-card {
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

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

/* ============================================
   VARIANTES DE CARTES
   ============================================ */

/* Carte avec bordure colorée (notifications) */
.ui-card-bordered {
    border-left: var(--border-width-thick) solid transparent;
}

.ui-card-bordered.ui-card-info {
    border-left-color: var(--color-info);
}

.ui-card-bordered.ui-card-success {
    border-left-color: var(--color-success);
}

.ui-card-bordered.ui-card-warning {
    border-left-color: var(--color-warning);
}

.ui-card-bordered.ui-card-error {
    border-left-color: var(--color-error);
}

/* Carte avec overlay d'actions (file previews) */
.ui-card-overlay {
    position: relative;
}

.ui-card-overlay .ui-card-actions {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: var(--z-dropdown);
}

.ui-card-overlay:hover .ui-card-actions {
    opacity: 1;
}

/* ============================================
   CONTENU DE CARTE
   ============================================ */

.ui-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.ui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

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

.ui-card-body {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

.ui-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: var(--border-width) solid var(--border-color-light);
}

/* ============================================
   ICÔNES DE CARTE
   ============================================ */

.ui-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.ui-card-info .ui-card-icon {
    background: var(--color-info-light);
    color: var(--color-info);
}

.ui-card-success .ui-card-icon {
    background: var(--color-success-light);
    color: var(--color-success);
}

.ui-card-warning .ui-card-icon {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.ui-card-error .ui-card-icon {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ============================================
   BOUTONS STANDARDS (Mockup Style)
   ============================================ */

/**
 * Styles de boutons améliorés depuis la maquette visuelle
 * Classes: .btn, .btn--primary, .btn--secondary, .btn--outline, .btn--sm, .btn--block
 * États: normal, hover, active, disabled, loading
 */

.btn {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.5;
}

/* Variantes de couleur */
.btn--primary {
    background-color: var(--color-primary);
    color: white;
}

.btn--primary:hover:not(:disabled),
.btn--primary.btn--hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background-color: var(--color-accent-2);
    color: var(--color-secondary);
}

.btn--secondary:hover:not(:disabled),
.btn--secondary.btn--hover {
    background-color: #c9a880;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background-color: var(--color-surface);
}

.btn--outline:hover:not(:disabled),
.btn--outline.btn--hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(54, 89, 87, 0.05);
}

/* Variantes de taille */
.btn--xs {
    padding: 4px var(--spacing-sm);
    font-size: var(--font-size-xxs, 0.7rem);
    line-height: 1.2;
}

.btn--sm {
    padding: 6px var(--spacing-md);
    font-size: var(--font-size-xs);
}

.btn--block {
    width: 100%;
}

/* États */
.btn--active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

/* État de chargement (loading spinner) */
.btn--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

/* Use unified .waiting-spinner for button loading state */
.btn--loading .waiting-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;  /* Half of 16px height */
    margin-left: -8px; /* Half of 16px width */
}

/* Override the default animation to avoid transform conflicts */
.btn--loading .waiting-spinner {
    animation: btn-spinner-rotate 0.6s linear infinite;
}

@keyframes btn-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* Color variants for button spinners */
.btn--primary .waiting-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

.btn--secondary .waiting-spinner {
    border-color: rgba(89, 73, 54, 0.3);
    border-top-color: var(--color-secondary);
}

.btn--outline .waiting-spinner {
    border-color: rgba(54, 89, 87, 0.3);
    border-top-color: var(--color-primary);
}

/* Focus visible pour accessibilité */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes ui-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ui-slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ui-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ui-slide-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Classes d'animation */
.ui-entering {
    animation: ui-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-exiting {
    animation: ui-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

@media (max-width: 768px) {
    .ui-card {
        padding: var(--spacing-sm);
    }

    .ui-card-title {
        font-size: var(--font-size-sm);
    }

    .ui-card-body {
        font-size: var(--font-size-xs);
    }
    
    .ui-btn-primary,
    .ui-btn-warning,
    .ui-btn-danger,
    .ui-btn-success,
    .ui-btn-info,
    .ui-btn-close {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-sm);
    }
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

/* ============================================
   STATUS BADGES - Badges de statut/vérification
   ============================================ */

/**
 * Badges de statut génériques pour indiquer un état (vérifié, en attente, etc.)
 * Classes: .status-badge, .status-badge--verified, .status-badge--pending, .status-badge--error
 * Usage: <span class="status-badge status-badge--verified">Vérifié</span>
 */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--verified,
.status-badge--success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-badge--pending,
.status-badge--warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-badge--error,
.status-badge--danger {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.status-badge--info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-badge--neutral {
    background: var(--color-gray-100);
    color: var(--color-text-muted);
}

.status-badge--ending {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.15), rgba(56, 161, 105, 0.1));
    color: var(--color-success-dark);
    border: 1px solid rgba(72, 187, 120, 0.3);
}

/* ============================================
   ROLE BADGES - Badges de rôle utilisateur
   ============================================ */

/**
 * Badges pour identifier les rôles utilisateurs (admin, modérateur, user)
 * Classes: .role-badge, .role-badge--admin, .role-badge--moderator, .role-badge--user
 * Usage: <span class="role-badge role-badge--admin">Administrateur</span>
 */
.role-badge {
    display: inline-flex;
    width:min-content;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge--admin {
    background: linear-gradient(135deg, var(--color-error), var(--color-error-dark));
    color: white;
}

.role-badge--moderator {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.role-badge--user {
    background: var(--color-gray-200);
    color: var(--color-text);
}

.role-badge--vip {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

.role-badge--founder {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: white;
}

.role-badge--redac {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
}

/* ============================================
   STATUS INDICATORS - Indicateurs de statut
   ============================================ */

/**
 * Indicateurs de statut compacts avec icône et texte
 * Classes: .status-indicator, .status-indicator--success, .status-indicator--warning, etc.
 * Usage: <div class="status-indicator status-indicator--success"><i class="fas fa-check"></i> Actif</div>
 */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.status-indicator--success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-indicator--info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.status-indicator--warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-indicator--danger,
.status-indicator--error {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.status-indicator--neutral {
    background: var(--color-gray-100);
    color: var(--color-text-muted);
}

/* ============================================
   FILTER BUTTONS - Boutons de filtre
   ============================================ */

/**
 * Boutons de filtrage pour listes, tableaux, etc.
 * Classes: .filter-btn, .filter-btn--active
 * Usage: <button class="filter-btn filter-btn--active">Publications</button>
 */
.filter-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

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

/* Groupe de filtres */
.filter-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

/* ============================================
   ACTION LINKS - Liens d'action stylés
   ============================================ */

/**
 * Liens d'action avec style distinctif
 * Classes: .link--action, .link--muted, .link--danger
 * Usage: <a href="#" class="link--action">Voir tout</a>
 */
.link--action {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

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

.link--muted {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link--muted:hover {
    color: var(--color-text);
}

.link--danger {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-error);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.link--danger:hover {
    text-decoration: underline;
    color: var(--color-error-dark);
}

/* ============================================
   STAT CARDS - Cartes de statistiques génériques
   ============================================ */

/**
 * Cartes de statistiques réutilisables (profil, story, dashboard)
 * Classes: .stats-grid, .stat-card, .stat-card--primary, etc.
 * 
 * Structure HTML:
 * <section class="stats-grid">
 *   <div class="stat-card stat-card--primary">
 *     <div class="stat-card__icon"><i class="fas fa-eye"></i></div>
 *     <div class="stat-card__content">
 *       <span class="stat-card__value">1.2k</span>
 *       <span class="stat-card__label">Vues</span>
 *     </div>
 *   </div>
 * </section>
 */

.stats-overview {
    margin-bottom: var(--spacing-xl);
}

.stats-overview__cards {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.stats-overview__cards .stat-card {
    flex: 1 1 180px;
    min-width: 0;
}

.stats-overview__badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

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

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

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

.stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.stat-card--primary .stat-card__icon {
    background: rgba(54, 89, 87, 0.1);
    color: var(--color-primary);
}

.stat-card--success .stat-card__icon {
    background: var(--color-success-light);
    color: var(--color-success);
}

.stat-card--info .stat-card__icon {
    background: var(--color-info-light);
    color: var(--color-info);
}

.stat-card--warning .stat-card__icon {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.stat-card--danger .stat-card__icon {
    background: var(--color-error-light);
    color: var(--color-error);
}

.stat-card__content {
    display: flex;
    flex-direction: column;
}

.stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Variante compacte (inline) pour stats simples */
.stats-inline {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
}

.stat-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    text-align: center;
}

.stat-inline__icon {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
}

.stat-inline__icon--primary { color: var(--color-primary); }
.stat-inline__icon--success { color: var(--color-success); }
.stat-inline__icon--danger { color: var(--color-error); }
.stat-inline__icon--warning { color: var(--color-warning); }
.stat-inline__icon--info { color: var(--color-info); }

.stat-inline__value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
}

.stat-inline__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ============================================
   CONTENT SECTIONS - Sections de contenu génériques
   ============================================ */

/**
 * Sections de contenu réutilisables (profil, story, etc.)
 * Classes: .content-section, .content-section__header, .content-section__body
 * 
 * Structure HTML:
 * <section class="content-section">
 *   <div class="content-section__header">
 *     <h2 class="content-section__title"><i class="fas fa-info"></i> Titre</h2>
 *     <a href="#" class="link--action">Voir tout</a>
 *   </div>
 *   <div class="content-section__body">
 *     Contenu...
 *   </div>
 * </section>
 */

.content-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

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

.content-section__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.content-section__title i {
    color: var(--color-primary);
}

.content-section__body {
    padding: var(--spacing-lg);
}

.content-section__body--no-padding {
    padding: 0;
}

/* État vide pour sections */
.content-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
    font-style: italic;
}

.content-empty__icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.content-empty__message {
    font-size: var(--font-size-sm);
}

/* ============================================
   ACTION BAR - Barre d'actions génériques
   ============================================ */

/**
 * Barre d'actions pour regrouper des boutons (story, profil, etc.)
 * Classes: .action-bar, .action-bar__group
 * 
 * Structure HTML:
 * <section class="action-bar">
 *   <div class="action-bar__group action-bar__group--primary">
 *     <button class="btn btn--primary">Action 1</button>
 *   </div>
 *   <div class="action-bar__group action-bar__group--secondary">
 *     <button class="btn btn--ghost">Action 2</button>
 *   </div>
 * </section>
 */

.action-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.action-bar__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.action-bar__group--primary {
    flex: 1;
}

/* ============================================
   HERO ACTIONS - Actions dans une section hero
   ============================================ */

/**
 * Actions placées dans un hero (profil, story, etc.)
 * Classes: .hero-actions
 * 
 * Structure HTML:
 * <div class="hero-actions">
 *   <button class="btn btn--primary">Action 1</button>
 *   <button class="btn btn--outline">Action 2</button>
 * </div>
 */

.hero-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Variante stats-grid 3 colonnes */
.stats-grid--3cols {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .stats-grid--3cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .stats-grid--3cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .stat-card {
        padding: var(--spacing-md);
    }
    
    .stat-card__icon {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }
    
    .stat-card__value {
        font-size: var(--font-size-xl);
    }
    
    .stats-inline {
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .stat-inline__value {
        font-size: var(--font-size-xl);
    }
    
    .action-bar {
        flex-direction: column;
    }
    
    .action-bar__group {
        justify-content: center;
    }
    
    .content-section__header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .content-section__body {
        padding: var(--spacing-md);
    }
}

/* ============================================
   BUTTON VARIANTS - Variantes de boutons
   ============================================ */

/**
 * Variantes supplémentaires pour .btn (danger, warning, success, ghost)
 * Ces variantes complètent les boutons existants
 */

/* Danger Button */
.btn--danger {
    background: linear-gradient(135deg, #f56565 0%, var(--color-error) 100%);
    color: white;
    border: none;
}

.btn--danger:hover:not(:disabled),
.btn--danger.btn--hover {
    background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4);
}

/* Warning Button */
.btn--warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
    border: none;
}

.btn--warning:hover:not(:disabled),
.btn--warning.btn--hover {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

/* Success Button */
.btn--success {
    background: linear-gradient(135deg, #48bb78 0%, var(--color-success) 100%);
    color: white;
    border: none;
}

.btn--success:hover:not(:disabled),
.btn--success.btn--hover {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
}

/* Info Button */
.btn--info {
    background: linear-gradient(135deg, #4299e1 0%, var(--color-info) 100%);
    color: white;
    border: none;
}

.btn--info:hover:not(:disabled),
.btn--info.btn--hover {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
}

/* Ghost Button (transparent) */
.btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
}

.btn--ghost:hover:not(:disabled),
.btn--ghost.btn--hover {
    background: var(--color-gray-100);
    color: var(--color-text);
    transform: none;
    box-shadow: none;
}

/* Link-style Button */
.btn--link {
    background: transparent;
    color: var(--color-primary);
    border: none;
    padding: 0;
    text-decoration: underline;
}

.btn--link:hover:not(:disabled) {
    color: var(--color-primary-dark);
    transform: none;
    box-shadow: none;
}

/* Full width modifier */
.btn--full {
    width: 100%;
}

/* ============================================
   ALERT BOXES - Boîtes d'alerte inline
   ============================================ */

/**
 * Alertes inline pour messages contextuels
 * Classes: .alert-inline, .alert-inline--info, .alert-inline--warning, etc.
 * Usage: <div class="alert-inline alert-inline--info"><i class="fas fa-info-circle"></i> Message</div>
 */
.alert-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.alert-inline i {
    flex-shrink: 0;
    margin: var(--spacing-xs) var(--spacing-xs) 0 0;
    font-size: var(--font-size-md);
}

.alert-inline--info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.alert-inline--info i {
    color: var(--color-info);
}

.alert-inline--warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.alert-inline--warning i {
    color: var(--color-warning);
}

.alert-inline--success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.alert-inline--success i {
    color: var(--color-success);
}

.alert-inline--danger,
.alert-inline--error {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.alert-inline--danger i,
.alert-inline--error i {
    color: var(--color-error);
}

/* ============================================
   EMPTY STATES - États vides
   ============================================ */

/**
 * Style pour les états vides (pas de données)
 * Classes: .empty-state, .empty-state--compact
 * Sub-elements: .empty-state__icon, .empty-state__content, .empty-state__title, .empty-state__text, .empty-state__message
 * Usage: <div class="empty-state"><div class="empty-state__icon">...</div><div class="empty-state__content"><h2 class="empty-state__title">...</h2><p class="empty-state__text">...</p></div></div>
 */
.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--spacing-xl);
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.empty-state__icon {
    font-size: 2rem;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.empty-state__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.empty-state__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 400px;
}

.empty-state__message {
    margin: 0;
    font-size: var(--font-size-base);
}

.empty-state i {
    margin-right: var(--spacing-xs);
}

.empty-state--compact {
    padding: var(--spacing-md);
    gap: var(--spacing-xs);
}

.empty-state--compact .empty-state__icon {
    font-size: 1.5rem;
}

/* ============================================
   SOCIAL LINK BUTTONS - Boutons réseaux sociaux
   ============================================ */

/**
 * Boutons pour liens vers réseaux sociaux
 * Classes: .social-link, .social-link--twitter, .social-link--github, etc.
 */
.social-link {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-lg);
    transition: all var(--transition-fast);
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link--twitter,
.social-link--x {
    background: #1da1f2;
}

.social-link--linkedin {
    background: #0077b5;
}

.social-link--github {
    background: #333;
}

.social-link--instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link--facebook {
    background: #1877f2;
}

.social-link--youtube {
    background: #ff0000;
}

.social-link--discord {
    background: #5865f2;
}

.social-link--add {
    background: var(--color-gray-100);
    color: var(--color-text-muted);
    border: 2px dashed var(--color-border);
}

.social-link--add:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: none;
}

/* ============================================
   ENTITY CELL - Avatar + Texte générique
   ============================================ */

/**
 * Composant réutilisable pour afficher une entité avec avatar et texte
 * Utilisable dans : tableaux, listes, cards, etc.
 * 
 * Structure HTML:
 * <div class="entity-cell">
 *   <a href="..." class="entity-cell__link">
 *     <img class="entity-cell__avatar" src="..." alt="..." />
 *     <span class="entity-cell__text">Nom</span>
 *   </a>
 * </div>
 * 
 * Ou sans lien:
 * <div class="entity-cell">
 *   <img class="entity-cell__avatar" src="..." alt="..." />
 *   <span class="entity-cell__text">Nom</span>
 * </div>
 */

.entity-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.entity-cell__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-fast);
}

.entity-cell__link:hover {
    opacity: 0.85;
}

.entity-cell__link:hover .entity-cell__text {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Avatar générique */
.entity-cell__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    background-color: var(--color-gray-100);
}

/* Avatar avec initiales (fallback quand pas d'image) */
.entity-cell__avatar--initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    border: 2px solid var(--color-border);
    text-transform: uppercase;
    line-height: 1;
}

/* Variantes de taille */
.entity-cell--sm .entity-cell__avatar {
    width: 28px;
    height: 28px;
    border-width: 1px;
}

.entity-cell--sm .entity-cell__avatar--initials {
    width: 28px;
    height: 28px;
    border-width: 1px;
    font-size: var(--font-size-xs);
}

.entity-cell--lg .entity-cell__avatar {
    width: 48px;
    height: 48px;
    border-width: 3px;
}

.entity-cell--lg .entity-cell__avatar--initials {
    width: 48px;
    height: 48px;
    border-width: 3px;
    font-size: var(--font-size-base);
}

.entity-cell--xl .entity-cell__avatar {
    width: 64px;
    height: 64px;
    border-width: 3px;
}

.entity-cell--xl .entity-cell__avatar--initials {
    width: 64px;
    height: 64px;
    border-width: 3px;
    font-size: var(--font-size-lg);
}

/* Variante xs (story info panel, etc.) */
.entity-cell--xs .entity-cell__avatar,
.entity-cell--xs .entity-cell__avatar--initials {
    width: 20px;
    height: 20px;
    border-width: 1px;
    font-size: 9px;
}

/* Texte principal */
.entity-cell__text {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Texte secondaire (sous-titre, email, etc.) */
.entity-cell__subtext {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Layout vertical pour texte + sous-texte */
.entity-cell__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Avatar carré (pour icônes/logos) */
.entity-cell--square .entity-cell__avatar {
    border-radius: var(--radius-md);
}

/* Sans bordure */
.entity-cell--no-border .entity-cell__avatar {
    border: none;
}

/* ============================================
   AVATAR - TAILLES AUTONOMES (standalone)
   Utilisables sans conteneur entity-cell parent.
   Permettent de dimensionner l'avatar directement
   dans des contextes comme cards, topbar, admin, etc.
   ============================================ */

/* Card / Topbar (32px, sans bordure) */
.entity-cell__avatar--card,
.entity-cell__avatar--card.entity-cell__avatar--initials {
    width: 32px;
    height: 32px;
    border: none;
    font-size: var(--font-size-sm);
}

/* Role modal (56px) */
.entity-cell__avatar--role,
.entity-cell__avatar--role.entity-cell__avatar--initials {
    width: 56px;
    height: 56px;
    border-width: 2px;
    font-size: 1.25rem;
}

/* Admin detail (80px) */
.entity-cell__avatar--admin,
.entity-cell__avatar--admin.entity-cell__avatar--initials {
    width: 80px;
    height: 80px;
    border-width: 3px;
    font-size: 2rem;
}

/* Hero / Profile (remplit le conteneur parent) */
.entity-cell__avatar--hero,
.entity-cell__avatar--hero.entity-cell__avatar--initials {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 3.5rem;
}

/* ============================================
   CODE BADGE - Pour afficher du code/clés techniques
   ============================================ */

/**
 * Badge pour afficher du code ou des clés techniques
 * Utilisable dans : tableaux, listes, modales
 * 
 * Structure HTML: <code class="code-badge">manage_users</code>
 */

.code-badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, 'Monaco', 'Consolas', monospace);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    word-break: break-word;
}

.code-badge--primary {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.code-badge--success {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success);
}

.code-badge--warning {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.code-badge--danger {
    background-color: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error);
}

/* ============================================
   BADGE - Badge générique réutilisable
   ============================================ */

/**
 * Badge générique avec variantes
 * Classes: .badge, .badge--outline, .badge--sm
 * 
 * Supporte une couleur dynamique via --badge-color :
 * <span class="badge badge--outline" style="--badge-color: #8b5cf6">Fantasy 3</span>
 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    background: var(--badge-color, var(--color-primary));
    color: #fff;
}

.badge--outline {
    background: transparent;
    border: 1px solid var(--badge-color, var(--color-border));
    color: var(--badge-color, var(--color-text));
}

.badge--sm {
    padding: 2px var(--spacing-xs);
    font-size: var(--font-size-2xs, 0.65rem);
}

.badge i {
    font-size: 0.7em;
}

/* ============================================
   INLINE BADGE LIST - Liste de badges inline
   ============================================ */

/**
 * Conteneur pour afficher plusieurs badges en ligne
 * Utilisable dans : tableaux, cards
 * 
 * Structure HTML:
 * <div class="badge-list">
 *   <span class="status-badge status-badge--info">Badge 1</span>
 *   <span class="status-badge status-badge--success">Badge 2</span>
 * </div>
 */

.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.badge-list--inline {
    flex-wrap: nowrap;
    overflow: hidden;
}

.badge-list__more {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ============================================
   CARD CATEGORY BADGE - Badge de catégorie pour cartes
   ============================================ */

.card__category,
.card__category-inline,
.card__category--sm {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.card__category {
    background-color: var(--color-primary);
    color: white;
}

.card__category--sm {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    padding: 2px var(--spacing-sm);
    font-size: 0.65rem;
    background-color: var(--color-primary);
    color: white;
    line-height: 1.4;
    width: fit-content;
}

.card__category-inline {
    display: inline-block;
    background-color: rgba(54, 89, 87, 0.1);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   ICON LIST — Liste avec icônes contextuelles
   Réutilisable sur toute page (CGU, FAQ, onboarding…)
   Usage :
     <ul class="icon-list">
       <li class="icon-list__item">
         <i class="icon-list__icon text-info fas fa-check"></i>
         <span>Texte de l'élément</span>
       </li>
     </ul>
   ============================================ */
.icon-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 780px;
}

.icon-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.icon-list__icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    margin-top: 3px;
}

/* ============================================
   CONTENT HERO - Section hero réutilisable (Story + Chapitre)
   ============================================ */

/**
 * Section hero avec cover image et overlay
 * Utilisé pour : pages story, pages chapitre
 * 
 * Structure :
 * .content-hero
 *   .content-hero__cover
 *     .content-hero__cover-image
 *     .content-hero__cover-overlay
 *   .content-hero__overlay-content (badges + titre sur cover)
 *   .content-hero__meta (zone blanche avec auteur + actions)
 */

.content-hero {
    --content-hero-cover-height: 300px;
    --content-hero-cover-height-mobile: 200px;
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
    /* Pas de overflow hidden pour permettre au dropdown de s'afficher */
}

/* Bordures selon l'état */
.content-hero--draft {
    border-left: 4px solid var(--color-warning);
}

.content-hero--archived {
    border-left: 4px solid var(--color-gray-400);
}

/* Couverture */
.content-hero__cover {
    position: relative;
    width: 100%;
    height: var(--content-hero-cover-height);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.content-hero__cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-hero__cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* Classes de masquage */
.content-hero__cover--hidden {
    display: none !important;
}

/* Contenu superposé sur la cover (badges + titre) */
.content-hero__overlay-content {
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    padding: var(--spacing-xl);
    z-index: 50;
    /* Assurer que le contenu est au-dessus de l'overlay */
    pointer-events: none;
}

.content-hero__overlay-content * {
    pointer-events: auto;
}

.content-hero__badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.content-hero__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    line-height: 1.2;
}

/* Zone meta (sous la cover, fond blanc) */
.content-hero__meta {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    flex-wrap: wrap;
}

/* Actions hero (à droite de l'auteur) */
.content-hero__actions {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.content-hero__actions .btn {
    white-space: nowrap;
}

/* Responsive Hero */
@media (max-width: 768px) {
    .content-hero__cover {
        height: var(--content-hero-cover-height-mobile);
    }
    
    .content-hero__overlay-content {
        padding: var(--spacing-md);
    }
    
    .content-hero__title {
        font-size: var(--font-size-xl);
    }
    
    .content-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .content-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .content-hero__badges {
        gap: var(--spacing-xs);
    }
    
    .content-hero__title {
        font-size: var(--font-size-lg);
    }
    
    .content-hero__actions .btn span:not(.visually-hidden) {
        display: none;
    }
    
    .content-hero__actions .btn {
        padding: var(--spacing-sm);
    }
}

/* ================================================================
   READING CONTENT - Blocs de contenu lisible
   Usage : descriptions, résumés, articles, contenus de lecture
   ================================================================ */

/**
 * Conteneur pour contenu de lecture optimisé
 * - Fond blanc avec ombre légère
 * - Largeur limitée pour confort de lecture
 * - Padding généreux
 * 
 * Utilisation:
 * <div class="reading-content">
 *   <div class="reading-content__body prose">
 *     <p>Contenu...</p>
 *   </div>
 * </div>
 */

.reading-content, .comments-wrapper {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}



.reading-content__body {
    max-width: 700px;
    margin: 0 auto;
}

/* Variante compacte (moins de padding) */
.reading-content--compact {
    padding: var(--spacing-lg);
}

/* Variante sans fond (juste la typo prose) */
.reading-content--plain {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ================================================================
   PROSE - Styles typographiques pour contenu long
   Applique une typographie optimisée pour la lecture
   ================================================================ */

.prose {
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--color-text);
}

.prose p {
    margin-bottom: 1.5em;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* Lettrine (première lettre en grand) */
.prose .reading-content__first-letter::first-letter,
.prose p:first-of-type.has-drop-cap::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 1;
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 0.5rem;
    margin-top: 0.1em;
}

/* Titres dans le prose */
.prose h2 {
    font-family: var(--font-sans);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 2em 0 1em;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-border);
}

.prose h3 {
    font-family: var(--font-sans);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 1.5em 0 0.75em;
}

/* Citations */
.prose blockquote {
    margin: 1.5em 0;
    padding: var(--spacing-lg);
    background: var(--color-bg);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.prose blockquote p {
    margin-bottom: 0;
}

/* Listes */
.prose ul,
.prose ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.prose li {
    margin-bottom: 0.5em;
}

/* Liens */
.prose a {
    color: var(--color-primary);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--color-primary-dark);
}

/* Emphase */
.prose strong {
    font-weight: 600;
}

.prose em {
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .reading-content {
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
    }
    
    .prose {
        font-size: 1rem;
    }
    
    .prose .reading-content__first-letter::first-letter,
    .prose p:first-of-type.has-drop-cap::first-letter {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .reading-content {
        padding: var(--spacing-md);
    }
    
    .prose h2 {
        font-size: var(--font-size-xl);
    }
}


/* ============================================
   PAGE HERO - Bandeau principal de page
   ============================================ */

/**
 * Bandeau héros réutilisable pour les pages.
 * Affiche un titre, un sous-titre et un encart latéral (solde, stat, etc.)
 *
 * Structure HTML :
 * <div class="page-hero">
 *   <div class="page-hero__content">
 *     <h1 class="page-hero__title">Titre</h1>
 *     <p class="page-hero__subtitle">Sous-titre</p>
 *   </div>
 *   <div class="page-hero__aside">
 *     <span class="page-hero__aside-label">Label</span>
 *     <span class="page-hero__aside-value">Valeur</span>
 *   </div>
 * </div>
 */

.page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg); */
    color: var(--color-text);
    margin-bottom: var(--spacing-xl);
    /* box-shadow: var(--shadow-lg); */
}

.page-hero__content {
    flex: 1;
}

.page-hero__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm);
}

.page-hero__subtitle {
    font-size: var(--font-size-base);
    opacity: 0.9;
    margin: 0;
    max-width: 600px;
    line-height: 1.6;
}

.page-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.page-hero__aside-label {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.page-hero__aside-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 2rem;
}

.page-hero__aside-value i {
    font-size: 1.5rem;
    opacity: 0.9;
}

.page-hero__aside-value strong {
    font-weight: var(--font-weight-bold);
}

.page-hero__aside-value span {
    font-size: var(--font-size-base);
    opacity: 0.8;
}

@media (max-width: 768px) {
    .page-hero {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-xl);
    }

    .page-hero__aside {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .page-hero__title {
        font-size: var(--font-size-xl);
    }

    .page-hero__aside-value {
        font-size: 1.5rem;
    }
}


/* ============================================
   PROMO BANNER - Bandeaux promotionnels / informatifs
   ============================================ */

/**
 * Bandeau horizontal réutilisable : icône + contenu + action.
 * Variantes de couleur via modificateurs.
 *
 * Structure HTML :
 * <div class="promo-banner promo-banner--primary">
 *   <div class="promo-banner__icon"><i class="fas fa-gift"></i></div>
 *   <div class="promo-banner__content">
 *     <h3 class="promo-banner__title">Titre</h3>
 *     <p class="promo-banner__text">Description</p>
 *   </div>
 *   <a href="#" class="btn btn--primary">Action</a>
 * </div>
 */

.promo-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-divider);
    margin: var(--spacing-lg) 0;
}

.promo-banner--primary {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0.1));
    border-color: rgba(var(--primary-rgb), 0.15);
}

.promo-banner--success {
    background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.05), rgba(var(--color-success-rgb), 0.1));
    border-color: rgba(var(--color-success-rgb), 0.2);
}

.promo-banner--warning {
    background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.05), rgba(var(--color-warning-rgb), 0.1));
    border-color: rgba(var(--color-warning-rgb), 0.2);
}

.promo-banner--info {
    background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.1));
    border-color: rgba(var(--color-info-rgb), 0.2);
}

.promo-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.promo-banner--primary .promo-banner__icon {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

.promo-banner--success .promo-banner__icon {
    background-color: rgba(var(--color-success-rgb), 0.15);
    color: var(--color-success);
}

.promo-banner--warning .promo-banner__icon {
    background-color: rgba(var(--color-warning-rgb), 0.15);
    color: var(--color-warning);
}

.promo-banner--info .promo-banner__icon {
    background-color: rgba(var(--color-info-rgb), 0.15);
    color: var(--color-info);
}

.promo-banner__content {
    flex: 1;
}

.promo-banner__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.promo-banner__text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .promo-banner {
        flex-direction: column;
        text-align: center;
    }
}


/* ============================================
   FEATURE PREVIEW - Bloc de prévisualisation
   ============================================ */

/**
 * Bloc « à venir » ou contexte d'une fonctionnalité.
 * Grille : icône | contenu | illustration.
 *
 * Structure HTML :
 * <div class="feature-preview">
 *   <div class="feature-preview__icon"><i class="fas fa-clock"></i></div>
 *   <div class="feature-preview__content">
 *     <h2 class="feature-preview__title">Titre</h2>
 *     <p class="feature-preview__text">Description</p>
 *     <div class="feature-preview__details">
 *       <h3 class="feature-preview__details-title">Sous-titre</h3>
 *       <ul class="check-list">
 *         <li><i class="fas fa-check-circle"></i> Élément</li>
 *       </ul>
 *     </div>
 *   </div>
 *   <div class="feature-preview__illustration">
 *     <img src="..." alt="">
 *   </div>
 * </div>
 */

.feature-preview {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-xl);
    align-items: start;
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-border);
    margin: var(--spacing-lg) 0;
}

.feature-preview__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.2));
    border-radius: 50%;
    font-size: 2rem;
    color: var(--primary-color);
}

.feature-preview__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm);
}

.feature-preview__text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg);
}

.feature-preview__details-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm);
}

.feature-preview__illustration {
    width: 200px;
    flex-shrink: 0;
}

.feature-preview__illustration img {
    width: 100%;
    height: auto;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .feature-preview {
        grid-template-columns: 1fr;
    }

    .feature-preview__icon {
        justify-self: center;
    }

    .feature-preview__illustration {
        display: none;
    }
}


/* ============================================
   CHECK LIST - Liste à coches
   ============================================ */

/**
 * Liste d'éléments avec icônes de validation.
 *
 * <ul class="check-list">
 *   <li><i class="fas fa-check-circle"></i> Élément validé</li>
 * </ul>
 */

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.check-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.check-list li i {
    color: var(--color-success);
    font-size: var(--font-size-sm);
}


/* ============================================
   BREADCRUMB — Fil d'Ariane réutilisable
   ============================================ */

/**
 * Fil d'Ariane générique pour la navigation hiérarchique.
 * Basé sur le modèle des pages de lecture de chapitre.
 *
 * Structure HTML :
 * <nav class="breadcrumb" aria-label="Fil d'Ariane">
 *   <a href="..." class="breadcrumb__link">
 *     <i class="fas fa-book-open"></i>
 *     <span>Lien parent</span>
 *   </a>
 *   <span class="breadcrumb__separator"><i class="fas fa-chevron-right"></i></span>
 *   <span class="breadcrumb__current">Page courante</span>
 * </nav>
 */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-primary-dark, var(--color-primary));
    text-decoration: underline;
}

.breadcrumb__link span {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb__separator {
    color: var(--color-text-tertiary);
    font-size: 0.75em;
}

.breadcrumb__current {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .breadcrumb__link span {
        max-width: 150px;
    }

    .breadcrumb__current {
        max-width: 200px;
    }
}


/* ============================================
   PAGE HERO — Extensions (centered, overline, badge, actions)
   ============================================ */

/**
 * Variante centrée du page-hero pour les pages d'exploration,
 * landing pages, etc.
 *
 * Structure HTML :
 * <div class="page-hero page-hero--centered">
 *   <p class="page-hero__overline">Surtitre</p>
 *   <div class="page-hero__badge"><i class="fas fa-compass"></i></div>
 *   <h1 class="page-hero__title">Titre</h1>
 *   <p class="page-hero__subtitle">Description</p>
 *   <div class="page-hero__actions">
 *     <a class="btn btn--primary btn--lg">Action</a>
 *   </div>
 * </div>
 */

.page-hero--centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
}

.page-hero--centered .page-hero__subtitle {
    max-width: 680px;
    margin: 0 auto;
}

.page-hero__overline {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hero-accent-color, var(--color-primary));
    margin: 0;
}

.page-hero__badge {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-white);
    background: var(--hero-accent-color, var(--color-primary));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--hero-accent-color, var(--color-primary)) 35%, transparent);
}

.page-hero__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

@media (max-width: 480px) {
    .page-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ============================================
   SECTION TYPOGRAPHY — Titres, sous-titres, surtitres réutilisables
   ============================================ */

/**
 * Classes de typographie pour structurer les sections de contenu.
 * Accepte --section-accent-color pour personnaliser les couleurs d'accent.
 *
 * Structure HTML :
 * <p class="section-overline">Surtitre</p>
 * <h2 class="section-title">Titre de section</h2>
 * <p class="section-subtitle">Description</p>
 */

.section-overline {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--section-accent-color, var(--color-primary));
    margin: 0 0 var(--spacing-xs);
}

.section-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md);
}

.section-title i {
    color: var(--section-accent-color, var(--color-primary));
}

.section-title--sm {
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title--sm i {
    color: var(--section-accent-color, var(--color-primary));
}

.section-subtitle {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 0 var(--spacing-lg);
}


/* ============================================
   SECTION BLOCKS — Sous-blocs réutilisables dans les sections
   ============================================ */

/**
 * Blocs de contenu au sein d'une section (stories, chapitres, etc.).
 * Le header peut contenir un titre et une action (bouton "voir tout").
 *
 * Structure HTML :
 * <div class="section-block">
 *   <div class="section-block__header">
 *     <h3 class="section-block__title"><i class="fas fa-book"></i> Titre</h3>
 *     <button class="btn btn--outline btn--sm">Voir tout</button>
 *   </div>
 *   <p class="section-block__desc">Description optionnelle</p>
 *   <!-- contenu (grille, liste…) -->
 * </div>
 */

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

.section-block:last-child {
    margin-bottom: 0;
}

.section-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.section-block__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    margin-top:var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-block__title i {
    color: var(--section-accent-color, var(--color-primary));
    font-size: 0.9em;
}

.section-block__desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm);
    max-width: 640px;
}


/* ============================================
   HIGHLIGHT CARD — Carte proéminente avec dégradé
   ============================================ */

/**
 * Carte mise en avant avec dégradé coloré, idéale pour afficher
 * un solde, un score, un total, etc.
 * Accepte --highlight-from et --highlight-to pour personnaliser le dégradé.
 *
 * Structure HTML :
 * <div class="highlight-card">
 *   <div class="highlight-card__icon"><i class="fas fa-wallet"></i></div>
 *   <div class="highlight-card__content">
 *     <span class="highlight-card__label">Label</span>
 *     <span class="highlight-card__amount">
 *       <span class="highlight-card__value">1 000</span>
 *       <span class="highlight-card__unit">crédits</span>
 *     </span>
 *   </div>
 * </div>
 */

.highlight-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--highlight-from, var(--primary-color)) 0%, var(--highlight-to, var(--primary-dark)) 100%);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

.highlight-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 2.5rem;
}

.highlight-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.highlight-card__label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highlight-card__amount {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.highlight-card__value {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.highlight-card__unit {
    font-size: var(--font-size-lg);
    opacity: 0.8;
}

@media (max-width: 768px) {
    .highlight-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-lg);
    }

    .highlight-card__icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .highlight-card__value {
        font-size: 2.5rem;
    }
}


/* ============================================
   STAT CARD — Carte statistique avec bordure d'accent
   ============================================ */

/**
 * Carte compacte pour afficher une statistique (total gagné, dépensé, etc.)
 * avec une bordure latérale colorée selon le contexte.
 *
 * Variantes : --success, --warning, --primary, --info
 *
 * Structure HTML :
 * <div class="stat-card stat-card--success">
 *   <div class="stat-card__icon"><i class="fas fa-arrow-down"></i></div>
 *   <div class="stat-card__content">
 *     <span class="stat-card__label">Label</span>
 *     <span class="stat-card__value">+1 000</span>
 *     <span class="stat-card__detail">5 transactions</span>
 *   </div>
 * </div>
 */

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.stat-card--success { border-left-color: var(--color-success); }
.stat-card--warning { border-left-color: var(--color-warning); }
.stat-card--primary { border-left-color: var(--primary-color); }
.stat-card--info    { border-left-color: var(--color-info); }

.stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.25rem;
}

.stat-card--success .stat-card__icon {
    background-color: rgba(var(--color-success-rgb), 0.15);
    color: var(--color-success);
}

.stat-card--warning .stat-card__icon {
    background-color: rgba(var(--color-warning-rgb), 0.15);
    color: var(--color-warning);
}

.stat-card--primary .stat-card__icon {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

.stat-card--info .stat-card__icon {
    background-color: rgba(var(--color-info-rgb), 0.15);
    color: var(--color-info);
}

.stat-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.stat-card__value {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
}

.stat-card--success .stat-card__value { color: var(--color-success); }
.stat-card--warning .stat-card__value { color: var(--color-warning); }
.stat-card--primary .stat-card__value { color: var(--primary-color); }
.stat-card--info    .stat-card__value { color: var(--color-info); }

.stat-card__detail {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}


/* ============================================
   STATUS CARD — Carte avec état (disponible/réclamé)
   ============================================ */

/**
 * Carte indiquant un statut binaire : disponible ou réclamé.
 * Idéale pour les bonus, récompenses, objectifs, etc.
 *
 * Variantes d'état : --available, --claimed
 * Variantes de layout : (défaut) vertical centré, --inline horizontal
 *
 * Structure HTML (vertical) :
 * <div class="status-card status-card--available">
 *   <div class="status-card__icon"><i class="fas fa-gift"></i></div>
 *   <div class="status-card__content">
 *     <span class="status-card__name">Bonus quotidien</span>
 *     <span class="status-card__value">+5</span>
 *     <span class="status-card__status">Disponible</span>
 *   </div>
 *   <button class="btn status-card__action">Réclamer</button>
 * </div>
 *
 * Structure HTML (inline) :
 * <div class="status-card status-card--inline status-card--available">
 *   <div class="status-card__icon"><i class="fas fa-gift"></i></div>
 *   <div class="status-card__content">
 *     <span class="status-card__name">Bonus</span>
 *     <span class="status-card__value">+5</span>
 *     <span class="status-card__detail">Description</span>
 *   </div>
 * </div>
 */

.status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
}

.status-card--available {
    border-color: var(--color-success);
}

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

.status-card--claimed {
    opacity: 0.7;
}

.status-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.status-card--available .status-card__icon {
    background-color: rgba(var(--color-success-rgb), 0.15);
    color: var(--color-success);
}

.status-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    margin-bottom: var(--spacing-md);
}

.status-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.status-card__value {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
}

.status-card__status {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.status-card--available .status-card__status {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.status-card__detail {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.status-card__action {
    width: 100%;
}

/* Status card inline variant (horizontal) */
.status-card--inline {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-width: 1px;
}

.status-card--inline .status-card__icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.status-card--inline .status-card__content {
    gap: 2px;
    margin-bottom: 0;
}

.status-card--inline .status-card__value {
    font-size: var(--font-size-base);
}

.status-card--inline:hover {
    box-shadow: var(--shadow-sm);
}


/* ============================================
   AUTO GRID — Grille responsive automatique
   ============================================ */

/**
 * Grille responsive avec auto-fit/auto-fill.
 * Accepte --grid-min (largeur min par item, défaut 200px).
 *
 * Structure HTML :
 * <div class="auto-grid" style="--grid-min: 250px">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </div>
 */

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 200px), 1fr));
    gap: var(--spacing-md);
}

.auto-grid--lg {
    gap: var(--spacing-lg);
}

.auto-grid--sm {
    gap: var(--spacing-sm);
}

@media (max-width: 768px) {
    .auto-grid {
        grid-template-columns: 1fr;
    }
}