/* =========================================================================
   BODEZIA — MODALES
   -------------------------------------------------------------------------
   Composant commun à TOUTES les modales du site. À charger une seule fois
   dans includes/header.php, après le thème et avant les CSS de page :

       <link rel="stylesheet" href="/css/modal.css">

   -------------------------------------------------------------------------
   STRUCTURE (identique pour les quatre intentions)

       <div class="modal fade app-modal is-edit">
         <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content app-modal-content">
             <div class="app-modal-header"> titre + sous-titre + btn-close
             <div class="app-modal-body">
               <form>
                 <div class="app-modal-section">  (0, 1 ou n)
                 <div class="app-modal-actions">  (toujours en dernier)

   -------------------------------------------------------------------------
   INTENTION — une classe sur la racine, elle pilote la largeur et la
   couleur d'accent. Le reste du composant ne change pas.

       is-add      création      violet   760px
       is-edit     modification  violet   760px
       is-view     consultation  neutre   620px   (pas de champ, pas de submit)
       is-delete   suppression   rouge    460px   (bloc de confirmation)

   -------------------------------------------------------------------------
   COMPATIBILITÉ : les anciennes classes .profile-edit-* sont conservées en
   alias dans tous les sélecteurs. Les modales déjà en place (mot de passe,
   mail, téléphone) fonctionnent sans être modifiées, et peuvent être
   migrées une par une.

   ATTENTION : le corps de la modale défile (voir « CORPS »). Tout
   .selectpicker placé à l'intérieur doit porter data-container="body",
   sinon sa liste est coupée par le défilement.
   ========================================================================= */


/* =========================================================================
   TOKENS
   ========================================================================= */

.app-modal,
.profile-edit-modal {

    /* Échelle typographique — base 16px */
    --m-fs-label: 0.875rem;        /* 14px — libellés de champ         */
    --m-fs-small: 0.875rem;        /* 14px — mentions secondaires      */
    --m-fs-body: 0.9375rem;        /* 15px — champs, texte courant     */
    --m-fs-section: 0.9375rem;     /* 15px — titre de section          */
    --m-fs-title: 1.125rem;        /* 18px — titre de modale           */

    /* Couleurs de texte — 4,5:1 minimum */
    --m-c-heading: #2b3034;
    --m-c-body: #5c6670;

    /* Accent — icônes, focus, liens. Redéfini par les variantes. */
    --m-c-accent: #7441d4;
    --m-c-accent-dark: #6737c7;
    --m-c-accent-soft: #f3eefd;
    --m-c-accent-ring: rgba(116, 65, 212, 0.12);

    /* Action — le bouton principal uniquement. Distinct de l'accent :
       une modale de consultation neutralise ses icônes, mais si elle
       porte une action, cette action reste une action. */
    --m-c-action: #7441d4;
    --m-c-action-dark: #6737c7;

    /* Surfaces */
    --m-c-surface: #fafbfc;
    --m-c-border: #e6e9ee;
    --m-c-border-soft: #eef1f4;
    --m-c-field-border: #dbe1e6;

    /* États */
    --m-c-danger: #b42318;
    --m-c-success: #197a33;

    /* Formes et rythme */
    --m-radius: 16px;
    --m-radius-field: 10px;
    --m-pad-x: 26px;
    --m-pad-y: 24px;
}


/* Intentions ------------------------------------------------------------ */

.app-modal.is-view {
    --m-c-accent: #5c6670;
    --m-c-accent-dark: #454e57;
    --m-c-accent-soft: #f2f4f6;
    --m-c-accent-ring: rgba(92, 102, 112, 0.12);
}

.app-modal.is-delete {
    --m-c-accent: #b42318;
    --m-c-accent-dark: #912018;
    --m-c-accent-soft: #fef3f2;
    --m-c-accent-ring: rgba(180, 35, 24, 0.12);

    --m-c-action: #b42318;
    --m-c-action-dark: #912018;
}


/* =========================================================================
   DIALOGUE
   ========================================================================= */

.app-modal .modal-dialog,
.profile-edit-modal .modal-dialog {
    max-width: 760px;
}

.app-modal.is-view .modal-dialog {
    max-width: 620px;
}

.app-modal.is-delete .modal-dialog {
    max-width: 460px;
}

.app-modal-content,
.profile-edit-modal-content {
    overflow: hidden;

    border: 0;
    border-radius: var(--m-radius);

    box-shadow:
            0 24px 70px rgba(28, 22, 44, 0.22);
}


/* =========================================================================
   EN-TÊTE
   ========================================================================= */

.app-modal-header,
.profile-edit-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding:
            var(--m-pad-y)
            var(--m-pad-x)
            18px;

    border-bottom: 1px solid var(--m-c-border-soft);
}

.app-modal-header > div,
.profile-edit-modal-header > div {
    min-width: 0;
}

.app-modal-title,
.profile-edit-modal-title {
    margin: 0;

    color: var(--m-c-heading);

    font-size: var(--m-fs-title);
    font-weight: 600;

    line-height: 1.35;
    letter-spacing: -0.01em;
}

.app-modal-subtitle,
.profile-edit-modal-subtitle {
    margin: 5px 0 0;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);
    line-height: 1.5;
}


/* Bouton de fermeture — le halo bleu du navigateur est remplacé par un
   contour à la couleur d'accent, visible seulement au clavier. */

.app-modal .btn-close,
.profile-edit-modal .btn-close {
    flex: 0 0 auto;

    margin-top: 2px;
    padding: 0;

    width: 32px;
    height: 32px;

    border-radius: 8px;

    opacity: 0.5;

    box-shadow: none !important;
}

.app-modal .btn-close:hover,
.profile-edit-modal .btn-close:hover {
    background-color: var(--m-c-surface);

    opacity: 1;
}

.app-modal .btn-close:focus-visible,
.profile-edit-modal .btn-close:focus-visible {
    outline: 2px solid var(--m-c-accent);
    outline-offset: 2px;

    opacity: 1;
}


/* =========================================================================
   CORPS
   -------------------------------------------------------------------------
   Le corps défile, la barre d'actions reste collée en bas : sur un
   formulaire long, le bouton d'enregistrement reste toujours atteignable
   sans faire défiler toute la page.
   ========================================================================= */

.app-modal-body,
.profile-edit-modal-body {
    max-height: calc(100dvh - 230px);

    /* overflow-x: hidden est OBLIGATOIRE, ce n'est pas un pansement.

       Dès qu'un axe passe en auto, l'autre ne peut plus rester
       `visible` : le navigateur le force lui aussi en auto. Une boîte
       qui ne défile que verticalement en CSS se retrouve donc à
       défiler dans les deux sens, et le moindre dépassement d'un
       pixel sort une barre horizontale en travers de la modale.

       Du dépassement, il y en a par construction ici : la barre
       d'actions porte des marges négatives de -var(--m-pad-x) pour
       aller toucher les bords, et les .row de Bootstrap des marges de
       -8px. C'est voulu, ça tient dans le padding, et ça n'a aucune
       raison d'être atteignable au défilement.

       Rien n'est masqué au passage : aucun contenu de modale ne se lit
       horizontalement. */
    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    padding:
            var(--m-pad-y)
            var(--m-pad-x)
            0;
}


/* =========================================================================
   SECTIONS
   ========================================================================= */

.app-modal-section + .app-modal-section,
.profile-edit-section + .profile-edit-section {
    margin-top: 24px;
    padding-top: 24px;

    border-top: 1px solid var(--m-c-border-soft);
}

.app-modal-section-header,
.profile-edit-section-header {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}

.app-modal-section-icon,
.profile-edit-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    color: var(--m-c-accent);

    background: var(--m-c-accent-soft);

    border-radius: 12px;

    font-size: 1rem;
}

.app-modal-section-header h6,
.profile-edit-section-header h6 {
    margin: 0;

    color: var(--m-c-heading);

    font-size: var(--m-fs-section);
    font-weight: 600;

    line-height: 1.35;
}

.app-modal-section-header p,
.profile-edit-section-header p {
    margin: 2px 0 0;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);
    line-height: 1.5;
}


/* =========================================================================
   CHAMPS
   ========================================================================= */

.app-modal-label,
.profile-edit-label {
    margin-bottom: 6px;

    color: var(--m-c-body);

    font-size: var(--m-fs-label);
    font-weight: 600;
}

.app-modal-control,
.profile-edit-control {
    min-height: 48px;

    color: var(--m-c-heading);

    border-color: var(--m-c-field-border);
    border-radius: var(--m-radius-field);

    font-size: var(--m-fs-body);

    box-shadow: none;
}

.app-modal-control::placeholder,
.profile-edit-control::placeholder {
    color: #98a2ac;
}

.app-modal-control:focus,
.profile-edit-control:focus {
    border-color: var(--m-c-accent);

    box-shadow:
            0 0 0 3px var(--m-c-accent-ring);
}

.app-modal-control:disabled,
.app-modal-control[readonly] {
    color: var(--m-c-body);

    background: var(--m-c-surface);
}


/* Message d'erreur sous le champ */

.app-modal .error-message,
.profile-edit-modal .error-message {
    display: block;

    margin-top: 6px;

    color: var(--m-c-danger);

    font-size: 0.8125rem;
    line-height: 1.4;
}

.app-modal .is-invalid,
.profile-edit-modal .is-invalid {
    border-color: var(--m-c-danger) !important;
}


/* Astérisque des champs obligatoires */

.app-modal-label .error,
.profile-edit-label .error {
    margin-left: 2px;

    color: var(--m-c-danger);

    font-weight: 700;
}


/* Bootstrap Select */

.app-modal .bootstrap-select,
.profile-edit-modal .bootstrap-select {
    width: 100% !important;
}

/* =========================================================================
   LISTES DÉROULANTES  (bootstrap-select)
   -------------------------------------------------------------------------
   Le chevron est remis à zéro puis redessiné une seule fois, sur le
   conteneur .bootstrap-select. Trois sources se superposaient avant :
   la flèche en image de fond de form-select (passée par data-style, et
   posée tantôt sur le bouton, tantôt sur le conteneur), le .caret de
   bootstrap-select, et le ::after de Bootstrap. D'où des chevrons en
   double sur certaines listes, absents sur d'autres.

   Le nôtre est posé sur le conteneur et non sur le bouton : c'est le
   seul élément dont la structure ne change pas d'une version de
   bootstrap-select à l'autre.
   ========================================================================= */

/* 1. On efface tout ce qui pourrait dessiner une flèche */

.app-modal .bootstrap-select,
.app-modal .bootstrap-select > .dropdown-toggle,
.profile-edit-modal .bootstrap-select,
.profile-edit-modal .bootstrap-select > .dropdown-toggle {
    background-image: none !important;
}

.app-modal .bootstrap-select .caret,
.app-modal .bootstrap-select .bs-caret,
.app-modal .bootstrap-select > .dropdown-toggle::after,
.app-modal .bootstrap-select > .dropdown-toggle::before,
.profile-edit-modal .bootstrap-select .caret,
.profile-edit-modal .bootstrap-select .bs-caret,
.profile-edit-modal .bootstrap-select > .dropdown-toggle::after,
.profile-edit-modal .bootstrap-select > .dropdown-toggle::before {
    display: none !important;
}


/* 2. Le champ */

.app-modal .bootstrap-select > .dropdown-toggle,
.profile-edit-modal .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;

    min-height: 48px;

    padding-right: 36px;

    color: var(--m-c-heading);

    background-color: #fff;

    border: 1px solid var(--m-c-field-border);
    border-radius: var(--m-radius-field);

    font-size: var(--m-fs-body);

    box-shadow: none;
}


/* 3. Le chevron, une bonne fois */

.app-modal .bootstrap-select,
.profile-edit-modal .bootstrap-select {
    position: relative;
}

.app-modal .bootstrap-select::after,
.profile-edit-modal .bootstrap-select::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;

    width: 16px;
    height: 16px;

    background-color: var(--m-c-body);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;

    transform: translateY(-50%);
    transform-origin: center;

    transition: transform 0.15s ease;

    pointer-events: none;
}


/* Liste ouverte : le chevron pointe vers le haut */

.app-modal .bootstrap-select.show::after,
.profile-edit-modal .bootstrap-select.show::after {
    transform: translateY(-50%) rotate(180deg);
}


/* =========================================================================
   PASTILLE DE TITRE DE SECTION
   Ex. : « Adresse mail  [PRINCIPALE] ». Remplace les badges du thème, qui
   arrivaient en bleu au milieu d'une modale violette.
   ========================================================================= */

.app-modal-pill {
    display: inline-flex;
    align-items: center;

    margin-left: 8px;

    padding: 3px 9px;

    color: var(--m-c-accent);

    background: var(--m-c-accent-soft);

    border-radius: 999px;

    font-size: 0.6875rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    vertical-align: middle;
}


/* =========================================================================
   NOTE D'INFORMATION
   -------------------------------------------------------------------------
   Encart explicatif à l'intérieur d'une section : « un code vous sera
   envoyé », « l'ancienne adresse reste active », etc. Fond teinté de
   l'accent en cours, donc neutre dans une is-view et rouge dans une
   is-delete, sans règle supplémentaire.

   .profile-phone-info et .profile-phone-otp-info sont les anciens noms,
   conservés en alias. Ils étaient définis dans settings-profile.css et
   avaient été oubliés lors du déplacement des modales vers ce fichier :
   les modales mail et téléphone perdaient leur habillage, l'icône
   repassant au-dessus du texte faute de display: flex.
   ========================================================================= */

.app-modal-note,
.profile-phone-info,
.profile-phone-otp-info {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 14px;
    padding: 14px 16px;

    background: var(--m-c-accent-soft);

    border: 1px solid var(--m-c-border);
    border-radius: 12px;
}

.app-modal-note > i,
.profile-phone-info > i,
.profile-phone-otp-info > i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--m-c-accent);

    font-size: 1.0625rem;
}

.app-modal-note > div,
.profile-phone-info > div,
.profile-phone-otp-info > div {
    min-width: 0;
}

.app-modal-note strong,
.profile-phone-info strong,
.profile-phone-otp-info strong {
    display: block;

    margin-bottom: 3px;

    color: var(--m-c-heading);

    font-size: var(--m-fs-small);
    font-weight: 600;

    line-height: 1.4;
}

.app-modal-note p,
.profile-phone-info p,
.profile-phone-otp-info p {
    margin: 0;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);
    line-height: 1.55;
}

.app-modal-note p + p,
.profile-phone-info p + p,
.profile-phone-otp-info p + p {
    margin-top: 6px;
}


/* =========================================================================
   ERREUR GLOBALE DU FORMULAIRE
   Affichée juste au-dessus de la barre d'actions, là où l'œil arrive
   avant de cliquer.
   ========================================================================= */

.app-modal .signup-global-error,
.profile-edit-modal .signup-global-error {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 16px;
    padding: 12px 14px;

    color: var(--m-c-danger);

    background: #fef3f2;

    border: 1px solid #fadcd7;
    border-radius: 12px;

    font-size: var(--m-fs-small);
    font-weight: 500;
    line-height: 1.5;
}


/* =========================================================================
   BANDEAU D'EN-TÊTE  (is-view)
   Ce qu'on regarde en premier : de quoi il s'agit, sa référence, sa date.
   ========================================================================= */

.app-modal-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 14px;

    padding: 14px 16px;
    margin-bottom: 20px;

    background: var(--m-c-surface);

    border: 1px solid var(--m-c-border);
    border-radius: 12px;
}

.app-modal-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    color: #7441d4;

    background: #f3eefd;

    border-radius: 12px;

    font-size: 1.1rem;
}

.app-modal-hero-main {
    min-width: 0;
}

.app-modal-hero-title {
    color: var(--m-c-heading);

    font-size: var(--m-fs-body);
    font-weight: 600;

    line-height: 1.35;
}

.app-modal-hero-sub {
    margin-top: 3px;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);

    overflow-wrap: anywhere;
}

.app-modal-hero-aside {
    color: var(--m-c-body);

    font-size: var(--m-fs-small);

    text-align: right;
}


/* =========================================================================
   RÉCAPITULATIF DE MONTANTS
   ========================================================================= */

.app-modal-summary {
    padding: 4px 16px;

    background: var(--m-c-surface);

    border: 1px solid var(--m-c-border);
    border-radius: 12px;
}

.app-modal-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 42px;

    color: var(--m-c-body);

    font-size: var(--m-fs-body);
}

.app-modal-summary-row strong {
    color: var(--m-c-heading);

    font-size: var(--m-fs-body);
    font-weight: 600;

    white-space: nowrap;
}

.app-modal-summary-row strong small {
    margin-left: 4px;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);
    font-weight: 600;
}

.app-modal-summary-separator {
    height: 1px;

    background: var(--m-c-border);
}

.app-modal-summary-row.is-total {
    min-height: 48px;

    color: var(--m-c-heading);

    font-weight: 600;
}

.app-modal-summary-row.is-total strong {
    color: #7441d4;

    font-size: 1.0625rem;
}

.app-modal-summary-row.is-total strong small {
    color: #7441d4;
}


/* =========================================================================
   STATUT
   ========================================================================= */

.app-modal-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-top: 2px;

    padding: 5px 11px;

    border-radius: 999px;

    font-size: var(--m-fs-small);
    font-weight: 600;
}

.app-modal-status.is-completed {
    color: var(--m-c-success);

    background: rgba(25, 122, 51, 0.10);
}

.app-modal-status.is-pending {
    color: #8a5a00;

    background: rgba(242, 178, 38, 0.16);
}

.app-modal-status.is-failed {
    color: var(--m-c-danger);

    background: rgba(180, 35, 24, 0.10);
}


/* Référence technique — le monospace sert à comparer caractère par
   caractère avec un mail ou un relevé. */

.app-modal-mono {
    font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            monospace;

    font-size: var(--m-fs-small);
    letter-spacing: 0.01em;
}


/* Action secondaire en lien, à côté du bouton principal */

.app-modal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 14px;

    color: #7441d4;

    background: none;
    border: 0;

    font-size: var(--m-fs-body);
    font-weight: 600;

    text-decoration: none;
}

.app-modal-link:hover,
.app-modal-link:focus {
    color: #5f2fb5;

    text-decoration: underline;
}


@media (max-width: 575.98px) {

    .app-modal-hero {
        grid-template-columns: auto minmax(0, 1fr);

        gap: 12px;
    }

    .app-modal-hero-aside {
        grid-column: 2;

        margin-top: -4px;

        text-align: left;
    }

    .app-modal-link {
        width: 100%;
    }
}


/* =========================================================================
   CONSULTATION  (is-view)
   Pas de champ : des lignes en lecture seule, calées sur les tuiles des
   pages de compte.
   ========================================================================= */

/* Identité — avatar, nom, localisation. L'avatar garde le violet de
   marque même en mode consultation : il désigne une personne, pas une
   action. */

.app-modal-identity {
    display: flex;
    align-items: center;

    gap: 16px;

    padding-bottom: 20px;
    margin-bottom: 20px;

    border-bottom: 1px solid var(--m-c-border-soft);
}

.app-modal-identity-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 60px;
    height: 60px;

    color: #7441d4;

    background: #f3eefd;

    border-radius: 50%;

    font-size: 1.25rem;
    font-weight: 700;

    letter-spacing: 0.02em;
}

.app-modal-identity-main {
    min-width: 0;
}

.app-modal-identity-main h4 {
    margin: 0;

    color: var(--m-c-heading);

    font-size: 1.125rem;
    font-weight: 600;

    line-height: 1.3;

    overflow-wrap: anywhere;
}

.app-modal-identity-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 6px;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);
}

.app-modal-identity-location .fi {
    flex: 0 0 auto;
}


/* Titre de groupe */

.app-modal-view-title {
    margin-bottom: 10px;

    color: var(--m-c-body);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-modal-view-group + .app-modal-view-group {
    margin-top: 20px;
}


/* Grille de lignes */

.app-modal-view-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.app-modal-view-row-wide {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {

    .app-modal-view-grid {
        grid-template-columns: 1fr;
    }

    .app-modal-view-row-wide {
        grid-column: auto;
    }

    .app-modal-identity-avatar {
        width: 52px;
        height: 52px;

        font-size: 1.125rem;
    }
}

.app-modal-view-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.app-modal-view-row {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 14px 16px;

    background: var(--m-c-surface);

    border: 1px solid var(--m-c-border);
    border-radius: 12px;
}

.app-modal-view-row > div {
    min-width: 0;
}

/* Les icônes de ligne gardent le violet de marque même en mode
   consultation : elles nomment une donnée, elles ne proposent pas une
   action. Seuls les boutons passent au neutre. */

.app-modal-view-row .app-modal-section-icon {
    color: #7441d4;

    background: #f3eefd;
}

.app-modal-view-label {
    display: block;

    margin-bottom: 4px;

    color: var(--m-c-body);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-modal-view-value {
    display: block;

    color: var(--m-c-heading);

    font-size: var(--m-fs-body);
    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* =========================================================================
   SUPPRESSION  (is-delete)
   Une seule question, la conséquence énoncée en clair, aucun autre
   contenu : c'est ce qui distingue une confirmation d'un formulaire.
   ========================================================================= */

.app-modal-confirm {
    padding: 4px 0 0;

    text-align: center;
}

.app-modal-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: 16px;

    color: var(--m-c-danger);

    background: var(--m-c-accent-soft);

    border-radius: 50%;

    font-size: 1.35rem;
}

.app-modal-confirm h6 {
    margin: 0 0 8px;

    color: var(--m-c-heading);

    font-size: var(--m-fs-title);
    font-weight: 600;

    line-height: 1.35;
}

.app-modal-confirm p {
    margin: 0;

    color: var(--m-c-body);

    font-size: var(--m-fs-body);
    line-height: 1.6;
}

.app-modal-confirm strong {
    color: var(--m-c-heading);

    font-weight: 600;
}


/* =========================================================================
   ACTIONS
   Barre collée en bas du corps défilant.
   ========================================================================= */

.app-modal-actions,
.profile-edit-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;

    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin:
            26px
            calc(var(--m-pad-x) * -1)
            0;

    padding:
            16px
            var(--m-pad-x)
            var(--m-pad-y);

    background: #fff;

    border-top: 1px solid var(--m-c-border-soft);
}

.app-modal.is-delete .app-modal-actions {
    justify-content: center;
}


/* Barre d'actions avec mention à gauche (« * Champ obligatoire ») */

.app-modal-actions.has-note {
    justify-content: space-between;
}

.app-modal-required-note,
.recipient-required-note {
    display: flex;
    align-items: center;

    gap: 4px;

    color: var(--m-c-body);

    font-size: 0.8125rem;
}

.app-modal-required-note .error,
.recipient-required-note .error {
    color: var(--m-c-danger);

    font-weight: 700;
}

.app-modal-actions-group,
.recipient-modal-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.app-modal-cancel,
.app-modal-submit,
.profile-edit-cancel,
.profile-edit-submit {
    box-shadow: none !important;
}

.app-modal-cancel,
.profile-edit-cancel {
    min-width: 120px;
    min-height: 46px;

    color: var(--m-c-body);

    background: #f2f4f6;

    border: 0;
    border-radius: 999px;

    font-size: var(--m-fs-body);
    font-weight: 600;
}

.app-modal-cancel:hover,
.profile-edit-cancel:hover {
    color: var(--m-c-heading);

    background: #e7ebee;
}

.app-modal-submit,
.profile-edit-submit {
    min-width: 220px;
    min-height: 46px;

    color: #fff;

    background: var(--m-c-action);

    border: 1px solid var(--m-c-action);
    border-radius: 999px;

    font-size: var(--m-fs-body);
    font-weight: 600;
}

.app-modal-submit:hover,
.app-modal-submit:focus,
.profile-edit-submit:hover,
.profile-edit-submit:focus {
    color: #fff;

    background: var(--m-c-action-dark);
    border-color: var(--m-c-action-dark);
}

.app-modal-cancel:focus-visible,
.app-modal-submit:focus-visible,
.profile-edit-cancel:focus-visible,
.profile-edit-submit:focus-visible {
    outline: 2px solid var(--m-c-accent);
    outline-offset: 2px;
}

.app-modal-submit:disabled,
.profile-edit-submit:disabled {
    opacity: 0.55;
}


/* =========================================================================
   INDICATIF + NUMÉRO  (modale téléphone)
   ========================================================================= */

.app-modal-phone-group,
.profile-phone-input-group {
    flex-wrap: nowrap;
}

.app-modal-phone-country,
.profile-phone-country {
    min-width: 120px;

    background: var(--m-c-surface);

    border: 1px solid var(--m-c-field-border);
    border-right: 0;
    border-radius: var(--m-radius-field) 0 0 var(--m-radius-field);
}

.app-modal-phone-country .bootstrap-select,
.profile-phone-country .bootstrap-select {
    width: 100% !important;
}

.app-modal-phone-country .bootstrap-select > .dropdown-toggle,
.profile-phone-country .bootstrap-select > .dropdown-toggle {
    min-height: 46px;

    padding-left: 12px;
    padding-right: 26px;

    background-color: transparent;

    border: 0 !important;
    border-radius: var(--m-radius-field) 0 0 var(--m-radius-field);

    box-shadow: none !important;
}

.app-modal-phone-number,
.profile-phone-number {
    min-width: 0;

    border-radius: 0 var(--m-radius-field) var(--m-radius-field) 0 !important;
}

.app-modal-phone-group:focus-within,
.profile-phone-input-group:focus-within {
    border-radius: var(--m-radius-field);

    box-shadow:
            0 0 0 3px var(--m-c-accent-ring);
}

.app-modal-phone-group:focus-within .app-modal-phone-country,
.app-modal-phone-group:focus-within .app-modal-phone-number,
.profile-phone-input-group:focus-within .profile-phone-country,
.profile-phone-input-group:focus-within .profile-phone-number {
    border-color: var(--m-c-accent);
}

.app-modal-phone-group:focus-within .app-modal-phone-number,
.profile-phone-input-group:focus-within .profile-phone-number {
    box-shadow: none;
}


/* =========================================================================
   RECHERCHE DANS UNE LISTE DÉROULANTE  (bootstrap-select)
   -------------------------------------------------------------------------
   SÉLECTEURS NON PRÉFIXÉS, ET C'EST VOULU.

   Tout .selectpicker d'une modale porte data-container="body" (voir
   l'avertissement en tête de fichier) : sa liste est alors déplacée à la
   fin du <body>, HORS de .app-modal. Un sélecteur commençant par
   .app-modal ne l'atteint donc jamais - c'est la raison pour laquelle
   ce champ de recherche était resté brut jusqu'ici.

   Conséquence assumée : ces règles s'appliquent à TOUS les selectpicker
   du site, modale ou non. C'est ce qu'on veut - un champ de recherche
   doit se ressembler partout - mais sache que tu touches aussi
   l'inscription et le formulaire de devis en modifiant cette section.

   Les tokens --m-* ne sont pas disponibles ici, pour la même raison :
   ils sont déclarés sur .app-modal. D'où les valeurs littérales.

   RAPPEL : la CSS ne peut pas écrire le texte d'invite. Sans
   data-live-search-placeholder="…" sur le <select>, le champ reste une
   case vide et personne ne devine qu'on peut taper dedans.
   ========================================================================= */

.bs-searchbox {
    padding: 10px 12px 6px;
}

.bs-searchbox .form-control {
    min-height: 42px;

    padding: 8px 12px;

    color: #2b3034;

    border: 1px solid #dbe1e6;
    border-radius: 10px;

    font-size: 0.9375rem;

    box-shadow: none;
}

.bs-searchbox .form-control::placeholder {
    color: #98a2ac;
}

.bs-searchbox .form-control:focus {
    border-color: #7441d4;

    box-shadow: 0 0 0 3px rgba(116, 65, 212, 0.12);
}

/* « Aucun résultat » : bootstrap-select l'affiche en texte nu, collé au
   bord gauche. */

.bootstrap-select .no-results {
    padding: 10px 12px;

    color: #5c6670;

    background: transparent;

    font-size: 0.875rem;
}


/* =========================================================================
   CHAMP DE PIÈCE  (dépôt de fichier)
   -------------------------------------------------------------------------
   Remplace le <input type="file"> natif, qui affiche le bouton gris du
   navigateur et un « Aucun fichier choisi » que la largeur d'une colonne
   tronque en « Auc...hoisi ».

       <div class="col-12 col-sm-4 app-modal-file" data-kyc-field>
         <span class="form-label app-modal-label">Recto du document</span>
         <input type="file" class="app-modal-file-input" id="..." aria-label="...">
         <label class="app-modal-file-tile" for="...">
           <span class="app-modal-file-icon"><i class="fas fa-camera"></i></span>
           <span class="app-modal-file-text">
             <span class="app-modal-file-action">Choisir une photo</span>
             <span class="app-modal-file-name">JPEG, PNG ou WebP</span>
           </span>
         </label>
       </div>

   L'input est masqué à l'œil, JAMAIS en display:none : il doit rester
   atteignable au clavier, et c'est lui qui porte le focus visible.

   .is-filled est posée par le script de la page une fois le fichier
   choisi. Sans script, la tuile reste utilisable, elle n'affiche
   simplement pas le nom du fichier.
   ========================================================================= */

.app-modal-file {
    position: relative;
}

.app-modal-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}

.app-modal-file-tile {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 12px 14px;

    background: var(--m-c-surface);

    border: 1px dashed var(--m-c-field-border);
    border-radius: var(--m-radius-field);

    cursor: pointer;

    transition:
            border-color 0.15s ease,
            background-color 0.15s ease;
}

.app-modal-file-tile:hover {
    background: var(--m-c-accent-soft);

    border-color: var(--m-c-accent);
}

.app-modal-file-input:focus-visible + .app-modal-file-tile {
    outline: 2px solid var(--m-c-accent);
    outline-offset: 2px;
}

.app-modal-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    color: var(--m-c-accent);

    background: var(--m-c-accent-soft);

    border-radius: 10px;

    font-size: 0.95rem;
}

.app-modal-file-text {
    min-width: 0;
}

.app-modal-file-action {
    display: block;

    color: var(--m-c-heading);

    font-size: var(--m-fs-body);
    font-weight: 600;

    line-height: 1.35;
}

/* Un nom de fichier d'appareil photo fait facilement quarante
   caractères. Il est coupé, pas replié : les tuiles d'une même ligne
   doivent garder la même hauteur. */

.app-modal-file-name {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: var(--m-c-body);

    font-size: var(--m-fs-small);

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pièce choisie : le pointillé devient plein et la tuile prend
   l'accent. L'état des trois se lit d'un coup d'œil. */

.app-modal-file-tile.is-filled {
    background: var(--m-c-accent-soft);

    border-style: solid;
    border-color: var(--m-c-accent);
}

.app-modal-file-tile.is-filled .app-modal-file-name {
    color: var(--m-c-heading);
    font-weight: 500;
}

/* Pièce manquante ou refusée. Le message d'erreur est en haut de la
   modale, les tuiles en bas : sans ce repère, il faut lire le message
   puis redescendre chercher laquelle des trois est en cause.

   .is-invalid est posée par le script de la page, et retirée dès qu'un
   fichier est choisi. */

.app-modal-file-tile.is-invalid {
    background: #fef3f2;

    border-style: solid;
    border-color: var(--m-c-danger);
}

.app-modal-file-tile.is-invalid .app-modal-file-icon {
    color: var(--m-c-danger);

    background: #fee4e2;
}


/* =========================================================================
   MOBILE  (< 576px)
   La modale part du bas et occupe la largeur : c'est le geste attendu sur
   téléphone, et ça rend les 16px de marge latérale à un formulaire.
   ========================================================================= */

@media (max-width: 575.98px) {

    .app-modal,
    .profile-edit-modal {
        --m-pad-x: 16px;
        --m-pad-y: 18px;
        --m-fs-title: 1.0625rem;
    }

    .app-modal .modal-dialog,
    .profile-edit-modal .modal-dialog {
        max-width: none;

        margin: 10px;
    }

    .app-modal-content,
    .profile-edit-modal-content {
        border-radius: 14px;
    }

    .app-modal-body,
    .profile-edit-modal-body {
        max-height: calc(100dvh - 190px);
    }

    /* Sur téléphone, le descriptif de section passe sur deux ou trois
       lignes : l'icône se cale en haut, plus au milieu du pavé. */

    .app-modal-section-header,
    .profile-edit-section-header {
        align-items: flex-start;
    }

    .app-modal-section-icon,
    .profile-edit-section-icon {
        width: 36px;
        height: 36px;

        margin-top: 2px;
    }

    .app-modal-actions,
    .profile-edit-actions {
        flex-direction: column-reverse;

        gap: 8px;
    }

    /* Ordre imposé plutôt que déduit du sens du flux : action principale
       en haut, action secondaire dessous, mention en dernier. */

    .app-modal-actions.has-note {
        flex-direction: column;
    }

    .app-modal-actions.has-note .app-modal-actions-group,
    .app-modal-actions.has-note .recipient-modal-actions {
        order: 1;
    }

    .app-modal-actions.has-note .app-modal-required-note,
    .app-modal-actions.has-note .recipient-required-note {
        order: 2;

        margin-top: 2px;
    }

    .app-modal-actions-group,
    .recipient-modal-actions {
        flex-direction: column-reverse;

        gap: 8px;

        width: 100%;
    }

    .app-modal-required-note,
    .recipient-required-note {
        justify-content: center;

        width: 100%;
    }

    .app-modal-cancel,
    .app-modal-submit,
    .profile-edit-cancel,
    .profile-edit-submit {
        width: 100%;
        min-width: 0;
    }

    .app-modal-phone-country,
    .profile-phone-country {
        min-width: 106px;
    }

    /* Une seule tuile par ligne : à 320px, trois côte à côte ne
       laissaient plus de place au nom du fichier. */

    .app-modal-file-tile {
        padding: 12px;

        gap: 10px;
    }

    .app-modal-file-icon {
        width: 34px;
        height: 34px;
    }
}


/* =========================================================================
   GRANDS ÉCRANS  (>= 1600px)
   ========================================================================= */

@media (min-width: 1600px) {

    .app-modal,
    .profile-edit-modal {
        --m-fs-label: 0.9375rem;
        --m-fs-small: 0.9375rem;
        --m-fs-body: 1rem;
        --m-fs-section: 1rem;
        --m-fs-title: 1.25rem;

        --m-pad-x: 30px;
        --m-pad-y: 26px;
    }

    .app-modal .modal-dialog,
    .profile-edit-modal .modal-dialog {
        max-width: 820px;
    }

    .app-modal.is-view .modal-dialog {
        max-width: 680px;
    }
}