/*  Variables  */
    :root {
      --teal:       #008080;
      --gray:       #c0c0c0;
      --dark-gray:  #808080;
      --black:      #000;
      --white:      #fff;
      --blue:       #000080;
      --light-gray: #dfdfdf;
      --font:       'Tahoma', 'Verdana', sans-serif;
    }
    * { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:none; user-select:none; }
    body { background:var(--teal); font-family:var(--font); font-size:13px; height:100vh; overflow:hidden; }

    /* 
       LOGON OVERLAY couvre tout, z-index max
     */
    #logon-overlay {
      position: fixed; inset: 0; z-index: 999999;
      background: var(--teal);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
    }

    

    /* Transition de sortie */
    #logon-overlay.fade-out {
      animation: overlayFadeOut 0.8s ease-in forwards;
    }
    @keyframes overlayFadeOut {
      0%   { opacity:1; transform:scale(1); }
      60%  { opacity:1; transform:scale(1); }
      100% { opacity:0; transform:scale(1.03); pointer-events:none; }
    }

    /*  Win95 logo  */
    .cad-logo {
      display: flex; align-items: center; gap: 14px;
      justify-content: center; margin-bottom: 34px; z-index: 1;
      color: white; text-align: left;
    }
    .win-flag {
      width: 54px; height: 54px;
      display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
      gap: 3px; transform: skewX(-3deg);
      filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
      flex-shrink: 0;
    }
    .win-flag div { border-radius: 1px; }
    .win-flag div:nth-child(1) { background:#f25022; }
    .win-flag div:nth-child(2) { background:#7fba00; }
    .win-flag div:nth-child(3) { background:#00a4ef; }
    .win-flag div:nth-child(4) { background:#ffb900; }
    .win-flag-text .ms   { font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.9; text-shadow:1px 1px 2px rgba(0,0,0,.5); }
    .win-flag-text .w95  { font-size:38px; font-weight:bold; line-height:1; font-family:'Times New Roman',serif; text-shadow:1px 1px 3px rgba(0,0,0,.5); }
    .win-flag-text .sub  { font-size:13px; font-weight:bold; letter-spacing:1px; text-shadow:1px 1px 2px rgba(0,0,0,.4); }

    /*  CAD screen  */
    #logon-cad {
      z-index: 1; text-align: center; color: white;
    }
    .cad-divider {
      width: 360px; height: 1px; margin: 0 auto 22px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    }
    .cad-instr { font-size:13px; line-height:1.8; text-shadow:1px 1px 1px rgba(0,0,0,.4); }
    .kbd {
      font-weight:bold; font-size:12px;
      background: rgba(255,255,255,0.15);
      border:1px solid rgba(255,255,255,0.4);
      padding:1px 5px; border-radius:2px;
    }
    .blink { animation: blinkAnim 1.1s step-end infinite; }
    @keyframes blinkAnim { 50% { opacity:0; } }

    /*  Dialog box  */
    #logon-dialog {
      display: none; z-index: 1;
      width: 430px;
      background: var(--gray);
      border-top:    2px solid var(--white);
      border-left:   2px solid var(--white);
      border-right:  2px solid var(--dark-gray);
      border-bottom: 2px solid var(--dark-gray);
      box-shadow: 2px 2px 0 var(--black), inset 1px 1px 0 var(--light-gray);
      animation: dlgIn .15s ease-out;
    }
    @keyframes dlgIn { from { transform:scale(.97); opacity:.6; } to { transform:scale(1); opacity:1; } }

    .dlg-titlebar {
      background: linear-gradient(90deg, var(--blue) 0%, #1664c8 100%);
      padding: 3px 6px;
      display: flex; align-items: center; gap: 6px;
      color: white; font-weight: bold; font-size: 12px;
    }
    .dlg-icon {
      width:16px; height:16px; flex-shrink:0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' fill='%23f25022'/%3E%3Crect x='9' y='1' width='6' height='6' fill='%237fba00'/%3E%3Crect x='1' y='9' width='6' height='6' fill='%2300a4ef'/%3E%3Crect x='9' y='9' width='6' height='6' fill='%23ffb900'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .dlg-close {
      margin-left:auto; width:16px; height:14px;
      background:var(--gray);
      border-top:1px solid var(--white); border-left:1px solid var(--white);
      border-right:1px solid var(--black); border-bottom:1px solid var(--black);
      font-size:10px; font-weight:bold; text-align:center; line-height:12px;
      cursor:pointer; color:var(--black);
    }

    .dlg-body { padding:16px 18px 14px; }

    .dlg-header {
      display:flex; gap:14px; align-items:flex-start;
      margin-bottom:14px; padding-bottom:12px;
      border-bottom:1px solid var(--dark-gray);
      box-shadow:0 1px 0 var(--white);
    }
    .dlg-logo-box {
      flex-shrink:0; width:64px; height:64px; background:white;
      border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray);
      border-right:1px solid var(--light-gray); border-bottom:1px solid var(--light-gray);
      box-shadow:inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--white);
      display:flex; align-items:center; justify-content:center;
    }
    .flag-sm {
      width:38px; height:38px;
      display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
      gap:2px; transform:skewX(-2deg);
    }
    .flag-sm div:nth-child(1){background:#f25022;}
    .flag-sm div:nth-child(2){background:#7fba00;}
    .flag-sm div:nth-child(3){background:#00a4ef;}
    .flag-sm div:nth-child(4){background:#ffb900;}
    .dlg-header-text .brand { font-size:14px; font-weight:bold; color:var(--blue); font-family:'Times New Roman',serif; margin-bottom:4px; }
    .dlg-header-text h2 { font-size:11px; font-weight:bold; margin-bottom:4px; }
    .dlg-header-text p  { font-size:11px; line-height:1.5; }

    .user-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
    .user-ico {
      width:36px; height:36px; background:white;
      border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray);
      border-right:1px solid var(--white); border-bottom:1px solid var(--white);
      box-shadow:inset 1px 1px 0 var(--black);
      display:flex; align-items:center; justify-content:center; font-size:20px;
    }
    .user-label { font-size:12px; }
    .user-label strong { display:block; font-size:13px; }

    .field-row { display:flex; align-items:center; margin-bottom:10px; }
    .field-row label { width:148px; font-size:12px; text-align:right; margin-right:8px; flex-shrink:0; }
    .field-row input {
      flex:1; font-family:'Courier New',monospace; font-size:13px; padding:2px 4px;
      background:var(--white);
      border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray);
      border-right:1px solid var(--light-gray); border-bottom:1px solid var(--light-gray);
      box-shadow:inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--white);
      outline:none; caret-color:var(--black);
    }
    .field-row input:focus { outline:1px dotted var(--black); outline-offset:-2px; }

    .domain-row { display:flex; align-items:center; margin-bottom:4px; }
    .domain-row label { width:148px; font-size:12px; text-align:right; margin-right:8px; flex-shrink:0; }
    .sel-wrap { flex:1; position:relative; display:flex; }
    .sel-wrap select {
      flex:1; font-family:var(--font); font-size:12px; padding:2px 20px 2px 4px;
      background:var(--white);
      border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray);
      border-right:1px solid var(--white); border-bottom:1px solid var(--white);
      box-shadow:inset 1px 1px 0 var(--black);
      outline:none; appearance:none; -webkit-appearance:none;
    }
    .sel-arrow {
      position:absolute; right:0; top:0; bottom:0; width:18px;
      background:var(--gray);
      border-top:1px solid var(--white); border-left:1px solid var(--white);
      border-right:1px solid var(--black); border-bottom:1px solid var(--black);
      box-shadow:inset 1px 1px 0 var(--light-gray);
      display:flex; align-items:center; justify-content:center;
      font-size:8px; pointer-events:none;
    }

    .dlg-sep { border-top:1px solid var(--dark-gray); box-shadow:0 1px 0 var(--white); margin:14px 0 12px; }

    .btn-row { display:flex; justify-content:flex-end; gap:6px; }
    .w95-btn {
      min-width:80px; padding:4px 10px;
      font-family:var(--font); font-size:12px; cursor:pointer;
      background:var(--gray);
      border-top:1px solid var(--white); border-left:1px solid var(--white);
      border-right:1px solid var(--black); border-bottom:1px solid var(--black);
      box-shadow:inset 1px 1px 0 var(--light-gray), inset -1px -1px 0 var(--dark-gray);
      outline:none;
    }
    .w95-btn.default {
      border:2px solid var(--black);
      box-shadow:inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--dark-gray);
      padding:3px 9px;
    }
    .w95-btn:active {
      border-top:1px solid var(--black); border-left:1px solid var(--black);
      border-right:1px solid var(--white); border-bottom:1px solid var(--white);
      padding:5px 9px 3px 11px;
    }
    .w95-btn.default:active { border:2px solid var(--black); padding:4px 8px 2px 10px; }
    .w95-btn:focus { outline:1px dotted var(--black); outline-offset:-4px; }

    /*  Loading screen (noir DOS)  */
    #logon-loading {
      display:none; z-index:1;
      flex-direction:column; align-items:center; gap:14px;
      position:fixed; inset:0; background:black; color:white;
      font-family:'Courier New',monospace; font-size:20px; letter-spacing:1px;
    }
    .ldbar-wrap { width:280px; height:20px; border:1px solid #888; display:flex; overflow:hidden; }
    .ldbar-block { width:14px; flex-shrink:0; height:100%; background:#0000AA; opacity:0; transition:none; }
    .ldbar-block.lit { background:#aaaaff; opacity:1; }

    /*  Error / Access Denied dialog  */
    #logon-error {
      display:none; position:fixed; inset:0; z-index:1;
      align-items:center; justify-content:center;
    }
    .err-box {
      width:340px; background:var(--gray);
      border-top:2px solid var(--white); border-left:2px solid var(--white);
      border-right:2px solid var(--dark-gray); border-bottom:2px solid var(--dark-gray);
      box-shadow:2px 2px 0 var(--black);
    }
    @keyframes shake {
      0%  {transform:translateX(0);}
      20% {transform:translateX(-7px);}
      40% {transform:translateX(7px);}
      60% {transform:translateX(-4px);}
      80% {transform:translateX(4px);}
      100%{transform:translateX(0);}
    }
    .err-box.shaking { animation:shake .4s ease-out; }
    .err-body { padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
    .err-ico  { font-size:30px; flex-shrink:0; margin-top:2px; }
    .err-body p { font-size:12px; line-height:1.6; }
    .err-btn-row { display:flex; justify-content:center; padding:0 16px 12px; gap:6px; }

    /*  ACCESS DENIED special screen  */
    #logon-denied {
      display:none; z-index:1;
      flex-direction:column; align-items:center; justify-content:center; gap:0;
    }
    .denied-box {
      width:400px; background:var(--gray);
      border-top:2px solid var(--white); border-left:2px solid var(--white);
      border-right:2px solid var(--dark-gray); border-bottom:2px solid var(--dark-gray);
      box-shadow:2px 2px 0 var(--black);
    }
    .denied-body { padding:20px 22px 16px; text-align:center; }
    .denied-icon { font-size:44px; display:block; margin-bottom:10px; }
    .denied-code {
      font-family:'Courier New',monospace;
      font-size:11px; color:var(--dark-gray);
      background:white;
      border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray);
      border-right:1px solid var(--white); border-bottom:1px solid var(--white);
      box-shadow:inset 1px 1px 0 var(--black);
      padding:8px 12px; margin:10px 0; text-align:left; line-height:1.7;
    }
    .denied-body h3 { font-size:14px; margin-bottom:6px; }
    .denied-body p  { font-size:12px; margin-bottom:4px; color:#444; }
    .denied-sep { border-top:1px solid var(--dark-gray); box-shadow:0 1px 0 var(--white); margin:12px 22px; }

    /* 
       DESKTOP & WM (initialement invisible sous le logon)
     */
    #desktop {
      position:absolute; inset:0 0 28px 0; overflow:hidden;
    }
    .desktop-icon {
      position:absolute; display:flex; flex-direction:column; align-items:center;
      width:72px; cursor:pointer; text-align:center; color:white; padding:4px;
      border:1px solid transparent;
    }
    .desktop-icon img { width:32px; height:32px; margin-bottom:4px; image-rendering:pixelated; }
    .desktop-icon span { font-size:11px; text-shadow:1px 1px var(--black); line-height:1.3; word-break:break-word; }
    .desktop-icon.selected span { background:var(--blue); outline:1px dotted white; }

    /* Window chrome */
    .win {
      position:absolute; display:none; flex-direction:column;
      min-width:280px; min-height:140px; background:var(--gray);
      border-top:2px solid var(--light-gray); border-left:2px solid var(--light-gray);
      border-right:2px solid var(--black); border-bottom:2px solid var(--black);
      box-shadow:inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--dark-gray), 3px 3px 10px rgba(0,0,0,.4);
    }
    .win-titlebar {
      display:flex; align-items:center; justify-content:space-between;
      padding:3px 4px; flex-shrink:0; cursor:default;
      background:linear-gradient(90deg, var(--blue) 0%, #1084d0 100%);
    }
    .win.inactive .win-titlebar { background:linear-gradient(90deg, var(--dark-gray) 0%, #a0a0a0 100%); }
    .win-titlebar-left {
      display:flex; align-items:center; gap:5px;
      color:white; font-weight:bold; font-size:12px;
      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    }
    .win-titlebar-left img { width:16px; height:16px; image-rendering:pixelated; flex-shrink:0; }
    .win-titlebar-btns { display:flex; gap:2px; flex-shrink:0; }
    .win-titlebar-btns button {
      width:16px; height:14px; font-size:9px; font-weight:bold; line-height:1;
      cursor:pointer; padding:0; font-family:sans-serif; background:var(--gray);
      border-top:1px solid var(--white); border-left:1px solid var(--white);
      border-right:1px solid var(--black); border-bottom:1px solid var(--black);
    }
    .win-titlebar-btns button:active {
      border-top:1px solid var(--black); border-left:1px solid var(--black);
      border-right:1px solid var(--white); border-bottom:1px solid var(--white);
    }
    .win-iframe {
      flex:1; width:100%; border:none; background:white; display:block;
      border-top:2px solid var(--black); border-left:2px solid var(--black);
      border-right:2px solid var(--light-gray); border-bottom:2px solid var(--light-gray);
      box-shadow:inset 1px 1px 0 var(--dark-gray), inset -1px -1px 0 var(--white);
    }
    .win-resize-handle {
      position:absolute; bottom:0; right:0; width:14px; height:14px;
      cursor:se-resize; z-index:10;
      background:linear-gradient(135deg,
        transparent 33%, var(--dark-gray) 33%, var(--dark-gray) 46%,
        transparent 46%, transparent 60%, var(--dark-gray) 60%, var(--dark-gray) 73%,
        transparent 73%);
    }

    /* Taskbar */
    #taskbar {
      position:fixed; bottom:0; left:0; right:0; height:28px;
      background:var(--gray); border-top:2px solid var(--light-gray);
      box-shadow:inset 0 1px 0 var(--white);
      display:flex; align-items:center; padding:2px; gap:2px; z-index:99999;
    }
    #start-btn {
      display:flex; align-items:center; gap:4px; font-weight:bold;
      padding:2px 6px 2px 3px; height:22px; cursor:pointer; white-space:nowrap;
      background:var(--gray); font-family:var(--font); font-size:13px;
      border-top:1px solid var(--white); border-left:1px solid var(--white);
      border-right:1px solid var(--black); border-bottom:1px solid var(--black);
      box-shadow:inset 1px 1px 0 var(--light-gray), inset -1px -1px 0 var(--dark-gray);
    }
    #start-btn:active { border-color:var(--black) var(--white) var(--white) var(--black); }
    #start-btn img { height:16px; image-rendering:pixelated; }
    .taskbar-div { width:2px; height:20px; margin:0 3px; border-left:1px solid var(--dark-gray); border-right:1px solid var(--white); }
    #taskbar-apps { display:flex; gap:2px; flex:1; overflow:hidden; }
    .task-btn {
      display:flex; align-items:center; gap:4px; padding:0 6px;
      height:22px; max-width:180px; min-width:80px; font-size:11px; cursor:pointer;
      font-family:var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      border-top:1px solid var(--black); border-left:1px solid var(--black);
      border-right:1px solid var(--light-gray); border-bottom:1px solid var(--light-gray);
      box-shadow:inset 1px 1px 0 var(--dark-gray), inset -1px -1px 0 var(--white);
      background:var(--gray); font-weight:bold;
    }
    .task-btn img { width:16px; height:16px; image-rendering:pixelated; flex-shrink:0; }
    .task-btn.active { border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray); border-right:1px solid var(--white); border-bottom:1px solid var(--white); background:#b8b8b8; }
    #tray {
      margin-left:auto; display:flex; align-items:center; gap:5px;
      padding:2px 6px; height:22px; background:var(--gray); font-size:11px;
      border-top:1px solid var(--dark-gray); border-left:1px solid var(--dark-gray);
      border-right:1px solid var(--white); border-bottom:1px solid var(--white);
      box-shadow:inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--light-gray);
    }
    #tray img { height:16px; image-rendering:pixelated; }

    /* Start menu */
    #start-menu {
      display:none; position:fixed; bottom:28px; left:0; width:220px;
      background:var(--gray);
      border-top:2px solid var(--light-gray); border-left:2px solid var(--light-gray);
      border-right:2px solid var(--black); border-bottom:2px solid var(--black);
      box-shadow:inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--dark-gray), 2px 2px 8px rgba(0,0,0,.4);
      z-index:99998; flex-direction:row;
    }
    #start-menu.visible { display:flex; }
    .sm-stripe {
      width:28px;
      background:linear-gradient(180deg, #1084d0, var(--blue));
      display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
      writing-mode:vertical-rl; transform:rotate(180deg);
      color:rgba(255,255,255,0.45); font-size:16px; font-weight:bold; letter-spacing:2px;
    }
    .sm-items { flex:1; padding:2px 0; }
    .sm-item { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; cursor:pointer; font-size:12px; }
    .sm-item:hover { background:var(--blue); color:white; }
    .sm-item img { width:24px; height:24px; image-rendering:pixelated; }
    .sm-sep { border-top:1px solid var(--dark-gray); border-bottom:1px solid var(--white); margin:3px 5px; }

    /* BSOD */
    #bsod {
      display:none; position:fixed; inset:0; background:#0000AA;
      color:white; font-family:'Courier New',monospace; font-size:18px;
      padding:8% 10%; z-index:999998; cursor:none;
    }