/*----- BOUTONS PRECEDENT SUIVANT -----*/

.box_btns_prev_next {
    width: 100%;
    height: var(--height-box-btn);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.btn_prev_bma,
.btn_next_bma {
    width: 48px;
    height: 48px;

    background-color: #ffe79f;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;
}

.btn_prev_bma_desactive,
.btn_next_bma_desactive {
    background-color: #dfdfdf;
    cursor: not-allowed;
}

.btn_prev_bma:hover,
.btn_next_bma:hover {
    background-color: var(--col-gold-1);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.btn_prev_bma_desactive:hover,
.btn_next_bma_desactive:hover {
    background-color: #dfdfdf;
    box-shadow: 0 0 0 var(--col-black-1);
}

.icon_prev_bma,
.icon_next_bma {
    width: 24px;
    height: 24px;
    stroke: var(--col-gold-1);
    transition: stroke 0.3s ease;
}

.icon_prev_bma {
    transform: rotate(-90deg) translateY(-10%);
}

.icon_next_bma {
    transform: rotate(90deg) translateY(-10%);
}

.box_btns_prev_next>button:hover path {
    stroke: var(--col-black-1);
    fill: var(--col-black-1);
}

.box_btns_prev_next>.btn_next_bma_desactive:hover path,
.box_btns_prev_next>.btn_next_bma_desactive path,
.box_btns_prev_next>.btn_prev_bma_desactive:hover path,
.box_btns_prev_next>.btn_prev_bma_desactive path {
    stroke: rgb(99, 99, 99);
    fill: rgb(99, 99, 99);
}