/** * ============================================================================ * SYNAPSE THEME - VARIABLES CSS (CUSTOM PROPERTIES) * ============================================================================ * Palette alignée sur Charte_graphique_Synapse.md : * - Thème clair (défaut) -> palette "Logo clair" (bleu marine / bleu / gris) * - Thème sombre (data-theme="dark") -> palette "Logo sombre" * (bleu nuit / bleu profond / bleu électrique / cyan) * Le dégradé de marque (--gradient-brand) reprend l'exact dégradé de la * charte : #C34BFF → #7B6BFF → #2EA8FF → #16D7FF. * * THÈME SOMBRE : * Ajoutez l'attribut data-theme="dark" sur ou pour l'activer. * Aucune autre modification HTML n'est nécessaire. * * TYPOGRAPHIE : * Police recommandée par la charte : Space Grotesk (lisible en UI) avec * Sora en repli. Michroma (typo display très stylisée de la charte) est * réservée à un usage ponctuel (logo/wordmark) via --font-family-display, * trop peu lisible pour du texte d'interface courant. * -> Pensez à self-hoster ces polices en production plutôt que de dépendre * de l'import Google Fonts ci-dessous (perf + confidentialité). * * ACCESSIBILITÉ : * - Tailles de police en rem (respecte le zoom/les préférences navigateur). * - --color-primary-text est une variante plus foncée du bleu de marque, * utilisée pour le texte (liens, .text-primary) afin de respecter le * contraste AA sur fond clair. --color-primary reste utilisé pour les * fonds (boutons, badges). * - :focus-visible visible au clavier sur tous les éléments interactifs. * ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap'); :root { /* ---- Couleurs de marque (palette "Logo clair") ---- */ --color-primary: #3185FF; --color-primary-rgb: 49, 133, 255; --color-primary-hover: #1c6fe8; --color-primary-text: #1a5fc9; /* variante accessible pour texte sur fond clair */ --color-accent-violet: #814DFF; --color-accent-magenta: #A725FF; --color-accent-cyan: #17C9FF; /* Dégradé officiel de la charte, utilisé avec parcimonie (glow discret) */ --gradient-brand: linear-gradient(135deg, #C34BFF 0%, #7B6BFF 35%, #2EA8FF 70%, #16D7FF 100%); --color-sidebar-bg: #010821; /* bleu marine, sidebar toujours foncée */ /* ---- Couleurs de texte ---- */ --color-text: #111C42; /* bleu marine */ --color-text-secondary: #666A73; /* gris de la charte */ --color-text-tertiary: #52565f; /* ---- Couleurs de fond ---- */ --color-bg-page: #F3F5F8; /* blanc cassé de la charte */ --color-bg-card: #ffffff; --color-bg-subtle: #EDEFF4; --color-white: #ffffff; --color-white-rgb: 255, 255, 255; --color-black: #000000; --color-black-rgb: 0, 0, 0; /* Teinte de marque utilisée pour les ombres (plus douce qu'un noir pur) */ --color-shadow-rgb: 17, 28, 66; /* ---- Bordures & rayons (coins arrondis, comme demandé par la charte) ---- */ --color-border: #E1E4EC; --color-border-light: #ECEEF3; --border-radius: 6px; --border-radius-card: 12px; /* ---- Couleurs d'état (sémantique, indépendantes de la marque) ---- */ --color-success: #28a745; --color-success-hover: #218838; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #17a2b8; /* ---- Bouton secondaire (gris de marque) ---- */ --color-btn-secondary: #666A73; --color-btn-secondary-hover: #52565f; /* ---- Typographie (échelle en rem, base navigateur 16px) ---- */ --font-family-base: 'Space Grotesk', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-display: 'Michroma', 'Space Grotesk', sans-serif; /* réservé au wordmark/logo */ --font-size-2xs: 0.6875rem; /* 11px */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 0.875rem; /* 14px */ --font-size-lg: 1rem; /* 16px */ --font-size-card-header: 1.125rem; /* 18px */ --font-size-h3: 1.25rem; /* 20px */ --font-size-h2: 1.5rem; /* 24px */ --font-size-h1: 1.75rem; /* 28px */ /* ---- Espacements ---- */ --spacing-unit: 8px; --spacing-sm: 4px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* ---- Layout ---- */ --sidebar-width: 260px; --sidebar-width-collapsed: 70px; --header-height: 70px; /* ---- Composants ---- */ --btn-padding-y: 10px; --btn-padding-x: 20px; --input-padding-y: 10px; --input-padding-x: 12px; /* ---- Ombres (tokens d'élévation, teintées bleu marine) ---- */ --shadow-sm: 0 2px 4px rgba(var(--color-shadow-rgb), 0.06); --shadow-md: 0 4px 14px rgba(var(--color-shadow-rgb), 0.16); /* ---- Échelle z-index ---- */ --z-header: 999; --z-sidebar: 1000; --z-overlay: 1000; --z-dropdown: 1001; } /* ==================== THÈME SOMBRE (palette "Logo sombre" de la charte) ==================== */ [data-theme="dark"] { --color-primary: #2EA8FF; --color-primary-hover: #16D7FF; --color-primary-rgb: 46, 168, 255; --color-primary-text: #16D7FF; /* contraste élevé sur fond sombre */ --color-text: #F3F5F8; --color-text-secondary: #9AA5BD; --color-text-tertiary: #C3CADC; --color-bg-page: #071326; /* bleu nuit */ --color-bg-card: #0B1F3D; /* bleu profond */ --color-bg-subtle: #0F2647; --color-border: #1B3153; --color-border-light: #223A5E; --color-sidebar-bg: #050C1A; /* légèrement plus sombre que la page, pour la hiérarchie */ --color-shadow-rgb: 0, 0, 0; /* un noir pur se voit mieux sur fond déjà sombre */ } /* ==================== RESET & BASE ==================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text); background-color: var(--color-bg-page); overflow-x: hidden; } h2 { font-size: var(--font-size-h2); font-weight: 600; } h3 { font-size: var(--font-size-h3); font-weight: 600; } a { text-decoration: none; color: var(--color-primary-text); transition: color 0.3s ease; } a:hover { color: var(--color-primary-hover); } /* ---- Accessibilité clavier : focus visible partout ---- */ :focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 2px; } /* Contraste adapté sur la sidebar (toujours sombre) */ .sidebar :focus-visible { outline-color: var(--color-white); } /* ==================== LAYOUT STRUCTURE ==================== */ .page-wrapper { display: flex; min-height: 100vh; } /* ==================== SIDEBAR ==================== */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background-color: var(--color-sidebar-bg); color: var(--color-white); transition: width 0.3s ease, transform 0.3s ease; z-index: var(--z-sidebar); overflow-x: hidden; overflow-y: auto; } .sidebar.collapsed { width: var(--sidebar-width-collapsed); } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: var(--border-radius); } .sidebar-header { display: flex; align-items: center; justify-content: center; height: var(--header-height); border-bottom: 1px solid rgba(var(--color-white-rgb), 0.1); } .sidebar-logo { max-width: 100%; height: auto; transition: opacity 0.3s ease; } .sidebar.collapsed .sidebar-logo { max-width: 40px; } .sidebar-menu { list-style: none; padding: var(--spacing-md) 0; } .sidebar-menu-item { position: relative; } .sidebar-menu-link { display: flex; align-items: center; padding: 12px var(--spacing-lg); color: rgba(var(--color-white-rgb), 0.85); transition: color 0.3s ease, background-color 0.3s ease; cursor: pointer; position: relative; } /* Indicateur actif en dégradé de marque (glow discret) */ .sidebar-menu-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.3s ease; } .sidebar-menu-link:hover, .sidebar-menu-link.active { color: var(--color-white); background-color: rgba(var(--color-primary-rgb), 0.12); } .sidebar-menu-link:hover::before, .sidebar-menu-link.active::before { background: var(--gradient-brand); } .sidebar-menu-icon { font-size: 20px; min-width: 24px; margin-right: var(--spacing-md); text-align: center; } .sidebar.collapsed .sidebar-menu-icon { margin-right: 0; } .sidebar-menu-text { white-space: nowrap; transition: opacity 0.3s ease; } .sidebar.collapsed .sidebar-menu-text { opacity: 0; width: 0; } .sidebar-menu-arrow { margin-left: auto; font-size: var(--font-size-xs); transition: transform 0.3s ease; } .sidebar.collapsed .sidebar-menu-arrow { opacity: 0; } .sidebar-menu-item.open .sidebar-menu-arrow { transform: rotate(90deg); } .sidebar-submenu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: rgba(var(--color-black-rgb), 0.3); } .sidebar-menu-item.open .sidebar-submenu { max-height: 1000px; } .sidebar-submenu-link { display: block; padding: 10px var(--spacing-lg) 10px 64px; color: rgba(var(--color-white-rgb), 0.75); font-size: var(--font-size-sm); transition: color 0.3s ease, background-color 0.3s ease; } .sidebar.collapsed .sidebar-submenu-link { padding-left: var(--spacing-lg); } .sidebar-submenu-link:hover, .sidebar-submenu-link.active { color: var(--color-white); background-color: rgba(var(--color-primary-rgb), 0.1); } /* ==================== MAIN CONTENT ==================== */ .main-content { flex: 1; margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; display: flex; flex-direction: column; min-height: 100vh; } .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-width-collapsed); } /* ==================== HEADER ==================== */ .header { position: sticky; top: 0; height: var(--header-height); background-color: var(--color-bg-card); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 var(--spacing-lg); z-index: var(--z-header); box-shadow: var(--shadow-sm); } .header-left { display: flex; align-items: center; gap: var(--spacing-md); } .header-toggle-btn { background: none; border: none; font-size: 22px; color: var(--color-text); cursor: pointer; padding: var(--spacing-unit); border-radius: var(--border-radius); transition: background-color 0.3s ease, color 0.3s ease; } .header-toggle-btn:hover { background-color: var(--color-bg-page); color: var(--color-primary-text); } .header-right { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-lg); } .header-notification { position: relative; cursor: pointer; } .header-notification-icon { font-size: 20px; color: var(--color-text); transition: color 0.3s ease; } .header-notification:hover .header-notification-icon { color: var(--color-primary-text); } .header-notification-badge { position: absolute; top: -8px; right: -8px; background: var(--gradient-brand); color: var(--color-white); font-size: var(--font-size-2xs); font-weight: 600; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 6px; } .header-lang { display: flex; align-items: center; position: relative; } .header-lang-btn { background: none; border: none; cursor: pointer; padding: var(--spacing-sm); border-radius: var(--border-radius); transition: background-color 0.3s ease; } .header-lang-btn:hover { background-color: var(--color-bg-page); } .header-lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; } /* Language dropdown menu flags */ .header-lang .dropdown-menu img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; } .header-user { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: var(--spacing-unit) 12px; border-radius: var(--border-radius); transition: background-color 0.3s ease; position: relative; } .header-user:hover { background-color: var(--color-bg-page); } .header-user-btn { background: none; border: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: var(--spacing-sm) var(--spacing-unit); border-radius: var(--border-radius); transition: background-color 0.3s ease; color: inherit; } .header-user-btn:hover { background-color: var(--color-bg-page); } .header-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-primary); } .header-user-info { display: flex; flex-direction: column; } .header-user-name { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; } .header-user-role { font-size: var(--font-size-2xs); color: var(--color-text-secondary); } .header-user-dropdown { position: absolute; top: 100%; right: 0; margin-top: var(--spacing-unit); background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-card); box-shadow: var(--shadow-md); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: var(--z-dropdown); } .header-user.show .header-user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .header-user-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 12px var(--spacing-md); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; border-bottom: 1px solid var(--color-bg-page); } .header-user-dropdown-item:last-child { border-bottom: none; border-radius: 0 0 8px 8px; } .header-user-dropdown-item:first-child { border-radius: 8px 8px 0 0; } .header-user-dropdown-item:hover { background-color: var(--color-bg-page); color: var(--color-primary-text); } .header-user-dropdown-icon { font-size: var(--font-size-lg); } /* ==================== BREADCRUMB ==================== */ .breadcrumb-container { background-color: var(--color-bg-card); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .breadcrumb-item { display: flex; align-items: center; font-size: var(--font-size-base); } .breadcrumb-item + .breadcrumb-item::before { content: '/'; padding: 0 var(--spacing-unit); color: var(--color-text-secondary); } .breadcrumb-item a { color: var(--color-text-secondary); } .breadcrumb-item a:hover { color: var(--color-primary-text); } .breadcrumb-item.active { color: var(--color-text); font-weight: 500; } /* ==================== CONTENT AREA ==================== */ .content-area { flex: 1; padding: var(--spacing-lg); } .page-title { font-size: var(--font-size-h1); font-weight: 600; color: var(--color-text); /* couleur de repli si background-clip non supporté */ margin-bottom: var(--spacing-lg); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .card { background-color: var(--color-bg-card); border-radius: var(--border-radius-card); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .card-header { font-size: var(--font-size-card-header); font-weight: 600; color: var(--color-text); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 2px solid transparent; border-image: var(--gradient-brand) 1; } /* ==================== FOOTER ==================== */ .footer { background-color: var(--color-bg-card); border-top: 1px solid var(--color-border); padding: var(--spacing-md) var(--spacing-lg); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-base); } .footer-copyright { display: flex; align-items: center; justify-content: center; gap: var(--spacing-unit); } .footer-logo { height: 20px; } /* ==================== BUTTONS ==================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-padding-y) var(--btn-padding-x); font-size: var(--font-size-base); font-weight: 500; border-radius: var(--border-radius); border: none; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; text-decoration: none; } .btn-primary { background-color: var(--color-primary); color: var(--color-white); } .btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-white); box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.35); /* glow discret */ } .btn-secondary { background-color: var(--color-btn-secondary); color: var(--color-white); } .btn-secondary:hover { background-color: var(--color-btn-secondary-hover); } .btn-success { background-color: var(--color-success); color: var(--color-white); } .btn-success:hover { background-color: var(--color-success-hover); } /* ==================== FORMS ==================== */ .form-group { margin-bottom: var(--spacing-md); } .form-label { display: block; margin-bottom: var(--spacing-unit); font-weight: 500; color: var(--color-text); } .form-control { width: 100%; padding: var(--input-padding-y) var(--input-padding-x); font-size: var(--font-size-base); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: border-color 0.3s ease; background-color: var(--color-bg-card); color: var(--color-text); } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } /* ==================== DATATABLES CUSTOMIZATION ==================== */ .dataTables_wrapper { padding: 0; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: var(--spacing-md); } .dataTables_wrapper .dt-buttons { margin-bottom: var(--spacing-md); } .dataTables_wrapper .dt-buttons .btn { background-color: var(--color-bg-page); color: var(--color-text); border: 1px solid var(--color-border); padding: var(--spacing-unit) var(--spacing-md); margin-right: var(--spacing-unit); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .dataTables_wrapper .dt-buttons .btn:hover { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } table.dataTable { width: 100% !important; border-collapse: collapse; } table.dataTable thead th { background-color: var(--color-bg-page); color: var(--color-text); font-weight: 600; padding: 12px; border-bottom: 2px solid var(--color-primary); } table.dataTable tbody td { padding: 12px; border-bottom: 1px solid var(--color-border); } table.dataTable tbody tr:hover { background-color: rgba(var(--color-primary-rgb), 0.05); } /* ==================== SELECT2 CUSTOMIZATION ==================== */ .select2-container--default .select2-selection--single { border: 1px solid var(--color-border); border-radius: var(--border-radius); height: 38px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--color-primary); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-primary); } /* ==================== SWEETALERT2 CUSTOMIZATION ==================== */ .swal2-popup { border-radius: var(--border-radius-card); } .swal2-popup .swal2-confirm { background-color: var(--color-primary); } .swal2-popup .swal2-confirm:hover { background-color: var(--color-primary-hover); } /* ==================== RESPONSIVE ==================== */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.mobile-open { transform: translateX(0); } .main-content { margin-left: 0; } .header-user-info { display: none; } } /* ==================== UTILITIES ==================== */ .text-primary { color: var(--color-primary-text); } .text-secondary { color: var(--color-text-secondary); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-info { color: var(--color-info); } /* Utilitaire optionnel : texte en dégradé de marque, pour titres ponctuels */ .text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bg-primary { background-color: var(--color-primary); } .bg-light { background-color: var(--color-bg-page); } .mt-1 { margin-top: var(--spacing-unit); } .mt-2 { margin-top: var(--spacing-md); } .mt-3 { margin-top: var(--spacing-lg); } .mb-1 { margin-bottom: var(--spacing-unit); } .mb-2 { margin-bottom: var(--spacing-md); } .mb-3 { margin-bottom: var(--spacing-lg); } .p-1 { padding: var(--spacing-unit); } .p-2 { padding: var(--spacing-md); } .p-3 { padding: var(--spacing-lg); } .d-flex { display: flex; } .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; } .gap-2 { gap: var(--spacing-md); } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(var(--color-white-rgb), 0.8); display: flex; align-items: center; justify-content: center; z-index: var(--z-overlay); } .overlay i { color: var(--color-primary); } /* ==================== DROPZONE IMAGE UPLOAD (sélecteurs regroupés via :is() pour éviter la duplication) ==================== */ :is(.container-profil-logo > .profil-logo, .container-profil-image > .profil-image) .dz-preview { display: none; } :is(.container-profil-logo > .profil-logo, .container-profil-image > .profil-image) { text-align: center; display: block; width: 190px; height: auto; min-height: 150px; margin: 0 auto var(--spacing-unit) auto; cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } .container-profil-image.left-align > .profil-image { margin-left: 0; margin-right: 0; } .container-profil-logo > .profil-logo { height: auto; background: var(--color-bg-card); width: 250px; max-width: 100%; } :is(.container-profil-logo > .profil-logo .filled-logo, .container-profil-image > .profil-image .filled-image) img { max-width: 100%; max-height: 100%; border-radius: var(--border-radius-card); object-fit: cover; } :is(.container-profil-logo > .profil-logo .empty-logo, .container-profil-image > .profil-image .empty-image) { border: 2px dashed var(--color-border); padding: 20px 15px; border-radius: var(--border-radius-card); transition: border-color 0.3s ease, background-color 0.3s ease; background-color: var(--color-bg-page); } :is(.container-profil-logo > .profil-logo .empty-logo, .container-profil-image > .profil-image .empty-image):hover { border-color: var(--color-primary); background-color: rgba(var(--color-primary-rgb), 0.05); } .container-profil-logo > .profil-logo .empty-logo { padding: 15px 0px; } :is(.container-profil-logo, .container-profil-image)::after { content: " "; clear: both; display: block; } :is(.container-profil-logo .content-filled-logo, .container-profil-image .content-filled-image) { max-width: 100%; cursor: pointer; border-radius: var(--border-radius-card); transition: transform 0.3s ease; } :is(.container-profil-logo .content-filled-logo, .container-profil-image .content-filled-image):hover { transform: scale(1.02); } :is(.container-profil-image, .container-profil-logo) .dz-message { margin: 0; } :is(.container-profil-image, .container-profil-logo) .dz-message h6 { color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: 500; margin: 0; } :is(.container-profil-image, .container-profil-logo) .dz-message i { color: var(--color-primary); font-size: 48px; margin-bottom: 12px; } :is(.container-profil-image, .container-profil-logo) .dz-message .upload-hint { color: var(--color-text-tertiary); font-size: 0.9375rem; /* 15px */ font-weight: 600; margin: 0 0 var(--spacing-unit) 0; } :is(.container-profil-image, .container-profil-logo) .dz-message small { display: block; color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 400; } .container-uploader > .uploader-group { text-align: center; display: block; margin: 0 auto; } .profil-email-upload .dz-preview { display: none; } /* ======================================== Tree Toolbar Styles ======================================== */ .jstree.has-toolbar { padding-top: 40px; } .jstree { position: relative; } .tree-toolbar { height: 35px; width: 100%; position: absolute; top: 0; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-light); left: 0; z-index: 10; /* z-index local, propre au composant jstree */ padding: 5px 10px; } .tree-toolbar a.toolbar-button { display: inline-block; height: 28px; width: 32px; margin: 0 2px; border-radius: var(--border-radius); background-color: var(--color-primary); color: var(--color-white); text-align: center; line-height: 28px; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; font-size: var(--font-size-lg); } .tree-toolbar a.toolbar-button:hover { background-color: var(--color-primary-hover); box-shadow: 0 2px 4px rgba(var(--color-primary-rgb), 0.3); } .tree-toolbar a.toolbar-button i { line-height: 28px; }