html{
        width: 97vw;
} 
 body {
                        font-family: system-ui, sans-serif;
                        width: 100vw;
                        margin: 0;
                       
                        background: #f5f7fa;
                        background-color: green;
                        /*background-image: url("/images/accueil.jpg");*/
                }

                .tabRes{
                        width: 95%;
                        margin-top: 50px;
                        border-radius: 15px;
                        border:solid 2px yellow;
                        margin-left: auto;
                        margin-right: auto;
                        display: flex;
                        flex-direction: column;
                        padding: 0;
                        margin-left: auto;
                        margin-right: auto;
                }

                h1 {
                        color:white;
                        font-size: 1.4rem;
                        margin-bottom: .6rem;
                        margin-left: auto;
                        margin-right: auto;
                }

                table.dataTable tbody tr {
                        background: #fff;
                }

                /* Petits badges dans la table (optionnel) */
                .tag {
                        background: #eef;
                        font-size: .75rem;
                        padding: .1rem .4rem;
                        border-radius: .3rem;
                }

                .tooltip {
                        position: relative;
                        /* élément de référence */
                        cursor: help;
                        /* pointeur contextuel */
                }

                .tooltiptext {
                        visibility: hidden;
                        opacity: 0;
                        /* rendu lissé */
                        position: absolute;
                        /*bottom: 0;*/
                        /* au-dessus de l’icône */
                        left: 50%;
                        transform: translateX(-50%);
                        /* centrer horizontalement */
                        padding: .5rem .75rem;
                        border-radius: .5rem;
                        background: #333;
                        color: #fff;
                        white-space:break-spaces;                        ;
                        /* une seule ligne */
                        transition: opacity .2s;
                        z-index: 10;
                        width: 200px;
                        left:0;
                        margin-top: 30px;
                        
                }

                /* Petite flèche */
                /*.tooltiptext::after {
                        content: '';
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%);
                        border: .4rem solid transparent;
                        border-top-color: #333;
                }*/

                /* Affichage au survol ou au focus clavier */
                .tooltip:hover .tooltiptext,
                .tooltip:focus-within .tooltiptext {
                        visibility: visible;
                        opacity: 1;
                        z-index: 9;
                }
                .red{
                        background-color: red;
                }
                .green{
                        background-color: green;
                }
                .blue{
                        background-color: blue;
                }
                .yellow{
                        background-color: yellow;
                }
                .orange{
                        background-color: orange;
                }

                .court{
                        width: 25px !important;
                        
                }
                .moyen{
                        width: 150px;
                }
                .long{
                        width: 200px;
                }

                .tooltip-right {
  /*float: right;        /* Aligne à droite dans la cellule */
  margin-left: auto;   /* Évite que ça colle au texte */
  display: inline-block;
  position: relative;
  cursor: help;
  margin-right: 75%;
}

.tooltip-right .tooltiptext {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 8;
  top: -5px;
  right: 75%; /* s'affiche à gauche du point d’interrogation */
  white-space: normal;
  max-width: 250px;
  
}

.tooltip-right:hover .tooltiptext {
  visibility: visible;
  z-index: 99;
}

.tooltiptext:hover {
  z-index: 99;
}

.test{
    background-color: transparent;    
}