/* =========================================
   ORKYA OS - PREMIUM DESIGN SYSTEM
   Version: 1.3 (Catering Extensions)
   ========================================= */

/* --- SPACING SCALE (GAP VALUES) ---
   gap: 2px / 0.25rem - Extra tight (special effects, compact indicators)
   gap: 0.5rem         - Tight spacing (badges, chips, small groups)
   gap: 0.75rem        - Medium spacing (form fields, button groups)
   gap: 1rem           - Normal spacing (card content, sections)
   gap: 1.5rem         - Large spacing (major sections)
   gap: 2rem           - Extra large (page-level sections)
   gap: 0              - No gap (seamless grids, special layouts)
   ========================================= */

/* --- 0. GLOBAL RESET & BOX MODEL --- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Global link reset - no purple! */
a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

/* Global button reset — empêche le fond gris navigateur (spécificité 0 via :where) */
:where(button) {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

:root {
    /* Site nativement en dark : empêche le « mode sombre forcé » des navigateurs
       (Chrome Android « thème sombre pour le contenu web ») d'inverser nos couleurs
       — sinon le texte blanc de certains boutons/éléments passe en noir. */
    color-scheme: dark;
    /* --- COLOR PALETTE --- */
    --bg-app: #0f172a;
    --bg-secondary: #111827;
    --bg-surface: #1e293b;
    --glass-bg: rgba(30, 41, 59, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);
    
    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-accent: rgba(245, 158, 11, 0.5);
    
    /* Accents */
    --accent-primary: #6366f1;   /* Indigo 500 */
    --accent-success: #10b981;   /* Emerald 500 */
    --accent-warning: #f59e0b;   /* Amber 500 */
    --accent-danger:  #f43f5e;   /* Rose 500 - fonds, bordures, pastilles */
    /* Rose 400 : en TEXTE, le Rose 500 tombe a 4.34:1 sur une carte glass,
       sous le seuil WCAG AA. Les montants de depense etaient concernes. */
    --text-danger:    #fb7185;   /* Rose 400 - 5.92:1 */
    --accent-purple:  #8b5cf6;
    --accent-cyan:    #06b6d4;
    --accent-info:    #3b82f6;
    --success-light: rgba(16, 185, 129, 0.15);
    --danger-light: rgba(239, 68, 68, 0.15);
    --info-light: rgba(59, 130, 246, 0.15);

    /* Text */
    /* Rampe decalee d'un cran le 07/08/2026 (audit a11y).
       Avant : muted #64748b = 3.07:1 sur une carte #1e293b -> sous le seuil
       WCAG AA (4.5:1). Les libelles de KPI, les dates et les montants
       secondaires de la compta etaient donc illisibles en plein jour.
       L'ancienne valeur reste utilisable en --text-disabled : du texte
       desactive n'est pas porteur d'information, il est exempte du seuil. */
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;   /* Slate 300 - 9.85:1 sur carte */
    --text-muted:     #94a3b8;   /* Slate 400 - 5.71:1 sur carte */
    --text-disabled:  #64748b;   /* Slate 500 - decoratif uniquement */

    /* Premium Gradients (Blue to Orange) */
    --premium-gradient: linear-gradient(135deg, #6366f1 0%, #f59e0b 100%);
    --premium-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.3);
    
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Cards */
    --bg-card: rgba(255, 255, 255, 0.04);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* --- UTILITIES --- */
.text-gradient, .text-gradient-span {
    background-image: var(--premium-gradient) !important;
    background-size: 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block !important;
    padding: 0 2px !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

.icon-gradient i, .icon-gradient {
    background-image: var(--premium-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}


/* --- LAYOUTS --- */
.dashboard-container {
    padding: 4rem 0;
    max-width: 1400px;
    margin: 0 auto;
    width: 95%; /* Responsive safety */
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 340px; /* Main vs Sidebar */
    gap: 2rem;
}

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

/* --- COMPONENTS: HEADER --- */
.haiku-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
}

.haiku-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 0.4rem 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    letter-spacing: 0.3px;
}
.haiku-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}
.haiku-back i { font-size: 0.6rem; }

/* PREMIUM BRANDING HEADER (LOGO REPLACEMENT) */
.orkya-brand-header {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -2px;
    background: var(--premium-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.2));
}

.orkya-brand-header span {
    font-size: 0.5em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

.orkya-brand-header-sm {
    font-size: 1.5rem;
}

.user-welcome-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -1px;
    overflow: visible;
}

.user-welcome-title .text-gradient {
    padding: 10px 14px !important;
    margin: -10px 0 !important;
}

.user-welcome-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.org-badge {
    background: rgba(255,255,255,0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--glass-border);
}

/* Badge "Fondateur" — Sidebar org (Programme Fondateurs) */
.founder-badge {
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #f59e0b 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.orkya-sidebar:hover .founder-badge,
.orkya-sidebar.active .founder-badge,
.orkya-sidebar.pinned .founder-badge {
    display: inline-flex;
}

/* --- CONFIG BOXES (Equal Size) --- */
.config-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 1.5rem;
    transition: transform 0.2s, border-color 0.2s;
}

.config-box:hover {
    border-color: var(--accent-primary);
}

/* --- SAFE CENTERING UTILITY --- */
.orkya-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- COMPONENTS: BUTTONS --- */
.action-deck {
    display: flex;
    gap: 1rem;
}

.btn-action-glass {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 100px; /* Pill */
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Standardized gap */
    min-height: 44px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

.btn-action-glass i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Ensure text in span wraps properly when needed */
.btn-action-glass > span {
    flex-shrink: 1;
    min-width: 0; /* Allow text to shrink if needed */
}

.btn-action-glass:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.3);
    color: white;
}

/* Variante « action indisponible » : le bouton reste cliquable pour EXPLIQUER
   pourquoi (toast), mais son aspect dit clairement qu'il ne produira rien. */
.btn-action-glass--muted {
    color: rgba(255,255,255,0.55);
    border-style: dashed;
    border-color: rgba(251,191,36,0.35);
}
.btn-action-glass--muted i { color: var(--accent-warning, #fbbf24); }
.btn-action-glass--muted:hover {
    color: white;
    border-color: rgba(251,191,36,0.6);
}

/* OS BUTTON — Primary action button (gradient indigo) */
.os-button {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.os-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
    filter: brightness(1.1);
}
.os-button:disabled, .os-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* OS BUTTON SUBTLE — Secondary / ghost button */
.os-button-subtle {
    background: rgba(255,255,255,0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.os-button-subtle:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: white;
}

/* OS DROPDOWN — Context menu premium (teleported to body) */
.os-dropdown {
    background: #1e293b;
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 12px;
    padding: 0.375rem 0;
    box-shadow: 0 12px 40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
    color: #e2e8f0;
    min-width: 13rem;
}
.os-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    transition: background 0.15s ease, color 0.15s ease;
    border-radius: 0;
}
.os-dropdown-item:hover {
    background: rgba(99,102,241,0.12);
    color: #c7d2fe;
}
.os-dropdown-item.danger:hover {
    background: rgba(239,68,68,0.1);
    color: #fca5a5;
}
.os-dropdown-item.disabled {
    color: #475569;
    cursor: not-allowed;
    pointer-events: none;
}
/* OS CHECKBOX — Premium styled checkbox */
.os-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(148,163,184,0.3);
    border-radius: 5px;
    background: rgba(15,23,42,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}
.os-checkbox:hover {
    border-color: rgba(99,102,241,0.6);
    background: rgba(99,102,241,0.1);
}
.os-checkbox:checked {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
    box-shadow: 0 0 8px rgba(99,102,241,0.4);
}
.os-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.os-dropdown-divider {
    height: 1px;
    margin: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.08);
}

/* PRIMARY / MAGIC (Blue-to-Orange) */
.btn-action-primary, .btn-action-magic {
    background: linear-gradient(135deg, #6366f1 0%, #f59e0b 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.btn-action-primary:hover, .btn-action-magic:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(245, 158, 11, 0.5);
    filter: brightness(1.1);
    color: white;
}

/* VIVID MAGIC BUTTON (Refined: Indigo to Cyan) */
.orkya-btn-magic-vivid {
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #06b6d4 100%);
    color: white;
    border: none;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    position: relative;
    overflow: hidden;
}

.orkya-btn-magic-vivid::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.orkya-btn-magic-vivid:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(6, 182, 212, 0.5);
    filter: brightness(1.1);
    color: white;
}

.orkya-btn-magic-vivid:hover::after {
    opacity: 1;
}

/* SUCCESS (Emerald-Teal) */
.btn-action-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-action-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(5, 150, 105, 0.5);
    filter: brightness(1.1);
}

/* WARNING (Amber-Orange) */
.btn-action-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-action-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(217, 119, 6, 0.5);
    filter: brightness(1.1);
}

/* DANGER (Rose-Red) */
.btn-action-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3);
}

.btn-action-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(225, 29, 72, 0.4);
    filter: brightness(1.1);
}

/* INFO (Sky-Blue) */
.btn-action-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.btn-action-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(37, 99, 235, 0.4);
    filter: brightness(1.1);
}

/* --- COMPONENTS: CARDS --- */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    padding: 1.5rem;
}

/* HERO CARD */
.hero-card {
    background: linear-gradient(145deg, rgba(30,41,59,0.8), rgba(15,23,42,0.95));
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.hero-bg-glow {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-content { position: relative; z-index: 1; }

.hero-label {
    color: var(--accent-success); /* Default Emerald */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    display: block;
}

.hero-title {
    font-size: 2rem; 
    font-weight: 800; 
    color: white; 
    margin-bottom: 0.5rem;
}

.hero-meta {
    color: var(--text-secondary);
    font-size: 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.hero-action {
    position: relative; 
    z-index: 1;
}

/* APP GRID */
.app-grid-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.app-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

/* Chip choice : case a cocher stylee pour les tags profil
   (regime alim, allergies, permis, caces, habilitations, ssiap).
   Largeur automatique (pas de grille fixe), labels en entier. */
.chip-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
    line-height: 1.2;
}
.chip-choice:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(255, 255, 255, 0.9);
}
.chip-choice:has(input:checked) {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.6);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
}
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chip-toggle-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    color: rgba(165, 180, 252, 0.9);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.chip-toggle-more:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}

.app-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.app-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

/* HUB/RING SPECIFIC */
.ring-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.ring-kpi-item {
    display: flex;
    flex-direction: column;
}

.ring-kpi-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.ring-kpi-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: white;
}

.app-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.app-name {
    color: white;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

.app-desc {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}

/* SIDEBAR */
.sidebar-panel {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    height: fit-content;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stat-row:last-child { border-bottom: none; }

.stat-val { color: white; font-weight: 700; font-size: 1.1rem; }
.stat-key { color: var(--text-secondary); font-size: 0.9rem; }


/* --- EXTENSIONS (From Event Hub) --- */

/* TABS */
.tab-group {
    display: flex;
    gap: 0.5rem;
    background: rgba(0,0,0,0.2);
    padding: 6px;
    border-radius: 24px;
    width: fit-content;
    margin-bottom: 2.5rem;
    border: 1px solid var(--glass-border);
}
.tab-item {
    padding: 0.75rem 1.5rem;
    border-radius: 18px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tab-item.active {
    background: white;
    color: black;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- COMPONENTS: MODALS (ORKYA OS PREMIUM) --- */
.orkya-modal-backdrop, .os-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease-out;
}

/* Toggle Alpine pour modales : forcer display:flex sans inline style (cf feedback_alpine_modal_pitfalls) */
.orkya-modal-backdrop--open {
    display: flex !important;
}

/* QG / Inbox layout helpers (eviter les inline styles) */
.qg-flash-list {
    margin-bottom: 1rem;
}
.qg-flash {
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: hsl(239 84% 67% / 0.12);
    border: 1px solid hsl(239 84% 67% / 0.25);
    color: hsl(227 97% 89%);
    font-size: 0.85rem;
}
.qg-flash--error {
    background: hsl(0 84% 60% / 0.12);
    border-color: hsl(0 84% 60% / 0.3);
    color: hsl(0 97% 89%);
}
.qg-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.qg-pills-group {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.qg-icon-sm { font-size: 0.7rem; }

/* Modale QG nouvelle note */
.qg-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.qg-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}
.qg-modal-title i { color: hsl(235 89% 74%); }
.qg-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary, hsl(215 20% 65%));
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.3s ease;
}
.qg-modal-close:hover { color: white; }
.qg-modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.qg-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.qg-modal-z-top { z-index: 3000; }

.orkya-modal-content, .os-modal-card {
    background: #1e293b;
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    width: 100%;
    max-width: 500px;
    padding: 2.5rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.1);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal Wide Variant - Pour formulaires complexes (Staff, etc.) */
.orkya-modal-content-wide {
    background: #1e293b;
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    width: 100%;
    max-width: 900px;
    padding: 3rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.1);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


.orkya-form-group {
    margin-bottom: 1.5rem;
}

.orkya-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.orkya-input, .orkya-select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.8rem 1.2rem;
    color: white;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 500;
    outline: none;
    transition: all 0.2s;
}

.orkya-input:focus, .orkya-select:focus {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* AUTH SPECIFIC DENSITY */
.orkya-input-auth {
    padding: 0.7rem 1.1rem !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
    height: 48px !important; /* Fixed but professional height */
    box-sizing: border-box !important;
}

.orkya-label-auth {
    font-size: 0.7rem !important;
    margin-bottom: 0.4rem !important;
    opacity: 0.8;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* --- DATA TABLES & LISTS --- */
.table-os {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    margin-top: 1rem;
}
.table-os thead th {
    text-align: left;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.table-os tbody tr {
    background: rgba(30, 41, 59, 0.4);
    transition: all 0.2s;
}
.table-os tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.005);
}
.table-os td {
    padding: 1rem;
    color: white;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}
.table-os td:first-child {
    border-left: 1px solid var(--glass-border);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.table-os td:last-child {
    border-right: 1px solid var(--glass-border);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --- BADGES --- */
.badge-os {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.badge-neutral {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
/* Complète la famille .badge-os, qui n'avait pas de variante rouge : les trois
   autres existaient déjà et un état « perdu » rendu en gris neutre se lit
   comme une information sans conséquence. Rose 400 (--text-danger) et pas
   Rose 500 : en texte, le 500 tombe à 4.34:1 sur une carte, sous le seuil AA. */
.badge-danger {
    background: rgba(244, 63, 94, 0.18);
    color: var(--text-danger);
    border: 1px solid rgba(244, 63, 94, 0.25);
}

/* --- MEDIA CARDS (Recipes) --- */
.card-media {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.card-media:hover {
    transform: translateY(-6px);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.card-media-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-media-content {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- FILTERS --- */
.filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: center;
}
.filter-input {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    color: var(--text-primary);
    min-width: 200px;
}
/* --- HUB LAYOUTS --- */
.haiku-header-xl h1 { 
    font-size: 5rem; 
    letter-spacing: -3px; 
    line-height: 0.9; 
    font-weight: 900; 
    margin-bottom: 2rem;
}

.hub-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 2rem; 
}

.meal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

@media (max-width: 1024px) {
    .haiku-header-xl h1 { font-size: 3.5rem; }
}

.filter-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* === MOBILE RESPONSIVENESS (B-MAD Approved) === */
@media (max-width: 768px) {
    /* Layout */
    .dashboard-container { padding: 1rem; width: 100%; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 1rem; }
    
    /* Header */
    .haiku-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .haiku-header-xl {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: flex-start !important;
        margin-bottom: 2rem !important;
    }
    .haiku-header-xl h1 {
        font-size: 2rem !important;
        letter-spacing: -1px !important;
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }
    .haiku-header-xl > div:last-child {
        width: 100% !important;
        align-items: flex-start !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Header text — empêcher débordement */
    .user-welcome-title {
        font-size: 1.75rem;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    .user-welcome-title .text-gradient {
        padding: 4px 6px !important;
        margin: -4px 0 !important;
    }
    .user-welcome-subtitle {
        flex-wrap: wrap;
        gap: 0.4rem;
        font-size: 0.875rem;
    }
    .org-badge {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .orkya-brand-header {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Breadcrumbs — wrap sur mobile */
    .haiku-back {
        min-height: 36px;
        font-size: 0.75rem;
    }

    /* Action buttons */
    .action-deck { width: 100%; flex-wrap: wrap; gap: 0.5rem; }
    .btn-action-glass { flex: 1 1 45%; font-size: 0.8rem; }

    /* Hub Card Internal Layouts */
    .finance-card-body {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2rem !important;
    }
    .finance-card-body > div {
        width: 100% !important;
    }
    .finance-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .finance-actions {
        width: 100% !important;
    }
    
    /* Hub Grid */
    .hub-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .col-span-2, .col-span-3 { grid-column: span 1 !important; }

    .meal-grid { 
        grid-template-columns: 1fr !important; 
    }
    .meal-slot-card {
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle) !important;
    }
    .meal-slot-card:last-child {
        border-bottom: none !important;
    }
    
    /* Hero */
    .hero-card { 
        flex-direction: column; 
        padding: 1.5rem; 
        border-radius: 20px; 
        text-align: center; 
    }
    .hero-title { font-size: 1.5rem; }
    .hero-meta { flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
    
    /* App/Hub Grid */
    .app-grid { grid-template-columns: 1fr; gap: 1rem; }
    .app-card { padding: 1.25rem; border-radius: 20px; }
    
    /* Tabs - Horizontal scroll */
    .tab-group { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
    .tab-item { padding: 0.5rem 1rem; font-size: 0.75rem; white-space: nowrap; }
    
    /* Tables → Card Layout */
    .table-os { display: block; }
    .table-os thead { display: none; }
    .table-os tbody tr { 
        display: flex; 
        flex-direction: column; 
        margin-bottom: 1rem; 
        border-radius: 12px; 
        background: rgba(30, 41, 59, 0.6);
        padding: 1rem;
    }
    .table-os td { 
        display: flex; 
        justify-content: space-between; 
        padding: 0.5rem 0;
        border: none !important;
        border-radius: 0 !important;
    }
    .table-os td::before { 
        content: attr(data-label); 
        font-weight: 700; 
        color: var(--text-muted); 
        margin-right: 1rem;
    }
    
    /* Modals */
    .orkya-modal-content, .os-modal-card { 
        max-width: 95%; 
        padding: 1.5rem; 
        border-radius: 24px; 
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Filters */
    .filter-bar { flex-direction: column; }
    .filter-input { width: 100%; min-width: unset; }
    
    /* Sidebar panel */
    .sidebar-panel { border-radius: 16px; margin-top: 1rem; }
    
    /* Ring KPI Grid */
    .ring-kpi-grid { grid-template-columns: 1fr; gap: 0.75rem; }

    /* Form Groups - Tighter on mobile */
    .orkya-form-group { margin-bottom: 1rem; }

    /* Name Row - Stack on mobile */
    .name-row { flex-direction: column; }
}

/* Small phones */
@media (max-width: 480px) {
    .hero-title { font-size: 1.25rem; }
    .user-welcome-title { font-size: 1.35rem; letter-spacing: -0.5px; }
    .haiku-header-xl h1 { font-size: 1.6rem !important; }
    .btn-action-glass { flex: 1 1 100%; }
    .app-card { padding: 1rem; }
    .haiku-header { margin-bottom: 1rem; }
    .orkya-brand-header { font-size: 1.25rem; }
    .org-badge { max-width: 150px; }
}

/* Touch Optimization (Sally's recommendation) */
@media (pointer: coarse) {
    .btn-action-glass, .orkya-btn { min-height: 44px; }
    .tab-item { min-height: 44px; display: flex; align-items: center; }
    .orkya-sidebar-link { padding: 0.75rem; }
    .filter-input, .orkya-input, .orkya-select { min-height: 44px; }
}

/* --- NAV BUBBLES (Standardized) --- */
.orkya-nav-bubbles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.nav-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(30, 41, 59, 0.4); /* fallback for bg-surface */
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-card i {
    font-size: 1rem;
    opacity: 0.7;
}

.nav-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.nav-card:hover i {
    opacity: 1;
    color: var(--accent-primary);
}

.nav-card.active {
    background: var(--premium-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.nav-card.active i {
    opacity: 1;
    color: white;
}

/* =========================================
   VOLUNTEER HUB - EVENT DETAIL (Party Mode #8)
   ========================================= */

/* --- EVENT HERO --- */
.event-hero {
    background: linear-gradient(145deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 28px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

.event-hero .glow {
    position: absolute;
    top: -60%;
    left: -25%;
    width: 90%;
    height: 220%;
    background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 40%, transparent 70%);
    pointer-events: none;
    animation: hero-glow-rotate 15s linear infinite;
}

@keyframes hero-glow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- COUNTDOWN BADGES --- */
.countdown-badge {
    background: var(--premium-gradient);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
}

.countdown-badge.dday-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }
    50% { opacity: 0.85; box-shadow: 0 0 25px rgba(16, 185, 129, 0.5); }
}

/* --- INFO CARDS --- */
.info-card {
    background: linear-gradient(145deg, rgba(30,41,59,0.7), rgba(20,28,50,0.6));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.info-card:hover {
    border-color: rgba(99,102,241,0.3);
    background: linear-gradient(145deg, rgba(30,41,59,0.85), rgba(20,28,50,0.75));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* --- SHIFT ITEMS --- */
.shift-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.shift-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

/* --- QR CONTAINER --- */
.qr-container {
    background: white;
    padding: 1rem;
    border-radius: 20px;
    display: inline-block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
}

.qr-container:hover {
    transform: scale(1.05);
}

/* --- PASS STATES --- */
.pass-locked {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
}

.pass-active {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
}

.pass-suspended {
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
}

/* --- AVAILABILITY SLOTS (Ultra Robust Visibility) --- */
.slot-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
    background: rgba(30, 41, 59, 0.5) !important;
    color: #cbd5e1;
    position: relative;
    user-select: none;
}

.slot-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.slot-toggle.active {
    background: #6366f1 !important; /* solid Indigo 500 */
    border-color: #818cf8 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.5) !important;
}

.slot-check {
    margin-left: auto;
    display: none !important; /* Force hide */
    font-size: 0.9rem;
    color: white !important;
}

.slot-toggle.active .slot-check {
    display: block !important; /* Force show when active */
    animation: bounceScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounceScale {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Day Card Refinement */
.day-card {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px;
    overflow: hidden;
}

.day-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.day-card-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.day-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Day Tags */
.day-tag {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    border: 1px solid transparent; /* For borders to work */
}

.day-tag-event {
    background: rgba(99, 102, 241, 0.2); /* Indigo 500/20 */
    color: #818cf8; /* Indigo 400 */
    border-color: rgba(99, 102, 241, 0.3);
}

.day-tag-montage {
    background: rgba(245, 158, 11, 0.2); /* Amber 500/20 */
    color: #fbbf24; /* Amber 400 */
    border-color: rgba(245, 158, 11, 0.3);
}

.day-tag-demontage {
    background: rgba(100, 116, 139, 0.2); /* Slate 500/20 */
    color: #94a3b8; /* Slate 400 */
    border-color: rgba(100, 116, 139, 0.3);
}

.day-tag-prep {
    background: rgba(30, 41, 59, 0.5); /* Slate 800 */
    color: var(--text-muted); /* Slate 500 */
    border-color: rgba(255, 255, 255, 0.05);
}

/* --- ENGAGEMENT CARD --- */
.engagement-card {
    background: rgba(99, 102, 241, 0.05);
    border: 1px dashed rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    padding: 1.25rem;
}

.engagement-input {
    width: 5rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    min-height: 48px; /* Touch target */
}

.engagement-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Motivational Message Animation */
.motivation-msg {
    animation: slideIn 0.3s ease-out;
}

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

/* --- BUDDY SYSTEM --- */
.buddy-card {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.buddy-tabs {
    display: flex;
    background: rgba(0,0,0,0.4);
    padding: 0.25rem;
    border-radius: 14px;
}

.buddy-tab {
    flex: 1;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    min-height: 44px; /* Touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.buddy-tab.active {
    background: var(--accent-purple);
    color: white;
}

.buddy-code-display {
    background: rgba(139, 92, 246, 0.1);
    padding: 0.875rem;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buddy-code {
    font-size: 1.25rem;
    font-weight: 900;
    color: white;
    letter-spacing: 0.15em;
}

/* Member Avatars */
.member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-chip {
    background: rgba(255,255,255,0.05);
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeInUp 0.3s ease-out backwards;
}

.member-chip:nth-child(1) { animation-delay: 0ms; }
.member-chip:nth-child(2) { animation-delay: 50ms; }
.member-chip:nth-child(3) { animation-delay: 100ms; }
.member-chip:nth-child(4) { animation-delay: 150ms; }
.member-chip:nth-child(5) { animation-delay: 200ms; }

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

.member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-purple));
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
}

.member-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-success);
}

/* --- SAVED INDICATOR --- */
.saved-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--accent-success);
    font-size: 0.75rem;
    font-weight: 700;
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* --- TOP BAR (Event Detail) --- */
.event-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.event-topbar-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    transition: color 0.2s ease;
    min-height: 44px; /* Touch target */
    min-width: 44px;
}

.event-topbar-back:hover {
    color: white;
}

.event-topbar-title {
    font-size: 1.125rem;
    font-weight: 900;
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- MOBILE OPTIMIZATIONS (Volunteer Hub) --- */
@media (max-width: 768px) {
    .event-hero {
        padding: 1.5rem;
        border-radius: 24px;
    }
    
    .event-hero h1 {
        font-size: 1.75rem !important;
    }
    
    .info-card {
        padding: 1.25rem;
        border-radius: 20px;
    }
    
    .day-card-header {
        padding: 0.75rem;
    }
    
    .slot-toggle {
        padding: 1rem;
    }
    
    .buddy-code {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .event-topbar-title {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .countdown-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
}

/* Touch devices - ensure 48px targets */
@media (pointer: coarse) {
    .slot-toggle {
        min-height: 52px;
        padding: 1rem 1.25rem;
    }
    
    .buddy-tab {
        min-height: 48px;
    }
    
    .event-topbar-back {
        min-height: 48px;
        padding: 0 0.5rem;
    }
}

/* Hide x-cloak elements until Alpine loads */
[x-cloak] { display: none !important; }

/* =========================================
   ORKYA LEGACY EXTENSIONS (Merged from orkya.css)
   ========================================= */

/* --- NAVBAR --- */
.orkya-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

.orkya-nav-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-warning);
    text-decoration: none;
}

.orkya-nav-links {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

.orkya-nav-link {
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.orkya-nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.orkya-nav-link.active {
    color: var(--accent-primary);
}

/* --- ORKYA CARDS --- */
.orkya-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-normal);
}

.orkya-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.orkya-card-glass {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.orkya-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.orkya-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- ORKYA BUTTONS --- */
.orkya-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    /* Rigorous sizing */
    box-sizing: border-box;
    line-height: 1.2;
}

.orkya-btn-primary {
    background: linear-gradient(135deg, var(--accent-warning) 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.orkya-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
    color: white;
}

.orkya-btn-secondary {
    background: var(--bg-glass);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.orkya-btn-secondary:hover {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

.orkya-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
}

.orkya-btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.orkya-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.orkya-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
}

/* --- ORKYA TABLES --- */
.orkya-table {
    width: 100%;
    border-collapse: collapse;
}

.orkya-table thead {
    background: rgba(255, 255, 255, 0.03);
}

.orkya-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
}

.orkya-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

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

.orkya-table tbody tr:hover {
    background: var(--bg-glass);
}

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

/* --- ORKYA TABS (Glass style) --- */
.orkya-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.orkya-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.8);
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}

.orkya-tab:hover {
    color: #e2e8f0;
    background: rgba(99, 102, 241, 0.1);
}

.orkya-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

/* --- ORKYA BADGES --- */
.orkya-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.orkya-badge-success {
    background: var(--success-light);
    color: var(--accent-success);
}

.orkya-badge-danger {
    background: var(--danger-light);
    color: var(--text-danger);
}

.orkya-badge-info {
    background: var(--info-light);
    color: var(--accent-info);
}

.orkya-badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.orkya-badge-neutral {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
}

/* --- ALERTS --- */
.orkya-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.orkya-alert-success {
    background: var(--success-light);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--accent-success);
}

.orkya-alert-danger {
    background: var(--danger-light);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--text-danger);
}

.orkya-alert-info {
    background: var(--info-light);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-info);
}

/* --- UTILITIES (Tailwind-like) --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.w-full { width: 100%; }

/* --- COLOR UTILITIES --- */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-warning) !important; }

/* --- SPACING UTILITIES --- */
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-8 { margin-top: 2rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* --- ICON CIRCLES --- */
.orkya-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.orkya-icon-circle.success {
    background: linear-gradient(135deg, var(--accent-success) 0%, #059669 100%);
}

.orkya-icon-circle.danger {
    background: linear-gradient(135deg, var(--accent-danger) 0%, #dc2626 100%);
}

.orkya-icon-circle.info {
    background: linear-gradient(135deg, var(--accent-info) 0%, #2563eb 100%);
}

.orkya-icon-circle.accent {
    background: linear-gradient(135deg, var(--accent-warning) 0%, #d97706 100%);
}

.orkya-icon-circle.purple {
    background: linear-gradient(135deg, var(--accent-purple) 0%, #7c3aed 100%);
}

/* --- SECTION TITLE --- */
.orkya-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* --- BACK LINK --- */
.orkya-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary); /* Plus clair que muted */
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.orkya-back-link:hover {
    color: white;
    transform: translateX(-4px);
}

/* --- EMPTY STATE --- */
.orkya-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.orkya-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* --- GRIDS --- */
.orkya-grid {
    display: grid;
    gap: 1.5rem;
}

.orkya-grid-2 { grid-template-columns: repeat(2, 1fr); }
.orkya-grid-3 { grid-template-columns: repeat(3, 1fr); }
.orkya-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .orkya-grid-4, .orkya-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

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

/* --- RADIO/CHECKBOX CARDS --- */
.radio-card-label {
    cursor: pointer;
    display: block;
    position: relative;
}

.radio-card-label input[type="radio"],
.radio-card-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.radio-card-label:hover .radio-card-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.radio-card-label input:checked + .radio-card-content {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--accent-warning);
    color: var(--accent-warning);
    box-shadow: 0 0 0 1px var(--accent-warning);
}

.yes-no-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* --- MOVED FROM ADMIN LIST --- */
.volunteer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-success) 0%, #059669 100%);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* =========================================
   UTILITY CLASSES (Tailwind-style)
   ========================================= */

/* Margin utilities */
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }

.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }

/* --- PROFILE / BIO LAYOUTS (ORKYA OS) --- */
.bio-grid {
    display: grid;
    grid-template-columns: 300px 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1280px) {
    .bio-grid { grid-template-columns: 280px 1fr; }
    .bio-col-command { grid-column: 2; grid-row: 1; }
    .bio-col-intel { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
    .bio-grid { grid-template-columns: 1fr; }
    .bio-col-command { grid-column: 1; grid-row: 1; margin-bottom: 2rem; }
    .bio-col-identity { grid-column: 1; margin-bottom: 2rem; }
    .bio-col-intel { grid-column: 1; }
}

.sticky-card { position: sticky; top: 2rem; }

.avatar-ring { 
    width: 120px; height: 120px; 
    border-radius: 50%; 
    padding: 4px; 
    border: 1px solid var(--glass-border);
    margin: 0 auto 1.5rem;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
}

.avatar-ring img { 
    width: 100%; height: 100%; 
    object-fit: cover; 
    border-radius: 50%; 
}

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

.data-item {
    display: flex; justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
}

.data-item:last-child { border-bottom: none; }
.data-item .label { color: var(--text-secondary); }
.data-item .value { color: white; font-weight: 500; }

.availability-grid {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}

.avail-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
}

.avail-true { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.1); }
.avail-false { opacity: 0.5; }
.avail-item .slot-name { color: white; font-weight: 600; }

.dynamic-info-tiny {
    background: rgba(255,255,255,0.03);
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.stream-feed .msg-pair {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 0.5rem;
}
.stream-feed .msg-pair:last-child { border-bottom: none; }
.msg-system { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 0.25rem; }
.msg-user { background: rgba(255,255,255,0.03); padding: 0.75rem; border-radius: 0 12px 12px 12px; border-left: 2px solid var(--accent-primary); }

.bg-warning-low { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); }
.text-accent { color: var(--accent-primary); }
.border-accent { border-color: var(--accent-primary) !important; }

.mb-4 { margin-bottom: 1rem !important; }

/* =========================================
   RECOVERY & COMPATIBILITY SHIMS
   Restoring functionality for Admin Hub & Login
   ========================================= */

/* 1. Missing KPI Cards (for Admin Hub) */
.kpi-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s;
    height: 100%;
    min-height: 140px;
}
.kpi-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.2); }
.kpi-value { font-size: 2.5rem; font-weight: 800; color: white; line-height: 1.1; margin-bottom: 0.5rem; }
.kpi-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.kpi-card.success .kpi-value { color: var(--accent-success); }
.kpi-card.warning .kpi-value { color: var(--accent-warning); }
.kpi-card.info .kpi-value { color: var(--accent-info); }

/* 2. Legacy Grid System Shim (Bootstrap-like for Admin Hub) */
.row { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
.col-md-3, .col-md-4, .col-md-2, .col-md-6, .col-md-8, .col-md-12 {
    padding-left: 1rem; padding-right: 1rem; box-sizing: border-box;
}
@media (min-width: 768px) {
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-2 { width: 16.6666%; }
    .col-md-6 { width: 50%; }
    .col-md-8 { width: 66.6666%; }
    .col-md-12 { width: 100%; }
}
@media (max-width: 767px) {
    .col-md-3, .col-md-4, .col-md-2, .col-md-6, .col-md-8 { width: 100%; margin-bottom: 1rem; }
    .row { margin-left: 0; margin-right: 0; width: 100%; }
}

/* 3. Bootstrap Compat Shims (For Legacy Templates) */
.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }
.ms-1 { margin-left: 0.25rem !important; }

.table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table th { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; }
.table td { padding: 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.table-hover tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.badge { padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; border-radius: 9999px; text-transform: uppercase; }
.bg-success { background-color: rgba(16, 185, 129, 0.2); color: #34d399; }
.bg-warning { background-color: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.bg-info { background-color: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.text-dark { color: inherit !important; } /* Override bootstrap dark text on warning badges */

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; font-weight: 600; transition: all 0.2s; font-size: 0.9rem; }
.btn-primary { background: var(--accent-primary); color: white; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4); color: white; }
.btn-secondary { background: var(--bg-surface); border: 1px solid var(--border-light); color: var(--text-secondary); }
.btn-outline-primary { border: 1px solid var(--accent-primary); color: var(--accent-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--accent-primary); color: white; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

.form-control { background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); color: white; padding: 0.75rem 1rem; border-radius: 12px; width: 100%; transition: all 0.2s; }
.form-control:focus { border-color: var(--accent-primary); outline: none; background: rgba(255,255,255,0.08); }
.form-select { background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); color: white; padding: 0.75rem 1rem; border-radius: 12px; width: 100%; }

/* 4. Login Page Recovery */
/* Force input background to be dark/glassy even if base overrides it */
.orkya-input-auth {
    background-color: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    backdrop-filter: blur(10px);
}
.orkya-input-auth:focus {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}
/* Placeholder lisible sur le fond sombre glass (contraste suffisant, distinct du
   texte saisi blanc). opacity:1 : Firefox baisse l'opacité des placeholders par defaut. */
.orkya-input-auth::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

/* Ensure glass panel works and has padding */
.glass-panel {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure Vivid Button is visible and premium */
.orkya-btn-magic-vivid {
    background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 50%, #06b6d4 100%) !important;
    color: white !important;
    border: none;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    font-weight: 700;
}
.orkya-btn-magic-vivid:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5);
}

/* Shadow Util */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
/* --- QUANTUM ACTION CARDS --- */
.action-grid-quantum {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.action-card-quantum {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.action-card-quantum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s;
}

.action-card-quantum:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.05);
}

.action-card-quantum:hover::before {
    opacity: 1;
}

.action-card-quantum .icon-orbit {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.action-card-quantum:hover .icon-orbit {
    transform: scale(1.1) rotate(5deg);
}

.action-card-quantum .card-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.action-card-quantum .card-content h4 {
    margin-bottom: 0.25rem;
    transition: color 0.3s;
}

.action-card-quantum .card-action-hint {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.action-card-quantum:hover .card-action-hint {
    color: var(--accent-primary);
    transform: translateX(4px);
}

/* ========================================
   MODALE DE COMPLÉTUDE DE PROFIL
   ======================================== */

/* Overlay de la modale */
.orkya-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-out;
}

/* Contenu de la modale */
.orkya-modal-content {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.95) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

/* Bouton de fermeture */
.orkya-close-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1);
}

/* Bouton primaire */
.orkya-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

/* Bouton secondaire */
.orkya-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === GLOBAL SCROLLBAR (CLAUDE.md Compliant - Dark/Violet) === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.7); }
* { scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.5) rgba(15, 23, 42, 0.3); }

/* Scrollbar stylisée pour la modale */
.orkya-modal-content::-webkit-scrollbar {
    width: 8px;
}

.orkya-modal-content::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
}

.orkya-modal-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.5);
    border-radius: 4px;
}

.orkya-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.7);
}

/* Firefox scrollbar */
.orkya-modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(15, 23, 42, 0.3);
}

/* ============================================
   PROFILE PAGE - Custom Classes (2026)
   ============================================ */

/* Orkya Textarea */
.orkya-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 0.875rem;
    border-radius: 1rem;
    padding: 1rem;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.orkya-textarea:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

.orkya-textarea:focus {
    outline: none;
    ring: 2px;
    ring-color: rgba(99, 102, 241, 0.5);
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(15, 23, 42, 0.8);
}

.orkya-textarea::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

/* Button Danger */
.btn-danger {
    padding: 0.75rem 1.5rem;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgb(252, 165, 165);
    border-radius: 1rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: rgb(254, 202, 202);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

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

/* Glass Panel Inner (for nested cards) */
.glass-panel-inner {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.glass-panel-inner:hover {
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Skill Card (custom) */
.skill-card {
    cursor: pointer;
    position: relative;
    display: block;
}

.skill-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skill-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.skill-card:hover .skill-card-content {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

.skill-card input:checked ~ .skill-card-content {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgb(129, 140, 248);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Animate Fade In Up */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out;
}

/* Alert Messages */
.alert-success {
    padding: 1rem 1.5rem;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 1rem;
    color: rgb(167, 243, 208);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-error {
    padding: 1rem 1.5rem;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 1rem;
    color: rgb(252, 165, 165);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-warning {
    padding: 1rem 1.5rem;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 1rem;
    color: rgb(253, 230, 138);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-info {
    padding: 1rem 1.5rem;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 1rem;
    color: rgb(191, 219, 254);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}



/* ========================================
   WIZARD & GENERATOR SYSTEM
   ======================================== */

.wizard-container { max-width: 1200px; margin: 0 auto; }
.wizard-step { background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2.5rem; margin-bottom: 2rem; position: relative; overflow: hidden; }
.wizard-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
.wizard-step-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.wizard-step-number { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; font-size: 1.5rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wizard-step-title { font-size: 1.5rem; font-weight: 800; color: white; margin: 0; }
.wizard-step-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.25rem; }
.phases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.phase-card { position: relative; background: var(--bg-card); border: 2px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.5rem; cursor: pointer; transition: all var(--transition-fast); }
.phase-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
.phase-card input[type="checkbox"] { position: absolute; top: 1rem; right: 1rem; width: 24px; height: 24px; accent-color: var(--accent-primary); cursor: pointer; }
.phase-card:has(input:checked) { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.1); }
.phase-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.phase-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.phase-icon.montage { background: rgba(245, 158, 11, 0.15); color: var(--accent-primary); }
.phase-icon.event { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary); }
.phase-icon.demontage { background: rgba(99, 102, 241, 0.15); color: var(--accent-info); }
.phase-title { font-size: 1.1rem; font-weight: 700; color: white; margin: 0; }
.phase-time { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.phase-meta { display: flex; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.phase-meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.phase-meta-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.phase-meta-value { font-size: 1.25rem; font-weight: 800; color: white; }
.poles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.pole-item { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.pole-item:hover { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.05); }
.pole-item:has(input:checked) { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.1); }
.pole-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-primary); cursor: pointer; }
.pole-info { flex: 1; }
.pole-name { font-weight: 700; font-size: 0.95rem; color: white; margin-bottom: 0.25rem; }
.pole-count { font-size: 0.75rem; color: var(--text-secondary); }
.pole-nb input { width: 60px; height: 36px; text-align: center; background: rgba(15, 23, 42, 0.5); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: white; font-weight: 700; }
.preview-section { background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: var(--radius-lg); padding: 2rem; margin-top: 2rem; }
.preview-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.preview-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.15); color: var(--accent-success); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.preview-title { font-size: 1.25rem; font-weight: 800; color: white; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.preview-stat { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.preview-stat-value { font-size: 2.5rem; font-weight: 900; color: var(--accent-success); line-height: 1; margin-bottom: 0.5rem; }
.preview-stat-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.info-box { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem; display: flex; gap: 1rem; }
.info-box-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(59, 130, 246, 0.2); color: var(--accent-info); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.info-box-content { flex: 1; }
.info-box-title { font-weight: 700; color: white; margin-bottom: 0.5rem; }
.info-box-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.warning-box { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
.warning-box .info-box-icon { background: rgba(245, 158, 11, 0.2); color: var(--accent-primary); }
.wizard-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-subtle); }
.btn-wizard-primary { padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: 0.75rem; }
.btn-wizard-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4); }
.btn-wizard-secondary { padding: 1rem 2rem; font-size: 1rem; font-weight: 600; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; }
.btn-wizard-secondary:hover { border-color: var(--accent-primary); color: white; }

/* ═══════ ASSIGN MODAL (Modale d'affectation bénévoles) ═══════ */
.assign-overlay {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(15, 23, 42, 0.92); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s ease;
}
.assign-overlay.open { opacity: 1; }

.assign-modal {
    width: 95vw; max-width: 1100px; height: 85vh; max-height: 85vh;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 24px;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    transform: scale(0.95); transition: transform 0.25s ease;
    overflow: hidden;
}
.assign-overlay.open .assign-modal { transform: scale(1); }

.assign-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.assign-header-info { flex: 1; min-width: 0; }
.assign-header-pole {
    font-size: 1.1rem; font-weight: 800; color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assign-header-time { font-size: 0.8rem; color: #94a3b8; margin-top: 0.15rem; }
.assign-header-gauge {
    display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
}
.assign-gauge-bar {
    width: 80px; height: 8px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.assign-gauge-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.assign-gauge-text { font-size: 0.9rem; font-weight: 900; min-width: 40px; text-align: center; }

.assign-nav-btn {
    width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8; font-size: 0.75rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.assign-nav-btn:hover:not(:disabled) { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }
.assign-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.assign-close-btn {
    width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted); font-size: 0.8rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.assign-close-btn:hover { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }

.assign-body {
    display: flex; flex: 1 1 0; overflow: hidden; min-height: 0; height: 0;
}

.assign-panel {
    overflow-y: auto; overflow-x: hidden;
    min-height: 0; height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(15, 23, 42, 0.3);
    padding: 0.75rem;
}
.assign-panel-right { padding: 0.75rem 1rem; flex: 1; }
.assign-panel::-webkit-scrollbar { width: 6px; }
.assign-panel::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); }
.assign-panel::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 3px; }

.assign-panel-left {
    flex: 0 0 280px; border-right: 1px solid rgba(255, 255, 255, 0.06);
}
/* assign-panel-right défini plus haut */

.assign-panel-title {
    font-size: 0.7rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.assign-panel-title .count {
    background: rgba(139, 92, 246, 0.2); color: #a78bfa;
    padding: 0.1rem 0.45rem; border-radius: 50px;
    font-size: 0.65rem; font-weight: 700;
}

.assign-team-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0; margin-top: 0.5rem;
    font-size: 0.72rem; font-weight: 700; color: #cbd5e1;
    cursor: pointer; user-select: none;
}
.assign-team-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

.assign-vol-row {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.4rem; border-radius: 10px;
    margin-bottom: 0.15rem; transition: background 0.15s;
    max-width: 100%; overflow: hidden;
}
.assign-vol-row:hover { background: rgba(139, 92, 246, 0.08); }

.assign-vol-avatar {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.assign-vol-info { flex: 1; min-width: 0; }
.assign-vol-name {
    font-size: 0.75rem; font-weight: 600; color: #e2e8f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assign-vol-meta {
    font-size: 0.6rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}

.assign-badge-late, .assign-badge-early {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.05rem 0.35rem; border-radius: 4px;
    font-size: 0.58rem; font-weight: 700;
}
.assign-badge-late { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.assign-badge-early { background: rgba(239, 68, 68, 0.12); color: #f87171; }

.assign-badge-team {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.05rem 0.35rem; border-radius: 4px;
    font-size: 0.58rem; font-weight: 700;
    background: rgba(139, 92, 246, 0.12); color: #a78bfa;
}

.assign-badge-conflict {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.05rem 0.35rem; border-radius: 4px;
    font-size: 0.58rem; font-weight: 700;
    background: rgba(239, 68, 68, 0.15); color: #f87171;
}

.assign-badge-dispo {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.assign-btn-add {
    padding: 0.2rem 0.55rem; border-radius: 50px;
    border: 1px solid rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.1);
    color: #34d399; font-size: 0.65rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.assign-btn-add:hover { background: rgba(52, 211, 153, 0.25); }

.assign-btn-remove {
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444; font-size: 0.55rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.assign-btn-remove:hover { background: rgba(239, 68, 68, 0.2); }

.assign-search {
    width: 100%; padding: 0.5rem 0.5rem 0.5rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px; color: #e2e8f0; font-size: 0.8rem;
    outline: none; box-sizing: border-box;
    transition: border-color 0.15s;
}
.assign-search:focus { border-color: rgba(139, 92, 246, 0.4); }

.assign-filter-row {
    display: flex; gap: 0.35rem; margin-bottom: 0.5rem;
}
.assign-filter-select {
    flex: 1; padding: 0.3rem 0.4rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px; color: #e2e8f0; font-size: 0.7rem; outline: none;
}

.assign-footer {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.assign-btn-action {
    padding: 0.5rem 1rem; border-radius: 12px;
    font-weight: 700; font-size: 0.78rem;
    cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid;
}
.assign-btn-autofill {
    background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); color: #a78bfa;
}
.assign-btn-autofill:hover { background: rgba(139, 92, 246, 0.2); }
.assign-btn-edit {
    background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); color: #60a5fa;
}
.assign-btn-edit:hover { background: rgba(96, 165, 250, 0.2); }
.assign-btn-delete {
    background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); color: #f87171; margin-left: auto;
}
.assign-btn-delete:hover { background: rgba(239, 68, 68, 0.15); }

.assign-empty {
    font-size: 0.82rem; color: var(--text-muted); font-style: italic;
    text-align: center; padding: 1.5rem 0;
}

.assign-error {
    text-align: center; padding: 1.5rem;
}
.assign-error-btn {
    margin-top: 0.5rem; padding: 0.4rem 1rem;
    background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px; color: #a78bfa; font-size: 0.75rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.assign-error-btn:hover { background: rgba(139, 92, 246, 0.25); }

/* Tabs */
.assign-tabs {
    display: flex; gap: 0.25rem; margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0.5rem;
}
.assign-tab {
    padding: 0.35rem 0.75rem; border-radius: 8px;
    font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
    border: 1px solid transparent; background: transparent;
    white-space: nowrap;
}
.assign-tab:hover { color: #a78bfa; background: rgba(139, 92, 246, 0.08); }
.assign-tab.active {
    color: #a78bfa; background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
}

/* Checkbox custom */
.assign-checkbox {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; appearance: none; -webkit-appearance: none;
}
.assign-checkbox:checked {
    background: rgba(139, 92, 246, 0.6);
    border-color: rgba(139, 92, 246, 0.8);
}
.assign-checkbox:checked::after {
    content: '✓'; font-size: 0.6rem; color: white; font-weight: 900;
}

/* Group section */
.assign-group-section {
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
    max-width: 100%;
}
.assign-group-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer; user-select: none;
    transition: background 0.15s;
}
.assign-group-header:hover { background: rgba(139, 92, 246, 0.06); }
.assign-group-name {
    font-size: 0.72rem; font-weight: 700; color: #cbd5e1;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assign-group-count {
    font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.4rem; border-radius: 50px;
    flex-shrink: 0;
}
.assign-group-count.all-dispo { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.assign-group-count.some-dispo { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.assign-group-count.none-dispo { color: #f87171; background: rgba(239, 68, 68, 0.1); }
.assign-group-body { padding: 0.2rem 0.4rem 0.4rem; }
.assign-group-chevron {
    font-size: 0.6rem; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0;
}
.assign-group-chevron.open { transform: rotate(90deg); }

.assign-group-actions {
    display: flex; gap: 0.35rem; padding: 0.3rem 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Disabled vol row */
.assign-vol-row.disabled {
    opacity: 0.35; pointer-events: none;
}
.assign-vol-row.unavailable {
    opacity: 0.5;
}
.assign-vol-row.unavailable .assign-btn-add { display: none; }
.assign-vol-row.unavailable .assign-checkbox { display: none; }

/* Selection footer bar */
.assign-btn-selection {
    padding: 0.5rem 1.2rem; border-radius: 12px;
    font-weight: 700; font-size: 0.82rem;
    cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: none;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(99, 102, 241, 0.8));
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.assign-btn-selection:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4); }
.assign-btn-selection:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Responsive */
@media (max-width: 768px) {
    .assign-modal { max-width: 100vw; max-height: 100vh; border-radius: 0; height: 100vh; }
    .assign-body { flex-direction: column; }
    .assign-panel-left { flex: none; max-height: 30vh; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .assign-panel-right { flex: 1; }
    .assign-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

/* =========================================================================
   PAYROLL CENTER — Flash indigo apres HTMX swap d'une ligne tech + pending
   ========================================================================= */

/* Item actif dans un dropdown statut : retour visuel discret, non cliquable */
.os-dropdown-item.active {
    background: rgba(99, 102, 241, 0.08);
    cursor: default;
    opacity: 0.75;
}

/* Badge cliquable (dropdown ligne tech, dropdown shift) : hover subtil */
.badge-os.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.badge-os.clickable:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

/* Animation flash indigo sur une ligne tech apres un swap OOB HTMX */
@keyframes payroll-row-flash {
    0%   { background-color: rgba(99, 102, 241, 0.25); }
    60%  { background-color: rgba(99, 102, 241, 0.10); }
    100% { background-color: transparent; }
}
.payroll-row-updated {
    animation: payroll-row-flash 900ms ease-out;
    border-radius: 0.75rem;
}

/* Etat "pending" pendant une requete HTMX (via hx-disabled-elt / indicator) */
.payroll-status-pending {
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* =========================================================================
   QR v2 — Bouton d'entrée sexy, panneau config, scanner, dashboard bénévole
   Tout dans orkyaos.css (pas de nouveau fichier, règle ORKYA)
   ========================================================================= */

/* ---- BOUTON D'ENTRÉE Premium (event_inscriptions.html header) ---- */
.qr-config-entry-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.22) 50%, rgba(6, 182, 212, 0.18) 100%),
        rgba(15, 23, 42, 0.6);
    background-size: 200% 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: qr-entry-gradient-shift 6s ease-in-out infinite;
}
@keyframes qr-entry-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.qr-config-entry-btn:hover {
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 12px 48px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
.qr-config-entry-btn:hover .qr-config-entry-chevron {
    transform: translateX(6px);
}
.qr-config-entry-btn:hover .qr-config-entry-shine {
    transform: translateX(200%);
}
.qr-config-entry-shine {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: transform 0.9s ease;
    pointer-events: none;
}
.qr-config-entry-icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.qr-config-entry-icon {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
}
.qr-config-entry-pulse {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(139, 92, 246, 0.4);
    animation: qr-entry-pulse 2.5s ease-out infinite;
    z-index: 1;
}
@keyframes qr-entry-pulse {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.45); opacity: 0; }
}
.qr-config-entry-text { flex: 1; min-width: 0; }
.qr-config-entry-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.2px;
    margin-bottom: 0.25rem;
}
.qr-config-entry-subtitle {
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 500;
}
.qr-config-entry-chevron {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- PANNEAU CONFIG ---- */
.qr-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.qr-stat {
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}
.qr-stat:hover { border-color: rgba(139, 92, 246, 0.3); }
.qr-stat-value {
    font-size: 1.85rem;
    font-weight: 900;
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.qr-stat-label {
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 0.2rem;
}
.qr-stat-label i { margin-right: 0.25rem; color: #a78bfa; }

.qr-v2-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(251, 191, 36, 0.25);
    backdrop-filter: blur(10px);
}
.qr-v2-banner.qr-v2-banner-success {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(16, 185, 129, 0.04));
    border-color: rgba(52, 211, 153, 0.25);
}
.qr-v2-banner-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.qr-v2-banner.qr-v2-banner-success .qr-v2-banner-icon {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}
.qr-v2-banner-title { font-weight: 800; color: #fff; font-size: 0.95rem; margin-bottom: 0.15rem; }
.qr-v2-banner-sub { font-size: 0.8rem; color: #94a3b8; }

.qr-config-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.55));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease;
}
.qr-config-card:hover { border-color: rgba(139, 92, 246, 0.2); }
.qr-config-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.qr-config-card-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.qr-icon-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.2)); color: #a5b4fc; }
.qr-icon-amber  { background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.2)); color: #fbbf24; }
.qr-icon-cyan   { background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(14,165,233,0.2)); color: #67e8f9; }
.qr-config-card-title { font-size: 1.05rem; font-weight: 800; color: #fff; }
.qr-config-card-sub   { font-size: 0.78rem; color: #94a3b8; margin-top: 0.15rem; }

/* Toggle premium */
.qr-toggle { display: inline-block; position: relative; cursor: pointer; }
.qr-toggle input { display: none; }
.qr-toggle-track {
    display: inline-flex;
    width: 48px; height: 26px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    position: relative;
    transition: background 0.25s ease;
}
.qr-toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.qr-toggle input:checked + .qr-toggle-track { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.qr-toggle input:checked + .qr-toggle-track .qr-toggle-thumb { transform: translateX(22px); }
.qr-toggle-sm .qr-toggle-track { width: 38px; height: 22px; }
.qr-toggle-sm .qr-toggle-thumb { width: 16px; height: 16px; }
.qr-toggle-sm input:checked + .qr-toggle-track .qr-toggle-thumb { transform: translateX(16px); }

/* Days grid */
.qr-days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.65rem;
}
.qr-day-chip {
    position: relative;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.qr-day-chip input { display: none; }
.qr-day-chip-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: capitalize;
}
.qr-day-chip-check {
    position: absolute;
    top: 6px; right: 6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #34d399);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
}
.qr-day-chip.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.14));
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}
.qr-day-chip.active .qr-day-chip-label { color: #fff; }
.qr-day-chip.active .qr-day-chip-check { display: flex; }
.qr-day-chip:hover { border-color: rgba(139, 92, 246, 0.35); }

/* Slots grid */
.qr-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}
.qr-slot-card {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}
.qr-slot-card.active {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04));
    border-color: rgba(251, 191, 36, 0.35);
}
.qr-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.qr-slot-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}
.qr-slot-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.qr-time-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.qr-time-field label {
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.qr-time-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
    color-scheme: dark;
}
.qr-time-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.qr-slot-times .qr-time-field:nth-child(3) { grid-column: span 2; }

/* Drinks */
.qr-drinks-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.qr-drinks-field { display: flex; flex-direction: column; gap: 0.4rem; }
.qr-drinks-field label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.qr-stepper {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.15rem;
}
.qr-stepper-btn {
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    color: #a5b4fc;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.qr-stepper-btn:hover { background: rgba(139, 92, 246, 0.15); }
.qr-stepper-value {
    min-width: 42px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    padding: 0 0.3rem;
}

/* Actions card */
.qr-config-actions-card { text-align: center; }
.qr-actions-row {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.qr-btn-primary, .qr-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.75rem;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.qr-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
    background-size: 200% 100%;
    color: #fff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.qr-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.55);
    background-position: 100% 0;
}
.qr-btn-primary:disabled { opacity: 0.6; cursor: wait; }
.qr-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.qr-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.qr-btn-secondary:disabled { opacity: 0.6; cursor: wait; }
.qr-saved-indicator {
    margin-top: 0.85rem;
    color: #34d399;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Toast QR */
.qr-toast {
    position: fixed;
    top: 1.5rem; right: 1.5rem;
    z-index: 9999;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.qr-toast-success {
    background: rgba(52, 211, 153, 0.92);
    color: #fff;
}
.qr-toast-error {
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
}

/* =========================================================================
   QR v2 — Scanner orga (layout normal avec sidebar, pas de fixed)
   Desktop : grid 2 cols (scanner à gauche, historique à droite)
   Mobile  : stacked (scanner puis historique en dessous)
   ========================================================================= */
.qr-scanner-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .qr-scanner-grid { grid-template-columns: 1fr; }
}

/* Zone caméra carrée */
.qr-scanner-preview-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    margin: 0 auto 1.5rem;
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.qr-scanner-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.qr-scanner-preview video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Cadre guide (visible quand caméra active) */
.qr-scanner-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 24px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 20, 0.45);
    pointer-events: none;
    z-index: 5;
}
.qr-scanner-guide::before,
.qr-scanner-guide::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
    box-shadow: 0 0 12px #6366f1;
    animation: qr-scan-line 3s ease-in-out infinite;
}
.qr-scanner-guide::before { top: 10%; animation-delay: 0s; }
.qr-scanner-guide::after { top: 10%; animation-delay: 1.5s; }
@keyframes qr-scan-line {
    0%, 100% { top: 10%; opacity: 0; }
    10%, 90% { opacity: 1; }
    50% { top: 88%; }
}

/* États idle / loading / erreur (par-dessus la zone caméra) */
.qr-scanner-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    text-align: center;
    padding: 1.5rem;
    z-index: 10;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(6px);
}

/* Sélecteur caméra (quand plusieurs dispo) */
.qr-camera-picker {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: left;
}
.qr-camera-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.qr-camera-chip {
    padding: 0.45rem 0.9rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qr-camera-chip:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}
.qr-camera-chip.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.18));
    border-color: rgba(139, 92, 246, 0.6);
    color: #fff;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25);
}

/* Saisie manuelle */
.qr-manual-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.25rem;
    margin-top: 1rem;
}
.qr-manual-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
}
.qr-manual-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    font-family: 'SFMono-Regular', ui-monospace, monospace;
    letter-spacing: 0.03em;
    transition: border-color 0.2s ease;
}
.qr-manual-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

/* Bottom sheet */
.qr-bottom-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(20px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 1.5rem;
    z-index: 200;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.qr-bottom-sheet.open { transform: translateY(0); }
.qr-bottom-sheet-handle {
    width: 40px; height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 1rem;
}
.qr-bs-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.qr-bs-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
    flex-shrink: 0;
    overflow: hidden;
}
.qr-bs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qr-bs-name {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}
.qr-bs-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.qr-bs-chips {
    display: flex;
    gap: 0.4rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.qr-bs-chip {
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 700;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.qr-bs-chip.chip-tshirt { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }
.qr-bs-chip.chip-allergie { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
.qr-bs-chip.chip-diet { background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.3); color: #fcd34d; }
.qr-bs-chip.chip-pole { background: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; }

/* Section "Alimentaire" (allergies + régime) — très visible pour le cuistot */
.qr-bs-food-alert {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(239, 68, 68, 0.05));
    border-color: rgba(251, 191, 36, 0.35);
}
.qr-bs-food-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}
.qr-bs-food-line i { font-size: 1rem; flex-shrink: 0; }
.qr-bs-food-diet {
    background: rgba(251, 191, 36, 0.12);
    color: #fcd34d;
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.qr-bs-food-allergy {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.qr-bs-section {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}
.qr-bs-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.qr-bs-shift-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
}
.qr-bs-shift-row:last-child { border-bottom: none; }
.qr-bs-shift-date { font-weight: 700; color: #cbd5e1; min-width: 80px; }
.qr-bs-shift-time { color: #a5b4fc; font-variant-numeric: tabular-nums; min-width: 90px; }
.qr-bs-shift-pole { color: #94a3b8; flex: 1; }

.qr-bs-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #34d399;
    text-decoration: none;
    font-weight: 700;
    padding: 0.5rem 1rem;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 10px;
    font-size: 0.85rem;
}

.qr-bs-action {
    width: 100%;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.qr-bs-action-ok {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #fff;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.qr-bs-action-ok:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(16, 185, 129, 0.55); }

.qr-bs-error-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(220, 38, 38, 0.12));
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    color: #fecaca;
}
.qr-bs-error-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #fca5a5;
    font-size: 1.75rem;
}
.qr-bs-error-title { font-size: 1.15rem; font-weight: 900; color: #fff; margin-bottom: 0.3rem; }
.qr-bs-error-msg { font-size: 0.9rem; color: #fecaca; }

/* =========================================================================
   QR v2 — Dashboard bénévole (my_tickets.html)
   ========================================================================= */
.qr-tickets-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}
.qr-tickets-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}
.qr-tickets-header h1 {
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.35rem;
}
.qr-tickets-header-sub {
    color: #cbd5e1;
    font-size: 0.88rem;
}
.qr-tickets-counter {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.4rem 1rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 100px;
    color: #a5b4fc;
    font-size: 0.82rem;
    font-weight: 800;
}

.qr-ticket-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.7));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.qr-ticket-card.qr-ticket-checkin {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
}
.qr-ticket-card.qr-ticket-consumed {
    opacity: 0.55;
}
.qr-ticket-card.qr-ticket-locked {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.12);
}
.qr-ticket-label {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.85rem;
    text-transform: capitalize;
}
.qr-ticket-svg-wrap {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.qr-ticket-svg-wrap svg { display: block; width: 220px; height: 220px; }
.qr-ticket-locked-overlay {
    width: 220px; height: 220px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #94a3b8;
    margin: 0 auto;
}
.qr-ticket-locked-overlay i { font-size: 2rem; color: #fbbf24; }
.qr-ticket-locked-overlay span { font-size: 0.85rem; font-weight: 700; }

.qr-ticket-status {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
}
.qr-ticket-status.available { color: #34d399; }
.qr-ticket-status.consumed  { color: var(--text-muted); }

.qr-tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.qr-tickets-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 1.5rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qr-tickets-section-title i { color: #a78bfa; }

.qr-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.3rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.qr-email-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

/* Scan history drawer */
.qr-scan-history {
    position: fixed;
    top: 0; right: 0;
    width: 340px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    overflow-y: auto;
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1rem;
}
.qr-scan-history.open { transform: translateX(0); }
.qr-scan-history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}
.qr-scan-history-item.ok { border-left: 3px solid #34d399; }
.qr-scan-history-item.refused { border-left: 3px solid #ef4444; }
.qr-history-undo {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.qr-history-undo:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fff;
    transform: scale(1.05);
}

/* =========================================================================
   QR tap-to-zoom (page volunteer event detail)
   ========================================================================= */
.qr-tap-zoom-btn {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    position: relative;
}
.qr-tap-zoom-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.3);
}
.qr-tap-zoom-btn canvas {
    display: block;
}
.qr-tap-zoom-hint {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
    letter-spacing: 0.3px;
}
.qr-tap-zoom-hint i { margin-right: 0.25rem; }

/* Overlay fullscreen */
.qr-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: pointer;
}
.qr-fullscreen-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
    cursor: default;
    position: relative;
}
.qr-fullscreen-close {
    position: absolute;
    top: -8px;
    right: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.qr-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}
.qr-fullscreen-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a5b4fc;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.qr-fullscreen-card {
    display: inline-block;
    padding: 24px;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 24px 80px rgba(99, 102, 241, 0.35);
}
.qr-fullscreen-card canvas {
    display: block;
    max-width: 85vw;
    max-height: 60vh;
    width: auto !important;
    height: auto !important;
}
.qr-fullscreen-name {
    margin-top: 1.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}
.qr-fullscreen-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
}
@media (max-width: 480px) {
    .qr-fullscreen-card { padding: 16px; border-radius: 24px; }
}

/* =========================================================================
   QR v2 — Bannière "Prochain shift" + cards "prochain ticket"
   Dashboard bénévole my_tickets.html refonte
   ========================================================================= */

/* Bannière shift en haut du dashboard */
.next-shift-banner {
    position: relative;
    margin: 0 auto 1.5rem;
    max-width: 680px;
    padding: 1.5rem 1.75rem;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.28) 50%, rgba(6, 182, 212, 0.22) 100%),
        rgba(15, 23, 42, 0.72);
    background-size: 200% 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.35);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25);
    text-align: center;
    overflow: hidden;
    animation: next-shift-gradient-shift 8s ease-in-out infinite;
}
@keyframes next-shift-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.next-shift-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c7d2fe;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.next-shift-pole {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.35rem;
    text-shadow: 0 2px 12px rgba(99, 102, 241, 0.5);
}
.next-shift-time {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
    font-weight: 600;
}
.next-shift-countdown {
    font-size: 2.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.next-shift-urgent {
    margin-top: 1rem;
    padding: 0.65rem 1.25rem;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 100px;
    color: #fcd34d;
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.next-shift-urgent i { color: #fcd34d; }

/* États de la bannière */
.next-shift-banner.state-en_cours {
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 12px 40px rgba(52, 211, 153, 0.3), 0 0 0 2px rgba(52, 211, 153, 0.2) inset;
}
.next-shift-banner.state-en_cours .next-shift-title { color: #6ee7b7; }
.next-shift-banner.state-en_cours .next-shift-countdown {
    background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.next-shift-banner.state-termine {
    opacity: 0.7;
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: none;
    animation: none;
    background: rgba(30, 41, 59, 0.5);
}
.next-shift-banner.state-termine .next-shift-countdown {
    background: none;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.next-shift-banner.state-aucun {
    opacity: 0.6;
    border-color: rgba(148, 163, 184, 0.25);
    animation: none;
    background: rgba(30, 41, 59, 0.4);
}
.next-shift-banner.state-aucun .next-shift-countdown {
    background: none;
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 600;
}
.next-shift-banner.state-aucun .next-shift-title {
    color: #94a3b8;
}

.next-shift-banner.state-imminent {
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3) inset, 0 12px 40px rgba(251, 191, 36, 0.35);
    animation: next-shift-imminent-pulse 1.5s ease-in-out infinite;
}
@keyframes next-shift-imminent-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35) inset, 0 12px 40px rgba(251, 191, 36, 0.35);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55) inset, 0 16px 50px rgba(251, 191, 36, 0.5);
    }
}
.next-shift-banner.state-imminent .next-shift-title { color: #fcd34d; }

/* Cards "prochain ticket" (repas / boisson / check-in) */
.qr-next-card {
    max-width: 580px;
    margin: 0 auto 1.25rem;
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.72));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    position: relative;
}
.qr-next-card.checkin {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12));
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
}
.qr-next-card.meal {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(245, 158, 11, 0.08));
    border-color: rgba(251, 191, 36, 0.35);
}
.qr-next-card.drink {
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.14), rgba(14, 165, 233, 0.08));
    border-color: rgba(6, 182, 212, 0.35);
}
.qr-next-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 0.4rem;
}
.qr-next-card.checkin .qr-next-title { color: #c7d2fe; }
.qr-next-card.meal .qr-next-title { color: #fcd34d; }
.qr-next-card.drink .qr-next-title { color: #67e8f9; }
.qr-next-title i { margin-right: 0.4rem; }
.qr-next-label {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.25rem;
    text-transform: capitalize;
}
.qr-next-counter {
    margin-top: 1.25rem;
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
}
.qr-next-finished {
    padding: 2rem 1rem;
}

/* Overlay QR verrouillé (floute + texte "ouvre dans X") */
.qr-ticket-svg-wrap.qr-locked,
.qr-ticket-svg-wrap-big.qr-locked {
    filter: blur(8px) grayscale(0.3);
    opacity: 0.55;
    transition: filter 0.3s ease;
}
.qr-locked-overlay {
    position: absolute;
    inset: 14px; /* inside the padding of qr-tap-zoom-btn */
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fcd34d;
    border-radius: 14px;
    pointer-events: none;
    text-align: center;
    padding: 0.5rem;
}
.qr-locked-overlay i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.qr-locked-overlay span {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    display: block;
}
.qr-locked-countdown {
    font-size: 0.78rem !important;
    color: #fcd34d !important;
    font-weight: 700 !important;
    margin-top: 0.25rem;
}

@media (max-width: 480px) {
    .next-shift-banner { padding: 1.25rem 1rem; border-radius: 20px; }
    .next-shift-pole { font-size: 1.6rem; }
    .next-shift-countdown { font-size: 1.85rem; }
    .qr-next-card { padding: 1.25rem 0.85rem 1.5rem; border-radius: 20px; }
    .qr-next-label { font-size: 1rem; }
}

/* =========================================================================
   VUE TV "AUJOURD'HUI" — PLANNING PRODUCTION PLEIN ECRAN FESTIVAL
   ========================================================================= */

/* Mode plein écran : masque tous les composants parasites et exploite 100% */
.orkya-layout.tv-fullscreen {
    min-height: 100vh;
}
.orkya-layout.tv-fullscreen .orkya-main {
    margin-left: 0;
    max-width: 100%;
    padding: 0;
}
.orkya-layout.tv-fullscreen #quick-notes-fab,
.orkya-layout.tv-fullscreen #ai-assistant-fab,
.orkya-layout.tv-fullscreen #voice-commands-fab,
.orkya-layout.tv-fullscreen #auto-scheduler-fab,
.orkya-layout.tv-fullscreen .quick-notes-fab,
.orkya-layout.tv-fullscreen .ai-assistant-container,
.orkya-layout.tv-fullscreen .voice-commands-container,
.orkya-layout.tv-fullscreen .auto-scheduler-container,
.orkya-layout.tv-fullscreen .mobile-only,
.orkya-layout.tv-fullscreen #sidebar-toggle {
    display: none !important;
}

/* Typographie fluide : lisible de près comme à 3m */
.tv-root {
    font-size: clamp(16px, 1.35vw, 26px);
    color: var(--text-primary);
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.08) 0%, transparent 50%), var(--bg-app);
    min-height: 100vh;
    padding: 2vh 2.5vw;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header : nom event + date + horloge + compteur */
.tv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    gap: 2rem;
    flex-wrap: wrap;
}
.tv-header-left { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.tv-event-name {
    font-size: 1.6em;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: var(--premium-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tv-today {
    font-size: 1em;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: capitalize;
}
.tv-header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.tv-clock {
    font-size: 2.6em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
}
.tv-counter {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.85rem 1.4rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
}
.tv-counter-num { font-size: 1.8em; font-weight: 800; color: var(--accent-success); font-variant-numeric: tabular-nums; }
.tv-counter-sep { font-size: 1.4em; color: var(--text-muted); margin: 0 0.1em; }
.tv-counter-label { font-size: 0.85em; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* Labels de section */
.tv-section-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    padding-left: 0.25rem;
    margin-bottom: 0.75rem;
}
.tv-section-live { color: var(--accent-success); }
.tv-live-dot {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    background: var(--accent-success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: tv-pulse 1.6s ease-out infinite;
}
@keyframes tv-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70%  { box-shadow: 0 0 0 1.2em rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Carte "EN COURS MAINTENANT" — grosse, bien visible */
.tv-now-section { display: flex; flex-direction: column; gap: 1rem; }
.tv-now-card {
    position: relative;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 2px solid rgba(16, 185, 129, 0.45);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35), var(--shadow-lg);
    backdrop-filter: blur(10px);
    animation: tv-card-pulse 2.4s ease-in-out infinite;
    overflow: hidden;
}
@keyframes tv-card-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35), var(--shadow-lg); }
    50%      { box-shadow: 0 0 0 0.6em rgba(16, 185, 129, 0.08), var(--shadow-lg); }
}
.tv-now-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 8px;
    background: var(--accent-success);
}
.tv-now-time {
    font-size: 2.4em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent-success);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.tv-now-time-sep { color: var(--text-muted); margin: 0 0.3em; font-weight: 500; }
.tv-now-title {
    font-size: 2em;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0.5rem 0 1rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.tv-now-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    align-items: center;
    font-size: 1em;
    color: var(--text-secondary);
}

/* Timeline des tâches à venir */
.tv-upcoming-section { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.tv-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.tv-task-item {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.1rem 1.5rem 1.1rem 1.75rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tv-task-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 6px;
    background: var(--accent-primary);
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}
.tv-task-time {
    font-size: 2em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    min-width: 3.2em;
    line-height: 1.2;
    display: flex;
    align-items: center;
}
.tv-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.35em; }
.tv-task-title {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}
.tv-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    font-size: 0.85em;
    color: var(--text-secondary);
}
.tv-meta-item { display: inline-flex; align-items: center; gap: 0.35em; }
.tv-meta-item i { opacity: 0.7; }
.tv-task-end { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Différentiation visuelle par statut sur les items "à venir" */
.tv-task-item.statut-TERMINE {
    opacity: 0.45;
    filter: saturate(0.6);
}
.tv-task-item.statut-TERMINE .tv-task-title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}
.tv-task-item.statut-TERMINE::before { background: #10b981 !important; opacity: 0.6; }

.tv-task-item.statut-ANNULE {
    opacity: 0.3;
    filter: grayscale(0.7);
}
.tv-task-item.statut-ANNULE .tv-task-title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(244, 63, 94, 0.6);
}
.tv-task-item.statut-ANNULE::before { background: #64748b !important; }

.tv-task-item.statut-BLOQUE {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, var(--glass-bg) 80%);
    border-color: rgba(244, 63, 94, 0.35);
}
.tv-task-item.statut-BLOQUE::before { background: #f43f5e !important; }

.tv-task-item.statut-EN_COURS {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--glass-bg) 80%);
    border-color: rgba(16, 185, 129, 0.35);
}

/* Badges statut inline dans le titre */
.tv-statut-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-left: 0.75em;
    padding: 0.15em 0.55em;
    border-radius: 999px;
    font-size: 0.55em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tv-statut-badge.is-done   { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.tv-statut-badge.is-cancel { background: rgba(100, 116, 139, 0.2); border-color: rgba(100, 116, 139, 0.45); color: #cbd5e1; }
.tv-statut-badge.is-block  { background: rgba(244, 63, 94, 0.18);  border-color: rgba(244, 63, 94, 0.45);  color: #fecdd3; }
.tv-statut-badge.is-prog   { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.45); color: #c7d2fe; }

/* Badge pôle (pill) */
.tv-pole-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}
.tv-pole-TECHNIQUE  { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.45); color: #c7d2fe; }
.tv-pole-LOGISTIQUE { background: rgba(6, 182, 212, 0.18);  border-color: rgba(6, 182, 212, 0.45);  color: #a5f3fc; }
.tv-pole-CATERING   { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.45); color: #fde68a; }
.tv-pole-COM        { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.45); color: #ddd6fe; }
.tv-pole-ADMIN      { background: rgba(148, 163, 184, 0.18);border-color: rgba(148, 163, 184, 0.45);color: #e2e8f0; }
.tv-pole-SECURITE   { background: rgba(244, 63, 94, 0.18);  border-color: rgba(244, 63, 94, 0.45);  color: #fecdd3; }
.tv-pole-AUTRE      { background: rgba(148, 163, 184, 0.15);border-color: rgba(148, 163, 184, 0.35);color: #cbd5e1; }

/* Bordure gauche accentuée par pôle sur les cartes */
.pole-accent-TECHNIQUE::before  { background: #6366f1; }
.pole-accent-LOGISTIQUE::before { background: #06b6d4; }
.pole-accent-CATERING::before   { background: #f59e0b; }
.pole-accent-COM::before        { background: #8b5cf6; }
.pole-accent-ADMIN::before      { background: #94a3b8; }
.pole-accent-SECURITE::before   { background: #f43f5e; }
.pole-accent-AUTRE::before      { background: #94a3b8; }

/* Etat vide */
.tv-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    gap: 1rem;
}
.tv-empty-icon { font-size: 6em; color: var(--accent-success); opacity: 0.9; }
.tv-empty-title { font-size: 2.4em; font-weight: 800; color: var(--text-primary); }
.tv-empty-sub   { font-size: 1.15em; color: var(--text-secondary); }

/* Bouton quitter (coin haut-droit) */
.tv-exit-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.6em;
    height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.1em;
    text-decoration: none;
    backdrop-filter: blur(10px);
    opacity: 0.35;
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
    z-index: 100;
}
.tv-exit-btn:hover {
    opacity: 1;
    color: var(--text-danger);
    transform: scale(1.08);
}

/* Badge "AUJOURD'HUI" dans le header TV */
.tv-today-badge {
    display: inline-block;
    margin-left: 0.75em;
    padding: 0.2em 0.7em;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 999px;
    color: var(--accent-success);
    font-size: 0.7em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    vertical-align: middle;
}

/* Barre des jours du festival (chips) */
.tv-days-bar {
    position: relative;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
.tv-day-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.5em;
    padding: 0.55em 0.85em;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: capitalize;
    line-height: 1.1;
    gap: 0.1em;
}
.tv-day-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
    transform: translateY(-2px);
}
.tv-day-chip-dow  { font-size: 0.7em; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.05em; }
.tv-day-chip-num  { font-size: 1.35em; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tv-day-chip-month{ font-size: 0.65em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }

/* Chip jour courant réel (pas forcément sélectionné) */
.tv-day-chip.is-today {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
}
.tv-day-chip.is-today .tv-day-chip-dow { color: var(--accent-primary); opacity: 1; }

/* Chip actif (jour sélectionné pour affichage) */
.tv-day-chip.is-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-color: rgba(99, 102, 241, 0.6);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.25);
    transform: translateY(-1px);
}
.tv-day-chip.is-active .tv-day-chip-num { color: #fff; }

/* Chip membre du cycle en cours */
.tv-day-chip.in-cycle {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.08);
}
.tv-day-chip.in-cycle .tv-day-chip-dow { color: var(--accent-success); }

/* Bloc Défilement (details natif) */
.tv-cycle-picker {
    margin-left: auto;
    position: relative;
}
.tv-cycle-picker > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.7em 1.1em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95em;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}
.tv-cycle-picker > summary::-webkit-details-marker { display: none; }
.tv-cycle-picker > summary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.tv-cycle-picker[open] > summary {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.45);
    color: var(--accent-success);
}
.tv-cycle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.45em;
    background: var(--accent-success);
    color: #0f172a;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 800;
}
.tv-cycle-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 22em;
    max-width: 32em;
    padding: 1.1rem 1.25rem;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
}
/* Ancrage stable : le picker lui-même reste au-dessus de ses frères */
.tv-cycle-picker[open] { z-index: 200; }
.tv-cycle-help {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
    line-height: 1.4;
}
.tv-cycle-form { display: flex; flex-direction: column; gap: 1rem; }
.tv-cycle-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
    gap: 0.5rem;
}
.tv-cycle-day-check {
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.55em 0.7em;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
}
.tv-cycle-day-check:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}
.tv-cycle-day-check input[type="checkbox"] {
    accent-color: var(--accent-success);
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
}
.tv-cycle-day-check:has(input:checked) {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
}
.tv-cycle-day-label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-transform: capitalize;
}
.tv-cycle-dow { font-size: 0.7em; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.tv-cycle-num { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.tv-cycle-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.tv-cycle-start-btn,
.tv-cycle-stop-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.7em 1em;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.tv-cycle-start-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
}
.tv-cycle-start-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.tv-cycle-stop-btn {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.4);
    color: #fecdd3;
}
.tv-cycle-stop-btn:hover {
    background: rgba(244, 63, 94, 0.2);
}

/* Banner indiquant que le défilement est actif */
.tv-cycle-banner {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-left: 4px solid var(--accent-success);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95em;
}
.tv-cycle-banner strong { color: var(--accent-success); }
.tv-spin { animation: tv-spin 2.4s linear infinite; }
@keyframes tv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Responsive : si écran très large (TV 4K), on étale un peu plus */
@media (min-width: 1800px) {
    .tv-root { font-size: clamp(20px, 1.15vw, 30px); padding: 2.5vh 3vw; gap: 2rem; }
    .tv-now-card { padding: 2.5rem 3rem; }
    .tv-day-chip { min-width: 5.5em; }
}
/* Si écran étroit (laptop de test) */
@media (max-width: 900px) {
    .tv-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .tv-header-right { width: 100%; justify-content: space-between; gap: 1rem; }
    .tv-clock { font-size: 2em; }
    .tv-now-card { padding: 1.5rem; }
    .tv-now-title { font-size: 1.5em; }
    .tv-now-time  { font-size: 1.8em; }
    .tv-task-time { font-size: 1.5em; min-width: 2.8em; }
    .tv-task-title { font-size: 1.05em; }
    .tv-cycle-picker { margin-left: 0; width: 100%; }
    .tv-cycle-picker > summary { width: 100%; justify-content: center; }
    .tv-cycle-panel { right: auto; left: 0; width: 100%; }
    .tv-days-bar { padding: 0.6rem; gap: 0.4rem; }
    .tv-day-chip { min-width: 3.8em; padding: 0.45em 0.6em; }
}

/* =========================================================================
   HOTFIX PERF — Bandeau "Affichage allégé" planning production standard
   ========================================================================= */
.perf-window-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-left: 4px solid var(--accent-warning);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    flex-wrap: wrap;
}
.perf-window-banner-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.perf-window-banner-text i.fa-bolt {
    color: var(--accent-warning);
    margin-right: 0.5em;
}
.perf-window-banner-text strong {
    color: var(--accent-warning);
}
.perf-window-banner-help {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.2em;
}
.perf-window-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.1em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.perf-window-banner-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Bouton export PDF par jour sur la timeline */
.timeline-date-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}
.timeline-date-export {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-left: 0.75rem;
    padding: 0.2em 0.65em;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fca5a5;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    vertical-align: middle;
}
.timeline-date-export:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
    transform: translateY(-1px);
}
.timeline-date-export i { font-size: 0.85em; }

/* Section "Effectuées" compacte en bas de la vue TV */
.tv-done-section {
    opacity: 0.6;
    margin-top: 0.5rem;
}
.tv-section-done {
    color: var(--text-muted);
}
.tv-done-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.4em;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 800;
    color: var(--accent-success);
    margin-left: 0.4em;
}
.tv-done-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tv-done-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.8em;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    flex-wrap: wrap;
}
.tv-done-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 6em;
    text-decoration: none;
    color: var(--text-secondary);
}
.tv-done-title {
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.tv-done-resp {
    font-size: 0.9em;
    text-decoration: none;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.tv-done-resp i { opacity: 0.6; }
.tv-pole-mini { font-size: 0.65em; text-decoration: none; }

/* =========================================================================
   VUE TV — Enrichissement cartes (priorité, description, contact, logistique,
   checklist) ajouté en itération 3
   ========================================================================= */

/* Badge de priorité dans le titre */
.tv-prio-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-left: 0.7em;
    padding: 0.18em 0.65em;
    border-radius: 999px;
    font-size: 0.55em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tv-prio-badge.is-haute {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fcd34d;
}
.tv-prio-badge.is-urgente {
    background: rgba(244, 63, 94, 0.22);
    border-color: rgba(244, 63, 94, 0.6);
    color: #fecdd3;
    animation: tv-prio-blink 1.4s ease-in-out infinite;
}
@keyframes tv-prio-blink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); background: rgba(244, 63, 94, 0.22); }
    50%      { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); background: rgba(244, 63, 94, 0.45); }
}

/* Bordure latérale renforcée pour les cartes URGENTE */
.tv-task-item.prio-URGENTE {
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.2), inset 4px 0 0 rgba(244, 63, 94, 0.6);
}
.tv-now-card.prio-URGENTE {
    border-color: rgba(244, 63, 94, 0.6);
    box-shadow: 0 0 24px rgba(244, 63, 94, 0.35), var(--shadow-lg);
}

/* Description (texte public sous le titre) */
.tv-task-desc {
    font-size: 0.95em;
    line-height: 1.45;
    color: var(--text-primary);
    opacity: 0.92;
    margin: 0.5em 0 0.4em;
    padding: 0.55em 0.8em;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 8px 8px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Notes internes (post-it style, plus sobre) */
.tv-task-notes {
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0.4em 0 0.5em;
    padding: 0.5em 0.75em;
    background: rgba(245, 158, 11, 0.07);
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.tv-task-notes i.fa-sticky-note {
    color: rgba(245, 158, 11, 0.85);
    margin-right: 0.4em;
    font-style: normal;
}

/* Rangée d'icônes logistique */
.tv-logistic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin-top: 0.55em;
    align-items: center;
}
.tv-logistic-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.7em;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    color: #a5f3fc;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tv-logistic-icon i { opacity: 0.85; }

/* Contact site (nom + tél) */
.tv-contact-site {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 0.55em;
    padding: 0.45em 0.85em;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    color: var(--text-primary);
}
.tv-contact-site i.fa-phone {
    color: var(--accent-primary);
}
.tv-contact-site strong {
    color: #c7d2fe;
}
.tv-contact-tel {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Avancement checklist */
.tv-checklist-progress {
    margin-top: 0.6em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    max-width: 26em;
}
.tv-checklist-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.82em;
    color: var(--text-secondary);
}
.tv-checklist-label i { opacity: 0.7; }
.tv-checklist-label strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.tv-checklist-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.tv-checklist-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-success) 0%, #34d399 100%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   QR Scanner unifié (orkya_qr_scanner.js + components/qr_scanner.html)
   États caméra, verrouillage strict, layout compact monitoring
   ========================================================================= */
.orkya-qr-scanner {
    display: block;
}
.orkya-qr-scanner--compact .qr-scanner-preview-wrap {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0 auto 1rem;
}
.qr-scanner-grid--compact {
    grid-template-columns: 1fr;
    gap: 0;
}

.qr-scanner-card {
    padding: 1.5rem;
    text-align: center;
}

/* Video natif (remplace html5-qrcode qui injectait son propre <video>) */
.qr-scanner-video {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    background: #000;
}

/* ── États visuels du wrap (bordure colorée selon state) ── */
.qr-scanner-preview-wrap.is-ready {
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.15);
}
.qr-scanner-preview-wrap.is-locked {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 20px 50px rgba(239, 68, 68, 0.2);
}
.qr-scanner-preview-wrap.is-error {
    border-color: rgba(239, 68, 68, 0.3);
}

/* Flash de feedback au moment du scan (ok vert / ko rouge) */
.qr-scanner-preview-wrap.flash-ok::after,
.qr-scanner-preview-wrap.flash-ko::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    animation: qr-flash 0.3s ease-out;
}
.qr-scanner-preview-wrap.flash-ok::after {
    background: rgba(16, 185, 129, 0.45);
}
.qr-scanner-preview-wrap.flash-ko::after {
    background: rgba(239, 68, 68, 0.45);
}
@keyframes qr-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Cadre verrouillé : rouge, sans scanline animée */
.qr-scanner-guide--locked {
    border-color: rgba(239, 68, 68, 0.75) !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 20, 0.65) !important;
}
.qr-scanner-guide--locked::before,
.qr-scanner-guide--locked::after {
    display: none;
}

/* Badge "Scan verrouillé" (discret, coin haut) */
.qr-scanner-lock-badge {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

/* Textes des états IDLE / PERMISSION / ERROR */
.qr-scanner-state-icon {
    font-size: 2rem;
    color: #a5b4fc;
    margin-bottom: 1rem;
}
.qr-scanner-state--error .qr-scanner-state-icon {
    color: #f87171;
}
.qr-scanner-state-title {
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.35rem;
}
.qr-scanner-state-msg {
    font-size: 0.85rem;
    color: #cbd5e1;
    max-width: 320px;
    margin-bottom: 0.6rem;
    line-height: 1.45;
}
.qr-scanner-state-tip {
    font-size: 0.78rem;
    color: #fcd34d;
    max-width: 320px;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Bouton full width (utilisé pour saisie manuelle) */
.qr-btn-full {
    width: 100%;
    margin-top: 0.75rem;
}

/* Chip caméra en état disabled (pendant un LOCK) */
.qr-camera-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.qr-camera-chip i {
    margin-right: 0.35rem;
}

/* ── Historique des scans (card + layout) ── */
.qr-history-card {
    display: flex;
    flex-direction: column;
}
.qr-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qr-history-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #e2e8f0;
}
.qr-history-icon {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.qr-history-refresh {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #cbd5e1;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.qr-history-refresh:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.qr-history-list {
    padding: 0.5rem 1rem 1rem;
    max-height: 600px;
    overflow-y: auto;
}
.qr-scan-history-body {
    flex: 1;
    min-width: 0;
}
.qr-scan-history-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qr-scan-history-meta {
    color: #94a3b8;
    font-size: 0.72rem;
}
.qr-history-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
}
.qr-history-empty i {
    font-size: 1.5rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 0.5rem;
}

/* ── Bottom sheet extensions (mode MEAL focus allergies + actions) ── */
.qr-bs-header-body {
    flex: 1;
    min-width: 0;
}
.qr-bs-section--meal {
    text-align: center;
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.3);
}
.qr-bs-section-title--meal {
    color: #34d399;
}
.qr-bs-meal-label {
    font-size: 1.4rem;
    font-weight: 900;
    color: #34d399;
    margin: 0.5rem 0;
}
.qr-bs-meal-remaining {
    color: #94a3b8;
    font-size: 0.85rem;
}
.qr-bs-food-line--xl {
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
}
.qr-bs-food-ok {
    text-align: center;
    background: rgba(52, 211, 153, 0.05);
    color: #94a3b8;
    font-size: 0.85rem;
}
.qr-bs-food-ok i {
    color: #34d399;
    margin-right: 0.35rem;
}
.qr-bs-phone--mb {
    margin-bottom: 0.5rem;
}
.qr-bs-phone--emergency {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.qr-bs-buddy {
    color: #a5b4fc;
    font-weight: 700;
    font-size: 0.95rem;
}
.qr-bs-notes {
    color: #cbd5e1;
    font-size: 0.85rem;
    white-space: pre-line;
    line-height: 1.5;
}

/* Actions (Scanner suivant + Annuler) sur une ligne */
.qr-bs-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.qr-bs-actions .qr-bs-action {
    margin-top: 0;
}
.qr-bs-action-ok {
    flex: 1;
}
.qr-bs-action-undo {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
}
.qr-bs-action-undo:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
    color: #fff;
}
.qr-bs-action-undo:disabled {
    opacity: 0.6;
    cursor: wait;
}
.qr-bs-action-retry {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    margin-top: 1rem;
    color: #fff;
}
.qr-bs-error-volunteer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(239, 68, 68, 0.25);
    font-size: 0.85rem;
    color: #fecaca;
}

/* Backdrop bottom sheet (tap outside pour fermer) */
.qr-bottom-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 180;
}

/* Panel de diagnostic (activé via ?debug=1 dans l'URL) */
.qr-debug-panel {
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-family: 'SFMono-Regular', ui-monospace, monospace;
    font-size: 0.78rem;
    color: #fde68a;
}
.qr-debug-title {
    font-weight: 900;
    color: #fbbf24;
    margin-bottom: 0.6rem;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.qr-debug-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed rgba(250, 204, 21, 0.15);
}
.qr-debug-row:last-child {
    border-bottom: none;
}
.qr-debug-row strong {
    color: #fef3c7;
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}
.qr-debug-row--event {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.qr-debug-row--event strong {
    text-align: left;
}
.qr-debug-ua {
    font-size: 0.7rem;
    color: #ca8a04;
    word-break: break-all;
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    border-top: 1px dashed rgba(250, 204, 21, 0.2);
}

/* Compteurs repas (meal_scan.html) */
.qr-meal-counters {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.qr-meal-counter {
    flex: 0 1 180px;
    text-align: center;
    padding: 1.25rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.qr-meal-counter-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: #a5b4fc;
    line-height: 1.1;
}
.qr-meal-counter-label {
    font-size: 0.78rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.3rem;
}

/* ═══════════════════════════════════════════════════
   EVENT BILANS — Bilans par evenement
   ═══════════════════════════════════════════════════ */

.event-bilans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}
.event-bilan-card {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.25rem;
}
.event-bilan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.event-bilan-name {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.event-bilan-dates {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.event-bilan-solde {
    font-size: 1.15rem;
    font-weight: 800;
    white-space: nowrap;
}
.event-bilan-solde--positive { color: #34d399; }
.event-bilan-solde--negative { color: #fb7185; }
.event-bilan-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.event-bilan-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.event-bilan-kpi-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}
.event-bilan-kpi-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.event-bilan-kpi--green { color: #34d399; }
.event-bilan-kpi--red { color: #fb7185; }
.event-bilan-actions {
    display: flex;
    gap: 0.5rem;
}
.event-bilan-actions .btn-action-glass {
    flex: 1;
    justify-content: center;
    font-size: 0.78rem;
}
@media (max-width: 768px) {
    .event-bilans-grid { grid-template-columns: 1fr; }
}

/* Event Bilan Detail */
.eb-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.eb-kpi {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.eb-kpi-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.eb-kpi-value { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.eb-kpi--green { color: #34d399; }
.eb-kpi--red { color: #fb7185; }
.eb-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.eb-section {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.eb-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border);
}
.eb-section-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); flex: 1; }
.eb-section-header i { font-size: 0.8rem; }
.eb-section-header--green i { color: #34d399; }
.eb-section-header--red i { color: #fb7185; }
.eb-section-total { font-size: 1rem; font-weight: 800; }
.eb-cat-group { border-bottom: 1px solid var(--glass-border); }
.eb-cat-group:last-child { border-bottom: none; }
.eb-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
}
.eb-cat-name { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.eb-cat-total { font-size: 0.85rem; font-weight: 700; }
.eb-tx-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.25rem 0.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}
.eb-tx-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.eb-tx-label { font-size: 0.8rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-tx-date { font-size: 0.68rem; color: var(--text-muted); }
.eb-tx-amount { font-size: 0.82rem; font-weight: 700; white-space: nowrap; margin-left: 1rem; }
.eb-empty { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
@media (max-width: 1024px) {
    .eb-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .eb-kpis { grid-template-columns: 1fr 1fr; }
    .eb-columns { grid-template-columns: 1fr; }
}

/* --- Event Bilan Detail : Actions top (boutons en haut) --- */
.eb-actions-top {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0.5rem 0 1.25rem 0;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .eb-actions-top {
        justify-content: stretch;
    }
    .eb-actions-top > button {
        flex: 1 1 auto;
        min-width: 140px;
    }
}

/* --- Event Bilan Detail : Drag-drop classification V1 --- */
.eb-cat-group--clickable {
    transition: background 0.15s ease, border-color 0.15s ease;
}
.eb-cat-group--clickable:hover {
    background: rgba(255,255,255,0.02);
}
.eb-cat-group--open {
    background: rgba(139,92,246,0.04);
}
.eb-cat-group--drag-ok {
    background: rgba(52, 211, 153, 0.18) !important;
    box-shadow: inset 0 0 0 2.5px #34d399, 0 6px 18px rgba(52, 211, 153, 0.20);
    transform: scale(1.005);
}
.eb-cat-group--drag-bad {
    background: rgba(251, 113, 133, 0.18) !important;
    box-shadow: inset 0 0 0 2.5px #fb7185, 0 6px 18px rgba(251, 113, 133, 0.20);
    cursor: not-allowed;
}
.eb-cat-chevron.is-open {
    transform: rotate(-180deg);
}
.eb-tx-list {
    background: rgba(15,23,42,0.35);
    border-top: 1px solid var(--glass-border);
    padding: 0.25rem 0;
}
.eb-tx-row--draggable {
    cursor: grab;
    transition: background 0.15s ease;
    user-select: none;
}
.eb-tx-row--draggable:hover {
    background: rgba(255,255,255,0.04);
}
.eb-tx-row--draggable:active {
    cursor: grabbing;
}
.eb-tx-loading,
.eb-tx-empty {
    padding: 1rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}
.eb-tx-loading i { margin-right: 0.5rem; }
.eb-columns--vent.is-dragging .eb-cat-group--clickable:not(.eb-cat-group--drag-ok):not(.eb-cat-group--drag-bad) {
    opacity: 0.8;
}

/* --- Cat manuellement ajoutee (vide, en attente de drop) --- */
.eb-cat-group--empty {
    border: 1.5px dashed rgba(148, 163, 184, 0.28);
    border-bottom: 1.5px dashed rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    margin: 0.4rem 0.6rem;
    background: rgba(148, 163, 184, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.eb-cat-group--empty:hover {
    background: rgba(148, 163, 184, 0.08);
}
.eb-cat-group--empty .eb-cat-header {
    background: transparent;
}
.eb-cat-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    border-radius: 6px;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s, background 0.2s;
}
.eb-cat-remove:hover {
    opacity: 1;
    color: var(--text-primary);
    background: rgba(251, 113, 133, 0.12);
}

/* --- Bouton + Ajouter une categorie --- */
.eb-add-cat {
    position: relative;
    margin: 0.6rem;
}
.eb-add-cat-btn {
    width: 100%;
    background: rgba(148, 163, 184, 0.06);
    border: 1.5px dashed rgba(148, 163, 184, 0.25);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.eb-add-cat-btn:hover {
    background: rgba(139, 92, 246, 0.10);
    border-color: rgba(139, 92, 246, 0.45);
    color: var(--text-primary);
}
.eb-add-cat-btn i {
    font-size: 0.7rem;
}
.eb-add-cat-panel {
    /* In-flow plutot qu'absolute pour eviter le clip par .app-card.eb-section
       qui a overflow:hidden. La liste pousse le contenu en dessous, ce qui est
       plus robuste qu'un popover flottant. */
    margin-top: 0.5rem;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.45rem;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.eb-add-cat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    transition: background 0.15s ease;
}
.eb-add-cat-item:hover {
    background: rgba(139, 92, 246, 0.12);
}
.eb-cat-icon--sm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.eb-add-cat-empty {
    padding: 0.85rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* --- Search dans les non-classees --- */
.eb-tx-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border);
    position: relative;
}
.eb-tx-search-icon {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.eb-tx-search-input {
    flex: 1 1 auto;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
}
.eb-tx-search-input::placeholder {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.eb-tx-search-input:focus {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.eb-tx-search-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.eb-tx-search-clear:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* --- Multi-select dans non-classees : checkbox + barre header --- */
.eb-tx-cb {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 0.65rem;
    cursor: pointer;
    accent-color: #8b5cf6;
}
.eb-tx-row--selected {
    background: rgba(139, 92, 246, 0.10);
    box-shadow: inset 3px 0 0 #8b5cf6;
}
.eb-tx-row--selected:hover {
    background: rgba(139, 92, 246, 0.16);
}
.eb-multi-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.78rem;
}
.eb-multi-select-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eb-multi-select-btn:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
    color: var(--text-primary);
}
.eb-multi-count {
    color: #a78bfa;
    font-weight: 600;
    margin-left: auto;
}
.eb-multi-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-decoration: underline;
}
.eb-multi-clear:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* --- Picker : input pour creer une cat custom --- */
.eb-add-cat-create {
    display: flex;
    gap: 0.4rem;
    padding: 0.35rem;
}
.eb-add-cat-input {
    flex: 1 1 auto;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.eb-add-cat-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}
.eb-add-cat-input:focus {
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.eb-add-cat-create-btn {
    background: rgba(139, 92, 246, 0.20);
    border: 1px solid rgba(139, 92, 246, 0.45);
    color: #c4b5fd;
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.eb-add-cat-create-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.32);
    color: #ddd6fe;
}
.eb-add-cat-create-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.eb-add-cat-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 0.25rem 0.35rem;
}
.eb-add-cat-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.5rem 0.2rem;
}
.eb-add-cat-search i {
    color: var(--text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.eb-add-cat-search input {
    flex: 1 1 auto;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    outline: none;
}
.eb-add-cat-search input:focus {
    border-color: rgba(139, 92, 246, 0.5);
}

/* --- Actions sur cat custom (edit + delete) en mode empty --- */
.eb-cat-actions-group {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
}
.eb-cat-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    margin-left: 0.15rem;
    font-size: 0.78rem;
    border-radius: 6px;
    opacity: 0.55;
    transition: opacity 0.2s, color 0.2s, background 0.2s;
}
.eb-cat-action:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}
.eb-cat-action--edit:hover {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.12);
}
.eb-cat-action--delete:hover {
    color: #fb7185;
    background: rgba(251, 113, 133, 0.12);
}

/* --- Indicateur de progression "X/Y classees · Z%" --- */
.eb-progression {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    margin: 0.5rem 0 1rem 0;
    transition: background 0.3s, border-color 0.3s;
}
.eb-progression--complete {
    background: rgba(52, 211, 153, 0.06);
    border-color: rgba(52, 211, 153, 0.20);
}
.eb-progression-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.eb-progression-icon {
    color: #a78bfa;
    font-size: 1rem;
    flex-shrink: 0;
}
.eb-progression--complete .eb-progression-icon { color: #34d399; }
.eb-progression-text {
    flex: 1 1 auto;
}
.eb-progression-text strong {
    color: var(--text-primary);
    font-weight: 700;
}
.eb-progression-pct {
    font-weight: 700;
    color: #c4b5fd;
    font-variant-numeric: tabular-nums;
}
.eb-progression--complete .eb-progression-pct { color: #34d399; }
.eb-progression-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.eb-progression-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.eb-progression--complete .eb-progression-bar-fill {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

/* --- Palette flottante de drop targets (visible pendant un drag) --- */
.eb-drop-palette {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    max-height: 80vh;
    background: rgba(15, 23, 42, 0.96);
    border: 1.5px solid rgba(139, 92, 246, 0.35);
    border-radius: 16px;
    padding: 0.55rem;
    z-index: 1000;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.10);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    animation: eb-drop-palette-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes eb-drop-palette-in {
    from { opacity: 0; transform: translateY(-50%) translateX(24px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.eb-drop-palette-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid var(--glass-border);
}
.eb-drop-palette-header i {
    color: #a78bfa;
}
.eb-drop-palette-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-right: 0.15rem;
}
.eb-drop-palette-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border-radius: 8px;
    cursor: copy;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
    user-select: none;
}
.eb-drop-palette-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.eb-drop-palette-item--hover {
    background: rgba(139, 92, 246, 0.20) !important;
    box-shadow: inset 0 0 0 1.5px rgba(139, 92, 246, 0.55);
    transform: scale(1.02);
}
.eb-drop-palette-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eb-drop-palette-item--unclassify {
    margin-top: 0.3rem;
    border-top: 1px dashed var(--glass-border);
    padding-top: 0.65rem;
    color: var(--text-muted);
}
.eb-drop-palette-item--unclassify.eb-drop-palette-item--hover {
    background: rgba(245, 158, 11, 0.18) !important;
    box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.55);
    color: var(--text-primary);
}
@media (max-width: 768px) {
    .eb-drop-palette {
        right: 0.5rem;
        width: 200px;
        font-size: 0.78rem;
    }
}

/* --- Bottom action bar quand selection multi > 0 --- */
.eb-action-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    background: rgba(15, 23, 42, 0.97);
    border: 1.5px solid rgba(139, 92, 246, 0.40);
    border-radius: 14px;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.12);
    backdrop-filter: blur(20px);
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-primary);
    font-size: 0.86rem;
}
.eb-action-bar-count {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.82rem;
}
.eb-action-bar-picker {
    position: relative;
}
.eb-action-bar-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eb-action-bar-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.eb-action-bar-btn--primary {
    background: rgba(139, 92, 246, 0.20);
    border-color: rgba(139, 92, 246, 0.50);
    color: #c4b5fd;
}
.eb-action-bar-btn--primary:hover {
    background: rgba(139, 92, 246, 0.32);
    color: #ddd6fe;
}
.eb-action-bar-btn--ghost {
    border-color: transparent;
    color: var(--text-muted);
}
.eb-action-bar-btn--ghost:hover {
    color: #fb7185;
    background: rgba(251, 113, 133, 0.10);
}
.eb-action-bar-panel {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.4rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 1095;
}
@media (max-width: 768px) {
    .eb-action-bar {
        left: 0.5rem;
        right: 0.5rem;
        font-size: 0.78rem;
        padding: 0.45rem 0.55rem;
        flex-wrap: wrap;
    }
    .eb-action-bar-panel { width: 100%; left: auto; right: 0; }
    /* Eviter que le toast Undo se superpose a l'action bar quand les deux
       sont visibles simultanement sur mobile (CodeRabbit minor 2026-05-10). */
    .eb-undo-toast {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 5.5rem;
        min-width: 0;
        max-width: none;
        transform: none;
    }
    @keyframes eb-fade-slide-in {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes eb-fade-slide-out {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(20px); }
    }
}

/* --- Modales custom confirm/prompt (remplacent window.confirm/prompt natifs) --- */
.eb-confirm-modal {
    background: rgba(15, 23, 42, 0.97);
    border: 1.5px solid rgba(139, 92, 246, 0.30);
    border-radius: 14px;
    padding: 1.25rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px);
    color: var(--text-primary);
}
.eb-confirm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}
.eb-confirm-modal-msg {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}
.eb-confirm-modal-detail {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
}
.eb-confirm-modal-input {
    margin-top: 0.4rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.eb-confirm-modal-input:focus {
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.eb-confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.eb-confirm-modal-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.eb-confirm-modal-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.eb-confirm-modal-btn--primary {
    background: rgba(139, 92, 246, 0.20);
    border-color: rgba(139, 92, 246, 0.50);
    color: #c4b5fd;
}
.eb-confirm-modal-btn--primary:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.32);
    color: #ddd6fe;
}
.eb-confirm-modal-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Toast Undo apres reclassement --- */
.eb-undo-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.97);
    border: 1.5px solid rgba(139, 92, 246, 0.4);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.12);
    backdrop-filter: blur(20px);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 320px;
    max-width: 600px;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.eb-undo-toast-icon {
    color: #34d399;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.eb-undo-toast-msg {
    flex: 1 1 auto;
    font-weight: 500;
}
.eb-undo-toast-btn {
    background: rgba(139, 92, 246, 0.20);
    border: 1px solid rgba(139, 92, 246, 0.45);
    color: #c4b5fd;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.eb-undo-toast-btn:hover {
    background: rgba(139, 92, 246, 0.32);
    color: #ddd6fe;
}
.eb-undo-toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: color 0.15s;
}
.eb-undo-toast-close:hover { color: var(--text-primary); }
.eb-fade-slide-in {
    animation: eb-fade-slide-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.eb-fade-slide-out {
    animation: eb-fade-slide-out 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes eb-fade-slide-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes eb-fade-slide-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* --- Event Bilan Detail : Tresorerie & Simulation --- */
.eb-tresor {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.04));
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.25rem;
}
.eb-tresor-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.eb-tresor-header h3 {
    margin: 0; color: #ede9fe; font-size: 1.05rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.eb-tresor-header h3 i { color: #a78bfa; }
.eb-tresor-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem; margin-bottom: 1rem;
}
.eb-stat {
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; padding: 0.75rem 1rem;
}
.eb-stat-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.eb-stat-value { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; margin-top: 0.2rem; }
.eb-stat-value.green { color: #34d399; }
.eb-stat-value.red { color: #fb7185; }
.eb-stat-value.warn { color: #fbbf24; }
.eb-coverage-bar {
    height: 14px; border-radius: 8px;
    background: rgba(244,63,94,0.15);
    overflow: hidden; position: relative;
    margin-bottom: 0.5rem;
}
.eb-coverage-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    transition: width 0.4s ease;
}
/* Légende SOUS la barre (avant : overlay dans une barre de 14px -> le texte
   long débordait et se faisait couper sur mobile). */
.eb-coverage-caption {
    font-size: 0.8rem; font-weight: 500; color: #cbd5e1;
    text-align: center; line-height: 1.4; margin-bottom: 1rem;
}
.eb-coverage-caption strong { color: #fff; font-weight: 800; }
.eb-sup {
    background: rgba(15,23,42,0.45);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    margin-bottom: 0.4rem;
    overflow: visible;
    transition: border-color 0.2s, background 0.2s;
}
.eb-sup[open] { border-color: rgba(139,92,246,0.3); background: rgba(15,23,42,0.6); }
.eb-sup.has-marked { border-color: rgba(52,211,153,0.4); background: rgba(16,185,129,0.05); }
.eb-sup-summary {
    display: grid;
    grid-template-columns: 22px 1.5fr 1fr 1fr 1fr auto auto;
    gap: 0.6rem; align-items: center;
    padding: 0.7rem 0.9rem;
    cursor: pointer; list-style: none;
}
.eb-sup-summary::-webkit-details-marker { display: none; }
.eb-sup-summary::marker { content: ""; }
.eb-sup-summary:hover { background: rgba(139,92,246,0.04); }
.eb-sup-chev { font-size: 0.7rem; color: #94a3b8; transition: transform 0.2s; }
.eb-sup[open] .eb-sup-chev { transform: rotate(90deg); color: #c4b5fd; }
.eb-sup-cb { accent-color: #10b981; width: 18px; height: 18px; cursor: pointer; }
.eb-sup-cb:hover { transform: scale(1.1); }
.eb-sup-detail {
    padding: 0.5rem 1rem 0.85rem 3.2rem;
    background: rgba(15,23,42,0.5);
    border-top: 1px solid rgba(139,92,246,0.15);
}
.eb-tx-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 0.5rem; align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s, opacity 0.2s;
}
.eb-tx-lock-btn {
    padding: 0.25rem 0.35rem; border-radius: 6px;
    background: transparent; border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    font-size: 0.7rem; line-height: 1;
}
.eb-tx-lock-btn:hover { color: #94a3b8; border-color: rgba(255,255,255,0.15); }
.eb-tx-lock-btn.locked {
    color: #fbbf24; border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.08);
}
.eb-tx-lock-btn.locked:hover { background: rgba(245,158,11,0.15); }
.eb-tx-line.is-locked { border-left: 2px solid rgba(245,158,11,0.4); }
.eb-tx-paid-btn {
    padding: 0.3rem 0.4rem; border-radius: 6px;
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
    color: #34d399; cursor: pointer; transition: all 0.15s;
    font-size: 0.75rem; line-height: 1;
}
.eb-tx-paid-btn:hover { background: rgba(16,185,129,0.2); transform: scale(1.1); }
.eb-tx-paid-btn:disabled { opacity: 0.4; cursor: wait; }

/* ── Payment Mode ── */
.eb-tx-payment-info {
    display: flex; align-items: center; gap: 0.5rem;
}
.eb-tx-payment-bar-wrap {
    display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 80px;
}
.eb-tx-payment-bar {
    flex: 1; height: 4px; border-radius: 99px;
    background: rgba(255,255,255,0.08); overflow: hidden;
}
.eb-tx-payment-fill {
    height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    transition: width 0.3s ease, background 0.3s ease;
}
.eb-tx-payment-label {
    font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
    min-width: 32px; text-align: right;
}
.eb-tx-rapprocher-btn {
    padding: 0.3rem 0.45rem; border-radius: 6px;
    background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25);
    color: #a5b4fc; cursor: pointer; transition: all 0.15s;
    font-size: 0.72rem; line-height: 1;
}
.eb-tx-rapprocher-btn:hover { background: rgba(99,102,241,0.25); transform: scale(1.1); }
.eb-pay-linked-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.7rem; margin-bottom: 0.3rem; border-radius: 8px;
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15);
}
.eb-tx-unlink-btn {
    padding: 0.2rem 0.35rem; border-radius: 4px;
    background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.2);
    color: #fb7185; cursor: pointer; transition: all 0.15s;
    font-size: 0.65rem; line-height: 1;
}
.eb-tx-unlink-btn:hover { background: rgba(244,63,94,0.25); }
.eb-pay-candidate {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.75rem; margin-bottom: 0.3rem; border-radius: 8px;
    background: rgba(15,23,42,0.4); border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.15s;
}
.eb-pay-candidate:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.2); }
.eb-pay-candidate:has(input:checked) {
    background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3);
}
.eb-pay-candidate input[type="checkbox"] {
    accent-color: #10b981; width: 16px; height: 16px; flex-shrink: 0;
}

.eb-tx-line:hover { background: rgba(139,92,246,0.06); }
.eb-tx-line.is-marked { background: rgba(16,185,129,0.07); }
.eb-tx-line.is-excluded { opacity: 0.35; }
.eb-tx-info .eb-tx-label-strong {
    font-size: 0.85rem; color: #e2e8f0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eb-tx-info .eb-tx-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }
.eb-tx-info a { color: inherit; text-decoration: none; }
.eb-tx-info a:hover .eb-tx-label-strong { color: #c4b5fd; }
.eb-tx-amounts {
    display: flex; flex-direction: column; align-items: flex-end;
    white-space: nowrap; gap: 1px;
}
.eb-tx-sim-amount { font-size: 0.85rem; font-weight: 700; color: #fbbf24; }
.eb-tx-line.is-marked .eb-tx-sim-amount { color: #34d399; }
.eb-tx-orig-amount { font-size: 0.65rem; color: var(--text-muted); }
.eb-tx-pct-input-wrap {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.3rem; border-radius: 6px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(255,255,255,0.08);
}
.eb-tx-pct-input {
    width: 50px; background: transparent; border: none; color: #e2e8f0;
    font-size: 0.78rem; text-align: right; outline: none;
    -moz-appearance: textfield;
}
.eb-tx-pct-input::-webkit-outer-spin-button,
.eb-tx-pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.eb-tx-pct-input:focus { background: rgba(139,92,246,0.1); }
.eb-tx-pct-input::placeholder { color: var(--text-muted); font-style: italic; }
.eb-tx-pct-suffix { font-size: 0.7rem; color: #94a3b8; }
.eb-supplier-name { color: #e2e8f0; font-weight: 600; font-size: 0.88rem; }
.eb-supplier-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.eb-supplier-due { font-size: 0.85rem; font-weight: 700; color: #fb7185; text-align: right; }
.eb-supplier-paid { font-size: 0.85rem; font-weight: 700; color: #34d399; text-align: right; }
.eb-supplier-prorata { font-size: 0.85rem; font-weight: 700; color: #a78bfa; text-align: right; }
.eb-supplier-pct {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    color: #c4b5fd; padding: 0.25rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
}
.eb-saving-toast {
    position: fixed; top: 80px; right: 20px; z-index: 9000;
    padding: 0.5rem 0.9rem; border-radius: 999px;
    background: rgba(15,23,42,0.96);
    font-size: 0.78rem; font-weight: 600;
    border: 1px solid rgba(6,182,212,0.3);
    opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.eb-saving-toast.show { opacity: 1; }
.eb-add-pending-btn {
    padding: 0.55rem 1.1rem; border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border: none;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: all 0.2s;
}
.eb-add-pending-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(139,92,246,0.4); }
.eb-row-btn {
    padding: 0.4rem 0.55rem; border-radius: 8px;
    background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
    color: #34d399; cursor: pointer; transition: all 0.15s; font-size: 0.85rem;
}
.eb-row-btn:hover { background: rgba(16,185,129,0.25); transform: scale(1.05); }
.eb-row-btn:disabled { opacity: 0.5; cursor: wait; }
.eb-modal {
    display: none; position: fixed; inset: 0;
    /* Meme voile que `.orkya-modal-backdrop` : l'app avait DEUX teintes de fond
       de modale (#020617 ici, #0f172a la-bas). Aligner les modales compta sur
       l'une aurait cree une divergence avec l'autre — on ramene donc tout a la
       teinte canonique, une seule valeur dans le projet. */
    background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);
    z-index: 9999; align-items: flex-start; justify-content: center;
    padding: 4rem 1rem; overflow-y: auto;
}
.eb-modal.visible { display: flex; }
.eb-modal-card {
    background: rgba(15,23,42,0.97);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 18px;
    max-width: 580px; width: 100%; overflow: hidden;
}
.eb-modal-header {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.06));
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.eb-modal-header h3 { margin: 0; color: #ede9fe; font-size: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.eb-modal-body { padding: 1.25rem 1.5rem; max-height: 60vh; overflow-y: auto; }
.eb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.eb-form-row.full { grid-template-columns: 1fr; }
.eb-form-row label { font-size: 0.74rem; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.eb-form-row input, .eb-form-row select {
    width: 100%; padding: 0.55rem 0.75rem; border-radius: 8px;
    background: rgba(15,23,42,0.6); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem;
}
.eb-form-row input:focus, .eb-form-row select:focus { outline: none; border-color: rgba(139,92,246,0.4); }
.eb-modal-footer {
    padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 0.5rem; justify-content: flex-end;
    background: rgba(15,23,42,0.6);
}
.eb-btn {
    padding: 0.55rem 1.2rem; border-radius: 10px;
    background: rgba(15,23,42,0.5); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.eb-btn.primary { background: linear-gradient(135deg, #10b981, #059669); border: none; color: #fff; }
.eb-btn.primary:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.4); transform: translateY(-1px); }
/* Selecteur % avec popover presets */
.eb-pct-selector { position: relative; }
.eb-pct-toggle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.5rem; border-radius: 6px;
    background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.eb-pct-toggle:hover { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.1); }
.eb-pct-popover {
    display: none; position: absolute; right: 0; bottom: 100%; margin-bottom: 6px;
    background: rgba(15,23,42,0.98); border: 1px solid rgba(139,92,246,0.3);
    border-radius: 10px; padding: 0.5rem; z-index: 9990;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5);
    min-width: 210px;
}
.eb-pct-popover.open { display: block; }
.eb-pct-presets {
    display: flex; gap: 0.3rem; margin-bottom: 0.4rem;
}
.eb-pct-presets button {
    flex: 1; padding: 0.35rem 0.2rem; border-radius: 6px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.72rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.eb-pct-presets button:hover { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.4); color: #c4b5fd; }
.eb-pct-custom {
    display: flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.3rem; border-radius: 6px;
    background: rgba(15,23,42,0.5); border: 1px solid rgba(255,255,255,0.06);
}

.eb-toggle-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem; border-radius: 999px;
    background: rgba(15,23,42,0.5); border: 1px solid rgba(255,255,255,0.08);
    color: #94a3b8; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; user-select: none;
}
.eb-toggle-chip:has(input:checked) {
    background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #34d399;
}
.eb-toggle-chip input { accent-color: #10b981; width: 14px; height: 14px; cursor: pointer; }

.eb-computed-field { background: rgba(15,23,42,0.3) !important; color: #94a3b8 !important; cursor: default; }
.eb-note-editor {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    margin-bottom: 1rem; overflow: hidden;
}
.eb-note-editor > summary {
    padding: 0.75rem 1.25rem; cursor: pointer;
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
    list-style: none;
}
.eb-note-editor > summary::-webkit-details-marker { display: none; }
.eb-note-editor > summary::marker { content: ""; }
.eb-note-editor > summary:hover { color: var(--text-primary); }
.eb-note-content {
    padding: 0 1.25rem 1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.eb-note-content textarea {
    width: 100%; min-height: 100px; padding: 0.75rem;
    background: rgba(15,23,42,0.5); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    font-size: 0.85rem; resize: vertical; font-family: inherit;
}
.eb-note-content textarea:focus { outline: none; border-color: rgba(139,92,246,0.4); }
.eb-note-content .eb-btn { align-self: flex-end; }
.eb-global-pct {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px; margin-bottom: 0.75rem; flex-wrap: wrap;
}
/* Slider custom (appearance:none) pour pouvoir dimensionner la poignée —
   cible tactile ≥28px en mobile (accent-color natif ne permet pas de la
   redimensionner). Track violet cohérent avec le design. */
.eb-global-pct input[type="range"] {
    flex: 1; min-width: 200px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 999px;
    background: rgba(139,92,246,0.28);
    outline: none;
}
.eb-global-pct input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #8b5cf6; border: 2px solid #0a0e1a; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.eb-global-pct input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #8b5cf6; border: 2px solid #0a0e1a; cursor: pointer;
}
.eb-global-pct input[type="range"]::-moz-range-track {
    height: 6px; border-radius: 999px; background: rgba(139,92,246,0.28);
}
.eb-global-pct input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(139,92,246,0.4); }
.eb-global-pct input[type="number"] {
    width: 70px; padding: 0.35rem 0.5rem; border-radius: 6px;
    background: rgba(15,23,42,0.7); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08); text-align: center;
}
/* Contraste : texte sombre sur le bouton vert « Appliquer » (blanc sur #10b981
   ≈ 2,5:1 → #0a0e1a ≈ 7:1). */
.eb-global-pct .eb-btn.primary { color: #0a0e1a; }

/* ── Toggle base de simulation : hints, réassurance, garde-fou ── */
.eb-sim-base-block { margin-bottom: 0.9rem; }
.eb-sim-base-block .eb-sim-base-toggle { margin-bottom: 0.5rem; }
/* Chip inactif : #94a3b8 (≈6,5:1) au lieu du muted trop pâle (≈3,3:1). */
.eb-sim-base-toggle .bilan-vent-toggle-chip { color: #94a3b8; }
.eb-sim-base-toggle .bilan-vent-toggle-chip:hover { color: #e2e8f0; }
.eb-sim-base-toggle.is-inert {
    opacity: 0.5;
    filter: grayscale(0.6);
}
.eb-sim-base-hint {
    margin: 0 0 0.25rem; font-size: 0.74rem; color: #94a3b8; line-height: 1.35;
}
.eb-sim-base-note {
    margin: 0 0 0.25rem; font-size: 0.72rem; color: #94a3b8; line-height: 1.35;
    display: flex; align-items: center; gap: 0.35rem;
}
.eb-sim-base-note i { color: #a5b4fc; }
.eb-sim-reassure {
    margin: 0; font-size: 0.72rem; color: #94a3b8; line-height: 1.35;
    display: flex; align-items: center; gap: 0.35rem;
}
.eb-sim-reassure i { color: #34d399; }

/* Badge « X € marqués » du fournisseur (recalculé live). */
.eb-sup-marked-total { color: #34d399; }

/* Pied : Σ Simulation, réconcilié avec « Solde après simulation ». */
.eb-sim-total-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
    margin-top: 0.85rem; padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: rgba(99,102,241,0.06);
    border: 1px dashed rgba(99,102,241,0.3);
}
.eb-sim-total-label {
    font-size: 0.75rem; font-weight: 700; color: #c4b5fd;
    text-transform: uppercase; letter-spacing: 0.4px;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.eb-sim-total-value { font-size: 0.82rem; color: #cbd5e1; }
.eb-sim-total-value strong { color: #a78bfa; font-weight: 800; }

/* Bouton « Annuler » dans le toast (undo du « Appliquer »). */
.eb-toast-undo {
    background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.5);
    color: #ddd6fe; border-radius: 8px; padding: 0.2rem 0.6rem; margin-left: 0.5rem;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.eb-toast-undo:hover { background: rgba(139,92,246,0.4); }

/* Mobile : cibles tactiles ≥44px + poignée slider ≥28px. */
@media (max-width: 480px) {
    .eb-tx-paid-btn, .eb-tx-paiement-btn, .eb-row-btn {
        min-height: 44px; min-width: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .eb-global-pct input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
    .eb-global-pct input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════
   AI USAGE DASHBOARD — Quotas IA
   ═════════════════════════════════════════��═════════ */

.ai-quota-card { flex-direction: column; padding: 1.5rem; }
.ai-quota-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.ai-quota-title { color: var(--text-primary); font-size: 1rem; font-weight: 600; margin: 0; }
.ai-quota-subtitle { color: var(--text-muted); font-size: 0.8rem; margin: 0.2rem 0 0; }
.ai-quota-number { text-align: right; }
.ai-quota-used { color: var(--text-primary); font-size: 1.4rem; font-weight: 700; }
.ai-quota-separator { color: var(--text-muted); font-size: 0.9rem; }
.ai-quota-bar {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
}
.ai-quota-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transition: width 0.5s ease;
}
.ai-quota-bar--warning .ai-quota-bar-fill,
.ai-quota-bar--warning { background: linear-gradient(90deg, #f59e0b, #f97316); }
.ai-quota-bar--danger .ai-quota-bar-fill,
.ai-quota-bar--danger { background: linear-gradient(90deg, #f43f5e, #ef4444); }
.ai-quota-detail {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.ai-section-title { color: var(--text-primary); font-size: 0.95rem; font-weight: 600; margin: 0 0 1rem; }
.ai-feature-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-feature-row { display: flex; align-items: center; gap: 0.75rem; }
.ai-feature-info { min-width: 180px; }
.ai-feature-name { display: block; color: var(--text-primary); font-size: 0.82rem; font-weight: 500; }
.ai-feature-tokens { font-size: 0.7rem; color: var(--text-muted); }
.ai-feature-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 100px;
    overflow: hidden;
}
.ai-feature-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 100px;
    min-width: 2px;
}
.ai-feature-percent { font-size: 0.72rem; color: var(--text-muted); min-width: 35px; text-align: right; }
.ai-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2rem 0; }
.ai-history-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.82rem;
}
.ai-history-month { color: var(--text-secondary); }
.ai-history-tokens { color: var(--text-primary); font-weight: 600; }

/* ══════════════════════════════��════════════════════
   DOSSIER COMPTABLE — Documents Hub
   ═══════════════════════════════════════════════════ */

.docs-filters-bar {
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.docs-type-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.docs-type-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 100px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.docs-type-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
.docs-type-tab--active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}
.docs-type-tab-label { white-space: nowrap; }
.docs-type-tab-count {
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 100px;
    min-width: 18px;
    text-align: center;
}
.docs-search-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.docs-search-input-wrap {
    flex: 1;
    position: relative;
}
.docs-search-input-wrap i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
}
.docs-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.6rem 1rem 0.6rem 2.2rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s;
}
.docs-search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
}
.docs-year-select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    min-width: 160px;
}

/* Sections par mois */
.docs-month-section {
    margin-bottom: 1.75rem;
}
.docs-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}
.docs-month-date {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
    text-transform: capitalize;
}
.docs-month-date i { color: var(--accent-primary); font-size: 0.9rem; }
.docs-month-badge {
    font-size: 0.72rem;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    font-weight: 600;
}

/* Grille de cartes documents */
.docs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.docs-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.docs-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Badge type sur la carte */
.docs-card-type-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    backdrop-filter: blur(8px);
}
.docs-card-type-badge--facture_achat {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.2);
}
.docs-card-type-badge--facture_vente {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.docs-card-type-badge--devis {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.2);
}
.docs-card-type-badge--cerfa {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.2);
}
.docs-card-type-badge--justificatif {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Apercu fichier dans la carte */
.docs-card-preview {
    height: 120px;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.docs-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.docs-card-preview-icon {
    color: var(--text-muted);
    font-size: 2rem;
    opacity: 0.4;
}

/* Infos en bas de carte */
.docs-card-info {
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.docs-card-supplier {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.docs-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.docs-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.3rem;
}
.docs-card-amount {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fb7185;
}
.docs-card-amount--income {
    color: #34d399;
}
.docs-card-ref {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}
.docs-card-event {
    font-size: 0.68rem;
    color: #a5b4fc;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
}
.docs-card-event i {
    font-size: 0.6rem;
    opacity: 0.7;
}

/* Etat vide */
.docs-empty {
    flex-direction: column;
    align-items: center;
    padding: 5rem 2rem;
    text-align: center;
    gap: 0.5rem;
}
.docs-empty i {
    font-size: 2.5rem;
    color: var(--text-muted);
    opacity: 0.25;
    margin-bottom: 0.5rem;
}
.docs-empty h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.docs-empty p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    max-width: 320px;
}
.docs-empty-btn {
    margin-top: 1rem;
    padding: 0.7rem 1.5rem;
    border-radius: 100px;
    font-weight: 600;
    gap: 0.5rem;
}

/* Preview panel (memes styles qu'avant, consolides) */
.docs-preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
}
.docs-preview-overlay.open { display: block; }
.docs-preview-panel {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 480px;
    max-width: 90vw;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
    z-index: 1000;
    overflow-y: auto;
    animation: docsSlideIn 0.3s ease-out;
}
.docs-preview-panel.open { display: block; }
@keyframes docsSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.docs-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    font-weight: 600;
    color: var(--text-primary);
}
.docs-preview-content { padding: 1.5rem; }
.docs-preview-file {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    max-height: 450px;
    object-fit: contain;
    background: rgba(10, 15, 30, 0.5);
}
.docs-preview-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.docs-preview-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.docs-preview-meta-item label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}
.docs-preview-meta-item span {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}
.docs-preview-panel::-webkit-scrollbar { width: 5px; }
.docs-preview-panel::-webkit-scrollbar-track { background: transparent; }
.docs-preview-panel::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 5px; }

/* Panel edition — sections */
.docs-edit-section {
    margin-bottom: 1.25rem;
}
.docs-edit-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.45rem;
}
.docs-edit-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.docs-edit-pill {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
}
.docs-edit-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
.docs-edit-pill--active.docs-edit-pill--facture_achat {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fb7185;
}
.docs-edit-pill--active.docs-edit-pill--facture_vente {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.docs-edit-pill--active.docs-edit-pill--devis {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}
.docs-edit-pill--active.docs-edit-pill--cerfa {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}
.docs-edit-pill--active.docs-edit-pill--justificatif {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* Panel edition — champs */
.docs-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.docs-edit-field {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.docs-edit-row {
    display: flex;
    gap: 0.75rem;
}
.docs-edit-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s;
    width: 100%;
}
.docs-edit-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.12);
}
.docs-edit-input::placeholder {
    color: var(--text-muted);
}
.docs-edit-input option {
    background: #1e293b;
    color: var(--text-primary);
}

/* Panel edition — actions */
.docs-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.docs-btn-delete {
    color: var(--text-muted);
    justify-content: center;
}
.docs-btn-delete:hover {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fb7185;
}

@media (max-width: 768px) {
    .docs-cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .docs-type-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
    .docs-search-row { flex-direction: column; }
    .docs-year-select { min-width: 100%; }
    .docs-preview-panel { width: 100%; }
}

/* ═══════════════════════════════════════════════════
   ORKOS AGENTS — Chat IA
   ═══════════════════════════════════════════════════ */

/* Hub — Grille de selection des agents */
.agent-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.agent-hub-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.agent-hub-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.agent-hub-card--locked {
    opacity: 0.45;
    cursor: default;
}
.agent-hub-card--locked:hover {
    transform: none;
    box-shadow: none;
    background: var(--glass-bg);
}
.agent-hub-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.agent-hub-card-title {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
.agent-hub-card-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}
.agent-hub-badge-soon,
.agent-hub-badge-active {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}
.agent-hub-badge-soon {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.agent-hub-badge-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Layout chat — sidebar + zone principale */
.agent-layout {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 220px);
    min-height: 500px;
}
.agent-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.agent-sidebar-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    margin: 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    color: #a5b4fc;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.agent-sidebar-new:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.35);
}
.agent-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem;
}
.agent-sidebar-list::-webkit-scrollbar { width: 4px; }
.agent-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.agent-sidebar-list::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 4px; }
.agent-sidebar-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    padding: 2rem 1rem;
}
.agent-conv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 2px;
}
.agent-conv-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.agent-conv-item--active {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid var(--accent-primary);
}
.agent-conv-title {
    color: var(--text-secondary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.agent-conv-item--active .agent-conv-title {
    color: var(--text-primary);
}
.agent-conv-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.7rem;
    transition: all 0.15s;
}
.agent-conv-item:hover .agent-conv-delete { opacity: 1; }
.agent-conv-delete:hover { color: var(--text-danger); }

/* Zone chat principale */
.agent-chat-area {
    flex: 1;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Zone messages */
.agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.agent-messages::-webkit-scrollbar { width: 5px; }
.agent-messages::-webkit-scrollbar-track { background: transparent; }
.agent-messages::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.25); border-radius: 5px; }

/* Welcome screen */
.agent-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem;
}
.agent-welcome-icon {
    font-size: 3rem;
    opacity: 0.6;
}
.agent-welcome h2 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}
.agent-welcome p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    max-width: 400px;
}
.agent-welcome-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}
.agent-hint-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.agent-hint-chip:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--text-primary);
}

/* Message bulle */
.agent-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
}
.agent-message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.agent-message--assistant {
    align-self: flex-start;
}
.agent-message-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.agent-message--user .agent-message-avatar {
    background: rgba(99, 102, 241, 0.2);
    color: #c4b5fd;
}
.agent-message-bubble {
    border-radius: 16px;
    padding: 0.85rem 1.1rem;
    line-height: 1.55;
}
.agent-message--user .agent-message-bubble {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.2);
}
.agent-message--assistant .agent-message-bubble {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
}
.agent-message-content {
    color: var(--text-primary);
    font-size: 0.9rem;
    word-wrap: break-word;
}
.agent-message-content code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', monospace;
}
.agent-message-content pre {
    background: rgba(0, 0, 0, 0.35);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.agent-message-content pre code {
    background: none;
    padding: 0;
}
.agent-message-content strong { color: #e2e8f0; }
.agent-message-content ul { padding-left: 1.25rem; margin: 0.5rem 0; }
.agent-message-content li { margin-bottom: 0.25rem; }
.agent-message-file {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Tool summary (discret) */
.agent-tool-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.6;
}
.agent-tool-summary i { font-size: 0.65rem; }
.agent-tool-summary--loading {
    color: #a5b4fc;
    opacity: 0.8;
}

/* Boutons dynamiques generes par l'agent */
.agent-dynamic-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.agent-dbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.agent-dbtn:hover { transform: translateY(-1px); }
.agent-dbtn--yes {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.25);
    color: #34d399;
}
.agent-dbtn--yes:hover { background: rgba(16, 185, 129, 0.25); }
.agent-dbtn--no {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--glass-border);
    color: var(--text-secondary);
}
.agent-dbtn--no:hover { background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.2); color: #fb7185; }
.agent-dbtn--modify {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}
.agent-dbtn--modify:hover { background: rgba(245, 158, 11, 0.2); }
.agent-dbtn--event {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}
.agent-dbtn--event:hover { background: rgba(99, 102, 241, 0.2); }
.agent-dbtn--info {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}
.agent-dbtn--info:hover { background: rgba(14, 165, 233, 0.2); }

/* Typing indicator */
.agent-typing {
    display: flex;
    gap: 4px;
    padding: 0.25rem 0;
}
.agent-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: agentBounce 1.4s infinite ease-in-out;
}
.agent-typing span:nth-child(1) { animation-delay: 0s; }
.agent-typing span:nth-child(2) { animation-delay: 0.2s; }
.agent-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes agentBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Barre d'input */
.agent-input-bar {
    border-top: 1px solid var(--glass-border);
    padding: 0.75rem 1rem;
}
.agent-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    position: relative;
}
.agent-input-textarea {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.7rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: none;
    outline: none;
    transition: all 0.2s;
    max-height: 150px;
    font-family: inherit;
}
.agent-input-textarea:focus {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
}
.agent-input-textarea::placeholder {
    color: var(--text-muted);
}
.agent-btn-send,
.agent-btn-upload,
.agent-btn-voice {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}
.agent-btn-send {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.agent-btn-send:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}
.agent-btn-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.agent-btn-upload,
.agent-btn-voice {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}
.agent-btn-upload:hover,
.agent-btn-voice:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.agent-btn-voice--active {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
    color: var(--text-danger);
    animation: agentPulse 1.5s infinite;
}
@keyframes agentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
}

/* File preview */
.agent-file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    font-size: 0.8rem;
    color: #a5b4fc;
}
.agent-file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem;
    margin-left: auto;
}
.agent-file-remove:hover { color: var(--text-danger); }

/* Dropzone overlay */
.agent-dropzone {
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.1);
    border: 2px dashed rgba(99, 102, 241, 0.4);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #a5b4fc;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 10;
    backdrop-filter: blur(4px);
}

/* Responsive mobile */
@media (max-width: 768px) {
    .agent-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 180px);
    }
    .agent-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 200px;
    }
    .agent-chat-area {
        flex: 1;
        min-height: 400px;
    }
    .agent-message {
        max-width: 95%;
    }
    .agent-hub-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   SCENARIO TARGETS BAR — Toolbar multi-selection des plans (calculatrice budget)
   ============================================================================= */
.scenario-targets-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.85rem 1.2rem;
    margin-bottom: 1.25rem;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
}
.scenario-targets-bar .targets-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #cbd5e1;
    font-size: 0.85rem;
}
.scenario-targets-bar .targets-label i { color: #a5b4fc; }
.scenario-targets-bar .target-chip {
    --chip-color: #6366f1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    color: #cbd5e1;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.scenario-targets-bar .target-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.scenario-targets-bar .target-chip.active {
    background: color-mix(in srgb, var(--chip-color) 18%, transparent);
    border-color: var(--chip-color);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--chip-color), 0 4px 12px color-mix(in srgb, var(--chip-color) 30%, transparent);
}
.scenario-targets-bar .target-chip input[type="checkbox"] {
    accent-color: var(--chip-color);
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
}
.scenario-targets-bar .targets-help {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    padding: 0.3rem 0.65rem;
    color: #fbbf24;
    font-size: 0.78rem;
    background: rgba(251, 191, 36, 0.08);
    border-radius: 8px;
}
.scenario-targets-bar .targets-help i { font-size: 0.85rem; }
.scenario-targets-bar .targets-current {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.78rem;
}
.scenario-targets-bar .targets-current strong { color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════
   QG (Quartier General) — Command Center Styles
   ═══════════════════════════════════════════════════════ */

/* Stats row */
.qg-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.qg-stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}
.qg-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.qg-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.qg-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.qg-stat-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

/* Layout 2 colonnes */
.qg-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .qg-layout { grid-template-columns: 1fr; }
}

.qg-column { min-width: 0; }
.qg-column-main { grid-column: 1; }
.qg-column-side { grid-column: 2; }
@media (max-width: 900px) {
    .qg-column-main, .qg-column-side { grid-column: 1; }
}

/* Section headers */
.qg-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.qg-section-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qg-section-title i {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Agent cards QG */
.qg-agents-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.qg-agent-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.qg-agent-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}
.qg-agent-card--locked {
    opacity: 0.45;
    cursor: default;
}
.qg-agent-card--locked:hover {
    transform: none;
    background: var(--glass-bg);
}
.qg-agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.qg-agent-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}
.qg-agent-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.15rem;
    line-height: 1.3;
}
.qg-agent-badge-soon,
.qg-agent-badge-active {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
}
.qg-agent-badge-soon {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.qg-agent-badge-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Project list (dashboard) */
.qg-projects-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.qg-project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    gap: 1rem;
}
.qg-project-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.qg-project-row-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.qg-project-row-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.qg-project-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qg-project-meta {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

/* Status dots */
.qg-project-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.qg-dot-draft { background: #64748b; }
.qg-dot-active { background: #34d399; }
.qg-dot-on_hold { background: #fbbf24; }
.qg-dot-completed { background: #818cf8; }
.qg-dot-cancelled { background: #f87171; }

/* Status pills */
.qg-project-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.qg-project-status-pill.qg-status-draft {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}
.qg-project-status-pill.qg-status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.qg-project-status-pill.qg-status-on_hold {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
.qg-project-status-pill.qg-status-completed {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}
.qg-project-status-pill.qg-status-cancelled {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Priority */
.qg-priority-low { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.qg-priority-normal { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.qg-priority-high { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.qg-priority-urgent { background: rgba(239, 68, 68, 0.15); color: #f87171; }

/* Tags */
.qg-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.15);
    white-space: nowrap;
}
.qg-tag-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.2);
}

/* Empty state */
.qg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-secondary);
    text-align: center;
}
.qg-empty-state i { margin-bottom: 0.75rem; opacity: 0.4; }
.qg-empty-state p { margin: 0; font-size: 0.9rem; }

/* Budget summary */
.qg-budget-summary { padding: 1.25rem; }
.qg-budget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.qg-budget-row:last-child { border-bottom: none; }
.qg-budget-val {
    color: var(--text-primary);
    font-weight: 600;
}

/* Projects grid (list page) */
.qg-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.qg-project-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.qg-project-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.qg-project-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qg-project-type-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
}
.qg-project-card-title {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
.qg-project-card-client {
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.qg-project-card-client i { font-size: 0.7rem; }
.qg-project-card-desc {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0;
}
.qg-project-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Filters */
.qg-filters { margin-bottom: 1rem; }
.qg-filters-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.qg-filters-panel {
    padding: 1rem;
    margin-top: 0.75rem;
}
.qg-filters-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.qg-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.qg-filter-group label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Detail page */
.qg-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.qg-detail-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.qg-detail-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qg-detail-section {
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.qg-detail-section-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qg-detail-section-title i { opacity: 0.5; font-size: 0.8rem; }
.qg-detail-text {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}
.qg-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .qg-detail-grid { grid-template-columns: 1fr; }
}
.qg-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.qg-detail-label {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.qg-detail-value {
    color: var(--text-primary);
    font-size: 0.9rem;
}
.qg-text-danger { color: #f87171 !important; }

/* Notes */
.qg-note-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.qg-note-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
}
.qg-note-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.qg-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.qg-note-item {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.85rem;
}
.qg-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.qg-note-author {
    color: var(--accent-primary);
    font-size: 0.78rem;
    font-weight: 600;
}
.qg-note-date {
    color: var(--text-secondary);
    font-size: 0.7rem;
}
.qg-note-content {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Form */
.qg-form-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .qg-form-layout { grid-template-columns: 1fr; }
}
.qg-form-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.qg-form-section { padding: 1.25rem; }
.qg-field { margin-bottom: 0.85rem; }
.qg-field label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.qg-field-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .qg-field-row { grid-template-columns: 1fr; }
}
.qg-input,
.qg-select,
.qg-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.qg-input:focus,
.qg-select:focus,
.qg-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.qg-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}
.qg-select option {
    background: #1e293b;
    color: var(--text-primary);
}
.qg-textarea { resize: vertical; }
.qg-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

/* Buttons variants */
.btn-danger-glass {
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}
.btn-danger-glass:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}
.btn-primary-glass {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}
.btn-primary-glass:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}

/* QG Access management */
.qg-access-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.qg-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    transition: background 0.2s;
}
.qg-access-row:hover {
    background: rgba(15, 23, 42, 0.6);
}
.qg-access-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.qg-access-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.qg-access-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.qg-access-email {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

/* Toggle switch */
.qg-toggle-btn {
    width: 44px;
    height: 24px;
    border-radius: 100px;
    border: none;
    background: rgba(100, 116, 139, 0.3);
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
    padding: 0;
}
.qg-toggle-btn .qg-toggle-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #94a3b8;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
}
.qg-toggle-btn.qg-toggle-on {
    background: rgba(16, 185, 129, 0.3);
}
.qg-toggle-btn.qg-toggle-on .qg-toggle-knob {
    background: #34d399;
    left: 23px;
}

/* Token bar */
.qg-token-bar {
    margin-bottom: 0.75rem;
}
.qg-token-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.5rem 1rem;
}
.qg-token-bar-inner i {
    color: #fbbf24;
    font-size: 0.7rem;
}
.qg-token-val {
    color: #818cf8;
    font-weight: 600;
}
.qg-token-total {
    margin-left: auto;
    color: var(--text-secondary);
}
.qg-token-total strong {
    color: #fbbf24;
}

/* Social posts */
.qg-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}
.qg-social-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
}
.qg-social-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
.qg-social-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.qg-social-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}
.qg-platform-instagram { background: rgba(225, 48, 108, 0.15); color: #e1306c; }
.qg-platform-linkedin { background: rgba(10, 102, 194, 0.15); color: #0a66c2; }
.qg-platform-facebook { background: rgba(24, 119, 242, 0.15); color: #1877f2; }
.qg-platform-twitter { background: rgba(29, 161, 242, 0.15); color: #1da1f2; }
.qg-social-content {
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.qg-social-hashtags {
    color: #818cf8;
    font-size: 0.8rem;
}
.qg-social-source {
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.qg-social-source i { font-size: 0.65rem; }
.qg-social-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.qg-social-actions {
    display: flex;
    gap: 0.4rem;
}
/* Status pills for social */
.qg-status-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.qg-status-approved { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.qg-status-published { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.qg-status-rejected { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.qg-status-draft { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* ─── Social Preview (platform-realistic) ─── */
.qg-social-preview {
    background: rgba(20, 20, 25, 0.95);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.qg-preview-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
}
.qg-preview-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    flex-shrink: 0;
}
.qg-preview-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.qg-preview-username {
    font-weight: 600;
    font-size: 0.85rem;
    color: #f1f5f9;
}
.qg-preview-handle {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.qg-preview-body {
    padding: 0 0.85rem 0.6rem;
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.qg-preview-image {
    width: 100%;
    display: block;
    object-fit: cover;
}
.qg-preview-instagram .qg-preview-image { aspect-ratio: 1 / 1; }
.qg-preview-linkedin .qg-preview-image,
.qg-preview-facebook .qg-preview-image,
.qg-preview-twitter .qg-preview-image { aspect-ratio: 16 / 9; }

.qg-preview-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.8rem;
}
.qg-preview-no-image i { font-size: 1.8rem; }
.qg-preview-no-image-instagram { background: linear-gradient(135deg, rgba(225, 48, 108, 0.12), rgba(131, 58, 180, 0.12)); aspect-ratio: 1 / 1; }
.qg-preview-no-image-linkedin { background: linear-gradient(135deg, rgba(10, 102, 194, 0.12), rgba(10, 102, 194, 0.06)); aspect-ratio: 16 / 9; }
.qg-preview-no-image-facebook { background: linear-gradient(135deg, rgba(24, 119, 242, 0.12), rgba(24, 119, 242, 0.06)); aspect-ratio: 16 / 9; }
.qg-preview-no-image-twitter { background: linear-gradient(135deg, rgba(29, 161, 242, 0.12), rgba(29, 161, 242, 0.06)); aspect-ratio: 16 / 9; }

.qg-social-generate-btn {
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.qg-social-generate-btn:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
}
.qg-social-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.qg-preview-hashtags {
    padding: 0 0.85rem 0.6rem;
    font-size: 0.8rem;
    color: #818cf8;
}
.qg-preview-actions-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.85rem;
    font-size: 1.1rem;
    color: #94a3b8;
}
.qg-preview-actions-row i { cursor: default; }
.qg-preview-reactions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.qg-preview-reactions i { margin-right: 0.3rem; font-size: 0.85rem; }

/* Lightbox plein ecran */
.qg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}
.qg-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 90vw;
    max-height: 90vh;
}
.qg-lightbox-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.qg-lightbox-actions {
    display: flex;
    gap: 0.75rem;
}

/* Platform-specific accent borders */
.qg-preview-instagram { border-color: rgba(225, 48, 108, 0.15); }
.qg-preview-linkedin { border-color: rgba(10, 102, 194, 0.15); }
.qg-preview-facebook { border-color: rgba(24, 119, 242, 0.15); }
.qg-preview-twitter { border-color: rgba(29, 161, 242, 0.15); }

/* Card cliquable */
.qg-social-card-clickable { cursor: pointer; transition: all 0.3s ease; }
.qg-social-card-clickable:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.3); }

/* ─── Modale edition post ─── */
.qg-post-modal {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    width: 90vw;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
}
.qg-post-modal-inner { padding: 1.5rem; }
.qg-post-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.qg-post-account-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    outline: none;
    cursor: pointer;
}
.qg-post-account-select:hover {
    border-color: rgba(255, 255, 255, 0.25);
}
.qg-post-account-select option {
    background: #1e1e2e;
    color: #e2e8f0;
}
.qg-post-modal-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.qg-post-modal-close:hover { color: #f1f5f9; background: rgba(255, 255, 255, 0.06); }
.qg-post-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .qg-post-modal-body { grid-template-columns: 1fr; }
    .qg-post-modal { width: 95vw; }
}
.qg-post-modal-preview { min-width: 0; }
.qg-post-modal-edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.qg-post-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.qg-post-textarea,
.qg-post-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    color: #f1f5f9;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s ease;
}
.qg-post-textarea:focus,
.qg-post-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
}
.qg-post-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.5rem 0;
}
.qg-post-image-thumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.qg-post-image-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.qg-post-modal-actions {
    display: flex;
    gap: 0.5rem;
}
.qg-post-modal-actions form { flex: 1; }
.qg-post-modal-actions button { width: 100%; }
.qg-post-image-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.qg-upload-label { cursor: pointer; }
.qg-modal-active { display: flex !important; }

/* Carrousel images */
.qg-carousel { position: relative; }
.qg-carousel-controls {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.qg-carousel-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.qg-carousel-btn:hover { background: rgba(0, 0, 0, 0.85); }
.qg-carousel-counter {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}
.qg-preview-image-count {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
}
.qg-preview-image-wrap { position: relative; }

/* Grille miniatures dans la modale */
.qg-post-images-grid {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.qg-post-image-item {
    position: relative;
    width: 64px;
    height: 64px;
}
.qg-post-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
/* ─── Social Accounts ─── */
.qg-social-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.qg-social-account-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.qg-social-account-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.qg-social-account-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.qg-social-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.qg-social-account-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #f1f5f9;
}
.qg-social-account-org {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.qg-social-account-url {
    font-size: 0.75rem;
    color: #818cf8;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qg-social-account-status {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
}
.qg-social-connected { background: rgba(16, 185, 129, 0.12); color: #34d399; }
.qg-social-disconnected { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.qg-social-account-pid { font-size: 0.7rem; opacity: 0.6; }
.qg-social-account-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}
.qg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 640px) { .qg-form-grid { grid-template-columns: 1fr; } }
.qg-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.qg-form-group select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    color: #f1f5f9;
    font-size: 0.85rem;
    font-family: inherit;
}
.qg-form-group select:focus { outline: none; border-color: rgba(139, 92, 246, 0.5); }
.qg-form-group select option { background: #1e293b; color: #f1f5f9; }

.qg-post-image-delete {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    font-size: 0.55rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Team grid (Accio-style agent cards) */
.qg-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.qg-team-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.qg-team-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.qg-team-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 0.6rem;
}
.qg-team-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
}
.qg-team-role {
    color: var(--text-secondary);
    font-size: 0.7rem;
    margin-top: 0.2rem;
    line-height: 1.3;
}

/* Dashboard 3 colonnes */
.qg-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .qg-dashboard-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .qg-dashboard-grid { grid-template-columns: 1fr; }
}
.qg-dash-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem;
}

/* Memory list */
.qg-memory-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.qg-memory-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.qg-memory-item:last-child { border-bottom: none; }
.qg-memory-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Stock table */
.qg-stock-category { margin-bottom: 1.5rem; }
.qg-stock-table {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}
.qg-stock-header {
    display: grid;
    grid-template-columns: 2.5fr 1fr 0.5fr 0.5fr 0.8fr 1.2fr;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
}
.qg-stock-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 0.5fr 0.5fr 0.8fr 1.2fr;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
    color: var(--text-primary);
    align-items: center;
    transition: background 0.15s;
}
.qg-stock-row:last-child { border-bottom: none; }
.qg-stock-row:hover { background: rgba(255, 255, 255, 0.03); }
.qg-stock-row--sale { border-left: 3px solid #f87171; }
.qg-stock-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.qg-stock-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.qg-stock-thumb--empty {
    background: rgba(100, 116, 139, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.qg-stock-title {
    font-weight: 500;
    font-size: 0.85rem;
}
.qg-stock-brand {
    color: var(--text-secondary);
    font-size: 0.72rem;
}
.qg-stock-subcat {
    color: var(--text-secondary);
    font-size: 0.75rem;
}
.qg-stock-warn { color: #fbbf24; }
@media (max-width: 800px) {
    .qg-stock-header, .qg-stock-row {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .qg-stock-header span:nth-child(2),
    .qg-stock-header span:nth-child(5),
    .qg-stock-row .qg-stock-subcat,
    .qg-stock-row span:nth-child(5) { display: none; }
}

/* ─── QG Section Card ─── */
.qg-section-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
}

/* ─── Bandeau mode démonstration ─────────────────────────────────────────
   Le libellé était purement et simplement MASQUÉ sous 768 px : sur téléphone
   il ne restait qu'une barre orange avec deux boutons, sans que le visiteur
   apprenne jamais qu'il était en démonstration. « Quitter » quoi ?
   On n'efface plus le message, on le raccourcit — même principe que
   .home-cta-full / .home-cta-short ailleurs dans cette feuille. */
.orkya-demo-banner {
    position: sticky; top: 0; z-index: 9999;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 0.5rem 1.25rem;
    padding: 8px 12px;
    /* Ambre assombri : le dégradé d'origine (#f59e0b -> #d97706) donnait un
       contraste de 2,15:1 sur le texte blanc, très en dessous du 4,5:1 exigé.
       Le bandeau est affiché en permanence sur chaque écran de la démo — c'est
       le dernier endroit où se permettre un texte illisible. Ici : 5,02:1. */
    background: linear-gradient(90deg, #b45309, #92400e);
    color: #fff;
    font-weight: 600; font-size: 0.85rem; text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.orkya-demo-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.orkya-demo-btn {
    padding: 4px 12px; border-radius: 6px;
    font-size: 0.85em; font-weight: 700;
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
    transition: background 0.2s ease;
}
/* :visited explicite — sans lui, un lien déjà visité récupère la couleur de
   l'agent utilisateur et disparaît sur le fond ambre. */
.orkya-demo-btn:visited { color: #fff; }
/* #ef4444 ne donnait que 3,76:1 sur du blanc. #b91c1c : 6,47:1. */
.orkya-demo-btn--sortie { background: #b91c1c; }
.orkya-demo-btn--sortie:hover { background: #991b1b; color: #fff; }
.orkya-demo-btn--compte {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}
.orkya-demo-btn--compte:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }

/* Deux libellés, jamais zéro : le court sur mobile, le long à partir de
   768 px. Le bouton « Créer mon compte » sort de la barre sur petit écran —
   il reste atteignable depuis la page, et trois éléments sur 390 px rendaient
   le bandeau illisible. */
.orkya-demo-text-long { display: none; }
.orkya-demo-text-court { display: inline; }
@media (min-width: 768px) {
    .orkya-demo-text-long { display: inline; }
    .orkya-demo-text-court { display: none; }
    .orkya-demo-banner { font-size: 0.9rem; }
}
@media (max-width: 767px) {
    .orkya-demo-btn--compte { display: none; }
}


/* ═══════════════════════════════════════════════════
   SUPPORT WIDGET (flottant bottom-right)
   ═══════════════════════════════════════════════════ */

.sw-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.55);
}
.sw-fab--active {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.sw-fab--active:hover {
    background: rgba(255, 255, 255, 0.12);
}
.sw-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f43f5e;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ─── Panel ─── */
.sw-panel {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 380px;
    height: 520px;
    background: var(--glass-bg, rgba(30, 41, 59, 0.85));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 20px;
    z-index: 50000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ─── Transitions ─── */
.sw-transition-enter { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.sw-transition-enter-start { opacity: 0; transform: translateY(12px) scale(0.95); }
.sw-transition-enter-end { opacity: 1; transform: translateY(0) scale(1); }
.sw-transition-leave { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.sw-transition-leave-start { opacity: 1; transform: translateY(0) scale(1); }
.sw-transition-leave-end { opacity: 0; transform: translateY(12px) scale(0.95); }

/* ─── Header ─── */
.sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}
.sw-header-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.sw-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.sw-header-title {
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    font-weight: 600;
}
.sw-header-status {
    color: #34d399;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sw-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    display: inline-block;
}
.sw-header-actions {
    display: flex;
    gap: 0.25rem;
}
.sw-header-btn {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    transition: all 0.15s;
    font-size: 0.8rem;
}
.sw-header-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #fff);
}

/* ─── Messages ─── */
.sw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sw-messages::-webkit-scrollbar { width: 4px; }
.sw-messages::-webkit-scrollbar-track { background: transparent; }
.sw-messages::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.25);
    border-radius: 4px;
}

/* ─── Welcome ─── */
.sw-welcome {
    text-align: center;
    padding: 1.5rem 0.5rem;
}
.sw-welcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: #a5b4fc;
    font-size: 1.3rem;
}
.sw-welcome-text {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
.sw-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sw-quick-actions button {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 10px;
    color: #a5b4fc;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sw-quick-actions button i {
    font-size: 0.7rem;
    opacity: 0.7;
    width: 16px;
    text-align: center;
}
.sw-quick-actions button:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(3px);
}

/* ─── Message Bubbles ─── */
.sw-msg {
    display: flex;
    animation: swFadeIn 0.2s ease;
}
@keyframes swFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.sw-msg--user {
    justify-content: flex-end;
}
.sw-msg--assistant {
    justify-content: flex-start;
}
.sw-msg-bubble {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.sw-msg--user .sw-msg-bubble {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-bottom-right-radius: 4px;
}
.sw-msg--assistant .sw-msg-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #fff);
    border-bottom-left-radius: 4px;
}
.sw-msg-bubble strong { color: #e2e8f0; }
.sw-msg-bubble code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
}
.sw-msg-bubble ul {
    padding-left: 1rem;
    margin: 0.3rem 0;
}
.sw-msg-bubble li {
    margin-bottom: 0.15rem;
}
.sw-msg--user .sw-msg-bubble strong { color: #fff; }

/* ─── Typing Indicator ─── */
.sw-typing {
    display: flex;
    gap: 4px;
    padding: 0.25rem 0;
}
.sw-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted, #64748b);
    animation: swBounce 1.2s infinite;
}
.sw-typing span:nth-child(2) { animation-delay: 0.2s; }
.sw-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes swBounce {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ─── Input ─── */
.sw-input {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}
.sw-input textarea {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    color: var(--text-primary, #fff);
    font-size: 0.82rem;
    resize: none;
    outline: none;
    max-height: 80px;
    font-family: inherit;
    transition: border-color 0.2s;
    line-height: 1.4;
}
.sw-input textarea:focus {
    border-color: var(--accent-primary, #6366f1);
}
.sw-input textarea::placeholder {
    color: var(--text-muted, #64748b);
}
.sw-send {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: all 0.2s;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.25);
    flex-shrink: 0;
}
.sw-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(99, 102, 241, 0.4);
}
.sw-send:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ─── Mobile responsive ─── */
@media (max-width: 480px) {
    .sw-panel {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 84px;
        height: 60vh;
        max-height: 520px;
    }
    .sw-fab {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }
}

/* ─── Support Tickets dans QG ─── */
.sw-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sw-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    gap: 0.5rem;
    transition: background 0.15s;
}
.sw-ticket-row:hover {
    background: rgba(255, 255, 255, 0.06);
}
.sw-ticket-title {
    font-size: 0.8rem;
    color: var(--text-primary, #fff);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sw-ticket-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.sw-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sw-priority-dot--CRITIQUE { background: #f43f5e; }
.sw-priority-dot--HAUTE { background: #f97316; }
.sw-priority-dot--MOYENNE { background: #fbbf24; }
.sw-priority-dot--BASSE { background: #94a3b8; }

/* ─── Knowledge entries dans QG ─── */
.sw-knowledge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
}
.sw-knowledge-item:last-child { border-bottom: none; }
.sw-knowledge-q {
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
}
.sw-knowledge-a {
    color: var(--text-primary, #fff);
}

/* ─── Ticket List Page ─── */
.sw-tickets-table {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sw-ticket-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    gap: 1rem;
}
.sw-ticket-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateX(2px);
}
.sw-ticket-card-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}
.sw-ticket-card-title {
    font-size: 0.85rem;
    color: var(--text-primary, #fff);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sw-ticket-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.sw-ticket-card-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* ─── Status Badges ─── */
.sw-status-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}
.sw-status-badge--OUVERT {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.sw-status-badge--EN_COURS {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.sw-status-badge--RESOLU {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.sw-status-badge--FERME {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.sw-status-btn-active {
    opacity: 0.4;
    pointer-events: none;
}

/* ─── Filter Select ─── */
.sw-filter-select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    color: var(--text-primary, #fff);
    font-size: 0.78rem;
    outline: none;
    cursor: pointer;
    min-width: 150px;
}
.sw-filter-select:focus {
    border-color: var(--accent-primary, #6366f1);
}
.sw-filter-select option {
    background: #1e293b;
    color: #fff;
}

/* ─── Info Blocks (ticket detail) ─── */
.sw-info-block {
    padding: 0.5rem 0;
}
.sw-info-label {
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.sw-info-value {
    font-size: 0.85rem;
    color: var(--text-primary, #fff);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ─── Conversation Messages (ticket detail) ─── */
.sw-conv-msg {
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    font-size: 0.78rem;
}
.sw-conv-msg--user {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.12);
}
.sw-conv-msg--assistant {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.sw-conv-msg-role {
    font-size: 0.6rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.sw-conv-msg-text {
    color: var(--text-primary, #fff);
    line-height: 1.45;
    white-space: pre-wrap;
}
.sw-conv-msg-time {
    font-size: 0.6rem;
    color: var(--text-muted, #64748b);
    text-align: right;
    margin-top: 0.2rem;
}

/* ─── Conversation List (widget) ─── */
.sw-conv-item {
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 0.35rem;
}
.sw-conv-item:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.15);
}
.sw-conv-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}
.sw-conv-item-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.sw-conv-item-time {
    font-size: 0.62rem;
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
}
.sw-conv-item-preview {
    font-size: 0.72rem;
    color: var(--text-secondary, #94a3b8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}
.sw-conv-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sw-conv-item-count {
    font-size: 0.6rem;
    color: var(--text-muted, #64748b);
}
.sw-conv-close-btn {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    transition: all 0.15s;
    opacity: 0;
}
.sw-conv-item:hover .sw-conv-close-btn {
    opacity: 1;
}
.sw-conv-close-btn:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}
.sw-quick-actions-btn {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    color: #a5b4fc;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 0.5rem;
}
.sw-quick-actions-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.25);
}

/* ─── Modale support (pas orkya-confirm pour eviter conflit display:none) ─── */
.sw-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(4px);
}
.sw-modal-box {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    max-width: 560px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: swModalIn 0.2s ease;
}
@keyframes swModalIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.sw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

/* ─── Email Quota Bar ─── */
.sw-email-quota-bar {
    border-radius: 12px;
    overflow: hidden;
}
.sw-quota-blocked {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 12px;
    color: #f87171;
    font-size: 0.82rem;
}
.sw-quota-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
}

/* ============================================================
   CATALOGUE & TARIFS
   ============================================================ */

.catalog-header {
    margin-bottom: 2rem;
}

/* Tabs */
.catalog-tabs {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: 2rem;
}
.catalog-tab {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.catalog-tab:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.catalog-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.catalog-tab-badge {
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
}
.catalog-tab.active .catalog-tab-badge {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

/* Filters */
.catalog-quick-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.catalog-search {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    width: 250px;
}
.catalog-filter-chip {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-card);
}
.catalog-filter-chip:hover,
.catalog-filter-chip.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

/* Add Panel */
.catalog-add-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: none;
}
.catalog-add-panel.active {
    display: block;
    animation: catalogSlideDown 0.3s ease;
}
@keyframes catalogSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form Grid */
.catalog-form-grid {
    display: grid;
    gap: 1rem;
    align-items: end;
}
.catalog-form-grid-presta { grid-template-columns: 2fr 100px 100px 150px auto auto; }
.catalog-form-grid-equip { grid-template-columns: 2fr 150px 100px 100px 100px auto; }
@media (max-width: 1024px) {
    .catalog-form-grid { grid-template-columns: 1fr 1fr; }
    .catalog-form-grid button { grid-column: 1 / -1; }
}

/* Form Groups */
.catalog-form-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.catalog-form-group input,
.catalog-form-group select,
.catalog-form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* List & Items */
.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.catalog-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: grid;
    grid-template-columns: 40px 3fr 1.5fr 1fr 1fr 100px;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
    cursor: pointer;
}
.catalog-item:hover {
    border-color: var(--accent-primary);
    transform: translateX(4px);
}

/* Item Elements */
.catalog-item-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-surface);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.catalog-icon-presta { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.catalog-icon-equip { color: #6366f1; background: rgba(99, 102, 241, 0.1); }
.catalog-item-name {
    font-weight: 600;
    color: var(--text-primary);
}
.catalog-item-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.catalog-item-cat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-surface);
    font-size: 0.75rem;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}
.catalog-item-price {
    font-family: monospace;
    font-weight: 600;
    color: var(--accent-primary);
}
.catalog-item-stock {
    font-size: 0.85rem;
    font-weight: 600;
}
.catalog-stock-ok { color: #10b981; }
.catalog-stock-low { color: #f59e0b; }
.catalog-stock-out { color: #ef4444; }

/* Action Buttons */
.catalog-btn-action {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog-btn-delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.catalog-btn-fav.active { color: #f59e0b; }
.catalog-btn-fav:not(.active) { color: var(--text-muted); }
.catalog-btn-fav:hover { transform: scale(1.1); }

/* Modal Edit */
.catalog-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.catalog-modal-overlay.open { display: flex; opacity: 1; }
.catalog-modal-content {
    background: var(--bg-card);
    width: 90%;
    max-width: 600px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
}
.catalog-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
}
.catalog-edit-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.2rem;
}

/* AI Magic Button */
.catalog-btn-magic {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s;
}
.catalog-btn-magic:hover { transform: scale(1.05); }

/* Empty State */
.catalog-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

/* Container */
.catalog-container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Inline Forms */
.catalog-inline-form {
    display: inline;
}

/* Modal Fields & Layout */
.catalog-modal-fields {
    display: grid;
    gap: 1rem;
}
.catalog-modal-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
.catalog-marque-ref-row {
    display: flex;
    gap: 1rem;
}
.catalog-marque-ref-col {
    flex: 1;
}
.catalog-ref-input-row {
    display: flex;
    gap: 0.5rem;
}
.catalog-prix-cat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.catalog-logistic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/* Delete Modal */
.catalog-delete-modal {
    max-width: 400px;
    text-align: center;
}
.catalog-delete-icon {
    font-size: 3rem;
    color: #dc2626;
    margin-bottom: 1rem;
}
.catalog-delete-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* AI Suggestions Dropdown */
.catalog-ai-suggestions {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    z-index: 9999;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.catalog-ai-suggestions-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.catalog-ai-suggestion-item {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 0.2s;
}
.catalog-ai-suggestion-item:hover {
    background: var(--bg-surface);
}
.catalog-ai-suggestion-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.catalog-ai-suggestion-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.catalog-ai-suggestion-specs {
    font-size: 0.75rem;
    color: var(--accent-primary);
}
.catalog-ai-suggestions-close {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.5rem;
}

/* Empty State Icon */
.catalog-empty-state-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Toast Messages */
.catalog-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.catalog-toast {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: catalogToastIn 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 250px;
}
.catalog-toast-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}
.catalog-toast-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.catalog-toast-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}
.catalog-toast-info {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #6366f1;
}
@keyframes catalogToastIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Page catalogue : scroll gere manuellement comme quantum */
.catalog-page-wrapper {
    height: calc(100vh - 10px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--bg-app, #0f172a);
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}
.catalog-page-wrapper::-webkit-scrollbar { width: 6px; }
.catalog-page-wrapper::-webkit-scrollbar-track { background: transparent; }
.catalog-page-wrapper::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}
.catalog-container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
}

/* Stats Cards */
.catalog-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.catalog-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    text-align: center;
}
.catalog-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1.2;
}
.catalog-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}
.catalog-stat-warning .catalog-stat-value { color: #f59e0b; }
.catalog-stat-danger .catalog-stat-value { color: #ef4444; }

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

/* Status Badges */
.catalog-status-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.catalog-status-maintenance {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.catalog-status-location {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}
.catalog-status-vendu {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.catalog-status-perdu {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.catalog-status-souslocation {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}
/* « ne se vend pas » : un kit sans ligne de devis correspondante. Rose, pas
   ambre — l'ambre porte déjà « en maintenance » deux lignes plus haut, sur la
   même colonne, et deux sens pour une couleur les rend illisibles au scan. */
.catalog-status-invendable {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    text-transform: none;
    letter-spacing: 0;
}

/* ---- V3 LAYOUT : Sidebar + Main + Drawer ---- */

.catalog-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
}

/* Sidebar Categories */
.catalog-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem 0;
    align-self: start;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.catalog-sidebar-header {
    padding: 0 1rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0.5rem;
}
.catalog-sidebar-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.catalog-tree-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}
.catalog-tree-item:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
}
.catalog-tree-item.catalog-tree-active {
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.08);
    font-weight: 600;
}
.catalog-tree-child {
    padding-left: 2.2rem;
    font-size: 0.8rem;
}
.catalog-tree-count {
    margin-left: auto;
    font-size: 0.7rem;
    background: var(--bg-surface);
    padding: 1px 6px;
    border-radius: 8px;
}
.catalog-tree-group {
    margin-bottom: 0.1rem;
    border: none;
}
.catalog-tree-group > summary {
    list-style: none;
    cursor: pointer;
}
.catalog-tree-group > summary::-webkit-details-marker {
    display: none;
}
.catalog-tree-parent {
    position: relative;
}
.catalog-tree-parent::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-left: auto;
    transition: transform 0.2s;
}
.catalog-tree-group[open] > .catalog-tree-parent::after {
    transform: rotate(180deg);
}
.catalog-tree-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    flex: 1;
}
.catalog-tree-link:hover {
    color: var(--accent-primary);
}

/* Toolbar */
.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.catalog-search-form {
    flex: 1;
}
.catalog-search-wrapper {
    position: relative;
}
.catalog-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
}
.catalog-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.2rem;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color 0.2s;
}
.catalog-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.catalog-toolbar-actions {
    display: flex;
    gap: 0.5rem;
}
.catalog-add-btn {
    white-space: nowrap;
}

/* Add Dropdown */
.catalog-add-dropdown {
    position: relative;
}
.catalog-add-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    /* OPAQUE, pas le verre dépoli des cartes : ce menu flotte au-dessus de la
       liste, et `--bg-card` (blanc à 4 %) laissait lire les articles dessous. */
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 180px;
    overflow: hidden;
}
.catalog-add-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.catalog-add-menu-item:hover {
    background: var(--bg-glass-hover);
    color: var(--accent-primary);
}

/* Filtre prestataire (dropdown multi-select) */
.catalog-supplier-filter { position: relative; }
.catalog-supplier-btn { gap: 0.4rem; }
.catalog-supplier-btn-active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.catalog-supplier-dot { color: var(--accent-primary); font-size: 0.6em; }
.catalog-supplier-caret { font-size: 0.7em; opacity: 0.7; }
.catalog-supplier-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    /* Même raison que `.catalog-add-menu` : opaque, sinon la liste se lit au
       travers du menu. */
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    z-index: 100;
    min-width: 230px;
    max-width: calc(100vw - 2rem);
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
}
.catalog-supplier-opt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.catalog-supplier-opt:hover { background: var(--bg-glass-hover); }
.catalog-supplier-opt input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
    cursor: pointer;
}
.catalog-supplier-apply {
    width: 100%;
    margin-top: 0.5rem;
    justify-content: center;
}

/* Sous 768 px, `.catalog-toolbar` passe en colonne : la rangée d'actions
   s'étire sur toute la largeur et le bouton « Prestataire » se retrouve à
   GAUCHE. Ancré par sa droite (`right: 0`) et large de 230 px, le menu
   commençait alors à -48 px sur un écran de 390 — « Appliquer » était coupé
   par le bord de l'écran. On l'ancre donc à gauche, d'où il s'étend vers
   l'intérieur.

   Le seuil est celui de la bascule en colonne, PAS un chiffre rond choisi à
   part : à 640 px, la plage 641-768 (tablette, téléphone en paysage) gardait
   le défaut entier. */
@media (max-width: 768px) {
    .catalog-supplier-menu,
    .catalog-add-menu {
        left: 0;
        right: auto;
        max-width: calc(100vw - 1.5rem);
    }
    /* Au doigt : 44 px, comme les actions de la galerie. */
    .catalog-supplier-opt {
        padding: 0.7rem 0.6rem;
        min-height: 44px;
        font-size: 0.9rem;
    }
    .catalog-supplier-opt input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}

/* Item info (inside catalog-item) */
.catalog-item-info {
    min-width: 0;
}
.catalog-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
}

/* Kit badge */
.catalog-icon-kit {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.catalog-badge-kit {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Pagination */
.catalog-pagination {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}
.catalog-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
}
.catalog-page-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
.catalog-page-active {
    background: var(--accent-primary);
    color: white;
}

/* ---- DRAWER ---- */
.catalog-drawer-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.catalog-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.catalog-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 680px;
    max-width: 95vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-card);
    border-left: 1px solid var(--border-subtle);
    z-index: 950;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}
.catalog-drawer.open {
    transform: translateX(0);
}
.catalog-drawer-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}
.catalog-drawer-content::-webkit-scrollbar { width: 6px; }
.catalog-drawer-content::-webkit-scrollbar-track { background: transparent; }
.catalog-drawer-content::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}
.catalog-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 10;
}
.catalog-drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.catalog-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.catalog-drawer-close:hover {
    color: var(--text-primary);
}
.catalog-drawer-section {
    margin-top: 1.5rem;
}
.catalog-drawer-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-subtle);
}
.catalog-drawer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.catalog-drawer-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.catalog-drawer-form {
    padding: 0 1.5rem 2rem;
}
.catalog-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 0;
    margin-top: 1rem;
}
/* Le bandeau d'echec de l'enregistrement sur place, juste au-dessus du bouton
   « Enregistrer ».

   Il REUTILISE `.catalog-toast .catalog-toast-error` — le meme bandeau rouge
   que l'import CSV affiche deja dans ce tiroir. Cette classe-ci ne fait que le
   sortir du conteneur flottant : elle le pose dans le flux, sur toute la
   largeur, et lui rend un curseur normal (il ne se ferme pas au clic).

   POURQUOI il existe. Le toast s'efface au bout de cinq secondes. Un
   enregistrement qui echoue en silence ferait perdre une saisie entiere sans
   qu'Alan le sache : le message doit RESTER tant que la fiche n'est pas
   passee. */
.catalog-drawer-echec {
    min-width: 0;
    width: 100%;
    margin-top: 1rem;
    cursor: default;
    align-items: flex-start;
    line-height: 1.4;
}
/* La ligne qui vient d'etre enregistree s'allume une seconde et demie.
   La liste est redessinee sans que la page bouge : sans ce signal, rien ne
   distingue « c'est enregistre » de « il ne s'est rien passe ». */
@keyframes catalogLigneEnregistree {
    from { background: rgba(16, 185, 129, 0.22); border-color: rgba(16, 185, 129, 0.55); }
    to   { background: var(--bg-card); border-color: var(--border-subtle); }
}
.catalog-item-enregistre {
    animation: catalogLigneEnregistree 1.6s ease-out;
}
/* Le panneau catalogue est un tiroir plein écran (mobile) / 680px (desktop)
   ancré à droite ; les bulles flottantes (support, recherche, tour) restent
   fixées bottom-right PAR-DESSUS avec un z-index bien plus haut (50000 pour
   le widget support), donc elles recouvrent le bouton « Enregistrer » du
   formulaire — constaté sur mobile (audit galerie catalogue, 21/08/2026).
   Même parade que `.tx-drawer[data-open="true"]` : on les masque tant que le
   tiroir est ouvert. */
body:has(.catalog-drawer.open) .sw-fab,
body:has(.catalog-drawer.open) .sw-panel,
body:has(.catalog-drawer.open) .cmdk-fab-mobile,
body:has(.catalog-drawer.open) .tour-help-fab,
body:has(.catalog-drawer.open) .intercom-launcher,
body:has(.catalog-drawer.open) .intercom-lightweight-app-launcher,
body:has(.catalog-drawer.open) #intercom-container {
    display: none !important;
}

/* Drawer Photo */
.catalog-drawer-photo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
}
.catalog-drawer-photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    /* Un visuel ORKYA détouré est souvent sombre sur fond sombre : sans ce
       fond, le produit se fond dans le cadre de la fiche (même défaut que la
       galerie ci-dessous, corrigé au même endroit). */
    background: var(--bg-app);
}
.catalog-drawer-photo-placeholder {
    width: 80px;
    height: 80px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
}
.catalog-drawer-photo-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.catalog-drawer-photo-upload:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.catalog-drawer-photo-ai-pending {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--accent-primary);
    font-size: 0.65rem;
    font-weight: 600;
}
.catalog-drawer-photo-ai-pending i {
    font-size: 1.2rem;
}

/* AI Enrichment in Drawer */
.catalog-ai-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-md);
    margin-top: 1rem;
}
.catalog-ai-bar-input {
    flex: 1;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(99, 102, 241, 0.3);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.catalog-ai-bar-input::placeholder {
    color: var(--text-muted);
}
.catalog-ai-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.catalog-ai-bar-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4);
}
.catalog-ai-results {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.catalog-ai-result-card {
    display: flex;
    /* Le sélecteur de photos est un TROISIÈME enfant de cette ligne flex : sans
       retour à la ligne il se posait à côté du texte et le comprimait à une
       trentaine de pixels — un mot par ligne, et les vignettes par-dessus.
       Constaté sur mobile. Son `border-top` disait déjà qu'il devait occuper
       sa propre ligne. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.catalog-ai-result-card:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}
.catalog-ai-result-info {
    flex: 1 1 200px;   /* base de 200 px : en dessous, le texte passe à la ligne
                          au lieu de se réduire en colonne d'un mot */
    min-width: 0;
    overflow-wrap: anywhere;   /* une référence à rallonge sans espace ne doit
                                  pas élargir la carte */
}
.catalog-ai-result-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.catalog-ai-result-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.catalog-ai-result-specs {
    font-size: 0.72rem;
    color: var(--accent-primary);
    font-weight: 500;
}
.catalog-ai-result-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    padding: 4px;
}
.catalog-ai-photo-picker {
    display: flex;
    /* Ligne entière, sous le texte, et défilement horizontal plutôt qu'un
       écrasement des vignettes quand il y en a cinq sur un écran étroit. */
    flex: 0 0 100%;
    gap: 0.4rem;
    padding: 0.5rem 0 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.4rem;
    overflow-x: auto;
}
.catalog-ai-photo-option {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
.catalog-ai-photo-option:hover {
    border-color: var(--text-muted);
}
.catalog-ai-photo-option.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}
.catalog-ai-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a855f7;
}

/* Kit Composants */
.catalog-kit-search-bar {
    position: relative;
    margin-bottom: 0.75rem;
}
.catalog-kit-search-results {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    max-height: 180px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.catalog-kit-search-results:empty { display: none; }
.catalog-kit-search-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-subtle);
}
.catalog-kit-search-item:hover {
    background: var(--bg-surface);
    color: var(--accent-primary);
}
.catalog-kit-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
/* `flex-wrap` : le composant porte désormais deux blocs de PLEINE LARGEUR
   sous sa ligne — le résumé des numéros nommés et « ce qui reste ». Sans le
   repli ils se seraient serrés en colonnes dans la même ligne, illisibles. */
.catalog-kit-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.catalog-kit-item-info { flex: 1; min-width: 0; }
.catalog-kit-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.catalog-kit-item-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 2px;
}
.catalog-kit-badge-opt {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 0.65rem;
    font-weight: 600;
}
.catalog-kit-item-qty {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}
/* LA QUANTITÉ SE TAPE. `.catalog-kit-qty-btn` (les deux boutons « - » et
   « + ») a été SUPPRIMÉE le 25/08/2026 avec son dernier appelant : monter à
   30 demandait 29 clics et 29 requêtes, et c'était la seule quantité de
   l'application qui ne se tapait pas. Le champ ci-dessous s'aligne sur ceux
   de la section Stock du même tiroir. */
.catalog-kit-qty-input {
    width: 68px;
    /* 44px : la cible tactile minimale, la même que `.mn-pastille`. */
    min-height: 44px;
    padding: 0 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
}
.catalog-kit-qty-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}
.catalog-kit-qty-input:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}
/* Gelé quand le composant nomme des numéros : c'est leur nombre qui fait la
   quantité. Même traitement que `.mn-champ-calcule` dans la section Stock. */
.catalog-kit-qty-input[readonly] {
    opacity: 0.75;
    cursor: not-allowed;
}
.catalog-kit-item-actions {
    display: flex;
    gap: 0.25rem;
}
.catalog-kit-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.catalog-kit-empty i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}
.catalog-kit-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-md);
}
.catalog-kit-summary-item {
    text-align: center;
}
.catalog-kit-summary-item span {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.catalog-kit-summary-item strong {
    font-size: 0.85rem;
    color: var(--accent-primary);
}

/* Checkbox Label */
.catalog-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: border-color 0.15s;
}
.catalog-checkbox-label:hover {
    border-color: var(--accent-primary);
}
.catalog-checkbox-label input[type="checkbox"] {
    width: auto;
    accent-color: var(--accent-primary);
}

/* Drawer Details (repliable) */
.catalog-drawer-details {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0;
    margin-top: 1rem;
}
.catalog-drawer-summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    margin: 0;
    border-bottom: none;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.catalog-drawer-summary::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
    transition: transform 0.2s;
    color: var(--text-muted);
}
.catalog-drawer-details[open] > .catalog-drawer-summary::before {
    transform: rotate(90deg);
}
.catalog-drawer-details[open] > .catalog-drawer-summary {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0.75rem;
}
.catalog-drawer-details > .catalog-drawer-row,
.catalog-drawer-details > .catalog-form-group {
    padding: 0 1rem;
}
.catalog-drawer-details > .catalog-drawer-row:last-child,
.catalog-drawer-details > .catalog-form-group:last-child {
    padding-bottom: 0.75rem;
}

/* Drawer Info Row */
.catalog-drawer-info-row {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
}
.catalog-drawer-info-row strong {
    color: var(--accent-primary);
}

/* Drawer Loading */
.catalog-drawer-loading,
.catalog-drawer-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-size: 0.9rem;
    gap: 0.5rem;
}

/* Import CSV */
.catalog-import-file-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
}
.catalog-import-preview {
    overflow-x: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.catalog-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    white-space: nowrap;
}
.catalog-import-table th {
    background: var(--bg-surface);
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}
.catalog-import-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.catalog-import-mapping {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.catalog-import-mapping-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.catalog-import-col-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.4rem 0.6rem;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    min-width: 120px;
}
.catalog-import-arrow {
    color: var(--text-muted);
    font-size: 0.7rem;
}
.catalog-import-select {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.82rem;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    /* min-width:0 : empêche les colonnes de grille de déborder du viewport
       (sinon les compteurs alignés à droite partent hors écran). */
    .catalog-sidebar,
    .catalog-main {
        min-width: 0;
    }
    /* Sidebar catégories : panneau repliable en haut (au lieu d'être cachée) */
    .catalog-sidebar {
        padding: 0;
        max-height: none;
        margin-bottom: 1rem;
    }
    .catalog-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 0.85rem 1rem;
        margin-bottom: 0;
        border-bottom: none;
        user-select: none;
    }
    .catalog-sidebar-header::after {
        content: "\f078"; /* chevron-down */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.7rem;
        color: var(--text-muted);
        transition: transform 0.2s ease;
    }
    .catalog-sidebar.open .catalog-sidebar-header::after {
        transform: rotate(180deg);
    }
    .catalog-sidebar-tree {
        display: none;
        max-height: 55vh;
        overflow-y: auto;
        border-top: 1px solid var(--border-subtle);
    }
    .catalog-sidebar.open .catalog-sidebar-tree {
        display: block;
    }
}
@media (max-width: 768px) {
    /* Onglets scrollables horizontalement au lieu de déborder */
    .catalog-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.25rem;
    }
    .catalog-tabs::-webkit-scrollbar { display: none; }
    .catalog-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.7rem 1rem;
    }
    .catalog-item {
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "icon name action"
            "icon details action";
        gap: 0.5rem;
    }
    .catalog-item-icon { grid-area: icon; }
    .catalog-item-name { grid-area: name; }
    .catalog-item-actions { grid-area: action; }
    .catalog-col-cat,
    .catalog-col-price,
    .catalog-col-stock { display: none; }
    .catalog-drawer {
        width: 100vw;
    }
    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .catalog-drawer-row,
    .catalog-drawer-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Catering Orders Hub — onglets et placeholder
   ========================================================================== */
.catering-tab-group { margin-bottom: 1.5rem; }
.catering-tab-emoji { margin-right: 0.4rem; }
.catering-tab-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.catering-tab-placeholder i { margin-right: 0.5rem; }

/* ==========================================================================
   ORKYA Premium Pill Button (07/05/2026)
   CTA premium pill : pill + premium-gradient + premium-glow.
   Utiliser pour les actions principales (creation recette, ajouter stock, etc.).
   ========================================================================== */
.btn-orkya-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-full);
    border: 1px solid hsl(0 0% 100% / 0.1);
    background: var(--premium-gradient);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow:
        0 10px 28px hsl(239 84% 67% / 0.35),
        0 4px 12px hsl(36 92% 51% / 0.2),
        0 1px 0 hsl(0 0% 100% / 0.25) inset,
        0 -1px 0 hsl(0 0% 0% / 0.12) inset;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.btn-orkya-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 38%, hsl(0 0% 100% / 0.22) 50%, transparent 62%);
    transform: translateX(-110%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.btn-orkya-premium:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 38px hsl(239 84% 67% / 0.5),
        0 6px 16px hsl(36 92% 51% / 0.3),
        var(--premium-glow),
        0 1px 0 hsl(0 0% 100% / 0.3) inset,
        0 -1px 0 hsl(0 0% 0% / 0.15) inset;
    filter: brightness(1.06);
    color: var(--text-primary);
}
.btn-orkya-premium:not(:disabled):hover::before {
    transform: translateX(110%);
}

/* Variante CTA modale : taille augmentée pour boutons submit principaux */
.btn-orkya-premium--cta {
    min-width: 190px;
    padding: 0.75rem 1.9rem;
}
.btn-orkya-premium:active {
    transform: translateY(0) scale(0.99);
}
.btn-orkya-premium:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* ==========================================================================
   Empty state actionable (hero, dashboards) — onboarding 07/05/2026
   ========================================================================== */
.hero-empty-actionable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    border: 2px dashed hsl(0 0% 100% / 0.1);
    border-radius: 24px;
    background: linear-gradient(145deg, hsl(216 33% 17% / 0.4), hsl(222 47% 11% / 0.4));
    backdrop-filter: blur(10px);
    gap: 1rem;
}
.hero-empty-actionable .hero-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--premium-gradient);
    box-shadow: var(--premium-glow);
    color: white;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}
.hero-empty-actionable .hero-empty-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin: 0;
}
.hero-empty-actionable .hero-empty-sub {
    color: var(--text-secondary, hsl(215 20% 65%));
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0;
    line-height: 1.5;
}
.hero-empty-actionable .hero-empty-cta {
    margin-top: 0.5rem;
    min-width: 280px;
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
}
.hero-empty-actionable .hero-empty-hint {
    font-size: 0.78rem;
    color: var(--text-muted, hsl(215 25% 35%));
    margin: 0.4rem 0 0 0;
    font-style: italic;
}

/* ==========================================================================
   Interactive Tour (composant Alpine reutilisable) — onboarding 07/05/2026
   ========================================================================== */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000; /* au-dessus de toutes les autres couches fixed du projet */
    background: transparent; /* le voile sombre vient du box-shadow de .tour-spotlight (sinon la cible serait floutee) */
    pointer-events: auto;
    animation: fadeIn 0.3s ease;
}
.tour-spotlight {
    position: absolute;
    z-index: 120050;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px hsl(222 47% 5% / 0.78), 0 0 35px 4px hsl(239 84% 67% / 0.5);
    pointer-events: none;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-popover {
    position: absolute;
    z-index: 120100;
    max-width: 360px;
    min-width: 280px;
    padding: 1.25rem 1.4rem;
    border-radius: 18px;
    background: hsl(216 33% 17%);
    border: 1px solid hsl(239 84% 67% / 0.35);
    box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5),
                0 0 30px hsl(239 84% 67% / 0.18);
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-popover-step {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: hsl(239 84% 67%);
    margin-bottom: 0.4rem;
}
.tour-popover-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.6rem 0;
    line-height: 1.3;
}
.tour-popover-content {
    font-size: 0.85rem;
    color: hsl(215 20% 75%);
    line-height: 1.55;
    margin: 0 0 1.1rem 0;
}
.tour-popover-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.tour-popover-skip {
    background: none;
    border: none;
    color: hsl(215 20% 55%);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
}
.tour-popover-skip:hover {
    color: white;
}
.tour-popover-nav {
    display: flex;
    gap: 0.5rem;
}
.tour-btn {
    padding: 0.45rem 0.95rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.tour-btn-prev {
    background: hsl(0 0% 100% / 0.06);
    color: hsl(215 20% 75%);
    border: 1px solid hsl(0 0% 100% / 0.1);
}
.tour-btn-prev:hover {
    background: hsl(0 0% 100% / 0.12);
    color: white;
}
.tour-btn-next {
    background: var(--premium-gradient);
    color: white;
    box-shadow: 0 4px 12px hsl(239 84% 67% / 0.35);
}
.tour-btn-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px hsl(239 84% 67% / 0.5);
    filter: brightness(1.06);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 640px) {
    /* Tour popover sur mobile : ancre EN BAS de l'ecran, full-width */
    .tour-popover {
        max-width: calc(100vw - 1.5rem);
        min-width: 0;
        width: calc(100vw - 1.5rem);
        /* Override des positions JS (top/left calcules) — on force bottom fixed */
        top: auto !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 1rem !important;
        max-height: 60vh;
        overflow-y: auto;
    }
    /* Etapes position:top (FAB bas-droite) : le popover force en bas
       recouvrirait la cible — on le force en HAUT sur mobile. */
    .tour-popover--force-top {
        top: 4.5rem !important;
        bottom: auto !important;
    }
    .tour-popover-title { font-size: 1rem; }
    .tour-popover-content { font-size: 0.82rem; }
    .tour-popover-actions { gap: 0.5rem; flex-wrap: wrap; }
    .tour-btn { padding: 0.5rem 0.85rem; font-size: 0.78rem; }
    .hero-empty-cta { min-width: 0; width: 100%; }
}


/* ===== LAUNCH BANNER — version clean (inspiree Linear) — page pricing ===== */
.launch-banner-clean {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem 0.5rem 0.5rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.launch-banner-label {
    background: var(--premium-gradient);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0.32rem 0.7rem;
    border-radius: 100px;
    white-space: nowrap;
}

.launch-banner-text {
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
    font-weight: 500;
}

@media (max-width: 480px) {
    .launch-banner-clean {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.6rem 0.9rem;
    }
    .launch-banner-text {
        font-size: 0.78rem;
        text-align: center;
    }
}

/* Icone du badge "Recommande" / "Le choix de la majorite" */
.plan-recommended-badge i {
    margin-right: 4px;
}


/* Bouton flottant "?" pour relancer un tour onboarding (FAB) */
.tour-help-fab {
    position: fixed;
    bottom: 24px;
    right: 88px; /* a gauche du widget support .sw-fab pour ne pas se chevaucher */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid hsl(0 0% 100% / 0.12);
    background: hsl(216 33% 17% / 0.85);
    backdrop-filter: blur(10px);
    color: hsl(215 20% 75%);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px hsl(0 0% 0% / 0.3);
}
.tour-help-fab:hover {
    background: var(--premium-gradient);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px hsl(239 84% 67% / 0.4);
    border-color: hsl(0 0% 100% / 0.18);
}
.tour-help-fab:focus-visible {
    outline: 2px solid hsl(239 84% 67%);
    outline-offset: 3px;
}
@media (max-width: 640px) {
    .tour-help-fab {
        right: 88px; /* marge avec le widget support 56px/24px pour eviter chevauchement */
        bottom: 18px;
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 480px) {
    .tour-help-fab {
        right: 76px; /* widget support compact sur tres petits ecrans */
    }
}
@media (max-width: 380px) {
    /* Tres petits ecrans : on remonte le FAB en haut pour eviter overlap avec autres CTA bottom */
    .tour-help-fab {
        right: 12px;
        bottom: auto;
        top: 90px; /* sous le header sticky/nav */
    }
}

/* === SP3 — Catégorisation événementielle (form transaction) ===
   Section "Catégorisation événementielle" du form transaction_form.html.
   Réutilise le wrapper .txf-card existant ; ajoute juste les variantes
   pour les checkbox rows (.txf-checkbox-row + .txf-checkbox-label).
*/
.txf-checkbox-row {
    grid-column: 1 / -1;
}
.txf-checkbox-label {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    /* Override .txf-field label uppercase tracking pour cette ligne */
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9rem !important;
    color: #e2e8f0 !important;
    margin-bottom: 0 !important;
}
.txf-checkbox-label input[type="checkbox"] {
    width: auto;
    accent-color: #8b5cf6;
    margin-right: 0.4rem;
}
.txf-checkbox-label > span {
    font-weight: 600;
    color: #e2e8f0;
}
.txf-checkbox-hint {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

/* === SP3 — Liste transactions enrichie (event_category badge + filtres rapides) ===
   Cf docs/superpowers/plans/2026-05-08-sp3-ui-compta.md (Task 4)
   Affiche la colonne event_category dans transaction_list.html avec un badge
   coloré (couleur dynamique via inline style — exception documentée), plus
   les tags 🎤 (is_artist_related) et 🟡 (is_provisional) et les filtres
   rapides au-dessus du tableau.
*/
.event-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    /* Léger contour pour assurer la lisibilité sur fond sombre */
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Audit a11y 08/2026 : le fond vient d'un hex libre (EventCategory.color,
       ex #F1C40F, #7F8C8D...) — texte blanc dessus tombe a 1.6:1-3.5:1 sur la
       plupart des couleurs seedees (calcul WCAG), tres en dessous des 4.5:1
       requis. Un scrim noir a 55% assombrit N'IMPORTE QUELLE couleur de fond
       de facon uniforme (CSS pur, aucune valeur en base a toucher) : pire cas
       mesure (#F1C40F jaune) passe de 1.66:1 a ~6.9:1. La teinte reste
       identifiable (simplement plus sombre), seul le contraste change. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}
.event-category-badge i {
    font-size: 0.7rem;
}

.is-artist-tag,
.provisional-badge {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.85rem;
    vertical-align: middle;
}

.quick-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.4);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.filter-chip:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #c4b5fd;
    border-color: rgba(99, 102, 241, 0.2);
}
.filter-chip.active {
    background: rgba(99, 102, 241, 0.15);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.filter-select {
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.4);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.filter-select:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #c4b5fd;
    border-color: rgba(99, 102, 241, 0.2);
}
.filter-select option {
    background: #0f172a;
    color: #e2e8f0;
}

/* === SP4 — Bilan event refondu === */
/* ==========================================================================
   BILAN EVENT — Toggle de vue + ventilations par categorie (refonte 2026-05-09)
   Reutilise le pattern existant .app-card.eb-section / .eb-section-header /
   .eb-cat-header / .eb-cat-name / .eb-cat-total (deja utilise par les sections
   Recettes/Depenses du bilan). On ajoute juste un variant .eb-cat-header--vent
   pour integrer une icone coloree, un badge "Artiste" et une barre de %.
   ========================================================================== */

.bilan-vent-toggle {
    display: inline-flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 0.35rem;
    background: var(--glass-bg, rgba(15, 23, 42, 0.45));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.bilan-vent-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.18s ease;
    white-space: nowrap;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.bilan-vent-toggle-chip i { font-size: 0.78rem; opacity: 0.85; }
.bilan-vent-toggle-chip:hover {
    color: var(--text-primary, rgba(255, 255, 255, 0.92));
    background: rgba(255, 255, 255, 0.04);
}
.bilan-vent-toggle-chip.is-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.18));
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* KPI summary du bilan : variante 3 colonnes du pattern .eb-kpis (qui est
   en 5 cols par defaut pour le bloc tresorerie en bas). */
.eb-kpis--summary {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.75rem;
}
@media (max-width: 768px) {
    .eb-kpis--summary { grid-template-columns: 1fr; }
}
/* Variante à quatre compteurs du même pattern. Sans elle, un quatrième KPI
   posé dans `--summary` tombe seul sur une deuxième ligne de trois colonnes.
   Deux par deux sur tablette et sur téléphone : quatre nombres empilés font
   défiler la page avant d'atteindre la liste, qui est ce qu'on vient lire. */
.eb-kpis--quatre {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 1.75rem;
}
@media (max-width: 1024px) {
    .eb-kpis--quatre { grid-template-columns: 1fr 1fr; }
}

/* === Variante .eb-cat-header pour la ventilation : icone + label/meta/bar + total === */
.eb-cat-header--vent {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.25rem;
}
.eb-cat-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 0.88rem;
}
/* Audit a11y 08/2026 : la couleur de categorie evenementielle (EventCategory.color,
   hex libre, ex #34495E) posee telle quelle en `color` tombe a 1.6:1 sur fond carte
   sombre pour les teintes les plus foncees de la palette (calcul WCAG). On l'eclaircit
   uniformement avec 45% de blanc via color-mix() : la teinte reste identifiable, seule
   la luminosite change — pire cas mesure passe de 1.57:1 a ~5.16:1. Le template pose
   --cat-color en inline (Django ou Alpine :style), jamais `color` directement. */
.eb-cat-icon,
.eb-cat-icon--sm {
    color: color-mix(in srgb, white 45%, var(--cat-color, currentColor) 55%);
}
.eb-cat-name-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.eb-cat-name-block .eb-cat-name {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.eb-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    background: rgba(231, 76, 60, 0.14);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.eb-cat-badge i { font-size: 0.6rem; }
.eb-cat-meta {
    font-size: 0.7rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    letter-spacing: 0.005em;
}
.eb-cat-bar {
    display: block;
    height: 4px;
    margin-top: 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
    max-width: 280px;
}
.eb-cat-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
    opacity: 0.9;
}
.eb-cat-group--unclassified {
    background: rgba(245, 158, 11, 0.04);
}
.eb-cat-group--unclassified:hover { background: rgba(245, 158, 11, 0.07); }

/* === Mobile: variante --vent compactee === */
@media (max-width: 768px) {
    .bilan-vent-toggle { width: 100%; justify-content: stretch; }
    .bilan-vent-toggle-chip {
        flex: 1; justify-content: center; font-size: 0.78rem; padding: 0.5rem 0.5rem;
    }
    .eb-cat-header--vent {
        grid-template-columns: 32px 1fr auto;
        gap: 0.55rem;
        padding: 0.6rem 0.85rem;
    }
    .eb-cat-icon { width: 30px; height: 30px; font-size: 0.78rem; }
    .eb-cat-name-block .eb-cat-name { font-size: 0.8rem; }
    .eb-cat-bar { max-width: none; }
}

.in-kind-block {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: rgba(231, 76, 60, 0.08);
    border-left: 3px solid #E74C3C;
    border-radius: 0.5rem;
}

.in-kind-block h3 {
    margin: 0 0 0.5rem 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.in-kind-block p {
    margin: 0.35rem 0;
    color: rgba(255, 255, 255, 0.85);
}

.in-kind-block .hint {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* === SP4 T3 — Bouton "Classer auto avec IA" + modal validation bulk === */
.bilan-actions-classify {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0;
}

.btn-classify-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 0.6rem;
    color: #c7d2fe;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-classify-ai:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.3));
    transform: translateY(-1px);
}

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

.btn-classify-ai i {
    font-size: 0.95rem;
}

.modal-classify-bulk-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60000;
    padding: 1rem;
}

.modal-classify-bulk {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.modal-classify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
}

.modal-classify-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-classify-header .modal-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-classify-header .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.modal-classify-bulk .results-summary {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 1rem 0 1.5rem;
}

/* Bloc progress affiche pendant que le job async tourne (PENDING / RUNNING) */
.modal-classify-bulk .results-summary-progress {
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid #6366F1;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.modal-classify-bulk .results-summary-progress p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.modal-classify-bulk .results-summary-progress p strong {
    color: #ffffff;
    font-size: 1.1rem;
}

.modal-classify-bulk .results-summary-progress .hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.modal-classify-bulk .result-row {
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
}

.modal-classify-bulk .result-row.auto strong {
    color: #34d399;
}

.modal-classify-bulk .result-row.suggested strong {
    color: #fbbf24;
}

.modal-classify-bulk .result-row.manual strong {
    color: #f87171;
}

.modal-classify-bulk .suggestions-list {
    margin-top: 1rem;
}

.modal-classify-bulk .suggestions-list h3 {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.6rem;
}

.modal-classify-bulk .suggestions-list .hint {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
}

.modal-classify-bulk .suggestion-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
}

.modal-classify-bulk .suggestion-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.modal-classify-bulk .suggestion-row.manual-row {
    cursor: default;
}

.modal-classify-bulk .suggestion-row .suggestion-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.modal-classify-bulk .suggested-cat {
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    padding: 0.18rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
}

.modal-classify-bulk .confidence {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    min-width: 3rem;
    text-align: right;
}

.modal-classify-bulk .amount {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.modal-classify-bulk .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-classify-bulk .btn-secondary-glass,
.modal-classify-bulk .btn-primary-glass {
    padding: 0.55rem 1.2rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
}

.modal-classify-bulk .btn-secondary-glass {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.modal-classify-bulk .btn-secondary-glass:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-classify-bulk .btn-primary-glass {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.3)) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #ffffff !important;
}

.modal-classify-bulk .btn-primary-glass:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.55), rgba(139, 92, 246, 0.45));
}

.modal-classify-bulk .btn-primary-glass:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* SP4 hotfix — Continuer batch suivant (timeout Render 30s, voir
   accounting_event_bilans.event_bilan_classify_auto_ai). */
.results-summary-remaining {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #F59E0B;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.results-summary-remaining p {
    margin: 0.3rem 0;
}

.btn-continue-batch {
    margin-top: 0.6rem;
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 0.5rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-continue-batch:hover {
    background: rgba(245, 158, 11, 0.25);
}

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

/* SP5 — Wizard PDF SACEM/Ville/Générique : CSS retiré le 2026-05-09 (modale UI
   non cohérente avec ebPdfModal existant). Backend WeasyPrint reste actif.
   À refaire propre dans une session UX qui consolide ebPdfModal + WeasyPrint. */

/* Label DOM "Du :" / "Sim :" / "Total :" inline dans une cellule. Masque sur
   desktop (le header de colonnes se charge d'identifier la valeur), visible sur
   mobile uniquement. Rester dans le DOM = lecteurs d'ecran fonctionnent (vs
   ::before generated content qui n'est pas expose en accessibilite). */
.eb-mobile-label { display: none; }

/* === FIX MOBILE 2026-05-09 — burger overlap + bilan event prestataires === */
@media (max-width: 768px) {
    /* --- Bug 1 : burger menu (44x44 fixed top-left) recouvrait les titres
       de cards 'RESULTAT' et 'Comptes Bancaires' lors du scroll sur le hub
       compta. Fond + ombre renforces pour le rendre lisible meme en flottant
       au-dessus du contenu, et padding-top du main passe de 60 a 70 pour
       liberer un peu plus d'espace. */
    #sidebar-toggle {
        background: rgba(15, 23, 42, 0.95) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                    0 0 0 4px rgba(15, 23, 42, 0.6) !important;
        /* 44x44 minimum touch-friendly maintenu (WCAG / Apple HIG). */
    }
    /* Le burger menu est fixed top-left (16+44=60px). Le padding-top sur
       .orkya-main suffit a liberer la zone burger ; un padding-left
       supplementaire decalait tout le contenu vers la droite de maniere
       asymetrique (incident prod 2026-05-10 : Cockpit Manager mobile
       avait 64px gauche / 16px droite, contenu visuellement decentre).
       Le burger flotte naturellement par-dessus en scroll, le contenu
       passe dessous sans collision. */
    .orkya-main { padding-top: 64px !important; }

    /* Le tiroir du catalogue s'ouvre collé en haut de l'écran, et son en-tête
       est `sticky top: 0` : le burger fixe (16 + 44 = 60 px) recouvrait donc
       les premières lettres du titre — « Lyre Wash Zoom… » s'affichait
       « re Wash Zoom… » sur CHAQUE fiche.

       On décale uniquement l'EN-TÊTE DU TIROIR, pas `.orkya-main` : ajouter un
       padding gauche au contenu principal avait décentré tout l'écran en mai
       2026 (Cockpit Manager, 64 px à gauche contre 16 à droite). Ici le titre
       est aligné à gauche et la croix à droite : décaler le titre est
       exactement l'effet voulu, et la croix ne bouge pas. */
    .catalog-drawer-header { padding-left: 4.5rem; }

    /* App-card "Comptes Bancaires" et apparentees : le row trigger interne
       a 2 sous-divs (icone+nom a gauche, badge+montant+chevron a droite).
       Avec 60px de padding-left sur le container, la largeur dispo passe
       a ~270px et le badge "1..." se faisait tronquer. On reduit le
       padding interne du trigger + on autorise le wrap du sous-bloc droit
       en colonne pour eviter la tronquature. */
    .app-card > div[onclick*="toggleBank"],
    .app-card > div[onclick*="toggleAccount"] {
        padding: 0.7rem 0.6rem !important;
        gap: 0.4rem !important;
        flex-wrap: wrap;
    }
    .app-card > div[onclick*="toggleBank"] > div:last-child,
    .app-card > div[onclick*="toggleAccount"] > div:last-child {
        gap: 0.4rem !important;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    /* --- Bug 2 : grid 6 colonnes du bilan event explosait les chiffres
       (montants wrappes caractere par caractere, noms prestataires sur
       4-5 lignes). En mobile : flex column avec chevron en absolute,
       nom + meta en haut, montants en ligne nowrap dessous. */
    .eb-sup-summary {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
        padding: 0.7rem 0.75rem 0.7rem 2.25rem !important;
        position: relative;
    }
    .eb-sup-summary > i.eb-sup-chev {
        position: absolute;
        top: 0.95rem;
        left: 0.7rem;
    }
    .eb-supplier-name {
        font-size: 0.92rem !important;
        word-break: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
    .eb-supplier-meta {
        font-size: 0.7rem !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    /* Montants Du / Simulation : nowrap obligatoire, label DOM .eb-mobile-label
       (rendu uniquement en mobile, masque par .eb-mobile-label en desktop ci-dessous)
       pour qu'on comprenne quelle valeur est laquelle. Pas de ::before generated
       content : invisible aux lecteurs d'ecran (CodeRabbit Major). */
    .eb-sup-summary > .eb-supplier-due,
    .eb-sup-summary > .eb-supplier-paid,
    .eb-sup-summary > .eb-supplier-prorata {
        display: inline-block !important;
        text-align: left !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        margin-right: 1rem;
    }
    .eb-sup-summary .eb-mobile-label {
        display: inline;
        color: #94a3b8;
        font-weight: 500;
        font-size: 0.7rem;
        margin-right: 0.25rem;
    }
    /* Le pourcentage badge (6e child = wrapper du span eb-supplier-pct,
       apres ajout de la colonne Deja paye) et les boutons d'action
       (last child) sur la meme ligne, alignes a droite. */
    .eb-sup-summary > div:nth-child(6) {
        display: inline-flex !important;
        align-items: center;
    }
    .eb-sup-summary > div:last-child {
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 0.3rem;
    }
    /* Cacher la ligne d'en-tete des colonnes (Prestataire / Total du /
       Simulation) : inutile en mode colonne unique. */
    #ebSuppliersWrap > div:first-child[style*="grid-template-columns"] {
        display: none !important;
    }

    /* Ligne transaction : meme principe — flex column pour eviter le
       wrap caractere par caractere des montants. */
    .eb-tx-line {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
        padding: 0.6rem 0.5rem !important;
    }
    .eb-tx-line .eb-tx-info { width: 100%; min-width: 0; }
    .eb-tx-line .eb-tx-info .eb-tx-label-strong {
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 0.82rem;
    }
    .eb-tx-line .eb-tx-amounts {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        white-space: nowrap;
    }
}

/* ============================================================ */
/* TX Drawer (édition transaction inline)                       */
/* ============================================================ */
.tx-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.tx-drawer-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}
.tx-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(560px, 100vw);
    height: 100vh;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}
.tx-drawer[data-open="true"] {
    transform: translateX(0);
}
.tx-drawer-header {
    /* Header sticky : reste visible meme quand le body scrolle (utile sur
       form long ou mobile bottom-sheet). */
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(12px);
    z-index: 2;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tx-drawer-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tx-drawer-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}
.tx-drawer-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}
/* Le form wrap body + footer : il doit propager le flex column pour que
   body grandisse et footer reste sticky au bas du drawer. */
.tx-drawer > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tx-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 0;
}
.tx-drawer-footer {
    /* flex-shrink: 0 garantit que le footer reste visible meme quand le body
       est plus grand que la zone disponible (typique en mobile bottom-sheet). */
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 42, 0.97);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* Quand le drawer est ouvert, on masque le widget Support / Intercom qui
   chevauche le footer en mobile (bug visuel signale dans l'audit du 10/05). */
body:has(.tx-drawer[data-open="true"]) .sw-fab,
body:has(.tx-drawer[data-open="true"]) .sw-panel,
body:has(.tx-drawer[data-open="true"]) .intercom-launcher,
body:has(.tx-drawer[data-open="true"]) .intercom-lightweight-app-launcher,
body:has(.tx-drawer[data-open="true"]) #intercom-container {
    display: none !important;
}
.tx-drawer .form-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #cbd5e1;
}
.tx-drawer .form-label input,
.tx-drawer .form-label select,
.tx-drawer .form-label textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    width: 100%;
}
.tx-drawer .form-label input:focus,
.tx-drawer .form-label select:focus,
.tx-drawer .form-label textarea:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.tx-drawer .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.tx-drawer .form-err {
    color: #f87171;
    font-size: 0.75rem;
}
.tx-drawer .btn-primary,
.tx-drawer .btn-secondary,
.tx-drawer .btn-cancel,
.tx-drawer .btn-danger {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.tx-drawer .btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.tx-drawer .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.tx-drawer .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}
.tx-drawer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}
.tx-drawer .btn-cancel {
    background: transparent;
    color: #94a3b8;
}
.tx-drawer .btn-cancel:hover {
    color: #e2e8f0;
}
.tx-drawer .btn-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}
.tx-drawer .btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fff;
}
.tx-drawer .proof-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #818cf8;
    font-size: 0.8rem;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .tx-drawer {
        width: 100%;
        height: 92vh;
        top: auto;
        bottom: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .tx-drawer[data-open="true"] {
        transform: translateY(0);
    }
    .tx-drawer .form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ */
/* TX Drawer balance card (solde courant + projete temps reel)  */
/* ============================================================ */
.tx-drawer-balance-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.tx-drawer-balance-label {
    font-size: 0.75rem;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.tx-drawer-balance-row {
    display: flex; justify-content: space-between; align-items: baseline;
    color: #cbd5e1;
    font-size: 0.85rem;
    padding: 0.25rem 0;
}
.tx-drawer-balance-row strong {
    font-size: 1rem;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}
.tx-drawer-balance-row strong small {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
}
.tx-drawer-balance-projected {
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    animation: tx-balance-fade-in 0.2s ease;
}
.tx-drawer-balance-projected.positive strong { color: #34d399; }
.tx-drawer-balance-projected.negative strong { color: #f87171; }
@keyframes tx-balance-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* Cmd+K mobile FAB (icone loupe en bas-droite, mobile only)    */
/* ============================================================ */
.cmdk-fab-mobile {
    display: none;
}
@media (max-width: 768px) {
    .cmdk-fab-mobile {
        position: fixed;
        right: 1rem;
        bottom: 5rem;
        z-index: 990;
        width: 48px; height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border: none;
        color: #fff;
        font-size: 1.05rem;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
        transition: transform 0.2s;
    }
    .cmdk-fab-mobile:active { transform: scale(0.92); }
    body:has(.tx-drawer[data-open="true"]) .cmdk-fab-mobile {
        display: none !important;
    }
}

/* ============================================================ */
/* TX Confirm Modal (modale custom remplace hx-confirm natif)   */
/* ============================================================ */
.tx-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tx-confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}
.tx-confirm-modal-card {
    position: relative;
    width: min(420px, 100%);
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: tx-confirm-pop 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tx-confirm-pop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
.tx-confirm-modal-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.tx-confirm-modal-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: #f1f5f9;
}
.tx-confirm-modal-card p {
    margin: 0 0 1.25rem;
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.5;
}
.tx-confirm-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
[x-cloak] { display: none !important; }

/* ============================================================ */
/* Layout fixes sidebar + dashboard mobile + tabs scrollables   */
/* ============================================================ */
/* Bug : sidebar fixed 60px ecrase le bord gauche du contenu sur les
   pages avec .dashboard-container. On compense avec un padding-left. */
@media (min-width: 769px) {
    /* Centrage dans la ZONE VISIBLE (après la sidebar fixe 60px), marges
       symétriques 24px min de chaque côté — l'ancien padding-left:76px seul
       collait le contenu au bord droit (constat Alan 19/07).
       margin-left = max(sidebar+24, centre visuel) ; le reste part à droite. */
    .dashboard-container {
        width: calc(100% - 108px); /* 60 sidebar + 24 + 24 */
        max-width: 1400px;
        margin-left: max(84px, calc(50% - 700px + 30px));
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Bug mobile dashboard : KPI dedoublement visuel cause par un overlay
   sticky-header. On supprime tout overlay residuel sur les KPI mobiles. */
@media (max-width: 768px) {
    .accounting-kpi-grid > *,
    .dashboard-stats-row > * {
        position: relative !important;
        z-index: 1;
    }
    /* Si un pseudo-element a ete cree pour effet sticky double, on le neutralise */
    .accounting-kpi-grid > *::before,
    .accounting-kpi-grid > *::after,
    .dashboard-stats-row > *::before,
    .dashboard-stats-row > *::after {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Tabs documents/recherche : scroll horizontal sur mobile au lieu d'overflow */
@media (max-width: 768px) {
    .doc-filter-tabs,
    .documents-filters,
    .filter-tabs-row,
    [class*="tab-row"],
    [class*="filters-row"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .doc-filter-tabs::-webkit-scrollbar,
    .documents-filters::-webkit-scrollbar,
    .filter-tabs-row::-webkit-scrollbar {
        display: none;
    }
    .doc-filter-tabs > *,
    .documents-filters > *,
    .filter-tabs-row > * {
        flex-shrink: 0;
    }
}

/* ============================================================ */
/* TX cards mobile (remplace le tableau sous 768px)            */
/* ============================================================ */
.tx-cards-mobile { display: none; }

@media (max-width: 768px) {
    .tx-table-wrap { display: none !important; }
    .tx-cards-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.75rem;
    }
    .tx-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 0.85rem 1rem;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }
    .tx-card:hover,
    .tx-card:active {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
    }
    .tx-card-bank { border-left: 3px solid #38bdf8; }
    .tx-card-reco { border-left: 3px solid #34d399; }
    .tx-card-doc { border-left: 3px solid #a78bfa; }
    .tx-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.75rem;
        color: #94a3b8;
        margin-bottom: 0.4rem;
        gap: 0.5rem;
    }
    .tx-card-date {
        font-weight: 600;
        color: #cbd5e1;
    }
    .tx-card-label {
        font-size: 0.95rem;
        color: #f1f5f9;
        font-weight: 500;
        margin-bottom: 0.25rem;
        line-height: 1.3;
        word-break: break-word;
    }
    .tx-card-supplier {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-bottom: 0.4rem;
    }
    .tx-card-amount {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .tx-card-amount.positive { color: #34d399; }
    .tx-card-amount.negative { color: #f87171; }
    .tx-card-meta {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
        font-size: 0.7rem;
        align-items: center;
    }
    .tx-card-event,
    .tx-card-category {
        background: rgba(255, 255, 255, 0.04);
        padding: 0.2rem 0.55rem;
        border-radius: 6px;
        color: #cbd5e1;
        white-space: nowrap;
    }
    .tx-card-empty {
        text-align: center;
        padding: 2.5rem 1rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .tx-card-empty i {
        display: block;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
}

/* =================================================================
 * Cmd+K Spotlight — overlay de recherche globale
 * Linear/Notion-style. Glassmorphism dark theme ORKYA.
 * Visibilite pilotee par [data-open="true"] (pas x-show, sinon
 * conflit avec display:flex via Alpine — cf. CLAUDE.md piege 9).
 * ================================================================= */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9990;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}
.cmdk-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}
.cmdk-panel {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%) scale(0.97);
    width: min(640px, 92vw);
    max-height: 70vh;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    z-index: 9991;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}
.cmdk-panel[data-open="true"] {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}
.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.cmdk-input {
    flex: 1;
    background: none !important;
    border: none !important;
    color: #f1f5f9 !important;
    font-size: 1rem;
    outline: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.cmdk-input::placeholder {
    color: var(--text-muted);
}
.cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    min-height: 80px;
}
.cmdk-results::-webkit-scrollbar {
    width: 6px;
}
.cmdk-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.cmdk-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    padding: 0.75rem 0.75rem 0.4rem;
}
.cmdk-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    color: #e2e8f0;
    text-decoration: none;
}
.cmdk-result.active,
.cmdk-result:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #f1f5f9;
}
.cmdk-result-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.15);
    color: #a78bfa;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.cmdk-result-main {
    flex: 1;
    min-width: 0;
}
.cmdk-result-title {
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmdk-result-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmdk-result-amount {
    font-size: 0.85rem;
    font-weight: 600;
    color: #34d399;
    flex-shrink: 0;
    white-space: nowrap;
}
.cmdk-result-amount.negative {
    color: #f87171;
}
.cmdk-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.cmdk-empty i {
    margin-right: 0.4rem;
}
.cmdk-hint {
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}
.cmdk-kbd {
    padding: 0.1rem 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: #cbd5e1;
}
@media (max-width: 640px) {
    .cmdk-panel {
        top: 8vh;
        max-height: 80vh;
        width: 94vw;
    }
    .cmdk-hint {
        gap: 0.5rem;
        font-size: 0.65rem;
    }
}

/* =================================================================
 * Filtres avances accordeon + selection mode (transaction_list)
 * Hierarchie des filtres (audit design 08/2026) : la 1re rangee
 * (type + statut) reste TOUJOURS visible — ce sont les deux
 * questions qu'un tresorier se pose en arrivant sur l'ecran.
 * Le reste (source, paye/non paye, filtres evenement, options
 * d'affichage — 4 rangees) est replie derriere le bouton
 * "Filtres avances", en accordeon a TOUS les breakpoints.
 * Avant : replie seulement en mobile ; sur desktop les 5 rangees
 * restaient empilees en permanence devant le tresorier.
 *  - Bouton "Sélectionner" : reste mobile uniquement, les checkboxes
 *    de selection sont deja visibles en permanence dans la 1re
 *    colonne du tableau desktop.
 * ================================================================= */
.tx-filters-toggle,
.tx-selection-toggle {
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    margin-bottom: 0.6rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.tx-filters-toggle {
    display: flex;
    background: rgba(99, 102, 241, 0.12);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.tx-filters-toggle:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(139, 92, 246, 0.45);
}
.tx-filters-toggle .badge {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.25rem;
    line-height: 1.2;
}
.tx-selection-toggle {
    display: none;
    background: rgba(15, 23, 42, 0.5);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.tx-selection-toggle:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}
.tx-selection-toggle.active {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
}

/* Panel filtres avances : replie par defaut, a tous les breakpoints
   (desktop compris — c'est le coeur du fix hierarchie). */
.tx-filters-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* `visibility` en plus : sans elle, les 4 rangees de filtres repliees
       restaient focalisables au clavier et annoncees par un lecteur d'ecran —
       on traversait donc une vingtaine de controles invisibles avant
       d'atteindre le tableau. Meme correction que pour les bulles flottantes.
       Le delai suit la duree du repli, sinon le contenu disparait avant la fin
       de l'animation. */
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease,
                visibility 0s linear 0.3s;
}
.tx-filters-panel.open {
    visibility: visible;
    transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s;
    /* Assez haut pour ne jamais rogner le panneau deplie : en 390px les
       rangees s'empilent et depassent largement 1200px, le contenu etait
       alors coupe sans que rien ne l'indique. `overflow:hidden` est conserve
       pour l'animation, d'ou la necessite d'une borne genereuse. */
    max-height: 4000px;
    opacity: 1;
    margin-bottom: 0.5rem;
}

/* Checkbox dans les cards mobile : cachee par defaut. */
.tx-card .tx-select-wrap {
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: 0.4rem;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
}
.tx-card .tx-select-wrap .tx-select {
    width: 18px;
    height: 18px;
    accent-color: #8b5cf6;
    cursor: pointer;
}

@media (max-width: 768px) {
    .tx-selection-toggle { display: flex; }

    /* Selection mode actif : afficher les checkboxes dans les cards. */
    body[data-tx-selection-mode="1"] .tx-card .tx-select-wrap {
        display: inline-flex;
    }
    /* Surligner discretement les cards en mode selection */
    body[data-tx-selection-mode="1"] .tx-card {
        border-color: rgba(139, 92, 246, 0.25);
    }
    body[data-tx-selection-mode="1"] .tx-card:has(.tx-select:checked) {
        background: rgba(139, 92, 246, 0.1);
        border-color: rgba(139, 92, 246, 0.45);
    }
}

/* === OUTREACH FUNNEL (landing perso /decouvrir/) === */

[x-cloak] { display: none !important; }

.outreach-root {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.outreach-hero {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
    position: relative;
}
.outreach-hero h1 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 0 0 1rem 0;
    background: var(--premium-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.outreach-hero .subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--text-secondary, #94a3b8);
    max-width: 640px;
    margin: 0 auto 1.25rem;
    font-weight: 500;
}
.outreach-hero-text {
    color: var(--text-secondary, #94a3b8);
    max-width: 540px;
    margin: 0 auto 2.5rem;
    font-size: 1rem;
    line-height: 1.6;
}
.outreach-logo-wrap {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.outreach-logo {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.outreach-logo-wrap--orkya {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(245,158,11,0.10));
    border-color: rgba(99, 102, 241, 0.35);
}
.outreach-slots-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    padding: 0.45rem 0.95rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.outreach-cta {
    min-height: 48px;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.outreach-funnel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 4rem;
    animation: outreachFadeIn 0.3s ease;
}
.outreach-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 100;
}
.outreach-progress-bar {
    height: 100%;
    background: var(--premium-gradient);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.outreach-back-btn {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 99;
}
.outreach-question {
    max-width: 720px;
    width: 100%;
    text-align: center;
    animation: outreachSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.outreach-question h2 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}
.outreach-hint {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.9rem;
    margin: 0 0 2rem 0;
}
.outreach-question h2 + .outreach-options {
    margin-top: 2.5rem;
}
.outreach-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    text-align: left;
}
@media (min-width: 768px) {
    .outreach-options.cols-2 { grid-template-columns: 1fr 1fr; }
}
.outreach-option {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    color: var(--text-primary, #ffffff);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    width: 100%;
    font-family: inherit;
}
.outreach-option:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);
}
.outreach-option.is-selected {
    border-color: var(--accent-primary, #6366f1);
    background: rgba(99, 102, 241, 0.12);
}
.outreach-option .check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.outreach-option.is-selected .check-icon {
    background: var(--accent-primary, #6366f1);
    border-color: var(--accent-primary, #6366f1);
}
.outreach-option.is-selected .check-icon::before {
    content: '\2713';
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}
.outreach-pre-input-wrap {
    margin: 0 0 1rem 0;
    text-align: left;
}
.outreach-pre-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text-primary, #ffffff);
    font-size: 1rem;
    margin-top: 0.5rem;
    font-family: inherit;
}
.outreach-pre-input:focus {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
}
.outreach-multi-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.outreach-loading {
    color: var(--text-secondary, #94a3b8);
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.outreach-recap {
    max-width: 720px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
    animation: outreachFadeIn 0.5s ease;
}
.outreach-recap h2 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    color: var(--text-primary, #ffffff);
}
.outreach-recap-summary {
    font-size: 1.05rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}
.outreach-recap-summary strong {
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}
.outreach-plan-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.outreach-plan-card .plan-name {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-warning, #f59e0b);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.outreach-plan-card .plan-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin-bottom: 0.75rem;
}
.outreach-plan-card .plan-price {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    margin-bottom: 0.25rem;
    line-height: 1.1;
}
.outreach-plan-card .plan-price-original {
    color: var(--text-muted, #64748b);
    text-decoration: line-through;
    font-size: 1rem;
    margin-left: 0.5rem;
    font-weight: 400;
}
.outreach-plan-card .plan-suffix {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.9rem;
}
.outreach-early-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin: 0 0 1rem 0;
}
.outreach-early-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}
.outreach-early-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    color: var(--text-primary, #ffffff);
    line-height: 1.5;
}
.outreach-early-list li::before {
    content: '\2713';
    color: #10b981;
    font-weight: 700;
    flex-shrink: 0;
}
.outreach-recap-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .outreach-recap-ctas { flex-direction: row; align-items: center; }
}
.outreach-secondary-cta {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes outreachFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes outreachSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .outreach-back-btn { top: 1rem; left: 1rem; }
    .outreach-option {
        padding: 1rem 1.25rem;
        min-height: 60px;
        font-size: 0.95rem;
    }
    .outreach-hero { padding: 3rem 1.25rem; min-height: 100vh; }
    .outreach-funnel { padding: 4rem 1.25rem 3rem; }
    .outreach-recap { padding: 4rem 1.25rem 3rem; }
    .outreach-recap-ctas .cta-primary,
    .outreach-recap-ctas .outreach-secondary-cta {
        width: 100%;
    }
}

/* Gating Y2 : icone confirmation + box d'attente */
.outreach-confirm-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800;
    margin-bottom: 20px;
}
.outreach-gated-box {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 28px 0;
    text-align: left;
}
.outreach-gated-title {
    font-family: monospace;
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.5px;
    color: #f59e0b;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.outreach-gated-msg {
    font-size: 14.5px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 0 8px 0;
}
.outreach-gated-msg:last-child { margin-bottom: 0; }

/* === EARLY ADOPTER BANNER (signup) === */
.early-adopter-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(245,158,11,0.08));
    border: 1px solid rgba(99,102,241,0.35);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary, #fff);
}
.early-adopter-banner > i {
    color: var(--accent-warning, #f59e0b);
    font-size: 1.5rem;
    flex-shrink: 0;
}
.early-adopter-banner strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.early-adopter-banner p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

/* === HONEYPOT ANTI-BOT (signup Programme Fondateurs) === */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/* === QG OUTREACH === */
/* Badges de statut prospect (CRM) */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.status-badge.status-a_contacter {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.status-badge.status-contacte {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.status-badge.status-a_visite_landing {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.3);
}
.status-badge.status-funnel_demarre {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.status-badge.status-funnel_complete {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}
.status-badge.status-compte_cree {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.status-badge.status-client_actif {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.status-badge.status-perdu {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.status-badge.status-pas_interesse {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Badges de temperature */
.temp-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}
.temp-badge.temp-chaud {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.temp-badge.temp-tiede {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.temp-badge.temp-froid {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}


/* === Accessibilité : contenu visible uniquement pour les lecteurs d'écran === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* =========================================================================
   Modale PaiementCompta — refonte rapprochement V2 (Phase C)
   Composant inclus depuis core/templates/hubs/accounting/_paiement_modal.html
   Reutilise les tokens visuels existants (.eb-modal / glassmorphism).
   ========================================================================= */
.paiement-facture-info {
    padding: 14px;
    margin-bottom: 18px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.20);
    border-radius: 14px;
}
.paiement-facture-info strong {
    display: block;
    color: #fff;
    font-weight: 800;
}
.paiement-facture-label {
    color: #94a3b8;
    font-size: 0.85rem;
    display: block;
    margin-top: 4px;
}
.paiement-facture-amounts {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #94a3b8;
}
.paiement-facture-amounts strong {
    display: inline;
    color: #fff;
}
.paiement-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: #94a3b8;
}
.paiement-field input,
.paiement-field select {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
}
.paiement-field input:focus,
.paiement-field select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.paiement-quick-btns {
    display: flex;
    gap: 8px;
    margin: -8px 0 14px;
}
.paiement-quick-btns button {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: #fcd34d;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.78rem;
    transition: background 0.2s ease;
}
.paiement-quick-btns button:hover {
    background: rgba(245, 158, 11, 0.20);
}
.eb-tx-paiement-btn {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: #fcd34d;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.eb-tx-paiement-btn:hover {
    background: rgba(245, 158, 11, 0.22);
    transform: translateY(-1px);
}

/* --- COOKIE CONSENT BANNER (Consent Mode v2, pages publiques) --- */
.cookie-consent-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 720px;
    margin: 0 auto;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.cookie-consent-banner[hidden] { display: none; }
.cookie-consent-text { flex: 1; min-width: 0; }
.cookie-consent-text strong {
    display: block;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.cookie-consent-text p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.5;
}
.cookie-consent-text a { color: #a5b4fc; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-consent-accept {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
}
.cookie-consent-accept:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: transparent;
}
@media (max-width: 640px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .cookie-consent-actions .btn-action-glass { flex: 1; }
}

/* ============================================================
   MODAL DISPONIBILITÉ MATÉRIEL (fiche demande QG) — .qgm-*
   Maquette : docs/superpowers/assets/2026-07-19-mockup-modal-dispo-A2.html
   ============================================================ */
.qgm-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(4, 8, 18, 0.72); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px 12px;
}
.qgm-mono { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; }
.qgm {
    width: 100%; max-width: 680px; max-height: 92vh; display: flex; flex-direction: column;
    background: #101728; border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 22px; overflow: hidden; color: #e6ecf5;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 90px rgba(2,6,17,0.75);
}
.qgm-head { padding: 18px 20px 0; flex-shrink: 0; }
.qgm-head-top { display: flex; justify-content: space-between; gap: 12px; }
.qgm-eyebrow {
    font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.16em; color: #f59e0b; text-transform: uppercase; font-weight: 700;
}
.qgm-title { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; margin: 4px 0 0; line-height: 1.25; color: #fff; }
.qgm-meta { margin-top: 5px; font-size: 11.5px; color: #8b98ad; }
.qgm-meta .qgm-mono { color: #e6ecf5; font-size: 11px; }
.qgm-x {
    width: 30px; height: 30px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.10);
    background: #0c1220; color: #8b98ad; font-size: 13px; flex-shrink: 0; cursor: pointer;
}
.qgm-kpis { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; margin-top: 16px; }
.qgm-kpi { background: #0c1220; border: 1px solid rgba(148,163,184,0.06); border-radius: 14px; padding: 10px 12px; position: relative; }
.qgm-kpi::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2.5px; border-radius: 2px; background: #5b6a80; }
.qgm-kpi--bad::before { background: #fb7185; }
.qgm-kpi--ok::before { background: #2dd4a7; }
.qgm-kpi-l { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6a80; font-weight: 700; }
.qgm-kpi-v { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; margin-top: 3px; color: #e6ecf5; }
.qgm-kpi--bad .qgm-kpi-v { color: #fb7185; }
.qgm-kpi--ok .qgm-kpi-v { color: #2dd4a7; }
.qgm-kpi-s { font-size: 9.5px; color: #8b98ad; margin-top: 1px; }
.qgm-seg { display: flex; background: #0c1220; border: 1px solid rgba(148,163,184,0.06); border-radius: 12px; padding: 4px; gap: 4px; margin-top: 16px; }
.qgm-sg {
    flex: 1; text-align: center; padding: 8px 4px; border-radius: 9px; font-size: 11.5px;
    font-weight: 800; color: #8b98ad; background: none; border: none; cursor: pointer;
}
.qgm-sg small { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.8; margin-left: 3px; }
.qgm-sg.qgm-sg--on {
    background: linear-gradient(135deg, rgba(99,102,241,0.9), rgba(139,92,246,0.9));
    color: #fff; box-shadow: 0 3px 12px rgba(99,102,241,0.35);
}
.qgm-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.qgm-slabel {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: #5b6a80; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
}
.qgm-slabel .qgm-mono { font-size: 9.5px; color: #8b98ad; text-transform: none; letter-spacing: 0.04em; }
/* Heatmap */
.qgm-cal { background: #0c1220; border: 1px solid rgba(148,163,184,0.06); border-radius: 16px; padding: 14px; }
.qgm-cal-head, .qgm-cal-row { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 4px; margin-bottom: 4px; align-items: center; }
.qgm-cal-head span, .qgm-cal-wk { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 8.5px; color: #5b6a80; text-align: center; }
.qgm-cal-wk { text-align: left; }
.qgm-c {
    height: 24px; border-radius: 5px; background: rgba(45,212,167,0.14); position: relative;
    font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; color: rgba(230,236,245,0.55);
}
.qgm-c--partiel { background: rgba(251,191,36,0.35); color: #241a02; }
.qgm-c--plein {
    background: repeating-linear-gradient(45deg, rgba(251,113,133,0.5), rgba(251,113,133,0.5) 4px, rgba(251,113,133,0.35) 4px, rgba(251,113,133,0.35) 8px);
    color: #2b070d;
}
.qgm-c--prov { background: repeating-linear-gradient(45deg, rgba(139,92,246,0.30), rgba(139,92,246,0.30) 4px, rgba(139,92,246,0.14) 4px, rgba(139,92,246,0.14) 8px); }
.qgm-c--demande { outline: 1.5px solid #6366f1; outline-offset: 1px; }
.qgm-c--today::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0.9; }
.qgm-legende { display: flex; gap: 12px; margin-top: 10px; font-size: 9.5px; color: #8b98ad; flex-wrap: wrap; }
.qgm-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.qgm-sw--ok { background: rgba(45,212,167,0.4); }
.qgm-sw--partiel { background: rgba(251,191,36,0.5); }
.qgm-sw--plein { background: rgba(251,113,133,0.6); }
.qgm-sw--prov { background: repeating-linear-gradient(45deg, rgba(139,92,246,0.5), rgba(139,92,246,0.5) 2px, rgba(139,92,246,0.2) 2px, rgba(139,92,246,0.2) 4px); }
.qgm-sw--demande { outline: 1.5px solid #6366f1; outline-offset: 1px; background: none; }
.qgm-verdict {
    margin-top: 14px; display: flex; align-items: flex-start; gap: 10px;
    border-radius: 12px; padding: 11px 13px; font-size: 12px; line-height: 1.5;
    background: rgba(45,212,167,0.06); border: 1px solid rgba(45,212,167,0.2);
}
.qgm-verdict--bad { background: rgba(251,113,133,0.06); border-color: rgba(251,113,133,0.25); }
.qgm-led { width: 8px; height: 8px; border-radius: 50%; background: #2dd4a7; box-shadow: 0 0 10px #2dd4a7; flex-shrink: 0; margin-top: 4px; }
.qgm-verdict--bad .qgm-led { background: #fb7185; box-shadow: 0 0 10px #fb7185; }
/* Bookings */
.qgm-bk {
    border: 1px solid rgba(148,163,184,0.06); background: #0c1220; border-radius: 14px;
    padding: 12px 14px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
}
.qgm-bk-t { font-size: 12.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; color: #fff; }
.qgm-bkled { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.qgm-bkled--devis { background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.8); }
.qgm-bkled--provisoire { background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.6); }
.qgm-bkled--manuel, .qgm-bkled--event { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.7); }
.qgm-bk-cli { font-size: 11px; color: #8b98ad; grid-column: 1; }
.qgm-bk-qty { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #fbbf24; text-align: right; }
.qgm-bk-dates {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
    border-top: 1px dashed rgba(148,163,184,0.10); margin-top: 7px; padding-top: 7px; gap: 8px; flex-wrap: wrap;
}
.qgm-bk-dates .qgm-mono { font-size: 10.5px; color: #e6ecf5; }
.qgm-bk-ret { font-size: 9.5px; color: #8b98ad; }
.qgm-bk-ret b { font-family: ui-monospace, 'JetBrains Mono', monospace; color: #2dd4a7; font-weight: 700; }
.qgm-bk-link { font-size: 10.5px; font-weight: 800; color: #a5b4fc; text-decoration: none; background: none; border: none; cursor: pointer; }
.qgm-vide {
    padding: 14px; border-radius: 12px; background: #0c1220; border: 1px dashed rgba(148,163,184,0.15);
    font-size: 12px; color: #8b98ad; line-height: 1.5;
}
.qgm-bloquer { margin-top: 12px; }
.qgm-bloquer-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.qgm-bloquer-form input {
    background: #0c1220; border: 1px solid rgba(148,163,184,0.12); border-radius: 9px;
    padding: 8px 10px; color: #e6ecf5; font-size: 11.5px; font-family: inherit; flex: 1; min-width: 90px;
}
/* Remplacer */
.qgm-srch {
    display: flex; align-items: center; gap: 9px; background: #0c1220;
    border: 1px solid rgba(148,163,184,0.12); border-radius: 12px; padding: 10px 13px; margin-bottom: 10px;
}
.qgm-srch span { color: #5b6a80; font-size: 13px; }
.qgm-srch input { flex: 1; background: none; border: none; color: #e6ecf5; font-size: 12.5px; font-family: inherit; outline: none; }
.qgm-srch kbd { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 9px; color: #5b6a80; border: 1px solid rgba(148,163,184,0.15); border-radius: 5px; padding: 2px 5px; }
.qgm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.qgm-chip {
    font-size: 10.5px; font-weight: 800; padding: 6px 12px; border-radius: 50px;
    background: none; border: 1px solid rgba(148,163,184,0.12); color: #8b98ad; cursor: pointer;
}
.qgm-chip--on { background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.45); color: #b6bcfd; }
.qgm-chip--dispo.qgm-chip--on { background: rgba(45,212,167,0.10); border-color: rgba(45,212,167,0.35); color: #2dd4a7; }
.qgm-alt {
    border: 1px solid rgba(148,163,184,0.06); background: #0c1220; border-radius: 14px;
    padding: 12px 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.qgm-alt--reco { border-color: rgba(245,158,11,0.35); background: linear-gradient(180deg, rgba(245,158,11,0.05), #0c1220); }
.qgm-alt-tag { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.14em; color: #f59e0b; text-transform: uppercase; font-weight: 700; }
.qgm-alt-t { font-size: 12.5px; font-weight: 800; margin-top: 2px; color: #fff; }
.qgm-alt-m { font-size: 10.5px; color: #8b98ad; margin-top: 2px; }
.qgm-alt-m .qgm-mono { color: #e6ecf5; font-size: 10px; }
.qgm-alt-r { text-align: right; flex-shrink: 0; }
.qgm-alt-av { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: #2dd4a7; display: block; margin-bottom: 7px; }
.qgm-alt-av--warn { color: #fbbf24; }
.qgm-skeleton { height: 58px; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(90deg, #0c1220 25%, #131b30 50%, #0c1220 75%); background-size: 200% 100%; animation: qgm-shimmer 1.2s infinite; }
@keyframes qgm-shimmer { to { background-position: -200% 0; } }
.qgm-confirm {
    margin-top: 10px; padding: 13px 14px; border-radius: 14px;
    background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.3);
    font-size: 12px; line-height: 1.5;
}
.qgm-confirm-choices { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.qgm-radio { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #e6ecf5; cursor: pointer; }
/* Footer + boutons */
.qgm-foot { padding: 13px 20px 16px; border-top: 1px solid rgba(148,163,184,0.06); display: flex; gap: 9px; flex-shrink: 0; }
.qgm-btn {
    flex: 1; padding: 11px 14px; border-radius: 13px; font-size: 12.5px; font-weight: 800;
    border: 1px solid rgba(148,163,184,0.12); background: rgba(255,255,255,0.03); color: #e6ecf5;
    cursor: pointer; font-family: inherit;
}
.qgm-btn--ghost { color: #8b98ad; }
.qgm-btn--primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #f59e0b 140%);
    border: none; color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,0.4);
}
.qgm-btn--sm { flex: none; padding: 8px 16px; border-radius: 50px; font-size: 11px; }
.qgm-btn[disabled] { opacity: 0.5; cursor: default; }
/* Undo toast */
.qgm-undo {
    position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 1300;
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
    background: #131b30; border: 1px solid rgba(99,102,241,0.4); color: #e6ecf5; font-size: 12.5px;
    box-shadow: 0 12px 40px rgba(2,6,17,0.7);
}
.qgm-undo .qgm-btn { flex: none; padding: 7px 14px; }
/* Lignes cliquables + badges fiche */
.qgd-ligne--clickable { cursor: pointer; border-radius: 10px; transition: background 0.15s ease; }
.qgd-ligne--clickable:hover { background: rgba(99,102,241,0.06); }
/* Badges longs (Remplacé, Manque accepté) : autorisés à passer à la ligne,
   sinon le nowrap écrase la colonne titre sur mobile (constat Alan 19/07) */
.qgd-badge--remplace, .qgd-badge--accepte { white-space: normal; text-align: right; max-width: 55%; line-height: 1.35; }
.qgd-badge--remplace { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.qgd-badge--accepte { background: rgba(251,191,36,0.12); color: #fbbf24; }
@media (max-width: 640px) {
    .qgd-ligne { flex-wrap: wrap; }
    .qgd-badge--remplace, .qgd-badge--accepte { max-width: 100%; flex-basis: 100%; text-align: left; }
}
/* Mobile : bottom-sheet + liste de jours */
@media (max-width: 640px) {
    .qgm-overlay { padding: 0; align-items: flex-end; }
    .qgm { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .qgm-kpis { grid-template-columns: 1fr 1fr; }
    .qgm-kpi:last-child { grid-column: 1 / -1; }
    .qgm-cal { display: none; }
    .qgm-cal-jours[hidden] { display: none; }
    .qgm-cal-jours:not([hidden]) { display: block; background: #0c1220; border: 1px solid rgba(148,163,184,0.06); border-radius: 16px; padding: 8px; max-height: 260px; overflow-y: auto; }
    .qgm-jour { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; margin-bottom: 3px; font-size: 11.5px; }
    .qgm-jour .qgm-mono { font-size: 10.5px; }
    .qgm-jour--demande { outline: 1.5px solid #6366f1; outline-offset: -1px; }
    .qgm-jour--ok { background: rgba(45,212,167,0.10); }
    .qgm-jour--partiel { background: rgba(251,191,36,0.16); }
    .qgm-jour--plein { background: rgba(251,113,133,0.16); }
}

/* Pills statut QG (consolidées depuis outreach_detail_v2 — utilisées par
   la fiche demande et les futures pages QG) */
.pill { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pill--amber { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.30); }
.pill--emerald { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.30); }
.pill--indigo { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.30); }
.pill--default { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.08); }

/* Tour : pulse ambre sur le spotlight (etape support fondateur) */
.tour-spotlight--pulse {
    animation: tour-pulse 1.5s ease-in-out infinite;
}
@keyframes tour-pulse {
    0%, 100% { box-shadow: 0 0 0 9999px hsl(222 47% 5% / 0.78), 0 0 35px 4px hsl(38 92% 50% / 0.55); }
    50% { box-shadow: 0 0 0 9999px hsl(222 47% 5% / 0.78), 0 0 55px 14px hsl(38 92% 50% / 0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .tour-spotlight--pulse { animation: none; }
}

/* FAB support : point d'attention persistant tant qu'aucun message envoye */
.sw-fab--nudge::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #0a0e1a;
    animation: sw-nudge 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .sw-fab--nudge::after { animation: none; }
}
@keyframes sw-nudge {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.7; }
}

/* Modale de bienvenue Fondateur — .fw-* (valeurs revues design 19/07) */
.fw-modal {
    max-width: 480px;
    background: #0d1424;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 24px 20px;
    max-height: 85vh;
    overflow-y: auto;
}
.fw-head {
    text-align: left;
    margin-bottom: 20px;
    padding-top: 6px;
    background: radial-gradient(circle at 50% 0%, rgba(245,158,11,0.10), transparent 60%);
}
.fw-eyebrow {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 8px;
}
.fw-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}
.fw-star { color: #f59e0b; margin-right: 4px; }
.fw-blocs { display: flex; flex-direction: column; gap: 10px; }
.fw-bloc {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.fw-bloc--deal {
    background: rgba(245,158,11,0.06);
    border-left: 3px solid #f59e0b;
}
.fw-bloc-ico {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(99,102,241,0.12);
    color: #6366f1;
    font-size: 15px;
}
.fw-bloc-ico--ambre { background: rgba(245,158,11,0.12); color: #f59e0b; }
.fw-bloc-t { font-size: 15px; font-weight: 600; color: #e6ecf5; line-height: 1.35; }
.fw-bloc-d { font-size: 13px; color: #8b98ad; line-height: 1.5; margin-top: 2px; }
.fw-cta {
    width: 100%;
    height: 52px;
    margin-top: 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #f59e0b 140%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(99,102,241,0.35);
}
.fw-micro {
    font-size: 12px;
    color: #8b98ad;
    text-align: center;
    margin: 10px 0 0;
}

/* Burger mobile masque au scroll (retire aussi de l'interaction) */
#sidebar-toggle { transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s; }
#sidebar-toggle.sidebar-toggle--hidden {
    transform: translateY(-72px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================================
   RELANCE FONDATEUR (bandeau app)
   Affiche tant qu'une org Fondateur n'a pas d'abonnement Stripe.
   Voir orkya_base.html pour la condition et le masquage de session.
   ============================================================ */
.founder-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.28);
}
.founder-nudge[hidden] { display: none; }

.founder-nudge-text {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.87rem;
    line-height: 1.5;
}
.founder-nudge-text i { color: #fcd34d; font-size: 1rem; flex-shrink: 0; }
.founder-nudge-text strong { color: #fde68a; font-weight: 800; }

.founder-nudge-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.founder-nudge-cta {
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    /* Fallback assombri (#4f46e5 -> #b45309) : sur l'extremite ambre du
       gradient, du blanc pur ne passe pas le contraste AA. Les stops sont
       assez fonces pour que le libelle reste lisible, et le text-shadow
       garantit la lisibilite au cas ou --premium-gradient serait plus clair. */
    background: var(--premium-gradient, linear-gradient(135deg, #4f46e5, #b45309));
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.founder-nudge-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(99, 102, 241, 0.3);
    color: #fff;
}
.founder-nudge-later {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    transition: color 0.2s ease;
}
.founder-nudge-later:hover { color: var(--text-secondary, #94a3b8); }

@media (max-width: 640px) {
    .founder-nudge { flex-direction: column; align-items: stretch; }
    .founder-nudge-actions { justify-content: space-between; }
}

/* QG — chips de filtre (page Activation). Pastilles compactes lisibles,
   ne passent jamais en pleine largeur (contrairement à .btn-action-glass). */
.qg-chip {
    display: inline-block;
    width: auto;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.07);
    color: var(--text-secondary, #cbd5e1);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.qg-chip:hover {
    border-color: rgba(167, 139, 250, 0.45);
    color: #e2e8f0;
}
.qg-chip.is-active {
    border-color: rgba(167, 139, 250, 0.6);
    background: rgba(167, 139, 250, 0.16);
    color: #c4b5fd;
    font-weight: 600;
}

/* QG — funnel d'activation (page Activation). Responsive : stack sur mobile
   pour ne pas déborder les cartes étroites (label pleine largeur, barre+compte
   en dessous). */
.qg-funnel-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}
.qg-funnel-label {
    flex: 0 0 210px;
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
}
.qg-funnel-track {
    flex: 1 1 auto;
    min-width: 60px;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    height: 14px;
    overflow: hidden;
}
.qg-funnel-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #f59e0b);
}
.qg-funnel-count {
    flex: 0 0 92px;
    text-align: right;
    font-size: 0.78rem;
    color: #94a3b8;
}
@media (max-width: 640px) {
    .qg-funnel-row { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
    .qg-funnel-label { flex-basis: 100%; }
    .qg-funnel-count { flex: 0 0 auto; }
}

/* === Adhérents : bloc « Partager ma page » (cockpit) — team fix === */
.adh-share-card { margin-bottom: 1.5rem; border-color: rgba(99, 102, 241, 0.25); background: linear-gradient(160deg, rgba(99, 102, 241, 0.10), rgba(15, 23, 42, 0.5)); }
.adh-share-row { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.adh-share-qr { border-radius: 12px; background: #fff; padding: 6px; flex-shrink: 0; }
.adh-share-main { flex: 1; min-width: 260px; }
.adh-share-title { margin: 0 0 0.4rem; }
.adh-share-desc { margin: 0 0 0.85rem; }
.adh-share-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.adh-share-link { flex: 1; min-width: 220px; padding: 0.6rem 0.9rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: #c7d2fe; font-size: 0.85rem; overflow-x: auto; white-space: nowrap; }
.adh-share-btn { text-decoration: none; white-space: nowrap; }

/* ===========================================================
   HOME — prix Fondateur barré (section Tarifs de home_v2.html)
   Cohérent avec .fpc-prix-barre de founder_plan_choice.html :
   prix plein barré, gris lisible (AA), à côté du prix Fondateur.
   =========================================================== */
.home-pricing-price-barre {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ===========================================================
   ADHÉRENTS — CSS centralisé (findings CodeRabbit « CSS »)
   Ex-<style> par page + styles inline déplacés ici (CLAUDE.md §5 :
   tout le CSS dans orkyaos.css). Les déclarations reprennent à
   l'IDENTIQUE les blocs d'origine : rendu strictement inchangé.
   Préfixe .adh- pour éviter toute collision globale.
   =========================================================== */

/* ---- Pages publiques : reset <body> (remplace les html,body {...}
   locaux, sans fuir globalement — la couleur de fond du body est
   propagée au canvas). ---- */
.adh-public-body { margin: 0; padding: 0; background: var(--bg-app); font-family: "Inter", sans-serif; color: var(--text); }

/* ---- Auth adhérent : connexion / création d'accès / mot de passe
   (adherent_login.html, request_access.html, set_password.html) ---- */
.adh-auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; overflow: hidden; }
.adh-auth-page::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.18), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(245, 158, 11, 0.14), transparent 50%); }
.adh-auth-card { position: relative; z-index: 1; width: 100%; max-width: 460px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: clamp(2rem, 5vw, 3rem); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.adh-auth-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.adh-auth-brand img { height: 40px; width: auto; border-radius: 8px; }
.adh-auth-brand-name { color: #fff; font-weight: 800; font-size: 1.05rem; }
.adh-auth-h1 { font-size: 1.6rem; font-weight: 900; color: #fff; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.adh-auth-sub { color: #94a3b8; font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.5; }
.adh-auth-form label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.4rem; }
.adh-auth-form input { width: 100%; padding: 0.85rem 1rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 0.95rem; box-sizing: border-box; margin-bottom: 1rem; }
.adh-auth-form input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35); }
.adh-auth-submit { width: 100%; justify-content: center; padding: 0.95rem; font-weight: 800; }
.adh-auth-ok { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7; padding: 1rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.55; }
.adh-auth-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.9rem; }
.adh-auth-footer { text-align: center; margin-top: 1.5rem; color: #94a3b8; font-size: 0.85rem; }
.adh-auth-footer a { color: #a5b4fc; text-decoration: none; font-weight: 700; }
.adh-auth-footer a:hover { color: #c7d2fe; }
.adh-auth-footer--spaced { margin-top: 0.6rem; }
.adh-auth-sep { text-align: center; color: var(--text-muted); font-size: 0.8rem; margin: 1rem 0; position: relative; }
.adh-auth-sep::before, .adh-auth-sep::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: rgba(255, 255, 255, 0.08); }
.adh-auth-sep::before { left: 0; }
.adh-auth-sep::after { right: 0; }
.adh-auth-google { width: 100%; justify-content: center; padding: 0.85rem; text-decoration: none; box-sizing: border-box; }
/* Variante connexion : inputs sombres + focus discret (identique à l'ancien .login-form de adherent_login.html). */
.adh-auth-form--login input { background: rgba(0, 0, 0, 0.25); }
.adh-auth-form--login input:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }

/* ---- checkout_success.html ---- */
.adh-cs-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; overflow: hidden; }
.adh-cs-page::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 30%, rgba(16, 185, 129, 0.2), transparent 50%), radial-gradient(ellipse at 30% 70%, rgba(99, 102, 241, 0.12), transparent 50%); }
.adh-cs-card { position: relative; z-index: 1; max-width: 520px; width: 100%; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 24px; padding: clamp(2rem, 5vw, 3rem); text-align: center; backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(16, 185, 129, 0.15); }
.adh-cs-check { width: 4rem; height: 4rem; border-radius: 50%; background: linear-gradient(135deg, #10b981, #6ee7b7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4); }
.adh-cs-h1 { font-size: 1.75rem; font-weight: 900; color: #fff; margin: 0 0 1rem; letter-spacing: -0.02em; }
.adh-cs-sub { color: var(--text); font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.adh-cs-sub strong { color: #fcd34d; }
.adh-cs-help { color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; margin-bottom: 2rem; }
/* CTA principal : texte foncé = contraste AA sur le gradient ambre (fix local). */
.adh-cs-card .btn-action-primary { color: #1a1206; }
.adh-cs-cta { text-decoration: none; padding: 0.95rem 1.75rem; font-weight: 800; }

/* ---- mon_espace.html (transitions ramenées à 0.3s ease — CLAUDE.md §5) ---- */
.adh-esp-topbar { position: sticky; top: 0; z-index: 50; background: rgba(10, 14, 26, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.adh-esp-topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.adh-esp-brand { display: flex; gap: 0.6rem; align-items: center; color: #fff; font-weight: 800; text-decoration: none; }
.adh-esp-user { color: var(--text-muted); font-size: 0.85rem; }
.adh-esp-section { max-width: 1100px; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) 1.5rem; }
.adh-esp-h1 { font-size: clamp(1.85rem, 4vw, 2.5rem); font-weight: 900; color: #fff; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.adh-esp-lead { color: var(--text-secondary); font-size: 0.95rem; margin: 0 0 2rem; }
.adh-esp-group-title { font-size: 1.1rem; font-weight: 800; color: #fff; margin: 2rem 0 0.85rem; display: flex; align-items: center; gap: 0.55rem; }
.adh-esp-group-title .adh-esp-count { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.adh-esp-pill { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.adh-esp-pill--active { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.adh-esp-pill--confirmed { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.adh-esp-pill--expiring { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.adh-esp-pill--pending { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.adh-esp-pill--expired { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.adh-esp-pill--registered, .adh-esp-pill--renewed, .adh-esp-pill--default { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.adh-esp-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; text-decoration: none; color: var(--text); margin-bottom: 0.6rem; transition: border-color 0.3s ease, transform 0.3s ease; }
a.adh-esp-row:hover { border-color: rgba(99, 102, 241, 0.35); transform: translateY(-1px); }
.adh-esp-row-main { min-width: 0; }
.adh-esp-row-title { font-weight: 800; color: #fff; font-size: 1rem; }
.adh-esp-row-sub { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.15rem; }
.adh-esp-row-aside { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.adh-esp-chevron { color: var(--text-muted); }
.adh-esp-empty { text-align: center; padding: 3rem 1.5rem; background: rgba(15, 23, 42, 0.4); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 18px; color: var(--text-secondary); }
.adh-esp-empty i { font-size: 2rem; color: var(--text-muted); margin-bottom: 0.75rem; display: block; }
.adh-esp-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.9rem; color: #fff; background: linear-gradient(135deg, #6366f1, #f59e0b); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35); }
.adh-esp-benevole-note { color: var(--text-secondary); font-size: 0.9rem; margin: 0.75rem 0 1rem; }

/* ---- cgv.html ---- */
.adh-cgv-wrap { max-width: 780px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 1.25rem; }
.adh-cgv-back { display: inline-flex; align-items: center; gap: 0.4rem; color: #a5b4fc; text-decoration: none; font-weight: 700; font-size: 0.9rem; margin-bottom: 1.5rem; }
.adh-cgv-h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; color: #fff; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.adh-cgv-org { color: #94a3b8; font-size: 0.95rem; margin: 0 0 2rem; }
.adh-cgv-body-text { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem); color: #cbd5e1; font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; }
.adh-cgv-empty { color: #94a3b8; text-align: center; padding: 3rem 1rem; }

/* ---- landing.html (finding 11) — <legend> du groupe de radios
   « Justificatif souhaité ». Reprend le rendu de .adh-field label
   (petit label majuscule) pour rester visuellement identique. ---- */
.adh-justif-legend { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.4rem; padding: 0; }

/* ---- Admin : cartes / icônes / badges partagés
   (dashboard.html, settings.html, detail.html) — s'appliquent en
   complément de .app-card / .app-icon / .badge-os globaux. ---- */
.adh-card-violet { border-color: rgba(99, 102, 241, 0.2); margin-bottom: 1.5rem; }
.adh-card-violet-grad { border-color: rgba(99, 102, 241, 0.25); background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(30, 41, 59, 0.4)); margin-bottom: 1.5rem; }
.adh-card-amber { border-color: rgba(245, 158, 11, 0.2); margin-bottom: 1.5rem; }
.adh-card-amber-grad { border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(145deg, rgba(245, 158, 11, 0.10), rgba(30, 41, 59, 0.4)); margin-bottom: 1.5rem; }
.adh-card-red-grad { border-color: rgba(239, 68, 68, 0.35); background: linear-gradient(145deg, rgba(239, 68, 68, 0.10), rgba(30, 41, 59, 0.4)); margin-bottom: 1.5rem; }
.adh-card-green { border-color: rgba(16, 185, 129, 0.2); margin-bottom: 1.5rem; }
.adh-card-green-grad { border-color: rgba(16, 185, 129, 0.35); background: linear-gradient(145deg, rgba(16, 185, 129, 0.10), rgba(30, 41, 59, 0.4)); margin-bottom: 1.5rem; }
.adh-card-slate { border-color: rgba(148, 163, 184, 0.2); margin-bottom: 1.5rem; }
.adh-ic-violet { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.adh-ic-violet-primary { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
.adh-ic-amber { background: rgba(245, 158, 11, 0.15); color: var(--accent-secondary); }
.adh-ic-red { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.adh-ic-green { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.adh-ic-slate { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.adh-badge-violet { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border: none; }
.adh-badge-violet-soft { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; border: none; }
.adh-badge-amber { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: none; }
.adh-badge-red { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: none; }
.adh-badge-red-link { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: none; text-decoration: none; }
.adh-badge-green { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: none; }
/* Accents texte réutilisés (ex-<strong style="color:…">). */
.adh-c-white { color: #fff; }
.adh-c-amber { color: #fcd34d; }
.adh-c-green { color: #6ee7b7; }
.adh-c-red { color: #fca5a5; }
.adh-c-violet { color: #a5b4fc; }
.adh-c-muted { color: var(--text-muted); }

/* ---- dashboard.html (finding 1 : actions + cartes) ---- */
.adh-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.adh-commission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.adh-commission-val { font-size: 1.2rem; font-weight: 800; color: #fff; }
.adh-commission-val--violet { color: #a5b4fc; }
.adh-commission-val--green { color: #6ee7b7; }
.adh-commission-pct { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.adh-list-mt { margin-top: 1rem; }
.adh-empty-note { color: var(--text-muted); margin-top: 1rem; text-align: center; padding: 1rem; }
.adh-contrib-amount { font-weight: 800; color: #6ee7b7; }

/* ---- detail.html (finding 9 : bloc abonnement / réponses questionnaire) ---- */
.adh-detail-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.adh-detail-block-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.85rem; }
.adh-detail-block-label i { margin-right: 0.35rem; opacity: 0.6; }
.adh-detail-warn-ic { margin-right: 0.35rem; }

/* ---- settings.html (finding 7) — ex-<style> local, scopé .adh-settings
   pour ne pas globaliser des noms génériques (.form-field, .hub-ring-*). ---- */
.adh-settings .hub-ring-title { font-size: 1.3rem; font-weight: 900; color: white; margin-bottom: 0.5rem; }
.adh-settings .hub-ring-desc { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; }
.adh-settings .inv-settings-card { border-color: rgba(99, 102, 241, 0.2); margin-bottom: 1.5rem; }
.adh-settings .inv-settings-icon { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.adh-settings .inv-settings-preview { margin-top: 0.75rem; text-decoration: none; padding: 0.75rem 1.5rem; display: inline-flex; }
.adh-settings .form-field { margin-bottom: 1rem; }
.adh-settings .form-field > label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem; }
.adh-settings .form-field input[type=text],
.adh-settings .form-field input[type=number],
.adh-settings .form-field input[type=date],
.adh-settings .form-field input[type=file],
.adh-settings .form-field textarea,
.adh-settings .form-field select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}
.adh-settings .form-field input[type=file]::file-selector-button {
    background: rgba(99, 102, 241, 0.15); color: #c7d2fe;
    border: 0; border-radius: 8px; padding: 0.45rem 0.9rem;
    margin-right: 0.85rem; cursor: pointer; font-weight: 700;
    transition: background 0.3s ease;
}
.adh-settings .form-field input[type=file]::file-selector-button:hover { background: rgba(99, 102, 241, 0.28); }
.adh-settings .form-field input:focus, .adh-settings .form-field textarea:focus, .adh-settings .form-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.adh-settings .form-field-help { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.3rem; }
.adh-settings .form-field-err { color: #fca5a5; font-size: 0.8rem; margin-top: 0.3rem; }
.adh-settings .form-field-checkbox { display: flex; align-items: center; gap: 0.75rem; }
.adh-settings .form-field-checkbox input[type=checkbox] { width: auto; padding: 0; margin: 0; }
.adh-settings .form-field-checkbox > label { margin: 0; font-size: 0.85rem; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.adh-settings .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .adh-settings .form-row { grid-template-columns: 1fr; } }
.adh-settings .signature-preview { max-width: 200px; max-height: 80px; background: #fff; padding: 6px; border-radius: 6px; margin-top: 8px; display: block; }
.adh-settings .intro-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.adh-settings .intro-toolbar button {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}
.adh-settings .intro-toolbar button:hover { background: rgba(99, 102, 241, 0.2); }
.adh-settings .stripe-onboard-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    border-radius: 100px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #1a1206 !important;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.adh-settings .stripe-onboard-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.5);
    color: #1a1206 !important;
}
.adh-settings .stripe-onboard-cta i { font-size: 0.9rem; }
/* settings — ex-styles inline (scopés pour battre les règles de base ci-dessus). */
.adh-settings .commission-example { margin-top: 1rem; padding: 0.85rem 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 10px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; }
.adh-settings .commission-note { color: var(--text-muted); font-size: 0.8rem; }
.adh-settings .hub-ring-desc.adh-desc-spaced { margin-bottom: 1.25rem; }
.adh-settings .form-field-help.adh-help-tight { margin-top: -0.5rem; margin-bottom: 1rem; }
.adh-settings .form-field-help.adh-help-tight-sm { margin-top: -0.5rem; margin-bottom: 0.4rem; }
.adh-settings .form-field-help.adh-help-mb { margin-bottom: 1rem; }
.adh-settings .form-field-help.adh-help-mt { margin-top: 1rem; }
.adh-settings .adh-form-flush { margin: 0; }
.adh-settings .adh-ic-dim { opacity: 0.6; margin-right: 0.3rem; }
.adh-settings .adh-ic-hint { margin-right: 4px; }
.adh-settings .adh-note-sub { display: block; opacity: 0.75; margin-top: 0.2rem; }
.adh-settings .adh-mb-1 { margin-bottom: 1rem; }
.adh-settings .adh-mt-05 { margin-top: 0.5rem; }
.adh-settings .adh-btn-save { background: var(--accent-primary); border: none; padding: 0.75rem 1.5rem; font-weight: 800; }
/* Barre d'actions de formulaire (settings) — réutilisable. */
.adh-form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---- form_builder.html (finding 10) — ex-<style> local. Les noms .qb-*
   sont déjà uniques : pas de scope nécessaire. ---- */
.qb-intro { color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.6; }
.qb-q {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 0.85rem;
}
.qb-q-top { display: flex; gap: 0.6rem; align-items: flex-start; flex-wrap: wrap; }
.qb-q input[type=text], .qb-q select, .qb-q input.qb-help {
    padding: 0.55rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 0.9rem;
}
.qb-q input.qb-label { flex: 1; min-width: 220px; font-weight: 600; }
.qb-q select.qb-type { min-width: 160px; }
.qb-q input.qb-help { width: 100%; margin-top: 0.5rem; font-size: 0.82rem; }
.qb-choices { margin-top: 0.6rem; padding-left: 0.2rem; }
.qb-choice-row { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; align-items: center; }
.qb-choice-row input { flex: 1; }
.qb-q-actions { display: flex; gap: 0.35rem; align-items: center; }
.qb-iconbtn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25); color: var(--text-secondary); cursor: pointer; font-size: 0.85rem;
}
.qb-iconbtn:hover { color: #fff; border-color: rgba(99, 102, 241, 0.4); }
.qb-iconbtn--danger:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
.qb-req { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.qb-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.qb-chip {
    padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px dashed rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08); color: #a5b4fc; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.qb-chip:hover { background: rgba(99, 102, 241, 0.18); }
.qb-empty { text-align: center; color: var(--text-muted); padding: 2rem 1rem; }
.qb-bar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.qb-section-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 1.5rem 0 0.5rem; }
/* form_builder — ex-styles inline. */
.qb-card { padding: 1.25rem; }
.qb-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.qb-empty-ic { font-size: 1.8rem; opacity: 0.3; display: block; margin-bottom: 0.75rem; }
.qb-add-opt { padding: 0.4rem 0.9rem; }
.qb-chip-ic { font-size: 0.7rem; margin-right: 0.3rem; }

/* ---- Modificateurs de couleur de titre — placés en FIN de section pour
   l'emporter, à specificité égale (0,2,0), sur .adh-settings .hub-ring-title
   (blanc) tout en battant le .hub-ring-title local (0,1,0) de dashboard/detail. ---- */
.hub-ring-title.adh-title-red { color: #fca5a5; }
.hub-ring-title.adh-title-amber { color: #fcd34d; }
.hub-ring-title.adh-title-green { color: #6ee7b7; }

/* ============================================================
   COMPTA — KPI & formulaire exercice
   Extrait des styles inline des templates (CLAUDE.md §5 : tout le
   CSS vit ici). `tabular-nums` aligne les colonnes de chiffres ;
   `clamp()` evite que le montant a 2 decimales deborde en 390px.
   ============================================================ */
.compta-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compta-kpi-value {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.compta-kpi-value--solde { color: var(--accent-cyan); }
.compta-kpi-value--in    { color: var(--accent-success); }
.compta-kpi-value--out   { color: var(--text-danger); }

.fy-form-help {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================
   COMPTA — a11y / mobile (audit accessibilite module comptabilite)
   ============================================================ */

/* Grille "Recettes vs Depenses" + "Top Depenses / Acces rapide" du dashboard :
   figee en 2fr/1fr dans le template (style inline), sans repli mobile -> la
   colonne de gauche s'ecrase et le canvas Chart.js s'effondre a 0px de large
   sous 768px. On empile en 1 colonne, comme les autres grilles compta. */
.compta-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .compta-charts-row { grid-template-columns: 1fr; }
}

/* Pastille de statut transaction (Valide / En attente / Brouillon).
   Deplacee depuis le <style> local de transaction_list.html pour etre
   reutilisable ailleurs (cartes mobile "Derniers Mouvements" du dashboard) —
   une seule feuille CSS, pas de duplication (CLAUDE.md §5). */
.tx-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}
.tx-status-VALIDATED { background: rgba(16,185,129,0.15); color: #34d399; }
.tx-status-PENDING { background: rgba(245,158,11,0.15); color: #fbbf24; }
.tx-status-DRAFT { background: rgba(148,163,184,0.15); color: #94a3b8; }

/* Comparatif d'exercices — état vide et alignement des colonnes chiffrées.
   Extrait des styles inline du template (CLAUDE.md §5 : feuille unique). */
.cmp-empty {
    flex-direction: column;
    text-align: center;
    padding: 3rem;
}

.cmp-empty-icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.cmp-empty-title {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.cmp-empty-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.cmp-th-right { text-align: right; }

/* Total des comptes bancaires (dashboard compta) — doit afficher EXACTEMENT le
   même solde que le KPI. Une classe plutôt qu'un style inline, pour que le test
   de non-régression puisse cibler chaque zone séparément. */
.compta-banques-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   COMPTA — AIDE CONTEXTUELLE (lecture « trésorier bénévole »)
   Ajouté en fin de fichier, bloc autonome : rien de l'existant
   n'est réorganisé (un autre chantier touche ce fichier).
   ------------------------------------------------------------
   POURQUOI : le module comptabilité parle comptable (charges,
   produits, actif, passif, exercice, rapprocher, catégoriser).
   On NE remplace PAS ces mots — un reçu fiscal, une banque ou un
   expert-comptable les emploieront — on garde le terme officiel
   et on colle UNE phrase d'explication à côté.

   PAS DE 3e SYSTÈME D'AIDE : on reprend les deux motifs déjà
   présents dans le projet.
     1. La bulle au survol de components/locked_inline.html
        (fond glass, bord indigo, radius 12px, ombre portée) :
        promue ici en classes parce que le style inline est
        interdit (CLAUDE.md §5), et ouverte aussi au clic et au
        clavier — le survol seul n'existe pas au doigt.
     2. L'encart .cf-info-note de cashflow.html, repris à
        l'identique sous le nom .cpt-callout.

   ANCRAGE : la bulle se positionne sur .cpt-help-host (un BLOC
   pleine largeur : titre de section, carte KPI), jamais sur la
   pastille. C'est ce qui garantit qu'en 390px elle ne déborde
   pas à droite : left:0 + right:0 la bornent aux bords du bloc.

   OUVERTURE : côté template, `@click="open = true"` et NON
   `open = !open`. Au clic à la souris, le navigateur envoie
   mouseenter (qui ouvre) AVANT click : un toggle refermerait
   aussitôt la bulle qu'on vient d'ouvrir. La fermeture passe par
   mouseleave, click.outside, focusout ou Échap.
   ============================================================ */

/* Ancre de positionnement. À poser sur le bloc parent. */
.cpt-help-host { position: relative; }

/* Déclencheur volontairement STATIQUE : la bulle se positionne
   donc par rapport à .cpt-help-host et non par rapport à lui. */
.cpt-help {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.4rem;
}

.cpt-help-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.10);
    color: #a5b4fc;
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cpt-help-btn:hover,
.cpt-help-btn[aria-expanded="true"] {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.45);
    color: #c7d2fe;
}

.cpt-help-btn:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}

/* Cible tactile 44x44 sans grossir la pastille : elle doit rester
   discrète à côté d'un titre, tout en restant attrapable au doigt. */
.cpt-help-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.cpt-help-bubble {
    /* PAS de `display: none` ici : Alpine pilote l'affichage via `x-show`, qui
       retire son style inline pour montrer l'element — une regle de classe
       reprendrait alors le dessus et la bulle ne s'ouvrirait JAMAIS (verifie en
       navigateur). Le flash avant chargement d'Alpine est deja empeche par
       `x-cloak`, present sur le markup, avec sa regle globale `!important`. */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-width: 360px;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    /* Les hôtes sont des titres : majuscules, gras, letter-spacing,
       parfois 2.5rem. Sans ces remises à zéro l'explication en
       hériterait et deviendrait illisible. */
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: var(--text-secondary);
    white-space: normal;
}

/* Légende en flux sous un chiffre. Toujours visible : c'est la
   DÉFINITION du montant affiché, pas une aide optionnelle. */
.cpt-note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

/* Encart pleine largeur — même habillage que .cf-info-note. */
.cpt-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.12);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    color: var(--text-muted);
}

.cpt-callout > i {
    color: #818cf8;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.cpt-callout strong { color: var(--text-secondary); font-weight: 600; }

@media (max-width: 768px) {
    .cpt-help-bubble { font-size: 0.75rem; }
    .cpt-callout { padding: 0.75rem 0.9rem; font-size: 0.78rem; }
}

/* =========================================================================
   MODULE COMPTABILITE — Transactions & Rapprochement bancaire
   Migre depuis les <style> locaux de transaction_list.html et
   reconciliation_hub.html (audit design 08/2026 — CLAUDE.md #5 : tout le
   CSS vit dans ce fichier, jamais de <style> local). Regroupe aussi la
   reduction de palette des badges et la convergence des composants modale
   / bouton qui etaient reinventes plusieurs fois sur le meme ecran.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Badges TX : echelle semantique commune (audit 08/2026, point "couleurs").
   Avant : 7-8 teintes ad hoc, dont un vrai bug — le badge "Payé" d'un
   mouvement bancaire sortant (bank-out) etait en rose, la meme couleur que
   "Non payé", laissant croire a un probleme sur une ligne pourtant deja
   reglee. Desormais chaque couleur porte UN seul sens, reutilise a travers
   les 3 familles de badges (statut / source / paiement) :
     VERT   = termine / positif    -> valide, regle (quel que soit le mode), rapproche
     AMBRE  = en attente / a suivre -> partiel, justificatif manquant
     ROSE   (--text-danger)        = action requise -> seul "non payé" le porte
     CYAN   = provenance bancaire (import releve)
     VIOLET = IA / document scanne
     GRIS   = neutre / manuel / brouillon
   .tx-status-* (statut du document, plus bas dans ce fichier) n'est pas
   touche : deja conforme a cette grille depuis l'audit a11y precedent.
   ------------------------------------------------------------------------- */

/* Provenance de la ligne (banque / document / saisie / rapprochee) */
.source-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem; border-radius: 6px;
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap;
}
.source-badge i { font-size: 0.65rem; }
.source-badge.src-bank   { background: rgba(6,182,212,0.18); color: #67e8f9; border: 1px solid rgba(6,182,212,0.3); }
.source-badge.src-doc    { background: rgba(139,92,246,0.18); color: #d8b4fe; border: 1px solid rgba(139,92,246,0.3); }
.source-badge.src-manual { background: rgba(148,163,184,0.18); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.source-badge.src-reco   { background: rgba(16,185,129,0.18); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }

/* Lisere de ligne (tableau desktop), meme code couleur que source-badge */
tr.tx-row-doc  td:first-child { box-shadow: inset 4px 0 0 rgba(139,92,246,0.5); }
tr.tx-row-bank td:first-child { box-shadow: inset 4px 0 0 rgba(6,182,212,0.5); }
tr.tx-row-reco td:first-child { box-shadow: inset 4px 0 0 rgba(16,185,129,0.5); }

/* Statut de paiement : 3 couleurs seulement (vert regle / ambre en cours / rose a traiter).
   bank-in/bank-out/paid-cash rejoignent paid-link en vert : un mouvement deja
   regle est "termine", peu importe le canal — awaiting-proof rejoint
   paid-partial en ambre (fusion de l'orange isole qui doublait l'ambre). */
.pay-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    white-space: nowrap;
}
.pay-badge i { font-size: 0.65rem; }
.pay-badge.paid-link,
.pay-badge.paid-cash,
.pay-badge.bank-in,
.pay-badge.bank-out { background: rgba(16,185,129,0.18); color: #34d399; }
.pay-badge.paid-partial,
.pay-badge.awaiting-proof {
    background: rgba(245,158,11,0.18); color: #fbbf24;
    cursor: pointer; transition: all 0.15s;
}
.pay-badge.paid-partial:hover,
.pay-badge.awaiting-proof:hover { background: rgba(245,158,11,0.28); transform: scale(1.05); }
.pay-badge.awaiting-proof { margin-left: 0.3rem; }
.pay-badge.unpaid {
    background: rgba(244,63,94,0.15); color: var(--text-danger);
    cursor: pointer; transition: all 0.15s;
}
.pay-badge.unpaid:hover { background: rgba(244,63,94,0.25); transform: scale(1.05); }

/* Bouton "Lier à facture" : action inline (pas un statut), garde sa propre
   teinte indigo pour ne pas se confondre avec les 3 couleurs de statut. */
.link-invoice-btn { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); color: #c7d2fe; cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; margin-left: 0.3rem; }
.link-invoice-btn:hover { background: rgba(99,102,241,0.3); }

/* -------------------------------------------------------------------------
   Convergence modales (audit 08/2026, point "tx-* vs eb-*").
   4 familles de modales locales a transaction_list.html (pay-modal,
   ai-review-modal, event-modal, li-modal) recopiaient chacune le meme
   squelette (overlay plein ecran + card centree + header degrade + body
   scrollable + footer d'actions) — deja standardise ailleurs sous
   .eb-modal (bilan evenement, cf. CLAUDE.md #1). On ne merge PAS dans la
   regle .eb-modal elle-meme (fichier event_bilan_detail.html en cours de
   revision par un autre agent en parallele : toucher ce doublon aurait
   risque un conflit) — on partage seulement les proprietes identiques
   ENTRE ces 4 classes locales, sans renommer aucune classe (zero impact
   JS/template, uniquement une dedoublication CSS).
   ------------------------------------------------------------------------- */

/* Overlay : 2 variantes — modale longue ancree en haut avec scroll
   (pay-modal / ai-review-modal), ou modale courte centree (event-modal / li-modal). */
.pay-modal, .ai-review-modal, .event-modal, .li-modal {
    display: none; position: fixed; inset: 0;
    /* Meme fond que le systeme canonique `.orkya-modal-backdrop` (ligne ~851) :
       il y avait deux teintes de voile dans l'app (#020617 ici, #0f172a
       ailleurs). NB : CLAUDE.md §5 impose un minimum de 0.95, alors que TOUTES
       les modales du projet sont a 0.85 — l'ecart regle/code est signale a Alan
       plutot que tranche ici, car le porter a 0.95 assombrirait toutes les
       modales de l'application. */
    background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);
    z-index: 9999; overflow-y: auto;
}
.pay-modal.visible, .ai-review-modal.visible, .event-modal.visible, .li-modal.open { display: flex; }
.pay-modal { align-items: flex-start; justify-content: center; padding: 4rem 1rem; }
.ai-review-modal { align-items: flex-start; justify-content: center; padding: 3rem 1rem; }
.event-modal, .li-modal { align-items: center; justify-content: center; padding: 1rem; }

/* Card : meme habillage glass + bordure teintee + radius 18px, largeur propre a chaque modale */
.pay-card, .ai-review-card, .event-card {
    background: rgba(15,23,42,0.97);
    border-radius: 18px;
    width: 100%;
}
.pay-card, .ai-review-card { box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; }
.pay-card { border: 1px solid rgba(99,102,241,0.3); max-width: 720px; }
.ai-review-card { border: 1px solid rgba(139,92,246,0.3); max-width: 1100px; }
.event-card { border: 1px solid rgba(99,102,241,0.3); max-width: 480px; padding: 1.5rem; }
.event-card h3 { margin: 0 0 1rem; color: #ede9fe; font-size: 1rem; }
.event-card select {
    width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px;
    background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.88rem; margin-bottom: 1rem;
}
.li-card {
    background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
    max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column;
}

/* Header : bandeau degrade discret + separateur (pay/ai-review) */
.pay-header, .ai-review-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: space-between;
}
.pay-header { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.06)); }
.ai-review-header { background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.06)); gap: 1rem; }
.pay-header h3 { margin: 0; font-size: 1rem; color: #ede9fe; display: flex; align-items: center; gap: 0.6rem; }
.pay-header h3 i { color: #a5b4fc; }
.ai-review-title { font-size: 1.05rem; font-weight: 700; color: #ede9fe; display: flex; align-items: center; gap: 0.6rem; }
.ai-review-title i { color: #a78bfa; }
.ai-review-subtitle { font-size: 0.78rem; color: #94a3b8; margin-top: 0.2rem; }
.ai-review-close { background: transparent; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: 0.4rem; border-radius: 8px; transition: all 0.2s; }
.ai-review-close:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.li-header { padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; }
.li-header h3 { margin: 0; font-size: 1.05rem; color: #f1f5f9; }

/* Body scrollable */
.pay-body, .ai-review-body { max-height: 60vh; overflow-y: auto; }
.pay-body { padding: 1.25rem 1.5rem; }
.ai-review-body { padding: 0.5rem 0; scrollbar-width: thin; scrollbar-color: rgba(139,92,246,0.4) rgba(15,23,42,0.3); }
.ai-review-body::-webkit-scrollbar { width: 6px; }
.ai-review-body::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.4); border-radius: 3px; }
.li-body { padding: 1rem 1.2rem; overflow-y: auto; }

/* Footer : bandeau d'actions */
.pay-actions, .ai-review-footer {
    padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    background: rgba(15,23,42,0.6);
}
.pay-actions { justify-content: flex-end; }
.ai-review-footer { align-items: center; justify-content: space-between; }
.ai-footer-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.li-footer { padding: 0.7rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.08); text-align: right; }

/* Boutons de pied de modale : meme constat de doublon entre .pay-btn et
   .ai-btn (et le pattern global .eb-btn, non touche pour la meme raison
   de non-collision citee plus haut) — base commune, deltas de teinte gardes. */
.pay-btn, .ai-btn {
    padding: 0.55rem 1.1rem; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,23,42,0.5); color: #e2e8f0;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: all 0.2s;
}
.pay-btn:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); }
.ai-btn:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); }
.pay-btn.primary, .ai-btn.primary { border: none; color: #fff; }
.pay-btn.primary { background: linear-gradient(135deg, #10b981, #059669); }
.pay-btn.primary:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.4); transform: translateY(-1px); }
.ai-btn.primary { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.ai-btn.primary:hover { box-shadow: 0 4px 14px rgba(139,92,246,0.4); transform: translateY(-1px); }
.ai-btn.danger { color: #fca5a5; }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Contenu propre a chaque modale (pas de doublon, migre tel quel) */
.pay-tabs {
    display: flex; gap: 0.5rem; margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.6rem;
}
.pay-tab {
    padding: 0.5rem 1rem; border-radius: 10px;
    background: transparent; border: 1px solid transparent;
    color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 0.4rem;
}
.pay-tab.active {
    background: rgba(99,102,241,0.12); color: #c7d2fe;
    border-color: rgba(99,102,241,0.3);
}
.pay-section { display: none; }
.pay-section.active { display: block; }
.pay-match-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.75rem; border-radius: 10px;
    background: rgba(15,23,42,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0.4rem; cursor: pointer;
    transition: all 0.15s;
}
.pay-match-row:hover { background: rgba(16,185,129,0.06); border-color: rgba(52,211,153,0.25); }
.pay-match-row:has(input:checked) {
    background: rgba(16,185,129,0.12);
    border-color: rgba(52,211,153,0.4);
}
.pay-match-summary {
    display: none;
    position: sticky; bottom: 0;
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(8px);
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 12px;
    margin-top: 0.6rem;
    align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.pay-match-row .score {
    margin-left: auto; padding: 0.18rem 0.5rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 700;
}
.pay-match-row .score.high { background: rgba(16,185,129,0.18); color: #34d399; }
.pay-match-row .score.mid  { background: rgba(245,158,11,0.18); color: #fbbf24; }
.pay-match-row .score.low  { background: rgba(148,163,184,0.18); color: #94a3b8; }
.pay-cash-form {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
    padding: 0.5rem 0;
}
.pay-cash-form label { font-size: 0.75rem; color: #94a3b8; font-weight: 600; }
.pay-cash-form select, .pay-cash-form input {
    width: 100%; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.85rem; margin-top: 0.3rem;
}

.ai-row {
    display: grid;
    grid-template-columns: 28px 1fr 1.1fr 1.1fr 90px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.ai-row:hover { background: rgba(139,92,246,0.04); }
.ai-row.unchecked { opacity: 0.5; }
.ai-row-check { accent-color: #8b5cf6; width: 16px; height: 16px; cursor: pointer; }
.ai-row-tx { font-size: 0.82rem; color: #e2e8f0; min-width: 0; }
.ai-row-tx-meta { font-size: 0.7rem; color: #94a3b8; margin-top: 2px; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ai-row-tx-amount {
    font-weight: 700;
    color: #fbbf24;
}
.ai-row select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,23,42,0.7);
    color: #e2e8f0;
    font-size: 0.78rem;
    cursor: pointer;
}
.ai-row select:focus {
    outline: none; border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}
.ai-row select.ai-suggested { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.07); }
.ai-row-confidence {
    font-size: 0.68rem; font-weight: 700;
    text-align: center;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}
.ai-row-confidence.high { background: rgba(16,185,129,0.18); color: #34d399; }
.ai-row-confidence.mid { background: rgba(245,158,11,0.18); color: #fbbf24; }
.ai-row-confidence.low { background: rgba(148,163,184,0.18); color: #94a3b8; }
.ai-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4rem 1rem; gap: 1rem;
    color: #c4b5fd;
}
.ai-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(139,92,246,0.2);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-empty {
    padding: 3rem 1.5rem; text-align: center;
    color: #94a3b8; font-size: 0.9rem;
}
.ai-empty i { font-size: 2.5rem; color: #475569; display: block; margin-bottom: 0.75rem; }
@media (max-width: 768px) {
    .ai-row { grid-template-columns: 24px 1fr; gap: 0.5rem; }
    .ai-row > *:nth-child(n+3) { grid-column: 2; }
}

.li-item { padding: 0.65rem 0.85rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.li-item:hover { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); }
.li-item-main { flex: 1; }
.li-item strong { color: #f1f5f9; font-size: 0.88rem; display: block; }
.li-item .li-meta { font-size: 0.72rem; color: #94a3b8; margin-top: 0.2rem; }
.li-item .li-amount { color: #fbbf24; font-weight: 600; font-size: 0.95rem; }
.li-empty { padding: 2rem; text-align: center; color: #94a3b8; }

/* Bouton IA (classer en lot) + pastilles IA — deja une seule teinte violette,
   coherent avec source-badge.src-doc (meme famille "IA/document"). */
.btn-ai-classify {
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.18));
    border: 1px solid rgba(167,139,250,0.4);
    color: #d8b4fe;
}
.btn-ai-classify:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(99,102,241,0.3));
    border-color: rgba(167,139,250,0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(139,92,246,0.25);
}
.ai-pending-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: rgba(139,92,246,0.18); color: #c4b5fd;
    font-size: 0.7rem; font-weight: 700;
    margin-left: 0.4rem;
}
.tx-ai-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.62rem; font-weight: 700;
    background: rgba(139,92,246,0.18); color: #c4b5fd;
    border: 1px solid rgba(139,92,246,0.3);
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Liste des transactions : tableau, filtres, pagination, barre bulk.
   (tx-status-*, tx-cards-mobile, tx-filters-toggle/panel deja plus haut
   dans ce fichier — non dupliques ici.)
   ------------------------------------------------------------------------- */
.tx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.tx-filter-btn {
    padding: 0.45rem 1rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(15,23,42,0.4);
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: all 0.2s;
}
.tx-filter-btn:hover { background: rgba(99,102,241,0.1); color: #c4b5fd; border-color: rgba(99,102,241,0.2); }
.tx-filter-btn.active { background: rgba(99,102,241,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.3); }

.tx-table-wrap {
    max-height: 600px;
    overflow-y: auto;
    background: rgba(10,15,30,0.5);
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.4) rgba(15,23,42,0.3);
}
.tx-table-wrap::-webkit-scrollbar { width: 6px; }
.tx-table-wrap::-webkit-scrollbar-track { background: rgba(15,23,42,0.3); }
.tx-table-wrap::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.4); border-radius: 3px; }

.tx-table { width: 100%; border-collapse: collapse; }
.tx-table th {
    position: sticky; top: 0; z-index: 1;
    background: rgba(15,23,42,0.95);
    padding: 0.75rem 1rem;
    font-size: 0.72rem; font-weight: 600;
    color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px;
    text-align: left;
}
.tx-table td {
    padding: 0.7rem 1rem;
    font-size: 0.85rem; color: #e2e8f0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tx-table tr:hover td { background: rgba(139,92,246,0.05); }
.tx-table th:first-child, .tx-table td:first-child { width: 40px; text-align: center; }
.tx-table th:last-child, .tx-table td:last-child { text-align: center; }

.tx-checkbox {
    width: 16px; height: 16px; accent-color: #8b5cf6;
    cursor: pointer;
}

.tx-amount-positive { color: #34d399; font-weight: 600; }
.tx-amount-negative { color: #e2e8f0; font-weight: 600; }

.tx-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 0.35rem; margin-top: 1.25rem; flex-wrap: wrap;
}
.tx-pagination a, .tx-pagination span {
    padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.82rem;
    font-weight: 600; text-decoration: none; transition: all 0.2s;
}
.tx-pagination a {
    color: #94a3b8; background: rgba(15,23,42,0.4);
    border: 1px solid rgba(255,255,255,0.06);
}
.tx-pagination a:hover { background: rgba(99,102,241,0.15); color: #c4b5fd; }
.tx-pagination .current {
    background: rgba(99,102,241,0.2); color: #a78bfa;
    border: 1px solid rgba(139,92,246,0.3);
}
.tx-pagination .disabled { color: #475569; pointer-events: none; }

.bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 12px;
}
.bulk-bar.visible { display: flex; }
.bulk-bar-count { font-size: 0.85rem; font-weight: 600; color: #c4b5fd; }
.bulk-bar-btn {
    padding: 0.5rem 1.2rem; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: all 0.2s;
}
.bulk-bar-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.bulk-bar-event-btn {
    padding: 0.5rem 1.2rem; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff; font-weight: 600; font-size: 0.82rem; cursor: pointer;
    transition: all 0.2s;
}
.bulk-bar-event-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }

/* -------------------------------------------------------------------------
   Rapprochement bancaire (reconciliation_hub.html) — migre tel quel.
   ------------------------------------------------------------------------- */
.recon-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.recon-stat {
    padding: 1.25rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(30,41,59,0.5), rgba(15,23,42,0.5));
    border: 1px solid var(--border-subtle);
}
.recon-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.recon-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0.3rem;
}

.recon-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .recon-split { grid-template-columns: 1fr; }
}

.recon-list {
    max-height: 500px;
    overflow-y: auto;
    background: rgba(10, 15, 30, 0.5);
    border-radius: 14px;
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(6, 182, 212, 0.4) rgba(15, 23, 42, 0.3);
}
.recon-list::-webkit-scrollbar { width: 6px; }
.recon-list::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); }
.recon-list::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.4); border-radius: 3px; }

.recon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}
.recon-item:hover {
    background: rgba(6, 182, 212, 0.05);
    border-color: rgba(6, 182, 212, 0.2);
}
.recon-item.selected {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.4);
}
.recon-item-info { flex: 1; min-width: 0; }
.recon-item-label {
    font-weight: 500;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recon-item-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.75rem;
    margin-top: 0.2rem;
}
.recon-item-amount {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-left: 1rem;
}

.recon-suggestion {
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.05), rgba(15, 23, 42, 0.5));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s;
}
.recon-suggestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.recon-suggestion-score {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}
.recon-suggestion-score.high { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.recon-suggestion-score.medium { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.recon-suggestion-score.low { background: rgba(244, 63, 94, 0.15); color: var(--text-danger); }

.recon-match-pair {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.recon-match-arrow {
    color: #06b6d4;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.recon-match-side {
    flex: 1;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 10px;
    padding: 0.75rem;
}
.recon-match-side-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.recon-validate-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.recon-validate-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.recon-validate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.recon-validated {
    animation: validateFlash 0.5s ease-out;
}
@keyframes validateFlash {
    0% { background: rgba(16, 185, 129, 0.3); }
    100% { background: transparent; }
}

/* Category select inline */
.recon-cat-select {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    color: #fff;
    font-size: 0.78rem;
    max-width: 200px;
}
.recon-cat-select:focus {
    outline: none;
    border-color: #06b6d4;
}
.recon-event-select {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    color: #a5b4fc;
    font-size: 0.72rem;
    max-width: 160px;
}
.recon-event-select:focus {
    outline: none;
    border-color: #6366f1;
}
.recon-event-select option {
    background: #1e293b;
    color: #e2e8f0;
}

.recon-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.recon-tab {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.recon-tab.active {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.4);
    color: #06b6d4;
}
.recon-tab-content { display: none; }
.recon-tab-content.active { display: block; }

/* Bilan association — bloc « Équilibre ».
   Neutre volontairement : ce n'est pas un contrôle qui a réussi, c'est une
   propriété structurelle du bilan. Pas de vert de validation, donc. */
.bilan-equilibre {
    border: 1px solid var(--border-subtle);
}

.bilan-equilibre-titre {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bilan-equilibre-montants {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   FAB vs actions d'argent (mobile)
   Mesure sur le dashboard compta en 390px : le bouton « J'ai dépensé »
   occupe 194-339px, la pile de bulles flottantes 264-364px. Sur 5 positions
   de scroll, le geste le plus frequent de la journee de montage — enregistrer
   une depense — se fait donc SOUS des bulles d'aide qui captent le tap.
   Meme parade que le menu des poles de production : tant que la zone d'action
   est a l'ecran, les bulles s'effacent. Elles reviennent des qu'elle sort du
   champ, donc aucune fonctionnalite n'est perdue.
   Desktop non concerne : la pile est loin des boutons.
   ============================================================ */
@media (max-width: 768px) {
    body.zone-action-visible .sw-fab,
    body.zone-action-visible .cmdk-fab-mobile,
    body.zone-action-visible .tour-help-fab,
    body.zone-action-visible .dev-toolbar-container {
        opacity: 0;
        pointer-events: none;
        /* `visibility` en plus de l'opacite : sans elle, un bouton invisible
           restait atteignable au clavier et par un lecteur d'ecran — on
           l'annoncait donc sans qu'il soit visible ni cliquable. */
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* La regle ne couvrait que les bulles flottantes : le depliage du panneau
       de filtres, le spinner IA et le flash de validation continuaient de
       tourner pour un utilisateur qui demande explicitement moins de mouvement. */
    .tx-filters-panel,
    .tx-filters-panel.open { transition: none; }
    .ai-spinner,
    .recon-validated { animation: none; }

    body.zone-action-visible .sw-fab,
    body.zone-action-visible .cmdk-fab-mobile,
    body.zone-action-visible .tour-help-fab,
    body.zone-action-visible .dev-toolbar-container {
        transition: none;
    }
}

/* Origine du solde affiché (dashboard compta).
   Un « solde » qui bouge quand on supprime une transaction n'est pas le solde
   de la banque : c'est le cumul des saisies. On le dit sur le chiffre lui-même,
   pas seulement sur la carte du compte. */
.compta-kpi-source {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.compta-kpi-source--estime {
    color: var(--accent-warning);
}

/* ============================================================
   TITRES DE CARTE « HUB » — consolidation
   Ces deux classes étaient redéfinies à l'identique dans plusieurs
   templates (org_info_edit, settings_hub…). On les remonte ici pour
   qu'un nouvel écran n'ait plus besoin d'un <style> local. Les
   redéfinitions locales restantes continuent de primer (elles sont
   chargées après ce fichier), donc aucune régression visuelle.
   ============================================================ */
.hub-ring-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.5rem;
}
.hub-ring-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* ============================================================
   FACTURATION ÉLECTRONIQUE — écran « prêt / pas prêt »
   ============================================================ */
.efact-status {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 42, 0.6);
}
.efact-status--ok {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(15, 23, 42, 0.6));
}
.efact-status--todo {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(15, 23, 42, 0.6));
}
.efact-status-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.efact-status--ok .efact-status-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.efact-status--todo .efact-status-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
.efact-status-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 0.25rem;
}
.efact-status-sub {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.efact-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.efact-list-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.efact-list-icon {
    color: var(--accent-warning);
    font-size: 0.8rem;
    flex: 0 0 1rem;
}
.efact-client-link {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.efact-client-link:hover {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.efact-client-missing {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--accent-warning);
    text-align: right;
}
.efact-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.87rem;
    color: #34d399;
    margin: 0;
}
.efact-truncated {
    font-size: 0.8rem;
    /* text-muted (#64748b) tombe sous 4.5:1 sur le fond des cartes : on reste
       sur text-secondary pour que ce texte soit vraiment lisible. */
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}
.efact-cta {
    width: 100%;
    justify-content: center;
}
.efact-deadlines {
    margin-top: 1.5rem;
}
.efact-deadlines .efact-list-item strong {
    color: #fff;
}
.efact-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 640px) {
    .efact-status { flex-direction: column; padding: 1rem; }
    .efact-list-item { flex-wrap: wrap; }
    .efact-client-missing { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* Écran « préparation e-facturation » — remplace 5 attributs style= inline
   (CLAUDE.md §5 : tout le CSS ici). Valeurs reprises à l'identique, donc
   rendu strictement inchangé. Indigo = émetteur, cyan = destinataire. */
.efact-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.efact-card--emetteur { border-color: rgba(99, 102, 241, 0.2); }
.efact-icon--emetteur { background: rgba(99, 102, 241, 0.1); color: var(--accent-primary); }
.efact-card--destinataire { border-color: rgba(6, 182, 212, 0.2); }
.efact-icon--destinataire { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }

/* ============================================================
   Fenêtre IA du catalogue (ORKYA-004)
   ------------------------------------------------------------
   Reprend `.catalog-modal-overlay` / `.catalog-modal-content`
   (motif déjà utilisé deux fois dans catalog_v3.html) — seule la
   largeur change : cette fenêtre montre des résultats produit et
   deux aperçus de visuels côte à côte, 600 px n'y suffisent pas.
   ============================================================ */

.catalog-ia-modal { max-width: 1080px; padding: 1.6rem 1.8rem; }

.catalog-ia-titre {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 1.15rem; font-weight: 700; margin: 0 0 0.25rem;
}
.catalog-ia-sous-titre {
    color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.2rem;
}

/* Étapes : une ligne discrète, pour situer où l'on en est. */
.catalog-ia-etapes {
    display: flex; gap: 0.5rem; align-items: center;
    margin-bottom: 1.2rem; flex-wrap: wrap;
}
.catalog-ia-etape {
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 700; color: var(--text-muted);
    padding: 0.3rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
}
.catalog-ia-etape.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #6366f1, #a855f7);
}
.catalog-ia-etape.faite { color: #22c55e; border-color: rgba(34, 197, 94, 0.35); }
.catalog-ia-etape-fleche { color: var(--text-faint); font-size: 0.7rem; }

/* Barre de recherche interne à la fenêtre. */
.catalog-ia-recherche { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.catalog-ia-recherche input {
    flex: 1; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: var(--bg-input);
    color: var(--text-primary); font-size: 0.9rem;
}

.catalog-ia-zone { min-height: 72px; }
/* `--text-faint` disparaissait sur ce fond : l'indication existait dans le
   DOM mais restait illisible, et la zone paraissait vide sans que rien
   n'explique quoi faire. Constaté sur capture. */
/* Indigo 400 pour le TEXTE. `--accent-primary` (#6366f1) tombe à 4,0:1 sur le
   fond de l'application, sous le seuil de 4,5:1 — et c'est précisément le
   repère « où je suis » (onglet actif, catégorie sélectionnée) qui devenait le
   texte le moins lisible de l'écran, illisible en plein soleil. Même principe
   que `--text-danger`, déjà passé en Rose 400 pour la même raison. */
.catalog-tab.active,
.catalog-tab.active .catalog-tab-badge,
.catalog-tree-active { color: #818cf8; }

.catalog-ia-vide {
    color: var(--text-muted); font-size: 0.85rem; text-align: center;
    padding: 1.4rem 1rem; line-height: 1.5;
}

/* Bandeau d'état du moteur de détourage. Il DOIT rester visible même
   quand tout va bien : c'est lui qui explique pourquoi le bouton
   « mode ORKYA » est parfois indisponible, plutôt que de laisser
   l'utilisateur devant un bouton mort sans explication. */
.catalog-ia-moteur {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.8rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.82rem; line-height: 1.45; margin-bottom: 1rem;
}
.catalog-ia-moteur--ok {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.22); color: #86efac;
}
.catalog-ia-moteur--absent {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22); color: #fcd34d;
}
.catalog-ia-moteur--refus {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22); color: #fca5a5;
}
.catalog-ia-commande {
    display: block; margin-top: 0.5rem; padding: 0.55rem 0.7rem;
    background: rgba(0, 0, 0, 0.35); border-radius: var(--radius-xs);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.74rem; color: var(--text-secondary);
    word-break: break-all; user-select: all;
}

/* Aperçu : les deux visuels côte à côte, avant validation. */
.catalog-ia-apercu { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.catalog-ia-apercu figure { margin: 0; }
.catalog-ia-apercu img {
    width: 100%; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); display: block;
}
.catalog-ia-apercu figcaption {
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 700; color: var(--text-muted); margin-top: 0.5rem;
}

.catalog-ia-actions {
    display: flex; justify-content: flex-end; gap: 0.6rem;
    margin-top: 1.4rem; padding-top: 1.1rem;
    border-top: 1px solid var(--border-subtle);
}

/* Mobile : une seule colonne, sinon les aperçus deviennent illisibles. */
@media (max-width: 780px) {
    .catalog-ia-modal { padding: 1.1rem; width: 96%; }
    .catalog-ia-apercu { grid-template-columns: 1fr; }
    .catalog-ia-recherche { flex-direction: column; }
    .catalog-ia-actions { flex-direction: column-reverse; }
    .catalog-ia-actions .orkya-btn { width: 100%; }
}


/* ============================================================
   Catalogue — cibles tactiles et lisibilité (revue mobile)
   ------------------------------------------------------------
   La zone CLIQUABLE monte à 44 px ; l'icône garde sa taille.
   Ce sont exactement les gestes répétés au téléphone — fermer une
   fenêtre, filtrer par catégorie, dupliquer ou supprimer une ligne —
   qui étaient les plus petites cibles de l'écran. La poubelle est
   la plus exposée : une erreur de doigt y supprime un équipement.
   ============================================================ */
.catalog-btn-action,
.catalog-modal-close,
.catalog-drawer-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.catalog-tree-item { min-height: 44px; display: flex; align-items: center; }

/* La bannière de consentement était au-dessus des fenêtres (9998 contre
   1000) : sur mobile elle recouvrait le bas de l'assistant, donc les
   boutons « Fermer » et « Fabriquer » devenaient intouchables. Une
   fenêtre ouverte la fait passer dessous. */
body:has(.catalog-modal-overlay.open) .cookie-consent-banner { z-index: 999; }
/* Meme parade pour le TIROIR de fiche, qui est a 950 — donc encore sous la
   banniere. En 390 px, elle recouvrait le bouton « Enregistrer » : le clic
   n'atteignait jamais le formulaire, la fiche ne pouvait pas etre enregistree
   du tout. Constate au navigateur le 24/08/2026 (le pilote a refuse le clic
   quinze fois de suite, « cookie-consent-banner intercepts pointer events »).
   La banniere reste affichee et repasse au-dessus des que le tiroir se ferme :
   on ne la supprime pas, on la range dessous. */
body:has(.catalog-drawer.open) .cookie-consent-banner { z-index: 900; }

/* ============================================================
   Récapitulatif après sélection d'un produit (ORKYA-004)
   ------------------------------------------------------------
   Le clic vidait la zone de résultats sans rien remettre : l'étape
   « Produit et photo » se marquait terminée et l'écran restait
   blanc. On montre désormais ce qui a réellement été repris.
   ============================================================ */
.catalog-ia-recap {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: var(--radius-md);
}
.catalog-ia-recap-photo {
    width: 84px; height: 84px; flex-shrink: 0;
    object-fit: contain; border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.08); padding: 4px;
}
.catalog-ia-recap-infos { flex: 1 1 200px; min-width: 0; }
.catalog-ia-recap-titre {
    font-weight: 700; font-size: 0.92rem;
    color: var(--text-primary); margin-bottom: 0.4rem;
    overflow-wrap: anywhere;
}
.catalog-ia-recap-ligne {
    display: flex; gap: 0.5rem; font-size: 0.8rem;
    color: var(--text-secondary); line-height: 1.6;
}
.catalog-ia-recap-libelle {
    color: var(--text-muted); min-width: 84px; flex-shrink: 0;
}
.catalog-ia-recap-note {
    margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.45;
    color: #fcd34d;
}
@media (max-width: 780px) {
    .catalog-ia-recap { flex-direction: column; }
    .catalog-ia-recap-photo { width: 100%; height: 140px; }
}


/* ── Galerie de la fiche : photo 1, photo 2, photo 3… ─────────────────
   La n°1 est l'image du catalogue ET du site. Elle porte un numéro, un
   liseré et une étoile désactivée : trois signaux, pas seulement la couleur
   — un homme sur douze ne distingue pas le vert du rouge, et « quelle image
   voient mes clients » ne doit pas dépendre de ça. */
.catalog-drawer-images {
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.25rem;
}
.catalog-drawer-images-titre {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
/* Sous-texte de la règle « la n°1 part sur le site » : accolée au titre en
   capitales, la phrase entière capitalisée cassait en deux lignes sur mobile
   (audit galerie catalogue, 21/08/2026). Descendue en texte normal, discret. */
.catalog-drawer-images-regle {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.catalog-drawer-images-liste {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
    transition: opacity 0.3s ease;
}
.catalog-drawer-images-liste.galerie-occupee {
    opacity: 0.5;
    pointer-events: none;
}
.catalog-drawer-images-vide {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin: 0;
}
.catalog-drawer-images-ajout {
    margin-top: 0.75rem;
}

/* Illustration provisoire par IA (ORKYA-005).
   ------------------------------------------------------------------
   Ce bloc n'existe QUE sur une fiche sans photo — celle qui ne peut pas
   s'afficher sur le site. Il se lit donc comme une explication suivie d'une
   sortie, pas comme un outil de plus dans une barre.

   Encadré plutôt que posé à la suite : sans bordure, le bouton se confondait
   avec « Ajouter une photo » juste au-dessus, alors que les deux ne font pas
   du tout la même chose — l'un envoie une vraie photo, l'autre en invente une. */
.catalog-drawer-illustration {
    padding: 0.875rem;
    margin-bottom: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.catalog-drawer-illustration-regle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.catalog-drawer-illustration-aide {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}
/* La fenêtre d'aperçu. Plus large que la modale de suppression : on y juge une
   image, et un talkie à 400 px ne laisse pas voir si le modèle a ajouté un
   écran LCD qui n'existe pas sur le vrai matériel. */
.catalog-illustration-modal {
    max-width: 560px;
    text-align: center;
}
.catalog-illustration-apercu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    margin: 1rem 0;
    background: var(--bg-app);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.catalog-illustration-apercu img {
    max-width: 100%;
    max-height: 380px;
    border-radius: var(--radius-md);
}
/* La mention « image générée » ne doit jamais se lire comme une note de bas de
   page : c'est elle qui empêche de prendre l'illustration pour une photo du
   parc. Fond ambré, comme les autres avertissements de l'application. */
.catalog-illustration-mention {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    margin: 0;
}
@media (max-width: 640px) {
    .catalog-illustration-apercu {
        min-height: 180px;
    }
    .catalog-illustration-apercu img {
        max-height: 260px;
    }
    /* Les deux actions passent l'une sous l'autre : cote a cote sous 640 px,
       « Utiliser ce visuel » tombait sous la barre de 44 px de haut minimum
       exigee pour une cible tactile. */
    .catalog-illustration-modal .catalog-delete-actions {
        flex-direction: column;
    }
    .catalog-illustration-modal .catalog-delete-actions .orkya-btn {
        width: 100%;
    }
}
.catalog-drawer-image {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: all 0.3s ease;
    min-width: 116px;
}
.catalog-drawer-image img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--bg-app);
}
.catalog-drawer-image-nom {
    /* 12px → 13px : trop petit pour un libellé qu'on lit vraiment (audit
       accessibilité, 21/08/2026). */
    max-width: 104px;
    font-size: 0.8125rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-drawer-image-rang {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-app);
    border: 2px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog-drawer-image.est-publiee {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.catalog-drawer-image.est-publiee .catalog-drawer-image-rang {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.catalog-drawer-image-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.catalog-drawer-image-actions button {
    /* Cible tactile confortable : on range ses photos au doigt, sur un
       stand. 44px et non 32 : la taille recommandée (WCAG 2.5.5 / Apple HIG)
       pour un geste fiable au pouce. 32px avec 4px d'écart faisait supprimer
       une photo par simple dérapage (audit galerie catalogue, 21/08/2026). */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.catalog-drawer-image-actions button:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}
.catalog-drawer-image-actions button:disabled {
    /* 0.35 tombait à ~1,9:1 de contraste avec le fond de la carte, sous le
       seuil WCAG (audit galerie catalogue, 21/08/2026). */
    opacity: 0.5;
    cursor: default;
}
.catalog-drawer-image-actions .retirer {
    /* Écartée des trois autres boutons, pas seulement colorée au survol : la
       croix qui retire une photo doit se voir AVANT le clic, pas après. */
    margin-left: 0.6rem;
}
.catalog-drawer-image-actions .retirer:hover:not(:disabled) {
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}
@media (max-width: 640px) {
    /* Carrousel horizontal : 5 photos en colonne poussaient le formulaire de
       ~800px avant même d'atteindre les champs (audit galerie catalogue,
       21/08/2026). Sous 640px, on défile au doigt plutôt que de scroller
       toute la page. */
    .catalog-drawer-images-liste {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }
    .catalog-drawer-image {
        min-width: 104px;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}


/* ── Pilotage de la fabrication des visuels ───────────────────────────
   Bandeau d'ensemble, en tête du catalogue : « combien de fiches attendent
   encore leur visuel ». Il reste masqué quand il n'a rien à dire — un
   bandeau vide prendrait la place du catalogue. */
.catalog-lot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-md);
}
.catalog-lot[hidden] { display: none; }
.catalog-lot-infos {
    flex: 1 1 320px;
    min-width: 0;
}
.catalog-lot-titre {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}
.catalog-lot-message {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.catalog-lot-jauge {
    margin-top: 0.625rem;
    height: 6px;
    background: var(--bg-app);
    border-radius: 999px;
    overflow: hidden;
}
.catalog-lot-jauge[hidden] { display: none; }
.catalog-lot-jauge-barre {
    height: 100%;
    width: 0;
    background: var(--accent-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.catalog-lot-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.catalog-lot-actions button[hidden] { display: none; }
@media (max-width: 640px) {
    .catalog-lot { flex-direction: column; align-items: stretch; }
    .catalog-lot-actions button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   MESSAGERIE DES DEMANDES DE CONTACT  (/qg/messages/)
   Les demandes venues du formulaire d'orkya.fr. Un fil de correspondance,
   pas une messagerie instantanee : pas de bulles alternees, pas d'avatar.
   ========================================================================== */

.msg-liste { display: flex; flex-direction: column; gap: 10px; }

.msg-ligne {
    display: block;
    padding: 16px 18px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.msg-ligne:hover { background: rgba(30, 41, 59, 0.7); border-color: rgba(99, 102, 241, 0.35); }

/* Non lue : le titre porte le signal, pas un badge de plus. */
.msg-ligne--neuve .msg-ligne-nom { font-weight: 800; color: #ffffff; }
.msg-ligne--neuve .msg-ligne-nom::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: #6366f1; margin-right: 9px;
    vertical-align: middle;
}

.msg-ligne-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* Le nom porte le poids, sur TOUTES les lignes. Le sujet etait la seule
   tache de couleur saturee : l'oeil lisait "Demande de devis" avant de lire
   qui ecrivait, alors qu'on parcourt cette liste pour savoir QUI attend. */
.msg-ligne-nom { font-size: 15px; font-weight: 700; color: #f1f5f9; }
.msg-ligne-date { font-size: 12px; color: #94a3b8; white-space: nowrap; }
/* Ambre au-dela de 24 h sans reponse (DemandeContact.HEURES_PROMISES,
   le delai promis dans l'accuse) : tout etait au meme gris, y compris ce
   qui traine. */
.msg-ligne-date--attente { color: #fbbf24; }
.msg-ligne-sujet { font-size: 13px; color: #8b93b8; margin: 4px 0 6px; }
.msg-ligne-extrait {
    font-size: 14px; color: #94a3b8; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- La fiche ---------------------------------------------------------- */

.msg-entete { margin-bottom: 22px; }
.msg-entete-nom { font-size: 24px; font-weight: 800; color: #ffffff; margin: 0 0 6px; letter-spacing: -0.02em; }
.msg-entete-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #94a3b8; }
.msg-entete-meta a { color: #a5b4fc; text-decoration: none; word-break: break-all; }

.msg-fil { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }

.msg-bulle {
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(148, 163, 184, 0.5);
}
/* Un leger fond neutre : sans lui, l'entrant ne se distinguait que par
   l'epaisseur d'un lisere, quand le sortant cumule bordure, fond teinte et
   libelle. Deux indices de chaque cote plutot qu'un contre trois. */
.msg-bulle { background: linear-gradient(rgba(148, 163, 184, 0.03), rgba(148, 163, 184, 0.03)), rgba(15, 23, 42, 0.6); }
/* Ce qu'on a envoye : meme carte, bordure de marque. Distinguer par la
   couleur du liseré plutot que par l'alignement — c'est une correspondance. */
.msg-bulle--sortant { border-left-color: #6366f1; background: rgba(99, 102, 241, 0.07); }

.msg-bulle-tete {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; margin-bottom: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: #94a3b8;
}
/* `pre-line` restitue les retours a la ligne du message : ne PAS ajouter
   `linebreaksbr` au gabarit, les deux se cumuleraient en doublant les
   sauts. `overflow-wrap` coupe les mots interminables -- une URL collee
   sans espace debordait de l'ecran a 390 px. */
.msg-bulle-corps {
    font-size: 15px; line-height: 1.65; color: #e2e8f0;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-word;
}

.msg-alerte {
    font-size: 12px; padding: 3px 9px; border-radius: 999px;
    background: rgba(245, 158, 11, 0.15); color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    text-transform: none; letter-spacing: 0;
}

.msg-tronque { font-size: 13px; color: #94a3b8; text-align: center; padding: 8px; }

/* --- Le composeur ------------------------------------------------------ */

.msg-composeur { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 22px; }
.msg-zone {
    width: 100%; min-height: 190px; padding: 14px 16px;
    background: rgba(10, 14, 26, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #e2e8f0; font-size: 15px; line-height: 1.65;
    font-family: inherit; resize: vertical;
    transition: border-color 0.3s ease;
}
.msg-zone:focus { outline: none; border-color: rgba(99, 102, 241, 0.6); }
.msg-zone:disabled { opacity: 0.55; }

.msg-legende { font-size: 13px; color: #94a3b8; margin: 8px 0 0; }

.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.msg-actions-fin { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Barre indeterminee : sur vingt secondes, un simple curseur fixe se lit
   comme une panne. */
.msg-progression {
    height: 3px; border-radius: 3px; overflow: hidden;
    background: rgba(99, 102, 241, 0.15); margin-top: 14px;
}
.msg-progression::after {
    content: ""; display: block; height: 100%; width: 38%;
    background: linear-gradient(90deg, #6366f1, #f59e0b);
    animation: msg-glisse 1.15s ease-in-out infinite;
}
@keyframes msg-glisse {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(360%); }
}

.msg-supprimer {
    background: none; border: none; padding: 0;
    color: #94a3b8; font-size: 13px; text-decoration: underline;
    cursor: pointer; transition: color 0.3s ease;
}
.msg-supprimer:hover { color: #f87171; }

.msg-vide { text-align: center; padding: 60px 20px; color: #94a3b8; }

@media (max-width: 640px) {
    .msg-ligne-tete { flex-direction: column; gap: 2px; }
    .msg-actions { flex-direction: column; align-items: stretch; }
    .msg-actions-fin {
        margin-left: 0;
        justify-content: space-between;
        /* Une coupure franche avant la zone destructive : en colonne,
           "Supprimer" se retrouvait a dix pixels sous un bouton d'envoi
           pleine largeur. Un pouce qui poursuit son geste tombe dessus. */
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    /* 44 px : la cible tactile minimale, sinon on rate le bouton en marchant. */
    .msg-actions .orkya-btn, .msg-actions button { min-height: 44px; }
}

/* Le bouton de confirmation destructive. `orkya-btn-danger` est la valeur par
   defaut de showConfirmModal() et sert deja dans trois ecrans, mais elle
   n'etait definie NULLE PART : toutes les confirmations de suppression du
   projet affichaient un bouton gris, indistinguable de "Annuler". */
.orkya-btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #ffffff;
}
.orkya-btn-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
}

/* Un bouton desactive DOIT en avoir l'air. `.orkya-btn:disabled` n'etait
   defini nulle part : le bouton d'envoi s'affichait en degrade plein, ombre
   portee, alors qu'il refusait le clic tant que le champ etait vide. Il
   captait l'oeil avant "Brouillon IA", qui est pourtant l'action disponible a
   cet instant. Regle limitee a .msg-actions pour ne rien changer ailleurs. */
.msg-actions .orkya-btn:disabled,
.msg-actions button:disabled {
    opacity: 0.4;
    box-shadow: none;
    cursor: not-allowed;
}

/* Rappel d'une adresse deja vue, et notes internes. */
.msg-rappel {
    padding: 11px 16px;
    margin: 0 0 18px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.09);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    font-size: 14px;
}
.msg-rappel a { color: #fde68a; text-decoration: underline; }

.msg-notes { margin: 0 0 22px; }
.msg-notes-titre {
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 8px 0;
    list-style: none;
}
.msg-notes-titre::-webkit-details-marker { display: none; }
.msg-notes-titre::before { content: "+ "; }
.msg-notes[open] .msg-notes-titre::before { content: "− "; }
/* Un point quand des notes existent : replie, rien n'indiquait qu'il y avait
   quelque chose dedans. */
.msg-notes-point {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    vertical-align: middle;
    margin-left: 4px;
}
.msg-zone--notes { min-height: 110px; font-size: 14px; }

/* ═══ LIEN CATALOGUE (devis/facture) ═══
   Puce sur une ligne de devis/facture rattachée à une fiche du catalogue
   materiel (hubs/accounting/invoice_form_quantum.html). Avant le 25/08/2026
   ce lien etait invisible et une frappe dans la designation l'effacait en
   silence ; il est desormais visible, et seul un clic explicite le retire.

   Couleur DELIBEREMENT distincte de --accent-warning : sur ce meme ecran,
   l'ambre signifie deja « ligne en option » (.line-card.is-option,
   .pill-opt.is-active-option) et « acompte deja facture ». Reprendre
   l'ambre pour « designation divergente » aurait fait porter un troisieme
   sens a la meme couleur, potentiellement sur la MEME ligne (une ligne en
   option peut tout a fait etre liee au catalogue). --accent-cyan n'est
   utilise nulle part ailleurs sur cet ecran.

   Contrastes mesures au navigateur le 25/08/2026 SUR LE PIXEL REELLEMENT
   RENDU (skill tests-visuels), pas sur la superposition theorique des
   rgba() : la puce n'a pas de backdrop-filter propre, le flou vient de
   l'ancetre .glass-panel.prestations-panel et sa base reelle varie selon
   ce qu'il y a derriere. Les deux etats etaient sous les seuils WCAG 1.4.3
   (texte 4.5:1) et 1.4.11 (bordure, 3:1) une fois mesures ainsi :
     - Etat conforme (violet, --accent-purple #8b5cf6 / bordure indigo
       rgba(99,102,241,.35)) : texte 3.11:1, bordure 1.61:1.
     - Etat divergent (cyan #06b6d4 / bordure rgba(6,182,212,.45)) : texte
       5.00:1 (OK), bordure 2.62:1 (sous le seuil).
   Corrige avec une marge volontaire (pas un simple passage de justesse) :
   violet-300 #c4b5fd pour le texte (etait --accent-purple #8b5cf6, deja
   trop sombre sur fond flou), bordures portees a une opacite plus haute
   sur la MEME teinte que le texte (au lieu d'un indigo distinct qui ne
   passait pas non plus). Remesure au navigateur apres correctif, meme
   protocole (pixel reellement rendu, chiffre le plus defavorable des deux
   fonds adjacents retenu) : texte violet 6.24:1, bordure violet 3.46:1 ;
   texte cyan inchange 5.00:1, bordure cyan 4.04:1. Marge volontaire au
   dessus des seuils (4.5:1 / 3:1), pas un passage de justesse. */
.line-equip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0 0.5rem;
    padding: 0.15rem 0.2rem 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    background: rgba(167, 139, 250, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.85);
    color: #c4b5fd;
}
.line-equip--diverge {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.85);
    color: var(--accent-cyan);
}
.line-equip-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}
.line-equip-detach {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24px visuel — la cible tactile reelle est portee a 44px par ::after
       ci-dessous, sans grossir la pastille (meme technique que
       .cpt-help-btn::after). Un clic manque ici detache une ligne de devis
       sans confirmation ni « Annuler ». */
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s ease;
}
.line-equip-detach::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.line-equip-detach:hover {
    background: rgba(255, 255, 255, 0.14);
}
/* Audit a11y du 25/08/2026 : l'ancien focus (fond blanc 14% seul, sans
   contour) mesurait ~1,05:1 de contraste avec le fond de la puce — sous le
   seuil WCAG 1.4.11 (3:1), focus invisible au clavier. Contour blanc plein :
   19:1 mesure sur les deux etats. */
.line-equip-detach:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}


/* ── Parc numéroté ────────────────────────────────────────────────────
   Le matériel identifié numéro par numéro, dans la section Stock du tiroir
   du catalogue (`catalog_partials/parc_numerote.html`).

   Pourquoi de nouvelles règles plutôt qu'un composant repris tel quel :
   `.catalog-drawer-image` est une carte de 116 px pensée pour une vignette
   84×64 — soixante d'entre elles rempliraient trois écrans. Et son seul
   élément rond, `.catalog-drawer-image-rang`, fait 22 px, très en dessous
   d'une cible tactile fiable. La pastille se place entre les deux : 44 px,
   la taille recommandée (WCAG 2.5.5 / Apple HIG) pour un geste sûr au pouce,
   atteinte directement au lieu d'un `::after` — ici la pastille EST la cible,
   il n'y a aucune raison de la rendre plus petite qu'elle ne doit être.

   La couleur n'est JAMAIS le seul signal : un homme sur douze ne distingue
   pas le vert du rouge, et « lesquels sont en réparation » ne doit pas en
   dépendre. Chaque état porte donc aussi un style de bordure distinct, et
   l'état complet est écrit dans l'`aria-label` de chaque pastille. */

/* ⚠️ AUCUNE propriété `display` sur ce conteneur : `updateOrigineUI()` le
   masque en posant `hidden` sur les éléments `.js-prop-field`, et une règle
   de classe reprendrait le dessus sur la feuille du navigateur — le bloc
   resterait visible sur les fiches de sous-location. */
.mn-zone {
    margin-top: 1rem;
}
.mn-zone[hidden] { display: none; }

.mn-vide {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

/* Lien discret avec icône, pas un bouton coloré : « Enregistrer » doit rester
   l'action dominante du tiroir. */
.mn-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.25rem;
    background: transparent;
    border: none;
    color: var(--accent-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
}
.mn-lien:hover { color: #a5b4fc; }
.mn-lien:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.mn-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}
.mn-entete-titre {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mn-total {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Les quatre pastilles de comptage. Toujours visibles, jamais repliées :
   c'est la réponse en trois secondes. Un clic filtre la grille. */
.mn-compteurs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}
.mn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0 0.625rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.mn-chip:hover { border-color: var(--border-light); }
.mn-chip:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}
.mn-chip.actif {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}
.mn-chip-n {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text-primary);
}
.mn-chip-libelle { white-space: nowrap; }

.mn-recherche { margin-bottom: 0.75rem; }
/* L'étiquette existe pour les lecteurs d'écran ; à l'œil, le texte
   d'invite du champ dit déjà la même chose et la répéter volerait une ligne
   dans un tiroir déjà long. */
.mn-recherche-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.mn-recherche-champ {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8125rem;
}
.mn-recherche-champ:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.mn-repli { margin-bottom: 0.75rem; }
.mn-repli-summary { cursor: pointer; }

.mn-grille {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.mn-pastille {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-width: 44px;
    min-height: 44px;
    max-width: 84px;
    padding: 0.25rem 0.375rem;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}
/* Sans cette règle, une pastille filtrée resterait affichée : la déclaration
   `display: inline-flex` ci-dessus l'emporte sur `[hidden]` de la feuille du
   navigateur. */
.mn-pastille[hidden] { display: none; }
.mn-pastille:hover { border-color: var(--border-light); }
.mn-pastille:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}
.mn-pastille-num {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.1;
}
/* Le texte libre sous le numéro. Tronqué plutôt que replié : une pastille
   qui grandit parce qu'on a écrit une phrase décalerait toute la grille. */
.mn-pastille-libelle {
    max-width: 72px;
    font-size: 0.625rem;
    line-height: 1.2;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mn-aucun {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.mn-aucun[hidden] { display: none; }

/* --- Générateur d'étiquettes -------------------------------------------
   Replié dans le tiroir de la fiche, jamais dans une modale : le tiroir
   porte un `backdrop-filter`, qui piège tout `position: fixed` enfant. */
.mn-etq {
    margin-top: 0.75rem;
    padding: 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.mn-etq[hidden] { display: none; }
.mn-etq-intro {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.mn-etq-mesure {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.mn-etq-mesure .mn-recherche-champ {
    width: 5.5rem;
    min-height: 44px;
}
.mn-etq-unite { color: var(--text-muted); }
.mn-etq-corps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
}
/* L'aperçu est un PDF à sa taille réelle : le cadre est volontairement
   généreux, il ne doit jamais rogner l'étiquette qu'il montre. */
.mn-etq-apercu {
    width: 220px;
    height: 130px;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.mn-etq-infos {
    flex: 1 1 12rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.mn-etq-refus .mn-etq-infos { color: var(--accent-warning); }
/* `pointer-events: none` ne retire QUE la souris : au clavier, les deux
   liens restaient atteignables par Tab et activables. `visibility: hidden`
   les sort aussi de la navigation clavier et des lecteurs d'écran. */
.mn-etq-refus .mn-etq-actions { opacity: 0.4; visibility: hidden; }
.mn-etq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .mn-etq-apercu { width: 100%; height: 150px; }
}

/* Les quatre états. Couleur ET style de bordure : le second reste lisible
   sans distinguer les couleurs. */
.mn-etat-EN_SERVICE {
    border-color: var(--accent-success);
    border-style: solid;
}
.mn-etat-EN_REPARATION {
    border-color: var(--accent-warning);
    border-style: dashed;
}
.mn-etat-HORS_SERVICE {
    border-color: var(--text-muted);
    border-style: dotted;
}
.mn-etat-PERDU {
    border-color: var(--accent-danger);
    border-style: solid;
}
/* Perdu : le numéro est barré. Deuxième signal, indépendant de la couleur,
   pour l'état qui compte le plus quand on fait l'inventaire. */
.mn-pastille.mn-etat-PERDU .mn-pastille-num {
    text-decoration: line-through;
    color: var(--text-danger);
}
.mn-pastille.mn-etat-HORS_SERVICE .mn-pastille-num { color: var(--text-muted); }

/* Les mêmes couleurs sur le liseré gauche des pastilles de comptage. */
.mn-chip.mn-etat-EN_SERVICE { border-left-color: var(--accent-success); }
.mn-chip.mn-etat-EN_REPARATION { border-left-color: var(--accent-warning); }
.mn-chip.mn-etat-HORS_SERVICE { border-left-color: var(--text-muted); }
.mn-chip.mn-etat-PERDU { border-left-color: var(--accent-danger); }

/* Les deux quantités gelées, dans la section Stock. Grisées et non
   modifiables : elles se comptent depuis les numéros. */
.mn-champ-calcule {
    opacity: 0.75;
    cursor: not-allowed;
}
.mn-note-calcule {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

/* ── Les deux fenêtres du parc numéroté ─────────────────────────────── */
.mn-modal-fiche {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
}
.mn-modal-champ { text-align: left; }
/* Le plafond ne vise QUE le champ numerique : un « 60 » dans une boite pleine
   largeur se lit mal. Applique a tous les champs, il tronquait le texte
   d'invite du libelle (« Ex : regie, scene, pa… »), qui a besoin de la
   largeur. */
.mn-modal-champ input[type="number"] { max-width: 160px; }
.mn-modal-apercu {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.mn-modal-alerte {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.625rem;
    background: rgba(245, 158, 11, 0.12);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: left;
}
.mn-modal-alerte[hidden] { display: none; }
.mn-modal-regle {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mn-etats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.mn-etat-btn {
    min-height: 44px;
    padding: 0 0.875rem;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.mn-etat-btn:hover:not(:disabled) { color: var(--text-primary); }
.mn-etat-btn:disabled { opacity: 0.5; cursor: default; }
.mn-etat-btn:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}
.mn-etat-btn.actif {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    /* Les pastilles restent en grille qui passe à la ligne. Un défilement
       horizontal, comme la galerie photo, marche pour cinq images ; avec
       soixante numéros il faudrait une dizaine de balayages pour atteindre le
       N°43, alors qu'ici sept tiennent par ligne et que la grille entière se
       lit d'un coup d'œil. */
    .mn-grille { gap: 0.375rem; }
    .mn-pastille { max-width: 64px; }
    .mn-pastille-libelle { max-width: 52px; }
    .mn-chip {
        flex: 1 1 calc(50% - 0.375rem);
        justify-content: flex-start;
    }
    .mn-modal-champ input[type="number"] { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPOSITION DES KITS — la recette, les numéros nommés, ce qui reste
   ═══════════════════════════════════════════════════════════════════

   Tout ce qui touche aux numéros réutilise les classes `mn-*` du parc
   numéroté juste au-dessus : c'est la même grille, les mêmes couleurs d'état,
   les mêmes pastilles. Seules les différences propres au nommage sont
   redéfinies ici. */

/* La phrase sous le menu « Type ». DEUX ÉTATS, DEUX PHRASES. */
.kit-type-aide {
    margin: 0.375rem 0 0;
    min-height: 1.1rem;
}

/* ── La fiche vendue ─────────────────────────────────────────────── */
.kit-produit-choisi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.kit-produit-choisi[hidden] { display: none; }
.kit-produit-nom {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Le résumé des numéros nommés, sous le composant ─────────────── */
.kit-num-resume {
    flex: 0 0 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
/* Vide tant que rien n'est nommé : le cas majoritaire ne perd pas un pixel,
   et surtout pas une ligne blanche entre chaque composant. */
.kit-num-resume-vide { display: none; }

/* Le bouton d'ouverture. DISCRET et jamais présélectionné : nommer les
   numéros est une option, pas une étape. */
.kit-num-lien { color: var(--text-muted); }
.kit-num-lien:hover { color: var(--accent-primary); }

/* ── « Ce qui reste » ────────────────────────────────────────────── */
.kit-reste {
    flex: 0 0 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.625rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.kit-reste-titre {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.kit-reste-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.kit-reste-table th,
.kit-reste-table td {
    padding: 0.15rem 0.25rem;
    text-align: left;
    font-weight: 400;
    color: var(--text-secondary);
    vertical-align: top;
}
.kit-reste-table th {
    font-weight: 600;
    white-space: nowrap;
}
.kit-reste-nums { color: var(--text-primary); }
.kit-reste-detail { color: var(--text-muted); }
.kit-reste-n {
    text-align: right;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
/* Le liseré reprend les couleurs d'état des pastilles : vert « en service »
   pour les libres, gris pour le hors service. */
.kit-reste-LIBRES th { border-left: 3px solid var(--accent-success); padding-left: 0.4rem; }
.kit-reste-DEHORS th { border-left: 3px solid var(--accent-warning); padding-left: 0.4rem; }
.kit-reste-HORS_SERVICE th { border-left: 3px solid var(--text-muted); padding-left: 0.4rem; }

/* L'honnêteté du calcul, écrite sous la liste. */
.kit-reste-avertissement {
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.625rem;
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ── « Ce kit ne se trouve pas sur un devis » ─────────────────────────
   Le bandeau qui manquait : un kit sans `EquipmentKit.produit` est complet à
   l'écran et introuvable dans une ligne de devis. Il PRÉVIENT et il RÉPARE,
   au même endroit — un avertissement qui renvoie ailleurs, c'est le parcours
   de dix-huit gestes qu'on supprime.
   Colonne unique en dessous de 520 px : le tiroir descend à 100 % de largeur
   sur téléphone et le bouton, seul sur sa ligne, garde une cible pleine. */
.kit-alerte-vente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    background: rgba(244, 63, 94, 0.10);
    border: 1px solid rgba(244, 63, 94, 0.28);
    border-left: 3px solid var(--accent-danger);
    border-radius: var(--radius-sm);
}
.kit-alerte-vente--prix {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.28);
    border-left-color: var(--accent-warning);
}
.kit-alerte-vente-texte {
    flex: 1 1 240px;
    min-width: 0;
}
.kit-alerte-vente-titre {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fb7185;
}
.kit-alerte-vente--prix .kit-alerte-vente-titre {
    color: var(--accent-warning);
}
.kit-alerte-vente-detail {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.kit-alerte-vente-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* 44 px de haut : cible tactile, pas un lien de 20 px au doigt. */
    min-height: 44px;
    padding: 0.55rem 0.95rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-purple));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.kit-alerte-vente-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.kit-alerte-vente-action:disabled {
    opacity: 0.6;
    cursor: wait;
}
@media (max-width: 520px) {
    .kit-alerte-vente {
        flex-direction: column;
        align-items: stretch;
    }
    .kit-alerte-vente-action {
        justify-content: center;
    }
}

/* ── La fenêtre de choix des numéros ─────────────────────────────── */
/* Plus large que `.catalog-delete-modal` : soixante pastilles à sept par
   ligne, sinon la grille tient sur neuf lignes et sort de l'écran. */
.kit-num-modal-contenu {
    max-width: 620px;
    width: min(620px, calc(100vw - 2rem));
}
/* Le champ texte prend TOUTE la largeur, contrairement aux champs numériques
   de `.mn-modal-champ` bornés à 160px : « 1-8, 12, 20-25 » ne s'y lisait pas. */
.kit-num-champ {
    max-width: 100%;
    width: 100%;
}
/* La grille défile au-delà de six lignes plutôt que de pousser les boutons
   d'action hors de la fenêtre. */
.kit-num-grille {
    justify-content: flex-start;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem;
    margin-top: 0.5rem;
}
.kit-num-pastille { min-width: 52px; max-width: 76px; }
/* Choisi : un ANNEAU épais, pas seulement une autre couleur de liseré.
   Constaté à l'écran le 25/08 : « choisi » se lisait violet et « en service »
   vert, deux teintes que 8 % des hommes ne distinguent pas. L'anneau double
   est une différence de FORME, visible sans la couleur. */
.kit-num-pastille.kit-num-choisi {
    border-color: var(--accent-primary);
    background: var(--bg-glass-hover);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}
.kit-num-pastille.kit-num-choisi .mn-pastille-num { color: var(--text-primary); }
/* Déjà nommé par un autre kit : GRISÉ, avec le nom du kit dessous. Une
   information, pas un verrou — un second clic le reprend. */
.kit-num-pastille.kit-num-pris:not(.kit-num-choisi) { opacity: 0.55; }
.kit-num-pris-nom {
    max-width: 68px;
    font-size: 0.575rem;
    line-height: 1.1;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La confirmation de reprise : une LIGNE dans la fenêtre, jamais une seconde
   modale par-dessus la première. */
.kit-num-confirme {
    margin-top: 0.5rem;
    padding: 0.625rem;
    background: rgba(245, 158, 11, 0.12);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-sm);
    text-align: left;
}
.kit-num-confirme[hidden] { display: none; }
.kit-num-confirme-texte {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.kit-num-confirme-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    /* 390px : la ligne du composant se replie, le champ de quantité et les
       actions passent sous le nom au lieu de le comprimer à trois mots. */
    .catalog-kit-item-info { flex: 1 1 100%; }
    .catalog-kit-item-qty { flex: 0 0 auto; }
    .catalog-kit-item-actions { margin-left: auto; }
    .kit-num-pastille { min-width: 46px; max-width: 62px; }
    .kit-num-pris-nom { max-width: 54px; }
    .kit-num-grille { max-height: 240px; }
    .kit-reste-table { font-size: 0.68rem; }
}

/* =========================================================================
   PAGE PUBLIQUE DU SCAN D'UN BOÎTIER  (/o/<code_qr>)
   =========================================================================
   Écran vu UNIQUEMENT sur téléphone, dehors, souvent en plein soleil, sur un
   réseau de festival saturé. Trois conséquences qui expliquent tout ce qui
   suit :
     - contraste poussé au maximum (blanc pur sur #0f172a = 17:1) plutôt que
       la rampe secondaire habituelle, qui devient grise au soleil ;
     - cibles tactiles à 56 px de haut, pas 40 : on tape avec un gant, une
       main occupée, en marchant ;
     - très peu d'éléments, un seul par ligne, aucun geste horizontal.
   ========================================================================= */

/* Le gabarit public posait cette mise en page dans un `<style>` en tête de
   fichier ; les pages de scan étant autonomes, la règle vit ici, avec le
   reste. */
.scan-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.scan-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1rem 0.5rem;
}
.scan-topbar-sigle { height: 30px; width: auto; }
.scan-topbar-nom { height: 18px; width: auto; }

.scan-page {
    flex: 1;
    display: flex;
    justify-content: center;
    /* `flex-start` : sans lui, l'etirement par defaut d'un conteneur flex
       fait remplir toute la hauteur de l'ecran a la carte. Sur la page neutre,
       qui ne porte que trois lignes, ca donnait un grand rectangle vide. */
    align-items: flex-start;
    padding: 0.5rem 1rem 3rem;
}

.scan-card {
    width: 100%;
    /* Bornée pour le desktop : au-delà, les champs s'étirent sur toute la
       largeur d'un écran et la ligne devient illisible. Le mobile, lui, prend
       les 100 %. */
    max-width: 480px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 1.5rem 1.25rem 1.75rem;
}

.scan-fiche {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Le numéro est l'élément le plus gros de l'écran, et c'est volontaire : il
   répond en une seconde à « c'est lequel celui-là », qui est la seule question
   qu'on se pose un talkie à la main. */
.scan-numero {
    margin: 0.25rem 0 1.25rem;
    text-align: center;
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    color: #ffffff;
}
.scan-numero--muet { color: var(--text-secondary); }

.scan-bandeau {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.45;
}
.scan-bandeau--ok {
    background: var(--success-light);
    border-color: var(--accent-success);
    color: #ffffff;
}
.scan-bandeau--ko {
    background: var(--danger-light);
    border-color: var(--accent-danger);
    color: #ffffff;
}
.scan-bandeau--alerte {
    background: rgba(245, 158, 11, 0.16);
    border-color: var(--accent-warning);
    color: #ffffff;
}

.scan-location {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.scan-neutre {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.scan-aide {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.scan-detenteur {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    text-align: center;
}
.scan-detenteur-nom {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
}
.scan-detenteur-detail {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.scan-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.scan-form--secondaire { margin-top: 1.5rem; }

/* Le champ piège de l'antibot. `position:absolute` + `left:-9999px` plutôt que
   `display:none` : certains robots ignorent ce qui est masqué par `display`,
   et `hidden` les ferait tous passer à côté. Le lecteur d'écran, lui, est
   écarté par l'`aria-hidden` posé sur le conteneur dans le gabarit. */
.scan-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.scan-label {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.scan-facultatif {
    font-weight: 400;
    color: var(--text-secondary);
}

.scan-champ {
    width: 100%;
    min-height: 56px;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-app);
    color: #ffffff;
    /* 1rem exactement : sous 16 px, iOS zoome sur le champ au premier appui
       et l'écran part de travers. */
    font-size: 1rem;
    font-family: inherit;
}
.scan-champ:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-color: var(--accent-primary);
}
.scan-select {
    /* La flèche native du `<select>` est conservée : elle indique qu'il y a
       une liste, et c'est exactement ce qu'on veut faire comprendre. */
    padding-right: 0.75rem;
}

.scan-consentement {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
}
.scan-case {
    flex-shrink: 0;
    /* 24 px : une case à cocher de 16 px se rate une fois sur trois au doigt. */
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--accent-primary);
}

.scan-btn {
    width: 100%;
    min-height: 56px;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.3s ease;
}
.scan-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.scan-btn--principal {
    margin-top: 0.75rem;
    background: var(--accent-primary);
    color: #ffffff;
}
.scan-btn--principal:hover { filter: brightness(1.1); }
/* « J'ai un problème » : lisible, jamais aguicheur. C'est le geste rare, il
   ne doit pas concurrencer la prise ni le retour. */
.scan-btn--discret {
    background: transparent;
    border-color: var(--border-light);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
}
.scan-btn--discret:hover { color: var(--text-primary); }

/* Les deux sorties du parc numéroté, sur leur propre ligne et repliables :
   dans un tiroir étroit, trois liens en `inline-flex` se retrouvaient à la
   queue leu leu derrière « Ajouter des numéros ». */
.mn-sorties {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

/* ---- Écran « Qui a quoi » (prêts de matériel numéroté) --------------------
   Complément minimal de `.tx-table` : la table, les cartes et les pastilles
   de filtre sont celles qui servent déjà à la compta et au bilan event. */
/* Conteneur du tableau. Repris de `.tx-table-wrap` moins son
   `display: none` mobile : ici le tableau DOIT rester lisible sur telephone,
   c'est l'ecran qu'un regisseur ouvre sur le terrain. Il defile
   horizontalement plutot que de disparaitre. */
.pm-table-wrap {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(10,15,30,0.5);
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.4) rgba(15,23,42,0.3);
}
.pm-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.pm-table-wrap::-webkit-scrollbar-track { background: rgba(15,23,42,0.3); }
.pm-table-wrap::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.4); border-radius: 3px; }
/* Le tableau ne se comprime pas sous la largeur de ses six colonnes : il
   defile. Comprime, « 06 12 34 56 78 » passe sur trois lignes. */
.pm-table-wrap .tx-table { min-width: 640px; }

.pm-vide {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
/* Le numéro est ce qu'on cherche du regard en balayant la colonne : il est
   donc plus lourd que le reste de la ligne, comme sur l'étiquette. */
.pm-numero {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.pm-chargeur { color: var(--text-secondary); font-style: italic; }
.pm-rien { color: var(--text-muted); }
/* `nowrap` : coupe en deux, « 06 44 21 78 90 » devient deux nombres de sept
   chiffres qu'on recopie de travers en appelant. */
.pm-tel { color: var(--accent-info); white-space: nowrap; }
.pm-tel:hover { text-decoration: underline; }

/* ---- Fiche d'un boîtier, ouverte depuis « Qui a quoi » ---------------------
   Aucun composant neuf : l'ossature est celle du tiroir catalogue
   (`.catalog-modal-overlay` / `-content` / `-close`) et la palette d'états
   celle de la fiche d'un numéro (`.mn-etats` / `.mn-etat-btn`). Ce bloc ne
   contient donc que les écarts. */

/* Le numéro devient la cible du doigt. Il garde EXACTEMENT l'allure qu'il
   avait en texte — même graisse, même corps, même couleur — parce que la
   colonne se lit encore en la balayant du regard : un bouton qui se voit
   comme un bouton ferait soixante taches dans la liste. 44 px de haut,
   la taille de cible minimale. */
.pm-boitier-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.375rem;
    margin-left: -0.375rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
}
.pm-boitier-btn:hover {
    background: var(--bg-glass-hover);
    border-color: rgba(139, 92, 246, 0.4);
}
.pm-boitier-btn:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}

/* Le seul écart avec `.catalog-modal-overlay` : son fond est à
   `rgba(0,0,0,0.85)`, en dessous du minimum de la règle maison. */
.pm-sheet { background: rgba(15, 23, 42, 0.95); }
.pm-sheet-card {
    max-width: 420px;
    text-align: center;
}
.pm-sheet-titre {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
}
.pm-sheet-fiche {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.pm-sheet-porteur {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* Séparé de la palette d'états par un filet : fermer un prêt et changer un
   état sont deux gestes distincts, sur deux données distinctes. Les coller
   ferait cliquer l'un pour l'autre à bout de bras dans une régie. */
.pm-sheet-rendre {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-subtle);
}
.pm-sheet-rendre[hidden] { display: none; }
.pm-sheet-rendre-btn {
    width: 100%;
    min-height: 44px;
}
/* Le formulaire n'existe que pour porter le jeton CSRF : il ne s'affiche pas
   et ne prend aucune place dans le flux. */
.pm-jeton { display: none; }

@media (max-width: 640px) {
    /* Sur téléphone la fiche prend la largeur : c'est l'écran qu'on ouvre
       à bout de bras, entre deux urgences. */
    .pm-sheet-card { width: 94%; max-width: none; padding: 1.5rem 1.25rem; }
    .pm-sheet .mn-etats { gap: 0.375rem; }
    .pm-sheet .mn-etat-btn { flex: 1 1 calc(50% - 0.375rem); }
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE DE L'ORGANISATEUR — ses talkies pendant son événement
   ══════════════════════════════════════════════════════════════════════
   Elle se tient SEULE : pas de barre latérale, pas de chrome ORKYA OS. Le
   préfixe `tk-` lui est propre pour cette raison — reprendre `.pm-` aurait
   mélangé deux écrans qui n'ont ni la même largeur, ni le même lecteur, ni
   le même appareil.

   Tout est centré et borné : c'est une page de téléphone d'abord, tenue à
   bout de bras entre deux urgences, et une page qu'un client montre à ses
   bénévoles pendant trois jours. Les jetons (couleurs, rayons, ombres) sont
   ceux du projet, aucun n'est inventé ici. */

.tk-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- En-tête : le logo ORKYA, la marque, PAS ORKYA OS ------------------ */
.tk-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.5rem 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}
.tk-topbar-sigle { height: 34px; width: auto; }
/* Le mot est plus bas que le sigle : il cale sur la hauteur des capitales et
   non sur la boîte, sinon il flotte au-dessus de la ligne du sigle. */
.tk-topbar-mot { height: 19px; width: auto; }

.tk-page {
    flex: 1;
    width: 100%;
    /* 720 px : au-delà, une carte s'étire et le nom du porteur se retrouve à
       trente centimètres de son téléphone. En dessous, les trois détails du
       porteur ne tiennent plus sur une ligne en desktop. */
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

/* --- Titre de l'événement --------------------------------------------- */
.tk-entete {
    text-align: center;
    margin-bottom: 2rem;
}
.tk-surtitre {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tk-titre {
    margin: 0.5rem 0 0;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
}
.tk-dates {
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Confirmation et refus, sans script ------------------------------- */
.tk-succes,
.tk-erreur {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
}
.tk-succes {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: var(--accent-success);
}
.tk-erreur {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* --- Compteurs -------------------------------------------------------- */
.tk-compteurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
    margin-bottom: 1.75rem;
}
.tk-compteur {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.875rem 0.5rem;
    text-align: center;
}
.tk-compteur-n {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}
.tk-compteur-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- La liste des boîtiers -------------------------------------------- */
.tk-liste {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.tk-carte {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.125rem 1.125rem 1rem;
}
/* Un boîtier en panne se repère AVANT de lire sa pastille : c'est la ligne
   sur laquelle l'organisateur doit agir. Un liseré, pas un fond ambré — un
   parc à moitié en panne deviendrait illisible. */
.tk-carte--panne { border-left: 4px solid var(--accent-warning); }

.tk-carte-entete {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}
.tk-numero {
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}
.tk-carte-titres { flex: 1 1 auto; min-width: 0; }
.tk-porteur {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.tk-porteur--libre {
    font-weight: 600;
    font-style: italic;
    color: var(--text-secondary);
}
.tk-fiche {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.tk-badge { flex: 0 0 auto; align-self: center; }

/* --- Les détails du porteur ------------------------------------------- */
.tk-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 1rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-subtle);
}
.tk-detail { margin: 0; }
.tk-detail dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tk-detail dd {
    margin: 0.125rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
/* Le canal est ce qu'on cherche du regard : c'est lui qui dit sur quelle
   fréquence appeler la personne. */
.tk-canal { font-weight: 800; font-size: 1.0625rem; }
/* `nowrap` : coupé en deux, un numéro devient deux nombres de sept chiffres
   qu'on recopie de travers en appelant. */
.tk-tel { color: var(--accent-info); white-space: nowrap; }
.tk-tel:hover { text-decoration: underline; }
.tk-rien { color: var(--text-muted); font-style: italic; }

.tk-passation {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.75rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.tk-passation-n { display: block; margin-top: 0.125rem; color: var(--text-muted); }

/* --- Le geste : un bouton, l'état opposé ------------------------------ */
.tk-action { margin: 1rem 0 0; }
.tk-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tk-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
/* « Remettre en service » est l'action qu'Alan décrit : il reteste, ça
   marche, il reclique, il repart. Elle est donc la seule colorée en plein. */
.tk-btn--ok {
    background: var(--accent-success);
    color: #06281d;
}
.tk-btn--ok:hover { filter: brightness(1.08); }
/* « Signaler une panne » retire du matériel du disponible : discrète, pour
   qu'on ne l'appuie pas en visant la carte du dessous. */
.tk-btn--alerte {
    background: transparent;
    border-color: rgba(245, 158, 11, 0.45);
    color: var(--accent-warning);
}
.tk-btn--alerte:hover { background: rgba(245, 158, 11, 0.12); }

/* --- États vides et liens --------------------------------------------- */
.tk-vide { text-align: center; padding: 2rem 1.25rem; }
.tk-vide-titre {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
}
.tk-vide-aide {
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.tk-lien { color: var(--accent-info); }
.tk-lien:hover { text-decoration: underline; }
/* La carte-lien de `/talkies/` quand un compte porte plusieurs événements. */
.tk-carte--lien {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
}
.tk-carte--lien:hover { background: var(--bg-glass-hover); }

.tk-pied {
    padding: 1.5rem 1rem 2rem;
    border-top: 1px solid var(--border-subtle);
}
.tk-pied-texte {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    /* Quatre compteurs sur 390 px donnent des colonnes de 84 px : « au
       chargeur » y passe sur trois lignes. Deux par deux. */
    .tk-compteurs { grid-template-columns: 1fr 1fr; }
    .tk-titre { font-size: 1.5rem; }
    .tk-page { padding: 1.5rem 0.875rem 2.5rem; }
    .tk-carte { padding: 1rem 1rem 0.875rem; }
    /* La pastille d'état passe sous le nom : à trois éléments sur une ligne
       de 358 px, le nom du porteur se coupait au milieu. */
    .tk-carte-entete { flex-wrap: wrap; }
    .tk-badge { align-self: flex-start; }
    .tk-details { gap: 0.75rem 1.25rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   PAGE DE L'ORGANISATEUR — la vue PAR CANAL (25/08/2026)
   ══════════════════════════════════════════════════════════════════════
   Ajouté À LA SUITE, sans rien réorganiser au-dessus : quatre branches ont
   posé un bloc dans ce fichier aujourd'hui, et le déplacer garantirait un
   conflit à la fusion.

   La seconde lecture de la même page : « qui est joignable sur quel canal ».
   Elle ne montre que des prénoms et des noms — pas de téléphone, pas de
   numéro de boîtier, pas d'état — parce qu'elle répond à une seule question,
   celle qu'on se pose une radio à la main. */

/* --- La bascule entre les deux vues ----------------------------------- */
/* Reprise de `.bilan-vent-toggle` : même pilule, même rayon, mêmes poids.
   Elle porte des LIENS et non des boutons — cette page n'a aucun script, et
   deux adresses valent mieux qu'un onglet qu'on ne peut pas partager. */
.tk-bascule {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
    padding: 0.3rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
}
.tk-bascule-lien {
    flex: 1 1 0;
    padding: 0.625rem 0.5rem;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.3s ease;
}
.tk-bascule-lien:hover { color: var(--text-primary); }
.tk-bascule-lien--actif {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

/* --- L'annuaire ------------------------------------------------------- */
/* Une LISTE et non des cartes : seize canaux en cartes feraient défiler un
   écran entier pour quatre noms. Ici une ligne = un canal, et le pouce
   parcourt la colonne des numéros sans lire le reste. */
.tk-canaux {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
}
.tk-canal-ligne {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.tk-canal-ligne:last-child { border-bottom: 0; }
/* Un canal libre s'efface sans disparaître : il reste lisible d'un coup
   d'oeil pour savoir où installer l'équipe suivante. */
.tk-canal-ligne--libre { opacity: 0.55; }

/* Même pastille que `.tk-numero` sur la vue par boîtier : le lecteur
   reconnaît le repère d'une vue à l'autre. 44 px, la cible tactile. */
.tk-canal-puce {
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Les noms coulent et reviennent à la ligne : à 390 px, quatre porteurs sur
   un canal tiennent sur deux lignes au lieu de pousser une barre de
   défilement horizontale. */
.tk-canal-noms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* Un point sépare les noms sans les enfermer dans des étiquettes : c'est une
   liste à lire, pas des boutons à viser. */
.tk-canal-nom + .tk-canal-nom::before {
    /* Le caractere ecrit tel quel, jamais une sequence d'echappement
       CSS : \00b7 tape depuis un script Python devient l'octet NUL
       (\00 est un echappement OCTAL), et le navigateur affichait un
       losange suivi de « b7 ». Constate en capture le 26/08. */
    content: "·";
    margin-right: 0.375rem;
    color: var(--text-muted);
}
.tk-canal-libre {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Filet : porteurs dont le canal ne fait pas partie de la liste. Ne sort
   jamais tant que la contrainte de base tient. */
.tk-canaux-note {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--accent-warning);
    border-radius: 14px;
}
.tk-canaux-note-titre {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-warning);
}
.tk-canaux-note-noms {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 480px) {
    /* « Par boîtier » et « Par canal » tiennent côte à côte sur 358 px : on
       garde les deux moitiés égales et on resserre seulement le rembourrage
       HORIZONTAL. Le vertical monte au contraire, pour que la cible tactile
       atteigne 44 px — mesurée à 41 px au premier essai. */
    .tk-bascule-lien { padding: 0.75rem 0.25rem; font-size: 0.8125rem; }
    .tk-canal-ligne { padding: 0.625rem 0.75rem; gap: 0.75rem; }
    .tk-canal-puce { min-width: 40px; height: 40px; font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA FENÊTRE CATALOGUE, DEPUIS UNE LIGNE DE DEVIS      (préfixe `pk-`)

   Alan : « au bout de cette ligne un petit bouton, ça ouvre une pop-up, on
   voit ce qui est dispo aux dates, et au bout de chaque ligne "ajouter au
   devis". En 3-4 clics au lieu de chercher par l'écrit. »

   Le voile reprend `rgba(15, 23, 42, 0.85)` — la MÊME teinte que
   `.eb-modal` et `.orkya-modal-backdrop`. L'application avait déjà eu deux
   fonds de modale différents ; on n'en ajoute pas un troisième.
   ══════════════════════════════════════════════════════════════════════ */

.pk-fenetre {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.pk-fond {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
}
.pk-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    max-height: 88vh;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 18px;
    overflow: hidden;
}

/* ── Entête ───────────────────────────────────────────────────────── */
.pk-carte-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pk-carte-titre-zone { min-width: 0; }
.pk-carte-titre {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1rem;
    color: #ede9fe;
}
.pk-carte-soustitre {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.pk-carte-entete-droite {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}
.pk-compteur {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-size: 0.72rem;
    font-weight: 700;
}
.pk-fermer {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 px : cible tactile, y compris au doigt sur un téléphone. */
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}
.pk-fermer:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #fb7185;
}

/* ── Barre de recherche + onglets ─────────────────────────────────── */
.pk-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pk-recherche-zone {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.pk-recherche-icone {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}
.pk-recherche {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem 0.55rem 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
    font-size: 0.85rem;
}
.pk-recherche:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
}
.pk-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 0 0 auto;
}
.pk-onglet {
    min-height: 36px;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.5);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.pk-onglet:hover { border-color: rgba(139, 92, 246, 0.35); }
.pk-onglet--actif {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #ede9fe;
}

/* ── Corps : les lignes ───────────────────────────────────────────── */
.pk-corps {
    flex: 1 1 auto;
    min-height: 200px;
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1rem;
}
.pk-entete { padding: 0.6rem 0 0.4rem; }
.pk-periode {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.pk-periode strong { color: var(--text-secondary); }
/* Sans période, la fenêtre n'affiche AUCUNE disponibilité : le calcul
   retomberait sur un seul jour à la date d'émission, et annoncer ça pour
   une location de trois jours serait promettre du matériel déjà parti. */
.pk-periode--absente {
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid var(--accent-warning);
    border-radius: var(--radius-sm);
    line-height: 1.45;
}
.pk-periode--absente strong { color: var(--accent-warning); }

.pk-liste {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pk-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 120px 92px auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.15s;
}
.pk-item:hover {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.25);
}
.pk-item--bloque { opacity: 0.72; }
.pk-item-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary);
    font-size: 0.9rem;
    overflow: hidden;
}
.pk-item-icone--presta {
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-warning);
}
.pk-item-icone--kit {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-success);
}
.pk-item-vignette {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pk-item-info { min-width: 0; }
.pk-item-nom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}
.pk-item-detail {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-item-bloque-texte { color: #fb7185; }
.pk-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pk-badge--kit {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.pk-badge--type {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    text-transform: none;
    letter-spacing: 0;
}
.pk-badge--maintenance {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.pk-item-dispo {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: right;
}
.pk-dispo {
    font-size: 0.78rem;
    font-weight: 700;
}
.pk-dispo--ok { color: #34d399; }
.pk-dispo--zero { color: #fb7185; }
.pk-dispo--inconnue { color: var(--text-muted); }
.pk-dispo-detail {
    font-size: 0.63rem;
    color: var(--text-muted);
}
.pk-item-prix {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}
.pk-item-unite {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
}
.pk-sans-prix { color: var(--accent-warning); }

.pk-ajouter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* 44 px de haut : c'est LE bouton de la fenêtre, il se clique au doigt. */
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-purple));
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pk-ajouter:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}
.pk-ajouter--impossible {
    background: rgba(244, 63, 94, 0.12);
    color: #fb7185;
    cursor: not-allowed;
}
.pk-ajouter--impossible:hover {
    transform: none;
    box-shadow: none;
}

.pk-vide {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.pk-vide-icone {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    opacity: 0.5;
}
.pk-vide p { margin: 0.2rem 0; font-size: 0.85rem; }
.pk-vide-detail { font-size: 0.72rem; opacity: 0.8; }

.pk-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0 0;
}
.pk-pagination-info {
    margin-right: auto;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.pk-pagination-btn {
    min-height: 36px;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.pk-pagination-btn:disabled { opacity: 0.4; cursor: default; }

.pk-chargement {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pk-carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pk-pied-aide {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.pk-termine {
    min-height: 44px;
    padding: 0.55rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.5);
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.pk-termine:hover { border-color: rgba(139, 92, 246, 0.4); }

/* ── 390 px : la grille a cinq colonnes ne tient pas, on empile ───── */
@media (max-width: 720px) {
    .pk-fenetre { padding: 0; }
    .pk-carte {
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border: none;
        border-radius: 0;
    }
    .pk-corps { padding: 0.5rem 0.85rem 1rem; }
    .pk-barre { padding: 0.7rem 0.85rem; }
    .pk-carte-entete { padding: 0.85rem; }
    .pk-carte-pied { padding: 0.7rem 0.85rem; }
    .pk-carte-soustitre { display: none; }
    /* La grille a colonnes fixes ecrasait la colonne « dispo » a 36 px :
       « limite par Talkie-walkie BF-1909D » tombait a un mot par ligne et
       la carte triplait de hauteur. En dessous de 720 px on passe donc en
       flux : ligne 1 = vignette + nom, ligne 2 = dispo + prix + bouton. */
    .pk-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0.5rem;
    }
    .pk-item-icone { width: 36px; height: 36px; flex: 0 0 36px; }
    /* Force la bascule : la vignette (36) + son ecart (0,6rem) = 48 px. */
    .pk-item-info { flex: 1 1 calc(100% - 48px); }
    .pk-item-dispo {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4rem;
        text-align: left;
    }
    .pk-item-dispo .pk-dispo-detail { flex: 1 1 100%; }
    .pk-item-prix { flex: 0 0 auto; text-align: left; }
    .pk-ajouter { flex: 0 0 auto; margin-left: auto; }
    .pk-pied-aide { display: none; }
    .pk-termine { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Ce qui ouvre la fenêtre, depuis l'éditeur de devis
   ══════════════════════════════════════════════════════════════════════ */

/* Le « petit bouton au bout de la ligne ». Posé dans la barre d'actions de
   la ligne, avec « dupliquer » et « supprimer » : c'est là que l'éditeur met
   déjà ce qui agit sur CETTE ligne. */
.line-catalogue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    margin-left: 0.3rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--accent-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
}
.line-catalogue-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

/* La liste d'autocomplétion s'ouvre MÊME VIDE : c'est le moment exact du
   défaut d'Alan (« je tape le nom de mon kit, je ne le trouve pas »). Un
   menu qui ne s'ouvre pas ne dit pas « rien ne correspond », il ne dit
   rien — et laisse croire à une panne. */
.line-autocomplete-nom {
    font-size: 0.85rem;
    color: #fff;
}
.line-autocomplete-prix {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.line-autocomplete-vide {
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.line-autocomplete-catalogue {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(99, 102, 241, 0.10);
    color: #a5b4fc;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.line-autocomplete-catalogue:hover { background: rgba(99, 102, 241, 0.22); }

/* ══════════════════════════════════════════════════════════════════════
   LE DEPASSEMENT DE STOCK, DIT PENDANT L'EDITION DU DEVIS
   (prefixes `stock-bandeau-` et `line-stock-`)

   Alan : « si je mets trois unites de groupe electrogene alors que j'en ai
   deux, je n'ai aucune alerte qui se cree sur mon devis. »

   AMBRE, PAS ROUGE — et c'est deliberé. Le rouge de cet ecran porte deja
   l'erreur de validation (`.field-error-msg`, `.has-error`), qui BLOQUE
   l'enregistrement. Un depassement de stock ne bloque rien : Alan doit
   pouvoir sous-louer ou s'arranger. Deux sens sous la meme couleur, ce
   serait deux avertissements illisibles au scan.

   L'ambre porte deja « ligne en option » sur les PASTILLES (`.pill-opt`).
   Ici il habille un BANDEAU et une LIGNE D'ALERTE avec une icone de
   triangle : la forme distingue, la couleur regroupe « fais attention ».
   ══════════════════════════════════════════════════════════════════════ */

.stock-bandeau {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 1.25rem 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.10);
}
.stock-bandeau-icone {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 0.9rem;
    color: var(--accent-warning, #f59e0b);
}
.stock-bandeau-texte {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #fde68a;
}
.stock-bandeau-detail {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
}

/* Le cas « on ne sait pas » : sans periode de location le calcul retombe
   sur un seul jour, et annoncer « tout est disponible » la-dessus, ce
   serait promettre du materiel deja parti. Ton neutre, jamais alarmant :
   ce n'est pas un probleme, c'est une information qui manque. */
.stock-bandeau--muet {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.08);
}
.stock-bandeau--muet .stock-bandeau-icone { color: var(--text-muted, #94a3b8); }
.stock-bandeau--muet .stock-bandeau-texte { color: var(--text-secondary, #cbd5e1); }

/* Le detail EN PLACE, sur la ligne : le chiffre demande, le chiffre
   disponible et les dates. Pleine largeur sous les nombres, donc juste
   sous la quantite qu'on vient de taper. */
.line-stock-alerte {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    flex: 1 1 100%;
    margin-top: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-left: 3px solid var(--accent-warning, #f59e0b);
    border-radius: 0 6px 6px 0;
    background: rgba(245, 158, 11, 0.09);
    font-size: 0.74rem;
    line-height: 1.35;
    color: #fde68a;
}
.line-stock-alerte > i {
    flex: 0 0 auto;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: var(--accent-warning, #f59e0b);
}
.line-stock-texte {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.line-stock-detail {
    font-size: 0.68rem;
    color: var(--text-muted, #94a3b8);
}

@media (max-width: 720px) {
    .stock-bandeau { margin: 0 0.85rem 0.7rem; }
    .line-stock-alerte { font-size: 0.72rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   CLIQUER DEUX FOIS VEUT DIRE « J'EN VEUX DEUX »
   (`pk-badge--deja` dans la fenetre, `line-vient-de-bouger` sur le devis)

   Alan : « quand je clique une deuxieme fois sur le meme materiel, ca me
   remet une deuxieme ligne. Ca devrait juste passer la quantite a 2. »

   Deux endroits, deux roles :
     - DANS LA FENETRE, avant le clic : « deja sur ce devis x 2 ». Il
       reprend `.pk-badge`, le composant qui porte deja « kit » et
       « maintenance » sur cette meme ligne — un troisieme dessin aurait
       rendu les trois moins lisibles.
     - SUR LE DEVIS, apres le clic : la ligne qui a bouge se surligne deux
       secondes. La fenetre couvre le devis au moment du clic ; sans ce
       repere, refermer laissait Alan chercher ce qui avait change.
   ══════════════════════════════════════════════════════════════════════ */

/* Cyan : sur cet ecran l'ambre porte « option » et « stock depasse », le
   rouge porte l'erreur bloquante, le vert porte « inclus ». Le cyan est
   deja celui de la pastille « la designation ne reprend plus le nom de la
   fiche » — la meme famille de sens : « regarde, ca a bouge ». */
.pk-badge--deja {
    background: rgba(34, 211, 238, 0.16);
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #67e8f9;
    white-space: nowrap;
}

.line-vient-de-bouger {
    animation: ligne-bouge 2s ease-out;
}
@keyframes ligne-bouge {
    0%   { box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.65); }
    55%  { box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.45); }
    100% { box-shadow: 0 0 0 2px rgba(34, 211, 238, 0); }
}

/* Un surlignage qui clignote n'est pas une information pour tout le monde.
   Reglage systeme respecte : la ligne reste marquee, sans animation. */
@media (prefers-reduced-motion: reduce) {
    .line-vient-de-bouger {
        animation: none;
        box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   LES CATEGORIES DANS LA FENETRE CATALOGUE           (prefixe `pk-cat`)

   Alan : « juste, il me faudrait les categories — au moins pour que je
   puisse cliquer sur une categorie et voir tous les trucs dedans. »

   UNE SEULE RANGEE, JAMAIS DEUX. A 390 px, la contrainte est qu'elle ne
   pousse pas la liste hors de l'ecran : elle ne va donc pas a la ligne, elle
   DEFILE horizontalement. Une rangee qui s'enroule sur trois lignes aurait
   mange 120 px de hauteur utile sur un ecran qui en a 640.

   `sticky` : elle vit dans le corps defilant (elle est re-rendue a chaque
   recherche, compteurs a jour) mais reste accrochee en haut.
   ══════════════════════════════════════════════════════════════════════ */

.pk-cats {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0 0.55rem;
    margin-bottom: 0.1rem;
    background: rgba(15, 23, 42, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pk-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #cbd5e1);
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.pk-cat:hover {
    border-color: rgba(139, 92, 246, 0.35);
    color: #ede9fe;
}
.pk-cat--actif {
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.18);
    color: #ede9fe;
    font-weight: 600;
}
.pk-cat-compte {
    padding: 0.05rem 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.64rem;
    color: var(--text-muted, #94a3b8);
}
.pk-cat--actif .pk-cat-compte {
    background: rgba(255, 255, 255, 0.14);
    color: #ede9fe;
}

@media (max-width: 720px) {
    /* Une seule rangee qui DEFILE : elle garde 42 px de haut au lieu d'en
       prendre 120 en s'enroulant, et la liste reste a l'ecran. */
    .pk-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding: 0.45rem 0 0.5rem;
    }
    .pk-cats::-webkit-scrollbar { display: none; }
    .pk-cat { flex: 0 0 auto; min-height: 34px; }
}

/* Envoi du logo, dans le panneau d'étiquettes : c'est en voyant son nom
   s'imprimer en toutes lettres qu'on cherche où mettre son logo. */
.mn-etq-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.mn-etq-logo-libelle { color: var(--text-muted); }
.mn-etq-logo-champ {
    max-width: 14rem;
    min-height: 44px;
    padding: 0.375rem 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
}
.mn-etq-logo-etat {
    flex: 1 1 10rem;
    color: var(--text-muted);
}