/* drive.tdlm.tv (D, maquette de C) : la mise en page de Tournages (app.css : .layout, .sidebar,
   .main, .toolbar, .crumbs, .side-item, .side-section, .segmented), plus l'arbre, la liste et la
   grille du drive. Classes en dv- : rien ne déborde sur les autres sites. Un nom de fichier est
   isolé de son entourage (unicode-bidi) ; ses propres caractères de contrôle bidirectionnels sont
   remplacés à l'affichage (bidiSafe, ui.js). */

.dv-name { unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- Barre latérale : l'arbre, un niveau à la fois ---- */
.dv-tree { padding: 0 8px 12px; overflow-y: auto; flex: 1; min-height: 0; }
.dv-tree .side-section { padding-left: 10px; }
.dv-tree-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; min-height: 30px; font-size: 13px; }
.dv-tree-row:hover { background: rgba(127, 127, 127, 0.12); }
.dv-tree-row.on { background: var(--accent-soft); }
.dv-tree-row.on .dv-nm { color: var(--accent-text); font-weight: 600; }
.dv-tree-row[data-depth="1"] { padding-left: 14px; }
.dv-tree-row[data-depth="2"] { padding-left: 28px; }
.dv-tree-row[data-depth="3"] { padding-left: 42px; }
.dv-tree-row[data-depth="4"] { padding-left: 56px; }
.dv-tree-row[data-depth="5"], .dv-tree-row[data-depth="6"] { padding-left: 70px; }
.dv-tw { flex: none; width: 20px; height: 26px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; border-radius: 6px; }
.dv-tw svg { width: 10px; height: 10px; }
.dv-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 2px; color: var(--text); text-decoration: none; }
.dv-nm .ico { flex: none; color: var(--text-2); }
.dv-me { min-width: 0; flex: 1; }

/* ---- Barre du haut, en-tête ---- */
.dv-crumbs .dv-name { max-width: 28ch; display: inline-block; vertical-align: bottom; }
.dv-actions { display: inline-flex; align-items: center; gap: 8px; }
.dv-back { display: none; align-items: center; gap: 2px; color: var(--accent-text); font-size: 15px; min-height: 44px; text-decoration: none; min-width: 0; }
.dv-back .dv-name { max-width: 40vw; }
.dv-content { padding: 0; }
.dv-head { padding: 16px 20px 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dv-head h1 { font-size: var(--fs-title); margin: 0; letter-spacing: -0.02em; unicode-bidi: isolate; overflow-wrap: anywhere; }
.dv-head .meta { color: var(--text-2); font-size: 13px; }
.dv-body { padding: 8px 20px 40px; }

/* ---- Liste ---- */
.dv-list { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.dv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 130px 130px 36px; align-items: center; gap: 10px; padding: 0 12px; min-height: 44px; border-top: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.dv-row:first-child { border-top: none; }
.dv-row.head { min-height: 34px; font-size: 12px; color: var(--text-2); font-weight: 600; background: var(--bg); cursor: default; }
.dv-row:not(.head):hover { background: rgba(127, 127, 127, 0.07); }
.dv-row:focus-visible, .dv-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dv-sort { all: unset; cursor: pointer; font: inherit; color: inherit; justify-self: start; border-radius: 4px; }
.dv-sort.on { color: var(--text); }
.dv-sort:focus-visible { outline: 2px solid var(--accent); }
.dv-nmw { min-width: 0; display: flex; flex-direction: column; }
.dv-sub { display: none; font-size: 12px; color: var(--text-2); }
.dv-num, .dv-dt { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-st { min-width: 0; overflow: hidden; }
.dv-st .tag { white-space: nowrap; }
.dv-more { opacity: 0; }
.dv-row:hover .dv-more, .dv-row:focus-within .dv-more, .dv-more:focus-visible { opacity: 1; }

/* Icône ou vignette d'un élément */
.dv-ic { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; overflow: hidden; flex: none; }
.dv-ic.dir { color: #5ac8fa; }
.dv-ic.aud { background: var(--bg-sunken); color: var(--text-2); }
.dv-ic.doc { background: var(--bg-sunken); color: var(--text-2); font-size: 9px; font-weight: 700; letter-spacing: 0.02em; }
.dv-ic.img { background: var(--bg-sunken); }
.dv-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Grille ---- */
.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.dv-tile { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; min-width: 0; }
.dv-th { aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--text-2); background: var(--bg-sunken); position: relative; }
.dv-th.dir { background: transparent; }
.dv-th .dv-ic { width: 64px; height: 64px; border-radius: 12px; }
.dv-th .dv-ic .ico { width: 40px; height: 40px; }
.dv-th .dv-ic.doc { font-size: 18px; background: transparent; }
.dv-th .dv-ic.img.tile { width: 100%; height: 100%; border-radius: 0; }
.dv-dur { position: absolute; right: 6px; bottom: 6px; font: 600 11px var(--mono); color: #fff; background: rgba(0, 0, 0, 0.6); padding: 1px 5px; border-radius: 4px; }
.dv-cap { padding: 8px 10px; min-width: 0; }
.dv-cap .dv-name { display: block; font-size: 13px; font-weight: 500; }
.dv-mt { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Sélection, glisser-déposer, déplacer (étape 2) ---- */
.dv-row.sel, .dv-row.sel:hover { background: var(--accent-soft); }
.dv-row.sel .dv-more { opacity: 1; }
.dv-tile.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.dv-row.dv-target, .dv-tile.dv-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.dv-body.dv-drop { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: var(--r-lg); background: var(--accent-soft); }
/* Barre de la sélection : toujours en bas de l'écran (relecture de C), centrée sur la zone de contenu,
   sous le panneau des envois (40), les menus et les fenêtres. Le corps garde en bas une marge à sa
   hauteur : la dernière ligne ne passe pas dessous. */
.dv-selbar { position: fixed; z-index: 30; left: calc(var(--sidebar-w) + 20px); right: 20px; bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0 auto; width: fit-content; max-width: calc(100vw - var(--sidebar-w) - 40px); display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: var(--r-pill);
  background: var(--glass-menu); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 13.5px; }
.dv-selcount { margin-right: 6px; white-space: nowrap; }
.dv-selacts { display: flex; align-items: center; gap: 8px; }
.dv-narrow { display: none; }
.dv-body.dv-has-sel { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.dv-pick-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 8px; }
.dv-link { all: unset; cursor: pointer; color: var(--accent-text); border-radius: 4px; padding: 2px 4px; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.dv-link:focus-visible { outline: 2px solid var(--accent); }
.dv-pick { display: grid; gap: 2px; max-height: min(50vh, 360px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; }
.dv-pick-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dv-pick-row:hover { background: rgba(127, 127, 127, 0.1); }
.dv-pick-row .dv-name { flex: 1; }
.dv-pick-row:disabled { opacity: 0.45; cursor: default; }
.dv-pick.dv-pick-none { border: 0; padding: 4px 2px; }
.dv-pick-here { font-weight: 600; padding: 2px 4px; margin-right: auto; }
.dv-pick-crumbs .dv-pick-search { flex: 1 1 100%; margin-top: 6px; }
.dv-expose { margin: 0 0 8px; unicode-bidi: plaintext; }
.dv-pick-none p { margin: 0; }
/* Corbeille : nom et projet d'origine, taille, quand, par qui, Restaurer. */
.dv-trash .dv-row { grid-template-columns: 34px minmax(0, 1fr) 96px 110px 130px auto; cursor: default; }
.dv-sub.dv-sub-on { display: block; }

/* ---- Vide, fichier sans aperçu, compte sans dossier ---- */
.dv-empty { text-align: center; padding: 60px 20px; color: var(--text-2); }
.dv-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.dv-sheet { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.dv-sheet .dv-ic { width: 64px; height: 64px; border-radius: 12px; font-size: 16px; }
.dv-sheet-meta { display: grid; gap: 4px; justify-items: start; }
.dv-products { display: grid; gap: 8px; margin: 16px 0; text-align: left; }
.dv-product { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text); text-decoration: none; min-height: 44px; }
.dv-product .label { flex: 1; display: grid; }
.dv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* Sans barre latérale (app.css la cache sous 860 px) : la barre de sélection prend la largeur. */
@media (max-width: 860px) {
  .dv-selbar { left: 12px; right: 12px; max-width: calc(100vw - 24px); }
}

/* ---- À l'étroit (maquette de C : 760 px) ---- */
@media (max-width: 760px) {
  .dv-row { grid-template-columns: 34px minmax(0, 1fr) 36px; }
  .dv-row .dv-num, .dv-row .dv-dt, .dv-row .dv-st { display: none; }
  .dv-row.head { display: none; }
  .dv-sub { display: block; }
  .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dv-head, .dv-body { padding-left: 16px; padding-right: 16px; }
  .dv-wide { display: none; }
  .dv-crumbs { display: none; }
  .dv-back { display: inline-flex; }
  .dv-back.hidden { display: none; }
  .dv-trash .dv-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .dv-narrow { display: inline; }
  /* Sélection : le compte et × en haut, les trois actions courtes sur une ligne, sous le pouce. */
  .dv-selbar { width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 6px 6px 8px 14px; border-radius: var(--r-lg); }
  .dv-selacts { grid-column: 1 / -1; grid-row: 2; padding-right: 2px; }
  .dv-selacts .btn { flex: 1; min-width: 0; }
  .dv-body.dv-has-sel { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* ---- Au doigt : 44 px (après les règles de base de même poids) ---- */
@media (hover: none), (pointer: coarse) {
  .dv-row { min-height: 52px; }
  .dv-tree-row { min-height: 44px; }
  .dv-tw { width: 44px; height: 44px; }
  .dv-nm { min-height: 44px; }
  .dv-more { opacity: 1; }
  .dv-sort { min-height: 44px; display: inline-flex; align-items: center; }
  .dv-back { min-width: 44px; }
  .dv-pick-row { min-height: 44px; }
  .dv-link { min-height: 44px; display: inline-flex; align-items: center; }
}