/* ═══════════════════════════════════════════════════════════════ btall-glass.css — Socle visuel « glass » sombre · flotte B.Tall ─────────────────────────────────────────────────────────────── Source de vérité du thème sombre des espaces internes WYx (dashboard, app, auth). Référence : /wyw/dashboard.html + /studio/dashboard.html. À inclure AVANT le CSS spécifique de page : Layouts : → page app (topbar + .wrap) → page centrée (auth, attente) Ne JAMAIS redéfinir les tokens ailleurs : surcharger seulement les composants spécifiques (grille calendrier, canvas éditeur…). ═══════════════════════════════════════════════════════════════ */ :root { --cyan:#00F0FF; --ok:#22C55E; --warn:#F59E0B; --danger:#EF4444; --surface:rgba(255,255,255,0.05); --surface-2:rgba(255,255,255,0.03); --border:rgba(255,255,255,0.09); --border-cyan:rgba(0,240,255,0.2); --text:#dce8f5; --muted:rgba(220,232,245,0.65); --radius:14px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-modal: 250ms; --transition-nav: color .15s var(--ease-out), background-color .15s var(--ease-out), border-left-color .15s var(--ease-out); } *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } body.glass { font-family:'Inter',sans-serif; color:var(--text); min-height:100vh; background: linear-gradient(160deg, #060d1f 0%, #0a172e 40%, #0d1e3a 70%, #0a152a 100%); } /* Grille cyan faible + glows. position:fixed sans background-attachment (bug Chrome connu : grille noire avec overlays). z-index:-1 → la grille se peint derrière le contenu en flux SANS forcer position sur les enfants (ne pas utiliser z-index:0 + « > * position:relative » : ça écraserait le position:fixed des sidebars/overlays). */ body.glass::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; background: radial-gradient(ellipse 70% 55% at 18% 65%, rgba(0,240,255,0.04) 0%, transparent 60%), radial-gradient(ellipse 55% 40% at 78% 28%, rgba(0,240,255,0.03) 0%, transparent 55%), linear-gradient(rgba(0,240,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,0.025) 1px, transparent 1px); background-size: auto, auto, 60px 60px, 60px 60px; } /* Layout centré (auth, attente) */ body.glass-center { display:flex; align-items:center; justify-content:center; padding:24px; } /* ── Topbar (pages app) ───────────────────────────────────────── */ .topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 6%; background:rgba(6,13,31,0.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,240,255,0.08); position:sticky; top:0; z-index:10; } .topbar .brand { font-size:18px; font-weight:900; color:var(--text); } .topbar .brand em { color:var(--cyan); font-style:normal; } .topbar .right { display:flex; align-items:center; gap:12px; } .topbar .email { font-size:13px; color:var(--muted); } /* ── Conteneur ────────────────────────────────────────────────── */ .wrap { width:100%; max-width:420px; } /* ── Logo (auth) ──────────────────────────────────────────────── */ .logo { text-align:center; margin-bottom:40px; } .logo-mark { display:inline-flex; align-items:center; gap:10px; } .logo-mark span { font-size:22px; font-weight:900; color:var(--text); letter-spacing:-.02em; } .logo-mark em { font-style:normal; color:var(--cyan); } .logo-sub { font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:6px; } /* ── Carte glass ──────────────────────────────────────────────── */ .card { background:var(--surface); border:1px solid var(--border); border-radius:16px; backdrop-filter:blur(12px); box-shadow:0 4px 32px rgba(0,0,0,.35); padding:40px; } .card h1 { font-size:20px; font-weight:800; color:var(--text); margin-bottom:6px; } .card > p { font-size:13px; color:var(--muted); margin-bottom:32px; line-height:1.6; } /* ── Formulaires ──────────────────────────────────────────────── */ label { display:block; font-size:12px; font-weight:700; color:var(--text); letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; } .label-hint { font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; } input, textarea, select { width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:8px; font-family:inherit; font-size:14px; color:var(--text); background:var(--surface-2); outline:none; transition:border-color .15s; resize:vertical; } input::placeholder, textarea::placeholder { color:var(--muted); } input:focus, textarea:focus, select:focus { border-color:var(--cyan); } select option { background:#0a172e; color:var(--text); } /* ── Boutons ──────────────────────────────────────────────────── */ .btn { width:100%; padding:14px; background:var(--cyan); color:#060d1f; border:none; border-radius:8px; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.04em; cursor:pointer; transition:opacity .2s, box-shadow .2s; } .btn:hover { opacity:.9; box-shadow:0 0 24px rgba(0,240,255,0.25); } .btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; } .btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); } .btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); box-shadow:none; opacity:1; } .btn-logout { font-size:13px; font-weight:700; color:var(--muted); background:none; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:7px 14px; cursor:pointer; transition:border-color .15s, color .15s; width:auto; } .btn-logout:hover { border-color:var(--cyan); color:var(--cyan); } /* ── Messages ─────────────────────────────────────────────────── */ .error-msg { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:20px; display:none; } .success-msg { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.3); color:#86efac; font-size:13px; padding:10px 14px; border-radius:8px; } /* ── Bandeau info (ex. profil entreprise partagé) ─────────────── */ .glass-banner { background:var(--surface-2); border-left:3px solid var(--cyan); border-radius:8px; padding:14px 16px; font-size:13px; color:var(--muted); line-height:1.6; } .glass-banner strong { color:var(--text); } .glass-banner a { color:var(--cyan); font-weight:600; text-decoration:none; } /* ── Pied de page auth ────────────────────────────────────────── */ .footer-note { text-align:center; margin-top:28px; font-size:11px; color:var(--muted); } .footer-note a { color:var(--text); font-weight:700; text-decoration:none; } .footer-note a:hover { color:var(--cyan); } /* ── Overlays (règle critique : display:none, jamais opacity:0) ── */ .overlay { display:none; position:fixed; inset:0; z-index:100; background:rgba(4,9,22,0.8); backdrop-filter:blur(6px); } .overlay.visible { display:flex; align-items:center; justify-content:center; padding:24px; } /* ── Liens ────────────────────────────────────────────────────── */ a.link-cyan { color:var(--cyan); text-decoration:none; font-weight:600; } /* Retour au Studio (sidebar des agents) */ .back-studio { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:12px; font-weight:700; color:var(--cyan); text-decoration:none; transition:opacity .15s; } .back-studio:hover { opacity:.75; }