:root { --bg: #050506; --bg-panel: #0a0b0d; --bg-panel-2: #0f1113; --line: #23241f; --line-soft: #1a1b17; --text: #ede8dc; --text-dim: #8a8579; --text-faint: #4f4c43; --cyan: #52e0c4; --cyan-dim: #1f4a41; --amber: #ffb347; --amber-dim: #6b4a1c; --red: #ff6b57; --red-dim: #5c2e2e; --green: #7be08a; --font-display: 'Space Grotesk', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ── Skins ──────────────────────────────────────────────────────────────── Un "skin" pilote la STRUCTURE (rayons, ombres, décors, police des titres, quel accent — cyan ou amber — sert de couleur principale de l'UI). Un "thème" (voir themeConfig.js, injecté dans #theme-vars-style) pilote uniquement la PALETTE (valeurs de --bg/--cyan/--amber/etc.). Les deux se combinent librement : 5 thèmes × 2 skins = 10 ambiances. Le skin actif se lit sur . ────────── */ :root, [data-skin="scanner"] { --radius-sm: 2px; --radius: 2px; --radius-lg: 2px; --shadow-card: none; --accent: var(--amber); --accent-dim: var(--amber-dim); --head-font: var(--font-mono); --head-tracking: 0.14em; --head-transform: uppercase; } [data-skin="classique"] { --radius-sm: 5px; --radius: 9px; --radius-lg: 13px; --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 10px 26px -14px rgba(0,0,0,0.6); --accent: var(--cyan); --accent-dim: var(--cyan-dim); --head-font: var(--font-display); --head-tracking: 0.05em; --head-transform: none; } * { box-sizing: border-box; } html { background: var(--bg); } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--font-mono); min-height: 100vh; position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: 0.5; } [data-skin="classique"] body::before { display: none; } @media (prefers-reduced-motion: reduce), (max-width: 640px) { body::before { display: none; } } ::selection { background: var(--cyan-dim); color: #fff; } button, input, select { font-family: inherit; } .btn-explore, .btn-poi, .btn-mine, .btn-depot, .btn-hangar-danger, .btn-hangar-success, .btn-cargo-bulk, .shop-tab, .depot-tab, .activity-btn { position: relative; overflow: hidden; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .btn-explore:hover:not(:disabled), .btn-poi:hover:not(:disabled), .btn-mine:hover:not(:disabled), .btn-depot:hover:not(:disabled), .btn-hangar-danger:hover:not(:disabled), .btn-hangar-success:hover:not(:disabled), .btn-cargo-bulk:hover:not(:disabled) { transform: translateY(-1px); } a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* ── Fond étoilé ─────────────────────────────────────────────────────── */ .starfield { position: fixed; inset: 0; z-index: -1; background: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,0.28), transparent), radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,0.32), transparent), radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,0.28), transparent), radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.42), transparent), radial-gradient(1px 1px at 92% 10%, rgba(255,255,255,0.32), transparent), radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.28), transparent), var(--bg); background-attachment: fixed; } .starfield::after { content: ""; position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(ellipse 1000px 600px at 20% -10%, var(--amber-dim), transparent 62%), radial-gradient(ellipse 800px 600px at 100% 10%, var(--cyan-dim), transparent 62%), radial-gradient(ellipse 900px 700px at 50% 120%, rgba(60,45,25,0.5), transparent 68%); opacity: 0.28; animation: bg-drift 55s ease-in-out infinite alternate; } @keyframes bg-drift { 0% { transform: translate(0%, 0%) scale(1); } 50% { transform: translate(2%, -2%) scale(1.05); } 100% { transform: translate(-2%, 2%) scale(1); } } /* ── Effet "Étoiles scintillantes" (module Effets — indépendant du thème) ── Couche entièrement neutre (couleur --text) et à très faible opacité, pour rester lisible et cohérente sur n'importe quel thème/palette du site. Ne s'affiche que si l'admin a activé l'effet (classe posée en JS). */ .twinkle-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; } .twinkle-stars.active { display: block; } .twinkle-star { position: absolute; border-radius: 50%; background: var(--text); opacity: 0; animation: twinkle-fade ease-in-out infinite; will-change: opacity, transform; } @keyframes twinkle-fade { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: var(--twinkle-max, 0.85); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .twinkle-star { animation: none; opacity: 0.35; } } /* ── Pluie de météores (fond animé) ──────────────────────────────────── */ .meteor { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; animation: meteor-fall linear infinite; will-change: transform, opacity; } .meteor::before { content: ""; position: absolute; top: -1px; right: 0; width: var(--trail, 90px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amber) 75%, var(--amber) 100%); box-shadow: 0 0 6px 1px var(--amber); } .meteor.meteor-pale::before { background: linear-gradient(90deg, transparent, var(--text) 75%, var(--text) 100%); box-shadow: 0 0 6px 1px var(--text); } @keyframes meteor-fall { 0% { transform: rotate(var(--angle, 215deg)) translateX(0); opacity: 0; } 6% { opacity: 1; } 75% { opacity: 1; } 100% { transform: rotate(var(--angle, 215deg)) translateX(var(--dist, -1100px)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .meteor { animation: none; display: none; } } /* ── Écran d'accueil ─────────────────────────────────────────────────── */ .landing { min-height: 100vh; display: flex; flex-direction: column; } .landing-nav, .portal-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; border-bottom: 1px solid var(--line-soft); } .landing-brand { font-family: var(--head-font); font-weight: 500; letter-spacing: 0.22em; font-size: 12px; display: flex; align-items: center; gap: 10px; color: var(--text-dim); } [data-skin="scanner"] .landing-brand::after { content: "ONLINE"; font-size: 9px; letter-spacing: 0.1em; color: var(--green); border: 1px solid var(--green); border-radius: 20px; padding: 2px 8px; margin-left: 6px; opacity: 0.85; } .brand-glyph { color: var(--accent); font-size: 15px; } .landing-admin-link { font-size: 10.5px; color: var(--text-faint); text-decoration: none; border: 1px solid var(--line); padding: 6px 14px; border-radius: var(--radius-sm); transition: color 0.15s, border-color 0.15s; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); } .landing-admin-link:hover { color: var(--accent); border-color: var(--accent-dim); } .landing-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; max-width: 680px; margin: 0 auto; } .landing-eyebrow { font-size: 10.5px; letter-spacing: 0.35em; color: var(--accent); margin-bottom: 24px; text-transform: uppercase; font-family: var(--font-mono); padding: 8px 0; display: inline-block; } [data-skin="scanner"] .landing-eyebrow { border-top: 1px solid var(--accent-dim); border-bottom: 1px solid var(--accent-dim); } .landing-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.16; margin: 0 0 24px; letter-spacing: -0.015em; color: var(--text); } .landing-title::after { content: none; } .landing-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.8; max-width: 500px; margin: 0 0 36px; font-weight: 400; } .landing-desc code { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; color: var(--cyan); font-size: 12px; } .landing-hint { margin-top: 14px; font-size: 11px; color: var(--text-faint); } .discord-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #5865F2; color: #fff; text-decoration: none; padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; letter-spacing: 0.03em; box-shadow: 0 10px 26px -8px rgba(88, 101, 242, 0.4); transition: filter 0.15s, transform 0.15s, box-shadow 0.15s; text-transform: uppercase; } .discord-login-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(88, 101, 242, 0.5); } .landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; max-width: 932px; margin: 74px auto 60px; width: calc(100% - 48px); background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .feature-card { background: var(--bg-panel); border: none; border-radius: 0; padding: 26px 22px; text-align: left; transition: background-color 0.18s ease; border-top: 2px solid transparent; } .feature-card:hover { background: var(--bg-panel-2); border-top-color: var(--accent); } .feature-icon { font-size: 18px; margin-bottom: 14px; opacity: 0.85; filter: grayscale(0.3); } .feature-title { font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; margin-bottom: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } .feature-desc { font-size: 12px; color: var(--text-dim); line-height: 1.65; } /* ── Échelle de police globale (accessibilité — réglable depuis Support) ─ --ui-font-scale est lu/écrit en JS (app.js) et persisté en localStorage. 1 = taille par défaut (déjà légèrement agrandie par rapport à V2.9.5). */ :root { --ui-font-scale: 1.08; } body { zoom: var(--ui-font-scale); } .font-scale-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .font-scale-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .font-scale-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-panel-2); color: var(--text); font-family: var(--font-mono); font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .font-scale-btn:hover { border-color: var(--accent); color: var(--accent); } .font-scale-btn.small { font-size: 10px; } .font-scale-btn.big { font-size: 16px; } .font-scale-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); min-width: 42px; text-align: center; } .font-scale-reset { font-size: 10.5px; color: var(--text-faint); background: none; border: none; text-decoration: underline; cursor: pointer; } .font-scale-reset:hover { color: var(--accent); } /* ── Portail joueur ───────────────────────────────────────────────────── */ .portal-user { display: flex; align-items: center; gap: 12px; } .me-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; background: var(--bg-panel-2); } #me-username { font-size: 13px; color: var(--text-dim); } .portal-logout { background: none; border: 1px solid var(--line); color: var(--text-dim); padding: 7px 12px; border-radius: 3px; font-size: 11px; cursor: pointer; } .portal-logout:hover { color: var(--red); border-color: var(--red-dim); } .portal-content { padding: 24px 28px 48px; max-width: 1100px; margin: 0 auto; } .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 780px) { .portal-grid { grid-template-columns: 1fr; } } .pcard { position: relative; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 22px; box-shadow: var(--shadow-card); } [data-skin="scanner"] .pcard::before { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 1px solid var(--accent-dim); border-left: 1px solid var(--accent-dim); opacity: 0.9; } [data-skin="scanner"] .pcard::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 18px; height: 18px; border-bottom: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim); opacity: 0.9; } .pcard-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .pcard-title { font-family: var(--head-font); font-weight: 600; font-size: 11.5px; letter-spacing: var(--head-tracking); color: var(--accent); text-transform: var(--head-transform); } [data-skin="scanner"] .pcard-title::before { content: "// "; color: var(--text-faint); } /* ── Densité : listes longues avec scroll interne au lieu de pousser la page en hauteur. S'applique à tous les panneaux qui réutilisent ces classes génériques (membres corpo, marché, classement, succès, tickets support, browse corpo...). ────────────────────────────── */ .depot-list, .inventory-list { max-height: 340px; overflow-y: auto; padding-right: 4px; } .depot-list { scrollbar-width: thin; } .depot-list::-webkit-scrollbar, .inventory-list::-webkit-scrollbar { width: 6px; } .depot-list::-webkit-scrollbar-thumb, .inventory-list::-webkit-scrollbar-thumb { background: var(--line-soft, var(--line)); border-radius: 3px; } /* ── Densité : grilles 2 colonnes pour les listes/formulaires génériques au lieu d'un empilement plein-largeur sur 1 colonne. ─────────────── */ .depot-list, .colony-bonus-list, .industry-recipes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 780px) { .depot-list, .colony-bonus-list, .industry-recipes-list { grid-template-columns: 1fr; } } .corp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; } .corp-form .corp-textarea, .corp-form textarea, .corp-form button, .corp-form .corp-label { grid-column: 1 / -1; } @media (max-width: 780px) { .corp-form { grid-template-columns: 1fr; } } .pilot-card { grid-column: 1 / -1; } /* ── Carte Pilote : colonne principale + colonne annonce (portrait) — V3.1.0 ── */ .pilot-card-body { display: flex; align-items: stretch; gap: 20px; } .pilot-card-main { flex: 1 1 auto; min-width: 0; } /* ── Bandeau "Annonce importante" (administrable, carte Pilote) ────────── Colonne verticale ("portrait") accolée à droite du contenu pilote, même hauteur que la colonne principale grâce à align-items:stretch. ── */ .announcement-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 260px; flex-shrink: 0; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--bg-panel-2); } .announcement-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; } .announcement-banner-body { min-width: 0; } .announcement-banner-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; color: var(--text); } .announcement-banner-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .announcement-banner.color-amber { border-left-color: var(--amber, #d4af37); } .announcement-banner.color-cyan { border-left-color: var(--cyan, #37c6d4); } .announcement-banner.color-red { border-left-color: var(--red, #d44b37); } .announcement-banner.color-green { border-left-color: var(--green, #3fbf6b); } @media (max-width: 780px) { .pilot-card-body { flex-direction: column; } .announcement-banner { width: 100%; } } .pilot-card-head-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .pilot-avatar-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; cursor: pointer; } .pilot-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--bg-panel-2); display: block; } .pilot-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-panel-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-dim); } .pilot-avatar-wrap:hover .pilot-avatar-edit { color: var(--cyan); border-color: var(--cyan-dim); } .pilot-avatar-reset { font-size: 10px; color: var(--text-dim); background: none; border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; cursor: pointer; margin-left: 8px; } .pilot-avatar-reset:hover { color: var(--red); border-color: var(--red-dim); } /* ── Navigation latérale groupée par catégories ───────────────────────── */ .portal-layout { display: flex; gap: 22px; margin: 28px 0 20px; align-items: flex-start; } .portal-sidenav { width: 200px; flex-shrink: 0; position: sticky; top: 20px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 10px; } .sidenav-group-label { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding: 12px 10px 6px; font-family: var(--font-mono); } .portal-sidenav .portal-tab { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent; color: var(--text-dim); padding: 8px 10px; border-radius: 0; font-size: 12px; font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.01em; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .portal-sidenav .portal-tab:hover { color: var(--text); background: var(--bg-panel-2); } .portal-sidenav .portal-tab.active { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); border-left-color: var(--accent); font-weight: 600; } /* ── Sidenav "fixe" côté gauche de la fenêtre (bureau uniquement) ───────── Au-delà de 781px de large, le menu se détache du flux et reste épinglé au bord gauche de la fenêtre (position: fixed), quel que soit le défilement. Le corps de page (portal-main) récupère toute la largeur ainsi libérée au lieu de rester contraint par le max-width centré de .portal-content. */ @media (min-width: 781px) { .portal-content { max-width: none; padding-left: 264px; } .portal-layout { display: block; } .portal-sidenav { position: fixed; top: var(--sidenav-top, 84px); left: 24px; width: 200px; max-height: calc(100vh - var(--sidenav-top, 84px) - 24px); overflow-y: auto; z-index: 40; } .portal-main { width: 100%; } } @media (min-width: 1400px) { .portal-content { max-width: 1600px; margin: 0 auto; } } .sidenav-group:first-child .sidenav-group-label { padding-top: 2px; } .sidenav-toggle { display: none; } .portal-main { flex: 1; min-width: 0; } .portal-breadcrumb { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; } .portal-tabpanels .portal-panel { grid-column: 1 / -1; } @media (max-width: 780px) { .portal-layout { flex-direction: column; } .portal-sidenav { width: 100%; position: static; padding: 0; border: none; background: none; } .sidenav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg-panel); border: 1px solid var(--line); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: var(--font-display); cursor: pointer; } .sidenav-toggle-caret { color: var(--text-faint); transition: transform 0.15s; } .sidenav-toggle[aria-expanded="true"] .sidenav-toggle-caret { transform: rotate(180deg); } .sidenav-groups { display: none; margin-top: 8px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px; max-height: 60vh; overflow-y: auto; } .sidenav-groups.open { display: block; } } /* ── Carte "Activités" (Minage / Combat / Explorer / Xénobiologie) ───────── */ .activities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .activity-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--radius); padding: 16px 10px; font-size: 20px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .activity-btn span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; } .activity-btn:hover { color: var(--text); border-color: var(--accent-dim); } .activity-btn.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: var(--accent-dim); } @media (max-width: 780px) { .portal-tabs { gap: 8px; } .portal-tab { flex: 1 1 calc(50% - 8px); text-align: center; padding: 10px 8px; } } .pilot-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 16px; } /* ── Progression (niveau / XP / titres) — miroir de src/progression.js ── */ .pilot-progression { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 8px; } .pilot-progression-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pilot-level-badge { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid var(--amber-dim); border-radius: 14px; padding: 4px 12px; } .pilot-title-chip { font-size: 11px; font-weight: 600; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid var(--cyan-dim); border-radius: 14px; padding: 3px 10px; } .pilot-progression-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); } .pilot-title-select-row { margin-top: 2px; } .pilot-stats { display: flex; gap: 30px; flex-wrap: wrap; } .pilot-stat { display: flex; flex-direction: column; gap: 4px; } .pilot-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .pilot-stat-value { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .pilot-stat-value.amber { color: var(--amber); } .pilot-stat-value.cyan { color: var(--cyan); } .ship-card-body { display: flex; gap: 18px; align-items: flex-start; } .ship-info { flex: 1; min-width: 0; } .ship-image-box { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius); background: var(--bg-panel-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ship-image { width: 100%; height: 100%; object-fit: contain; object-position: center; } .ship-image-placeholder { font-size: 30px; opacity: 0.35; } @media (max-width: 480px) { .ship-image-box { width: 72px; height: 72px; } } .ship-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 16px; } .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .bar-label { font-size: 10px; color: var(--text-faint); width: 62px; flex-shrink: 0; } .bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-panel-2); border: 1px solid var(--line); overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; } .bar-fill.amber { background: linear-gradient(90deg, var(--amber-dim), var(--amber)); } .bar-fill.cyan { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); } .bar-value { font-size: 10px; color: var(--text-dim); width: 70px; text-align: right; flex-shrink: 0; } /* V3.19.0 - etat "surcharge" du cargo (cargo utilise > capacite) */ .bar-fill.over { background: linear-gradient(90deg, var(--red-dim), var(--red)); } .bar-value.over, .sticky-value.over, .cargo-used-label.over, #cargo-used-label.over { color: var(--red); font-weight: 600; } .ship-system { margin-top: 10px; font-size: 11px; color: var(--text-faint); } .explore-card { grid-column: 1 / -1; } .explore-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .explore-visited { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); } .explore-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 14px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .explore-current-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; } .explore-current-sec { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; } .explore-docked { font-size: 11px; color: var(--cyan); } .explore-section { margin-bottom: 6px; } .explore-section-title { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .explore-map-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .explore-map-toggle:hover { color: var(--cyan-dim); } .explore-map-toggle-caret { font-size: 13px; transition: transform 0.15s ease; } /* V2.6.1 — Carte des Systèmes mise en avant en haut de l'onglet Explorer */ .explore-map-section-featured { border: 1px solid var(--cyan-dim, #2a5f6b); background: linear-gradient(180deg, rgba(64, 200, 220, 0.07), rgba(64, 200, 220, 0.015)); border-radius: 10px; padding: 14px; margin-bottom: 16px; box-shadow: 0 0 18px rgba(64, 200, 220, 0.08); } .explore-map-featured-title { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--cyan, #6fe3ff); text-transform: none; margin-bottom: 12px; } .explore-connections, .explore-pois { display: flex; gap: 12px; flex-wrap: wrap; } .explore-minerdef-hint { font-size: 12px; color: var(--text-faint); margin: 4px 0 10px; } .explore-minerdef-zones { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .minerdef-zone { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 10px; } .minerdef-zone-head { font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--text); } .minerdef-zone-list { display: flex; flex-direction: column; gap: 3px; } .minerdef-zone-row { font-size: 11.5px; color: var(--text-faint); } .minerdef-zone-more { font-style: italic; opacity: 0.7; } .minerdef-zone-empty { font-size: 11.5px; color: var(--text-faint); font-style: italic; } .btn-explore { min-width: 160px; flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s; } .btn-explore:hover:not(:disabled) { border-color: var(--amber-dim); transform: translateY(-1px); } .btn-explore:disabled { opacity: 0.45; cursor: not-allowed; } .btn-explore .explore-dest-name { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; } .btn-explore .explore-dest-meta { display: block; font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .btn-explore .explore-dest-meta .fuel { color: var(--amber); } .btn-explore.unknown .explore-dest-name { color: var(--text-dim); } .btn-poi { min-width: 200px; flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s; } .btn-poi:hover:not(:disabled) { border-color: var(--amber-dim); transform: translateY(-1px); } .btn-poi:disabled { opacity: 0.45; cursor: not-allowed; } .btn-poi .poi-name { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; } .btn-poi .poi-desc { display: block; font-size: 10px; color: var(--text-faint); line-height: 1.5; } .btn-poi .poi-cd { display: block; margin-top: 6px; font-size: 10px; color: var(--red); font-family: var(--font-mono); } .mine-card { grid-column: 1 / -1; } .mine-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.6; } .mine-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .btn-mine { flex: 1; min-width: 140px; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color 0.15s, transform 0.15s; } .btn-mine span { font-size: 10px; color: var(--amber); font-weight: 500; font-family: var(--font-mono); } .btn-mine:hover:not(:disabled) { border-color: var(--amber-dim); transform: translateY(-1px); } .btn-mine:disabled { opacity: 0.4; cursor: not-allowed; } .mine-countdown { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--cyan); letter-spacing: 0.05em; } /* Encart "vaisseau en expédition" (V3.1.5) — affiché à côté du timer pendant une Expédition Stellaire en cours. Correctif (VX.XX) — l'encart était plaqué en haut de la colonne de droite et trop petit. Il reste sur le côté droit (comme voulu), mais est maintenant centré verticalement sur toute la hauteur du bloc actif et agrandi (voir capture "ajustement.jpg"). */ .expedition-active-row { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; } .expedition-active-main { flex: 1; min-width: 220px; } .expedition-ship-box { width: 260px; flex-shrink: 0; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; display: flex; flex-direction: column; justify-content: center; align-self: center; } .expedition-ship-image-box { /* V3.17.0 — le cadre s'adapte désormais à la largeur de la carte (ratio 16/9) au lieu d'une hauteur fixe de 130 px : combiné à `object-fit: contain` ci-dessous, l'illustration du vaisseau n'est plus rognée (le titre incrusté en bas des visuels était coupé). Même convention que les autres visuels fournis par l'administration sur le site (.npcpilot-card img). */ width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .expedition-ship-image { width: 100%; height: 100%; object-fit: contain; object-position: center; } .expedition-ship-image-placeholder { font-size: 38px; opacity: 0.35; } .expedition-ship-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 14px; } .expedition-ship-stats { display: flex; flex-direction: column; gap: 9px; } .expedition-ship-stat { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .expedition-ship-stat-label { color: var(--text-faint); } .expedition-ship-stat-value { font-family: var(--font-mono); color: var(--amber); font-weight: 600; } @media (max-width: 560px) { .expedition-ship-box { width: 100%; align-self: stretch; } } .btn-collect { background: var(--green); color: #06210f; border: none; padding: 14px 26px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--font-display); transition: filter 0.15s; animation: btn-pulse 1.6s ease-out infinite; } .btn-collect:hover { filter: brightness(1.1); animation-play-state: paused; } .mine-result { margin-top: 16px; padding: 14px 16px; background: rgba(95, 216, 143, 0.08); border: 1px solid var(--green); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.8; } .mine-error { margin-top: 10px; font-size: 12px; color: var(--red); min-height: 14px; } /* PvP — Duels (V2.4) */ .depot-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft, rgba(255,255,255,0.08)); border-radius: var(--radius-sm); font-size: 12px; } .depot-item span { flex: 1; } .qty-input { padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft, rgba(255,255,255,0.15)); background: rgba(0,0,0,0.25); color: var(--text, #fff); font-size: 12px; } .inventory-card { grid-column: 1 / -1; } .inventory-list { display: flex; flex-wrap: wrap; gap: 10px; } .inv-item { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 11px; min-width: 120px; } .inv-item-name { color: var(--text); font-weight: 600; margin-bottom: 4px; } .inv-item-qty { color: var(--text-dim); } .inv-item-val { color: var(--amber); font-size: 10px; margin-top: 2px; } .inv-empty { color: var(--text-faint); font-size: 12px; } /* ── Carte Dépôt-Vente ────────────────────────────────────────────────── */ .depot-card { grid-column: 1 / -1; } .depot-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .depot-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .shop-tab { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.02em; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s; } .shop-tab:hover { color: var(--text); border-color: var(--cyan-dim, var(--cyan)); } .shop-tab:active { transform: translateY(1px); } .shop-tab.active { background: var(--cyan); color: #04141a; border-color: var(--cyan); } @media (max-width: 780px) { .shop-tab { flex: 1 1 calc(50% - 8px); text-align: center; padding: 8px 6px; } } .depot-tab { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-family: var(--font-display); font-weight: 600; transition: border-color 0.15s, color 0.15s; } .depot-tab:hover { color: var(--text); border-color: var(--cyan-dim); } .depot-tab.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); } .depot-list { display: flex; flex-direction: column; gap: 8px; } .depot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; } .depot-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .depot-row-name { font-size: 12px; font-weight: 600; color: var(--text); } .depot-row-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .depot-row-price { font-size: 12px; color: var(--amber); font-weight: 600; white-space: nowrap; } .depot-row-desc { font-size: 10px; color: var(--text-faint); white-space: pre-line; } .corp-assembled-row { align-items: flex-start; } .depot-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .depot-qty-input { width: 56px; background: var(--bg-panel); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 8px; font-size: 12px; font-family: var(--font-mono); text-align: center; } .btn-depot { background: var(--bg-panel); border: 1px solid var(--cyan-dim); color: var(--cyan); padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 600; font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s; } .btn-depot:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-1px); } .btn-depot:disabled { opacity: 0.4; cursor: not-allowed; } .btn-depot.danger { border-color: var(--red-dim); color: var(--red); } .btn-depot.danger:hover:not(:disabled) { border-color: var(--red); } .depot-empty { color: var(--text-faint); font-size: 12px; } /* Joueurs présents dans le système (carte "Vaisseau actif" — V3.5.0) */ .players-in-system { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .players-in-system-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft, rgba(255,255,255,0.08)); border-radius: var(--radius-sm); font-size: 12px; } .players-in-system-empty { color: var(--text-faint); font-size: 12px; } .players-in-system-name { cursor: pointer; color: var(--cyan); text-decoration: none; border-bottom: 1px dashed transparent; transition: border-color 0.15s; } .players-in-system-name:hover, .players-in-system-name:focus { border-bottom-color: var(--cyan); outline: none; } /* Carte Escadrille — composition du groupe (V3.6.0) */ #squadron-card .pcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .squadron-empty { margin-top: 8px; font-size: 0.92em; line-height: 1.4; } .squadron-members { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .squadron-leader-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .squad-activity-log { margin-top: 10px; font-size: 0.85em; opacity: 0.85; line-height: 1.4; } #squad-activity-actions, #squad-launch-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* ── Hangar spatial (miroir du panneau Discord) ──────────────────────────── */ .hangar-card { grid-column: 1 / -1; } .hangar-ships-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .hangar-ship-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; } .hangar-ship-row:hover { border-color: var(--amber-dim); transform: translateY(-1px); } .hangar-ship-row.active { border-color: var(--green); background: rgba(95, 216, 143, 0.06); } .hangar-ship-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hangar-ship-name { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-display); } .hangar-ship-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .hangar-ship-badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; } .hangar-ship-badge.active { border-color: var(--green); color: var(--green); } .hangar-ship-badge.citeperdue { border-color: #d4af37; color: #d4af37; } .hangar-ship-badge.combat { border-color: var(--red-dim); color: var(--red); } .hangar-ship-badge.exploration { border-color: var(--cyan-dim); color: var(--cyan); } .hangar-empty { color: var(--text-faint); font-size: 12px; } .hangar-editor-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 4px; } .hangar-editor-sub { font-size: 11px; color: var(--text-faint); margin-bottom: 14px; } .hangar-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; } .hangar-stat-box { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .hangar-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; } .hangar-stat-value { font-size: 15px; font-weight: 700; color: var(--cyan); font-family: var(--font-display); } .hangar-stat-value .bonus { font-size: 10px; color: var(--green); font-weight: 500; margin-left: 4px; } .hangar-slots-title { font-size: 12px; font-weight: 700; color: var(--text); margin: 4px 0 10px; } .hangar-slots-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .hangar-slot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; } .hangar-slot-row.empty { color: var(--text-faint); font-style: italic; } .hangar-slot-dur { font-size: 10px; color: var(--amber); font-family: var(--font-mono); } .hangar-npc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .hangar-npc-card { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .hangar-npc-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; } .hangar-npc-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bg-panel); } .hangar-npc-info { flex: 1; min-width: 0; } .hangar-npc-name { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hangar-npc-badge { font-size: 9px; font-weight: 500; color: var(--green); border: 1px solid var(--green-dim, var(--green)); border-radius: 999px; padding: 1px 8px; } .hangar-npc-badge-off { color: var(--text-faint); border-color: var(--line); } .hangar-npc-bonus { font-size: 11px; color: var(--cyan); margin-top: 2px; } .hangar-npc-desc { font-size: 11px; color: var(--text-faint); margin-top: 3px; line-height: 1.4; } .hangar-npc-expiry { font-size: 10px; color: var(--amber); font-family: var(--font-mono); margin-top: 4px; } .hangar-select-row { display: flex; gap: 8px; margin-bottom: 12px; } .hangar-select { flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 12px; font-family: var(--font-mono); } .hangar-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .btn-hangar-danger { background: var(--bg-panel); border: 1px solid var(--red-dim); color: var(--red); padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-display); } .btn-hangar-danger:hover:not(:disabled) { border-color: var(--red); } .btn-hangar-success { background: var(--bg-panel); border: 1px solid var(--green); color: var(--green); padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-display); } .btn-hangar-success:hover:not(:disabled) { filter: brightness(1.1); } .btn-hangar-success:disabled, .btn-hangar-danger:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Marché (boutique PNJ) ─────────────────────────────────────────────── */ .shop-row-stats { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .shop-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--cyan-dim); color: var(--cyan); white-space: nowrap; } .shop-badge.owned { border-color: var(--text-faint); color: var(--text-faint); } /* V2.6.1 — Nom personnalisé de vaisseau (affiché à gauche du nom de classe) */ .ship-custom-name { color: var(--amber); font-weight: 700; margin-right: 6px; } .ship-custom-name::after { content: '·'; color: var(--text-faint); font-weight: 400; margin-left: 6px; } .hangar-rename-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--cyan-dim, #2a5f6b); border-radius: 8px; } .hangar-rename-current { font-size: 14px; font-weight: 700; color: var(--text); } /* V2.6.1 — Modale de nommage/renommage de vaisseau */ .shipname-modal-overlay { position: fixed; inset: 0; background: rgba(4, 8, 14, 0.72); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .shipname-modal { background: var(--panel-bg, #0d1620); border: 1px solid var(--cyan-dim, #2a5f6b); border-radius: 10px; padding: 20px; width: 100%; max-width: 380px; box-shadow: 0 0 30px rgba(0,0,0,0.5); } .shipname-modal-title { font-size: 14px; font-weight: 700; color: var(--cyan, #6fe3ff); margin-bottom: 14px; } .shipname-modal-label { display: block; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .shipname-modal-row { display: flex; align-items: center; gap: 8px; } .shipname-modal-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--cyan-dim, #2a5f6b); border-radius: 6px; padding: 8px 10px; color: var(--text, #e6f4f8); font-size: 13px; } .shipname-modal-input:focus { outline: none; border-color: var(--cyan, #6fe3ff); } .shipname-modal-info { cursor: help; font-size: 15px; opacity: 0.85; user-select: none; flex-shrink: 0; } .shipname-modal-info:hover { opacity: 1; } .shipname-modal-count { text-align: right; font-size: 11px; color: var(--text-faint); margin-top: 4px; } .shipname-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .npcpilot-detail-modal { max-width: 420px; } .npcpilot-detail-image { width: 100%; aspect-ratio: 3 / 4; max-height: 340px; object-fit: contain; object-position: center; background: var(--bg-panel-2); border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 12px; } .npcpilot-detail-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 10px; white-space: pre-wrap; } .npcpilot-detail-bonuses { font-size: 12px; color: var(--text); line-height: 1.7; margin-bottom: 8px; } .npcpilot-detail-price { font-size: 12.5px; color: var(--accent); font-weight: 600; } .npcpilot-card { cursor: pointer; } .npcpilot-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; object-position: center; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); } .shop-category-title { font-size: 12px; font-weight: 600; color: var(--text); margin: 14px 0 6px; } .shop-category-title:first-child { margin-top: 0; } .shop-fuel-bar-wrap { margin-bottom: 16px; } .shop-fuel-buttons { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Carte Cargo & Dépôt Prime-A ─────────────────────────────────────────── */ .cargo-card { grid-column: 1 / -1; } .cargo-section { margin-top: 12px; } .cargo-section:first-of-type { margin-top: 4px; } .cargo-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .cargo-section-title { font-size: 12px; font-weight: 700; color: var(--text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; } .cargo-bulk-btns { display: flex; gap: 8px; flex-wrap: wrap; } .btn-cargo-bulk { background: var(--bg-panel-2); border: 1px solid var(--amber-dim, var(--cyan-dim)); color: var(--amber, var(--cyan)); padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 700; font-family: var(--font-display); transition: border-color 0.15s, transform 0.15s; } .btn-cargo-bulk:hover:not(:disabled) { border-color: var(--amber, var(--cyan)); transform: translateY(-1px); } .btn-cargo-bulk:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Carte Combat ─────────────────────────────────────────────────────── */ .combat-card { grid-column: 1 / -1; } .combat-ship-row { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .combat-streak { font-size: 11px; color: var(--amber); font-weight: 500; margin-left: 8px; } .combat-stat-line { font-size: 11px; color: var(--text-dim); margin: 6px 0 10px; } .combat-repair-btn { width: auto; padding: 8px 14px; font-size: 11px; } .combat-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: 4px 0 10px; } .combat-ship-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .chip-btn { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); padding: 7px 12px; border-radius: 14px; font-size: 11px; cursor: pointer; } .chip-btn:hover:not(:disabled) { color: var(--text); border-color: var(--line-soft); } .chip-btn.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); } .chip-btn:disabled { cursor: default; } .combat-enemy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .combat-enemy-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 6px; } .combat-enemy-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; } .combat-enemy-type { font-size: 10px; color: var(--text-faint); font-weight: 400; } .combat-enemy-stats { font-size: 11px; color: var(--text-dim); } .combat-vs { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .combat-enemy-info { margin: -6px 0 10px; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: var(--radius); } .combat-enemy-info .combat-stat-line { margin: 2px 0; } .combat-vs-side { flex: 1; } .combat-vs-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; } .combat-vs-mid { font-family: var(--font-display); font-size: 12px; color: var(--text-faint); } .combat-log { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 11px; color: var(--text-dim); line-height: 1.7; max-height: 160px; overflow-y: auto; margin-bottom: 14px; } .combat-ability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .combat-ability-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .combat-ability-btn span { font-size: 10px; color: var(--text-faint); } .combat-ability-btn:disabled { opacity: 0.4; cursor: default; } .combat-outcome { text-align: center; padding: 10px 0; } .combat-outcome-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 10px; } .combat-outcome-desc { font-size: 12px; color: var(--text-dim); line-height: 1.8; margin-bottom: 16px; } .combat-outcome-warn { color: var(--red); } /* ── Industrie & Production (miroir du panneau Discord — src/industry.js) ─ */ .industry-card { grid-column: 1 / -1; } .industry-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .industry-slotbar-row { display: flex; align-items: center; } .industry-slotbar { font-family: var(--font-mono); font-size: 14px; letter-spacing: 1px; color: var(--amber); background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px; } .industry-tab { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-family: var(--font-display); font-weight: 600; transition: border-color 0.15s, color 0.15s; } .industry-tab:hover { color: var(--text); border-color: var(--cyan-dim); } .industry-tab.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); } .industry-recipes-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .industry-recipe-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .industry-recipe-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .industry-recipe-name { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-display); } .industry-recipe-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; } .industry-recipe-desc { font-size: 11px; color: var(--text-dim); } .industry-recipe-inputs { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; font-family: var(--font-mono); } .industry-recipe-input.ok { color: var(--green); } .industry-recipe-input.missing { color: var(--red); } .industry-recipe-card .btn-depot { align-self: flex-start; } /* ── Colonies & Territoire (miroir du panneau Discord — src/colonies.js) ─ */ .colony-card { grid-column: 1 / -1; } .colony-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .colony-summary-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; } .colony-summary-card:hover { border-color: var(--amber-dim); transform: translateY(-1px); } .colony-summary-card.warn { border-color: var(--red-dim, var(--red)); } .colony-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .colony-summary-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-display); } .colony-summary-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .colony-bar { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--cyan); } .colony-bar.pop { color: var(--green); } .colony-bar.storage { color: var(--amber); } .colony-bar.repair { color: var(--cyan); } .colony-stat-row { font-size: 11px; color: var(--text-dim); display: flex; gap: 14px; flex-wrap: wrap; } .colony-warn-text { font-size: 11px; color: var(--red); font-weight: 600; } .colony-ok-text { font-size: 11px; color: var(--green); } .colony-sub-tab { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-family: var(--font-display); font-weight: 600; transition: border-color 0.15s, color 0.15s; } .colony-sub-tab:hover { color: var(--text); border-color: var(--cyan-dim); } .colony-sub-tab.active { color: var(--cyan); border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 9%, transparent); } .colony-sub-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .colony-section-title { font-size: 12px; font-weight: 700; color: var(--text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .colony-bonus-list { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); } .colony-btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .colony-select { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-mono); width: 100%; } .colony-npc-alert { background: rgba(220, 38, 38, 0.1); border: 1px solid var(--red-dim, var(--red)); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 11px; color: var(--red); } /* ── Corporations (miroir du panneau Discord — src/corporations.js) ────── */ .corp-card { grid-column: 1 / -1; } .corp-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .corp-form { display: flex; flex-direction: column; gap: 8px; } .corp-label { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; } .corp-input { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); padding: 9px 10px; border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-mono); width: 100%; box-sizing: border-box; } .corp-input:focus { outline: none; border-color: var(--cyan-dim); } .corp-textarea { resize: vertical; min-height: 56px; } .corp-browse-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .corp-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .corp-browse-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-display); } .corp-browse-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .corp-browse-desc { font-size: 11px; color: var(--text-dim); } .corp-member-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; flex-wrap: wrap; } .corp-member-name { font-weight: 600; color: var(--text); } .corp-member-role { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .corp-member-role-select { background: var(--bg-panel); border: 1px solid var(--line); color: var(--text); padding: 6px 8px; border-radius: var(--radius-sm); font-size: 11px; font-family: var(--font-mono); } /* ── Factions (miroir du panneau Discord — src/factions.js) ────────────── */ .faction-card { grid-column: 1 / -1; } .faction-card .pcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .faction-intro { font-size: 11px; color: var(--text-dim); margin: -4px 0 4px; } /* Panneau radar (vue liste) */ .faction-radar-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; background: radial-gradient(circle at 50% 40%, var(--bg-panel-2) 0%, var(--bg-panel) 100%); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 10px 4px; margin-bottom: 14px; } .faction-radar-wrap { width: 100%; max-width: 260px; } .faction-radar-svg { width: 100%; height: auto; overflow: visible; } .radar-grid { fill: none; stroke: var(--line); stroke-width: 1; } .radar-axis { stroke: var(--line-soft); stroke-width: 1; } .radar-data { fill: color-mix(in srgb, var(--cyan) 18%, transparent); stroke: var(--cyan); stroke-width: 1.5; } .radar-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.02em; } .faction-gauge-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-faint); margin-bottom: 6px; } .legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .legend-dot--rep { background: var(--cyan); } .legend-dot--exp { background: var(--amber); } /* Jauges circulaires SVG (double-anneau : réputation extérieur, expansion intérieur) */ .faction-gauge-svg { display: block; } .fg-track { stroke: var(--line-soft); } .fg-fill { stroke-linecap: round; transition: stroke-dashoffset .6s ease; } .fg-fill--exp { stroke: var(--amber); } .faction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .faction-summary-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-left: 3px solid var(--faction-color, var(--line)); border-radius: var(--radius); padding: 10px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .faction-summary-card:hover { border-color: var(--faction-color, var(--cyan-dim)); transform: translateY(-1px); box-shadow: 0 4px 16px -6px var(--faction-color, transparent); } .faction-summary-gauge-wrap { position: relative; width: 84px; height: 84px; flex: none; } .faction-summary-gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; } .faction-summary-body { min-width: 0; flex: 1; } .faction-summary-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-display); } .faction-summary-tier { font-size: 11px; color: var(--text-dim); margin-top: 1px; } .faction-summary-desc { font-size: 10px; color: var(--text-faint); font-style: italic; margin-top: 3px; } .faction-summary-treasury { font-size: 10px; color: var(--text-dim); margin-top: 4px; } .faction-summary-treasury .dim { color: var(--text-faint); } .faction-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .faction-detail-gauge { position: relative; width: 132px; height: 132px; flex: none; --faction-color: var(--cyan); } .faction-detail-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .fdg-emoji { font-size: 28px; line-height: 1; } .fdg-pct { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-mono); } .faction-detail-head-text { flex: 1; min-width: 200px; } .faction-detail-name { font-size: 16px; font-weight: 700; color: var(--text); font-family: var(--font-display); } .faction-detail-desc { font-size: 12px; color: var(--text-dim); font-style: italic; margin: 4px 0 8px; } .faction-rep-tier { font-size: 13px; font-weight: 700; color: var(--text); } .faction-rep-next { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .faction-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; } .faction-info-box { background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 10px; } .faction-info-label { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; } .faction-info-value { font-size: 12px; color: var(--text); font-weight: 600; } .faction-module-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .faction-module-name { font-size: 12px; font-weight: 700; color: var(--text); } .faction-module-desc { font-size: 11px; color: var(--text-dim); } .faction-module-status { font-size: 11px; } .faction-module-status.ok { color: var(--green); } .faction-module-status.locked { color: var(--text-faint); font-style: italic; } /* ── Missions (miroir intégral du panneau Discord — src/missions.js + src/customMissions.js) ── */ .missions-card { grid-column: 1 / -1; } .mission-row { display: flex; flex-direction: column; gap: 6px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .mission-row.completed { border-color: var(--green-dim, var(--green)); } .mission-row.claimed { opacity: 0.55; } .mission-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .mission-row-title { font-size: 12px; font-weight: 700; color: var(--text); } .mission-row-diff { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; } .mission-row-status { font-size: 11px; color: var(--text-dim); } .mission-row-status.ready { color: var(--green); font-weight: 600; } .mission-row-status.done { color: var(--text-faint); } .mission-bar-track { width: 100%; height: 8px; background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; } .mission-bar-fill { height: 100%; background: var(--cyan); transition: width 0.2s; } .mission-bar-fill.ready { background: var(--green); } .mission-row-reward { font-size: 11px; color: var(--amber); font-weight: 600; } .mission-row-desc { font-size: 11px; color: var(--text-dim); } .mission-row-reset { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } /* ── Compétences (miroir intégral du panneau Discord — src/skills.js) ────── */ .skills-points-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .skills-points-chip { font-size: 12px; color: var(--text-dim); background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; } .skills-points-chip b { color: var(--cyan); } .skills-group-card { flex-direction: column; align-items: stretch; gap: 8px; } .skills-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-soft); } .skills-next-text { font-size: 11px; color: var(--text-dim); } .skills-effects-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .skills-effect-chip { font-size: 11px; color: var(--green, var(--cyan)); background: color-mix(in srgb, var(--cyan) 9%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; } /* ── Succès (miroir du panneau Discord — src/progression.js) ───────────── */ .achievement-card { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; } .achievement-card.unlocked { border-color: var(--green, var(--cyan-dim)); background: color-mix(in srgb, var(--cyan) 7%, transparent); } .achievement-card.locked { opacity: 0.6; } .achievement-icon { font-size: 20px; line-height: 1; flex-shrink: 0; } .achievement-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .achievement-name { font-size: 12px; font-weight: 700; color: var(--text); } .achievement-desc { font-size: 11px; color: var(--text-dim); } .achievement-reward { font-size: 10px; color: var(--amber); font-family: var(--font-mono); } .achievement-status { margin-left: auto; font-size: 16px; flex-shrink: 0; } /* ── Carte des Systèmes (starmap style Star Citizen) ──────────────────────── */ .starmap-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .starmap-search-input { background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); width: 200px; font-family: var(--font-mono); } .starmap-search-input:focus { outline: none; border-color: var(--cyan-dim); color: var(--cyan); } .starmap-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .starmap-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); } .starmap-legend-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .starmap-viewport { position: relative; margin-top: 12px; width: 100%; height: 560px; background: radial-gradient(ellipse at 50% 40%, #0d1a2b 0%, #060a12 55%, #030509 100%); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: grab; } .starmap-viewport.dragging { cursor: grabbing; } .starmap-viewport canvas { display: block; width: 100%; height: 100%; } .starmap-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.5px; background: transparent; pointer-events: none; } .starmap-tooltip { position: absolute; pointer-events: none; z-index: 5; transform: translate(-50%, -100%); background: rgba(10, 14, 22, 0.92); border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 11px; color: var(--cyan); white-space: nowrap; box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 28%, transparent); } .starmap-tooltip-hint { display: block; margin-top: 3px; font-size: 9px; color: var(--text-faint); letter-spacing: 0.3px; } /* ── V3.9.12 — Menu contextuel (clic droit) sur un système ────────────────── */ .starmap-context { position: absolute; z-index: 20; min-width: 232px; background: rgba(10, 14, 22, 0.97); border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); padding: 5px; overflow: hidden; } .starmap-context-title { font-size: 11px; color: var(--cyan); font-family: var(--font-mono); padding: 6px 9px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; letter-spacing: 0.4px; } .starmap-context-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; } .starmap-context-item:hover:not(:disabled) { background: rgba(79, 214, 232, 0.12); color: var(--cyan); } .starmap-context-item:disabled { opacity: 0.38; cursor: not-allowed; } /* Bandeau de retour d'action (saut, scan, actualisation) */ .starmap-flash { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 15; background: rgba(10, 14, 22, 0.94); border: 1px solid var(--line); border-left: 3px solid var(--cyan-dim); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 11.5px; font-family: var(--font-mono); color: var(--text-dim); pointer-events: none; line-height: 1.5; } .starmap-flash.ok { border-left-color: #48e682; color: #d6f5e2; } .starmap-flash.err { border-left-color: #e85c5c; color: #f6d7d7; } .starmap-infopanel { position: relative; margin-top: 12px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .starmap-info-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-faint); font-size: 14px; cursor: pointer; } .starmap-info-close:hover { color: var(--cyan); } .starmap-info-name { font-size: 16px; color: var(--cyan); font-weight: 600; margin-bottom: 2px; } .starmap-info-sec { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .starmap-info-row { font-size: 12px; color: var(--text-dim); margin-top: 4px; } .starmap-info-row b { color: var(--text-dim); } .starmap-info-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-top: 10px; font-style: italic; } .starmap-info-minerals, .starmap-info-pois { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .starmap-info-minerals span, .starmap-info-pois span { font-size: 10px; color: var(--text-dim); background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px 9px; } /* ── V2.2 — Barre d'infos sticky (Pilote / Vaisseau / Activités / Cargaison) ── Reste masquée jusqu'à ce que la carte "Cargaison" sorte du haut de la fenêtre (voir IntersectionObserver dans app.js), puis se fixe en en-tête. */ .sticky-infobar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(10, 13, 20, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease; } .sticky-infobar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .sticky-infobar-inner { max-width: 1600px; margin: 0 auto; padding: 8px 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; } .sticky-sep { width: 1px; height: 18px; background: var(--line); flex-shrink: 0; } .sticky-item { display: flex; align-items: center; gap: 8px; min-width: 0; } .sticky-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--bg-panel-2); flex-shrink: 0; } .sticky-label { opacity: 0.8; flex-shrink: 0; } .sticky-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .sticky-value { color: var(--text-dim); white-space: nowrap; } .sticky-value.amber { color: var(--amber); } @media (max-width: 900px) { .sticky-item.sticky-activity, .sticky-sep:nth-of-type(2) { display: none; } } @media (max-width: 640px) { .sticky-infobar-inner { padding: 8px 16px; gap: 10px; } .sticky-name { max-width: 90px; } } /* ── V2.2 — Info-bulles génériques sur boutons désactivés ───────────────── Un survol d'1 seconde sur n'importe quel bouton grisé (disabled) portant un attribut data-tooltip affiche une bulle expliquant pourquoi l'action n'est pas possible actuellement (voir le petit moteur JS dans app.js). */ .web-tooltip { /* V3.18.0 — l'info-bulle passait DERRIÈRE certains modules (modales, barres collantes, superpositions) qui montent jusqu'à z-index 1000 : elle est désormais posée au sommet de toutes les couches. */ position: fixed; z-index: 2147483000; max-width: 260px; background: var(--bg-panel-2); border: 1px solid var(--cyan-dim); color: var(--text); font-size: 11px; line-height: 1.5; padding: 8px 11px; border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,0.45); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; } .web-tooltip.visible { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════════════════ Effets spécifiques aux thèmes "Arcade Néon" et "Rétro-Arcade Pixel Art" Scopés via [data-theme] (posé sur par applyActiveTheme() dans app.js) pour ne jamais affecter les autres thèmes. ══════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); /* ── Menu latéral positionné à gauche comme les autres thèmes (non rétractable) ── */ /* ── Arcade Néon : scintillement du logo + halo pulsé sur le CTA ─────────── */ html[data-theme="arcade-neon"] .landing-brand, html[data-theme="arcade-neon"] .portal-nav .landing-brand { text-shadow: 0 0 6px var(--amber), 0 0 16px var(--red); animation: arcade-flicker 3.2s infinite; } @keyframes arcade-flicker { 0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; } 20%, 22%, 79% { opacity: 0.55; } } html[data-theme="arcade-neon"] .discord-login-btn, html[data-theme="arcade-neon"] .sidenav-toggle { animation: arcade-pulse 1.6s ease-in-out infinite; } @keyframes arcade-pulse { 0%, 100% { box-shadow: 0 0 6px var(--cyan-dim); } 50% { box-shadow: 0 0 22px var(--cyan), 0 0 34px var(--red); } } html[data-theme="arcade-neon"] .landing-title, html[data-theme="arcade-neon"] .portal-breadcrumb { background: linear-gradient(90deg, var(--red), var(--cyan), var(--amber)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: arcade-hue-slide 6s linear infinite; } @keyframes arcade-hue-slide { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* ── Rétro-Arcade Pixel Art : police pixel + ombres franches ─────────────── */ html[data-theme="retro-arcade-pixel"] { --font-display: 'Press Start 2P', monospace !important; --font-mono: 'VT323', monospace !important; } html[data-theme="retro-arcade-pixel"] .landing-brand, html[data-theme="retro-arcade-pixel"] .sidenav-toggle { text-shadow: 2px 2px 0 var(--red); } /* Le titre d'accueil est très grand : on limite sa taille avec cette police large et compacte pour éviter tout débordement visuel. */ html[data-theme="retro-arcade-pixel"] .landing-title { font-size: clamp(16px, 2.6vw, 26px) !important; line-height: 1.7 !important; } html[data-theme="retro-arcade-pixel"] .feature-card, html[data-theme="retro-arcade-pixel"] .pcard, html[data-theme="retro-arcade-pixel"] .discord-login-btn { border-width: 3px !important; box-shadow: 5px 5px 0 var(--line-soft) !important; transition: transform 0.1s, box-shadow 0.1s !important; } html[data-theme="retro-arcade-pixel"] .feature-card:hover, html[data-theme="retro-arcade-pixel"] .pcard:hover { transform: translate(-3px, -3px) !important; box-shadow: 8px 8px 0 var(--cyan) !important; } html[data-theme="retro-arcade-pixel"] .discord-login-btn:active { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 var(--line-soft) !important; } /* ───────────────────────────────────────────────────────────────────────────── 📡 FLUX D'ACTIVITÉ (V3.9.16) — carte « console » du tableau de bord joueur ───────────────────────────────────────────────────────────────────────── */ .activity-status { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .65; font-family: ui-monospace, Menlo, Consolas, monospace; } .activity-status.is-live { color: var(--ok, #3ddc97); opacity: .9; } .activity-status.is-down { color: var(--danger, #ff6b6b); opacity: .9; } .activity-console { margin-top: 12px; height: 320px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.28); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7; scrollbar-width: thin; } .activity-console::-webkit-scrollbar { width: 8px; } .activity-console::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .activity-empty { opacity: .45; font-style: italic; } .activity-line { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; } .activity-line .a-time { opacity: .45; flex: 0 0 auto; } .activity-line .a-icon { flex: 0 0 auto; } .activity-line .a-text { flex: 1 1 auto; word-break: break-word; } .activity-line .a-player { font-weight: 700; } .activity-line.lvl-success .a-player { color: var(--ok, #3ddc97); } .activity-line.lvl-danger .a-player { color: var(--danger, #ff6b6b); } .activity-line.lvl-warning .a-player { color: var(--warn, #ffcc66); } .activity-line.lvl-info .a-player { color: var(--accent, #59d0ff); } .activity-line.lvl-special .a-player { color: #c792ea; } .activity-line.lvl-default .a-player { opacity: .75; } .activity-line.is-new { animation: activity-flash 1.2s ease-out; } @keyframes activity-flash { from { background: rgba(89, 208, 255, 0.16); } to { background: transparent; } } /* ══════════════════════════════════════════════════════════════════════════ V3.10.0 — Signal d'état du serveur (🟢 / 🔴) à côté du logo PRIME ALPHA ══════════════════════════════════════════════════════════════════════════ */ .server-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 9px; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); vertical-align: middle; cursor: default; } .server-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #666; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } .server-status.online { border-color: rgba(51, 204, 102, 0.45); color: #6ee7a0; } .server-status.online .server-status-dot { background: #33cc66; box-shadow: 0 0 8px rgba(51, 204, 102, 0.9); animation: server-pulse 2.4s ease-in-out infinite; } .server-status.offline { border-color: rgba(255, 68, 68, 0.45); color: #ff8a8a; } .server-status.offline .server-status-dot { background: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.85); } @keyframes server-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (max-width: 640px) { .server-status .server-status-label { display: none; } .server-status { padding: 4px; } } /* ══════════════════════════════════════════════════════════════════════════ V3.10.0 — Module Support : pièces jointes, fil de discussion, actions ══════════════════════════════════════════════════════════════════════════ */ .support-attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .support-attach-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.03); font-size: 0.78rem; cursor: pointer; transition: border-color .15s, background .15s; } .support-attach-btn:hover { border-color: rgba(120, 180, 255, 0.6); background: rgba(120, 180, 255, 0.08); } .support-attach-hint { font-size: 0.68rem; opacity: 0.5; font-family: 'IBM Plex Mono', monospace; } .support-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .support-thumb { position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); } .support-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .support-thumb-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.62rem; line-height: 1; cursor: pointer; } .support-ticket-actions { display: flex; gap: 6px; flex-wrap: wrap; } .btn-mini { padding: 4px 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: inherit; font-size: 0.72rem; cursor: pointer; transition: background .15s, border-color .15s; } .btn-mini:hover { background: rgba(255, 255, 255, 0.11); } .btn-mini.danger { border-color: rgba(255, 68, 68, 0.4); color: #ff9a9a; } .btn-mini.danger:hover { background: rgba(255, 68, 68, 0.14); } .support-thread-view { margin-top: 16px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); } .support-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .support-thread-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.85; } .support-thread-messages { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px; } .support-msg { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); border-left: 3px solid rgba(120, 180, 255, 0.55); } .support-msg.staff { border-left-color: rgba(51, 204, 102, 0.75); background: rgba(51, 204, 102, 0.05); } .support-msg-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.7rem; opacity: 0.72; margin-bottom: 5px; font-family: 'IBM Plex Mono', monospace; } .support-msg-text { font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .support-msg-edited { opacity: 0.6; font-style: italic; } .support-msg-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .support-msg-img { max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); display: block; } .support-msg-actions { margin-top: 8px; display: flex; gap: 6px; } .support-thread-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .cargo-section-sub { font-size: 0.68rem; opacity: 0.55; font-family: 'IBM Plex Mono', monospace; } /* V3.21.0 — 🏛️ Cité Perdue : site connu mais sans vaisseau en orbite */ .poi-empty { grid-column: 1 / -1; padding: 10px 12px; margin-bottom: 8px; border: 1px dashed var(--border, #33406b); border-radius: 8px; font-size: 12px; color: var(--text-dim, #98a2c8); font-family: var(--font-mono); } /* V3.22.0 — cooldown par session de minage */ .mine-cooldown { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border, #33406b); border-radius: 8px; font-size: 12px; font-family: var(--font-mono); color: var(--text-dim, #98a2c8); } /* ── 🧭 Campagne de mission (V3.25.0) — NPC missionnaires ────────────────── */ .mnpc-card { cursor: pointer; display: flex; gap: 12px; align-items: center; } .mnpc-card img { width: 78px; height: 78px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-panel-2); flex-shrink: 0; } .mnpc-card-placeholder { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-panel-2); flex-shrink: 0; } .mnpc-card-name { font-size: 13.5px; font-weight: 700; color: var(--text); } .mnpc-card-line { font-size: 12px; color: var(--text-dim); margin-top: 3px; } .mnpc-modal-image { width: 100%; max-height: 300px; object-fit: contain; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; } .mnpc-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 10px; } .mnpc-mission-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel-2); padding: 12px; margin-top: 10px; } .mnpc-mission-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; } .mnpc-mission-row { font-size: 12.5px; color: var(--text); margin-top: 4px; } /* Modale générique du portail joueur (réutilisée par la campagne de mission) */ .modal-overlay { position: fixed; inset: 0; background: rgba(4, 8, 14, 0.72); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .modal-overlay .modal { background: var(--bg-panel, #0d1620); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 460px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0,0,0,0.55); } .modal-overlay .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .modal-overlay .modal-head h3 { margin: 0; font-size: 14px; color: var(--accent); } .modal-overlay .modal-close { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; } .modal-overlay .modal-body { padding: 16px; overflow-y: auto; } .modal-overlay .modal-foot { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); } .modal-overlay .modal-foot-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .modal-overlay .modal-status { font-size: 12px; color: var(--text-dim); } /* ══════════════════════════════════════════════════════════════════════════ 🏁 Interface de course « So Fast » (V3.29.0) Overlay plein écran : canvas 3D, HUD de vol et panneau de résultat. ══════════════════════════════════════════════════════════════════════════ */ .race-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: #03060f; } .race-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Flash rouge au moment d'un impact (anneau ou astéroïde) */ .race-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 60, 60, 0) 35%, rgba(255, 40, 40, 0.55) 100%); opacity: 0; transition: opacity 90ms linear; } .race-panel { position: absolute; top: 16px; left: 16px; min-width: 250px; padding: 12px 14px; background: rgba(6, 10, 20, 0.82); border: 1px solid var(--cyan-dim); border-radius: var(--radius); color: var(--text); font-size: 13px; } .race-title { color: var(--cyan); font-weight: 700; margin-bottom: 8px; letter-spacing: .5px; } .race-hud-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; } .race-hud-row span { color: var(--text-dim); } .race-hud-row em { color: var(--text-faint); font-style: normal; font-size: 11px; } .race-hud-hit { margin-top: 6px; color: #ff6a6a; font-weight: 700; } .race-keys { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 11px; line-height: 1.5; } .race-result { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 320px; max-width: 480px; padding: 20px 22px; text-align: center; background: rgba(6, 10, 20, 0.94); border: 1px solid var(--cyan-dim); border-radius: var(--radius); color: var(--text); font-size: 14px; line-height: 1.6; } .race-result p { margin: 0 0 10px; } .race-result button { margin-top: 6px; } @media (max-width: 640px) { .race-panel { top: 8px; left: 8px; right: 8px; min-width: 0; font-size: 12px; } .race-result { min-width: 0; width: calc(100% - 32px); } } /* ⚙️ Fenêtre d'options de commandes « So Fast » (V3.31.0) */ .race-options-modal { max-width: 620px; width: min(620px, 94vw); } .race-options-hint { margin: 4px 0 10px; padding: 8px 10px; font-size: 11px; line-height: 1.5; color: var(--text-dim); background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .race-options-list { max-height: 46vh; overflow-y: auto; padding-right: 4px; } .race-options-group { margin: 10px 0 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); border-bottom: 1px solid var(--line); padding-bottom: 3px; } .race-options-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .race-options-label { flex: 1; font-size: 12px; color: var(--text); } .race-key-btn, .race-axis-btn, .race-invert-btn, .race-clear-btn { background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 11px; cursor: pointer; font-family: var(--font-mono); } .race-key-btn { min-width: 74px; text-align: center; } .race-axis-btn { min-width: 168px; text-align: center; color: var(--text-dim); } .race-key-btn:hover, .race-axis-btn:hover, .race-invert-btn:hover, .race-clear-btn:hover { border-color: var(--cyan); color: var(--cyan); } .race-key-btn.capturing, .race-axis-btn.capturing { border-color: var(--amber); color: var(--amber); animation: race-capture-pulse 1s ease-in-out infinite; } @keyframes race-capture-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } } @media (max-width: 640px) { .race-options-row { flex-wrap: wrap; } .race-axis-btn { min-width: 0; flex: 1; } } /* 🎯 Réticule de pilotage souris (V3.32.0) */ .race-reticle { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; z-index: 6; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent); } .race-reticle::before, .race-reticle::after { content: ''; position: absolute; background: var(--cyan); } .race-reticle::before { left: 50%; top: -7px; width: 1px; height: 6px; } .race-reticle::after { left: 50%; bottom: -7px; width: 1px; height: 6px; } /* Boutons d'intensité des effets visuels (V3.33.0) */ .race-fx-btn { background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 11px; cursor: pointer; font-family: var(--font-mono); } .race-fx-btn:hover { border-color: var(--cyan); color: var(--cyan); } .race-fx-btn.capturing { border-color: var(--cyan); color: var(--cyan); animation: none; } /* 🔫 Barre de capacités en course (V3.34.0) */ .race-ability-bar { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; pointer-events: none; } .race-ab { min-width: 54px; padding: 6px 8px; text-align: center; background: rgba(6, 10, 20, 0.82); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); } .race-ab-key { display: block; font-size: 10px; color: var(--text-faint); } .race-ab-emoji { display: block; font-size: 17px; line-height: 1.3; } .race-ab-sub { display: block; font-size: 10px; color: var(--text-dim); } .race-ab.ready { border-color: var(--cyan-dim); } .race-ab.ready .race-ab-sub { color: var(--cyan); } .race-ab.active { border-color: var(--cyan); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 40%, transparent); } .race-ab.active .race-ab-sub { color: var(--cyan); } .race-ab.cooling { opacity: .55; } .race-ab.cooling .race-ab-sub { color: var(--amber); } .race-ab.locked { opacity: .35; } .race-ability-msg { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none; padding: 5px 12px; font-size: 12px; color: var(--cyan); background: rgba(6, 10, 20, 0.86); border: 1px solid var(--cyan-dim); border-radius: var(--radius-sm); } /* ══════════════════════════════════════════════════════════════════════════ 🖥️ HUD du pilote (V3.36.0) ══════════════════════════════════════════════════════════════════════════ */ /* PV et blindage — haut à gauche */ .race-vitals { position: absolute; top: 16px; left: 16px; z-index: 6; pointer-events: none; min-width: 230px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; background: rgba(6, 10, 20, 0.78); border: 1px solid var(--cyan-dim); border-radius: var(--radius); } .rv-name { color: var(--cyan); font-weight: 700; margin-bottom: 6px; letter-spacing: .5px; } .rv-row { display: flex; align-items: center; gap: 7px; margin-top: 4px; } .rv-lbl { width: 26px; color: var(--text-dim); } .rv-bar { flex: 1; height: 7px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; } .rv-bar i { display: block; height: 100%; transition: width .18s linear; } .rv-val { min-width: 74px; text-align: right; color: var(--text); } .rv-noarmor { color: var(--text-faint); } /* Indicateur de vitesse en parenthèse — 30° à gauche du centre */ .race-speed { position: absolute; z-index: 6; pointer-events: none; overflow: visible; } /* Navigation : checkpoint, distance, assiette, écart */ .race-nav { position: absolute; top: 16px; right: 16px; z-index: 6; pointer-events: none; text-align: right; font-family: var(--font-mono); padding: 10px 12px; background: rgba(6, 10, 20, 0.78); border: 1px solid var(--cyan-dim); border-radius: var(--radius); } .rn-cp { font-size: 21px; color: var(--cyan); font-weight: 700; line-height: 1.1; } .rn-dist { font-size: 13px; color: var(--text); } .rn-att { font-size: 11px; color: var(--text-dim); margin-top: 3px; } .rn-best { font-size: 11px; color: var(--text-faint); margin-top: 3px; } .rn-delta { font-size: 15px; font-weight: 700; margin-top: 3px; } .rn-delta.ahead { color: #3ddc84; } .rn-delta.behind { color: #ff5c5c; } /* Cible : losange sur l'anneau visible, flèche en bordure sinon */ .race-target { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 6; pointer-events: none; border: 2px solid var(--amber); transform: rotate(45deg); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 45%, transparent); } .race-arrow { position: absolute; z-index: 6; pointer-events: none; color: var(--amber); font-size: 26px; line-height: 1; text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent); } /* 🔺 Encadrés triangulaires des capacités — bas à droite, alternés */ .race-ability-bar { position: absolute; bottom: 24px; right: 24px; left: auto; transform: none; display: flex; align-items: flex-end; gap: 0; z-index: 6; pointer-events: none; } .race-tri { position: relative; width: 74px; height: 64px; margin-left: -12px; } .race-tri-shape, .race-tri-veil { position: absolute; inset: 0; } .race-tri.up .race-tri-shape, .race-tri.up .race-tri-veil { clip-path: polygon(50% 4%, 96% 94%, 4% 94%); } .race-tri.down .race-tri-shape, .race-tri.down .race-tri-veil { clip-path: polygon(4% 6%, 96% 6%, 50% 96%); } .race-tri-shape { background: rgba(6, 10, 20, 0.86); border: 0; } .race-tri.ready .race-tri-shape { background: rgba(10, 26, 34, 0.9); } .race-tri.active .race-tri-shape { background: rgba(16, 56, 62, 0.95); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 55%, transparent)); } .race-tri.locked { opacity: .34; } .race-tri-emoji { position: absolute; left: 0; right: 0; text-align: center; font-size: 20px; } .race-tri.up .race-tri-emoji { top: 46%; } .race-tri.down .race-tri-emoji { top: 20%; } .race-tri-key { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } .race-tri.up .race-tri-key { bottom: 6%; } .race-tri.down .race-tri-key { top: 7%; } .race-tri-cd { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--amber); } .race-tri.up .race-tri-cd { top: 44%; } .race-tri.down .race-tri-cd { top: 18%; } @media (max-width: 640px) { .race-vitals { min-width: 0; left: 8px; top: 8px; font-size: 10px; } .race-nav { right: 8px; top: 8px; padding: 7px 9px; } .race-tri { width: 56px; height: 50px; } } /* ══ Disposition « Cockpit » (module Dispositions, admin > Thèmes) ═══════════ Principe : le portail devient une APPLICATION PLEIN ÉCRAN, pas une page qui défile. La fenêtre entière est découpée une fois pour toutes et chaque zone défile DANS SON PROPRE CADRE. Conséquence directe : le panneau de jeu est toujours en haut de l'écran, immédiatement visible à l'ouverture, et le joueur n'a jamais à faire défiler la page pour le retrouver. ┌──────────────────────────────────────────────────────────┐ │ barre d'état (solde, niveau, vaisseau, cargaison…) │ ├────────┬────────────────────────────────────┬────────────┤ │ │ │ Activités │ │ menu │ PANNEAU DE JEU (défile) │ Vaisseau │ │ │ │ Cargaison │ │ ├────────────────────────────────────┤ Escadrille │ │ │ flux d'activité (défile) │ Pilote │ └────────┴────────────────────────────────────┴────────────┘ Le panneau de jeu prend toute la hauteur restante : c'est la zone la plus grande de l'écran, ce qui équilibre la page quel que soit le module ouvert. Aucun vide ne peut réapparaître, puisque les hauteurs ne dépendent plus du contenu mais de la fenêtre. */ [data-layout="cockpit"] .sticky-infobar { position: fixed; top: 0; left: 0; right: 0; transform: none; opacity: 1; pointer-events: auto; } [data-layout="cockpit"] .sticky-infobar-inner { max-width: none; padding: 7px 16px; gap: 14px; row-gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } [data-layout="cockpit"] .sticky-infobar-inner::-webkit-scrollbar { display: none; } [data-layout="cockpit"] .sticky-level { color: var(--cyan); } [data-layout="cockpit"] .sticky-title { color: var(--amber); } /* Chaque valeur de la barre est légendée (Solde, Carburant, Cargaison…) : la barre dispose de toute la largeur de la fenêtre, autant nommer les informations plutôt que de laisser des nombres nus. */ .sticky-field { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; } .sticky-key { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); flex-shrink: 0; white-space: nowrap; } .sticky-value.cyan { color: var(--cyan); } /* Légendes, patrimoine, niveau, titre et total miné n'existent que dans cette disposition : ailleurs la barre reste le condensé historique. */ :root:not([data-layout="cockpit"]) .sticky-key, :root:not([data-layout="cockpit"]) .sticky-level, :root:not([data-layout="cockpit"]) .sticky-title, :root:not([data-layout="cockpit"]) .sticky-item.sticky-mined, :root:not([data-layout="cockpit"]) #sticky-networth { display: none; } @media (min-width: 981px) { /* La page défile normalement : c'est le contenu qui commande la hauteur. */ [data-layout="cockpit"] body { overflow-x: hidden; } /* En-tête compacté et fixé : il conserve l'accès admin et la déconnexion tout en ne consommant qu'une trentaine de pixels, au profit du jeu. */ [data-layout="cockpit"] #portal-screen > .portal-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 61; padding: 5px 16px; background: var(--bg-1); } [data-layout="cockpit"] .sticky-infobar { top: 32px; } /* Le cadre ne fige plus la hauteur : chaque page du panneau de jeu s'affiche INTÉGRALEMENT (plus d'ascenseur interne, plus de carte coupée en deux) et c'est la page entière qui défile. Les rangées sont en `auto` : elles prennent la hauteur réelle de leur contenu. L'en-tête et la barre d'infos restent en position: fixed, d'où la marge haute de 66px qui les dégage. */ [data-layout="cockpit"] .portal-content { margin: 66px 0 0; max-width: none; padding: 12px; min-height: calc(100vh - 78px); display: grid; gap: 12px; grid-template-columns: 208px minmax(0, 1fr) 330px; grid-template-rows: auto auto; align-items: start; grid-template-areas: "nav main rail" "nav feed rail"; } [data-layout="cockpit"] .portal-overview, [data-layout="cockpit"] .portal-layout { display: contents; } /* Menu et rail restent visibles pendant le défilement de la page : ils collent sous l'en-tête plutôt que de défiler avec le contenu. */ [data-layout="cockpit"] .portal-sidenav { grid-area: nav; position: sticky; top: 78px; width: auto; min-height: 0; max-height: calc(100vh - 90px); overflow-y: auto; } /* Aucune contrainte de hauteur ni d'ascenseur : le panneau de jeu se déploie sur toute la hauteur nécessaire, quelle que soit la page. */ [data-layout="cockpit"] .portal-main { grid-area: main; width: auto; min-height: 0; max-height: none; overflow: visible; } [data-layout="cockpit"] #activity-card { grid-area: feed; min-height: 0; display: flex; flex-direction: column; } [data-layout="cockpit"] #activity-card .activity-console { min-height: 150px; max-height: 26vh; } [data-layout="cockpit"] .portal-rail { grid-area: rail; position: sticky; top: 78px; max-height: calc(100vh - 90px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; } [data-layout="cockpit"] .portal-rail > .pcard { flex-shrink: 0; } /* Les modales sont en position: fixed : on les sort de la grille pour qu'elles n'occupent aucune cellule quand elles sont ouvertes. */ [data-layout="cockpit"] .portal-overview > .shipname-modal-overlay { grid-area: main; } /* Le rail fait 330px : le bandeau d'annonce (260px, normalement accolé à droite du contenu pilote) passe EN DESSOUS pour ne pas déborder. */ [data-layout="cockpit"] .pilot-card-body { flex-direction: column; } [data-layout="cockpit"] .announcement-banner { width: 100%; } [data-layout="cockpit"] .pilot-stats { flex-direction: column; gap: 8px; } [data-layout="cockpit"] .activities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Conteneur transparent par défaut : hors disposition Cockpit, ses cartes redeviennent des éléments directs de .portal-grid. Les propriétés order ci-dessous fixent l'ordre d'affichage (Pilote, Vaisseau, Escadrille, Activités, Flux, Cargaison), indépendamment du regroupement dans le HTML. La grille étant sur 2 colonnes, « Activités » occupe la colonne de gauche et le « Flux d'activité » celle de droite (V3.41.1). Le flux est un enfant direct de .portal-overview (et non du rail) : c'est ce qui lui permet de prendre la zone « feed » de la grille Cockpit. */ .portal-rail { display: contents; } :root:not([data-layout="cockpit"]) .portal-rail > .pilot-card { order: 1; } :root:not([data-layout="cockpit"]) .portal-rail > .ship-card { order: 2; } :root:not([data-layout="cockpit"]) .portal-rail > #squadron-card { order: 3; } :root:not([data-layout="cockpit"]) .portal-rail > .activities-card { order: 4; } :root:not([data-layout="cockpit"]) .portal-overview > #activity-card { order: 5; } :root:not([data-layout="cockpit"]) .portal-rail > .inventory-card { order: 6; } /* Écrans étroits : retour à un défilement de page classique, tout s'empile. */ @media (max-width: 980px) { [data-layout="cockpit"] .portal-content { padding-left: 16px; padding-right: 16px; } } /* ══════════════════════════════════════════════════════════════════════════ 🎨 THÈMES & EFFETS (V3.43.0) — boutique de cosmétiques du portail joueur ══════════════════════════════════════════════════════════════════════════ */ .cosmetics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .cosmetic-card { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .cosmetic-card.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan-dim) inset; } .cosmetic-card.is-locked { opacity: .82; } .cosmetic-swatches { display: flex; gap: 4px; } .cosmetic-swatches span { flex: 1; height: 22px; border-radius: 4px; border: 1px solid var(--line-soft); } .cosmetic-name { font-weight: 600; color: var(--text); } .cosmetic-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; } .cosmetic-tag { font-size: 11px; letter-spacing: .04em; } .cosmetic-tag.owned { color: var(--green); } .cosmetic-tag.price { color: var(--amber); } .cosmetic-tag.locked { color: var(--text-faint); } .cosmetic-reqs { display: flex; flex-direction: column; gap: 3px; } .cosmetic-req { font-size: 11px; color: var(--text-faint); } .cosmetic-req.met { color: var(--text-dim); } .cosmetic-actions { margin-top: auto; } .cosmetic-actions button { width: 100%; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-panel); color: var(--text); cursor: pointer; font-size: 12px; } .cosmetic-actions button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); } .cosmetic-actions button:disabled { opacity: .5; cursor: default; } /* ══════════════════════════════════════════════════════════════════════════ 💬 CHAT EN DIRECT (V3.44.0) — Territoire & social ═════════════════════════════════════════════════════════════════════════ */ .chat-card { position: relative; } .chat-log { margin-top: 12px; height: 420px; max-height: 55vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel-2); display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; } .chat-msg { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--radius-sm); border-left: 2px solid transparent; } .chat-msg:hover { background: rgba(255, 255, 255, 0.02); } .chat-msg.chat-msg-own { border-left-color: var(--accent, var(--cyan)); } .chat-msg.chat-msg-staff { border-left-color: var(--amber); } .chat-msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; } .chat-author { font-family: var(--font-mono); font-weight: 600; color: var(--cyan); cursor: pointer; } .chat-msg-staff .chat-author { color: var(--amber); } .chat-author:hover { text-decoration: underline; } .chat-staff-tag { font-size: 9px; padding: 1px 5px; border: 1px solid var(--amber-dim); border-radius: 999px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.08em; } .chat-time { color: var(--text-faint); font-size: 10px; font-family: var(--font-mono); } .chat-msg-actions { margin-left: auto; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; } .chat-msg:hover .chat-msg-actions, .chat-msg-actions:focus-within { opacity: 1; } .chat-act { background: none; border: none; color: var(--text-faint); font-size: 11px; cursor: pointer; padding: 0 2px; } .chat-act:hover { color: var(--red); } .chat-body { font-size: 13px; line-height: 1.5; color: var(--text); word-break: break-word; } .chat-body mark { background: var(--amber-dim); color: var(--text); padding: 0 3px; border-radius: 2px; } .chat-body code { font-family: var(--font-mono); font-size: 12px; background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 2px; color: var(--cyan); } .chat-body a { color: var(--cyan); } .chat-msg-blocked { opacity: .55; } .chat-blocked-note { font-size: 12px; font-style: italic; color: var(--text-faint); cursor: pointer; } .chat-blocked-note:hover { color: var(--text-dim); } .chat-day-sep { text-align: center; font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase; margin: 6px 0 2px; } /* ── Zone de saisie ─────────────────────────────────────────────────────── */ .chat-composer { margin-top: 12px; } .chat-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .chat-fmt-btn { min-width: 30px; height: 26px; padding: 0 7px; font-size: 12px; background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-mono); } .chat-fmt-btn:hover { color: var(--text); border-color: var(--cyan-dim); } .chat-fmt-mark { background: var(--amber-dim); padding: 0 3px; } .chat-toolbar-spacer { flex: 1; } .chat-blocked-btn { min-width: auto; } .chat-blocked-btn.is-active { color: var(--amber); border-color: var(--amber-dim); } .chat-input { resize: vertical; min-height: 52px; } .chat-composer-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .chat-hint { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); } .chat-count { font-size: 10px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); } .chat-count.is-near { color: var(--amber); } .chat-muted-banner { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--red-dim); border-radius: var(--radius-sm); color: var(--red); font-size: 12px; } /* ── Pilotes bloqués ────────────────────────────────────────────────────── */ .chat-blocked-panel { margin-top: 18px; } .chat-blocked-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .chat-blocked-row button { margin-left: auto; } /* ── Signalement ────────────────────────────────────────────────────────── */ .chat-report-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 16px; } .chat-report-box { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .chat-report-close { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; margin-left: auto; } .chat-report-quote { margin: 10px 0 14px; padding: 8px 10px; border-left: 2px solid var(--red-dim); background: var(--bg-panel-2); font-size: 12px; color: var(--text-dim); } .chat-report-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .chat-report-alsoblock { background: transparent; border: 1px solid var(--red-dim); color: var(--red); } .chat-report-hint { margin-top: 10px; font-size: 11px; color: var(--text-faint); line-height: 1.5; } @media (max-width: 640px) { .chat-log { height: 340px; } .chat-hint { display: none; } }