@font-face {
  font-family: 'times';
 src: url('Times New Roman.ttf') format('truetype');
}
@font-face {
  font-family: 'amielight';
 src: url('Amiamie-Light.otf') format('truetype');
}
@font-face {
  font-family: 'amie';
 src: url('Amiamie-Regular.otf') format('truetype');
}
body{
     margin: 0;
    padding: 0;
   font-family: amie ;
    background-color: white;
       font-size: 20px;
}

 #bloc, #bloc2, #bloc3 {
      display: none; /* Les blocs sont cachés par défaut */
      padding: 0px;
      background-color: white;
      border: 0px solid #ccc;
      margin-top: 20px;
    }
    #bloc2 {
      background-color: white; /* Une couleur différente pour distinguer les blocs */
    }
   #bloc3 {
      background-color: white; /* Une couleur différente pour distinguer les blocs */
    }

.surligne{ /* surlignage */ 
background-color: black;
color:transparent;
animation: blink 1s infinite;
}

.blink { /* surlignage clignote */ 
  animation: blink 1.5s infinite;
}
@keyframes blink { /* surlignage clignote */ 
  0% { background-color: black; }
  50% { background-color: transparent; } 
  100% { background-color: black; }
}
.mon-element:hover { /* enlève l'effet au survol */ 
background-color: white;
color:white;
}

a{ /* style lien */ 
text-decoration-color: black;
color: black;
 text-decoration-thickness: 2px;}

a:hover { /* style lien au survol */ 
  text-decoration-color: white;
}

img {
  max-width: 125px;
 height: auto;
}

.container-0{ /* conteneur page entière */ 
  display: flex;
   flex-direction: row;
  justify-content: space-between ;
  color: black;
    background-color: white;
      height: 1000px;
  }


.header {
     display: flex;
     width:  100%;
       flex-direction: row;
  position: fixed;
    justify-content: space-between;
  height: 100px;
  background-color: transparent;
  color: black;
}

.element-header{
    height: fitcontent;
 width: 30%;
  background-color: transparent;
  color: black;

}

.container-01{ /* bloc gauche */ 
    width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
  color: black;
    background-color: white;
      height: 500px;
  }

  .element-01{ /* element bloc gauche */ 
    width: 100%;
    margin-left: 100px;
  background-color: white;
  color: black;
      height: 200px;
  }

  .container-02{ /* bloc droite */ 
    margin-top: 150px;
     width: 50%;
     padding-right: 3%;
  justify-content: space-between ;
  color: black;
    background-color: white;
      height: 500px;
  }


/* responsive responsive */ /* responsive responsive */ /* responsive responsive */
/* responsive responsive */ /* responsive responsive */ /* responsive responsive */

@media screen and (max-width : 800px) {
    body{
     margin: 0;
    padding: 0;
   font-family: amie ;
    background-color: white;
       font-size: 20px;
}

img {
  max-width: 165px;
 height: auto;
}

.container-0{ /* conteneur page entière */ 
    margin: 0;
    padding: 0;
  display: flex;
   flex-direction: column;
 justify-content: flex-start ;
  color: black;
    background-color: white;
      height: auto;
  }

.container-01{ /* bloc haut */ 
    width: 75%;
      display: flex;
      flex-direction: column;
 justify-content: flex-end ;
  color: black;
    background-color: white;
      height: 90px;
  }

  .element-01{ /* element bloc haut */ 
    width: 100%;
    margin-left: 45px;
  background-color: white;
  color: black;
      height: 45px;
  }

  .container-02{ /* bloc bas */ 
    margin-top: 185px;
     width: 75%;
     margin-left: 45px;
  justify-content: flex-start ;
  color: black;
    background-color: white;
      height: 300px;
  }

}