/*--------------------------------------------------------------
This is your custom stylesheet.
Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.
Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
/*--------------------------------------------------------------
COLORS
*/
:root {
--color-blue-primary: #00024E;
--color-blue-secondary: #122A70;
--color-blue-80: #3860B0;
--color-blue-60: #6393D6;
--color-blue-40: #9DC4EB;
--color-blue-10: #E1EDFA;
--color-blue-5: #F2F9FF;
--color-red-primary: #8C0014;
--color-red-secondary: #CC130E;
--color-red-80: #EF4D3E;
--color-red-60: #F37561;
--color-white: #ffffff;
--color-grey: #ccc;
--color-grey-80: #Eef2f6;
--color-spades: #0b2a5b;
--color-hearts: #d02b3b;
--color-diamonds: #f28c1a;
--color-clubs: #1b7a52;
}
/*--------------------------------------------------------------
GENERAL
*/
.post-meta-wrapper-main{
display: none;
}
.card-suit {
font-weight: bold;
display: inline-block;
line-height: 1;
font-style: normal;
font-size: 18px;
}
.suit-spades { color: var(--color-spades); }
.suit-hearts { color: var(--color-hearts); }
.suit-diamonds { color: var(--color-diamonds); }
.suit-clubs { color: var(--color-clubs); }
html {
scroll-padding-top: 120px;
scroll-behavior: smooth;
}
b, strong {
font-weight: 700;
}
.container {
max-width: 1480px;
}
.stk-block-carousel__slider img {
-webkit-user-drag: none;
user-drag: none;
}
.buddypanel-open .site {
margin-left: 80px !important;
}
.site-header:before {
box-shadow: none;
}
.bb-buddypanel.buddypanel-open.sticky-header .site-header {
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
}
.bb-buddypanel .bb-footer, .bb-buddypanel .header-search-wrap, .bb-buddypanel .site-content, .bb-buddypanel .site-header {
padding: 0 60px;
}
.sticky-header .site-content, body.buddypress.sticky-header .site-content, .bb-buddypanel.sticky-header .site-content, .single-sfwd-quiz.bb-buddypanel.sticky-header .site-content, .single-sfwd-lessons.bb-buddypanel.sticky-header .site-content, .single-sfwd-topic.bb-buddypanel.sticky-header .site-content {
padding-top: 160px;
}
#gspb_row-id-gsbp-9f2ef2e{
margin-top: 20px !important;
margin-bottom: 0px !important;
}
#gspb_row-id-gsbp-8dde7b7{
margin-top: 20px !important;
}
.page-template-page-fullwidth-content #content {
padding-left: 20px;
padding-right: 20px;
}
/*
#page{
background: #F2F9FF;
}
#content{
margin-top: 120px;
padding-top: 20px !important;
background: #fff;
border-top-left-radius: 24px;
}*/
.otgs-development-site-front-end{
display: none !important
}
/*--------------------------------------------------------------
HEADER
*/
/*
.site-header::before{
content: "";
width:24px;
height: 24px;
background: #E1EDFA;
position: absolute;
left: 0;
bottom : -24px;
top: auto;
z-index: 480;
}
.site-header::after{
content: "";
width:24px;
height: 24px;
background: #fff;
position: absolute;
left: 0;
bottom: -24px;
border-top-left-radius: 24px;
z-index: 500;
}
.page-id-20 .site-header::after{
background: #FAFBFD;
}
.page-id-96 .site-header::before,
.page-id-96 .site-header::after{
display: none;
}
.buddypress.activity .site-header::after{
background: #F2F9FF
}*/
.site-header .site-header-container{
position: relative;
}
.header-search-wrap{
background: transparent !important;
}
.bb-template-v2 .header-search-wrap .search-field-top{
border-radius: 24px;
background-color: #fff;
border: 1px solid var(--color-grey);
}
.users-online{
color: var(--color-blue-primary);
font-size: 14px;
display: flex;
align-items:center;
gap: 6px;
position: absolute;
z-index: 10;
right: 300px;
top: 50%;
transform: translateY(-50%);
margin-right: 30px;
padding: 6px 16px;
background: transparent;
border-radius: 24px;
}
.users-online i{
font-size:0.9rem;
}
.users-online:hover {
background: #fafafa;
}
.custom-header-btn{
background: var(--color-blue-primary);
color: #fff;
}
.custom-header-btn:hover{
background: var(--color-blue-80) !important;
color: #fff !important;
}
.must-log-in a{
font-weight: 700;
}
.logged-in .custom-header-btn{
display: flex;
right: 180px;
}
.page-id-39 .custom-header-btn{
display: none;
}
.header-search-wrap .search-form {
max-width:400px;
margin-left: 40px;
}
.sticky-header .site-header.has-scrolled{
box-shadow: none !important
}
.bb-template-v2.bp-search .bp-forum-search-ac-header, .bb-template-v2.bp-search .bp-search-ac, .bb-template-v2.bp-search .bp-search-ac-header {
z-index: 800 !important;
}
.header-aside .button.signup{
background: var(--color-red-80);
border-color: var(--color-red-80);
}
.notification-wrap span.count {
background-color: var(--color-red-80);
}
/* Cacher l'icône native
.bb-icon-inbox::before,
.bb-icon-bell::before {
display: none;
}
/* Ajouter ton SVG comme fond */
/*
.bb-icon-inbox {
display: inline-block;
width: 24px;
height: 24px;
background: url('/wp-content/themes/buddyboss-theme-child/assets/icons/mail.svg') no-repeat center center;
background-size: contain;
}
.bb-icon-bell {
display: inline-block;
width: 24px;
height: 24px;
background: url('/wp-content/themes/buddyboss-theme-child/assets/icons/bell.svg') no-repeat center center;
background-size: contain;
}
*/
/* Header test */
/* Le parent sert de référence */
.menu-plus {
position: relative !important;
}
.side-panel-inner {
overflow: visible;
}
.menu-plus .bb-menu-item {
width: 100% !important;
}
/* On repositionne le sous-menu à droite */
[data-balloon="Plus"] .bb-icon-angle-down {
display: none;
}
#menu-item-152 .sub-menu li:hover {
background-color: #f37561 !important;
border-radius: 12px !important;
}
#menu-item-152 .sub-menu li:hover .link-text {
color: white !important;
}
.menu-plus > .sub-menu {
position: absolute !important;
top: -250px !important; /* aligne avec l’item parent */
left: 125% !important; /* pousse le menu à droite */
min-width: 280px !important;
background: #F2F9FF !important;
border-radius: 12px !important;
padding: 10px !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
z-index: 9999 !important;
}
.bb-menu-item .link-text {
margin-top: 4px;
color: #00024E;
font-weight: 500;
}
.menu-plus > .sub-menu > li {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 15px !important;
border-bottom: 1px solid #E1EDFA !important;
}
.menu-plus > .sub-menu > li:last-child {
border-bottom: none !important;
}
.menu-plus > .sub-menu > li > a {
display: flex !important;
flex-direction: row !important;
justify-content: left !important;
}
.menu-plus > .sub-menu > li > a > i {
height: 16px !important;
width: 16px !important;
}
.menu-plus .bb-icon-file::before {
display: none !important;
}
/* Sous-menus masqués par défaut */
.menu-plus > .sub-menu {
display: none !important;
position: absolute !important;
top: -250px !important;
left: 125% !important;
min-width: 280px !important;
background: #F2F9FF !important;
border-radius: 12px !important;
padding: 10px !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
z-index: 9999 !important;
}
.menu-plus.submenu-active > .sub-menu {
display: block !important;
}
#post-3049 .entry-title, #post-3051 .entry-title, #post-3551 .entry-title, .page-id-3771 .entry-title, .page-id-3334 .entry-title, .page-id-3377 .entry-title, .page-id-5246 .entry-title, .page-id-3369 .entry-title, .page-id-5358 .entry-title {
display: none;
}
.page-id-3049 .site, .page-id-3419 .site, .page-id-3423 .site, .parent-pageid-3551 .site, .parent-pageid-4312 .site, .page-id-4314 .site, .single-book .site, .page-id-3369 .site, .page-id-5358 .site, .page-id-2402 .site, .page-id-970 .site, .page-id-7373 .site, .single-publication .site, .page-id-2375 .site, .page-id-2376 .site {
overflow-x: visible !important;
}
.tabs-sticky .stk-block-tab-labels__wrapper {
position: -webkit-sticky !important;
position: sticky !important;
top: 120px !important; /* Augmentez pour tre sr que ce n'est pas sous le header */
height: auto !important;
align-self: flex-start !important; /* Force l'lment ne pas s'tirer */
z-index: 9999;
}
.tabs-sticky .wp-block-stackable-tab-labels, .tabs-sticky .wp-block--tabs, .page-id-2375, .page-id-2376, .stk-d0dde5f , .stk-f9b5ea9 {
overflow: visible !important;
}
.scroll-button.active {
background-color: #0073e6 !important; /* exemple */
color: white !important;
}
.single-partenaire .entry-media, .single-partenaire h2 {
display: none;
}
.single-partenaire .stk-container:not(.stk--no-padding) {
padding: 0px;
}
/* Lexique */
.section-lexique {
border-radius: 16px;
}
.lexique-anchor-wrapper {
max-width: 640px;
margin: 0 auto;
border-radius: 160px;
overflow: hidden; /* garde la barre contenue */
background: rgba(255, 255, 255);
position: sticky;
top: 160px;
z-index: 999;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding-bottom: 4px; /* espace pour la scrollbar */
}
.lexique-anchor-bar {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
padding: 8px 16px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(100,180,255,0.6) rgba(0,0,0,0.05);
}
.border-radius-lexique {
border-radius: 16px;
}
/* Chrome, Edge, Safari */
.lexique-anchor-bar::-webkit-scrollbar {
height: 3px; /* fine */
}
.lexique-anchor-bar::-webkit-scrollbar-thumb {
background: rgba(100,180,255,0.6); /* bleu clair */
height: 2px;
border-radius: 2px;
}
/* Track transparent pour ne pas avoir le gris */
.lexique-anchor-bar::-webkit-scrollbar-track {
background: transparent;
}
/* Firefox */
.lexique-anchor-bar {
scrollbar-width: thin;
scrollbar-color: rgba(100,180,255,0.6) transparent; /* thumb / track */
}
.lexique-anchor {
flex: 0 0 auto;
text-decoration: none;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: var(--color-blue-80, #3860B0);
transition: background 0.2s, color 0.2s;
}
.lexique-anchor:hover {
color: var(--color-blue-secondary, #122A70);
background: rgba(0,0,0,0.05);
}
.lexique-anchor.active {
background: var(--color-blue-80, #3860B0) !important;
color: #fff;
}
/*--------------------------------------------------------------
PANEL
*/
.buddypanel-toggle-off .side-panel-inner {
height: 100% !important;
}
.buddypanel-logo-off.buddypanel-open .buddypanel .side-panel-inner {
padding-top: 100px;
}
.buddypanel--toggle-off {
width: 80px !important;
box-shadow: none;
}
#buddypanel-menu .bb-menu-item{
flex-direction: column;
justify-content:center;
}
.bb-template-v2 .side-panel-menu li {
min-height: 45px;
}
.buddypanel .side-panel-menu a{
background: none !important;
}
#menu-item-151 span{
display: none !important;
}
.buddypanel .side-panel-menu a img{
padding: 6px 8px;
width: 60px;
height: 32px;
background: transparent;
border-radius: 24px;
transition: 0.2s all ease;
margin-bottom:4px !important;
}
.buddypanel .side-panel-menu a:hover img{
background: var(--color-red-60);
}
.buddypanel .side-panel-menu .current-menu-item a img,
.buddypanel .side-panel-menu .current-menu-item a:hover img{
background: var(--color-red-60);
}
.buddypanel .side-panel-menu .menu-item-152 a img{
padding-left: 16px;
padding-right: 18px;
}
.buddypanel-open .buddypanel ul.buddypanel-menu>li>a>span{
font-weight: 500;
}
.buddypanel-open .buddypanel ul.buddypanel-menu>li>a:hover>span,
.buddypanel-open .buddypanel ul.buddypanel-menu>li.current-menu-item>a>span{
opacity: 1 !important;
}
.buddypanel ul.buddypanel-menu li a>i+span:not(.count), .buddypanel ul.buddypanel-menu li a>img._image+span:not(.count) {
margin-right: 0 !important;
}
.buddypanel .wpml-ls-item{
position: absolute;
left: 50%;
opacity: 0.4;
}
.buddypanel .wpml-ls-item:hover,
.buddypanel .wpml-ls-item.wpml-ls-current-language{
opacity: 1;
}
#menu-item-wpml-ls-35-en,
#menu-item-wpml-ls-35-fr{
min-height: 20px;
}
#menu-item-wpml-ls-35-fr{
bottom: 60px;
}
#menu-item-wpml-ls-35-en{
bottom: 30px;
}
.buddyboss.bb-icon-l.bb-icon-globe{
display: none;
}
.wpml-ls-menu-item .wpml-ls-flag+span{
margin-left: 0 !important;
}
.buddypanel-open .buddypanel ul.buddypanel-menu>li.wpml-ls-item>a>span{
opacity: 1 !important;
}
.buddypanel-open:not(.register) .buddypanel ul.buddypanel-menu>li>a>span{
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
}
.bb-template-v2 ul.buddypanel-menu>li>a>img:first-child {
margin: 0;
}
@media (max-width: 840px) {
.buddypanel.buddypanel--toggle-off {
display: block;
}
.buddypanel--toggle-off {
position: fixed;
bottom: 0 !important;
height: 64px;
width: 100vw !important;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
transition: bottom 0.3s ease-in-out !important;
}
.buddypanel--toggle-off.tab-hidden,
#buddypanel.tab-hidden {
bottom: -100px !important;
transition: bottom 0.3s ease-in-out !important;
}
.side-panel-menu-container {
position: absolute !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 64px !important; /* Hauteur de la barre */
min-width: 0 !important;
transform: none !important; /* Annule l'animation de tiroir par dfaut */
z-index: 9999 !important;
border-top: 1px solid #eee;
/* Transition pour le Show/Hide JS */
transition: bottom 0.3s ease-in-out !important;
/* Flexbox pour tout aligner */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
}
.touch-only .side-panel-menu {
overflow: visible !important;
}
.side-panel-menu a {
font-size: 13px;
}
.side-panel-menu-container .buddypanel-menu {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important; /* Rpartition quitable */
align-items: center !important;
height: 100% !important;
margin: 0 !important;
padding: 0 10px !important;
width: 100% !important;
}
.side-panel-menu-container .buddypanel-menu > li {
flex: 1 !important;
display: flex !important;
justify-content: center !important;
border: none !important;
margin: 0 !important;
}
.side-panel-menu-container #menu-item-152, .side-panel-menu-container #menu-item-wpml-ls-35-en, .side-panel-menu-container #menu-item-wpml-ls-35-fr, .side-panel-menu-container #menu-item-103, .side-panel-menu-container #menu-item-8549, .side-panel-menu-container #menu-item-8553 {
display: none !important;
}
.buddypanel-open .site {
margin-left: 0px !important;
}
.custom-header-menu {
margin: 0px !important;
}
}
/* --- CUSTOM BURGER MENU --- */
/* 1. Conteneur Global */
.custom-burger-modal {
display: block; /* Toujours block, mais cach par visibility */
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
pointer-events: none;
transition: visibility 0.3s linear;
}
/* tat Actif */
.custom-burger-modal.is-visible {
visibility: visible;
pointer-events: auto;
}
/* 2. Le Fond (Backdrop Flou) */
.custom-burger-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(31, 41, 90, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.3s ease;
}
.custom-burger-modal.is-visible .custom-burger-backdrop {
opacity: 1;
}
/* 3. Le Contenu (Menu) */
.custom-burger-content {
position: absolute;
top: 0;
left: 0;
width: 88%;
max-width: 380px;
height: 100%;
background: var(--color-blue-10);
box-shadow: 5px 0 30px rgba(0,0,0,0.15);
/* Animation Slide depuis la gauche */
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
overflow-y: auto;
padding: 20px;
padding-top: calc(20px + env(safe-area-inset-top));
}
.custom-burger-modal.is-visible .custom-burger-content {
transform: translateX(0);
}
/* 4. Bouton Fermer */
.close-custom-menu {
position: absolute;
top: calc(15px + env(safe-area-inset-top));
right: 15px;
background: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
color: var(--color-blue-primary);
transition: all 0.2s;
z-index: 10;
}
.close-custom-menu:hover {
background: #e0e0e0;
transform: rotate(90deg);
}
/* 5. Styles pour le contenu inject */
#burger-modal-body {
margin-top: 40px;
width: 100%;
}
/* Force les images et blocs ne pas dpasser */
#burger-modal-body img {
max-width: 100%;
height: auto;
}
.custom-burger-modal hr {
margin-bottom: 8px;
}
/* FORCE HIDE : Cache le panneau mobile par dfaut de BuddyBoss */
.bb-mobile-panel-wrapper.left {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
z-index: -9999 !important;
}
/* Empcher BuddyBoss de bloquer le scroll du body */
body.buddyboss-mobile-panel-open {
overflow: auto !important;
position: static !important;
}
/*--------------------------------------------------------------
COMPOSANTS
*/
.site .bp-feedback.bp-sitewide-notice {
background: #E5FFF2 !important;
}
.bp-feedback.bp-sitewide-notice .bp-icon{
display: block;
width: 40px;
height: 40px;
background: url("../icons/bell.png") no-repeat 0 0;
background-size: 40px 40px;
margin-right: 40px;
}
.bp-feedback.bp-sitewide-notice p{
color: var(--color-blue-primary)
}
.wp-block-greenshift-blocks-swiper .swiper-button-prev {
left: auto !important;
right: 70px !important;
}
.activity-list .comment-item .activity-meta .buddyboss_edit_activity_cancel.small, .activity-list .comment-item .activity-meta .buddyboss_edit_activity_comment.action-save.small, .activity-list .comment-item .activity-meta .buddyboss_edit_activity_comment.small, .buddypress .buddypress-wrap .comment-reply-link.small, .buddypress .buddypress-wrap .generic-button a.small, .buddypress .buddypress-wrap a.bp-title-button.small, .buddypress .buddypress-wrap a.button.small, .buddypress .buddypress-wrap button.small, .buddypress .buddypress-wrap input[type=button].small, .buddypress .buddypress-wrap input[type=reset].small, .buddypress .buddypress-wrap input[type=submit].small, .buddypress .buddypress-wrap ul.button-nav:not(.button-tabs) li a.small, .button.small, button.small, input[type=button].small, input[type=submit].small{
font-weight: 600;
}
.timeline-block-date .stk-container {
min-width: 120% !important;
}
/* Design System */
/* Card Image L + Text R */
@media (min-width: 800px) {
.card-illu-left .stk-row.stk-inner-blocks {
flex-wrap: nowrap !important;
}
.timeline-block-date .stk-container {
min-width: 250% !important;
}
}
/* --- Navigation Header (Child Pages) --- */
.page-id-106 .page-header-nav .tabs, .page-id-104 .page-header-nav .tabs {
display: none;
}
.page-header-nav {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 60px;
border-bottom: 1px solid #6393D6;
gap: 30px;
position: relative;
width: 100%;
}
.page-header-nav .page-title {
font-size: 24px;
font-weight: 800; /* Un peu plus gras pour marquer le coup */
color: var(--color-blue-primary);
padding-bottom: 6px;
line-height: 34px;
flex-shrink: 0;
white-space: nowrap;
/* Nouveaux styles pour le lien */
text-decoration: none !important;
border-bottom: 2px solid transparent; /* Prpare le soulignement invisible */
transition: all 0.2s ease;
cursor: pointer;
}
.page-header-nav .page-title:hover {
color: var(--color-blue-60); /* ou opacity: 0.8; */
}
.page-header-nav .tabs {
display: flex;
align-items: flex-end;
gap: 20px;
flex-grow: 1;
min-width: 0;
max-width: 70%; /* Force le scroll plus tt */
/* Alignement gauche pour que le scroll marche bien */
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
cursor: grab;
user-select: none;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding-right: 10px;
}
/* Astuce : Si de la place, on pousse tout droite. Sinon on reste gauche pour scroller */
.page-header-nav .tabs a:first-child {
margin-left: auto;
}
.page-header-nav .tabs:active {
cursor: grabbing;
}
.page-header-nav .tabs::-webkit-scrollbar {
display: none;
}
.page-header-nav .tabs a {
text-decoration: none;
padding-bottom: 5px;
border-bottom: 4px solid transparent;
transition: border-color 0.3s ease;
color: var(--color-blue-primary);
line-height: 34px;
flex-shrink: 0;
-webkit-user-drag: none;
pointer-events: auto;
}
/* Dsactive le clic seulement quand on drag */
.page-header-nav .tabs.is-dragging a {
pointer-events: none;
}
.page-header-nav .tabs a:hover,
.page-header-nav .tabs a.active {
border-color: var(--color-blue-primary);
}
/* Dgrad Blanc (Apparition gre par JS) */
.page-header-nav::after {
content: '';
position: absolute;
bottom: 1px;
right: 0;
width: 60px;
height: 40px;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 85%);
pointer-events: none;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
}
.page-header-nav.has-overflow::after {
opacity: 1;
}
@media (max-width: 768px) {
.page-header-nav {
margin-bottom: 30px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.page-header-nav .page-title {
width: 100%;
white-space: normal; /* Permet le retour la ligne sur mobile */
font-size: 24px;
}
.page-header-nav .tabs {
width: 100%;
max-width: 100%;
}
/* Sur mobile, on enlve l'astuce du margin-left pour aligner au dbut */
.page-header-nav .tabs a:first-child {
margin-left: 0;
}
}
/*--------------------------------------------------------------
SOCIAL
*/
.page-id-39 #content,
.page-id-20 #content,
.buddypress.bp-user #content{
background: #FAFBFD;
background: #fafafa;
}
.page-id-20 #content{
background: #FAFBFD;
}
.bb-grid {
gap: 30px;
}
.buddypress-wrap .activity-header, .buddypress-wrap .activity-inner {
font-size: 16px;
font-weight: 500;
}
.activity-list .activity-item .activity-header .time-since {
font-weight: 500;
}
.buddypress.forum-archive .entry-title,
.buddypress.members .entry-title,
.buddypress.groups .entry-title,
.buddypress.activity .entry-title{
display: none;
}
.buddypress.forum-archive .site-content-grid,
.buddypress.members .site-content-grid,
.buddypress.groups .site-content-grid,
.buddypress.activity .site-content-grid{
padding: 350px 0 0 !important;
}
.buddypress.bp-user .site-content-grid{
}
.buddypress.activity .site-content-grid .content-area{
padding-top: 0;
}
.bb-template-v2 nav#object-nav.bb-single-main-nav--vertical {
padding-right: 0px;
}
/* Conteneur du menu */
.custom-header-menu {
display: flex;
justify-content: center;
margin: 0 0 0 40px;
padding: 220px 0 20px 0;
background: url(/wp-content/uploads/2025/11/banner-social4.jpg) no-repeat 0 50%;
background-size: cover;
position: absolute;
width: 100%;
left: 0;
z-index: 100;
box-shadow: 0 16px 24px 2px rgba(207,207,207,0.14),0 6px 30px 5px rgba(207,207,207,0.12),0 8px 10px -7px rgba(207,207,207,0.2);
}
/* Liste horizontale */
.custom-header-menu-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transform: translateY(40px);
border: 2px solid var(--color-blue-secondary);
}
/* Onglet (liens) */
.custom-header-menu-list li {
margin: 0;
}
.custom-header-menu-list li a {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 28px;
font-weight: 600;
text-decoration: none;
color: var(--color-blue-60);
font-size: 18px !important;
transition: background 0.3s, color 0.3s;
opacity: 1;
border-right: 1px solid #ccc;
background-color: var(--color-white);
}
.custom-header-menu-list li:last-child a {
border-right: none;
}
.custom-header-menu-list .menu-item i._mi {
margin: 0 !important
}
/* Arrondis extrêmes */
.custom-header-menu-list li:first-child a {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.custom-header-menu-list li:last-child a {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
/* État actif (onglet sélectionné) */
.custom-header-menu-list li.current-menu-item a,
.custom-header-menu-list li a:hover {
background-color: var(--color-blue-40);
background-color: var(--color-white);
color: var(--color-blue-primary);
opacity: 1;
}
.activity-header a,
.widget.bp-latest-activities .activity-update,
.activity-list .activity-item .activity-header{
font-size: 15px;
}
/* Container principal */
#buddypress #activity-stream.custom-feed {
max-width: 700px;
margin: 0 auto;
max-height: 800px;
overflow-y: scroll;
}
#buddypress #activity-stream.custom-feed .activity-list{
margin: 0;
padding: 0;
}
/* Chaque élément d'activité */
#buddypress #activity-stream.custom-feed .activity-list > li {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 15px;
background: #fff;
border-radius: 8px;
padding: 20px;
}
/* Dernier élément sans bordure */
#buddypress #activity-stream.custom-feed .activity-list > li:last-child {
border-bottom: none;
}
#buddypress #activity-stream.custom-feed .activity-list > li.groups,
#buddypress #activity-stream.custom-feed .activity-list > li.friends{
display: none;
}
/* Avatar */
#buddypress #activity-stream.custom-feed .activity-list li .activity-avatar {
flex-shrink: 0;
}
#buddypress #activity-stream.custom-feed .activity-list li .activity-avatar img {
border-radius: 50%;
width: 32px;
height: 32px;
}
/* Contenu */
#buddypress #activity-stream.custom-feed .activity-content {
flex-grow: 1;
}
/* Nom et action */
#buddypress #activity-stream.custom-feed .activity-content .activity-header {
font-weight: bold;
margin-bottom: 5px;
color: var(--color-blue-primary);
}
/* Date */
#buddypress #activity-stream.custom-feed .activity-meta {
font-size: 14px;
color: var(--color-blue-80);
margin-top: 5px;
}
/* Texte de l'activité */
#buddypress #activity-stream.custom-feed .activity-inner {
margin-top: 5px;
line-height: 1.5;
color: var(--color-blue-primary);
font-size: 16px !important;
}
.bb-template-v2 .activity-update-form .activity-form.focus-in #editor-toolbar .emojionearea-button:before,
.bb-template-v2 .activity-update-form .activity-form.focus-in #editor-toolbar .post-elements-buttons-item [class*=" bb-icon-"],
.bb-template-v2 #whats-new-toolbar a [class*=" bb-icon-"]{
color: var(--color-blue-primary);
}
.bb-template-v2 .activity-update-form .activity-form.focus-in #editor-toolbar .emojionearea-button:hover:before,
.bb-template-v2 .activity-update-form .activity-form.focus-in #editor-toolbar .post-elements-buttons-item a:hover [class*=" bb-icon-"],
.bb-template-v2 #whats-new-toolbar a:hover [class*=" bb-icon-"]{
color: var(--color-blue-60);
}
/*--------------------------------------------------------------
SINGLE
*/
.single .entry-img {
padding-top: 65%;
}
.stk-block-tabs__tab{
box-shadow: none !important;
}
/* =========================================
FLCHES DE NAVIGATION SLIDER PARTENAIRES (DESIGN PREMIUM)
========================================= */
.partenaire-wrapper {
position: relative;
padding: 0 24px;
}
/* 1. Design "Bouton CTA" (Bleu nuit, bordure blanche) */
.swiper-button-prev.partenaire-button-prev,
.swiper-button-next.partenaire-button-next {
position: absolute;
top: 35%;
transform: translateY(-50%);
width: 44px !important; /* Lgrement plus fin et lgant */
height: 44px !important;
margin: 0 !important;
background-color: var(--color-blue-primary, #00024E) !important;
border: 3px solid #ffffff; /* Dtache la flche de la carte blanche */
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 2, 78, 0.15);
z-index: 100;
cursor: pointer;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 2. Taille et couleur de la flche SVG natif */
.swiper-button-prev.partenaire-button-prev svg,
.swiper-button-next.partenaire-button-next svg {
width: 14px !important;
height: 14px !important;
object-fit: contain;
fill: #ffffff !important;
color: #ffffff !important;
transition: fill 0.3s ease;
}
/* Ajustement optique du triangle */
.swiper-button-prev.partenaire-button-prev svg { margin-right: 2px !important; }
.swiper-button-next.partenaire-button-next svg { margin-left: 2px !important; }
/* Dsactivation de l'ancienne mthode font-icon */
.swiper-button-prev.partenaire-button-prev::after,
.swiper-button-next.partenaire-button-next::after {
display: none !important;
content: none !important;
}
/* 3. Positionnement (Chevauchement matris) */
.swiper-button-prev.partenaire-button-prev { left: -16px; }
.swiper-button-next.partenaire-button-next { right: -16px; }
/* 4. Effet au survol : On passe sur ta couleur d'accentuation (Rouge/Orange) */
.swiper-button-prev.partenaire-button-prev:hover,
.swiper-button-next.partenaire-button-next:hover {
background-color: var(--color-red-80, #EF4D3E) !important;
border-color: var(--color-red-80, #EF4D3E);
box-shadow: 0 6px 16px rgba(239, 77, 62, 0.3);
transform: translateY(-50%) scale(1.08); /* Petit effet de rebond/zoom */
}
/* 5. Responsive */
@media (max-width: 768px) {
.swiper-button-prev.partenaire-button-prev,
.swiper-button-next.partenaire-button-next {
width: 36px !important;
height: 36px !important;
border-width: 2px;
top: 30%;
}
.swiper-button-prev.partenaire-button-prev svg,
.swiper-button-next.partenaire-button-next svg {
width: 12px !important;
height: 12px !important;
}
.swiper-button-prev.partenaire-button-prev { left: -8px; }
.swiper-button-next.partenaire-button-next { right: -8px; }
}
/* --- Conteneur global et Slides --- */
.partenaire-paginationonly-swiper {
max-width: 1400px !important;
margin: 0 auto;
padding-bottom: 20px; /* Espace avant la pagination */
}
/* S'assure que le contenu du partenaire (texte/img) ne dborde pas sur mobile */
.partenaire-content img {
max-width: 100%;
height: auto;
}
/* --- Pagination Container --- */
.swiper-pagination-partenaireonly {
display: flex;
justify-content: flex-start; /* Permet le scroll horizontal */
overflow-x: auto;
overflow-y: hidden;
width: 100%;
margin: 16px auto 0;
gap: 16px; /* Espace entre les vignettes */
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
padding: 8px 4px; /* Padding pour viter de couper l'ombre/bordure */
box-sizing: border-box;
}
/* Masquer scrollbar Chrome/Safari */
.swiper-pagination-partenaireonly::-webkit-scrollbar {
display: none;
}
/* --- Vignettes (Bullets) --- */
.swiper-pagination-partenaireonly span {
display: block;
/* Flex-shrink 0 empche les vignettes de s'craser */
flex: 0 0 auto;
scroll-snap-align: center; /* Centre l'lment au scroll */
height: 80px; /* Hauteur fixe, plus propre */
border-radius: 8px;
overflow: hidden;
opacity: 0.5;
transition: all 0.3s ease;
background-color: #ffffff;
border: 2px solid transparent;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.swiper-pagination-partenaireonly span img {
width: 100%;
height: 100%;
object-fit: contain; /* Garde le logo entier */
display: block;
padding: 4px; /* Petit padding pour que le logo ne touche pas les bords */
}
/* --- tat Actif --- */
.swiper-pagination-partenaireonly .swiper-pagination-bullet-active {
opacity: 1;
transform: scale(1.05);
border-color: var(--color-blue-60, #6393D6);
box-shadow: 0 4px 12px rgba(99, 147, 214, 0.3);
}
/* --- RESPONSIVE : Calcul des largeurs --- */
/* Logique :
width = calc((100% - (NombreEspace * TailleEspace)) / NombreVignettes)
*/
/* Desktop (> 1200px) : 6 vignettes */
@media (min-width: 1200px) {
.swiper-pagination-partenaireonly span {
width: calc((100% - 5 * 16px) / 6);
}
}
/* Laptop (992px -> 1199px) : 5 vignettes */
@media (max-width: 1199px) and (min-width: 992px) {
.swiper-pagination-partenaireonly span {
width: calc((100% - 4 * 16px) / 5);
height: 70px;
}
}
/* Tablette (768px -> 991px) : 4 vignettes */
@media (max-width: 991px) and (min-width: 768px) {
.swiper-pagination-partenaireonly span {
width: calc((100% - 3 * 16px) / 4);
height: 60px;
}
}
/* Mobile Large (480px -> 767px) : 3 vignettes */
@media (max-width: 767px) and (min-width: 480px) {
.swiper-pagination-partenaireonly span {
width: calc((100% - 2 * 16px) / 3);
height: 50px;
}
}
/* Petit Mobile (< 480px) : 2.5 vignettes (pour inciter au scroll) ou 2 */
@media (max-width: 479px) {
.swiper-pagination-partenaireonly span {
/* On affiche 2 vignettes compltes et on voit un bout de la 3me */
/* C'est une bonne pratique UX pour indiquer qu'il y a du scroll */
width: calc((100% - 16px) / 2.2);
height: 50px;
}
.section-partners .stk-column-wrapper.stk-block-column__content {
padding: 16px; /* Rduction du padding conteneur sur mobile */
}
}
#wp-admin-bar-my-account-media,
#wp-admin-bar-my-account-document,
#wp-admin-bar-my-account-video{
display: none;
}
#buddypress table.profile-fields tr td.data,
#buddypress table.profile-fields tr td.label,
.single-headers .item-meta,
.site-header .sub-menu a {
font-size: 16px;
}
nav#object-nav a {
font-size: 16px;
}
.user-books-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.book-item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
transition: box-shadow 0.3s ease;
}
.book-item:hover {
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.book-thumb img {
max-width: 100px;
height: auto;
border-radius: 4px;
}
.book-info {
flex: 1;
}
.book-info h3 {
margin-top: 0;
margin-bottom: 0px !important;
font-size: 20px;
}
.book-info p {
margin: 5px 0;
font-size: 16px;
}
.book-info a {
color: #0073aa;
text-decoration: none;
}
.book-info a:hover {
text-decoration: underline;
}
/* SUJETS RECOMMANDÉS (shortcode [recommended_topics]) */
.bridge-topics-wrapper {
background: var(--color-blue-10);
border-radius: 12px;
padding: 1.25rem 0rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 960px;
min-width: 320px;
}
.bridge-topics-title {
color: var(--color-blue-primary);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.bridge-topics-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
justify-content: flex-start;
max-height: calc(4 * 2.3rem); /* max 4 lignes */
overflow: hidden;
}
.bridge-topic-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--color-blue-primary);
font-weight: 500;
font-size: 15px;
padding: 0.4rem 1rem;
border-radius: 9999px;
text-decoration: none;
transition: all 0.2s ease-in-out;
border: 1px solid var(--color-blue-20);
}
.bridge-topic-pill:hover {
background: var(--color-blue-primary);
border-color: var(--color-blue-primary);
color: var(--color-blue-5);
}
/* Responsive */
@media (max-width: 480px) {
.bridge-topics-wrapper {
padding: 1rem 0rem;
}
.bridge-topic-pill {
font-size: 14px;
padding: 0.3rem 0.8rem;
}
.bridge-topics-list {
max-height: calc(4 * 2.9rem); /* max 4 lignes */
}
}
/* =========================================================
PAGE : Bridge Topics
========================================================= */
.bridge-topics-page {
display: flex;
flex-direction: column;
align-items: center;
}
.bridge-topics-page .bridge-topics-list {
max-height: calc(4 * 2.5rem); /* max 4 lignes */
}
/* ====== Search Bar ====== */
.bridge-topics-page .bridge-topics-search {
position: relative;
max-width: 480px;
margin-bottom: 32px;
}
.bridge-topics-page .bridge-topics-search input {
width: 100%;
padding: 0.6rem 1rem 0.6rem 2.5rem;
border-radius: 9999px;
border: 1px solid var(--bb-color-border, #ddd);
background: var(--bb-color-surface, #fff);
color: var(--bb-color-text, #222);
font-size: 1rem;
transition: 0.2s;
}
.bridge-topics-page .bridge-topics-search input:focus {
outline: none;
border-color: var(--bb-color-primary, #0073aa);
box-shadow: 0 0 0 2px var(--bb-color-primary-10, rgba(0,115,170,0.2));
}
.bridge-topics-page .bridge-topics-search .search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--bb-color-text-muted, #666);
}
/* ====== Wrapper ====== */
.bridge-topics-page .bridge-topics-wrapper {
align-items: center;
}
.bridge-topics-page .bridge-topics-list--page {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
margin: 1rem;
max-width: 880px;
}
/* ====== Buttons / Pills ====== */
.bridge-topics-page .bridge-topic-pill--page {
display: inline-flex;
text-decoration: none;
padding: 0.4rem 1rem;
border-radius: 9999px;
border: 1px solid var(--color-white, #ffffff);
background: var(--color-white, #ffffff);
color: var(--color-blue-primary, #122A70);
font-size: 0.9rem;
transition: all 0.2s ease-in-out;
/* Animation at load */
opacity: 0;
transform: translateY(10px);
animation: topicFadeIn 0.5s ease forwards;
}
/* ====== Hover effect ====== */
.bridge-topics-page .bridge-topic-pill--page:hover {
background: var(--color-blue-primary);
border-color: var(--color-blue-primary);
color: var(--color-blue-5);
transform: translateY(-2px);
}
/* ====== Show More button ====== */
.bridge-topics-page .bridge-topics-showmore {
text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.8rem;
}
.bridge-topics-page .btn-show-more {
background: var(--bb-color-primary, #0073aa);
color: #fff;
border: none;
border-radius: 9999px;
padding: 0.6rem 1.5rem;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.2s ease;
}
.bridge-topics-page .btn-show-more:hover {
background: var(--bb-color-primary-hover, #005f8a);
transform: scale(1.02);
}
/* =========================================================
ANIMATION (fade + slide)
========================================================= */
@keyframes topicFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ====== Stagger animation delay (jusqu’à 32) ====== */
.bridge-topics-page .bridge-topic-pill--page:nth-child(1) { animation-delay: 0.05s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(2) { animation-delay: 0.1s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(3) { animation-delay: 0.15s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(4) { animation-delay: 0.2s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(5) { animation-delay: 0.25s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(6) { animation-delay: 0.3s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(7) { animation-delay: 0.35s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(8) { animation-delay: 0.4s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(9) { animation-delay: 0.45s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(10) { animation-delay: 0.5s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(11) { animation-delay: 0.55s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(12) { animation-delay: 0.6s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(13) { animation-delay: 0.65s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(14) { animation-delay: 0.7s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(15) { animation-delay: 0.75s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(16) { animation-delay: 0.8s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(17) { animation-delay: 0.85s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(18) { animation-delay: 0.9s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(19) { animation-delay: 0.95s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(20) { animation-delay: 1s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(21) { animation-delay: 1.05s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(22) { animation-delay: 1.1s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(23) { animation-delay: 1.15s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(24) { animation-delay: 1.2s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(25) { animation-delay: 1.25s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(26) { animation-delay: 1.3s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(27) { animation-delay: 1.35s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(28) { animation-delay: 1.4s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(29) { animation-delay: 1.45s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(30) { animation-delay: 1.5s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(31) { animation-delay: 1.55s; }
.bridge-topics-page .bridge-topic-pill--page:nth-child(32) { animation-delay: 1.6s; }
/*--------------------------------------------------------------
FEATURED AUTHORS — [featured_authors]
--------------------------------------------------------------*/
.bridge-authors-section {
background: var(--color-blue-10);
border-radius: 12px;
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Une ligne = un auteur */
.bridge-author-card {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--color-blue-40);
padding-bottom: 0.75rem;
}
.bridge-author-card:last-child {
border-bottom: none;
}
/* Infos auteur */
.bridge-author-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bridge-author-avatar img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.bridge-author-name {
color: var(--color-blue-primary);
font-weight: 500;
text-decoration: none;
font-size: 16px;
transition: color 0.2s ease;
}
.bridge-author-name:hover {
color: var(--color-blue-60);
}
/* Action "Suivre" */
.bridge-author-action {
display: flex;
align-items: center;
}
/* Bouton suivre — simple underline animé sans pseudo-éléments */
.bridge-follow-btn {
position: relative;
font-size: 14px;
color: var(--color-blue-secondary);
text-decoration: none;
font-weight: 500;
/* Trait simple */
border-bottom: 1px solid var(--color-blue-secondary);
/* Animation très légère */
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bridge-follow-btn:hover {
color: var(--color-blue-80);
border-bottom-color: var(--color-blue-80);
/* effet discret comme demandé */
transform: translateX(-2px);
}
/* Responsive */
@media (max-width: 480px) {
.bridge-authors-section {
padding: 1.25rem;
max-width: 100%;
}
.bridge-author-avatar img {
width: 40px;
height: 40px;
}
.bridge-author-name {
font-size: 0.95rem;
}
.bridge-follow-btn {
font-size: 0.9rem;
}
}
/* Form */
/* --- WPForms Bridge Style Integration --- */
/* Conteneur principal du formulaire WPForms */
.wpforms-container {
max-width: 600px;
margin: 40px auto;
background: var(--color-white) !important;
padding: 40px !important;
border-radius: 24px !important;
border: 1px solid var(--color-blue-10) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
}
.wpforms-description {
color: var(--color-blue-secondary) !important; /* Remplacé */
font-size: 15px !important;
line-height: 1.6;
margin-bottom: 25px !important;
text-align: center;
}
.wpforms-field-label {
font-weight: 600 !important;
font-size: 14px !important;
color: var(--color-blue-secondary) !important; /* Remplacé */
margin-bottom: 8px !important;
display: block !important;
}
.wpforms-field-description {
font-size: 13px !important;
color: #94A3B8 !important;
margin-top: 5px !important;
line-height: 1.5;
}
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="url"],
.wpforms-field select,
.wpforms-field textarea {
width: 100% !important;
border-radius: 50px !important;
border: 1px solid var(--color-blue-10) !important; /* Remplacé */
font-size: 15px !important;
color: var(--color-blue-primary) !important; /* Remplacé */
background: var(--color-white) !important; /* Remplacé */
box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
transition: all 0.3s ease !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.wpforms-field textarea {
border-radius: 12px !important;
min-height: 100px;
padding: 15px 20px !important;
}
.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
border-color: #FF8C00 !important; /* Orange gardé en dur */
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.1) !important;
outline: none !important;
}
.wpforms-field-select-style-modern .wpforms-field-select {
padding-right: 40px !important;
}
.wpforms-field-select-style-modern .wpforms-field-select-arrow {
right: 15px !important;
color: #94A3B8 !important;
}
.wpforms-field-file-upload {
border: 2px dashed var(--color-blue-10) !important; /* Remplacé */
border-radius: 12px !important;
padding: 25px !important;
text-align: center;
background: var(--color-blue-5) !important; /* Remplacé (proche du F8FAFC) */
transition: all 0.2s ease;
cursor: pointer;
margin-top: 16px !important;
}
.wpforms-field-file-upload:hover {
border-color: var(--color-red-60) !important; /* Orange gardé en dur */
background: #FFF4E6 !important;
}
.wpforms-field-file-upload label {
font-size: 15px !important;
color: var(--color-blue-secondary) !important; /* Remplacé */
font-weight: 600 !important;
cursor: pointer;
}
.wpforms-field-file-upload label::before {
content: "📁";
display: block;
font-size: 24px;
margin-bottom: 10px;
}
.wpforms-field-file-upload input[type="file"] {
display: none;
}
.wpforms-page-button,
.wpforms-submit-container button {
width: auto !important;
min-width: 150px;
background-color: var(--color-red-60) !important; /* Orange gardé en dur */
color: var(--color-white) !important; /* Remplacé */
border: none !important;
border-radius: 50px !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 14px 28px !important;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
margin-top: 20px !important;
}
.wpforms-page-button:hover,
.wpforms-submit-container button:hover {
background-color: var(--color-red-60) !important; /* Orange hover gardé en dur */
transform: translateY(-2px) !important;
}
.wpforms-page-button.wpforms-page-next {
float: right;
}
.wpforms-page-button.wpforms-page-prev {
float: left;
background-color: transparent !important;
color: var(--color-blue-secondary) !important; /* Remplacé */
box-shadow: none !important;
border: 1px solid var(--color-blue-10) !important; /* Remplacé */
}
.wpforms-page-button.wpforms-page-prev:hover {
color: var(--color-red-60) !important; /* Orange gardé en dur */
border-color: var(--color-red-60) !important;
transform: translateY(-2px);
}
.wpforms-page-button-container {
overflow: hidden;
padding-top: 15px;
}
.wpforms-page-indicator-page-title {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--color-blue-secondary) !important; /* Remplacé */
text-align: left !important;
margin-bottom: 10px !important;
}
.wpforms-page-indicator-page-title span {
display: block;
margin-bottom: 5px;
}
.wpforms-page-indicator-page-progress {
height: 100% !important;
background: var(--color-red-60) !important; /* Orange gardé en dur */
border-radius: 50px !important;
transition: width 0.4s ease-in-out !important;
}
.wpforms-error {
color: var(--color-red-60) !important; /* Remplacé (pour les erreurs) */
font-size: 13px !important;
margin-top: 5px !important;
}
.wpforms-required-label {
color: var(--color-red-60) !important; /* Orange gardé en dur */
}
@media (max-width: 768px) {
.wpforms-container {
padding: 20px !important;
margin: 20px auto !important;
border-radius: 12px !important;
}
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="url"],
.wpforms-field select,
.wpforms-field textarea {
padding: 10px 15px !important;
font-size: 14px !important;
}
.wpforms-page-button,
.wpforms-submit-container button {
min-width: 120px;
padding: 12px 20px !important;
font-size: 14px !important;
}
.wpforms-layout-2 .wpforms-col-1, .wpforms-layout-2 .wpforms-col-2 {
width: 100% !important;
float: none;
margin-right: 0 !important;
}
}
.register-form {
margin: 0px !important;
}
.contact-form-container .wpforms-container {
max-width: 100% !important;
}
.contact-form-container .contact-form-heading {
font-size: 32px !important;
line-height: 52px !important;
color: var(--color-blue-primary) !important;
}
.contact-form-container #wpforms-5376-field_15-container {
padding-top: 0px !important;
}
/* --- LESSONS CAROUSEL STYLE --- */
.lessons-swiper {
padding-bottom: 40px;
}
.lessons-carousel-wrapper {
width: 100%;
margin-bottom: 40px;
}
.lesson-card {
/* Style de la slide */
text-align: center;
}
.lesson-card-inner {
text-decoration: none;
display: block;
group: transition; /* Pour effet hover */
}
/* CONTENEUR IMAGE */
.lesson-thumbnail {
position: relative;
width: 100%;
/* Ratio 16:9 ou ajuster selon tes images */
height: 200px;
aspect-ratio: 16 / 9;
border-radius: 20px; /* Arrondi important comme sur le screen */
overflow: hidden;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.lessons-swiper .swiper-wrapper {
padding-top: 8px;
}
.lesson-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* EFFET HOVER */
.lesson-card-inner:hover .lesson-thumbnail {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* BOUTON PLAY */
.play-overlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 60px; /* Taille de l'icne */
color: #EF4D3E; /* Rouge */
z-index: 2;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: #fff; /* Fond blanc derrire le cercle pour boucher le trou */
border-radius: 50%;
width: 58px; height: 58px; /* Ajuster pour masquer le fond derrire l'icone */
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.play-overlay i {
position: relative;
z-index: 3;
}
.lesson-card-inner:hover .play-overlay {
transform: translate(-50%, -50%) scale(1.1);
color: #d14035; /* Rouge plus fonc au survol */
}
.play-overlay svg {
width: 100%;
height: 100%;
drop-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.lesson-card-inner:hover .play-overlay {
transform: translate(-50%, -50%) scale(1.1); /* Petit zoom au survol */
}
/* TITRE */
.lesson-title {
font-family: 'Inter', sans-serif; /* Ta police */
font-size: 16px;
font-weight: 600;
color: #1f295a; /* Bleu fonc */
margin: 0;
line-height: 1.4;
transition: color 0.2s;
}
.lesson-card-inner:hover .lesson-title {
color: #EF4D3E; /* Rouge au survol */
}
/* ---------------------------------
Cards books
---------------------------------- */
.books-carousel-container {
background-color: var(--color-blue-10, #E1EDFA);
border-radius: 1.5rem;
padding: 2rem;
}
.books-carousel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.books-icon-circle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--color-red-80, #EF4D3E);
}
.books-icon-circle .book-icon {
width: 24px;
height: 24px;
color: #fff; /* l’icône héritera de currentColor */
fill: currentColor;
}
.books-carousel-icon {
display: flex;
align-items: center;
gap: .75rem;
}
.books-carousel-title {
font-weight: 500;
font-size: 1.1rem;
color: var(--color-blue-primary, #00024E);
margin-bottom: 0px;
}
.books-carousel-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-size: 16px;
border-bottom: 1px solid currentColor;
color: var(--color-blue-primary, #00024E);
padding: 2px 0px;
}
/* Icône + */
.books-carousel-link .plus-icon {
width: 16px;
height: 16px;
fill: currentColor;
flex-shrink: 0;
margin-bottom: 1px; /* léger ajustement vertical */
}
.books-carousel-link:hover {
border-bottom: 1px solid currentColor;
color: var(--color-blue-60, #6393D6);
}
.book-card {
/* Vos styles existants... */
background-color: var(--color-blue-5, #F2F9FF);
border-radius: 1rem;
padding: 1.5rem;
/* NOUVEAU : Gestion de la hauteur */
height: 100%; /* Force la carte prendre toute la hauteur du Swiper Wrapper */
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.book-card-inner {
display: flex;
flex-direction: column;
flex-grow: 1; /* Occupe tout l'espace vertical disponible */
height: 100%;
margin: 0; /* On reset les marges pour viter les dcalages */
width: 100%;
}
.book-cover {
display: block;
height: 220px; /* Ajustez cette valeur selon vos images (ex: 200px ou 250px) */
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.book-cover img {
max-height: 100%;
width: auto;
max-width: 100%;
object-fit: contain; /* L'image ne sera pas coupe, elle s'adapte au cadre */
}
/* 4. LE TITRE : Il prend sa place, mais ne pousse pas trop */
.book-title {
/* 1. Limiter 2 lignes avec des points de suspension */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* 2. Rserver l'espace pour 2 lignes quoi qu'il arrive */
/* Ajustez '1.2em' selon votre line-height rel si besoin */
line-height: 1.3em;
height: 2.6em; /* 1.3em x 2 lignes = 2.6em */
/* Esthtique */
margin-bottom: 1rem;
font-weight: 600;
text-align: left;
color: var(--wp--preset--color--primary, #081c73);
}
.book-authors {
padding-top: 16px; /* Un peu d'air avec le titre */
}
.swiper-pagination-bullet {
background-color: var(--wp--preset--color--primary, #081c73);
border-radius: 8px;
width: 20px;
height: 6px;
}
/* s'assure que le calcul de slide est propre */
.books-carousel.swiper,
.books-carousel.swiper .swiper-wrapper,
.books-carousel.swiper .swiper-slide {
box-sizing: border-box;
}
/* enlever tout padding/marge qui viendrait fausser le calcul */
.books-carousel.swiper .swiper-slide {
padding: 0;
margin: 0;
}
/* la carte elle-même remplit la slide */
.books-carousel .book-card {
height: 100%;
display: flex;
flex-direction: column;
/* On garde vos styles de base */
background-color: var(--color-blue-5, #F2F9FF);
border-radius: 1rem;
padding: 1.5rem;
box-sizing: border-box;
}
.books-carousel .swiper-wrapper {
padding-bottom: 32px;
}
/* style pagination : bullet allongé / bleu comme la maquette */
.books-carousel .swiper-pagination, .lessons-swiper .swiper-pagination {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.books-carousel .swiper-pagination-bullet, .lessons-swiper .swiper-pagination-bullet {
width: 36px;
height: 8px;
border-radius: 6px;
opacity: 1;
margin: 0 6px;
background: var(--color-blue-80, #081c73);
}
/* Dots par défaut = couleur claire */
.books-carousel .swiper-pagination-bullet, .lessons-swiper .swiper-pagination-bullet {
width: 36px;
height: 8px;
border-radius: 6px;
opacity: 1;
margin: 0 6px;
background: var(--wp--preset--color--primary-transparent, rgba(8, 28, 115, 0.2)); /* inactif, version claire */
transition: background-color 0.3s ease, width 0.3s ease;
}
/* Dot actif = couleur principale + légère extension */
.books-carousel .swiper-pagination-bullet-active, .lessons-swiper .swiper-pagination-bullet-active {
background: var(--color-blue-80, #081c73); /* actif, version foncée */
width: 44px; /* allongé comme dans ta maquette */
}
/* Style pour l'état actif du bouton dans la barre sticky */
.stk-btn-group .anchor-btn-1 a.is-active,
.stk-btn-group .anchor-btn-2 a.is-active,
.stk-btn-group .anchor-btn3 a.is-active {
background-color: var(--color-blue-primary) !important;
color: #ffffff !important;
border-color: #000055 !important;
transition: all 0.3s ease;
border-radius: 160px;
padding: 4px 12px !important;
}
.stk-btn-group .anchor-btn-1 a.is-active span, .stk-btn-group .anchor-btn-2 a.is-active span, .stk-btn-group .anchor-btn3 a.is-active span {
color: white !important;
}
/* Optionnel : Ajout du même style au survol (hover) pour la cohérence */
.stk-btn-group .anchor-btn-1 a:hover,
.stk-btn-group .anchor-btn-2 a:hover,
.stk-btn-group .anchor-btn3 a:hover {
background-color: var(--color-blue-40) !important;
color: #ffffff !important;
border-color: #000055 !important;
border-radius: 160px;
padding: 4px 12px !important;
}
.stk-btn-group .anchor-btn-1 a:hover span,
.stk-btn-group .anchor-btn-2 a:hover span,
.stk-btn-group .anchor-btn3 a:hover span {
color: var(--color-blue-primary) !important;
}
/* Timeline block */
.timeline-wrapper .stk-block-timeline__content {
width: 140%;
}
.timeline-wrapper .stk-block-timeline__date {
margin-left: 40%;
width: 50%;
}
/* responsive : si tu changes spaceBetween, adapte les calc ci-dessous */
@media (max-width: 1023px) {
.books-carousel .swiper-pagination-bullet { width: 28px; height: 8px; }
}
@media (max-width: 768px) {
.book-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.book-thumb img {
max-width: 80px;
}
.timeline-wrapper .stk-block-timeline__content {
width: 100%;
}
.timeline-wrapper .stk-block-timeline__date {
margin-left: 8px;
width: 80%;
}
.books-carousel-link {
justify-content: center;
}
.books-carousel-link .all-books-hide {
display: none;
}
}
/*
.swiper.partenaire-swiper {
width: 100%;
overflow: hidden;
margin-top: 50px;
}
.partenaire-swiper .swiper-wrapper {
display: flex;
justify-content: space-between;
}
.partenaire-swiper .swiper-slide {
flex-shrink: 0;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.partner-logo img {
filter: grayscale(100%);
transition: filter 0.3s ease;
max-height: 96px;
width: auto;
display: block;
margin: 16px;
}
.partner-logo img:hover {
filter: grayscale(0%);
}
.partner-logo:hover {
border-radius: 12px;
border: 3px solid var(--color-blue-60, #6393D6)
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
}
.swiper-pagination span img {
width: 20px;
height: 20px;
border-radius: 50%;
opacity: 0.5;
object-fit: cover;
}
.swiper-pagination .swiper-pagination-bullet-active img {
opacity: 1;
}
*/
/*--------------------------------------------------------------
FOOTER
*/
.bb-template-v2 .widget.widget_follow_us .bb-follow-links a i {
color: #fff;
}
.bb-template-v2 .widget.widget_follow_us .bb-follow-links a:hover,
.bb-template-v2 .widget.widget_follow_us .bb-follow-links a:hover i {
color: var(--color-blue-40);
}
.bb-template-v2 .widget.widget_follow_us .bb-follow-links a:hover i {
border: 1px solid var(--color-blue-40) !important;
}
.bb-template-v2 .widget.widget_follow_us .bb-follow-links {
row-gap: 8px;
gap: 8px;
}
.bb-footer li a {
font-size: 16px !important;
letter-spacing: 0 !important;
}
.bb-footer .widget h2.widget-title{
color: var(--color-blue-40);
font-weight: 500;
}
.footer-bottom a{
color: #fff;
}
.footer-bottom a:hover{
color: var(--color-blue-40);
}
.footer-logo-wrap{
display: none;
}
.copyright, .footer-desc {
letter-spacing: 0;
}
/* --- Deals Library / BuddyBoss profile --- */
.deals-library-section {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px 60px;
}
/* Bouton "Add a deal" + boutons Edit/View deal */
.add-deal-button .button,
.deal-item .button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
border-radius: 30px;
background: #000b57;
color: #fff !important;
font-weight: 600;
border: none;
text-decoration: none;
font-size: 18px;
}
.add-deal-button .button {
margin-bottom: 30px;
}
.deal-item .button + .button {
margin-left: 16px;
}
/* Bloc deal */
.user-deals-list .deal-item {
border-bottom: 1px solid #e7ebf5;
padding: 32px 0;
}
.user-deals-list .deal-item p {
margin: 0 0 12px 0;
}
.user-deals-list .deal-item p:nth-child(2) {
color: #9b9b9b;
}
/* Tableau des displays */
.deal-displays-wrapper {
margin-top: 20px;
}
.deal-displays-table {
width: 100%;
border-collapse: collapse;
}
.deal-displays-table .deal-display-row {
border-top: 1px solid #edf0f7;
}
.deal-displays-table .deal-display-label,
.deal-displays-table .deal-display-action {
padding: 18px 24px;
font-size: 20px;
}
.deal-displays-table .deal-display-label {
color: #555;
}
.deal-displays-table .deal-display-action {
text-align: right;
}
.deal-displays-table .deal-display-view-link {
color: #000b57;
font-weight: 600;
text-decoration: none;
}
.deal-displays-table .deal-display-view-link:hover {
text-decoration: underline;
}
/* --- Deals Library global --- */
.deals-library-section {
max-width: 1160px;
margin: 0 auto;
padding: 40px 20px 60px;
}
/* Titre principal */
.deals-library-section h2 {
font-size: 36px;
line-height: 1.2;
color: #000b57;
margin-bottom: 24px;
}
/* Bouton "Add a deal" */
.add-deal-button .button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
border-radius: 999px;
background: #000b57;
color: #fff !important;
font-weight: 600;
font-size: 18px;
border: none;
text-decoration: none;
}
/* --- Cartes de deals --- */
.user-deals-list {
margin-top: 32px;
}
/* carte blanche arrondie */
.deal-card {
background: #ffffff;
border-radius: 24px;
padding: 28px 32px;
margin-bottom: 24px;
box-shadow: 0 8px 24px rgba(13, 32, 96, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 2 colonnes avec flex */
.deal-card-inner {
display: flex;
gap: 40px;
align-items: flex-start;
}
/* Colonne gauche */
.deal-card-left {
flex: 0 0 40%;
}
.deal-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 2, 78, 0.08);
border-color: var(--color-blue-10);
}
.deal-title {
margin: 0 0 4px 0;
font-size: 24px;
color: #000b57;
font-weight: 700;
}
.simple-editor-wrapper .deal-title {
font-size: 18px;
}
.deal-id {
margin: 0 0 24px 0;
color: #8a8fa0;
font-size: 16px;
}
/* Boutons */
.deal-actions {
display: flex;
gap: 16px;
}
.btn-deal {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
border: none;
}
.btn-deal-primary {
background: #000b57;
color: #ffffff !important;
}
.btn-deal-secondary {
background: #ffffff;
color: #000b57 !important;
border: 1px solid #000b57;
}
/* Colonne droite : displays */
.deal-card-right {
flex: 1;
}
/* Liste des displays = lignes */
.deal-displays-list {
list-style: none;
margin: 0;
padding: 0;
}
.deal-display-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-top: 1px solid #edf0f7;
font-size: 16px;
}
.deal-display-item:first-child {
border-top: none;
}
.deal-display-label {
color: #000b57;
}
.deal-display-view {
color: #000b57;
font-weight: 600;
text-decoration: none;
font-size: 14px;
}
.deal-display-view:hover {
text-decoration: underline;
}
/* Message s'il n'y a pas de display */
.deal-no-displays {
margin: 0;
font-size: 14px;
color: #999;
}
/* Responsive : cols empilées sur mobile */
@media (max-width: 768px) {
.deal-card-inner {
flex-direction: column;
gap: 20px;
}
.deal-card-left {
flex-basis: auto;
}
}
.bb-template-v2 .buddypanel {
padding-left: 0;
padding-right: 0;
}
.buddypanel-open .side-panel-menu .bs-submenu-toggle,
#buddypanel-menu .menu-item-object-page i,
#buddypanel-menu .menu-item-object-page img,
#buddypanel-menu .menu-item-object-custom i,
#buddypanel-menu .menu-item-object-custom img{
display: none;
}
#buddypanel-menu .menu-item-object-custom,
#buddypanel-menu .menu-item-object-page{
margin-bottom: 0px !important;
}
#buddypanel-menu .menu-item-object-custom a,
#buddypanel-menu .menu-item-object-page a{
padding: 40px 0 8px;
display: flex;
justify-content: center !important;
position: relative;
border-radius: 0;
width: 100%;
transition: none;
}
#buddypanel-menu .menu-item-object-custom a span,
#buddypanel-menu .menu-item-object-page a span{
margin: 0 !important;;
transition: none;
}
#buddypanel-menu .menu-item-object-custom a span::before,
#buddypanel-menu .menu-item-object-page a span::before{
width: 24px;
height: 24px;
content: "";
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: url(../icons/icon-home.png) no-repeat 0 0;
background-size: 24px 48px;
transition: none;
}
#buddypanel-menu #menu-item-103 a span::before{
background-image: url(../icons/icon-home.png) ;
}
#buddypanel-menu #menu-item-107 a span::before,
#buddypanel-menu #menu-item-8551 a span::before{
background-image: url(../icons/icon-play.png);
}
#buddypanel-menu #menu-item-168 a span::before,
#buddypanel-menu #menu-item-8565 a span::before{
background-image: url(../icons/icon-quiz.png);
}
#buddypanel-menu #menu-item-102 a span::before,
#buddypanel-menu #menu-item-8566 a span::before{
background-image: url(../icons/icon-social.png);
}
#buddypanel-menu #menu-item-169 a span::before,
#buddypanel-menu #menu-item-8550 a span::before{
background-image: url(../icons/icon-newsroom.png);
}
#buddypanel-menu #menu-item-167 a span::before,
#buddypanel-menu #menu-item-8567 a span::before{
background-image: url(../icons/icon-watch.png);
}
#buddypanel-menu #menu-item-170 a span::before,
#buddypanel-menu #menu-item-8552 a span::before{
background-image: url(../icons/icon-learn.png);
}
#buddypanel-menu #menu-item-152 a span::before,
#buddypanel-menu #menu-item-8553 a span::before{
background-image: url(../icons/icon-more.png);
}
#buddypanel-menu .menu-item-object-custom a:hover span,
#buddypanel-menu .menu-item-object-custom a:hover,
#buddypanel-menu .menu-item-object-custom.current-menu-item a,
#buddypanel-menu .menu-item-object-custom.current-menu-item a span,
#buddypanel-menu .menu-item-object-custom.current-page-ancestor a,
#buddypanel-menu .menu-item-object-custom.current-page-ancestor a span,
#buddypanel-menu .menu-item-object-page a:hover span,
#buddypanel-menu .menu-item-object-page a:hover,
#buddypanel-menu .menu-item-object-page.current-menu-item a,
#buddypanel-menu .menu-item-object-page.current-menu-item a span,
#buddypanel-menu .menu-item-object-page.current-page-ancestor a,
#buddypanel-menu .menu-item-object-page.current-page-ancestor a span{
background: var(--color-red-60) !important;
color: #fff !important;
}
#buddypanel-menu .menu-item-object-custom.current-menu-item a span::before,
#buddypanel-menu .menu-item-object-custom.current-page-ancestor a span::before,
#buddypanel-menu .menu-item-object-custom a:hover span::before,
#buddypanel-menu .menu-item-object-page.current-menu-item a span::before,
#buddypanel-menu .menu-item-object-page a:hover span::before,
#buddypanel-menu .menu-item-object-page.current-page-ancestor a span::before{
background-position: 0 -24px;
}
#buddypanel-menu .menu-item-object-custom .sub-menu .menu-item-object-custom a span::before,
#buddypanel-menu .menu-item-object-page .sub-menu .menu-item-object-page a span::before{
display: none;
}
.bb-template-v2 .side-panel-menu li .sub-menu{
padding: 10px !important;
}
.bb-template-v2 .side-panel-menu li .sub-menu li{
min-height: 25px;
padding: 0px !important;
}
#buddypanel-menu .sub-menu .menu-item-object-page a{
margin-top: 0px;
padding: 12px 10px 12px 50px !important;
width: 100% !important;
min-width: 100%;
margin: 0;
justify-content: start !important;
}
#buddypanel-menu .sub-menu .menu-item-object-custom a span::before,
#buddypanel-menu .sub-menu .menu-item-object-page a span::before{
top: 50%;
left: 10px;
transform: translateY(-50%);
background: url(../icons/icon-home.png) no-repeat 0 0;
background-size: 24px 48px;
}
#buddypanel-menu .sub-menu #menu-item-8568 a span::before,
#buddypanel-menu .sub-menu #menu-item-3072 a span::before{
background-image: url(../icons/icon-about.png) ;
}
#buddypanel-menu .sub-menu #menu-item-8569 a span::before,
#buddypanel-menu .sub-menu #menu-item-3070 a span::before{
background-image: url(../icons/icon-books.png) ;
}
#buddypanel-menu .sub-menu #menu-item-8571 a span::before,
#buddypanel-menu .sub-menu #menu-item-3069 a span::before{
background-image: url(../icons/icon-clubs.png) ;
}
#buddypanel-menu .sub-menu #menu-item-8572 a span::before,
#buddypanel-menu .sub-menu #menu-item-3068 a span::before{
background-image: url(../icons/icon-authors.png) ;
}
#buddypanel-menu .sub-menu #menu-item-8570 a span::before,
#buddypanel-menu .sub-menu #menu-item-3067 a span::before{
background-image: url(../icons/icon-events.png) ;
}
#buddypanel-menu .sub-menu #menu-item-8575 a span::before,
#buddypanel-menu .sub-menu #menu-item-3066 a span::before{
background-image: url(../icons/icon-tools.png) ;
}
#buddypanel-menu .sub-menu #menu-item-8574 a span::before,
#buddypanel-menu .sub-menu #menu-item-6335 a span::before{
background-image: url("../icons/icon-teachers.png") ;
}
#buddypanel-menu .sub-menu #menu-item-8573 a span::before,
#buddypanel-menu .sub-menu #menu-item-6334 a span::before{
background-image: url("../icons/icon-federation.png") ;
}
#buddypanel-menu .sub-menu .menu-item-object-page.current-menu-item a span::before,
#buddypanel-menu .sub-menu .menu-item-object-page a:hover span::before{
background-position: 0 -24px;
}
.wpml-ls-native {
font-size: 0; /* cache le texte original */
position: relative;
}
.wpml-ls-native::before {
content: attr(lang);
font-size: 14px; /* taille normale */
text-transform: uppercase;
font-weight: bold;
}
.bb-footer .widget-title,
.bb-footer .widget {
margin-bottom: 0 !important;
}
.bb-follow-links{
margin-top: 10px !important;
}
.books-carousel-icon svg{
width: 42px;
height: 42px;
}
.books-carousel-header h2{
margin-bottom: 0;
font-size: 16px;
font-weight: 500 !important;
text-transform: uppercase !important;
}
.forum-archive .bb-grid.site-content-grid{
padding-top: 360px;
}
.forum-archive #site-logo .site-title img.bb-logo,
.activity.buddypress #site-logo .site-title img.bb-logo {
width: 360px;
}
#bbpress-forums .bb-forums-list{
gap: 0;
}
#bbpress-forums .bb-forums-list li{
flex: 0 0 100%;
max-width: 100%;
}
#bbpress-forums .bs-card-list .bb-cover-list-item{
display: flex;
background: transparent;
padding-bottom: 0;
border-radius: 16px;
overflow: hidden;
}
#bbpress-forums .bs-card-list .bb-cover-wrap {
border-radius: 0;
padding-top: 0;
}
#bbpress-forums .bb-cover-wrap img {
position: static;
min-width: 160px;
width: 160px;
max-height: 100px;
}
#bbpress-forums .bs-card-list .bs-sec-header h3{
margin-bottom: 10px;
}
#bbpress-forums .bs-card-list .bs-sec-header {
margin-bottom: 0;
}
#bbpress-forums .bs-card-list .bs-timestamp{
position: static;
}
#bbpress-forums .bb-forum-content-wrap {
margin-bottom: 0;
}
.forum.bbpress .site-content-grid {
padding-top: 360px;
}
.forum.bbpress.single .site-content-grid {
padding-top: 290px;
}
.bbp-user-page .site-content-grid,
.topic.bbpress.single-topic .site-content-grid {
padding-top: 320px;
}
.forum-archive .bs-forums-banner {
padding: 30px 20px 10px;
}
.forum.bbpress.single .site-content-grid {
padding-top: 0px !important;
}
.forum.bbpress.single .custom-header-menu {
background: none !important;
}
.bbp-forum-content-wrap {
margin-bottom: 60px !important;
}
/* ==========================================================================
BRIDGE LIKE SYSTEM (VERSION FINALE)
========================================================================== */
/* --- 2. LE BOUTON PRINCIPAL --- */
.bridge-like-btn {
/* Forme et Taille */
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px; /* Hauteur confortable */
padding: 0 16px;
border-radius: 50px; /* Pill shape */
border: 1px solid transparent;
/* Couleurs par dfaut */
background: var(--color-blue-5);
color: var(--color-blue-primary);
/* Comportement */
cursor: pointer;
transition: all 0.2s ease;
outline: none;
text-decoration: none;
}
/* Hover simple (quand pas encore lik) */
.bridge-like-btn:hover:not(.active):not(.not-logged) {
background: var(--color-blue-secondary);
transform: translateY(-1px);
}
/* --- 3. CONTENU DU BOUTON (Alignement & Couleurs) --- */
/* Conteneur de l'icne (Pouce/Coeur) */
.bridge-like-btn .main-icon-container {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
margin-right: 6px;
}
/* L'icne elle-mme dans le bouton (petite) */
.bridge-like-btn .reaction-icon {
font-size: 20px;
line-height: 1;
display: block;
}
/* Le Texte "Like" et le Compteur */
/* IMPORTANT : color: inherit permet de prendre la couleur (rouge, orange...) applique par le JS */
.bridge-like-btn .like-label {
font-size: 14px;
font-weight: 600;
color: inherit;
}
.bridge-like-btn .like-count {
font-size: 14px;
font-weight: 700; /* Un peu plus gras que le texte */
color: inherit;
margin-left: 2px;
position: relative;
top: 1px; /* Petit ajustement optique */
}
.bridge-like-btn .like-count-sep {
margin: 0 4px;
opacity: 0.5;
color: inherit;
}
/* --- 4. BARRE DE SURVOL (DOCK) --- */
.bridge-reactions-dock {
position: absolute;
bottom: 100%; /* Au-dessus par dfaut */
left: 50%;
transform: translateX(-50%) translateY(10px); /* Cach un peu bas */
background: white;
padding: 8px 12px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
display: flex;
gap: 10px; /* Espace entre les mojis */
z-index: 999;
/* Animation d'apparition */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* C'est ICI qu'on rgle le problme de frustration : le menu reste 0.3s aprs la sortie de souris */
transition-delay: 0.3s;
}
/* Le "Pont" invisible pour ne pas perdre le hover entre le bouton et la barre */
.bridge-reactions-dock::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -20px;
height: 25px;
background: transparent;
}
/* --- 5. ICONES DANS LE DOCK (GRANDES) --- */
.reaction-option {
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.reaction-option .reaction-icon {
font-size: 36px; /* Taille des mojis au survol */
line-height: 1;
display: block;
/* Petit ombrage pour le relief */
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}
/* Zoom au survol d'un moji */
.reaction-option:hover {
transform: scale(1.35) translateY(-5px);
}
/* --- 6. INTERACTIONS (Affichage du dock) --- */
.bridge-like-wrapper:hover .bridge-reactions-dock {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(-50%) translateY(-10px); /* Position finale */
transition-delay: 0s; /* Apparition immdiate */
}
/* --- 7. VARIANTE : OUVERTURE VERS LE BAS (.opens-down) --- */
/* Ajout par le JS si pas assez de place en haut */
.bridge-like-wrapper.opens-down .bridge-reactions-dock {
bottom: auto;
top: 100%; /* En dessous */
}
.bridge-like-wrapper.opens-down .bridge-reactions-dock::after {
bottom: auto;
top: -20px; /* Le pont passe au-dessus */
}
.bridge-like-wrapper.opens-down:hover .bridge-reactions-dock {
transform: translateX(-50%) translateY(10px);
}
/* --- 8. ETATS SPECIAUX --- */
/* Chargement */
.bridge-like-btn.loading {
opacity: 0.7;
pointer-events: none;
cursor: wait;
}
/* Non connect */
.bridge-like-btn.not-logged {
opacity: 1 !important; /* Rendre bien visible */
cursor: pointer !important; /* Curseur main */
filter: grayscale(100%); /* Optionnel : le laisser en gris pour diffrencier */
}
.bridge-like-btn.not-logged:hover {
background: var(--color-blue-10); /* Feedback visuel au survol */
transform: translateY(-1px);
filter: grayscale(0%); /* La couleur revient au survol pour inciter au clic */
}
/* --- STYLE MODALE LOGIN (BRIDGE LIKE) --- */
/* Animation douce d'apparition */
#bridge-login-modal.is-open .ble-modal-content {
animation: bridgeSlideUp 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Style de l'icne utilisateur */
#bridge-login-modal .bb-icon-user-circle {
background: var(--color-blue-5); /* Fond bleu trs clair */
width: 80px;
height: 80px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
#bridge-login-modal .ble-btn-primary {
transition: all 0.2s ease;
}
#bridge-login-modal .ble-btn-primary:hover {
background-color: var(--color-blue-10) !important;
transform: translateY(-2px);
}
/* Bouton secondaire (Login) */
.ble-btn-secondary:hover {
color: var(--color-blue-primary);
text-decoration: underline;
}
@keyframes bridgeSlideUp {
from { opacity: 0; transform: scale(0.95) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* --- CONTENEUR GLOBAL --- */
.bridge-like-wrapper {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap; /* Scurit mobile */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* --- LA BARRE DES STATS (La "Capsule") --- */
.bridge-reaction-stats {
display: inline-flex;
align-items: center;
background: #FFFFFF; /* Fond blanc pur */
border: 1px solid #E5E7EB; /* Bordure trs fine gris clair */
border-radius: 20px; /* Arrondi complet */
padding: 4px 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Ombre trs lgre pour le volume */
height: 36px; /* Hauteur fixe pour alignement parfait */
gap: 10px; /* Espace ar entre chaque groupe */
transition: all 0.2s ease;
}
.bridge-reaction-stats:hover {
box-shadow: 0 4px 6px rgba(0,0,0,0.06);
border-color: #D1D5DB;
}
/* --- ITEM INDIVIDUEL (Icone + Chiffre) --- */
.reaction-stat-item {
display: flex;
align-items: center;
gap: 2px;
color: #4B5563; /* Gris fonc neutre pour le texte */
font-size: 11px;
font-weight: 600;
line-height: 1;
cursor: default;
}
/* L'icne (Emoji) */
.reaction-stat-item .r-icon {
font-size: 16px; /* Icne lgrement plus grande */
line-height: 1;
display: flex;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)); /* Petit relief sur l'emoji */
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Animation au survol de l'icne */
.reaction-stat-item:hover .r-icon {
transform: scale(1.2);
}
/* Le chiffre */
.reaction-stat-item .r-count {
opacity: 0.7;
}
/* --- LE BOUTON D'ACTION PRINCIPAL --- */
.bridge-like-btn {
height: 36px;
padding: 0 16px;
border-radius: 18px;
border: 1px solid #E5E7EB; /* Mme bordure que les stats */
background: #F9FAFB; /* Fond trs lgrement gris */
font-weight: 600;
font-size: 13px;
color: #374151;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.bridge-like-btn:hover {
background: #F3F4F6;
border-color: #D1D5DB;
}
/* tat ACTIF (J'ai lik) */
.bridge-like-btn.active {
background: #EFF6FF; /* Bleu trs ple */
border-color: #BFDBFE;
color: #2563EB; /* Bleu vif */
}
/* Icne dans le bouton */
.bridge-like-btn .main-icon-container {
font-size: 16px;
display: flex;
}
/* --- MOBILE DATE FIX (User Request) --- */
.post-date-mobile { display: none; }
@media (max-width: 1024px) {
/* Stack Layout */
.bridge-meta-bar {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px;
}
/* Author Section */
.bridge-meta-left {
width: 100%;
}
.bridge-author-name-row {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
/* Show Date Mobile */
.post-date-mobile {
display: inline-block !important;
margin-left: auto;
color: #888;
font-size: 14px;
white-space: nowrap;
}
/* Hide Desktop Date */
.bridge-meta-right .post-date,
.bridge-meta-right .sep {
display: none !important;
}
/* Like Section (Full Width Below) */
.bridge-meta-right {
display: flex !important;
align-items: center !important;
gap: 20px;
}
/* Ensure Like Wrapper is responsive */
.bridge-like-wrapper {
width: 100% !important;
justify-content: space-between !important;
flex-direction: row-reverse;
}
}
/* ==========================================================================
BRIDGE SINGLE HEADER (LAYOUT ESPAC)
========================================================================== */
.single-post .entry-media.entry-img.bb-vw-container1, .single-publication .entry-media.entry-img.bb-vw-container1 {
padding-top: 0;
}
.single-post .entry-media.entry-img.bb-vw-container1 img, .single-publication .entry-media.entry-img.bb-vw-container1 img {
position: relative !important;
object-fit: contain !important;
}
.single-post .entry-header, .single-post .primary-entry-content .entry-meta, .single-publication .entry-header, .single-publication .primary-entry-content .entry-meta {
display: none !important;
}
.bridge-single-header-force {
margin-bottom: 50px;
font-family: inherit;
width: 100%;
}
/* --- 1. CATGORIES (Badges Propres) --- */
.bridge-meta-top {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px; /* Espace entre les catgories */
}
/* Le style du badge catgorie */
.bridge-cat-link {
display: inline-block;
background: var(--color-blue-10);
color: var(--color-blue-secondary);
padding: 6px 14px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.2s;
line-height: 1;
}
.bridge-cat-link:hover {
background: var(--color-blue-primary);
color: #fff;
transform: translateY(-2px);
}
/* --- 2. TITRE --- */
.bridge-entry-title {
font-size: 42px;
line-height: 1.15;
color: var(--color-blue-primary);
margin-top: 0;
margin-bottom: 35px;
font-weight: 800;
letter-spacing: -0.02em;
}
/* --- 3. BARRE META --- */
.bridge-meta-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-top: 1px solid var(--color-grey-80);
border-bottom: 1px solid var(--color-grey-80);
flex-wrap: wrap;
gap: 20px;
}
/* GAUCHE (Auteur + Follow) */
.bridge-meta-left {
display: flex;
align-items: center;
gap: 12px;
}
.bridge-author-avatar img {
border-radius: 50%;
width: 48px;
height: 48px;
max-width: 48px !important;
max-height: 48px !important;
object-fit: cover;
display: block;
}
.bridge-author-text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.3;
}
.bridge-author-name-row {
display: flex;
align-items: center;
gap: 10px; /* Espace entre Nom et Bouton Follow */
}
.bridge-author-text .author-name {
font-weight: 700;
font-size: 16px;
color: var(--color-blue-primary);
text-decoration: none;
}
.bridge-author-text .author-name:hover {
color: var(--color-blue-60);
}
.bridge-author-text .bridge-author-role {
font-size: 12px;
color: #8899a6;
text-transform: uppercase;
font-weight: 600;
}
/* --- BOUTON FOLLOW (Style Pill) --- */
/* On force le style sur l'lment 'a' gnr par BuddyBoss */
.bridge-follow-wrapper a.bridge-follow-btn,
.bridge-follow-wrapper a#follow-button {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(--color-blue-60);
background-color: transparent;
color: var(--color-blue-60);
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
line-height: 1;
min-width: auto;
height: auto;
transition: all 0.2s ease;
}
.bridge-follow-wrapper a.bridge-follow-btn:hover {
background-color: var(--color-blue-60);
color: #fff;
}
/* tat "Dj abonn" (Following) */
.bridge-follow-wrapper a.following {
border-color: var(--color-grey);
color: var(--color-grey);
}
.bridge-follow-wrapper a.following:hover {
background-color: var(--color-red-60); /* Rouge au survol pour signifier "Unfollow" */
border-color: var(--color-red-60);
color: white;
}
/* DROITE (Date + Like) */
.bridge-meta-right {
display: flex;
align-items: center;
gap: 20px;
}
.bridge-meta-right .post-date {
display: flex !important;
align-items: center !important;
height: 36px !important;
line-height: 1 !important;
margin: 0 !important;
}
/* 5. Centrage optique du sparateur vertical */
.bridge-meta-right .sep {
height: 20px !important;
width: 1px !important;
background: var(--color-grey-80);
display: block !important;
margin: 0 !important;
}
.bridge-header-like {
display: flex !important;
align-items: center !important;
}
.bridge-meta-bar p {
display: none;
}
.bridge-header-divider { display: none; }
/* Responsive */
@media (max-width: 768px) {
.bridge-entry-title { font-size: 30px; }
.bridge-meta-bar { flex-direction: column; align-items: flex-start; gap: 15px; }
.bridge-meta-right { width: 100%; justify-content: space-between; padding-top: 15px; border-top: 1px dashed var(--color-grey-80); }
.bridge-meta-right .sep { display: none; }
}
/* ==========================================================================
WIDGET MOST POPULAR (LIKED / COMMENTED)
========================================================================== */
.bridge-pop-widget {
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Ombre lgre */
border: 1px solid var(--color-blue-10);
}
/* --- LES TABS (Le Switcher) --- */
.bridge-pop-tabs {
display: flex;
background: var(--color-blue-5); /* Fond gris/bleu clair */
padding: 4px;
border-radius: 12px;
margin-bottom: 20px;
}
.pop-tab {
flex: 1;
border: none;
background: transparent;
padding: 8px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--color-blue-secondary);
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.pop-tab:hover {
color: var(--color-blue-primary);
}
/* tat Actif (Blanc avec ombre) */
.pop-tab.active {
background: #fff;
color: var(--color-blue-primary);
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
/* --- LA LISTE --- */
.bridge-pop-list {
display: none; /* Cach par dfaut */
flex-direction: column;
gap: 16px;
}
.bridge-pop-list.active {
display: flex; /* Affich si actif */
}
/* --- ITEM (Article) --- */
.pop-item {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none !important;
group: transition;
}
/* Image + Numro */
.pop-img {
position: relative;
width: 60px;
height: 60px;
flex-shrink: 0;
}
.pop-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.pop-rank {
position: absolute;
top: -6px; left: -6px;
width: 20px; height: 20px;
background: var(--color-blue-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 2px solid #fff;
}
/* Infos */
.pop-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.pop-title {
font-size: 14px;
line-height: 1.3;
margin: 0;
color: var(--color-blue-primary);
font-weight: 600;
/* Limite 2 lignes */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s;
}
.pop-item:hover .pop-title {
color: var(--color-blue-60);
}
/* Mta (Coeur / Commentaire) */
.pop-meta {
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.pop-meta.heart { color: var(--color-red-80); }
.pop-meta.comment { color: var(--color-diamonds); } /* Orange pour les comms */
.pop-meta .icon { font-size: 12px; }
/* BOUTON DEEPL */
.btn-translate {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-blue-5); /* Ton bleu trs clair */
color: var(--color-blue-primary);
padding: 10px 15px;
border-radius: 8px;
font-weight: 600;
text-decoration: none !important;
border: 1px solid var(--color-blue-10);
transition: all 0.2s;
font-size: 14px;
cursor: pointer;
}
.btn-translate:hover {
background: var(--color-blue-10);
transform: translateY(-2px);
}
.btn-translate i {
font-size: 16px;
}
/* ==========================================================================
BRIDGE SHARE DROPDOWN (COMPACT)
========================================================================== */
/* Wrapper relatif pour positionner le menu */
.bridge-share-dropdown-wrapper {
display: flex !important;
align-items: center !important;
position: relative;
}
/* --- 1. BOUTON TOGGLE (Pillule) --- */
.bridge-share-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px; /* Mme hauteur que le bouton Like */
padding: 0 16px;
border-radius: 50px;
background-color: transparent; /* Fond transparent pour tre discret */
border: 1px solid var(--color-blue-secondary); /* Bordure lgre */
color: var(--color-blue-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.bridge-share-toggle:hover,
.bridge-share-dropdown-wrapper.is-open .bridge-share-toggle {
background-color: var(--color-blue-5);
border-color: var(--color-blue-40);
color: var(--color-blue-primary);
}
.bridge-share-toggle i {
font-size: 16px;
}
.bridge-share-toggle,
.bridge-like-wrapper .bridge-like-btn {
margin: 0 !important;
height: 36px !important; /* On fige la hauteur pour tous les boutons */
box-sizing: border-box;
}
/* Cacher le texte "Partager" sur mobile si vraiment pas de place */
@media (max-width: 480px) {
.bridge-share-toggle .share-btn-text {
display: none;
}
.bridge-share-toggle {
padding: 0;
width: 36px;
justify-content: center;
}
}
/* --- 2. MENU DROULANT --- */
.bridge-share-menu {
position: absolute;
top: calc(100% + 10px);
right: 0; /* Par dfaut (Desktop) : align droite du bouton */
width: 220px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
border: 1px solid var(--color-grey-80);
padding: 8px;
z-index: 1000;
text-align: left;
/* tat cach par dfaut */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* tat ouvert (via JS) */
.bridge-share-dropdown-wrapper.is-open .bridge-share-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Petit triangle (flche) au-dessus du menu */
.bridge-share-menu::before {
content: '';
position: absolute;
top: -6px;
right: 14px; /* Par dfaut : flche droite */
width: 12px;
height: 12px;
background: #fff;
transform: rotate(45deg);
border-top: 1px solid var(--color-grey-80);
border-left: 1px solid var(--color-grey-80);
}
/* --- RESPONSIVE MOBILE : Inversion du sens d'ouverture --- */
@media (max-width: 840px) {
.bridge-share-menu {
right: auto; /* On annule l'alignement droite */
left: 0; /* On aligne gauche du bouton */
}
/* On dplace aussi la petite flche */
.bridge-share-menu::before {
right: auto;
left: 14px; /* Flche gauche */
}
}
/* --- 3. ITEMS DU MENU --- */
.share-menu-item {
display: flex;
align-items: center;
width: 100%;
padding: 10px 12px;
border: none;
background: transparent;
text-align: left;
text-decoration: none !important;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
color: var(--color-blue-primary);
font-size: 14px;
font-weight: 500;
}
.share-menu-item:hover {
background-color: var(--color-blue-5);
}
/* Icnes dans le menu */
.share-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 12px;
font-size: 16px;
color: var(--color-blue-secondary);
}
.share-item-icon img {
width: 18px;
height: 18px;
object-fit: contain;
}
/* Couleurs spcifiques au survol */
.share-menu-item.whatsapp:hover .share-item-icon { color: #25D366; }
.share-menu-item.facebook:hover .share-item-icon { color: #1877F2; }
.share-menu-item.email:hover .share-item-icon { color: var(--color-red-80); }
/* --- Feedback Copi (Tooltip dans le menu) --- */
.bridge-copy-btn.copied .share-item-label::after {
content: " (Copied!)";
font-size: 11px;
color: #10B981; /* Vert */
font-weight: 700;
}
/* ==========================================================================
FAQ MENU - DESIGN "SMART PILLS"
========================================================================== */
/* Wrapper Sticky avec effet de flou (Glassmorphism) */
.faq-anchor-wrapper {
position: sticky;
top: 80px; /* Ajuste selon ton header */
z-index: 999;
background: rgba(255, 255, 255, 0.95); /* Fond presque opaque */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(10px);
padding: 20px 0;
margin-bottom: 30px;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
/* Masques de dgrads (Indicateurs visuels de scroll) */
.faq-anchor-scroller-mask {
position: relative;
overflow: hidden;
}
.faq-anchor-scroller-mask::before,
.faq-anchor-scroller-mask::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 40px; /* Plus large pour un fondu plus doux */
z-index: 2;
pointer-events: none;
}
.faq-anchor-scroller-mask::before {
left: 0;
background: linear-gradient(to right, #ffffff 15%, transparent);
}
.faq-anchor-scroller-mask::after {
right: 0;
background: linear-gradient(to left, #ffffff 20%, transparent);
}
/* Zone de Scroll */
.faq-anchor-scroller {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 12px; /* Espace entre les pillules */
padding: 4px 20px; /* Padding latral pour ne pas couper l'ombre */
/* Scroll invisible */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.faq-anchor-scroller::-webkit-scrollbar { display: none; }
/* ---------------------------------------------------------
DESIGN DES BOUTONS ANCRES FAQ
--------------------------------------------------------- */
.faq-anchor-item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
/* Typographie */
font-family: inherit;
font-size: 14px;
font-weight: 600; /* Plus gras pour la lisibilit */
letter-spacing: -0.01em;
color: #5D6C80; /* Gris bleut BuddyBoss (pas noir) */
text-decoration: none !important;
/* Fond Inactif */
background-color: #EFF2F7; /* Gris trs lger typique des apps */
border-radius: 12px; /* Arrondi moderne (pas totalement rond) */
border: 1px solid transparent; /* Pour viter le saut au hover */
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
}
/* tat Survol (Hover) */
.faq-anchor-item:hover {
background-color: #E2E6EA;
color: #1F295A; /* Texte plus fonc */
transform: translateY(-1px);
}
/* tat Actif (Slectionn) */
.faq-anchor-item.active {
background-color: var(--color-blue-primary);; /* Ta couleur Primaire */
color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0, 85, 170, 0.20); /* Glow bleu */
transform: scale(1.02); /* Lgre mise en avant */
}
/* Ajustement Mobile */
@media (max-width: 768px) {
.faq-anchor-wrapper { top: 60px; }
.faq-anchor-item {
padding: 8px 16px;
font-size: 13px;
border-radius: 10px;
}
}
/* ==========================================================================
SYMBOLES DE CARTES (!S, !H, !D, !C)
========================================================================== */
/* Style global du symbole */
.bridge-suit {
display: inline-block;
font-weight: normal;
line-height: 1;
font-size: 1.1em;
vertical-align: -1px;
}
/* Application des couleurs dfinies dans tes variables :root */
.suit-spades {
color: var(--color-spades, #0b2a5b);
}
.suit-hearts {
color: var(--color-hearts, #d02b3b);
}
.suit-diamonds {
color: var(--color-diamonds, #f28c1a);
}
.suit-clubs {
color: var(--color-clubs, #1b7a52);
}
/* --- 1. BOUTON PUBLIER (Ajustement) --- */
.custom-header-btn {
/* On retire la position absolue pour qu'il s'intgre au flux */
position: static !important;
transform: none !important;
margin-right: 15px; /* Espace avec l'icne de notification */
/* Style visuel conserv */
display: inline-flex;
align-items: center;
border-radius: 24px;
background: var(--color-blue-primary);
padding: 0 16px !important;
font-weight: 500;
font-size: 14px;
color: #fff;
max-height: 40px;
line-height: 34px;
transition: 0.2s all ease;
text-decoration: none;
}
.custom-header-btn:hover {
background: var(--color-blue-80);
color: #fff;
}
/* --- 2. SLECTEUR DE LANGUE (Design Toggle Pill) --- */
.custom-lang-switcher {
/* Positionnement simple dans le flux flex */
display: inline-flex;
align-items: center;
margin-left: 20px; /* Espace avec l'avatar qui est sa gauche */
/* Style visuel "Toggle" */
background-color: #F0F2F5;
border-radius: 40px;
padding: 4px;
border: 1px solid rgba(0,0,0,0.04);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
height: 36px;
box-sizing: border-box;
z-index: 10;
}
/* Liens FR / EN */
.custom-lang-switcher a.lang-item {
font-family: 'Satoshi', sans-serif;
font-size: 13px;
font-weight: 600;
color: #65676B;
text-decoration: none;
padding: 0 14px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
line-height: 1;
cursor: pointer;
user-select: none;
}
/* tat Actif (Blanc) */
.custom-lang-switcher a.lang-item.active {
background-color: #FFFFFF;
color: var(--color-blue-primary, #00024E);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0,0,0,0.04);
cursor: default;
pointer-events: none;
transform: scale(1.02);
}
.custom-lang-switcher a.lang-item:not(.active):hover {
color: var(--color-blue-primary);
background-color: rgba(255,255,255,0.5);
}
.custom-lang-switcher.bridge-content-switcher {
height: 48px;
}
/* Cacher sur mobile */
@media (max-width: 900px) {
.custom-lang-switcher,
.custom-header-btn {
display: none !important;
}
}
/* 1. On force l'affichage mme sur mobile pour ce shortcode spcifique */
@media (max-width: 899px) {
.custom-lang-switcher.bridge-content-switcher {
display: inline-flex !important;
}
}
/* 2. On reset les marges du header pour qu'il s'intgre bien dans un bloc */
.custom-lang-switcher.bridge-content-switcher {
margin: 0 !important;
position: relative;
top: auto;
right: auto;
transform: none;
}
/* ==========================================================================
RESPONSIVE HEADER (FIX OVERLAP)
========================================================================== */
/* 1. MODE COMPACT (Laptop moyen / Tablette Paysage)
S'active quand l'cran est entre 841px et 1350px pour viter la casse */
@media (min-width: 841px) and (max-width: 1350px) {
/* Bouton Publier : Plus petit et moins de marges */
.custom-header-btn {
font-size: 12px !important;
padding: 0 12px !important;
max-height: 32px !important;
line-height: 32px !important;
margin-right: 8px !important; /* Rapproche des notifs */
}
/* Selecteur Langue : Plus petit */
.custom-lang-switcher {
height: 32px !important;
margin-left: 10px !important; /* Rapproche de l'avatar */
padding: 3px !important;
}
.custom-lang-switcher a.lang-item {
font-size: 11px !important;
padding: 0 10px !important;
}
/* Force l'alignement vertical si flex bouge */
.header-aside {
align-items: center;
}
.site-header-container .site-branding {
min-width: 240px !important;
}
.header-search-wrap .search-form {
margin-left: 0px;
}
.header-search-wrap .search-form {
width: 240px !important;
}
.bb-buddypanel .header-search-wrap {
padding: 0px 24px !important;
}
}
/* 2. MODE MOBILE (Sous 840px)
On cache tout car le Panel Mobile BuddyBoss prend le relais */
@media (max-width: 840px) {
.custom-lang-switcher,
.custom-header-btn {
display: none !important;
}
}
/* ==========================================================================
BULLETINS PAGE
========================================================================== */
/* Wrapper Global (Fond Bleu clair) */
.bridge-bulletins-wrapper {
background: var(--color-blue-10);
border-radius: 24px;
padding: 40px;
position: relative;
border: 1px solid #Eef2f6;
}
/* --- FILTRES (TOP BAR) --- */
.bulletin-controls {
display: flex;
gap: 15px;
margin-bottom: 40px;
align-items: center;
flex-wrap: wrap;
}
/* Groupe Recherche */
.bulletin-search-group {
position: relative;
flex: 2;
min-width: 280px;
}
.bulletin-search-group input {
width: 100%;
height: 48px;
padding: 0 20px 0 45px;
border-radius: 50px;
border: 1px solid #Eef2f6;
background: #fff;
font-size: 14px;
color: var(--color-blue-primary);
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
transition: all 0.2s;
outline: none;
}
.bulletin-search-group input:focus {
border-color: var(--color-red-80);
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.bulletin-search-group .search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
width: 18px;
height: 18px;
}
/* --- GRID LAYOUT --- */
.bulletin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
min-height: 200px;
}
/* --- BULLETIN CARD --- */
.bulletin-card {
background: #fff;
border-radius: 20px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 1px solid transparent;
box-shadow: 0 4px 6px rgba(0, 2, 78, 0.02);
height: 100%;
position: relative;
overflow: hidden;
}
/* Effet Hover: Lift + Bordure */
.bulletin-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 2, 78, 0.08);
border-color: rgba(239, 77, 62, 0.15); /* Rouge lger */
}
/* Icne PDF stylise */
.bul-icon-box {
width: 50px;
height: 50px;
background: var(--color-blue-5); /* Fond trs ple */
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-red-80); /* Icne Rouge */
font-size: 24px;
margin-bottom: 20px;
transition: background 0.3s;
}
.bulletin-card:hover .bul-icon-box {
background: var(--color-red-80);
color: #fff;
}
/* Infos */
.bul-info {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}
.bul-date {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #94A3B8;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.bul-title {
font-size: 18px;
font-weight: 700;
color: var(--color-blue-primary);
line-height: 1.3;
margin: 0 0 20px 0;
/* Limite 2 lignes */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Bouton CTA "Fake" */
.bul-cta {
margin-top: auto;
font-size: 14px;
font-weight: 600;
color: var(--color-blue-secondary);
display: flex;
align-items: center;
gap: 8px;
transition: gap 0.2s;
}
.bulletin-card:hover .bul-cta {
color: var(--color-red-80);
gap: 12px; /* Flche qui bouge */
}
/* --- COMPTEUR ET ETAT DISABLED DANS LE SELECT --- */
.custom-option .count {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-blue-10);
color: var(--color-blue-primary);
font-size: 10px;
font-weight: 700;
border-radius: 12px;
padding: 2px 8px;
margin-left: 8px;
min-width: 20px;
height: 20px;
line-height: 1;
}
.custom-option:hover .count {
background-color: #fff;
color: var(--color-blue-primary);
}
.custom-option.disabled {
color: #CBD5E1 !important;
cursor: default !important;
pointer-events: none;
background: transparent !important;
}
.custom-option.disabled .count {
background-color: #f0f0f0;
color: #ccc;
opacity: 1; /* On garde l'opacit pour voir la bulle grise */
}
/* Responsive */
@media (max-width: 768px) {
.bridge-bulletins-wrapper {
padding: 20px;
}
.bulletin-controls {
flex-direction: column;
align-items: stretch;
}
.bulletin-search-group, .custom-select-wrapper {
width: 100%;
}
}
/* ==========================================================================
SINGLE BULLETIN (PDF VIEWER)
========================================================================== */
.single-bulletin-wrapper {
background: var(--color-blue-10);
height: 85vh;
min-height: 600px;
padding: 30px;
border-radius: 24px;
display: flex;
flex-direction: column;
gap: 20px;
box-sizing: border-box;
}
.bul-single-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 2, 78, 0.1);
flex-shrink: 0;
}
.bul-header-left {
display: flex;
flex-direction: column;
gap: 8px;
}
.bul-back-btn {
font-size: 13px;
font-weight: 600;
color: var(--color-blue-secondary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s;
}
.bul-back-btn:hover {
color: var(--color-red-80);
}
.bul-single-title {
font-size: 26px;
font-weight: 800;
color: var(--color-blue-primary);
margin: 0;
line-height: 1.1;
}
.bul-single-date {
font-size: 13px;
font-weight: 700;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 1px;
}
.bul-download-btn {
background: var(--color-red-80);
color: #fff !important;
padding: 8px 18px;
font-size: 13px;
border-radius: 30px;
font-weight: 600;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
box-shadow: 0 2px 6px rgba(239, 77, 62, 0.2);
}
.bul-download-btn:hover {
background: var(--color-red-60);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(239, 77, 62, 0.3);
}
.bul-download-btn i {
font-size: 14px;
}
.bul-viewer-container {
flex: 1;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.03);
position: relative;
border: 1px solid #Eef2f6;
}
.bul-viewer-container object {
display: block;
width: 100%;
height: 100% !important;
border: none;
}
.bul-no-pdf {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 20px;
color: var(--color-blue-primary);
font-weight: 500;
}
/* =========================================
BULLETIN EXPLORER (MODE COLLECTION)
========================================= */
/* 1. GRILLE : On force l'tirement des colonnes */
#bridge-bulletins-app .ble-series-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
align-items: stretch !important; /* Force toutes les cartes la mme hauteur */
}
/* 2. CARTE : Flexbox vertical + Hauteur 100% */
#bridge-bulletins-app .ble-serie-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important; /* La carte remplit toute la cellule */
min-height: 100%;
background: #fff;
border-radius: 20px;
overflow: hidden;
position: relative;
border: 1px solid transparent;
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
#bridge-bulletins-app .ble-serie-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 2, 78, 0.08);
border-color: #E1EDFA;
}
/* 3. IMAGE / THUMBNAIL */
#bridge-bulletins-app .ble-thumb-wrapper {
height: 180px;
position: relative;
background-color: #f0f2f5;
overflow: hidden;
flex-shrink: 0; /* Empche l'image de s'craser */
}
#bridge-bulletins-app .ble-thumb-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
#bridge-bulletins-app .ble-serie-card:hover .ble-thumb-wrapper img {
transform: scale(1.05);
}
/* Fallback si pas d'image (Fond dgrad) */
#bridge-bulletins-app .ble-thumb-wrapper.is-placeholder {
background: linear-gradient(135deg, var(--color-blue-10) 0%, #dbeafe 100%);
display: flex;
align-items: center;
justify-content: center;
}
#bridge-bulletins-app .ble-fallback-visual {
color: var(--color-blue-40);
font-size: 48px;
opacity: 0.5;
}
/* 4. CORPS DE LA CARTE : Flex Grow pour pousser le footer */
#bridge-bulletins-app .ble-serie-card .ble-card-body {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important; /* MAGIE : Occupe tout l'espace vide disponible */
padding: 25px;
height: auto;
}
#bridge-bulletins-app .ble-title {
font-size: 18px;
font-weight: 700;
color: var(--color-blue-primary);
line-height: 1.3;
margin: 0 0 5px 0;
}
#bridge-bulletins-app .ble-desc {
font-size: 14px;
color: #64748B;
line-height: 1.5;
margin-bottom: 15px; /* Marge interne */
flex-shrink: 0;
}
/* 5. DATE (Last Update) : Style Discret */
.ble-meta-date {
font-size: 13px;
font-weight: 400; /* Pas de gras */
color: #94A3B8; /* Gris doux */
font-style: italic;
margin-top: 5px;
margin-bottom: 20px; /* Espace avant le footer */
display: flex;
align-items: center;
gap: 6px;
text-transform: none !important; /* Pas de majuscules */
}
.ble-meta-date i {
font-size: 12px;
opacity: 0.8;
}
/* 6. FOOTER : Coll en bas */
#bridge-bulletins-app .ble-footer {
margin-top: auto !important; /* Scurit : Pousse tout en bas */
padding-top: 15px;
border-top: 1px solid var(--color-blue-10);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#bridge-bulletins-app .ble-author {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--color-blue-primary);
}
#bridge-bulletins-app .ble-count i {
color: var(--color-blue-60);
transition: transform 0.2s;
}
#bridge-bulletins-app .ble-serie-card:hover .ble-count i {
transform: translateX(4px);
color: var(--color-red-80);
}
@media (max-width: 768px) {
.single-bulletin-wrapper {
padding: 15px;
height: 90vh;
border-radius: 16px;
}
.bul-single-title {
font-size: 20px;
}
.bul-single-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.bul-header-right {
width: auto;
}
}
/* ==========================================================================
BRIDGE SUB-NAVIGATION (PROBLEMS HEADER)
========================================================================== */
/* Conteneur Global */
.bridge-subnav-wrapper {
background: #fff;
border-bottom: 1px solid var(--color-blue-60, #6393D6);
margin-bottom: 80px;
position: relative;
z-index: 100; /* Au-dessus du contenu */
}
.bridge-subnav-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
/* Utilisation du max-width standard du site si besoin, sinon 100% */
width: 100%;
align-items: flex-start;
}
/* --- BRAND (H1) --- */
.subnav-brand {
text-decoration: none !important;
transition: opacity 0.2s;
}
.subnav-brand:hover {
opacity: 0.8;
}
.subnav-brand h1 {
font-size: 32px; /* Taille H1 impactante */
font-weight: 800;
color: var(--color-blue-primary);
margin: 0;
line-height: 1.1;
letter-spacing: -0.5px;
}
/* --- MENU NAVIGATION --- */
.subnav-menu {
display: flex;
align-items: center;
gap: 30px;
}
/* Items & Triggers */
.subnav-item {
position: relative;
}
.subnav-trigger {
background: none;
border: none;
font-size: 18px;
font-weight: 400;
color: var(--color-blue-primary);
cursor: pointer;
padding: 10px 0;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.2s;
}
.subnav-trigger i {
font-size: 12px;
transition: transform 0.2s;
color: var(--color-blue-40);
}
.subnav-item:hover .subnav-trigger {
color: var(--color-blue-primary);
}
.bridge-subnav-wrapper .subnav-trigger:hover,
.bridge-subnav-wrapper .subnav-trigger:focus,
.bridge-subnav-wrapper .subnav-trigger:active,
/* Cas o on survole le parent (pour garder l'effet quand la souris descend dans le menu) */
.bridge-subnav-wrapper .subnav-item:hover .subnav-trigger {
/* 1. Enlever le fond gris/blanc que le thme ajoute */
background: transparent !important;
background-color: transparent !important;
/* 2. Enlever les bordures/ombres du thme */
border: none !important;
box-shadow: none !important;
outline: none !important;
/* 3. Forcer ta couleur de texte */
color: var(--color-red-80) !important;
}
.subnav-item:hover .subnav-trigger i {
transform: rotate(180deg);
color: var(--color-red-80);
}
/* --- DROPDOWNS --- */
.subnav-dropdown {
position: absolute;
top: 100%;
right: 0; /* Alignement droite pour ne pas sortir de l'cran */
width: 260px;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 2, 78, 0.1);
border: 1px solid var(--color-blue-10);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
pointer-events: none;
}
/* Affichage au survol (Desktop) */
.subnav-item:hover .subnav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Liens dans le dropdown */
.subnav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
text-decoration: none !important;
color: var(--color-blue-primary) !important;
font-weight: 500;
font-size: 15px;
transition: all 0.2s;
}
.subnav-link:hover {
background: var(--color-blue-5); /* Fond bleu trs ple */
color: var(--color-blue-primary) !important;
}
/* Icones colores dans le dropdown */
.subnav-link .icon-box {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #F1F5F9;
color: #64748B;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.subnav-link:hover .icon-box {
background: #fff;
color: var(--color-red-80);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Variantes couleurs spcifiques (Optionnel) */
.subnav-link:hover .icon-box.bidding { color: var(--color-blue-primary); }
.subnav-link:hover .icon-box.lead { color: var(--color-diamonds); }
.subnav-link:hover .icon-box.cardplay { color: var(--color-clubs); }
/* --- CTA BUTTON (Create Problem) --- */
.subnav-btn-cta {
background: var(--color-red-80);
color: #fff !important;
padding: 8px 24px;
border-radius: 50px;
font-weight: 500;
font-size: 16px;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(239, 77, 62, 0.25);
}
.subnav-btn-cta:hover {
background: var(--color-red-secondary);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 77, 62, 0.35);
}
.subnav-btn-cta i {
font-size: 14px;
}
/* --- FIX SCROLL ANCRE (Navigation Problmes) --- */
:target {
scroll-margin-top: 180px;
}
.stk-block-content:target {
scroll-margin-top: 180px;
}
/* --- RESPONSIVE MOBILE --- */
/* On cache le bouton 3 points (Burger) car on n'en veut plus */
.subnav-mobile-toggle {
display: none !important;
}
@media (max-width: 960px) {
/* 1. Conteneur Global : Repre de positionnement */
.bridge-subnav-wrapper {
margin-bottom: 20px;
background: #fff;
border-bottom: 1px solid var(--color-blue-60, #6393D6);
padding-bottom: 0;
height: auto;
}
.bridge-subnav-inner {
/* Important : permet de positionner le bouton CTA par rapport ce bloc */
position: relative;
display: flex;
flex-direction: column;
padding: 15px 0 0 0; /* Un peu d'espace en haut */
width: 100%;
overflow: visible; /* On laisse dpasser pour les ombres */
gap: 8px;
}
/* 2. Titre H1 (Align gauche) */
.subnav-brand {
padding-left: 0;
margin-bottom: 15px; /* Espace avant la ligne d'onglets */
max-width: 65%; /* On limite la largeur pour ne pas passer sous le bouton */
}
.subnav-brand h1 {
font-size: 24px; /* Taille ajuste pour mobile */
margin: 0;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Si le titre est trop long */
}
/* 3. LE CTA (Magie : Positionn en haut droite) */
/* On sort le bouton du flux normal pour le coller en face du titre */
.subnav-item.item-cta {
display: block;
position: absolute;
top: 12px; /* Ajustement vertical pour tre centr avec le titre */
right: 0;
z-index: 10;
}
.subnav-btn-cta {
/* Style "Bouton Compact" */
background: var(--color-red-80) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 6px 12px !important;
height: 34px !important;
font-size: 12px !important;
font-weight: 700 !important;
box-shadow: 0 4px 10px rgba(239, 77, 62, 0.3) !important;
display: flex;
align-items: center;
gap: 6px;
}
/* Sur les trs petits crans, on cache le texte "Create..." pour ne garder que le + */
@media (max-width: 400px) {
.subnav-brand {
max-width: 80%;
}
.subnav-btn-cta {
width: 34px;
padding: 0 !important;
justify-content: center;
gap: 0px;
}
.subnav-btn-cta i { margin: 0; }
.subnav-btn-cta:not(:hover) { font-size: 0 !important; } /* Hack pour cacher le texte */
.subnav-btn-cta i { font-size: 16px !important; } /* On garde l'icone visible */
}
/* 4. La Barre de Scroll (Onglets Textes uniquement) */
.subnav-menu {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 20px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding: 0 5px;
/* Cache scrollbar */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.subnav-menu::-webkit-scrollbar {
display: none;
}
/* Explosion des Dropdowns pour le scroll */
.subnav-trigger { display: none !important; }
.subnav-item.has-dropdown { display: contents; }
.subnav-dropdown {
position: static;
width: auto;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
padding: 0;
display: contents;
pointer-events: auto;
}
/* Style des liens (Onglets sobres) */
.subnav-link {
flex: 0 0 auto;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
box-shadow: none;
padding: 0 0 12px 0;
margin: 0;
font-size: 18px;
font-weight: 400;
color: var(--color-blue-primary);
white-space: nowrap;
}
.subnav-link .icon-box {
display: none !important; /* On cache les icnes pour le look "Ressources" */
}
.subnav-link:active,
.subnav-link:hover {
background: transparent !important;
color: var(--color-blue-primary) !important;
border-bottom-color: var(--color-blue-primary) !important; /* Trait actif */
}
}
/* ==========================================================================
BRIDGE FORUM CARDS (DESIGN COMPLET)
========================================================================== */
/* --- 1. LAYOUT CARTE & GRILLE --- */
#bbpress-forums .bb-root .bb-forums-list > li {
background-color: var(--color-white);
border: 1px solid var(--color-grey-80);
border-radius: 24px;
padding: 30px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 6px rgba(0, 2, 78, 0.02);
display: flex;
flex-direction: column;
margin-bottom: 0; /* Reset BuddyBoss */
}
/* Effet Hover : Lift */
#bbpress-forums .bb-root .bb-forums-list > li:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 2, 78, 0.08);
border-color: rgba(99, 147, 214, 0.3);
}
/* --- 2. FIX BUDDYBOSS : FORCER L'AFFICHAGE DES SOUS-FORUMS --- */
.forums-meta > span {
display: inline-block !important;
}
/* --- 3. STYLE DES SOUS-FORUMS (VOS PILULES RESTAURES) --- */
.forums-meta > span {
display: inline-flex;
align-items: center;
padding: 6px 14px;
margin: 4px 4px 4px 0; /* Espacement */
/* Couleurs du Design System */
background-color: var(--color-blue-10) !important;
color: var(--color-blue-secondary) !important;
/* Forme */
border-radius: 50px;
border: 1px solid transparent;
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
transition: all 0.2s ease;
}
/* Le lien l'intrieur doit hriter de la couleur */
.forums-meta > span a {
color: inherit !important;
text-decoration: none !important;
}
/* Hover sur la pilule */
.forums-meta > span:hover {
background-color: var(--color-blue-primary) !important;
color: var(--color-white) !important;
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 2, 78, 0.15);
}
/* Nettoyage des virgules parasites */
.forums-meta {
margin-top: 12px;
font-size: 0; /* Cache le texte (virgules) hors des balises enfants */
}
/* ==========================================================================
FORUM CARD FOOTER (LAST ACTIVITY FIX)
========================================================================== */
/* Conteneur Flex en bas de carte */
#bbpress-forums .bs-card-list .bs-timestamp {
font-size: 13px;
color: #94A3B8;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
line-height: 1.4;
}
/* --- CAS 1 : IL Y A UNE ACTIVIT (Lien prsent) --- */
/* L'ICNE (Sur le conteneur, vite de casser la police du texte) */
#bbpress-forums .bs-card-list .bs-timestamp:has(a)::before {
content: "\f017"; /* Horloge FontAwesome */
font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", sans-serif !important;
font-weight: 900 !important;
font-style: normal !important;
color: #64748B;
margin-right: 8px;
font-size: 13px;
}
/* LE LABEL "Last activity :" (Inject via variable PHP pour WPML) */
#bbpress-forums .bs-card-list .bs-timestamp a::before {
content: var(--bridge-last-active-label);
font-family: inherit !important; /* Garde votre police (Satoshi) */
font-weight: 400 !important;
color: #64748B;
margin-right: 4px;
}
/* LE LIEN DE LA DATE */
#bbpress-forums .bs-card-list .bs-timestamp a {
color: var(--color-blue-primary);
font-weight: 700;
text-decoration: none;
transition: color 0.2s;
}
#bbpress-forums .bs-card-list .bs-timestamp a:hover {
color: var(--color-red-80);
text-decoration: underline;
}
/* --- CAS 2 : AUCUNE ACTIVIT (Gris) --- */
.bridge-no-activity {
display: flex;
align-items: center;
gap: 8px;
color: #CBD5E1;
font-style: italic;
width: 100%;
}
.bridge-no-activity::before {
content: "\f068"; /* Minus */
font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", sans-serif !important;
font-weight: 900 !important;
font-style: normal !important;
font-size: 12px;
}
/* --- WELCOME MODAL STYLES --- */
#bridge-welcome-modal {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
background: transparent; /* L'overlay gre la couleur */
}
/* Fond sombre flout (comme Contribute) */
#bridge-welcome-modal .reblex-modal-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(10, 25, 47, 0.6); /* Bleu nuit transparent */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.welcome-modal-content {
background: transparent;
width: 90%;
max-width: 750px; /* Largeur idale */
max-height: 90vh;
border-radius: 24px; /* Arrondi comme Contribute */
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
position: relative;
z-index: 100001;
overflow: hidden;
}
.welcome-modal-content .reblex-modal-body {
padding: 0 !important;
overflow-y: auto;
flex: 1;
width: 100%;
}
/* Fixes Stackable */
.welcome-modal-content .reblex-modal-body .stk-block-content {
max-width: 100% !important;
width: 100% !important;
}
.welcome-modal-content [data-aos],
.welcome-modal-content .stk-block {
opacity: 1 !important; transform: none !important;
visibility: visible !important; animation: none !important;
}
.welcome-modal-content .video-welcome {
border-radius: 16px !important;
overflow: hidden;
}
.text-highlight-modal .has-inline-color {
padding: 8px 16px;
border-radius: 40px;
}
@media (min-width: 992px) {
.lg-grid-1-4 {
-ms-flex: 0 0 15%;
flex: 0 0 15%;
max-width: 15%;
}
}
.site-header-container #site-logo .site-title img.bb-logo{
max-height: 140px !important;
}
@media (max-width: 768px) {
.buddypanel-open .site {
margin-left: 0px !important;
}
.bb-buddypanel .bb-footer, .bb-buddypanel .header-search-wrap, .bb-buddypanel .site-content, .bb-buddypanel .site-header {
padding: 0 20px;
}
.bb-buddypanel.buddypanel-open.sticky-header .site-header {
width: 100%;
}
}
/* =========================================
BRIDGE VIDEO LIBRARY (BVL) - DESIGN v4
========================================= */
.bvl-wrapper {
background: #F2F9FF;
padding: 40px !important;
}
/* --- LIGNE 1 : Search & Lang --- */
.bvl-top-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap; /* Scurit mobile */
}
/* Recherche (Prend toute la place dispo gauche) */
.bvl-search-group {
position: relative;
flex-grow: 1; /* S'tend */
max-width: 400px; /* Mais pas trop */
}
.bvl-search-group input {
width: 100%;
padding: 10px 20px 10px 45px;
border-radius: 50px;
border: 1px solid #E1EDFA;
background: #fff;
color: var(--color-blue-primary);
font-weight: 500;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
height: 42px;
}
.bvl-search-group input:focus {
border-color: var(--color-blue-60);
outline: none;
}
.bvl-search-group .search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
width: 16px;
}
/* Langue (Fixe droite, max 200px) */
#bvl-app #bvl-wrap-lang {
width: 200px !important;
max-width: 200px !important;
min-width: 140px !important;
margin-left: auto; /* Pousse droite si wrap */
}
/* --- LIGNE 2 : Categories (Pills) --- */
.ble-pills-container {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
max-width: 100%;
margin-bottom: 30px; /* Espace avant la grille */
}
/* Note: le style .ble-filter-pill existe dj dans ton CSS global */
/* --- GRID & CARDS --- */
.bvl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 10px;
}
.bvl-card {
background: #fff;
overflow: hidden;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
transition: all 0.2s ease;
display: flex;
flex-direction: column;
border: 1px solid transparent;
border-radius: 16px;
height: 100%;
}
.bvl-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 2, 78, 0.1);
border-color: #E1EDFA;
}
/* Thumbnail */
.bvl-thumb-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: #000;
}
.bvl-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.bvl-card:hover .bvl-img {
transform: scale(1.05);
}
/* --- PLAY BUTTON (RESTAURATION DU STYLE ATTRACTIF) --- */
.bvl-overlay {
position: absolute; top:0; left:0; width:100%; height:100%;
background: rgba(0,0,0,0.1);
display: flex; align-items:center; justify-content:center;
opacity: 0; transition: opacity 0.2s; z-index: 1;
}
.bvl-card:hover .bvl-overlay { opacity: 1; }
.bvl-play-btn {
width: 56px; height: 56px;
background: rgba(255,255,255,0.25); /* Fond vitr */
backdrop-filter: blur(4px);
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
display: flex; align-items:center; justify-content:center;
font-size: 20px; padding-left: 4px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Rebond */
}
/* Hover attractif : Rouge + Grand + Ombre */
.bvl-card:hover .bvl-play-btn {
background: var(--color-red-80);
border-color: var(--color-red-80);
transform: scale(1.15);
box-shadow: 0 8px 20px rgba(239, 77, 62, 0.4);
}
/* Badge */
.bvl-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255,255,255,0.95);
color: var(--color-blue-primary);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 6px;
z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Content */
.bvl-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.bvl-title {
font-size: 16px;
font-weight: 700;
color: var(--color-blue-primary);
line-height: 1.35;
margin: 0 0 8px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ON NE TOUCHE PAS A L'EXCERPT COMME DEMANDE */
.bvl-excerpt {
font-size: 16px;
color: #64748B;
line-height: 1.4;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2; /* Max 2 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
}
.bvl-meta {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.bvl-cta {
font-size: 12px;
font-weight: 700;
color: var(--color-blue-60);
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
}
.bvl-card:hover .bvl-cta {
color: var(--color-red-80);
}
.bvl-player-wrapper iframe {
border-radius: 16px;
}
.ble-modal-content.bvl-modal-content {
max-width: 720px !important;
}
/* Watched State */
.bvl-watched-indicator {
position: absolute; bottom: 8px; right: 8px;
background: rgba(16, 185, 129, 0.9); color: #fff;
font-size: 10px; font-weight: 700; padding: 3px 8px;
border-radius: 4px; z-index: 3; pointer-events: none;
text-transform: uppercase; display: flex; align-items: center; gap: 4px;
}
.bvl-card.is-watched .bvl-img { filter: grayscale(100%); opacity: 0.7; }
.bvl-card.is-watched .bvl-title { color: #64748B; }
.bvl-modal-close-wrapper {
margin-bottom: 16px;
}
/* Responsive */
@media (max-width: 768px) {
.bvl-wrapper {
padding: 32px 24px !important;
}
.bvl-top-controls {
flex-direction: column;
align-items: stretch;
}
.bvl-search-group { max-width: 100%; }
#bvl-app #bvl-wrap-lang { width: 100% !important; max-width: 100% !important; margin-left: 0; }
}
/* =========================================
BRIDGE HOME VIDEOS (SECTION REGARDER)
========================================= */
/* Grille 3 colonnes */
.bhv-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 100%;
}
/* Item Global */
.bhv-item {
text-decoration: none !important;
display: flex;
flex-direction: column;
group: transition; /* Pour l'effet hover */
background: transparent; /* Pas de fond blanc ici contrairement l'autre widget */
border: none;
box-shadow: none;
border-radius: 0px !important;
}
/* Thumbnail Container */
.bhv-thumb {
position: relative;
width: 100%;
aspect-ratio: 16/9; /* Ratio standard vido */
border-radius: 16px; /* Arrondi comme sur l'image */
overflow: hidden;
margin-bottom: 16px; /* Espace entre image et titre */
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transform: translateZ(0); /* Fix Safari border-radius */
}
.bhv-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
/* Effet Zoom Image au survol */
.bhv-item:hover .bhv-thumb img {
transform: scale(1.05);
}
/* Bouton Play (Overlay) */
.bhv-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: #EF4D3E; /* Rouge/Orange du logo */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
padding-left: 4px; /* Centrage optique de l'icne triangle */
box-shadow: 0 4px 15px rgba(239, 77, 62, 0.4);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s;
z-index: 2;
}
.bhv-home .bvl-card:hover {
box-shadow: none !important;
}
/* Animation Bouton Play au survol */
.bhv-item:hover .bhv-play-overlay {
transform: translate(-50%, -50%) scale(1.15);
background-color: #d14033;
}
/* Titre */
.bhv-title {
font-size: 18px;
font-weight: 800; /* Gras comme sur l'image */
color: var(--color-blue-primary, #00024E);
line-height: 1.3;
margin: 0;
transition: color 0.2s ease;
}
.bhv-item:hover .bhv-title {
color: #EF4D3E; /* Changement de couleur au survol (optionnel) */
}
.bvl-player-wrapper iframe {
min-height: 320px;
}
@media (max-width: 600px) {
.carousel-highlight-home .card-title a {
font-size: 28px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* --- RESPONSIVE --- */
@media (max-width: 991px) {
.bhv-grid-container {
grid-template-columns: repeat(2, 1fr); /* 2 colonnes tablette */
gap: 28px;
}
}
@media (max-width: 600px) {
.bhv-grid-container {
grid-template-columns: 1fr; /* 1 colonne mobile */
}
.bhv-thumb {
border-radius: 12px;
}
.bhv-title {
font-size: 16px;
}
}
/* ==========================================================================
PROFILE : CONTRIBUTIONS & PROBLEMS SWITCHER
========================================================================== */
.bridge-profile-header-modern {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #Eef2f6;
flex-wrap: wrap;
gap: 20px;
flex-direction: column;
align-content: flex-start;
}
.profile-section-title {
margin: 0 !important;
font-size: 28px !important;
font-weight: 800 !important;
color: var(--color-blue-primary, #00024E);
}
/* Le conteneur du Toggle */
.bridge-profile-switcher {
display: inline-flex;
background-color: var(--color-blue-5, #F2F9FF);
border-radius: 50px;
padding: 6px;
border: 1px solid var(--color-blue-10, #E1EDFA);
}
/* Le style des boutons internes */
/* Boutons internes du Toggle (Passage en balise A) */
.profile-switch-btn {
border: none;
background: transparent;
font-size: 15px;
font-weight: 600;
color: #64748B;
padding: 10px 24px;
border-radius: 40px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
align-items: center;
gap: 8px;
outline: none;
text-decoration: none !important; /* EMPCHE LE SOULIGNEMENT DE BUDDYBOSS */
}
.profile-switch-btn:hover {
color: var(--color-blue-primary);
}
/* tat actif : fond blanc, texte bleu, icne rouge */
.profile-switch-btn.active {
background-color: #fff;
color: var(--color-blue-primary);
box-shadow: 0 4px 15px rgba(0, 2, 78, 0.08);
}
.profile-switch-btn i {
font-size: 14px;
opacity: 0.8;
}
.profile-switch-btn.active i {
color: var(--color-red-80, #EF4D3E);
opacity: 1;
}
/* Barre d'action pour le bouton "Crer" */
.profile-action-bar {
margin-bottom: 24px;
display: flex;
justify-content: flex-end; /* Aligne le bouton droite */
}
/* Bouton "Crer / Publier" restylis */
.bridge-btn-add {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--color-blue-primary, #00024E);
color: #fff !important;
padding: 12px 24px;
border-radius: 50px;
font-size: 15px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 2, 78, 0.15);
}
.bridge-btn-add:hover {
background-color: var(--color-blue-80, #3860B0);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 2, 78, 0.25);
}
/* Responsive Mobile */
@media (max-width: 768px) {
.bridge-profile-header-modern {
flex-direction: column;
align-items: flex-start;
}
.bridge-profile-switcher {
width: 100%;
display: flex;
}
.profile-switch-btn {
flex: 1;
justify-content: center;
padding: 10px 12px;
font-size: 14px;
}
.profile-action-bar {
justify-content: flex-start;
}
.bridge-btn-add {
width: 100%;
justify-content: center;
}
}
/* =========================================
BRIDGE TWITCH & REPLAYS SECTION (DESIGN v2)
========================================= */
/* --- BLOC GAUCHE : PLAYER TWITCH --- */
.bridge-twitch-wrapper {
background: #fff;
border-radius: 24px;
padding: 24px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #Eef2f6;
}
.twitch-header {
font-size: 14px;
font-weight: 800;
color: #EF4D3E; /* Rouge Live */
text-transform: uppercase;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.5px;
}
/* Animation Pulse Rouge */
.pulse-icon {
width: 10px; height: 10px;
background-color: #EF4D3E;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 0 rgba(239, 77, 62, 0.7);
animation: twitchPulse 2s infinite;
}
@keyframes twitchPulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 77, 62, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 77, 62, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 77, 62, 0); }
}
/* Iframe */
.twitch-player-container {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 16px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Switcher Chanes */
.twitch-channel-switcher {
display: flex;
gap: 10px;
overflow-x: auto; /* Permet le dfilement horizontal */
padding-bottom: 8px; /* Espace pour la barre de dfilement */
padding: 4px 4px 16px 4px;
margin: -4px -4px -10px -4px;
-webkit-overflow-scrolling: touch; /* Dfilement fluide sur iOS */
scrollbar-width: thin; /* Barre de dfilement fine sur Firefox */
scrollbar-color: #E2E8F0 transparent;
}
.twitch-channel-btn {
flex: 0 0 auto;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 50px; /* Pill shape */
padding: 8px 16px;
color: #64748B;
font-weight: 700;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
white-space: nowrap;
}
.twitch-channel-btn:hover {
background: #fff;
border-color: #00024E;
color: #00024E;
transform: translateY(-1px);
}
.twitch-channel-switcher.custom-scrollbar::-webkit-scrollbar {
height: 4px; /* Hauteur au lieu de width pour le scroll horizontal */
}
.twitch-channel-switcher.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #E2E8F0;
border-radius: 10px;
}
.twitch-channel-switcher.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.twitch-channel-btn.active {
background: #00024E;
color: #fff;
border-color: #00024E;
box-shadow: 0 4px 10px rgba(0, 2, 78, 0.2);
}
.status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background-color: #cbd5e1;
}
.twitch-channel-btn.active .status-dot {
background-color: #EF4D3E; /* Rouge quand actif */
}
/* --- Style pur des Onglets (Haut) --- */
.stream-tabs {
display: flex;
gap: 25px;
margin-bottom: 20px;
border-bottom: 2px solid #F1F5F9;
padding-left: 5px;
}
/* --- Onglets --- */
.stream-tabs {
display: flex;
gap: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #Eef2f6;
padding-bottom: 10px;
}
.tab-btn {
background: none;
border: none;
font-weight: 700;
font-size: 14px;
color: #64748B;
cursor: pointer;
padding: 5px 10px;
position: relative;
transition: color 0.3s;
}
.tab-btn.active {
color: #00024E;
}
.stream-tabs .tab-btn:focus{
border: none !important;
box-shadow: none !important;
}
.tab-btn.active::after {
content: '';
position: absolute;
bottom: -11px;
left: 0;
width: 100%;
height: 3px;
background: #00024E;
border-radius: 10px 10px 0 0;
}
/* Conteneur de l'overlay */
.stream-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px); /* Flou artistique */
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 16px;
color: #fff;
text-align: center;
}
.overlay-content {
padding: 20px;
}
.overlay-content p {
margin: 15px 0;
font-size: 14px;
opacity: 0.9;
}
/* Le bouton YouTube */
.btn-youtube-direct {
display: inline-flex;
align-items: center;
background: #FF0000; /* Rouge YouTube */
color: #fff !important;
padding: 12px 24px;
border-radius: 50px;
text-decoration: none !important;
font-weight: 700;
transition: transform 0.2s, background 0.2s;
box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}
.btn-youtube-direct:hover {
background: #cc0000;
transform: scale(1.05);
}
/* Icone Dashicon (WordPress) */
.overlay-content .dashicons {
font-size: 50px;
width: 50px;
height: 50px;
color: #FF0000;
}
/* --- Gestion de l'affichage des listes --- */
.channel-list-container {
display: none;
}
.channel-list-container.active {
display: block;
}
/* Rutilisation de tes styles existants pour les boutons */
.stream-btn {
/* Copie les styles de ton .twitch-channel-btn ici */
flex: 0 0 auto;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 50px;
padding: 8px 16px;
color: #64748B;
font-weight: 700;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
white-space: nowrap;
}
.stream-btn.active {
background: #00024E;
color: #fff;
border-color: #00024E;
box-shadow: 0 4px 10px rgba(0, 2, 78, 0.2);
}
.stream-btn.active .status-dot {
background-color: #EF4D3E;
}
.tab-btn {
background: transparent !important; /* On force la suppression du fond */
border: none;
font-weight: 700;
font-size: 15px;
color: #94A3B8;
cursor: pointer;
padding: 10px 0;
position: relative;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Hover & Active State */
.tab-btn:hover {
color: #64748B;
}
.tab-btn.active {
color: #00024E;
}
/* La petite barre sous l'onglet actif */
.tab-btn.active::after {
content: '';
position: absolute;
bottom: -2px; /* Colle la bordure du parent */
left: 0;
width: 100%;
height: 3px;
background: #00024E;
border-radius: 10px 10px 0 0;
}
/* Ajustement du titre live pour l'aligner avec les onglets */
.twitch-header {
margin-bottom: 15px;
}
/* --- BLOC DROITE : REPLAYS LIST (Updated Style) --- */
.bridge-replays-wrapper {
background: #fff;
border-radius: 20px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
height: 100%;
border: 1px solid #Eef2f6;
display: flex;
flex-direction: column;
}
/* EN-TTE */
.replays-header {
font-size: 13px;
font-weight: 800;
color: #94A3B8; /* Gris moderne pour le label */
text-transform: uppercase;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
}
.replays-header i {
color: #EF4D3E; /* Rouge */
font-size: 14px;
}
/* LISTE */
.replays-list {
display: flex;
flex-direction: column;
gap: 12px; /* Espace entre les cartes */
}
/* --- LA CARTE INDIVIDUELLE --- */
.replay-mini-card {
display: flex;
flex-direction: row-reverse !important;
align-items: center;
gap: 16px;
text-decoration: none !important;
/* Le style "Carte" */
background: #FFFFFF;
border: 1px solid #F1F5F9; /* Bordure trs lgre */
padding: 10px;
border-radius: 12px;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: none !important; /* Reset du style bvl-card global */
}
/* Effet Survol Carte */
.replay-mini-card:hover {
border-color: #E2E8F0;
background: #F8FAFC;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 2, 78, 0.05) !important;
}
/* IMAGE */
.mini-card-thumb {
width: 120px; /* Taille fixe */
aspect-ratio: 16/9;
border-radius: 8px;
overflow: hidden;
position: relative;
flex-shrink: 0;
background: #000;
}
.mini-card-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.3s ease;
opacity: 0.9;
}
/* Icone Play sur l'image */
.mini-play-icon {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.1);
transition: background 0.2s;
}
.mini-play-icon i {
color: #fff; font-size: 12px;
background: rgba(0, 2, 78, 0.6);
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
padding-left: 2px;
backdrop-filter: blur(2px);
}
.replay-mini-card:hover .mini-card-thumb img { transform: scale(1.05); }
.replay-mini-card:hover .mini-play-icon { background: rgba(0,0,0,0.0); }
.replay-mini-card:hover .mini-play-icon i { background: #EF4D3E; }
/* CONTENU TEXTE */
.mini-card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0;
}
/* 1. Catgorie (Tout en haut) */
.mini-cat-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #94A3B8;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
/* 2. Titre (Au milieu) */
.mini-card-title {
font-size: 14px;
font-weight: 700;
color: #00024E; /* Bleu Marine */
line-height: 1.3;
margin: 0;
/* Max 2 lignes */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s;
}
.replay-mini-card:hover .mini-card-title {
color: #EF4D3E; /* Titre devient rouge au survol */
}
/* 3. CTA (En bas) */
.mini-card-cta {
font-size: 11px;
font-weight: 600;
color: #6393D6; /* Bleu clair */
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;
text-transform: uppercase;
}
.replay-mini-card:hover .mini-card-cta {
color: #00024E;
}
/* Empty State */
.replay-empty {
font-size: 13px; color: #94A3B8; font-style: italic; text-align: center; padding: 20px;
}
/* Responsive */
@media (max-width: 768px) {
.twitch-channel-switcher {
padding-bottom: 10px;
}
.bridge-twitch-wrapper, .bridge-replays-wrapper {
padding: 16px;
}
.replay-mini-card {
padding: 8px;
gap: 12px;
}
.mini-card-thumb { width: 100px; }
}
/* =========================================
STYLE ONGLET PROBLMES (UPDATE)
========================================= */
/* --- 1. La Carte --- */
.user-problems-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.problem-card {
background: #fff;
border-radius: 16px;
border: 1px solid var(--color-grey-80);
padding: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
}
.problem-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 2, 78, 0.08);
border-color: var(--color-blue-10);
}
/* --- 2. En-tte (Badge) --- */
.problem-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.prob-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
padding: 0px 12px;
border-radius: 50px;
color: #fff;
}
/* Couleurs types */
.prob-badge.type-bidding { background-color: var(--color-red-60); }
.prob-badge.type-lead { background-color: var(--color-red-primary); }
.prob-badge.type-poll { background-color: var(--color-red-secondary); }
.prob-badge.type-cardplay { background-color: #1b7a52; }
.prob-badge.type-default { background-color: var(--color-blue-primary); }
.prob-badge.status-draft { background-color: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; }
.prob-badge.status-pending { background-color: #FFF7ED; color: #EA580C; border: 1px solid #FFEDD5; }
.problem-date {
font-size: 13px;
color: #94A3B8;
font-weight: 500;
}
/* --- 3. Corps (Titre & Main) --- */
.problem-title {
margin: 0 0 12px 0 !important;
font-size: 20px;
font-weight: 700;
line-height: 1.4;
color: var(--color-blue-primary);
}
.problem-title a { color: inherit; text-decoration: none; }
.problem-title a:hover { color: var(--color-blue-60); }
/* Affichage de la main */
.problem-hand-display {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
font-size: 16px;
color: var(--color-blue-primary);
}
.hand-label {
font-weight: 500;
color: #00024E;
}
/* Styles hrits de problems-grid.css pour assurer le rendu des cartes */
.bdm-hand-inline { font-weight: 700; }
.bdm-hand-suit { margin-right: 10px; display: inline-flex; align-items: center; gap: 2px; }
.bdm-suit--spades .bdm-suitrow__sym { color: #0b2a5b; }
.bdm-suit--hearts .bdm-suitrow__sym { color: #d02b3b; }
.bdm-suit--diamonds .bdm-suitrow__sym { color: #f28c1a; }
.bdm-suit--clubs .bdm-suitrow__sym { color: #1b7a52; }
/* --- 4. Footer (Stats & Actions) --- */
.problem-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #F1F5F9;
}
.problem-meta-stats {
display: flex;
align-items: center;
gap: 16px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-blue-80);
font-weight: 600;
}
.stat-item i {
font-size: 14px;
color: var(--color-blue-40); /* Couleur icne plus douce */
}
/* Actions */
.problem-actions {
display: flex;
align-items: center;
gap: 10px;
}
.action-btn.view {
background-color: var(--color-blue-primary);
color: #fff !important;
padding: 6px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.2s;
}
.action-btn.view:hover { background-color: var(--color-blue-80); }
.action-btn.edit {
width: 32px; height: 32px;
border-radius: 50%;
background: #F1F5F9;
color: var(--color-blue-secondary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
}
.action-btn.edit:hover { background: #E2E8F0; color: var(--color-blue-primary); }
.action-btn.delete {
width: 32px;
height: 32px;
border-radius: 50%;
background: #FEF2F2;
color: #DC2626;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
text-decoration: none !important;
transition: all 0.2s ease;
}
.action-btn.delete:hover {
background: #FEE2E2;
color: #991B1B;
transform: translateY(-1px);
}
#bridge-delete-modal .bridge-modal-actions {
margin-top: 10px;
}
#bridge-delete-modal .fa-triangle-exclamation {
animation: bridgePulseRed 2s infinite;
}
#bridge-confirm-delete-btn {
transition: all 0.2s ease !important;
}
#bridge-confirm-delete-btn:hover {
background-color: var(--color-red-80) !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(243, 117, 97, 0.4) !important;
}
/* 2. Bouton "Annuler" */
#bridge-delete-modal .js-cancel-delete {
transition: all 0.2s ease;
display: inline-block;
padding: 8px 16px;
border-radius: 50px;
}
#bridge-delete-modal .js-cancel-delete:hover {
color: var(--color-blue-primary) !important;
}
@keyframes bridgePulseRed {
0% { transform: scale(1); }
50% { transform: scale(1.05); opacity: 0.8; }
100% { transform: scale(1); }
}
.prob-lang-flag {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: block;
border: 2px solid #fff; /* Petite bordure blanche pour dtacher du fond gris si besoin */
}
.problem-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.problem-badges {
display: flex;
align-items: center; /* Centre verticalement le drapeau et le badge */
gap: 10px; /* Espace entre drapeau et badge */
}
.prob-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
padding: 2px 12px; /* Un peu moins de hauteur pour s'aligner avec le drapeau */
border-radius: 50px;
color: #fff;
height: 24px; /* Force la mme hauteur que le drapeau */
}
#prob-wrap-type, #prob-wrap-status {
flex-grow: 0;
}
/* Le reste du CSS (Couleurs types, Footer, etc.) reste identique ta version personnalise */
/* Mobile */
@media (max-width: 600px) {
.problem-header {
align-items: flex-start;
gap: 8px;
flex-direction: column;
}
.problem-footer {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.problem-actions {
width: 100%;
justify-content: space-between;
}
}
/* =========================================
STYLE ONGLET CONTRIBUTIONS
========================================= */
.user-contributions-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.contribution-card .contribution-card-inner {
display: flex;
gap: 24px;
align-items: stretch; /* Hauteur gale */
}
/* 1. L'Image (Thumbnail) */
.contribution-thumb {
width: 220px; /* Largeur fixe pour l'image */
flex-shrink: 0;
border-radius: 12px;
overflow: hidden;
position: relative;
background-color: #f0f2f5;
}
.contribution-thumb img {
width: 100%;
height: 100%;
object-fit: cover; /* Remplissage parfait */
transition: transform 0.3s ease;
display: block;
}
.contribution-card:hover .contribution-thumb img {
transform: scale(1.05); /* Zoom au survol */
}
/* 2. Le Contenu */
.contribution-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between; /* Pousse le footer vers le bas */
}
/* Titre plus gros pour les articles */
.contribution-content .problem-title {
font-size: 22px;
margin-bottom: 8px;
}
.contribution-excerpt {
font-size: 15px;
color: #64748B;
line-height: 1.5;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2; /* Max 2 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Rutilisation des styles "Problem" */
.contribution-header {
margin-bottom: 12px;
}
.contrib-toolbar {
display: flex;
align-items: center;
justify-content: flex-start; /* Align gauche */
gap: 15px; /* Espace entre les menus */
margin-bottom: 30px;
flex-wrap: wrap; /* Scurit mobile */
}
/* Ajustement spcifique si besoin pour que les select ne soient pas trop petits */
#contrib-wrap-cat,
#contrib-wrap-status {
flex: 0 1 auto; /* Ne prend pas toute la largeur */
min-width: 220px;
}
/* Option dsactive (Compteur 0) */
.custom-option.disabled {
opacity: 0.5;
pointer-events: none; /* Non cliquable */
background: #f9f9f9;
}
.custom-option.disabled .count {
color: #cbd5e1;
font-weight: 400;
}
/* Compteur dans le dropdown */
.custom-option .count {
display: inline-block;
background: #E1EDFA;
color: #00024E;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
margin-left: 6px;
min-width: 18px;
text-align: center;
line-height: 1.2;
}
/* --- AJUSTEMENT SANS IMAGE --- */
.contribution-card-inner.no-thumb .contribution-thumb {
display: none; /* On cache le conteneur image */
}
/* Ractions dtailles (Alignement) */
.bridge-reaction-stats-inline {
display: flex;
align-items: center;
}
/* On rutilise les classes de ton custom.php (.reaction-stat-item) */
.bridge-reaction-stats-inline .reaction-stat-item {
margin-right: 8px; /* Espace entre chaque raction */
background: #f9fafb;
padding: 2px 6px;
border-radius: 12px;
border: 1px solid #e5e7eb;
}
.bridge-reaction-stats img.emoji {
width: 16px !important;
height: 16px !important;
margin: 0 1px !important;
vertical-align: middle !important;
display: inline-block !important;
}
/* Sur mobile, on les empile ou on les met en pleine largeur */
@media (max-width: 600px) {
.contrib-toolbar {
flex-direction: column;
align-items: stretch; /* Pleine largeur */
}
#contrib-wrap-cat,
#contrib-wrap-status {
width: 100%;
min-width: 100%;
}
}
/* Responsive Mobile */
@media (max-width: 768px) {
.contribution-card .contribution-card-inner {
flex-direction: column;
}
.contribution-thumb {
width: 100%;
height: 200px; /* Hauteur fixe sur mobile */
}
.contribution-content .problem-title {
font-size: 18px;
}
}
/* ==========================================================================
MOBILE AVATAR PROFIL (Gr via JS)
========================================================================== */
/* Cacher par dfaut sur les grands crans */
.mobile-user-wrap {
display: none !important;
}
/* On s'active sous 840px (le breakpoint mobile de ton site) */
@media (max-width: 840px) {
/* 1. L'avatar dans le header */
.mobile-user-wrap {
display: flex !important;
position: relative;
align-items: center;
z-index: 1000;
}
.mobile-user-wrap > .user-link {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* Masquer le nom et la flche ct de l'avatar principal */
.mobile-user-wrap > .user-link .user-name,
.mobile-user-wrap > .user-link .bb-icon-angle-down {
display: none !important;
}
/* 2. Le Menu Droulant (La bote) */
.mobile-user-wrap .sub-menu {
right: -10px; /* Align prs du bord de l'cran */
width: 280px;
box-shadow: 0 10px 40px rgba(0, 2, 78, 0.15);
border: 1px solid var(--color-blue-10);
padding: 10px 0;
transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Petite flche (triangle) pointant vers l'avatar */
.mobile-user-wrap .sub-menu::before {
content: '';
position: absolute;
top: -6px;
right: 22px;
width: 12px;
height: 12px;
background: #fff;
transform: rotate(45deg);
border-top: 1px solid var(--color-blue-10);
border-left: 1px solid var(--color-blue-10);
}
/* tat Ouvert (Via JS) */
.mobile-user-wrap.is-open .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* 3. Style des Liens ( l'intrieur du menu) */
.mobile-user-wrap .sub-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-user-wrap .sub-menu li {
padding: 0;
margin: 0;
}
.mobile-user-wrap .sub-menu li a {
display: flex;
align-items: center;
padding: 12px 20px;
color: var(--color-blue-primary);
font-size: 15px;
font-weight: 500;
text-decoration: none !important;
gap: 12px;
transition: background 0.2s;
}
.mobile-user-wrap .sub-menu li a:active,
.mobile-user-wrap .sub-menu li a:hover {
background-color: var(--color-blue-5);
color: var(--color-blue-80);
}
.mobile-user-wrap .sub-menu li a i {
font-size: 16px;
color: var(--color-blue-60);
}
/* 4. Bloc utilisateur (Le tout 1er item avec le gros avatar + @mention) */
.mobile-user-wrap .sub-menu > .wrapper > .sub-menu-inner > li:first-child a {
border-bottom: 1px solid var(--color-blue-10);
padding-bottom: 15px;
margin-bottom: 5px;
align-items: flex-start;
}
.mobile-user-wrap .sub-menu > .wrapper > .sub-menu-inner > li:first-child a span {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.mobile-user-wrap .user-mention {
font-size: 12px;
color: #94A3B8; /* Gris discret pour le @mention */
}
/* 5. Simplification UX : On cache les sous-menus complexes de BuddyBoss sur mobile */
/* Les parents ("Profil", "Paramtres") envoient dj vers la bonne page o on retrouve la navigation locale */
.mobile-user-wrap .sub-menu .ab-sub-wrapper {
display: none !important;
}
.mobile-user-wrap .wp-admin-bar-arrow {
display: none !important;
}
/* Bouton dconnexion plus visible */
.mobile-user-wrap li.logout-link a {
color: var(--color-red-80);
border-top: 1px solid var(--color-blue-10);
margin-top: 5px;
padding-top: 15px;
}
.mobile-user-wrap li.logout-link a i {
color: var(--color-red-80);
}
}
/* On passe l'overlay en arrire-plan */
.bdm-problem-card__overlay {
z-index: 1 !important;
}
/* Le contenu passe au premier plan, mais on dsactive ses clics par dfaut */
.bdm-problem-card__inner {
z-index: 2 !important;
pointer-events: none; /* Laisse les clics traverser vers l'overlay */
}
/* On ractive les clics EXCLUSIVEMENT sur les liens (Auteur, Bouton...) */
.bdm-problem-card__inner a,
.bdm-problem-card__inner button {
pointer-events: auto;
position: relative; /* Assure que le clic est bien capt */
}
.bdm-problem-author:hover .name {
text-decoration: underline;
}
.bp-user .custom-header-menu {
margin: 0px !important;
}
.bp-user #menu-social-menu, .bp-user #menu-social-menu-us{
display: none !important;
}
.bbp-user-page .site-content-grid {
padding-top: 280px;
}
.bp-user #cover-image-container {
border-radius: 10px !important;
overflow: hidden;
}
.bp-user .main-navs {
border-radius: 10px;
}
.bp-user .main-navs ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-content: center;
margin: 0px;
padding: 16px 24px !important;
}
/* ==========================================================================
BRIDGE FORUM CARDS
========================================================================== */
.bs-card-forum-details {
width: 100% !important;
}
.bridge-forum-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed var(--color-grey-80);
flex-wrap: wrap;
gap: 15px;
}
.bridge-forum-footer .bs-timestamp.bridge-forum-timestamp {
margin: 0;
padding: 0;
border: none;
flex: 1;
min-width: 200px;
}
.bridge-forum-footer .btn-view.bridge-forum-cta {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
margin: 0;
}
.bridge-forum-footer .btn-view.bridge-forum-cta.btn-new-topic-empty {
background-color: var(--color-blue-5, #F2F9FF);
color: var(--color-blue-primary) !important;
}
.bridge-forum-footer .btn-view.bridge-forum-cta.btn-new-topic-empty:hover {
background: var(--color-blue-80) !important;
color: var(--color-white) !important;
}
.single-with-sub-forum .bbp_before_forum_new_post,
.single-with-sub-forum .btn-new-topic {
display: none !important;
}
/* ==========================================================================
BOUTONS DES CARTES DE DISCUSSIONS (TOPICS LOOP) - DESIGN UNIFI "SOFT"
========================================================================== */
.bridge-topic-card-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
align-items: center;
}
/* 1. Neutraliser totalement les conteneurs natifs de BuddyBoss */
.bridge-topic-card-actions span.favorite-toggle,
.bridge-topic-card-actions span.subscription-toggle {
display: contents !important;
}
/* 2. Le style unifi "Soft Blue" pour TOUS les boutons (Reply, Favoris, Abonner) */
.bridge-topic-card-actions a.btn-topic-action {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 12px !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.2s ease;
/* Design fond bleu clair sans bordure (Comme le bouton Reply d'origine) */
background: var(--color-blue-5, #F2F9FF) !important;
color: var(--color-blue-primary, #00024E) !important;
border: none !important;
box-shadow: none !important;
min-height: 32px;
box-sizing: border-box;
}
/* Style des icnes */
.bridge-topic-card-actions a.btn-topic-action i {
font-size: 12px;
margin-top: 1px;
}
/* Effet au survol (Inactif) */
.bridge-topic-card-actions a.btn-topic-action:hover {
background: var(--color-blue-10, #E1EDFA) !important;
transform: translateY(-1px);
}
/* 3. tat Actif (Dj abonn / Dj en favori) -> On passe en Bleu fonc pour marquer l'action */
.bridge-topic-card-actions span.is-favorite a,
.bridge-topic-card-actions a.is-favorite,
.bridge-topic-card-actions span.is-subscribed a,
.bridge-topic-card-actions a.is-subscribed {
background: var(--color-blue-primary, #00024E) !important;
color: #fff !important;
}
/* Effet au survol (Actif) -> Rouge pour avertir qu'on va "Dsabonner/Retirer" */
.bridge-topic-card-actions span.is-favorite a:hover,
.bridge-topic-card-actions a.is-favorite:hover,
.bridge-topic-card-actions span.is-subscribed a:hover,
.bridge-topic-card-actions a.is-subscribed:hover {
background: var(--color-red-80, #EF4D3E) !important;
color: #fff !important;
}
.topic-edit .bb-grid {
padding-top: 320px !important;
}
#wpforms-15295,
#wpforms-15315 {
max-width: 800px;
}
@media only screen and (min-width: 992px) and (max-width: 1300px) {
#bbpress-forums .bb-forums-list .lg-grid-1-3 {
flex: none !important;
max-width: 100% !important;
min-width: 100% !important;
}
}
@media (max-width: 768px) {
.forum-archive .bb-grid.site-content-grid {
padding-top: 180px;
}
}
@media screen and (max-width: 600px) {
#bbpress-forums:not(.bs-replies-wrapper) .bs-forums-items .bs-header-item .flex-1 {
flex-direction: row;
}
}
/* 1. Harmonisation globale de tous les menus droulants (Profil & Inscription) */
.register.buddypress .extended-profile select {
background-color: #ffffff !important; /* Fond blanc (ou #fbfbfb selon ton thme) */
border: 1px solid #e1e3e6 !important; /* Couleur de bordure douce */
border-radius: 30px !important; /* Bords trs arrondis (pilule) */
color: #333333 !important;
font-size: 16px !important;
height: 48px !important; /* Hauteur identique aux champs texte */
padding: 0 40px 0 15px !important; /* Espace droite pour ne pas mordre sur la flche */
/* Suppression du style natif du navigateur */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Ajout de la jolie flche personnalise (code SVG) */
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
background-size: 12px !important;
box-sizing: border-box !important;
outline: none !important;
transition: border-color 0.3s ease !important;
}
/* Effet au clic (focus) */
.register.buddypress .extended-profile select:focus {
border-color: #000000; /* adapter avec la couleur principale de ton site */
}
/* 2. Ajustement de largeur pour le champ "Vous tes" et "Type de structure" */
.register.buddypress .extended-profile .field_type_membertypes select,
.register.buddypress .extended-profile .field_type_selectbox select {
width: 100% !important;
}
/* 3. Ajustement spcifique pour l'alignement des Dates de Naissance */
.register.buddypress .extended-profile .datebox-selects select {
min-width: 90px !important; /* Pour que le texte "Septembre" rentre bien */
margin-right: 15px !important; /* Espace entre les boutons */
vertical-align: middle; /* Aligne bien les listes avec les labels (Jour, Mois, Anne) */
width: 90px !important;
}
.register.buddypress .extended-profile .input-options.datebox-selects{
gap: 0 !important;
}
/* Aligner verticalement les mots "Jour", "Mois", "Anne" avec les nouveaux champs */
.register.buddypress .extended-profile .datebox-selects label {
vertical-align: middle;
margin-right: 10px !important;
}
.bs-bp-container-reg #buddypress #signup-form.standard-form label, .bs-bp-container-reg #buddypress #signup-form.standard-form legend {
font-weight: 500;
}
.register.buddypress .bp-checkbox-wrap{
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
margin-right: 20px;
}
.register.buddypress .checkbox-options{
gap: 0px !important;
flex-wrap: wrap;
}
.bs-bp-container-reg #buddypress #signup-form.standard-form .checkbox-options label{
font-weight: 400;
}
.register.buddypress .field_first-name,
.register.buddypress .field_last-name,
.register.buddypress .field_nickname,
.register.buddypress .field_last-name .bp-optional-field-label{
display: none;
}
/* ==========================================================================
TEACHERS DIRECTORY (CPT) - CUSTOM STYLES
========================================================================== */
.teacher-filters-layout {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.teacher-filters-layout .search-wrapper {
width: 100%;
flex: none;
margin-right: 0;
}
.teacher-dropdowns-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.teacher-dropdowns-row .custom-select-wrapper {
flex: 1 1 calc(50% - 8px);
min-width: 130px;
max-width: 100%;
}
.teacher-dropdowns-row .custom-select-trigger {
padding: 0 25px 0 15px !important;
font-size: 12px;
}
/* Gestion de l'overflow du texte dans les filtres */
.teacher-dropdowns-row .custom-select-trigger span,
.current-lang-label {
display: inline-block;
max-width: 85%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Boutons d'actions de la carte dtails */
#bridge-master-container .card-actions {
flex-wrap: wrap;
}
#bridge-master-container .card-actions > * {
flex: 1 1 calc(33.333% - 10px);
min-width: 140px;
}
#bridge-master-container .btn-color-blue {
background: #0055AA !important;
border-color: #0055AA !important;
box-shadow: 0 4px 10px rgba(0, 85, 170, 0.25) !important;
color: #fff !important;
}
#bridge-master-container .btn-color-orange {
background: #FF8C00 !important;
border-color: #FF8C00 !important;
box-shadow: 0 4px 10px rgba(255, 140, 0, 0.25) !important;
color: #fff !important;
}
#bridge-master-container .btn-primary:hover {
filter: brightness(110%);
transform: translateY(-2px);
}
/* Drapeaux ronds */
.bridge-round-flag {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
object-fit: cover !important;
vertical-align: middle;
}
/* Fix Marge basse du contenu Gutenberg dans About */
#bridge-master-container .card-desc > *:last-child {
margin-bottom: 0 !important;
}
#buddypress .users-header .gamipress-buddypress-achievements .gamipress-buddypress-achievement,
.item-avatar .gamipress-buddypress-user-details-listing .gamipress-buddypress-achievement{
padding: 3px 4px;
font-size: 13px;
color: #00024E !important;
background-color: #fafafa !important;
border-radius: 32px !important;
margin-bottom: 4px;
}
.gamipress-buddypress-user-achievements{
}
#members-list.item-list.grid.bp-list .item-avatar {
margin-top: 10px;
margin-bottom: 0px;
}
.event-form-container #wpforms-12188 {
min-width: 80% !important;
}
/* ==========================================================================
BUDDYBOSS : PREVIEW DES LIENS (CONTAIN)
========================================================================== */
/* Cible la prvisualisation dans la modale de cration ET dans le flux d'activit */
.bb-url-preview-wrap .bb-url-preview-image img,
.activity-attached-link .link-image img {
object-fit: contain !important;
background-color: #F2F9FF !important; /* Le bleu trs clair de ton thme pour faire propre autour de l'image */
width: 100% !important;
height: 100% !important;
}
/* Optionnel : Si BuddyBoss force une hauteur maximale qui crase l'image */
.bb-url-preview-wrap .bb-url-preview-image,
.activity-attached-link .link-image {
background-color: #F2F9FF !important;
}
/* ==========================================================================
BOUTON "ENREGISTRER UNE STRUCTURE"
========================================================================== */
/* 1. On retire le padding qui forait l'espace droite */
#buddypress ul.component-navigation {
position: relative !important;
padding-right: 0 !important;
display: flex !important;
align-items: center;
width: 100%;
}
/* 2. On remet le bouton dans le flux, juste ct des onglets */
#buddypress ul.component-navigation li#groups-create {
position: relative !important;
right: auto !important;
top: auto !important;
transform: none !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 50;
/* L'astuce magique contre le JS de BuddyBoss :
On fait croire que le parent (li) fait 0px, mais le bouton (a) dborde visiblement */
width: 0px !important;
min-width: 0px !important;
overflow: visible !important;
}
/* 3. Le Design du bouton (Pillule bleue) */
#buddypress .component-navigation li#groups-create a {
background-color: var(--color-blue-primary) !important;
color: #ffffff !important;
padding: 12px 16px !important;
border-radius: 50px !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 10px rgba(0, 2, 78, 0.15) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* 4. Effet au survol (Lift) */
#buddypress .component-navigation li#groups-create a:hover {
background-color: var(--color-blue-80) !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 2, 78, 0.25) !important;
}
/* 6. Correction du centrage vertical (Annule le padding interne de BuddyBoss) */
#buddypress .component-navigation li#groups-create a .bb-component-nav-item-point {
padding-bottom: 0 !important;
border-bottom: none !important;
line-height: inherit !important;
}
/* 5. Ajustement Mobile : Si l'cran est petit, on le remet sagement sous les autres onglets */
@media (max-width: 768px) {
#buddypress ul.component-navigation {
flex-wrap: wrap !important; /* Autorise le retour la ligne */
}
#buddypress ul.component-navigation li#groups-create {
width: 100% !important; /* Annule le width: 0px */
min-width: 100% !important;
margin-left: 0 !important;
margin-top: 15px !important; /* Cre un bel espace au-dessus */
display: flex !important;
justify-content: center !important; /* Centre le bouton */
}
}
/* ==========================================================================
BUDDYBOSS : AMLIORATION ESTHTIQUE DE LA PRVISUALISATION DES LIENS
========================================================================== */
/* 1. Cible le conteneur de l'image de prvisualisation du lien dans le compositeur de publication */
.activity-update-form .bb-url-preview-wrap .bb-url-preview-image {
display: flex !important;
justify-content: center; /* Centre l'image horizontalement si elle est plus petite que le conteneur */
align-items: center; /* Centre l'image verticalement */
overflow: hidden; /* Empche les dbordements si l'image est plus grande */
margin-bottom: 10px; /* Ajoute un petit espace sous l'image */
}
/* 2. Cible l'image elle-mme pour limiter sa taille et assurer sa qualit */
.activity-update-form .bb-url-preview-wrap .bb-url-preview-image img {
max-height: 150px !important; /* LIMITE LA HAUTEUR MAXIMALE de l'image 150px (ajustez selon vos prfrences) */
width: auto !important; /* Assure que la largeur s'ajuste automatiquement pour conserver le ratio d'aspect */
max-width: 100% !important; /* Empche l'image d'tre plus large que son conteneur */
/* Assure que l'image s'intgre sans tre tire. 'contain' montre toute l'image dans le cadre, 'cover' remplit tout le cadre mais peut couper un peu l'image. 'contain' est souvent prfrable pour les logos et petites images. */
object-fit: contain !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Ajoute une ombre subtile pour l'esthtique */
border-radius: 4px; /* Ajoute des coins arrondis lgers */
}
/* ==========================================================================
BUDDYBOSS : PREVIEW DES LIENS (DANS LA MODALE DE CRATION)
========================================================================== */
/* Cible spcifiquement l'image pendant le "scraping" du lien */
.activity-link-preview-container .activity-link-preview-image-cover img {
object-fit: contain !important;
background-color: #F2F9FF !important; /* Fond bleu du site pour faire propre */
width: 100% !important;
height: 100% !important;
max-height: 200px !important; /* Empche l'image de prendre tout l'cran */
}
/* Applique le fond au conteneur parent pour viter les bandes disgracieuses */
.activity-link-preview-container .activity-link-preview-image-cover {
background-color: #F2F9FF !important;
}
/* 1. On masque l'icne par dfaut et on cre le masque adaptatif */
.member-button-wrap .follow-button i::before {
content: "" !important;
display: inline-block;
width: 16px; /* Taille de l'icne, tu peux ajuster */
height: 16px;
background-color: currentColor !important; /* Force l'icne prendre la couleur du texte (gris) */
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* 2. tat : Non suivi (Marque-page vide / Outline) */
.member-button-wrap .follow-button.not_following i::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 3. tat : Suivi (Marque-page plein / Solid) */
.member-button-wrap .follow-button.following i::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
#bbpress-forums .item-description {
font-size: 18px;
}