/* ----------------------------------
------------ GENERAL ----------------
------------------------------------*/


/* =========================================
   1. BASE & LAYOUT
   ========================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
    color: #333;
    margin: 0;
    padding: 0px 20px 20px 20px;
}

body.edit-quiz-page,
body.take-quiz-page {
    background: #ffffff;
}

body.home-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.container {
    width: calc(100% - 32px);
    max-width: none;
    margin: 20px auto;
    padding: 0 12px;
    background: transparent;
    box-shadow: none;
    border: none;
    box-sizing: border-box;
}

.container-narrow { max-width: 600px; }
.container-small { max-width: 500px; text-align: center; }

header h1 {
    font-size: 2.2rem;
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-top: 0;
}

.page-header h1,
.container h1 {
    margin-top: 0;
}

/* Page d'accueil */
.home-container {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

.home-header {
    text-align: center;
    margin-bottom: 8px;
}

.home-logo {
    width: min(420px, 72vw);
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.08));
}

.home-intro {
    text-align: center;
    margin-bottom: 28px;
}

.home-intro p {
    margin: 0;
    color: #64748b;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.main-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 28px;
    justify-content: center;
    max-width: 760px;
    margin: 0 auto;
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.card-link:hover {
    transform: translateY(-4px);
}

.card {
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    padding: 28px 24px;
    box-sizing: border-box;
    transition: all 0.25s ease;
    border: 1px solid #e2e8f0;
}

.home-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.teacher-card {
    background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    border-color: #dbeafe;
}

.teacher-card .card-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.student-card {
    background: linear-gradient(180deg, #f7fdf9 0%, #edfdf6 100%);
    border-color: #d1fae5;
}

.student-card .card-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.card-link:hover .card {
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
    border-color: #cbd5e1;
}

.card h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 700;
}

.card p {
    color: #475569;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 26ch;
}

@media (max-width: 640px) {
    body {
        padding: 32px 16px;
    }

    .main-options {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-card {
        min-height: 190px;
    }
}

/* Uniformisation de la taille de tous les champs de saisie */
input[type="text"], input[type="password"] {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    font-size: 1em !important;
    height: auto !important;
    min-height: 40px !important;
    margin-top: 5px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

.quiz-title-input {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
}

/* =========================================
   2. UTILITAIRES FLEXBOX
   ========================================= */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-gap-10 {
    display: flex;
    gap: 10px;
}

/* =========================================
   3. COMPOSANTS UI GÉNÉRAUX
   ========================================= */
/* Boutons */
.btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
}

.btn:hover { background: #0056b3; }
.btn-success { background: #28a745; }
.btn-info { background: #17a2b8; color: white; }
.btn-danger { background: #dc3545; }
.btn-secondary { background: #6c757d; }

.btn-submit {
    background: #a8e6cf; /* Vert clair pastel */
    color: #1a4d33;      /* Vert foncé pour une lecture optimale */
    border: none;
    padding: 14px 25px;
    border-radius: 6px;
    font-size: 1.05em;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease; /* Transition douce */
}

.btn-submit:hover {
    background: #8cdba9; /* Vert pastel légèrement plus intense au survol */
}

.btn-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-back-base {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 16px;
    background-color: #eeefef;
    color: #212529;
    border: 1px solid #adb5bd;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background-color 0.2s;
}

.btn-back-base:hover {
    background-color: #e2e4e5;
}

/* Bouton de retour fixe épuré */
.btn-fixed-back {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.review-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid #d0d7de;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.review-toggle-btn:hover {
    background: #eef6ff;
    border-color: #bfd3ff;
    color: #1d4ed8;
}

.review-toggle-btn.is-marked {
    background: #fff3d6;
    border-color: #f7c948;
    color: #8a5a00;
}

.review-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #cfd4d9;
    background: #e9ecef;
    color: #374151;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto 18px;
    display: block;
    text-align: center;
}

.review-filter-toggle:hover {
    background: #fff3d6;
    border-color: #f7c948;
    color: #8a5a00;
}

.review-filter-toggle.is-active {
    background: #fff3d6;
    border-color: #f7c948;
    color: #8a5a00;
}

.question-card.review-hidden {
    display: none;
}

.review-empty-message {
    display: none;
    padding: 18px;
    border: 1px dashed #f0b775;
    border-radius: 8px;
    background: #fffaf3;
    color: #8a5a00;
    margin-bottom: 20px;
    font-weight: 600;
}

.review-empty-message.visible {
    display: block;
}

.teacher-class-return {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    box-shadow: none;
}

.teacher-class-return strong {
    font-weight: 700;
}

/* Boutons d'action dans tableaux (sauf billiothèque dossier) */
.btn-icon-only {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: #6c757d;
    padding: 0;
    text-decoration: none;
    font-weight: 550;
}
.btn-icon-only svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}
.btn-icon-only:hover {
    background-color: #f1f3f5; color: #333; border-color: #ced4da;
}

.btn-icon-only.btn-edit:hover {
    color: #0d6efd; background-color: #e7f1ff; border-color: #86b7fe;
}

.btn-icon-only.btn-play:hover {
    color: #198754; background-color: #e8f5ee; border-color: #75b798;
}

.btn-icon-only.btn-move:hover {
    color: #ffc107; background-color: #fff9db; border-color: #ffeeba;
}

.btn-icon-only.btn-publish:hover {
    color: #0d6efd; background-color: #e7f1ff; border-color: #86b7fe;
}

.btn-icon-only.btn-duplicate:hover {
    color: #0f766e; background-color: #e6fffb; border-color: #99f6e4;
}

.btn-icon-only.btn-delete:hover {
    color: #dc3545; background-color: #fce8e6; border-color: #f5c2c7;
}

.btn-icon-only.btn-add:hover {
    color: #198754; background-color: #e8f5e9; border-color: #198754 !important;
}

.btn-icon-only.btn-stop:hover {
    color: #dc3545;
    background-color: #fce8e6;
}

.btn-icon-only.btn-results:hover {
    color: #0d6efd;
    background-color: #e7f1ff;
}


.btn-icon-only.btn-pwd:hover {
    color: #ffc107;
    background-color: #fff9db;
}



  /* Style des boutons épurés (précédent/suivant) avec bordure légèrement plus épaisse (2px) */

.btn-clean {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #dfe7f1;
    color: #495057;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.btn-clean:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #212529;
}

.questionnaire-import-dropzone.drag-over {
    background: #eef4ff;
    border-color: #86b7fe;
    color: #315f9e;
}

.btn-clean.primary {
    border-color: #dbeafe;
    color: #2563eb;
    background: #f8fbff;
}

.btn-clean.primary:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.btn-clean.info {
    border-color: #0dcaf0;
    color: #087990;
}
.btn-clean.info:hover {
    background: #f0fbfc;
    border-color: #0dcaf0;
    color: #055160;
}
.btn-clean.success {
    border-color: #c9e5dc;
    color: #28705f;
    background: #f3faf7;
}
.btn-clean.success:hover {
    background: #e8f5f0;
    border-color: #a8d4c5;
    color: #205b4d;
}

.btn-clean.warning {
    border-color: #ffc107;
    color: #856404;
}
.btn-clean.warning:hover {
    background: #fffdf5;
    border-color: #ffc107;
    color: #664d03;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
    align-self: center;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    border-radius: 5px;
    border: 1px solid #dfe6ef;
    background: #f8fafc;
    color: #334155;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s ease;
}

.breadcrumb-pill:hover {
    background: #eef4ff;
    border-color: #c7d7f7;
    color: #1d4ed8;
}

.breadcrumb-separator {
    color: #94a3b8;
    font-size: 1.2em;
    line-height: 1;
}

.toolbar-actions svg,
.btn-clean svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-minimal-clean {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: 500;
    color: #21958f;
    background: #ffffff;
    border: 1px solid #21958f;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-minimal-clean:hover {
    background: #f0f7f6;
    border-color: #1a7873;
    color: #1a7873;
}
/* Style épuré minimaliste pour la croix de fermeture des modaux */
.btn-close-minimal {
    background: none;
    border: none;
    font-size: 1.25em;
    color: #adb5bd;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}
.btn-close-minimal:hover {
    color: #343a40;
}


/* =========================================
   4. Gestionnnaire dossier
   ========================================= */

.folder-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    user-select: none;
}

.folder-card:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}
.folder-card:hover .folder-delete-btn {
    opacity: 0.6;
}

.folder-card.drag-over {
    background-color: #eff6ff !important;
    border: 2px dashed #3b82f6 !important;
    transform: scale(1.02);
}

.folder-delete-btn {
    opacity: 0;
    color: #94a3b8;
    background: transparent;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}
.folder-delete-btn:hover {
    opacity: 1 !important;
    color: #ef4444;
    background-color: #fee2e2;
}

.quiz-row { cursor: grab; }
.quiz-row:active { cursor: grabbing; }
.move-container {
    position: relative;
    display: inline-block;
}


.move-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 8px;
    z-index: 1000;
    min-width: 200px;
    margin-top: 4px;
}
.move-dropdown-menu.show { display: block; }

.badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1.4;
   border: 1px solid transparent;
   white-space: nowrap;
}

.badge-status {
   background: #eef2ff;
   color: #374151;
   border-color: #dfe7ff;
}

.badge-success {
   background: #e8f8ed;
   color: #166534;
   border-color: #bfe9cd;
}

.badge-warning {
   background: #fff7db;
   color: #8a5a00;
   border-color: #fce7a8;
}

.badge-secondary {
   background: #f1f5f9;
   color: #475569;
   border-color: #e2e8f0;
}

.badge-review {
   background: #fff1d6;
   color: #92400e;
   border-color: #f8d48a;
}

.badge-author {
   font-size: 0.85em;
   background-color: #f1f3f5;
   color: #495057;
   padding: 3px 8px;
   border-radius: 4px;
}

/* =========================================
   5. Fenêtres modales
   ========================================= */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}



/* =========================================
   6. Tableaux
   ========================================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: #fff;
    font-size: 0.95em;
}

table th,
table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #edf2f7; /* Uniquement une ligne horizontale subtile */
    border-top: none;
    border-left: none;
    border-right: none;
}

table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: bold;
    font-size: 1.1em
}

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

.student-class-row {
    cursor: pointer;
}

.student-class-row:focus-visible {
    outline: 2px solid #86b7fe;
    outline-offset: -2px;
}

table th a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
table th a:hover {
    text-decoration: underline;
}

th a, th a * {
    text-decoration: none !important;
}
/* Style des liens de tri */

th a:hover .sort-text {
    text-decoration: underline !important;
}
.sort-indicator {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    height: 22px;
    font-size: 0.5em;
    vertical-align: middle;
    margin-left: 6px;
    text-decoration: none !important;
}
.sort-indicator.single-active {
    justify-content: center;
}
.sort-inactive {
    color: #ccc;
}

.empty-box {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    color: #6c757d;
    font-style: italic;
  }


/* =========================================
   7. Alertes & Notifications
   ========================================= */
.alert {
    padding: 12px;
    background: #d4edda;
    color: #155724;
    border-radius: 6px;
    margin-bottom: 20px;
}

.alert-danger, .error {
    color: #721c24;
    background: #f8d7da;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
}



.teacher-layout {
   display: flex;
   align-items: flex-start;
   gap: 24px;
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 20px 12px 0 260px !important;
   box-sizing: border-box;
}

.teacher-sidebar {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 260px;
   box-sizing: border-box;
   background: transparent;
   border-right: 1px solid #e2e8f0;
   border-radius: 0;
   padding: 24px 16px 18px;
   box-shadow: none;
   display: flex;
   flex-direction: column;
   transition: width 0.25s ease, padding 0.25s ease;
}

.teacher-sidebar-header {
   display: flex;
   flex-direction: column;
   gap: 10px;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #475569;
   padding: 0 6px 12px;
   border-bottom: 1px solid #e2e8f0;
   margin-bottom: 12px;
}

.teacher-sidebar-brand-row {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 32px;
}

.teacher-sidebar-brand {
   display: block;
   width: 100%;
   max-width: 170px;
   height: 50px;
   margin: 0 auto 0;
   object-fit: contain;
   transition: width 0.2s ease, max-width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

.teacher-sidebar-title-row {
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 32px;
}

.teacher-sidebar-title {
   transition: opacity 0.2s ease, width 0.2s ease;
   white-space: nowrap;
   display: inline-block;
   line-height: 1.2;
}

.teacher-sidebar-toggle {
   width: 24px;
   height: 24px;
   border: 1px solid #dfe6ef;
   background: #ffffff;
   border-radius: 8px;
   color: #475569;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
   transition: all 0.2s ease;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
   margin-top: 0;
}

.teacher-sidebar-toggle-inline {
   margin-top: 0;
}

.teacher-sidebar-toggle:hover {
   background: #f4f8ff;
   border-color: #bfd2ff;
   color: #0d6efd;
}

.toggle-icon {
   font-size: 1rem;
   line-height: 1;
   transform: translateY(-1px);
}

.teacher-sidebar-user {
   font-size: 0.9rem;
   color: #495057;
   padding: 0 6px 16px;
   transition: opacity 0.2s ease;
}

.teacher-sidebar-user strong {
   color: #212529;
}

.teacher-sidebar-nav {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.teacher-sidebar-nav a,
.teacher-sidebar-footer a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border-radius: 10px;
   text-decoration: none;
   color: #334155;
   font-weight: 600;
   transition: all 0.2s ease;
   min-width: 0;
}

.teacher-sidebar-nav a > span,
.teacher-sidebar-footer a > span {
   white-space: nowrap;
   transition: opacity 0.2s ease, width 0.2s ease;
}

.teacher-sidebar-nav a svg,
.teacher-sidebar-footer a svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

.teacher-sidebar-nav a:hover,
.teacher-sidebar-footer a:hover {
   background: #eef4ff;
   color: #0f172a;
}

.teacher-sidebar-nav a.active {
   background: #e8f1ff;
   color: #0d6efd;
   border-left: 3px solid #0d6efd;
   padding-left: 9px;
}

.teacher-sidebar-footer a.active {
   background: #e8f1ff;
   color: #0d6efd;
   border-left: 3px solid #0d6efd;
   padding-left: 9px;
}

.teacher-sidebar-footer {
   margin-top: auto;
   padding-top: 12px;
   border-top: 1px solid #e2e8f0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.teacher-sidebar-logout {
   color: #6c757d;
}

.teacher-sidebar-logout:hover {
   color: #dc3545;
   background: #fff1f2;
}

.teacher-main {
   flex: 1 1 auto;
   min-width: 0;
   width: 100%;
   max-width: none;
}



.teacher-sidebar-collapsed .teacher-layout {
   padding-left: 80px !important;
}

.teacher-sidebar-collapsed .teacher-sidebar {
   width: 64px;
   padding-left: 8px;
   padding-right: 8px;
}

.teacher-sidebar-collapsed .teacher-sidebar-title,
.teacher-sidebar-collapsed .teacher-sidebar-user,
.teacher-sidebar-collapsed .teacher-sidebar-nav a span,
.teacher-sidebar-collapsed .teacher-sidebar-footer a span {
   opacity: 0;
   width: 0;
   overflow: hidden;
   pointer-events: none;
}

.teacher-sidebar-collapsed .teacher-sidebar-brand-row {
   padding-left: 6px;
}

.teacher-sidebar-collapsed .teacher-sidebar-brand {
   width: 100%;
   max-width: 170px;
   height: 50px;
   margin: 0 auto;
}

.teacher-sidebar-collapsed .teacher-sidebar-nav a,
.teacher-sidebar-collapsed .teacher-sidebar-footer a {
   justify-content: center;
   padding: 10px 8px;
}

.teacher-sidebar-collapsed .teacher-sidebar-nav a.active,
.teacher-sidebar-collapsed .teacher-sidebar-footer a.active {
   padding-left: 8px;
}

@media (max-width: 980px) {
   .teacher-layout {
       display: block;
       width: calc(100% - 12px) !important;
       margin: 0 auto !important;
       padding: 0 !important;
   }

   .teacher-main {
       max-width: 100%;
   }

   .teacher-sidebar {
       position: static;
       margin-bottom: 20px;
       width: auto;
       border-right: none;
       border-bottom: 1px solid #e2e8f0;
       padding: 18px 12px;
   }
}

/* =========================================
   8. Onglets
   ========================================= */

.nav-tabs {
   display: flex;
   gap: 30px;
   border-bottom: 2px solid #e0e0e0;
   margin-bottom: 25px;
}

.nav-tabs a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.nav-tabs a svg {
    width: 20px;
    height: 20px;
}

.nav-tabs a:hover {
    color: #007bff;
}

.nav-tabs a.active {
    background: transparent;
    color: #000;
    font-weight: bold;
    border-bottom: 3px solid #007bff;
}


/* =========================================
   9a. EDITION DE QUIZZ - général
   ========================================= */
 #floating-toast, .toast {
     position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px);
     background-color: #28a745; color: white; padding: 12px 24px; border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; font-size: 1em; font-weight: 500;
     opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none;
 }
 #floating-toast.error, .toast.error { background-color: #dc3545; }
 #floating-toast.show, .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

input[type="text"], select {
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

input[type="text"]:focus, select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.q-explanation-input {
    width: 100%; border: 1px solid #ced4da; border-radius: 4px; padding: 8px 12px; font-size: 0.9em;
    outline: none; background: #fff; resize: none; overflow: hidden; line-height: 1.4;
    font-family: inherit; box-sizing: border-box; min-height: 45px;
}





.q-block { background: #fafafa; border: 1px solid #ddd; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.q-img { max-width: 100%; max-height: 300px; border-radius: 6px; margin: 10px 0 15px 0; object-fit: contain; }

.question-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 6px solid #ccc;
}
.question-card.correct { border-left-color: #198754; }
.question-card.incorrect { border-left-color: #dc3545; }

.q-card {
    background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;
    margin-bottom: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); position: relative; transition: border-color 0.2s;
}

.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px 48px; gap: 20px; align-items: start; }
.q-main { min-width: 0; position: relative; max-width: 100%; grid-column: 1; }

.q-header-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.q-number { font-weight: bold; font-size: 1.15rem; color: #333; padding-top: 6px; flex-shrink: 0; }
.q-points-box { display: flex; align-items: center; background: #f8f9fa; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 10px; width: 100px; height: 38px; box-sizing: border-box; flex-shrink: 0; }
.q-points-box input { border: none; background: transparent; width: 40px; text-align: right; font-weight: bold; font-size: 1rem; outline: none; }

/* Checkboxes personnalisées */
.custom-checkbox-container { display: inline-flex; align-items: center; cursor: pointer; user-select: none; position: relative; }
.custom-checkbox-container input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark-circle {
    height: 28px; width: 28px; background-color: #e9ecef; border: 2px solid #ced4da; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 0.8em; font-weight: 700; color: #495057; line-height: 1; text-align: center; padding: 0; box-sizing: border-box;
}
.custom-checkbox-container:hover .checkmark-circle { border-color: #28a745; }
.custom-checkbox-container input[type="checkbox"]:checked ~ .checkmark-circle {
    background-color: #28a745; border-color: #28a745; color: #fff;
    box-shadow: none;
}
.checkmark-circle::after { display: none; }


/* Menus d'insertion de questions */
.insert-trigger-zone { position: relative; height: 16px; margin: 6px 0; display: flex; align-items: center; justify-content: center; z-index: 10; }
.insert-line { position: absolute; width: 100%; height: 2px; background-color: transparent; transition: background-color 0.2s; }
.insert-trigger-zone:hover .insert-line { background-color: #adb5bd; }
.insert-btn { position: relative; background: #f8f9fa; color: #87919b; border: 1px solid currentColor; border-radius: 50%; width: 24px; height: 24px; padding: 0; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.05); opacity: 0.3; transition: all 0.2s ease; z-index: 11; }
.insert-btn::before,
.insert-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.insert-btn::after { transform: translate(-50%, -50%) rotate(90deg); }
.insert-trigger-zone:hover .insert-btn { opacity: 1; background: #87919b; color: #ffffff; border-color: currentColor; transform: scale(1.15); }

.insert-menu { position: absolute; top: 26px; background: #fff; border: 1px solid #ced4da; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: none; flex-direction: column; padding: 6px; gap: 4px; z-index: 100; min-width: 180px; }
.insert-menu.show { display: flex; }
.insert-menu button { background: none; border: none; text-align: left; padding: 8px 12px; font-size: 0.9em; color: #333; cursor: pointer; border-radius: 4px; transition: background 0.2s; }
.insert-menu button:hover { background: #f1f3f5; color: #495057; }

/* Panneau latéral d'images */
.q-sidebar {
    width: 220px; border: 2px dashed #ced4da; border-radius: 8px; padding: 15px; text-align: center;
    background: #fdfdfd; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; box-sizing: border-box; grid-column: 2;
}
.q-sidebar:hover { border-color: #007bff; background: #f8f9fa; }
.q-sidebar input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.q-sidebar img { max-width: 100%; max-height: 120px; border-radius: 4px; object-fit: contain; display: block; margin: 0 auto 8px auto; }
.btn-remove-image-text { background: none; border: none; color: #dc3545; font-size: 0.85em; cursor: pointer; padding: 0; text-decoration: underline; display: inline-block; position: relative; z-index: 5; }
.btn-remove-image-text:hover { color: #bd2130; }

/* Boutons d'action latéraux (Valider, Dupliquer, Descendre...) */
.action-buttons-side {
    display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: flex-start;
    background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 6px; width: 48px; box-sizing: border-box; grid-column: 3;
}
.btn-icon-action { background: transparent; border: none; cursor: pointer; width: 34px; height: 34px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; color: #6c757d; }
.btn-icon-action svg { width: 18px; height: 18px; fill: currentColor; }
.btn-icon-action:hover { background: #e9ecef; color: #333; }
.btn-icon-action.btn-duplicate:hover { color: #007bff; background: #e7f1ff; }
.btn-icon-action.btn-delete:hover { color: #dc3545; background: #fce8e6; }
.btn-icon-action.btn-toggle-mode:hover { color: #28a745; background: #e6f4ea; }

/* =========================================
   9b. ÉLÉMENTS SPÉCIFIQUES DES QUESTIONS
   ========================================= */
/* Vrai/Faux */
.tf-buttons-container { display: flex; gap: 12px; margin-top: 15px; margin-left: 25px; }
.tf-btn { padding: 12px 24px; color: #334155; background-color: #f1f5f9; font-weight: bold; font-size: 1rem; border-radius: 6px; border: 2px solid #dee0e3; cursor: pointer; border: none; transition: all 0.2s; display: flex; align-items: center; justify-content: center;}
.tf-btn-true { background-color: #28a745; color: white; }
.tf-btn-false { background-color: #bd2130; color: white; }
.tf-btn.inactive { background-color: #e9ecef !important; color: #6c757d !important; opacity: 1; }

/* QCM / Choix Multiples / Ouverte */
.mc-options-edit-wrapper, .open-options-edit-wrapper { margin-left: 0 !important; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.mc-option-textarea { width: 100% !important; border: 1px solid #ced4da; border-radius: 4px; padding: 6px 12px; font-size: 1rem; font-family: inherit; outline: none; background: #fff; resize: none; overflow: hidden; line-height: 1.5; box-sizing: border-box; height: 38px; }
.mc-option-textarea:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.mc-edit-controls { margin-left: 32px !important; margin-top: 8px; }
.input-with-latex-wrapper { position: relative; flex: 1; display: flex; align-items: center; width: 100%; }
.input-with-latex-wrapper.mc-option-drop-active { background: rgba(33, 149, 143, 0.06); border-radius: 4px; }
.mc-option-image-button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #adb5bd; cursor: pointer; z-index: 2; }
.mc-option-image-button:hover { color: #adb5bd; background: transparent; border: 0; }
.mc-option-image-button svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.mc-option-image-input { display: none; }
.mc-option-image-preview { position: absolute; right: 38px; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; padding: 6px 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; background: transparent; pointer-events: none; }
.mc-option-image-preview img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.btn-remove-row { background: transparent; border: none; color: #6c757d; font-size: 1.2em; font-weight: 700; width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; line-height: 1; }
.btn-remove-row:hover { background: transparent; color: #dc3545; border-color: transparent; transform: scale(1.1); }
.option-label { display: block; background: white; border: 1px solid #dcdcdc; padding: 12px 15px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
.option-label:hover { background: #eef5ff; border-color: #007bff; }

/* =========================================
   9c. MODES D'AFFICHAGE (VIEW / EDIT / SANS IMAGE)
   ========================================= */
.q-card.view-mode.no-image .q-layout { grid-template-columns: 1fr 48px !important; }
.q-card.view-mode.no-image .q-main { grid-column: 1 / 2 !important; width: 100%; }
.q-card.view-mode.no-image .action-buttons-side { grid-column: 2 !important; }
.q-card.view-mode.no-image .q-sidebar { display: none !important; }

.q-card.view-mode .q-header-row,
.q-card.view-mode .tf-buttons-container,
.q-card.view-mode .q-explanation-container,
.q-card.view-mode .mc-edit-controls,
.q-card.view-mode .mc-options-edit-wrapper,
.q-card.view-mode .open-options-edit-wrapper { display: none !important; }
.q-card.view-mode .open-correct-heading,
.q-card.view-mode .open-alternative-heading { display: none !important; }
.q-card.edit-mode .q-view-mode-container { display: none !important; }
.q-card.view-mode .q-sidebar {cursor: default !important;}
.q-card.view-mode:not(.no-image) .q-sidebar { border: none !important; background: transparent !important; padding: 0 !important;}
.q-card.view-mode:not(.no-image) .q-sidebar input[type="file"] { display: none !important; }
.q-card.view-mode:not(.no-image) .btn-remove-image-text { display: none !important; }

.q-view-mode-container { margin-top: 10px; color: #333; }
.view-question-title { font-weight: 400; font-size: 1em; color: #333; margin-bottom: 8px; word-break: break-word; padding-right: 70px; display: flex; align-items: flex-start; gap: 10px; }
.view-q-number { font-weight: 600; font-size: 1em; color: #495057; line-height: 1.5; flex-shrink: 0; }
.view-question-content-html { font-weight: 400; white-space: pre-line; }
.view-question-content-html p { margin: 0; display: block; font-weight: 400; }
.view-points-badge { position: absolute; top: 0; right: 0; background: #e9ecef; padding: 3px 10px; border-radius: 4px; font-size: 0.85em; font-weight: bold; color: #495057; }
.view-answer-item { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 1.1rem; }

.view-checkmark-circle {
    height: 28px; width: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 0.8em; font-weight: 700; line-height: 1; color: #495057; background-color: #e9ecef; border: 2px solid #ced4da; box-sizing: border-box;
}
.view-checkmark-circle.correct { background-color: #28a745; border-color: #28a745; color: #fff; }
.view-checkmark-circle.correct::after { display: none; }
.view-checkmark-circle.incorrect { background-color: #e9ecef; border: 2px solid #ced4da; color: #495057; }

.q-card.view-mode .case-sensitive-wrapper {
    display: none !important;
}



 /* =========================================
    9d. COMPOSANTS ADDITIONNELS (Score, Dossiers...)
    ========================================= */
 .progress-bar { background: #e0e0e0; border-radius: 10px; height: 10px; width: 100%; margin: 15px 0 25px 0; overflow: hidden; }
 .progress-fill { background: #007bff; height: 100%; transition: width 0.3s; }
 .score-box { background: #eef5ff; padding: 20px; border-radius: 8px; margin: 20px 0; }
 .score-number { font-size: 2.5em; color: #007bff; font-weight: bold; }



/*OVERRIDES QUILL.JS*/
.ql-toolbar.ql-snow { border-top-left-radius: 6px; border-top-right-radius: 6px; background: #f8f9fa; border-color: #ced4da; padding: 4px 8px; }
.ql-container.ql-snow { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: #ced4da; font-size: 1rem; font-family: inherit; }
.ql-editor { min-height: 80px; }
.ql-toolbar .ql-math-toggle { width: auto; padding: 2px 8px; font-size: 0.8rem; font-weight: 600; }
.ql-toolbar .ql-math-toggle img { display: block; width: 24px; height: 20px; object-fit: contain; }
.ql-toolbar .ql-math-toggle.math-active img { filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(2077%) hue-rotate(205deg) brightness(95%) contrast(102%); }
.ql-toolbar .ql-math-toggle:focus { outline: none; }
.quill-content p { margin-bottom: 0.5em; }
.quill-content sub { vertical-align: sub; font-size: smaller; }
.quill-content super, .quill-content sup { vertical-align: super; font-size: smaller; }



/* =========================================
   10. STYLES SPÉCIFIQUES - TEACHER CLASS DETAILS
   ========================================= */
.tcd-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.tcd-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #ced4da;
    width: 650px;
    max-width: 90%;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.quiz-preview-modal-content {
    width: min(760px, 92vw) !important;
    max-height: calc(100vh - 40px) !important;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
}

#quiz-preview-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.tcd-folder-card-sm {
    background: #fff;
    border: 1px solid #ced4da;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tcd-folder-card-sm:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}


.tcd-modal-tabs {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 15px;
}

.tcd-modal-tab-btn {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: bold;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tcd-modal-tab-btn.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

/* Badges */
.badge-code { font-weight: bold; color: #8d959f; }



/* =========================================
   10. TABLEAUX DE RESULTATS
   ========================================= */

.socrative-container {
    max-width: 98%;
    margin: 20px auto;
}
.controls-bar {
    display: flex;
    gap: 25px;
    align-items: center;
    background: #f8f9fa;
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border: 1px solid #e9ecef;
}
.toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
}
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .3s; border-radius: 22px;
}
.slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
    background-color: white; transition: .3s; border-radius: 50%;
}
input:checked + .slider { background-color: #28a745; }
input:checked + .slider:before { transform: translateX(22px); }


.table-responsive {
    width: 100%;
    overflow-x: auto;
    position: relative;
    max-height: 70vh;
}
.soc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9em;
    text-align: left;
}
.soc-table th, .soc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    vertical-align: middle;
    background-color: #fff;
}
.soc-table th {
    background-color: #f1f3f5;
    color: #343a40;
    font-weight: 700;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: default;
    user-select: none;
}

.soc-table th.sortable {
    cursor: pointer;
}
.soc-table th.sortable:hover {
    background-color: #e2e6ea;
}

.sort-icon {
    font-size: 0.8em;
    margin-left: 5px;
    color: #6c757d;
}

.soc-table th.col-q {
    cursor: help;
}

.soc-table th:first-child,
.soc-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #fff;
    border-right: 2px solid #ced4da;
}
.soc-table th:first-child {
    z-index: 4;
    background-color: #f1f3f5;
}

.soc-table tr.total-row td {
    position: sticky;
    bottom: 0;
    background-color: #e9ecef;
    font-weight: bold;
    color: #343a40;
    z-index: 2;
    border-top: 2px solid #adb5bd;
}
.soc-table tr.total-row td:first-child {
    z-index: 5;
    background-color: #e9ecef;
}

.col-name { min-width: 180px; }
.col-score { min-width: 100px; text-align: center; }
.col-q { min-width: 140px; text-align: center; }
.col-date { min-width: 140px; text-align: center; color: #6c757d; font-size: 0.85em; }

.cell-correct { background-color: #d4edda !important; color: #155724; }
.cell-incorrect { background-color: #f8d7da !important; color: #721c24; }
.cell-pending { background-color: #fff3cd !important; color: #856404; }

.blur-name { filter: blur(5px); transition: filter 0.2s; cursor: pointer; }
.blur-name:hover { filter: blur(0); }
.blur-content { filter: blur(6px); user-select: none; }

.btn-refresh {
    background-color: #17a2b8; color: white; border: none;
    padding: 6px 14px; border-radius: 4px; cursor: pointer; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.9em;
}
.btn-refresh:hover { background-color: #138496; }
.spinning { animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Styles pour aligner la réponse et le crayon sur la même ligne */
.answer-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.resp-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.grade-dropdown-container {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.btn-pencil {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color 0.2s, background-color 0.2s;
}
.btn-pencil:hover {
    color: #343a40;
    background-color: rgba(0,0,0,0.05);
}
.grade-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 10;
    white-space: nowrap;
    min-width: 100px;
}
.grade-menu.show {
    display: block;
}
.grade-menu-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.85em;
    cursor: pointer;
    color: #333;
}
.grade-menu-item:hover {
    background-color: #f1f3f5;
}
.grade-menu-item.correct { color: #155724; font-weight: bold; }
.grade-menu-item.incorrect { color: #721c24; font-weight: bold; }


.results-container {
    max-width: 800px;
    margin: 15px auto 30px auto;
    padding: 20px;
}
.score-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}
.score-badge {
    display: inline-block;
    font-size: 2.2rem;
    font-weight: bold;
    color: #0d6efd;
    margin: 15px 0;
}
.score-percentage {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-block;
}
.bg-success-light { background-color: #d1e7dd; color: #0f5132; }
.bg-warning-light { background-color: #fff3cd; color: #664d03; }
.bg-danger-light { background-color: #f8d7da; color: #842029; }


.answer-box {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 10px;
    font-size: 0.98rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.answer-box > span {
    flex: 1;
}
.explanation-box {
    background: #e7f1ff;
    border-left: 4px solid #0d6efd;
    padding: 12px 15px;
    border-radius: 4px;
    margin-top: 15px;
    font-size: 0.95rem;
    color: #084298;
}
.status-badge {
    font-size: 0.85rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    float: right;
}
.status-badge.correct { background-color: #d1e7dd; color: #0f5132; }
.status-badge.incorrect { background-color: #f8d7da; color: #842029; }


/* Style pour désactiver l'affichage des couleurs uniquement dans le tableau des élèves */
table.soc-table.colors-disabled .cell-correct,
table.soc-table.colors-disabled .cell-incorrect {
    background-color: #ffffff !important;
    color: #333333 !important;
}


/* Verrouillage absolu : Empêche Nom et Moyenne de changer de couleur au survol */
.soc-table th.col-name,
.soc-table th.col-score {
    cursor: pointer;
    background-color: #f1f3f5 !important;
    color: #343a40 !important;
}
.soc-table th.col-name:hover,
.soc-table th.col-score:hover {
    background-color: #f1f3f5 !important;
    color: #343a40 !important;
}

/* Appliquer l'effet hover uniquement aux en-têtes des questionnaires */
.soc-table th.col-q.quiz-header-cell:hover {
    background-color: #e2e6ea !important;
}

/* Style pour la case du quiz (en-tête cliquable) */
.col-q.quiz-header-cell {
    padding: 0 !important;
    transition: background-color 0.2s ease;
}

/* Lien englobant toute la cellule avec centrage parfait (Flexbox + box-sizing) */
.quiz-cell-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    box-sizing: border-box; /* Correction cruciale pour respecter les limites du th */
    color: inherit;
    text-decoration: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center;
}
.quiz-cell-link:hover {
    color: inherit;
    text-decoration: none;
}

/* Effet hover sur le texte du titre du quiz (sans soulignement) */
.quiz-cell-link:hover .quiz-name-text {
    color: #0056b3;
    text-decoration: none;
}

/* =========================================
   12. SECTION ELEVE
   ========================================= */


.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.section-title {
    font-size: 1.3rem;
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
    color: #333;
}
.quiz-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.quiz-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #e9ecef; /* Style épuré sans bande latérale colorée */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.quiz-info {
    flex-grow: 1;
}
.quiz-header-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.quiz-header-line h3 {
    margin: 0;
    font-size: 1.15rem;
}
.quiz-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.8rem;
}
.badge-status { background: #e9ecef; color: #495057; }
.badge-success { background: #d1e7dd; color: #0f5132; }
.badge-warning { background: #fff3cd; color: #664d03; }
.badge-secondary { background: #e2e3e5; color: #41464b; }

.quiz-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}



/* =========================================
   13. QUIZZ VUE ELEVE
   ========================================= */

.quiz-container {
    max-width: 750px;
    margin: 40px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 30px;
    position: relative;
}
.question-slide {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
.question-slide.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}
.quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    border-top: 1px solid #dee2e6;
    padding-top: 20px;
}
#nextBtn {
    margin-left: auto;
}
.progress-bar-container {
    background: #e9ecef;
    border-radius: 4px;
    height: 8px;
    margin-bottom: 25px;
    overflow: hidden;
}
.progress-bar-fill {
    background: #7bcdc5;
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}



/* Style personnalisé pour les ronds verts (#28a745) avec coche (QCM) */
.student-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    padding: 8px 0;
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    user-select: none;
}
/* Masquer la case native */
.student-option-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Créer le rond personnalisé */
.custom-checkbox-round {
    position: relative;
    height: 28px;
    width: 28px;
    background-color: #e9ecef;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: #495057;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
}
.student-option-label:hover .custom-checkbox-round {
    border-color: #28a745;
}
.student-option-label input[type="checkbox"]:checked ~ .custom-checkbox-round {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}
.custom-checkbox-round::after {
    display: none;
}

.quiz-preview-static-answer:hover .custom-checkbox-round {
    border-color: #cbd5e1;
}
.quiz-preview-static-answer:hover input[type="checkbox"]:checked ~ .custom-checkbox-round {
    border-color: #28a745;
}
.tf-btn.quiz-preview-static-answer.tf-btn-true:hover {
    background-color: #28a745;
    color: #fff;
}
.tf-btn.quiz-preview-static-answer.tf-btn-false:hover {
    background-color: #bd2130;
    color: #fff;
}
.tf-btn.quiz-preview-static-answer.inactive:hover {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

.tf-btn:hover {
    background-color: #e2e8f0;
    border-color: #94a3b8;
}
.tf-btn.selected-true {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}
.tf-btn.selected-false {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}
.tf-btn.unselected-dimmed {
    background-color: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}
.correction-box {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    display: none;
}
.correction-box.correct {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.correction-box.incorrect {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
/* Styles pour le modal d'image */
.image-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.image-modal-content {
    max-width: min(85vw, 900px);
    max-height: 85vh;
    padding: 8px;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    object-fit: contain;
}
.image-modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    color: #6c757d;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}