/* Couche finale des boutons de toute zone d'actions de modale — copie de Refactia
 * (Billing : components/app-modal-actions.css, HEAD 65064bda), avec ses `!important`.
 *
 * Les CSS de page gardent leurs classes sémantiques et JS, mais ne redéfinissent ni la
 * géométrie ni les couleurs des boutons de modale. Ce fichier est chargé après les CSS de
 * page (components/design_system_overlay_stylesheets.html.twig) pour que le contrat reste le même.
 *
 * Rôle : data-modal-action (primary | secondary | danger, posé par showCustomMenu) ou, en plus
 * de Refactia, la famille .app-btn (--primary | --secondary | --danger).
 * Écarts Badging : teintes de marque bleues (--ds-brand), règle « dernier bouton = principal »
 * qui ignore les boutons .app-btn porteurs d'un rôle, bouton outil .app-modal__tool, réduction
 * des animations.
 */
.app-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 16px 28px 24px !important;
    border-top: 0 !important;
}

.app-modal__actions > :is(button, a, .action-btn-form-container),
.app-modal__actions :is(button, a, .action-btn-form, .valider-btn, .input_cancel) {
    box-sizing: border-box;
    width: auto !important;
    min-width: 132px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    border: 1px solid var(--app-modal-border, #dce5ec) !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.app-modal__actions > :is(button, a) {
    flex: 0 1 auto;
}

.app-modal.app-modal--custom-menu .app-modal__actions > :is(button, a) {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 132px !important;
}

.app-modal__actions > :is(button, a):only-child {
    flex: 0 1 auto;
}

.app-modal__actions > :is(.submit-form-menu, .submit-form-container, .submit-form-container-r, .action-btn-form-container) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.app-modal__actions > :is(.submit-form-menu, .submit-form-container, .submit-form-container-r, .action-btn-form-container) > :is(button, a) {
    flex: 0 1 auto;
    width: auto !important;
}

.app-modal__actions > :is(.submit-form-menu, .submit-form-container, .submit-form-container-r, .action-btn-form-container):only-child > :is(button, a):only-child {
    flex: 0 1 auto;
}

.app-modal__actions :is(button, a) {
    color: var(--app-modal-text, #18304d) !important;
    background: #ffffff !important;
}

/* Sans rôle déclaré, le dernier bouton est le principal (Refactia). Badging : un bouton
 * .app-btn qui porte déjà un rôle garde le sien. */
.app-modal__actions > :is(button, a):last-child:not([data-modal-action], .app-btn--secondary, .app-btn--danger, .app-btn--ghost) {
    color: #ffffff !important;
    background: var(--app-modal-primary, #1f6fff) !important;
    border-color: var(--app-modal-primary, #1f6fff) !important;
}

.app-modal__actions :is(button, a, .action-btn-form, .valider-btn, .input_cancel):hover {
    box-shadow: 0 6px 14px rgba(25, 48, 76, 0.12);
}

.app-modal__actions :is([data-modal-action="secondary"], .app-btn--secondary, .action-btn-form, .input_cancel) {
    color: var(--app-modal-text, #18304d) !important;
    background: #ffffff !important;
    border-color: var(--app-modal-border, #dce5ec) !important;
}

.app-modal__actions :is([data-modal-action="secondary"], .app-btn--secondary, .action-btn-form, .input_cancel):hover {
    color: var(--app-modal-text, #18304d) !important;
    background: #f7fafc !important;
    border-color: #cbd8e3 !important;
}

.app-modal__actions :is(button, a, .action-btn-form, .valider-btn, .input_cancel):active {
    transform: translateY(0);
}

.app-modal__actions :is(button, a, .action-btn-form, .valider-btn, .input_cancel):focus-visible {
    outline: 2px solid rgba(31, 111, 255, 0.5);
    outline-offset: 2px;
}

.app-modal__actions :is([data-modal-action="primary"], .app-btn--primary, .valider-btn) {
    color: #ffffff !important;
    background: var(--app-modal-primary, var(--ds-brand, #1f6fff)) !important;
    border-color: var(--app-modal-primary, var(--ds-brand, #1f6fff)) !important;
    box-shadow: 0 8px 18px rgba(31, 111, 255, 0.22);
}

.app-modal__actions :is([data-modal-action="primary"], .app-btn--primary, .valider-btn):hover {
    color: #ffffff !important;
    background: var(--app-modal-primary-dark, var(--ds-brand-hover, #1555d5)) !important;
    border-color: var(--app-modal-primary-dark, var(--ds-brand-hover, #1555d5)) !important;
}

.app-modal__actions :is([data-modal-action="danger"], .app-btn--danger) {
    color: #ffffff !important;
    background: var(--app-modal-danger, #d85c62) !important;
    border-color: var(--app-modal-danger, #d85c62) !important;
}

.app-modal__actions :is([data-modal-action="danger"], .app-btn--danger):hover {
    color: #ffffff !important;
    background: #bd454d !important;
    border-color: #bd454d !important;
}

.app-modal__actions :is(button, a):disabled,
.app-modal__actions :is(button, a)[aria-disabled="true"],
.app-modal__actions :is(button, a).disabled-btn,
.app-modal__actions [data-modal-action-pending] {
    color: #7c8da1 !important;
    background: #e6ebf1 !important;
    border-color: #d4dde6 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.72;
    transform: none !important;
}

.app-modal__actions :is(button, a):disabled:hover,
.app-modal__actions :is(button, a)[aria-disabled="true"]:hover,
.app-modal__actions :is(button, a).disabled-btn:hover,
.app-modal__actions [data-modal-action-pending]:hover {
    color: #7c8da1 !important;
    background: #e6ebf1 !important;
    border-color: #d4dde6 !important;
    box-shadow: none !important;
    transform: none !important;
}

.app-modal__actions [data-modal-action-pending] {
    cursor: wait !important;
}

/* Badging : l'attribut hidden doit gagner sur le display des boutons (étapes d'un parcours masquées). */
.app-modal__actions [hidden] {
    display: none !important;
}

.app-modal__actions > .submit-form-menu,
.app-modal__actions > .submit-form-container-r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
    flex: 0 1 auto;
}

/* Badging : bouton outil dans le corps d'une modale (copier un code, un lien), même apparence
 * que le secondaire du pied. */
.app-modal .app-modal__tool {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 10px 20px;
    border: 1px solid var(--app-modal-border, #dce5ec);
    border-radius: 999px;
    color: var(--app-modal-text, #18304d);
    background: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.app-modal .app-modal__tool:hover:not(:disabled) {
    background: #f7fafc;
    border-color: #cbd8e3;
    box-shadow: 0 6px 14px rgba(25, 48, 76, 0.12);
}

.app-modal .app-modal__tool:focus-visible {
    outline: 2px solid rgba(31, 111, 255, 0.5);
    outline-offset: 2px;
}

.app-modal .app-modal__tool:disabled {
    color: #7c8da1;
    background: #e6ebf1;
    border-color: #d4dde6;
    cursor: not-allowed;
    opacity: 0.72;
}

@media (max-width: 760px) {
    .app-modal__actions {
        align-items: stretch;
        justify-content: stretch;
        flex-direction: column !important;
        padding: 14px 20px calc(20px + env(safe-area-inset-bottom)) !important;
    }

    .app-modal__actions > :is(button, a, .action-btn-form-container),
    .app-modal__actions :is(button, a, .action-btn-form, .valider-btn, .input_cancel) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .app-modal__actions > :is(.submit-form-menu, .submit-form-container, .submit-form-container-r, .action-btn-form-container) {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .app-modal.app-modal--custom-menu .app-modal__actions > :is(button, a) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .app-modal__actions > [data-mobile-modal-close-action="true"] {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal__actions :is(button, a),
    .app-modal .app-modal__tool {
        transition: none;
    }
}