#management div label   { text-align : right; margin-right : 5px;  }

.formmanagement_tooltip:hover{z-index:25; }

.formmanagement_tooltip span{
	display: none;
    position:relative; 
    z-index:24; 
    color:#000;
    text-decoration:none;
}

.formmanagement_tooltip a {
    color:#FFF;
}
.formmanagement_tooltip a:hover {
    color:red;
}

.formmanagement_tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:0,5em; left:10em; width:20em;
    /*border:1px solid #000000;*/
	border:1px solid #AAAAAA;
	border-radius: 5px;
	border-style: outset;
    background-color:rgb(236 223 196 / 80%); 
	color:#333;
    text-align: center;
}

.formmanagement_tooltip:hover span.registered { 
	border-color:red;
	border-style: solid;
}


/* Ajoute ce CSS dans ton fichier style.css ou dans un <style> */
.management-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.left  {
  flex: 1 1 58%; /* largeur mini 350px, partage l'espace */
  min-width: 50%;
} 
.right {
    /*flex: 1 1 40%;*/ /* largeur mini 350px, partage l'espace */
    min-width: 30%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;       /* horizontal */
}
#niveaux {
  display: none;
}
#niveaux.visible {
  display: block;
}

@media (max-width: 900px) {
  .management-flex {
    flex-direction: column;
    align-items: center;
  }
  .left, .right {
    min-width: 200px;
  }
}

/* Gestion des tableaux de liste */
.ffessm-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,90,167,0.08);
  background: #f7fbff;
  width: auto;
  min-width: 400px;
  max-width: 95%;
  margin: 0 auto;
  table-layout: auto;  
}
.ffessm-table th {
  background: linear-gradient(90deg, #58BFF1 70%, #b3e0fa 100%);
  color: #005AA7;
  font-weight: bold;
  border: none;
  font-size: 1.05em;
  vertical-align: middle !important;
}
.ffessm-table td {
  vertical-align: middle;
  font-size: 1em;
  border-color: #e5e7eb;
}
.ffessm-table .btn-outline-primary {
  border-color: #005AA7;
  color: #005AA7;
}
.ffessm-table .btn-outline-primary:hover {
  background: #005AA7;
  color: #fff;
}
.ffessm-table .btn-outline-info {
  border-color: #58BFF1;
  color: #005AA7;
}
.ffessm-table .btn-outline-info:hover {
  background: #58BFF1;
  color: #fff;
}
.ffessm-table .btn-outline-danger {
  border-color: #E60028;
  color: #E60028;
}
.ffessm-table .btn-outline-danger:hover {
  background: #E60028;
  color: #fff;
}
.ffessm-table .table-secondary {
  background: #f3f4f6 !important;
  color: #888;
}
.ffessm-table tr:hover td {
  background: #eaf6ff;
}

.ffessm-table tbody tr:nth-child(even) td {
  background: #eaf6ff; /* bleu très clair FFESSM */
}
.ffessm-table tbody tr:nth-child(odd) td {
  background: #f7fbff; /* gris/bleu très pâle FFESSM */
}
.ffessm-table tr.table-secondary td {
  background: #f3f4f6 !important;
  color: #888;
}
.ffessm-action-col {
  width: 1%;
  white-space: nowrap;
  min-width: 120px;
  max-width: 200px;
}
.ffessm-action-col-1 {
  width: 1%;
  white-space: nowrap;
  min-width: 40px;
  max-width: 60px;
}
.ffessm-table .btn {
  padding: 2px 6px;
  font-size: 0.85em;
  border-radius: 5px;
  min-width: 20px;
  min-height: 20px;
}
.ffessm-table .btn img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.ffessm-table thead tr:nth-child(2) th {
  font-size: 0.92em;
  font-weight: 500;
}