/* Style pour le mode clair par défaut */
body.light-mode {
  background-color: #f4f4f9;
  color: #333;
}

/* Style pour le mode sombre */
body.dark-mode {
  background-color: #1e1e2e;
  color: #fff;
}

body.light-mode .text-muted {
  color: #6c757d !important;
}

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

/* Styles généraux pour les deux modes */
.rounded-box {
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Mode clair : effet de dégradé, couleurs plus légères */
body.light-mode .rounded-box {
  background: linear-gradient(135deg, #ffffff, #eaeaea);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Mode sombre : effet de dégradé sombre et ombres plus prononcées */
body.dark-mode .rounded-box {
  background: linear-gradient(135deg, #3c3c54, #26263e);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Effet de hover sur les box pour plus d'interactivité */
.rounded-box:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  z-index: 2; /* Ajoutez un z-index modéré pour éviter les conflits */
}

/* Style pour les titres */
h2, h4 {
  font-weight: bold;
}

/* Badges et boutons dans les deux modes */
.badge {
  background-color: #00bcd4;
  font-size: 1rem;
}

/* Style des boutons */
.btn-primary {
  background-color: #ff5722;
  border: none;
}

/* Hover sur les boutons */
.btn-primary:hover {
  background-color: #e64a19;
}

/* Style du bouton pour basculer entre clair/sombre */
.toggle-theme {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #00bcd4;
  border: none;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  z-index: 1000;
}

/* Bouton en mode sombre */
body.dark-mode .toggle-theme {
  background-color: #ff5722;
}

/* Styles de la navbar pour le mode clair */
body.light-mode .navbar {
  background-color: #f8f9fa; /* Couleur de fond claire */
}
body.light-mode .navbar .nav-link,
body.light-mode .navbar .navbar-brand {
  color: #333; /* Texte sombre */
}
body.light-mode .navbar .nav-link:hover,
body.light-mode .navbar .navbar-brand:hover {
  color: #000; /* Texte légèrement plus sombre au survol */
}
body.light-mode .navbar .navbar-toggler-icon {
  filter: invert(0); /* Icône du toggler en noir */
}

/* Styles de la navbar pour le mode sombre */
body.dark-mode .navbar {
  background-color: #343a40; /* Couleur de fond sombre */
}
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .navbar-brand {
  color: #fff; /* Texte clair */
}
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .navbar-brand:hover {
  color: #ccc; /* Texte légèrement plus clair au survol */
}
body.dark-mode .navbar .navbar-toggler-icon {
  filter: invert(1); /* Icône du toggler en blanc */
}

/* Styles du menu déroulant en mode sombre */
body.dark-mode .navbar .dropdown-menu {
  background-color: #343a40;
}
body.dark-mode .navbar .dropdown-menu .dropdown-item {
  color: #fff;
}
body.dark-mode .navbar .dropdown-menu .dropdown-item:hover {
  background-color: #495057;
}

/* Ajustements pour le formulaire de recherche en mode sombre */
body.dark-mode .navbar .form-control {
  background-color: #495057;
  color: #fff;
  border-color: #6c757d;
}
body.dark-mode .navbar .form-control::placeholder {
  color: #ced4da;
}
body.dark-mode .navbar .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

/* Ajustements pour le formulaire de recherche en mode clair */
body.light-mode .navbar .form-control {
  background-color: #fff;
  color: #333;
  border-color: #ced4da;
}
body.light-mode .navbar .form-control::placeholder {
  color: #6c757d;
}

/* ... vos styles existants ... */

/* Styles personnalisés pour l'interrupteur */
.form-switch .form-check-input {
  width: 50px;
  height: 25px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  -webkit-appearance: none;
  margin-left: 0;
}

.form-switch .form-check-input:focus {
  outline: none;
  box-shadow: none;
}

.form-switch .form-check-input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.form-switch .form-check-input:checked {
  background-color: #00bcd4;
}

.form-switch .form-check-input:checked::before {
  transform: translateX(25px);
}

body.dark-mode .form-switch .form-check-input:checked {
  background-color: #ff5722;
}

body.dark-mode .form-switch .form-check-input:checked::before {
  background-color: #fff;
}

.form-switch .form-check-label {
  margin-left: 0.5em;
  user-select: none;
  color: inherit;
}

/* Médias queries pour mobile */
@media (max-width: 576px) {
  .form-switch .form-check-input {
    width: 40px;
    height: 20px;
  }

  .form-switch .form-check-input::before {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
  }

  .form-switch .form-check-input:checked::before {
    transform: translateX(20px);
  }

  .form-switch .form-check-label {
    font-size: 0.9rem;
  }
}

/* Styles des cartes en mode clair */
body.light-mode .card {
  background-color: #fff;
  color: #333;
}

body.light-mode .card .card-title,
body.light-mode .card .card-text,
body.light-mode .card .card-body {
  color: #333;
}

body.light-mode .card .text-muted {
  color: #6c757d;
}

/* Styles des cartes en mode sombre */
body.dark-mode .card {
  background-color: #2c2c2c;
  color: #fff;
  border-color: #444;
}

body.dark-mode .card .card-title,
body.dark-mode .card .card-text,
body.dark-mode .card .card-body {
  color: #fff;
}

body.dark-mode .card .text-muted {
  color: #fff;
}

/* Styles pour le bouton en mode sombre */
body.dark-mode .card a.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

body.dark-mode .card a.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Optionnel : Ajuster l'ombre des cartes */
body.light-mode .card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Optionnel : Ajuster la luminosité des images en mode sombre */
body.dark-mode .card-img-top {
  filter: brightness(0.9);
}

/* --- Styles généraux pour les deux modes --- */

/* Transition pour un effet fluide lors du changement de mode */
body {
  transition: all 0.2s ease;
}

/* Styles pour les titres */
h1 {
  font-weight: bold;
}

/* Styles pour les tables */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: inherit;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid;
}

/* --- Mode clair --- */
body.light-mode {
  background-color: #f4f4f9;
  color: #333;
}

body.light-mode .table {
  background-color: #fff;
}

body.light-mode .table th,
body.light-mode .table td {
  border-color: #dee2e6;
}

body.light-mode .table thead th {
  border-color: #dee2e6;
}

body.light-mode .form-control,
body.light-mode .form-select {
  background-color: #fff;
  color: #333;
  border: 1px solid #ced4da;
}

body.light-mode .form-check-input {
  background-color: #fff;
  border-color: #ced4da;
}

body.light-mode .form-check-label {
  color: #333;
}

body.light-mode .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

body.light-mode .btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* --- Mode sombre --- */
body.dark-mode {
  background-color: #1e1e2e;
  color: #fff;
}

body.dark-mode .table {
  background-color: #2c2c2c;
}

body.dark-mode .table th,
body.dark-mode .table td {
  border-color: #444;
}

body.dark-mode .table thead th {
  border-color: #444;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
  color: #ccc;
}

body.dark-mode .form-check-input {
  background-color: #333;
  border-color: #555;
}

body.dark-mode .form-check-input:checked {
  background-color: #007bff;
  border-color: #007bff;
}

body.dark-mode .form-check-label {
  color: #fff;
}

body.dark-mode .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

body.dark-mode .btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Liens à l'intérieur du tableau */
body.dark-mode .table a {
  color: #66afe9;
}

body.dark-mode .table a:hover {
  color: #a8d0f0;
}

/* Contrôles de pagination */
body.light-mode .pagination .page-link {
  background-color: #fff;
  color: #007bff;
  border: 1px solid #dee2e6;
}

body.dark-mode .pagination .page-link {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

body.dark-mode .pagination .page-link:hover {
  background-color: #444;
  color: #fff;
}

body.dark-mode .pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
}

/* Ajustements pour les titres et les labels */
body.dark-mode h1,
body.dark-mode label {
  color: #fff;
}

body.dark-mode .form-group label {
  color: #fff;
}

body.light-mode .form-group label {
  color: #333;
}

/* --- Mode clair --- */
body.light-mode .accordion-item {
  background-color: #fff;
  color: #212529;
}

body.light-mode .accordion-button {
  background-color: #fff;
  color: #212529;
}

body.light-mode .accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  color: #212529;
}

body.light-mode .accordion-button::after {
  filter: invert(0);
}

body.light-mode .accordion-body {
  background-color: #fff;
  color: #212529;
}

/* --- Mode sombre --- */
body.dark-mode .accordion-item {
  background-color: #343a40;
  color: #fff;
  border: 1px solid #454d55;
}

body.dark-mode .accordion-button {
  background-color: #343a40;
  color: #fff;
  border: none;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: #454d55;
  color: #fff;
}

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

body.dark-mode .accordion-body {
  background-color: #343a40;
  color: #fff;
}

/* --- Styles généraux --- */

/* Styles pour Bubulle */
.bubulle-container {
    border: 2px dashed;
    padding: 15px;
    border-radius: 8px;
}

.bubulle-image {
    width: 100px;
    height: auto;
    margin-right: 20px;
}

.bubulle-text {
    margin: 0;
    font-size: 16px;
}

/* --- Mode clair --- */
body.light-mode .bubulle-container {
    border-color: #ccc;
    background-color: #f9f9f9;
}

body.light-mode .bubulle-text {
    color: #333;
}

/* --- Mode sombre --- */
body.dark-mode .bubulle-container {
    border-color: #555;
    background-color: #2c2c2c;
}

body.dark-mode .bubulle-text {
    color: #fff;
}

/* Champs de formulaire en mode sombre */
body.dark-mode .form-control {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}

body.dark-mode .form-control::placeholder {
    color: #ccc;
}

body.dark-mode .form-label {
    color: #fff;
}

/* Boutons en mode sombre */
body.dark-mode .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

body.dark-mode .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

body.dark-mode .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

body.dark-mode .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Messages d'alerte en mode sombre */
body.dark-mode .alert {
    background-color: #2c2c2c;
    color: #fff;
    border-color: #444;
}

body.dark-mode .alert a {
    color: #66afe9;
}

body.dark-mode .alert a:hover {
    color: #a8d0f0;
}

/* --- Styles généraux pour le Trix Editor --- */

/* Taille minimale et styles de base */
.trix-editor {
    min-height: 200px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px;
    font-size: 1rem;
}

/* --- Mode clair --- */
body.light-mode .trix-editor {
    background-color: #fff;
    color: #212529;
}

body.light-mode .trix-toolbar {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
}

body.light-mode .trix-button-group .trix-button {
    color: #212529;
}

body.light-mode .trix-button-group .trix-button:hover {
    background-color: #e2e6ea;
}

/* --- Mode sombre --- */
body.dark-mode .trix-editor {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}

body.dark-mode .trix-toolbar {
    background-color: #444;
    border: 1px solid #555;
}

body.dark-mode .trix-button-group .trix-button {
    color: #fff;
}

body.dark-mode .trix-button-group .trix-button:hover {
    background-color: #555;
}

/* Placeholder en mode sombre */
body.dark-mode .trix-editor::placeholder {
    color: #ccc;
}

/* Icônes du Trix Editor en mode sombre */
body.dark-mode .trix-button svg {
    fill: #fff;
}

/* Ajustements pour les bordures actives */
body.dark-mode .trix-button--icon trix-button--state-active,
body.dark-mode .trix-button--icon trix-active {
    background-color: #666;
}

/* Ajustement des menus déroulants */
body.dark-mode .trix-dialog {
    background-color: #444;
    color: #fff;
    border: 1px solid #555;
}

body.dark-mode .trix-dialog input {
    background-color: #555;
    color: #fff;
    border: 1px solid #666;
}

/* --- Styles for Trix Editor Toolbar --- */

/* General styles */
.trix-toolbar {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px;
    background-color: #f8f9fa;
}

/* Toolbar buttons */
.trix-toolbar .trix-button {
    border: none;
    background: transparent;
    color: #333;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.trix-toolbar .trix-button:hover {
    background-color: #e2e6ea;
    color: #000;
}

.trix-toolbar .trix-button:disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* Dialogs (e.g., for inserting links) */
.trix-toolbar .trix-dialog {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px;
}

.trix-toolbar .trix-dialog input.trix-input {
    background-color: #fff;
    color: #212529;
    border: 1px solid #ced4da;
    padding: 5px;
    width: 100%;
    margin-bottom: 10px;
}

/* Dialog buttons */
.trix-toolbar .trix-dialog .trix-button--dialog {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
}

.trix-toolbar .trix-dialog .trix-button--dialog:hover {
    background-color: #0056b3;
}

/* --- Dark Mode Styles --- */
body.dark-mode .trix-toolbar {
    background-color: #333;
    border: 1px solid #555;
}

body.dark-mode .trix-toolbar .trix-button {
    color: #fff;
}

body.dark-mode .trix-toolbar .trix-button:hover {
    background-color: #555;
}

body.dark-mode .trix-toolbar .trix-button:disabled {
    color: #666;
}

body.dark-mode .trix-toolbar .trix-dialog {
    background-color: #444;
    border: 1px solid #666;
}

body.dark-mode .trix-toolbar .trix-dialog input.trix-input {
    background-color: #555;
    color: #fff;
    border: 1px solid #666;
}

body.dark-mode .trix-toolbar .trix-dialog .trix-button--dialog {
    background-color: #007bff;
}

body.dark-mode .trix-toolbar .trix-dialog .trix-button--dialog:hover {
    background-color: #0056b3;
}

/* SVG Icons */
body.dark-mode .trix-toolbar .trix-button svg {
    fill: #fff;
}

body.light-mode .trix-toolbar .trix-button svg {
    fill: #333;
}

/* --- Styles généraux pour les boutons du Trix Editor --- */
.trix-toolbar .trix-button {
    border: none;
    background: transparent;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Icônes des boutons en mode clair */
body.light-mode .trix-button--icon {
    /* Aucun filtre en mode clair */
}

/* Icônes des boutons en mode sombre */
body.dark-mode .trix-button--icon {
    filter: brightness(0) invert(1) grayscale(1);
}

/* --- Styles généraux pour le modal Bootstrap --- */

/* Modal backdrop (arrière-plan foncé lorsque le modal est ouvert) */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Contenu du modal */
.modal-content {
    background-color: #fff;
    color: #212529;
    border: none;
    border-radius: 0.3rem;
}

/* Titre du modal */
.modal-header .modal-title {
    color: #212529;
}

/* Bouton de fermeture */
.modal-header .btn-close {
    background: transparent;
    border: none;
    opacity: 0.5;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/* --- Styles pour le mode sombre --- */
body.dark-mode .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .modal-content {
    background-color: #343a40;
    color: #f8f9fa;
}

body.dark-mode .modal-header .modal-title {
    color: #f8f9fa;
}

body.dark-mode .modal-header .btn-close {
    color: #ffffff;
    opacity: 0.5;
}

body.dark-mode .modal-header .btn-close:hover {
    opacity: 1;
}

body.light-mode .form-check-input[type="checkbox"]:checked {
    background-color: #0d6efd; /* Couleur de fond lorsqu'elle est cochée */
    border-color: #0d6efd;     /* Couleur de bordure */
    /* Si besoin, forcez l'affichage d'un symbole de check */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.485 1.965a.75.75 0 00-1.06.025L6.477 7.94 3.574 5.066a.75.75 0 00-1.06 1.06l3.454 3.454a.75.75 0 001.06 0l6.457-6.457a.75.75 0 00-.025-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75em 0.75em;
}

body.light-mode .form-check-input[type="checkbox"]:before {
    background-color: #0d6efd; /* Couleur de fond lorsqu'elle est cochée */
    border-color: #0d6efd;     /* Couleur de bordure */
    /* Si besoin, forcez l'affichage d'un symbole de check */
   background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75em 0.75em;
}