/* ========================================================================= Serveur d'identite — feuille de style (themes clair + sombre) Direction : "atelier" — ardoise froide la nuit, calcaire clair le jour, accent laiton bruni commun aux deux, registre monospace pour les identifiants machine. Servie en fichier externe : conforme CSP 'self'. Theme pilote par data-theme sur , pose avant l'affichage par /assets/theme-init.js (pas de clignotement). Defaut : sombre. ========================================================================= */ :root { color-scheme: dark; --ink: #0e1417; --ink-deep: #0a0e11; --panel: #141d22; --panel-2: #101a1f; --raise: #18242b; --line: #24313a; --line-soft: #1a242b; --line-hover: #33434d; --txt: #eef2f0; --muted: #8a9a9a; --placeholder:#5d6d6d; --brass: #c9a15c; --brass-hi: #e2bd83; --brass-tint: rgba(201,161,92,.12); --teal: #5fb3ab; --danger: #dd9090; --danger-bg: #351d1d; --danger-ln: #5f3030; --code-txt: #d6ddda; --hover: rgba(255,255,255,.05); --hover-soft: rgba(255,255,255,.025); --pill-admin-ln: #6a5124; --pill-on-ln: #2f5a55; --flash-bg: linear-gradient(180deg, #221d10, #1c1810); --flash-ln: #5a4a1f; --flash-txt: #e8d3a0; --auth-glow: #16232a; --btn-txt: #241703; --shadow: 0 24px 50px -30px rgba(0,0,0,.85); --r: 13px; --r-sm: 9px; --r-pill: 999px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; } /* ---------- Theme clair : "atelier en plein jour" ---------- */ :root[data-theme="light"] { color-scheme: light; --ink: #ecefea; --ink-deep: #e2e6df; --panel: #ffffff; --panel-2: #f4f6f1; --raise: #f8faf5; --line: #d7ddd2; --line-soft: #e7ebe2; --line-hover: #c2cbb9; --txt: #1b2620; --muted: #5f6f68; --placeholder:#93a099; --brass: #9a6a24; --brass-hi: #c2883a; --brass-tint: rgba(154,106,36,.12); --teal: #2f7d74; --danger: #a83a3a; --danger-bg: #f8e7e7; --danger-ln: #e2b7b7; --code-txt: #33403b; --hover: rgba(20,30,25,.05); --hover-soft: rgba(20,30,25,.03); --pill-admin-ln: #dcc79c; --pill-on-ln: #a7ccc6; --flash-bg: linear-gradient(180deg, #fbf3d9, #f7edcb); --flash-ln: #e4cf95; --flash-txt: #6a5320; --auth-glow: #ffffff; --shadow: 0 20px 44px -30px rgba(30,40,32,.45); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--txt); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--ink); transition: background .25s ease, color .25s ease; } a { color: var(--brass); text-decoration: none; } a:hover { color: var(--brass-hi); } .mark { color: var(--brass); display: block; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); } .eyebrow::before { content: "\2014\00a0\00a0"; color: var(--muted); } /* ---------- Bouton bascule jour/nuit ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; flex: none; } .theme-toggle:hover { color: var(--txt); border-color: var(--brass); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .i-moon { display: none; } :root[data-theme="light"] .theme-toggle .i-sun { display: none; } :root[data-theme="light"] .theme-toggle .i-moon { display: inline; } /* ========================================================================= Ecrans d'authentification ========================================================================= */ .auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(120% 90% at 50% -10%, var(--auth-glow) 0%, transparent 55%), radial-gradient(80% 60% at 50% 120%, var(--brass-tint) 0%, transparent 60%), var(--ink-deep); } .auth-card { position: relative; width: 100%; max-width: 384px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 34px 30px 28px; box-shadow: var(--shadow); overflow: hidden; animation: rise .5s cubic-bezier(.2,.7,.2,1) both; } .auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass-hi) 50%, var(--brass) 70%, transparent); opacity: .85; } .auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .auth-head .mark { flex: none; } .auth-head .who { display: flex; flex-direction: column; gap: 2px; } .auth-head .who b { font-weight: 600; letter-spacing: .01em; } .auth-head .who span { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; } .auth-head .theme-toggle { margin-left: auto; } .auth-title { font-size: 21px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.01em; } .auth-sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; letter-spacing: .01em; } .input { width: 100%; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--txt); font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s; } .input::placeholder { color: var(--placeholder); } .input:hover { border-color: var(--line-hover); } .input:focus { outline: none; border-color: var(--brass); background: var(--raise); box-shadow: 0 0 0 3px var(--brass-tint); } .input-code { text-align: center; font-family: var(--mono); font-size: 26px; letter-spacing: .5em; text-indent: .5em; padding: 14px 13px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 12px 16px; background: linear-gradient(180deg, var(--brass-hi), var(--brass)); color: var(--btn-txt); border: none; border-radius: var(--r-sm); font: inherit; font-size: 14px; font-weight: 650; letter-spacing: .01em; cursor: pointer; transition: filter .15s, transform .05s; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); } .auth-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; display: flex; align-items: center; gap: 7px; } .auth-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); flex: none; } .alert { border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; border: 1px solid var(--danger-ln); background: var(--danger-bg); color: var(--danger); } /* ========================================================================= Console d'administration ========================================================================= */ .topbar { display: flex; align-items: center; gap: 18px; padding: 0 22px; height: 60px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--panel-2)); flex-wrap: wrap; } .topbar .brand { display: flex; align-items: center; gap: 11px; } .topbar .brand b { font-weight: 650; letter-spacing: .01em; } .topbar .brand small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: 1px; } .tabs { display: flex; gap: 4px; } .tab { color: var(--muted); padding: 8px 13px; border-radius: var(--r-sm); font-size: 13.5px; position: relative; transition: color .15s, background .15s; } .tab:hover { color: var(--txt); background: var(--hover); } .tab.on { color: var(--txt); } .tab.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brass); } .spacer { margin-left: auto; } .signout { color: var(--muted); font-size: 13.5px; padding: 8px 12px; border-radius: var(--r-sm); } .signout:hover { color: var(--danger); background: var(--hover); } .main { max-width: 1000px; margin: 30px auto; padding: 0 18px; } .page-head { margin-bottom: 20px; } .page-head h1 { font-size: 22px; font-weight: 650; margin: 4px 0 0; letter-spacing: -.01em; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 22px; animation: rise .4s cubic-bezier(.2,.7,.2,1) both; } .card > h2 { font-size: 15px; font-weight: 620; margin: 0 0 16px; display: flex; align-items: center; gap: 9px; } .card > h2 .tag { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; } .grid { display: flex; gap: 16px; flex-wrap: wrap; } .grid > .field { flex: 1; min-width: 190px; margin-bottom: 0; } .card .field { margin-bottom: 14px; } .card form .grid { margin-bottom: 14px; } .divide-top { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .card label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; letter-spacing: .01em; } textarea.input { min-height: 84px; resize: vertical; line-height: 1.55; font-family: var(--mono); font-size: 13px; } .check { display: inline-flex; align-items: center; gap: 9px; color: var(--txt); font-size: 13.5px; margin: 4px 0; cursor: pointer; } .check input { width: 16px; height: 16px; accent-color: var(--brass); } .check-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } .btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--r-sm); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: linear-gradient(180deg, var(--brass-hi), var(--brass)); color: var(--btn-txt); border: none; transition: filter .15s, transform .05s; } .btn-sm:hover { filter: brightness(1.06); } .btn-sm:active { transform: translateY(1px); } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); } .btn-ghost:hover { border-color: var(--line-hover); color: var(--txt); filter: none; } .btn-danger { background: transparent; border: 1px solid var(--danger-ln); color: var(--danger); } .btn-danger:hover { background: var(--danger-bg); filter: none; } .table-wrap { overflow-x: auto; margin: 0 -4px; } table { width: 100%; border-collapse: collapse; min-width: 520px; } th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } tr:last-child td { border-bottom: none; } thead th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; border-bottom-color: var(--line); } tbody tr { transition: background .12s; } tbody tr:hover { background: var(--hover-soft); } .col-actions { text-align: right; white-space: nowrap; } .col-actions form, .col-actions a { display: inline-block; } .col-actions .btn-ghost, .col-actions .btn-danger, .col-actions .btn-sm { margin-left: 6px; } .keytag { font-family: var(--mono); font-size: 12.5px; color: var(--code-txt); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 7px; display: inline-block; word-break: break-all; } .uri-list { display: flex; flex-direction: column; gap: 5px; } .pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); display: inline-block; vertical-align: middle; } .pill-admin { color: var(--brass); border-color: var(--pill-admin-ln); background: var(--brass-tint); } .pill-on { color: var(--teal); border-color: var(--pill-on-ln); } .pill-off { color: var(--danger); border-color: var(--danger-ln); } .flash { border: 1px solid var(--flash-ln); background: var(--flash-bg); color: var(--flash-txt); padding: 12px 14px; border-radius: var(--r-sm); margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; } .flash::before { content: "\25C6"; color: var(--brass); } .secret { background: var(--ink-deep); border: 1px dashed var(--brass); border-radius: var(--r-sm); padding: 14px; font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--code-txt); word-break: break-all; margin-top: 8px; } .secret b { color: var(--brass); font-weight: 600; } /* ---- Page Securite (2FA) ---- */ .enroll { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; } .enroll .side { flex: 1; min-width: 230px; } .qr-frame { background: #fff; padding: 12px; border-radius: 12px; width: 196px; max-width: 100%; } #qr svg { width: 100%; height: auto; display: block; } #qr:empty::after { content: "QR indisponible — utilisez la cle ci-contre."; color: var(--muted); font-size: 12px; } .totp-key { font-family: var(--mono); font-size: 17px; letter-spacing: .1em; color: var(--txt); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; word-break: break-all; display: inline-block; margin: 4px 0 2px; } .steps { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.7; } .steps li { margin: 3px 0; } .status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .empty { color: var(--muted); font-style: italic; } .backlink { display: inline-block; margin-top: 18px; color: var(--muted); } .backlink:hover { color: var(--txt); } .note { color: var(--muted); font-size: 13px; margin: 2px 0 0; } .muted { color: var(--muted); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, body { animation: none !important; transition: none !important; } } @media (max-width: 560px) { .topbar { height: auto; padding: 12px 16px; gap: 10px 14px; } .main { margin: 20px auto; } .card { padding: 18px; } .auth-card { padding: 28px 22px 24px; } }