a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

/* 16px à toutes les largeurs. Le modèle de projet descendait à 14px sous 768px :
   texte et champs Bootstrap (en rem) rapetissaient sur téléphone, et iOS
   zoomait la page à chaque saisie dans un champ de moins de 16px. */
html {
  font-size: 16px;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Style global pour le titre de la page */
.page-container {
    padding: 10px;
    margin-bottom: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: #04AFF0;
    margin: 0;
}

/* Bouton Ajouter un utilisateur */
.btn-add-user {
    background-color: #04AFF0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

    .btn-add-user i {
        font-size: 16px;
    }

    .btn-add-user:hover {
        background-color: #0390c8;
    }

/* Style pour la table */
.table-container {
    overflow-x: auto;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    /* En-tête de la table */
    .styled-table thead tr {
        background-color: #F9F9F9;
        text-align: left;
        font-weight: bold;
    }

    .styled-table th {
        padding: 12px 15px;
        color: #000;
    }

    /* Corps de la table */
    .styled-table tbody tr {
        border-bottom: 1px solid #ddd;
    }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #04AFF0;
        }

    .styled-table td {
        padding: 12px 15px;
        color: #04AFF0;
        background-color: #fff;
    }

/* Boutons d'actions */
.btn-action {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    transition: transform 0.2s ease;
}

.btn-edit {
    color: #28a745; /* Vert pour édition */
    font-size: 16px;
}

.btn-delete {
    color: #dc3545; /* Rouge pour suppression */
    font-size: 16px;
}

.btn-action:hover {
    transform: scale(1.1);
}

/* Bouton Ajouter un utilisateur */
.btn-add-user {
    background-color: #04AFF0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

    .btn-add-user i {
        font-size: 16px;
    }

    .btn-add-user:hover {
        background-color: #0390c8;
    }

/* Style pour la table */
.table-container {
    overflow-x: auto;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .styled-table thead tr {
        background-color: #F9F9F9;
        text-align: left;
        font-weight: bold;
    }

    .styled-table th {
        padding: 12px 15px;
        color: #000;
    }

    .styled-table tbody tr {
        border-bottom: 1px solid #ddd;
    }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #04AFF0;
        }

    .styled-table td {
        padding: 12px 15px;
        color: #04AFF0;
        background-color: #fff;
    }

/* Boutons d'actions */
.btn-action {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    transition: transform 0.2s ease;
}

.btn-edit {
    color: #28a745; /* Vert pour édition */
    font-size: 16px;
}

.btn-delete {
    color: #dc3545; /* Rouge pour suppression */
    font-size: 16px;
}

.btn-action:hover {
    transform: scale(1.1);
}

/* Modal Style */
.modal-header {
    background-color: #04AFF0;
    color: #fff;
    border-bottom: 1px solid #ddd;
}

.modal-body {
    padding: 20px;
}

    .modal-body .form-control {
        margin-bottom: 10px;
    }

.modal-footer {
    display: flex;
    justify-content: flex-end;
}

    .modal-footer button {
        background-color: #04AFF0;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

        .modal-footer button:hover {
            background-color: #0390c8;
        }
.btnSubmit {
    text-align: center;
}
.modal-title {
    font-size: 1.3rem; 
    font-weight: bold;  
    color: white; 
}
.grise {
    background-color: #d3d3d3 !important; 
    color: dimgray !important;
    border: 1px solid #c0c0c0 !important; 
    cursor: not-allowed !important; 
    pointer-events: none !important; 
}
body {
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #f1f3f6;
    flex-direction: column;
}

/* Sidebar styles */
.sidebar {
    width: 250px;
    background-color: #fff;
    color: #343a40;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0;
    bottom: 0;
    border-right: 1px solid #ddd;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    height: 100vh;
    overflow-y: auto;
}

.sidebar .logo {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 30px;
}

        .sidebar .logo img {
            max-width: 150px;
        }

    .sidebar .menu {
        flex-grow: 1;
        margin-top: 24px;
        padding: 0 10px;
        overflow-y: auto;
    }

        .sidebar .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            /* Serre : six familles et leurs sous-menus doivent tenir sous les yeux
               sans defiler, sinon le menu se parcourt a l'aveugle. */
            .sidebar .menu ul li {
                margin: 2px 0;
            }

            /* Un seul dessin pour les deux natures d'entree : l'entete d'un groupe
               est un bouton (il deplie, il ne navigue pas), une feuille est un lien. */
            .sidebar .menu .menu-entree {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 9px 12px;
                border: 0;
                border-radius: 8px;
                background: none;
                color: #3F5965;
                font-family: inherit;
                font-size: 14.5px;
                font-weight: 600;
                text-align: left;
                text-decoration: none;
                cursor: pointer;
                transition: background-color .15s ease, color .15s ease;
            }

                /* Survol discret : l'ancien aplat cyan sur toute la ligne criait
                   plus fort que la page ouverte, qu'il fallait pourtant reperer. */
                .sidebar .menu .menu-entree:hover {
                    background-color: #F1F5F8;
                    color: #0396CE;
                }

                .sidebar .menu .menu-entree:focus-visible {
                    outline: 2px solid #04AFF0;
                    outline-offset: 2px;
                }

            .sidebar .menu .menu-libelle {
                display: flex;
                align-items: center;
                gap: 11px;
                min-width: 0;
            }

            .sidebar .menu .icon {
                flex: none;
                font-size: 19px;
                line-height: 1;
                color: #7C8B96;
                transition: color .15s ease;
            }

            .sidebar .menu .menu-entree:hover .icon,
            .submenu-container.submenu-active > .menu-entree .icon {
                color: #04AFF0;
            }

            /* Famille depliee : reperable sans se faire passer pour la page ouverte. */
            .submenu-container.submenu-active > .menu-entree {
                color: #0B7FB0;
            }

            /* Feuille de premier niveau : un menu qui ne deplie rien, comme
               Tableau de bord, navigue directement. Meme couleur d'appartenance
               que la page ouverte au niveau 2, pour rester le meme langage
               visuel qu'on descende ou non d'un cran. */
            .sidebar .menu .menu-item > .menu-entree.page-active {
                background-color: #EAF7FE;
                color: #0B7FB0;
            }

                .sidebar .menu .menu-item > .menu-entree.page-active .icon {
                    color: #04AFF0;
                }


/* Niveaux 2 et 3. Un filet vertical porte la hierarchie : avec trois niveaux,
   le seul retrait ne dit plus a quoi une entree se rattache. */
.submenu {
    display: none;
    margin: 2px 0 6px 22px;
    padding-left: 10px;
    border-left: 1px solid #E1E7EC;
}

/* Enfant direct, et non descendant : sans cela, deplier une famille ouvrirait
   du meme coup tous les groupes qu'elle contient. */
.submenu-container.submenu-active > .submenu,
.submenu-groupe.submenu-active > .submenu {
    display: block;
}

    .sidebar .menu .submenu a,
    .sidebar .menu .submenu .menu-entree {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 7px 10px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: #6C7A86;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }

        .sidebar .menu .submenu a:hover,
        .sidebar .menu .submenu .menu-entree:hover {
            background-color: #F1F5F8;
            color: #0396CE;
        }

/* La page ouverte : liseré et teinte douce, la ou l'aplat plein d'avant noyait
   le libelle sous la couleur. */
.sidebar .menu .submenu .submenu-hovered {
    background-color: #EAF7FE;
    color: #0B7FB0;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #04AFF0;
}

/* Groupe de niveau 2 replie : il doit dire qu'il abrite la page ouverte, sinon
   celle-ci disparait de l'ecran quand on referme le groupe. */
.sidebar .menu .submenu-groupe.contient-actif > .menu-entree {
    color: #0B7FB0;
}

.toggle-icon {
    flex: none;
    font-size: 12px;
    color: #9AA7B1;
    transition: transform .2s ease-in-out, color .15s ease;
}

.sidebar .menu .submenu-active > .menu-entree .toggle-icon {
    transform: rotate(90deg);
    color: #04AFF0;
}

.sidebar .footer {
    border-top: 1px solid #ddd;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: sticky;
    bottom: 0;
    z-index: 10000000;
    background-color: white;
}

    .sidebar .footer .admin {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 14px;
        font-weight: 600;
        color: #343a40;
    }

        .sidebar .footer .admin .icon {
            font-size: 20px;
            color: #51c7eb;
        }

    .sidebar .footer .logout {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: #51c7eb;
        font-size: 20px;
        transition: color 0.3s;
    }

        .sidebar .footer .logout:hover {
            color: #343a40;
        }


.main-content {
    margin-left: 250px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    overflow-y: auto;
    transition: all 0.4s ease;
    width: calc(100% - 250px);
}


.no-sidebar .main-content {
    margin-left: 0;
    width: 100%;
}

.disabled-btn {
    pointer-events: none !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}


    .sidebar.collapsed {
        margin-left: -250px;
    }

.main-content {
    transition: all 0.4s ease;
    margin-left: 250px;
}

    .main-content.expanded {
        margin-left: 0;
        width: 100%;
    }

#sidebarToggleDesktop {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-color: #0d6efd;
    color: white;
    border: none;
    transition: transform 0.3s ease;
}

    #sidebarToggleDesktop:hover {
        transform: scale(1.1);
    }
#sidebarIcon {
    transition: transform 0.3s ease;
}

/* ── Mobile et tablette : barre du haut et tiroir de navigation ──────────
   Sous 992px, la sidebar fixe mangeait un tiers de l'écran d'une tablette en
   portrait. Elle devient un tiroir qui glisse par-dessus la page, ouvert depuis
   une barre figée en haut. Au-delà de 992px, rien de ce bloc ne s'applique.

   --pmi-barre-h : hauteur de cette barre, à retrancher par les écrans qui
   calent un élément sous le haut de la fenêtre. */

:root {
    --pmi-barre-h: 0px;
}

.pmi-barre,
.pmi-voile,
.pmi-tiroir-fermer {
    display: none;
}

@media (max-width: 991.98px) {
    :root {
        --pmi-barre-h: 56px;
    }

    .pmi-barre {
        position: sticky;
        top: 0;
        z-index: 1020;
        display: flex;
        flex: none;
        align-items: center;
        gap: 6px;
        height: var(--pmi-barre-h);
        padding: 0 16px 0 6px;
        border-bottom: 1px solid #E4E8EC;
        background-color: #FFF;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .pmi-barre-menu,
    .pmi-tiroir-fermer {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: #3F5965;
        transition: background-color .15s ease, color .15s ease;
    }

    .pmi-barre-menu { font-size: 28px; }
    .pmi-tiroir-fermer { font-size: 20px; }

        .pmi-barre-menu:hover,
        .pmi-tiroir-fermer:hover {
            background-color: #F1F5F8;
            color: #0396CE;
        }

        .pmi-barre-menu:focus-visible,
        .pmi-tiroir-fermer:focus-visible {
            outline: 2px solid #04AFF0;
            outline-offset: 2px;
        }

    .pmi-barre-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-width: 44px;
        height: 44px;
        padding: 0 4px;
    }

        .pmi-barre-logo img {
            width: auto;
            height: 36px;
        }

    .pmi-barre-titre {
        min-width: 0;
        overflow: hidden;
        margin-left: 6px;
        color: #2C3E50;
        font-size: 16px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Le tiroir. Fermé, il est hors de l'écran ET masqué : ses liens ne se
       prennent plus au clavier ni par un lecteur d'écran. La visibilité ne
       bascule qu'une fois la glissade finie, pour ne pas couper l'animation. */
    .sidebar,
    .sidebar.collapsed {
        z-index: 1035;
        width: min(300px, 86vw);
        height: 100vh;
        height: 100dvh;
        margin-left: 0;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    .pmi-tiroir-ouvert .sidebar {
        box-shadow: 4px 0 24px rgba(15, 23, 42, .18);
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    .pmi-voile {
        position: fixed;
        inset: 0;
        z-index: 1030;
        display: block;
        background-color: rgba(15, 23, 42, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .pmi-tiroir-ouvert .pmi-voile {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease;
    }

    /* Tiroir ouvert : la page dessous ne défile plus. */
    html.pmi-tiroir-ouvert,
    html.pmi-tiroir-ouvert body {
        overflow: hidden;
    }

    .main-content,
    .main-content.expanded {
        width: 100%;
        margin-left: 0;
    }

    /* En-tête du tiroir plus ramassé : le grand logo y prenait le quart de la
       hauteur d'un téléphone. */
    .sidebar .logo {
        position: relative;
        margin: 14px 0 0;
    }

        .sidebar .logo img {
            max-width: 84px;
        }

    .pmi-tiroir-fermer {
        position: absolute;
        top: 0;
        right: 8px;
    }

    .sidebar .menu {
        margin-top: 12px;
    }

    /* Cibles d'au moins 44px au doigt, et des libellés lisibles. */
    .sidebar .menu .menu-entree {
        min-height: 48px;
        font-size: 15px;
    }

    .sidebar .menu .submenu a,
    .sidebar .menu .submenu .menu-entree {
        min-height: 44px;
        font-size: 14.5px;
    }

    .sidebar .footer .logout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
}

/* Animations réduites à la demande du système : le tiroir apparaît sans
   glisser (!important : l'état ouvert, plus spécifique, redéfinit la transition). */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .sidebar,
    .pmi-voile {
        transition: none !important;
    }
}

/* Une page imprimée fait moins de 992px de large : sans cela, la barre de
   navigation sortirait sur le papier. */
@media print {
    .pmi-barre,
    .pmi-voile {
        display: none !important;
    }
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}

.loader-wrapper {
    text-align: center;
}

.custom-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #e0f7fc;
    border-top: 6px solid #04AFF0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.loader-text {
    font-size: 1.2rem;
    color: #04AFF0;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Profil en lecture seule sur l'écran : annoncé d'emblée, plutôt que découvert
   au premier clic refusé. */
.lecture-seule-bandeau {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 3px solid #04AFF0;
    border-radius: 8px;
    background-color: #EFF8FE;
    color: #0B5C82;
    font-size: 13.5px;
    line-height: 1.5;
}

    .lecture-seule-bandeau .bi { margin-top: 2px; font-size: 15px; }

/* Texte réservé aux lecteurs d'écran : Bootstrap le sort du flux (position
   absolue) sans lui donner de place. Sans ancêtre positionné, il restait là où
   le flux l'aurait mis — au bout de l'en-tête d'un tableau large, hors de son
   cadre défilant — et élargissait toute la page (Demandes standard, Historique
   des BL). Sur mobile, la page entière se dézoomait, et les fenêtres fixes
   prenaient la hauteur de ce faux écran. Calé dans le coin, il ne pèse plus. */
.visually-hidden {
    top: 0;
    left: 0;
}

/* ── Mobile et tablette : règles transverses ─────────────────────────────
   Sous 992px, ce qui conditionne l'usage au doigt vaut pour tous les écrans :
   des champs que iOS n'agrandit pas, des cibles d'au moins 44px, des fenêtres
   qui tiennent dans l'écran. Le dessin de chaque module ne change pas : seules
   les zones de clic grandissent. Au-delà de 992px, rien ne s'applique. */

@media (max-width: 991.98px) {
    /* 16px : en dessous, Safari iOS zoome la page à chaque saisie. !important
       parce que les modules fixent leurs tailles (12 à 15px) par classe, par
       identifiant ou en ligne. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }

    /* Boutons : 44px de haut et de large. inline-flex garde le libellé centré
       quand la hauteur minimale dépasse celle du texte. */
    .btn,
    .btn-action,
    .btn-add-user {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* En passant le bouton en flex, l'espace blanc entre l'icône et le libellé
       disparaît (un conteneur flex ignore le texte vide) : l'icône se collait au
       mot (« ✎Modifier »). Le gap rend la valeur d'une espace. */
    .btn,
    .btn-add-user {
        gap: .25rem;
    }

    .modal-footer .btn,
    .modal-footer button,
    .page-link,
    .swal2-styled {
        min-height: 44px;
    }

    /* La croix de fermeture : même pictogramme, zone de 44px autour. */
    .btn-close,
    .modal-header .btn-close {
        flex: none;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .swal2-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Champs saisis dans une alerte (coût de reprise, motif) : 42px sinon. */
    .swal2-input,
    .swal2-select {
        min-height: 44px;
    }

    /* Case et libellé sur une ligne de 44px, tout entière cliquable. */
    .form-check:not(.form-check-inline):not(.form-switch) {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding-left: 0;
    }

        .form-check:not(.form-check-inline):not(.form-switch) .form-check-input {
            flex: none;
            float: none;
            width: 1.25em;
            height: 1.25em;
            margin: 0;
        }

        .form-check:not(.form-check-inline):not(.form-switch) .form-check-label {
            flex: 1;
            padding: 11px 0;
        }

    /* Fenêtres larges en tablette : Bootstrap les plafonne à 500px entre 576
       et 991px, modal-lg et modal-xl comprises. */
    .modal-dialog.modal-lg:not([class*="modal-fullscreen"]),
    .modal-dialog.modal-xl:not([class*="modal-fullscreen"]) {
        max-width: calc(100% - 3rem);
    }
}

/* Téléphone : les grandes fenêtres (formulaires, fiches, documents) passent en
   plein écran, la page derrière n'est plus d'aucune utilité. Hauteur minimale
   et non fixe : un formulaire plus long que l'écran fait défiler la fenêtre,
   sans déborder de son fond blanc. Les petites confirmations gardent leur
   marge de 8px. Les fenêtres déjà plein écran par conception (signature :
   modal-fullscreen-xl-down) gardent le réglage de Bootstrap. */
@media (max-width: 767.98px) {
    .modal-dialog.modal-lg:not([class*="modal-fullscreen"]),
    .modal-dialog.modal-xl:not([class*="modal-fullscreen"]) {
        width: auto;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

        .modal-dialog.modal-lg:not([class*="modal-fullscreen"]) > .modal-content,
        .modal-dialog.modal-xl:not([class*="modal-fullscreen"]) > .modal-content {
            min-height: 100vh;
            min-height: 100dvh;
            border: 0;
            border-radius: 0;
        }

    /* Fenêtres à corps défilant : en-tête et pied restent en place. */
    .modal-dialog-scrollable.modal-lg,
    .modal-dialog-scrollable.modal-xl {
        height: 100%;
    }

        .modal-dialog-scrollable.modal-lg > .modal-content,
        .modal-dialog-scrollable.modal-xl > .modal-content {
            min-height: 0;
            height: 100%;
        }

    .modal-dialog.modal-lg .modal-header,
    .modal-dialog.modal-lg .modal-footer,
    .modal-dialog.modal-xl .modal-header,
    .modal-dialog.modal-xl .modal-footer {
        border-radius: 0;
    }

    /* En-tête de page commun : le titre et ses boutons passent à la ligne au
       lieu de se serrer sur une seule. */
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .page-title {
        font-size: 26px;
    }
}

/* ── Tout en majuscules à l'écran (règle client du 20/10/2026) ─────────────
   Aucune lettre minuscule ne doit apparaître : textes, libellés, boutons,
   listes, champs, textes d'exemple, fenêtres et notifications. Affichage
   seulement : la valeur enregistrée ne change pas (saisie-majuscules.js
   convertit déjà les données métier ; e-mails, notes et nom/fonction des
   utilisateurs gardent leur casse en base, ils s'affichent simplement en
   capitales). !important : la règle prime sur les composants (Bootstrap,
   SweetAlert) qui remettent text-transform à none.
   Seule exception : un mot de passe, dont la casse compte et ne doit pas
   être travestie. Infobulles et alertes natives : affichage-majuscules.js. */
*,
*::before,
*::after,
::placeholder {
    text-transform: uppercase !important;
}

input[type="password"] {
    text-transform: none !important;
}

input[type="password"]::placeholder {
    text-transform: uppercase !important;
}

/* Circuit court : dossier lancé directement au Contrôle Qualité. */
.badge-circuit-court {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ede7fb;
    color: #5b3fa6;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}