/* =============================================================================
   FICHE D'UNE COLLECTION — /collections/show/<id>
   =============================================================================
   Ne concerne que cette page : tout est prefixe par
   `.collections.show.collection-sheet`, la classe de body posee par
   views/shared/eman/collections-show.php. /collections/browse et la vue de
   repli du theme (themes/eman/collections/show.php) n'en sont pas touchees.

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

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

     #breadcrumb-container          le fil d'Ariane (ui-templates-breadcrumb.css)
     #collection-sheet              les deux colonnes
       #collection-sheet__left        colonne gauche du template
       #collection-sheet__right       colonne droite du template
         a leur rang dans l'une ou l'autre : #collection-sheet__header (titre,
         auteur), puis #collection-sheet__portrait
     #collection-sheet__full        pleine largeur, sous les colonnes
                                    ; toute la fiche, en-tete compris,
                                    quand le template n'a qu'une colonne
       .eman-card--section            les blocs en pleine largeur
       #visualization-container       la ligne de temps (timeline.js)
     .eman-meta                     mentions de bas de fiche

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

   Deux colonnes de meme largeur, puis une bande pleine largeur, comme le
   template les decrit. La collection s'annonce d'abord : titre et auteur,
   puis portrait, ouvrent la colonne que le template leur donne. Chaque bloc
   est une carte, sans grande carte autour.

   La ligne de temps ferme toujours la pleine largeur. Elle garde ses ids
   (timeline.js) ; on ne fait ici que reprendre l'habillage que timeline.css
   lui donne a l'interieur de son conteneur.

   Le contenu des champs suit la grille commune (.eman-fields), la meme que
   sur la fiche d'une notice.

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

:root {
  /* Vignettes des notices. */
  --cs-thumb-size: 64px;
}


/* !---------- Les colonnes et la pleine largeur -------------------------------- */

/* Le theme fait flotter les enfants de #content ; la fiche distribue ici
   elle-meme ses colonnes. */
.collections.show.collection-sheet #collection-sheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eman-gap);
  align-items: start;
  float: none;
  width: auto;
  clear: both;
}

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

/* Chaque colonne, et la pleine largeur, sont des piles de cartes
   (.eman-stack). La pleine largeur ferme la page. */
.collections.show.collection-sheet #collection-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. */
.collections.show.collection-sheet #collection-sheet + #collection-sheet__full {
  margin-top: var(--eman-gap);
}


/* !---------- Le portrait ----------------------------------------------------- */

/* Le portrait est toute la carte, comme l'image de la fiche d'un fichier. */
.collections.show.collection-sheet #collection-sheet__portrait {
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.collections.show.collection-sheet #collection-sheet__portrait img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

/* Sans portrait : un emplacement discret, pour signaler qu'il pourrait y en
   avoir un (Identifier « nom, » et files/original/nom.jpg). Le contenu est
   dans son propre cadre : le bandeau du titre, s'il y en a un, garde ainsi
   les bords de la carte. */
.collections.show.collection-sheet #collection-sheet__portrait.is-empty {
  line-height: 1.4;
  color: var(--eman-lin);
  background-color: var(--eman-clair);
}

.collections.show.collection-sheet .collection-sheet__portrait-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 9em;
  padding: 1.5em 1em;
}

.collections.show.collection-sheet #collection-sheet__portrait.is-empty figcaption {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  text-indent: 0;
  white-space: normal;
  font-size: 0.8em;
  color: var(--eman-ombre);
}


/* !---------- Sous-collections et notices ------------------------------------ */

/* Le decompte est une ligne de service, comme sur la galerie des folios. */
.collections.show.collection-sheet .collection-sheet__count {
  margin: 0 0 0.6em;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--eman-ombre);
}

.collections.show.collection-sheet .collection-sheet__children {
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.45;
}

/* Les notices : une ligne par notice (vignette + texte), sur toute la
   largeur, separees par un filet. */
.collections.show.collection-sheet .collection-sheet__items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collections.show.collection-sheet .collection-sheet__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--eman-filet);
}

.collections.show.collection-sheet .collection-sheet__item:first-child {
  padding-top: 0;
}

.collections.show.collection-sheet .collection-sheet__item:last-child {
  border-bottom: 0;
}

/* Meme cadre que les vignettes de la galerie d'une notice. */
.collections.show.collection-sheet .collection-sheet__thumb {
  display: block;
  flex: none;
  width: var(--cs-thumb-size);
  height: var(--cs-thumb-size);
  overflow: hidden;
  border: 1px solid var(--eman-lin);
  border-radius: 2px;
  background-color: var(--eman-clair);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.collections.show.collection-sheet .collection-sheet__thumb:hover,
.collections.show.collection-sheet .collection-sheet__thumb:focus {
  border-color: var(--eman-encre);
  box-shadow: rgba(0, 0, 0, 0.18) 0 1px 4px;
}

.collections.show.collection-sheet .collection-sheet__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.collections.show.collection-sheet .collection-sheet__item-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.collections.show.collection-sheet .collection-sheet__item-title {
  font-weight: 500;
}

.collections.show.collection-sheet .collection-sheet__item-fields {
  font-size: 0.85em;
  color: var(--eman-ombre);
}

.collections.show.collection-sheet .collection-sheet__all {
  display: flex;
  margin: 1em 0 0;
}

.collections.show.collection-sheet .collection-sheet__all .eman-btn {
  margin-left: auto;
}


/* !---------- La ligne de temps ---------------------------------------------- */

/* timeline.css (plugin TimeLine) range ses regles sous #visualization-container :
   on les reprend ici en le nommant aussi. Le filet noir et le rembourrage du
   plugin cedent a ceux de la carte. */
.collections.show.collection-sheet #visualization-container {
  margin: 0;
  padding: 0;
  border: 0;
}

/* En plein ecran, le fond de page du theme au lieu du gris de timeline.css. */
.collections.show.collection-sheet #visualization-container.is-fullscreen {
  background-color: var(--eman-page);
}

/* Les deux commandes cote a cote, en tete de carte, au lieu d'etre posees en
   absolu par timeline.css. Elles restent dans le flux en plein ecran : le
   conteneur y est deja fixe sur tout l'ecran. */
.collections.show.collection-sheet .collection-sheet__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.collections.show.collection-sheet #visualization-container #fullscreen-btn,
.collections.show.collection-sheet #visualization-container.is-fullscreen #fullscreen-btn,
.collections.show.collection-sheet #visualization-container #toggle-instructions-btn {
  position: static;
  padding: 0 8px;
  background: var(--eman-clair);
  border: 1px solid var(--eman-lin);
  border-radius: 0;
  font-size: 1em;
}

.collections.show.collection-sheet #visualization-container #fullscreen-btn:hover,
.collections.show.collection-sheet #visualization-container #toggle-instructions-btn:hover {
  background-color: var(--eman-papier);
}

/* L'aide est du texte secondaire. */
.collections.show.collection-sheet #visualization-container #instructions-list {
  margin: 0.6em 0 0.9em;
  padding: 0 0 0 1.1em;
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--eman-ombre);
}

.collections.show.collection-sheet #visualization-container #instructions-list.is-collapsed {
  margin: 0;
  padding: 0;
}

.collections.show.collection-sheet #visualization-container #timeline-header-groups {
  border-color: var(--eman-lin);
  font-size: 0.85em;
  color: var(--eman-ombre);
}