/*    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">*/
/*
:root {
    --colorBucher: #B1292D;
    --colorFont: #212529;
    --colorTxtBtn:#fff;
    --colorBgBtn:#B1292D;
    --font:"Noto Sans", sans-serif;
}
!*    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">*!
.agroservicemathod{
    --colorBucher: #dc0023;
    --colorFont: #212529;
    --colorTxtBtn:#fff;
    --colorBgBtn:#dc0023;
    --font:"Noto Sans", sans-serif;
}
!* <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">*!
.caseih{
    --colorBucher: #a71930;
    --colorFont: #000000;
    --colorTxtBtn:#fff;
    --colorBgBtn:#a71930;
    --font:"Open Sans", sans-serif;
}
!* <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">*!
.deutzfahr{
    --colorBucher: #37a137;
    --colorFont: #000000;
    --colorTxtBtn:#fff;
    --colorBgBtn:#1b4378;
    --font:"Lato", sans-serif;
}
!* <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">*!
.kuhn{
    --colorBucher: #e42317;
    --colorFont: #2d3c4b;
    --colorTxtBtn:#fff;
    --colorBgBtn:#e42317;
    --font:"Roboto", sans-serif;
}
!* <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">*!
.merlo{
    --colorBucher: #81b13e;
    --colorFont: #2d3c4b;
    --colorTxtBtn:#fff;
    --colorBgBtn:#81b13e;
    --font:"Montserrat", sans-serif;
}
!* <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">*!
.newholland{
    --colorBucher: #004b93;
    --colorFont: #424242;
    --colorTxtBtn:#000;
    --colorBgBtn:#f1b514;
    --font:"Lato", sans-serif;
}
!* <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">*!
.steyr{
    --colorBucher: #e20026;
    --colorFont: #343e4a;
    --colorTxtBtn:#fff;
    --colorBgBtn:#e20026;
    --font:"Exo 2", sans-serif;
}
.weidemann{
    --colorBucher: #000;
    --colorFont: #000;
    --colorTxtBtn:#fff;
    --colorBgBtn:#b81839;
    --font:"Arial", sans-serif;
}
*/











*{
    font-family: var(--font);
    color: var(--colorFont);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}


strong{
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}

h1::first-letter,.btn::first-letter ,label::first-letter , th::first-letter {
    text-transform: uppercase;
}
h3{font-size: 1.3rem;}
th{color: var(--colorBucher); font-weight: bold;}
*:focus {
    box-shadow: none !important;
}
.dnone{ display: none;}
h1{ text-align: center;color: var(--colorBucher); margin-top: 3.6rem; margin-bottom: 3rem;}
h1 div{ color: var(--colorFont) !important; font-size: 1.4rem}
a{color: var(--colorBucher)}
.form-check-input[type="checkbox"] {
    accent-color:var(--colorBucher);
}
.form-check-input:checked {
    background-color: var(--colorBucher) !important; /* Votre couleur de fond */
    border-color: var(--colorBucher) !important;     /* Votre couleur de bordure */
}



.btn-primary{ border-color:var(--colorBgBtn); background-color: #FFF;color:var(--colorBgBtn)!important;--bs-btn-bg: #FFF; }
.btn-primary:hover{  border-color:var(--colorBgBtn);background-color: var(--colorBgBtn);color:#FFF!important;}
.btn-autre:hover{ border-color:var(--colorBgBtn); background-color: #FFF;color:var(--colorBgBtn); }
.btn-autre{  border-color:var(--colorBgBtn);background-color: var(--colorBgBtn);color:#FFF;}
.btn{ border-radius: 0px; border-width: 2px; padding: 10px; font-weight: 600; text-transform: uppercase; color: var(--colorTxtBtn); margin-top: 3rem;}

label{ color:var(--colorBucher) !important; text-transform: uppercase }
label.form-check-label{ color:var(--colorFont) !important; }
.label{ color: var(--colorBucher) !important; text-transform: uppercase}
.colored{ color: var(--colorBucher) !important; text-transform: none;}

.btn-primary:active,
.btn-primary:hover {
    background-color: var(--colorBgBtn)!important;
    border-color: var(--colorBgBtn)!important;
    box-shadow: none !important;
}
.btn-autre:active,
.btn-autre:hover {
    background-color: #FFF!important;
    border-color: var(--colorBgBtn)!important;
    color: var(--colorBgBtn)!important;
    box-shadow: none !important;
}
.lienUpd{ font-weight: bold;}

a em{ font-weight: lighter}


.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-menu .ui-menu-item-wrapper:hover {
    background-color: var(--colorBgBtn)!important; /* Ta couleur de fond */
    color: #ffffff !important;            /* Couleur du texte */
    border: 1px solid #0d6efd !important;  /* Bordure (optionnel) */
}

input[name="search"],input[name="search"]:focus, input[name="search"]:hover, input[name="search"]:active {
     border-color: var(--colorBucher)!important;
    outline: none !important;
    box-shadow: none !important;
    border-width: 1px!important;
    border-radius:0.375rem!important;
}

select[name="per-page"],select[name="per-page"]:focus, select[name="per-page"]:hover, select[name="per-page"]:active {
     border-color: var(--colorBucher)!important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #FFF!important;
    border-width: 1px!important;
    border-radius:0.375rem!important;
}

.divMsgSys {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    animation: flashAndFade 3.5s ease-in-out forwards;
    color: #dc0023;
    padding-top: 2.5rem;

}
@keyframes flashAndFade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    30% {
        opacity: 0.2;
    }
    45% {
        opacity: 1;
    }
    60% {
        opacity: 0.2;
    }
    75% {
        opacity: 1;

    }
    100% {

        opacity: 0;
        visibility: hidden; /* Empêche d'interagir avec le div une fois invisible */
    }
}


.table-container {
    max-width: 100%;

    overflow: auto;
}

table {
    border-collapse: separate; /* Important pour éviter les chevauchements de bordures sticky */
    border-spacing: 0;
    width: 100%;
}

/* 2. Figer l'en-tête */
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f1f1f1;
}

/* 3. Figer la 1re colonne */
.col-1 {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    width: 120px; /* Largeur fixe obligatoire */
    max-width: 120px;
    min-width: 120px;
    white-space: nowrap;    /* Empêche le passage à la ligne */
    overflow: hidden;       /* Masque ce qui dépasse */
    text-overflow: ellipsis;
}

/* 4. Figer la 2e colonne (left = largeur de la 1re colonne) */
.col-2 {
    position: sticky;
    left: 120px; /* Doit être égal à la largeur de .col-1 */
    z-index: 1;
    background-color: #fff;
    width: 150px;
    min-width: 150px;
}

/* 5. Croisement : En-têtes des colonnes figées */
thead th.col-1,
thead th.col-2 {
    z-index: 3; /* Ordre de priorité au-dessus du reste */
    background-color: #f1f1f1;
}

/* 1. Annuler les overflow sur les conteneurs englobants pour permettre au sticky de fonctionner */
.table-container,
.datatable-wrapper {
    overflow: visible !important;
}

/* 2. Rendre uniquement la zone du tableau défilable horizontalement */
.datatable-container {
    overflow-x: auto !important;
    max-width: 100%;
}

/* 3. Figer la barre supérieure (recherche + pagination) */
.datatable-top {
    /*
            position: sticky;
    */
    top: 90px; /* S'ajuste juste en-dessous de votre menu <header> Bootstrap */
    z-index: 100;
    background-color: #ffffff; /* Fond blanc opaque obligatoire */
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}