/* ==========================================================================
   Mon Super Board - style.css
   ========================================================================== */

/* ==========================================================================
   Variables CSS (Couleurs, Polices, Espacements)
   ========================================================================== */
:root {
  /* Couleurs Primaires (Thème Sombre inspiré LoL Boards) */
  --clr-bg-page: #0A0A0E;                     /* Fond général très sombre, presque noir */
  --clr-bg-container: #101820;               /* Fond des conteneurs principaux (un peu plus clair) */
  --clr-bg-element: #1A2028;                 /* Fond pour éléments (sujets, commentaires, champs) */
  --clr-bg-element-hover: #202831;           /* Hover pour les éléments */
  --clr-bg-sidebar: #0D131A;                 /* Fond de la sidebar gauche */
  --clr-bg-header-bar: #010A13;               /* Fond pour la barre "FORUM" / Titre du sujet */

  --clr-text-primary: #C8C8C8;               /* Texte principal (gris clair) */
  --clr-text-secondary: #7E7E7E;             /* Texte secondaire (meta, labels, etc.) */
  --clr-text-heading: #F0F0F0;               /* Titres (blanc cassé) */
  --clr-text-link: #CDA158;                  /* Liens (doré LoL) */
  --clr-text-link-hover: #E8C37E;            /* Hover des liens */
  --clr-text-on-accent: #0A0A0E;             /* Texte sur fond doré (pour contraste) */

  /* Accents */
  --clr-accent-gold: #CDA158;                /* Doré principal */
  --clr-accent-gold-darker: #A77E36;          /* Doré plus foncé pour hover/boutons */
  --clr-accent-blue-highlight: #0BC6E3;       /* Bleu pour certains highlights ou icônes (optionnel) */
    --clr-accent-gold-rgb: 205, 161, 88;

  /* Bordures & Séparateurs */
  --clr-border-primary: #252F3B;             /* Bordures subtiles pour conteneurs */
  --clr-border-secondary: #353F4D;           /* Bordures pour éléments internes (champs) */
  --clr-border-accent: var(--clr-accent-gold);/* Bordure dorée */
  --clr-divider: var(--clr-border-primary);  /* Lignes de séparation */

  --clr-bg-comment-primary: #1A2028; /* Votre "bleu clair" (fond de base des éléments) */
  --clr-bg-comment-secondary: #101820;

  --clr-bg-page-rgb: 10, 10, 14;         /* Pour #0A0A0E */
  --clr-bg-element-rgb: 26, 32, 40;    /* Pour #1A2028 */
  --clr-bg-element-pinned: #1E2A3A;

  /* Typographie */
  --font-base: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Alternative à Beaufort */
  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 28px;
  --line-height-base: 1.5;
  --line-height-content: 1.7; /* Pour le contenu des sujets/commentaires */

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Autres */
  --border-radius: 3px;
  --max-width-forum: 1500px; /* Largeur maximale du contenu principal du forum */
}

/* ==========================================================================
   Styles de Base pour le Contenu du Plugin
   ========================================================================== */
.msb-lol-forum-wrapper,
.msb-lol-single-thread-page { /* Appliqué sur <main> dans single-lol_forum_thread.php */
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--clr-text-primary);
}

.msb-lol-forum-wrapper a,
.msb-lol-single-thread-page a {
    color: var(--clr-text-link);
    text-decoration: none;
}
.msb-lol-forum-wrapper a:hover,
.msb-lol-single-thread-page a:hover {
    color: var(--clr-text-link-hover);
    text-decoration: underline;
}

.msb-lol-forum-wrapper h1, .msb-lol-forum-wrapper h2, .msb-lol-forum-wrapper h3, .msb-lol-forum-wrapper h4,
.msb-lol-single-thread-page h1, .msb-lol-single-thread-page h2, .msb-lol-single-thread-page h3, .msb-lol-single-thread-page h4 {
    font-weight: 500;
    color: var(--clr-text-heading);
    margin-top: 0;
    margin-bottom: var(--space-md); /* Espacement par défaut sous les titres */
}

/* Utilitaires (optionnel) */
.msb-lol-screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}


/* ==========================================================================
   Barre de Titre du Forum (msb-lol-header-bar)
   Utilisée dans board-template.php et single-lol_forum_thread.php
   ========================================================================== */
.msb-lol-header-bar {
    background-color: var(--clr-bg-header-bar);
    border: 1px solid var(--clr-border-accent);
}

.msb-lol-header-bar-inner {
    max-width: var(--max-width-forum);
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.msb-lol-header-bar .boards-title {
    font-size: var(--font-size-xxl);
    color: var(--clr-text-heading);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: auto;
    line-height: 1.2; /* Pour les titres sur plusieurs lignes */
}

.msb-lol-header-bar .boards-nav {
    display: flex;
    align-items: center;
}

.msb-lol-header-bar .boards-nav .sort-by-label {
    margin-right: var(--space-sm);
    color: var(--clr-text-secondary);
    font-size: var(--font-size-base);
    font-weight: bold;
}

.msb-lol-header-bar .boards-nav a {
    margin-left: var(--space-md);
    color: var(--clr-text-secondary);
    font-size: var(--font-size-base);
    font-weight: bold;
    text-decoration: none;
    position: relative;
    padding-bottom: var(--space-xs);
    transition: color 0.2s ease-in-out;
}

.msb-lol-header-bar .boards-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--clr-text-link);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.2s ease-in-out;
}

.msb-lol-header-bar .boards-nav a:hover {
    color: var(--clr-text-link);
}
.msb-lol-header-bar .boards-nav a:hover::after {
    transform: scaleX(1);
}

.msb-lol-header-bar .boards-nav a.active {
    color: var(--clr-text-link);
}
.msb-lol-header-bar .boards-nav a.active::after {
    transform: scaleX(1);
    background-color: var(--clr-text-link);
}

/* Lien "Retour au Forum" sur la page single */
.msb-lol-single-thread-page .msb-lol-header-bar .boards-nav a {
    /* Styles spécifiques si besoin, sinon hérite des styles ci-dessus */
    color: var(--clr-text-link); /* Le rendre plus proéminent */
}
.msb-lol-single-thread-page .msb-lol-header-bar .boards-nav a:hover {
    color: var(--clr-text-link-hover);
}


/* ==========================================================================
   Conteneur Principal (Sidebar + Contenu) - Pour l'alignement
   ========================================================================== */
.msb-lol-content-wrapper-outer {
    max-width: var(--max-width-forum);
    margin: var(--space-lg) auto;
    padding: 0; /* Les bordures dorées de la sidebar/content s'aligneront avec le header-bar-inner */
                /* Si vous voulez un retrait, ajoutez du padding ici ex: padding: 0 var(--space-lg); */
}

.msb-lol-main-container {
  display: flex;
  gap: var(--space-lg);
}

/* ==========================================================================
   Sidebar Gauche (board-template.php)
   ========================================================================== */
.msb-lol-sidebar-left {
  flex: 0 0 260px;
  background-color: var(--clr-bg-sidebar);
  padding: var(--space-md);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--border-radius);
  align-self: flex-start;
}

.msb-lol-sidebar-section {
    margin-bottom: var(--space-lg);
}
.msb-lol-sidebar-section:last-child {
    margin-bottom: 0;
}

.msb-lol-sidebar-section h2 {
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--clr-divider);
    font-weight: bold;
}

.msb-lol-sidebar-section .rules-text {
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
    line-height: 1.4;
}

.msb-lol-btn-create-discussion {
    display: block;
    width: 100%;
    background-color: var(--clr-accent-gold-darker);
    color: #FFFFFF !important; /* Texte blanc sur fond doré */
    padding: var(--space-md);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    text-decoration: none;
    border: 2px solid transparent; /* Pour éviter le décalage au hover */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.msb-lol-btn-create-discussion:hover {
    background-color: var(--clr-accent-gold); /* Légèrement plus clair au survol */
    color: #FFFFFF !important;
    text-decoration: none;
    border-color: var(--clr-accent-gold); /* Apparition de la bordure dorée */
}

.msb-lol-search-form input[type="search"] {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--clr-bg-element);
    border: 1px solid var(--clr-border-secondary);
    border-radius: var(--border-radius);
    color: var(--clr-text-primary);
}
.msb-lol-search-form input[type="search"]::placeholder {
    color: var(--clr-text-secondary);
}

.msb-lol-boards-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.msb-lol-boards-list ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-xs); /* Padding ajusté */
    color: var(--clr-text-secondary);
    font-size: var(--font-size-base);
    border-bottom: 1px solid var(--clr-divider);
    transition: color 0.2s ease;
}
.msb-lol-boards-list > ul > li:last-child > a {
    border-bottom: none;
}
.msb-lol-boards-list ul li a:hover,
.msb-lol-boards-list ul li a.active { /* Gérer la classe active */
    color: var(--clr-text-link);
    text-decoration: none;
}
.msb-lol-boards-list ul li a .msb-lol-board-count {
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
    transition: color 0.2s ease;
}
.msb-lol-boards-list ul li a:hover .msb-lol-board-count,
.msb-lol-boards-list ul li a.active .msb-lol-board-count {
    color: var(--clr-text-link);
}


/* ==========================================================================
   Zone de Contenu (Liste des Sujets / Contenu Sujet Unique)
   ========================================================================== */
.msb-lol-content-area {
  flex: 1;
  min-width: 0; /* Empêche le dépassement dans un contexte flex */
}

/* Liste des sujets (board-template.php) */
.msb-lol-thread-list {
  background-color: var(--clr-bg-container);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--border-radius);
}

.msb-lol-thread-item {
  display: flex;
  align-items: center; /* Centre verticalement avatar et contenu */
  padding: var(--space-md);
  background-color: var(--clr-bg-element);
  border-bottom: 1px solid var(--clr-divider);
  gap: var(--space-md);
  transition: background-color 0.2s ease;
  /* gap: var(--space-md); Pas besoin de le répéter */
}
.msb-lol-thread-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: var(--border-radius); /* Coins arrondis pour le dernier élément */
  border-bottom-right-radius: var(--border-radius);
}
.msb-lol-thread-item:first-child {
  border-top-left-radius: var(--border-radius); /* Coins arrondis pour le premier élément */
  border-top-right-radius: var(--border-radius);
}
.msb-lol-thread-item:hover {
    background-color: var(--clr-bg-element-hover);
}

.msb-lol-thread-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.msb-lol-thread-main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* Espace entre titre et méta */
  min-width: 0; /* Permet à text-overflow de fonctionner */
}

.msb-lol-thread-main-content .title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin: 0; /* Reset margin pour le titre */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msb-lol-thread-main-content .title a {
    color: var(--clr-text-heading); /* Couleur du titre */
}
.msb-lol-thread-main-content .title a:hover {
    color: var(--clr-text-link-hover);
}

.msb-lol-thread-main-content .meta {
  font-size: var(--font-size-sm);
  color: var(--clr-text-secondary);
  display: flex; /* Pour aligner les éléments meta */
  flex-wrap: wrap; /* Permet le retour à la ligne */
  gap: var(--space-xs) var(--space-sm); /* Espace vertical et horizontal entre les meta */
  margin: 0; /* Reset margin */
}
.msb-lol-thread-main-content .meta .author,
.msb-lol-thread-main-content .meta .board-name {
  color: var(--clr-text-link);
  font-weight: bold;
}
.msb-lol-thread-main-content .meta .time,
.msb-lol-thread-main-content .meta .in-board-text {
  color: var(--clr-text-secondary);
}

.msb-lol-thread-stats {
  display: flex;
  flex-shrink: 0; /* Empêche le rétrécissement des stats */
  gap: var(--space-md);
  text-align: center;
  min-width: 100px; /* Ajustez pour la largeur des stats */
}
.msb-lol-thread-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--clr-text-secondary);
    font-size: var(--font-size-sm);
    min-width: 45px;
}
.msb-lol-thread-stats .stat-item .count {
    font-size: var(--font-size-lg);
    color: var(--clr-text-primary);
    font-weight: bold;
    line-height: 1.2;
}
.msb-lol-thread-stats .stat-item .label {
    font-size: 10px;
    text-transform: uppercase;
}

/* Pagination pour la liste des sujets */
.msb-lol-pagination {
    display: flex;
    justify-content: center;
    padding: var(--space-md) 0;
    margin-top: var(--space-md); /* Espace au-dessus de la pagination */
    list-style: none; /* Si paginate_links est configuré avec type='list' */
}
.msb-lol-pagination li { /* Si type='list' */
    margin: 0 var(--space-xs);
}
.msb-lol-pagination a,
.msb-lol-pagination span.page-numbers { /* WordPress utilise la classe .page-numbers */
    padding: var(--space-sm) var(--space-md);
    margin: 0 var(--space-xs); /* Pour le cas sans <li> */
    background-color: var(--clr-bg-element);
    color: var(--clr-text-link);
    border: 1px solid var(--clr-border-primary);
    border-radius: var(--border-radius);
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.msb-lol-pagination a:hover,
.msb-lol-pagination span.page-numbers:not(.current):hover {
    background-color: var(--clr-accent-gold-darker);
    color: var(--clr-text-on-accent);
    border-color: var(--clr-accent-gold-darker);
    text-decoration: none;
}
.msb-lol-pagination span.page-numbers.current {
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent);
    border-color: var(--clr-accent-gold);
    font-weight: bold;
}

.msb-lol-no-threads {
    text-align: center;
    padding: var(--space-lg);
    color: var(--clr-text-secondary);
    background-color: var(--clr-bg-element); /* Pour être cohérent avec le fond des threads */
    border-radius: var(--border-radius); /* Si .msb-lol-thread-list a des coins arrondis */
}

/* ==========================================================================
   Page d'un Sujet Unique (single-lol_forum_thread.php)
   ========================================================================== */

.msb-lol-single-thread-page .msb-lol-thread-item-full { /* La balise <article> du sujet */
    background-color: var(--clr-bg-element);
    padding: var(--space-lg);
    border: 1px solid var(--clr-border-accent);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg); /* Espace avant la section des commentaires */
}

.msb-lol-single-thread-page .msb-lol-thread-header {
    display: flex;
    align-items: flex-start; /* Aligne l'avatar en haut avec le début du texte */
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--clr-divider);
}

.msb-lol-single-thread-page .msb-lol-thread-avatar img {
    width: 50px; /* Avatar un peu plus grand sur la page du sujet */
    height: 50px;
    border-radius: 50%;
}

.msb-lol-single-thread-page .msb-lol-thread-main-content-header .entry-title.msb-lol-thread-title {
    font-size: var(--font-size-xl); /* Titre du sujet plus grand */
    color: var(--clr-text-heading);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.msb-lol-single-thread-page .msb-lol-thread-meta {
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
    /* Les styles de .meta de la liste des sujets peuvent s'appliquer ici aussi */
}
/* .msb-lol-single-thread-page .msb-lol-thread-meta .author, (déjà stylé globalement) */
/* .msb-lol-single-thread-page .msb-lol-thread-meta .board-name { (déjà stylé globalement) } */

.msb-lol-single-thread-page .entry-content.msb-lol-thread-content { /* Contenu principal du sujet */
    color: var(--clr-text-primary);
    line-height: var(--line-height-content);
}
.msb-lol-single-thread-page .entry-content p,
.msb-lol-single-thread-page .entry-content ul,
.msb-lol-single-thread-page .entry-content ol,
.msb-lol-single-thread-page .entry-content blockquote,
.msb-lol-single-thread-page .entry-content .wp-block-image, /* Pour les images Gutenberg */
.msb-lol-single-thread-page .entry-content .wp-block-embed { /* Pour les embeds Gutenberg */
    margin-bottom: var(--space-md);
}
.msb-lol-single-thread-page .entry-content a { /* Liens DANS le contenu du sujet */
    color: var(--clr-text-link-hover); /* Les rendre un peu plus brillants */
    text-decoration: underline;
}
.msb-lol-single-thread-page .entry-content a:hover {
    text-decoration: none;
}

.msb-lol-single-thread-page .msb-lol-thread-views {
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
    margin-top: var(--space-md);
    text-align: right;
}

/* ==========================================================================
   Section des Commentaires (comments-lol_forum_thread.php)
   ========================================================================== */

.msb-lol-comments-wrapper { /* Le div#comments principal */
    background-color: var(--clr-bg-container); /* Fond un peu différent de l'article */
    padding: var(--space-md);
    border: 1px solid var(--clr-border-accent);
    border-radius: var(--border-radius);
    margin-top: var(--space-lg);
}

.msb-lol-comments-wrapper .comments-title, /* Titre "X réponses à..." */
.msb-lol-comments-wrapper #reply-title.comment-reply-title { /* Titre "Laisser un commentaire" */
    font-size: var(--font-size-lg);
    color: var(--clr-text-heading);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--clr-divider);
}

.msb-lol-comments-wrapper .comment-list,
.msb-lol-comments-wrapper .comment-list .children {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative; /* Important pour le positionnement des lignes de connexion */
}

/* Chaque <li> de commentaire */
.msb-lol-comments-wrapper .msb-lol-comment-item {
    background-color: var(--clr-bg-element); /* Garder un fond pour le contenu */
    margin-bottom: var(--space-md); /* Espace entre les commentaires de même niveau */
    border-radius: var(--border-radius);
    position: relative; /* Nécessaire pour les pseudo-éléments de ligne si vous en ajoutez directement à l'item */
}

.msb-lol-comments-wrapper .comment-list > .msb-lol-comment-item:last-child {
    margin-bottom: 0;
}

/* La balise <article> dans chaque commentaire - C'est ici qu'on met la bordure dorée principale */
.msb-lol-comments-wrapper .comment-body.msb-lol-comment-body {
    display: flex;
    gap: var(--space-md);
    border: 1px solid var(--clr-border-accent); /* LA BORDURE DORÉE PRINCIPALE */
    padding: var(--space-md); /* Padding à l'intérieur de la bordure */
    border-radius: var(--border-radius); /* Pour arrondir les coins de la bordure */
    background-color: var(--clr-bg-element); /* Assurer un fond si .msb-lol-comment-item est transparent */
}

.msb-lol-comments-wrapper .msb-lol-comment-avatar img {
    border-radius: 50%;
    /* La taille est définie par l'argument avatar_size dans wp_list_comments */
}

.msb-lol-comments-wrapper .msb-lol-comment-content-wrapper {
    flex: 1;
    min-width: 0; /* Pour flexbox */
}

.msb-lol-comments-wrapper .comment-meta.msb-lol-comment-meta {
    margin-bottom: var(--space-sm);
}

.msb-lol-comments-wrapper .comment-author.msb-lol-comment-author b.fn { /* Nom de l'auteur */
    color: var(--clr-text-link);
    font-size: 1.1em; /* Un peu plus grand */
}
.msb-lol-comments-wrapper .comment-author.msb-lol-comment-author .says { /* Le "dit :" */
    color: var(--clr-text-secondary);
    font-size: 0.9em;
}

.msb-lol-comments-wrapper .comment-metadata.msb-lol-comment-metadata { /* Date, lien modifier */
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
}
.msb-lol-comments-wrapper .comment-metadata a {
    color: var(--clr-text-secondary);
}
.msb-lol-comments-wrapper .comment-metadata a:hover {
    color: var(--clr-text-link-hover);
}
.msb-lol-comments-wrapper .comment-metadata .edit-link a { /* Lien (Modifier) */
    margin-left: var(--space-sm);
}

.msb-lol-comments-wrapper .comment-content.msb-lol-comment-text { /* Le texte du commentaire */
    margin: var(--space-sm) 0;
    line-height: var(--line-height-content);
    color: var(--clr-text-primary);
    word-wrap: break-word; /* Pour les longues chaînes sans espace */
}
.msb-lol-comments-wrapper .comment-content p:last-child {
    margin-bottom: 0;
}
.msb-lol-comments-wrapper .comment-awaiting-moderation {
    font-style: italic;
    color: var(--clr-text-secondary);
    font-size: var(--font-size-sm);
}

.msb-lol-comments-wrapper .reply.msb-lol-reply-link .comment-reply-link { /* Lien "Répondre" */
    background-color: var(--clr-accent-gold-darker);
    color: #FFFFFF !important;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: var(--font-size-sm);
    display: inline-block;
    margin-top: var(--space-sm);
    transition: background-color 0.2s ease;
}
.msb-lol-comments-wrapper .reply.msb-lol-reply-link .comment-reply-link:hover {
    background-color: var(--clr-accent-gold);
}

/* Cible les listes enfants (réponses) */
.msb-lol-comments-wrapper ol.comment-list ul.children,
.msb-lol-comments-wrapper ol.comment-list ol.children {
    margin-left: 20px;  /* Indentation de base pour les réponses */
    padding-left: 25px; /* Espace pour la ligne de connexion verticale. Ajustez avec margin-left. */
    position: relative; /* Pour le positionnement des ::before des enfants directs */
    border-left: 2px solid var(--clr-border-accent); /* LIGNE VERTICALE DORÉE */
}

/* Ajustement pour les items de commentaire à l'intérieur des listes enfants */
.msb-lol-comments-wrapper ol.comment-list .children > .msb-lol-comment-item {
    padding-left: 0; 
    margin-left: 0;
    border: none;
    background-color: transparent; 
}

/* Ligne de connexion horizontale pour chaque commentaire enfant */
.msb-lol-comments-wrapper ol.comment-list .children > .msb-lol-comment-item::before {
    content: '';
    position: absolute;
    left: -25px; 
    top: 36px; /* Ajusté pour un avatar de 42px et padding-top de l'article de var(--space-md) (16px) -> 16 + 42/2 - 2/2 = 16+21-1 = 36px */
    width: 20px;
    height: 2px; 
    background-color: var(--clr-border-accent); /* LIGNE HORIZONTALE DORÉE */
}


.msb-lol-comments-wrapper ol.comment-list .children > .msb-lol-comment-item:first-child {
    margin-top: 0;
}

.msb-lol-comments-wrapper ol.comment-list .children > .msb-lol-comment-item:last-child {
    margin-bottom: 0;
}

/* Formulaire de réponse (comments_form) */
.msb-lol-comments-wrapper #respond { 
    margin-top: var(--space-lg);
    background-color: var(--clr-bg-element);
    padding: var(--space-md);
    border: 1px solid var(--clr-border-secondary);
    border-radius: var(--border-radius);
    position: relative; /* Pour l'overlay */
}

.msb-lol-comments-wrapper #respond .comment-form p { 
    margin-bottom: var(--space-md);
}
.msb-lol-comments-wrapper #respond .comment-form label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--clr-text-secondary);
    font-weight: bold;
}

.msb-lol-comments-wrapper #respond input[type="text"],
.msb-lol-comments-wrapper #respond input[type="email"],
.msb-lol-comments-wrapper #respond input[type="url"],
.msb-lol-comments-wrapper #respond textarea#comment { 
    background-color: var(--clr-bg-container);
    border: 1px solid var(--clr-border-primary);
    color: var(--clr-text-primary);
    padding: var(--space-sm);
    width: 100%;
    border-radius: var(--border-radius);
    box-sizing: border-box; /* Ajouté pour la cohérence */
}
.msb-lol-comments-wrapper #respond textarea#comment {
    min-height: 120px; 
}

.msb-lol-comments-wrapper #respond .form-submit input[type="submit"] { 
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent);
    font-weight: bold;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}
.msb-lol-comments-wrapper #respond .form-submit input[type="submit"]:hover {
     background-color: var(--clr-accent-gold-darker);
}

.msb-lol-comments-wrapper .logged-in-as,
.msb-lol-comments-wrapper .comment-notes,
.msb-lol-comments-wrapper .comment-form-cookies-consent {
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
}
.msb-lol-comments-wrapper .comment-form-cookies-consent input[type="checkbox"] {
    margin-right: var(--space-xs);
    vertical-align: middle;
}
.msb-lol-comments-wrapper .no-comments.msb-lol-comments-closed {
    text-align: center;
    padding: var(--space-md);
    color: var(--clr-text-secondary);
}


/* ==========================================================================
   Formulaire de Création de Sujet (msb_create_discussion_form shortcode)
   ========================================================================== */
.msb-lol-form { 
    background-color: var(--clr-bg-container);
    padding: var(--space-lg);
    border: 1px solid var(--clr-border-accent);
    border-radius: var(--border-radius);
}

.msb-lol-form .msb-form-field {
    margin-bottom: var(--space-lg);
}

.msb-lol-form label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--clr-text-heading);
    font-weight: bold;
}

.msb-lol-form input[type="text"],
.msb-lol-form select,
.msb-lol-form .wp-editor-wrap { 
    width: 100%;
    background-color: var(--clr-bg-element);
    border: 1px solid var(--clr-border-secondary);
    border-radius: var(--border-radius);
    color: var(--clr-text-primary);
    box-sizing: border-box; /* Ajouté */
}
.msb-lol-form input[type="text"],
.msb-lol-form select {
    padding: var(--space-sm) var(--space-md);
}

.msb-lol-form .wp-editor-tools { 
    background-color: var(--clr-bg-element) !important; 
    padding: var(--space-xs) var(--space-sm) !important;
    border-bottom: 1px solid var(--clr-border-secondary) !important;
}
.msb-lol-form .wp-editor-tabs button.wp-switch-editor { 
    background-color: var(--clr-bg-sidebar) !important;
    color: var(--clr-text-secondary) !important;
    border-color: var(--clr-border-primary) !important;
    height: auto !important;
    padding: var(--space-xs) var(--space-sm) !important;
}
.msb-lol-form .wp-editor-tabs button.wp-switch-editor.active {
    background-color: var(--clr-bg-element) !important;
    color: var(--clr-text-primary) !important;
}
.msb-lol-form textarea.wp-editor-area { /* Cible la textarea de l'éditeur */
    background-color: var(--clr-bg-element) !important; /* Doit souvent être important */
    color: var(--clr-text-primary) !important;
    padding: var(--space-sm) !important;
    border: none !important; 
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important; 
    min-height: 200px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.msb-lol-form .msb-form-submit input[type="submit"] {
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent);
    padding: var(--space-md);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: var(--font-base); 
    font-size: var(--font-size-base); 
    line-height: normal; 
}
.msb-lol-form .msb-form-submit input[type="submit"]:hover {
    background-color: var(--clr-accent-gold-darker);
}

.msb-lol-form .msb-lol-error,
.msb-lol-form .msb-lol-success,
.msb-lol-form .msb-lol-info { 
    padding: var(--space-sm);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
}
.msb-lol-form .msb-lol-error {
    background-color: rgba(205, 74, 74, 0.1); 
    border: 1px solid #CD4A4A;
}
.msb-lol-form .msb-lol-error p {
    color: #CD4A4A; 
    margin: var(--space-xs) 0;
}
.msb-lol-form .msb-lol-success {
    background-color: rgba(74, 205, 74, 0.1);
    border: 1px solid #4ACD4A;
}
.msb-lol-form .msb-lol-success p {
    color: #4ACD4A;
    margin: var(--space-xs) 0;
}
.msb-lol-form .msb-lol-info {
    background-color: rgba(var(--clr-accent-blue-highlight), 0.1);
    border: 1px solid var(--clr-accent-blue-highlight);
}
.msb-lol-form .msb-lol-info p {
    color: var(--clr-accent-blue-highlight);
    margin: var(--space-xs) 0;
}

main.site-main.msb-lol-create-discussion-page.site-main-empty-content,
main.site-main.msb-lol-single-thread-page.site-main-empty-content,
main.site-main.msb-lol-archive-thread-page.site-main-empty-content,
main.site-main.site-main-empty-content:has(> .content-area.content-area-empty-content > .msb-lol-forum-wrapper) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

main.site-main.msb-lol-create-discussion-page.site-main-empty-content > .content-area.content-area-empty-content,
main.site-main.msb-lol-single-thread-page.site-main-empty-content > .content-area.content-area-empty-content,
main.site-main.msb-lol-archive-thread-page.site-main-empty-content > .content-area.content-area-empty-content,
main.site-main.site-main-empty-content:has(> .content-area.content-area-empty-content > .msb-lol-forum-wrapper) > .content-area.content-area-empty-content {
    padding: 0 !important;
}

.msb-lol-forum-wrapper {
    margin-top: 0;
    padding-top: 0; 
    width: 100%; 
    max-width: var(--max-width-forum); 
    margin-left: auto; 
    margin-right: auto; 
}

.msb-lol-content-wrapper-outer {
    margin: var(--space-md) auto var(--space-lg) auto;
}

/* ==========================================================================
   Emoji Picker Dark Theme Styles (Mon Super Board)
   ========================================================================== */
.emoji-picker {
    background-color: var(--clr-bg-element);
    border: 1px solid var(--clr-border-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: var(--font-base);
    display: flex;
    flex-direction: column;
}
.emoji-picker__search-container {
    flex-shrink: 0; 
}
.emoji-picker__content {
    flex-grow: 1; 
    overflow-y: auto; 
    min-height: 0; 
    display: flex; 
    flex-direction: column; 
}
.emoji-picker__tabs-container, 
.emoji-picker__tab-body.active,
.emoji-picker__emojis.search-results { 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; 
}
.emoji-picker__tab-body.active .emoji-picker__emojis,
.emoji-picker__emojis.search-results .emoji-picker__emojis { 
    flex-grow: 1;
}
.emoji-picker__emojis.search-results {
    height: auto !important; 
    flex-grow: 1;
}
.emoji-picker__preview {
    flex-shrink: 0;
    border-top: 1px solid var(--clr-divider);
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; 
    height: auto; 
    min-height: 2.5em; 
    padding: var(--space-xs) var(--space-sm); 
    box-sizing: border-box;
}
.emoji-picker__preview-emoji {
    font-size: 2em;                 
    line-height: 1 !important;      
    margin-right: var(--space-sm);
    flex-shrink: 0;                 
    position: relative;             
    top: -3px;                      
    display: inline-block;
}
.emoji-picker__preview-name {
    color: var(--clr-text-secondary);
    font-size: 0.85em;
    line-height: 1.2; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.emoji-picker__tab {
    color: var(--clr-text-secondary); 
    padding-top: var(--space-sm); 
    padding-bottom: var(--space-sm);
}
.emoji-picker__tab:hover {
    color: var(--clr-text-link-hover); 
}
.emoji-picker__tab.active {
    border-bottom: 3px solid var(--clr-accent-gold); 
    color: var(--clr-accent-gold); 
}
.emoji-picker__tab-body h2 {
    color: var(--clr-text-heading);
    border-bottom: 1px solid var(--clr-divider);
    padding-bottom: var(--space-xs);
    margin-top: var(--space-xs); 
    margin-bottom: var(--space-md);
}
.emoji-picker__emojis {
    scrollbar-width: thin; 
    scrollbar-color: var(--clr-accent-gold-darker) var(--clr-bg-container); 
}
.emoji-picker__emojis::-webkit-scrollbar {
    width: 10px; 
}
.emoji-picker__emojis::-webkit-scrollbar-track {
    background: var(--clr-bg-container); 
    border-radius: 5px; 
}
.emoji-picker__emojis::-webkit-scrollbar-thumb {
    background-color: var(--clr-accent-gold); 
    border-radius: 5px; 
    border: 2px solid var(--clr-bg-container); 
}
.emoji-picker__emojis::-webkit-scrollbar-thumb:hover {
    background-color: var(--clr-accent-gold-darker); 
}
.emoji-picker__emojis::-webkit-scrollbar-button {
    display: none; 
}
.emoji-picker__emoji:hover,
.emoji-picker__emoji:focus {
    background-color: var(--clr-bg-element-hover);
    outline: none;
}
.emoji-picker__search-container input[type="text"],
.emoji-picker__search-container input { 
    background-color: var(--clr-bg-container); 
    color: var(--clr-text-primary); 
    border: 1px solid var(--clr-border-secondary); 
    padding-left: var(--space-sm); 
    box-sizing: border-box;
}
.emoji-picker__search-container input[type="text"]::placeholder,
.emoji-picker__search-container input::placeholder {
    color: var(--clr-text-secondary); 
}
.emoji-picker__search-icon,
.emoji-picker__search-not-found-icon {
    color: var(--clr-text-secondary); 
}
.emoji-picker__search-icon svg, 
.emoji-picker__search-not-found-icon svg {
    fill: currentColor;
}
.emoji-picker__search-not-found {
    color: var(--clr-text-secondary); 
}
.emoji-picker__variant-overlay {
    background-color: rgba(0, 0, 0, 0.65); 
}
.emoji-picker__variant-popup {
    background-color: var(--clr-bg-element); 
    border: 1px solid var(--clr-border-primary); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.emoji-picker__variant-popup-close-button {
    color: var(--clr-text-secondary); 
}
.emoji-picker__variant-popup-close-button:hover {
    color: var(--clr-text-link-hover);
}
.emoji-picker__variant-popup-close-button svg { 
    fill: currentColor;
}

/* Indication de réponse à un commentaire */
.msb-replying-to-info {
    background-color: var(--clr-bg-element);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--clr-border-accent);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    position: relative;
}
.msb-replying-to-info p {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--clr-text-secondary);
}
.msb-replying-to-info p .reply-to-author {
    color: var(--clr-text-link);
    font-weight: bold;
}
.msb-replying-to-info .reply-to-snippet {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--clr-text-primary);
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) 0 var(--space-sm) 0;
    border-left: 3px solid var(--clr-accent-gold);
    background-color: var(--clr-bg-container);
    border-radius: var(--border-radius);
    overflow: hidden;
    line-height: 1.4;
}
.msb-cancel-reply-button {
    background-color: var(--clr-accent-gold-darker);
    border: none;
    color: #FFFFFF;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: inline-block;
    margin-top: var(--space-xs);
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.msb-cancel-reply-button:hover {
    background-color: var(--clr-accent-gold);
}
.msb-lol-comments-wrapper .comment-list .msb-lol-comment-item {
    list-style: none;
}
.msb-lol-comments-wrapper .comment-body.msb-lol-comment-body.msb-article-bg-primary {
    background-color: var(--clr-bg-comment-primary);
}
.msb-lol-comments-wrapper .comment-body.msb-lol-comment-body.msb-article-bg-secondary {
    background-color: var(--clr-bg-comment-secondary);
}
/* Styles pour l'overlay de connexion au formulaire de commentaire */
body:not(.logged-in) .msb-lol-comments-wrapper #respond .comment-form {
    opacity: 0.25; 
    pointer-events: none; 
}
body:not(.logged-in) .msb-lol-comments-wrapper #respond .wp-editor-wrap,
body:not(.logged-in) .msb-lol-comments-wrapper #respond .wp-editor-tools,
body:not(.logged-in) .msb-lol-comments-wrapper #respond .form-submit input[type="submit"] {
    pointer-events: none !important; 
}
body:not(.logged-in) .msb-lol-comments-wrapper #respond .form-submit input[type="submit"] {
    background-color: var(--clr-border-secondary); 
    color: var(--clr-text-secondary);
    cursor: not-allowed;
}
body:not(.logged-in) .msb-lol-comments-wrapper #respond > .comment-reply-title {
    opacity: 0.25; 
    pointer-events: none;
}
.msb-comment-login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--clr-bg-element-rgb), 0.85); 
    z-index: 20; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
    border-radius: var(--border-radius); 
    text-align: center;
}
.msb-comment-login-overlay .msb-comment-login-message a {
    color: var(--clr-accent-gold);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--clr-accent-gold);
    border-radius: var(--border-radius);
    background-color: rgba(var(--clr-bg-page-rgb), 0.9); 
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
    position: relative; 
    z-index: 21; 
}
.msb-comment-login-overlay .msb-comment-login-message a:hover {
    background-color: var(--clr-accent-gold);
    color: var(--clr-bg-page); 
}
body.logged-in .msb-lol-comments-wrapper #respond .comment-form,
body.logged-in .msb-lol-comments-wrapper #respond > .comment-reply-title,
body.logged-in .msb-lol-comments-wrapper #respond .wp-editor-wrap,
body.logged-in .msb-lol-comments-wrapper #respond .wp-editor-tools,
body.logged-in .msb-lol-comments-wrapper #respond .form-submit input[type="submit"] {
    opacity: 1;
    pointer-events: auto; 
}
body.logged-in .msb-lol-comments-wrapper #respond .form-submit input[type="submit"].msb-lol-submit-button {
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent);
    cursor: pointer;
}
body.logged-in .msb-lol-comments-wrapper #respond .form-submit input[type="submit"].msb-lol-submit-button:hover {
    background-color: var(--clr-accent-gold-darker);
}
.msb-lol-comments-wrapper #respond .comment-form-comment-wrapper .wp-editor-wrap {
    background-color: var(--clr-bg-container); 
    border: 1px solid var(--clr-border-primary); 
    border-radius: var(--border-radius);
}
.msb-lol-comments-wrapper #respond .comment-form-comment-wrapper .msb-comment-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--clr-text-secondary);
    font-weight: bold;
}

/* Styles pour l'affichage des votes des sujets (liste) et effet de survol */
.msb-lol-thread-vote-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 45px; /* Ajustez selon la largeur désirée */
    text-align: center;
    color: var(--clr-text-primary);
    cursor: default; /* Indique que ce n'est pas cliquable en soi */
    position: relative; /* Contexte de positionnement pour .vote-score-details */
    height: auto; 
    min-height: 36px; /* Hauteur minimale pour un bon alignement */
    padding: 2px 0; 
}

.msb-lol-thread-vote-display .msb-lol-vote-count {
    font-size: var(--font-size-lg); /* ex: 16px */
    font-weight: bold;
    line-height: 1.2; 
    display: block; 
    position: relative; /* Contexte pour .vote-score-details */
    width: 100%; 
    min-height: calc(var(--font-size-lg) * 1.2); /* Hauteur minimale basée sur la taille et interligne */
}

/* Styles pour le score net et les détails des scores (positif/négatif) */
.msb-lol-thread-vote-display .vote-score-net,
.msb-lol-thread-vote-display .vote-score-details {
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 100%; 
    transition: opacity 0.2s ease-in-out, visibility 0s 0.2s; /* Transition pour opacité, visibilité instantanée après délai */
    backface-visibility: hidden; 
}

.msb-lol-thread-vote-display .vote-score-net {
    opacity: 1;
    visibility: visible;
    position: relative; /* Reste dans le flux normal par défaut */
    z-index: 2; 
}

.msb-lol-thread-vote-display .vote-score-details {
    opacity: 0;
    visibility: hidden; /* Caché par défaut */
    position: absolute; 
    top: 50%; /* Centre verticalement */
    left: 0; 
    transform: translateY(-50%); /* Ajustement fin pour le centrage vertical */
    pointer-events: none; /* Non interactif car superposé */
    font-size: 0.85em; /* Légèrement plus petit pour les détails */
    z-index: 1; 
    line-height: 1.1; /* Ajuster pour un bon rendu des chiffres et du séparateur */
}

/* Effet de survol */
.msb-lol-thread-vote-display:hover .vote-score-net {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s; /* Pas de délai pour cacher */
    z-index: 1; 
}

.msb-lol-thread-vote-display:hover .vote-score-details {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Affichage immédiat de la visibilité au survol */
    z-index: 2; 
    pointer-events: auto; /* Rendre interactif si jamais nécessaire, mais ici juste pour affichage */
}

.msb-lol-thread-vote-display .vote-score-details .vote-up-count {
    color: #4CAF50; /* Vert pour votes positifs */
    font-weight: bold;
}

.msb-lol-thread-vote-display .vote-score-details .vote-separator {
    color: var(--clr-text-secondary);
    margin: 0 3px; /* Espace autour du séparateur */
}

.msb-lol-thread-vote-display .vote-score-details .vote-down-count {
    color: #F44336; /* Rouge pour votes négatifs */
    font-weight: bold;
}

.msb-lol-thread-vote-display .msb-lol-vote-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--clr-text-secondary);
    line-height: 1; 
    margin-top: 2px; 
}

/* Styles pour les contrôles de vote cliquables (sujet unique et commentaires) */
.msb-lol-vote-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs); 
}

.msb-comment-vote { /* Pour les commentaires, en colonne */
    flex-direction: column;
    margin-right: var(--space-sm); 
}
.msb-lol-comment-vote-wrapper { /* Wrapper avatar + votes dans les commentaires */
    display: flex;
    align-items: flex-start; 
    gap: var(--space-sm);
    flex-shrink: 0; 
}

.msb-vote-btn {
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    font-size: 1.1em; 
    line-height: 1; 
}
.msb-vote-btn:hover {
    color: var(--clr-text-link);
}
.msb-vote-btn.active.msb-vote-up {
    color: #4CAF50; 
}
.msb-vote-btn.active.msb-vote-down {
    color: #F44336; 
}
.msb-vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.msb-vote-score { /* Score affiché entre les boutons cliquables */
    font-weight: bold;
    color: var(--clr-text-primary);
    padding: var(--space-xs) 0;
    min-width: 20px; 
    text-align: center;
    font-size: 0.95em; 
}

.msb-thread-vote { /* Pour le sujet principal, si contrôles cliquables en ligne */
    flex-direction: row; 
}
.msb-lol-thread-header .msb-thread-vote { /* Positionnement des votes cliquables pour le sujet */
    margin-right: var(--space-md); 
}

.msb-comment-vote-display { 
    margin-right: var(--space-sm); /* Conserve la marge qu'avaient les anciens boutons de vote */
    /* Vous pouvez ajouter ici d'autres ajustements spécifiques si nécessaire */
}

/* Styles pour les contrôles de vote cliquables (sujet unique et commentaires) */
.msb-lol-vote-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs); 
    position: relative; /* Contexte pour le positionnement absolu des détails */
}

/* Classe pour gérer le survol sur les conteneurs de vote */
.msb-vote-hover-container .msb-vote-score-wrapper {
    position: relative; /* Important pour positionner .vote-score-details */
    padding: var(--space-xs) 0; /* Un peu d'espace vertical si besoin */
    cursor: default;
    display: inline-block; /* Pour que le span prenne la largeur de son contenu */
    min-width: 20px; /* Pour que le score net soit visible */
    text-align: center;
}

.msb-vote-hover-container .msb-vote-score { /* C'est le .vote-score-net */
    font-weight: bold;
    color: var(--clr-text-primary);
    font-size: 0.95em; 
    display: inline-block; /* Reste inline-block */
    transition: opacity 0.2s ease-in-out;
    line-height: 1.2; /* Assurer une hauteur de ligne suffisante */
}

.msb-vote-hover-container .vote-score-details {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrer par rapport au parent .msb-vote-score-wrapper */
    width: auto; /* Ajuster à la largeur du contenu */
    min-width: 100%; /* Assurer qu'il couvre au moins la largeur du score net */
    padding: 0 2px; /* Petit padding horizontal */
    background-color: var(--clr-bg-element); /* Fond pour lisibilité si chevauchement */
    border-radius: var(--border-radius);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-size: 0.85em; /* Plus petit pour les détails */
    line-height: 1.1;
    z-index: 10; /* Au-dessus du score net lors du survol */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    white-space: nowrap; /* Empêcher le retour à la ligne des détails */
}

.msb-vote-hover-container:hover .msb-vote-score.vote-score-net {
    opacity: 0;
}

.msb-vote-hover-container:hover .vote-score-details {
    opacity: 1;
    visibility: visible;
}

.msb-vote-hover-container .vote-score-details .vote-up-count {
    color: #4CAF50; 
    font-weight: bold;
}

.msb-vote-hover-container .vote-score-details .vote-separator {
    color: var(--clr-text-secondary);
    margin: 0 3px; 
}

.msb-vote-hover-container .vote-score-details .vote-down-count {
    color: #F44336; 
    font-weight: bold;
}


/* Ajustements spécifiques pour les votes des commentaires si nécessaire */
.msb-comment-vote { /* Classe existante pour la disposition en colonne */
    flex-direction: column;
    /* margin-right: var(--space-sm);  Déjà géré par .msb-lol-comment-vote-wrapper ? Ou à remettre ici si .msb-lol-vote-controls est direct enfant */
}

/* Si .msb-comment-vote est le conteneur direct (.msb-lol-vote-controls.msb-comment-vote) */
.msb-lol-vote-controls.msb-comment-vote {
     margin-right: var(--space-sm);
}

/* Le msb-lol-vote-label (ex: "VOTE") qui était sous .msb-lol-thread-vote-display 
   n'est plus dans cette structure. Si vous voulez un libellé "vote" sous le score net,
   il faudrait l'ajouter dans la structure HTML et le styler.
   L'image que vous avez montrée semble avoir ce "VOTE" sous les chiffres.
   Cependant, la structure .msb-lol-vote-controls ne l'avait pas.
   La structure .msb-lol-thread-vote-display (celle de la liste des sujets) l'a.
*/

/* Pour éviter le chevauchement avec un libellé "VOTE" si vous l'ajoutez : */
.msb-lol-vote-controls .msb-vote-label { /* Si vous ajoutez un span.msb-vote-label */
    font-size: 10px;
    text-transform: uppercase;
    color: var(--clr-text-secondary);
    line-height: 1;
    margin-top: 2px; /* Espace entre le score et le libellé */
    display: block; /* Pour qu'il soit sous le score */
    text-align: center;
}

/* Styles pour les boutons eux-mêmes (probablement déjà existants et corrects) */
.msb-vote-btn {
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    font-size: 1.1em; 
    line-height: 1; 
}
.msb-vote-btn:hover {
    color: var(--clr-text-link);
}
.msb-vote-btn.active.msb-vote-up {
    color: #4CAF50; 
}
.msb-vote-btn.active.msb-vote-down {
    color: #F44336; 
}
.msb-vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- MODIFICATION PRINCIPALE ICI --- */
/* Assure que les votes du sujet principal ET des commentaires soient en colonne */
.msb-lol-vote-controls.msb-thread-vote,
.msb-lol-vote-controls.msb-comment-vote {
    flex-direction: column;
}

/* Couleurs pour les scores de vote nets */
.msb-score-positive {
    color: #4CAF50 !important; /* Vert - Utilisez !important si nécessaire pour surcharger d'autres styles */
}

.msb-score-negative {
    color: #F44336 !important; /* Rouge - Utilisez !important si nécessaire pour surcharger d'autres styles */
}

/* ==========================================================================
   Info-bulle pour les boutons de tri
   ========================================================================== */

/* Styles pour l'info-bulle des tris */
.msb-sort-tooltip-trigger {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    cursor: help;
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-text-secondary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 20px; /* Ajustez pour un meilleur centrage vertical du '?' */
    font-weight: bold;
    font-size: var(--font-size-base);
    user-select: none;
    vertical-align: middle; /* IMPORTANT pour l'alignement vertical du '?' */
}

/* Classe pour positionner à gauche (ajoutée par JS si besoin) */
.msb-sort-tooltip-content.position-left {
    left: auto;
    right: calc(100% + 10px); /* À gauche du trigger */
    /* top: 0; transform: translateY(0); restent par défaut */
}

/* Classe pour positionner au-dessus (ajoutée par JS si besoin sur petits écrans) */
.msb-sort-tooltip-content.position-top {
    top: auto;
    bottom: calc(100% + 10px); /* Au-dessus du trigger */
    left: 50%;
    transform: translateX(-50%); /* Centrer horizontalement */
}

/* Classe pour positionner en dessous (ajoutée par JS si besoin sur petits écrans) */
.msb-sort-tooltip-content.position-bottom {
    top: calc(100% + 10px); /* En dessous du trigger */
    bottom: auto;
    left: 50%;
    transform: translateX(-50%); /* Centrer horizontalement */
}

.msb-sort-tooltip-content .tooltip-item {
    display: block;
    margin-bottom: var(--space-sm);
}
.msb-sort-tooltip-content .tooltip-item:last-child {
    margin-bottom: 0;
}

.msb-sort-tooltip-content strong {
    color: var(--clr-accent-gold);
    font-weight: bold;
}

/* ==========================================================================
   Nouveaux Styles pour l'Info-bulle (gérée par JS)
   ========================================================================== */

/* Masque le contenu de l'infobulle dans le HTML d'origine */
.msb-sort-tooltip-trigger > .msb-sort-tooltip-content {
    display: none;
}

/* Style de base pour l'infobulle positionnée par JS dans le body */
.msb-sort-tooltip-content {
    position: fixed; /* position: fixed résout tous les problèmes de clipping et de z-index */
    visibility: hidden;
    opacity: 0;
    width: auto;
    max-width: 280px; 
    min-width: 200px;
    z-index: 10002; /* Au-dessus de tout le reste */
    
    background-color: var(--clr-bg-element);
    border: 1px solid var(--clr-border-primary);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: var(--space-md);
    
    color: var(--clr-text-primary);
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    font-weight: normal;
    text-align: left;
    
    transition: opacity 0.25s ease-in-out, visibility 0.25s;
    pointer-events: none; /* Important pour ne pas interférer avec les clics */
}

/* Flèche de l'infobulle */
.msb-sort-tooltip-content::after {
    content: "";
    position: absolute;
    border-width: 7px;
    border-style: solid;
}

/* Positionnement de la flèche pour une infobulle à droite */
.msb-sort-tooltip-content.position-right::after {
    top: 10px; /* Positionne la flèche à 10px du haut de l'infobulle */
    right: 100%; 
    border-color: transparent var(--clr-bg-element) transparent transparent;
}

/* Positionnement de la flèche pour une infobulle à gauche */
.msb-sort-tooltip-content.position-left::after {
    top: 10px; /* Positionne la flèche à 10px du haut de l'infobulle */
    left: 100%;
    border-color: transparent transparent transparent var(--clr-bg-element);
}

/* Positionnement de la flèche pour une infobulle en bas */
.msb-sort-tooltip-content.position-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -7px;
    border-color: transparent transparent var(--clr-bg-element) transparent;
}

/* --- FLÈCHE AJUSTÉE --- */
.msb-sort-tooltip-content::after {
    content: "";
    position: absolute;
    border-width: 7px;
    border-style: solid;
}

/* Flèche par défaut (infobulle à droite, flèche pointe à gauche, alignée en haut) */
.msb-sort-tooltip-content:not(.position-left):not(.position-top):not(.position-bottom)::after {
    right: 100%; 
    top: 10px; /* Positionne la flèche près du haut de l'infobulle. Ajustez. */
    /* margin-top: 0; pas besoin de translateY pour la flèche si top est fixe */
    border-color: transparent var(--clr-bg-element) transparent transparent;
}

/* Flèche quand l'infobulle est à gauche (pointe à droite, alignée en haut) */
.msb-sort-tooltip-content.position-left::after {
    left: 100%;
    top: 10px; 
    border-color: transparent transparent transparent var(--clr-bg-element);
}

/* Flèche quand l'infobulle est au-dessus (pointe vers le bas, centrée) */
.msb-sort-tooltip-content.position-top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--clr-bg-element) transparent transparent transparent;
}

/* Flèche quand l'infobulle est en dessous (pointe vers le haut, centrée) */
.msb-sort-tooltip-content.position-bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent transparent var(--clr-bg-element) transparent;
}

/* ==========================================================================
   Styles de base pour la Sidebar Gauche (PC et Mobile avant modification)
   (Ces styles sont ceux que vous aviez déjà pour la version PC)
   ========================================================================== */
.msb-lol-sidebar-left {
  flex: 0 0 260px;
  background-color: var(--clr-bg-sidebar);
  padding: var(--space-md);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--border-radius);
  align-self: flex-start;
  /* PAS de position: fixed, transform, height: 100vh, etc. ici */
}

/* Styles pour les sections internes de la sidebar (comme vous les aviez) */
.msb-lol-sidebar-section {
    margin-bottom: var(--space-lg);
}
.msb-lol-sidebar-section:last-child {
    margin-bottom: 0;
}

/* LES BOUTONS MOBILES SONT TOTALEMENT CACHÉS PAR DÉFAUT */
.msb-mobile-sidebar-toggle-btn,
.msb-sidebar-close-btn {
    display: none !important; /* Force à cacher sur PC */
}

/* Styles pour le conteneur global des notifications */
.msb-global-notifications-container {
    position: fixed; /* Reste visible même en scrollant */
    top: 0; 
    left: 0; /* Changé de left: 50%; transform: translateX(-50%); */
    width: 100%; /* Prend toute la largeur pour que align-items: center fonctionne */
    z-index: 10000; /* Très élevé pour être au-dessus de tout */
    display: flex;
    flex-direction: column; /* Les notifications s'empileront verticalement */
    align-items: center; /* Centrer les notifications (les toasts eux-mêmes) horizontalement */
    /* padding-top: 80px; /* SUPPRIMÉ ou COMMENTÉ: Sera géré par JavaScript */
    pointer-events: none; /* Permet de cliquer "à travers" le conteneur s'il est vide ou entre les notifications */
    box-sizing: border-box; /* Bon à avoir pour les calculs de padding/width */
}

/* Styles pour chaque notification individuelle (toast) */
.msb-notification-toast {
    /* ... (styles existants du toast restent inchangés) ... */
    padding: var(--space-md, 16px);
    background-color: var(--clr-bg-element-hover, #202831); /* Fond du toast */
    border: 1px solid var(--clr-border-secondary, #353F4D);
    border-left-width: 5px; /* Bordure latérale colorée pour indiquer le type */
    border-radius: var(--border-radius, 3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Ombre portée plus prononcée */
    color: var(--clr-text-primary, #C8C8C8);
    min-width: 300px;  /* Largeur minimale du toast */
    max-width: 500px;  /* Largeur maximale, s'adapte au contenu */
    margin-bottom: var(--space-md, 16px); /* Espace entre les toasts s'il y en a plusieurs */
    pointer-events: auto; /* Les toasts eux-mêmes doivent être cliquables/interactifs */

    /* Animation d'apparition/disparition */
    opacity: 0;
    transform: translateY(-30px) scale(0.95); /* Commence un peu au-dessus et plus petit */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.msb-notification-toast.visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* Revient à sa position et taille normale */
}

/* Couleurs pour les types de notifications */
.msb-notification-toast.msb-toast-error {
    border-left-color: #CD4A4A; /* Rouge pour erreur */
}
.msb-notification-toast.msb-toast-error .msb-toast-title { /* Si vous ajoutez un titre au toast */
    color: #CD4A4A;
}

.msb-notification-toast.msb-toast-info {
    border-left-color: var(--clr-accent-blue-highlight, #0BC6E3); /* Bleu pour info */
}
.msb-notification-toast.msb-toast-info .msb-toast-title {
    color: var(--clr-accent-blue-highlight, #0BC6E3);
}

.msb-notification-toast.msb-toast-success {
    border-left-color: #4CAF50; /* Vert pour succès */
}
.msb-notification-toast.msb-toast-success .msb-toast-title {
    color: #4CAF50;
}

.msb-notification-toast a {
    color: var(--clr-text-link, #CDA158); /* Utiliser la couleur des liens de votre thème */
    text-decoration: underline;
}
.msb-notification-toast a:hover {
    color: var(--clr-text-link-hover, #E8C37E);
}

/* Optionnel : Pour ajouter une icône et un titre au toast */
.msb-notification-toast .msb-toast-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm, 8px);
}
.msb-notification-toast .msb-toast-icon {
    margin-right: var(--space-sm, 8px);
    font-size: 1.2em; /* Ajustez la taille de l'icône */
}
.msb-notification-toast .msb-toast-title {
    font-weight: bold;
}
.msb-notification-toast .msb-toast-message {
    font-size: 0.95em;
}

/* Optionnel : Bouton de fermeture pour le toast */
.msb-toast-close-button {
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    font-size: 1.2em;
    padding: 0 var(--space-xs);
    margin-left: auto; /* Pousse le bouton à droite */
    cursor: pointer;
    line-height: 1;
}
.msb-toast-close-button:hover {
    color: var(--clr-text-primary);
}

/* ==========================================================================
   Styles pour la modération des sujets
   ========================================================================== */
.msb-thread-moderation-actions {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-divider);
    text-align: right; /* Ou left, ou center selon votre préférence */
}

.msb-admin-button {
    background-color: var(--clr-accent-gold-darker);
    color: #FFFFFF !important;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    font-weight: bold;
    transition: background-color 0.2s ease;
    margin-left: var(--space-sm); /* Si plusieurs boutons plus tard */
}

.msb-admin-button:hover,
.msb-admin-button:focus {
    background-color: var(--clr-accent-gold);
    color: #FFFFFF !important;
    outline: none;
}

.msb-admin-button:disabled {
    background-color: var(--clr-border-secondary);
    color: var(--clr-text-secondary) !important;
    cursor: not-allowed;
}

.msb-thread-status-info {
    background-color: rgba(var(--clr-accent-blue-highlight-rgb, 20), 198, 227, 0.1); /* Adaptez si vous n'avez pas de var RGB */
    border: 1px solid var(--clr-accent-blue-highlight, #0BC6E3);
    color: var(--clr-accent-blue-highlight, #0BC6E3);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-top: var(--space-lg);
    text-align: center;
}

.msb-ajax-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--clr-accent-gold);
    border-top-color: transparent;
    border-radius: 50%;
    animation: msb-spinner-rotation 0.75s linear infinite;
    margin-left: var(--space-sm);
    vertical-align: middle;
}

@keyframes msb-spinner-rotation {
    to {
        transform: rotate(360deg);
    }
}

/* Assurez-vous que le formulaire de commentaire est bien caché si nécessaire */
#respond[style*="display: none"] {
    display: none !important;
}

/* ==========================================================================
   Styles pour la modération des commentaires
   ========================================================================== */
.msb-lol-delete-link {
    margin-left: var(--space-sm);
}

.msb-lol-delete-link a,
.msb-delete-comment-btn { /* Appliquer les styles directement au lien */
    color: #CD4A4A; /* Rouge pour suppression */
    text-decoration: none;
    font-weight: normal; /* Peut être bold si vous préférez */
}

.msb-lol-delete-link a:hover,
.msb-delete-comment-btn:hover {
    color: #F44336; /* Rouge plus clair au survol */
    text-decoration: underline;
}

/* Style pour le commentaire pendant sa suppression (transition) */
.msb-lol-comment-item {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Style pour le bouton de signalement */
.msb-report-button {
    background-color: transparent;
    border: 1px solid var(--clr-text-secondary);
    color: var(--clr-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-left: var(--space-sm); /* Pour espacer des autres liens/boutons */
    vertical-align: middle; /* Bon alignement avec d'autres éléments inline */
}

.msb-report-button:hover {
    background-color: var(--clr-border-primary); /* Un fond léger au survol */
    color: var(--clr-text-link);
    border-color: var(--clr-text-link);
}

.msb-report-button i.fas {
    margin-right: var(--space-xs);
}

.msb-report-button.reported, /* Si vous ajoutez une classe après signalement */
.msb-report-button:disabled {
    background-color: var(--clr-bg-element-hover);
    color: var(--clr-accent-gold);
    border-color: var(--clr-accent-gold);
    cursor: default;
    opacity: 0.7;
}
.msb-report-button:disabled i.fa-spinner {
    margin-right: 5px;
}


/* Styles pour la section des actions de sujet (contenant les boutons admin et signalement) */
.msb-thread-actions {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-divider);
    display: flex;
    justify-content: space-between; /* Aligne les éléments aux extrémités */
    align-items: center;
}

/* Le conteneur des boutons de modération admin (s'il est distinct du bouton de signalement) */
.msb-thread-moderation-actions {
    /* Pas besoin de marges/padding ici si .msb-thread-actions gère l'espacement */
    text-align: right; /* Garde les boutons admin à droite si .msb-report-button est à gauche */
}

/* Ajustement pour le lien de signalement dans les commentaires */
.report-comment-link.msb-lol-report-link {
    margin-left: var(--space-sm);
}
.report-comment-link.msb-lol-report-link .msb-report-button {
    padding: 2px 6px; /* Plus petit pour s'intégrer avec les autres meta de commentaire */
    border: none;
    background: none;
    color: var(--clr-text-secondary); /* Couleur de base comme les autres liens meta */
}
.report-comment-link.msb-lol-report-link .msb-report-button:hover {
    color: #CD4A4A; /* Rouge distinctif pour le survol du signalement */
    background: none;
    border: none;
    text-decoration: underline;
}
.report-comment-link.msb-lol-report-link .msb-report-button.reported,
.report-comment-link.msb-lol-report-link .msb-report-button:disabled {
    color: var(--clr-accent-gold);
    opacity: 1;
    border: none;
    background: none;
}

/* Style pour les tables dans l'admin */
.wrap.msb-moderation-wrap table th,
.wrap.msb-moderation-wrap table td {
    vertical-align: middle;
}
.wrap.msb-moderation-wrap .button {
    margin-right: 5px;
    margin-bottom: 5px; /* Pour les petits écrans où les boutons pourraient s'empiler */
}

/* Message de confirmation/erreur dans la page de modération admin */
#msb-moderation-message .notice {
    margin: 15px 0 0 0;
}

/* ==========================================================================
   Sujets Épinglés
   ========================================================================== */
.msb-lol-pinned-threads-list {
  background-color: var(--clr-bg-element); /* Fond des sujets épinglés, un bleu plus clair que les sujets normaux */
  /* Si vous avez une variable pour un bleu encore plus clair :
  background-color: var(--clr-bg-pinned-element, #1E2A3A); /* Fallback si la variable n'existe pas */
  border: 1px solid var(--clr-border-accent); /* Bordure dorée */
  border-radius: var(--border-radius);
  margin-bottom: var(--space-lg); /* Espace entre les épinglés et la liste normale */
}

.msb-lol-pinned-threads-list .msb-lol-thread-item {
  background-color: transparent; /* Le fond est sur le conteneur parent */
  /* border-bottom: 1px solid var(--clr-divider); */ /* Garder la bordure si vous voulez des séparateurs internes */
}

.msb-lol-pinned-threads-list .msb-lol-thread-item:last-child {
  border-bottom: none; /* Pas de bordure en bas pour le dernier épinglé */
}

/* Ajustement si le fond des items épinglés doit être différent du conteneur global des épinglés */
.msb-lol-pinned-threads-list .msb-lol-thread-item.msb-pinned-item {
    background-color: var(--clr-bg-element-pinned);
}

/* L'icône d'épingle reste comme avant */
.msb-lol-thread-item .title .msb-pinned-icon {
    color: var(--clr-accent-gold);
    margin-right: var(--space-xs);
    font-size: 0.9em;
    vertical-align: middle;
}

.msb-admin-button.msb-delete-button {
    background-color: #c0392b; /* Rouge pour suppression */
    /* Vous pouvez ajouter d'autres styles comme une couleur de texte différente si nécessaire */
}

.msb-admin-button.msb-delete-button:hover,
.msb-admin-button.msb-delete-button:focus {
    background-color: #a93226; /* Rouge plus foncé au survol */
}

.msb-admin-button.msb-delete-button i.fas {
    margin-right: var(--space-xs);
}

/* ==========================================================================
   Animations et Highlights (Nouveau)
   ========================================================================== */

.msb-replying-to-info.highlight-active {
    animation: msb-highlight-flash 0.3s ease-out forwards, 
               msb-highlight-border 1s ease-in-out 0.3s forwards; /* Démarre après le flash */
    position: relative; /* Nécessaire si on utilise z-index dans l'animation */
    z-index: 5; /* Pour s'assurer que le highlight est visible */
}

@keyframes msb-highlight-flash {
    0% {
        background-color: var(--clr-bg-element);
        box-shadow: 0 0 0 0 rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0); /* Assurez-vous d'avoir --clr-accent-gold-rgb */
    }
    50% {
        background-color: rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0.3); /* Flash doré semi-transparent */
        box-shadow: 0 0 15px 5px rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0.5);
    }
    100% {
        background-color: var(--clr-bg-element);
        box-shadow: 0 0 0 0 rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0);
    }
}

@keyframes msb-highlight-border {
    0% {
        border-color: var(--clr-border-accent); /* Couleur de bordure initiale */
        outline: 0px solid rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0.0);
    }
    25% {
        border-color: var(--clr-accent-gold); /* Bordure plus vive */
        outline: 3px solid rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0.3);
    }
    50% {
        border-color: var(--clr-accent-gold-darker); /* Retour à une couleur plus sombre */
        outline: 1px solid rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0.1);
    }
    100% {
        border-color: var(--clr-border-accent); /* Retour à la couleur de bordure initiale */
        outline: 0px solid rgba(var(--clr-accent-gold-rgb, 205, 161, 88), 0.0);
    }
}

.msb-lol-thread-stats {
    /* display: flex; est déjà présent */
    align-items: center; /* Assure l'alignement vertical de l'icône avec le reste */
}

.msb-thread-locked-icon {
    color: var(--clr-text-secondary); /* Ou une couleur plus distinctive si vous préférez, ex: var(--clr-accent-gold) */
    font-size: 0.9em; /* Ajustez la taille de l'icône si nécessaire */
    margin-right: var(--space-sm); /* Espace entre le cadenas et le bloc de stats "Réponses" */
                                  /* Ajustez var(--space-xs) si vous voulez moins d'espace */
    line-height: 1; /* Pour éviter des décalages verticaux */
}

/*
   Règle pour s'assurer que les conteneurs DU THÈME
   ne forcent pas une largeur excessive LORSQUE le forum est affiché.
   Le sélecteur :has() cible le parent (.content-area ou main.site-main)
   uniquement s'il contient .msb-lol-forum-wrapper.
*/
main.site-main:has(.msb-lol-forum-wrapper),
main.site-main > .content-area:has(.msb-lol-forum-wrapper) {
    max-width: 100vw !important; /* Empêche le conteneur du thème de déborder sur mobile/tablette */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 0 !important; /* Annule les paddings du thème qui pourraient créer un espace non désiré */
    padding-right: 0 !important;
    margin-left: 0 !important; /* S'assure qu'il prend toute la largeur disponible */
    margin-right: 0 !important;
}

/* Styles pour le wrapper principal de votre forum */
.msb-lol-forum-wrapper {
    width: 100% !important;
    /* La max-width est gérée par --max-width-forum sur desktop (1500px)
       et sera surchargée par la media query mobile ci-dessous. */
    max-width: var(--max-width-forum) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    position: relative; /* Peut aider à contenir les enfants positionnés absolument */
}

/* Conteneurs internes au forum */
.msb-lol-forum-wrapper .msb-lol-content-wrapper-outer,
.msb-lol-forum-wrapper .msb-lol-main-container,
.msb-lol-forum-wrapper .msb-lol-content-area {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Styles spécifiques pour mobile afin de s'assurer que le forum ne dépasse pas l'écran */
@media (max-width: 991.98px) {
    .msb-lol-forum-wrapper {
        max-width: 100vw !important; /* Force la largeur max à celle du viewport sur mobile */
        /* Ajoutez un padding interne au wrapper du forum si vous voulez un espace avec les bords de l'écran */
        /* Si votre thème ajoute déjà un padding aux conteneurs principaux, vous pourriez ne pas en avoir besoin ici,
           ou vous devrez peut-être annuler les paddings des parents comme fait avec main.site-main:has(...) plus haut. */
        padding-left: var(--space-sm, 8px);  /* var(--space-sm) vient de votre CSS de plugin */
        padding-right: var(--space-sm, 8px);
    }

    /* Si la sidebar du plugin elle-même posait problème (ce que vous avez écarté, mais par sécurité) */
    .msb-lol-sidebar-left {
        box-sizing: border-box !important; /* Au cas où */
        /* width: 280px !important; */ /* Déjà présent */
        /* max-width: 85% !important; */ /* Déjà présent */
    }
}

/* Styles pour la classe de correction JS (si le CSS seul ne suffit pas) */
.msb-lol-forum-wrapper.js-layout-corrected {
    /* Cette classe sera ajoutée par JS. Les !important ici sont pour s'assurer qu'ils s'appliquent. */
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   STYLES UNIQUEMENT POUR MOBILE ( écrans <= 991.98px )
   ========================================================================== */
@media (max-width: 991.98px) {

    .msb-lol-forum-wrapper.js-layout-corrected {
    max-width: 100vw !important;
    /* Si vous voulez être sûr qu'il ne dépasse pas son parent qui lui-même ne devrait pas dépasser 100vw */
    /* width: 100% !important; */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Il peut aussi être utile de s'assurer que les conteneurs principaux sont bien limités */
@media (max-width: 991.98px) {
    body, html { /* Assurez-vous qu'ils ne créent pas de scrollbar horizontale non désirée */
        overflow-x: hidden;
    }
    main.site-main, /* Ciblez plus spécifiquement si vous avez des classes uniques */
    div.content-area { /* Ciblez plus spécifiquement si vous avez des classes uniques */
        max-width: 100vw !important; /* Ou 100% */
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

    /* Affichage du bouton de bascule mobile */
    /* Affichage du bouton de bascule mobile */
    .msb-mobile-sidebar-toggle-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 15px;
        left: auto;
        bottom: 37.5vh;
        z-index: 1050;
        background-color: var(--clr-accent-gold);
        color: var(--clr-bg-page);
        border: none;
        border-radius: 6px;
        width: 40px;
        height: auto;
        min-height: 65px;
        padding: var(--space-sm) 3px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        
        opacity: 0.5 !important; /* Opacité permanente à 50% */
        /* Ajustement de la transition si l'opacité ne change plus */
        transition: background-color 0.2s ease, transform 0.3s ease-out, box-shadow 0.2s ease;
    }

    /* Style pour le survol et focus, sans changer l'opacité */
    .msb-mobile-sidebar-toggle-btn:hover,
    .msb-mobile-sidebar-toggle-btn:focus,
    .msb-mobile-sidebar-toggle-btn.msb-sidebar-is-open { /* L'état ouvert garde aussi 50% d'opacité */
        background-color: var(--clr-accent-gold-darker); /* Peut toujours changer de couleur de fond */
        box-shadow: 0 3px 7px rgba(0,0,0,0.25);
        /* opacity: 1; Supprimé pour garder 0.5 */
    }
    
    /* Styles pour la sidebar quand elle s'ouvre (elle s'ouvre toujours depuis la gauche) */
    .msb-lol-sidebar-left {
        /* ... (les styles pour .msb-lol-sidebar-left restent inchangés, elle s'ouvre toujours depuis la gauche) ... */
        position: fixed !important;
        left: 0; /* S'ouvre depuis la gauche */
        right: auto; /* S'assure qu'elle ne tente pas de se positionner à droite */
        top: 0;
        height: 100vh !important;
        width: 280px !important; 
        max-width: 85% !important; 
        z-index: 1040 !important;
        transform: translateX(-100%) !important; 
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
        overflow-y: auto !important;
        box-shadow: none !important;
        background-color: var(--clr-bg-sidebar) !important; 
        border: 1px solid var(--clr-border-accent) !important; 
        border-radius: 0 !important;
        padding-top: calc(var(--space-md) + 40px) !important;
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        padding-bottom: var(--space-md) !important;
        box-sizing: border-box !important;
    }

    .msb-lol-sidebar-left.msb-sidebar-is-open {
        transform: translateX(0) !important; /* Apparition depuis la gauche */
        box-shadow: 5px 0 15px rgba(0,0,0,0.2) !important;
    }

    /* Bouton de fermeture interne à la sidebar */
    .msb-sidebar-close-btn { /* */
        display: flex !important; /* Utiliser flex pour centrer l'icône */
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: var(--space-sm); /* Un peu d'espace depuis le haut */
        right: var(--space-sm); /* Un peu d'espace depuis la droite */
        background: transparent;
        border: none;
        color: var(--clr-text-secondary);
        width: 40px; /* Taille cliquable */
        height: 40px; /* Taille cliquable */
        padding: 0;
        cursor: pointer;
        z-index: 10; /* Au-dessus du contenu de la sidebar */
    }
    .msb-sidebar-close-btn:hover {
        color: var(--clr-text-link-hover);
    }
    .msb-sidebar-close-btn svg { /* */
         width: 24px;
         height: 24px;
         fill: currentColor;
    }

    /* Reste des styles mobiles comme l'overlay ... */
    body.msb-mobile-sidebar-active::after { /* */
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1030; /* En dessous de la sidebar mais au-dessus du contenu */
    }

    /* S'assurer que le conteneur principal ne garde pas d'espace pour la sidebar PC */
    .msb-lol-main-container {
         gap: 0; /* Si le gap était pour la sidebar PC */
    }
    .msb-lol-content-area {
        width: 100%; 
        margin-left: 0; 
    }

    .msb-lol-header-bar .boards-nav .sort-by-label {
        display: none; /* Cache simplement le label */
    }
    .msb-lol-header-bar .boards-nav a:first-of-type {
        margin-left: 0; /* Annule la marge du premier lien s'il n'y a plus de label */
    }
    
    .msb-lol-thread-item {
        display: grid;
        /* Définition des colonnes :
           Col 1 (auto): pour les votes
           Col 2 (auto): pour l'avatar
           Col 3 (1fr) : pour le contenu principal (titre, meta, stats) qui prendra l'espace restant
        */
        grid-template-columns: auto auto 1fr;
        /* Définition des lignes :
           Row 1 (auto): pour le titre (dans la 3ème colonne)
           Row 2 (auto): pour les métadonnées (dans la 3ème colonne)
           Row 3 (auto): pour les statistiques (dans la 3ème colonne)
        */
        grid-template-rows: auto auto auto;
        column-gap: var(--space-md); /* Espace entre les colonnes (ex: avatar et titre) */
        row-gap: var(--space-xs);    /* Espace vertical entre le bloc meta et le bloc stats dans la 3ème colonne */
        align-items: start;          /* Aligne les éléments en haut de leur cellule de grille */
        padding: var(--space-md) 0;  /* Padding vertical pour l'ensemble de l'item */
    }

    .msb-lol-thread-item {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: var(--space-md);
        row-gap: var(--space-xs);
        /* align-items: start; */ /* Modifié ci-dessous */
        align-items: center; /* MODIFIÉ : Centre verticalement tous les items de la grille par rapport à la hauteur de la ligne la plus haute */
                             /* Si une ligne est plus haute que les autres, les items des autres lignes seront centrés par rapport à cette hauteur. */
                             /* Pour un centrage par rapport à l'item lui-même, on utilisera align-self sur l'item spécifique. */
    }


    .msb-lol-thread-vote-display {
        grid-column: 1;
        grid-row: 1 / span 3;
        display: flex;
        flex-direction: column;
        align-items: center;      /* Centre horizontalement le contenu (chiffre et label) */
        justify-content: center;  /* Centre verticalement le contenu (chiffre et label) DANS CE CONTENEUR */
        align-self: center;       /* MODIFIÉ : Centre ce conteneur de vote verticalement dans sa cellule de grille */
                                  /* qui s'étend sur 3 lignes. */
    }
    .msb-lol-thread-vote-display .msb-lol-vote-count {
        font-size: var(--font-size-lg);
        margin-bottom: 2px;
        line-height: 1;
    }
    .msb-lol-thread-vote-display .msb-lol-vote-label {
        font-size: 10px;
        text-transform: uppercase;
        color: var(--clr-text-secondary);
        display: block;
    }
    .msb-lol-thread-vote-display .vote-score-details {
        display: none !important;
    }
    .msb-lol-thread-vote-display:hover .vote-score-net {
        opacity: 1;
        visibility: visible;
    }

    .msb-lol-thread-avatar {
        grid-column: 2;
        grid-row: 1 / span 3;
        display: flex;
        align-items: center;    /* S'assure que l'avatar lui-même est centré dans ce conteneur flex */
        align-self: center;     /* MODIFIÉ : Centre ce conteneur d'avatar verticalement dans sa cellule de grille */
    }
    .msb-lol-thread-avatar img {
        width: 36px;
        height: 36px;
    }

    /* Le reste de .msb-lol-thread-main-content et .msb-lol-thread-stats reste comme dans la version précédente */
    /* pour qu'ils s'empilent correctement dans la 3ème colonne. */
    .msb-lol-thread-main-content {
        grid-column: 3;
        grid-row: 1 / span 2; /* Occupe les deux premières "lignes" pour titre et meta */
        display: flex;
        flex-direction: column;
        justify-content: center; /* MODIFIÉ : Centre verticalement le bloc titre/meta si la ligne est plus haute */
        min-width: 0;
    }

    .msb-lol-thread-main-content .title {
        white-space: normal; /* Permet au titre de passer à la ligne */
        overflow: visible;   /* Annule le masquage de débordement */
        text-overflow: clip; /* Annule l'ellipsis */
        font-size: var(--font-size-lg); /* Taille désirée pour le titre */
        line-height: 1.3;
        margin-bottom: var(--space-xs); /* Espace entre le titre et les métadonnées */
    }
    .msb-lol-thread-main-content .title a {
        display: block; /* Pour que le lien prenne toute la largeur du titre */
        color: var(--clr-text-heading);
    }
     .msb-lol-thread-main-content .title a:hover {
        color: var(--clr-text-link-hover);
    }
    /* Spécifique pour l'icône d'épingle dans le titre */
    .msb-lol-thread-main-content .title .msb-pinned-icon {
        display: inline-block;
        vertical-align: middle; /* Ou top, baseline selon l'icône */
        margin-right: var(--space-xs);
        font-size: 0.9em; /* Ajuster par rapport à la taille du titre */
    }


    .msb-lol-thread-main-content .meta {
        font-size: var(--font-size-sm); /* Taille pour les métadonnées */
        color: var(--clr-text-secondary);
        line-height: 1.4;
    }

    .msb-lol-thread-stats {
        grid-column: 3; /* Se place dans la troisième colonne */
        grid-row: 3;    /* Se place sur la troisième "ligne" de la 3ème colonne, sous le bloc titre/meta */
        display: flex;
        align-items: center;
        gap: var(--space-md); /* Espace entre le cadenas, "Réponses" et "Vues" */
        padding-top: var(--space-sm); /* Crée le "décalage un peu vers le bas" souhaité */
    }

    .msb-thread-locked-icon {
        font-size: var(--font-size-base); /* Ajuster si besoin */
        color: var(--clr-text-secondary);
    }

    .msb-lol-thread-stats .stat-item {
        display: flex;
        flex-direction: row; /* "0" et "RÉPONSES" sur la même ligne */
        align-items: baseline; /* Bon alignement vertical du chiffre et du label */
        gap: var(--space-xs); /* Petit espace entre le chiffre et le label */
        min-width: auto; /* Annule la largeur minimum du bureau */
    }
    .msb-lol-thread-stats .stat-item .count {
        font-size: var(--font-size-sm); /* Taille des chiffres */
        color: var(--clr-text-primary);
    }
    .msb-lol-thread-stats .stat-item .label {
        font-size: calc(var(--font-size-sm) * 0.85); /* Taille des labels (Réponses, Vues) */
        text-transform: uppercase;
        color: var(--clr-text-secondary);
    }
}

/* ==========================================================================
   ANIMATIONS AJAX POUR LE FORUM
   ========================================================================== */

.msb-lol-content-area {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes simple-fade-out-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px); /* Un léger mouvement vers le haut */
    }
}

@keyframes simple-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px); /* Arrive d'un peu plus bas */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   LIGHT MODE STYLES - FORUM PLUGIN
   ========================================================================== */

html.light-mode .msb-lol-forum-wrapper {
    background-color: var(--color-background); /* Beige principal du thème */
    /* La bordure dorée principale du wrapper est déjà définie par --clr-border-accent */
}

html.light-mode .msb-lol-header-bar {
    background-color: var(--color-header); /* Beige du header du thème */
    color: var(--color-text); /* Couleur de texte principale du thème light */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */
}

html.light-mode .msb-lol-header-bar .boards-title {
    color: var(--color-text); /* Ou var(--clr-text-heading) si vous avez une variable plus spécifique pour les titres */
}

html.light-mode .msb-lol-header-bar .boards-nav a {
    color: var(--color-text-secondary); /* Un peu moins proéminent pour les liens de nav non actifs */
}

html.light-mode .msb-lol-header-bar .boards-nav a:hover,
html.light-mode .msb-lol-header-bar .boards-nav a.active {
    color: var(--clr-text-link); /* Doré pour l'état actif/survol */
}
html.light-mode .msb-lol-header-bar .boards-nav a::after {
    background-color: var(--clr-text-link); /* Doré pour la soulignement animé */
}

html.light-mode .msb-lol-sidebar-left {
    background-color: var(--color-component-background); /* Beige pour composants du thème */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */
}

html.light-mode .msb-lol-sidebar-section h2 {
    color: var(--color-text);
    border-bottom-color: var(--clr-border-primary, #E0D5C1); /* Une bordure beige plus claire ou dorée si vous préférez var(--clr-border-accent) */
}

html.light-mode .msb-lol-sidebar-section .rules-text {
    color: var(--color-text-secondary);
}

html.light-mode .msb-lol-btn-create-discussion {
    background-color: var(--clr-accent-gold-darker);
    color: var(--clr-text-on-accent, #FFFFFF) !important; /* Garder le texte contrasté */
    border-color: transparent; /* Ou var(--clr-accent-gold) si vous voulez une bordure visible en permanence */
}

html.light-mode .msb-lol-btn-create-discussion:hover {
    background-color: var(--clr-accent-gold);
    border-color: var(--clr-accent-gold);
}

html.light-mode .msb-lol-search-form input[type="search"] {
    background-color: var(--color-background); /* Beige le plus clair pour le champ */
    border: 1px solid var(--clr-border-secondary, #D4C0A5); /* Bordure beige/dorée claire */
    color: var(--color-text);
}
html.light-mode .msb-lol-search-form input[type="search"]::placeholder {
    color: var(--color-text-secondary);
}

html.light-mode .msb-lol-boards-list ul li a {
    color: var(--color-text-secondary);
    border-bottom-color: var(--clr-divider, #E0D5C1); /* Ligne de séparation beige */
}

html.light-mode .msb-lol-boards-list ul li a:hover,
html.light-mode .msb-lol-boards-list ul li a.active {
    color: var(--clr-text-link); /* Doré */
}

html.light-mode .msb-lol-boards-list ul li a .msb-lol-board-count {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-boards-list ul li a:hover .msb-lol-board-count,
html.light-mode .msb-lol-boards-list ul li a.active .msb-lol-board-count {
    color: var(--clr-text-link); /* Doré */
}

/* Contenu principal : Liste des sujets / Sujet unique */
html.light-mode .msb-lol-thread-list {
    background-color: var(--color-component-background); /* Beige pour le conteneur de la liste */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */
}

html.light-mode .msb-lol-thread-item {
    background-color: var(--color-background); /* Beige très clair pour chaque item */
    border-bottom: 1px solid var(--clr-divider, #E0D5C1); /* Séparateur beige */
}
html.light-mode .msb-lol-thread-item:hover {
    background-color: #F5F0E8; /* Un beige légèrement différent au survol, à ajuster */
}

html.light-mode .msb-lol-thread-main-content .title a {
    color: var(--color-text-heading, #4A3B31); /* Texte foncé pour titres */
}
html.light-mode .msb-lol-thread-main-content .title a:hover {
    color: var(--clr-text-link-hover); /* Doré au survol */
}

html.light-mode .msb-lol-thread-main-content .meta {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-thread-main-content .meta .author,
html.light-mode .msb-lol-thread-main-content .meta .board-name {
    color: var(--clr-text-link); /* Doré */
}

html.light-mode .msb-lol-thread-stats .stat-item {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-thread-stats .stat-item .count {
    color: var(--color-text);
}
html.light-mode .msb-lol-thread-stats .stat-item .label {
    color: var(--color-text-secondary);
}

html.light-mode .msb-lol-pagination a,
html.light-mode .msb-lol-pagination span.page-numbers {
    background-color: var(--color-component-background);
    color: var(--clr-text-link); /* Doré */
    border: 1px solid var(--clr-border-primary, #D4C0A5); /* Bordure beige/dorée claire */
}
html.light-mode .msb-lol-pagination a:hover,
html.light-mode .msb-lol-pagination span.page-numbers:not(.current):hover {
    background-color: var(--clr-accent-gold-darker);
    color: var(--clr-text-on-accent, #FFFFFF);
    border-color: var(--clr-accent-gold-darker);
}
html.light-mode .msb-lol-pagination span.page-numbers.current {
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent, #FFFFFF);
    border-color: var(--clr-accent-gold);
}

html.light-mode .msb-lol-no-threads {
    background-color: var(--color-background);
    color: var(--color-text-secondary);
}

/* Sujet Unique */
html.light-mode .msb-lol-single-thread-page .msb-lol-thread-item-full {
    background-color: var(--color-background); /* Beige clair pour le corps du sujet */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */
    padding: var(--space-lg);
}
html.light-mode .msb-lol-single-thread-page .msb-lol-thread-header {
    border-bottom: 1px solid var(--clr-divider, #E0D5C1); /* Séparateur beige */
}
html.light-mode .msb-lol-single-thread-page .msb-lol-thread-main-content-header .entry-title.msb-lol-thread-title {
    color: var(--color-text-heading, #4A3B31);
}
html.light-mode .msb-lol-single-thread-page .msb-lol-thread-meta {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-single-thread-page .entry-content.msb-lol-thread-content {
    color: var(--color-text);
}
html.light-mode .msb-lol-single-thread-page .entry-content a { /* Liens DANS le contenu du sujet */
    color: var(--clr-text-link-hover); /* Doré pour plus de brillance */
}

/* Section des Commentaires */
html.light-mode .msb-lol-comments-wrapper {
    background-color: var(--color-component-background); /* Fond beige pour la section commentaires */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */
}
html.light-mode .msb-lol-comments-wrapper .comments-title,
html.light-mode .msb-lol-comments-wrapper #reply-title.comment-reply-title {
    color: var(--color-text-heading, #4A3B31);
    border-bottom: 1px solid var(--clr-divider, #E0D5C1);
}

html.light-mode .msb-lol-comments-wrapper .comment-body.msb-lol-comment-body,
html.light-mode .msb-lol-comments-wrapper .comment-body.msb-lol-comment-body.msb-article-bg-primary,
html.light-mode .msb-lol-comments-wrapper .comment-body.msb-lol-comment-body.msb-article-bg-secondary {
    background-color: var(--color-background); /* Beige très clair pour chaque commentaire */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée sur chaque commentaire */
}
html.light-mode .msb-lol-comments-wrapper .comment-author.msb-lol-comment-author b.fn {
    color: var(--clr-text-link); /* Doré */
}
html.light-mode .msb-lol-comments-wrapper .comment-author.msb-lol-comment-author .says {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-comments-wrapper .comment-metadata.msb-lol-comment-metadata,
html.light-mode .msb-lol-comments-wrapper .comment-metadata a {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-comments-wrapper .comment-metadata a:hover {
    color: var(--clr-text-link-hover);
}
html.light-mode .msb-lol-comments-wrapper .comment-content.msb-lol-comment-text {
    color: var(--color-text);
}
html.light-mode .msb-lol-comments-wrapper .reply.msb-lol-reply-link .comment-reply-link {
    background-color: var(--clr-accent-gold-darker);
    color: var(--clr-text-on-accent, #FFFFFF) !important;
}
html.light-mode .msb-lol-comments-wrapper .reply.msb-lol-reply-link .comment-reply-link:hover {
    background-color: var(--clr-accent-gold);
}
html.light-mode .msb-lol-comments-wrapper ol.comment-list ul.children,
html.light-mode .msb-lol-comments-wrapper ol.comment-list ol.children {
    border-left: 2px solid var(--clr-border-accent); /* Ligne verticale dorée */
}
html.light-mode .msb-lol-comments-wrapper ol.comment-list .children > .msb-lol-comment-item::before {
    background-color: var(--clr-border-accent); /* Ligne horizontale dorée */
}
/* Formulaire de réponse */
html.light-mode .msb-lol-comments-wrapper #respond {
    background-color: var(--color-component-background); /* Fond beige pour le formulaire de réponse */
    border: 1px solid var(--clr-border-secondary, #D4C0A5); /* Bordure beige */
}
html.light-mode .msb-lol-comments-wrapper #respond label {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-comments-wrapper #respond input[type="text"],
html.light-mode .msb-lol-comments-wrapper #respond input[type="email"],
html.light-mode .msb-lol-comments-wrapper #respond input[type="url"],
html.light-mode .msb-lol-comments-wrapper #respond textarea#comment {
    background-color: var(--color-background); /* Fond de page (très clair) pour les champs */
    border: 1px solid var(--clr-border-primary, #D4C0A5);
    color: var(--color-text);
}
html.light-mode .msb-lol-comments-wrapper #respond .comment-form-comment-wrapper .wp-editor-wrap {
     background-color: var(--color-background);
     border-color: var(--clr-border-primary, #D4C0A5);
}
html.light-mode .msb-lol-comments-wrapper #respond .wp-editor-tools {
     background-color: var(--color-component-background) !important;
     border-bottom-color: var(--clr-border-primary, #E0D5C1) !important;
}
html.light-mode .msb-lol-comments-wrapper #respond .wp-editor-tabs button.wp-switch-editor {
    background-color: var(--color-header) !important;
    color: var(--color-text) !important;
    border-color: var(--clr-border-primary, #D4C0A5) !important;
}
html.light-mode .msb-lol-comments-wrapper #respond .wp-editor-tabs button.wp-switch-editor.active {
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
}
html.light-mode .msb-lol-comments-wrapper #respond textarea.wp-editor-area {
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
}

html.light-mode .msb-lol-comments-wrapper #respond .form-submit input[type="submit"].msb-lol-submit-button {
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent, #FFFFFF);
}
html.light-mode .msb-lol-comments-wrapper #respond .form-submit input[type="submit"].msb-lol-submit-button:hover {
    background-color: var(--clr-accent-gold-darker);
}
html.light-mode .msb-lol-comments-wrapper .logged-in-as,
html.light-mode .msb-lol-comments-wrapper .comment-notes,
html.light-mode .msb-lol-comments-wrapper .comment-form-cookies-consent {
    color: var(--color-text-secondary);
}
html.light-mode .msb-comment-login-overlay {
    background-color: rgba(250, 240, 230, 0.85); /* Fond beige semi-transparent pour l'overlay */
}
html.light-mode .msb-comment-login-overlay .msb-comment-login-message a {
    color: var(--clr-accent-gold);
    border: 2px solid var(--clr-accent-gold);
    background-color: rgba(250, 240, 230, 0.95); /* Fond beige quasi opaque pour le bouton */
}
html.light-mode .msb-comment-login-overlay .msb-comment-login-message a:hover {
    background-color: var(--clr-accent-gold);
    color: var(--color-background); /* Texte sur couleur d'accent */
}


/* Formulaire de Création de Sujet */
html.light-mode .msb-lol-form {
    background-color: var(--color-component-background); /* Fond beige pour le formulaire */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */
}
html.light-mode .msb-lol-form label {
    color: var(--color-text-heading, #4A3B31);
}
html.light-mode .msb-lol-form input[type="text"],
html.light-mode .msb-lol-form select,
html.light-mode .msb-lol-form .wp-editor-wrap {
    background-color: var(--color-background); /* Beige très clair pour les champs */
    border: 1px solid var(--clr-border-secondary, #D4C0A5);
    color: var(--color-text);
}
html.light-mode .msb-lol-form .wp-editor-tools {
    background-color: var(--color-component-background) !important;
    border-bottom-color: var(--clr-border-secondary, #D4C0A5) !important;
}
html.light-mode .msb-lol-form .wp-editor-tabs button.wp-switch-editor {
    background-color: var(--color-header) !important; /* Beige header pour onglets inactifs */
    color: var(--color-text) !important;
    border-color: var(--clr-border-primary, #E0D5C1) !important;
}
html.light-mode .msb-lol-form .wp-editor-tabs button.wp-switch-editor.active {
    background-color: var(--color-background) !important; /* Beige le plus clair pour onglet actif */
    color: var(--color-text) !important;
}
html.light-mode .msb-lol-form textarea.wp-editor-area {
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
}
html.light-mode .msb-lol-form .msb-form-submit input[type="submit"] {
    background-color: var(--clr-accent-gold);
    color: var(--clr-text-on-accent, #FFFFFF);
}
html.light-mode .msb-lol-form .msb-form-submit input[type="submit"]:hover {
    background-color: var(--clr-accent-gold-darker);
}

/* Votes et Signalements en Light Mode */
html.light-mode .msb-lol-vote-btn {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-vote-btn:hover {
    color: var(--clr-text-link); /* Doré */
}
html.light-mode .msb-vote-score { /* Score net affiché */
    color: var(--color-text);
}
/* Les classes .msb-score-positive et .msb-score-negative pour le score net
   sont déjà définies avec des couleurs vertes/rouges qui devraient convenir.
   Si vous voulez des tons plus doux pour le light mode : */
html.light-mode .msb-score-positive {
    color: #4CAF50 !important; /* Vert standard, ou un vert plus pastel */
}
html.light-mode .msb-score-negative {
    color: #F44336 !important; /* Rouge standard, ou un rouge plus pastel */
}

/* Icône de cadenas pour sujet verrouillé */
html.light-mode .msb-thread-locked-icon {
    color: var(--color-text-secondary);
}

/* Tooltip pour les tris */
html.light-mode .msb-sort-tooltip-trigger {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}
/* Styles pour le thème clair (si vous en avez un) */
html.light-mode .msb-sort-tooltip-content {
    background-color: var(--color-background);
    border: 1px solid var(--clr-border-primary, #D4C0A5);
    color: var(--color-text);
}
html.light-mode .msb-sort-tooltip-content strong {
    color: var(--clr-accent-gold); /* Doré pour le texte en gras */
}
/* Flèches du tooltip - adapter les couleurs pour le fond beige */
html.light-mode .msb-sort-tooltip-content:not(.position-left):not(.position-top):not(.position-bottom)::after {
    border-color: transparent var(--color-background) transparent transparent;
}
html.light-mode .msb-sort-tooltip-content.position-right::after {
    border-right-color: var(--color-background);
}
html.light-mode .msb-sort-tooltip-content.position-left::after {
    border-left-color: var(--color-background);
}
html.light-mode .msb-sort-tooltip-content.position-bottom::after {
    border-bottom-color: var(--color-background);
}

/* Sujets Épinglés */
html.light-mode .msb-lol-pinned-threads-list {
  background-color: var(--color-component-background); /* Un beige un peu plus soutenu pour le conteneur des épinglés */
  border: 1px solid var(--clr-border-accent); /* Bordure dorée conservée */
}
html.light-mode .msb-lol-pinned-threads-list .msb-lol-thread-item.msb-pinned-item {
    background-color: #FFFBF5; /* Un beige très, très clair, presque blanc cassé pour les items épinglés, pour se distinguer un peu */
                                 /* Ou var(--color-background) si vous préférez le même que les sujets normaux */
}
html.light-mode .msb-lol-thread-item .title .msb-pinned-icon {
    color: var(--clr-accent-gold); /* L'icône d'épingle reste dorée */
}

/* Overlay pour PicMo et autres popups (à adapter si PicMo n'utilise pas les variables du thème) */
html.light-mode .emoji-picker { /* Si vous avez des styles personnalisés pour PicMo */
    background-color: var(--color-component-background);
    border-color: var(--clr-border-primary, #D4C0A5);
    color: var(--color-text);
}
html.light-mode .emoji-picker__search-container input {
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
    border-color: var(--clr-border-secondary, #D4C0A5) !important;
}
html.light-mode .emoji-picker__tab:hover {
    color: var(--clr-text-link-hover);
}
html.light-mode .emoji-picker__tab.active {
    border-bottom-color: var(--clr-accent-gold);
    color: var(--clr-accent-gold);
}
html.light-mode .emoji-picker__emojis::-webkit-scrollbar-track {
    background: var(--color-component-background);
}
html.light-mode .emoji-picker__emojis::-webkit-scrollbar-thumb {
    background-color: var(--clr-accent-gold);
    border-color: var(--color-component-background);
}
html.light-mode .emoji-picker__preview {
    border-top-color: var(--clr-divider, #E0D5C1);
}
html.light-mode .emoji-picker__preview-name {
     color: var(--color-text-secondary);
}

/* Indication "En réponse à" */
html.light-mode .msb-replying-to-info {
    background-color: var(--color-component-background);
    border: 1px solid var(--clr-border-accent); /* Doré pour cet élément important */
}
html.light-mode .msb-replying-to-info p {
    color: var(--color-text-secondary);
}
html.light-mode .msb-replying-to-info p .reply-to-author {
    color: var(--clr-text-link); /* Doré */
}
html.light-mode .msb-replying-to-info .reply-to-snippet {
    color: var(--color-text);
    border-left: 3px solid var(--clr-accent-gold);
    background-color: var(--color-background); /* Beige très clair pour le snippet */
}
html.light-mode .msb-cancel-reply-button {
    background-color: var(--clr-accent-gold-darker);
    color: var(--clr-text-on-accent, #FFFFFF);
}
html.light-mode .msb-cancel-reply-button:hover {
    background-color: var(--clr-accent-gold);
}

/* Notifications Toast */
html.light-mode .msb-notification-toast {
    background-color: var(--color-component-background); /* Fond beige pour le toast */
    border-color: var(--clr-border-secondary, #D4C0A5); /* Bordure beige */
    color: var(--color-text);
    box-shadow: 0 5px 15px rgba(74, 59, 49, 0.15); /* Ombre plus douce */
}
html.light-mode .msb-notification-toast a {
    color: var(--clr-text-link); /* Doré */
}
html.light-mode .msb-toast-close-button {
    color: var(--color-text-secondary);
}
html.light-mode .msb-toast-close-button:hover {
    color: var(--color-text);
}

/* Boutons de modération (admin) */
html.light-mode .msb-ajax-spinner {
    border-color: var(--clr-accent-gold);
    border-top-color: transparent;
}

/* Bouton de signalement */
html.light-mode .msb-report-button {
    border-color: var(--color-text-secondary);
    color: var(--color-text-secondary);
}
html.light-mode .msb-report-button:hover {
    background-color: var(--color-background); /* Beige très clair au survol */
    color: var(--clr-text-link); /* Doré */
    border-color: var(--clr-text-link);
}
html.light-mode .msb-report-button.reported,
html.light-mode .msb-report-button:disabled {
    background-color: var(--color-component-background);
    color: var(--clr-accent-gold);
    border-color: var(--clr-accent-gold);
}
/* Liens de signalement dans les commentaires */
html.light-mode .report-comment-link.msb-lol-report-link .msb-report-button {
    color: var(--color-text-secondary);
}
html.light-mode .report-comment-link.msb-lol-report-link .msb-report-button:hover {
    color: #CD4A4A; /* Garder un rouge distinctif pour le signalement survolé */
}
html.light-mode .report-comment-link.msb-lol-report-link .msb-report-button.reported,
html.light-mode .report-comment-link.msb-lol-report-link .msb-report-button:disabled {
    color: var(--clr-accent-gold);
}
html.light-mode .msb-lol-comments-wrapper ol.comment-list ul.children,
html.light-mode .msb-lol-comments-wrapper ol.comment-list ol.children {
    /* S'assurer que l'arrière-plan de l'espace créé par padding-left est correct */
    /* Cette couleur doit correspondre au fond attendu pour la zone d'indentation des commentaires imbriqués */
    background-color: var(--color-component-background); /* Ou var(--color-background) si vous préférez le fond de page principal */
    /* Les autres propriétés (margin-left, padding-left, border-left) restent les mêmes */
}

/* Vous pouvez également vous assurer que les items de commentaires eux-mêmes (leur .comment-body) */
/* ont le fond correct en mode clair, comme déjà défini : */
html.light-mode .msb-lol-comments-wrapper .comment-body.msb-lol-comment-body,
html.light-mode .msb-lol-comments-wrapper .comment-body.msb-lol-comment-body.msb-article-bg-primary,
html.light-mode .msb-lol-comments-wrapper .comment-body.msb-lol-comment-body.msb-article-bg-secondary {
    background-color: var(--color-background); /* Beige très clair pour chaque commentaire (Linen) */
    border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée sur chaque commentaire */
}
/* Le <li> de chaque commentaire (parent de <article> et de <ul.children>) */
/* Cette règle est NOUVELLE ou à AJUSTER pour s'assurer qu'elle a le bon fond */
html.light-mode .msb-lol-comments-wrapper .msb-lol-comment-item {
    background-color: var(--color-component-background); /* Beige (ex: #EADDCA) */
    /* Les autres styles comme margin-bottom, border-radius sont hérités ou déjà définis */
    /* Pas de bordure ici pour le <li>, elle est sur le .comment-body à l'intérieur */
}

.msb-lol-parent-category-title {
    display: block;
    padding: var(--space-sm) var(--space-xs);
    color: var(--clr-text-heading);
    font-weight: bold;
    font-size: calc(var(--font-size-base) * 1.1);
    cursor: default;
    margin-top: var(--space-sm);
}

.msb-lol-parent-category-title.active-parent-group {
    color: var(--clr-accent-gold);
}

/* Style de base pour les listes enfants (niveau 1, 2, 3...) */
.msb-lol-child-board-list {
    list-style: none;
    padding: 0;
    margin: var(--space-xs) 0 0 var(--space-md); /* Indentation de base pour chaque niveau */
}

.msb-lol-child-board-list.depth-2 {
    margin-left: var(--space-lg); /* Augmente l'indentation pour le niveau 2 */
}
.msb-lol-child-board-list.depth-3 {
    margin-left: var(--space-xl); /* Encore plus pour le niveau 3 */
}


.msb-lol-child-board-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    color: var(--clr-text-secondary);
    font-size: var(--font-size-base);
    font-weight: normal;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s ease;
}

/* Supprime la bordure inférieure du lien dans le DERNIER li du menu principal */
.msb-lol-boards-list > ul > li:last-child > a {
    border-bottom: none;
}

/* Supprime la bordure inférieure du lien dans le DERNIER li d'une sous-liste (enfant) */
.msb-lol-boards-list .msb-lol-child-board-list li:last-child > a {
    border-bottom: none;
}


.msb-lol-child-board-list li a:hover,
.msb-lol-child-board-list li a.active {
    color: var(--clr-text-link);
}

.msb-lol-child-board-list li a .msb-lol-board-count {
    font-size: var(--font-size-sm);
    color: inherit;
}

.msb-lol-category-separator {
    list-style-type: none;
    padding: 0;
    margin: var(--space-sm) 0;
}

.msb-lol-hr-separator {
    border: none;
    height: 1px;
    background-color: var(--clr-divider);
    margin: 0;
}

html.light-mode .msb-lol-parent-category-title {
    color: var(--color-text-heading, #4A3B31);
}
html.light-mode .msb-lol-parent-category-title.active-parent-group {
    color: var(--clr-accent-gold);
}
html.light-mode .msb-lol-child-board-list li a {
    color: var(--color-text-secondary);
}
html.light-mode .msb-lol-child-board-list li a:hover,
html.light-mode .msb-lol-child-board-list li a.active {
    color: var(--clr-text-link);
}
html.light-mode .msb-lol-hr-separator {
    background-color: var(--clr-divider, #E0D5C1);
}

/* ==========================================================================
   STYLES POUR LA SIDEBAR MOBILE EN LIGHT MODE
   ========================================================================== */
@media (max-width: 991.98px) {

    /* Thème clair pour la sidebar mobile quand elle est ouverte */
    html.light-mode .msb-lol-sidebar-left {
        background-color: var(--color-component-background) !important; /* Fond beige principal pour les composants */
        border-color: var(--clr-border-accent) !important; /* Conserve la bordure dorée */
    }

    /* Styles pour les textes et éléments à l'intérieur de la sidebar mobile en mode clair */
    html.light-mode .msb-lol-sidebar-left .msb-lol-sidebar-section h2,
    html.light-mode .msb-lol-sidebar-left .msb-lol-parent-category-title {
        color: var(--color-text-heading, #4A3B31); /* Couleur de titre foncée du thème clair */
        border-bottom-color: var(--clr-divider, #E0D5C1); /* Séparateur beige clair */
    }

    html.light-mode .msb-lol-sidebar-left .rules-text {
        color: var(--color-text-secondary);
    }

    html.light-mode .msb-lol-sidebar-left .msb-lol-parent-category-title.active-parent-group {
        color: var(--clr-accent-gold); /* Le groupe actif reste doré */
    }
    
    html.light-mode .msb-lol-sidebar-left .msb-lol-boards-list ul li a,
    html.light-mode .msb-lol-sidebar-left .msb-lol-child-board-list li a {
        color: var(--color-text-secondary);
    }
    
    html.light-mode .msb-lol-sidebar-left .msb-lol-boards-list ul li a:hover,
    html.light-mode .msb-lol-sidebar-left .msb-lol-boards-list ul li a.active,
    html.light-mode .msb-lol-sidebar-left .msb-lol-child-board-list li a:hover,
    html.light-mode .msb-lol-sidebar-left .msb-lol-child-board-list li a.active {
        color: var(--clr-text-link); /* Le survol et l'état actif restent dorés */
    }

    html.light-mode .msb-lol-sidebar-left .msb-lol-hr-separator {
        background-color: var(--clr-divider, #E0D5C1); /* Séparateur beige */
    }

    /* Assure que le bouton de fermeture est visible sur fond clair */
    html.light-mode .msb-lol-sidebar-left .msb-sidebar-close-btn {
        color: var(--color-text-secondary) !important;
    }

    html.light-mode .msb-lol-sidebar-left .msb-sidebar-close-btn:hover {
        color: var(--color-text) !important;
    }
}