/* ==========================================================================
   Thème Windows 7 (Aero) — domiom.com
   ========================================================================== */

:root {
  --font: "Segoe UI", "Segoe UI Web", Tahoma, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --taskbar-h: 40px;
  --sel-bg: linear-gradient(#f2f8fe, #dcebfc);
  --sel-border: #7da2ce;
  --hover-bg: linear-gradient(#fafbfd, #ebf3fd);
  --hover-border: #b8d6fb;
  --text: #1e1e1e;
  --link: #0066cc;
  --aero: rgba(110, 160, 210, .55);
  --aero-inactive: rgba(180, 200, 222, .55);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font: 12px/1.4 var(--font); color: var(--text);
  background: #000;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: var(--link); }

/* --------------------------------------------------------------------------
   Écrans : démarrage, ouverture de session, arrêt
   -------------------------------------------------------------------------- */
.screen {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  color: #fff; user-select: none;
}
#boot { background: #000; }

#logon, #shutdown {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(120, 200, 255, .55), transparent 55%),
    radial-gradient(ellipse at 50% 40%, #1f66b8 0%, #0d3c7c 55%, #062454 100%);
}
#logon::before, #shutdown::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 22% at 70% 78%, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(ellipse 50% 16% at 25% 20%, rgba(255,255,255,.08), transparent 70%);
}
.logon-box { display: flex; flex-direction: column; align-items: center; position: relative; }
.logon-user {
  display: flex; flex-direction: column; align-items: center;
  border: 0; background: none; cursor: pointer; padding: 10px; border-radius: 6px;
}
.logon-user:hover .avatar-frame { box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 0 26px rgba(160,220,255,.9); }
.logon-name { font-size: 26px; margin-top: 14px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.logon-hint { margin-top: 10px; color: rgba(255,255,255,.75); }
.logon-welcome { display: flex; align-items: center; gap: 14px; font-size: 28px; color: #fff; margin-top: 26px; text-shadow: 0 1px 6px rgba(0,0,0,.6); position: relative; }

.avatar-frame {
  display: block; width: 128px; height: 128px; padding: 8px; border-radius: 10px;
  background: linear-gradient(#f6f9fc, #c2d3e6);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 #fff, 0 6px 18px rgba(0,0,0,.4);
  transition: box-shadow .2s;
}
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; border: 1px solid rgba(0,0,0,.4); }

.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: #9fd6ff; border-right-color: #57aef0;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#off { background: #000; cursor: pointer; }
.off-text { color: #555; font-size: 13px; }

/* --------------------------------------------------------------------------
   Bureau
   -------------------------------------------------------------------------- */
#desktop {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--wallpaper);
  background-size: cover; background-position: center;
}
[data-wall="harmonie"] {
  --wallpaper:
    radial-gradient(ellipse 45% 35% at 50% 45%, rgba(255,255,255,.55) 0%, rgba(140,210,255,.35) 25%, transparent 70%),
    radial-gradient(ellipse 120% 30% at 30% 85%, rgba(120,200,255,.25), transparent 60%),
    conic-gradient(from 200deg at 50% 45%, #0e4f9e, #1b7ad0, #0b3c80, #1567b8, #0a356f, #1a74c6, #0e4f9e),
    #0d4a94;
}
[data-wall="aube"] {
  --wallpaper:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,200,120,.75), transparent 70%),
    linear-gradient(#0e1d45 0%, #3c3f86 45%, #c36b6b 80%, #f0a868 100%);
}
[data-wall="nature"] {
  --wallpaper:
    radial-gradient(ellipse 50% 30% at 70% 25%, rgba(255,255,220,.6), transparent 70%),
    linear-gradient(#5aa8e8 0%, #a6d6f5 45%, #6fae3a 46%, #3d7d22 75%, #23521a 100%);
}
[data-wall="nuit"] {
  --wallpaper:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(ellipse 80% 50% at 50% 110%, #3a2a6a, transparent 70%),
    linear-gradient(#020617, #0b1640 60%, #1d1850);
}
[data-wall="graphite"] {
  --wallpaper:
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(135deg, #2b2f36, #4a525e 50%, #22262c);
}
#desktop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 46%, transparent 52%, rgba(255,255,255,.05) 60%, transparent 61%);
}
#desktop[data-wall]:not([data-wall="harmonie"])::after { display: none; }

/* Icônes du bureau */
#icons {
  position: absolute; left: 0; top: 0; bottom: var(--taskbar-h);
  padding: 6px 2px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start;
  z-index: 1;
}
/* Icônes placées à droite ou au milieu du bureau */
#icons-right {
  position: absolute; right: 0; top: 0; bottom: var(--taskbar-h);
  padding: 6px 2px; display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start;
  z-index: 1;
}
#icons-near { position: absolute; left: 0; top: 0; right: 0; bottom: var(--taskbar-h); pointer-events: none; z-index: 1; }
#icons-near .dicon { position: absolute; margin: 0; pointer-events: auto; }
#icons-center { position: absolute; left: 50%; top: calc((100% - var(--taskbar-h)) / 2); transform: translate(-50%, -50%); z-index: 1; }
@media (max-width: 700px) {
  #icons-center { left: auto; top: auto; right: 2px; bottom: calc(var(--taskbar-h) + 6px); transform: none; }
}
.dicon {
  width: 78px; margin: 2px; padding: 3px 2px 4px; border: 1px solid transparent; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; cursor: default; user-select: none;
  background: none; position: relative;
}
.dicon .ico { width: 48px; height: 48px; position: relative; }
.dicon .ico svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.dicon .lbl {
  margin-top: 3px; color: #fff; text-align: center; line-height: 1.25; font-size: 12px;
  text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 1px #000;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.dicon:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.dicon.sel { background: rgba(140,190,255,.35); border-color: rgba(170,210,255,.6); }
.dicon.sel .lbl { -webkit-line-clamp: unset; }
.shortcut-arrow { position: absolute; left: -2px; bottom: -2px; width: 16px; height: 16px; }
.shortcut-arrow svg { filter: none !important; }

/* --------------------------------------------------------------------------
   Barre des tâches
   -------------------------------------------------------------------------- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 5000;
  display: flex; align-items: stretch;
  background:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.08) 45%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.18)),
    rgba(18, 38, 66, .62);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-top: 1px solid rgba(0,0,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  user-select: none;
}
#orb {
  width: 54px; border: 0; background: none; cursor: pointer; position: relative; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
}
#orb::before {
  content: ""; width: 38px; height: 38px; border-radius: 50%; margin-top: -2px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 75%, #5ec3ff 0%, #1d6fc4 45%, #0b3a7a 75%, #06224a 100%);
  box-shadow: 0 0 0 1px rgba(0,20,60,.8), inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.5);
  transition: box-shadow .2s, filter .2s;
}
#orb:hover::before, #orb.active::before {
  filter: brightness(1.2);
  box-shadow: 0 0 0 1px rgba(0,20,60,.8), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 14px 3px rgba(120,200,255,.85);
}

#tasks { flex: 1; display: flex; align-items: stretch; padding: 0 2px; gap: 2px; overflow: hidden; min-width: 0; }
.task {
  width: 60px; flex: none; border: 1px solid transparent; border-radius: 3px; margin: 1px 0;
  background: none; position: relative; cursor: default; display: flex; align-items: center; justify-content: center;
}
.task .ico { width: 30px; height: 30px; }
.task .ico svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.task.running {
  border-color: rgba(0,0,0,.45);
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 51%, rgba(255,255,255,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.task.multi::after {
  content: ""; position: absolute; right: -4px; top: 3px; bottom: 3px; width: 3px; border-radius: 0 3px 3px 0;
  border: 1px solid rgba(0,0,0,.4); border-left: 0; background: rgba(255,255,255,.15);
}
.task.active {
  background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.18) 50%, rgba(255,255,255,.1) 51%, rgba(255,255,255,.3));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 12px rgba(160,210,255,.5);
}
.task:hover {
  border-color: rgba(0,0,0,.5);
  background: radial-gradient(ellipse 80% 70% at 50% 100%, var(--glow, rgba(110,190,255,.7)), transparent 75%),
              linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 51%, rgba(255,255,255,.2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.task.flash { animation: flash 0.5s 4 alternate; }
@keyframes flash { to { background: rgba(255,160,60,.75); } }

#tray { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; color: #fff; flex: none; }
.tray-ico { width: 24px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.tray-ico:hover, #clock:hover { background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
#clock {
  border: 0; background: none; color: #fff; padding: 0 8px; height: 36px; border-radius: 2px; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.3;
  text-shadow: 0 0 4px rgba(0,0,0,.5);
}
#showdesk {
  width: 15px; flex: none; border: 0; border-left: 1px solid rgba(0,0,0,.4);
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  box-shadow: inset 1px 0 0 rgba(255,255,255,.3); cursor: default;
}
#showdesk:hover { background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,.2)); }

.tb-popup {
  position: absolute; z-index: 6000; bottom: calc(var(--taskbar-h) + 4px);
  background: rgba(30, 55, 90, .75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 16px rgba(0,0,0,.5);
  border-radius: 6px; padding: 6px; display: flex; gap: 6px; color: #fff;
}
.tb-thumb {
  width: 170px; border: 1px solid transparent; border-radius: 4px; padding: 4px 6px 6px; background: none; color: #fff; text-align: left;
}
.tb-thumb:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
.tb-thumb .t { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.tb-thumb .t svg { width: 16px; height: 16px; flex: none; }
.tb-thumb .p { height: 90px; border: 1px solid rgba(0,0,0,.5); background: #fff center/contain no-repeat; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tb-thumb .p svg { width: 46px; height: 46px; }
.tb-tip { padding: 4px 9px; font-size: 12px; white-space: nowrap; }

/* Calendrier */
#calendar {
  position: absolute; right: 6px; bottom: calc(var(--taskbar-h) + 6px); z-index: 6000; width: 250px;
  background: linear-gradient(#f9fbfd, #e7eef6); border: 1px solid #8ea4bd; border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45); padding: 12px; user-select: none;
}
.cal-now { font-size: 13px; color: #1e3287; padding-bottom: 8px; border-bottom: 1px solid #cfd9e5; margin-bottom: 8px; text-align: center; }
.cal-now b { display: block; font-size: 22px; font-weight: 400; color: #333; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cal-head button { border: 0; background: none; width: 24px; height: 22px; border-radius: 2px; color: #1e3287; }
.cal-head button:hover { background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--hover-border); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.cal-grid span { padding: 4px 0; border: 1px solid transparent; }
.cal-grid .dow { color: #666; font-size: 11px; }
.cal-grid .other { color: #aaa; }
.cal-grid .today { border-color: #3399ff; background: #dcebfc; color: #000; }

/* --------------------------------------------------------------------------
   Menu Démarrer
   -------------------------------------------------------------------------- */
#startmenu {
  position: absolute; left: 0; bottom: var(--taskbar-h); z-index: 5500;
  width: 400px; height: 520px; max-height: calc(100% - var(--taskbar-h) - 4px);
  display: flex; padding: 8px 8px 8px 8px; gap: 0;
  background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.05) 30%), rgba(28, 54, 92, .72);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(0,0,0,.65); border-bottom: 0; border-radius: 7px 7px 0 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 4px -2px 18px rgba(0,0,0,.45);
  user-select: none; animation: smIn .14s ease-out;
}
@keyframes smIn { from { opacity: 0; transform: translateY(8px); } }
.sm-left {
  flex: 1; min-width: 0; background: #fff; border: 1px solid rgba(0,0,0,.45); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5); display: flex; flex-direction: column; margin-top: 26px;
}
.sm-left ul { list-style: none; margin: 0; padding: 5px; flex: 1; overflow-y: auto; }
.sm-item {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; cursor: default;
}
.sm-item svg { width: 32px; height: 32px; flex: none; }
.sm-item small { display: block; color: #6d6d6d; font-size: 11px; }
#sm-all .sm-item svg { width: 16px; height: 16px; }
#sm-all .sm-item { padding: 2px 6px; }
.sm-item:hover, .sm-item.kbd { background: var(--sel-bg); border-color: var(--sel-border); }
.sm-sep { height: 1px; margin: 5px 4px; background: linear-gradient(90deg, transparent, #d5dce6 20%, #d5dce6 80%, transparent); }
.sm-folder > .sm-label { padding-left: 4px; }
.sm-sub { padding-left: 16px !important; }
.sm-empty { color: #666; padding: 8px; font-style: italic; }
.sm-allprog {
  border: 0; border-top: 1px solid #d5dce6; margin: 0 5px; padding: 7px 6px; text-align: left; background: none;
  display: flex; align-items: center; gap: 8px; border-radius: 3px; cursor: default;
}
.sm-allprog:hover { background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--sel-border); }
.sm-allprog .arrow { font-size: 9px; color: #333; }
.sm-search { padding: 6px 8px; background: linear-gradient(#dce7f4, #c9d8ea); border-top: 1px solid #b6c6da; border-radius: 0 0 3px 3px; }
.sm-search input {
  width: 100%; height: 26px; border: 1px solid #8ea4bd; border-radius: 2px; padding: 0 8px;
  font: italic 12px var(--font); outline: 0;
}
.sm-search input:focus { font-style: normal; border-color: #3d7bc6; }

.sm-right { width: 150px; flex: none; display: flex; flex-direction: column; padding: 0 0 0 6px; position: relative; color: #fff; }
.sm-avatar { width: 62px; height: 62px; padding: 4px; border-radius: 6px; margin: -30px auto 10px; position: relative; }
#sm-links { list-style: none; margin: 0; padding: 0; flex: 1; }
#sm-links li {
  padding: 5px 9px; border: 1px solid transparent; border-radius: 3px; cursor: default; white-space: nowrap;
  text-shadow: 0 0 6px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6);
}
#sm-links li:hover {
  border-color: rgba(0,0,0,.6);
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.12) 50%, rgba(255,255,255,.04) 51%, rgba(255,255,255,.2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
#sm-links .sep { height: 1px; padding: 0; margin: 4px 6px; background: rgba(255,255,255,.2); border: 0; border-bottom: 1px solid rgba(0,0,0,.25); }
.sm-shutdown { display: flex; margin: 8px 0 2px 6px; position: relative; }
.sm-shutdown button {
  border: 1px solid rgba(0,0,0,.65); color: #fff; padding: 4px 12px; cursor: default;
  background: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.1) 50%, rgba(0,0,0,.08) 51%, rgba(255,255,255,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); text-shadow: 0 0 3px #000;
}
#sm-off { border-radius: 3px 0 0 3px; }
#sm-off-more { border-radius: 0 3px 3px 0; border-left: 0; padding: 4px 6px; }
.sm-shutdown button:hover { background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2) 50%, rgba(0,0,0,.02) 51%, rgba(255,255,255,.3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 8px rgba(140,200,255,.6); }
#sm-off-menu { position: absolute; left: 100%; bottom: 0; margin-left: 4px; }

/* --------------------------------------------------------------------------
   Menus contextuels / déroulants
   -------------------------------------------------------------------------- */
.ctx {
  position: absolute; z-index: 7000; list-style: none; margin: 0; padding: 2px;
  min-width: 180px; color: #000;
  background: #f0f0f0 linear-gradient(90deg, #f1f1f1 26px, #e2e3e3 26px, #e2e3e3 27px, #fff 27px, #fff 28px, #f0f0f0 28px);
  border: 1px solid #979797; box-shadow: 2px 3px 5px rgba(0,0,0,.35);
  user-select: none; animation: fadeIn .1s;
}
@keyframes fadeIn { from { opacity: 0; } }
.ctx li { padding: 3px 24px 3px 32px; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; position: relative; cursor: default; }
.ctx li:hover:not(.sep):not(.disabled) { background: linear-gradient(#fafbfd, #e8f1fc); border-color: #aecff7; }
.ctx li.sep { height: 1px; padding: 0; margin: 3px 2px 3px 30px; background: #e0e0e0; border: 0; border-bottom: 1px solid #fff; }
.ctx li.disabled { color: #8d8d8d; }
.ctx li.bold { font-weight: 600; }
.ctx li.checked::before { content: "✓"; position: absolute; left: 9px; }
.ctx li .key { position: absolute; right: 10px; color: #6d6d6d; }
.ctx li.sub::after { content: "▸"; position: absolute; right: 8px; }
.ctx li > .ctx { display: none; left: 100%; top: -3px; }
.ctx li.sub:hover > .ctx { display: block; }
.ctx.scroll { overflow-y: auto; }

/* --------------------------------------------------------------------------
   Fenêtres
   -------------------------------------------------------------------------- */
#windows { position: absolute; inset: 0 0 var(--taskbar-h) 0; pointer-events: none; z-index: 2; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  min-width: 200px; min-height: 120px; padding: 0 7px 7px;
  border-radius: 7px 7px 4px 4px;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.18) 30%, transparent 31%, transparent 60%, rgba(255,255,255,.12) 70%, transparent 71%),
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.1) 30px),
    var(--aero);
  backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3);
  border: 1px solid rgba(0,0,0,.7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 26px rgba(0,0,0,.55);
  animation: winOpen .16s ease-out;
}
@keyframes winOpen { from { opacity: 0; transform: scale(.94); } }
.win.closing { animation: winClose .14s ease-in forwards; }
@keyframes winClose { to { opacity: 0; transform: scale(.94); } }
.win.minimizing { transition: transform .2s ease-in, opacity .2s ease-in; opacity: 0; transform: translateY(60%) scale(.3); pointer-events: none; }
.win.inactive { background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.15) 30px), var(--aero-inactive); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 3px 12px rgba(0,0,0,.35); }
.win.inactive .titlebar .title { color: #444; }
.win.max { border-radius: 0; padding: 0 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
.win.max .titlebar { height: 23px; }
.win.max .resize { display: none; }
.win.anim { transition: left .18s, top .18s, width .18s, height .18s; }

.titlebar { height: 30px; display: flex; align-items: center; flex: none; user-select: none; padding-left: 1px; touch-action: none; }
.titlebar .ticon { width: 16px; height: 16px; margin-right: 6px; flex: none; }
.titlebar .ticon svg { width: 100%; height: 100%; display: block; }
.titlebar .title {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; font-size: 12px;
  text-shadow: 0 0 10px #fff, 0 0 8px #fff, 0 0 6px #fff, 0 0 4px #fff;
}
.caption { display: flex; align-self: flex-start; margin-top: -1px; flex: none; margin-left: 8px; }
.caption button {
  height: 19px; width: 26px; border: 1px solid rgba(0,0,0,.55); border-top: 0; padding: 0; margin-left: -1px;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.25) 50%, rgba(220,230,245,.05) 51%, rgba(255,255,255,.3));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.caption button svg { width: 10px; height: 10px; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)); }
.caption .bmin { border-bottom-left-radius: 5px; }
.caption .bclose { width: 45px; border-bottom-right-radius: 5px;
  background: linear-gradient(#e8a493, #d77b65 50%, #c6462b 51%, #d5745c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.caption .bclose:only-child { border-bottom-left-radius: 5px; }
.win.inactive .caption button:not(:hover) { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.15)); }
.caption button:hover { background: linear-gradient(#cfe7fb, #9fccf2 50%, #4a9ce8 51%, #7ec4f7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 8px rgba(100,180,255,.9); }
.caption .bclose:hover { background: linear-gradient(#f4b7a6, #e58a6f 50%, #d03513 51%, #e8664a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 10px rgba(255,90,50,.8); }
.caption button:active { filter: brightness(.85); }
.caption button:disabled { opacity: .45; }

.client {
  flex: 1; min-height: 0; background: #fff; border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4); display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.win.max .client { border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
.client.flat { background: #f0f0f0; }
.client .shield { position: absolute; inset: 0; z-index: 50; display: none; }
.win.dragging .client .shield, .win.blocked .client .shield, .win.inactive .client .shield.iframe-shield,
#windows.busy .client .shield { display: block; }

.resize { position: absolute; z-index: 3; touch-action: none; }
.resize.n { top: -4px; left: 6px; right: 6px; height: 7px; cursor: n-resize; }
.resize.s { bottom: -4px; left: 6px; right: 6px; height: 8px; cursor: s-resize; }
.resize.e { right: -4px; top: 6px; bottom: 6px; width: 8px; cursor: e-resize; }
.resize.w { left: -4px; top: 6px; bottom: 6px; width: 8px; cursor: w-resize; }
.resize.ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: ne-resize; }
.resize.nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nw-resize; }
.resize.se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: se-resize; }
.resize.sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; }
.win.fixed .resize { display: none; }

/* Prévisualisation de l'ancrage Aero Snap */
#snap-preview {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 6px;
  background: rgba(190, 220, 255, .28); border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(80,140,220,.6), 0 0 20px rgba(140,200,255,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: all .15s;
}

/* Barre de menus classique */
.menubar { display: flex; background: linear-gradient(#fdfeff, #e6eef8); border-bottom: 1px solid #b6bcc6; flex: none; user-select: none; padding: 0 2px; }
.menubar.plain { background: #f5f6f7; border-bottom-color: #d7dbe0; }
.menubar > span { padding: 2px 7px; border: 1px solid transparent; border-radius: 2px; margin: 1px 0; cursor: default; }
.menubar > span:hover, .menubar > span.open { background: linear-gradient(#fafbfd, #e3eefb); border-color: #a8c8ec; }

.statusbar { display: flex; flex: none; background: #f0f0f0; border-top: 1px solid #d7d7d7; padding: 3px 8px; color: #333; gap: 0; user-select: none; }
.statusbar span { padding: 0 10px; border-left: 1px solid #d0d0d0; }
.statusbar span:first-child { flex: 1; border: 0; padding-left: 0; }

/* Boutons Windows 7 */
.btn7 {
  min-width: 75px; height: 23px; padding: 0 12px; border: 1px solid #707070; border-radius: 3px; cursor: default;
  background: linear-gradient(#f2f2f2, #ebebeb 50%, #dddddd 51%, #cfcfcf);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.btn7:hover { border-color: #3c7fb1; background: linear-gradient(#eaf6fd, #d9f0fc 50%, #bee6fd 51%, #a7d9f5); }
.btn7:active { border-color: #2c628b; background: linear-gradient(#e5f4fc, #c4e5f6 50%, #98d1ef 51%, #68b3db); box-shadow: inset 1px 1px 2px rgba(0,0,0,.25); }
.btn7:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn7.default { border-color: #3399ff; box-shadow: inset 0 0 0 1px #98d6ff; }
.btn7:disabled { color: #8d8d8d; border-color: #adb2b5; background: #f4f4f4; box-shadow: none; }

input.txt7, select.sel7, textarea.txt7 {
  font: 12px var(--font); border: 1px solid #abadb3; border-top-color: #8e8f8f; padding: 3px 5px; outline: 0; border-radius: 0; background: #fff;
}
input.txt7:hover, input.txt7:focus, select.sel7:focus { border-color: #5794bf; border-top-color: #3d7bad; }

/* Boîtes de dialogue */
.dialog-body { display: flex; gap: 14px; padding: 20px 20px 16px; background: #fff; align-items: flex-start; }
.dialog-body .dico { width: 32px; height: 32px; flex: none; }
.dialog-body .dico svg { width: 100%; height: 100%; }
.dialog-body .dmsg { font-size: 12px; padding-top: 6px; }
.dialog-body .dmsg .main { color: #003399; font-size: 15px; margin-bottom: 8px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 12px; background: #f0f0f0; border-top: 1px solid #dfdfdf; }

/* Barre d'outils façon Explorateur */
.cmdbar {
  display: flex; align-items: center; gap: 2px; padding: 2px 6px; height: 32px; flex: none; user-select: none;
  background: linear-gradient(#f5f9fd, #e5eef8 50%, #d9e5f3 51%, #e3edf9); border-bottom: 1px solid #a0afc3;
}
.cmdbar button {
  border: 1px solid transparent; background: none; height: 24px; padding: 0 8px; border-radius: 3px; color: #1e395b; cursor: default;
  display: flex; align-items: center; gap: 4px;
}
.cmdbar button:hover { border-color: rgba(0,0,0,.25); background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.5) 50%, rgba(255,255,255,.2) 51%, rgba(255,255,255,.5)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.cmdbar button:disabled { opacity: .45; }
.cmdbar .sp { flex: 1; }

/* --------------------------------------------------------------------------
   Explorateur Windows
   -------------------------------------------------------------------------- */
.ex-top {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; flex: none;
  background: transparent; margin: -1px -1px 0;
}
.win .client.explorer { background: transparent; border: 0; box-shadow: none; }
.explorer .ex-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.win.max .explorer .ex-frame { border-left: 0; border-right: 0; border-bottom: 0; }
.navbtns { display: flex; align-items: center; }
.navbtn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid #2c4f80; padding: 0; cursor: default; margin-right: -2px;
  background: radial-gradient(circle at 50% 30%, #bfe1ff, #3b88d6 55%, #1c4f99);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; position: relative;
}
.navbtn svg { width: 12px; height: 12px; }
.navbtn:hover:not(:disabled) { filter: brightness(1.15); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 8px rgba(120,200,255,.9); }
.navbtn:disabled { background: radial-gradient(circle at 50% 30%, #f3f6f9, #c4cfdc 55%, #9fafc2); border-color: #7d8ea4; }
.addr {
  flex: 1; height: 24px; display: flex; align-items: center; background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.45); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); min-width: 0; overflow: hidden;
}
.addr .aico { width: 16px; height: 16px; margin: 0 4px 0 5px; flex: none; }
.addr .aico svg { width: 100%; height: 100%; display: block; }
.crumb { border: 1px solid transparent; background: none; padding: 1px 4px; height: 20px; cursor: default; white-space: nowrap; border-radius: 2px; }
.crumb:hover { border-color: #a8c8ec; background: var(--hover-bg); }
.crumb-sep { color: #555; font-size: 9px; padding: 0 2px; }
.ex-search {
  width: 190px; height: 24px; border: 1px solid rgba(0,0,0,.45); border-radius: 2px; padding: 0 6px; font: italic 12px var(--font);
  background: rgba(255,255,255,.88); outline: 0;
}
.ex-search:focus { font-style: normal; background: #fff; }
.ex-main { flex: 1; min-height: 0; display: flex; }
.ex-nav {
  width: 180px; flex: none; overflow-y: auto; padding: 6px 0; border-right: 1px solid #d5dfe5; user-select: none;
  background: linear-gradient(90deg, #fff, #f6f9fd);
}
.ex-nav .grp { margin-bottom: 10px; }
.ex-nav .item { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 14px; margin: 0 2px; border: 1px solid transparent; border-radius: 2px; cursor: default; white-space: nowrap; }
.ex-nav .item.sub { padding-left: 30px; }
.ex-nav .item.head { padding-left: 4px; }
.ex-nav .item svg { width: 16px; height: 16px; flex: none; }
.ex-nav .item:hover { background: var(--hover-bg); border-color: var(--hover-border); }
.ex-nav .item.cur { background: var(--sel-bg); border-color: var(--sel-border); }
.ex-content { flex: 1; overflow: auto; padding: 8px; align-content: flex-start; display: flex; flex-wrap: wrap; gap: 2px; user-select: none; }
.ex-lib { width: 100%; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid #e5ebf2; }
.ex-lib h2 { font-size: 16px; font-weight: 400; color: #1e3287; margin: 0; }
.ex-lib div { color: #555; }
.ex-item {
  width: 100px; padding: 4px 2px; border: 1px solid transparent; border-radius: 3px; display: flex; flex-direction: column;
  align-items: center; text-align: center; cursor: default; position: relative;
}
.ex-item .ico { width: 48px; height: 48px; position: relative; display: flex; align-items: center; justify-content: center; }
.ex-item .ico svg { width: 100%; height: 100%; }
.ex-item .ico img { max-width: 64px; max-height: 48px; border: 1px solid #aaa; box-shadow: 1px 1px 2px rgba(0,0,0,.25); background: #fff; }
.ex-item .lbl { margin-top: 3px; word-break: break-word; line-height: 1.25; }
.ex-item:hover { background: var(--hover-bg); border-color: var(--hover-border); }
.ex-item.sel { background: var(--sel-bg); border-color: var(--sel-border); }
.ex-item.tile { width: 240px; flex-direction: row; text-align: left; gap: 8px; padding: 6px; }
.ex-item.tile .lbl { margin: 0; }
.ex-item.tile small { display: block; color: #6d6d6d; }
.ex-item.tile .bar { display: block; width: 140px; height: 13px; border: 1px solid #a3a3a3; background: #e6e6e6; margin: 3px 0; position: relative; }
.ex-item.tile .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#5fb3f0, #2b7fd0); }
.ex-content.list .ex-item:not(.tile) { width: 220px; flex-direction: row; text-align: left; gap: 6px; padding: 2px 4px; }
.ex-content.list .ex-item:not(.tile) .ico { width: 20px; height: 20px; }
.ex-content.list .ex-item:not(.tile) .ico img { max-width: 20px; max-height: 20px; }
.ex-content.list .ex-item:not(.tile) .lbl { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-empty { color: #6d6d6d; padding: 20px; width: 100%; text-align: center; }
.ex-details {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-height: 58px; user-select: none;
  background: linear-gradient(#f6f9fd, #e3ecf7); border-top: 1px solid #c6d3e3;
}
.ex-details .ico { width: 40px; height: 40px; flex: none; }
.ex-details .ico svg { width: 100%; height: 100%; }
.ex-details b { font-weight: 400; font-size: 13px; display: block; }
.ex-details span { color: #5a6779; }

/* --------------------------------------------------------------------------
   Pages de contenu (profil, compétences, parcours…)
   -------------------------------------------------------------------------- */
.page { flex: 1; overflow: auto; padding: 0; background: #fff; }
.page-head {
  display: flex; align-items: center; gap: 16px; padding: 18px 24px;
  background: linear-gradient(#fdfeff, #e9f1fa); border-bottom: 1px solid #d1dce8;
}
.page-head .ico { width: 48px; height: 48px; flex: none; }
.page-head .ico svg { width: 100%; height: 100%; }
.page-head h1 { margin: 0; font-size: 20px; font-weight: 400; color: #1e3287; }
.page-head p { margin: 2px 0 0; color: #555; }
.page-body { padding: 18px 24px 26px; }
.page h2 { font-size: 15px; font-weight: 400; color: #1e3287; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #e3e9f0; }
.page h2:first-child { margin-top: 0; }
.quote {
  margin: 18px 0 0; padding: 12px 16px; background: #f4f8fc; border-left: 3px solid #3d7bd1; color: #333; font-style: italic;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card {
  display: flex; gap: 10px; padding: 10px; border: 1px solid #d9e2ec; border-radius: 4px; background: linear-gradient(#fff, #f7fafd);
}
.card img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #b7c3d0; flex: none; }
.card b { display: block; font-size: 13px; font-weight: 600; color: #1e1e1e; }
.card span { color: #555; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags span {
  padding: 2px 8px; border: 1px solid #c3d4e7; border-radius: 10px; background: linear-gradient(#fafcff, #e8f0fa); color: #1e395b; font-size: 11px;
}
.skill-grp { margin-bottom: 14px; }
.skill-grp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.skill-grp h3 svg { width: 22px; height: 22px; }

.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 32px; top: 4px; bottom: 4px; width: 2px; background: #d5e0ec; }
.tl-item { display: flex; gap: 14px; margin-bottom: 16px; position: relative; }
.tl-item img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px #b7c3d0, 0 1px 3px rgba(0,0,0,.2); flex: none; position: relative; left: -20px; margin-right: -20px; background: #fff; }
.tl-item .tl-ico { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #b7c3d0, 0 1px 3px rgba(0,0,0,.2); flex: none; position: relative; left: -20px; margin-right: -20px; background: linear-gradient(#fdfeff, #e3ecf7); display: flex; align-items: center; justify-content: center; }
.tl-item .tl-ico svg { width: 32px; height: 32px; }
.tl-item .when { color: #3d7bd1; font-weight: 600; }
.tl-item b { display: block; font-size: 13px; margin: 1px 0 2px; }
.tl-item p { margin: 0; color: #444; }

.links-list { display: flex; flex-direction: column; gap: 8px; }
.links-list a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid transparent; border-radius: 3px; text-decoration: none; color: #1e395b;
}
.links-list a:hover { background: var(--hover-bg); border-color: var(--hover-border); }
.links-list a .badge { width: 28px; height: 28px; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.links-list a small { display: block; color: #6d6d6d; }

/* --------------------------------------------------------------------------
   Bloc-notes
   -------------------------------------------------------------------------- */
.notepad textarea {
  flex: 1; border: 0; resize: none; outline: 0; padding: 2px 4px; font: 15px/1.3 Consolas, "Lucida Console", "Courier New", monospace;
  white-space: pre; overflow: auto; color: #000; tab-size: 8;
}
.notepad textarea.wrap { white-space: pre-wrap; overflow-x: hidden; }
.notepad .find {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #f0f0f0; border-bottom: 1px solid #d7d7d7;
}
.notepad .find input { flex: 1; max-width: 240px; }

/* --------------------------------------------------------------------------
   Calculatrice
   -------------------------------------------------------------------------- */
.calc { background: linear-gradient(#dbe6f4, #cfdcec) !important; user-select: none; }
.calc-body { padding: 10px 11px 12px; }
.calc-disp {
  height: 56px; border: 1px solid #8e9fb4; border-radius: 2px; margin-bottom: 9px; padding: 2px 6px; text-align: right; overflow: hidden; position: relative;
  background: linear-gradient(#f6f9fc, #e6f0f8 60%, #dce8f4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.calc-disp .hist { height: 16px; font-size: 11px; color: #555; white-space: nowrap; overflow: hidden; direction: rtl; }
.calc-disp .val { font-size: 24px; line-height: 34px; white-space: nowrap; font-family: var(--font); }
.calc-disp .val.small { font-size: 17px; }
.calc-disp .mem { position: absolute; left: 6px; bottom: 6px; font-size: 13px; color: #333; }
.calc-keys { display: grid; grid-template-columns: repeat(5, 34px); grid-auto-rows: 27px; gap: 5px; }
.calc-keys button {
  border: 1px solid #8398b3; border-radius: 3px; padding: 0; cursor: default; font-size: 13px; color: #15283f;
  background: linear-gradient(#f4f8fb, #e8eff6 50%, #dbe5f0 51%, #e7eef6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}
.calc-keys button:hover { border-color: #e2a33c; background: linear-gradient(#fff7e2, #ffe8a6 50%, #ffd56a 51%, #ffe39a); }
.calc-keys button:active, .calc-keys button.press { border-color: #c27917; background: linear-gradient(#fcd99a, #f7bd56 50%, #f3a52a 51%, #f7c565); box-shadow: inset 1px 1px 3px rgba(0,0,0,.25); }
.calc-keys .tall { grid-row: span 2; }
.calc-keys .wide { grid-column: span 2; }
.calc-keys .mem-key { font-size: 11px; }

/* --------------------------------------------------------------------------
   Paint
   -------------------------------------------------------------------------- */
.paint .ribbon {
  display: flex; gap: 6px; padding: 6px 8px; flex: none; flex-wrap: wrap; align-items: stretch; user-select: none;
  background: linear-gradient(#f9fbfe, #e3ebf6); border-bottom: 1px solid #b5c4d8;
}
.paint .rgroup { display: flex; flex-direction: column; align-items: center; padding: 0 8px; border-right: 1px solid #c5d2e3; }
.paint .rgroup:last-child { border: 0; }
.paint .rgroup .rcap { color: #4c607a; font-size: 11px; margin-top: auto; padding-top: 3px; }
.paint .tools { display: grid; grid-template-columns: repeat(4, 26px); gap: 2px; }
.paint .tools button {
  width: 26px; height: 24px; border: 1px solid transparent; border-radius: 2px; background: none; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.paint .tools button:hover { border-color: #a8c8ec; background: var(--hover-bg); }
.paint .tools button.on { border-color: #6f97c4; background: linear-gradient(#dfe9f5, #c5d8ee); }
.paint .sizes { display: flex; flex-direction: column; gap: 2px; }
.paint .sizes button { width: 70px; height: 13px; border: 1px solid transparent; background: none; display: flex; align-items: center; padding: 0 6px; }
.paint .sizes button i { display: block; width: 100%; background: #000; }
.paint .sizes button.on, .paint .sizes button:hover { border-color: #6f97c4; background: #dfe9f5; }
.paint .colors { display: grid; grid-template-columns: repeat(10, 18px); gap: 2px; }
.paint .colors button { width: 18px; height: 18px; border: 1px solid #8a8a8a; padding: 0; box-shadow: inset 0 0 0 1px #fff; }
.paint .colors button:hover { border-color: #e2a33c; }
.paint .cur-colors { display: flex; gap: 6px; align-items: flex-start; margin-right: 6px; }
.paint .cur-colors div { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #4c607a; text-align: center; line-height: 1.1; gap: 3px; cursor: default; padding: 2px; border: 1px solid transparent; border-radius: 2px; }
.paint .cur-colors div.on { border-color: #6f97c4; background: #dfe9f5; }
.paint .cur-colors i { width: 30px; height: 30px; border: 1px solid #8a8a8a; box-shadow: inset 0 0 0 2px #fff; display: block; }
.paint .canvas-wrap { flex: 1; min-height: 0; overflow: auto; background: #c9d4e3; padding: 6px; }
.paint canvas { background: #fff; box-shadow: 1px 1px 4px rgba(0,0,0,.35); display: block; touch-action: none; cursor: crosshair; }

/* --------------------------------------------------------------------------
   Démineur
   -------------------------------------------------------------------------- */
.mines { background: linear-gradient(#d9e4f2, #c3d3e8) !important; user-select: none; }
.mines-board-wrap { padding: 12px 14px 6px; display: flex; justify-content: center; }
.mines-board {
  display: grid; gap: 0; padding: 4px; border-radius: 4px;
  background: #6f8fb8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px #4a6a96;
}
.mcell {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
  border: 1px solid #4d76ad; margin: 0 -1px -1px 0; cursor: default;
  background: linear-gradient(135deg, #b6d1f2, #6d9bdb 50%, #5487d0 51%, #7aa8e6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.mcell:hover:not(.open) { background: linear-gradient(135deg, #d6ecff, #8dc1f8 50%, #6dabf2 51%, #99caff); }
.mcell.open { background: #e7eef8; box-shadow: none; border-color: #b4c5dd; }
.mcell.boom { background: #f05a46; }
.mcell .flag { color: #e02a1b; font-size: 14px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.mcell.n1 { color: #2140bf; } .mcell.n2 { color: #1d7a1d; } .mcell.n3 { color: #c51d1d; } .mcell.n4 { color: #1b2a85; }
.mcell.n5 { color: #7c1a1a; } .mcell.n6 { color: #18807f; } .mcell.n7 { color: #000; } .mcell.n8 { color: #666; }
.mines-info { display: flex; justify-content: space-between; padding: 4px 18px 12px; }
.mines-info span { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.mines-info b { min-width: 34px; text-align: center; background: #fff; border: 1px solid #8ea4bd; border-radius: 2px; padding: 0 4px; font-weight: 400; }

/* --------------------------------------------------------------------------
   Internet Explorer
   -------------------------------------------------------------------------- */
.ie .ie-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; flex: none; }
.win .client.ie { background: transparent; border: 0; box-shadow: none; }
.ie .ie-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.55); }
.ie .ie-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 0 6px; height: 26px; flex: none; }
.ie .ie-tab {
  height: 24px; padding: 0 10px; display: flex; align-items: center; gap: 6px; max-width: 220px; min-width: 120px;
  border: 1px solid rgba(0,0,0,.45); border-bottom: 0; border-radius: 4px 4px 0 0; background: #fff; white-space: nowrap; overflow: hidden;
}
.ie .ie-tab svg { width: 16px; height: 16px; flex: none; }
.ie .ie-tab span { overflow: hidden; text-overflow: ellipsis; }
.ie iframe { flex: 1; border: 0; width: 100%; background: #fff; }
.ie .ie-ext { padding: 30px; }
.ie .ie-ext h1 { font-size: 20px; font-weight: 400; color: #1e3287; margin: 0 0 10px; }

/* Visionneuse de photos */
.viewer { background: #fff !important; }
.viewer .vstage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#fdfeff, #e8eef5); padding: 10px; }
.viewer .vstage img { max-width: 100%; max-height: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.viewer .vbar {
  height: 44px; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(#c7d9ee, #9fbbe0 50%, #8aaad6 51%, #a9c4e8); border-top: 1px solid #6c8bb6;
}
.viewer .vbar button {
  width: 34px; height: 30px; border: 1px solid transparent; border-radius: 4px; background: none; font-size: 16px; color: #1e395b;
}
.viewer .vbar button:hover { border-color: #5a7fae; background: rgba(255,255,255,.4); }
.viewer .vbar .vplay {
  width: 40px; height: 40px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 50% 30%, #9fd8ff, #2a7fd4 55%, #0f4a96); border: 1px solid #0d3a78;
}

/* Personnalisation */
.walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 16px; }
.wall {
  background: var(--wallpaper); background-size: cover;
  height: 92px; border: 3px solid transparent; border-radius: 3px; cursor: default; position: relative; padding: 0; overflow: hidden;
  box-shadow: 0 0 0 1px #9aa9ba;
}
.wall.on { border-color: #3399ff; }
.wall span { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.45); color: #fff; padding: 2px 6px; text-align: left; }

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  #startmenu { width: 100%; height: calc(100% - var(--taskbar-h)); max-height: none; border-radius: 0; }
  .sm-right { width: 130px; }
  .sm-avatar { margin-top: 0; }
  .sm-left { margin-top: 0; }
  .task { width: 46px; }
  #tray .tray-ico { display: none; }
  .ex-nav { display: none; }
  .ex-search { width: 110px; }
  .dicon { width: 72px; }
  .titlebar { height: 34px; }
  .caption button { height: 24px; width: 32px; }
  .caption .bclose { width: 50px; }
  .page-head { padding: 14px 16px; }
  .page-body { padding: 14px 16px 22px; }
}

/* --------------------------------------------------------------------------
   Bureautique : Word et Excel (ruban façon Office 2010)
   -------------------------------------------------------------------------- */
.office { --of: #2b579a; --of-light: #dce6f4; background: #fff; }
.office.excel { --of: #217346; --of-light: #dbeee2; }
.of-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 4px 6px 0; background: #fff; border-bottom: 1px solid #c5c5c5; flex: none; user-select: none; }
.of-file { border: 0; background: var(--of); color: #fff; padding: 4px 16px; font-weight: 600; cursor: default; border-radius: 2px 2px 0 0; }
.of-file:hover { filter: brightness(1.12); }
.of-tab { padding: 4px 14px; border: 1px solid transparent; border-bottom: 0; cursor: default; color: #444; }
.of-tab:hover { color: var(--of); }
.of-tab.on { border-color: #c5c5c5; background: #f3f3f3; margin-bottom: -1px; padding-bottom: 5px; color: #000; }
.of-ribbon { display: flex; align-items: stretch; gap: 0; padding: 4px 4px 0; background: #f3f3f3; border-bottom: 1px solid #c5c5c5; flex: none; overflow-x: auto; user-select: none; }
.of-group { display: flex; flex-direction: column; padding: 0 6px; border-right: 1px solid #d5d5d5; flex: none; }
.of-gbody { flex: 1; display: flex; align-items: flex-start; gap: 3px; }
.of-col-group .of-gbody { flex-direction: column; gap: 0; }
.of-gcap { text-align: center; color: #666; font-size: 11px; padding: 2px 0 3px; }
.of-col { display: flex; flex-direction: column; gap: 3px; }
.of-row { display: flex; gap: 2px; align-items: center; }
.of-btn {
  border: 1px solid transparent; background: none; border-radius: 2px; padding: 2px 6px; min-width: 24px; height: 24px; cursor: default; color: #222;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; font-size: 12px;
}
.of-btn.big { flex-direction: column; height: auto; min-height: 56px; font-size: 22px; padding: 2px 8px; gap: 2px; }
.of-btn.big small { font-size: 11px; }
.of-btn:hover { border-color: #c5c5c5; background: #fff; }
.of-btn.on { border-color: #a0a0a0; background: #d6d6d6; }
.of-btn:active { background: #c8c8c8; }
.office select { font: 12px var(--font); height: 22px; border: 1px solid #c5c5c5; background: #fff; }
.of-font { width: 130px; }
.of-num { width: 140px; }
.of-color { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; border: 1px solid transparent; border-radius: 2px; cursor: default; font-weight: 700; }
.of-color:hover { border-color: #c5c5c5; background: #fff; }
.of-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.of-styles { display: flex; gap: 2px; background: #fff; border: 1px solid #d5d5d5; padding: 2px; }
.of-style { border: 1px solid transparent; background: none; padding: 2px 8px; height: 46px; min-width: 60px; cursor: default; color: #222; }
.of-style.h { color: var(--of); font-weight: 600; }
.of-style:hover { border-color: #f2c867; background: #fff3cf; }

.word-scroll { flex: 1; min-height: 0; overflow: auto; background: #e3e5e8; padding: 0 0 24px; display: flex; flex-direction: column; align-items: center; }
.word-ruler {
  width: 794px; max-width: calc(100% - 24px); height: 20px; flex: none; margin: 8px 0 6px; background: #fff; border: 1px solid #c5c5c5;
  background-image: repeating-linear-gradient(90deg, #888 0 1px, transparent 1px 37.8px), repeating-linear-gradient(90deg, #bbb 0 1px, transparent 1px 9.45px);
  background-size: 100% 6px, 100% 3px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
}
.word-page {
  width: 794px; max-width: calc(100% - 24px); min-height: 1123px; flex: none; background: #fff; padding: 96px 94px; outline: 0;
  box-shadow: 0 0 0 1px #c9c9c9, 0 2px 8px rgba(0,0,0,.18); font: 11pt/1.35 Calibri, Carlito, "Segoe UI", Arial, sans-serif; color: #000;
  overflow-wrap: break-word;
}
.word-page p { margin: 0 0 8pt; }
.word-page h1 { font: 300 26pt Calibri, "Segoe UI", Arial, sans-serif; color: #17365d; border-bottom: 1px solid #4f81bd; padding-bottom: 4px; margin: 0 0 12pt; }
.word-page h2 { font: 600 14pt Calibri, "Segoe UI", Arial, sans-serif; color: #365f91; margin: 14pt 0 6pt; }
.word-page h3 { font: 600 13pt Calibri, "Segoe UI", Arial, sans-serif; color: #4f81bd; margin: 12pt 0 4pt; }
.word-page blockquote { margin: 8pt 24pt; font-style: italic; color: #404040; border-left: 3px solid #4f81bd; padding-left: 10px; }
.word-page table { border-collapse: collapse; margin: 6pt 0; }
.word-page td, .word-page th { border: 1px solid #8eaadb; padding: 4px 8px; min-width: 60px; }
.word-page img { max-width: 100%; }
.word-page a { color: #0563c1; }

.xl-fbar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: #fff; border-bottom: 1px solid #d4d4d4; flex: none; }
.xl-name { width: 90px; height: 22px; border: 1px solid #c5c5c5; padding: 0 4px; font: 12px var(--font); }
.xl-fx { color: #666; font-style: italic; font-family: Georgia, serif; padding: 0 6px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.xl-input { flex: 1; height: 22px; border: 1px solid #c5c5c5; padding: 0 6px; font: 12px var(--font); }
.xl-wrap { flex: 1; min-height: 0; overflow: auto; position: relative; outline: 0; background: #fff; }
.xl-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 11pt Calibri, Carlito, "Segoe UI", Arial, sans-serif; user-select: none; }
.xl-grid th { position: sticky; z-index: 2; background: #f0f0f0; color: #444; font-weight: 400; font-size: 12px; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; }
.xl-grid thead th { top: 0; height: 20px; min-width: 80px; width: 80px; }
.xl-grid tbody th { left: 0; width: 40px; min-width: 40px; text-align: center; }
.xl-grid th.xl-corner { left: 0; z-index: 3; width: 40px; min-width: 40px; background: #e6e6e6 linear-gradient(135deg, transparent 60%, #b5b5b5 60%) no-repeat right 3px bottom 3px / 9px 9px; }
.xl-grid th.hl { background: #d2e7d9; color: #217346; border-bottom-color: #217346; }
.xl-grid tbody th.hl { border-right: 2px solid #217346; }
.xl-grid td { height: 20px; padding: 0 3px; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 80px; }
.xl-grid td.num { text-align: right; }
.xl-grid td.bool, .xl-grid td.err { text-align: center; }
.xl-grid td.err { color: #c00000; }
.xl-grid td.sel { background-color: rgba(33,115,70,.13) !important; }
.xl-grid td.cur { box-shadow: inset 0 0 0 2px #217346; background-color: inherit !important; }
.xl-edit { position: absolute; z-index: 4; border: 2px solid #217346; padding: 0 2px; font: 11pt Calibri, Carlito, "Segoe UI", Arial, sans-serif; outline: 0; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.xl-sheets { display: flex; gap: 2px; padding: 0 6px; background: #f0f0f0; border-top: 1px solid #c6c6c6; flex: none; user-select: none; }
.xl-sheets span { padding: 3px 18px; background: #fff; border: 1px solid #c6c6c6; border-top: 0; color: #217346; font-weight: 600; border-bottom: 2px solid #217346; }

/* --------------------------------------------------------------------------
   Solitaire
   -------------------------------------------------------------------------- */
.sol-board {
  flex: 1; min-height: 0; position: relative; overflow: hidden; user-select: none; touch-action: none;
  background: radial-gradient(ellipse at 50% 40%, #2f8a3c, #1c6a2a 60%, #124d1d);
}
.sol-board .pcard, .sol-board .slot { position: absolute; width: var(--cw); height: calc(var(--cw) * 1.38); border-radius: calc(var(--cw) * 0.07); }
.sol-board .pcard {
  background: #fff; border: 1px solid #555; box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: default;
  font-family: Arial, Helvetica, sans-serif; color: #111; transition: left .16s ease-out, top .16s ease-out;
}
.sol-board.instant .pcard { transition: none; }
.sol-board .pcard.red { color: #c8102e; }
.sol-board .pcard.dragging { transition: none; box-shadow: 4px 6px 10px rgba(0,0,0,.45); }
.sol-board .pcard .idx { position: absolute; font-weight: 700; font-size: calc(var(--cw) * 0.19); line-height: 1; text-align: center; }
.sol-board .pcard .idx-tl { left: calc(var(--cw) * 0.05); top: calc(var(--cw) * 0.06); }
.sol-board .pcard .idx-br { right: calc(var(--cw) * 0.05); bottom: calc(var(--cw) * 0.06); transform: rotate(180deg); }
.sol-board .pcard .pip { position: absolute; transform: translate(-50%, -50%); font-size: calc(var(--cw) * 0.24); line-height: 1; }
.sol-board .pcard .pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.sol-board .pcard .pip.ace { font-size: calc(var(--cw) * 0.6); }
.sol-board .pcard .face {
  position: absolute; left: 20%; right: 20%; top: 17%; bottom: 17%; border: 1px solid currentColor; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: linear-gradient(135deg, rgba(255,215,90,.35), rgba(80,140,230,.18));
}
.sol-board .pcard .face b { font: 700 calc(var(--cw) * 0.36) Georgia, "Times New Roman", serif; }
.sol-board .pcard .face i { font-style: normal; font-size: calc(var(--cw) * 0.26); }
.sol-board .pcard.down { background: #fff; }
.sol-board .pcard.down > * { display: none; }
.sol-board .pcard.down::before {
  content: ""; position: absolute; inset: calc(var(--cw) * 0.05); border-radius: calc(var(--cw) * 0.05);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
    linear-gradient(#2d62c4, #163f8f);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.sol-board .slot { border: 2px solid rgba(255,255,255,.28); background: rgba(0,0,0,.08); z-index: 0; }
.sol-board .found-slot { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); font: 700 calc(var(--cw) * 0.4) Arial, sans-serif; }
.sol-board .stock-slot { cursor: pointer; }
.sol-board .stock-slot.empty::after { content: "↻"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: calc(var(--cw) * 0.5); }
.sol-board .sol-cascade { position: absolute; inset: 0; z-index: 2000; cursor: pointer; }
.sol-client { background: #1c6a2a; }

/* --------------------------------------------------------------------------
   Dynamite
   -------------------------------------------------------------------------- */
.dyn-client { background: #1d1d24; }
.dyn-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: #1d1d24; overflow: hidden; }
.dyn-stage canvas { display: block; image-rendering: auto; box-shadow: 0 0 0 2px #000, 0 6px 20px rgba(0,0,0,.6); }
.dyn-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,10,20,.72); z-index: 2; }
.dyn-overlay.dim { background: rgba(10,10,20,.55); }
.dyn-panel { background: linear-gradient(#2c2c3a, #1b1b26); color: #fff; border: 2px solid #ffb02e; border-radius: 10px; padding: 16px 20px; max-width: 94%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.6); max-height: 96%; overflow: auto; }
.dyn-panel.small { min-width: 280px; }
.dyn-panel h1 { margin: 0 0 12px; font: 900 34px/1 Impact, "Arial Black", sans-serif; letter-spacing: 3px; color: #ffcf3f; text-shadow: 0 3px 0 #c2410c, 0 6px 12px rgba(0,0,0,.6); }
.dyn-panel h2 { margin: 8px 0; font-size: 16px; color: #ffcf3f; }
.dyn-panel p { margin: 6px 0; color: #ddd; }
.dyn-modes { display: flex; gap: 10px; justify-content: center; }
.dyn-modes button, .dyn-boards button, .dyn-actions button, .dyn-play {
  border: 2px solid #555; background: #2f2f40; color: #fff; border-radius: 8px; cursor: pointer; font: inherit;
}
.dyn-modes button { padding: 8px 16px; font-weight: 700; font-size: 14px; }
.dyn-modes button small { display: block; font-weight: 400; color: #bbb; font-size: 11px; }
.dyn-modes button.on, .dyn-boards button.on { border-color: #ffb02e; background: #43405a; box-shadow: 0 0 0 2px rgba(255,176,46,.35); }
.dyn-boards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dyn-boards button { padding: 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.dyn-boards canvas { display: block; width: 90px; height: 78px; image-rendering: pixelated; border-radius: 3px; }
.dyn-play { margin-top: 12px; padding: 8px 34px; font-size: 16px; font-weight: 800; background: linear-gradient(#ffcf3f, #ff9d1a); color: #3a1a00; border-color: #c2410c; }
.dyn-play:hover, .dyn-modes button:hover, .dyn-boards button:hover, .dyn-actions button:hover { filter: brightness(1.12); }
.dyn-actions { display: flex; gap: 10px; justify-content: center; }
.dyn-actions .dyn-play { margin-top: 6px; }
.dyn-actions .dyn-menu { margin-top: 6px; padding: 8px 18px; }
.dyn-keys { font-size: 11px; color: #aaa !important; margin-top: 10px !important; }
.dynamite .statusbar span { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Jeux d'arcade (socle commun)
   -------------------------------------------------------------------------- */
.arc-client { background: #000; }
.arc-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }
.arc-stage canvas { display: block; }
.arc-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); z-index: 2; }
.arc-overlay.dim { background: rgba(0,0,0,.5); }
.arc-panel { background: rgba(8,12,28,.94); color: #fff; border: 1px solid #33e6ff; box-shadow: 0 0 24px rgba(51,230,255,.35); border-radius: 8px; padding: 18px 24px; text-align: center; max-width: 92%; max-height: 94%; overflow: auto; }
.arc-panel h1 { margin: 0 0 8px; font: 800 38px/1.1 "Segoe UI", Arial, sans-serif; letter-spacing: 6px; color: #fff; text-shadow: 0 0 12px #33e6ff, 0 0 24px #33e6ff; }
.arc-panel h2 { margin: 0 0 8px; font-size: 20px; color: #fff; }
.arc-panel p { margin: 6px 0; color: #c9d6ff; }
.arc-modes, .arc-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.arc-panel button { border: 1px solid #4a5a8a; background: #141c38; color: #fff; border-radius: 6px; padding: 8px 18px; cursor: pointer; font: 700 14px var(--font); }
.arc-panel button small { display: block; font-weight: 400; color: #9fb0e0; font-size: 11px; }
.arc-panel button.on { border-color: #33e6ff; box-shadow: 0 0 10px rgba(51,230,255,.5); }
.arc-panel button.main { background: linear-gradient(#33e6ff, #1590c8); color: #001826; border-color: #7ff2ff; padding: 9px 34px; }
.arc-panel button:hover { filter: brightness(1.15); }
.arc-keys { font-size: 11px; color: #8796c4 !important; }
.arcade .statusbar span { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Vecteur : console à écran vectoriel
   -------------------------------------------------------------------------- */
.vx-client { background: #111; }
.vx { display: flex; flex-direction: column; flex: 1; min-height: 0; outline: 0; background: #1a1a1a; }
.vx-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 18px 10px;
  background: linear-gradient(90deg, #0d0d0d, #262626 12%, #1c1c1c 50%, #262626 88%, #0d0d0d);
}
.vx-bezel {
  flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, #2b2b2b, #0b0b0b 75%); box-shadow: inset 0 0 0 2px #050505, inset 0 0 30px rgba(0,0,0,.9), 0 1px 0 #3a3a3a;
}
.vx-screen { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.vx-screen canvas { display: block; background: #000; border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(0,0,0,.9); }
.vx-overlay { position: absolute; pointer-events: none; border-radius: 10px; mix-blend-mode: multiply; }
.vx-glass { position: absolute; inset: 0; pointer-events: none; border-radius: 10px; background: radial-gradient(ellipse 80% 50% at 30% 15%, rgba(255,255,255,.07), transparent 60%); }
.vx-label { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; color: #c9c9c9; user-select: none; }
.vx-label b { font: italic 900 22px/1 "Arial Black", Arial, sans-serif; letter-spacing: 4px; color: #e6e6e6; text-shadow: 0 1px 0 #000; }
.vx-label span { font-size: 11px; color: #8a8a8a; letter-spacing: 1px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Messagerie (dans l'esprit de Windows Live Messenger 2009)
   -------------------------------------------------------------------------- */
.msn-client { background: #fff; }
.msn { display: flex; flex-direction: column; flex: 1; min-height: 0; font: 12px "Segoe UI", Tahoma, sans-serif; color: #1e1e1e;
  background: linear-gradient(#e3f3fc, #ffffff 160px); }
.msn-head {
  padding: 12px 12px 10px; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 120% 60% at 110% -10%, rgba(120,200,90,.45), transparent 60%),
    radial-gradient(ellipse 90% 70% at -10% 120%, rgba(70,170,230,.35), transparent 60%),
    linear-gradient(#cfeaf8, #eef8fd);
  border-bottom: 1px solid #b9d9ea;
}
.msn-head::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -26px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.55); }
.msn-me { display: flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.msn-me-txt { flex: 1; min-width: 0; }
.msn-nick { font-size: 15px; font-weight: 600; color: #1a1a1a; cursor: text; border: 1px solid transparent; padding: 0 2px; border-radius: 2px; word-break: break-word; }
.msn-nick:hover { border-color: #9cc8e2; background: rgba(255,255,255,.7); }
.msn-nick-edit { font: 600 15px "Segoe UI", Tahoma, sans-serif; width: 100%; border: 1px solid #6aa8d6; padding: 1px 3px; }
.msn-status-btn { border: 1px solid transparent; background: none; color: #555; padding: 0 3px; border-radius: 2px; cursor: default; }
.msn-status-btn:hover { border-color: #9cc8e2; background: rgba(255,255,255,.7); }
.msn-pm { display: block; width: 100%; margin-top: 4px; border: 1px solid transparent; background: transparent; font: italic 12px "Segoe UI", Tahoma, sans-serif; color: #505a64; padding: 2px 3px; border-radius: 2px; }
.msn-pm:hover, .msn-pm:focus { border-color: #9cc8e2; background: #fff; outline: 0; font-style: normal; }
.msn-id { color: #7a8794; font-size: 10px; margin-top: 2px; padding-left: 3px; }
.msn-frame { width: 40px; height: 40px; padding: 3px; border-radius: 7px; flex: none; position: relative; cursor: default;
  background: linear-gradient(#f4f4f4, #cfcfcf); box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.7); }
.msn-frame.big { width: 70px; height: 70px; padding: 5px; border-radius: 10px; }
.msn-frame img { width: 100%; height: 100%; border-radius: 4px; display: block; border: 1px solid rgba(0,0,0,.25); }
.msn-frame.online { background: linear-gradient(#b8f27a, #4dbb0c 60%, #2e8c00); }
.msn-frame.busy { background: linear-gradient(#ff9a8a, #e0321c 60%, #a81600); }
.msn-frame.away { background: linear-gradient(#ffe08a, #f2a51c 60%, #c47400); }
.msn-frame.offline { background: linear-gradient(#eaeaea, #a8a8a8 60%, #7d7d7d); }
.msn-net { background: #fff4c2; border-bottom: 1px solid #e4c860; padding: 5px 10px; color: #6a5200; font-size: 11px; }
.msn-searchbar { padding: 8px 10px 6px; }
.msn-search { width: 100%; height: 24px; border: 1px solid #b8cfe0; border-radius: 3px; padding: 0 8px; font: italic 12px "Segoe UI", Tahoma, sans-serif; background: #fff; }
.msn-search:focus { outline: 0; border-color: #6aa8d6; font-style: normal; }
.msn-list { flex: 1; min-height: 0; overflow: auto; padding: 2px 6px 8px; background: #fff; }
.msn-group { font-weight: 600; color: #2a5d8a; padding: 6px 4px 3px; user-select: none; }
.msn-caret { font-size: 9px; color: #555; }
.msn-contact { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 16px; border: 1px solid transparent; border-radius: 3px; cursor: default; white-space: nowrap; overflow: hidden; user-select: none; }
.msn-contact:hover { background: linear-gradient(#f2f9fe, #e1f0fb); border-color: #c7e1f4; }
.msn-contact.sel { background: linear-gradient(#e2f1fd, #c9e3f8); border-color: #8fc2ea; }
.msn-cn { color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; }
.msn-cpm { color: #7d8790; font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.msn-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; display: inline-block; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.8); }
.msn-dot.online { background: radial-gradient(circle at 40% 35%, #c9ff8f, #3fb300 70%); }
.msn-dot.busy { background: radial-gradient(circle at 40% 35%, #ffb09f, #db2b10 70%); }
.msn-dot.away { background: radial-gradient(circle at 40% 35%, #ffe9a0, #f0a000 70%); }
.msn-dot.blocked { background: radial-gradient(circle at 40% 35%, #e6e6e6, #8a8a8a 70%); position: relative; }
.msn-dot.blocked::after { content: ""; position: absolute; left: 1px; right: 1px; top: 5px; height: 2px; background: #c00; transform: rotate(-45deg); }
.msn-contact.blocked .msn-cn { color: #888; }
.msn-empty { color: #7d8790; text-align: center; padding: 18px 10px; line-height: 1.6; }
.msn-foot { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; font-size: 10px; color: #6d7a86; background: linear-gradient(#f4f9fc, #e6f0f6); border-top: 1px solid #cfe0eb; }
.msn-privacy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msn-conv { background: linear-gradient(#e3f3fc, #ffffff 110px); }
.msn-to { padding: 8px 12px 6px; border-bottom: 1px solid #c9e1ef; background: linear-gradient(#d6eef9, #eef8fd); }
.msn-to-nick { font-size: 14px; }
.msn-to-st { color: #607080; }
.msn-to-pm { color: #6b7883; font-style: italic; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-conv-body { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 10px; }
.msn-side { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.msn-side .msn-frame.big { width: 92px; height: 92px; }
.msn-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msn-history { flex: 1; min-height: 0; overflow: auto; background: #fff; border: 1px solid #b8cfe0; border-radius: 4px; padding: 8px 10px; font-size: 13px; word-wrap: break-word; }
.msn-who { color: #6a6a6a; margin-top: 8px; font-size: 12px; }
.msn-who small { color: #999; }
.msn-who.me { color: #505a6e; }
.msn-line { padding-left: 14px; margin: 2px 0; color: #111; }
.msn-line a { color: #0066cc; }
.msn-emo { font-size: 17px; line-height: 1; }
.msn-info { color: #6d6d6d; font-size: 11px; margin: 8px 0; padding: 4px 8px; background: #f3f8fc; border-left: 3px solid #9cc8e2; }
.msn-anim { width: 96px; height: 96px; display: block; }
.msn-img { display: block; max-width: 100%; max-height: 260px; border: 1px solid #ccc; border-radius: 3px; cursor: zoom-in; margin: 4px 0; }
.msn-typing { height: 18px; color: #7d8790; font-size: 11px; font-style: italic; padding: 2px 2px 0; }
.msn-tools { display: flex; gap: 2px; padding: 3px 0; }
.msn-tb { border: 1px solid transparent; background: none; border-radius: 3px; padding: 2px 8px; cursor: default; font-size: 12px; }
.msn-tb:hover { border-color: #b8d4ea; background: linear-gradient(#fbfdff, #e4f0fa); }
.msn-compose { display: flex; gap: 6px; }
.msn-input { flex: 1; height: 62px; resize: none; border: 1px solid #b8cfe0; border-radius: 4px; padding: 6px 8px; font: 13px "Segoe UI", Tahoma, sans-serif; }
.msn-input:focus { outline: 0; border-color: #6aa8d6; }
.msn-send { align-self: stretch; height: auto; min-width: 70px; }
.msn-pop { position: absolute; z-index: 7000; background: #fff; border: 1px solid #97b6cf; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.25); padding: 6px; display: grid; grid-template-columns: repeat(10, 28px); gap: 2px; }
.msn-pop.wide { grid-template-columns: repeat(5, 64px); }
.msn-pop button { border: 1px solid transparent; background: none; border-radius: 3px; height: 28px; font-size: 18px; cursor: pointer; padding: 0; }
.msn-pop.wide button { height: 64px; }
.msn-pop.wide img { width: 56px; height: 56px; }
.msn-pop button:hover { border-color: #9cc8e2; background: #eef7fd; }
.msn-toast {
  position: absolute; right: 10px; z-index: 6500; width: 260px; display: flex; gap: 10px; align-items: center; padding: 10px; cursor: pointer;
  background: linear-gradient(#f4fbff, #d9eef9); border: 1px solid #8fb9d6; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
  animation: msnIn .35s ease-out; transition: opacity .4s, transform .4s; color: #1e1e1e; font: 12px "Segoe UI", Tahoma, sans-serif;
}
.msn-toast.out { opacity: 0; transform: translateY(20px); }
@keyframes msnIn { from { opacity: 0; transform: translateY(30px); } }
.msn-toast img { width: 46px; height: 46px; border-radius: 6px; border: 2px solid #4dbb0c; flex: none; }
.msn-toast b { display: block; }
.msn-toast span { color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msn-toast button { position: absolute; top: 2px; right: 6px; border: 0; background: none; font-size: 15px; color: #567; cursor: pointer; }
.win.msn-shake { animation: msnShake .6s linear; }
@keyframes msnShake { 10%, 50%, 90% { transform: translate(-9px, 4px); } 20%, 60% { transform: translate(9px, -5px); } 30%, 70% { transform: translate(-7px, -4px); } 40%, 80% { transform: translate(7px, 5px); } }
@media (max-width: 700px) { .msn-side { display: none; } }

/* Icône de programme dans la zone de notification */
.tray-app { border: 0; background: none; padding: 0; position: relative; cursor: default; }
.tray-app svg { width: 18px; height: 18px; display: block; }
.tray-badge { position: absolute; right: 0; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.tray-badge.online { background: #3fb300; } .tray-badge.busy { background: #db2b10; } .tray-badge.away { background: #f0a000; }

/* Appels audio / vidéo de la Messagerie */
.msn-tb-sp { flex: 1; }
.msn-call { margin-bottom: 8px; border: 1px solid #8fb3d1; border-radius: 6px; overflow: hidden; background: #0d1a26; flex: none; }
.msn-stage { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #27455e, #0d1a26 70%); }
.msn-remote { width: 100%; height: 100%; object-fit: contain; display: none; background: #000; }
.msn-call.has-video .msn-remote { display: block; }
.msn-call.has-video .msn-call-avatar { display: none; }
.msn-call-avatar img { width: 92px; height: 92px; border-radius: 10px; border: 4px solid #4dbb0c; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.msn-call:not(.live) .msn-call-avatar img { animation: msnPulse 1.4s ease-in-out infinite; }
@keyframes msnPulse { 50% { box-shadow: 0 0 0 10px rgba(77,187,12,.25); } }
.msn-local { position: absolute; right: 8px; bottom: 8px; width: 120px; height: 90px; object-fit: cover; border: 2px solid #fff; border-radius: 4px; background: #000; box-shadow: 0 2px 8px rgba(0,0,0,.6); transform: scaleX(-1); }
.msn-call.audio .msn-stage { height: 130px; }
.msn-call-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: linear-gradient(#f4fbff, #d9eef9); color: #1e1e1e; flex-wrap: wrap; }
.msn-call-st { flex: 1; min-width: 140px; font-weight: 600; color: #234; }
.msn-call-time { color: #567; font-variant-numeric: tabular-nums; }
.msn-call-btns { display: flex; gap: 6px; }
.msn-cb { border: 1px solid #8fa8bf; border-radius: 14px; padding: 4px 12px; background: linear-gradient(#fff, #e6eef5); cursor: pointer; font: 600 12px "Segoe UI", Tahoma, sans-serif; }
.msn-cb.ok { background: linear-gradient(#8fe35a, #3fa80a); color: #fff; border-color: #2c7a06; }
.msn-cb.no { background: linear-gradient(#ff8a72, #d4321a); color: #fff; border-color: #a12010; }
.msn-cb.tog { padding: 4px 9px; }
.msn-cb.tog.off { background: linear-gradient(#ffd6cc, #f2a08c); text-decoration: line-through; }
.msn-cb:hover { filter: brightness(1.08); }
.msn-test-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.msn-test-body video { width: 100%; max-height: 230px; background: #000; border-radius: 6px; transform: scaleX(-1); }
.msn-test-info div { padding: 4px 0; border-bottom: 1px solid #e3edf4; }
.msn-meter { height: 10px; border: 1px solid #9cc0da; border-radius: 5px; background: #f3f8fc; overflow: hidden; }
.msn-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4dbb0c, #f2c40c 70%, #e0321c); transition: width .08s; }
.msn-test-devs { color: #6d7a86; font-size: 11px; }
/* Transferts de fichiers */
.msn-file { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; padding: 8px 10px; border: 1px solid #c3d9ea; border-radius: 6px; background: linear-gradient(#fbfdff, #eef6fc); max-width: 420px; }
.msn-file.done { border-color: #8fcf6a; background: linear-gradient(#fbfff8, #eaf7e2); }
.msn-file.failed { border-color: #e2a99c; background: linear-gradient(#fffaf8, #fbecE8); }
.msn-file-ico { font-size: 26px; line-height: 1; }
.msn-file-main { flex: 1; min-width: 0; }
.msn-file-main b { word-break: break-all; }
.msn-file-main small { color: #6d7a86; }
.msn-file-st { color: #445; font-size: 11px; margin: 3px 0 5px; }
.msn-file .msn-meter { height: 8px; }
.msn-file-btns { display: flex; gap: 6px; margin-top: 6px; }
.msn-file-btns a { text-decoration: none; display: inline-block; }
.msn-file-btns:empty { display: none; }

/* --------------------------------------------------------------------------
   Esquisse 3D
   -------------------------------------------------------------------------- */
.esq-client { background: #eef3f8; }
.esq { display: flex; flex-direction: column; flex: 1; min-height: 0; outline: 0; background: #f2f4f7; }
.esq-tools { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: linear-gradient(#fbfcfd, #e6eaef); border-bottom: 1px solid #c3cbd4; flex: none; flex-wrap: wrap; user-select: none; }
.esq-tb { min-width: 32px; height: 32px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: default; font-size: 17px; line-height: 1; color: #2a2f36; padding: 0 6px; }
.esq-tb:hover { border-color: #a9bed6; background: linear-gradient(#fff, #e9f1fb); }
.esq-tb.on { border-color: #4a7fc1; background: linear-gradient(#dcebfc, #c2dbf7); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.esq-view-btn { font-size: 11px; font-weight: 600; min-width: 0; height: 26px; }
.esq-sep { width: 1px; height: 24px; background: #c3cbd4; margin: 0 5px; }
.esq-side { flex: none; display: grid; grid-template-columns: repeat(2, 36px); grid-auto-rows: auto; gap: 2px; align-content: start; padding: 6px 4px; background: linear-gradient(90deg, #fbfcfd, #e9edf2); border-right: 1px solid #c3cbd4; overflow-y: auto; user-select: none; }
.esq-side .esq-tb { width: 36px; height: 36px; min-width: 0; padding: 0; }
.esq-side .esq-sep { grid-column: 1 / -1; width: auto; height: 1px; margin: 4px 2px; align-self: center; }
.esq-tools-l { font-size: 11px; color: #556; margin: 0 4px 0 2px; }
.esq-view { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.esq-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.esq-view[data-tool="orbit"] canvas { cursor: grab; }
.esq-view[data-tool="pan"] canvas { cursor: move; }
.esq-view[data-tool="line"] canvas, .esq-view[data-tool="rect"] canvas, .esq-view[data-tool="circle"] canvas, .esq-view[data-tool="tape"] canvas, .esq-view[data-tool="move"] canvas, .esq-view[data-tool="rotate"] canvas { cursor: crosshair; }
.esq-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #456; font-size: 14px; background: #eef3f8; }
.esq-snap { position: absolute; pointer-events: none; transform: translate(-50%, -50%); z-index: 2; }
.esq-snap i { display: block; width: 10px; height: 10px; border: 2px solid; border-radius: 2px; background: rgba(255,255,255,.6); }
.esq-snap span { position: absolute; left: 14px; top: 10px; white-space: nowrap; font: 600 11px "Segoe UI", Tahoma, sans-serif; background: rgba(255,255,255,.9); padding: 1px 5px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.esq-palette { position: absolute; left: 8px; top: 8px; display: grid; grid-template-columns: repeat(4, 26px); gap: 4px; padding: 6px; background: rgba(255,255,255,.95); border: 1px solid #b7c3cf; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 2; }
.esq-palette button { width: 26px; height: 26px; border: 1px solid #888; border-radius: 3px; cursor: pointer; padding: 0; }
.esq-palette button.on { outline: 2px solid #2f6fe0; outline-offset: 1px; }
.esq-bar { display: flex; align-items: center; gap: 10px; padding: 4px 8px; background: #f0f0f0; border-top: 1px solid #cfd5dc; flex: none; }
.esq-hint { flex: 1; min-width: 0; color: #333; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esq-vcb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; }
.esq-vcb input { width: 130px; height: 22px; border: 1px solid #9aa9b8; padding: 0 6px; font: 12px "Segoe UI", Tahoma, sans-serif; text-align: right; }
.esq-view[data-tool="arc"] canvas, .esq-view[data-tool="push"] canvas, .esq-view[data-tool="offset"] canvas, .esq-view[data-tool="follow"] canvas { cursor: crosshair; }
.esq-main { flex: 1; min-height: 0; display: flex; }
.esq-tray { width: 210px; flex: none; overflow-y: auto; background: #f7f9fb; border-left: 1px solid #c3cbd4; padding: 4px 10px 12px; font-size: 12px; color: #2a2f36; }
.esq-tray.hidden { display: none; }
.esq-tray h3 { margin: 10px 0 5px; font-size: 12px; font-weight: 600; color: #1e3f6b; border-bottom: 1px solid #d6dde5; padding-bottom: 2px; }
.esq-tray label { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.esq-tray select, .esq-tray input[type=text] { font: 12px "Segoe UI", Tahoma, sans-serif; max-width: 100%; }
.esq-tray input[type=text] { width: 100%; box-sizing: border-box; }
.esq-tray input[type=range] { width: 100%; }
.esq-row { margin: 5px 0; }
.esq-note { color: #778; font-style: italic; margin: 4px 0; }
.esq-mini { font: 12px "Segoe UI", Tahoma, sans-serif; padding: 2px 8px; margin: 3px 0; border: 1px solid #a9b7c6; border-radius: 3px; background: linear-gradient(#fff, #e8edf2); cursor: pointer; }
.esq-mini:hover { border-color: #4a7fc1; }
.esq-scene-list > div { display: flex; align-items: center; gap: 3px; }
.esq-scene-list .esq-mini { flex: 1; text-align: left; }
.esq-x { border: 0; background: none; color: #a33; font-size: 15px; cursor: pointer; padding: 0 4px; }
.esq-glist > div { padding: 2px 5px; border-radius: 3px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esq-glist > div:hover { background: #e3edf8; }
.esq-glist > div.on { background: #cfe1f7; }
.esq-scenes { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 2px; padding: 0 6px; z-index: 2; pointer-events: none; }
.esq-scenes button { pointer-events: auto; font: 12px "Segoe UI", Tahoma, sans-serif; padding: 3px 12px; border: 1px solid #b7c3cf; border-top: 0; border-radius: 0 0 5px 5px; background: rgba(255,255,255,.92); cursor: pointer; }
.esq-scenes button.on { background: #cfe1f7; border-color: #4a7fc1; }
.esq-ctx { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; background: rgba(255,250,225,.96); border: 1px solid #d8c36a; border-radius: 4px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.esq-ctx.hidden { display: none; }
.esq-ctx button { font: 12px "Segoe UI", Tahoma, sans-serif; margin-left: 4px; }
.esq-palette { grid-template-columns: repeat(5, 26px); }
.esq-palette button.tex { background-size: cover; }
@media (max-width: 700px) { .esq-side { grid-template-columns: 36px; } .esq-hint { white-space: normal; } .esq-tray { display: none; } }
/* Esquisse 3D niveau 3 : étiquettes, infos, mise en page, console */
.esq-view[data-tool="dim"] canvas, .esq-view[data-tool="text"] canvas { cursor: crosshair; }
.esq-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.esq-label { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; white-space: nowrap; font: 12px "Segoe UI", Tahoma, sans-serif; color: #222; padding: 1px 5px; border-radius: 2px; cursor: default; user-select: none; }
.esq-label.dim { background: rgba(255,255,255,.88); }
.esq-label.note { background: #fffbe6; border: 1px solid #b9ad7a; box-shadow: 0 1px 3px rgba(0,0,0,.15); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.esq-label.on { outline: 2px solid #2f6fe0; }
.esq-info { line-height: 1.6; }
.esq-solid { display: flex; flex-wrap: wrap; gap: 4px; }
.esq-solid .esq-mini { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esq-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 12px; }
.esq-layout > .esq-layout-f { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px 4px; align-items: center; }
.esq-layout-f > label { display: flex; align-items: center; gap: 5px; }
.esq-layout-f .txt7 { width: 170px; }
.esq-layout-v { width: 100%; display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: center; }
.esq-layout-v label { display: flex; align-items: center; gap: 4px; }
.esq-layout-p { flex: 1; min-height: 0; margin: 6px 12px; background: #8a939c; display: flex; align-items: center; justify-content: center; padding: 8px; }
.esq-layout-p img { max-width: 100%; max-height: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.4); background: #fff; }
.esq-console { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 8px; gap: 6px; font-size: 12px; background: #f2f4f7; }
.esq-console textarea { flex: 2; min-height: 120px; resize: none; font: 12px Consolas, "Courier New", monospace; border: 1px solid #9aa9b8; padding: 6px; }
.esq-console-bar { display: flex; gap: 6px; }
.esq-console pre { flex: 1; min-height: 50px; margin: 0; overflow: auto; background: #1e1e1e; color: #d4d4d4; padding: 6px; font: 12px Consolas, monospace; white-space: pre-wrap; }
/* Atelier Croquis : apparence de l'Arduino IDE 2 (thème clair) */
.cq-client { background: #fff; }
.cq { --teal: #008184; --teal-d: #005c5f; --line: #dae3e3; --side: #ecf1f1; display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; color: #4e5b61; font: 13px "Open Sans", "Segoe UI", Tahoma, sans-serif; outline: 0; }
.cq-loading { margin: auto; color: #4e5b61; font-size: 14px; }
.cq .menubar { background: #fff; border-bottom: 1px solid var(--line); }
.cq-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.cq-round { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 6px; background: var(--teal); color: #fff; cursor: pointer; display: flex; }
.cq-round:hover { background: #00979c; }
.cq-round.dis { background: #c9d2d2; cursor: default; }
.cq-round svg, .cq-flat svg, .cq-act svg, .cq-board svg, .cq-tabmenu svg { width: 100%; height: 100%; display: block; }
.cq-board { margin-left: 10px; display: flex; align-items: center; gap: 6px; height: 30px; min-width: 240px; max-width: 360px; padding: 0 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: #4e5b61; font: 600 13px "Open Sans", "Segoe UI", sans-serif; cursor: pointer; }
.cq-board:hover { border-color: var(--teal); }
.cq-board .ic { width: 16px; height: 16px; color: #95a5a6; flex: none; }
.cq-board .nm { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-board .ch { width: 16px; height: 16px; flex: none; }
.cq-sp { flex: 1; }
.cq-flat { width: 32px; height: 32px; padding: 6px; border: 0; background: none; color: var(--teal); cursor: pointer; border-radius: 3px; }
.cq-flat:hover { background: var(--side); }
.cq-body { flex: 1; min-height: 0; display: flex; }
.cq-act { flex: none; width: 48px; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 4px; }
.cq-act button { width: 48px; height: 44px; padding: 11px; border: 0; border-left: 2px solid transparent; background: none; color: #7f8c8d; cursor: pointer; }
.cq-act button:hover { color: #4e5b61; }
.cq-act button.on { color: var(--teal); border-left-color: var(--teal); }
.cq-side { flex: none; width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fff; min-height: 0; }
.cq-side.hidden { display: none; }
.cq-side-h { display: flex; align-items: center; padding: 10px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #4e5b61; }
.cq-side-h span { flex: 1; }
.cq-side-c { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.cq-x { border: 0; background: none; color: #7f8c8d; font-size: 15px; cursor: pointer; padding: 0 5px; line-height: 1; }
.cq-x:hover { color: #4e5b61; }
.cq-in { width: 100%; box-sizing: border-box; height: 28px; border: 1px solid var(--line); padding: 0 8px; font: 13px "Open Sans", "Segoe UI", sans-serif; color: #4e5b61; outline: 0; }
.cq-in:focus { border-color: var(--teal); }
.cq-note { color: #7f8c8d; font-size: 12px; margin: 6px 0; line-height: 1.45; }
.cq-btn { height: 28px; padding: 0 14px; border: 1px solid var(--teal); border-radius: 14px; background: var(--teal); color: #fff; font: 600 12px "Open Sans", "Segoe UI", sans-serif; cursor: pointer; margin: 4px 0; }
.cq-btn.ghost { background: #fff; color: var(--teal); }
.cq-btn:hover { filter: brightness(1.08); }
.cq-list { margin-top: 8px; }
.cq-li { display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-radius: 2px; cursor: pointer; }
.cq-li:hover { background: var(--side); }
.cq-li span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-li small { color: #95a5a6; }
.cq-cards { margin-top: 8px; }
.cq-card { padding: 10px 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.cq-card .t { font-weight: 700; font-size: 13px; color: #434f54; }
.cq-card .by { color: #7f8c8d; }
.cq-card .ver { color: #4e5b61; margin: 2px 0; }
.cq-card .inst { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 2px; background: #e6f4f4; color: var(--teal); font-size: 10px; font-weight: 700; }
.cq-card .d { color: #4e5b61; margin: 3px 0; }
.cq-card a { color: var(--teal); }
.cq-chk { display: flex; align-items: center; gap: 5px; margin: 6px 0; font-size: 12px; }
.cq-results { font-size: 12px; }
.cq-rf { font-weight: 700; margin: 8px 0 3px; }
.cq-rf small { background: var(--side); border-radius: 8px; padding: 0 6px; font-weight: 400; }
.cq-rl { padding: 2px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Consolas, monospace; }
.cq-rl:hover { background: var(--side); }
.cq-rl mark { background: #f8d77a; color: inherit; }
.cq-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cq-tabs { flex: none; display: flex; align-items: stretch; height: 34px; background: var(--side); border-bottom: 1px solid var(--line); }
.cq-tablist { flex: 1; display: flex; overflow-x: auto; scrollbar-width: thin; }
.cq-tab { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap; color: #7f8c8d; font-size: 13px; }
.cq-tab:hover { color: #4e5b61; }
.cq-tab.on { background: #fff; color: #434f54; box-shadow: inset 0 2px 0 var(--teal); }
.cq-tab .dot { font-style: normal; font-size: 9px; color: #4e5b61; }
.cq-tabmenu { width: 34px; padding: 8px; border: 0; background: none; color: #7f8c8d; cursor: pointer; }
.cq-editor { flex: 1; min-height: 80px; position: relative; }
.cq-split { flex: none; height: 4px; cursor: row-resize; background: var(--line); }
.cq-bottom { flex: none; height: 170px; display: flex; flex-direction: column; min-height: 60px; }
.cq.nobottom .cq-bottom, .cq.nobottom .cq-split { display: none; }
.cq-bottom-h { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; height: 30px; border-bottom: 1px solid var(--line); }
.cq-bottom-h [data-o="out"], .cq-bottom-h [data-o="serial"] { border: 0; background: none; padding: 6px 10px; font: 12px "Open Sans", "Segoe UI", sans-serif; color: #7f8c8d; cursor: pointer; border-bottom: 2px solid transparent; }
.cq-bottom-h button.on { color: #434f54; border-bottom-color: var(--teal); }
.cq-out { flex: 1; overflow: auto; padding: 6px 12px; font: 12px Consolas, "Source Code Pro", monospace; white-space: pre-wrap; color: #4e5b61; }
.cq-out.hidden { display: none; }
.cq-out .cq-err { color: #da5b4a; }
.cq-out .cq-warn { color: #c08a00; }
.cq-status { flex: none; display: flex; align-items: center; gap: 16px; height: 24px; padding: 0 12px; background: #006d70; color: #fff; font-size: 12px; }
.cq-bell { opacity: .85; }
.cq-bd { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 12px; color: #4e5b61; }
.cq-bd-intro { padding: 10px 14px; line-height: 1.45; }
.cq-bd-cols { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 14px 8px; }
.cq-bd-cols > div { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.cq-bd-list { flex: 1; overflow-y: auto; border: 1px solid var(--line, #dae3e3); }
.cq-bd-item { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; cursor: pointer; }
.cq-bd-item:hover { background: #ecf1f1; }
.cq-bd-item.on { background: #008184; color: #fff; }
.cq-bd-item small { color: #95a5a6; white-space: nowrap; }
.cq-bd-item.on small { color: #d8f0f0; }
.cq-bd-ports { flex: 1; border: 1px solid #dae3e3; padding: 10px; color: #7f8c8d; line-height: 1.5; }
.cq-prefs { display: flex; flex-direction: column; flex: 1; font-size: 12px; }
.cq-prefs-f { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.cq-prefs-f > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cq-prefs-f .cq-in { width: 80px; }
.cq.dark { background: #171e21; color: #dae3e3; --line: #2c353a; --side: #1f272a; }
.cq.dark .cq-top, .cq.dark .menubar, .cq.dark .cq-side, .cq.dark .cq-board, .cq.dark .cq-in { background: #171e21; color: #dae3e3; }
.cq.dark .cq-tab.on { background: #171e21; color: #fff; }
.cq.dark .cq-out, .cq.dark .cq-card .t, .cq.dark .cq-card .d, .cq.dark .cq-card .ver { color: #dae3e3; }
@media (max-width: 700px) { .cq-board { min-width: 0; flex: 1; } .cq-side { position: absolute; z-index: 5; height: 100%; left: 48px; } .cq-body { position: relative; } }
/* Atelier Croquis : moniteur série, carte virtuelle, traceur */
.cq-round.busy { animation: cqspin 1s linear infinite; }
@keyframes cqspin { 50% { opacity: .55; } }
.cq-mon { display: flex; flex-direction: column; padding: 0 !important; white-space: normal; }
.cq-mon.hidden { display: none; }
.cq-mon-bar { flex: none; display: flex; gap: 6px; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.cq-mon-bar .cq-in { flex: 1; height: 26px; }
.cq-mon-bar select { height: 26px; font: 12px "Open Sans", "Segoe UI", sans-serif; border: 1px solid var(--line); color: #4e5b61; background: #fff; }
.cq-mon-bar .cq-flat { width: 28px; height: 26px; padding: 2px; font-size: 14px; color: #95a5a6; }
.cq-mon-bar .cq-flat.on { color: var(--teal); background: var(--side); }
.cq-mon-out { flex: 1; overflow: auto; padding: 6px 12px; font: 12px Consolas, "Source Code Pro", monospace; white-space: pre-wrap; word-break: break-all; color: #4e5b61; }
.cb-client { background: #f4f7f7; }
.cb { display: flex; flex-direction: column; flex: 1; min-height: 0; font: 12px "Open Sans", "Segoe UI", sans-serif; color: #4e5b61; }
.cb-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border-bottom: 1px solid #dae3e3; }
.cb-bar button, .cb-bar select { height: 26px; min-width: 30px; border: 1px solid #dae3e3; background: #fff; border-radius: 3px; color: #434f54; cursor: pointer; font: 13px "Segoe UI", sans-serif; }
.cb-bar button:hover { border-color: #008184; }
.cb-state { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cb-state i { width: 10px; height: 10px; border-radius: 50%; background: #95a5a6; }
.cb-state.run i { background: #27ae60; box-shadow: 0 0 6px #27ae60; }
.cb-state.pause i { background: #f1c40f; }
.cb-state.err i { background: #da5b4a; }
.cb-time { font: 12px Consolas, monospace; color: #7f8c8d; }
.cb-scroll { flex: 1; overflow-y: auto; padding: 10px; }
.cb-svg { width: 100%; height: auto; display: block; }
.cb-svg circle[class^="cb-led"] { fill: #3d4a4f; transition: fill .05s; }
.cb-svg .cb-led-on.lit { fill: #2ecc71; } .cb-svg .cb-led-l.lit { fill: #f39c12; } .cb-svg .cb-led-tx.lit, .cb-svg .cb-led-rx.lit { fill: #f1c40f; }
.cb-msg div { margin: 6px 0; padding: 5px 8px; border-radius: 3px; background: #fff8e1; border: 1px solid #f0d58c; }
.cb-msg div.err { background: #fdecea; border-color: #e8a59d; color: #a33; }
.cb-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.cb-card { background: #fff; border: 1px solid #dae3e3; border-radius: 4px; padding: 7px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cb-ct { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.cb-ct b { font-size: 12px; color: #434f54; } .cb-ct small { color: #95a5a6; font-size: 10px; text-align: right; }
.cb-val { font: 11px Consolas, monospace; color: #7f8c8d; }
.cb-note { font-size: 10px; color: #95a5a6; text-align: center; }
.cb-led-big i { display: block; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb3a7, #e74c3c 55%, #8e1d12); opacity: .12; box-shadow: none; }
.cb-led-big i.lit { box-shadow: 0 0 14px #ff5a45; }
.cb-led-big.rgb i { background: #000; opacity: 1; border: 1px solid #ccc; }
.cb-push { width: 70px; height: 34px; border-radius: 17px; border: 2px solid #555; background: linear-gradient(#f2f2f2, #c9c9c9); cursor: pointer; font: 600 11px "Segoe UI", sans-serif; user-select: none; touch-action: none; }
.cb-push.on { background: linear-gradient(#bbb, #e0e0e0); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.cb-hold { font-size: 10px; display: flex; align-items: center; gap: 3px; }
.cb-pot { width: 100%; }
.cb-servo { width: 100px; }
.cb-spk { font-size: 26px; }
.cb-bits { display: flex; gap: 3px; } .cb-bits i { width: 10px; height: 10px; border-radius: 50%; background: #ddd; } .cb-bits i.lit { background: #e74c3c; box-shadow: 0 0 5px #e74c3c; }
.cb-num { width: 56px; }
.cb-extra > * { margin-top: 10px; }
.cb-lcd { background: #fff; border: 1px solid #dae3e3; border-radius: 4px; padding: 8px; text-align: center; }
.cb-lcd canvas { max-width: 100%; border: 6px solid #1e3d14; border-radius: 3px; }
.cb-step svg { width: 70px; }
.cb-wifi { padding: 6px 8px; background: #e6f4f4; border: 1px solid #b7dcdc; border-radius: 3px; }
.cb-web { background: #fff; border: 1px solid #dae3e3; border-radius: 4px; padding: 8px; }
.cb-url { display: flex; align-items: center; gap: 4px; margin: 6px 0; font: 12px Consolas, monospace; }
.cb-url input { flex: 1; height: 24px; border: 1px solid #dae3e3; padding: 0 6px; font: 12px Consolas, monospace; }
.cb-url button { height: 26px; }
.cb-web iframe { width: 100%; height: 260px; border: 1px solid #dae3e3; background: #fff; }
.cb-help { margin-top: 12px; font-size: 11px; color: #95a5a6; }
.cpl-client { background: #fff; }
.cpl { display: flex; flex-direction: column; flex: 1; min-height: 0; font: 12px "Open Sans", "Segoe UI", sans-serif; color: #4e5b61; }
.cpl-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #dae3e3; flex-wrap: wrap; }
.cpl-bar button { height: 24px; border: 1px solid #dae3e3; background: #fff; border-radius: 3px; cursor: pointer; }
.cpl-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.cpl-legend label { display: flex; align-items: center; gap: 4px; }
.cpl-legend i { width: 14px; height: 4px; background: var(--c); border-radius: 2px; }
.cpl canvas { flex: 1; min-height: 0; width: 100%; }
.cpl-send { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid #dae3e3; }
.cpl-send input { flex: 1; height: 24px; border: 1px solid #dae3e3; padding: 0 6px; }

/* --------------------------------------------------------------------------
   Analyse de cible
   -------------------------------------------------------------------------- */
.tir { display: flex; flex-direction: column; flex: 1; min-height: 0; outline: 0; }
.tir .cmdbar button.on { border-color: #6f97c4; background: linear-gradient(#dfe9f5, #c5d8ee); }
.tir-sep { width: 1px; height: 20px; background: #b6c3d3; margin: 0 4px; flex: none; }
.tir-cal { display: flex; align-items: center; gap: 6px; color: #1e395b; white-space: nowrap; }
.tir-cal select { height: 22px; padding: 1px 3px; }
.tir-body { flex: 1; min-height: 0; display: flex; }
.tir-view { position: relative; flex: 1; min-width: 0; background: #4a4f57; overflow: hidden; touch-action: none; }
.tir-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.tir-view.m-shot canvas, .tir-view.m-sticker canvas, .tir-view.m-target canvas { cursor: crosshair; }
.tir-view.drag canvas { cursor: grabbing; }
.tir-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #eef1f5; text-align: center; padding: 20px; }
.tir-empty .ico { width: 72px; height: 72px; }
.tir-empty .ico svg { width: 100%; height: 100%; }
.tir-empty b { font-size: 16px; font-weight: normal; }
.tir-empty .btn7 { color: #000; }
.tir-empty small { color: #c3cad3; max-width: 340px; }
.tir-view.over .tir-empty { background: rgba(80,150,230,.25); outline: 2px dashed #9cc8f5; outline-offset: -10px; }
.tir-busy { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(255,255,255,.94); color: #1e395b; border: 1px solid #8ea7c4; padding: 6px 14px; border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.tir-side { width: 260px; flex: none; overflow: auto; background: #f5f8fc; border-left: 1px solid #c5d2e3; }
.tir-sec { border-bottom: 1px solid #dde5ef; padding: 8px 10px; }
.tir-sec h3 { margin: 0; font-size: 13px; font-weight: normal; color: #1e3287; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tir-sec h3 b { font-size: 15px; color: #c40000; white-space: nowrap; }
.tir-sec .sub { color: #555; font-size: 11px; margin: 2px 0 6px; }
.tir-sec .sub b { color: #1e3287; font-size: 13px; }
.tir-row { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border: 1px solid transparent; border-radius: 2px; cursor: default; }
.tir-row:hover { background: #e5f3fb; border-color: #c4e3f6; }
.tir-row.sel { background: #cce8ff; border-color: #84acdd; }
.tir-row .n { min-width: 22px; height: 16px; padding: 0 3px; background: #e01b1b; color: #fff; font-weight: bold; font-size: 11px; text-align: center; line-height: 16px; border-radius: 2px; }
.tir-row .l { color: #777; font-size: 11px; }
.tir-row .v { margin-left: auto; font-weight: bold; white-space: nowrap; }
.tir-row .x { border: 0; background: none; color: #888; width: 16px; padding: 0; font-size: 14px; line-height: 1; cursor: pointer; visibility: hidden; }
.tir-row:hover .x, .tir-row.sel .x { visibility: visible; }
.tir-row .x:hover { color: #c40000; }
.tir-note { padding: 8px 10px; color: #555; font-size: 11px; line-height: 1.5; }
@media (max-width: 700px) {
  .tir .cmdbar { overflow-x: auto; }
  .tir-body { flex-direction: column; }
  .tir-side { width: auto; height: 38%; border-left: 0; border-top: 1px solid #c5d2e3; }
}

/* ===== Atelier Circuit (plaque d'essai, schéma, simulation) ===== */
.ac-client { background: #f3f5f8; }
.ac { display: flex; flex-direction: column; flex: 1; min-height: 0; outline: 0; }
.ac-tools { flex-wrap: wrap; row-gap: 2px; }
.ac-tools button.on { border-color: #6f97c4; background: linear-gradient(#dfe9f5, #c5d8ee); }
.ac-sep { width: 1px; height: 20px; background: #b6c3d3; margin: 0 4px; flex: none; }
.ac-colors { display: inline-flex; gap: 3px; align-items: center; margin-left: 2px; }
.ac-colors.hidden { display: none; }
.ac-tools .ac-colors button { width: 15px; height: 15px; min-width: 0; padding: 0; margin: 0; border-radius: 3px; border: 1px solid #556 !important; background: var(--c) !important; box-shadow: none; }
.ac-tools .ac-colors button.on { outline: 2px solid #3399ff; outline-offset: 1px; }
.ac-viewsw { display: inline-flex; gap: 0; }
.ac-tools .ac-simbtn.on { color: #a00; font-weight: bold; }
.ac-body { flex: 1; min-height: 0; display: flex; }
.ac-pal { width: 200px; flex: none; display: flex; flex-direction: column; border-right: 1px solid #c9d3df; background: #fff; }
.ac-q { margin: 6px; padding: 3px 6px; border: 1px solid #abadb3; font: inherit; }
.ac-list { flex: 1; overflow-y: auto; padding: 0 4px 8px; }
.ac-cat { font-weight: bold; color: #1e395b; margin: 8px 4px 3px; border-bottom: 1px solid #e1e7ef; padding-bottom: 2px; }
.ac-item { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border: 1px solid transparent; border-radius: 3px; cursor: grab; user-select: none; line-height: 1.2; touch-action: none; }
.ac-item:hover { background: #e5f3fb; border-color: #a5d2ee; }
.ac-ico { width: 34px; height: 34px; flex: none; display: flex; }
.ac-ico svg { width: 100%; height: 100%; }
.ac-none { padding: 10px; color: #777; }
.ac-view { position: relative; flex: 1; min-width: 0; background: #fbfcf8; overflow: hidden; touch-action: none; }
.ac-view.sch { background: #fff; }
.ac-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.ac-part { cursor: move; }
.ac-svg [data-wid] { cursor: pointer; }
.ac-handle { cursor: grab; }
.ac-view.panning .ac-svg, .ac-view.grab .ac-svg, .ac-view.grab .ac-part { cursor: grabbing; }
.ac-view.wiring .ac-svg, .ac-view.wiring .ac-part { cursor: crosshair; }
.ac-view.simulating .ac-int { cursor: pointer; }
.ac-banner { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.ac-banner > div { pointer-events: auto; align-self: flex-start; padding: 5px 10px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.18); max-width: 100%; }
.ac-banner .warn { background: #fff4ce; border: 1px solid #e0b100; color: #5a4300; }
.ac-banner .info { background: #e8f2fc; border: 1px solid #8cb7e6; color: #123; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ac-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 90%); text-align: center; color: #456; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ac-empty.hidden { display: none; }
.ac-empty b { font-size: 16px; color: #1e395b; }
.ac-empty div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ac-insp { width: 236px; flex: none; border-left: 1px solid #c9d3df; background: #f7f9fc; overflow-y: auto; padding: 8px 10px; }
.ac-ih { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ac-ih b { display: block; color: #1e395b; font-size: 13px; }
.ac-ih small { color: #667; }
.ac-field { display: flex; flex-direction: column; gap: 3px; margin: 7px 0; }
.ac-field input[type="range"] { width: 100%; }
.ac-unit { display: flex; align-items: center; gap: 4px; }
.ac-unit input { flex: 1; min-width: 0; }
.ac-unit i { font-style: normal; color: #555; }
.ac-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-swatches button { width: 20px; height: 20px; border: 1px solid #666; border-radius: 3px; padding: 0; cursor: pointer; }
.ac-swatches button.on { outline: 2px solid #3399ff; outline-offset: 1px; }
.ac-note { margin: 8px 0; color: #3e4e5e; background: #eef3f9; border: 1px solid #d5e1ef; padding: 6px 7px; border-radius: 3px; line-height: 1.35; }
.ac-pins { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 3px; }
.ac-pins b { width: 100%; color: #1e395b; }
.ac-pins span { background: #fff; border: 1px solid #ccd5e0; padding: 1px 6px; border-radius: 8px; }
.ac-lt { display: block; margin: 10px 0 3px; color: #1e395b; }
.ac-live > div { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #d0d8e2; }
.ac-live > div b { color: #0b5394; text-align: right; }
.ac-acts { display: flex; gap: 6px; margin-top: 10px; }
.ac-help { line-height: 1.4; }
.ac-help ul { padding-left: 16px; margin: 4px 0; }
.ac-help li { margin: 4px 0; }
.ac-ghost { position: fixed; width: 60px; height: 60px; pointer-events: none; z-index: 99999; opacity: .85; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.ac-ghost svg { width: 100%; height: 100%; }
.ac-dlg { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ac-dlg-c { flex: 1; overflow: auto; padding: 10px; background: #fff; }
.ac-table { border-collapse: collapse; width: 100%; }
.ac-table th, .ac-table td { border: 1px solid #d5dbe3; padding: 3px 6px; text-align: left; vertical-align: top; }
.ac-table th { background: #eef3f9; }
.ac-helpbox p { margin: 0 0 9px; line-height: 1.45; }
@media (max-width: 700px) {
  .ac-pal { width: 120px; }
  .ac-pal .ac-item span:last-child { display: none; }
  .ac-insp { display: none; }
}

/* ===== Analyseur de paquets ===== */
.pq-client { background: #fff; }
.pq { display: flex; flex-direction: column; flex: 1; min-height: 0; outline: 0; font-size: 12px; }
.pq.busy { cursor: progress; }
.pq.drag::after { content: 'Déposez la capture ici'; position: absolute; inset: 60px 12px 30px; border: 3px dashed #3a7bd5; background: rgba(230,240,255,.85); color: #1e395b; font-size: 20px; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
.pq-tools { flex-wrap: wrap; row-gap: 2px; }
.pq-tools button.on { border-color: #6f97c4; background: linear-gradient(#dfe9f5, #c5d8ee); }
.pq-sep { width: 1px; height: 20px; background: #b6c3d3; margin: 0 4px; flex: none; }
.pq-fbar { display: flex; align-items: center; gap: 2px; padding: 3px 4px; background: #f5f7fa; border-bottom: 1px solid #c9d3df; flex: none; }
.pq-fic { color: #3b5a85; padding: 0 4px; font-size: 14px; }
.pq-filter { flex: 1; min-width: 0; height: 24px; border: 1px solid #abadb3; padding: 2px 6px; font: 12px Consolas, Menlo, monospace; background: #fff; }
.pq-filter.ok { background: #afffaf; }
.pq-filter.bad { background: #ffafaf; }
.pq-fbar button { height: 24px; min-width: 26px; border: 1px solid #abadb3; background: linear-gradient(#fff, #e8edf3); cursor: pointer; }
.pq-fbar button:hover { border-color: #3c7fb1; background: linear-gradient(#eaf6fd, #bee6fd); }
.pq-findbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #fffbe6; border-bottom: 1px solid #e6d88a; flex: none; }
.pq-findbar.hidden { display: none; }
.pq-findbar .txt7 { flex: 1; min-width: 0; font-family: Consolas, Menlo, monospace; }
.pq-panes { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.pq-list { flex: 0 0 44%; min-height: 60px; display: flex; flex-direction: column; border-bottom: 1px solid #c9d3df; }
.pq-head { display: flex; flex: none; background: linear-gradient(#fff, #edf1f6); border-bottom: 1px solid #c9d3df; overflow: hidden; white-space: nowrap; user-select: none; }
.pq-head span { position: relative; padding: 3px 6px; border-right: 1px solid #dde3ea; cursor: pointer; overflow: hidden; text-overflow: ellipsis; color: #1e395b; }
.pq-head span:hover { background: #e3eefb; }
.pq-head span.r, .pq-row span.r { text-align: right; }
.pq-head i { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 1; }
.pq-scroll { flex: 1; overflow: auto; position: relative; outline: 0; }
.pq-spacer { position: relative; min-width: 100%; }
.pq-row { position: absolute; left: 0; right: 0; height: 19px; line-height: 19px; display: flex; white-space: nowrap; cursor: default; background: var(--bg, #fff); color: var(--fg, #12272e); font-family: Consolas, Menlo, 'DejaVu Sans Mono', monospace; font-size: 11.5px; }
.pq-row span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.pq-row.sel { background: #3399ff !important; color: #fff !important; }
.pq-split { flex: none; height: 5px; background: #e6ebf1; cursor: row-resize; border-top: 1px solid #d3dbe5; border-bottom: 1px solid #d3dbe5; }
.pq-split:hover { background: #c9dcf2; }
.pq-tree { flex: 1; min-height: 60px; overflow: auto; outline: 0; font-family: Consolas, Menlo, monospace; font-size: 11.5px; padding: 2px 0; }
.pq-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.pq-tree > ul { padding-left: 2px; }
.pq-tl { display: flex; align-items: flex-start; white-space: pre; cursor: default; padding: 0 4px; line-height: 17px; }
.pq-tl i { flex: none; width: 13px; height: 17px; font-style: normal; color: #555; cursor: pointer; }
li.closed > .pq-tl i::before { content: '▸'; }
li.open > .pq-tl i::before { content: '▾'; }
.pq-tree li.sel > .pq-tl { background: #3399ff; color: #fff; }
.pq-tree li.sel > .pq-tl i { color: #fff; }
.pq-tree > ul > li > .pq-tl { font-weight: bold; color: #12274a; }
.pq-tree > ul > li.sel > .pq-tl { color: #fff; }
.pq-bytes { flex: 0 0 24%; min-height: 50px; overflow: auto; font: 12px/16px Consolas, Menlo, monospace; padding: 4px 8px; white-space: pre; color: #222; background: #fcfcfd; }
.pq-bytes .off { color: #8a95a3; }
.pq-bytes b { font-weight: normal; }
.pq-bytes b.hl { background: #3399ff; color: #fff; }
.pq-welcome { position: absolute; inset: 0; background: #fff; overflow: auto; z-index: 2; }
.pq-welcome.hidden { display: none; }
.pq-wc { max-width: 780px; margin: 0 auto; padding: 24px 24px 30px; color: #333; }
.pq-wc h2 { color: #1e395b; font-weight: normal; font-size: 22px; margin: 0 0 8px; }
.pq-wc h3 { color: #1e395b; font-weight: normal; font-size: 15px; margin: 22px 0 8px; border-bottom: 1px solid #dde3ea; padding-bottom: 4px; }
.pq-drop { margin-top: 14px; padding: 18px; border: 2px dashed #a9bfd9; border-radius: 6px; display: flex; gap: 14px; align-items: center; color: #567; background: #f7faff; }
.pq-exs { display: grid; gap: 10px; }
.pq-ex { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #dde3ea; border-radius: 4px; background: #fbfcfe; }
.pq-ex b { color: #1e395b; font-size: 13px; }
.pq-ex span { color: #555; line-height: 1.4; }
.pq-small { margin-top: 20px; color: #666; line-height: 1.5; }
.pq-small code, .pq-help code { background: #f0f3f7; padding: 1px 4px; border-radius: 3px; font-family: Consolas, Menlo, monospace; }
.pq .statusbar .pq-st.err { color: #b00; }
.pq-subc { background: #fff; }
.pq-sub { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 12px; }
.pq-scrollbox { flex: 1; overflow: auto; min-height: 0; }
.pq-subfoot { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid #dde3ea; background: #f5f7fa; flex: none; flex-wrap: wrap; }
.pq-subfoot .sp { flex: 1; }
.pq-subfoot label { display: flex; align-items: center; gap: 4px; }
.pq-hint { color: #667; }
.pq-none { padding: 16px; color: #667; }
.pq-t { border-collapse: collapse; width: 100%; }
.pq-t th { position: sticky; top: 0; background: linear-gradient(#fff, #edf1f6); border-bottom: 1px solid #c9d3df; border-right: 1px solid #dde3ea; padding: 4px 7px; text-align: left; color: #1e395b; font-weight: normal; white-space: nowrap; z-index: 1; }
.pq-t td { padding: 3px 7px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.pq-t th.r, .pq-t td.r { text-align: right; }
.pq-t tbody tr:hover { background: #eef5fd; }
.pq-t tbody tr.sel { background: #3399ff; color: #fff; }
.pq-t tbody tr.warn td { color: #b00; }
.pq-t tbody tr.sel.warn td { color: #fff; }
.pq-t.kv td:first-child { color: #1e395b; width: 180px; }
.pq-t.help td { white-space: normal; cursor: pointer; }
.pq-t .pq-bar { display: inline-block; height: 9px; background: #6aa6e8; margin-right: 6px; vertical-align: middle; max-width: 70px; }
.pq-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid #c9d3df; flex: none; background: #f5f7fa; }
.pq-tabs button { border: 1px solid #c9d3df; border-bottom: 0; background: #e9eef5; padding: 4px 12px; border-radius: 3px 3px 0 0; cursor: pointer; margin-bottom: -1px; }
.pq-tabs button.on { background: #fff; border-bottom: 1px solid #fff; color: #1e395b; font-weight: bold; }
.pq-iobar { display: flex; gap: 14px; padding: 6px 8px; flex-wrap: wrap; flex: none; border-bottom: 1px solid #dde3ea; }
.pq-iobar label { display: flex; gap: 5px; align-items: center; }
.pq-iobar .txt7 { width: 220px; font-family: Consolas, Menlo, monospace; }
.pq-iobar .txt7.bad { background: #ffafaf; }
canvas.pq-io { flex: 1; min-height: 0; width: 100%; display: block; cursor: crosshair; }
.pq-follow { flex: 1; overflow: auto; font: 12px/1.4 Consolas, Menlo, monospace; white-space: pre-wrap; word-break: break-all; padding: 6px 8px; }
.pq-follow .cl { color: #7e0000; background: #fbeded; }
.pq-follow .sv { color: #00007e; background: #ededfb; }
.pq-subfoot b.cl { color: #c33; } .pq-subfoot b.sv { color: #33c; }
.pq-flow svg { display: block; }
.pq-fev { cursor: pointer; }
.pq-fev:hover rect { fill: #eef5fd; }
.pq-fev.sel rect { fill: #cfe4fb; }
.pq-rtpsum { padding: 6px 10px; border-bottom: 1px solid #dde3ea; flex: none; }
canvas.pq-jit { flex: 0 0 110px; width: 100%; display: block; border-bottom: 1px solid #dde3ea; }
.pq-player { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pq-pbar { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #dde3ea; flex: none; flex-wrap: wrap; }
.pq-pbar .sp { flex: 1; }
.pq-ptime { font-family: Consolas, Menlo, monospace; min-width: 120px; }
.pq-waves { flex: 1; overflow: auto; padding: 4px 8px; }
.pq-wave { margin: 6px 0; }
.pq-wave label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pq-wave small { color: #667; }
.pq-wave canvas { width: 100%; height: 80px; display: block; border: 1px solid #dde3ea; margin-top: 3px; cursor: pointer; }
.pq-help { padding: 10px 14px; line-height: 1.5; }
.pq-help .ok { background: #afffaf; padding: 0 4px; } .pq-help .bad { background: #ffafaf; padding: 0 4px; }
@media (max-width: 700px) {
  .pq-tools button { padding: 0 4px; }
  .pq-row span:nth-child(2), .pq-head span:nth-child(2), .pq-row span:nth-child(6), .pq-head span:nth-child(6) { display: none; }
}