.content{padding: 1rem 2rem 0.5rem;}
.breadcrumb {margin-bottom: 0;font-size: 12px;}
.breadcrumb-item+.breadcrumb-item:before {padding-right: .4rem;content: ">";}
.badge {font-size: 10px;font-weight: 300;}
.alert{padding: 4px 16px; font-size: 12px;}
p.libelle{font-weight: 600; margin: 0; padding: 0; font-size: 11px;}

fieldset.boxFieldset {position: relative; padding: 10px; margin: 10px 0 10px; border: solid 1px #e9e9ef; background: #fbfaff;}
fieldset.boxFieldset legend {position: absolute; top: -10px; left: 10px; width: auto; margin: 0; padding: 0 5px; color: #1863de;  background: #ffffff; font-size: 12px; font-weight: 300;}

.form-label{font-size: 12px; margin-bottom: 2px;}
.form-label span{color: #8e0615;}
.form-control,
.form-select{padding: .15rem .5rem; font-size: .75rem; border-radius: 0;}
/* La flèche d'une liste est une image de fond, à droite : la marge de droite lui garde sa place. */
.form-select{padding-right: 1.5rem; background-position: right .35rem center;}
.btn{border-radius: 0;}
.btn-sm {padding: .15rem .4rem;}

.boxHeaderTable{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 10px;}
.boxHeaderTable .boxRecherche{flex: auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}
.boxHeaderTable .boxRecherche .form-control{border-left: none;}
.boxHeaderTable .boxSeparation{flex: none;align-self: stretch;width: 2px;height: auto;background-color: #edf2f5;}

.nav-tabs .nav-link {border: none;color: #495057;border-bottom: 2px solid transparent;background-color: transparent;}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {color: #3f80ea;border-bottom-color: #3f80ea;}
.nav-tabs .nav-link:hover {color: #495057;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible {outline: none;box-shadow: none;}


/*

 */

.boxSelecteurCompte {position: relative;}
.boxSelecteurCompte .boxResultats {
    position: absolute;
    z-index: 1080;
    top: 100%;
    left: 0;
    width: min(480px, calc(100vw - 2rem));
    min-width: 100%;
    margin-top: 2px;
    border: 1px solid #ced4da;
    background: #fff;
    box-shadow: 0 8px 20px rgb(20 29 45 / 15%);
}
.boxSelecteurCompte .boxResultats .boxTable{height: 160px;overflow-y: auto;}
.boxSelecteurCompte .boxResultats .boxTable tr th{font-size: 10px; font-weight: 600;}
.boxSelecteurCompte .boxResultats .boxTable tr th .btn{padding: 0; font-size: inherit; font-weight: inherit; text-transform: inherit; color: #1863de;}
.boxSelecteurCompte .boxResultats .boxTable tr td{font-size: 11px;}
.boxSelecteurCompte .boxResultats .ligne-selection {cursor: pointer;}
.boxSelecteurCompte .boxResultats .ligne-selection:focus {outline: 2px solid #3f80ea;outline-offset: -2px;}

.table-responsive .table tr th{background-color: #edf2f5; font-size: 11px; font-weight: 300; text-transform: uppercase;}
.table-responsive .table tr th .btn{padding: 0; font-size: 11px; text-transform: uppercase; color: #1863de;}
.table-responsive .table tr td{font-size: 12px;}
.table-responsive .table-sm tr td{font-size: 11px;}

.boxSaisieTable{}
.boxSaisieTable table tr th{border-right: solid 1px #ced4da;}
.boxSaisieTable table tr td{border-right: solid 1px rgb(206 212 218 / 20%); background-color: #ffffff;}
.boxSaisieTable table tr td .form-control,
.boxSaisieTable table tr td .form-select{border: none; background-color: inherit; padding: 0; margin: 0;}
.boxSaisieTable table tr td .form-select{padding-right: 1.5rem;}
.boxSaisieTable table tr td .btn-light{border: none !important; background-color: inherit; padding: 0; margin: 0;}

@media (min-width: 992px) {
    .boxSaisieTable {overflow: visible;}
    .boxSaisieTable td:focus-within {position: relative; z-index: 1090;}
}

.width-10{width: 10px;}
.width-50{width: 50px;}
.width-60{width: 60px;}
.width-70{width: 70px;}
.width-80{width: 80px;}
.width-90{width: 90px;}
.width-100{width: 100px;}
.width-110{width: 110px;}
.width-120{width: 120px;}
.width-130{width: 130px;}
.width-140{width: 140px;}
.width-150{width: 150px;}
.width-200{width: 200px;}
.width-250{width: 250px;}
.width-300{width: 300px;}
.width-350{width: 350px;}
.width-400{width: 400px;}

.boxHeight400 {height: 400px; overflow-x: auto;}
.boxHeight500 {height: 500px; overflow-x: auto;}

footer.footer {padding: 12px 20px;}
footer.footer p{font-size: 11px;}

/*

 */



.fond-panneau-edition {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(20, 29, 45, .35);
}

.panneau-edition {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: min(100vw, 460px);
    background: #fff;
    box-shadow: -12px 0 30px rgba(0, 0, 0, .16);
}

.panneau-edition__entete,
.panneau-edition__pied {
    flex: 0 0 auto;
    padding: 1.25rem;
}

.panneau-edition__corps {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
}

.transition-panneau-edition {
    transition: transform .28s ease, opacity .28s ease;
}

.transition-panneau-edition-depart {
    opacity: 0;
    transform: translateX(100%);
}

.transition-panneau-edition-arrivee {
    opacity: 1;
    transform: translateX(0);
}

.selecteur-par-page {
    width: auto;
}

.recherche-tableau {
    max-width: 320px;
}

/* La ligne cochée d'une liste. Le thème peint les cellules par un dégradé
   indexé sur --bs-table-accent-bg, que le survol redéfinit : la sélection
   passe par la même variable, déclarée après, pour rester visible sous la
   souris. */
.table > tbody > tr.ligne-selectionnee > * {
    --bs-table-accent-bg: rgba(63, 128, 234, .14);
}

.table-hover > tbody > tr.ligne-selectionnee:hover > * {
    --bs-table-accent-bg: rgba(63, 128, 234, .2);
}

.table .colonne-selection {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}

/* Bootstrap aligne la case en haut de sa ligne de texte (vertical-align: top,
   margin-top: .25em) : posée en bloc, elle se centre dans la cellule, elle-même
   centrée sur la hauteur de la ligne. */
.table .colonne-selection .form-check-input {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.fond-box-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, .45);
    animation: apparition-fond-box-offcanvas .25s ease-in-out;
}

@keyframes apparition-fond-box-offcanvas {
    from {
        opacity: 0;
    }
}

#boxOffcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    width: min(520px, 100vw);
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .22);
    transform: translateX(100%);
    /* Le panneau fermé reste dans la page pour pouvoir glisser : caché une
       fois sorti, son ombre ne déborde plus sur le bord de l'écran et ses
       champs quittent l'ordre de tabulation. */
    visibility: hidden;
    transition: transform .25s ease-in-out, visibility 0s linear .25s;
}

#boxOffcanvas.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s ease-in-out, visibility 0s linear 0s;
}

#boxOffcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 20px 24px;
    border-bottom: 1px solid #e4e8ee;
    background: #fff;
}

#boxOffcanvas form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#boxOffcanvas .offcanvas-title {
    margin: 0;
    color: #253858;
    font-size: 1.15rem;
    font-weight: 600;
}

#boxOffcanvas .bouton-fermer-box-offcanvas {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 28px;
    line-height: 1;
}

#boxOffcanvas .bouton-fermer-box-offcanvas:hover {
    background: #f1f3f5;
    color: #1f2937;
}

#boxOffcanvas .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px;
    background: #fff;
}

#boxOffcanvas .actions-box-offcanvas {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e4e8ee;
    background: #fff;
    justify-content: end;
}

#boxOffcanvas.box-offcanvas-large {
    width: min(1100px, 100vw);
}

#boxOffcanvas.box-offcanvas-large .offcanvas-body {
    padding: 24px 30px;
}

#boxOffcanvas.box-offcanvas-large .boxSaisieTable .form-control,
#boxOffcanvas.box-offcanvas-large .boxSaisieTable .form-select {
    min-width: 100%;
}

/* Le champ d'un sélecteur partage sa cellule avec son bouton : forcé à toute
   la largeur, il renverrait le bouton à la ligne. */
#boxOffcanvas.box-offcanvas-large .boxSaisieTable .input-group {
    flex-wrap: nowrap;
}

#boxOffcanvas.box-offcanvas-large .boxSaisieTable .input-group > .form-control {
    min-width: 0;
}

/* Le sélecteur d'article ou de tiers range un second champ - l'intitulé, le
   nom - à côté du code : forcé à toute la largeur de la cellule, il
   déborderait sur la colonne voisine. Il prend la place qui reste. */
#boxOffcanvas.box-offcanvas-large .boxSaisieTable .boxSelecteurCompte > .d-flex > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

#app .page-saisie-pratique .table thead th,
.page-saisie-pratique .table thead th {
    background-color: #edf2f7;
    border-bottom: 1px solid #8d99a6;
    color: #6c757d;
    font-size: .75rem;
    font-weight: 400;
    padding: .9rem 1rem;
    text-transform: uppercase;
}

.page-saisie-pratique .table td {
    padding: .75rem 1rem;
    vertical-align: middle;
}

.page-saisie-pratique .table .btn-outline-danger {
    min-width: 38px;
}

/* Menu d'actions d'une ligne : icônes à la taille du texte du menu. */
.dropdown-item .feather {
    width: 16px;
    height: 16px;
}