/* générateur de css pour boutons bootstrap => https://blog.koalite.com/bbg/ */


:root {
    /* couleurs des textes des boutons */
    --txt-light: #FFFFFF;
    --txt-dark: #000000;
    /* couleurs du bonton saffran1 */
    --s1-bg: #EC6C4D;
    --s1-bg-h: #F77E60;
    --s1-bg-f: #F77E60;
    --s1-bg-a: #E35936;
    --s1-bg-d: #EC6C4D;
    /* couleurs du bonton saffran2 */
    --s2-bg: #3D5980;
    --s2-bg-h: #4D6F9E;
    --s2-bg-f: #4D6F9E;
    --s2-bg-a: #274269;
    --s2-bg-d: #3D5980;
}


/* Bouton primaire (btn-saffran1)
-------------------------------------------------- */
/* default */
.btn-saffran1 {
    color: var(--txt-light);
    background-color: var(--s1-bg);
    border-color: var(--s1-bg);
}

/* icons color */
.btn-saffran1 i {
    color: var(--txt-light);
}

/* focus */
.btn-saffran1:focus,
.btn-saffran1.focus {
    color: var(--txt-light);
    background-color: var(--s1-bg-f);
    border-color: var(--s1-bg-f);
}

/* hover */
.btn-saffran1:hover {
    color: var(--txt-light);
    background-color: var(--s1-bg-h);
    border-color: var(--s1-bg-h);
}

/* active */
.btn-saffran1:active,
.btn-saffran1.active,
.open > .dropdown-toggle.btn-saffran1 {
    color: var(--txt-light);
    background-color: var(--s1-bg-a);
    background-image: none;
    border-color: var(--s1-bg-a);
}

/* disabled */
.btn-saffran1:disabled,
.btn-saffran1.disabled,
.open > .dropdown-toggle.btn-saffran1 {
    color: var(--txt-light);
    background-color: var(--s1-bg-d);
    background-image: none;
    border-color: var(--s1-bg-d);
}

/* active and hovered */
.btn-saffran1:active:hover,
.btn-saffran1.active:hover,
.open > .dropdown-toggle.btn-saffran1:hover {
    color: var(--txt-light);
    background-color: var(--s1-bg-a);
    border-color: var(--s1-bg-a);
}

/* active and focus */
.btn-saffran1:active:focus,
.btn-saffran1.active:focus,
.open > .dropdown-toggle.btn-saffran1:focus,
.btn-saffran1:active.focus,
.btn-saffran1.active.focus,
.open > .dropdown-toggle.btn-saffran1.focus {
    color: var(--txt-light);
    background-color: var(--s1-bg-a);
    border-color: var(--s1-bg-a);
}

/* disabled and (focus or hover) */
.btn-saffran1.disabled:hover,
.btn-saffran1[disabled]:hover,
fieldset[disabled] .btn-saffran1:hover,
.btn-saffran1.disabled:focus,
.btn-saffran1[disabled]:focus,
fieldset[disabled] .btn-saffran1:focus,
.btn-saffran1.disabled.focus,
.btn-saffran1[disabled].focus,
fieldset[disabled] .btn-saffran1.focus {
    color: var(--txt-light);
    background-color: var(--s1-bg);
    border-color: var(--s1-bg);
}

/* badge */
.btn-saffran1 .badge {
    color: var(--txt-dark);
    background-color: #fff;
}


/* Bouton secondaire (btn-saffran2)
-------------------------------------------------- */
/* default */
.btn-saffran2 {
    color: var(--txt-light);
    background-color: var(--s2-bg);
    border-color: var(--s2-bg);
}

/* icons color */
.btn-saffran2 i {
    color: var(--txt-light);
}

/* focus */
.btn-saffran2:focus,
.btn-saffran2.focus {
    color: var(--txt-light);
    background-color: var(--s2-bg-f);
    border-color: var(--s2-bg-f);
}

/* hover */
.btn-saffran2:hover {
    color: var(--txt-light);
    background-color: var(--s2-bg-h);
    border-color: var(--s2-bg-h);
}

/* active */
.btn-saffran2:active,
.btn-saffran2.active,
.open > .dropdown-toggle.btn-saffran2 {
    color: var(--txt-light);
    background-color: var(--s2-bg-a);
    background-image: none;
    border-color: var(--s2-bg-a);
}

/* disabled */
.btn-saffran2:disabled,
.btn-saffran2.disabled,
.open > .dropdown-toggle.btn-saffran2 {
    color: var(--txt-light);
    background-color: var(--s2-bg-d);
    background-image: none;
    border-color: var(--s2-bg-d);
}

/* active and hovered */
.btn-saffran2:active:hover,
.btn-saffran2.active:hover,
.open > .dropdown-toggle.btn-saffran2:hover {
    color: var(--txt-light);
    background-color: var(--s2-bg-a);
    border-color: var(--s2-bg-a);
}

/* active and focus */
.btn-saffran2:active:focus,
.btn-saffran2.active:focus,
.open > .dropdown-toggle.btn-saffran2:focus,
.btn-saffran2:active.focus,
.btn-saffran2.active.focus,
.open > .dropdown-toggle.btn-saffran2.focus {
    color: var(--txt-light);
    background-color: var(--s2-bg-a);
    border-color: var(--s2-bg-a);
}

/* disabled and (focus or hover) */
.btn-saffran2.disabled:hover,
.btn-saffran2[disabled]:hover,
fieldset[disabled] .btn-saffran2:hover,
.btn-saffran2.disabled:focus,
.btn-saffran2[disabled]:focus,
fieldset[disabled] .btn-saffran2:focus,
.btn-saffran2.disabled.focus,
.btn-saffran2[disabled].focus,
fieldset[disabled] .btn-saffran2.focus {
    color: var(--txt-dark);
    background-color: #000;
    border-color: var(--s2-bg);
}

/* badge */
.btn-saffran2 .badge {
    color: var(--txt-dark);
    background-color: #fff;
}