/* ============================================================ styleUnified.css — Ma Collection de Vinyles Thème clair + sombre en un seul fichier Bascule via data-bs-theme="dark" sur ============================================================ */ /* ============================================================ 1. VARIABLES — THÈME CLAIR (défaut) ============================================================ */ :root { color-scheme: light; /* Bootstrap 5 */ --bs-primary: #2c3e50; --bs-primary-rgb: 44, 62, 80; --bs-body-bg: #f4f6f8; --bs-body-color: #2c3e50; --bs-secondary-color: #95a5a6; --bs-border-color: #e1e8ed; --bs-card-bg: #ffffff; /* Accents & survols */ --app-accent: #3498db; --app-accent-rgb: 52, 152, 219; --app-shadow-rgb: 44, 62, 80; --app-bg-hover: #f8fbff; --app-bg-input: #ffffff; /* Navbar */ --nav-bg: rgba(255, 255, 255, 0.90); --nav-bg-scrolled: rgba(255, 255, 255, 0.98); --nav-border: rgba(255, 255, 255, 0.5); --nav-shadow: 0 4px 30px rgba(0, 0, 0, 0.04); --nav-link-color: #636e72; --nav-brand-color: #111111; --nav-link-bg-hover: rgba(52, 152, 219, 0.08); /* Dropdown */ --dd-bg: #ffffff; --dd-border: transparent; --dd-shadow: 0 10px 40px rgba(44, 62, 80, 0.1); /* Floating labels */ --fl-label-bg: #ffffff; /* Tableaux */ --table-th-bg: #fafbfc; --table-th-color: #7f8c8d; --table-th-border: #eeeeee; --table-td-border: #f8f9fa; --table-hover-bg: #f8fbff; --table-hover-color: var(--app-accent); --table-striped: rgba(0, 0, 0, 0.03); /* Barres de progression */ --progress-rail: #e9ecef; --progress-fill: var(--app-accent); --progress-glow: none; /* Boutons */ --btn-primary-bg: var(--bs-primary); --btn-primary-color: #ffffff; --btn-primary-hover-bg: var(--app-accent); /* Pagination */ --pager-bg: transparent; --pager-border: transparent; --pager-active-shadow: 0 4px 10px rgba(44, 62, 80, 0.3); /* Modals */ --modal-radius: 16px; --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); --modal-border: #f0f0f0; /* Footer */ --footer-bg: #ffffff; --footer-border: #f0f0f0; --footer-color: #b2bec3; /* Listes de référence */ --color-1001: #3498db; --color-rs500: #e74c3c; /* Grades Discogs */ --grade-mint: #2ecc71; --grade-ex: #218c74; --grade-vg-plus: #f1c40f; --grade-vg: #e67e22; --grade-vg-minus: #95a5a6; --grade-poor: #e74c3c; --grade-glow: none; /* Suggestions */ --sug-artist-color: var(--bs-primary); --sug-style-color: #3498db; --sug-graph-color: #27ae60; --sug-genre-color: #95a5a6; } /* ============================================================ 2. VARIABLES — THÈME SOMBRE ============================================================ */ [data-bs-theme="dark"] { color-scheme: dark; /* Bootstrap 5 */ --bs-primary: #a78bfa; --bs-primary-rgb: 167, 139, 250; --bs-body-bg: #1e2022; --bs-body-color: #e2e8f0; --bs-secondary-color: #94a3b8; --bs-border-color: #2d3139; --bs-card-bg: #252830; /* Accents & survols */ --app-accent: #8b5cf6; --app-accent-rgb: 139, 92, 246; --app-shadow-rgb: 0, 0, 0; --app-bg-hover: rgba(167, 139, 250, 0.08); --app-bg-input: #151719; /* Navbar */ --nav-bg: rgba(30, 32, 34, 0.95); --nav-bg-scrolled: rgba(21, 23, 25, 0.98); --nav-border: #2d3139; --nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --nav-link-color: #b0b0b0; --nav-brand-color: #ffffff; --nav-link-bg-hover: rgba(255, 255, 255, 0.05); /* Dropdown */ --dd-bg: #252830; --dd-border: #444444; --dd-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Floating labels */ --fl-label-bg: #252830; /* Tableaux */ --table-th-bg: #151515; --table-th-color: #ffffff; --table-th-border: #444444; --table-td-border: #333333; --table-hover-bg: rgba(167, 139, 250, 0.1); --table-hover-color: #ffffff; --table-striped: rgba(255, 255, 255, 0.02); /* Barres de progression */ --progress-rail: rgba(255, 255, 255, 0.1); --progress-fill: var(--bs-primary); --progress-glow: 0 0 10px rgba(187, 134, 252, 0.5); /* Boutons */ --btn-primary-bg: var(--bs-primary); --btn-primary-color: #000000; --btn-primary-hover-bg: #ffffff; /* Pagination */ --pager-bg: var(--bs-card-bg); --pager-border: #444444; --pager-active-shadow: none; /* Modals */ --modal-radius: 12px; --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); --modal-border: var(--bs-border-color); /* Footer */ --footer-bg: #000000; --footer-border: var(--bs-border-color); --footer-color: #666666; /* Listes de référence */ --color-1001: #38bdf8; --color-rs500: #f87171; /* Grades Discogs */ --grade-mint: #10b981; --grade-ex: #06b6d4; --grade-vg-plus: #f59e0b; --grade-vg: #f97316; --grade-vg-minus: #64748b; --grade-poor: #ef4444; --grade-glow: 0 0 10px; /* Suggestions */ --sug-artist-color: var(--bs-primary); --sug-style-color: #03dac6; --sug-graph-color: #69db7c; --sug-genre-color: #ced4da; } /* ============================================================ 3. BASE ============================================================ */ html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; padding-top: 90px; background-color: var(--bs-body-bg); color: var(--bs-body-color); transition: background-color 0.3s ease, color 0.3s ease; } /* Correction Bootstrap dark mode pour les textes forcés */ [data-bs-theme="dark"] .text-body, [data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] body h1, [data-bs-theme="dark"] body h2, [data-bs-theme="dark"] body h3, [data-bs-theme="dark"] body h4, [data-bs-theme="dark"] body h5, [data-bs-theme="dark"] body h6 { color: var(--bs-body-color); } a { color: var(--bs-body-color); text-decoration: none; font-weight: 600; transition: color 0.2s ease-in-out; } a:hover { color: var(--app-accent); } /* ============================================================ 4. TITRES ============================================================ */ .page-title { font-size: clamp(1.5rem, 4vw + 0.5rem, 2rem); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 1.5rem; color: var(--bs-primary); } [data-bs-theme="dark"] .page-title { color: #ffffff; } .section-title { font-size: clamp(1.25rem, 3vw + 0.5rem, 1.75rem); font-weight: 700; color: var(--bs-body-color); margin-bottom: 1rem; position: relative; display: inline-block; } .section-title::after { content: ''; display: block; width: 40px; height: 3px; background-color: var(--app-accent); margin-top: 5px; border-radius: 2px; } [data-bs-theme="dark"] .section-title::after { background-color: var(--bs-primary); } /* ============================================================ 5. NAVBAR ============================================================ */ .navbar { background-color: var(--nav-bg) !important; backdrop-filter: blur(16px); border-bottom: 1px solid var(--nav-border); box-shadow: var(--nav-shadow); padding-top: 0.8rem; padding-bottom: 0.8rem; transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; } .navbar.scrolled { background-color: var(--nav-bg-scrolled) !important; box-shadow: 0 4px 20px rgba(var(--app-shadow-rgb), 0.12); padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar-brand { font-size: 1.2rem; font-weight: 800; color: var(--nav-brand-color) !important; letter-spacing: -0.5px; } .navbar-nav .nav-link { color: var(--nav-link-color) !important; font-weight: 600; font-size: 0.95rem; padding: 0.5rem 1rem !important; border-radius: 8px; transition: color 0.2s ease, background-color 0.2s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--app-accent) !important; background-color: var(--nav-link-bg-hover); } .navbar-nav .nav-link::after { display: none; } /* Dropdown */ .dropdown-menu { background-color: var(--dd-bg); border: 1px solid var(--dd-border); border-radius: 12px; margin-top: 10px; box-shadow: var(--dd-shadow); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; display: block; pointer-events: none; } .dropdown-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-menu .dropdown-item { border-radius: 8px; padding: 0.6rem 1rem; color: var(--bs-body-color); font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; } .dropdown-menu .dropdown-item:hover { background-color: var(--app-bg-hover); color: var(--app-accent); } [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { color: #ffffff; } /* ============================================================ 6. FORMULAIRES ============================================================ */ .form-control, .form-select { background-color: var(--app-bg-input) !important; border: 1px solid var(--bs-border-color) !important; border-radius: 8px; padding: 0.6rem 1rem; color: var(--bs-body-color) !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus, .form-select:focus { border-color: var(--app-accent) !important; box-shadow: 0 0 0 0.25rem rgba(var(--app-accent-rgb), 0.15) !important; outline: none; } /* Floating labels */ .form-floating > label { color: var(--bs-secondary-color); } .form-floating > label::after { background-color: var(--fl-label-bg) !important; } .form-floating > .form-control:focus ~ label, .form-floating > .form-select:focus ~ label { color: var(--app-accent) !important; } .form-floating > .form-control, .form-floating > .form-select, .form-floating > textarea.form-control { border-radius: 0.5rem !important; } /* Champ de recherche & bouton clear */ [data-bs-theme="dark"] #q.form-control, [data-bs-theme="dark"] #clearSearchBtn.btn { background-color: var(--app-bg-input) !important; color: #ffffff !important; } /* Input group */ .input-group .input-group-text { background-color: var(--app-bg-input); border-color: var(--bs-border-color); color: var(--bs-secondary-color); } /* Suggestions autocomplete */ #suggestions { z-index: 2000; border-radius: 0 0 12px 12px; box-shadow: 0 15px 30px rgba(var(--app-shadow-rgb), 0.15); border: 1px solid var(--bs-border-color); overflow: hidden; background: var(--bs-card-bg); } /* ============================================================ 7. CARTES ALBUMS ============================================================ */ .album-card { border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 16px; box-shadow: 0 6px 20px -5px rgba(var(--app-shadow-rgb), 0.06); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; } .album-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -5px rgba(var(--app-shadow-rgb), 0.12); border-color: var(--app-accent); } [data-bs-theme="dark"] .album-card:hover { border-color: var(--bs-primary); box-shadow: 0 5px 20px rgba(167, 139, 250, 0.15); } .album-card .card-body { padding: 0.6rem !important; text-align: left; flex-grow: 0 !important; } .album-card-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .album-card-title a { color: var(--bs-body-color); } .album-card-title a:hover { color: var(--app-accent); } .album-card-artist { margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .album-card-artist a { color: var(--bs-secondary-color); font-weight: 500; font-size: 0.8rem; } .album-card-footer { background: var(--bs-card-bg); border-top: 1px solid var(--bs-border-color); padding: 0.4rem 0.6rem; font-size: 0.75rem; } [data-bs-theme="dark"] .album-card-footer { background-color: rgba(0, 0, 0, 0.3); } /* Overlay zoom image */ .album-card-image-link { position: relative; display: block; } .image-zoom-container { display: block; overflow: hidden; cursor: pointer; } .image-zoom-container img { transition: transform 0.3s ease; } .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; border-radius: inherit; } .image-zoom-container:hover img { transform: scale(1.03); } .image-zoom-container:hover .zoom-overlay { opacity: 1; } /* Bouton d'édition sur survol carte */ .album-card .edit-btn { opacity: 0; transform: translateY(15px) scale(0.9); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; } .album-card:hover .edit-btn { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .album-card .edit-btn:focus-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Bouton d'édition en vue liste */ .btn-edit-list { opacity: 0.5; transition: opacity 0.2s ease, transform 0.2s ease; } .btn-edit-list:hover { opacity: 1; transform: scale(1.15); } /* ============================================================ 8. CARTES SUGGESTIONS ============================================================ */ .suggestion-card { border: 1px solid var(--bs-border-color); height: 100%; border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); transition: transform 0.2s ease, border-color 0.2s ease; overflow: hidden; } .suggestion-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } [data-bs-theme="dark"] .suggestion-card:hover { border-color: #555555; } .suggestion-card .album-card-body { padding: 0.8rem; text-align: left; } .suggestion-card .card-title, .suggestion-card .text-dark, .suggestion-card .card-text { color: var(--bs-body-color); } .suggestion-card .card-subtitle, .suggestion-card .album-card-artist { color: var(--bs-secondary-color); } .suggestion-card-artist { border-top: 3px solid var(--sug-artist-color); } .suggestion-card-shared-styles { border-top: 3px solid var(--sug-style-color); } .suggestion-card-graph-score { border-top: 3px solid var(--sug-graph-color); } .suggestion-card-genre { border-top: 3px solid var(--sug-genre-color); } /* ============================================================ 9. BADGES ============================================================ */ .badge { font-size: 0.65em; font-weight: 700; padding: 0.4em 0.8em; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase; backdrop-filter: blur(8px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Badges light */ .badge.bg-danger { background-color: rgba(255, 235, 238, 0.95) !important; color: #e74c3c !important; border: 1px solid rgba(231, 76, 60, 0.15); } .badge.bg-info { background-color: rgba(235, 245, 251, 0.95) !important; color: #3498db !important; border: 1px solid rgba(52, 152, 219, 0.15); } .badge.bg-success { background-color: rgba(233, 247, 239, 0.95) !important; color: #27ae60 !important; border: 1px solid rgba(39, 174, 96, 0.15); } .badge.bg-primary { background-color: rgba(236, 240, 241, 0.95) !important; color: var(--bs-primary) !important; } .badge.bg-secondary { background-color: rgba(245, 245, 245, 0.95) !important; color: #7f8c8d !important; } .badge.bg-secondary-subtle { background-color: #ecf0f1 !important; color: #7f8c8d !important; border: none !important; } .badge.bg-info-subtle { background-color: #eaf2f8 !important; color: #3498db !important; border: none !important; } .badge.bg-light { background-color: var(--bs-card-bg) !important; border: 1px solid var(--bs-border-color) !important; color: var(--bs-secondary-color) !important; } /* Badges dark */ [data-bs-theme="dark"] .badge { background-color: rgba(0, 0, 0, 0.7); border: 1px solid #444444; color: #eeeeee; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .badge.bg-danger { border-color: #ff6b6b !important; color: #ff6b6b !important; } [data-bs-theme="dark"] .badge.bg-info { border-color: #4dabf7 !important; color: #4dabf7 !important; } [data-bs-theme="dark"] .badge.bg-success { border-color: #69db7c !important; color: #69db7c !important; } [data-bs-theme="dark"] .badge.bg-info-subtle { background-color: rgba(3, 218, 198, 0.15) !important; color: #03dac6 !important; border: 1px solid rgba(3, 218, 198, 0.3) !important; } [data-bs-theme="dark"] .album-card .badge.bg-primary { background-color: rgba(167, 139, 250, 0.1) !important; color: var(--bs-primary) !important; border: 1px solid rgba(167, 139, 250, 0.2) !important; } [data-bs-theme="dark"] .album-card .badge.bg-secondary { background-color: rgba(148, 163, 184, 0.1) !important; color: var(--bs-secondary-color) !important; border: 1px solid rgba(148, 163, 184, 0.2) !important; } [data-bs-theme="dark"] .album-card .badge.bg-light { background-color: #2b2b2b !important; color: #a0a0a0 !important; border-color: #3a3a3a !important; } /* ============================================================ 10. BADGES GRADES DISCOGS ============================================================ */ .grade-badge { display: inline-flex; align-items: center; justify-content: center; color: #ffffff !important; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-right: 10px; width: 36px; height: 36px; flex-shrink: 0; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), inset 0 2px 2px rgba(255, 255, 255, 0.25) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; background-image: linear-gradient(to bottom right, rgba(255,255,255,0.15), rgba(0,0,0,0.05)); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .grade-badge:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important; transform: translateY(1px); } .badge-disk { border-radius: 50%; } .badge-sleeve { border-radius: 6px; } .grade-m, .grade-mint, .grade-nm, .grade-near-mint { background-color: var(--grade-mint) !important; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), var(--grade-glow) rgba(46, 204, 113, 0.5) !important; } .grade-ex, .grade-excellent { background-color: var(--grade-ex) !important; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), var(--grade-glow) rgba(6, 182, 212, 0.5) !important; } .grade-vg-plus-plus, .grade-vg-plus { background-color: var(--grade-vg-plus) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), var(--grade-glow) rgba(253, 203, 110, 0.5) !important; } .grade-vg, .grade-very-good { background-color: var(--grade-vg) !important; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), var(--grade-glow) rgba(249, 115, 22, 0.5) !important; } .grade-vg-minus { background-color: var(--grade-vg-minus) !important; border-color: rgba(0, 0, 0, 0.1) !important; } .grade-g, .grade-good, .grade-p, .grade-poor, .grade-b { background-color: var(--grade-poor) !important; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), var(--grade-glow) rgba(214, 48, 49, 0.5) !important; } .grade-na { background-color: transparent !important; color: var(--bs-secondary-color) !important; border: 2px dashed var(--bs-secondary-color) !important; box-shadow: none !important; } [data-bs-theme="dark"] .grade-badge { text-shadow: none; background-image: none; } /* Badges "pill" avec texte foncé sur fond clair : pas de text-shadow sombre */ [data-bs-theme="dark"] .badge.text-dark, [data-bs-theme="dark"] .badge.bg-secondary-subtle { text-shadow: none; background-color: initial; border: none; } [data-bs-theme="dark"] .badge.bg-info.text-dark { background-color: #4dabf7 !important; color: #001a2c !important; } [data-bs-theme="dark"] .badge.bg-secondary-subtle { background-color: rgba(148, 163, 184, 0.15) !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; } /* ============================================================ 11. TABLEAUX & STATS ============================================================ */ .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--table-striped); margin-bottom: 0; } .table th { background-color: var(--table-th-bg); color: var(--table-th-color); border-bottom: 1px solid var(--table-th-border); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; padding: 1rem; font-weight: 700; } [data-bs-theme="dark"] .table th { font-size: 0.8rem; border-bottom-width: 2px; } .table td { color: var(--bs-body-color) !important; border-bottom: 1px solid var(--table-td-border); vertical-align: middle; padding: 0.5rem 1rem; } .table td a { color: var(--bs-body-color) !important; } .table-hover > tbody > tr { transition: background-color 0.2s ease-in-out; } .table-hover > tbody > tr:hover > * { background-color: var(--table-hover-bg) !important; color: var(--table-hover-color) !important; } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-striped); box-shadow: inset 0 0 0 9999px var(--table-striped); color: var(--bs-body-color); } /* Stats */ .stats-table { table-layout: fixed; width: 100%; } .stats-table th:first-child, .stats-table td:first-child { width: 30%; } .stats-table td:nth-child(2) > div { width: 100% !important; display: flex !important; align-items: center !important; } /* Barres de progression */ .stat-progress-bg { background-color: var(--progress-rail) !important; overflow: hidden; border-radius: 50rem; } .stat-progress-fill { background-color: var(--progress-fill) !important; box-shadow: var(--progress-glow); height: 100%; } /* ============================================================ 12. BOUTONS ============================================================ */ .btn { border-radius: 8px; padding: 0.5rem 1.2rem; font-weight: 600; font-size: 0.9rem; line-height: 1.5; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; box-shadow: 0 2px 6px rgba(var(--app-shadow-rgb), 0.08); transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn:active { transform: scale(0.98); } .btn:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } .btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-color); } .btn-primary:hover { background-color: var(--btn-primary-hover-bg); transform: translateY(-2px); box-shadow: 0 8px 15px rgba(var(--app-accent-rgb), 0.3); color: var(--btn-primary-color); } [data-bs-theme="dark"] .btn-primary:hover { color: #000000; } .btn-outline-secondary { border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); background: transparent; } .btn-outline-secondary:hover { background-color: var(--bs-card-bg); border-color: var(--app-accent); color: var(--app-accent); } [data-bs-theme="dark"] .btn-outline-secondary { border-color: #555555; color: #aaaaaa; } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: #ffffff; color: #000000; border-color: #ffffff; } .btn-xs { padding: 0.15rem 0.5rem !important; font-size: 0.7rem !important; border-radius: 6px; } .btn-close { filter: var(--bs-btn-close-filter, none); } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Bouton info circulaire */ .btn-info-minimal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: rgba(128, 128, 128, 0.1); color: var(--bs-secondary-color); transition: all 0.3s ease; } .btn-info-minimal:hover { background-color: var(--app-accent); color: #ffffff; transform: rotate(15deg) scale(1.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* Bouton "Lire la suite" */ .description-container { position: relative; transition: max-height 0.5s ease; } .description-container.collapsed::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: linear-gradient(transparent, var(--bs-card-bg)); pointer-events: none; } #btn-read-more { display: block; margin: 10px auto 0; padding: 4px 14px; border: 1px solid var(--bs-primary); background: transparent; color: var(--bs-primary); border-radius: 20px; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; } #btn-read-more:hover { background: var(--bs-primary); color: #ffffff !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* Boutons mode de recherche (Par Album / Par Piste) — classe maison, pas de conflit Bootstrap */ .btn-mode-toggle { color: var(--app-accent); border: 1px solid var(--app-accent); background-color: transparent; } .btn-mode-toggle:hover { background-color: rgba(var(--app-accent-rgb), 0.1); } .btn-check:checked + .btn-mode-toggle { background-color: var(--app-accent); border-color: var(--app-accent); color: #ffffff; } .btn-check:checked + .btn-mode-toggle:hover { opacity: 0.9; } [data-bs-theme="dark"] .btn-check:checked + .btn-mode-toggle { color: #000000; } /* Boutons btn-light (dés, poubelle, actions secondaires) */ .btn-light { background-color: var(--bs-card-bg) !important; border: 1px solid var(--bs-border-color) !important; color: var(--bs-body-color) !important; } .btn-light:hover { background-color: var(--app-bg-hover) !important; border-color: var(--app-accent) !important; } [data-bs-theme="dark"] .btn-light:hover { background-color: rgba(255, 255, 255, 0.05) !important; } /* Bouton réinitialiser (poubelle) : accent rouge au survol */ .btn-light.text-danger:hover { background-color: rgba(220, 53, 69, 0.1) !important; border-color: #dc3545 !important; color: #dc3545 !important; } [data-bs-theme="dark"] .btn-light.text-danger:hover { background-color: rgba(255, 107, 107, 0.1) !important; border-color: #ff6b6b !important; color: #ff6b6b !important; } /* ============================================================ 13. PAGINATION ============================================================ */ .page-link { background-color: var(--pager-bg); border-color: var(--pager-border); color: var(--bs-body-color); border-radius: 8px; margin: 0 2px; font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease; } .page-link:hover { background-color: var(--app-bg-hover); color: var(--app-accent); } .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #ffffff; box-shadow: var(--pager-active-shadow); } [data-bs-theme="dark"] .page-item.active .page-link { color: #000000; } .page-item.disabled .page-link { background-color: transparent; color: var(--bs-secondary-color); border-color: transparent; } /* ============================================================ 14. MODALS ============================================================ */ .modal-content { border: none; border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); background-color: var(--bs-card-bg); color: var(--bs-body-color); } .modal-header, .modal-footer { border-color: var(--modal-border); } /* ============================================================ 15. CLASSEMENTS (1001 / RS500) ============================================================ */ .ranking-badge-link { display: block; padding: 1.5rem; border-radius: 16px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 4px 15px rgba(var(--app-shadow-rgb), 0.05); color: var(--bs-body-color); } .ranking-badge-link:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(var(--app-shadow-rgb), 0.1); } [data-bs-theme="dark"] .ranking-badge-link { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); color: #ffffff; } [data-bs-theme="dark"] .ranking-badge-link:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); } .ranking-badge-link img { width: 65px; max-width: 65px; height: auto; object-fit: contain; } .link-rs500 img, .link-1001 img { background-color: rgba(255, 255, 255, 0.9); padding: 2px 4px; border-radius: 4px; margin-right: 1rem; } .link-1001 img { width: 50px; } .link-1001 { border-left: 5px solid var(--color-1001); } .link-rs500 { border-left: 5px solid var(--color-rs500); } .link-1001 h5, .link-1001 .fs-4 { color: var(--color-1001); } .link-rs500 h5, .link-rs500 .fs-4 { color: var(--color-rs500); } .link-1001:hover { border-color: var(--color-1001); } .link-1001:hover h5, .link-1001:hover span, .link-1001:hover small { color: var(--color-1001); } .link-rs500:hover { border-color: var(--color-rs500); } .link-rs500:hover h5, .link-rs500:hover span, .link-rs500:hover small { color: var(--color-rs500); } .ranking-card { background: transparent; border: none; } .card-1001 a, .card-rs500 a { color: var(--bs-body-color); } .card-1001 a:hover { color: var(--color-1001); } .card-rs500 a:hover { color: var(--color-rs500); } .card-1001 .badge { color: var(--color-1001) !important; border-color: rgba(52, 152, 219, 0.3) !important; } .card-rs500 .badge { color: var(--color-rs500) !important; border-color: rgba(231, 76, 60, 0.3) !important; } .ranking-badge-link .progress { background-color: var(--progress-rail); border-radius: 10px; overflow: hidden; } .pb-1001 { background-color: var(--color-1001) !important; background-image: none !important; height: 100%; } .pb-rs500 { background-color: var(--color-rs500) !important; background-image: none !important; height: 100%; } /* ============================================================ 16. FOOTER ============================================================ */ .app-footer { background-color: var(--footer-bg); border-top: 1px solid var(--footer-border); color: var(--footer-color); } .footer-text { font-size: 0.85rem; font-weight: 500; } /* ============================================================ 17. ACCESSIBILITÉ — MOUVEMENTS RÉDUITS ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 18. PAGE STATISTIQUES — Style minimaliste ============================================================ */ .stat-line { padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--bs-border-color); font-size: 0.9rem; } .stat-line:last-child { border-bottom: none; } .stat-line-value { font-weight: 700; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; } .stat-hero-item { border-right: 1px solid var(--bs-border-color); position: relative; overflow: hidden; } .stat-hero-item:last-child { border-right: none; } .stat-hero-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: var(--accent-color, var(--app-accent)); opacity: 0.7; } .stat-hero-icon { font-size: 0.9rem; color: var(--accent-color, var(--app-accent)); opacity: 0.7; margin-bottom: 0.15rem; display: block; } .stat-hero-number { color: var(--accent-color, var(--bs-body-color)); } .stat-hero-primary { --accent-color: #2c3e50; } .stat-hero-warning { --accent-color: #f39c12; } .stat-hero-success { --accent-color: #27ae60; } .stat-hero-danger { --accent-color: #e74c3c; } .stat-hero-info { --accent-color: #3498db; } [data-bs-theme="dark"] .stat-hero-primary { --accent-color: #a78bfa; } [data-bs-theme="dark"] .stat-hero-warning { --accent-color: #f59e0b; } [data-bs-theme="dark"] .stat-hero-success { --accent-color: #10b981; } [data-bs-theme="dark"] .stat-hero-danger { --accent-color: #ff6b6b; } [data-bs-theme="dark"] .stat-hero-info { --accent-color: #4dabf7; } @media (max-width: 767px) { .stat-hero-item:nth-child(2n) { border-right: none; } .stat-hero-item:nth-child(n+3) { border-top: 1px solid var(--bs-border-color); } } .stat-tabs .nav-link { color: var(--bs-secondary-color); font-weight: 600; font-size: 0.85rem; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; background: transparent; } .stat-tabs .nav-link:hover { color: var(--app-accent); } .stat-tabs .nav-link.active { color: var(--app-accent); background: transparent; border-bottom-color: var(--app-accent); } .stat-tab-scroll { max-height: 340px; overflow-y: auto; } .stat-tab-grid { row-gap: 0; } .stat-tab-grid > .col:nth-child(odd) { padding-right: 1.5rem; } .stat-tab-grid > .col:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--bs-border-color); } @media (max-width: 767px) { .stat-tab-grid > .col:nth-child(even) { padding-left: 0.75rem; border-left: none; border-top: 1px solid var(--bs-border-color); } .stat-tab-grid > .col:nth-child(odd) { padding-right: 0.75rem; } } /* ============================================================ 20. PAGE ÉDITION DES RANGEMENTS ============================================================ */ .rangement-photo-wrap { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .rangement-zones-overlay { position: absolute; inset: 0; display: flex; } .rangement-zone { flex: 1; position: relative; border-right: 1px solid rgba(255,255,255,0.4); cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; min-width: 0; /* Empêche le débordement flex */ } .rangement-zone:last-child { border-right: none; } .rangement-zone:hover { background-color: rgba(var(--app-accent-rgb), 0.3); } .zone-label { background: rgba(0,0,0,0.55); color: #fff; font-weight: 700; font-size: 0.6rem; padding: 4px 3px; border-radius: 4px; text-align: center; writing-mode: vertical-rl; /* Texte vertical */ text-orientation: mixed; transform: rotate(180deg); /* Sens bas → haut pour faciliter la lecture */ max-height: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; } .rangement-entiere-input { display: none; } .rangement-case-card.entiere-mode .rangement-zones-overlay { display: none; } .rangement-case-card.entiere-mode .rangement-zone-inputs { display: none; } .rangement-case-card.entiere-mode .rangement-entiere-input { display: block; } /* Rangement Photo Container */ .rangement-photo-container { position: relative; display: flex; align-items: center; justify-content: center; } .rangement-photo-container img { display: block; width: 100%; height: auto; } /* Grille visuelle VERTICALE de 12 zones */ .rangement-grid-overlay { top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .rangement-grid-line { background: rgba(0, 0, 0, 0.08); transition: background 0.3s ease; } .rangement-photo-container:hover .rangement-grid-line { background: rgba(0, 0, 0, 0.15); } /* Indicateur de position du disque (bande VERTICALE) */ .album-position-indicator { transition: all 0.3s ease; box-shadow: inset 0 8px 8px rgba(255, 0, 0, 0.2); } .album-position-indicator::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.15) 50%, rgba(255, 0, 0, 0) 100%); } /* Effet au survol (optionnel) */ .rangement-photo-container:hover .album-position-indicator { background: rgba(255, 0, 0, 0.2); border-left-color: rgba(255, 0, 0, 1); border-right-color: rgba(255, 0, 0, 1); } /* Input pagination - fond blanc forcé dans tous les thèmes */ input[id^="pageInput_"] { background-color: #ffffff !important; color: #000000 !important; border: 2px solid var(--bs-primary) !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(var(--app-accent-rgb), 0.3) !important; } [data-bs-theme="dark"] input[id^="pageInput_"] { background-color: #ffffff !important; color: #000000 !important; border: 2px solid var(--app-accent) !important; } /* ============================================================ 19. RESPONSIVE ============================================================ */ @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 992px) { .album-card-artist a { font-size: 0.90rem !important; font-weight: 600; } } @media (max-width: 768px) { .album-card-title { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; line-height: 1.2; } .album-styles-container { height: 2.8em !important; overflow: hidden; align-content: flex-start; } .badge-style { font-size: 0.6rem !important; padding: 0.2em 0.5em !important; } .album-card .card-body { padding: 0.5rem !important; } .table th, .table td { padding: 0.5rem 0.3rem; font-size: 0.75rem; } .list-item-thumbnail { width: 40px !important; height: 40px !important; } .table td strong a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; } /* Carrousel horizontal suggestions */ .suggestions .row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; -ms-overflow-style: none; } .suggestions .row::-webkit-scrollbar { display: none; } .suggestions .row > .col-6 { flex: 0 0 48%; max-width: 48%; scroll-snap-align: start; display: block !important; padding-left: 8px; padding-right: 8px; } .suggestions .card-title { font-size: 0.85rem; } .suggestions .badge { font-size: 0.65rem; } } @media (max-width: 576px) { .stats-table th:first-child, .stats-table td:first-child { width: 40%; } .album-card-title { font-size: 0.85rem !important; } .album-card-artist a { font-size: 0.75rem !important; } .grade-badge { width: 32px; height: 32px; font-size: 0.7rem; margin-right: 6px; } main.container { padding-top: 1rem !important; } .page-title { font-size: 1.5rem !important; margin-bottom: 1rem; } .input-group.ms-auto { width: 100% !important; margin-top: 0.5rem; } #filters-container .btn-sm { font-size: 0.7rem !important; padding: 0.2rem 0.5rem !important; } #filters-container .dropdown-toggle::after { margin-left: 0.15em; } #filters-container .bi-x-circle-fill { font-size: 0.8rem; } #filters-container .gap-1 { gap: 0.35rem !important; } .breadcrumb-album-title { font-size: 0.80rem; } }