@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    /* Hauteurs fixes (utilisées pour les sticky offsets) */
    --header-height: 55px;
    --nav-tabs-height: 52px;
    --sticky-below-header: var(--header-height);
    --sticky-below-nav: calc(var(--header-height) + var(--nav-tabs-height));

    /* Palette principale (3 teintes accent + 2 utilitaires) */
    --primary: #0f172a;
    --primary-light: #1e293b;
    --primary-lighter: #334155;
    --accent: #2563eb;        /* blue-600 — action principale */
    --accent-light: #3b82f6;  /* blue-500 — hover */
    --accent-strong: #1d4ed8; /* blue-700 — pressed / texte */
    --accent-dark: #1e40af;   /* blue-800 — gradient dark start */
    --accent-soft: rgba(37, 99, 235, 0.1);  /* fond subtil */
    --accent-bg: rgba(37, 99, 235, 0.05);   /* fond très subtil */
    --accent-border: #93c5fd; /* blue-300 — bordures hover */
    
    /* Statuts sémantiques */
    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, 0.1);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.1);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.1);
    --info: #0ea5e9;
    --info-soft: rgba(14, 165, 233, 0.1);

    /* Statuts composants (status-*) — source unique, évite doublons page_finance/page_resources */
    --status-success: #16a34a;
    --status-success-dark: #15803d;
    --status-success-soft: #f0fdf4;
    --status-warning: #f59e0b;
    --status-warning-dark: #b54708;
    --status-warning-soft: #fffaeb;
    --status-danger: #ef4444;
    --status-danger-dark: #b42318;
    --status-danger-soft: #fef3f2;
    --status-info: #3b82f6;
    --status-info-dark: #175cd3;
    --status-info-soft: #eff8ff;
    
    /* Neutres */
    --bg: #f8fafc;
    --bg-subtle: #f1f5f9;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    /* Gradients sectionnels */
    --brand-indigo-start: #2563eb;
    --brand-indigo-end: #1d4ed8;
    --brand-indigo-shadow: rgba(37, 99, 235, 0.3);
    --brand-violet-start: #8b5cf6;
    --brand-violet-end: #6d28d9;
    --brand-violet-shadow: rgba(139, 92, 246, 0.3);
    /* alias rétrocompatible */
    --brand-success-start: #16a34a;
    --brand-success-end: #15803d;
    --brand-success-shadow: rgba(22, 163, 74, 0.3);
    --brand-warning-start: #f59e0b;
    --brand-warning-end: #d97706;
    --brand-warning-shadow: rgba(245, 158, 11, 0.3);
    
    /* Espacements */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Rayons */
    --radius-xs: 4px;   /* badges, tags, petits éléments */
    --radius-sm: 6px;   /* inputs, boutons sm */
    --radius-md: 10px;  /* boutons, selects */
    --radius-card: 12px; /* cards, panneaux — valeur la plus fréquente */
    --radius-lg: 16px;  /* modales, headers de page */
    --radius-xl: 24px;  /* grandes modales, overlays */
    
    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 50px -10px rgba(0,0,0,0.15);
    --component-height-md: 40px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --focus-outline: #2563eb;
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

    /* Z-index scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 90;
    --z-header: 110;
    --z-overlay: 500;
    --z-modal: 600;
    --z-toast: 700;
    --z-tooltip: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus visible global — navigation clavier accessible */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* Sur fond sombre (header, nav tabs) : anneau blanc */
header :focus-visible,
.tabs :focus-visible {
    outline-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 15px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

header {
    background: linear-gradient(120deg, #0a2342 0%, #173b63 50%, #28557f 100%);
    color: #eef5ff;
    padding: 0.65rem var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 28px rgba(6, 19, 37, 0.34);
}

/* Le badge planning prend l'espace disponible entre h1 et les actions */
header .header-planning-badge {
    margin-right: auto;
    margin-left: 0.5rem;
}

header::after {
    display: none;
}

header h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, #e8f1ff 0%, #a5c4ff 60%, #c4b0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(5, 18, 55, 0.3));
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.header-control-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.24rem 0.34rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.header-actions .form-control.form-control-sm {
    height: 34px;
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(246, 251, 255, 0.98);
    color: #10223c;
    font-weight: 600;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.header-actions .form-control.form-control-sm:focus {
    border-color: #8ec2ff;
    box-shadow: 0 0 0 3px rgba(44, 145, 255, 0.22);
}

.header-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.34);
    color: #f3f8ff;
    background: rgba(255, 255, 255, 0.08);
}

.header-actions .btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.18);
}

/* Groupe IA dans le header */
.header-ai-group {
    position: relative;
}

/* Point de statut Ollama */
.ollama-header-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: default;
    transition: background 0.3s, box-shadow 0.3s;
}
.ollama-header-dot--ok {
    background: #a78bfa;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.35);
}
.ollama-header-dot--off {
    background: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35);
}

/* Bouton refresh Ollama */
.btn-ollama-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #e8f4ff;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
    line-height: 1;
    padding: 0;
}
.btn-ollama-refresh:hover {
    background: rgba(255, 255, 255, 0.22);
}
.btn-ollama-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-ollama-refresh.spinning {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Sélecteurs dans le panneau secondaire #aiSettingsBar */
.header-ai-provider {
    min-width: 120px;
    max-width: 150px;
}

.header-ai-model {
    min-width: 150px;
    max-width: 200px;
}

.header-ai-planning {
    min-width: 180px;
    max-width: 260px;
}

/* Les media-queries sur .header-ai-model/.header-ai-provider supprimées :
   ces selects sont maintenant dans #aiSettingsBar (panneau secondaire collapsible)
   et doivent rester visibles quelle que soit la largeur. */

/* Bouton toggle IA compact dans le header */
.header-ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    height: 34px;
    padding: 0 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #e8f4ff;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.header-ai-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.38);
}

.header-ai-toggle[aria-expanded="true"] {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(96, 165, 250, 0.45);
}

.header-ai-toggle-label {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.79rem;
    opacity: 0.92;
}

.header-ai-toggle-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANNEAU FLOTTANT DE CONFIGURATION — dropdown positionné sous le bouton IA
   ═══════════════════════════════════════════════════════════════════════════ */

/* Badge planning dans le header principal */
.header-planning-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 34px;
    padding: 0 0.9rem 0 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(220, 235, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    max-width: 240px;
    overflow: hidden;
}
.header-planning-badge:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}
.header-planning-badge__icon {
    width: 15px;
    height: 15px;
    opacity: 0.7;
    flex-shrink: 0;
}
.header-planning-badge__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.header-planning-badge__caret {
    width: 13px;
    height: 13px;
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.header-planning-badge[aria-expanded="true"] .header-planning-badge__caret {
    transform: rotate(180deg);
}

/* Panneau flottant */
.ai-settings-panel {
    position: fixed;
    top: 60px;
    right: 14px;
    width: 310px;
    background: linear-gradient(180deg, #0e1f3e 0%, #0a1628 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 900;
    overflow: hidden;
    animation: panel-appear 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes panel-appear {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Petite flèche pointant vers le bouton */
.ai-settings-panel__arrow {
    position: absolute;
    top: -7px;
    right: 68px;
    width: 14px;
    height: 14px;
    background: #0e1f3e;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

/* Section */
.ai-settings-panel__section {
    padding: 1rem 1.1rem 0.9rem;
}

/* Titre de section */
.ai-settings-panel__section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(148, 185, 240, 0.65);
    margin-bottom: 0.7rem;
}
.ai-settings-panel__section-title svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Séparateur */
.ai-settings-panel__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0;
}

/* Champ */
.ai-settings-panel__field {
    margin-bottom: 0.7rem;
}
.ai-settings-panel__field:last-child {
    margin-bottom: 0;
}
.ai-settings-panel__field--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Label de champ */
.ai-settings-panel__label {
    display: block;
    font-size: 0.73rem;
    font-weight: 600;
    color: rgba(186, 210, 240, 0.6);
    margin-bottom: 0.3rem;
}

/* Select */
.ai-settings-panel__select {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 0.75rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: #e8f4ff;
    font-size: 0.84rem;
    font-weight: 500;
    appearance: auto;
    transition: border-color 0.15s, background 0.15s;
}
.ai-settings-panel__select:hover,
.ai-settings-panel__select:focus {
    border-color: rgba(99, 150, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}
.ai-settings-panel__select--compact {
    width: auto;
    min-width: 100px;
}
.ai-settings-panel__select option {
    background: #0e1f3e;
    color: #e8f4ff;
}

/* Ligne modèle + refresh */
.ai-settings-panel__row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.ai-settings-panel__row .ai-settings-panel__select {
    flex: 1;
}

/* Bouton refresh */
.ai-settings-panel__refresh {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(186, 210, 240, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ai-settings-panel__refresh svg {
    width: 15px;
    height: 15px;
}
.ai-settings-panel__refresh:hover {
    background: rgba(99, 150, 255, 0.18);
    color: #ffffff;
}

/* Onglets secondaires — masqués de la barre principale, accessibles via Menu */
.tab--secondary-nav {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIVE PLANNING BAR — header secondaire lecture seule (UX §4.1)
   ═══════════════════════════════════════════════════════════════════════════ */

.active-planning-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem var(--space-xl, 1.5rem);
    background: var(--surface-secondary, #f0f2f5);
    border-bottom: 1px solid var(--border-color, #e2e5ea);
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    user-select: none;
    min-height: 28px;
}

.active-planning-bar svg {
    flex-shrink: 0;
    opacity: 0.55;
}

.active-planning-bar__label {
    font-weight: 500;
    white-space: nowrap;
}

.active-planning-bar__value {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.tabs {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: linear-gradient(180deg, #0a1e35 0%, #0c2340 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.42rem var(--space-xl) 0.5rem;
    gap: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(5, 15, 30, 0.32);
    position: sticky;
    top: var(--sticky-below-header);
    z-index: var(--z-sticky);
}

.tabs[aria-busy="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #7cc0ff 45%, #ffffff 50%, #7cc0ff 55%, transparent 100%);
    background-size: 220% 100%;
    animation: tabBusy 1s linear infinite;
}

@keyframes tabBusy {
    from { background-position: 200% 0; }
    to { background-position: -20% 0; }
}

.tabs-main {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    /* Indicateur de dépassement : fondu sur la droite si les onglets débordent */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}

.tabs-main::-webkit-scrollbar {
    display: none;
}

.tab-secondary {
    display: none;
}

.tab-overflow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.75rem;
    margin-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    height: 38px;
}

.tab-overflow label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tab-overflow select {
    min-width: 170px;
    font-size: 0.85rem;
    height: 32px;
    border-radius: var(--radius-md);
}

.main-nav-menu {
    position: relative;
}

.main-nav-menu-toggle {
    appearance: none;
    -webkit-appearance: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(186, 210, 240, 0.82);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.main-nav-menu-toggle::-webkit-details-marker {
    display: none;
}

.main-nav-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(220, 235, 255, 0.95);
}

.main-nav-menu-toggle[aria-expanded="true"] {
    background: rgba(37, 99, 235, 0.25);
    border-color: rgba(96, 165, 250, 0.4);
    color: #ffffff;
}

.main-nav-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 0.9rem;
}

.main-nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    min-width: 270px;
    background: #ffffff;
    border: 1px solid #dbe6f7;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
    z-index: var(--z-dropdown);
    max-height: 85vh;
    overflow-y: auto;
}

.main-nav-menu-section + .main-nav-menu-section {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid #edf2fb;
}

.main-nav-menu-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0.15rem 0.35rem;
}

.main-nav-menu-item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0.35rem 0.45rem;
    cursor: pointer;
}

.main-nav-menu-item-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: #64748b;
    flex: 0 0 15px;
}

.main-nav-menu-item-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
}

.main-nav-menu-item:hover {
    background: #f4f8ff;
    border-color: #deebff;
    color: var(--text);
}

.main-nav-menu-item:hover .main-nav-menu-item-icon {
    color: #334155;
}

.main-nav-menu-form {
    margin: 0;
}

.main-nav-menu-item.danger {
    color: #b42318;
}

.main-nav-menu-item.danger:hover {
    background: #fff1f1;
    border-color: #ffd5d2;
}

.main-nav-menu-item.danger .main-nav-menu-item-icon {
    color: #b42318;
}

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.9rem;
    height: 38px;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
    color: rgba(186, 210, 240, 0.78);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    position: relative;
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    border-radius: 8px;
    letter-spacing: 0.01em;
    margin-right: 0.15rem;
}

.tab-icon-ui {
    display: inline-flex;
    width: 13px;
    height: 13px;
    margin-right: 0.38rem;
    opacity: 0.6;
    transform: translateY(-0.5px);
}

.tab-icon-ui svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
}

.tab:hover {
    color: rgba(220, 235, 255, 0.95);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.tab:hover .tab-icon-ui {
    opacity: 0.85;
}

.tab.active {
    color: #ffffff;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.3);
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset;
}

.tab.active .tab-icon-ui {
    opacity: 1;
}

.tab.active::after {
    display: none;
}

/* SherpaIA active tab identity */
.tab.active[data-tab="analyse"] {
    color: #e9d5ff;
    background: rgba(109, 40, 217, 0.35);
    border-color: rgba(167, 139, 250, 0.45);
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2) inset;
}

@keyframes tabSlide {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

main {
    padding: 1.25rem var(--space-xl) var(--space-xl);
    max-width: 1440px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease-out;
    width: 100%;
    box-sizing: border-box;
}

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

.tab-content {
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}

.tab-content.active {
    display: block;
    max-width: 100%;
    overflow-x: hidden;
    animation: contentFade 0.25s ease-out;
}

body.tab-loading .tab-content.active {
    opacity: 0.92;
    transition: opacity 0.2s ease;
}

/* Gantt et planning ont leur propre scroll horizontal */
#gantt.tab-content,
#taches.tab-content {
    overflow-x: auto;
}

#gantt .gantt-container {
    overflow: visible;
}

.tab-content.no-planning {
    position: relative;
    min-height: 260px;
}

.tab-content.no-planning > * {
    display: none !important;
}

.tab-content.no-planning .no-planning-placeholder {
    display: flex !important;
}

.no-planning-placeholder {
    display: none;
    min-height: 220px;
    border: 1px dashed var(--border, #dbe3ef);
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.45rem;
    text-align: center;
    padding: 1rem;
}

.no-planning-placeholder h3 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.no-planning-placeholder p {
    margin: 0;
    font-size: 0.86rem;
    color: #64748b;
}

@keyframes contentFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid #dbe5f1;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* ─── Page Hero — composant canonique pour tous les headers de section ───── */
/* Remplace: workspace-header, finance-header, gantt-header, risk-header,
   billing-page-header, planning-page-header, terrain-header, etc.
   Migration en cours via page_header_harmony.css (Fix 14) */
.page-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 0% 0%, rgba(37, 99, 235, 0.3) 0%, transparent 60%);
    pointer-events: none;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* Color variants */
.page-hero--blue   { background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%); }
.page-hero--indigo { background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%); }
.page-hero--slate  { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
.page-hero--teal   { background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); }

/* Sub-components */
.page-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    z-index: 1;
}

.page-hero-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.page-hero-icon svg {
    width: 22px;
    height: 22px;
    color: #fff;
}

.page-hero-title {
    z-index: 1;
}

.page-hero-title h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.page-hero-title p {
    margin: 0.3rem 0 0;
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
}

.page-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    z-index: 1;
}

/* Buttons inside page-hero use glass style */
.page-hero .btn-outline {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.page-hero .btn-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.page-hero .btn-primary {
    background: rgba(37, 99, 235, 0.55);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.page-hero .btn-primary:hover {
    background: rgba(37, 99, 235, 0.75);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .page-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 0.95rem;
    }

    .page-hero-actions {
        justify-content: flex-start;
    }
}

/* ─── card-header ──────────────────────────────────────────────────────────── */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.62rem 1.05rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
    background: var(--accent-light);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    border: 1.5px solid var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

.btn-secondary:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: var(--accent-light, #3b82f6);
}

.btn-danger {
    background: transparent;
    border: 1.5px solid #fecaca;
    color: #dc2626;
}

.btn-danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

.btn-danger-fill {
    background: var(--danger, #ef4444);
    border: none;
    color: white;
}

.btn-danger-fill:hover {
    background: #dc2626;
}

.btn-success {
    background: #16a34a;
    border: none;
    color: white;
}

.btn-success:hover {
    background: #15803d;
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--bg-subtle);
    border-color: var(--text-muted);
}

.btn-sm {
    padding: 0.42rem 0.78rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    border-radius: var(--radius-lg);
}

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

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

/* .btn-with-leading-icon is redundant: .btn already uses inline-flex + gap */
.btn-with-leading-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    min-height: var(--component-height-md);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    color: var(--text);
    background: var(--card-bg);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

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

textarea.form-control {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

select.form-control {
    cursor: pointer;
    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 12px center;
    padding-right: 36px;
    appearance: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRID SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.grid {
    display: grid;
    gap: var(--space-md);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

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

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

th, td {
    padding: 0.85rem var(--space-md);
    text-align: left;
}

th {
    background: var(--bg-subtle);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}

th:first-child {
    border-radius: var(--radius-md) 0 0 0;
}

th:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}

td {
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
    color: var(--text-secondary);
    vertical-align: middle;
}

tr {
    transition: background var(--transition-fast);
}

tbody tr:hover {
    background: var(--bg-subtle);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   STATS DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    max-width: 100%;
}

.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    min-width: 0;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

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

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

.stat-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
    font-weight: 500;
}
.stat-card.warning::before { background: var(--warning); opacity: 1; }
.stat-card.success::before { background: var(--success); opacity: 1; }
.stat-card.warning .stat-value { color: #92400e; }
.stat-card.success .stat-value { color: #047857; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--z-overlay);
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.modal-overlay.active {
    display: flex;
    animation: overlayFade 0.2s ease-out;
}

@keyframes overlayFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlide 0.25s ease-out;
}

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

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

.modal-header h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.modal-close {
    background: var(--bg-subtle);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg);
    color: var(--text);
    transform: rotate(90deg);
}

.modal-body {
    padding: var(--space-lg);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-light);
    background: var(--bg-subtle);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

body.modal-open {
    overflow: hidden;
}

button,
.btn,
.tab,
.main-nav-menu-toggle,
.main-nav-menu-item,
.modal-close,
.status-modal__close,
.user-profile-btn,
.user-dropdown-item,
.help-fab,
.ai-btn-icon,
.btn-action,
.btn-export,
.btn-toolbar-secondary,
.btn-add-resource,
.btn-add-cost,
.login-btn,
.self-serve-btn,
.sso-btn {
    min-height: 44px;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    button,
    .btn,
    .tab,
    .main-nav-menu-toggle,
    .main-nav-menu-item,
    .modal-close,
    .status-modal__close,
    .user-profile-btn,
    .user-dropdown-item,
    .help-fab,
    .ai-btn-icon,
    .btn-action,
    .btn-export,
    .btn-toolbar-secondary,
    .btn-add-resource,
    .btn-add-cost,
    .login-btn,
    .self-serve-btn,
    .sso-btn {
        min-height: 48px;
    }

    .modal-overlay,
    .status-modal {
        padding: var(--space-sm);
    }

    .modal,
    .status-modal__card {
        width: 100%;
        max-width: calc(100vw - (var(--space-sm) * 2));
        max-height: calc(100dvh - (var(--space-sm) * 2));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════════════════════ */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: var(--card-bg);
    min-width: 140px;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2394a3b8' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPLOAD ZONE
   ═══════════════════════════════════════════════════════════════════════════ */

.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-subtle);
}

.upload-zone input {
    display: none;
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    opacity: 0.8;
}

.upload-zone p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@keyframes toastSlide {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION ITEMS
   ═══════════════════════════════════════════════════════════════════════════ */

.action-item {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    border-left: 3px solid var(--border);
    transition: all var(--transition-fast);
}

.action-item:hover {
    background: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 0.55rem;
        padding: var(--space-md);
    }
    
    header h1 {
        font-size: 1.2rem;
    }
    
    .tabs {
        padding: 0.48rem var(--space-md);
    }

    .tab-overflow-menu {
        margin-left: 0.4rem;
        padding-left: 0.45rem;
    }

    .main-nav-menu-panel {
        right: -0.25rem;
        min-width: 235px;
    }

    .tab-overflow label {
        display: none;
    }

    .tab-overflow select {
        min-width: 118px;
        height: 30px;
    }
    
    .tab {
        padding: 0 0.72rem;
        height: 42px;
        font-size: 0.82rem;
    }
    
    main {
        padding: var(--space-md);
    }
    
    .filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-group select {
        width: 100%;
    }
    
    .modal {
        max-width: 100%;
        margin: var(--space-md);
        border-radius: var(--radius-lg);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card {
        padding: var(--space-md);
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
}

@media (max-width: 640px) {
    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .header-control-group {
        width: 100%;
        justify-content: flex-start;
    }
    
    .btn {
        flex: 1;
        justify-content: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR CUSTOM
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════════════════════ */

::selection {
    background: var(--accent);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES (Accessibility)
   ═══════════════════════════════════════════════════════════════════════════ */

.btn:focus-visible,
.form-control:focus-visible,
.tab:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

.modal-close:focus-visible,
.ai-btn-icon:focus-visible,
.decision-tab:focus-visible,
.help-tab:focus-visible,
.ai-side-tab:focus-visible,
.ai-suggestion:focus-visible,
.btn-action:focus-visible,
.rag-upload-zone:focus-visible,
.upload-zone:focus-visible,
.help-fab:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ==========================================================================
   TABLE ACTION BUTTONS (harmonized icons)
   ========================================================================== */
.table-actions-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 32px;
    min-width: 32px;
    padding: 0 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.table-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}

.table-action-btn .table-action-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.table-action-btn .table-action-icon svg {
    width: 100%;
    height: 100%;
}

.table-action-btn-edit {
    border-color: rgba(37, 99, 235, 0.2);
    color: var(--accent-strong);
    background: var(--accent-bg);
}

.table-action-btn-edit:hover {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.table-action-btn-delete {
    border-color: #fca5a5;
    color: #991b1b;
    background: #fef2f2;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.06);
}

.table-action-btn-delete:hover {
    border-color: #ef4444;
    background: #fee2e2;
}

.table-action-btn-save {
    border-color: #bbf7d0;
    color: #15803d;
    background: #f0fdf4;
}

.table-action-btn-save:hover {
    border-color: #86efac;
    background: #dcfce7;
}

.table-action-btn-view {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.table-action-btn-view:hover {
    border-color: #60a5fa;
    background: #dbeafe;
}

.table-action-btn-assign {
    border-color: rgba(5, 150, 105, 0.18);
    color: #047857;
    background: #f3fffa;
}

.table-action-btn-assign:hover {
    border-color: rgba(5, 150, 105, 0.3);
    background: #ecfdf5;
}

.table-action-btn.table-action-compact {
    width: 32px;
    min-width: 32px;
    padding: 0;
    justify-content: center;
}

.table-action-btn.table-action-compact .table-action-label {
    display: none;
}

.btn-with-leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-leading-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-leading-icon svg {
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   UTILITIES (progressive inline-style removal)
   ========================================================================== */
.u-hidden { display: none; }
.u-inline { display: inline; }
.u-flex-1 { flex: 1; }
.u-flex-center-gap-sm { display: flex; align-items: center; gap: 0.5rem; }
.u-flex-gap-sm { display: flex; gap: 0.5rem; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-between-gap-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.u-flex-wrap-gap-sm { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.u-flex-wrap-gap-sm-end { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.75rem; }
.u-grid-gap-sm { gap: 0.5rem; }
.u-grid-gap-sm-mt-xs { gap: 0.5rem; margin-top: 0.5rem; }
.u-col-span-2 { grid-column: span 2; }
.u-mt-075 { margin-top: 0.75rem; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-15 { margin-top: 1.5rem; }
.u-mb-1 { margin-bottom: 1rem; }
.u-mb-075 { margin-bottom: 0.75rem; }
.u-minw-220 { min-width: 220px; }
.u-minh-72 { min-height: 72px; }
.u-maxw-70 { max-width: 70px; }
.u-maxw-80 { max-width: 80px; }
.u-label-muted-sm { font-size: 0.85rem; color: var(--text-muted); }
.u-text-muted { color: var(--text-muted); }
.u-text-muted-xs { color: var(--text-muted); font-size: 0.8rem; }
.u-text-muted-sm-top0 { color: var(--text-muted); margin-top: 0; font-size: 0.85rem; }
.u-text-body-muted { color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.6; }
.u-text-accent-semibold { color: var(--accent); font-weight: 600; margin-bottom: 1.25rem; }
.u-section-title { margin-bottom: 1.1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.04rem; color: var(--text); letter-spacing: -0.01em; }
.u-heading-sm { margin: 0; font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
.u-heading-md { margin: 0 0 0.5rem 0; font-size: 1rem; }
.u-row-divider { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light); }
.u-row-header-sm { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.u-table-top { margin-top: 0.75rem; }
.u-card-soft { padding: 1rem; background: var(--bg-subtle); border: 1px dashed var(--border); }
.u-card-flat { box-shadow: none; border: 1px solid var(--border); }
.u-card-flat-warn { box-shadow: none; border: 1px solid #fde68a; }
.u-card-pad-125 { padding: 1.25rem; }
.u-list-mt-075 { margin-top: 0.75rem; }
.u-input-author { min-width: 140px; max-width: 180px; }
.u-input-flex-main { flex: 1; min-width: 200px; }
.u-btn-compact { padding: 0.5rem 1rem; }
.u-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.u-kpi-grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.xref-panel {
    margin: 0.75rem 0;
    border-top: 1px dashed var(--border);
    padding-top: 0.75rem;
    font-size: 0.88rem;
}
.contacts-quick-create {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}
.finance-hypo-subtext {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.finance-subheading {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
}
.u-flex-center-gap-xs { display: flex; align-items: center; gap: 0.4rem; }
.u-grid-2-gap-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.u-note-muted-09 { margin: 0.5rem 0; color: var(--text-muted); font-size: 0.9rem; }
.u-row-between-y-075 { display: flex; justify-content: space-between; align-items: center; margin: 0.75rem 0; }
.u-label-inline-09 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.u-scrollbox-240 {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    background: #f9fafb;
}
.u-scrollbox-160 {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    background: #f9fafb;
}
.u-muted-block-09 { margin-bottom: 0.75rem; color: var(--text-muted); font-size: 0.9rem; }
.u-btn-glass {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}
.u-toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.u-flex-main-300 { display: flex; gap: 0.5rem; align-items: center; flex: 1; min-width: 300px; }
.u-flex-grow-min250 { flex: 1; min-width: 250px; }
.u-seg {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.5rem;
    border-left: 2px solid var(--border);
}
.u-seg-end {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.5rem;
    border-left: 2px solid var(--border);
    margin-left: auto;
}
.u-minw-160 { min-width: 160px; }
.u-w-140 { width: 140px; }
.u-w-110 { width: 110px; }
.u-minw-200-dark { min-width: 200px; color: #1f2937; }
.u-text-brown-85 { color: #9a3412; font-size: 0.85rem; }
.u-mb-05 { margin-bottom: 0.5rem; }
.u-mb-025 { margin-bottom: 0.25rem; }
.u-text-accent-strong { color: var(--accent); font-weight: 600; }
.u-pill-warn { background: #fef3c7; color: #92400e; font-weight: 600; }
.u-pill-success { background: #dcfce7; color: #15803d; font-weight: 600; }
.u-pill-info { background: #e0e7ff; color: #3730a3; font-weight: 600; }
.u-pill-neutral { background: #f1f5f9; color: #64748b; }
.u-box-soft { padding: 1rem; margin-bottom: 1rem; background: #f8fafc; border: 1px solid #e5e7eb; }
.u-pad-15-mt1 { padding: 1.5rem; margin-top: 1rem; }
.u-click-strong { cursor: pointer; font-weight: 700; }
.u-pad-15 { padding: 1.5rem; }
.u-pad1-mb1 { padding: 1rem; margin-bottom: 1rem; }
.u-p-0 { padding: 0; }
.u-p-1 { padding: 1rem; }
.u-grid-auto-220-gap-sm-mb075 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.u-flex-wrap-gap1-mb075 { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.u-pad075-mt075 { padding: 0.75rem; margin-top: 0.75rem; }
.u-prewrap-log { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; max-height: 360px; overflow: auto; }
.u-text-muted-sm-mb1 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }
.u-fs-2-mb05 { font-size: 2rem; margin-bottom: 0.5rem; }
.u-text-muted-xxs { font-size: 0.75rem; color: var(--text-muted); }
.u-row-between-mb075 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.u-text-muted-xs-mb05 { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.u-flex-wrap-gap1 { display: flex; gap: 1rem; flex-wrap: wrap; }
.u-gradient-violet { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.u-mb1-text-muted { margin-bottom: 1rem; color: var(--text-muted); }
.u-heading-sm-mb075 { margin-bottom: 0.75rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.95rem; }
.u-mb-125 { margin-bottom: 1.25rem; }
.u-flex-wrap-gap075-mb075 { margin-bottom: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.u-flex-end { display: flex; align-items: flex-end; }
.u-flex-center-gap-035-m0 { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.u-mt05-text-muted-xs { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.u-maxw-900 { max-width: 900px; }
.u-text-muted-sm { color: var(--text-muted); font-size: 0.85rem; }
.u-mt025-text-muted-xxs { margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-muted); }
.u-fs14-text-secondary { font-size: 14px; color: var(--text-secondary); }
.u-fs12-text-muted { font-size: 12px; color: var(--text-muted); }
.u-w-100 { width: 100%; }
.u-maxw-500 { max-width: 500px; }
.u-scroll-200-mb1 { max-height: 200px; overflow-y: auto; margin-bottom: 1rem; }
.u-text-warning-sm { font-size: 0.85rem; color: #92400e; }
.md-h4 { color: var(--accent); margin: 1rem 0 0.5rem; line-height: 1.35; }
.md-h3 { color: var(--text); margin: 1.5rem 0 0.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; line-height: 1.3; }
.md-h2 { color: var(--text); margin: 1.5rem 0 1rem; line-height: 1.25; letter-spacing: -0.01em; }
.md-li-indent { margin-left: 1.5rem; }
.risk-dot-red { color: #ef4444; }
.risk-dot-orange { color: #f97316; }
.risk-dot-green { color: #16a34a; }
.risk-dot-yellow { color: #a16207; }

/* Popup de suggestions */
.spellcheck-popup {
    background: #ffffff;
    border: 1px solid var(--border-light, #e5e7eb);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    max-width: 420px;
    max-height: 260px;
    overflow-y: auto;
    font-size: 0.8rem;
}

.spellcheck-wrapper {
    position: relative;
}

.spellcheck-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    pointer-events: none;
    white-space: pre-wrap;
    padding: 0.375rem 0.75rem;  /* pour aligner avec .form-control */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow-wrap: break-word;
}

.spellcheck-wrapper textarea,
.spellcheck-wrapper input[type="text"] {
    background: transparent;
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   INTERFACE ANALYSE IA MODERNE - AJOUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-config-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    color: white;
    box-shadow: var(--shadow-xl);
    animation: slideInUp 0.4s ease-out;
}

.ai-config-card--flat {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
}

.ai-config-card--flat .ai-config-header {
    border-bottom: 1px solid var(--border);
}

.ai-config-card--flat .ai-config-icon {
    background: #e8eef8;
    border: 1px solid var(--border);
}

.ai-config-card--flat .ai-config-section {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    backdrop-filter: none;
}

.ai-config-card--flat .ai-btn-primary {
    background: #1d4f91;
    color: white;
}

.ai-config-card--flat .ai-btn-primary:hover {
    background: #173f74;
}

#analyse .sherpa-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.35rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    box-shadow: 0 10px 28px rgba(76, 29, 149, 0.28);
}

#analyse .sherpa-page-title {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    color: #ffffff;
}

#analyse .sherpa-page-header-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

#analyse .sherpa-page-header-icon svg {
    width: 28px;
    height: 28px;
}

#analyse .sherpa-page-title h2 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
}

#analyse .sherpa-page-title p {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    color: rgba(237, 245, 255, 0.92);
}

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

/* ── Agent Chat UI (agent_ui_runtime.js) ────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CHAT — Dark premium (SherpaIA style)
   Palette: dark navy #13151e · card #1e2235 · accent violet #6366f1
   ═══════════════════════════════════════════════════════════════════════════ */

.agent-chat {
    --chat-bg:          #13151e;
    --chat-card:        #1e2235;
    --chat-border:      rgba(255, 255, 255, 0.07);
    --chat-accent:      #6366f1;
    --chat-accent2:     #7c3aed;
    --chat-text:        #e2e8f0;
    --chat-muted:       #64748b;
    --chat-surface:     #252838;

    display: flex;
    flex-direction: column;
    border: 1px solid var(--chat-border);
    border-radius: 18px;
    background: var(--chat-bg);
    overflow: hidden;
    margin-top: 1rem;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.agent-chat__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: var(--chat-card);
    border-bottom: 1px solid var(--chat-border);
}

.agent-chat__avatar {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--chat-accent2) 0%, var(--chat-accent) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.agent-chat__title {
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.agent-chat__status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.agent-chat__status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
    animation: status-pulse 2.5s ease-in-out infinite;
}
@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
    50%       { box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); }
}

#agentStatusBadge {
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    white-space: nowrap;
}

/* ── Focus chips ─────────────────────────────────────────────────────────── */
.agent-focus-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.8rem 1rem 0.4rem;
    background: var(--chat-bg);
}

.agent-focus-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border-radius: 10px;
    padding: 0.35rem 0.75rem 0.3rem;
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
}

.agent-chip-label {
    display: block;
}

.agent-chip-cost {
    display: block;
    font-size: 0.60rem;
    font-weight: 400;
    color: #64748b;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.agent-focus-chip:hover {
    border-color: rgba(99, 102, 241, 0.4);
    color: #c4b5fd;
    background: rgba(99, 102, 241, 0.08);
}

.agent-focus-chip:hover .agent-chip-cost {
    color: rgba(196, 181, 253, 0.65);
}

.agent-focus-chip.active {
    background: linear-gradient(135deg, var(--chat-accent2) 0%, var(--chat-accent) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.agent-focus-chip.active .agent-chip-cost {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Ligne d'info coûts ──────────────────────────────────────────────────── */
.agent-cost-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 1rem 0.6rem;
    font-size: 0.70rem;
    color: #475569;
    line-height: 1.4;
    background: var(--chat-bg);
}

.agent-cost-note strong {
    color: #64748b;
}

.agent-capacity-notice {
    margin: 0 1rem 0.85rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 251, 235, 0.92));
    color: #9a3412;
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.12);
}

.agent-capacity-notice[hidden] {
    display: none !important;
}

.agent-capacity-notice--critical {
    border-color: rgba(239, 68, 68, 0.28);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.94));
    color: #991b1b;
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.14);
}

.agent-capacity-notice__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.agent-capacity-notice__message {
    margin: 0.28rem 0 0;
    font-size: 0.76rem;
    line-height: 1.55;
}

/* ── Chat log ────────────────────────────────────────────────────────────── */
.agent-chat__log {
    flex: 1;
    min-height: 300px;
    max-height: 480px;
    overflow-y: auto;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
    background: var(--chat-bg);
}
.agent-chat__log::-webkit-scrollbar { width: 4px; }
.agent-chat__log::-webkit-scrollbar-track { background: transparent; }
.agent-chat__log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.agent-msg { display: flex; flex-direction: column; max-width: 82%; }
.agent-msg--user      { align-self: flex-end; }
.agent-msg--assistant { align-self: flex-start; }
.agent-msg--system    { align-self: center; max-width: 100%; }
.agent-msg--error     { align-self: flex-start; }
.agent-msg--typing    { align-self: flex-start; }

/* Assistant row = avatar + bubble */
.agent-msg--assistant,
.agent-msg--typing {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 88%;
}

.agent-msg__avatar {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--chat-accent2, #7c3aed) 0%, var(--chat-accent, #6366f1) 100%);
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.agent-msg__avatar svg { opacity: 0.95; }

.agent-msg__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.agent-msg__bubble {
    border-radius: 18px;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    word-break: break-word;
}

.agent-msg--user .agent-msg__bubble {
    background: linear-gradient(135deg, var(--chat-accent) 0%, var(--chat-accent2) 100%);
    color: #ffffff;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.agent-msg--assistant .agent-msg__bubble {
    background: var(--chat-card, #1e2235);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--chat-text, #e2e8f0);
    border-radius: 4px 18px 18px 18px;
}

/* ══════════════════════════════════════════════════════════════════
   RENDU MARKDOWN — Typographie premium dans les bulles assistant
   ══════════════════════════════════════════════════════════════════ */

/* Reset base : retire white-space:pre qui causait le rendu monospace */
.agent-msg--assistant .agent-msg__bubble {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: normal;
}

/* ── Titres de section ──────────────────────────────────────────── */
.agent-msg__bubble .am-h1,
.agent-msg__bubble .am-h2 {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 1.15rem 0 0.5rem;
    padding-bottom: 0.38rem;
    border-bottom: 1px solid rgba(129, 140, 248, 0.22);
    position: relative;
}
.agent-msg__bubble .am-h2::before {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 2.5rem; height: 2px;
    background: linear-gradient(90deg, #818cf8, transparent);
    border-radius: 2px;
}
.agent-msg__bubble .am-h1:first-child,
.agent-msg__bubble .am-h2:first-child { margin-top: 0.15rem; }

.agent-msg__bubble .am-h3 {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.83rem;
    font-weight: 700;
    color: #a5b4fc;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0.95rem 0 0.3rem;
    line-height: 1.3;
}

/* ── Paragraphes ────────────────────────────────────────────────── */
.agent-msg__bubble .am-p {
    display: block;
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0.1rem 0;
}

/* ── Listes à puces ─────────────────────────────────────────────── */
.agent-msg__bubble .am-ul {
    list-style: none;
    padding: 0;
    margin: 0.45rem 0 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}
.agent-msg__bubble .am-ul li {
    position: relative;
    padding-left: 1.1rem;
    color: #cbd5e1;
    font-size: 0.87rem;
    line-height: 1.6;
}
.agent-msg__bubble .am-ul li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.58em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 6px rgba(129, 140, 248, 0.5);
}

/* ── Listes numérotées ──────────────────────────────────────────── */
.agent-msg__bubble .am-ol {
    list-style: none;
    padding: 0;
    margin: 0.45rem 0 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    counter-reset: am-counter;
}
.agent-msg__bubble .am-ol li {
    position: relative;
    padding-left: 2rem;
    color: #cbd5e1;
    font-size: 0.87rem;
    line-height: 1.6;
    counter-increment: am-counter;
}
.agent-msg__bubble .am-ol li::before {
    content: counter(am-counter);
    position: absolute;
    left: 0; top: 0.12em;
    width: 1.35rem; height: 1.35rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800;
    color: #818cf8;
    background: rgba(129, 140, 248, 0.12);
    border: 1px solid rgba(129, 140, 248, 0.22);
    border-radius: 5px;
}

/* ── Inline code ────────────────────────────────────────────────── */
.agent-msg__bubble .am-ic {
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.18);
    padding: 0.1em 0.38em;
    border-radius: 5px;
    font-size: 0.82em;
    color: #c4b5fd;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    white-space: nowrap;
}

/* ── Blocs de code ──────────────────────────────────────────────── */
.agent-msg__bubble .am-pre {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(129, 140, 248, 0.5);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin: 0.6rem 0;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.agent-msg__bubble .am-pre code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: #e2e8f0;
    line-height: 1.65;
    background: none;
    border: none;
    padding: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Citation blockquote ────────────────────────────────────────── */
.agent-msg__bubble .am-bq {
    border-left: 3px solid #6366f1;
    padding: 0.45rem 0.9rem;
    margin: 0.5rem 0;
    background: rgba(99, 102, 241, 0.07);
    border-radius: 0 8px 8px 0;
    color: #94a3b8;
    font-style: italic;
    font-size: 0.87rem;
    line-height: 1.6;
}

/* ── Séparateur ─────────────────────────────────────────────────── */
.agent-msg__bubble .am-hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0.75rem 0;
}

/* ── Espacement inter-blocs ─────────────────────────────────────── */
.agent-msg__bubble .am-gap { height: 0.35rem; display: block; }

/* ── Gras / Italique inline ─────────────────────────────────────── */
.agent-msg--assistant .agent-msg__bubble strong {
    color: #fbbf24;
    font-weight: 700;
}
.agent-msg--assistant .agent-msg__bubble em {
    color: #a5b4fc;
    font-style: italic;
}

.agent-msg--system .agent-msg__bubble {
    background: transparent;
    color: var(--chat-muted, #64748b);
    font-style: italic;
    font-size: 0.8rem;
    text-align: center;
}
.agent-msg--error .agent-msg__bubble {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
}

.agent-msg__meta {
    font-size: 0.7rem;
    color: var(--chat-muted, #64748b);
    margin-top: 0.25rem;
}
.agent-msg__sources {
    font-size: 0.7rem;
    color: #818cf8;
    margin-top: 0.15rem;
}

/* ── Typing animation ───────────────────────────────────────────────────── */
@keyframes agent-dot-blink {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
    40%            { opacity: 1;   transform: translateY(-4px); }
}
.agent-typing-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #818cf8;
    margin: 0 2px;
    animation: agent-dot-blink 1.2s infinite;
}
.agent-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.agent-typing-dot:nth-child(3) { animation-delay: 0.4s; }

.agent-msg__bubble--streaming {
    border-left: 3px solid rgba(99, 102, 241, 0.6);
    animation: agent-stream-pulse 1.2s ease-in-out infinite;
}
@keyframes agent-stream-pulse {
    0%, 100% { border-left-color: rgba(99, 102, 241, 0.3); }
    50%       { border-left-color: rgba(99, 102, 241, 0.9); }
}
.agent-msg__ttft {
    font-size: 0.68rem;
    color: var(--chat-muted, #64748b);
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}
.agent-msg__timing {
    font-size: 0.68rem;
    color: var(--chat-muted, #64748b);
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* ── Pending action panel ────────────────────────────────────────────────── */
#agentPendingPanel {
    display: none;
    margin: 0 1rem 0.85rem;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.08);
    padding: 0.85rem 1rem;
    font-size: 0.84rem;
    color: var(--chat-text, #e2e8f0);
}
.agent-pending__header {
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: #fbbf24;
}
.agent-pending__tool {
    font-family: monospace;
    background: rgba(255,255,255,0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
}
.agent-pending__preview {
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: monospace;
    font-size: 0.75rem;
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 0.4rem;
    white-space: pre;
    color: #cbd5e1;
}
.agent-pending__info {
    color: var(--chat-muted, #64748b);
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}
.agent-pending__actions { display: flex; gap: 0.5rem; }

/* ── Input row ───────────────────────────────────────────────────────────── */
.agent-chat__input {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--chat-border);
    background: var(--chat-card);
}

#agentChatInput {
    flex: 1;
    resize: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    min-height: 48px;
    max-height: 140px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    background: var(--chat-surface);
    color: var(--chat-text);
}
#agentChatInput::placeholder { color: #4a5568; }
#agentChatInput:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#agentSendBtn {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 14px;
    border: none;
    background: var(--chat-accent);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}
#agentSendBtn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.55);
}
#agentSendBtn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

#agentResetBtn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background .15s;
}
#agentResetBtn:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }

.agent-chat__hint {
    font-size: 0.72rem;
    color: var(--chat-muted, #64748b);
    padding: 0 1rem 0.4rem;
    background: var(--chat-bg);
}

/* ── Suggestions rapides ─────────────────────────────────────────────────── */
.agent-suggestion-panel { background: var(--chat-bg); }
.agent-suggestion-panel__title {
    font-size: 0.72rem;
    color: var(--chat-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 1rem 0.3rem;
}
.agent-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.1rem 1rem 0.85rem;
}
.agent-suggestion {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.79rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.agent-suggestion:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #c4b5fd;
}

/* ── Mission strip ───────────────────────────────────────────────────────── */
.agent-chat__mission-strip {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--chat-border);
    background: var(--chat-card);
}
.agent-chat__mission-card {
    flex: 1;
    padding: 0.7rem 1rem;
    border-right: 1px solid var(--chat-border);
    font-size: 0.78rem;
}
.agent-chat__mission-card:last-child { border-right: none; }
.agent-chat__mission-label {
    display: block;
    font-size: 0.68rem;
    color: var(--chat-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.agent-chat__mission-card strong { color: #e2e8f0; font-size: 0.82rem; }
.agent-chat__mission-card p { color: #64748b; margin: 0.15rem 0 0; font-size: 0.75rem; line-height: 1.4; }

@media (max-width: 600px) {
    .agent-chat__log  { min-height: 180px; max-height: 320px; }
    .agent-msg        { max-width: 96%; }
    .agent-suggestions { flex-direction: column; }
    .agent-chat__mission-strip { flex-direction: column; }
    .sherpa-planning-bar,
    .sherpa-planning-bar-actions,
    .sherpa-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .sherpa-hero-grid,
    .sherpa-decision-layout {
        grid-template-columns: 1fr;
    }
    .sherpa-panel,
    .sherpa-hero-card,
    .sherpa-focus-card,
    .sherpa-agent-card {
        padding: 0.95rem;
    }
    .sherpa-agent-grid {
        grid-template-columns: 1fr;
    }
}

/* ── SherpaIA — cockpit décisionnel ───────────────────────────────────────── */
.sherpa-workspace {
    margin-bottom: 1.25rem;
}

.sherpa-readiness-panel {
    margin-bottom: 1rem;
    padding: 1.15rem 1.2rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.sherpa-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.8rem;
}

.sherpa-readiness-card {
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.9rem 0.95rem;
}

.sherpa-readiness-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.sherpa-readiness-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sherpa-readiness-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sherpa-readiness-badge--ok {
    background: #ede9fe;
    color: #4c1d95;
}

.sherpa-readiness-badge--estimated {
    background: #e0f2fe;
    color: #075985;
}

.sherpa-readiness-badge--missing {
    background: #fef3c7;
    color: #92400e;
}

.sherpa-readiness-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.sherpa-readiness-meta {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #64748b;
}

.sherpa-planning-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(15, 122, 83, 0.08) 0%, rgba(28, 87, 163, 0.08) 100%);
    border: 1px solid rgba(109, 40, 217, 0.12);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.sherpa-planning-bar-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sherpa-planning-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sherpa-planning-bar-label {
    color: var(--text-muted, #6b7280);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.sherpa-planning-bar-name {
    font-size: 1rem;
    color: var(--text-primary, #1a202c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sherpa-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(109, 40, 217, 0.12);
    color: #4c1d95;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.sherpa-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.sherpa-hero-card,
.sherpa-panel,
.sherpa-focus-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.sherpa-hero-card {
    padding: 1.3rem 1.35rem;
}

.sherpa-hero-card--primary {
    background: linear-gradient(135deg, #6d28d9 0%, #1d4f91 100%);
    color: #ffffff;
    border: none;
}

.sherpa-hero-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.82;
    margin-bottom: 0.5rem;
}

.sherpa-hero-card h3 {
    margin: 0 0 0.55rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 800;
}

.sherpa-hero-card p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.94rem;
    color: inherit;
}

.sherpa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.sherpa-hero-card--primary .btn-outline {
    border-color: rgba(255, 255, 255, 0.48);
    color: #ffffff;
    background: transparent;
}

.sherpa-hero-card--primary .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sherpa-focus-panel {
    display: grid;
    gap: 0.8rem;
}

.sherpa-focus-card {
    padding: 1rem 1.05rem;
    position: relative;
    overflow: hidden;
}

.sherpa-focus-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 122, 83, 0.08), transparent 68%);
}

.sherpa-focus-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.sherpa-focus-card strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 0.3rem;
}

.sherpa-focus-card p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: 0.82rem;
    line-height: 1.5;
}

.sherpa-decision-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.sherpa-panel {
    padding: 1.15rem 1.2rem;
}

.sherpa-panel--agents {
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    padding: 1.3rem;
    border: 1px solid rgba(191, 219, 254, 0.9);
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 24%),
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.06);
}

.sherpa-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.95rem;
}

.sherpa-panel-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.sherpa-panel-header p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}

.sherpa-priority-list {
    display: grid;
    gap: 0.75rem;
}

.sherpa-priority-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    padding: 0.9rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sherpa-priority-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.sherpa-priority-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    background: #e2e8f0;
    color: #334155;
}

.sherpa-priority-item strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 0.18rem;
}

.sherpa-priority-item p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #64748b;
}

.sherpa-priority-item[data-tone="critical"] {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 242, 242, 0.9);
}

.sherpa-priority-item[data-tone="critical"] .sherpa-priority-rank {
    background: #fee2e2;
    color: #b91c1c;
}

.sherpa-priority-item[data-tone="warning"] {
    border-color: rgba(217, 119, 6, 0.16);
    background: rgba(255, 247, 237, 0.92);
}

.sherpa-priority-item[data-tone="warning"] .sherpa-priority-rank {
    background: #ffedd5;
    color: #c2410c;
}

.sherpa-priority-item[data-tone="info"] .sherpa-priority-rank {
    background: #dbeafe;
    color: #1d4ed8;
}

.sherpa-workflow-list {
    display: grid;
    gap: 0.7rem;
}

.sherpa-workflow-item {
    width: 100%;
    text-align: left;
    border: 1px solid #dbe3ef;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.sherpa-workflow-item:hover {
    transform: translateY(-1px);
    border-color: rgba(29, 79, 145, 0.25);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.sherpa-workflow-item strong,
.sherpa-agent-card strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.sherpa-workflow-item span,
.sherpa-agent-card p {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #64748b;
}

.sherpa-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.sherpa-agent-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.95rem;
    padding: 1.2rem;
    border-radius: 22px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    min-height: 308px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sherpa-agent-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(124, 58, 237, 0.9));
    opacity: 0.95;
}

.sherpa-agent-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(191, 219, 254, 0.28), transparent 68%);
    pointer-events: none;
}

.sherpa-agent-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.10);
}

.sherpa-agent-card--live::before {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
}

.sherpa-agent-card--guided::before {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.sherpa-agent-card--planned::before {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.sherpa-agent-top,
.sherpa-agent-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    position: relative;
    z-index: 1;
}

.sherpa-agent-headline {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 0.95rem;
    min-width: 0;
}

.sherpa-agent-main {
    min-width: 0;
    display: grid;
    gap: 0.52rem;
}

.sherpa-agent-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.sherpa-agent-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
    max-width: 100%;
}

.sherpa-agent-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a6b 0%, #2563eb 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}
.sherpa-agent-icon svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
/* Couleurs par agent */
.sherpa-agent-icon--pilote    { background: linear-gradient(135deg, #1e3a6b, #2563eb); box-shadow: 0 2px 8px rgba(37,99,235,0.3); }
.sherpa-agent-icon--planning  { background: linear-gradient(135deg, #1d4ed8, #3b82f6); box-shadow: 0 2px 8px rgba(59,130,246,0.3); }
.sherpa-agent-icon--opc       { background: linear-gradient(135deg, #5b21b6, #7c3aed); box-shadow: 0 2px 8px rgba(124,58,237,0.3); }
.sherpa-agent-icon--risques   { background: linear-gradient(135deg, #b45309, #d97706); box-shadow: 0 2px 8px rgba(217,119,6,0.35); }
.sherpa-agent-icon--copil     { background: linear-gradient(135deg, #312e81, #4338ca); box-shadow: 0 2px 8px rgba(67,56,202,0.3); }
.sherpa-agent-icon--ressources{ background: linear-gradient(135deg, #0f766e, #14b8a6); box-shadow: 0 2px 8px rgba(20,184,166,0.3); }
.sherpa-agent-icon--finance   { background: linear-gradient(135deg, #15803d, #16a34a); box-shadow: 0 2px 8px rgba(22,163,74,0.3); }
.sherpa-agent-icon--contract  { background: linear-gradient(135deg, #7c2d12, #ea580c); box-shadow: 0 2px 8px rgba(234,88,12,0.3); }
.sherpa-agent-icon--coordination { background: linear-gradient(135deg, #075985, #0284c7); box-shadow: 0 2px 8px rgba(2,132,199,0.3); }
.sherpa-agent-icon--doc       { background: linear-gradient(135deg, #334155, #64748b); box-shadow: 0 2px 8px rgba(100,116,139,0.28); }
.sherpa-agent-icon--forecast  { background: linear-gradient(135deg, #7e22ce, #a855f7); box-shadow: 0 2px 8px rgba(168,85,247,0.3); }
.sherpa-agent-icon--mc        { background: linear-gradient(135deg, #4c1d95, #7c3aed); box-shadow: 0 2px 8px rgba(124,58,237,0.3); }

.sherpa-agent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.82rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    max-width: 100%;
}

.sherpa-agent-badge--live {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
    color: #4c1d95;
}

.sherpa-agent-badge--guided {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
}

.sherpa-agent-badge--planned {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
}

.sherpa-agent-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    margin-top: auto;
    position: relative;
    z-index: 1;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.sherpa-agent-actions .btn {
    flex: 0 0 auto;
    min-width: 152px;
    border-radius: 14px;
    padding-inline: 1rem;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.sherpa-agent-title {
    margin: 0;
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.12rem, 1.02rem + 0.34vw, 1.38rem);
    line-height: 1.12;
    color: #0f172a;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.sherpa-agent-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: 0;
    font-size: 0.92rem;
    line-height: 1.58;
    color: #64748b;
    position: relative;
    z-index: 1;
}

.sherpa-agent-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    align-content: flex-start;
}

.sherpa-agent-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.72rem;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.sherpa-agent-feature::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    flex: 0 0 auto;
}

.sherpa-agent-route {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.sherpa-agent-route__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.sherpa-agent-route__value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .sherpa-agent-grid {
        grid-template-columns: 1fr;
    }

    .sherpa-agent-headline {
        grid-template-columns: 1fr;
    }

    .sherpa-agent-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .sherpa-agent-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .sherpa-agent-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

.sherpa-mc-agent-card {
    grid-column: 1 / -1;
    min-height: unset;
    margin-bottom: 1rem;
}

.sherpa-mc-agent-header {
    margin-bottom: 1rem;
}

.sherpa-mc-agent-headline {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.sherpa-mc-agent-icon {
    flex-shrink: 0;
    font-size: 0.98rem;
    font-weight: 800;
}

.sherpa-mc-agent-meta {
    flex: 1;
    min-width: 0;
}

.sherpa-mc-agent-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.sherpa-mc-agent-desc {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
}

.sherpa-mc-sim-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.sherpa-mc-sim-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.sherpa-mc-sim-status--none {
    background: #f3f4f6;
    color: #9ca3af;
}

.sherpa-mc-sim-status--none .sherpa-mc-sim-dot {
    background: #d1d5db;
}

.sherpa-mc-sim-status--ready {
    background: #ede9fe;
    color: #4c1d95;
}

.sherpa-mc-sim-status--ready .sherpa-mc-sim-dot {
    background: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.sherpa-mc-agent-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sherpa-mc-snapshot {
    background: linear-gradient(180deg, #fcfcff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
}

.sherpa-mc-snapshot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sherpa-mc-kpi {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    min-width: 100px;
    text-align: center;
}

.sherpa-mc-kpi-label {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sherpa-mc-kpi-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1d4ed8;
    margin: 0.1rem 0;
}

.sherpa-mc-kpi-sub {
    font-size: 0.7rem;
    color: #9ca3af;
}

.sherpa-mc-agent-actions {
    align-items: center;
}

.sherpa-mc-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.sherpa-mc-analyze-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.sherpa-mc-analyze-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sherpa-mc-analyze-btn.mc-ai-btn-busy {
    opacity: 0.65;
    cursor: wait;
}

.sherpa-mc-btn-icon {
    font-size: 1rem;
}


.sherpa-dashboard-error {
    background: #fef3cd;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #92400e;
}

.ai-config-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.ai-config-icon {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #1d4f91;
}

.ai-config-header h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.ai-config-header h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.06rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.ai-config-header p {
    margin: 0.25rem 0 0 0;
    opacity: 1;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.ai-quickstart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    margin-bottom: var(--space-lg);
}

.ai-quickstart-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.ai-quickstart-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ai-readiness {
    margin-bottom: var(--space-lg);
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
}

.ai-readiness.ready {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #4c1d95;
}

.ai-readiness.warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

#analyse.tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#analyse {
    --sherpa-purple-900: #4c1d95;
    --sherpa-purple-800: #5b21b6;
    --sherpa-purple-700: #6d28d9;
    --sherpa-purple-600: #7c3aed;
    --sherpa-purple-200: #c4b5fd;
    --sherpa-purple-100: #ede9fe;
    --sherpa-purple-050: #f5f3ff;
}

.ai-zone-heading {
    margin: 0.3rem 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
}

.ai-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.ai-chat-config-grid {
    margin-bottom: 0.55rem;
}

.ai-config-section {
    background: #f8fafc;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.ai-config-section h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 var(--space-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ai-form-group {
    margin-bottom: var(--space-md);
}

.ai-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    opacity: 1;
    color: #334155;
}

.ai-select, .ai-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
    outline: none;
}

.ai-select:focus, .ai-input:focus {
    background: white;
    border-color: #1d4f91;
    box-shadow: 0 0 0 3px rgba(29, 79, 145, 0.15);
}

.ai-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: #eef2f7;
    border: 1px solid #dbe3ee;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    margin-top: var(--space-md);
}

.ai-status.success {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(22, 163, 74, 0.3);
}

.ai-status.warning {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.ai-status.error {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.ai-data-risk-notice {
    margin-top: var(--space-sm);
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: var(--radius-md);
    padding: 0.58rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.ai-data-risk-notice strong {
    font-size: 0.78rem;
    color: #92400e;
}

.ai-data-risk-notice span {
    font-size: 0.8rem;
    color: #78350f;
    line-height: 1.35;
}

.ai-config-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-lg);
}

.ai-config-note {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
}

.ai-inline-form {
    display: inline;
    margin: 0;
}

.ai-config-section-spaced {
    margin-top: var(--space-md);
}

.ai-rag-collapse {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.ai-rag-collapse-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    font-weight: 700;
    color: #334155;
}

.ai-rag-collapse-summary::-webkit-details-marker {
    display: none;
}

.ai-rag-collapse-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.ai-rag-collapse-body {
    padding: 0 0.85rem 0.85rem;
    border-top: 1px solid var(--border);
}

.ai-rag-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.rag-upload-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.rag-upload-formats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ai-rag-status {
    margin-top: var(--space-md);
}

.ai-rag-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ai-rag-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.ai-rag-advanced {
    position: relative;
}

.ai-rag-advanced > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.55rem;
    background: var(--bg-subtle);
}

.ai-rag-advanced > summary::-webkit-details-marker {
    display: none;
}

.ai-rag-advanced-actions {
    position: absolute;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
    margin-top: 0.35rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    box-shadow: var(--shadow-md);
}

.ai-rag-queue {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.ai-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.9rem 2rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
}

.ai-btn-primary {
    background: white;
    color: #667eea;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ai-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.ai-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ai-chat-interface {
    display: flex;
    flex-direction: column;
    width: min(100%, 930px);
    height: min(78vh, 790px);
    min-height: 620px;
    max-height: 820px;
    margin: 0.25rem auto 0;
    background:
        linear-gradient(to right, rgba(92, 111, 156, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(92, 111, 156, 0.1) 1px, transparent 1px),
        radial-gradient(1200px 520px at 20% -15%, rgba(84, 96, 170, 0.26), transparent 60%),
        linear-gradient(180deg, #151d30 0%, #121a2c 100%);
    background-size: 48px 48px, 48px 48px, auto, auto;
    border-radius: 26px;
    border: 1px solid rgba(132, 149, 200, 0.22);
    box-shadow: 0 22px 60px rgba(4, 9, 20, 0.42);
    overflow: hidden;
    animation: fadeInScale 0.3s ease-out;
}

.ai-chat-interface.u-hidden {
    display: none !important;
}

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

.ai-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.95rem 1.25rem;
    background: linear-gradient(180deg, rgba(51, 63, 94, 0.78), rgba(42, 52, 80, 0.7));
    color: #f5f7ff;
    border-bottom: 1px solid rgba(144, 161, 206, 0.2);
    backdrop-filter: blur(5px);
}

.ai-chat-workflow {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.85rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.ai-chat-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ai-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(150deg, #5564fb 0%, #7a53f2 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.22rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px rgba(88, 87, 232, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ai-chat-header .ai-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.22rem;
    border-radius: 14px;
}

.ai-message .ai-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    border-radius: 10px;
}

.ai-avatar-large {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1f3b63 0%, #2b5a93 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.ai-chat-info h3 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ai-chat-info p {
    margin: 0.18rem 0 0 0;
    font-size: 0.83rem;
    color: #76d37f;
    opacity: 1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ai-online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6ce077;
    margin-right: 0.35rem;
    box-shadow: 0 0 0 3px rgba(108, 224, 119, 0.2);
}

.ai-chat-meta {
    margin: 0.18rem 0 0 0;
    font-size: 0.7rem;
    color: rgba(228, 234, 255, 0.52);
}

.ai-chat-actions {
    display: none;
}

.ai-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.2rem 1.35rem 1.1rem;
    background: transparent;
}

.ai-message {
    display: flex;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
    align-items: flex-start;
}

.ai-message.user {
    justify-content: flex-end;
}

.ai-message-content {
    max-width: min(840px, 82%);
    border: 1px solid rgba(156, 170, 205, 0.2);
    border-radius: 18px;
    background: rgba(47, 58, 84, 0.76);
    box-shadow: 0 8px 24px rgba(3, 8, 20, 0.3);
    padding: 0.78rem 0.9rem;
}

.ai-message.user .ai-message-content {
    background: linear-gradient(90deg, #5b45f2 0%, #5f6cff 100%);
    border-color: rgba(130, 139, 255, 0.55);
    color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(57, 52, 171, 0.42);
}

.ai-message.user .ai-avatar {
    display: none;
}

.ai-message-text {
    font-size: 0.99rem;
    line-height: 1.55;
    color: #edf1ff;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-message.user .ai-message-text {
    color: #ffffff;
    font-weight: 600;
}

.ai-message-time {
    margin-top: 0.44rem;
    font-size: 0.68rem;
    color: rgba(174, 187, 226, 0.72);
}

.ai-message.user .ai-message-time {
    color: rgba(255, 255, 255, 0.78);
}

.ai-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.ai-typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: typing 1.2s infinite ease-in-out;
}

.ai-typing-indicator span:nth-child(2) {
    animation-delay: 0.16s;
}

.ai-typing-indicator span:nth-child(3) {
    animation-delay: 0.32s;
}

.ai-sources {
    margin-top: 0.55rem;
    border-top: 1px dashed rgba(157, 173, 214, 0.28);
    padding-top: 0.45rem;
}

.ai-sources-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.ai-sources-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #d4defd;
}

.ai-sources-toggle {
    border: 1px solid rgba(140, 156, 201, 0.48);
    background: rgba(57, 68, 100, 0.62);
    border-radius: 999px;
    font-size: 0.72rem;
    color: #d5def8;
    padding: 0.16rem 0.52rem;
    cursor: pointer;
}

.ai-sources-list {
    margin: 0.34rem 0 0;
    padding-left: 1rem;
}

.ai-sources-list.is-hidden {
    display: none;
}

.ai-sources-item {
    font-size: 0.78rem;
    color: #b5c2e6;
    margin-bottom: 0.2rem;
}

.ai-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all var(--transition-fast);
    backdrop-filter: blur(10px);
}

.ai-btn-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

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

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-8px); }
}

.ai-welcome-message {
    text-align: center;
    padding: 1.3rem 0.4rem;
    max-width: 760px;
    margin: 0 auto;
}

.ai-welcome-message h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    color: #f3f6ff;
}

.ai-welcome-message p {
    color: #a7b5dc;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.ai-suggested-questions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.ai-suggestion {
    padding: 0.72rem 0.85rem;
    background: rgba(42, 52, 78, 0.75);
    border: 1px solid rgba(126, 142, 188, 0.26);
    border-radius: 14px;
    color: #dfe6ff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.ai-suggestion:hover {
    background: rgba(60, 74, 110, 0.82);
    border-color: rgba(156, 170, 224, 0.45);
    transform: translateX(2px);
}

.ai-decision-buckets {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.6rem;
}

.ai-decision-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #f8fafc;
    padding: 0.6rem 0.7rem;
}

.ai-decision-card.high {
    border-left: 4px solid #dc2626;
}

.ai-decision-card.mid {
    border-left: 4px solid #d97706;
}

.ai-decision-card.low {
    border-left: 4px solid var(--accent);
}

.ai-decision-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.45rem;
}

.ai-decision-bulk {
    flex-shrink: 0;
}

.ai-decision-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ai-decision-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}

.ai-decision-text {
    font-size: 0.86rem;
    color: #1f2937;
    line-height: 1.35;
}

.ai-decision-action {
    flex-shrink: 0;
}

.ai-decision-memory-help {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary, #6b7280);
}

.ai-decision-memory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ai-decision-memory-toggle {
    border: 1px solid rgba(37, 99, 235, 0.16);
    background: rgba(37, 99, 235, 0.06);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-decision-memory-toggle:hover {
    background: rgba(37, 99, 235, 0.11);
    border-color: rgba(37, 99, 235, 0.26);
}

.ai-decision-memory-detail {
    margin-top: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.82);
    border: 1px solid rgba(203, 213, 225, 0.8);
    color: var(--text-secondary, #475569);
    font-size: 0.78rem;
    line-height: 1.5;
}

.ai-decision-memory-detail p {
    margin: 0;
}

.ai-decision-memory-detail p + p {
    margin-top: 0.45rem;
}

.ai-decision-memory-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-top: 0.7rem;
    margin-bottom: 0.65rem;
}

.ai-decision-memory-group {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ai-decision-memory-group__label {
    min-width: 92px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    padding-top: 0.12rem;
}

.ai-decision-memory-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ai-decision-memory-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.76rem;
    line-height: 1.3;
}

.ai-decision-memory-subtitle {
    margin-top: 0.55rem;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
}

.ai-chat-input-container {
    padding: 0.95rem 1.2rem 1rem;
    background: rgba(24, 32, 53, 0.9);
    border-top: 1px solid rgba(129, 147, 195, 0.2);
}

.ai-chat-input-wrapper {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    background: rgba(57, 67, 94, 0.66);
    border: 1px solid rgba(130, 145, 186, 0.36);
    border-radius: 12px;
    padding: 0.5rem 0.56rem;
    transition: all var(--transition-fast);
}

.ai-chat-input-wrapper:focus-within {
    border-color: rgba(143, 156, 230, 0.7);
    background: rgba(67, 79, 110, 0.82);
    box-shadow: 0 0 0 3px rgba(104, 117, 181, 0.25);
}

.ai-chat-input {
    flex: 1;
    padding: 0.58rem 0.7rem;
    border: none;
    background: transparent;
    resize: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.96rem;
    line-height: 1.5;
    color: #e8eeff;
    outline: none;
    max-height: 200px;
}

.ai-chat-input::placeholder {
    color: rgba(183, 196, 232, 0.58);
}

.ai-send-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    background: linear-gradient(160deg, #6f74ff, #5a60f0);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.ai-send-btn:hover:not(:disabled) {
    background: linear-gradient(160deg, #7f85ff, #656bf7);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(74, 83, 218, 0.46);
}

.ai-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-input-hint {
    display: none;
}

.ai-welcome-inline .ai-message-content {
    max-width: min(860px, 86%);
}

/* SherpaIA layout professionnel et epure */
#analyse #aiConfig {
    background: #ffffff;
    border: 1px solid #cce9d7;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 81, 50, 0.09);
    padding: 1rem 1.1rem 1.1rem;
}

#analyse #aiConfig .ai-config-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #e2e8f0;
}

#analyse #aiConfig .ai-zone-heading {
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    color: var(--sherpa-purple-900);
}

#analyse #aiConfig .ai-config-grid {
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

#analyse #aiConfig .ai-config-section {
    background: var(--sherpa-purple-050);
    border: 1px solid #d7eddf;
    border-radius: 12px;
    padding: 0.85rem;
}

#analyse #aiConfig .ai-config-actions {
    padding-top: 0.6rem;
}

#analyse #aiConfig .ai-config-note {
    margin-top: 0.35rem;
}

#analyse .rag-upload-zone {
    border: 2px dashed #9dd3b5;
    border-radius: 10px;
    background: #fbfffc;
    padding: 1.25rem;
}

#analyse .rag-upload-zone:hover {
    border-color: var(--sherpa-purple-700);
    background: var(--sherpa-purple-050);
}

#analyse .rag-status {
    background: var(--sherpa-purple-050);
    border: 1px solid #d7eddf;
}

#analyse .ai-chat-interface {
    width: 100%;
    max-width: 100%;
    min-height: 760px;
    height: min(84vh, 980px);
    margin: 0;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #cce9d7;
    box-shadow: 0 10px 24px rgba(15, 81, 50, 0.08);
}

#analyse .ai-chat-header {
    padding: 0.8rem 0.95rem;
    background: linear-gradient(135deg, var(--sherpa-purple-900) 0%, var(--sherpa-purple-700) 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

#analyse .ai-chat-actions {
    display: flex;
    gap: 0.4rem;
}

#analyse .ai-chat-info p {
    font-size: 0.8rem;
    color: #cbf4d8;
}

#analyse .ai-chat-meta {
    color: rgba(236, 255, 242, 0.88);
    font-size: 0.72rem;
}

#analyse .ai-chat-messages {
    padding: 0.75rem 0.8rem;
    max-height: none;
    min-height: 600px;
    background: #f6fcf8;
}

#analyse .ai-message-content {
    max-width: min(840px, 82%);
    border: 1px solid #d3e8dc;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 81, 50, 0.07);
    padding: 0.6rem 0.68rem;
}

#analyse .ai-message .ai-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.94rem;
    border-radius: 50%;
    background: rgba(25, 135, 84, 0.14);
    border: 2px solid rgba(25, 135, 84, 0.24);
    box-shadow: none;
}

#analyse .ai-chat-header .ai-avatar {
    width: 38px;
    height: 38px;
    font-size: 1.02rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#analyse .ai-message.user .ai-avatar {
    display: none;
}

#analyse .ai-message.user .ai-message-content {
    background: var(--sherpa-purple-700);
    border-color: var(--sherpa-purple-700);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(25, 135, 84, 0.26);
}

#analyse .ai-message-text {
    font-size: 0.9rem;
    color: inherit;
}

#analyse .ai-message-time {
    color: #64748b;
}

#analyse .ai-message.user .ai-message-time {
    color: rgba(255, 255, 255, 0.82);
}

#analyse .ai-sources {
    border-top: 1px dashed #c8e6d5;
}

#analyse .ai-sources-title {
    color: var(--sherpa-purple-900);
}

#analyse .ai-sources-toggle {
    border: 1px solid #c8e6d5;
    background: var(--sherpa-purple-050);
    color: var(--sherpa-purple-900);
}

#analyse .ai-sources-item {
    color: #365a47;
}

#analyse .ai-suggestion {
    background: #ffffff;
    color: #17442d;
    border: 1px solid #d3e8dc;
}

#analyse .ai-suggestion:hover {
    background: var(--sherpa-purple-050);
    border-color: #9dd3b5;
}

#analyse .ai-chat-input-container {
    padding: 0.78rem 0.95rem;
    background: #ffffff;
    border-top: 1px solid #d3e8dc;
}

#analyse .ai-chat-input-wrapper {
    background: #f7fcf9;
    border: 1px solid #c8e6d5;
    border-radius: 10px;
    padding: 0.38rem 0.46rem;
}

#analyse .ai-chat-input-wrapper:focus-within {
    border-color: var(--sherpa-purple-700);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.14);
}

#analyse .ai-chat-input {
    color: var(--text);
    font-size: 0.92rem;
}

#analyse .ai-chat-input::placeholder {
    color: var(--text-muted);
}

#analyse .ai-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--sherpa-purple-700), var(--sherpa-purple-600));
}

#analyse .ai-send-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, var(--sherpa-purple-800), var(--sherpa-purple-700));
    box-shadow: 0 4px 10px rgba(25, 135, 84, 0.3);
}

#analyse .ai-btn-primary {
    background: linear-gradient(145deg, var(--sherpa-purple-800), var(--sherpa-purple-700));
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(20, 108, 67, 0.25);
}

#analyse .ai-btn-primary:hover {
    background: linear-gradient(145deg, var(--sherpa-purple-900), var(--sherpa-purple-800));
    box-shadow: 0 8px 20px rgba(15, 81, 50, 0.3);
}

#analyse .ai-btn-icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(220, 255, 232, 0.4);
    color: #ffffff;
}

#analyse .ai-btn-icon:hover {
    background: rgba(255, 255, 255, 0.28);
}

.value-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.value-kpi-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #f8fafc;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.value-kpi-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--accent-border);
}

.value-kpi-item:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.value-kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.value-kpi-item strong {
    font-size: 1.15rem;
    color: #1f2937;
}

.ai-input-hint kbd {
    padding: 0.15rem 0.4rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.7rem;
}

@media (max-width: 768px) {
    .ai-config-card { padding: var(--space-lg); }
    .ai-config-grid { grid-template-columns: 1fr; }
    .ai-quickstart {
        flex-direction: column;
        align-items: flex-start;
    }
    .ai-chat-interface {
        width: 100%;
        height: calc(100vh - 96px);
        min-height: 0;
        max-height: none;
        border-radius: 18px;
    }
    .ai-chat-messages {
        padding: 0.7rem 0.65rem 0.8rem;
    }
    .ai-message-content {
        max-width: 90%;
    }
    .ai-chat-input-container { padding: var(--space-md); }
    .ai-welcome-message { padding: var(--space-lg); }
    #analyse .sherpa-page-header {
        padding: 0.9rem;
    }
    #analyse .sherpa-page-title {
        align-items: flex-start;
    }
    #analyse .sherpa-page-title h2 {
        font-size: 1.05rem;
    }
    #analyse .sherpa-page-title p {
        font-size: 0.8rem;
    }
    #analyse .sherpa-page-header {
        align-items: flex-start;
    }
    .sherpa-hero-card h3 {
        font-size: 1.15rem;
    }
    .sherpa-focus-card strong {
        font-size: 1.25rem;
    }
    #analyse .ai-chat-interface {
        min-height: 480px;
        height: auto;
    }
    #analyse .ai-chat-messages {
        min-height: 260px;
        max-height: 52vh;
    }
}

/* Affichage pro du rapport ASCII (cadres alignés) */
.ai-pre {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0b1220;
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre;   /* IMPORTANT: garde l’alignement */
  overflow: auto;     /* scroll horizontal si besoin */
  max-width: 100%;
}



/* --- App status banner --- */
.app-status-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-toast);
    background: #fff3cd;
    color: #7a5a00;
    border-bottom: 1px solid #f2d68b;
    padding: 8px 16px;
    font-size: 14px;
}

.app-status-banner.is-warning {
    background: #fff7d6;
    color: #8a5a00;
    border-bottom-color: #f4df98;
}

.app-status-banner.is-danger {
    background: #fef2f2;
    color: #991b1b;
    border-bottom-color: #fecaca;
}

.app-status-banner.hidden {
    display: none;
}

.app-status-banner[role="button"] {
    cursor: pointer;
}

.status-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.status-modal.hidden {
    display: none;
}

.status-modal__card {
    width: 320px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.status-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 13px;
}

.status-modal__close {
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
}

.status-modal__body {
    padding: 10px 12px;
    font-size: 12px;
}

.confirm-modal__card {
    width: min(420px, calc(100vw - 32px));
}

.confirm-modal__body {
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.prompt-modal__card {
    width: min(460px, calc(100vw - 32px));
}

.prompt-modal__body {
    display: grid;
    gap: 0.75rem;
}

.prompt-modal__message {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.prompt-modal__input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.72rem 0.85rem;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
}

.prompt-modal__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 12px 12px;
}

@media (max-width: 640px) {
    .confirm-modal__actions {
        flex-direction: column-reverse;
    }

    .confirm-modal__actions .btn {
        width: 100%;
    }
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eef2f7;
}

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

.status-row__value {
    font-weight: 700;
}

.status-row__value.ok {
    color: #15803d;
}

.status-row__value.warn {
    color: #b45309;
}

.status-row__value.bad {
    color: #b91c1c;
}

.status-modal__section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.status-modal__section-title {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.status-modal__list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #475569;
    font-size: 12px;
}



.resource-detail-meta {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 14px;
}

.resource-detail-section h3 {
    margin: 12px 0 8px;
    font-size: 14px;
}

.resource-detail-list {
    display: grid;
    gap: 8px;
}


.resource-detail-summary {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
    font-size: 13px;
}


.finance-export-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.finance-export-controls .form-control-sm {
    font-size: 12px;
    padding: 6px 8px;
    height: 32px;
}

/* --- Login page --- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #e6f3ff 0%, #eef2ff 55%, #f5f3ff 100%);
}

.login-card {
    width: min(420px, 100%);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    border: 1px solid #e5e7eb;
    padding: 2rem;
}

.login-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.login-subtitle {
    margin: 0 0 1.5rem 0;
    color: #64748b;
    font-size: 0.95rem;
}

.login-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: #475569;
}

.login-input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.login-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--accent), #4f46e5);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.login-error {
    margin-top: 0.75rem;
    color: #b91c1c;
    font-size: 0.9rem;
}

/* WCAG 2.1 — lien d'évitement clavier */
.skip-link {
    position: absolute;
    top: -999px;
    left: -999px;
    z-index: var(--z-tooltip);
    padding: 0.5rem 1rem;
    background: var(--accent, #2563eb);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    white-space: nowrap;
}
.skip-link:focus {
    top: 0;
    left: 0;
}

.skip-link-main {
    border-radius: 0 0 8px 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

/* Lien retour étape MFA */
.login-back {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--accent, #2563eb);
    text-decoration: none;
}
.login-back:hover,
.login-back:focus {
    text-decoration: underline;
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

.login-link-row {
    margin-top: 0.95rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted, #64748b);
}

.login-link-row a {
    color: var(--accent, #2563eb);
    font-weight: 600;
    text-decoration: none;
}

.login-link-row a:hover,
.login-link-row a:focus {
    text-decoration: underline;
}

/* ── SSO OAuth buttons ──────────────────────────────────────────────── */

.login-sso-zone {
    margin-top: 1.2rem;
}
.login-sso-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    color: #94a3b8;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.login-sso-sep::before,
.login-sso-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.login-sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg, 10px);
    background: #fff;
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.login-sso-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.login-sso-btn:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}
.login-sso-btn svg {
    flex-shrink: 0;
}

.finance-export-badge {
    font-size: 11px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 999px;
    padding: 4px 8px;
}

.finance-export-badge.hidden {
    display: none;
}


.finance-export-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .guided-step {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
}

.echeancier-embed-wrap {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    min-height: 0;
    box-shadow: none;
}

.echeancier-embed-frame {
    width: 100%;
    min-height: 0;
    height: 520px;
    border: 0;
    display: block;
}

.echeancier-header {
    margin-bottom: 0;
}

.echeancier-host-card {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.echeancier-host-card .echeancier-embed-wrap {
    min-height: 0;
}

.echeancier-host-card .echeancier-embed-frame {
    min-height: 0;
}

@media (max-width: 1024px) {
    .echeancier-host-card .echeancier-embed-wrap,
    .echeancier-host-card .echeancier-embed-frame {
        min-height: 72vh;
    }
}
.source-checklist {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin: 0.35rem 1rem 0.7rem;
    border-radius: 10px;
    font-size: 0.82rem;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
}

.source-checklist--ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.source-checklist--warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS — v2 (audit mars 2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Scrollbar personnalisée (WebKit) ─────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.22);
    border-radius: 99px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.45);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(109, 40, 217, 0.22) transparent;
}

/* ── 2. Skeleton loader ──────────────────────────────────────────────────── */
@keyframes skeletonShimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        rgba(139, 92, 246, 0.06) 25%,
        rgba(139, 92, 246, 0.13) 50%,
        rgba(139, 92, 246, 0.06) 75%
    );
    background-size: 600px 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton-text  { height: 1em; margin-bottom: 0.5em; }
.skeleton-title { height: 1.4em; width: 60%; margin-bottom: 0.75em; }
.skeleton-card  {
    height: 120px;
    border-radius: var(--radius-card);
}

/* ── 4. Espace bas de page (footer légal fixe 36px) ─────────────────────── */
body {
    padding-bottom: 40px;
}

/* ── 5. Tooltip natif amélioré ───────────────────────────────────────────── */
[title] {
    position: relative;
}

/* ── 6. Card hover lift — micro-interaction cohérente ────────────────────── */
.card,
.risk-card,
.db-kpi-card,
.terrain-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover,
.risk-card:hover,
.db-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ── 7. Badge success / badge violet ──────────────────────────────────────── */
.badge-success {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.55em;
    border-radius: var(--radius-xs);
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-violet {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.55em;
    border-radius: var(--radius-xs);
    background: rgba(139, 92, 246, 0.12);
    color: #4c1d95;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── 8. Pill statut succès ───────────────────────────────────────────────── */
.u-pill-success {
    background: #dcfce7;
    color: #15803d;
    font-weight: 600;
}

/* ── 9. Transitions cohérentes pour inputs ───────────────────────────────── */
input, select, textarea {
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--focus-outline, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* ── 10. Bouton primaire — focus anneau bleu */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--focus-outline, #2563eb);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

/* ── 11. Tab overflow — indicateur visuel "+" ─────────────────────────────── */
.tab-overflow {
    position: relative;
}
.tab-overflow-count {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ── 12. Texte sélectionné — couleur accent ──────────────────────────────── */
::selection {
    background: rgba(37, 99, 235, 0.18);
    color: #0f172a;
}

/* ── 13. Lien dans le contenu — cohérence bleue ──────────────────────────── */
.content-link,
.prose a {
    color: #2563eb;
    text-decoration-color: rgba(37, 99, 235, 0.35);
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.content-link:hover,
.prose a:hover {
    color: #1d4ed8;
    text-decoration-color: rgba(29, 78, 216, 0.7);
}

/* ── 14. Ajustement footer légal — intégration douce ────────────────────── */
#legalFooter a {
    transition: opacity 0.2s, color 0.2s;
}
#legalFooter a:hover {
    color: #c4b5fd !important;
    opacity: 1 !important;
}

/* ── 15. Amélioration visuelle du menu overflow panel ────────────────────── */
.main-nav-menu-panel {
    border: 1px solid #ddd6fe;
    box-shadow: 0 14px 30px rgba(76, 29, 149, 0.1);
}
.main-nav-menu-item:hover {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: var(--text);
}
.main-nav-menu-section + .main-nav-menu-section {
    border-top-color: #ede9fe;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTÉGRATION DE global_fixes.css (absorbé depuis global_fixes.css — mars 2026)
   Origine : Fix 13/14 audit UX — mars 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   FOOTER LÉGAL — styles externalisés (anciennement inline)
   ============================================================ */
#legalFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-toast, 700);   /* anciennement 9990 — ramené à l'échelle z-index globale */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 6px 1rem;
    font-size: 11px;
    background: rgba(10, 19, 40, 0.93);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#legalFooter a {
    color: #a8c8e8;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

#legalFooter a:hover,
#legalFooter a:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(168, 200, 232, 0.5);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Compenser la hauteur du footer fixe sur le contenu principal */
/* fix: padding-bottom sur main pour le footer légal fixe */
main {
    padding-bottom: 32px;
}

/* ============================================================
   FOCUS VISIBLE — harmonisation globale
   ============================================================ */
/* fix: focus-visible global (harmonisation accessibilité) */
:focus-visible {
    outline: 2px solid var(--focus-outline, #2563eb);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Supprimer l'outline sur click souris (conservé clavier via focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Assurer la visibilité du focus sur les onglets de navigation */
.tab:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.9);
    outline-offset: 2px;
    z-index: 1;
}

/* Focus dans les menus */
/* fix: focus-visible dans les menus de navigation */
.main-nav-menu-item:focus-visible {
    outline: 2px solid var(--focus-outline, #2563eb);
    outline-offset: -2px;
    border-radius: 8px;
}

/* fix: tableaux finance — flex-wrap et gap */
.finance-header {
    flex-wrap: wrap;
    gap: 1rem;
}

.finance-title {
    min-width: 250px;
}

.finance-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* fix: responsive resources-header < 1280px */
@media (max-width: 1280px) {
    .resources-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        text-align: center;
    }

    .resources-title {
        justify-content: center;
    }

    .resources-actions {
        justify-content: center;
    }
}

/* fix: responsive finance-header < 768px */
@media (max-width: 768px) {
    .finance-header {
        flex-direction: column;
        text-align: center;
    }

    .finance-actions {
        justify-content: center;
    }

    .btn-export, .btn-add-cost, .btn-add-resource {
        width: 100%;
        justify-content: center;
    }
}

/* fix: masquer la bannière "Planning actif" injectée dynamiquement */
.active-planning-banner {
    display: none !important;
}

/* fix: bannière "Annuler / Enregistrer" visible uniquement dans les modales actives */
.modal-footer {
    display: none !important;
}

.modal-overlay.active .modal-footer {
    display: flex !important;
}

/* ============================================================
   ODJ / SUJETS / ACTIONS - POLISH UI
   ============================================================ */
#odj,
#sujets,
#actions {
    padding-top: 0.25rem;
}

#odj .filters,
#sujets .filters,
#actions .filters {
    border: 1px solid #d9e3f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

#odj .filter-group select,
#sujets .filter-group select,
#actions .filter-group select {
    min-width: 170px;
}

#odj .u-section-title,
#sujets .u-section-title {
    margin: 0 0 0.6rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e6edf8;
}

#odjList,
#sujetsList {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 70vh;
    overflow: auto;
    padding-right: 0.25rem;
}

#odjList > *,
#sujetsList > * {
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#odjList > *:hover,
#sujetsList > *:hover {
    transform: translateY(-1px);
    border-color: #bfd4f4;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.08);
}

#sujets #sujetsList {
    gap: 0.75rem;
    max-height: calc(100vh - 320px);
    padding-right: 0.35rem;
}

#sujets #sujetsList .sujet-item {
    position: relative;
    padding: 0.8rem 0.85rem;
    border: 1px solid #d8e5f7;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#sujets #sujetsList .sujet-item:hover {
    transform: translateY(-2px);
    border-color: #9fc2f7;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

#sujets #sujetsList .sujet-item.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14), 0 10px 20px rgba(37, 99, 235, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

#sujets #sujetsList .sujet-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

#sujets #sujetsList .sujet-lieu {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #eaf2ff;
    color: #1d4ed8;
}

#sujets #sujetsList .sujet-numero {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: #eef2f7;
    color: #334155;
}

#sujets #sujetsList .sujet-titre {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    margin-bottom: 0.38rem;
}

#sujets #sujetsList .sujet-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#sujets #sujetsList .sujet-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
}

#sujets #sujetsList .sujet-meta-count {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d8e5f7;
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
    color: #0f172a;
    background: #f8fbff;
    font-weight: 600;
}

#sujets #sujetsList .sujet-meta-date {
    color: #64748b;
    white-space: nowrap;
}

#odjDetail,
#sujetDetail,
#actions .card {
    border: 1px solid #d5e2f4;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

#odjDetail .card-header,
#sujetDetail .card-header {
    border-bottom: 1px solid #e6edf8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    margin: -1.25rem -1.25rem 1rem -1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 12px 12px 0 0;
}

#odj #odjSujetsList,
#sujets #sujetActionsList {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#odj #odjSujetsList > *,
#sujets #sujetActionsList > * {
    border: 1px solid #e2ebf8;
    border-left: 4px solid #5b8def;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: #fbfdff;
}

#actions .table-container {
    border: 1px solid #d9e3f2;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#actions table th {
    background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
    color: #334155;
    font-weight: 700;
    white-space: nowrap;
}

#actions table td {
    font-size: 0.88rem;
}

#actions tbody tr:nth-child(even) {
    background: #fcfdff;
}

#actions tbody tr:hover {
    background: #f3f8ff;
}

#odj .empty-state,
#sujets .empty-state {
    border: 1px dashed #c8d8f0;
    border-radius: 12px;
    background: #f8fbff;
}

@media (max-width: 1024px) {
    #odjList,
    #sujetsList {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    #odj .filters,
    #sujets .filters,
    #actions .filters {
        padding: 0.75rem;
    }

    #odj .filter-group,
    #sujets .filter-group,
    #actions .filter-group {
        width: 100%;
    }

    #odj .filter-group select,
    #sujets .filter-group select,
    #actions .filter-group select {
        min-width: 100%;
        width: 100%;
    }
}

/* ============================================================
   WORKSPACE LAYOUT SYSTEM (UNIFIED DESIGN)
   ============================================================ */
.workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
    padding: 1.35rem 1.5rem;
    min-height: 112px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    color: #fff;
}

.workspace-header--indigo {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
}

.workspace-header--blue {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}

.workspace-header--slate {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.workspace-header--teal {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

.workspace-title h2 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.workspace-title p {
    margin: 0.35rem 0 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.88rem;
    line-height: 1.45;
}

.workspace-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

#odj .filters,
#sujets .filters,
#actions .filters,
#contacts .filters,
#ressources .filters,
#finance .filters,
#risques .filters {
    border: 1px solid #d9e3f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

#odj .card,
#sujets .card,
#actions .card,
#contacts .card,
#ressources .card,
#finance .card,
#risques .card {
    border: 1px solid #d5e2f4;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

#actions .table-container,
#contacts .table-container,
#ressources .table-container,
#finance .table-container,
#risques .table-container {
    border: 1px solid #d9e3f2;
    border-radius: 12px;
    overflow: auto;
}

#actions table th,
#contacts table th,
#ressources table th,
#finance table th,
#risques table th {
    background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
    color: #334155;
    font-weight: 700;
    white-space: nowrap;
}

#actions tbody tr:nth-child(even),
#contacts tbody tr:nth-child(even),
#ressources tbody tr:nth-child(even),
#finance tbody tr:nth-child(even),
#risques tbody tr:nth-child(even) {
    background: #fcfdff;
}

#actions tbody tr:hover,
#contacts tbody tr:hover,
#ressources tbody tr:hover,
#finance tbody tr:hover,
#risques tbody tr:hover {
    background: #f3f8ff;
}

@media (max-width: 768px) {
    .workspace-header {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 1rem;
    }

    .workspace-actions {
        width: 100%;
    }

    .workspace-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════
   PROFIL UTILISATEUR — bouton header + dropdown
   ══════════════════════════════════════════════════════════════ */

.user-profile-zone {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Bouton profil ───────────────────────────────────────────── */
.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 0.3rem 0.65rem 0.3rem 0.3rem;
    cursor: pointer;
    color: #e8f1ff;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    white-space: nowrap;
}

.user-profile-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.user-profile-btn[aria-expanded="true"] {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}

/* ── Avatar initiales ────────────────────────────────────────── */
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.user-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

/* ── Nom + chevron ───────────────────────────────────────────── */
.user-profile-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chevron {
    width: 13px;
    height: 13px;
    color: rgba(255,255,255,0.6);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.user-profile-btn[aria-expanded="true"] .user-chevron {
    transform: rotate(180deg);
}

/* ── Pill rôle ───────────────────────────────────────────────── */
.user-role-pill {
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.42rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.user-role-pill--admin    { background: rgba(239,68,68,0.2);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.user-role-pill--responsable { background: rgba(245,158,11,0.2); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.user-role-pill--editor   { background: rgba(99,102,241,0.2); color: #c4b5fd; border: 1px solid rgba(99,102,241,0.3); }
.user-role-pill--read     { background: rgba(100,116,139,0.2); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }

/* Dans le dropdown (fond clair) */
.user-dropdown .user-role-pill--admin    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.user-dropdown .user-role-pill--responsable { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.user-dropdown .user-role-pill--editor   { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.user-dropdown .user-role-pill--read     { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* ── Dropdown ────────────────────────────────────────────────── */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(15,23,65,0.18), 0 2px 8px rgba(15,23,65,0.08);
    z-index: 10000;
    overflow: hidden;
    animation: userDropdownIn 0.15s ease-out;
}

@keyframes userDropdownIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.user-dropdown[hidden] { display: none; }

/* ── Header du dropdown ─────────────────────────────────────── */
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, #f8faff, #f1f5fb);
}

.user-dropdown-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

.user-dropdown-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

/* ── Point statut terrain ───────────────────────────────────── */
.user-terrain-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
    position: relative;
}

.user-terrain-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(148,163,184,0.2);
}

.user-terrain-dot.connected {
    background: #22c55e;
}

.user-terrain-dot.connected::before {
    background: rgba(34,197,94,0.2);
    animation: terrainPulse 2s ease-in-out infinite;
}

@keyframes terrainPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0; transform: scale(1.8); }
}

/* ── Séparateur ─────────────────────────────────────────────── */
.user-dropdown-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 0;
}

/* ── Items ──────────────────────────────────────────────────── */
.user-dropdown-form { margin: 0; }

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    transition: background 0.12s;
}

.user-dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; }

.user-dropdown-item:hover { background: #f8fafc; color: #1e293b; }

.user-dropdown-item--danger { color: #dc2626; }
.user-dropdown-item--danger:hover { background: #fef2f2; color: #b91c1c; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .user-profile-name { display: none; }
    .user-role-pill { display: none; }
    .user-profile-btn { padding: 0.25rem; gap: 0.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHERPA HARMONY SYSTEM — APP-WIDE VISUAL CONSISTENCY
   Unifie les primitives partagées sur la logique EXE:
   surface blanche soignée, accent violet, contrastes sobres,
   boutons hiérarchisés et états disabled explicites.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --primary: #142033;
    --primary-light: #1f2d44;
    --primary-lighter: #334155;
    --accent: #6d5ef7;
    --accent-light: #7a6cfa;
    --accent-strong: #5b4ce6;
    --accent-dark: #4737d1;
    --accent-soft: rgba(109, 94, 247, 0.12);
    --accent-bg: rgba(109, 94, 247, 0.06);
    --accent-border: #d5ccff;
    --bg: #f4f7fb;
    --bg-subtle: #edf2f8;
    --card-bg: #ffffff;
    --border: #dde5f0;
    --border-light: #ebf0f7;
    --text: #142033;
    --text-secondary: #4f5f75;
    --text-muted: #6b7a90;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --focus-outline: #6d5ef7;
    --focus-ring: 0 0 0 3px rgba(109, 94, 247, 0.18);
}

body {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
    color: var(--text);
}

.card,
.workspace-filter-card,
.workspace-data-card,
:is(#odj, #sujets, #actions, #contacts, #ressources, #finance, #risques) .card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: var(--shadow-sm);
}

.card:hover,
.workspace-data-card:hover,
:is(#odj, #sujets, #actions, #contacts, #ressources, #finance, #risques) .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-header,
.workspace-data-card .card-header {
    border-bottom-color: var(--border-light);
}

.card-title,
.tab-content .card-title,
.card h2,
.card h3,
.card h4 {
    color: var(--text);
}

.btn {
    min-height: 44px;
    padding: 0.68rem 1.12rem;
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    background: #ffffff;
    color: var(--text);
    box-shadow: none;
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

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

.btn-primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(109, 94, 247, 0.18);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #6354ef 0%, #4f42d9 100%);
    border-color: #6354ef;
    box-shadow: 0 14px 28px rgba(109, 94, 247, 0.22);
}

.btn-secondary {
    background: linear-gradient(180deg, #faf8ff 0%, #ffffff 100%);
    border-color: var(--accent-border);
    color: var(--accent-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-secondary:hover {
    background: linear-gradient(180deg, #f6f2ff 0%, #fcfbff 100%);
    border-color: #c8bdff;
    color: var(--accent-dark);
}

.btn-outline {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-color: var(--border);
    color: var(--text-secondary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-outline:hover {
    background: #f8faff;
    border-color: #cad4e2;
    color: var(--text);
}

.btn-danger {
    background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
    border-color: #f2c7c7;
    color: #b42318;
}

.btn-danger:hover {
    background: linear-gradient(180deg, #fff8f8 0%, #fff0f0 100%);
    border-color: #e7a7a7;
    color: #991b1b;
}

.btn-danger-fill {
    background: linear-gradient(180deg, #dc5c5c 0%, #c93f3f 100%);
    border-color: #c93f3f;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(185, 28, 28, 0.18);
}

.btn-danger-fill:hover {
    background: linear-gradient(180deg, #cf4e4e 0%, #b93232 100%);
    border-color: #b93232;
}

.btn-success {
    background: linear-gradient(180deg, #199c57 0%, #15803d 100%);
    border-color: #15803d;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(21, 128, 61, 0.16);
}

.btn-success:hover {
    background: linear-gradient(180deg, #178d4f 0%, #136c35 100%);
    border-color: #136c35;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--text);
}

.btn-sm {
    min-height: 38px;
    padding: 0.52rem 0.88rem;
    border-radius: 14px;
    font-size: 0.84rem;
}

.btn-lg {
    min-height: 50px;
    padding: 0.85rem 1.5rem;
    border-radius: 18px;
    font-size: 0.98rem;
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e1e8f0;
    color: #9aa8ba;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

.btn:disabled:hover,
.btn[disabled]:hover,
.btn.is-disabled:hover {
    transform: none;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e1e8f0;
    color: #9aa8ba;
    box-shadow: none;
}

.form-group label {
    margin-bottom: 0.38rem;
    color: var(--text-muted);
    font-size: 0.73rem;
    letter-spacing: 0.06em;
}

.form-control,
.filter-group select {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.form-control:hover,
.filter-group select:hover {
    border-color: #cfd8e4;
}

.form-control:focus,
.filter-group select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    background: #ffffff;
}

textarea.form-control {
    min-height: 108px;
}

select.form-control,
.filter-group select {
    background-position: right 14px center;
    padding-right: 40px;
}

.filters,
.u-toolbar-wrap,
:is(#odj, #sujets, #actions, #contacts, #ressources, #finance, #risques) .filters {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--shadow-sm);
}

.filter-group label {
    color: var(--text-muted);
}

.u-toolbar-wrap {
    align-items: center;
}

.u-seg,
.u-seg-end {
    border-left-color: var(--border-light);
}

.table-container,
:is(#actions, #contacts, #ressources, #finance, #risques) .table-container {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

:is(#actions, #contacts, #ressources, #finance, #risques) table th {
    background: linear-gradient(180deg, #fbfcfe 0%, #f2f6fb 100%);
    color: var(--text-secondary);
}

:is(#actions, #contacts, #ressources, #finance, #risques) tbody tr:hover {
    background: rgba(109, 94, 247, 0.045);
}

.app-status-banner {
    top: 0.75rem;
    margin: 0.75rem 1rem 0;
    border: 1px solid #f4deb0;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdf5 0%, #fff7e6 100%);
    color: #8a5a00;
    box-shadow: var(--shadow-sm);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
}

.app-status-banner.is-warning {
    background: linear-gradient(180deg, #fffdf5 0%, #fff7e6 100%);
    color: #8a5a00;
    border-color: #f4deb0;
}

.app-status-banner.is-danger {
    background: linear-gradient(180deg, #fff8f8 0%, #fff1f1 100%);
    color: #991b1b;
    border-color: #f2c7c7;
}

.main-nav-menu-toggle {
    height: 38px;
    padding: 0 0.92rem;
    border-radius: 12px;
    font-weight: 700;
    color: rgba(236, 242, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.main-nav-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.main-nav-menu-toggle[aria-expanded="true"] {
    background: rgba(109, 94, 247, 0.3);
    border-color: rgba(213, 204, 255, 0.55);
    color: #ffffff;
}

.main-nav-menu-panel,
.user-dropdown {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: var(--shadow-md);
}

.main-nav-menu-section + .main-nav-menu-section,
.user-dropdown-sep {
    border-top-color: var(--border-light);
    background: var(--border-light);
}

.main-nav-menu-item,
.user-dropdown-item {
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.main-nav-menu-item:hover,
.user-dropdown-item:hover {
    background: rgba(109, 94, 247, 0.06);
    border-color: rgba(109, 94, 247, 0.12);
    color: var(--text);
}

.main-nav-menu-item.danger:hover,
.user-dropdown-item--danger:hover {
    background: #fff2f2;
    border-color: #ffd8d8;
}

.user-dropdown-header {
    background: linear-gradient(180deg, #fbfcff 0%, #f5f8fd 100%);
}

.page-hero .btn-primary {
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
    border-color: rgba(255, 255, 255, 0.88);
    color: var(--accent-strong);
    box-shadow: 0 10px 24px rgba(12, 22, 56, 0.16);
}

.page-hero .btn-primary:hover {
    background: linear-gradient(180deg, #ffffff 0%, #efeaff 100%);
    border-color: rgba(255, 255, 255, 0.92);
    color: var(--accent-dark);
}

.page-hero .btn-outline {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.page-hero .btn-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.38);
    color: #ffffff;
}