/* ============================================================ KLASH - Direction artistique "Cyber-Clash" Glassmorphism + boutons 3D + néon + scanlines ============================================================ */ :root { /* Couleurs */ --bg-0: #0a0820; --bg-1: #14102e; --bg-2: #1f1740; --bg-3: #2a1f55; --ink: #ffffff; --ink-soft: #c9bfee; --ink-mute: #7a6fa3; --magenta: #ff3ea5; --magenta-d: #c11873; --violet: #9B5DE5; --violet-d: #6b3aa8; --cyan: #00f5d4; --cyan-d: #00b89e; --amber: #ffbd00; --amber-d: #c08d00; --red: #ef476f; --red-d: #b22d4e; --green: #06d6a0; --green-d: #038c66; /* Bordures et glass */ --line: rgba(155, 93, 229, 0.25); --line-strong: rgba(255, 62, 165, 0.4); --glass: rgba(31, 23, 64, 0.45); --glass-strong: rgba(31, 23, 64, 0.7); --glass-light: rgba(255, 255, 255, 0.06); /* Lueurs néon */ --glow-magenta: 0 0 24px rgba(255, 62, 165, 0.6), 0 0 48px rgba(255, 62, 165, 0.3); --glow-violet: 0 0 24px rgba(155, 93, 229, 0.6), 0 0 48px rgba(155, 93, 229, 0.3); --glow-cyan: 0 0 24px rgba(0, 245, 212, 0.5), 0 0 48px rgba(0, 245, 212, 0.25); --glow-amber: 0 0 24px rgba(255, 189, 0, 0.5); --glow-red: 0 0 24px rgba(239, 71, 111, 0.5); /* Reliefs 3D Supercell-like */ --depth-magenta: 0 6px 0 var(--magenta-d), 0 8px 16px rgba(255, 62, 165, 0.5); --depth-violet: 0 6px 0 var(--violet-d), 0 8px 16px rgba(155, 93, 229, 0.5); --depth-cyan: 0 6px 0 var(--cyan-d), 0 8px 16px rgba(0, 245, 212, 0.4); --depth-amber: 0 6px 0 var(--amber-d), 0 8px 16px rgba(255, 189, 0, 0.4); --depth-green: 0 6px 0 var(--green-d), 0 8px 16px rgba(6, 214, 160, 0.4); --depth-red: 0 6px 0 var(--red-d), 0 8px 16px rgba(239, 71, 111, 0.4); --depth-dark: 0 6px 0 #0a081a, 0 8px 16px rgba(0,0,0,0.4); /* Rayons (formes rebondies) */ --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; } /* ============================================================ THÈME AGENT — palette sépia / dossier classifié / espionnage Activé via ============================================================ */ html[data-theme="agent"] { /* Fonds : brun foncé chaleureux (papier vieilli) */ --bg-0: #1a1410; --bg-1: #221a14; --bg-2: #2e231a; --bg-3: #3d2f22; /* Texte : crème vieillie */ --ink: #f5e8c8; --ink-soft: #c8a878; --ink-mute: #8a7050; /* Accents : palette dorée/cuivre/rouge brick */ --magenta: #d4a050; /* doré chaud (remplace le rose primaire) */ --magenta-d: #8a6020; --violet: #b8742a; /* cuivre */ --violet-d: #7a4a18; --cyan: #c89640; /* or moyen (remplace le cyan) */ --cyan-d: #8a6018; --amber: #e8a020; /* ambre identique mais plus chaud */ --amber-d: #a06810; --red: #c84030; /* rouge brick (cachet "URGENT") */ --red-d: #8a2818; --green: #7a8830; /* vert kaki/army */ --green-d: #4a5418; /* Bordures et glass */ --line: rgba(200, 150, 70, 0.25); --line-strong: rgba(212, 160, 80, 0.4); --glass: rgba(45, 32, 22, 0.55); --glass-strong: rgba(45, 32, 22, 0.75); --glass-light: rgba(245, 232, 200, 0.06); /* Lueurs : plus chaudes, moins néon */ --glow-magenta: 0 0 22px rgba(212, 160, 80, 0.45), 0 0 40px rgba(212, 160, 80, 0.2); --glow-violet: 0 0 22px rgba(184, 116, 42, 0.45), 0 0 40px rgba(184, 116, 42, 0.2); --glow-cyan: 0 0 22px rgba(200, 150, 70, 0.4), 0 0 40px rgba(200, 150, 70, 0.18); --glow-amber: 0 0 22px rgba(232, 160, 32, 0.5); --glow-red: 0 0 22px rgba(200, 64, 48, 0.5); /* Reliefs 3D : plus tassés, moins lumineux */ --depth-magenta: 0 6px 0 var(--magenta-d), 0 8px 14px rgba(0, 0, 0, 0.5); --depth-violet: 0 6px 0 var(--violet-d), 0 8px 14px rgba(0, 0, 0, 0.5); --depth-cyan: 0 6px 0 var(--cyan-d), 0 8px 14px rgba(0, 0, 0, 0.5); --depth-amber: 0 6px 0 var(--amber-d), 0 8px 14px rgba(0, 0, 0, 0.5); --depth-green: 0 6px 0 var(--green-d), 0 8px 14px rgba(0, 0, 0, 0.5); --depth-red: 0 6px 0 var(--red-d), 0 8px 14px rgba(0, 0, 0, 0.5); --depth-dark: 0 6px 0 #0a0805, 0 8px 14px rgba(0, 0, 0, 0.5); } /* === Fond Agent : remplacer les radial gradients cyber === */ html[data-theme="agent"] body { background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(120, 80, 30, 0.25), transparent 70%), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(180, 130, 50, 0.15), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(200, 150, 70, 0.1), transparent 65%), var(--bg-0); } /* Grille : plus discrète, couleur ambrée */ html[data-theme="agent"] body::before { background-image: linear-gradient(rgba(180, 130, 50, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 130, 50, 0.04) 1px, transparent 1px); background-size: 32px 32px; } /* Scanlines plus marquées (effet film vintage) */ html[data-theme="agent"] body::after { background-image: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 2px, transparent 2px, transparent 4px ); } /* En mode Agent, le logo (image) est légèrement filtré pour s'harmoniser */ html[data-theme="agent"] img.brand-logo, html[data-theme="agent"] .hero-logo { filter: sepia(0.4) hue-rotate(-15deg) saturate(1.2) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(200, 150, 70, 0.3)); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { background: var(--bg-0); color: var(--ink); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 16px; overflow-x: hidden; /* Scroll vertical activé partout */ overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 100%; } body { /* min-height plutôt que height pour permettre le scroll quand le contenu déborde */ min-height: 100vh; min-height: 100dvh; } /* ============= ARRIÈRE-PLAN CYBER ============= */ body { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 62, 165, 0.18), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0, 245, 212, 0.12), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(155, 93, 229, 0.15), transparent 70%), var(--bg-0); min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); position: relative; } /* Grille perspective + scanlines */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(155, 93, 229, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 93, 229, 0.06) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%); } body::after { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 3px ); pointer-events: none; z-index: 1; animation: scanmove 12s linear infinite; } @keyframes scanmove { from { background-position: 0 0; } to { background-position: 0 6px; } } /* ============= TYPOGRAPHIE ============= */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } h1 { font-size: clamp(28px, 8vw, 38px); } h2 { font-size: 22px; margin-bottom: 12px; } h3 { font-size: 18px; } .mono { font-family: 'JetBrains Mono', monospace; } .muted { color: var(--ink-soft); } .micro { color: var(--ink-mute); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .accent-text { background: linear-gradient(135deg, var(--magenta), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .accent-text-2 { background: linear-gradient(135deg, var(--cyan), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============= LOGO ============= */ /* Logo image (préféré). Fallback : texte si image manque ou ne charge pas. */ .brand-logo { display: block; height: 38px; width: auto; filter: drop-shadow(0 4px 16px rgba(255, 62, 165, 0.35)); user-select: none; -webkit-user-drag: none; } .brand-logo.brand-lg { height: 56px; } .brand-logo.brand-xl { height: 80px; } .brand-logo.brand-xxl { height: 120px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 24px; letter-spacing: -0.04em; } /* Logo cliquable (retour à la landing) */ .logo-btn { background: transparent; border: none; padding: 0; cursor: pointer; font-family: inherit; color: inherit; transition: transform 0.15s ease, filter 0.2s ease; } .logo-btn:hover { filter: brightness(1.08); } .logo-btn:active { transform: scale(0.96); } .logo-mark { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--magenta), var(--violet) 50%, var(--cyan)); display: grid; place-items: center; font-size: 22px; font-weight: 900; color: white; box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -3px 8px rgba(0,0,0,0.3), var(--glow-magenta); text-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* ============= BOUTONS 3D STYLE SUPERCELL ============= */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border: none; border-radius: var(--r-md); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; width: 100%; box-shadow: var(--depth-dark); transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s; text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* Reflet métallique en haut */ background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--bg-3), var(--bg-2)); } .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #0a081a, 0 3px 6px rgba(0,0,0,0.4); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* === Accessibilité clavier : contour visible au focus (souris exclue) === */ .btn:focus-visible, [data-action]:focus-visible, button:focus-visible, input:focus-visible, .clickable:focus-visible { outline: 3px solid var(--cyan, #00f5d4); outline-offset: 2px; } /* === Effet enfoncé universel pour tout élément cliquable === */ /* S'applique à tout ce qui est cliquable hors .btn (qui a déjà son style) */ [data-action]:not(.btn):not(:disabled):active, button:not(.btn):not(:disabled):active, .clickable:not(:disabled):active { transform: translateY(3px); filter: brightness(0.92); } /* Désactiver l'effet enfoncé sur les éléments structurels qui pourraient avoir data-action */ .modal-bg:active { transform: none !important; filter: none !important; } .lb-row:active, .stat-row:active { transform: none !important; filter: none !important; } .btn-primary { background-image: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--magenta), var(--violet)); box-shadow: var(--depth-magenta); } .btn-primary:active { box-shadow: 0 2px 0 var(--magenta-d), 0 3px 6px rgba(255, 62, 165, 0.3); } .btn-cyan { background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--cyan), var(--cyan-d)); color: var(--bg-0); text-shadow: 0 1px 1px rgba(255,255,255,0.4); box-shadow: var(--depth-cyan); } .btn-cyan:active { box-shadow: 0 2px 0 var(--cyan-d), 0 3px 6px rgba(0,245,212,0.3); } .btn-amber { background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--amber), var(--amber-d)); color: var(--bg-0); text-shadow: 0 1px 1px rgba(255,255,255,0.4); box-shadow: var(--depth-amber); } .btn-amber:active { box-shadow: 0 2px 0 var(--amber-d), 0 3px 6px rgba(255,189,0,0.3); } .btn-green { background-image: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--green), var(--green-d)); color: var(--bg-0); text-shadow: 0 1px 1px rgba(255,255,255,0.3); box-shadow: var(--depth-green); } .btn-green:active { box-shadow: 0 2px 0 var(--green-d), 0 3px 6px rgba(6,214,160,0.3); } .btn-danger { background-image: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--red), var(--red-d)); box-shadow: var(--depth-red); } .btn-danger:active { box-shadow: 0 2px 0 var(--red-d), 0 3px 6px rgba(239,71,111,0.3); } .btn-ghost { background: var(--glass); border: 1px solid var(--line); box-shadow: 0 4px 0 rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn-ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,0.3); transform: translateY(3px); } .btn-lg { padding: 20px 32px; font-size: 18px; border-radius: var(--r-lg); } .btn-sm { padding: 10px 16px; font-size: 13px; border-radius: var(--r-sm); width: auto; } /* ============= CARTES (GLASSMORPHISM) ============= */ .card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.3); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%); pointer-events: none; } /* ============= INPUTS ============= */ .input { width: 100%; padding: 16px 18px; background: rgba(10, 8, 32, 0.6); border: 2px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; outline: none; transition: all 0.2s; box-shadow: inset 0 2px 6px rgba(0,0,0,0.3); } .input:focus { border-color: var(--magenta); box-shadow: inset 0 2px 6px rgba(0,0,0,0.3), 0 0 0 4px rgba(255, 62, 165, 0.15), var(--glow-magenta); } textarea.input { min-height: 80px; resize: vertical; font-family: 'JetBrains Mono', monospace; font-size: 13px; } label.field { display: block; margin-bottom: 14px; } label.field .micro { display: block; margin-bottom: 8px; } /* ============= PILL / BADGE ============= */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }