/** Shopify CDN: Minification failed

Line 11:0 Unexpected "@font-face"
Line 405:0 Unexpected "@media"
Line 449:0 Expected identifier but found "#app"

**/
#app /* Polices auto-hebergees : aucune dependance externe,#app et le rendu ne depend
   plus de la disponibilite de Google Fonts. Silkscreen et VT323 sont sous
   licence SIL Open Font,#app qui autorise la redistribution. */
@font-face{font-family:'Silkscreen';src:url(font-silkscreen.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url(font-silkscreen-bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'VT323';src:url(font-vt323.ttf) format('truetype');font-weight:400;font-display:swap}


@font-face{font-family:'PackTahoma';src:url(font-tahoma.ttf) format('truetype');font-display:swap}
:root{
  --px:'Silkscreen','Courier New',monospace;
  --ui:'PackTahoma',Tahoma,sans-serif;
  --term:'VT323',monospace;
  --face:#c0c0c0;
  --desk:#3a5a5c;
  --tb-a:#000082;
  --tb-b:#1084d0;
  --tb-off-a:#808080;
  --tb-off-b:#b5b5b5;
  --sel:#000082;
  --lcd:#000;
  --lcd-ink:#22c55e;
  --cur:url(cur-arrow.png) 0 0, auto;
  --cur-beam:url(cur-beam.png) 11 11, text;
  --cur-busy:url(cur-busy.png) 11 11, wait;
}
#app, #app *{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:#000;font-family:var(--ui);font-size:12px;
  overflow:hidden;user-select:none;cursor:var(--cur);
}
#app img{display:block;image-rendering:pixelated}
#app input{cursor:var(--cur-beam)}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}
/* ================= 1. BIOS ================= */
#app #bios{
  position:absolute;inset:0;background:#000;color:#c8c8c8;z-index:900;cursor:var(--cur-busy);
  font-family:var(--term);font-size:20px;line-height:1.4;padding:24px 30px;
}
#app #bios .hd{color:#fff;margin-bottom:14px}
#app #bios p{margin:0}
#app #bios .ok{color:#4fd67a}
#app #bios .cur{display:inline-block;width:9px;height:15px;background:#c8c8c8;animation:bl 1s steps(1) infinite;vertical-align:-2px}
@keyframes bl{50%{opacity:0}}
#app #bios .skip{position:absolute;left:30px;bottom:20px;color:#575757;font-size:16px}
/* ================= 2. WINDOWS BOOT ================= */
#app #winboot{
  position:absolute;inset:0;background:#000;z-index:880;display:none;cursor:var(--cur-busy);
  flex-direction:column;align-items:center;justify-content:center;gap:40px;
}
#app #winboot .logo img{width:min(38vw,330px);height:auto}
#app #winboot .bar{
  width:230px;height:14px;padding:2px;overflow:hidden;position:relative;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #4a4a4a, inset -2px -2px #6a6a6a, inset 2px 2px #1a1a1a;
}
#app #winboot .bar i{
  position:absolute;top:2px;bottom:2px;width:52px;
  background:linear-gradient(90deg,#123a86,#3a7ee8,#123a86);
  animation:kitt 2.2s linear infinite;
}
@keyframes kitt{0%{left:-56px}100%{left:230px}}
#app #winboot .tag{position:absolute;bottom:38px;right:44px;color:#8a8a8a;font-family:var(--px);font-size:9px;letter-spacing:1px}
/* ================= 3. LOGIN ================= */
#app #login{position:absolute;inset:0;display:none;place-items:center;z-index:860;background:var(--desk) center/cover no-repeat}
#app #login::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.42)}
#app #login .stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
#app #login .plate{background:#fff;padding:16px 26px;box-shadow:2px 2px 0 rgba(0,0,0,.45)}
#app #login .plate img{width:min(34vw,300px);height:auto}
#app #login .box{width:334px;background:var(--face);padding:3px;box-shadow:2px 2px 0 rgba(0,0,0,.45)}
#app #login .fields{padding:16px 18px 6px}
#app #login .row{display:grid;grid-template-columns:52px 1fr;gap:9px;align-items:center;margin-bottom:8px;font-size:12px}
#app #login input{
  font-family:var(--ui);font-size:12px;padding:3px 5px;background:#fff;border:0;min-width:0;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #808080, inset -2px -2px #fff, inset 2px 2px #0a0a0a;
}
#app #login .go{padding:8px 18px 16px}
#app #login .go button{width:100%}
/* ================= CHROME ================= */
#app .titlebar{
  height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 2px 0 4px;
  background:linear-gradient(90deg,var(--tb-a),var(--tb-b));color:#fff;flex:none;
  font-family:var(--px);font-size:10px;letter-spacing:.3px;
}
#app .window.inactive .titlebar{background:linear-gradient(90deg,var(--tb-off-a),var(--tb-off-b))}
#app .titlebar .cap{display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap}
#app .titlebar .cap img{width:16px;height:16px;flex:none}
#app .tbtns{display:flex;gap:2px;flex:none}
#app .tbtn{
  width:16px;height:14px;background:var(--face);display:grid;place-items:center;cursor:var(--cur);
  font-family:var(--ui);font-size:9px;font-weight:700;color:#000;line-height:1;padding-bottom:1px;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .tbtn:active{box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080}
#app .btn{
  font-family:var(--ui);font-size:12px;padding:5px 14px;background:var(--face);color:#000;border:0;cursor:var(--cur);
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .btn:active:not(:disabled){box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080}
#app .btn:disabled{color:#808080;text-shadow:1px 1px 0 #fff}
#app .btn:focus-visible{outline:1px dotted #000;outline-offset:-4px}
/* ================= DESKTOP ================= */
#app #desktop{position:absolute;inset:0;display:none;background:var(--desk)}
#app .wall{position:absolute;inset:0 0 28px 0;overflow:hidden;background:var(--desk) center/cover no-repeat}
#app .copyline{
  position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--px);font-size:9px;
  color:#fff;letter-spacing:1px;text-shadow:1px 1px 0 #000;
}
#app .col{position:absolute;z-index:4;display:grid}
/* --- grande fenetre : la disposition d'origine --- */
/* Hauteur de rangee fixe (90px) : la position de la seconde grappe d'icones
   se deduit par le calcul, sans mesurer le DOM. La mesure echouait car la
   police pixel se substitue apres le premier rendu et decalait tout. */
#app .classic .col.left{left:12px;top:12px;grid-auto-flow:row;grid-auto-rows:90px;gap:0}
#app .classic .col.left2{left:12px;grid-auto-flow:column;grid-auto-rows:90px;gap:0 6px}
#app .classic .col.right{right:12px;top:12px;grid-auto-flow:row;grid-auto-rows:90px;gap:0}
#app .classic .col.right2{right:12px;grid-template-columns:repeat(2,84px);grid-auto-rows:90px;gap:0 6px}
/* --- petite fenetre : deux colonnes qui se replient --- */
#app .compact .col.left{left:10px;top:10px;grid-auto-flow:column;gap:4px 2px}
#app .compact .col.right{right:10px;top:10px;grid-auto-flow:column;gap:4px 2px;direction:rtl}
#app .compact .col.right .icon{direction:ltr}
#app .compact .col.left2,#app .compact .col.right2{display:none}
/* --- bouton d'entree qui appelle le clic --- */
#app #login .go button.ready{animation:callme 1.5s ease-in-out infinite}
#app #login .go button.ready::after{content:'';position:absolute;inset:3px;border:1px dotted #000;pointer-events:none}
#app #login .go button{position:relative}
@keyframes callme{
  0%,100%{background:var(--face)}
  50%{background:#dcdcd0}
}
#app .icon{width:84px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:var(--cur);padding:3px 2px}
#app .icon .art{width:48px;height:48px;display:grid;place-items:center}
#app .icon .art img{width:48px;height:48px}
#app .icon span{
  font-family:var(--px);font-size:9px;line-height:1.5;color:#fff;text-align:center;padding:2px 3px;
  text-shadow:1px 1px 0 #000;letter-spacing:.2px;
  /* Un nom de produit long tenait sur 3 lignes et debordait sur l'icone du
     dessous. Windows tronquait a 2 lignes : on fait pareil, la hauteur d'une
     icone devient previsible. Le nom complet reste en infobulle. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%;word-break:break-word;
}
#app .icon.sel span{-webkit-line-clamp:4}
#app .icon.sel span{background:var(--sel);outline:1px dotted #fff}
#app .icon.sel .art img{filter:brightness(.7) saturate(1.4)}
/* ================= WINDOWS ================= */
#app #layer{position:absolute;inset:0 0 28px 0;pointer-events:none}
#app .window{
  position:absolute;display:flex;flex-direction:column;pointer-events:auto;min-width:220px;
  background:var(--face);padding:3px;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff,
             2px 2px 0 rgba(0,0,0,.35);
}
#app .content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;margin-top:2px}
#app .menubar{display:flex;padding:1px 2px 3px;flex:none;font-size:12px}
#app .menubar span{padding:2px 7px}
#app .menubar span:hover{background:var(--sel);color:#fff}
#app .menubar u{text-decoration:underline}
#app .pane{
  flex:1;overflow:auto;background:#fff;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #808080, inset -2px -2px #fff, inset 2px 2px #0a0a0a;
}
#app .statusbar{height:20px;display:flex;gap:2px;padding:3px 0 0;flex:none;font-size:11px}
#app .statusbar div{
  padding:0 6px;display:flex;align-items:center;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .statusbar div:first-child{flex:1}
#app .pane::-webkit-scrollbar{width:16px;height:16px}
#app .pane::-webkit-scrollbar-track{background:#dfdfdf}
#app .pane::-webkit-scrollbar-thumb{
  background:#c0c0c0;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
/* ================= SHOP ================= */
#app .tiles{display:flex;flex-wrap:wrap;gap:2px;padding:8px;align-content:flex-start}
#app .tile{width:100px;padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:var(--cur);text-align:center}
#app .tile .shot{
  width:64px;height:78px;background:#e8e8e8 center/cover no-repeat;display:grid;place-items:center;
  font-family:var(--px);font-size:7px;color:#999;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .tile b{font-family:var(--px);font-size:8px;font-weight:400;line-height:1.7}
#app .tile .pr{font-family:var(--px);font-size:9px;color:#000082}
#app .tile.sel b,#app .tile.sel .pr{background:var(--sel);color:#fff}
#app .tile.sel .shot{filter:brightness(.85)}
#app .pdp{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:14px}
#app .pdp .shot{
  height:190px;background:#e8e8e8;display:grid;place-items:center;font-family:var(--px);font-size:8px;
  color:#999;text-align:center;padding:10px;line-height:2.2;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .pdp h3{font-family:var(--px);font-size:11px;margin:0 0 4px;line-height:1.6}
#app .pdp .sub{color:#555;margin-bottom:9px;font-size:11px}
#app .pdp .price{font-family:var(--px);font-size:15px;color:#000082;margin-bottom:12px}
#app .lab{font-family:var(--px);font-size:8px;color:#555;margin-bottom:5px;letter-spacing:.4px}
#app .sizes{display:flex;gap:4px;margin-bottom:13px}
#app .size{
  width:30px;height:26px;display:grid;place-items:center;cursor:var(--cur);font-size:11px;background:var(--face);
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .size.on{
  background:var(--sel);color:#fff;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
#app .size.out{color:#808080;text-shadow:1px 1px 0 #fff;text-decoration:line-through}
#app .pdp .add{width:100%;padding:8px;font-family:var(--px);font-size:9px}
#app .pdp .note{font-size:11px;color:#666;margin-top:9px;line-height:1.6}
#app .bag{padding:10px;display:flex;flex-direction:column;height:100%}
#app .bagrows{flex:1}
#app .bagrow{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;padding:6px 2px;border-bottom:1px dotted #808080;font-size:11px}
#app .bagrow .x{
  width:18px;height:18px;display:grid;place-items:center;cursor:var(--cur);font-size:9px;background:var(--face);
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .bagempty{padding:34px 12px;text-align:center;color:#666;line-height:1.9;font-size:11px}
#app .tot{display:flex;justify-content:space-between;font-family:var(--px);font-size:10px;padding:10px 2px 8px;
  border-top:1px solid #808080;margin-top:6px;color:#000082}
#app .co{width:100%;padding:9px;font-family:var(--px);font-size:9px}
#app .cofoot{font-size:10px;color:#666;text-align:center;margin-top:7px;line-height:1.7}
#app .notepane{font-family:var(--term);font-size:18px;line-height:1.45;padding:8px 10px;white-space:pre-wrap}
#app .stub{padding:28px 16px;text-align:center;color:#555;font-size:11px;line-height:2}
#app .dialog{padding:16px 18px 10px;display:flex;gap:14px;align-items:flex-start;line-height:1.7;font-size:12px}
#app .dialog img{width:32px;height:32px;flex:none}
#app .dlgbtns{display:flex;justify-content:center;gap:8px;padding:2px 0 14px}
#app .dlgbtns .btn{min-width:80px;text-align:center}
/* display properties */
#app .walls{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
#app .wallopt{width:96px;cursor:var(--cur);display:flex;flex-direction:column;align-items:center;gap:4px}
#app .wallopt .th{
  width:92px;height:69px;background:#000 center/cover no-repeat;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .wallopt span{font-family:var(--px);font-size:7px;text-align:center;line-height:1.6}
#app .wallopt.on span{background:var(--sel);color:#fff}
/* ================= SELECTION MARQUEE ================= */
#app #marquee{
  position:absolute;z-index:3;display:none;pointer-events:none;
  border:1px dotted #fff;background:rgba(255,255,255,.10);
}
/* ================= MINESWEEPER ================= */
#app .ms-wrap{padding:6px;background:var(--face)}
#app .ms-head{
  display:flex;align-items:center;justify-content:space-between;padding:5px;margin-bottom:6px;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .ms-led{
  background:#000;color:#f00;font-family:var(--term);font-size:26px;line-height:.9;padding:1px 4px;
  letter-spacing:2px;min-width:52px;text-align:right;font-variant-numeric:tabular-nums;
}
#app .ms-face{
  width:30px;height:30px;padding:0;background:var(--face);cursor:var(--cur);border:0;
  display:grid;place-items:center;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .ms-face img{width:24px;height:24px}
#app .ms-face:active{box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080}
#app .ms-grid{
  display:grid;gap:0;padding:3px;background:var(--face);width:max-content;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .ms-cell{
  width:26px;height:26px;background:var(--face);display:grid;place-items:center;cursor:var(--cur);
  box-shadow:inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #a8a8a8, inset 2px 2px #dfdfdf;
}
#app .ms-cell.open{box-shadow:inset 1px 1px #808080;background:#bdbdbd}
#app .ms-cell img{width:20px;height:20px}
/* ================= PAINT ================= */
#app .paint{display:flex;gap:4px;padding:4px;background:var(--face)}
#app .pt-tools{display:grid;grid-template-columns:repeat(2,26px);gap:2px;align-content:flex-start}
#app .pt-tool{
  width:26px;height:24px;display:grid;place-items:center;cursor:var(--cur);background:var(--face);
  font-family:var(--px);font-size:9px;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .pt-tool.on{box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;background:#dcdcdc}
#app .pt-right{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
#app .pt-canvas{
  background:#fff;cursor:crosshair;display:block;align-self:flex-start;width:300px;height:190px;flex:none;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .pt-bottom{display:flex;align-items:center;gap:6px}
#app .pt-swatches{display:grid;grid-template-columns:repeat(14,15px);grid-auto-rows:15px;gap:1px;flex:none}
#app .pt-sw{width:15px;height:15px;cursor:var(--cur);box-shadow:inset -1px -1px #fff, inset 1px 1px #808080}
#app .pt-cur{
  width:32px;height:32px;flex:none;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .pt-sizes{display:flex;gap:2px}
#app .pt-size{
  width:22px;height:22px;display:grid;place-items:center;cursor:var(--cur);background:var(--face);
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .pt-size.on{box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080}
#app .pt-size i{background:#000;display:block;border-radius:50%}
/* ================= GALLERY / LISTS ================= */
#app .gal{display:flex;flex-direction:column;height:100%;background:var(--face)}
#app .gal .view{
  flex:1;margin:4px;background:#000 center/contain no-repeat;min-height:150px;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .gal .ctl{display:flex;align-items:center;gap:5px;padding:0 4px 4px}
#app .gal .ctl .name{flex:1;font-family:var(--px);font-size:8px;text-align:center}
#app .gal .view.shots{display:grid;place-items:center;background:#161616}
#app .ph{font-family:var(--px);font-size:9px;color:#8d8d8d;text-align:center;line-height:2.6}
#app .ph span{font-size:8px;color:#5c5c5c}
#app .list{padding:4px}
#app .list .row{
  display:flex;align-items:center;gap:8px;padding:5px 7px;cursor:var(--cur);font-size:11px;
}
#app .list .row:hover{background:var(--sel);color:#fff}
#app .list .row img{width:16px;height:16px}
#app .list .row .meta{margin-left:auto;font-size:10px;opacity:.75}
#app .list .empty{padding:30px 12px;text-align:center;color:#777;font-size:11px;line-height:1.9}
#app .ie-bar{display:flex;align-items:center;gap:5px;padding:3px 4px;font-size:11px}
#app .ie-bar .url{
  flex:1;background:#fff;padding:3px 6px;font-size:11px;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #808080, inset -2px -2px #fff, inset 2px 2px #0a0a0a;
}
#app .np-area{
  width:100%;height:100%;border:0;resize:none;padding:6px 8px;background:#fff;
  font-family:var(--term);font-size:18px;line-height:1.45;cursor:var(--cur-beam);
}
#app .np-area:focus{outline:none}
/* ================= RADIO ================= */
#app #radio{
  position:absolute;left:12px;bottom:42px;width:238px;z-index:5;background:var(--face);padding:3px;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff,
             2px 2px 0 rgba(0,0,0,.35);
}
#app #radio .lcd{
  margin:4px 2px;padding:3px 6px;background:var(--lcd);color:var(--lcd-ink);
  font-family:var(--term);font-size:17px;overflow:hidden;white-space:nowrap;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #808080, inset -2px -2px #fff, inset 2px 2px #0a0a0a;
}
#app #radio .lcd span{display:inline-block;animation:marq 12s linear infinite}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
#app #radio .transport{display:flex;gap:4px;padding:0 2px 2px}
#app #radio .transport .btn{flex:1;padding:5px 0;font-size:11px;text-align:center}
/* ================= CLIPPY ================= */
#app #clippy{position:absolute;right:20px;bottom:52px;z-index:6;display:none;align-items:flex-end;gap:6px;cursor:var(--cur)}
#app #clippy .bubble{
  background:#ffffe1;border:1px solid #000;padding:7px 9px;font-size:11px;line-height:1.6;max-width:190px;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
#app #clippy .guy{width:72px;height:72px;background-repeat:no-repeat;background-size:auto 72px;animation:clip 2.4s steps(33) infinite}
@keyframes clip{to{background-position:calc(-72px * 33) 0}}
/* ================= TASKBAR ================= */
#app .taskbar{
  position:absolute;left:0;right:0;bottom:0;height:28px;z-index:600;display:flex;align-items:center;gap:4px;
  padding:2px 3px;background:var(--face);box-shadow:inset 0 1px 0 #fff, inset 0 2px 0 #dfdfdf;
}
#app #start{
  flex:none;height:22px;display:flex;align-items:center;gap:5px;padding:0 8px 0 4px;cursor:var(--cur);
  background:var(--face);font-family:var(--px);font-size:10px;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app #start.on{box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080}
#app #start img{width:20px;height:16px}
#app .tasks{flex:1;display:flex;align-items:center;gap:3px;overflow:hidden}
#app .task{
  display:flex;align-items:center;gap:5px;min-width:118px;max-width:162px;height:22px;padding:0 7px;
  background:var(--face);font-size:11px;cursor:var(--cur);white-space:nowrap;overflow:hidden;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
#app .task img{width:16px;height:16px;flex:none}
#app .task span{overflow:hidden;text-overflow:ellipsis}
#app .task.on{
  font-weight:700;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
#app .tray{
  flex:none;display:flex;align-items:center;gap:7px;padding:0 8px;height:22px;font-size:11px;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .tray img{width:16px;height:16px}
#app #startmenu{
  position:absolute;left:3px;bottom:28px;width:224px;z-index:700;display:none;background:var(--face);padding:3px;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff,
             2px 2px 0 rgba(0,0,0,.4);
}
#app #startmenu .inner{display:flex}
#app #startmenu .rail{width:24px;flex:none;background:linear-gradient(180deg,#1084d0,#000082);position:relative}
#app #startmenu .rail span{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--px);font-size:11px;color:#fff;letter-spacing:2px;white-space:nowrap;
}
#app #startmenu ul{list-style:none;margin:0;padding:0;flex:1}
#app #startmenu li{display:flex;align-items:center;gap:9px;padding:5px 8px;cursor:var(--cur);font-size:12px}
#app #startmenu li img{width:24px;height:24px;flex:none}
#app #startmenu li:hover{background:var(--sel);color:#fff}
#app #startmenu hr{border:0;border-top:1px solid #808080;border-bottom:1px solid #fff;margin:3px 4px}
#app /* ==========================================================================
   MOBILE — meme interface,#app adaptee au doigt.
   Les geometries de fenetre sont posees par le JS (mode 'mobile') ;
   ici on ne traite que le visuel et les zones tactiles.
   ========================================================================== */
@media (max-width: 760px){
  /* toutes les icones dans une grille en haut, la ou le bureau avait deux colonnes */
  .mobile .col.left{left:8px;right:8px;top:8px;grid-template-columns:repeat(4,1fr);grid-auto-flow:row;gap:12px 2px}
#app .mobile .col.right,#app .mobile .col.left2,#app .mobile .col.right2{display:none}
#app .mobile .icon{width:auto}
#app .mobile .icon .art,#app .mobile .icon .art img{width:42px;height:42px}
#app .mobile .icon span{font-size:8px}
/* la radio et Clippy mangeraient l'ecran */
  #app .mobile #radio,#app .mobile #clippy{display:none}
#app #marquee{display:none !important}
#app /* zones tactiles : la taille visuelle ne bouge pas,#app la zone cliquable grandit */
  .tbtn{position:relative}
#app .tbtn::after{content:'';position:absolute;inset:-9px -7px}
#app .titlebar{height:24px}
#app .tbtns{gap:6px}
/* fiche produit : une colonne */
  #app .pdp{grid-template-columns:1fr;gap:10px}
#app .pdp .shot{height:230px}
#app .size{width:42px;height:36px;font-size:13px}
#app .pdp .add{padding:12px}
/* listes et grilles */
  #app .tile{width:calc(50% - 2px)}
#app .tile .shot{width:84px;height:100px}
#app .list .row{padding:10px 8px}
#app .bagrow{padding:10px 2px}
#app /* Paint : outils au-dessus,#app canvas en dessous */
  .paint{flex-direction:column}
#app .pt-tools{grid-template-columns:repeat(6,1fr)}
#app .pt-tool{height:32px}
#app .pt-swatches{grid-template-columns:repeat(14,1fr)}
#app .pt-sw{width:auto;height:18px}
#app .pt-bottom{flex-wrap:wrap;gap:8px}
/* demineur : la grille doit tenir dans la largeur */
  #app .ms-cell{width:22px;height:22px}
#app .ms-cell img{width:17px;height:17px}
#app .ms-grid{grid-template-columns:repeat(9,22px) !important}
#app .ms-led{font-size:22px;min-width:46px}
#app /* barre des taches : une seule fenetre a la fois,#app on garde le libelle court */
  .task{min-width:0;flex:1;max-width:none}
#app #start span{display:none}
#app #start{padding:0 10px}
/* login */
  #app #login .box{width:min(92vw,334px)}
#app #login .plate img{width:min(62vw,300px)}
#app }

/* le curseur fleche n'a pas de sens au doigt */
@media (pointer: coarse){
  body,.icon,.btn,.tbtn,.tile,.size,.ms-cell,.list .row{cursor:default}
}


/* ---- description produit, mentions legales, compteur de panier ---- */
#app .pdp .desc{
  grid-column:1/-1;max-height:150px;overflow:auto;padding:8px 10px;background:#fff;
  font-size:12px;line-height:1.7;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
#app .pdp .desc p{margin:0 0 8px}
#app .pdp .desc p:last-child{margin:0}
#app .pdp .tocart{width:100%;margin-top:5px;font-family:var(--px);font-size:9px;padding:8px}
#app .policy{padding:12px 14px;font-size:12px;line-height:1.8}
#app .policy h1,#app .policy h2,#app .policy h3,#app .policy h4{
  font-family:var(--px);font-size:11px;margin:14px 0 6px;line-height:1.6}
#app .policy p{margin:0 0 10px}
#app .policy ul,#app .policy ol{margin:0 0 10px;padding-left:22px}
#app .policy a{color:#000082}
#app .policy table{width:100%;border-collapse:collapse}
#app .policy td,#app .policy th{border:1px solid #b6b3a4;padding:4px 6px;text-align:left}
#app .tray .cartbtn{display:flex;align-items:center;gap:4px;cursor:var(--cur)}
#app .tray .cartbtn b{font-weight:400}


/* ==========================================================================
   BANDEAU DE CONSENTEMENT SHOPIFY
   Il est injecte par Shopify hors de #app, avec son propre markup : on ne
   peut pas le reconstruire, mais on peut l'habiller en boite de dialogue.
   Les identifiants viennent de l'API Customer Privacy. Si Shopify change son
   markup un jour, seul l'habillage retombe : le bandeau reste fonctionnel.
   Ces regles sont volontairement hors de #app.
   ========================================================================== */
#shopify-pc__banner{
  position:fixed !important;
  left:50% !important; right:auto !important; bottom:44px !important;
  transform:translateX(-50%);
  width:min(92vw,470px) !important; max-width:none !important;
  padding:3px !important;
  background:#c0c0c0 !important;
  border:0 !important; border-radius:0 !important;
  font-family:'PackTahoma',Tahoma,sans-serif !important; color:#000 !important;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
             inset -2px -2px #808080, inset 2px 2px #fff,
             2px 2px 0 rgba(0,0,0,.4) !important;
}
/* barre de titre : Shopify n'en fournit pas, on la dessine */
#shopify-pc__banner::before{
  content:"COOKIES.EXE";
  display:block;height:20px;line-height:20px;margin:0 0 6px;padding:0 5px;
  background:linear-gradient(90deg,#000082,#1084d0);color:#fff;
  font-family:'Silkscreen',monospace;font-size:10px;letter-spacing:.3px;
}
#shopify-pc__banner .shopify-pc__banner__wrapper{
  display:block !important;padding:0 10px 8px !important;max-width:none !important;
}
#shopify-pc__banner .shopify-pc__banner__body{margin:0 0 12px !important;padding:0 !important}
#shopify-pc__banner__body-title{
  font-family:'Silkscreen',monospace !important;font-size:11px !important;
  margin:0 0 8px !important;line-height:1.7 !important;color:#000 !important;font-weight:400 !important;
}
#shopify-pc__banner .shopify-pc__banner__body p{
  font-size:12px !important;line-height:1.65 !important;margin:0 !important;color:#000 !important;
}
#shopify-pc__banner__body-policy-link{color:#000082 !important;text-decoration:underline !important}
#shopify-pc__banner .shopify-pc__banner__btns{
  display:flex !important;gap:6px !important;align-items:center !important;
  justify-content:flex-end !important;flex-wrap:wrap !important;margin:0 !important;
}
#shopify-pc__banner button{
  font-family:'PackTahoma',Tahoma,sans-serif !important;font-size:12px !important;
  padding:5px 14px !important;min-width:96px !important;min-height:0 !important;
  background:#c0c0c0 !important;color:#000 !important;
  border:0 !important;border-radius:0 !important;text-decoration:none !important;cursor:pointer !important;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
             inset -2px -2px #808080, inset 2px 2px #fff !important;
}
#shopify-pc__banner button:active{
  box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a,
             inset -2px -2px #dfdfdf, inset 2px 2px #808080 !important;
}
#shopify-pc__banner button span{text-decoration:none !important;font-size:12px !important}
/* "Gerer les preferences" a gauche, les deux choix a droite */
#shopify-pc__banner__btn-manage-prefs{margin-right:auto !important;min-width:0 !important}

/* la fenetre de preferences suit le meme habillage */
#shopify-pc__prefs{font-family:'PackTahoma',Tahoma,sans-serif !important}
#shopify-pc__prefs button{
  font-family:'PackTahoma',Tahoma,sans-serif !important;font-size:12px !important;
  padding:5px 14px !important;background:#c0c0c0 !important;color:#000 !important;
  border:0 !important;border-radius:0 !important;cursor:pointer !important;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
             inset -2px -2px #808080, inset 2px 2px #fff !important;
}
@media (max-width:760px){
  #shopify-pc__banner{bottom:36px !important;width:94vw !important}
  #shopify-pc__banner button{flex:1 1 auto !important;min-width:0 !important}
  #shopify-pc__banner__btn-manage-prefs{flex-basis:100% !important;margin:0 0 4px !important}
}


/* ==========================================================================
   PAGE D'ATTENTE — un vrai bureau : quatre fenetres deplacables, et une
   barre des taches pour rouvrir celles qu'on ferme.
   ========================================================================== */
#app #landing{
  position:absolute;inset:0;display:none;z-index:858;
  background:var(--desk) center/cover no-repeat;overflow:hidden;
}
#app #landing::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.34)}

#app .lwin{
  position:absolute;background:var(--face);padding:3px;
  display:flex;flex-direction:column;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
             inset -2px -2px #808080, inset 2px 2px #fff, 2px 2px 0 rgba(0,0,0,.4);
}
#app .lwin.inactive .titlebar{background:linear-gradient(90deg,var(--tb-off-a),var(--tb-off-b))}
#app .lwin .titlebar{cursor:default}
#app .lw-body{padding:12px 14px}
#app .lw-logo{padding:10px;background:#fff;margin:2px;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a}
#app .lw-logo img{width:100%;height:auto}
#app .lw-lead{font-family:var(--px);font-size:7px;color:#555;letter-spacing:.5px;margin:0 0 10px}

#app .lock-lead{font-family:var(--px);font-size:9px;letter-spacing:1px;text-align:center;margin-bottom:9px}
#app .countdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--lcd);padding:8px 4px;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #808080, inset -2px -2px #fff, inset 2px 2px #0a0a0a;
}
#app .countdown span{display:flex;flex-direction:column;align-items:center;gap:2px}
#app .countdown b{
  font-family:var(--term);font-size:30px;line-height:.9;color:var(--lcd-ink);
  font-variant-numeric:tabular-nums;font-weight:400;
}
#app .countdown i{font-family:var(--px);font-size:6px;color:#2f7f45;font-style:normal;letter-spacing:.5px}

#app .lock-form{display:grid;grid-template-columns:42px 1fr;gap:6px;align-items:center}
#app .lock-form label{font-size:12px}
#app .lock-form input{
  font-family:var(--ui);font-size:12px;padding:4px 6px;background:#fff;border:0;min-width:0;
  box-shadow:inset -1px -1px #dfdfdf, inset 1px 1px #808080, inset -2px -2px #fff, inset 2px 2px #0a0a0a;
}
#app .lock-form .btn{grid-column:1/-1;font-family:var(--px);font-size:8px;padding:7px 10px;margin-top:2px}
#app .lock-note{font-size:11px;color:#555;margin:9px 0 0;line-height:1.6;min-height:15px}
#app .lock-ok{font-size:11px;color:#0a640a;margin:9px 0 0}
#app .lock-err{font-size:11px;color:#a01010;margin:9px 0 0}

#app .lw-taskbar{
  position:absolute;left:0;right:0;bottom:0;height:28px;background:var(--face);
  display:flex;align-items:center;gap:4px;padding:2px 3px;z-index:20;
  box-shadow:inset 0 1px 0 #fff, inset 0 2px 0 #dfdfdf;
}
#app .lw-tasks{display:flex;gap:3px;flex:1;overflow:hidden}
#app .lw-tasks .task{min-width:0;flex:0 1 160px}

@media (max-width:760px){
  #app #landing{overflow:auto;padding:10px 8px 40px}
  #app .lwin{position:static !important;width:auto !important;margin:0 0 10px;
    transform:none !important;box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
    inset -2px -2px #808080, inset 2px 2px #fff, 2px 2px 0 rgba(0,0,0,.4)}
  #app .countdown b{font-size:24px}
  #app .lw-taskbar{display:none}
}

#app #landing.lock-standalone{display:block}

#app .lock-form .lock-ok,#app .lock-form .lock-err,#app .lock-form .lock-note{grid-column:1/-1;margin:6px 0 0}