/*
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: "Newsreader", serif;
  --bigsize: clamp(2.50rem, calc(1.83rem + 3.33vw), 6.00rem);
  --basesize: 1.2rem;
  --color: rgb(0, 74, 147);
  /* espacements homogènes */
  --spacer: 2rem;
  /* largeur des notes de côté */
  --sn-width: 15rem;
  /* couleur d’accentuation */
  --accentcolor: #00a4d6;
  /* largeur max. des textes */
  --maxwidth: 46rem;
  --font-sans: "Karla", Helvetica, sans-serif;
}

@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;
  background-color: #fdfdfa;
  font-weight: 400;
}

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

a {
  color: currentColor;
  transition: color 0.2s;

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

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);
  text-wrap: balance;
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

#header h2 {
  margin: 0;
  line-height: 1.2;
  max-width: calc(var(--bigsize) * 16);
  font-size: calc(var(--bigsize) * .75);
  margin: .5em 0;
  text-wrap: balance;
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
}

/* #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;
  font-family: var(--font-sans);
}

#quicklinks {
  position: absolute;
  bottom: var(--spacer);
}

#quicklinks a {
  display: inline-block;
  margin-right: 1em;
  font-family: var(--font-sans);
}

/* 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;
  font-family: var(--font-sans);
}

#nav h2,
#nav ul {
  grid-column: 2;
  margin: 0;
  font-size: 1em;
}

#nav h2 {
  font-size: 1.5em;
  line-height: 1.2;
  text-wrap: pretty;
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

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

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

#index .nav-separator,
#nav .nav-separator {
  height: 1px;
  background: var(--accentcolor);
  margin: 0.75em 0;
  width: 20px;
}

/* #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;
  font-family: var(--font-sans);
}

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

#index a,
#nav 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: 1.5em;
  line-height: 1.2;
  max-width: var(--maxwidth);
  text-wrap: pretty;
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

main h3 {
  font-size: 1.15em;
  padding-left: 2em;
  max-width: var(--maxwidth);
  text-wrap: pretty;
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

main h4 {
  font-size: 1.5em;
  line-height: 1.2;
  margin-left: 6em;
  font-weight: normal;
  text-wrap: pretty;
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  max-width: 28rem;
}

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

main blockquote {
  /* font-style: italic; */
  font-family: var(--font-sans);
  margin: 0;
  padding: 1em 0 1em 4em;
  font-size: 0.97em;
  font-weight: 365;
}

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: 400;
  font-family: var(--font-sans);
  letter-spacing: -1px;
}

/* ------------------------------------------------------------------------ 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;
  font-family: var(--font-sans);
  font-weight: 355;
}

.imagenote img {
  display: block;
}

.imagenote .caption {
  padding: 0.5em 0;
  display: block;
  text-indent: 0;
  text-wrap: pretty;
  /* font-size: 1rem;
  font-weight: 355; */
}

.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;
  letter-spacing: 0.05em;
  font-size: 0.75em;
  top: -0.05em;
  position: relative;
  text-decoration: none;
  border: none;
  scroll-margin-top: 1em;
  font-family: var(--font-sans);
  color: var(--accentcolor)
}

.figure_reference {
  font-style: normal;
  font-weight: 600;
  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.65em;
  top: -0.05em;
  position: relative;
  text-decoration: none;
  border: none;
  font-family: var(--font-sans);
  /* font-weight: 700; */
  vertical-align: super;
}

/* 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) "";
  font-weight: 600;
  font-size: 0.75rem;
  position: relative;
  top: -3.5px;
}

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(--font-sans);
  font-weight: 355;
  display: flex;
}

.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 (min-width: 80.0001rem) {
  .sn-toggle-label {
    pointer-events: none;
  }
}

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

/* 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;
  padding: 0.5em 0 0;
  font-family: var(--font-sans);
  font-weight: 355;
}

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 en bleu */
vimeo-embed button {
  --button-bgc: #00adef;
}

#introduction h4 {
  max-width: 35rem;

  .sn-toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
  }
}

.quote-name {
  font-size: 1.25rem;
}

.interview {
  h4 {
    margin-left: 5.4em;
  }
}