/* nallium-drive-frontend — design system
 *
 * Tokens (:root) et classes de "chrome" (topbar, boutons, panels, alertes)
 * copiés à l'identique de nallium-store-frontend/css/style.css pour rester
 * visuellement cohérent avec le reste de l'écosystème Nallium (lui-même
 * copié de nallium-idm-frontend) — étendus avec les éléments propres à un
 * gestionnaire de fichiers (grille/liste, breadcrumbs, zone de dépôt,
 * menu contextuel, modale de partage).
 */

:root {
  --text: #172033;
  --muted: #64748b;
  --blue: #3b82f6;
  --green: #22c55e;
  --amber: #f59e0b;
  --pink: #ec4899;
  --violet: #8b5cf6;
  --red: #ef4444;
  --cyan: #06b6d4;
  --bg: #f7f9ff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: #ffffff;
  --border: rgba(30, 41, 59, 0.12);
  --shadow: 0 24px 80px rgba(30, 41, 59, 0.12);
  --shadow-soft: 0 14px 38px rgba(30, 41, 59, 0.09);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 4%, rgba(59, 130, 246, 0.16), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(236, 72, 153, 0.12), transparent 24%),
    radial-gradient(circle at 72% 88%, rgba(34, 197, 94, 0.13), transparent 26%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--blue);
  text-decoration: none;
}

button {
  font: inherit;
}

/* ---------------------------------------------------------------------
 * Barre de navigation (reprise store-frontend, + recherche large Drive)
 * ------------------------------------------------------------------- */
.store-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.store-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #0f172a;
  cursor: pointer;
}

.store-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 2px;
  background: conic-gradient(from 180deg, var(--blue), var(--green), var(--amber), var(--pink), var(--violet), var(--blue));
}

.store-brand-logo span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #ffffff;
  font-weight: 950;
  font-size: 15px;
  color: #111827;
}

.store-nav {
  display: flex;
  gap: 4px;
}

.store-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.store-nav a.active,
.store-nav a:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue);
}

.drive-search {
  position: relative;
  flex: 1;
  max-width: 380px;
}

.drive-search input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 9px 16px;
  font-size: 14px;
  background: #ffffff;
}

/* Recherche progressive (backlog #19) — dropdown sous la barre, même
   gabarit que .gather-people-results côté Gather. */
.drive-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.drive-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}

.drive-search-row:hover {
  background: rgba(59, 130, 246, 0.08);
}

.drive-search-row-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.drive-search-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-search-row-all {
  color: var(--blue);
  font-weight: 700;
  justify-content: center;
}

.store-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Barre de progression du quota de stockage (topbar, voir js/app.js::
 * refreshStorageUsage) — compacte, à côté de l'email de l'utilisateur. */
.drive-storage-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drive-storage-bar {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.drive-storage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  width: 0%;
  transition: width 0.3s ease;
}

.drive-storage-bar-fill.is-full {
  background: var(--red);
}

.drive-storage-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}

.store-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28);
}

.btn-outline {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-danger {
  background: #fff;
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------
 * Layout général
 * ------------------------------------------------------------------- */
.store-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.panel {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.form-control {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 14px;
  background: #fff;
}

.hint {
  font-size: 12px;
  color: var(--muted);
}

.alert-banner {
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.alert-banner.error {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.alert-banner.success {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.login-gate {
  text-align: center;
  padding: 50px 20px;
}

.login-gate p {
  color: var(--muted);
  margin-bottom: 18px;
}

.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 10px;
}

.plan-row:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Drive — barre d'outils / fil d'Ariane
 * ------------------------------------------------------------------- */
.drive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.drive-breadcrumbs {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.drive-breadcrumbs a {
  color: var(--text);
}

.drive-breadcrumbs a:hover {
  color: var(--blue);
}

.drive-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Sélecteur de mode d'affichage (backlog #51) — cartes/liste/détail + taille
   des vignettes, voir js/app.js::applyDriveViewClasses. */
.drive-view-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-solid);
}

.drive-view-btn {
  border: none;
  background: transparent;
  border-radius: 7px;
  width: 30px;
  height: 28px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
}

.drive-view-btn.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue);
}

#drive-view-size {
  width: 70px;
  margin: 0 4px;
}

/* ---------------------------------------------------------------------
 * Drive — grille de fichiers/dossiers
 * ------------------------------------------------------------------- */
.drive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* Modes d'affichage (backlog #51) — appliqués via des classes sur .drive-grid
   (voir applyDriveViewClasses) plutôt qu'un second gabarit HTML : cartes,
   liste compacte, détail façon tableau (nom / type+taille / date en
   colonnes), + 3 tailles de vignette. Portée : Mon Drive / dossiers /
   Photos / Videos / Books — pas encore Partagé/Favoris/Corbeille/Recherche.
   N'affecte PAS la vue "pellicule" de Photos (.drive-grid-photos, plus loin
   dans ce fichier) : un album reste un album quel que soit le mode choisi,
   volontairement — voir le commentaire sur .drive-grid-photos. */
.drive-grid.size-sm.view-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.drive-grid.size-lg.view-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.drive-grid.size-sm .drive-card-icon,
.drive-grid.size-sm .drive-card-thumb {
  width: 32px;
  height: 32px;
  font-size: 20px;
}

.drive-grid.size-lg .drive-card-icon,
.drive-grid.size-lg .drive-card-thumb {
  width: 58px;
  height: 58px;
  font-size: 38px;
}

/* Backlog #261 : les mini-aperçus "maison" (.drive-thumb-doc-inner/-sheet/
   -slide-el, voir plus bas) sont dimensionnés en % de .drive-card-thumb,
   donc suivent déjà sa largeur/hauteur aux 3 tailles ci-dessus sans recalcul
   JS — mais leur `font-size` est en px FIXE (lisible seulement comme une
   texture à cette échelle, pas du vrai texte), donc ne grandit/rétrécit pas
   tout seul avec le conteneur comme le fait .drive-card-icon (dont le
   font-size est explicitement redéfini ci-dessus à chaque taille). Sans ce
   correctif, le mini-aperçu semble proportionnellement plus dense en
   size-sm et plus clairsemé en size-lg que l'icône générique juste à côté
   de lui dans la même grille. Même ratio que .drive-card-thumb en size-sm/
   size-lg (32px et 58px contre 42px par défaut) appliqué aux tailles de
   police de base (3px/4px, voir plus bas). */
.drive-grid.size-sm .drive-thumb-doc-inner,
.drive-grid.size-sm .drive-thumb-sheet,
.drive-grid.size-sm .drive-thumb-slide-el {
  font-size: 2px;
}

.drive-grid.size-sm .drive-thumb-doc-inner :is(h1, h2, h3) {
  font-size: 3px;
}

.drive-grid.size-lg .drive-thumb-doc-inner,
.drive-grid.size-lg .drive-thumb-sheet,
.drive-grid.size-lg .drive-thumb-slide-el {
  font-size: 4px;
}

.drive-grid.size-lg .drive-thumb-doc-inner :is(h1, h2, h3) {
  font-size: 6px;
}

.drive-grid.view-list,
.drive-grid.view-detail {
  grid-template-columns: 1fr;
  gap: 2px;
}

.drive-grid.view-list .drive-card,
.drive-grid.view-list .drive-parent-card,
.drive-grid.view-detail .drive-card,
.drive-grid.view-detail .drive-parent-card {
  border-radius: 8px;
  box-shadow: none;
  padding: 8px 12px;
}

.drive-grid.view-list .drive-card:hover,
.drive-grid.view-detail .drive-card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(59, 130, 246, 0.05);
}

.drive-grid.view-list .drive-card-body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.drive-grid.view-list .drive-card-name { flex-shrink: 0; }
.drive-grid.view-list .drive-card-meta { margin-top: 0; }

.drive-grid.view-detail .drive-card-body {
  display: grid;
  grid-template-columns: 1fr 160px 190px;
  align-items: center;
  gap: 16px;
}

.drive-grid.view-detail .drive-card-meta { margin-top: 0; }

.drive-card {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

.drive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(59, 130, 246, 0.35);
}

/* Card ".." — remonter au dossier parent (backlog #42). Volontairement une
   classe séparée de .drive-card (voir js/app.js::renderCrumbsThenLoad) :
   même look, mais jamais ciblée par le glisser-déposer/menu contextuel. */
.drive-parent-card {
  background: var(--panel-solid);
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.drive-parent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(59, 130, 246, 0.35);
}

.drive-card-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
}

/* Vignette réelle (backlog #22, étendu à tous les types prévisualisables par
   #261 — voir js/app.js::fetchGridThumbnails) — même gabarit que
   .drive-card-icon pour ne pas décaler la card tant que fetchGridThumbnails
   n'a pas remplacé le contenu, voir js/app.js. */
.drive-card-thumb {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 28px;
}

.drive-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Backlog #261 : mini-aperçus "maison" des kinds à contenu natif JSON
   (doc/sheet/slide/image), ET des .docx/.xlsx/.pptx IMPORTÉS une fois
   convertis côté client par le même convertisseur que l'ouverture (#223) —
   voir js/app.js::miniDocThumbHtml et les fonctions sœurs pour la portée
   assumée — injectés en DOM directement dans
   .drive-card-thumb ci-dessus plutôt que rasterisés en <img>, donc
   dimensionnés en % du CONTENEUR (qui, lui, varie déjà selon size-sm/md/lg,
   voir plus haut) : valables aux 3 tailles de vignette sans recalcul JS. */
.drive-thumb-doc,
.drive-thumb-sheet,
.drive-thumb-slide,
.drive-thumb-image {
  width: 100%;
  height: 100%;
}

.drive-thumb-doc {
  background: #fff;
  overflow: hidden;
  border-radius: 8px;
}

.drive-thumb-doc-inner {
  font-size: 3px;
  line-height: 1.4;
  color: #172033;
  padding: 3px;
}

.drive-thumb-doc-inner :is(h1, h2, h3) {
  font-size: 4px;
  margin: 0 0 1px;
}

.drive-thumb-doc-inner p {
  margin: 0 0 1px;
}

.drive-thumb-sheet {
  border-collapse: collapse;
  background: #fff;
  font-size: 3px;
  table-layout: fixed;
}

.drive-thumb-sheet td {
  border: 0.5px solid rgba(15, 23, 42, 0.15);
  overflow: hidden;
  white-space: nowrap;
  padding: 0 1px;
  color: #172033;
}

.drive-thumb-slide {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.drive-thumb-slide-el {
  position: absolute;
  font-size: 3px;
  line-height: 1.2;
  overflow: hidden;
}

.drive-thumb-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #f1f5f9;
}

.drive-thumb-image-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drive-card-body {
  flex: 1;
  min-width: 0;
}

.drive-card-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-star {
  font-size: 11px;
}

.drive-card-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.drive-card-date {
  font-size: 10px;
  opacity: 0.85;
}

.drive-card-actions {
  flex-shrink: 0;
  position: relative;
}

.drive-icon-btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 900;
  color: var(--muted);
  cursor: pointer;
}

.drive-icon-btn:hover {
  background: rgba(30, 41, 59, 0.08);
  color: var(--text);
}

/* ---------------------------------------------------------------------
 * Backlog #263 : la rangée de raccourcis Documents/Photos/Videos/Books/
 * Downloads (anciennement .drive-root-tabs) a été retirée, redondante avec
 * les cards de ces mêmes dossiers déjà affichées sur la page d'accueil.
 * ------------------------------------------------------------------- */

/* Petit cadenas sur les cards des dossiers protégés — voir
 * js/app.js::itemCardHtml (item.protected). Purement indicatif : la
 * protection réelle est appliquée côté backend (update_item/trash_item). */
.drive-card-protected-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.65;
}

/* Vue "pellicule" pour les dossiers protégés Photos ET Videos (backlog #43,
 * étendue #162) — mosaïque façon Pinterest/pellicule plutôt que la liste
 * standard fichier/dossier : colonnes en CSS multi-colonnes (pas une vraie
 * grille "masonry" — support navigateur encore incomplet pour grid-template-
 * rows: masonry — column-count reproduit le même effet de façon fiable) où
 * chaque vignette garde son ratio naturel au lieu d'être recadrée en carré.
 * Uniquement une variante visuelle : les cards restent les mêmes éléments
 * .drive-card, donc glisser-déposer/sélection/menu contextuel continuent de
 * fonctionner normalement dessus.
 *
 * LIMITE ASSUMÉE : les vignettes vidéo n'ont PAS de vraie image extraite de
 * la vidéo (pas de job de génération de frame côté backend, voir déjà le
 * commentaire de previewKindFor/openFilmstripViewer) — elles gardent donc un
 * ratio fixe (16/9) avec l'icône 🎬 + une pastille ▶, plutôt que de simuler
 * une vignette qui n'existe pas. Seules les images ont un ratio "vécu"
 * (celui du fichier réel, une fois sa vignette chargée par
 * fetchGridThumbnails) — normal qu'une mosaïque d'images pures varie plus
 * qu'un dossier Videos (tous les mêmes 16/9). Léger réajustement de mise en
 * page possible au chargement de chaque vignette image (sa hauteur réelle
 * n'est connue qu'une fois l'image téléchargée) — le backend ne stocke pas
 * les dimensions d'une image à l'upload, calculer ça à l'avance
 * demanderait un traitement serveur dédié, hors périmètre ici. */
.drive-grid-photos {
  display: block;
  column-count: 5;
  column-gap: 4px;
  background: #0b1120;
  padding: 14px;
  border-radius: 16px;
}

@media (max-width: 1100px) {
  .drive-grid-photos { column-count: 4; }
}

@media (max-width: 720px) {
  .drive-grid-photos { column-count: 3; }
}

@media (max-width: 480px) {
  .drive-grid-photos { column-count: 2; }
}

.drive-grid-photos .drive-card,
.drive-grid-photos .drive-parent-card {
  display: block;
  break-inside: avoid;
  margin: 0 0 4px;
  padding: 0;
  border-radius: 6px;
  background: #111827;
  border-color: #1f2937;
}

/* Coins arrondis + recadrage DÉPLACÉS ici depuis .drive-card ci-dessus
   (11/09/2026, même correctif que .drive-card:has(.drive-menu) plus bas
   dans ce fichier) : un `overflow: hidden` sur la card elle-même rognait
   aussi son menu contextuel (.drive-card-actions est un enfant positionné
   en absolute DE LA CARD, pas de la vignette) — même symptôme que le bug
   de z-index, cause différente (recadrage, pas empilement), donc pas
   réglé par le fix de z-index seul. La vignette/l'icône reste le seul
   élément à afficher un contenu qui DOIT être recadré en carré arrondi. */
.drive-grid-photos .drive-card-thumb,
.drive-grid-photos .drive-card-icon {
  width: 100%;
  height: auto;
  border-radius: 6px;
  overflow: hidden;
  font-size: 32px;

  /* Le carré (icône générique/dossier, ou vignette image tant qu'elle n'a
     pas encore chargé) reste raisonnable ; l'image chargée écrase ce ratio
     avec le sien via la règle img ci-dessous. */
  aspect-ratio: 1;
}

/* display:flex plutôt que le display:grid hérité (voir la règle de base
 * .drive-card-thumb plus haut) : garde l'émoji-espace réservé centré tant
 * que la vignette n'a pas chargé, tout en laissant l'image, une fois
 * chargée, déterminer elle-même la hauteur de la tuile (ratio naturel) —
 * un display:grid ici pourrait imposer sa propre logique de piste plutôt
 * que de simplement suivre la hauteur intrinsèque du contenu. */
.drive-grid-photos .drive-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drive-grid-photos .drive-card-thumb img {
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
}

.drive-card-video-badge {
  display: none;
}

.drive-grid-photos .drive-card-video-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  z-index: 2;
  pointer-events: none;
}

.drive-grid-photos .drive-card:has(.drive-card-video-badge) .drive-card-icon {
  aspect-ratio: 16 / 9;
  font-size: 26px;
}

/* Pas de nom/métadonnées visibles sur la mosaïque (mur d'images edge-to-edge,
 * comme demandé) — le nom reste consultable dans la liseuse (voir
 * openFilmstripViewer, backlog #157) et le menu ⋯ reste accessible, juste
 * déplacé en survol au-dessus de la vignette plutôt que dans un bandeau. */
.drive-grid-photos .drive-card-body {
  display: none;
}

.drive-grid-photos .drive-card-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.drive-grid-photos .drive-card:hover .drive-card-actions {
  opacity: 1;
}

.drive-grid-photos .drive-icon-btn {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.drive-grid-photos .drive-icon-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.drive-grid.drive-dragover,
#folder-grid.drive-dragover .drive-grid {
  outline: 2px dashed var(--blue);
  outline-offset: 6px;
  border-radius: 16px;
}

/* Drag & drop d'une card vers une autre (déplacer un fichier/dossier dans
 * un dossier) — distinct de .drive-dragover ci-dessus, qui concerne le
 * dépôt de fichiers OS pour import. */
.drive-card.is-dragging {
  opacity: 0.45;
}

.drive-card.drive-drop-target {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.06);
}

/* Sélection multiple (backlog #45) — Ctrl/Cmd+clic, Maj+clic, voir
 * js/app.js::selectedIds. Distincte de .drive-drop-target (bleu en
 * pointillés) pour ne pas confondre "sélectionné" et "cible de dépôt". */
.drive-card.is-selected {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.1);
}

/* Card ".." (dossier parent, backlog #42) et lien "Corbeille" de la barre
 * latérale (backlog #45) comme cibles de glisser-déposer — même traitement
 * visuel que .drive-card.drive-drop-target ci-dessus. */
.drive-parent-card.drive-drop-target,
.store-nav a.drive-drop-target {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.12);
}

/* ---------------------------------------------------------------------
 * Menu contextuel flottant
 * ------------------------------------------------------------------- */

/* BUG RÉEL CORRIGÉ (11/09/2026, signalement utilisateur : "si j'ai une
   card en dessous le menu n'est pas au premier plan, il est caché par la
   card du dessous") : .drive-card a juste `position: relative`, sans
   z-index — ça ne crée PAS de contexte d'empilement à lui seul. Mais
   .drive-card:hover applique un `transform` (translateY), qui EN CRÉE un
   — et cliquer sur "..." implique presque toujours de survoler la card.
   Une fois ce contexte créé, le z-index de .drive-menu ci-dessous n'est
   comparé qu'AUX AUTRES ENFANTS de cette même card — il ne peut plus
   rivaliser avec la card suivante dans le DOM (elle aussi position:
   relative, z-index:auto), qui peint après donc par-dessus, quel que
   soit le z-index interne du menu. Fix : élever la card ENTIÈRE tant que
   son menu est ouvert, pour comparer au bon niveau (celui de la grille,
   où toutes les autres cards restent à z-index:auto). */
.drive-card:has(.drive-menu) {
  z-index: 10;
}

.drive-menu {
  position: absolute;
  right: 0;
  top: 32px;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 190px;
  padding: 6px;
}

.drive-menu-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.drive-menu-item:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--blue);
}

.drive-menu-danger {
  color: var(--red);
}

.drive-menu-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
}

/* ---------------------------------------------------------------------
 * Modale de partage
 * ------------------------------------------------------------------- */
.drive-modal-content {
  border-radius: 18px;
  border: 1px solid var(--border);
}

.share-rows .plan-row {
  align-items: flex-start;
}

.share-link-input {
  margin-top: 6px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------
 * Modale d'aperçu (backlog #22/#23)
 * ------------------------------------------------------------------- */
.drive-preview-body {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.drive-preview-image,
.drive-preview-video {
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

.drive-preview-pdf {
  width: 100%;
  height: 70vh;
  border: none;
}

/* Métadonnées photo (EXIF, backlog #43) — bandeau discret entre l'image et
   le pied de la modale d'aperçu, voir js/app.js::renderPhotoMeta. */
.drive-photo-meta {
  padding: 10px 24px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.drive-photo-meta a {
  color: var(--blue);
  text-decoration: none;
}

.drive-photo-meta a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Visionneuse plein écran "pellicule" (backlog #157) — Photos/Videos
 * uniquement, voir js/app.js::openFilmstripViewer. Overlay maison (PAS une
 * modale Bootstrap) : fixed, animée en opacité + léger décalage vertical
 * plutôt qu'un simple fade, pour donner l'effet "montée en mode pellicule"
 * demandé plutôt qu'une apparition de modale classique.
 * ------------------------------------------------------------------- */
.drive-filmstrip {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 26, 0.94);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.drive-filmstrip.is-open {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .drive-filmstrip {
    transition: opacity 0.01ms;
    transform: none;
  }
}

.drive-filmstrip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  flex-shrink: 0;
}

.drive-filmstrip-title {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-filmstrip-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.drive-filmstrip-actions .btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.drive-filmstrip-actions .btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Backlog #161 : barre d'effets intégrée à la liseuse — mêmes classes de
 * bouton que .drive-effects-tools (voir plus haut dans ce fichier) pour
 * .active (filtre sélectionné / surligneur activé), mais fond/couleur
 * adaptés au fond sombre de la pellicule comme .drive-filmstrip-actions
 * .btn ci-dessus. */
.drive-filmstrip-effects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.drive-filmstrip-effects-toolbar .btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.drive-filmstrip-effects-toolbar .btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.drive-filmstrip-effects-toolbar .drive-effects-filter.active,
.drive-filmstrip-effects-toolbar #btn-filmstrip-highlight.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.drive-filmstrip-effects-toolbar .drive-effects-hint {
  color: rgba(255, 255, 255, 0.7);
  margin-right: 0;
}

.drive-filmstrip-effects-spacer {
  flex: 1 1 auto;
}

.drive-filmstrip-effects-canvas {
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
  touch-action: none;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Navigation désactivée pendant l'édition (backlog #161) — voir
 * enterEffectsMode/exitEffectsMode. */
.drive-filmstrip-strip.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.drive-filmstrip-main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.drive-filmstrip-main .empty-state {
  color: rgba(255, 255, 255, 0.7);
}

.drive-filmstrip-media {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 4px;

  /* Changement d'élément (photo <-> vidéo) à chaque navigation dans le
     bandeau : petite transition d'apparition pour que ça ne saute pas
     brutalement d'une image à l'autre. */
  animation: drive-filmstrip-fade-in 0.18s ease;
}

@keyframes drive-filmstrip-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.drive-filmstrip-strip {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.35);
}

.drive-filmstrip-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drive-filmstrip-thumb:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.drive-filmstrip-thumb.is-active {
  border-color: var(--blue);
}

.drive-filmstrip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drive-filmstrip-thumb-icon {
  font-size: 22px;
}

@media (max-width: 720px) {
  .drive-filmstrip-thumb {
    width: 48px;
    height: 48px;
  }
}

/* ---------------------------------------------------------------------
 * Cartes (backlog #43) — géolocalisation photo + reconstitution du périple,
 * voir js/app.js::openSingleLocationMap/openTripMapModal.
 * ------------------------------------------------------------------- */
.drive-map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.drive-map-single {
  width: 100%;
  height: 320px;
}

.drive-map-trip {
  width: 100%;
  height: 60vh;
}

.drive-map-note {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
 * Éditeur d'effets photo (backlog #43) — voir js/app.js::
 * openPhotoEffectsEditor. Recadrage / N&B / sépia / surligneur, appliqués
 * en <canvas> côté client ; "Dupliquer avec effets" crée une copie, ne
 * touche jamais le fichier d'origine.
 * ------------------------------------------------------------------- */
.drive-effects-body {
  padding: 16px 24px;
}

.drive-effects-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.drive-effects-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 2px;
}

.drive-effects-filter.active,
#btn-effects-highlight.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.drive-effects-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#eef1f8 0% 25%, #f7f9ff 0% 50%) 0 0 / 20px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px;
  max-height: 62vh;
  overflow: auto;
}

#drive-effects-canvas {
  max-width: 100%;
  max-height: 58vh;
  cursor: crosshair;
  touch-action: none;
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
}

.drive-effects-hint {
  font-size: 12px;
  color: var(--muted);
  margin-right: auto;
}

/* ---------------------------------------------------------------------
 * Éditeur natif "Image" (backlog #50) — voir js/app.js::openImageEditor.
 * ------------------------------------------------------------------- */
.drive-image-editor-status {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

.drive-image-editor-body {
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  gap: 10px;
  min-height: 0;
}

.drive-image-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.drive-image-tool.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

#drive-image-color {
  width: 36px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
}

#drive-image-size {
  width: 100px;
}

.drive-image-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
}

.drive-image-canvas-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#eef1f8 0% 25%, #f7f9ff 0% 50%) 0 0 / 20px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: auto;
}

#drive-image-canvas {
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
  touch-action: none;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.drive-image-layers {
  width: 240px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  overflow-y: auto;
}

.drive-image-layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.drive-image-layer {
  display: grid;
  grid-template-columns: 22px 1fr 22px 22px 22px;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.drive-image-layer.active {
  background: rgba(59, 130, 246, 0.1);
}

.drive-image-layer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-image-layer-vis,
.drive-image-layer-up,
.drive-image-layer-down,
.drive-image-layer-del {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
}

.drive-image-layer-opacity {
  grid-column: 1 / -1;
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Lecteur de livres (backlog #48) — voir js/app.js::openBookReader.
 * epub.js gère lui-même la mise en page paginée à l'intérieur de
 * #drive-book-viewer (iframe interne) ; le CSS ici ne fait que l'encadrer.
 * ------------------------------------------------------------------- */
.drive-book-progress {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

/* Backlog #160 : barre de progression visuelle, complète le pourcentage
 * texte ci-dessus (.drive-book-progress). */
.drive-book-progress-bar {
  height: 3px;
  background: var(--border);
  flex-shrink: 0;
}

.drive-book-progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.25s ease;
}

.drive-book-body {
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

.drive-book-toolbar {
  position: relative;
}

#drive-book-search {
  width: 320px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
}

.drive-book-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 420px;
  max-width: 90vw;
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 5;
}

.drive-book-search-row {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.drive-book-search-row:hover { background: rgba(59, 130, 246, 0.06); }
.drive-book-search-row:last-child { border-bottom: none; }

.drive-book-search-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
}

.drive-book-viewport {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.drive-book-viewer {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.drive-book-nav {
  flex-shrink: 0;
  width: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
}

.drive-book-nav:hover {
  color: var(--blue);
  border-color: rgba(59, 130, 246, 0.35);
}

/* ---------------------------------------------------------------------
 * Page de lien public (backlog #17) — SANS topbar app (pas de nav "Mon
 * Drive"/"Favoris"/etc, un visiteur non connecté n'y a pas accès), voir
 * js/app.js::renderPublicView/publicPageShellHtml.
 * ------------------------------------------------------------------- */
.drive-public-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg, #f4f6fb);
}

.drive-public-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-weight: 800;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-solid);
}

.drive-public-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.drive-public-card {
  max-width: 640px;
  width: 100%;
  text-align: center;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow-soft);
}

.drive-public-icon {
  font-size: 40px;
}

.drive-public-name {
  font-size: 20px;
  font-weight: 800;
  margin: 10px 0 20px;
  word-break: break-word;
}

.drive-public-preview {
  margin-bottom: 20px;
}

.drive-public-preview .drive-preview-image,
.drive-public-preview .drive-preview-video {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 10px;
}

.drive-public-preview .drive-preview-pdf {
  height: 60vh;
}

#upload-progress .alert-banner {
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
 * Bandeau d'alerte "fichier dans la corbeille" — placé sous la topbar,
 * bien plus visible que le petit badge "🔒 Lecture seule" du titre ;
 * s'affiche quand le document ouvert est dans la corbeille (lecture
 * seule imposée aussi côté serveur, voir nallium-drive-backend
 * app/routers/items.py::_effective_permission / update_item / save_content).
 * ------------------------------------------------------------------- */
.trash-warning-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fee2e2;
  color: #991b1b;
  border-bottom: 2px solid var(--red);
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}

/* ---------------------------------------------------------------------
 * Barre de sélection multiple (backlog #45) — voir js/app.js::
 * renderSelectionPill. Flottante en bas de l'écran, comme le panneau
 * d'appel de Gather (cohérence entre apps de la suite).
 * ------------------------------------------------------------------- */
.drive-selection-pill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  font-size: 13px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Demandes d'accès — badge "petit chiffre blanc dans un rond rouge" sur le
 * lien "Demandes" de la nav (compteur des demandes en attente dont je suis
 * propriétaire, voir js/app.js::refreshAccessRequestsBadge) + les lignes de
 * la liste elle-même (js/app.js::renderAccessRequests).
 * ------------------------------------------------------------------- */
.access-requests-nav-link {
  position: relative;
}

.drive-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--red);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.access-request-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 12px;
}

.access-request-main {
  min-width: 0;
  flex: 1;
}

.access-request-item {
  font-weight: 800;
  font-size: 15px;
  color: #111827;
}

.access-request-meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.access-request-justification {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 14px;
  white-space: pre-wrap;
}

.access-request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.access-request-actions select {
  width: auto;
}

/* ---------------------------------------------------------------------
 * Responsive mobile (backlog #55) — la topbar/nav/toolbar/menus ne sont
 * pas juste rétrécis : sur petit écran, la nav passe en bandeau
 * défilable horizontalement, la barre d'outils s'empile verticalement,
 * la vue "détail" (tableau) revient à une vue liste simplifiée (les
 * colonnes fixes ne tiennent pas sous ~480px), et les modales
 * (éditeur d'image, lecteur de livre) empilent leurs panneaux latéraux
 * au lieu de les mettre côte à côte. Un seul point de rupture à 720px
 * suffit pour l'essentiel ; 480px affine la grille et les colonnes.
 * ------------------------------------------------------------------- */
@media (max-width: 720px) {
  .store-topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }

  .store-brand {
    order: 1;
  }

  .store-user {
    order: 2;
    margin-left: auto;
  }

  .drive-storage-label {
    display: none;
  }

  .store-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .store-nav a {
    flex-shrink: 0;
  }

  .drive-search {
    order: 4;
    width: 100%;
    max-width: none;
    flex-basis: 100%;
  }

  .store-page {
    padding: 18px 14px 40px;
  }

  .drive-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .drive-toolbar-actions {
    flex-wrap: wrap;
  }

  .drive-view-switch {
    order: -1;
  }

  .drive-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  /* La vue "détail" (colonnes nom/meta/date façon tableau) n'a pas la
     place de s'afficher en colonnes sous 720px : on la réduit à la même
     mise en page compacte que la vue "liste". */
  .drive-grid.view-detail .drive-card,
  .drive-grid.view-detail .drive-parent-card {
    grid-template-columns: none;
  }

  .drive-grid.view-detail .drive-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .drive-image-main {
    flex-direction: column;
  }

  .drive-image-layers {
    width: 100%;
    max-height: 160px;
  }

  .drive-book-body {
    padding: 10px 14px;
  }

  #drive-book-search {
    width: 100%;
  }

  .drive-book-viewport {
    gap: 6px;
  }

  .drive-book-nav {
    width: 34px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .drive-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }

  .drive-toolbar-actions .btn {
    padding: 7px 12px;
    font-size: 12px;
  }

  .drive-image-toolbar {
    gap: 6px;
  }

  #drive-image-size {
    width: 70px;
  }
}