/*mobile first*/
.mars-bouton {
    appearance: none;
    border: none;
    border-radius: var(--size_4px);
    /*Largeur full jusqu'à 434px*/
    width: 100%;
    max-width: var(--size_434px);
    padding: var(--size_16px);
    font-size: var(--size_14px);
    font-weight: 700;
    height: var(--size_50px);
    line-height: var(--size_14px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--size_8px);
    text-decoration: none;
}

.mars-bouton > .mars-icon {
    font-size: var(--size_20px);
}

.mars-bouton:hover, .mars-bouton:focus, a.mars-bouton:hover, a.mars-bouton:focus  {
    text-decoration: none;
}
.mars-bouton:focus, a.mars-bouton:focus {
    outline-color: var(--border-action-focused);
    outline-offset: var(--size_2px);
}

.mars-bouton_primary,
.mars-bouton-forced_primaire .mars-bouton_secondary,
.mars-bouton-forced_primaire .mars-bouton_tertiary,
.mars-bouton-forced_primaire .mars-bouton_minor {
    background-color: var(--background-button-accent);
    color: var(--text-action-with-button-background);
    border: none;
}
.mars-bouton_primary:hover, a.mars-bouton_primary:hover,
.mars-bouton-forced_primaire .mars-bouton_secondary:hover, .mars-bouton-forced_primaire a.mars-bouton_secondary:hover,
.mars-bouton-forced_primaire .mars-bouton_tertiary:hover, .mars-bouton-forced_primaire a.mars-bouton_tertiary:hover,
.mars-bouton-forced_primaire .mars-bouton_minor:hover, .mars-bouton-forced_primaire a.mars-bouton_minor:hover {
    background-color: var(--background-button-accent-hovered);
    color: var(--text-action-with-button-background);
}
.mars-bouton_primary:focus, a.mars-bouton_primary:focus,
.mars-bouton-forced_primaire .mars-bouton_secondary:focus, .mars-bouton-forced_primaire a.mars-bouton_secondary:focus,
.mars-bouton-forced_primaire .mars-bouton_tertiary:focus, .mars-bouton-forced_primaire a.mars-bouton_tertiary:focus,
.mars-bouton-forced_primaire .mars-bouton_minor:focus, .mars-bouton-forced_primaire a.mars-bouton_minor:focus {
    background-color: var(--background-button-accent-focused);
    color: var(--text-action-with-button-background);
}
.mars-bouton_primary:disabled, .mars-bouton_primary[disabled],
.mars-bouton-forced_primaire .mars-bouton_secondary:disabled, .mars-bouton-forced_primaire .mars-bouton_secondary[disabled],
.mars-bouton-forced_primaire .mars-bouton_tertiary:disabled, .mars-bouton-forced_primaire .mars-bouton_tertiary[disabled],
.mars-bouton-forced_primaire .mars-bouton_minor:disabled, .mars-bouton-forced_primaire .mars-bouton_minor[disabled] {
    background-color: var(--background-button-disabled);
}

.mars-bouton_secondary,
.mars-bouton-forced_secondaire .mars-bouton_primary,
.mars-bouton-forced_secondaire .mars-bouton_tertiary,
.mars-bouton-forced_secondaire .mars-bouton_minor {
    background-color: var(--background-button);
    color: var(--text-action-with-button-background);
}
.mars-bouton_secondary:hover, a.mars-bouton_secondary:hover,
.mars-bouton-forced_secondaire .mars-bouton_primary:hover, .mars-bouton-forced_secondaire a.mars-bouton_primary:hover,
.mars-bouton-forced_secondaire .mars-bouton_tertiary:hover, .mars-bouton-forced_secondaire a.mars-bouton_tertiary:hover,
.mars-bouton-forced_secondaire .mars-bouton_minor:hover, .mars-bouton-forced_secondaire a.mars-bouton_minor:hover {
    background-color: var(--background-button-hovered);
    color: var(--text-action-with-button-background);
}
.mars-bouton_secondary:focus, a.mars-bouton_secondary:focus,
.mars-bouton-forced_secondaire .mars-bouton_primary:focus, .mars-bouton-forced_secondaire a.mars-bouton_primary:focus,
.mars-bouton-forced_secondaire .mars-bouton_tertiary:focus, .mars-bouton-forced_secondaire a.mars-bouton_tertiary:focus,
.mars-bouton-forced_secondaire .mars-bouton_minor:focus, .mars-bouton-forced_secondaire a.mars-bouton_minor:focus {
    background-color: var(--background-button-focused);
    color: var(--text-action-with-button-background);
}
.mars-bouton_secondary:disabled, .mars-bouton_secondary[disabled],
.mars-bouton-forced_secondaire .mars-bouton_primary:disabled, .mars-bouton-forced_secondaire .mars-bouton_primary[disabled],
.mars-bouton-forced_secondaire .mars-bouton_tertiary:disabled, .mars-bouton-forced_secondaire .mars-bouton_tertiary[disabled],
.mars-bouton-forced_secondaire .mars-bouton_minor:disabled, .mars-bouton-forced_secondaire .mars-bouton_minor[disabled] {
    background-color: var(--background-button-disabled);
}


.mars-bouton_tertiary,
.mars-bouton-forced_tertiaire .mars-bouton_primary,
.mars-bouton-forced_tertiaire .mars-bouton_secondary,
.mars-bouton-forced_tertiaire .mars-bouton_minor {
    background-color: var(--background-base);
    border: var(--size_2px) solid var(--border-action);
    color: var(--text-action);
}
.mars-bouton_tertiary:focus, a.mars-bouton_tertiary:hover,
.mars-bouton-forced_tertiaire .mars-bouton_primary:focus, .mars-bouton-forced_tertiaire a.mars-bouton_primary:hover,
.mars-bouton-forced_tertiaire .mars-bouton_secondary:focus, .mars-bouton-forced_tertiaire a.mars-bouton_secondary:hover,
.mars-bouton-forced_tertiaire .mars-bouton_minor:focus, .mars-bouton-forced_tertiaire a.mars-bouton_minor:hover {
    background-color: var(--background-button-secondary-hovered);
    border: var(--size_2px) solid var(--border-action-hovered);
    color: var(--text-action);
}
.mars-bouton_tertiary:focus, a.mars-bouton_tertiary:focus,
.mars-bouton-forced_tertiaire .mars-bouton_primary:focus, .mars-bouton-forced_tertiaire a.mars-bouton_primary:focus,
.mars-bouton-forced_tertiaire .mars-bouton_secondary:focus, .mars-bouton-forced_tertiaire a.mars-bouton_secondary:focus,
.mars-bouton-forced_tertiaire .mars-bouton_minor:focus, .mars-bouton-forced_tertiaire a.mars-bouton_minor:focus {
    background-color: var(--background-button-secondary-focused);
    color: var(--text-action);
}
.mars-bouton_tertiary:disabled, .mars-bouton_tertiary[disabled],
.mars-bouton-forced_tertiaire .mars-bouton_primary:disabled, .mars-bouton-forced_tertiaire .mars-bouton_primary[disabled],
.mars-bouton-forced_tertiaire .mars-bouton_secondary:disabled, .mars-bouton-forced_tertiaire .mars-bouton_secondary[disabled],
.mars-bouton-forced_tertiaire .mars-bouton_minor:disabled, .mars-bouton-forced_tertiaire .mars-bouton_minor[disabled] {
    background-color: var(--background-base);
    border: var(--size_2px) solid var(--border-action-disabled);
    color: var(--text-action-disabled);
}

.mars-bouton_minor,
.mars-bouton-forced_mineur .mars-bouton_primary,
.mars-bouton-forced_mineur .mars-bouton_secondary,
.mars-bouton-forced_mineur .mars-bouton_tertiary {
    background-color: transparent;
    color: var(--text-action);
    border: none;
}
.mars-bouton_minor:hover, a.mars-bouton_minor:hover,
.mars-bouton-forced_mineur .mars-bouton_primary:hover, .mars-bouton-forced_mineur a.mars-bouton_primary:hover,
.mars-bouton-forced_mineur .mars-bouton_secondary:hover, .mars-bouton-forced_mineur a.mars-bouton_secondary:hover,
.mars-bouton-forced_mineur .mars-bouton_tertiary:hover, .mars-bouton-forced_mineur a.mars-bouton_tertiary:hover {
    background-color: var(--background-button-secondary-hovered);
    color: var(--text-action);
}
.mars-bouton_minor:focus, a.mars-bouton_minor:focus,
.mars-bouton-forced_mineur .mars-bouton_primary:focus, .mars-bouton-forced_mineur a.mars-bouton_primary:focus,
.mars-bouton-forced_mineur .mars-bouton_secondary:focus, .mars-bouton-forced_mineur a.mars-bouton_secondary:focus,
.mars-bouton-forced_mineur .mars-bouton_tertiary:focus, .mars-bouton-forced_mineur a.mars-bouton_tertiary:focus {
    background-color: var(--background-button-secondary-focused);
    color: var(--text-action);
}
.mars-bouton_minor:disabled, .mars-bouton_minor[disabled],
.mars-bouton-forced_mineur .mars-bouton_primary:disabled, .mars-bouton-forced_mineur .mars-bouton_primary[disabled],
.mars-bouton-forced_mineur .mars-bouton_secondary:disabled, .mars-bouton-forced_mineur .mars-bouton_secondary[disabled],
.mars-bouton-forced_mineur .mars-bouton_tertiary:disabled, .mars-bouton-forced_mineur .mars-bouton_tertiary[disabled] {
    background-color: transparent;
    color: var(--text-action-disabled);
}

.mars-bouton-list {
    display: flex;
    gap : var(--size_16px);
    flex-direction: column;
    padding-top: 0;
    margin-top: var(--size_14px);
}

.mars-bouton--margin {
    margin-top: var(--size_24px);
    margin-bottom: var(--size_48px);
}

@media (min-width: 48em) {
    .mars-bouton {
        /*largeur 300px par défaut sur PC*/
        width: var(--size_300px);
        max-width: 100%;
    }

    .mars-bouton-variable {
        /*largeur adaptée au contenu*/
        width: auto;
        max-width: max-content;
    }

    .mars-bouton-list {
        flex-direction: row;
    }

    .mars-bouton--visible-xs {
        display: none !important;
    }
}

@media (max-width: 47.99em) {
    .mars-bouton--hidden-xs {
        display: none !important;
    }
}