/*
Sommaire :
  - Fonts
  - Variables
  - Éléments communs
  - Couverture (écran d’accueil)
  - Sommaire et navigation 
  - Contenu
  - Entretiens (template = interview)
  - Glossaire (template = glossary)
  - Colonnes
  - Notes
  - Images de notes
  - Images en annexes
  - Vidéos
*/


/* ------------------------------------------------------------------------ Fonts */
@font-face {
  font-family: "OCR-X Regular";
  src: url(fonts/OCR-X-Regular.otf);
  font-weight: normal;

}

@font-face {
  font-family: "WallaBook";
  src: url(fonts/SDWalla-Regular.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: "WallaBookIt";
  src: url(fonts/SDWalla-Italic.woff2) format("woff2");
  font-weight: normal;
  font-style: italic;

}

@font-face {
  font-family: "WallaBold";
  src: url(fonts/SDWalla-Bold.woff2) format("woff2");
  font-weight: normal;
  font-style: italic;

}

/* @font-face {
  font-family: "Ecole";
  src: url("fonts/Ecole-Italic.woff2") format("woff2"),
    url("fonts/Ecole-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
} */

/* @font-face {
  font-family: "Ecole";
  src: url("fonts/Ecole-Regular.woff2") format("woff2"),
    url("fonts/Ecole-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
} */

/* @font-face {
  font-family: "Ecole";
  src: url("fonts/Ecole-Bold.woff2") format("woff2"),
    url("fonts/Ecole-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
} */
@font-face {
  font-family: "OCR-X Bold";
  ;
  src: url("fonts/OCR-X-Bold.otf");
  font-weight: bold;
  font-style: normal;
}

/* ------------------------------------------------------------------------ Variables */
:root {
  /* typographie */
  --fonttext: "WallaBook", sans-serif;
  --fonttextit: "WallaBookIt", sans-serif;
  --fontfamily: "OCR-X Regular", sans-serif;
  --fontheadingmed: "WallaBold", sans-serif;
  --fontheading: "OCR-X Bold", sans-serif;
  --lineheightheading: 1.05;
  --lineheighttight: 1.3;
  --bigsize: clamp(2.50rem, calc(1.83rem + 3.33vw), 6.00rem);
  --basesize: 1.15rem;
  --color: rgba(0, 0, 0, 0.85);
  /* espacements homogènes */
  --spacer: 2rem;
  /* largeur des notes de côté */
  --sn-width: 15rem;
  /* couleur d’accentuation */
  --accentcolor: orangered;
  /* largeur max. des textes */
  --maxwidth: 46rem;
}

@media (max-width:30rem) {
  :root {
    --spacer: 1rem;
    --basesize: 1rem;
    --bigsize: clamp(1.5rem, -1.25rem + 10vw, 4rem);
  }
}

/* ------------------------------------------------------------------------ Common */
/* box model */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/* smooth scroll */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* page defaults */
body {
  font-family: var(--fonttext);
  /* font-feature-settings: "ss02"; */

  color: var(--color);
  font-size: var(--basesize);
  line-height: 1.3;
  margin: 0;
  overflow-x: hidden;
}

p:first-child {
  margin-top: 0;
}

a {
  color: currentColor;
  text-underline-offset: 0.12em;
}

a:hover {
  color: var(--accentcolor);
}

img {
  max-width: 100%;
  height: auto;
}

mark {
  background: var(--accentcolor);
  padding: 0 .15em;
}

sub,
sup {
  line-height: 0;
}

sup {
  top: 0.1em;
  position: relative;
}

hr {
  height: 0;
  border: none;
  background: none;
  border-top: 2px solid #000;
  width: 4em;
  margin: 1em 0;
  text-indent: 0;
}

/* ------------------------------------------------------------------------ Cover */
#header {
  min-height: 100vh;
  padding: var(--spacer);
}

#header h1 {
  margin: 0;
  margin-bottom: 1rem;
  line-height: .8;
  max-width: calc(var(--bigsize) * 16);
  font-size: calc(var(--bigsize) * 1.5);
  color: var(--accentcolor);
  font-feature-settings: "ss05";
  letter-spacing: -.05em;
}

#header h2 {
  font-family: var(--fontfamily);
  line-height: var(--lineheightheading);
  margin: 0;
  max-width: calc(var(--bigsize) * 16);
  color: var(--accentcolor);
  margin-top: 2rem;
}

#header h2::before {
  content: "";
  display: block;
  /* width: 1ch;
  border-top: 2px solid ;
  margin: .5em 0; */
}

#header h2:empty {
  display: none;
}

.meta {
  display: grid;
  grid-gap: var(--spacer);
  grid-template-columns: 15vw minmax(250px, 1fr) minmax(250px, 1fr);
  margin-top: 2rem;
}
.meta-year {
  display: none!important;
}
#quicklinks {
  position: absolute;
  bottom: var(--spacer);
}

#quicklinks a {
  display: inline-block;
  margin-right: 1em;
}

/* le titre courant n’est affiché qu’en contexte print */
.runningtitle,
.runningfolio {
  display: none;
}

.runningtitle+h1,
.runningtitle+h2,
.runningtitle+h3 {
  margin-top: 0;
}

@media screen and (max-width:45rem) {
  .meta {
    display: block;
  }

  .meta>* {
    margin-bottom: 1em;
  }

  #quicklinks a {
    display: block;
  }
}

/* ------------------------------------------------------------------------ Nav */
#nav {
  min-height: 100vh;
  display: grid;
  /* grid-template-columns: min-content; */
  grid-gap: var(--spacer);
  column-gap: 0;
  padding: var(--spacer);
  align-content: center;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#nav h2,
#nav ul {
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  grid-column: 1;
  margin: 0;
  font-size: 1em;
  font-family: var(--fontheading);
  line-height: var(--lineheightheading);
  font-feature-settings: "ss05";

}

#nav ul #nav-conclusion {
  margin-bottom: 20rem;
}

#nav h2 {
  font-size: 3em;
}

.nav-default+.nav-appendices {
  margin-top: 1em;
}

#nav ul,
#index ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#nav .nav-ul li a {
  text-decoration: none;
  font-size: 2em;
}

#nav .nav-ul li a:hover {
  text-decoration: none;
  color: var(--accentcolor);
}

#nav-interviews {
  margin-top: 1em
}

/* .nav-appendices + .nav-interview {margin-top: 1em} */
.nav-interview+.nav-references {
  margin-top: 1em
}

/* #index : le sommaire, une fois cloné */
#index {
  position: sticky;
  top: var(--spacer);
  font-size: 0.75em;
  height: calc(100vh - var(--spacer) * 2);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

/* bouton toggle menu */
#index button {
  display: none;
  border: 1px solid;
  background: #000;
  color: white;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  overflow: hidden;
  border: .5rem solid black;
  text-align: center;
  position: absolute;
  bottom: calc(var(--spacer)*2);

}

#index a {
  text-decoration: none;
  font-weight: bold;
}

#index .nav-ul li a:hover {
  text-decoration: none;
  color: var(--accentcolor);
}

#index .active {
  color: var(--accentcolor);
}

#index-quicklinks a {
  display: block;
}

#index #nav-conclusion {
  margin-bottom: 1rem;
}

@media screen and (max-width:80rem) {
  #nav {
    display: block;
    min-height: 0;
    margin-bottom: calc(var(--spacer) * 2);
  }

  /* menu responsive */
  #index {
    z-index: 2;
    top: 0;
    max-width: none;
    right: 0;
    width: 100%;
    height: 100vh;
    background: white;
    transform: translateX(100%);
    transition: all 250ms;
    position: fixed;
    padding: var(--spacer);
    font-size: 1em;
  }

  #index button {
    display: block;
    transform: translateX(calc(-100% - var(--spacer) *2));
  }

  #index li {
    display: none;
  }

  #index.visible {
    transform: translate(0);
  }

  #index.visible li {
    display: block;
  }

  #index.visible button {
    transform: translateX(0);
  }

  #index.visible>* {
    margin-bottom: .5em;
  }

  #index-quicklinks {
    display: none;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--fontheading);
  line-height: var(--lineheightheading);

}

@media screen and (max-width:45rem) {
  #nav h2 {
    columns: 1;
    -webkit-columns: 1;
    margin-bottom: 1rem;
    font-size: 2rem;
  }

  #nav ul {
    columns: 1;
    -webkit-columns: 1;
  }

  #nav ul #nav-conclusion {
    margin-bottom: 1rem;
  }

  #nav .nav-ul li a {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------------------ Content */
main {
  display: grid;
  grid-template-columns: 15vw 1fr;
  grid-gap: var(--spacer);
  align-self: start;
  padding: var(--spacer);

}

/* les sections */
main>*:not(#index) {
  grid-column: 2;
  margin-bottom: calc(var(--spacer) * 2);
  scroll-margin-top: 1.5em;
}

main p,
main ul,
main blockquote,
main ol {
  max-width: var(--maxwidth);
  list-style-type: none;
  padding-left: 0;
}

main ol li {
  /* padding-left: 2rem; */
}

main ol li p {}

main ol li:before {
  content: counter(level1) " ";
  /*Instead of ". " */
  counter-increment: level1;
  font-variant-numeric: tabular-nums;
}

main h1:first-child,
main h2:first-child,
main h3:first-child {
  margin-top: 0;
}

main h1 {
  font-family: var(--fontheading);
  line-height: var(--lineheightheading);
  max-width: var(--maxwidth);
  text-align: center;
  padding: 1em .1em;
  background-color: var(--accentcolor);
  font-size: 2.5em;
  border-radius: 5em;
  font-feature-settings: "ss05";


}

main h1 span {
  display: block;
  font-size: 1.5rem;

}

main h2 {
  font-family: var(--fontfamily);

  line-height: var(--lineheightheading);
  font-size: 1.5em;
  max-width: var(--maxwidth);
  text-align: left;
  border-top: 1px solid black;
  padding-top: 1em;
  font-feature-settings: "ss05";


}

main h3 {
  font-family: var(--fontfamily);
  text-transform: uppercase;
  font-size: 1em;
  /* margin-left: 2em; */
  /* font-weight: bold; */
  text-align: left;
  line-height: var(--lineheightheading);
  max-width: var(--maxwidth);
  /* text-align: center; */


}

main h4 {
  font-family: var(--fontfamily);
  font-size: 1.25em;
  /* margin-left: 2em; */
  font-weight: normal;
  line-height: var(--lineheighttight);
  text-align: left;
  max-width: var(--maxwidth);

}

main strong {
  font-family: var(--fontfamily);
  font-feature-settings: "ss05";
  font-weight: normal;
  /* color: var(--accentcolor); */
  letter-spacing: -0.05rem;
  font-size: calc(var(--basesize) * 0.95);
}

main em {
  font-family: var(--fonttextit);

}

main figure {
  margin: 1em 0;
  max-width: var(--maxwidth);
}

main figure img {
  border-radius: 2em;
  transition-property: border-radius;
  transition-duration: 300ms;
}

main figure img:hover {
  border-radius: 0em;
}

main blockquote {
  font-family: var(--fontfamily);
  font-style: normal;
  margin-left: 0;
  padding: 1.5em;
  border: 1px solid var(--accentcolor);
  color: var(--accentcolor);
  border-radius: 2rem;
  margin-inline-end: 0;
  line-height: var(--lineheighttight);
  font-feature-settings: "ss02";
}
@media screen and (max-width:80rem) {
  main blockquote {
    padding: 0;
    border: none;
  }
  
}

/* main blockquote::before{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -8px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 40px solid;
  border-color: transparent transparent transparent #666;
  
}
main blockquote:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent lightyellow;
} */
main blockquote p:last-child {
  margin-bottom: 0;
}


@media screen and (max-width:80rem) {
  main {
    display: block;
    max-width: var(--maxwidth);
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------------------ Break */
.breakpage,
.breakcolumn,
.breakprint {
  display: none;
}

/* ------------------------------------------------------------------------ Entretiens (template = interview) */
.itw-container {
  /* border: 1px solid var(--accentcolor); */
  /* padding: 0 .5em 5em .5em; */
  /* border-radius: 10em; */
  max-width: var(--maxwidth);

}

.interview h2 {
  border-top: none;
  color: var(--accentcolor);
  padding-top: .25em;
  margin-bottom: .25em;
  text-align: center;
  font-family: var(--fontheading);
  font-size: 3em;
}

.interview p {
  --indent: 8em;
  padding-left: var(--indent);
}

.interview .itw-buttons {
  max-width: var(--maxwidth);
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: stretch;
  flex-grow: 1;

}

.itw-buttons p {
  /* flex-grow: 1; */
  margin: 0;
}

/* ------------------------------------------------------------------------ Audio */
.itw-buttons audio {
  /* width: 100%; */
  flex: 1;
}

.interview p:has(audio) {
  padding-left: 0 !important;
}

.interview p:has(button) {
  padding-left: 0 !important;
}

.interview p audio {
  background-color: #f1f3f4;
  border-radius: 2rem;

}

.interview button {
  /* width: 100%; */
  height: 54px;
  border-radius: 2rem;
  font-size: 1rem;
  letter-spacing: .01rem;
  border: 0;
  background-color: #f1f3f4;
  cursor: pointer;
  font-weight: bold;
  flex: 1;
}

.interview p button:hover {
  color: var(--accentcolor);
}

@media screen and (max-width:40rem) {
  .interview p {
    --indent: 0
  }

}

.interview p:nth-child(1) strong:first-child,
.interview p:nth-child(2) strong:first-child {
  text-align: left;
}

.interview :not([data-split-from]) strong:first-child {
  margin-left: calc(var(--indent) * -1);
  min-width: calc(var(--indent) - 1em);
  float: left;
  text-align: right;
  padding-right: 1em;
  text-decoration: underline;
  font-weight: normal;
}

@media screen and (max-width:30rem) {
  .itw-buttons {
    margin-top: 1em;
    flex-direction: column !important;
    gap: .25em !important;
  }

  .itw-buttons audio {
    width: 100%;
    flex: none;
  }

  .itw-buttons button {
    height: 54px;
    flex: none;
  }
}


/* ------------------------------------------------------------------------ Accordion */
section.interview .hidden {
  display: none;
}

section.interview .show {
  display: block !important;
}



/* ------------------------------------------------------------------------ Glossaire (template = glossary) */
.glossary {
  columns: 3;
  column-gap: var(--spacer);
  font-size: 0.85em;
}

.term {
  break-inside: avoid-column;
}

.term dl {
  margin-top: 0;
}

.term dt {
  font-weight: bold;
}

.term dd {
  margin-bottom: 1em;
  margin-left: 0;
}

@media screen and (max-width:100rem) {
  .glossary {
    columns: 2;
  }
}

@media screen and (max-width:30rem) {
  .glossary {
    columns: 1;
  }
}

/* ------------------------------------------------------------------------ Colonnes */
.columns {
  font-size: 0.85em;
  columns: 3;
  column-gap: var(--spacer);
}

.columns p {
  break-inside: avoid;
  max-width: 28em;
}

@media screen and (max-width:100rem) {
  .columns {
    columns: 2;
  }
}

@media screen and (max-width:30rem) {
  .columns {
    columns: 1;
  }
}

/* ------------------------------------------------------------------------ Images de notes */
/* footnotes */
.imagenote {
  float: right;
  clear: right;
  width: 250px;
  font-size: 0.85rem;
  margin-right: calc(-250px - var(--spacer));
  margin-bottom: 1rem;
  color: var(--accentcolor);

}

.imagenote img {
  display: block;
}

.imagenote .caption {
  padding: 0.5em 0;
  display: block;
  text-indent: 0;
  font-family: var(--fontfamily);
}

.imagenote .caption::before {
  content: "↑ ";
}

@media screen and (max-width: 80rem) {
  .imagenote {
    /* margin: .5em 1em .5em calc(var(--spacer ) * -1);
    float: left;
    clear: left; */
    margin: .5em calc(-1 * ((100vw - var(--maxwidth)) / 2) - var(--spacer)) .5em var(--spacer);
    display: block;
    width: 40%;
  }

  .imagenote .caption {
    padding: 0.5em var(--spacer) 0 0;
    font-size: .85em;
  }
}

/* --maxwidth = 46rem */
@media screen and (max-width: 46rem) {
  .imagenote {
    margin: .5em 1em .5em calc(var(--spacer) * -1);
    float: left;
    clear: left;
  }

  .imagenote .caption {
    padding: 0.5em 0 0 var(--spacer);
  }
}

/* ------------------------------------------------------------------------ Notes */

.sn-toggle {
  display: none;
}

.sn-toggle:checked+.sn-note {
  display: block;
}

.sn-toggle-label,
sup a.footnote-ref {
  padding: 0 0.15em 0.25em 0;
  font-size: 1em;
  font-family: var(--fontfamily);
  top: -0.05em;
  position: relative;
  text-decoration: none;
  border: none;
  color: var(--accentcolor);
  /* font-weight: bold; */
  font-variant-position: super;
  letter-spacing: -0.30em;

}

/* appels de note */
.sn-toggle-label::before {
  content: ""
}

.sn-toggle-label::after {
  content: ""
}

/* rappel */
.sn-note::before {
  float: left;
  padding-right: 0.5em;
  content: attr(data-ref) ".";
  color: var(--accentcolor);
}

sup[id^="fn"] {
  vertical-align: baseline;
}

sup a.footnote-ref {
  color: var(--accentcolor);
  font-weight: 700;
}

.sn-note {
  top: 0.25em;
  font-size: 0.85rem;
  float: right;
  clear: right;
  width: var(--sn-width);
  margin-right: calc(var(--sn-width) * -1 - var(--spacer));
  margin-bottom: 1rem;
  position: relative;
  font-style: normal;
  font-family: var(--fontfamily);
  font-feature-settings: "ss02";

}

.sn-note em,
.sn-note i {
  font-family: var(--fontfamily);
  font-style: normal;

}

.sn-note em::before,
.sn-note i::before {
  content: "“";
}

.sn-note em::after,
.sn-note i::after {
  content: "”";
}

.sn-note :first-child {
  margin-top: 0;
}

.sn-note img {
  display: block;
}

.sn-note p {
  margin: 0;
}

.sn-note .caption {
  display: block;
  margin-top: 0.25em;
}

.sn-note .caption::before {
  content: "↑ ";
}

@media screen and (max-width: 80rem) {
  .sn-note {
    display: none;
  }

  .sn-toggle:checked+.sn-note {
    display: block;
    width: 100%;
    float: none;
    clear: both;
    margin: 1em 0;
    top: 0;
  }

  label[for^="sn-"] {
    color: var(--accentcolor);
    cursor: pointer;
    font-weight: 700;
  }
}

/* default footnotes (no js) */
.footnotes {
  max-width: var(--p-width);
  margin-top: 2em;
  padding-top: 1em;
}

.footnotes ol {
  font-size: 0.85rem;
  padding-left: 1em;
}

.footnotes :target {
  background: #ff0;
}

hr.footnotes-sep {
  background: none;
  border: none;
  margin: 0;
  width: 4em;
}


/* ------------------------------------------------------------------------ Auto folder (template = autofolder) */
.autofolder .content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--spacer);
  align-content: start;
  grid-auto-flow: dense;
}

.autofolder .figure {
  grid-column: span 3;
  align-self: start;
  justify-self: start;
  margin: 0;
  padding: 0;
}

.autofolder .portrait {
  /* grid-row: span 2; */
}

.autofolder .landscape {
  grid-column: span 6;
}

@media screen and (max-width:40rem) {
  .autofolder .figure {
    grid-column: 1 / -1 !important;
  }
}

/* ------------------------------------------------------------------------ Images annexes (template = appendices) */
.appendices .content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--spacer);
  align-content: start;
}

.appendices .figure {
  grid-column: span 3;
  align-self: start;
  justify-self: start;
  margin: 0;
  padding: 0;
}

.figure img {
  display: block;
}

.notwhite {
  background: rgba(0, 0, 0, 0.05);
}

.notwhite img {
  mix-blend-mode: multiply;
}

.notwhite .caption,
.notwhite figcaption {
  background: white;

}

figcaption {
  font-family: var(--fontfamily);
  
  font-size: 0.85rem;
  background: white;
  color: var(--accentcolor);
  padding: 0.5em 0 0;
}
figcaption em {
  font-style: normal;
  font-family: var(--fontfamily);
}
figcaption em::before{
  content: "\2018";
}
figcaption em::after{
  content: "\2019";
}
figcaption::before {
  content: "↑ ";
}

/* largeur des .figure */
.figure.offset2 {
  grid-column: 3 / span 3;
}

.figure.offset4 {
  grid-column: 5 / span 3;
}

.figure.offset6 {
  grid-column: 7 / span 3;
}

.figure.offset8 {
  grid-column: 9 / span 3;
}

.figure.third {
  grid-column: span 4;
}

.figure.third.offset2 {
  grid-column: 3 / span 4;
}

.figure.third.offset4 {
  grid-column: 5 / span 4;
}

.figure.third.offset6 {
  grid-column: 7 / span 4;
}

.figure.third.offset8 {
  grid-column: 9 / span 4;
}

.figure.half {
  grid-column: span 6;
}

.figure.half.offset2 {
  grid-column: 3 / span 6;
}

.figure.half.offset4 {
  grid-column: 5 / span 6;
}

.figure.half.offset6 {
  grid-column: 7 / span 6;
}

.figure.twothird {
  grid-column: span 8;
}

.figure.twothird.offset2 {
  grid-column: 3 / span 8;
}

.figure.twothird.offset4 {
  grid-column: 5 / span 8;
}

.figure.threequarter {
  grid-column: span 9;
}

.figure.threequarter.offset2 {
  grid-column: 3 / span 9;
}

.figure.full {
  grid-column: 1 / span 12;
}

/* alignement vertical des .figure */
.figure.top {
  align-self: start;
}

.figure.center {
  align-self: center;
}

.figure.bottom {
  align-self: end;
}

@media screen and (max-width:40rem) {
  .appendices .figure {
    grid-column: 1 / -1 !important;
  }

  .figure {
    display: flex;
    flex-direction: column-reverse;
  }

  figcaption::before {
    content: "↓ " !important;
  }

  main h1 {
    font-size: 2.5rem !important;
  }

  main h2 {
    font-size: 1.5rem !important;
  }

  main ul {
    padding-left: 1.25rem;
  }

  main ol {
    /* padding-left: 2rem; */
  }
}

/* ------------------------------------------------------------------------ Videos */
.video {
  max-width: var(--maxwidth);
  aspect-ratio: 16/9;
  position: relative;
  margin: 1em 0;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video+figcaption {
  margin-top: -1em;
}

main blockquote span {
  color: #000;
  display: block;
}

.timeline {
  
  width: var(--maxwidth);
  height: 500px;
}
@media screen and (max-width: 80rem) {
  .timeline {
    width: 100%;
  }
  
}
.timeline-img {
  display: none !important;
}
.timeline-QR {
  display: none;
}

.arena {
  white-space: nowrap;
}
main h1 .arena {
  font-size: inherit;
  display: inline;
}
.arena a {
  text-decoration: none;
  pointer-events: none;
}