/* Adaptations d'écran et préférences d'accessibilité du Portail client. */
@media (max-width: 767.98px) {
    html,
    body.portal-page { font-size: 16px; }

    body.portal-page .portal-app-shell {
        width: 100% !important;
        margin: .85rem auto calc(5.5rem + env(safe-area-inset-bottom)) !important;
        padding-inline: .75rem;
    }

    body.portal-page .portal-main > section + section,
    body.portal-page .portal-main > article + section,
    body.portal-page .portal-main > .portal-card + .portal-card { margin-top: .85rem; }

    body.portal-page .portal-card { box-shadow: 0 5px 16px rgba(17, 24, 39, .045) !important; }
    body.portal-page .portal-card > .p-4,
    body.portal-page .portal-card.p-4 { padding: 1rem !important; }

    .portal-hero { padding: 1rem; }
    .portal-simple-hero { gap: .75rem; }
    .portal-feedback { margin-inline: 0; border-radius: .9rem; }
    .portal-action-group { gap: .5rem !important; }
    .portal-action-group .btn { width: 100%; white-space: normal; }
    body.portal-page .form-label { margin-bottom: .42rem; font-weight: 750; }
    body.portal-page .form-text { font-size: .84rem; line-height: 1.4; }

    .portal-page-heading-simple > *,
    .portal-resource-card-body,
    .portal-state-summary-body,
    .portal-simple-card-body,
    .portal-document-copy,
    .portal-info-value { min-width: 0; }

    body.portal-page :where(h1, h2, h3, .portal-resource-card-title, .portal-info-value, .portal-document-copy strong) {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    body.portal-page .portal-app-shell { padding-inline: .55rem; }
    .portal-simple-icon { display: none; }
    .portal-payment-group-option { grid-template-columns: auto minmax(0, 1fr); }
    .portal-payment-group-option-amount { grid-column: 2; justify-self: start; }
}

@media (max-width: 575.98px) {
    .portal-future-payments-label { align-items: flex-start; padding: 14px 15px; }
    .portal-future-payments-content { padding-inline: 15px; padding-bottom: 15px; }
}

@media (max-width: 700px) {
    .portal-payment-group-heading,
    .portal-payment-group-footer { align-items: stretch; flex-direction: column; }
    .portal-payment-group-footer .btn { width: 100%; }
    .portal-automatic-payment-group-line { grid-template-columns: minmax(0, 1fr) auto; }
    .portal-automatic-payment-group-line a { grid-column: 1 / -1; }
    .portal-custom-payment-group > summary { align-items: flex-start; flex-direction: column; }
    .portal-dossier-payments .portal-resource-card-actions { flex-wrap: wrap; }
    .portal-dossier-payments .portal-payment-detail-link {
        width: 100%;
        padding: .55rem 0 0;
        text-align: center;
    }
}

/* Le menu compact ne conserve jamais les dimensions du panneau de bureau. */
@media (max-width: 991.98px) {
    body.portal-page .portal-app-shell {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    body.portal-page .portal-sidebar {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    body.portal-page .portal-main { min-height: 0 !important; }
}

/* Moyens de paiement lisibles sous forme de cartes sur téléphone. */
@media (max-width: 767.98px) {
    body.portal-page .portal-sidebar { top: auto !important; }

    .portal-payment-methods {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .portal-payment-methods-table,
    .portal-payment-methods-table tbody,
    .portal-payment-methods-table tr,
    .portal-payment-methods-table td {
        display: block;
        width: 100%;
    }

    .portal-payment-methods-table thead { display: none; }
    .portal-payment-methods-table tbody { display: grid; gap: .75rem; }
    .portal-payment-methods-table tbody tr {
        padding: .85rem;
        border: 1px solid var(--portal-border-strong);
        border-radius: 1rem;
        background: #fff;
        box-shadow: 0 5px 16px rgba(17, 24, 39, .045);
    }

    .portal-payment-methods-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem 0;
        border: 0;
        text-align: right !important;
    }

    .portal-payment-methods-table tbody td + td { border-top: 1px solid rgba(17, 24, 39, .07); }
    .portal-payment-methods-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--portal-muted);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .portal-payment-methods-table tbody td:first-child {
        align-items: flex-start;
        flex-direction: column;
        text-align: left !important;
    }

    .portal-payment-methods-table tbody td:first-child::before { display: none; }
    .portal-payment-methods-table tbody td[data-label="Actions"] > div,
    .portal-payment-methods-table tbody td[data-label="Actions"] > a { width: 100%; }
    .portal-payment-methods-table tbody td[data-label="Actions"] .btn { min-height: 2.65rem; }
    .portal-payment-methods-table .portal-payment-methods-empty { padding: 0; }
    .portal-payment-methods-table .portal-payment-methods-empty td {
        display: block;
        padding: 1.5rem !important;
        border: 1px dashed var(--portal-border-strong);
        text-align: center !important;
    }

    .portal-payment-methods-table .portal-payment-methods-empty td::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-js-ready .portal-reveal,
    .portal-js-ready .portal-page-ready .portal-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .portal-is-loading::after,
    #stripeSepaElement:empty { animation: none; }
    body.portal-page .btn-primary:hover { transform: none; }
}

@media (forced-colors: active) {
    .portal-skip-link,
    .portal-feedback,
    body.portal-page .portal-card,
    body.portal-page .portal-sidebar,
    .portal-resource-card,
    .portal-payment-group-option {
        border: 1px solid CanvasText !important;
    }

    body.portal-page :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
        box-shadow: none !important;
    }

    body.portal-page .portal-side-link.active,
    .portal-simple-tab.active { outline: 2px solid LinkText; outline-offset: -2px; }
}