@font-face{
  font-family: "Baskerville-italic";
  src: url("font/Baskerville-Italic.woff") format("woff");
}

@font-face{
  font-family: "Baskerville-regular";
  src: url("font/Baskerville-Regular.woff") format("woff");
}

@font-face{
  font-family: "Helvetica-Condensed-Bold-Italic";
  src: url("font/Helvetica-Condensed-Bold-Italic.woff") format("woff");
}

@font-face{
  font-family: "Helvetica-Neue-Condensed-Bold";
  src: url("font/Helvetica-Neue-Condensed-Bold.woff") format("woff");
}

:root {
  --main-color: black ;
  --background-color: floralwhite;
  --special-color: darkorange;
  --interview-color: lightblue;
}

body{
  font-family: "Baskerville-regular";
/*  background-image: url(../import/orange-pics/fais-moi-signe-03.jpg);
  background-size: cover;*/
  background-color: var(--background-color);
}

  a{
    width: fit-content;
    text-decoration: none;
    color: var(--main-color);
  }

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

.title-italic{
  font-family: "Helvetica-Condensed-Bold-Italic";
}

.italic{
  font-family: "Baskerville-italic";
}

h1{
  font-family: "Helvetica-Neue-Condensed-Bold";
}

header{
  width: 100vw; height: 10vh;
  position: fixed; top: 0; left: 0;
  padding-right: 0.5vw;

  display: flex; justify-content: space-around;

  align-items: center;

  background-color: var(--background-color);
  border-bottom: 1px solid var(--main-color);
  box-sizing: border-box;
}

  #main-title{
    width: fit-content; height: fit-content;

    align-items: center;
    align-content: center;

    font-size: 4.6vw;
  }

  #navigation{
    width: 22.5vw; height: fit-content;
    position: fixed; bottom: 1vh; right: 0vw; left: none;
    padding-top: 1vh; padding-right: 1vw; padding-left: 1vw; 
    box-sizing: border-box;

    display: flex; justify-content: space-between;

    font-size: 1.2vw;
    background-color: none;
    border-top: 1px solid var(--main-color);
    z-index: 0;
  }

#presentation{
  width: 21.5vw;
  position: fixed; top: 11vh; bottom: auto; left: auto; right: 0.5vw;

  font-size: 1vw;
  color: var(--main-color);
  text-align: justify;
}

  #presentation a{
    text-decoration: underline;
  }

#sommaire-liste{
  height: 90vh; width: 22.5vw;
  position: fixed; top: 10vh; left: 0vw;

  padding-left: 0.5vw; padding-top: 1vh; padding-right: 0.5vw;
  box-sizing: border-box;

  display: flex; flex-direction: column;

  font-family: "Helvetica-Neue-Condensed-Bold";
  font-size: 1.5vw;
  text-align: justify;
}

  #sommaire-liste a{
    margin-bottom: 1.4vh;
  }

  #sommaire-sous-parties{
    margin-left: 2vw;
    display: flex; flex-direction: column;

    font-family: "Baskerville-regular";
  }

    #sommaire-sous-parties a{
      font-size: 1.3vw;
    }


#text-box{
  height: 90vh; width: 55vw;
  position: fixed; top: 10vh; left: 22.5vw;

  overflow-x: hidden;
  overflow-y: scroll;

  cursor: ns-resize;
  background-color: var(--background-color);
  border-left: 1px solid var(--main-color); border-right: 1px solid var(--main-color);
  box-sizing: border-box;
}

.main-texte{
  width: 55vw; height: fit-content; 
  padding: 0.5vw;
  box-sizing: border-box;

  background-color: var(--background-color);
  
}

    .title-text{
      margin-bottom: 2vh;
      font-size: 4vw;
      border-bottom: 1px dotted var(--main-color);
      box-sizing: border-box;
    }

      .second-title-text{
        margin-top: 2vh; margin-left: 50%; margin-bottom: 2vh;
        font-size: 2vw;
      }

        .page-one, .page-two{
          height: fit-content;
          display: flex; flex-direction: column;
          justify-content: space-between;
        }

          .page-one{
            margin-bottom: 2vh;
          }

          .first-bloc{
            margin-bottom: 2vh;
          }

        .petit-texte{
          width: 50%; margin-bottom: 1vh;
          font-size: 1.2vw;

          text-align: justify;
        }

          .left{
          }

          .right{
            margin-left: 50%;
          }

        .grand-texte{
          width: 100%; margin-bottom: 1vh;
          font-size: 2vw;
          text-align: justify;
        }

        .notes{
          width: 100%;
          margin-top: 2vh; margin-bottom: 1vh;

          font-size: 0.8vw;
          text-align: justify;
        }

.texte-pics{
  width: 25vw;
  margin-top: 2vh; margin-bottom: 1vh; margin-left: 17vw;

  display: flex; flex-direction: row; justify-content: space-between;

  align-items: end;
}

  .legende-image{
    width: 21.5vw;
    position: fixed; bottom: 0.5vh; right: 0.5vw; 
    margin-top: none;
    padding-bottom: 0.5vh;

    font-size: 1vw;
    text-align: justify;

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

    opacity: 0; pointer-events: none;
  }

    .texte-pics:hover .legende-image{
      opacity: 1;

    }

  .colored-pic{
    width: 21.5vw; 
    position: fixed; top: 11vh; right: 0.5vw;
    opacity: 0; pointer-events: none;
  }

  .orange-pic{
    width: 21.5vw; height: 100%;
    cursor: grab;
    display: block;
  }

    .texte-pics:hover .colored-pic{
      opacity: 1;
    }

#remerciements{
  width: 27vw;
  
  text-align: justify;
}

  #remerciements p{
    width: auto;
    font-size: 1vw;
  }

#sommaire{
  height: fit-content; 
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color); border-bottom: 1px solid var(--main-color);
}

#abstract{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color); border-bottom: 1px solid var(--main-color);
}

#introduction{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-bottom: 1px solid var(--main-color);
}

#premiere-partie{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

  #premiere-partie-a{
    padding-bottom: 3vh;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--main-color);
  }

#deuxieme-partie{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

  #deuxieme-partie-a{
    padding-bottom: 3vh;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--main-color);
  }

#troisieme-partie{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

  #troisieme-partie-a{
    padding-bottom: 3vh;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--main-color);
  }

#conclusion{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

#annexes{
  height: fit-content; 
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
}

  #annexes #annexes-texte{
    padding-bottom: 3vh;
    box-sizing: border-box;
  }

#annexes-entretien{
  width: 55vw;
  padding: 0.5vw;
  box-sizing: border-box;

  background-color: var(--interview-color);
}

#annexes-entretien .title-text{
  margin-bottom: 2vh;
}

#entretien-retranscription{
  width: auto;
  margin-top: 2vh;
  box-sizing: border-box;

  justify-items: center;

  font-size: 1.2vw;
  text-align: justify;
}

  .dialogue{
    margin-bottom: 2vh;

    display: flex; flex-direction: column; justify-content: space-between;

    align-items: baseline;
  }

    .nom-odilon, .nom-margaux{
      width: 40vw;
      margin-bottom: 1vh;

      font-family: "Helvetica-Neue-Condensed-Bold";
      font-size: 1.2vw;
    }

      .nom-odilon{
        color: grey;
      }

    .margaux-texte, .odilon-texte{
      width: 40vw;

      font-size: 1vw;
    }

      .odilon-texte{
        color: grey;
      }

#bibliographie p{
  margin-bottom: 2vh;

  font-size: 1vw;
  line-break: anywhere;
}

/*

   d8    d8    d8                                                                oo                   8b   8b   8b   
  d8'   d8'   d8'                                                                                     `8b  `8b  `8b  
 d8'   d8'   d8'  88d888b. .d8888b. .d8888b. 88d888b. .d8888b. 88d888b. .d8888b. dP dP   .dP .d8888b.  `8b  `8b  `8b 
 Y8.   Y8.   Y8.  88'  `88 88ooood8 Y8ooooo. 88'  `88 88'  `88 88'  `88 Y8ooooo. 88 88   d8' 88ooood8  .8P  .8P  .8P 
  Y8.   Y8.   Y8. 88       88.  ...       88 88.  .88 88.  .88 88    88       88 88 88 .88'  88.  ... .8P  .8P  .8P  
   Y8    Y8    Y8 dP       `88888P' `88888P' 88Y888P' `88888P' dP    dP `88888P' dP 8888P'   `88888P' 8P   8P   8P   
                                             88                                                                      
                                             dP
*/

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

  header{
  width: 100vw; height: 4vh;
  position: fixed; top: 0; left: 0;
  padding-right: 0.5vw;

  display: flex; justify-content: space-around;

  align-items: center;

  background-color: var(--background-color);
  border-bottom: 1px solid var(--main-color);
  box-sizing: border-box;
}

  #main-title{
    width: fit-content; height: fit-content;

    align-items: center;
    align-content: center;

    font-size: 8vw;
  }

  #navigation{
    width: 100vw; height: 3vh;
    position: fixed; bottom: 0vh; left: 0vw;
    padding: 2vw; 
    box-sizing: border-box;

    display: flex; justify-content: space-between;

    font-size: 3vw;

    background-color: var(--background-color);
    border-top: 1px solid var(--main-color);
    z-index: 1;
  }

#presentation{
  width: 29vw;
  position: fixed; top: auto; bottom: 3.5vh; left: 0.5vw; right: auto;

  font-size: 2vw;
  color: var(--main-color);
  text-align: left;
}

  #presentation a{
    text-decoration: underline;
  }

#sommaire-liste{
  height: 90vh; width: 30vw;
  position: fixed; top: 4vh; left: 0vw;

  padding-left: 0.5vw; padding-top: 1vh; padding-right: 0.5vw;
  box-sizing: border-box;

  display: flex; flex-direction: column;

  font-family: "Helvetica-Neue-Condensed-Bold";
  font-size: 4vw;
  text-align: left;
}

  #sommaire-liste a{
    margin-bottom: 0.5vh;
  }

  #sommaire-sous-parties{
    margin-left: 2vw;
    display: flex; flex-direction: column;

    font-family: "Baskerville-regular";
  }

    #sommaire-sous-parties a{
      font-size: 3vw;
    }

#text-box{
  height: 93vh; width: 70vw;
  position: fixed; top: 4vh; left: 30vw;

  overflow-x: hidden;
  overflow-y: scroll;

  cursor: ns-resize;
  background-color: var(--background-color);
  border-left: 1px solid var(--main-color); border-right: 1px solid var(--main-color);
  box-sizing: border-box;
}

.main-texte{
  width: 70vw; height: fit-content; 
  padding: 1vw;
  box-sizing: border-box;

  background-color: var(--background-color);
  
}

    .title-text{
      margin-bottom: 1vh;
      font-size: 6vw;
      border-bottom: 1px dotted var(--main-color);
      box-sizing: border-box;
    }

      .second-title-text{
        margin-top: 2vh; margin-left: 50%; margin-bottom: 2vh;
        font-size: 5vw;
      }

        .page-one, .page-two{
          height: fit-content;
          display: flex; flex-direction: column;
          justify-content: space-between;
        }

          .page-one{
            margin-bottom: 2vh;
          }

          .first-bloc{
            margin-bottom: 2vh;
          }

        .petit-texte{
          width: 50%; margin-bottom: 1vh;
          font-size: 3vw;

          text-align: justify;
        }

          .left{
          }

          .right{
            margin-left: 50%;
          }

        .grand-texte{
          width: 100%; margin-bottom: 1vh;
          font-size: 5vw;
          text-align: justify;
        }

        .notes{
          width: 100%;
          margin-top: 2vh; margin-bottom: 1vh;

          font-size: 2vw;
          text-align: justify;
        }

.texte-pics{
  width: 60vw;
  margin-top: 0vh; margin-bottom: 10vh; margin-left: 5vw;

  display: flex; flex-direction: column; justify-content: space-between;

  align-items: end;
}

  .legende-image{
    width: 60vw;
    position: relative; margin-top: 13vh;
    padding-bottom: 0.5vh;

    font-size: 3vw;
    text-align: justify;

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

    opacity: 1; pointer-events: none;
  }

    .texte-pics:hover .legende-image{
      opacity: 1;

    }

  .colored-pic{
    width: 60vw; 
    position: relative; 
    opacity: 1; pointer-events: none;
  }

  .orange-pic{
    width: 40vw; height: 100%;
    cursor: grab;
    display: none;
  }

    .texte-pics:hover .colored-pic{
      opacity: 1;
    }

#sommaire{
  height: fit-content; 
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color); border-bottom: 1px solid var(--main-color);
}

#remerciements{
  width: 68vw;
  
  text-align: justify;
}

  #remerciements p{
    width: auto;
    font-size: 3vw;
  }

#abstract{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color); border-bottom: 1px solid var(--main-color);
}

#introduction{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-bottom: 1px solid var(--main-color);
}

#premiere-partie{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

  #premiere-partie-a{
    padding-bottom: 3vh;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--main-color);
  }

#deuxieme-partie{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

  #deuxieme-partie-a{
    padding-bottom: 3vh;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--main-color);
  }

#troisieme-partie{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

  #troisieme-partie-a{
    padding-bottom: 3vh;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--main-color);
  }

#conclusion{
  height: fit-content;
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

#annexes{
  height: fit-content; 
  padding-bottom: 3vh;
  box-sizing: border-box;

  display: flex; flex-direction: column;
  justify-content: space-between;

  border-top: 1px solid var(--main-color);
}

  #annexes #annexes-texte{
    padding-bottom: 3vh;
    box-sizing: border-box;
  }

#annexes-entretien{
  width: 70vw;
  padding: 1vw;
  box-sizing: border-box;

  background-color: var(--interview-color);
}

#annexes-entretien .title-text{
  margin-bottom: 2vh;
}

#entretien-retranscription{
  width: auto;
  margin-top: 2vh;
  box-sizing: border-box;

  justify-items: center;

  font-size: 3vw;
  text-align: justify;
}

  .dialogue{
    margin-bottom: 1vh;

    display: flex; flex-direction: column; justify-content: space-between;

    align-items: baseline;
  }

    .nom-odilon, .nom-margaux{
      width: 60vw;
      margin-bottom: 0.5vh;

      font-family: "Helvetica-Neue-Condensed-Bold";
      font-size: 3vw;
    }

      .nom-odilon{
        color: grey;
      }

    .margaux-texte, .odilon-texte{
      width: 60vw;

      font-size: 3vw;
    }

      .odilon-texte{
        color: grey;
      }

#bibliographie p{
  margin-bottom: 2vh;

  font-size: 3vw;
  line-break: anywhere;
}