/*  CSS for tei */
/*@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

html {
  scroll-behavior: smooth;
}

:root {
  --font-base: 'Crimson Pro', serif; /* Typographie principale */
  --font-size-base: 20px; /* Taille de base pour l'échelle typographique */
  --line-height-base: 1.3; /* Hauteur de ligne pour la lisibilité */
  --line-height-tight: 1.2; /* Hauteur de ligne pour la lisibilité */
  --color-background: #FFFFFF; /* Couleur du background blanc */
  --color-text: #2A324B; /* Couleur principale du texte bleu foncé */
  --color-accent: #87C1CF; /* Couleur bleu pour les puces de la timeline */
  --color-faded: #555D74; /* Couleur alt gris-bleu, un peu délavée, pour les notes */
  --color-link: #C1445A; /* Couleur rose/framboise pour les liens */
  --color-border: #AEAEAE; /* gris pour les bordures (old : D9D9D9) */
  --scale-ratio: 1.25; /* Ratio typographique */
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  /*margin-start: 0;*/
  /*margin-end: 0;*/
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-align: left;
}

h1 {
  font-size: 2em;
  /*margin-before: 0.67em;*/
  /*margin-after: 0.67em;*/
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}


h2 {
  font-size: 1.5em;
  /*margin-before: 0.83em;*/
  /*margin-after: 0.83em;*/
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

h3 {
  font-size: 1.17em;
  /*margin-before: 1em;*/
  /*margin-after: 1em;*/
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

h4 {
  font-style: italic;
  /*margin-before: 1.33em;*/
  /*margin-after: 1.33em;*/
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}

h5 {
  font-size: .83em;
  /*margin-before: 1.67em;*/
  /*margin-after: 1.67em;*/
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

h6 {
  font-size: .67em;
  /*margin-before: 2.33em;*/
  /*margin-after: 2.33em;*/
  margin-top: 2.33em;
  margin-bottom: 2.33em;
}

h2:has(+ .entry) {
  overflow: hidden;
  text-align: center;
}

h2:has(+ .entry)::before,
h2:has(+ .entry)::after {
  background-color: var(--color-border);
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h2:has(+ .entry)::before {
  right: 0.5em;
  margin-left: -50%;
}

h2:has(+ .entry)::after {
  left: 0.5em;
  margin-right: -50%;
}

article.entry::before {
  display: block;
  content: "";
  margin-top: -2em;
  height: 3em;
  pointer-events: none;
}

article.entry {
  position: relative;
}

article.entry .citation {
  position: absolute;
  left: -4em;
}

article.entry details {
  position: relative;
  cursor: pointer;
  z-index: 1; /* pour régler le problème de superposition avec .citation empêchant details de s'ouvrir */
}

/* Site header */
.hero {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-height: 400px;
}

.hero figure {
  position: relative;
  flex-shrink: 0;
  width: auto;
  margin: 0;
}

.hero img {
  display: block;
  height: 100%;
  width: auto;
  max-height: 400px;
  object-fit: cover;
}

.hero h1 {
  font-size: 3.2em;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: var(--line-height-tight);
  margin: 0;
  padding: 2rem;
}

.hero a {
  color: var(--color-text);
  text-decoration: none;
}

.hero a:hover {
  text-decoration: none;
}


.hero {
  width: 100%;
  max-height: 400px;
}

.hero figure {
  position: relative;
  width: 100%;
  margin: 0;
}

.hero img {
  display: block;
  height: 100%;
  width: auto;
  max-height: 400px;
  object-fit: cover;
}

.hero h1 {
  font-size: 3.2em;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: var(--line-height-tight);
  margin: 0;
  padding: 2rem;
}

.hero a {
  color: var(--color-text);
  text-decoration: none;
}

.hero a:hover {
  text-decoration: none;
}

#hautevillehouse {
  height: 1em;
}

#hautevillehouse:hover{
  filter: invert(37%) sepia(21%) saturate(2525%) hue-rotate(306deg) brightness(90%) contrast(89%);
}

.sitenav {
  font-family: 'Lora', serif;
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 2rem;
}

.sitenav > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.sitenav > ul > li {
  padding: 0.5em 0.5em;
}

a.pdf {
  display: block;
  text-align: center;
}

.sitenav a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 1em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.sitenav a:hover {
  border-color: var(--color-link);
  color: var(--color-link);
}

.sitenav li.navsearch {
  margin-left: auto;
}

.navsearch input {
  font-family: 'Lora', serif;
  font-size: 1rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
}

.navsearch input::placeholder {
  color: var(--color-border);
  font-style: italic;
}

.dropdown {
  position: relative;
}

.dropdown ul {
  list-style: none;
  display: none;
  position: absolute;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  left: 0;
  top: 100%;
  padding: 0.5em;
  margin: 0;
  min-width: 10em;
}

.dropdown:hover ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Footer */
footer {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2rem 1rem;
  margin-top: 5em;
  min-height: 10em;
  background-color: var(--color-text);
  color: var(--color-background);
}

footer > ul {
  display: grid;
  list-style: none;
  padding-left: 0;
  grid-template-columns: 1fr 1fr 3fr;
}

footer > ul > li {
  justify-self: center;
}

footer .licence img {
  width: 117px;
  height: 41px;
}

.partners {
  padding: 2rem 1rem;
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.5rem;
  align-items: center;
  /*justify-items: center;*/
  max-width: 1200px;
  margin: 0 auto;
}

.partners img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.partners img:hover {
  filter: grayscale(0%);
}

/*home*/
#home {
  display: block;
  text-align: justify;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

#home #epigraph,
.epigraph{
  font-size: var(--font-size-base);
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin: 0 0 2em 0;
}

#home #epigraph p,
.epigraph p  {
  grid-column: 2;
  font-style: italic;
  text-align: right;
}

#home #epigraph cite,
.epigraph cite{
  grid-column: 2;
  font-style: normal;
  text-align: right;
}

#home .homecontent article li {
  list-style-type: "– ";
}

#home #portrait{
  float: left;
  margin-top: 0;
}

#home figure {
  display: block;
  margin-left: 0;
}

#home img {
  width: 28%;
  height: auto;
  float: left;
  margin-right: 1em;
}

#home aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#home .actus {
  text-align: left;
}

article.dict p:has(+ details) {
  margin-bottom: 0.5em;
}

article.dict details{
  margin-bottom: 2em;
}


/* Main content */
a {
  color: var(--color-link);
  text-decoration: none;
}

img {
  max-width: 100%;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.presentation figure,
.etude figure{
  max-width: 60%;
  margin: auto;
}

.presentation figure img,
.etude figure img{
  width: 100%;
  cursor: pointer;
}

.presentation figure+figure,
.etude figure+figure {
  margin-top: 1.5em;
}

.presentation figcaption,
.etude figcaption {
  font-size: 0.8em;
  margin-top: 0.3em;
  max-width: 90%;
  text-align: center;
}

sup,
.superscript {
  font-size: smaller;
  vertical-align: super;
  line-height: 0;
}

.strong {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.italic > .italic {
  font-style: normal;
}

.small {
  font-size: 0.8em;
}

.footnote {
  font-size: 0.8em;
  color: var(--color-faded);
}

.metadata header,
.footnote header {
  font-weight: 600;
}

.metadata:not(:last-of-type){
  margin-bottom: 0.5em;
}

#copyBtn,
.citation button {
  cursor: pointer;
  background-color: var(--color-text);
  border: 1px solid var(--color-text);
  color: var(--color-background);
  border-radius: 0.375rem;
}

.cite{
  display: none;
}

.footnote header {
  margin: 0.5em 0;
  font-variant: small-caps;
}

.footnote p {
  margin:0;
}

.footnote > hr {
  width: 5em;
  margin-left: 0;
  border-bottom: 1px solid var(--color-border);
}

.separator {
  grid-column: 2/3;
  margin: 2em 0 1.5em 0;
  color: var(--color-border);
  background-color: var(--color-border);
  border: none;
  height: 1px;
}

.multiple{
  color: var(--color-faded);
  font-size: 0.7em;
  vertical-align: super;
}

.popup {
  z-index: 10;
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.popup section.citation {
  display: none;
}

.popupcontent {
  background: var(--color-background);
  padding: 20px;
  margin: 5% auto;
  width: 50%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  border-radius: 8px;
}

@media screen and (max-width: 600px) {
  .popupcontent {
    width: 90%; /* Plus large sur mobile */
    max-height: 90vh;
  }
}

#closePopup {
  position: absolute;
  top: 10px; right: 15px;
  cursor: pointer;
}

#lettersnav{
  margin-top: 2em;
}

#resultsnav + #lettersnav {
  margin-top: 0;
}

#resultsnav + #lettersnav a {
  color: var(--color-border);
}

#resultsnav + #lettersnav a:hover {
  color: var(--color-link);
}

#resultsnav{
  margin: 0.5em 0;
}

#lettersnav ul,
#resultsnav ul {
  grid-column: 2/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}

#lettersnav p {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  line-height: 0.1em;
  margin: 10px 0 20px;
}

#lettersnav small {
  font-style: italic;
  color: var(--color-border);
  background: var(--color-background);
  padding:0 10px;
}

#lettersnav li,
#resultsnav li {
  list-style: none;
}

#lettersnav li:before,
#resultsnav li:before {
  content: "";
}

#lettersnav a,
#resultsnav a {
  color: var(--color-text);
}

#lettersnav a:hover,
#resultsnav a:hover {
  color: var(--color-link);
}

#lettersnav .previous,
#resultsnav .previous {
  grid-column: 1;
}

#lettersnav .next,
#resultsnav .next {
  grid-column: 2;
  margin-left: auto;
}

#search {
  position: sticky;
  top: 0;
  color: var(--color-background);
  background: var(--color-text);
  padding: 0.2em;
  display: flex;
  gap: 0.2em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 0.2em 0.2em;
  z-index: 3;
}

#search a {
  color: var(--color-text);
  text-decoration: underline;
}

#alphaindex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

#alphaindex a {
  color: var(--color-background);
}

#searchperson {
  width: 90%;
}

#autocompletelist {
  margin: 0.2em;
  display: flex;
  list-style: none;
  flex-direction: column;
  justify-content: left;
  align-items: first;
  width: 100%;
  text-align: left;
  padding: 0.2em;
  width: 90%;
  max-height: 6em;
  overflow-y: auto;
}

#autocompletelist li {
  background-color: var(--color-background);
  color: var(--color-text);
  padding: 0 0.2em;
}

#autocompletelist li:before {
  content: "";
}

div#transcription {
  display: grid;
  grid-template-columns: 1fr minmax(40ch, 50ch) 1fr;
  gap: 2em;
  align-items: start;
  box-sizing: border-box;
  /*margin-top: 2em;*/
}

div#transcription > div.letters {
  grid-column: 1 / span 2;
  min-width: 0;
}

div.letters > article {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr minmax(40ch, 50ch);
  column-gap: 2em;
}

div.letters > article > .ref {
  grid-column: 1/2;
  font-size: 0.8em;
  text-align: right;
}

div.letters > article > .letter,
div.letters > article > .footnote {
  grid-column: 2/3;
  text-align: justify;
  overflow-wrap: break-word;
}

.letter p {
  margin: 0;
}

.letter p.signed {
  margin: 1em 0;
}

.letter p.dateline {
  margin: 0 0 1em 0;
}

.letter p.leaders {
  overflow-x: hidden;
}

.letter p.leaders span.leaders:first-child::after {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
      "-------------------------------------"
      "-------------------------------------"
      "-------------------------------------"
      "-------------------------------------"
      "-------------------------------------"
      "-------------------------------------"
}

.letter p.leaders span.leaders:first-child {
  background: var(--color-background);
}

.letter p.leaders span.leaders + span.leaders {
  float: right;
  background: var(--color-background);
  position: relative;
  z-index: 1
}

.letter img {
  max-width: 100%;
  cursor: pointer;
}

.letter ul {
  list-style-type: none;
  list-style-position: inside;
  padding-left: 0;
}

.letter ul:not(.noBullet) li:before {
  content: '- ';
}

.letter q {
  quotes: '« ' ' »' '“' '”';
}

.letter span.center,
.letter span.right {
  display: block;
  margin-top: 1em; /* id. balise p*/
  margin-bottom: 1em; /* id. balise p*/
}

.letter .right,
.right,
.docdate {
  text-align: right;
}
.letter .center {
  text-align: center;
}

.letter .underline,
.underline { /* dans article FN a Companion in exil */
  font-style: italic;
}

#lettersnav,
#resultsnav
{
  grid-column: 2; /* place dans la colonne du milieu */
}

.dateform {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  justify-content: center;
}

.dateform select {
  appearance: none;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  min-width: 110px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z' fill='%232A324B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.65rem;
}

.dateform select:focus {
  outline: none;
  border-color: var(--color-border);
  box-shadow: 0 0 0 2px rgba(135, 193, 207, 0.25);
}

.dateform button {
  background-color: var(--color-text);
  border: 1px solid var(--color-text);
  color: var(--color-background);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  min-width: 110px;
}

main {
  text-align: justify;
}

main > article:has(> figure.drawing) {
  display: block;
  column-count: 2;
  column-gap: 0;
}

main > article:has(> figure.drawing) > figure:first-child {
  margin-top: 0;
}

main > article:has(> figure.drawing) figure {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0.5em;
}

main > article:has(> figure.drawing) figure header {
  margin-top: 0.5em;
  font-size: 0.8em;
  font-weight: 600;
}

main > article:has(> figure.drawing) figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

#years,
div:has( > div.month),
div:has( > div.undated),
div:has( > div.day),
div:has( > div.result),
article:has( > div.result) {
  display: grid;
  gap: 1rem;
  margin: 1rem;
}

#years {
  grid-template-columns: repeat(6, 1fr);
}

#years.drawings,
div:has(div.day) {
  grid-template-columns: repeat(5, 1fr); /* une colonne de moins pour les dessins */
}

div:has( > div.month),
div:has( > div.undated) {
  grid-template-columns: repeat(3, 1fr);
}

div:has( > div.result),
article:has( > div.result) {
  grid-template-columns: repeat(3, 1fr);
}

#dates:has(div#results) > div > article > .month {
  break-inside: avoid;
  margin-bottom: 1rem;
}

#years a,
div:has( > div.month) a,
div:has( > div.day) a,
div:has( > div.undated) a,
div.result a {
  display: block;
  padding: 0.4rem 0.6rem;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: color 0.2s;
  transition: background 0.2s;

}

#years a:hover,
div:has( > div.month) a:hover,
div:has( > div.day) a:hover,
div:has( > div.undated) a:hover,
div.result a:hover {
  border: 1px solid var(--color-border);
}

#transcription #chronology {
  min-width: 0; /* important dans les grid/flexbox pour éviter overflow */
  font-size: 0.8em;
  max-width: 60%;
  text-align: left; /* uniquement avec les lettres */
}


.hint {
  display: inline-block;
  position: relative;
  cursor: help;
}

.hint .label {
  background: var(--color-text);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  font-size: 0.9em;
  user-select: none;
}

.hint .content {
  display: none;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-100%);
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0.4em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 0.5em 0.75em;
  font-size: 0.9em;
  width: 400px;
  z-index: 1000;
  white-space: normal;
}

.hint.active .content {
  display: block;
}


#chronology > header {
  font-weight: bold;
}

#transcription #chronology > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#transcription #chronology > header .hint {
  margin-left: auto; /* pousse le hint à droite */
}

#chronology > p {
  text-align: justify;
}

#chronology ul.timeline {
  padding-left: 2em;
  list-style-type: none;
  position: relative;
}

#chronology ul.timeline:before {
  content: ' ';
  background: var(--color-border);
  display: inline-block;
  position: absolute;
  left: 30px;
  width: 1px;
  height: 100%;
  z-index: 1;
}
#chronology ul.timeline > li {
  margin: 20px 0;
  padding-left: 20px;

}

#chronology ul.timeline > li:before,
span.glyph {
  content: ' ';
  background: var(--color-accent);
  display: inline-block;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  width: 10px;
  height: 10px;
}

#chronology ul.timeline > li:before {
  position: absolute;
  left: 24px;
  z-index: 2;
}

#chronology ul.timeline > li.vh:before,
span#glyphvh {
  background: var(--color-background);
}

span#glyphjd,
span#glyphvh {
  position: unset;
}


#chronology .eventlabel  {
  font-weight: 600;
  display: block;
}

#chronology .eventdesc  {
  color: var(--color-faded);
}

#articles figcaption {
  font-size: 0.8em;
}

.backtotop {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--color-text);
  color: var(--color-background);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  text-decoration: none;
  font-size: 1.5rem;
  z-index: 1000;
}

.backtotop:hover {
  background-color: var(--color-faded);
}

#critique:has(>.etude) {
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: 1fr minmax(40ch, 50ch) 1fr;
  gap: 2rem;
}

#critique .content.etude {
  grid-column: 2;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#critique .content.etude h2 {
  margin: 0 0 0.5rem;
}

#critique .content.etude h2 a {
  color: var(--color-link);
  text-decoration: none;
}

#critique .content.etude h2 a:hover {
  text-decoration: underline;
}

#critique .metadata {
  font-size: 0.9em;
  color: var(--color-faded);
  margin-bottom: 0.75rem;
}

#critique .summary {
  margin: 0;
  font-size: 0.95em;
  color: var(--color-text);
  line-height: var(--line-height-base);
}

blockquote {
  font-size: .9em;
}


.item,
.news {
  margin-bottom: 3em;
  border: 1px solid var(--color-border);
  border-radius: 0.2rem;
  padding: 1em;
  text-align: left;
}

.item h2 {
  margin-top: 0;
  font-size: 1em;
}

.news h2 {
  margin-top: 0;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 0.9em;
  color: var(--color-faded);
}

.etude .author {
  text-align: right;
}

.breadcrumb li::after {
  content: "›";
  margin: 0 0 0 0.5rem;
  color: var(--color-faded);
}

.breadcrumb li:last-child::after {
  content: "";
  margin: 0;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--color-text);
}

.breadcrumb a:hover {
  color: var(--color-link);
  text-decoration: underline;
}


@media (max-width: 900px) {
  div.letters > article > .ref {
    margin-bottom: 2em;
    text-align: left;
  }

  div#transcription,
  div.letters > article,
  .letterheader {
    display: block;
    width: 90%;
    margin: auto;
  }

  .letterheader {
    padding: 0 2em;
  }

  #chronology {
    display: none;
  }
}


.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero figure,
.hero img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
}

.hero h1 {
  font-size: 2.3em;
  position: absolute;
  bottom: 1em;
  /*transform: translateX(-30%);  !* centre le titre sur ce point *!*/
  background:rgba(255, 255, 255, 0.75);
  padding: 10px 20px;
  margin: 0 1em;
  border-radius: 0.5rem;
}


main {
  display: grid;
  grid-template-columns: 1fr minmax(40ch, 50ch) 1fr;
}

main > header {
  grid-column: 2;
}

main > article {
  grid-column: 2;
}

main > article:has(#transcription),
main > article:has(div > .etude),
main > article:has(.presentation),
main > article:has(.bibliography) {
  grid-column: 1/4;
}

div.etude,
div.presentation,
div.bibliography {
  display: grid;
  grid-template-columns: 1fr minmax(40ch, 50ch) 1fr;
}

div.etude > aside,
div.presentation > aside,
div.bibliography > aside {
  margin-right: 1em;
}

div.etude > aside > nav.toc,
div.presentation > aside > nav.toc,
div.bibliography > aside > nav.toc {
  padding-left: 1em;
  text-align: left;
  /*position: sticky;*/
  /*top: 1em;*/
  /*max-height: 90vh;*/
  /*overflow-y: auto;*/
}

.bibliography .bibliography li {
  margin-bottom: 0.3em;
}

nav.toc ul {
  margin: 0;
}

nav.sitemap > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  padding: 0;
  list-style: none;
  color: var(--color-background);
}

footer a {
  color: var(--color-border)
}

footer a:hover {
  color: var(--color-link)
}

nav.sitemap ul ul {
  padding: 0;
}

nav.sitemap li ul {

}

nav.sitemap ul {
  list-style: none;
  margin: 0;
  position: relative;
}

footer header
{
  font-weight: 600;
}

.gallery {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#galleryimg {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 30px black;
}

.gallerybuttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 2em;
  transform: translateY(-50%);
}

.gallerybuttons button {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
}
.close {
  position: absolute;
  top: 1em;
  right: 2em;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

mark {
  color: var(--color-text);
  background-color: var(--color-accent);
  /*background-color: #FDF6B2;*/
}