/*
 * BuddyBoss – Custom Cards Styles
 * Utilisé par le shortcode [display_posts]
 * Structure : verticales, colonnes, video, etc.
 */

/* ---------------------------------
   1. Wrapper général
---------------------------------- */
.bb-display-posts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}


.vertical-scrollable-news .bb-display-posts-wrapper {
    max-height: 640px;
    overflow-y: scroll;
}


/* ---------------------------------
   2. Base card layout
---------------------------------- */

.article-filter .card-columns {
	background-color: white;
    padding: 24px;
    border-radius: 16px;
}

.article-filter .card-fullwidth {
	padding-bottom: 0px;
	border-bottom: none;
}

.bb-card {
    color: #00024E;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.news-sort .bb-card {
    font-size: 16px;
}


.vertical-scrollable-news .bb-card {
	background-color: white;
    padding-top: 16px;
	padding-right: 16px;
    padding-left: 16px;
    border-radius: 16px;
}

.vertical-scrollable-news .wrapper-grid {
	display: flex;
}

.vertical-scrollable-news .bb-card .card-excerpt {
	display: none;
}

.vertical-scrollable-news .card-default .card-image {
	height: 96px;
    width: 160px;
}

.vertical-scrollable-news .card-default .card-title {
	max-width: 320px;
}

.featured-articles .card-title a, .featured-articles .bb-card, .featured-articles .author-name, .featured-articles .card-excerpt p {
	color: white;
}

.featured-articles .card-columns {
	align-items: center;
}

.featured-articles .card-image img {
	width: auto;
    height: auto;
    object-fit: contain;
    max-height: 400px;
    margin-left: auto;
}


.featured-articles .card-cta {
	color: var(--color-blue-primary);
	background: #fff;
}

@media (max-width: 768px) {
    .featured-articles .card-title {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Nombre de lignes maximum */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Ajoute les ... à la fin */
		color: white;
    }
}


.bb-card.boxed {
    background-color: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.bb-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}
.card-image a:hover img {
   opacity: 0.8;
}

.articles-sort .bb-card .card-excerpt {
	font-weight: 400 !important;
}

/* ---------------------------------
   3. Titres, extraits et métas
---------------------------------- */
.card-title {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}
.card-large .card-title {
    font-size: 32px;
}
.card-taxonomies{
    font-size: 14px;
    margin: 0;
}
.card-metas{
	display: flex;
	justify-content: start;
	gap:6px;
    align-items: center;
	margin-bottom: 10px;
}
.card-meta {
    font-size: 14px;
    margin: 0 0 8px;
    font-weight: 400;
	margin-bottom: 0;
}

.card-excerpt p {
    margin: 12px 0;
    color: var(--color-blue-primary);
    font-weight: 400 !important;
}

.news-sort .card-excerpt p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.author-avatar {
    width: 30px !important;
    height: 30px  !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.author-name {
    font-size: 14px;
    color: #00024E;
    font-weight: 500;
}

.card-author:hover .author-name {
	color: var(--color-blue-60);
}


.card-title a {
    text-decoration: none;
    color: var(--color-blue-primary);
	
}

.card-title a:hover {
    color: var(--color-blue-80) !important;
}


/* ---------------------------------
   4. CTA (Lire la suite)
---------------------------------- */
.card-cta {
    display: inline-flex;
    height: 40px;
    padding: 0 20px;
    margin-top: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: var(--color-blue-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    transition: background 0.3s;
	font-size: 14px;
}
.card-default .card-cta{
	position: absolute;
	bottom: 30px;
}
.card-cta:hover {
	background: var(--color-blue-80);
    color: #fff;
}

/* ---------------------------------
   5. Actions (likes, commentaires)
---------------------------------- */
.card-actions {
    display: flex;
    margin-top: 16px;
    align-items: center;
	justify-content: space-between;
}
.card-default .card-actions {
    position: absolute;
	bottom: 10px;
	width: 100%;
	left:0;
}
.card-actions-right,
.card-actions-left{
	display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 15px;
    align-items: center;
    color: var(--color-blue-60);
    
}
.card-actions span a{
    color: var(--color-blue-60);
}
.card-actions span a:hover{
    color: var(--color-blue-secondary);
}
.card-actions span {
    display: flex;
    align-items: center;
    gap: 4px;
	color: var(--color-blue-60);
}
.card-actions span:hover {
	color: var(--color-blue-secondary);
}
.card-actions span i{
    color: var(--color-blue-60);
}
.card-actions span:hover i{
    color: var(--color-blue-secondary);
}

/* ---------------------------------
   6. Card types – disposition
---------------------------------- */

/* card-default */

.card-default{
	position: relative;
	padding-bottom: 40px;
}
.card-default.card-with-cta{
	padding-bottom: 80px;
}
.card-default .card-image {
    margin-bottom: 16px;
}
.card-default .card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 16px;
}

.card-default .card-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    min-height: 100%;
    border-radius: 0; /* les coins sont déjà sur le conteneur */
}

.news-sort .card-default {
	background-color: var(--mpcs-secondary-button-border-regular);
    border-radius: 16px;
    padding: 16px;
}

/* card with two columns */
.card-columns {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-direction: row-reverse;
}

.card-columns.reverse {
    flex-direction: row-reverse;
}

.card-columns .card-image {
    flex: 1;
}

.card-columns .card-text {
    flex: 1;
}

.card-columns .image-square img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.card-columns .image-half {
    flex: 0 0 50%;
}

/* card-fullwidth – image colonne gauche 20% */

.card-fullwidth{
	flex-direction: row-reverse;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-blue-40);
}

.articles-sort .card-fullwidth{
	border-bottom: none !important;
}


.card-fullwidth .card-columns .card-image {
    flex: 0 0 20%;
}
.card-fullwidth .card-columns .card-text {
    flex: 1;
}

.aces-container .wrapper-list {
	gap: 40px;
}

.aces-container .card-fullwidth {
	padding-bottom: 40px;
}

.aces-container .card-fullwidth .card-excerpt {
	font-weight: 400;
}


/* card-video – icône vidéo */
.card-image.with-icon {
    position: relative;
}

.video-icon-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 20px;
    padding: 6px 10px;
    border-radius: 50%;
    z-index: 2;
}
/* ========== WRAPPER STYLES ========== */

/* Wrapper GRID (3 par ligne) */
.wrapper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}

.news-sort .wrapper-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 16px;
}

/* Wrapper LIST */
.wrapper-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Wrapper SLIDER */
.wrapper-slider {
    margin-bottom: 40px;
}
.swiper-slide {
    height: auto;
}
.swiper-button-next,
.swiper-button-prev {
    color: #00024E;
}




/* ---------------------------------
   7. Authors Cards
---------------------------------- */

.authors-page {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    padding: 2rem 0;
}

.authors-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.author-search-wrapper {
    position: relative;
    flex: 1; /* Le champ de recherche prend l'espace disponible */
    min-width: 260px;
	max-width: 420px;
}

.author-search {
    width: 100%;
    height: 50px;
    padding: 0 1rem 0 2.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 50px;
    background: #FFFFFF;
    color: #000;
    font-size: 0.95rem;
}

.author-search::placeholder {
    color: #CBCCCE;
}

.author-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.authors-filters {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.filter-btn {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.4rem;
    border-radius: 50px;
	border: none;
    background: var(--color-white);
    color: var(--color-blue-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.filter-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}


.filter-btn.active {
    background: var(--color-blue-primary);
    color: var(--color-white);
}

/* Croix blanche à droite quand actif */
.filter-btn .filter-close {
    display: none;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    margin-left: 0.4rem;
}

/* === Le responsive pour la toolbar === */
@media (max-width: 1250px) {
	.authors-page {
    gap: 4rem;
}
	
    .authors-toolbar {
        flex-wrap: wrap;
		gap: 1rem;
    }


    .authors-filters {
        flex-basis: 100%;
        margin-top: 1rem;
        justify-content: flex-start;
		flex-wrap: wrap;
    }

    .author-search-wrapper {
        order: 1;
    }
    .author-sort-wrapper {
        order: 2;
    }
    .authors-filters {
        order: 3;
    }
	.library-grid {
		order: 4;
	}
}




@media (max-width: 768px) {
	.filter-btn {
    height: 40px;
    padding: 0 1.1rem;
}
}

.filter-btn.active .filter-close {
    display: inline;
    color: #fff;
}

.certified-dot {
    width: 10px;
    height: 10px;
    background: #0019FF;
    border-radius: 50%;
}

/* === DROPDOWN === */
.author-sort-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.author-sort {
    height: 50px;
    padding: 0 2.2rem 0 1.4rem;
    border: 1px solid #CCCCCC;
    border-radius: 50px;
    background: #FFFFFF;
    font-size: 0.9rem;
    color: #50587B;
    appearance: none;
    cursor: pointer;
}

/* Grid */
.authors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes fixes */
    gap: 1.8rem;
}

@media (max-width: 1200px) {
    .authors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 850px) {
    .authors-grid {
        grid-template-columns: 1fr;
    }
}


.sort-dropdown-icon {
    position: absolute;
    right: 1rem;
    pointer-events: none;
}


/* Author card */
.author-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.2s ease;
}

.author-card:hover {
    transform: translateY(-4px);
}

.author-card-inner {
    display: flex;
	min-height: 200px;
    flex-direction: column;
	justify-content: space-between;
    gap: 1rem;
}

.author-info {
    display: flex;
    flex-direction: column;
    /* On réserve 80px à droite pour ne jamais toucher la photo (64px + marge) */
    padding-right: 80px; 
}

.author-name-card {
    font-weight: 500;
    font-size: 20px;
    color: var(--color-blue-primary);
    margin-bottom: 0px;
    line-height: 1.3; /* Aère un peu si le nom passe sur 2 lignes */
}

.author-name-card a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap; /* Permet au texte et au badge de passer à la ligne naturellement */
    gap: 0.4rem;
    word-break: break-word; /* Force un mot très long (ex: composé) à se couper si besoin */
}

/* Optionnel : On peut ajouter un soulignement au survol pour montrer que c'est cliquable */
.author-name-card a:hover {
	color: var(--color-blue-60);
}

.author-badge {
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg fill="%230019FF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.5l2 2l4-4" stroke="%23fff" stroke-width="2" fill="none"/></svg>') no-repeat center center;
    background-size: contain;
}

.author-posts {
    color: #50587B;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.author-photo img {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.author-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}



/* Styles pour le bouton généré par BuddyBoss */
.author-actions a.follow-button {
    text-indent: -9999px; /* Cache le texte "Follow" / "Unfollow" */
    line-height: 0; 
    font-size: 0;
    max-width: 40px;
    min-width: 40px;
    max-height: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Ajoute l'icône via un pseudo-élément */
.author-actions a.follow-button::before {
    font-family: "Font Awesome 5 Free"; /* Assurez-vous que Font Awesome 5 est bien chargé sur votre site */
    font-weight: 900;
    font-size: 14px;
    text-indent: 0;
    line-height: 1;
}

/* Style pour l'état "Not Following" (icône +) */
.author-actions a.follow-button.not_following {
    border: 2px solid var(--color-blue-primary);
    background: transparent;
    color: var(--color-blue-primary);
}
.author-actions a.follow-button.not_following::before {
    content: "\f067"; /* Code Unicode pour l'icône "plus" de Font Awesome */
}

/* Style pour l'état "Following" (icône -) */
.author-actions a.follow-button.following {
    background: var(--color-red-80);
    border: 2px solid var(--color-red-80);
    color: #fff;
}
.author-actions a.follow-button.following::before {
    content: "\f068"; /* Code Unicode pour l'icône "minus" de Font Awesome */
}







.btn-view {
    background: var(--color-blue-primary);
    color: var(--color-white) !important;
    padding: 0.45rem 1.2rem !important;
    border-radius: 50px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.btn-view:hover {
    background: var(--color-blue-80);
	color: var(--color-white);
}

.btn-follow {
	max-width: 40px;
    max-height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
	padding: 16px;
    transition: all 0.2s ease;
}

/* Non-followed (outline + bleu) */
.btn-follow:not(.following) {
    border: 2px solid var(--color-blue-primary);
    background: transparent;
    color: var(--color-blue-primary);
}

/* Followed (plein + rouge) */
.btn-follow.following {
    background: var(--color-red-80);
    border: 2px solid var(--color-red-80);
    color: #fff;
}



/* Contribute card */
.contribute-card {
    background: var(--color-red-60);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.contribute-inner {
	display: flex;
    flex-direction: column;
    min-height: 200px;
    align-items: flex-start;
    justify-content: space-between;
}

.contribute-inner h3 {
    font-size: 20px;
    font-weight: 700;
	margin-bottom: 0px;
	color: var(--color-white);
}

.contribute-inner p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.btn-contribute {
    background: #fff;
    color: #000000;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
	font-size: 0.9rem;
	gap: 16px;
    text-decoration: none;
}

.btn-contribute:hover {
	color: var(--color-red-60);
}








/* ---------------------------------
   7. Library Page & Filters
---------------------------------- */


.bb-posts-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.bb-posts-filters .filter-btn {
    text-decoration: none;
    font-weight: 600;
    color: #777;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bb-posts-filters .filter-btn:hover {
    color: #000;
}

.articles-sort .bb-posts-filters a:hover {
    color: var(--bb-primary-color) !important;
    border-bottom: 2px solid #1f295a !important;
}

/* Style du bouton actif */
.bb-posts-filters .filter-btn.active {
    color: #000; /* Ou votre couleur primaire */
    border-bottom-color: #000;
}



.library-page {
    gap: 3rem;
	padding: 1rem 2rem;
}

.library-toolbar .author-search-wrapper {
    max-width: 640px;
}


/* --- PAGINATION STYLE "BRIDGE" --- */

.bb-pagination.pagination-bridge {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.bb-pagination.pagination-bridge ul {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre les bulles */
    list-style: none;
    padding: 0;
    margin: 0;
	flex-wrap: wrap;
    justify-content: center;
}

/* Style de base des liens (Inactifs) */
.bb-pagination.pagination-bridge ul li a,
.bb-pagination.pagination-bridge ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 5px;
    border-radius: 50%; /* Cercle parfait */
    background-color: #ffffff;
    border: 1px solid #e5e5e5; /* Bordure grise très légère */
    color: #666666; /* Texte gris doux */
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease; /* Animation fluide */
    line-height: 1;
}

/* État Survol (Hover) */
.bb-pagination.pagination-bridge ul li a:hover {
    border-color: #1f295a; /* Bleu Bridge */
    color: #1f295a;
    background-color: transparent;
    transform: translateY(-2px); /* Petit effet de levitation */
    box-shadow: 0 4px 10px rgba(31, 41, 90, 0.15); /* Ombre portée bleue légère */
}

/* État Actif (Page courante) */
.bb-pagination.pagination-bridge ul li span.current {
    background-color: #1f295a; /* Fond Bleu Bridge */
    border-color: #1f295a;
    color: #ffffff; /* Texte blanc */
    box-shadow: 0 4px 12px rgba(31, 41, 90, 0.3); /* Ombre plus marquée */
    cursor: default;
    transform: scale(1.05); /* Légèrement plus grand */
}

/* Points de suspension (...) */
.bb-pagination.pagination-bridge ul li span {
    /* Hérite du style de base, mais on peut retirer la bordure pour les ... si voulu */
    /* border: none; background: transparent; */
}

/* Gestion des boutons Précédent / Suivant */
.bb-pagination.pagination-bridge ul li a.prev,
.bb-pagination.pagination-bridge ul li a.next {
    border-radius: 30px; /* Forme de pilule pour les boutons textes */
    padding: 0 20px;
    width: auto;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    gap: 5px; /* Espace entre icône et texte */
}

/* Ajustement des icônes dans les boutons */
.bb-pagination.pagination-bridge ul li a i {
    font-size: 16px;
    line-height: 1;
    margin-top: -1px; /* Micro ajustement vertical */
}

/* Filters */
.library-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    border-bottom: 1px solid #9dc4eb5c;
    padding-bottom: 2rem;
}



.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
    position: relative;
    padding: 16px;
    border-radius: 16px;
}

.filter-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-blue-primary);
    margin-bottom: 0.25rem;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.filter-btn:hover {
    background: var(--color-blue-light, rgba(64,123,255,0.1));
    border-color: var(--color-blue-primary);
    color: var(--color-blue-primary);
}

.filter-btn.active {
    background: var(--color-blue-primary);
    color: #fff;
    border-color: var(--color-blue-primary);
}

.filter-btn .filter-close {
    display: none;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    margin-left: 0.4rem;
}

.filter-btn.active .filter-close {
    display: inline;
    color: #fff;
}

/* Responsive Filters */
@media (min-width: 1024px) {
    .library-filters {
        flex-wrap: nowrap;
        gap: 3rem;
    }
    .library-filters .filter-group {
        flex: 1;
    }
    .library-filters .filter-group:nth-child(1),
    .library-filters .filter-group:nth-child(3) {
        flex: 1 1 25%;
    }
    .library-filters .filter-group:nth-child(2) {
        flex: 1 1 50%;
    }
	.filter-group:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 0.8rem;
		bottom: 0.8rem;
		right: -1.5rem;
		width: 1px;
		background: #9dc4eb5c;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
    .library-filters {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "group1 group3"
            "group2 group2";
        gap: 1.5rem;
    }
    .library-filters .filter-group:nth-child(1) { grid-area: group1; }
    .library-filters .filter-group:nth-child(2) { grid-area: group2; }
    .library-filters .filter-group:nth-child(3) { grid-area: group3; }
}

@media (max-width: 639px) {
    .library-filters {
        flex-direction: column;
        gap: 1rem;
    }
    .library-filters .filter-group {
        width: 100%;
		padding: 0px;
    }
	
	.library-page {
   		 gap: 2rem;
   		 padding: 0rem;
}
	.featured-books-wrapper {
		padding: 24px !important;
	}
}



/* ---------------------------------
    7.5 Library Grid & Cards
---------------------------------- */

.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0;
}

@media (min-width: 1400px) {
    .library-grid {
        grid-template-columns: repeat(4, 1fr); /* ✅ max 4 colonnes */
    }
}

@media (max-width: 1200px) {
    .library-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .library-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 850px) {
    .library-grid {
        grid-template-columns: 1fr;
    }
}

/* Library Card */
.library-card {
    background: var(--color-white);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
}

.library-card:hover {
    transform: translateY(-4px);
}

.library-card-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

/* Cover image */
.library-cover {
    display: flex;
    justify-content: center;
    width: 100%;
}

.library-cover img {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.library-card:hover .library-cover img {
    transform: scale(1.05);
}

/* Info */
.library-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    align-items: flex-start;
}

.library-title {
    margin-bottom: 0px;
	line-height: 1.2rem;
	margin-bottom: 8px;
}

.library-title a {
    color: inherit;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
}

.library-title a:hover {
    color: var(--color-blue-80);
}

.library-authors {
    color: #50587B;
    font-size: 0.9rem;
    margin-top: 0.2rem;
	line-height: 1.2;
}

/* Level badge */
.library-level {
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
}

.library-level i {
    font-size: 0.85em;
}

.meta-separator-container i::before {
    color: var(--color-blue-primary);
}

/* Niveau spécifique */
.library-level.expert {
    background-color: var(--color-red-secondary);
    color: #FFF4F0;
}

.library-level.confirmed {
    background-color: var(--color-red-60);
    color: #FFF4F0;
}

.library-level.intermediate {
    background-color: #FFEDD5; 
    color: #EA580C;            
    border: 1px solid #FFEDD5;
}

.library-level.beginner {
    background-color: #83D9AB;
    color: #08502A;
}

.library-badge-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0px;
    min-height: 26px;
}

.meta-divider {
    color: #CBD5E1; /* Gris très clair */
    font-size: 12px;
    margin: 0 2px;
}

.library-meta-infos {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre les icônes */
    margin-bottom: 12px; /* Espace avant le Titre */
    color: #94A3B8; /* Gris ardoise clair */
    font-size: 14px;
}

.meta-icons-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94A3B8; /* Gris ardoise clair */
}

.meta-icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.meta-icon-item:hover {
    opacity: 1;
    color: var(--color-blue-primary);
}

.meta-icon-item i {
    font-size: 16px;
}

.meta-icon-item img {
    width: 18px;
    height: auto;
    display: block;
}

.meta-separator-dot {
    width: 4px;
    height: 4px;
    background-color: #D1D5DB;
    border-radius: 50%;
    margin: 0 4px;
}

.meta-separator-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-separator {
    width: 6px;
    height: 6px;
    background: #9BA3AE;
    border-radius: 50%;
    display: inline-block;
}

.meta-separator-container i,
.meta-separator-container img {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    color: currentColor; /* icône FA prend couleur du texte */
}

.meta-separator-container img {
    width: 20px;
    height: 20px;
}


/* Button always at bottom */
.library-info .btn-view {
    align-self: flex-start;
    margin-top: auto;
    background: var(--color-blue-primary);
    color: var(--color-white) !important;
    padding: 0.45rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

.library-info .btn-view:hover {
    background: var(--color-blue-80);
}


@media (min-width: 800px) and (max-width: 1000px) {
    .singlebook-sidebar {
        display: flex;
        align-items: center;
		padding: 32px;
    }

    .singlebook-cover {
        width: 400px;
    }

    .singlebook-buy-links {
        margin-top: 0px;
        width: 100%;
    }
}


/* Responsive adjustments for padding */
@media (max-width: 639px) {
    .library-card {
        padding: 1rem;
    }
}





/* ---------------------------------
    7.7 Custom Select (Languages)
---------------------------------- */

.language-dropdown-group {
    position: relative;
    width: 220px;
}

.custom-select {
    position: relative;
    user-select: none;
    width: 100%;
}

/* Trigger principal (ce qu’on voit fermé) */
.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    border: 1px solid #dcdce6;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #50587B;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.select-trigger:hover {
    border-color: var(--color-blue-80);
}

.select-trigger i {
    margin-left: 0.5rem;
    color: #9BA3AE;
    transition: transform 0.2s ease;
}

.custom-select.open .select-trigger i {
    transform: rotate(180deg);
}

/* Drapeau à gauche du texte sélectionné */

.selected-flag i {
    font-size: 16px;
    color: #9BA3AE;
}

.selected-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.flag-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
}

/* Options déroulantes */
.select-options {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: var(--color-white);
    border: 1px solid #dcdce6;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    z-index: 15;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.custom-select.open .select-options {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.option {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
}

.option:hover {
    background: #f7f8fb;
}

.option img.flag-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .language-dropdown-group {
        width: 100%;
    }
}



/* === FEATURED BOOKS CAROUSEL === */
.featured-books-wrapper {
    margin: 2rem auto 3rem;
    padding: 56px;
	position: relative;
	background-color: #00024e;
	border-radius: 20px;
}

.featured-books-wrapper .swiper-pagination-bullet {
	background: rgb(255 255 255 / 20%);
}

.featured-books-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.featured-books-swiper {
	padding-top: 20px;
    width: 100%;
    overflow: hidden;
}






/* === FEATURED BOOKS : Alignement et espacement parfait === */
.featured-books-swiper .swiper-wrapper {
	align-items: stretch;
	margin-bottom: 40px;
}

.featured-books-swiper .swiper-slide {
	display: flex;
	height: auto !important;
}

/* Structure interne stable */
.featured-books-swiper .library-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--color-white);
	border-radius: 18px;
	padding: 1.5rem;
	box-shadow: 0 4px 10px rgba(0,0,0,0.04);
	flex-grow: 1;
	transition: transform 0.2s ease;
}

.featured-books-swiper .library-card:hover {
	transform: translateY(-4px);
}

/* Contenu interne équilibré */
.featured-books-swiper .library-card-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 1rem;
}

/* Image centrée et bien contenue */
.featured-books-swiper .library-cover {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 230px;
}

.featured-books-swiper .library-cover img {
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.featured-books-swiper .library-card:hover .library-cover img {
	transform: scale(1.05);
}

/* Infos + bouton en bas */
.featured-books-swiper .library-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
}

.featured-books-swiper .library-info .btn-view {
	margin-top: auto;
	align-self: flex-start;
}

.featured-books-wrapper .swiper-pagination-bullet-active {
    background: #ffffff;
}


/* ---------------------------------
   8. Cards Glossaire
---------------------------------- */


.section-lexique {
    background-color: var(--color-blue-5, #F2F9FF); 
    border-radius: 16px;
    margin: 2.5rem 0;
    padding: 6rem 1.5rem;
    max-width: 1200px;
}

/* Flex à deux colonnes fixes */
.section-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}

/* Colonne gauche (1/3) */
.letter-col {
	position: sticky;
	top: 14rem;
	align-self: start;
    flex: 0 0 33.33%;
    font-size: 6rem;
    font-weight: 900;
    color: #002C7A;
    line-height: 1;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	z-index: 2;
}

/* Colonne droite (2/3) */
.definitions-col {
    flex: 0 0 66.66%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.definition {
    padding: 1rem 0;
    scroll-margin-top: 220px;
}

.definition:last-child {
    border-bottom: none;
}

.definition h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-blue-primary, #00024E);
}

.definition-content {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #3A3A3A;
}

.definition-divider {
	height: 1px;
    border: none;
    border-top: 1px solid var(--stk-global-color-85642, #e1edfa);
    margin: 1rem 0;
	background-color: transparent;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--stk-global-color-85642, #e1edfa);
	background-color: transparent;
    margin: 2rem 0;
	width: 40%;
	margin-left: auto;
    margin-right: auto;
}




@media (max-width: 768px) {
	
	.section-lexique {
    margin: 2.5rem 0;
    padding: 2rem 1.5rem;
	}
	
    .section-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .letter-col {
		position: static;
        flex: 1 1 100%;
        font-size: 7rem;
        margin-bottom: 4rem;
        justify-content: flex-start;
    }

    .definitions-col {
        flex: 1 1 100%;
		gap: 1rem;
    }
}


/* ==========================================================================
   BRIDGE EVENTS STYLE (FULL HARMONISÉ)
   ========================================================================== */

/* --- 1. CONTENEUR PRINCIPAL --- */
/* On réutilise les variables implicites de ton design system */
.bridge-events-theme.bc-wrapper {
    background: #F2F9FF; /* var(--color-blue-5) */
    padding: 40px;
    border-radius: 24px; /* var(--bridge-radius-large) */
    border: 1px solid #Eef2f6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
}

.bc-wrapper * { box-sizing: border-box; }

/* --- 2. HEADER (RECHERCHE & FILTRES) --- */
.bc-header-controls {
    display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; align-items: center;
}

/* Groupe Recherche */
.bc-search-group { flex: 2; min-width: 250px; position: relative; }
.bc-search-group input {
    width: 100%; padding: 10px 20px 10px 45px; border-radius: 50px; border: 1px solid #E2E8F0;
    background: #fff; font-size: 13px; color: #2C3E50; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.2s; height: 42px;
}
.bc-search-group input:focus { outline: none; border-color: #FF8C00; box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1); }
.bc-search-group svg {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #94A3B8; pointer-events: none; width: 16px; height: 16px;
}

/* CUSTOM SELECT STYLES (Identique Teacher) */
.custom-select-wrapper { position: relative; flex: 1; min-width: 160px; user-select: none; }
.bc-limit-group { flex: 0 0 120px; min-width: 120px; }

.custom-select-trigger {
    width: 100%; padding: 0 35px 0 20px; border: 1px solid #E2E8F0;
    border-radius: 50px; font-size: 13px; color: #475569; background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); height: 42px;
    cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s; font-weight: 500;
}
.custom-select-trigger:hover { border-color: #CBD5E1; color: #1E293B; background: #F8FAFC; }
.select-arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #64748B; width: 12px; height: 12px; pointer-events: none; }

.custom-options {
    position: absolute; top: 110%; left: 0; right: 0; background: #fff; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #Eef2f6; opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: all 0.2s; z-index: 99; max-height: 250px; overflow-y: auto; padding: 5px;
}
.custom-select-wrapper.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-option {
    padding: 8px 15px; font-size: 13px; color: #2C3E50; cursor: pointer; border-radius: 8px; transition: 0.1s;
}
.custom-option:hover { background: #E0F2FE; color: #00024E; } /* var(--color-blue-10) */
.custom-option.selected { background: #00024E; color: #fff; }

/* Scrollbars */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #E2E8F0; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

/* --- 3. GRILLE & CARTES --- */
.bc-grid-layout { display: flex; flex-direction: column; gap: 20px; min-height: 200px; position: relative; transition: opacity 0.3s ease; }

.bc-card {
    display: flex; background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #Eef2f6;
    align-items: center; gap: 25px; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 2, 78, 0.08); border-color: #E6EFF8; }

/* Col Info */
.bc-col-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bc-title { font-size: 1.25rem; margin: 0 0 12px 0; font-weight: 700; color: #00024E; line-height: 1.3; }
.bc-title a { text-decoration: none; color: inherit; transition: color 0.2s; }
.bc-title a:hover { color: #FF8C00; }

.bc-tags { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 5px; }
.bc-tag {
    display: inline-block;
    background: var(--color-blue-10);
    color: var(--color-blue-primary);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
}


.bc-location { font-size: 0.9rem; color: #666; font-weight: 500; display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.bc-location i { color: #94A3B8; font-size: 16px; }

/* Col Image */
.bc-col-img { flex: 0 0 100px; height: 80px; }
.bc-col-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; border: 1px solid #Eef2f6; }

/* Col Action (Date + Btn) */
.bc-col-action {
    flex: 0 0 160px; text-align: right; display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center; gap: 12px;
    padding-left: 20px; border-left: 1px solid #f0f0f0;
}

/* Dates */
.bc-date { display: flex; align-items: flex-end; justify-content: center; color: #00024E; gap: 8px; line-height: 1.1; }
.bc-date .d-row { font-size: 0.95rem; white-space: nowrap; color: #64748B; font-weight: 500; display: flex; flex-direction: column; }
.bc-date .d-row strong { font-size: 1.35rem; font-weight: 800; color: #00024E; letter-spacing: -0.5px; margin-left: 4px; }
.bc-date .d-sep { font-size: 1.4rem; color: #CBD5E1; }

/* Bouton CTA */
.bc-btn-action {
    background: #FF8C00; color: #fff; padding: 10px 20px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
}
.bc-btn-action:hover { background: #E67E00; transform: translateY(-2px); color: #fff; }
.bc-btn-action i { margin-left: 2px; }

/* Loader & Empty */
.bc-loader-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(242, 249, 255, 0.8);
    z-index: 10; display: flex; justify-content: center; padding-top: 100px; border-radius: 16px;
}
.bc-spinner {
    width: 40px; height: 40px; border: 4px solid rgba(0,0,0,0.1); border-top-color: #00024E;
    border-radius: 50%; animation: bc-spin 1s linear infinite;
}
@keyframes bc-spin { to { transform: rotate(360deg); } }
.bc-no-results { text-align: center; padding: 40px; color: #94A3B8; font-style: italic; }

/* Pagination */
.bc-pagination-area { margin-top: 30px; display: flex; justify-content: center; }
.bc-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; align-items: center; }
.bc-pagination li a, .bc-pagination li span {
    background: #fff; border: 1px solid #E6EFF8; color: #00024E; padding: 8px 14px;
    border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; transition: all 0.2s; display: block;
}
.bc-pagination li a:hover { background: #E0F2FE; border-color: #d0e1f5; }
.bc-pagination li span.current { background: #00024E; color: #fff; border-color: #00024E; }

/* RESPONSIVE */
@media (max-width: 900px) {
	.bridge-events-theme.bc-wrapper { padding: 24px; }
    .bc-header-controls { flex-direction: column; align-items: stretch; }
    .bc-search-group, .bc-filter-group, .bc-limit-group { width: 100%; flex: auto; }
    .custom-select-wrapper { width: 100%; }
    
    .bc-card { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px; }
    .bc-col-info { width: 100%; }
    
    .bc-col-img { width: 100%; height: 160px; order: -1; } /* Image en haut sur mobile */
    .bc-col-img img { width: 100%; height: 100%; }

	.bc-col-action {
        width: 100%; 
        flex: auto; 
        border-left: none; 
        padding-left: 0;
        border-top: 1px solid #f0f0f0; 
        padding-top: 15px;
        flex-direction: row; 
        justify-content: space-between; /* Pousse la date à gauche et le bouton à droite */
        align-items: center;
        flex-wrap: wrap; /* Sécurité : permet de passer à la ligne si l'écran est minuscule */
        gap: 16px; /* Maintient un espace propre si les éléments se superposent */
    }
	.bc-date .d-row { flex-direction: row; align-items: flex-end; gap: 2px;}
}

@media (max-width: 480px) {
    .bc-col-action {
        flex-direction: column; /* On rempile verticalement */
        align-items: flex-start; /* Date alignée à gauche */
    }
    
    .bc-btn-action {
        width: 100%; /* Le bouton prend toute la largeur */
        justify-content: center;
    }
}



/* =========================================
   STYLE BRIDGE LEÇONS (V5 FINAL)
   ========================================= */

.ble-master-wrap {
    width: 100%;
    background: var(--color-blue-10);
    border-radius: 24px;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #Eef2f6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}
.ble-master-wrap * { box-sizing: border-box; }

/* HEADER FILTRES */
.ble-filters-header h3 { color: var(--color-blue-primary); font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.ble-filters-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }

.ble-pills-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; max-width: 100%; }
.ble-filter-pill {
    background: #fff; border: 1px solid #Eef2f6; padding: 10px 20px;
    border-radius: 50px; font-weight: 600; color: #64748B; cursor: pointer;
    white-space: nowrap; display: flex; gap: 8px; align-items: center;
    transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.ble-filter-pill:hover, .ble-filter-pill.active { background: var(--color-blue-primary); color: #fff; border-color: var(--color-blue-primary); }

.custom-select-trigger {
    background: #fff; border: 1px solid #Eef2f6; padding: 0 20px; height: 42px; line-height: 20px;
    border-radius: 50px; font-weight: 600; color: #64748B; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    white-space: nowrap;
}

/* GRILLE SERIES */
.ble-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.ble-serie-card {
    background: #fff; border-radius: 20px; overflow: hidden; display: block; text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: transform 0.2s; border: 1px solid rgba(0,0,0,0.02);
}
.ble-serie-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }

#ble-series-root [data-level="all-levels"] {
	display: none !important;
}

.ble-thumb-wrapper { height: 170px; position: relative; background: #f4f4f4; }
.ble-thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.ble-level-badge {
    position: absolute; top: 15px; left: 15px; background: #fff; color: var(--color-blue-primary);
    padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ble-card-body { padding: 25px; }
.ble-title { margin: 0 0 10px 0; font-size: 18px; font-weight: 800; color: var(--color-blue-primary); line-height: 1.3; }
.ble-desc { font-size: 13px; color: #64748B; line-height: 1.5; margin-bottom: 20px; }
.ble-footer { border-top: 1px solid var(--color-blue-10); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.ble-author img { width: 30px !important; height: 30px !important; border-radius: 50% !important; object-fit: cover;}
.ble-author { display: flex; width: 32px; border-radius: 50%; gap: 10px; font-weight: 700; color: var(--color-blue-primary); font-size: 13px; align-items: center; }
.ble-author span { white-space: nowrap; }
.author-circle-img { width: 30px !important; height: 30px !important; border-radius: 50% !important; object-fit: cover; }
.ble-count { font-size: 12px; font-weight: 600; color: #94A3B8; }

/* HEADER DARK */
.ble-dark-header {
    background: var(--color-blue-primary); border-radius: 20px; padding: 40px; color: #fff;
    margin-bottom: 30px; position: relative;
    background-image: linear-gradient(135deg, var(--color-blue-primary) 0%, #000 120%);
    box-shadow: 0 10px 30px rgba(0, 2, 78, 0.2);
}
.ble-back-link {
    display: inline-flex; align-items: center; gap: 8px; color: var(--color-blue-10); text-decoration: none;
    font-size: 15px; font-weight: 600; margin-bottom: 20px; transition: color 0.2s;
}
.ble-back-link:hover { color: var(--color-blue-40); }
.ble-header-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.ble-header-left { flex: 1; }
.ble-header-left h1 { margin: 0 0 15px 0; font-size: 32px; font-weight: 800; color: #fff; line-height: 1.2; }
.ble-serie-desc-full { color: #cbd5e1; font-size: 15px; line-height: 1.6; max-width: 650px; }

/* Badge Instructeur */
.ble-instructor-badge {
    background: rgba(255,255,255,0.1); backdrop-filter: blur(5px);
    padding: 20px; border-radius: 16px; display: flex; gap: 20px; align-items: flex-start;
    border: 1px solid rgba(255,255,255,0.1); max-width: 450px;
}
.instr-avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; flex-shrink: 0; }
.instr-info { display: flex; flex-direction: column; overflow: hidden; }
.instr-info .label { font-size: 10px; text-transform: uppercase; color: #94A3B8; letter-spacing: 1px; margin-bottom: 4px; }
.instr-info .name { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.instr-info .bio-snippet { 
    font-size: 13px; color: #d1d5db; line-height: 1.5; 
    display: block; white-space: normal; /* Autorise le retour ligne */
}

/* LAYOUT SWITCHER */
.ble-content-layout { display: flex; gap: 30px; align-items: flex-start; transition: all 0.3s ease; }
.ble-list-column { flex: 1; transition: all 0.3s ease; }
.ble-list-grid-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.ble-player-column { display: none; flex: 0; opacity: 0; }

/* CARTE LEÇON */
.ble-lesson-card {
    background: #fff; border-radius: 16px; padding: 15px; cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid transparent; 
    border-left: 4px solid transparent; 
    transition: all 0.2s; display: flex; flex-direction: column;
}
.ble-lesson-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }

.card-thumb {
    width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden;
    position: relative; margin-bottom: 15px; flex-shrink: 0;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
    position: absolute; width:100%; height:100%; background:rgba(0,0,0,0.0);
    display:flex; align-items:center; justify-content:center; opacity: 0; transition: 0.2s;
}
.ble-lesson-card:hover .play-overlay { opacity: 1; }
.play-overlay i {
    color: #fff; font-size: 20px; background: rgba(0,0,0,0.6); width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.card-body h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; color: var(--color-blue-primary); }
.lesson-excerpt { font-size: 13px; color: #64748B; margin-bottom: 15px; line-height: 1.4; }
.ble-btn-start {
    background: var(--color-blue-primary); color: #fff; border: none; padding: 8px 20px; border-radius: 50px;
    font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: 0.2s; margin-top: auto; width: fit-content;
}
.ble-btn-start:hover { background: #00047a; transform: translateY(-2px); }

/* --- MODE SPLIT (SIDEBAR) --- */
.ble-lessons-mode.is-split-view .ble-list-column { flex: 0 0 350px; }
.ble-lessons-mode.is-split-view .ble-list-grid-wrapper { display: flex; flex-direction: column; gap: 10px; }

.ble-lessons-mode.is-split-view .ble-lesson-card {
    flex-direction: row; align-items: center; gap: 15px; padding: 10px;
    border: 1px solid #E2E8F0; box-shadow: none; border-left: 4px solid transparent;
}
.ble-lessons-mode.is-split-view .ble-lesson-card:hover { transform: none; background: #F8FAFC; }
.ble-lessons-mode.is-split-view .card-thumb { width: 100px; height: 60px; margin-bottom: 0; }
.ble-lessons-mode.is-split-view .play-overlay,
.ble-lessons-mode.is-split-view .lesson-excerpt,
.ble-lessons-mode.is-split-view .ble-btn-start { display: none; }
.ble-lessons-mode.is-split-view h4 { font-size: 14px; margin: 0; line-height: 1.3; }

/* ACTIVE STATE (ORANGE BORDER) */
.ble-lessons-mode.is-split-view .ble-lesson-card.active {
    background: #FFFBF5; 
    border-color: #E2E8F0;
    border-left-color: #FF8C00; /* ORANGE PRIMARY */
}
.ble-lessons-mode.is-split-view .ble-lesson-card.active h4 { color: #FF8C00; }

.ble-lessons-mode.is-split-view .ble-player-column {
    display: block; flex: 1; opacity: 1;
    background: #fff; border-radius: 20px; padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* PLAYER STYLES */
.ble-player-sticky { position: sticky; top: 20px; }
.ble-player-top-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.ble-btn-close {
    background: #EF4444; color: #fff; border: none; padding: 8px 16px; border-radius: 50px; 
    font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.ble-btn-close:hover { background: #DC2626; transform: translateY(-2px); }

.ble-video-container {
    width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.ble-video-container iframe { width: 100%; height: 100%; }
.ble-lesson-details h2 { color: var(--color-blue-primary); margin-top: 0; font-size: 24px; }
.ble-lesson-text { font-size: 15px; line-height: 1.7; color: #475569; }

/* --- CSS MODALE FIXED (CRUCIAL POUR QU'ELLE SOIT AU DESSUS) --- */
.ble-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100000; display: none; align-items: center; justify-content: center; }
.ble-modal.is-open { display: flex !important; }
.ble-modal-backdrop { position: absolute; width: 100%; height: 100%; background: rgba(0, 2, 78, 0.6); backdrop-filter: blur(5px); }
.ble-modal-content { position: relative; z-index: 2; background: #fff; width: 90%; max-width: 480px; border-radius: 20px; padding: 30px; box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.3);     max-height: 90%;    overflow-y: scroll;}
.ble-modal-header { display: flex; justify-content: space-between; margin-bottom: 16px; }
.ble-modal-close { background: transparent; border: none; font-size: 18px; cursor: pointer; color: #999; }
.ble-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.ble-lang-option { padding: 14px 16px; border: 2px solid var(--color-blue-5); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 700; color: var(--color-blue-primary); display: flex; gap: 10px; align-items: center; }
.ble-lang-option:hover { border-color: var(--color-blue-40); background: #f8fbff; color: var(--color-blue-primary);}
.ble-lang-option.active { border-color: var(--color-blue-primary); background: var(--color-blue-5); color: var(--color-blue-primary);}
.ble-btn-primary { width: 100%; background: var(--color-blue-primary); color: #fff; border: none; padding: 14px; border-radius: 50px; font-weight: 700; cursor: pointer; text-align: center; }
.ble-flag-img { border-radius: 160px; width: 20px; height: 20px; margin-right: 8px; }

.page-id-134 .ble-author {
	width: 120px !important;
}


/* RESPONSIVE */
.mobile-only { display: none !important; }

@media (max-width: 991px) {
    .ble-master-wrap { padding: 15px; border: none; }
    .ble-header-content { flex-direction: column; gap: 20px; }
    
    .ble-instructor-badge { width: 100%; flex-direction: column; max-width: none; }
    
    .ble-list-column { flex: 1 !important; width: 100% !important; }
    
    /* Split Mobile */
    .ble-lessons-mode.is-split-view .ble-list-column { display: none; }
    .ble-lessons-mode.is-split-view .ble-player-column { display: block; width: 100%; padding: 15px; }
    
    .mobile-only { display: inline-flex !important; background: var(--color-blue-primary); }
    #ble-close-player { display: none; }
    
    .ble-filters-row { flex-direction: column-reverse; align-items: flex-start; }
    .custom-select-wrapper { width: 100% !important; }
	.ble-dark-header { padding: 24px; }
}

@media (max-width: 768px) {

	.ble-filter-pill {
    padding: 10px 1.1rem;
	font-size: 0.9rem;
	font-weight: 500;
}
	
}

/* =========================================
   9. LISTE TEACHER (Final Custom Selects)
   ========================================= */

/* --- 1. CONTAINER PRINCIPAL --- */
#bridge-master-container {
    display: flex;
    width: 100%;
    height: 700px;
    background: var(--color-blue-10);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #Eef2f6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    position: relative;
}

#bridge-master-container * { box-sizing: border-box; }

/* --- 2. COLONNE GAUCHE (LISTE) --- */
#bridge-master-container .bridge-list-col {
    width: 40%;
    background: var(--color-white);
    border-right: 1px solid #Eef2f6;
    display: flex;
    flex-direction: column;
    z-index: 2;
    height: 100%;
}

/* Header */
#bridge-master-container .bridge-list-header {
    padding: 25px 30px;
    border-bottom: 1px solid #Eef2f6;
    background: var(--color-white);
    z-index: 10;
    flex-shrink: 0;
}

#bridge-master-container .header-top {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;
}
#bridge-master-container .header-top h3 {
    margin: 0; font-size: 20px; font-weight: 700; color: var(--color-blue-primary); line-height: 1.2;
}
#bridge-master-container .header-badge {
    background: var(--color-blue-10); color: var(--color-blue-primary);
    padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
}

/* Filtres */
#bridge-master-container .bridge-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#bridge-master-container .search-wrapper { position: relative; flex: 10; min-width: 120px; }
#bridge-master-container .search-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--color-grey); pointer-events: none; width: 16px; height: 16px;
}
#bridge-master-container input#filter-search {
    width: 100%; padding: 8px 15px 8px 38px; border: 1px solid #Eef2f6;
    border-radius: 50px; font-size: 13px; color: #2C3E50; outline: none;
    background: var(--color-white); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); height: 40px; margin: 0;
}

/* ============================================================
   CORRECTIF RIGOUREUX : INPUTS RECHERCHE (Style Bridge)
   Applique le style exact des "select" aux champs de recherche
   renommés pour éviter les conflits.
   ============================================================ */

/* 1. Le Conteneur de la recherche */
#bridge-master-container .search-wrapper {
    position: relative;
    flex: 1;             /* Prend l'espace disponible */
    min-width: 150px;    /* Largeur min comme les selects */
    margin-right: 10px;  /* Espacement avec les autres filtres */
}

/* 2. Les Champs Input (Cibles : Clubs & Profs) */
#bridge-master-container #club-filter-search,
#bridge-master-container #teacher-filter-search {
    /* Mêmes propriétés exactes que votre .custom-select-trigger */
    width: 100%;
    height: 40px;
    line-height: normal; /* Important pour l'input text */
    padding: 0 20px 0 40px; /* 40px à gauche pour la loupe */
    
    border: 1px solid #Eef2f6;
    border-radius: 50px; /* Votre arrondi spécifique */
    background: var(--color-white);
    
    font-size: 12px;
    color: #2C3E50;
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* Votre ombre */
    transition: all 0.2s;
    outline: none;
    -webkit-appearance: none;
}

/* 3. États Hover & Focus (Comme vos boutons) */
#bridge-master-container #club-filter-search:hover,
#bridge-master-container #club-filter-search:focus,
#bridge-master-container #teacher-filter-search:hover,
#bridge-master-container #teacher-filter-search:focus {
    border-color: #FF8C00;
    /* On ne change pas la couleur du texte en orange sur un input, c'est illisible, 
       on garde juste la bordure orange comme rappel */
}

/* 4. Repositionnement de l'icône Loupe */
#bridge-master-container .search-wrapper .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-grey, #999); /* Gris par défaut */
    pointer-events: none; /* Clic passe au travers vers l'input */
    z-index: 2;
}

/* CUSTOM SELECT STYLES */
#bridge-master-container .custom-select-wrapper {
    position: relative; flex: 1; min-width: 110px; user-select: none;
}
#bridge-master-container .custom-select-trigger,
#bridge-master-container .ble-lang-btn {
    width: 100%; padding: 0 30px 0 15px; border: 1px solid #Eef2f6;
    border-radius: 50px; font-size: 12px; color: #2C3E50;
    background: var(--color-white); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    height: 40px; line-height: 38px; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s;
}
#bridge-master-container .custom-select-trigger:hover,
#bridge-master-container .ble-lang-btn:hover {
    border-color: #FF8C00; color: #FF8C00;
}
#bridge-master-container .select-arrow {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-grey); pointer-events: none; width: 10px; height: 10px;
}

.current-lang-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Dropdown Menu */
#bridge-master-container .custom-options {
    position: absolute; top: 110%; left: 0; right: 0;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #Eef2f6; opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: all 0.2s; z-index: 99;
    max-height: 250px; overflow-y: auto; padding: 5px;
}
#bridge-master-container .custom-select-wrapper.open .custom-options {
    opacity: 1; visibility: visible; transform: translateY(0);
}
#bridge-master-container .custom-option {
    padding: 8px 12px; font-size: 12px; color: #2C3E50; cursor: pointer;
    border-radius: 8px; transition: 0.1s;
}
#bridge-master-container .custom-option:hover {
    background: var(--color-blue-10); color: var(--color-blue-primary);
}
#bridge-master-container .custom-option.selected {
    background: var(--color-blue-primary); color: #fff;
}

/* Bouton Geoloc */
#bridge-master-container .btn-geoloc {
    background: var(--color-white); border: 1px solid #Eef2f6; border-radius: 50%;
    width: 40px; height: 40px; min-width: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: #2C3E50; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.2s; flex-shrink: 0;
}
#bridge-master-container .btn-geoloc:hover, #bridge-master-container .btn-geoloc.active {
    border-color: #FF8C00; color: #FF8C00;
}
#bridge-master-container .btn-geoloc.active { background: #FF8C00; color: #fff; }

/* Liste Items */
#bridge-master-container .bridge-list-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#bridge-master-container .bridge-list-empty { padding: 40px; text-align: center; color: var(--color-grey); font-style: italic; }

#bridge-master-container .bridge-list-item {
    display: flex; align-items: flex-start; padding: 20px;
    border-bottom: 1px solid #eef2f67d; cursor: pointer; transition: all 0.2s; position: relative;
}
#bridge-master-container .bridge-list-item:hover { background-color: #F8FAFC; }
#bridge-master-container .bridge-list-item.active { background-color: var(--color-white); box-shadow: inset 4px 0 0 #FF8C00; }

#bridge-master-container .item-avatar { margin-right: 12px; flex-shrink: 0; }
#bridge-master-container .item-avatar img {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 1px solid #Eef2f6; box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

#bridge-master-container .item-content { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#bridge-master-container .item-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-blue-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bridge-master-container .item-subtitle { font-size: 14px; color: #64748B; font-weight: 400; }

#bridge-master-container .item-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#bridge-master-container .badge-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase;
}
#bridge-master-container .badge-pill svg { width: 10px; height: 10px; }
#bridge-master-container .bg-blue { background: #E0F2FE; color: #0284C7; }
#bridge-master-container .bg-green { background: #DCFCE7; color: #16A34A; }
#bridge-master-container .bg-purple { background: #F3E8FF; color: #9333EA; }

/* FLAGS MINI (Liste de gauche) */
#bridge-master-container .flags-mini { display: flex; gap: 4px; margin-left: 8px; }
#bridge-master-container .flags-mini img { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

#bridge-master-container .item-distance-abs {
    position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 700;
    color: #FF8C00; background: #FFF4E6; padding: 2px 6px; border-radius: 4px;
}
#bridge-master-container .item-chevron { align-self: center; margin-left: 10px; color: #CBD5E1; }
#bridge-master-container .bridge-list-item.active .item-chevron { color: #FF8C00; }

/* --- 3. COLONNE DETAILS (60%) --- */
#bridge-master-container .bridge-details-col {
    width: 60%;
    background: var(--color-blue-10); /* Fond bleu */
    overflow-y: auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

#bridge-master-container .bridge-ghost-header {
    visibility: hidden; height: 70px; border-bottom: 1px solid transparent; pointer-events: none; flex-shrink: 0;
}

#bridge-master-container .detail-card {
    background: var(--color-white);
    border-radius: 24px;
    border: 1px solid #Eef2f6;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    animation: bridgeSlideUp 0.4s ease;
    width: 100%;
}

#bridge-master-container .card-header {
    text-align: center; margin-bottom: 30px; padding-bottom: 30px;
    border-bottom: 1px solid #Eef2f6; display: flex; flex-direction: column; align-items: center;
}

#bridge-master-container .teacher-avatar-circle {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0, 2, 78, 0.15);
    margin-bottom: 15px;
}

#bridge-master-container .card-title {
    font-size: 24px; color: var(--color-blue-primary); font-weight: 800; margin: 0 0 5px 0; line-height: 1.2;
}
#bridge-master-container .card-subtitle {
    font-size: 14px; color: #64748B; background: #F1F5F9; padding: 4px 12px; border-radius: 50px; font-weight: 600;
}

/* Info Grid */
#bridge-master-container .info-grid { display: grid; gap: 15px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #Eef2f6; }
#bridge-master-container .info-row { display: flex; align-items: center; }
#bridge-master-container .info-label {
    width: 100px; font-weight: 700; color: #94A3B8; line-height: 1.4em;
    font-size: 11px; text-transform: uppercase; flex-shrink: 0;
    padding-top: 6px; letter-spacing: 0.5px;
}
#bridge-master-container .info-value {
    flex: 1; font-size: 15px; font-weight: 500;
    color: var(--color-blue-primary); word-break: break-word; display: flex; gap: 8px; flex-wrap: wrap;
}

/* TAGS LANGUES & CLUBS */
#bridge-master-container .detail-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: #F8FAFC; padding: 6px 12px; border-radius: 8px;
    font-size: 13px; color: #475569;
}
#bridge-master-container .detail-tag img { width: 18px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

#bridge-master-container .club-pill { 
    display: inline-flex; align-items: center; text-decoration: none; 
    background: #F8FAFC; padding: 6px 12px; border-radius: 8px; 
    transition: all 0.2s; color: #475569;
}
#bridge-master-container .club-pill:hover { background: #E0F2FE; border-color: #E0F2FE; }
#bridge-master-container .club-pill img { width: 20px; height: 20px; border-radius: 50%; margin-right: 8px; object-fit: cover; }
#bridge-master-container .club-pill span { font-size: 13px; font-weight: 500; }
#bridge-master-container .club-pill svg { margin-left: 6px; width: 12px; color: #94A3B8; }

/* STYLE BIO & PALMARES */
#bridge-master-container .card-bio-section { margin-top: 20px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #Eef2f6; }
#bridge-master-container .card-bio-section.card-palmares { border-bottom: none !important; padding-bottom: 0px; }
#bridge-master-container .card-bio-section h4 {
    font-size: 11px; text-transform: uppercase; color: #94A3B8; 
    font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px;
}
#bridge-master-container .card-desc {
    font-size: 14px; line-height: 1.6; color: #475569;
    background: #F8FAFC; padding: 15px 20px; border-radius: 12px;
    width: 100%; white-space: pre-line;
}

/* Actions */
#bridge-master-container .card-actions { display: flex; gap: 15px; margin-top: 30px; }
#bridge-master-container .btn-primary {
    background: #FF8C00; color: #fff; border: none; flex: 1; height: 48px;
    border-radius: 50px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.25);
}
#bridge-master-container .btn-primary:hover { background: #E67E00; transform: translateY(-2px); color: #fff; }
#bridge-master-container .btn-secondary {
    background: #fff; color: var(--color-blue-primary); border: 1px solid #E2E8F0;
    flex: 1; height: 48px; border-radius: 50px; font-weight: 700; font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.2s;
}
#bridge-master-container .btn-secondary:hover { border-color: #FF8C00; color: #FF8C00; transform: translateY(-2px); }
#bridge-master-container .btn-secondary svg { width: 18px; height: 18px; margin-right: 8px; }

/* Empty States */
#bridge-master-container .details-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; width: 100%; color: #94A3B8; text-align: center; padding: 40px;
}

/* --- 4. MODALE & SIGNUP STYLES --- */
body.ble-modal-open .site-header, body.ble-modal-open.bp-search .buddypanel, body.ble-modal-open .footer-widget-area { z-index: 0 !important; }

#bridge-master-container .ble-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;
    justify-content: center; align-items: center;
}
#bridge-master-container .ble-modal.is-open { display: flex; animation: bridgeFadeIn 0.2s ease; }
#bridge-master-container .ble-modal-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 25, 47, 0.8); backdrop-filter: blur(4px);
}
#bridge-master-container .ble-modal-content {
    position: relative; background: var(--color-white); width: 95%; max-width: 600px;
    height: 90vh; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
}
#bridge-master-container .ble-modal.is-open .ble-modal-content { transform: scale(1); }

#bridge-master-container .ble-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid #Eef2f6; background: #FFFFFF;
    flex-shrink: 0; z-index: 10;
}
#bridge-master-container .ble-modal-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-blue-primary); }
#bridge-master-container .ble-modal-close { background: transparent; border: none; font-size: 24px; color: var(--color-grey); cursor: pointer; padding: 0; line-height: 1; }

#bridge-master-container .ble-modal-body {
    padding: 0; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; position: relative;
}

#bridge-master-container .ble-modal-footer {
    padding: 15px 25px; border-top: 1px solid #Eef2f6; background: #FFFFFF;
    text-align: center; flex-shrink: 0; z-index: 10;
}

#bridge-master-container .modal-intro-box {
    background-color: #00024E; color: #FFFFFF; padding: 25px 30px;
    position: relative; width: 100%; margin-bottom: -192px; border-radius: 20px;
}
#bridge-master-container .modal-intro-box h4 { margin: 0 0 10px 0; font-size: 22px; font-weight: 700; color: #FFFFFF; line-height: 1.2; }
#bridge-master-container .modal-intro-box h4 span { color: #FF8C00; }
#bridge-master-container .modal-intro-box p.intro-desc { margin: 0 0 20px 0; font-size: 14px; color: #E0EBF7; line-height: 1.5; }
#bridge-master-container .modal-intro-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
#bridge-master-container .modal-intro-box li { display: flex; align-items: flex-start; gap: 10px; color: #FFFFFF; font-size: 14px; line-height: 1.4; }
#bridge-master-container .modal-intro-box li::before { content: '✓'; display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: #FF8C00; font-weight: 700; font-size: 12px; flex-shrink: 0; }
#bridge-master-container .modal-intro-box li strong { color: #FFFFFF; font-weight: 600; display: block; margin-bottom: 2px; }

#bridge-master-container .signup-iframe {
    width: 100%; height: 1600px; border: none; display: block; background: #fff; overflow: hidden;
}
#bridge-master-container .link-modal-login { font-size: 18px; color: #64748B; text-decoration: none; }
#bridge-master-container .link-modal-login strong { color: #FF8C00; cursor: pointer; }

#bridge-master-container .ble-lang-btn { justify-content: space-between; display: flex; }
.link-modal-login strong {
	font-size: 16px;
	background-color: #FF8C00;
    padding: 6px 12px;
    border-radius: 160px;
    color: white !important;
}

.link-modal-login strong:hover {
	background-color: var(--wp--preset--color--luminous-vivid-orange);
}

/* 5. RESPONSIVE & UTILS */
@media (max-width: 768px) {
    #bridge-master-container .ble-modal-content { width: 100%; height: 100%; max-width: 100%; border-radius: 16px; }
    #bridge-master-container .modal-intro-box { padding: 20px; }
    #bridge-master-container .signup-iframe { height: 1700px; }
}

/* Mobile Back Button */
#bridge-master-container .mobile-back {
    display: none; align-items: center; padding: 15px 20px; background: var(--color-blue-primary);
    color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; width: 100%; border-radius: 0px !important;
}
#bridge-master-container .mobile-back svg { width: 18px; height: 18px; margin-right: 10px; }

/* Scrollbars */
#bridge-master-container .custom-scrollbar::-webkit-scrollbar { width: 5px; }
#bridge-master-container .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #E2E8F0; border-radius: 10px; }
#bridge-master-container .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

@keyframes bridgeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bridgeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bridgePulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* RESPONSIVE GLOBAL */
@media (max-width: 991px) {
    #bridge-master-container { flex-direction: column; height: 600px; border-radius: 16px; }
    #bridge-master-container .bridge-list-col, #bridge-master-container .bridge-details-col { width: 100%; height: 100%; border: none; }
    #bridge-master-container .bridge-details-col { display: none; padding: 0; background: #fff; }
    
    #bridge-master-container .detail-card { box-shadow: none; border: none; border-radius: 0; padding: 25px; }
    #bridge-master-container .card-title { font-size: 20px; }
    #bridge-master-container .teacher-avatar-circle { width: 72px; height: 72px; font-size: 16px; }
    #bridge-master-container .card-actions { flex-direction: column; }
    #bridge-master-container .btn-primary, #bridge-master-container .btn-secondary {min-height: 48px; width: 100%; }
    #bridge-master-container .bridge-ghost-header { display: none; }
    
    #bridge-master-container .bridge-filters { flex-direction: row; }
    #bridge-master-container .search-wrapper { flex: 1 1 100%; order: 1; }
    #bridge-master-container .select-wrapper, #bridge-master-container .btn-geoloc { order: 2; }
    
    /* Mobile Back Affichage */
    #bridge-master-container .mobile-back { display: flex; }
}



/* =========================================
   List Club
   ========================================= */

.club-bridge-container .teacher-avatar-circle, .club-bridge-container .item-avatar img {
	border-radius: 12px !important;
}

.club-bridge-container .about-club {
	border-bottom: none !important;
	padding-bottom: 0px !important;
}







/* =========================================
   FEDERATION DIRECTORY (STYLE CARD FINAL)
   ========================================= */

#federation-master-container {
    display: flex;
    width: 100%;
    height: 700px;
    background: var(--color-blue-10);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #Eef2f6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    position: relative;
}

#federation-master-container * { box-sizing: border-box; }

/* --- COLONNE 1: ZONES (25%) --- */
#federation-master-container .fed-col-zones {
    width: 25%;
    background: var(--color-white);
    border-right: 1px solid #Eef2f6;
    display: flex;
    flex-direction: column;
    z-index: 3;
}

/* --- COLONNE 2: PAYS (30%) --- */
#federation-master-container .fed-col-list {
    width: 30%;
    background: #F8FAFC;
    border-right: 1px solid #Eef2f6;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* --- COLONNE 3: DETAILS (45% - FOND BLEU) --- */
#federation-master-container .fed-col-details {
    width: 45%;
    background: var(--color-blue-10); /* Fond bleu clair */
    padding: 30px; /* Espace autour de la carte */
    overflow-y: auto;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* --- HEADERS COMMUNS --- */
#federation-master-container .fed-header {
    padding: 20px 25px;
    border-bottom: 1px solid #Eef2f6;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 70px;
}
#federation-master-container .fed-header h3 {
    margin: 0; font-size: 16px; font-weight: 700; color: var(--color-blue-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
#federation-master-container .header-badge {
    background: var(--color-blue-10); color: var(--color-blue-primary);
    padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
}

/* --- LISTES (Zones & Pays) --- */
#federation-master-container .fed-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#federation-master-container .fed-item {
    display: flex; align-items: center; padding: 18px 25px;
    border-bottom: 1px solid #Eef2f6; cursor: pointer; transition: all 0.2s;
}
#federation-master-container .fed-item:hover { background-color: rgba(0, 2, 78, 0.03); }
#federation-master-container .fed-item.active {
    background-color: var(--color-white);
    box-shadow: inset 4px 0 0 var(--color-red-60);
}
#federation-master-container .fed-item .item-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#federation-master-container .fed-item .item-title { font-size: 14px; font-weight: 600; color: var(--color-blue-secondary); }
#federation-master-container .fed-item .item-meta { font-size: 12px; color: #94A3B8; }
#federation-master-container .fed-item .item-chevron { color: #CBD5E1; margin-left: 10px; }
#federation-master-container .fed-item.active .item-chevron { color: var(--color-red-60); }
#federation-master-container .fed-item.active .item-title { color: var(--color-blue-primary); font-weight: 700; }

/* =========================================
   NOUVEAU STYLE : CARD DETAILS
   ========================================= */

/* La Carte Blanche */
#federation-master-container .detail-card {
    background: var(--color-white);
    border-radius: 24px;
    border: 1px solid #Eef2f6;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    animation: bridgeSlideUp 0.4s ease;
    width: 100%;
}

/* Header Carte (Centré) */
#federation-master-container .card-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #Eef2f6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Avatar Rond (Sigle) */
#federation-master-container .fed-avatar-circle {
    width: 100px; height: 100px;
    background: var(--color-blue-primary); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 2, 78, 0.2);
    border: 4px solid #fff;
}

#federation-master-container .card-title {
    font-size: 24px; color: var(--color-blue-primary);
    font-weight: 800; margin: 0 0 16px 0; line-height: 1.2;
}

#federation-master-container .card-subtitle {
    font-size: 14px; color: #64748B; background: #F1F5F9;
    padding: 4px 12px; border-radius: 50px; font-weight: 600;
}

/* Grille d'infos */
#federation-master-container .info-grid { display: grid; gap: 15px; margin-bottom: 30px; }
#federation-master-container .info-row { display: flex; align-items: flex-start; }

#federation-master-container .info-label {
    width: 100px; font-weight: 700; color: #94A3B8; line-height: 1.4em;
    font-size: 11px; text-transform: uppercase; flex-shrink: 0;
    padding-top: 3px; letter-spacing: 0.5px;
}

#federation-master-container .info-value {
    flex: 1; font-size: 15px; font-weight: 500;
    color: var(--color-blue-primary); word-break: break-word;
}
#federation-master-container .info-value a {
    color: var(--color-blue-primary); text-decoration: none; transition: color 0.2s;
}
#federation-master-container .info-value a:hover { color: var(--color-red-primary); }

/* Boutons Actions */
#federation-master-container .card-actions { display: flex; gap: 15px; margin-top: 30px; }

#federation-master-container .btn-primary {
    background: #FF8C00; color: #fff; border: none; flex: 1; height: 48px;
    border-radius: 50px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.25);
}
#federation-master-container .btn-primary:hover {
    background: #E67E00; transform: translateY(-2px); color: #fff;
}
#federation-master-container .btn-primary.disabled { opacity: 0.5; pointer-events: none; background: #ccc; box-shadow: none; }

#federation-master-container .btn-secondary {
    background: #fff; color: var(--color-blue-primary); border: 1px solid #E2E8F0;
    flex: 1; height: 48px; border-radius: 50px; font-weight: 700; font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.2s;
}
#federation-master-container .btn-secondary:hover {
    border-color: #FF8C00; color: #FF8C00; transform: translateY(-2px);
}
#federation-master-container .btn-secondary.disabled { opacity: 0.5; pointer-events: none; }


/* Empty States */
#federation-master-container .empty-col-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; /* C'est la clé de l'alignement */
    width: 100%;
    color: #94A3B8;
    text-align: center;
    padding: 40px;
}

#federation-master-container .fed-ghost-header {
    visibility: hidden;
    border-bottom: 1px solid transparent;
    pointer-events: none;
}

#federation-master-container .empty-col-state .icon-wrap { font-size: 40px; margin-bottom: 15px; opacity: 0.3; }

/* Mobile Nav Buttons */
#federation-master-container .fed-mobile-nav {
    display: none; align-items: center; padding: 15px 20px; background: var(--color-blue-primary);
    color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
#federation-master-container .fed-mobile-nav svg { width: 18px; height: 18px; margin-right: 10px; }

/* =========================================
   STYLE ENCART ZONE (Col 2 - Top)
   ========================================= */

#federation-master-container .zone-info-wrapper {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #Eef2f6;
    margin-bottom: 0;
}

/* Description textuelle */
#federation-master-container .zone-desc-text {
    font-size: 13px;
    color: #64748B;
    line-height: 1.5;
    margin: 0 0 15px 0;
    font-style: italic;
}
#federation-master-container .zone-desc-text:last-child {
    margin-bottom: 0;
}

/* Carte Minifiée Fédération Globale */
#federation-master-container .zone-global-card {
    display: flex;
    align-items: center;
    background: #F0F9FF; 
    border: 1px solid #BAE6FD;
    padding: 12px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

#federation-master-container .zone-global-card:hover {
    background: #E0F2FE;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

#federation-master-container .zone-global-card.active {
    background: var(--color-blue-primary);
    border-color: var(--color-blue-primary);
}
#federation-master-container .zone-global-card.active .zg-title,
#federation-master-container .zone-global-card.active .zg-chevron,
#federation-master-container .zone-global-card.active .zg-icon {
    color: #fff;
}
#federation-master-container .zone-global-card.active .zg-sigle {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Le bloc de texte descriptif dans la carte détails */
#federation-master-container .detail-card-desc {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    background: #F8FAFC;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    text-align: left; /* Meilleure lisibilité que le centrée */
    font-style: italic;
    width: 100%;
}

#federation-master-container .zg-icon {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.6); border-radius: 50%; color: var(--color-blue-primary);
    margin-right: 12px; font-size: 14px;
}
#federation-master-container .zg-content { flex: 1; min-width: 0; }
#federation-master-container .zg-title {
    font-size: 13px; font-weight: 700; color: var(--color-blue-primary);
    margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#federation-master-container .zg-sigle {
    display: inline-block; font-size: 10px; font-weight: 700; background: #fff;
    color: var(--color-blue-secondary); padding: 1px 6px; border-radius: 4px;
}
#federation-master-container .zg-chevron { color: #7DD3FC; margin-left: 8px; }


/* =========================================
   STYLE DRAPEAUX (FLAGS)
   ========================================= */

/* 1. Colonne ZONES : Mini Drapeaux */
#federation-master-container .item-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

#federation-master-container .zone-flags {
    display: flex;
    gap: -4px; /* Petit effet de chevauchement stylé */
}

#federation-master-container .mini-flag {
    width: 18px;
    height: 18px; /* Hauteur égale à la largeur pour un carré */
    border-radius: 50%; /* Rend le carré rond */
    object-fit: cover; /* Recadre l'image pour remplir le cercle */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 1px solid #fff;
    margin-left: -4px;
}
#federation-master-container .mini-flag:first-child {
    margin-left: 0;
}

/* 2. Colonne PAYS : Drapeau Liste */
#federation-master-container .item-content-row {
    flex: 1;
    display: flex;
    align-items: center; /* Centré verticalement */
    gap: 12px;
    min-width: 0; /* Important pour que le texte tronqué fonctionne */
}

/* Colonne de texte (Pays haut, Org bas) */
#federation-master-container .item-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0; /* Permet au text-overflow de fonctionner */
}

/* Ligne du haut (Nom Pays + Sigle) */
#federation-master-container .item-top-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#federation-master-container .item-country-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-blue-primary);
    white-space: nowrap;
}

#federation-master-container .list-sigle {
    font-size: 10px;
    font-weight: 700;
    background: #E0E7FF;
    color: var(--color-blue-secondary);
    padding: 0px 5px;
    border-radius: 4px;
    text-transform: uppercase;
}

#federation-master-container .item-org-name {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute "..." si le nom est trop long */
    line-height: 1.2;
}

#federation-master-container .item-chevron {
    align-self: center;
    flex-shrink: 0;
}

#federation-master-container .country-list-flag {
    width: 24px;
    height: 24px; /* Hauteur égale à la largeur pour un carré */
    border-radius: 50%; /* Rend le carré rond */
    object-fit: cover; /* Recadre l'image pour remplir le cercle */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* Scrollbars & Animations */
#federation-master-container .custom-scrollbar::-webkit-scrollbar { width: 5px; }
#federation-master-container .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #E2E8F0; border-radius: 10px; }
#federation-master-container .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
@keyframes bridgeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bridgeFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
    #federation-master-container { flex-direction: column; height: 600px; border-radius: 16px; }
    #federation-master-container .fed-col { width: 100%; height: 100%; border-right: none; }
    #federation-master-container .fed-col-list, #federation-master-container .fed-col-details { display: none; }
    #federation-master-container .fed-col-zones { border-bottom: 1px solid #Eef2f6; }
    
    /* Mobile Card overrides */
    #federation-master-container .fed-col-details { padding: 0; background: #fff; }
    #federation-master-container .detail-card { box-shadow: none; border: none; border-radius: 0; padding: 25px; }
    #federation-master-container .card-actions { flex-direction: column; }
	#federation-master-container .btn-primary, #federation-master-container .btn-secondary {
		min-height: 48px;
		width: 100%;
	}
	#federation-master-container .fed-avatar-circle {
		width: 72px;
    	height: 72px;
		font-size: 16px;
	}
	#federation-master-container .card-title {
		font-size: 20px;
	}
	#federation-master-container .fed-ghost-header {
        display: none;
    }
}



/* =========================================
   BRIDGE SIDEBAR WIDGETS
   ========================================= */

/* ==========================================================================
   WIDGETS SIDEBAR (DESIGN BLUE THEME)
   ========================================================================== */

/* 1. CONTENEUR GLOBAL (FOND BLEU) */
.bridge-widget-blue {
    background-color: var(--color-blue-10, #E1EDFA); /* Bleu clair du thème */
    border-radius: 24px;
    padding: 24px 28px;
    margin-bottom: 30px;
    border: none;
    position: relative;
    overflow: hidden;
}

/* 2. EN-TÊTE DU WIDGET (TITRE + LIEN "ALL") */
.bridge-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(0, 2, 78, 0.08); /* Séparateur subtil */
}

.bridge-widget-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-blue-primary, #00024E);
    margin: 0 !important;
    padding: 0;
    line-height: 1.2;
}

/* Lien "+ All authors/topics" */
.bridge-widget-all-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-blue-primary, #00024E);
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.bridge-widget-all-link i {
    font-size: 10px; /* Petit plus */
}

.bridge-widget-all-link:hover {
    opacity: 1;
    border-bottom-color: var(--color-blue-primary);
}


/* ==========================================================================
   LISTE DES AUTEURS (STYLE FOLLOW)
   ========================================================================== */

.b-author-row {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 2, 78, 0.08); /* Ligne fine entre auteurs */
}

.b-author-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.b-author-row:first-child {
    padding-top: 0;
}

/* Avatar */
.b-author-avatar-wrap {
    flex-shrink: 0;
    margin-right: 14px;
    transition: transform 0.2s ease;
}

.b-author-avatar-wrap:hover {
    transform: scale(1.05);
}

.b-author-avatar-wrap img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    /* Optionnel : petite bordure blanche si l'image est sombre */
    border: 2px solid #fff; 
}

/* Nom de l'auteur */
.b-author-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-right: 10px;
}

.b-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-blue-primary, #00024E);
    text-decoration: none;
    line-height: 1.3;
}

.b-author-name:hover {
    color: var(--color-blue-60, #6393D6);
}

/* Bouton "Follow" (Texte souligné à droite) */
.b-follow-text-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-blue-secondary, #122A70);
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
}

.b-follow-text-btn:hover {
    color: var(--color-blue-80, #3860B0);
}











/* ==========================================================================
   LISTE DES TOPICS (STYLE PILLULES BLANCHES)
   ========================================================================== */

.single .widget, .archive .widget-area .widget {
	padding: 0px !important;
	border: none !important;
}

@media screen and (min-width: 800px) {
    .single .widget-area:not(.widget-area-secondary), .archive .widget-area:not(.widget-area-secondary) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 360px;
        flex: 0 0 360px;
        max-width: 360px;
    }
}

/* 1. GLOBAL CONTAINER */
.bridge-widget-modern {
    background-color: var(--color-blue-10, #E1EDFA);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 30px;
}

/* 2. HEADER */
.bridge-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(0,2,78,0.08);
}

.bridge-widget-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-blue-primary, #00024E);
    margin: 0 !important;
}

.bridge-widget-link-all {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-blue-primary, #122A70);
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.8;
    transition: all 0.2s;
	border-bottom: 1px solid var(--color-blue-primary, #122A70);
}

.bridge-widget-link-all:hover {
    opacity: 1;
    color: var(--color-blue-80);
}

/* ==========================================================================
   WIDGET 1: AUTHORS (LAYOUT CORRIGÉ)
   ========================================================================== */

.b-author-item {
    display: flex;
    align-items: center; /* Centre verticalement */
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.6);
}

.b-author-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Avatar */
.b-author-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    display: block;
    margin-right: 14px;
}

/* Infos (Nom + Nb Publications) */
.b-author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ne prend que la place nécessaire, laisse le bouton aller à droite */
}

.b-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-blue-primary);
    text-decoration: none;
    line-height: 1.2;
}

.b-author-meta {
    font-size: 12px;
    color: var(--color-blue-60, #6393D6); /* Couleur plus douce pour le compteur */
    margin-top: 2px;
}

/* Bouton Follow (Tout à droite) */
.b-author-follow {
    margin-left: auto; /* C'est cette ligne qui pousse le bouton à droite */
    font-size: 14px;
    font-weight: 500;
    color: var(--color-blue-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(18, 42, 112, 0.3);
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    padding-left: 10px;
}

.b-author-follow:hover {
    color: var(--color-blue-80);
    text-decoration-color: var(--color-blue-80);
}


/* ==========================================================================
   WIDGET 2: TOPICS
   ========================================================================== */
.b-topics-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.b-topic-pill {
    background-color: #ffffff;
    color: var(--color-blue-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.b-topic-pill:hover {
    background-color: var(--color-blue-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   WIDGET 3 & 4: CARDS
   ========================================================================== */
.b-card-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 16px;
    text-decoration: none;
    margin-bottom: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
}

.b-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 2, 78, 0.08);
}

.b-card-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
}

.b-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.b-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-blue-primary);
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.b-card-item:hover .b-card-title {
    color: var(--color-blue-80);
}

.b-card-meta {
    font-size: 12px;
    color: #8899a6;
    display: flex;
    align-items: center;
    gap: 5px;
}

.b-rank-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-blue-5);
    color: var(--color-blue-secondary);
    font-weight: 800;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Podium Colors */
.b-card-item:nth-child(1) .b-rank-number { background: #FFF4E6; color: #D4AF37; }
.b-card-item:nth-child(2) .b-rank-number { background: #F2F2F2; color: #8a8a8a; }
.b-card-item:nth-child(3) .b-rank-number { background: #FFF0E8; color: #CD7F32; }


/* =========================================
   POPULAR WIDGET SWITCHER
   ========================================= */

.bridge-switch-control {
    background-color: #ffffff;
    border-radius: 50px;
    padding: 4px;
    display: flex;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.switch-btn {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-blue-secondary);
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.switch-btn:hover {
    color: var(--color-blue-primary);
    background-color: var(--color-blue-5);
}

.switch-btn.active {
    background-color: var(--color-blue-primary);
    color: var(--color-white);
    box-shadow: 0 2px 5px rgba(0, 2, 78, 0.2);
}

/* Animation douce entre les listes */
.popular-list-wrapper {
    animation: fadeInList 0.3s ease-in-out;
}

@keyframes fadeInList {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajustement pour le widget populaire spécifique */
.bridge-popular-widget .bridge-widget-header {
    align-items: center; /* Centrage vertical */
}

/* Empty state style */
.bridge-empty {
    color: #94A3B8;
    font-size: 14px;
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}


/* =========================================
   REACTION PILE (Facebook Style)
   ========================================= */

.reaction-pile {
    display: flex;
    flex-direction: row-reverse; /* Pour que le premier (z-index élevé) soit au dessus visuellement */
    align-items: center;
    margin-right: 8px;
}

.reaction-pile .rp-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: -6px; /* Chevauchement */
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* L'élément le plus à droite dans le DOM (donc le 1er visuel à cause du row-reverse si on veut) 
   ou on gère simplement le z-index : */
.reaction-pile .rp-icon:nth-child(1) { z-index: 3; }
.reaction-pile .rp-icon:nth-child(2) { z-index: 2; }
.reaction-pile .rp-icon:nth-child(3) { z-index: 1; }
.reaction-pile .rp-icon span { line-height: 1; display: block; margin-top: -1px;}

.b-card-meta {
    display: flex;
    align-items: center;
}

.single-post .post-related-posts {
	margin-top: 30px;
    padding-top: 30px;
	border-top: 1px solid var(--bb-content-border-color);
	border-bottom: none !important;
}


/* FIX CRITIQUE POUR LE BOUTON FOLLOW */
.bridge-js-wrapper {
    display: contents !important;
}

/* On s'assure que ton style s'applique bien au lien généré */
.bridge-js-wrapper a.b-author-follow {
    /* Ton style existant devrait s'appliquer, mais on force le display */
    display: inline-block; 
}








/* =========================================
   BRIDGE VIDEO WIDGET (UNIFIED DESIGN)
   ========================================= */

/* Grille */
.bvw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.bvw-card-wrapper {
    height: 100%;
}

/* --- CARTE UNIFIÉE (Structure commune) --- */
.bvw-unified-card {
    border-radius: 20px;
    padding: 16px;       /* Padding identique pour tout le monde */
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    box-sizing: border-box;
}

.bvw-unified-card:hover {
    transform: translateY(-5px);
}

/* --- THÈME 1 : VIDÉO (Blanc) --- */
.bvw-unified-card.video-theme {
    background: #fff;
}
.bvw-unified-card.video-theme .bvw-title {
    color: var(--color-blue-primary);
}
.bvw-unified-card.video-theme .bvw-desc {
    color: #475569;
}
.bvw-unified-card.video-theme .bvw-btn {
    background: var(--color-blue-primary);
    color: #fff;
}
.bvw-unified-card.video-theme:hover .bvw-btn {
    background: var(--color-blue-80);
}

/* --- THÈME 2 : CTA (Bleu) --- */
.bvw-unified-card.cta-theme {
    background: #6393D6; /* Bleu Bridge */
}
.bvw-unified-card.cta-theme:hover {
    background: #5685c7;
}
.bvw-unified-card.cta-theme .bvw-title {
    color: #fff;
}
.bvw-unified-card.cta-theme .bvw-desc {
    color: rgba(255,255,255,0.9);
}
.bvw-unified-card.cta-theme .bvw-btn {
    background: #fff;
    color: var(--color-blue-primary);
}

/* --- ÉLÉMENTS INTERNES (Communs) --- */

/* Image (16/10 pour tout le monde) */
.bvw-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f0f0f0;
    position: relative;
    flex-shrink: 0;
}

.bvw-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit le cadre parfaitement */
    display: block;
}

/* Contenu */
.bvw-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bvw-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bvw-desc {
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bouton */
.bvw-btn {
    margin-top: auto;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: background 0.2s;
}

.bvw-btn i {
    font-size: 12px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    .bvw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bvw-grid { grid-template-columns: 1fr; }
}
















/* ---------------------------------
   8. Responsive
---------------------------------- */
@media (max-width: 768px) {
    .card-columns {
        flex-direction: column;
    }

    .card-columns.reverse {
        flex-direction: column;
    }

    .card-columns .card-image,
    .card-columns .card-text {
        width: 100%;
    }

    .video-icon-overlay {
        top: 8px;
        right: 8px;
        font-size: 16px;
    }
}