/* =============================================================================
   FICHE D'UNE NOTICE — /items/show/<id>
   =============================================================================
   Ne concerne que cette page : tout est prefixe par `.items.show.item-sheet`,
   la classe de body posee par views/shared/eman/items-show.php.

   Carte de tete, blocs, grille des champs, blocs de plugins et mentions
   viennent des composants communs du theme (cards.css, page.css), comme sur
   la fiche d'un fichier : une notice qui renvoie vers un de ses fichiers ne
   doit pas donner l'impression de changer de site. Ne reste ici que ce qui
   est propre a la notice : les colonnes, la visionneuse, la galerie des
   folios et les notices liees.

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

     #breadcrumb-container    le fil d'Ariane (ui-templates-breadcrumb.css)
     #item-sheet              les deux colonnes
       #item-sheet__left        colonne gauche du template
       #item-sheet__right       colonne droite du template
         a leur rang dans l'une ou l'autre : #item-sheet__header (titre, auteur),
         .item-sheet__media (la visionneuse), #item-sheet__transcription
         .eman-card--section      une carte par bloc
         .item-sheet__gallery     la galerie des folios, ou qu'elle soit
     #item-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-items        les autres notices de la collection

   -- 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. La notice s'annonce d'abord : le titre et
   l'auteur, puis le document, ouvrent la colonne que le template leur donne.
   C'est la disposition de la fiche d'un fichier.

   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 colonnes et la pleine largeur -------------------------------- */

/* La bande pleine largeur, sous les deux colonnes. Elle empile ses cartes
   comme une colonne (.eman-stack), mais sur toute la largeur. */
.items.show.item-sheet #item-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. */
.items.show.item-sheet #item-sheet + #item-sheet__full {
  margin-top: var(--eman-gap);
}

/* 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). */
.items.show.item-sheet #item-sheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eman-gap);
  align-items: start;
  float: none;
  width: auto;
}

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

/* La visionneuse prend toute sa carte : aucun rembourrage, ni sur les cotes ni
   en haut et en bas — la carte est en .eman-card--np, c'est .eman-card__body
   qui le pose, et lui seul est a reprendre. La galerie des folios, elle, garde
   le rembourrage courant des blocs : c'est une carte comme les autres. */
.items.show.item-sheet .item-sheet__media .eman-card__body {
  padding: 0;
}

/* La visionneuse est une iframe : sans largeur explicite elle reste a sa
   largeur intrinseque, plus etroite que la colonne. */
.items.show.item-sheet .item-sheet__media iframe {
  display: block;
  width: 100%;
}

/* Les blocs de plugins peuvent defiler lateralement (voir plus bas) ; pas la
   visionneuse. Elle se dimensionne en mesurant ce conteneur : s'il prend une
   barre de defilement, la mesure perd sa largeur, la visionneuse retrecit, et
   l'on tourne en rond. Ici rien ne deborde, on coupe donc court. */
.items.show.item-sheet .item-sheet__media .item-sheet__plugin {
  overflow: hidden;
}


/* !---------- Les folios ------------------------------------------------------ */

/* La phrase d'aide et le decompte des fichiers sont deux lignes de service :
   du texte menu, discret, qui n'entre pas en concurrence avec les vignettes.
   Elles se tiennent l'une sous l'autre, serrees, et laissent l'air avant la
   galerie. */
.items.show.item-sheet .item-sheet__gallery .itemfiles__hint,
.items.show.item-sheet .item-sheet__gallery .itemfiles__count {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--eman-ombre);
}

.items.show.item-sheet .item-sheet__gallery .itemfiles__count {
  margin-bottom: 1em;
}

/* Les vignettes : la gouttiere vient du rembourrage des cellules du carrousel,
   qui portent chacune une largeur en ligne — un `gap` n'aurait pas de prise.
   Le carrousel se decale d'autant pour que la premiere et la derniere colonne
   restent alignees sur le rembourrage de la carte. La galerie occupe par
   ailleurs toute la largeur de celle-ci : le carrousel est borne en ligne a
   450px par la vue, ce que seul un !important peut reprendre. */
.items.show.item-sheet .item-sheet__gallery #files-carousel {
  max-width: none !important;
  margin-left: -0.35em;
  margin-right: -0.35em;
}

.items.show.item-sheet .item-sheet__gallery .item-file {
  position: relative;
  padding: 0 0.35em 0.7em;
  margin: 0;
  box-sizing: border-box;
}

/* Un cadre du theme, a peine arrondi : --eman-lin est le filet marque de la
   palette, assez present pour poser la vignette sans lui voler la vedette. */
.items.show.item-sheet .item-sheet__gallery .item-file a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--eman-lin);
  border-radius: 2px;
  background-color: var(--eman-texte-inverse);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Le filet rouge que ui-templates.css pose sur les folios transcrits n'a pas
   sa place dans la fiche : c'est le lien qui porte le cadre, et la
   transcription se lit ailleurs. */
.items.show.item-sheet .item-sheet__gallery .transcripted img {
  border: 0;
  border-radius: 0;
}

/* L'infobulle du titre : meme idiome que les boutons de /transcription/browse
   (plugins/Transcript/css/transcript.css) — un bandeau d'encre, coins a peine
   casses, qui parait au survol sans le delai d'une seconde de l'attribut
   title. Elle se pose sur le bas de la vignette et non au-dessus : le
   carrousel coupe ce qui deborde de ses cellules. */
.items.show.item-sheet .item-sheet__gallery .custom-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 0.35em;
  right: 0.35em;
  bottom: 0.7em;
  z-index: 100;
  padding: 4px 8px;
  background-color: var(--eman-encre-nuit);
  color: var(--eman-texte-inverse);
  border-radius: 0 0 2px 2px;
  font-size: 0.85em;
  line-height: 1.3;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.items.show.item-sheet .item-sheet__gallery .custom-tooltip:hover::before,
.items.show.item-sheet .item-sheet__gallery .custom-tooltip:focus-within::before {
  opacity: 1;
  visibility: visible;
}

.items.show.item-sheet .item-sheet__gallery .item-file a:hover,
.items.show.item-sheet .item-sheet__gallery .item-file a:focus {
  border-color: var(--eman-encre);
  box-shadow: rgba(0, 0, 0, 0.18) 0 1px 4px;
}

.items.show.item-sheet .item-sheet__gallery .item-file img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}


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

/* Les notices liees : un jeu de champs par notice, chacun sous son titre. Le
   filet separe deux notices — sans lui, les champs de l'une se liraient comme
   la suite de ceux de l'autre. */
.items.show.item-sheet .item-sheet__group+.item-sheet__group {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--eman-filet);
}

.items.show.item-sheet .item-sheet__group-title {
  margin: 0 0 0.4em;
  font-size: 1em;
  font-weight: 500;
}