.docs-title-truncate {
  display: inline-block;
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: var(--weight-semibold);
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-sm);
}

.pdf-preview-frame {
  width: 100%;
  height: 600px;
  border: 0;
  display: block;
}

/* Barre d'attente du depot. */

/* `[hidden]` d'abord : une regle de classe l'emporte sur la regle du
   navigateur, et sans cette ligne la barre restait affichee en permanence,
   y compris la ou elle ne doit jamais apparaitre. */
.docs-attente[hidden] {
  display: none;
}

.docs-attente {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-wrap: wrap;
  padding: var(--space-2-5) var(--space-3-5);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
}

/* Cible de depot. Le liseré doit se voir sans deplacer le contenu : une
   bordure ferait sauter la mise en page d'un pixel a chaque survol, d'ou
   l'ombre portee. */
.arbo-pane--drop-fichier {
  box-shadow: inset 0 0 0 2px var(--color-primary);
  background: var(--color-bg-subtle);
}

.docs-ligne--drop-fichier {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Voile d'attente pendant le televersement : un lot de dix plans prend
   plusieurs secondes, et sans repere l'utilisateur relache une deuxieme fois. */
.docs-depot-en-cours {
  opacity: 0.55;
  pointer-events: none;
}

/* La recherche occupe le centre de la ligne de titre. `flex: 1` lui donne
   tout l'espace laisse par le titre et les boutons ; `margin: auto` recentre
   le champ dedans, plutot que de l'etirer sur 900 px. */
.docs-recherche {
  flex: 1;
  min-width: 200px;
  display: flex;
}

/* Sous 1 280 px, la recherche passe sous le titre et les actions, sur toute la largeur :
   entre les deux, le titre tombait à 78 px (« Docume », #397). La ligne d'en-tête
   se replie (`flex-wrap` dans explorateur.html). */
@media (width < 1280px) {
  .docs-recherche {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }
}

/* Rien n'indiquait que le titre etait un lien : ni soulignement, ni couleur,
   seulement la graisse. Or c'est le seul chemin visible vers la fiche depuis
   que le clic sur la ligne selectionne au lieu d'ouvrir. */
[data-ouvre-fiche] {
  color: var(--color-primary);
}

tr:hover [data-ouvre-fiche] {
  text-decoration: underline;
}

.docs-ligne--active {
  background: var(--color-primary-light);
}

.panneau__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3-5);
  border-bottom: 1px solid var(--color-border);
}

.panneau__fermer {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-14);
  color: var(--color-text-secondary);
  line-height: var(--leading-none);
}

.panneau__corps {
  padding: var(--space-3) var(--space-3-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
}

.panneau__section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2-5);
}

.panneau__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.panneau__items li {
  line-height: var(--leading-normal);
}

.arbo-vues {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin-bottom: var(--space-3);
}

.arbo-vue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-13);
  color: var(--color-text);
  text-decoration: none;
}

.arbo-vue:hover {
  background: var(--color-bg-hover);
  text-decoration: none;
}

.arbo-vue--active {
  background: var(--color-primary-light);
  font-weight: var(--weight-medium);
}

/* Densite. La hauteur de ligne n'etait pas dictee par le titre -- corriger
   son retour a la ligne n'avait donc rien change au nombre de documents
   visibles. Elle venait des colonnes etroites qui cassaient leur texte
   (« 2026-001-APD-PLA-001 » dans 110 px) et de 24 px de remplissage
   vertical. Huit lignes par ecran sur un module dont la promesse est de
   retrouver une piece vite, c'est fatigant. */

.docs-cell--titre {
  white-space: normal;
}

/* Un tableau a huit colonnes n'a pas sa place sur un telephone : une ligne
   y faisait 279 px de haut, soit un tiers d'ecran par document. On garde le
   nom, le statut et la date -- de quoi reconnaitre et choisir. */
@media (width <= 768px) {
  .docs-col--secondaire {
    display: none;
  }
}

.arbo-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* Volet de details. Declare APRES `.arbo-layout` : les deux selecteurs ont
   la meme specificite, donc le dernier l'emporte. Pose avant, la regle etait
   ecrasee par la generique et la troisieme colonne ne s'activait JAMAIS --
   le volet tombait dans une ligne implicite, sous l'arborescence, dans une
   colonne deux fois trop etroite.

   Il s'insere en troisieme colonne sur grand ecran et passe en pleine
   largeur en dessous quand la place manque, plutot que d'ecraser le contenu. */
.arbo-layout--details {
  grid-template-columns: 240px 1fr 300px;
}

.arbo-pane--details {
  font-size: var(--text-13);
}

@media (width < 1280px) {
  .arbo-layout--details {
    grid-template-columns: 240px 1fr;
  }

  .arbo-pane--details {
    grid-column: 1 / -1;
  }
}

/* Sous 1024 px les deux volets ne tiennent plus cote a cote : la grille
   restait figee a 280px + 1fr et le volet droit tombait a 26 px de large,
   rendant l'ecran inutilisable en mobile. La liste plate, qui etait le seul
   chemin praticable sur petit ecran, ayant disparu avec la fusion, il fallait
   que l'explorateur y soit lisible. */
@media (width <= 1024px) {
  /* Écrit après `.arbo-layout` et `.arbo-layout--details` (même spécificité : l'ordre
     décide), et nommant les deux — pas de `!important`. */
  .arbo-layout,
  .arbo-layout--details {
    grid-template-columns: 1fr;
  }

  .arbo-pane--left {
    max-height: 240px;
    overflow-y: auto;
  }
}

.arbo-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.arbo-fil {
  font-size: var(--text-13);
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

.arbo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: var(--space-2-5);
}

.arbo-item--drop-target {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}

/* `[draggable="true"]` nu dans le gabarit : devenu global, tout élément déplaçable du
   site aurait pris ce curseur. Restreint à ce que l'explorateur rend déplaçable. */
[data-drag-type][draggable="true"] {
  cursor: grab;
}

[data-drag-type][draggable="true"]:active {
  cursor: grabbing;
}