/* ============================================================================ AWEMA UI — Design System partagé (tokens + composants) Importé par tous les outils de l'agence (revue-visuels, dashboard, à venir). Esthétique : minimaliste premium · dark mode néon · glassmorphism · bento. Usage : + ========================================================================== */ :root{ /* Dark (défaut) — deep navy + accents électriques */ --bg:#070B14; --bg2:#0A1120; --surface:rgba(255,255,255,.045); --surface-solid:#0E1626; --elev:rgba(255,255,255,.06); --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.13); --tx:#E7ECF7; --muted:#8A98B3; --muted2:#5D6B86; --blue:#4BA3FF; --violet:#7C5CFF; --mint:#34E5C4; --gold:#D4AF37; --pink:#FF7D9C; --amber:#FFC861; --ok:#34E5C4; --warn:#FFC861; --bad:#FF7D9C; --grad:linear-gradient(135deg,#4BA3FF 0%,#7C5CFF 100%); --grad-mint:linear-gradient(135deg,#34E5C4,#4BA3FF); --glass-blur:saturate(160%) blur(16px); --shadow:0 18px 50px -16px rgba(0,0,0,.65); --r:20px; --r-sm:13px; --font:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; --font-disp:'Plus Jakarta Sans','Inter',system-ui,sans-serif; } html[data-theme="light"]{ --bg:#EEF2F9; --bg2:#E7ECF6; --surface:rgba(255,255,255,.72); --surface-solid:#FFFFFF; --elev:rgba(255,255,255,.9); --border:rgba(12,22,45,.09); --border2:rgba(12,22,45,.16); --tx:#0E1626; --muted:#5D6B86; --muted2:#7C8AA6; --shadow:0 18px 44px -18px rgba(20,35,80,.28); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font);color:var(--tx);-webkit-font-smoothing:antialiased; background: radial-gradient(1100px 600px at 82% -8%,rgba(124,92,255,.16),transparent 60%), radial-gradient(900px 600px at 0% 0%,rgba(75,163,255,.14),transparent 55%), var(--bg);} h1,h2,h3,.disp{font-family:var(--font-disp);letter-spacing:-.02em} a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;color:inherit} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:20px} ::-webkit-scrollbar-track{background:transparent} /* ---- Boutons ---- */ .btn,.iconbtn,.btn-cta,.ghost{cursor:pointer;border-radius:12px;border:1px solid var(--border); background:var(--surface);transition:.18s;font-size:13.5px;font-weight:600;display:inline-flex; align-items:center;gap:8px;justify-content:center} .btn{padding:9px 14px}.btn:hover,.ghost:hover{border-color:var(--border2);transform:translateY(-1px)} .ghost{padding:9px 13px;background:transparent;color:var(--muted);font-weight:500} .iconbtn{width:40px;height:40px;padding:0}.iconbtn:hover{border-color:var(--border2);transform:translateY(-1px)} .iconbtn svg,.btn svg,.btn-cta svg{width:18px;height:18px} .btn-cta{padding:10px 15px;border:none;background:var(--grad);color:#fff; box-shadow:0 10px 24px -8px rgba(124,92,255,.6)} .btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(124,92,255,.75)} .mini{font-size:11.5px;padding:7px 10px;border-radius:9px;border:1px solid var(--border); background:var(--elev);color:var(--tx);cursor:pointer;transition:.16s;font-weight:500} .mini:hover{border-color:var(--blue)} .mini.gold{background:var(--grad);color:#fff;border:none;font-weight:600} /* ---- Cartes / glass ---- */ .card,.glass{position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--r);box-shadow:var(--shadow); backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)} .card{padding:18px;transition:transform .2s ease,border-color .2s} .card:hover{transform:translateY(-3px);border-color:var(--border2)} /* ---- Chips / tags / badges ---- */ .chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px} .chip.up{color:#0a1a14;background:var(--mint)}.chip.down{color:#1a0a10;background:var(--pink)} .tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);padding:2px 7px;border-radius:7px} .badge{font-size:10px;padding:2px 9px;border-radius:20px;border:1px solid var(--border2);color:var(--muted)} /* ---- Champs de formulaire ---- */ .field,input.field,select.field,textarea.field{width:100%;background:var(--elev);color:var(--tx); border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:13px;outline:none;transition:.16s} .field:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(75,163,255,.18)} textarea.field{resize:vertical;min-height:60px} label.lbl{font-size:11px;color:var(--muted);display:block;margin:8px 0 4px} /* ---- Skeleton + apparition ---- */ .sk{position:relative;overflow:hidden;background:var(--elev);border-radius:10px} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:awema-shim 1.25s infinite} @keyframes awema-shim{100%{transform:translateX(100%)}} .fade{animation:awema-fade .5s ease both}@keyframes awema-fade{from{opacity:0;transform:translateY(6px)}} /* ---- Toast ---- */ .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px); background:var(--surface-solid);border:1px solid var(--border2);color:var(--tx);padding:11px 18px; border-radius:12px;font-size:13px;font-weight:500;box-shadow:var(--shadow);opacity:0;transition:.3s; z-index:120;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---- Palette de commande (Command+K) ---- */ .cmd-ov{position:fixed;inset:0;background:rgba(4,7,14,.55);backdrop-filter:blur(6px);z-index:100; display:none;align-items:flex-start;justify-content:center;padding-top:12vh} .cmd-ov.on{display:flex} .cmd{width:min(640px,92vw);background:var(--surface-solid);border:1px solid var(--border2);border-radius:18px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);overflow:hidden;animation:awema-pop .18s ease both} @keyframes awema-pop{from{opacity:0;transform:scale(.97) translateY(-8px)}} .cmd .in{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--border)} .cmd .in input{flex:1;background:none;border:none;outline:none;font-size:16px} .cmd .res{max-height:50vh;overflow:auto;padding:8px} .cmd .r{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;cursor:pointer;font-size:13.5px} .cmd .r.sel,.cmd .r:hover{background:var(--elev)} .cmd .r .k{margin-left:auto;font-size:11px;color:var(--muted)} .cmd .r small{color:var(--muted)} /* ---- Bento ---- */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-rows:minmax(10px,auto)} .col3{grid-column:span 3}.col4{grid-column:span 4}.col5{grid-column:span 5} .col6{grid-column:span 6}.col7{grid-column:span 7}.col8{grid-column:span 8}.col12{grid-column:span 12} @media(max-width:980px){.col3,.col4,.col5{grid-column:span 6}.col6,.col7,.col8{grid-column:span 12}} @media(max-width:560px){.col3,.col4,.col5,.col6{grid-column:span 12}}