/* ============================================================
   Olisé — le bureau façon Luna.
   Mesures et dégradés relevés sur XP.css (MIT) ; icônes Crystal Clear & Nuvola (LGPL).
   Aucune ressource Microsoft : ni logo, ni image, ni police embarquée.
   ============================================================ */

:root {
  --font-ui: Tahoma, 'Segoe UI', Verdana, 'Helvetica Neue', Arial, sans-serif;
  --font-title: 'Trebuchet MS', 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Lucida Console', Monaco, Consolas, 'Courier New', monospace;
  --face: #ece9d8; --face-dark: #d6d2c2; --face-shadow: #aca899; --field: #7f9db9;
  --link: #0046d5; --tooltip: #ffffe1;
  --taskbar-h: 30px;
  /* téléphones : la barre d'accueil de l'iPhone en bas (et l'encoche), puis le clavier quand il s'ouvre.
     --kb est mis à jour par app.js : Safari iOS ne rétrécit pas la page, il faut remonter le bureau nous-mêmes. */
  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --kb: 0px;
  --taskbar-tot: calc(var(--taskbar-h) + var(--sab));
  --bureau-bas: calc(var(--taskbar-tot) + var(--kb));

  /* ---- Luna, bleu ---- */
  --sel: #316ac5; --sel-ink: #fff;
  --title-grad: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
  --title-off: linear-gradient(180deg, #7697e7, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%, #7c9fe2 17%, #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3);
  --title-ink: #fff; --title-ink-off: #d8e4f8; --title-shadow: 1px 1px #0f1089;
  --f1: #00138c; --f2: #0831d9; --f3: #001ea0; --f4: #166aee; --f5: #003bda; --f6: #0855dd;
  --o1: #4c6fcc; --o2: #7f9ee8; --o3: #5a7fd8; --o4: #a4bdf2; --o5: #6d8fdf; --o6: #8aa8ec;
  --ctl-filter: none;
  --task-grad: linear-gradient(180deg, #1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
  --task-btn: #3c81f3; --task-btn-hover: #53a3ff; --task-btn-on: #1e52b7; --task-ink: #fff;
  --tray-grad: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9);
  --tray-border: #1042af; --tray-glow: #18bbff;
  --start-grad: linear-gradient(180deg, #3a9b36 0%, #69c863 6%, #56b94f 14%, #3fa338 42%, #2f8d29 70%, #2b8526 88%, #3c9a35 100%);
  --sm-bg: #4282d6;
  --sm-head: linear-gradient(180deg, #1868ce 0%, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%);
  --sm-foot: linear-gradient(180deg, #4282d6 0%, #3b85e0 3%, #418ae3 5%, #418ae3 17%, #3c87e2 21%, #3786e4 26%, #3482e3 29%, #2e7ee1 39%, #2374df 49%, #2072db 57%, #196edb 62%, #176bd8 72%, #1468d5 75%, #1165d2 83%, #0f61cb 88%);
  --sm-right: #d3e5fa; --sm-right-ink: #00136b; --sm-rule: #95bdee;
  --tp-grad: linear-gradient(180deg, #7ba2e7, #6375d6); --tp-head: linear-gradient(90deg, #fff, #c6d3f7); --tp-ink: #215dc6; --tp-hover: #428eff; --tp-body: #d6dff7;
}
/* ---- Luna, vert olive ---- */
body[data-scheme="olive"] {
  --sel: #93a070;
  --title-grad: linear-gradient(180deg, #d9e4b8, #a8bc7c 8%, #97ad6c 40%, #8aa260 88%, #8aa260 93%, #93a86a 95%, #6b8047 96%, #6b8047);
  --title-off: linear-gradient(180deg, #e3e8cf, #ccd6b0 10%, #c2cda3 40%, #b9c697 88%, #aab88a 100%);
  --title-ink: #fff; --title-ink-off: #f4f6ec; --title-shadow: 1px 1px #4a5a2c;
  --f1: #4a5a2c; --f2: #92a86c; --f3: #5f7440; --f4: #b1c490; --f5: #7c9256; --f6: #93a86e;
  --o1: #8d9a74; --o2: #c4cfa6; --o3: #a1ad86; --o4: #d6dfbd; --o5: #afbb92; --o6: #c4cea8;
  --ctl-filter: hue-rotate(-128deg) saturate(.52) brightness(1.02);
  --task-grad: linear-gradient(180deg, #dfe8c6 0, #b9c996 5%, #a3b67c 16%, #97ab6f 40%, #8fa468 80%, #869b60 93%, #6d8249 100%);
  --task-btn: #aabb85; --task-btn-hover: #bccc98; --task-btn-on: #7f935a; --task-ink: #fff;
  --tray-grad: linear-gradient(180deg, #d3ddbb, #b6c69a 45%, #a7b98a 80%, #95a877);
  --tray-border: #6d8249; --tray-glow: #e5ecd2;
  --sm-bg: #8ba166;
  --sm-head: linear-gradient(180deg, #a7ba7f, #8ea463 40%, #9bb071 80%, #a9bc82);
  --sm-foot: linear-gradient(180deg, #a9bc82, #95aa6d 40%, #879c5f);
  --sm-right: #eef2e1; --sm-right-ink: #34401c; --sm-rule: #c3cfa5;
  --tp-grad: linear-gradient(180deg, #ccd8ab, #a9bb86); --tp-head: linear-gradient(90deg, #fff, #dde5c7); --tp-ink: #56662c; --tp-hover: #7c9044; --tp-body: #f0f3e5;
}
/* ---- Luna, argent ---- */
body[data-scheme="argent"] {
  --sel: #b2b4bf; --sel-ink: #000;
  --title-grad: linear-gradient(180deg, #fff, #e7e6ef 6%, #d4d3e1 30%, #c5c4d5 60%, #b8b7cb 88%, #aeadc2 95%, #9998b0 100%);
  --title-off: linear-gradient(180deg, #fbfbfd, #eeeef3 30%, #e4e4ec 70%, #d9d9e3);
  --title-ink: #1d1d2b; --title-ink-off: #7d7d90; --title-shadow: 1px 1px rgba(255, 255, 255, .7);
  --f1: #58587a; --f2: #d4d3e0; --f3: #8a8aa4; --f4: #f4f4f8; --f5: #b8b7c9; --f6: #d1d0de;
  --o1: #9d9db3; --o2: #e3e3ea; --o3: #b8b8c9; --o4: #f5f5f8; --o5: #cfcfdb; --o6: #e1e1e9;
  --ctl-filter: grayscale(1) brightness(1.18) contrast(.95);
  --task-grad: linear-gradient(180deg, #fff 0, #eeeef4 6%, #dedee8 30%, #d2d2de 70%, #c6c6d4 92%, #aeaec0 100%);
  --task-btn: #f3f3f7; --task-btn-hover: #fff; --task-btn-on: #b9b9cb; --task-ink: #111;
  --tray-grad: linear-gradient(180deg, #fbfbfd, #e2e2ea 50%, #d3d3df);
  --tray-border: #9c9cb0; --tray-glow: #fff;
  --sm-bg: #b4b3c7;
  --sm-head: linear-gradient(180deg, #fbfbfd, #d9d8e4 40%, #c8c7d8 80%, #bdbccf);
  --sm-foot: linear-gradient(180deg, #d9d8e4, #c5c4d5 50%, #b4b3c7);
  --sm-right: #eeeef4; --sm-right-ink: #1d1d2b; --sm-rule: #c9c9d6;
  --tp-grad: linear-gradient(180deg, #d6d6e2, #b8b8ca); --tp-head: linear-gradient(90deg, #fff, #e3e3ec); --tp-ink: #3d3d5c; --tp-hover: #6b6b92; --tp-body: #f2f2f6;
}
body[data-scheme="argent"] #start, body[data-scheme="argent"] .sm-head, body[data-scheme="argent"] .sm-foot { --ink-on: #1d1d2b; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 11px/1.35 var(--font-ui); color: #000; background: #3a6ea5; overflow: hidden; -webkit-font-smoothing: antialiased; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: default; }
a { color: var(--link); }
p { margin: 0; }
h2, h3 { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.px { image-rendering: pixelated; }
.small { font-size: 11px; } .muted { color: #6f6f6f; } .grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }
@media (pointer: coarse) { body { font-size: 13px; } }

/* ---------- FOND D'ÉCRAN ---------- */
#wallpaper { position: fixed; inset: 0 0 var(--bureau-bas) 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #2f6fdc 0%, #6aa9ee 52%, #c9e6fa 100%); transition: filter 1.2s ease; }
#wallpaper svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; display: block; }
#wallpaper .h-far { fill: #7cc27a; } #wallpaper .h-mid { fill: #4f9e4b; } #wallpaper .h-near { fill: #2f7d3a; }
#wallpaper .cloud { fill: rgba(255, 255, 255, .85); }
#stars, #moon { display: none; }
#wallpaper.night { background: linear-gradient(180deg, #070b1e 0%, #172556 52%, #2c4a9c 100%); }
#wallpaper.night .h-far { fill: #22346b; } #wallpaper.night .h-mid { fill: #16244c; } #wallpaper.night .h-near { fill: #0c1430; }
#wallpaper.night .cloud { fill: rgba(255, 255, 255, .08); }
#wallpaper.night #stars { display: block; position: absolute; inset: 0; }
#wallpaper.night #moon { display: block; position: absolute; right: 9%; top: 9%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff9df, #e9dca0 60%, #b9ab6e); box-shadow: 0 0 40px 10px rgba(255, 240, 190, .25); }
#wallpaper.photo { background-color: #3a6ea5; background-size: cover; background-position: center; }
#wallpaper.photo svg, #wallpaper.photo #stars, #wallpaper.photo #moon { display: none; }

/* ---------- LE BUREAU ---------- */
#desktop { position: fixed; inset: 0 0 var(--bureau-bas) 0; z-index: 1; overflow: hidden; transition: filter 1.2s ease; }
#icons { position: absolute; inset: 0; }
.dicon { position: absolute; width: 76px; padding: 2px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: #fff; font: 11px/13px var(--font-ui); text-align: center; user-select: none; -webkit-user-select: none; touch-action: none; outline: none; }
.dicon .ig { position: relative; width: 48px; height: 48px; }
.dicon .ig > img, .dicon .ig > canvas { display: block; width: 48px; height: 48px; }
.dicon .lbl { max-width: 76px; padding: 0 2px 1px; text-shadow: 1px 1px 1px #000, 0 0 2px rgba(0, 0, 0, .7); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.dicon.sel .ig > img, .dicon.sel .ig > canvas { filter: brightness(.78) sepia(.55) hue-rotate(185deg) saturate(2.4); }
.dicon.sel .lbl { background: var(--sel); color: var(--sel-ink); text-shadow: none; }
.dicon:focus-visible .lbl { outline: 1px dotted #fff; }
.dicon.dragging { z-index: 3; opacity: .7; }
#icons.anim .dicon { transition: left .16s ease, top .16s ease; }
@media (pointer: coarse) { .dicon { width: 84px; font-size: 12px; line-height: 14px; } .dicon .lbl { max-width: 84px; } }
.drop-hint { position: absolute; inset: 14px; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 6px; border: 2px dashed #fff; border-radius: 10px; background: rgba(8, 40, 110, .45); color: #fff; font: 13px var(--font-ui); text-shadow: 1px 1px 2px #000; pointer-events: none; }
.drop-hint b { font: 700 18px var(--font-title); }

/* ---------- FENÊTRE LUNA ---------- */
.win { position: absolute; left: 120px; top: 40px; display: none; flex-direction: column; min-width: 180px; max-width: 100%; max-height: 100%; background: var(--face); padding: 0 3px 3px; border-radius: 8px 8px 0 0; z-index: 10;
  box-shadow: inset -1px -1px var(--f1), inset 1px 1px var(--f2), inset -2px -2px var(--f3), inset 2px 2px var(--f4), inset -3px -3px var(--f5), inset 3px 3px var(--f6), 3px 6px 18px -6px rgba(0, 0, 0, .55); }
.win.open { display: flex; }
.win.minimized { display: none !important; }
.win:not(.focus) { box-shadow: inset -1px -1px var(--o1), inset 1px 1px var(--o2), inset -2px -2px var(--o3), inset 2px 2px var(--o4), inset -3px -3px var(--o5), inset 3px 3px var(--o6), 2px 4px 12px -6px rgba(0, 0, 0, .45); }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; padding: 0 0 0; box-shadow: none; }
.win-title { flex: none; height: 29px; margin: 0 -3px; padding: 0 5px 0 6px; display: flex; align-items: center; gap: 3px; background: var(--title-grad); border: 1px solid var(--f2); border-right-color: var(--f3); border-bottom: 0; border-radius: 8px 7px 0 0;
  color: var(--title-ink); font: 700 13px/1 var(--font-title); text-shadow: var(--title-shadow); user-select: none; -webkit-user-select: none; touch-action: none; }
.win:not(.focus) .win-title { background: var(--title-off); color: var(--title-ink-off); border-color: var(--o2); text-shadow: none; }
.win.max .win-title { margin: 0; border-radius: 0; border-width: 0; }
.win-title .wico { width: 16px; height: 16px; flex: none; margin: 0 3px 0 0; display: block; }
.win-title .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0 0 1px; }
.win-title .count { flex: none; font: 700 10px/1 var(--font-ui); padding: 2px 5px; border-radius: 8px; background: rgba(255, 255, 255, .25); text-shadow: none; }
.win-ctl { display: flex; gap: 2px; margin-left: 3px; flex: none; }
.win-ctl button { width: 21px; height: 21px; padding: 0; border: 0; background: transparent center / 100% 100% no-repeat; display: block; }
.win-ctl .min { background-image: url(../assets/xp/btn-min.svg); } .win-ctl .min:hover { background-image: url(../assets/xp/btn-min-hover.svg); } .win-ctl .min:active { background-image: url(../assets/xp/btn-min-active.svg); }
.win-ctl .max { background-image: url(../assets/xp/btn-max.svg); } .win-ctl .max:hover { background-image: url(../assets/xp/btn-max-hover.svg); } .win-ctl .max:active { background-image: url(../assets/xp/btn-max-active.svg); }
.win.max .win-ctl .max { background-image: url(../assets/xp/btn-restore.svg); } .win.max .win-ctl .max:hover { background-image: url(../assets/xp/btn-restore-hover.svg); }
.win-ctl .close { background-image: url(../assets/xp/btn-close.svg); } .win-ctl .close:hover { background-image: url(../assets/xp/btn-close-hover.svg); } .win-ctl .close:active { background-image: url(../assets/xp/btn-close-active.svg); }
.win-ctl .min, .win-ctl .max { filter: var(--ctl-filter); }
.win:not(.focus) .win-ctl button { opacity: .7; }
.win .grip { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; z-index: 2;
  background: radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 4px 4px, radial-gradient(circle, #aca899 0 1px, transparent 1.5px) 1px 1px / 4px 4px;
  -webkit-mask: linear-gradient(135deg, transparent 50%, #000 50%); mask: linear-gradient(135deg, transparent 50%, #000 50%); }
.win.max .grip, .win.fixed .grip { display: none; }
.win-body { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 10px; position: relative; }
.win-body.tight { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.win-body.white, .white { background: #fff; }
.win.flash .win-title { animation: titleflash .1s steps(1) 6; }
@keyframes titleflash { 50% { background: var(--title-off); } }

/* barres de défilement Luna (XP.css) */
.win ::-webkit-scrollbar { width: 17px; height: 17px; }
.win ::-webkit-scrollbar-track { background: #f4f4f0; }
.win ::-webkit-scrollbar-track:vertical { background: url(../assets/xp/scroll-track-v.svg) center top / 17px auto repeat-y, #f4f4f0; }
.win ::-webkit-scrollbar-thumb { background: #c8d6fb; border: 1px solid #fff; border-radius: 3px; box-shadow: inset -1px -1px #7c9fd3, inset 1px 1px #fff; }
.win ::-webkit-scrollbar-thumb:vertical { background: url(../assets/xp/scroll-thumb-v.svg) center / 17px 100% no-repeat, #c2d3f5; border: 0; box-shadow: none; }
.win ::-webkit-scrollbar-button:vertical:start:decrement { display: block; height: 17px; background: url(../assets/xp/scroll-up.svg) center / 17px 17px no-repeat; }
.win ::-webkit-scrollbar-button:vertical:end:increment { display: block; height: 17px; background: url(../assets/xp/scroll-down.svg) center / 17px 17px no-repeat; }
.win ::-webkit-scrollbar-button:vertical:start:increment, .win ::-webkit-scrollbar-button:vertical:end:decrement, .win ::-webkit-scrollbar-button:horizontal { display: none; }
.win ::-webkit-scrollbar-corner { background: var(--face); }

/* ---------- MENUS ---------- */
.menubar { flex: none; display: flex; align-items: stretch; height: 20px; background: var(--face); border-bottom: 1px solid var(--face-dark); box-shadow: 0 1px #fff; margin-bottom: 1px; }
.menubar button { padding: 0 7px; border: 0; background: none; color: #000; font: 11px/20px var(--font-ui); }
.menubar button:hover, .menubar button.open, .menubar button:focus-visible { background: var(--sel); color: var(--sel-ink); outline: none; }
.xpmenu { position: fixed; z-index: 1000; min-width: 170px; padding: 2px; background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); font: 11px var(--font-ui); user-select: none; -webkit-user-select: none; }
.xpmenu .mi { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; width: 100%; height: 20px; padding: 0 10px 0 1px; border: 0; background: none; color: #000; text-align: left; white-space: nowrap; outline: none; }
.xpmenu .mi .g { display: grid; place-items: center; font-size: 11px; line-height: 1; }
.xpmenu .mi .g img { width: 16px; height: 16px; }
.xpmenu .mi .k { padding-left: 26px; color: inherit; }
.xpmenu .mi.has-sub .k { width: 26px; padding: 0; position: relative; height: 100%; }
.xpmenu .mi.has-sub .k::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 4px solid currentColor; border-right: 0; }
.xpmenu .mi.hot, .xpmenu .mi.open { background: var(--sel); color: var(--sel-ink); }
.xpmenu .mi:disabled { color: #aca899; }
.xpmenu .mi:disabled.hot { background: transparent; }
.xpmenu .sep { height: 1px; margin: 3px 1px; background: #aca899; }
@media (pointer: coarse) { .xpmenu { min-width: 230px; font-size: 14px; } .xpmenu .mi { height: 40px; grid-template-columns: 30px 1fr auto; } .menubar { height: 32px; } .menubar button { line-height: 32px; font-size: 14px; padding: 0 12px; } }

/* ---------- BARRE D'OUTILS, ADRESSE, ÉTAT ---------- */
.toolbar { flex: none; display: flex; align-items: center; gap: 1px; padding: 1px 4px; background: var(--face); border-bottom: 1px solid var(--face-dark); box-shadow: 0 1px #fff; margin-bottom: 1px; overflow-x: auto; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.tbtn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 7px 0 4px; border: 1px solid transparent; border-radius: 3px; background: none; color: #000; font: 11px var(--font-ui); white-space: nowrap; }
.tbtn img { width: 24px; height: 24px; flex: none; }
.tbtn:hover { border-color: #fff #aca899 #aca899 #fff; background: linear-gradient(180deg, #fff, #f3f2ea); }
.tbtn:active, .tbtn.on { border-color: #aca899 #fff #fff #aca899; background: #e3e2da; }
.tbtn:disabled { opacity: .45; }
.tbtn.icon-only { padding: 0 4px; }
.tsep { flex: none; width: 2px; height: 26px; margin: 0 3px; border-left: 1px solid var(--face-shadow); border-right: 1px solid #fff; }
@media (max-width: 760px) { .tbtn span { display: none; } .tbtn { padding: 0 6px; height: 38px; } }
.addressbar { flex: none; display: flex; align-items: center; gap: 4px; padding: 2px 4px 3px; background: var(--face); border-bottom: 1px solid var(--face-dark); box-shadow: 0 1px #fff; margin-bottom: 1px; }
.addressbar label { color: #444; padding: 0 3px; }
.field-ico { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 2px; background: #fff; border: 1px solid var(--field); }
.field-ico img { width: 16px; height: 16px; flex: none; }
.field-ico input { flex: 1; min-width: 0; height: 20px; border: 0; padding: 0; background: none; font: 11px var(--font-ui); outline: none; }
.statusbar { flex: none; display: flex; align-items: center; height: 22px; padding: 0 16px 0 2px; background: var(--face); border-top: 1px solid var(--face-dark); box-shadow: inset 0 1px #fff; font: 11px var(--font-ui); color: #000; white-space: nowrap; overflow: hidden; position: relative; }
.statusbar > span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.statusbar > span:first-child { flex: 1; }
.statusbar .sb-fixed { display: inline-flex; align-items: center; gap: 4px; height: 16px; border-left: 1px solid var(--face-shadow); box-shadow: -1px 0 #fff; }
.statusbar img { width: 16px; height: 16px; }

/* ---------- COMMANDES ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 75px; min-height: 23px; padding: 0 12px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4); color: #000; font: 11px var(--font-ui); white-space: nowrap; text-decoration: none; outline: none; }
.btn.default, .btn:focus-visible { box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn:hover:not(:disabled) { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
.btn:active:not(:disabled) { background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); box-shadow: none; }
.btn:disabled { color: #aca899; border-color: #c9c7ba; background: #f4f3ee; box-shadow: none; }
.btn img { width: 16px; height: 16px; flex: none; }
.btn.sm { min-width: 0; min-height: 21px; padding: 0 8px; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
@media (pointer: coarse) { .btn { min-height: 36px; font-size: 14px; padding: 0 14px; } .btn.sm { min-height: 32px; font-size: 13px; } }
input[type=text], textarea, select { font: 11px var(--font-ui); color: #000; background: #fff; border: 1px solid var(--field); border-radius: 0; padding: 3px 4px; outline: none; }
input[type=text] { height: 23px; }
textarea { resize: vertical; line-height: 1.4; }
input[type=text]:focus, textarea:focus, select:focus { box-shadow: inset 0 0 0 1px #9fc0f1; }
select { appearance: none; -webkit-appearance: none; height: 23px; padding-right: 22px; background: #fff url(../assets/xp/select-arrow.svg) right 1px center / 17px 19px no-repeat; }
select[size] { height: auto; padding: 0; background-image: none; }
select[size] option { padding: 1px 4px; }
select[size] option:checked { background: var(--sel) linear-gradient(var(--sel), var(--sel)); color: var(--sel-ink); }
@media (pointer: coarse) { input[type=text], textarea, select { font-size: 16px; } input[type=text], select:not([size]) { height: 36px; } }
.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
fieldset { margin: 8px 0 0; padding: 6px 9px 9px; border: 1px solid #d0d0bf; border-radius: 4px; }
legend { padding: 0 3px; color: #0046d5; }
.check { position: relative; display: flex; align-items: center; min-height: 18px; }
.check input { position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6px 0 0; opacity: 0; }
.check label { position: relative; padding-left: 19px; line-height: 13px; }
.check label::before { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border: 1px solid #1d5281; background: linear-gradient(135deg, #dcdcd7, #fff); box-sizing: border-box; }
.check label:hover::before { box-shadow: inset -2px -2px #f8b636, inset 2px 2px #fedf9c; }
.check input:checked + label::after { content: ''; position: absolute; left: 1px; top: 1px; width: 11px; height: 11px; background: url(../assets/xp/check-on.svg) center / 11px 11px no-repeat; }
.check input:focus-visible + label { outline: 1px dotted #000; }
.tabs { display: flex; padding-left: 3px; position: relative; z-index: 1; margin-bottom: -1px; flex-wrap: wrap; }
.tabs [role=tab] { padding: 3px 8px 3px; margin-right: -1px; border: 1px solid #919b9c; border-bottom-color: #919b9c; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #fff, #fcfcfe 26%, #f4f3ee 70%, #ecebe5); color: #000; font: 11px var(--font-ui); }
.tabs [role=tab]:hover { box-shadow: inset 0 2px #ffc83c; }
.tabs [role=tab][aria-selected=true] { position: relative; z-index: 2; margin-top: -2px; padding-bottom: 5px; border-bottom-color: #fcfcfe; background: #fcfcfe; box-shadow: inset 0 2px #e68b2c, inset 0 3px #ffc83c; }
.tabpanel { background: #fcfcfe; border: 1px solid #919b9c; padding: 10px 10px 12px; box-shadow: 1px 1px 0 #d0d0bf; }
.xp-progress { height: 17px; padding: 2px; border: 1px solid #686868; border-radius: 3px; background: #fff; overflow: hidden; box-shadow: inset 1px 1px #d0d0d0; }
.xp-progress > span { display: block; height: 100%; width: var(--p, 0%); background: repeating-linear-gradient(90deg, transparent 0 8px, #fff 8px 10px), linear-gradient(180deg, #acedad, #7be47d 14%, #4cda50 28%, #2ed330 42%, #42d845 57%, #76e275 71%, #8fe791 85%, #fff); transition: width .2s linear; }
.xp-progress.marquee > span { width: 32px; animation: marquee 1.3s linear infinite; }
@keyframes marquee { from { transform: translateX(-34px); } to { transform: translateX(260px); } }

/* ---------- VOLET DES TÂCHES (fenêtres façon Explorateur) ---------- */
.explorer { display: flex; flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.taskpane { flex: none; width: 196px; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 12px; background: var(--tp-grad); }
.tp-head { position: relative; height: 23px; line-height: 23px; padding: 0 26px 0 11px; border-radius: 3px 3px 0 0; background: var(--tp-head); color: var(--tp-ink); font: 700 11px/23px var(--font-ui); }
.tp-head::after { content: ''; position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #b3c3ee, 0 1px 1px rgba(0, 0, 0, .12);
  -webkit-mask: radial-gradient(circle, #000 70%, transparent 71%); }
.tp-head::before { content: ''; position: absolute; right: 8px; top: 9px; z-index: 1; width: 5px; height: 5px; border: solid var(--tp-ink); border-width: 2px 0 0 2px; transform: rotate(45deg); }
.tp-body { display: flex; flex-direction: column; gap: 6px; padding: 9px 9px 11px 11px; background: var(--tp-body); border: 1px solid #fff; border-top: 0; }
.tp-link { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--tp-ink); font: 11px var(--font-ui); text-align: left; cursor: pointer; }
.tp-link img { width: 16px; height: 16px; flex: none; }
.tp-link:hover { color: var(--tp-hover); text-decoration: underline; }
.tp-link:disabled { color: #8a93b0; text-decoration: none; cursor: default; }
.tp-details { color: #000; gap: 3px; }
.tp-details b { font-weight: 700; }
.view { flex: 1; min-width: 0; overflow: auto; padding: 12px 14px; }
.xp-section { margin: 14px 0 8px; padding-bottom: 4px; font: 700 11px var(--font-ui); color: #000; background: linear-gradient(90deg, #70bfff, rgba(112, 191, 255, 0) 80%) left bottom / 100% 1px no-repeat; }
.xp-section small { font-weight: 400; color: #777; }
.iconview { display: grid; grid-template-columns: repeat(auto-fill, 92px); grid-auto-rows: min-content; gap: 10px 6px; align-content: start; }
.fitem { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 1px; border: 0; background: none; color: #000; font: 11px/13px var(--font-ui); text-align: center; user-select: none; -webkit-user-select: none; outline: none; }
.fitem .fi { width: 48px; height: 48px; display: grid; place-items: center; }
.fitem .fi img, .fitem .fi canvas { max-width: 48px; max-height: 48px; display: block; }
.fitem .fi img.thumb { border: 1px solid #aca899; background: #fff; box-shadow: 1px 1px 0 rgba(0, 0, 0, .12); }
/* les groupes d'un dossier système (Poste de travail) */
.fgroup { grid-column: 1 / -1; margin: 4px 0 -2px; padding: 0 0 3px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, #7e9dd6, rgba(126, 157, 214, 0)) 1; color: #1f4c9c; font: 700 11px var(--font-ui); }
.fgroup:not(:first-child) { margin-top: 12px; }
.fitem .lbl { max-width: 90px; padding: 0 2px 1px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.fitem.sel .lbl { background: var(--sel); color: var(--sel-ink); }
.fitem.sel .fi > * { filter: brightness(.85) sepia(.4) hue-rotate(185deg) saturate(2); }
.fitem:focus-visible .lbl { outline: 1px dotted #000; }
.empty-view { grid-column: 1 / -1; color: #666; padding: 18px 4px; }
@media (max-width: 760px) { .taskpane { display: none; } }

/* ---------- BOÎTE DE MESSAGE ---------- */
.modal-cover { position: fixed; inset: 0; z-index: 900; }
.win.dialog { position: fixed; z-index: 901; }
.dlg-body { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px 8px; }
.dlg-ico { flex: none; width: 32px; height: 32px; }
.dlg-text { flex: 1; min-width: 0; padding-top: 3px; font: 11px/1.5 var(--font-ui); white-space: pre-line; overflow-wrap: anywhere; }
.dlg-btns { display: flex; justify-content: center; gap: 8px; padding: 6px 12px 12px; flex-wrap: wrap; }
@media (pointer: coarse) { .dlg-text { font-size: 14px; } }

/* ---------- BULLES ---------- */
.balloon { position: fixed; z-index: 950; width: max-content; max-width: min(300px, calc(100vw - 12px)); padding: 8px 26px 9px 10px; background: var(--tooltip); color: #000; border: 1px solid #000; border-radius: 7px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .35); font: 11px/1.45 var(--font-ui); animation: balloonIn .2s ease-out; }
.balloon b { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-weight: 700; }
.balloon b svg { flex: none; }
.balloon p { margin: 0; }
.balloon .bx { position: absolute; right: 4px; top: 4px; width: 15px; height: 15px; padding: 0; border: 1px solid #c3bfa2; border-radius: 3px; background: #fff; }
.balloon .bx::before, .balloon .bx::after { content: ''; position: absolute; left: 6px; top: 2px; width: 1.5px; height: 9px; background: #555; transform: rotate(45deg); }
.balloon .bx::after { transform: rotate(-45deg); }
.balloon .bx:hover { background: #e8412b; border-color: #a02a18; } .balloon .bx:hover::before, .balloon .bx:hover::after { background: #fff; }
.tray-balloon::before { content: ''; position: absolute; left: var(--tail, 20px); bottom: -14px; border-style: solid; border-width: 14px 14px 0 0; border-color: #000 transparent transparent transparent; }
.tray-balloon::after { content: ''; position: absolute; left: calc(var(--tail, 20px) + 1px); bottom: -12px; border-style: solid; border-width: 12px 12px 0 0; border-color: var(--tooltip) transparent transparent transparent; }
.balloon.left-tail::before { left: -13px; top: 14px; bottom: auto; border-width: 7px 13px 7px 0; border-color: transparent #000 transparent transparent; }
.balloon.left-tail::after { left: -11px; top: 15px; bottom: auto; border-width: 6px 12px 6px 0; border-color: transparent var(--tooltip) transparent transparent; }
@keyframes balloonIn { from { opacity: 0; transform: translateY(6px); } }
@media (pointer: coarse) { .balloon { font-size: 13px; } }

/* ---------- BARRE DES TÂCHES ---------- */
#taskbar { position: fixed; left: 0; right: 0; bottom: var(--kb); height: var(--taskbar-tot); padding-bottom: var(--sab); z-index: 800; display: flex; align-items: stretch; background: var(--task-grad); transition: filter 1.2s ease; }
#start { flex: none; display: flex; align-items: center; gap: 5px; padding: 0 17px 0 8px; margin-right: 6px; border: 0; border-radius: 0 10px 10px 0; background: var(--start-grad); color: #fff;
  font: italic 700 18px/1 var(--font-title); text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset -1px 0 1px rgba(0, 0, 0, .3), 2px 0 3px rgba(0, 0, 0, .25); }
#start .logo { width: 21px; height: 21px; flex: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .35)); }
#start .word { padding-right: 2px; transform: translateY(-1px); }
#start:hover { filter: brightness(1.08); }
#start[aria-expanded="true"] { filter: brightness(.86); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); }
.quick { flex: none; display: flex; align-items: center; gap: 1px; padding: 0 6px 0 0; margin-right: 4px; border-right: 1px solid rgba(0, 0, 0, .22); box-shadow: 1px 0 rgba(255, 255, 255, .2); }
.quick button { width: 22px; height: 22px; padding: 2px; border: 1px solid transparent; border-radius: 2px; background: none; display: grid; place-items: center; }
.quick button:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .15); }
.quick img, .quick svg { width: 16px; height: 16px; display: block; }
.tasks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; padding-right: 8px; overflow: hidden; }
.task { flex: 0 1 160px; min-width: 36px; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 6px; border: 0; border-radius: 3px; background: var(--task-btn); color: var(--task-ink); font: 11px var(--font-ui); text-align: left;
  box-shadow: inset -1px 0 rgba(0, 0, 0, .3), inset 1px 1px 1px rgba(255, 255, 255, .2); }
.task img, .task canvas { width: 16px; height: 16px; flex: none; }
.task span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task:hover { background: var(--task-btn-hover); }
.task.active { background: var(--task-btn-on); box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2), inset 1px 0 1px rgba(0, 0, 0, .7); }
/* une fenêtre réclame l'attention (un message, une notification) : le bouton clignote en orange,
   puis reste orange jusqu'à ce qu'on ouvre la fenêtre — comme sur XP */
.task.flash { background: linear-gradient(180deg, #ffc56e 0%, #f59b16 48%, #df7c00 100%); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); box-shadow: inset -1px 0 rgba(0, 0, 0, .3), inset 1px 1px 1px rgba(255, 255, 255, .45); animation: taskflash 1s step-end 8; }
.task.flash:hover { background: linear-gradient(180deg, #ffd48e 0%, #f7a92f 48%, #e88a10 100%); }
@keyframes taskflash { 50% { background: var(--task-btn); color: var(--task-ink); text-shadow: none; box-shadow: inset -1px 0 rgba(0, 0, 0, .3), inset 1px 1px 1px rgba(255, 255, 255, .2); } }
@media (prefers-reduced-motion: reduce) { .task.flash { animation: none; } }
.tray { flex: none; display: flex; align-items: center; gap: 5px; padding: 0 10px 0 11px; background: var(--tray-grad); border-left: 1px solid var(--tray-border); box-shadow: inset 1px 0 1px var(--tray-glow); color: var(--task-ink); }
.tray-btn { width: 18px; height: 18px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.tray time { margin-left: 5px; font: 11px var(--font-ui); font-variant-numeric: tabular-nums; }
.volume-pop { position: fixed; z-index: 960; width: 76px; padding: 8px 6px 8px; background: var(--face); border: 1px solid #000; box-shadow: 2px 2px 4px rgba(0, 0, 0, .35); display: flex; flex-direction: column; align-items: center; gap: 6px; font: 11px var(--font-ui); }
.volume-pop input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 92px; accent-color: #316ac5; }
@media (max-width: 760px), (pointer: coarse) {
  :root { --taskbar-h: 40px; }
  #start { padding: 0 14px 0 8px; } #start .logo { width: 24px; height: 24px; }
  .task { flex: 0 0 44px; justify-content: center; height: 32px; padding: 0; } .task span { display: none; } .task img, .task canvas { width: 20px; height: 20px; }
  .quick { display: none; }
  .tray { gap: 8px; } .tray-btn { width: 30px; height: 30px; } .tray time { font-size: 13px; }
}

/* ---------- MENU DÉMARRER ---------- */
#startmenu { position: fixed; left: 0; bottom: var(--bureau-bas); z-index: 850; width: 380px; max-width: 100vw; display: flex; flex-direction: column; background: var(--sm-bg); border-radius: 7px 7px 0 0; box-shadow: 2px -2px 9px rgba(0, 0, 0, .45); font: 11px var(--font-ui); overflow: hidden; }
.sm-head { position: relative; display: flex; align-items: center; gap: 7px; width: 100%; height: 56px; padding: 5px 8px; border: 0; background: var(--sm-head); color: var(--ink-on, #fff); font: inherit; text-align: left; cursor: pointer; }
.sm-head:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.sm-head .face img, .sm-head .face canvas { width: 100% !important; height: 100% !important; }
.sm-head::before { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 3px; background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .3) 1%, rgba(255, 255, 255, .5) 2%, rgba(255, 255, 255, .5) 95%, rgba(255, 255, 255, .3) 98%, transparent); }
.sm-head .face { width: 46px; height: 46px; flex: none; border: 2px solid rgba(232, 232, 232, .9); border-radius: 4px; background: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); overflow: hidden; display: grid; place-items: center; }
.sm-head b { font: 700 14px var(--font-title); text-shadow: 1px 1px rgba(0, 0, 0, .6); }
body[data-scheme="argent"] .sm-head b { text-shadow: 1px 1px #fff; }
.sm-cols { position: relative; display: flex; margin: 0 2px; border-top: 1px solid #385de7; }
.sm-cols::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #da884a 50%, transparent); }
.sm-left { width: 50%; display: flex; flex-direction: column; padding: 6px 4px 4px; background: #fff; }
.sm-right { width: 50%; display: flex; flex-direction: column; padding: 6px 4px; background: var(--sm-right); border-left: 1px solid var(--sm-rule); color: var(--sm-right-ink); }
.sm-item { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 1px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.sm-item img { width: 32px; height: 32px; flex: none; }
.sm-right .sm-item { min-height: 28px; } .sm-right .sm-item img { width: 24px; height: 24px; }
.sm-item b { display: block; font-weight: 700; }
.sm-item small { display: block; color: #7a7a7a; }
.sm-item:hover, .sm-item:focus-visible, .sm-item.open { background: var(--sel); color: var(--sel-ink); outline: none; }
.sm-item:hover small, .sm-item:focus-visible small { color: var(--sel-ink); }
.sm-sep { height: 1px; margin: 5px 6px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .14) 50%, transparent); }
.sm-right .sm-sep { background: linear-gradient(90deg, transparent, #87b3e2 50%, transparent); }
.sm-all { margin-top: auto; justify-content: center; min-height: 30px; font-weight: 700; }
.sm-all .go { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, #7ed67a, #2f9a2a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); position: relative; }
.sm-all .go::after { content: ''; position: absolute; left: 6px; top: 4px; border: 5px solid transparent; border-left: 6px solid #fff; border-right: 0; }
.sm-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 36px; padding: 0 8px; background: var(--sm-foot); color: var(--ink-on, #fff); }
.sm-foot button { display: flex; align-items: center; gap: 4px; padding: 2px 5px; border: 0; border-radius: 3px; background: none; color: inherit; font: 11px var(--font-ui); }
.sm-foot button:hover, .sm-foot button:focus-visible { background: rgba(60, 80, 210, .5); outline: none; }
.sm-foot img { width: 22px; height: 22px; border-radius: 3px; }
@media (max-width: 760px) {
  #startmenu { width: 100vw; border-radius: 0; max-height: calc(100dvh - var(--bureau-bas)); }
  .sm-cols { flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }   /* sur un petit écran, le milieu défile : rien n'est coupé */
  .sm-head, .sm-foot { flex: none; }
  .sm-left, .sm-right { width: 100%; border-left: 0; }
  .sm-item { min-height: 44px; font-size: 14px; }
  .sm-foot { height: 48px; } .sm-foot button { font-size: 14px; padding: 6px 8px; }
}

/* ---------- OUVERTURE DE SESSION ---------- */
#welcome { position: fixed; inset: 0; z-index: 1500; display: grid; grid-template-rows: 78px 1fr 78px; background: #5a7edc; color: #fff; font-family: var(--font-title); transition: opacity .6s ease; }
#welcome.out { opacity: 0; pointer-events: none; }
.wl-top, .wl-bottom { position: relative; background: #00309c; }
.wl-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #5a7edc, #fff 30%, #fff 70%, #5a7edc); opacity: .85; }
.wl-bottom::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #00309c, #f99736 30%, #f99736 70%, #00309c); }
.wl-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 28px; font: 11px/1.45 var(--font-ui); color: #fff; }
.wl-bottom > span { text-align: right; opacity: .9; }
.wl-mid { display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; gap: 34px; padding: 0 6vw; background: radial-gradient(ellipse at 10% 12%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #5a7edc, #4d73d8); }
.wl-left { text-align: right; }
.wl-logo { display: inline-flex; align-items: center; gap: 10px; font: italic 700 56px/1 var(--font-title); text-shadow: 2px 3px 2px rgba(0, 20, 80, .35); }
.wl-logo img { width: 64px; height: 64px; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3)); }
/* « app » en exposant orange, à la manière des logos de l'époque */
.wl-logo sup { margin-left: .06em; color: #ff9b1f; font-size: .42em; line-height: 0; vertical-align: 1.2em; text-shadow: 1px 2px 1px rgba(0, 20, 80, .35); }
.wl-left p { margin-top: 16px; font: 17px var(--font-ui); color: #eaf1ff; }
.wl-sep { height: 62%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 30%, rgba(255, 255, 255, .85) 70%, rgba(255, 255, 255, 0)); }
.wl-right { display: flex; flex-direction: column; gap: 10px; }
.wl-user { display: flex; align-items: center; gap: 14px; width: fit-content; padding: 8px 22px 8px 8px; border: 0; border-radius: 8px; background: none; color: #fff; text-align: left; text-decoration: none; }
.wl-user:hover, .wl-user:focus-visible { background: linear-gradient(90deg, #00309c, rgba(0, 48, 156, 0)); outline: none; }
.wl-user .face { width: 64px; height: 64px; flex: none; border: 3px solid #fff; border-radius: 6px; background: #e8eefc; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); overflow: hidden; display: grid; place-items: center; }
.wl-user .face.game { background: #ffe3ec; } .wl-user .face.game img { width: 100%; height: 100%; object-fit: cover; }
.wl-user:hover .face, .wl-user:focus-visible .face { border-color: #f9b233; }
.wl-name { display: block; font: 700 20px var(--font-title); }
.wl-sub { display: block; margin-top: 3px; font: 12px var(--font-ui); color: #d9e6ff; }
.wl-quiet { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 0; border-radius: 4px; background: none; color: #fff; font: 12px var(--font-ui); }
.wl-quiet:hover { background: rgba(255, 255, 255, .12); }
.wl-quiet .pw { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #fff; background: linear-gradient(135deg, #7ab3ff, #2e67d6); position: relative; }
.wl-quiet .pw::before { content: ''; position: absolute; left: 5px; top: 7px; width: 5px; height: 9px; background: #fff; box-shadow: 4px -2px 0 0 #fff, 4px 2px 0 0 #fff; clip-path: polygon(0 20%, 60% 20%, 100% 0, 100% 100%, 60% 80%, 0 80%); }
.wl-quiet[aria-pressed="true"] .pw { background: linear-gradient(135deg, #b9c3d6, #6c7a96); }
/* les comptes : tuiles, mot de passe qui se déplie, formulaires « Nouveau joueur » et « Me connecter » */
.wl-right { min-width: 0; max-height: 100%; }
.wl-list, .wl-panel { display: flex; flex-direction: column; gap: 4px; max-height: calc(100dvh - 190px); overflow-y: auto; padding: 4px 8px 8px 4px; scrollbar-width: thin; }
.wl-panel { gap: 10px; max-width: 470px; }
.wl-note { margin: 0 0 6px; padding: 8px 12px; border-radius: 6px; background: rgba(0, 24, 100, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); font: 13px/1.4 var(--font-ui); color: #fff; }
.wl-acct { display: flex; flex-direction: column; border-radius: 8px; }
.wl-acct.on { background: linear-gradient(90deg, #00309c 30%, rgba(0, 48, 156, 0)); }
.wl-acct.on .wl-user { background: none; }
.wl-acct.on .face { border-color: #f9b233; }
.wl-user .face img, .wl-user .face canvas { width: 100% !important; height: 100% !important; }
.wl-pass { display: none; flex-direction: column; gap: 5px; padding: 0 12px 12px 94px; }
.wl-acct.on .wl-pass { display: flex; }
.wl-tip { font: 11px var(--font-ui); color: #d9e6ff; }
.wl-passrow { display: flex; align-items: center; gap: 6px; }
.wl-passrow input { width: 176px; min-width: 0; height: 28px; padding: 2px 7px; border: 1px solid #7f9db9; border-radius: 3px; background: #fff; color: #000; font: 15px var(--font-ui); }
.wl-passrow input:focus { outline: 2px solid #f9b233; outline-offset: 0; }
.wl-go, .wl-help { position: relative; width: 28px; height: 28px; flex: none; padding: 0; border: 1px solid #fff; border-radius: 4px; box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); color: #fff; }
.wl-go { background: linear-gradient(135deg, #8be07f, #2f9a2a); }
.wl-go::after { content: ''; position: absolute; left: 9px; top: 7px; border: 6px solid transparent; border-left: 9px solid #fff; border-right: 0; }
.wl-help { background: linear-gradient(135deg, #8cbcff, #2e67d6); font: 700 15px var(--font-ui); }
.wl-go:hover, .wl-help:hover, .wl-go:focus-visible, .wl-help:focus-visible { outline: 2px solid #f9b233; outline-offset: 1px; }
.wl-err { margin: 0; padding: 5px 8px; border-radius: 4px; background: rgba(120, 10, 10, .35); color: #fff3b8; font: 12.5px/1.35 var(--font-ui); }
.wl-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wl-link { padding: 2px 0; border: 0; background: none; color: #e3ecff; font: 12px var(--font-ui); text-decoration: underline; text-underline-offset: 2px; }
.wl-link:hover, .wl-link:focus-visible { color: #fff; outline: none; }
.wl-sym { position: relative; }
.wl-sym.nouveau { background: linear-gradient(160deg, #f0ffe8, #9fe08b); }
.wl-sym.nouveau::before { content: ''; width: 30px; height: 30px; background: #2f9a2a; clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); }
.wl-sym.cle { background: #dce8ff url(../assets/ico/48/session.png) center / 46px no-repeat; }
.wl-sym.invite { overflow: hidden; background: linear-gradient(180deg, #f1f4f9, #c3cad8); }
.wl-sym.invite::before, .wl-sym.invite::after { content: ''; position: absolute; left: 50%; background: #8791a3; }
.wl-sym.invite::before { top: 11px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; }
.wl-sym.invite::after { bottom: -12px; width: 46px; height: 30px; margin-left: -23px; border-radius: 50% 50% 0 0; }
.wl-form { display: flex; flex-direction: column; gap: 9px; }
.wl-form.busy { opacity: .75; }
.wl-form h2 { margin: 0 0 2px; font: 700 23px var(--font-title); color: #fff; text-shadow: 1px 2px 2px rgba(0, 20, 80, .35); }
.wl-form label { display: flex; flex-direction: column; gap: 3px; font: 12px var(--font-ui); color: #eaf1ff; }
.wl-form label small { font-size: 11px; opacity: .85; }
.wl-form input { height: 32px; padding: 3px 8px; border: 1px solid #7f9db9; border-radius: 3px; background: #fff; color: #000; font: 15px var(--font-ui); }
.wl-form input:focus { outline: 2px solid #f9b233; outline-offset: 0; }
.wl-picrow { display: flex; gap: 12px; align-items: flex-start; }
.face.wl-bigpic { width: 64px; height: 64px; flex: none; border: 3px solid #fff; border-radius: 6px; overflow: hidden; background: #e8eefc; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.wl-pics { flex: 1; min-width: 0; }
.wl-legend { margin: 4px 0 0; font: 12px var(--font-ui); color: #eaf1ff; }
.wl-pics .pic-grid { padding: 5px; border-radius: 6px; background: rgba(0, 30, 110, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.wl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 2px; }
.wl-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 3px 18px 3px 4px; border: 0; border-radius: 6px; background: rgba(0, 34, 130, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); color: #fff; font: 700 16px var(--font-title); }
.wl-cta:hover, .wl-cta:focus-visible { background: #00309c; box-shadow: inset 0 0 0 1px #f9b233; outline: none; }
.wl-cta .go { position: relative; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 4px; background: linear-gradient(135deg, #8be07f, #2f9a2a); }
.wl-cta .go::after { content: ''; position: absolute; left: 10px; top: 8px; border: 6px solid transparent; border-left: 9px solid #fff; border-right: 0; }
.wl-or { display: flex; align-items: center; gap: 10px; margin: 0; font: 12px var(--font-ui); color: #d9e6ff; }
.wl-or::before, .wl-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .35); }
.wl-google { display: flex; align-items: center; justify-content: center; gap: 10px; align-self: stretch; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid #dadce0; border-radius: 4px; background: #fff; color: #3c4043; font: 600 14px 'Segoe UI', Roboto, Arial, sans-serif; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wl-google:hover:not(:disabled), .wl-google:focus-visible { background: #f7f9ff; outline: 2px solid #f9b233; outline-offset: 1px; }
.wl-google:disabled { cursor: default; color: #5f6368; }
.wl-google small { padding: 2px 7px; border-radius: 9px; background: #e8f0fe; color: #1a56c4; font: 700 10px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.wl-back { position: relative; align-self: flex-start; margin: 0 0 4px -8px; padding: 5px 8px 5px 24px; border: 0; border-radius: 4px; background: none; color: #fff; font: 13px var(--font-ui); }
.wl-back::before { content: ''; position: absolute; left: 7px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 8px solid #fff; border-left: 0; }
.wl-back:hover, .wl-back:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
/* la grille des images de compte (écran d'accueil et fenêtre « Image du compte ») */
.pic-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.pic-choice { position: relative; padding: 2px; border: 2px solid transparent; border-radius: 6px; background: none; line-height: 0; }
.pic-choice .pic { display: block; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.pic-choice:hover, .pic-choice:focus-visible { border-color: rgba(255, 255, 255, .75); outline: none; }
.pic-choice[aria-checked="true"] { border-color: #f9b233; background: rgba(249, 178, 51, .3); }
.pic-browse .pic { background: #f4f6fb url(../assets/ico/32/image.png) center 38% / 26px no-repeat; }
.pic-browse .lbl { position: absolute; left: 4px; right: 4px; bottom: 5px; font: 9px/1 var(--font-ui); color: #333; text-align: center; }
@media (max-width: 700px) {
  #welcome { grid-template-rows: 54px 1fr auto; }
  .wl-mid { grid-template-columns: 1fr; grid-template-rows: auto 2px auto; gap: 20px; padding: 0 20px; align-content: center; }
  .wl-left { text-align: center; }
  .wl-logo { font-size: 44px; } .wl-logo img { width: 50px; height: 50px; }
  .wl-sep { width: 70%; height: 2px; justify-self: center; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
  .wl-right { align-items: stretch; }
  .wl-bottom { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); } .wl-bottom > span { text-align: center; }
  .wl-mid { overflow-y: auto; padding-block: 18px; }
  .wl-mid:has(.wl-panel:not([hidden])) { align-content: start; }
  .wl-mid:has(.wl-panel:not([hidden])) .wl-left p, .wl-mid:has(.wl-panel:not([hidden])) .wl-sep { display: none; }
  .wl-mid:has(.wl-panel:not([hidden])) .wl-logo { font-size: 30px; } .wl-mid:has(.wl-panel:not([hidden])) .wl-logo img { width: 34px; height: 34px; }
  .wl-list, .wl-panel { max-height: none; overflow: visible; margin: 0 auto; width: 100%; max-width: 420px; }
  .wl-user { width: 100%; }
  .wl-pass { padding-left: 12px; }
  .wl-actions { flex-direction: column; align-items: stretch; }
  .face.wl-bigpic { display: none; }   /* l'image choisie reste entourée dans la grille : la grille prend toute la largeur */
  .wl-cta { justify-content: center; min-height: 46px; }
  .wl-actions .wl-link { align-self: center; }
  .wl-passrow input { flex: 1; }
}

/* ---------- FERMER LA SESSION, ARRÊTER ---------- */
body.grey #desktop, body.grey #wallpaper, body.grey #taskbar { filter: grayscale(1); }
.bye { position: fixed; left: 50%; top: 50%; z-index: 1400; width: min(318px, calc(100vw - 20px)); transform: translate(-50%, -50%); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); font: 11px var(--font-ui); color: #fff; }
.bye .top { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; background: #00309c; font: 700 15px var(--font-title); }
.bye .top img { width: 32px; height: 32px; }
.bye .mid { display: flex; justify-content: center; gap: 30px; padding: 22px 10px 20px; background: linear-gradient(180deg, #7394e6, #5a7edc); }
.bye .big { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 80px; padding: 0; border: 0; background: none; color: #fff; font: 11px/1.3 var(--font-ui); text-align: center; }
.bye .big .b { width: 34px; height: 34px; border: 1px solid #fff; border-radius: 4px; display: grid; place-items: center; box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); }
.bye .big .b svg { width: 22px; height: 22px; }
.bye .big:hover .b, .bye .big:focus-visible .b { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.bye .big:focus-visible { outline: none; }
.bye .b.yellow { background: linear-gradient(135deg, #ffe28a, #f5b312 60%, #c98506); }
.bye .b.red { background: linear-gradient(135deg, #ffab98, #e3401e 60%, #a92a0d); }
.bye .b.green { background: linear-gradient(135deg, #a9e89a, #3fa935 60%, #257a1f); }
.bye .b.blue { background: linear-gradient(135deg, #a8ceff, #3a78e0 60%, #1f4fae); }
.bye .bot { display: flex; justify-content: flex-end; padding: 9px 14px; background: #00309c; }
.blackout { position: fixed; inset: 0; z-index: 3000; background: #000; opacity: 0; transition: opacity 1s ease; display: grid; place-content: center; justify-items: center; gap: 16px; color: #f4a93a; font: 15px var(--font-ui); text-align: center; padding: 20px; }
.blackout.on { opacity: 1; }
.blackout .btn { color: #000; }

/* ---------- AUTORUN D'UN CD-ROM ---------- */
.autorun .ar-banner { position: relative; height: 124px; margin: 0 -3px; overflow: hidden; background: linear-gradient(180deg, #1b58d4 0%, #4f93f0 52%, #9dcaf7 70%, #5fae43 71%, #3f8f2c 100%); }
.autorun .ar-banner::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse at 50% 20%, #7ccd4f, #3c8b2a 70%); }
.autorun .ar-disc { position: absolute; left: 18px; top: 12px; z-index: 1; width: 100px; height: 100px; border-radius: 50%; animation: spin 1s linear infinite;
  background: radial-gradient(circle, transparent 0 7px, #d9dde4 7.5px 9px, transparent 9.5px), conic-gradient(from 10deg, #f6f8fb, #b9c3cf 12%, #eef2f7 24%, #d4b9ff 36%, #f6f8fb 48%, #b3e0ff 60%, #c2cad6 74%, #fbe7a8 86%, #f6f8fb 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .2); }
.autorun .ar-disc img { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; }
.autorun .ar-title { position: absolute; left: 134px; top: 20px; z-index: 1; color: #fff; font: italic 700 28px/1.05 var(--font-title); text-shadow: 2px 2px 2px rgba(0, 0, 0, .35); }
.autorun .ar-sub { position: absolute; left: 136px; top: 56px; z-index: 1; color: #f2f7ff; font: 12px var(--font-ui); text-shadow: 1px 1px 1px rgba(0, 0, 0, .45); }
.autorun .ar-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; }
.autorun .ar-foot { display: flex; justify-content: flex-end; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- MOBILE : une fenêtre à la fois, plein écran (téléphone couché compris) ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .win:not(.dialog) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-height: none; border-radius: 0; padding: 0; box-shadow: none !important; }
  .win:not(.dialog) .win-title { margin: 0; height: 36px; border-radius: 0; border-width: 0; font-size: 15px; }
  .win-ctl .max { display: none; }
  .win .grip { display: none; }
}
@media (pointer: coarse) { .win-ctl button { width: 30px; height: 30px; } .win-title { height: 36px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }