@font-face {
    font-family: Quatrocento;
    src: url(/font/QuattrocentoSans-Regular.ttf);
  }
  @font-face {
    font-family: breakSemiBold;
    src: url(font/Break-SemiBold.ttf);
  }
  @font-face {
    font-family: Amatic;
    src: url(/font/AmaticSC-Bold.ttf);
  }
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
  body {
    background-color: #181822;
    font-family: Quatrocento;
  }
  .titre {
    margin-top: 3%;
    background-image: url(titreFondKraft.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 35vh;
    display: flex;
  }
  .titre p {
    text-decoration: underline;
    text-decoration-style: dashed;
    font-family: breakSemiBold;
    margin: auto;
    text-align: center;
    font-size: 5em;
    color: #941b80;
  }
  .blablaComment,
  .blablaFinComment {
    font-size: 2em;
    width: 75vw;
    margin:5% auto;
    text-align: center;
  }
  .blablaComment p,
  .blablaFinComment p {
    padding-bottom: 2%;
  }

  h1{
    color: orangered;
    margin: 5%;
    font-family: Amatic;
    font-size: 4em;
  }
  .blablaComment p,
  .blablaEtape p, 
  .blablaEchange p,
  .blablaPrepa p,
  .blablaCrea p,
  .blablaFinComment {
    color: whitesmoke;
  }
  .blablaFinComment a{
    font-style: italic;
    color: whitesmoke;
    font-size: 0.7em;
  }
  .blablaEtape {
    text-align: center; 
  }
  .blablaEtape p {
    font-size: 1.5em;
    margin-bottom: 3vh;
  }
  
  .blablaEtapeIMG {
    display: flex; 
    width: 85vw;
    margin: auto;
  }
  
  .image-caption {
    text-align: center; 
    margin: 10px; 
  }
  
  .image-caption img {
    width: 100%; 
    height: auto; 
  }
  
  .image-caption p {
    font-size: 1em;
    color: whitesmoke;
    margin-top: 2vh; 
  }



.blablaEchange, .blablaCrea  {
  display: flex;
  width: 75vw;
  margin-left: 5%;
  margin-top: 5%;
  align-items: center;
}


.blablaPrepa {
  display: flex;
  width: 75vw;
  margin-left: auto;
  margin-right: 5%;
  margin-top: 5%;
  align-items: center;
  justify-content: flex-end;
}


.blablaEchange img, .blablaPrepa img, .blablaCrea img {
  width: auto;
  height: 75vh;
}

.blablaEchange h2,
.blablaPrepa h2,
.blablaCrea h2 {
  color: orangered;
  font-family: Amatic;
  font-size: 3em;
}

.Echange, .Crea {
  margin-left: 3%;
}
.Prepa {
  margin-left: auto;
  margin-right: 3%;
}
.Echange p, .Prepa p, .Crea p{
 padding: 2%;
 font-size: 1.2em;
 text-align: justify;
 line-height: 1.3;
}
.horloge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.horloge p {
  margin-left: 10%;
  font-family: Amatic;
  color: #00A4B6;
  font-size: 3em;
  text-align: center;
  white-space: nowrap;
}
.horloge img{
  width: auto;
  height: 10vh;
}