@charset "UTF-8";
/*  Custom CSS for the Douai project.
 *  This file can be used to override existing
 *  CSS from lemdo-dev. */
/*  Note that this is an SCSS (SASS) file, which means
 *  you can use any SCSS code you like, but you can also
 *  just use plain CSS if you are not familiar with SASS. */
:root {
  /*
  Black : #263238
  Bleu électrique : #5481b8
  Bleu pastelle :  #87BDFF
  Bleu interface défaut : #3584e4
  Acajou :68302C 
  Acajou 2: #90524D;
  Beige: #E7E2D9;
  Beige plus foncé brique : #E7CFD9
  Vert pastelle :#628C85;
  */
  /*color*/
  --menu:#263238;
  --big-title-txt:#FFFFFF;
  --black: #263238;
  --overstrike: #263238;
  --grey-txt-footer:#CCCCCC;
  --white-bg-footer-logo: #FFFFFF;
  --triangle: #5481b8;
  /*Legend*/
  --hand1: #E7E2D9;
  --hand1-txt: #263238;
  --hand1-later: #E7CFD9;
  --hand1-later-txt: #263238;
  --other-hand: red;
  --other-hand-txt: #263238;
  --dotted-line: #3584e4;
  --apparatus-marker: #B8B4AD;
  /*Size overtrike: default*/
  --size-overstrike:10px;
  /*Document style : same as LEMDO default*/
  --document-font-family: "Alegreya", "Georgia", "Times New Roman", serif;
  --document-font-style: normal;
  --document-font-size: 1.215rem;
  --document-color: #222222;
  --margin-left-big-title: 15vw;
  --line-font-size: 20px;
  /*Big title container top*/
  --xsmall-big-title-container-top: 12vh;
  --small-big-title-container-top: 15vh;
  --medium-big-title-container-top: 15vh;
  --large-big-title-container-top: 15vh;
  --xlarge-big-title-container-top: 20vh;
  /*Big title font size*/
  --xsmall-big-title-font-size: 3em;
  --small-big-title-font-size: 4em;
  --medium-big-title-font-size: 5.5em;
  --large-big-title-font-size: 7em;
  --xlarge-big-title-font-size: 8em;
  /*Big subtitle font size*/
  --xsmall-big-subtitle-font-size: 2em;
  --small-big-subtitle-font-size: 2em;
  --medium-big-subtitle-font-size: 3em;
  --large-big-subtitle-font-size: 4em;
  --xlarge-big-subtitle-font-size: 5em;
  /*Line and read font size*/
  --xsmall-big-line-read-font-size: 0.75em;
  --small-big-line-read-font-size: 1em;
  --medium-big-line-read-font-size: 1.2em;
  --large-big-line-read-font-size: 1.2em;
  --xlarge-big-line-read-font-size: 1.5em;
  /*
  xsmall: violet
  xsmall: blue
  medium: green
  large: yellow
  xlarge: orange
  */
}

/************/
/*** PART ***/
/************/
#index #pageWrapper {
  border: none;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: var(--topBarHeight) auto auto auto;
  min-height: calc(100vh - var(--topBarHeight));
  grid-template-areas: "header" "splash" "main" "footer";
  position: relative;
  background-color: var(--mainBgColor);
  max-width: none !important;
}

footer {
  background-color: var(--menu);
  padding-left: 10vw;
  padding-right: 10vw;
  padding-top: 25px;
  padding-bottom: 25px;
}

/******************/
/*** NAVIGATION ***/
/******************/
/*Main logo*/
#douaiTopLogo {
  /*border: 3px solid red !important;*/
  width: 45px;
  max-width: none;
  margin-left: 20px;
  margin-top: 14px;
}

#topBar, #site-navigation, #site-navigation ul li * {
  background-color: var(--menu) !important;
  color: var(--grey-txt-footer);
  border: 0;
}

/*Bug à gérer sur le search toujours en noir*/
#q, #q * {
  color: var(--grey-txt-footer) !important;
}

/*Submit button*/
#submitSearch {
  color: var(--grey-txt-footer) !important;
  background-color: transparent !important;
}

/*Right nav button*/
.lineContainer {
  color: var(--grey-txt-footer) !important;
}

/*Left Nav button*/
#leftNavButton {
  color: var(--grey-txt-footer) !important;
  background-color: var(--menu) !important;
}

/**************/
/*** SPLASH ***/
/**************/
.splash-crest {
  width: 100vw;
  animation: blur 1.25s;
}

/*.splash-crest::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: rgba(0,0,0,1);
    z-index: 1;
}*/
.triangle {
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 75vw 75vw 0 0;
  border-color: var(--triangle) transparent transparent transparent;
  transform: rotate(0deg);
  top: 50px;
  animation: moveRight 3s;
}

/*****************/
/*** BIG TITLE ***/
/*****************/
#big-title-container {
  /*border: 3px solid red;*/
  display: block;
  position: absolute;
  margin-left: var(--margin-left-big-title);
  animation: makeAppear 5s;
}

#big-title-container * {
  color: white;
}

#line-text {
  font-size: var(--line-font-size);
}

#big-title {
  color: var(--big-title-txt);
  /*font-family: 'Abril Fatface', cursive;*/
  font-size: 140px;
  line-height: 1;
}

#big-subtitle {
  color: var(--big-title-txt);
  font-size: 65px;
}

#read {
  color: var(--big-title-txt);
  font-size: var(--line-font-size);
}

#arrow-long-down {
  /*border: 1px solid red;*/
  display: inline-block;
  transform: translate(0px, 8px);
}

/************************/
/*** CHECKBOX GENERAL ***/
/************************/
#asideMain * {
  font-family: "Alegreya Sans";
}

#asideTools h2 {
  margin-top: 15px;
  margin-bottom: 8px;
}

/*Checkbox vertical space*/
#douai_annotation_toggle,
#douai_hand_toogle {
  margin-top: 5px;
}

/*Checkbox size*/
#douai_annotation_button,
#douai_hand_button {
  width: 1rem !important;
  height: 1rem !important;
  margin-left: 15px;
}

/*Checkbox space*/
#douai_annotation_toggle label.control,
#douai_hand_toggle label.control {
  gap: 1.5rem !important;
}

/*Checkbox size*/
#douai_facsimile_button {
  width: 1rem !important;
  height: 1rem !important;
  margin-left: 2px;
}

/*Checkbox space*/
#douai_facsimile_toggle label.control {
  gap: 0.5rem !important;
}

/*Label size*/
#douai_scholarly_toggle label,
#douai_scientific_toggle label,
#douai_annotation_toggle label,
#douai_hand_toggle label,
#douai_enhanced_toggle label,
#douai_facsimile_toggle label {
  font-size: 13pt;
}

/**************/
/*** LEGEND ***/
/**************/
#legend span {
  font-size: 13pt;
}

.circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
}

#circle-overstrike {
  background-color: var(--overstrike);
}

#circle-hand1 {
  background-color: var(--hand1);
}

#circle-hand1-later {
  background-color: var(--hand1-later);
}

#circle-other-hand {
  background-color: var(--other-hand);
}

.line {
  display: inline-block;
  width: 20px;
  margin-right: 4px;
}

#dotted-line {
  border-bottom: 3px dotted var(--dotted-line);
}

#legend_collation {
  margin-right: 4px;
}

/**************************/
/*** CHECKBOX FACSIMILE ***/
/**************************/
.douaiFacsimile .facsPtr {
  display: none !important;
}

/***************************/
/* CHECKBOX ANNOTATION ***/
/***************************/
/*Collation marker: let them appears in collation page not in semi-diplomatic edition because of "original reading mode"*/
#mainText .apparatus.appMarker, #mainText .apparatusNew.noteMarker {
  display: none;
}

html[id$=collation] #mainText .apparatus.appMarker {
  display: inline-flex !important;
}

#mainText.douaiAnnotation .apparatus.appMarker,
#mainText.douaiAnnotation .apparatusNew.noteMarker {
  display: inline-flex !important;
}

/*Annotation & Collation*/
.douaiAnnotation span[data-ann] {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.douaiAnnotation span[data-app] {
  /*text-decoration: underline 3px solid var(--hand1) !important*/
}

/************************/
/*** CHECKBOX HANDS ***/
/************************/
/*Hilight additions*/
.douaiHand [data-el=add] {
  color: var(--hand1-txt) !important;
  background-color: var(--hand1) !important;
}

.douaiHand [data-el=add]:hover {
  cursor: pointer;
}

/*Hilight deletions*/
.douaiHand [data-el=del]:not([data-rend=overstrike]) {
  color: var(--hand1-txt) !important;
  background-color: var(--hand1) !important;
}

.douaiHand [data-el=del]:hover {
  cursor: pointer;
}

/*.douaiHand [data-el="del"]:not([data-rend="overstrike"]) {
    color: var(--hand1-txt) !important;
    background-color: var(--hand1) !important;
}*/
/*Hilight hands*/
.douaiHand [data-hand] {
  color: var(--hand1-txt) !important;
  background-color: var(--hand1) !important;
}

.douaiHand [data-hand]:hover {
  cursor: pointer;
}

/*Hilight change hands*/
.douaiHand [data-change] {
  color: var(--hand1-later-txt) !important;
  background-color: var(--hand1-later) !important;
}

.douaiHand [data-change]:hover {
  cursor: pointer;
}

/*Hilight hand2*/
.douaiHand [data-hand$=DOUH2] {
  color: var(--other-hand-txt) !important;
  background-color: var(--other-hand) !important;
}

.douaiHand [data-hand$=DOUH2]:hover {
  cursor: pointer;
}

/*Hilight other-hand 3*/
.douaiHand [data-hand$=DOUH3] {
  color: var(--other-hand-txt) !important;
  background-color: var(--other-hand) !important;
}

.douaiHand [data-hand$=DOUH3]:hover {
  cursor: pointer;
}

/*Hilight other-hand 4*/
.douaiHand [data-hand$=DOUH4] {
  color: var(--other-hand-txt) !important;
  background-color: var(--other-hand) !important;
}

.douaiHand [data-hand$=DOUH4]:hover {
  cursor: pointer;
}

/**************************/
/*** CHECKBOX READING ***/
/**************************/
/*(<abbr> + hide deletions + <corr>)*/
/*Expansion*/
.douaiReading [data-el=abbr] {
  display: none !important;
}

.douaiReading [data-el=expan] {
  display: inline-flex !important;
}

/*Hide deletions*/
.douaiReading [data-el=del] {
  display: none !important;
}

/*Show corrections*/
.douaiReading [data-el=sic] {
  display: none !important;
}

.douaiReading [data-el=corr] {
  display: inline-flex !important;
}

.douaiReading [data-el=add] .rnd_superscript {
  vertical-align: 0 !important;
  font-size: var(--paraFontSize) !important;
}

/***************/
/*** TOOLTIP ***/
/***************/
#asideTools .tooltip {
  position: relative;
  display: inline;
}

.tooltip {
  position: relative;
  /*MDH 2024-05-26: turning this off with permission
    from CS. */
  /*display: inline-block;*/
}

.tooltip .tooltiptext {
  font-size: 11pt;
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  margin-bottom: 5px;
}

/*Activate tooltip only when checkbox*/
#asideTools .tooltip:hover .tooltiptext,
.douaiHand .tooltip:hover .tooltiptext {
  visibility: visible;
}

/****************/
/*** DOCUMENT ***/
/****************/
/* Delete this space */
span[data-el=head] + br {
  display: none;
}

/*Authorize br*/
body[data-catrefs*=letSemiDiplomatic] div[data-el=docTitle] h2 br:first-of-type {
  display: block;
}

/* Foliotation */
[data-type=pageNum] {
  font-size: 25px;
  font-weight: 500;
  font-style: normal !important;
}

/* Foliotation à droite */
[data-type=pageNum][data-place=plc-right-top] {
  display: inline-block;
  text-align: right !important;
  width: 100%;
}

/*Label <label>*/
[data-el=label][data-place=plc-centre] {
  font-family: var(--document-font-family) !important;
  font-style: var(--document-font-style) !important;
  font-size: var(--document-font-size) !important;
  color: var(--document-color) !important;
  display: block;
  text-align: center;
  width: 100%;
}

/*Correction d'un bug lemdo*/
body[data-catrefs*=letSemiDiplomatic] div[data-el=sp] br + span[data-el=lb] + span[data-place*=centre],
body[data-catrefs*=letSemiDiplomatic] div[data-el=sp] br ~ span[data-place*=centre] {
  margin: 0 !important;
}

/*Speech <sp>*/
[data-el=sp] {
  margin-bottom: 0.75em !important;
}

/*Speaker <speaker>*/
[data-el=speaker] {
  font-family: var(--document-font-family) !important;
  font-style: var(--document-font-style) !important;
  font-size: var(--document-font-size) !important;
  color: var(--document-color) !important;
  font-weight: normal !important;
  text-transform: none !important;
}

/*Correction bug*/
[data-el=speaker] .tooltip,
[data-el=speaker] .tooltiptext {
  text-indent: 0;
}

/*Speaker <speaker>*/
[data-el=ab] {
  padding-left: 0.2em !important;
}

/*Overtrike size*/
[data-rend=overstrike] {
  display: inline-block;
  background-color: var(--overstrike);
  height: 20px;
  width: var(--size-overstrike);
}

[data-rend=overstrike]:hover {
  cursor: text;
}

/**/
.tabNavItem.active::before,
.tabNavItem.active::after {
  background-color: var(--hand1) !important;
}

/*Annotation color*/
.noteRef.app-hovered,
.noteRef.selectedApp {
  color: var(--hand1) !important;
}

/*Icon collation*/
.apparatus.appMarker,
.apparatus.appMarker img {
  background-color: var(--apparatus-marker) !important;
}

/*Popup closer*/
.popup_closer {
  color: var(--menu) !important;
}

.popup_closer:hover {
  background-color: var(--menu) !important;
  color: white !important;
}

/*Make sure underlining is done on annotated texts*/
.rnd_underline * {
  text-decoration: underline;
}

/************/
/*** STAGE ***/
/************/
/*Desactivate Lemdo code*/
/*body[data-catrefs*="letSemiDiplomatic"] span[data-place*="right"] {
  position: relative !important;
  right: 0;
}*/
body[data-catrefs*=letSemiDiplomatic] span[data-el=stage] + br {
  display: block !important;
}

/*<stage>*/
[data-el=stage] {
  font-family: var(--document-font-family) !important;
  font-style: var(--document-font-style) !important;
  font-size: var(--document-font-size) !important;
  color: var(--document-color) !important;
}

[data-el=stage][data-place=plc-centre] {
  display: inline-block !important;
  text-align: center;
  width: 100%;
}

[data-el=stage][data-place=plc-right] {
  display: inline-block;
  text-align: right;
  width: 100%;
}

span[data-place=plc-left-margin],
div.page > div[data-el=label][data-place=plc-left-margin],
div[data-el=label][data-place=plc-left-margin] {
  display: inline-block !important;
  margin-left: -3em;
}

[data-place=plc-right-margin] {
  display: inline-block;
  float: right;
}

span[data-el=stage][data-place=plc-right-below] {
  display: inline-block;
  position: relative;
  top: 10px;
  left: 25px;
}

body[data-catrefs*=letSemiDiplomatic] span[data-el=stage][data-place=plc-right-inline] {
  display: inline-block;
  position: relative;
  left: 25px;
}

[data-el=label][data-place=plc-right-adjacent] {
  float: right;
  margin: 0;
}

/***************************/
/*** FOOTER INFORMATION  ***/
/***************************/
/*Change font*/
#footer-information * {
  font-family: var(--document-font-family) !important;
}

#footer-information {
  /*border: 3px solid white;*/
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

#footer-information .item {
  display: inline-block;
  margin-top: 30px;
  width: 300px;
}

footer h5 {
  color: white;
}

footer a {
  color: var(--grey-txt-footer);
  text-decoration: none;
}

footer a:hover {
  color: white;
}

footer p {
  color: var(--grey-txt-footer) !important;
  margin-bottom: 0 !important;
}

footer hr {
  margin-top: 50px;
  margin-bottom: 50px;
}

/********************/
/*** FOOTER LOGO  ***/
/********************/
#footer-logo {
  /*border: 3px solid red;*/
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

#footer-logo .item {
  display: flex;
  align-items: center;
  width: 200px;
  background-color: var(--white-bg-footer-logo);
  margin: 10px;
}

#footer-logo .item a {
  display: inline-block;
  background-color: var(--white-bg-footer-logo);
  padding: 15px;
}

/*************************/
/*** FOOTER TIMESTAMP  ***/
/*************************/
div[id=timestamp] {
  font-family: var(--primarySans);
  font-style: italic;
}

#timestamp li {
  color: var(--grey-txt-footer);
  display: flex;
  justify-content: center;
}

/*****************/
/*** ANIMATION ***/
/*****************/
@keyframes blur {
  from {
    filter: blur(4px);
  }
  to {
    filter: blur(0px);
  }
}
@keyframes moveRight {
  from {
    border-width: 75vw 0vw 0 0;
  }
  50% {
    border-width: 75vw 0vw 0 0;
  }
  to {
    border-width: 75vw 75vw 0 0;
  }
}
@keyframes makeAppear {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*********************/
/*** MEDIA QUERIES ***/
/*********************/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /*html {
      border: 3px solid violet;
  }*/
  #big-title-container {
    top: var(--xsmall-big-title-container-top);
  }
  #big-title {
    font-size: var(--xsmall-big-title-font-size);
  }
  #big-subtitle {
    font-size: var(--xsmall-big-subtitle-font-size);
  }
  #line-text, #read {
    font-size: var(--xsmall-big-line-read-font-size);
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* html {
       border: 3px solid blue;
   }*/
  #big-title-container {
    top: var(--small-big-title-container-top);
  }
  #big-title {
    font-size: var(--small-big-title-font-size);
  }
  #big-subtitle {
    font-size: var(--small-big-subtitle-font-size);
  }
  #line-text, #read {
    font-size: var(--small-big-line-read-font-size);
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /*html {
      border: 3px solid green;
  }*/
  #big-title-container {
    top: var(--medium-big-title-container-top);
  }
  #big-title {
    font-size: var(--medium-big-title-font-size);
  }
  #big-subtitle {
    font-size: var(--medium-big-subtitle-font-size);
  }
  #line-text, #read {
    font-size: var(--medium-big-line-read-font-size);
  }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /*html {
      border: 3px solid yellow;
  }*/
  #big-title-container {
    top: var(--large-big-title-container-top);
  }
  #big-title {
    font-size: var(--large-big-title-font-size);
  }
  #big-subtitle {
    font-size: var(--large-big-subtitle-font-size);
  }
  #line-text, #read {
    font-size: var(--large-big-line-read-font-size);
  }
  /*Dynamic posision for menu*/
  #site-navigation {
    margin-left: calc(var(--margin-left-big-title) - 113px);
  }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /*html {
      border: 3px solid orange;
  }*/
  #big-title-container {
    top: var(--xlarge-big-title-container-top);
  }
  #big-title {
    font-size: var(--xlarge-big-title-font-size);
  }
  #big-subtitle {
    font-size: var(--xlarge-big-subtitle-font-size);
  }
  #big-subtitle {
    font-size: var(--xlarge-big-subtitle-font-size);
  }
  #line-text, #read {
    font-size: var(--xlarge-big-line-read-font-size);
  }
}
/* Temporary hack for damage display of gap element. */
span[data-reason=damage], span[data-reason=original-cropped], span[data-reason=illegible] {
  background-color: #d0d0d0;
  display: inline;
  padding: 0.1em 1em;
  margin: auto 0.25em;
}

/*span[data-unit="line"]{
    display: block;
    width: 100%;
    height: 5em;
    text-align: center;
    padding-top: 1em;
}*/
span[data-reason=damage]:before {
  content: attr(data-reason);
  text-align: center;
}

body[data-catrefs*=letSemiDiplomatic] div.page:has(span[data-el=fw]) {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

/*# sourceMappingURL=douai.css.map */