* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body { overflow: hidden; background-color: #252525; font-family: 'Segoe UI', sans-serif; }
#canvas-container { width: 100vw; height: 100vh; display: block; position: absolute; z-index: 1; }

#win7-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
    opacity: 0; pointer-events: none; transition: opacity 0.8s ease-in-out;
    background-size: cover; background-position: center;
    /* Le fond sera géré par le JavaScript */
    background-color: #0078d7; 
    display: flex; flex-direction: column; justify-content: space-between;
}
#win7-overlay.active { opacity: 1; pointer-events: auto; }

#close-btn {
    position: absolute; top: 20px; right: 20px;
    padding: 8px 15px; background: rgba(200, 0, 0, 0.6); color: white;
    border: 1px solid rgba(255,255,255,0.4); border-radius: 4px;
    cursor: pointer; font-weight: bold; backdrop-filter: blur(5px);
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
#close-btn:hover { background: rgba(220, 0, 0, 0.9); box-shadow: 0 0 10px red; }

.desktop-content { padding: 50px; display: flex; gap: 30px; flex-wrap: wrap; }
.win7-icon {
    width: 90px; text-align: center; color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9); cursor: pointer;
    padding: 5px; border: 1px solid transparent; border-radius: 3px;
    transition: 0.1s;
}
.win7-icon:hover { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); }
.icon-img { font-size: 42px; margin-bottom: 2px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.icon-text { font-size: 13px; line-height: 1.2; }

/* BARRE DES TÂCHES */
.win7-taskbar {
    height: 46px; background: rgba(10, 20, 30, 0.85); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center;
    padding: 0 10px; justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}

/* LE BOUTON DÉMARRER (ORB) */
.start-orb {
    width: 44px; height: 44px;
    border-radius: 50%;
    /* Effet Boule sombre bleutée */
    background: radial-gradient(circle at 50% 30%, #4facfe 0%, #173852 50%, #05101a 100%);
    box-shadow: 0 0 5px #00a4ef, inset 0 1px 2px rgba(255,255,255,0.8), 0 0 0 1px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; overflow: hidden;
    transition: 0.3s;
    margin-right: 10px;
}
.start-orb:hover { 
    box-shadow: 0 0 15px #00a4ef, inset 0 0 15px rgba(255,255,255,0.6); 
    filter: brightness(1.2);
}
/* Reflet brillant en haut du bouton */
.orb-shine {
    position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0));
    border-radius: 50% 50% 0 0; pointer-events: none;
}
/* Le Logo Windows CSS (Les 4 carrés) */
.win-logo {
    width: 22px; height: 22px;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;
    transform: rotate(0deg); /* On peut le tourner légèrement si on veut */
}
.win-sq { width: 100%; height: 100%; }
.red { background: #f25022; border-top-left-radius: 3px; }
.green { background: #7fba00; border-top-right-radius: 3px; }
.blue { background: #00a4ef; border-bottom-left-radius: 3px; }
.yellow { background: #ffb900; border-bottom-right-radius: 3px; }

/* Horloge */
.taskbar-right {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px; padding: 5px 15px; color: white; text-align: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}
.taskbar-time { font-size: 13px; font-weight: 500; }