.masthead-80{
  background-size : cover;
  min-height: 80vh;  /*vh c'est vertical height*/
  position: relative;
  color: white;
  background-image: url('../images/accueil_paysage.jpg');
}
.sous-texte-principal{
  font-size: 1.58rem;
  text-shadow: 1px 0 #002346, -1px 0 #002346, 0 1px #002346, 0 -1px #002346,
               1px 1px #002346, -1px -1px #002346, 1px -1px #002346, -1px 1px #002346;

}

.masthead-20{
  background-size : cover;
  min-height: 22vh;  /*vh c'est vertical height*/
  position: relative;
  color: white;
}

h1 {
  font-size : 3.6rem;
  margin-top: 1em;
  margin-bottom: 1em;
  text-shadow: 2px 0 #002346, -2px 0 #002346, 0 2px #002346, 0 -2px #002346,
               1px 1px #002346, -1px -1px #002346, 1px -1px #002346, -1px 1px #002346;

}

.navbar-text{
font-size: 1.2em;
}

.color-overlay{
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  width : 100%;
  height: 100%;

}

.col-750{
  max-width: 750px;
  margin: 0 auto;
}

.col-900{
  max-width: 900px;
  margin: 0 auto;
}

.col-1200{
  max-width: 1200px;
  margin: 0 auto;
}


.darkBG{
  background-color: #002346;
  /* color: rgb(163,198,70); */
  color: white;
}

/* Style de toutes les icones pour que ça soit iniformisé */
.icon-20{
  color: rgb(163,198,70);
  font-size: 20px;
}

.icon-40{
  color: rgb(163,198,70);
  font-size: 40px;
}

.icon-60{
  color: rgb(163,198,70);
  font-size: 60px;
}

.card-principale{
  font-size: 1.5rem;
}

/* Au début ces deux champs sont caché */
 #cheque, #espece{
  display: none;
}


.title-blue:hover{
  color:rgb(25, 58, 119);
}



/* Pour faire en sorte que le texte de la navbar soit  centré quand on est en plein écran mais soit dans son état normal (donc pas centré) quand on est sur des écrans plus petit, en l'occurence à partir du moment ou on a le bouton pour collapse la navbar*/
#justify-content-center-computer-start-phone{
  justify-content: center;
}
.fit-parent-computer-not-phone{
  max-width: fit-content;
}
@media (max-width: 992px){
  #justify-content-center-computer-start-phone{
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
  }
  .fit-parent-computer-not-phone{
    max-width: 100%;
  }
}



@media (max-width: 768px) {
  .masthead-80{
    min-height: 60vh;
    background-image: url('../images/accueil_paysage-768px.jpg');
  }
  h1{
    font-size: calc(1.525rem + 3.3vw);
  }
  .sous-texte-principal{
    font-size: 1.3rem;
  }

  .icon-40{
    color: rgb(163,198,70);
    font-size: 30px;
  }
  
  .icon-60{
    color: rgb(163,198,70);
    font-size: 45px;
  }
  .card-principale{
    font-size: 1.35rem;
  }
  .navbar-text{
    font-size: 1em;
    }
  
    .no-margin-bottom-phone{
      margin-bottom: 5px;
    }
}

@media (max-width: 576px) {

    .masthead-80{
      min-height: 60vh;
    background-image: url('../images/accueil_paysage-576px.jpg');

    }
    h1{
      font-size: calc(1.525rem + 3.3vw);
    }
    .sous-texte-principal{
      font-size: 1rem;
    }

    .icon-40{
      color: rgb(163,198,70);
      font-size: 22px;
    }
    
    .icon-60{
      color: rgb(163,198,70);
      font-size: 35px;
    }
    .card-principale{
      font-size: 1.2rem;
    }
    .navbar-text{
      font-size: 1em;
      }
    
      .no-margin-bottom-phone{
        margin-bottom: 0;

      }
}



/* Drag and Drop */
.box {
  height: 150px;
  /* width: 100px; */
  border: solid 3px #ccc;
  margin: 10px;

  /* align items in the box */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}


.drag-over {
  border: dashed 3px red;
}

.item {
  height: 50px;
  width: 50px;
  background-color: #F0DB4F;

}

.hide {
  display: none;
}