.H_F {
  background-color: #820D48;
  max-height: 19vh;
}

body {
  margin: 0;
  background:linear-gradient(#820D48, #E1C3FE);
  background-repeat: no-repeat;
  height: 100vh;
  user-select: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.errordiv {
  grid-row: 5;
  grid-column: 1/12;
}

.error {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

.error404 {
  grid-row: 6;
  font-size: 20px;
}

/*-------------------------------------------- Grilles ----------------------------------------*/

#MainGrid {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 12vh ;
}

#SecondaryGrid {
  display:grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(20, 4.5vh);
  justify-items: center;    
  padding-left: 25px;
  padding-right: 25px;
}

.headerPosition {
  grid-column: 1;
  grid-row: 1;
}

.calquesPosition {
  grid-column: 1/13;
  grid-row: 5/19;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: center;
  overflow: overlay;
  height: 60vh;
  overflow-y: scroll;
  scrollbar-color: #820D4800 #E1C3FE00;
  width: 100%;
}

.calquesPosition::-webkit-scrollbar {
  width: 10px;
}

.calquesPosition::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 50px;
}

.calquesPosition::-webkit-scrollbar-thumb:vertical {
  background-color: #6d0a3b;
  border-radius: 50px;
}

.calquesPosition::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #E5DBFF;
  border-radius: 50px;
}

.calquesPosition::-webkit-scrollbar:hover{
  background-color: #D491D0;
  border-radius: 50px;
}
/*-------------------------------------------- Grilles ----------------------------------------*/
/* ------------------------------------- Header -------------------------------------*/

a {
  text-decoration: none;
  color: #E1C3FE;
}

.header { 
  position: fixed;
  width: 100vw;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 0px 15px 10px -15px #111;
}

.textHeader {
  display: flex;
  align-items: center;
}

.textHeader h1 {
  font-size: 5vh;
  font-size: 5vh;
  width: 100vw;
}

.textHeader img {
  width: 110px;
  margin: 10px;
}
/* ------------------------------------- /Header -------------------------------------*/
/*---------------------------------- Calques display -------------------------------------*/

.sct2 {
      display: none;
      grid-column: 1/13;
      /* justify-content: inherit; */
}

.sct3 {
      display: none;
}

.sct4 {
      display: none;
}
/*--------------------------------- /Calques display -------------------------------------*/
/* ------------------------------------ Buttons ------------------------------------*/

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30vw;
  width: 30vw;
  height: 6vh;
  border: none;
  border-radius: 50px;
  margin: 30px;
  font-size: 20px;
  color: #E5DBFF;
  text-shadow: 2px 2px 2px #000;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #900C4E;
}

.btn:hover {
  background-color: #E5DBFF;
  color: #900C4E;
  text-shadow: 2px 2px 2px rgb(192, 155, 191);
  cursor: pointer;
  box-shadow: 5px 5px 5px #302b3568;
}
/* ------------------------------------ /Buttons ------------------------------------*/
/* ------------------------------------- Bar de recherche -------------------------------------*/

.bar {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input {
  width: 30vw;
  height: 5vh;
  border: none;
  border-radius: 50px;
  padding-left: 15px;
  font-size: 23px;
  background-color: #E5DBFF;
  box-shadow: 0px 15px 10px -15px #111;
}

.loupe {
  max-width: 25px;
  margin-left: -45px;
}

#result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 31vw;
  max-height: 25vh;
  font-size: 22px;
  color: #E5DBFF;
  background-color: #820d484e;
  border-radius: 30px;
  overflow: overlay;
  overflow-y: scroll;
  scrollbar-color: #820D48 #E1C3FE;
}

#result::-webkit-scrollbar {
  width: 5px;
}

#result::-webkit-scrollbar-track-piece {
  background:  transparent;
}

#result::-webkit-scrollbar-thumb:vertical {
  background-color: #820D48;
  border-left: 2px solid  #820D48; 
  border-right: 2px solid  #820D48; 
  border-radius: 50px;
}

#result::-webkit-scrollbar-thumb:vertical:hover{
  background-color: #E1C3FE;
  border-left: 2px solid  #E1C3FE; 
  border-right: 2px solid  #E1C3FE; 
}

#result div{
  margin-top: 10px;
  cursor: pointer;
  text-align: center;
}

#result div:hover {
  color: #5c0932;
}

input::placeholder {
  font-size: 15px;
}

.barre {
  display: none;
  justify-items: center;
  justify-items: center;
}

/* ------------------------------------- /Bar de recherche -------------------------------------*/
/* ------------------------------------- Affichage recherche par mot -------------------------------------*/

.affichage_M {
  grid-column: 1/13;
  grid-row: 5/21;
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: repeat(10,1fr);
  overflow: overlay;
  overflow-y: scroll;
  scrollbar-color: #820D48 #E1C3FE;
  width: 80%;
}

.affichage_M::-webkit-scrollbar {
  width: 5px;
}

.affichage_M::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 50px;
}

.affichage_M::-webkit-scrollbar-thumb:vertical {
  background-color: #6d0a3b;
  border-radius: 50px;
}

.affichage_M::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #E5DBFF;
  border-radius: 50px;
}

.affichage_M::-webkit-scrollbar:hover{
  background-color: #D491D0;
  border-radius: 50px;
}

.affichage_M_vide {
  grid-column: 1/13;
  grid-row: 5/21;
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: repeat(10,1fr);
  overflow: overlay;
  overflow-y: scroll;
  scrollbar-color: #820D48 #E1C3FE;
  width: 80%;
}

.affichage_M_vide::-webkit-scrollbar {
  width: 5px;
}

.affichage_M_vide::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 50px;
}

.affichage_M_vide::-webkit-scrollbar-thumb:vertical {
  background-color: #6d0a3b;
  border-radius: 50px;
}

.affichage_M_vide::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #E5DBFF;
  border-radius: 50px;
}

.affichage_M_vide::-webkit-scrollbar:hover{
  background-color: #D491D0;
  border-radius: 50px;
}

.affichContext {
  grid-row: 1;
  grid-column: 1/14;
  color: #E1C3FE;
  font-size: 30px;
  font-weight: bold;
}

.Fr {
  grid-column: 2/6;
  font-size: 30px;
  color: #E1C3FE;
  border-bottom: 3px solid #E1C3FE;
  padding-bottom: 25px;
  margin-top: 5vh;
  }

.Eng {
  grid-column: 3/6;
  font-size: 30px;
  color: #6d0a3b;
  display: flex;
  justify-content: right;
  margin: 0;

}

.pasDEresultat {
  color: #E5DBFF;
  font-size: 30px;
  grid-column: 1/13;
  grid-row: 2;
  text-align: center;
}

.i {
  grid-column: 8/12;
  grid-row: 1/8;
  display: grid;
  justify-content: center;
  align-items: center;
  /* margin-top: 18vh;
  margin-bottom: -30vh; */
}

.img_rech_mot {
  max-width: 30vw;
  max-height: 35vh;
  border-radius: 50px;
  box-shadow: 0px 0px 12px 1px #351022;
}



.affichContext_vide{
  grid-column: 1/13;
  color: #E1C3FE;
  font-size: 30px;
  font-weight: bold;
}

.Fr_vide {
  grid-column: 3/11;
  font-size: 30px;
  color: #E1C3FE;
  border-bottom: 3px solid #E1C3FE;
  padding-bottom: 25px;
  margin-top: 5vh;
}

.Eng_vide {
  grid-column: 4/11;
  font-size: 30px;
  color: #6d0a3b;
  display: flex;
  justify-content: right;
  margin: 0;
}

.img_rech_mot_vide {
  display: none;
}

/* ------------------------------------- /Affichage recherche par mot -------------------------------------*/
/* ------------------------------------- Affichage recherche par theme -------------------------------------*/

.affichage {
  grid-column: 3/10;
  grid-row: 4/20;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(13,1fr);
  grid-template-columns: repeat(13,1fr);
  grid-template-rows: repeat(10,1fr);
  overflow-y: scroll;
  scrollbar-color: #820D48 #E1C3FE;
  width: 100%;
}

.affichage::-webkit-scrollbar {
  width: 5px;
}

.affichage::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 50px;
}

.affichage::-webkit-scrollbar-thumb:vertical {
  background-color: #6d0a3b;
  border-radius: 50px;
}

.affichage::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #E5DBFF;
  border-radius: 50px;
}

.affichage::-webkit-scrollbar:hover{
  background-color: #D491D0;
  border-radius: 50px;
}

.Fr_Theme {
  grid-column: 2/13;
  margin-top: 15vh;
  font-size: 30px;
  color: #E1C3FE;
  border-bottom: 3px solid #E1C3FE;
  padding-bottom: 10px;
}

.Eng_Theme {
  grid-column: 3/13;
  font-size: 30px;
  color: #6d0a3b;
  display: flex;
  align-items: flex-end;
  justify-content: right;
}
/* ------------------------------------- /Affichage recherche par theme -------------------------------------*/
/* ------------------------------------- Affichage recherche par image -------------------------------------*/

.affichage_I {
  grid-column: 1/13;
  grid-row: 5/20;
  display: grid;
  grid-template-columns: repeat(10,1fr);
  overflow: overlay;
  overflow-y: scroll;
  width: 100%;
  scrollbar-color: #820D48 #E1C3FE;
  justify-items: center;
}

.affichage_I::-webkit-scrollbar {
  width: 5px;
}

.affichage_I::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 50px;
}

.affichage_I::-webkit-scrollbar-thumb:vertical {
  background-color: #6d0a3b;
  border-radius: 50px;
}

.affichage_I::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #E5DBFF;
  border-radius: 50px;
}

.affichage_I::-webkit-scrollbar:hover{
  background-color: #D491D0;
  border-left: 1px solid  #6d0a3b; 
  border-right: 1px solid  #6d0a3b; 
  border-radius: 50px;
}

.rech_img {
  grid-column: 4/8;
  cursor: pointer;
}

.image {
  width: 400px;
  margin: 30px;
  border-radius: 30px;
}

.image:hover {
  box-shadow: 0px 0px 20px 3px #350e21;
}
/* ------------------------------------- /Affichage recherche par image -------------------------------------*/
/* ------------------------------------- Page mention legale -------------------------------------*/

.noms {
  text-align: center;
  font-size: 30px;
  color: #E1C3FE;
  grid-row: 5;
  grid-column: 1/12;
}
/* ------------------------------------- /Page mention legale -------------------------------------*/
/* -------------------------------------- Footer -------------------------------------*/

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  box-shadow: 0px 9px 20px 10px #543372;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div_vide {
  height: 100px;
}

.mention_legale {
  display: flex;
  justify-content: center;
  /* margin-top: 50px; */
  /* margin-top: 50px; */
  font-size: 25px;
  cursor: pointer;
}
/* ------------------------------------- /Footer -------------------------------------*/
/* ------------------------------------- media queries -------------------------------------*/

@media screen and (max-width: 850px), (max-height: 800px) {
  #MainGrid {
      grid-template-rows: 10vh;
  }

  .btn {
    width: 52vw;
    height: 6vh;
    font-size: 15px;
  }

  .textHeader h1 {
    font-size: 30px;
    font-size: 30px;
  }

  .textHeader img {
    width: 90px;
  }  

  .calquesPosition {
    height: 60vh;
  }  

  .calquesPosition {
    height: 60vh;
  }

  .input {
    width: 60vw;
  }

  #result {
    width: 62vw;
    font-size: 18px;
  }
  
  .affichContext {
    grid-column: 1/11;
    /* font-size: 20px; */
  }

  .i {
    margin-top: 0;
    margin-bottom: 0;
    grid-column: 2/12;
    grid-row: 7;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .img_rech_mot {
    max-width: 45vw;
    max-height: 25vh;
    border-radius: 30px;
  }

  /* .textHeader img {
    width: 7.5vw;
    margin-top: 8px;
  } */

  
  .Fr {
    /* font-size: 20px; */
    grid-column: 3/11;
  }

  .Eng {
    /* font-size: 20px; */
    grid-column: 3/11;
  }

  .affichage {
    width: 95%;
  }

  .Fr_Theme {
    font-size: 18px;
    grid-column: 3/11;
  }

  .Eng_Theme {
    font-size: 18px;
    grid-column: 3/11;
  }

  .rech_img {
    grid-column: 1/11;
  }

  .image {
    width: 250px;
    margin: 30px;
  }

  .footer{
    height: 70px;
  }

  .bar {
    position: unset;
  }

  .affichage_M_vide {
    grid-row: 6/20;
  }

  /* .affichContext_vide {
    font-size: 20px;
    margin-bottom: 30px;
  } */

  .Fr_vide {
    font-size: 22px;
    grid-column: 2/13;
  }
  
  .Eng_vide {
    font-size: 22px;
    grid-column: 3/13;
  }
}

@media screen and (max-width: 500px) {
  #SecondaryGrid {   
    padding-left: 0px;
    padding-right: 0px;
  }

  .affichContext {
    font-size: 20px;
  }
  
  .Fr {
    font-size: 20px;
    grid-column: 2/12;
    margin-top: 0;
    padding-bottom: 5px;
    margin: 5px;
  }

  .Eng {
    font-size: 20px;
    grid-column: 3/12;
  }

  .img_rech_mot{
    max-width: 65vw;
    max-height: 35vh;
  }

  .Fr_Theme {
    grid-column: 2/13;
  }

  .Eng_Theme {
    grid-column: 3/13;
  }

  .affichage_M_vide {
    grid-column: 1/13;
    grid-row: 7/19;
  }

  .affichContext_vide {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .Fr_vide {
    font-size: 18px;
    padding-bottom: 10px;
  }
  
  .Eng_vide {
    font-size: 18px;
  }
}