[Enter code here]@font-face {
    font-family: "Murmure" ;
    src: url("fonts/le-murmure.ttf");
}

@font-face {
  font-family: "PropCourier" ;
  src: url("fonts/PropCourierSans-Regular.otf");
}

@font-face {
  font-family: "Junicode" ;
  src: url("fonts/junicode-regular-webfont.woff");
}
@font-face {
  font-family: "League" ;
  src: url("fonts/VG5000-Regular_web.ttf");
}
@font-face {
  font-family: "Louise" ;
  src: url("fonts/Louise-Regular.otf");
}

@font-face {
  font-family: "Abordage" ;
  src: url("fonts/FT88-Regular.ttf");
}

@font-face {
  font-family: "FT88-School" ;
  src: url("fonts/FT88-School.ttf");
}

@font-face {
  font-family: "Abeezee" ;
  src: url("fonts/Abordage-Regular.ttf");
}

@font-face {
  font-family: "Tulpen" ;
  src: url("fonts/TulpenOne-Regular.ttf");
}

@font-face {
  font-family: "Redaction" ;
  src: url("fonts/Redaction35-Regular.otf");
}

@font-face {
  font-family: "Redaction-100" ;
  src: url("fonts/Redaction100-Regular.otf");
}


@font-face {
  font-family: "Redaction-var" ;
  src: url("fonts/Redaction-Regular.otf");
}

@font-face {
  font-family: "Mazius" ;
  src: url("fonts/MaziusDisplay-Regular.otf");
}

@font-face {
  font-family: "Karla";
  src: url("fonts/Karla-Regular.otf");
}


@font-face {
  font-family: "Karla-var";
  src: url("fonts/Karla-Light.otf");
}
@font-face {
  font-family: "Karla-extra";
  src: url("fonts/Karla-ExtraLight.otf");
}

@font-face {
  font-family: "Karla-it";
  src: url("fonts/Karla-LightItalic.otf");
}

@font-face {
  font-family: "Karla-bold";
  src: url("fonts/Karla-Bold.woff2");
}


@media screen {
  #section5{
    display: none;
  }
  
}


.print-button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
}


.ref-note{
  display: none;
}


.panel-texte-print{
  display :none;
}


#noteDisplay{
  display: none;
}

/* style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.panel-img{
  display: none;
}

nav a {
  text-decoration: none;
  color:rgb(116, 168, 158);
  padding: 5px;
  transition: color 0.3s;
}
nav a:hover {
  color: rgb(165, 235, 222);
}


body {
  font-family: "Murmure";
  overflow-x: hidden;
  background-color: rgb(234, 234, 234);
}

.panel {
  width: 100%;
  height: 100vh; /* Chaque section occupe toute la hauteur de la fenêtre */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.panel2 {

  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}


#section1 {
  background-color: rgb(0, 92, 52); 
}

#section4-bis{
  position: relative;
 background-color: rgb(0, 92, 52); 
    width: 100%;
    height: auto;
    padding: 5%;
    box-shadow: 1px 1px 12px #555;
  color: rgb(255, 255, 255); ;
  margin: 0;
} 

#section4-bis-bis{
  position: relative;
 background-color: rgb(255, 255, 255); 
    width: 100%;
    height: 850px;
    padding: 5%;
    box-shadow: 1px 1px 12px #555;
  color: rgb(0, 0, 0); ;
  margin: 0;
  overflow: hidden; 
} 


#section2 {
  background-color: rgb(255, 255, 255); 
}

#section4-bibliographie{
  position: relative;
    background-color: rgb(246, 246, 246);   
    width: 60%;
    height: auto;
    left: 5%;
    padding: 5%;
    box-shadow: 1px 1px 12px #555;
  
} 

#section3 {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  opacity: 20%;
  z-index: -2;
}


.columns-container {
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 100%;
  opacity: 0; /* Les colonnes commencent invisibles */
  transform: translateY(100px); /* Elles commencent en bas de la fenêtre */
  transition: opacity 1s ease-out, transform 1s ease-out;

}

.column {
  width: 35%;
  text-align: center;

}

.column-title {
  font-family: "Abeezee";
  font-size: 13px;
  color: rgb(255, 255, 255);
  margin: 0;
}

.circle {
  display: block;
  background: rgba(0, 0, 0, 0);
  border-radius: 50%;
  border: 1px solid white;
  height: 40px;
  width: 40px;
margin: auto;
margin-top: 10%;
margin-bottom: 10%;
text-align: center;
font-family: "Louise";
 }



/* span{
  font-family: "Louise";
  border-radius: 100%;
  padding: 5%;
  border: 1px solid white;
} */
.content {
  font-size: 3rem;
  color :rgb(255, 255, 255);
  left: 5%;
}

.section1 {
  position: relative;
  height: 100vh; /* Hauteur de la section égale à la fenêtre */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* Couleur de fond pour mieux visualiser */
  z-index: 1000;
}

.poids-texte {
  position: absolute;
  top: 30%; /* Fixé en haut de la fenêtre */
  width: 100%;
font-size: clamp(4rem, 11vw, 22rem);

  left: 0;

  font-family: "Redaction";
  margin-left: 5%;
  box-sizing: border-box;
  text-align: start;

}

.poids {
  position: absolute;
  width: 60%;
  top: 8%;
font-size: clamp(4rem, 11vw, 22rem);
font-family: "Karla";
  margin-left: 15%;
  box-sizing: border-box;
  text-align: start;
  font-style: bold;

  word-spacing: 100rem;
  letter-spacing: 0.09em;
  font-family: "Redaction";
}


.lamachine {
  position: absolute;
  width: 60%;
  top: 30%;
font-size: clamp(4rem, 11vw, 22rem);
font-family: "Karla";
  margin-left: 26%;
  box-sizing: border-box;
  text-align: start;
  font-family: "Redaction";
}

.info{
  width: 40%;
  height: 30%;
  position: absolute;
  box-sizing: border-box;
  top: 60%;

  left: 5%;
}


.le{
  position: absolute;
  top: 8%;
  width: 60%;
font-size: clamp(4rem, 11vw, 22rem);
  left: 0;
  font-family: "Redaction";
  margin-left: 5%;
  box-sizing: border-box;
  text-align: start;
}


.machine-texte {
  position: absolute;
  top: 30%; /* Fixé en haut de la fenêtre */
  width: 100%;
  word-spacing: 28px;
font-size: clamp(8rem, 11vw, 22rem);
  left: 0;
  transform-origin: top;
  font-family: "Redaction";
  white-space: pre-line;
  text-align: justify;
  margin-left: 5%;
  box-sizing: border-box;
  align-content: flex-end;


}

.suzie{
  position: absolute;
  width: 100%;
  font-size: 35px;

  font-family: "Redaction";
  font-size: clamp(2rem, 4vw, 8rem);
  white-space: pre-line;

}
.tomek{
  position: absolute;
  top: 58%;
width: 100%;
font-size: 25px;
left: 0;
transform-origin: top;
font-family: "Redaction";
white-space: pre-line;
text-align: justify;
box-sizing: border-box;
align-content: flex-end;
margin-left: 5%;

}



.dnsep{
  position: absolute;
    width: 50%;
    font-size: 25px;
    top: 46%;
    left: 0;
    margin-left: 5%;
    font-family: "Redaction";
  letter-spacing: 1px;
    text-align: justify;
  }


.esac{
  position: absolute;
  width: 42%;
  font-size: 24px;
  top:80%;
  left: 5%;
  font-family: "Karla";
  text-align: justify;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.694);


}


/* titre */
h2{
  display: inline-block;
position:relative;
  font-size: 200px;
  font-family: "FT88-School" ;
    font-size: 60px;
  
}
h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(2, 114, 103, 1);
  z-index: -1; /* Derrière le texte */
  transition: width 0.4s ease; /* Transition pour l'animation */
}

/* Soulignement */
h2::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgb(165, 235, 222); /* Couleur du soulignement (bleu) */
  transition: width 0.3s ease;
}

/* Classe active pour déclencher l'animation */
.underline-highlight:hover::after {
  width: 100%; /* Ligne de soulignement s’arrête à la fin du mot */
}

.underline-highlight:hover::before {
  width: 100%; /* Bloc de couleur de fond glisse à 100% */
}

.sommaire{
  font-family: "League";
  color: rgba(147, 198, 242, 1);
  font-size: 70px;
break-after: always;
white-space: pre-line;

}
.panel-image{
  display: none;
}

.titre-biblio{
  font-family: "Redaction";
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: xx-large;
  margin-bottom: 2em;
}

.colophon{

  font-family: "Redaction";
  font-size: 38px;
  margin-bottom: 1cm;
  margin-bottom: 0.5em;
  margin-top: 2em;
  margin-left: 6%;


}

.print{

  font-family: "Redaction";
  font-size: 38px;
  margin-bottom: 1cm;

  margin-top: 1em;
  margin-left: 6%;


}
sup{ 
  cursor: pointer;
}

.figure-ref{
  cursor: pointer
}



.conception{

  margin-left: 6%;

  margin-bottom: 1cm;
  margin-top: 0.6cm;
  
  
}

.colophon-bis{

  font-family: "Redaction";
  margin-bottom: 0.6cm;
  margin-top: 0.6cm;
  margin-left: 6%;
  font-size: 38px;

}

a{
color: rgb(0, 92, 52); ;
}


.police{

  margin-left: 6%;
  margin-bottom: 0.2cm;
  
}

.bibliographie{
  z-index: -1000;
}

.merci{
  z-index: -1000;
}

.papier{

  margin-left: 6%;


  margin-bottom: 0.2cm;
  
}

.deux{
  color: white;
  font-size: 12px;
}




.merci{
  font-family: "Redaction";
  margin-bottom: 1em;
  margin-top: 10px;
  margin-left: 6%;
  font-size: 38px;
}


.remerci{
  margin-bottom: 0.3em;
  margin-left: 6%;
  width: 70%;
}


br{
  display: none;
}

li{
  font-family: "PropCourier";
  list-style: none;
  font-size: x-large;
  margin-bottom: 1em;
  

}
h3{

    font-size: 60px;
    margin-top: 0%;
    right: 10%;
  }

  .titre-chapitre{
    font-family:  "PropCourier";
    font-size: 60px;
  }




  .note-container.last-note {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: none; /* Supprime la bordure si nécessaire */
  }