/* =============================================
   MSE EXPERIENCE
   Charte graphique & Design System
   (socle graphique repris de JUST DO WEB — palette MSE teal)
   ============================================= */

:root {
    --white: #FFFFFF;
    --black: #212121;
    --violet: #245868;
    --violet-rose: #4CA4A4;
    --jaune: #F8AF42;
    --bleu: #44CAE6;
    --gradient: linear-gradient(135deg, #245868, #4CA4A4);
    --gradient-h: linear-gradient(90deg, #245868, #4CA4A4);

    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;

    --success: #4CAF50;
    --warning: #FF9800;
    --danger: #F44336;
    --info: #2196F3;

    --font-title: 'Poppins', sans-serif;
    --font-text: 'Nunito', sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

    --topbar-h: 64px;
    --sidebar-w: 260px;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-text);
    color: var(--black);
    background: var(--gray-100);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 800;
    line-height: 1.2;
}

a {
    color: var(--violet);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--violet-rose); }

img { max-width: 100%; height: auto; }

/* =============================================
   LOGIN PAGE
   ============================================= */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-body::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    top: -100px; right: -100px;
}

.login-body::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    bottom: -80px; left: -80px;
}

.login-container {
    width: 100%;
    max-width: 440px;
    z-index: 1;
}

.login-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.login-logo-img {
    height: 70px;
    margin-bottom: 16px;
}

.login-title {
    font-size: 1.8rem;
    background: var(--gradient-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.login-subtitle {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-bottom: 32px;
}

.login-form .form-group {
    text-align: left;
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.login-form label i {
    color: var(--violet);
    margin-right: 4px;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #F5F5F5;
    border-radius: var(--radius-sm);
    font-family: var(--font-text);
    font-size: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    outline: none;
    background: #F5F5F5;
}

.login-form input:focus {
    border-color: #CFE9E8;
    background: #E6EFEF;
    box-shadow: none;
}

.login-footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.login-footer p {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.login-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--violet);
    font-weight: 700;
    font-size: 1.1rem;
}

.login-phone:hover { color: var(--violet-rose); }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

.btn-primary {
    background: var(--gradient);
    color: var(--white);
}
.btn-primary:hover { color: var(--white); opacity: 0.9; }

.btn-secondary {
    background: var(--gray-200);
    color: var(--black);
}
.btn-secondary:hover { background: var(--gray-300); color: var(--black); }

.btn-accent-yellow {
    background: var(--jaune);
    color: var(--black);
}
.btn-accent-yellow:hover { color: var(--black); opacity: 0.9; }

.btn-accent-blue {
    background: var(--bleu);
    color: var(--white);
}
.btn-accent-blue:hover { color: var(--white); opacity: 0.9; }

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

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

.btn-outline {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}
.btn-outline:hover {
    border-color: var(--violet);
    color: var(--violet);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.8rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 1rem;
}

.btn-icon {
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
}

/* Bouton Support (top bar) */
.btn-support {
    background-image: linear-gradient(160deg, #FAAF41 0%, #FF9468 100%);
    color: #FFFFFF;
    box-shadow: 0px 10px 45px 0px rgba(250, 175, 65, 0.37);
}
.btn-support:hover { color: #FFFFFF; opacity: 0.9; }
.btn-support i { color: #FFFFFF; }

/* Bouton Déconnexion (top bar) */
.btn-logout {
    background: transparent;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}
.btn-logout:hover {
    background: rgba(255,255,255,0.15);
    color: #FFFFFF;
}
.btn-logout i { color: #FFFFFF; }

/* Bouton Agenda (top bar) */
.btn-agenda {
    background: linear-gradient(135deg, #0078D4, #005A9E);
    border: none;
    color: #FFFFFF;
}
.btn-agenda:hover {
    background: linear-gradient(135deg, #005A9E, #003D6B);
    color: #FFFFFF;
}
.btn-agenda i { color: #FFFFFF; }

/* Badge Prochain RDV (clients top bar) */
.next-meeting-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    color: #FFFFFF;
    font-size: 0.78rem;
    text-decoration: none;
    margin-left: 8px;
    white-space: nowrap;
    transition: background 0.2s;
}
.next-meeting-badge:hover {
    background: rgba(255,255,255,0.25);
    color: #FFFFFF;
    text-decoration: none;
}
.next-meeting-badge i {
    color: #F8AF42;
    font-size: 0.85rem;
}

/* =============================================
   TOP BAR
   ============================================= */
.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: linear-gradient(135deg, #245868, #4CA4A4);
    box-shadow: 0 4px 20px rgba(36, 88, 104, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--white);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.sidebar-toggle:hover {
    background: rgba(255,255,255,0.15);
    color: var(--jaune);
}

.top-bar-logo img {
    height: 36px;
}

.top-bar-info {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.client-selector-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============= Sélecteur de site (multi-sites) ============= */
.site-selector-wrapper {
    position: relative;
}
.site-selector-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.site-selector-button:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.35);
}
.site-selector-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,0.6);
}
.site-selector-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    padding: 6px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}
.site-selector-dropdown.visible { display: block; }
.site-selector-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #212121;
    transition: background 0.12s;
}
.site-selector-option:hover { background: #F5F5F5; }
.site-selector-option.active { background: rgba(36, 88, 104,0.08); color: #245868; font-weight: 600; }
.site-selector-option .site-selector-dot { border: 1px solid rgba(0,0,0,0.1); }
.site-selector-divider { height: 1px; background: #E0E0E0; margin: 4px 6px; }

/* Badge "site" affiché dans les listes en mode multi-sites */
.site-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.site-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
}

/* Filtre site multi-sites au-dessus des listes */
.site-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(36, 88, 104,0.04), transparent);
    border-radius: 8px;
}
.site-filter-bar-label {
    font-size: 0.82rem;
    color: #666;
    font-weight: 600;
}
.site-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.site-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    color: #555;
    transition: all 0.12s;
}
.site-filter-chip:hover { border-color: #245868; color: #245868; }
.site-filter-chip.active { background: #245868; color: #fff; border-color: #245868; font-weight: 600; }
.site-filter-chip.active .site-badge-dot { border: 1px solid #fff; }



.client-autocomplete {
    position: relative;
    display: flex;
    align-items: center;
}
.client-autocomplete-input {
    padding: 6px 30px 6px 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    font-family: var(--font-text);
    font-size: 0.85rem;
    background: rgba(255,255,255,0.15);
    color: #FFFFFF;
    outline: none;
    width: 220px;
    transition: all 0.2s;
}
.client-autocomplete-input::placeholder {
    color: rgba(255,255,255,0.6);
}
.client-autocomplete-input:focus {
    background: #FFFFFF;
    color: #1A1A2E;
    border-color: #FFFFFF;
    width: 280px;
}
.client-autocomplete-input:focus::placeholder {
    color: #9E9E9E;
}
.client-autocomplete-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.client-autocomplete-input:focus ~ .client-autocomplete-clear {
    color: #9E9E9E;
}
.client-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 280px;
    max-height: 300px;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 9999;
}
.client-autocomplete-dropdown.visible {
    display: block;
}
.client-autocomplete-option {
    padding: 8px 14px;
    font-size: 0.85rem;
    color: #1A1A2E;
    cursor: pointer;
    transition: background 0.1s;
}
.client-autocomplete-option:hover,
.client-autocomplete-option.active {
    background: #E4F1F1;
    color: #245868;
}
.client-autocomplete-option[style*="display: none"] {
    display: none;
}

.client-name {
    font-weight: 700;
    color: var(--white);
    font-size: 0.9rem;
}

.user-greeting {
    font-size: 0.85rem;
    color: var(--white);
    white-space: nowrap;
}

.user-greeting i { color: var(--white); }

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.top-bar-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #F8AF42;
    font-weight: 700;
    font-size: 0.85rem;
}
.top-bar-phone:hover { color: #FFD080; }

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    z-index: 900;
    transition: transform var(--transition), width var(--transition);
}

.sidebar-content {
    padding: 24px 16px 60px;
}

.sidebar-section {
    margin-bottom: 28px;
}

.sidebar-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-500);
    padding: 0 12px;
    margin-bottom: 8px;
}

.sidebar-section-title i {
    margin-right: 6px;
}

/* Admin menu collapsible */
.sidebar-section-title.collapsible {
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    margin-bottom: 4px;
    transition: background var(--transition);
    user-select: none;
}

.sidebar-section-title.collapsible:hover {
    background: var(--gray-100);
}

.admin-toggle-arrow {
    margin-left: auto;
    font-size: 0.55rem;
    transition: transform 0.25s ease;
    color: var(--gray-400);
}

.sidebar-section-title.collapsible.collapsed .admin-toggle-arrow {
    transform: rotate(-90deg);
}

/* Animation collapse du menu admin */
#admin-menu-list {
    overflow: hidden;
    max-height: 1200px;
    transition: max-height 0.4s ease, opacity 0.25s ease;
    opacity: 1;
}

#admin-menu-list.collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition);
}

.sidebar-menu li a:hover {
    background: var(--gray-100);
    color: var(--violet);
}

.sidebar-menu li a.active {
    background: var(--gradient);
    color: var(--white);
}

.sidebar-menu li a i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.sidebar-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}
.sidebar-empty i {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--jaune);
}
.sidebar-empty p {
    font-size: 0.9rem;
}

/* Sidebar footer - Powered by */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--gray-200);
    background: var(--white);
}

.sidebar-footer a {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-decoration: none;
    font-weight: 900;
    transition: color var(--transition);
}

.sidebar-footer a:hover {
    color: #387E86;
}

.sidebar.collapsed .sidebar-footer {
    padding: 12px 4px;
}

.sidebar.collapsed .sidebar-footer .powered-text {
    display: none;
}

.sidebar.collapsed .sidebar-footer .powered-icon {
    display: inline;
}

/* Sidebar collapsed state (desktop) */
.sidebar.collapsed {
    width: 68px;
}

.sidebar.collapsed .sidebar-section-title {
    font-size: 0;
    padding: 0 12px;
    margin-bottom: 4px;
    overflow: hidden;
    height: 0;
}

.sidebar.collapsed .admin-toggle-arrow {
    display: none;
}

.sidebar.collapsed #admin-menu-list {
    max-height: none;
    opacity: 1;
}

.sidebar.collapsed .sidebar-menu li a {
    justify-content: center;
    padding: 12px;
    gap: 0;
}

.sidebar.collapsed .sidebar-menu li a span,
.sidebar.collapsed .sidebar-menu li a .menu-text {
    display: none;
}

.sidebar.collapsed .sidebar-menu li a i {
    font-size: 1.2rem;
    width: auto;
}

.sidebar.collapsed .sidebar-content {
    padding: 16px 8px;
}

.sidebar.collapsed .sidebar-empty p {
    display: none;
}

.sidebar.collapsed + .sidebar-overlay + .main-content,
body.sidebar-collapsed .main-content {
    margin-left: 68px;
}

/* ===== SIDEBAR - PROCHAIN RDV WIDGET ===== */
.sidebar-next-rdv-widget {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 4px 0 12px 0 !important;
    background: rgba(36, 88, 104, 0.06) !important;
    border-radius: var(--radius-sm, 8px) !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    border: 1px solid rgba(36, 88, 104, 0.12);
}
.sidebar-next-rdv-widget:hover {
    background: rgba(36, 88, 104, 0.12) !important;
}
.sidebar-next-rdv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #245868;
    flex-shrink: 0;
    margin-top: 5px;
    animation: rdvDotPulse 2s ease-in-out infinite;
}
@keyframes rdvDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sidebar-next-rdv-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    flex: 1;
}
.sidebar-next-rdv-info span {
    display: block !important;
}
.sidebar-next-rdv-label {
    font-size: 0.65rem;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #245868 !important;
}
.sidebar-next-rdv-titre {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #212121 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sidebar-next-rdv-date {
    font-size: 0.72rem !important;
    color: #757575 !important;
    font-weight: 400 !important;
    margin-top: 1px;
}
.sidebar-next-rdv-date i {
    font-size: 0.65rem;
    margin-right: 2px;
    color: #245868;
    width: auto !important;
}
/* Masquer le widget quand la sidebar est réduite */
.sidebar.collapsed .sidebar-next-rdv-widget {
    display: none !important;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 899;
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.main-content {
    margin-left: var(--sidebar-w);
    margin-top: var(--topbar-h);
    padding: 32px;
    min-height: calc(100vh - var(--topbar-h));
    transition: margin-left var(--transition);
}

/* =============================================
   PAGE HEADER
   ============================================= */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-header h1 {
    font-size: 1.8rem;
    color: var(--black);
    text-transform: uppercase;
}

.page-header h1 i {
    color: var(--violet);
    margin-right: 8px;
}

.page-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* =============================================
   CARDS
   ============================================= */
.card {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

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

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

.card-header h2 {
    font-size: 1.1rem;
    color: var(--black);
}

.card-header h2 i {
    color: var(--violet);
    margin-right: 8px;
}

.card-body {
    padding: 24px;
}

.card-gradient {
    background: var(--gradient);
    color: var(--white);
}
.card-gradient h2, .card-gradient h3 { color: var(--white); }
.card-gradient h2 i, .card-gradient h3 i { color: var(--jaune); }

/* =============================================
   FORMS
   ============================================= */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #212121;
    margin-bottom: 6px;
    font-family: var(--font-text);
}

.form-group label .required {
    color: var(--danger);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #F5F5F5;
    border-radius: var(--radius-sm);
    font-family: var(--font-text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    background: #F5F5F5;
}

.form-control:focus {
    border-color: #CFE9E8;
    background: #E6EFEF;
    box-shadow: none;
}

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

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-control-sm {
    padding: 8px 12px;
    font-size: 0.85rem;
    height: auto;
}

.charte-file-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--violet);
    white-space: nowrap;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 4px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.form-section {
    margin-bottom: 40px;
}

.form-section-title {
    font-size: 1.2rem;
    color: var(--violet);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--violet);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Checkbox custom */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.checkbox-item:hover {
    background: var(--gray-200);
}

.checkbox-item input[type="checkbox"] {
    accent-color: var(--violet);
    width: 18px; height: 18px;
    cursor: pointer;
}

.checkbox-item label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

thead th {
    background: #387E86;
    padding: 12px 16px;
    text-align: left;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-bottom: none;
}

thead th:hover {
    color: #F8AF42;
}

thead th .sort-icon {
    margin-left: 4px;
    font-size: 0.7rem;
    opacity: 0.7;
    color: #FFFFFF;
}

thead th:hover .sort-icon {
    color: #F8AF42;
}

tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background var(--transition);
}

tbody tr:nth-child(odd) {
    background: #FFFFFF;
}

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

tbody tr:hover {
    background: #CFE9E8;
}

tbody tr.clickable {
    cursor: pointer;
}

tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

/* Inline editable select */
td select.inline-select {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: var(--font-text);
    font-size: 0.85rem;
    background: var(--white);
    cursor: pointer;
}

td input.inline-input {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: var(--font-text);
    font-size: 0.85rem;
    width: 80px;
    background: var(--white);
}

/* =============================================
   BADGES
   ============================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-nouveau { background: #E3F2FD; color: #1565C0; }
.badge-en-cours { background: #FFF3E0; color: #E65100; }
.badge-relecture-jdw { background: #EDE9FE; color: #7C3AED; }
.badge-attente-infos { background: #FCE4EC; color: #C62828; }
.badge-attente-validation { background: #E4F1F1; color: #1E4A57; }
.badge-stand-by { background: #ECEFF1; color: #546E7A; }
.badge-question-jdw { background: #E8EAF6; color: #283593; }
.badge-terminee { background: #E8F5E9; color: #2E7D32; }

.badge-faible { background: #E8F5E9; color: #2E7D32; }
.badge-moyen { background: #FFF3E0; color: #E65100; }
.badge-urgent { background: #FFEBEE; color: #C62828; }

.badge-admin { background: var(--gradient); color: var(--white); }
.badge-admin_light { background: linear-gradient(135deg, #7E57C2, #6BB5B5); color: var(--white); }
.badge-collaborateur { background: var(--jaune); color: #333; }
.badge-client { background: var(--bleu); color: var(--white); }

/* NRJ statuts */
.badge-proposition-jdw { background: #E3F2FD; color: #1565C0; }
.badge-a-ecrire-jdw { background: #FFF3E0; color: #E65100; }
.badge-a-relire-client { background: #E4F1F1; color: #1E4A57; }
.badge-a-corriger-jdw { background: #FCE4EC; color: #C62828; }
.badge-a-publier-jdw { background: #E0F7FA; color: #00695C; }
.badge-contenu-publie { background: #E8F5E9; color: #2E7D32; }

/* =============================================
   ALERTS
   ============================================= */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.alert-error {
    background: #FFEBEE;
    color: #C62828;
    border-left: 4px solid #C62828;
}

.alert-success {
    background: #E8F5E9;
    color: #2E7D32;
    border-left: 4px solid #2E7D32;
}

.alert-info {
    background: #E3F2FD;
    color: #1565C0;
    border-left: 4px solid #1565C0;
}

.alert-warning {
    background: #FFF3E0;
    color: #E65100;
    border-left: 4px solid #E65100;
}

/* =============================================
   FLASH MESSAGES
   ============================================= */
.flash-message {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    animation: slideInUp 0.4s ease;
    box-shadow: var(--shadow-lg);
    max-width: 400px;
}

.flash-success { background: #2E7D32; color: var(--white); }
.flash-error { background: #C62828; color: var(--white); }
.flash-info { background: #1565C0; color: var(--white); }

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    margin-left: auto;
    opacity: 0.7;
}
.flash-close:hover { opacity: 1; }

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

/* =============================================
   DASHBOARD
   ============================================= */
.dashboard-welcome {
    padding: 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: 32px;
}

.dashboard-welcome h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.dashboard-welcome p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.dashboard-card {
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}

.dashboard-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
    background-color: #EEF6F6;
}

.dashboard-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--white);
    flex-shrink: 0;
    background: var(--gray-100, #f3f4f6);
}

/* Couleurs admin uniquement */
.dashboard-card-icon.violet-admin { background: var(--gradient); }
.dashboard-card-icon.rose-admin { background: var(--violet-rose); }
.dashboard-card-icon.rdv-icon-bg { background: #245868; }

.dashboard-card-content h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.dashboard-card-content p {
    font-size: 0.85rem;
    color: var(--gray-600);
}

/* =============================================
   CHARTE GRAPHIQUE - Color swatches
   ============================================= */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.color-swatch {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--white);
}

.color-swatch-preview {
    height: 80px;
    width: 100%;
}

.color-swatch-info {
    padding: 12px;
    text-align: center;
}

.color-swatch-name {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.color-swatch-hex {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-copy-hex {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-copy-hex:hover {
    color: var(--violet);
    background: var(--gray-100);
}
.btn-copy-hex.copied {
    color: #27ae60;
}

/* Copy field button (Fiche Projet) */
.form-group-copyable {
    position: relative;
}
.form-group-copyable .form-control {
    padding-right: 42px;
}
.btn-copy-field {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-500);
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    border-radius: 6px;
    transition: all 0.2s;
    position: absolute;
    right: 6px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 2;
}
.btn-copy-field:hover {
    color: var(--violet);
    border-color: var(--violet);
    background: #F0F6F6;
    box-shadow: 0 2px 6px rgba(36, 88, 104, 0.15);
}
.btn-copy-field.copied {
    color: #27ae60;
    border-color: #27ae60;
    background: #f0faf3;
}
.form-group-copyable textarea.form-control + .btn-copy-field {
    bottom: auto;
    top: 32px;
    right: 6px;
}
.form-group-copyable .form-hint + textarea.form-control + .btn-copy-field {
    top: 52px;
}

/* =============================================
   RICH TEXT EDITOR (RTE)
   ============================================= */
.rte-wrapper {
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.rte-wrapper:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(36, 88, 104, 0.08);
}
.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    flex-wrap: wrap;
}
.rte-toolbar-sep {
    width: 1px;
    height: 22px;
    background: var(--gray-300);
    margin: 0 4px;
}
.rte-format-select {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--white);
    font-size: 0.82rem;
    color: var(--gray-700);
    cursor: pointer;
    outline: none;
}
.rte-format-select:focus {
    border-color: var(--violet);
}
.rte-btn {
    background: var(--white);
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    padding: 5px 10px;
    font-size: 0.82rem;
    border-radius: 6px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rte-btn:hover {
    color: var(--violet);
    border-color: var(--violet);
    background: #F0F6F6;
}
.rte-btn.active {
    background: var(--violet);
    color: var(--white);
    border-color: var(--violet);
}
.rte-btn-copy {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
}
.rte-btn-copy:hover {
    color: var(--violet);
    border-color: var(--violet);
    background: #F0F6F6;
}
.rte-btn-copy.copied {
    color: #27ae60;
    border-color: #27ae60;
    background: #f0faf3;
}
.rte-editor {
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray-800);
    outline: none;
    background: var(--white);
}
.rte-editor:empty:before,
.rte-editor.rte-empty:before {
    content: attr(placeholder);
    color: var(--gray-400);
    pointer-events: none;
}
.rte-editor h1 { font-size: 1.6rem; font-weight: 700; margin: 0.5em 0 0.3em; color: var(--gray-900); }
.rte-editor h2 { font-size: 1.3rem; font-weight: 700; margin: 0.5em 0 0.3em; color: var(--gray-800); }
.rte-editor h3 { font-size: 1.1rem; font-weight: 600; margin: 0.4em 0 0.2em; color: var(--gray-800); }
.rte-editor h4 { font-size: 1rem; font-weight: 600; margin: 0.4em 0 0.2em; color: var(--gray-700); }
.rte-editor p { margin: 0.3em 0; }
.rte-editor ul { margin: 0.3em 0; padding-left: 24px; }
.rte-editor li { margin: 0.15em 0; }
.rte-editor b, .rte-editor strong { font-weight: 700; }

/* =============================================
   FILE UPLOAD & GRID
   ============================================= */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.file-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    position: relative;
}

.file-item-icon {
    font-size: 2rem;
    color: var(--violet);
    margin-bottom: 8px;
}

.file-item-name {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
    color: var(--gray-700);
}

.file-item-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.file-upload-zone {
    border: 2px dashed var(--gray-400);
    border-radius: var(--radius-md);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--gray-50);
}

.file-upload-zone:hover {
    border-color: var(--violet);
    background: rgba(36, 88, 104, 0.03);
}

.file-upload-zone i {
    font-size: 2.5rem;
    color: var(--gray-400);
    margin-bottom: 12px;
}

.file-upload-zone p {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.file-upload-zone input[type="file"] {
    display: none;
}

/* =============================================
   SUPPORT / ACTIONS MESSAGES
   ============================================= */
.message-list {
    max-height: 500px;
    overflow-y: auto;
    padding: 16px;
}

.message-item {
    margin-bottom: 16px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--violet);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.message-meta strong {
    color: var(--violet);
}

.message-text {
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.message-form {
    padding: 16px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 12px;
}

.message-form textarea {
    flex: 1;
    padding: 10px;
    border: 2px solid #F5F5F5;
    border-radius: var(--radius-sm);
    font-family: var(--font-text);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 60px;
    outline: none;
    background: #F5F5F5;
    transition: border-color var(--transition), background var(--transition);
}

.message-form textarea:focus {
    border-color: #CFE9E8;
    background: #E6EFEF;
}

/* =============================================
   MEMBER / PRODUCT CARDS (Fiche projet)
   ============================================= */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.item-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px;
    position: relative;
}

.item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.item-card-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--violet);
}

.item-card-delete {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* =============================================
   DOCUMENTS - Folders
   ============================================= */
.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.folder-item {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.folder-item:hover {
    border-color: var(--violet);
    box-shadow: var(--shadow-sm);
}

.folder-item.active {
    border-color: var(--violet);
    background: rgba(36, 88, 104, 0.05);
}

.folder-item i {
    font-size: 2.5rem;
    color: var(--jaune);
    margin-bottom: 8px;
}

.folder-item span {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
}

/* =============================================
   FILTERS / CONTROLS
   ============================================= */
.list-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.toggle-control input[type="checkbox"] {
    accent-color: var(--violet);
    width: 16px;
    height: 16px;
}

/* =============================================
   TABS (for Charte Graphique)
   ============================================= */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 24px;
}

.tab {
    padding: 12px 20px;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all var(--transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tab:hover { color: var(--violet); }

.tab.active {
    color: var(--violet);
    border-bottom-color: var(--violet);
}

.tab-content {
    display: none;
}

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

/* =============================================
   EMPTY STATE
   ============================================= */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--gray-400);
}

.empty-state h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--gray-600);
}

.empty-state p {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* =============================================
   MODAL
   ============================================= */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

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

.modal-header {
    padding: 24px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 1.2rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 0 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

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

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

    .main-content {
        margin-left: 0;
    }

    .top-bar-info {
        display: none;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 20px 16px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1 {
        font-size: 1.4rem;
    }

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

    .top-bar {
        padding: 0 12px;
    }

    .phone-text, .btn-text, .next-meeting-text {
        display: none;
    }

    .btn-sm {
        padding: 8px 10px;
    }

    .dashboard-welcome h1 {
        font-size: 1.4rem;
    }

    .dashboard-welcome p {
        font-size: 0.9rem;
    }

    .login-card {
        padding: 32px 24px;
    }

    .login-title {
        font-size: 1.4rem;
    }

    .items-grid {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 0.8rem;
    }

    thead th, tbody td {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .top-bar-right .top-bar-phone {
        display: none;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

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

/* =============================================
   POSITION SEO
   ============================================= */

/* Filters form */
.seo-filters-form {
    width: 100%;
}

.seo-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.seo-filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.seo-filter-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    white-space: nowrap;
    width: 100%;
}

.seo-filter-group label i {
    color: var(--violet);
    margin-right: 4px;
}

.seo-filter-group-nowrap {
    flex-wrap: nowrap;
}

.seo-select {
    width: auto !important;
    min-width: 120px;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
}

.seo-filter-btn {
    align-self: flex-end;
    margin-left: auto;
}

/* Toggle ON/OFF - SEO Travaillé */
.seo-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.seo-toggle-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
    white-space: nowrap;
}

.seo-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.seo-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.seo-switch-rail {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: background-color 0.3s;
    border-radius: 28px;
}

.seo-switch-rail:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.seo-switch input:checked + .seo-switch-rail {
    background-color: var(--violet);
}

.seo-switch input:checked + .seo-switch-rail:before {
    transform: translateX(24px);
}

/* Summary bar */
.seo-summary-bar {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.seo-summary-item {
    font-size: 0.9rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

.seo-summary-tops {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.seo-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.seo-top-badge strong {
    font-size: 1rem;
}

.seo-top-3 {
    background: #1B5E20;
}

.seo-top-5 {
    background: #388E3C;
}

.seo-top-10 {
    background: #4CAF50;
}

.seo-top-20 {
    background: #FF9800;
}

.seo-summary-item i {
    color: var(--violet);
}

.seo-summary-item strong {
    color: var(--black);
}

/* SEO Table specific */
.seo-table {
    font-size: 0.85rem;
}

.seo-th-center {
    text-align: center !important;
}

.seo-th-keyword {
    min-width: 200px;
}

/* Sortable columns */
.seo-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px !important;
}

.seo-sortable .sort-icon {
    font-size: 0.65rem;
    opacity: 0.5;
    margin-left: 4px;
    transition: opacity 0.2s;
}

.seo-sortable:hover .sort-icon {
    opacity: 1;
}

.seo-sortable[data-sort-dir="asc"] .sort-icon,
.seo-sortable[data-sort-dir="desc"] .sort-icon {
    opacity: 1;
    color: #F8AF42;
}

/* Position badges */
.seo-pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.85rem;
    font-family: var(--font-title);
}

.seo-pos-top3 {
    background: #1B5E20;
    color: #FFFFFF;
}

.seo-pos-top10 {
    background: #4CAF50;
    color: #FFFFFF;
}

.seo-pos-top20 {
    background: #FF9800;
    color: #FFFFFF;
}

.seo-pos-top50 {
    background: #F57C00;
    color: #FFFFFF;
}

.seo-pos-beyond {
    background: #E53935;
    color: #FFFFFF;
}

.seo-pos-default {
    background: var(--gray-300);
    color: var(--gray-700);
}

.seo-pos-na {
    color: var(--gray-400);
    font-style: italic;
}

/* Evolution indicators */
.seo-evol {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
}

.seo-evol-up {
    background: #E8F5E9;
    color: #2E7D32;
}

.seo-evol-down {
    background: #FFEBEE;
    color: #C62828;
}

.seo-evol-same {
    background: #E3F2FD;
    color: #1565C0;
}

.seo-evol-new {
    background: #E4F1F1;
    color: #1E4A57;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ---- Evolution Filters Bar ---- */
.seo-evol-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0;
}

.seo-evol-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Inactif : fond gris clair + texte gris foncé */
    background: #F0F0F0;
    color: #555;
}

.seo-evol-filter-btn:hover {
    background: #E0E0E0;
    color: #333;
}

/* Actif : fond vert clair + texte vert foncé */
.seo-evol-filter-btn.active {
    background: #E8F5E9;
    color: #2E7D32;
}

.seo-evol-filter-btn i {
    font-size: 0.7rem;
}

@media (max-width: 768px) {
    .seo-evol-filters {
        gap: 6px;
    }
    .seo-evol-filter-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
}

/* Score & Difficulty bubbles */
.seo-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.75rem;
    font-family: var(--font-title);
}

.seo-score-good {
    background: #E8F5E9;
    color: #1B5E20;
    border: 2px solid #4CAF50;
}

.seo-score-medium {
    background: #FFF8E1;
    color: #F57F17;
    border: 2px solid #FFC107;
}

.seo-score-bad {
    background: #FFEBEE;
    color: #B71C1C;
    border: 2px solid #E53935;
}

.seo-diff-easy {
    background: #E8F5E9;
    color: #1B5E20;
    border: 2px solid #4CAF50;
}

.seo-diff-medium {
    background: #FFF8E1;
    color: #F57F17;
    border: 2px solid #FFC107;
}

.seo-diff-hard {
    background: #FFEBEE;
    color: #B71C1C;
    border: 2px solid #E53935;
}

/* Keyword styling */
.seo-kw-tag {
    font-weight: 700;
}

.seo-kw-priorite {
    font-weight: 700;
    color: var(--violet);
}

.seo-kw-travaille {
    font-weight: 700;
    color: #1565C0;
}

.seo-star-icon {
    color: var(--jaune);
    font-size: 0.7rem;
    margin-left: 4px;
}

.seo-wrench-icon {
    color: var(--bleu);
    font-size: 0.7rem;
    margin-left: 4px;
}

/* Tag badge */
.seo-tag-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #E4F1F1;
    color: #1E4A57;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* URL cell */
.seo-url-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seo-url-cell a {
    font-size: 0.8rem;
    color: var(--violet);
}

.seo-url-cell a:hover {
    color: var(--violet-rose);
}

/* Actions cell */
.seo-actions-cell {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* Toggle options in modal */
.seo-toggle-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.seo-toggle-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive SEO */
@media (max-width: 768px) {
    .seo-filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .seo-filter-group {
        flex-wrap: wrap;
    }

    .seo-filter-group-nowrap {
        flex-wrap: wrap;
    }

    .seo-filter-btn {
        margin-left: 0;
    }

    .seo-select {
        min-width: 100px;
    }

    .seo-th-keyword {
        min-width: 130px;
    }

    .seo-url-cell {
        max-width: 120px;
    }

    .seo-summary-tops {
        margin-left: 0;
        width: 100%;
    }

    .seo-top-badge {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .seo-top-badge strong {
        font-size: 0.85rem;
    }
}

/* =============================================
   VISIBILITÉ & CONVERSIONS
   ============================================= */

/* --- Onglets VC --- */
.vc-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: var(--shadow-sm);
}

.vc-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vc-tab:hover {
    color: var(--violet);
    background: var(--gray-50);
}

.vc-tab.active {
    background: var(--gradient);
    color: var(--white);
}

.vc-tab-content {
    display: none;
}

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

/* --- Sélection période --- */
.vc-period-form {
    margin: 0;
}

.vc-period-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vc-period-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vc-period-group label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-700);
    white-space: nowrap;
}

.vc-period-group select {
    width: auto;
    min-width: 120px;
}

.vc-period-vs {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--violet);
    background: var(--gray-100);
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* --- Grille des métriques principales --- */
.vc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.vc-metric-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-left: 4px solid var(--violet);
}

.vc-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(36, 88, 104, 0.1), rgba(76, 164, 164, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--violet);
    flex-shrink: 0;
}

.vc-metric-body {
    flex: 1;
    min-width: 0;
}

.vc-metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.vc-metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
    margin-bottom: 6px;
}

.vc-metric-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vc-metric-comp-val {
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* --- Variations up/down/neutral --- */
.vc-variation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.vc-variation-up {
    color: #1B5E20;
    background: rgba(76, 175, 80, 0.12);
}

.vc-variation-down {
    color: #C62828;
    background: rgba(244, 67, 54, 0.12);
}

.vc-variation-neutral {
    color: var(--gray-600);
    background: var(--gray-100);
}

/* --- Grille conversions --- */
.vc-conv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.vc-conv-card {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.vc-conv-card:hover {
    border-color: var(--violet);
    box-shadow: var(--shadow-sm);
}

.vc-conv-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-conv-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 6px;
}

.vc-conv-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vc-comp-val {
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* --- Grille inputs conversions saisie --- */
.vc-conv-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* --- Responsive VC --- */
@media (max-width: 768px) {
    .vc-tabs {
        flex-direction: column;
    }

    .vc-metrics-grid {
        grid-template-columns: 1fr;
    }

    .vc-period-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-period-vs {
        align-self: center;
    }

    .vc-conv-grid {
        grid-template-columns: 1fr 1fr;
    }

    .vc-metric-value {
        font-size: 1.4rem;
    }
}

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

    .vc-conv-input-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   NEW SITE WEB - Arborescence (Tree)
   ============================================= */

/* --- Légende --- */
.sw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.sw-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* --- Status dots --- */
.sw-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sw-status-red {
    background: #E53935;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
}

.sw-status-orange {
    background: #FF9800;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

.sw-status-violet {
    background: var(--violet);
    box-shadow: 0 0 0 3px rgba(36, 88, 104, 0.2);
}

.sw-status-green {
    background: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.sw-status-rose {
    background: #E91E63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.2);
}

.sw-status-blue {
    background: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.sw-status-yellow {
    background: #FFC107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

/* --- NRJ toggle view --- */
.nrj-toggle-view {
    transition: all 0.2s ease;
}
.nrj-toggle-view.active {
    background: var(--violet);
    color: #fff;
}

/* --- Tree container --- */
.sw-tree-container {
    overflow-x: auto;
    padding: 24px;
}

.sw-tree {
    display: inline-flex;
    align-items: flex-start;
    min-width: fit-content;
}

/* --- Tree list structure (horizontal left-to-right) --- */
.sw-tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Children list: placed to the right of parent */
.sw-tree-item > .sw-tree-list {
    margin-left: 24px;
    padding-left: 24px;
    position: relative;
}

/* Vertical line connecting children */
.sw-tree-item > .sw-tree-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: var(--gray-300);
}

/* Items */
.sw-tree-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* Horizontal branch connector from parent's vertical line to child node */
.sw-tree-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 22px;
    width: 24px;
    height: 2px;
    background: var(--gray-300);
}

/* No connector on root items */
.sw-tree > .sw-tree-list > .sw-tree-item::before {
    display: none;
}

/* --- Drag & Drop styles --- */
.sw-tree-item.sw-dragging {
    opacity: 0.35;
}

.sw-tree-item.sw-dragging .sw-tree-node {
    transform: scale(0.95);
}

/* Noeud survolé en mode "devenir enfant" */
.sw-tree-node.sw-drag-over-node {
    border-color: var(--violet) !important;
    box-shadow: 0 0 0 3px rgba(36, 88, 104, 0.25) !important;
    background: rgba(36, 88, 104, 0.05) !important;
}

/* Indicateur de drop (ligne violette positionnée en absolu dans le body) */
.sw-drop-indicator {
    position: absolute;
    height: 3px;
    background: var(--violet);
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(36, 88, 104, 0.4);
}

/* Handle de drag */
.sw-tree-node .sw-drag-handle {
    cursor: grab;
    color: var(--gray-400);
    font-size: 0.75rem;
    padding: 2px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.sw-tree-node .sw-drag-handle:active {
    cursor: grabbing;
}

.sw-tree-node:hover .sw-drag-handle {
    color: var(--violet);
}

/* Clone visuel pendant le drag */
.sw-drag-clone {
    padding: 8px 14px;
    font-size: 0.92rem;
    border: 2px solid var(--violet);
}

/* Empêcher la sélection de texte pendant le drag */
body.sw-is-dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* --- Tree node (card) --- */
.sw-tree-node {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    margin: 6px 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.sw-tree-node:hover {
    border-color: var(--violet);
    box-shadow: 0 4px 12px rgba(36, 88, 104, 0.15);
    transform: translateY(-1px);
}

.sw-node-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--black);
}

/* --- SEO info wrapper --- */
.sw-node-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.sw-seo-star {
    color: #f1c453;
    font-size: 0.7rem;
    margin-left: 4px;
}
.sw-seo-keyword {
    display: block;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--gray-500);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

/* --- SEO section in edit form --- */
.sw-seo-section {
    border-top: 2px solid var(--gray-200);
    padding-top: 20px;
    margin-top: 20px;
}
.sw-seo-section h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--violet);
    margin-bottom: 16px;
}

/* --- Liens (web, comment) --- */
.sw-node-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.7rem;
    color: var(--white);
    background: var(--bleu);
    transition: all 0.2s;
    text-decoration: none;
    flex-shrink: 0;
}

.sw-node-link:hover {
    transform: scale(1.15);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(68, 202, 230, 0.4);
}

.sw-node-link.sw-node-comment {
    background: var(--jaune);
    color: var(--black);
}

.sw-node-link.sw-node-comment:hover {
    color: var(--black);
    box-shadow: 0 2px 8px rgba(248, 175, 66, 0.4);
}

/* --- Delete button --- */
.sw-node-delete {
    display: inline;
}

.sw-node-action-btn {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    font-size: 0.7rem;
    transition: all 0.2s;
    border-radius: 4px;
}

.sw-node-action-btn:hover {
    color: var(--violet);
    background: rgba(36, 88, 104, 0.1);
}

.sw-node-action-done {
    color: var(--success, #4caf50);
    padding: 4px;
    font-size: 0.7rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.sw-node-action-done:hover {
    background: rgba(76, 175, 80, 0.1);
    color: var(--success, #4caf50);
}

/* Workflow badges et boutons sur l'arbre NEW Site Web */
.sw-wf-btn {
    width: 24px; height: 24px; border-radius: 6px; border: 1px solid #ddd;
    background: #fff; color: #999; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem; transition: all 0.15s; vertical-align: middle;
}
.sw-wf-btn:hover { border-color: #999; color: #555; transform: scale(1.1); }
.sw-wf-full { background: linear-gradient(135deg, #E4F1F1, #E8F2F2); border-color: #CE93D8; color: #7B1FA2; }
.sw-wf-full:hover { background: #E1BEE7; border-color: #6BB5B5; }
.sw-wf-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    font-size: 0.6rem; text-decoration: none; transition: all 0.15s; vertical-align: middle;
}
.sw-wf-badge:hover { transform: scale(1.1); opacity: 0.85; }
.sw-wf-nrj {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-left: 2px;
}

/* ---- NRJ Action Icons ---- */
.nrj-action-link {
    color: var(--success, #4caf50);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
}
.nrj-action-link:hover {
    color: var(--success, #388e3c);
    transform: scale(1.2);
}
.nrj-action-none {
    color: var(--gray-300, #D1D5DB);
    font-size: 0.85rem;
}

/* ---- Sidebar SVG Icons ---- */
.sidebar-icon-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}
.sidebar.collapsed .sidebar-icon-svg {
    width: 22px;
    height: 22px;
}
.sidebar-star-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(255, 175, 30, 0.4));
}
.sidebar.collapsed .sidebar-star-icon {
    width: 22px;
    height: 22px;
}

/* Dashboard SVG Icons */
.dashboard-card-icon img.dashboard-icon-svg {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ---- Rich Text Editor (Rapport SEO) ---- */
.richtext-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}
.richtext-toolbar button {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-700);
    transition: all 0.15s;
}
.richtext-toolbar button:hover {
    background: var(--gray-200);
    color: var(--violet);
}
.richtext-editor {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 100px;
    background: white;
    line-height: 1.6;
    font-size: 0.9rem;
    color: var(--gray-800);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.richtext-editor:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(36, 88, 104, 0.1);
}
.richtext-editor ul, .richtext-editor ol {
    padding-left: 20px;
    margin: 8px 0;
}
.richtext-editor li {
    margin-bottom: 4px;
}

/* Toggle rapport actif */
.rapport-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #EEF6F6 0%, #fef3e7 100%);
    border-radius: 10px;
    margin-bottom: 20px;
}
.rapport-toggle-row label {
    font-weight: 700;
    color: var(--violet);
    margin: 0;
}

.sidebar-seo-nrj {
    position: relative;
}
.sidebar-seo-nrj:not(.active) {
    background: linear-gradient(135deg, rgba(36, 88, 104, 0.06), rgba(248, 175, 66, 0.08));
    border-left: 3px solid #F8AF42;
    font-weight: 700;
}
.sidebar-seo-nrj:not(.active):hover {
    background: linear-gradient(135deg, rgba(36, 88, 104, 0.1), rgba(248, 175, 66, 0.14));
}
.sidebar-seo-nrj.active .sidebar-star-icon {
    filter: brightness(1.3) drop-shadow(0 1px 3px rgba(255, 255, 255, 0.5));
}

/* ---- SEO NRJ WEB Hub Navigation Cards ---- */
.seo-nrj-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.seo-nrj-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    padding: 28px 20px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.seo-nrj-nav-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.3s ease;
}

.seo-nrj-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    color: #fff;
}

.seo-nrj-nav-card:hover::before {
    background: rgba(255,255,255,0.08);
}

/* Gradient Violet */
.seo-nrj-nav-violet {
    background: linear-gradient(135deg, #7B2FBF, #245868, #3D1070);
}
.seo-nrj-nav-violet:hover {
    box-shadow: 0 8px 30px rgba(36, 88, 104, 0.35);
}

/* Gradient Jaune-Orangé */
.seo-nrj-nav-jaune {
    background: linear-gradient(135deg, #F8AF42, #F59E0B, #E67E22);
}
.seo-nrj-nav-jaune:hover {
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.35);
}

/* Gradient Bleu */
.seo-nrj-nav-bleu {
    background: linear-gradient(135deg, #44CAE6, #37AFC8);
}
.seo-nrj-nav-bleu:hover {
    box-shadow: 0 8px 30px rgba(55, 175, 200, 0.35);
}

.seo-nrj-nav-turquoise {
    background: linear-gradient(135deg, #00BCD4, #00838F);
}
.seo-nrj-nav-turquoise:hover {
    box-shadow: 0 8px 30px rgba(0, 188, 212, 0.35);
}

.seo-nrj-nav-magenta {
    background: linear-gradient(135deg, #B91FAF, #4CA4A4, #7B1280);
}
.seo-nrj-nav-magenta:hover {
    box-shadow: 0 8px 30px rgba(76, 164, 164, 0.35);
}

.seo-nrj-nav-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.seo-nrj-nav-icon i {
    color: #fff;
    font-size: 1.4rem;
}

.seo-nrj-nav-icon-svg {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.seo-nrj-nav-label {
    font-weight: 800;
    font-size: 1.05rem;
    font-family: var(--font-title, 'Nunito', sans-serif);
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.seo-nrj-nav-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.seo-nrj-section-title {
    font-family: var(--font-title, 'Nunito', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-700, #374151);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gray-200, #E5E7EB);
    display: flex;
    align-items: center;
    gap: 8px;
}

.seo-nrj-section-title i {
    color: var(--violet, #245868);
}

@media (max-width: 768px) {
    .seo-nrj-nav-grid {
        grid-template-columns: 1fr;
    }
    .seo-nrj-nav-card {
        padding: 20px 14px;
    }
}

.sw-node-delete-btn {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    font-size: 0.7rem;
    transition: all 0.2s;
    border-radius: 4px;
}

.sw-node-delete-btn:hover {
    color: var(--danger);
    background: rgba(244, 67, 54, 0.1);
}

/* --- Responsive tree --- */
@media (max-width: 768px) {
    .sw-tree-container {
        padding: 16px 8px;
    }

    .sw-tree-node {
        padding: 8px 12px;
        gap: 8px;
    }

    .sw-node-title {
        font-size: 0.82rem;
    }

    .sw-legend {
        gap: 12px;
    }

    .sw-tree-item > .sw-tree-list {
        margin-left: 16px;
        padding-left: 16px;
    }

    .sw-tree-item::before {
        left: -16px;
        width: 16px;
    }
}

/* =============================================
   TUTORIAL / ONBOARDING
   ============================================= */
.tutorial-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.tutorial-overlay.visible {
    display: block;
    opacity: 1;
}

.tutorial-spotlight {
    display: none;
    position: fixed;
    z-index: 9999;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.tutorial-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 0;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 12px 40px rgba(36, 88, 104, 0.3);
    border: 2px solid var(--violet);
    animation: tutorialFadeIn 0.3s ease;
}

.tutorial-tooltip.visible { display: block; }

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

.tutorial-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 0;
}

.tutorial-step-counter {
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tutorial-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
    transition: all var(--transition);
}

.tutorial-close:hover {
    color: var(--danger);
    background: #FFEBEE;
}

.tutorial-tooltip-title {
    padding: 8px 16px 0;
    font-size: 1.15rem;
    color: var(--violet);
    font-family: var(--font-title);
}

.tutorial-tooltip-text {
    padding: 8px 16px 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.tutorial-tooltip-footer {
    display: flex;
    justify-content: space-between;
    padding: 0 16px 16px;
    gap: 8px;
}

body.tutorial-active { overflow: hidden; }

.tutorial-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--white);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(36, 88, 104, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.tutorial-fab:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 6px 24px rgba(36, 88, 104, 0.5);
}

.tutorial-fab i { color: var(--jaune); }

@media (max-width: 1024px) {
    .tutorial-tooltip { width: 300px; }
    .tutorial-fab {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}

/* ============================================
   SERVICES JDW - Catalogue
   ============================================ */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
.svc-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.svc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--violet); }
.svc-card.svc-dragging { opacity: 0.4; }
.svc-card.svc-drag-over { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(123,44,143,0.15); }
.svc-drag-handle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
    color: var(--gray-400);
    cursor: grab;
    font-size: 0.85rem;
}
.svc-drag-handle:hover { color: var(--violet); background: var(--white); }
.svc-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.svc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.svc-card-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--gray-300);
    font-size: 2.5rem;
}
.svc-card-body { padding: 16px; }
.svc-card-header-row { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 6px; }
.svc-card-title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--gray-800); }
.svc-card-desc { font-size: 0.83rem; color: var(--gray-500); margin: 0 0 8px; line-height: 1.4; }
.svc-card-price { font-size: 1.05rem; font-weight: 700; color: var(--violet); margin-bottom: 8px; }
.svc-card-badges { display: flex; gap: 6px; flex-shrink: 0; }
.svc-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.svc-badge-oneshot { background: #FFF3D0; color: #9A7A1E; }
.svc-badge-recurrent { background: #F0E4F5; color: #2F6F79; }
.svc-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--danger);
    text-decoration: none;
}
.svc-pdf-link:hover { text-decoration: underline; }
.svc-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

/* Formules dans la carte service */
.svc-formules { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.svc-formules-title { font-size: 0.8rem; font-weight: 700; color: var(--gray-600); margin: 0 0 8px; }
.svc-formule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
    position: relative;
}
.svc-formule-item:hover { background: var(--gray-50); }
.svc-formule-item.svc-dragging { opacity: 0.4; }
.svc-formule-item.svc-drag-over { background: rgba(123,44,143,0.06); }
.svc-formule-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.svc-formule-icon-empty {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.svc-formule-info { flex: 1; min-width: 0; }
.svc-formule-name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); }
.svc-formule-desc { display: block; font-size: 0.75rem; color: var(--gray-400); }
.svc-formule-price { font-size: 0.85rem; font-weight: 700; color: var(--violet); white-space: nowrap; }
.svc-formule-delete { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.svc-formule-delete-btn {
    background: none;
    border: none;
    color: var(--gray-300);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 4px;
}
.svc-formule-delete-btn:hover { color: var(--danger); }

/* Formules dans la page edit */
.svc-formules-edit-list { display: flex; flex-direction: column; gap: 8px; }
.svc-formule-edit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 8px;
}
.svc-formule-edit-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}
.svc-formule-edit-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ============================================
   DEVIS CONFIG
   ============================================ */
.devis-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.devis-config-header { display: flex; gap: 12px; align-items: start; margin-bottom: 16px; }
.devis-config-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F0FFF4;
    border-radius: 8px;
    margin-bottom: 8px;
}
.devis-config-file-link {
    flex: 1;
    color: var(--danger);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.devis-config-file-link:hover { text-decoration: underline; }
.devis-config-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 8px;
    color: var(--gray-400);
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.devis-config-empty i { font-size: 1.5rem; }

/* ============================================
   WIZARD - Barre de progression
   ============================================ */
.wizard-steps {
    display: flex;
    gap: 4px;
    background: var(--gray-100);
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 24px;
}
.wizard-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--gray-500);
    transition: all 0.2s;
}
.wizard-step.active {
    background: linear-gradient(135deg, #2F6F79, #3A8F92);
    color: var(--white);
    font-weight: 700;
}
.wizard-step.completed {
    background: var(--white);
    color: var(--violet);
}
a.wizard-step {
    cursor: pointer;
}
a.wizard-step:hover:not(.active) {
    background: var(--gray-50, #F9FAFB);
    opacity: 0.85;
}
.wizard-step-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--gray-200);
    color: var(--gray-500);
    flex-shrink: 0;
}
.wizard-step.active .wizard-step-number {
    background: rgba(255,255,255,0.25);
    color: var(--white);
}
.wizard-step.completed .wizard-step-number {
    background: var(--violet);
    color: var(--white);
}
.wizard-step-label { white-space: nowrap; }
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1.5px solid var(--gray-100);
}

/* ============================================
   DEVIS - Sélection services (étape 2)
   ============================================ */
.devis-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}
.devis-svc-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.devis-svc-card.selected {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(123,44,143,0.1);
}
.devis-svc-image { width: 100%; height: 140px; overflow: hidden; }
.devis-svc-image img { width: 100%; height: 100%; object-fit: cover; }
.devis-svc-body { padding: 14px 16px; }
.devis-svc-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 4px; }
.devis-svc-desc { font-size: 0.8rem; color: var(--gray-500); margin: 0 0 8px; }
.devis-svc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.devis-svc-check { cursor: pointer; flex-shrink: 0; }
.devis-svc-check input { display: none; }
.devis-svc-check-visual {
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-300);
    border-radius: 6px;
    position: relative;
    transition: all 0.2s;
}
.devis-svc-check input:checked + .devis-svc-check-visual {
    background: var(--violet);
    border-color: var(--violet);
}
.devis-svc-check input:checked + .devis-svc-check-visual::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 0.7rem;
}
.devis-svc-formules { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-100); }
.devis-formule-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.83rem;
}
.devis-formule-option:hover { background: var(--gray-50); }
.devis-formule-icon { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
.devis-formule-name { flex: 1; font-weight: 600; color: var(--gray-700); }
.devis-formule-price { font-weight: 700; color: var(--violet); white-space: nowrap; }
.devis-svc-optional { margin-top: 8px; }

/* ============================================
   DEVIS - Bottom price bar (étape 2)
   ============================================ */
.devis-price-bar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #2F6F79, #3A8F92);
    border-radius: 12px;
    margin-top: 20px;
    color: var(--white);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.price-item { text-align: center; }
.price-label { display: block; font-size: 0.7rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.price-value { display: block; font-size: 1.1rem; font-weight: 800; }

/* ============================================
   DEVIS - Synthèse financière (étape 4)
   ============================================ */
.financial-table { border-collapse: collapse; width: 100%; }
.financial-table th {
    padding: 10px 14px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    border-bottom: 2px solid var(--gray-200);
    font-weight: 700;
}
.financial-table td { padding: 10px 14px; border-bottom: 1px solid var(--gray-100); font-size: 0.85rem; }
.financial-table tfoot td { border-top: 2px solid var(--gray-200); border-bottom: none; font-size: 0.9rem; }
.fin-input {
    padding: 4px 6px !important;
    font-size: 0.83rem !important;
    border-radius: 6px !important;
    min-height: unset !important;
    height: 32px !important;
    display: inline-block !important;
}

/* ============================================
   MODAL PDF (styles spécifiques uniquement)
   ============================================ */
.modal-content { background: var(--white); border-radius: 12px; padding: 16px; width: 90%; max-width: 900px; position: relative; }
.modal-pdf { max-height: 90vh; }

/* ============================================
   BTN SUCCESS / DANGER
   ============================================ */
.btn-success {
    background: #28a745;
    color: var(--white);
    border-color: #28a745;
}
.btn-success:hover { background: #218838; border-color: #1e7e34; }
.btn-danger {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}
.btn-danger:hover { background: #c0392b; border-color: #c0392b; }

/* ============================================
   SIDEBAR SUBMENU (Configuration, Emails)
   ============================================ */
.sidebar-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-submenu-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    margin: 10px 0 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-500);
    transition: background var(--transition), color 0.2s;
    user-select: none;
    border-radius: var(--radius-sm);
}
.sidebar-submenu-toggle:hover {
    background: var(--gray-100);
    color: var(--primary);
}
.sidebar-submenu-arrow {
    margin-left: auto;
    font-size: 0.55rem;
    transition: transform 0.25s ease;
    color: var(--gray-400);
}
.sidebar-submenu-toggle.collapsed .sidebar-submenu-arrow {
    transform: rotate(-90deg);
}
.sidebar-submenu-items {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-submenu-items.collapsed {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
/* Sidebar collapsed (icônes) : masquer les headers, tout afficher */
.sidebar.collapsed .sidebar-submenu-toggle {
    display: none;
}
.sidebar.collapsed .sidebar-submenu-items {
    max-height: none !important;
    opacity: 1;
}

/* ============================================
   EMAIL TOAST NOTIFICATIONS (email-editor.js)
   ============================================ */
.email-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    z-index: 10000;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    max-width: 400px;
    pointer-events: none;
}
.email-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.email-toast-success {
    background: #059669;
}
.email-toast-error {
    background: #DC2626;
}
.email-toast-info {
    background: #245868;
}
.email-toast-warning {
    background: #D97706;
}

/* ============================================
   EMAIL EDITOR - Property panel extras
   (classes generated by email-editor.js)
   ============================================ */
.email-prop-group {
    margin-bottom: 12px;
}
.email-prop-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

/* =============================================
   ANCIEN SITE WEB: badges migration
   ============================================= */
.asw-assoc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--violet);
    background: rgba(36, 88, 104, 0.08);
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.asw-assoc-badge i {
    font-size: 0.6rem;
    flex-shrink: 0;
}

.asw-reprendre-badge {
    color: #4CAF50;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ============================================
   DEVIS - Lignes personnalisées (custom)
   ============================================ */
.btn-delete-custom {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity var(--transition);
    color: var(--danger);
    font-size: 1rem;
}
.btn-delete-custom:hover {
    opacity: 1;
}
.custom-row {
    background: rgba(36, 88, 104, 0.03);
}
.custom-row td input.form-control {
    padding: 4px 8px;
    font-size: 0.85rem;
    height: auto;
}

/* ============================================
   DEVIS - Services libres (étape 2)
   ============================================ */
.libre-service-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 120px 140px 80px 40px;
    gap: 10px;
    align-items: center;
}
.libre-service-item .form-control {
    padding: 6px 10px;
    font-size: 0.85rem;
}
.btn-delete-libre {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity var(--transition);
    color: var(--danger);
    font-size: 1rem;
}
.btn-delete-libre:hover {
    opacity: 1;
}

/* Ligne libre dans synthèse (étape 4) */
.libre-row {
    background: rgba(248, 175, 66, 0.04);
}

/* ============================================
   DEVIS - Ordre d'affichage
   ============================================ */
.sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    transition: box-shadow var(--transition);
}
.sort-item:hover {
    box-shadow: var(--shadow-sm);
}
.sort-item .sort-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    text-transform: uppercase;
    flex-shrink: 0;
}
.sort-badge-catalogue {
    background: var(--violet);
}
.sort-badge-libre {
    background: var(--jaune);
    color: var(--black);
}
.sort-item .sort-name {
    flex: 1;
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sort-item .sort-btn {
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.85rem;
    transition: background var(--transition);
    flex-shrink: 0;
}
.sort-item .sort-btn:hover {
    background: var(--gray-100);
}
.sort-item .sort-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ============================================
   Responsive adjustments
   ============================================ */
@media (max-width: 768px) {
    .svc-grid { grid-template-columns: 1fr; }
    .devis-services-grid { grid-template-columns: 1fr; }
    .devis-config-grid { grid-template-columns: 1fr; }
    .wizard-steps { flex-direction: column; }
    .wizard-step { padding: 8px 12px; }
    .wizard-step-label { font-size: 0.8rem; }
    .devis-price-bar { flex-direction: column; gap: 8px; padding: 12px 16px; }
    .price-item { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
    .price-label { text-align: left; }
    .financial-table th, .financial-table td { padding: 6px 8px; font-size: 0.75rem; }
    .libre-service-item { grid-template-columns: 1fr; }
}

/* =============================================
   POINTAGE (TIME TRACKING) — Phase 3
   ============================================= */

.pointage-week-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.pointage-week-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--black);
    font-family: var(--font-title);
}

.pointage-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.pointage-filters select {
    max-width: 250px;
}

.pointage-grid-wrapper {
    overflow-x: auto;
    margin-bottom: 24px;
}

.pointage-grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.pointage-grid thead th {
    background: #387E86;
    color: var(--white);
    padding: 12px 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-title);
}

.pointage-grid thead th:first-child {
    text-align: left;
    padding-left: 16px;
    min-width: 280px;
}

.pointage-task-col { min-width: 280px; }
.pointage-day-col { width: 80px; text-align: center; }
.pointage-total-col { width: 80px; text-align: center; font-weight: 700; }

.pointage-grid tbody td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--gray-200);
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pointage-grid tbody td:first-child {
    text-align: left;
    padding-left: 16px;
    cursor: default;
}

.pointage-grid tbody td:hover:not(:first-child):not(.pointage-client-header-cell) {
    background: #FFF3E0;
}

.pointage-grid tbody td.pointage-has-value {
    font-weight: 600;
    color: var(--black);
}

.pointage-grid tbody td.pointage-empty {
    color: #BDBDBD;
}

.pointage-day-zero {
    background: #FFEBEE !important;
    color: #F44336 !important;
    font-weight: 600;
}

.pointage-weekend {
    background: #FAFAFA;
    opacity: 0.7;
}

.pointage-totals-row td {
    font-weight: 700;
    background: #F5F5F5;
    border-top: 2px solid #E0E0E0;
}

.pointage-capacity-row td {
    font-size: 0.85rem;
    color: #757575;
    background: #F5F5F5;
}

.pointage-task-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pointage-task-name .task-type-icon {
    font-size: 0.75rem;
    opacity: 0.6;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 3px;
}
.pointage-task-info {
    display: flex;
    flex-direction: column;
}
.pointage-task-subtitle {
    font-size: 0.75rem;
    font-style: italic;
    color: #9E9E9E;
    line-height: 1.2;
}

.pointage-task-name .task-client-badge {
    font-size: 0.7rem;
    background: #EEEEEE;
    padding: 1px 6px;
    border-radius: 4px;
    color: #757575;
}

.pointage-task-name .task-projet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pointage-client-header td {
    background: #E4F1F1 !important;
    font-weight: 700;
    font-size: 0.85rem;
    color: #245868;
    padding: 6px 16px !important;
    cursor: default !important;
}

.pointage-row-total {
    font-weight: 700;
    color: #245868;
}

/* Admin synthesis grid */
.pointage-admin-grid {
    width: 100%;
    border-collapse: collapse;
}

.pointage-admin-grid thead th {
    padding: 12px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    background: #387E86;
    color: var(--white);
    font-family: var(--font-title);
}

.pointage-admin-grid thead th:first-child {
    text-align: left;
    padding-left: 16px;
}

.pointage-admin-grid tbody td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #E0E0E0;
    font-size: 0.9rem;
}

.pointage-admin-grid tbody td:first-child {
    text-align: left;
    padding-left: 16px;
    font-weight: 600;
}

.pointage-admin-grid tbody tr {
    cursor: pointer;
    transition: background 0.2s ease;
}

.pointage-admin-grid tbody tr:hover {
    background: #FFF3E0;
}

.pointage-gap-negative {
    color: #F44336;
    font-weight: 700;
}

.pointage-gap-positive {
    color: #4CAF50;
    font-weight: 700;
}

.pointage-gap-zero {
    color: #9E9E9E;
}

/* Phase 4: Locked week styles */
.pointage-locked {
    cursor: default !important;
    opacity: 0.6;
}

.pointage-locked:hover {
    background: inherit !important;
}

/* Quick add form in action_view / support_view */
.pointage-quick-add .form-row {
    display: grid;
    grid-template-columns: 130px 100px 160px 1fr auto;
    align-items: end;
    gap: 12px;
}

.pointage-entry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.85rem;
}

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

.pointage-entry-date { width: 80px; color: #757575; }
.pointage-entry-user { width: 120px; font-weight: 600; }
.pointage-entry-duration { width: 60px; font-weight: 700; color: #245868; }
.pointage-entry-type {
    font-size: 0.75rem;
    background: #E4F1F1;
    padding: 2px 8px;
    border-radius: 10px;
    color: #245868;
}
.pointage-entry-desc { flex: 1; color: #757575; }
.pointage-entry-delete {
    color: #F44336;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.pointage-entry-delete:hover { opacity: 1; }

/* Mobile view */
.pointage-mobile {
    display: none;
}

.pointage-mobile-daynav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 700;
    font-family: var(--font-title);
}

.pointage-mobile-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

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

.pointage-mobile-card .task-info {
    flex: 1;
}

.pointage-mobile-card .task-info .task-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.pointage-mobile-card .task-info .task-meta {
    font-size: 0.8rem;
    color: #757575;
}

.pointage-mobile-card .task-duration {
    font-size: 1.2rem;
    font-weight: 700;
    color: #245868;
    min-width: 60px;
    text-align: right;
}

.pointage-mobile-total {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 12px;
    background: #F5F5F5;
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.pointage-add-task-row {
    text-align: center;
    padding: 12px 0;
}

.pointage-add-task-row button {
    font-size: 0.85rem;
}

/* Capacity indicator */
.pointage-capacity-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.pointage-capacity-bar .bar {
    flex: 1;
    height: 8px;
    background: #EEEEEE;
    border-radius: 4px;
    overflow: hidden;
    max-width: 200px;
}

.pointage-capacity-bar .bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.pointage-capacity-bar .bar-label {
    font-size: 0.85rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .pointage-grid-wrapper {
        display: none;
    }
    .pointage-mobile {
        display: block;
    }
    .pointage-filters {
        flex-direction: column;
    }
    .pointage-filters select {
        max-width: 100%;
    }
    .pointage-quick-add .form-row {
        grid-template-columns: 1fr;
    }
    .pointage-week-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =============================================
   CONGÉS
   ============================================= */

.conges-summary { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.conges-summary-card { background: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); flex: 1; min-width: 140px; }
.conges-summary-card .value { font-size: 1.5rem; font-weight: 700; }
.conges-summary-card .label { font-size: 0.8rem; color: #999; }

.conges-table { width: 100%; border-collapse: collapse; }
.conges-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #eee; font-size: 0.85rem; color: #666; }
.conges-table td { padding: 10px 12px; border-bottom: 1px solid #f5f5f5; font-size: 0.9rem; }
.conges-table tr:hover { background: #FAFAFA; }

.conges-type-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.conges-type-dot.conge { background: #E91E63; }
.conges-type-dot.maladie { background: #F44336; }
.conges-type-dot.rtt { background: #FF9800; }
.conges-type-dot.autre { background: #9E9E9E; }

.badge-en-attente { background: #FFF3E0; color: #E65100; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; display: inline-block; }
.badge-approuve { background: #E8F5E9; color: #2E7D32; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; display: inline-block; }
.badge-refuse { background: #FFEBEE; color: #C62828; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; display: inline-block; }

.conges-pending-card { background: #FFF8E1; border-left: 4px solid #E65100; border-radius: 8px; padding: 14px 18px; margin-bottom: 10px; }
.conges-pending-card .conge-user { font-weight: 700; margin-bottom: 4px; }
.conges-pending-card .conge-details { font-size: 0.85rem; color: #666; }
.conges-pending-card .conge-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.conges-admin-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: flex-end; }
.conges-admin-filters .form-group { margin-bottom: 0; }
.conges-admin-filters select,
.conges-admin-filters input[type="date"] { max-width: 200px; }

.conges-annual-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.conges-annual-card { background: #fff; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); min-width: 160px; }
.conges-annual-card .user-name { font-weight: 600; margin-bottom: 4px; }
.conges-annual-card .days-count { font-size: 1.2rem; font-weight: 700; color: #E91E63; }

.pointage-day-conge { background: #FCE4EC !important; }

@media (max-width: 768px) {
    .conges-summary { flex-direction: column; }
    .conges-admin-filters { flex-direction: column; }
    .conges-admin-filters select,
    .conges-admin-filters input[type="date"] { max-width: 100%; }
    .conges-table { font-size: 0.8rem; }
    .conges-table th, .conges-table td { padding: 8px 6px; }
}

/* === TOUTES TACHES === */
.all-tasks-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: flex-end; }
.all-tasks-filters .form-group { margin-bottom: 0; }
.all-tasks-filters select, .all-tasks-filters input[type="text"] { max-width: 200px; }
.all-tasks-group-btns { display: flex; gap: 6px; align-items: center; }
.all-tasks-group-btns .btn { font-size: 0.8rem; padding: 4px 10px; background: #f0f0f0; border: 1px solid #ddd; color: #666; }
.all-tasks-group-btns .btn.active { background: #245868; color: #fff; border-color: #245868; }

.task-type-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; display: inline-block; }
.task-type-badge.action { background: #E8F2F2; color: #245868; }
.task-type-badge.support { background: #E3F2FD; color: #1565C0; }
.task-internal-icon { color: #E67E22; font-size: 0.75rem; margin-left: 4px; }

.progress-bar-mini { height: 6px; border-radius: 3px; background: #eee; overflow: hidden; min-width: 60px; }
.progress-bar-mini .fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.progress-bar-mini .fill.green { background: #4CAF50; }
.progress-bar-mini .fill.orange { background: #FF9800; }
.progress-bar-mini .fill.red { background: #F44336; }

.task-group-header { background: #f8f9fa; padding: 10px 16px; font-weight: 700; border-bottom: 2px solid #eee; font-size: 0.9rem; }
.task-group-header .group-count { color: #999; font-weight: 400; margin-left: 8px; }

/* === DASHBOARD ADMIN ENRICHI === */
.dash-admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.dash-admin-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; transition: transform 0.15s; }
.dash-admin-card:hover { transform: translateY(-2px); }
.dash-admin-card .card-value { font-size: 2rem; font-weight: 700; color: #333; }
.dash-admin-card .card-label { font-size: 0.85rem; color: #999; margin-top: 4px; }
.dash-admin-card.danger .card-value { color: #F44336; }
.dash-admin-card.warning .card-value { color: #FF9800; }

.dash-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-admin-col { display: flex; flex-direction: column; gap: 20px; }

.dashboard-section { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.dashboard-section h3 { font-size: 1rem; font-weight: 700; margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px; }
.dashboard-section h3 i { font-size: 0.9rem; }

.dashboard-task-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; border-radius: 6px; }
.dashboard-task-item:hover { background: #FAFAFA; margin: 0 -12px; padding: 10px 12px; }
.dashboard-task-item:last-child { border-bottom: none; }
.dashboard-task-item .task-client { font-size: 0.75rem; color: #999; }
.dashboard-task-item .task-title { font-weight: 600; font-size: 0.9rem; }

.charge-bar { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.charge-bar .collab-name { width: 120px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.charge-bar .bar-container { flex: 1; height: 20px; background: #eee; border-radius: 10px; overflow: hidden; }
.charge-bar .bar-fill { height: 100%; border-radius: 10px; transition: width 0.3s; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 0.7rem; color: #fff; font-weight: 600; min-width: 10px; }
.charge-bar .bar-fill.green { background: #4CAF50; }
.charge-bar .bar-fill.orange { background: #FF9800; }
.charge-bar .bar-fill.red { background: #F44336; }
.charge-bar .charge-label { font-size: 0.8rem; color: #666; width: 100px; text-align: right; }

/* Alertes temps — design amélioré */
.alert-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 6px;
    border-radius: 8px; background: #FAFAFA;
    border-left: 3px solid #E0E0E0;
    transition: all 0.15s;
}
.alert-item:hover { background: #F5F5F5; transform: translateX(2px); }
.alert-item:last-child { margin-bottom: 0; }
.alert-item .alert-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; flex-shrink: 0;
}
.alert-item .alert-icon.orange { color: #E65100; background: #FFF3E0; }
.alert-item .alert-icon.red { color: #C62828; background: #FFEBEE; }
.alert-item .alert-info { flex: 1; min-width: 0; }
.alert-item .alert-title { font-weight: 600; font-size: 0.85rem; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-item .alert-detail { font-size: 0.75rem; color: #888; margin-top: 1px; }

/* Pointages du jour */
.pj-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; margin-bottom: 4px;
    border-radius: 6px; background: #FAFAFA;
    font-size: 0.82rem; transition: background 0.15s;
}
.pj-entry:hover { background: #F0F0F0; }
.pj-duration { font-weight: 700; color: #333; min-width: 42px; }
.pj-task { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }
.pj-type { font-size: 0.68rem; color: #888; background: #EFEFEF; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pj-client { font-size: 0.68rem; color: #245868; white-space: nowrap; }
.pj-edit-btn {
    width: 22px; height: 22px; border-radius: 4px; border: 1px solid #E0E0E0;
    background: #fff; cursor: pointer; font-size: 0.6rem; color: #999;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.pj-edit-btn:hover { color: #245868; border-color: #245868; background: #E4F1F1; }

.missing-validation-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f5f5f5; }
.missing-validation-item:last-child { border-bottom: none; }
.badge-non-valide { background: #FFF3E0; color: #E65100; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }

/* === DASHBOARD V2 - KPI ROW === */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.dash-kpi {
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 4px solid #245868;
}
.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.dash-kpi.danger { border-left-color: #F44336; }
.dash-kpi.warning { border-left-color: #FF9800; }
.dash-kpi.question { border-left-color: #283593; }
.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #EDF5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #245868;
    flex-shrink: 0;
}
.dash-kpi.danger .kpi-icon { background: #FDECEA; color: #F44336; }
.dash-kpi.warning .kpi-icon { background: #FFF8E1; color: #FF9800; }
.dash-kpi.question .kpi-icon { background: #E8EAF6; color: #283593; }
.kpi-body { flex: 1; min-width: 0; }
.kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: #222;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-kpi.danger .kpi-value { color: #F44336; }
.dash-kpi.warning .kpi-value { color: #E65100; }
.dash-kpi.question .kpi-value { color: #283593; }
.kpi-label {
    font-size: 0.82rem;
    color: #888;
    margin-top: 2px;
    font-weight: 500;
}

/* === DASHBOARD V2 - SOUS-SECTIONS === */
.dash-subsection {
    margin-bottom: 18px;
}
.dash-subsection:last-child {
    margin-bottom: 0;
}
.dash-subsection-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.dash-subsection-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
    cursor: pointer;
}
.dash-subsection-link:hover {
    color: #245868;
}

/* Indicateurs de contenu (description / pièces jointes) */
.task-indicators {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    vertical-align: middle;
}
.task-ind {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.15s;
    font-weight: 600;
}
.task-ind:hover {
    transform: scale(1.08);
}
.task-ind i {
    font-size: 0.65rem;
}
.task-ind-count {
    font-size: 0.65rem;
    font-weight: 700;
}
.task-ind.has-content.ind-desc {
    color: #1565C0;
    background: #E3F2FD;
}
.task-ind.has-content.ind-desc:hover {
    background: #BBDEFB;
}
.task-ind.has-content.ind-att {
    color: #E65100;
    background: #FFF3E0;
}
.task-ind.has-content.ind-att:hover {
    background: #FFE0B2;
}

/* === DASHBOARD V2 - BADGES === */
.dash-date-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: #999;
    margin-left: auto;
    text-transform: capitalize;
}
.dash-badge-week {
    font-size: 0.7rem;
    font-weight: 700;
    color: #245868;
    background: #EDF5F5;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}
.dash-badge-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #245868;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
}
.dash-badge-count.danger { background: #F44336; }
.dash-badge-count.warning { background: #FF9800; }
.dash-badge-count.question { background: #283593; }
.dash-badge-urgent {
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: #F44336;
    padding: 1px 7px;
    border-radius: 8px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === DASHBOARD V2 - TIMELINE === */
.dash-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.15s;
    position: relative;
}
.dash-timeline-item:hover {
    background: #F8F6FB;
}
.dash-timeline-time {
    font-size: 0.78rem;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    width: 100px;
    flex-shrink: 0;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}
.dash-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
    box-shadow: 0 0 0 3px rgba(36, 88, 104, 0.12);
}
.dash-timeline-content {
    flex: 1;
    min-width: 0;
}
.dash-timeline-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: #333;
    line-height: 1.3;
    display: flex;
    align-items: center;
}
.dash-timeline-sub {
    font-size: 0.78rem;
    color: #999;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === DASHBOARD V2 - RETARD === */
.dash-retard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}
.dash-retard-item:hover {
    background: #FFF5F5;
}
.dash-retard-item:last-child {
    border-bottom: none;
}
.dash-retard-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #F44336;
    background: #FDECEA;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* === DASHBOARD V2 - QUESTIONS JDW === */
.dash-question-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}
.dash-question-item:hover {
    background: #E8EAF6;
}
.dash-question-item:last-child {
    border-bottom: none;
}
.dash-question-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E8EAF6;
    color: #283593;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* === DASHBOARD V2 - CONGÉS === */
.dash-conge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}
.dash-conge-item:last-child {
    border-bottom: none;
}

/* === DASHBOARD V2 - COLLAPSIBLE SECTIONS === */
.dash-section-collapsible {
    /* inherits from .dashboard-section */
}
.dash-section-toggle {
    cursor: pointer;
    user-select: none;
    margin: 0 !important;
}
.dash-section-toggle:hover {
    opacity: 0.8;
}
.dash-toggle-icon {
    font-size: 0.75rem !important;
    color: #aaa;
    margin-left: auto !important;
    transition: transform 0.2s;
}
.dash-section-content {
    padding-top: 16px;
}

/* === DASHBOARD V2 - RESPONSIVE === */
@media (max-width: 900px) {
    .dash-kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .dash-kpi {
        padding: 14px 16px;
    }
    .kpi-value {
        font-size: 1.5rem;
    }
    .kpi-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .dash-timeline-time {
        width: 80px;
        font-size: 0.72rem;
    }
}

@media (max-width: 500px) {
    .dash-kpi-row {
        grid-template-columns: 1fr;
    }
    .dash-timeline-time {
        width: 60px;
        font-size: 0.68rem;
    }
}

/* === ALERTES TEMPS PAGE === */
.alertes-temps-legend { background: #f8f9fa; border-radius: 8px; padding: 10px 16px; margin-bottom: 20px; font-size: 0.82rem; color: #666; display: flex; gap: 20px; flex-wrap: wrap; }

/* === PROJET VIEW ENRICHI === */
.projet-alert-banner { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.projet-repartition-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }

@media (max-width: 768px) {
    .all-tasks-filters { flex-direction: column; }
    .all-tasks-filters select, .all-tasks-filters input[type="text"] { max-width: 100%; }
    .dash-admin-cards { grid-template-columns: repeat(2, 1fr); }
    .dash-admin-grid { grid-template-columns: 1fr; }
    .charge-bar .collab-name { width: 80px; }
}

/* =============================================
   NAVIGATION CONTEXTUELLE - BOUTONS TOP BAR
   ============================================= */

/* Tooltips stylisés (top bar) */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-text);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
[data-tooltip]:hover::after {
    opacity: 1;
}

/* Boutons top bar (admin) */
.btn-topbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-text);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    line-height: 1.3;
}
.btn-topbar:hover {
    opacity: 0.85;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
}
.btn-topbar i {
    font-size: 0.9rem;
    color: #FFFFFF;
}

/* Bouton settings / logout style transparent avec bordure */
.btn-topbar.btn-topbar-settings {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.5);
    padding: 5px 10px;
}
.btn-topbar.btn-topbar-settings:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.8);
    opacity: 1;
}

/* Toggle vue client */
.client-view-toggle-form {
    display: inline-flex;
    margin-left: 10px;
}
.btn-client-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    background: transparent;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-client-view-toggle:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.8);
}
.btn-client-view-toggle.active {
    background: #E67E22;
    border-color: #E67E22;
    color: #FFFFFF;
}
.btn-client-view-toggle.active:hover {
    background: #D35400;
    border-color: #D35400;
}

/* Bannière vue client */
.client-view-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #E67E22;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    text-align: center;
    z-index: 999;
    position: relative;
}
.client-view-banner-form {
    display: inline;
}
.client-view-banner-btn {
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.5);
    color: #FFFFFF;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.client-view-banner-btn:hover {
    background: rgba(255,255,255,0.4);
}

/* Avatar dans la top bar */
.top-bar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.top-bar-avatar:hover {
    border-color: rgba(255,255,255,0.9);
    text-decoration: none;
}
.top-bar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-bar-avatar i {
    font-size: 1.6rem;
    color: rgba(255,255,255,0.7);
}

/* =============================================
   AVATAR UPLOAD (profil + user_edit)
   ============================================= */
.avatar-upload-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #e0e0e0;
}
.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-preview i {
    font-size: 3rem;
    color: #ccc;
}

/* =============================================
   NO-SIDEBAR MODE
   ============================================= */
body.no-sidebar .sidebar {
    display: none;
}
body.no-sidebar .main-content {
    margin-left: 0 !important;
}
body.no-sidebar.sidebar-collapsed .main-content {
    margin-left: 0 !important;
}

/* =============================================
   SIDEBAR SECTION GROUPS (Paramètres)
   ============================================= */
.sidebar-header {
    padding: 0 0 4px 0;
}

.sidebar-section-group {
    margin-bottom: 16px;
}

.sidebar-section-subtitle {
    font-size: 0.65rem;
    font-weight: 700;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 12px 16px 4px 16px;
}

/* Quand un item sidebar est actif, forcer l'icône en blanc */
.sidebar-menu li a.active i {
    color: #fff !important;
}

.sidebar-section-group .sidebar-menu {
    margin-bottom: 0;
}

/* =============================================
   TOP BAR RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .btn-topbar .btn-text {
        display: none;
    }
    .btn-client-view-toggle .btn-text {
        display: none;
    }
    .btn-client-view-toggle {
        padding: 6px 10px;
    }
    .btn-topbar {
        padding: 6px 10px;
    }
    .top-bar-right {
        gap: 6px;
    }
}

@media (max-width: 768px) {
    .btn-topbar {
        padding: 5px 8px;
        font-size: 0.75rem;
    }
    .btn-topbar i {
        font-size: 0.85rem;
    }
    .top-bar-avatar {
        width: 30px;
        height: 30px;
    }
    .top-bar-right {
        gap: 4px;
    }
    .client-autocomplete-input {
        width: 150px;
        font-size: 0.8rem;
    }
    .client-autocomplete-input:focus {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .top-bar-avatar {
        width: 28px;
        height: 28px;
    }
}

/* =============================================
   TIME TRACKING UX — Smart Duration Input
   ============================================= */
.duration-preview {
    font-size: 0.75rem;
    min-height: 16px;
    margin-top: 2px;
    transition: color 0.2s;
}
.duration-preview.duration-valid {
    color: #4CAF50;
    font-weight: 600;
}
.duration-preview.duration-invalid {
    color: #F44336;
    font-weight: 600;
}

/* =============================================
   TIME TRACKING UX — Multi-entry modal
   ============================================= */
.te-existing-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
}
.te-entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.te-entry-row:hover {
    background: var(--gray-100);
}
.te-entry-row .te-dur {
    font-weight: 700;
    color: var(--violet);
    min-width: 50px;
}
.te-entry-row .te-type {
    color: var(--gray-600);
    font-size: 0.8rem;
}
.te-entry-row .te-desc {
    color: var(--gray-500);
    font-size: 0.75rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.te-entry-row .te-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.te-btn-edit, .te-btn-del {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: background 0.2s, color 0.2s;
}
.te-btn-edit {
    color: var(--info);
}
.te-btn-edit:hover {
    background: rgba(33,150,243,0.1);
}
.te-btn-del {
    color: var(--danger);
}
.te-btn-del:hover {
    background: rgba(244,67,54,0.1);
}
.te-entry-row.te-editing {
    background: #E3F2FD;
    border: 1px solid var(--info);
}
.te-separator {
    border: none;
    border-top: 1px dashed var(--gray-300);
    margin: 12px 0;
}
.te-total-badge {
    background: var(--violet);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}
.te-multi-dot {
    display: inline-block;
    background: var(--violet);
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    line-height: 16px;
    text-align: center;
    margin-left: 3px;
    vertical-align: middle;
}

/* =============================================
   TIME TRACKING UX — Quick Log Popover
   ============================================= */
.ql-popover {
    position: absolute;
    z-index: 10000;
    width: 240px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    border: 1px solid var(--gray-200);
    animation: qlPopIn 0.2s ease-out;
}
@keyframes qlPopIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ql-popover-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    overflow: hidden;
}
.ql-popover-arrow::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 1px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    transform: rotate(45deg);
}
.ql-popover-title {
    padding: 10px 14px 6px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--black);
    border-bottom: 1px solid var(--gray-100);
}
.ql-popover-body {
    padding: 10px 14px 14px;
}
.ql-popover-body .form-group {
    margin-bottom: 6px;
}
.ql-popover-body label {
    font-size: 0.75rem;
    margin-bottom: 2px;
    display: block;
    color: var(--gray-600);
}

/* =============================================
   TIME TRACKING UX — Quick Log Button
   ============================================= */
.btn-ql-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: #E67E22;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-ql-trigger:hover {
    background: #FFF3E0;
    border-color: #E67E22;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(230,126,34,0.25);
}
.btn-ql-trigger:active {
    transform: scale(0.95);
}

/* Bouton Terminer (réutilisable partout) */
.btn-dash-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gray-300, #ccc);
    background: #fff;
    color: #4CAF50;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-dash-done:hover {
    background: #E8F5E9;
    border-color: #4CAF50;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(76,175,80,0.25);
}
.btn-dash-done:active {
    transform: scale(0.95);
}

/* Pulse animation after save */
@keyframes qlSavedPulse {
    0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.5); }
    70% { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
.ql-saved-pulse {
    animation: qlSavedPulse 0.8s ease-out;
    background: #E8F5E9 !important;
    border-color: #4CAF50 !important;
    color: #4CAF50 !important;
}

/* =============================================
   FAB Time Tracking — Floating Button
   ============================================= */
.fab-timetrack {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E67E22, #F39C12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(230,126,34,0.4);
    z-index: 9998;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.fab-timetrack:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(230,126,34,0.5);
}
.fab-timetrack.active {
    transform: rotate(45deg) scale(1.1);
    background: linear-gradient(135deg, #F44336, #E91E63);
}
.fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--violet);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Pulse remind when 0h */
@keyframes fabPulseRemind {
    0%, 100% { box-shadow: 0 4px 16px rgba(230,126,34,0.4); }
    50% { box-shadow: 0 4px 24px rgba(230,126,34,0.7), 0 0 0 8px rgba(230,126,34,0.15); }
}
.fab-pulse-remind {
    animation: fabPulseRemind 3s infinite;
}

/* =============================================
   FAB Time Tracking — Popup
   ============================================= */
.fab-popup {
    position: fixed;
    bottom: 156px;
    right: 24px;
    width: 360px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    z-index: 9999;
    display: none;
    overflow: hidden;
    animation: fabPopupIn 0.3s ease-out;
}
.fab-popup.active {
    display: block;
}
@keyframes fabPopupIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.fab-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.fab-popup-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.fab-popup-close:hover {
    color: var(--danger);
}
.fab-popup-body {
    padding: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* FAB Sections */
.fab-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
}
.fab-section:last-child {
    border-bottom: none;
}
.fab-section-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fab-section-title i {
    margin-right: 4px;
    color: var(--violet);
}

/* FAB Recent tasks */
.fab-recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fab-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.fab-recent-item:hover {
    background: var(--gray-100);
}
.fab-recent-info {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fab-recent-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.fab-recent-client {
    font-size: 0.7rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fab-recent-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E67E22;
    background: #FFF3E0;
    color: #E67E22;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.fab-recent-btn:hover {
    background: #E67E22;
    color: #fff;
    transform: scale(1.1);
}

/* FAB Create action toggle */
.fab-create-toggle {
    background: var(--gray-100);
    border: 1px dashed var(--gray-400);
    color: var(--gray-600);
    font-size: 0.82rem;
    transition: all 0.2s;
}
.fab-create-toggle:hover {
    background: #FFF3E0;
    border-color: #E67E22;
    color: #E67E22;
}

/* FAB Success flash */
.fab-success-flash {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #C8E6C9;
    transition: opacity 0.3s;
}
.fab-success-flash i {
    margin-right: 4px;
}

/* FAB form labels */
.fab-popup-body .form-group label {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: 2px;
    display: block;
}

/* =============================================
   FAB — Mobile responsive
   ============================================= */
@media (max-width: 480px) {
    .fab-popup {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 140px;
    }
    .fab-timetrack {
        bottom: 80px;
        right: 16px;
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }
}

/* ============================================ */
/* NOTIFICATION SYSTEM                          */
/* ============================================ */

/* Bell button */
.notif-bell-wrap { display: inline-flex; align-items: center; position: relative; }
#btn-notif-bell {
    background: rgba(0,0,0,0.25);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#btn-notif-bell:hover {
    background: rgba(0,0,0,0.4);
}
.notif-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #F44336;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(244,67,54,0.4);
    animation: notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Bell dropdown */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 460px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid #E2EAEA;
}
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: #333;
}
.notif-mark-all {
    background: none;
    border: none;
    color: #245868;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.notif-mark-all:hover { background: #EDF5F5; }
.notif-dropdown-list {
    max-height: 380px;
    overflow-y: auto;
}

/* Notification item */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f8f8f8;
    transition: background 0.15s;
}
.notif-item:hover { background: #F5F9F9; }
.notif-item.notif-unread { background: #F3F0FF; }
.notif-item.notif-unread:hover { background: #EBE5FA; }
.notif-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EDF5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-sub {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-time {
    font-size: 0.7rem;
    color: #bbb;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Notification modal (manual send) */
.notif-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-modal-card {
    background: #fff;
    border-radius: 14px;
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}
.notif-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #f0f0f0;
}
.notif-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.notif-modal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.notif-modal-close:hover { color: #333; }
.notif-modal-body { padding: 18px 22px; }
.notif-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid #f0f0f0;
    background: #F5F9F9;
}

/* Mute button active state */
.btn-mute-active {
    background: #ECEFF1 !important;
    color: #78909C !important;
    border-color: #CFD8DC !important;
}

@media (max-width: 500px) {
    .notif-dropdown { width: 300px; right: -60px; }
    .notif-modal-card { width: 95vw; }
}


/* =============================================
   TABLEAU DE BORD — CLASSEMENTS CLIENTS (Top 10 défilants)
   ============================================= */
.top-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}
.top-card-head h3 {
    margin: 0;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
}
.top-count {
    font-family: var(--font-text);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--violet);
    background: var(--gray-100);
    border-radius: 20px;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Zone défilante : hauteur fixe pour garder des encarts alignés.
   Les ombres haut/bas n'apparaissent que s'il reste du contenu dans cette
   direction (dégradés "local" + "scroll" superposés, sans JavaScript). */
.top-list {
    /* 3 lignes complètes + un aperçu de la 4e, qui signale qu'il y a de la suite */
    height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    background:
        linear-gradient(var(--white) 40%, rgba(255,255,255,0)) top / 100% 22px no-repeat local,
        linear-gradient(rgba(255,255,255,0), var(--white) 88%) bottom / 100% 32px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(36,88,104,0.16), rgba(36,88,104,0)) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(36,88,104,0.16), rgba(36,88,104,0)) bottom / 100% 9px no-repeat scroll;
}
.top-list::-webkit-scrollbar { width: 6px; }
.top-list::-webkit-scrollbar-track { background: transparent; }
.top-list::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
.top-list:hover::-webkit-scrollbar-thumb { background: var(--violet-rose); }

.top-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 7px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 0.12s;
}
.top-row + .top-row { box-shadow: inset 0 1px 0 var(--gray-100); }
.top-row:hover { background: var(--gray-50); }
.top-row:hover .top-nom { color: var(--violet); }

.top-rang {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.top-rang.num {
    font-family: var(--font-title);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-600);
    background: var(--gray-100);
    border-radius: 50%;
}
.top-infos { flex: 1; min-width: 0; }
.top-nom {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s;
}
/* Le nom occupe toute la largeur ; la valeur est alignée à droite de la
   ligne de précision, ce qui évite de tronquer les noms de clients. */
.top-sub { display: flex; align-items: baseline; gap: 8px; }
.top-precision { font-size: 0.7rem; color: var(--gray-500); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-valeur { font-size: 0.85rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.top-note {
    font-size: 0.68rem;
    color: var(--gray-400);
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--gray-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-vide { font-size: 0.8rem; color: var(--gray-500); display: flex; align-items: center; height: 180px; }