/*
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: "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: "Ecole";
  src: url("fonts/Ecole-BoldItalic.woff2") format("woff2"),
    url("fonts/Ecole-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

/* ------------------------------------------------------------------------ Variables */
:root {
  /* typographie */
  --fontfamily: "Ecole", sans-serif;
  --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: black;
  /* largeur max. des textes */
  --maxwidth: 46rem;
}

@media (max-width:30rem) {
  :root{
    --spacer:1rem;
    --basesize:1rem;
    --bigsize: clamp(1.5rem, -1.2500rem + 10.0000vw, 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(--fontfamily);
  color: var(--color);
  font-size: var(--basesize);
  line-height: 1.45;
  margin: 0;
  overflow-x: hidden;
}
p:first-child { margin-top: 0; }
a { color: currentColor; }
img { max-width: 100%; height: auto; }
mark { background: var(--accentcolor); padding: 0 .15em; color: white;}
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;
  line-height: 1.1;
  max-width: calc(var(--bigsize) * 16);
  font-size: calc(var(--bigsize) * 1);
  color: var(--accentcolor);
}
#header h2 {
  margin: 0;
  line-height: 1.2;
  max-width: calc(var(--bigsize) * 16);
  font-size: calc(var(--bigsize) * .75);
  color: var(--accentcolor);
}
#header h2::before{
  content: "—";
  display: block;
  font-size: calc(var(--bigsize) * .75);
}
#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;
}
#header nav {
  position: absolute;
  bottom: var(--spacer);
}
#header nav 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;}
  #header nav a { display: block; }
}
/* ------------------------------------------------------------------------ Nav */
#nav {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 15vw 1fr;
  grid-gap: var(--spacer);
  padding: var(--spacer);
  align-content: center;
}
#nav h2,
#nav ul {
  grid-column: 2;
  margin: 0;
  font-size: 1em;
}
.nav-default + .nav-appendices { margin-top: 1em;}

#nav ul,
#index ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/* #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: 3em;
  height: 3em;
  border-radius: 1.5em;
  overflow: hidden;
  border: .5em solid black;
  text-align: center;
  position: absolute;
  bottom: var(--spacer);
}
#index a {
  text-decoration: none;
}
#index .active {
  text-decoration: underline;
}
#index-quicklinks a{
  display: block;
}

@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;}
}


/* ------------------------------------------------------------------------ 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);
}
main h1:first-child,
main h2:first-child,
main h3:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}
main h2 {
  font-size: 1em;
}
main h3 {
  font-size: 1em;
  margin-left: 2em;
  font-weight: normal;
  text-decoration: underline;
}
main h4 {
  font-size: 1em;
  margin-left: 2em;
  font-weight: normal;
}

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

main blockquote {
  font-style: italic;
  margin-left: 0;
  padding-left: 4em;
}

@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) */
.interview p {
  --indent: 8em;
  padding-left: var(--indent);
}
@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;
}

/* ------------------------------------------------------------------------ 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: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: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;
}
.imagenote img {
  display: block;
}
.imagenote .caption {
  padding: 0.5em 0;
  display: block;
  text-indent: 0;
}
.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 0.25em 0.15em;
  font-size: 0.75em;
  top: -0.05em;
  position: relative;
  text-decoration: none;
  border: none;
  font-weight: bold;
}
/* 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) "]";
}
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;
}
.sn-note em,
.sn-note i {
  font-style: italic;
}
.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: #ff6347;
    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-size: 0.85rem;
  background: white;
  padding: 0.5em 0 0;
}
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;
  }
}

/* ------------------------------------------------------------------------ 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;
}