.topnav { 
    overflow: hidden; /*Tous les éléments dépassant du menu (en hauteur) sont cachés*/
    background-color: #333; /*Couleur de fond du menu*/
    position: fixed; /*Le menu suit le scroll de l'utilisateur*/
    top: 0; /*Le menu se trouve toujours au plus haut de la page*/
    width: 100%; /*Prend toute la largeur*/
    z-index: 10; /*Le menu est au premier plan*/
    font-weight: bold; /*Les éléments du menu sont en gras*/
    font-size: 22px; /*Taille police menu*/
  }
  
  .topnav a {
      float: left; /*Aligne tous les éléments du menu à gauche*/
      display: block; 
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px; /*Padding des liens du menu*/
      text-decoration: none;
  }
  .topnav a:hover { 
    background-color: lightgrey; /*Couleur de fond des éléments du menu lors du survol de la souris*/ 
    color: black; 
  }
  
  
  /*Menu Horizontal*/
  .menu{ 
    margin-top: -34px; /*Compense le décalage du menu au moment du basculement au responsive */
    font-weight: bold; /*Les éléments du menu sont en gras*/
    font-size: 22px; /*Taille police menu*/
  }
  
  
  @media screen and (min-width: 1050px){
    .topnav{ height: 60px;} /*Enlève le décalage entre la couleur du hover et le fond du menu */
    .topnav .icon { display: none; } /*L'icône hamburger est invisible*/
    .logoFull{display: block;}
    .logoResp{display: none;}
  }
  
  /*Responsive (Menu Vertical) */
  @media screen and (max-width: 1050px) {
    .topnav a:not(:first-child){ display: none;} /*Cache tous les liens présent dans le div topnav ==> Cache tous les liens sauf le logo*/
    .topnav a.icon { float: right; display: block; margin-top: 10px;} /*Affichage à droite du menu de l'icône hamburger */
    .topnav a.icon:hover {background-color: #333; }
    .topnav{align-items: center;}
  
    /* Les 3 lignes ci-dessous sont liées au changement de classe en JavaScript */
    .topnav.responsive { position: fixed; }
    .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
    .topnav.responsive a { float: none; display: block; text-align: left; }
  
    .logoFull{display: none;}
    .logoResp{display: block;}
    .logoResp:hover{background-color: lightgray;}
  }
  
  .formSearch{
    display: flex;
    margin: 0px; 
    margin-top: 4px;
  }
  /*Style du champ et du bouton "Rechercher"*/
  .inputSearch{    
    /* Reset du css de base de l'input */
    border:none;
    background-image:none;
    /* background-color:transparent; */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  
    max-width: 10em;
    max-height: 200px;
    width: 10em;
    padding: 6px;
    margin: 16px 0;
    font-size: 16px;
    border: 1px solid #9d9d9d;
  }
  .inputSearch::placeholder{
    color: #474747;
  }
  .inputSearch:focus{
    border: 1px solid transparent;
    outline: none;
    box-shadow: 0 0 4px 0 #3898d4;
  }
  /* .btnSearch {padding: 5px; width: 50px; font-size: 20px;} */
  .btnSearch{
    /* Reset du CSS de base du bouton */
    border: none;
    margin: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
  
    cursor: pointer;
    padding: 5px;
    color: #3898d4;
    font-size: 20px;
  }
  .floatRight{ 
    width: 280px;  
    position: absolute; 
    margin-top: 70px; 
    right: 0;
  }