/* AZALPLUS — style.css ENTIEREMENT CENTRALISE (charte 2026 + legacy + modules ex-ui.py) */

/* === design-tokens.css === */

/* AZALPLUS — Design tokens
 * Source de vérité : docs/CHARTE_GRAPHIQUE.md (verrouillée 2026-06-05)
 * Ne pas modifier sans relecture user explicite.
 */
:root {
  /* === 1. COULEURS — Brand === */
  --brand-blue-500: #3454D1;
  --brand-blue-700: #1E3A8A;
  --brand-blue-gradient: linear-gradient(135deg, #3454D1 0%, #1E3A8A 100%);
  --brand-blue-glow: 0 8px 24px rgba(30, 58, 138, 0.35);

  /* === 1. COULEURS — Sémantique (pastel sourd) === */
  /* Primaire officiel AZALPLUS = indigo marque (décision charte 2026-06-18) */
  --primary: #3454d1;
  --accent: #FB923C;
  --success: #10b981;  /* vert officiel = --color-success (alignement charte 2026-06-18) */
  --warning: #f59e0b;  /* orange officiel = --color-warning (alignement charte 2026-06-18) */
  --error: #FCA5A5;
  --info: #A78BFA;

  /* === 1. COULEURS — Neutres (10 niveaux) === */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAF9;
  --neutral-100: #F5F5F4;
  --neutral-200: #E7E5E4;
  --neutral-300: #D6D3D1;
  --neutral-400: #A8A29E;
  --neutral-500: #78716C;
  --neutral-600: #57534E;
  --neutral-700: #44403C;
  --neutral-800: #292524;
  --neutral-950: #0A0A0A;

  /* === 1. COULEURS — Backgrounds sémantiques pastel === */
  --bg-success: #DCFCE7;
  --text-on-success: #14532D;
  --bg-warning: #FEF3C7;
  --text-on-warning: #78350F;
  --bg-error: #FEE2E2;
  --text-on-error: #7F1D1D;
  --bg-info: #EDE9FE;
  --text-on-info: #4C1D95;

  /* === 2. TYPOGRAPHIE — Familles === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* === 2. TYPOGRAPHIE — Échelle (taille / line-height) === */
  --text-xs: 11px;
  --leading-xs: 16px;
  --text-sm: 13px;
  --leading-sm: 20px;
  --text-base: 15px;
  --leading-base: 24px;
  --text-lg: 17px;
  --leading-lg: 26px;
  --text-xl: 20px;
  --leading-xl: 28px;
  --text-2xl: 24px;
  --leading-2xl: 32px;
  --text-3xl: 32px;
  --leading-3xl: 40px;
  --text-display: clamp(40px, 6vw, 72px);
  --leading-display: 0.95;

  /* === 2. TYPOGRAPHIE — Poids === */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;

  /* === 2. TYPOGRAPHIE — Letter-spacing === */
  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-caps: 0.1em;

  /* === 3. ESPACEMENTS (échelle 4px) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === 3. RAYONS (medium) === */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === 3. OMBRES (5 niveaux) === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* =============================================================================
   ÉTIQUETTES --color-* CENTRALISÉES (Refacto de Guerre — Couche A, ACT-A-004)
   ---------------------------------------------------------------------------
   Ces étiquettes sont utilisées partout sous la forme var(--color-x, #secours).
   Avant : non définies → tout rendait via le secours en dur (audit = couleur en dur).
   Maintenant : définies UNE fois ici → changer la palette = éditer ce bloc.
   Valeur = couleur dominante en usage (rendu quasi identique). Décision user
   2026-06-17 : --color-primary = bleu ciel #0ea5e9 (pas le bleu marque).
   Les usages-texte foncés (danger/success/warning/text body) ont leur token
   dédié -text / -body pour préserver la lisibilité.
   ============================================================================= */
:root {
  /* Principale (décision user : bleu ciel) */
  --color-primary: #3454d1;  /* indigo marque officiel (décision charte 2026-06-18, ex-#0ea5e9 ciel) */
  --color-primary-bg: #eff6ff;
  --color-primary-light: #eef;
  --color-on-primary: #ffffff;

  /* Texte */
  --color-text: #111827;
  --color-text-body: #374151;
  --color-text-muted: #6b7280;
  --color-on-dark: #d1d5db;

  /* Sémantique — couleur vive + variante texte foncé dédiée */
  --color-danger: #ef4444;
  --color-danger-text: #991b1b;
  --color-danger-bg: #fee2e2;
  --color-danger-soft: #fecaca;
  --color-on-danger: #ffffff;
  --color-success: #10b981;
  --color-success-text: #065f46;
  --color-success-bg: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-text: #92400e;
  --color-warning-bg: #fef3c7;
  --color-info: #1e40af;
  --color-info-bg: #eff6ff;

  /* Fonds / surfaces / bordures */
  --color-bg: #f8fafc;
  --color-bg-subtle: #e5e7eb;
  --color-background: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-border: #e5e7eb;

  /* Variantes numérotées rares (Bootstrap-like) — conservées telles quelles */
  --color-error-100: #f8d7da;
  --color-error-800: #721c24;
  --color-success-100: #d4edda;
  --color-success-200: #c3e6cb;
  --color-success-600: #28a745;
  --color-success-800: #155724;
  --color-success-soft: #e6f7ed;

  /* === Compat — noms de tokens utilisés par les pages (wizard/charte/legacy) ===
     Définis ici aux valeurs officielles (= valeurs dominantes, décision charte
     2026-06-18) pour pouvoir RETIRER les fallbacks `var(--x, #hex)` partout sans
     casser ni décaler le rendu. Direction homogène vérifiée (textes sombres,
     fonds clairs) → additif imperceptible. Voir docs/SYSTEME_COMPLET/CHARTE_COULEURS.md */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --card-bg: #ffffff;
  --bg-secondary: #f1f5f9;
  --primary-light: #e8ecfa;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  /* Niveaux manquants (référencés par les cartes dashboard sans être définis
     → résolvaient vers vide). Échelle slate cohérente avec le reste. AZA-CSS-001. */
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --primary-50: #eef2ff;  /* teinte claire de --primary (#3454d1) */
  /* Rouge « fort » pour bandeaux d'alerte (--error est pastel #FCA5A5, trop
     clair pour un bandeau). Centralisé + variante dark (AZA-CSS-001, I-13). */
  --danger-strong: #dc2626;
  --danger-strong-2: #b91c1c;
}


/* === style.css legacy (Phase 4 appliquee) === */

/* =============================================================================
   AZALPLUS - Style Officiel Centralisé
   Extrait de la page administration_mail et uniformisé
   ============================================================================= */

:root {
    /* Tokens graphiques dashboard (Chart.js lit ces variables via getComputedStyle).
       Auparavant hardcodés en rgba() dans ui.py → illisibles en dark. AZA-CSS-001. */
    --chart-primary: #2563eb;
    --chart-primary-fill: rgba(37, 99, 235, 0.8);
    --chart-success: #10b981;
    --chart-success-fill: rgba(16, 185, 129, 0.12);
    --chart-error: #ef4444;
    --chart-error-fill: rgba(239, 68, 68, 0.12);

    /* Couleurs principales AZALPLUS */
    --azalplus-primary: var(--brand-blue-500);
    --azalplus-primary-dark: var(--brand-blue-700);
    --azalplus-primary-light: var(--brand-blue-500);
    --azalplus-primary-50: var(--bg-info);

    /* Sidebar */
    --azalplus-sidebar-bg: var(--brand-blue-700);
    --azalplus-sidebar-hover: var(--brand-blue-700);
    --azalplus-sidebar-active: var(--brand-blue-500);
    --azalplus-sidebar-text: rgba(255, 255, 255, 0.85);
    --azalplus-sidebar-text-muted: rgba(255, 255, 255, 0.5);
    --azalplus-sidebar-text-active: #FFFFFF;
    --azalplus-sidebar-border: rgba(255, 255, 255, 0.1);

    /* Status */
    --azalplus-success: var(--success);
    --azalplus-success-light: var(--bg-success);
    --azalplus-success-dark: var(--text-on-success);
    --azalplus-warning: var(--warning);
    --azalplus-warning-light: var(--bg-warning);
    --azalplus-warning-dark: var(--text-on-warning);
    --azalplus-error: var(--error);
    --azalplus-error-light: var(--bg-error);
    --azalplus-error-dark: var(--text-on-error);
    --azalplus-info: var(--brand-blue-500);
    --azalplus-info-light: var(--bg-info);

    /* Neutres */
    --azalplus-white: #FFFFFF;
    --azalplus-gray-50: var(--neutral-50);
    --azalplus-gray-100: var(--neutral-100);
    --azalplus-gray-200: var(--neutral-200);
    --azalplus-gray-300: var(--neutral-300);
    --azalplus-gray-400: var(--neutral-400);
    --azalplus-gray-500: var(--neutral-500);
    --azalplus-gray-600: var(--neutral-700);
    --azalplus-gray-700: var(--neutral-800);
    --azalplus-gray-800: var(--neutral-800);
    --azalplus-gray-900: var(--neutral-950);

    /* Layout */
    --azalplus-sidebar-width: 300px;
    --azalplus-header-height: 56px;
    --azalplus-radius: 8px;
    --azalplus-radius-lg: 12px;
    --azalplus-radius-xl: 16px;

    /* Ombres */
    --azalplus-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --azalplus-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --azalplus-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --azalplus-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

    /* Focus */
    --azalplus-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);

    /* === Accents palette (refonte 2026-06-03) === */
    --azalplus-primary-mid: #4F6FE0;
    --azalplus-blue-700: var(--brand-blue-700);
    --azalplus-blue-800: var(--brand-blue-700);
    --azalplus-blue-600: var(--brand-blue-500);
    --azalplus-accent-purple: var(--info);
    --azalplus-accent-purple-light: #A78BFA;
    --azalplus-accent-pink: #EC4899;
    --azalplus-accent-pink-light: #F472B6;
    --azalplus-accent-cyan: var(--info);
    --azalplus-accent-cyan-light: #67E8F9;
    --azalplus-success-mid: #34D399;
    --azalplus-success-darker: var(--text-on-success);
    --azalplus-success-pastel: #C6F6D5;
    --azalplus-success-pastel-hover: #DCFCE7;
    --azalplus-success-pastel-deep: #A7F3D0;
    --azalplus-info-blue-light: var(--bg-info);
    --azalplus-info-text-dark: var(--brand-blue-700);
    --azalplus-page-bg-light: #E2E8F0;
    --azalplus-page-bg-mid: #CBD5E1;
    --azalplus-blue-fab: #93C5FD;
    /* Ombres colorées AZAL */
    --azalplus-shadow-primary: 0 4px 14px rgba(52, 84, 209, 0.4);
    --azalplus-shadow-primary-strong: 0 8px 24px rgba(52, 84, 209, 0.5);
    --azalplus-focus-ring-primary: 0 0 0 4px rgba(52, 84, 209, 0.18);

    /* =========================================================================
       Breakpoints — SOURCE DE VÉRITÉ (refonte 2026-06-04)
       Note : CSS ne supporte pas var() dans @media. Ces valeurs sont
       la documentation officielle. Toute @media query doit utiliser
       exactement ces valeurs littérales : 480px / 768px / 1024px / 1280px.
       ========================================================================= */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-wide: 1280px;

    /* =========================================================================
       Overlays et couleurs récurrentes centralisées (refonte 2026-06-04)
       Chaque rgba() utilisé >5 fois dans le pack CSS a sa variable.
       ========================================================================= */
    /* Overlays noirs (ombres légères, séparateurs) */
    --azalplus-overlay-black-04: rgba(0, 0, 0, 0.04);
    --azalplus-overlay-black-05: rgba(0, 0, 0, 0.05);
    --azalplus-overlay-black-06: rgba(0, 0, 0, 0.06);
    --azalplus-overlay-black-08: rgba(0, 0, 0, 0.08);
    --azalplus-overlay-black-10: rgba(0, 0, 0, 0.1);
    --azalplus-overlay-black-12: rgba(0, 0, 0, 0.12);
    --azalplus-overlay-black-15: rgba(0, 0, 0, 0.15);
    --azalplus-overlay-black-20: rgba(0, 0, 0, 0.2);
    --azalplus-overlay-black-50: rgba(0, 0, 0, 0.5);
    /* Overlays gray-900 (var(--neutral-950)) — ombres "froides" sur fonds clairs */
    --azalplus-overlay-gray900-04: rgba(17, 24, 39, 0.04);
    --azalplus-overlay-gray900-05: rgba(17, 24, 39, 0.05);
    --azalplus-overlay-gray900-06: rgba(17, 24, 39, 0.06);
    --azalplus-overlay-gray900-08: rgba(17, 24, 39, 0.08);
    --azalplus-overlay-gray900-10: rgba(17, 24, 39, 0.1);
    /* Overlays blancs (sidebars, hover dark) */
    --azalplus-overlay-white-08: rgba(255, 255, 255, 0.08);
    --azalplus-overlay-white-10: rgba(255, 255, 255, 0.1);
    --azalplus-overlay-white-12: rgba(255, 255, 255, 0.12);
    --azalplus-overlay-white-15: rgba(255, 255, 255, 0.15);
    --azalplus-overlay-white-20: rgba(255, 255, 255, 0.2);
    --azalplus-overlay-white-25: rgba(255, 255, 255, 0.25);
    --azalplus-overlay-white-30: rgba(255, 255, 255, 0.3);
    --azalplus-overlay-white-50: rgba(255, 255, 255, 0.5);
    --azalplus-overlay-white-85: rgba(255, 255, 255, 0.85);
    --azalplus-overlay-white-88: rgba(255, 255, 255, 0.88);

    /* =========================================================================
       Dark mode — surface tokens (refonte 2026-06-04)
       Activé via [data-theme="dark"] OU @media (prefers-color-scheme: dark).
       Les thèmes (premium, calme, etc.) HÉRITENT de ces tokens si non override.
       ========================================================================= */
    --azalplus-surface: #FFFFFF;
    --azalplus-surface-alt: var(--neutral-50);
    --azalplus-surface-muted: var(--neutral-100);
    --azalplus-text: var(--neutral-950);
    --azalplus-text-muted: var(--neutral-500);
    --azalplus-border: var(--neutral-200);
}

/* Dark mode global — variables surface inversées */
[data-theme="dark"] {
    --azalplus-surface: var(--neutral-800);
    --azalplus-surface-alt: var(--neutral-950);
    --azalplus-surface-muted: var(--neutral-800);
    --azalplus-text: var(--neutral-50);
    --azalplus-text-muted: var(--neutral-400);
    --azalplus-border: var(--neutral-800);
    --azalplus-white: var(--neutral-800);
    --azalplus-gray-50: var(--neutral-950);
    --azalplus-gray-100: var(--neutral-800);
    --azalplus-gray-200: var(--neutral-800);
    --azalplus-gray-900: var(--neutral-50);
    /* Échelle --gray-* inversée en dark : les cartes/tableaux du dashboard
       lisent --gray-100 (fond) / --gray-500..900 (texte). En dark, fonds
       sombres et texte clair (contraste WCAG AA). AZA-CSS-001. */
    --gray-50: #0f172a;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --primary-50: #1e293b;  /* fond bleuté sombre au lieu du pastel clair */
    --card-bg: #1e293b;      /* cartes/graphiques en dark (au lieu du blanc) */
    --bg-secondary: #0f172a;
    /* Bandeaux d'alerte : rouge légèrement plus vif sur fond sombre (contraste) */
    --danger-strong: #ef4444;
    --danger-strong-2: #dc2626;
    /* Graphiques en dark : couleurs plus claires/saturées + remplissages plus
       opaques pour rester lisibles sur fond sombre (--card-bg #1e293b). */
    --chart-primary: #60a5fa;
    --chart-primary-fill: rgba(96, 165, 250, 0.75);
    --chart-success: #34d399;
    --chart-success-fill: rgba(52, 211, 153, 0.20);
    --chart-error: #f87171;
    --chart-error-fill: rgba(248, 113, 113, 0.20);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --azalplus-surface: var(--neutral-800);
        --azalplus-surface-alt: var(--neutral-950);
        --azalplus-surface-muted: var(--neutral-800);
        --azalplus-text: var(--neutral-50);
        --azalplus-text-muted: var(--neutral-400);
        --azalplus-border: var(--neutral-800);
        /* Tokens graphiques dark (préférence système, sans data-theme explicite) */
        --chart-primary: #60a5fa;
        --chart-primary-fill: rgba(96, 165, 250, 0.75);
        --chart-success: #34d399;
        --chart-success-fill: rgba(52, 211, 153, 0.20);
        --chart-error: #f87171;
        --chart-error-fill: rgba(248, 113, 113, 0.20);
    }
}

/* =============================================================================
   Reset & Base
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--azalplus-gray-700);
    background: var(--azalplus-gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--azalplus-primary);
    text-decoration: none;
    transition: color 0.2s;
}

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

/* =============================================================================
   Layout Principal
   ============================================================================= */
.app-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    /* overflow: hidden retiré — sur mobile (iOS URL bar dynamique) 100vh > zone visible
       et overflow:hidden cachait le bas. Laisser le scroll body naturel. */
}

.main-wrapper {
    flex: 1;
    margin-left: var(--azalplus-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    /* overflow: hidden retiré (cf .app-layout) */
}

.main-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    min-height: 0;
}

/* =============================================================================
   Sidebar AZALPLUS
   ============================================================================= */
.sidebar {
    width: var(--azalplus-sidebar-width);
    /* Sidebar charte 2026 = claire. Fond neutre par défaut ; le thème charte
       (charte-2026-layout.css) affine la teinte. Plus de bleu legacy ici. */
    background: var(--neutral-0, #ffffff);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-logo {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--azalplus-sidebar-text-active);
    border-bottom: 1px solid var(--azalplus-sidebar-border);
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 24px;
}

.nav-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--azalplus-sidebar-text-muted);
    padding: 8px 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: var(--azalplus-radius);
    color: var(--azalplus-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
}

.nav-item:hover {
    background: var(--azalplus-sidebar-hover);
    color: var(--azalplus-sidebar-text-active);
}

.nav-item.active {
    background: var(--azalplus-sidebar-active);
    color: var(--azalplus-sidebar-text-active);
}

/* =============================================================================
   Header
   ============================================================================= */
.main-header {
    height: var(--azalplus-header-height);
    background: var(--azalplus-white);
    border-bottom: 1px solid var(--azalplus-gray-200);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--azalplus-gray-900);
}

/* =============================================================================
   Container de configuration (style administration_mail)
   ============================================================================= */
.config-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.config-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--azalplus-gray-900);
}

.config-header p {
    margin: 4px 0 0;
    color: var(--azalplus-gray-500);
    font-size: 14px;
}

/* =============================================================================
   Grille en colonnes
   ============================================================================= */
.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.column {
    background: var(--azalplus-white);
    border-radius: var(--azalplus-radius-lg);
    padding: 24px;
    box-shadow: var(--azalplus-shadow);
}

.column h3 {
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--azalplus-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--azalplus-gray-800);
}

.column h3 svg {
    color: var(--azalplus-primary);
}

/* =============================================================================
   Cards
   ============================================================================= */
.card {
    background: var(--azalplus-white);
    border-radius: var(--azalplus-radius-lg);
    box-shadow: var(--azalplus-shadow);
    border: 1px solid var(--azalplus-gray-200);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--azalplus-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--azalplus-gray-900);
}

.card-body {
    padding: 20px;
}

/* =============================================================================
   Formulaires AZALPLUS
   ============================================================================= */
.form-group {
    margin-bottom: 16px;
}

.form-group label,
.label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--azalplus-gray-700);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea,
.input,
.select,
textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--azalplus-gray-300);
    border-radius: var(--azalplus-radius);
    background: var(--azalplus-white);
    color: var(--azalplus-gray-800);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus,
.select:focus,
textarea:focus {
    outline: none;
    border-color: var(--azalplus-primary);
    box-shadow: var(--azalplus-focus-ring);
}

.form-group input::placeholder,
.input::placeholder {
    color: var(--azalplus-gray-400);
}

.form-group small {
    color: var(--azalplus-gray-500);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Form row - 2 champs côte à côte */
.form-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.form-row-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* =============================================================================
   Toggle Switch
   ============================================================================= */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--azalplus-gray-50);
    border-radius: var(--azalplus-radius);
    margin-bottom: 16px;
}

.toggle {
    width: 48px;
    height: 26px;
    background: var(--azalplus-gray-300);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle.active {
    background: var(--azalplus-primary);
}

.toggle::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--azalplus-white);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px var(--azalplus-overlay-black-20);
}

.toggle.active::after {
    left: 24px;
}

.toggle-group span {
    font-size: 14px;
    color: var(--azalplus-gray-700);
}

/* =============================================================================
   Boutons AZALPLUS
   ============================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--azalplus-radius);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

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

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

.btn-primary:hover:not(:disabled) {
    background: var(--azalplus-primary-dark);
}

.btn-secondary {
    background: var(--azalplus-gray-100);
    color: var(--azalplus-gray-700);
    border: 1px solid var(--azalplus-gray-300);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--azalplus-gray-200);
}

.btn-success,
.btn-test {
    background: var(--azalplus-success);
    color: var(--azalplus-white);
}

.btn-success:hover:not(:disabled),
.btn-test:hover:not(:disabled) {
    background: var(--text-on-success);
}

.btn-danger {
    background: var(--azalplus-error);
    color: var(--azalplus-white);
}

.btn-danger:hover:not(:disabled) {
    background: var(--text-on-error);
}

.btn-outline {
    background: transparent;
    color: var(--azalplus-primary);
    border: 1px solid var(--azalplus-primary);
}

.btn-outline:hover:not(:disabled) {
    background: var(--azalplus-primary-50);
}

/* Tailles */
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

.btn-full {
    width: 100%;
}

/* =============================================================================
   Zone d'actions
   ============================================================================= */
.actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--azalplus-gray-200);
}

.actions-left {
    display: flex;
    gap: 12px;
}

.actions-right {
    display: flex;
    gap: 12px;
}

/* =============================================================================
   Résultats de test
   ============================================================================= */
.test-result {
    padding: 12px 16px;
    border-radius: var(--azalplus-radius);
    margin-top: 12px;
    display: none;
    font-size: 14px;
}

.test-result.success {
    background: var(--azalplus-success-light);
    color: var(--azalplus-success-dark);
    display: block;
}

.test-result.error {
    background: var(--azalplus-error-light);
    color: var(--azalplus-error-dark);
    display: block;
}

.test-result.warning {
    background: var(--azalplus-warning-light);
    color: var(--azalplus-warning-dark);
    display: block;
}

/* =============================================================================
   Status Box
   ============================================================================= */
.status-box {
    background: var(--azalplus-gray-50);
    border-radius: var(--azalplus-radius);
    padding: 16px;
    margin-top: 24px;
}

.status-box h4 {
    margin: 0 0 12px 0;
    color: var(--azalplus-gray-700);
    font-size: 14px;
    font-weight: 600;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--azalplus-gray-200);
}

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

/* =============================================================================
   Badges
   ============================================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

.badge-success {
    background: var(--azalplus-success-light);
    color: var(--azalplus-success-dark);
}

.badge-error {
    background: var(--azalplus-error-light);
    color: var(--azalplus-error-dark);
}

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

.badge-info {
    background: var(--azalplus-info-light);
    color: var(--brand-blue-700);
}

.badge-gray {
    background: var(--azalplus-gray-100);
    color: var(--azalplus-gray-600);
}

/* =============================================================================
   Tables
   ============================================================================= */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--azalplus-gray-500);
    background: var(--azalplus-gray-50);
    border-bottom: 1px solid var(--azalplus-gray-200);
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--azalplus-gray-100);
    font-size: 14px;
    color: var(--azalplus-gray-700);
}

.table tbody tr:hover {
    background: var(--azalplus-gray-50);
}

/* =============================================================================
   Alertes
   ============================================================================= */
.alert {
    padding: 14px 16px;
    border-radius: var(--azalplus-radius);
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

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

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

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

.alert-info {
    background: var(--azalplus-info-light);
    color: var(--brand-blue-700);
}

/* =============================================================================
   Stats Cards
   ============================================================================= */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--azalplus-white);
    border-radius: var(--azalplus-radius-lg);
    box-shadow: var(--azalplus-shadow);
    padding: 20px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--azalplus-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.stat-icon.blue { background: var(--azalplus-primary-50); color: var(--azalplus-primary); }
.stat-icon.green { background: var(--azalplus-success-light); color: var(--azalplus-success); }
.stat-icon.yellow { background: var(--azalplus-warning-light); color: var(--azalplus-warning); }
.stat-icon.red { background: var(--azalplus-error-light); color: var(--azalplus-error); }

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--azalplus-gray-900);
}

.stat-label {
    font-size: 13px;
    color: var(--azalplus-gray-500);
    margin-top: 4px;
}

/* =============================================================================
   Spinner
   ============================================================================= */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

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

/* =============================================================================
   Empty State
   ============================================================================= */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 48px;
    opacity: 0.4;
    margin-bottom: 16px;
}

.empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--azalplus-gray-700);
    margin-bottom: 8px;
}

.empty-text {
    font-size: 14px;
    color: var(--azalplus-gray-500);
}

/* =============================================================================
   Password Field
   ============================================================================= */
.password-field {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--azalplus-gray-400);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
}

.password-toggle:hover {
    color: var(--azalplus-gray-600);
}

/* =============================================================================
   Utilitaires
   ============================================================================= */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

.text-sm { font-size: 13px; }
.text-lg { font-size: 18px; }
.text-muted { color: var(--azalplus-gray-500); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }

.hidden { display: none; }
.w-full { width: 100%; }

/* Compléments couche 2 (ACT-2-001) — remplacent les inline les + fréquents */
.block { display: block; }
.flex-1 { flex: 1; }
.m-0 { margin: 0; }
.cursor-pointer { cursor: pointer; }
.no-underline { text-decoration: none; }
.whitespace-nowrap { white-space: nowrap; }
.text-xs { font-size: 12px; }
.rounded { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.text-base { font-size: 14px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 28px; }
.relative { position: relative; }
.overflow-x-auto { overflow-x: auto; }
.opacity-70 { opacity: 0.7; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.ml-auto { margin-left: auto; }
.mb-1-5 { margin-bottom: 6px; }
.p-10 { padding: 40px; }
.border-collapse { border-collapse: collapse; }
/* Bouton icône nu (terminaux paiement — remplace l'inline répété de ui.py) */
.btn-icon-plain { background: none; border: none; cursor: pointer; padding: 8px; }
/* Label de champ de formulaire (ACT-A-008 — remplace l'inline répété de ui.py) */
.form-label { display: block; margin-bottom: 6px; font-weight: 600; }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .columns {
        grid-template-columns: 1fr;
    }
}

/* Bouton hamburger mobile — caché sur desktop.
   Style autonome (couleurs explicites contrastées) pour rester
   visible quel que soit le fond du header / thème actif. */
.mobile-hamburger {
    display: none;
    background: var(--azalplus-sidebar-bg, var(--brand-blue-700));
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-hamburger:hover,
.mobile-hamburger:active {
    background: var(--azalplus-sidebar-hover, var(--brand-blue-700));
}

/* Overlay drawer — caché par défaut */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.sidebar-overlay.show {
    display: block;
}

/* ============================================================
   DRAWER SIDEBAR sur écrans étroits ET tous device tactiles
   Couvre : mobile portrait/paysage + tablette portrait/paysage +
   PC fenêtre rétrécie <=1024px.
   ============================================================ */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease-out !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    }

    .sidebar.open {
        transform: translateX(0) !important;
    }

    /* Spécificité 0,4,0 pour battre :
       - règle globale .main-wrapper { margin-left: 240px !important }
       - règle inline ui.py .app-layout.sidebar-collapsed .main-wrapper { margin-left: 60px }
         appliquée même sur mobile via JS restoreSidebarState() (localStorage). */
    .app-layout.app-layout .main-wrapper.main-wrapper,
    .app-layout.app-layout .azal-main-wrapper.azal-main-wrapper,
    .main-wrapper.main-wrapper,
    .azal-main-wrapper.azal-main-wrapper {
        margin-left: 0 !important;
    }

    .mobile-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .sidebar-toggle {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Règles spécifiques au mobile strict (<=768px).
       Le drawer sidebar + hamburger sont gérés par le @media plus large
       au-dessus (couvre aussi tablette + touch device). */

    .stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .actions {
        flex-direction: column;
        gap: 16px;
    }

    .actions-left,
    .actions-right {
        width: 100%;
        justify-content: center;
    }
}

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

    .main-content {
        padding: 16px;
    }

    .config-container {
        padding: 16px;
    }
}

/* =============================================================================
   AZAL Document System - Pages Devis, Factures, etc.
   ============================================================================= */

/* Container principal document */
.azal-doc-container {
    display: flex;
    min-height: 100vh;
    background: var(--azalplus-gray-100);
}

/* Sidebar document */
.azal-sidebar {
    width: 200px;
    background: var(--azalplus-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
}

.azal-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--azalplus-sidebar-border);
}

.azal-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.azal-sidebar-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Image logo du tenant */
.azal-sidebar-logo-img {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    border-radius: 6px;
}

/* SVG logo par défaut AZAL+ */
.azal-sidebar-logo-svg {
    width: 36px;
    height: 36px;
}

.azal-sidebar-logo-text {
    font-size: 16px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.azal-sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    overflow-y: auto;
}

.azal-sidebar-section {
    margin-bottom: 20px;
}

.azal-sidebar-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--azalplus-sidebar-text-muted);
    padding: 8px 12px 6px;
}

/* Items de la sidebar - ICONES CONTROLEES */
.azal-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin: 2px 0;
    border: none;
    border-radius: var(--azalplus-radius);
    background: transparent;
    color: var(--azalplus-sidebar-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

/* IMPORTANT: Taille des icônes SVG dans la sidebar */
.azal-sidebar-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.azal-sidebar-item:hover {
    background: var(--azalplus-sidebar-hover);
    color: var(--azalplus-sidebar-text-active);
}

.azal-sidebar-item.active {
    background: var(--azalplus-sidebar-active);
    color: var(--azalplus-sidebar-text-active);
}

.azal-sidebar-item .badge {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 11px;
    background: var(--azalplus-overlay-white-20);
    border-radius: 10px;
}

.azal-sidebar-item-success {
    background: var(--azalplus-success) !important;
    color: white !important;
}

.azal-sidebar-item-success:hover {
    background: var(--text-on-success) !important;
}

/* Main content document */
.azal-main {
    flex: 1;
    margin-left: 200px;
    padding: 20px;
    background: var(--azalplus-gray-100);
}

.azal-back-link {
    margin-bottom: 16px;
}

.azal-back-link a,
.back-to-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--azalplus-gray-500);
    font-size: 13px;
    text-decoration: none;
}

.azal-back-link a:hover,
.back-to-list:hover {
    color: var(--azalplus-primary);
}

/* Header document */
.azal-doc-header {
    background: white;
    border-radius: var(--azalplus-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--azalplus-shadow);
}

.azal-doc-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.azal-doc-header-left {
    display: flex;
    align-items: center;
}

.azal-doc-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icône du document - taille contrôlée */
.azal-doc-icon {
    width: 48px;
    height: 48px;
    background: var(--azalplus-primary-50);
    border-radius: var(--azalplus-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azalplus-primary);
}

.azal-doc-icon svg {
    width: 24px;
    height: 24px;
}

.azal-doc-title h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--azalplus-gray-900);
    margin: 0;
}

.azal-doc-title .subtitle {
    font-size: 13px;
    color: var(--azalplus-gray-500);
}

.azal-doc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.azal-doc-status {
    padding: 6px 14px;
    background: var(--azalplus-gray-100);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--azalplus-gray-600);
}

.azal-doc-actions {
    display: flex;
    gap: 8px;
}

/* Body document */
.azal-doc-body {
    display: flex;
    gap: 20px;
}

.azal-doc-content {
    flex: 1;
}

/* Tabs */
.azal-tab-content {
    display: none;
    background: white;
    border-radius: var(--azalplus-radius-lg);
    padding: 20px;
    box-shadow: var(--azalplus-shadow);
}

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

/* Sections */
.azal-section {
    margin-bottom: 24px;
}

.azal-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--azalplus-primary);
}

/* Icône de section - taille contrôlée */
.azal-section-icon {
    width: 32px;
    height: 32px;
    background: var(--azalplus-primary-50);
    border-radius: var(--azalplus-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azalplus-primary);
}

.azal-section-icon svg {
    width: 18px;
    height: 18px;
}

.azal-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--azalplus-gray-800);
}

/* Grille de champs */
.azal-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.azal-field {
    display: flex;
    flex-direction: column;
}

.azal-field.full-width {
    grid-column: span 2;
}

.azal-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--azalplus-gray-600);
    margin-bottom: 6px;
}

/* Barre d'actions de formulaire (boutons) + champ prix compact (barème) */
.azal-form-actions {
    margin-top: var(--space-4, 16px);
    display: flex;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}
.azal-pu-input {
    max-width: 90px;
}

/* Table de lignes */
.azal-lines-table {
    width: 100%;
    border-collapse: collapse;
}

.azal-lines-table th {
    text-align: left;
    padding: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--azalplus-gray-500);
    background: var(--azalplus-gray-50);
    border-bottom: 1px solid var(--azalplus-gray-200);
}

.azal-lines-table td {
    padding: 12px;
    border-bottom: 1px solid var(--azalplus-gray-100);
    vertical-align: middle;
}

.azal-lines-table tbody tr:hover {
    background: var(--azalplus-gray-50);
}

/* Empty state lignes */
.azal-empty-lines {
    text-align: center;
    padding: 40px 20px !important;
    color: var(--azalplus-gray-400);
}

.azal-empty-lines svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.azal-empty-lines p {
    font-size: 14px;
}

/* Boutons d'ajout */
.azal-add-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.azal-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--azalplus-gray-100);
    border: 1px dashed var(--azalplus-gray-300);
    border-radius: var(--azalplus-radius);
    color: var(--azalplus-gray-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.azal-add-btn svg {
    width: 16px;
    height: 16px;
}

.azal-add-btn:hover {
    background: var(--azalplus-gray-200);
    border-color: var(--azalplus-gray-400);
}

.azal-add-btn-success {
    background: var(--azalplus-success-light);
    border-color: var(--azalplus-success);
    color: var(--azalplus-success-dark);
}

.azal-add-btn-success:hover {
    background: #A7F3D0;
}

/* Options section */
.azal-option-section {
    background: white;
    border-radius: var(--azalplus-radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--azalplus-shadow-sm);
    overflow: hidden;
}

.azal-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--azalplus-gray-50);
    border-bottom: 1px solid var(--azalplus-gray-200);
    font-weight: 600;
    color: var(--azalplus-gray-700);
}

.azal-option-header svg {
    width: 18px;
    height: 18px;
    color: var(--azalplus-primary);
}

.azal-option-content {
    padding: 16px;
}

/* Radio cards pour options livraison */
.azal-delivery-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.azal-radio-card {
    cursor: pointer;
}

.azal-radio-card input[type="radio"] {
    display: none;
}

.azal-radio-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--azalplus-gray-50);
    border: 2px solid var(--azalplus-gray-200);
    border-radius: var(--azalplus-radius);
    transition: all 0.15s;
}

.azal-radio-card input:checked + .azal-radio-card-content {
    border-color: var(--azalplus-primary);
    background: var(--azalplus-primary-50);
}

.azal-radio-card-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--azalplus-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azalplus-gray-500);
}

.azal-radio-card-icon svg {
    width: 20px;
    height: 20px;
}

.azal-radio-card input:checked + .azal-radio-card-content .azal-radio-card-icon {
    color: var(--azalplus-primary);
}

.azal-radio-card-info {
    flex: 1;
}

.azal-radio-card-info strong {
    display: block;
    font-size: 13px;
    color: var(--azalplus-gray-800);
}

.azal-radio-card-info span {
    font-size: 12px;
    color: var(--azalplus-gray-500);
}

.azal-radio-card-price {
    font-weight: 600;
    color: var(--azalplus-gray-700);
}

/* Modal AZAL */
.azal-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--azalplus-overlay-black-50);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.azal-modal-content {
    background: white;
    border-radius: var(--azalplus-radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--azalplus-shadow-lg);
}

.azal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--azalplus-gray-200);
}

.azal-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--azalplus-gray-900);
    margin: 0;
}

.azal-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--azalplus-gray-400);
    cursor: pointer;
    padding: 4px;
}

.azal-modal-close:hover {
    color: var(--azalplus-gray-600);
}

.azal-modal-body {
    padding: 20px;
}

.azal-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.azal-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--azalplus-gray-200);
    background: var(--azalplus-gray-50);
}

/* Formulaires AZAL (ancien style) */
.azal-container {
    display: flex;
    min-height: 100vh;
}

.azal-header {
    background: white;
    border-radius: var(--azalplus-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--azalplus-shadow);
}

.azal-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.azal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.azal-header-icon {
    width: 40px;
    height: 40px;
    background: var(--azalplus-primary-50);
    border-radius: var(--azalplus-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azalplus-primary);
}

.azal-header-icon svg {
    width: 20px;
    height: 20px;
}

.azal-header-title h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.azal-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.azal-status {
    padding: 6px 12px;
    background: var(--azalplus-gray-100);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.azal-header-actions {
    display: flex;
    gap: 8px;
}

.azal-content {
    flex: 1;
}

.azal-form-card {
    background: white;
    border-radius: var(--azalplus-radius-lg);
    padding: 20px;
    box-shadow: var(--azalplus-shadow);
}

.azal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.azal-section-content {
    margin-bottom: 24px;
}

/* Produits optionnels */
.azal-optional-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Boutons document */
.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--azalplus-primary);
    color: white;
    border: none;
    border-radius: var(--azalplus-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-save svg {
    width: 16px;
    height: 16px;
}

.btn-save:hover {
    background: var(--azalplus-primary-dark);
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--azalplus-gray-100);
    color: var(--azalplus-gray-700);
    border: 1px solid var(--azalplus-gray-300);
    border-radius: var(--azalplus-radius);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.btn-cancel:hover {
    background: var(--azalplus-gray-200);
}

/* Responsive documents */
@media (max-width: 1024px) {
    .azal-sidebar {
        width: 180px;
    }

    .azal-main {
        margin-left: 180px;
    }

    .azal-fields-grid {
        grid-template-columns: 1fr;
    }

    .azal-field.full-width {
        grid-column: span 1;
    }

    .azal-delivery-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .azal-doc-container,
    .azal-container {
        flex-direction: column;
    }

    .azal-sidebar {
        width: 100%;
        position: relative;
        flex-direction: row;
        overflow-x: auto;
    }

    .azal-sidebar-nav {
        display: flex;
        padding: 8px;
        gap: 4px;
    }

    .azal-sidebar-section {
        display: flex;
        gap: 4px;
        margin-bottom: 0;
    }

    .azal-sidebar-section-title {
        display: none;
    }

    .azal-sidebar-item {
        padding: 8px 12px;
        white-space: nowrap;
    }

    .azal-main {
        margin-left: 0;
        padding: 16px;
    }

    .azal-doc-header-top {
        flex-direction: column;
        gap: 16px;
    }

    .azal-doc-actions {
        width: 100%;
    }

    .azal-doc-actions .btn {
        flex: 1;
    }

    .azal-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   FORMULAIRES CRUD MODULES (refonte 2026-06-03)
   - Layout : 2 colonnes en desktop (>=1024px), 1 colonne mobile
   - Champs : label au-dessus du champ, sobre, gris 700, 13px
   - Demande user : "ambiance vue mobile, garde 2 colonnes desktop"
   ============================================================================= */
.o-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.o-group-col {
    display: flex;
    flex-direction: column;
}

.o-group-full {
    max-width: 1200px;
    margin: 0 auto;
}

.o-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.o-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--azalplus-gray-700, var(--neutral-800));
    text-align: left;
    padding: 0 0 2px 0;
    letter-spacing: 0.01em;
}

.o-field-label.required::after {
    content: " *";
    color: var(--azalplus-error, var(--error));
    font-weight: 600;
}

.o-field-widget {
    width: 100%;
}

.o-field-widget input,
.o-field-widget select,
.o-field-widget textarea,
.o-field-text {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--azalplus-gray-300, var(--neutral-300));
    border-radius: 6px;
    background: var(--azalplus-white, #FFFFFF);
    color: var(--azalplus-gray-900, var(--neutral-950));
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.o-field-widget input:focus,
.o-field-widget select:focus,
.o-field-widget textarea:focus,
.o-field-text:focus {
    outline: none;
    border-color: var(--azalplus-primary, var(--brand-blue-500));
    box-shadow: 0 0 0 3px rgba(52, 84, 209, 0.12);
}

.o-field-widget input::placeholder,
.o-field-widget textarea::placeholder {
    color: var(--azalplus-gray-400, var(--neutral-400));
}

/* Mobile : 1 colonne (les o-group-col s'empilent) */
@media (max-width: 1024px) {
    .o-group {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* =============================================================================
   REFONTE "PRO + FUN + USER FRIENDLY" v2 (2026-06-03, Vercel/Figma inspired)
   - Boutons : gradient AZAL→cyan, hover glow lift, focus ring 5px
   - Cards : ombre flottante, hover lift, border-top accent gradient
   - Inputs : focus ring 5px bleu, background tinted au focus
   - Section titles : icone + gradient bar verticale
   - Couleurs : palette AZAL + accents lumineux
   ============================================================================= */

/* === Boutons base : présence + feedback === */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px var(--azalplus-overlay-gray900-06);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    transition-duration: 0.05s;
}

/* === Bouton primaire : gradient AZAL → cyan, glow présent === */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-blue-500) 0%, var(--brand-blue-500) 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 2px 6px rgba(52, 84, 209, 0.35), 0 1px 0 var(--azalplus-overlay-white-15) inset;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #2d4ac3 0%, #7eb0ff 100%);
    box-shadow: 0 8px 20px rgba(52, 84, 209, 0.4), 0 1px 0 var(--azalplus-overlay-white-20) inset;
    filter: brightness(1.05);
}

.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 5px rgba(107, 159, 255, 0.4), 0 2px 6px rgba(52, 84, 209, 0.35);
}

/* Alternative textuelle réservée aux lecteurs d'écran (WCAG 1.1.1).
   Masquée visuellement mais lue par les technologies d'assistance. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Bouton secondaire : neutre élégant === */
.btn-secondary {
    background: #FFFFFF;
    color: var(--azalplus-gray-800, var(--neutral-800));
    border: 1px solid var(--azalplus-gray-300, var(--neutral-300));
}

.btn-secondary:hover:not(:disabled) {
    background: var(--azalplus-gray-50, var(--neutral-50));
    border-color: var(--azalplus-gray-400, var(--neutral-400));
    box-shadow: 0 4px 8px var(--azalplus-overlay-gray900-08);
}

/* === Cards : flottantes, hover qui marque === */
.card {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 1px 3px var(--azalplus-overlay-gray900-05), 0 8px 24px var(--azalplus-overlay-gray900-04);
    border: 1px solid rgba(229, 231, 235, 0.6);
    transition: transform 0.2s ease, box-shadow 0.25s ease;
    overflow: hidden;
    position: relative;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--azalplus-overlay-gray900-06), 0 16px 32px var(--azalplus-overlay-gray900-08);
}

/* Border-top gradient AZAL → cyan : signature visuelle au-dessus de la card */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-blue-500) 0%, var(--brand-blue-500) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card:hover::before {
    opacity: 1;
}

.card-header {
    background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    padding: 18px 24px;
}

.card-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--azalplus-gray-900, var(--neutral-950));
    letter-spacing: -0.015em;
}

.card-body {
    padding: 24px;
}

/* === Inputs : focus ring marqué + tint au focus === */
.o-field-widget input,
.o-field-widget select,
.o-field-widget textarea,
.o-field-text {
    border: 1px solid var(--azalplus-gray-300, var(--neutral-300));
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--azalplus-gray-900, var(--neutral-950));
    background: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.o-field-widget input:hover,
.o-field-widget select:hover,
.o-field-widget textarea:hover {
    border-color: var(--azalplus-gray-400, var(--neutral-400));
}

.o-field-widget input:focus,
.o-field-widget select:focus,
.o-field-widget textarea:focus,
.o-field-text:focus {
    outline: none;
    border-color: var(--azalplus-primary, var(--brand-blue-500));
    box-shadow: 0 0 0 5px rgba(52, 84, 209, 0.16);
    background: #FAFCFF;
}

.o-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--azalplus-gray-800, var(--neutral-800));
    text-align: left;
    padding: 0 0 4px 0;
    letter-spacing: 0.005em;
}

/* === Section titles : barre gradient + emphase === */
.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: var(--azalplus-gray-900, var(--neutral-950));
    font-size: 16px;
    letter-spacing: -0.015em;
    margin: 28px 0 14px 0;
    padding-left: 14px;
    line-height: 1.4;
    position: relative;
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-blue-500) 0%, var(--brand-blue-500) 100%);
    border-radius: 0 3px 3px 0;
}

/* === Liens === */
a {
    color: var(--azalplus-primary, var(--brand-blue-500));
    text-decoration: none;
    transition: color 0.15s ease;
    font-weight: 500;
}

a:hover {
    color: var(--azalplus-primary-light, var(--brand-blue-500));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* =============================================================================
   SIDEBAR ACTIONS — boutons primary/danger/secondary (refonte 2026-06-03)
   La classe .azal-sidebar-item est utilisee a la fois pour la nav (sidebar
   gauche) et pour les actions (sidebar droite des pages edit). Les variants
   -primary/-danger/-secondary donnent une emphase visuelle aux actions.
   ============================================================================= */
.azal-sidebar-item-primary {
    background: linear-gradient(135deg, var(--brand-blue-500) 0%, var(--brand-blue-500) 100%) !important;
    color: var(--azalplus-white, #FFFFFF) !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(52, 84, 209, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
    cursor: pointer;
    letter-spacing: 0.01em;
}

.azal-sidebar-item-primary svg {
    color: var(--azalplus-white, #FFFFFF);
}

.azal-sidebar-item-primary:hover {
    background: linear-gradient(135deg, #2d4ac3 0%, #7eb0ff 100%) !important;
    color: var(--azalplus-white, #FFFFFF) !important;
    box-shadow: 0 4px 12px rgba(52, 84, 209, 0.28);
    transform: translateY(-1px);
    text-decoration: none;
}

.azal-sidebar-item-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 1px rgba(52, 84, 209, 0.2);
}

.azal-sidebar-item-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(52, 84, 209, 0.22);
}

.azal-sidebar-item-danger {
    background: linear-gradient(180deg, var(--error) 0%, var(--text-on-error) 100%) !important;
    color: var(--azalplus-white, #FFFFFF) !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.25);
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

.azal-sidebar-item-danger:hover {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%) !important;
    color: var(--azalplus-white, #FFFFFF) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28);
    transform: translateY(-1px);
    text-decoration: none;
}

.azal-sidebar-item-secondary {
    background: var(--azalplus-white, #FFFFFF) !important;
    color: var(--azalplus-gray-700, var(--neutral-800)) !important;
    border: 1px solid var(--azalplus-gray-300, var(--neutral-300));
    font-weight: 500;
    transition: all 0.18s ease;
    cursor: pointer;
}

.azal-sidebar-item-secondary:hover {
    background: #C6F6D5 !important;
    border-color: var(--azalplus-gray-400, var(--neutral-400));
    box-shadow: 0 2px 4px var(--azalplus-overlay-gray900-06);
}

/* =============================================================================
   REFONTE FUN v3 — page CRUD edit (2026-06-03)
   "Pro + fun + attirant + user friendly" / inspi Vercel/Figma
   Cible : pages /ui/{module}/nouveau, /ui/{module}/{id}
   ============================================================================= */

/* === Header de page : gradient AZAL + page-title plus marqué === */
.page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900));
    letter-spacing: -0.02em;
    padding: 8px 0;
    background: linear-gradient(135deg, var(--azalplus-primary) 0%, var(--azalplus-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === Onglets notebook : pills colorés avec accent gradient sur actif === */
.o-notebook-headers,
.doc-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--azalplus-gray-100, var(--azalplus-gray-100));
    border-radius: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    border: none;
}

.o-notebook-header,
.doc-tab {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--azalplus-gray-600, var(--azalplus-gray-600));
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
    letter-spacing: 0.01em;
}

.o-notebook-header:hover,
.doc-tab:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--azalplus-gray-900, var(--azalplus-gray-900));
}

.o-notebook-header.active,
.doc-tab.active {
    background: var(--azalplus-white);
    color: var(--azalplus-primary, var(--azalplus-primary));
    box-shadow: 0 1px 3px var(--azalplus-overlay-gray900-10), 0 0 0 1px rgba(52, 84, 209, 0.08);
}

/* === Card de contenu d'onglet : flottante avec accent permanent === */
.o-notebook-content,
.o-form-sheet,
.o-form,
.config-container {
    background: var(--azalplus-white);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px var(--azalplus-overlay-gray900-05), 0 12px 32px var(--azalplus-overlay-gray900-06);
    border: 1px solid rgba(229, 231, 235, 0.5);
    position: relative;
    overflow: hidden;
    animation: azal-fade-in 0.4s ease;
}

.o-notebook-content::before,
.o-form-sheet::before,
.o-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--azalplus-primary) 0%, var(--azalplus-primary-light) 50%, var(--azalplus-accent-purple-light) 100%);
}

@keyframes azal-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Sidebar Actions (droite) : ambiance card === */
.azal-sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--azalplus-gray-500, var(--azalplus-gray-500));
    padding: 14px 4px 8px 4px;
    margin-top: 8px;
    border-top: 1px solid var(--azalplus-gray-200, var(--azalplus-gray-200));
}

.azal-sidebar-section-title:first-child {
    border-top: none;
    margin-top: 0;
}

/* Items neutres de la sidebar Actions : transparents avec hover doux */
.azal-sidebar-item:not(.azal-sidebar-item-primary):not(.azal-sidebar-item-danger):not(.azal-sidebar-item-secondary):not(.azal-sidebar-item-success):not(.nav-item) {
    background: transparent;
    color: var(--azalplus-gray-700, var(--azalplus-gray-700));
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 12px;
    margin: 2px 0;
    transition: all 0.15s ease;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.azal-sidebar-item:not(.azal-sidebar-item-primary):not(.azal-sidebar-item-danger):not(.azal-sidebar-item-secondary):not(.azal-sidebar-item-success):not(.nav-item):hover {
    background: var(--azalplus-primary-50, var(--azalplus-primary-50));
    color: var(--azalplus-primary, var(--azalplus-primary));
    border-color: rgba(52, 84, 209, 0.15);
    transform: translateX(2px);
}

/* === Badges status (pills colorées) === */
.status-badge,
.badge,
[class*="status-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.status-badge.status-brouillon,
.badge-brouillon {
    background: var(--azalplus-gray-100, var(--azalplus-gray-100));
    color: var(--azalplus-gray-700, var(--azalplus-gray-700));
    border-color: var(--azalplus-gray-200, var(--azalplus-gray-200));
}

.status-badge.status-envoye,
.badge-envoye,
.status-badge.status-valide,
.badge-valide {
    background: var(--azalplus-info-light);
    color: var(--azalplus-blue-700);
    border-color: var(--azalplus-info-blue-light);
}

.status-badge.status-accepte,
.badge-accepte,
.status-badge.status-confirme,
.badge-confirme {
    background: var(--azalplus-success-light, var(--azalplus-success-light));
    color: var(--azalplus-success-dark, var(--azalplus-success-dark));
    border-color: rgba(16, 185, 129, 0.3);
}

.status-badge.status-refuse,
.badge-refuse,
.status-badge.status-annule,
.badge-annule {
    background: var(--azalplus-error-light, var(--azalplus-error-light));
    color: var(--azalplus-error-dark, var(--azalplus-error-dark, var(--text-on-error)));
    border-color: rgba(239, 68, 68, 0.3);
}

/* === Inputs au focus : effet subtle scale + ring lumineux === */
.o-field-widget input:focus,
.o-field-widget select:focus,
.o-field-widget textarea:focus,
.o-field-text:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 5px rgba(52, 84, 209, 0.16), 0 4px 12px rgba(52, 84, 209, 0.1);
}

/* === Boutons sidebar plus généreux === */
.azal-sidebar-item-primary,
.azal-sidebar-item-danger,
.azal-sidebar-item-success,
.azal-sidebar-item-secondary {
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    margin: 4px 0 !important;
    border-radius: 10px !important;
}

.azal-sidebar-item-success {
    background: linear-gradient(135deg, var(--azalplus-success) 0%, var(--azalplus-success-mid) 100%) !important;
    color: var(--azalplus-white) !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

.azal-sidebar-item-success:hover {
    background: linear-gradient(135deg, var(--azalplus-success-darker) 0%, var(--azalplus-success) 100%) !important;
    color: var(--azalplus-white) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
}

/* === Fade-in pour les listes de cards === */
.card, .o-form-sheet, .o-notebook-content {
    animation: azal-fade-in 0.4s ease;
}

/* === Boutons header (top right) : plus de présence === */
.page-actions .btn,
.toolbar .btn,
.header-actions .btn {
    box-shadow: 0 2px 6px rgba(52, 84, 209, 0.15);
}

/* === Inputs : police plus marquée === */
.o-field-widget input,
.o-field-widget select,
.o-field-widget textarea,
.o-field-text {
    font-size: 14px;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900));
    font-weight: 500;
}

.o-field-widget input::placeholder,
.o-field-widget textarea::placeholder {
    color: var(--azalplus-gray-400, var(--azalplus-gray-400));
    font-weight: 400;
}

/* === Page background avec subtle pattern === */
.main-content {
    background: linear-gradient(180deg, var(--azalplus-gray-50) 0%, var(--azalplus-gray-100) 100%);
    min-height: 100%;
}

/* =============================================================================

/* =============================================================================
   REFONTE FUN v6 — propre, ciblée sur les VRAIES classes (2026-06-03)
   Apprentissages :
   - .azal-sidebar = NAVIGATION GAUCHE MASITH (NE PAS TOUCHER au layout)
   - .azal-header-actions = vrais boutons Annuler/Enregistrer du formulaire
   - .btn-save / .btn-cancel = vrais boutons (dans le hero header)
   ============================================================================= */

/* === HERO HEADER : gradient bleu marqué (validé "rectangle bleu c'est pas mal") === */
.azal-header {
    background: linear-gradient(135deg, var(--azalplus-blue-700) 0%, var(--azalplus-primary) 35%, var(--azalplus-primary-mid) 70%, var(--azalplus-primary-light) 100%) !important;
    border-radius: 14px !important;
    padding: 22px 28px !important;
    box-shadow:
        0 8px 32px rgba(30, 64, 175, 0.25),
        0 2px 8px rgba(30, 64, 175, 0.15),
        0 0 0 1px var(--azalplus-overlay-white-10) inset !important;
    color: var(--azalplus-white) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.azal-header::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(circle, var(--azalplus-overlay-white-15) 0%, transparent 70%);
    pointer-events: none;
}

.azal-header-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.azal-header-left {
    display: flex !important;
    align-items: center;
    gap: 14px;
}

.azal-header-icon {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: var(--azalplus-white) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--azalplus-overlay-white-30);
    box-shadow: 0 4px 12px var(--azalplus-overlay-black-10);
}

.azal-header-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--azalplus-white) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.azal-header-meta {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    margin-top: 4px;
}

.azal-header-actions {
    display: flex !important;
    gap: 10px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.azal-back-btn {
    background: var(--azalplus-overlay-white-15) !important;
    color: var(--azalplus-white) !important;
    border: 1px solid var(--azalplus-overlay-white-25) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.18s ease;
    text-decoration: none;
}

.azal-back-btn:hover {
    background: var(--azalplus-overlay-white-25) !important;
    color: var(--azalplus-white) !important;
    transform: translateX(-2px);
    text-decoration: none;
}

/* === VRAIS BOUTONS d'action (.btn-save, .btn-cancel) dans le hero === */
.btn-save {
    background: var(--azalplus-white) !important;
    color: var(--azalplus-primary, var(--azalplus-primary)) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-weight: 700 !important;
    font-size: 13.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.18s ease;
    cursor: pointer;
}

.btn-save:hover {
    background: var(--azalplus-focus-bg, #FAFCFF) !important;
    color: var(--azalplus-primary-dark, var(--azalplus-primary-dark)) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px);
}

.btn-cancel {
    background: var(--azalplus-overlay-white-15) !important;
    color: var(--azalplus-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    font-size: 13.5px;
    backdrop-filter: blur(10px);
    transition: all 0.18s ease;
    cursor: pointer;
}

.btn-cancel:hover {
    background: var(--azalplus-overlay-white-25) !important;
    color: var(--azalplus-white) !important;
}

/* === STATUS BADGE pill === */
.azal-status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--azalplus-primary, var(--azalplus-primary)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
    backdrop-filter: blur(10px);
}

/* === FORM CARD : grand container blanc avec ombre flottante === */
.azal-form-card,
.azal-content {
    background: var(--azalplus-white) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    box-shadow:
        0 1px 3px var(--azalplus-overlay-gray900-06),
        0 8px 24px var(--azalplus-overlay-gray900-08),
        0 16px 48px rgba(52, 84, 209, 0.06) !important;
    border: 1px solid rgba(229, 231, 235, 0.5);
    overflow: hidden;
    margin-bottom: 20px;
    animation: azal-fade-in 0.4s ease;
}

/* === SECTIONS internes === */
.azal-section-content {
    padding: 24px 28px !important;
    border-bottom: 1px solid var(--azalplus-gray-100, var(--azalplus-gray-100));
    background: var(--azalplus-white);
    transition: background 0.18s ease;
}

.azal-section-content:last-child {
    border-bottom: none;
}

.azal-section-content:hover {
    background: linear-gradient(180deg, var(--azalplus-focus-bg, #FAFCFF) 0%, var(--azalplus-section-hover-bg, #F0F4FF) 100%);
}

.azal-section-title {
    display: flex !important;
    align-items: center;
    gap: 12px;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900)) !important;
    letter-spacing: -0.015em;
    margin: 0 0 16px 0 !important;
    padding-left: 14px !important;
    line-height: 1.4 !important;
    position: relative;
    border-left: none !important;
}

.azal-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    background: linear-gradient(180deg, var(--azalplus-primary) 0%, var(--azalplus-primary-light) 100%);
    border-radius: 0 3px 3px 0;
}

/* Couleurs alternées des accents sections */
.azal-section-content:nth-of-type(6n+2) .azal-section-title::before { background: linear-gradient(180deg, var(--azalplus-success) 0%, var(--azalplus-success-mid) 100%); }
.azal-section-content:nth-of-type(6n+3) .azal-section-title::before { background: linear-gradient(180deg, var(--azalplus-warning) 0%, var(--azalplus-warning-mid, #FCD34D) 100%); }
.azal-section-content:nth-of-type(6n+4) .azal-section-title::before { background: linear-gradient(180deg, var(--azalplus-accent-purple) 0%, var(--azalplus-accent-purple-light) 100%); }
.azal-section-content:nth-of-type(6n+5) .azal-section-title::before { background: linear-gradient(180deg, var(--azalplus-accent-pink) 0%, var(--azalplus-accent-pink-light) 100%); }
.azal-section-content:nth-of-type(6n+6) .azal-section-title::before { background: linear-gradient(180deg, var(--azalplus-accent-cyan) 0%, var(--azalplus-accent-cyan-light) 100%); }

/* === FORM GRID : 2 colonnes desktop, 1 mobile === */
.azal-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 24px !important;
}

@media (max-width: 1024px) {
    .azal-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === INPUTS SOFT FILL (validé par user "le cadre texte c'est mieux") === */
.o-field-widget input,
.o-field-widget select,
.o-field-widget textarea,
.o-field-text {
    border: 1px solid transparent !important;
    background: var(--azalplus-success-pastel) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 14px;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900)) !important;
    font-weight: 500;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
    box-shadow: inset 0 1px 2px var(--azalplus-overlay-gray900-04);
    width: 100%;
    box-sizing: border-box;
}

.o-field-widget input:hover,
.o-field-widget select:hover,
.o-field-widget textarea:hover {
    background: var(--azalplus-success-pastel-deep) !important;
}

.o-field-widget input:focus,
.o-field-widget select:focus,
.o-field-widget textarea:focus,
.o-field-text:focus {
    outline: none !important;
    background: var(--azalplus-white) !important;
    border-color: var(--azalplus-primary, var(--azalplus-primary)) !important;
    box-shadow:
        0 0 0 4px rgba(52, 84, 209, 0.18),
        0 4px 12px rgba(52, 84, 209, 0.12) !important;
    transform: translateY(-1px);
}

.o-field-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--azalplus-gray-800, var(--azalplus-gray-800)) !important;
    text-align: left;
    padding: 0 0 4px 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* === BACKGROUND page clair avec relief === */
.main-content {
    background:
        radial-gradient(circle at 1px 1px, rgba(52, 84, 209, 0.06) 1px, transparent 0),
        linear-gradient(180deg, var(--azalplus-page-bg-light) 0%, var(--azalplus-page-bg-mid) 100%) !important;
    background-size: 28px 28px, 100% 100%;
    min-height: 100%;
    padding: 24px;
}

/* === Sidebar legacy bleue : RÉSERVÉE à .azal-sidebar uniquement ===
   La sidebar charte 2026 utilise la classe `.sidebar` et DOIT rester claire
   (thème charte-2026-*.css). Ces règles `!important` peignaient `.sidebar` en
   bleu et écrasaient le thème charte → menu de gauche bleu sur les pages
   generate_layout. On retire `.sidebar` de toutes les règles de COULEUR
   (on garde la largeur, neutre, pour la cohérence du layout). 2026-06-18. */
.azal-sidebar {
    background: linear-gradient(180deg, var(--azalplus-blue-800) 0%, var(--azalplus-blue-700) 50%, var(--azalplus-blue-600) 100%) !important;
}

/* === SIDEBAR : largeur (layout uniquement, neutre en couleur) === */
:root {
    --azalplus-sidebar-width: 240px;
}

.sidebar,
.azal-sidebar {
    width: 240px !important;
}

.main-wrapper,
.azal-main-wrapper {
    margin-left: 240px !important;
}

/* Texte sidebar legacy — azal-sidebar uniquement (jamais la charte .sidebar) */
.azal-sidebar .azal-sidebar-item,
.azal-sidebar a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500;
}

.azal-sidebar .azal-sidebar-item:hover,
.azal-sidebar a:hover {
    color: var(--azalplus-white) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.azal-sidebar .azal-sidebar-item.active {
    color: var(--azalplus-white) !important;
    background: var(--azalplus-overlay-white-20) !important;
}

.azal-sidebar .azal-sidebar-section-title {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.azal-sidebar svg {
    color: rgba(255, 255, 255, 0.88);
    fill: currentColor;
}

.azal-sidebar-header,
.azal-sidebar-logo,
.azal-sidebar-logo-text {
    color: var(--azalplus-white) !important;
}

/* === SECTIONS RESPONSIVE AUTO-FIT : 1→2→3→4 colonnes selon largeur === */
.azal-form-card,
.azal-form-card > form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    align-items: flex-start;
    width: 100%;
}

.azal-content {
    display: block !important;
}

.azal-section-content {
    border-bottom: 1px solid var(--azalplus-gray-100, var(--azalplus-gray-100)) !important;
    border-right: 1px solid var(--azalplus-gray-100, var(--azalplus-gray-100)) !important;
    min-width: 0 !important;  /* permet au grid auto-fit de calculer les colonnes */
    overflow: hidden;
}

/* Chaque section : grille interne en 1 colonne */
.azal-form-card .azal-form-grid,
.azal-content .azal-form-grid {
    grid-template-columns: 1fr !important;
}


/* === Espace ENTRE sections réduit seulement (tailles normales) === */
.azal-section-content {
    padding: 12px 24px !important;  /* vertical 12px (au lieu de 24), horizontal normal */
}

/* Premier élément du formulaire dans la section : marge top zéro */
.azal-section-content .azal-form-grid {
    margin-top: 0 !important;
}

/* Permettre au grid de shrink les sections (sinon inputs contraignent la largeur) */
.azal-form-card * {
    min-width: 0 !important;
}
.azal-form-card input,
.azal-form-card select,
.azal-form-card textarea {
    min-width: 0 !important;
    width: 100% !important;
}

/* Sections : flex items qui s'ajustent (1→2→3→4 cols selon largeur) */
.azal-form-card .azal-section-content,
.azal-form-card > form > .azal-section-content {
    flex: 1 1 280px !important;
    max-width: 100% !important;
    min-width: 280px !important;
    box-sizing: border-box;
}

/* === Widgets flottants bottom-right : alignés verticalement, remontés === */
#marceau-container {
    right: 20px !important;
    bottom: 24px !important;
}

button#hotline-fab {
    right: 20px !important;
    bottom: 96px !important;
}

div#hotline-fab:not(button) {
    right: 20px !important;
    bottom: 168px !important;
}


/* === Nom société en cours en VERT GRAS dans la sidebar (demande user) === */
.societe-switcher-name {
    color: var(--azalplus-success) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}

/* =============================================================================
   PARAMETRES / THÈME DOCUMENTS — CSS extrait des blocs <style> inline
   (page /ui/parametres/theme). Migré 2026-06-03 selon AZA-CSS-001.
   ============================================================================= */

/* === Sélecteur d'ambiance / couleurs / styles documents === */
.theme-option { margin-bottom: 24px; }
.color-options { display: flex; gap: 8px; margin-top: 8px; }
.color-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.color-btn:hover { transform: scale(1.1); }
.color-btn.active {
    border-color: var(--azalplus-gray-900, var(--azalplus-gray-900));
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--azalplus-gray-400, var(--azalplus-gray-400));
}
.style-options { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.style-btn {
    padding: 8px 16px;
    border: 1px solid var(--azalplus-gray-300, var(--azalplus-gray-300));
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.style-btn:hover { border-color: var(--azalplus-gray-400, var(--azalplus-gray-400)); }
.style-btn.active {
    border-color: var(--azalplus-primary, var(--azalplus-primary));
    background: var(--azalplus-primary-50, var(--azalplus-primary-50));
    color: var(--azalplus-primary, var(--azalplus-primary));
}
.style-preview {
    width: 60px; height: 40px;
    background: var(--azalplus-gray-100, var(--azalplus-gray-100));
    border-radius: 4px;
}

/* === Tags variables (séquences numérotation) === */
.var-tag {
    background: var(--azalplus-primary-50, var(--azalplus-primary-50));
    color: var(--azalplus-primary, var(--azalplus-primary));
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--azalplus-primary, var(--azalplus-primary));
}
.var-tag:hover {
    background: var(--azalplus-primary, var(--azalplus-primary));
    color: white;
}

/* === Tabs du thème documents === */
.theme-tabs-wrapper {
    display: block !important;
    width: 100% !important;
}
.theme-tabs-wrapper .tabs-container {
    display: block;
    width: 100%;
}
.theme-tabs-wrapper .tab-content {
    width: 100%;
}
.theme-tabs-wrapper .tab-content:first-of-type,
.theme-tabs-wrapper .tab-content.active {
    display: block !important;
}

/* === PAGE PARAMETRES/THEME : tabs et content alignés sur le style global === */

/* Container des onglets (Style Documents / Apparence / Numérotation / CGV) */
.tabs-container .tabs,
.theme-tabs-wrapper .tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 6px !important;
    background: var(--azalplus-gray-100, var(--azalplus-gray-100)) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.tabs-container .tab,
.theme-tabs-wrapper .tab {
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--azalplus-gray-600, var(--azalplus-gray-600)) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    letter-spacing: 0.01em;
}

.tabs-container .tab:hover,
.theme-tabs-wrapper .tab:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900)) !important;
}

.tabs-container .tab.active,
.theme-tabs-wrapper .tab.active {
    background: var(--azalplus-white) !important;
    color: var(--azalplus-primary, var(--azalplus-primary)) !important;
    box-shadow: 0 1px 3px var(--azalplus-overlay-gray900-10), 0 0 0 1px rgba(52, 84, 209, 0.08) !important;
}

/* Contenu de l'onglet : card flottante */
.theme-tabs-wrapper .tab-content,
.tabs-container .tab-content {
    background: var(--azalplus-white) !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    box-shadow:
        0 1px 3px var(--azalplus-overlay-gray900-06),
        0 8px 24px var(--azalplus-overlay-gray900-08),
        0 16px 48px rgba(52, 84, 209, 0.06) !important;
    border: 1px solid rgba(229, 231, 235, 0.5) !important;
    position: relative;
    /* overflow: hidden retiré — coupait les longs contenus (ex: page Thèmes
       avec 8 cartes d'ambiance). Le scroll naturel du body prend le relais. */
    overflow: visible;
    animation: azal-fade-in 0.4s ease;
}

/* Border-top gradient comme les autres pages */
.theme-tabs-wrapper .tab-content::before,
.tabs-container .tab-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--azalplus-primary) 0%, var(--azalplus-primary-light) 50%, var(--azalplus-accent-purple-light) 100%);
}

/* H1 sur cette page : style hero light (pas le full gradient) */
.main-content > h1.page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900)) !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    background: none !important;
    -webkit-text-fill-color: var(--azalplus-gray-900, var(--azalplus-gray-900)) !important;
}

/* === Fix tab-content : le 1er onglet (tab-documents) doit être visible par défaut === */
#tab-documents:not([style*="display: none"]) {
    display: block !important;
}
.tab-content[style*="display: none"] {
    display: none !important;
}
.tab-content.tab-active,
.tab-content.active-tab {
    display: block !important;
}

/* =============================================================================
   MINIATURES VISUELLES des styles documents (Moderne/Classique/Minimal etc.)
   Au lieu de rectangles gris uniformes : aperçus distinctifs en CSS pur
   ============================================================================= */
.style-preview {
    width: 80px !important;
    height: 56px !important;
    background: var(--azalplus-white) !important;
    border: 1px solid var(--azalplus-gray-300, var(--azalplus-gray-300));
    border-radius: 4px !important;
    position: relative;
    overflow: hidden;
}

/* === Styles globaux du document === */
/* Moderne : header gradient bleu + lignes */
.style-preview.moderne {
    background:
        linear-gradient(180deg, var(--azalplus-primary) 0%, var(--azalplus-primary-light) 100%) top/100% 14px no-repeat,
        linear-gradient(0deg, var(--azalplus-gray-200) 1px, transparent 1px) bottom 22px left/100% 1px no-repeat,
        linear-gradient(0deg, var(--azalplus-gray-200) 1px, transparent 1px) bottom 14px left/100% 1px no-repeat,
        linear-gradient(0deg, var(--azalplus-gray-200) 1px, transparent 1px) bottom 6px left/100% 1px no-repeat,
        var(--azalplus-white) !important;
}

/* Classique : double bordure + titre centré */
.style-preview.classique {
    background:
        linear-gradient(0deg, transparent 0%, var(--azalplus-gray-700) 50%, transparent 100%) center/40% 2px no-repeat,
        var(--azalplus-white) !important;
    border: 1px solid var(--azalplus-gray-800) !important;
    box-shadow: inset 0 0 0 4px var(--azalplus-white), inset 0 0 0 5px var(--azalplus-gray-800);
}

/* Minimal : juste 3 lignes très fines, beaucoup d'espace */
.style-preview.minimal {
    background:
        linear-gradient(90deg, var(--azalplus-gray-400) 50%, transparent 50%) top 14px left/60% 1px no-repeat,
        linear-gradient(90deg, var(--azalplus-gray-300) 30%, transparent 30%) top 24px left/80% 1px no-repeat,
        linear-gradient(90deg, var(--azalplus-gray-300) 40%, transparent 40%) top 34px left/70% 1px no-repeat,
        var(--azalplus-white) !important;
}

/* === Styles tableaux === */
/* Simple : tableau basique 2 col */
.style-preview.simple {
    background:
        linear-gradient(90deg, transparent 49%, var(--azalplus-gray-300) 49%, var(--azalplus-gray-300) 51%, transparent 51%) center/100% 100% no-repeat,
        repeating-linear-gradient(0deg, var(--azalplus-white) 0, var(--azalplus-white) 10px, var(--azalplus-gray-100) 10px, var(--azalplus-gray-100) 11px) !important;
}

/* Zebra : lignes alternées colorées */
.style-preview.zebra {
    background:
        repeating-linear-gradient(0deg, var(--azalplus-white) 0, var(--azalplus-white) 10px, var(--azalplus-info-light) 10px, var(--azalplus-info-light) 20px) !important;
}

/* Bordures : tableau avec toutes les bordures visibles */
.style-preview.bordures {
    background:
        linear-gradient(90deg, transparent 32%, var(--azalplus-gray-800) 32%, var(--azalplus-gray-800) 34%, transparent 34%) center/100% 100% no-repeat,
        linear-gradient(90deg, transparent 65%, var(--azalplus-gray-800) 65%, var(--azalplus-gray-800) 67%, transparent 67%) center/100% 100% no-repeat,
        repeating-linear-gradient(0deg, var(--azalplus-white) 0, var(--azalplus-white) 10px, var(--azalplus-gray-800) 10px, var(--azalplus-gray-800) 11px) !important;
}

/* Sans bordure : juste lignes très claires */
.style-preview.sans-bordure,
.style-preview.sansbordure {
    background:
        repeating-linear-gradient(0deg, var(--azalplus-white) 0, var(--azalplus-white) 13px, var(--azalplus-gray-100) 13px, var(--azalplus-gray-100) 14px) !important;
}

/* === Angles === */
.style-preview.angles-arrondis,
.style-preview.arrondis {
    background: linear-gradient(135deg, var(--azalplus-primary-50), var(--azalplus-info-light)) !important;
    border-radius: 16px !important;
}
.style-preview.angles-droits,
.style-preview.droits {
    background: var(--azalplus-primary-50) !important;
    border-radius: 0 !important;
}

/* === Lignes (épaisseur) === */
.style-preview.aucun,
.style-preview.aucune {
    background: var(--azalplus-white) !important;
}
.style-preview.fines {
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 14px, var(--azalplus-gray-200) 14px, var(--azalplus-gray-200) 15px) !important;
}
.style-preview.epaisses {
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 14px, var(--azalplus-gray-700) 14px, var(--azalplus-gray-700) 17px) !important;
}

/* === Images des produits === */
.style-preview.petites {
    background:
        linear-gradient(135deg, var(--azalplus-blue-fab) 0%, var(--azalplus-info) 100%) top 20px left 8px/12px 12px no-repeat,
        var(--azalplus-white) !important;
}
.style-preview.moyennes {
    background:
        linear-gradient(135deg, var(--azalplus-blue-fab) 0%, var(--azalplus-info) 100%) top 14px left 12px/24px 20px no-repeat,
        var(--azalplus-white) !important;
}
.style-preview.grandes {
    background:
        linear-gradient(135deg, var(--azalplus-blue-fab) 0%, var(--azalplus-info) 100%) top 8px left 12px/40px 32px no-repeat,
        var(--azalplus-white) !important;
}

/* === Active : ring bleu marqué autour de l'aperçu sélectionné === */
.style-btn.active .style-preview {
    box-shadow: 0 0 0 3px var(--azalplus-primary, var(--azalplus-primary));
}

/* === Angles arrondis / carrés (preview visuelle) === */
.style-preview.arrondis {
    background: linear-gradient(135deg, var(--azalplus-info-light) 0%, var(--azalplus-blue-fab) 100%) !important;
    border-radius: 14px !important;
    border: 2px solid var(--azalplus-primary, var(--azalplus-primary));
}

.style-preview.carres {
    background: linear-gradient(135deg, var(--azalplus-info-light) 0%, var(--azalplus-blue-fab) 100%) !important;
    border-radius: 0 !important;
    border: 2px solid var(--azalplus-primary, var(--azalplus-primary));
}

/* === CGV textarea : grande zone d'édition (évite double scrollbar) === */
#theme_cgv {
    min-height: 75vh !important;
    width: 100% !important;
    resize: vertical !important;
    line-height: 1.55;
    padding: 16px 18px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    background: var(--azalplus-white) !important;
    color: var(--azalplus-gray-900, var(--azalplus-gray-900));
}

#theme_cgv:focus {
    background: var(--azalplus-focus-bg, #FAFCFF) !important;
}

/* La card CGV : padding + hauteur auto */
#tab-cgv .card {
    padding: 24px !important;
}

/* =============================================================================
   === UTILITAIRES PARAMETRES/THEME ===
   Classes utilitaires pour migrer les style="..." inline de /parametres/theme
   vers du CSS centralisé (AZA-CSS-001).
   Toutes les valeurs utilisent les variables --azalplus-* uniquement.
   ============================================================================= */

/* --- Titres et textes de section --- */
.theme-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--azalplus-gray-700);
}
.theme-section-title-h4 {
    margin-bottom: 12px;
    color: var(--azalplus-gray-700);
}
.theme-section-title-h4-strong {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--azalplus-gray-700);
}
.theme-section-title-h3 {
    margin-bottom: 16px;
    color: var(--azalplus-gray-800);
}
.theme-section-title-card {
    font-size: 16px;
    font-weight: 600;
    color: var(--azalplus-gray-800);
}
.theme-text-muted {
    color: var(--azalplus-gray-500);
}
.theme-text-muted-small {
    font-size: 12px;
    color: var(--azalplus-gray-500);
}
.theme-text-help {
    color: var(--azalplus-gray-600);
    margin-bottom: 24px;
}
.theme-text-desc {
    font-size: 13px;
    color: var(--azalplus-gray-600);
}
.theme-text-meta {
    color: var(--azalplus-gray-500);
    font-size: 13px;
    margin-top: 4px;
}
.theme-text-info-block {
    color: var(--azalplus-gray-600);
    margin: 0;
}

/* --- Layout flex --- */
.theme-flex-center-gap8 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.theme-flex-center-gap8-cursor {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.theme-flex-center-gap12-mb16 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.theme-flex-gap8 {
    display: flex;
    gap: 8px;
}
.theme-flex-gap8-mt20 {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.theme-flex-gap8-mb8 {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.theme-flex-gap12-mb20 {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.theme-flex-gap24-wrap {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.theme-flex-wrap-gap8 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.theme-flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.theme-flex1 {
    flex: 1;
}
.theme-flex1-min300 {
    flex: 1;
    min-width: 300px;
}
.theme-flex-title-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Grilles --- */
.theme-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.theme-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.theme-grid-fields-mb20 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* --- Marges et séparateurs --- */
.theme-divider-top {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--azalplus-gray-200);
}
.theme-mb24 {
    margin-bottom: 24px;
}
.theme-mb20 {
    margin-bottom: 20px;
}
.theme-mb16 {
    margin-bottom: 16px;
}
.theme-mb12 {
    margin-bottom: 12px;
}
.theme-mb8 {
    margin-bottom: 8px;
}
.theme-mt12 {
    margin-top: 12px;
    display: flex;
    gap: 6px;
}
.theme-mt16 {
    margin-top: 16px;
}

/* --- Boutons couleur (color-picker) --- */
.theme-color-swatch {
    width: 50px;
    height: 38px;
    border: none;
    border-radius: var(--azalplus-radius);
    cursor: pointer;
}

/* --- Coin arrondi bas pour onglet card --- */
.theme-card-tabs-radius {
    border-radius: 0 0 var(--azalplus-radius-lg) var(--azalplus-radius-lg);
}
.theme-tabs-header-bg {
    background: var(--azalplus-white);
    border-radius: var(--azalplus-radius-lg) var(--azalplus-radius-lg) 0 0;
    margin-bottom: 0;
}

/* --- Conteneurs --- */
.theme-wrapper-block {
    display: block;
    width: 100%;
}
.theme-table-scroll {
    overflow-x: auto;
}
.theme-w100 {
    width: 100%;
}
.theme-font-mono {
    font-family: monospace;
}
.theme-font-mono-14 {
    font-family: monospace;
    font-size: 14px;
}
.theme-font-bold-500 {
    font-weight: 500;
}
.theme-font-icon-24 {
    font-size: 24px;
}
.theme-code-small {
    font-size: 12px;
}

/* --- Cards de couleur (modules par défaut) --- */
.theme-info-card {
    background: var(--azalplus-gray-50);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.theme-info-card-spaced {
    margin-top: 20px;
    padding: 16px;
    background: var(--azalplus-gray-50);
    border-radius: 8px;
}
.theme-form-card {
    background: var(--azalplus-gray-50);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--azalplus-gray-200);
}
.theme-card-white-bordered {
    margin-top: 20px;
    padding: 16px;
    background: var(--azalplus-white);
    border-radius: 8px;
    border: 1px solid var(--azalplus-gray-200);
}
.theme-preview-highlight {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--azalplus-primary-50) 0%, var(--azalplus-white) 100%);
    border-radius: 8px;
    border: 2px solid var(--azalplus-primary);
}

/* --- Badges (custom / défaut) --- */
.theme-badge-custom {
    background: var(--azalplus-success-light);
    color: var(--azalplus-success-darker);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 8px;
}
.theme-badge-default {
    background: var(--azalplus-gray-100);
    color: var(--azalplus-gray-500);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 8px;
}
.theme-badge-success-preview {
    background: var(--azalplus-success-pastel);
    color: var(--azalplus-success-darker);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.theme-badge-error-preview {
    background: var(--azalplus-error-light);
    color: var(--azalplus-error);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

/* --- Code d'aperçu numérotation --- */
.theme-code-preview {
    background: var(--azalplus-primary-50);
    color: var(--azalplus-primary);
    padding: 4px 8px;
    border-radius: 4px;
}
.theme-code-preview-big {
    font-size: 18px;
    color: var(--azalplus-primary);
    background: var(--azalplus-white);
    padding: 6px 12px;
    border-radius: 4px;
}
.theme-code-preview-small {
    font-size: 14px;
    color: var(--azalplus-gray-700);
    background: var(--azalplus-white);
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- Style cards (ambiance) --- */
.theme-style-card {
    border: 2px solid var(--azalplus-gray-200);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

/* --- Aperçu live custom theme --- */
.theme-preview-container {
    border: 1px solid var(--azalplus-gray-200);
    border-radius: var(--azalplus-radius-lg);
    overflow: hidden;
    height: 320px;
}
.theme-preview-sidebar {
    width: 60px;
    height: 100%;
    float: left;
    background: var(--azalplus-blue-800);
    padding: 12px 8px;
}
.theme-preview-content {
    margin-left: 60px;
    height: 100%;
    background: var(--azalplus-page-bg-light);
    padding: 16px;
}
.theme-preview-icon {
    width: 36px;
    height: 36px;
    background: var(--azalplus-overlay-white-10);
    border-radius: 8px;
}
.theme-preview-icon-mb16 {
    width: 36px;
    height: 36px;
    background: var(--azalplus-overlay-white-10);
    border-radius: 8px;
    margin-bottom: 16px;
}
.theme-preview-icon-mb8 {
    width: 36px;
    height: 36px;
    background: var(--azalplus-overlay-white-10);
    border-radius: 8px;
    margin-bottom: 8px;
}
.theme-preview-icon-active {
    width: 36px;
    height: 36px;
    background: var(--azalplus-overlay-white-20);
    border-radius: 8px;
    margin-bottom: 8px;
}
.theme-preview-row {
    background: var(--azalplus-white);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.theme-preview-row-flex {
    background: var(--azalplus-white);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
}
.theme-preview-row-last {
    background: var(--azalplus-white);
    padding: 12px;
    border-radius: 8px;
}
.theme-preview-btn-primary {
    background: var(--azalplus-primary);
    color: var(--azalplus-white);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
}
.theme-preview-btn-secondary {
    background: var(--azalplus-gray-200);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
}
.theme-preview-bar {
    height: 8px;
    background: var(--azalplus-gray-200);
    border-radius: 4px;
}
.theme-preview-bar-mb6 {
    height: 8px;
    background: var(--azalplus-gray-200);
    border-radius: 4px;
    margin-bottom: 6px;
}
.theme-preview-bar-70 {
    height: 8px;
    background: var(--azalplus-gray-200);
    border-radius: 4px;
    width: 70%;
}
.theme-preview-accent-bar {
    height: 4px;
    background: var(--azalplus-primary-light);
    border-radius: 2px;
    margin-bottom: 8px;
    width: 40%;
}

/* --- Cellule vide tableau séquences --- */
.theme-empty-cell {
    text-align: center;
    color: var(--azalplus-gray-500);
    padding: 40px;
}

/* --- Échantillon couleur (3 carrés) thème --- */
.theme-color-chip {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* =============================================================================
   === UTILITAIRES PARAMETRES/THEME zone B === (Numérotation + CGV)
   Classes additionnelles pour migrer les style="..." inline des tabs
   "Numérotation" et "CGV" de /parametres/theme (AZA-CSS-001).
   La plupart des classes nécessaires sont déjà définies plus haut
   (theme-flex-*, theme-grid-*, theme-text-*, theme-card-*, theme-preview-*).
   N'ajouter ici QUE les patterns vraiment spécifiques à zone B.
   ============================================================================= */

/* =============================================================================
   === UTILITAIRES PARAMETRES (page principale /parametres) zone C ===
   Migration des style="..." inline du fichier /parametres (profil, alertes,
   email SMTP, PDF) — AZA-CSS-001.
   Toutes les valeurs utilisent les variables --azalplus-* uniquement.
   ============================================================================= */

/* --- Conteneur settings + onglets --- */
.theme-settings-container {
    max-width: 900px;
}
.theme-tabs-header {
    background: var(--azalplus-white);
    border-radius: var(--azalplus-radius-lg) var(--azalplus-radius-lg) 0 0;
    margin-bottom: 0;
}
.theme-card-tabs-radius-bottom {
    border-radius: 0 0 var(--azalplus-radius-lg) var(--azalplus-radius-lg);
}

/* --- Champ readonly (email du profil) --- */
.theme-input-readonly {
    background: var(--azalplus-gray-100);
}
.theme-small-text-muted {
    color: var(--azalplus-gray-500);
}

/* --- Actions en bas de carte (formulaires) --- */
.theme-actions-end {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}
.theme-actions-between {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Onglet Alertes --- */
.theme-help-text {
    font-size: 13px;
    color: var(--azalplus-gray-600);
}
.theme-loading-text {
    color: var(--azalplus-gray-400);
    font-size: 13px;
}
.theme-card-footer-light {
    padding: 16px;
    border-top: 1px solid var(--azalplus-gray-100);
}
.theme-btn-save-primary {
    padding: 10px 20px;
    background: var(--azalplus-primary);
    color: var(--azalplus-white);
    border: none;
    border-radius: var(--azalplus-radius);
    font-weight: 700;
    cursor: pointer;
}

/* --- Onglet Email SMTP --- */
.theme-meta-small {
    margin-top: 4px;
    font-size: 13px;
}
.theme-alert-info-tip {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--azalplus-info-light);
    border-radius: var(--azalplus-radius);
    border-left: 4px solid var(--azalplus-info);
}
.theme-link-primary {
    color: var(--azalplus-primary);
}
.theme-section-h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--azalplus-gray-700);
}
.theme-form-grid-2-1 {
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.theme-form-grid-gap-mb24 {
    gap: 16px;
    margin-bottom: 24px;
}
.theme-form-grid-gap {
    gap: 16px;
}
.theme-label-mb12 {
    margin-bottom: 12px;
}
.theme-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.theme-section-divider {
    border-top: 1px solid var(--azalplus-gray-200);
    padding-top: 24px;
    margin-top: 24px;
}
.theme-result-hidden {
    margin-top: 16px;
}

/* --- Onglet PDF (couleurs) --- */
.theme-color-input {
    height: 42px;
    padding: 4px;
}

/* --- Onglet PDF (marges formulaire) --- */
.theme-form-group-mb24 {
    margin-bottom: 24px;
}

/* --- JS-injected alerts list (loadAlertes runtime markup) --- */
.theme-alerts-empty {
    color: var(--azalplus-gray-400);
}
.theme-alerts-category {
    font-size: 13px;
    font-weight: 700;
    color: var(--azalplus-primary);
    margin: 16px 0 8px;
    border-bottom: 1px solid var(--azalplus-gray-100);
    padding-bottom: 4px;
}
.theme-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--azalplus-gray-50);
}
.theme-alert-row-main {
    flex: 1;
}
.theme-alert-title {
    font-size: 13px;
    cursor: pointer;
}
.theme-alert-checkbox-mr {
    margin-right: 6px;
}
.theme-alert-desc {
    font-size: 11px;
    color: var(--azalplus-gray-400);
    margin-left: 22px;
}
.theme-alert-channels {
    display: flex;
    gap: 6px;
}
.theme-alert-channel-label {
    font-size: 11px;
    cursor: pointer;
}
.theme-frequence-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--azalplus-gray-100);
}
.theme-frequence-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}
.theme-frequence-option {
    display: block;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}
.theme-alerts-error {
    color: var(--azalplus-error);
}



/* =============================================================================
   Page Login
   ============================================================================= */
.login-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    background: var(--azalplus-gray-100, #f0f4f8);
    color: var(--azalplus-gray-900, #1e293b);
}

/* Panneau gauche : branding */
.login-brand {
    flex: 1;
    background: linear-gradient(135deg, var(--azalplus-sidebar-bg, var(--brand-blue-700)) 0%, var(--azalplus-primary, var(--brand-blue-500)) 50%, var(--azalplus-primary-light, var(--brand-blue-500)) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.login-brand::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}

.brand-logo {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
}
.brand-logo svg {
    filter: drop-shadow(0 8px 24px var(--azalplus-overlay-black-20));
}

.brand-name {
    position: relative;
    z-index: 1;
    font-size: 36px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.brand-name span {
    color: var(--azalplus-primary-light, var(--brand-blue-500));
}

.brand-tagline {
    position: relative;
    z-index: 1;
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    max-width: 300px;
    line-height: 1.6;
}

.brand-features {
    position: relative;
    z-index: 1;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.brand-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}
.brand-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--azalplus-overlay-white-12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Panneau droit : formulaire */
.login-form-panel {
    width: 480px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    background: white;
}
.login-welcome {
    margin-bottom: 36px;
}
.login-welcome h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--azalplus-gray-900, #0f172a);
    margin-bottom: 8px;
}
.login-welcome p {
    font-size: 15px;
    color: var(--azalplus-gray-500, #64748b);
}

.login-error {
    display: none;
    background: var(--azalplus-error-light, var(--bg-error));
    border: 1px solid var(--bg-error);
    color: var(--text-on-error);
    padding: 12px 16px;
    border-radius: var(--azalplus-radius, 10px);
    font-size: 14px;
    margin-bottom: 20px;
    animation: shake 0.4s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.login-form-panel .form-group {
    margin-bottom: 20px;
}
.login-form-panel .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--azalplus-gray-700, var(--neutral-800));
    margin-bottom: 6px;
}
.login-form-panel .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--azalplus-gray-300, var(--neutral-300));
    border-radius: var(--azalplus-radius, 10px);
    font-size: 15px;
    font-family: inherit;
    color: var(--azalplus-gray-900, #1e293b);
    background: var(--azalplus-gray-50, var(--neutral-50));
    transition: all 0.2s;
    outline: none;
}
.login-form-panel .form-group input:focus {
    border-color: var(--azalplus-primary, var(--brand-blue-500));
    background: white;
    box-shadow: 0 0 0 3px rgba(52, 84, 209, 0.1);
}
.login-form-panel .form-group input::placeholder {
    color: var(--azalplus-gray-400, var(--neutral-400));
}

/* Password field */
.password-field {
    position: relative;
}
.password-field input {
    padding-right: 48px;
}
.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--azalplus-gray-400, var(--neutral-400));
    cursor: pointer;
    padding: 8px;
    font-size: 18px;
    border-radius: 8px;
    transition: all 0.15s;
}
.password-toggle:hover {
    color: var(--azalplus-gray-600, var(--neutral-700));
    background: var(--azalplus-gray-100, var(--neutral-100));
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.form-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--azalplus-gray-500, #64748b);
    cursor: pointer;
}
.form-options input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--azalplus-primary, var(--brand-blue-500));
}
.forgot-link {
    font-size: 13px;
    color: var(--azalplus-primary, var(--brand-blue-500));
    text-decoration: none;
    font-weight: 500;
}
.forgot-link:hover {
    text-decoration: underline;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: var(--azalplus-primary-gradient, linear-gradient(135deg, var(--brand-blue-500), var(--brand-blue-700)));
    color: white;
    border: none;
    border-radius: var(--azalplus-radius, 10px);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-login:hover {
    box-shadow: 0 4px 12px rgba(52, 84, 209, 0.3);
    transform: translateY(-1px);
}
.btn-login:active {
    transform: translateY(0);
}
.btn-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.btn-login .spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--azalplus-overlay-white-30);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.btn-login.loading .spinner { display: block; }
.btn-login.loading .btn-text { display: none; }

.login-footer {
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--azalplus-gray-400, #94a3b8);
}

/* Responsive login */
@media (max-width: 900px) {
    .login-brand { display: none; }
    .login-form-panel {
        width: 100%;
        padding: 40px 24px;
    }
}
@media (max-width: 480px) {
    .login-form-panel { padding: 32px 20px; }
    .login-welcome h1 { font-size: 22px; }
}


/* === azalplus_2026_overrides.css === */

/* AZALPLUS — Overrides charte 2026 (option 2 "thème étendu")
 * Remappe les variables --azalplus-* sémantiques vers la palette pastel sourd
 * de la charte 2026 (cf. docs/CHARTE_GRAPHIQUE.md, validée 2026-06-05).
 *
 * Le primary (#3454D1 brand blue) et la sidebar (#1E3A8A brand blue 700)
 * sont déjà conformes à la charte → aucun remap nécessaire.
 *
 * Les couleurs hardcodées éparses dans le style.css legacy (14 #3454D1,
 * 8 #6B9FFF, etc.) ne sont pas affectées — migration progressive en jour
 * supervisé (option 3).
 *
 * Ce fichier DOIT être chargé APRÈS le style.css legacy pour que la cascade
 * CSS prenne le dessus sur les définitions ligne 6 (:root).
 */

:root {
  /* === Sémantiques pastel sourd === */
  --azalplus-success: var(--success, #22C55E);
  --azalplus-success-light: var(--bg-success, #DCFCE7);
  --azalplus-success-dark: var(--text-on-success, #14532D);

  --azalplus-warning: var(--warning, #FACC15);
  --azalplus-warning-light: var(--bg-warning, #FEF3C7);
  --azalplus-warning-dark: var(--text-on-warning, #78350F);

  --azalplus-error: var(--error, #FCA5A5);
  --azalplus-error-light: var(--bg-error, #FEE2E2);
  --azalplus-error-dark: var(--text-on-error, #7F1D1D);

  --azalplus-info: var(--info, #A78BFA);
  --azalplus-info-light: var(--bg-info, #EDE9FE);
  --azalplus-info-blue-light: var(--bg-info, #EDE9FE);

  /* === Accent === */
  --azalplus-accent-pink: var(--accent, #FB923C);
  --azalplus-accent-pink-light: var(--bg-warning, #FEF3C7);

  /* === Typographie charte (Inter 800 + Instrument Serif italique) === */
  /* Les classes .azal-* ne lisent pas de variable typo — on ajoute les
   * familles de police au document via font-family directement sur body. */
}

/* Application typographie charte sur l'app entière */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, .page-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* ============================================================
 * Lisibilité sidebar : forcer textes user/société en blanc clair
 * (legacy CSS avait hardcodé #10B981/#22C55E qui jurent sur fond
 * bleu marine avec la nouvelle typo Inter 800).
 * ============================================================ */
/* Spécificité boostée (3 classes) pour battre le CSS inline injecté
 * par moteur/ui.py:27646 qui force #10b981 en !important. */
body .sidebar-user .user-name,
body .sidebar-user .user-email,
body .societe-switcher-name {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
}
body .sidebar-user .user-email {
  font-weight: 400 !important;
  opacity: 0.7;
}
body .societe-switcher-name {
  font-weight: 700 !important;
}
/* Avatar M : reprend brand blue au lieu du vert legacy */
body .sidebar-user .user-avatar {
  background: var(--brand-blue-500, #3454D1) !important;
  color: #FFFFFF !important;
}


/* === style_modules.css === */

/* AZALPLUS — Modules CSS extraits de ui.py (Phase 1 migration AZAP-CSS-001) */
/* Source : 39 blocs <style> inline supprimés de moteur/ui.py. */
/* Étape 1 : centralisation sans transformation des couleurs. */
/* Étape 2 (à venir) : remplacer hex hardcodés par var(--*) charte. */


/* === Bloc 1 (extrait ligne 1546 de ui.py) === */
.modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .modal-content {
            position: relative;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            width: 90%;
            max-height: 90vh;
            overflow: auto;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--neutral-200);
        }
        .modal-header h3 {
            margin: 0;
        }
        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--neutral-500);
        }
        .modal-body {
            padding: 16px;
        }
        .modal-footer {
            padding: 16px;
            border-top: 1px solid var(--neutral-200);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        .btn-info {
            background: var(--info);
            color: white;
        }
        .btn-info:hover {
            background: var(--info);
        }
        .btn-success {
            background: var(--success);
            color: white;
        }
        .btn-success:hover {
            background: var(--success);
        }
        .btn-warning {
            background: var(--warning);
            color: var(--neutral-950);
        }
        .btn-warning:hover {
            background: var(--text-on-warning);
        }
        .alert {
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 8px;
        }
        .alert-success {
            background: var(--bg-success);
            color: var(--text-on-success);
            border: 1px solid var(--bg-success);
        }
        .alert-danger {
            background: var(--bg-error);
            color: var(--text-on-error);
            border: 1px solid var(--bg-error);
        }

/* === Bloc 2 (extrait ligne 1772 de ui.py) === */
.upload-zone {
            border: 2px dashed var(--gray-300);
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            background: var(--gray-50);
            transition: all 0.2s;
        }
        .upload-zone:hover, .upload-zone.dragover {
            border-color: var(--primary);
            background: var(--primary-light);
        }
        .upload-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }
        .upload-text {
            color: var(--gray-500);
            margin-bottom: 8px;
        }
        .documents-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .document-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            margin-bottom: 8px;
            background: white;
        }
        .document-item:hover {
            background: var(--gray-50);
        }
        .doc-icon {
            font-size: 24px;
        }
        .doc-info {
            flex: 1;
        }
        .doc-name {
            font-weight: 500;
            color: var(--gray-800);
        }
        .doc-meta {
            font-size: 12px;
            color: var(--gray-500);
            display: block;
            margin-top: 2px;
        }
        .doc-actions {
            display: flex;
            gap: 8px;
        }

/* === Bloc 3 (extrait ligne 2608 de ui.py) === */
.dashboard-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 20px;
                margin-bottom: 30px;
            }
            .kpi-card {
                background: var(--gray-100);
                border-radius: 12px;
                padding: 24px;
                box-shadow: var(--shadow-sm);
                border-left: 4px solid var(--primary);
                transition: all 0.2s;
            }
            .kpi-card:hover {
                box-shadow: var(--shadow);
                border-left-color: var(--primary-light);
            }
            .kpi-card.success { border-left-color: var(--success); }
            .kpi-card.warning { border-left-color: var(--warning); }
            .kpi-card.danger { border-left-color: var(--error); }
            .kpi-card.info { border-left-color: var(--info); }
            .kpi-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
            .kpi-title {
                font-size: 14px;
                /* Contraste WCAG AA : gray-500 (#64748b) ≈ 4,06:1 sur blanc (< 4,5).
                   gray-600 (#475569) ≈ 6,4:1 + weight 600 → conforme AA. */
                color: var(--gray-600);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .kpi-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--gray-200);
            }
            .kpi-icon svg { width: 20px; height: 20px; color: var(--primary-light); }
            .kpi-value {
                font-size: 28px;
                font-weight: 700;
                color: var(--gray-900);
                margin-bottom: 4px;
            }
            .kpi-subtitle {
                font-size: 13px;
                color: var(--gray-500);
            }
            .kpi-badge {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 500;
                margin-left: 8px;
            }
            .kpi-badge.up { background: var(--success-light); color: var(--success); }
            .kpi-badge.down { background: var(--error-light); color: var(--error); }
            .section-title {
                font-size: 18px;
                font-weight: 600;
                color: var(--gray-800);
                margin: 30px 0 15px 0;
                padding-bottom: 10px;
                border-bottom: 2px solid var(--gray-200);
            }
            .quick-links {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 12px;
            }
            .quick-link {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 16px;
                background: var(--gray-100);
                border-radius: 8px;
                text-decoration: none;
                color: var(--gray-900);
                box-shadow: var(--shadow-sm);
                transition: all 0.2s;
            }
            .quick-link:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow);
            }
            /* Focus visible clavier (WCAG 2.4.7) sur les cibles cliquables du dashboard */
            .quick-link:focus-visible,
            .dash-link:focus-visible,
            .dash-link-sm:focus-visible,
            .dash-link-13:focus-visible,
            .action-item:focus-visible {
                outline: 2px solid var(--primary);
                outline-offset: 2px;
                border-radius: 4px;
            }
            .quick-link svg { width: 24px; height: 24px; color: var(--primary); }
            .auto-refresh-indicator {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
                color: var(--gray-500);
                padding: 4px 10px;
                border-radius: 12px;
                background: var(--gray-100);
            }
            .auto-refresh-indicator .dot-live {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--success);
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.4; }
            }
            .charts-row {
                display: grid;
                grid-template-columns: 2fr 1fr 1fr;
                gap: 20px;
                margin-bottom: 30px;
            }
            @media (max-width: 1200px) {
                .charts-row {
                    grid-template-columns: 1fr;
                }
            }
            .chart-card {
                /* --card-bg est défini en clair (#fff) ET en dark (#1e293b) ;
                   fallback #fff aligné sur les autres cartes (le fallback
                   --gray-50 devenait #0f172a en dark = trop sombre). */
                background: var(--card-bg, #fff);
                color: var(--gray-700);
                border-radius: 12px;
                padding: 20px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                position: relative;
            }
            .chart-card.large {
                grid-column: span 1;
            }
            .chart-card h3 {
                font-size: 16px;
                font-weight: 600;
                color: var(--gray-900);
                margin: 0 0 15px 0;
            }
            .chart-container {
                position: relative;
                height: 250px;
                width: 100%;
            }
            .chart-container.large {
                height: 300px;
            }
            .chart-legend {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                margin-top: 15px;
                justify-content: center;
            }
            .legend-item {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
                color: var(--gray-500);
            }
            .dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }
            .dot.green { background: var(--success); }
            .dot.orange { background: var(--warning); }
            .dot.red { background: var(--error); }
            .dot.blue { background: var(--info); }

            /* Enhanced executive dashboard styles */
            .exec-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                margin-bottom: 30px;
            }
            @media (max-width: 1200px) {
                .exec-grid { grid-template-columns: repeat(2, 1fr); }
            }
            @media (max-width: 768px) {
                .exec-grid { grid-template-columns: 1fr; }
            }
            .exec-card {
                background: var(--gray-100);
                border-radius: 14px;
                padding: 20px 24px;
                box-shadow: var(--shadow-sm);
                position: relative;
                overflow: hidden;
                transition: all 0.2s;
            }
            .exec-card:hover { box-shadow: var(--shadow); }
            .exec-stripe {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
            }
            .exec-stripe.green { background: var(--success); }
            .exec-stripe.orange { background: var(--warning); }
            .exec-stripe.red { background: var(--error); }
            .exec-stripe.blue { background: var(--info); }
            .exec-top {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 8px;
            }
            .exec-label {
                font-size: 13px;
                font-weight: 500;
                color: var(--gray-500);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .exec-value {
                font-size: 32px;
                font-weight: 800;
                color: var(--gray-900);
                line-height: 1.1;
            }
            .exec-sub {
                font-size: 12px;
                color: var(--gray-500);
                margin-top: 6px;
            }
            .exec-trend {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 13px;
                font-weight: 600;
                padding: 3px 10px;
                border-radius: 20px;
            }
            .exec-trend.up {
                background: var(--success-light);
                color: var(--success);
            }
            .exec-trend.down {
                background: var(--error-light);
                color: var(--error);
            }
            .sparkline-bar {
                display: flex;
                align-items: flex-end;
                gap: 2px;
                height: 30px;
                margin-top: 8px;
            }
            .sparkline-bar .bar {
                flex: 1;
                border-radius: 2px 2px 0 0;
                background: var(--primary);
                opacity: 0.3;
                transition: opacity 0.2s;
                min-height: 2px;
            }
            .sparkline-bar .bar.current {
                opacity: 0.9;
            }
            .alert-count-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 22px;
                height: 22px;
                border-radius: 11px;
                font-size: 12px;
                font-weight: 700;
                color: white;
                padding: 0 6px;
            }
            .alert-count-badge.red { background: var(--error); }
            .alert-count-badge.orange { background: var(--warning); }
            .alert-count-badge.green { background: var(--success); }
            .actions-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 20px;
                margin-bottom: 30px;
            }
            @media (max-width: 768px) {
                .actions-grid { grid-template-columns: 1fr; }
            }
            .action-card {
                background: var(--gray-100);
                border-radius: 12px;
                padding: 20px;
                box-shadow: var(--shadow-sm);
            }
            .action-card h4 {
                font-size: 15px;
                font-weight: 600;
                color: var(--gray-800);
                margin: 0 0 12px 0;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .action-card h4 svg { width: 18px; height: 18px; color: var(--primary); }
            .action-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 12px;
                border-radius: 8px;
                text-decoration: none;
                color: var(--gray-900);
                transition: background 0.15s;
                font-size: 13px;
            }
            a.action-item:hover { background: var(--gray-200); }
            .action-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .action-text {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .action-badge {
                font-size: 12px;
                font-weight: 500;
                color: var(--gray-500);
                white-space: nowrap;
            }
            .action-badge.danger {
                color: var(--error);
                font-weight: 600;
            }
            .action-badge.info {
                color: var(--primary);
                font-weight: 600;
            }
            .action-section-label {
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: var(--gray-400);
                padding: 8px 12px 4px;
            }
            .score-ring {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: 800;
                margin: 0 auto 8px;
                background: conic-gradient(
                    var(--primary) calc(var(--score-pct, 0) * 3.6deg),
                    var(--gray-200) calc(var(--score-pct, 0) * 3.6deg)
                );
                -webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
                mask: radial-gradient(circle, transparent 55%, black 56%);
            }
            .score-value {
                position: absolute;
                font-size: 24px;
                font-weight: 800;
            }

/* === Bloc 4 (extrait ligne 2998 de ui.py) === */
@keyframes pulse-red {
                0%, 100% { box-shadow: 0 4px 12px rgba(220,38,38,0.3); }
                50% { box-shadow: 0 4px 24px rgba(220,38,38,0.6); }
            }

/* === Bloc 5 (extrait ligne 5593 de ui.py) === */
.settings-container { max-width: 900px; }
            .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
            .form-group { display: flex; flex-direction: column; gap: 6px; }
            .label { font-size: 14px; font-weight: 500; color: var(--gray-700); }
            .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--gray-200); padding: 0 24px; }
            .tab { padding: 16px 20px; color: var(--gray-600); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s; }
            .tab:hover { color: var(--gray-900); }
            .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
            @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* === Bloc 6 (extrait ligne 6120 de ui.py) === */
.module-card:hover {
                border-color: var(--primary);
                background: var(--primary-50);
            }
            .module-card:has(input:checked) {
                border-color: var(--primary);
                background: var(--primary-50);
            }
            .module-checkbox {
                width: 18px;
                height: 18px;
                accent-color: var(--primary);
            }

/* === Bloc 7 (extrait ligne 6869 de ui.py) === */
@keyframes spin { to { transform: rotate(360deg); } }
        .btn-action:hover { background:var(--neutral-50) !important; }

/* === Bloc 8 (extrait ligne 6912 de ui.py) === */
.bpw-wrap {
            max-width: 1100px;
            margin: 24px auto;
            padding: 0 16px;
        }
        .bpw-card {
            background: var(--bg-card, #fff);
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
            padding: 24px;
            margin-bottom: 16px;
        }
        .bpw-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 8px;
        }
        .bpw-title {
            margin: 0;
            font-size: 22px;
            color: var(--text-primary, var(--neutral-950));
        }
        .bpw-save-state {
            font-size: 13px;
            color: var(--text-muted, var(--neutral-500));
        }
        .bpw-save-state.saving { color: var(--warning, var(--text-on-warning)); }
        .bpw-save-state.saved  { color: var(--success, var(--text-on-success)); }
        .bpw-save-state.error  { color: var(--danger, var(--text-on-error)); }

        /* Steps progress */
        .bpw-steps {
            display: flex;
            gap: 8px;
            margin: 16px 0 8px;
            flex-wrap: wrap;
        }
        .bpw-step-dot {
            flex: 1 1 90px;
            min-width: 90px;
            padding: 10px 12px;
            background: var(--gray-100, var(--neutral-100));
            border-radius: 8px;
            font-size: 12px;
            color: var(--text-muted, var(--neutral-500));
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all .15s ease;
        }
        .bpw-step-dot:hover { background: var(--gray-200, var(--neutral-200)); }
        .bpw-step-dot.done {
            background: var(--success-bg, var(--bg-success));
            color: var(--success, var(--text-on-success));
        }
        .bpw-step-dot.current {
            background: var(--primary-bg, var(--bg-info));
            color: var(--primary, var(--brand-blue-500));
            border-color: var(--primary, var(--brand-blue-500));
            font-weight: 600;
        }
        .bpw-step-dot .bpw-step-num { font-weight: 700; font-size: 14px; }

        /* Two-column layout */
        .bpw-grid {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 16px;
        }
        @media (max-width: 900px) {
            .bpw-grid { grid-template-columns: 1fr; }
        }

        /* Form */
        .bpw-field { margin-bottom: 14px; }
        .bpw-field label {
            display: block;
            margin-bottom: 4px;
            font-weight: 500;
            color: var(--text-primary, var(--neutral-950));
            font-size: 14px;
        }
        .bpw-field .bpw-help {
            font-size: 12px;
            color: var(--text-muted, var(--neutral-500));
            margin-top: 2px;
        }
        .bpw-input,
        .bpw-textarea,
        .bpw-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border, var(--neutral-300));
            border-radius: 8px;
            font-size: 14px;
            background: var(--bg-input, #fff);
            color: var(--text-primary, var(--neutral-950));
            box-sizing: border-box;
        }
        .bpw-textarea { min-height: 90px; resize: vertical; }
        .bpw-input:focus,
        .bpw-textarea:focus,
        .bpw-select:focus {
            outline: none;
            border-color: var(--primary, var(--brand-blue-500));
            box-shadow: 0 0 0 3px var(--primary-bg, rgba(37,99,235,.12));
        }
        .bpw-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
        }

        /* Autocomplete */
        .bpw-autocomp { position: relative; }
        .bpw-autocomp-list {
            position: absolute;
            top: 100%; left: 0; right: 0;
            background: var(--bg-card, #fff);
            border: 1px solid var(--border, var(--neutral-300));
            border-radius: 8px;
            max-height: 260px;
            overflow-y: auto;
            z-index: 20;
            display: none;
            box-shadow: var(--shadow-md);
        }
        .bpw-autocomp-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
        }
        .bpw-autocomp-item:hover,
        .bpw-autocomp-item.active {
            background: var(--gray-100, var(--neutral-100));
        }
        .bpw-autocomp-item .bpw-naf-code {
            color: var(--text-muted, var(--neutral-500));
            font-size: 12px;
            margin-left: 6px;
        }

        /* Suggestion panel */
        .bpw-side {
            background: var(--bg-card, #fff);
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
            padding: 16px;
            position: sticky;
            top: 80px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
        }
        .bpw-side h3 {
            margin: 0 0 8px;
            font-size: 14px;
            color: var(--text-muted, var(--neutral-500));
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .bpw-suggest-box {
            background: var(--primary-bg, var(--bg-info));
            border-left: 3px solid var(--primary, var(--brand-blue-500));
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 13.5px;
            color: var(--text-primary, var(--neutral-950));
        }
        .bpw-suggest-box .bpw-source {
            color: var(--text-muted, var(--neutral-500));
            font-size: 11.5px;
            margin-top: 6px;
            font-style: italic;
        }
        .bpw-sector-stats {
            background: var(--gray-100, var(--neutral-100));
            border-radius: 8px;
            padding: 12px;
            margin-top: 12px;
            font-size: 13px;
        }
        .bpw-stat-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            border-bottom: 1px solid var(--border-light, var(--neutral-200));
        }
        .bpw-stat-row:last-child { border-bottom: none; }
        .bpw-stat-row .bpw-stat-val { font-weight: 600; color: var(--primary, var(--brand-blue-500)); }

        /* Buttons */
        .bpw-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .bpw-btn {
            padding: 10px 18px;
            border-radius: 8px;
            border: 1px solid var(--border, var(--neutral-300));
            background: var(--bg-card, #fff);
            color: var(--text-primary, var(--neutral-950));
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all .15s ease;
        }
        .bpw-btn:hover { background: var(--gray-100, var(--neutral-100)); }
        .bpw-btn:disabled { opacity: .5; cursor: not-allowed; }
        .bpw-btn-primary {
            background: var(--primary, var(--brand-blue-500));
            color: var(--text-on-primary, #fff);
            border-color: var(--primary, var(--brand-blue-500));
        }
        .bpw-btn-primary:hover {
            background: var(--primary-hover, var(--brand-blue-500));
            border-color: var(--primary-hover, var(--brand-blue-500));
        }
        .bpw-btn-success {
            background: var(--success, var(--text-on-success));
            color: var(--text-on-primary, #fff);
            border-color: var(--success, var(--text-on-success));
        }
        .bpw-btn-ghost {
            background: transparent;
            border-color: transparent;
            color: var(--primary, var(--brand-blue-500));
            padding: 6px 10px;
            font-size: 13px;
        }
        .bpw-btn-ghost:hover {
            background: var(--primary-bg, var(--bg-info));
        }
        .bpw-btn-ai {
            background: var(--purple-bg, var(--bg-info));
            border-color: var(--purple, var(--info));
            color: var(--purple, var(--info));
            font-size: 13px;
            padding: 6px 12px;
        }
        .bpw-btn-ai:hover {
            background: var(--purple, var(--info));
            color: var(--text-on-primary, #fff);
        }

        /* Field group with AI button */
        .bpw-group {
            border: 1px solid var(--border-light, var(--neutral-200));
            border-radius: 8px;
            padding: 14px;
            margin-bottom: 14px;
        }
        .bpw-group-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            gap: 8px;
            flex-wrap: wrap;
        }
        .bpw-group-title {
            font-weight: 600;
            font-size: 15px;
            color: var(--text-primary, var(--neutral-950));
        }

        /* Warning / errors */
        .bpw-warnings {
            background: var(--warning-bg, var(--bg-warning));
            border-left: 3px solid var(--warning, var(--text-on-warning));
            padding: 12px;
            border-radius: 6px;
            margin: 12px 0;
            font-size: 13.5px;
            color: var(--text-primary, var(--neutral-950));
        }
        .bpw-warnings ul { margin: 6px 0 0 18px; padding: 0; }

        .bpw-spinner {
            display: inline-block;
            width: 14px; height: 14px;
            border: 2px solid var(--border, var(--neutral-300));
            border-top-color: var(--primary, var(--brand-blue-500));
            border-radius: 50%;
            animation: bpw-spin .8s linear infinite;
            vertical-align: middle;
            margin-right: 6px;
        }
        @keyframes bpw-spin { to { transform: rotate(360deg); } }

        .bpw-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted, var(--neutral-500));
        }
        .bpw-success-banner {
            background: var(--success-bg, var(--bg-success));
            border-left: 3px solid var(--success, var(--text-on-success));
            padding: 16px;
            border-radius: 8px;
            margin: 12px 0;
            color: var(--success, var(--text-on-success));
        }

/* === Bloc 9 (extrait ligne 8273 de ui.py) === */
.toggle-checkbox {
                width: 44px; height: 24px;
                appearance: none; background: var(--gray-300);
                border-radius: 12px; position: relative;
                cursor: pointer; transition: background 0.2s;
            }
            .toggle-checkbox:checked { background: var(--primary); }
            .toggle-checkbox::after {
                content: ''; position: absolute;
                top: 2px; left: 2px;
                width: 20px; height: 20px;
                background: white; border-radius: 50%;
                transition: transform 0.2s;
            }
            .toggle-checkbox:checked::after { transform: translateX(20px); }

            .provider-card {
                padding: 16px;
                border: 1px solid var(--gray-200);
                border-radius: 8px;
                background: white;
            }
            .status-badge {
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 12px;
            }
            .status-ok { background: var(--green-100); color: var(--green-700); }
            .status-error { background: var(--red-100); color: var(--red-700); }
            .status-unknown { background: var(--gray-100); color: var(--gray-600); }

            .input-group {
                display: flex;
                gap: 8px;
            }
            .input-group .input { flex: 1; }

            .slider {
                width: 100%;
                height: 6px;
                border-radius: 3px;
                background: var(--gray-200);
                appearance: none;
            }
            .slider::-webkit-slider-thumb {
                appearance: none;
                width: 18px; height: 18px;
                border-radius: 50%;
                background: var(--primary);
                cursor: pointer;
            }

            .progress-bar {
                height: 6px;
                background: var(--gray-200);
                border-radius: 3px;
                overflow: hidden;
            }
            .progress-fill {
                height: 100%;
                background: var(--primary);
                border-radius: 3px;
                transition: width 0.3s;
            }

            .btn-purple {
                background: var(--purple-600);
                color: white;
            }
            .btn-purple:hover { background: var(--purple-700); }

            .hidden { display: none; }
            .grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
            .grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); }

/* === Bloc 10 (extrait ligne 8632 de ui.py) === */
.search-form-large {
                display: flex;
                gap: 12px;
                max-width: 600px;
            }
            .search-input-large {
                flex: 1;
                font-size: 16px;
                padding: 12px 16px;
            }
            .search-summary {
                color: var(--gray-600);
                margin-bottom: 20px;
                font-size: 14px;
            }
            .search-results-group {
                background: var(--white);
                border-radius: var(--radius-lg);
                border: 1px solid var(--gray-200);
                margin-bottom: 16px;
                overflow: hidden;
            }
            .search-results-header {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 14px 16px;
                background: var(--gray-50);
                border-bottom: 1px solid var(--gray-200);
            }
            .search-results-icon {
                font-size: 18px;
            }
            .search-results-title {
                font-weight: 600;
                color: var(--gray-800);
                flex: 1;
            }
            .search-results-count {
                font-size: 12px;
                color: var(--gray-500);
                background: var(--gray-200);
                padding: 2px 8px;
                border-radius: 10px;
            }
            .search-result-name {
                font-weight: 500;
                color: var(--gray-800);
            }
            .search-result-secondary {
                font-size: 12px;
                color: var(--gray-500);
                margin-top: 2px;
            }
            .search-results .table td {
                padding: 12px 16px;
            }
            .search-results .table tr:hover {
                background: var(--primary-light);
            }

/* === Bloc 11 (extrait ligne 8776 de ui.py) === */
/* FAB - Floating Action Button */
        .fab-create {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: white;
            color: var(--brand-blue-700);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
            z-index: 100;
        }
        .fab-create:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }
        .fab-create:active {
            transform: scale(0.95);
        }
        @media (min-width: 768px) {
            .fab-create {
                display: none; /* Caché sur desktop, le bouton header suffit */
            }
        }
        .calendar-container {
            background: linear-gradient(135deg, var(--brand-blue-700) 0%, var(--brand-blue-500) 100%);
            border-radius: 6px;
            padding: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            color: white;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            flex-wrap: wrap;
            gap: 4px;
            color: white;
        }
        .calendar-header h2 {
            color: white;
        }
        .calendar-nav {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .calendar-nav .btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .calendar-nav .btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .calendar-views {
            display: flex;
            gap: 8px;
        }
        .calendar-views .btn {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .calendar-views .btn:hover {
            background: rgba(255, 255, 255, 0.25);
        }
        .calendar-views .btn.active {
            background: white;
            color: var(--brand-blue-700);
        }
        .calendar-actions .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .calendar-actions .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .calendar-actions .btn-primary {
            background: white;
            color: var(--brand-blue-700);
        }
        .calendar-actions .btn-primary:hover {
            background: rgba(255, 255, 255, 0.9);
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            padding: 2px;
        }
        .calendar-weekdays {
            display: contents;
        }
        .calendar-weekdays > div {
            text-align: center;
            font-weight: 600;
            font-size: 0.75rem;
            color: white;
            padding: 3px 1px;
            text-transform: uppercase;
            letter-spacing: 0.25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.05);
        }
        .calendar-days {
            display: contents;
        }
        .calendar-day {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 4px 2px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 44px;
            color: white;
            background: rgba(255, 255, 255, 0.05);
        }
        .calendar-day:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        .calendar-day.today {
            background: rgba(255, 255, 255, 0.3);
            color: white;
            font-weight: bold;
        }
        .calendar-day.other-month {
            color: rgba(255, 255, 255, 0.4);
        }
        .calendar-day.selected {
            border: 1px solid white;
            background: rgba(255, 255, 255, 0.2);
        }
        .calendar-day.has-conge {
            background: rgba(168, 85, 247, 0.4) !important; /* violet pour congés */
            border-left: 3px solid var(--info);
        }
        .calendar-day.has-conge .day-number {
            color: var(--bg-info);
        }
        .calendar-day .day-number {
            font-weight: 600;
            font-size: 20px;
        }
        .calendar-day .day-events {
            font-size: 11px;
            margin-top: 3px;
        }
        .event-dot {
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            background: var(--accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: white;
            padding: 0 4px;
        }
        /* Couleurs de charge de travail */
        .calendar-day.workload-light {
            background: rgba(34, 197, 94, 0.3) !important; /* vert */
        }
        .calendar-day.workload-moderate {
            background: rgba(234, 179, 8, 0.4) !important; /* jaune */
        }
        .calendar-day.workload-busy {
            background: rgba(249, 115, 22, 0.5) !important; /* orange */
        }
        .calendar-day.workload-heavy {
            background: rgba(239, 68, 68, 0.5) !important; /* rouge */
        }
        .calendar-day.workload-overload {
            background: rgba(185, 28, 28, 0.7) !important; /* rouge foncé */
        }
        .calendar-day .workload-hours {
            font-size: 8px;
            color: rgba(255,255,255,0.9);
            margin-top: 1px;
            font-weight: 500;
        }
        .calendar-day .workload-travel {
            font-size: 7px;
            color: rgba(255,255,255,0.7);
            margin-top: 1px;
        }
        .calendar-events {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
        }
        .calendar-events h3 {
            color: white;
        }
        .events-list .event-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            margin-bottom: 8px;
            color: white;
        }
        .event-time {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
            min-width: 60px;
        }
        .event-title {
            flex: 1;
            color: white;
        }
        .calendar-container .text-muted {
            color: rgba(255, 255, 255, 0.7) !important;
        }

/* === Bloc 12 (extrait ligne 9508 de ui.py) === */
.optimizer-slots { display: flex; flex-direction: column; gap: 10px; }
        .optimizer-slot {
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .optimizer-slot:hover {
            border-color: var(--primary-color);
            background: var(--primary-50, var(--bg-info));
        }
        .slot-header { display: flex; justify-content: space-between; align-items: center; }
        .slot-date { font-weight: 600; text-transform: capitalize; }
        .slot-score {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .score-high { background: var(--green-100); color: var(--green-700); }
        .score-medium { background: var(--orange-100); color: var(--orange-700); }
        .score-low { background: var(--red-100); color: var(--red-700); }
        .slot-time { font-size: 18px; font-weight: 500; margin: 4px 0; }
        .slot-travel { font-size: 12px; color: var(--gray-500); }
        .slot-reason { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

/* === Bloc 13 (extrait ligne 9578 de ui.py) === */
.planning-container {
            background: var(--card-bg, #fff);
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .planning-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }
        .planning-nav { display: flex; gap: 8px; }
        .planning-nav .active { font-weight: 700; }
        .planning-legend {
            display: flex;
            gap: 12px;
            align-items: center;
            font-size: 12px;
            color: var(--text-secondary, var(--neutral-500));
        }
        .legend-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        /* FullCalendar overrides */
        #fullcalendar-week {
            min-height: 600px;
        }
        .fc { font-family: inherit; }
        .fc .fc-toolbar-title { font-size: 1.2em; }
        .fc .fc-event {
            cursor: grab;
            border-radius: 4px;
            padding: 2px 4px;
            font-size: 12px;
        }
        .fc .fc-event:active { cursor: grabbing; }
        .fc .fc-timegrid-slot { height: 30px; }
        .fc .fc-col-header-cell { background: var(--bg-secondary, var(--neutral-50)); }
        /* Priorité haute / critique */
        .fc-event[data-priority="CRITIQUE"] { border-left: 3px solid var(--text-on-error) !important; }
        .fc-event[data-priority="HAUTE"] { border-left: 3px solid var(--warning) !important; }

/* === Bloc 14 (extrait ligne 9829 de ui.py) === */
.dispatch-container {
            background: var(--card-bg, #fff);
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .unassigned-panel {
            background: var(--bg-secondary, var(--neutral-50));
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 16px;
            border: 2px dashed var(--border-color, var(--neutral-200));
        }
        .unassigned-panel h3 { margin: 0 0 8px 0; font-size: 14px; }
        .unassigned-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            min-height: 40px;
        }
        .dispatch-card {
            background: var(--accent);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: grab;
            font-size: 12px;
            max-width: 250px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: transform 0.1s;
        }
        .dispatch-card:active { cursor: grabbing; transform: scale(1.03); }
        .dispatch-card .card-title { font-weight: 600; margin-bottom: 2px; }
        .dispatch-card .card-info { font-size: 11px; opacity: 0.9; }
        .dispatch-card[data-priority="CRITIQUE"] { border-left: 4px solid var(--text-on-error); background: var(--accent); }
        .dispatch-card[data-priority="HAUTE"] { border-left: 4px solid var(--warning); }

        .previsionnel-panel {
            background: var(--bg-secondary, var(--neutral-50));
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color, var(--neutral-200));
        }
        .previsionnel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .previsionnel-header h3 { margin: 0; font-size: 14px; }
        .previsionnel-totals {
            display: flex;
            gap: 12px;
            font-size: 12px;
        }
        .previsionnel-totals .kpi {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-weight: 600;
        }
        .kpi-total { background: var(--primary-color, var(--brand-blue-500)); color: white; }
        .kpi-non-aff { background: var(--accent); color: white; }
        .kpi-ok { background: var(--success); color: white; }

        .previsionnel-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
        }
        @media (max-width: 768px) {
            .previsionnel-grid { grid-template-columns: repeat(4, 1fr); }
        }
        .prev-day {
            background: var(--card-bg, #fff);
            border-radius: 6px;
            padding: 8px;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.15s;
            min-height: 80px;
        }
        .prev-day:hover { border-color: var(--primary-color, var(--brand-blue-500)); }
        .prev-day.active { border-color: var(--primary-color, var(--brand-blue-500)); background: rgba(59, 130, 246, 0.05); }
        .prev-day.weekend { opacity: 0.6; }
        .prev-day-label { font-size: 11px; font-weight: 600; color: var(--text-secondary, var(--neutral-500)); margin-bottom: 4px; text-transform: capitalize; }
        .prev-day-count {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary, var(--neutral-950));
            line-height: 1.1;
        }
        .prev-day-count.zero { color: var(--text-secondary, var(--neutral-400)); }
        .prev-day-bar {
            display: flex;
            gap: 2px;
            margin-top: 6px;
            height: 4px;
            border-radius: 2px;
            overflow: hidden;
        }
        .prev-bar-assigned { background: var(--success); flex-grow: 1; }
        .prev-bar-unassigned { background: var(--accent); flex-grow: 1; }
        .prev-day-detail {
            font-size: 10px;
            color: var(--text-secondary, var(--neutral-500));
            margin-top: 4px;
        }
        .prev-day-techs {
            display: none;
            margin-top: 6px;
            font-size: 10px;
            text-align: left;
        }
        .prev-day:hover .prev-day-techs { display: block; }
        .prev-tech-line {
            display: flex;
            justify-content: space-between;
            padding: 1px 0;
        }
        .prev-tech-line .tech-bar {
            height: 3px;
            background: var(--primary-color, var(--brand-blue-500));
            border-radius: 2px;
            min-width: 2px;
        }
        .prev-overload { color: var(--text-on-error); font-weight: 600; }

        .dispatch-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }
        .tech-column {
            background: var(--bg-secondary, var(--neutral-50));
            border-radius: 8px;
            padding: 12px;
            min-height: 300px;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }
        .tech-column.drag-over {
            border-color: var(--brand-blue-500);
            background: rgba(59, 130, 246, 0.05);
        }
        .tech-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--border-color, var(--neutral-200));
        }
        .tech-name { font-weight: 600; font-size: 14px; }
        .tech-count {
            background: var(--primary-color, var(--brand-blue-500));
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
        }
        .tech-events { display: flex; flex-direction: column; gap: 6px; }
        .conflict-alert {
            background: var(--bg-error);
            border: 1px solid var(--bg-error);
            color: var(--text-on-error);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            margin-top: 4px;
            display: none;
        }

/* === Bloc 15 (extrait ligne 10308 de ui.py) === */
.gantt-container {
            background: var(--card-bg, #fff);
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .planning-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 8px;
        }
        .planning-nav { display: flex; gap: 8px; }
        .planning-nav .active { font-weight: 700; }
        .planning-legend {
            display: flex;
            gap: 12px;
            align-items: center;
            font-size: 12px;
            color: var(--text-secondary, var(--neutral-500));
            margin-bottom: 12px;
        }
        .legend-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        .gantt-controls {
            display: flex;
            gap: 4px;
        }
        .gantt-controls .btn-sm {
            padding: 4px 10px;
            font-size: 12px;
        }
        .gantt-controls .active {
            background: var(--primary, var(--brand-blue-500));
            color: #fff;
        }
        :root {
            --gantt-agenda: var(--brand-blue-500);
            --gantt-intervention: var(--accent);
            --gantt-reunion: var(--info);
            --gantt-conge: var(--info);
            --gantt-chantier: var(--brand-blue-500);
        }
        #gantt-chart {
            overflow-x: auto;
            min-height: 200px;
        }
        #gantt-chart .gantt .bar-wrapper .bar { rx: 4; ry: 4; }
        #gantt-chart .gantt .bar-wrapper .bar-label { font-size: 11px; }
        #gantt-chart .gantt .grid-header { fill: var(--bg-secondary, var(--neutral-50)); }
        #gantt-chart .gantt .grid-row { fill: var(--card-bg, #fff); }
        #gantt-chart .gantt .grid-row:nth-child(even) { fill: var(--bg-secondary, var(--neutral-50)); }
        #gantt-chart .gantt .lower-text, #gantt-chart .gantt .upper-text {
            fill: var(--text-primary, var(--neutral-800));
            font-size: 11px;
        }
        .bar-agenda .bar-progress, .bar-agenda .bar { fill: var(--gantt-agenda, var(--brand-blue-500)) !important; }
        .bar-interventions .bar-progress, .bar-interventions .bar { fill: var(--gantt-intervention, var(--accent)) !important; }
        .bar-reunions .bar-progress, .bar-reunions .bar { fill: var(--gantt-reunion, var(--info)) !important; }
        .bar-conges .bar-progress, .bar-conges .bar { fill: var(--gantt-conge, var(--info)) !important; }
        .bar-chantiers .bar-progress, .bar-chantiers .bar { fill: var(--gantt-chantier, var(--brand-blue-500)) !important; }
        .bar-trajet .bar-progress, .bar-trajet .bar { fill: var(--gantt-trajet, var(--neutral-400)) !important; opacity: 0.7; }
        @media (max-width: 768px) {
            .planning-header { flex-direction: column; align-items: flex-start; }
            .gantt-controls { width: 100%; justify-content: flex-end; }
        }

/* === Bloc 16 (extrait ligne 10562 de ui.py) === */
.replay-container { background: var(--card-bg, #fff); border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .replay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
        .replay-controls { display: flex; gap: 8px; align-items: center; }
        .replay-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
        .info-card { background: var(--bg-secondary, var(--neutral-50)); padding: 10px; border-radius: 8px; text-align: center; }
        .info-card .info-label { font-size: 11px; color: var(--text-secondary, var(--neutral-500)); display: block; }
        .info-card .info-value { font-size: 16px; font-weight: 700; color: var(--text-primary, var(--neutral-950)); }
        .replay-progress { margin-top: 12px; }

/* === Bloc 17 (extrait ligne 10741 de ui.py) === */
.analytics-container { background: var(--card-bg, #fff); border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .analytics-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
        .kpi-card { background: var(--bg-secondary, var(--neutral-50)); padding: 16px; border-radius: 8px; text-align: center; }
        .kpi-value { font-size: 28px; font-weight: 800; color: var(--primary-color, var(--brand-blue-500)); }
        .kpi-label { font-size: 12px; color: var(--text-secondary, var(--neutral-500)); margin-top: 4px; }
        .analytics-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        @media (max-width: 768px) { .analytics-sections { grid-template-columns: 1fr; } }
        .analytics-card { background: var(--bg-secondary, var(--neutral-50)); border-radius: 8px; padding: 16px; }
        .analytics-card h3 { margin: 0 0 12px 0; font-size: 14px; }
        .alert-bar { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color, var(--neutral-200)); font-size: 13px; }
        .alert-bar .bar { height: 8px; border-radius: 4px; background: var(--primary-color, var(--brand-blue-500)); }
        .km-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
        .km-bar .bar { height: 6px; border-radius: 3px; background: var(--accent); }

/* === Bloc 18 (extrait ligne 10998 de ui.py) === */
@keyframes spin{to{transform:rotate(360deg)}}

/* === Bloc 19 (extrait ligne 11428 de ui.py) === */
* { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                background: var(--neutral-100);
                min-height: 100vh;
                padding: 16px;
            }
            .card {
                background: white;
                border-radius: 16px;
                padding: 20px;
                margin-bottom: 16px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            }
            .title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
            .address { font-size: 15px; color: var(--neutral-800); line-height: 1.5; }
            .nav-buttons { display: flex; flex-direction: column; gap: 12px; }
            .nav-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 16px;
                border-radius: 12px;
                text-decoration: none;
                font-size: 16px;
                font-weight: 600;
                color: white;
            }
            .nav-btn.google { background: var(--brand-blue-500); }
            .nav-btn.apple { background: var(--neutral-800); }
            .nav-btn.waze { background: var(--info); }
            .back-btn {
                display: block;
                text-align: center;
                padding: 14px;
                color: var(--neutral-500);
                text-decoration: none;
                margin-top: 16px;
            }

/* === Bloc 20 (extrait ligne 11844 de ui.py) === */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
            .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
            .btn { padding: 10px 20px; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
            .btn-primary { background: var(--primary); color: white; }
            .btn-secondary { background: var(--neutral-100); color: var(--neutral-800); }
            table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
            th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--neutral-200); }
            th { background: var(--neutral-50); font-weight: 600; color: var(--neutral-800); }
            tr:hover { background: var(--neutral-50); }
            .badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
            .badge-success { background: var(--bg-success); color: var(--text-on-success); }
            .badge-pending { background: var(--bg-warning); color: var(--text-on-warning); }

/* === Bloc 21 (extrait ligne 12967 de ui.py) === */
@keyframes pulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }

/* === Bloc 22 (extrait ligne 12991 de ui.py) === */
.container {max-width:1200px;margin:30px auto;padding:20px;}
      .paire {background:white;border-radius:12px;padding:18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,0.06);display:grid;grid-template-columns:1fr 30px 1fr 130px 200px;gap:14px;align-items:center;}
      .client {padding:10px;border-radius:8px;background:var(--neutral-50);}
      .client strong {font-size:1.05em;}
      .client .info {font-size:0.85em;color:var(--neutral-500);margin-top:4px;}
      .sim {text-align:center;font-weight:700;color:var(--brand-blue-500);}
      .actions {display:flex;flex-direction:column;gap:6px;}
      button {border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:0.88em;}
      button.fusion-a {background:var(--text-on-success);color:white;}
      button.fusion-b {background:var(--brand-blue-500);color:white;}
      button.ignorer {background:var(--neutral-200);color:var(--neutral-800);}
      .seuil {margin-bottom:16px;}
      a.back {color:var(--neutral-500);text-decoration:none;font-size:0.9em;}

/* === Bloc 23 (extrait ligne 13086 de ui.py) === */
.container {max-width:1100px;margin:30px auto;padding:20px;}
      .groupe {background:white;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
      .groupe h3 {margin:0 0 10px;color:var(--neutral-800);font-size:1.05em;}
      .fournisseur {display:grid;grid-template-columns:30px 1fr 1fr 100px 90px;gap:12px;align-items:center;padding:10px;border-top:1px solid var(--neutral-200);}
      .fournisseur:first-of-type {background:var(--bg-warning);border-radius:6px;border-top:none;}
      .badge {background:var(--bg-warning);color:var(--text-on-warning);font-size:0.75em;padding:2px 8px;border-radius:9999px;font-weight:600;}
      button.fusion {background:var(--text-on-success);color:white;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;margin-top:10px;}
      button.fusion:hover {background:var(--text-on-success);}
      .empty {text-align:center;padding:40px;color:var(--neutral-500);}
      a.back {color:var(--neutral-500);text-decoration:none;font-size:0.9em;}

/* === Bloc 24 (extrait ligne 15318 de ui.py) === */
.btn-audit-history {
                    background: var(--gray-100, var(--neutral-100)); border: 1px solid var(--gray-300, var(--neutral-300)); border-radius: 8px;
                    padding: 6px 10px; cursor: pointer; color: var(--gray-600, var(--neutral-700));
                    transition: all 0.2s; display: flex; align-items: center; margin-right: 8px;
                }
                .btn-audit-history:hover { background: var(--gray-200, var(--neutral-200)); color: var(--gray-800, var(--neutral-800)); border-color: var(--gray-400, var(--neutral-400)); }
                .audit-panel {
                    position: fixed; top: 0; right: 0; width: 420px; height: 100vh; z-index: 9999;
                    background: white; box-shadow: -8px 0 30px rgba(0,0,0,0.15);
                    display: flex; flex-direction: column; overflow: hidden;
                    animation: slideIn 0.25s ease-out;
                }
                @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
                .audit-panel-header {
                    display: flex; justify-content: space-between; align-items: center;
                    padding: 20px 24px; border-bottom: 1px solid var(--gray-200, var(--neutral-200));
                    background: var(--gray-50, var(--neutral-50));
                }
                .audit-panel-header h3 { font-size: 16px; font-weight: 700; margin: 0; }
                .audit-panel-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gray-400); padding: 4px 8px; }
                .audit-panel-close:hover { color: var(--gray-700); }
                .audit-timeline { flex: 1; overflow-y: auto; padding: 20px 24px; }
                .audit-loading { text-align: center; padding: 40px; color: var(--gray-400); }

                .audit-entry {
                    position: relative; padding-left: 32px; padding-bottom: 24px;
                    border-left: 2px solid var(--gray-200, var(--neutral-200)); margin-left: 8px;
                }
                .audit-entry:last-child { border-left-color: transparent; padding-bottom: 0; }
                .audit-dot {
                    position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
                    border-radius: 50%; border: 2px solid white;
                }
                .audit-dot-insert { background: var(--success, var(--success)); }
                .audit-dot-update { background: var(--primary, var(--brand-blue-500)); }
                .audit-dot-delete { background: var(--danger, var(--error)); }
                .audit-dot-view { background: var(--warning, var(--warning)); }
                .audit-dot-workflow { background: var(--purple, var(--info)); }
                .audit-dot-send { background: var(--info, var(--info)); }

                .audit-date { font-size: 11px; color: var(--gray-400); margin-bottom: 4px; }
                .audit-action { font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: 2px; }
                .audit-user { font-size: 12px; color: var(--gray-500); }
                .audit-changes { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
                .audit-changes span { background: var(--gray-100); padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
                .audit-empty { text-align: center; padding: 40px; color: var(--gray-400); font-size: 14px; }

                .audit-email-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
                .audit-email-section h4 { font-size: 13px; font-weight: 700; color: var(--gray-600); margin-bottom: 12px; }
                .audit-email-item {
                    padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 12px;
                    border: 1px solid var(--gray-200);
                }
                .audit-email-lu { background: var(--bg-success); border-color: var(--bg-success); }
                .audit-email-nonlu { background: var(--bg-warning); border-color: var(--bg-warning); }

                @media (max-width: 768px) {
                    .audit-panel { width: 100%; }
                }

/* === Bloc 25 (extrait ligne 15827 de ui.py) === */
body{font-family:Arial,sans-serif;font-size:12pt;line-height:1.6;margin:40px;color:var(--neutral-800)}.objet{font-weight:bold;text-decoration:underline;margin:30px 0 20px}.signature{margin-top:40px}@media print{body{margin:20mm}button{display:none}}

/* === Bloc 26 (extrait ligne 15930 de ui.py) === */
.notification {
            position: fixed; top: 20px; right: 20px; padding: 16px 24px;
            border-radius: 8px; font-weight: 500; z-index: 1000;
            transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .notification.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; }
        .notification.success { background: var(--success); color: white; }
        .notification.error { background: var(--error); color: white; }
        .spinner {
            display: inline-block; width: 16px; height: 16px;
            border: 2px solid #ffffff; border-radius: 50%;
            border-top-color: transparent; animation: spin 0.8s linear infinite;
            margin-right: 8px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

/* === Bloc 27 (extrait ligne 16210 de ui.py) === */
.notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 16px 24px;
            border-radius: 8px;
            font-weight: 500;
            z-index: 1000;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .notification.hidden {
            opacity: 0;
            transform: translateY(-20px);
            pointer-events: none;
        }
        .notification.success {
            background: var(--success);
            color: white;
        }
        .notification.error {
            background: var(--error);
            color: white;
        }
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 0.8s linear infinite;
            margin-right: 8px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal-content {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--gray-200);
        }
        .modal-header h3 { margin: 0; font-size: 18px; }
        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--gray-500);
        }
        .modal-body { padding: 20px; }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 20px;
            border-top: 1px solid var(--gray-200);
        }

/* === Bloc 28 (extrait ligne 17417 de ui.py) === */
.audit-panel {
            position: fixed; top: 0; right: 0; width: 420px; height: 100vh; z-index: 9999;
            background: white; box-shadow: -8px 0 30px rgba(0,0,0,0.15);
            display: flex; flex-direction: column; overflow: hidden;
            animation: slideInAudit 0.25s ease-out;
        }
        @keyframes slideInAudit { from { transform: translateX(100%); } to { transform: translateX(0); } }
        .audit-panel-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px 24px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-50);
        }
        .audit-panel-header h3 { font-size: 16px; font-weight: 700; margin: 0; }
        .audit-timeline { flex: 1; overflow-y: auto; padding: 20px 24px; }
        .btn-audit-history {
            background: var(--neutral-100); border: 1px solid var(--neutral-300); border-radius: 8px;
            padding: 6px 10px; cursor: pointer; color: var(--neutral-700);
            transition: all 0.2s; display: flex; align-items: center; margin-right: 8px;
        }
        .btn-audit-history:hover { background: var(--neutral-200); color: var(--neutral-800); }
        @media (max-width: 768px) { .audit-panel { width: 100%; } }

/* === Bloc 29 (extrait ligne 21217 de ui.py) === */
* { margin: 0; padding: 0; box-sizing: border-box; }
                    body { font-family: 'Segoe UI', Arial, sans-serif; padding: 30px; color: var(--neutral-800); font-size: 11px; }

                    .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
                    .company-info { max-width: 50%; }
                    .company-name { font-size: 18px; font-weight: bold; color: var(--brand-blue-700); margin-bottom: 5px; }
                    .company-details { color: var(--neutral-500); font-size: 10px; line-height: 1.4; }
                    .doc-title { font-size: 24px; font-weight: bold; color: var(--brand-blue-700); text-align: right; }

                    .info-section { display: flex; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
                    .client-box { flex: 1; border: 1px solid var(--neutral-300); padding: 15px; background: white; }
                    .client-box h4 { color: var(--brand-blue-700); margin-bottom: 8px; font-size: 11px; }
                    .client-name { font-weight: bold; margin-bottom: 5px; }

                    .doc-info-box { width: 220px; background: var(--bg-info); border: 1px solid var(--neutral-300); }
                    .doc-info-box table { width: 100%; border-collapse: collapse; }
                    .doc-info-box td { padding: 8px 10px; border-bottom: 1px solid var(--neutral-200); font-size: 10px; }
                    .doc-info-box tr:last-child td { border-bottom: none; }

                    .lines-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
                    .lines-table th { background: var(--brand-blue-700); color: white; padding: 10px 8px; text-align: left; font-size: 10px; }
                    .lines-table th:nth-child(2), .lines-table th:nth-child(4) { text-align: center; }
                    .lines-table th:nth-child(3), .lines-table th:nth-child(5) { text-align: right; }
                    .lines-table td { padding: 10px 8px; border-bottom: 1px solid var(--neutral-200); vertical-align: middle; }
                    .lines-table tbody tr:nth-child(even) { background: var(--neutral-50); }

                    .totals-section { display: flex; justify-content: flex-end; margin-bottom: 20px; }
                    .totals-box { width: 250px; border: 1px solid var(--neutral-300); }
                    .totals-box table { width: 100%; border-collapse: collapse; }
                    .totals-box td { padding: 8px 12px; border-bottom: 1px solid var(--neutral-200); }
                    .totals-box tr:last-child { background: var(--bg-info); }
                    .totals-box tr:last-child td { border-bottom: none; font-weight: bold; font-size: 12px; }

                    .notes-section { margin-top: 20px; padding: 15px; background: var(--neutral-50); border-radius: 4px; }
                    .notes-section h4 { color: var(--brand-blue-700); margin-bottom: 8px; }
                    .notes-section p { white-space: pre-wrap; line-height: 1.5; }

                    .footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--neutral-300); text-align: center; color: var(--neutral-500); font-size: 9px; }
                    .footer .page-number { display: none; }

                    @page {
                        size: A4;
                        margin: 15mm;
                        @bottom-center {
                            content: "Page " counter(page) " / " counter(pages);
                            font-size: 9px;
                            color: var(--neutral-500);
                        }
                    }

                    @media print {
                        body { padding: 15px; }
                        .no-print { display: none; }
                        .footer .page-number { display: block; margin-top: 10px; }
                    }

/* === Bloc 30 (extrait ligne 22991 de ui.py) === */
/* Modal Styles */
    .azal-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        backdrop-filter: blur(4px);
    }

    /* Styles boutons type paiement */
    .type-paiement-btn:hover {
        border-color: var(--azal-primary, var(--brand-blue-500)) !important;
        background: var(--azal-primary-light, var(--bg-info)) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 84, 209, 0.15);
    }
    .azal-modal-content {
        background: white;
        border-radius: 16px;
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        animation: modalSlideIn 0.2s ease-out;
    }
    @keyframes modalSlideIn {
        from { transform: translateY(-20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .azal-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--azal-border, var(--neutral-200));
    }
    .azal-modal-header h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 600;
        color: var(--azal-primary, var(--brand-blue-500));
        margin: 0;
    }
    .azal-modal-close {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: var(--azal-text-muted, var(--neutral-500));
        border-radius: 8px;
        transition: all 0.15s;
    }
    .azal-modal-close:hover {
        background: var(--azal-bg, var(--neutral-50));
        color: var(--azal-text, var(--neutral-800));
    }
    .azal-modal-body {
        padding: 24px;
    }
    .azal-modal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .azal-modal-body .azal-field {
        margin-bottom: 16px;
    }
    .azal-modal-body .azal-field:last-child {
        margin-bottom: 0;
    }
    .azal-modal-body label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--azal-text, var(--neutral-800));
        margin-bottom: 6px;
    }
    .azal-modal-body .required {
        color: var(--error);
    }
    .azal-modal-body .input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--azal-border, var(--neutral-300));
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.15s;
    }
    .azal-modal-body .input:focus {
        outline: none;
        border-color: var(--azal-primary, var(--brand-blue-500));
        box-shadow: 0 0 0 3px rgba(52, 84, 209, 0.1);
    }
    .azal-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 24px;
        border-top: 1px solid var(--azal-border, var(--neutral-200));
        background: var(--azal-bg, var(--neutral-50));
        border-radius: 0 0 16px 16px;
    }
    .azal-modal-footer .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
    }
    .azal-modal-footer .btn-secondary {
        background: white;
        border: 1px solid var(--azal-border, var(--neutral-300));
        color: var(--azal-text, var(--neutral-800));
    }
    .azal-modal-footer .btn-secondary:hover {
        background: var(--azal-bg, var(--neutral-100));
    }
    .azal-modal-footer .btn-primary {
        background: var(--azal-primary, var(--brand-blue-500));
        border: none;
        color: white;
    }
    .azal-modal-footer .btn-primary:hover {
        background: var(--azal-primary-dark, var(--brand-blue-700));
    }
    /* Bouton Nouveau produit (vert) */
    .azal-add-btn-success {
        background: linear-gradient(135deg, var(--success) 0%, var(--text-on-success) 100%) !important;
        color: white !important;
        border-color: var(--success) !important;
    }
    .azal-add-btn-success:hover {
        background: linear-gradient(135deg, var(--text-on-success) 0%, var(--text-on-success) 100%) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    /* Boutons monter/descendre lignes */
    .btn-move {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 4px;
        color: var(--azal-text-muted, var(--neutral-500));
        transition: color 0.15s, background 0.15s;
    }
    .btn-move:hover {
        color: var(--azal-primary, var(--brand-blue-500));
        background: var(--azal-bg-hover, var(--neutral-100));
    }

    /* Autocomplete produits */
    .produit-autocomplete {
        position: relative;
        width: 100%;
    }
    .produit-autocomplete .produit-search {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--gray-300, var(--neutral-300));
        border-radius: 6px;
        font-size: 13px;
    }
    .produit-autocomplete .produit-search:focus {
        outline: none;
        border-color: var(--primary, var(--brand-blue-500));
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    .produits-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 280px;
        overflow-y: auto;
        background: white;
        border: 1px solid var(--gray-200, var(--neutral-200));
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        z-index: 1000;
        margin-top: 4px;
    }
    .produit-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid var(--gray-100, var(--neutral-100));
        transition: background 0.15s;
    }
    .produit-item:last-child {
        border-bottom: none;
    }
    .produit-item:hover {
        background: var(--primary-light, var(--bg-info));
    }
    .produit-item.no-result {
        color: var(--gray-500, var(--neutral-500));
        font-style: italic;
        cursor: default;
    }
    .produit-item.no-result:hover {
        background: transparent;
    }
    .produit-code {
        font-weight: 600;
        color: var(--primary, var(--brand-blue-500));
        font-size: 12px;
        min-width: 80px;
    }
    .produit-nom {
        flex: 1;
        color: var(--gray-700, var(--neutral-800));
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .produit-prix {
        font-weight: 600;
        color: var(--success, var(--success));
        font-size: 12px;
        white-space: nowrap;
    }

/* === Bloc 31 (extrait ligne 23888 de ui.py) === */
.wizard-overlay {
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, var(--info) 0%, var(--info) 100%);
        z-index: 2000;
        display: none;
        flex-direction: column;
    }
    .wizard-overlay.open { display: flex; }

    .wizard-progress {
        height: 4px;
        background: rgba(255,255,255,0.2);
    }
    .wizard-progress-bar {
        height: 100%;
        background: white;
        transition: width 0.3s ease;
        width: 12.5%;
    }

    .wizard-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        z-index: 10;
    }
    .wizard-close:hover { background: rgba(255,255,255,0.3); }

    .wizard-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px;
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
        overflow-y: auto;
    }

    .wizard-question {
        font-size: 24px;
        font-weight: 700;
        color: white;
        margin-bottom: 24px;
        line-height: 1.3;
    }

    .wizard-subtitle {
        font-size: 14px;
        color: rgba(255,255,255,0.7);
        margin-top: -16px;
        margin-bottom: 24px;
    }

    .wizard-input {
        background: white;
        border: none;
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 18px;
        width: 100%;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        margin-bottom: 12px;
    }
    .wizard-input:focus {
        outline: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }

    .wizard-textarea {
        background: white;
        border: none;
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 16px;
        width: 100%;
        min-height: 120px;
        resize: vertical;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }

    .wizard-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .wizard-card {
        background: white;
        border-radius: 12px;
        padding: 20px 16px;
        text-align: center;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        border: 3px solid transparent;
    }
    .wizard-card:hover { transform: translateY(-2px); }
    .wizard-card:active { transform: scale(0.95); }
    .wizard-card.selected {
        border-color: var(--success);
        box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
    }
    .wizard-card-icon {
        font-size: 28px;
        margin-bottom: 8px;
    }
    .wizard-card-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--neutral-800);
    }

    .wizard-option-btn {
        background: rgba(255,255,255,0.95);
        border: none;
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 16px;
        width: 100%;
        text-align: left;
        cursor: pointer;
        margin-bottom: 8px;
        transition: transform 0.2s;
    }
    .wizard-option-btn:hover { transform: translateX(4px); }
    .wizard-option-btn.selected {
        background: white;
        box-shadow: 0 0 0 3px var(--success);
    }

    .wizard-client-result {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-top: 8px;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .wizard-client-result:hover { transform: translateX(4px); }
    .wizard-client-result.selected { box-shadow: 0 0 0 3px var(--success); }
    .wizard-client-name { font-weight: 600; color: var(--neutral-800); }
    .wizard-client-info { font-size: 13px; color: var(--neutral-500); margin-top: 4px; }

    .wizard-quick-btns {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .wizard-quick-btn {
        background: rgba(255,255,255,0.2);
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        color: white;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .wizard-quick-btn:hover { background: rgba(255,255,255,0.3); }
    .wizard-quick-btn.selected { background: white; color: var(--info); }

    .wizard-time-btns {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 8px;
    }
    .wizard-time-btn {
        background: rgba(255,255,255,0.15);
        border: none;
        border-radius: 8px;
        padding: 10px 8px;
        color: white;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .wizard-time-btn:hover { background: rgba(255,255,255,0.25); }
    .wizard-time-btn.selected { background: white; color: var(--info); font-weight: 600; }

    .wizard-selected-item {
        background: rgba(74, 222, 128, 0.2);
        border: 2px solid var(--success);
        border-radius: 8px;
        padding: 12px 16px;
        color: white;
        margin-top: 12px;
        font-weight: 500;
    }

    .wizard-summary {
        background: rgba(255,255,255,0.95);
        border-radius: 16px;
        padding: 20px;
        color: var(--neutral-800);
    }
    .wizard-summary-row {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--neutral-200);
    }
    .wizard-summary-row:last-child { border-bottom: none; }
    .wizard-summary-label { color: var(--neutral-500); font-size: 14px; }
    .wizard-summary-value { font-weight: 600; }

    .wizard-nav {
        padding: 16px 24px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        display: flex;
        gap: 12px;
    }
    .wizard-btn {
        flex: 1;
        padding: 16px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: transform 0.2s, opacity 0.2s;
    }
    .wizard-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .wizard-btn-next { background: white; color: var(--info); }
    .wizard-btn-next:hover:not(:disabled) { transform: translateY(-2px); }
    .wizard-btn-back { background: rgba(255,255,255,0.2); color: white; }

    .wizard-loading {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(118,75,162,0.3);
        border-top-color: var(--info);
        border-radius: 50%;
        animation: wizard-spin 0.8s linear infinite;
    }
    @keyframes wizard-spin {
        to { transform: rotate(360deg); }
    }

/* === Bloc 32 (extrait ligne 25245 de ui.py) === */
@keyframes spin { to { transform: rotate(360deg); } }

/* === Bloc 33 (extrait ligne 25511 de ui.py) === */
.pagination-container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 16px 0;
                flex-wrap: wrap;
            }
            .pagination-container button {
                padding: 6px 12px;
                border: 1px solid var(--gray-300, var(--neutral-300));
                background: white;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                min-width: 36px;
            }
            .pagination-container button:hover:not(:disabled) {
                background: var(--gray-100, var(--neutral-100));
            }
            .pagination-container button.active {
                background: var(--primary, var(--brand-blue-500));
                color: white;
                border-color: var(--primary, var(--brand-blue-500));
            }
            .pagination-container button:disabled {
                opacity: 0.4;
                cursor: default;
            }
            .pagination-info {
                font-size: 13px;
                color: var(--text-secondary, var(--neutral-500));
                margin: 0 12px;
            }
            .page-size-select {
                padding: 6px 8px;
                border: 1px solid var(--gray-300, var(--neutral-300));
                border-radius: 6px;
                font-size: 13px;
                background: white;
            }

/* === Bloc 34 (extrait ligne 25556 de ui.py) === */
.list-toolbar {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sort-selector select {
            padding: 8px 12px;
            border: 1px solid var(--gray-300, var(--neutral-300));
            border-radius: 6px;
            background: white;
            font-size: 14px;
            cursor: pointer;
        }
        .sort-selector select:focus {
            outline: none;
            border-color: var(--primary-color, var(--brand-blue-500));
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
        }
        .sortable {
            cursor: pointer;
            user-select: none;
        }
        .sortable:hover {
            background-color: var(--hover-bg, var(--neutral-100));
        }
        .sort-icon {
            font-size: 0.8em;
            margin-left: 4px;
            color: var(--primary-color, var(--brand-blue-500));
        }
        .cell-with-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            opacity: 0.7;
            transition: opacity 0.2s, background-color 0.2s;
        }
        .action-btn:hover {
            opacity: 1;
            background-color: var(--hover-bg, var(--neutral-100));
        }
        .facture-link {
            opacity: 1 !important;
            background: linear-gradient(135deg, var(--success) 0%, var(--text-on-success) 100%);
            color: white !important;
            border-radius: 4px;
            font-size: 12px;
        }
        .facture-link:hover {
            transform: scale(1.15);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
        }
        .generer-facture-btn {
            opacity: 1 !important;
            background: linear-gradient(135deg, var(--warning) 0%, var(--text-on-warning) 100%);
            color: white !important;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            font-size: 12px;
        }
        .generer-facture-btn:hover {
            transform: scale(1.15);
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
        }
        .supprimer-facture-btn {
            opacity: 0.7 !important;
            background: linear-gradient(135deg, var(--error) 0%, var(--text-on-error) 100%);
            color: white !important;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            font-size: 10px;
            padding: 2px 4px;
        }
        .supprimer-facture-btn:hover {
            opacity: 1 !important;
            transform: scale(1.15);
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
        }
        .quick-actions {
            display: flex;
            gap: 4px;
            margin-top: 4px;
        }
        .quick-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 16px;
            background-color: var(--primary-light, var(--bg-info));
            transition: all 0.2s;
        }
        .quick-action-btn:hover {
            background-color: var(--primary-color, var(--brand-blue-500));
            transform: scale(1.1);
        }

        /* === STYLES IMPORT === */
        .import-dropdown {
            position: relative;
            display: inline-block;
        }
        .import-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid var(--gray-200, var(--neutral-200));
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 100;
            min-width: 220px;
            padding: 8px 0;
        }
        .import-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            color: var(--gray-700, var(--neutral-800));
            text-decoration: none;
            font-size: 14px;
            transition: background 0.2s;
        }
        .import-menu a:hover {
            background: var(--gray-100, var(--neutral-100));
        }
        .import-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .import-modal {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .import-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            border-bottom: 1px solid var(--gray-200, var(--neutral-200));
        }
        .import-modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }
        .import-modal-header .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--gray-500);
            cursor: pointer;
        }
        .import-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }
        .import-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--gray-200, var(--neutral-200));
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        .import-dropzone {
            border: 2px dashed var(--gray-300, var(--neutral-300));
            border-radius: 12px;
            padding: 48px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .import-dropzone:hover, .import-dropzone.dragover {
            border-color: var(--primary, var(--brand-blue-500));
            background: var(--primary-light, var(--bg-info));
        }
        .import-dropzone svg {
            color: var(--gray-400);
            margin-bottom: 16px;
        }
        .import-dropzone p {
            margin: 0;
            color: var(--gray-600);
        }
        .import-dropzone-sub {
            font-size: 14px;
            color: var(--gray-500);
            margin-top: 8px !important;
        }
        .import-formats {
            font-size: 12px;
            color: var(--gray-400);
            margin-top: 16px !important;
        }
        .import-preview h4, .import-preview h5 {
            margin: 0 0 12px;
            font-size: 16px;
            font-weight: 600;
        }
        .import-preview h5 {
            font-size: 14px;
            margin-top: 24px;
        }
        .import-preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .import-file-info {
            font-size: 14px;
            color: var(--gray-500);
        }
        .import-mapping {
            background: var(--gray-50, var(--neutral-50));
            border-radius: 8px;
            padding: 16px;
        }
        #import-mapping-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .mapping-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
        }
        .mapping-item .col-name {
            color: var(--gray-600);
        }
        .mapping-item .arrow {
            color: var(--gray-400);
        }
        .mapping-item .field-name {
            color: var(--primary);
            font-weight: 500;
        }
        .mapping-item.unmapped {
            border-color: var(--warning, var(--warning));
            background: var(--bg-warning);
        }
        .mapping-item.unmapped .field-name {
            color: var(--warning);
        }
        .import-data-preview {
            margin-top: 16px;
        }
        .import-data-preview table {
            font-size: 13px;
        }
        .import-result {
            text-align: center;
            padding: 32px;
        }
        .import-result-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .import-result-icon.success {
            background: var(--bg-success);
            color: var(--text-on-success);
        }
        .import-result-icon.error {
            background: var(--bg-error);
            color: var(--text-on-error);
        }
        #import-result-stats {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin: 16px 0;
        }
        .stat-item {
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }
        .stat-value.success {
            color: var(--text-on-success);
        }
        .stat-value.error {
            color: var(--text-on-error);
        }
        .stat-label {
            font-size: 13px;
            color: var(--gray-500);
        }
        .import-errors {
            max-height: 200px;
            overflow-y: auto;
            text-align: left;
            margin-top: 16px;
        }
        .error-item {
            background: var(--bg-error);
            border: 1px solid var(--bg-error);
            border-radius: 6px;
            padding: 8px 12px;
            margin-bottom: 8px;
            font-size: 13px;
        }

/* === Bloc 35 (extrait ligne 26621 de ui.py) === */
.col-toggle-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--bg-primary, white);
            border: 1px solid var(--gray-200, var(--neutral-200));
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 200;
            min-width: 200px;
            max-height: 320px;
            overflow-y: auto;
            padding: 8px 0;
        }
        .col-toggle-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-primary, var(--neutral-800));
            white-space: nowrap;
        }
        .col-toggle-item:hover {
            background: var(--gray-100, var(--neutral-100));
        }
        .col-toggle-item input[type="checkbox"] {
            accent-color: var(--primary, var(--brand-blue-500));
        }

/* === Bloc 36 (extrait ligne 26790 de ui.py) === */
.lang-dropdown.show { display:block !important; }
        .lang-option { display:block;padding:8px 16px;text-decoration:none;color:var(--text-primary,var(--neutral-800));font-size:13px;white-space:nowrap; }
        .lang-option:hover { background:var(--primary-50,var(--neutral-100)); }

/* === Bloc 37 (extrait ligne 27606 de ui.py) === */
/* === MASQUER LE MENU GLOBAL SUR LES FORMULAIRES SECTIONNÉS === */
        /* Quand le contenu contient un .azal-container (formulaire avec sa propre sidebar),
           on masque la sidebar globale pour eviter le double menu */
        .main-content:has(.azal-container) {
            /* Reset padding car plus de sidebar globale */
        }
        .app-layout:has(.azal-container) > .sidebar {
            display: none;
        }
        .app-layout:has(.azal-container) > .main-wrapper {
            margin-left: 0;
        }
        .app-layout:has(.azal-container) > .main-wrapper > .main-content > .page-title {
            display: none;
        }

        /* === ICONES SVG UNIFORMES DANS LA SIDEBAR === */
        /* Les SVG charges via <img> utilisent stroke="currentColor" qui est noir.
           Le filtre les rend blancs pour matcher le fond sombre de la sidebar. */
        .sidebar .nav-icon img,
        .sidebar .user-settings-icon img {
            filter: brightness(0) invert(1);
            opacity: 0.85;
            width: 20px;
            height: 20px;
        }
        .sidebar .nav-item:hover .nav-icon img {
            opacity: 1;
        }
        .sidebar .user-settings-icon img {
            width: 16px;
            height: 16px;
        }

        /* Bloc utilisateur sidebar — texte vert */
        .sidebar-user .user-avatar {
            background: var(--primary, var(--success)) !important;
            color: white !important;
        }
        .sidebar-user .user-name {
            color: var(--success) !important;
            font-weight: 600;
        }
        .sidebar-user .user-email {
            color: var(--success) !important;
            opacity: 0.9;
        }

        /* === NAVIGATION AMÉLIORÉE === */

        /* Indicateur page active */
        .nav-item.active {
            background: rgba(255,255,255,0.15);
            border-left: 3px solid white;
            padding-left: 13px;
        }

        /* Sidebar collapsible */
        .sidebar.collapsed {
            width: 60px;
        }
        .sidebar.collapsed .nav-item span:last-child,
        .sidebar.collapsed .nav-title,
        .sidebar.collapsed .user-name,
        .sidebar.collapsed .user-email,
        .sidebar.collapsed .sidebar-logo span {
            display: none;
        }
        .sidebar.collapsed .nav-item {
            justify-content: center;
            padding: 10px;
        }
        .sidebar.collapsed .nav-icon {
            margin: 0;
        }
        .app-layout.sidebar-collapsed .main-wrapper {
            margin-left: 60px;
        }
        /* Sections repliables */
        .nav-title-collapsible {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
            transition: opacity 0.15s;
        }
        .nav-title-collapsible:hover {
            opacity: 1 !important;
        }
        .nav-chevron {
            transition: transform 0.2s ease;
            opacity: 0.5;
            flex-shrink: 0;
        }
        .nav-chevron.collapsed {
            transform: rotate(-90deg);
        }
        .nav-section-items {
            overflow: hidden;
            transition: max-height 0.25s ease, opacity 0.2s ease;
            max-height: 2000px;
            opacity: 1;
        }
        .nav-section-items.collapsed {
            max-height: 0;
            opacity: 0;
        }
        .sidebar.collapsed .nav-chevron,
        .sidebar.collapsed .drag-handle {
            display: none;
        }
        /* Drag & drop */
        .drag-handle {
            cursor: grab;
            opacity: 0.3;
            font-size: 12px;
            margin-right: 4px;
            transition: opacity 0.15s;
        }
        .nav-title-collapsible:hover .drag-handle {
            opacity: 0.7;
        }
        .nav-section.dragging {
            opacity: 0.4;
        }
        .nav-section.drag-over {
            border-top: 2px solid var(--azalplus-sidebar-text-active, #fff);
        }
        .nav-item.dragging {
            opacity: 0.4;
        }
        .nav-item.drag-over {
            border-top: 2px solid var(--azalplus-sidebar-text-active, #fff);
            margin-top: -2px;
        }

        .sidebar-toggle {
            position: absolute;
            bottom: 80px;
            right: -12px;
            width: 24px;
            height: 24px;
            background: var(--primary, var(--brand-blue-700));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            font-size: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            z-index: 1001;
            transition: transform 0.15s;
        }
        .sidebar-toggle:hover {
            transform: scale(1.1);
        }

        /* Dropdown + Ajouter */
        .add-dropdown {
            position: relative;
            display: inline-block;
        }
        .add-dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            min-width: 220px;
            z-index: 1000;
            margin-top: 8px;
            overflow: hidden;
        }
        .add-dropdown-content.open {
            display: block;
        }
        .add-dropdown-section {
            padding: 8px 0;
            border-bottom: 1px solid var(--gray-100, var(--neutral-100));
        }
        .add-dropdown-section:last-child {
            border-bottom: none;
        }
        .add-dropdown-title {
            padding: 4px 16px;
            font-size: 11px;
            color: var(--gray-500, var(--neutral-500));
            text-transform: uppercase;
            font-weight: 600;
        }
        .add-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            color: var(--gray-700, var(--neutral-800));
            text-decoration: none;
            font-size: 14px;
        }
        .add-dropdown-item:hover {
            background: var(--gray-50, var(--neutral-50));
        }

        /* Command Palette */
        .command-palette-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            align-items: flex-start;
            justify-content: center;
            padding-top: 15vh;
        }
        .command-palette-overlay.open {
            display: flex;
        }
        .command-palette {
            background: white;
            border-radius: 12px;
            width: 560px;
            max-width: 90vw;
            max-height: 400px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .command-input {
            width: 100%;
            padding: 16px 20px;
            border: none;
            border-bottom: 1px solid var(--gray-200, var(--neutral-200));
            font-size: 16px;
            outline: none;
        }
        .command-input::placeholder {
            color: var(--gray-400, var(--neutral-400));
        }
        .command-results {
            max-height: 320px;
            overflow-y: auto;
        }
        .command-section-title {
            padding: 8px 20px 4px;
            font-size: 11px;
            color: var(--gray-500, var(--neutral-500));
            text-transform: uppercase;
            font-weight: 600;
        }
        .command-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            cursor: pointer;
        }
        .command-item:hover, .command-item.selected {
            background: var(--gray-100, var(--neutral-100));
        }
        .command-item-icon {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }
        .command-item-text {
            flex: 1;
        }
        .command-item-name {
            font-weight: 500;
            color: var(--gray-800, var(--neutral-800));
        }
        .command-item-hint {
            font-size: 12px;
            color: var(--gray-500, var(--neutral-500));
        }
        .command-shortcut {
            margin-left: auto;
            font-size: 11px;
            color: var(--gray-400, var(--neutral-400));
            background: var(--gray-100, var(--neutral-100));
            padding: 2px 6px;
            border-radius: 4px;
        }
        .command-empty {
            padding: 24px 20px;
            text-align: center;
            color: var(--gray-500, var(--neutral-500));
        }
        .command-hint {
            padding: 8px 20px;
            font-size: 12px;
            color: var(--gray-400, var(--neutral-400));
            border-top: 1px solid var(--gray-100, var(--neutral-100));
            display: flex;
            gap: 16px;
        }
        .command-hint kbd {
            background: var(--gray-100, var(--neutral-100));
            padding: 2px 6px;
            border-radius: 4px;
            font-family: inherit;
        }

        /* === STYLES GLOBAUX BOUTON CREATION INLINE === */
        .select-with-create {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .select-with-create select {
            flex: 1;
        }
        .btn-create-inline {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 6px;
            border: 2px solid var(--brand-blue-500);
            background: var(--brand-blue-500);
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 0;
            box-sizing: border-box;
        }
        .btn-create-inline:hover {
            background: var(--brand-blue-700);
            border-color: var(--brand-blue-700);
        }

        /* Favoris Sidebar */
        .favoris-sidebar-list {
            max-height: 200px;
            overflow-y: auto;
        }
        .favoris-sidebar-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 6px;
            color: var(--gray-600);
            font-size: 12px;
            text-decoration: none;
            transition: all 0.15s;
        }
        .favoris-sidebar-item:hover {
            background: var(--gray-100);
            color: var(--gray-900);
        }
        .favoris-sidebar-item .fav-icon {
            font-size: 14px;
        }
        .favoris-sidebar-item .fav-name {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Star Button */
        .star-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            padding: 4px;
            transition: transform 0.2s;
            line-height: 1;
        }
        .star-btn:hover {
            transform: scale(1.2);
        }
        .star-btn.active {
            color: var(--warning);
        }
        .star-btn:not(.active) {
            color: var(--gray-300);
        }
        .star-btn.loading {
            opacity: 0.5;
            pointer-events: none;
        }

        /* Table star column */
        .table .col-star {
            width: 40px;
            text-align: center;
        }

        /* Notification Panel */
        .header-notif {
            position: relative;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: background 0.15s;
            user-select: none;
            text-decoration: none;
            display: inline-block;
            color: inherit;
        }
        .header-notif:hover {
            background: var(--gray-100);
        }
        .notif-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            min-width: 18px;
            height: 18px;
            background: var(--error);
            color: white;
            font-size: 11px;
            font-weight: 600;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .notif-icon-bell {
            font-size: 20px;
            display: block;
        }
        /* Responsive header - MacBook Air et petits écrans */
        .main-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            overflow: visible;
            flex-wrap: nowrap;
        }
        .header-search {
            flex: 1;
            min-width: 0;
        }
        .header-search input {
            width: 100%;
            min-width: 0;
        }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        /* MacBook Air 1280-1440px : compresser header-actions pour eviter coupe de la cloche */
        @media (max-width: 1440px) {
            .header-actions {
                gap: 4px;
            }
            .charte-topbar-user-name {
                display: none; /* garde l'avatar + chevron, masque le prenom */
            }
            .header-search input {
                max-width: 180px;
            }
        }
        @media (max-width: 1280px) {
            .header-search input {
                max-width: 200px;
            }
            .add-dropdown .btn {
                padding: 6px 10px;
                font-size: 13px;
            }
            .add-dropdown .btn span:not(:first-child) {
                display: none; /* masquer le chevron sur petit ecran */
            }
            .header-mobile {
                display: none;
            }
        }
        @media (max-width: 1024px) {
            .header-search {
                display: none;
            }
        }
        .notif-icon-bell.urgent {
            animation: bell-shake 0.5s infinite;
            filter: hue-rotate(0deg) saturate(3);
        }
        .header-notif.urgent {
            animation: bell-glow 1s infinite;
        }
        .header-notif.urgent .notif-badge {
            animation: badge-pulse 1s infinite;
            background: var(--text-on-error);
        }
        @keyframes bell-shake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(15deg); }
            75% { transform: rotate(-15deg); }
        }
        @keyframes bell-glow {
            0%, 100% { background: transparent; }
            50% { background: rgba(239, 68, 68, 0.15); border-radius: 8px; }
        }
        @keyframes badge-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }
        .notif-panel {
            position: absolute;
            top: 100%;
            right: 0;
            width: 320px;
            max-height: 400px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            z-index: 1000;
            overflow: hidden;
            margin-top: 8px;
        }
        .notif-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-200);
            background: var(--gray-50);
        }
        .notif-panel-header a {
            font-size: 12px;
            color: var(--primary);
            text-decoration: none;
        }
        .notif-list {
            max-height: 320px;
            overflow-y: auto;
        }
        .notif-item {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-100);
            cursor: pointer;
            transition: background 0.15s;
        }
        .notif-item:hover {
            background: var(--gray-50);
        }
        .notif-item.unread {
            background: var(--bg-info);
        }
        .notif-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--gray-100);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .notif-content {
            flex: 1;
            min-width: 0;
        }
        .notif-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--gray-900);
            margin-bottom: 2px;
        }
        .notif-desc {
            font-size: 12px;
            color: var(--gray-500);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .notif-time {
            font-size: 11px;
            color: var(--gray-400);
            margin-top: 4px;
        }
        .notif-empty {
            padding: 24px;
            text-align: center;
            color: var(--gray-400);
            font-size: 13px;
        }

        /* ============================================
           DATETIME PICKER GLOBAL
           ============================================ */
        .datetime-picker-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        .datetime-picker-wrapper .datetime-picker {
            padding-right: 40px;
            cursor: pointer;
        }
        .datetime-picker-icon {
            position: absolute;
            right: 10px;
            cursor: pointer;
            font-size: 18px;
        }
        .datetime-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        .datetime-modal-content {
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            width: 380px;
            max-height: 90vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .datetime-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--neutral-200);
            background: var(--bg-info);
        }
        .datetime-modal-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: var(--brand-blue-700);
        }
        .datetime-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--brand-blue-700);
        }
        .datetime-calendar {
            padding: 16px;
            background: #ffffff;
        }
        .calendar-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .calendar-nav button {
            background: #ffffff;
            border: 1px solid var(--neutral-200);
            border-radius: 6px;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 14px;
            color: var(--neutral-800);
        }
        .calendar-nav button:hover {
            background: var(--neutral-100);
            color: var(--neutral-800);
        }
        .calendar-nav span {
            font-weight: 600;
            font-size: 15px;
            color: var(--neutral-800);
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }
        .calendar-day-header {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--neutral-500);
            padding: 8px 0;
        }
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.15s;
            color: var(--neutral-800);
            background: #ffffff;
        }
        .calendar-day:hover {
            background: var(--neutral-200);
            color: var(--neutral-800);
        }
        .calendar-day.today {
            border: 2px solid var(--brand-blue-500);
            color: var(--brand-blue-500);
            font-weight: 600;
        }
        .calendar-day.selected {
            background: var(--brand-blue-500);
            color: #ffffff !important;
        }
        .calendar-day.other-month {
            color: var(--neutral-400);
            background: var(--neutral-50);
        }
        .calendar-day.disabled {
            color: var(--neutral-300);
            background: var(--neutral-100);
            cursor: not-allowed;
        }
        .calendar-day.past-date {
            color: var(--neutral-400);
            background: var(--bg-warning);
        }
        .calendar-day.past-date:hover {
            background: var(--bg-warning);
            border-color: var(--warning);
        }
        .calendar-day.past-date.selected {
            background: var(--warning);
            color: white;
            border-color: var(--text-on-warning);
        }
        .time-slot.past-slot {
            color: var(--neutral-400);
            background: var(--bg-warning);
            cursor: pointer;
        }
        .time-slot.past-slot:hover {
            background: var(--bg-warning);
            border-color: var(--warning);
        }
        .time-slot.past-slot.selected {
            background: var(--warning);
            color: white;
        }
        .time-slots {
            padding: 16px;
            border-top: 1px solid var(--neutral-200);
            max-height: 150px;
            overflow-y: auto;
            background: #ffffff;
            flex-shrink: 0;
        }
        .time-slots-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 12px;
            color: var(--brand-blue-700);
        }
        .time-slots-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        .time-slot {
            padding: 8px;
            text-align: center;
            border: 1px solid var(--neutral-200);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.15s;
            background: var(--bg-info);
            color: var(--brand-blue-700);
        }
        .time-slot:hover {
            background: var(--bg-info);
            border-color: var(--brand-blue-500);
            color: var(--brand-blue-700);
        }
        .time-slot.selected {
            background: var(--brand-blue-500);
            color: #ffffff !important;
            border-color: var(--brand-blue-500);
        }
        .time-slot.unavailable {
            background: var(--bg-error);
            color: var(--text-on-error);
            cursor: not-allowed;
            border-color: var(--bg-error);
        }
        .time-slot.unavailable:hover {
            background: var(--bg-error);
            border-color: var(--bg-error);
            color: var(--text-on-error);
        }
        .datetime-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 16px;
            border-top: 1px solid var(--neutral-200);
            background: var(--bg-info);
            flex-shrink: 0;
            position: sticky;
            bottom: 0;
        }
        .technician-info {
            padding: 12px 16px;
            background: var(--bg-info);
            border-bottom: 1px solid var(--bg-info);
            font-size: 13px;
            color: var(--brand-blue-700);
        }
        .loading-slots {
            text-align: center;
            padding: 20px;
            color: var(--neutral-800);
        }

/* === Bloc 38 (extrait ligne 30479 de ui.py) === */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === Bloc 39 (extrait ligne 30512 de ui.py) === */
/* Autocompletion IA Styles */
    .autocomplete-container {
        position: relative;
    }
    .autocomplete-wrapper {
        position: relative;
    }
    .autocomplete-input {
        padding-right: 32px !important;
    }
    .autocomplete-indicator {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        opacity: 0.5;
        pointer-events: none;
    }
    .autocomplete-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        display: none;
    }
    .autocomplete-item {
        padding: 10px 12px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.1s;
    }
    .autocomplete-item:hover,
    .autocomplete-item.active {
        background: var(--primary-light, var(--bg-info));
    }
    .autocomplete-item .suggestion-text {
        flex: 1;
    }
    .autocomplete-item .suggestion-source {
        font-size: 12px;
        opacity: 0.6;
        margin-left: 8px;
    }

    /* Relation Autocomplete */
    .relation-autocomplete-container {
        display: flex;
        gap: 4px;
        align-items: stretch;
    }
    .relation-autocomplete-wrapper {
        position: relative;
        flex: 1;
    }
    .relation-search-input {
        width: 100%;
        padding-right: 32px !important;
    }
    .relation-search-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        opacity: 0.5;
        pointer-events: none;
    }
    .relation-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;
        max-height: 250px;
        overflow-y: auto;
        display: none;
    }
    .relation-item {
        padding: 10px 12px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 2px;
        border-bottom: 1px solid var(--gray-100);
        transition: background 0.1s;
    }
    .relation-item:last-child {
        border-bottom: none;
    }
    .relation-item:hover,
    .relation-item.active {
        background: var(--primary-light, var(--bg-info));
    }
    .relation-display {
        font-weight: 500;
        color: var(--gray-900);
    }
    .relation-extras {
        font-size: 12px;
        color: var(--gray-500);
        display: flex;
        gap: 8px;
    }
    .relation-extras .extra-info {
        background: var(--gray-100);
        padding: 2px 6px;
        border-radius: 4px;
    }
    .relation-no-results {
        padding: 12px;
        text-align: center;
        color: var(--gray-500);
        font-style: italic;
    }

    /* Auto-fill animations */
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    /* Mobile Modal */
    .mobile-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }
    .mobile-modal-overlay.open {
        display: flex;
    }
    .mobile-modal {
        background: white;
        border-radius: 16px;
        padding: 32px;
        max-width: 400px;
        width: 90%;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .mobile-modal h2 {
        margin: 0 0 8px 0;
        font-size: 24px;
        color: var(--gray-900);
    }
    .mobile-modal p {
        color: var(--gray-500);
        margin: 0 0 24px 0;
        font-size: 14px;
    }
    .qr-container {
        background: white;
        padding: 20px;
        border-radius: 12px;
        display: inline-block;
        margin-bottom: 24px;
        border: 2px solid var(--gray-200);
    }
    #qrcode {
        width: 200px;
        height: 200px;
    }
    #qrcode canvas {
        width: 200px !important;
        height: 200px !important;
    }
    .mobile-token {
        background: var(--gray-100);
        padding: 12px 16px;
        border-radius: 8px;
        font-family: monospace;
        font-size: 14px;
        margin-bottom: 24px;
        word-break: break-all;
        color: var(--gray-700);
    }
    .mobile-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
    }
    .mobile-buttons .btn {
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        border: none;
        font-size: 14px;
    }
    .mobile-buttons .btn-primary {
        background: var(--primary);
        color: white;
    }
    .mobile-buttons .btn-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
    }
    .header-mobile {
        position: relative;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        transition: background 0.15s;
        text-decoration: none;
        display: inline-block;
        color: inherit;
    }
    .header-mobile:hover {
        background: var(--gray-100);
    }
    .mobile-icon {
        font-size: 20px;
    }
    .mobile-instructions {
        text-align: left;
        background: var(--blue-50);
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 13px;
        color: var(--gray-700);
    }
    .mobile-instructions ol {
        margin: 8px 0 0 0;
        padding-left: 20px;
    }
    .mobile-instructions li {
        margin: 4px 0;
    }

/* =============================================================================
   TABLEAU DE BORD — CSS migré depuis les style="" inline de moteur/ui.py
   (dashboard()), conformément à AZA-CSS-001 / I-13. Valeurs reproduites à
   l'identique. Le rouge fort des bandeaux (#dc2626/#b91c1c) est désormais
   tokenisé via --danger-strong / --danger-strong-2 (variante dark incluse) ;
   --error reste le rouge pastel (#FCA5A5) pour les états doux.
   ============================================================================= */

/* Bandeau rouge « interventions à valider » */
.dash-banner-validation {
    display: none;
    background: var(--danger-strong-2);
    background: linear-gradient(135deg, var(--danger-strong), var(--danger-strong-2));
    color: white;
    padding: 14px 20px;
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    animation: pulse-red 2s ease-in-out infinite;
}
.dash-banner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dash-banner-body {
    flex: 1;
    min-width: 200px;
}
.dash-banner-title {
    font-size: 1.05rem;
    display: block;
}
.dash-banner-message {
    opacity: 0.95;
    font-size: 0.95rem;
}
.dash-banner-link {
    background: white;
    color: var(--danger-strong);
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

/* Lignes des tableaux « interventions récentes » et « véhicules » */
.dash-table-row {
    border-bottom: 1px solid var(--azalplus-gray-200);
    cursor: pointer;
}
.dash-cell-first {          /* 1re cellule (numéro / immat) */
    padding: 8px 12px;
    font-weight: 600;
}
.dash-cell-first-primary {  /* variante avec couleur primaire (n° intervention) */
    padding: 8px 12px;
    font-weight: 600;
    color: var(--primary);
}
.dash-status-badge {        /* pastille de statut dans les lignes */
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--azalplus-gray-200);
}
.dash-table-empty {         /* cellule « aucun résultat » */
    padding: 16px;
    text-align: center;
    color: var(--azalplus-gray-400);
}
.dash-table {               /* tables interventions / véhicules */
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dash-table-head {          /* ligne d'en-tête */
    border-bottom: 2px solid var(--azalplus-gray-200);
    text-align: left;
}
.dash-section-h3 {          /* sous-titres de section (terrain, km, conso, coûts) */
    font-size: 16px;
    font-weight: 600;
    color: var(--azalplus-gray-800);
    margin: 20px 0 12px;
}

/* Carte score de conformité (anneau + valeur) */
.dash-conf {
    text-align: center;
    padding: 8px 0;
}
.dash-conf-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
}
.dash-conf-value {           /* % au centre de l'anneau ; couleur via modificateur */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}
.dash-conf-value.is-success { color: var(--success); }
.dash-conf-value.is-warning { color: var(--warning); }
.dash-conf-value.is-error   { color: var(--error); }
.dash-conf-label {
    font-size: 13px;
    color: var(--gray-500);
}
.dash-conf-alert-wrap {
    margin-top: 8px;
}
.dash-conf-alert-label {
    font-size: 12px;
    color: var(--gray-500);
}
.dash-conf-ok {
    margin-top: 8px;
    font-size: 12px;
    color: var(--success);
    font-weight: 500;
}
.dash-link-sm {              /* petits liens « Voir / Détails → » du dashboard */
    color: var(--primary);
    font-size: 12px;
    text-decoration: none;
}
.dash-link {                 /* liens de sous-titre KPI (sans font-size imposée) */
    color: var(--primary);
    text-decoration: none;
}
.dash-link-13 {              /* liens « Voir tout → » de pied de tableau */
    color: var(--primary);
    font-size: 13px;
    text-decoration: none;
}
/* Puces colorées des listes d'actions (aujourd'hui/demain, retards) */
.action-dot.is-success { background: var(--success); }
.action-dot.is-info    { background: var(--info); }
.action-dot.is-error   { background: var(--error); }
.dash-empty-muted {          /* texte « Aucun… » gris des listes d'actions */
    color: var(--gray-400);
}
.exec-sub-alert {            /* sous-libellé « X en retard » (rouge, gras) */
    color: var(--error);
    font-weight: 600;
}
.exec-sub-mt {              /* sous-libellé avec léger espacement supérieur */
    margin-top: 4px;
}
/* Cartes de raccourci (barre latérale colorée) */
.dash-shortcut-danger {
    border-left: 3px solid var(--error);
    background: var(--error-light, #fee2e2);
}
.dash-shortcut-primary {
    border-left: 3px solid var(--primary-dark);
}

/* Carte « Site web » (mini-KPIs) */
.dash-sw-kpis {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.dash-sw-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
}
.dash-sw-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
}
/* Montant du top-dépenses (rouge, gras) */
.dash-expense-amount {
    font-weight: 600;
    color: var(--error);
}
/* Grille à colonne unique (quick-links top dépenses) */
.dash-grid-1col {
    grid-template-columns: 1fr;
}
/* En-tête de la 1re rangée du dashboard */
.dash-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dash-title-flush {          /* titre sans bordure/marge */
    border: none;
    margin: 0;
}
/* Bouton « Rafraîchir maintenant » (à côté de l'indicateur auto-refresh) */
.dash-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 8px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--card-bg, var(--gray-50));
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dash-refresh-btn:hover {
    background: var(--primary-50);
    color: var(--primary);
}
.dash-refresh-btn svg {
    width: 16px;
    height: 16px;
}
.dash-refresh-btn.is-spinning svg {
    animation: dash-spin 0.6s linear infinite;
}
@keyframes dash-spin {
    to { transform: rotate(360deg); }
}
/* Badge « données non actualisées » (fetch KO) */
.dash-stale-badge {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    color: var(--danger-strong);
    background: var(--bg-error, #fee2e2);
    white-space: nowrap;
}
/* Grille de cartes KPI auto-ajustée */
.dash-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}