/**
 * ============================================================================
 * STAMOVA-THEME.CSS - Système de Design Unifié
 * ============================================================================
 * 
 * Ce fichier CSS contient tous les styles du thème CLAIR Stamova (fond blanc).
 * Le thème sombre historique a été déposé le 2026-09-04 : il n'y a plus qu'un
 * seul thème, il n'y a donc PAS de bascule clair/sombre à maintenir.
 * Il doit être inclus dans header.php pour une cohérence sur tout le site.
 * 
 * STRUCTURE DU FICHIER :
 * 1. Variables CSS (couleurs, espacements, etc.)
 * 2. Styles de base (body, typographie)
 * 3. Composants réutilisables (cartes, boutons, formulaires)
 * 4. Grilles et layouts
 * 5. Alertes et notifications
 * 6. Tables
 * 7. Graphiques
 * 8. Utilitaires
 * 9. Responsive
 * 
 * @author Stamova
 * @version 1.0
 * @date Novembre 2025
 * ============================================================================
 */

/* ============================================================================
   1. VARIABLES CSS - Personnalisation facile des couleurs et espacements
   ============================================================================ */
:root {
    /* ========================================================================
       ÉCHELLE SÉMANTIQUE — LE SEUL ENDROIT OÙ LE THÈME SE DÉCIDE
       ========================================================================
       Les valeurs ci-dessous sont celles du thème CLAIR (le défaut, et le seul
       que voit un visiteur). Le bloc `[data-bs-theme="dark"]` plus bas les
       redéfinit : TOUTE règle écrite avec ces jetons bascule alors sans qu'on
       y touche.

       ⚠️ RÈGLE : dans le CRM, on n'écrit plus une couleur en dur. Une valeur
       figée reste identique dans les deux modes, c'est-à-dire illisible dans
       l'un des deux. C'est exactement ce qui a coûté les régressions du
       2026-09-04 (voir CLAUDE.md).

       `--stm-ink*` : l'encre, du plus affirmé au plus discret.
       `--stm-surface*` : les fonds posés SUR la page, du plus léger au plus marqué.
       `--stm-line*` : les séparations.
       ======================================================================== */
    --stm-page:        #ffffff;            /* le fond de la page */
    --stm-ink:         #0f172a;            /* titres, valeurs, texte affirmé */
    --stm-ink-2:       #1e293b;            /* texte fort */
    --stm-ink-3:       #334155;            /* texte courant */
    --stm-ink-4:       #475569;            /* texte secondaire */
    --stm-ink-5:       #64748b;            /* libellés, texte discret */
    --stm-surface-1:   rgba(15, 23, 42, 0.022);   /* carte, tuile */
    --stm-surface-2:   rgba(15, 23, 42, 0.038);   /* survol, champ */
    --stm-surface-3:   rgba(15, 23, 42, 0.075);   /* pastille, compteur */
    --stm-line:        rgba(15, 23, 42, 0.112);   /* bordure courante */
    --stm-line-strong: rgba(15, 23, 42, 0.18);    /* bordure marquée */
    /* Le « chrome » de l'application : la barre du haut et le rail de gauche.
       Ils ne suivent pas `--stm-page` : ils s'en détachent légèrement, sinon
       la sidebar et le contenu forment une seule surface sans limite. */
    --stm-bar:  rgba(255, 255, 255, 0.92);
    --stm-rail: #fbfcfe;

    /* Un fond OPAQUE, pour ce qui ne supporte pas la transparence : un
       <select>, un menu déroulant, une modale. */
    --stm-field:       #ffffff;
    --stm-field-hover: #f1f5f9;

    /* Les accents en TEXTE. Le violet de marque reste #667eea partout ; ces
       deux-là sont sa déclinaison lisible, qui doit s'inverser avec le thème. */
    --stm-accent:      #4f46e5;            /* liens, valeurs mises en avant */
    --stm-accent-2:    #7c3aed;            /* second accent (violet clair) */

    /* Le voile derrière les modales et le menu mobile. */
    --stm-veil:        #0f172a;
    --stm-veil-alpha:  0.22;

    /* === Couleurs principales === */
    --stm-bg-gradient-start: #ffffff;      /* Début du gradient de fond */
    --stm-bg-gradient-mid: #f8fafc;        /* Milieu du gradient */
    --stm-bg-gradient-end: #f8fafc;        /* Fin du gradient */
    
    /* === Couleurs d'accent === */
    --stm-primary: #667eea;                /* Violet principal */
    --stm-primary-dark: #764ba2;           /* Violet foncé */
    --stm-primary-light: #7c94f4;          /* Violet clair */
    
    /* === Couleurs de statut === */
    --stm-success: #047857;                /* Vert succès */
    --stm-success-bg: rgba(16, 185, 129, 0.1);
    --stm-success-border: rgba(16, 185, 129, 0.3);
    
    --stm-warning: #b45309;                /* Orange avertissement */
    --stm-warning-bg: rgba(245, 158, 11, 0.1);
    --stm-warning-border: rgba(245, 158, 11, 0.3);
    
    --stm-danger: #dc2626;                 /* Rouge danger */
    --stm-danger-bg: rgba(239, 68, 68, 0.1);
    --stm-danger-border: rgba(239, 68, 68, 0.3);
    
    --stm-info: #1d4ed8;                   /* Bleu info */
    --stm-info-bg: rgba(59, 130, 246, 0.1);
    --stm-info-border: rgba(59, 130, 246, 0.3);
    
    /* === Couleurs de texte === */
    --stm-text-primary: #0f172a;           /* Texte principal (blanc) */
    --stm-text-secondary: #4b5563;         /* Texte secondaire (gris clair) */
    --stm-text-muted: #6b7280;             /* Texte discret */
    --stm-text-light: #1e293b;             /* Texte clair */
    
    /* === Couleurs de fond pour les cartes === */
    --stm-card-bg: rgba(15, 23, 42, 0.013);
    --stm-card-bg-hover: rgba(15, 23, 42, 0.021);
    --stm-card-border: rgba(15, 23, 42, 0.14);
    --stm-card-border-hover: rgba(15, 23, 42, 0.18);
    
    /* === Formulaires === */
    --stm-input-bg: rgba(15, 23, 42, 0.013);
    --stm-input-bg-focus: rgba(15, 23, 42, 0.021);
    --stm-input-border: rgba(15, 23, 42, 0.14);
    --stm-input-border-focus: var(--stm-primary);
    --stm-input-text: #1e293b;
    
    /* === Espacements === */
    --stm-spacing-xs: 0.25rem;
    --stm-spacing-sm: 0.5rem;
    --stm-spacing-md: 1rem;
    --stm-spacing-lg: 1.5rem;
    --stm-spacing-xl: 2rem;
    
    /* === Rayons de bordure === */
    --stm-radius-sm: 6px;
    --stm-radius-md: 8px;
    --stm-radius-lg: 12px;
    --stm-radius-xl: 16px;
    
    /* === Ombres === */
    --stm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --stm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --stm-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* === Transitions === */
    --stm-transition-fast: 0.15s ease;
    --stm-transition-normal: 0.3s ease;
}

/* ============================================================================
   2. STYLES DE BASE
   ============================================================================ */

/* === Reset HTML === */
html {
    min-height: 100%;
    /* ⚠️ `html` DOIT porter un fond, sinon le navigateur peint sa propre toile
       dans tout ce qui dépasse du <body> : le rebond élastique en bas d'un
       téléphone, la zone sous une modale plus haute que la page, la barre du
       navigateur. Sur un téléphone réglé en mode sombre, cette toile est
       NOIRE — d'où la bande noire signalée en bas de la modale de rappel.
       `color-scheme: light` ne suffit pas : tous les navigateurs mobiles ne
       l'appliquent pas à cette zone. */
    background: var(--stm-page, #ffffff);
}

/* === Body avec gradient de fond et layout flex === */
body {
    background: var(--stm-bg-gradient-start);
    min-height: 100vh;
    color: var(--stm-text-light);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Layout flex pour sidebar pleine hauteur */
    display: flex;
    flex-direction: column;
}

/* === Layout principal - Sidebar pleine hauteur === */
body > .container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body > .container-fluid > .row {
    flex: 1;
    display: flex;
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* === Typographie === */
h1, h2, h3, h4, h5, h6 {
    color: var(--stm-text-primary);
    font-weight: 600;
}

p {
    color: var(--stm-text-secondary);
    line-height: 1.6;
}

a {
    color: var(--stm-primary);
    text-decoration: none;
    transition: color var(--stm-transition-fast);
}

/* ⚠️ CETTE RÈGLE NE DOIT PAS TOUCHER LES BOUTONS.
   Écrite sur `a:hover` sans exception, elle repeignait le texte de tout <a>
   stylé en bouton : au survol, « Être rappelé » passait de blanc à violet
   clair SUR son propre aplat violet, donc illisible. Un bouton porte sa
   couleur de texte dans sa propre règle, on la laisse tranquille.
   `--stm-accent` plutôt que `--stm-primary-light` : ce dernier ne tient que
   2,9:1 sur du blanc. */
a:not([class*="btn"]):not(.nav-link):not(.navbar-brand):hover {
    color: var(--stm-accent);
}

/* ============================================================================
   3. COMPOSANTS RÉUTILISABLES
   ============================================================================ */

/* === Cartes Glassmorphism === 
   Utilisation : <div class="stm-card">...</div>
*/
.stm-card {
    background: var(--stm-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-lg);
    padding: var(--stm-spacing-lg);
    margin-bottom: var(--stm-spacing-lg);
    transition: all var(--stm-transition-normal);
}

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

/* Carte sans effet hover (pour les conteneurs statiques) */
.stm-card-static {
    background: var(--stm-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-lg);
    padding: var(--stm-spacing-lg);
    margin-bottom: var(--stm-spacing-lg);
}

/* === Titres de section === */
.stm-section-title {
    color: var(--stm-text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: var(--stm-spacing-md);
    padding-bottom: var(--stm-spacing-sm);
    border-bottom: 2px solid var(--stm-card-border);
}

.stm-section-subtitle {
    color: var(--stm-text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--stm-spacing-lg);
}

/* === Boutons === */

/* Bouton primaire avec gradient */
.stm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--stm-spacing-sm);
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--stm-primary) 0%, var(--stm-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--stm-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--stm-transition-fast);
    text-decoration: none;
}

.stm-btn-primary:hover {
    background: linear-gradient(135deg, var(--stm-primary-dark) 0%, var(--stm-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: white;
}

/* Bouton secondaire (outline) */
.stm-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--stm-spacing-sm);
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--stm-text-light);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--stm-transition-fast);
    text-decoration: none;
}

.stm-btn-secondary:hover {
    background: var(--stm-card-bg-hover);
    border-color: var(--stm-card-border-hover);
    color: var(--stm-text-primary);
}

/* Bouton danger */
.stm-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--stm-spacing-sm);
    padding: 0.625rem 1.25rem;
    background: var(--stm-danger-bg);
    color: var(--stm-danger);
    border: 1px solid var(--stm-danger-border);
    border-radius: var(--stm-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--stm-transition-fast);
    text-decoration: none;
}

.stm-btn-danger:hover {
    background: var(--stm-danger);
    color: white;
}

/* Bouton succès */
.stm-btn-success {
    display: inline-flex;
    align-items: center;
    gap: var(--stm-spacing-sm);
    padding: 0.625rem 1.25rem;
    background: var(--stm-success-bg);
    color: var(--stm-success);
    border: 1px solid var(--stm-success-border);
    border-radius: var(--stm-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--stm-transition-fast);
    text-decoration: none;
}

.stm-btn-success:hover {
    background: var(--stm-success);
    color: white;
}

/* Petit bouton */
.stm-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* === Formulaires === */

/* Labels */
.stm-label {
    display: block;
    color: var(--stm-text-light);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: var(--stm-spacing-xs);
}

/* Inputs et selects */
.stm-input,
.stm-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--stm-input-bg);
    border: 1px solid var(--stm-input-border);
    border-radius: var(--stm-radius-md);
    color: var(--stm-input-text);
    font-size: 0.875rem;
    transition: all var(--stm-transition-fast);
}

.stm-input:focus,
.stm-select:focus {
    outline: none;
    background: var(--stm-input-bg-focus);
    border-color: var(--stm-input-border-focus);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.stm-input::placeholder {
    color: var(--stm-text-muted);
}

/* Options dans les select (pour navigateurs compatibles) */
.stm-select option {
    background: var(--stm-surface-1);
    color: var(--stm-text-light);
    padding: 10px;
}

.stm-select optgroup {
    background: var(--stm-surface-1);
    color: var(--stm-text-secondary);
    font-weight: 600;
}

/* Textarea */
.stm-textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.625rem 0.875rem;
    background: var(--stm-input-bg);
    border: 1px solid var(--stm-input-border);
    border-radius: var(--stm-radius-md);
    color: var(--stm-input-text);
    font-size: 0.875rem;
    resize: vertical;
    transition: all var(--stm-transition-fast);
}

.stm-textarea:focus {
    outline: none;
    background: var(--stm-input-bg-focus);
    border-color: var(--stm-input-border-focus);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Checkboxes et radios personnalisés */
.stm-checkbox,
.stm-radio {
    width: 18px;
    height: 18px;
    background-color: var(--stm-input-bg);
    border: 1px solid var(--stm-line-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--stm-transition-fast);
}

.stm-radio {
    border-radius: 50%;
}

.stm-checkbox:checked,
.stm-radio:checked {
    background-color: var(--stm-primary);
    border-color: var(--stm-primary);
}

/* Groupe de formulaire */
.stm-form-group {
    margin-bottom: var(--stm-spacing-md);
}

/* Texte d'aide */
.stm-form-help {
    font-size: 0.75rem;
    color: var(--stm-text-muted);
    margin-top: var(--stm-spacing-xs);
}

/* Input file stylisé */
.stm-input-file {
    padding: 0.5rem;
}

.stm-input-file::file-selector-button {
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: var(--stm-accent);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--stm-transition-fast);
    margin-right: 0.5rem;
}

.stm-input-file::file-selector-button:hover {
    background: rgba(102, 126, 234, 0.3);
}

/* === Badges === */
.stm-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--stm-radius-sm);
}

.stm-badge-primary {
    background: rgba(102, 126, 234, 0.2);
    color: var(--stm-primary-light);
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.stm-badge-success {
    background: var(--stm-success-bg);
    color: var(--stm-success);
    border: 1px solid var(--stm-success-border);
}

.stm-badge-warning {
    background: var(--stm-warning-bg);
    color: var(--stm-warning);
    border: 1px solid var(--stm-warning-border);
}

.stm-badge-danger {
    background: var(--stm-danger-bg);
    color: var(--stm-danger);
    border: 1px solid var(--stm-danger-border);
}

.stm-badge-info {
    background: var(--stm-info-bg);
    color: var(--stm-info);
    border: 1px solid var(--stm-info-border);
}

.stm-badge-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: var(--stm-text-secondary);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ============================================================================
   4. GRILLES ET LAYOUTS
   ============================================================================ */

/* Conteneur principal du dashboard */
.stm-dashboard-container {
    max-width: 100%;
    padding: 0 var(--stm-spacing-lg);
    margin: 0 auto;
}

/* Titre de page */
.stm-page-header {
    margin-bottom: var(--stm-spacing-xl);
}

.stm-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--stm-text-primary);
    margin-bottom: var(--stm-spacing-xs);
}

.stm-page-subtitle {
    font-size: 0.875rem;
    color: var(--stm-text-secondary);
}

/* Grille de statistiques */
.stm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--stm-spacing-lg);
    margin-bottom: var(--stm-spacing-xl);
}

/* Carte de statistique */
.stm-stat-card {
    background: var(--stm-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-lg);
    padding: var(--stm-spacing-lg);
    transition: all var(--stm-transition-normal);
}

.stm-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--stm-card-border-hover);
    box-shadow: var(--stm-shadow-lg);
}

.stm-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--stm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--stm-spacing-md);
    font-size: 1.5rem;
}

.stm-stat-icon.icon-primary {
    background: rgba(102, 126, 234, 0.2);
    color: var(--stm-primary);
}

.stm-stat-icon.icon-success {
    background: var(--stm-success-bg);
    color: var(--stm-success);
}

.stm-stat-icon.icon-warning {
    background: var(--stm-warning-bg);
    color: var(--stm-warning);
}

.stm-stat-icon.icon-info {
    background: var(--stm-info-bg);
    color: var(--stm-info);
}

.stm-stat-label {
    font-size: 0.8125rem;
    color: var(--stm-text-secondary);
    font-weight: 500;
    margin-bottom: var(--stm-spacing-sm);
}

.stm-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--stm-text-primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.stm-stat-subtitle {
    font-size: 0.75rem;
    color: var(--stm-text-muted);
}

/* Grille de graphiques */
.stm-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--stm-spacing-lg);
    margin-bottom: var(--stm-spacing-xl);
}

@media (max-width: 992px) {
    .stm-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Grille flexible */
.stm-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--stm-spacing-lg);
}

.stm-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--stm-spacing-lg);
}

@media (max-width: 768px) {
    .stm-grid-2,
    .stm-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   5. ALERTES ET NOTIFICATIONS
   ============================================================================ */

.stm-alert {
    padding: var(--stm-spacing-md) var(--stm-spacing-lg);
    border-radius: var(--stm-radius-md);
    margin-bottom: var(--stm-spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--stm-spacing-md);
}

.stm-alert-success {
    background: var(--stm-success-bg);
    border: 1px solid var(--stm-success-border);
    color: var(--stm-success);
}

.stm-alert-warning {
    background: var(--stm-warning-bg);
    border: 1px solid var(--stm-warning-border);
    color: var(--stm-warning);
}

.stm-alert-danger {
    background: var(--stm-danger-bg);
    border: 1px solid var(--stm-danger-border);
    color: var(--stm-danger);
}

.stm-alert-info {
    background: var(--stm-info-bg);
    border: 1px solid var(--stm-info-border);
    color: var(--stm-info);
}

.stm-alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stm-alert-content {
    flex: 1;
}

.stm-alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stm-alert-text {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ============================================================================
   6. TABLES
   ============================================================================ */

.stm-table-container {
    overflow-x: auto;
    border-radius: var(--stm-radius-md);
}

.stm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.stm-table thead {
    background: var(--stm-surface-1);
}

.stm-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--stm-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--stm-card-border);
}

.stm-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--stm-line);
    color: var(--stm-text-light);
    vertical-align: middle;
}

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

.stm-table tbody tr:hover {
    background: var(--stm-surface-1);
}

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

/* Cellule avec plusieurs lignes de contenu */
.stm-table-cell-main {
    font-weight: 500;
    color: var(--stm-text-primary);
}

.stm-table-cell-sub {
    font-size: 0.75rem;
    color: var(--stm-text-muted);
    margin-top: 0.125rem;
}

/* ============================================================================
   7. GRAPHIQUES
   ============================================================================ */

.stm-chart-card {
    background: var(--stm-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-lg);
    padding: var(--stm-spacing-lg);
}

.stm-chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--stm-text-primary);
    margin-bottom: var(--stm-spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--stm-spacing-sm);
}

.stm-chart-title i {
    font-size: 1.25rem;
    color: var(--stm-primary);
}

.stm-chart-container {
    position: relative;
    height: 300px;
}

/* Styles SVG pour les graphiques */
.stm-chart-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stm-chart-area {
    opacity: 0.15;
}

.stm-chart-grid {
    stroke: rgba(15, 23, 42, 0.55);
    stroke-width: 1;
}

.stm-chart-label {
    font-size: 11px;
    fill: var(--stm-text-muted);
}

.stm-chart-dot {
    transition: r 0.2s;
}

.stm-chart-dot:hover {
    r: 6;
}

/* ============================================================================
   8. COMPOSANTS SPÉCIFIQUES
   ============================================================================ */

/* === Filtres === */
.stm-filters {
    background: var(--stm-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-lg);
    padding: var(--stm-spacing-lg);
    margin-bottom: var(--stm-spacing-xl);
}

.stm-filters-row {
    display: flex;
    gap: var(--stm-spacing-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.stm-filter-group {
    flex: 1;
    min-width: 180px;
}

.stm-filter-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--stm-text-secondary);
    margin-bottom: var(--stm-spacing-xs);
}

/* === Onglets === */
.stm-tabs {
    border-bottom: 2px solid var(--stm-card-border);
    margin-bottom: var(--stm-spacing-lg);
}

.stm-tabs .nav-link {
    color: var(--stm-text-secondary);
    border: none;
    padding: 0.75rem 1.5rem;
    transition: all var(--stm-transition-normal);
    background: transparent;
}

.stm-tabs .nav-link:hover {
    color: var(--stm-text-primary);
    background: var(--stm-surface-1);
}

.stm-tabs .nav-link.active {
    color: var(--stm-text-primary);
    background: rgba(102, 126, 234, 0.2);
    border-bottom: 3px solid var(--stm-primary);
}

/* === Liste d'items === */
.stm-list-item {
    display: flex;
    align-items: center;
    gap: var(--stm-spacing-md);
    padding: var(--stm-spacing-md);
    background: var(--stm-surface-1);
    border: 1px solid var(--stm-card-border);
    border-radius: var(--stm-radius-md);
    margin-bottom: var(--stm-spacing-sm);
    transition: all var(--stm-transition-fast);
}

.stm-list-item:hover {
    background: var(--stm-surface-1);
    border-color: var(--stm-card-border-hover);
}

.stm-list-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--stm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.stm-list-item-title {
    font-weight: 500;
    color: var(--stm-text-primary);
    margin-bottom: 0.125rem;
}

.stm-list-item-subtitle {
    font-size: 0.75rem;
    color: var(--stm-text-muted);
}

.stm-list-item-actions {
    display: flex;
    gap: var(--stm-spacing-sm);
}

/* === Avatar/Logo === */
.stm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--stm-card-border);
}

.stm-avatar-lg {
    width: 64px;
    height: 64px;
}

.stm-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--stm-radius-md);
    object-fit: cover;
    border: 1px solid var(--stm-card-border);
}

/* === Barre de progression === */
.stm-progress {
    height: 8px;
    background: var(--stm-surface-2);
    border-radius: var(--stm-radius-lg);
    overflow: hidden;
}

.stm-progress-bar {
    height: 100%;
    border-radius: var(--stm-radius-lg);
    transition: width var(--stm-transition-normal);
}

.stm-progress-bar-primary {
    background: var(--stm-primary);
}

.stm-progress-bar-success {
    background: var(--stm-success);
}

.stm-progress-bar-warning {
    background: var(--stm-warning);
}

.stm-progress-bar-danger {
    background: var(--stm-danger);
}

/* === État vide === */
.stm-empty-state {
    text-align: center;
    padding: var(--stm-spacing-xl) var(--stm-spacing-lg);
}

.stm-empty-state-icon {
    font-size: 3rem;
    color: var(--stm-text-muted);
    margin-bottom: var(--stm-spacing-md);
    opacity: 0.5;
}

.stm-empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--stm-text-secondary);
    margin-bottom: var(--stm-spacing-sm);
}

.stm-empty-state-text {
    font-size: 0.875rem;
    color: var(--stm-text-muted);
    margin-bottom: var(--stm-spacing-lg);
}

/* ============================================================================
   9. UTILITAIRES
   ============================================================================ */

/* Couleurs de texte */
.stm-text-primary { color: var(--stm-text-primary) !important; }
.stm-text-secondary { color: var(--stm-text-secondary) !important; }
.stm-text-muted { color: var(--stm-text-muted) !important; }
.stm-text-success { color: var(--stm-success) !important; }
.stm-text-warning { color: var(--stm-warning) !important; }
.stm-text-danger { color: var(--stm-danger) !important; }
.stm-text-info { color: var(--stm-info) !important; }

/* Fonds */
.stm-bg-glass {
    background: var(--stm-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Bordures */
.stm-border {
    border: 1px solid var(--stm-card-border) !important;
}

.stm-border-top {
    border-top: 1px solid var(--stm-card-border) !important;
}

.stm-border-bottom {
    border-bottom: 1px solid var(--stm-card-border) !important;
}

/* Espacements */
.stm-mt-0 { margin-top: 0 !important; }
.stm-mt-1 { margin-top: var(--stm-spacing-sm) !important; }
.stm-mt-2 { margin-top: var(--stm-spacing-md) !important; }
.stm-mt-3 { margin-top: var(--stm-spacing-lg) !important; }
.stm-mt-4 { margin-top: var(--stm-spacing-xl) !important; }

.stm-mb-0 { margin-bottom: 0 !important; }
.stm-mb-1 { margin-bottom: var(--stm-spacing-sm) !important; }
.stm-mb-2 { margin-bottom: var(--stm-spacing-md) !important; }
.stm-mb-3 { margin-bottom: var(--stm-spacing-lg) !important; }
.stm-mb-4 { margin-bottom: var(--stm-spacing-xl) !important; }

/* Rayons */
.stm-rounded { border-radius: var(--stm-radius-md) !important; }
.stm-rounded-lg { border-radius: var(--stm-radius-lg) !important; }

/* ============================================================================
   10. SIDEBAR / MENU LATÉRAL - CORRECTION DÉPASSEMENT TEXTE + PLEINE HAUTEUR
   ============================================================================ */

/* Conteneur de la sidebar - s'étend jusqu'en bas */
.sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent !important;
    border-right: 1px solid var(--stm-line) !important;
    /* Flexbox pour s'étendre */
    display: flex;
    flex-direction: column;
    /* Hauteur minimum pour desktop */
    min-height: calc(100vh - 56px);
    /* Position sticky pour rester visible */
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
}

/* Navigation dans la sidebar */
.sidebar > .nav {
    flex: 1;
}

/* Liens de navigation dans la sidebar */
.sidebar .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Sous-menu des automatisations */
.sidebar .submenu {
    padding-left: 0.5rem;
    margin: 0.25rem 0;
}

.sidebar .submenu .nav-link {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    padding-left: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Tooltip au survol pour les textes tronqués */
.sidebar .nav-link[title] {
    position: relative;
}

/* ============================================================================
   11. RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .stm-dashboard-container {
        padding: 0 var(--stm-spacing-md);
    }
    
    .stm-page-title {
        font-size: 1.5rem;
    }
    
    .stm-stat-value {
        font-size: 1.5rem;
    }
    
    .stm-card {
        padding: var(--stm-spacing-md);
    }
    
    .stm-filters-row {
        flex-direction: column;
    }
    
    .stm-filter-group {
        width: 100%;
    }
}

/* ============================================================================
   11. SURCHARGE BOOTSTRAP (pour cohérence du thème)
   ============================================================================ */

/* Override Bootstrap form controls pour le thème clair */
.form-control,
.form-select {
    background: var(--stm-input-bg);
    border: 1px solid var(--stm-input-border);
    color: var(--stm-input-text);
}

.form-control:focus,
.form-select:focus {
    background: var(--stm-input-bg-focus);
    border-color: var(--stm-input-border-focus);
    color: var(--stm-text-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

.form-control::placeholder {
    color: var(--stm-text-muted);
}

.form-label {
    color: var(--stm-text-light);
    font-weight: 500;
}

.form-check-input {
    background-color: var(--stm-input-bg);
    border-color: var(--stm-line-strong);
}

.form-check-input:checked {
    background-color: var(--stm-primary);
    border-color: var(--stm-primary);
}

.form-check-label {
    color: var(--stm-text-light);
}

/* Override Bootstrap buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--stm-primary) 0%, var(--stm-primary-dark) 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--stm-primary-dark) 0%, var(--stm-primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Override Bootstrap alerts */
.alert {
    border: none;
    border-radius: var(--stm-radius-md);
}

.alert-success {
    background: var(--stm-success-bg);
    color: var(--stm-success);
    border: 1px solid var(--stm-success-border);
}

.alert-warning {
    background: var(--stm-warning-bg);
    color: var(--stm-warning);
    border: 1px solid var(--stm-warning-border);
}

.alert-danger {
    background: var(--stm-danger-bg);
    color: var(--stm-danger);
    border: 1px solid var(--stm-danger-border);
}

.alert-info {
    background: var(--stm-info-bg);
    color: var(--stm-info);
    border: 1px solid var(--stm-info-border);
}

/* Override Bootstrap list-group */
.list-group-item {
    background: var(--stm-surface-1);
    border-color: var(--stm-card-border);
    color: var(--stm-text-light);
}

.list-group-item:hover {
    background: var(--stm-surface-1);
}

/* Override Bootstrap nav-tabs */
.nav-tabs {
    border-bottom: 2px solid var(--stm-card-border);
}

.nav-tabs .nav-link {
    color: var(--stm-text-secondary);
    border: none;
}

.nav-tabs .nav-link:hover {
    color: var(--stm-text-primary);
    background: var(--stm-surface-1);
}

.nav-tabs .nav-link.active {
    color: var(--stm-text-primary);
    background: rgba(102, 126, 234, 0.2);
    border-bottom: 3px solid var(--stm-primary);
}

/* Override Bootstrap badges */
.badge {
    padding: 0.4rem 0.8rem;
    font-weight: 500;
    border-radius: var(--stm-radius-sm);
}

.badge.bg-success {
    background: var(--stm-success-bg) !important;
    color: var(--stm-success);
    border: 1px solid var(--stm-success-border);
}

.badge.bg-warning {
    background: var(--stm-warning-bg) !important;
    color: var(--stm-warning);
    border: 1px solid var(--stm-warning-border);
}

.badge.bg-danger {
    background: var(--stm-danger-bg) !important;
    color: var(--stm-danger);
    border: 1px solid var(--stm-danger-border);
}

.badge.bg-info {
    background: var(--stm-info-bg) !important;
    color: var(--stm-info);
    border: 1px solid var(--stm-info-border);
}

.badge.bg-secondary {
    background: rgba(107, 114, 128, 0.2) !important;
    color: var(--stm-text-secondary);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Override .text-secondary */
.text-secondary {
    color: var(--stm-text-secondary) !important;
}

/* Override .text-muted */
.text-muted {
    color: var(--stm-text-muted) !important;
}
/* ============================================================================
   🔴 BOUTONS EN SURBRILLANCE — RETIRÉ LE 23/08/2026
   ----------------------------------------------------------------------------
   Demande : « retire le brillant autour ».

   Il y avait deux effets superposés sur tout bouton d'action principale :
     * `stm-glow`  : l'ombre portée pulsait en permanence ;
     * `stm-shine` : un reflet blanc balayait le bouton toutes les 3,6 s.

   Ce qu'ils coûtaient : un bouton qui bouge tout seul se lit comme un élément
   en cours de chargement, et le reflet blanc traversant abaisse le contraste du
   libellé à chaque passage. Sur une page qui en compte plusieurs, l'écran ne
   tient plus en place.

   🔴 LE MÊME BLOC EXISTAIT EN DOUBLE : ici et dans
   `assets/stamova-skin-2026.css`. Les deux feuilles sont chargées, celle-ci en
   premier. Ne retirer l'effet que d'un seul fichier n'aurait rien changé à
   l'écran — c'est le piège de cette correction.

   ⚠️ `position: relative` est conservé : plusieurs de ces boutons portent des
   pastilles positionnées en absolu (compteur de panier, badge « nouveau ») qui
   se placeraient par rapport à la page entière sans lui.

   ℹ️ Les keyframes `stm-glow` / `stm-shine` sont supprimées avec les règles qui
   les appelaient : plus rien dans le site ne s'y réfère (vérifié le 23/08).
   ============================================================================ */

.btn-hero-primary,
.btn-register,
.btn-checkout,
.tv-submit,
.otp-submit,
.rs-btn.primary,
.btn-gestion-primary,
.btn-card.btn-add,
.btn-primary:not(.btn-outline-primary),
.btn-success {
    position: relative;
}

/* Un bouton désactivé ne doit rien promettre */
.btn:disabled, .btn-disabled, [disabled] { animation: none !important; }
.btn:disabled::after, .btn-disabled::after, [disabled]::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .btn-hero-primary, .btn-register, .btn-checkout, .tv-submit, .otp-submit,
    .rs-btn.primary, .btn-gestion-primary, .btn-card.btn-add,
    .btn-primary, .btn-success { animation: none; }
    .btn-hero-primary::after, .btn-register::after, .btn-checkout::after,
    .tv-submit::after, .otp-submit::after, .rs-btn.primary::after,
    .btn-gestion-primary::after, .btn-card.btn-add::after,
    .btn-primary::after, .btn-success::after { display: none; }
}

/* ⚠️ Un `<a>` est `display: inline` par défaut, et `overflow: hidden` n'a
   AUCUN effet sur un élément inline : le reflet débordait donc du bouton.
   Il faut forcer un mode d'affichage en bloc. */
.btn-hero-primary,
.btn-register,
.btn-checkout,
.tv-submit,
.otp-submit,
.rs-btn.primary,
.btn-gestion-primary,
.btn-card.btn-add,
.btn-primary:not(.btn-outline-primary),
.btn-success {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    isolation: isolate;   /* le reflet reste dans le bouton, jamais au-dessus du reste */
}

/* ============================================================================
   CHAMPS NATIFS (2026-08-08, repris en thème clair le 2026-09-04)
   ============================================================================
   🐛 Les <select> s'affichaient en BLANC SUR BLANC : `.form-select` reçoit bien
   un fond sombre et un texte clair, mais la LISTE DÉROULANTE qui s'ouvre est
   dessinée par le système, pas par la page. Elle gardait donc son fond blanc
   pendant que les <option> héritaient de la couleur de texte claire.

   `color-scheme: light` est le vrai correctif : il indique au navigateur de
   dessiner TOUS les widgets natifs en sombre — liste déroulante, sélecteurs de
   date et d'heure, cases à cocher, ascenseurs. Les règles sur `option` qui
   suivent ne sont qu'une ceinture pour les navigateurs qui l'ignorent encore.

   ⚠️ À dupliquer dans `assets/stamova-skin-2026.css` : cette feuille-ci couvre
   la landing et les pages à header.php, l'autre couvre register.php et les
   pages qui ont leur propre <head>.
   ============================================================================ */
:root { color-scheme: light; }

/* ⚠️ LE FOND DES CHAMPS EST TRANSLUCIDE (`rgba(255,255,255,.05)`).
   Hérité du thème sombre, où c'était joli ; un <select> posé dans un conteneur
   — une modale Bootstrap sans thème, un tableau, un encart blanc — devient
   presque blanc, avec un texte `#e0e0e0` par-dessus : illisible.

   Pour un <select>, la transparence n'apporte rien et coûte cher : on lui donne
   un fond OPAQUE. Les <input> gardent leur translucidité. */
select,
select.form-select,
select.form-control {
    background-color: var(--stm-field);
    color: var(--stm-ink-2);
}

/* Le menu déroulant lui-même. On ne se repose PAS uniquement sur
   `color-scheme` : Safari ne l'applique pas au popup des <option>, et le texte
   clair hérité du <select> se retrouverait sur le fond blanc du système. */
select option,
select optgroup,
.form-select option,
.form-select optgroup {
    background-color: var(--stm-field);
    color: var(--stm-ink-2);
}
.form-select optgroup { font-weight: 700; color: var(--stm-ink-4); }
select option:checked,
select option:hover { background-color: var(--stm-surface-2); color: var(--stm-ink); }

/* Les champs date/heure natifs : sans cela l'icône du calendrier reste noire
   sur fond sombre et devient invisible. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    color-scheme: light;
}

/* ============================================================================
   BOUTONS SECONDAIRES ET BOUTONS D'ACTION — style commun (2026-08-14)
   ============================================================================
   Retour utilisateur : « je n'aime pas le style de bouton comme "Voir tous les
   packs", "Filtrer" » et « les boutons actions sur le côté je les trouve moches ».

   Le fond du problème n'était pas la taille ni le libellé, c'était que ces
   boutons portaient les classes Bootstrap BRUTES :
     - `.btn-outline-primary` → bordure et texte #0d6efd, un bleu franc qui
       n'existe nulle part ailleurs dans l'identité (violet #667eea) ;
     - `.btn-outline-secondary` → gris #6c757d, pensé pour un fond blanc : sur
       #05050a le contraste est mou et la bordure paraît sale ;
     - `.btn-outline-light` → bordure blanche pleine, beaucoup trop dure à côté
       des cartes en verre du reste de l'application.

   ⚠️ On restyle les CLASSES plutôt que de réécrire le balisage : ces trois
   classes sont utilisées dans une quarantaine de fichiers. Les remplacer une à
   une garantissait d'en oublier — et un écran qui garde l'ancien style au milieu
   des autres est pire que si rien n'avait bougé.

   ⚠️ Ce bloc doit rester APRÈS le CSS de Bootstrap dans l'ordre de chargement
   (header.php : bootstrap → stamova-theme → skin). Les sélecteurs sont à
   spécificité ÉGALE à ceux de Bootstrap : c'est l'ordre qui tranche, pas un
   `!important` qu'il faudrait ensuite surcharger partout.
   ============================================================================ */

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light {
    --stm-btn-tint: 122, 139, 255;
    background: var(--stm-surface-1);
    border: 1px solid var(--stm-line-strong);
    color: #526fb7;
    border-radius: 0.6rem;
    font-weight: 600;
    letter-spacing: .01em;
    /* La transition ne porte QUE sur des propriétés de peinture : animer une
       bordure ou un padding relance la mise en page à chaque image. */
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

/* `btn-outline-primary` reste le plus affirmé des trois : c'est lui qui porte
   les actions de navigation mises en avant (« Voir tous les packs »). */
.btn-outline-primary {
    background: rgba(102, 126, 234, 0.12);
    border-color: rgba(122, 139, 255, 0.38);
    color: #5869dc;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background: rgba(var(--stm-btn-tint), 0.18);
    border-color: rgba(var(--stm-btn-tint), 0.55);
    /* Le fond n'est qu'une teinte a 18-28 % : sur blanc, du blanc y est
       invisible. On fonce la teinte du bouton plutot que de la remplacer,
       pour que chaque variante garde sa couleur. */
    color: color-mix(in srgb, rgb(var(--stm-btn-tint)) 50%, var(--stm-ink));
    box-shadow: 0 0 0 1px rgba(var(--stm-btn-tint), 0.18);
}

.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-outline-light:active {
    background: rgba(var(--stm-btn-tint), 0.26);
    color: color-mix(in srgb, rgb(var(--stm-btn-tint)) 50%, var(--stm-ink));
}

/* Bootstrap force `.btn-check:checked + .btn-outline-*` en aplat plein de sa
   couleur : sans cette reprise, un bouton radio coché redevient bleu vif. */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-light,
.btn-outline-primary.active,
.btn-outline-secondary.active,
.btn-outline-light.active {
    background: rgba(var(--stm-btn-tint), 0.28);
    border-color: rgba(var(--stm-btn-tint), 0.6);
    color: color-mix(in srgb, rgb(var(--stm-btn-tint)) 50%, var(--stm-ink));
}

/* ⚠️ Un bouton désactivé ne doit RIEN promettre : ni surbrillance au survol,
   ni curseur qui invite au clic. */
.btn-outline-primary:disabled, .btn-outline-primary.disabled,
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled,
.btn-outline-light:disabled, .btn-outline-light.disabled {
    background: var(--stm-surface-1);
    border-color: var(--stm-line);
    color: #5b6478;
    opacity: 1; /* sinon Bootstrap superpose son .65 à nos couleurs déjà atténuées */
}

/* --- Les variantes rouges gardent leur sens : on ne les repeint pas en violet,
       on les accorde seulement au fond sombre. --- */
.btn-outline-danger {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--stm-danger);
    border-radius: 0.6rem;
    font-weight: 600;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
    color: var(--stm-danger);
}

/* --- Boutons d'ACTION en bout de ligne (les « boutons sur le côté ») ---------
   Dans un tableau, ce sont presque toujours 2 à 4 boutons icône collés les uns
   aux autres. Chacun avec sa propre bordure, ça fait une suite de petites
   boîtes grises qui pèsent plus lourd que la donnée de la ligne.
   `.crm-actions` les fond en UN seul bloc segmenté : une bordure pour le
   groupe, de simples séparateurs à l'intérieur. */
.crm-actions {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--stm-line-strong);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--stm-surface-1);
    white-space: nowrap;
}
.crm-actions > .btn,
.crm-actions > form > .btn,
.crm-actions > a {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #5773ae;
    padding: .3rem .55rem;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.crm-actions > * + *,
.crm-actions > form + form > .btn {
    border-left: 1px solid var(--stm-line);
}
.crm-actions > form { display: inline-flex; }
.crm-actions .btn:hover,
.crm-actions a:hover {
    background: rgba(122, 139, 255, 0.16);
    color: var(--stm-accent);
}
/* Le geste destructeur vire au rouge AU SURVOL seulement : rouge en
   permanence, c'est un bouton qui crie dans chaque ligne du tableau. */
.crm-actions .is-danger:hover {
    background: rgba(239, 68, 68, 0.20);
    color: #d53b3b;
}

/* ============================================================================
   LE VOILE DES MODALES ET DU MENU MOBILE
   ============================================================================
   ⚠️ Regle DUPLIQUEE dans `assets/stamova-skin-2026.css` : la landing ne
   charge que cette feuille-ci, les pages a `header.php` chargent les deux.
   Toute retouche se fait AUX DEUX ENDROITS (regle du projet).

   Bootstrap pose un `rgba(0,0,0,.5)` plein ecran. Sur l'ancienne app sombre il
   passait inapercu ; sur du blanc c'est un ecran noir. On garde
   l'assombrissement - il dit « le reste est inactif » - mais en voile discret.
   ============================================================================ */


/* ============================================================================
   THÈME SOMBRE — UNIQUEMENT DANS L'APPLICATION (utilisateur connecté)
   ============================================================================
   Posé par `header.php` sur <html> à partir du cookie `stm_theme`. La vitrine
   publique, `login.php` et `register.php` restent en clair en toutes
   circonstances : une page vue une fois n'a pas à proposer un réglage.

   ⚠️ On ne redéfinit ICI QUE des jetons. Si un écran ne bascule pas, ce n'est
   pas ce bloc qu'il faut compléter : c'est que l'écran écrit encore une
   couleur en dur. Le script `private/scripts/theme_clair_app/` sait les
   retrouver.
   ============================================================================ */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --stm-page:        #05050a;
    --stm-ink:         #f1f5f9;
    --stm-ink-2:       #e2e8f0;
    --stm-ink-3:       #cbd5e1;
    --stm-ink-4:       #94a3b8;
    --stm-ink-5:       #7c8798;
    --stm-surface-1:   rgba(255, 255, 255, 0.03);
    --stm-surface-2:   rgba(255, 255, 255, 0.05);
    --stm-surface-3:   rgba(255, 255, 255, 0.10);
    --stm-line:        rgba(255, 255, 255, 0.08);
    --stm-line-strong: rgba(255, 255, 255, 0.16);
    --stm-veil:        #000000;
    --stm-veil-alpha:  0.55;

    --stm-bar:  rgba(5, 5, 10, 0.78);
    --stm-rail: #08080f;

    --stm-field:       #131322;
    --stm-field-hover: #1a1a2e;
    --stm-accent:      #a5b4fc;
    --stm-accent-2:    #c4b5fd;

    /* Le fond de page (ancien dégradé) et les cartes historiques. */
    --stm-bg-gradient-start: #05050a;
    --stm-bg-gradient-mid:   #0d0d18;
    --stm-bg-gradient-end:   #0f1320;

    /* Sur fond sombre, les couleurs de statut remontent d'un cran : les
       valeurs foncées du thème clair y deviennent illisibles. */
    --stm-success: #34d399;
    --stm-warning: #fbbf24;
    --stm-danger:  #f87171;
    --stm-info:    #60a5fa;

    --stm-text-primary:   #f1f5f9;
    --stm-text-secondary: #94a3b8;
    --stm-text-muted:     #64748b;
    --stm-text-light:     #e2e8f0;

    --stm-card-bg:           rgba(255, 255, 255, 0.05);
    --stm-card-bg-hover:     rgba(255, 255, 255, 0.08);
    --stm-card-border:       rgba(255, 255, 255, 0.10);
    --stm-card-border-hover: rgba(255, 255, 255, 0.20);

    --stm-input-bg:       rgba(255, 255, 255, 0.05);
    --stm-input-bg-focus: rgba(255, 255, 255, 0.08);
    --stm-input-border:   rgba(255, 255, 255, 0.12);
    --stm-input-text:     #e2e8f0;
}

/* Le voile des modales et du menu mobile suit le thème. */
.offcanvas-backdrop,
.modal-backdrop {
    --bs-backdrop-bg: var(--stm-veil);
    --bs-backdrop-opacity: var(--stm-veil-alpha);
}

/* ============================================================================
   À L'IMPRESSION, TOUJOURS LE THÈME CLAIR
   ============================================================================
   Un écran du CRM peut être imprimé (ou exporté en PDF par le navigateur)
   alors que l'utilisateur est en mode sombre. Sans ce rappel, la feuille sort
   en noir : de l'encre pour rien, et un document illisible.
   ============================================================================ */
@media print {
    [data-bs-theme="dark"] {
        color-scheme: light;
        --stm-page:        #ffffff;
        --stm-ink:         #0f172a;
        --stm-ink-2:       #1e293b;
        --stm-ink-3:       #334155;
        --stm-ink-4:       #475569;
        --stm-ink-5:       #64748b;
        --stm-surface-1:   rgba(15, 23, 42, 0.022);
        --stm-surface-2:   rgba(15, 23, 42, 0.038);
        --stm-surface-3:   rgba(15, 23, 42, 0.075);
        --stm-line:        rgba(15, 23, 42, 0.112);
        --stm-line-strong: rgba(15, 23, 42, 0.18);
        --stm-field:       #ffffff;
        --stm-field-hover: #f1f5f9;
        --stm-accent:      #4f46e5;
        --stm-accent-2:    #7c3aed;
        --stm-success:     #047857;
        --stm-warning:     #b45309;
        --stm-danger:      #dc2626;
        --stm-info:        #1d4ed8;
        --stm-text-primary:   #0f172a;
        --stm-text-secondary: #4b5563;
        --stm-text-light:     #1e293b;
    }
    [data-bs-theme="dark"] body { background: var(--stm-field) !important; }
}