';
/* ═══════════════════════════════════════════════════════
VERANOT DESIGN SYSTEM v4
Couleurs officielles: Bleu #00AEEF · Blanc · Gris #6D6E71
3 thèmes: veranot (défaut) · light · dark
Adaptation automatique au système OS/navigateur
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
VERANOT — SYSTÈME DE THÈMES COMPLET
Mode Veranot (défaut) :
• Contenu : fond blanc/gris clair · texte bleu marine
• Sidebar : fond BLEU #00AEEF · texte BLANC
Mode Light (système clair) :
• Contenu : fond blanc pur · texte gris foncé
• Sidebar : fond gris ardoise #1e293b · texte blanc
Mode Dark (système sombre) :
• Contenu : fond marine profond · texte bleu clair
• Sidebar : fond noir #07111c · texte bleu pâle
Le mode se détecte automatiquement depuis l'OS/navigateur
(prefers-color-scheme). Le bouton dans la topbar permet
de forcer un mode manuellement.
═══════════════════════════════════════════════════════════════════ */
/* ─── AUTO-DETECT OS: si aucun data-theme défini ─────────────────── */
@media (prefers-color-scheme: light) {
html:not([data-theme]) {
/* Contenu clair */
--bg:#f0f6fb; --bg2:#ffffff; --bg3:#e4f0f9; --bg4:#d6e8f5;
--card:#ffffff; --card2:#f5f9fd;
--b1:rgba(0,174,239,.16); --b2:rgba(0,174,239,.28);
--b3:rgba(0,55,90,.09); --b4:rgba(0,55,90,.04);
--shadow:0 2px 16px rgba(0,100,160,.08);
--shadow-lg:0 8px 40px rgba(0,100,160,.13);
--text:#07111c; --text2:#355e7a; --text3:#7aaabb;
/* Sidebar bleue Veranot · tout blanc */
--sidebar:#00AEEF;
--sb-border:rgba(255,255,255,.30);
--sb-lbl:rgba(255,255,255,.70);
--sb-text:#ffffff;
--sb-text-on:#ffffff;
--sb-item-hover:rgba(255,255,255,.18);
--sb-item-on:rgba(0,0,0,.20);
--sb-uc-bg:rgba(0,0,0,.18);
--sb-logo-bar:rgba(255,255,255,.30);
}
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
/* Contenu sombre */
--bg:#07111c; --bg2:#0d1e2e; --bg3:#132840; --bg4:#1a3355;
--card:#0f1d2c; --card2:#152233;
--b1:rgba(0,174,239,.15); --b2:rgba(0,174,239,.25);
--b3:rgba(255,255,255,.07); --b4:rgba(255,255,255,.04);
--shadow:0 2px 16px rgba(0,0,0,.4);
--shadow-lg:0 8px 40px rgba(0,0,0,.5);
--text:#e8f4ff; --text2:#7ea8c4; --text3:#3d6880;
/* Sidebar noire */
--sidebar:#07111c;
--sb-border:rgba(0,174,239,.13);
--sb-lbl:#2d5a70;
--sb-text:#5a90aa;
--sb-text-on:#c8e8ff;
--sb-item-hover:rgba(0,174,239,.09);
--sb-item-on:rgba(0,174,239,.2);
--sb-uc-bg:rgba(0,174,239,.07);
--sb-logo-bar:rgba(0,174,239,.18);
}
}
/* ─── THÈME VERANOT (bouton 🔵, défaut manuel) ────────────────────── */
[data-theme="veranot"] {
/* Contenu : fond clair bleuté, typique Veranot */
--bg: #f0f6fb;
--bg2: #ffffff;
--bg3: #e4f0f9;
--bg4: #d6e8f5;
--card: #ffffff;
--card2: #f5f9fd;
--b1: rgba(0,174,239,.16);
--b2: rgba(0,174,239,.28);
--b3: rgba(0,55,90,.09);
--b4: rgba(0,55,90,.04);
--shadow: 0 2px 16px rgba(0,100,160,.08);
--shadow-lg: 0 8px 40px rgba(0,100,160,.13);
--text: #07111c;
--text2: #355e7a;
--text3: #7aaabb;
/* Sidebar : fond bleu Veranot #00AEEF · tout en blanc pur */
--sidebar: #00AEEF;
--sb-border: rgba(255,255,255,.30);
--sb-lbl: rgba(255,255,255,.70);
--sb-text: #ffffff;
--sb-text-on: #ffffff;
--sb-item-hover: rgba(255,255,255,.18);
--sb-item-on: rgba(0,0,0,.20);
--sb-uc-bg: rgba(0,0,0,.18);
--sb-logo-bar: rgba(255,255,255,.30);
}
/* ─── THÈME LIGHT (bouton ☀️) ─────────────────────────────────────── */
[data-theme="light"] {
/* Contenu : fond blanc pur, texte gris foncé */
--bg: #f8fafc;
--bg2: #ffffff;
--bg3: #f0f4f8;
--bg4: #e2eaf2;
--card: #ffffff;
--card2: #f8fafc;
--b1: rgba(0,174,239,.14);
--b2: rgba(0,174,239,.24);
--b3: rgba(0,0,0,.07);
--b4: rgba(0,0,0,.03);
--shadow: 0 2px 12px rgba(0,0,0,.06);
--shadow-lg: 0 8px 32px rgba(0,0,0,.09);
--text: #0f172a;
--text2: #475569;
--text3: #94a3b8;
/* Sidebar : gris ardoise foncé · texte blanc */
--sidebar: #1e293b;
--sb-border: rgba(255,255,255,.09);
--sb-lbl: rgba(255,255,255,.38);
--sb-text: rgba(255,255,255,.65);
--sb-text-on: #ffffff;
--sb-item-hover: rgba(255,255,255,.08);
--sb-item-on: rgba(0,174,239,.25);
--sb-uc-bg: rgba(255,255,255,.07);
--sb-logo-bar: rgba(255,255,255,.1);
}
/* ─── THÈME DARK (bouton 🌙) ──────────────────────────────────────── */
[data-theme="dark"] {
/* Contenu : fond marine profond */
--bg: #07111c;
--bg2: #0d1e2e;
--bg3: #132840;
--bg4: #1a3355;
--card: #0f1d2c;
--card2: #152233;
--b1: rgba(0,174,239,.15);
--b2: rgba(0,174,239,.25);
--b3: rgba(255,255,255,.07);
--b4: rgba(255,255,255,.04);
--shadow: 0 2px 16px rgba(0,0,0,.4);
--shadow-lg: 0 8px 40px rgba(0,0,0,.5);
--text: #e8f4ff;
--text2: #7ea8c4;
--text3: #3d6880;
/* Sidebar : fond noir profond · texte bleu pâle */
--sidebar: #07111c;
--sb-border: rgba(0,174,239,.13);
--sb-lbl: #2d5a70;
--sb-text: #5a90aa;
--sb-text-on: #c8e8ff;
--sb-item-hover: rgba(0,174,239,.09);
--sb-item-on: rgba(0,174,239,.2);
--sb-uc-bg: rgba(0,174,239,.07);
--sb-logo-bar: rgba(0,174,239,.18);
}
/* ── BRAND CONSTANTS (never change) ── */
:root {
--vb: #00AEEF;
--vb2: #0096cc;
--vb3: #33c9ff;
--vbd: rgba(0,174,239,.12);
--vg: #6D6E71;
--vg2: #8a8b8e;
--vw: #ffffff;
--green: #22c55e;
--gd: rgba(34,197,94,.12);
--amber: #f59e0b;
--ad: rgba(245,158,11,.12);
--gold: #f5b800;
--gold2: #ffd54f;
--goldd: rgba(245,184,0,.14);
--red: #ef4444;
--rd: rgba(239,68,68,.12);
--purp: #a78bfa;
--pd: rgba(167,139,250,.12);
--mono: 'JetBrains Mono', 'Courier New', monospace;
--font: 'Sora', 'Segoe UI', Arial, sans-serif;
--r: 8px;
--rl: 14px;
--rxl: 20px;
}
/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{
font-family:var(--font);
background:var(--bg);
color:var(--text);
font-size:14px;
line-height:1.6;
height:100%;
overflow:hidden;
transition:background .3s, color .3s;
}
/* All themed elements transition smoothly */
*, *::before, *::after {
transition-property: background-color, border-color, color, box-shadow;
transition-duration: .25s;
transition-timing-function: ease;
}
/* But NOT layout-affecting properties */
.ni, .card, .btn, input, select, textarea {
transition: all .15s ease;
}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}
/* ═══════════════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════════════ */
.app{display:flex;height:100vh;overflow:hidden;}
/* ═══════════════════════════════════════════════════════
SIDEBAR — Fond bleu Veranot (thème défaut), adaptatif
Texte blanc. Barre horizontale sous le logo.
═══════════════════════════════════════════════════════ */
.sidebar{
width:230px; min-width:230px;
background: var(--sidebar);
border-right: 1px solid var(--sb-border);
display: flex; flex-direction: column;
transition: background .3s, border-color .3s;
box-shadow: 2px 0 16px rgba(0,0,0,.08);
}
/* ── Zone logo ── */
.sb-head{
padding: 0;
display: flex; flex-direction: column;
flex-shrink: 0;
}
.sb-logo-inner{
display: flex; align-items: center; gap: 10px;
padding: 18px 16px 16px;
}
/* Barre décorative sous le logo */
.sb-logo-bar{
height: 2px;
background: var(--sb-logo-bar);
margin: 0 0 0 0;
flex-shrink: 0;
}
/* Logo SVG */
.vlogo{ display: flex; align-items: center; gap: 10px; }
.vlogo img{ height:44px;width:auto;transition:filter .3s; }
/* Light theme: show original logo colors on white sidebar */
[data-theme="light"] .vlogo img { filter: none!important; }
/* Dark theme: white logo on dark sidebar */
[data-theme="dark"] .vlogo img { filter: brightness(0) invert(.7) sepia(1) saturate(3) hue-rotate(170deg)!important; }
/* Veranot theme: white logo on blue sidebar */
[data-theme="veranot"] .vlogo img { filter: brightness(0) invert(1)!important; }
.vlogo-text{
font-size: 18px; font-weight: 800;
color: #ffffff;
letter-spacing: -0.5px;
opacity: 1;
font-family: var(--font);
}
.vlogo-dot{ /* Point coloré après le nom */
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,.5);
flex-shrink: 0;
align-self: center;
}
/* ── Navigation ── */
.sb-nav{
flex: 1; overflow-y: auto;
padding: 14px 10px 8px;
}
.sb-nav::-webkit-scrollbar{ width: 3px; }
.sb-nav::-webkit-scrollbar-thumb{ background: var(--sb-border); border-radius: 2px; }
.sb-sec{ margin-bottom: 6px; }
.sb-lbl{
font-family: var(--mono); font-size: 9px; font-weight: 700;
color: var(--sb-lbl);
text-transform: uppercase; letter-spacing: 1.8px;
padding: 10px 10px 5px;
display: block;
/* toujours bien lisible sur fond coloré */
text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.ni{
display: flex; align-items: center; gap: 9px;
padding: 9px 11px;
border-radius: 9px;
cursor: pointer;
color: var(--sb-text);
font-size: 12.5px; font-weight: 600;
transition: all .15s;
border: 1px solid transparent;
margin-bottom: 2px;
letter-spacing: .01em;
}
.ni:hover{
background: var(--sb-item-hover);
color: var(--sb-text-on);
border-color: rgba(255,255,255,.15);
}
.ni.on{
background: var(--sb-item-on);
color: #ffffff;
font-weight: 700;
border-color: rgba(255,255,255,.18);
box-shadow: 0 2px 8px rgba(0,0,0,.2);
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* Active item: barre gauche colorée */
.ni.on::before{
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; border-radius: 0 3px 3px 0;
background: rgba(255,255,255,.7);
}
.ni{ position: relative; }
.ni.star-on{
background: rgba(245,184,0,.2);
color: var(--gold2);
border-color: rgba(245,184,0,.25);
}
.ni-ic{
font-size: 14px; width: 18px; text-align: center;
flex-shrink: 0; opacity: .9;
}
.ni-badge{
margin-left: auto;
background: var(--red); color: #fff;
font-family: var(--mono); font-size: 9px;
padding: 1px 6px; border-radius: 8px; font-weight: 700;
}
.ni-badge-g{ background: var(--gold); color: #07111c; }
.ni-badge-b{ background: rgba(255,255,255,.25); color: var(--sb-text-on); }
/* ── Séparateur section ── */
.sb-sep{
height: 1px;
background: var(--sb-border);
margin: 8px 10px;
}
/* ── User card en bas ── */
.sb-user{
padding: 12px;
border-top: 1px solid var(--sb-border);
flex-shrink: 0;
}
.sb-uc{
display: flex; align-items: center; gap: 9px;
padding: 9px 10px;
background: var(--sidebar2);
border-radius: 10px;
border: 1px solid var(--sb-border);
transition: background .3s;
}
.sbu-av{
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; flex-shrink: 0;
border: 2px solid rgba(255,255,255,.25);
}
.sbu-name{ font-size: 12px; font-weight: 700; color: #ffffff; }
.sbu-role{ font-size: 10px; color: rgba(255,255,255,.75); margin-top: 1px; }
.sbu-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
margin-left: auto; flex-shrink: 0;
border: 1.5px solid rgba(255,255,255,.3);
box-shadow: 0 0 6px rgba(34,197,94,.5);
}
/* ═══════════════════════════════════════════════════════
TOPBAR
═══════════════════════════════════════════════════════ */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{
height:54px;
background:var(--card);
border-bottom:1px solid var(--b3);
display:flex;align-items:center;padding:0 22px;gap:14px;
flex-shrink:0;
box-shadow:var(--shadow);
transition:background .3s,border-color .3s;
}
.pg-title{font-size:14px;font-weight:700;color:var(--text);}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
/* Search */
.sbar{
display:flex;align-items:center;gap:7px;
background:var(--bg3);border:1px solid var(--b3);
border-radius:var(--r);padding:6px 11px;max-width:220px;
transition:border .15s,background .3s;
}
.sbar:focus-within{border-color:var(--vb);}
.sbar input{background:none;border:none;color:var(--text);font-family:var(--font);font-size:12px;outline:none;width:160px;}
.sbar input::placeholder{color:var(--text3);}
/* Theme switcher */
.theme-switcher{
display:flex;gap:2px;background:var(--bg3);
border:1px solid var(--b3);border-radius:7px;padding:2px;
transition:background .3s,border-color .3s;
}
.th-btn{
width:26px;height:26px;border-radius:5px;border:none;
background:transparent;cursor:pointer;font-size:13px;
display:flex;align-items:center;justify-content:center;
transition:all .15s;
}
.th-btn.on{background:var(--vb);box-shadow:0 2px 8px rgba(0,174,239,.3);}
.th-btn:hover:not(.on){background:var(--b3);}
.ic-btn{
width:32px;height:32px;border-radius:var(--r);
background:var(--bg3);border:1px solid var(--b3);
display:flex;align-items:center;justify-content:center;
cursor:pointer;font-size:14px;position:relative;
transition:background .3s,border-color .15s;
}
.ic-btn:hover{border-color:var(--vb);}
.ic-btn .dot{position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--red);border-radius:50%;border:1.5px solid var(--card);}
/* Lang bar */
.lang-row{display:flex;gap:3px;}
.lc{
padding:4px 8px;border-radius:5px;font-family:var(--mono);font-size:10px;font-weight:600;
cursor:pointer;border:1px solid var(--b3);background:transparent;color:var(--text3);
transition:all .15s;font-family:var(--font);
}
.lc.on{background:var(--vb);color:#fff;border-color:var(--vb);}
.lc:hover:not(.on){border-color:var(--vb);color:var(--vb);}
.pc{flex:1;overflow-y:auto;padding:22px;}
/* ═══════════════════════════════════════════════════════
DESIGN COMPONENTS
═══════════════════════════════════════════════════════ */
/* Cards */
.card{
background:var(--card);border:1px solid var(--b3);border-radius:var(--rl);
transition:background .3s,border-color .15s,box-shadow .15s;
}
.card:hover{border-color:var(--b2);}
.cp{padding:18px;}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.ct{font-size:13px;font-weight:800;color:var(--text);}
/* Metric card with gradient top accent */
.mc{
background:var(--card);border:1px solid var(--b3);
border-radius:var(--rl);padding:18px;position:relative;overflow:hidden;
transition:all .2s;
}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--rl) var(--rl) 0 0;}
.mc-b::before{background:var(--vb);}
.mc-g::before{background:var(--green);}
.mc-r::before{background:var(--red);}
.mc-a::before{background:var(--amber);}
.mc-gold::before{background:var(--gold);}
.ml{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:8px;font-weight:600;}
.mv{font-size:28px;font-weight:800;line-height:1;font-family:var(--mono);color:var(--text);}
.mv-b{color:var(--vb);} .mv-g{color:var(--green);}
.mv-r{color:var(--red);} .mv-a{color:var(--amber);} .mv-gold{color:var(--gold2);}
.mtr{display:inline-flex;align-items:center;gap:3px;font-size:10px;margin-top:6px;padding:2px 6px;border-radius:4px;font-weight:600;}
.tr-up{background:var(--gd);color:var(--green);}
.tr-dn{background:var(--rd);color:var(--red);}
.tr-eq{background:var(--b3);color:var(--text3);}
/* Grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mb{margin-bottom:14px;} .mb2{margin-bottom:20px;}
/* Pills */
.pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;}
.p-g{background:var(--gd);color:var(--green);}
.p-b{background:var(--vbd);color:var(--vb);}
.p-a{background:var(--ad);color:var(--amber);}
.p-r{background:var(--rd);color:var(--red);}
.p-gold{background:var(--goldd);color:var(--gold2);}
.p-x{background:var(--b3);color:var(--text2);}
.pdot{width:4px;height:4px;border-radius:50%;background:currentColor;}
.vbadge{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;background:var(--vbd);color:var(--vb);font-size:9px;font-weight:700;margin-left:5px;}
/* Level badges */
.lv{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;}
.lv-pt{background:rgba(229,228,226,.12);color:#aab0b8;border:1px solid rgba(180,180,180,.25);}
.lv-go{background:var(--goldd);color:var(--gold2);border:1px solid rgba(245,184,0,.28);}
.lv-si{background:rgba(192,192,192,.1);color:var(--text2);border:1px solid var(--b3);}
.lv-br{background:rgba(205,127,50,.1);color:#cd7f32;border:1px solid rgba(205,127,50,.22);}
.lv-nw{background:var(--vbd);color:var(--vb);border:1px solid var(--b1);}
/* Category A-F */
.cat{font-size:10px;font-weight:800;padding:3px 8px;border-radius:5px;}
.cA{background:var(--gd);color:var(--green);}
.cB{background:var(--ad);color:var(--amber);}
.cC{background:var(--vbd);color:var(--vb);}
.cD{background:var(--rd);color:var(--red);}
.cE{background:rgba(239,68,68,.18);color:#ff8080;}
.cF{background:rgba(239,68,68,.25);color:#ffaaaa;}
/* Actor badges */
.abadge{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;}
.ab-ok{background:var(--gd);color:var(--green);border:1px solid rgba(34,197,94,.2);}
.ab-ko{background:var(--rd);color:var(--red);border:1px solid rgba(239,68,68,.2);}
/* Progress bar */
.pb{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.pb-fill{height:100%;border-radius:3px;transition:width 1.2s cubic-bezier(.4,0,.2,1);}
.pbf-b{background:linear-gradient(90deg,var(--vb2),var(--vb3));}
.pbf-g{background:linear-gradient(90deg,#16a34a,var(--green));}
.pbf-r{background:linear-gradient(90deg,#b91c1c,var(--red));}
.pbf-a{background:linear-gradient(90deg,#b45309,var(--amber));}
.pbf-gold{background:linear-gradient(90deg,#c8900a,var(--gold),var(--gold2));}
.pbf-e{background:linear-gradient(90deg,#991111,#ff8080);}
.pbf-f{background:linear-gradient(90deg,#660000,#ffaaaa);}
/* Gauge big */
.gauge-wrap{margin:10px 0;}
.gauge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.gauge-lbl{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.7px;}
.gauge-pct{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--vb);}
.gauge-track{height:10px;background:var(--bg3);border-radius:5px;overflow:hidden;}
.gauge-fill{height:100%;border-radius:5px;transition:width 1.2s cubic-bezier(.4,0,.2,1);}
.gauge-steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.gst{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3);}
.gsd{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.gsd-ok{background:var(--green);}
.gsd-act{background:var(--amber);animation:pulse 1.5s infinite;}
.gsd-wait{background:var(--bg4);border:1px solid var(--b3);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
/* Buttons */
.btn{padding:6px 13px;border-radius:7px;font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--b3);background:transparent;color:var(--text2);transition:all .15s;}
.btn:hover{background:var(--bg3);color:var(--text);border-color:var(--b2);}
.btn-blue{background:var(--vb);color:#fff;border-color:var(--vb);}
.btn-blue:hover{background:var(--vb2);}
.btn-gold{background:var(--gold);color:#07111c;border-color:var(--gold);}
.btn-gold:hover{background:#e5a800;}
.btn-green{background:var(--green);color:#fff;border-color:var(--green);}
.btn-red{background:var(--rd);color:var(--red);border-color:rgba(239,68,68,.3);}
.btn-full{width:100%;padding:13px;border-radius:var(--r);border:none;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-full-vb{background:var(--vb);color:#fff;}
.btn-full-vb:hover{background:var(--vb2);}
/* Track code */
.tcode{font-family:var(--mono);font-size:11px;color:var(--vb);background:var(--vbd);padding:2px 7px;border-radius:4px;display:inline-block;}
/* Data table */
.dt{width:100%;border-collapse:collapse;}
.dt th{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);padding:8px 12px;text-align:left;border-bottom:1px solid var(--b3);font-weight:600;background:var(--bg3);}
.dt td{padding:10px 12px;border-bottom:1px solid var(--b3);font-size:12px;vertical-align:middle;color:var(--text);}
.dt tr:last-child td{border-bottom:none;}
.dt tr:hover td{background:var(--bg4);}
/* Tabs */
.tabs{display:flex;background:var(--bg3);border-radius:var(--r);padding:3px;}
.tab{flex:1;padding:7px;text-align:center;border-radius:6px;font-size:12px;cursor:pointer;color:var(--text3);transition:all .15s;font-weight:600;}
.tab.on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.1);}
/* Timeline */
.tl{position:relative;padding-left:26px;}
.tl::before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:1px;background:var(--b3);}
.tl-item{position:relative;margin-bottom:14px;}
.tl-dot{position:absolute;left:-26px;top:2px;width:16px;height:16px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:8px;background:var(--card);}
.tld-ok{border-color:var(--green);color:var(--green);}
.tld-act{border-color:var(--amber);color:var(--amber);animation:pulse 1.5s infinite;}
.tld-wait{border-color:var(--b3);color:var(--text3);}
.tl-t{font-size:12px;font-weight:600;color:var(--text);}
.tl-s{font-size:11px;color:var(--text3);}
.tl-d{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:2px;}
/* Modal */
.modal-bg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--b2);border-radius:var(--rxl);padding:32px;width:460px;max-width:95vw;max-height:90vh;overflow-y:auto;animation:mIn .22s ease;box-shadow:var(--shadow-lg);}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.97)}}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.modal-title{font-size:16px;font-weight:800;color:var(--text);}
.modal-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.close-x{margin-left:auto;width:28px;height:28px;border-radius:7px;background:var(--bg3);border:1px solid var(--b3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--text2);}
/* Form */
.ff{margin-bottom:14px;}
.ff label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:5px;font-weight:600;}
.ff input,.ff select,.ff textarea{width:100%;background:var(--bg3);border:1px solid var(--b3);border-radius:var(--r);padding:10px 13px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border .15s;}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--vb);}
.ff select option{background:var(--card);}
.ff textarea{resize:none;}
/* Avatar menu items */
.av-mi{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--text2);transition:all .1s;margin-bottom:1px;}
.av-mi:hover{background:var(--bg3);color:var(--text);}
/* Toast */
.toast{position:fixed;top:66px;right:18px;z-index:3000;background:var(--card);border:1px solid var(--b2);border-radius:var(--rl);padding:13px 16px;width:300px;display:none;animation:tIn .25s ease;box-shadow:var(--shadow-lg);}
.toast.open{display:block;}
@keyframes tIn{from{opacity:0;transform:translateX(14px)}}
.toast-title{font-size:13px;font-weight:700;margin-bottom:3px;color:var(--text);}
.toast-body{font-size:12px;color:var(--text2);line-height:1.5;}
/* Notif panel */
.notif-panel{position:fixed;top:54px;right:0;z-index:500;width:320px;height:calc(100vh - 54px);background:var(--card);border-left:1px solid var(--b3);transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.notif-panel.open{transform:translateX(0);}
.np-head{padding:16px;border-bottom:1px solid var(--b3);display:flex;align-items:center;justify-content:space-between;}
.notif-item{display:flex;gap:9px;padding:11px 14px;border-bottom:1px solid var(--b3);cursor:pointer;transition:background .1s;}
.notif-item:hover{background:var(--bg3);}
.notif-item.unread{background:rgba(0,174,239,.04);}
.ni2-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.ni2-text{font-size:12px;line-height:1.5;color:var(--text);}
.ni2-time{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:2px;}
/* Map box */
.map-box{background:var(--bg3);border-radius:var(--r);overflow:hidden;position:relative;}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,174,239,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,174,239,.04) 1px,transparent 1px);background-size:20px 20px;}
.map-svg{width:100%;height:100%;}
/* Upload zone */
.uzone{border:2px dashed var(--b2);border-radius:var(--rl);padding:20px;text-align:center;cursor:pointer;transition:border .15s;}
.uzone:hover{border-color:var(--vb);}
/* Doc flow item */
.dfi{display:flex;align-items:center;gap:9px;padding:9px;border-radius:var(--r);border:1px solid var(--b3);margin-bottom:6px;cursor:pointer;transition:all .15s;background:var(--card);}
.dfi:hover{border-color:var(--b2);}
.dfi.done{border-color:rgba(34,197,94,.2);background:rgba(34,197,94,.03);}
.dfi.active{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.04);}
.dfi-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.dfi-ic-g{background:var(--gd);}
.dfi-ic-a{background:var(--ad);}
.dfi-ic-x{background:var(--b3);}
.dfi-t{font-size:12px;font-weight:600;color:var(--text);}
.dfi-s{font-size:10px;color:var(--text3);}
/* Profile hero */
.ph{background:var(--card);border:1px solid var(--b3);border-radius:var(--rl);overflow:hidden;margin-bottom:14px;}
.ph-banner{height:80px;background:linear-gradient(135deg,var(--vb2),var(--vb),var(--vb3));position:relative;overflow:hidden;}
.ph-banner::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 50%,rgba(255,255,255,.15) 0%,transparent 60%);}
.ph-body{padding:0 18px 16px;}
.ph-logo{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;margin-top:-28px;margin-bottom:9px;border:3px solid var(--card);}
.ph-name{font-size:18px;font-weight:800;color:var(--text);}
.ph-tag{font-size:12px;color:var(--text3);margin:2px 0 10px;}
.ph-stats{display:flex;gap:22px;}
.ph-sv{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--vb);}
.ph-sl{font-size:10px;color:var(--text3);}
/* Feed */
.fp{background:var(--card);border:1px solid var(--b3);border-radius:var(--rl);padding:16px;margin-bottom:12px;transition:border .15s;}
.fp:hover{border-color:var(--b2);}
.fp-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.fp-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}
.fp-name{font-size:13px;font-weight:700;color:var(--text);}
.fp-meta{font-size:11px;color:var(--text3);}
.fp-follow{margin-left:auto;padding:5px 12px;border-radius:6px;border:1px solid var(--b2);background:transparent;color:var(--vb);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s;}
.fp-follow:hover{background:var(--vbd);}
.fp-content{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:10px;}
.fp-tags{margin-bottom:10px;}
.fp-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;background:var(--vbd);color:var(--vb);margin-right:4px;}
.fp-actions{display:flex;gap:18px;padding-top:9px;border-top:1px solid var(--b3);}
.fp-act{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3);cursor:pointer;border:none;background:none;font-family:var(--font);transition:color .15s;}
.fp-act:hover{color:var(--vb);}
/* ═══════════════════════════════════════════════════════
SCORE SYSTEM — Automatique depuis catégories A-F
═══════════════════════════════════════════════════════ */
/* Points par catégorie (affiché dans l'UI) */
.score-legend{
background:var(--bg3);border:1px solid var(--b3);
border-radius:var(--rl);padding:14px;margin-bottom:16px;
}
.score-legend-title{font-size:11px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;}
.sl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.sl-item{text-align:center;padding:8px 4px;border-radius:8px;background:var(--card);}
.sl-cat{font-size:11px;font-weight:800;margin-bottom:3px;}
.sl-pts{font-family:var(--mono);font-size:14px;font-weight:700;}
.sl-desc{font-size:9px;color:var(--text3);margin-top:2px;line-height:1.3;}
/* Score ring */
.score-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.score-ring{position:relative;width:120px;height:120px;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.srn-val{font-family:var(--mono);font-size:22px;font-weight:800;color:var(--text);line-height:1;}
.srn-max{font-size:10px;color:var(--text3);margin-top:2px;}
.score-stars{display:flex;gap:2px;}
.sstar{font-size:16px;}
.sstar-f{color:var(--gold);}
.sstar-e{color:var(--b3);}
/* Score breakdown bar */
.score-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.sbr-cat{min-width:48px;}
.sbr-label{font-size:11px;color:var(--text2);flex:1;}
.sbr-count{font-family:var(--mono);font-size:11px;color:var(--text3);min-width:40px;text-align:right;}
.sbr-pts{font-family:var(--mono);font-size:12px;font-weight:700;min-width:50px;text-align:right;}
/* Ranking position */
.rank-badge{
display:inline-flex;align-items:center;gap:6px;
padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;
background:var(--goldd);color:var(--gold2);border:1px solid rgba(245,184,0,.28);
}
/* Leaderboard */
.lb-head{display:grid;grid-template-columns:44px 1fr 100px 80px 80px 80px;gap:10px;padding:8px 12px;background:var(--bg3);border-radius:10px 10px 0 0;font-family:var(--mono);font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;}
.lb-row{display:grid;grid-template-columns:44px 1fr 100px 80px 80px 80px;gap:10px;padding:10px 12px;background:var(--card);border-bottom:1px solid var(--b3);align-items:center;transition:background .15s;cursor:pointer;}
.lb-row:hover{background:var(--bg4);}
.lb-row:last-child{border-bottom:none;border-radius:0 0 10px 10px;}
.lb-rank{font-family:var(--mono);font-size:15px;font-weight:700;text-align:center;}
.rank-1{color:var(--gold2);} .rank-2{color:#c0c0c0;} .rank-3{color:#cd7f32;} .rank-n{color:var(--text3);}
.lb-co{display:flex;align-items:center;gap:8px;}
.lb-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;}
.lb-name{font-size:12px;font-weight:700;color:var(--text);}
.lb-role{font-size:10px;color:var(--text3);}
.lb-score{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gold2);}
.lb-pts{font-family:var(--mono);font-size:12px;color:var(--text2);}
.lb-trend{font-family:var(--mono);font-size:12px;font-weight:700;}
.tr-up2{color:var(--green);} .tr-dn2{color:var(--red);} .tr-eq2{color:var(--text3);}
/* ── RAPPORT EXPORTS ── */
.report-btn {
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;
cursor:pointer;border:none;font-family:var(--font);transition:all .2s;
}
.rb-pdf { background:#ef4444;color:#fff; }
.rb-xls { background:#22c55e;color:#fff; }
.rb-csv { background:#6D6E71;color:#fff; }
.rb-word { background:#2563eb;color:#fff; }
.rb-pdf:hover { background:#dc2626;transform:translateY(-1px); }
.rb-xls:hover { background:#16a34a;transform:translateY(-1px); }
.rb-csv:hover { background:#4b5563;transform:translateY(-1px); }
.rb-word:hover { background:#1d4ed8;transform:translateY(-1px); }
.report-header {
background:linear-gradient(135deg,var(--vb2),var(--vb));
border-radius:var(--rl);padding:18px 22px;margin-bottom:16px;
display:flex;align-items:center;gap:14px;
}
.report-section { margin-bottom:20px; }
.report-section-title {
font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:1.2px;color:var(--text3);margin-bottom:10px;
display:flex;align-items:center;gap:8px;
}
.report-section-title::after{content:'';flex:1;height:1px;background:var(--b3);}
@media print {
.sidebar,.topbar,.nb-btn { display:none!important; }
.pc { padding:0!important; }
body { background:#fff!important; }
}
/* Responsive */
@media(max-width:768px){
.sidebar{display:none;}
.g4{grid-template-columns:repeat(2,1fr);}
.g3,.g2{grid-template-columns:1fr;}
.lb-head,.lb-row{grid-template-columns:36px 1fr 80px 70px;}
.lb-head>*:nth-child(n+5),.lb-row>*:nth-child(n+5){display:none;}
}
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .3s ease both;}
.a1{animation-delay:.05s;} .a2{animation-delay:.10s;}
.a3{animation-delay:.15s;} .a4{animation-delay:.20s;}
veranot
