@charset "utf-8";
@import url("fonts/ibm-plex-sans/stylesheet.css");
@import url("fonts/Input/InputMono/stylesheet.css");
@import url("fonts/Input/InputSans/stylesheet.css");
@import url("fonts/fira-sans/stylesheet.css");
@import url("fonts/fira-code/stylesheet.css");
@import url("fonts/FragenThesis/stylesheet.css");
@import url("fonts/ibm-plex-mono/stylesheet.css");
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  // margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}html {
    box-sizing: border-box;
    text-decoration-skip-ink: auto;
}

body, html{
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;

}


*, *:before, *:after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-smooth: never;
    -moz-font-smooth: never;
    widows: 1;
    orphans: 1;
    /* font-weight: normal; */
    position: relative; 
}

em { font-style: italic; }

button {
    border: none;    
    outline: none;
}

a { 
    text-decoration: none;
    color: currentColor;
}

ul {
 list-style-type: none; 
 list-style-position: inside;
}

*:focus{
    outline: none;
}

sup{ line-height: 0; }:root {

    /* TEXT ---------------------------------------------------- */
    --font: 'Fragen Thesis';
    --font-sans: 'ibm-plex-sans';
    --font-code:  'Fira Code';
    --title-font: 'Fragen Thesis';

    --font-size: 18px;
    --baseline: 30px;
    --indent: 6ch;
    --font-small: 12px; 
    --font-size-caption: 14px;
    --caption-line-height: calc(var(--baseline)*0.75);

    --title-indent: 20mm;
    --indent-title: 16mm;


    font-size: var(--font-size);
    line-height: var( --baseline);
    font-family: var(--font);

    
    /* COLOR ---------------------------------------------------- */

    --color-a: #fdca40;
    --color-b: #FB8D24;;
    --color-b-light: #fdca9b;
    --color-c: #E03674;
    --color-c-light: #ee91b3;
    --color-d: #b448ea;
    --color-e: #6699ff;
    --current-color: var(--color-c);
    --color-important: #66ff99;

    --color-pause: #dfdfdf;
    --color: #000000; 
    --mono-color-light: #999;
    --mono-color-bg: white;
    
    --gray: #888;
    --gray: #dfdfdf;
    --gray: #afafaf;



    /* BORDER ---------------------------------------------------- */

    --border-code: 1.6px dotted #444;
    --table-border: solid 1px #afafaf;
    --border-title: 2px dotted #000000;

    --img-border: solid 1px #999;
    --img-border-light:  solid 1px var(--gray);

}

.hackathon-seq-a{ --color: #fdca40; }
.hackathon-seq-b{ --color: #FB8D24; }
.hackathon-seq-c{ --color: #E03674; }
.hackathon-seq-d{ --color: #b448ea; }
.hackathon-seq-e{ --color: #6699ff; }


/* .replace-biblio{
    background-color: orange;
} *//* TEXT (sceen & print ---------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------- */

/* 
In this file:
- text: p, italic, strong, links, hr, ...
- list (ul, ol)
- blockquote 
- code
*/


.people{
    font-family:  var(--font)!important; 
    font-style: normal!important; 
}


em {
    font-style: italic;
    font-weight: 500;
}

strong{ 
    font-weight: 600;
    line-height: 1em;
}

strong em{ 
    font-weight: 800;
    line-height: 1em;
}

hr{
    border: none;
    width: 100%;
    margin-top: calc(var(--baseline)*0.5);
    margin-bottom: calc(var(--baseline)*2);
}

hr::before{
    content: '❧';
    display: block;
    text-align: center;
    font-size: 28px;
}

.link-in-text{
    border-bottom: 1px dotted #444;
}



/* LISTS --------------------------------------------------------------------------------------- */

.chapter ul li, 
table ul li,
.chapter ol{
    padding-left: var(--indent);
}


.chapter ul,
.chapter ol {
    margin: calc(var(--baseline)*0.5) 0;  
}

.chapter ul li::before, table ul li::before{
    content: "\002014";
    display: inline-block;
    position: absolute; 
    left: calc(var(--indent) - 2ch); 
}


/* Figcaption --------------------------------------------------------------------------------------- */


figcaption, .explication, .figcaption {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--font-size-caption); 
    line-height: var(--caption-line-height);
    text-indent: 0!important;
    text-align: left;

}

figcaption em, .figcaption em{
    font-weight: 600;
}


/* FIGCAPTION ------------ */


#chapitre-01{
    counter-reset: fig 0;
}
#chapitre-02{
    counter-reset: fig 6;
}

#chapitre-04{
    counter-reset: fig 29;
}

#chapitre-05{
    counter-reset: fig 63;
}

#chapitre-06{
    counter-reset: fig 101;
}

#chapitre-07{
    counter-reset: fig 125;
}

figcaption{
    counter-increment: fig;
}

figcaption::before{
    content: "Fig. " counter(fig) " – ";
    break-inside: avoid;
}


/* BLOCKQUOTE --------------------------------------------------------------------------------------- */

blockquote {
    font-family: var(--font-labeur);
    font-style: italic;
    font-weight: 500;
    margin-left: var(--indent);
}



blockquote p em,
blockquote .sidenote-ref,
blockquote .footnote-ref,
blockquote .note-container,
blockquote .note-container p{
    font-style: normal;
    font-weight: normal;
}

blockquote .people{
    display: inline; 
    padding-right: 1ch;
    font-style: normal; 
    color: var(--color-people);

}

blockquote code{
    font-family: var(--font-code);
    font-style: normal; 
    font-weight: normal; 
}

.chapter blockquote ul{
    margin-left: calc(var(--indent)*-1);
}

blockquote .footnote-ref
blockquote .sidenote-ref{
    font-style: normal;
    font-weight: 700;
}


/* CODE --------------------------------------------------------------------------------------- */


code{
    font-family: var(--font-code);
    font-size: 1em;
    font-weight: normal;
}

pre{
    border: var(--border-code);
    padding: calc(var(--baseline)*0.5) 2ch;
}

p code{ 
    border: var(--border-code);
    font-size: 0.8em;
    padding: 2px 5px;
    border-radius: 0.3em;
    margin: 0 2px;
}

.note-container code{
    font-size: 8px;
    padding: 0px 2px;
}

/* CHAP TITLES */

.chapter h2{
    font-size: 2.5em;
    line-height: calc(var(--baseline)*2);
    font-style: italic;
    font-weight: 600;
   
}

#exposition-home .type-expo,
.num-annexe,
.chapter-num h2::before{
    display: block;
    content: "Chapitre " attr(data-chapter);
    font-family: var(--font-sans);
    font-size: var(--font-size);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-weight: 700;
    font-style: normal;
    display: block; 
}


/* TITLES */

h2 {
    counter-reset: h3 0;
}


h3 { 
    counter-increment: h3; 
    counter-reset: h4;
}


h4 { 
    counter-increment: h4; 
    counter-reset: h5;
}

h5 { 
    counter-increment: h5; 
}

.chapter h3::before{ 
    content: "– " counter(h3) " –"; 
    content:  "| " counter(h3) " | "; 
}


.chapter h4::before{ 
    content: "| " counter(h3) "." counter(h4) " | " ;
}


.chapter h5::before{ 
    content: "| " counter(h3) "." counter(h4) "." counter(h5) " | " ;
} 



/* Styles titles */






.chapter h3 {
    font-size: 2em;
    line-height: calc(var(--baseline)*1.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: calc(var(--baseline)*2);
    padding-bottom: 2px;
    margin-bottom: calc(var(--baseline)*1);
    border-bottom: 2px solid currentColor;
    padding-left: 3ch;
   
}

.chapter h3::before{
    display: block; 
    position: absolute; 
    left: 0; 
}


#introduction h3, 
#conclusion h3{
    font-weight: 600;
    margin-top: calc(var(--baseline)*1.5);
    margin-bottom: calc(var(--baseline)*0.5);
    text-wrap: balance; 
    border-bottom: none; 
    padding-left: 0!important;
}

#conclusion h3::before,
#introduction h3::before{
    content: '';

}


.chapter h4, 
.chapter .title-style-h4{
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 1.5em;
    line-height: calc(var(--baseline)*1.2);
    margin-top: calc(var(--baseline)*2);
    margin-bottom: calc(var(--baseline)*0.5);
    padding-left: 5ch;
    text-wrap: balance; 
}



.chapter h4 em{
    font-weight: 800;

}


.chapter h4::before, .title-style-h4::before{
    display: block;
    position: absolute;
    left: 0;
    font-style: italic;
    font-weight: 800;
   
}


.chapter h5, .title-style-h5 {
    font-weight: 600;
    font-size: 1.2em;
    margin-top: calc(var(--baseline)*1.5);
    margin-bottom: calc(var(--baseline)*0.5);
    padding-left: 6.5ch;  
}


.title-style-h5 {
    line-height: calc(var(--baseline)*1);
    border-bottom: none; 
}



.chapter h5::before{
    font-style: italic;
    font-weight: 800;
    display: block;
    position: absolute;
    left: 0;
}

h4 + h5{
    margin-top: var(--baseline);
}

h6 {
    font-size: 1em;
    font-style: italic;
    font-weight: 800;
    display: inline;
}

h6 + p {
    display: inline;
}

h6::before{
    content: "";
    display: block;
    height: var(--baseline);
}

h6::after{
    content: " – ";
    font-style: italic;
    font-weight: 600;
    text-align: justify;
}/* CALL ------------------------------- */

.footnote-ref,
.sidenote-ref {
    font-weight: 700!important;
    font-size: var(--font-small);
    position: relative;
    top: -7px;
    padding-left: 4px;
    font-style: normal!important; 
    line-height: 0; 
}

.footnote-ref sup,
.sidenote-ref sup{
    top: 0px;
    font-size: 1em;
}

input.sn-toggle,
label[for="input-close-sn"]{
    display: none;
}



/* NOTE ------------------------------- */


.note-container p{
    text-indent: 3ch;
    text-align: left; 
    hyphens: none;
    font-size: var(--font-small);
    font-weight: 400;
    font-style: normal;
    line-height: calc(var(--baseline)*0.75);
    letter-spacing: -0.05px;
}

.note-container p a{
    hyphens: none;
}

.note-container .note-marker{
    text-indent: 0;
    display: inline;
    position: absolute; 
    font-size: var(--font-small);
    top: -2px; 
    font-weight: 700;
    font-style: normal;

}


.note-container .footnote-back{
    display: none;
}


.note-container code{
    font-size: 8px;
    padding: 0px 2px;
}

figure{
    break-inside: avoid;
    position: relative;
}


.container-img{
    width: 100%;
    overflow: hidden;
    height: 100%;
}

figure, img {
    width: 100%;
    position: relative;
}

.container-img{
    padding: 0;
    margin: 0;
}

img{
    object-fit: cover;
    display: block;
}


.img-border{
    border: var(--img-border);
}

figure + hr { height: 0; }


figure img{
    --x-snap-baseline: image;
}

figure + p {
    /* text-indent: 0;  */
}

.credit-photo{ 
    display: none;
}





/* Images border ------------------------------------- */

#fig-chapitrage-amelie img,
#webtools-amelie img,
#webtools-benjamin img,
#ressources-websites img,
#chap05_timeline-infructueuse img{
    border: var(--img-border);
}




table{
    border-collapse: collapse;
    font-family: var(--font-sans);
    break-inside: avoid;
    width: 100%;
    table-layout: fixed;
  }
  
  table, th, td {
    border-collapse: collapse;
    text-align: left; 
    font-size: var(--font-size-caption);
    line-height: 1.2em;

  }
  
  th, td {
    padding: 7px 0px;
    border-collapse: collapse;
    border-top: var(--table-border);
    border-bottom: var(--table-border);
    text-align: left;
  }
  
 th{
  font-weight: 600;
 }


  table ul{
    margin: 0!important;
    padding: 0!important;
  }
  
  table .no-border-bottom{
    border-bottom: none;
  }

  table .no-border-top{
    border-top: none;
  }



/* Chapitre 5 TABLES  --------------------------------------------------------------------
-------------------------------------------------------------------------------------------- */

 #table-donnees-suivi tr:nth-of-type(1) th,
 #table-donnees-suivi tr:nth-of-type(1) td{
     border-top: none;
     border-bottom: 1px solid black;
 
 }
 
 #table-donnees-suivi tr:nth-of-type(2) th,
 #table-donnees-suivi tr:nth-of-type(2) td{
     border-top: 1px solid black;
     border-bottom: 1px solid black;
 
 }
 
 
 #table-donnees-suivi tr:nth-of-type(3) th,
 #table-donnees-suivi tr:nth-of-type(3) td{
     border-top: 1px solid black;
     border-bottom: 1px solid black;
 
 }
 
 #table-donnees-suivi tr:nth-of-type(6) th,
 #table-donnees-suivi tr:nth-of-type(6) td,
 #table-donnees-suivi tr:nth-of-type(9) th,
 #table-donnees-suivi tr:nth-of-type(9) td,
 #table-donnees-suivi tr:nth-of-type(13) th,
 #table-donnees-suivi tr:nth-of-type(13) td,
 #table-donnees-suivi tr:nth-of-type(14) th,
 #table-donnees-suivi tr:nth-of-type(14) td{
     border-bottom: 1px solid black!important;
 
 }



/* LOGICIELS AMELIE / BENJAMIN  ------------------------------------------------------------
-------------------------------------------------------------------------------------------- */

#chap05-logiciels thead th{
  text-transform: uppercase;
  border-top: none;
  border-bottom: 1px solid black;
}

#chap05-logiciels tr th:nth-of-type(2),
#chap05-logiciels tr th:nth-of-type(3){
  width: calc(var(--grid-x)*2 + var(--gap)*3); 
 }



/* CHAP 6 / Pagedjs-thematiques  ------------------------------------------------------------
-------------------------------------------------------------------------------------------- */


#pagedjs-thematiques tbody th{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #efefef;


} 

#pagedjs-thematiques{
  --x-span-col: page;
  --x-col-inside: 2;
  break-after: page;  
  margin: 0; 
  position: relative; 
}



#pagedjs-thematiques tbody tr th:nth-of-type(1),
#pagedjs-thematiques tbody tr td:nth-of-type(1){
  width: 90%;
  padding-left: 1ch;
  padding-right: 2ch; 
}


#pagedjs-thematiques tbody tr th:nth-of-type(2),
#pagedjs-thematiques tbody tr td:nth-of-type(2){
  width: 6%;
}

#pagedjs-thematiques_table2 tr, 
#pagedjs-thematiques_table2 th, 
#pagedjs-thematiques_table2 td{
  height: 11px!important; 
}

.difficulte{
  font-size: 11px!important; 
}

#pagedjs-thematiques tbody tr:last-of-type td{
  border-bottom: none; 
}

#exposition-home .type-expo{
    font-size: var(--font-small);
    font-weight: 600;
}#index {
    /* color: #4B2DC4; */

    --col: 120px;
    --width-content: calc(var(--col)*6);
    --nav-w: calc(var(--col)*2);

    
    color: var(--color-text);
    background-color: var(--background);
    --font-size-upp: 14px;

    --img-h: 480px;

    --img-ratio: 4/3;
}

#index #header-home{
    border-bottom: var(--border-layout);
    background-color: var(--header-bg);
    z-index: 20;
    
}


#index #content figure + figure,
#index #content figure + video{
    margin-top: calc(var(--baseline)*-1);
}

#index video{
    margin-bottom: calc(var(--baseline)*0.5);

}


#button-exposition, #link-video-pagedjs{
    display: inline-block;
    margin-bottom: calc(var(--baseline)*1.5);
}

#link-video-pagedjs{
    font-family: var(--font-sans);
    font-size: var(--font-small);
    margin-left: 2ch;
}


#index #header-home .phone{ display: none }

#index button{
    font-family: var(--font-sans);
    font-weight: 500;
    height: calc(var(--baseline)*1.25);
    padding: 0px 1.5ch;
    font-size: 0.8em;
    background-color: var(--color-text-light);
    color: var(--background);
    cursor: pointer;
    border-radius: 5px;

    min-width: var(--nav-w);

}

#index button a{
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: var(--background);
}

#index .extern-link:after,
#index button a::after{
    content: '\002192';
    padding-left: 0.75ch;
}



#index button .icon{
    margin-right: 0.75ch;
    background-color: var(--background);
    top: -2px;
  
}

#index button [data-icon="thesis"]{
    top: -2px;
    width: 22px;
    height: 22px;
}





#button-exposition::after{
    cursor: not-allowed;

}

#button-exposition{
    background-color: #cfcfcf!important;
}


#button-exposition::after{
    content: "à venir bientôt / soon";
    color:red;
    weight: 400;
    position: absolute;
    top: -40px;
    right: 0px;
    border: 1px solid red;
    padding: 0.75ch 1ch 0.5ch 1ch;
    border-radius: 5px;
    display: none;
    background-color: var(--background);
    font-size: 14px;
    text-transform: capitalize;
}

/* #list-download-PDF::after{
    top: 0px;
    left: var(--padding);
    padding-top: 2px;
    padding-bottom: 0px;
    line-height: calc(var(--baseline)*0.75);
} */

#button-exposition:hover::after{
    display: block;
}

/* #list-download-PDF{
    color: #cfcfcf!important;
} */

#button-download-PDF .size{
    font-size: 0.7em;
}

#index #header-home p{
    margin: 0;
}

#index #header-home {
    display: grid;
    grid-template-columns: repeat(11, calc(var(--nav-w)/2)) 1fr;
    grid-template-rows: calc(var(--baseline)*1.5) 1fr auto 0px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    
    background: var(--cover-background);
    background-size: var(--cover-background-size);
    background-position: var(--cover-background-position);
}
    
    #index #author { grid-area: 1 / 1 / 2 / 3; }
    #index #affiliation { grid-area: 1 / 3 / 2 / 13; }
    #index #header-home h1 { grid-area: 2 / 2 / 3 / 13; }
    #index .details { 
        grid-area: 3 / 2 / 4 / 6; 
    }
    #index .group-button { 
        grid-area: 3 / 7 / 4 / 12; 
     }



#index #author, 
#index #affiliation{
    font-family: var(--font-sans);
    font-size: var(--font-size-upp);
    line-height: calc(var(--baseline)*0.75);
    font-weight: 500;
    padding-top: calc(var(--baseline)*0.4);
    padding-left: var(--padding);
    border-bottom: var(--border-layout);

}

#index #author{
    text-transform: uppercase;
    display: block;
    letter-spacing: 0.5px;
    border-right: var(--border-layout);
    width: var(--nav-w);
}




#index #header-home h1{

    border-left: var(--border-layout);
    border-bottom: var(--border-layout);

    padding-top: calc(var(--baseline)*1.5);
    padding-bottom: calc(var(--baseline)*2);
    font-style: italic;
    font-size: 48px;
    line-height: calc(var(--baseline)*1.75);
    font-weight: 800;
    padding-left: calc(var(--padding)*3);

    border-bottom: var(--border-layout);
}

#index #header-home small{
    display: block;
    font-size: 48px;
    line-height: calc(var(--baseline)*1.75);
    font-weight: 600;
    max-width: 36ch;
}


#index #header-home .group-button{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: end;
    padding-bottom: calc(var(--baseline)*1)
}

#index #header-home .group-button button{
    /* border-left: var(--border-layout); */
    margin-top: calc(var(--baseline)*0.25);
    margin-right: var(--padding);
}



#index .details{
    border-left: var(--border-layout);
    padding-top: calc(var(--baseline)*0.75);
    padding-left: var(--padding);
    padding-bottom: calc(var(--baseline)*1);
    line-height: 20px;
}

#index .details p{
    max-width: 63ch;
}

#index #type {
    font-family: var(--font-sans);
    font-size: var(--font-size-upp);
    line-height: calc(var(--baseline)*0.75);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    margin-bottom: calc(var(--baseline)*-0.5);
}

#index .p-details {
    font-family: var(--font-sans);
    font-size: calc(var(--font-size-upp)*1.1);
    padding-top: calc(var(--baseline)*0.25);
}

#index #container-body{
    overflow-x: visible;
 }

#index nav{
    position: sticky;
    top: 0px;
    width: var(--nav-w);
    border-right: var(--border-layout);
    height: 100vh;
    margin-bottom: -100vh;
    z-index: 10;

    /* padding: calc(var(--baseline)*1.5) calc(var(--padding)*1.5); */
   
}

#index nav ul{
    position: absolute;
    bottom: calc(var(--baseline)*1.25);
    width: 100%;
    border-top: var(--border-layout);
    /* border-width: 1px; */
}


#index nav li{
    font-family: var(--font-sans);
    font-size: var(--font-size-upp);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--header-color); 


    height: calc(var(--baseline)*1);
    border-bottom: var(--border-layout);
    /* border-width: 1px; */
    padding-left: calc(var(--padding)*1);
    
}

#index nav li:hover{
    color: var(--color);
}

#index nav li a{
    white-space: nowrap;
}

#index #content {
    margin-left: calc(var(--nav-w) + var(--padding)*2);
    margin-right: calc(var(--padding)*1.5);
    padding-bottom: 20vh;
    max-width: var(--width-content);
    
}


#index #content a{
    border-bottom: 1px dotted var(--color-text-light);
    cursor: pointer;
}

#index #content a:hover {
    border-bottom:  1px solid var(--color-text-light);
}




#index h3{
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 1.5em;
    line-height: calc(var(--baseline)*1.2);
    padding-top: calc(var(--baseline)*1.5);
    margin-bottom: calc(var(--baseline)*1);
    text-wrap: balance; 
    border-bottom: 2px solid currentColor;

}

#index h4{
    display: inline-block;
    font-weight: normal;
    margin-top: calc(var(--baseline)*0.75);
    border-bottom: 1px solid currentColor;
    padding-right: 0ch;
}

#index summary{
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-top: calc(var(--baseline)*1.25);
    margin-bottom: calc(var(--baseline)*0.75);
}

#index h4 + p{
    margin-top: calc(var(--baseline)*0.5);
}
#index #content p{
    hyphens: none;
    margin: calc(var(--baseline)*0.5) 0px;
}

#index #content  ul {
    margin-bottom: calc(var(--baseline)*1)
}

#index #content  ul li {
    padding-left: 3ch;
    margin-bottom: calc(var(--baseline)*0.25)
}


#index #content ul li::before {
    content: "\002014";
    display: inline-block;
    position: absolute; 
    left: 0ch; 
}



#index #content strong{
    font-weight: 600;
}


#index video, #index img{
    max-width: 100%;

}


#content figure + button {
    margin-bottom: calc(var(--baseline)*2);

}



#index .slider{
    /* padding-left: calc(var(--padding)*2); */
    margin-top: 0px;
} 

#index .slider-container{
    width: calc(var(--img-h)*var(--img-ratio)*var(--nbr-img));
}


#index .slider figure{
    margin: 0!important;
    background-color: #cfcfcf;
}


#go-to-content{
    position: absolute;
    padding-top: calc(var(--padding)*0.75);
    
}

#go-to-content a{
    padding: var(--padding);
   
    font-family: var(--font-sans);
    cursor: pointer;
    z-index: 1000;
}


@media screen and (max-width: 1330px){

    #index  #header-home .group-button {
        justify-content: start;
    }

    #index{
        --col: 120px;
    }
}

@media screen and (max-width: 1250px){

    #index{
        --img-h: 400px;
    }

    #index #header-home h1, #index #header-home small{
        font-size: 40px;
        line-height: calc(var(--baseline)*1.5);
    }

    #index  #header-home .group-button {
        grid-area: 3 / 6 / 4 / 10;
        flex-direction: column;
        justify-content: end;
    }

    
}


@media screen and (max-width: 1080px){
    #index{
        --img-h: 380px;
    }

    #index #header-home {
        display: flex;
        flex-wrap: wrap;
    }

    #index #author, #index #affiliation{
        border-bottom: 0px;
        display: inline-block;
        height: calc(var(--baseline)*1.5);
    

    }

    #index #header-home h1, #index #header-home small{
        width: 100%;
        border-left: 0px;
    }

    #index #header-home h1{
        border-top: var(--border-layout);
    }

    #index .details{
        border-left: 0px;
        padding-left: calc(var(--padding)*2);
    }

 

    #index #header-home .group-button{
        margin-left: calc(var(--padding)*3);

    }

  
}

/* PHONE ------------------------------------------------------------- */

@media screen and (max-width: 940px){

    #index{

        --nav-w: 300px;

    }

    #index #header-home {
        display: block;
    }

    #index #header-home h1,
    #index #header-home small{
        font-size: 36px;
        line-height: calc(var(--baseline)*1.25);
        padding-left: var(--padding);
        padding-right: var(--padding);
    }

    #index #header-home small{
        padding: 0px;
    }

    #index #author, #index #affiliation{
        border: 0px;
        display: block;
        height: auto;
        padding-top: calc(var(--baseline)*0.25);
    }

    #index #affiliation{
        padding-top: 0px;
        padding-bottom: calc(var(--baseline)*0.25);
    }
    
    #index .details{
        padding-left: var(--padding);
    }


    #go-to-content{
        display: none;
    }

    #index nav{
        display: block;
        background-color: var(--background);
        position: fixed;
        top: -100vh;
        /* top: var(--h-case); */
        right: 0px;
        z-index: 9000;
        border: none;
        border-left: var(--border-layout);
        border-bottom: var(--border-layout);
        /* height: calc(var(--baseline)*10); */
        height: 100vh;
        margin-bottom: 0px;
        transition: top .6s;
        
    }

    #index nav ul{
        position: relative;
        border: none;
        top: 0px;
        left: 0px;
        padding: var(--padding);
    }

    #index nav ul li{
        text-transform: capitalize;
        padding-left: 0px;
        border-bottom-width: 1px;
    }

    #index #content{
        margin-left: calc(var(--padding)*3);
        margin-right: calc(var(--padding)*3);

    }



    #index .slider{
        width: 100vw;
        height: var(--img-h);
        border-bottom: var(--border-layout);
        left: calc(var(--padding)*-3);
        overflow-y: scroll;
    }


}


@media screen and (max-width: 780px){

    #index .slider:not(#images-intro){
        padding-left: 0px!important;
        left: calc(var(--padding)*-3);
    }
}

@media screen and (max-width: 640px){
    
    #index #content{
        margin-left: calc(var(--padding)*1);
        margin-right: calc(var(--padding)*1);

    }

    #index .slider:not(#images-intro){
        left: calc(var(--padding)*-1);
    }

    #index nav{
        width: 100vw;
        

    }
    
    #index #header-home h1,
    #index #header-home small{
        font-size: 30px;
        line-height: calc(var(--baseline)*1.2);
    }

    #index #header-home small{
        font-size: 24px;
        line-height: calc(var(--baseline)*1);
        padding-top: calc(var(--baseline)*0.5);
    }

    #index #header-home h1{ display: none; }
    #index #header-home h1.phone{ display: block; }

    #index #header-home .group-button{
        margin: 0px;
       padding-left: calc(var(--padding)*1);
        padding-right: calc(var(--padding)*1);
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}



/* HEADER MENU ----------------------------------------------------- */

#header-menu{
    position: absolute;
    z-index: 10000;
    right: var(--padding);
    top: calc(var(--padding)*0.75);
}


#index .container-label label:hover{
    cursor: pointer;
    
}

label[for="toggle-menu-home"]{
    display: none;
}

label[for="night-mode"] .icon{
   width: 24px;
    height: 24px;
}

label[for="toggle-menu-home"] .icon{
    width: 30px;
     height: 30px;
 }


 

 

label[for="toggle-menu-home"] [data-icon="menu-close"]{ display: block; }
label[for="toggle-menu-home"] [data-icon="menu-close"]{ display: none; }

#toggle-menu-home:checked ~ #container-body label[for="toggle-menu-home"] [data-icon="menu-open"]{
    display: none;
}
#toggle-menu-home:checked ~ #container-body label[for="toggle-menu-home"] [data-icon="menu-close"]{
    display: block;
}

#toggle-menu-home:checked ~ #container-body > nav{
    top: var(--h-case);
}


#index #projet-avenir{ 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: calc(var(--baseline)*2);  
}

#index #projet-avenir img{
    width: 60px;
    margin-right: 30px;

}

#index #projet-avenir p{
    font-size: var(--font-small);
    line-height: var(--font-size-caption);
    margin: 0px; 
    max-width: 56ch; 
}


@media screen and (max-width: 940px){

    #header-menu{
        position:  fixed;
        z-index: 10000;
        right: 0px;
        top: 0px;
        height: calc(var(--h-case)*1);
        width: 100%;
        background: var(--cover-background);
        background-size: var(--cover-background-size);
        background-position: var(--cover-background-position);
        border-bottom: var(--border-layout);
        display: flex;
        justify-content: flex-end;
        
    }

    #header-menu label{
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: var(--border-layout);
        width: calc(var(--h-case)*1.25);
        height: var(--h-case);
    
    }

    #header-menu label[for="toggle-menu-home"] .icon{
        position: relative;
        top: 8px;
        left: 15px;
    }

    #index #header-home{
        margin-top: var(--h-case);
    }

    #header-menu label[for="toggle-menu-home"]{ display: block;}
}

@media screen and (max-width: 780px){
    #header-menu label[for="toggle-menu-home"] .icon{
        position: relative;
        top: 4px;
        left: 11px;
    }
}


@media screen and (max-width: 580px){
    #index nav{
        width: 100vw;
        border-left: none;
    }

    #index nav ul{
        padding: calc(var(--padding)*2);
        height: 80vh;

    }
    #index nav ul li{
        font-size: calc(var(--font-size)*1.2);
        height: calc(var(--baseline)*1.5);
        padding-top: calc(var(--baseline)*0.25);

    }

    #index #button-exposition{
        margin-bottom: calc(var(--baseline)*0.5)!important;
    }

    #index #link-video-pagedjs{
        margin-left: 0px;
    }


    #index #projet-avenir img{
        width: 80px;
        margin-bottom: calc(var(--baseline)*0.5);
    }
    #index #projet-avenir{
        display: block;
    }
    #index #projet-avenir p {
        font-size: var(--font-small);
        line-height: 1.2em;
    }


   
}





#donnees-video .calendrier-video{
    width: 100%;
    --color-calendrier: black;
    --calendrier-day: 10px;
}

input#night-mode:checked ~ #container-body #donnees-video .calendrier-video{

    --color-calendrier: var(--color-text);

}

.calendrier-video th, .calendrier-video td{
    padding: 1em 0px;
}



.calendrier-video .h1{
    all: inherit;
    text-transform: uppercase;
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 1px;
    font-family: var(--font-sans);
}

.calendrier-video p.h2{
    all: inherit;
    font-size: 10px;
    margin-bottom: calc(var(--calendrier-day)/4);
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--font-size-caption); 

}


.calendrier-video .container-calendrier,
.calendrier-video .week{
    display: flex;
    justify-content: space-between;

}

.container-calendrier{
    border-bottom: var(--table-border);
    padding-bottom: 8px; 
}

#calendrier-benjamin .container-calendrier{
    padding-bottom: 20px; 
} 

.calendrier-video .month{
    width: calc(100%/3 - 100%/40);
}

.calendrier-video .day{
    border: 1px solid var(--color-calendrier);
    width: var(--calendrier-day);
    height: var(--calendrier-day);
    color: transparent;
    margin-bottom: calc(var(--calendrier-day)/4)
}

.calendrier-video .day-video{
    background-color: var(--color-calendrier);
    /* color: white;
    font-size: 10px; */
}

.calendrier-video .day-empty{
    opacity: 0.3;
}

.calendrier-video table{
    width: 100%;
    table-layout: fixed;
}


.calendrier-video td span{
    font-size: 0.8em;
    opacity: 0.6;
    display: inline-block;
    width: 40%;
    position: absolute;
    right: 0;
}
.calendrier-video table th{
    width: 69%;

}









:root{
    --header: 36px;
    --color-text: rgb(51, 51, 51);
    --color-text-light: rgb(115, 110, 101);
    --color: #4B2DC4;

    --background: rgb(254, 254, 254);
    --bakground-light: #e7e6e6;
    --color-cover: #c9c7c7;
    --color-people: #222;
    
    --border-code: 1.6px dotted #444;

    --header-bg: #f3f0eb;
    --header-color: rgb(115, 110, 101);

    --bg-table: #f0f0f0;
   
    

    --padding: 20px;




    --border-layout: 1.5px solid #bbb;
    --border-layout-light: 1px solid rgb(222, 219, 219);
    --header-border: var(--border-layout);
    --img-border: 1px solid #888;
    
    --img-ratio: 16/10;
    --img-ratio-revert: 10/16;


    --button-border: 1px solid currentColor;
    --button-radius: 4px;


    

}

body{
    

}

#header-home,
#container-body{
    color: var(--color-text);
    background-color: var(--background);

    --cover-background: radial-gradient(var(--color-cover) 1px, var(--background) 1px);
    --cover-background-size: calc(var(--baseline)/4) calc(var(--baseline)/4);
    --cover-background-position: calc(var(--baseline)/8) calc(var(--baseline)/8);

    --dark-mode: "Mode sombre";
}

input#night-mode:checked ~ #container-body{


    --color-text: rgb(221, 226, 229);
    --color-text-light: rgb(205, 203, 200);
    /* --background:rgb(40, 54, 68); */
    --background: #161925;
    --color-cover: rgb(50, 48, 71);


    --color: #9783e6;
    
    --header-bg: #161925;
    --header-color: rgb(213, 207, 198);

    --border-layout: 1.5px solid rgb(66, 72, 92);
    --border-layout-light: 1px solid rgb(52, 57, 74);
    --img-border: 1px solid rgb(205, 203, 200);

    --header-border: var(--border-layout);
    --dark-mode: "Mode clair";

    --bg-table: rgb(50, 48, 71);
    --color-people: var(--color-text-light);

    --table-border: solid 1px rgb(111, 117, 135);
    --border-code: 1.6px dotted rgb(205, 203, 200);

}



/* .replace{
    background-color: orange;
} */


/* Delete references added by pandoc */
#thesis-screen #refs{
    display: none; 
}

:root{
    --font-size: 19px;
    --baseline: 32px;
    --indent: 6ch;
    --font-small: 13px; 
    --font-size-caption: 16px;
    --caption-line-height: calc(var(--baseline)*0.75);
    --font-size-upp: 14px;
}

@media screen and (max-width: 780px){
    :root{
        --font-size: 16px;
        --baseline: 28px;
        --font-size-caption: 12px;
        --caption-line-height: calc(var(--baseline)*0.5);
    }
    
}

.print, .br-print, .h2-repeat{
    display: none;
}



p {
    margin-top: var(--baseline);
    margin-bottom: var(--baseline);
    /* hyphens: auto;
    hyphenate-limit-chars: 14 4 4; */
}

.link-in-text, 
.link-page, 
.call-fig, 
.link-chapitre, 
.link-chapter,
#bibliographie .csl-entry a{
    border-bottom: 1px dotted var(--color-text-light);
    cursor: pointer;
}

.link-in-text:hover, 
.link-page:hover, 
.call-fig:hover, 
.link-chapitre:hover, 
.link-chapter:hover,
#bibliographie .csl-entry a:hover {
    border-bottom:  1px solid var(--color-text-light);
}

.h2-repeat {
    display: none;
}

/* TITLES */

.h2-little{
    display: none;
}


#title-thesis{
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--font-size-caption);
    letter-spacing: 0.5px;
}



section > h2{
    font-size: 2.5em;
    line-height: calc(var(--baseline)*2);
    font-style: italic;
    font-weight: 600;
    font-size: 42px;
    line-height: calc(var(--baseline)*1.5);
}


.num-annexe,
.chapter h2::before{
    font-weight: 600;
    font-size: var(--font-small);
}

.chapter .title-style-h4{
    padding-left: 4ch;
}




footer p{
    margin: 0;
    font-size: var(--font-small);
    line-height: calc(var(--baseline)*0.6);
}

footer ul li{
    font-family: var(--font-sans);
    font-size: var(--font-small);
    line-height: calc(var(--baseline)*0.75);
    /* padding-bottom: calc(var(--baseline)*0.25); */
}

footer ul li a:hover{
    color: var(--color);
}


#bibliographie .csl-entry{
    margin-bottom: calc(var(--baseline)*0.75);
    padding-left: 4ch;
    text-indent: -4ch;
}

/* PEOPLE ---------  */

.people{
    /* cursor: pointer; */
    cursor: default;
    --w-people: 13ch;
}

.people[data-people="Marie-Astrid Bailly Maître"]{ --w-people: 22ch; }
.people[data-people="Stéphanie Vilayphiou"]{ --w-people: 19ch; }
.people[data-people="Manu Vazquez"]{ --w-people: 14ch; }
.people[data-people="Louis Eveillard"]{ --w-people: 14ch; }
.people[data-people="Robin de Mourat"]{ --w-people: 15ch; }
.people[data-people="Julie Blanc"]{ --w-people: 11ch; }
.people[data-people="Éloïsa Perez"]{ --w-people: 12ch; }
.people[data-people="Alexandre Laumonier"]{ --w-people: 19ch; }
.people[data-people="Amélie Dumont"]{ --w-people: 15ch; }
.people[data-people="Benjamin G."]{ --w-people: 12ch; }



.people:hover::after{
    content: attr(data-people);
    
    
    position: absolute;
    top: calc(var(--baseline)*-1);
    left: -2px;
    /* z-index: 100; */

    display: inline-block;
    background-color: var(--background);
    color: var(--color-text-light);
    border: 1px solid var(--color-text-light);
    min-width: var(--w-people);
    padding: 0ch 1ch;
    border-radius: 4px;


    font-family: var(--font-sans);
    font-size: var(--font-small);
    line-height: calc(var(--baseline)*0.75);
    font-weight: 500;
    font-style: normal;
}


@media screen and (max-width: 640px){ 

    .chapter{
        --indent: 2ch;
    }
    .chapter h3, 
    .chapter h4,
    .chapter .title-style-h4,
    .chapter h5{ 
        padding-left: 0px;
     }
    .chapter h3::before,
    .chapter h4::before,
    .chapter h5::before{ 
        position: relative;
        margin-bottom: calc(var(--baseline)*0.5);
     }
     .chapter h3{
        padding-bottom: calc(var(--baseline)*0.5);
     }
     /* h6{
        display: block;
     } */

    
     blockquote{
        margin-left: 0;
    }

    

}

/* .chapter h2, h3, h4, h5, h6{
    color: var(--color-text-light);
} */


h3:target, h4:target, h5:target, h6:target {
    padding-top: calc(var(--baseline)*1);
}


@media screen and (max-width: 780px){

    h3:target, h4:target, h5:target, h6:target {
        padding-top: calc(var(--baseline)*2);
    }
}
body { 
    --col: 120px;
    --width-content: calc(var(--col)*6);
    --notes-w: calc(var(--col)*2);
    --gap: calc(var(--padding)*3);
    --padding-main: calc(var(--padding)*2);

    --h-case: calc(var(--baseline)*1.5);
    --nav-w: var(--h-case);
    --margin-left: 0px;
    

    --title-height: calc(var(--baseline)*9);
}
#container-body{
        width: 100vw;
        overflow-x: hidden;
}



#introduction, #conclusion, #chapitre-01, #chapitre-02, #bibliographie, #remerciements, #table-des-matieres{
    --title-height: calc(var(--baseline)*6);
}

#chapitre-07{
    --title-height: calc(var(--baseline)*7.5);
}


@media screen and (min-width: 1000px){
    #chapitre-06 h2{
        width: 30ch;  
    }
}

@media screen and (max-width: 1000px){
    #chapitre-06{
        --title-height: calc(var(--baseline)*11.5);
    }
}


@media screen and (max-width: 780px){
    body{
        --h-case: calc(var(--baseline)*1.5);
    }
 
}

header {
    width: var(--nav-w);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--background);
    border-right: var(--border-layout);
    z-index: 1000;
}


main{
    width: calc(100vw - var(--nav-w));
    min-height: 100vh;
    margin-left: calc(var(--nav-w) + var(--margin-left) + var(--padding)*2);
    margin-right: calc(var(--padding)*1.5);
    margin-bottom: calc(var(--baseline)*3);
    max-width: var(--width-content);
}


#title-thesis{
    height: var(--h-case);
    padding-top: 7px;
    line-height: var(--baseline);
}


.annexe h3{
    font-size: 2.5em;
    line-height: calc(var(--baseline)*2);
    font-style: italic;
    font-weight: 600;
}


.annexe h3::after,
#title-thesis::after,
section > h2::after{
    content: '';
    display: block;
    width: calc(100vw - var(--nav-w));
    position: absolute;
    left: calc(var(--padding)*-2 - var(--margin-left));
  
    border-bottom: var(--border-layout);  

    background: var(--cover-background);
    background-size: var(--cover-background-size);
    background-position: var(--cover-background-position);

     
} 

/* #title-thesis span{
    position: relative;
    left: calc(var(--margin-left)*-1);
} */


#title-thesis::after{
    height: var(--h-case);
    top: 0px;
}

#title-thesis span{
    z-index: 10;
}

.annexe h3::after,
section > h2::after{
    height: var(--title-height);
    top: 0px;
    z-index: -1;
 
}

section > h2{
    z-index: 10;
    position: relative;
    height: var(--title-height);
    padding-top: calc(var(--baseline)*2);
    margin-bottom: calc(var(--baseline)*2);
}


.annexe h3 {
    z-index: 10;
    position: relative;
    height: var(--title-height);
    margin-bottom: calc(var(--baseline)*2);
    padding-top: calc(var(--baseline)*2);
}

#introduction h2{
    margin-bottom: 0px;
}

#exposition-home .type-expo,
.num-annexe,
.chapter h2::before{
    line-height: var(--baseline);
    margin-top: calc(var(--baseline)*-1);
    margin-bottom: calc(var(--baseline)*0.25);
    margin-bottom: 0px;
}

#exposition-home .type-expo,
.num-annexe{
    top: calc(var(--baseline)*2);
    z-index: 11;

}

footer{
    width: calc(100vw - var(--nav-w));
    margin-left: calc(var(--nav-w)*1);
    padding-bottom: 10vh;
    /* margin-left: calc(var(--nav-w) + var(--margin-left) + var(--padding)*2);
    margin-right: calc(var(--padding)*1.5);
    margin-bottom: 10vh;
    max-width: var(--width-content); */
   
   
    border-top: var(--border-layout);
    padding-top: var(--padding);
    /* color: var(--color-text-light); */

}

footer p{
    max-width: 68ch;
    margin-left: calc(var(--padding)*2 + var(--margin-left));
    
}

footer {
    display: flex;
    justify-content: flex-start;
}


footer ul{
    margin-left: var(--padding);
}




@media screen and (max-width: 860px){

    main{
        max-width: calc(100vw - var(--padding)*4 - var(--nav-w));
        margin-bottom: 40vh;
    }

} 


/* Laptop full screen */


@media screen and (min-width: 1320px){
    body{
        --margin-left: calc(var(--padding)*6);
    }


}

/* PHONE */

@media screen and (max-width: 780px){

    main{
        max-width: 100vw;
        width: 100vw;
        left: 0;
        margin: 0;
        padding: calc(var(--padding)*2);
        padding-top: var(--h-case);
        margin-bottom: calc(var(--baseline)*3);

    }
    #title-thesis{
        display: none;
    }

    .annexe h3,
    .chapter h2{
        height: auto;
        margin-bottom: calc(var(--baseline)*2);
        padding-top: calc(var(--baseline)*2);
    }

    .chapter h2::before{
        /* padding-top: calc(var(--baseline)*2); */
        border-bottom: none;
    }

    .annexe h3::after,
    section > h2::after{
        display: none;
    }

    footer{
        margin-left: 0px;
        width: 100vw;
        display: block;
        padding: var(--padding) calc(var(--padding)*2);
        padding-bottom: 10vh;
    }

    footer p{
        margin-left: 0;
    }

    footer ul{
        margin: 0;
        padding-top: calc(var(--baseline)*0.5);
    }

    footer li{
        padding-bottom: calc(var(--baseline)*0.25);
    }

} 

@media screen and (max-width: 480px){
    main{
        padding: calc(var(--padding)*1);
        padding-top: var(--h-case);
    }
    footer{
        padding-left: var(--padding);
        padding-right: var(--padding);
    }
} 

#header{
     background-color: var(--background);
     background: radial-gradient(#999 0.5px, var(--background) 0.5px);
     background: var(--cover-background);
     background-size: var(--cover-background-size);
     background-position: var(--cover-background-position);
     z-index: 100;

}


#header #go-to-home,
#header #dark-mode,
#header nav button {
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
}

#header #go-to-home,
#header #dark-mode {
    display: flex;
    align-items: center;
    justify-content: center;
}

#header #go-to-home,
#header button {
    background: none;
  
}

#header label {
    cursor: pointer;
}

#header nav button,
#header nav a {
    display: flex;
    align-items: center;
}

#header nav button {
    display: flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--font-size-upp);
    font-weight: 500;
    color: var(--header-color);
}

#header #chap-button a {
    font-size: var(--font-size);
    font-weight: 300;
    width: 100%;
    display: block;
    text-align: center;
    font-weight: 500;
}

#header #dark-mode:hover .icon,
#header #go-to-home:hover .icon,
#header button:hover .icon {
        background-color: var(--color);
}

#header button:hover {
    color: var(--color);
}


/* HOVER  -------------------- */

#header #go-to-home::after,
#header button::after{
    content: "\00a0\00a0\00a0\00a0" attr(aria-label);
    position: absolute;
    left: calc(var(--nav-w) + var(--padding)/2);

    height: calc(var(--h-case)*0.75);
    width: 20ch;
    overflow: hidden;


    border: var(--border-layout);
    background: var(--background);
    color: var(--color);

    font-family: var(--font-sans);
    font-size: 16px;
    line-height: calc(var(--baseline)*0.5);
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    box-sizing: content-box;

    display: flex;
    align-items: center;

    max-width: 0px;
    transition: all .5s;

    z-index: -1;
    opacity: 0;
}


#dark-mode::after{
    content: "\00a0\00a0\00a0\00a0" var(--dark-mode)!important;
}



#header #go-to-home:hover::after,
#header button:hover::after{
    max-width: 20ch;
    opacity: 1;
   
}

/* DESKTOP version  -------------------- */

@media screen and (min-width: 780px) {

    #header .text {
        display: none;
    }

    #header #go-to-home,
    #header #dark-mode,
    #header nav button {
        border-top: var(--border-layout);
        width: var(--h-case);
        height: var(--h-case);
    }

    #header #go-to-home {
        margin-top: calc(var(--nav-w)/2);
    }

    #header #dark-mode {
        border-bottom: var(--border-layout);
    }

    #header nav {
        border-bottom: var(--border-layout);
        position: absolute;
        bottom: calc(var(--baseline)*1.25);
    }
}



/* PHONE */

@media screen and (max-width: 780px) {
    #header {
        width: 100vw;
        height: var(--h-case);
        background-color: var(--background);
        border-bottom: var(--border-layout);
        display: flex;
        border-right: none;
    }

    #header #go-to-home,
    #header #dark-mode {
        border-top: none;
        border-right: var(--border-layout);
        width: calc(var(--h-case)*1.5);
    }

    #header #go-to-home .icon {
        top: -3px;
    }

    #header #go-to-home {
        margin-top: 0px;
    }

    #header #dark-mode {
        border-bottom: none;
    }

    #header nav {
        display: flex;
        width: 100%;
        height: var(--h-case);
        align-items: center;
        justify-content: flex-end;
        border-bottom: none;
        bottom: 0;
        right: 0;
    }

    #header nav button {
        display: inline-block;
        border-top: none;
        border-left: var(--border-layout);
        height: var(--h-case);
        width: var(--h-case);
    }

 
    #header nav button[aria-label="Chapitre suivant"]{
        width: calc(var(--h-case) + 2px);
        padding-right: 2px;
    }
  

    #header .text {
        /* display: inline;
        padding-left: 1ch; */
        display: none;
        padding-left: 0px;
    }

    #header .icon {
        margin-bottom: -3px;
    }

    #header #button-toc {

        justify-content: flex-start;
        text-align: left;
      
        width: calc(var(--h-case)*1);
        padding-left: 0px;
    }


    #header #button-toc label {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        top: -3px;
    }

    #header #go-to-home::after,
    #header button::after{
        display: none;
        content: '';
    }
}


/* NOTES */



.footnote-ref,
.sidenote-ref{
    color: var(--color-text-light);
}




.note-container p{
    margin: 0px;
}


.note-container .note-marker{
    /* top: -3px; */
    color: var(--color-text-light);
    line-height: calc(var(--baseline)*0.75);
    top: 0px;
}


label[for="input-close-sn"]{
    cursor: pointer;
 
    position: absolute;
    right: calc(var(--padding)*0.75);
    top: calc(var(--padding)*0.25);
    z-index: 45;
    width: 40px;
    height: 40px;
    text-align: right;
    font-size: 15px;
    font-weight: 600;

    display: none;
}


@media screen and (min-width: 1130px){
    .note-container{
        display: block!important;
        width: var(--notes-w);
        float: right;
        clear: both;
        shape-outside: content-box;
        position: relative;
        right: calc(var(--notes-w)*-1 - var(--gap));
        margin-left: calc(var(--notes-w)*-1);
        margin-bottom: calc(var(--baseline)*0.5);
        top: -2px;
        margin-top: 0px;
    }
}


@media screen and (max-width: 1130px){

    label.sidenote-ref {
        cursor: pointer;
    }

    label[for="input-close-sn"]{
        cursor: pointer;
        display: block;
        margin-top: calc(var(--padding)*0.5);
        margin-right: calc(var(--padding)*0.5);
    }
    .note-container{

        /* display: none; */
        width: calc(100vw - var(--nav-w) - var(--padding)*2);
        position: fixed;
        left: calc(var(--nav-w) + var(--padding));
        bottom: -90vh;
        z-index: 40;

        border-top: var(--border-layout);
        background-color: var(--background);

        font-size: var(--font-size);
        padding: calc(var(--padding)*1.5);
        
       

        
       
      
    }

    .note-container p{
        max-width: 52ch;
    }


    .note-container .note-marker{
        top: calc(var(--padding)*1.5 - 3px);
        left: calc(var(--padding)*1.5);
    }

    input.sn-toggle:checked + .sidenote-ref + .note-container{
        bottom: 0px;
        transition: bottom 0.2s;
       
    }
}


@media screen and (max-width: 560px){

    .note-container{

        width: 100vw;
        border: none;
        border-top: var(--border-layout);
        /* bottom: 0; */
        left: 0;    
        padding-top: calc(var(--padding)*3);    
        padding-bottom: calc(var(--padding)*3);
        background-color: var(--background)
      
    }

    .note-container p, .note-container .note-marker{
        font-size: var(--font-size);
        line-height: var(--baseline);
    }

    .note-container .note-marker{
        top: calc(var(--padding)*3 - 2px);
    }
}
[data-icon="thesis"]{ --icon: url(/icons/thesis.svg) }
[data-icon="toc"]{ --icon: url(/icons/table-of-content.svg) }
[data-icon="dark-mode"]{ --icon: url(/icons/dark-mode.svg) }
[data-icon="download"]{ --icon: url(/icons/download.svg) }
[data-icon="close"]{ --icon: url(/icons/close.svg) }
[data-icon="menu-open"]{ --icon: url(/icons/menu-open.svg) }
[data-icon="menu-close"]{ --icon: url(/icons/menu-close.svg) }

.icon{
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--color-text);
    mask-repeat: no-repeat!important;
}

#header .icon{
    background-color: var(--header-color);
    width: 22px;
    height: 22px;
}
#header [data-icon="thesis"]{
    width: 24px;
    height: 24px;
}/* -- CONTAINER ALL TOC ---------------------------- */

body{ 
    --w-toc: 640px; 
}

#toc{

    --internal-link: '\002197';
    --w-short: 400px;
    
    background-color: var(--background);
    position: fixed;
    top: 0px;
    width: var(--w-toc);
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 90;
    padding: calc(var(--padding)*1.5) var(--padding-main);
  

}




@media screen and (min-width: 780px){

    #toc { 
         transition: left .5s;
         left: calc(var(--w-toc)*-1);
         border-right: var(--border-layout);

    }
    /* main { transition: transform .6s; } */

    #input-toc:checked ~ #container-body #toc{
        left: var(--nav-w); 
    }

    #input-toc:checked ~ #container-body main{
        /* transform: translate(600px); */
        /* margin-left: calc(var(--w-toc) + var(--nav-w) + var(--margin-left) + var(--padding)*2); */
        /* transform: translate(var(--w-toc)); */
    }

}




#toc label[for="input-toc"]{
    float: right;
    cursor: pointer!important;
    margin-right: 0px!important;
}

#toc label[for="input-toc"],
#toc .group-label{
    position: sticky;
    top: 0px;
    z-index: 1000;
}

#toc label[for="input-toc"]{
    float: right;
    z-index: 10000;
}



#toc .group-label{
    display: flex;
}

#toc label[for="input-toc"],
#toc .group-label label,
#toc .group-label a{
    border: var(--button-border);
    border-radius: var(--button-radius);
    background: none;
    font-family: var(--font-sans);
    font-size: var(--font-small);
    letter-spacing: 0.5px;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 1ch;
    cursor: pointer;

    display: block;
    height: var(--baseline);
    width: 13ch;
    text-align: center;

    background: var(--background);
}


#toc .group-label a{
    width: 24ch;
}

#toc label[for="input-toc"]{
    width: 2.5ch;
    font-size: 22px;
    padding-bottom: 3px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
}

#toc .group-label a::after{
    content: "\00a0" var(--internal-link);
}

#toc .group-label label:hover,
#toc .group-label a:hover,
#toc label[for="input-toc"]:hover{
    color: var(--color);
    font-weight: 600;
    box-shadow: 0px 0px 0px 1px var(--color);

}


#toc .group-label::after{
    content: '';
    display: block;
    background-color: var(--background);
    box-shadow: 1px 12px 29px 3px var(--background);
    width: var(--w-toc);
    height: calc(var(--baseline)*2.5);
    position: absolute; 
    left: calc(var(--padding-main)*-1);
    top: calc(var(--padding)*-1.5);
    z-index: -1;
    
} 


#input-toc-chapter:checked ~ .group-label label[for="input-toc-chapter"],
#input-toc-website:checked ~ .group-label label[for="input-toc-website"]{
    box-shadow: 0px 0px 0px 1px currentColor;
    font-weight: 600;
}

#input-toc-chapter:checked ~ #toc-chapter,
#input-toc-website:checked ~ #toc-website{
    display: block;
}

#input-toc-chapter:checked ~ #toc-website,
#input-toc-website:checked ~ #toc-chapter{
    display: none;
}




#toc-website,
#toc-chapter{
    width: 100%;
    height: 100%;
    padding-top: calc(var(--baseline)*1.5);
    padding-bottom: 20vh;
}




/* --- TOC WEBSITE  ---------------------------- */



#toc-website li{
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: var(--caption-line-height);
    margin-bottom: calc(var(--baseline)*0.25);
    border-bottom: var(--border-layout-light);
    padding-bottom: calc(var(--baseline)*0.25);

}

#toc-website li a{
    display: block;
    padding-left: 10ch;
}

#toc-website li a::before{
    content: "Chapitre " attr(data-chapter) " \002013 ";
    display: block;
    position: absolute;
    left: 0px;

}

#toc-website li a[data-chapter=""]::before,
#toc-website li a[data-chapter="introduction"]::before,
#toc-website li a[data-chapter="conclusion"]::before{
    content: '';
    display: none;
}


#toc-website li a[data-chapter=""],
#toc-website li a[data-chapter="introduction"],
#toc-website li a[data-chapter="conclusion"]{
    padding-left: 0;
}


#toc-website li a::after{
    content: var(--internal-link);
    float: right;
    color: transparent
}


#toc-website li a:hover::after{
    color: var(--color);
}




/* Style  of table of content (page) ------------------------------------- */

#toc-chapter .toc-element-level-2{
    font-weight: 600;
    font-size: var(--font-size);
    font-style: italic;
    line-height: calc(var(--baseline)*0.75);
    margin-bottom: calc(var(--baseline)*1);
   
}

#toc-chapter .toc-element-level-2::before{
    content: attr(data-chapter);
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--font-small);
    line-height: calc(var(--baseline)*0.75);

    display: block;
    text-transform: uppercase;
    /* border-bottom: 1px solid currentColor; */
    /* padding-bottom: calc(var(--baseline)*0.15); */
    margin-bottom: calc(var(--baseline)*0.15);
}




/* Style  of table of content (page) ------------------------------------- */


.group-toc{
    padding-bottom: calc(var(--baseline)*2);
}

#toc h1,
#list-toc-generated h1{
    font-size: var(--font-size);
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
  
}



#toc h2,
#list-toc-generated h2{
    font-weight: 600;
    font-style: italic;
    border-bottom: 2px solid currentColor;
    padding-bottom: calc(var(--baseline)*0.25);
    position: relative;
    
}

#toc h2::before,
#list-toc-generated h2::before{
    font-family: var(--font-sans);
    font-size: var(--font-small);
    line-height: calc(var(--baseline)*1);
    text-transform: uppercase;
    font-weight: 700; 
    font-style: normal; 
    display: block; 
    height: calc(var(--baseline)*1);
}

#toc h2::after,
#list-toc-generated::after{
    content: var(--internal-link);
    font-size: var(--font-size);
    float: right;

}

.toc-element-level-3{
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: calc(var(--baseline)*0.75);
    font-weight: 700;
    margin-top: calc(var(--baseline)*0.5);
    padding-top: calc(var(--baseline)*0.5);
    border-bottom: var(--border-layout-light);
}

#group-toc-conclusion .toc-element-level-3,
#group-toc-introduction .toc-element-level-3,
.toc-element-level-4{
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: calc(var(--baseline)*0.75);
    font-weight: normal;
    margin-top: calc(var(--baseline)*0.5);
    margin-left: 4ch;
    padding: 0; 
    padding-left: 5.5ch;
    letter-spacing: 0; 
    border-bottom: none;
    text-decoration: none;
}

#group-toc-conclusion .toc-element-level-3,
#group-toc-introduction .toc-element-level-3{
    margin-left: 0px;
    padding-left: 0px;
}

.toc-element-level-5{
    /* font-family: var(--font-sans);
    font-size: var(--font-small);
    line-height: calc(var(--baseline)*0.5); */
    font-style: italic;
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: calc(var(--baseline)*0.75);
    font-weight: normal;
    margin-top: calc(var(--baseline)*0.5);
    margin-left: 8.2ch;
    padding: 0; 
    letter-spacing: 0; 
    border-bottom: none;
    padding-left: 7ch;
}

.toc-element-level-4::before,
.toc-element-level-5::before{
    position: absolute;
    left: 0px;
    font-style: normal;
}


#toc h2:hover,
#toc li:hover{
    color: var(--color)!important;
    cursor: pointer;
}


#list-toc-generated a:hover{
    color: var(--color)!important;
}



/* COUNTER ------------------------------------- */



#group-toc-chapitre-01{
    counter-reset: h2;
}


.group-toc h2::before{
    content: "Chapitre " counter(h2);
}


.group-toc{
    counter-reset: h3;
    counter-increment: h2;
}

.group-toc > ul{
    counter-reset: h3;
}


.toc-element-level-3{
    counter-increment: h3;
    counter-reset: h4;
}

.toc-element-level-4{
    counter-increment: h4;
    counter-reset: h5;
}

.toc-element-level-5{
    counter-increment: h5;
}

.toc-element-level-3::before{
    content: "| "  counter(h3) " | " ;
}

.toc-element-level-4::before{
    content: "| "  counter(h3) '.' counter(h4) " | " ;
}

.toc-element-level-5::before{
    content: "| "  counter(h3) '.' counter(h4) '.' counter(h5) " | " ;
}

#group-toc-conclusion h2::before,
#group-toc-introduction h2::before,
#group-toc-introduction .toc-element-level-3::before,
#group-toc-conclusion .toc-element-level-3::before{
    content: '';
}








/* --- REPONSIVE PHONE --------------------------- */

@media screen and (max-width: 780px){
    #toc { 
        top: -100vh;
        transition: top .5s;
        width: 100vw;
        padding-left: var(--padding);
        padding-right: var(--padding);
   }

   #input-toc:checked ~ #container-body #toc{
       top: var(--nav-w); 
   }

    #toc-website li,
    #toc-chapter li{
        font-size: var(--font-size);
        line-height: var(--baseline);
    }

    #toc-chapter .toc-element-level-4,
    #toc-chapter .toc-element-level-5{
        margin-left: 0px;
    }

    #toc-chapter .toc-element-level-5::before{
        font-size: var(--font-size-caption);
        margin-left: 2ch;
    }

    #toc .group-label{
        /* display: block; */
        flex-wrap: wrap;
        /* background-color: red; */
        margin-right: 60px;
    }

    #toc .group-label label{
        display: block;
        margin-bottom: 1ch;
    }

    #toc .group-label::after{
        height: calc(var(--baseline)*4);
    }
}



#list-toc-generated .list-aside li{

    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: calc(var(--baseline)*0.75);
    margin-bottom: calc(var(--baseline)*0.5);
    font-weight: 700;
    
}



/* @media screen and (max-width: 1130px) {

    #toc{
        padding-right: calc(var(--padding-main)/2);
    }

    #container-toc, #toc-website{
       padding-right: calc(var(--padding-main)*1.5);
    }

    #toc-website{
        position: relative;
        width: 100%;
        height: auto;
        
        margin-bottom: 40vh;
    }

    #toc-website li:first-of-type{
        padding-top: calc(var(--baseline)*0.25);
        border-top: 2px solid currentColor;
    }

    #toc-website li:last-of-type{
        padding-bottom: calc(var(--baseline)*0.25);
        border-bottom: 2px solid currentColor;
    }

    #container-toc{
        padding-bottom: 0px;
    }

    #toc h1, 
    #container-toc{
        margin-left: 0px;
        border-left: none;
        padding-left: 0px;
        position: relative;
        top: 0px;
        width: 100%;
    }

    #toc-website li{
        display: none;
        font-size: var(--font-size-caption);
        line-height: calc(var(--baseline)*0.75);
    }


    #toc-website li a::after{
        position: absolute;
        right: 0;
        content: var(--internal-link);
    }  

    #toc-website li[data-chapter=""]{
        display: block;
    }


} */

/* 
@media screen and (max-width: 780px) {

   
    #container-toc, #toc-website{
       padding-right: 0px;
    }
    #container-body #toc{
        width: 100%;
        left: 0px;
        top: -100vh;
        padding-right: var(--padding-main);
    }

   #toc label[for="input-toc"]{
    display: none;
   }

    #input-toc:checked ~ #container-body #toc {
        left: 0px;
        top: 0px;
        transition: top .5s;
    }
}
 */


/* Next & Previous chapter buttons --------------------------- */

#chap-button-content{
    margin-top: calc(var(--baseline)*3);
}

#chap-button-content button{
    display: block;
    font-weight: 500;
    color: currentColor;

    font-family: var(--font-sans);
    font-size: var(--font-size-caption);

    width: calc(var(--h-case)*5.5);
    
    border: var(--border-layout);
    background: none;
   
    cursor: pointer;
    border-radius: 5px;
  
}

#chap-button-content button a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 1ch 2ch;
}

#chap-button-content button:hover{
    color: var(--color);
    border-color: var(--color);
   
}

#chap-button-content button:first-of-type{
    text-align: left;
}

#chap-button-content button:last-of-type{
    text-align: right;
    position: absolute;
    right: 0px;
    top: 0px;
}

#prev-chap-content::after{
    content: "\00a0\00a0\00a0\00a0" attr(aria-label);
}

#next-chap-content::before{
    content: attr(aria-label) "\00a0\00a0\00a0\00a0";
}

@media screen and (max-width: 560px) {
    #chap-button-content button:last-of-type{
        position: relative
    }

    #chap-button-content button{
        width: 100%;
        margin-top: calc(var(--baseline)*0.5);
    }
}
figure, img{
    width: 100%;
    max-width: 1360px;
}



figcaption[data-num-fig]{
    padding-right: 5ch;
}

figure{
    margin-top: calc(var(--baseline)*1.5);
    margin-bottom: calc(var(--baseline)*1.5);
}


figcaption {
    margin-top: calc(var(--baseline)*0.5);
    margin-bottom: calc(var(--baseline)*1);
    padding-right: 4ch;
    hyphens: none;
}

figcaption, .explication, .figcaption {
    font-weight: 500;
}

figcaption em, .figcaption em{
    font-weight: 500;
}


figcaption, .figcaption{
    max-width: var(--width-content);
    grid-column: span 2;
}

/* img + img{
    margin-top: calc(var(--baseline)*0.5);
} */


figure.full-screen{
    cursor: zoom-out!important;
}
@media screen and (max-width: 480px){

    figure{
        max-width: 100vw!important;
        width: 100vw;
        left: calc(var(--padding)*-1);
    }

    figure figcaption{
        left: var(--padding);
    }

}


/* @media screen and (min-width: 1200px){

    figure{
        width: 140%;
        max-width: 140%!important;
    }
} */
@media screen and (max-width: 480px){
    figure table{
        /* width: calc(100% - var(--padding)*2);
        margin-left: var(--padding);
        margin-right: var(--padding); */

    }
}

figure table{
    border-top: var(--table-border);
    background-color: var(--bg-table);
}

figure table th, figure table td{
    padding-left: 1ch;
    padding-right: 1ch;
}



/* TABLE ------------------------------------- */

#donnees-video th, #donnees-video td, #donnees-video .h1, #donnees-video .h2{
    font-size: var(--font-small);
}



/* #table-hybridations ---------------------------------- */

#table_hybridations table{
    width: 923px;
}

@media screen and (max-width: 1040px){
    #table_hybridations{
        width: calc(100vw - var(--nav-w) - var(--margin-left) - var(--padding)*3);
        overflow: scroll;
    }
}

@media screen and (max-width: 780px){
    #table_hybridations{
        width: 100%;
    }
    #table_hybridations table{
        width: 720px;
    } 
}

@media screen and (max-width: 480px){
    #table_hybridations{
        width: 100vw;
    }
}

#table_hybridations thead tr th:nth-of-type(1),
#table_hybridations tbody tr td:nth-of-type(1){
    width: 38ch;
    padding-left: 1ch;
}

#table_hybridations thead tr th:nth-last-of-type(2),
#table_hybridations tbody tr td:nth-last-of-type(2){
    width: 12ch;
    padding-left: 1ch;
}

#table_hybridations thead tr th:nth-last-of-type(1),
#table_hybridations tbody tr td:nth-last-of-type(1){
    padding-left: 1ch;
}


/* Calendrier données video --------------------------------------------------- */


@media screen and (max-width: 910px){
    #donnees-video .calendrier-video{
        max-width: 400px;
    }
    #calendrier-benjamin{
        margin-top: var(--baseline);
    }

}


@media screen and (min-width: 910px){

    #donnees-video{
        width: 110%;
        
    }
    #donnees-video .calendrier-video{
        --calendrier-day: 12px;
    }

    #donnees-video .container-include{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: calc(var(--padding)*1.5);
    }

    
}



@media screen and (min-width: 1130px){
    #donnees-video{
        width: 140%;
    }
    #donnees-video .calendrier-video{
        --calendrier-day: 14px;
    }
}


/* CHAPITRE 4 ----------------------------------- */


#chap04-table-familles th{
    width: 30%;
    vertical-align: top;
}

#chap04-table-familles li{
    margin-bottom: calc(var(--baseline)*0.25);
}



/* #table-site-web-benjamin ----------------------------------- */

#table-site-web-benjamin table{
    max-width: 28ch;
}


#table-site-web-benjamin .td-2{
    width: 6ch; 

}




/* CHAP 6 / Pagedjs-thematiques  ------------------------------------------------------------
-------------------------------------------------------------------------------------------- */


#pagedjs-thematiques table{
    background-color: white;
}

#pagedjs-thematiques tbody tr th:nth-of-type(1),
#pagedjs-thematiques tbody tr td:nth-of-type(1){
  width: 88%;
}


.chapter table ul li{
    padding-left: 4ch;
}
.chapter table ul li::before{
    left: 1.5ch;
}

:root{
    --img-h: 400px;
}

@media screen and (max-width: 1250px){
    :root{
        --img-h: 400px;
    }
}

@media screen and (max-width: 1080px){
    :root{
        --img-h: 380px;
    }
}









/* 

#images-intro .figcaption{
    margin-top: calc(var(--baseline)*0.25);
}
 */



/* SLIDER ------------------------------------------------------------- */


.slider{
    margin-top: var(--baseline);
    width: calc(100vw - var(--nav-w));
    height: var(--img-h);
    left: calc(var(--padding)*-2);
    overflow-y: scroll;
}


.slider::-webkit-scrollbar {
    display: none;
  }

.slider-container{
    height: var(--img-h);
    width: calc(var(--img-h)*var(--img-ratio)*var(--nbr-img) 
            + var(--img-h)*var(--img-ratio)/2*var(--nbr-portrait)
            + var(--padding)*var(--nbr-img) + var(--padding)*2);
    display: flex;
}

.slider-container .feuillet-img{ display: flex }

.slider figure{
    width: calc(var(--img-h)*var(--img-ratio));
    height: var(--img-h);
    overflow: hidden;
    margin: 0px;
    margin-right: var(--padding);
    left: 0px;
}

.slider figure.portrait{
    width: calc(var(--img-h)*var(--img-ratio)/2);
}

.slider img{
    width: 102%;
    height: 100%;
    object-fit: cover;
}

.slider + .figcaption,
.slider + figcaption{
    margin-top: calc(var(--baseline)*0.5);
}

.slider::before{
    content: "\002192";
    --size: calc(var(--padding)*1.5);

   

    display: flex;
    /* width: ; */
    width: var(--size);
    height: var(--size);
    align-items: center;
    justify-content: center;
    text-align: center;

    background-color: var(--background);
    border: var(--border-layout);
    opacity: 0.8;

    position: sticky;
    top: 10px;
    left: calc(100% - var(--size) - 10px);
    margin-bottom: calc(var(--size)*-1);
    z-index: 60;

}

.slider:hover::after{
    content: "Scroll left";
    --size: calc(var(--padding)*1.5);

   

    display: block;
    padding: 2px 0.5ch;
  
    background-color: var(--background);
    border: var(--border-layout);
    opacity: 0.8;


    position: absolute;
    top: 10px;
    left: calc(var(--padding)*2 + 10px);
    margin-bottom: calc(var(--img-h)*-1);
    z-index: 60;

    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.2em;

}

@media screen and (max-width: 780px){
    .slider:not(#images-intro){
        --img-w: 89vw;
        --img-h: calc(var(--img-w)*var(--img-ratio-revert));
        left: calc(var(--padding)*-2);
        padding-left: calc(var(--padding)*1);
        width: 100vw!important;
        /* background-color: red; */
    }

    .slider:not(#images-intro) .slider-container{
        height: var(--img-h);
        width: calc(var(--img-w)*var(--nbr-img) 
                + var(--img-w)/2*var(--nbr-portrait) 
                + var(--padding)*0.5*var(--nbr-img));
        display: flex;
    }

    .slider:not(#images-intro) figure{
        width: var(--img-w);
        margin-right: calc(var(--padding)*0.5);
    }


    .slider figure.portrait{
        width: calc(var(--img-w)/2)!important;
    }

}

@media screen and (max-width: 480px){
    .slider:not(#images-intro){
        left: calc(var(--padding)*-1);
        padding-left: 0px;
    }
}


/* slider-aside-image  ------------------------------------------------------------- */

.slider-aside-image{
    --w-grid-figure: calc((var(--img-h)*var(--img-ratio)) + var(--padding));
    width: calc(100vw - var(--nav-w));
    padding-left: calc(var(--padding)*2);
    overflow-x: scroll;
    overflow-y: visible;
    height: calc(var(--img-h) + var(--baseline)*3);
}

#images-donnees{
    padding-left: calc(var(--padding)*2);
    left: calc(var(--margin-left)*-1 - var(--padding)*2);
}

.slider-aside-image .feuillet-3fig{
    width: calc(var(--w-grid-figure)*3);
    display: grid;
    grid-template-columns: var(--w-grid-figure) var(--w-grid-figure) var(--w-grid-figure);
}

.slider-aside-image .feuillet-2fig{
    grid-template-columns: var(--w-grid-figure) var(--w-grid-figure);
}

.slider-aside-image .figcaption,
#images-donnees figcaption{
    position: absolute;
    top: var(--img-h);
    left: 0px;
    margin-top: calc(var(--baseline)*0.5);
    max-width: var(--w-grid-figure);
    padding-right: 10ch;
    padding-left: 2ch;

    font-size: var(--font-small);
    line-height: calc(var(--baseline)*0.6);
}

#images-donnees figcaption{ 
    left: calc(var(--margin-left)*1);
    padding: 0px;
}
.slider-aside-image .figcaption:nth-of-type(2){
    left: calc((var(--img-h)*var(--img-ratio)) + var(--padding));
}

.slider-aside-image .figcaption::before{
    content: '↑';
    position: absolute;
    left: 0px;
}

.slider-aside-image figure{
    border: var(--img-border);
    background-color: #cfcfcf;
}

#mit-2 img{
    /* object-fit: contain; */
    object-position: 0px 0px;
}


@media screen and (min-width: 1320px){
    .slider-aside-image{
        left: calc(var(--margin-left)*-1 - var(--padding)*2);
    }
} 

@media screen and (max-width: 780px){

    :root{
        --img-h: 60vw;
    }

    .slider-aside-image{
        margin-bottom: calc(var(--baseline)*2);
    }

    .slider-aside-image, 
    .slider-aside-image .slider-container, 
    .slider-aside-image .feuillet-3fig, 
    .slider-aside-image .feuillet-2fig{
        height: auto; 
        display: block;
        overflow: visible;
        max-width: 100%;
        width: 100%;
        padding: 0px;
        left: 0px;
    }

   

    .slider-aside-image::after,
    .slider-aside-image::before{
        display: none;
    }

    .slider-aside-image figure{
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        margin: 0;
        margin-bottom: calc(var(--padding)*0.5);
    }

    
    .slider-aside-image .figcaption,
    .slider-aside-image .figcaption:nth-of-type(2){
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    
}


@media screen and (max-width: 480px){

    .slider-aside-image, 
    .slider-aside-image .slider-container, 
    .slider-aside-image .feuillet-3fig, 
    .slider-aside-image .feuillet-2fig{
    
        max-width: 100vw;
        width: 100vw;
    }

    .slider-aside-image{
        left: calc(var(--padding)*-1);
    }

    .slider-aside-image .figcaption,
    .slider-aside-image .figcaption:nth-of-type(2){
        padding-right: var(--padding);
        padding-left: calc(var(--padding)*2);
    }

    .slider-aside-image .figcaption::before{
        padding-left: calc(var(--padding)*1);
    }

}

#button-list-people{
    position: fixed;
    bottom: var(--padding);
    right: var(--padding);
    border: 1px solid var(--color-text-light);
    color: var(--color-text-light);
    background: var(--background);
    font-size: 1.4em;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    

    display: flex;
    align-items: center;
    justify-content: center;

    display: none;
}

#list-people{
    position: fixed;
    bottom: calc(var(--padding)*1.5 + 34px);
    /* right: var(--padding); */
    border: 1px solid var(--color-text-light);
    color: var(--color-text-light);
    background: var(--background);
    padding: var(--padding);
    right: -100vw;
    transition: right .4s;
}

#input-list-people:checked ~ #list-people{
    right: var(--padding);
}

#list-people li{
    margin-bottom: calc(var(--baseline)*0.25);
}
#list-people .people{
    display: inline-block;
    width: 2ch;
}



@media (min-width: 768px) and (max-width: 1024px) {
  
    #button-list-people{ display: flex; }
    
  }
  
  /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
    #button-list-people{ display: flex; }
    
  }
  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
    
    #button-list-people{ display: flex; }
    
  }
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 320px) and (max-width: 480px) {
    
    #button-list-people{ display: flex; }
    
  }/* Annexe LIST---------------------------------------- */

#annexe-list h2,
#annexe-list h2::after {
    height: calc(var(--baseline)*5);
    
}


#annexe-list + #chap-button-content{
    display: none!important;
}

#annexe-list ul{
    counter-reset: listAnnexe;
}

#annexe-list ul li{
    counter-increment: listAnnexe;
    font-size: calc(var(--font-size)*1.5);
    line-height: calc(var(--baseline)*1.25);
    margin-bottom: calc(var(--baseline)*1);
}

#annexe-list ul li::before{
    content: "Annexe " counter(listAnnexe) " ";
    display: block;
    font-family: var(--font-sans);
    font-size: calc(var(--font-size)*1);
}

#annexe-list ul li:hover{
    color: var(--color);

}

/* Annexe Pages ---------------------------------------- */




.annexe h4 {
    font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.4em;
  line-height: calc(var(--baseline)*1.2);
  margin-top: calc(var(--baseline)*2);
  margin-bottom: calc(var(--baseline)*0.5);
  text-wrap: balance; 
  border-bottom: 2px solid currentColor;
}


.style-sans-serif{
    font-family: var(--font-sans);
    /* background-color: var(--bakground-light); */
    /* border: 1px dotted currentColor; */
    /* padding: calc(var(--padding)) var(--padding); */
}

.vignette-double{
    display: flex;
    border: var(--img-border);
    margin-bottom: calc(var(--baseline)*1);
}

.vignette-double img{
    width: 50%;
    margin-top: 0;

}

.cover-chemin-fer{
  overflow: hidden;
}
.cover-chemin-fer img{
    height: 560px;
    width: auto!important;
    max-width: 100%;
    border: var(--img-border);


}



/* Annexe 2 ---------------------------------------- */


.annexe .group-planches {
    display: flex;
    background-color: #efefef;
    margin-bottom: calc(var(--baseline)*1);
}

.annexe .group-planches .planche-parcours{
    width: 50%;
}


.annexe .group-planches img{
    mix-blend-mode: multiply;
}



/* Annexe 1 ---------------------------------------- */

.group-annexe-typo{
    --w-annexe-typo:  500px;
    margin-bottom: calc(var(--baseline)*3);
}

.group-annexe-typo blockquote{
    margin-left: 0px;
}

.group-annexe-typo ul li{
    font-size: var(--font-size-caption);
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: var(--caption-line-height); 
    padding: 0;
    margin: 0;
    padding-bottom: calc(var(--caption-line-height)/2); 
}

.group-annexe-typo ul li::before{
    display: none;
}


.group-annexe-typo .aside-title{
    display: block;
    text-decoration: underline;
}

.group-annexe-typo figure{
    border: var(--img-border);
    
    max-width: var(--w-annexe-typo);
  
}

.group-annexe-typo ul{
    border: 1px dotted currentColor;
    padding: var(--padding);
}

@media screen and (min-width: 960px){

    .group-annexe-typo figure{        
        max-width: var(--w-annexe-typo);
    }

    .group-annexe-typo ul{
        position: absolute;
        top: calc(var(--baseline)*3 - 4px);
        z-index: 10;
        left: calc(var(--w-annexe-typo) + var(--gap)/2);
        width: 300px;
    }

    #typo-le-robert ul,
    #typo-anrt ul, 
    #typo-badass ul{
        top: calc(var(--baseline)*4);
    }

    #typo-zones-sensibles ul{
        top: calc(var(--baseline)*5 + 6px);
    }
}

@media screen and (max-width: 480px){
    .cover-chemin-fer, .group-annexe-typo figure{
        margin: var(--padding);
        width: calc(100vw - var(--padding)*2);
        height: auto;
    }

    .cover-chemin-fer img{
        height: auto;
    }

    #cover-amelie{
        left: calc(var(--padding)*-1);
    }

   
}


.annexe #annexe-hackathon-img-1, 
.annexe #annexe-hackathon-img-2,
.annexe #annexe-hackathon-img-3,
.annexe #annexe-hackathon-img-4{
    border: var(--img-border);
}#chapitre-02 .feuillet-3fig img{
    max-height: calc(var(--baseline)*20);
}

#chapitre-02 .feuillet-3fig figure + figure{
    margin-top: calc(var(--baseline)*-1);
}

#etat-art_linotype-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(var(--baseline)*16) auto;
    grid-column-gap: var(--padding);
}

@media screen and (max-width: 780px){
    #etat-art_linotype-1{
        grid-template-rows: calc(var(--baseline)*14) auto;
    }

}

@media screen and (max-width: 570px){
    #etat-art_linotype-1{
        display: block;
    }

    #etat-art_linotype-1 img{
        margin-bottom: calc(var(--baseline)*0.5);
    }

}

#etat-art_linotype-1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#etat-art_linotype-1 figcaption{
    grid-column: span 2;
}



#etat-art_monotype-1 img,
#etat-art_pao-1 img,
#etat-art_photocompo-compo-2 img,
#etat-art_photocompo-compo-3 img{
    border: var(--img-border)!important;
}
/* Participants ----------------------------------------- */



@media screen and (min-width: 940px) {
    .img-participant{
        --participants-w: 360px;
        width: var(--participants-w);
        float: right;
        margin-left: calc(var(--participants-w)*0.25*-1);
        margin-top: calc(var(--baseline)*1 + 10px);
        margin-bottom: calc(var(--baseline)*0.5);
        left: calc(var(--participants-w)*0.25 + var(--padding));
    }

}

@media screen and (min-width: 1060px) {

    .img-participant{
        --participants-w: 400px;
        width: var(--participants-w);
        float: right;
        margin-left: calc(var(--participants-w)*0.5*-1);
        margin-top: calc(var(--baseline)*1 + 10px);
        left: calc(var(--participants-w)*0.5 + var(--padding));
    }

}

@media screen and (min-width: 1130px){

    #chapitre-04_note-13{
        top: calc(var(--baseline)*-7);

    }
}

@media screen and (max-width: 940px) {
    .img-participant{
        width: 100%;
        max-width: 316px;
        float: left;
        margin-left: 0px;
        margin-top: calc(var(--baseline)*1 + 8px);
        margin-right: var(--padding);
        margin-bottom: calc(var(--baseline)*0.5);
        left: 0px;
    }

}

@media screen and (max-width: 846px) {
    .img-participant{
        width: 100%;
        max-width: 500px;
        float: none;
        margin: 0px;
        margin-top: calc(var(--baseline)*2);
        left: 0px;
    }

}


#word-mabm{
    max-width: 500px;
}


@media screen and (min-width: 780px){

    #osp-fanzine,
    #eloisa-nancy-collection,
    #loraine-deconstruction,
    #mabm-herbier,
    #interface-entretiens,
    #loraine-almanach,
    #grilles-mabm,
    #styles-logiciels{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--padding);
    }

    #ethertoff{
        display: grid;
        grid-template-columns: 1.5fr 3fr;
        grid-column-gap: var(--padding);
    }

    #osp-fanzine img,
    #eloisa-nancy-collection img,
    #loraine-deconstruction img,
    #mabm-herbier img,
    #interface-entretiens img,
    #loraine-almanach img,
    #grilles-mabm img,
    #styles-logiciels img,
    #ethertoff img{
        margin: 0px;
        width: 100%;
        Height: 100%;
        object-fit: cover;
    }


}

#loraine-deconstruction img,
#mabm-herbier img,
#copy-this-book img,
#dictionnaire-bayles-texte img{
    border: var(--img-border);
}

#dialectique-boite-calque img,
#dialectique-montage-flux img{
    border: 1px dotted currentColor;
}

#dialectique-montage-flux img{
    padding-left: var(--padding);
    padding-top: var(--padding);
}

#dialectique-boite-calque img{
    padding-top: var(--padding) 0;
}



#chap04_dessin-gabarit-sarah,
#chap04_sarah_dessin-controverses{
    max-width: 365px;
}


#goji, #copy-this-book{
    width: 400px;
}





@media screen and (min-width: 980px){

    #goji, #copy-this-book{
        width: 360px;
        float: right;
        left: 148px;
        margin-left: -110px;
        margin-top: 0px;
    }

    #copy-this-book{
        top: calc(var(--baseline)*1.5);
    }

   

}

@media screen and (min-width: 1080px){

    #goji,  #copy-this-book{
        width: 400px;
        float: right;
        left: 240px;
        margin-left: -200px;
        margin-top: 0px;
    }

}




@media screen and (min-width: 1130px){

    #chapitre-04_note-30{
        top: calc(var(--baseline)*-6);
    }


}




@media screen and (min-width: 1064px) {
    #chap04_sarah_dessin-controverses{
        float: right;
        margin-top: calc(var(--baseline)*-1);
        margin-left: -140px;
        left: 196px;
        
    }
}


@media screen and (min-width: 1220px) {
    #chap04_dessin-gabarit-sarah,
    #chap04_sarah_dessin-controverses{
        position: absolute;
        left: calc(var(--width-content) + var(--gap));
        max-width: 365px;
    }

    #chap04_dessin-gabarit-sarah img{
        left: -44px;
    }

    #chap04_sarah_dessin-controverses{
        margin-left: 0;
        margin-top: calc(var(--baseline)*-12);
    }
}



#chap04_nicolas_dessin-chainage{
    max-width: 200px;
    float: right;
    margin-left: 30px;
}


@media screen and (min-width: 1080px) {

    #chap04_nicolas_dessin-chainage{
        position: absolute;
        left: calc(var(--width-content) + var(--gap));
        max-width: 200px;
        margin-left: 0px;
    }
}



@media screen and (max-width: 600px) {
    #chap04_nicolas_dessin-chainage{
        width: 240px;
        float: none;
        margin-left: 0px;
        margin-top: 0px;
    }
}

#parcours-stephanie .container-parcours,
#parcours-nicolas .container-parcours{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #efefef;
}
#parcours-stephanie img,
#parcours-nicolas img{
    mix-blend-mode: multiply;
}


@media screen and (max-width: 890px) {

    #parcours-stephanie .container-parcours,
    #parcours-nicolas .container-parcours{
        display: block;
    }

}


@media screen and (max-width: 780px) {
    #osp-fanzine img + img,
    #eloisa-nancy-collection img + img,
    #loraine-deconstruction img + img,
    #mabm-herbier img + img,
    #interface-entretiens img + img,
    #loraine-almanach img + img,
    #grilles-mabm img + img,
    #styles-logiciels img + img{
        margin-top: calc(var(--baseline)*0.5)
    }

    #ethertoff img:first-of-type{
        max-height: calc(var(--baseline)*16);
        border: var(--img-border);
        margin-bottom: calc(var(--baseline)*0.5)
    }

}


#print-planche-stephanie-hack{
   margin-top: calc(var(--baseline)*-1);
}


#dialectique-montage-flux,
#chap04_single-source img{
    background-color: white;
}


#loraine-almanach img, #loraine-div-page img{
    border: var(--img-border);
}

@media screen and (min-width: 1130px){

    #chapitre-05_note-15{
        top: calc(var(--baseline)*-4);
    }

    #chapitre-05_note-16, #chapitre-05_note-17{
        top: calc(var(--baseline)*-9);
    }
}



/* FIGURES ------------------------------------- */

#css-vocabulaire{
    max-width: 460px
}

@media screen and (min-width: 780px){

    #suivis-classes-situations, 
    #chap05_code-page-titre{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--padding);
    }

    #suivis-classes-situations img, 
    #chap05_code-page-titre img{ margin-top: 0px;}
   

    #chap05_timeline-infructueuse{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--padding);
    }

    #chap05_timeline-infructueuse img:nth-of-type(1){
        grid-column: span 2;
    }

    #chap05_timeline-infructueuse img{
        border: var(--img-border);
    }

    #chap05_code-page-titre{
        grid-template-columns: 5fr 3fr;
    }

    #chap05_code-page-titre img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 0px 0px;
    }

    
}




/* small device --------------------------- */

@media screen and (max-width: 480px){
    #donnees-video, 
    #suivis-classes-situations{
        padding: 0 var(--padding);
    }

    #donnees-video figcaption, 
    #suivis-classes-situations figcaption{
        left: 0;
    }

    #css-vocabulaire img,
    #chap05_shema-page-titre img,
    #chap05_chronique-elaboration-titre img,
    #SA-partage img{
        padding: 0 var(--padding);
    }
}



@media screen and (max-width: 780px){

    #suivis-classes-situations img + img{
        margin-top: calc(var(--baseline)*1)
    }

    #chap05_timeline-infructueuse img + img,
    #group-fig-marginbox img + img,
    #duotone-code-avant-apres img + img,
    #code-nettoyage img + img{
        margin-top: calc(var(--baseline)*0.5)
    }


    

}


#chap05_espaces-travail img{
    background-color: white;
}


#chap05_code-page-titre img,
#chap05_amelie-rendu-2 img,
#chap05_benjamin-grille img,
#group-fig-marginbox img,
#code-variables img,
#duotone-code-avant-apres img,
#code-nettoyage img{
    border: var(--img-border);
}

/* FIGURES --------------------------------------  */


#modules-pagedjs img{
    max-width: 360px;

}

#modules-pagedjs figcaption{
    max-width: 420px;
}

#pagedjs-prises-temporelles img, #sa-css img {
    max-width: 520px;
}


#pagedjs-specs-notes div{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--padding);
}

#pagedjs-specs-notes img{
    margin-top: 0px;
}

@media screen and (max-width: 480px){
    #pagedjs-specs-notes div{
        padding: 0 var(--padding);
        grid-gap: calc(var(--padding)/2);

    }
}



/* BORDURE ------------------------- */

#css3-modules img,
#boite-noire img,
#previsualisation-pagedjs img,
#modules-pagedjs img{ 
    border: var(--img-border-light);
    padding: var(--padding) calc(var(--padding)*1.5);
}


/* Double figure ------------------------- */

#photos-hackathon-participants{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--padding);
}

#photos-hackathon-participants img{
    margin: 0px;
}

/* Double figure & little gap ------------------------- */

#photos-hackathon-participants{
    grid-column-gap: calc(var(--padding)*0.5);
}






/* DEROULÉ HACKATHON -------------------------- */

#deroule-hackathon{
    border: var(--img-border-light);
    margin-bottom: calc(var(--baseline)*2.5);
}



#deroule-hackathon img{
    padding: var(--padding);
}

#legende-deroule-hackathon ul{
    margin-top: 0px; 
}
#legende-deroule-hackathon li{
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
}
#legende-deroule-hackathon li::before{
    content: '';
    transform: rotate(0deg)!important;
    width: 14px!important;
    height: 14px!important; 
    border: 1px solid #444!important;
    background-color: var(--color);
    left: var(--padding); 
    display: inline-block;
    top: 8px;
}


#legende-deroule-hackathon li{
    padding-left: 6ch!important;
}



#legende-deroule-hackathon li em{
    font-weight: normal;
}

#deroule-hackathon figcaption{
    position: absolute;
    bottom: calc(var(--baseline)*-2.5);
}

#pagedjs-thematiques table,
#pagedjs-thematiques tbody th{
    background-color: var(--bg-table);

}

#pagedjs-thematiques tbody th {
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
  
}




/* NOTES -------------------------- */


@media screen and (min-width: 1130px){

    #chapitre-06_note-38{
        top: calc(var(--baseline)*-5);
    }

    #chapitre-06_note-41{
        top: calc(var(--baseline)*-4);
    }


}


@media screen and (max-width: 780px){

    #interface-hackathon img + img{
        margin-top: calc(var(--baseline)*0.5)
    }
}

#interface-hackathon img,
#css3-modules img,
#boite-noire img,
#previsualisation-pagedjs img,
#modules-pagedjs img,
#deroule-hackathon{
    background-color: white;
}



input#night-mode:checked ~ #container-body #legende-deroule-hackathon{
    color: var(--background)!important;
}



#photos-hackathon{
    position: relative;
    left: calc(var(--margin-left)*-1 + var(--padding)*2);
}

#photos-hackathon .slider{
    margin-bottom: calc(var(--baseline)*2);
    height: calc(var(--img-h) + var(--baseline)*4);
    margin-top: calc(var(--baseline)*0.5);
}



figure[data-group="A"], [data-group="A"]{ --color: var(--color-a); }
figure[data-group="B"], [data-group="B"] { --color: var(--color-b); }
figure[data-group="C"], [data-group="C"]{ --color: var(--color-c);  }
figure[data-group="D"], [data-group="D"]{ --color: var(--color-d);  }
figure[data-group="E"], [data-group="E"]{ --color: var(--color-e);  }



#photos-hackathon .slider,
#photos-hackathon .slider-container,
#photos-hackathon .slider figure{
    height: calc(var(--img-h) + var(--baseline)*4)!important;
}

#photos-hackathon .slider .container-img{
    height: var(--img-h)!important;
    border: var(--img-border-light);
}


#photos-hackathon .slider figure{
    overflow: visible;
}


#photos-hackathon .day{
    margin-top: calc(var(--baseline)*2);
}

#photos-hackathon .arrow-css {
	position: relative;
	background: var(--color);
    height: var(--baseline);
    height: 12px;
    width: calc(100% - 1.5ch);
    top: -14px;
    margin-bottom: 3px;
    margin-top: 10px;
    left: 0.5ch;
}
#photos-hackathon .arrow-css:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: var(--color);;
	border-width: 7px;
	margin-top: -7px;
}

#photos-hackathon .last  .arrow-css:after{
    display: none; 
}


#photos-hackathon figure p{
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: var(--caption-line-height);
    text-indent: 0;
    padding-top: calc(var(--baseline)*0.5);
    font-weight: 600;
    text-indent: 0;
    color: var(--color);

}

#photos-hackathon figure p .details{
    font-style: italic;
}



#photos-hackathon .day aside {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: var(--baseline);
    position: absolute;
    bottom: calc(var(--baseline) + 4px);
    display: none;
}

#photos-hackathon .day aside li::before{
    display: none; 
}

#photos-hackathon .day aside ul, #photos-hackathon .day aside li, #photos-hackathon .day h1, #photos-hackathon .day h2{
    all: initial;
    margin: 0; 
    padding: 0; 
    font-family: var(--font-sans);
    font-size: var(--font-size-caption);
    line-height: calc(var(--baseline)*0.75);
    display: block; 
}


#photos-hackathon .day h1{
    font-weight: 600;
    column-span: all;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    margin-bottom: 0px;
    background-color: var(--bg-table);
    padding: 0.5ch 1ch;
    width: calc(100vw - var(--nav-w) - var(--padding)*4);
    position: relative;
    left: calc(var(--padding)*-2);
    color: var(--color-text);
   
  
}

#photos-hackathon .day h1 sup{
    text-transform: lowercase;
}

#photos-hackathon .day aside span::before{
    content: "| ("
}

#photos-hackathon .day aside span::after{
    content: ")"
}




@media screen and (max-width: 780px){
    #photos-hackathon{
        position: relative;
        left: 0px;
    }
    #photos-hackathon .day h1{
        width: calc(100vw - var(--padding)*3);
        left: calc(var(--padding)*-1)
    }

    #photos-hackathon figure p{
        font-size: var(--font-size);
        line-height: calc(var(--baseline)*0.75);
    
    }
}

@media screen and (max-width: 480px){
    #photos-hackathon .day h1{
        width: 100vw;
        left: calc(var(--padding)*-1)
    }

    #photos-hackathon .arrow-css{
        width: 90%;
        margin-left: 0.8ch;
    }

    #photos-hackathon .arrow-css p{
        padding-top: 17px;

    }
}