/*    body {
      background:#222;
      color:#fff;
      font-family: "Consolas", sans-serif;
      margin:0;
      padding-top:50px;
    }*/
.roletd{
/*    display: flex;*/
    gap: 8px;
    flex-direction: row;
}

.role{
  width:78px;
  border-radius: 3px;
  padding:5px;
  background-size:12px;
}


/* Zébrage des lignes du tableau */
table tbody tr:nth-child(even) {
  background-color: #f0f0f0; /* gris clair */
}

table tbody tr:nth-child(odd) {
  background-color: #ffffff; /* blanc */
}

/* Optionnel : léger effet au survol */
table tbody tr:hover {
  background-color: #eef7ff;
  transition: background-color 0.2s ease;
}

    .page-wrapper {
      max-width:900px;
      margin: 0 auto;
      background: rgba(255,255,255,0.98);
      border-radius: 10px;
      padding: 20px;
      color:#222;
    }

    h1 {
      background-color: rgba(0,82,122,0.99);
      color:#fff;
      padding: 10px;
      border-radius: 6px;
      font-weight:400;
      font-size:22px;
      text-align:center;
      margin-top:0;
    }

    /* Barre de recherche */
    .search-bar {
      display:flex;
      justify-content: space-between;
      align-items:center;
      margin: 15px 0 25px 0;
      gap:10px;
    }

    .search-bar input {
      flex:1;
      padding:10px;
      border-radius:6px;
      border:1px solid #ccc;
      font-size:14px;
    }

    .search-bar button {
      background:#00527a;
      color:white;
      border:none;
      padding:10px 18px;
      border-radius:6px;
      cursor:pointer;
      font-weight:600;
    }
    .search-bar button:hover {
      background:#0070aa;
    }

    /* Tableau des utilisateurs */
    table {
      width:100%;
      border-collapse:collapse;
      background:white;
      border-radius:10px;
      overflow:hidden;
      font-size:14px;
    }

    th {
      background:#00527a;
      color:white;
      padding:10px;
      text-align:left;
      font-weight:600;
    }

    td {
      padding:10px;
      border-bottom:1px solid #ddd;
      vertical-align:middle;
    }

    tr:hover {
      background:#f5f5f5;
    }

    .profilePict {
      width:38px;
      height:38px;
      border-radius:50%;
      overflow:hidden;
    }

    .profilePict img {
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .btn {
      padding:6px 10px;
      border:none;
      border-radius:6px;
      cursor:pointer;
      font-weight:600;
      font-size:13px;
    }
    .btn-renew {
      background:#00527a;
      color:white;
    }
    .btn-renew:hover {
      background:#0070aa;
    }
    .btn-delete {
      background:#a00;
      color:white;
    }
    .btn-delete:hover {
      background:#d00;
    }

    .loading {
      text-align:center;
      padding:40px;
      font-style:italic;
      color:#555;
    }

/*    @media (max-width: 750px){
      table, thead, tbody, th, td, tr {
        display:block;
      }
      th {
        display:none;
      }
      td {
        border:none;
        border-bottom:1px solid #ddd;
        position:relative;
        padding-left:50%;
      }
      td::before {
        position:absolute;
        left:15px;
        width:45%;
        font-weight:600;
        color:#00527a;
      }
      td:nth-of-type(1)::before { content: "ID"; }
      td:nth-of-type(2)::before { content: "Photo"; }
      td:nth-of-type(3)::before { content: "Pseudo"; }
      td:nth-of-type(4)::before { content: "Email"; }
      td:nth-of-type(5)::before { content: "Sexe"; }
      td:nth-of-type(6)::before { content: "Naissance"; }
      td:nth-of-type(7)::before { content: "Rôle"; }
      td:nth-of-type(8)::before { content: "Mot de passe"; }
      td:nth-of-type(9)::before { content: "Suppr."; }
      td:nth-of-type(10)::before { content: "Apply Role."; }
    }*/
td:nth-child(4) {
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
}
td:nth-child(3) {
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
}