/* ============================================================================= OdraPong — Design System « Neon Arena » ----------------------------------------------------------------------------- Théming par jeux de variables sémantiques sur . - theme-neon : sombre, sport-tech (défaut, actuel) - theme-bento : (à venir) clair/coloré — il suffira d'ajouter un bloc `body.theme-bento{ ...mêmes variables, autres valeurs... }` + un toggle. Les composants ne référencent QUE des var(--token) → un seul endroit à changer. ============================================================================= */ :root{ --radius:14px; --radius-lg:20px; --radius-sm:11px; --pill:999px; --maxw:1080px; --font-head:"Sora",system-ui,Segoe UI,Roboto,sans-serif; --font-body:"Inter",system-ui,Segoe UI,Roboto,Arial,sans-serif; --font-num:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; } /* ---- THEME : NEON ARENA (défaut) ---- */ html.theme-neon{ --bg:#080b14; --bg-grad1:rgba(34,211,238,.10); --bg-grad2:rgba(139,123,255,.10); --surface:#111726; --surface-2:#0f1422; --surface-3:#0d111d; --border:#1e2940; --border-2:#27344f; --text:#e8eef7; --muted:#8b97ab; --dim:#5e6a82; --accent:#22d3ee; --accent-2:#a3e635; --accent-3:#8b7bff; --on-accent:#04111a; --positive:#34e2a0; --negative:#fb7185; --warn:#fbbf24; --chrome:rgba(8,11,20,.72); --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark; } /* ---- THEME : BENTO POP (clair, vibrant, arrondi) ---- */ html.theme-bento{ --radius:18px; --radius-lg:22px; --radius-sm:13px; --font-head:"Plus Jakarta Sans",system-ui,sans-serif; --font-body:"Plus Jakarta Sans",system-ui,sans-serif; --bg:#eef1f8; --bg-grad1:rgba(99,102,241,.12); --bg-grad2:rgba(244,63,94,.10); --surface:#ffffff; --surface-2:#f5f7fc; --surface-3:#eef1f8; --border:#e6e9f3; --border-2:#d7dbe9; --text:#171a2b; --muted:#5b6178; --dim:#9aa0bb; --accent:#6366f1; --accent-2:#10b981; --accent-3:#a855f7; --on-accent:#ffffff; --positive:#10b981; --negative:#f43f5e; --warn:#f59e0b; --chrome:rgba(238,241,248,.82); --shadow:0 12px 30px rgba(23,26,43,.10); color-scheme:light; } /* =============================== BASE ====================================== */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-body); line-height:1.5; color:var(--text); background: radial-gradient(1100px 540px at 78% -8%, var(--bg-grad1), transparent 60%), radial-gradient(900px 520px at 8% 8%, var(--bg-grad2), transparent 55%), var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--font-head);margin:0;letter-spacing:-.02em;line-height:1.15} .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .muted{color:var(--muted)} .dim{color:var(--dim)} .subdued{color:var(--muted);font-size:12px} /* Pts licence en discret à côté des Pts Act (mode "points actualisés", même couleur partout) */ .pts-licence{color:var(--muted);font-weight:600;font-size:.82em} .up{color:var(--positive)} .down{color:var(--negative)} /* ============================== TOPBAR ==================================== */ .topbar{ position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px; padding:13px 22px;background:var(--chrome);backdrop-filter:blur(14px); border-bottom:1px solid var(--border); } .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:800;font-size:18px;color:#fff} .brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--on-accent);font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-3))} .topnav{display:flex;gap:4px;margin-left:6px} .topnav a{padding:9px 14px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;transition:.12s} .topnav a:hover{color:var(--text);background:var(--surface)} .topnav a.on{color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2))} .topbar-sp{flex:1} .topbar-cta{padding:9px 15px;border-radius:var(--pill);font-weight:700;font-size:13px;color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent-2))} .topbar-pill{padding:8px 13px;border:1px solid var(--border-2);border-radius:var(--pill);color:var(--muted);font-size:13px;font-weight:600} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);cursor:pointer;font-size:16px;line-height:1;transition:background .12s ease,border-color .12s ease} .theme-toggle:hover{background:var(--surface);border-color:var(--accent)} /* ===================== CONTENU + CONTENEUR ================================ */ .wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 56px} .wrap.wide{max-width:1600px} /* pages a grand tableau (equipe, stats...) */ h1.page-title{font-size:28px;font-weight:800;margin:0 0 6px} .page-sub{color:var(--muted);font-size:14px;margin-bottom:22px} /* ============================== CARTES =================================== */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px} .card + .card{margin-top:16px} .card-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em; margin:0 0 14px;display:flex;align-items:center;gap:8px} .card-title .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} /* ============================ STAT TILES ================================= */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .tile{border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;background:var(--surface-2);position:relative;overflow:hidden} .tile .k{color:var(--dim);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .tile .v{font-family:var(--font-num);font-weight:800;font-size:30px;margin-top:6px;line-height:1} .tile .d{font-size:12px;font-weight:700;margin-top:6px} .tile.glow{background:linear-gradient(160deg,rgba(34,211,238,.10),var(--surface-2));border-color:#1d4456} .tile.glow .v{color:var(--accent)} /* ============================= BADGES/PILLS ============================== */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--pill);font-size:12px;font-weight:700; border:1px solid var(--border-2);background:var(--surface-2);color:var(--accent)} .badge.win{color:var(--positive);border-color:#1f5a45;background:rgba(52,226,160,.08)} .badge.loss{color:var(--negative);border-color:#5a2733;background:rgba(251,113,133,.08)} .badge.warn{color:var(--warn);border-color:#5a4a1d;background:rgba(251,191,36,.08)} /* ============================== BOUTONS ================================= */ .btn{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent); border:0;padding:10px 16px;border-radius:11px;font-weight:700;font-size:14px;cursor:pointer;transition:.12s} .btn:hover{filter:brightness(1.08)} .btn-ghost{background:transparent;border:1px solid var(--border-2);color:var(--muted)} .btn-ghost:hover{color:var(--text);background:var(--surface);filter:none} /* =============================== TABLES ================================= */ .table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden} .table th,.table td{padding:11px 13px;border-bottom:1px solid var(--border);text-align:left} .table thead th{background:var(--surface-3);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .table tbody tr:hover{background:var(--surface-2)} .list{list-style:none;padding:0;margin:0} .list li{padding:8px 0;border-bottom:1px solid var(--border)} /* ===================== TUILES ÉQUIPES (accueil) ========================= */ .teams .tiles{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .tile-team{display:block;padding:16px 18px;border-radius:var(--radius);font-weight:700;color:#fff; border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .12s} .tile-team:hover{transform:translateY(-3px)} .bg-blue-600{background:linear-gradient(135deg,#2563eb,#1e3a8a)} .bg-sky-500{background:linear-gradient(135deg,#0ea5e9,#0369a1)} .bg-green-600{background:linear-gradient(135deg,#16a34a,#14532d)} .bg-green-400{background:linear-gradient(135deg,#22c55e,#15803d)} .bg-violet-400{background:linear-gradient(135deg,#a78bfa,#6d28d9)} .text-white{color:#fff}.text-black{color:#04111a} /* ============================= DROPZONE ================================= */ .dropzone{position:relative;border:2px dashed var(--border-2);border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted);background:var(--surface-2)} .dropzone.over{background:var(--surface)} .dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:13px;color:var(--accent-2);border:1px solid var(--border)} /* ============================ FLASH MSG ================================= */ .flashwrap{margin-bottom:12px} .flash{padding:11px 14px;border-radius:11px;background:var(--surface);border:1px solid var(--border)} .flash.success{background:rgba(52,226,160,.08);border-color:#1f5a45;color:var(--positive)} .flash.error{background:rgba(251,113,133,.08);border-color:#5a2733;color:var(--negative)} /* ====================== BARRE D'ONGLETS MOBILE ========================== */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:50;display:none; grid-template-columns:repeat(6,1fr);gap:2px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:var(--chrome);backdrop-filter:blur(16px);border-top:1px solid var(--border); } .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--dim);font-size:10px;font-weight:600} .tabbar a .i{font-size:18px;line-height:1} .tabbar a.on{color:var(--accent)} /* ============================= RESPONSIVE =============================== */ @media (max-width:820px){ .topnav,.topbar-pill{display:none} .tabbar{display:grid} body{padding-bottom:78px} .wrap{padding:18px 14px 40px} h1.page-title{font-size:23px} } /* ============================================================================ THEME BENTO — overrides des couleurs codees en dur (concues pour le sombre). Centralise ici : aucune page (player/team/...) n'a besoin d'etre modifiee. ============================================================================ */ /* Textes blancs -> encre foncee en clair */ html.theme-bento .brand, html.theme-bento .ph-name strong, html.theme-bento .ptile-name, html.theme-bento .home-team-num, html.theme-bento .pt-name, html.theme-bento .team-bar strong, html.theme-bento .sheet-matches-table .side-win strong, html.theme-bento .ptile-letter-double{color:var(--text)} /* Pills division : fond clair + encre foncee */ html.theme-bento .division-n{background:#e0e7ff;color:#3730a3} html.theme-bento .division-p{background:#e0f2fe;color:#075985} html.theme-bento .division-r{background:#d1fae5;color:#065f46} html.theme-bento .division-d{background:#f3e8ff;color:#6b21a8} /* Frise presence : cases pleines et vibrantes (facon Bento) */ html.theme-bento .pcell-played{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;border-color:transparent} html.theme-bento .pcell-rf{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border-color:transparent;box-shadow:none} html.theme-bento .pcell-dp{background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff;border-color:transparent;box-shadow:none} html.theme-bento .pcell-absent{background:var(--surface-3);color:var(--dim)} html.theme-bento .pleg-played{background:#10b981} html.theme-bento .pleg-rf{background:#f59e0b} html.theme-bento .pleg-dp{background:#0ea5e9} html.theme-bento .ech-conf{border-color:#a7f3d0;background:rgba(16,185,129,.08)} html.theme-bento .player-header::before{background:radial-gradient(circle,rgba(99,102,241,.14),transparent 65%)} /* Sections accueil : bordures claires */ html.theme-bento .home-section-nat{border-color:#c7d2fe} html.theme-bento .home-section-reg{border-color:#a7f3d0} html.theme-bento .home-section-dep{border-color:#e9d5ff} /* Touche "bento" : ombres douces sur les cartes */ html.theme-bento .card, html.theme-bento .kpi-card, html.theme-bento .panel, html.theme-bento .ptile, html.theme-bento .player-tile, html.theme-bento .home-card, html.theme-bento .player-header, html.theme-bento .echelon-card, html.theme-bento .presence, html.theme-bento .prog-card, html.theme-bento .filters, html.theme-bento .cols-panel, html.theme-bento .matches-details, html.theme-bento .encounter-block{box-shadow:0 10px 26px rgba(23,26,43,.07)}