/* ============================================================ PAMAMO — THÈMES COMPLETS Usage : data-bs-theme="" sur La clé : chaque thème redéfinit les variables Bootstrap (--bs-body-bg, --bs-body-color, etc.) EN PLUS des nôtres, pour que tous les composants Bootstrap suivent le thème. ============================================================ */ /* ============================================================ 1. CLAIR (light) Bootstrap le gère nativement, on surcharge juste les accents ============================================================ */ [data-bs-theme="light"] { --color-primary-rgb: 0, 170, 238; --color-secondary-rgb: 170, 0, 255; --color-tertiary-rgb: 255, 0, 170; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #f8f9fa; --bg-surface: #ffffff; --bg-elevated: #e9ecef; --text-main: #212529; --text-muted: #6c757d; --text-inv: #ffffff; --border-color: rgba(0, 0, 0, 0.12); --shadow: 0 2px 12px rgba(0, 0, 0, 0.10); --scrollbar-thumb: #ced4da; /* Bootstrap overrides */ --bs-body-bg: #f8f9fa; --bs-body-color: #212529; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #e9ecef; --bs-secondary-color: #6c757d; --bs-border-color: rgba(0, 0, 0, 0.12); --bs-link-color: rgb(0, 170, 238); --bs-link-hover-color: rgb(170, 0, 255); --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-dropdown-color: #212529; --bs-modal-bg: #ffffff; --bs-navbar-color: rgba(0,0,0,.55); } /* ============================================================ 2. SOMBRE (dark) ============================================================ */ [data-bs-theme="dark"] { --color-primary-rgb: 0, 212, 255; --color-secondary-rgb: 191, 95, 255; --color-tertiary-rgb: 255, 45, 155; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #1a1a2e; --bg-surface: #16213e; --bg-elevated: #0f3460; --text-main: #e0e0e0; --text-muted: #8892a4; --text-inv: #0a0a0f; --border-color: rgba(255, 255, 255, 0.08); --shadow: 0 2px 16px rgba(0, 0, 0, 0.50); --scrollbar-thumb: #0f3460; /* Bootstrap overrides */ --bs-body-bg: #1a1a2e; --bs-body-color: #e0e0e0; --bs-secondary-bg: #16213e; --bs-tertiary-bg: #0f3460; --bs-secondary-color: #8892a4; --bs-border-color: rgba(255, 255, 255, 0.08); --bs-link-color: rgb(0, 212, 255); --bs-link-hover-color: rgb(191, 95, 255); --bs-card-bg: #16213e; --bs-card-border-color: rgba(255, 255, 255, 0.08); --bs-dropdown-bg: #16213e; --bs-dropdown-color: #e0e0e0; --bs-dropdown-border-color: rgba(255,255,255,0.08); --bs-dropdown-link-color: #e0e0e0; --bs-dropdown-link-hover-bg: #0f3460; --bs-modal-bg: #16213e; --bs-modal-color: #e0e0e0; --bs-input-bg: #16213e; --bs-input-color: #e0e0e0; --bs-input-border-color: rgba(255,255,255,0.15); --bs-navbar-color: rgba(255,255,255,.75); --bs-navbar-active-color: #fff; } /* ============================================================ 3. OLED (oled) ============================================================ */ [data-bs-theme="oled"] { --color-primary-rgb: 0, 230, 255; --color-secondary-rgb: 200, 0, 255; --color-tertiary-rgb: 255, 0, 128; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #000000; --bg-surface: #0a0a0a; --bg-elevated: #111111; --text-main: #ffffff; --text-muted: #888888; --text-inv: #000000; --border-color: rgba(255, 255, 255, 0.06); --shadow: 0 2px 20px rgba(0, 230, 255, 0.15); --scrollbar-thumb: #222222; /* Bootstrap overrides */ --bs-body-bg: #000000; --bs-body-color: #ffffff; --bs-secondary-bg: #0a0a0a; --bs-tertiary-bg: #111111; --bs-secondary-color: #888888; --bs-border-color: rgba(255, 255, 255, 0.06); --bs-link-color: rgb(0, 230, 255); --bs-link-hover-color: rgb(200, 0, 255); --bs-card-bg: #0a0a0a; --bs-card-border-color: rgba(255,255,255,0.06); --bs-dropdown-bg: #0a0a0a; --bs-dropdown-color: #ffffff; --bs-dropdown-border-color: rgba(255,255,255,0.06); --bs-dropdown-link-color: #ffffff; --bs-dropdown-link-hover-bg: #111111; --bs-modal-bg: #0a0a0a; --bs-modal-color: #ffffff; --bs-input-bg: #0a0a0a; --bs-input-color: #ffffff; --bs-input-border-color: rgba(255,255,255,0.10); --bs-navbar-color: rgba(255,255,255,.75); --bs-navbar-active-color: #fff; } /* ============================================================ 4. CATPPUCCIN LATTE (catppuccin-latte) ============================================================ */ [data-bs-theme="catppuccin-latte"] { --color-primary-rgb: 30, 102, 245; --color-secondary-rgb: 136, 57, 239; --color-tertiary-rgb: 234, 118, 203; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #eff1f5; --bg-surface: #e6e9ef; --bg-elevated: #dce0e8; --text-main: #4c4f69; --text-muted: #7c7f93; --text-inv: #eff1f5; --border-color: rgba(76, 79, 105, 0.15); --shadow: 0 2px 12px rgba(76, 79, 105, 0.12); --scrollbar-thumb: #bcc0cc; /* Bootstrap overrides */ --bs-body-bg: #eff1f5; --bs-body-color: #4c4f69; --bs-secondary-bg: #e6e9ef; --bs-tertiary-bg: #dce0e8; --bs-secondary-color: #7c7f93; --bs-border-color: rgba(76, 79, 105, 0.15); --bs-link-color: rgb(30, 102, 245); --bs-link-hover-color: rgb(136, 57, 239); --bs-card-bg: #e6e9ef; --bs-card-border-color: rgba(76,79,105,0.15); --bs-dropdown-bg: #e6e9ef; --bs-dropdown-color: #4c4f69; --bs-dropdown-border-color: rgba(76,79,105,0.15); --bs-dropdown-link-color: #4c4f69; --bs-dropdown-link-hover-bg: #dce0e8; --bs-modal-bg: #e6e9ef; --bs-modal-color: #4c4f69; --bs-input-bg: #dce0e8; --bs-input-color: #4c4f69; --bs-input-border-color: rgba(76,79,105,0.20); --bs-navbar-color: rgba(76,79,105,.8); --bs-navbar-active-color: #4c4f69; } /* ============================================================ 5. CATPPUCCIN FRAPPÉ (catppuccin-frappe) ============================================================ */ [data-bs-theme="catppuccin-frappe"] { --color-primary-rgb: 140, 170, 238; --color-secondary-rgb: 202, 158, 230; --color-tertiary-rgb: 244, 184, 228; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #303446; --bg-surface: #292c3c; --bg-elevated: #232634; --text-main: #c6d0f5; --text-muted: #949cbb; --text-inv: #232634; --border-color: rgba(198, 208, 245, 0.10); --shadow: 0 2px 16px rgba(0, 0, 0, 0.40); --scrollbar-thumb: #414559; /* Bootstrap overrides */ --bs-body-bg: #303446; --bs-body-color: #c6d0f5; --bs-secondary-bg: #292c3c; --bs-tertiary-bg: #232634; --bs-secondary-color: #949cbb; --bs-border-color: rgba(198, 208, 245, 0.10); --bs-link-color: rgb(140, 170, 238); --bs-link-hover-color: rgb(202, 158, 230); --bs-card-bg: #292c3c; --bs-card-border-color: rgba(198,208,245,0.10); --bs-dropdown-bg: #292c3c; --bs-dropdown-color: #c6d0f5; --bs-dropdown-border-color: rgba(198,208,245,0.10); --bs-dropdown-link-color: #c6d0f5; --bs-dropdown-link-hover-bg: #232634; --bs-modal-bg: #292c3c; --bs-modal-color: #c6d0f5; --bs-input-bg: #232634; --bs-input-color: #c6d0f5; --bs-input-border-color: rgba(198,208,245,0.15); --bs-navbar-color: rgba(198,208,245,.75); --bs-navbar-active-color: #c6d0f5; } /* ============================================================ 6. CATPPUCCIN MACCHIATO (catppuccin-macchiato) ============================================================ */ [data-bs-theme="catppuccin-macchiato"] { --color-primary-rgb: 125, 196, 228; --color-secondary-rgb: 198, 160, 246; --color-tertiary-rgb: 245, 189, 230; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #24273a; --bg-surface: #1e2030; --bg-elevated: #181926; --text-main: #cad3f5; --text-muted: #8087a2; --text-inv: #181926; --border-color: rgba(202, 211, 245, 0.10); --shadow: 0 2px 16px rgba(0, 0, 0, 0.45); --scrollbar-thumb: #363a4f; /* Bootstrap overrides */ --bs-body-bg: #24273a; --bs-body-color: #cad3f5; --bs-secondary-bg: #1e2030; --bs-tertiary-bg: #181926; --bs-secondary-color: #8087a2; --bs-border-color: rgba(202, 211, 245, 0.10); --bs-link-color: rgb(125, 196, 228); --bs-link-hover-color: rgb(198, 160, 246); --bs-card-bg: #1e2030; --bs-card-border-color: rgba(202,211,245,0.10); --bs-dropdown-bg: #1e2030; --bs-dropdown-color: #cad3f5; --bs-dropdown-border-color: rgba(202,211,245,0.10); --bs-dropdown-link-color: #cad3f5; --bs-dropdown-link-hover-bg: #181926; --bs-modal-bg: #1e2030; --bs-modal-color: #cad3f5; --bs-input-bg: #181926; --bs-input-color: #cad3f5; --bs-input-border-color: rgba(202,211,245,0.15); --bs-navbar-color: rgba(202,211,245,.75); --bs-navbar-active-color: #cad3f5; } /* ============================================================ 7. CATPPUCCIN MOCHA (catppuccin-mocha) ============================================================ */ [data-bs-theme="catppuccin-mocha"] { --color-primary-rgb: 137, 180, 250; --color-secondary-rgb: 203, 166, 247; --color-tertiary-rgb: 245, 194, 231; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #1e1e2e; --bg-surface: #181825; --bg-elevated: #11111b; --text-main: #cdd6f4; --text-muted: #6c7086; --text-inv: #11111b; --border-color: rgba(205, 214, 244, 0.08); --shadow: 0 2px 20px rgba(0, 0, 0, 0.55); --scrollbar-thumb: #313244; /* Bootstrap overrides */ --bs-body-bg: #1e1e2e; --bs-body-color: #cdd6f4; --bs-secondary-bg: #181825; --bs-tertiary-bg: #11111b; --bs-secondary-color: #6c7086; --bs-border-color: rgba(205, 214, 244, 0.08); --bs-link-color: rgb(137, 180, 250); --bs-link-hover-color: rgb(203, 166, 247); --bs-card-bg: #181825; --bs-card-border-color: rgba(205,214,244,0.08); --bs-dropdown-bg: #181825; --bs-dropdown-color: #cdd6f4; --bs-dropdown-border-color: rgba(205,214,244,0.08); --bs-dropdown-link-color: #cdd6f4; --bs-dropdown-link-hover-bg: #11111b; --bs-modal-bg: #181825; --bs-modal-color: #cdd6f4; --bs-input-bg: #11111b; --bs-input-color: #cdd6f4; --bs-input-border-color: rgba(205,214,244,0.12); --bs-navbar-color: rgba(205,214,244,.75); --bs-navbar-active-color: #cdd6f4; } /* ============================================================ 8. DRACULA (dracula) ============================================================ */ [data-bs-theme="dracula"] { --color-primary-rgb: 139, 233, 253; --color-secondary-rgb: 80, 250, 123; --color-tertiary-rgb: 255, 121, 198; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #282a36; --bg-surface: #21222c; --bg-elevated: #191a21; --text-main: #f8f8f2; --text-muted: #6272a4; --text-inv: #191a21; --border-color: rgba(248, 248, 242, 0.08); --shadow: 0 2px 20px rgba(0, 0, 0, 0.50); --scrollbar-thumb: #44475a; /* Bootstrap overrides */ --bs-body-bg: #282a36; --bs-body-color: #f8f8f2; --bs-secondary-bg: #21222c; --bs-tertiary-bg: #191a21; --bs-secondary-color: #6272a4; --bs-border-color: rgba(248, 248, 242, 0.08); --bs-link-color: rgb(139, 233, 253); --bs-link-hover-color: rgb(80, 250, 123); --bs-card-bg: #21222c; --bs-card-border-color: rgba(248,248,242,0.08); --bs-dropdown-bg: #21222c; --bs-dropdown-color: #f8f8f2; --bs-dropdown-border-color: rgba(248,248,242,0.08); --bs-dropdown-link-color: #f8f8f2; --bs-dropdown-link-hover-bg: #191a21; --bs-modal-bg: #21222c; --bs-modal-color: #f8f8f2; --bs-input-bg: #191a21; --bs-input-color: #f8f8f2; --bs-input-border-color: rgba(248,248,242,0.12); --bs-navbar-color: rgba(248,248,242,.75); --bs-navbar-active-color: #f8f8f2; } /* ============================================================ 9. MATRIX / HACKER (matrix) ============================================================ */ [data-bs-theme="matrix"] { --color-primary-rgb: 0, 255, 65; --color-secondary-rgb: 0, 255, 204; --color-tertiary-rgb: 255, 230, 0; --color-primary: rgb(var(--color-primary-rgb)); --color-secondary: rgb(var(--color-secondary-rgb)); --color-tertiary: rgb(var(--color-tertiary-rgb)); --bg-main: #020c02; --bg-surface: #041404; --bg-elevated: #071a07; --text-main: #00ff41; --text-muted: #1a6e2e; --text-inv: #000000; --border-color: rgba(0, 255, 65, 0.15); --shadow: 0 2px 20px rgba(0, 255, 65, 0.12); --scrollbar-thumb: #0a3a0a; /* Bootstrap overrides */ --bs-body-bg: #020c02; --bs-body-color: #00ff41; --bs-secondary-bg: #041404; --bs-tertiary-bg: #071a07; --bs-secondary-color: #1a6e2e; --bs-border-color: rgba(0, 255, 65, 0.15); --bs-link-color: rgb(0, 255, 204); --bs-link-hover-color: rgb(255, 230, 0); --bs-card-bg: #041404; --bs-card-border-color: rgba(0,255,65,0.15); --bs-dropdown-bg: #041404; --bs-dropdown-color: #00ff41; --bs-dropdown-border-color: rgba(0,255,65,0.15); --bs-dropdown-link-color: #00ff41; --bs-dropdown-link-hover-bg: #071a07; --bs-modal-bg: #041404; --bs-modal-color: #00ff41; --bs-input-bg: #020c02; --bs-input-color: #00ff41; --bs-input-border-color: rgba(0,255,65,0.20); --bs-navbar-color: rgba(0,255,65,.75); --bs-navbar-active-color: #00ff41; } /* ============================================================ BODY & TRANSITIONS ============================================================ */ body { background-color: var(--bs-body-bg); color: var(--bs-body-color); transition: background-color 0.25s ease, color 0.25s ease; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } /* ============================================================ COMPOSANTS BOOTSTRAP — SURCHARGES THÉMATIQUES Certains composants ont des couleurs hardcodées dans BS5, on les force à suivre nos variables. ============================================================ */ /* Navbar */ .navbar { background-color: var(--bs-secondary-bg) !important; border-bottom: 1px solid var(--bs-border-color); } .navbar-custom { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)) !important; } /* Cards */ .card { background-color: var(--bs-card-bg, var(--bs-secondary-bg)); border-color: var(--bs-border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08) !important; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .card:hover { box-shadow: 0 10px 15px rgba(0,0,0,0.15), 0 4px 6px rgba(0,0,0,0.1) !important; } .card-header, .card-footer { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); } /* Dropdowns */ /* ============================================================ DROPDOWN — ANIMATION SLIDE DOWN Bootstrap ajoute/retire .show automatiquement, on surcharge juste la transition. ============================================================ */ .dropdown-menu { display: block !important; transform-origin: top center; transform: scaleY(0.85) translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; } .dropdown-menu.show { transform: scaleY(1) translateY(0); opacity: 1; pointer-events: auto; } /* Items qui glissent en cascade */ .dropdown-item, .dropdown-header, .dropdown-divider { opacity: 0; transform: translateY(-5px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.12s; } .dropdown-menu.show .dropdown-item, .dropdown-menu.show .dropdown-header, .dropdown-menu.show .dropdown-divider { opacity: 1; transform: translateY(0); } /* Délai en cascade sur les items */ .dropdown-menu.show li:nth-child(1) .dropdown-item { transition-delay: 0.04s; } .dropdown-menu.show li:nth-child(2) .dropdown-item { transition-delay: 0.07s; } .dropdown-menu.show li:nth-child(3) .dropdown-item { transition-delay: 0.10s; } .dropdown-menu.show li:nth-child(4) .dropdown-item { transition-delay: 0.13s; } .dropdown-menu.show li:nth-child(5) .dropdown-item { transition-delay: 0.16s; } .dropdown-menu.show li:nth-child(6) .dropdown-item { transition-delay: 0.19s; } .dropdown-menu.show li:nth-child(7) .dropdown-item { transition-delay: 0.22s; } .dropdown-menu.show li:nth-child(8) .dropdown-item { transition-delay: 0.25s; } .dropdown-menu.show li:nth-child(9) .dropdown-item { transition-delay: 0.28s; } .dropdown-menu.show li:nth-child(10) .dropdown-item { transition-delay: 0.31s; } .dropdown-menu.show li:nth-child(11) .dropdown-item { transition-delay: 0.34s; } /* Rotation du chevron */ .dropdown-toggle::after { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-toggle.show::after, [aria-expanded="true"].dropdown-toggle::after { transform: rotate(180deg); } .dropdown-item { color: var(--bs-dropdown-link-color, var(--bs-body-color)); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg)); color: var(--bs-body-color); } .dropdown-item.active { background-color: var(--color-primary); color: var(--text-inv); } .dropdown-header { color: var(--bs-secondary-color); } .dropdown-divider { border-color: var(--bs-border-color); } /* Formulaires */ .form-control, .form-select { background-color: var(--bs-input-bg, var(--bs-tertiary-bg)); color: var(--bs-input-color, var(--bs-body-color)); border-color: var(--bs-input-border-color, var(--bs-border-color)); } .form-control:focus, .form-select:focus { background-color: var(--bs-input-bg, var(--bs-tertiary-bg)); color: var(--bs-input-color, var(--bs-body-color)); border-color: var(--color-primary); box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25); } .form-control::placeholder { color: var(--bs-secondary-color); } /* Tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-tertiary-bg); --bs-table-hover-bg: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* Modales */ .modal-content { background-color: var(--bs-modal-bg, var(--bs-secondary-bg)); color: var(--bs-modal-color, var(--bs-body-color)); border-color: var(--bs-border-color); } .modal-header, .modal-footer { border-color: var(--bs-border-color); } /* Badges & alertes */ .badge.bg-primary { background-color: var(--color-primary) !important; color: var(--text-inv) !important; } .badge.bg-secondary { background-color: var(--color-secondary) !important; color: var(--text-inv) !important; } /* Pagination */ .page-link { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--color-primary); } .page-link:hover { background-color: var(--bs-tertiary-bg); color: var(--color-secondary); } .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--text-inv); } /* List-group */ .list-group-item { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } /* ============================================================ COULEURS DE LA MARQUE (COMPATIBLE AVEC OPACITY BOOTSTRAP) ============================================================ */ .bg-da-primary { background-color: rgba(var(--color-primary-rgb), var(--bs-bg-opacity, 1)) !important; color: white; } .bg-da-secondary { background-color: rgba(var(--color-secondary-rgb), var(--bs-bg-opacity, 1)) !important; color: white; } .bg-da-tertiary { background-color: rgba(var(--color-tertiary-rgb), var(--bs-bg-opacity, 1)) !important; color: white; } .bg-da-primary.bg-opacity-10 { color: var(--color-primary) !important; } .text-da-primary { color: var(--color-primary) !important; } .text-da-secondary { color: var(--color-secondary) !important; } .text-da-tertiary { color: var(--color-tertiary) !important; } .btn-da-primary { background-color: var(--color-primary); color: white; border: none; transition: all 0.2s ease; } .btn-da-primary:hover { background-color: var(--color-secondary); color: white; } .btn-da-tertiary { background-color: var(--color-tertiary); color: white; border: none; transition: all 0.2s ease; } .btn-da-tertiary:hover { background-color: transparent; color: var(--color-tertiary); border: 1px solid var(--color-tertiary); } /* ============================================================ UTILITAIRES TRANSVERSAUX ============================================================ */ .bg-surface { background-color: var(--bs-secondary-bg) !important; } .bg-elevated { background-color: var(--bs-tertiary-bg) !important; } .gradient-accent { background: linear-gradient(135deg, rgb(var(--color-primary-rgb)), rgb(var(--color-secondary-rgb)), rgb(var(--color-tertiary-rgb)) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .glow-primary { box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.45); } .glow-secondary { box-shadow: 0 0 12px rgba(var(--color-secondary-rgb), 0.45); } .interact-hover:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* ============================================================ ANIMATIONS DES ONGLETS ADMIN & TRANSITIONS ============================================================ */ @keyframes slideOutToLeft { to { transform: translateX(-30px); opacity: 0; } } @keyframes slideOutToRight { to { transform: translateX(30px); opacity: 0; } } @keyframes slideInFromRight { from { transform: translateX(30px); opacity: 0; } } @keyframes slideInFromLeft { from { transform: translateX(-30px); opacity: 0; } } ::view-transition-group(admin-tab) { animation-duration: 0.3s; } .slide-content-from-left { view-transition-name: admin-tab; animation: slideInFromLeft 0.4s ease-out forwards; } .slide-content-from-right { view-transition-name: admin-tab; animation: slideInFromRight 0.4s ease-out forwards; }