/* Réinitialisation */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Layout général */
body, html {
    height: 100%;
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #ecf0f1;
}
.site-name{
	font-size: 40px;
	text-align:center;
    width: 100%;

}
/* En-tête */
header.top-bar {
    height: 80px;
    background-color: #1c2834;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    position: fixed; /* Fixe l'en-tête */
    top: 0; /* Place l'en-tête en haut de la page */
    left: 0; /* S'étend sur toute la largeur */
    width: 100%; /* Occupe toute la largeur */
    z-index: 1000; /* Assure que l'en-tête reste au-dessus des autres éléments */
    /*background-image:url("SFHI_cqx2.png");*/
    /*background-repeat: no-repeat; *//* Empêche la répétition de l'image */
    /*background-size: contain;*/ /* L'image couvre tout l'espace de l'élément */
    /*background-position: center;*/ /* Centre l'image dans l'élément */
}
.logo-link img {
    height: 79px; /* ou auto, selon ton image */
}

/* Menu latéral */
nav.side-menu {
    width: 60px;
    background-color: #2c3e50;
    height: 100vh;
    position: fixed;
    top: 80px;
    left: 0;
    padding-top: 20px;
    transition: all 0.3s ease; /* Transition pour l'effet */
    z-index: 10;
}

nav.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;

}

nav.side-menu ul li {
    margin: 20px 0;
}

nav.side-menu>ul>li>a {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background-color: #dddddd;
    border-radius: 5px;
    line-height: 40px;

    color: white;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Relief initial */
    transition: all 0.3s ease; /* Animation fluide */
}

nav.side-menu ul li a img {
    max-width: 100%; /* L'image ne dépassera jamais la taille de son conteneur */
    height: auto;    /* Maintient les proportions de l'image */
    display: block;  /* Évite les espaces blancs autour de l'image */
}

nav.side-menu ul li a:hover {
    background-color: #33bdec; /* Couleur changeante au survol */
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Accentuation du relief */
}

/* Sous-menu caché par défaut */
nav.side-menu ul li .sub-menu {
    display: none;
    position: absolute;
    left: 100%; /* Positionné à droite du parent */
    top: 0; /* Aligné en haut du parent */
    background-color: #34495e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 10;
    height: 100vh;
    min-width: 200px; /* Largeur minimale */
    white-space: nowrap; /* Empêche les retours à la ligne */
    transform: translateX(0); /* Correction de l'alignement */
}

/* Espacement vertical des items dans le sous-menu */
nav.side-menu ul li .sub-menu li {
    margin: 0 !important; /* Supprime les marges */
}

/* Style des liens dans le sous-menu */
nav.side-menu ul li .sub-menu li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    display: block;
    padding: 5px 10px;
    border-radius: 3px;
    
    text-align: left; /* Aligne le texte à gauche */
}

/* Afficher le sous-menu au survol */
nav.side-menu ul li:hover > .sub-menu {
    display: block;
}

/* Contenu principal */
.main-layout {
    margin-top: 80px; /* Compense la hauteur du header (80px) */
    margin-left: 60px;
    padding-bottom: 40px; /* Ajout pour éviter le chevauchement avec le footer */
    min-height: calc(100vh - 120px); /* 80px (header) + 40px (footer) */
    background-color: #ecf0f1;
}

/* Footer */
footer.footer {
    height: 40px;
    background-color: #33bdec;
    text-align: center;
    color: white;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
}



.alert {
    position: sticky;
    top: 139px; /* Hauteur de ton header */
	font-size:20px;
	background-color: red;	
    z-index: 9; /* inférieur à celui du header (1000), mais au-dessus du reste */
    text-align: center;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    margin-left:
}


/* Style pour le formulaire de connexion */
.login-form {
    display: flex;
    align-items: center;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    border: none;
    border-radius: 3px;
    font-size: 14px;
}


/*
table {
    width: 100%;
    border-collapse: collapse;
}

table th, table td {
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #f2f2f2;
}
*/
/* Table principale */
table {
    width: 90%;
    border-collapse: collapse; /* Enlève les espaces entre les bordures */
    margin-bottom: 20px; /* Espacement avec les éléments voisins */
    background-color: #fff; /* Fond blanc pour contraste */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    overflow: hidden; /* Nécessaire pour arrondir les bords */
    margin:auto;
    margin-bottom:30px;
}

/* En-tête du tableau */
table th {
    background-color: #33bdec; /* Couleur de l'en-tête */
    color: white; /* Texte blanc */
    text-transform: uppercase; /* Texte en majuscules */
    font-size: 14px; /* Taille de texte */
    font-weight: bold; /* Texte en gras */
    padding: 5px 15px; /* Espacement */
}

/* Cellules du tableau */
table td {
    padding: 5px 15px; /* Espacement */
    text-align: left; /* Alignement du texte */
    font-size: 14px; /* Taille de texte */
    color: #555; /* Couleur du texte */
}

/* Lignes impaires (zebra striping) */
table tr:nth-child(odd) {
    background-color: #f9f9f9; /* Couleur de fond pour contraste */
}

/* Lignes paires */
table tr:nth-child(even) {
    background-color: #e8e7e7; /* Légère différence pour l'alternance */
}

/* Lignes survolées */
table tr:hover {
    background-color: #e0f7fa; /* Couleur de survol */
    cursor: pointer; /* Curseur pointeur */
}

/* Actions spécifiques dans le tableau */
table td:last-child a {
    color: #33bdec; /* Couleur pour les liens */
    text-decoration: none; /* Supprimer le soulignement */
    font-weight: bold; /* Mettre en valeur */
    margin-right: 10px; /* Espacement entre les actions */
    transition: color 0.3s ease;
}

table td:last-child a:hover {
    color: #16a085; /* Couleur lors du survol */
}

/* Table secondaire */
.sub-table {
    width: 100%;
    border-collapse: collapse; /* Enlève les espaces entre les bordures */
    margin-bottom: 20px; /* Espacement avec les éléments voisins */
    background-color: #fff; /* Fond blanc pour contraste */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    overflow: hidden; /* Nécessaire pour arrondir les bords */
}

/* En-tête du tableau */
.sub-table th {
    background-color: #2efcd3; /* Couleur de l'en-tête */
    color: white; /* Texte blanc */
    text-transform: uppercase; /* Texte en majuscules */
    font-size: 14px; /* Taille de texte */
    font-weight: bold; /* Texte en gras */
    padding: 5px 15px; /* Espacement */
}

/* Cellules du tableau */
.sub-table td {
    padding: 5px 15px; /* Espacement */
    text-align: left; /* Alignement du texte */
    font-size: 14px; /* Taille de texte */
    color: #555; /* Couleur du texte */
}

/* Lignes impaires (zebra striping) */
.sub-table tr:nth-child(odd) {
    background-color: #f9f9f9; /* Couleur de fond pour contraste */
}

/* Lignes paires */
.sub-table tr:nth-child(even) {
    background-color: #e8e7e7; /* Légère différence pour l'alternance */
}

/* Lignes survolées */
.sub-table tr:hover {
    background-color: #e0f7fa; /* Couleur de survol */
    cursor: pointer; /* Curseur pointeur */
}

/* Actions spécifiques dans le tableau */
.sub-table td:last-child a {
    color: #1ffed2; /* Couleur pour les liens */
    text-decoration: none; /* Supprimer le soulignement */
    font-weight: bold; /* Mettre en valeur */
    margin-right: 10px; /* Espacement entre les actions */
    transition: color 0.3s ease;
}

.sub-table td:last-child a:hover {
    color: #4afcda; /* Couleur lors du survol */
}


.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #34495e;
    color: white;
    text-decoration: none;
    margin: 10px 0;
}

.btn:hover {
    background-color: #33bdec;
}
.add-user-btn, .add-exercisepart-btn,.add-sample-btn{
    display: inline-block;
    padding: 10px 20px;
    background-color: #34495e;
    color: white;
    text-decoration: none;
    margin: 10px 0;
}

.add-user-btn:hover , .add-exercisepart-btn:hover,.add-sample-btn:hover{
    background-color: #33bdec;
}
.highlight {
    background-color: #e1f1ff; /* Une couleur d'arrière-plan douce */
    font-weight: bold; /* Optionnel, pour une meilleure visibilité */
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: auto;
}

.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 50%;
    position: relative;
     overflow-y: auto;
     max-height: 90%;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    cursor: pointer;
}


/* Conteneur du formulaire */
#addUserForm, #addForm, #modifyForm {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    margin-bottom:30px;
}

/* Conteneur du formulaire */
#addForm2{
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

/* Titre du formulaire */
#addUserForm h3, #addForm h3, #modifyForm h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Titre du formulaire */
#addUserForm h4, #addForm h4, #modifyForm h4 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Conteneur pour chaque champ */
.form-group {
    margin-bottom: 15px;
}

/* Label */
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

/* Input, select, textarea */
.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
}


/* Espacement entre les champs */
.form-group select[readonly] {
    pointer-events: none;
    background-color: #e9ecef;
}

/* Conteneur principal */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement entre les items */
    padding: 10px 0;
}

/* Chaque checkbox + label */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacement entre la case à cocher et le label */
}

/* Style pour la case à cocher */
.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1abc9c; /* Couleur de la case cochée */
}

.checkbox-group.invalid {
    border: 1px solid red;
    padding: 10px;
    border-radius: 5px;
    background-color: #ffe6e6;
}


.log_table,.log_table tr, .log_table td {
    all: unset; /* Réinitialise toutes les propriétés CSS */
   display: table; /* Remet le comportement de table */
    
}

.log_table{
    width: 100%;
    border-collapse: collapse; /* Enlève les espaces entre les bordures */
    margin-bottom: 20px; /* Espacement avec les éléments voisins */
    background-color: #fff; /* Fond blanc pour contraste */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    overflow: hidden; /* Nécessaire pour arrondir les bords */
}

/* Cellules du tableau */
.log_table td {
    padding: 5px 15px; /* Espacement */
    text-align: left; /* Alignement du texte */
    font-size: 14px; /* Taille de texte */
    color: #555; /* Couleur du texte */
}

/* Lignes impaires (zebra striping) */
.log_table tr{
    background-color: #f9f9f9; /* Couleur de fond pour contraste */
}


#login_button {
    background-image: url("Icons/login.svg");
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: contain; /* Ajuste l'image pour remplir le bouton */
    background-position: center; /* Centre l'image dans le bouton */
    border: none; /* Supprime la bordure du bouton */
    width: 25px; /* Largeur du bouton */
    height: 25px; /* Hauteur du bouton */
    text-indent: -9999px; /* Cache le texte du bouton */
    overflow: hidden; /* Empêche le texte de déborder */
    display: inline-block; /* Maintient l'aspect bouton */
    cursor: pointer; /* Affiche le curseur comme pour un bouton */
}
#logout_button {
    background-image: url("Icons/logout.svg");
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: contain; /* Ajuste l'image pour remplir le bouton */
    background-position: center; /* Centre l'image dans le bouton */
    border: none; /* Supprime la bordure du bouton */
    width: 25px; /* Largeur du bouton */
    height: 25px; /* Hauteur du bouton */
    text-indent: -9999px; /* Cache le texte du bouton */
    overflow: hidden; /* Empêche le texte de déborder */
    display: inline-block; /* Maintient l'aspect bouton */
    cursor: pointer; /* Affiche le curseur comme pour un bouton */
}

.samplediv {
    position: sticky;
    top: 80px; /* Hauteur de ton header */
    background-color: white;
    z-index: 9; /* inférieur à celui du header (1000), mais au-dessus du reste */
    text-align: center;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
.samplediv h1{
	text-align:center;
	width:100%;
	
}


.hidden-files {
    display: none; /* Cache les fichiers au chargement */
}

.folder-toggle {
    cursor: pointer;
    font-weight: bold;
}