/* ===== Boite de dialogue ===== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;

    /* flex + centrage vertical : le pattern précédent (display:block, ancré en haut via
       margin-top fixe sur .modal-dialog) ne centrait jamais verticalement — correct pour un
       contenu très variable en hauteur, mais visuellement flottant sur les modales courtes. */
    &.show {
        display: flex;
        align-items: center;
        justify-content: center;

        & .modal-dialog {
            animation: slideDown var(--modal-anim-duration) ease-out;
        }
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-bg);
    animation: fadeIn var(--modal-anim-duration) ease-in-out;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: var(--modal-width);
    margin: 1.75rem auto;
    pointer-events: none;

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) {
        max-width: calc(100% - 1rem);
        margin: var(--spacing-xs);
    }

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) {
        max-width: 100%;
        margin: 0;
        /*min-height: 100dvh;*/
        display: flex;
        flex-direction: column;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-modal);
    pointer-events: auto;
    max-height: calc(100vh - 2.5rem);

    /* Typographie propre aux modales (maquette) : Open Sans 16px. Posée ici explicitement — les
       modales vivent hors du flux des pages et ne doivent pas dépendre de l'héritage (body = Inter). */
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    font-size: var(--font-size-base);      /* 16px */
    line-height: var(--line-height-base);
    color: var(--color-text-primary);

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) {
        border-radius: 0;
        max-height: 100dvh;
        flex: 1;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--modal-padding);
    border-bottom: 0.1rem solid var(--color-border);

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) { padding: var(--modal-padding-sm); }
}

.modal-title {
    flex-grow: 1;
    margin: 0;
    font-size: var(--font-size-h2); /* 24px — titre de modale, toutes variantes */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);

    & svg {
        width: 1.125rem; /* 18px */
        height: 1.125rem;
    }

    &:hover { background-color: var(--color-bg-hover-light); color: var(--color-text-primary); }
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--modal-padding);
    overflow-y: auto;

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) { padding: var(--modal-padding-sm); }

    & .errors {
        list-style: none;
        padding: 0;
        margin: var(--spacing-sm4) 0 0 0;

        & li {
            padding: var(--spacing-xs5);
            margin-bottom: var(--spacing-xs4);
            background-color: var(--color-error-bg);
            border-left: 0.2rem solid var(--color-error);
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-base);

            &:last-child { margin-bottom: 0; }
        }
    }
}

/* ===== Modale dlg-success / dlg-form-result (succès) — spécifique ===== */

#dlg-success,
#dlg-form-result,
#dlg-claim-confirm {
    /* Cercle vert pâle (dimensions : bloc « cercles d'icône » ci-dessous). */
    & .success-modal__icon-wrap { background: var(--color-success-light); }

    /* Icône check-circle : stroke="currentColor" → contrôlé par color. */
    & .upload-error-icon { color: var(--color-success); }

    & .upload-error-title { color: var(--color-primary); }
}

/* dlg-form-result couvre aussi l'état erreur (même cercle rouge que dlg-upload-error) —
   icon-warning est coloré via --icon-fg (défaut rouge danger), pas .upload-error-icon/color. */
#dlg-form-result .upload-error-icon-wrap {
    background: var(--color-error-light);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs5);
    padding: var(--modal-padding);
    border-top: 0.1rem solid var(--color-border);

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) { padding: var(--modal-padding-sm); }
}

body.modal-open,
body.menu-open {
    overflow: hidden;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-3.6rem); opacity: 0; }
    to   { transform: translateY(0);       opacity: 1; }
}

/* ===== Modales d'alerte — layout centré : × flottant, icône, titre, message, boutons empilés =====
   Trois familles de classes historiques partagent désormais les mêmes règles :
     .upload-error-*      (dlg-upload-error, general-error, duplicate-file, consent-deposit, mfa-cooldown,
                           success, claim-confirm, warranty-desc)
     .session-timeout-*   (dlg-session-timeout)
     .modal-warning-*     (dlg-confirm-warning)
   Elles sont référencées par _Modals.cshtml / CreerSinistreLie.cshtml / modal-manager.js : conservées
   telles quelles comme alias d'un futur composant BEM .modal-alert (renommage hors périmètre). */

/* Bouton × flottant en haut à droite (hors flux du body) */
:is(#dlg-upload-error, #dlg-general-error, #dlg-duplicate-file, #dlg-consent-deposit,
    #dlg-mfa-cooldown, #dlg-success, #dlg-claim-confirm, #dlg-warranty-desc, #dlg-radio-info,
    #dlg-form-result, #dlg-confirm-sending) .modal-close,
.session-timeout-close,
.modal-warning-close {
    position: absolute;
    top: var(--spacing-xs6);
    right: var(--spacing-xs6);
    left: auto;
    z-index: 1;
}

/* Corps centré (surcharge le padding de .modal-body : même spécificité, déclaré après) */
.upload-error-body,
.session-timeout-body,
.modal-warning-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xs6);
    padding: 2.3rem var(--spacing-md4) var(--spacing-sm4);

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) { padding-left: var(--modal-padding-sm); padding-right: var(--modal-padding-sm); }
}

/* Icône « nue » en tête (sans cercle : dlg-upload-error, general-error, duplicate-file,
   consent-deposit, claim-confirm) : 48px, même taille que le SVG dans un cercle (bloc
   « cercles d'icône » ci-dessous) — un seul gabarit d'icône pour toutes les modales.
   Sélecteur gardé sous les ids (spécificité avec id) : prime aussi sur le « > svg » du bloc
   cercles quand l'icône est DANS un cercle (dlg-success, dlg-mfa-cooldown) — sans effet
   puisque les deux valent désormais 3rem. */
:is(#dlg-upload-error, #dlg-general-error, #dlg-duplicate-file, #dlg-consent-deposit,
    #dlg-mfa-cooldown, #dlg-success, #dlg-claim-confirm, #dlg-warranty-desc, #dlg-form-result,
    #dlg-confirm-sending) .upload-error-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}

/* Titre 24px gras centré — couleur texte par défaut, primaire pour certaines modales (ci-dessous) */
.upload-error-title,
.session-timeout-title,
.modal-warning-title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    color: var(--color-text-primary);
}

.session-timeout-title,
.modal-warning-title {
    color: var(--color-primary);
}

/* Message centré pleine largeur (la couleur suit .modal-content, sauf exceptions ci-dessous) */
.upload-warning-description,
.session-timeout-message,
.modal-warning-message,
#dlg-general-error .upload-error-description {
    width: 100%;
    text-align: center;
}

/* Écarts conservés : marge externe nulle (les .upload-warning-description gardent la marge UA du <p>)
   et couleur secondaire (MFA, session, avertissement). */
.session-timeout-message,
.modal-warning-message,
#dlg-general-error .upload-error-description {
    margin: 0;
}

#dlg-mfa-cooldown .upload-warning-description,
.session-timeout-message,
.modal-warning-message {
    color: var(--color-text-secondary);
}

/* ===== Cercles d'icône des modales d'alerte — 64 × 64px, SVG 48px centré =====
   Un seul bloc pour les 4 variantes (succès, MFA, avertissement, session) ; chaque modale
   ne pose plus que la couleur de fond du cercle et la couleur de l'icône. */
.success-modal__icon-wrap,
.mfa-cooldown-icon,
.session-timeout-icon-wrap,
.modal-warning-icon-wrap,
.upload-error-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;  /* 64px (1rem = 16px) */
    height: 4rem;
    border-radius: 50%;

    & > svg {
        width: 3rem; /* 48px — même gabarit que l'icône « nue » (voir bloc au-dessus) */
        height: 3rem;
    }
}

/* .success-modal__icon-wrap/.upload-error-icon-wrap pose display:inline-flex : règle auteur qui
   écrase silencieusement [hidden] (règle UA, display:none) malgré une spécificité comparable —
   nécessaire dès qu'un même wrapper est basculé entre icône succès/erreur (#dlg-form-result). */
.success-modal__icon-wrap[hidden],
.upload-error-icon-wrap[hidden] {
    display: none;
}

/* ===== Pieds de modales d'alerte — boutons empilés pleine largeur =====
   Les boutons gardent le design .btn--primary / .btn--secondary (buttons.css) ; seule la
   largeur est forcée à 100 %. */
.upload-error-footer,
.modal-warning-footer,
.session-timeout-footer {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-xs5);
    padding: var(--spacing-sm4) var(--spacing-md4) var(--spacing-md4);
    border-top: none;

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) { padding-left: var(--modal-padding-sm); padding-right: var(--modal-padding-sm); }

    /* Largeur dédiée des modales (342px, voir plus bas) : libellés longs (ex. "Non, je choisis
       un autre document") passent sur 2 lignes plutôt que déborder — hauteur mini au lieu de
       fixe, mais padding horizontal conservé (buttons.css). */
    & .btn {
        width: 100%;
        height: auto;
        min-height: var(--control-height);
        padding-top: var(--spacing-xs4);
        padding-bottom: var(--spacing-xs4);
        white-space: normal;
        text-align: center;
    }

    /* .btn pose display:inline-flex (buttons.css) : règle auteur qui écrase silencieusement
       [hidden] (règle UA, display:none) malgré une spécificité comparable — le second bouton
       (ex. #dlg-confirm-warning-cancel masqué via ModalManager.showConfirmWarning({hideCancel})
       ne disparaît pas sans cette redéclaration explicite. */
    & .btn[hidden] { display: none; }
}

/* ===== Modale dlg-mfa-cooldown — spécifique ===== */

#dlg-mfa-cooldown {
    /* Cercle pâle porté par le CONTENEUR (pas le SVG) pour ne pas rogner le triangle. */
    & .mfa-cooldown-icon { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }

    /* .upload-warning-description : couleur secondaire — bloc « Message centré » plus haut. */

    /* Largeur dédiée (342px) — même pattern que .modal-dialog--lg (repli mobile). */
    & .modal-dialog {
        max-width: 21.375rem; /* 342px (1rem = 16px) */

        @media (max-width: 36em) { max-width: calc(100% - 1rem); }
    }
}

/* ===== Modale dlg-confirm-warning (ClaimDeclaration, CreerSinistreLie),
   dlg-upload-error, dlg-session-timeout, dlg-consent-deposit et dlg-claim-confirm — même largeur dédiée ===== */

:is(#dlg-confirm-warning, #dlg-upload-error, #dlg-session-timeout, #dlg-consent-deposit, #dlg-duplicate-file, #dlg-claim-confirm) {
    /* Largeur dédiée (342px) — même pattern que #dlg-mfa-cooldown / .modal-dialog--lg (repli mobile). */
    & .modal-dialog {
        max-width: 21.375rem; /* 342px (1rem = 16px) */

        @media (max-width: 36em) { max-width: calc(100% - 1rem); }
    }
}

/* ===== Modale dlg-consent-deposit — même rendu que dlg-confirm-warning (cercle + titre bleu) ===== */

#dlg-consent-deposit {
    & .upload-error-icon-wrap { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }
}

/* ===== Modale dlg-duplicate-file — même rendu que dlg-confirm-warning (cercle + titre bleu) ===== */

#dlg-duplicate-file {
    & .upload-error-icon-wrap { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }
}

/* ===== Modale dlg-upload-confirm (Process/LinkedClaimAttachments) — header/corps/footer standard,
   titre centré bleu (même rendu que #dlg-cookie-politic), largeur généreuse (805px, comme
   #dlg-confirm-sending) et corps de texte aligné à gauche (contenu multi-lignes) ===== */

#dlg-upload-confirm {
    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) — même gabarit que #dlg-confirm-sending */

        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    & .modal-header {
        justify-content: center;
        position: relative;
        padding: var(--spacing-md2) 4.5rem;
    }

    & .modal-title {
        text-align: center;
        color: var(--color-primary); /* #1434CB */
        font-weight: var(--font-weight-bold);
    }

    & .modal-close {
        position: absolute;
        top: 50%;
        right: var(--modal-padding-sm);
        transform: translateY(-50%);
    }

    & .modal-body ul {
        margin: var(--spacing-xs4) 0 0 0;
        padding-left: var(--spacing-sm3);

        & li { margin-bottom: 0.3rem; }
    }

    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Compte à rebours (MFA cooldown, expiration de session) — 24px, unités 16px ===== */
.mfa-cooldown-timer,
.session-timeout-timer {
    margin: 0;
    font-size: var(--font-size-h2); /* 24px */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-primary);
}

.mfa-cooldown-unit,
.session-timeout-unit {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
    margin: 0 var(--spacing-xs) 0 0.2rem;
    vertical-align: middle;
}

/* ===== Modale info bleue : dlg-warranty-desc (« En savoir plus », infos PPE, personne de confiance —
   contenu injecté via data-desc-target + <template>) ===== */

#dlg-warranty-desc {
    /* Largeur dédiée (805px, contenu riche PPE) — même pattern que .modal-dialog--lg (repli mobile). */
    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) */

        /* Spécificité ID > .modal-dialog de base : sans cette règle, le palier intermédiaire
           de la règle de base (36em → calc(100% - 1rem) + margin: var(--spacing-xs)) resterait
           actif jusqu'à 479px — on veut le plein écran (100%, sans marge) dès 36em ici, pas
           de palier intermédiaire avec un filet de marge. */
        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    /* Contenu HTML riche : aligné à gauche, largeur totale */
    & .warranty-desc__content {
        width: 100%;
        text-align: left;
        color: var(--color-text-body); /* #3D515A */
        line-height: 1.65;

        & p { margin: 0 0 var(--spacing-xs2); &:last-child { margin-bottom: 0; } }
        & ul, & ol { padding-left: var(--spacing-sm3); margin: 0 0 var(--spacing-xs2); }
        & li { margin-bottom: 0.3rem; }
        & :is(strong, b) { color: var(--color-heading); } /* #3C4D6A */

        /* Espacement dédié : sans ça, la liste qui suit un <b> (contenu resx, ex. PPEFamilyModalContent)
           colle directement dessous (margin-top:0 posé par la règle ul/ol ci-dessus). */
        & :is(strong, b) + :is(ul, ol) { margin-top: var(--spacing-sm); }
    }

    /* Même padding vertical de footer que #dlg-cookie-politic / #dlg-cookie-consent / #dlg-radio-info */
    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Modale info bleue : dlg-radio-info (définitions .radio-info-link — PPE, PPE famille,
   personne de confiance). Même gabarit que #dlg-warranty-desc, footer distinct (bouton unique). ===== */

#dlg-radio-info {
    /* Largeur dédiée (805px, contenu riche PPE) — même pattern que #dlg-warranty-desc. */
    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) */

        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    /* Contenu HTML riche : aligné à gauche, largeur totale (mêmes règles que .warranty-desc__content) */
    & .radio-info__content {
        width: 100%;
        text-align: left;
        color: var(--color-text-body); /* #3D515A */
        line-height: 1.65;

        & p { margin: 0 0 var(--spacing-xs2); &:last-child { margin-bottom: 0; } }
        & ul, & ol { padding-left: var(--spacing-sm3); margin: 0 0 var(--spacing-xs2); }
        & li { margin-bottom: 0.3rem; }
        & :is(strong, b) { color: var(--color-heading); } /* #3C4D6A */
        & :is(strong, b) + :is(ul, ol) { margin-top: var(--spacing-sm); }
    }

    /* Même padding vertical de footer que #dlg-cookie-politic / #dlg-cookie-consent */
    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Modale dlg-upload-error — spécifique ===== */

#dlg-upload-error {
    /* Cercle rouge pâle + titre bleu — mêmes couleurs que .modal-warning-icon-wrap / .modal-warning-title (dlg-confirm-warning). */
    & .upload-error-icon-wrap { background: var(--color-error-light); }

    & .upload-error-title { color: var(--color-primary); }

    & .upload-error-description {
        width: 100%;

        & .errors {
            list-style: none;
            padding: 0;
            margin: 0;

            & li {
                font-size: var(--font-size-base);
                color: var(--color-text-primary);
                text-align: left;
                padding: 0;
                margin: 0 0 0.3rem 0;
                background: none;
                border: none;
                border-radius: 0;
            }
        }
    }

    & .upload-error-rules {
        width: 100%;
        padding: var(--spacing-xs6) var(--spacing-xs6) var(--spacing-xs6) 2.3rem;
        margin: 0;
        background-color: var(--color-bg-light);
        border-radius: var(--border-radius-sm);
        text-align: left; /* le corps centre le texte ; la liste de règles reste alignée à gauche */

        & li {
            font-size: var(--font-size-sm);
            color: var(--color-text-primary);
            margin-bottom: var(--spacing-xs3);
            line-height: var(--line-height-base);

            &:last-child { margin-bottom: 0; }
        }
    }
}

/* #dlg-general-error .upload-error-description : bloc « Message centré » plus haut. */

/* ===== Modale dlg-duplicate-file ===== */

#dlg-duplicate-file {
    & .duplicate-file-list {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;

        & li {
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            padding: var(--spacing-xs4) var(--spacing-xs6);
            margin-bottom: 0.3rem;
            background-color: var(--color-bg-light);
            border-left: 0.2rem solid var(--color-warning);
            border-radius: var(--border-radius-sm);
            text-align: left;
            word-break: break-word;

            &:last-child { margin-bottom: 0; }
        }
    }
}

/* ===== #dlg-session-timeout ===== */

/* .session-timeout-close / -body / -title / -message : bloc « Modales d'alerte » plus haut ;
   .session-timeout-timer / -unit : bloc « Compte à rebours » ; cercle : bloc « cercles d'icône ». */
#dlg-session-timeout {
    & .session-timeout-icon-wrap { background: var(--color-warning-bg); }

    & .session-timeout-icon { --icon-fg: var(--color-icon-warning); }
}

/* ===== .modal-dialog--lg (politique cookies, consentement) ===== */

.modal-dialog--lg {
    max-width: 65rem;

    @media (max-width: 36em) { max-width: calc(100% - 1rem); }
}

/* ===== #dlg-cookie-politic ===== */

#dlg-cookie-politic,
#dlg-cookie-consent {
    & .modal-dialog {
        max-width: 70.0625rem; /* 1121px (1rem = 16px) */
    }

    & .modal-header {
        justify-content: center;
        position: relative;
        padding: var(--spacing-md2) 4.5rem;
    }

    & .modal-title {
        text-align: center;
        color: var(--color-primary); /* #1434CB */
        font-weight: var(--font-weight-bold);
    }

    & .modal-close {
        position: absolute;
        top: 50%;
        right: var(--modal-padding-sm);
        transform: translateY(-50%);
    }

    & .modal-body {
        max-height: 65vh;
        /* Police/taille : héritées de .modal-content (Open Sans 16px) */
        color: var(--color-text-body);
        line-height: 1.7;

        & h4 {
            font-size: 1.2rem;
            font-weight: var(--font-weight-medium);
            color: var(--color-text-primary);
            margin: var(--spacing-sm2) 0 var(--spacing-xs4);
        }

        & p { margin: 0 0 var(--spacing-xs2); }

        & a {
            color: var(--color-primary);
            text-decoration: underline;
        }
    }

    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Contenu _CookiesPoliticPopupBody ===== */

.cookie-politic-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs2);
}

.cookie-politic-subtitle {
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-xs4);
}

.cookie-politic-description {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* ===== Modales d'avertissement — layout centré icône warning (dlg-confirm-warning) =====
   .modal-warning-close / -body / -title / -message / -footer : blocs « Modales d'alerte » et
   « Pieds de modales d'alerte » plus haut. Dimensions du cercle : bloc « cercles d'icône ». */
.modal-warning-icon-wrap { background: var(--color-warning-bg); }

.modal-warning-icon { --icon-fg: var(--color-icon-warning); }

/* Variante "download-error" (échec de téléchargement) : icône rouge danger, même cercle/couleur
   que #dlg-upload-error, au lieu de l'orange par défaut des autres variantes de dlg-confirm-warning. */
#dlg-confirm-warning[data-variant="download-error"] {
    & .modal-warning-icon-wrap { background: var(--color-error-light); }
    & .modal-warning-icon { --icon-fg: var(--color-icon-danger); }
}

/* ===== Modale dlg-confirm-sending — même design que dlg-confirm-warning
   (icône cercle centrée, titre bleu), mais largeur dédiée plus généreuse (805px) vu le
   contenu plus long (paragraphes + liste) ===== */

#dlg-confirm-sending {
    & .upload-error-icon-wrap { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }

    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) — même gabarit que #dlg-warranty-desc */

        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    /* Icône + titre restent centrés (famille .upload-error-body) ; le corps du texte, plus
       long, repasse en aligné à gauche (lisibilité). */
    & .confirm-sending-body {
        text-align: left;

        & p {
            margin: 0 0 var(--spacing-sm4) 0;
            &:last-child { margin-bottom: 0; }
        }

        & ul {
            margin: var(--spacing-xs4) 0 0 0;
            padding-left: var(--spacing-sm3);

            & li { margin-bottom: 0.3rem; }
        }

        /* Icône avertissement inline devant le paragraphe fraude — plus petite que le
           triangle 48px du haut de modale (règle partagée .upload-error-icon). */
        & .confirm-sending-warning {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-xs3);

            & .upload-error-icon {
                flex-shrink: 0;
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }

    /* Footer par défaut (.modal-footer, pas .upload-error-footer) : boutons taille normale,
       côte à côte alignés à droite — comme #dlg-radio-info / #dlg-warranty-desc. */
}

/* ===== Modale dlg-form-result (Form/*) ===== */

/* Bouton « Télécharger » affiché uniquement en cas de succès (form.js bascule [hidden]) —
   .btn pose display:inline-flex (buttons.css) qui prime sinon sur [hidden] (règle UA). */
#btn-form-download[hidden] { display: none; }