/* ==========================================================================
   Module : Responsive Mobile & Animations AJAX
   ========================================================================== */

/* --- Corrections Layout & Overrides --- */
/*
   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;
}

/* --- Responsive Mobile (max-width: 991.98px) --- */
/* ==========================================================================
   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 --- */
/* ==========================================================================
   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 Mobile --- */
/* ==========================================================================
   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-child-board-list 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.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;
    }

    /* ==========================================================================
       Profondeur commentaires : réduction progressive de l'indentation mobile
       ========================================================================== */

    /* Niveau 1 de réponse : indentation réduite */
    .msb-lol-comments-wrapper ol.comment-list ul.children,
    .msb-lol-comments-wrapper ol.comment-list ol.children {
        margin-left: 8px;
        padding-left: 14px;
    }

    /* Lignes horizontales : ajuster la position */
    .msb-lol-comments-wrapper ol.comment-list .children > .msb-lol-comment-item::before {
        left: -14px;
        width: 10px;
    }

    /* Hitbox : ajuster la position */
    .msb-lol-comments-wrapper .children .msb-thread-line-hitbox {
        left: -8px;
    }

    /* Niveau 3+ : indentation minimale pour éviter l'écrasement du texte */
    .msb-lol-comments-wrapper .children .children .children {
        margin-left: 4px;
        padding-left: 10px;
    }

    .msb-lol-comments-wrapper .children .children .children > .msb-lol-comment-item::before {
        left: -10px;
        width: 6px;
    }

    /* Niveau 4+ : plus d'indentation, afficher "en réponse à" à la place */
    .msb-lol-comments-wrapper .children .children .children .children {
        margin-left: 0;
        padding-left: 8px;
        border-left-width: 1px;
    }

    .msb-lol-comments-wrapper .children .children .children .children > .msb-lol-comment-item::before {
        display: none;
    }

    /* Toggle button : taille réduite sur mobile */
    .msb-lol-comments-wrapper .children .msb-thread-toggle-btn {
        width: 18px;
        height: 18px;
        font-size: 11px;
        line-height: 18px;
        left: -2px;
    }
}