/* ========== wwwroot/css/app/variables.css ========== */ /* VARIABLES CSS Ce fichier centralise la d�finition de toutes les variables CSS pour les th�mes. */ /* ===== Variables par d�faut (fallback) - SYNCHRONIS�ES avec App.razor ===== */ :root { /* Couleurs du th�me par d�faut (Purple Dream) */ --premium-gradient-start: #667eea; --premium-gradient-middle-1: #6e7bee; --premium-gradient-end: #764ba2; --premium-gradient-middle-2: #7059c6; --premium-primary: #667eea; --premium-secondary: #764ba2; --premium-accent: #a855f7; --premium-shadow: rgba(102, 126, 234, 0.4); --premium-glow: rgba(102, 126, 234, 0.6); /* Couleurs beiges pour les fonds */ --beige-light: #f5e6d3; --beige-very-light: #f9f0e6; --beige-medium: #e8d4bb; --beige-dark: #f0e0cc; --beige-border: #e8d4bb; --beige-accent: #d4a574; /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(102, 126, 234, 0.05); --theme-primary-rgba-01: rgba(102, 126, 234, 0.1); --theme-primary-rgba-015: rgba(102, 126, 234, 0.15); --theme-primary-rgba-02: rgba(102, 126, 234, 0.2); --theme-primary-rgba-03: rgba(102, 126, 234, 0.3); --theme-primary-rgba-04: rgba(102, 126, 234, 0.4); --theme-primary-rgba-05: rgba(102, 126, 234, 0.5); --theme-secondary-rgba-01: rgba(118, 75, 162, 0.1); } /* ======================================== TH�ME - GESTION DES VARIABLES DE COULEUR ======================================== */ /* D�finition des variables de couleur pour chaque th�me en utilisant des s�lecteurs d'attributs. Le th�me est appliqu� en ajoutant `data-theme="themename"` � l'�l�ment . */ [data-theme="purple"] { --premium-gradient-start: #667eea; --premium-gradient-middle-1: #6e7bee; --premium-gradient-end: #764ba2; --premium-gradient-middle-2: #7059c6; --premium-primary: #667eea; --premium-secondary: #764ba2; --premium-accent: #a855f7; --premium-shadow: rgba(102, 126, 234, 0.4); --premium-glow: rgba(102, 126, 234, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(102, 126, 234, 0.05); --theme-primary-rgba-01: rgba(102, 126, 234, 0.1); --theme-primary-rgba-015: rgba(102, 126, 234, 0.15); --theme-primary-rgba-02: rgba(102, 126, 234, 0.2); --theme-primary-rgba-03: rgba(102, 126, 234, 0.3); --theme-primary-rgba-04: rgba(102, 126, 234, 0.4); --theme-primary-rgba-05: rgba(102, 126, 234, 0.5); --theme-secondary-rgba-01: rgba(118, 75, 162, 0.1); } [data-theme="ocean"] { --premium-gradient-start: #2563eb; --premium-gradient-middle-1: #1e7bcf; --premium-gradient-end: #0891b2; --premium-gradient-middle-2: #148cb9; --premium-primary: #2563eb; --premium-secondary: #0891b2; --premium-accent: #06b6d4; --premium-shadow: rgba(37, 99, 235, 0.4); --premium-glow: rgba(8, 145, 178, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(37, 99, 235, 0.05); --theme-primary-rgba-01: rgba(37, 99, 235, 0.1); --theme-primary-rgba-015: rgba(37, 99, 235, 0.15); --theme-primary-rgba-02: rgba(37, 99, 235, 0.2); --theme-primary-rgba-03: rgba(37, 99, 235, 0.3); --theme-primary-rgba-04: rgba(37, 99, 235, 0.4); --theme-primary-rgba-05: rgba(37, 99, 235, 0.5); --theme-secondary-rgba-01: rgba(8, 145, 178, 0.1); } [data-theme="sunset"] { --premium-gradient-start: #f97316; --premium-gradient-middle-1: #f7635f; --premium-gradient-end: #ec4899; --premium-gradient-middle-2: #f25a7e; --premium-primary: #f97316; --premium-secondary: #ec4899; --premium-accent: #fb923c; --premium-shadow: rgba(249, 115, 22, 0.4); --premium-glow: rgba(236, 72, 153, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(249, 115, 22, 0.05); --theme-primary-rgba-01: rgba(249, 115, 22, 0.1); --theme-primary-rgba-015: rgba(249, 115, 22, 0.15); --theme-primary-rgba-02: rgba(249, 115, 22, 0.2); --theme-primary-rgba-03: rgba(249, 115, 22, 0.3); --theme-primary-rgba-04: rgba(249, 115, 22, 0.4); --theme-primary-rgba-05: rgba(249, 115, 22, 0.5); --theme-secondary-rgba-01: rgba(236, 72, 153, 0.1); } [data-theme="forest"] { --premium-gradient-start: #059669; --premium-gradient-middle-1: #0a9a78; --premium-gradient-end: #10b981; --premium-gradient-middle-2: #0eae7d; --premium-primary: #059669; --premium-secondary: #10b981; --premium-accent: #34d399; --premium-shadow: rgba(5, 150, 105, 0.4); --premium-glow: rgba(16, 185, 129, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(5, 150, 105, 0.05); --theme-primary-rgba-01: rgba(5, 150, 105, 0.1); --theme-primary-rgba-015: rgba(5, 150, 105, 0.15); --theme-primary-rgba-02: rgba(5, 150, 105, 0.2); --theme-primary-rgba-03: rgba(5, 150, 105, 0.3); --theme-primary-rgba-04: rgba(5, 150, 105, 0.4); --theme-primary-rgba-05: rgba(5, 150, 105, 0.5); --theme-secondary-rgba-01: rgba(16, 185, 129, 0.1); } [data-theme="night"] { --premium-gradient-start: #1e3a8a; --premium-gradient-middle-1: #1a5ba3; --premium-gradient-end: #06b6d4; --premium-gradient-middle-2: #1088bc; --premium-primary: #1e3a8a; --premium-secondary: #06b6d4; --premium-accent: #0ea5e9; --premium-shadow: rgba(30, 58, 138, 0.4); --premium-glow: rgba(6, 182, 212, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(30, 58, 138, 0.05); --theme-primary-rgba-01: rgba(30, 58, 138, 0.1); --theme-primary-rgba-015: rgba(30, 58, 138, 0.15); --theme-primary-rgba-02: rgba(30, 58, 138, 0.2); --theme-primary-rgba-03: rgba(30, 58, 138, 0.3); --theme-primary-rgba-04: rgba(30, 58, 138, 0.4); --theme-primary-rgba-05: rgba(30, 58, 138, 0.5); --theme-secondary-rgba-01: rgba(6, 182, 212, 0.1); } [data-theme="royal"] { --premium-gradient-start: #a855f7; --premium-gradient-middle-1: #b86ff2; --premium-gradient-end: #eab308; --premium-gradient-middle-2: #d08b7f; --premium-primary: #a855f7; --premium-secondary: #eab308; --premium-accent: #fbbf24; --premium-shadow: rgba(168, 85, 247, 0.4); --premium-glow: rgba(234, 179, 8, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(168, 85, 247, 0.05); --theme-primary-rgba-01: rgba(168, 85, 247, 0.1); --theme-primary-rgba-015: rgba(168, 85, 247, 0.15); --theme-primary-rgba-02: rgba(168, 85, 247, 0.2); --theme-primary-rgba-03: rgba(168, 85, 247, 0.3); --theme-primary-rgba-04: rgba(168, 85, 247, 0.4); --theme-primary-rgba-05: rgba(168, 85, 247, 0.5); --theme-secondary-rgba-01: rgba(234, 179, 8, 0.1); } [data-theme="rose"] { --premium-gradient-start: #ec4899; --premium-gradient-middle-1: #ef467b; --premium-gradient-end: #f43f5e; --premium-gradient-middle-2: #f1456c; --premium-primary: #ec4899; --premium-secondary: #f43f5e; --premium-accent: #fb7185; --premium-shadow: rgba(236, 72, 153, 0.4); --premium-glow: rgba(244, 63, 94, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(236, 72, 153, 0.05); --theme-primary-rgba-01: rgba(236, 72, 153, 0.1); --theme-primary-rgba-015: rgba(236, 72, 153, 0.15); --theme-primary-rgba-02: rgba(236, 72, 153, 0.2); --theme-primary-rgba-03: rgba(236, 72, 153, 0.3); --theme-primary-rgba-04: rgba(236, 72, 153, 0.4); --theme-primary-rgba-05: rgba(236, 72, 153, 0.5); --theme-secondary-rgba-01: rgba(244, 63, 94, 0.1); } [data-theme="emerald"] { --premium-gradient-start: #10b981; --premium-gradient-middle-1: #12ba8e; --premium-gradient-end: #14b8a6; --premium-gradient-middle-2: #13b99a; --premium-primary: #10b981; --premium-secondary: #14b8a6; --premium-accent: #2dd4bf; --premium-shadow: rgba(16, 185, 129, 0.4); --premium-glow: rgba(20, 184, 166, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(16, 185, 129, 0.05); --theme-primary-rgba-01: rgba(16, 185, 129, 0.1); --theme-primary-rgba-015: rgba(16, 185, 129, 0.15); --theme-primary-rgba-02: rgba(16, 185, 129, 0.2); --theme-primary-rgba-03: rgba(16, 185, 129, 0.3); --theme-primary-rgba-04: rgba(16, 185, 129, 0.4); --theme-primary-rgba-05: rgba(16, 185, 129, 0.5); --theme-secondary-rgba-01: rgba(20, 184, 166, 0.1); } [data-theme="champagne"] { --premium-gradient-start: #d4a574; --premium-gradient-middle-1: #cfa070; --premium-gradient-end: #b8956a; --premium-gradient-middle-2: #c39b6d; --premium-primary: #d4a574; --premium-secondary: #b8956a; --premium-accent: #c9975b; --premium-shadow: rgba(212, 165, 116, 0.4); --premium-glow: rgba(184, 149, 106, 0.6); /* Variables RGBA pour opacit�s dynamiques */ --theme-primary-rgba-005: rgba(212, 165, 116, 0.05); --theme-primary-rgba-01: rgba(212, 165, 116, 0.1); --theme-primary-rgba-015: rgba(212, 165, 116, 0.15); --theme-primary-rgba-02: rgba(212, 165, 116, 0.2); --theme-primary-rgba-03: rgba(212, 165, 116, 0.3); --theme-primary-rgba-04: rgba(212, 165, 116, 0.4); --theme-primary-rgba-05: rgba(212, 165, 116, 0.5); --theme-secondary-rgba-01: rgba(184, 149, 106, 0.1); } /* ========== wwwroot/css/app/layout.css ========== */ /* LAYOUT STYLES Styles pour la mise en page principale de l'application, y compris .page, .top-row, .content, etc. */ /* WrapperLayout styles */ .page { position: relative; display: flex; flex-direction: column; min-height: 100vh; } .top-row { background: linear-gradient(135deg, var(--premium-gradient-middle-2) 0%, var(--premium-gradient-middle-1) 25%, var(--premium-primary) 50%, var(--premium-secondary) 75%, var(--premium-gradient-middle-2) 100% ); border-bottom: 2px solid rgba(255, 255, 255, 0.1); justify-content: flex-end; height: 4rem; display: flex; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 30px var(--premium-shadow); position: sticky; top: 0; z-index: 1050; /* Au-dessus de la sidebar */ } .content { padding: 2rem; background: #ffffff; margin: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); min-height: calc(100vh - 8rem); border: 1px solid #e9ecef; animation: contentFadeIn 0.3s ease-out; margin-top: 0; /* Ajust� car le menu est sticky */ padding-top: 1.1rem; } /* Am�lioration des alertes */ .content .alert { border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .content .alert-success { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); color: #155724; } /* Styles pour les formulaires */ .content .form-control:focus { border-color: var(--premium-primary); box-shadow: 0 0 0 0.2rem rgba(27, 110, 194, 0.25); } /* Hero sections */ .content .hero-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; padding: 3rem 2rem; margin: -1rem -1rem 2rem -1rem; border: 1px solid #e9ecef; } /* Am�liorations des titres */ .content h1 { color: #2c3e50; font-weight: 700; margin-bottom: 1.5rem; } .content h2, .content h3 { color: #34495e; font-weight: 600; } /* Liens harmonis�s */ .content a:not(.btn) { color: var(--premium-primary); text-decoration: none; transition: color 0.2s ease-in-out; } .content a:not(.btn):hover { color: var(--premium-secondary); text-decoration: underline; } .wrapper-container { position: relative; min-height: 100vh; width: 100%; overflow-x: hidden; } main { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); min-height: 100vh; } /* ========== wwwroot/css/app/global.css ========== */ /* GLOBAL STYLES Contient les styles de base pour l'application, tels que les polices, les liens, les styles de formulaires de base, etc. */ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-x: hidden; max-width: 100%; } a, .btn-link { color: var(--premium-primary); } .btn-primary { color: #fff; background-color: var(--premium-primary); border-color: var(--premium-secondary); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--premium-shadow); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUXuNjYgMjYyLjI5NiA1MSAyNjMuNTA6IDUxWk0yNjMuNTg6IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzUgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg 2NjYuMDE4MyAyNjMuNTg6IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .menu-separator { border: none; border-top: 2px solid var(--premium-primary); border-radius: 2px; margin: 0.5rem 0 0.5rem 0.5rem; width: 80%; opacity: 0.5; } /* BRAND LOGO dans le top-row */ .brand-logo { display: flex; align-items: center; } .brand-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1; color: #ffffff !important; } .brand-logo .brand-title, .header-logo-group .brand-title, h1.brand-title { color: #ffffff !important; } .brand-title .brand-highlight, .brand-logo .brand-title .brand-highlight, .header-logo-group .brand-title .brand-highlight, h1.brand-title .brand-highlight { color: #ffffff !important; font-style: italic; position: relative; display: inline-block; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } @keyframes contentFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ========== wwwroot/css/theme-global.css ========== */ /* ========================================= SYST�ME DE TH�MES GLOBAL Styles qui utilisent les variables CSS du th�me NOTE: Les variables CSS sont d�finies dans app/variables.css ========================================= */ /* ======================================== STYLES DES CARTES DE TH�ME ======================================== */ .theme-card { cursor: pointer; border: 2px solid transparent; border-radius: 0.75rem; transition: all 0.3s ease; background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .theme-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .theme-card.active { border-color: var(--premium-accent); box-shadow: 0 0 0 3px var(--premium-shadow); } .theme-preview { width: 100%; height: 60px; border-radius: 0.5rem 0.5rem 0 0; } .theme-info { padding: 0.75rem; } .theme-name { font-weight: 600; color: #333; } .theme-description { font-size: 0.85rem; color: #666; } /* ===== Boutons primaires avec th�me ===== */ .btn-primary, .btn.btn-primary { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; border: none !important; box-shadow: 0 4px 16px var(--premium-shadow) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .btn-primary:hover, .btn.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px var(--premium-shadow) !important; } /* ===== Liens avec th�me ===== */ a:not(.nav-link):not(.btn) { color: var(--premium-primary); transition: color 0.3s ease; } a:not(.nav-link):not(.btn):hover { color: var(--premium-secondary); } /* ===== Badges avec th�me ===== */ .badge-primary, .badge.badge-primary { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; box-shadow: 0 2px 8px var(--premium-shadow) !important; } /* ===== Cards avec th�me ===== */ .card { border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card:hover { border-color: var(--premium-primary); box-shadow: 0 8px 24px var(--premium-shadow); transform: translateY(-4px); } .card-header { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%); border-bottom: 2px solid var(--premium-primary); } /* ===== Alerts avec th�me ===== */ .alert-info { background: linear-gradient(135deg, var(--theme-primary-rgba-01) 0%, var(--theme-secondary-rgba-01) 100%); border-left: 4px solid var(--premium-primary); } /* ===== Progress bars avec th�me ===== */ .progress-bar { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; } /* ===== Formulaires avec th�me ===== */ .form-control:focus, .form-select:focus { border-color: var(--premium-primary) !important; box-shadow: 0 0 0 0.25rem var(--premium-shadow) !important; } /* ===== Checkboxes et Radios avec th�me ===== */ .form-check-input:checked { background-color: var(--premium-primary) !important; border-color: var(--premium-primary) !important; } .form-check-input:focus { box-shadow: 0 0 0 0.25rem var(--premium-shadow) !important; } /* ===== Pagination avec th�me ===== */ .page-link { color: var(--premium-primary); } .page-item.active .page-link { background-color: var(--premium-primary) !important; border-color: var(--premium-primary) !important; box-shadow: 0 4px 12px var(--premium-shadow); } /* ===== Dropdowns avec th�me ===== */ .dropdown-item.active, .dropdown-item:active { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; } .dropdown-item:hover { background-color: var(--theme-primary-rgba-01); } /* ===== Navs et Tabs avec th�me ===== */ .nav-link.active, .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; box-shadow: 0 4px 12px var(--premium-shadow); } .nav-tabs .nav-link.active { border-bottom-color: var(--premium-primary) !important; color: var(--premium-primary) !important; } /* ===== Modals avec th�me ===== */ .modal-header { background: linear-gradient(135deg, var(--theme-primary-rgba-005) 0%, transparent 100%); border-bottom: 2px solid var(--premium-primary); } /* ===== Tables avec th�me ===== */ .table-hover tbody tr:hover { background-color: var(--theme-primary-rgba-005); } .table-primary { background-color: var(--theme-primary-rgba-01); } /* ===== Spinners avec th�me ===== */ .spinner-border { border-color: var(--premium-primary) transparent transparent transparent !important; } .spinner-grow { background-color: var(--premium-primary) !important; } /* ===== Text colors avec th�me ===== */ .text-primary { color: var(--premium-primary) !important; } .text-secondary { color: var(--premium-secondary) !important; } /* ===== Background colors avec th�me ===== */ .bg-primary { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; } /* ===== Borders avec th�me ===== */ .border-primary { border-color: var(--premium-primary) !important; } /* ===== Sidebar avec th�me ===== */ .sidebar, .offcanvas { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); backdrop-filter: blur(10px); } .sidebar .nav-link.active { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%); color: white; box-shadow: 0 4px 12px var(--premium-shadow); } /* ===== Header/Navbar avec th�me ===== */ .navbar { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .navbar-brand { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } /* ===== Breadcrumbs avec th�me ===== */ .breadcrumb-item.active { color: var(--premium-primary); } .breadcrumb-item a { color: var(--premium-secondary); } /* ===== List groups avec th�me ===== */ .list-group-item.active { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%) !important; border-color: var(--premium-primary) !important; box-shadow: 0 4px 12px var(--premium-shadow); } /* ===== Tooltips et Popovers avec th�me ===== */ .tooltip-inner { background-color: var(--premium-primary); } .popover-header { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%); color: white; } /* ===== Accordions avec th�me ===== */ .accordion-button:not(.collapsed) { background: linear-gradient(135deg, var(--theme-primary-rgba-01) 0%, transparent 100%); color: var(--premium-primary); border-bottom: 2px solid var(--premium-primary); } .accordion-button:focus { box-shadow: 0 0 0 0.25rem var(--premium-shadow); } /* ===== Transition fluide lors du changement de th�me ===== */ * { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; } /* D�sactiver les transitions pendant le chargement initial pour �viter les flashs */ html:not([data-theme-loaded="true"]) * { transition: none !important; } /* ===== Focus visible avec th�me ===== */ *:focus-visible { outline: 2px solid var(--premium-primary); outline-offset: 2px; } /* ===== Selection avec th�me ===== */ ::selection { background-color: var(--premium-primary); color: white; } ::-moz-selection { background-color: var(--premium-primary); color: white; } /* ===== Scrollbar avec th�me ===== */ ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--premium-gradient-start) 0%, var(--premium-gradient-end) 100%); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--premium-primary); } /* ===== Responsive ===== */ @media (max-width: 768px) { /* Adapter les ombres et effets pour mobile */ .card:hover { transform: translateY(-2px); } .btn-primary:hover { transform: translateY(-1px); } } /* ===== Debug indicator (optionnel) ===== */ html[data-theme-loaded="true"]::before { content: ''; position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: -1; } /* ========== wwwroot/css/brand-logo-fix.css ========== */ /* ======================================== FIX POUR LOGO BRAND - GOODIES IMPACT EN BLANC Ce fichier force le style blanc pour le logo ======================================== */ /* S�lecteurs multiples pour maximiser la sp�cificit� */ .top-row .brand-logo .brand-title, .top-row .header-logo-group .brand-title, .top-row h1.brand-title, div.brand-logo h1.brand-title, .brand-logo > h1.brand-title { color: #ffffff !important; } /* S�lecteurs pour le span.brand-highlight */ .top-row .brand-logo .brand-title .brand-highlight, .top-row .header-logo-group .brand-title .brand-highlight, .top-row h1.brand-title .brand-highlight, div.brand-logo h1.brand-title .brand-highlight, .brand-logo > h1.brand-title > .brand-highlight, .brand-logo .brand-title > span.brand-highlight, h1.brand-title > span.brand-highlight { color: #ffffff !important; font-style: italic; position: relative; display: inline-block; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -webkit-text-fill-color: #ffffff !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; } /* D�sactiver tout gradient ou effet qui pourrait �tre appliqu� */ .brand-title .brand-highlight { background-image: none !important; background-color: transparent !important; } /* S'assurer que le h1 parent est aussi en blanc */ .top-row h1 { color: #ffffff !important; }