/* Mes fichiers (files.js) : la grille à vignettes, la liste à colonnes, la sélection et sa barre,
   le menu, les imports, les aperçus. */

/* En-tête, deux lignes : le champ de recherche, « Nouveau » logé à sa droite ; le fil d'Ariane (ou
   le résumé) et la barre d'affichage, le tri et la vue ensemble. */
.fm-tools { position: relative; align-items: center; }
.fm-tools .apps-search { padding-right: 124px; }
/* #files-tools : plus fort que la règle des écrans tactiles de style.css (:is(… #send …) { position:
   relative }), qui le sortait du champ. */
#files-tools .fm-new.pill-button { position: absolute; top: 0; bottom: 0; right: 4px; margin: auto 0; height: 32px; gap: 6px; padding: 0 14px 0 11px;
  font-size: 13.5px; font-weight: 600; line-height: 1; }
.fm-new svg { width: 16px; height: 16px; flex: none; display: block; }
.fm-new span { display: block; line-height: 1; }
/* Le texte des commandes, centré sur ses majuscules et non sur sa boîte (la place réservée sous la
   ligne le faisait paraître trop bas à côté des icônes). Sans text-box : remonté d'un pixel. */
.fm-sort-label, .fm-new span, .fm-restore span, .fm-empty-trash span { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .fm-sort-label, .fm-new span, .fm-restore span, .fm-empty-trash span { translate: 0 -1px; }
}
.fm-bar { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: -4px; }
.fm-crumbs { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fm-crumbs::-webkit-scrollbar { display: none; }
.fm-crumbs .crumb { flex: none; }
.fm-count { flex: 1 1 auto; min-width: 0; color: var(--t2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.fm-count[hidden], .fm-crumbs[hidden] { display: none; }
.fm-controls { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Le rail des commandes, du fond du champ de recherche au-dessus (--bg2, sans trait) : la barre
   d'affichage (le tri, la vue et la corbeille dedans, sans fond à eux). */
.fm-rail { display: inline-flex; align-items: center; height: 36px; border-radius: 11px; background: var(--bg2); }
.fm-toolbar { gap: 2px; padding: 3px; }
.fm-ctl.fm-trash-btn { padding: 0 10px; color: var(--t2); } /* comme les boutons de la vue à côté */
.fm-trash-btn:hover { color: var(--t1); }
.fm-empty-trash { height: 36px; gap: 7px; color: var(--error); }
.fm-empty-trash svg { width: 16px; height: 16px; }
.fm-empty-trash[hidden] { display: none; }
/* Dans la corbeille : ni « Nouveau », ni affichage ; « Vider la corbeille » à leur place. */
.in-trash .fm-new, .in-trash .fm-toolbar { display: none; }
.in-trash .fm-tools .apps-search { padding-right: 16px; }

/* La corbeille : une ligne par élément, d'où il vient et quand il sera effacé, Restaurer. */
.file-list.fm-trash { display: grid; }
.fm-trash-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 6px 6px 6px 8px; border-bottom: 1px solid var(--line); }
.fm-trash-row .fm-thumb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: color-mix(in srgb, var(--t1) 5%, var(--bg2)); color: var(--t2); }
.fm-trash-row .fm-thumb svg { width: 20px; height: 20px; }
.fm-trash-row .fm-name { display: block; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.fm-trash-row .fm-meta { white-space: normal; }
.fm-trash-actions { display: flex; align-items: center; gap: 4px; }
.fm-restore { gap: 6px; height: 34px; }
.fm-restore svg { width: 15px; height: 15px; }
.fm-trash-remove { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; background: none; color: var(--t2); }
.fm-trash-remove svg { width: 16px; height: 16px; }
.fm-trash-remove:hover { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }

/* Le message d'une action (« mis à la corbeille · Annuler »). */
.fm-toast { position: fixed; left: 50%; bottom: 24px; z-index: 45; translate: -50% 0; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--t1); color: var(--bg); font-size: 13.5px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); animation: fm-bar-in .2s cubic-bezier(.2, .8, .2, 1); }
.fm-toast[hidden] { display: none; }
.fm-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-toast-btn { flex: none; height: 32px; padding: 0 12px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); font-weight: 600; white-space: nowrap; }
.fm-toast-btn:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }
.fm-ctl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 100%; min-width: 30px; padding: 0 10px; border-radius: 8px;
  background: none; color: var(--t1); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .15s ease; }
.fm-ctl:hover { background: color-mix(in srgb, var(--t1) 7%, transparent); }
.fm-ctl svg { width: 16px; height: 16px; flex: none; display: block; }
.fm-ctl.fm-sort { padding-right: 7px; } /* la flèche du sens touche presque la vue : pas d'espace perdu entre les deux */
.fm-sort-dir { display: grid; place-items: center; margin-left: -2px; color: var(--t2); transition: rotate .2s ease; }
.fm-sort-dir.asc { rotate: 180deg; }
.fm-ctl .fm-sort-dir svg { width: 12px; height: 12px; }
.fm-toolbar .segmented { height: 100%; padding: 0; background: none; box-shadow: none; }
.fm-toolbar .segmented::before { top: 0; bottom: 0; left: 0; width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); }
.fm-views button { display: grid; place-items: center; padding: 0 10px; height: 100%; }
.fm-views svg { width: 16px; height: 16px; display: block; }

/* --- Grille --- */
.file-list.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.fm-grid .fm-item { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: 16px; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease; outline: none; user-select: none; -webkit-user-select: none; }
.fm-grid .fm-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; overflow: hidden;
  background: color-mix(in srgb, var(--t1) 5%, var(--bg2)); }
.fm-grid .fm-thumb > .tool-icon svg { width: 38px; height: 38px; }
.fm-grid .fm-thumb.folder { color: var(--t2); }
.fm-grid .fm-thumb.folder svg { width: 48px; height: 48px; }
.fm-text { display: grid; gap: 2px; min-width: 0; padding: 0 4px 2px; }
.fm-name { font-size: 13px; line-height: 1.3; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-meta { font-size: 11.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-grid .file-input { font-size: 13px; padding: 4px 8px; border-radius: 8px; width: 100%; }

/* La vignette : l'image (recadrée) ou la première page (en haut, sur fond blanc), l'icône dessous
   tant qu'elle charge. */
.fm-pic { position: absolute; inset: 0; background: none; }
.fm-pic img { width: 100%; height: 100%; object-fit: cover; }
.fm-pic.page { background: #fff; }
.fm-pic.page img { object-position: top; }
.fm-pic.loading { background: linear-gradient(90deg, var(--skel) 30%, var(--skel-hi) 50%, var(--skel) 70%) 0 0 / 300% 100%; animation: skel-shine 1.5s ease-in-out infinite; }
.fm-thumb.has-pic > .tool-icon { visibility: hidden; }
.fm-grid .fm-thumb.has-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 8%, transparent); pointer-events: none; }

/* --- Liste --- */
.file-list.fm-list { display: grid; }
.fm-list .fm-head, .fm-list .fm-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 96px 38px; align-items: center; gap: 4px; min-height: 50px; padding: 0 6px; }
.fm-list .fm-head { position: sticky; top: 0; z-index: 2; min-height: 40px; background: var(--bg); border-bottom: 1px solid var(--line); }
.fm-col { justify-self: start; padding: 4px 6px; border-radius: 6px; background: none; color: var(--t2); font-size: 12.5px; font-weight: 600; }
.fm-col:hover { color: var(--t1); background: var(--bg2); }
.fm-col-size { justify-self: end; text-align: right; }
.fm-list .fm-item { position: relative; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease; }
.fm-cell { min-width: 0; font-size: 13px; color: var(--t2); }
.fm-cell.fm-col-name { display: flex; align-items: center; gap: 12px; color: var(--t1); }
.fm-list .fm-name { font-size: 13.5px; -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
.fm-list .fm-thumb { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--t1) 5%, var(--bg2)); }
.fm-list .fm-thumb > .tool-icon svg { width: 20px; height: 20px; }
.fm-list .fm-thumb.folder { color: var(--t2); }
.fm-list .fm-thumb.folder svg { width: 22px; height: 22px; }
.fm-list .fm-cell.fm-col-size { text-align: right; }
.fm-list .file-input { font-size: 13.5px; padding: 4px 8px; border-radius: 8px; flex: 1; }

/* --- États : survol, focus, sélection, glisser-déposer, ouverture --- */
@media (hover: hover) { .fm-item:hover { background: var(--bg2); } }
.fm-item:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.fm-item.selected { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.fm-grid .fm-item.selected { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.fm-item.dragging { opacity: .45; }
.fm-item.drop { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fm-item.opening .fm-thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--bg) 60%, transparent) 50%, transparent 80%) 0 0 / 300% 100%; animation: skel-shine 1.1s ease-in-out infinite; }

/* La case à cocher : au survol, sur l'élément choisi, et partout pendant une sélection. */
.fm-check { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; color: transparent;
  background: color-mix(in srgb, var(--bg) 75%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t1) 40%, transparent);
  opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.fm-check svg { width: 13px; height: 13px; }
.fm-grid .fm-check { position: absolute; top: 15px; left: 15px; z-index: 2; backdrop-filter: blur(4px); }
.fm-list .fm-check { justify-self: center; }
@media (hover: hover) { .fm-item:hover .fm-check, .fm-head:hover .fm-check { opacity: 1; } }
.fm-item:focus-visible .fm-check, .selecting .fm-check { opacity: 1; }
.fm-check[aria-checked="true"], .fm-check.on { opacity: 1; color: var(--accent-fg); background: var(--accent); box-shadow: none; }

/* Le menu « ⋮ ». */
.fm-kebab { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: none; color: var(--t2); opacity: 0; transition: opacity .15s ease, background-color .15s ease; }
.fm-kebab svg { width: 17px; height: 17px; }
.fm-kebab:hover { color: var(--t1); background: color-mix(in srgb, var(--t1) 9%, transparent); }
.fm-grid .fm-kebab { position: absolute; top: 12px; right: 12px; z-index: 2; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(4px); }
@media (hover: hover) { .fm-item:hover .fm-kebab { opacity: 1; } }
.fm-item:focus-visible .fm-kebab { opacity: 1; }
@media (hover: none) { .fm-list .fm-kebab { opacity: 1; } }

/* Le menu (« ⋮ », clic droit, tri), posé à côté de ce qui l'ouvre. */
.file-menu.fm-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 60; min-width: 190px; animation: fm-menu-in .12s ease-out; }
@keyframes fm-menu-in { from { opacity: 0; transform: translateY(-3px); } }

/* --- La barre de la sélection --- */
.fm-selbar { position: sticky; bottom: 16px; z-index: 6; justify-self: center; display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); box-shadow: var(--surface-shadow); animation: fm-bar-in .2s cubic-bezier(.2, .8, .2, 1); }
.fm-selbar[hidden] { display: none; }
/* Le menu d'un élément ouvert : la barre s'efface, l'élément visé reste marqué. */
.menu-shown .fm-selbar { display: none; }
.fm-item.menu-open { background: var(--bg2); }
.fm-item.menu-open .fm-kebab { opacity: 1; }
.fm-selbar-clear { width: 34px; height: 34px; border-radius: 50%; }
.fm-selbar-clear svg { width: 16px; height: 16px; }
.fm-selbar-count { padding: 0 10px 0 2px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fm-selbar-actions { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fm-selbar-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: none; color: var(--t1); font-size: 13px; white-space: nowrap; }
.fm-selbar-btn svg { width: 16px; height: 16px; flex: none; }
.fm-selbar-btn:hover { background: color-mix(in srgb, var(--t1) 8%, transparent); }
.fm-selbar-btn.danger { color: var(--error); }
@keyframes fm-bar-in { from { opacity: 0; transform: translateY(12px); } }

/* --- Imports --- */
.fm-uploads { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: min(340px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 14px 16px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--surface-border); box-shadow: var(--surface-shadow); }
.fm-uploads[hidden] { display: none; }
.fm-up { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 13px; }
.fm-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-up-state { color: var(--t2); font-size: 12px; }
.fm-up-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--t1) 10%, transparent); }
.fm-up-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.fm-up.done .fm-up-fill { width: 100%; }
.fm-up.failed .fm-up-state { color: var(--error); }
.fm-up.failed .fm-up-fill { background: var(--error); width: 100%; }

/* Des fichiers de l'ordinateur glissés sur la page : le cadre de la page (posé par showDropzone,
   files.js), léger, et en bas où ils vont. Un dossier survolé se marque lui-même (.drop). */
.fm-dropzone { position: fixed; z-index: 30; display: none; align-items: flex-end; justify-content: center; padding-bottom: 22px; border-radius: 18px; pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fm-dropzone-label { max-width: calc(100% - 32px); padding: 9px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-fg);
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
.importing .fm-dropzone { display: flex; animation: fm-drop-in .15s ease-out; }
@keyframes fm-drop-in { from { opacity: 0; } }

/* --- Aperçus : texte, tableau, audio ; « Déplacer vers » --- */
dialog.viewer.fm-text-viewer { width: min(960px, calc(100vw - 32px)); }
.fm-text-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 28px; }
.fm-text-body.markdown { font-size: 15px; line-height: 1.6; }
.fm-pre { margin: 0; font: 13px/1.55 ui-monospace, "SF Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; tab-size: 4; }
.fm-cut { margin: 16px 0 0; }
.fm-table-wrap { overflow: auto; border-radius: 10px; border: 1px solid var(--line); }
.fm-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.fm-table th, .fm-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.fm-table th { position: sticky; top: 0; background: var(--table-head); font-weight: 600; }
.fm-table tbody tr:nth-child(even) { background: var(--table-stripe); }
dialog.viewer.fm-audio-viewer { width: min(520px, calc(100vw - 32px)); height: auto; }
.fm-audio { padding: 26px 24px 30px; }
dialog.viewer.fm-move { width: min(440px, calc(100vw - 32px)); height: min(560px, calc(100vh - 48px)); }
.fm-tree { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 2px; padding: 8px; }
.fm-tree-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px 9px calc(12px + var(--depth, 0) * 18px); border-radius: 9px;
  background: none; color: var(--t1); font-size: 14px; text-align: left; }
.fm-tree-item svg { width: 17px; height: 17px; flex: none; color: var(--t2); }
.fm-tree-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-tree-item:hover { background: var(--bg2); }
.fm-tree-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.fm-move-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  /* « Nouveau » : son « + » seul, rond, dans le champ de recherche. */
  .fm-tools .apps-search { padding-right: 54px; }
  #files-tools .fm-new.pill-button { width: 36px; height: 36px; padding: 0; }
  /* Le tri : son nom et son sens, sans l'icône (la place va au résumé). */
  .fm-sort > svg { display: none; }
  .fm-ctl { padding: 0 9px; }
  .fm-count { font-size: 13px; }
  .fm-new span { display: none; }
  .fm-new svg { width: 18px; height: 18px; }
  .fm-rail { height: 38px; }
  .fm-empty-trash span, .fm-restore span { display: none; }
  .fm-empty-trash, .fm-restore { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .fm-toast { bottom: max(16px, env(safe-area-inset-bottom)); }
  .file-list.fm-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .fm-grid .fm-item { padding: 6px; }
  .fm-grid .fm-kebab { opacity: 1; width: 34px; height: 34px; top: 9px; right: 9px; }
  .fm-grid .fm-check { top: 12px; left: 12px; width: 24px; height: 24px; }
  .fm-list .fm-head, .fm-list .fm-item { grid-template-columns: 34px minmax(0, 1fr) 76px 40px; min-height: 56px; }
  .fm-list .fm-col-date { display: none; }
  .fm-list .fm-kebab { width: 40px; height: 40px; }
  .fm-selbar { bottom: max(12px, env(safe-area-inset-bottom)); padding: 4px; }
  .fm-selbar-btn span { display: none; }
  .fm-selbar-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .fm-uploads { right: 16px; left: 16px; width: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-selbar, .fm-menu, .importing .fm-dropzone, .fm-pic.loading, .fm-item.opening .fm-thumb::before { animation: none; }
}