/* ==============================
   CSS Global
============================== */



body {
  margin: 0;
  font-family: "Charcoal", sans-serif;
  background: #f4f4f4;
  color: #222;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Rend le texte plus lisse */
  text-rendering: optimizeLegibility; /* Améliore le rendu des polices */
}

h1, h2, h3, h4 {
  font-family: Impact, Charcoal, sans-serif;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

h1 {
  margin-bottom: 0;
  letter-spacing: -1px;
  font-size: 2.5rem; /* Taille de titre principale */
}

subtitle { /* Note: subtitle n'est pas une balise HTML standard, mais tu l'utilises */
  display: block;
  margin-top: 0;
  margin-bottom: 0.8rem; /* Augmenter un peu l'espace */
  font-size: 0.95rem;
  color: #555;
}

a {
  color: #3c7198;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out; /* Douce transition au survol */
}

a:hover {
  text-decoration: underline;
  color: #005fa3; /* Couleur un peu plus foncée au survol */
}

/* ==============================
   Container / Main
============================== */
main {
  max-width: 800px;
  margin: 1.5rem auto; /* Augmenter un peu la marge pour l'esthétique */
  padding: 2rem; /* Augmenter le padding */
  background: #fff;
  border-radius: 8px; /* Coins légèrement arrondis pour le bloc principal */
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Ombre plus prononcée et douce */
}

/* ==============================
   Forms
============================== */
form label {
  display: block;
  margin-bottom: 0.75rem; /* Un peu moins d'espace */
  font-weight: bold; /* Labels en gras */
  color: #333;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.8rem; /* Padding ajusté */
  font-size: 1rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fcfcfc; /* Fond légèrement différent */
  transition: border-color 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: #3c7198; /* Bordure bleue au focus */
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.2);
}

button.btn {
  background: #3c7198;
  color: #fff;
  border: none;
  border-radius: 4px; /* Arrondi pour les boutons aussi */
  padding: 0.6rem 1.2rem; /* Padding ajusté */
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Petite ombre pour les boutons */
  transition: background 0.2s, box-shadow 0.2s;
}

button.btn:hover {
  background: #005fa3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ==============================
   Tables
============================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

table th, table td {
  border: 1px solid #e0e0e0; /* Bordure plus claire */
  padding: 0.8rem;
  text-align: left;
}

table th {
  background: #f8f8f8; /* Fond de l'en-tête plus clair */
  font-weight: bold;
  color: #333;
}

/* ==============================
   Dropzone
============================== */
#dropzone {
  border: 2px dashed #3c7198;
  padding: 1.5rem;
  text-align: center;
  color: #3c7198;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#dropzone.hover {
  background: #e0f2ff; /* Fond bleu clair au survol */
  color: #005fa3;
  border-color: #005fa3;
}

#preview img {
  max-width: 100%; /* S'assure que les images ne débordent pas */
  height: auto;
  margin-top: 1rem;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==============================
   Frontend Posts
============================== */
article.post {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eeeeee; /* Bordure de séparation des posts plus claire */
}

article.post:last-child {
    border-bottom: none; /* Pas de bordure pour le dernier post */
    margin-bottom: 0;
    padding-bottom: 0;
}

.post-meta {
  font-size: 0.8rem;
  color: #6a6a6a; /* Couleur de texte plus douce pour les méta-informations */
  margin-bottom: 0.5rem;
}

article.post img,
main img,
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2rem 0; /* Marge ajustée */
  border-radius: 4px;
}

/* Positionnement des titres (si applicable via UX settings) */
h2.title.title-top {
    margin-bottom: 0.3rem; /* Espace plus petit si le titre est en haut */
}
h2.title.title-bottom {
    margin-top: 1rem; /* Plus d'espace si le titre est en bas */
    margin-bottom: 0.3rem;
}


/* ==============================
   Dark Mode
============================== */
html.dark body {
  background: #121212; /* Fond sombre */
  color: #e0e0e0; /* Texte clair */
}

html.dark main {
  background: #1e1e1e; /* Fond principal plus sombre */
  color: #e0e0e0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4); /* Ombre plus visible en dark mode */
}

html.dark subtitle {
    color: #b0b0b0;
}

html.dark a {
  color: #8ab4f8; /* Liens bleus plus clairs */
}

html.dark a:hover {
    color: #a6c8ff;
}

html.dark form label {
    color: #b0b0b0;
}

html.dark input[type="text"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
  background: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
}

html.dark input[type="text"]:focus,
html.dark input[type="password"]:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
}

html.dark button.btn {
  background: #8ab4f8;
  color: #1a1a1a; /* Texte foncé pour les boutons clairs */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

html.dark button.btn:hover {
  background: #a6c8ff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

html.dark table th {
  background: #2a2a2a;
  color: #e0e0e0;
}

html.dark table td,
html.dark table th {
  border-color: #3a3a3a;
}

html.dark #dropzone {
  background: #2a2a2a;
  border-color: #8ab4f8;
  color: #8ab4f8;
}

html.dark #dropzone.hover {
  background: #3a3a3a;
  color: #a6c8ff;
  border-color: #a6c8ff;
}

html.dark article.post {
  border-bottom: 1px solid #333333;
}

html.dark .post-meta {
  color: #b0b0b0;
}

/* ==============================
   Top-bar
============================== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem; /* Plus d'espace */
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee; /* Petite ligne de séparation */
}

html.dark .top-bar {
    border-bottom-color: #333;
}

.login-logo img {
  width: 120px; /* Logo un peu plus grand */
  height: auto;
  cursor: pointer;
  transition: opacity 0.2s;
  display: block; /* S'assurer qu'il n'y a pas de marge bizarre en bas */
}

.login-logo img:hover {
  opacity: 0.7; /* Moins d'opacity au survol */
}

#theme-toggle {
  font-size: 0.85rem; /* Taille du texte ajustée */
  padding: 0.3rem 0.6rem;
  border: none;
  outline: none;
  background: #3c7198;
  color: #fff;
  cursor: pointer;
  border-radius: 4px; /* Arrondi pour le bouton toggle */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background 0.2s, box-shadow 0.2s;
  letter-spacing: 0.5px;
  font-weight: bold;
}

#theme-toggle:hover {
  background: #005fa3;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

html.dark #theme-toggle {
    background: #8ab4f8;
    color: #1a1a1a;
}
html.dark #theme-toggle:hover {
    background: #a6c8ff;
}

/* ==============================
   Categories (Améliorées pour UX)
============================== */
.categories-wrapper {
    /* Si tu veux une couleur de fond différente pour le wrapper des catégories */
    /* background-color: #f8f8f8; */
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.categories {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne par défaut */
  gap: 0.6rem; /* Espace entre les boutons */
  margin: 0; /* Géré par le wrapper */
  padding: 0; /* Géré par le wrapper */
  overflow-x: visible; /* Pas de scroll horizontal par défaut */
  -webkit-overflow-scrolling: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categories::-webkit-scrollbar {
  display: none;
}

.categories b {
  display: flex;
  flex-shrink: 0;
  flex-basis: auto; /* La base est automatique */
}

.category-btn {
  display: block;
  white-space: nowrap;
  background: #f3f4f6;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-grow: 1; /* Permet aux boutons de s'étirer sur desktop */
  flex-shrink: 1; /* Permet aux boutons de se réduire si nécessaire */
  min-width: fit-content;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.category-btn:hover {
  background: #e5e7eb;
  border-color: #aeb1b7;
  color: #3c7198;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.category-btn.active {
  background: #3c7198;
  color: #fff;
  border-color: #3c7198;
  box-shadow: 0 2px 5px rgba(0, 119, 204, 0.3);
}

/* Dark Mode pour les catégories */
html.dark .category-btn {
  background: #2a2a2d;
  color: #e0e0e0;
  border-color: #444;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

html.dark .category-btn:hover {
  background: #3a3a3d;
  border-color: #666;
  color: #8ab4f8;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

html.dark .category-btn.active {
  background: #8ab4f8;
  color: #1a1a1a;
  border-color: #8ab4f8;
  box-shadow: 0 2px 5px rgba(138, 180, 248, 0.3);
}


/* ==============================
   Table responsive container
============================== */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* scroll fluide iOS */
}

/* Table classique (min-width desktop) */
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* force un minimum pour desktop si besoin */
}

.table-responsive th,
.table-responsive td {
  border: 1px solid #e0e0e0;
  padding: 0.8rem;
  text-align: left;
}

table th {
  background: #f8f8f8;
}

/* Dark mode */
html.dark .table-responsive th {
  background: #2a2a2a;
}
html.dark .table-responsive td,
html.dark .table-responsive th {
  border-color: #3a3a3a;
}


/* ===========================
   Mobile (≤600px)
=========================== */
@media (max-width: 600px) {
  h1 {
      font-size: 2rem;
      letter-spacing: -0.5px;
  }
  subtitle {
      font-size: 0.85rem;
  }
  main {
      margin: 1rem auto;
      padding: 1.2rem;
      border-radius: 0;
      box-shadow: none;
  }

  /* Cache l'en-tête de la table en mode mobile */
  .table-responsive thead {
    display: none;
  }

  .table-responsive table,
  .table-responsive tbody,
  .table-responsive tr,
  .table-responsive td {
    display: block;
    width: 100%;
  }

  .table-responsive tr {
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.5rem;
  }
  html.dark .table-responsive tr {
      border-color: #3a3a3a;
  }

  .table-responsive td {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    border: none;
    border-bottom: 1px solid #f0f0f0;
  }
  html.dark .table-responsive td {
      border-bottom-color: #333;
  }

  .table-responsive td:last-child {
    border-bottom: none;
  }

  .table-responsive td:before {
    content: attr(data-label);
    font-weight: bold;
    flex: 0 0 110px;
    margin-right: 0.5rem;
    color: #555;
  }
  html.dark .table-responsive td:before {
    color: #b0b0b0;
  }

  .table-responsive td a {
    text-decoration: underline;
  }

  /* === NOUVEAU: Catégories sur mobile: s'empilent verticalement === */
  .categories-wrapper {
      padding: 0; /* Pas de padding spécifique ici */
      margin-bottom: 1rem; /* Marge en bas pour séparer des posts */
  }

  .categories {
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne */
    flex-direction: column; /* Force les éléments à s'empiler verticalement */
    gap: 0.4rem; /* Un peu moins d'espace entre les boutons */
    margin: 0; /* Réinitialiser les marges */
    padding: 0;
    overflow-x: hidden; /* Désactiver le défilement horizontal */
  }

  .categories b {
      width: 100%; /* Chaque bouton prend toute la largeur */
      flex-shrink: 0;
  }

  .category-btn {
    width: 100%; /* Force le bouton à prendre 100% de la largeur du <b> */
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    text-align: left; /* Alignement à gauche pour un look de liste */
    white-space: normal; /* Permet au texte de wrap si très long */
    box-sizing: border-box; /* S'assure que padding ne déborde pas */
    flex-grow: 1; /* Permet au bouton de s'étirer pour remplir <b> */
    min-width: unset; /* Retire le min-width forcé */
  }
}


/* ==============================
   Login Page Specific Styles
============================== */

/* Style du message d'erreur */
.error-message {
    color: #d93025; /* Rouge vif pour les erreurs */
    background-color: #ffebee; /* Fond très léger */
    border: 1px solid #d93025;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    font-weight: bold;
}

html.dark .error-message {
    color: #ff8a80; /* Rouge clair en dark mode */
    background-color: #3b1f1d;
    border-color: #ff8a80;
}

/* Centre le contenu de la page de connexion */
main.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Prend toute la hauteur de l'écran */
    margin: 0; /* Réinitialise la marge du main */
    padding: 1rem; /* Un peu de padding pour éviter que le contenu ne touche les bords */
    box-shadow: none; /* Pas d'ombre sur toute la page */
    background: transparent; /* Main transparent, le body gère le fond */
    border-radius: 0;
}

html.dark main.login-page {
    background: transparent;
    box-shadow: none;
}

/* Conteneur pour le formulaire de connexion */
.login-container {
    max-width: 400px; /* Largeur maximale pour le formulaire */
    width: 100%;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center; /* Centre le logo et le titre */
}

html.dark .login-container {
    background: #1e1e1e;
    box-shadow: 0 4px 25px rgba(0,0,0,0.4);
}

.login-container h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #333;
}

html.dark .login-container h1 {
    color: #e0e0e0;
}

.login-container form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espace entre les éléments du formulaire */
}

.login-container label {
    text-align: left; /* Aligne les labels à gauche */
    margin-bottom: 0.2rem;
    font-weight: normal; /* Labels normaux, pas forcément en gras */
}

.login-container input[type="text"],
.login-container input[type="password"] {
    margin-bottom: 1rem; /* Espace après chaque champ */
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
    border-radius: 6px;
}

.login-container button.btn {
    width: 100%; /* Bouton prend toute la largeur */
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* Style du logo sur la page de connexion */
.login-logo-main {
    display: block; /* Pour centrer l'image */
    margin-bottom: 2rem;
}

.login-logo-main img {
    width: 120px; /* Taille plus grande pour le logo de la page de connexion */
    height: auto;
    margin: 0 auto; /* Centrer l'image */
    transition: none; /* Pas d'animation opacity ici */
    box-shadow: none; /* Pas d'ombre */
}

/* Pour que le logo change de couleur avec le thème */
html.dark .login-logo-main img {
    /* Le JS gère déjà la source de l'image, pas besoin de CSS ici */
}


/* --- Médias queries pour les écrans plus petits sur la page de connexion --- */
@media (max-width: 600px) {
    main.login-page {
        padding: 0.5rem;
    }

    .login-container {
        padding: 1.5rem;
        border-radius: 0; /* Pas d'arrondi sur mobile pour mieux épouser les bords */
        box-shadow: none; /* Pas d'ombre sur mobile */
    }

    .login-container h1 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .login-logo-main {
        margin-bottom: 1.2rem;
    }

    .login-logo-main img {
        width: 100px; /* Plus petit sur mobile */
    }

    .login-container input[type="text"],
    .login-container input[type="password"],
    .login-container button.btn {
        padding: 0.7rem 1rem;
        font-size: 1rem;
    }
}


/* ==============================
   Dashboard Specific Styles
============================== */

/* Top bar spécifique pour l'admin */
.admin-top-bar {
    background: #fdfdfd; /* Un fond un peu plus clair pour la barre d'admin */
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
html.dark .admin-top-bar {
    background: #282828;
    border-bottom-color: #3a3a3a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.admin-top-bar .login-logo img {
    width: 125px; /* Taille du logo dans la barre admin */
}

.logout-btn {
    background: #dc3545; /* Rouge pour le bouton de déconnexion */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.logout-btn:hover {
    background: #c82333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
html.dark .logout-btn {
    background: #e96d77;
    color: #1a1a1a;
}
html.dark .logout-btn:hover {
    background: #ee8a92;
}

/* Navigation du dashboard */
.admin-nav {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-nav .btn {
    background: #28a745; /* Vert pour "Nouvel article" */
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.admin-nav .btn:hover {
    background: #218838;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
html.dark .admin-nav .btn {
    background: #7bdc7b;
    color: #1a1a1a;
}
html.dark .admin-nav .btn:hover {
    background: #8ede8e;
}


/* Messages de succès */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    border: 1px solid #c3e6cb;
    text-align: center;
    font-weight: bold;
}
html.dark .success-message {
    background: #283d2d;
    color: #c3e6cb;
    border-color: #3b5a40;
}

/* Paramètres (sections UX et Site) */
.settings-box {
    background: #fcfcfc; /* Un fond très léger */
    padding: 1.8rem;
    margin-bottom: 2.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
html.dark .settings-box {
    background: #222222;
    border-color: #3a3a3a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.settings-box h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.8rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.8rem;
}
html.dark .settings-box h2 {
    color: #e0e0e0;
    border-bottom-color: #3a3a3a;
}

.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #444;
}
html.dark .form-group label {
    color: #ccc;
}

/* Les input/select/textarea globaux sont déjà stylés, pas besoin de redéfinir ici */

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.7rem; /* Plus d'espace */
    margin-bottom: 0.5rem;
}
.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #3c7198; /* Couleur d'accentuation pour la checkbox */
}
html.dark .checkbox-group input[type="checkbox"] {
    accent-color: #8ab4f8;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    user-select: none; /* Empêche la sélection du texte du label */
}
.form-hint {
    font-size: 0.8rem; /* Plus petit */
    color: #888;
    margin-top: 0.5rem;
    font-style: italic;
    line-height: 1.3;
}
html.dark .form-hint {
    color: #a0a0a0;
}

/* Styles pour le bouton de sauvegarde des paramètres */
.settings-box .btn { /* Utilise la classe .btn générique */
    background: #3c7198;
    color: white;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.settings-box .btn:hover {
    background: #005fa3;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
html.dark .settings-box .btn {
    background: #8ab4f8;
    color: #1a1a1a;
}
html.dark .settings-box .btn:hover {
    background: #a6c8ff;
}


/* UX section background */
.ux-section {
    background: #eef8ff; /* Couleur de fond distincte pour la section UX */
    border-color: #cce9ff;
}
html.dark .ux-section {
    background: #1a2a3a;
    border-color: #3b5a7a;
}


/* ==============================
   Table responsive pour Dashboard (amélioré)
============================== */
.table-responsive {
  width: 100%;
  overflow-x: auto; /* Permet le défilement horizontal sur les écrans intermédiaires si le tableau est large */
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem; /* Espace après le tableau */
}

/* Pour le tableau lui-même */
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* Force une largeur minimale pour les écrans non-mobile */
  background: #fff;
  border-radius: 8px; /* Coins arrondis pour le tableau */
  overflow: hidden; /* Assure que les coins arrondis sont visibles */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
html.dark .table-responsive table {
    background: #222222;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}


.table-responsive th,
.table-responsive td {
  padding: 1rem; /* Plus de padding */
  border: 1px solid #e9e9e9; /* Bordures plus légères */
  text-align: left;
  vertical-align: middle;
}
html.dark .table-responsive th,
html.dark .table-responsive td {
    border-color: #3a3a3a;
}

.table-responsive th {
  background: #f8f8f8;
  font-weight: bold;
  color: #555;
  white-space: nowrap; /* Empêche les en-têtes de passer à la ligne */
}
html.dark .table-responsive th {
    background: #2a2a2a;
    color: #ccc;
}

.table-responsive td {
    color: #333;
}
html.dark .table-responsive td {
    color: #e0e0e0;
}

.table-responsive tbody tr:nth-child(even) { /* Lignes paires légèrement différentes */
    background-color: #fcfcfc;
}
html.dark .table-responsive tbody tr:nth-child(even) {
    background-color: #262626;
}

.table-responsive tbody tr:hover {
    background-color: #f0f8ff; /* Effet de survol sur les lignes */
}
html.dark .table-responsive tbody tr:hover {
    background-color: #2b3b4a;
}

.table-responsive .actions-cell a {
    color: #3c7198;
    text-decoration: none;
    font-weight: bold;
    margin: 0 0.3rem;
}
.table-responsive .actions-cell a:hover {
    text-decoration: underline;
    color: #005fa3;
}
html.dark .table-responsive .actions-cell a {
    color: #8ab4f8;
}
html.dark .table-responsive .actions-cell a:hover {
    color: #a6c8ff;
}
.table-responsive .actions-cell span {
    color: #ccc;
}
html.dark .table-responsive .actions-cell span {
    color: #666;
}


/* ===========================
   Mobile (≤600px) - Dashboard spécifique
=========================== */
@media (max-width: 600px) {
  /* Réinitialise les styles généraux du main sur mobile */
  main {
      padding: 1rem;
  }

  /* Cache l'en-tête de la table en mode mobile */
  .table-responsive thead {
    display: none;
  }

  .table-responsive table {
    min-width: unset; /* Annule la largeur minimale */
    border-radius: 0;
    box-shadow: none;
  }

  .table-responsive tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.8rem; /* Plus de padding pour les lignes */
    width: 100%;
    box-sizing: border-box;
    background: #fff; /* Fond blanc par défaut */
  }
  html.dark .table-responsive tr {
      border-color: #3a3a3a;
      background: #222222;
  }
  html.dark .table-responsive tbody tr:nth-child(even) {
      background-color: #222222; /* Pas de rayures en dark mode mobile pour plus de clarté */
  }

  .table-responsive tbody tr:hover {
      background-color: #f0f8ff; /* Effet de survol conservé */
  }
  html.dark .table-responsive tbody tr:hover {
      background-color: #2b3b4a;
  }

  .table-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centre verticalement le label et la valeur */
    flex-wrap: wrap;
    padding: 0.6rem 0.5rem; /* Padding ajusté */
    border-bottom: 1px solid #f0f0f0; /* Ligne entre les infos */
    font-size: 0.9rem;
  }
  html.dark .table-responsive td {
      border-bottom-color: #333;
  }

  .table-responsive td:last-child {
    border-bottom: none;
    padding-bottom: 0; /* Pas de padding si c'est le dernier élément */
  }

  .table-responsive td:first-child { /* Le titre est souvent le premier */
      font-weight: bold;
      font-size: 1rem;
      color: #3c7198;
  }
  html.dark .table-responsive td:first-child {
      color: #8ab4f8;
  }

  .table-responsive td:before {
    content: attr(data-label);
    font-weight: bold;
    flex: 0 0 auto; /* Laisse le label prendre sa largeur naturelle */
    margin-right: 1rem; /* Plus d'espace entre label et contenu */
    color: #6a6a6a;
    white-space: nowrap; /* Empêche le label de passer à la ligne */
  }
  html.dark .table-responsive td:before {
    color: #b0b0b0;
  }

  .table-responsive .actions-cell {
      justify-content: flex-end; /* Aligne les actions à droite */
      gap: 0.8rem; /* Espace entre les boutons d'action */
      padding-top: 0.8rem;
  }
  .table-responsive .actions-cell:before {
      display: none; /* Cache le label "Actions" */
  }
  .table-responsive .actions-cell a {
      margin: 0; /* Réinitialise la marge */
      padding: 0.4rem 0.8rem;
      border: 1px solid #3c7198;
      border-radius: 4px;
      font-size: 0.85rem;
      background: #3c7198;
      color: white;
      text-decoration: none;
  }
  .table-responsive .actions-cell a:hover {
      background: #005fa3;
      text-decoration: none;
  }
  html.dark .table-responsive .actions-cell a {
      background: #8ab4f8;
      border-color: #8ab4f8;
      color: #1a1a1a;
  }
  html.dark .table-responsive .actions-cell a:hover {
      background: #a6c8ff;
  }

  .table-responsive .actions-cell span {
      display: none; /* Cache les séparateurs "|" */
  }

  /* Ajustements pour les paramètres sur mobile */
  .settings-box {
      padding: 1rem;
      border-radius: 0;
      box-shadow: none;
      border-left: none;
      border-right: none;
  }
  .settings-box h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
  }
  .form-group {
      margin-bottom: 1rem;
  }
  .form-group label {
      font-size: 0.95rem;
  }
  .form-hint {
      font-size: 0.75rem;
  }
  .settings-box .btn {
      width: 100%;
      padding: 0.7rem 1rem;
      font-size: 1rem;
  }
}

    a.btn.btn-secondary {
    background-color: #d6d6d6;     /* gris clair */
    color: #333;                   /* texte gris foncé */
    border: 1px solid #bcbcbc;
}

a.btn.btn-secondary:hover {
    background-color: #c8c8c8;     /* un peu plus foncé au survol */
}

html.dark .btn-secondary {
    background-color: #444;    /* gris foncé */
    color: #eee;               /* texte clair */
    border-color: #555;
}

html.dark .btn-secondary:hover {
    background-color: #555;    /* plus clair au survol */
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 16px;
    font-size: 1.4rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;

    background: #222;
    color: #fff;
}

/* Mode dark / light automatique */
html.dark #back-to-top {
    background: #fff;
    color: #000;
}

#back-to-top.show {
    opacity: 0.9;
    pointer-events: auto;
}

/* Styles spécifiques pour la page article */
.post-page-header {
    background: linear-gradient(135deg, #3c7198 0%, #005fa3 100%);
    color: white;
    padding: 2rem;
    margin: -2rem -2rem 2rem -2rem; /* Compense le padding du main */
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 15px rgba(0, 119, 204, 0.2);
}

html.dark .post-page-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #152a45 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.post-page-header h1 {
    margin: 0 0 0.8rem 0;
    font-size: 2.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.post-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    opacity: 0.95;
}

.post-page-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.post-page-meta span::before {
    content: "•";
    font-weight: bold;
}

.post-page-meta span:first-child::before {
    content: "";
}

.post-content {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 2rem 0;
}

.post-content img {
    margin: 2rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #3c7198;
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 2rem;
    transition: background 0.2s, transform 0.2s;
}

.back-button:hover {
    background: #005fa3;
    transform: translateX(-3px);
    text-decoration: none;
}

html.dark .back-button {
    background: #8ab4f8;
    color: #1a1a1a;
}

html.dark .back-button:hover {
    background: #a6c8ff;
}

.category-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    backdrop-filter: blur(10px);
}

@media (max-width: 600px) {
    .post-page-header {
        margin: -1.2rem -1.2rem 1.5rem -1.2rem;
        padding: 1.5rem;
    }
    
    .post-page-header h1 {
        font-size: 1.8rem;
    }
    
    .post-content {
        font-size: 1rem;
    }
}


/* Par défaut, le menu est replié sur mobile */
.menu-items {
    display: none;
}

/* Quand la classe "open" est ajoutée */
.categories.open .menu-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Blog title link */
.blog-title a {
    color: black;        /* texte noir */
    text-decoration: none; /* enlever le soulignement si besoin */
}

/* Si tu utilises dark mode */
html.dark .blog-title a {
    color: white;        /* texte clair en dark mode */
}

/* ===========================================================
   FIX DARK MODE — COMPATIBILITÉ HTML.dark ET BODY.dark
   (résout les conflits et priorités)
=========================================================== */

/* 1️⃣ Active le dark mode même si la classe est sur body */
html.dark, body.dark {
    color-scheme: dark;
}

/* 2️⃣ BACKGROUND & TEXTE */
html.dark body,
body.dark body,
html.dark,
body.dark {
    background: #121212 !important;
    color: #e0e0e0 !important;
}

/* 3️⃣ MAIN CONTAINER */
html.dark main,
body.dark main {
    background: #1e1e1e !important;
    color: #f5f5f5 !important;
    border-color: #333 !important;
}

/* 4️⃣ INPUTS, TEXTAREA, SELECT */
html.dark input,
body.dark input,
html.dark textarea,
body.dark textarea,
html.dark select,
body.dark select {
    background: #2c2c2c !important;
    color: #f1f1f1 !important;
    border-color: #444 !important;
}

/* 5️⃣ TABLES */
html.dark table,
body.dark table {
    background: #1b1b1b !important;
    color: #eaeaea !important;
}

html.dark th,
body.dark th {
    background: #333 !important;
    color: #fff !important;
}

html.dark td,
body.dark td {
    border-color: #333 !important;
}

/* 6️⃣ BOUTONS */
html.dark button,
body.dark button,
html.dark .btn,
body.dark .btn {
    background: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* 7️⃣ THEME TOGGLE FIX (pour éviter les overrides) */
html.dark #theme-toggle,
body.dark #theme-toggle {
    background: #8ab4f8 !important;
    color: #1a1a1a !important;
    border-color: #a8c8ff !important;
}

/* 8️⃣ CARTES & BOÎTES (admin-top-bar, settings, etc.) */
html.dark .box,
body.dark .box,
html.dark .card,
body.dark .card,
html.dark .settings-box,
body.dark .settings-box,
html.dark .admin-top-bar,
body.dark .admin-top-bar {
    background: #1c1c1c !important;
    border-color: #333 !important;
    color: #f1f1f1 !important;
}

/* 9️⃣ LIENS */
html.dark a,
body.dark a {
    color: #80caff !important;
}