/* ============================================================
TrackCue V4 — Studio Neon Design System
Maximum design. Every token. Every state.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
:root{
/* ---------- Surfaces (elevation 0 → 4) ---------- */
--s-0:#050406;
--s-1:#0b0a0f;
--s-2:#12111a;
--s-3:#1a1926;
--s-4:#242237;
--s-overlay:rgba(5,4,6,0.72);
/* ---------- Content ---------- */
--c-primary:#f4f1ec;
--c-secondary:#a8a3b8;
--c-tertiary:#6b6780;
--c-quaternary:#3e3b52;
--c-invert:#050406;
/* ---------- Borders ---------- */
--b-subtle:rgba(255,255,255,0.05);
--b-default:rgba(255,255,255,0.09);
--b-strong:rgba(255,255,255,0.18);
--b-focus:rgba(255,122,24,0.55);
/* ---------- Accents ---------- */
--amber:#ff7a18;
--amber-soft:rgba(255,122,24,0.16);
--amber-glow:rgba(255,122,24,0.38);
--pink:#ff2e6b;
--pink-soft:rgba(255,46,107,0.16);
--lime:#d4ff2a;
--lime-soft:rgba(212,255,42,0.16);
--cyan:#1fd4d4;
--cyan-soft:rgba(31,212,212,0.16);
--violet:#8b5cf6;
--violet-soft:rgba(139,92,246,0.18);
--green:#4ade80;
--green-soft:rgba(74,222,128,0.16);
--red:#ef4444;
--red-soft:rgba(239,68,68,0.16);
/* ---------- Cue semantic ---------- */
--cue-load:#4ade80;
--cue-hot:#ff2e6b;
--cue-loop:#1fd4d4;
--cue-fade:#ff7a18;
--cue-phrase:#8b5cf6;
--cue-beat:#d4ff2a;
/* ---------- Stem colors ---------- */
--stem-drums:#ff7a18;
--stem-bass:#8b5cf6;
--stem-vocals:#ff2e6b;
--stem-other:#1fd4d4;
/* ---------- Typography ---------- */
--font-display:"Space Grotesk",system-ui,sans-serif;
--font-body:"Inter","Space Grotesk",system-ui,sans-serif;
--font-editorial:"Instrument Serif",Georgia,serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;
/* ---------- Spacing ---------- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
--sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
/* ---------- Radius ---------- */
--r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px;
--r-5:16px; --r-6:24px; --r-pill:999px;
/* ---------- Elevation ---------- */
--e-1:0 1px 2px rgba(0,0,0,.4);
--e-2:0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.25);
--e-3:0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
--e-4:0 24px 64px rgba(0,0,0,.65), 0 8px 20px rgba(0,0,0,.45);
--e-glow-amber:0 0 0 1px var(--amber-soft), 0 8px 32px rgba(255,122,24,.28);
--e-glow-pink:0 0 0 1px var(--pink-soft), 0 8px 32px rgba(255,46,107,.22);
/* ---------- Motion ---------- */
--ease:cubic-bezier(.4,0,.2,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--ease-in:cubic-bezier(.4,0,1,1);
--ease-out:cubic-bezier(0,0,.2,1);
--t-fast:120ms;
--t-med:220ms;
--t-slow:400ms;
--t-epic:720ms;
/* ---------- Chrome ---------- */
--nav-h:56px;
--sidebar-w:228px;
--sidebar-w-sm:64px;
--inspector-w:340px;
--ring:0 0 0 2px var(--s-0),0 0 0 4px var(--amber);
/* ---------- Aurora gradients ---------- */
--aurora-hot:radial-gradient(1200px 600px at 8% -10%, rgba(255,46,107,0.22), transparent 55%),
radial-gradient(900px 500px at 105% 20%, rgba(255,122,24,0.18), transparent 55%),
radial-gradient(900px 500px at 50% 110%, rgba(139,92,246,0.16), transparent 55%);
--aurora-calm:radial-gradient(1200px 600px at 8% -20%, rgba(31,212,212,0.12), transparent 55%),
radial-gradient(900px 500px at 105% 30%, rgba(139,92,246,0.12), transparent 55%);
}
/* ============================================================
Theme variants — overrides appliqués via [data-theme] sur
Studio Neon = défaut (:root), on définit les 2 alternatives.
============================================================ */
/* Amber Noir : warm, moins de saturation, surfaces brun-noir */
[data-theme="amber-noir"]{
--s-0:#0a0604;
--s-1:#140d08;
--s-2:#1d150e;
--s-3:#271c14;
--s-4:#33261b;
--s-overlay:rgba(10,6,4,0.78);
--c-primary:#f5ead8;
--c-secondary:#b8a489;
--c-tertiary:#7a6852;
--c-quaternary:#4a3e2f;
--b-subtle:rgba(255,200,150,0.05);
--b-default:rgba(255,200,150,0.1);
--b-strong:rgba(255,200,150,0.2);
--b-focus:rgba(255,170,80,0.55);
--amber:#ffaa50;
--amber-soft:rgba(255,170,80,0.18);
--amber-glow:rgba(255,170,80,0.32);
--pink:#e85a4f;
--pink-soft:rgba(232,90,79,0.18);
--lime:#c4b04c;
--lime-soft:rgba(196,176,76,0.18);
--cyan:#7da89c;
--cyan-soft:rgba(125,168,156,0.18);
--violet:#a07fb8;
--violet-soft:rgba(160,127,184,0.2);
--aurora-hot:radial-gradient(1200px 600px at 8% -10%, rgba(255,170,80,0.18), transparent 55%),
radial-gradient(900px 500px at 105% 20%, rgba(232,90,79,0.14), transparent 55%),
radial-gradient(900px 500px at 50% 110%, rgba(160,127,184,0.12), transparent 55%);
--aurora-calm:radial-gradient(1200px 600px at 8% -20%, rgba(196,176,76,0.1), transparent 55%),
radial-gradient(900px 500px at 105% 30%, rgba(255,170,80,0.1), transparent 55%);
--e-glow-amber:0 0 0 1px var(--amber-soft), 0 8px 32px rgba(255,170,80,.22);
--e-glow-pink:0 0 0 1px var(--pink-soft), 0 8px 32px rgba(232,90,79,.18);
}
/* Cyber Blue : cool, cyan + violet, surfaces bleu-nuit */
[data-theme="cyber-blue"]{
--s-0:#03060c;
--s-1:#080d18;
--s-2:#0e1524;
--s-3:#161f33;
--s-4:#1f2a44;
--s-overlay:rgba(3,6,12,0.74);
--c-primary:#e8f1ff;
--c-secondary:#9cb0d4;
--c-tertiary:#5e7299;
--c-quaternary:#384566;
--b-subtle:rgba(150,200,255,0.06);
--b-default:rgba(150,200,255,0.11);
--b-strong:rgba(150,200,255,0.22);
--b-focus:rgba(31,212,212,0.6);
/* Le token --amber est utilisé partout comme accent primaire :
on le remappe sur le cyan signature de ce thème. */
--amber:#1fd4d4;
--amber-soft:rgba(31,212,212,0.18);
--amber-glow:rgba(31,212,212,0.4);
--pink:#5b8cff;
--pink-soft:rgba(91,140,255,0.2);
--lime:#7cf3ff;
--lime-soft:rgba(124,243,255,0.18);
--cyan:#1fd4d4;
--cyan-soft:rgba(31,212,212,0.18);
--violet:#8b5cf6;
--violet-soft:rgba(139,92,246,0.22);
--aurora-hot:radial-gradient(1200px 600px at 8% -10%, rgba(31,212,212,0.22), transparent 55%),
radial-gradient(900px 500px at 105% 20%, rgba(139,92,246,0.2), transparent 55%),
radial-gradient(900px 500px at 50% 110%, rgba(91,140,255,0.18), transparent 55%);
--aurora-calm:radial-gradient(1200px 600px at 8% -20%, rgba(31,212,212,0.14), transparent 55%),
radial-gradient(900px 500px at 105% 30%, rgba(139,92,246,0.14), transparent 55%);
--e-glow-amber:0 0 0 1px var(--amber-soft), 0 8px 32px rgba(31,212,212,.32);
--e-glow-pink:0 0 0 1px var(--pink-soft), 0 8px 32px rgba(91,140,255,.24);
}
/* ============================================================
Base
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:var(--font-body);
color:var(--c-primary);
background:var(--s-0);
background-image:var(--aurora-hot);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.5;
font-feature-settings:"ss01","cv11";
min-height:100vh;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.55;
mix-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
/* ============================================================
Typography utilities
============================================================ */
.h-display{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.02}
.h-1{font-size:clamp(32px,4.2vw,56px);font-family:var(--font-display);font-weight:700;letter-spacing:-0.025em;line-height:1.02}
.h-2{font-size:28px;font-family:var(--font-display);font-weight:700;letter-spacing:-0.015em;line-height:1.1}
.h-3{font-size:20px;font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;line-height:1.2}
.h-4{font-size:15px;font-family:var(--font-display);font-weight:600;letter-spacing:0}
.editorial{font-family:var(--font-editorial);font-style:italic;font-weight:400;letter-spacing:-0.01em}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-tertiary)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.muted{color:var(--c-secondary)}
.hint{color:var(--c-tertiary);font-size:12px}
/* ============================================================
Surfaces
============================================================ */
.surface{background:var(--s-1);border:1px solid var(--b-default);border-radius:var(--r-4)}
.card{
background:linear-gradient(180deg,var(--s-2) 0%,var(--s-1) 100%);
border:1px solid var(--b-default);
border-radius:var(--r-5);
box-shadow:var(--e-2);
position:relative;
overflow:hidden;
}
.card::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent 60%);
}
.card.elevated{box-shadow:var(--e-3)}
.glass{
background:rgba(18,17,26,0.6);
backdrop-filter:blur(20px) saturate(1.3);
-webkit-backdrop-filter:blur(20px) saturate(1.3);
border:1px solid var(--b-default);
border-radius:var(--r-4);
}
/* ============================================================
Buttons — every state covered
============================================================ */
.btn{
--bg:var(--s-2);
--bg-hover:var(--s-3);
--bd:var(--b-default);
--fg:var(--c-primary);
display:inline-flex;
align-items:center;
gap:8px;
padding:0 14px;
height:36px;
border-radius:var(--r-3);
background:var(--bg);
color:var(--fg);
border:1px solid var(--bd);
font-family:var(--font-display);
font-size:13px;
font-weight:500;
letter-spacing:-0.005em;
cursor:pointer;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
white-space:nowrap;
user-select:none;
position:relative;
}
.btn:hover{background:var(--bg-hover);border-color:var(--b-strong)}
.btn:active{transform:scale(0.97)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn svg{width:15px;height:15px;stroke-width:1.75}
.btn-primary{
--bg:linear-gradient(180deg,#ff8a2e 0%,var(--amber) 100%);
--bg-hover:linear-gradient(180deg,#ff9547 0%,#ff7a18 100%);
--bd:rgba(255,122,24,0.8);
--fg:#1a0b00;
font-weight:600;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 6px 18px rgba(255,122,24,.32);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 28px rgba(255,122,24,.42)}
.btn-ghost{--bg:transparent;--bd:var(--b-subtle)}
.btn-ghost:hover{--bg:var(--s-2)}
.btn-icon{
width:36px;padding:0;justify-content:center;
}
.btn-lg{height:44px;padding:0 20px;font-size:14px}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-2)}
.btn-danger{--bg:var(--red-soft);--bd:rgba(239,68,68,0.35);--fg:#fecaca}
.btn-danger:hover{--bg:rgba(239,68,68,0.22)}
/* Pressable (for non-button interactive elements) */
.pressable{transition:transform var(--t-fast) var(--ease)}
.pressable:active{transform:scale(0.96)}
.focus-ring:focus-visible{outline:none;box-shadow:var(--ring)}
/* ============================================================
Chips & pills
============================================================ */
.chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;
border-radius:var(--r-pill);
font-family:var(--font-mono);
font-size:11px;
font-weight:500;
letter-spacing:0.02em;
background:var(--s-2);
border:1px solid var(--b-default);
color:var(--c-secondary);
white-space:nowrap;
}
.chip-amber{background:var(--amber-soft);border-color:rgba(255,122,24,0.28);color:#ffba7a}
.chip-pink{background:var(--pink-soft);border-color:rgba(255,46,107,0.28);color:#ff8aab}
.chip-lime{background:var(--lime-soft);border-color:rgba(212,255,42,0.28);color:#e5ff70}
.chip-cyan{background:var(--cyan-soft);border-color:rgba(31,212,212,0.28);color:#7ceaea}
.chip-violet{background:var(--violet-soft);border-color:rgba(139,92,246,0.28);color:#b9a3ff}
.chip-green{background:var(--green-soft);border-color:rgba(74,222,128,0.28);color:#8ef0aa}
.chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
/* ============================================================
Inputs
============================================================ */
.input{
width:100%;
height:38px;
padding:0 12px;
background:var(--s-2);
border:1px solid var(--b-default);
border-radius:var(--r-3);
font-size:13px;
color:var(--c-primary);
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.input::placeholder{color:var(--c-quaternary)}
.input:hover{border-color:var(--b-strong)}
.input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);background:var(--s-1)}
.input.error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.input.success{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.search{
position:relative;
}
.search .input{padding-left:38px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--c-tertiary);width:16px;height:16px;pointer-events:none}
.search kbd,.search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.kbd{
font-family:var(--font-mono);
font-size:10.5px;
font-weight:500;
padding:2px 6px;
border-radius:var(--r-1);
background:var(--s-3);
border:1px solid var(--b-default);
color:var(--c-secondary);
box-shadow:0 1px 0 rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.05) inset;
}
/* ============================================================
Toggles / Switches / Segment
============================================================ */
.segment{
display:inline-flex;
padding:3px;
background:var(--s-2);
border:1px solid var(--b-default);
border-radius:var(--r-3);
gap:2px;
}
.segment button{
height:30px;
padding:0 14px;
background:transparent;
border:none;
border-radius:var(--r-2);
font-family:var(--font-display);
font-size:12px;
font-weight:500;
color:var(--c-secondary);
cursor:pointer;
transition:all var(--t-fast) var(--ease);
display:inline-flex;align-items:center;gap:6px;
}
.segment button:hover{color:var(--c-primary)}
.segment button.active{
background:var(--s-4);
color:var(--c-primary);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset, var(--e-1);
}
.segment button .kbd{background:transparent;border-color:var(--b-subtle)}
.switch{
--w:36px;--h:20px;
width:var(--w);height:var(--h);
background:var(--s-3);
border:1px solid var(--b-default);
border-radius:var(--r-pill);
position:relative;
cursor:pointer;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.switch::after{
content:"";
position:absolute;
top:1px;left:1px;
width:calc(var(--h) - 4px);height:calc(var(--h) - 4px);
background:var(--c-secondary);
border-radius:50%;
transition:transform var(--t-med) var(--ease-spring),background var(--t-fast) var(--ease);
}
.switch.on{background:var(--amber);border-color:var(--amber)}
.switch.on::after{transform:translateX(calc(var(--w) - var(--h)));background:var(--c-invert)}
/* ============================================================
Top navigation (shared across all pages)
============================================================ */
.topnav{
position:sticky;top:0;z-index:40;
height:var(--nav-h);
display:flex;
align-items:center;
gap:16px;
padding:0 24px;
background:rgba(11,10,15,0.72);
backdrop-filter:blur(18px) saturate(1.4);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
border-bottom:1px solid var(--b-subtle);
}
.topnav-brand{
display:flex;align-items:center;gap:10px;
font-family:var(--font-display);
font-weight:700;
letter-spacing:-0.01em;
font-size:15px;
}
.topnav-brand .mark{
width:28px;height:28px;
border-radius:8px;
background:#0a0a0b url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
position:relative;
box-shadow:0 0 0 1px rgba(139,92,246,.25) inset, 0 4px 14px rgba(192,38,211,.35);
}
.topnav-sep{width:1px;height:22px;background:var(--b-default)}
.topnav-links{display:flex;gap:2px;flex:1}
.topnav-links a{
padding:6px 12px;
font-size:13px;
font-weight:500;
color:var(--c-secondary);
border-radius:var(--r-2);
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
font-family:var(--font-display);
position:relative;
}
.topnav-links a:hover{color:var(--c-primary);background:var(--s-2)}
.topnav-links a.active{color:var(--c-primary)}
.topnav-links a.active::after{
content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
background:linear-gradient(90deg,var(--amber),var(--pink));
border-radius:2px;
}
.topnav-actions{display:flex;gap:8px;align-items:center}
.avatar{
width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,var(--violet),var(--pink));
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:600;font-size:11px;
color:#fff;
cursor:pointer;
border:1.5px solid rgba(255,255,255,.15);
transition:transform var(--t-fast) var(--ease);
}
.avatar:hover{transform:scale(1.05)}
.avatar[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(255,122,24,.45)}
/* ============================================================
User dropdown menu (top-right avatar)
============================================================ */
.user-menu{
position:fixed;z-index:9999;
min-width:240px;
background:linear-gradient(180deg,var(--s-3),var(--s-2));
border:1px solid var(--b-default);
border-radius:var(--r-4);
box-shadow:var(--e-4);
padding:6px;
backdrop-filter:blur(10px);
animation:userMenuIn .14s ease-out;
transform-origin:top right;
}
@keyframes userMenuIn{
from{opacity:0;transform:translateY(-4px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.user-menu-head{
padding:10px 12px 8px;
}
.user-menu-name{
font-family:var(--font-display);
font-weight:600;
font-size:13px;
color:var(--c-primary);
letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-menu-email{
font-size:11.5px;
color:var(--c-tertiary);
margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-menu-sep{
height:1px;
background:var(--b-subtle);
margin:4px 0;
}
.user-menu-item{
display:flex;align-items:center;gap:10px;
width:100%;
padding:8px 12px;
border-radius:var(--r-3);
background:transparent;
border:0;
color:var(--c-secondary);
font-family:var(--font-body);
font-size:13px;
font-weight:500;
text-align:left;
text-decoration:none;
cursor:pointer;
transition:background .12s ease, color .12s ease;
}
.user-menu-item svg{
flex:0 0 16px;
color:var(--c-tertiary);
transition:color .12s ease;
}
.user-menu-item:hover{
background:rgba(255,255,255,.04);
color:var(--c-primary);
}
.user-menu-item:hover svg{ color:var(--amber); }
.user-menu-item-danger{ color:#f28a8a; }
.user-menu-item-danger svg{ color:#f28a8a; }
.user-menu-item-danger:hover{
background:var(--red-soft);
color:#ffb3b3;
}
.user-menu-item-danger:hover svg{ color:#ffb3b3; }
/* ============================================================
Page scaffold
============================================================ */
.page{
position:relative;z-index:1;
max-width:1440px;
margin:0 auto;
padding:32px 32px 96px;
}
.page-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
padding-bottom:20px;
border-bottom:1px solid var(--b-subtle);
}
.page-title{
font-family:var(--font-display);
font-weight:700;
font-size:36px;
letter-spacing:-0.025em;
line-height:1.05;
margin:0;
}
.page-title .editorial{color:var(--c-secondary);font-weight:400;font-size:32px}
.page-sub{
color:var(--c-secondary);
margin:6px 0 0;
font-size:14px;
max-width:520px;
}
/* ============================================================
Grid helpers
============================================================ */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:16px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px}
/* ============================================================
Tooltips
============================================================ */
[data-tt]{position:relative}
[data-tt]::after{
content:attr(data-tt);
position:absolute;
bottom:calc(100% + 8px);
left:50%;
transform:translateX(-50%) translateY(4px);
background:var(--s-4);
color:var(--c-primary);
padding:5px 9px;
border-radius:var(--r-2);
font-size:11px;
font-family:var(--font-mono);
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
z-index:100;
border:1px solid var(--b-default);
box-shadow:var(--e-2);
}
[data-tt]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* ============================================================
Toast
============================================================ */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:1001;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
pointer-events:auto;
background:var(--s-3);
border:1px solid var(--b-default);
border-left:3px solid var(--amber);
border-radius:var(--r-3);
padding:12px 16px;
font-size:13px;
display:flex;
align-items:center;
gap:10px;
box-shadow:var(--e-3);
animation:toastIn var(--t-med) var(--ease-spring);
min-width:220px;
max-width:360px;
}
.toast.success{border-left-color:var(--green)}
.toast.error{border-left-color:var(--red)}
.toast.info{border-left-color:var(--cyan)}
@keyframes toastIn{
from{opacity:0;transform:translateX(40px) scale(.96)}
to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}
.toast.out{animation:toastOut var(--t-med) var(--ease-in) forwards}
/* ============================================================
Loading — skeleton + spinner
============================================================ */
.skel{
background:linear-gradient(90deg,var(--s-2) 0%,var(--s-3) 50%,var(--s-2) 100%);
background-size:200% 100%;
animation:skelShimmer 1.4s infinite linear;
border-radius:var(--r-2);
}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spinner{
width:16px;height:16px;border-radius:50%;
border:2px solid var(--b-default);
border-top-color:var(--amber);
animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ============================================================
Scrollbars
============================================================ */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--s-3);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--s-4);background-clip:content-box;border:2px solid transparent}
/* ============================================================
Animations / reveal
============================================================ */
.reveal{animation:reveal var(--t-slow) var(--ease-spring) both}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.reveal-1{animation-delay:50ms}.reveal-2{animation-delay:120ms}.reveal-3{animation-delay:200ms}.reveal-4{animation-delay:280ms}.reveal-5{animation-delay:360ms}
/* ============================================================
Accessibility
============================================================ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ============================================================
Responsive — fit all viewports, no horizontal slide
============================================================ */
html{max-width:100vw;overflow-x:hidden}
body{max-width:100vw}
/* Page container shrinks cleanly; children never force horizontal overflow */
.page{width:100%;box-sizing:border-box}
.page > *{min-width:0;max-width:100%}
/* Topnav stays on one row and scrolls horizontally (within itself) instead
of blowing out the body on narrow screens */
.topnav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.topnav::-webkit-scrollbar{display:none}
.topnav-links{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap}
.topnav-links::-webkit-scrollbar{display:none}
.topnav-links a{flex:0 0 auto;white-space:nowrap}
.topnav-actions{flex-shrink:0}
/* Media / cards never overflow their column */
img,video,canvas,svg{max-width:100%}
.card,.surface,.glass{max-width:100%}
@media (max-width:1280px){
.page{padding:28px 24px 80px}
}
@media (max-width:1024px){
.page{padding:24px 20px 72px}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
.page{padding:20px 14px 64px}
.page-header{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:16px;margin-bottom:20px}
.page-title{font-size:28px}
.page-title .editorial{font-size:24px}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.row,.row-between{flex-wrap:wrap}
.topnav{padding:0 14px;gap:10px;height:52px}
}
@media (max-width:520px){
.page{padding:16px 12px 56px}
.page-title{font-size:22px}
.page-title .editorial{font-size:19px}
.topnav-brand span:last-child{display:none}
}
/* ============================================================
Density modes — compacte / normale / confortable
Modifie le spacing, gaps, et font-size globalement via CSS vars.
data-density appliquée sur par shared.js et settings.html.
============================================================ */
/* Default: normale (comfortable) */
:root {
--ui-pad: 14px; /* padding standard */
--ui-gap: 10px; /* gap standard */
--ui-font-sm: 11.5px; /* small font */
--ui-font-md: 12.5px; /* medium font (labels) */
}
/* Compacte : -40% spacing, -1px font */
html[data-density="compacte"] {
--ui-pad: 8px; /* -43% */
--ui-gap: 6px; /* -40% */
--ui-font-sm: 10.5px; /* -1px */
--ui-font-md: 11.5px; /* -1px */
}
/* Confortable : +40% spacing, +1px font */
html[data-density="confortable"] {
--ui-pad: 20px; /* +43% */
--ui-gap: 14px; /* +40% */
--ui-font-sm: 12.5px; /* +1px */
--ui-font-md: 13.5px; /* +1px */
}
/* Appliquer la densité aux composants clés */
/* Fields et inputs */
.field { gap: var(--ui-gap); margin-bottom: calc(var(--ui-pad) + 4px); }
.field-label { font-size: var(--ui-font-md); }
.field-hint { font-size: var(--ui-font-sm); }
.input, .segment button { padding: var(--ui-pad) var(--ui-pad); font-size: var(--ui-font-md); }
/* Rows et options */
.option-row { padding: var(--ui-pad); gap: var(--ui-gap); }
.option-label { font-size: var(--ui-font-md); }
.option-hint { font-size: var(--ui-font-sm); }
.option-trail { gap: var(--ui-gap); }
/* Grids */
.theme-grid { gap: var(--ui-gap); }
.integ-grid { gap: var(--ui-gap); }
.kbd-grid { gap: var(--ui-gap) 24px; }
/* Spacing général dans sections */
.sec { padding: calc(var(--ui-pad) + 10px) calc(var(--ui-pad) + 12px); }
.sec-head { gap: var(--ui-gap); margin-bottom: calc(var(--ui-pad) + 4px); padding-bottom: var(--ui-pad); }
/* Side nav */
.side-nav { gap: 2px; padding: var(--ui-pad); }
.side-nav a { gap: var(--ui-gap); padding: calc(var(--ui-pad) - 5px) var(--ui-pad); font-size: var(--ui-font-md); }
/* Cards and elements */
.theme-card { padding: var(--ui-pad); }
.integ { padding: var(--ui-pad); gap: var(--ui-gap); }
.swatch { width: calc(32px * 1); height: calc(32px * 1); } /* Optionnel : on peut aussi réduire les boutons */
/* ============================================================ */