/* conteneur boutons */
:root {
    --btn-color: var(--second-color);
}

.boutons {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-flow: row wrap;
    gap: var(--marge);
}

@media (max-width: 500px) {
    .boutons {
        flex-flow: column wrap;
        justify-content: space-between;
        align-items: stretch;
    }
}


/* placeholder */
::placeholder {
    color: var(--hover);
    color: color-mix(in oklab, var(--btn-color) var(--mix-percent), var(--mix-color));
    opacity: 1;
    transition: opacity var(--hover-delay) var(--cubic-bezier);
}

:focus::placeholder {
    opacity: 0;
}

/* éléments */
button,
.bouton,
input,
.btn_picto {
    background: none;
    font: inherit;
    outline: inherit;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-family: var(--semibold_lucky);
    line-height: 1;
}

.bouton,
.barre_recherche {
    flex: 1;
    display: block;
    text-align: center;
    color: var(--btn-color);
    border: var(--border-width) solid var(--btn-color);
    border-radius: 100vmax;
    transition: all var(--hover-delay) var(--cubic-bezier);
    text-transform: uppercase;
}

/* bouton */
.bouton {
    padding: 6px 10px;
}

.bouton:hover {
    background: var(--btn-color);
    color: var(--blanc);
}

/* barre recherche */
.barre_recherche {
    padding: 0px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.barre_recherche svg {
    margin-left: 6px;
    --icon-color: var(--btn-color);
}

.barre_recherche svg:hover {
    --icon-color: var(--hover);
    --icon-color: color-mix(in oklab, var(--btn-color) var(--mix-percent), var(--mix-color));
}

.barre_recherche__input {
    width: 350px;
    height: 38px;
    padding: 0;
    margin-left: 6px;
    text-align: left;
    cursor: text;
    color: var(--hover);
    color: color-mix(in oklab, var(--btn-color) var(--mix-percent), var(--mix-color));
    transition: width var(--hover-delay) var(--cubic-bezier), color var(--hover-delay) var(--cubic-bezier);
}

.barre_recherche__input:focus {
    color: var(--btn-color);
}

/* erase button */
.erase {
    margin-left: -4px;
    overflow: hidden;
    width: 0;
    height: 0;
    transition: all var(--hover-delay) var(--cubic-bezier), color var(--hover-delay) var(--cubic-bezier);
}

.erase.actif {
    width: 30px;
    height: 30px;
}

.erase:hover svg {
    --btn-color: color-mix(in oklab, var(--second-color) var(--mix-percent), var(--mix-color));
}


/* ensemble btn_picto style */
.btn_picto {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0;
}

/* style picto bouton */
.btn_picto svg {
    margin-right: 6px;
    --icon-color: var(--second-color);
}

.btn_picto:hover svg {
    --icon-color: var(--hover);
    --icon-color: color-mix(in oklab, var(--second-color) var(--mix-percent), var(--mix-color));
}

/* style texte bouton */
.btn_picto:hover button {
    color: var(--hover);
    color: color-mix(in oklab, var(--btn-color) var(--mix-percent), var(--mix-color));
}