/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*************************************
  structure de la barre de recherche
**************************************/

.search-content {
    z-index: 1;
}
.search-content .search-form {
    display: flex;
}
.search-content .search-form .search-field {
    flex:1;
    padding: 10px;
    -webkit-transition: color, opacity;
    transition: color, opacity;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    border: 0;
    border-bottom: 2px solid var(--white);
    color: var(--white);
    width: 100%;
    font-size: 4em;
    background: none;
}
.search-content .search-form input::placeholder {
    color: var(--white); /* Change la couleur du placeholder en blanc */
    opacity: 1; /* Assurez-vous que l'opacité est à 1 pour que le texte soit bien visible */
} 
.search-content .search-form .search-field:focus-visible {
    border:none;
}
.search-content .search-form .search-submit {
    display: none;
}

#search-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Assurez-vous qu'il est au-dessus du contenu */
}

.search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
}

#close-search {
    position: fixed; /* Fixe la croix en haut de la page */
    top: 35px; /* Ajustez selon vos besoins */
    right: 20px; /* Ajustez selon vos besoins */
    font-size: 70px; /* Taille de la croix */
    color: var(--white); /* Couleur de la croix */
    z-index: 10000; /* S'assurer qu'elle est au-dessus de tout */
    cursor: pointer; /* Indique que c'est cliquable */
}