/*
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.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(--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);
  text-wrap: balance;
}
#header h2 {
  margin: 0;
  line-height: 1.2;
  max-width: calc(var(--bigsize) * 16);
  font-size: calc(var(--bigsize) * .75);
  color: var(--accentcolor);
  margin: .5em 0;
  text-wrap: balance;
}
/* #header h2::before{
  content: "";
  display: block;
  width: 1ch;
  border-top: 2px solid ;
} */
#header h2:empty { display: none;}
.meta {
  display: grid;
  grid-gap: var(--spacer);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
}
#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: 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;
  text-wrap: pretty;
}
/* #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;
  text-wrap: pretty;
}
main h2 {
  font-size: 1em;
  max-width: var(--maxwidth);
  text-wrap: pretty;
}
main h3 {
  font-size: 1em;
  padding-left: 2em;
  font-weight: normal;
  text-decoration: underline;
  max-width: var(--maxwidth);
  text-wrap: pretty;
}
main h4 {
  font-size: 1em;
  margin-left: 2em;
  font-weight: normal;
  text-wrap: pretty;
}

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

main blockquote {
  font-style: italic;
  margin: 0;
  padding: 1em 0 1em 4em;
}
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) */
.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; */
  width: 0;
  position: absolute;
  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;
  text-wrap: pretty;
}
.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 iconographiques (réunies en fin de chapitre) */

.figure_call{
  padding-left: 0.25em;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.05em;
  font-size: 0.75em;
  top: -0.05em;
  position: relative;
  text-decoration: none;
  border: none;
  font-weight: bold;
  scroll-margin-top: 1em;
}
.figure_reference {
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.05em;
}


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

.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 .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 figures (template = figures) */
.figures_page .content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--spacer);
  align-content: start;
}

/* ------------------------------------------------------------------------ Images annexes (template = appendices) */
/* set a grid */
.appendices .content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--spacer);
  align-content: start;
}
/* paragraphs, titles, blocquotes within appendices */
.appendices .content > :not(figure){
  grid-column: span 8;
}
/* figures and videofigures default : 3 cols  */
.videofigure,
.figure {
  grid-column: span 3;
  align-self: start;
  margin: 0;
  padding: 0;
  max-width: none;
}
/* justify image figures at start */
.figure {
  justify-self: start;
}
.figure img {
  display: block;
}
.videofigure .video {
  max-width: none;
}

figcaption {
  font-size: 0.85rem;
  background: white;
  padding: 0.5em 0 0;
}
figcaption::before {
  content: "↑ ";
}
figcaption:empty { display: none;}

/* largeur et décalage des .figure et .videofigure, uniquement pour la version écran */
.screen .figure,
.screen .videofigure  {
  grid-column: var(--col, auto) / span var(--width, 3);
}

/* 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) {
  .figure, .videofigure { 
    grid-column: 1 / -1 !important;
    display: flex;
    flex-direction: column-reverse;
  }
  figcaption::before {
    content: "↓ " !important;
  }
}

/* notwhite has a greu background */
.notwhite {
  background: rgba(0, 0, 0, 0.05);
}
.notwhite img {
  mix-blend-mode: multiply;
}
.notwhite .caption,
.notwhite figcaption {
  background: white; 
}


/* ------------------------------------------------------------------------ Videos */
.video {
  max-width: var(--maxwidth);
  aspect-ratio: 16/9;
  position: relative;
  margin: 1em 0;
}
.video[style]{
  background: var(--poster);
  background-size: cover;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video + figcaption {
  margin-top: -1em;
}
.video > * {
  aspect-ratio: 16 / 9;
  display: grid;
  inline-size: 100%;
  position: relative;
  background: var(--poster);
  background-size: cover;
}
.video > * > iframe { 
  block-size: 100%;
  border: 0;
  border-radius: inherit;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
}
.video iframe:not([src=""]) + button {
  display: none;
}
.video button {
  background-color: var(--button-bgc, #F00);
  block-size: var(--button-h, 50px);
  border: 0;
  border-radius: var(--button-bdrs, 14%);
  display: grid;
  inline-size: var(--button-w, 75px);
  opacity: var(--button-op, 0.8);
  position: absolute;
  place-self: center;
  transition: all .2s ease-in;
}
.video button::before {
  aspect-ratio: 1;
  background: #FFF;
  block-size: 1.5em;
  clip-path: polygon(20% 0%, 20% 100%, 100% 50%);
  content: '';
  place-self: center;
}

vimeo-embed button { --button-bgc: #00adef; }