/* =============================================
   POSEIDON — Intranet — CSS v4
   Glassmorphisme / OS moderne lumineux
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────
   VARIABLES GLOBALES
───────────────────────────────────────────── */
:root {
    /* Primaire */
    --primary:        #f43f5e;
    --primary-dark:   #e11d48;
    --primary-glow:   rgba(244,63,94,0.25);
    --primary-ghost:  rgba(244,63,94,0.10);

    /* Glassmorphisme clair — chrome système */
    --glass:          rgba(255,255,255,0.72);
    --glass-high:     rgba(255,255,255,0.88);
    --glass-low:      rgba(255,255,255,0.50);
    --glass-border:   rgba(255,255,255,0.75);
    --glass-inner:    rgba(0,0,0,0.06);
    --glass-inner-2:  rgba(0,0,0,0.04);

    /* Texte sur verre clair */
    --chrome-text:     #1e1b4b;
    --chrome-text-dim: rgba(30,27,75,0.55);
    --chrome-text-off: rgba(30,27,75,0.38);
    --chrome-shadow:   0 24px 80px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.75);

    /* Contenu app (zones sombres à l'intérieur des fenêtres) */
    --app-bg:         rgba(12,12,18,0.94);
    --app-surface:    rgba(255,255,255,0.04);
    --app-surface2:   rgba(255,255,255,0.07);
    --app-border:     rgba(255,255,255,0.07);
    --text:           #f4f4f5;
    --text-dim:       rgba(244,244,245,0.50);
    --text-muted:     rgba(244,244,245,0.28);

    /* Sémantique */
    --red:    #f43f5e;
    --green:  #22c55e;
    --blue:   #3b82f6;
    --yellow: #eab308;
    --accent: var(--primary);
    --accent-ghost: var(--primary-ghost);

    /* Typo */
    --font-display: 'Space Grotesk', sans-serif;
    --font-ui:      'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* Layout */
    --topbar-h:  40px;
    --taskbar-h: 52px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* Wallpaper gradient — remplacé par JS */
    --wp-c1: #4f46e5;
    --wp-c2: #db2777;
}

/* ─────────────────────────────────────────────
   BASE
───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
    width:100vw; height:100vh;
    overflow:hidden;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────
   FOND D'ÉCRAN — dégradé vivant par défaut
───────────────────────────────────────────── */
#wallpaper {
    position:fixed; inset:0; z-index:0;
    background: linear-gradient(145deg, #312e81 0%, #4f46e5 25%, #7c3aed 50%, #be185d 75%, #f43f5e 100%);
    transition: background 0.8s ease;
}
#wallpaper::after {
    content:'';
    position:absolute; inset:0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events:none;
    opacity:0.6;
}

/* ─────────────────────────────────────────────
   BOOT — minimaliste sur fond dégradé
───────────────────────────────────────────── */
#screen-boot {
    position:fixed; inset:0; z-index:9000;
    background: linear-gradient(145deg, #1e1b4b 0%, #312e81 30%, #7c3aed 65%, #e11d48 100%);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}
.boot-logo { text-align:center; }
.boot-logo svg {
    display:block; margin:0 auto 20px;
    filter:drop-shadow(0 0 24px rgba(255,255,255,0.4)) drop-shadow(0 0 8px rgba(255,255,255,0.6));
    animation:bootFloat 3s ease-in-out infinite;
}
.boot-name {
    font-family: var(--font-display);
    font-size:20px; font-weight:800; letter-spacing:8px;
    color:#fff; margin-bottom:6px;
    text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.boot-sub {
    font-size:10px; color:rgba(255,255,255,0.45);
    letter-spacing:2.5px; margin-bottom:40px;
    text-transform:uppercase; font-family:var(--font-mono);
}
.boot-bar {
    width:160px; height:2px;
    background:rgba(255,255,255,0.15); border-radius:2px; overflow:hidden;
}
.boot-progress {
    height:100%; width:0%;
    background:linear-gradient(90deg,rgba(255,255,255,0.6),#fff);
    box-shadow:0 0 12px rgba(255,255,255,0.6);
    transition:width .1s linear;
}
@keyframes bootFloat {
    0%,100%{transform:translateY(0);opacity:.8}
    50%{transform:translateY(-6px);opacity:1}
}

/* ─────────────────────────────────────────────
   LOGIN — OS lock screen
───────────────────────────────────────────── */
#screen-login {
    position:fixed; inset:0; z-index:8000;
    display:flex; flex-direction:column;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 100%, rgba(244,63,94,0.15) 0%, transparent 60%),
        linear-gradient(160deg, #080b1a 0%, #0d1123 40%, #0b0f1e 100%);
    overflow:hidden;
}
#screen-login::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:40px 40px;
}
.lg-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 24px; flex-shrink:0; z-index:1; position:relative;
    background:rgba(255,255,255,0.03);
    border-bottom:1px solid rgba(255,255,255,0.07);
    backdrop-filter:blur(10px);
    font-family:var(--font-mono); font-size:11px;
    color:rgba(255,255,255,0.4); letter-spacing:.5px;
}
.lg-topbar-brand {
    display:flex; align-items:center; gap:8px;
    font-weight:700; font-size:12px; letter-spacing:2px;
    color:rgba(255,255,255,0.75);
}
.lg-topbar-status { display:flex; align-items:center; gap:7px; }
.lg-dot {
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.7);
}
.lg-topbar-time { font-weight:600; color:rgba(255,255,255,0.6); }
.lg-stage {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:32px; padding:20px; z-index:1; position:relative;
}
.lg-clock { text-align:center; }
.lg-clock-time {
    font-family:var(--font-display);
    font-size:88px; font-weight:800; line-height:1;
    color:#fff; letter-spacing:-3px;
    text-shadow:0 0 80px rgba(99,102,241,0.45), 0 2px 24px rgba(0,0,0,0.6);
}
.lg-clock-date {
    font-family:var(--font-mono); font-size:13px;
    letter-spacing:3px; text-transform:uppercase;
    color:rgba(255,255,255,0.4); margin-top:8px;
}
.lg-panel {
    background:rgba(12,15,30,0.80);
    backdrop-filter:blur(40px) saturate(1.5);
    -webkit-backdrop-filter:blur(40px) saturate(1.5);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px; padding:24px 28px;
    width:100%; max-width:360px;
    box-shadow:0 32px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
}
.lg-panel-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.lg-panel-icon {
    width:46px; height:46px; flex-shrink:0; border-radius:14px;
    background:linear-gradient(145deg,#be123c,#f43f5e);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(244,63,94,0.35);
}
.lg-panel-title {
    font-family:var(--font-display); font-size:18px;
    font-weight:800; letter-spacing:2px; color:#fff;
}
.lg-panel-sub { font-size:11px; color:rgba(255,255,255,0.38); margin-top:2px; }
.lg-divider { height:1px; background:rgba(255,255,255,0.08); margin-bottom:18px; }
.lg-terminal {
    display:flex; align-items:center; gap:8px;
    background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.1);
    border-radius:9px; padding:9px 13px; font-family:var(--font-mono);
}
.lg-terminal-prompt { color:#22c55e; font-size:13px; font-weight:700; flex-shrink:0; }
.lg-terminal-field {
    flex:1; background:transparent !important; border:none !important;
    outline:none !important; padding:0 !important; width:auto !important;
    color:#e2e8f0 !important; font-size:12px; font-family:var(--font-mono);
}
.lg-terminal-field::placeholder { color:rgba(255,255,255,0.22); }
.lg-panel label { color:rgba(255,255,255,0.45); font-size:11px; font-weight:500; }
.lg-panel input[type=text]:not(.lg-terminal-field) {
    background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:#fff;
}
.lg-panel input[type=text]:not(.lg-terminal-field)::placeholder { color:rgba(255,255,255,0.25); }
.lg-panel input[type=text]:not(.lg-terminal-field):focus {
    border-color:rgba(244,63,94,0.5); background:rgba(255,255,255,0.09);
}
.lg-statusbar {
    flex-shrink:0; z-index:1; position:relative;
    padding:8px 24px; text-align:center;
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.05);
    font-family:var(--font-mono); font-size:10px;
    color:rgba(255,255,255,0.18); letter-spacing:.5px;
}

.error-box {
    background:rgba(244,63,94,0.10);
    border:1px solid rgba(244,63,94,0.30);
    border-radius:9px; padding:10px 14px;
    font-size:11px; color:#fca5a5;
    margin-bottom:12px;
}
.info-box {
    display:flex; gap:9px; align-items:flex-start;
    background:rgba(59,130,246,0.09);
    border:1px solid rgba(59,130,246,0.25);
    border-radius:9px; padding:10px 14px;
    font-size:11px; color:rgba(180,210,255,0.65);
    line-height:1.55;
}

/* ─── Formulaires — base ──────────────────── */
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
label { font-size:11px; font-weight:500; color:var(--text-dim); }
input[type=text], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local],
input[type=email], input[type=url], input[type=tel], input[type=search],
input:not([type]), select, textarea {
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:9px; padding:8px 12px;
    font-size:12px; color:var(--text);
    font-family:var(--font-ui);
    outline:none; width:100%; box-sizing:border-box;
    transition:border-color .2s, background .2s;
}
select option { background:#16161d; color:#f4f4f5; }
select {
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;
    padding-right:32px !important;
}
input:focus, select:focus, textarea:focus {
    border-color:rgba(244,63,94,0.5);
    background:rgba(255,255,255,0.06);
}
input::placeholder, textarea::placeholder { color:rgba(255,255,255,0.28); }
textarea { resize:vertical; min-height:70px; }
.hint { font-size:10px; color:var(--text-dim); margin-top:3px; line-height:1.5; }

.btn-login {
    width:100%; padding:11px 16px;
    background:linear-gradient(145deg,#be123c,#f43f5e);
    border:none; border-radius:10px;
    color:#fff; font-weight:600; font-size:13px;
    font-family:var(--font-ui); letter-spacing:.2px;
    cursor:pointer; transition:all .2s;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 4px 20px rgba(244,63,94,0.35);
}
.btn-login:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 28px rgba(244,63,94,0.45); }
.btn-login:active { transform:none; }
.btn-login:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-discord {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:11px 16px;
    background:#5865F2; border:none; border-radius:10px;
    color:#fff; font-weight:600; font-size:13px; font-family:var(--font-ui);
    cursor:pointer; text-decoration:none; transition:all .2s;
    box-shadow:0 4px 20px rgba(88,101,242,0.30);
}
.btn-discord:hover { background:#4752c4; transform:translateY(-1px); }

/* Personnages */
.char-list { display:flex; flex-direction:column; gap:7px; }
.char-card {
    display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:11px; padding:10px 13px;
    cursor:pointer; transition:all .18s;
}
.char-card:hover { border-color:rgba(244,63,94,0.35); background:rgba(244,63,94,0.07); transform:translateX(3px); }
.char-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(145deg,#be123c,#f43f5e);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; color:#fff; flex-shrink:0;
    box-shadow:0 3px 12px rgba(244,63,94,0.3);
}
.char-name  { font-size:12px; font-weight:600; color:#fff; }
.char-grade { font-size:10px; color:rgba(255,255,255,0.4); margin-top:2px; }

/* ─────────────────────────────────────────────
   TOPBAR — verre blanc, style barre macOS
───────────────────────────────────────────── */
.topbar {
    position:fixed; top:0; left:0; right:0;
    height:var(--topbar-h); z-index:7000;
    background:var(--glass);
    backdrop-filter:blur(36px) saturate(2.0);
    -webkit-backdrop-filter:blur(36px) saturate(2.0);
    border-bottom:1px solid var(--glass-border);
    box-shadow:0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.08);
    display:flex; align-items:center;
    padding:0 16px; gap:12px;
    color: var(--chrome-text);
}
.topbar-left  { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.topbar-center {
    font-size:11px; font-weight:500; color:var(--chrome-text-dim);
    white-space:nowrap; font-family:var(--font-mono); letter-spacing:.5px;
}
.topbar-right { display:flex; align-items:center; gap:6px; position:relative; }
.topbar-logo  {
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-size:13px; font-weight:800;
    letter-spacing:2px; color:var(--chrome-text); flex-shrink:0;
    text-transform:uppercase;
}
.topbar-sep {
    width:1px; height:16px;
    background:rgba(0,0,0,0.12); flex-shrink:0;
}
.topbar-char {
    font-size:11px; font-weight:400;
    color:var(--chrome-text-dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-avatar {
    width:27px; height:27px; border-radius:50%;
    background:linear-gradient(145deg,#be123c,#f43f5e);
    display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:10px; color:#fff; cursor:pointer;
    transition:box-shadow .18s, transform .15s;
    box-shadow:0 2px 10px rgba(244,63,94,0.3);
    overflow:hidden;
}
.topbar-avatar:hover { box-shadow:0 0 0 2.5px rgba(244,63,94,0.55), 0 3px 14px rgba(244,63,94,0.3); transform:scale(1.06); }

/* Boutons topbar (settings, etc.) */
.topbar button {
    background:none; border:none; cursor:pointer;
    color:var(--chrome-text-dim) !important;
    font-size:14px; padding:5px 7px; border-radius:8px;
    transition:background .15s, color .15s;
}
.topbar button:hover {
    background:rgba(0,0,0,0.06) !important;
    color:var(--chrome-text) !important;
}

.account-menu {
    position:absolute; top:38px; right:0;
    background:var(--glass-high);
    backdrop-filter:blur(40px) saturate(2);
    -webkit-backdrop-filter:blur(40px) saturate(2);
    border:1px solid var(--glass-border);
    border-radius:14px; padding:6px;
    min-width:185px; z-index:9000;
    box-shadow:0 20px 60px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.6);
    animation:menuIn .14s cubic-bezier(.34,1.56,.64,1);
    color:var(--chrome-text);
}
@keyframes menuIn {
    from{opacity:0;transform:translateY(-8px) scale(.95)}
    to{opacity:1;transform:none}
}
.menu-char-name {
    font-size:11px; font-weight:600; padding:7px 10px 9px;
    border-bottom:1px solid rgba(0,0,0,0.08); margin-bottom:4px;
    color:var(--chrome-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-sep { height:1px; background:rgba(0,0,0,0.07); margin:4px 0; }
.menu-item {
    padding:7px 10px; font-size:12px; font-weight:400;
    border-radius:8px; cursor:pointer; transition:background .12s;
    color:var(--chrome-text-dim); white-space:nowrap;
}
.menu-item:hover { background:rgba(0,0,0,0.06); color:var(--chrome-text); }
.menu-item[style*="rgba(255,80,80"] { color:#e11d48 !important; }
.menu-item[style*="rgba(255,80,80"]:hover { background:rgba(244,63,94,0.08) !important; }

/* ─────────────────────────────────────────────
   BUREAU — icônes flottant sur fond dégradé
───────────────────────────────────────────── */
body { background: var(--app-bg); }
.desktop {
    position:fixed;
    top:var(--topbar-h); bottom:var(--taskbar-h);
    left:0; right:0;
    overflow:visible; z-index:1;
}
.desktop-icons {
    display:flex; flex-wrap:wrap; align-content:flex-start;
    gap:4px; padding:22px 18px;
}
.desk-icon {
    display:flex; flex-direction:column; align-items:center;
    gap:8px; padding:10px 8px; border-radius:14px;
    cursor:pointer; width:82px;
    transition:background .15s, transform .12s;
    user-select:none;
}
.desk-icon:hover {
    background:rgba(255,255,255,0.18);
    backdrop-filter:blur(10px);
    transform:translateY(-2px);
}
.desk-icon:active:not(.desk-icon-locked) { transform:scale(.95); }
.desk-icon-locked { cursor:default; opacity:.35; }
.desk-icon-locked:hover { background:transparent; transform:none; }

.icon-wrap { position:relative; display:inline-flex; }
.icon-img {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.desk-icon span {
    font-size:10px; font-weight:600; color:#fff;
    text-align:center; line-height:1.35;
    text-shadow:0 1px 6px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.6);
}
.icon-badge {
    position:absolute; top:-5px; right:-6px;
    background:var(--primary); color:#fff;
    font-size:8px; font-weight:700;
    min-width:16px; height:16px;
    border-radius:8px; display:flex; align-items:center; justify-content:center;
    padding:0 3px; border:2px solid transparent;
    box-shadow:0 2px 8px rgba(244,63,94,0.5);
}

/* ─────────────────────────────────────────────
   FENÊTRES — chrome clair / contenu sombre
───────────────────────────────────────────── */
#wins { position:fixed; inset:0; pointer-events:none; z-index:2000; }
#wins .win { pointer-events:all; }

.win {
    position:absolute;
    background:var(--app-bg);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:var(--radius-lg);
    box-shadow:
        0 40px 100px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.12),
        0 2px 0 rgba(255,255,255,0.08) inset;
    display:flex; flex-direction:column;
    overflow:hidden;
    min-width:300px; min-height:180px;
    backdrop-filter:blur(60px);
    -webkit-backdrop-filter:blur(60px);
    transition:box-shadow .2s;
}
.win.focused {
    border-color:rgba(255,255,255,0.32);
    box-shadow:
        0 48px 120px rgba(0,0,0,0.42),
        0 0 0 1px rgba(255,255,255,0.22),
        0 2px 0 rgba(255,255,255,0.10) inset;
}

/* Barre de titre — VERRE BLANC */
.win-tb {
    height:34px;
    background:var(--glass-high);
    backdrop-filter:blur(0); /* parent déjà blurs */
    border-bottom:1px solid rgba(0,0,0,0.07);
    display:flex; align-items:center;
    padding:0 12px; gap:10px;
    cursor:move; user-select:none; flex-shrink:0;
}
.win-dots { display:flex; gap:6px; align-items:center; }
.win-dot {
    width:12px; height:12px; border-radius:50%;
    cursor:pointer; transition:filter .15s, transform .12s;
    display:flex; align-items:center; justify-content:center;
    font-size:7px; color:rgba(0,0,0,0); font-weight:700;
}
.win-dot:hover { filter:brightness(1.15); transform:scale(1.12); color:rgba(0,0,0,0.55); }
.dot-close { background:#ff5f57; box-shadow:0 0 0 0.5px rgba(0,0,0,0.15) inset; }
.dot-min   { background:#febc2e; box-shadow:0 0 0 0.5px rgba(0,0,0,0.15) inset; }
.dot-max   { background:#28c840; box-shadow:0 0 0 0.5px rgba(0,0,0,0.15) inset; }
.win-title {
    flex:1; text-align:center;
    font-family:var(--font-ui); font-size:11px; font-weight:500;
    letter-spacing:.2px; color:var(--chrome-text-dim);
}
.win-body {
    flex:1; overflow:auto;
    padding:12px 14px;
    position:relative;
    color:var(--text);
}
.win-resize {
    position:absolute; bottom:0; right:0;
    width:16px; height:16px; cursor:nwse-resize; opacity:.2;
    transition:opacity .15s;
}
.win-resize:hover { opacity:.5; }

/* ─────────────────────────────────────────────
   TASKBAR — Windows 7 Aero Glass
───────────────────────────────────────────── */
.taskbar {
    position:fixed; bottom:0; left:0; right:0;
    height:var(--taskbar-h); z-index:6000;
    background:var(--glass);
    backdrop-filter:blur(40px) saturate(2.2);
    -webkit-backdrop-filter:blur(40px) saturate(2.2);
    border-top:1px solid var(--glass-border);
    box-shadow:0 -1px 0 rgba(0,0,0,0.06), 0 -6px 24px rgba(0,0,0,0.08);
    display:flex; align-items:center;
    padding:0 0 0 4px; gap:0;
    overflow:hidden;
}

/* Bouton Start */
.tb-start {
    width:50px; height:100%; flex-shrink:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.04) 100%);
    border:none; border-right:1px solid rgba(0,0,0,0.08);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .18s;
    position:relative;
}
.tb-start:hover {
    background:linear-gradient(180deg, rgba(244,63,94,0.18) 0%, rgba(244,63,94,0.08) 100%);
}
.tb-start:hover svg path:first-child { fill:rgba(244,63,94,1); }
.tb-start::after {
    content:'';
    position:absolute; bottom:0; left:8px; right:8px; height:2px;
    background:linear-gradient(90deg,transparent,rgba(244,63,94,0.6),transparent);
    opacity:0; transition:opacity .18s;
}
.tb-start:hover::after { opacity:1; }

/* Séparateur vertical */
.tb-sep {
    width:1px; height:32px; flex-shrink:0;
    background:rgba(0,0,0,0.08);
    margin:0 4px;
}

/* Zone apps ouvertes */
.tb-apps {
    flex:1; display:flex; align-items:center;
    gap:3px; padding:0 6px;
    overflow:hidden; height:100%;
}
.task-btn {
    display:flex; align-items:center; gap:6px;
    padding:5px 11px; border-radius:5px;
    background:rgba(0,0,0,0.04);
    border:1px solid rgba(0,0,0,0.06);
    cursor:pointer; font-size:11px; font-weight:500;
    color:var(--chrome-text-dim); font-family:var(--font-ui);
    transition:all .15s; max-width:170px; height:38px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    flex-shrink:0;
}
.task-btn:hover {
    background:rgba(0,0,0,0.08);
    border-color:rgba(0,0,0,0.12);
    color:var(--chrome-text);
}
.task-btn.active {
    background:linear-gradient(180deg,rgba(244,63,94,0.14) 0%, rgba(244,63,94,0.06) 100%);
    border-color:rgba(244,63,94,0.32);
    border-bottom-color:rgba(244,63,94,0.5);
    color:var(--chrome-text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 1px rgba(244,63,94,0.08);
}

/* Tray système (droite) */
.tb-tray {
    display:flex; align-items:center; gap:0;
    height:100%; flex-shrink:0;
    border-left:1px solid rgba(0,0,0,0.08);
}
.tray-clock {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:0 14px; cursor:default; height:100%;
    transition:background .15s;
    min-width:72px;
}
.tray-clock:hover { background:rgba(0,0,0,0.05); }
.tray-time {
    font-size:13px; font-weight:700;
    color:var(--chrome-text); font-family:var(--font-ui);
    line-height:1.1;
}
.tray-date {
    font-size:9.5px; font-weight:400;
    color:var(--chrome-text-dim); line-height:1.1;
    white-space:nowrap;
}
.tb-show-desktop {
    width:8px; height:100%; cursor:pointer;
    background:rgba(0,0,0,0.03);
    border-left:1px solid rgba(0,0,0,0.08);
    transition:background .15s;
    flex-shrink:0;
}
.tb-show-desktop:hover { background:rgba(244,63,94,0.12); }

/* ─────────────────────────────────────────────
   MENU DÉMARRER — Windows 7 style
───────────────────────────────────────────── */
.start-menu {
    position:fixed; bottom:var(--taskbar-h); left:0;
    width:440px; z-index:7500;
    background:var(--glass-high);
    backdrop-filter:blur(40px) saturate(2);
    -webkit-backdrop-filter:blur(40px) saturate(2);
    border:1px solid var(--glass-border);
    border-bottom:none;
    border-radius:12px 12px 0 0;
    box-shadow:0 -16px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.5);
    overflow:hidden;
    animation:startMenuIn .18s cubic-bezier(.34,1.2,.64,1);
}
@keyframes startMenuIn {
    from{opacity:0;transform:translateY(12px) scale(.97)}
    to{opacity:1;transform:none}
}
.sm-header {
    background:linear-gradient(145deg,rgba(244,63,94,0.85),rgba(190,18,60,0.9));
    padding:16px 18px;
}
.sm-user { display:flex; align-items:center; gap:12px; }
.sm-avatar {
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.25);
    border:2px solid rgba(255,255,255,0.5);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:700; color:#fff;
    overflow:hidden; flex-shrink:0;
}
.sm-avatar img { width:100%; height:100%; object-fit:cover; }
.sm-username { font-size:14px; font-weight:700; color:#fff; }
.sm-sub { font-size:10px; color:rgba(255,255,255,0.65); margin-top:2px; }

.sm-body {
    display:flex; min-height:280px;
}
.sm-apps {
    flex:1; padding:14px 12px;
    border-right:1px solid rgba(0,0,0,0.08);
    display:flex; flex-direction:column; gap:7px;
    overflow-y:auto; max-height:340px;
}
.sm-section-label {
    font-size:9px; font-weight:800; letter-spacing:.8px;
    text-transform:uppercase; color:var(--chrome-text-dim);
    opacity:.7; padding:2px 4px 4px;
}
/* Raccourcis rapides (Poser une absence, S'inscrire à la garde…) */
.sm-shortcut-btn {
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; border-radius:11px; cursor:pointer;
    background:rgba(0,0,0,0.025);
    border:1px solid rgba(0,0,0,0.07);
    transition:background .14s, border-color .14s, transform .14s;
}
.sm-shortcut-btn:hover {
    background:rgba(244,63,94,0.07);
    border-color:rgba(244,63,94,0.25);
    transform:translateX(2px);
}
.sm-shortcut-icon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:19px; flex-shrink:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.18);
}
.sm-shortcut-text { flex:1; min-width:0; }
.sm-shortcut-title { font-size:12.5px; font-weight:700; color:var(--chrome-text); }
.sm-shortcut-sub { font-size:9.5px; color:var(--chrome-text-dim); margin-top:2px; }
.sm-shortcut-arrow {
    font-size:18px; color:var(--chrome-text-dim);
    opacity:.4; flex-shrink:0; transition:opacity .14s, transform .14s;
}
.sm-shortcut-btn:hover .sm-shortcut-arrow { opacity:.9; transform:translateX(3px); color:#be123c; }

.sm-right {
    width:160px; padding:14px 12px;
    display:flex; flex-direction:column; gap:3px;
    background:rgba(0,0,0,0.02);
}
.sm-link {
    display:flex; align-items:center; gap:9px;
    padding:9px 11px; border-radius:8px;
    font-size:12px; color:var(--chrome-text);
    cursor:pointer; transition:background .12s, color .12s; font-weight:500;
}
.sm-link-ico { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.sm-link:hover { background:rgba(244,63,94,0.08); color:#be123c; }
.sm-logout { color:#e11d48; margin-top:auto; }
.sm-logout:hover { background:rgba(244,63,94,0.1); color:#be123c; }
.sm-sep { height:1px; background:rgba(0,0,0,0.08); margin:6px 2px; }

/* Topbar btn settings */
.topbar-btn {
    background:none; border:none; cursor:pointer;
    color:var(--chrome-text-dim); font-size:15px;
    padding:5px 7px; border-radius:7px;
    transition:background .15s, color .15s;
}
.topbar-btn:hover {
    background:rgba(0,0,0,0.06);
    color:var(--chrome-text);
}

/* ─────────────────────────────────────────────
   COMPOSANTS APP — contenu sombre dans les fenêtres
───────────────────────────────────────────── */
.app-header {
    display:flex; align-items:center; gap:13px;
    padding:14px 16px;
    border-bottom:1px solid var(--app-border);
    flex-shrink:0;
}
.app-header-icon {
    width:40px; height:40px; border-radius:11px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 3px 12px rgba(0,0,0,0.35);
}
.app-header h1 { font-size:14px; font-weight:600; letter-spacing:.1px; color:var(--text); }
.app-header p  { font-size:11px; color:var(--text-dim); margin-top:2px; }

.section-title {
    font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted); margin-bottom:10px;
    padding-bottom:4px;
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.divider { height:1px; background:var(--app-border); margin:12px 0; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

.btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px;
    font-size:12px; font-weight:500; font-family:var(--font-ui);
    cursor:pointer; border:1px solid transparent;
    transition:all .15s; white-space:nowrap; letter-spacing:.1px;
}
.btn-primary {
    background:linear-gradient(145deg,#be123c,#f43f5e);
    color:#fff; border-color:transparent;
    box-shadow:0 2px 14px rgba(244,63,94,0.3);
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 4px 18px rgba(244,63,94,0.4); }
.btn-primary:active { transform:none; }
.btn-secondary {
    background:var(--app-surface);
    color:var(--text-dim); border-color:var(--app-border);
}
.btn-secondary:hover { background:var(--app-surface2); color:var(--text); border-color:rgba(255,255,255,0.12); }

/* ─────────────────────────────────────────────
   TOASTS
───────────────────────────────────────────── */
#toasts {
    position:fixed; bottom:62px; right:16px;
    display:flex; flex-direction:column; gap:8px;
    z-index:9900; pointer-events:none;
}
.toast {
    background:var(--glass-high);
    backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid var(--glass-border);
    border-radius:12px; padding:11px 16px;
    font-size:12px; color:var(--chrome-text);
    box-shadow:0 12px 40px rgba(0,0,0,0.18);
    animation:toastIn .2s cubic-bezier(.34,1.56,.64,1);
    max-width:300px; font-weight:500;
    transition:opacity .3s;
}
.toast-success { border-color:rgba(34,197,94,0.45); }
.toast-error   { border-color:rgba(244,63,94,0.45); }
.toast-info    { border-color:rgba(59,130,246,0.40); }
@keyframes toastIn {
    from{opacity:0;transform:translateX(14px) scale(.95)}
    to{opacity:1;transform:none}
}

/* ─────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.20); }

/* ─────────────────────────────────────────────
   SPINNER
───────────────────────────────────────────── */
@keyframes spin { to{transform:rotate(360deg)} }
.spinner {
    width:14px; height:14px;
    border:1.5px solid rgba(255,255,255,0.15);
    border-top-color:rgba(255,255,255,0.75);
    border-radius:50%;
    animation:spin .65s linear infinite;
    display:inline-block;
}

/* ─── Boutons icônes ──────────────────────── */
.btn-icon {
    background:none; border:none; cursor:pointer;
    width:28px; height:28px; border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:0; transition:background .12s, color .12s;
    flex-shrink:0; color:var(--text-dim);
}
.btn-icon:hover { background:var(--app-surface2); color:var(--text); }
.btn-icon.edit   { font-size:13px; }
.btn-icon.delete { font-size:13px; }
.btn-icon.edit:hover   { color:var(--blue);   background:rgba(59,130,246,0.12); }
.btn-icon.delete:hover { color:var(--red);    background:rgba(244,63,94,0.12); }

/* ─── Personnalisation ────────────────────── */
.color-swatch {
    width:26px; height:26px; border-radius:50%;
    cursor:pointer; border:2.5px solid transparent;
    transition:transform .15s, border-color .15s, box-shadow .15s;
    flex-shrink:0; display:inline-block;
}
.color-swatch:hover  { transform:scale(1.15); }
.color-swatch.active { border-color:#fff; transform:scale(1.08); box-shadow:0 0 0 3px rgba(255,255,255,0.2); }

.wp-thumb {
    height:52px; border-radius:10px;
    cursor:pointer; border:2.5px solid transparent;
    display:flex; align-items:flex-end; padding:7px 9px;
    transition:border-color .15s, transform .15s;
    position:relative; overflow:hidden;
}
.wp-thumb::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(transparent 30%, rgba(0,0,0,0.5) 100%);
}
.wp-thumb span { font-size:9px; font-weight:600; color:rgba(255,255,255,.9); position:relative; z-index:1; }
.wp-thumb:hover  { transform:translateY(-2px); border-color:rgba(255,255,255,0.35); }
.wp-thumb.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }

/* ─── Post-it ─────────────────────────────── */
.postit-text {
    background:transparent !important; border:none !important; outline:none !important;
    resize:none; line-height:1.5; padding:7px 8px;
    font-size:11px; font-family:var(--font-ui);
    color:#111 !important; -webkit-text-fill-color:#111 !important;
    width:100%; box-sizing:border-box; caret-color:#333;
}

/* ─── Widgets bureau ──────────────────────── */
.desktop-widget { position:absolute; z-index:500; user-select:none; }
.desktop-widget textarea, .desktop-widget input { user-select:text; }
.desktop-widget .widget-handle { cursor:move; }
.desktop-widget .widget-handle button { cursor:pointer; }

/* ─────────────────────────────────────────────
   UTILITAIRES — table, badge, card
───────────────────────────────────────────── */
.card {
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:var(--radius); padding:12px 14px;
}
.card:hover { background:var(--app-surface2); }

.badge {
    display:inline-flex; align-items:center;
    padding:2px 8px; border-radius:20px;
    font-size:10px; font-weight:600; letter-spacing:.2px;
}

table { width:100%; border-collapse:collapse; font-size:12px; }
thead th {
    text-align:left; padding:7px 10px;
    font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
    color:var(--text-muted); border-bottom:1px solid var(--app-border);
}
tbody tr { border-bottom:1px solid rgba(255,255,255,0.03); transition:background .1s; }
tbody tr:hover { background:rgba(255,255,255,0.03); }
tbody td { padding:8px 10px; color:var(--text-dim); vertical-align:middle; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width:700px) {
    .win {
        width:100vw !important; left:0 !important; top:var(--topbar-h) !important;
        height:calc(100vh - var(--topbar-h) - var(--taskbar-h)) !important;
        border-radius:0 !important;
    }
    .desktop-icons { gap:4px; padding:14px; }
    .desk-icon { width:70px; }
    .icon-img  { width:44px; height:44px; }
    .topbar-char { display:none; }
}