/* REVIEW: Barre de recherche */
.barre_recherche{
    border : var(--taille_standard) solid var(--bleu_lmdc);
    border-radius: var(--taille_radius);
    width: 80%;
    max-width: 500px;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: auto;
}
.barre_recherche input{
    width: 100%;
    padding: var(--taille_radius);
    background-color: transparent;
    color: var(--texte_principal);
}
.barre_recherche input, .barre_recherche input:focus, .barre_recherche input:active, .barre_recherche input:hover, .barre_recherche_entete input, .barre_recherche_entete input:focus, .barre_recherche_entete input:active, .barre_recherche_entete input:hover{
    border:none;
    outline: none;
}
.barre_recherche button{
    border:none;
    color: var(--couleur_fond);
    background-color: var(--bleu_lmdc);
    border-radius: 0;
    width: 50px;
    margin: 0;
}
.barre_recherche button:hover{
    color:var(--bleu_profond);
}

/* REVIEW: header */


.barre_recherche_entete{
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


.barre_recherche_entete input{
  border: none;
  width: 0px;
  padding: var(--taille_radius);
  transition: width 0.2s;
}
.barre_recherche_entete button{
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border : var(--taille_standard) solid var(--texte_principal);
}
.barre_recherche_entete.actif button{
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border : none;
}
.barre_recherche_entete.actif{
    border: 1px solid var(--texte_principal);
    border-radius: var(--taille_radius);
}
.barre_recherche_entete.actif input{
    display: block;
  width: 300px;
  border: none;
}
/* REVIEW: fin header */
/* REVIEW: FIN Barre de recherche */

i{
  position: relative;
  left: -50px;
  color: #8233C5;
}