/* .item-wrapper affiche deux colonnes sur le item show */
.item-wrapper { display: flex; height: 100%; }
.item-wrapper .metadata { width: 40%; }
.item-wrapper .media { width: 60%; }
@media screen and (max-width: 1000px) {
  .item-wrapper { flex-direction:column; height: auto; }
  .item-wrapper .metadata,
  .item-wrapper .media { width: 100%; } 
}



/* ARIANE */
.block-ariane { margin: 0px !important; }



/* AFFICHAGE DES METADATA */
.metadata {
	padding: var(--spacing);
  display: flex; flex-direction: column;
  gap: var(--spacing);
}
.media {
	padding: var(--spacing);
	background-color: var(--beige);
}
.media-sticky-wrapper{
  position: sticky; top: calc(var(--common-header-height) + var(--spacing));
}

/* reglages typos des metadata */
.metadata h2 { font: var(--asap-2); font-weight: bold; }
.metadata dl a { text-decoration: underline; }
.metadata dl a:hover{ text-decoration: none; color: var(--orange); }
.metadata h4 { font: var(--asap-condensed-h4); font-weight: 600; }
.metadata h5 { font: var(--asap-condensed-h5); font-weight: 600; }
.metadata h4 { border-top: 2px solid; margin-top: var(--spacing); padding-top: var(--spacing); margin-bottom: var(--spacing);}
.metadata h5 { margin-top: var(--spacing); margin-bottom: var(--spacing); }
.metadata .property dt { font: var(--asap-0); }
.metadata .property dd { font: var(--asap-condensed-1); font-weight: 500; }

/* mise en page des metadata en liste */
.metadata dl {
    display: flex; flex-direction: column; gap: var(--spacing);
}
/* mise en page des metadata qui contiennent des liens vers des resources
  dcterms:relation/dctermsisPartOf
*/
.property:has(.value.resource) dt { display: none; }
.property:has(.value.resource) {
  display: grid; grid-column-gap: var(--spacing); grid-row-gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-element-min-width)), 1fr));
}
.property:has(.value.resource) a {
  display: block; aspect-ratio: 16/10;
  font: var(--asap-condensed-0); text-decoration: none;
}
.property:has(.value.resource) a img { object-fit: cover; height: 100%; width: 100%; }
.property:has(.value.resource) .resource-name {
  padding-top: calc(.5 * var(--spacing));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
/* exception si SCRIPT DESCRIPTOR n'a pas de metadata */
.content-script-descriptor:not(:has(dl)) * {
  display: none;
}
.content-script-descriptor:not(:has(dl)):before {
  content: "No metadata for Script descriptor.";
  font: var(--asap-0);
}
/* metadata des media dans la colonne de droite */
.media .metadata { padding: var(--spacing) 0px; }
.media .metadata > div:not(.active) { display: none; }

/* TABS ITEM DESCRIPTOR ET SCRIPT DESCRIPTOR */
.item-tabs {
    display: flex; gap: calc(1 * var(--spacing));
}
.item-tabs button {
  flex: 1;
  display: grid; place-items: center;
  height: 4rem;
  background-color: var(--beige);
  cursor: pointer;
  border-radius: 8px;

  font: var(--asap-condensed-h4);
  font-weight: 600;
  color: var(--bleu);
}
.item-tabs button.active {
    background-color: var(--orange);
    color: var(--white);
}
.item-tabs button:hover:not(.active) { color: var(--orange); }

/* toggle tab suivant le choix user/js */
.metadata[data-view="item-descriptor"] .content-script-descriptor { display: none; }
.metadata[data-view="script-descriptor"] .content-item-descriptor { display: none; }



/* Viewer, openseadragon and mapping */

.viewer-buttons-top{
  display: flex; gap: calc(.5 * var(--spacing));
}
.viewer-toggle-layout-container { margin-right: auto; display: flex; gap: calc(.5 * var(--spacing));}
.viewer-buttons-bottom {
  margin-top: calc(.5 * var(--spacing));
  display: flex;
}
@media screen and (max-width: 500px) {
  .viewer-buttons-bottom {
    flex-direction: column; gap: calc(.5 * var(--spacing));
  }
}
#openSeaDragon-tools {
  display: flex; gap: calc(.5 * var(--spacing));
  position: relative;
}
.media-pagination {
  font: var(--asap-condensed-0);
  position: absolute;
  top: calc(1.2 * var(--picto-width)); right: 0;
}
.viewer-buttons-bottom:not(:has(.viewer-toggle-layout-container)) .media-pagination {
  top: calc(.5 * var(--picto-width)); right: calc(-1.1 * var(--picto-width));
}
.viewer-wrapper .hidden,
#openSeaDragon-tools.hidden{
  display:none;
}

.viewer-wrapper {
  background-color:var(--bleu);
}

#openSeaDragon-wrapper, #mapping-wrapper {
  width: 100%;
  aspect-ratio:16/10;
}

#mapping-wrapper #map{
  z-index:1;
}

/* BOUTONS */

/* iiif */

.iiif-copy {
  background: url("../media/iiif-gris.svg") 0% / contain no-repeat;
  width:var(--picto-width); height:var(--picto-width);
  border:none;
}
.iiif-copy:hover {
  background: url("../media/iiif-plein-defonce.svg") 0% / contain no-repeat;
  cursor: pointer;
}

/* openSeaDragon */

#openSeaDragon-toggleButton {
  background: url("../media/visionneuse-gris.svg");
}
#openSeaDragon-toggleButton:hover,
#openSeaDragon-toggleButton.active {
  background: url("../media/visionneuse-plein-gris.svg");
}

/* mapping */

#mapping-toggleButton {
  background: url("../media/carte-gris.svg");
}
#mapping-toggleButton:hover,
#mapping-toggleButton.active {
  background: url("../media/carte-plein-gris.svg");
}

/* zoom in */

#openSeaDragon-zoomInButton {
  background: url("../media/plus-gris.svg");
}
#openSeaDragon-zoomInButton:hover {
  background: url("../media/plus-plein-gris.svg");
}

/* zoom out */

#openSeaDragon-zoomOutButton {
  background: url("../media/moins-gris.svg");
}
#openSeaDragon-zoomOutButton:hover {
  background: url("../media/moins-plein-gris.svg");
}

/* home */

#openSeaDragon-homeButton {
  background: url("../media/recentrer-gris.svg");
}
#openSeaDragon-homeButton:hover {
  background: url("../media/recentrer-plein-gris.svg");
}

/* fullpage */

#openSeaDragon-fullPageButton {
  background: url("../media/agrandir-gris.svg");
}
#openSeaDragon-fullPageButton:hover {
  background: url("../media/agrandir-plein-gris-defonce.svg");
}

/* previous */

#openSeaDragon-previousButton {
  background: url("../media/fleche-gris.svg");
}
#openSeaDragon-previousButton:hover {
  background: url("../media/fleche-plein-gris.svg");
}

/* next */

#openSeaDragon-nextButton {
  transform: rotate(180deg);
  background: url("../media/fleche-gris.svg");
}
#openSeaDragon-nextButton:hover {
  background: url("../media/fleche-plein-gris.svg");
}


/* CITATION POPUP */

#citation-popup .block.block-html > *:not(:last-child) {
    margin-bottom: var(--spacing);
}

#citation-popup .block:not(:last-child) { margin: var(--spacing) 0px; }