.badge#coordinatorBadge, #coordinatorBadge.badge {
    background-color: #cff4fc;
    color: #055160;
}
/* Animation douce pour les nouveaux messages côté étudiant */
.highlight-new-message {
    outline: 2px solid rgba(25, 135, 84, 0.35);
    border-radius: 6px;
}

/* Afficher les sauts de ligne des messages (étudiant et prof) */
.message-content p {
    white-space: pre-wrap; /* respecte \n, wrap longue ligne */
    margin-bottom: 0;
}
* {
  font-family: "Lato", serif;
  font-optical-sizing: auto;
}

#titremenu {
  font-family: "Square Peg", cursive;
  font-style: normal;
  font-size: 60px;
  font-weight: 700;
  line-height: 54px;
}

body {
  height: 100vh;
  background-color: whitesmoke;
}

:root {
  --color-rouge: #b80000;
  --color-bleu: #225c8b;
  --color-vert: #009f55;
  --color-jaune: #f8ad00;
  --color-jaune-clair: #ffd470;
  --color-jaune-tres-clair: #f9edcf;
  --color-gris-clair: #bbbbbb;
  --color-gris: #636363;
  --color-gris2: #474747;
  --bs-heading-color: #424242;
  --color-noir: #000000;
  --color-noir-transparent: #000000e1;
  --color-gris-transparent: #00000065;
  --color-blanc: #ffffff;
  --gradient-1: linear-gradient(90deg, #1344a6 1%, #e83e8c 30%, #2ec4b6 50%);
  --tremplins-blue: #1344a6;
  --tremplins-cyan: #2ec4b6;
  --tremplins-pink: #e83e8c;
  --tremplins-yellow: #ffd54a;
  --tremplins-orange: #ff7043;
  --tremplins-white: #ffffff;
  --tremplins-black: #4d4d4d;
  --btn-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  --btn-shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.2);
  --gradient-2: linear-gradient(
    135deg,
    var(--tremplins-yellow),
    var(--tremplins-orange)
  );
  --gradient-3: linear-gradient(
    135deg,
    var(--tremplins-blue),
    var(--tremplins-cyan)
  );

  --gradient-4: linear-gradient(135deg, #be4aff, #ff0505);
}

.color_rouge {
  color: var(--color-rouge);
}

.color_bleu {
  color: var(--color-bleu);
}

.color_vert {
  color: var(--color-vert);
}

.color_jaune {
  color: var(--color-jaune);
}

.color_jaune_clair {
  color: var(--color-jaune-clair);
}

.color_jaune_tres_clair {
  color: var(--color-jaune-tres-clair);
}

.color_gris_clair {
  color: var(--color-gris-clair);
}

.color_gris {
  color: var(--color-gris);
}

.color_gris2 {
  color: var(--color-gris2);
}

.gradient-text {
  background: var(--gradient-1);
  background-position: left;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gradient-text-3 {
  background: var(--gradient-3);
  background-position: left;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bg_color_rouge {
  background-color: var(--color-rouge);
}

.bg_color_bleu {
  background-color: var(--color-bleu);
}

.bg_tremplins_blue {
  background-color: var(--tremplins-blue);
}

.bg_color_vert {
  background-color: var(--color-vert);
}

.bg_color_jaune {
  background-color: var(--color-jaune);
}

.bg_color_jaune_clair {
  background-color: var(--color-jaune-clair);
}

.bg_color_jaune_tres_clair {
  background-color: var(--color-jaune-tres-clair);
}

.bg_color_gris {
  background-color: var(--color-gris);
}

.bg_color_gris2 {
  background-color: var(--color-gris2);
}

.bg_color_noir {
  background-color: var(--color-noir);
}

.bg_color_noir_transparent {
  background-color: var(--color-noir-transparent);
}

.bg_color_gris_transparent {
  background-color: var(--color-gris-transparent);
}

.border_color_rouge {
  border-color: var(--color-rouge);
}

.border_color_bleu {
  border-color: var(--color-bleu);
}

.border_color_vert {
  border-color: var(--color-vert);
}

.border_color_jaune {
  border-color: var(--color-jaune) !important;
}

.border_color_jaune_clair {
  border-color: var(--color-jaune-clair) !important;
}

.border_color_gris {
  border-color: var(--color-gris);
}

.border_color_gris2 {
  border-color: var(--color-gris2);
}

.border_color_noir {
  border-color: var(--color-noir);
}

.border_color_noir_transparent {
  border-color: var(--color-noir-transparent);
}

.border_color_blanc {
  border-color: var(--color-blanc);
}

.border_transparent {
  border-color: transparent;
}

.border2 {
  border-width: 2px;
}

.border15 {
  border-width: 15px;
}

.border_left_jaune_10 {
  border-left: 10px solid var(--color-jaune);
}

.btn_hover_rouge:hover {
  background-color: var(--color-rouge);
  color: white;
}

.btn_hover_bleu:hover {
  background-color: var(--color-bleu);
  color: white;
}

.btn_hover_vert:hover {
  background-color: var(--color-vert);
  opacity: 0.8;
}

.btn_hover_jaune:hover {
  background-color: var(--color-jaune);
}

.btn_hover_tres_clair:hover {
  background-color: var(--color-jaune-tres-clair);
  color: var(--color-gris2);
}

.btn_hover_jaune_clair:hover {
  background-color: var(--color-jaune-clair);
  color: var(--color-gris2);
}

.btn_rouge {
  background-color: var(--color-rouge);
  color: white;
}

.btn_bleu {
  background-color: var(--color-bleu);
  color: white;
}

.btn_vert {
  background-color: var(--color-vert);
  color: white;
}

.btn_jaune_clair {
  background-color: var(--color-jaune-clair);
  color: var(--color-gris2);
}

.btn_jaune_tres_clair {
  background-color: var(--color-jaune-tres-clair);
  color: var(--color-gris2);
}

.gradient-bg-secondary {
  background: linear-gradient(
    135deg,
    var(--tremplins-pink),
    var(--tremplins-orange)
  );
}

.gradient-bg-secondary:hover {
  background: linear-gradient(
    135deg,
    var(--tremplins-pink),
    var(--tremplins-orange)
  );
}

.aureole_text {
  text-shadow: var(--color-jaune) 0 0 10px;
}

.aureole_text_rouge {
  text-shadow: var(--color-rouge) 0 0 10px;
}

.btn_submit_validation {
  background-color: var(--color-vert);
  color: white;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  will-change: transform;
  transform: scaleX(1);
}

.btn_submit_validation:hover {
  z-index: 9999;
  background-color: var(--color-vert);
  color: white;
  animation: scale 0.3s ease-in-out;
}

.btn_submit_annulation {
  background-color: var(--color-rouge);
  color: white;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  will-change: transform;
  transform: scaleX(1);
}

.btn_submit_annulation:hover {
  z-index: 9999;
  background-color: var(--color-rouge);
  color: white;
  animation: scale 0.3s ease-in-out;
}

.btn_jaune {
  background-color: transparent;
  border: solid 1px var(--color-jaune);
  color: var(--color-gris2);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  will-change: transform;
  transform: scaleX(1);
}

.btn_jaune:hover {
  z-index: 9999;
  background-color: var(--color-jaune);
  border: solid 1px var(--color-jaune);
  animation: scale 0.3s ease-in-out;
}

.btn_jaune.active {
  z-index: 9999;
  background-color: var(--color-jaune);
  border: solid 1px var(--color-jaune);
  color: var(--color-gris2);
  transform: scale(1.1);
}

/* btn-close est stylé dans modal-shared.css pour les modals */

.gradient-border-1 {
  border: 3px solid transparent !important;
  border-image: linear-gradient(135deg, #a61313, #7b4f9f, #e83e8c) 1 !important;
  border-radius: 0rem !important;
}

.badge.active {
  background-color: var(--color-jaune);
  color: black;
  transform: scale(1.05);
}

.gradient-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* animation scale */

@keyframes scale {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(1.2);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes ptscale {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(1.05);
  }

  100% {
    transform: scaleX(1);
  }
}

.scale1Hover,
.scale15Hover {
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.scale1Hover:hover {
  z-index: 9999;
  animation: scale 0.3s ease-in-out;
}

.scale15Hover:hover {
  z-index: 9999;
  animation: ptscale 0.3s ease-in-out;
}

.opa80 {
  opacity: 0.8;
}

.align-content-center {
  align-content: center;
}

.align_journal {
  text-align: start;
}

.force_poppins {
  font-family: "Poppins", serif !important;
}

.size_30 {
  font-size: 30px !important;
}

.cursor_pointer {
  cursor: pointer;
}

.ombre {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.innershadow {
  box-shadow: inset 1px 1px 6px #828282;
  -moz-box-shadow: inset 1px 1px 6px #828282;
  -webkit-box-shadow: inset 1px 1px 6px #828282;
}

.z9999 {
  z-index: 9999;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000000a3;
  --bs-backdrop-opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -o-webkit-backdrop-filter: blur(5px);
  -moz-backdrop-filter: blur(5px);
  -ms-backdrop-filter: blur(5px);
}

.modal-header {
  justify-content: center;
  position: relative;
}

.modal-title {
  text-align: center;
  width: 100%;
  margin: 0;
}

.modal-dialog-scrollable .modal-footer {
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  bottom: 0;
  background: #fff; /* éviter que le shadow se mélange au contenu */
  z-index: 2;
}

.modal-dialog-scrollable .modal-header {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  background: #fff; /* éviter que le shadow se mélange au contenu */
  z-index: 2;
}

.btn-close-obsolete {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.milieuHV {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.border-radius-hg_0 {
  border-top-left-radius: 0 !important;
}

.radius_gros {
  border-radius: 15px;
}

.dashed {
  border: 2px dashed var(--color-jaune-tres-clair);
}

/* CSS */
.custom-radio {
  /* Supprime l'apparence par défaut du navigateur */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border: 2px solid var(--color-gris2);
  /* Bordure personnalisée */
  border-radius: 50%;
  /* Forme circulaire */
  background-color: transparent;
  /* Couleur de fond au repos */

  cursor: pointer;
  position: relative;
  margin-right: 0.5rem;
  /* Espacement entre le bouton et le label */
}

/* État focus (quand on navigue au clavier) */
.custom-radio:focus {
  outline: none;
  /* Supprime l'outline par défaut */
}

/* Pour personnaliser l'anneau de focus visible au clavier */
.custom-radio:focus-visible {
  /* Exemple d'un focus un peu plus discret */
  box-shadow: 0 0 0 3px var(--color-jaune-tres-clair) !important;
}

/* État coché */
.custom-radio:checked {
  background-color: var(--color-gris2) !important;
  /* Couleur de fond quand coché */
}

.form-check-input:checked {
  border-color: var(--color-gris2) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem var(--color-jaune-clair);
}

/* Le point blanc central quand c'est coché */
.custom-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border-radius: 50%;
}

.form-control:focus,
.form-select:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #f8ad00;
  outline: 0;
  box-shadow: none !important;
}

/*Custom bouton switch*/

.form-check-input:checked {
  background-color: #f8ad00 !important;
}

/* Les accordéons sont maintenant stylisés dans modal-shared.css pour #usersetting */
.accordeon {
  height: 4em;
  overflow: hidden;
}

/* ANIMATIONS */

.opacity-0 {
  opacity: 0;
}

.opa0 {
  opacity: 0;
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-out {
  animation: fadeOut 1s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Responsive tweaks for document preview modal */
@media (max-width: 576px) {
  #documentPreviewModal .modal-dialog {
    margin: 0;
  }
  #documentPreviewModal .modal-content {
    min-height: 100dvh;
    border-radius: 0;
  }
  #documentPreviewModal .modal-footer .btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  #documentPreviewModal .modal-footer .d-flex {
    flex-direction: column;
    gap: 0.75rem;
  }
  #documentPreviewModal #pdf-viewer {
    height: calc(100dvh - 200px);
  }
  #documentPreviewModal .form-check {
    margin-bottom: 0.5rem;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Alignement des icônes du header prof */
.navbar .d-flex.position-fixed.end-0 {
  align-items: center;
  gap: 0;
}

.navbar .d-flex.position-fixed.end-0 .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  margin-right: 1.5rem !important;
}

.navbar .d-flex.position-fixed.end-0 .nav-link .material-symbols-outlined {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .d-flex.position-fixed.end-0 #teacherAvatarHeader {
  display: block;
  margin: 0;
}

/* ============================================
   ACCESSIBILITÉ - Styles complets
   ============================================ */

/* --- Styles pour les options d'accessibilité --- */
.accessibility-option {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transition: all 0.3s ease;
}

.accessibility-option:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.accessibility-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.accessibility-title {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.accessibility-desc {
  font-size: 0.8rem;
  color: #666;
}

/* ============================================
   1. Mode Dyslexique - Police OpenDyslexic
   ============================================ */

body.dyslexic-mode {
  font-family: 'OpenDyslexic', 'Lato', sans-serif !important;
}

body.dyslexic-mode h1,
body.dyslexic-mode h2,
body.dyslexic-mode h3,
body.dyslexic-mode h4,
body.dyslexic-mode h5,
body.dyslexic-mode h6,
body.dyslexic-mode p,
body.dyslexic-mode span:not(.material-symbols-outlined),
body.dyslexic-mode a,
body.dyslexic-mode li,
body.dyslexic-mode td,
body.dyslexic-mode th,
body.dyslexic-mode label,
body.dyslexic-mode input,
body.dyslexic-mode textarea,
body.dyslexic-mode select,
body.dyslexic-mode button,
body.dyslexic-mode .form-control,
body.dyslexic-mode .form-select,
body.dyslexic-mode .btn,
body.dyslexic-mode .nav-link,
body.dyslexic-mode .card-body,
body.dyslexic-mode .modal-body,
body.dyslexic-mode .modal-title,
body.dyslexic-mode .alert,
body.dyslexic-mode titre,
body.dyslexic-mode small,
body.dyslexic-mode strong,
body.dyslexic-mode b,
body.dyslexic-mode div:not(.material-symbols-outlined) {
  font-family: 'OpenDyslexic', 'Lato', sans-serif !important;
}

body.dyslexic-mode .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

body.dyslexic-mode .fa,
body.dyslexic-mode .fas,
body.dyslexic-mode .far,
body.dyslexic-mode .fab,
body.dyslexic-mode .fa-solid,
body.dyslexic-mode .fa-regular,
body.dyslexic-mode .fa-brands,
body.dyslexic-mode i[class*="fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
  font-weight: 900;
}

body.dyslexic-mode #titremenu {
  font-family: "Square Peg", cursive !important;
}

/* ============================================
   2. Taille du texte (via CSS custom property)
   ============================================ */

body {
  --accessibility-font-size: 100%;
}

body.font-size-80 { --accessibility-font-size: 80%; font-size: 80% !important; }
body.font-size-90 { --accessibility-font-size: 90%; font-size: 90% !important; }
body.font-size-100 { --accessibility-font-size: 100%; }
body.font-size-110 { --accessibility-font-size: 110%; font-size: 110% !important; }
body.font-size-120 { --accessibility-font-size: 120%; font-size: 120% !important; }
body.font-size-130 { --accessibility-font-size: 130%; font-size: 130% !important; }
body.font-size-140 { --accessibility-font-size: 140%; font-size: 140% !important; }
body.font-size-150 { --accessibility-font-size: 150%; font-size: 150% !important; }

/* ============================================
   3. Espacement du texte
   ============================================ */

body.spacing-1 p, body.spacing-1 li, body.spacing-1 td, body.spacing-1 th,
body.spacing-1 label, body.spacing-1 span, body.spacing-1 a, body.spacing-1 div {
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
  line-height: 1.8 !important;
}

body.spacing-2 p, body.spacing-2 li, body.spacing-2 td, body.spacing-2 th,
body.spacing-2 label, body.spacing-2 span, body.spacing-2 a, body.spacing-2 div {
  letter-spacing: 0.1em !important;
  word-spacing: 0.2em !important;
  line-height: 2 !important;
}

body.spacing-3 p, body.spacing-3 li, body.spacing-3 td, body.spacing-3 th,
body.spacing-3 label, body.spacing-3 span, body.spacing-3 a, body.spacing-3 div {
  letter-spacing: 0.15em !important;
  word-spacing: 0.3em !important;
  line-height: 2.2 !important;
}

/* ============================================
   4. Contraste élevé
   ============================================ */

body.high-contrast {
  background-color: #000 !important;
  color: #fff !important;
}

body.high-contrast *:not(.material-symbols-outlined):not([class*="fa-"]):not(i) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

body.high-contrast .btn,
body.high-contrast button {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

body.high-contrast .btn:hover,
body.high-contrast button:hover {
  background-color: #ffff00 !important;
  color: #000 !important;
}

body.high-contrast img {
  filter: grayscale(100%) contrast(1.2);
}

body.high-contrast .form-control,
body.high-contrast .form-select {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* ============================================
   5. Mode sombre - COMPLET
   ============================================ */

body.dark-mode {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Variables CSS pour le mode sombre */
body.dark-mode {
  --dm-bg-primary: #0f172a;
  --dm-bg-secondary: #1e293b;
  --dm-bg-tertiary: #334155;
  --dm-bg-card: #1e293b;
  --dm-text-primary: #f1f5f9;
  --dm-text-secondary: #94a3b8;
  --dm-text-muted: #64748b;
  --dm-border: #334155;
  --dm-accent: #60a5fa;
}

/* Navbar et header */
body.dark-mode .navbar,
body.dark-mode .navbarPC,
body.dark-mode .navbar-light,
body.dark-mode .bg-light {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .material-symbols-outlined {
  color: #e2e8f0 !important;
}

body.dark-mode #titremenu {
  color: #94a3b8 !important;
}

/* Sidebar */
body.dark-mode #sidebar {
  background-color: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-color: #334155 !important;
}

body.dark-mode #sidebar .nav-link {
  color: #94a3b8 !important;
}

body.dark-mode #sidebar li.active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
}

body.dark-mode #sidebar li.active a,
body.dark-mode #sidebar li.active small {
  color: white !important;
}

/* Fonds et backgrounds */
body.dark-mode .bg-white,
body.dark-mode .bg-light {
  background-color: #1e293b !important;
}

body.dark-mode .dots-page {
  opacity: 0.1 !important;
}

body.dark-mode .background-bulle_gauche,
body.dark-mode .background-bulle_droite {
  opacity: 0.15 !important;
  filter: hue-rotate(180deg) brightness(0.5) !important;
}

/* Cards et conteneurs */
body.dark-mode .card,
body.dark-mode .accordeon,
body.dark-mode .modal-content {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

body.dark-mode .card-header,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .card-body,
body.dark-mode .modal-body {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

body.dark-mode .card-title,
body.dark-mode .modal-title {
  color: #f1f5f9 !important;
}

/* Accessibilité options */
body.dark-mode .accessibility-option {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: #475569 !important;
}

body.dark-mode .accessibility-title {
  color: #f1f5f9 !important;
}

body.dark-mode .accessibility-desc {
  color: #94a3b8 !important;
}

/* Formulaires */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

body.dark-mode .form-floating > label {
  color: #94a3b8 !important;
}

body.dark-mode .form-check-label {
  color: #e2e8f0 !important;
}

/* Textes */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #f1f5f9 !important;
}

body.dark-mode p,
body.dark-mode span:not(.material-symbols-outlined):not([class*="fa-"]),
body.dark-mode div,
body.dark-mode label {
  color: #e2e8f0;
}

body.dark-mode .text-muted,
body.dark-mode small,
body.dark-mode .text-secondary {
  color: #94a3b8 !important;
}

body.dark-mode .text-dark {
  color: #e2e8f0 !important;
}

/* Liens */
body.dark-mode a:not(.btn):not(.nav-link) {
  color: #60a5fa !important;
}

body.dark-mode a:not(.btn):not(.nav-link):hover {
  color: #93c5fd !important;
}

/* Boutons */
body.dark-mode .btn-outline-secondary {
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .btn-light {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

/* Accordéons */
body.dark-mode .accordeon_btn,
body.dark-mode .accordeon_btn h5,
body.dark-mode .accordeon_btn h6 {
  color: #e2e8f0 !important;
}

body.dark-mode .accordion-button {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: #334155 !important;
  color: #60a5fa !important;
}

body.dark-mode .accordion-body {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

body.dark-mode .accordion-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Badges */
body.dark-mode .badge.bg-secondary {
  background-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .badge.bg-light {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Tables */
body.dark-mode table,
body.dark-mode .table {
  color: #e2e8f0 !important;
}

body.dark-mode .table > :not(caption) > * > * {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #243447 !important;
}

body.dark-mode .table-hover > tbody > tr:hover > * {
  background-color: #334155 !important;
}

/* Listes */
body.dark-mode .list-group-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .dropdown-item {
  color: #e2e8f0 !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: #334155 !important;
}

/* Alerts */
body.dark-mode .alert {
  border-color: #334155 !important;
}

body.dark-mode .alert-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}

body.dark-mode .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
}

body.dark-mode .alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
}

body.dark-mode .alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

/* Popovers et tooltips */
body.dark-mode .popover {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .popover-body {
  color: #e2e8f0 !important;
}

body.dark-mode .tooltip-inner {
  background-color: #334155 !important;
}

/* Progress bars */
body.dark-mode .progress {
  background-color: #334155 !important;
}

/* Dividers et borders */
body.dark-mode hr {
  border-color: #334155 !important;
  opacity: 1;
}

body.dark-mode .border,
body.dark-mode [class*="border-"] {
  border-color: #334155 !important;
}

/* Shadows */
body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-lg,
body.dark-mode .ombre {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Sliders/ranges */
body.dark-mode .form-range::-webkit-slider-runnable-track {
  background-color: #475569 !important;
}

/* Calendrier */
body.dark-mode .calendar-container,
body.dark-mode .calendar-container-modal {
  background-color: #1e293b !important;
}

body.dark-mode .calendar-header .fa {
  color: #94a3b8 !important;
}

body.dark-mode .calendar-days {
  color: #94a3b8 !important;
}

body.dark-mode .day {
  color: #e2e8f0 !important;
}

body.dark-mode .today {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: #3b82f6 !important;
}

/* Timeline */
body.dark-mode .timeline-date-group {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .timeline-date-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: #475569 !important;
}

body.dark-mode .timeline-item {
  background-color: #243447 !important;
  border-color: #334155 !important;
}

body.dark-mode .timeline-item:hover {
  background-color: #334155 !important;
}

body.dark-mode .timeline-item-title {
  color: #f1f5f9 !important;
}

/* Documents */
body.dark-mode .document-preview,
body.dark-mode .last-read-document {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .last-read-document:hover {
  background-color: #243447 !important;
}

body.dark-mode .last-read-document h6 {
  color: #f1f5f9 !important;
}

/* Document items dans le modal de type de documents */
body.dark-mode .document-item {
  background-color: #243447 !important;
  border-color: #334155 !important;
}

body.dark-mode .document-item h6 {
  color: #f1f5f9 !important;
}

body.dark-mode .document-item.document-unavailable {
  background: rgba(255, 193, 7, 0.1) !important;
  border: 1px dashed rgba(255, 193, 7, 0.4) !important;
}

body.dark-mode .document-item.document-unavailable h6 {
  color: #cbd5e1 !important;
}

body.dark-mode .unavailable-badge {
  background: rgba(255, 193, 7, 0.2) !important;
  border-color: rgba(255, 193, 7, 0.5) !important;
}

body.dark-mode .unavailable-badge i,
body.dark-mode .unavailable-badge small {
  color: #ffc107 !important;
}

body.dark-mode .unavailable-badge-inline {
  background: rgba(255, 193, 7, 0.2) !important;
  border-color: rgba(255, 193, 7, 0.5) !important;
}

body.dark-mode .unavailable-badge-inline i,
body.dark-mode .unavailable-badge-inline small {
  color: #ffc107 !important;
}

/* Formations et matières */
body.dark-mode .formation-progress {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .formation-progress h6 {
  color: #e2e8f0 !important;
}

body.dark-mode .subject-accordion-card {
  background-color: #1e293b !important;
}

body.dark-mode .subject-accordion-preview {
  background-color: #243447 !important;
  border-color: #334155 !important;
}

body.dark-mode .subject-accordion-body {
  background-color: #1e293b !important;
}

/* Entretiens */
body.dark-mode .collective-card,
body.dark-mode .my-booked-card,
body.dark-mode .my-past-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .collective-card.registered {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
  border-color: #10b981 !important;
}

body.dark-mode .cc-teacher {
  color: #e2e8f0 !important;
}

body.dark-mode .cc-time {
  color: #94a3b8 !important;
}

body.dark-mode .cc-spots {
  color: #94a3b8 !important;
}

body.dark-mode .collective-empty,
body.dark-mode .collective-error {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* Modal entretien */
.interview-modal-content {
  border-radius: 16px;
  border: none;
  overflow: hidden;
  background: #ffffff;
  color: #1e293b;
}

.interview-modal-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
}

.interview-modal-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.interview-modal-subject {
  color: #10b981;
  font-weight: 600;
}

.interview-modal-details {
  background: #f8fafc;
  border-radius: 12px;
  color: #334155;
}

.interview-modal-details strong {
  color: #1e293b;
}

.interview-modal-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 10px;
  font-weight: 600;
}

.interview-modal-btn:hover {
  color: white;
  opacity: 0.9;
}

body.dark-mode .interview-modal-content {
  background: #1e293b;
  color: #e2e8f0;
}

body.dark-mode .interview-modal-details {
  background: #0f172a;
  color: #cbd5e1;
}

body.dark-mode .interview-modal-details strong {
  color: #f1f5f9;
}

body.dark-mode .interview-modal-details .text-muted {
  color: #64748b !important;
}

body.dark-mode .interview-modal-content .text-muted {
  color: #94a3b8 !important;
}

body.dark-mode .my-booked-section {
  background: linear-gradient(135deg, #422006 0%, #713f12 100%) !important;
  border-color: #a16207 !important;
}

body.dark-mode .my-past-section {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  border-color: #4338ca !important;
}

/* Interview items - cartes d'entretiens */
body.dark-mode .interview-item,
body.dark-mode .indiv-interview-item {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
  border-color: #475569 !important;
}

body.dark-mode .interview-item:hover,
body.dark-mode .indiv-interview-item:hover {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.95) 100%) !important;
  border-color: #667eea !important;
}

body.dark-mode .interview-item.is-today {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
}

body.dark-mode .interview-item.is-soon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%) !important;
}

/* Entretiens passés */
body.dark-mode .past-interview-card {
  background: linear-gradient(135deg, #1e293b 0%, #243447 100%) !important;
  border-color: #334155 !important;
}

body.dark-mode .past-interview-card:hover {
  background: linear-gradient(135deg, #243447 0%, #334155 100%) !important;
}

body.dark-mode .past-interview-subject {
  color: #f1f5f9 !important;
}

body.dark-mode .past-interview-time,
body.dark-mode .past-interview-subtitle {
  color: #94a3b8 !important;
}

/* Filtres entretiens passés */
body.dark-mode .past-interviews-search {
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .past-interviews-search input {
  color: #e2e8f0 !important;
}

body.dark-mode .past-interviews-search input::placeholder {
  color: #64748b !important;
}

body.dark-mode .past-interviews-type-filters .filter-btn {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
}

body.dark-mode .past-interviews-type-filters .filter-btn:hover {
  border-color: #667eea !important;
  color: #a5b4fc !important;
  background: rgba(102, 126, 234, 0.1) !important;
}

/* Section vide */
body.dark-mode .empty-past-interviews {
  color: #64748b !important;
}

/* Quota atteint - message vert */
body.dark-mode .alert-success,
body.dark-mode .indiv-quota-reached {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
  border-color: #22c55e !important;
  color: #bbf7d0 !important;
}

body.dark-mode .alert-success i,
body.dark-mode .indiv-quota-reached i {
  color: #4ade80 !important;
}

/* Texte "Aucun entretien collectif programmé" */
body.dark-mode .collective-empty-text,
body.dark-mode .no-interview-text {
  color: #94a3b8 !important;
}

/* Textes dans les cartes d'entretiens */
body.dark-mode .interview-subject {
  color: #f1f5f9 !important;
}

body.dark-mode .interview-subject i {
  color: #a5b4fc !important;
}

body.dark-mode .interview-formation,
body.dark-mode .interview-datetime,
body.dark-mode .interview-teacher,
body.dark-mode .interview-time {
  color: #94a3b8 !important;
}

body.dark-mode .interview-datetime i,
body.dark-mode .interview-teacher i {
  color: #60a5fa !important;
}

/* Section "Mes entretiens passés" header */
body.dark-mode .past-section-header,
body.dark-mode .my-booked-header,
body.dark-mode .my-past-header {
  color: #e2e8f0 !important;
}

body.dark-mode .past-section-header i,
body.dark-mode .my-booked-header i,
body.dark-mode .my-past-header i {
  color: #60a5fa !important;
}

/* Container de la section individuelle */
body.dark-mode .individual-section {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Header de la matière (Mathématiques, etc.) */
body.dark-mode .indiv-header {
  background: transparent !important;
}

body.dark-mode .indiv-subject {
  color: #e2e8f0 !important;
  background: #1e293b !important;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

body.dark-mode .indiv-quota {
  background: #166534 !important;
  color: #bbf7d0 !important;
}

/* Bouton "pas de replay" */
body.dark-mode .btn-past-no-replay {
  background: rgba(71, 85, 105, 0.3) !important;
  color: #64748b !important;
}

body.dark-mode .btn-past-replay {
  background: rgba(102, 126, 234, 0.2) !important;
}

body.dark-mode .btn-past-processing {
  background: rgba(217, 119, 6, 0.2) !important;
}

/* Devoirs pas à pas */
body.dark-mode .modern-devoir-pas-a-pas {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .modern-devoir-info {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.dark-mode .modern-devoir-info * {
  border-color: #334155 !important;
}

body.dark-mode .modern-devoir-body {
  background-color: #1e293b !important;
}

/* Description du devoir */
body.dark-mode .devoir-description-modern {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}

body.dark-mode .devoir-description-modern .description-icon,
body.dark-mode .devoir-description-modern span.material-symbols-outlined {
  color: #60a5fa !important;
}

body.dark-mode .devoir-description-modern .description-text,
body.dark-mode .devoir-description-text,
body.dark-mode .devoir-description-modern div {
  color: #e2e8f0 !important;
}

/* Documents de l'étude row */
body.dark-mode .documents-col,
body.dark-mode .devoir-documents-row {
  background: transparent !important;
}

/* Cartes de ressources/documents */
body.dark-mode .modern-resource-card {
  background: #1e293b !important;
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .modern-resource-card:hover {
  background: #243447 !important;
  background-color: #243447 !important;
  border-color: #60a5fa !important;
}

body.dark-mode .modern-resource-card .resource-info {
  color: #60a5fa !important;
}

body.dark-mode .modern-resource-card .resource-text {
  color: #94a3b8 !important;
}

body.dark-mode .modern-resource-card .doc-number-badge {
  background: rgba(96, 165, 250, 0.9) !important;
}

/* Thumbnail des ressources PDF - garder le fond blanc pour les aperçus */
body.dark-mode .resource-thumbnail-compact {
  background: white !important;
  border-color: #475569 !important;
}

body.dark-mode .resource-thumbnail-compact img {
  opacity: 1;
}

body.dark-mode .resource-fallback {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
}

body.dark-mode .resource-fallback .material-symbols-outlined {
  color: white !important;
}

/* Documents header */
body.dark-mode .documents-header {
  color: #94a3b8 !important;
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .documents-header .material-symbols-outlined {
  color: #60a5fa !important;
}

/* Accordéon des sections */
body.dark-mode .modern-sections-accordion .accordion-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .modern-sections-accordion .accordion-button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

body.dark-mode .modern-sections-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #243447 0%, #1e293b 100%) !important;
  color: #60a5fa !important;
}

body.dark-mode .modern-sections-accordion .accordion-button::after {
  filter: invert(1) brightness(0.7);
}

body.dark-mode .modern-sections-accordion .accordion-body {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

/* En-tête des sections */
body.dark-mode .sections-header {
  color: #94a3b8 !important;
}

body.dark-mode .sections-header span {
  color: #60a5fa !important;
}

/* Badges de dates et intervenants */
body.dark-mode .devoir-intervenant-badge,
body.dark-mode .devoir-date-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Documents de l'étude */
body.dark-mode .documents-section-header,
body.dark-mode .documents-header {
  color: #94a3b8 !important;
}

body.dark-mode .documents-header span {
  color: #60a5fa !important;
}

body.dark-mode .modern-documents-section {
  background: transparent !important;
}

/* Section dates */
body.dark-mode .section-dates-badge {
  background: #334155 !important;
  color: #f1f5f9 !important;
}

/* Posts dans les sections Devoirs pas à pas - bordures plus subtiles */
body.dark-mode [id^="section-posts-"] > .rounded {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode [id^="section-posts-"] > .rounded:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Garder un léger indicateur de couleur sur la bordure gauche uniquement */
body.dark-mode [id^="section-posts-"] > .rounded {
  border-width: 1px !important;
  border-left-width: 3px !important;
}

/* Badges section (FERME, OUVERT, etc.) */
body.dark-mode .badge.bg-danger {
  background-color: #dc2626 !important;
}

body.dark-mode .badge.bg-success {
  background-color: #16a34a !important;
}

/* Textes mutés */
body.dark-mode .text-muted {
  color: #64748b !important;
}

/* Section title générique */
body.dark-mode .section-title-bar {
  color: #e2e8f0 !important;
}

/* Alert info en mode sombre */
body.dark-mode .alert-info {
  background-color: #1e3a5f !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

body.dark-mode .alert-info i {
  color: #60a5fa !important;
}

body.dark-mode .modern-resource-card {
  background-color: #243447 !important;
  border-color: #475569 !important;
}

/* Cadres Mon Compte */
body.dark-mode .cadreInput {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .cadreInput .form-label {
  color: #94a3b8 !important;
}

body.dark-mode .innershadow {
  box-shadow: inset 1px 1px 6px #0f172a !important;
}

/* Magazines */
body.dark-mode .magazine-card {
  background-color: #1e293b !important;
}

body.dark-mode .sitographie-container {
  scrollbar-color: #475569 transparent;
}

/* Onglets formations/matières */
body.dark-mode .btn-formation-devoir,
body.dark-mode .btn-formation-interview,
body.dark-mode .btn-formation-discussion,
body.dark-mode .btn-formation-main {
  color: #94a3b8 !important;
  background-color: transparent !important;
}

body.dark-mode .btn-formation-devoir.active,
body.dark-mode .btn-formation-interview.active,
body.dark-mode .btn-formation-discussion.active {
  background-color: #1e293b !important;
  color: #fbbf24 !important;
  border-color: #334155 !important;
}

body.dark-mode #MenuMatieresProfDevoir {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode #MenuMatieresDiscussion,
body.dark-mode #MenuMatieresDevoirsPasAPas,
body.dark-mode #MenuMatieresEntretiens {
  background-color: transparent !important;
  border: none !important;
}

body.dark-mode .btn-matiere-devoir,
body.dark-mode .btn-matiere-discussion,
body.dark-mode .btn-matiere-interview {
  background-color: #243447 !important;
  border-color: #475569 !important;
  color: #60a5fa !important;
}

/* PWA card */
body.dark-mode #usersetting .gradient-card {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%) !important;
}

/* Usersetting accordéons en mode sombre */
body.dark-mode #usersetting .accordeon {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #usersetting .accordeon_btn h6 {
  color: #f1f5f9 !important;
}

body.dark-mode #usersetting .accordeon_btn i.fa-solid:first-child,
body.dark-mode #usersetting .accordeon_btn i.fas:first-child {
  background: #334155 !important;
  color: #60a5fa !important;
}

body.dark-mode #usersetting .accordeon.open .accordeon_btn i.fa-solid:first-child,
body.dark-mode #usersetting .accordeon.open .accordeon_btn i.fas:first-child {
  background: #60a5fa !important;
  color: #0f172a !important;
}

body.dark-mode #usersetting .accordeon_btn i.fa-caret-down {
  background: #334155 !important;
  color: #94a3b8 !important;
}

body.dark-mode #usersetting .accordeon.open .accordeon_btn i.fa-caret-down {
  background: #60a5fa !important;
  color: #0f172a !important;
}

body.dark-mode #usersetting .accordeon > div:not(.accordeon_btn) {
  border-top-color: #334155 !important;
  background: #0f172a !important;
}

body.dark-mode #usersetting .cadreInput {
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode #usersetting .cadreInput:hover {
  border-color: #60a5fa !important;
  background: #243447 !important;
}

body.dark-mode #usersetting .cadreInput .form-label {
  color: #e2e8f0 !important;
}

body.dark-mode #usersetting .form-floating > .form-control,
body.dark-mode #usersetting .form-control {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.dark-mode #usersetting .form-floating > label {
  color: #94a3b8 !important;
}

/* Alert secondary (Démarrage personnalisé) */
body.dark-mode #usersetting .alert-secondary {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

body.dark-mode #usersetting .alert-secondary i {
  color: #60a5fa !important;
}

body.dark-mode #usersetting .alert-secondary .fw-bold {
  color: #f1f5f9 !important;
}

body.dark-mode #usersetting .alert-secondary small {
  color: #94a3b8 !important;
}

/* Badges de formation dans le report */
body.dark-mode #usersetting .badge.bg-secondary {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

/* Input date dans le report */
body.dark-mode #usersetting input[type="date"] {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.dark-mode #usersetting input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* ============================================
   Waveform / Equalizer audio - garder les couleurs en mode sombre
   ============================================ */

/* Barres du waveform - dégradé coloré */
body.dark-mode .waveform-bar,
body.dark-mode .mobile-waveform-bar {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%) !important;
}

body.dark-mode .waveform-container:hover .waveform-bar,
body.dark-mode .mobile-waveform-container:hover .mobile-waveform-bar {
  background: linear-gradient(180deg, #818cf8 0%, #a855f7 100%) !important;
}

/* Barres de l'icône mobile */
body.dark-mode .mobile-icon-bar {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%) !important;
}

/* Container du waveform - fond légèrement plus sombre */
body.dark-mode .waveform-container,
body.dark-mode .mobile-waveform-container {
  background: #1e293b !important;
}

/* Progress bar - garder le dégradé visible */
body.dark-mode .waveform-progress,
body.dark-mode .mobile-waveform-progress {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.5) 0%, rgba(168, 85, 247, 0.5) 100%) !important;
}

/* Scrollbars en mode sombre */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1e293b;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Firefox scrollbars */
body.dark-mode * {
  scrollbar-color: #475569 #1e293b;
}

/* Calendrier timeline (cartes) */
body.dark-mode .timeline-card-item {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .timeline-card-item h6,
body.dark-mode .timeline-card-item .marquee-text {
  color: #f1f5f9 !important;
}

body.dark-mode .timeline-card-item .badge.bg-warning {
  background-color: #ca8a04 !important;
  color: #fef9c3 !important;
}

body.dark-mode .timeline-card-item .badge.bg-warning.text-dark {
  color: #fef9c3 !important;
}

body.dark-mode .timeline-card-item span[style*="color: #6b7280"],
body.dark-mode .timeline-card-item span[style*="color: #9ca3af"] {
  color: #94a3b8 !important;
}

/* ============================================
   5.5 Mode sombre - Discussion / Questions-Réponses
   ============================================ */

/* Container principal de la discussion */
body.dark-mode .discussion-container {
  background: #0f172a !important;
}

/* Bulles de messages */
body.dark-mode .message-bubble {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .message-bubble:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .question-bubble {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-left-color: #64748b !important;
}

body.dark-mode .answer-bubble {
  background: #1e3a2f !important;
  color: #e2e8f0 !important;
  border-left-color: #22c55e !important;
}

/* Textes dans les messages */
body.dark-mode .message-content {
  color: #e2e8f0 !important;
}

body.dark-mode .message-content p {
  color: #e2e8f0 !important;
}

body.dark-mode .message-author strong {
  color: #f1f5f9 !important;
}

body.dark-mode .message-role {
  background: #334155 !important;
  color: #94a3b8 !important;
}

body.dark-mode .message-time {
  color: #64748b !important;
}

/* Boutons d'action dans les messages */
body.dark-mode .message-actions .btn {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
}

body.dark-mode .message-actions .btn:hover {
  background: #475569 !important;
  color: #e2e8f0 !important;
}

/* Zone de saisie de question */
body.dark-mode .question-input-area {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .question-input-area .form-control {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .question-input-area .form-control::placeholder {
  color: #64748b !important;
}

body.dark-mode .question-input-area .form-control:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

/* Bouton d'envoi */
body.dark-mode .send-button {
  background: #3b82f6 !important;
}

body.dark-mode .send-button:hover {
  background: #2563eb !important;
}

/* Zone de réponse / nouvelle question */
body.dark-mode #replyArea,
body.dark-mode #newQuestionArea {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-top-color: #3b82f6 !important;
}

body.dark-mode #replyArea .form-control,
body.dark-mode #newQuestionArea .form-control,
body.dark-mode #questionContent {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.dark-mode #replyArea .form-control:focus,
body.dark-mode #newQuestionArea .form-control:focus,
body.dark-mode #questionContent:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

/* Indicateurs de lecture */
body.dark-mode .read-indicators {
  border-top-color: #334155 !important;
}

body.dark-mode .read-indicators .badge.bg-success {
  background: #166534 !important;
  color: #bbf7d0 !important;
  border-color: #22c55e !important;
}

body.dark-mode .read-indicators .badge.bg-warning {
  background: #854d0e !important;
  color: #fef08a !important;
  border-color: #eab308 !important;
}

/* Avatar circle */
body.dark-mode .avatar-circle {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Texte de l'aide sous le textarea */
body.dark-mode .text-muted {
  color: #64748b !important;
}

/* Bouton joindre PDF */
body.dark-mode .btn-link {
  color: #60a5fa !important;
}

body.dark-mode .btn-link:hover {
  color: #93c5fd !important;
}

/* ============================================
   6. Surligner les liens
   ============================================ */

body.highlight-links a:not(.btn):not(.nav-link) {
  background-color: #ffff00 !important;
  color: #000 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  text-decoration: underline !important;
}

body.highlight-links a:not(.btn):not(.nav-link):hover {
  background-color: #ffd700 !important;
}

/* ============================================
   7. Réduire les animations
   ============================================ */

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ============================================
   8. Focus visible renforcé
   ============================================ */

body.focus-visible *:focus {
  outline: 3px solid #ff6b00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(255, 107, 0, 0.3) !important;
}

body.focus-visible *:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================
   9. Règle de lecture
   ============================================ */

#reading-ruler {
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6b00, #ff0080, #ff6b00);
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
  display: none;
}

body.reading-ruler-active #reading-ruler {
  display: block;
}

/* ============================================
   10. Masque de lecture
   ============================================ */

#reading-mask-top,
#reading-mask-bottom {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 99998;
  display: none;
}

#reading-mask-top {
  top: 0;
}

#reading-mask-bottom {
  bottom: 0;
}

body.reading-mask-active #reading-mask-top,
body.reading-mask-active #reading-mask-bottom {
  display: block;
}

/* ============================================
   11. Bouton de lecture vocale (flottant)
   ============================================ */

#tts-button {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(71, 118, 230, 0.4);
  cursor: pointer;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

#tts-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(71, 118, 230, 0.6);
}

#tts-button.speaking {
  animation: pulse-tts 1s infinite;
}

@keyframes pulse-tts {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

body.tts-active #tts-button {
  display: flex;
}