/* Adjustment for the size of the header. */
article h1::before {
    height: 13rem;
}
/* Reset italic to be able to emphasis in titles. */
h2,
h3 {
    font-style: normal;
}
/* Surprisingly not handled by tuftecss. */
h4 {
    font-weight: 500;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1.4rem;
    line-height: 1;
}
h5 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 1.4rem;
    line-height: 1;
}

table td {
    padding: .5rem;
}
table tr.odd {
    background: var(--contenuadd-background);
}

.epigraphe {
    width: 50%;
    text-align: right;
    margin: 1rem 0 5rem 7rem;
}
.epigraphe p {
    margin-right: 2rem;
    font-size: 1.1rem;
    color: black;
}

.contenuadd table tr.odd {
    background: var(--body-background);
}
.contenuadd .description ul {
    max-width: 100%;
}

/* Special to this book where contenuadd must be super visible. */
.contenuadd p {
    font-size: 1.4rem;
}
@media (max-width: 1280px) {
    /* Overwrite tufte for responsive text size. */
    .contenuadd p {
        font-size: 1.25rem;
        line-height: 1.75;
    }
}
@media (max-width: 760px) {
    /* Overwrite tufte for responsive text size. */
    .contenuadd p {
        font-size: 1.1rem;
        line-height: 1.5;
    }
}

span[data-idsp] {
    padding-right: 1.5rem;
    background-repeat: no-repeat;
    background-position: center right;
    background-image: var(--termeenrichi-background-image);
    cursor: pointer;
}
span[data-idsp].expanded {
    background-image: var(--termeenrichi-background-image-expanded);
}
span[data-idsp].termeenrichi {
    cursor: inherit;
    padding: 0 .3rem;
}
h3 .termeenrichi {
    max-width: 55%;
}

:target,
.target {
    background-color: var(--target-background);
    color: var(--target-color);
    padding: .1rem .3rem;
}
.contenuadd:target,
.contenuadd.target {
    background-color: var(--contenuadd-background);
    border-color: var(--target-background);
    color: var(--body-color);
}
span[data-idsp].target {
    background-image: var(--termeenrichi-background-image-reversed);
    padding-right: 2rem;
    background-position-x: 96%;
}

/* CSS only lightbox, see https://www.sylvaindurand.org/overlay-image-in-pure-css/ */
.lightbox {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;
}
  .lightbox img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    transform: scale(0.95);
    transition: transform .3s;
  }

.lightbox:target {
  visibility: visible;
  outline: none;
  opacity: 1;
}
  .lightbox:target img {
    transform: scale(1);
    margin: 0 auto;
    border: 2px solid var(--contenuadd-border-color);
    background: white;
  }

@media (max-width: 760px) {
    footer nav ul li:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
    }
}

/* Participants specificities. */
[data-chapitre="participants"] .contenuadd .description figure {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
  height: 0;
}
[data-chapitre="participants"] .contenuadd.expanded .description figure {
  height: initial;
}
[data-chapitre="participants"] .contenuadd .description h4 {
  clear: both;
}

a.user-circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: top left;
  background-image: url("./svg/user-circle.svg");
}

img.vignette {
  max-height: 25em;
}

.lightbox:target img {
  max-height: 100%;
}

.marginnote.url-trad {
  margin-top: -10rem;
  background-color: var(--header-background-color);
  color: var(--body-color);
  border: 1px solid var(--header-border-color);
  border-radius: 3px;
  text-align: center;
}
.marginnote.url-trad a {
  display: block;
  line-height: 1.8;
  text-decoration: none;
}
.marginnote.url-trad a:hover {
  text-decoration: underline;
}
