/* ==========================================================================
   Module Fichiers — feuille de style
   Chargée APRÈS celle du socle, et seulement là où le module est installé.

   Elle ne contient QUE ce qui n'existe pas sans le module : la zone de
   dépôt, la barre des lots, le bandeau de transfert, les doublons et la
   reprise. Tout le reste — tableaux, boutons, entrées, menus, modales,
   repliement sur téléphone — vient du socle, et c'est ce qui fait qu'un
   module se fond dans l'application sans redéfinir une charte.

   Les couleurs sont celles du socle, par leur nom : --primaire, --accent,
   --alerte… Un module n'écrit JAMAIS un code hexadécimal, sinon changer la
   charte d'un client demanderait de passer dans chaque module.
   ========================================================================== */

/* --- Zone de dépôt ------------------------------------------------------- */
.depot { margin-bottom: 1.4rem; }
.depot__cible {
  border: 2px dashed var(--line-fort); border-radius: var(--rayon);
  background: var(--bg); padding: 2rem 1.2rem; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.depot__cible.survol { border-color: var(--primaire); background: var(--bg-deep); }
.depot__consigne { margin: 0 0 .4rem; font-size: 1rem; }
.depot__consigne strong { color: var(--fonce); }
.depot__limite { margin: 0; font-size: .82rem; color: var(--ink-soft); }

.depot__liste { list-style: none; margin: .9rem 0 0; padding: 0; }
.depot__liste li {
  /* `wrap` est indispensable : le message d'erreur et les boutons d'un
     fichier déjà présent demandent toute la largeur (flex-basis: 100%), et
     sans lui ils se faisaient écraser en colonnes d'une lettre. */
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  padding: .55rem .8rem; margin-bottom: .35rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--rayon);
  font-size: .88rem;
}
.depot__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot__barre { width: 130px; height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
.depot__barre i { display: block; height: 100%; width: 0; background: var(--primaire); transition: width .2s ease; }
.depot__etat { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--ink-soft); min-width: 5.5rem; text-align: right; }
.depot__liste li.ok .depot__etat { color: var(--succes); }
.depot__liste li.ko .depot__etat { color: var(--alerte); }
.depot__liste li.ko { border-color: var(--alerte-bord); background: var(--alerte-pale); }
.depot__message { flex-basis: 100%; font-size: .8rem; color: var(--alerte); }


/* --- Agir sur plusieurs éléments à la fois -------------------------------- */
.colonne-case { width: 1%; padding-right: 0; }
.colonne-case input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
/* La case se vise mal au doigt : l'intitulé qui l'enveloppe remplit la
   cellule, et c'est toute la cellule qu'on peut toucher. */
.case-zone {
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: .35rem; cursor: pointer;
}

@media (max-width: 620px) {
  /* Sur un iPhone SE, trente pixels de colonne suffisaient à faire déborder
     la liste de fichiers de son cadre. */
  .colonne-case { padding-left: .35rem; padding-right: 0; }
  .colonne-case input[type="checkbox"] { width: 16px; height: 16px; }
}

.barre-lot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: .8rem; padding: .7rem .9rem;
  background: var(--bg); border: 1px solid var(--primaire);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
/* `display: flex` l'emporterait sur le `display: none` que le navigateur
   donne à [hidden] : la barre resterait affichée sans rien de coché. */
.barre-lot[hidden] { display: none; }
.barre-lot__compte { font-weight: 700; color: var(--fonce); }
.barre-lot__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-left: auto;
}

@media (max-width: 620px) {
  /* Collée en bas de l'écran, elle reste sous le pouce pendant qu'on fait
     défiler la liste pour cocher. */
  .barre-lot { margin-left: -.8rem; margin-right: -.8rem; border-radius: 0; }
  .barre-lot__actions { margin-left: 0; width: 100%; }
  .barre-lot__actions .bouton { flex: 1 1 auto; justify-content: center; }
}

/* --- Le bandeau d'un lot en cours de dépôt -------------------------------- */
.depot-bandeau {
  margin: .9rem 0 .4rem; padding: .6rem .8rem;
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--rayon);
}
.depot-bandeau__haut {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin-bottom: .45rem; font-size: .86rem;
}
.depot-bandeau__titre { font-weight: 600; color: var(--fonce); }
.depot-bandeau__debit {
  margin-left: auto; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.depot-bandeau__barre { width: 100%; height: 8px; }

@media (max-width: 620px) {
  .depot-bandeau__debit { margin-left: 0; }
}

/* --- Un fichier déjà présent --------------------------------------------- */
.depot__liste li.doublon { border-left: 3px solid var(--accent); background: var(--accent-pale); }
.depot__liste li.doublon .depot__etat { color: var(--accent-fonce); }
.depot__liste li.doublon .depot__message { color: var(--ink-soft); }
.depot__liste li.ignore .depot__nom { opacity: .55; text-decoration: line-through; }
.depot__choix { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; flex-basis: 100%; }

@media (max-width: 620px) {
  /* Le nom prend sa ligne, la barre et l'état la suivante : à 390 px, les
     trois côte à côte ne laissaient au nom que quelques caractères. */
  .depot__nom { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .depot__barre { flex: 1 1 auto; width: auto; }
  .depot__choix .bouton { flex: 1 1 auto; justify-content: center; }
}

/* --- Reprise d'un dépôt interrompu --------------------------------------- */
.depot-reprise {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: .6rem 0 0;
}
.depot-reprise > span:first-child { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------- Écrans tactiles --
 *  Dimensionné par le pointeur et non par la largeur : une tablette de 768 px
 *  se vise avec un doigt, la fenêtre rétrécie d'un ordinateur avec une
 *  souris. 44 px est la recommandation d'Apple comme de Google, et la
 *  différence entre « ça marche » et « je n'arrive pas à cliquer ».
 */
/* Le doigt, et non la largeur de l'écran : une tablette de 768 px se touche
   autant qu'un téléphone de 375. Tout ce qui se vise est donc dimensionné
   ici, sous « pointer: coarse », et non dans une requête de largeur. */
@media (pointer: coarse) {
  .bouton, .bouton--petit { min-height: 44px; }
  /* Le « ⋯ » qui ouvre les actions d'un fichier mesurait 32 px de côté —
     c'est pourtant le bouton le plus souvent visé de l'application. */
  .menu__declencheur { min-width: 44px; min-height: 44px; }
  .barre__menu { min-width: 44px; min-height: 44px; }
  /* Un titre dépliant se vise avec le pouce, lui aussi. */
  summary { min-height: 44px; display: flex; align-items: center; }

  /* Une case à cocher de 13 px se rate une fois sur trois. On l'agrandit, et
     on étend sa zone sensible à l'intitulé qui la suit. */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  }
  .liste-cochable label, .champ.form-field-checkbox label { min-height: 44px; }
  .case-zone { min-height: 44px; min-width: 40px; }
  .colonne-case input[type="checkbox"] { width: 24px; height: 24px; }

  /* Les deux liens de la barre du haut : le logo, qui ramène aux fichiers, et
     la pastille, qui mène au compte. */
  .marque, .pastille-lien { min-height: 44px; display: flex; align-items: center; }
  .pastille { width: 40px; height: 40px; }

  /* Un lien isolé dans un tableau ou un intitulé reste visable. */
  .tableau a, .liste-remarques a { min-height: 32px; display: inline-flex; align-items: center; }
  /* Le fil d'Ariane sert à remonter d'un dossier : c'est un lien qu'on vise
     souvent, et il faisait 16 px de haut. */
  .fil a { min-height: 32px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* --- Volet d'aperçu -------------------------------------------------------
   Repris de MUST APP : un clic sur un nom ouvre le fichier dans un volet à
   droite, sans quitter la liste. La liste et le volet se partagent alors la
   largeur à parts égales ; sous 900 px, la moitié d'écran ne suffit plus à
   rien, et le volet passe en plein écran par-dessus la liste. */
.fichiers-disposition { display: flex; gap: 18px; align-items: flex-start; }
.fichiers-liste { flex: 1 1 auto; min-width: 0; }

.apercu[hidden] { display: none; }
.apercu {
  flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); min-width: 0;
  display: flex; flex-direction: column;
  /* Collé sous la barre du haut pendant qu'on fait défiler une longue liste ;
     « height » et pas seulement « max-height » : sans elle, un volet au
     contenu court ne prenait que la hauteur de ses boutons. */
  position: sticky; top: calc(var(--barre-h) + 14px);
  height: calc(100vh - var(--barre-h) - 28px);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
/* La liste resserrée garde l'essentiel : la taille et la date passent dans
   l'en-tête du volet, l'auteur se retrouve dans le menu du fichier. */
.fichiers-disposition.apercu-ouvert .colonne-masquable { display: none; }

.apercu__entete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
}
.apercu__titres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.apercu__nom { font-weight: 700; color: var(--fonce); overflow-wrap: anywhere; }
.apercu__meta { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.apercu__fermer {
  flex: 0 0 auto; background: none; border: 0; padding: .1rem .3rem;
  font-size: 1.1rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.apercu__fermer:hover { color: var(--fonce); }

.apercu__corps {
  flex: 1; min-height: 0; overflow: auto; padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
}
/* L'image tient dans le volet ; un clic la montre à sa taille réelle, avec
   défilement, et un second clic la remet à la taille du volet. */
.apercu__corps img { max-width: 100%; max-height: 100%; border-radius: var(--rayon); cursor: zoom-in; }
.apercu__corps.zoome { align-items: flex-start; justify-content: flex-start; }
.apercu__corps.zoome img { max-width: none; max-height: none; cursor: zoom-out; }
.apercu__corps iframe { width: 100%; height: 100%; border: 0; border-radius: var(--rayon); background: var(--bg); }
.apercu__corps pre {
  width: 100%; align-self: flex-start; margin: 0;
  white-space: pre-wrap; word-break: break-word; font-size: .82rem;
}
.apercu__vide { text-align: center; color: var(--ink-soft); }
.apercu__vide .vignette { margin: 0 auto .8rem; }

.apercu__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem;
  padding: .7rem 1rem .9rem; border-top: 1px solid var(--line);
}
.apercu__actions [hidden] { display: none; }

/* Le point vert devant le fichier ouvert dans le volet. Posé hors du flux,
   dans la marge de la cellule : il apparaît sans décaler le nom. */
.entree { position: relative; }
.apercu-point {
  position: absolute; left: -.6rem; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--succes);
  opacity: 0; transition: opacity .15s ease;
}
.apercu-point.actif { opacity: 1; }

@media (max-width: 900px) {
  .apercu {
    position: fixed; inset: 0; z-index: 150;
    width: 100vw; height: 100vh; height: 100dvh;
    border: 0; border-radius: 0;
  }
  .apercu__actions { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
}