/* ============================================================ THEME PRÉSENCES - "Le Combat Continue" 2 variantes : Bleu marine PSG (sombre) | Clair lumineux Bascule via attribut data-theme sur - data-theme="psg" -> Bleu marine PSG (par défaut) - data-theme="light" -> Clair lumineux ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600;700&display=swap'); /* ============================================================ VARIANTE 1 — BLEU MARINE PSG (par défaut) ============================================================ */ :root, [data-theme="psg"]{ --accent:#c8102e; --accent-2:#9b0c23; --accent-3:#ee1c25; --bg:#0a1628; --surface:#0f1f3a; --surface-2:#142948; --border:#1e3658; --border-strong:#2a4670; --text:#ffffff; --text-2:#c5d3e8; --muted:#7e94b4; --danger:#ef4444; --success:#22c55e; --gold:#d4af37; --shadow:0 6px 18px rgba(0,0,0,.5); --header-h:64px; --font-display:'Bebas Neue','Oswald','Inter',sans-serif; } /* ============================================================ VARIANTE 2 — CLAIR LUMINEUX ============================================================ */ [data-theme="light"]{ --accent:#c8102e; --accent-2:#9b0c23; --accent-3:#ee1c25; --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f5; --border:#d8dde5; --border-strong:#c0c8d2; --text:#1a2540; --text-2:#3a4458; --muted:#5a6678; --danger:#dc2626; --success:#16a34a; --gold:#b8860b; --shadow:0 2px 8px rgba(15,23,42,.06); --header-h:64px; } /* Override du dark legacy de l'app pour qu'il ressemble au PSG */ [data-theme="dark"]{ --accent:#c8102e; --accent-2:#9b0c23; --bg:#0a1628; --surface:#0f1f3a; --surface-2:#142948; --border:#1e3658; --text:#fff; --muted:#7e94b4; --shadow:0 6px 18px rgba(0,0,0,.5); } html,body{ background:var(--bg); color:var(--text); } /* ============================================================ ÉCRAN DE CONNEXION ============================================================ */ .login-screen{ background: radial-gradient(ellipse at top, #122544 0%, #050d1c 70%), #050d1c !important; } [data-theme="light"] .login-screen{ background: radial-gradient(ellipse at top, #1a2540 0%, #0a1628 80%), #0a1628 !important; } .login-box{ background:var(--surface) !important; border:1px solid var(--border); box-shadow:0 25px 80px rgba(200,16,46,.15), 0 0 0 1px rgba(200,16,46,.08); } [data-theme="light"] .login-box{ background:#fff !important; } .login-title{ font-family:var(--font-display); font-size:36px !important; letter-spacing:2px; text-transform:uppercase; color:var(--text); } .login-sub{ color:var(--accent-3); font-weight:700; letter-spacing:3px; text-transform:uppercase; font-size:11px; } .login-input{ background:var(--surface-2) !important; border:2px solid var(--border) !important; color:var(--text) !important; border-radius:8px !important; } .login-input:focus{ border-color:var(--accent) !important; } [data-theme="light"] .login-input{ background:#f7f9fc !important; } [data-theme="light"] .login-input:focus{ background:#fff !important; } .login-btn{ background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important; border-radius:8px !important; letter-spacing:2px; text-transform:uppercase; font-family:var(--font-display); font-size:18px !important; font-weight:400 !important; } .login-btn:hover{ box-shadow:0 8px 25px rgba(200,16,46,.5); } /* ============================================================ HEADER ============================================================ */ .header{ background:linear-gradient(180deg, #0a1628, #060f1f) !important; border-bottom:2px solid var(--accent); box-shadow:0 4px 16px rgba(0,0,0,.4) !important; min-height:var(--header-h); } [data-theme="light"] .header{ background:linear-gradient(180deg, #1a2540, #0f1a30) !important; } [data-theme="dark"] .header{ background:linear-gradient(180deg, #0a1628, #060f1f) !important; } .header-logo{ width:52px !important; height:52px !important; border-radius:50% !important; padding:2px !important; background:#000 !important; box-shadow:0 0 0 2px var(--accent), 0 0 12px rgba(200,16,46,.4); flex-shrink:0; } .header-title{ font-family:var(--font-display); font-size:26px !important; letter-spacing:2px; text-transform:uppercase; color:#fff; } .header-sub{ color:var(--accent-3); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:10px !important; margin-top:2px !important; } [data-theme="light"] .header-sub{ color:#ff5566; } .theme-toggle, .logout-btn, .refresh-btn{ width:40px !important; height:40px !important; border-radius:8px !important; background:rgba(200,16,46,.12) !important; border:1px solid rgba(200,16,46,.25); font-size:18px !important; } .theme-toggle:hover, .logout-btn:hover, .refresh-btn:hover{ background:rgba(200,16,46,.25) !important; } .role-badge{ border-radius:4px !important; background:rgba(0,0,0,.4) !important; border:1px solid var(--accent); font-family:'Courier New',monospace; letter-spacing:1px !important; color:var(--accent-3); } .role-badge.superadmin{ background:var(--accent) !important; color:#fff; border-color:var(--accent); } .role-badge.admin{ background:rgba(200,16,46,.15) !important; color:var(--accent-3); } .role-badge.member{ background:rgba(0,0,0,.3) !important; border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.7); } /* ============================================================ ONGLETS DE SECTION ============================================================ */ .sec-wrap{ background:var(--bg) !important; padding:8px 10px 6px !important; border-bottom:1px solid var(--border); } .sec-tab{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:6px !important; color:var(--muted) !important; font-family:var(--font-display); letter-spacing:1.5px; font-size:13px !important; font-weight:400 !important; text-transform:uppercase; box-shadow:none !important; min-height:48px !important; position:relative; } .sec-tab.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; transform:none !important; box-shadow:0 0 0 1px rgba(200,16,46,.4), 0 4px 12px rgba(200,16,46,.3) !important; } .sec-tab.active::after{ content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--accent); } /* ============================================================ PANELS / BOX ============================================================ */ .box{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:10px !important; box-shadow:var(--shadow) !important; } /* MOIS */ .month-btn{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; color:var(--muted) !important; font-family:var(--font-display); letter-spacing:1px; font-size:14px !important; font-weight:400 !important; text-transform:uppercase; } .month-btn.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } /* JOURS */ .day-btn{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; color:var(--text-2) !important; font-family:var(--font-display); font-weight:400 !important; position:relative; } .day-btn.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } .day-btn.today{ border-color:var(--accent) !important; color:var(--accent) !important; background:rgba(200,16,46,.08) !important; } [data-theme="dark"] .day-btn.today, [data-theme="psg"] .day-btn.today{ background:rgba(200,16,46,.12) !important; } .day-num{ font-size:20px !important; font-family:var(--font-display); letter-spacing:1px; } .day-week{ font-size:10px !important; letter-spacing:1px; text-transform:uppercase; } .day-btn.perm-marked{ background:var(--surface-2) !important; border:2px solid #16a34a !important; color:var(--text-2) !important; box-shadow:0 0 0 1px rgba(22,163,74,.18) !important; } .day-btn.locked{ border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.22) !important; } .day-btn.active.locked{ border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.34), inset 0 0 0 2px rgba(255,255,255,.45) !important; } .day-btn.perm-marked.locked{ border-color:#ef4444 !important; background:var(--surface-2) !important; color:var(--text-2) !important; box-shadow:0 0 0 2px rgba(239,68,68,.28) !important; } .day-btn.perm-marked.locked::after{ content:""; position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:999px; background:#16a34a; border:2px solid #fff; box-shadow:0 2px 7px rgba(22,163,74,.45); } .day-btn.active.perm-marked.locked{ background:var(--accent) !important; border-color:#ef4444 !important; color:#fff !important; box-shadow:0 0 0 2px rgba(239,68,68,.42), inset 0 0 0 2px rgba(255,255,255,.45) !important; } /* JOUR DE PERM */ .perm-day-toggle{ background:var(--surface-2) !important; border:2px dashed var(--border) !important; border-radius:6px !important; color:var(--muted) !important; font-family:var(--font-display); letter-spacing:1.5px; text-transform:uppercase; font-weight:400 !important; } .perm-day-toggle.actif{ background:rgba(200,16,46,.1) !important; border-color:var(--accent) !important; color:var(--accent) !important; } [data-theme="dark"] .perm-day-toggle.actif, [data-theme="psg"] .perm-day-toggle.actif{ background:rgba(200,16,46,.15) !important; } /* ============================================================ DEP ============================================================ */ .dep-box{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:10px !important; box-shadow:var(--shadow) !important; } .dep-title{ font-family:var(--font-display); font-size:18px !important; letter-spacing:2px; text-transform:uppercase; font-weight:400 !important; color:var(--text); } .dep-chip{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; color:var(--text-2) !important; font-family:var(--font-display); letter-spacing:1px; font-size:14px !important; font-weight:400 !important; text-transform:uppercase; min-height:42px !important; } .dep-chip.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } .btn-new-dep{ border:2px dashed var(--accent) !important; color:var(--accent) !important; border-radius:6px !important; font-family:var(--font-display); letter-spacing:1.5px; font-weight:400 !important; text-transform:uppercase; font-size:13px !important; } .dep-form{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:8px !important; } .dep-form input{ background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:6px !important; } .dep-form input:focus{ border-color:var(--accent) !important; } .dep-form-ok{ background:var(--accent) !important; border-radius:6px !important; font-family:var(--font-display); letter-spacing:1.5px; font-weight:400 !important; font-size:16px !important; text-transform:uppercase; } .dep-form-cancel{ background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--muted) !important; border-radius:6px !important; font-family:var(--font-display); letter-spacing:1.5px; font-weight:400 !important; font-size:16px !important; text-transform:uppercase; } /* ============================================================ BARRE DE RECHERCHE ============================================================ */ .search-bar{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; } .search-bar:focus-within{ border-color:var(--accent) !important; box-shadow:0 0 0 2px rgba(200,16,46,.15); } .search-bar input{ color:var(--text) !important; } .search-icon{ color:var(--muted) !important; } /* ============================================================ COMPTEUR ============================================================ */ .presence-counter{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; } .counter-icon{ background:var(--accent) !important; border-radius:6px !important; font-family:var(--font-display); font-weight:400 !important; letter-spacing:1px; font-size:16px !important; color:#fff; } .counter-value{ font-family:var(--font-display); font-size:24px !important; letter-spacing:1px; color:var(--text); font-weight:400 !important; } .counter-label{ text-transform:uppercase; letter-spacing:1.5px; font-size:10px !important; color:var(--muted); } .counter-bar{ background:var(--surface-2) !important; border-radius:0 !important; height:6px !important; } .counter-bar-fill{ background:var(--accent) !important; border-radius:0 !important; } .size-switch{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; } .size-btn,.counter-btn{ background:transparent !important; border:none !important; border-radius:4px !important; color:var(--muted) !important; font-family:var(--font-display); letter-spacing:1px; font-weight:400 !important; } .size-btn.active,.counter-btn.active{ background:var(--accent) !important; color:#fff !important; } .counter-btn{ border:1px solid var(--border) !important; } /* ============================================================ ADD BAR ============================================================ */ [data-theme="dark"] .add-wrap, [data-theme="psg"] .add-wrap, :root .add-wrap{ background:linear-gradient(180deg, #0a1628 0%, rgba(10,22,40,.96) 70%, rgba(10,22,40,0) 100%) !important; } [data-theme="light"] .add-wrap{ background:linear-gradient(180deg, #f4f6f9 0%, rgba(244,246,249,.96) 70%, rgba(244,246,249,0) 100%) !important; } .add-bar{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; } .add-bar input{ background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:6px !important; } .add-bar input:focus{ border-color:var(--accent) !important; } .add-btn{ background:var(--accent) !important; border-radius:6px !important; font-family:var(--font-display); letter-spacing:1.5px; font-weight:400 !important; text-transform:uppercase; font-size:14px !important; } /* ============================================================ CARTES DE NOMS ============================================================ */ .nom-card{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:6px !important; box-shadow:var(--shadow) !important; } .nom-card.present{ background:var(--surface-2) !important; border-color:var(--accent) !important; border-left:4px solid var(--accent) !important; background-image:linear-gradient(90deg, rgba(200,16,46,.10) 0%, transparent 30%) !important; } .nom-card.pinned{ border-color:var(--gold) !important; box-shadow:0 0 0 1px rgba(212,175,55,.3) !important; } .nom-card.present.pinned{ border-color:var(--accent) !important; border-left:4px solid var(--gold) !important; } .nom-check{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:4px !important; color:var(--muted) !important; } .nom-card.present .nom-check{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } .nom-text{ font-family:var(--font-display); font-size:18px !important; letter-spacing:1.5px; font-weight:400 !important; text-transform:uppercase; color:var(--text) !important; } .nom-card.present .nom-text{ color:var(--text) !important; } [data-theme="psg"] .nom-card.present .nom-text, [data-theme="dark"] .nom-card.present .nom-text, :root .nom-card.present .nom-text{ color:#fff !important; } [data-theme="light"] .nom-card.present .nom-text{ color:#1a2540 !important; } .nom-sub{ color:var(--muted) !important; text-transform:uppercase; letter-spacing:1px; font-size:10px !important; } .nom-card.present .nom-sub{ color:var(--text-2) !important; } .nom-pin, .nom-history, .nom-del, .state-btn, .parc-action-btn{ background:transparent !important; border:1px solid var(--border) !important; border-radius:6px !important; color:var(--muted) !important; } .nom-pin:hover, .nom-history:hover, .nom-del:hover{ background:var(--surface-2) !important; color:var(--text) !important; } .nom-card.present .nom-pin, .nom-card.present .nom-history, .nom-card.present .nom-del, .nom-card.present .state-btn, .nom-card.present .parc-action-btn{ background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.15) !important; color:var(--text) !important; } [data-theme="light"] .nom-card.present .nom-pin, [data-theme="light"] .nom-card.present .nom-history, [data-theme="light"] .nom-card.present .nom-del, [data-theme="light"] .nom-card.present .state-btn, [data-theme="light"] .nom-card.present .parc-action-btn{ background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; color:var(--text-2) !important; } .state-btn.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } .parc-action-btn.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } /* SWIPE */ .swipe-bg.left{ background:linear-gradient(90deg, #7f1d1d, var(--danger)) !important; } .swipe-bg.right{ background:linear-gradient(90deg, #166534, var(--success)) !important; } .swipe-hint{ background:transparent !important; border:none !important; color:var(--muted) !important; font-family:var(--font-display); letter-spacing:2px; text-transform:uppercase; font-size:11px !important; font-weight:400 !important; padding:4px 12px !important; } /* ============================================================ STATS ============================================================ */ .stats-sec-btn{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; color:var(--muted) !important; font-family:var(--font-display); letter-spacing:1.5px; font-weight:400 !important; text-transform:uppercase; box-shadow:none !important; } .stats-sec-btn.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } .stats-box{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; } .stats-header{ border-bottom:1px solid var(--border) !important; } .stats-header-title{ font-family:var(--font-display); letter-spacing:1.5px; font-size:18px !important; text-transform:uppercase; font-weight:400 !important; color:var(--text); } .btn-export{ border:1px solid var(--accent) !important; color:var(--accent) !important; background:transparent !important; border-radius:4px !important; font-family:var(--font-display); letter-spacing:1.5px; font-weight:400 !important; text-transform:uppercase; } .btn-export:hover{ background:var(--accent) !important; color:#fff !important; } .stat-row{ border-bottom:1px solid var(--border) !important; } .stat-rank{ background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--muted) !important; font-family:var(--font-display); } .stat-rank.gold{ background:rgba(212,175,55,.15) !important; border-color:var(--gold) !important; color:var(--gold) !important; } .stat-rank.silver{ background:var(--surface-2) !important; border-color:var(--muted) !important; color:var(--text-2) !important; } .stat-rank.bronze{ background:rgba(184,115,51,.15) !important; border-color:#b87333 !important; color:#b87333 !important; } .stat-name{ color:var(--text) !important; font-family:var(--font-display); letter-spacing:1px; text-transform:uppercase; font-size:15px !important; font-weight:400 !important; } .stat-score{ color:var(--accent) !important; font-family:var(--font-display); font-size:18px !important; font-weight:400 !important; } .stat-bar-wrap{ background:var(--surface-2) !important; border-radius:0 !important; } .stat-bar{ background:var(--accent) !important; border-radius:0 !important; } /* ============================================================ EMPTY ============================================================ */ .empty{ background:var(--surface) !important; border:1px dashed var(--border) !important; border-radius:8px !important; box-shadow:none !important; color:var(--muted) !important; } .empty p{ font-family:var(--font-display); letter-spacing:1.5px; text-transform:uppercase; font-size:14px !important; font-weight:400 !important; } /* ============================================================ MODAL ============================================================ */ .modal-overlay{ background:rgba(0,0,0,.75) !important; } [data-theme="light"] .modal-overlay{ background:rgba(15,23,42,.5) !important; } .modal{ background:var(--surface) !important; border:1px solid var(--border) !important; border-top:3px solid var(--accent) !important; border-radius:12px !important; } .modal-header{ border-bottom:1px solid var(--border) !important; } .modal-title{ font-family:var(--font-display); font-size:22px !important; letter-spacing:1.5px; text-transform:uppercase; font-weight:400 !important; color:var(--text); } .modal-close{ background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--muted) !important; border-radius:6px !important; } .history-stat{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; } .history-stat.perm{ border-color:var(--accent) !important; background:rgba(200,16,46,.08) !important; } .history-stat.dep{ border-color:var(--success) !important; background:rgba(34,197,94,.08) !important; } .history-stat.perm .history-stat-value{color:var(--accent) !important;} .history-stat.dep .history-stat-value{color:var(--success) !important;} .history-stat-value{ font-family:var(--font-display); font-size:22px !important; letter-spacing:1px; font-weight:400 !important; } .history-stat-label{ letter-spacing:1px; } .history-section-title{ font-family:var(--font-display); font-size:14px !important; letter-spacing:2px; font-weight:400 !important; } .history-item{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; } .history-item-icon.perm{ background:rgba(200,16,46,.15) !important; color:var(--accent) !important; } .history-item-icon.dep{ background:rgba(34,197,94,.15) !important; color:var(--success) !important; } .history-item-text{ color:var(--text) !important; } .log-row{ background:var(--surface-2) !important; border:1px solid var(--border) !important; border-radius:6px !important; } .log-who{ color:var(--text) !important; font-family:var(--font-display); letter-spacing:1px; } /* ============================================================ TOAST ============================================================ */ .toast{ background:#0a1628 !important; border:1px solid var(--border) !important; border-radius:6px !important; font-family:var(--font-display); letter-spacing:2px; text-transform:uppercase; font-weight:400 !important; font-size:13px !important; color:#fff !important; } .toast.ok{ background:#0a4f1d !important; border-color:var(--success) !important; } .toast.err{ background:#5b1414 !important; border-color:var(--danger) !important; } /* ============================================================ ABO NAME ============================================================ */ .abo-name{ border-color:var(--gold) !important; background:rgba(212,175,55,.1) !important; } /* ============================================================ PULSE ============================================================ */ @keyframes pulseRed{ 0%{box-shadow:0 0 0 0 rgba(200,16,46,.6);} 100%{box-shadow:0 0 0 12px rgba(200,16,46,0);} } .nom-card.present .nom-check{ animation:pulseRed .6s ease-out; } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:420px){ .header-title{font-size:22px !important;} .header-logo{width:46px !important; height:46px !important;} .sec-tab{font-size:12px !important; min-height:44px !important;} .nom-text{font-size:16px !important;} .day-num{font-size:18px !important;} .login-title{font-size:30px !important;} }