/* ---------- COASTER : habillage "PC de 2001" (pastiche générique) ---------- */
:root{
  --face:#c0c0c0;
  --face-lo:#9a9a9a;
  --hi:#ffffff;
  --sh:#808080;
  --dk:#000000;
  --title1:#000080;
  --title2:#1084d0;
  --title1-off:#808080;
  --title2-off:#b5b5b5;
  --desk:#3a6ea5;
  --tbh:30px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;
  font-family:"MS Sans Serif",Tahoma,Verdana,Geneva,sans-serif;
  font-size:12px;
  background:var(--desk);
  color:#000;
  user-select:none;
  -webkit-font-smoothing:none;
}
button{font-family:inherit;font-size:inherit}

/* --- reliefs 98 --- */
.raised{
  border:1px solid;
  border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;
  background:var(--face);
}
.sunken{
  border:1px solid;
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 #dfdfdf;
  background:#fff;
}
.groove{border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}

.btn{
  background:var(--face);padding:3px 10px;min-width:70px;cursor:default;
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;
  color:#000;
}
.btn:active:not(:disabled),.btn.down{
  border-color:var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow:inset 1px 1px 0 var(--sh);
  padding:4px 9px 2px 11px;
}
.btn:disabled{color:var(--sh);text-shadow:1px 1px 0 var(--hi)}
.btn:focus{outline:1px dotted #000;outline-offset:-4px}
.btn.wide{width:100%}

/* ---------- bureau ---------- */
#desktop{position:fixed;inset:0 0 var(--tbh) 0;overflow:hidden}
#icons{position:absolute;inset:0;padding:6px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:2px;height:100%}
.dicon{width:78px;padding:4px 2px 5px;text-align:center;cursor:default}
.dicon img{width:32px;height:32px;display:block;margin:0 auto 3px;image-rendering:pixelated}
.dicon span{color:#fff;font-size:11px;line-height:1.15;display:inline-block;padding:1px 2px;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.dicon.sel span{background:var(--title1);outline:1px dotted #fff}
.dicon.sel img{filter:sepia(1) hue-rotate(180deg) saturate(2.5) brightness(.8)}

/* ---------- fenêtres ---------- */
/* le conteneur doit couvrir le bureau : c'est lui qui sert de cadre de
   déplacement (sans hauteur, les fenêtres restaient collées en haut).
   pointer-events:none pour laisser les clics atteindre les icônes dessous. */
#windows{position:absolute;inset:0;pointer-events:none}
.win{pointer-events:auto;
  position:absolute;background:var(--face);
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;
  display:flex;flex-direction:column;min-width:180px;
  padding:2px;
}
.win.hidden{display:none}
.titlebar{
  height:20px;display:flex;align-items:center;gap:4px;padding:0 2px 0 3px;
  background:linear-gradient(90deg,var(--title1-off),var(--title2-off));
  color:#d8d8d8;font-weight:bold;flex:0 0 auto;cursor:default;
}
.win.active .titlebar{background:linear-gradient(90deg,var(--title1),var(--title2));color:#fff}
.titlebar img{width:16px;height:16px;image-rendering:pixelated}
.titlebar .t{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}
.tb-btn{
  width:16px;height:14px;background:var(--face);font-size:9px;line-height:8px;padding:0;
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;
  display:flex;align-items:center;justify-content:center;font-weight:bold;cursor:default;
}
.tb-btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:none}
.menubar{display:flex;gap:2px;padding:1px 2px;flex:0 0 auto;font-size:11px}
.menubar span{padding:1px 6px}
.menubar span:hover{background:var(--title1);color:#fff}
.wbody{flex:1;overflow:auto;padding:6px;display:flex;flex-direction:column;gap:6px}
.statusbar{display:flex;gap:2px;flex:0 0 auto;padding:2px 1px 1px}
.statusbar div{
  padding:2px 5px;font-size:11px;
  border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.statusbar div:first-child{flex:1}
.resizer{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize}

/* ---------- barre des tâches ---------- */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--tbh);z-index:9000;
  background:var(--face);display:flex;align-items:center;gap:3px;padding:2px 3px;
  border-top:1px solid var(--hi);box-shadow:inset 0 1px 0 #dfdfdf;
}
#startbtn{
  display:flex;align-items:center;gap:4px;font-weight:bold;padding:2px 6px 3px;height:23px;
  background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;cursor:default;
}
#startbtn.down{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px 0 var(--sh)}
.startlogo{width:16px;height:16px;background:
  linear-gradient(135deg,#f33 0 50%,#3c3 0 100%) left top/8px 8px no-repeat,
  linear-gradient(135deg,#39f 0 50%,#fc0 0 100%) right bottom/8px 8px no-repeat,
  linear-gradient(135deg,#3c3,#3c3) right top/8px 8px no-repeat,
  linear-gradient(135deg,#fc0,#fc0) left bottom/8px 8px no-repeat;
  transform:skewX(-8deg)}
.tb-sep{width:2px;height:22px;border-left:1px solid var(--sh);border-right:1px solid var(--hi)}
#tasks{flex:1;display:flex;gap:3px;overflow:hidden}
.taskbtn{
  flex:0 1 160px;min-width:40px;height:23px;display:flex;align-items:center;gap:4px;
  padding:0 6px;overflow:hidden;white-space:nowrap;cursor:default;font-size:11px;
  background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;
}
.taskbtn img{width:16px;height:16px;image-rendering:pixelated;flex:0 0 auto}
.taskbtn span{overflow:hidden;text-overflow:ellipsis}
.taskbtn.active{
  border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px 0 var(--sh);
  font-weight:bold;
  background-image:repeating-conic-gradient(#c0c0c0 0 25%, #b0b0b0 0 50%);background-size:4px 4px;
}
@keyframes blinktask{0%,49%{background:var(--face);color:#000}50%,100%{background:var(--title1);color:#fff}}
.taskbtn.blink{animation:blinktask .7s steps(1,end) infinite}
#tray{display:flex;align-items:center;gap:5px;padding:1px 6px 1px 4px;
  border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);height:23px}
#tray-icons{display:flex;gap:3px;align-items:center}
#tray-icons img{width:16px;height:16px;image-rendering:pixelated;cursor:default}
#tray-icons img.off{filter:grayscale(1) opacity(.45)}
#clock{font-size:11px;min-width:38px;text-align:center}

/* ---------- menu démarrer ---------- */
#startmenu{
  position:fixed;left:2px;bottom:var(--tbh);z-index:9500;display:flex;
  background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf;padding:2px;
}
#startmenu.hidden{display:none}
.sm-side{width:22px;background:linear-gradient(180deg,#000080,#1084d0);position:relative}
.sm-side span{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;
  white-space:nowrap;color:#fff;font-weight:bold;font-size:14px;letter-spacing:.5px;
}
.sm-items{display:flex;flex-direction:column;min-width:210px}
.sm-items div{display:flex;align-items:center;gap:8px;padding:5px 24px 5px 6px;font-size:12px;cursor:default}
.sm-items div img{width:24px;height:24px;image-rendering:pixelated}
.sm-items div:hover{background:var(--title1);color:#fff}
.sm-items hr{width:100%;border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:3px 0}

/* ---------- boîtes de dialogue ---------- */
#modal-layer{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center}
#modal-layer.hidden{display:none}
.dlg{width:auto;max-width:420px}
.dlg .wbody{padding:14px 14px 10px;gap:12px}
.dlg-row{display:flex;gap:12px;align-items:flex-start}
.dlg-row img{width:32px;height:32px;flex:0 0 auto;image-rendering:pixelated}
.dlg-txt{font-size:12px;line-height:1.45}
.dlg-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

#block-layer{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
#block-layer.hidden{display:none}
.block-msg{background:var(--face);border:2px solid #000;padding:20px 26px;text-align:center;font-size:14px;line-height:1.6;max-width:420px}

/* ---------- widgets communs ---------- */
.row{display:flex;gap:6px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.fieldset{border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);padding:8px 8px 8px;position:relative;margin-top:6px}
.fieldset > legend{position:absolute;top:-8px;left:6px;background:var(--face);padding:0 4px;font-size:11px}
.list{background:#fff;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);overflow:auto;font-size:11px;padding:1px}
.list .it{padding:2px 4px;display:flex;gap:6px;align-items:center;cursor:default}
.list .it.sel{background:var(--title1);color:#fff}
.list .it .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:"Courier New",monospace;font-size:11px}
.small{font-size:11px}
.dim{color:#555}
.ok{color:#006000}.warn{color:#a06000}.bad{color:#a00000}
select,input[type=text]{
  font-family:inherit;font-size:11px;background:#fff;padding:1px 2px;
  border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);box-shadow:inset 1px 1px 0 var(--dk);
}
.tag{font-size:10px;padding:0 3px;border:1px solid var(--sh);background:#e4e4e4}
.tag.dao{background:#ffe0a0}
.tag.cover{background:#d0e8ff}
.tag.late{background:#ffb0b0}

/* ---------- graveur ---------- */
.gauge-wrap{background:#000;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);padding:2px;height:26px;position:relative}
.gauge{height:100%;width:100%;background:
  repeating-linear-gradient(90deg,#0a0 0 8px,transparent 8px 10px);
  background-clip:content-box;transform-origin:left;}
.gauge.warn{background:repeating-linear-gradient(90deg,#dd0 0 8px,transparent 8px 10px)}
.gauge.crit{background:repeating-linear-gradient(90deg,#e00 0 8px,transparent 8px 10px)}
.gauge-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:bold;text-shadow:1px 1px 0 #000;mix-blend-mode:difference}
.pbar{background:#fff;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);height:18px;padding:2px;position:relative}
.pbar > i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--title1) 0 8px,transparent 8px 10px);width:0}
.pbar > b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:normal}
.log{background:#fff;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);height:96px;overflow:auto;padding:2px 4px;
  font-family:"Courier New",monospace;font-size:11px;line-height:1.35}
.log div{white-space:pre-wrap}
.led{width:8px;height:8px;border-radius:50%;background:#400;box-shadow:inset 0 0 2px #000;display:inline-block}
.led.on{background:#f60;box-shadow:0 0 5px #f80}
.led.g{background:#040}.led.g.on{background:#0f0;box-shadow:0 0 5px #0f0}
.drive{background:#d8d4c8;border:1px solid var(--sh);padding:6px 8px;display:flex;align-items:center;gap:8px}
.drive .slot{flex:1;height:12px;background:#111;border:1px solid #555;box-shadow:inset 0 1px 2px #000}
.speedsel{display:flex;gap:4px;flex-wrap:wrap}
.speedsel .btn{min-width:52px}
.speedsel .btn.sel{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px 0 var(--sh);font-weight:bold}

/* ---------- défrag ---------- */
.defgrid{display:grid;grid-template-columns:repeat(32,1fr);gap:1px;background:#000;padding:2px;
  border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.defgrid i{aspect-ratio:1;background:#00a}
.defgrid i.f{background:#a00}.defgrid i.o{background:#fff}.defgrid i.r{background:#0a0}

/* ---------- msgr ---------- */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{display:flex;gap:6px}
.msg img{width:24px;height:24px;flex:0 0 auto;image-rendering:pixelated}
.msg .b{background:#fff;border:1px solid var(--sh);padding:4px 6px;font-size:11px;flex:1;line-height:1.45}
.msg .b .who{font-weight:bold;color:var(--title1)}
.orderbox{border:1px solid var(--sh);background:#f4f4f4;padding:5px;font-size:11px}

/* ---------- tv ---------- */
.tvscreen{background:#101018;color:#9f9;padding:10px;font-family:"Courier New",monospace;font-size:12px;
  min-height:110px;border:1px solid #000;box-shadow:inset 0 0 20px #000;line-height:1.6}

/* ---------- menu contextuel du bureau ---------- */
.ctxmenu{position:absolute;z-index:8000;min-width:124px;background:var(--face);padding:2px;
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset -1px -1px 0 var(--sh), inset 1px 1px 0 #dfdfdf}
.ctxmenu div{padding:3px 20px 3px 8px;font-size:12px;cursor:default}
.ctxmenu div:hover{background:var(--title1);color:#fff}

/* ---------- écran de veille ---------- */
#saver{position:fixed;inset:0;z-index:9700;background:#000;overflow:hidden;cursor:none}
#saver.hidden{display:none}
#saver .stars{position:absolute;inset:0;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),
    radial-gradient(1px 1px at 70% 60%,#cfd,transparent),
    radial-gradient(2px 2px at 40% 80%,#fff,transparent),
    radial-gradient(1px 1px at 85% 20%,#ffd,transparent),
    radial-gradient(1px 1px at 10% 70%,#dff,transparent),
    radial-gradient(2px 2px at 55% 15%,#fff,transparent);
  animation:starzoom 3s linear infinite}
@keyframes starzoom{from{transform:scale(1);opacity:.4}to{transform:scale(2.4);opacity:0}}
#saver .lbl{position:absolute;color:#0c0;font-family:"Courier New",monospace;font-size:22px;
  text-shadow:0 0 8px #0f0;animation:bounce 7s linear infinite;white-space:nowrap}
@keyframes bounce{
  0%{left:6%;top:14%} 25%{left:62%;top:66%} 50%{left:12%;top:74%}
  75%{left:70%;top:22%} 100%{left:6%;top:14%}}
#saver .hint{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#585;
  font-size:12px;animation:blk 1.4s steps(1,end) infinite}

/* divers */
.hidden{display:none !important}
.blinkme{animation:blk 1s steps(1,end) infinite}
@keyframes blk{0%,49%{opacity:1}50%,100%{opacity:.25}}
.center{text-align:center}
h3.hdr{margin:0;font-size:12px}
p{margin:0 0 6px}