:root {
  --accent: #0f6cbd;
  --accent-light: #4cc2ff;
  --taskbar-h: 48px;
  --window-chrome: #ffffff;
  --window-body: #f9f9f9;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #1b1b1b;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #9c9c9c transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #9c9c9c; border: 4px solid transparent; background-clip: content-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { border-width: 3px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-button { display: none; }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; overflow: hidden; -webkit-user-select: none; user-select: none; }
/* Cadre rouge permanent : rappelle a tout moment qu'il s'agit du simulateur
   (bureau/apps/fichiers fictifs), pas du vrai Windows. Pseudo-element fixe
   par-dessus tout (au-dessus meme de l'ecran de verrouillage et des
   fenetres) plutot qu'un box-shadow sur body, qui serait recouvert par
   n'importe quel calque plein-ecran ; pointer-events:none pour ne jamais
   intercepter de clics. */
html::after {
  content: ''; position: fixed; inset: 0; z-index: 1000000; pointer-events: none;
  box-shadow: inset 0 0 0 5px #e81123;
}
input, textarea, [contenteditable], .web-page, .mail-body, .mail-reading, .trainer-history { -webkit-user-select: text; user-select: text; }
button { font: inherit; border: 0; cursor: default; background: transparent; color: inherit; border-radius: 6px; }
.web-page button, .web-page a, .fav-item { cursor: pointer; }
input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.screen { min-height: 100vh; }
.message { color: #b1482e; font-weight: 600; }
.success { color: #18734f; }
.error { color: #b1482e; }

/* ---------- Fond d'écran (bloom Windows 11) ---------- */
.wallpaper {
  background:
    radial-gradient(1100px 700px at 68% 40%, rgba(99, 180, 255, .5), transparent 65%),
    radial-gradient(900px 620px at 28% 72%, rgba(140, 110, 255, .42), transparent 62%),
    radial-gradient(720px 520px at 55% 88%, rgba(0, 150, 255, .35), transparent 60%),
    radial-gradient(1400px 900px at 50% 50%, #1e5fd0 0%, transparent 75%),
    linear-gradient(150deg, #0b2e73 0%, #134a9e 45%, #1b63c9 100%);
  background-color: #0b2e73;
}

/* ---------- Écran de verrouillage / connexion ---------- */
.login-screen { position: fixed; inset: 0; z-index: 90; color: white; }
.lock-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding-top: 16vh;
  cursor: pointer; -webkit-user-select: none; user-select: none; text-align: center;
}
.lock-time { font-size: clamp(3.5rem, 10vw, 6.5rem); font-weight: 200; line-height: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.lock-date { margin-top: 10px; font-size: 1.35rem; font-weight: 300; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.lock-hint { position: absolute; bottom: 9vh; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.lock-screen { transition: transform .3s ease, opacity .3s ease; }
.login-screen.unlocking .lock-screen { transform: translateY(-100%); opacity: 0; }
.login-screen:not(.lock-stage) .lock-screen { display: none; }
.login-screen.lock-stage .login-card { display: none; }
.login-screen:not(.lock-stage)::before {
  content: ""; position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
  background: rgba(8, 20, 48, .38);
}
.login-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.avatar {
  width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(145deg, #7fb2e8, #3a6db3); font-size: 3rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35); margin-bottom: 8px; -webkit-user-select: none; user-select: none;
}
.avatar.small { width: 32px; height: 32px; font-size: 1.1rem; margin: 0; box-shadow: none; }
.login-card h1 { margin: 0 0 14px; font-size: 1.6rem; font-weight: 400; }
.password-row { display: flex; width: min(86vw, 300px); }
.password-row input {
  flex: 1; padding: 9px 12px; border: 2px solid transparent; border-bottom-color: rgba(255, 255, 255, .55);
  border-radius: 4px 0 0 4px; background: rgba(255, 255, 255, .92); color: #1b1b1b;
}
.password-row input:focus { outline: none; border-bottom-color: var(--accent-light); }
.password-row button {
  width: 42px; border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, .25);
  color: white; font-size: 1.1rem;
}
.password-row button:hover { background: rgba(255, 255, 255, .4); }
#peekPassword { width: 38px; border-radius: 0; background: rgba(255, 255, 255, .92); color: #555; font-size: .95rem; }
#peekPassword:hover { background: #fff; }
.login-card small { margin-top: 16px; color: rgba(255, 255, 255, .8); }
.login-card .message { color: #ffd2a9; min-height: 1.4em; margin: 10px 0 0; }
.login-card.shake { animation: shake .35s; }
@keyframes shake {
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

/* ---------- Écran d'alimentation (arrêt / démarrage) ---------- */
.power-screen {
  position: fixed; inset: 0; z-index: 100; background: #000; color: #fff;
  display: grid; place-items: center; text-align: center;
}
#powerContent { display: grid; justify-items: center; gap: 22px; font-weight: 300; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-logo svg { width: 72px; height: 72px; }
.power-on {
  width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7);
  color: #fff; font-size: 2.2rem; display: grid; place-items: center;
}
.power-on:hover { background: rgba(255, 255, 255, .12); box-shadow: 0 0 24px rgba(255, 255, 255, .25); }

/* ---------- Bureau ---------- */
.desktop { position: fixed; inset: 0; --pane-w: 320px; }
.desktop-content { position: absolute; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; padding: 10px; transition: right .2s; }
.desktop.pane-open .desktop-content { right: var(--pane-w); }
.icons {
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start;
  gap: 2px; height: 100%; width: max-content; max-width: 100%;
}
.desktop-icon {
  width: 86px; padding: 8px 4px; display: grid; justify-items: center; gap: 5px;
  color: white; font-size: .76rem; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; user-select: none; word-break: break-word;
}
.desktop-icon > span:first-child { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.desktop-icon .file-name { font-size: .76rem; line-height: 1.25; filter: none; }
.desktop-icon:hover { background: rgba(255, 255, 255, .12); }
.desktop-icon.selected { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .4); }
.desktop-icon.drop-target { background: rgba(94, 196, 212, .3); border-color: rgba(94, 196, 212, .7); }
/* La Corbeille est générée par le système de fichiers virtuel : éviter le doublon statique. */
.icons > .desktop-icon[data-app="recycle"] { display: none; }
.miniwindows-launch {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background:
    radial-gradient(420px 220px at 50% 20%, rgba(76, 194, 255, .18), transparent 70%),
    linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
}
.miniwindows-bubble {
  width: min(100%, 420px);
  padding: 28px 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(0, 103, 192, .14);
  box-shadow: 0 18px 50px rgba(12, 36, 72, .14);
  text-align: center;
}
.miniwindows-badge {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 103, 192, .1);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.miniwindows-bubble h3 {
  margin: 0 0 10px;
  font-size: 1.55rem;
}
.miniwindows-bubble p {
  margin: 0 0 18px;
  color: #4b5563;
  line-height: 1.45;
}
.miniwindows-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.miniwindows-link:hover { background: #005ba6; }
/* ---------- Volet Exercices (docké à droite du bureau, comme dans Word/Excel) ---------- */
#exercisePane {
  position: fixed; top: 0; right: 0; bottom: var(--taskbar-h); width: var(--pane-w);
  z-index: 40; background: #fff; border-left: 1px solid #d8d8d8;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s;
  box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
}
.desktop.pane-open #exercisePane { transform: translateX(0); }
.pane-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.pane-title h2 { margin: 0; font-size: .95rem; }
.pane-close { width: 26px; height: 26px; border-radius: 6px; font-size: .8rem; }
.pane-close:hover { background: #f0f2f4; }
.pane-head { padding: 0 14px 12px; border-bottom: 1px solid #eee; }
.pane-head .progress-wrap { height: 6px; background: #e6e6e6; border-radius: 3px; overflow: hidden; }
.pane-head .progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width .3s; }
.pane-head .progress-label { margin: 6px 0 0; font-size: .74rem; color: #666; }
.tutorial-mode-btn {
  display: block; width: 100%; margin-bottom: 10px; padding: 7px 10px;
  background: #f7f7f7; border: 1px solid #e6e6e6; border-radius: 6px; font-size: .78rem; color: #333;
}
.tutorial-mode-btn:hover { background: #eef2f6; }
.tutorial-mode-btn.active { background: #fff4d6; border-color: #e8c766; color: #7a5a00; font-weight: 600; }
.ex-list { flex: 1; overflow-y: auto; padding: 0 14px 14px; }
.ex-empty { color: #777; font-size: .84rem; text-align: center; margin-top: 24px; }
.ex-section { margin-bottom: 16px; }
.ex-section:last-child { margin-bottom: 0; }
.ex-section-title { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: #333; }
.ex-section-title.done { color: #167a4c; }
.ex-section .consigne { margin-bottom: 6px; }
.ex-section .consigne:last-child { margin-bottom: 0; }
.consigne { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; }
.consigne.ok { background: #f0f8f1; border-color: #a5d6a7; }
.consigne .row1 { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; }
.consigne .check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c8c6c4;
  display: flex; align-items: center; justify-content: center; font-size: .68rem; color: #fff; margin-top: 1px;
}
.consigne.ok .check { background: #4caf50; border-color: #4caf50; }
.consigne .txt { flex: 1; font-size: .82rem; line-height: 1.45; color: #333; }
.hint-btn { flex-shrink: 0; font-size: .82rem; opacity: .55; padding: 0; }
.hint-btn:hover { opacity: 1; background: none; }
.ex-story { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: #f3f8fd; color: #2d4257; font-size: .78rem; line-height: 1.45; border-radius: 0 6px 6px 0; }
.ex-locked { margin: 0; padding: 10px 12px; border: 1px dashed #c8c6c4; border-radius: 8px; color: #666; font-size: .78rem; }
.mission-opinion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .76rem; color: #444; }
.mission-opinion-btn { padding: 3px 9px; border-radius: 999px; border: 1px solid #d0d0d0; background: #fff; font-size: .74rem; cursor: pointer; }
.mission-opinion-btn:hover { border-color: var(--accent); }
.mission-opinion-btn[aria-pressed="true"] { border-color: var(--accent); background: #eaf3fb; color: #14385e; font-weight: 600; }
.consigne.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hint-btn.labeled {
  opacity: 1; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: #eaf3fb; color: #14385e; border: 1px solid #b7d3ee; white-space: nowrap;
}
.hint-btn.labeled:hover { background: #d8e9f8; }
.hint-btn.labeled.nudge { animation: hintNudge 1.6s ease-in-out infinite; }
@keyframes hintNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 120, 212, .45); }
  50% { box-shadow: 0 0 0 6px rgba(0, 120, 212, 0); }
}
@media (prefers-reduced-motion: reduce) { .hint-btn.labeled.nudge { animation: none; background: #ffe9a8; } }
.hint-box { display: none; border-top: 1px solid #eee; font-size: .78rem; line-height: 1.45; }
.hint-box.open { display: block; }
.hint-label { display: block; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.hint-action { padding: 10px 12px; background: #eaf3fb; color: #14385e; }
.hint-action .hint-label { color: var(--accent); }
.hint-theorie { padding: 9px 12px; background: #f7f7f7; color: #666; font-size: .74rem; border-top: 1px solid #ececec; }
.hint-theorie .hint-label { color: #999; }
.pane-foot { padding: 10px 14px 14px; border-top: 1px solid #eee; }
.btn-verify { width: 100%; padding: 9px; border-radius: 6px; background: #217346; color: #fff; font-weight: 600; font-size: .84rem; }
.btn-verify:hover { background: #1a5c38; }
/* Mode tutoriel : fait clignoter l'élément à utiliser pour la prochaine consigne. */
@keyframes tutorialPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 108, 189, .65); }
  50% { box-shadow: 0 0 0 5px rgba(15, 108, 189, 0); }
}
.tutorial-blink { animation: tutorialPulse 1.2s ease-in-out infinite; border-radius: 4px; position: relative; z-index: 71; }
.pane-reopen {
  position: fixed; right: 12px; bottom: calc(var(--taskbar-h) + 12px); z-index: 40;
  border: 1px solid #d8d8d8; background: #fff; border-radius: 8px;
  padding: 8px 14px; font-size: .82rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.pane-reopen:hover { background: #f0f2f4; }
.pane-reopen.hidden { display: none; }

/* ---------- Barre des tâches ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 50;
  display: flex; align-items: center; padding: 0 10px;
  background: rgba(243, 243, 243, .88);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.taskbar-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
}
.taskbar button { height: 40px; min-width: 40px; display: grid; place-items: center; border-radius: 6px; }
.taskbar button:hover { background: rgba(0, 0, 0, .06); }
.widgets-btn { padding: 0 12px; font-size: .82rem; color: #1b1b1b; }
.coach-btn { position: relative; font-size: 1.05rem; }
.coach-btn .task-badge { top: 2px; right: 2px; }
#startButton svg { display: block; }
#taskbarSearch {
  padding: 0 14px; height: 34px; border-radius: 17px; background: #fff;
  border: 1px solid rgba(0, 0, 0, .1); font-size: .82rem; color: #555;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
#taskbarSearch:hover { background: #fdfdfd; }
#openApps { display: flex; gap: 4px; }
.task-icon { position: relative; font-size: 1.3rem; }
.task-icon.open::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 3px; border-radius: 2px; background: #8a8a8a; transition: width .15s;
}
.task-icon.active { background: rgba(0, 0, 0, .07); }
.task-icon.active::after { width: 16px; background: var(--accent); }
.tray { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tray-access { display: flex; border-right: 1px solid rgba(0, 0, 0, .12); margin-right: 4px; padding-right: 4px; }
.tray-access button { font-size: .78rem; min-width: 32px; height: 32px; color: #333; }
#trayWifi, #trayVolume { font-size: .95rem; min-width: 34px; }
.tray-clock { position: relative; text-align: right; line-height: 1.3; font-size: .72rem; padding: 0 10px; display: grid; }

/* ---------- Menu Démarrer ---------- */
.start-menu {
  position: fixed; bottom: calc(var(--taskbar-h) + 10px); left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 20px)); max-height: calc(100vh - var(--taskbar-h) - 24px);
  overflow: auto; z-index: 60; padding: 22px 26px;
  background: rgba(245, 247, 250, .92);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  animation: start-in .16s ease-out;
}
@keyframes start-in { from { opacity: 0; transform: translate(-50%, 12px); } }
#startSearch {
  width: 100%; padding: 9px 16px; border-radius: 18px; background: #fff;
  border: 1px solid #d0d0d0; border-bottom: 2px solid var(--accent);
}
#startSearch:focus { outline: none; }
.start-label { margin: 18px 2px 8px; font-size: .8rem; font-weight: 600; }
.start-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 2px; }
.start-apps button {
  display: grid; justify-items: center; gap: 7px; padding: 12px 4px;
  font-size: .73rem; text-align: center; border-radius: 6px; word-break: break-word;
}
.start-apps button span { font-size: 1.9rem; line-height: 1; }
.start-apps button:hover { background: rgba(0, 0, 0, .05); }
.start-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08);
}
.start-user { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.power-wrap { position: relative; }
#powerButton { width: 38px; height: 38px; font-size: 1.05rem; display: grid; place-items: center; }
#powerButton:hover { background: rgba(0, 0, 0, .06); }
.power-menu {
  position: absolute; bottom: 46px; right: 0; width: 180px; padding: 5px;
  background: #fdfdfd; border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.power-menu button { display: flex; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; font-size: .85rem; border-radius: 5px; }
.power-menu button:hover { background: rgba(0, 0, 0, .05); }

/* ---------- Menu contextuel ---------- */
.context-menu {
  position: fixed; z-index: 70; min-width: 220px; padding: 5px;
  background: rgba(249, 249, 249, .96);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.context-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; text-align: left; font-size: .84rem; border-radius: 5px;
}
.context-menu button:hover { background: rgba(0, 0, 0, .06); }
.context-menu hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .1); margin: 4px 8px; }

/* ---------- Fenêtres ---------- */
.window {
  position: absolute; display: flex; flex-direction: column;
  width: min(760px, calc(100% - 20px)); height: min(540px, calc(100% - 20px));
  min-width: 320px; min-height: 220px; resize: both;
  background: var(--window-body); border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .16);
  overflow: hidden; transition: opacity .15s ease-out, transform .15s ease-out;
}
.window.opening { opacity: 0; transform: scale(.94); }
.window.closing { opacity: 0; transform: scale(.92); pointer-events: none; }
.window.minimized { display: none; }
.window.maximized {
  top: 0 !important; left: 0 !important; width: 100% !important;
  height: calc(100% - 0px) !important; border-radius: 0; resize: none; border: 0;
}
.window:not(.focused) { box-shadow: 0 6px 22px rgba(0, 0, 0, .2); }
.window:not(.focused) .window-head { color: #7b7b7b; background: var(--window-chrome); }
.window-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding-left: 12px; -webkit-user-select: none; user-select: none;
  background: linear-gradient(180deg, #f3f6fb, #e9eef6);
}
.window-title { display: flex; align-items: center; gap: 8px; font-size: .82rem; overflow: hidden; white-space: nowrap; }
.window-icon { font-size: 1rem; }
.window-controls { display: flex; height: 100%; }
.window-controls button {
  width: 45px; height: 100%; display: grid; place-items: center;
  border-radius: 0; font-size: .72rem; color: #222;
}
.window-controls button:hover { background: #ececec; }
.window-controls .win-close:hover { background: #c42b1c; color: #fff; }
.window-body { flex: 1; overflow: auto; padding: 16px 20px; background: var(--window-body); }
.window-body:has(#fileExplorer) { padding: 0; }

/* ---------- Explorateur de fichiers ---------- */
#fileExplorer { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; min-height: 0; }
.explorer-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 7px 10px;
  background: #fff; border-bottom: 1px solid #e6e6e6;
}
.explorer-toolbar button { font-size: .78rem; padding: 6px 10px; border-radius: 5px; white-space: nowrap; }
.explorer-toolbar button:hover { background: #f0f2f4; }
.toolbar-sep { width: 1px; background: #e0e0e0; margin: 3px 6px; }
.explorer-address {
  display: flex; align-items: center; gap: 2px; padding: 5px 10px;
  background: #fff; border-bottom: 1px solid #e6e6e6; font-size: .8rem;
}
#explorerBack, #explorerForward, #explorerUp { padding: 4px 9px; border-radius: 4px; }
#explorerBack:hover, #explorerForward:hover, #explorerUp:hover { background: #eef2f6; }
#explorerBack:disabled, #explorerForward:disabled, #explorerUp:disabled { opacity: .35; }
.crumb { padding: 4px 7px; border-radius: 4px; }
.crumb:hover { background: #eef2f6; }
.crumb-sep { color: #999; padding: 0 1px; }
#explorerSearch { width: 170px; margin-left: auto; padding: 5px 10px; border: 1px solid #d8dbe0; border-radius: 14px; background: #f3f4f6; font-size: .78rem; }
#explorerSearch:focus { outline: none; border-color: var(--accent); background: #fff; }
#refreshExplorer { padding: 4px 9px; border-radius: 4px; }
#refreshExplorer:hover { background: #eef2f6; }
.explorer-main { display: grid; grid-template-columns: 185px 1fr; min-height: 0; }
.explorer-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #fafbfc; border-right: 1px solid #e6e6e6; overflow: auto;
}
.explorer-nav button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
  text-align: left; font-size: .82rem; border-radius: 5px; white-space: nowrap;
}
.explorer-nav button:hover { background: #eef2f7; }
.explorer-nav button.current { background: #e3ecf7; }
.file-list {
  display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
  padding: 14px; overflow: auto;
}
.empty-folder { color: #777; font-size: .85rem; padding: 8px; }
.file-entry {
  width: 104px; display: grid; justify-items: center; gap: 5px; padding: 10px 6px;
  border: 1px solid transparent; border-radius: 5px; font-size: .74rem;
  text-align: center; word-break: break-word; -webkit-user-select: none; user-select: none;
}
.file-ico { font-size: 2.3rem; line-height: 1; }
.file-entry:hover { background: #eaf3fb; }
.file-entry.selected { background: #d6e9fa; border-color: #9cc5e8; }
.file-list:has(.search-result-entry) { display: block; padding: 6px; }
.search-result-entry {
  width: 100%; display: flex; flex-direction: row; align-items: center; justify-items: normal;
  gap: 10px; padding: 8px 10px; text-align: left;
}
.search-result-entry .file-ico { font-size: 1.4rem; }
.search-result-entry .file-name { display: flex; flex-direction: column; gap: 2px; word-break: normal; }
.file-path { font-size: .7rem; color: #888; font-weight: 400; }
.rename-input { width: 100%; text-align: center; border: 1px solid var(--accent); border-radius: 3px; padding: 2px 3px; font-size: .74rem; }
.explorer-status {
  display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px;
  background: #fff; border-top: 1px solid #e6e6e6; font-size: .73rem; color: #666;
}
.explorer-status .message { font-size: .73rem; }

/* ---------- Navigateur (style Chrome) ---------- */
.window-body:has(#browserPanel) { padding: 0; }
#browserPanel { position: relative; display: flex; flex-direction: column; height: 100%; background: #dee1e6; overflow: hidden; }

/* Bande d'onglets */
.chrome-tabstrip { display: flex; align-items: flex-end; gap: 2px; padding: 8px 8px 0; background: #dee1e6; overflow-x: auto; overflow-y: hidden; }
.browser-tab {
  display: flex; align-items: center; gap: 7px; flex: 0 1 220px; min-width: 108px; max-width: 220px;
  height: 34px; padding: 0 8px 0 11px; border-radius: 10px 10px 0 0;
  font-size: .8rem; color: #5f6368; white-space: nowrap;
}
.browser-tab:hover { background: rgba(255, 255, 255, .55); }
.browser-tab.active { background: #fff; color: #202124; }
.tab-favicon { font-size: .95rem; line-height: 1; flex: none; }
.tab-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tab-close { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; opacity: 0; }
.tab-close .ico { width: 13px; height: 13px; }
.browser-tab:hover .tab-close, .browser-tab.active .tab-close { opacity: .75; }
.tab-close:hover { background: rgba(0, 0, 0, .1); opacity: 1 !important; }
.chrome-newtab { flex: none; align-self: center; width: 30px; height: 30px; border-radius: 50%; color: #5f6368; font-size: 1.1rem; }
.chrome-newtab:hover { background: rgba(255, 255, 255, .55); }

/* Barre d'outils / omnibox */
.chrome-toolbar { display: flex; align-items: center; gap: 3px; padding: 7px 12px; background: #fff; }
.chrome-nav { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #5f6368; }
.chrome-nav:hover { background: rgba(95, 99, 104, .1); }
.chrome-nav:disabled { opacity: .35; }
.chrome-nav .ico { width: 18px; height: 18px; }
.chrome-omnibox {
  position: relative;
  flex: 1; display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 6px;
  padding: 0 8px 0 12px; background: #f1f3f4; border-radius: 17px;
}
.chrome-omnibox:focus-within { background: #fff; box-shadow: 0 0 0 1px #d0d0d0, 0 1px 4px rgba(0, 0, 0, .18); }
.omnibox-lock { display: grid; place-items: center; color: #188038; flex: none; }
.omnibox-lock .ico { width: 15px; height: 15px; }
#addressBar { flex: 1; min-width: 60px; border: 0; background: transparent; font-size: .84rem; color: #202124; }
#addressBar:focus { outline: none; }
.omnibox-star { flex: none; font-size: 1rem; color: #5f6368; width: 24px; height: 24px; border-radius: 50%; }
.omnibox-star:hover { background: rgba(95, 99, 104, .12); }

/* Suggestions de l'omnibox */
.omnibox-suggestions {
  position: absolute; top: calc(100% + 6px); left: -12px; right: -6px; z-index: 20;
  margin: 0; padding: 6px; list-style: none; max-height: 220px; overflow-y: auto;
  background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.omnibox-suggestions li { margin: 0; }
.omnibox-suggestions button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 6px; font-size: .8rem; color: #202124; text-align: left; }
.omnibox-suggestions button:hover { background: #f1f3f4; }
.suggest-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-url { margin-left: auto; flex: none; color: #5f6368; font-size: .72rem; }

/* Menu ⋮ */
.browser-menu { position: fixed; width: 210px; right: auto; }

/* Panneau des téléchargements */
.downloads-panel { width: 260px; }
.download-item { display: flex; align-items: center; gap: 8px; }
.downloads-empty { padding: 10px 12px; color: #5f6368; font-size: .8rem; }

/* Barre de favoris */
.favorites-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 30px; padding: 2px 10px; background: #fff; border-bottom: 1px solid #e4e4e4; }
.favorites-bar.empty { padding: 2px 14px; }
.fav-hint { font-size: .74rem; color: #9aa0a6; }
.fav-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 4px; font-size: .76rem; color: #3c4043; }
.fav-item:hover { background: #f1f3f4; }
.fav-remove { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: .62rem; color: #5f6368; opacity: 0; }
.fav-item:hover .fav-remove { opacity: .8; }
.fav-remove:hover { background: rgba(0, 0, 0, .12); opacity: 1 !important; }

/* Contenu de page */
.web-page a { color: #1a56b0; }
.search-result { margin: 14px 0; }
.search-result a { font-size: 1.02rem; }
.result-url { color: #157145; font-size: .78rem; }
.result-meta { color: #70757a; font-size: .78rem; margin: -6px 0 10px; }
.result-snippet { color: #4d5156; font-size: .82rem; }
.ad-label { display: inline-block; padding: 0 6px; border-radius: 4px; background: #fff4ce; color: #5c4400; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.search-verdict { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: .86rem; line-height: 1.5; }
.search-verdict.ok { background: #e6f4ea; border: 1px solid #a8dab5; color: #0d5222; }
.search-verdict.warn { background: #fff4e5; border: 1px solid #f7c873; color: #6b4300; }
.official-badge { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: #e7f1fb; color: #0f4c81; font-size: .78rem; font-weight: 600; }
.ad-page-note { color: #6b4300; font-size: .82rem; }
.omnibox-insecure { flex: none; padding: 0 8px; color: #a4262c; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.shop-page { max-width: 560px; }
.shop-brand { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: #1a1a1a; }
.shop-urgency { margin: 0 0 12px; padding: 6px 10px; border-radius: 6px; background: #fde7e9; color: #a4262c; font-weight: 600; font-size: .84rem; }
.shop-product { display: flex; gap: 18px; align-items: flex-start; }
.shop-emoji { font-size: 4rem; line-height: 1; }
.shop-product h3 { margin: 0 0 6px; }
.shop-price { margin: 0 0 6px; font-size: 1.3rem; font-weight: 700; color: #1a1a1a; }
.shop-price s { font-size: .9rem; font-weight: 400; color: #888; }
.shop-reviews, .shop-payment { margin: 0 0 8px; font-size: .86rem; color: #333; }
.ex-section.requested { outline: 2px solid #0f6cbd; outline-offset: 4px; border-radius: 8px; }
#visioPanel { height: 100%; }
.visio { height: 100%; min-height: 360px; background: #1f1f23; color: #f3f3f3; font-size: .86rem; }
.visio-prejoin, .visio-ended { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.visio-title { margin: 0; font-weight: 600; }
.visio-preview { width: 260px; height: 160px; border-radius: 10px; background: #2d2d33; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 3rem; color: #aaa; }
.visio-preview span, .visio-tile span { font-size: .78rem; }
.visio-preview.on { background: linear-gradient(135deg, #3a6ea5, #5aa0c8); color: #fff; }
.visio-controls, .visio-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.visio-btn { padding: 7px 12px; border-radius: 999px; background: #3a3a42; color: #fff; font-size: .8rem; }
.visio-btn.off { background: #c4314b; }
.visio-btn.on { background: #2b5797; }
.visio-btn.leave { background: #c4314b; }
.visio-join, .visio-ended button { padding: 8px 18px; border-radius: 6px; }
.visio-call { display: grid; grid-template-columns: 1fr 210px; }
.visio-main { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.visio-stage { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 10px; min-height: 180px; }
.visio-tile { border-radius: 10px; background: #2d2d33; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 2.6rem; }
.visio-tile.self.on { background: linear-gradient(135deg, #3a6ea5, #5aa0c8); }
.visio-chat { display: flex; flex-direction: column; border-left: 1px solid #333; background: #26262b; }
.visio-chat-title { margin: 0; padding: 10px; font-weight: 600; border-bottom: 1px solid #333; }
.visio-messages { flex: 1; overflow-y: auto; padding: 8px 10px; max-height: 260px; }
.visio-msg { margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: #34343b; line-height: 1.4; }
.visio-msg b { display: block; font-size: .72rem; color: #9cc3ff; }
.visio-msg.me { background: #2b5797; }
#visioChatForm { display: flex; gap: 4px; padding: 8px; border-top: 1px solid #333; }
#visioChatForm input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid #444; background: #1f1f23; color: #fff; }
#visioChatForm button { padding: 6px 10px; border-radius: 6px; background: #2b5797; color: #fff; }
.pdf-page.doc-quiz p { cursor: pointer; border-radius: 4px; }
.pdf-page.doc-quiz p:hover { background: #f3f6fa; }
.doc-answer.found { background: #e6f4ea; outline: 2px solid #a8dab5; border-radius: 3px; }
.password-dialog input { width: 100%; padding: 8px 10px; border: 1px solid #c7ced6; border-radius: 6px; font: inherit; box-sizing: border-box; }
.pw-meter { height: 8px; margin: 10px 0 4px; border-radius: 999px; background: #e6e6e6; overflow: hidden; }
.pw-meter-fill { height: 100%; width: 0; transition: width .2s ease; }
.pw-meter-fill.level-faible { width: 33%; background: #c4314b; }
.pw-meter-fill.level-moyen { width: 66%; background: #d47500; }
.pw-meter-fill.level-fort { width: 100%; background: #107c10; }
.pw-level { margin: 0 0 6px; font-size: .82rem; font-weight: 600; }
.pw-reasons { margin: 0 0 8px; padding-left: 18px; color: #a4262c; font-size: .8rem; line-height: 1.5; }
.demarche-site { max-width: 620px; }
.demarche-brand { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #0f6cbd; font-weight: 700; color: #0f4c81; }
.demarche-links { padding-left: 18px; line-height: 2; }
.demarche-button { display: inline-block; padding: 8px 14px; border-radius: 6px; background: #0f6cbd; color: #fff !important; text-decoration: none; font-weight: 600; }
.demarche-form { display: grid; gap: 10px; max-width: 420px; }
.demarche-form label { display: grid; gap: 4px; font-size: .84rem; font-weight: 600; color: #333; }
.demarche-form input:not([type="checkbox"]) { padding: 7px 9px; border: 1px solid #c7ced6; border-radius: 6px; font: inherit; font-weight: 400; }
.demarche-form .field-invalid { border-color: #c4314b; background: #fdf3f4; }
.demarche-check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.field-error { color: #a4262c; font-size: .76rem; font-weight: 500; min-height: 0; }
.demarche-confirm { padding: 14px 18px; border-radius: 8px; background: #e6f4ea; border: 1px solid #a8dab5; }
.muted { color: #777; font-size: .8rem; }
.rdv-grid { border-collapse: collapse; margin: 6px 0 14px; font-size: .78rem; }
.rdv-grid th, .rdv-grid td { padding: 3px 4px; text-align: center; }
.rdv-grid thead th { color: #333; }
.rdv-grid tbody th { color: #666; font-weight: 500; }
.rdv-taken { color: #aaa; }
.rdv-slot { padding: 3px 8px; border-radius: 4px; background: #e7f1fb; color: #0f4c81; font-size: .74rem; }
.rdv-slot.selected { background: #0f6cbd; color: #fff; }
.rdv-selected { margin: 0; font-size: .86rem; }
.shop-legal { margin-top: 18px; padding-top: 10px; border-top: 1px solid #e6e6e6; font-size: .78rem; color: #666; }
.web-page { flex: 1; background: #fff; padding: 24px; min-height: 220px; overflow: auto; }
.web-page h3 { margin-top: 0; }
.web-page button { margin: 8px 8px 0 0; padding: 8px 14px; background: #e8eef4; }
.web-page button:hover { background: #dbe6ef; }
.page-loading { display: grid; place-items: center; min-height: 220px; }
.page-loading-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #dadce0; border-top-color: #1a73e8; animation: browser-spin .8s linear infinite; }
.tab-spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c4c7c5; border-top-color: #1a73e8; animation: browser-spin .8s linear infinite; }
@keyframes browser-spin { to { transform: rotate(360deg); } }
.browser-tab[draggable="true"] { cursor: grab; }

/* ---------- Job-room ---------- */
.job-room-page { padding: 22px 26px; }
.job-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -22px -26px 18px; padding: 12px 26px; background: #f3f4f6; border-bottom: 1px solid #e3e7eb;
}
.job-nav a { font-weight: 600; color: #202124; font-size: .92rem; }
.job-nav button { position: relative; padding: 8px 14px; background: var(--accent); color: #fff; border-radius: 6px; font-size: .8rem; }
.job-nav button:hover { background: #005ba6; }
.job-nav-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; padding: 0 4px; background: #c42b1c; color: #fff; font-style: normal; font-size: .62rem; line-height: 1.5; text-align: center; border-radius: 8px; }
.job-hero { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #e6e6e6; }
.job-hero h3 { margin: 0 0 4px; }
.job-search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.job-search-form select { padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; font-size: .84rem; min-width: 190px; }
.job-search-form button { padding: 9px 18px; background: var(--accent); color: #fff; border-radius: 6px; }
.job-search-form button:hover { background: #005ba6; }
.job-search-summary { color: #666; font-size: .82rem; margin-top: -6px; }
.job-list { display: grid; gap: 10px; margin-top: 14px; }
.job-card { padding: 14px 16px; background: #fff; border: 1px solid #e3e7eb; border-radius: 8px; }
.job-card-title { font-size: 1rem; font-weight: 600; color: #1a56b0; }
.job-card-meta { margin: 4px 0; font-size: .8rem; color: #555; }
.job-card-desc { margin: 0; font-size: .84rem; color: #333; }
.job-detail-meta { color: #555; font-size: .86rem; margin: 6px 0 16px; }
.acronym { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.job-apply { margin-top: 18px; }
.job-apply button { padding: 10px 18px; background: var(--accent); color: #fff; border-radius: 6px; font-size: .86rem; }
.job-apply button:hover { background: #005ba6; }
.job-apply-form { display: grid; gap: 12px; max-width: 480px; margin-top: 14px; }
.job-apply-form label { display: block; font-size: .82rem; }
.job-apply-form input, .job-apply-form textarea { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid #ccc; border-radius: 6px; font-size: .85rem; }
.job-apply-form textarea { min-height: 90px; }
.job-apply-form button[type="submit"] { justify-self: start; padding: 10px 20px; background: var(--accent); color: #fff; border-radius: 6px; }
.job-apply-form button[type="submit"]:hover { background: #005ba6; }
.job-confirm { max-width: 460px; padding: 20px 24px; background: #eefaf4; border: 1px solid #b7e4cd; border-radius: 8px; }
.job-confirm h3 { margin-top: 0; color: #18734f; }
.decoy-banner { padding: 14px 16px; margin: -22px -26px 18px; background: #fdecea; border-bottom: 1px solid #f6c7c0; }
.decoy-banner h3 { margin: 0 0 4px; color: #a02f24; }
.decoy-reveal { max-width: 480px; padding: 20px 24px; background: #fdecea; border: 1px solid #f6c7c0; border-radius: 8px; }
.decoy-reveal h3 { margin-top: 0; color: #a02f24; }

/* ---------- Courrier ---------- */
.window-body:has(#mailPanel) { padding: 0; }
#mailPanel { position: relative; height: 100%; }
.mail-layout { display: grid; grid-template-columns: 188px 280px 1fr; height: 100%; min-height: 0; background: #fff; }
.mail-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: #f7f9fb; border-right: 1px solid #e6e6e6; }
.mail-nav button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 6px; font-size: .84rem; color: #333; transition: background .12s; }
.mail-nav button:hover { background: #eef2f7; }
.mail-nav button.current { background: #e3ecf7; color: var(--accent); font-weight: 600; }
#mailCompose { justify-content: center; margin-bottom: 12px; background: var(--accent); color: #fff; font-weight: 600; padding: 11px 12px; box-shadow: 0 2px 6px rgba(15, 108, 189, .35); }
#mailCompose:hover { background: #005ba6; }
.mail-badge { margin-left: auto; padding: 1px 7px; background: var(--accent); color: #fff; font-style: normal; font-size: .68rem; border-radius: 10px; }

.mail-list { display: flex; flex-direction: column; overflow: auto; background: #fff; border-right: 1px solid #e6e6e6; }
.mail-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; text-align: left; border-bottom: 1px solid #f0f0f0; border-left: 3px solid transparent; transition: background .12s; }
.mail-row:hover { background: #f4f8fc; }
.mail-row.selected { background: #e3ecf7; border-left-color: var(--accent); }
.mail-row.unread { border-left-color: var(--accent); }
.mail-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: .8rem; font-weight: 700; -webkit-user-select: none; user-select: none;
}
.mail-avatar-lg { width: 42px; height: 42px; font-size: .98rem; }
.mail-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mail-row-from { font-size: .81rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.unread .mail-row-from { font-weight: 700; color: #1a1a1a; }
.mail-row-date { flex-shrink: 0; font-size: .7rem; color: #888; }
.mail-row-subject { font-size: .79rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.unread .mail-row-subject { font-weight: 600; color: var(--accent); }
.mail-row-clip { font-size: .72rem; opacity: .65; }
.mail-row-preview { font-size: .72rem; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mail-reading { overflow: auto; padding: 22px 26px; background: #fbfcfd; }
.mail-head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e6e6e6; }
.mail-subject { margin: 0 0 14px; font-size: 1.25rem; font-weight: 600; color: #1a1a1a; }
.mail-head-meta { display: flex; align-items: center; gap: 12px; }
.mail-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mail-head-name { font-size: .88rem; font-weight: 600; color: #1a1a1a; }
.mail-head-sub { font-size: .74rem; color: #888; }
.mail-head-addr { font-size: .8rem; color: #444; word-break: break-all; }
.mail-link-row { margin: 14px 0 0; }
.mail-link { background: none; padding: 0; color: #0f6cbd; text-decoration: underline; font-size: .88rem; cursor: pointer; }
.mail-actions .mail-report { background: #fde7e9; color: #a4262c; }
.mail-actions .mail-report:hover { background: #fbd5d8; }
.mail-body { padding: 2px; background: transparent; border: none; font-size: .88rem; line-height: 1.65; color: #262626; }
.mail-attachment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 12px; background: #fff; border: 1px solid #e0e6ee; border-radius: 8px; font-size: .8rem; }
.mail-actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6e6e6; }
.mail-actions button { background: #eef2f7; padding: 8px 16px; border-radius: 6px; font-weight: 500; }
.mail-actions button:hover { background: #e2e9f1; }
.mail-actions .primary { background: var(--accent); color: #fff; }
.mail-actions .primary:hover { background: #005ba6; }

.mail-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; box-sizing: border-box; }
.mail-empty-ico { font-size: 2.6rem; opacity: .45; }

.mail-compose { display: flex; flex-direction: column; height: 100%; }
.mail-compose h3 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 600; }
.compose-field { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e6e6e6; }
.compose-field label { flex-shrink: 0; width: 46px; font-size: .8rem; color: #666; }
.compose-field input { flex: 1; width: auto; margin: 0; padding: 3px 0; border: none; border-radius: 0; background: transparent; font-size: .86rem; }
.compose-field input:focus { outline: none; }
.mail-compose textarea { width: 100%; flex: 1; min-height: 200px; margin: 14px 0 8px; padding: 12px; border: 1px solid #e0e6ee; border-radius: 6px; background: #fff; font-size: .86rem; line-height: 1.5; resize: vertical; }
.mail-attach-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mail-attach-row > button { background: #eef2f7; padding: 7px 14px; border-radius: 6px; }
.mail-attach-row > button:hover { background: #e2e9f1; }
.attach-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; background: #fff; border: 1px solid #e0e6ee; border-radius: 14px; font-size: .76rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.attach-chip .ico { width: 15px; height: 15px; }
.attach-chip button { padding: 0 2px; opacity: .6; }
.attach-chip button:hover { opacity: 1; }
.task-badge { position: absolute; top: 3px; right: 1px; min-width: 15px; padding: 0 4px; background: #c42b1c; color: #fff; font-style: normal; font-size: .6rem; line-height: 1.5; text-align: center; border-radius: 8px; }

/* ---------- ORP : preuves de recherche d'emploi ---------- */
#orpPanelInner h3 { margin-top: 0; }
.orp-table-wrap { overflow: auto; margin: 14px 0; border: 1px solid #e3e7eb; border-radius: 8px; background: #fff; }
.orp-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.orp-table th { padding: 9px 10px; background: #f3f4f6; text-align: left; font-weight: 600; border-bottom: 1px solid #e3e7eb; white-space: nowrap; }
.orp-table td { padding: 6px 8px; border-bottom: 1px solid #eef0f2; }
.orp-table input, .orp-table select { width: 100%; padding: 6px 8px; border: 1px solid #d5d9dd; border-radius: 4px; font-size: .78rem; background: #fff; }
.orp-table input[type="date"] { min-width: 130px; }
.orp-delete { padding: 4px 8px; border-radius: 5px; }
.orp-delete:hover { background: #fbe3df; }
.orp-actions { display: flex; gap: 8px; }
.orp-actions button { padding: 9px 16px; background: #e8eef4; border-radius: 6px; font-size: .84rem; }
.orp-actions .primary { background: var(--accent); color: #fff; }
.orp-actions .primary:hover { background: #005ba6; }
.orp-form-panel {
  margin: 14px 0; padding: 16px 18px; background: #f7f9fb;
  border: 1px solid #d7e0e7; border-left: 3px solid var(--accent); border-radius: 6px;
}
.orp-form-panel h3 { margin: 0 0 12px; font-size: .95rem; }
.orp-form-panel label { display: block; margin-bottom: 10px; font-size: .82rem; }
.orp-form-panel input, .orp-form-panel select { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: .84rem; background: #fff; }
.orp-form-panel .dialog-buttons { margin-top: 4px; }
.orp-form-panel .dialog-buttons button { padding: 8px 16px; background: #e8eef4; border-radius: 6px; }
.orp-form-panel .dialog-buttons .primary { background: var(--accent); color: #fff; }
.orp-form-panel .dialog-buttons .primary:hover { background: #005ba6; }

/* ---------- Paramètres ---------- */
.window-body:has(#settingsPanel) { padding: 0; }
#settingsPanel { height: 100%; }
.settings-layout { display: grid; grid-template-columns: 210px 1fr; height: 100%; min-height: 0; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; background: #fafbfc; border-right: 1px solid #e6e6e6; overflow: auto; }
.settings-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px 14px; font-weight: 600; font-size: .85rem; }
.settings-nav button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 5px; font-size: .82rem; }
.settings-nav button:hover { background: #eef2f7; }
.settings-nav button.current { background: #e3ecf7; }
.settings-body { padding: 18px 22px; overflow: auto; }
.settings-body h3 { margin-top: 0; }
.settings-hint { font-size: .8rem; color: #555; }
.setting-status { font-weight: 400; }
.setting-status.on { color: #157145; }
.setting-status.off { color: #b1482e; }
.theme-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-choice { display: grid; gap: 6px; justify-items: center; padding: 8px; border: 2px solid transparent; border-radius: 8px; font-size: .75rem; }
.theme-choice:hover { background: #eef2f7; }
.theme-choice.current { border-color: var(--accent); }
.theme-swatch { width: 84px; height: 52px; border-radius: 6px; }
.swatch-bleu { background: linear-gradient(150deg, #0b2e73, #1b63c9); }
.swatch-violet { background: linear-gradient(150deg, #2a0b52, #7b3fc4); }
.swatch-vert { background: linear-gradient(150deg, #06382f, #1d9c7a); }
.account-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; }
.wallpaper.theme-violet {
  background:
    radial-gradient(1100px 700px at 68% 40%, rgba(205, 140, 255, .48), transparent 65%),
    radial-gradient(900px 620px at 28% 72%, rgba(255, 120, 190, .32), transparent 62%),
    linear-gradient(150deg, #2a0b52 0%, #4a1c86 45%, #7b3fc4 100%);
  background-color: #2a0b52;
}
.wallpaper.theme-vert {
  background:
    radial-gradient(1100px 700px at 68% 40%, rgba(120, 230, 190, .42), transparent 65%),
    radial-gradient(900px 620px at 28% 72%, rgba(80, 180, 255, .28), transparent 62%),
    linear-gradient(150deg, #06382f 0%, #0d5c4a 45%, #1d9c7a 100%);
  background-color: #06382f;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 16px; margin-bottom: 8px; background: #fff;
  border: 1px solid #e8e8e8; border-radius: 6px;
}
.setting-row input[type="range"] { max-width: 210px; accent-color: var(--accent); }
.setting-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.setting-row select { padding: 7px 10px; border: 1px solid #ccc; border-radius: 5px; background: #fff; }
.wifi-networks { display: flex; flex-direction: column; gap: 6px; }
.wifi-network-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; font-size: .85rem;
}
.wifi-network-item:hover { background: #f2f4f7; }
.wifi-network-item.connected { border-color: var(--accent); background: #eef5fc; }
.wifi-network-item .wifi-lock { opacity: .6; }
.wifi-network-item .wifi-connected-label { margin-left: auto; color: var(--accent); font-weight: 600; font-size: .78rem; }
.wifi-password-row { display: flex; gap: 6px; margin-top: 4px; }
.wifi-password-row input { flex: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; }
.wifi-password-row button { width: 38px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-size: .95rem; }
.wifi-password-row button:hover { background: #f0f2f4; }

/* ---------- Lecteur PDF ---------- */
#pdfPanel { position: relative; height: 100%; overflow: auto; }
.pdf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f3f6fb; border-bottom: 1px solid #e2e8f2; }
.pdf-filename { font-size: .82rem; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-toolbar button { padding: 6px 12px; border-radius: 4px; background: #fff; border: 1px solid #dde4ee; }
.pdf-toolbar button:hover { background: #e9f0fa; }
.pdf-page {
  max-width: 660px; min-height: 280px; margin: 16px auto; padding: 42px 48px;
  background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
  white-space: pre-wrap; font-size: .88rem; line-height: 1.6; color: #222;
  overflow-wrap: break-word; -webkit-user-select: text; user-select: text;
}
.pdf-page h1, .pdf-page h2, .pdf-page h3 { color: #2b579a; line-height: 1.3; }
.pdf-page h1 { font-size: 1.6em; }
.pdf-page h2 { font-size: 1.3em; }
.pdf-page h3 { font-size: 1.1em; }
.pdf-page ul, .pdf-page ol { padding-left: 1.4em; margin: .6em 0; }
.pdf-page p { margin: 0 0 .6em; }
.print-dialog {
  position: absolute; z-index: 5; top: 60px; left: 50%; transform: translateX(-50%);
  width: min(300px, 92%); padding: 18px; background: #fff;
  border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
}
.print-dialog h3 { margin-top: 0; }
.print-dialog label { display: block; margin: 10px 0; }
.print-dialog input, .print-dialog select { width: auto; margin-left: 8px; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; }
.print-dialog button { margin-right: 8px; margin-top: 8px; padding: 7px 14px; background: #e8eef4; }
#trainerPanel input { padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; margin-right: 8px; }
#trainerPanel button { background: #e8eef4; padding: 8px 14px; margin: 4px 4px 4px 0; }
.trainer-history { max-height: 190px; overflow: auto; margin-top: 12px; padding: 12px; background: #1b1f27; color: #d9f0fa; border-radius: 8px; font-size: .74rem; }

/* ---------- Ancrage des fenêtres (snap) ---------- */
.snap-preview {
  position: absolute; z-index: 999999; pointer-events: none;
  background: rgba(0, 103, 192, .15); border: 1px solid rgba(0, 103, 192, .45);
  border-radius: 8px; transition: left .1s, width .1s, height .1s;
}
.window.animate { transition: left .15s ease-out, top .15s ease-out, width .15s ease-out, height .15s ease-out, opacity .15s, transform .15s; }

/* ---------- Réglages rapides / calendrier ---------- */
.quick-panel {
  position: fixed; right: 12px; bottom: calc(var(--taskbar-h) + 10px); width: 320px;
  padding: 16px; z-index: 65;
  background: rgba(245, 247, 250, .95);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  animation: flyout-in .16s ease-out;
}
@keyframes flyout-in { from { opacity: 0; transform: translateY(10px); } }
.qs-toggle {
  display: flex; align-items: center; gap: 10px; width: 160px;
  padding: 12px 14px; background: #e4e9ef; border-radius: 6px; font-size: .85rem;
}
.qs-toggle.active { background: var(--accent); color: #fff; }
.qs-slider { display: flex; align-items: center; gap: 12px; margin: 16px 2px; }
.qs-wifi-networks { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.qs-wifi-networks:empty { margin: 0; }
.qs-slider input { flex: 1; accent-color: var(--accent); }
#qsAllSettings { width: 100%; text-align: left; padding: 10px 12px; margin-top: 4px; border-top: 1px solid rgba(0, 0, 0, .08); border-radius: 0; font-size: .85rem; }
#qsAllSettings:hover { background: rgba(0, 0, 0, .05); }
.calendar-flyout { width: 300px; }
.widgets-panel { left: 12px; right: auto; width: 340px; display: flex; flex-direction: column; gap: 10px; }
.widget-card { padding: 14px 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; }
.widget-card h3 { margin: 0 0 8px; font-size: .84rem; }
.widget-card p { margin: 0 0 6px; font-size: .82rem; color: #333; }
.widget-card button { margin-top: 4px; padding: 8px 12px; background: var(--accent); color: #fff; border-radius: 6px; font-size: .8rem; }
.widget-card button:hover { background: #0a5aa0; }
.widget-weather-now { font-size: 1.5rem; font-weight: 600; }
.widget-weather-now span { display: block; font-size: .78rem; font-weight: 400; color: #666; }
.widget-weather-next { color: #555; }
.coach-panel { width: 320px; padding: 14px; display: flex; flex-direction: column; max-height: calc(100vh - var(--taskbar-h) - 40px); overflow-y: auto; }
.coach-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.coach-head strong { font-size: .92rem; }
.coach-progress { font-size: .74rem; font-weight: 700; color: #667; background: rgba(0, 0, 0, .06); padding: 2px 9px; border-radius: 999px; }
.coach-open-all { margin-top: 12px; padding: 8px 10px; text-align: center; background: transparent; color: var(--accent); font-weight: 600; font-size: .78rem; border-radius: 8px; }
.coach-open-all:hover { background: rgba(0, 103, 192, .08); }
.coach-btn { border: 1px solid rgba(0,103,192,.18); background: linear-gradient(145deg,#e5f4ff,#d9edff); color: #075fa8; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.coach-panel { width: min(390px, calc(100vw - 20px)); max-height: min(650px, calc(100vh - var(--taskbar-h) - 24px)); padding: 0; overflow: hidden; border-radius: 18px; background: rgba(248,251,255,.96); border-color: rgba(61,119,181,.22); box-shadow: 0 24px 70px rgba(9,32,61,.3); }
.assistant-head { display:flex; align-items:center; justify-content:space-between; padding:15px 16px 11px; background:linear-gradient(135deg,#0d5d9e,#277ab8); color:#fff; }.assistant-identity,.assistant-head-actions { display:flex; align-items:center; gap:10px; }.assistant-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.25); font-size:18px; }.assistant-identity strong,.assistant-identity small { display:block; }.assistant-identity strong { font-size:.92rem; }.assistant-identity small { margin-top:2px; color:#d9efff; font-size:.7rem; }.assistant-identity small i { display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:#70f0b0; }.assistant-head-actions { gap:8px; }.assistant-head #coachClose { width:28px; height:28px; border-radius:9px; color:#fff; font-size:20px; line-height:1; }.assistant-head #coachClose:hover { background:rgba(255,255,255,.16); }.assistant-progress { color:#e4f3ff; background:rgba(4,35,66,.23); padding:4px 8px; border-radius:999px; font-size:.7rem; font-weight:800; }.assistant-progress-track { height:3px; background:#dce9f5; }.assistant-progress-track i { display:block; height:100%; background:linear-gradient(90deg,#48d8ca,#8ee889); transition:width .3s ease; }
.assistant-mission { margin:13px 14px 10px; padding:12px; border:1px solid #d7e5f3; border-radius:14px; background:linear-gradient(135deg,#f4faff,#e9f4ff); }.assistant-mission > span { color:#47769e; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.assistant-mission > div { display:flex; align-items:center; gap:9px; margin:5px 0; }.assistant-mission i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#fff; font-style:normal; font-size:17px; box-shadow:0 2px 7px rgba(29,77,121,.1); }.assistant-mission strong { color:#173c5d; font-size:.88rem; }.assistant-mission p { margin:0; color:#4f6680; font-size:.75rem; line-height:1.4; }.assistant-mission.complete { background:#eefbf4; border-color:#c9ead8; }
.assistant-thread { min-height:118px; max-height:205px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:4px 14px 10px; }.assistant-message { max-width:84%; padding:9px 11px; border-radius:13px; font-size:.78rem; line-height:1.42; animation:assistant-message-in .18s ease-out; }.assistant-message.assistant { align-self:flex-start; background:#eef3f8; color:#2d4257; border-bottom-left-radius:4px; }.assistant-message.user { align-self:flex-end; background:linear-gradient(135deg,#0c70ba,#2188cd); color:#fff; border-bottom-right-radius:4px; }.assistant-message.typing { display:flex; gap:4px; align-items:center; min-height:16px; }.assistant-message.typing i { width:5px; height:5px; border-radius:50%; background:#6c849d; animation:assistant-typing .8s infinite alternate; }.assistant-message.typing i:nth-child(2){animation-delay:.16s}.assistant-message.typing i:nth-child(3){animation-delay:.32s}@keyframes assistant-message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes assistant-typing{to{transform:translateY(-3px);opacity:.35}}
.assistant-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }.assistant-chips button { padding:6px 9px; border:1px solid #cfe0f0; border-radius:999px; background:#fff; color:#216294; font-size:.7rem; font-weight:700; cursor:pointer; }.assistant-chips button:hover { background:#e8f4ff; border-color:#9fc6e8; }.assistant-composer { display:flex; gap:8px; padding:10px 14px; border-top:1px solid #e1eaf3; background:#f8fbfe; }.assistant-composer input { flex:1; min-width:0; padding:9px 11px; border:1px solid #c8d9e9; border-radius:10px; outline:none; background:#fff; color:#1f3850; font-size:.78rem; }.assistant-composer input:focus { border-color:#2f81c0; box-shadow:0 0 0 3px rgba(47,129,192,.13); }.assistant-composer button { width:35px; border-radius:10px; background:#0d70b7; color:#fff; font-size:18px; cursor:pointer; }.assistant-composer button:hover { background:#075f9e; }.coach-open-all { margin:0 14px 12px; padding:7px 10px; border:1px solid transparent; }.coach-open-all:hover { border-color:#d5e3f1; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.calendar-head strong { font-size: .9rem; text-transform: capitalize; }
.calendar-head button { width: 32px; height: 32px; border-radius: 6px; font-size: 1.1rem; }
.calendar-head button:hover { background: rgba(0, 0, 0, .06); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .8rem; }
.calendar-grid .dow { color: #666; font-size: .68rem; padding: 4px 0; }
.calendar-grid .day { padding: 7px 0; border-radius: 50%; }
.calendar-grid .day.today { background: var(--accent); color: #fff; }
.calendar-grid .day.blank { visibility: hidden; }

/* ---------- Boîtes de dialogue ---------- */
.dialog-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dialog-buttons button { padding: 8px 14px; background: #e8eef4; }
.dialog-buttons .primary { background: var(--accent); color: #fff; }
.dialog-buttons .primary:hover { background: #005ba6; }

/* ---------- Corbeille pleine ---------- */
.desktop-icon > span, .file-ico, .nav-ico { position: relative; }
.bin-badge {
  position: absolute; right: -7px; bottom: -2px; font-size: .8em; font-style: normal;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

/* ---------- Info-bulles ---------- */
.sys-tooltip {
  position: fixed; z-index: 500; transform: translateX(-50%);
  padding: 4px 10px; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 4px; font-size: .74rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none; transition: opacity .12s; white-space: nowrap;
}
.sys-tooltip.show { opacity: 1; }

/* ---------- Snap Layouts ---------- */
.snap-layouts {
  position: fixed; z-index: 75; display: flex; gap: 6px; padding: 8px;
  background: rgba(249, 249, 249, .97);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.snap-layouts button { display: flex; gap: 3px; width: 64px; height: 40px; padding: 4px; border-radius: 6px; }
.snap-layouts button:hover { background: rgba(0, 0, 0, .06); }
.snap-layouts i { flex: 1; border-radius: 3px; background: #cfd8e3; }
.snap-layouts i.on { background: var(--accent); }

/* ---------- Afficher le bureau ---------- */
#showDesktop { width: 9px; min-width: 9px; height: 100%; border-radius: 0; border-left: 1px solid rgba(0, 0, 0, .18); margin-left: 6px; }
#showDesktop:hover { background: rgba(0, 0, 0, .08); }

/* ---------- Notifications ---------- */
.toast-area { position: fixed; right: 14px; bottom: calc(var(--taskbar-h) + 12px); display: grid; gap: 8px; z-index: 80; }
/* Volet des missions ouvert : les messages s'affichent à sa gauche (ils cachaient « Vérifier ») */
body:has(.desktop.pane-open) .toast-area { right: calc(320px + 14px); }
.toast {
  max-width: 330px; padding: 13px 16px; font-size: .84rem;
  background: rgba(249, 249, 249, .97); border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px; box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: none; }

/* ---------- Voile de luminosité ---------- */
.brightness-veil { position: fixed; inset: 0; z-index: 300; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---------- Dialogues système ---------- */
.dialog-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(0, 0, 0, .35); }
.system-dialog {
  width: min(380px, 92vw); padding: 20px 22px; background: #fdfdfd;
  border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .4);
}
.system-dialog h3 { margin: 0 0 10px; }
.system-dialog p { margin: 0; }

/* ---------- Page hors connexion ---------- */
.offline-page { text-align: center; padding: 46px 24px; }
.offline-page button { margin: 4px; }
.offline-ico { font-size: 3rem; filter: grayscale(1); opacity: .55; margin-bottom: 8px; }

/* ---------- Enregistrer sous ---------- */
.saveas-dialog2 {
  width: min(760px, 94vw); height: min(520px, 82vh); padding: 0;
  display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden;
}
.saveas-titlebar { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; }
.saveas-title-ico .ico { width: 20px; height: 20px; }
.saveas-titlebar h3 { flex: 1; margin: 0; font-size: 1.05rem; }
.saveas-close { padding: 4px 9px; border-radius: 4px; font-size: .85rem; }
.saveas-close:hover { background: #f0f2f4; }
.saveas-dialog2 .explorer-address { padding: 6px 14px; }
#sasBack, #sasFwd, #sasUp { padding: 4px 9px; border-radius: 4px; }
#sasBack:hover, #sasFwd:hover, #sasUp:hover { background: #eef2f6; }
#sasBack:disabled, #sasFwd:disabled, #sasUp:disabled { opacity: .35; }
.saveas-main { min-height: 0; }
.saveas-table { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.saveas-table-head {
  display: grid; grid-template-columns: 1fr 150px 190px; gap: 8px; padding: 6px 14px;
  background: #f7f8fa; border-bottom: 1px solid #e6e6e6; font-size: .74rem; color: #666; font-weight: 600;
}
.saveas-table-body { overflow-y: auto; flex: 1; }
.saveas-tr {
  display: grid; grid-template-columns: 1fr 150px 190px; gap: 8px; width: 100%;
  padding: 6px 14px; background: none; border: none; border-bottom: 1px solid #f2f2f2;
  text-align: left; font-size: .82rem; white-space: nowrap;
}
.saveas-tr:hover { background: #eaf3fb; }
.saveas-tr.selected { background: #d7e9fb; }
.saveas-tr.attached { background: #eaf7ec; }
.saveas-tr.attached.selected { background: #cdeed9; }
.attach-hint { margin: 0 0 8px; font-size: .8rem; color: #666; }
.saveas-td-name { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
.saveas-td-name .ico { width: 18px; height: 18px; flex-shrink: 0; }
.saveas-td-date, .saveas-td-type { color: #666; overflow: hidden; text-overflow: ellipsis; }
.saveas-footer { padding: 10px 14px 14px; border-top: 1px solid #e6e6e6; background: #fff; }
.saveas-field { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.saveas-field label { flex-shrink: 0; width: 100px; font-size: .84rem; }
.saveas-field input { flex: 1; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: .84rem; }
.saveas-field input:disabled { background: #f5f5f5; color: #666; }
.saveas-footer .dialog-buttons { justify-content: flex-end; margin-top: 4px; }

/* ---------- Petits écrans ---------- */
@media (max-width: 820px) {
  .taskbar-center { position: static; transform: none; }
  #taskbarSearch span.search-text { display: none; }
  .tray-access { display: none; }
  .explorer-main { grid-template-columns: 130px 1fr; }
  .window { width: calc(100% - 12px); height: calc(100% - 12px); left: 6px !important; top: 6px !important; }
  .desktop-icon { width: 74px; font-size: .7rem; }
}

/* ---------- Alt+Tab / Vue des tâches ---------- */
#taskView { height: 40px; min-width: 40px; display: grid; place-items: center; border-radius: 6px; }
#taskView:hover { background: rgba(0, 0, 0, .06); }
.alt-tab {
  position: fixed; z-index: 90; top: 30%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 90vw;
  padding: 22px; background: rgba(32, 32, 32, .82);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.alt-card {
  display: grid; justify-items: center; gap: 10px; width: 140px; padding: 16px 10px;
  border-radius: 8px; color: #fff; border: 2px solid transparent;
}
.alt-card .alt-ico { font-size: 2.4rem; }
.alt-card .alt-title { font-size: .78rem; text-align: center; }
.alt-card:hover { background: rgba(255, 255, 255, .1); }
.alt-card.selected { border-color: #fff; background: rgba(255, 255, 255, .14); }

/* ---------- Snap Assist ---------- */
.snap-assist {
  position: absolute; z-index: 40; display: grid; place-items: center;
  background: rgba(20, 20, 20, .12);
}
.assist-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 16px; }
.assist-cards button {
  display: grid; justify-items: center; gap: 8px; width: 120px; padding: 14px 8px;
  background: rgba(249, 249, 249, .96); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.assist-cards button:hover { background: #fff; }
.assist-cards .alt-ico { font-size: 2rem; }
.assist-cards span:last-child { font-size: .74rem; text-align: center; }

/* ---------- Jump list barre des tâches ---------- */
.taskbar-menu { position: fixed; width: 200px; right: auto; }

/* ---------- Centre de notifications ---------- */
.notif-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.notif-head strong { font-size: .85rem; }
#clearNotifs { font-size: .72rem; padding: 4px 8px; border-radius: 4px; color: var(--accent); }
#clearNotifs:hover { background: rgba(0, 0, 0, .06); }
.notif-list { max-height: 220px; overflow: auto; margin-bottom: 14px; display: grid; gap: 6px; }
.notif-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 6px; font-size: .78rem; }
.notif-item small { color: #888; white-space: nowrap; }

/* ---------- Menu Démarrer : Recommandé ---------- */
.start-recommended { display: grid; gap: 2px; }
.start-recommended button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-align: left; font-size: .8rem; }
.start-recommended button:hover { background: rgba(0, 0, 0, .05); }
.recent-text { display: flex; flex-direction: column; overflow: hidden; }
.recent-text small { color: #777; font-size: .68rem; }
.empty-recommended { padding: 6px 10px; font-size: .78rem; color: #777; }

/* ---------- Propriétés ---------- */
.prop-rows { display: grid; gap: 6px; margin: 12px 0; font-size: .82rem; }
.prop-rows p { display: flex; gap: 8px; margin: 0; }
.prop-rows span { min-width: 110px; color: #666; }

/* ---------- Lasso / glisser-déposer ---------- */
.lasso { position: absolute; z-index: 5; background: rgba(0, 103, 192, .15); border: 1px solid rgba(0, 103, 192, .55); pointer-events: none; }

.drag-ghost { position: fixed; top: -999px; left: -999px; opacity: .9; pointer-events: none; }

/* ---------- Accessibilité : mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

:focus-visible {
  outline: 3px solid #005fb8;
  outline-offset: 2px;
}

/* Mode défi : refaire une mission terminée sans aide (Windows/script.js, DEFI_MISSIONS) */
.ex-medal { font-size: .9rem; }
.ex-defi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: .74rem; color: #555; }
.ex-defi button { padding: 4px 10px; border-radius: 999px; border: 1px solid #d9a400; background: #fff7d6; color: #6b4e00; font-size: .76rem; font-weight: 700; cursor: pointer; }
.ex-defi button:hover { background: #ffeeb0; }
.ex-defi.active { padding: 8px 10px; border-radius: 8px; background: #fff7d6; border: 1px solid #f0d27a; color: #6b4e00; font-weight: 600; }
.ex-defi.active button { border-color: #c8c6c4; background: #fff; color: #444; font-weight: 600; }