/* ---- Configuration générale ---- */
body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400; /* Utilisez 400 pour regular, 300 pour light, 700 pour bold */
    margin: 0;
    padding: 0;
    background-color: #f0f9ff;
    line-height: 1.6;
}

h1, h2, h3 {
    margin: 0 0 0px;
    color: #1c3d5a;
}


a {
    text-decoration: none;
    color: #0078d7;
    transition: color 0.3s ease;
}

a:hover {
    color: #ffffff;
}

/* ---- Header principal ---- */
header {
    background: linear-gradient(135deg, #0078d7, #00478a); 
    color: #fff;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.46);
    position: relative; /* Pour les éléments flottants ou décoratifs */
    overflow: visible;
    border-bottom: 4px solid #0056a6; /* Accent bleu foncé */
    margin-bottom: 50px;
}



@keyframes slide {
    from {
        transform: translateX(0) translateY(0);
    }
    to {
        transform: translateX(50px) translateY(50px);
    }
}

header h1 {
    margin: 0;
    font-size: 2.8em;
    font-weight: bold;
    color: #fff;
    z-index: 1; /* Surpasse l'arrière-plan */
    animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

header nav {
    margin-top: 20px;
    margin-bottom: 30px;
    z-index: 1; /* Surpasse l'arrière-plan */
    position: relative;
    
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

header nav ul li {
    position: relative;
}

header nav ul li a {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 0px; /* Boutons totalement arrondis */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease, background-color 0.3s ease;
    position: relative;
}

header nav ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    z-index: -1;
    transition: width 0.4s ease;
}

header nav ul li a:hover::before {
    width: 120%; /* Couvre tout le bouton avec un effet de vague */
}

header nav ul li a:hover {
    color: #1c3d5a; /* Couleur du texte au survol */
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Ombre douce */
}

header nav ul li a.active {
    color: #1c3d5a;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Accentuation pour la page active */
    text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}



header nav ul li a:hover::after,
header nav ul li a.active::after {
    width: 50%;
}

/* Styles pour le menu déroulant sous Lycées */
.menu-lycees {
    position: relative;
}

.menu-lycees .dropdown {
    display: none;
    position: absolute;
    top: 100%; /* Positionné en dessous du parent */
    left: 0px;
    background: #71aada;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Assurez-vous que le menu apparaît au-dessus */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 400px;
    color:#fff;
}

.menu-lycees .dropdown li {
    
}

.menu-lycees .dropdown li a {
    color: #212b47;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    display: block;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.menu-lycees .dropdown li a:hover { 
    color: #1c3d5a;
}

/* Afficher le menu déroulant au survol */
.menu-lycees:hover .dropdown {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* Animation pour le menu déroulant */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lien_deroulant_li
{
    padding:0;
    margin:0;
}



/* ---- Conteneur principal ---- */
.container {
    margin: 20px auto;
    width: 90%;
    max-width: 1200px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background:#ffffff;
}

/* ---- Page d'Accueil ---- */
#home-container {
    margin-top: 20px;
}

#home-container h1{
    color:rgb(51, 51, 51);
    font-weight: 400;
}

/* ---- Sections ---- */
#home-container section {
    margin-top: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #0078d7, #00478a); 
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    border-top: 10px solid #00335b;
}

#home-container section:nth-child(even) {
    background: linear-gradient(135deg, #0078d7, #00478a); 
}

#home-container section h2 {
    font-size: 2em;
    color: #ebf6ff;
    margin-bottom: 20px;
    text-shadow:2px 2px 1px rgba(0, 0, 0, 0.479);
}

#home-container section:nth-child(even) h2 {
    color: #ebf6ff;
}

/* ---- Section des Cartes ---- */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
    margin: 20px auto;
}

/* Styles pour les cartes de Mes Lycées */
.lycee-card {
    position: relative;
    background-color: #f0f9ff; /* Couleur de secours */
    color: white;
    border-radius: 8px;
    overflow: hidden;
    height: 200px; /* Hauteur fixe */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
}

.mestaches-card {
    position: relative;
    background-color: #fff; /* Couleur de secours */
    color: white;
    border-radius: 8px;
    overflow: hidden;
    height: 200px; /* Hauteur fixe */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
}

.lycee-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
  }

.lycee-card p {
    margin: 0;
    z-index: 1; /* Assure que le texte est au-dessus de l'overlay */
}
.lycee-card h5 {
    color:rgb(0, 41, 102);
    font-size:1.1em;
    padding-right: 40px;    
    margin: 0;
    z-index: 1; /* Assure que le texte est au-dessus de l'overlay */
    font-weight: 300;
    background: rgba(255, 255, 255, 0.41);
    text-align:right;
}


.lycee-card h4 {
    color:#444;
    font-size:1.5em;
    padding-right: 40px;    
    margin: 0;
    z-index: 1; /* Assure que le texte est au-dessus de l'overlay */
    font-weight: 900;
    background: rgba(255, 255, 255, 0.41);
    text-align:right;
}

.lycee-card .btn {
    background-color: rgba(255, 255, 255, 0.8);
    color: #0078d7;
    border-radius: 5px;
    text-align: center;
    z-index: 1;
}

.btn_lycees {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background: rgb(0, 91, 176);
    color: #ffffff;
    font-weight: 400;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    width: 36%;
    margin: auto; 
}

.btn_lycees:hover {
    background-color: rgb(26, 73, 123);
}

.lycee-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* ---- Carte individuelle ---- */
.card {
    background:#fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.43);
    text-align: left;
    transition: transform 0.5s ease, box-shadow 1s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card h3 {
    font-size: 1.5em;
    color: #1c3d5a;
}

.card p {
    font-size: 1em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.card-etab {
    font-weight:400;
    margin:0px 0px;
}

.card a.btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #0078d7;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
}

.card a.btn:hover {
    background-color: #0056a6;
}

/* ---- Effets sur les cartes ---- */
.card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ---- Responsive Design ---- */
@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 480px) {
    .cards-container {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 15px;
    }
}

/* ---- Conteneur principal ---- */
#add-user-container {
    margin: 20px auto;
    width: 90%;
    max-width: 800px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #0078d7; /* Accent bleu */
}

/* ---- Titre principal ---- */
#add-user-container h2 {
    margin-bottom: 20px;
    font-size: 2em;
    color: #1c3d5a;
    text-align: center;
}

/* ---- Formulaire ---- */
#add-user-container form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#add-user-container form input,
#add-user-container form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 0.9em;
    background-color: #f8fcff;
    color: #1c3d5a;
}

#add-user-container form input::placeholder,
#add-user-container form select::placeholder {
    color: #888; /* Placeholder doux */
    font-size: 0.9em;
}

#add-user-container form button {
    background-color: #0078d7; /* Bleu vif */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#add-user-container form button:hover {
    background-color: #0056a6; /* Bleu plus foncé */
}

/* ---- Tableau des utilisateurs ---- */
.user-list {
    margin-top: 30px;
}

.user-list h2 {
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #1c3d5a;
    text-align: center;
}

.user-list table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.user-list table th,
.user-list table td {
    padding: 10px;
    border: 1px solid #e1f0ff;
    text-align: left;
}

.user-list table th {
    background-color: #0078d7; /* Bleu vif */
    color: white;
    font-weight: bold;
}

.user-list table tr:nth-child(even) {
    background-color: #f0f9ff;
}

.user-list table input,
.user-list table select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    box-sizing: border-box;
}

/* ---- Champs avec placeholders ---- */
.user-list table input::placeholder {
    color: #888; /* Couleur douce pour le placeholder */
    font-size: 0.9em;
}

/* ---- Actions ---- */
.user-list table td.actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.user-list table td.actions button,
.user-list table td.actions a {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 16px;
    transition: transform 0.2s ease, color 0.3s ease;
}

.user-list table td.actions button:hover i,
.user-list table td.actions a:hover i {
    color: #0056a6;
    transform: scale(1.2);
}

.user-list table td.actions a i.fa-trash {
    color: red;
}

.user-list table td.actions a i.fa-trash:hover {
    color: darkred;
}

/* ---- Responsive Design ---- */
@media (max-width: 768px) {
    #add-user-container {
        width: 100%;
        padding: 15px;
    }
}

/* ---- Liste des établissements ---- */
#etablissement-container {
    margin-top: 10px;
}

#etablissement-container img {
    width: 100px;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}


/* ---- Tableaux ---- */
#etablissement-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;
}

#etablissement-container th,
#etablissement-container td {
    padding: 6px;
    border: 1px solid #e1f0ff; /* Lignes légères */
    text-align: left;
}

#etablissement-container th {
    background-color: #28a745; /* Vert vif */
    color: white;
    font-weight: bold;
}

#etablissement-container tr:nth-child(even) {
    background-color: #f8fcff; /* Bleu clair */
}

#etablissement-container td input,
#etablissement-container td select {
    width: 100%;
    padding: 5px;
    font-size: 0.85em;
    border: 1px solid #ced4da;
    border-radius: 3px;
    margin: 0;
}

/* ---- Actions dans les tableaux ---- */
#etablissement-container td .actions {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligne les icônes horizontalement */
    gap: 10px; /* Espace entre les icônes */
}

#etablissement-container button i,
#etablissement-container a i {
    font-size: 16px;
    color: #0078d7; /* Bleu vif */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
    background: none; /* Supprime le fond */
    padding: 0; /* Supprime les marges internes */
    border: none; /* Pas de bordure */
}

#etablissement-container button i:hover,
#etablissement-container a i:hover {
    color: #0056a6; /* Bleu plus foncé */
    transform: scale(1.1); /* Zoom au survol */
}

#etablissement-container a i.fa-trash {
    color: red;
}

#etablissement-container a i.fa-trash:hover {
    color: darkred;
}


/* ---- Messages de succès et d'erreur ---- */
.success-message,
.error-message {
    padding: 5px;
    font-size: 0.9em;
    border-radius: 3px;
    text-align: center;
    margin-bottom: 10px;
}

.success-message {
    background-color: #eaf7ef; /* Vert pastel */
    color: #28a745; /* Vert vif */
    border: 1px solid #28a745;
}

.error-message {
    background-color: #fbe9e7; /* Rouge pastel */
    color: #e53935; /* Rouge vif */
    border: 1px solid #e53935;
}

/* ---- Responsive Design ---- */
@media (max-width: 768px) {
    #add-etab-container form input,
    #add-etab-container form select {
        width: 100%; /* Une seule colonne sur petits écrans */
    }
    #etablissement-container td input,
    #etablissement-container td select {
        font-size: 0.8em;
    }
}

/* ---- Conteneur principal ---- */
#task-details-container {
    margin: 20px auto;
    width: 90%;
    max-width: 800px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ---- Titre principal ---- */
#task-details-container h2 {
    text-align: left;
    margin-bottom: 20px;
    color: #1c3d5a;
    font-size: 24px;
    font-weight: bold;
}

/* ---- Table des détails ---- */
.details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin:auto;
}

.details-table th, .details-table td {
    padding: 10px;
    border: 1px solid #ffffff;
    text-align: left;
    vertical-align: top;
    font-size:13px;
}

.details-table .td-details-infos {
    background:#ececec;
}

.details-table th {
    background-color: #0078d7;
    color: white;
    font-weight: bold;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.details-table td {
    background-color: #f8fcff;
    color: #0f0f0f;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ---- Classes pour la priorité ---- */
.details-table td.haute {
    color: red;
    font-weight: bold;
}

.details-table td.moyenne {
    color: orange;
    font-weight: bold;
}

.details-table td.basse {
    color: green;
    font-weight: bold;
}

/* ---- Texte complet ---- */
.text-complet-container {
    margin-top: 30px;
}

.text-complet-container h3 {
    margin-bottom: 10px;
    color: #1c3d5a;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.text-complet {
    padding: 15px;
    background-color: #f0f9ff;
    border: 1px solid #e1f0ff;
    border-radius: 5px;
    color: #495057;
    font-size: 14px;
    line-height: 1.5;
}


/* ---- Conteneur Principal ---- */
#profil-container {
    margin: 20px auto;
    width: 90%;
    max-width: 800px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #0078d7;
}

/* ---- Titre Principal ---- */
#profil-container h2 {
    text-align: center;
    color: #1c3d5a;
    font-size: 24px;
    margin-bottom: 20px;
}

/* ---- Formulaire ---- */
.profil-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profil-main {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* ---- Informations ---- */
.profil-info {
    flex: 2;
}

.profil-info label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #1c3d5a;
}

.profil-info input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 14px;
    background-color: #f8fcff;
    color: #495057;
}

/* ---- Avatar ---- */
.profil-avatar {
    flex: 1;
    text-align: left;
    align-self: flex-start;
    margin-left:20px;
}

.profil-avatar img.avatar {
    width: 150px;
    height: 150px;
    border-radius: 5%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 2px solid #0064ce;
}

.profil-avatar input[type="file"] {
    width: 100%;
    font-size: 12px;
}

/* ---- Bouton ---- */
.profil-form .btn {
    display: block;
    width: 100%;
    background-color: #0078d7;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.profil-form .btn:hover {
    background-color: #0056a6;
}

/* ---- Menu Administration ---- */
#admin-menu {
    text-align: left;
    margin-top: 30px;
}

#admin-menu h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1c3d5a; /* Ajuster selon votre thème */
}

.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    justify-items: center;
    padding: 10px;
}

.admin-menu-item {
    background-color: #f0f9ff; /* Fond clair */
    border: 1px solid #e1f0ff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 200px;
}

.admin-menu-item:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-menu-item a {
    text-decoration: none;
    color: #0078d7; /* Couleur de lien */
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-menu-item a:hover {
    color: #0056a6;
}

.admin-menu-item i {
    font-size: 3em; /* Taille des icônes */
    margin-bottom: 10px;
    color: #0078d7;
    transition: color 0.3s ease;
}

.admin-menu-item:hover i {
    color: #0056a6;
}

.admin-menu-item span {
    font-size: 1em;
    text-align: center;
    margin-top: 5px;
}


/* ---- Conteneur principal ---- */
#lycee-details-container {
    margin: 20px auto;
    width: 90%;
    max-width: 1200px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #0078d7;
}

/* ---- En-tête ---- */
.lycee-header {
    text-align: center;
    margin-bottom: 20px;
}

.lycee-header h1 {
    font-size: 2.5em;
    color: #1c3d5a;
}

.lycee-header .ville {
    font-size: 1.2em;
    color: #0078d7;
}

/* ---- Corps de la page ---- */
.lycee-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lycee-description {
    flex: 2;
    font-size: 1.2em;
    color: #495057;
    line-height: 1.6;
}

.lycee-illustration {
    flex: 1;
    text-align: center;
}

.lycee-illustration img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Définition de l'animation */
@keyframes pulse {
    0% {
        transform: scale(1); /* Taille normale */
    }
    50% {
        transform: scale(1.2); /* Agrandissement */
    }
    100% {
        transform: scale(1); /* Retour à la taille normale */
    }
}

/* ---- Footer ---- */
footer {
    background: linear-gradient(135deg, #0078d7, #00478a); /* Dégradé bleu et vert */
    color: white;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    margin-top: 50px;
}

footer .footer-top {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

footer .footer-section {
    flex: 1;
    margin: 10px;
    min-width: 200px;
}

footer .footer-section h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 5px;
}

footer .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .footer-section ul li {
    margin-bottom: 10px;
}

footer .footer-section ul li a {
    color: #f0f9ff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

footer .footer-section ul li a:hover {
    color: #ffffff;
}

footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

footer .social-icons a {
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

footer .social-icons a:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

footer .footer-bottom {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

footer .footer-bottom a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

/* ---- Table Équipe ---- */
#equipe-container {
    margin: 20px auto;
    width: 90%;
    max-width: 1200px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#equipe-container h1 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
    color: #1c3d5a;
}

#equipe-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#equipe-container th,
#equipe-container td {
    text-align: left;
    padding: 10px;
    border: 1px solid #e1f0ff;
}

#equipe-container th {
    background-color: #0078d7;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

#equipe-container tr:nth-child(even) {
    background-color: #f8fcff;
}

#equipe-container tr:hover {
    background-color: #e1f0ff;
}

#equipe-container td {
    font-size: 0.9em;
    color: #1c3d5a;
}

.comment {
    background: rgba(0, 135, 255, 0.11);
    padding: 10px;
    margin:10px;
    box-shadow: 0px 2px 4px #00000042;
    font-size:13px;
}

.comment p {
    margin:0px;
}

#new-comment-form {
    font-size: 13px;
}

/**
 * Style for the details page of a lycée
 */

/* ---- Conteneur principal ---- */
#lycee-details-container,
#tasks-container {
    margin: 20px auto;
    width: 90%; /* Assure que les deux conteneurs ont la même largeur */
    max-width: 1200px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ---- Conteneur des informations ---- */
#lycee-details-container {
    border-left: 5px solid #0078d7;
}

/* ---- Conteneur des tâches ---- */
#tasks-container {
    border-left: 5px solid #28a745;
}

/* ---- En-tête ---- */
.lycee-header {
    text-align: center;
    margin-bottom: 15px; /* Réduction de l'espace */
}

.lycee-header h1 {
    font-size: 2em; /* Réduction de la taille de police */
    color: #1c3d5a;
}

.lycee-header .ville {
    font-size: 1em; /* Réduction de la taille de police */
    color: #0078d7;
    margin-top: 5px; /* Réduction de l'espace */
}

/* ---- Corps de la page ---- */
.lycee-body {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Réduction de l'espace entre les éléments */
}

.lycee-description {
    flex: 2;
    font-size: 0.9em; /* Réduction de la taille de police */
    color: #495057;
    line-height: 1.4; /* Réduction de l'interligne */
}

.lycee-description h3 {
    margin-bottom: 5px; /* Rapproche les titres du contenu correspondant */
    margin-top: 15px; /* Ajoute un espace avant chaque catégorie */
    color: #1c3d5a;
}

.lycee-description p {
    margin-top: 3px; /* Réduction de l'espace entre le titre et le texte */
    margin-bottom: 15px; /* Ajoute un espace plus grand entre les catégories */
    color: #495057;
}

.lycee-illustration {
    flex: 1;
    text-align: center;
}

.lycee-illustration img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ---- Pied de page ---- */
.lycee-footer {
    margin-top: 15px; /* Réduction de l'espace */
    text-align: center;
    font-size: 0.9em; /* Réduction de la taille de police */
    color: #495057;
}

/* ---- Conteneur des tâches ---- */
#tasks-container h2 {
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #1c3d5a;
}

.tasks-filters {
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.tasks-filters label {
    font-weight: bold;
    color: #495057;
}

.tasks-filters select {
    padding: 5px 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 0.9em;
    color: #495057;
}

/* ---- Tableau des tâches ---- */
#tasks-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#tasks-table th,
#tasks-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

#tasks-table th {
    background-color: #28a745;
    color: #ffffff;
    font-weight: bold;
}

#tasks-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#tasks-table tr:hover {
    background-color: #e9ecef;
}

#tasks-table td {
    font-size: 0.9em;
    color: #495057;
}

.add-task-button {
    text-align: right;
    margin-bottom: 15px;
}

.btn-add-task {
    display: inline-block;
    padding: 10px 15px;
    background-color: #0078d7;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-add-task:hover {
    background-color: #0056a6;
    transform: scale(1.05);
}

.btn-submit {
    width:150px;
    padding: 10px 15px;
    background-color: #0078d7; /* Couleur principale */
    color: #ffffff; /* Texte blanc */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
    background-color: #0056a6; /* Couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

.btn-annuler {
    
    width:150px;
    padding: 10px 15px;
    background-color: #ff4646; /* Couleur principale */
    color: #ffffff; /* Texte blanc */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-annuler:hover {
    background-color: #8a0000; /* Couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

#add-task-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

#add-task-container h2 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #333;
    text-align: center;
}

.task-form {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Réduction de l'espacement entre les champs */
}

.task-form label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #444;
    margin-bottom: 2px; /* Réduction de l'espacement sous les étiquettes */
}

.task-form input,
.task-form select,
.task-form textarea {
    font-size: 0.85rem;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.task-form textarea {
    resize: vertical;
}

.task-form input[type="file"] {
    padding: 4px;
    font-size: 0.85rem;
}

.btn-submit {
    font-size: 0.85rem;
    padding: 6px 10px;
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
    background-color: #0056a6;
    transform: scale(1.03);
}

/* ---- Filtrage ---- */
#filter-form {
    background-color: #0063cc;
    border-top: 10px solid #04316a;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: center;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-item label {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-item input,
.filter-item select {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

.filter-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.filter-actions .btn-filter {
    background-color: #0078d7;
    color: #fff;
}

.filter-actions .btn-filter:hover {
    background-color: #0056a6;
    transform: scale(1.05);
}

.filter-actions .btn-reset {
    background-color: #e0e0e0;
    color: #333;
}

.filter-actions .btn-reset:hover {
    background-color: #d6d6d6;
    transform: scale(1.05);
}

/* ---- Tableau des tâches ---- */
.tasks-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.8em;
}

.tasks-table th, .tasks-table td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}

.tasks-table th {
    background-color: #f0f9ff;
    color: #1c3d5a;
    font-weight: bold;
}

.tasks-table tr:nth-child(even) {
    background-color: #f8f8f8;
}

.tasks-table tr:hover {
    background-color: #e8f0fe;
}

.tasks-table td {
    color: #333;
}

/* Icône de suppression */
.delete-icon {
    color: #f44336;
    text-decoration: none;
    font-size: 16px;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.delete-icon:hover {
    color: #d32f2f;
}

/* Icône de modification */
.edit-icon {
    color: #0078d7;
    text-decoration: none;
    font-size: 16px;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.edit-icon:hover {
    color: #0056a6;
}

/* Icône de suppression */
.delete-icon {
    color: #f44336;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.delete-icon:hover {
    color: #d32f2f;
}

/* ---- Formulaire de modification de tâche ---- */
.edit-task-form {
    max-width: 700px;
    margin: 20px auto;
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}

.edit-task-form h2 {
    text-align: center;
    color: #1c3d5a;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.edit-task-form .form-group {
    margin-bottom: 20px;
}

.edit-task-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.edit-task-form input[type="text"],
.edit-task-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

.edit-task-form input[type="text"]:focus,
.edit-task-form textarea:focus {
    border-color: #0078d7;
    outline: none;
}

.edit-task-form .form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.edit-task-form .btn {
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.edit-task-form .btn-primary {
    background-color: #0078d7;
    color: #fff;
    border: none;
}

.edit-task-form .btn-primary:hover {
    background-color: #0056a6;
    transform: scale(1.05);
}

.edit-task-form .btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.edit-task-form .btn-secondary:hover {
    background-color: #5a6268;
    transform: scale(1.05);
}

/* Liste des fichiers */
.file-list {
    list-style-type: none;
    padding: 0;
}

.file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
}

.file-list li a {
    text-decoration: none;
    color: #0078d7;
}

.file-list li a:hover {
    color: #0056a6;
    text-decoration: underline;
}

.file-list li .delete-icon {
    color: #f44336;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.file-list li .delete-icon:hover {
    color: #d32f2f;
}

/* ---- Conteneur principal ---- */
#page-equipe-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

#page-equipe-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #1c3d5a;
}

/* ---- Grille de cartes ---- */
#page-equipe-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois cartes par ligne */
    gap: 20px;
}

@media (max-width: 992px) {
    #page-equipe-cards {
        grid-template-columns: repeat(2, 1fr); /* Deux cartes par ligne sur tablette */
    }
}

@media (max-width: 576px) {
    #page-equipe-cards {
        grid-template-columns: 1fr; /* Une carte par ligne sur mobile */
    }
}


/* ---- Cartes individuelles ---- */
.page-equipe-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.page-equipe-card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ---- Avatar ---- */
.page-equipe-card-avatar {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

.page-equipe-card-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0064ce
}

/* ---- Détails de la carte ---- */
.page-equipe-card-details {
    padding: 25px;
    text-align: left;
    background:#0064ce;
    height:100%;
}

.page-equipe-card-name {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.2em;
}

.page-equipe-card-role,
.page-equipe-card-secteur {
    margin: 5px 0;
    font-size: 0.95em;
    color: #fff;
}

.page-equipe-card-role strong,
.page-equipe-card-secteur strong {
    color: #ffffff;
}

/* ---- Liste des établissements ---- */
.page-equipe-card-lycees ul {
    margin: 10px 0 0;
    padding: 0 0 0 20px;
    list-style-type: disc;
    color: #fff;
    font-size: 0.9em;
}

.page-equipe-card-lycees ul li {
    margin-bottom: 5px;
    color: #fff;
}

.page-equipe-card-lycees ul li:hover {
    text-decoration: none;
    color: #fff;
}

/* ---- Adresse e-mail ---- */
.page-equipe-card-email {
    margin: 5px 0;
    font-size: 0.95em;
    color: #fff;
}

.page-equipe-card-email a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-equipe-card-email a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---- Conteneur principal ---- */
#page_manage_etab-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#page_manage_etab-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1c3d5a;
}

/* ---- Formulaire de filtre ---- */
.page_manage_etab-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.page_manage_etab-filter-item label {
    display: block;
    margin-bottom: 5px;
    color: #1c3d5a;
    font-weight: bold;
}

.page_manage_etab-filter-item input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.page_manage_etab-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.page_manage_etab-btn {
    padding: 5px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size:1.2em;
}

.page_manage_etab-btn-edit {
    color: #2e5fe6;
}

.page_manage_etab-btn-delete {
    color: #e74c3c;
}

.btn-add {
    background-color: #28a745; /* Vert pour représenter l'ajout */
    color: #fff;
    border: none;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
}

.btn-add:hover {
    background-color: #218838; /* Vert légèrement plus foncé au survol */
}


/* ---- Tableau ---- */
.page_manage_etab-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.page_manage_etab-table th,
.page_manage_etab-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.page_manage_etab-table th {
    background-color: #f4f4f4;
    color: #1c3d5a;
}

.page_manage_etab-table td {
    color: #333;
}

.page_manage_etab-table th a {
    color: #1c3d5a;
    text
}

/* ---- Conteneur principal ---- */
#page_ajouter_tache-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Titre ---- */
.page_ajouter_tache-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1c3d5a;
    text-align: center;
}

/* ---- Alertes ---- */
.page_ajouter_tache-alert {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.page_ajouter_tache-alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.page_ajouter_tache-alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---- Formulaire ---- */
.page_ajouter_tache-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page_ajouter_tache-form-group {
    display: flex;
    flex-direction: column;
}

.page_ajouter_tache-form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.page_ajouter_tache-form-group input,
.page_ajouter_tache-form-group select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.page_ajouter_tache-form-group input::placeholder {
    color: #aaa;
}

/* ---- Actions ---- */
.page_ajouter_tache-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.page_ajouter_tache-btn {
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.page_ajouter_tache-btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
}

.page_ajouter_tache-btn-primary:hover {
    background-color: #0056b3;
}

.page_ajouter_tache-btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.page_ajouter_tache-btn-secondary:hover {
    background-color: #5a6268;
}

/* ---- Conteneur principal ---- */
#page_modifier_etablissement-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Titre ---- */
.page_modifier_etablissement-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1c3d5a;
    text-align: center;
}

/* ---- Alertes ---- */
.page_modifier_etablissement-alert {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.page_modifier_etablissement-alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.page_modifier_etablissement-alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---- Formulaire ---- */
.page_modifier_etablissement-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page_modifier_etablissement-form-group {
    display: flex;
    flex-direction: column;
}

.page_modifier_etablissement-form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.page_modifier_etablissement-form-group input,
.page_modifier_etablissement-form-group select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* ---- Actions ---- */
.page_modifier_etablissement-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.page_modifier_etablissement-btn {
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.page_modifier_etablissement-btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
}

.page_modifier_etablissement-btn-primary:hover {
    background-color: #0056b3;
}

.page_modifier_etablissement-btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.page_modifier_etablissement-btn-secondary:hover {
    background-color: #5a6268;
}

/* ---- Aperçu de l'illustration ---- */
.page_modifier_etablissement-preview {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ---- Conteneur principal ---- */
#page_ajouter_utilisateur-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Titre ---- */
.page_ajouter_utilisateur-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1c3d5a;
    text-align: center;
}

/* ---- Alertes ---- */
.page_ajouter_utilisateur-alert {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.page_ajouter_utilisateur-alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.page_ajouter_utilisateur-alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---- Formulaire ---- */
.page_ajouter_utilisateur-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page_ajouter_utilisateur-form-group {
    display: flex;
    flex-direction: column;
}

.page_ajouter_utilisateur-form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.page_ajouter_utilisateur-form-group input,
.page_ajouter_utilisateur-form-group select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.page_ajouter_utilisateur-form-group input[type="file"] {
    padding: 5px;
    font-size: 14px;
}

/* ---- Actions ---- */
.page_ajouter_utilisateur-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.page_ajouter_utilisateur-btn {
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.page_manage_user-btn {
    font-size:1.2em;
}

.page_manage_user-btn-edit:hover {
    color:#195fb9;
}

.page_manage_user-btn-delete:hover {
    color:#810000;
}

.page_manage_user-btn-delete {
    color:red;
}

.page_manage_user-btn-edit {
    color:rgb(0, 81, 255);
}

.page_ajouter_utilisateur-btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
}

.page_ajouter_utilisateur-btn-primary:hover {
    background-color: #0056b3;
}

.page_ajouter_utilisateur-btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.page_ajouter_utilisateur-btn-secondary:hover {
    background-color: #5a6268;
}

/* ---- Avatar Preview (si ajouté dans le futur) ---- */
.page_ajouter_utilisateur-preview {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ---- Conteneur principal ---- */
#page_modifier_utilisateur-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Titre ---- */
.page_modifier_utilisateur-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1c3d5a;
    text-align: center;
}

/* ---- Alertes ---- */
.page_modifier_utilisateur-alert {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.page_modifier_utilisateur-alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.page_modifier_utilisateur-alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---- Formulaire ---- */
.page_modifier_utilisateur-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page_modifier_utilisateur-form-group {
    display: flex;
    flex-direction: column;
}

.page_modifier_utilisateur-form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.page_modifier_utilisateur-form-group input,
.page_modifier_utilisateur-form-group select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.page_modifier_utilisateur-form-group input[type="file"] {
    padding: 5px;
    font-size: 14px;
}

/* ---- Actions ---- */
.page_modifier_utilisateur-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.page_modifier_utilisateur-btn {
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.page_modifier_utilisateur-btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
}

.page_modifier_utilisateur-btn-primary:hover {
    background-color: #0056b3;
}

.page_modifier_utilisateur-btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.page_modifier_utilisateur-btn-secondary:hover {
    background-color: #5a6268;
}

/* ---- Avatar Preview ---- */
.page_modifier_utilisateur-preview {
    max-width: 150px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
}

/* Conteneur principal */
#page-details-lycee-container {
    margin: 20px auto;
    padding: 20px;
    max-width: 1200px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* En-tête */
#page-details-lycee-header {
    text-align: center;
    margin-bottom: 20px;
}

.page-details-lycee-title {
    font-size: 28px;
    color: #333333;
    margin-bottom: 5px;
}

.page-details-lycee-location {
    font-size: 16px;
    color: #777777;
}

/* Section d'informations */
#page-details-lycee-info {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #195fb9;
    border-radius: 8px;
    color:#fff;
    box-shadow: 0px 2px 8px #0000009e;
}

.page-details-lycee-subtitle {
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}

#page-details-lycee-tasks {
    background-color: #195fb9;
    padding:20px;
    box-shadow: 0px 2px 8px #0000009e;
    border-radius: 8px;
}

/* Messages */
.page-details-lycee-message {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.page-details-lycee-message.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.page-details-lycee-message.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Actions */
#page-details-lycee-actions {
    margin-bottom: 20px;
}

#page-details-lycee-actions a {
    text-decoration: none;
    margin-right: 10px;
    padding: 10px 15px;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
}

#page-details-lycee-actions .btn-primary {
    background-color: #00a727;
    border: 1px solid #00a727;
}

#page-details-lycee-actions .btn-primary:hover {
    background-color: #006818;
    border: 1px solid #00a727;
}

#page-details-lycee-actions .btn-secondary {
    background-color: #6c757d;
    border: 1px solid #6c757d;
}

#page-details-lycee-actions .btn-secondary:hover {
    background-color: #5a6268;
}

/* Filtres */
#page-details-lycee-filters {
    margin-bottom: 20px;
}

#page-details-lycee-filters label {
    font-size: 14px;
    margin-right: 10px;
    color: #333333;
}

#page-details-lycee-sort {
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Tableau */
#page-details-lycee-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 35px;
    background: #fff;
}

#page-details-lycee-table th,
#page-details-lycee-table td {
    text-align: left;
    padding: 5px;
    border: 1px solid #ddd;
    font-size:0.8em;
}

#page-details-lycee-table th {
    background-color: #f4f4f4;
    color: #333333;
    font-weight: bold;
}

#page-details-lycee-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

#page-details-lycee-table tr:hover {
    background-color: #f1f1f1;
}

/* Bouton Valider */
.btn.btn-success {
    color: #1e7e34;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 1.4em;
}

.btn.btn-success:hover {
   
    color: #006919;
}

/* Conteneur principal */
#page-my-task-container {
    margin: 20px auto;
    padding: 20px;
    max-width: 1200px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Titre principal */
.page-my-task-title {
    font-size: 28px;
    color: #333333;
    margin-bottom: 20px;
    text-align: center;
}

/* Message d'absence de tâche */
.page-my-task-no-tasks {
    font-size: 16px;
    color: #777777;
    text-align: center;
    margin-top: 20px;
}

/* Table des tâches */
.page-my-task-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.page-my-task-table th,
.page-my-task-table td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}

.page-my-task-table th {
    background-color: #f4f4f4;
    color: #333333;
    font-weight: bold;
}

.page-my-task-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.page-my-task-table tr:hover {
    background-color: #f1f1f1;
}

/* Lien vers les détails d'une tâche */
.page-my-task-link {
    color: #007bff;
    text-decoration: none;
}

.page-my-task-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Conteneur des filtres */
#page-my-task-filters {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Boutons Filtrer et Réinitialiser */
.btn-filter {
    padding: 8px 15px;
    font-size: 14px;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-filter:hover {
    background-color: #0056b3;
}

.btn-reset {
    padding: 8px 15px;
    font-size: 14px;
    color: #ffffff;
    background-color: #6c757d;
    text-decoration: none;
    border-radius: 5px;
}

.btn-reset:hover {
    background-color: #5a6268;
}

#messagerie-container {
    padding: 20px;
    max-width: 800px;
    margin: auto;
}

#nouveau-message-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

#nouveau-message-btn:hover {
    background-color: #2980b9;
}

#nouveau-message-form {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
}

#messages-list .message-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

#messages-container {
    padding: 20px;
    max-width: 800px;
    margin: auto;
}

.messages-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.messages-table th, .messages-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.messages-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.messages-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.messages-table tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

.messages-table td {
    font-size: 14px;
}

#view-message-container {
    padding: 20px;
    max-width: 600px;
    margin: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

.btn-back {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.btn-back:hover {
    background: #2980b9;
}

.btn-delete {
    background-color: transparent;
    border: none;
    color: #e74c3c;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}

.btn-delete:hover {
    color: #c0392b;
}

.btn-delete i {
    pointer-events: none; /* Évite que le clic soit capturé par l'icône */
}


/* ---- Conteneur principal des fichiers ---- */
#page-details-tache-fichiers-container {
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#page-details-tache-fichiers-container h3 {
    font-size: 1.5em;
    color: #1c3d5a;
    margin-bottom: 15px;
    text-align: center;
}

/* Liste des fichiers */
.page-details-tache-fichiers-liste ul {
    list-style-type: none;
    padding: 0;
}

.page-details-tache-fichiers-liste li {
   
}

.page-details-tache-fichiers-liste li:hover {
    
}

.page-details-tache-fichiers-liste li a {
    
    text-decoration: none;
    flex-grow: 1;
}

.page-details-tache-fichiers-liste li a:hover {
    text-decoration: underline;
}

/* Bouton de suppression */
.page-details-tache-btn-delete {
    background: transparent;
    border: none;
    color: #e74c3c;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.page-details-tache-btn-delete:hover {
    color: #c0392b;
}

/* Formulaire d'ajout de fichiers */
.page-details-tache-upload-form {
    margin-top: 15px;
}

.page-details-tache-upload-form label {
    font-weight: bold;
    color: #333;
}

.page-details-tache-upload-form input[type="file"] {
    display: inline;
    margin: 10px 0;
}

.page-details-tache-upload-form .page-details-tache-btn-submit {
    background-color: #0078d7;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.page-details-tache-upload-form .page-details-tache-btn-submit:hover {
    background-color: #0056a6;
}

#page-tchat-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.26);
    background: linear-gradient(135deg, #0078d7, #00478a); 
}

.page-tchat-title {
    text-align: left;
    font-size: 24px;
    margin-bottom: 20px;
    color: #e2f0ff;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.699);
}

#page-tchat-messages {
    margin-bottom: 20px;
    height: 400px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background:#fff;
    color:#192336;
}

.page-tchat-message {
    margin-bottom: 1px;
    padding: 3px;
    font-size:14px;
}

.page-tchat-message p {
    margin: 0;
}

#page-tchat-form {
    display: inline;
    flex-direction: column;
    gap: 10px;
}

#page-tchat-form textarea {
    width:89%;
    border: 2px solid #ddd;
    border-radius: 4px;
    resize: none;
    height: 28px;
    font-size: 14px;
}


.page-tchat-btn {
    padding: 10px 15px;
    margin-left:5px;
    position:absolute;
    background-color: #0078d7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid #ddd;
}

.page-tchat-btn:hover {
    background-color: #0056a6;
}

#task-actions-menu {
    display: flex;
    justify-content: flex-end;
    gap: 10px; /* Espacement entre les boutons */
    margin-bottom: 15px;
}

.task-action-form,
.btn-editer {
    display: inline-block;
}



/* Conteneur pour l'icône hamburger et le menu */
.hamburger-container {
    position: relative;
    display: inline-block;
    margin-top: 5px;
}

/* Conteneur relatif pour l'icône et le menu */
.page-details-tache-actions {
    position: relative;
    text-align: right;
    margin-top: -25px;
}

/* Icône hamburger */
.hamburger-menu {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Menu déroulant masqué par défaut */
.action-dropdown {
    display: none;
    position: absolute;
    top: 40px; /* Distance par rapport à l'icône */
    right: 10px; /* Aligner avec l'icône */
    background: #62a6ff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-10px); /* Effet de glissement */
    transition: all 0.3s ease-in-out;
}

/* Lien et bouton dans le menu */
.action-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s ease;
    border-radius: 5px;
    width:100px;
}

.action-dropdown .dropdown-item:hover {
    background-color: #f0f0f0;
}

.action-dropdown button {
    all: unset;
    cursor: pointer;
}

/* Menu affiché */
.action-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0); /* Animation vers le bas */
}

.btn-cloturer {
    background-color: #11a011; /* Rouge pour indiquer une action finale */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.btn-cloturer:hover {
    background-color: #006800; /* Rouge plus foncé au survol */
}

.btn-editer_tach {
    background-color: #1f84d6; /* Rouge pour indiquer une action finale */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
    margin-right:4px;
}

.btn-editer_tach:hover {
    background-color: #0056ac; /* Bleu plus foncé au survol */
}

.btn-supprimer {
    background-color: #d9534f; /* Rouge pour indiquer une action critique */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.btn-supprimer:hover {
    background-color: #c9302c; /* Rouge plus foncé au survol */
}

/* DASHBOARD */

/* Conteneur principal */
#page-dashboard-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background: linear-gradient(135deg, #f3f3f3, #ffffff);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

#page-dashboard-container:hover {
    transform: scale(1.01);
}

/* Titre principal */
#page-dashboard-title {
    text-align: center;
    color: #333333;
    margin-bottom: 20px;
    font-size: 1.8em;
    font-weight: bold;
}

/* Statistiques */
#page-dashboard-stats {
    display: flex;
    gap: 20px;
    justify-content: space-around;
    margin-bottom: 30px;
}

.page-dashboard-stat-card {
    flex: 1;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #0078d7, #00478a);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.page-dashboard-stat-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.page-dashboard-stat-card p {
    font-size: 24px;
    font-weight: bold;
}

/* Graphiques et Informations */
#page-dashboard-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

#page-dashboard-charts {
    flex: 2;
}

#tasks-by-priority-chart {
    max-width: 100%;
}

#page-dashboard-info {
    flex: 1;
    background: #fffcf7;
    border: 1px solid #ffeba1;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(255, 200, 90, 0.2);
    transition: box-shadow 0.3s ease;
}

#page-dashboard-info:hover {
    box-shadow: 0 8px 16px rgba(255, 200, 90, 0.4);
}

#page-dashboard-info h3 {
    margin-bottom: 10px;
    color: #e67e22;
    font-size: 18px;
    font-weight: bold;
}

#page-dashboard-info p {
    color: #555555;
    font-size: 14px;
    margin-bottom: 10px;
}

#page-dashboard-info ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    color: #444444;
}

#page-dashboard-info ul li {
    margin-bottom: 5px;
}

/* Tableau */
#page-dashboard-recent-tasks-title {
    color: #333333;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

#page-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#page-dashboard-table th, #page-dashboard-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 13px;
    color: #555555;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#page-dashboard-table th {
    background-color: #0078d7;
    color: #fff;
    font-weight: bold;
}

#page-dashboard-table tr:hover {
    background-color: #fffcf7;
    color: #333333;
}

/* Notifications et Messages */
#page-dashboard-notifications,
#page-dashboard-messages {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#page-dashboard-notifications:hover,
#page-dashboard-messages:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#page-dashboard-notifications h3,
#page-dashboard-messages h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    border-bottom: 2px solid #0078d7;
    padding-bottom: 5px;
}

#page-dashboard-notifications ul,
#page-dashboard-messages ul {
    list-style: none;
    padding: 0;
}

#page-dashboard-notifications ul li,
#page-dashboard-messages ul li {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

#page-dashboard-notifications ul li:hover,
#page-dashboard-messages ul li:hover {
    background-color: #f9f9f9;
}

#page-dashboard-notifications ul li p,
#page-dashboard-messages ul li p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

#page-dashboard-notifications ul li small,
#page-dashboard-messages ul li small {
    font-size: 12px;
    color: #777;
}

#page-dashboard-notifications ul li strong {
    font-size: 16px;
    color: #0078d7;
}


/* Conteneur pour l'icône hamburger et le menu */
.hamburger-container {
    position: relative;
    display: inline-block;
    margin-top: 5px;
}

/* Conteneur relatif pour l'icône et le menu */
.page-details-tache-actions {
    position: relative;
    text-align: right;
    margin-top: -25px;
}

/* Icône hamburger */
.hamburger-menu {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Menu déroulant masqué par défaut */
.action-dropdown {
    display: none;
    position: absolute;
    top: 40px; /* Distance par rapport à l'icône */
    right: 10px; /* Aligner avec l'icône */
    background: #62a6ff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-10px); /* Effet de glissement */
    transition: all 0.3s ease-in-out;
}

/* Lien et bouton dans le menu */
.action-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s ease;
    border-radius: 5px;
    width:100px;
}

.action-dropdown .dropdown-item:hover {
    background-color: #f0f0f0;
}

.action-dropdown button {
    all: unset;
    cursor: pointer;
}

/* Menu affiché */
.action-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0); /* Animation vers le bas */
}

.btn-cloturer {
    background-color: #11a011; /* Rouge pour indiquer une action finale */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.btn-cloturer:hover {
    background-color: #006800; /* Rouge plus foncé au survol */
}

.btn-editer_tach {
    background-color: #1f84d6; /* Rouge pour indiquer une action finale */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
    margin-right:4px;
}

.btn-editer_tach:hover {
    background-color: #0056ac; /* Bleu plus foncé au survol */
}

.btn-supprimer {
    background-color: #d9534f; /* Rouge pour indiquer une action critique */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.btn-supprimer:hover {
    background-color: #c9302c; /* Rouge plus foncé au survol */
}

/* DASHBOARD */

/* Conteneur principal */
#page-dashboard-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background: linear-gradient(135deg, #f3f3f3, #ffffff);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

#page-dashboard-container:hover {
    transform: scale(1.01);
}

/* Titre principal */
#page-dashboard-title {
    text-align: center;
    color: #333333;
    margin-bottom: 20px;
    font-size: 1.8em;
    font-weight: bold;
}

/* Statistiques */
#page-dashboard-stats {
    display: flex;
    gap: 20px;
    justify-content: space-around;
    margin-bottom: 30px;
}

.page-dashboard-stat-card {
    flex: 1;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #0078d7, #00478a);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.page-dashboard-stat-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.page-dashboard-stat-card p {
    font-size: 24px;
    font-weight: bold;
}

/* Graphiques et Informations */
#page-dashboard-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

#page-dashboard-charts {
    flex: 2;
}

#tasks-by-priority-chart {
    max-width: 100%;
}

#page-dashboard-info {
    flex: 1;
    background: #fffcf7;
    border: 1px solid #ffeba1;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(255, 200, 90, 0.2);
    transition: box-shadow 0.3s ease;
}

#page-dashboard-info:hover {
    box-shadow: 0 8px 16px rgba(255, 200, 90, 0.4);
}

#page-dashboard-info h3 {
    margin-bottom: 10px;
    color: #e67e22;
    font-size: 18px;
    font-weight: bold;
}

#page-dashboard-info p {
    color: #555555;
    font-size: 14px;
    margin-bottom: 10px;
}

#page-dashboard-info ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    color: #444444;
}

#page-dashboard-info ul li {
    margin-bottom: 5px;
}

/* Tableau */
#page-dashboard-recent-tasks-title {
    color: #333333;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

#page-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#page-dashboard-table th, #page-dashboard-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 13px;
    color: #555555;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#page-dashboard-table th {
    background-color: #0078d7;
    color: #fff;
    font-weight: bold;
}

#page-dashboard-table tr:hover {
    background-color: #fffcf7;
    color: #333333;
}

/* Notifications et Messages */
#page-dashboard-notifications,
#page-dashboard-messages {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#page-dashboard-notifications:hover,
#page-dashboard-messages:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#page-dashboard-notifications h3,
#page-dashboard-messages h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    border-bottom: 2px solid #0078d7;
    padding-bottom: 5px;
}

#page-dashboard-notifications ul,
#page-dashboard-messages ul {
    list-style: none;
    padding: 0;
}

#page-dashboard-notifications ul li,
#page-dashboard-messages ul li {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

#page-dashboard-notifications ul li:hover,
#page-dashboard-messages ul li:hover {
    background-color: #f9f9f9;
}

#page-dashboard-notifications ul li p,
#page-dashboard-messages ul li p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

#page-dashboard-notifications ul li small,
#page-dashboard-messages ul li small {
    font-size: 12px;
    color: #777;
}

#page-dashboard-notifications ul li strong {
    font-size: 16px;
    color: #0078d7;
}


/* Conteneur principal */
.page-planning-container {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    
}

/* Titre principal */
.page-planning-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #333;
}

/* Formulaire principal */
.page-planning-form {
    margin-top: 15px;
}

/* Titres des sections (Saint-Omer, Béthune) */
.page-planning-section-title {
    margin: 10px;
    font-size: 20px;
    color: #0056b3;
    font-weight: bold;
    text-align: left;
}

/* Tableaux */
.page-planning-table {
    padding:8px;
    margin: auto;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.301);
    vertical-align: top;
    font-size: 12px;
    background-color: #7eb1dd;
    border-radius:5px;
    width:100%;
}

/* En-têtes des tableaux */
.page-planning-table th {
    background-color: #065fbe;
    color: #fff;
    padding: 6px;
    text-align: center;
    border-radius:5px;
}


/* Cellules des tableaux */
.page-planning-table td {
    padding: 4px;
    text-align: center;
}

/* Champs d'entrée dans les cellules */
.page-planning-input {
    width: 95%;
    padding: 3px;
    font-size: 12px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: #333;
}

/* Focus sur les champs */
.page-planning-input:focus {
    border-color: #0056b3;
    background-color: #e8f0fe;
    outline: none;
}

/* Boutons */
.page-planning-button {
    display: block;
    margin: 15px auto;
    padding: 8px 16px;
    background-color: #004085;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

.page-planning-button:hover {
    background-color: #0056b3 ;
}

/* Messages */
.page-planning-message {
    margin: 15px auto;
    padding: 10px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
    max-width: 600px;
}

/* Alternance de couleurs */
.page-planning-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.page-planning-table tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Surbrillance au survol */
.page-planning-table tr:hover {
    background-color: #7695da;
    cursor: pointer;
}

#task-details-container {
    max-width: 1000px;
    margin: 0 auto 30px;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#task-details-container h2 {
    font-size: 1.8em;
    color: #1c3d5a;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 20px;
}

.details-table th {
    width: 200px;
    text-align: left;
    padding: 15px;
    background: linear-gradient(135deg, #0078d7, #00478a);
    color: white;
    border-radius: 10px 0 0 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.details-table td {
    padding: 15px;
    background-color: white;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s ease;
}

.details-table tr:hover td {
    background-color: #f8fafc;
}

.td-details-infos {
    line-height: 1.6;
    color: #1c3d5a;
}

/* Styles pour les priorités */
.haute {
    color: #dc3545 !important;
    font-weight: bold;
    position: relative;
    padding-left: 25px !important;
}

.haute:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
}

.moyenne {
    color: #ffc107 !important;
    font-weight: bold;
    position: relative;
    padding-left: 25px !important;
}

.moyenne:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffc107;
}

.basse {
    color: #28a745 !important;
    font-weight: bold;
    position: relative;
    padding-left: 25px !important;
}

.basse:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745;
}

/* Style pour le formulaire d'upload */
.page-details-tache-upload-form {
    margin-top: 15px;
}

.page-details-tache-upload-form label {
    font-weight: bold;
    color: #333;
}

.page-details-tache-upload-form input[type="file"] {
    display: inline;
    margin: 10px 0;
}

.page-details-tache-upload-form .page-details-tache-btn-submit {
    background-color: #0078d7;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.page-details-tache-upload-form .page-details-tache-btn-submit:hover {
    background-color: #0056a6;
}

/* Style amélioré pour le menu hamburger et le dropdown */
.hamburger-container {
    position: relative;
    display: inline-block;
}

.hamburger-menu {
    background: none;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #0078d7, #00478a);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.hamburger-menu:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}

.hamburger-menu i {
    color: white;
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.hamburger-menu:hover i {
    transform: rotate(180deg);
}

.action-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 55px;
    min-width: 200px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform-origin: top right;
    z-index: 1000;
}

.action-dropdown.show {
    display: block;
    animation: dropdownAnimation 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes dropdownAnimation {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #1c3d5a;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    text-align: left;
    background: none;
    cursor: pointer;
    font-size: 0.95em;
    position: relative;
    overflow: hidden;
}

.dropdown-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.dropdown-item:hover:before {
    transform: translateX(100%);
}

.dropdown-item i {
    margin-right: 10px;
    font-size: 1.1em;
    width: 20px;
    text-align: center;
}

.btn-editer_tach {
    color: #0078d7;
}

.btn-editer_tach:hover {
    background: rgba(0, 120, 215, 0.1);
}

.btn-cloturer {
    color: #28a745;
}

.btn-cloturer:hover {
    background: rgba(40, 167, 69, 0.1);
}

.btn-supprimer {
    color: #dc3545;
}

.btn-supprimer:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Styles améliorés pour le tableau avec plus de contraste */
.details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    margin-bottom: 25px;
}

.details-table th {
    width: 200px;
    text-align: left;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0078d7, #00478a);
    color: white;
    border-radius: 10px 0 0 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.details-table td {
    padding: 18px 20px;
    background-color: white;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s ease;
}

.details-table tr:hover td {
    background-color: #f8fafc;
}

.td-details-infos {
    line-height: 1.6;
    color: #1c3d5a;
}

/* Styles spéciaux pour les priorités */
.haute {
    color: #dc3545 !important;
    font-weight: bold;
    position: relative;
    padding-left: 25px !important;
}

.haute:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
}

.moyenne {
    color: #ffc107 !important;
    font-weight: bold;
    position: relative;
    padding-left: 25px !important;
}

.moyenne:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffc107;
}

.basse {
    color: #28a745 !important;
    font-weight: bold;
    position: relative;
    padding-left: 25px !important;
}

.basse:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745;
}

.priority-badge.haute:before {
    content: none;
}

.priority-badge.moyenne:before {
    content: none;
}

.priority-badge.basse:before {
    content: none;
}