/* =============================================================================
   FICHE DE FICHIER — /files/show/<id>
   =============================================================================
   Ne concerne que cette page : tout est prefixe par `.files.show.file-sheet`,
   la classe de body posee par views/shared/eman/files-show.php.

   Carte de tete, blocs, grille des champs et mentions viennent des composants
   communs du theme (cards.css, page.css), comme sur la fiche d'une notice. Ne
   reste ici que ce qui est propre au fichier : les colonnes, l'image et la
   liste des informations techniques.

   -- La page en un coup d'oeil -----------------------------------------------

     #breadcrumb-container    le fil d'Ariane (ui-templates-breadcrumb.css)
     #file-sheet              les deux colonnes
       #file-sheet__left        colonne gauche du template
       #file-sheet__right       colonne droite du template
         a leur rang dans l'une ou l'autre : #file-sheet__header (titre, auteur),
         #file-sheet__image (l'image seule), .file-sheet__image-link (lien
         vers l'original, hors carte), #file-sheet__transcription
         .eman-card--section      une carte par bloc
     #file-sheet__full        les blocs en pleine largeur
                              ; toute la fiche, en-tete compris,
                              quand le template n'a qu'une colonne
     .eman-meta               mentions de bas de fiche
     #eman-pager-files        les autres fichiers de la notice

   -- Le principe -------------------------------------------------------------

   Deux colonnes de meme largeur, puis une bande pleine largeur : c'est le
   template qui range chaque bloc a gauche, a droite ou en pleine largeur, la
   CSS ne fait que les poser. Le titre et l'auteur, puis l'image, ouvrent la
   colonne que le template leur donne.

   Chaque bloc est une carte : c'est le relief qui les separe, il n'y a plus de
   grande carte autour, donc plus de carte dans une carte.

   Sous 900px les deux colonnes s'empilent — celle qui porte le titre
   d'abord (.eman-lead, page.css).
   ========================================================================== */

/* !---------- Les deux colonnes ---------------------------------------------- */

/* Le theme fait flotter les enfants de #content ; ici la fiche tient toute la
   largeur et distribue elle-meme ses colonnes. Chaque colonne est une pile de
   cartes (.eman-stack). */
.files.show.file-sheet #file-sheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eman-gap);
  align-items: start;
  float: none;
  width: auto;
}

@media all and (min-width: 900px) {
  .files.show.file-sheet #file-sheet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* La bande pleine largeur, sous les deux colonnes : une pile de cartes
   (.eman-stack) sur toute la largeur. */
.files.show.file-sheet #file-sheet__full {
  float: none;
  width: auto;
  clear: both;
}

/* Detachee des colonnes par la gouttiere. Sans colonnes (template en une
   seule colonne), elle est toute la fiche et commence ou elles auraient
   commence. */
.files.show.file-sheet #file-sheet + #file-sheet__full {
  margin-top: var(--eman-gap);
}

/* Le lien vers l'original appartient a l'image : il la suit de pres, la
   gouttiere pleine l'en detacherait. */
.files.show.file-sheet #file-sheet__image+.file-sheet__image-link {
  margin-top: calc(var(--eman-gap) * -1 + 0.5em);
}


/* !---------- L'image -------------------------------------------------------- */

/* L'image est toute la carte : elle touche les quatre bords, ce dont se charge
   .eman-card--np. Le lien vers l'original est sous la carte, pas dedans. */
.files.show.file-sheet #file-sheet__image {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  line-height: 0;
}

.files.show.file-sheet #file-sheet__image .panzoom {
  line-height: 0;
}

.files.show.file-sheet #file-sheet__image img {
  display: block;
  width: 100%;
  height: auto;
  /* Un clic ouvre la visionneuse plein ecran du theme (lightbox.css) : le
     pointeur l'annonce, la classe .zoom-trigger de la vue s'en charge. */
}

.files.show.file-sheet .file-sheet__image-link {
  margin: 0;
  font-size: 0.9em;
  color: var(--eman-ombre);
}


/* !---------- Blocs particuliers ---------------------------------------------- */

.files.show.file-sheet .file-sheet__info {
  display: grid;
  grid-template-columns: minmax(6em, 11em) minmax(0, 1fr);
  gap: 0.45em 0.75em;
  margin: 0;
  line-height: 1.45;
}

/* Meme traitement que l'intitule d'un champ : les deux listes se lisent de la
   meme facon, il n'y a pas de raison qu'elles ne se ressemblent pas. */
.files.show.file-sheet .file-sheet__info dt {
  margin: 0;
  padding-top: 0.25em;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--eman-ombre);
}

.files.show.file-sheet .file-sheet__info dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.files.show.file-sheet .file-sheet__citation {
  margin: 0;
}

.files.show.file-sheet .file-sheet__exports {
  margin: 0;
  padding-left: 1.1em;
}