/* SEBBEUG OS - feuille de style principale
   Extrait de index.html le 20/07/2026. Voir NOTES-REPRISE.md */

  :root{
    --teal:      #0e807a;   /* fond bureau */
    --teal-dk:   #0a635e;
    --face:      #c7c7bd;   /* gris chaud, biais vert */
    --face-lt:   #deded5;
    --hi:        #ffffff;   /* lumiere biseau */
    --sh:        #82827a;   /* ombre biseau */
    --sh-dk:     #3a3a34;   /* ombre profonde */
    --ink:       #14140f;
    --ink-dim:   #55554c;
    --navy:      #0a1a8c;   /* barre de titre active */
    --navy-lt:   #1f7bd6;
    --sega:      #d81222;   /* accent Mega Drive / dossier piratage */
    --ui: "Tahoma","MS Sans Serif","Geneva","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
    --mono: "Consolas","Lucida Console","Courier New",monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0}

  html,body{height:100%}
  body{
    font-family:var(--ui);
    color:var(--ink);
    font-size:13px;
    background:var(--teal);
    background-image:
      linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
      linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%);
    background-size:4px 4px;
    background-position:0 0, 2px 2px;
    min-height:100%;
    overflow-x:hidden;
    -webkit-font-smoothing:none;
  }

  /* ---------- biseaux facon 95 ---------- */
  .bevel-out{
    border:1px solid var(--sh-dk);
    box-shadow:inset 1px 1px var(--hi), inset -1px -1px var(--sh),
               inset 2px 2px var(--face-lt), inset -2px -2px var(--sh);
    background:var(--face);
  }
  .bevel-in{
    border:1px solid var(--hi);
    box-shadow:inset 1px 1px var(--sh), inset -1px -1px var(--hi),
               inset 2px 2px var(--sh-dk);
    background:#b9b9af;
  }

  a{color:inherit;text-decoration:none}

  /* ============ ZONE BUREAU ============ */
  .desk{
    min-height:100vh;
    padding:14px 14px 56px;
    display:flex; gap:18px; align-items:flex-start;
  }

  .shortcuts{
    display:flex; flex-direction:column; gap:14px;
    flex:0 0 88px;
  }
  .sc{
    width:80px; text-align:center; cursor:pointer;
    color:#fff; background:transparent; border:1px dotted transparent;
    padding:4px 2px; display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .sc svg{width:34px;height:34px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4))}
  .sc span{
    font-size:11.5px; line-height:1.2; color:#fff;
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    padding:1px 3px;
  }
  .sc:hover span{background:var(--navy)}
  .sc:focus-visible{outline:1px dotted #fff;outline-offset:2px}

  /* ============ FENETRE PRINCIPALE ============ */
  .win{
    flex:1 1 auto;
    max-width:820px;
    margin:8px auto 0;
    padding:3px;
  }
  .win__bar{
    display:flex; align-items:center; gap:8px;
    background:linear-gradient(90deg,var(--navy),var(--navy-lt));
    color:#fff; padding:3px 4px 3px 6px;
    font-weight:700; letter-spacing:.3px;
  }
  .win__bar .ico{width:16px;height:16px;flex:0 0 16px}
  .win__bar .t{flex:1 1 auto; font-size:12.5px; text-shadow:1px 1px 0 rgba(0,0,0,.35)}
  .win__ctrls{display:flex; gap:3px}
  .win__ctrls button{
    width:18px;height:16px; font-family:var(--mono); font-size:10px; font-weight:700;
    line-height:1; color:var(--ink); cursor:pointer;
    display:grid;place-items:center;
  }
  .win__menu{
    display:flex; gap:2px; padding:3px 4px;
    background:var(--face); border-bottom:1px solid var(--sh);
    font-size:12.5px; position:relative; z-index:6;
  }
  .mb{position:relative}
  .mb__label{display:inline-block; padding:2px 8px; cursor:default}
  .mb__label u{text-decoration:underline}
  .mb.open .mb__label, .mb__label:hover{background:var(--navy); color:#fff}
  .mb__drop{
    display:none; position:absolute; top:100%; left:0; min-width:196px;
    background:var(--face); color:var(--ink); padding:3px; z-index:200;
    border:1px solid var(--sh-dk);
    box-shadow:inset 1px 1px var(--hi), inset -1px -1px var(--sh), 3px 4px 9px rgba(0,0,0,.4);
  }
  .mb.open .mb__drop{display:block}
  .mb__i{position:relative; padding:4px 24px; white-space:nowrap; cursor:pointer}
  .mb__i:hover{background:var(--navy); color:#fff}
  .mb__i .chk{position:absolute; left:7px}
  .mb__sep{height:1px; margin:3px 4px; background:var(--sh); box-shadow:0 1px var(--hi)}

  .win__body{
    background:var(--face); padding:14px;
  }

  .banner{
    display:flex; align-items:center; gap:14px;
    padding:10px 14px; margin-bottom:14px;
    background:linear-gradient(180deg,#1b1b24,#0d0d13);
    border:1px solid var(--sh-dk);
    box-shadow:inset 1px 1px rgba(255,255,255,.12), inset -1px -1px rgba(0,0,0,.6);
  }
  .banner__logo{
    font-family:var(--mono); font-weight:700;
    font-size:clamp(15px,3.4vw,24px); letter-spacing:1px; line-height:1;
    color:#37e07b; text-shadow:0 0 10px rgba(55,224,123,.5);
    white-space:nowrap;
  }
  .banner__logo b{color:#ffb43e}
  .banner__sub{color:#9aa0b4; font-size:11.5px; letter-spacing:.6px}
  .banner__sub b{color:#2bd9ff}

  .progs{
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  }
  .prog{
    display:flex; align-items:center; gap:13px;
    padding:11px 12px; cursor:pointer;
    background:var(--face-lt);
    border:1px solid var(--sh-dk);
    box-shadow:inset 1px 1px var(--hi), inset -1px -1px var(--sh);
  }
  .prog:hover{background:#eef0e6}
  .prog:active{box-shadow:inset -1px -1px var(--hi), inset 1px 1px var(--sh)}
  .prog:focus-visible{outline:2px dotted var(--navy);outline-offset:1px}
  .prog svg{width:40px;height:40px;flex:0 0 40px}
  .prog__t{font-weight:700; font-size:13.5px; margin-bottom:2px}
  .prog__d{font-size:11.5px; color:var(--ink-dim); line-height:1.35}

  /* dossier piratage : group box inset */
  .dossier{
    grid-column:1 / -1;
    margin-top:6px; padding:14px 12px 12px; position:relative;
    background:#bdbdb3;
    border:1px solid var(--hi);
    box-shadow:inset 1px 1px var(--sh), inset -1px -1px var(--hi);
  }
  .dossier__lg{
    position:absolute; top:-9px; left:12px;
    background:var(--face); padding:1px 8px 1px 6px;
    font-weight:700; font-size:12px; letter-spacing:.5px;
    border:1px solid var(--sh-dk);
    box-shadow:inset 1px 1px var(--hi);
    display:flex; align-items:center; gap:6px;
  }
  .dossier__lg svg{width:15px;height:15px}
  .dossier__lg b{color:var(--sega)}
  .dossier__note{font-size:11px; color:var(--ink-dim); margin:2px 2px 11px}
  .dossier .row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
  .prog--pirate{background:#e9e6dd}
  .prog--pirate:hover{background:#f2efe6}

  @media (max-width:720px){
    .progs{grid-template-columns:1fr}
    .dossier .row{grid-template-columns:1fr}
    .shortcuts{flex-direction:row; flex:0 0 auto; flex-wrap:wrap; order:2}
    .desk{flex-direction:column}
    .win{order:1;max-width:none;width:100%}
  }

  /* ============ BARRE DES TACHES ============ */
  .taskbar{
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    height:40px; display:flex; align-items:center; gap:6px;
    padding:3px 4px;
    background:var(--face);
    border-top:1px solid var(--hi);
    box-shadow:inset 0 1px var(--face-lt);
  }
  .start{
    display:flex; align-items:center; gap:7px;
    padding:3px 12px 3px 8px; height:30px; cursor:pointer;
    font-weight:800; font-size:13px;
  }
  .start.open{box-shadow:inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--face-lt), inset 2px 2px var(--sh-dk)}
  .start svg{width:20px;height:20px}
  .tb-sep{width:2px;height:26px;box-shadow:inset 1px 0 var(--sh),inset -1px 0 var(--hi);margin:0 2px}
  .tray{
    margin-left:auto; display:flex; align-items:center; gap:8px;
    height:30px; padding:0 10px;
  }
  .tray a{display:grid;place-items:center;width:20px;height:20px}
  .tray a svg{width:18px;height:18px}
  .tray a:hover{box-shadow:inset 1px 1px var(--sh),inset -1px -1px var(--hi)}
  .clock{
    font-family:var(--mono); font-size:12px; padding:4px 10px; height:26px;
    display:flex;align-items:center;
    box-shadow:inset 1px 1px var(--sh), inset -1px -1px var(--hi);
    min-width:64px; justify-content:center;
  }

  /* ============ MENU DEMARRER ============ */
  .startmenu{
    position:fixed; left:4px; bottom:44px; z-index:600;
    width:270px; padding:3px;
    display:none;
  }
  .startmenu.open{display:block}
  .startmenu__spine{
    position:absolute; left:3px; top:3px; bottom:3px; width:26px;
    background:linear-gradient(180deg,var(--navy),#0a0a3a);
    writing-mode:vertical-rl; transform:rotate(180deg);
    color:#fff; font-weight:800; font-size:15px; letter-spacing:2px;
    text-align:center; padding:8px 0;
    font-family:var(--mono);
  }
  .startmenu__list{margin-left:30px; padding:3px 0}
  .sm-h{font-size:10.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px;padding:6px 12px 2px}
  .sm-i{display:flex;align-items:center;gap:10px;padding:6px 12px;cursor:pointer}
  .sm-i svg{width:20px;height:20px;flex:0 0 20px}
  .sm-i:hover{background:var(--navy);color:#fff}
  .sm-i b{font-weight:700}
  .sm-sep{height:1px;margin:4px 8px;box-shadow:0 1px var(--hi);background:var(--sh)}

  /* ============ FENETRE OVERLAY (utilitaires) ============ */
  #bas{
    position:fixed; inset:0; z-index:1000; display:none;
    background:rgba(4,40,38,.5);
    align-items:center; justify-content:center; padding:20px;
  }
  #bas.open{display:flex}
  .owin{
    width:min(640px,100%); max-height:84vh;
    display:flex; flex-direction:column; padding:3px;
  }
  .owin__bar{
    display:flex; align-items:center; gap:8px;
    background:linear-gradient(90deg,var(--navy),var(--navy-lt));
    color:#fff; padding:3px 4px 3px 8px; font-weight:700;
  }
  .owin__bar .t{flex:1 1 auto; font-size:12.5px}
  .owin__bar button{
    width:20px;height:18px;font-family:var(--mono);font-size:11px;font-weight:700;
    cursor:pointer;color:var(--ink);display:grid;place-items:center;
  }
  .owin__body{
    background:var(--face); padding:16px; overflow:auto;
    font-family:Verdana,Geneva,var(--ui); font-size:13px; line-height:1.5;
  }
  .owin__body img{max-width:100%;height:auto}
  .owin__body a{color:var(--navy);text-decoration:underline}
  .owin__body input[type=text],.owin__body input[type=email],.owin__body textarea{
    font-family:var(--ui); font-size:13px; padding:4px; margin:2px 0;
    border:1px solid var(--sh); box-shadow:inset 1px 1px var(--sh-dk);
    background:#f4f4ec; max-width:100%;
  }
  /* Style historique des boutons des utilitaires (sert encore au "Rechercher"
     de iptracer.php, qui n'a pas de classe). Exclut .pbtn : sinon ce selecteur
     ecrasait le bouton Envoyer du formulaire de contact et lui remettait un
     margin-top, d'ou deux boutons de hauteurs differentes. */
  .owin__body button[type=submit]:not(.pbtn){
    font-family:var(--ui); font-size:12px; font-weight:700; padding:4px 14px;
    cursor:pointer; margin-top:6px;
    border:1px solid var(--sh-dk);
    box-shadow:inset 1px 1px var(--hi), inset -1px -1px var(--sh), inset 2px 2px var(--face-lt), inset -2px -2px var(--sh);
    background:var(--face);
  }
  .owin__body ul{list-style:none}
  #result{min-height:20px}
  #show{margin-top:6px}
  .cachemoi{display:none}

  /* ---- formulaire de contact (facon boite de dialogue 95) ---- */
  .cform__head{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
  .cform__icon{width:32px; height:32px; flex:0 0 32px}
  .cform__lead{margin:0; font-size:12.5px; line-height:1.45}

  /* group box : bordure "gravee" (1px sombre puis 1px clair), comme les
     fieldsets de Win95. Le fond du legend masque le trait qui passe dessous. */
  .grp{
    border:1px solid var(--sh); border-right-color:var(--hi); border-bottom-color:var(--hi);
    padding:14px 14px 12px; margin:0;
  }
  .grp > legend{padding:0 5px; font-weight:700; font-size:12px; background:var(--face)}

  .frow{display:flex; align-items:center; gap:10px; margin-bottom:12px}
  .frow--top{align-items:flex-start; margin-bottom:0}
  .frow > label{flex:0 0 118px; text-align:right; font-size:12.5px}
  .frow > input,.frow > textarea{flex:1 1 auto; min-width:0; margin:0}
  .frow > textarea{resize:vertical; font-family:var(--ui)}
  .frow > input:focus,.frow > textarea:focus{outline:1px dotted var(--ink); outline-offset:1px}
  .frow > input:invalid:not(:placeholder-shown),
  .frow > textarea:invalid:not(:placeholder-shown){background:#fff4f4}

  .cform__note{margin:8px 0 0 128px; font-size:11px; color:#4a4a42}
  /* align-items:center plutot que le "stretch" par defaut : une marge residuelle
     sur un seul bouton ne peut plus creer une difference de hauteur. */
  .cform__btns{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:14px}
  .cform__btns .pbtn{min-width:88px; margin:0; padding:4px 16px; font-size:12px; line-height:1.35}

  /* barre d'etat : panneau enfonce + pastille de couleur, plutot que du
     texte vert. La couleur reste un accent, le texte se lit en noir. */
  #show:empty{display:none}
  .msg{
    display:flex; align-items:baseline; gap:8px; margin:14px 0 0; padding:7px 10px;
    font-size:12.5px; background:var(--face);
    border:1px solid var(--hi); border-right-color:var(--sh); border-bottom-color:var(--sh);
    box-shadow:inset 1px 1px var(--sh-dk);
  }
  .msg::before{content:""; flex:0 0 9px; width:9px; height:9px; align-self:center; border:1px solid rgba(0,0,0,.35)}
  .msg--ok::before  {background:#137a2b}
  .msg--err::before {background:var(--sega)}
  .msg--warn::before{background:#c98a00}
  .msg--wait::before{background:var(--sh)}
  .msg--wait{color:#4a4a42}

  @media (max-width:520px){
    .frow{flex-direction:column; align-items:stretch; gap:4px}
    .frow > label{flex:none; text-align:left; font-weight:700}
    .cform__note{margin-left:0}
  }

  /* ---- test de connexion (facon moniteur de performances 95) ---- */
  /* .cform__note porte un margin-left:128px pour s'aligner sur la colonne des
     libelles du formulaire de contact. Ici il n'y a pas de colonne : on annule. */
  .stest .cform__note{margin-left:0}

  .st__head{display:flex; align-items:baseline; gap:7px; margin-bottom:10px}
  .st__val{font-family:var(--mono); font-size:34px; font-weight:700; line-height:1; color:var(--ink)}
  .st__unit{font-size:13px; font-weight:700}
  .st__phase{margin-left:auto; font-size:11.5px; color:#4a4a42}

  /* le canvas est en 1120x180 pour rester net sur ecran HiDPI, affiche en 2x moins */
  .st__graph{display:block; width:100%; height:90px; background:#07120a}

  .st__bar{height:16px; margin-top:10px; background:#f4f4ec; padding:2px}
  .st__bar > i{display:block; height:100%; width:0; background:var(--navy); transition:width .2s linear}

  .st__res{margin-top:14px; display:none}
  .st__res.is-on{display:block}
  .st__dl{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0; font-size:12.5px}
  .st__dl dt{font-weight:700}
  .st__dl dd{margin:0; font-family:var(--mono)}
  .st__verdict{margin:12px 0 0; padding-top:10px; border-top:1px solid var(--sh); font-size:12.5px; font-weight:700}

  @media (max-width:520px){
    .st__val{font-size:27px}
    .st__phase{flex-basis:100%; margin-left:0}
    .st__dl{grid-template-columns:1fr; gap:2px}
    .st__dl dd{margin-bottom:7px}
  }

  /* ---- IP Tracer ---- */
  .tracer .cform__note{margin-left:0}
  .tracer__hint{margin:8px 0 0 128px; font-size:11px; color:#4a4a42}
  .tracer__hint code{font-family:var(--mono)}

  .tracer__res{margin-top:14px}
  .tracer__top{display:flex; align-items:center; gap:12px; margin-bottom:12px;
               padding-bottom:12px; border-bottom:1px solid var(--sh)}
  /* bordure fine : beaucoup de drapeaux ont du blanc sur les bords */
  .tracer__flag{flex:0 0 auto; border:1px solid var(--sh); display:block}
  .tracer__lieu{margin:0; font-size:15px; font-weight:700; line-height:1.25}
  .tracer__ip{margin:3px 0 0; font-size:12px}
  .tracer__ip code{font-family:var(--mono)}
  .tracer__ip span{margin-left:6px; padding:1px 5px; font-size:10.5px; font-weight:700;
                   background:var(--navy); color:#fff}

  .tracer__map{margin:12px 0 0; font-size:12.5px}
  .tracer__coord{margin-left:8px; font-family:var(--mono); font-size:11.5px; color:#4a4a42}
  .tracer__src{margin:10px 0 0; padding-top:9px; border-top:1px solid var(--sh);
               font-size:11px; color:#4a4a42}

  @media (max-width:520px){
    .tracer__hint{margin-left:0}
    .tracer__top{flex-wrap:wrap}
  }

  .maquette-tip{display:none}

  /* ---- fenetres deplacables (facon 95) ---- */
  .win__bar,.owin__bar{cursor:move; user-select:none; -webkit-user-select:none; touch-action:none}
  .win__bar button,.owin__bar button{cursor:pointer}
  .win.dragging,.owin.dragging{opacity:.97}

  /* ============ ECRAN DE BOOT (facon 95) ============ */
  #boot{
    position:fixed; inset:0; z-index:3000;
    background:#0a0a0a; color:#e8e8e8;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
    font-family:var(--mono); text-align:center;
    transition:opacity .55s ease;
  }
  #boot.hide{opacity:0; visibility:hidden; pointer-events:none}
  .boot__logo{display:flex; align-items:center; gap:18px}
  .boot__flag{
    display:grid; grid-template-columns:repeat(2,20px); grid-template-rows:repeat(2,20px);
    gap:3px; transform:perspective(220px) rotateY(-18deg);
    filter:drop-shadow(2px 3px 0 rgba(0,0,0,.6));
  }
  .boot__flag i{display:block}
  .boot__flag i:nth-child(1){background:#d81222}
  .boot__flag i:nth-child(2){background:#37e07b}
  .boot__flag i:nth-child(3){background:#2bd9ff}
  .boot__flag i:nth-child(4){background:#ffb43e}
  .boot__word{text-align:left; line-height:1.1}
  .boot__word .n{font-size:30px; font-weight:800; letter-spacing:1px}
  .boot__word .n b{color:#37e07b}
  .boot__word .v{font-size:30px; font-weight:300; opacity:.85}
  .boot__tag{font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#7f8aa0; margin-top:5px}
  .boot__bar{display:flex; flex-direction:column; align-items:center; gap:11px}
  .boot__trough{
    width:240px; height:20px; overflow:hidden; position:relative;
    background:#151515; border:2px solid #000;
    box-shadow:inset 1px 1px #333, inset -1px -1px #000;
  }
  .boot__trough::before{
    content:""; position:absolute; top:2px; bottom:2px; left:0; width:66px;
    background:repeating-linear-gradient(90deg,#1f7bd6 0 10px,#0a1a8c 10px 15px);
    animation:bootbar 1.15s linear infinite;
  }
  @keyframes bootbar{from{transform:translateX(-70px)}to{transform:translateX(244px)}}
  .boot__txt{font-size:12px; color:#9aa0b4}
  .boot__skip{position:fixed; bottom:16px; right:18px; font-size:11px; color:#555; letter-spacing:.5px}

  /* ============ FENETRES FLOTTANTES (corbeille + jeu) ============ */
  .fwin{ position:fixed; z-index:700; display:none; padding:3px; }
  .fwin.open{ display:block }
  .fwin__bar{
    display:flex; align-items:center; gap:8px; cursor:move;
    user-select:none; -webkit-user-select:none; touch-action:none;
    background:linear-gradient(90deg,var(--navy),var(--navy-lt)); color:#fff;
    padding:3px 4px 3px 8px; font-weight:700;
  }
  .fwin__bar .ico{width:16px;height:16px;flex:0 0 16px}
  .fwin__bar .t{flex:1 1 auto; font-size:12.5px}
  .fwin__bar button{
    width:20px;height:18px;font-family:var(--mono);font-size:11px;font-weight:700;
    cursor:pointer;color:var(--ink);display:grid;place-items:center;
  }
  .fwin__menu{display:flex;gap:2px;padding:3px 4px;background:var(--face);border-bottom:1px solid var(--sh);font-size:12.5px}
  .fwin__menu span{padding:2px 8px;cursor:default}
  .fwin__menu span:hover{background:var(--navy);color:#fff}
  .fwin__body{background:var(--face);padding:12px}

  /* corbeille */
  #binwin{ width:404px; top:74px; left:130px; }
  .bin-status{font-size:11.5px;color:var(--ink-dim);margin-bottom:10px;border-bottom:1px solid var(--sh);padding-bottom:8px}
  .bin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .bfile{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:8px 4px;cursor:pointer;border:1px solid transparent;text-align:center;
  }
  .bfile svg{width:32px;height:32px}
  .bfile span{font-size:10px;line-height:1.15;color:var(--ink);white-space:nowrap}
  .bfile:hover{background:var(--navy);border-color:#000}
  .bfile:hover span{color:#fff}
  .bfile.exe span{font-weight:700}

  /* jeu SEBMAN */
  #gamewin{ top:58px; left:50%; margin-left:-187px; }
  .game-hud{display:flex;align-items:center;gap:16px;padding:4px 2px 10px;font-family:var(--mono);font-size:13px}
  .game-hud .sc-score b{color:var(--navy)}
  .game-hud .lives{color:#d81222;letter-spacing:2px;font-size:15px}
  .game-hud .hint{margin-left:auto;font-size:10px;color:var(--ink-dim)}
  #gameCanvas{display:block;background:#000;border:2px solid #000;box-shadow:inset 1px 1px #333;max-width:100%}
  .game-msg{text-align:center;font-family:var(--mono);font-size:12.5px;padding:8px 0 2px;min-height:18px;color:var(--navy);font-weight:700}

  /* bloc-notes (visionneuse de fichier) */
  #notewin{ width:360px; top:120px; left:190px; }
  .note-body{
    background:#fff; color:#111; font-family:var(--mono); font-size:13px;
    padding:14px; min-height:88px; white-space:pre-wrap;
    box-shadow:inset 1px 1px var(--sh-dk), inset -1px -1px var(--hi);
  }

  /* boutons poussoirs */
  .pbtn{
    font-family:var(--ui); font-size:12px; font-weight:700; padding:4px 16px; cursor:pointer; min-width:76px;
    border:1px solid var(--sh-dk); color:var(--ink); background:var(--face);
    box-shadow:inset 1px 1px var(--hi), inset -1px -1px var(--sh), inset 2px 2px var(--face-lt), inset -2px -2px var(--sh);
  }
  .pbtn:active{ box-shadow:inset -1px -1px var(--hi), inset 1px 1px var(--sh); }
  /* bouton grise facon 95 : texte en relief clair, pas de clic */
  .pbtn:disabled{ color:var(--sh); text-shadow:1px 1px var(--hi); cursor:default; }
  .pbtn:disabled:active{ box-shadow:inset 1px 1px var(--hi), inset -1px -1px var(--sh), inset 2px 2px var(--face-lt), inset -2px -2px var(--sh); }

  /* boite Executer */
  #runwin{ width:344px; top:150px; left:220px; }
  .run__lbl{ font-size:12px; margin-bottom:12px; }
  .run__row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .run__row span{ font-size:12px; }
  .run__row input{ flex:1 1 auto; font-family:var(--ui); font-size:13px; padding:4px; background:#fff; color:#111; border:1px solid var(--sh); box-shadow:inset 1px 1px var(--sh-dk); }
  .run__hint{ font-size:10.5px; color:var(--ink-dim); margin-bottom:14px; }
  .run__btns{ display:flex; gap:8px; justify-content:flex-end; }
  .run__err{ color:#b00020; font-size:11px; margin-top:10px; min-height:14px; }

  /* boite A propos */
  #aboutwin{ width:330px; top:130px; left:210px; }
  .about__head{ display:flex; gap:14px; align-items:center; }
  .about__flag{ display:grid; grid-template-columns:repeat(2,18px); grid-template-rows:repeat(2,18px); gap:2px; flex:0 0 auto; }
  .about__flag i{ display:block; }
  .about__flag i:nth-child(1){background:#d81222}
  .about__flag i:nth-child(2){background:#37e07b}
  .about__flag i:nth-child(3){background:#2bd9ff}
  .about__flag i:nth-child(4){background:#ffb43e}
  .about__name{ font-family:var(--mono); font-weight:800; font-size:19px; letter-spacing:.5px; }
  .about__ver{ font-size:11.5px; color:var(--ink-dim); }
  .about__sep{ height:1px; background:var(--sh); box-shadow:0 1px var(--hi); margin:11px 0; }
  .about__specs div{ font-size:12px; line-height:1.55; }
  .about__cr{ margin-top:8px; font-size:11px; color:var(--ink-dim); }
  .about__btns{ display:flex; justify-content:flex-end; margin-top:14px; }

  /* boite Acces refuse (.htaccess) */
  #denywin{ width:342px; top:170px; left:250px; }
  .deny__row{ display:flex; gap:14px; align-items:flex-start; }
  .deny__row svg{ width:32px; height:32px; flex:0 0 auto; }
  .deny__msg{ font-size:12px; line-height:1.55; }
  .deny__sub{ font-size:11px; color:var(--ink-dim); margin-top:8px; min-height:14px; }
  .deny__btns{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

  /* ecran d'arret */
  #shutdown{ position:fixed; inset:0; z-index:4000; display:none; background:#0a0a0a;
    flex-direction:column; align-items:center; justify-content:center; }
  #shutdown.open{ display:flex; }
  .sd__box{ display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; }
  .sd__box p{ color:#ffb000; font-family:var(--mono); font-size:21px; line-height:1.6; text-shadow:0 0 14px rgba(255,176,0,.4); }

  /* ecran bleu (update.dat) */
  #bsod{ position:fixed; inset:0; z-index:5000; display:none; background:#0000aa;
    align-items:center; justify-content:center; cursor:pointer; }
  #bsod.open{ display:flex; }
  .bsod__txt{ font-family:var(--mono); color:#c8c8c8; font-size:16px; line-height:1.5;
    max-width:74ch; padding:20px; text-align:center; }
  .bsod__ttl{ display:inline-block; background:#c8c8c8; color:#0000aa; padding:0 8px; margin-bottom:1.8em; font-weight:700; }
  .bsod__txt p{ margin:0 0 1.5em; text-align:left; }
  .bsod__txt p.c{ text-align:center; margin-bottom:0; }
  .bsod__cur{ animation:bsodblink 1.1s step-end infinite; }
  @keyframes bsodblink{ 50%{ opacity:0 } }
  @media (max-width:720px){ .bsod__txt{ font-size:12px; padding:12px; } }

  @media (max-width:720px){ #gamewin,#binwin,#notewin,#runwin,#aboutwin,#denywin{ left:8px; right:8px; margin-left:0; width:auto; } }

  /* Winamp (Webamp) : Webamp centre ses fenetres DANS son conteneur. On place donc le
     conteneur en bas a droite pour que le lecteur n'atterrisse pas sur le Gestionnaire
     de programmes. pointer-events:none pour laisser le bureau cliquable autour. */
  #winampHost{
    position:fixed; right:10px; bottom:52px;
    width:300px; height:250px;
    z-index:550; pointer-events:none;
  }
  #winampHost > *{ pointer-events:auto; }
  @media (max-width:720px){ #winampHost{ right:0; left:0; width:auto; } }

  @media (prefers-reduced-motion:reduce){ *{animation:none!important} }