.btn_carac{
    width: calc(92px * var(--scale));
    height: calc(92px * var(--scale));
    border: calc(3px * var(--scale)) solid rgba(78, 47, 29, 0.78);
    border-radius: calc(22px * var(--scale));

    font-size: calc(3.2em * var(--scale));
    font-weight: bold;

    cursor: pointer;
    padding: 0;

    color: rgba(47, 26, 16, 0.88);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;

    background: linear-gradient(to bottom, rgba(247, 226, 181, 0.72), rgba(215, 163, 93, 0.72));

    box-shadow:
        inset 0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.35),
        inset 0 calc(-4px * var(--scale)) 0 rgba(90,50,20,0.12),
        0 calc(6px * var(--scale)) calc(14px * var(--scale)) rgba(0,0,0,0.18);

    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}

.btn_carac:hover{
    transform: translateY(calc(-2px * var(--scale))) scale(1.03);
    filter: brightness(1.02);

    box-shadow:
        inset 0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.35),
        inset 0 calc(-4px * var(--scale)) 0 rgba(90,50,20,0.12),
        0 calc(8px * var(--scale)) calc(16px * var(--scale)) rgba(0,0,0,0.22);
}

.btn_carac:active{
    transform: translateY(calc(1px * var(--scale))) scale(0.985);

    box-shadow:
        inset 0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.22),
        inset 0 calc(-2px * var(--scale)) 0 rgba(90,50,20,0.10),
        0 calc(3px * var(--scale)) calc(8px * var(--scale)) rgba(0,0,0,0.16);
}

.btn_carac_plus{
    background: linear-gradient(to bottom, rgba(248, 237, 184, 0.68), rgba(217, 178, 77, 0.68));
}

.btn_carac_moins{
    background: linear-gradient(to bottom, rgba(241, 208, 194, 0.62), rgba(207, 142, 114, 0.62));
}

.btn_carac_sep{
    font-size: calc(2.3em * var(--scale));
    font-weight: bold;
    color: rgba(70, 48, 34, 0.55);
    line-height: 1;

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

    margin: 0 calc(0.2em * var(--scale));
}

/* =========================
   MOBILE
========================= */

@media (max-width:700px){

    .btn_carac{
        width: calc(88px * var(--scale));
        height: calc(88px * var(--scale));

        font-size: calc(3.4em * var(--scale)); /* plus lisible */
        border-radius: calc(20px * var(--scale));
    }

    .btn_carac_sep{
        font-size: calc(2.4em * var(--scale));
    }

}