/* ---------------------------------------- fonts */

@font-face {
  font-family: EBGaramond;
  font-style: normal;
  src: url('/fonts/EBGaramond-VariableFont_wght.ttf');
}

@font-face {
  font-family: EBGaramond;
  font-style: italic;
  src: url('/fonts/EBGaramond-Italic-VariableFont_wght.ttf');
}

/* ---------------------------------------- colors */

body {
  --color-base-neutral: #707070;
  --color-medium-neutral: #a8a8a8;
  --color-light-neutral: #dddddd;
  --color-thin-neutral: #f1f1f1;

  --color-base-red: #707070;
  --color-medium-red: #aa746a;
  --color-light-red: #ddcec4;
  --color-thin-red: #fff8f3;

  --color-base-purple: #5c6273;
  --color-medium-purple: #8f91a0;
  --color-light-purple: #d4d3d6;
  --color-thin-purple: #f5f4f9;

  --color-base-blue: #6b909f;
  --color-medium-blue: #9cbcc6;
  --color-light-blue: #c4d5e0;
  --color-thin-blue: #f4f8fb;

  --color-base-green: #737e6c;
  --color-medium-green: #a8b1a2;
  --color-light-green: #ccd5d1;
  --color-thin-green: #f4f7f2;

  --color-base-yellow: #bfa87e;
  --color-medium-yellow: #bfa87e;
  --color-light-yellow: #ece4d6;
  --color-thin-yellow: #fcf4e6;

  --color-lightgray: #d8dddd;
	--color-darkgray: #7a8189;

  --color-orange: #d98d02;
	--color-or: #fece32;
}

/* ---------------------------------------- layout */

html {
  scroll-behavior: smooth;
}

html,
body {
  font-family: EBGaramond, sans-serif;
	font-weight: normal;
  font-size: 100%;
	line-height: 1.2;
  padding: 0;
  margin: 0;
}

body {
  background: var(--color-light-purple) !important;
}

/* ---------------------------------------- common elements */

a {
  outline: none;
  text-decoration: none;
  color: var(--color-base-blue);
}

p {
  text-align: justify;
}

li {
  text-align: justify;
}

/*---------------------------------------- styles CKEditor5 */

.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}
.text-align-center {
  text-align: center;
}
.text-align-justify {
  text-align: justify;
}

/* ---------------------------------------- hidden */

.aub-hidden,
.aub-tokens,
.aub-debug {
  display: none;
}

.aub-unknown {
  color: var(--color-medium-purple);
}
.aub-unknown::before {
  content: '[';
}
.aub-unknown::after {
  content: ']';
}

.aub-italic {
  font-style: italic;
}

/* ---------------------------------------- layout */

main {
  width: 100%;
  margin: auto;
  font-size: 1.2rem;
}

#aub-desk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 2;
}

#aub-osd {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 3;
}

.aub-bg-image {
  background: url('/img/intro/aubletia-intro.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

#aub-intro {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}
#aub-intro .aub-box {
  margin: auto
}

#osdOverlay {
  width: 18rem;
  padding: 0 1rem;
  cursor: grab;
}

#osdOverlay .osd-wrapper {
  padding: 0.5rem;
  background: #fffab3e3;
  border-radius: 1rem;
}

#osdOverlay .osd-row {
  margin-bottom: 0.5rem;
}

#osdText {
  position: absolute;
  top: 6rem;
  right: calc(16rem - 33%);
  width: calc(33% - 4rem);
  transition: 0.2s;
}

#osdText:hover {
  right: 0;
}

#osdText .aub-data .aub-content a {
  color: unset;
  cursor: default;
}

#osdControls.aub-icons {
  display: grid;
  grid-template-columns: repeat(8, 4rem);
  justify-content: left;
  margin-left: 4rem;
}

#osdMoreBefore {
  position: fixed;
  top: 2rem;
  left: 2rem;
}

#osdMoreAfter {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
}

#aub-nav {
  padding: 2rem;
  display: grid;
  grid-template-columns: 33.3% 4rem calc(33.3% - 8rem) 4rem 1fr;
}

/* ---------------------------------------- left column */

.aub-left {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  z-index: 3;
  height: fit-content;
  pointer-events: none;
}

.aub-left .aub-items {
  grid-column: 1;
  grid-row: 1;
  pointer-events: all;
  margin-bottom: 0.1rem;
}

.aub-left .aub-items div:first-of-type {
  letter-spacing: 0.25rem;
  text-transform: uppercase;
}

.aub-left .aub-data {
  pointer-events: all;
}

/* ---------------------------------------- middle column */

.aub-middle {
  grid-column: 2 / 5;
  grid-row: 1;
  display: grid;
  grid-template-columns: 4rem 1fr;
  grid-template-rows: 1fr auto;
  z-index: 3;
  height: fit-content;
  pointer-events: none;
}

.aub-middle .aub-icons {
  grid-column: 1;
  grid-row: 1;
  z-index: 4;
  pointer-events: all;
}

.aub-middle .aub-items {
  grid-column: 1 / 3;
  grid-row: 1;
}

.aub-middle .aub-items form input.aub-active {
  pointer-events: all;
}

/* ---------------------------------------- right column */

.aub-right {
  grid-column: 4 / 6;
  grid-row: 1;
  display: grid;
  grid-template-columns: 4rem 1fr;
  grid-template-rows: 1fr auto;
  z-index: 3;
  height: fit-content;
  pointer-events: none;
}

.aub-right .aub-items {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: all;
  margin-bottom: 0.1rem;
}
.aub-right .aub-items #aub-button-voyages {
  grid-column: 1;
  grid-row: 1;
}
.aub-right .aub-items #aub-button-plantes {
  grid-column: 2;
  grid-row: 1;
}
.aub-right .aub-items #aub-button-menu {
  grid-column: 1 / 3;
  grid-row: 1;
}
.aub-right .aub-items .aub-menu-item {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 4rem 1fr;
  padding: 0;
}

.aub-right .aub-items .aub-menu-item .aub-label {
  text-align: left;
}

.aub-right .aub-icons {
  grid-column: 1;
  grid-row: 1;
  pointer-events: all;
}

.aub-right .aub-data {
  grid-column: 2;
  pointer-events: all;
}

/* ---------------------------------------- elements */

.aub-box {
  background-color: white;
  border: none;
  border-radius: 2rem;
  box-shadow: 0 0.2rem 0.1em rgba(0,0,0,0.2);
  text-align: center;
  transition: width 200ms, height 200ms, border-radius 200ms, opacity 200ms;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aub-select {
  background: white;
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
}

.aub-select:hover {
  filter: invert(1);
  cursor: pointer;
}

.aub-icon,
.aub-button {
  height: 4rem;
  user-select: none; /* standard syntax */
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
}

.aub-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 4rem;
}

.aub-icon img {
  width: 100%;
  height: auto;
  max-width: 70%;
  max-height: 50%;
}

.aub-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1rem 0 0;
}

.aub-button {
  font-size: 2rem;
  line-height: 4rem;
  padding: 0 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.aub-icon:not(.aub-search-disabled):hover,
.aub-button:not(.aub-active):not(.aub-inactive):hover{
  filter: invert(1);
}
.aub-button.aub-menu-item .aub-icon:hover {
  filter: none;
}

.aub-icon-prev, .aub-icon-next {
  filter: opacity(0.2);
  margin: auto;
}

.aub-icon.aub-icon-prev:hover, .aub-icon.aub-icon-next:hover {
  filter: none;
  cursor: pointer;
}

#aub-text-search {
  width: 0;
  padding: 0;
}

#aub-text-search.aub-active {
  width: 100%;
  padding: 0 1rem 0 5rem;
  filter: none;
}

input, textarea {
  font-family: inherit;
}

input:focus, textarea:focus {
  outline: none;
}

#aub-desk .aub-data {
  margin-top: 0;
}

#aub-osd .aub-data {
  margin-top: 0;
}

.aub-data .aub-content {
  overflow: hidden auto;
  height: fit-content;
  max-height: calc(100vh - 12rem);
  padding: 2rem;
}

#aub-desk .aub-data .aub-content {
  padding: 7rem 2rem;
}

#aub-osd {
  height: 100%;
  width: 100%;
}

#aub-osd .openseadragon {
  /*height: calc(100% - 4rem);*/
  height: 100%;
}

#aub-osd .referencestrip {
  width: 8rem !important;
  background: transparent !important;
}

#aub-osd .referencestrip:focus {
  outline: none;
}

#aub-osd .referencestrip > div {
  width: 8rem !important;
  border-radius: 0.5rem;
  background: transparent !important;
}

.aub-data .aub-content h1 {
  font-size: 2rem;
  text-align: center;
  font-weight: normal;
}

.aub-data .aub-content h3 {
  text-align: center;
  font-weight: normal;
}

.aub-data .aub-content .aub-info h3 {
  text-align: center;
  font-weight: normal;
}

.aub-data .aub-content .aub-info h3::before {
  content: '—';
  margin-right: 0.25rem;
}

.aub-data .aub-content .aub-info h3::after {
  content: '—';
  margin-left: 0.25rem;
}

.aub-data .aub-content h6 {
  text-align: center;
  color: var(--color-light-purple);
}

.aub-data .aub-content h6::before {
  content: '—';
  margin-right: 0.25rem;
}

.aub-data .aub-content h6::after {
  content: '—';
  margin-left: 0.25rem;
}

.aub-data .aub-content table {
  width: 100%;
}

.aub-data .aub-content > div:not(:first-of-type):not(#aub-index):not(#osdViewer) {
  border-top: 1px dashed var(--color-light-purple);
}

.aub-data .aub-content > div:not(:last-of-type) {
  margin-bottom: 2rem;
}

.aub-data .aub-content .aub-page-img img {
  max-width: 80%;
  margin: auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.2s;
}

.aub-data .aub-content .aub-page-img img:hover {
  transform: scale(1.05);
}

.aub-data .aub-content .aub-planche p {
  text-align: center;
}

/*
#aub-shadow-top {
  display: block;
  height: 4rem;
  background-image: linear-gradient(transparent, white);
  background-repeat: no-repeat;
  position: sticky;
  z-index: 999;
  top: 0;
}

#aub-shadow-bottom {
  display: block;
  height: 4rem;
  background-image: linear-gradient(transparent, white);
  background-repeat: no-repeat;
  position: sticky;
  z-index: 999;
  margin-top: -4rem;
}
*/

#aub-view-biblio {
  text-align: left;
}

#aub-view-biblio .aub-book {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aub-cols-1 {
  display: grid;
  grid-template-columns: 33%;
  gap: 2rem;
  justify-content: center;
}

.aub-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

#aub-view-sources .aub-book {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 24rem min-content;
}

#aub-view-sources .aub-book:hover .aub-book-title {
  opacity: 1;
}

#aub-view-sources .aub-book:hover .aub-book-img {
  transform: scale(1.05);
  z-index: 100;
  cursor: pointer;
}

#aub-view-sources .aub-book-img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: flex;
  transition: 0.2s;
}

#aub-view-sources .aub-book-img img {
  max-width: 80%;
  max-height: 80%;
  margin: auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

#aub-view-sources .aub-book-img.aub-empty img {
  width: 40%;
  height: auto;
  box-shadow: none;
  opacity: 0.2;
}

#aub-view-sources .aub-book-title {
  grid-column: 1;
  grid-row: 2;
  text-align: center;
  opacity: 0;
  transition: 0.2s;
}

#aub-alpha {
  text-align: center;
  margin: 2rem 0;
}

#aub-alpha::before {
  content: '—';
  margin-right: 0.25rem;
}

#aub-alpha::after {
  content: '—';
  margin-left: 0.25rem;
}

.aub-letter {
  font-size: larger;
  padding: 0 0.25rem 0.25rem 0.25rem;
  background: white;
  border-radius: 1rem;
  cursor: pointer;
}

.aub-letter.starts-with {
  cursor: default;
}

.aub-letter:not(.starts-with):hover,
.aub-starts-with {
  filter: invert(1);
}

.aub-index h3 {
  width: fit-content;
  background: white;
  padding: 0 1rem 0.25rem 1rem;
  border-radius: 2rem;
  cursor: pointer;
  margin: 0.5rem auto;
}
.aub-index h3:hover {
  filter: invert(1);
}

#aub-search-filter,
#aub-search-sort {
  margin: 4rem auto;
}

#aub-search-filter .aub-icons {
  display: grid;
  grid-template-columns: repeat(5, 4rem) 1rem 4rem;
}

#aub-search-sort .aub-icons {
  display: grid;
  grid-template-columns: repeat(3, 4rem) 1rem repeat(3, 4rem);
}

#aub-search-sort .aub-limit span,
#aub-search-sort .aub-sort span {
  font-size: larger;
}

#aub-search-sort .aub-limit.aub-active.aub-search-disabled {
  filter: invert(0.05);
}

#aub-search-sort .aub-sort span:last-of-type {
  font-size: smaller;
  padding-top: 0.3rem;
}

#aub-icon-pertinence img {
  max-width: 50%;
}

.aub-search-pager {
  display: flex;
  gap: 1rem;
  margin: 4rem auto;
  font-size: xx-large;
  width: fit-content;
  background: white;
  padding: 0.25rem 1.5rem 0.5rem 1.5rem;
  border-radius: 2px 1rem 1rem 2px;
  align-items: center;
}

.aub-search-pager.aub-search-disabled > div {
  display: none;
}

.aub-search-pager-link,
.aub-search-pager-nolink {
  height: 2rem;
}

.aub-search-pager-link img,
.aub-search-pager-nolink img {
  width: 100%;
  height: 100%;
  max-width: 2rem;
  max-height: 2rem;
}

.aub-search-pager-nolink img {
  filter: invert(95%) sepia(7%) saturate(73%) hue-rotate(219deg) brightness(94%) contrast(81%);
}

.aub-search-pager-text {
  margin: 0 1rem;
  text-align: center;
}

.aub-search-disabled .aub-icon:hover,
.aub-search-disabled  .aub-active {
  filter: none;
}

.aub-search-disabled img {
  filter: invert(95%) sepia(7%) saturate(73%) hue-rotate(219deg) brightness(94%) contrast(81%);
}

.aub-search-disabled span {
  color: var(--color-light-purple);
}

@media (max-width: 82.5rem) {
  #aub-search-header.aub-cols-3 {
    grid-template-columns: 1fr;
  }
  #aub-search-filter,
  #aub-search-sort,
  .aub-search-pager {
    margin: 1rem auto;
  }
}

.aub-result {
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  transition: 0.2s;
}

.aub-result:hover {
  transform: scale(1.05);
  z-index: 100;
  cursor: pointer;
}

.aub-result .aub-result-icon {
  grid-column: 1;
  grid-row: 1;
  background-image: url('/img/ui/search.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 2rem;
  height: 2rem;
  margin-top: 1.25rem;
}

.aub-result[data-type='aub_biblio'] .aub-result-icon {
  background-image: url('/img/ui/book.svg');
}
.aub-result[data-type='aub_classification'] .aub-result-icon {
  background-image: url('/img/ui/plant.svg');
}
.aub-result[data-type='aub_etape'] .aub-result-icon {
  background-image: url('/img/ui/travel.svg');
}
.aub-result[data-type='aub_morpho'] .aub-result-icon {
  background-image: url('/img/ui/plant.svg');
}
.aub-result[data-type='aub_page'] .aub-result-icon {
  background-image: url('/img/ui/book.svg');
}
.aub-result[data-type='dates'] .aub-result-icon {
  background-image: url('/img/ui/travel.svg');
}
.aub-result[data-type='person'] .aub-result-icon {
  background-image: url('/img/ui/person.svg');
}
.aub-result[data-type='place'] .aub-result-icon {
  background-image: url('/img/ui/place.svg');
}
.aub-result[data-type='plant'] .aub-result-icon {
  background-image: url('/img/ui/plant.svg');
}
.aub-result[data-type='species'] .aub-result-icon {
  background-image: url('/img/ui/plant.svg');
}
.aub-result[data-type='plt_usages'] .aub-result-icon {
  background-image: url('/img/ui/plant.svg');
}

.aub-result h3 {
  grid-column: 2;
  grid-row: 1;
  padding: 0 0.5rem;
}

.aub-result .aub-field-value {
  grid-column: 1 / 3;
  grid-row: 2;
  text-align: justify;
}

/* ---------------------------------------- fields */

.aub-field-label {
  font-size: smaller;
  font-style: italic;
  color: var(--color-light-purple);
  margin: 1rem 0 0.25rem 0;
}

.aub-field-value {
  margin: 0 0 0.25rem 0;
}

/* ---------------------------------------- common styles */

.aub-hidden {
  height: 0;
  padding: 0;
  opacity: 0;
  display: none;
}

.aub-active {
  filter: invert(1);
}

/* ---------------------------------------- message box */

#aub-message {
  position: absolute;
  bottom: 2rem;
  z-index: 5;
  margin: auto;
  width: 20rem;
  left: calc(50% - 10rem);
  background-color: #ffe9e9;
}

#aub-message .aub-content {
  cursor: pointer;
}

#aub-message .aub-content > div:not(:first-of-type) {
  padding-top: 1rem;
}

#aub-message .aub-content > div:not(:last-of-type) {
  margin-bottom: 1rem;
}

/* ---------------------------------------- overlay */

overlay {
  height: 100%;
  width: 100%;
  padding: 0;
  display: none;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.85);
}

@media (max-width: 60rem) {
  overlay:before {
    content: "Largeur minimum: 960px";
    color: var(--color-light-purple);
    box-sizing: border-box;
    position: absolute;
    top: 50vh;
    width: 100%;
    text-align: center;
    z-index: 1002;
    overflow: hidden;
    font-size: x-large;
    line-height: 1.5;
  }
  overlay {
    display: block;
    background-color: var(--color-base-purple);
  }
}

/* ---------------------------------------- spinner */

@keyframes aub-spinner {
  to {
    transform: rotate(360deg);
  }
}

.aub-spinner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.8;
}
.aub-spinner::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: aub-spinner .6s linear infinite;
  z-index: 1000;
  overflow: hidden;
}

.aub-spinner {
  display: block;
  background: white;
  filter: opacity(1);
  pointer-events: none;
  cursor: progress;
}