/* Fermeture partagée — copie de Refactia (Billing : components/close.css, HEAD 65064bda).
 * Balisage : button.app-close > img.close-icon (assets/img/icon/app-close.svg, identique à Refactia).
 * Géométrie identique à Refactia : 32 px (40 px au toucher), rayon 8 px, ombre légère, icône 18 px.
 * Couleurs Badging : fond chrome sombre --ds-chrome (barre latérale), survol --ds-accent, focus --ds-brand.
 * Placement : à la charge de l'appelant (app-modal.css épingle la croix d'en-tête, side-panel.css celle du panneau).
 * Chargé après les CSS de page : components/design_system_overlay_stylesheets.html.twig.
 */
.app-close:not(.sidebar-mobile-close) {
    display: inline-flex;
}

button.app-close {
    --app-close-size: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--app-close-size);
    min-width: var(--app-close-size);
    height: var(--app-close-size);
    min-height: var(--app-close-size);
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    background: var(--ds-chrome, #152640);
    box-shadow: 0 2px 6px rgba(32, 54, 56, 0.14);
    font: inherit;
    line-height: 1;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button.app-close:hover:not(:disabled) {
    background: var(--ds-accent, #1555d5);
    box-shadow: 0 3px 8px rgba(32, 54, 56, 0.2);
}

button.app-close:active:not(:disabled) {
    transform: scale(0.96);
}

button.app-close:focus-visible {
    outline: 2px solid var(--ds-brand, #1f6fff);
    outline-offset: 3px;
}

button.app-close:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button.app-close > :is(img, svg) {
    position: static;
    display: block;
    flex: 0 0 auto;
    width: 18px;
    min-width: 0;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
    opacity: 1;
    filter: none;
    transform: none;
    pointer-events: none;
}

.title-form > .app-close {
    margin: 8px;
}

.app-close[hidden] {
    display: none;
}

@media (max-width: 780px), (pointer: coarse) {
    button.app-close {
        --app-close-size: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    button.app-close {
        transition: none;
    }
}