:root {
  /* bg = corps de la page (blanc pur en clair) ; chrome-bg = sidebar/topbar
     (légèrement grisé) — volontairement distincts du gris de fond par
     défaut de Material, pour un contraste net entre chrome et contenu. */
  --bg: #ffffff;
  --chrome-bg: #f1f3f4;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --border: #dadce0;
  --text: #202124;
  --text-muted: #5f6368;
  --accent: #1a73e8;
  --accent-hover: #1765cc;
  --accent-text: #ffffff;
  --danger: #d93025;
  --danger-bg: #fce8e6;
  --success: #188038;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 30, 0.07);
  --shadow: 0 1px 2px rgba(20, 24, 30, 0.06), 0 4px 16px rgba(20, 24, 30, 0.06);
  --shadow-lg: 0 4px 8px rgba(20, 24, 30, 0.07), 0 16px 40px rgba(20, 24, 30, 0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131314;
    --chrome-bg: #1e1f20;
    --surface: #1e1f20;
    --surface-2: #282a2c;
    --surface-3: #333537;
    --border: #3c4043;
    --text: #e8eaed;
    --text-muted: #9aa0a6;
    --accent: #8ab4f8;
    --accent-hover: #aecbfa;
    --accent-text: #062e6f;
    --danger: #f28b82;
    --danger-bg: #3a2422;
    --success: #81c995;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.45);
  }
}
/* Mêmes valeurs que le bloc @media ci-dessus (échantillonnées sur Drive
   lui-même) — un seul jeu de couleurs sombres, pas deux qui divergent selon
   qu'on suit le système ou qu'on a cliqué le bouton thème. */
:root[data-theme="dark"] {
  --bg: #131314;
  --chrome-bg: #1e1f20;
  --surface: #1e1f20;
  --surface-2: #282a2c;
  --surface-3: #333537;
  --border: #3c4043;
  --text: #e8eaed;
  --text-muted: #9aa0a6;
  --accent: #8ab4f8;
  --accent-hover: #aecbfa;
  --accent-text: #062e6f;
  --danger: #f28b82;
  --danger-bg: #3a2422;
  --success: #81c995;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
}
button, input { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; }
.icon { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------------------------------------------------------------- Login */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-brand .icon { width: 28px; height: 28px; color: var(--accent); }
.login-brand h1 { font-size: 19px; margin: 0; }
.field-label { display: block; font-size: 12.5px; color: var(--text-muted); margin: 14px 0 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
.btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 500;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-block { width: 100%; margin-top: 18px; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ------------------------------------------------------------- Topbar */
/* Sans bordure, même fond que la page : le topbar de Drive n'est pas un
   panneau posé au-dessus, il se fond dans le reste. */
#topbar {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  /* Léger cran au-dessus du contenu — assez pour distinguer chrome et
     contenu sans revenir à une bordure dure. */
  background: var(--chrome-bg);
}
#brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 19px; white-space: nowrap; flex-shrink: 0; }
#brand .icon { color: var(--accent); width: 26px; height: 26px; }
/* Centré façon Drive, pas juste "flex:1 collé à gauche du bloc suivant". */
#search-box { flex: 1; max-width: 720px; margin: 0 auto; position: relative; }
#search-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
#search-input {
  /* surface-3 : le seul cran garanti différent de --chrome-bg dans les
     deux thèmes (surface==chrome-bg en sombre, surface-2==chrome-bg en
     clair — utiliser l'un ou l'autre ferait disparaître la barre). */
  padding-left: 44px; background: var(--surface-3); border: none; border-radius: 999px;
  height: 46px;
}
#search-input:focus { box-shadow: 0 0 0 2px var(--accent); }
/* Discret : une action secondaire (les données se rechargent déjà seules
   après upload/déplacement/etc.), pas une action principale — un bouton
   plein accent à côté de la recherche attirait l'œil plus qu'un simple
   rafraîchissement ne le mérite. */
#btn-refresh {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-weight: 500;
  flex-shrink: 0;
}
#btn-refresh:hover { background: var(--surface-3); color: var(--text); }
#btn-refresh .icon { width: 16px; height: 16px; }
#user-menu { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
#user-name { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
/* Circulaires, façon boutons d'icône de la barre du haut de Drive — pas de
   simples carrés à coins arrondis. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; border: none; background: transparent; color: var(--text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
/* surface-3, pas surface-2 : reste visible même sur un fond qui utilise déjà
   surface-2 (chrome sidebar/topbar en clair, cartes de fichiers). */
.icon-btn:hover { background: var(--surface-3); }
.icon-btn:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------- Layout */
#layout { display: flex; height: calc(100vh - 64px); }
/* Pas de bordure : la sidebar de Drive se fond dans la page, seule la
   pastille de l'item actif crée une séparation visuelle. */
#sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--chrome-bg);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
/* Bouton "+ Nouveau" : pilule blanche avec ombre, jamais teintée à
   l'accent — c'est délibérément le seul bouton "hors thème" de l'appli.
   Centré dans la colonne : posé à gauche, il déséquilibrait une barre
   dont toutes les autres entrées sont pleine largeur. */
.sidebar-action {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 26px; border-radius: 999px; border: none;
  font-weight: 500; width: fit-content;
  margin: 4px auto 14px;
}
.dropdown:has(> .sidebar-action) { display: flex; justify-content: center; }
.sidebar-action.primary {
  background: #fff; color: #3c4043; box-shadow: var(--shadow);
}
:root[data-theme="dark"] .sidebar-action.primary,
:root:not([data-theme="light"]) .sidebar-action.primary { background: #e3e3e3; color: #1f1f1f; }
.sidebar-action.primary:hover { box-shadow: var(--shadow-lg); }
.sidebar-action.primary .icon { color: var(--accent); }
.sidebar-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 16px 12px 4px;
  border: none; background: none; padding: 2px 0; text-align: left; cursor: pointer;
}
.sidebar-section-label:hover { color: var(--text); }
.sidebar-section-label-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 4px 4px 12px; }
.sidebar-section-label-row .sidebar-section-label { margin: 0; }
.sidebar-section-add { width: 26px; height: 26px; color: var(--text-muted); }
.drive-item-row { display: flex; align-items: center; }
.drive-unfold { width: 26px; height: 26px; color: var(--text-muted); flex-shrink: 0; margin-right: 4px; opacity: 0; transition: opacity var(--transition-fast); }
.drive-item-row:hover .drive-unfold { opacity: 1; }
.sidebar-section-add:hover { color: var(--text); }
.sidebar-empty-hint { padding: 6px 12px; color: var(--text-muted); font-size: 12.5px; }

/* La corbeille n'est pas un dossier comme les autres : ce qu'on y met est
   en instance de disparaître. Le trait dégradé marque cette rupture — il
   s'efface vers les bords pour rester une respiration, pas une barre. */
.sidebar-separateur {
  height: 1px; margin: 12px 18px 12px 22px; border: 0; flex-shrink: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 22%,
    color-mix(in srgb, var(--accent) 75%, transparent) 50%,
    color-mix(in srgb, var(--accent) 30%, transparent) 78%,
    transparent 100%);
}
/* Pilule pleine largeur, coins totalement arrondis à droite — comme les
   entrées de nav de Drive, pas un simple item de liste rectangulaire. */
.drive-item {
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px;
  border-radius: 0 999px 999px 0; border: none; background: transparent;
  color: var(--text); text-align: left; width: 100%; font-size: 14px; font-weight: 500;
}
.drive-item .icon { color: var(--text-muted); width: 21px; height: 21px; }
.drive-item:hover { background: var(--surface-3); }
.drive-item.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent); font-weight: 600;
}
.drive-item.active .icon { color: var(--accent); }
.drive-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------- Nav fixe + stockage */
#sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
#storage-widget { margin-top: auto; padding: 10px 12px 4px 22px; }
.storage-label { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 13.5px; margin-bottom: 10px; }
.storage-label .icon { width: 18px; height: 18px; }
.storage-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.storage-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width var(--transition-base); }
.storage-bar-fill.danger { background: var(--danger); }
.storage-text { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
/* Bouton pilule "Augmenter l'espace de stockage" sous la jauge, façon Drive
   (voir inspiration/Fort-Docs/"partagé avec moi.PNG") — renvoie vers les
   offres Atlas / Atlas+ hébergées côté Atlas. */
.storage-upgrade {
  display: inline-block; margin: 12px 0 4px; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; color: var(--accent); text-decoration: none; text-align: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.storage-upgrade:hover { background: var(--surface-2); border-color: var(--accent); }

/* --------------------------------------------------------------- Avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; color: #fff; font-weight: 600; text-transform: uppercase;
}
.item-modified {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: 11.5px; color: var(--text-muted); overflow: hidden;
}
.item-modified span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------- Page Accueil */
/* Pas de max-width : la grille doit utiliser toute la largeur disponible,
   comme la vue "parcourir" — un plafond ici faisait tenir moins de
   colonnes que Drive sur un écran large. */
.home-page { padding: 8px clamp(16px, 4vw, 48px) 40px; width: 100%; }
.home-page { display: flex; flex-direction: column; align-items: center; }
.home-title { font-size: 24px; font-weight: 400; margin: 24px 0 4px; text-align: center; }
.home-subtitle { font-size: 14px; color: var(--text-muted); text-align: center; margin: 0 0 20px; }
.home-search {
  width: 100%; max-width: 720px; position: relative; margin-bottom: 18px;
}
.home-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.home-search input {
  width: 100%; height: 48px; padding-left: 46px; border: none; border-radius: 999px;
  background: var(--surface-2); color: var(--text); outline: none; font-size: 14px;
}
.home-search input:focus { background: var(--surface-3); }
.home-filters { display: flex; gap: 10px; margin-bottom: 30px; }
.home-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: 999px; border: none; background: var(--surface-2); color: var(--text);
  font-size: 12.5px;
}
.home-filter-chip:hover { background: var(--surface-3); }
.home-filter-chip .icon { width: 15px; height: 15px; color: var(--text-muted); }
.home-page > .home-empty, .home-page > .home-section-title, .home-page > .suggest-folders, .home-page > .home-files-grid {
  width: 100%;
}
.home-section-title { font-size: 14px; font-weight: 600; margin: 28px 0 12px; }
.home-empty { color: var(--text-muted); padding: 40px 0; }
.home-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }

/* ------------------------------------------------- Partagés avec moi
   Liste à colonnes façon Drive (voir inspiration/Fort-Docs/"partagé avec
   moi.PNG") : Nom | Partagé par | Date de partage, groupée par période. */
.shared-page { align-items: stretch; }
.shared-page .home-title { text-align: left; margin-bottom: 18px; }
/* La banderole de sélection se superpose à l'en-tête de colonnes au lieu de
   s'insérer dans le flux — sinon toutes les lignes descendent au premier
   clic et le second clic d'un double-clic tombe à côté (même piège que la
   banderole du navigateur de fichiers, voir #selection-bar). */
.shared-head-wrap { position: relative; }
.shared-head {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  color: var(--text-muted); font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
#shared-sel-bar {
  position: absolute; inset: -4px 0 0; z-index: 4;
  display: flex; align-items: center; gap: 2px;
  padding: 4px 10px 4px 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px;
}
#shared-sel-bar[hidden] { display: none; }
#shared-sel-bar .sel-count { font-weight: 500; margin-right: auto; padding-left: 6px; }
#shared-sel-bar .sel-actions { display: flex; align-items: center; gap: 2px; }
#shared-sel-bar .icon-btn { width: 34px; height: 34px; }
.sh-name { flex: 1; }
.sh-by { width: 220px; }
.sh-date { width: 150px; }
.sh-actions-sp { width: 40px; flex-shrink: 0; }
.shared-group-title { font-size: 13px; color: var(--text-muted); margin: 18px 0 4px; padding: 0 12px; }
.shared-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.shared-row:hover { background: var(--surface-2); }
.shared-row.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.shared-row .item-thumb-wrap, .shared-row .item-icon-wrap { width: 26px; height: 26px; flex-shrink: 0; border-radius: 5px; }
.shared-row .thumb-fallback-icon .icon { width: 16px; height: 16px; }
.shared-row .icon-folder, .shared-row .icon-file { width: 20px; height: 20px; }
.shared-row .item-name { flex: 1; text-align: left; -webkit-line-clamp: 1; font-size: 13.5px; }
.shared-by { width: 220px; display: flex; align-items: center; gap: 8px; overflow: hidden; font-size: 12.5px; color: var(--text-muted); }
.shared-by-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-by .avatar { flex-shrink: 0; }
.shared-date { width: 150px; font-size: 12.5px; color: var(--text-muted); }
.shared-row-actions { width: 40px; flex-shrink: 0; display: flex; justify-content: flex-end; opacity: 0; transition: opacity var(--transition-fast); }
.shared-row:hover .shared-row-actions, .shared-row.selected .shared-row-actions { opacity: 1; }
@media (max-width: 700px) {
  .sh-by, .shared-by { display: none; }
  .sh-date, .shared-date { width: 90px; }
}

.suggest-folders { display: flex; flex-wrap: wrap; gap: 12px; }
.suggest-folder {
  display: flex; align-items: center; gap: 12px; width: 300px; max-width: 100%;
  padding: 12px 10px 12px 16px; border: 1px solid transparent; border-radius: 10px;
  background: var(--surface-2); cursor: pointer; position: relative;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.suggest-folder:hover { background: var(--surface-3); box-shadow: var(--shadow); }
.suggest-folder .icon-folder { width: 32px; height: 32px; color: var(--accent); flex-shrink: 0; }
.suggest-folder-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.suggest-folder-text .item-name { text-align: left; -webkit-line-clamp: 1; font-size: 13.5px; }
.suggest-folder-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-folder .item-menu-btn { position: static; }

#content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#breadcrumb { display: flex; align-items: center; gap: 4px; padding: 14px 20px 0; font-size: 14px; flex-wrap: wrap; }
#breadcrumb button { background: none; border: none; color: var(--text-muted); padding: 4px 6px; border-radius: 6px; }
#breadcrumb button:hover { background: var(--surface-2); color: var(--text); }
#breadcrumb button.current { color: var(--text); font-weight: 600; }
#breadcrumb .icon { width: 14px; height: 14px; color: var(--text-muted); }

#toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; gap: 10px; }
#toolbar-left { display: flex; align-items: center; gap: 8px; }
#view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#view-toggle button { border: none; background: var(--surface); padding: 7px 10px; color: var(--text-muted); }
#view-toggle button.active { background: var(--surface-2); color: var(--accent); }

#dropzone { flex: 1; overflow-y: auto; padding: 8px 20px 40px; position: relative; }
#dropzone.dragging::after {
  content: "Déposer pour importer ici";
  position: absolute; inset: 10px; border: 2px dashed var(--accent); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}
#empty-state { color: var(--text-muted); text-align: center; padding: 60px 20px; }

/* --------------------------------------------------------------- Grid */
/* Dossiers et fichiers dans deux grilles séparées, empilées — jamais
   mélangés dans une seule grille : une carte-dossier (rangée compacte,
   basse) qui partagerait une ligne de grille avec une carte-fichier (grande
   vignette) hériterait de la hauteur de cette ligne et s'étirerait pour la
   remplir, perdant sa taille compacte. Voir browser.js:renderItems(). */
#item-grid.view-grid { display: flex; flex-direction: column; gap: 22px; }
.folders-row, .files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
/* Une carte-dossier est une rangée horizontale (icône + nom + ⋮) : sous
   ~220px il ne reste qu'une cinquantaine de pixels pour le nom, réduit à
   "Do…". On garde donc un plancher plus haut que pour les fichiers (dont la
   vignette reste lisible en petit) : la grille retire une colonne au lieu de
   comprimer, jusqu'à une seule pleine largeur sur mobile. */
.folders-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.files-grid { gap: 16px; }
/* Plat, façon Drive : le fond (surface-2, un cran plus clair que la page)
   fait toute la forme de la carte, pas une bordure visible en permanence —
   celle-ci n'apparaît qu'au survol/à la sélection. */
.item-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
}
.item-card { transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.item-card:hover { background: var(--surface-3); box-shadow: var(--shadow); }
.item-card.selected, .view-list .item-row.selected {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
/* Dossiers dans une grille : rangée compacte icône+nom, pas une carte
   verticale avec vignette — comme sur "Mon Drive" (les vignettes ne
   concernent que les fichiers). */
.item-card.folder-card {
  flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px;
}
.item-card.folder-card .item-name {
  text-align: left; -webkit-line-clamp: 1; flex: 1; font-size: 13px;
}
.item-card.folder-card .icon-folder { width: 28px; height: 28px; }
.item-card.folder-card .item-menu-btn { position: static; margin-left: auto; width: 32px; height: 32px; }
.view-list .item-row { transition: background var(--transition-fast); }
.item-card .icon-folder, .item-card .icon-file { width: 34px; height: 34px; color: var(--text-muted); }
.item-card .icon-folder { color: var(--accent); }
.item-name { font-size: 12.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
/* Flottant uniquement sur une carte (grille), qui est bien position:relative.
   En vue liste, .item-row n'était pas positionnée : le bouton s'échappait
   jusqu'à #dropzone et les "⋮" de toutes les lignes se superposaient en haut
   à droite de la zone de contenu. Là-bas il reste dans le flux, à sa place
   dans .item-row-actions. */
.item-card .item-menu-btn { position: absolute; top: 4px; right: 4px; }
/* En-tête (icône de format + nom + menu) au-dessus de la vignette, comme
   Drive — plus le nom en dessous, plus le menu en survol flottant. */
.item-card-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.item-card-head .item-name {
  flex: 1; min-width: 0; text-align: left; -webkit-line-clamp: 1; font-size: 13px;
}
.item-card-head .icon-type-badge { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.item-card-head .item-menu-btn { position: static; margin-left: auto; width: 30px; height: 30px; flex-shrink: 0; }
.item-name-edit {
  font: inherit; font-size: 12.5px; text-align: center; width: 100%; background: var(--surface);
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px; color: inherit;
}
.view-list .item-name-edit { text-align: left; }

/* Vraies vignettes (image / première page de PDF) au lieu de l'icône
   générique — voir browser.js:nodeThumb() et pdfThumb.js. */
/* position:relative + overflow:hidden sur TOUTES les vignettes, jamais
   seulement celles des cartes : .thumb-fallback-icon est en position:absolute
   inset:0 et se cale donc sur le premier ancêtre positionné. Sans ça, en vue
   liste l'icône de repli d'un fichier se déployait sur toute la zone de
   contenu et interceptait les clics destinés aux autres lignes (impossible
   d'ouvrir un dossier : c'est le fichier au-dessus qui se sélectionnait). */
.item-thumb-wrap { position: relative; overflow: hidden; }
.item-card .item-thumb-wrap { width: 100%; height: 150px; border-radius: 6px; background: var(--surface-3); }
.item-thumb-wrap .item-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb-wrap canvas.item-thumb { object-fit: contain; opacity: 0; transition: opacity var(--transition-base); }
.item-thumb-wrap canvas.item-thumb.loaded { opacity: 1; }
.item-thumb-wrap .thumb-fallback-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.item-thumb-wrap canvas.item-thumb.loaded ~ .thumb-fallback-icon { display: none; }
.item-thumb-wrap .thumb-fallback-icon .icon { width: 40px; height: 40px; }

#item-grid.view-list { display: flex; flex-direction: column; }
.view-list .item-row {
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.view-list .item-row:hover { background: var(--surface-2); }
.view-list .item-row .icon-folder, .view-list .item-row .icon-file { width: 20px; height: 20px; color: var(--text-muted); }
.view-list .item-row .icon-folder { color: var(--accent); }
.view-list .item-row .item-thumb-wrap { width: 26px; height: 26px; flex-shrink: 0; border-radius: 5px; }
.view-list .item-row .thumb-fallback-icon .icon { width: 16px; height: 16px; }
.view-list .item-name { flex: 1; text-align: left; -webkit-line-clamp: 1; }
.view-list .item-meta { color: var(--text-muted); font-size: 12.5px; width: 90px; text-align: right; }
.view-list .item-meta.date { width: 130px; }
/* Avatar + nom du propriétaire côte à côte, comme sur Drive (voir
   inspiration/"Affichage par ligne.PNG"). */
.view-list .item-meta.lh-owner { width: 130px; text-align: left; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.view-list .item-meta.lh-owner .lh-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-list .item-meta.lh-owner .avatar { flex-shrink: 0; }
.view-list .item-icon-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; display: flex; }
/* Actions cachées par défaut, révélées au survol de la ligne — jamais
   présentes visuellement en permanence (bruit visuel), sauf le focus
   clavier qui doit rester accessible sans souris. */
.item-row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity var(--transition-fast); }
.view-list .item-row:hover .item-row-actions, .item-row-actions:focus-within { opacity: 1; }
.list-head { display: flex; align-items: center; gap: 12px; padding: 6px 10px; color: var(--text-muted); font-size: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.lh-sort {
  display: inline-flex; align-items: center; gap: 3px; border: none; background: none; color: inherit;
  font-size: 12px; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.lh-sort:hover { background: var(--surface-3); color: var(--text); }
.lh-sort.active { color: var(--text); font-weight: 600; }
.lh-sort .icon { width: 13px; height: 13px; transition: transform var(--transition-fast); }
.lh-sort .icon.sort-asc { transform: rotate(180deg); }
.list-head .lh-name { flex: 1; text-align: left; }
.list-head .lh-meta { width: 90px; justify-content: flex-end; }
.list-head .lh-meta.date { width: 130px; }
.list-head .lh-owner { width: 130px; justify-content: flex-start; text-align: left; }
.list-head .lh-actions-sp { width: 68px; flex-shrink: 0; }

/* --------------------------------------------------------- Badge partagé */
.shared-badge {
  position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--surface); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--border);
}
.shared-badge .icon { width: 11px; height: 11px; color: var(--text-muted); }
.item-icon-wrap { position: relative; display: inline-flex; }
.view-list .shared-badge { width: 12px; height: 12px; }
.view-list .shared-badge .icon { width: 8px; height: 8px; }

/* ---------------------------------------------------- Menu tri/classification */
#sort-trigger {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none; color: var(--text-muted);
  font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
#sort-trigger:hover { background: var(--surface-2); color: var(--text); }
#sort-trigger .icon { width: 14px; height: 14px; transition: transform var(--transition-fast); }
#sort-trigger .icon.sort-asc { transform: rotate(180deg); }
.sort-menu { min-width: 240px; padding: 6px; }
.sort-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 8px 10px 4px; }
.sort-menu button { display: flex; align-items: center; gap: 8px; }
.sort-menu button .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }
.sort-menu button:not(.active) .icon { visibility: hidden; }

/* ------------------------------------------------------------- Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 6px; z-index: 40;
  animation: fk-menu-in var(--transition-fast) ease-out;
}
.dropdown-menu.fixed-pos { position: fixed; top: 0; right: auto; left: 0; margin-top: 0; }
.dropdown-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; border-radius: var(--radius-sm); color: var(--text);
  font-size: 13px; transition: background var(--transition-fast);
}
.dropdown-menu button:hover { background: var(--surface-2); }
.dropdown-menu button:disabled { color: var(--text-muted); cursor: default; }
.dropdown-menu button:disabled:hover { background: none; }
.dropdown-menu button.danger { color: var(--danger); }
.dropdown-menu .sep { height: 1px; background: var(--border); margin: 5px 2px; }

/* ------------------------------------------------------- Color picker */
.color-picker-menu { width: 232px; padding: 10px; }
.cp-row { display: flex; gap: 4px; margin-bottom: 4px; }
/* Spécificité (2 classes) volontairement plus élevée que ".dropdown-menu
   button" (1 classe + 1 élément) qui, sinon, gagnerait la cascade et
   étirerait chaque pastille en bouton pleine largeur. */
.color-picker-menu .cp-swatch {
  display: inline-block; width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  cursor: pointer; padding: 0; flex: none;
}
.color-picker-menu .cp-swatch:hover { transform: scale(1.12); box-shadow: var(--focus-ring); }
.color-picker-menu .cp-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.color-picker-menu .cp-none {
  display: block; width: 100%; text-align: left; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 12.5px; padding: 6px 8px; margin-bottom: 8px; cursor: pointer;
}
.color-picker-menu .cp-none:hover { background: var(--surface-2); }
.cp-custom {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text); cursor: pointer;
}
.cp-custom input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }

/* Sélecteur de style de liste (public/js/listStylePicker.js) — grille de
   6/5 aperçus façon Google Docs, chacun une vraie <ul>/<ol> (voir docs.css
   pour le rendu par style, partagé avec le document réel). */
.list-style-menu { width: auto; padding: 10px; }
.list-style-menu .ls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.list-style-menu .ls-option {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer; display: flex; align-items: center;
}
.list-style-menu .ls-option:hover { background: var(--surface-2); }
.list-style-menu .ls-option.active { border-color: var(--accent); background: var(--surface-3); }
.list-style-menu .ls-preview { margin: 0; padding: 0 0 0 1.1em; pointer-events: none; }
.list-style-menu .ls-preview li { width: 26px; height: 3px; background: var(--text-muted); border-radius: 2px; margin-bottom: 4px; list-style-position: outside; }
.list-style-menu .ls-preview li:last-child { margin-bottom: 0; }
@keyframes fk-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------- Selection bar */
/* Capsule flottante façon Drive (voir inspiration/Selection.PNG) — remplace
   la barre d'outils dans le même emplacement/rythme vertical, jamais une
   bande pleine largeur collée aux bords. */
/* Recouvre la barre d'outils au lieu de s'insérer au-dessus de la grille
   (façon Drive — voir inspiration/"partagé avec moi 2.PNG", où la banderole
   remplace la rangée de filtres). En flux normal, son apparition au premier
   clic décalait tout le contenu de ~60px vers le bas : le second clic d'un
   double-clic tombait alors à côté, donc l'élément ne s'ouvrait jamais et
   c'est la ligne du dessus qui se sélectionnait. */
#selection-bar {
  position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 10px 6px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
}
#selection-bar .sel-count { font-weight: 500; margin-right: auto; padding-left: 6px; color: var(--text); }
#selection-bar .sel-actions { display: flex; align-items: center; gap: 2px; }
#selection-bar .icon-btn { width: 36px; height: 36px; }
#selection-bar [data-sel-act="trash"]:hover { background: color-mix(in srgb, var(--danger) 16%, var(--surface-3)); color: var(--danger); }

/* --------------------------------------------------------------- Modal */
#modal-overlay, #preview-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 16, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-card {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: fk-modal-in var(--transition-base) ease-out;
}
@keyframes fk-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card.wide { max-width: 560px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 16px; margin: 0; }
.modal-body { padding: 16px 18px; max-height: 60vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }

/* --------------------------------------------------------------- Preview */
#preview-overlay .preview-frame {
  width: 100%; height: 100%; max-width: 1100px; max-height: 90vh;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column;
  animation: fk-modal-in var(--transition-base) ease-out;
}
.preview-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.preview-presence { display: flex; align-items: center; margin-right: 4px; }
.presence-avatar {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -8px;
}
.presence-avatar:first-child { margin-left: 0; }
.preview-head .preview-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.preview-body img, .preview-body video { max-width: 100%; max-height: 100%; }
.preview-body textarea {
  width: 100%; height: 100%; border: none; resize: none; padding: 16px; background: var(--surface);
  color: var(--text); font-family: var(--font-mono); outline: none;
}
.preview-fallback { text-align: center; color: var(--text-muted); padding: 40px; }
.collab-editor { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.collab-status {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--surface-3); color: var(--text-muted); font-size: 12px; padding: 5px 12px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.preview-actions { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); justify-content: flex-end; }

/* Aperçu .docx : contenu HTML converti par mammoth (voir docxService.js) —
   feuille "papier" scrollable plutôt que le centrage flex par défaut de
   .preview-body, pensé pour une image/vidéo unique. */
.preview-body.docx-preview-body { display: block; padding: 32px 0; }
.docx-preview-page {
  max-width: 760px; margin: 0 auto; background: #fff; color: #1f1f1f;
  padding: 56px 64px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  line-height: 1.6; font-size: 15px;
}
.docx-preview-page :is(h1, h2, h3, h4, h5, h6) { margin: 1.2em 0 0.5em; line-height: 1.3; }
.docx-preview-page p { margin: 0 0 0.9em; }
.docx-preview-page table { border-collapse: collapse; margin: 0.9em 0; }
.docx-preview-page td, .docx-preview-page th { border: 1px solid #d0d0d0; padding: 6px 10px; }
.docx-preview-page img { max-width: 100%; }

/* ---------------------------------------------------------- Image viewer */
.image-viewer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.iv-stage {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: default;
}
.iv-stage.zoomed { cursor: grab; }
.iv-stage.zoomed.dragging { cursor: grabbing; }
.iv-img { max-width: 100%; max-height: 100%; user-select: none; transition: transform 0.15s ease-out; will-change: transform; }
.iv-error { color: var(--text-muted); text-align: center; padding: 40px; font-size: 14px; line-height: 1.6; }
.iv-stage.dragging .iv-img { transition: none; }
.iv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(20, 22, 26, 0.45); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast);
}
.image-viewer:hover .iv-nav { opacity: 1; }
.iv-nav:hover { background: rgba(20, 22, 26, 0.7); }
.iv-prev { left: 12px; }
.iv-next { right: 12px; }
.iv-toolbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(20, 22, 26, 0.55); backdrop-filter: blur(6px);
}
.iv-toolbar button {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast);
}
.iv-toolbar button:hover { background: rgba(255, 255, 255, 0.18); }
.iv-toolbar button .icon { width: 16px; height: 16px; }
.iv-count { color: #fff; font-size: 11.5px; padding: 0 8px; white-space: nowrap; }

/* ------------------------------------------------------------ PDF viewer */
.pdf-viewer { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.pdf-stage { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 24px; }
.pdf-canvas { background: #fff; box-shadow: var(--shadow); align-self: flex-start; }
.pdf-status {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-muted); font-size: 13px; text-align: center; max-width: 80%;
}
.pdf-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 6px 10px; margin: 0 auto 14px; width: fit-content;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.pdf-toolbar button {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: none; color: var(--text);
  display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast);
}
.pdf-toolbar button:hover { background: var(--surface-2); }
.pdf-toolbar .icon { width: 16px; height: 16px; }
.pdf-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.pdf-page-input { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; padding: 0 4px; }
.pdf-page-num {
  width: 40px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 4px 2px;
}

/* ---------------------------------------------------------- Video player */
.video-player { position: relative; width: 100%; height: 100%; background: #000; }
.vp-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vp-note {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 22, 26, 0.7); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 999px;
}
.vp-controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: linear-gradient(to top, rgba(10, 12, 16, 0.75), transparent);
}
.vp-controls button {
  width: 30px; height: 30px; border-radius: 6px; border: none; background: none; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-fast);
}
.vp-controls button:hover { background: rgba(255, 255, 255, 0.15); }
.vp-controls .icon { width: 17px; height: 17px; }
.vp-time { color: #fff; font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-seek { position: relative; flex: 1; height: 14px; display: flex; align-items: center; }
.vp-seek-buffered, .vp-seek-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 2px; pointer-events: none;
}
.vp-seek-buffered { background: rgba(255, 255, 255, 0.3); width: 0; }
.vp-seek-fill { background: var(--accent); width: 0; }
.vp-seek::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15);
}
.vp-seek-input {
  position: relative; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; height: 14px;
}
.vp-seek-input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; margin-top: 0; }
.vp-seek-input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; }
.vp-seek-input:disabled { opacity: 0.5; }
.vp-volume { width: 70px; accent-color: var(--accent); }
.vp-speed-wrap { position: relative; }
.vp-speed-wrap [data-vp="speed-toggle"] { width: auto; padding: 0 8px; font-size: 12px; }
.vp-speed-menu {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; min-width: 60px;
}
.vp-speed-menu button { color: var(--text); width: 100%; height: auto; padding: 6px 8px; border-radius: var(--radius-sm); justify-content: flex-start; }
.vp-speed-menu button:hover { background: var(--surface-2); }

/* ---------------------------------------------------------- Upload panel */
#upload-panel {
  position: fixed; bottom: 16px; right: 16px; width: 320px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 60; overflow: hidden;
}
#upload-panel .upload-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.upload-summary { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 6px; }
#upload-list { max-height: 260px; overflow-y: auto; }
.upload-row { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.upload-row:last-child { border-bottom: none; }
.upload-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
.upload-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.upload-bar-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.2s; }
.upload-row.error .upload-bar-fill { background: var(--danger); }
.upload-row.done .upload-bar-fill { background: var(--success); }
.upload-status { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; display: flex; justify-content: space-between; }

/* ------------------------------------------------------------------ Toast */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; opacity: 0; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s; max-width: 320px;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--danger); color: var(--danger); }
.toast-success { border-color: var(--success); }

/* ------------------------------------------------------------------- Admin */
.admin-page { max-width: 1240px; margin: 0 auto; padding: 28px 20px 60px; }
.admin-tabs { display: flex; gap: 4px; margin: 20px 0 4px; border-bottom: 1px solid var(--border); }
.admin-tab {
  padding: 10px 16px; border: none; background: none; color: var(--text-muted);
  font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.admin-toolbar { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.admin-search { position: relative; min-width: 220px; }
.admin-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
.admin-search input { padding-left: 32px; width: 100%; }
.admin-toolbar select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
table.admin-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.admin-page h1 { display: flex; align-items: center; gap: 10px; }
.admin-page .icon { color: var(--accent); }
/* Le tableau lui-même ne rétrécit jamais en dessous de sa largeur naturelle
   (colonnes illisibles sinon) — c'est le conteneur qui défile
   horizontalement sur petit écran, jamais toute la page qui s'élargit pour
   l'accueillir (c'est ce qui écrasait toute la mise en page sur mobile). */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 14px; }
table.admin-table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--surface); }
table.admin-table th, table.admin-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
table.admin-table th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; }
table.admin-table tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--surface-2); }
.badge.admin { background: var(--accent); color: var(--accent-text); }
.badge.inactive { background: var(--danger-bg); color: var(--danger); }
.quota-used { color: var(--text-muted); font-size: 11.5px; margin-left: 6px; }

/* ------------------------------------------------------- Statistiques admin */
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.stat-tile {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px;
  animation: fade-in-up 0.4s ease-out both;
}
.stat-tile:nth-child(1) { animation-delay: 0ms; }
.stat-tile:nth-child(2) { animation-delay: 60ms; }
.stat-tile:nth-child(3) { animation-delay: 120ms; }
.stat-tile:nth-child(4) { animation-delay: 180ms; }
.stat-tile-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent);
}
.stat-tile-icon .icon { width: 21px; height: 21px; }
.stat-tile-value { font-size: 22px; font-weight: 600; line-height: 1.2; }
.stat-tile-label { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.stat-tile-sub { font-size: 11px; color: var(--text-muted); opacity: 0.75; margin-top: 2px; }

.admin-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.admin-chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.admin-chart-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.admin-chart-card.wide { grid-column: 1 / -1; }
.admin-chart-card h3 { margin: 0 0 16px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.chart-empty { color: var(--text-muted); font-size: 13px; }

.chart-hbars { display: flex; flex-direction: column; gap: 12px; }
.hbar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.hbar-label { width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { flex: 1; height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.hbar-fill {
  height: 100%; border-radius: 5px; min-width: 2px; transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  animation: grow-x 0.7s cubic-bezier(.22,.8,.25,1) both;
}
.hbar-value { width: 120px; flex-shrink: 0; text-align: right; color: var(--text-muted); font-size: 11.5px; }

.chart-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.chart-donut svg { animation: fade-in-scale 0.5s ease-out both; }
.chart-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.legend-row { display: flex; align-items: center; gap: 7px; animation: fade-in-up 0.4s ease-out both; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.chart-activity .activity-bar { transition: opacity var(--transition-fast); animation: grow-y 0.5s cubic-bezier(.22,.8,.25,1) both; }
.chart-activity .activity-bar:hover { opacity: 0.7; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); margin-bottom: 10px; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 760px) {
  #sidebar { position: fixed; top: 56px; bottom: 0; left: 0; width: 78%; max-width: 280px; z-index: 50; transform: translateX(-100%); transition: transform 0.2s; }
  #sidebar.open { transform: translateX(0); box-shadow: var(--shadow); }
  #search-box { max-width: none; min-width: 0; }
  #brand span.brand-text { display: none; }
  .files-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* 200px : deux colonnes sur une tablette étroite, une seule (pleine
     largeur, nom entier lisible) sur un téléphone. */
  .folders-row { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .view-list .item-meta.date { display: none; }
  #upload-panel { left: 12px; right: 12px; width: auto; }

  /* Le groupe d'icônes à droite (actualiser, compte, admin, thème,
     déconnexion) dépasse à lui seul la largeur d'un écran de téléphone —
     c'est ce qui écrasait la barre de recherche à 0 et élargissait toute
     la page. On retire le texte non essentiel, les icônes restent — sauf
     "Actualiser", masqué entièrement : changer d'onglet recharge déjà les
     données, et Drive mobile n'a pas non plus ce bouton dans sa barre du
     haut (voir la barre de recherche pleine largeur dans la référence). */
  #topbar { gap: 8px; padding: 0 10px; }
  #btn-refresh { display: none; }
  #user-name { display: none; }
  #user-menu { gap: 2px; }

  /* Barre du bas + bouton flottant façon appli Drive mobile — quatre
     destinations fixes toujours accessibles sans ouvrir le tiroir latéral. */
  #bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 4px; border: none; background: none; color: var(--text-muted);
    border-radius: 999px; font-size: 10.5px;
  }
  .bottom-nav-item .icon { width: 21px; height: 21px; }
  .bottom-nav-item.active { color: var(--accent); }

  #mobile-fab-wrap { display: block; }
  .fab {
    position: fixed; right: 16px; z-index: 46;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    width: 50px; height: 50px; border-radius: 999px; border: none;
    background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-lg);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fab .icon { width: 22px; height: 22px; }
  .fab:active { background: var(--accent-hover); }
  /* Le menu "Nouveau" s'ouvre normalement vers le bas (top:100%) — depuis un
     bouton flottant tout en bas de l'écran ça le pousserait hors du viewport,
     donc on l'ouvre vers le haut ici uniquement. */
  #mobile-fab-wrap .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }

  /* Espace pour que le contenu ne se cache jamais sous la barre du bas —
     #dropzone (vue "parcourir") et .home-page (Accueil/Récent/Suivi/
     Partagés) sont les deux conteneurs qui défilent réellement, #content
     lui-même n'a pas d'overflow propre. */
  #dropzone, .home-page { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 761px) {
  #bottom-nav, #mobile-fab-wrap { display: none; }
}

[hidden] { display: none !important; }

/* ------------------------------------------------- Case de sélection
   L'affordance qui manquait : la sélection existait, mais rien ne la
   laissait deviner avant d'avoir cliqué. La case apparaît au survol et
   reste dès que l'élément est pris. */
.item-check {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--text-muted); border-radius: 4px;
  background: var(--bg); cursor: pointer; padding: 0;
  opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.item-check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.item-row:hover .item-check,
.item-card:hover .item-check,
.item-check:focus-visible { opacity: 1; }
.item-check.coche { opacity: 1; background: var(--accent); border-color: var(--accent); }
.item-check.coche svg { opacity: 1; }
.item-check.partiel { opacity: 1; background: var(--accent); border-color: var(--accent); }
.item-check.partiel svg { opacity: 1; clip-path: inset(45% 15% 45% 15%); }
.item-check:hover { border-color: var(--accent); }

/* En vue grille, la case se pose par-dessus la carte plutôt que de
   décaler le nom — sinon chaque survol ferait bouger le texte. */
.folder-card .item-check { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }
.folder-card { position: relative; }
.folder-card:hover .item-icon-wrap,
.folder-card.selected .item-icon-wrap { opacity: 0; }
.folder-card:hover .item-name,
.folder-card.selected .item-name { padding-left: 4px; }
.item-card-head { position: relative; }
.item-card-head .item-check { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; }
.item-card:hover .item-card-head > .icon-file,
.item-card.selected .item-card-head > .icon-file { opacity: 0; }

/* Raccourci clavier affiché dans un menu — discret, aligné à droite. */
.dropdown-menu kbd {
  margin-left: auto; padding-left: 18px;
  font: 400 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted); letter-spacing: .02em;
}
.dropdown-menu button { display: flex; align-items: center; }

/* ------------------------------------------------- Barre de filtres
   Le tri dit « dans quel ordre », les filtres disent « lesquels ».
   Pastilles discrètes tant qu'inactives, teintées à l'accent dès qu'elles
   retiennent quelque chose — on doit voir d'un coup d'œil qu'une vue est
   filtrée, sinon on croit le dossier vide. */
#barre-filtres {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 24px 10px;
}
.filtre-puce {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); font-size: 13px; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.filtre-puce:hover { background: var(--surface); }
.filtre-puce.actif {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent); font-weight: 500;
}
.filtre-chevron { width: 14px; height: 14px; opacity: .7; }
.filtre-etoile { width: 14px; height: 14px; }
.filtre-reinit {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 10px; border-radius: 999px;
  background: none; border: none; color: var(--text-muted);
  font-size: 12.5px; cursor: pointer;
}
.filtre-reinit:hover { color: var(--text); background: var(--surface); }
.filtre-reinit .icon { width: 13px; height: 13px; }
.filtre-menu button.coche { color: var(--accent); }
.filtre-coche { width: 14px; height: 14px; margin-left: auto; }

/* Puce de filtre de l'accueil retenue — même grammaire que celles de Mon
   Drive : teintée à l'accent dès qu'elle retient quelque chose, pour qu'on
   voie d'un coup d'œil que la vue est filtrée. */
.home-filter-chip.actif {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent); font-weight: 500;
}
.home-filter-menu button.coche { color: var(--accent); }