/* style.css - FEUILLE DE STYLE GLOBALE & THEMES A.T.L.A.S. */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Share+Tech+Mono&family=Creepster&family=Wallpoet&display=swap'); /* ========================================================================== 1. DICTIONNAIRES DE THEMES ========================================================================== */ /* THEME PAR DÉFAUT (Standard Classique) */ :root, .theme-default { /* Palette de Fonds */ --bg-base: #0b0c15; --bg-panel: #151720; --bg-hover: #1a1d29; --bg-header: #1f2330; --bg-footer: #090a11; /* Palette de Bordures */ --border-main: #2b3040; --border-light: #444444; /* Palette de Textes */ --text-title: #ffffff; --text-main: #cccccc; --text-muted: #888888; /* Couleurs d'Accentuation (Néons) */ --neon-blue: #00d0ff; --neon-gold: #ffd700; --neon-red: #ff5050; --neon-green: #50ff50; /* Effets et Ombres */ --shadow-glow: rgba(0, 208, 255, 0.3); --shadow-box: rgba(0, 0, 0, 0.3); } /* THEME ATLAS OS (MobiGlas) */ .theme-atlas_os { --bg-base: #050a10; --bg-panel: #0a121c; --bg-hover: #0f1a29; --bg-header: #0a121c; --bg-footer: #030508; --border-main: #1a2a40; --border-light: #2a3a50; --text-title: #e6f0fa; --text-main: #b0c4de; --text-muted: #5a7a9a; --neon-blue: #00aaff; --neon-gold: #ffaa00; --neon-red: #ff3333; --neon-green: #33ff33; --shadow-glow: rgba(0, 170, 255, 0.4); --shadow-box: rgba(0, 0, 0, 0.5); } /* THEME VANDUUL (Alien / Hostile / Menaçant) */ .theme-vanduul { --bg-base: #050000; --bg-panel: #110000; --bg-hover: #220000; --bg-header: #1a0000; --bg-footer: #050000; --border-main: #550000; --border-light: #880000; --text-title: #ff4444; --text-main: #cc7777; --text-muted: #884444; /* Inversion agressive des néons */ --neon-blue: #ff0000; /* Le bleu pacifique devient rouge sang */ --neon-gold: #ff6600; /* L'or devient orange brûlé */ --neon-red: #cc0000; --neon-green: #ff3300; /* Le vert (succès) devient rouge vif */ --shadow-glow: rgba(255, 0, 0, 0.6); --shadow-box: rgba(255, 0, 0, 0.3); } /* Surcharges structurelles pour l'ambiance Extraterrestre */ .theme-vanduul h1, .theme-vanduul h2, .theme-vanduul h3, .theme-vanduul .atlas-title, .theme-vanduul .win-title { font-family: 'Creepster', cursive !important; letter-spacing: 3px; text-shadow: 0 0 10px var(--neon-red); text-transform: uppercase; } .theme-vanduul body, .theme-vanduul .container, .theme-vanduul input, .theme-vanduul select, .theme-vanduul textarea { font-family: 'Wallpoet', sans-serif !important; } .theme-vanduul .box { border-radius: 0; border: 2px solid var(--border-main); border-top: 4px solid var(--neon-red); background: repeating-linear-gradient(45deg, #110000, #110000 10px, #0a0000 10px, #0a0000 20px); } .theme-vanduul .nav-btn, .theme-vanduul button { border-radius: 0 !important; clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%); border: 1px solid var(--neon-red) !important; text-transform: uppercase; font-weight: bold; } /* ========================================================================== 1.5. COMPOSANTS STANDARDS (UI KIT GLOBAL) ========================================================================== */ .box { background: var(--bg-panel); border: 1px solid var(--border-main); padding: 20px; border-radius: 6px; margin-bottom: 20px; } .msg { padding: 15px; margin-bottom: 20px; border-radius: 4px; font-weight: bold; text-align: center; } .msg.error { background: rgba(255, 80, 80, 0.2); border: 1px solid var(--neon-red); color: var(--neon-red); } .msg.success { background: rgba(80, 255, 80, 0.2); border: 1px solid var(--neon-green); color: var(--neon-green); } .msg.info { background: rgba(0, 208, 255, 0.2); border: 1px solid var(--neon-blue); color: var(--neon-blue); } .input-dark { background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 8px 12px; border-radius: 4px; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .input-dark:focus { border-color: var(--neon-blue); box-shadow: 0 0 5px var(--shadow-glow); } .btn-primary, .btn-danger, .btn-warning, .btn-success { border: none; padding: 8px 15px; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.2s; text-transform: uppercase; font-size: 0.9em; } .btn-primary { background: var(--neon-blue); color: #000; } .btn-primary:hover { filter: brightness(1.2); box-shadow: 0 0 10px var(--shadow-glow); } .btn-danger { background: rgba(255, 80, 80, 0.2); border: 1px solid var(--neon-red); color: var(--neon-red); } .btn-danger:hover { background: var(--neon-red); color: #fff; box-shadow: 0 0 10px var(--neon-red); } a.btn-danger { padding: 8px 15px; border-radius: 4px; text-decoration: none; display: inline-block; font-weight: bold; font-size: 0.9em; } .btn-warning { background: var(--neon-gold); color: #000; } .btn-warning:hover { filter: brightness(1.2); box-shadow: 0 0 10px var(--neon-gold); } .btn-success { background: rgba(80, 255, 80, 0.2); border: 1px solid var(--neon-green); color: var(--neon-green); } .btn-success:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 10px var(--neon-green); } /* ========================================================================== 1.6. STRUCTURE GLOBALE (INDEX / LAYOUT) ========================================================================== */ body { background: var(--bg-base); color: var(--text-main); font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; } .container { padding: 20px; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; } .navbar { background: var(--bg-panel); border-bottom: 2px solid var(--border-main); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 10px var(--shadow-box); flex-wrap: wrap; gap: 10px; } .nav-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .user-info { color: var(--text-muted); font-size: 0.85em; margin-right: 10px; border-right: 1px solid var(--border-main); padding-right: 10px; white-space: nowrap; } .user-info strong { color: var(--text-title); font-size: 1.05em; } .nav-btn { text-decoration: none; padding: 6px 12px; border-radius: 4px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; transition: all 0.3s ease; border: 1px solid transparent; display: inline-block; white-space: nowrap; } @keyframes msgBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.5; } } .nav-btn-msg-alert { animation: msgBlink 1s infinite; color: var(--neon-gold) !important; } .nav-btn-default { background: rgba(0, 208, 255, 0.1); color: var(--neon-blue); border-color: transparent; } .nav-btn-default:hover, .nav-btn-default.active { background: var(--neon-blue); color: #000 !important; box-shadow: 0 0 10px var(--shadow-glow); } .nav-btn-admin { background: rgba(255, 215, 0, 0.1); color: var(--neon-gold); border-color: transparent; } .nav-btn-admin:hover { background: var(--neon-gold); color: #000; } .nav-btn-logout { background: rgba(255, 80, 80, 0.1); color: var(--neon-red); border-color: transparent; } .nav-btn-logout:hover { background: var(--neon-red); color: #fff; } .mini-search { position: relative; margin-right: 10px; display: inline-block; } .mini-search input[type="text"] { background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 0 35px 0 12px; border-radius: 20px; width: 160px; height: 32px; line-height: 32px; transition: all 0.3s ease; outline: none; font-size: 0.85em; margin: 0; box-sizing: border-box; } .mini-search input[type="text"]:focus { border-color: var(--neon-blue); width: 220px; box-shadow: 0 0 10px var(--shadow-glow); } .search-icon { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; height: 1em; line-height: 1em; font-size: 1em; opacity: 0.7; pointer-events: none; } .search-dropdown { position: fixed; background: var(--bg-panel); border: 1px solid var(--neon-blue); border-radius: 8px; max-height: 350px; overflow-y: auto; z-index: 99999; display: none; box-shadow: 0 8px 30px rgba(0,0,0,0.7); max-width: 400px; } .search-dropdown.open { display: block; animation: dropdownFadeIn 0.15s ease-out; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .search-result { display: block; padding: 10px 12px; color: var(--text-title); text-decoration: none; border-bottom: 1px solid var(--border-main); transition: background 0.2s; } .search-result:last-child { border-bottom: none; } .search-result:hover { background: var(--bg-hover); } .search-result-title { font-weight: bold; font-size: 0.95em; } .search-result-meta { font-size: 0.75em; color: var(--text-muted); margin-top: 2px; } .search-result .highlight { color: var(--neon-gold); background: rgba(255,215,0,0.15); padding: 0 2px; border-radius: 2px; } .search-create { border-top: 1px dashed var(--neon-blue); background: rgba(0,208,255,0.05); } .search-create:hover { background: rgba(0,208,255,0.15); } .search-kbd { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 0.7em; color: var(--text-muted); background: var(--bg-header); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border-light); } a { color: var(--neon-blue); text-decoration: none; transition: 0.3s; } a:hover { color: var(--text-title); } a.nav-btn { color: inherit; } /* Global generic HTML elements */ input:not([type="checkbox"]):not([type="radio"]), select { background: var(--bg-base); color: var(--text-title); border: 1px solid var(--border-light); padding: 8px; margin: 5px 0; border-radius: 3px; } button:not(.nav-btn):not(.close-modal):not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.tab-btn):not(.sub-btn) { background: var(--neon-blue); color: #000; border: none; padding: 8px 15px; cursor: pointer; font-weight: bold; border-radius: 3px; text-transform: uppercase; transition: 0.2s; } button:not(.nav-btn):not(.close-modal):not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.tab-btn):not(.sub-btn):hover { background: #fff; box-shadow: 0 0 10px var(--shadow-glow); } table { width: 100%; border-collapse: collapse; background: var(--bg-panel); margin-top:10px; } th, td { border: 1px solid var(--border-main); padding: 10px; text-align: left; vertical-align: middle; } th { background: var(--bg-header); color: var(--text-title); } .admin-form { display: flex; align-items: center; gap: 5px; margin: 0; } .admin-form select, .admin-form input { padding: 4px; font-size: 0.85em; width: auto; background: var(--bg-hover); } .admin-form button { padding: 4px 8px; font-size: 0.8em; } .site-footer { margin-top: auto; padding: 30px; text-align: center; color: var(--text-muted); font-size: 0.85em; background: var(--bg-footer); border-top: 1px solid var(--border-main); } .version-tag { background: var(--bg-panel); padding: 2px 8px; border-radius: 4px; color: var(--text-muted); font-family: monospace; cursor: pointer; transition: 0.3s; border: 1px solid transparent; } .version-tag:hover { color: var(--neon-blue); border-color: var(--neon-blue); background: rgba(0, 208, 255, 0.1); } #backToTop { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 9999; border: 1px solid var(--neon-blue); outline: none; background-color: rgba(0,0,0,0.8); color: var(--neon-blue); cursor: pointer; padding: 10px 15px; border-radius: 4px; font-size: 18px; box-shadow: 0 0 15px var(--shadow-glow); transition: all 0.3s ease; } #backToTop:hover { background-color: var(--neon-blue); color: #000; box-shadow: 0 0 25px var(--shadow-glow); transform: translateY(-3px); } #reportBtn { position: fixed; bottom: 30px; left: 30px; z-index: 9999; background-color: rgba(255, 80, 80, 0.1); border: 1px solid var(--neon-red); color: var(--neon-red); cursor: pointer; padding: 10px 15px; border-radius: 4px; font-size: 18px; box-shadow: 0 0 15px rgba(255, 80, 80, 0.2); transition: all 0.3s ease; } #reportBtn:hover { background-color: var(--neon-red); color: #fff; box-shadow: 0 0 25px rgba(255, 80, 80, 0.6); transform: translateY(-3px); } /* Modales d'Index (Changelog et Support) */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; justify-content: center; align-items: center; } .modal-overlay.open { display: flex; } .modal-content { background: var(--bg-panel); width: 90%; max-width: 500px; padding: 25px; border: 1px solid var(--neon-blue); border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.8); display: flex; flex-direction: column; max-height: 90vh; } .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid var(--border-main); padding-bottom:10px; } .modal-header h3 { margin:0; color:var(--text-title); } .modal-body { overflow-y: auto; padding-right: 5px; } .close-modal { background:none; border:none; color:var(--neon-red); font-size:1.5em; cursor:pointer; } .changelog-item { margin-bottom: 20px; border-bottom: 1px dashed var(--border-main); padding-bottom: 15px; } .changelog-item:last-child { border-bottom: none; } .cl-ver { color: var(--neon-blue); font-weight: bold; font-size: 1.1em; } .cl-date { color: var(--text-muted); font-size: 0.85em; margin-left: 10px; } .cl-list { margin: 10px 0 0 20px; padding: 0; list-style-type: none; color: var(--text-main); } .cl-list li { margin-bottom: 5px; position: relative; } .cl-list li::before { content: "•"; color: var(--neon-blue); position: absolute; left: -15px; } /* ========================================================================== 2. MODULE : ACCUEIL (#page-home) ========================================================================== */ #page-home .title-wrapper { display: inline-block; position: relative; padding: 10px 20px; margin-bottom: 40px; } #page-home .atlas-title { font-family: 'Orbitron', sans-serif; font-size: 5em; font-weight: 700; margin: 0; color: var(--text-title); text-transform: uppercase; position: relative; padding: 15px 40px; border-top: 1px solid var(--shadow-glow); border-bottom: 1px solid var(--shadow-glow); background: radial-gradient(circle, rgba(0, 208, 255, 0.05) 0%, transparent 70%); text-shadow: 0 0 10px var(--shadow-glow); letter-spacing: 0.15em; transform: scaleX(1.3); display: inline-block; } #page-home .atlas-title::before { content: ''; position: absolute; top: -2px; left: 0; width: 50px; height: 3px; background: var(--text-title); box-shadow: 0 0 10px var(--text-title), 0 0 20px var(--neon-blue); animation: circuit-run 3s linear infinite; opacity: 0; } #page-home .atlas-title::after { content: ''; position: absolute; bottom: -2px; right: 0; width: 50px; height: 3px; background: var(--text-title); box-shadow: 0 0 10px var(--text-title), 0 0 20px var(--neon-blue); animation: circuit-run-rev 3s linear infinite; opacity: 0; } #page-home .atlas-sub { font-family: 'Share Tech Mono', monospace; font-size: 1.1em; color: var(--neon-blue); margin-top: 10px; letter-spacing: 2px; opacity: 0.8; } @keyframes circuit-run { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes circuit-run-rev { 0% { right: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { right: 100%; opacity: 0; } } #page-home .motd-box { max-width: 800px; margin: 40px auto 0; background: var(--bg-panel); border: 1px solid var(--border-main); border-top: 4px solid var(--neon-green); border-radius: 4px; padding: 20px; text-align: left; position: relative; } #page-home .motd-title { margin: 0 0 15px 0; color: var(--text-title); font-size: 1.2em; display: flex; justify-content: space-between; align-items: center; } #page-home .motd-content { color: var(--text-main); font-size: 1em; line-height: 1.6; white-space: pre-wrap; font-family: 'Segoe UI', sans-serif; } #page-home .edit-btn { background: none; border: 1px solid var(--border-light); color: var(--text-muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8em; transition: 0.3s; } #page-home .edit-btn:hover { border-color: var(--neon-gold); color: var(--neon-gold); } #page-home .discord-link-pulse { color: var(--neon-red) !important; font-style: italic; text-decoration: none !important; animation: pulse-red 3s ease-in-out infinite; cursor: pointer; display: inline-block; } @keyframes pulse-red { 0%, 100% { opacity: 1; text-shadow: 0 0 5px var(--neon-red); } 50% { opacity: 0.5; text-shadow: 0 0 20px var(--neon-red); } } #page-home .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; } #page-home .modal-overlay.open { display: flex; } #page-home .modal-content { background: var(--bg-panel); width: 90%; max-width: 600px; padding: 20px; border: 1px solid var(--neon-gold); border-radius: 8px; } #page-home textarea { width: 100%; height: 150px; background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 10px; margin: 10px 0; box-sizing: border-box; resize: vertical; } /* ========================================================================== 3. MODULE : PROFIL (#page-profile) ========================================================================== */ /* Layout avec onglets latéraux style dossier */ #page-profile .profile-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; } #page-profile .profile-tabs { display: flex; flex-direction: column; gap: 4px; padding-right: 15px; border-right: 1px solid var(--border-main); } #page-profile .profile-tab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-panel); border: 1px solid transparent; border-radius: 6px 0 0 6px; cursor: pointer; transition: all 0.2s ease; color: var(--text-muted); font-weight: 500; position: relative; } #page-profile .profile-tab:hover { background: var(--bg-hover); color: var(--text-title); border-color: var(--border-light); } #page-profile .profile-tab.active { background: var(--bg-hover); color: var(--neon-blue); border-color: var(--neon-blue); border-right: none; } #page-profile .profile-tab.active::before { content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(--bg-hover); } #page-profile .profile-tab-icon { font-size: 1.2em; } #page-profile .profile-tab-label { font-size: 0.95em; } #page-profile .profile-content { padding-left: 25px; } #page-profile .profile-section { display: none; animation: fadeInProfile 0.3s ease; } #page-profile .profile-section.active { display: block; } @keyframes fadeInProfile { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } #page-profile .rsi-grid { display: grid; grid-template-columns: 200px 1fr; gap: 20px; } #page-profile .rsi-avatar { width: 100%; aspect-ratio: 1; border: 1px solid var(--border-main); border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } #page-profile .rsi-avatar img { width: 100%; height: 100%; object-fit: cover; } #page-profile .rsi-info { display: flex; flex-direction: column; gap: 10px; } #page-profile .rsi-header { border-bottom: 1px solid var(--border-main); padding-bottom: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: flex-end; } #page-profile .rsi-name { font-size: 1.5em; font-weight: bold; color: var(--text-title); } #page-profile .rsi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #page-profile .rsi-stat-item { padding: 8px; border: 1px solid var(--border-main); border-radius: 4px; background: rgba(21, 23, 32, 0.5); } #page-profile .rsi-label { color: var(--text-muted); font-size: 0.75em; text-transform: uppercase; display: block; margin-bottom: 2px; } #page-profile .rsi-val { color: var(--text-title); font-weight: bold; font-size: 0.9em; } #page-profile .rsi-bio { margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 4px; font-size: 0.9em; color: var(--text-main); font-style: italic; line-height: 1.4; } #page-profile .sync-btn { background: var(--neon-blue); color: #000; border: none; padding: 5px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.8em; transition: 0.2s; } #page-profile .sync-btn:hover { background: var(--text-title); box-shadow: 0 0 10px var(--neon-blue); } /* Intégration Discord - Module Profil */ #page-profile .box-discord { border-color: #7289da !important; } #page-profile .box-discord h3 { color: #7289da !important; } #page-profile .btn-discord { background: #7289da; color: white; border: none; border-radius: 4px; font-weight: bold; padding: 8px 15px; cursor: pointer; transition: 0.2s; text-transform: uppercase; font-size: 0.9em; } #page-profile .btn-discord:hover { background: #5b6eae; box-shadow: 0 0 10px rgba(114, 137, 218, 0.5); } #page-profile .discord-linked-panel { margin-top: 15px; padding: 10px 15px; background: rgba(114, 137, 218, 0.1); border-left: 3px solid #7289da; border-radius: 4px; display: inline-block; } /* ========================================================================== 4. MODULE : GUIDE / WIKI LECTURE (#page-guide) ========================================================================== */ #page-guide .guide-content { color: var(--text-main); line-height: 1.6; font-size: 1.05em; overflow: hidden; } #page-guide .guide-content h1, #page-guide .guide-content h2, #page-guide .guide-content h3 { color: var(--neon-blue); border-bottom: 1px solid var(--border-main); padding-bottom: 5px; margin-top: 1.5em; clear: both; } #page-guide .guide-content a { color: var(--neon-green); text-decoration: none; font-weight: bold; transition: 0.2s; } #page-guide .guide-content a:hover { text-decoration: underline; color: var(--text-title); } #page-guide .guide-content a.new-link { color: var(--neon-red) !important; } #page-guide .guide-content table.wikitable { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 4px; border-collapse: collapse; margin: 10px 0; width: 100%; } #page-guide .guide-content table.wikitable th { background: var(--bg-header); color: var(--neon-blue); padding: 12px; border: 1px solid var(--border-main); text-align: left; } #page-guide .guide-content table.wikitable td { padding: 10px; border: 1px solid var(--border-main); vertical-align: top; } #page-guide figure.wiki-figure { margin: 5px 0 15px 15px; display: table; background: var(--bg-base); border: 1px solid var(--border-main); padding: 5px; border-radius: 3px; font-size: 0.9em; } #page-guide figure.tright { float: right; clear: right; margin-left: 20px; } #page-guide figure.tleft { float: left; clear: left; margin-right: 20px; } #page-guide .wiki-thumbnail { max-width: 100%; height: auto; display: block; cursor: zoom-in; background: #000; transition: 0.2s; } #page-guide figcaption { color: var(--text-muted); font-size: 0.85em; text-align: left; padding: 5px 0 2px 0; font-style: italic; } #page-guide #wiki-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000000; justify-content: center; align-items: center; cursor: zoom-out; } #page-guide #wiki-lightbox img { max-width: 90%; max-height: 90%; border: 2px solid var(--border-light); } #page-guide .toc-box { background: var(--bg-panel); border: 1px solid var(--border-main); display: inline-block; padding: 15px; margin-bottom: 20px; border-radius: 6px; min-width: 220px; } #page-guide .toc-title { color: var(--text-title); font-weight: bold; text-align: center; border-bottom: 1px solid var(--border-light); padding-bottom: 5px; margin-bottom: 10px; text-transform:uppercase; font-size:0.8em; } #page-guide .toc-link { color: var(--neon-blue); text-decoration: none; display: block; font-size: 0.9em; margin-bottom: 4px; } #page-guide .back-btn { color: var(--text-muted); text-decoration:none; font-size:0.8em; border: 1px solid var(--border-light); padding:3px 8px; border-radius:4px; display:inline-block; margin-bottom:10px; } #page-guide .btn-danger-wiki { background: rgba(255, 80, 80, 0.1); color: var(--neon-red); border: 1px solid var(--neon-red); padding: 8px 15px; border-radius: 4px; font-weight: bold; text-decoration: none; font-size: 0.9em; } /* ========================================================================== 5. MODULE : WIKI ÉDITION (#page-wiki-edit) ========================================================================== */ #page-wiki-edit #editor-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg-base); z-index: 9999; display: flex; flex-direction: column; color: var(--text-main); } #page-wiki-edit .editor-header { background: var(--bg-panel); height: 60px; border-bottom: 2px solid var(--neon-blue); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); } #page-wiki-edit .editor-title-input { background: transparent; border: none; border-bottom: 1px solid var(--border-light); color: var(--text-title); font-size: 1.2em; font-weight: bold; width: 400px; padding: 5px; outline: none; } #page-wiki-edit .btn-save { background: var(--neon-blue); color: #000; border: none; padding: 10px 25px; font-weight: bold; cursor: pointer; border-radius: 4px; } #page-wiki-edit .editor-nav { background: var(--bg-base); border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 50px; } #page-wiki-edit .tab-btn { background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-muted); padding: 10px 20px; cursor: pointer; border-radius: 6px 6px 0 0; font-weight: bold; margin-bottom: -1px; } #page-wiki-edit .tab-btn.active { background: var(--bg-base); color: var(--neon-blue); border-top: 2px solid var(--neon-blue); border-bottom: 1px solid var(--bg-base); } #page-wiki-edit .tool-btn { background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-main); padding: 6px 12px; cursor: pointer; border-radius: 4px; font-size: 0.8em; transition: 0.2s; } #page-wiki-edit .tool-btn:hover { border-color: var(--neon-blue); color: var(--text-title); } #page-wiki-edit .editor-body { flex: 1; display: flex; overflow: hidden; position: relative; background: var(--bg-base); } #page-wiki-edit #wikicode-input { flex: 1; background: var(--bg-base); color: var(--text-title); border: none; padding: 30px; font-family: 'Consolas', monospace; font-size: 15px; line-height: 1.6; outline: none; resize:none; } #page-wiki-edit .view-pane { width: 100%; height: 100%; overflow-y: auto; padding: 40px; box-sizing: border-box; display: none; background: var(--bg-base); } #page-wiki-edit .preview-content { max-width: 900px; margin: 0 auto; color: var(--text-main); line-height: 1.6; } #page-wiki-edit .preview-content h1, #page-wiki-edit .preview-content h2, #page-wiki-edit .preview-content h3 { color: var(--neon-blue); border-bottom: 1px solid var(--border-main); padding-bottom: 5px; margin-top: 1.5em; clear: both; } #page-wiki-edit .preview-content a { color: var(--neon-green); font-weight: bold; text-decoration: none; } #page-wiki-edit .preview-content a.new-link { color: var(--neon-red) !important; } #page-wiki-edit .preview-content figure.wiki-figure { float: right; margin-left: 20px; background: var(--bg-base); border: 1px solid var(--border-main); padding: 5px; font-size: 0.85em; display: table; } #page-wiki-edit .preview-content table { border-collapse: collapse; background: var(--bg-panel); margin: 10px 0; width: 100%; border: 1px solid var(--border-main); } #page-wiki-edit .preview-content td, #page-wiki-edit .preview-content th { border: 1px solid var(--border-main); padding: 10px; } #page-wiki-edit .help-sidebar { width: 300px; background: var(--bg-panel); border-left: 1px solid var(--border-main); padding: 20px; font-size: 0.85em; overflow-y: auto; } #page-wiki-edit .help-section { margin-bottom: 20px; } #page-wiki-edit .help-title { color: var(--neon-gold); font-weight: bold; border-bottom: 1px solid var(--border-light); padding-bottom: 5px; margin-bottom: 10px; display: block; text-transform: uppercase; } #page-wiki-edit .help-item { display: flex; flex-direction: column; margin-bottom: 10px; background: var(--bg-base); padding: 8px; border-radius: 4px; border-left: 3px solid var(--neon-blue); } #page-wiki-edit .help-code { font-family: monospace; color: var(--neon-green); margin-bottom: 3px; } #page-wiki-edit .help-desc { color: var(--text-muted); font-style: italic; } #page-wiki-edit #mediaModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:10000; justify-content:center; align-items:center; } #page-wiki-edit .media-box { background: var(--bg-panel); width:85%; height:85%; border:1px solid var(--neon-blue); border-radius:8px; display:flex; flex-direction:column; box-shadow: 0 0 30px var(--shadow-glow); } #page-wiki-edit .media-header { padding:20px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; background: var(--bg-hover); } #page-wiki-edit .drop-zone { padding:40px; border-bottom:1px solid var(--border-light); text-align:center; background: var(--bg-base); border: 2px dashed var(--border-light); margin: 20px; border-radius: 8px; transition: 0.3s; cursor: pointer; } #page-wiki-edit .drop-zone:hover, #page-wiki-edit .drop-zone.drag-active { border-color: var(--neon-green); background: rgba(80, 255, 80, 0.05); } #page-wiki-edit .drop-zone p { margin:0; font-size: 1.1em; color: var(--text-muted); pointer-events: none; } #page-wiki-edit #mediaGrid { flex:1; overflow-y:auto; padding:20px; display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:20px; background: var(--bg-base); } #page-wiki-edit .media-card { background: var(--bg-hover); border:1px solid var(--border-light); border-radius:6px; overflow:hidden; transition:0.2s; position: relative; } #page-wiki-edit .media-card:hover { border-color: var(--neon-blue); transform: translateY(-3px); box-shadow: 0 5px 15px var(--shadow-box); } #page-wiki-edit .media-img { width:100%; height:120px; object-fit:cover; background: #000; cursor: pointer; } #page-wiki-edit .media-name { font-size:0.8em; padding:8px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--bg-panel); text-align: center; } #page-wiki-edit .media-del { position: absolute; top: 5px; right: 5px; background: rgba(255, 0, 0, 0.8); color: white; width: 24px; height: 24px; border-radius: 4px; text-align: center; line-height: 24px; cursor: pointer; font-weight: bold; border: 1px solid var(--neon-red); transition: 0.2s; opacity: 0; } #page-wiki-edit .media-card:hover .media-del { opacity: 1; } #page-wiki-edit .media-del:hover { background: #ff0000; transform: scale(1.1); } /* ========================================================================== 6. MODULE : FLOTTE (#page-fleet, #page-fleet-global, #page-fleet-perso) ========================================================================== */ #page-fleet .tab-nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); justify-content: center; } #page-fleet .tab-btn { background: var(--bg-panel); border: 1px solid var(--border-main); border-bottom: none; color: var(--text-muted); padding: 12px 25px; cursor: pointer; font-weight: bold; border-radius: 6px 6px 0 0; min-width: 150px; text-align: center; text-decoration: none; transition: 0.2s; } #page-fleet .tab-btn:hover { background: var(--bg-hover); color: var(--text-title); } #page-fleet .tab-btn.active { background: var(--bg-base); color: var(--neon-blue); border-color: var(--neon-blue); } #page-fleet .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; } #page-fleet .modal-overlay.open { display: flex; } #page-fleet .modal-content { background: var(--bg-panel); width: 90%; max-width: 600px; max-height: 90vh; border: 1px solid var(--neon-blue); border-radius: 8px; padding: 20px; overflow-y: auto; position: relative; box-shadow: 0 0 20px var(--shadow-glow); } #page-fleet .close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: var(--neon-red); font-size: 1.5em; cursor: pointer; } #page-fleet-global .stat-card { background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-base) 100%); padding: 20px; border-radius: 8px; border: 1px solid var(--border-main); text-align: center; flex: 1; min-width: 150px; box-shadow: 0 4px 15px var(--shadow-box); } #page-fleet-global .stat-num { font-size: 2.5em; font-weight: bold; color: var(--neon-blue); margin: 10px 0; text-shadow: 0 0 10px var(--shadow-glow); } #page-fleet-global .stat-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.8em; letter-spacing: 1px; } #page-fleet-global .grid-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-top: 20px; } #page-fleet-global .rank-table { width: 100%; border-collapse: collapse; } #page-fleet-global .rank-table td { padding: 8px; border-bottom: 1px solid var(--border-main); } #page-fleet-global .rank-1 { color: var(--neon-gold); font-weight: bold; } #page-fleet-perso .upload-zone { border: 2px dashed var(--border-light); background: var(--bg-base); padding: 30px 20px; text-align: center; border-radius: 6px; cursor: pointer; margin-bottom: 15px; transition:0.2s; } #page-fleet-perso .upload-zone:hover { border-color: var(--neon-blue); background: var(--bg-hover); } #page-fleet-perso .perso-table { width: 100%; border-collapse: collapse; } #page-fleet-perso .perso-table td { padding: 10px; border-bottom: 1px solid var(--border-main); } #page-fleet-perso .perso-table tr:hover { background: var(--bg-hover); } /* ========================================================================== 7. MODULE : ATLAS SHIPYARD / FITTING V2 (#page-fleet-fitting) ========================================================================== */ #page-fleet-fitting .v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top:20px; } #page-fleet-fitting .v2-card { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 6px; overflow: hidden; cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; min-height: 220px; position: relative; } #page-fleet-fitting .v2-card:hover { transform: translateY(-5px); border-color: var(--neon-gold); box-shadow: 0 10px 25px rgba(0,0,0,0.5); } #page-fleet-fitting .v2-header { padding: 15px; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; } #page-fleet-fitting .v2-ship { color: var(--neon-blue); font-weight: bold; text-transform: uppercase; font-size: 0.8em; letter-spacing: 1px; display:flex; gap:5px; flex-wrap:wrap; margin-bottom:5px; } #page-fleet-fitting .v2-title { color: var(--neon-gold); font-size: 1.2em; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-fleet-fitting .v2-body { padding: 15px; flex: 1; color: var(--text-main); font-size: 0.9em; line-height: 1.4; display: flex; flex-direction: column; } #page-fleet-fitting .v2-desc { flex: 1; overflow: hidden; max-height: 60px; margin-bottom: 10px; color: var(--text-muted); } #page-fleet-fitting .v2-tech { display: flex; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); } #page-fleet-fitting .tech-tag { background: var(--bg-base); padding: 4px 8px; border-radius: 4px; font-size: 0.8em; border: 1px solid var(--border-main); flex: 1; text-align: center; font-weight:bold; } #page-fleet-fitting .v2-footer { padding: 10px 15px; background: var(--bg-footer); font-size: 0.8em; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-main); } #page-fleet-fitting .rating-stars { display: flex; align-items: center; color: var(--neon-gold); font-size: 1.1em; transition: 0.3s; } #page-fleet-fitting .fav-btn { background: none; border: none; font-size: 1em; cursor: pointer; color: var(--neon-red); padding: 0; outline: none; transition: 0.2s; display:flex; align-items:center; gap:5px;} #page-fleet-fitting .fav-btn:hover { transform: scale(1.1); } #page-fleet-fitting .search-bar-fit { display: flex; gap: 10px; background: var(--bg-panel); padding: 15px; border: 1px solid var(--border-main); border-radius: 4px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; } #page-fleet-fitting .search-bar-fit input, #page-fleet-fitting .search-bar-fit select { background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 8px; border-radius: 4px; } #page-fleet-fitting .progress-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11,12,21,0.95); z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; overflow: hidden; } #page-fleet-fitting .progress-bar-bg { width: 100%; height: 8px; background: var(--border-main); border-radius: 4px; overflow: hidden; margin-top: 15px; border: 1px solid var(--border-light); } #page-fleet-fitting .progress-bar-fill { height: 100%; background: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); } #page-fleet-fitting .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(0, 208, 255, 0.8); box-shadow: 0 0 15px var(--neon-blue), 0 0 5px var(--neon-blue); animation: scan 2s linear infinite; } @keyframes scan { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } #page-fleet-fitting .sci-fi-spinner { width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid var(--neon-blue); border-bottom: 2px solid var(--neon-blue); border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-right: 10px; } @keyframes spin { 100% { transform: rotate(360deg); } } #page-fleet-fitting .pulse-text { animation: pulseText 1.5s infinite ease-in-out; } @keyframes pulseText { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } #page-fleet-fitting #fitDetailModal, #page-fleet-fitting #importModal, #page-fleet-fitting #editFitModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(5px); } #page-fleet-fitting #fitDetailModal.open, #page-fleet-fitting #importModal.open, #page-fleet-fitting #editFitModal.open { display: flex; } #page-fleet-fitting .fit-box { background: var(--bg-panel); border: 1px solid var(--neon-gold); width: 1100px; max-width: 95%; max-height: 95vh; border-radius: 8px; box-shadow: 0 0 50px rgba(0,0,0,0.8); display: flex; flex-direction: column; } #page-fleet-fitting .fit-head { padding: 20px; background: var(--bg-base); border-bottom: 1px solid var(--border-main); display: flex; justify-content: space-between; align-items: center; } #page-fleet-fitting .fit-content { padding: 30px; color: var(--text-main); overflow-y: auto; } #page-fleet-fitting .ship-meta-box { display: flex; gap: 20px; margin-bottom: 20px; background: rgba(0,208,255,0.05); padding: 15px; border-radius: 4px; border-left: 4px solid var(--neon-blue); } #page-fleet-fitting .meta-item { flex: 1; } #page-fleet-fitting .meta-label { font-size: 0.7em; color: var(--neon-blue); text-transform: uppercase; font-weight: bold; } #page-fleet-fitting .meta-value { font-size: 1em; color: var(--text-title); display: block; margin-top: 2px; } #page-fleet-fitting .stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 30px; border-bottom: 1px solid var(--border-main); padding-bottom: 20px; } #page-fleet-fitting .big-stat { background: rgba(255,255,255,0.05); padding: 10px; border-radius: 6px; border: 1px solid var(--border-main); text-align: center; } #page-fleet-fitting .bs-val { display: block; font-size: 1.3em; font-weight: bold; color: var(--text-title); } #page-fleet-fitting .bs-lbl { font-size: 0.65em; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; } #page-fleet-fitting .modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; } #page-fleet-fitting .mod-cat { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; border: 1px solid var(--border-main); width: 100%; box-sizing: border-box; } #page-fleet-fitting .mod-cat h4 { color: var(--neon-blue); border-bottom: 1px solid var(--border-light); padding-bottom: 8px; margin-top: 0; font-size: 0.85em; text-transform: uppercase; display: flex; justify-content: space-between; } #page-fleet-fitting .mod-list { list-style: none; padding: 0; margin: 0; font-size: 0.85em; } #page-fleet-fitting .mod-list li { padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.05); color: var(--text-main); line-height: 1.3; } #page-fleet-fitting .mod-list li::before { content: '▪'; color: var(--neon-gold); margin-right: 8px; } #page-fleet-fitting .interactive-stars { display: flex; align-items: center; } #page-fleet-fitting .interactive-stars span { cursor: pointer; color: var(--text-muted); transition: 0.2s; font-size: 1.5em; display: inline-block; } /* ========================================================================== 8. MODULE : ÉVÉNEMENTS & CALENDRIER (#page-events) ========================================================================== */ #page-events .tab-nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); } #page-events .tab-btn { background: var(--bg-panel); border: 1px solid var(--border-main); border-bottom: none; color: var(--text-muted); padding: 12px 25px; cursor: pointer; font-weight: bold; border-radius: 6px 6px 0 0; transition: 0.3s; } #page-events .tab-btn:hover { background: var(--bg-header); } #page-events .tab-btn.active { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); } #page-events .tab-content { display: none; animation: fadeIn 0.3s; } #page-events .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } #page-events .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: var(--bg-panel); padding: 15px; border: 1px solid var(--border-main); border-radius: 6px; } #page-events .cal-nav-btn { background: var(--neon-blue); color: #000; text-decoration: none; padding: 5px 15px; border-radius: 4px; font-weight: bold; } #page-events .cal-title { font-size: 1.5em; color: var(--text-title); text-transform: uppercase; font-weight: bold; } #page-events .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(6, 120px); gap: 5px; background: var(--bg-base); } #page-events .cal-day-header { text-align: center; background: var(--bg-header); padding: 10px; color: var(--text-muted); font-weight: bold; border-bottom: 2px solid var(--neon-blue); } #page-events .cal-day { height: 120px; background: var(--bg-panel); border: 1px solid var(--border-main); padding: 5px; position: relative; transition: 0.2s; cursor: pointer; overflow: hidden; } #page-events .cal-day:hover { background: var(--bg-hover); border-color: var(--border-light); } #page-events .cal-day.empty { background: transparent; border: 1px dashed var(--border-main); cursor: default; height: 120px; } #page-events .cal-day.today { border: 2px solid var(--neon-blue); box-shadow: 0 0 10px var(--shadow-glow); } #page-events .day-number { font-weight: bold; color: #555; position: absolute; top: 5px; right: 8px; font-size: 1.1em; } #page-events .cal-day:hover .day-number { color: var(--text-title); } #page-events .evt-tag { display: block; margin-top: 2px; padding: 3px 5px; border-radius: 3px; font-size: 0.75em; color: black; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: transform 0.2s; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } #page-events .evt-tag:hover { transform: scale(1.02); z-index: 5; position: relative; } #page-events .section-title { color: var(--neon-blue); border-bottom: 1px solid var(--border-light); padding-bottom: 10px; margin: 30px 0 20px 0; font-size: 1.2em; text-transform: uppercase; letter-spacing: 1px; } #page-events .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } #page-events .event-card { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 8px; overflow: hidden; transition: 0.3s; display: flex; flex-direction: column; cursor: pointer; min-height: 400px; } #page-events .event-card:hover { border-color: var(--neon-blue); transform: translateY(-5px); box-shadow: 0 5px 15px var(--shadow-box); } #page-events .card-img { height: 250px; background-size: cover; background-position: center; background-color: var(--bg-base); position: relative; } #page-events .card-type { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; color: black; font-weight: bold; font-size: 0.75em; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } #page-events .card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; } #page-events .card-date { color: var(--neon-blue); font-size: 0.9em; margin-bottom: 5px; font-weight: bold; } #page-events .card-title { color: var(--text-title); font-size: 1.2em; margin: 0 0 10px 0; font-weight: bold; } #page-events .card-desc { color: var(--text-muted); font-size: 0.95em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 15px; } #page-events .card-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-main); display: flex; justify-content: space-between; font-size: 0.9em; color: var(--text-main); } #page-events .mini-parts { display: flex; gap: 10px; } #page-events .mini-p { display: flex; align-items: center; gap: 4px; } #page-events .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 2000; justify-content: center; align-items: center; } #page-events .modal-overlay.open { display: flex; } #page-events .modal-box { background: var(--bg-panel); border: 1px solid var(--neon-blue); width: 90%; max-width: 600px; padding: 0; border-radius: 8px; position: relative; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; } #page-events .modal-header { padding: 15px; background: var(--bg-header); border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; } #page-events .modal-body { padding: 20px; overflow-y: auto; } #page-events .close-modal { color: var(--neon-red); font-size: 1.5em; cursor: pointer; background: none; border: none; } #page-events .form-group { margin-bottom: 15px; } #page-events .form-group label { display: block; color: var(--text-muted); margin-bottom: 5px; font-size: 0.9em; } #page-events .form-group input, #page-events .form-group select, #page-events .form-group textarea { width: 100%; background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 10px; box-sizing: border-box; } #page-events .view-row { margin-bottom: 10px; border-bottom: 1px solid var(--border-main); padding-bottom: 5px; } #page-events .view-label { color: var(--neon-blue); font-weight: bold; font-size: 0.85em; text-transform: uppercase; } #page-events .view-value { color: var(--text-main); } #page-events .img-carousel { display: flex; overflow-x: auto; gap: 10px; padding: 10px; background: var(--bg-base); border: 1px solid var(--border-light); border-radius: 4px; margin-bottom: 10px; } #page-events .carousel-item-wrapper { position: relative; display: inline-block; } #page-events .carousel-item { height: 80px; width: auto; cursor: pointer; border: 2px solid transparent; border-radius: 4px; transition: 0.2s; opacity: 0.7; } #page-events .carousel-item:hover { opacity: 1; } #page-events .carousel-item.selected { border-color: var(--neon-blue); opacity: 1; box-shadow: 0 0 10px var(--shadow-glow); transform: scale(1.05); } #page-events .del-img-btn { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background: var(--neon-red); color: white; border-radius: 50%; text-align: center; line-height: 20px; font-size: 12px; cursor: pointer; border: 1px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.5); display: none; } #page-events .carousel-item-wrapper:hover .del-img-btn { display: block; } #page-events .upload-zone { border: 2px dashed var(--border-light); background: var(--bg-base); padding: 20px; text-align: center; border-radius: 6px; cursor: pointer; transition: 0.3s; position: relative; } #page-events .upload-zone:hover, #page-events .upload-zone.dragover { border-color: var(--neon-blue); background: var(--bg-hover); } #page-events .upload-zone p { color: var(--text-muted); margin: 0; font-size: 0.9em; } #page-events .upload-zone img.preview { max-width: 100%; max-height: 150px; margin-top: 10px; display: none; border: 1px solid var(--border-light); } #page-events .part-btn-group { display: flex; gap: 10px; margin-top: 20px; justify-content: center; } #page-events .part-btn { flex: 1; padding: 10px; border: 1px solid var(--border-light); background: var(--bg-hover); color: var(--text-muted); text-align: center; cursor: pointer; border-radius: 4px; text-decoration: none; transition: 0.2s; font-weight: bold; } #page-events .part-btn:hover { filter: brightness(1.2); } #page-events .part-btn.active { border-width: 2px; color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5) inset; } #page-events .btn-acc { border-color: var(--neon-green); color: var(--neon-green); } #page-events .btn-acc.active { background: var(--neon-green); color: black; } #page-events .btn-dec { border-color: var(--neon-red); color: var(--neon-red); } #page-events .btn-dec.active { background: var(--neon-red); color: black; } #page-events .btn-ten { border-color: var(--neon-gold); color: var(--neon-gold); } #page-events .btn-ten.active { background: var(--neon-gold); color: black; } #page-events .part-lists { display: flex; gap: 10px; margin-top: 20px; border-top: 1px solid var(--border-light); padding-top: 15px; } #page-events .p-col { flex: 1; background: var(--bg-base); padding: 10px; border-radius: 4px; border-top: 3px solid var(--border-light); font-size: 0.85em; } #page-events .p-col h4 { margin: 0 0 8px 0; font-size: 1em; color: var(--text-title); } #page-events .p-col ul { list-style: none; padding: 0; margin: 0; color: var(--text-muted); } #page-events .p-col li { margin-bottom: 2px; } #page-events .p-acc { border-color: var(--neon-green); } #page-events .p-acc h4 { color: var(--neon-green); } #page-events .p-dec { border-color: var(--neon-red); } #page-events .p-dec h4 { color: var(--neon-red); } #page-events .p-ten { border-color: var(--neon-gold); } #page-events .p-ten h4 { color: var(--neon-gold); } /* SWITCH TOGGLE STYLE */ #page-events .switch { position: relative; display: inline-block; width: 40px; height: 22px; } #page-events .switch input { opacity: 0; width: 0; height: 0; } #page-events .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-light); transition: .4s; border-radius: 22px; } #page-events .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } #page-events input:checked + .slider { background-color: var(--neon-blue); } #page-events input:checked + .slider:before { transform: translateX(18px); } /* RAPPEL STYLES */ #page-events .reminder-box { background: rgba(0, 208, 255, 0.05); border: 1px solid var(--neon-blue); padding: 15px; border-radius: 4px; margin-top: 15px; } #page-events .rem-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } #page-events .rem-options { display: none; margin-top: 10px; border-top: 1px dashed var(--neon-blue); padding-top: 10px; } #page-events .rem-options.active { display: block; } #page-events .days-grid { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; } #page-events .day-chk { display: none; } #page-events .day-lbl { flex: 1; text-align: center; padding: 5px; background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-muted); cursor: pointer; border-radius: 3px; font-size: 0.8em; user-select: none; } #page-events .day-chk:checked + .day-lbl { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); font-weight: bold; } #page-events .day-chk:disabled + .day-lbl { opacity: 0.5; cursor: not-allowed; } /* ========================================================================== 9. MODULE : ADMINISTRATION (#page-admin) ========================================================================== */ #page-admin .tab-nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); overflow-x: auto; } #page-admin .tab-btn { background: var(--bg-panel); border: 1px solid var(--border-main); color: var(--text-muted); padding: 12px 20px; cursor: pointer; text-decoration: none; border-radius: 6px 6px 0 0; font-weight:bold; white-space:nowrap; transition:0.2s; } #page-admin .tab-btn:hover { background: var(--bg-hover); color: var(--text-title); } #page-admin .tab-btn.active { background: var(--bg-base); color: var(--neon-blue); border-color: var(--neon-blue); border-bottom: 2px solid var(--bg-base); margin-bottom: -2px; } #page-admin .sub-nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; overflow-x: auto; align-items:center; } #page-admin .sub-btn { background: transparent; border: 1px solid var(--border-light); color: var(--text-muted); padding: 8px 15px; cursor: pointer; text-decoration: none; border-radius: 4px; font-size: 0.9em; font-weight:bold; transition:0.2s; white-space:nowrap; } #page-admin .sub-btn:hover { border-color: var(--text-muted); color: var(--text-main); } #page-admin .sub-btn.active { background: rgba(0, 208, 255, 0.1); color: var(--neon-blue); border-color: var(--neon-blue); } #page-admin .sub-nav-separator { width: 1px; height: 20px; background: var(--border-light); margin: 0 5px; } #page-admin .audit-table, #page-admin .cat-table, #page-admin .user-table, #page-admin .users-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); margin-top: 10px; font-size: 0.9em; } #page-admin .audit-table th, #page-admin .cat-table th, #page-admin .user-table th, #page-admin .users-table th { background: var(--bg-header); color: var(--neon-blue); padding: 12px; border: 1px solid var(--border-main); text-align: left; text-transform: uppercase; } #page-admin .audit-table td, #page-admin .cat-table td, #page-admin .user-table td, #page-admin .users-table td { padding: 10px; border: 1px solid var(--border-main); vertical-align: middle; color: var(--text-main); } #page-admin .audit-table tr:hover, #page-admin .cat-table tr:hover, #page-admin .user-table tr:hover, #page-admin .users-table tr:hover { background: var(--bg-hover); } #page-admin .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.85em; font-weight: bold; border: 1px solid transparent; display:inline-block; text-align:center; } #page-admin .badge-dev { background: rgba(255, 80, 80, 0.2); color: var(--neon-red); border-color: var(--neon-red); } #page-admin .badge-admin { background: rgba(255, 215, 0, 0.2); color: var(--neon-gold); border-color: var(--neon-gold); } #page-admin .badge-membre { background: rgba(0, 208, 255, 0.2); color: var(--neon-blue); border-color: var(--neon-blue); } #page-admin .badge-pending { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); border-style: dashed; } #page-admin .btn-save-role { width: 100%; background: var(--neon-blue); color: black; font-weight: bold; padding: 10px; border: none; cursor: pointer; margin-top: 15px; border-radius: 4px; transition: 0.2s; } #page-admin .btn-save-role:hover { background: #fff; box-shadow: 0 0 10px var(--neon-blue); } #page-admin details { background: var(--bg-panel); border: 1px solid var(--border-light); margin-bottom: 10px; border-radius: 4px; overflow: hidden; transition: 0.3s; } #page-admin details summary { padding: 15px; cursor: pointer; font-weight: bold; color: var(--text-title); background: var(--bg-hover); border-bottom: 1px solid var(--border-main); outline: none; } #page-admin details summary:hover { background: var(--bg-header); } #page-admin details[open] summary { color: var(--neon-blue); border-bottom: 1px solid var(--neon-blue); background: var(--bg-base); } #page-admin .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; padding: 15px; background: var(--bg-base); } #page-admin .perm-cat-box { background: var(--bg-panel); border: 1px solid var(--border-light); padding: 10px; border-radius: 4px; } #page-admin .perm-cat-title { color: var(--neon-gold); margin-top: 0; margin-bottom: 10px; border-bottom: 1px dashed var(--border-light); padding-bottom: 5px; font-size: 0.9em; text-transform: uppercase; } #page-admin .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 20px; } #page-admin .admin-col { display: flex; flex-direction: column; gap: 20px; } #page-admin .stats-container { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } #page-admin .stat-box { background: var(--bg-panel); border: 1px solid var(--border-light); padding: 15px; border-radius: 6px; flex: 1; min-width: 250px; } #page-admin .stat-title { color: var(--text-title); font-weight: bold; margin-bottom: 15px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; text-transform: uppercase; font-size: 0.9em; } #page-admin .stat-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border-main); font-size: 0.9em; color:var(--text-main); } #page-admin .stat-row:last-child { border-bottom: none; } #page-admin .val-ok { color: var(--neon-green); font-weight: bold; } #page-admin .val-nok { color: var(--neon-red); font-weight: bold; } #page-admin .val-gold { color: var(--neon-gold); font-weight: bold; } #page-admin .val-blue { color: var(--neon-blue); font-weight: bold; } #page-admin .chart-wrapper { position: relative; width: 100%; height: 250px; margin-top: 15px; } #page-admin .ticket-card { background: var(--bg-panel); border: 1px solid var(--border-light); border-left: 4px solid var(--border-light); padding: 15px; margin-bottom: 15px; border-radius: 4px; transition: 0.2s; } #page-admin .ticket-card:hover { border-color: var(--text-muted); background: var(--bg-hover); } #page-admin .ticket-open { border-left-color: var(--neon-red); } #page-admin .ticket-resolved { border-left-color: var(--neon-green); opacity: 0.6; } #page-admin .ticket-header { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.85em; margin-bottom: 10px; border-bottom: 1px solid var(--border-main); padding-bottom: 5px; } #page-admin .badge-bug { background: rgba(255,80,80,0.2); color: var(--neon-red); padding: 2px 6px; border-radius: 3px; font-weight: bold; border: 1px solid var(--neon-red); } #page-admin .badge-idea { background: rgba(0,208,255,0.2); color: var(--neon-blue); padding: 2px 6px; border-radius: 3px; font-weight: bold; border: 1px solid var(--neon-blue); } #page-admin .ticket-msg { color: var(--text-title); line-height: 1.5; font-size: 0.95em; margin-bottom: 15px; padding: 10px; background: var(--bg-base); border-radius: 4px; border: 1px solid var(--border-main); } #page-admin .ticket-actions { display: flex; align-items: center; font-size: 0.9em; justify-content: flex-end; } #page-admin .discord-label { display: block; color: var(--text-muted); margin-bottom: 5px; font-size: 0.85em; margin-top: 12px; } #page-admin .discord-box input, #page-admin .discord-box select { width: 100%; padding: 10px; border-radius: 4px; box-sizing: border-box; background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); } #page-admin .discord-box input:focus, #page-admin .discord-box select:focus { border-color: #7289da; outline: none; } #page-admin .config-section { background: var(--bg-base); padding: 15px; border-radius: 6px; border: 1px solid var(--border-main); } #page-admin .config-section .discord-label:first-child { margin-top: 0; } #page-admin .status-led { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--border-light); box-shadow: 0 0 5px #000; } #page-admin .status-led.on { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); } #page-admin .status-led.off { background: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); } #page-admin .logs-container { background: var(--bg-base); border: 1px solid var(--border-light); height: 400px; overflow-y: auto; padding: 15px; font-family: 'Consolas', 'Segoe UI Emoji', 'Noto Color Emoji', monospace; font-size: 0.85em; border-radius: 4px; line-height: 1.4; } #page-admin .log-line { margin-bottom: 4px; border-bottom: 1px dashed var(--bg-hover); padding-bottom: 4px; } #page-admin .log-line:last-child { border-bottom: none; } #page-admin .log-time { color: var(--text-muted); margin-right: 10px; } #page-admin .log-INFO { color: var(--neon-blue); font-weight: bold; } #page-admin .log-WARN { color: var(--neon-gold); font-weight: bold; } #page-admin .log-ERROR { color: var(--neon-red); font-weight: bold; } #page-admin .act-CREATE, #page-admin .act-IMPORT { color: var(--neon-green); font-weight: bold; } #page-admin .act-UPDATE, #page-admin .act-EDIT { color: var(--neon-gold); font-weight: bold; } #page-admin .act-DELETE { color: var(--neon-red); font-weight: bold; } #page-admin .tgt-USER, #page-admin .tgt-ROLE { color: #9b59b6; } #page-admin .tgt-CONFIG { color: #e67e22; } #page-admin .pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; } #page-admin .pg-link { background: var(--bg-panel); color: var(--neon-blue); padding: 8px 15px; border-radius: 4px; text-decoration: none; border: 1px solid var(--border-main); transition: 0.2s; font-weight: bold; } #page-admin .pg-link:hover { border-color: var(--neon-blue); background: rgba(0,208,255,0.1); color: var(--text-title); } /* MODULE : ADMIN - UTILISATEURS (#subpage-users) */ #subpage-users .admin-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; } @media (max-width: 1200px) { #subpage-users .admin-grid { grid-template-columns: 1fr; } } #subpage-users .user-card { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 8px; padding: 15px; margin-bottom: 15px; display: grid; grid-template-columns: 2fr 1.5fr 1.5fr auto; gap: 15px; align-items: center; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } #subpage-users .user-card:hover { border-color: var(--neon-blue); background: var(--bg-hover); transform: translateY(-2px); box-shadow: 0 6px 15px var(--shadow-box); } #subpage-users .u-info strong { color: var(--text-title); font-size: 1.1em; display: block; margin-bottom: 4px; } #subpage-users .u-info small { color: var(--text-muted); font-size: 0.85em; } #subpage-users .badge-status { padding: 3px 8px; border-radius: 4px; font-size: 0.7em; font-weight: bold; text-transform: uppercase; margin-left: 5px; letter-spacing: 0.5px; } #subpage-users .status-active { background: rgba(80, 255, 80, 0.1); color: var(--neon-green); border: 1px solid var(--neon-green); } #subpage-users .status-pending { background: rgba(255, 215, 0, 0.1); color: var(--neon-gold); border: 1px solid var(--neon-gold); } /* Barre de recherche + boutons d'action */ #subpage-users .search-bar-wrapper { display: flex; gap: 10px; margin-bottom: 15px; } #subpage-users .search-bar-wrapper input { flex: 1; } #subpage-users .btn-sync-rsi { background: var(--neon-blue); color: #000; padding: 10px 15px; font-size: 0.9em; font-weight: bold; white-space: nowrap; border: none; border-radius: 4px; cursor: pointer; transition: 0.2s; } #subpage-users .btn-sync-rsi:hover { background: #fff; box-shadow: 0 0 15px var(--neon-blue); transform: translateY(-1px); } /* Nouveaux styles pour les formulaires et boutons intégrés */ #subpage-users .form-inline { display: flex; gap: 8px; margin: 0; align-items: center; } #subpage-users .input-dark { flex: 1; max-width: 150px; } #subpage-users .btn-icon { padding: 8px 12px; border-radius: 4px; font-size: 1em; cursor: pointer; border: none; transition: 0.2s; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border: 1px solid var(--border-light); } #subpage-users .btn-icon.save { color: var(--neon-blue); border-color: rgba(0, 208, 255, 0.3); } #subpage-users .btn-icon.save:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 10px var(--shadow-glow); } #subpage-users .btn-icon.key { color: var(--neon-gold); border-color: rgba(255, 215, 0, 0.3); } #subpage-users .btn-icon.key:hover { background: var(--neon-gold); color: #000; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); } #subpage-users .btn-icon.del { color: var(--neon-red); border-color: rgba(255, 80, 80, 0.3); } #subpage-users .btn-icon.del:hover { background: var(--neon-red); color: #fff; box-shadow: 0 0 10px rgba(255, 80, 80, 0.5); } #subpage-users details.role-card { background: var(--bg-panel); border: 1px solid var(--border-main); margin-bottom: 15px; border-radius: 6px; transition: 0.2s; overflow: hidden; } #subpage-users details.role-card[open] { border-color: var(--neon-blue); box-shadow: 0 0 15px var(--shadow-glow); } #subpage-users details.role-card > summary { list-style: none; font-weight: bold; color: var(--neon-blue); padding: 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; background: var(--bg-hover); transition: 0.2s; border-bottom: 1px solid transparent; } #subpage-users details.role-card[open] > summary { border-bottom-color: var(--border-main); } #subpage-users details.role-card > summary:hover { background: var(--bg-header); } #subpage-users details.role-card > summary::-webkit-details-marker { display: none; } #subpage-users .role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; } #subpage-users .perm-cat { background: var(--bg-base); padding: 12px; border-radius: 6px; border: 1px solid var(--border-light); } #subpage-users .btn-save-role { width: 100%; background: var(--bg-hover) !important; border: 1px solid var(--neon-blue); color: var(--neon-blue) !important; padding: 12px; cursor: pointer; font-weight: bold; border-radius: 4px; font-size: 0.9em; transition: 0.2s; text-transform: uppercase; letter-spacing: 1px; } #subpage-users .btn-save-role:hover { background: var(--neon-blue) !important; color: #000 !important; box-shadow: 0 0 10px var(--shadow-glow); } /* Colonne droite (Rôles) collante avec scrollbar fine pour éviter de casser l'UI */ #subpage-users .sticky-roles { position: sticky; top: 20px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 15px; } #subpage-users .sticky-roles::-webkit-scrollbar { width: 6px; } #subpage-users .sticky-roles::-webkit-scrollbar-track { background: var(--bg-base); border-radius: 4px; } #subpage-users .sticky-roles::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } #subpage-users .sticky-roles::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); } /* ========================================================================== 10. MODULE : COMMERCE (#page-commerce, #subpage-market, #subpage-bank) ========================================================================== */ /* CONTENEUR PRINCIPAL ET ONGLETS */ #page-commerce .com-tabs { display: flex; justify-content: center; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); gap: 5px; } #page-commerce .com-tab-btn { background: var(--bg-panel); border: 1px solid var(--border-main); border-bottom: none; color: var(--text-muted); padding: 12px 30px; cursor: pointer; font-weight: bold; border-radius: 6px 6px 0 0; text-decoration: none; width: 200px; text-align: center; transition: 0.2s; } #page-commerce .com-tab-btn:hover { background: var(--bg-hover); color: var(--text-title); } #page-commerce .com-tab-btn.active { background: var(--bg-base); color: var(--neon-blue); border-color: var(--neon-blue); border-bottom: 2px solid var(--bg-base); margin-bottom: -2px; } /* MARKET */ #subpage-market .market-bar { background: var(--bg-hover); padding: 15px; border-radius: 6px; border: 1px solid var(--border-main); display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; box-shadow: 0 4px 10px var(--shadow-box); } #subpage-market .m-filters { display: flex; gap: 10px; flex-wrap: wrap; } #subpage-market .m-input { background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 8px 12px; border-radius: 4px; outline: none; transition: 0.2s; } #subpage-market .m-input:focus { border-color: var(--neon-blue); box-shadow: 0 0 5px var(--shadow-glow); } #subpage-market .btn-add { background: linear-gradient(135deg, var(--neon-gold), #e0b000); color: #000; padding: 10px 20px; font-weight: bold; border-radius: 4px; cursor: pointer; border: none; transition: 0.2s; box-shadow: 0 2px 5px rgba(255, 215, 0, 0.2); } #subpage-market .btn-add:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4); } #subpage-market .m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } #subpage-market .m-card { background: var(--bg-hover); border: 1px solid var(--border-main); border-radius: 8px; overflow: hidden; position: relative; transition: 0.3s; display: flex; flex-direction: column; } #subpage-market .m-card:hover { transform: translateY(-5px); border-color: var(--neon-blue); box-shadow: 0 8px 20px var(--shadow-box); } #subpage-market .mc-img { width: 100%; height: 160px; object-fit: cover; background: #000; border-bottom: 1px solid var(--border-main); transition: 0.3s; } #subpage-market .m-card:hover .mc-img { filter: brightness(1.1); } #subpage-market .mc-badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 4px; font-size: 0.7em; font-weight: 800; text-transform: uppercase; color: #000; box-shadow: 0 2px 5px var(--shadow-box); letter-spacing: 0.5px; } #subpage-market .b-Vends { background: var(--neon-green); } #subpage-market .b-Achète { background: var(--neon-red); color: white; } #subpage-market .b-Donne { background: #5050ff; color:white; } #subpage-market .b-Cherche { background: #ffff50; } #subpage-market .mc-body { padding: 15px; flex: 1; display: flex; flex-direction: column; } #subpage-market .mc-cat { color: var(--neon-blue); font-size: 0.75em; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; letter-spacing: 1px; } #subpage-market .mc-title { font-weight: bold; font-size: 1.1em; margin: 0 0 5px 0; color: var(--text-title); line-height: 1.3; } #subpage-market .mc-price { color: var(--neon-gold); font-size: 1.3em; font-weight: bold; font-family: monospace; margin-bottom: 15px; text-shadow: 0 0 5px rgba(255, 215, 0, 0.2); } #subpage-market .mc-user { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-main); font-size: 0.85em; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; } #subpage-market .mc-avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 5px; background: var(--border-main); } #subpage-market .mc-actions { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 5px; opacity: 0; transition: 0.2s; transform: translateY(10px); } #subpage-market .m-card:hover .mc-actions { opacity: 1; transform: translateY(0); } #subpage-market .mc-btn { width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border-light); background: rgba(0,0,0,0.8); color: var(--text-title); backdrop-filter: blur(4px); transition: 0.2s; } #subpage-market .mc-btn:hover { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); } #subpage-market .mc-btn.del:hover { background: var(--neon-red); border-color: var(--neon-red); color: white; } #subpage-market .modal-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(3px); } #subpage-market .modal-box { background: var(--bg-hover); width: 95%; max-width: 550px; border: 1px solid var(--neon-gold); border-radius: 8px; padding: 25px; box-shadow: 0 0 40px rgba(255, 215, 0, 0.15); animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); } @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } #subpage-market .m-form-row { display: flex; gap: 15px; margin-bottom: 15px; } #subpage-market .m-full { width: 100%; } #subpage-market .drop-box { border: 2px dashed var(--border-light); padding: 20px; text-align: center; border-radius: 6px; cursor: pointer; margin-top: 15px; transition: 0.2s; background: rgba(0,0,0,0.2); } #subpage-market .drop-box:hover { border-color: var(--neon-gold); background: rgba(255, 215, 0, 0.05); } #subpage-market .prev-img { max-height: 120px; display: none; margin: 15px auto; border: 1px solid var(--border-light); border-radius: 4px; box-shadow: 0 5px 15px var(--shadow-box); } #subpage-market datalist { background: var(--bg-base); color: var(--text-title); } /* BANK */ #subpage-bank .denied-zone { background: var(--bg-base); border: 2px solid var(--border-main); padding: 50px 20px; border-radius: 6px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 0 30px var(--shadow-box); margin-top: 20px; } #subpage-bank .denied-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(26,5,5,0.8), rgba(26,5,5,0.8) 10px, rgba(51,0,0,0.8) 10px, rgba(51,0,0,0.8) 20px); opacity: 0.6; z-index: 0; } #subpage-bank .denied-content { position: relative; z-index: 1; } #subpage-bank .denied-icon { font-size: 3em; margin-bottom: 20px; display: block; text-shadow: 0 0 10px var(--neon-red); } #subpage-bank .denied-title { font-family: 'Orbitron', sans-serif; font-size: 2.5em; font-weight: 900; margin: 0; color: rgba(255, 50, 50, 0.3); text-transform: uppercase; position: relative; display: inline-block; } #subpage-bank .denied-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: var(--neon-red); border-bottom: 3px solid var(--neon-red); clip-path: inset(0 0 100% 0); animation: scan-down 2.5s ease-in-out infinite; background: linear-gradient(to bottom, transparent 90%, rgba(255, 50, 50, 0.5) 100%); } @keyframes scan-down { 0% { clip-path: inset(0 0 100% 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } } #subpage-bank .denied-sub { font-family: 'Share Tech Mono', monospace; font-size: 1.1em; color: var(--neon-red); margin-top: 15px; letter-spacing: 2px; text-shadow: 0 0 5px var(--neon-red); } #subpage-bank .cat-nav { margin-bottom: 20px; } #subpage-bank .cat-btn { display: inline-block; padding: 8px 15px; margin-right: 5px; margin-bottom: 5px; border: 1px solid var(--border-light); color: var(--text-muted); text-decoration: none; border-radius: 4px; transition: 0.2s; background: var(--bg-panel); } #subpage-bank .cat-btn:hover { background: var(--bg-hover); color: var(--text-title); } #subpage-bank .cat-btn.active { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); font-weight: bold; } #subpage-bank table { width: 100%; border-collapse: collapse; text-align: left; } #subpage-bank th { padding: 10px; border-bottom: 2px solid var(--border-main); color: var(--text-muted); font-size: 0.9em; text-transform: uppercase; } #subpage-bank td { padding: 10px; border-bottom: 1px solid var(--border-main); vertical-align: middle; } /* ========================================================================== 11. MODULE : ATLAS OS (BUREAU, ANIMATIONS ET FENÊTRES) ========================================================================== */ /* Verrouille l'OS, mais libère le scroll pour les iframes grâce à :not(.headless-body) */ body.theme-atlas_os:not(.headless-body) { margin: 0; padding: 0; overflow: hidden; background: var(--bg-base) url('https://www.transparenttextures.com/patterns/dark-matter.png') !important; font-family: 'Courier New', monospace; color: var(--text-title); height: 100vh; width: 100vw; } /* Règle vitale pour permettre aux modules (Marché, Banque...) de scroller à l'intérieur des fenêtres OS */ body.headless-body { overflow-y: auto !important; height: auto !important; background: transparent !important; padding: 15px; box-sizing: border-box; } .theme-atlas_os .scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: 9999; } /* ------------------------------------------- NOUVEAU : ANIMATIONS DE FOND (SCI-FI) ------------------------------------------- */ .os-bg-animations { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; overflow: hidden; } .giant-atlas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Orbitron', sans-serif; font-size: 15vw; font-weight: 900; color: rgba(0, 208, 255, 0.03); white-space: nowrap; user-select: none; letter-spacing: 0.1em; text-shadow: 0 0 50px rgba(0, 208, 255, 0.05); } .rotating-schematic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; opacity: 0.15; } .rotating-schematic .circle-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed var(--neon-blue); border-radius: 50%; animation: spin-right 60s linear infinite; box-sizing: border-box; } .rotating-schematic .circle-2 { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border: 1px solid var(--neon-gold); border-radius: 50%; animation: spin-left 40s linear infinite; box-sizing: border-box; } .rotating-schematic .circle-3 { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; border: 2px solid rgba(80, 255, 80, 0.3); border-radius: 50%; animation: spin-right 20s linear infinite; box-sizing: border-box; border-top-color: transparent; border-bottom-color: transparent; } .rotating-schematic .crosshair { position: absolute; top: 50%; left: -10%; width: 120%; height: 1px; background: rgba(0, 208, 255, 0.5); } .rotating-schematic .crosshair::after { content: ''; position: absolute; left: 50%; top: -360px; width: 1px; height: 720px; background: rgba(0, 208, 255, 0.5); } .rotating-schematic .orbiting-node { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: var(--neon-gold); border-radius: 50%; box-shadow: 0 0 10px var(--neon-gold); } @keyframes spin-right { 100% { transform: rotate(360deg); } } @keyframes spin-left { 100% { transform: rotate(-360deg); } } .scrolling-code { position: absolute; bottom: 80px; left: 20px; width: 350px; height: 150px; overflow: hidden; font-family: 'Share Tech Mono', monospace; font-size: 0.85em; color: rgba(80, 255, 80, 0.4); text-shadow: 0 0 5px rgba(80, 255, 80, 0.2); } .code-content { position: absolute; bottom: 0; animation: scroll-up 15s linear infinite; } @keyframes scroll-up { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } } /* ------------------------------------------- HUD FOOTER (COPYRIGHT) ------------------------------------------- */ .os-hud-footer { position: fixed; bottom: 65px; right: 20px; text-align: right; z-index: 100000; /* Le Z-index de l'extrême pour passer au-dessus du bureau */ font-family: 'Share Tech Mono', monospace; color: var(--text-muted); background: rgba(10, 15, 28, 0.6); padding: 10px 15px; border-right: 3px solid var(--neon-blue); border-radius: 4px; backdrop-filter: blur(2px); pointer-events: auto; } .os-hud-footer .hud-main { color: var(--text-main); font-size: 0.9em; margin-bottom: 5px; } .os-hud-footer .hud-sub { font-size: 0.8em; } /* ------------------------------------------- INTERFACE BUREAU ET FENÊTRES ------------------------------------------- */ .theme-atlas_os .desktop-grid { position: absolute; top: 0; left: 0; right: 0; bottom: 50px; z-index: 10; overflow: visible; } .theme-atlas_os .desktop-icon { position: absolute; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; border-radius: 8px; transition: 0.2s; border: 1px solid transparent; } .theme-atlas_os .desktop-icon:hover { background: rgba(0, 170, 255, 0.2); border: 1px solid var(--neon-blue); box-shadow: 0 0 15px var(--shadow-glow); } .theme-atlas_os .icon-img { font-size: 3em; margin-bottom: 5px; text-shadow: 0 0 10px var(--neon-blue); } .theme-atlas_os .icon-text { font-size: 0.8em; font-weight: bold; color: var(--text-title); text-shadow: 1px 1px 2px #000; background: rgba(0,0,0,0.5); padding: 2px 4px; border-radius: 4px; } .theme-atlas_os .taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background: var(--bg-header); border-top: 1px solid var(--border-main); display: flex; align-items: center; padding: 0 20px; box-sizing: border-box; z-index: 10000; box-shadow: 0 -2px 15px var(--shadow-box); } .theme-atlas_os .start-btn { background: var(--neon-blue); color: #000; font-weight: 900; font-size: 1.2em; padding: 5px 20px; border: none; cursor: pointer; border-radius: 4px; font-family: 'Orbitron', sans-serif; box-shadow: 0 0 10px var(--shadow-glow); transition: 0.2s; } .theme-atlas_os .start-btn:hover { background: #fff; box-shadow: 0 0 20px var(--neon-blue); } .theme-atlas_os .window { position: absolute; top: 50px; left: 50px; width: 1000px; height: 700px; background: var(--bg-panel); border: 1px solid var(--neon-blue); box-shadow: 0 0 30px var(--shadow-glow); display: none; flex-direction: column; border-radius: 8px; overflow: hidden; resize: both; min-width: 400px; min-height: 300px; } .theme-atlas_os .win-header { background: var(--bg-header); border-bottom: 1px solid var(--neon-blue); padding: 10px; display: flex; justify-content: space-between; align-items: center; cursor: move; user-select: none; } .theme-atlas_os .win-title { font-weight: bold; color: var(--neon-blue); font-family: 'Orbitron', sans-serif; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; } .theme-atlas_os .win-controls { display: flex; gap: 10px; } .theme-atlas_os .win-btn { width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .theme-atlas_os .win-close { background: var(--neon-red); color: #000; box-shadow: 0 0 10px var(--neon-red); } .theme-atlas_os .win-max { background: var(--neon-gold); color: #000; box-shadow: 0 0 10px var(--neon-gold); } .theme-atlas_os .win-min { background: var(--neon-green); color: #000; box-shadow: 0 0 10px var(--neon-green); } .theme-atlas_os .win-content { flex: 1; background: transparent; position: relative; } .theme-atlas_os .win-iframe { width: 100%; height: 100%; border: none; background: transparent; } .theme-atlas_os .win-iframe::-webkit-scrollbar { width: 8px; } .theme-atlas_os .win-iframe::-webkit-scrollbar-track { background: var(--bg-base); } .theme-atlas_os .win-iframe::-webkit-scrollbar-thumb { background: var(--neon-blue); border-radius: 4px; } /* ========================================================================== 12. MODULE : THEME VANDUUL (HUD ALIEN) ========================================================================== */ /* Verrouille l'écran principal pour la navigation Vanduul */ body.theme-vanduul:not(.headless-body) { margin: 0; padding: 0; overflow: hidden; background: #050000 url('https://www.transparenttextures.com/patterns/dark-matter.png') !important; font-family: 'Wallpoet', sans-serif; color: var(--text-main); height: 100vh; width: 100vw; } /* Filtres d'ambiance visuels */ .vanduul-vignette { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 40%, rgba(50, 0, 0, 0.8) 100%); pointer-events: none; z-index: 1; } .vanduul-scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.03), rgba(255, 0, 0, 0.03) 1px, transparent 1px, transparent 3px); pointer-events: none; z-index: 2; } /* Structure globale */ .vanduul-container { display: flex; height: 100vh; width: 100vw; position: relative; z-index: 10; } /* -------------------------- SIDEBAR (MENU GAUCHE) -------------------------- */ .vanduul-sidebar { width: 320px; background: rgba(15, 0, 0, 0.85); border-right: 3px solid var(--neon-red); display: flex; flex-direction: column; padding: 30px 20px; box-shadow: 5px 0 30px rgba(255, 0, 0, 0.15); position: relative; box-sizing: border-box; } .vanduul-sidebar::after { content: ''; position: absolute; right: -3px; top: 15%; width: 3px; height: 15%; background: #fff; box-shadow: 0 0 15px #fff; } .vanduul-brand { margin-bottom: 40px; border-bottom: 1px dashed var(--border-main); padding-bottom: 20px; text-align: center; } .vanduul-alien-text { font-family: 'Orbitron', sans-serif; font-size: 2.2em; color: var(--neon-red); text-shadow: 0 0 10px var(--neon-red); letter-spacing: 3px; margin-bottom: 10px; font-weight: 900; display: inline-block; } .vanduul-title { font-size: 1.1em; color: var(--text-main); letter-spacing: 2px; margin-bottom: 5px; font-family: 'Share Tech Mono', monospace; display: inline-block; } .vanduul-user { color: var(--neon-gold); font-size: 0.9em; font-family: 'Share Tech Mono', monospace; } /* -------------------------- ANIMATION CSS GLITCH RVB -------------------------- */ .css-glitch { position: relative; } .css-glitch::before, .css-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 0, 0, 1); pointer-events: none; } /* Décalage Cyan */ .css-glitch::before { left: 2px; text-shadow: -2px 0 #00ffff; clip-path: inset(45% 0 36% 0); animation: glitch-anim-1 2.5s infinite linear alternate-reverse; } /* Décalage Rouge */ .css-glitch::after { left: -2px; text-shadow: -2px 0 #ff0000; clip-path: inset(10% 0 60% 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0% { clip-path: inset(20% 0 80% 0); transform: translate(2px, 1px); } 20% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, -1px); } 40% { clip-path: inset(40% 0 50% 0); transform: translate(2px, 2px); } 60% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, -2px); } 80% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -1px); } 100% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 1px); } } @keyframes glitch-anim-2 { 0% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 1px); } 20% { clip-path: inset(30% 0 20% 0); transform: translate(2px, -1px); } 40% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 2px); } 60% { clip-path: inset(20% 0 50% 0); transform: translate(2px, -2px); } 80% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, -1px); } 100% { clip-path: inset(5% 0 80% 0); transform: translate(2px, 1px); } } .vanduul-nav { display: flex; flex-direction: column; gap: 15px; flex: 1; overflow-y: auto; padding-right: 5px; } .vanduul-nav::-webkit-scrollbar { width: 4px; } .vanduul-nav::-webkit-scrollbar-track { background: transparent; } .vanduul-nav::-webkit-scrollbar-thumb { background: var(--border-main); } .vanduul-nav button { background: rgba(30, 0, 0, 0.6); color: var(--text-main); border: 1px solid var(--border-main); border-left: 5px solid var(--border-main); padding: 15px; text-align: left; font-family: 'Wallpoet', sans-serif; font-size: 1.1em; cursor: pointer; transition: 0.2s; /* Coupe en biseau façon lame vanduul */ clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); } .vanduul-nav button:hover { background: rgba(80, 0, 0, 0.8); color: #fff; border-left: 5px solid var(--neon-red); box-shadow: inset 20px 0 30px rgba(255, 0, 0, 0.3); padding-left: 25px; transform: translateX(5px); } .vanduul-nav button.v-admin { border-left-color: var(--neon-gold); color: var(--neon-gold); margin-top: 20px; } .vanduul-nav button.v-admin:hover { border-left-color: #fff; color: #fff; box-shadow: inset 20px 0 30px rgba(255, 215, 0, 0.3); } .vanduul-nav button.v-exit { border-left-color: #ff0000; margin-top: auto; color: #ff5050; } .vanduul-sys-status { margin-top: 20px; padding: 15px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-main); color: var(--text-muted); font-size: 0.85em; text-align: center; } /* -------------------------- ZONE CENTRALE (IFRAME) -------------------------- */ .vanduul-main { flex: 1; padding: 30px; display: flex; flex-direction: column; box-sizing: border-box; } .vanduul-frame-wrapper { flex: 1; position: relative; border: 2px solid var(--border-main); background: rgba(5, 0, 0, 0.8); padding: 5px; box-shadow: inset 0 0 50px rgba(0,0,0,0.8); transition: 0.3s; } /* Éléments métalliques aux 4 coins */ .v-corner { position: absolute; width: 40px; height: 40px; border: 4px solid var(--neon-red); pointer-events: none; } .v-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; } .v-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; } .v-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; } .v-br { bottom: -2px; right: -2px; border-left: none; border-top: none; } /* L'iframe qui charge les pages "headless" (sans header/footer) */ .vanduul-iframe { width: 100%; height: 100%; border: none; background: transparent; display: block; } /* Scrollbar agressive pour l'Iframe Vanduul */ .theme-vanduul.headless-body::-webkit-scrollbar { width: 10px; } .theme-vanduul.headless-body::-webkit-scrollbar-track { background: #050000; border-left: 1px solid var(--border-main); } .theme-vanduul.headless-body::-webkit-scrollbar-thumb { background: var(--neon-red); border-radius: 0; border: 1px solid #000; } /* ========================================================================== 13. MODULE : DATA CENTER (CATALOGUE PUBLIC DYNAMIQUE) ========================================================================== */ /* Structure du tableau Data Center */ .dc-table th { background: var(--bg-panel); border-bottom: 2px solid var(--neon-blue) !important; position: sticky; top: 0; transition: 0.2s; white-space: nowrap; /* Empêche le titre de la colonne de s'écraser */ padding: 10px 8px; /* <-- MARGES RÉDUITES POUR GAIN DE PLACE */ font-size: 0.9em; /* <-- POLICE OPTIMISÉE */ } .dc-table th:hover { background: var(--bg-hover); color: var(--neon-blue); } .dc-table tbody tr:hover { background: rgba(0, 208, 255, 0.05); } .dc-table td { padding: 8px 8px; /* <-- MARGES RÉDUITES POUR GAIN DE PLACE */ white-space: nowrap; /* Empêche les données de s'étaler sur 4 lignes pour le tableau */ font-size: 0.9em; /* <-- POLICE OPTIMISÉE */ } /* Modale de détails (Conservation des retours à la ligne) */ #dcItemModal .modal-content { box-shadow: 0 0 30px rgba(0, 208, 255, 0.2); } #dc-modal-attrs > div > div:nth-child(2) { white-space: pre-wrap; /* Crucial : Affiche les sauts de ligne tapés dans l'admin ! */ line-height: 1.4; word-break: break-word; } /* --- LAYOUT E-COMMERCE (Sidebar + Main) --- */ .dc-layout { display: flex; gap: 20px; align-items: flex-start; } @media (max-width: 900px) { .dc-layout { flex-direction: column; } .dc-sidebar { width: 100% !important; position: static !important; } } .dc-sidebar { width: 260px; flex-shrink: 0; background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 6px; padding: 15px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; box-sizing: border-box; } .dc-sidebar::-webkit-scrollbar { width: 6px; } .dc-sidebar::-webkit-scrollbar-track { background: var(--bg-base); } .dc-sidebar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } .dc-main { flex: 1; min-width: 0; } .dc-filter-group { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-main); } .dc-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .dc-filter-group h4 { margin: 0 0 10px 0; color: var(--neon-blue); font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; } .dc-filter-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; padding-right: 5px; } .dc-filter-list::-webkit-scrollbar { width: 4px; } .dc-filter-list::-webkit-scrollbar-track { background: transparent; } .dc-filter-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } .cb-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: var(--text-main); cursor: pointer; transition: 0.2s; user-select: none; } .cb-wrap:hover { color: var(--text-title); } .cb-wrap input[type="checkbox"] { cursor: pointer; accent-color: var(--neon-blue); width: 15px; height: 15px; margin: 0; } /* ========================================================================== 14. MODULE : BASE DE DONNÉES GLOBALE (database.php) ========================================================================== */ #page-database .tab-nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); justify-content: center; } #page-database .tab-btn { background: var(--bg-panel); border: 1px solid var(--border-main); border-bottom: none; color: var(--text-muted); padding: 12px 25px; cursor: pointer; font-weight: bold; border-radius: 6px 6px 0 0; text-decoration: none; transition: 0.2s; } #page-database .tab-btn:hover { background: var(--bg-hover); color: var(--text-title); } #page-database .tab-btn.active { background: var(--bg-base); color: var(--neon-blue); border-color: var(--neon-blue); border-bottom: 2px solid var(--bg-base); margin-bottom: -2px; } /* ========================================================================== 15. MODULE : QUARTIER GÉNÉRAL (#page-qg) ========================================================================== */ #page-qg .tab-nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); justify-content: center; } #page-qg .tab-btn { background: var(--bg-panel); border: 1px solid var(--border-main); border-bottom: none; color: var(--text-muted); padding: 12px 25px; cursor: pointer; font-weight: bold; border-radius: 6px 6px 0 0; text-decoration: none; transition: 0.2s; } #page-qg .tab-btn:hover { background: var(--bg-hover); color: var(--text-title); } #page-qg .tab-btn.active { background: var(--bg-base); color: var(--neon-blue); border-color: var(--neon-blue); border-bottom: 2px solid var(--bg-base); margin-bottom: -2px; } /* ========================================================================== 16. MODULE : REGISTRE DU PERSONNEL (BADGES ID 3D) ========================================================================== */ .roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; padding: 10px 0; perspective: 1000px; /* Indispensable pour l'effet 3D */ } /* Le conteneur cliquable */ .id-card-container { width: 100%; height: 280px; /* HAUTEUR AUGMENTÉE POUR LE HANDLE RSI */ cursor: pointer; } /* La carte interne qui va tourner */ .id-card-inner { position: relative; width: 100%; height: 100%; text-align: left; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; /* Garde l'avant et l'arrière en 3D */ } /* L'action de rotation quand la classe 'flipped' est ajoutée par le JS/onclick */ .id-card-container.flipped .id-card-inner { transform: rotateY(180deg); } /* Face avant et Face arrière partagent ces propriétés */ .id-card-front, .id-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Cache le dos de la face quand elle est retournée */ border-radius: 8px; border: 2px solid var(--border-main); background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-base) 100%); box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; } /* Effet de reflet holographique (Scanner) sur la face avant */ .id-card-front::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(0, 208, 255, 0.15), transparent); transform: skewX(-25deg); animation: id-shine 4s infinite; pointer-events: none; z-index: 10; } @keyframes id-shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } } /* Personnalisation Face arrière (Dossier Classifié) */ .id-card-back { transform: rotateY(180deg); /* Positionne la face arrière à l'envers dès le départ */ border-color: var(--neon-gold); background: linear-gradient(135deg, #1a1500 0%, var(--bg-base) 100%); } /* EN-TÊTE DE LA CARTE */ .id-header { background: rgba(0,0,0,0.4); border-bottom: 1px solid var(--border-main); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; } .id-logo { font-family: 'Orbitron', sans-serif; font-weight: bold; color: var(--neon-blue); letter-spacing: 2px; font-size: 0.9em; } .id-serial { font-family: 'Share Tech Mono', monospace; color: var(--text-muted); font-size: 0.8em; } /* CORPS DE LA CARTE AVANT */ .id-body { display: flex; padding: 15px; gap: 15px; flex: 1; align-items: center; } .id-avatar-box { width: 90px; height: 110px; border: 1px solid var(--neon-blue); position: relative; border-radius: 4px; overflow: hidden; background: #000; flex-shrink: 0; } .id-avatar { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) grayscale(0.2); } .id-avatar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 208, 255, 0.1) 2px, rgba(0, 208, 255, 0.1) 4px); pointer-events: none; } .id-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .id-label { font-size: 0.65em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .id-value { font-family: 'Share Tech Mono', monospace; font-size: 0.95em; color: var(--text-main); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .id-name { font-family: 'Orbitron', sans-serif; font-size: 1.1em; font-weight: bold; color: var(--neon-blue); text-shadow: 0 0 5px rgba(0,208,255,0.3); } .id-rank { color: var(--neon-gold); font-weight: bold; text-shadow: 0 0 5px rgba(255,215,0,0.3); } /* PIED DE CARTE */ .id-footer { background: rgba(0,0,0,0.4); border-top: 1px solid var(--border-main); padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; } .id-barcode { height: 15px; width: 100px; background: repeating-linear-gradient(90deg, var(--text-muted), var(--text-muted) 2px, transparent 2px, transparent 4px, var(--text-muted) 4px, var(--text-muted) 5px, transparent 5px, transparent 8px); opacity: 0.5; } .id-status { font-family: 'Share Tech Mono', monospace; font-size: 0.7em; color: var(--text-muted); letter-spacing: 1px; } /* CORPS CARTE ARRIÈRE (MÉDAILLES) */ .id-back-content { padding: 15px; flex: 1; overflow-y: auto; } .id-back-content::-webkit-scrollbar { width: 4px; } .id-back-content::-webkit-scrollbar-thumb { background: var(--border-main); border-radius: 4px; } .medal-list { display: flex; flex-direction: column; gap: 8px; } .medal-item { display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,0.3); padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border-main); } /* Standardisation du Ruban CSS pour la carte */ .ribbon { width: 40px; height: 14px; border: 1px solid #888; border-bottom-color: #555; border-right-color: #555; border-radius: 1px; box-shadow: inset 0 0 3px rgba(0,0,0,0.6), 0 2px 3px rgba(0,0,0,0.5); flex-shrink: 0; } .medal-info { flex: 1; min-width: 0; } .medal-name { font-size: 0.8em; font-weight: bold; color: var(--neon-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .medal-citation { font-size: 0.7em; color: var(--text-main); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== MODULE ADMIN UTILISATEURS (Refonte Grille V2) ========================================================================== */ #subpage-users .user-card { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 8px; padding: 15px; margin-bottom: 15px; display: grid; grid-template-columns: 2fr 1fr; gap: 15px; align-items: center; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } #subpage-users .card-disavowed { border-color: var(--neon-red); background: rgba(255,0,0,0.05); opacity: 0.8; } /* ========================================================================== MODULE QG ROSTER : EFFET MEMBRE DÉSAVOUÉ (V2 - CARTE DÉCOUPÉE) ========================================================================== */ /* Surcharge dynamique des couleurs : Tout ce qui est bleu/vert/or devient rouge pour cette carte ! */ .id-card-container.disavowed { --neon-blue: var(--neon-red); --neon-green: var(--neon-red); --neon-gold: #aa0000; --bg-panel: #110000; --border-main: #550000; --shadow-glow: rgba(255, 0, 0, 0.4); } /* On assombrit très légèrement l'ensemble */ .id-card-container.disavowed .id-card-inner { filter: brightness(0.85); } /* L'EFFET DE DÉCOUPE EN 3 MORCEAUX MAGIQUE */ .id-card-container.disavowed .id-card-front, .id-card-container.disavowed .id-card-back { /* Le masque rend 2 obliques de la carte totalement transparentes, simulant des coups de lame */ -webkit-mask-image: linear-gradient(115deg, #000 0%, #000 30%, transparent 30.5%, transparent 32.5%, #000 33%, #000 65%, transparent 65.5%, transparent 67.5%, #000 68%, #000 100% ); mask-image: linear-gradient(115deg, #000 0%, #000 30%, transparent 30.5%, transparent 32.5%, #000 33%, #000 65%, transparent 65.5%, transparent 67.5%, #000 68%, #000 100% ); border-color: var(--neon-red); } /* Le rayon de scan holographique devient saccadé (Glitch) */ .id-card-container.disavowed .id-card-front::before { background: linear-gradient(to right, transparent, rgba(255, 0, 0, 0.3), transparent); animation: id-shine 2s steps(5) infinite; } /* Tampon DÉSAVOUÉ (qui sera lui-même fendu par la découpe !) */ .id-card-container.disavowed .id-card-front::after { content: 'DÉSAVOUÉ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 2.8em; font-weight: 900; color: rgba(255, 0, 0, 0.85); border: 6px solid rgba(255, 0, 0, 0.85); padding: 10px 20px; pointer-events: none; /* Laisse passer le clic pour retourner la carte */ text-shadow: 0 0 10px rgba(255, 0, 0, 0.8); box-shadow: 0 0 20px rgba(255,0,0,0.3) inset, 0 0 20px rgba(255,0,0,0.3); border-radius: 8px; z-index: 20; letter-spacing: 2px; } /* Avatar teinté d'un filtre rouge sang/sépia */ .id-card-container.disavowed .id-avatar { filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(5) contrast(1.5); opacity: 0.6; } /* ========================================================================== 17. MODULE : QG - CATALOGUE DES MÉDAILLES & GÉNÉRATEUR V3 ========================================================================== */ #page-qg .medal-catalog-card { background: var(--bg-panel); border: 1px solid var(--border-main); padding: 15px; border-radius: 6px; display: flex; gap: 15px; align-items: center; transition: 0.2s; position: relative; overflow: hidden; cursor: pointer; } #page-qg .medal-catalog-card:hover { border-color: var(--neon-blue); transform: translateY(-3px); box-shadow: 0 5px 15px var(--shadow-box); background: var(--bg-hover); } #page-qg .medal-cat-title { color: var(--neon-gold); border-bottom: 1px dashed var(--border-light); margin-top: 30px; margin-bottom: 15px; padding-bottom: 5px; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; } #page-qg .medal-builder-box { background: var(--bg-panel); border: 1px solid var(--neon-blue); padding: 25px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 0 20px rgba(0, 208, 255, 0.1); } /* Layout du Générateur */ #page-qg .builder-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-top: 20px; align-items: start; } @media(max-width:900px) { #page-qg .builder-layout { grid-template-columns: 1fr; } } #page-qg .bl-infos { background: var(--bg-base); border: 1px solid var(--border-light); padding: 20px; border-radius: 6px; } #page-qg .bl-pickers { display: flex; flex-direction: column; gap: 15px; } /* Pickers et Pagination */ #page-qg .picker-box { background: rgba(0,0,0,0.2); border: 1px solid var(--border-main); border-radius: 4px; padding: 15px; } #page-qg .picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.9em; color: var(--text-title); font-weight: bold; } #page-qg .picker-nav-btn { background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-main); padding: 2px 8px; cursor: pointer; border-radius: 3px; font-size: 0.9em; transition: 0.2s; } #page-qg .picker-nav-btn:hover { background: var(--neon-blue); color: #000; } #page-qg .picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } #page-qg .pkr-item { background: var(--bg-base); border: 1px solid var(--border-light); border-radius: 4px; padding: 10px 5px; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 45px; } #page-qg .pkr-item:hover { background: var(--bg-hover); border-color: var(--neon-blue); } #page-qg .pkr-item.selected { border-color: var(--neon-gold); background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); } #page-qg .pkr-lbl { font-size: 0.65em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--text-main); margin-top: 5px; } #page-qg .mini-prev { width: 40px; height: 14px; border: 1px solid transparent; border-radius: 1px; display: flex; justify-content: center; align-items: center; } #page-qg .mini-svg { width: 14px; height: 14px; fill: var(--text-main); } #page-qg .pkr-item.selected .mini-svg { fill: var(--neon-gold); } #page-qg .preview-zone { background: rgba(0,0,0,0.4); border: 2px dashed var(--border-light); padding: 30px; text-align: center; border-radius: 8px; margin-top: 15px; } #page-qg .preview-ribbon-wrapper { transform: scale(2.5); transform-origin: center center; margin-bottom: 25px; display:flex; justify-content:center; } /* ========================================================================== MODULE QG - HALL OF FAME ========================================================================== */ #page-qg .hof-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 20px 0 40px 0; } #page-qg .hof-card { background: var(--bg-panel); border: 1px solid var(--border-main); padding: 20px; border-radius: 8px; text-align: center; width: 160px; position: relative; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } #page-qg .hof-card:hover { transform: translateY(-5px); } #page-qg .hof-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-light); margin-bottom: 10px; background: #000; } #page-qg .hof-rank { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; background: var(--bg-base); border: 2px solid var(--border-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: 'Orbitron', sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } #page-qg .hof-name { color: var(--text-title); font-weight: bold; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-qg .hof-score { color: var(--neon-blue); font-size: 0.85em; margin-top: 5px; font-weight: bold; } /* Podium Colors */ #page-qg .hof-gold { border-color: var(--neon-gold); box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); } #page-qg .hof-gold .hof-avatar, #page-qg .hof-gold .hof-rank { border-color: var(--neon-gold); color: var(--neon-gold); } #page-qg .hof-silver { border-color: #e0e0e0; } #page-qg .hof-silver .hof-avatar, #page-qg .hof-silver .hof-rank { border-color: #e0e0e0; color: #e0e0e0; } #page-qg .hof-bronze { border-color: #cd7f32; } #page-qg .hof-bronze .hof-avatar, #page-qg .hof-bronze .hof-rank { border-color: #cd7f32; color: #cd7f32; } /* MODULE QG - RECHERCHE D'ÉQUIPAGE (GROUP FINDER) */ #page-qg .gf-form-box { background: var(--bg-hover); padding: 20px; border-radius: 8px; border: 1px solid var(--border-main); margin-bottom: 30px; } #page-qg .gf-my-search { background: var(--bg-panel); padding: 15px; border-radius: 6px; border: 1px solid var(--neon-gold); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } #page-qg .gf-search-card { background: var(--bg-base); padding: 15px; border-radius: 8px; border: 1px solid var(--border-main); } #page-qg .gf-search-card:hover { border-color: var(--neon-blue); transform: translateY(-2px); box-shadow: 0 4px 15px var(--shadow-box); } #page-qg .gf-tag { background: var(--neon-blue); color: #000; padding: 3px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; } #page-qg .gf-empty { text-align: center; color: var(--text-muted); padding: 30px; font-style: italic; } /* ========================================================================== MODULE QG - MODALE DÉTAIL MÉDAILLE ========================================================================== */ .medal-info-box { padding: 0; max-width: 600px; border-color: var(--neon-gold); } .medal-info-box .close-modal { position: absolute; top: 10px; right: 15px; z-index: 10; } .recipient-list { max-height: 350px; overflow-y: auto; padding-right: 5px; display: flex; flex-direction: column; gap: 10px; } .recipient-list::-webkit-scrollbar { width: 4px; } .recipient-list::-webkit-scrollbar-thumb { background: var(--border-main); border-radius: 4px; } .recipient-card { background: var(--bg-hover); border: 1px solid var(--border-main); padding: 10px; border-radius: 4px; display: flex; gap: 15px; align-items: center; } .recipient-card .r-avatar { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; border: 1px solid var(--neon-blue); } .recipient-card .r-info { flex: 1; min-width: 0; } .recipient-card .r-name { color: var(--text-title); font-weight: bold; font-size: 0.9em; margin-bottom: 2px; } .recipient-card .r-cit { color: var(--text-main); font-style: italic; font-size: 0.8em; line-height: 1.3; } .recipient-card .r-date { color: var(--text-muted); font-size: 0.75em; white-space: nowrap; } /* ========================================================================== MODULE PROFIL : DÉCORATIONS DU JOUEUR ========================================================================== */ #page-profile .profile-medals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 15px; } #page-profile .profile-medal-item { background: rgba(0,0,0,0.2); border: 1px solid var(--border-main); padding: 12px; border-radius: 4px; display: flex; gap: 15px; align-items: center; transition: 0.2s; } #page-profile .profile-medal-item:hover { border-color: var(--neon-gold); transform: translateY(-2px); background: var(--bg-hover); box-shadow: 0 4px 10px rgba(255, 215, 0, 0.1); } #page-profile .pm-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } #page-profile .pm-name { color: var(--neon-gold); font-weight: bold; font-size: 0.9em; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-profile .pm-cit { color: var(--text-main); font-size: 0.8em; font-style: italic; margin-bottom: 5px; line-height: 1.3; } #page-profile .pm-date { color: var(--text-muted); font-size: 0.7em; text-transform: uppercase; } /* ========================================================================== 18. MODULE : COMMERCE - JOURNAL MINIER V3 (Mining Ledger) ========================================================================== */ .mining-header { background: var(--bg-panel); border: 1px solid var(--border-main); padding: 15px 20px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-left: 4px solid var(--neon-gold); } .mining-tracker { display: flex; background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 8px; margin-bottom: 20px; overflow: hidden; } .m-step { flex: 1; text-align: center; padding: 15px; color: var(--text-muted); font-weight: bold; font-size: 0.9em; cursor: pointer; transition: 0.2s; border-right: 1px solid var(--border-main); } .m-step:last-child { border-right: none; } .m-step:hover { background: var(--bg-hover); color: var(--text-main); } .m-step.active { background: rgba(0, 208, 255, 0.1); color: var(--neon-blue); box-shadow: inset 0 -3px 0 var(--neon-blue); } .mining-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; } @media(max-width:800px) { .mining-grid { grid-template-columns: 1fr; } } .m-label { display: block; color: var(--text-muted); font-size: 0.8em; text-transform: uppercase; margin-bottom: 5px; } .m-input { background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); padding: 10px; border-radius: 4px; width: 100%; box-sizing: border-box; } .m-input:focus { border-color: var(--neon-blue); outline: none; } .m-result-box { background: rgba(0,0,0,0.3); border: 1px dashed var(--border-light); padding: 20px; text-align: center; border-radius: 4px; margin-top: 20px; } /* NOUVEAU: Panneau d'ajout et Historique des flux */ .m-add-panel { background: var(--bg-hover); padding: 15px; border: 1px solid var(--border-main); border-radius: 6px; margin-bottom: 15px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); } .m-log-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; } .m-log-box { background: var(--bg-panel); border: 1px solid var(--border-main); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; } .m-log-box.rev { border-color: rgba(0, 208, 255, 0.3); background: rgba(0, 208, 255, 0.05); } .m-log-box.exp { border-color: rgba(255, 80, 80, 0.3); background: rgba(255, 80, 80, 0.05); } .m-log-header { font-size: 0.85em; font-weight: bold; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-light); display: flex; justify-content: space-between; align-items: center; } .m-log-header.rev { color: var(--neon-blue); } .m-log-header.exp { color: var(--neon-red); } .m-log-list { max-height: 140px; overflow-y: auto; font-size: 0.85em; color: var(--text-main); display: flex; flex-direction: column; gap: 6px; padding-right: 5px; flex: 1; } .m-log-list::-webkit-scrollbar { width: 4px; } .m-log-list::-webkit-scrollbar-thumb { background: var(--border-main); border-radius: 4px; } .m-log-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.4); padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border-main); transition: 0.2s; } .m-log-item:hover { border-color: var(--border-light); } .m-log-item-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 10px; } .m-log-item-amt { font-family: 'Share Tech Mono', monospace; flex-shrink: 0; font-weight: bold; } .btn-icon-del { background: none; border: none; color: var(--neon-red); cursor: pointer; font-size: 1.1em; padding: 0 0 0 8px; opacity: 0.7; transition: 0.2s; } .btn-icon-del:hover { opacity: 1; color: #fff; text-shadow: 0 0 5px var(--neon-red); } /* Roster Rows */ .roster-row { background: var(--bg-panel); border: 1px solid var(--border-main); padding: 10px; border-radius: 4px; display: flex; align-items: center; gap: 10px; transition: 0.2s; } .roster-row.paid { opacity: 0.5; background: var(--bg-base); border-color: var(--neon-green); } .chk-pay { width: 20px; height: 20px; cursor: pointer; accent-color: var(--neon-green); } .r-name { color: var(--text-title); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-pay { font-family: 'Share Tech Mono', monospace; font-size: 0.9em; } .mining-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .m-card { background: var(--bg-panel); border: 1px solid var(--border-main); padding: 15px; border-radius: 8px; display: flex; flex-direction: column; transition: 0.2s; } .m-card:hover { transform: translateY(-3px); border-color: var(--neon-blue); box-shadow: 0 5px 15px rgba(0, 208, 255, 0.15); } /* ========================================================================== 19. MODULE : HEATMAP ET DISPONIBILITÉS (TÉLÉMÉTRIE) ========================================================================== */ .avail-wrapper { background: rgba(0,0,0,0.2); border: 1px solid var(--border-main); padding: 15px; border-radius: 4px; overflow-x: auto; } .avail-grid { min-width: 750px; display: flex; flex-direction: column; gap: 2px; } .avail-row { display: flex; align-items: center; gap: 2px; } /* Égalisation parfaite de la première colonne (Jours / Vide) */ .avail-cell.empty, .avail-day-name { width: 60px; flex: 0 0 60px; box-sizing: border-box; } .avail-day-name { font-size: 0.75em; color: var(--text-title); text-transform: uppercase; cursor: pointer; transition: 0.2s; font-weight: bold; } .avail-day-name:hover { color: var(--neon-blue); } /* Distribution équitable parfaite des 24 heures */ .avail-header-cell { flex: 1; text-align: center; font-size: 0.7em; color: var(--text-muted); } .avail-cell:not(.empty) { flex: 1; height: 25px; box-sizing: border-box; } /* Grille du Profil (Pinceau intéractif) */ .time-cell { background: rgba(255,255,255,0.05); border: 1px solid var(--border-main); border-radius: 2px; cursor: crosshair; transition: background 0.1s; } .time-cell:hover { border-color: var(--border-light); } .time-cell.selected { background: var(--neon-green); border-color: #00ff00; box-shadow: 0 0 5px rgba(0,255,0,0.4); } /* Grille du Radar Admin (Heatmap) */ .hm-cell { border: 1px solid var(--border-main); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 0.7em; color: #fff; text-shadow: 1px 1px 2px #000; font-weight: bold; transition: 0.2s; } .hm-cell:hover { transform: scale(1.4); z-index: 5; position: relative; border-color: #fff !important; box-shadow: 0 0 15px rgba(255,0,0,1); } /* Messagerie Interne */ #page-messages { max-width: 900px; margin: 0 auto; } #page-messages h2 { color: var(--neon-blue); margin-bottom: 20px; } #page-messages .msg.info { margin-bottom: 20px; } .tab-nav { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); padding-bottom: 10px; } .tab-nav a { padding: 10px 20px; color: var(--text-muted); text-decoration: none; border-radius: 4px 4px 0 0; transition: 0.2s; } .tab-nav a:hover { color: var(--text-title); background: rgba(0,208,255,0.1); } .tab-nav a.active { background: var(--neon-blue); color: #000; } #page-messages .box { border: 1px solid var(--border-light); background: var(--bg-box); padding: 20px; border-radius: 4px; } #page-messages .box.compose { border-color: var(--neon-green); } #page-messages .box.view { border-color: var(--neon-blue); } .msg-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-main); padding-bottom: 10px; margin-bottom: 15px; } .msg-header .subject { color: var(--neon-blue); font-weight: bold; font-size: 1.1em; } .msg-header .meta { color: var(--text-muted); font-size: 0.9em; } .msg-header .actions { margin-left: 10px; } .msg-body { white-space: pre-wrap; line-height: 1.6; color: var(--text-title); } .msg-compose h3 { margin-top: 0; color: var(--neon-green); } .mailbox-usage { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px; background: var(--bg-header); border-radius: 4px; } .mailbox-usage .usage-label { color: var(--text-muted); font-size: 0.9em; } .mailbox-usage .usage-bar { flex: 1; height: 8px; background: var(--bg-base); border-radius: 4px; overflow: hidden; } .mailbox-usage .usage-fill { height: 100%; background: var(--neon-green); transition: width 0.3s; } .mailbox-usage .usage-text { color: var(--text-title); font-size: 0.85em; min-width: 80px; text-align: right; } #page-messages label { display: block; margin-bottom: 5px; color: var(--text-muted); } #page-messages select, #page-messages input[type="text"], #page-messages textarea { width: 100%; padding: 10px; margin-bottom: 15px; background: var(--bg-base); border: 1px solid var(--border-light); color: var(--text-title); border-radius: 4px; box-sizing: border-box; } #page-messages select:focus, #page-messages input:focus, #page-messages textarea:focus { outline: none; border-color: var(--neon-blue); box-shadow: 0 0 5px rgba(0,208,255,0.3); } .msg-footer { margin-top: 20px; } .msg-footer a { color: var(--neon-blue); } #page-messages table { width: 100%; border-collapse: collapse; } #page-messages table th { padding: 12px; text-align: left; background: var(--bg-header); color: var(--text-muted); font-weight: normal; font-size: 0.85em; text-transform: uppercase; } #page-messages table td { padding: 12px; border-bottom: 1px solid var(--border-main); } #page-messages table tr:hover { background: rgba(255,255,255,0.02); } #page-messages table tr.unread { background: rgba(0,208,255,0.1); } #page-messages table td.sender { font-weight: bold; color: var(--neon-blue); } #page-messages table td.subject a { color: var(--text-title); text-decoration: none; } #page-messages table td.subject a:hover { color: var(--neon-blue); } #page-messages table td .badge { background: var(--neon-blue); color: #000; padding: 2px 6px; border-radius: 3px; font-size: 0.7em; margin-left: 5px; } #page-messages table td .badge-read { padding: 2px 6px; border-radius: 3px; font-size: 0.7em; margin-left: 5px; } #page-messages table td .badge-read.read { background: var(--neon-green); color: #000; } #page-messages table td .badge-read.unread { background: var(--text-muted); color: #fff; } #page-messages table td .rank-badge { display: inline-block; font-size: 0.65em; background: var(--bg-header); color: var(--text-muted); padding: 2px 5px; border-radius: 3px; margin-left: 5px; border: 1px solid var(--border-main); } #page-messages table td .date { color: var(--text-muted); font-size: 0.9em; } #page-messages table td .actions { text-align: right; } #page-messages table td .actions a { color: var(--neon-red); } .char-counter { text-align: right; color: var(--text-muted); font-size: 0.8em; margin-bottom: 10px; } #page-messages button { background: var(--neon-green); color: #000; padding: 12px 25px; border: none; font-weight: bold; cursor: pointer; border-radius: 4px; transition: 0.2s; } #page-messages button:hover { box-shadow: 0 0 15px rgba(0,255,0,0.5); } #page-messages .empty-state { padding: 40px; color: var(--text-muted); text-align: center; } /* Modales Admin */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; } .modal-content { background: var(--bg-base); border: 1px solid var(--neon-gold); border-radius: 8px; width: 90%; max-width: 600px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--border-main); } .modal-header span { color: var(--text-muted); font-size: 1.5em; cursor: pointer; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; background: var(--bg-panel); border-top: 1px solid var(--border-main); } #page-messages table tr.deleted { background: rgba(255, 80, 80, 0.05); opacity: 0.8; } #page-messages table tr.deleted:hover { opacity: 1; } #page-messages table tr.archived { background: rgba(255, 215, 0, 0.05); opacity: 0.8; } #page-messages table tr.archived:hover { opacity: 1; } /* Sous-onglets Admin */ .sub-tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--border-main); padding-bottom: 10px; } .sub-tabs .sub-btn { padding: 10px 20px; color: var(--text-muted); text-decoration: none; border-radius: 4px 4px 0 0; transition: 0.2s; font-size: 0.9em; } .sub-tabs .sub-btn:hover { color: var(--text-title); background: rgba(0,208,255,0.1); } .sub-tabs .sub-btn.active { background: var(--neon-blue); color: #000; font-weight: bold; }