BODY {

.scrollable-grid {
    overflow-y: auto;

}


[role="button"] {
    background-color: transparent; /* Pas de fond */
    opacity: 0.7;
    color: inherit; /* Couleur du texte héritée */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    padding: 1px 2px;

    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;

    cursor: pointer;
    transition: border 0.3s ease-in-out;
}

[role="button"]:hover {
    opacity: 1;
    border: 1px solid lightgray;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Montserrat', sans-serif; /* Police Montserrat */
}

 [role^="combobox"]   {
    display: inline-block;
    width: 100%; /* Adapte le champ à la largeur du conteneur */
    border: 1px solid #ccc; /* Bordure grise par défaut */
    border-radius: 6px; /* Coins arrondis */
    font-size: 14px; /* Taille du texte */
    font-family: 'Montserrat', sans-serif; /* Police Montserrat */
    color: #333; /* Couleur du texte */
    background-color: #fff; /* Fond blanc */
    box-shadow: 0 0 5px rgba(211, 211, 211, 0.5); /* Ombregris clair */
}







[role^="textbox"]   {
    display: inline-block;
    width: 100%; /* Adapte le champ à la largeur du conteneur */
    border: 1px solid #ccc; /* Bordure grise par défaut */
    border-radius: 6px; /* Coins arrondis */
    padding: 8px; /* Espacement interne */
    font-size: 14px; /* Taille du texte */

     font-family: 'Montserrat', sans-serif; /* Police Montserrat */
    color: #333; /* Couleur du texte */
    background-color: #fff; /* Fond blanc */
/*    transition: all 0.3s ease; /* Transition fluide pour les interactions */
    box-shadow: 0 0 5px rgba(211, 211, 211, 0.5); /* Ombregris clair */
}




[role^="date"]    {
    display: inline-block;
    width: 100%; /* Adapte le champ à la largeur du conteneur */
    border: 1px solid #ccc; /* Bordure grise par défaut */
    border-radius: 6px; /* Coins arrondis */
    padding: 8px; /* Espacement interne */
    font-size: 14px; /* Taille du texte */
    font-family: 'Montserrat', sans-serif; /* Police Montserrat */
    color: #333; /* Couleur du texte */
    background-color: #fff; /* Fond blanc */
    transition: all 0.3s ease; /* Transition fluide pour les interactions */
    box-shadow: 0 0 5px rgba(211, 211, 211, 0.5); /* Ombregris clair */
}







.checkboxbutton {
    background-color: white;
    cursor: default;
    accent-color: #e91e63;
}


.checkbox {
    background-color: white;
    cursor: default;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: 1px;
    border: none ;
    border-radius: 6px; /* Coins arrondis */
    font-size: 10px; /* Taille du texte */
    font-family: 'Montserrat', sans-serif; /* Police Montserrat */
    text-align: left;
}






.panel {
    display: block;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(211, 211, 211, 0.5);
    font-family: 'Montserrat', sans-serif;
    color: #333;
    font-size: 14px;

}

.panel:hover,
.panel:focus-within {
    border-color: #888;
    box-shadow: 0 0 8px rgba(100, 100, 100, 0.2);
}


.panelbody {
    position: absolute;
    top: 0;
    width: 100%;
    height : 25px ;
    line-height: 25px;
    border: 0px solid #ccc;
    background-color: teal ;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-align: center;
    color : White ;

}



.panelEditbody {
    position: absolute;
    border: 1px solid #ccc;
    background-color: white ;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    font-size: 10px;
    text-align: center;
    border-radius: 6px; /* Coins arrondis */
}






 .Connection-button {
    background-color: black; /* Fond black */
    color: white; /* Texte en blanc */
    }



  .PassView-button {
    background-color: grey ; /* Fond  */
 }



  .Trie-button {
    background-color: medgrey ; /* Fond  */
 }

  .Trie-button::after {
    content: "⇅"; /* Par défaut : double flèche */
    font-size: 12px;
 }



 .Ajouter-button {
    color: white ;
    background-color: green; /* Fond vert */
 }

 .Modifier-button {
    color: white ;
    background-color: orange; /* Fond orange */
 }

 .Supprimer-button {
    color: white ;
    background-color: red; /* Fond rouge */
 }

 .Dupliquer-button {
    color: white ;
    background-color: #FFD700; /* Fond Gold */
 }


 .Imprimer-button {
    color: white ;
    background-color: blue ;
 }


  .SelectionOptions-button {
    background-color: white ;
    color: gray ;
 }




 .green-button {
    background-color: teal; /* Fond vert */
    color: white ;
 }





 .compteur {
     border: 1px solid #ccc;
    background-color: gray;
    box-shadow: 0 0 5px rgba(211, 211, 211, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    text-align: center;
    border-radius: 6px; /* Coins arrondis */
 }
  .compteur-label {
    color : white  ;
 }




.Menu-fond {
    background-color: white;
    border: none;
    border-radius: 5px;
    padding: 1px 2px;
    transition: border 0.3s ease-in-out;
}

.Menu-bouton,
.Menu-bouton-Selected
 {
    color: white;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 2px 0px;
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: border 0.3s ease-in-out;
    opacity: 0.5;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}

.Menu-bouton {
    background-color: gray;
}


.Menu-bouton-Selected {
    background-color: red;
    opacity: 1;
}

.Menu-bouton:hover {
    background-color: red  ;
    opacity: 1;
    border: 1px solid lightgray;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}




.aaa   {  /* quand le bouton est selectionné */
display: inline-block;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;
    min-width: 50px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    background-color: red;
    color : white  ;
    border: 1px solid #ccc;
    border-radius: 12px;
    opacity: 0.8;
    }


.bbb   {/* quand le bouton est de-selectionné */
display: inline-block;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;
    min-width: 50px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    background-color: gray;
    color : white  ;
    border: 0px solid #ccc;
    border-radius: 12px;
    opacity: 0.8;
    }




.ddd   {  /* quand le Général */
    display: inline-block;
    text-align: left ;
    text-decoration: none;
    min-width: 50px;
    color: gray ;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    padding: 2px 2px;     /* espacement entre les bouton  */
    }


.ccc   { /* la bande de fond derierre le bouton  */
    display: block;
    color: rgb(0, 0, 0);
    background-color: white;
    text-align: left ;
    opacity: 1;
    padding: 0 ;
    border: 1px solid #ccc;
    margin-top: 0px;
    }

.eee {
     background-color: green ;


}



.tms-file-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 500;
  color: inherit;            /* texte hérite de la couleur */
}

.tms-file-btn::file-selector-button {
    background-color: yellow; /* Pas de fond */
    opacity: 0.7;
    color: black ; /* Couleur du texte héritée */
    border: none;
    border-radius: 10px;
    padding: 1px 2px;
    font-size: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: border 0.3s ease-in-out;
}

/* États optionnels */
.tms-file-btn:hover::file-selector-button,
.tms-file-btn:hover::-webkit-file-upload-button { opacity: 1; }

.tms-file-btn:focus-within::file-selector-button,
.tms-file-btn:focus-within::-webkit-file-upload-button {
  outline: none;
  border: 1px solid currentColor; /* même logique que ton exemple */
}









}