body {
    background-image: url('../css/oxfambg.png') !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: center;
}

#corpsPage {
    padding-bottom: 2em;
}

table tbody.listeClients tr td,
table#listeReparations tr td,
table#listeGarantiesAnonymes tr td,
table#listeAtelier tr td {
    cursor: pointer;
}

table tr.choosen td {
    background-color: #f7ea3f !important;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.listeClients tr.highlighted {
    background-color: #ffe680 !important;
}


#refClients {
    background-color: #ca9b2c66;
    color: #333;
    padding: 1em 0;
}

label {
    font-weight: bold;
}


@media only screen and (max-width: 600px) {
    .navbar-brand img {
        width: 200px !important;
    }
}

.modal-title:before {
    content: url('../images/cshop.png');
}

input::placeholder {
    color: #aaaaaa !important;
    opacity: 1;
}

label.error {
    color: red;
    font-weight: bold;
}

/* messages de jQuery Validate placés dans une <div> (errorElement: "div"),
   dans toutes les fenêtres -- certaines n'avaient pas de règle locale
   (conditions particulières), d'où des erreurs en noir */
div.error {
    color: red;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.void {
    text-align: center;
    padding-top: 8rem;
}

.idInt {
    font-size: 10pt;
}

.addonMdp {
    cursor: pointer;
}

.isDisabled {
    display: none;
}

.barre {
    text-decoration-line: line-through;
}


/* fiche de travail : voir « Fiche de travail en carte » plus bas */

/* profil d'un utilisateur : voir « Utilisateurs » plus bas */

/* fiche client de l'écran Clients : voir « Fiche client en carte » plus bas */

/* onglets des fiches, garanties et devis : voir .ongletsFiches plus bas */

/* onglets du journal : style commun .ongletsFiches, voir plus bas */

.referenceIntrouvable {
    cursor: pointer;
}

.apercuTexte {
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff9db;
}

.tableauJournal th {
    font-weight: normal;
}

.ellipseLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.null {
    font-size: 5rem;
    padding-top: 2em;
    color: rgba(50, 150, 50, 0.8);
    text-align: center;
}

.vide {
    background-color: lightgray;
}

h5.boutonsTri,
h5.scrollReparations {
    cursor: pointer;
}


.hiddenMdp {
    background-color: pink;
    color: pink;
    border-radius: 5px;
    height: 2.3em;
    border: 1px solid black;
}

.shownMdp {
    background: white;
    color: black;
    border-radius: 5px;
    height: 2.3em;
    border: 1px solid black;
    padding: 0.3em;
}

.strike {
    text-decoration-line: line-through;
}

.badge.btn-searchClient {
    margin-right: 0.5em;
    ;
}

.texteCondPart {
    height: 7em;
    background-color: #ffedcb;
    overflow: auto;
}

.texteCondPart .col-6,
.texteCondPart .col-12 {
    border-bottom: 1px solid #bbb;
}

.modal-header h1 b {
    background-color: yellow;
    padding: 0.2em 0.5em;
}

#modal h5 {
    font-size: 13pt;
    font-weight: bold;
}

.invalide {
    color: red;
}

input.notFound {
    background-color: #fcc !important;
}

.checkbox-sm .form-check-input {
    width: 0.8em;
    height: 0.8em;
    margin-top: 0.2em;
    cursor: pointer;
}

.checkbox-sm .form-check-label {
    font-size: 0.85em;
    margin-left: 0.2em;
}

.btn-group .btn-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.2;
    height: calc(1.5em + 0.5rem + 2px);
    /* proche de form-control-sm */
}

.input-group-sm .form-control,
.input-group-sm .input-group-text {
    height: calc(1.5em + 0.5rem + 2px);
}

#zoneGauche {
    padding-left: 0.5em;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

td.nom,
th.nom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

td.nom {
    width: auto;
}

th.date,
td.date {
    width: 5em;
    min-width: 5em;
    max-width: 8em;
    text-align: center;
}

.veryImportant {
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
}


.table-wrapper {
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: auto;
}

.table-wrapper[data-mode="gestion"] {
    max-height: 74vh;
}

/* En dessous de 1200px (breakpoint Bootstrap "xl", celui utilisé par
   col-xl-3 col-12), la colonne #zoneGauche passe au-dessus de la fiche
   client au lieu d'être à côté d'elle -- ce qui inclut aussi bien les
   téléphones que les tablettes. Sans cette limite, la liste occuperait
   jusqu'à 74% de la hauteur d'écran avant même d'atteindre la fiche. */
@media (max-width: 1199.98px) {
    .table-wrapper[data-mode="gestion"] {
        max-height: 50vh;
    }
}

.table-sticky {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.table-sticky th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
    border-bottom: 1px solid #ccc;
}

.titre-clients {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
}

.grise {
    opacity: 0.3;
}

/* blocs Réception (rose) et Sortie (bleu) de la fiche de travail : voir « Fiche de travail en carte » */

.bootbox-warning .modal-content {
    background-color: #ffd4d4;
}

/* Positionnement superposé de l'ajaxLoader*/
#ajaxLoader {
    display: none;
    position: fixed;
    /* Reste centré même si on scrolle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    /* Au-dessus de tout le contenu */
}

.bg-bronze {
    background-color: #fac795 !important;
}
/* liste des clients déplacée dans la fenêtre #modalListeClients (tablette,
   téléphone) : c'est la fenêtre qui fait défiler la liste, pas le tableau
   (l'en-tête du tableau reste collé en haut de la fenêtre) */
#modalListeClients .table-wrapper {
    max-height: none;
    overflow: visible;
}

/* sans marge en haut de la zone qui défile : sinon des lignes restent
   visibles au-dessus de l'en-tête collant du tableau */
#modalListeClients .modal-body {
    padding-top: 0;
}

/* listes des bons (selecteurReparations.tpl, selecteurAtelier.tpl)
   déplacées dans la fenêtre : c'est la fenêtre qui fait défiler */
#modalListeClients .zoneListeBons {
    max-height: none;
    overflow: visible;
}

/* ---------------------------------------------------------------------
   Fiche client en carte (clients/ficheProfilClient.tpl) : en-tête et corps
   cliquables (ouvrent la modification), pied avec archiver/supprimer
   --------------------------------------------------------------------- */
.ficheClient #formClient {
    cursor: pointer;
}

/* le vert historique de la fiche client, réservé à l'en-tête de la carte */
.ficheClient .card-header {
    background-color: #ccffcc;
}

.ficheClient #formClient:hover .card-header {
    background-color: #b8f5b8;
}

.ficheClient .pastilleClient {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
    color: #fff;
    background-color: #198754;
}

/* le titre peut être tronqué (text-truncate) dans l'en-tête flexible */
.ficheClient .min-w-0 {
    min-width: 0;
}

/* libellé discret au-dessus de chaque valeur */
.ficheClient .infosFiche dt {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.ficheClient .infosFiche dd {
    margin-bottom: 0;
    word-break: break-word;
}

/* ---------------------------------------------------------------------
   Fenêtres de saisie d'un client (clients/modal/modal*Client*.tpl) :
   formulaire en blocs (cartes) Identité, Contact, Adresse, Données
   personnelles
   --------------------------------------------------------------------- */
/* « ~ » plutôt que « + » : des champs cachés peuvent séparer deux blocs */
.blocFiche ~ .blocFiche {
    margin-top: 0.5rem;
}

.blocFiche > .card-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* précision à côté du titre du bloc : en casse normale */
.blocFiche > .card-header small {
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

/* row directement sur .card-body : on garde la marge intérieure de la carte ;
   écarts resserrés entre les lignes et les colonnes (fenêtres moins hautes) */
.blocFiche > .card-body.row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.4rem;
    margin: 0;
    padding: 0 0.25rem 0.6rem;
}

.blocFiche > .card-body:not(.row) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* libellé collé à son champ */
.blocFiche label:not(.form-check-label) {
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
}

/* usage choisi (Réparation / Devis / Facture) dans une fenêtre de saisie client */
.btn-usage.active {
    font-weight: bold;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6);
}

/* champ obligatoire encore vide (voir marquerChampsObligatoires()) */
#modalFormClient .champObligatoire {
    background-color: #fff3a3;
}

/* RGPD : l'icône ⓘ suit le texte de l'interrupteur sur la même ligne */
.blocFiche .form-check-label {
    display: inline;
}

/* fenêtres de saisie d'un client : marges intérieures réduites */
#modalEditClient .modal-body {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#modalEditClient .modal-footer {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* ---------------------------------------------------------------------
   Fiche de travail en carte (reparations/formTravail.tpl) : en-tête avec
   statut et boutons Modifier/Imprimer/Supprimer, blocs Réception (rose)
   et Sortie (bleu) ; un clic sur une valeur ouvre l'édition du bon
   --------------------------------------------------------------------- */
.ficheTravailCarte {
    margin-top: 0.5rem;
}

/* sous les onglets (fiches, garanties ou devis d'un client) : carte collée aux onglets */
.tab-pane > .ficheTravailCarte,
.tab-pane > .ficheGarantieCarte,
.tab-pane > .ficheDevisCarte {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* onglets des fiches de travail et des bons de garantie d'un client
   (reparations/ficheTravail.tpl, garanties/inc/garantiesNavtabs.tpl) :
   onglets gris bordés ; l'onglet actif, blanc, se fond dans la carte */
.ongletsFiches.min-w-0 {
    min-width: 0;
}

.ongletsFiches {
    gap: 0.15rem;
    /* la rangée recouvre d'1px la bordure du haut de la carte, que l'onglet
       actif masque (voir .nav-link et .nav-link.active) */
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

/* onglets étirés sur la largeur, sur plusieurs rangées si nécessaire */
.ongletsFiches .nav-item {
    flex: 1 1 auto;
}

/* variante compacte (journal) : chaque onglet à la largeur de son texte */
.ongletsFiches.ongletsCompacts .nav-item {
    flex: 0 0 auto;
}

.ongletsFiches .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    padding: 0.4rem 0.8rem;
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: normal;
    /* la rangée recouvre d'1px la bordure de la carte : on la redessine
       sous les onglets inactifs */
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.ongletsFiches .nav-link:hover {
    background-color: #dde1e6;
    color: var(--bs-body-color);
}

/* onglet actif : blanc comme la carte, liseré rouge en haut, et il
   recouvre la bordure du haut de la carte pour s'y fondre */
.ongletsFiches .nav-link.active {
    box-shadow: none;
    background-color: #fff !important;
    color: var(--bs-body-color);
    border-top: 3px solid #d76a6a;
    font-weight: 600;
}

/* pastille d'état dans l'onglet : orange en cours, verte si terminé */
.pastilleEtat {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #fd7e14;
}

.pastilleEtat.termine {
    background-color: #198754;
}

.ficheTravailCarte .min-w-0 {
    min-width: 0;
}

.pastilleTravail {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #fff;
    background-color: #fd7e14;
}

.pastilleTravail.termine {
    background-color: #198754;
}

/* bloc Réception en rose, bloc Sortie en bleu ; le fond de la carte reste blanc */
#formulaireEntree.blocTravail {
    background-color: #ffc0cb;
    border-color: #f3a3b2;
}

#formulaireEntree.blocTravail > .card-header {
    background-color: #f9a8b8;
    color: #6b2a36;
    border-bottom-color: #f3a3b2;
}

/* sur le rose, textes longs et survol en blanc translucide */
#formulaireEntree.blocTravail .texteFiche {
    background-color: rgba(255, 255, 255, 0.55);
}

#formulaireEntree.blocTravail dd.openModalEntree:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

#formulaireEntree.blocTravail .infosFiche dt {
    color: #6b2a36;
}

/* bloc Sortie en bleu */
#formulaireSortie.blocTravail {
    background-color: #c0cbff;
    border-color: #a3b0f3;
}

#formulaireSortie.blocTravail > .card-header {
    background-color: #a8b5f9;
    color: #2a336b;
    border-bottom-color: #a3b0f3;
}

#formulaireSortie.blocTravail .texteFiche {
    background-color: rgba(255, 255, 255, 0.55);
}

#formulaireSortie.blocTravail dd.openModalSortie:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

#formulaireSortie.blocTravail .infosFiche dt {
    color: #2a336b;
}

.ficheTravailCarte .infosFiche dt {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.ficheTravailCarte .infosFiche dd {
    margin-bottom: 0;
    word-break: break-word;
}

/* textes longs (état, problème, devis, bilan) : retours à la ligne conservés */
.ficheTravailCarte .texteFiche {
    white-space: pre-line;
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.375rem;
    padding: 0.3rem 0.5rem;
    min-height: 2.2rem;
}

.ficheTravailCarte .openModalEntree,
.ficheTravailCarte .openModalSortie {
    cursor: pointer;
}

.ficheTravailCarte dd.openModalEntree:hover,
.ficheTravailCarte dd.openModalSortie:hover {
    background-color: var(--bs-secondary-bg);
    border-radius: 0.375rem;
}

.ficheTravailCarte .accessoire {
    font-weight: normal;
    font-size: 0.85rem;
    margin: 0 0.2rem 0.2rem 0;
}

.ficheTravailCarte .hiddenMdp,
.ficheTravailCarte .shownMdp {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 2em;
}

/* ---------------------------------------------------------------------
   Fenêtre d'édition d'un bon (reparations/modal/modalEditBon.tpl) :
   en-tête avec pastille, onglets Entrée (rose) / Sortie (bleu) dont le
   panneau prend la couleur, champs en blocs-cartes blancs (.blocFiche)
   --------------------------------------------------------------------- */
#modalEditBon .min-w-0 {
    min-width: 0;
}

#modalEditBon .pastilleTravail {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #fff;
    background-color: #fd7e14;
}

#modalEditBon .pastilleTravail.termine {
    background-color: #198754;
}

#modalEditBon .pastilleTravail.nouveau {
    background-color: #0d6efd;
}

/* nom du client mis en évidence dans l'en-tête : même jaune que le nom
   dans les titres des autres fenêtres (.modal-header h1 b) */
#modalEditBon .nomClientBon {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.1rem 0.6rem;
    border-radius: 0.375rem;
    background-color: yellow;
    color: #212529;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#modalEditBon .ongletsBon {
    border-bottom: 0;
    gap: 0.15rem;
}

#modalEditBon .ongletsBon .nav-link {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.4rem 1rem;
}

#modalEditBon .ongletsBon .nav-link:hover {
    background-color: #dde1e6;
}

#modalEditBon .ongletsBon .nav-link.active {
    color: var(--bs-body-color);
    font-weight: 600;
}

#modalEditBon #tab-entree-btn.active {
    background-color: #ffc0cb;
    border-color: #f3a3b2;
    border-top: 3px solid #d76a6a;
}

#modalEditBon #tab-sortie-btn.active {
    background-color: #c0cbff;
    border-color: #a3b0f3;
    border-top: 3px solid #5a6fd6;
}

/* panneau de l'onglet : même couleur que son onglet, blocs blancs dedans */
#modalEditBon #ongletsBonContent > .tab-pane {
    padding: 0.6rem;
    border: 1px solid;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
}

#modalEditBon #tab-entree {
    background-color: #ffc0cb;
    border-color: #f3a3b2 !important;
}

#modalEditBon #tab-sortie {
    background-color: #c0cbff;
    border-color: #a3b0f3 !important;
}

/* blocs atelier : en-tête bronze (couleur historique des widgets atelier) */
#modalEditBon .blocAtelier > .card-header {
    background-color: #fac795;
    color: #6b4a1f;
}

/* boutons radio (Données, Terminé, Garantie) : pas de réglage de libellé */
#modalEditBon .blocFiche label.btn {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   Avis « Client prévenu » de la fiche de travail
   (reparations/inc/infoClientAverti.tpl) : liste compacte, un avis par
   ligne ; sur téléphone, date/heure/auteur passent sur une 2e ligne
   --------------------------------------------------------------------- */
.clientPrevenu .titreClientPrevenu {
    font-size: 0.8rem;
    color: #2a336b;
    margin-bottom: 0.2rem;
}

.clientPrevenu .avisClient {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icone moyen boutons"
        "detail detail detail";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.25rem;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0.375rem;
}

.clientPrevenu .iconeAvis {
    grid-area: icone;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #5a6fd6;
    font-size: 0.85rem;
}

.clientPrevenu .moyenAvis {
    grid-area: moyen;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clientPrevenu .boutonsAvis {
    grid-area: boutons;
    display: flex;
    gap: 0.25rem;
}

/* date, heure, auteur : toute la largeur, passe à la ligne au besoin */
.clientPrevenu .detailAvis {
    grid-area: detail;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    color: var(--bs-secondary-color);
}

/* section assez large (quelle que soit la taille de l'écran : la fiche peut
   être dans une colonne étroite) : tout sur une ligne */
.clientPrevenu {
    container-type: inline-size;
}

@container (min-width: 440px) {
    .clientPrevenu .avisClient {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "icone moyen detail boutons";
    }
}

/* ---------------------------------------------------------------------
   Bon de garantie en carte (garanties/inc/carteGarantie.tpl) : en-tête
   avec numéro de ticket, date et boutons ; blocs Articles (vert) et
   Conditions particulières (jaune) ; fond de la carte blanc
   --------------------------------------------------------------------- */
.ficheGarantieCarte {
    margin-top: 0.5rem;
}

.ficheGarantieCarte .min-w-0 {
    min-width: 0;
}

.pastilleGarantie {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #fff;
    background-color: #198754;
}

.blocArticles {
    background-color: #d1e7dd;
    border-color: #a3cfbb;
}

.blocArticles > .card-header {
    background-color: #b5dccb;
    color: #0f5132;
    border-bottom-color: #a3cfbb;
}

/* total : en casse normale dans l'en-tête du bloc */
.blocArticles .totalArticles,
.blocArticlesDevis .totalArticles {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    color: #0f5132;
}

/* un article par ligne (garanties et devis) : infos (désignation,
   références, remarque), prix, boutons ; la désignation passe à la ligne
   au besoin */
.articleFiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.25rem;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 0.375rem;
}

.articleFiche.articleTrouve {
    background-color: var(--bs-warning-bg-subtle);
    outline: 2px solid var(--bs-warning-border-subtle);
}

.articleFiche .infosArticle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.articleFiche .materiel {
    font-weight: 600;
    word-break: break-word;
}

.articleFiche .refsArticle {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    color: var(--bs-secondary-color);
}

.articleFiche .remarqueArticle {
    color: var(--bs-secondary-color);
    font-style: italic;
    word-break: break-word;
}

.articleFiche .prixArticle {
    font-weight: 600;
    white-space: nowrap;
}

.articleFiche .boutonsArticle {
    display: flex;
    gap: 0.25rem;
}

.blocCondPart {
    margin-top: 0.5rem;
    background-color: #fff3cd;
    border-color: #ffe69c;
}

.blocCondPart > .card-header {
    background-color: #ffe69c;
    color: #664d03;
    border-bottom-color: #ffda6a;
}

/* texte des conditions : plus de hauteur fixe ni de défilement dans la carte */
.blocCondPart .texteCondPart {
    height: auto;
    overflow: visible;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
}

.blocCondPart .texteCondPart .col-12 {
    border-bottom: 0;
}

.blocCondPart .infosFiche dt {
    font-size: 0.8rem;
    font-weight: normal;
    color: #664d03;
    margin-bottom: 0;
}

.blocCondPart .infosFiche dd {
    margin-bottom: 0;
    word-break: break-word;
}

/* ---------------------------------------------------------------------
   Devis en carte (devis/inc/carteDevis.tpl) : en-tête avec référence,
   date et boutons ; bloc Articles proposés (indigo) ; fond blanc
   --------------------------------------------------------------------- */
.ficheDevisCarte {
    margin-top: 0.5rem;
}

.ficheDevisCarte .min-w-0 {
    min-width: 0;
}

.pastilleDevis {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #fff;
    background-color: #6610f2;
}

.blocArticlesDevis {
    background-color: #e0e7ff;
    border-color: #c7d2fe;
}

.blocArticlesDevis > .card-header {
    background-color: #c7d2fe;
    color: #312e81;
    border-bottom-color: #a5b4fc;
}

.blocArticlesDevis .totalArticles {
    color: #312e81;
}

/* ---------------------------------------------------------------------
   Catalogues en liste (stock, accessoires) : carte avec en-tête (pastille,
   titre, compteur, recherche, bouton d'ajout) et un élément par ligne ;
   recherche commune, voir « Catalogues en liste » dans javascript.js
   --------------------------------------------------------------------- */
.ecranCatalogue .pastilleCatalogue,
.modal .pastilleCatalogue {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #fff;
    background-color: #0d9488;
}

#modalEditItemStock .min-w-0,
.ecranCatalogue .min-w-0 {
    min-width: 0;
}

/* champ de recherche : pleine largeur sur téléphone */
.ecranCatalogue .rechercheCatalogue {
    width: 100%;
}

@media (min-width: 768px) {
    .ecranCatalogue .rechercheCatalogue {
        width: 22rem;
    }
}

.listeCatalogue {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* la disposition des lignes dépend de la largeur de la liste */
    container-type: inline-size;
}

/* une ligne ; ses colonnes sont définies par catalogue (.carteStock,
   .ligneDenomination) */
.ligneCatalogue {
    display: grid;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid #0d9488;
    border-radius: 0.375rem;
    transition: box-shadow 0.15s ease, background-color 0.3s ease;
}

.ligneCatalogue:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.ligneCatalogue .boutonsCatalogue {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

/* ---------------------------------------------------------------------
   Stock (stock/gestionStock.tpl) : marque/modèle, caractéristiques,
   référence, prix, boutons
   --------------------------------------------------------------------- */
.carteStock {
    grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 2fr) 8.5rem 4.5rem auto;
    grid-template-areas: "materiel carac ref prix boutons";
    cursor: pointer;
}

/* matériel sélectionné : même jaune que les lignes choisies des listes */
.carteStock.choosen {
    background-color: #fdf6b2;
    border-color: #e0c200;
    border-left-color: #e0c200;
}

.carteStock .materielStock {
    grid-area: materiel;
    min-width: 0;
}

.carteStock .marqueStock {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f766e;
}

.carteStock .modeleStock {
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}

.carteStock .caracStock {
    grid-area: carac;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    word-break: break-word;
}

.carteStock .refColStock {
    grid-area: ref;
    min-width: 0;
}

.carteStock .refStock {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
    color: #0f766e;
    background-color: #ccfbf1;
}

.carteStock .prixStock {
    grid-area: prix;
    text-align: right;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f766e;
    white-space: nowrap;
}

.carteStock .boutonsCatalogue {
    grid-area: boutons;
}

/* liste étroite (tablette, téléphone) : la ligne se replie --
   matériel et prix ; caractéristiques ; référence et boutons */
@container (max-width: 680px) {
    .carteStock {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "materiel prix"
            "carac carac"
            "ref boutons";
    }
}

/* ---------------------------------------------------------------------
   Listes de dénominations : accessoires déposés
   (reparations/editAccessoires.tpl) et types d'appareils
   (reparations/matos/editMatos.tpl) -- dénomination (cliquable pour la
   modifier), utilisation sur les fiches, boutons
   --------------------------------------------------------------------- */
.ligneDenomination {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nom usage boutons";
}

.ligneDenomination .nomDenomination {
    grid-area: nom;
    min-width: 0;
    font-weight: 600;
    word-break: break-word;
    cursor: pointer;
}

.ligneDenomination .nomDenomination:hover {
    text-decoration: underline;
}

.ligneDenomination .usageDenomination {
    grid-area: usage;
    text-align: right;
    white-space: nowrap;
}

.ligneDenomination .boutonsCatalogue {
    grid-area: boutons;
}

/* liste étroite : utilisation et boutons sous la dénomination */
@container (max-width: 420px) {
    .ligneDenomination {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nom nom"
            "usage boutons";
    }

    .ligneDenomination .usageDenomination {
        text-align: left;
    }
}

/* ---------------------------------------------------------------------
   Utilisateurs : profil en carte (users/ficheProfilUser.tpl), liste de la
   gestion des utilisateurs (users/inc/listeUsers.tpl) et fenêtre
   d'édition (users/modal/modalEditUser.tpl)
   --------------------------------------------------------------------- */
.ficheUtilisateur #formUser {
    cursor: pointer;
}

/* le bleu historique du formulaire utilisateur, réservé à l'en-tête */
.ficheUtilisateur .card-header {
    background-color: #dcdcff;
}

.ficheUtilisateur #formUser:hover .card-header {
    background-color: #ccccfb;
}

.ficheUtilisateur .min-w-0,
#modalEditUser .min-w-0 {
    min-width: 0;
}

/* pastille aux initiales du profil : bleue (oxfam) ou rouge (root) */
.pastilleUser {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 600;
    background-color: #4f5bd5;
}

.pastilleUser {
    width: 3rem;
    height: 3rem;
    font-size: 1.15rem;
}

.pastilleUser.root {
    background-color: #dc3545;
}

.ficheUtilisateur .infosFiche dt {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.ficheUtilisateur .infosFiche dd {
    margin-bottom: 0;
    word-break: break-word;
}

/* liste des utilisateurs : défile si elle est longue ; déplacée dans la
   fenêtre #modalListeClients (tablette, téléphone), c'est la fenêtre qui
   fait défiler */
.blocListeUsers .listeUsers {
    max-height: 70vh;
    overflow-y: auto;
}

#modalListeClients .blocListeUsers .listeUsers {
    max-height: none;
    overflow: visible;
}

.ligneUser {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
}

/* utilisateur sélectionné : même jaune que les lignes choisies des listes */
.ligneUser.choosen,
.ligneUser.choosen:hover {
    background-color: #fdf6b2;
    color: inherit;
}

.ligneUser .nomUser {
    min-width: 0;
    font-weight: 600;
}

.ligneUser .badge {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Liste des clients (inc/tableClients.tpl, inc/boutonsTrisClients.tpl) :
   une ligne par client -- colonnes R, D, G (pastilles), nom, date ; ligne
   choisie en jaune avec un liseré
   --------------------------------------------------------------------- */
.tableListeClients th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.3rem 0.5rem;
}

.tableListeClients td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    vertical-align: middle;
}

.tableListeClients tbody tr:hover td {
    background-color: var(--bs-tertiary-bg);
}

/* ligne choisie : même jaune que les autres listes, liseré à gauche */
.tableListeClients tbody tr.choosen td {
    background-color: #fdf6b2 !important;
}

.tableListeClients tbody tr.choosen td:first-child {
    box-shadow: inset 4px 0 0 #e0c200;
}

/* une colonne par compteur (R, D, G) : chiffre centré dans une pastille,
   en-tête de la même couleur */
.tableListeClients th.compteur,
.tableListeClients td.compteur {
    width: 1.5rem;
    padding-left: 0.05rem;
    padding-right: 0.05rem;
    text-align: center;
    white-space: nowrap;
}

.tableListeClients th.compteur.cptReparation {
    color: #842033;
}

.tableListeClients th.compteur.cptDevis {
    color: #0b4f7a;
}

.tableListeClients th.compteur.cptGarantie {
    color: #1d6b25;
}

.tableListeClients th.date,
.tableListeClients td.date {
    width: 4.8rem;
    min-width: 0;
    text-align: right;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.pastilleCompteur {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 0.2rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.pastilleCompteur.cptReparation {
    background-color: #f8c8d4;
    color: #842033;
}

.pastilleCompteur.cptDevis {
    background-color: #c6e2f5;
    color: #0b4f7a;
}

.pastilleCompteur.cptGarantie {
    background-color: #c7ecc9;
    color: #1d6b25;
}

.icone-entreprise,
.icone-archive {
    margin-right: 0.4em;
    font-size: 0.85em;
    vertical-align: baseline;
}

.icone-entreprise {
    color: #6c63c9;
}

.icone-archive {
    opacity: 0.6;
}

/* client archivé : grisé */
.client-archive td {
    color: #6c757d;
    font-style: italic;
}

/* boutons de tri : bouton inactif (classe btn-default posée par le script) */
.boutonsTri .btn-default {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: #495057;
}

.boutonsTri .btn-default:hover {
    background-color: var(--bs-tertiary-bg);
}

/* ---------------------------------------------------------------------
   Listes des bons de réparation : en cours, terminées
   (reparations/inc/selecteurReparations.tpl) et en atelier
   (reparations/inc/selecteurAtelier.tpl) -- même présentation que la
   liste des clients : une ligne par bon, ligne choisie en jaune
   --------------------------------------------------------------------- */
.zoneListeBons {
    max-height: 78vh;
    overflow: auto;
}

/* sous 1200 px, la liste passe au-dessus de la fiche : hauteur équilibrée */
@media (max-width: 1199.98px) {
    .zoneListeBons {
        max-height: 50vh;
    }
}

.enteteListeBons {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.tableListeBons th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.3rem 0.4rem;
}

.tableListeBons td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    vertical-align: middle;
    cursor: pointer;
}

.tableListeBons tbody tr:hover td {
    background-color: var(--bs-tertiary-bg);
}

/* bon choisi : même jaune que les autres listes, liseré à gauche */
.tableListeBons tbody tr.choosen td {
    background-color: #fdf6b2 !important;
}

.tableListeBons tbody tr.choosen td:first-child {
    box-shadow: inset 4px 0 0 #e0c200;
}

.tableListeBons tbody tr.ligneVide td {
    cursor: default;
}

.tableListeBons th.numero,
.tableListeBons td.numero {
    width: 3.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tableListeBons td.client {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tableListeBons .nomClientBon {
    font-weight: 600;
}

.tableListeBons .appareilBon {
    margin-left: 0.3rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.tableListeBons th.date,
.tableListeBons td.date {
    width: 4.6rem;
    text-align: right;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.tableListeBons th.cloture,
.tableListeBons td.cloture,
.tableListeBons th.acces,
.tableListeBons td.acces {
    width: 2rem;
    text-align: center;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

/* petits boutons carrés (clôturer, fiche client) */
.tableListeBons .btn-closeBon,
.tableListeBons .btn-searchClient {
    padding: 0 0.3rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Utilitaire : élément flexible tronquable (texte-truncate dans un flex)
   --------------------------------------------------------------------- */
.min-w-0 {
    min-width: 0;
}

/* fenêtres des fiches concernées par un accessoire ou un type d'appareil
   (reparations/modal/listeBonsConcernes.tpl) : simple consultation */
.listeBonsConcernes td {
    cursor: default;
}

/* ---------------------------------------------------------------------
   Panneau sous des onglets .ongletsFiches quand il contient plusieurs
   éléments (journal : articles du jour) : bordé comme une carte, l'onglet
   actif s'y fond
   --------------------------------------------------------------------- */
.panneauOnglets {
    padding: 0.75rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 0.5rem 0.5rem;
}

.panneauOnglets > .tab-pane > .card:last-child {
    margin-bottom: 0 !important;
}

/* liste des garanties anonymes (garanties/inc/selecteurGaranties.tpl) :
   présentation des listes de bons */
.tableListeBons th.ticket,
.tableListeBons td.ticket {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* recherche d'une garantie par référence OX (garanties/oxChoiceScreen.tpl) :
   champ pleine largeur sur téléphone */
.rechercheOx .formRechercheOx {
    width: 100%;
}

@media (min-width: 768px) {
    .rechercheOx .formRechercheOx {
        width: 22rem;
    }
}

.rechercheOx #referenceOX {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------
   Journal de communications : articles (journal/inc/listeArticles.tpl)
   et commentaires (journal/inc/listeCommentaires.tpl)
   --------------------------------------------------------------------- */
.articleJournal {
    border-left: 4px solid var(--bs-border-color);
}

/* article non lu : liseré jaune à gauche */
.articleJournal.nonLu {
    border-left-color: #ffc107;
    background-color: #fffdf3;
}

.initialesJournal {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background-color: #4f5bd5;
}

.initialesJournal.petites {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.65rem;
}

.articleJournal .texteArticle {
    word-break: break-word;
}

.articleJournal .piedArticle {
    border-top: 1px solid var(--bs-border-color-translucent);
    padding-top: 0.4rem;
}

.articleJournal .btn-toggleCommentaires {
    text-decoration: none;
}

/* commentaires : bloc gris clair sous l'article */
.commentairesJournal {
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.commentairesJournal .commentaireItem {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.commentairesJournal .texteCommentaire {
    font-size: 0.9rem;
    word-break: break-word;
}

.commentairesJournal .saisieCommentaire {
    margin-top: 0.5rem;
}

.commentairesJournal .btn-link {
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Écran d'accueil (start.tpl) : photos, création d'un compte client,
   coordonnées, horaires
   --------------------------------------------------------------------- */
.accueilOxxl {
    max-width: 1440px;
    margin: 1rem auto 0;
}

/* bandeau : les photos défilent en fond, le texte et les boutons restent
   par-dessus, sur un dégradé sombre qui garantit leur lisibilité */
.bandeauAccueil {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 22rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    /* fond visible tant qu'aucune photo n'est configurée (MAGASIN_PHOTOS) */
    background-color: #198754;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.bandeauAccueil .carousel,
.bandeauAccueil .carousel-inner,
.bandeauAccueil .carousel-item {
    position: absolute;
    inset: 0;
    height: 100%;
}

.bandeauAccueil .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bandeauAccueil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05) 70%);
    pointer-events: none;
}

.texteBandeau {
    position: relative;
    z-index: 2;
    color: #fff;
    flex: 1 1 18rem;
    max-width: 36rem;
    margin: 1.5rem;
    padding: 1.5rem;
    /* fond sombre propre au texte : lisible quelle que soit la photo */
    border-radius: 0.75rem;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.texteBandeau .lead {
    font-weight: 500;
}

.texteBandeau .btn {
    text-shadow: none;
}

.texteBandeau h1 {
    font-weight: 700;
    line-height: 1.1;
    margin: 0.5rem 0;
}

.texteBandeau h1 span {
    color: #8fd14f;
}

/* création du compte client : panneau blanc posé sur la photo, à droite
   (sous le texte sur petit écran) */
.inscriptionBandeau {
    position: relative;
    z-index: 2;
    flex: 0 0 20rem;
    margin: 1.5rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: #fff;
    border-top: 0.4rem solid #198754;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}

.inscriptionBandeau h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #198754;
    margin-bottom: 0.5rem;
}

.inscriptionBandeau p {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.statutOuverture.ouvert {
    background-color: #198754;
}

.statutOuverture.ouvert .bi {
    font-size: 0.5rem;
    vertical-align: middle;
}

.statutOuverture.ferme {
    background-color: #6c757d;
}

/* flèches du bandeau : discrètes, en haut à droite */
.controlesBandeau {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}

.controlesBandeau button {
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
}

.controlesBandeau button:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

/* services du magasin : icône verte à gauche du texte */
.serviceAccueil {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: 100%;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.serviceAccueil > .bi {
    font-size: 1.75rem;
    color: #198754;
}

.serviceAccueil h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.serviceAccueil p {
    margin-bottom: 0;
    color: var(--bs-secondary-color);
}

.carteAccueil {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.carteAccueil h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.carteAccueil h2 .bi {
    color: #198754;
}

.horairesAccueil li {
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
}

.horairesAccueil li.ferme {
    color: var(--bs-secondary-color);
}

/* jour actuel */
.horairesAccueil li.aujourdhui {
    background-color: #e3f1e8;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .bandeauAccueil {
        min-height: 26rem;
    }

    .texteBandeau {
        flex-basis: calc(100% - 2rem);
        margin: 1rem 1rem 0.75rem;
        padding: 1rem;
    }

    .texteBandeau h1 {
        font-size: 1.6rem;
    }

    .inscriptionBandeau {
        flex-basis: calc(100% - 2rem);
        margin: 0 1rem 1rem;
    }

    /* sur téléphone, les photos défilent seules ou au doigt */
    .controlesBandeau {
        display: none;
    }

    .bandeauAccueil::after {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05));
    }
}

/* ---------------------------------------------------------------------
   Barre de navigation (navbar.tpl) : pastille aux initiales du menu
   utilisateur, bleue (oxfam) ou rouge (root)
   --------------------------------------------------------------------- */
.pastilleNavUser {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background-color: #4f5bd5;
}

.pastilleNavUser.root {
    background-color: #dc3545;
}

.barreNavigation .dropdown-item .bi-fw {
    color: var(--bs-secondary-color);
}

.barreNavigation .dropdown-item.text-danger .bi-fw {
    color: inherit;
}

/* ---------------------------------------------------------------------
   Gestion des documents (documents/inc/documentsContenu.tpl) : icône
   colorée selon le type de fichier, dossier vide
   --------------------------------------------------------------------- */
.tableDocuments a {
    text-decoration: none;
}

.tableDocuments a:hover {
    text-decoration: underline;
}

.iconeDocument.dossier { color: #e0a800; }
.iconeDocument.pdf { color: #dc3545; }
.iconeDocument.texte { color: #0d6efd; }
.iconeDocument.tableur { color: #198754; }
.iconeDocument.presentation { color: #fd7e14; }
.iconeDocument.image { color: #6f42c1; }
.iconeDocument.brut,
.iconeDocument.autre { color: var(--bs-secondary-color); }

.dossierVide {
    min-height: 40vh;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Bootstrap Icons (bootstrap-icons/) : équivalents des classes utilitaires
   de Font Awesome, qu'il ne fournit pas -- largeur fixe, tailles, rotation
   --------------------------------------------------------------------- */
.bi-fw {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

.bi-lg { font-size: 1.33em; }
.bi-2x { font-size: 2em; }
.bi-3x { font-size: 3em; }
.bi-5x { font-size: 5em; }

.bi-spin {
    display: inline-block;
    animation: bi-rotation 1.2s linear infinite;
}

@keyframes bi-rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* indicateur de chargement (#ajaxLoader) : centré par transform, la
   rotation doit conserver ce centrage */
#ajaxLoader.bi-spin {
    animation: bi-rotation-centree 1.2s linear infinite;
}

@keyframes bi-rotation-centree {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* liste des clients : bouton d'accès à la fiche du client (.btn-ficheClient) */
.tableListeClients th.acces,
.tableListeClients td.acces {
    width: 2rem;
    text-align: center;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.tableListeClients .btn-ficheClient {
    padding: 0 0.3rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Feuille de caisse (caisse/feuilleCaisse.tpl) : présentation du tableur
   FeuillesCaisse.ots, cadres noirs et cases jaunes à remplir
   --------------------------------------------------------------------- */
.feuilleCaisse {
    max-width: 1100px;
    margin: 1rem auto 0;
    padding: 1rem;
    background-color: #fff;
    font-size: 0.9rem;
}

.cadreCaisse {
    border: 1px solid #000;
    margin: 0 0 -1px 0;
    padding: 0.2rem 0.4rem;
    background-color: #fff;
}

.titreCaisse {
    text-align: center;
    font-size: 1.3rem;
}

/* une ligne = libellé à gauche, valeur à droite */
.ligneCaisse {
    display: flex;
}

.ligneCaisse > .libelleCaisse {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: -1px;
}

.ligneCaisse > .petitLibelle {
    flex: 0 0 auto;
    margin-left: -1px;
}

.ligneCaisse > .valeurCaisse {
    flex: 1 1 auto;
    margin-left: -1px;
    min-height: 1.9rem;
}

.aRemplir,
.aRemplir.form-control,
.tableComptage td.aRemplir,
.tableComptage td.aRemplir .form-control {
    background-color: #ffffa6;
}

.feuilleCaisse input.cadreCaisse,
.feuilleCaisse textarea.cadreCaisse {
    border-radius: 0;
    outline-offset: -2px;
    font: inherit;
    width: 100%;
}

.feuilleCaisse textarea.cadreCaisse {
    resize: vertical;
}

/* blocs IN / OUT : libellé vertical à gauche */
.blocCaisse {
    display: flex;
}

.blocCaisse .sensCaisse {
    flex: 0 0 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -1px;
    margin-bottom: -1px;
    font-weight: bold;
}

.blocCaisse .sensCaisse span {
    transform: rotate(-90deg);
}

.blocCaisse .libelleBloc {
    flex: 0 0 calc(55% - 3.5rem + 1px);
    font-size: 0.85rem;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    margin-bottom: -1px;
}

.blocCaisse .ligneCaisse > .libelleBloc + .valeurCaisse {
    margin-left: -1px;
}

/* cadres « Agrafer ou coller ici » : utiles seulement sur papier */
.agraferCaisse {
    color: var(--bs-secondary-color);
}

.cadreAgrafe {
    border-style: dashed;
    border-color: #999;
    min-height: 3rem;
}

.surPapier {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* comptage de la caisse */
.tableComptage {
    border-collapse: collapse;
}

.tableComptage th,
.tableComptage td {
    border: 1px solid #000;
    vertical-align: middle;
}

.tableComptage td:first-child {
    width: 25%;
}

.tableComptage td.aRemplir {
    width: 35%;
}

.tableComptage td.sansBordure {
    border: none;
}

.tableComptage .nombreCoupure {
    border: none;
    border-radius: 0;
}

/* « × » collé au nombre de pièces ou de billets, à droite de la case */
.tableComptage .signeFois {
    color: var(--bs-secondary-color);
}

.tableComptage td.aRemplir {
    cursor: text;
}

.tableComptage .nombreCoupure {
    flex: 0 0 auto;
    padding-left: 0.15rem;
    text-align: right;
}

/* feuille verrouillée (fieldset disabled) : valeurs lisibles en noir */
.feuilleCaisse fieldset:disabled input,
.feuilleCaisse fieldset:disabled textarea {
    color: #000;
    opacity: 1;
}

.feuilleCaisse .modifie {
    outline: 2px solid #fd7e14;
}