/* =================================================================== admin.oktalink.fr — Portail d'administration Charte Oktalink : reprend les tokens de ticket.oktalink.fr/admin.css =================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --cyan: #00B4FF; --dark: #22262D; --text: #1D2129; --text-light: #64748B; --border: #E2E8F0; --bg: #F3F7FA; --white: #ffffff; --card-bg: #F8FAFC; --radius: 10px; --transition: all 0.2s ease; --ok-bg: #D1FAE5; --ok-text: #065F46; --ok-border: #A7F3D0; --warn-bg: #FEF3C7; --warn-text: #92400E; --warn-border: #FDE68A; --off-bg: #F1F5F9; --off-text: #64748B; --off-border: #E2E8F0; } /* =================================================================== THÈME SOMBRE Seuls les jetons de couleur sont redéfinis : tous les composants passent par ces variables, ils suivent donc automatiquement. Le bouton ☾ de la barre commune pose data-theme sur . =================================================================== */ :root[data-theme="dark"] { --cyan: #38BDF8; --dark: #0F1318; --text: #E7ECF2; --text-light: #94A3B8; --border: #2E3440; --bg: #14181E; --white: #1B2027; /* fond des cartes : « blanc » du thème sombre */ --card-bg: #232A33; /* fond survolé / zones creusées */ --ok-bg: rgba(16,185,129,0.14); --ok-text: #6EE7B7; --ok-border: rgba(16,185,129,0.35); --warn-bg: rgba(245,158,11,0.14); --warn-text: #FCD34D; --warn-border: rgba(245,158,11,0.35); --off-bg: #232A33; --off-text: #94A3B8; --off-border: #2E3440; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; } /* ===== LOGIN ===== */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 52px 48px; width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); text-align: center; } .login-logo { height: 36px; margin-bottom: 32px; } .login-card h1 { font-size: 22px; margin-bottom: 6px; } .login-card > p { color: var(--text-light); font-size: 14px; margin-bottom: 32px; } .login-group { display: flex; flex-direction: column; text-align: left; margin-bottom: 18px; } .login-group label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; } .login-group input { font-family: inherit; font-size: 15px; font-weight: 500; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); outline: none; transition: var(--transition); width: 100%; color: var(--text); } .login-group input:focus, .login-group input:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,180,255,0.12); } .login-hint { font-size: 12px; color: var(--text-light); margin-top: 20px; } /* ===== BOUTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; transition: var(--transition); } .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .btn-dark { background: var(--dark); color: #fff; } .btn-dark:hover { opacity: 0.88; transform: translateY(-1px); } .btn-full { width: 100%; justify-content: center; font-size: 15px; padding: 14px; } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-outline { background: transparent; color: var(--text-light); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,180,255,0.05); } .btn-danger { background: #FEE2E2; color: #991b1b; border: 1px solid #FECACA; } .btn-danger:hover { background: #FCA5A5; } .btn-cyan { background: var(--cyan); color: #fff; } .btn-cyan:hover { opacity: 0.9; transform: translateY(-1px); } /* ===== EN-TÊTE ===== */ .admin-header { background: rgba(255,255,255,0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } .admin-header-left { display: flex; align-items: center; gap: 20px; } .admin-header-right { display: flex; align-items: center; gap: 14px; } .admin-logo { height: 30px; } .admin-title { font-size: 14px; font-weight: 600; color: var(--text-light); } .admin-user { font-size: 13px; color: var(--text-light); } .admin-user strong { color: var(--text); font-weight: 600; } .admin-nav { display: flex; gap: 4px; } .admin-nav a { font-size: 13px; font-weight: 600; color: var(--text-light); text-decoration: none; padding: 7px 14px; border-radius: 8px; transition: var(--transition); } .admin-nav a:hover { color: var(--cyan); background: rgba(0,180,255,0.06); } .admin-nav a.active { color: var(--cyan); background: rgba(0,180,255,0.1); } .admin-main { max-width: 1100px; margin: 0 auto; padding: 40px 24px; } .page-head { margin-bottom: 28px; } .page-head h1 { font-size: 24px; margin-bottom: 4px; } .page-head p { color: var(--text-light); font-size: 14px; } /* ===== GRILLE DES SOUS-DOMAINES ===== */ .sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 40px; } .site-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: var(--transition); } .site-card:hover { border-color: var(--cyan); box-shadow: 0 4px 16px rgba(0,180,255,0.08); transform: translateY(-2px); } .site-card.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; background: var(--card-bg); } .site-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .site-name { font-size: 17px; font-weight: 700; } .site-domain { font-size: 12px; color: var(--cyan); font-weight: 600; } .site-desc { font-size: 13px; color: var(--text-light); } /* ===== CARTES OUTILS (tableau de bord) ===== */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; } .tool-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: var(--transition); } .tool-card:hover { border-color: var(--cyan); box-shadow: 0 4px 16px rgba(0,180,255,0.08); transform: translateY(-2px); } .tool-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .tool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .tool-name { font-size: 17px; font-weight: 700; } .tool-desc { font-size: 12.5px; color: var(--text-light); margin-bottom: 16px; } .tool-figure { display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px; } .figure-value { font-size: 32px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .figure-value.is-alert { color: var(--cyan); } .figure-label { font-size: 13px; color: var(--text-light); } .tool-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-light); padding-top: 12px; border-top: 1px solid var(--border); margin-top: auto; font-variant-numeric: tabular-nums; } .tool-meta .is-strong { color: var(--text); font-weight: 700; } .tool-error { font-size: 12.5px; color: var(--text-light); font-style: italic; padding-top: 12px; border-top: 1px solid var(--border); margin-top: auto; } /* ===== FIL D'ACTIVITÉ ===== */ .feed { list-style: none; margin: 0; padding: 0; } .feed-item { border-bottom: 1px solid var(--border); } .feed-item:last-child { border-bottom: none; } .feed-item a { display: flex; align-items: center; gap: 14px; padding: 14px 24px; text-decoration: none; color: inherit; transition: var(--transition); } .feed-item a:hover { background: var(--card-bg); } .feed-item a:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; } .feed-tag { flex-shrink: 0; width: 62px; text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 0; border-radius: 99px; border: 1px solid; } .feed-join { background: #EEF2FF; color: #3730A3; border-color: #C7D2FE; } .feed-ticket { background: var(--badge-wip, #E0F7FF); color: #0369A1; border-color: #BAE6FD; } .feed-vente { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; } .feed-docs { background: #FEF3C7; color: #92400E; border-color: #FDE68A; } .feed-text { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed-date { flex-shrink: 0; font-size: 12px; color: var(--text-light); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .feed-item a { flex-wrap: wrap; gap: 8px; } .feed-text { white-space: normal; flex-basis: 100%; order: 3; } } /* ===== BADGES ===== */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 99px; white-space: nowrap; } .badge-ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .badge-warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); } .badge-off { background: var(--off-bg); color: var(--off-text); border: 1px solid var(--off-border); } .badge-info { background: rgba(0,180,255,0.09); color: #0369A1; border: 1px solid #BAE6FD; } /* ===== CARTES / TABLEAUX ===== */ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; } .card-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-header h2 { font-size: 16px; } .card-header p { font-size: 13px; color: var(--text-light); margin-top: 2px; } .card-body { padding: 24px; } .table-wrap { overflow-x: auto; } table.users { width: 100%; border-collapse: collapse; font-size: 14px; } table.users th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); padding: 14px 24px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.users td { padding: 16px 24px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.users tr:last-child td { border-bottom: none; } table.users tr:hover td { background: var(--card-bg); } .user-name { font-weight: 600; } .user-email { font-size: 12px; color: var(--text-light); } .user-meta { font-size: 12px; color: var(--text-light); font-variant-numeric: tabular-nums; } .perm-tags { display: flex; flex-wrap: wrap; gap: 5px; } .perm-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: rgba(0,180,255,0.08); color: #0369A1; border: 1px solid #BAE6FD; } .perm-tag.none { background: var(--off-bg); color: var(--off-text); border-color: var(--off-border); } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* ===== FORMULAIRES ===== */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; } .field { display: flex; flex-direction: column; } .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; color: var(--text-light); } .field input[type="text"], .field input[type="email"], .field input[type="password"] { font-family: inherit; font-size: 14px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; outline: none; transition: var(--transition); color: var(--text); background: var(--white); width: 100%; } .field input:focus, .field input:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,180,255,0.12); } .checks { display: flex; flex-wrap: wrap; gap: 10px; } .check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--white); transition: var(--transition); user-select: none; } .check:hover { border-color: var(--cyan); } .check input { accent-color: var(--cyan); width: 15px; height: 15px; cursor: pointer; } .check:has(input:checked) { border-color: var(--cyan); background: rgba(0,180,255,0.06); color: #0369A1; font-weight: 600; } .form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ===== ALERTES ===== */ .alert { padding: 14px 18px; border-radius: var(--radius); font-size: 13px; margin-bottom: 20px; } .alert-success { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .alert-error { background: #FEE2E2; color: #991b1b; border: 1px solid #FECACA; } .alert-warn { background: var(--warn-bg);color: var(--warn-text);border: 1px solid var(--warn-border); } .login-error { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius); color: #991b1b; font-size: 13px; padding: 12px 16px; margin-bottom: 18px; text-align: center; } /* ===== DIVERS ===== */ .self-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan); margin-left: 6px; } .empty-state { text-align: center; padding: 48px 24px; color: var(--text-light); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .admin-header { padding: 0 16px; height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; } .admin-main { padding: 24px 16px; } .sites-grid { grid-template-columns: 1fr; } .row-actions { justify-content: flex-start; } .admin-user { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* =================================================================== THÈME SOMBRE — surcharges des couleurs codées en dur Les composants ci-dessous n'utilisaient pas les jetons : on les réaccorde ici plutôt que de réécrire leurs règles. =================================================================== */ :root[data-theme="dark"] .btn-dark { background: #38BDF8; color: #0B0F14; } :root[data-theme="dark"] .btn-dark:hover { background: #7DD3FC; } :root[data-theme="dark"] .btn-cyan { color: #0B0F14; } :root[data-theme="dark"] .btn-danger { background: rgba(239,68,68,0.14); color: #FCA5A5; border-color: rgba(239,68,68,0.35); } :root[data-theme="dark"] .btn-danger:hover { background: rgba(239,68,68,0.26); } :root[data-theme="dark"] .btn-outline { color: var(--text-light); border-color: var(--border); } :root[data-theme="dark"] .btn-outline:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(56,189,248,0.10); } /* Étiquettes du fil d'activité */ :root[data-theme="dark"] .feed-join { background: rgba(99,102,241,0.16); color: #A5B4FC; border-color: rgba(99,102,241,0.38); } :root[data-theme="dark"] .feed-ticket { background: rgba(56,189,248,0.16); color: #7DD3FC; border-color: rgba(56,189,248,0.38); } :root[data-theme="dark"] .feed-vente { background: rgba(16,185,129,0.16); color: #6EE7B7; border-color: rgba(16,185,129,0.38); } :root[data-theme="dark"] .feed-docs { background: rgba(245,158,11,0.16); color: #FCD34D; border-color: rgba(245,158,11,0.38); } /* Badges et étiquettes de droits */ :root[data-theme="dark"] .badge-info, :root[data-theme="dark"] .perm-tag { background: rgba(56,189,248,0.14); color: #7DD3FC; border-color: rgba(56,189,248,0.35); } :root[data-theme="dark"] .perm-tag.none { background: var(--off-bg); color: var(--off-text); border-color: var(--off-border); } /* Alertes */ :root[data-theme="dark"] .alert-error, :root[data-theme="dark"] .login-error { background: rgba(239,68,68,0.12); color: #FCA5A5; border-color: rgba(239,68,68,0.32); } /* Champs de saisie */ :root[data-theme="dark"] .login-group input, :root[data-theme="dark"] .field input[type="text"], :root[data-theme="dark"] .field input[type="email"], :root[data-theme="dark"] .field input[type="password"], :root[data-theme="dark"] .check { background: #232A33; border-color: var(--border); color: var(--text); } :root[data-theme="dark"] .login-group input:focus, :root[data-theme="dark"] .field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56,189,248,0.18); } :root[data-theme="dark"] .check:has(input:checked) { border-color: var(--cyan); background: rgba(56,189,248,0.12); color: #7DD3FC; } /* Carte de connexion */ :root[data-theme="dark"] .login-card { background: var(--white); border-color: var(--border); box-shadow: 0 10px 40px rgba(0,0,0,0.35); } /* Le survol des lignes de tableau doit rester perceptible sur fond sombre. */ :root[data-theme="dark"] table.users tr:hover td { background: var(--card-bg); }