/* ========================================================================== Module:Header Bar,Sidebar (PC) & Tooltip ========================================================================== */ /* --- Dark Mode (défaut) --- */ /* ========================================================================== Barre de Titre du Forum (ttb-header-bar) ========================================================================== */ .ttb-header-bar{position:relative;isolation:isolate;background-color:transparent;border:none;clip-path:var(--chamfer-md)}.ttb-header-bar::before,.ttb-header-bar::after{content:'';position:absolute;z-index:-1;clip-path:var(--chamfer-md)}.ttb-header-bar::before{inset:0;background:var(--clr-border-accent)}.ttb-header-bar::after{inset:1px;background:var(--clr-bg-header-bar)}.ttb-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}.ttb-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}.ttb-header-bar .boards-nav{display:flex;align-items:center}.ttb-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}.ttb-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}.ttb-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}.ttb-header-bar .boards-nav a:hover{color:var(--clr-text-link)}.ttb-header-bar .boards-nav a:hover::after{transform:scaleX(1)}.ttb-header-bar .boards-nav a.active{color:var(--clr-text-link)}.ttb-header-bar .boards-nav a.active::after{transform:scaleX(1);background-color:var(--clr-text-link)}/* Reset des styles de lien de navigation pour le bouton actualiser */ .ttb-header-bar .boards-nav .ttb-refresh-btn{padding-bottom:0;font-weight:normal}.ttb-header-bar .boards-nav .ttb-refresh-btn::after{display:none}/* Lien "Retour au Forum" sur la page single */ .ttb-single-thread-page .ttb-header-bar .boards-nav a{color:var(--clr-text-link)}.ttb-single-thread-page .ttb-header-bar .boards-nav a:hover{color:var(--clr-text-link-hover)}/* ========================================================================== Sidebar Gauche (board-template.php) ========================================================================== */ .ttb-sidebar-left{flex:0 0 260px;position:relative;isolation:isolate;background-color:transparent;padding:var(--space-md);border:none;align-self:flex-start;clip-path:var(--chamfer-sm)}.ttb-sidebar-left::before,.ttb-sidebar-left::after{content:'';position:absolute;z-index:-1;clip-path:var(--chamfer-sm)}.ttb-sidebar-left::before{inset:0;background:var(--clr-border-accent)}.ttb-sidebar-left::after{inset:1px;background:var(--clr-bg-sidebar)}.ttb-sidebar-section{margin-bottom:var(--space-lg)}.ttb-sidebar-section:last-child{margin-bottom:0}.ttb-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}.ttb-sidebar-section .rules-text{font-size:var(--font-size-sm);color:var(--clr-text-secondary);line-height:1.4}.ttb-btn-create-discussion{display:block;position:relative;isolation:isolate;width:100%;color:#FFFFFF !important;padding:var(--space-md);text-align:center;font-weight:bold;text-transform:uppercase;margin-bottom:var(--space-lg);text-decoration:none;background:transparent;border:none;clip-path:var(--chamfer-sm);transition:color 0.2s ease}.ttb-btn-create-discussion::before,.ttb-btn-create-discussion::after{content:'';position:absolute;z-index:-1;clip-path:var(--chamfer-sm);transition:background 0.2s ease}.ttb-btn-create-discussion::before{inset:0;background:var(--clr-accent-gold)}.ttb-btn-create-discussion::after{inset:2px;background:var(--clr-accent-gold-darker)}.ttb-btn-create-discussion:hover{color:#FFFFFF !important;text-decoration:none}.ttb-btn-create-discussion:hover::after{background:var(--clr-accent-gold)}.ttb-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)}.ttb-search-form input[type="search"]::placeholder{color:var(--clr-text-secondary)}.ttb-boards-list ul{list-style:none;padding:0;margin:0}.ttb-boards-list ul li a{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-xs);color:var(--clr-text-secondary);font-size:var(--font-size-base);border-bottom:1px solid var(--clr-divider);transition:color 0.2s ease}.ttb-boards-list>ul>li:last-child>a{border-bottom:none}.ttb-boards-list ul li a:hover,.ttb-boards-list ul li a.active{color:var(--clr-text-link);text-decoration:none}.ttb-boards-list ul li a .ttb-board-count{font-size:var(--font-size-sm);color:var(--clr-text-secondary);transition:color 0.2s ease}.ttb-boards-list ul li a:hover .ttb-board-count,.ttb-boards-list ul li a.active .ttb-board-count{color:var(--clr-text-link)}/* ========================================================================== Info-bulle pour les boutons de tri ========================================================================== */ .ttb-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:1.375rem;height:1.375rem;text-align:center;line-height:1.25rem;font-weight:bold;font-size:var(--font-size-base);user-select:none;vertical-align:middle}.ttb-sort-tooltip-content.position-left{left:auto;right:calc(100% + 10px)}.ttb-sort-tooltip-content.position-top{top:auto;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%)}.ttb-sort-tooltip-content.position-bottom{top:calc(100% + 10px);bottom:auto;left:50%;transform:translateX(-50%)}.ttb-sort-tooltip-content .tooltip-item{display:block;margin-bottom:var(--space-sm)}.ttb-sort-tooltip-content .tooltip-item:last-child{margin-bottom:0}.ttb-sort-tooltip-content strong{color:var(--clr-accent-gold);font-weight:bold}/* ========================================================================== Styles pour l'Info-bulle (gérée par JS) ========================================================================== */ /* Masque le contenu de l'infobulle dans le HTML d'origine */ .ttb-sort-tooltip-trigger>.ttb-sort-tooltip-content{display:none}/* Style de base pour l'infobulle positionnée par JS dans le body */ .ttb-sort-tooltip-content{position:fixed;visibility:hidden;opacity:0;width:auto;max-width:17.5rem;min-width:12.5rem;z-index:10002;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}/* Flèche de l'infobulle */ .ttb-sort-tooltip-content::after{content:"";position:absolute;border-width:7px;border-style:solid}/* Positionnement de la flèche pour une infobulle à droite */ .ttb-sort-tooltip-content.position-right::after{top:10px;right:100%;border-color:transparent var(--clr-bg-element) transparent transparent}/* Positionnement de la flèche pour une infobulle à gauche */ .ttb-sort-tooltip-content.position-left::after{top:10px;left:100%;border-color:transparent transparent transparent var(--clr-bg-element)}/* Positionnement de la flèche pour une infobulle en bas */ .ttb-sort-tooltip-content.position-bottom::after{bottom:100%;left:50%;margin-left:-7px;border-color:transparent transparent var(--clr-bg-element) transparent}/* Flèche par défaut (infobulle à droite) */ .ttb-sort-tooltip-content:not(.position-left):not(.position-top):not(.position-bottom)::after{right:100%;top:10px;border-color:transparent var(--clr-bg-element) transparent transparent}/* Flèche quand l'infobulle est à gauche */ .ttb-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 */ .ttb-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 */ .ttb-sort-tooltip-content.position-bottom::after{bottom:100%;left:50%;transform:translateX(-50%);border-color:transparent transparent var(--clr-bg-element) transparent}/* ========================================================================== Styles pour la Sidebar Gauche (PC et Mobile) ========================================================================== */ .ttb-sidebar-section{margin-bottom:var(--space-lg)}.ttb-sidebar-section:last-child{margin-bottom:0}/* LES BOUTONS MOBILES SONT TOTALEMENT CACHÉS PAR DÉFAUT */ .ttb-mobile-sidebar-toggle-btn,.ttb-sidebar-close-btn{display:none !important}/* --- Light Mode --- */ html.light-mode .ttb-forum-wrapper{background-color:var(--color-background)}html.light-mode .ttb-header-bar{color:var(--color-text)}html.light-mode .ttb-header-bar::after{background:var(--color-header)}html.light-mode .ttb-header-bar .boards-title{color:var(--color-text)}html.light-mode .ttb-header-bar .boards-nav .sort-by-label{color:var(--color-text-secondary)}html.light-mode .ttb-header-bar .boards-nav a{color:var(--color-text-secondary)}html.light-mode .ttb-header-bar .boards-nav a:hover,html.light-mode .ttb-header-bar .boards-nav a.active{color:var(--clr-text-link)}html.light-mode .ttb-header-bar .boards-nav a::after{background-color:var(--clr-text-link)}html.light-mode .ttb-header-bar .boards-nav .ttb-refresh-btn.ttb-refresh--has-new{color:var(--clr-accent-gold);border-color:var(--clr-accent-gold)}html.light-mode .ttb-sidebar-left::after{background:var(--color-component-background)}html.light-mode .ttb-sidebar-section h2{color:var(--color-text);border-bottom-color:var(--clr-border-primary,#E0D5C1)}html.light-mode .ttb-sidebar-section .rules-text{color:var(--color-text-secondary)}html.light-mode .ttb-btn-create-discussion{color:var(--clr-text-on-accent,#FFFFFF) !important}html.light-mode .ttb-btn-create-discussion::after{background:var(--clr-accent-gold-darker)}html.light-mode .ttb-btn-create-discussion:hover::after{background:var(--clr-accent-gold)}html.light-mode .ttb-search-form input[type="search"]{background-color:var(--color-background);border:1px solid var(--clr-border-secondary,#D4C0A5);color:var(--color-text)}html.light-mode .ttb-search-form input[type="search"]::placeholder{color:var(--color-text-secondary)}html.light-mode .ttb-boards-list ul li a{color:var(--color-text-secondary);border-bottom-color:var(--clr-divider,#E0D5C1)}html.light-mode .ttb-boards-list ul li a:hover,html.light-mode .ttb-boards-list ul li a.active{color:var(--clr-text-link)}html.light-mode .ttb-boards-list ul li a .ttb-board-count{color:var(--color-text-secondary)}html.light-mode .ttb-boards-list ul li a:hover .ttb-board-count,html.light-mode .ttb-boards-list ul li a.active .ttb-board-count{color:var(--clr-text-link)}/* Tooltip pour les tris */ html.light-mode .ttb-sort-tooltip-trigger{color:var(--color-text-secondary);border-color:var(--color-text-secondary)}html.light-mode .ttb-sort-tooltip-content{background-color:var(--color-background);border:1px solid var(--clr-border-primary,#D4C0A5);color:var(--color-text)}html.light-mode .ttb-sort-tooltip-content strong{color:var(--clr-accent-gold)}/* Flèches du tooltip - adapter les couleurs pour le fond beige */ html.light-mode .ttb-sort-tooltip-content:not(.position-left):not(.position-top):not(.position-bottom)::after{border-color:transparent var(--color-background) transparent transparent}html.light-mode .ttb-sort-tooltip-content.position-right::after{border-right-color:var(--color-background)}html.light-mode .ttb-sort-tooltip-content.position-left::after{border-left-color:var(--color-background)}html.light-mode .ttb-sort-tooltip-content.position-bottom::after{border-bottom-color:var(--color-background)}