/* ================================================================= */
/* --- BASE & STRUCTURE --- */
/* ================================================================= */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4; /* Light background */
    color: #333;
}
.header {
    background-color: #007bff; /* Primary Blue */
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Espace entre le bloc gauche et le bloc droite */
    align-items: center;
}
/* Conteneur du Logo et Titre */
.header-logo-title {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre le logo et le texte */
}
.header-logo-title .header-logo {
    height: 40px; /* Taille standard pour un logo de navigation */
    width: auto;
}
.header-logo-title h1 {
    margin: 0;
    font-size: 2em;
}

/* Conteneur des contrôles de droite (Langue et Déconnexion) */
.header-right-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre le sélecteur et le lien Déconnexion */
}

/* Style du sélecteur de langue */
.header-right-controls #lang-select {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid white;
    background-color: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.0em;
}

/* Assurer que les options du select ne sont pas blanches sur blanc */
.header-right-controls #lang-select option {
    color: #333; /* Texte sombre dans le menu déroulant */
    background-color: white; /* Fond clair */
}


.header .logout {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}
.main-container {
    display: flex;
    /* 100vh - header height */
    min-height: calc(100vh - 62px); 
}
.sidebar {
    width: 250px;
    background-color: #2c3e50; /* Dark Sidebar */
    padding: 20px;
    color: white;
    flex-shrink: 0;
}
.sidebar a, .sidebar button {
    display: block;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
    color: white;
    text-decoration: none;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.sidebar a:hover, .sidebar button:hover, .sidebar .active {
    background-color: #34495e;
}
.content {
    flex-grow: 1;
    padding: 30px;
    background-color: #fff; /* White background for main content area */
}
.section {
    display: none;
}
.section.active {
    display: block;
}
.content h2 {
    color: #007bff; /* Primary Blue */
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
}
/* Style général des cartes dans le contenu */
.stat-card {
    background-color: #fff; /* Blanc, pour que les cartes ressortent sur le fond gris */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Ombre plus visible */
    transition: all 0.3s ease;
    border: 1px solid #eee;
    margin-bottom: 20px;
}
.stat-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.session-summary-card, .formation-card {
    cursor: pointer;
}

/* Bouton Créer (générique) */
.btn-create-session {
    background-color: #28a745; /* Green for Action */
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.btn-create-session:hover {
    background-color: #218838;
}

/* Styles pour les formulaires et boutons d'édition/suppression génériques */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-section label {
    margin-bottom: 5px;
    font-weight: bold;
}
.form-section input, .form-section select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.form-section button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}
.form-section button:hover {
    background-color: #218838;
}

/* Styles des tableaux génériques */
.table-container {
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th, td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
    font-weight: bold;
}
td button {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    color: white !important; 
    cursor: pointer;
    margin-right: 5px;
    transition: background-color 0.3s;
    display: inline-block;
}
td button.btn-edit {
    background-color: #28a745 !important; 
}
td button.btn-edit:hover {
    background-color: #1e7e34 !important;
}
td button.btn-delete {
    background-color: #dc3545 !important; 
}
td button.btn-delete:hover {
    background-color: #c82333 !important;
}

/* Bouton Retour (générique) */
.back-btn {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    display: inline-block;
}
.back-btn:hover {
    background-color: #0056b3;
}
/* Styles des cartes spécifiques Formations (déjà dans votre base) */
.formation-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.formation-card h3 {
    margin-top: 0;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
}
/* Styles spécifiques QCM (déjà dans votre base) */
.qcm-grid {
    display: flex;
    gap: 20px;
}
.qcm-video {
    flex: 0 0 300px;
}
.qcm-video video {
    width: 100%;
    border-radius: 8px;
}
.qcm-questions {
    flex: 1;
}
.question-box {
    background-color: #e9f5ff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #cce5ff;
    margin-bottom: 15px;
}
.question-box h3 {
    margin: 0;
    color: #0056b3;
}
.responses-box {
    margin-top: 15px;
}
.response-button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s;
}
.response-button:hover:not(.disabled) {
    background-color: #e9e9e9;
}
.response-button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + .response-button {
    border-color: #007bff;
    background-color: #e7f4ff;
}
.submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 15px;
    transition: background-color 0.3s, opacity 0.3s;
}
.submit-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.submit-button:hover:not(.disabled) {
    background-color: #0056b3;
}
.next-button {
    background-color: #28a745;
}
.next-button:hover {
    background-color: #218838;
}
.result {
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    display: none;
}
.correct {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.incorrect {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.hidden {
    display: none;
}
.question-counter {
    text-align: right;
    font-size: 0.9em;
    color: #777;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .qcm-grid {
        flex-direction: column;
        gap: 10px;
    }
    .qcm-video {
        width: 100%;
        min-width: unset;
    }
}
/* Styles spécifiques de fin de QCM (déjà dans votre base) */
.result-page {
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.8s ease-in-out;
}
.result-page h1 {
    font-size: 2.5em;
    color: #28a745; /* Couleur verte pour le succès */
    margin-bottom: 10px;
}
.score-text {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 5px;
}
.score {
    font-size: 4em;
    font-weight: bold;
    color: #007bff; /* Bleu pour le score */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.result-page p {
    font-size: 1em;
    color: #666;
    margin-bottom: 25px;
}
.back-to-formation-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
}
.back-to-formation-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* Style pour le nom de l'utilisateur dans l'en-tête */
.header-user-name {
    color: white;
    font-size: 1.1em;
    white-space: nowrap; /* Empêche le nom de passer à la ligne */
}

/* AJOUTEZ/REMPLACEZ CE BLOC DANS VOTRE FICHIER general.css */

/* --- Style pour le sélecteur de langue personnalisé --- */
.custom-select-container {
    position: relative;
    width: 140px; /* Largeur du sélecteur */
    font-size: 1.0em;
}

/* Le "bouton" qui affiche l'option sélectionnée */
.select-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    color: #333;
    user-select: none; /* Empêche la sélection du texte */
    transition: background-color 0.2s;
}
.select-selected:hover {
    background-color: #f0f0f0;
}

/* La petite flèche vers le bas */
.select-selected::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #555;
}

/* La liste des options, cachée par défaut */
.select-items {
    position: absolute;
    background-color: white;
    top: 110%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Cacher la liste (classe ajoutée/retirée par JS) */
.select-hide {
    display: none;
}

/* Chaque option dans la liste */
.select-items div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s;
}

.select-items div:hover {
    background-color: #007bff;
    color: white;
}

/* Le drapeau (taille automatique relative au texte) */
.custom-select-container img {
    height: 1.1em;
    width: auto;
    border-radius: 2px;
}

/* AJOUTEZ CE BLOC À LA FIN DE VOTRE FICHIER general.css */

/* --- Style pour le menu déroulant de l'utilisateur --- */
.user-menu-container {
    position: relative;
}

/* Le nom de l'utilisateur qui sert de bouton */
.user-menu-trigger {
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    padding: 5px;
    user-select: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.user-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* La liste déroulante, cachée par défaut */
.user-menu-dropdown {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 120%; /* Positionnement sous le nom */
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 5px;
    overflow: hidden; /* Pour que les coins des liens soient arrondis */
}

/* Classe pour afficher le menu (via JS ou survol) */
.user-menu-dropdown.show {
    display: block;
}

/* Optionnel : Afficher au survol sur ordinateur */
/* Note: Ceci est désactivé car le clic JS est plus fiable, mais laissé si besoin */
/* .user-menu-container:hover .user-menu-dropdown {
    display: block;
} */

/* Liens dans le menu déroulant */
.user-menu-dropdown a {
    color: #333 !important; /* Couleur de texte sombre */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 1.0em;
}

.user-menu-dropdown a:hover {
    background-color: #f1f1f1;
}

/* Icônes dans le menu latéral */
.menu-icon {
    margin-right: 10px; /* Espace entre l'icône et le texte */
    width: 20px; /* Assurer un alignement constant */
    text-align: center;
}

/* Icône de rôle dans le header */
.user-role-icon {
    margin-right: 8px; /* Espace entre l'icône et le nom */
    font-size: 0.9em; /* Légèrement plus petit que le nom */
    opacity: 0.8; /* Un peu plus discret */
}


/* ================================================================= */
/* --- AJOUTS POUR RESPONSIVE (MOBILE/TABLETTE) --- */
/* ================================================================= */

/* 1. Bouton Hamburger (caché par défaut) */
.mobile-menu-toggle {
    display: none; /* Caché sur grand écran */
    background: none;
    border: none;
    color: white;
    font-size: 1.6em; /* Taille de l'icône */
    cursor: pointer;
    padding: 0 10px;
    margin-left: -10px; /* Aligner avec le padding du header */
    align-items: center;
    justify-content: center;
}

/* 2. Breakpoint principal (Tablettes et en dessous) */
@media (max-width: 992px) {
    
    /* --- Header --- */
    .header {
        padding: 15px;
        /* La hauteur change, min-height de main-container devra s'adapter */
    }
    .header-logo-title {
        gap: 10px; /* Réduire l'espace */
    }
    .header-logo-title h1 {
        font-size: 1.6em; /* Réduire la taille du titre */
    }
    .mobile-menu-toggle {
        display: inline-flex; /* Afficher le bouton */
    }

    /* --- Conteneur Principal --- */
    .main-container {
        /* display: flex; est conservé mais le sidebar sort du flux */
        position: relative; /* Pour le positionnement du sidebar */
        overflow-x: hidden; /* Empêche le débordement horizontal */
        min-height: calc(100vh - 59px); /* Ajuster la hauteur (padding 15*2 + icônes/titre) */
    }

    /* --- Sidebar (Menu Latéral) --- */
    .sidebar {
        position: fixed; /* Sortir du flux */
        left: 0;
        top: 0;
        height: 100vh; /* Toute la hauteur de la vue */
        width: 270px; /* Légèrement plus large pour le padding interne */
        z-index: 1001; /* Au-dessus de tout, sauf de l'overlay de fermeture */
        transform: translateX(-100%); /* Caché par défaut */
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0px 10px rgba(0,0,0,0.2); /* Ombre portée */
        overflow-y: auto; /* Permettre le défilement si le menu est long */
        padding-top: 30px; /* Espace en haut */
        box-sizing: border-box; /* Padding inclus dans la largeur/hauteur */
    }

    /* --- État "Visible" (via JS) --- */
    .main-container.sidebar-visible .sidebar {
        transform: translateX(0); /* Le menu apparaît */
    }

    /* --- Overlay (pour fermer en cliquant à côté) --- */
    .main-container.sidebar-visible::after {
        content: '';
        position: fixed; /* Couvre tout l'écran */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5); /* Fond sombre semi-transparent */
        z-index: 1000; /* Juste en dessous du menu */
    }

    /* --- Contenu Principal --- */
    .content {
        padding: 20px; /* Réduire le padding */
        width: 100%; /* S'assurer qu'il prend toute la largeur */
        box-sizing: border-box; /* Inclure le padding */
    }
}

/* 3. Breakpoint pour petits mobiles (Ajustements fins) */
@media (max-width: 480px) {

    /* --- Header --- */
    .header {
        flex-direction: column; /* Mettre logo/titre et contrôles en colonne */
        gap: 15px; /* Espace entre les deux blocs */
        padding: 15px;
    }
    .header-logo-title h1 {
        font-size: 1.4em; /* Encore plus petit */
    }
    .header-right-controls {
        gap: 10px;
        justify-content: center; /* Centrer les contrôles */
        width: 100%; /* Occuper toute la largeur */
    }
    .custom-select-container {
        width: 120px; /* Réduire le sélecteur de langue */
    }

    /* --- Contenu --- */
    .content {
        padding: 15px; /* Padding minimal */
    }
    
    /* --- Cartes et Boutons --- */
    .stat-card, .formation-card {
        padding: 15px;
    }
    .btn-create-session, .back-btn, .form-section button, .submit-button, .response-button {
        width: 100%; /* Boutons pleine largeur pour une meilleure cible tactile */
        text-align: center;
        box-sizing: border-box; /* Inclure padding dans la largeur */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- Grille QCM --- */
    /* (Le CSS existant @media (max-width: 768px) gère déjà bien le .qcm-grid) */
    .qcm-video {
        flex-basis: auto; /* Laisser la grille gérer */
    }
    
    /* --- Tableaux --- */
    /* Amélioration simple pour les tableaux sur mobile */
    .table-container {
        border: 1px solid #ddd;
    }
    th, td {
        padding: 8px;
    }
}