/* ===== Explorateur de fichiers Windows (windows-explorer.css) — style Windows 11 : mica clair, barre de commandes, volet de navigation =====
   Animations : transform + opacity seulement, coupées avec prefers-reduced-motion. */

.window[data-id=files] { width: min(1020px, calc(100vw - 80px)); height: min(600px, calc(100dvh - 130px)); }
.window[data-id=files] > .window-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.wx-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wx {
  --wx-bg: #f7fafd; --wx-fg: #14253a; --wx-muted: #5d7288; --wx-line: #dbe6f1; --wx-hover: #e6f0fb; --wx-sel: #d4e6fa; --wx-a: #2871b6;
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--wx-bg); color: var(--wx-fg); font: 13.5px/1.4 'DM Sans', system-ui, sans-serif;
}
/* thème sombre (ex-@media prefers-color-scheme) */
 :where(:root[data-theme="dark"]) .wx { --wx-bg: #17233a; --wx-fg: #e8f0fb; --wx-muted: #9fb3cb; --wx-line: #2b3d5d; --wx-hover: #223552; --wx-sel: #29466f; --wx-a: #6aa9ee; } 
.wx *, .wx *::before, .wx *::after { box-sizing: border-box; }
.wx button, .wx input { font: inherit; color: inherit; }
.wx button:focus-visible, .wx input:focus-visible, .wx [tabindex]:focus-visible { outline: 2px solid var(--wx-a); outline-offset: -2px; }

.wx-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--wx-line); }
.wx-navbtns { display: flex; gap: 2px; }
.wx-b { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.wx-b:hover:not(:disabled) { background: var(--wx-hover); }
.wx-b:disabled { opacity: .35; cursor: default; }
html.lang-rtl .wx-b span, html.lang-rtl .wx-back, html.lang-rtl .wx-fwd { transform: scaleX(-1); }
.wx-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 6px; border: 1px solid var(--wx-line); border-radius: 8px; background: color-mix(in srgb, var(--wx-bg) 60%, #fff); overflow: hidden; white-space: nowrap; }
.wx-crumbs i { font-style: normal; color: var(--wx-muted); }
.wx-crumb { height: 26px; padding: 0 8px; border: 0; border-radius: 5px; background: none; cursor: pointer; }
.wx-crumb:hover { background: var(--wx-hover); }
.wx-crumb[aria-current] { font-weight: 700; }
.wx-search { flex: none; display: flex; align-items: center; gap: 6px; width: 230px; height: 34px; padding: 0 10px; border: 1px solid var(--wx-line); border-radius: 8px; background: color-mix(in srgb, var(--wx-bg) 60%, #fff); }
.wx-search:focus-within { border-color: var(--wx-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wx-a) 25%, transparent); }
.wx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; }
.wx-search input::-webkit-search-cancel-button { cursor: pointer; }

.wx-cmd { flex: none; display: flex; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--wx-line); }
.wx-c { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; white-space: nowrap; }
.wx-c i { font-style: normal; font-size: 12px; color: var(--wx-muted); }
.wx-c:hover { background: var(--wx-hover); }
.wx-c[aria-pressed="true"], .wx-c[aria-expanded="true"] { background: var(--wx-sel); }

.wx-main { flex: 1 1 auto; min-height: 0; display: flex; }
.wx-tree { flex: none; width: 214px; overflow: auto; padding: 8px 6px; border-inline-end: 1px solid var(--wx-line); scrollbar-width: thin; }
.wx-th { margin: 10px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--wx-muted); }
.wx-th:first-child { margin-top: 2px; }
.wx-q-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; text-align: start; cursor: pointer; }
.wx-q-item span:first-child { color: #e8a13a; width: 16px; text-align: center; }
.wx-q-item:hover, .wx-tr:hover { background: var(--wx-hover); }
.wx-q-item.on, .wx-tr.on { background: var(--wx-sel); }
.wx-tr { display: flex; align-items: center; border-radius: 6px; padding-inline-start: calc(var(--d, 0) * 14px); }
.wx-tx { flex: none; width: 22px; height: 28px; border: 0; background: none; color: var(--wx-muted); cursor: pointer; padding: 0; }
.wx-tl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 0; border: 0; background: none; text-align: start; cursor: pointer; overflow: hidden; }
.wx-tl > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-content { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 10px 12px; overscroll-behavior: contain; scrollbar-width: thin; }
.wx-preview { flex: none; width: 290px; overflow: auto; padding: 16px; border-inline-start: 1px solid var(--wx-line); background: color-mix(in srgb, var(--wx-bg) 70%, #fff); animation: wxIn .25s ease both; }
.wx-preview[hidden] { display: none; }
.wx-pv-head h3 { margin: 10px 0 2px; font-size: 17px; line-height: 1.25; }
.wx-pv-head h3 small { display: block; font-size: 12px; font-weight: 600; color: var(--wx-a); }
.wx-pv-meta { margin: 0 0 12px; color: var(--wx-muted); font-size: 12px; }
.wx-pv-img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; }
.wx-pv-body p { margin: 0 0 10px; overflow-wrap: anywhere; }
.wx-pv-empty { color: var(--wx-muted); text-align: center; margin-top: 30px; }

/* Icônes : dossier dessiné en CSS, fiche avec glyphe, miniatures de projet */
.wx-ic { display: inline-block; flex: none; }
.wx-folder { position: relative; width: 44px; height: 34px; border-radius: 4px 4px 6px 6px; background: linear-gradient(180deg, #ffd978, #f2b134); box-shadow: inset 0 1px 0 #fff8; }
.wx-folder::before { content: ''; position: absolute; left: 0; top: -6px; width: 48%; height: 8px; border-radius: 4px 4px 0 0; background: #e8a13a; }
.wx-folder.sm { width: 18px; height: 14px; border-radius: 2px 2px 3px 3px; }
.wx-folder.sm::before { top: -3px; height: 4px; border-radius: 2px 2px 0 0; }
.wx-file { display: grid; place-items: center; width: 34px; height: 42px; border-radius: 4px; background: var(--wx-bg); border: 1.5px solid var(--fc, #6b8aa8); color: var(--fc, #6b8aa8); font-size: 17px; }
.wx-thumb { display: block; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px #0003; height: auto; }

.wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
.wx-grid .wx-item { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; text-align: center; min-height: 118px; animation: wxIn .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
.wx-grid .wx-item .wx-thumb { width: 104px; aspect-ratio: 16/10; }
.wx-grid .wx-item .wx-ic { height: 52px; display: grid; place-items: center; align-content: center; }
.wx-grid .wx-item .wx-folder { margin-top: 10px; }
.wx-nm { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
.wx-nm small { font-size: 11px; color: var(--wx-a); font-weight: 700; }
.wx-nm b { font-weight: 500; font-size: 12.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.wx-item:hover { background: var(--wx-hover); }
.wx-item[aria-selected="true"] { background: var(--wx-sel); border-color: color-mix(in srgb, var(--wx-a) 40%, transparent); }

.wx-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wx-table th { text-align: start; font-weight: 600; font-size: 12px; color: var(--wx-muted); border-bottom: 1px solid var(--wx-line); padding: 0; }
.wx-table th button, .wx-table th > span { display: block; width: 100%; padding: 6px 10px; border: 0; background: none; text-align: start; font-weight: 600; cursor: pointer; }
.wx-table th > span { cursor: default; }
.wx-table th button:hover { background: var(--wx-hover); }
.wx-table th i { font-style: normal; margin-inline-start: 6px; }
.wx-table th:nth-child(1) { width: 44%; } .wx-table th:nth-child(2) { width: 24%; } .wx-table th:nth-child(3) { width: 20%; }
.wx-table td { padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wx-muted); font-size: 12.5px; }
.wx-table tr.wx-item { cursor: pointer; animation: wxIn .3s ease both; animation-delay: calc(var(--i, 0) * 18ms); }
.wx-table td.wx-name { display: flex; align-items: center; gap: 10px; color: var(--wx-fg); font-size: 13.5px; }
.wx-table .wx-name .wx-thumb { width: 38px; height: 24px; }
.wx-table .wx-name .wx-file { width: 20px; height: 24px; font-size: 11px; }
.wx-table .wx-name .wx-folder { width: 24px; height: 18px; margin-top: 4px; }
.wx-table .wx-name .wx-folder::before { top: -4px; height: 5px; }
.wx-table .wx-name span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wx-table .wx-name small { font-weight: 700; color: var(--wx-a); }
.wx-table td.wx-size { text-align: end; }

.wx-empty { display: grid; justify-items: center; gap: 6px; padding: 50px 20px; color: var(--wx-muted); }
.wx-empty span { font-size: 36px; }
.wx-status { flex: none; padding: 5px 14px; border-top: 1px solid var(--wx-line); font-size: 12px; color: var(--wx-muted); }
.wx-menu { position: absolute; z-index: 5; min-width: 200px; padding: 5px; border: 1px solid var(--wx-line); border-radius: 10px; background: var(--wx-bg); box-shadow: 0 16px 36px #0a1f3a40; animation: wxIn .15s ease both; }
.wx-menu[hidden] { display: none; }
.wx-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px 7px 6px; border: 0; border-radius: 6px; background: none; text-align: start; cursor: pointer; }
.wx-menu button i { width: 14px; font-style: normal; font-size: 8px; color: var(--wx-a); text-align: center; }
.wx-menu button:hover, .wx-menu button:focus-visible { background: var(--wx-hover); outline: none; }
.wx-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--wx-line); }
@keyframes wxIn { from { opacity: 0; transform: translateY(6px); } }

/* Écran étroit : le volet de navigation passe au-dessus du contenu, l'aperçu en bas */
@media (max-width: 700px) {
  .window[data-id=files] { width: calc(100vw - 80px); }
  .wx-search { width: 130px; }
  .wx-tree { width: 140px; }
  .wx-preview { position: absolute; inset: auto 0 0 0; width: auto; max-height: 55%; z-index: 4; border-inline-start: 0; border-top: 1px solid var(--wx-line); background: var(--wx-bg); }
  .wx-table th:nth-child(2), .wx-table td:nth-child(2), .wx-table th:nth-child(3), .wx-table td:nth-child(3) { display: none; }
  .wx-table th:nth-child(1) { width: 70%; }
}
@media (max-width: 480px) { .wx-tree { display: none; } .wx-search { width: 100px; } }
@media (prefers-reduced-motion: reduce) { .wx *, .wx-preview { animation: none !important; transition: none !important; } }

/* Fiche de projet sans image : dégradé du projet + icône (même visuel que les cartes de projets) */
.wx-ph { display: grid; place-items: center; color: #ffffffd9; font-size: 20px; background: linear-gradient(135deg, var(--pg-g1, #8ab6dd), var(--pg-g2, #3a78b8)); }
.wx-grid .wx-item .wx-ph { width: 104px; aspect-ratio: 16/10; }
.wx-table .wx-name .wx-ph { width: 38px; height: 24px; font-size: 12px; }
html.lang-rtl .wx { direction: rtl; }