/* =====================================================
   FISHING PORTAL - Main Stylesheet
   ===================================================== */

:root {
    --primary: #0d6efd;
    --primary-dark: #0b5ed7;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --dark: #1a1a2e;
    --darker: #16213e;
    --light: #f8f9fa;
    --ocean: #006994;
    --ocean-light: #e8f4f8;
    --sand: #f5deb3;
    --forest: #2d5a27;
    
    --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.2);
    
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

/* ============================================ */
/* NAVIGATION — handled by x-sidebar in header.php */

/* HERO SECTION */
/* ============================================ */

.hero-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #006994 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '🐟';
    position: absolute;
    font-size: 20rem;
    opacity: 0.05;
    right: -5%;
    top: -20%;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-15deg);
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-section p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.hero-search {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.hero-search input {
    width: 100%;
    padding: 1rem 1.5rem;
    padding-left: 3rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    box-shadow: var(--shadow-xl);
}

.hero-search .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    font-size: 1.2rem;
}

/* ============================================ */
/* STATS BAR */
/* ============================================ */

.stats-bar {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
}

.stats-item {
    text-align: center;
    padding: 0.5rem;
}

.stats-item .number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.stats-item .label {
    font-size: 0.85rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================ */
/* CONTENT CARDS */
/* ============================================ */

.content-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.content-card .card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--ocean-light), #e0f0ff);
}

.content-card .card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-card .card-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-fishing { background: #e3f2fd; color: #1565c0; }
.badge-technique { background: #fce4ec; color: #c62828; }
.badge-equipment { background: #e8f5e9; color: #2e7d32; }
.badge-environment { background: #f3e5f5; color: #6a1b9a; }

.content-card .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

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

.content-card .card-title a:hover {
    color: var(--primary);
}

.content-card .card-text {
    color: var(--secondary);
    font-size: 0.9rem;
    flex: 1;
}

.content-card .card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--secondary);
}

.card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
}

.card-stats span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ============================================ */
/* FORUM STYLES (Reddit-style) */
/* ============================================ */

.forum-list {
    max-width: 800px;
    margin: 0 auto;
}

.forum-post {
    background: white;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.forum-post:hover {
    box-shadow: var(--shadow);
}

.forum-post .post-votes {
    text-align: center;
    min-width: 50px;
    color: var(--secondary);
}

.forum-post .post-votes .vote-count {
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
}

.forum-post .post-votes .vote-label {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.forum-post .post-content {
    flex: 1;
    min-width: 0;
}

.forum-post .post-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.forum-post .post-title a {
    color: var(--dark);
    text-decoration: none;
}

.forum-post .post-title a:hover {
    color: var(--primary);
}

.forum-post .post-meta {
    font-size: 0.8rem;
    color: var(--secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.forum-post .post-meta .badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
}

.forum-post .post-status {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--secondary);
}

.post-status .solved {
    color: var(--success);
    font-weight: 600;
}

/* ============================================ */
/* FORUM TOPIC DETAIL */
/* ============================================ */

.topic-header {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.topic-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

.topic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--secondary);
    margin-top: 0.5rem;
}

.reply-card {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.reply-card.solution {
    border: 2px solid var(--success);
    background: #f0fff4;
}

.reply-card .solution-badge {
    position: absolute;
    top: -1px;
    right: 1rem;
    background: var(--success);
    color: white;
    padding: 0.2rem 0.8rem;
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.reply-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.reply-header .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ocean);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.reply-header .author-info {
    font-size: 0.85rem;
}

.reply-header .author-name {
    font-weight: 600;
    color: var(--dark);
}

.reply-body {
    font-size: 0.95rem;
    line-height: 1.7;
}

.reply-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.reply-actions button {
    background: none;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.reply-actions button:hover {
    background: #f0f0f0;
    color: var(--primary);
}

.reply-actions .btn-solution {
    color: var(--success);
}

.reply-actions .btn-solution:hover {
    background: #e8f5e9;
}

/* ============================================ */
/* FORUM FILTER BAR */
/* ============================================ */

.filter-bar {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-bar .filter-btn {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    background: white;
    color: var(--secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-bar .filter-btn:hover,
.filter-bar .filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.filter-bar .filter-btn i {
    margin-right: 0.3rem;
}

/* ============================================ */
/* SECTION HEADERS */
/* ============================================ */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}

.section-header .view-all {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.section-header .view-all:hover {
    text-decoration: underline;
}

/* ============================================ */
/* FORMS */
/* ============================================ */

.form-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    max-width: 700px;
    margin: 0 auto;
}

.form-card .form-label {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.3rem;
}

.form-card .form-control,
.form-card .form-select {
    border: 1px solid #dee2e6;
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

.form-card textarea.form-control {
    min-height: 120px;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.step-indicator {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ecef;
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.step-dot.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.step-dot.completed {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/* ============================================ */
/* AUTOCOMPLETE */
/* ============================================ */

.autocomplete-wrapper {
    position: relative;
}

.autocomplete-wrapper .form-control {
    padding-right: 2rem;
}

.autocomplete-wrapper .spinner {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-dropdown .item {
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.autocomplete-dropdown .item:hover {
    background: #f0f2f5;
}

.autocomplete-dropdown .item .create-new {
    color: var(--primary);
    font-weight: 600;
}

/* ============================================ */
/* BADGES PROFILE */
/* ============================================ */

.badge-card {
    background: white;
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.badge-card:hover {
    transform: scale(1.05);
}

.badge-card .badge-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.badge-card .badge-name {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================ */
/* SIDEBAR */
/* ============================================ */

.sidebar-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    color: #1e293b;
}

.sidebar-card h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ocean-light);
}

.sidebar-links {
    list-style: none;
}

.sidebar-links li {
    margin-bottom: 0.3rem;
}

.sidebar-links a {
    display: block;
    padding: 0.4rem 0.6rem;
    color: var(--secondary);
    text-decoration: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.sidebar-links a:hover {
    background: var(--ocean-light);
    color: var(--ocean);
}

/* ============================================ */
/* PROFILE */
/* ============================================ */

.profile-header {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ocean), var(--primary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-info h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-stats {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.profile-stats .stat {
    text-align: center;
}

.profile-stats .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

.profile-stats .stat-label {
    font-size: 0.8rem;
    color: var(--secondary);
}

/* ============================================ */
/* RATINGS */
/* ============================================ */

.rating-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-stars {
    color: var(--warning);
    font-size: 1.1rem;
}

.rating-value {
    font-weight: 700;
    color: var(--dark);
    font-size: 1.1rem;
}

.rating-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 0.3rem 0;
}

.rating-bar .fill {
    height: 100%;
    background: var(--warning);
    border-radius: 4px;
    transition: width 0.5s;
}

/* ============================================ */
/* BUTTONS */
/* ============================================ */

.btn-primary {
    background: var(--primary);
    border: none;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-outline-primary {
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: white;
}

.btn-success {
    background: var(--success);
    border: none;
}

.btn-ask {
    border-radius: 50px;
    padding: 0.6rem 2rem;
    font-weight: 600;
}

/* ============================================ */
/* SECTION TABS */
/* ============================================ */

.section-tabs {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.section-tabs .nav-tabs {
    border-bottom: 2px solid #f0f0f0;
    padding: 0 1rem;
}

.section-tabs .nav-link {
    border: none;
    color: var(--secondary);
    font-weight: 600;
    padding: 1rem 1.25rem;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.section-tabs .nav-link:hover {
    color: var(--primary);
    background: transparent;
}

.section-tabs .nav-link.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    background: transparent;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */

@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 1.8rem;
    }
    
    .hero-section p {
        font-size: 1rem;
    }
    
    .stats-item .number {
        font-size: 1.2rem;
    }
    
    .forum-post {
        flex-direction: column;
    }
    
    .forum-post .post-votes {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-stats {
        justify-content: center;
    }
    
    .filter-bar {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-section h1 {
        font-size: 1.4rem;
    }
    
    .stats-bar .stats-item {
        padding: 0.3rem;
    }
    
    .content-card .card-image {
        height: 140px;
    }
}

/* ============================================ */
/* ANIMATIONS */
/* ============================================ */

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

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

.slide-up {
    animation: slideUp 0.4s ease-out;
}

/* ============================================ */
/* UTILITY */
/* ============================================ */

.text-ocean { color: var(--ocean); }
.bg-ocean { background: var(--ocean); }
.bg-ocean-light { background: var(--ocean-light); }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--secondary); }

.empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.empty-state .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state p {
    color: var(--secondary);
    font-size: 1.1rem;
}

.avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ocean);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.avatar-md {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ocean);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ============================================ */
/* INSTAGRAM-STYLE COMMENT SYSTEM (igc) */
/* ============================================ */

/* Container */
.igc-thread { display: flex; flex-direction: column; gap: 0; }

/* Single comment row */
.igc-comment { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.igc-comment:not(:last-child) { border-bottom: 1px solid #f0f0f0; }

/* Avatar */
.igc-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white; font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 2px 6px rgba(99,102,241,.25);
}
.igc-avatar.sm { width: 28px; height: 28px; font-size: .7rem; }

/* Content */
.igc-content { flex: 1; min-width: 0; }
.igc-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.igc-username { font-weight: 700; font-size: .88rem; color: #111; }
.igc-time { font-size: .75rem; color: #aaa; }
.igc-text { font-size: .9rem; color: #222; line-height: 1.5; margin-top: 3px; word-break: break-word; }

/* Action row */
.igc-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.igc-btn {
    background: none; border: none; padding: 0;
    font-size: .78rem; font-weight: 600; color: #888;
    cursor: pointer; display: flex; align-items: center; gap: 4px;
    transition: color .15s;
}
.igc-btn:hover { color: #111; }

/* Heart button */
.igc-heart { margin-left: auto; flex-shrink: 0; cursor: pointer; transition: transform .15s; }
.igc-heart svg { width: 18px; height: 18px; fill: none; stroke: #aaa; stroke-width: 2; transition: all .15s; }
.igc-heart.liked svg { fill: #e1306c; stroke: #e1306c; }
.igc-heart:hover { transform: scale(1.2); }
.igc-heart-count { font-size: .75rem; color: #888; font-weight: 600; min-width: 16px; text-align: center; }

/* Toggle replies link */
.igc-toggle-replies {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; color: #555;
    margin-top: 6px; margin-left: 50px; cursor: pointer;
    width: fit-content;
}
.igc-toggle-replies:hover { color: #111; }
.igc-toggle-replies::before {
    content: ''; display: block;
    width: 24px; height: 1px; background: #999;
}

/* Replies block */
.igc-replies { margin-left: 50px; border-left: 2px solid #efefef; padding-left: 12px; margin-top: 4px; display: none; }
.igc-replies.open { display: block; }

/* Inline reply form */
.igc-reply-form-wrap { margin-left: 50px; margin-top: 6px; display: none; }
.igc-reply-form-wrap.open { display: flex; gap: 8px; align-items: center; }
.igc-reply-input {
    flex: 1; border: none; border-bottom: 1.5px solid #e0e0e0;
    outline: none; font-size: .88rem; padding: 4px 0;
    background: transparent; color: #111;
    transition: border-color .2s;
}
.igc-reply-input:focus { border-bottom-color: #6366f1; }
.igc-reply-submit {
    background: none; border: none; color: #6366f1;
    font-weight: 700; font-size: .82rem; cursor: pointer;
    padding: 0 4px; white-space: nowrap;
}
.igc-reply-submit:hover { color: #4f46e5; }

/* Main comment input */
.igc-input-wrap {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 0 0; border-top: 1px solid #f0f0f0; margin-top: 12px;
}
.igc-main-input {
    flex: 1; border: none; border-bottom: 1.5px solid #e0e0e0;
    outline: none; font-size: .9rem; padding: 6px 0;
    background: transparent; resize: none; min-height: 36px;
    color: #111; transition: border-color .2s; font-family: inherit;
}
.igc-main-input:focus { border-bottom-color: #6366f1; }
.igc-main-submit {
    background: none; border: none;
    color: #6366f1; font-weight: 700; font-size: .88rem;
    cursor: pointer; padding: 4px 0; white-space: nowrap;
    opacity: .5; transition: opacity .2s;
}
.igc-main-input:not(:placeholder-shown) ~ .igc-main-submit,
.igc-main-submit:hover { opacity: 1; }

/* Connect CTA */
.igc-login-cta {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; background: #fafafa; border-radius: 12px;
    margin-top: 12px;
}
.igc-login-cta a { color: #6366f1; font-weight: 700; text-decoration: none; }
.igc-login-cta a:hover { text-decoration: underline; }

/* Section header */
.igc-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0;
}
.igc-section-title { font-size: 1rem; font-weight: 800; color: #111; }
.igc-count { font-size: .82rem; color: #888; font-weight: 600; }

/* Heart pop animation */
@keyframes heartPop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
.igc-heart.pop { animation: heartPop .3s ease; }

/* Media in comment */
.igc-media-grid { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.igc-media-grid img, .igc-media-grid video {
    width: 120px; height: 90px; object-fit: cover;
    border-radius: 10px; border: 1px solid #eee; cursor: pointer;
}

/* ============================================ */
/* PREMIUM FORUM UI */
/* ============================================ */

/* Forum Container */
.forum-container {
    background: #fdfdfd;
    min-height: calc(100vh - 200px);
}

/* Hero Section Refined */
.forum-hero {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    padding: 3rem 0;
    color: white;
    position: relative;
    overflow: hidden;
}
.forum-hero::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.forum-hero-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; }
.forum-hero-subtitle { font-size: 1.1rem; color: #cbd5e1; margin-bottom: 25px; }

/* Filter Bar */
.forum-filter-bar {
    background: white;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
    margin-top: -30px; /* Overlap hero */
    position: relative;
    z-index: 10;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.forum-filter-bar .form-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    background-color: #f8fafc;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.forum-filter-bar .form-select:hover { border-color: #cbd5e1; background-color: white; }

/* Topic List Cards */
.forum-list-wrapper { margin-top: 2rem; }
.topic-card {
    display: flex;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    margin-bottom: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    gap: 20px;
}
.topic-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    border-color: #cbd5e1;
}

/* Topic Stats (Left Side) */
.topic-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding-right: 20px;
    border-right: 1px solid #f1f5f9;
}
.topic-stat-box { text-align: center; margin-bottom: 10px; }
.topic-stat-box:last-child { margin-bottom: 0; }
.topic-stat-num { font-size: 1.1rem; font-weight: 700; color: #1e293b; line-height: 1; }
.topic-stat-label { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.topic-stat-box.highlight { color: #10b981; }
.topic-stat-box.highlight .topic-stat-num, .topic-stat-box.highlight .topic-stat-label { color: inherit; }

/* Topic Content (Right Side) */
.topic-content { flex: 1; min-width: 0; }
.topic-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.topic-title { 
    font-size: 1.15rem; font-weight: 700; color: #0f172a; 
    margin: 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-card:hover .topic-title { color: #4f46e5; }
.topic-meta { font-size: 0.85rem; color: #64748b; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topic-author { font-weight: 600; color: #334155; }
.topic-avatar { width: 24px; height: 24px; border-radius: 50%; background: #4f46e5; color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; margin-right: 6px; }

/* Topic Tags */
.topic-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.topic-tag { 
    font-size: 0.7rem; font-weight: 600; padding: 4px 10px; 
    border-radius: 20px; background: #f1f5f9; color: #475569;
    border: 1px solid #e2e8f0;
}
.topic-tag.type { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.topic-tag.tech { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.topic-tag.env { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* Topic Page Details */
.topic-main-post {
    background: white; border-radius: 12px; border: 1px solid #e2e8f0;
    padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.topic-main-header { display: flex; gap: 16px; margin-bottom: 20px; align-items: center; }
.topic-main-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
.topic-main-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.topic-main-body { font-size: 1.05rem; line-height: 1.6; color: #334155; }

/* Sidebar */
.forum-sidebar .sidebar-card {
    background: white; border-radius: 12px; border: 1px solid #e2e8f0;
    padding: 20px; margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    color: #1e293b;
}
.forum-sidebar h5 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9; }
.forum-sidebar ul li { margin-bottom: 10px; }
.forum-sidebar ul li a { color: #475569; font-weight: 500; font-size: 0.9rem; text-decoration: none; transition: color 0.2s; }
.forum-sidebar ul li a:hover { color: #4f46e5; }

/* ============================================ */
/* PREMIUM TEST CARDS */
/* ============================================ */
.test-premium-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid #f1f5f9;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-decoration: none;
}
.test-premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}
.test-premium-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b, #334155);
    display: flex; align-items: center; justify-content: center;
}
.test-premium-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.test-premium-card:hover .test-premium-image-wrapper img {
    transform: scale(1.05);
}
.test-premium-score {
    position: absolute;
    bottom: 12px; right: 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.test-premium-score i { color: #fbbf24; font-size: 0.9rem; }
.test-premium-cat {
    position: absolute;
    top: 12px; left: 12px;
    background: #4f46e5;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(79,70,229,0.3);
}
.test-premium-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.test-premium-brand {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.test-premium-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.test-premium-card:hover .test-premium-title {
    color: #4f46e5;
}
.test-premium-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}
.test-premium-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #1e293b;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: bold;
}
.test-premium-author {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

/* ============================================ */
/* FACEBOOK STYLE FEED (FORUM) */
/* ============================================ */
.fb-feed-container {
    background-color: #f0f2f5;
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: 40px;
}
.fb-main-col {
    max-width: 680px;
    margin: 0 auto;
}
/* Composer */
.fb-composer {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.fb-composer-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4e6eb;
}
.fb-composer-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #e4e6eb;
    color: #050505;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.1rem;
}
.fb-composer-input {
    flex: 1;
    background: #f0f2f5;
    border-radius: 20px;
    padding: 10px 16px;
    color: #65676b;
    cursor: pointer;
    transition: background 0.2s;
}
.fb-composer-input:hover { background: #e4e6eb; }
.fb-composer-bottom {
    display: flex;
    justify-content: space-around;
    padding-top: 8px;
}
.fb-composer-action {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 8px;
    color: #65676b; font-weight: 600; font-size: 0.95rem;
    cursor: pointer; transition: background 0.2s;
    text-decoration: none; flex: 1; justify-content: center;
}
.fb-composer-action:hover { background: #f2f2f2; color: #65676b; }

/* Post */
.fb-post {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 16px;
    padding-top: 12px;
    display: flex; flex-direction: column;
}
.fb-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 12px;
}
.fb-post-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #e4e6eb;
    color: #050505;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.1rem;
}
.fb-post-author-name {
    font-weight: 600; color: #050505;
    text-decoration: none; font-size: 0.95rem;
}
.fb-post-author-name:hover { text-decoration: underline; color: #050505; }
.fb-post-time {
    font-size: 0.8rem; color: #65676b;
    display: flex; align-items: center; gap: 4px;
}
.fb-post-tags {
    margin-left: auto; display: flex; gap: 6px;
}
.fb-post-content {
    padding: 0 16px 12px;
}
.fb-post-title {
    font-size: 1.15rem; font-weight: 700; color: #050505;
    margin-bottom: 8px; line-height: 1.3;
}
.fb-post-text {
    font-size: 0.95rem; color: #050505;
    line-height: 1.5;
    white-space: pre-wrap;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-post-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-top: 1px solid #e4e6eb; border-bottom: 1px solid #e4e6eb;
}
.fb-post-stats {
    padding: 10px 16px;
    display: flex; justify-content: space-between;
    color: #65676b; font-size: 0.95rem;
    border-bottom: 1px solid #ced0d4;
    margin: 0 16px;
}
.fb-post-actions {
    display: flex;
    padding: 4px 16px;
}
.fb-action-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 0; border-radius: 4px;
    color: #65676b; font-weight: 600; font-size: 0.95rem;
    background: transparent; border: none; cursor: pointer; text-decoration: none;
}
.fb-action-btn:hover { background: #f2f2f2; color: #65676b; }
.fb-action-btn i { font-size: 1.2rem; }

/* ── Bouton CTA "Voir la discussion" (cartes) ── */
.post-read-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    background-color: #fff7ed;
    border: 1px solid #ffedd5;
    border-radius: 10px;
    color: #ea580c;
    font-weight: 600; font-size: 0.9rem; text-align: left;
    cursor: pointer; text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.post-read-btn:hover {
    background-color: #ffedd5;
    border-color: #fed7aa;
    transform: translateY(-1px);
}
.post-read-btn:active { transform: translateY(0); }
.post-read-btn i { pointer-events: none; }
.post-read-arrow { margin-left: auto; transition: transform 0.2s; }
.post-read-btn:hover .post-read-arrow { transform: translateX(4px); }

/* =====================================================
   CARTE POST UNIFIÉE (index / forum / guides / tests)
   ===================================================== */
.post-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: opacity 0.2s;
}
.post-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.author-block { display: flex; align-items: center; gap: 10px; }
.author-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #1877f2, #2851a3);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1rem;
}
.author-name { font-weight: 600; color: #111827; text-decoration: none; font-size: 0.95rem; }
.author-name:hover { text-decoration: underline; }
.post-meta { color: #6b7280; font-size: 0.8rem; }
.post-body { padding: 0 16px 12px; }
.post-title { font-size: 1.1rem; font-weight: 700; color: #111827; text-decoration: none; display: block; margin-bottom: 6px; }
.post-title:hover { color: #1877f2; }
.post-excerpt { font-size: 0.95rem; color: #1f2937; line-height: 1.5; margin-bottom: 10px; }
.post-details { padding: 12px 16px 14px; }
.post-body .post-tags { margin-top: 8px; }
.post-rating {
    display: inline-flex; align-items: center; gap: 6px;
    background-color: #fffbeb; border: 1px solid #fef3c7; color: #b45309;
    font-weight: 700; font-size: 0.8rem; padding: 4px 10px; border-radius: 8px;
    margin-bottom: 10px;
}
.post-rating i { color: #f59e0b; }
.post-media { width: 100%; max-height: 400px; object-fit: cover; border-top: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5; }
video.post-media { background: #000; }
.post-footer { padding: 8px 16px; display: flex; justify-content: space-between; border-top: 1px solid #f0f2f5; }
.action-btn {
    display: flex; align-items: center; gap: 8px;
    color: #6b7280; font-weight: 600; font-size: 0.9rem;
    padding: 6px 12px; border-radius: 6px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.action-btn:hover { background: rgba(0, 0, 0, 0.05); color: #111827; }
.action-btn.liked { color: #0ea5e9; }
.like-count { display: inline-block; min-width: 8px; }

/* =====================================================
   SOCIAL NETWORK — COMMENT MANAGER (Style X/Instagram)
   ===================================================== */

/* Wrap principal */
.igc-wrap { padding: 0 0 16px; }

/* Header section */
.igc-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px 8px; border-bottom: 1px solid #eef0f3;
}
.igc-section-title { font-weight: 700; font-size: 0.95rem; color: #1c1e21; }
.igc-sort-btns { display: flex; gap: 6px; }
.igc-sort-btn {
    padding: 3px 12px; border-radius: 20px; border: 1px solid #ddd;
    background: transparent; font-size: 0.78rem; cursor: pointer; color: #65676b;
    transition: all .15s;
}
.igc-sort-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.igc-sort-btn:hover:not(.active) { background: #f0f2f5; }

/* Thread (liste commentaires) */
.igc-thread { padding: 4px 0 0; }

/* Commentaire individuel */
.igc-comment {
    display: flex; gap: 10px; padding: 7px 16px;
    animation: igcFadeIn .2s ease;
}
.igc-comment--new { background: rgba(99,102,241,.04); }
.igc-comment--best { background: rgba(16,185,129,.05); }
.igc-comment--best > .igc-content { border-left: 3px solid #10b981; padding-left: 10px; }

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

/* Avatar */
.igc-avatar {
    width: 34px; height: 34px; min-width: 34px;
    border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}

/* Content */
.igc-content { flex: 1; min-width: 0; }

/* Best badge */
.igc-best-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #10b981; color: #fff; font-size: 0.7rem;
    font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-bottom: 4px;
}

/* Header commentaire */
.igc-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.igc-username { font-weight: 700; font-size: 0.88rem; color: #1c1e21; }
.igc-verified { color: #1d9bf0; vertical-align: middle; }
.igc-level { font-size: 0.7rem; background: #eef0f3; color: #65676b; padding: 1px 7px; border-radius: 10px; }
.igc-time { font-size: 0.75rem; color: #9ca3af; }

/* Texte */
.igc-text { font-size: 0.92rem; color: #1c1e21; line-height: 1.5; word-break: break-word; }

/* Actions (like, dislike, net score, reply) */
.igc-actions { display: flex; align-items: center; gap: 12px; margin-top: 5px; flex-wrap: wrap; }
.igc-like-btn, .igc-dislike-btn, .igc-pick-btn {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-size: 0.8rem; color: #65676b; padding: 3px 0;
    transition: all .15s; font-weight: 600;
}
.igc-like-btn:hover, .igc-like-btn.liked { color: #6366f1; }
.igc-like-btn.liked svg { fill: #6366f1; stroke: none; }

.igc-dislike-btn:hover, .igc-dislike-btn.disliked { color: #ef4444; }
.igc-dislike-btn.disliked svg { fill: #ef4444; stroke: none; }
.igc-fish-icon { transition: transform .18s ease, stroke .15s; }
.igc-like-btn:hover .igc-fish-icon { transform: rotate(10deg) scale(1.12); }
.igc-like-btn.liked .igc-fish-icon { transform: scale(1.05); }
.igc-dislike-btn:hover .igc-fish-icon { transform: rotate(-10deg) scale(1.12); }
.igc-dislike-btn.disliked .igc-fish-icon { transform: scale(1.05); }

.igc-like-count, .igc-dislike-count { font-size: 0.78rem; }
.igc-net-score { font-size: 0.8rem; font-weight: 700; margin-left: 2px; margin-right: 2px; }

.igc-reply-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.8rem; color: #65676b; font-weight: 600;
    padding: 3px 0; transition: color .15s;
}
.igc-reply-btn:hover { color: #6366f1; }

/* Edit / Delete buttons (author or admin) */
.igc-owner-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: 2px; }
.igc-edit-btn, .igc-delete-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.8rem; color: #65676b; font-weight: 600;
    padding: 3px 0; transition: color .15s;
}
.igc-edit-btn:hover { color: #6366f1; }
.igc-delete-btn:hover { color: #ef4444; }

.igc-edited { font-size: 0.72rem; color: #9ca3af; font-weight: 400; margin-left: 2px; }

.igc-edit-form {
    margin: 8px 0;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.igc-edit-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 240px;
    resize: vertical;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    color: #1c1e21;
}
.igc-edit-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.igc-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.igc-edit-save-btn {
    background: #6366f1; color: #fff; border: none; border-radius: 8px;
    font-size: 0.82rem; font-weight: 700; padding: 6px 16px; cursor: pointer; transition: background .15s;
}
.igc-edit-save-btn:hover { background: #4f46e5; }
.igc-edit-save-btn:disabled { opacity: .6; cursor: not-allowed; }
.igc-edit-cancel-btn {
    background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; padding: 6px 14px; cursor: pointer; transition: background .15s;
}
.igc-edit-cancel-btn:hover { background: #f3f4f6; }

@media (max-width: 576px) {
    .igc-like-label, .igc-dislike-label { display: none; }
    .igc-actions { gap: 10px; }
    .igc-like-btn, .igc-dislike-btn, .igc-reply-btn, .igc-pick-btn { padding: 4px 2px; }
    .igc-edit-btn, .igc-delete-btn { padding: 4px 2px; }
    .igc-like-btn svg { width: 16px; height: 16px; }
    .igc-fish-icon { width: 18px; height: 18px; }
    .igc-net-score { font-size: 0.85rem; margin-left: 4px; margin-right: 4px; }
}

/* Pick buttons (Admin / Author) */
.igc-pick-btn { color: #64748b; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
.igc-pick-btn:hover { background: #f1f5f9; color: #334155; }
.igc-pick-btn.picked { font-weight: 700; }
.igc-pick-btn--author.picked { color: #10b981; background: #ecfdf5; border-color: #d1fae5; }
.igc-pick-btn--admin.picked { color: #f59e0b; background: #fffbeb; border-color: #fef3c7; }

/* Pick Badges & Highlights */
.igc-pick-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
    border-radius: 12px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.igc-pick-badge--admin { background: #fef3c7; color: #d97706; }
.igc-pick-badge--author { background: #ecfdf5; color: #059669; }
.igc-pick-badge--community { background: #e0e7ff; color: #4f46e5; }

.igc-comment--admin-pick { border-left: 3px solid #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, transparent 50px); }
.igc-comment--author-pick { border-left: 3px solid #10b981; background: linear-gradient(90deg, #ecfdf5 0%, transparent 50px); }
.igc-comment--community-pick { border-left: 3px solid #6366f1; background: linear-gradient(90deg, #e0e7ff 0%, transparent 50px); }


/* Load replies */
.igc-load-replies-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-size: 0.8rem; color: #6366f1; font-weight: 600;
    padding: 4px 0; margin-top: 4px;
}
.igc-load-replies-btn:hover { text-decoration: underline; }

/* Nested replies */
.igc-nested-replies {
    margin-top: 6px; padding-left: 0;
    border-left: 2px solid #e5e7eb;
    padding-left: 12px;
}

/* Médias dans commentaire */
.igc-comment-media { margin-top: 8px; }
.igc-comment-media img, .igc-comment-media video {
    border-radius: 12px; max-width: 100%; max-height: 320px;
    cursor: zoom-in; object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Load more */
.igc-load-more-wrap { display: flex; justify-content: center; padding: 10px 16px; }
.igc-load-more-btn {
    background: #f0f2f5; border: none; border-radius: 20px;
    padding: 8px 20px; font-size: 0.85rem; font-weight: 600;
    color: #6366f1; cursor: pointer; transition: all .15s;
}
.igc-load-more-btn:hover { background: #e8eaee; }

/* Empty / Error */
.igc-empty { text-align: center; padding: 24px 16px; color: #9ca3af; }
.igc-empty span { font-size: 2rem; display: block; margin-bottom: 8px; }
.igc-empty p { font-size: 0.9rem; }
.igc-error { text-align:center; padding:16px; color: #ef4444; font-size:.9rem; }
.igc-error button { margin-left:8px; padding:4px 12px; border:none; background:#ef4444; color:#fff; border-radius:8px; cursor:pointer; }
.igc-error-small { font-size:.8rem; color:#ef4444; padding:4px 0; }
.igc-no-replies { font-size:.8rem; color:#9ca3af; padding:4px 0; }

/* Reply indicator */
.igc-reply-indicator {
    display: flex; align-items: center; justify-content: space-between;
    background: #f0f2f5; border-radius: 8px; padding: 6px 12px;
    margin-bottom: 8px; font-size: 0.82rem; color: #6366f1;
}
.igc-cancel-reply { background:none; border:none; cursor:pointer; color:#9ca3af; font-size:1.1rem; padding:0 4px; }

/* Login CTA */
.igc-login-cta {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; font-size: 0.9rem; color: #65676b;
    border-top: 1px solid #eef0f3;
}
.igc-login-cta a { color: #6366f1; font-weight: 600; }

/* =====================================================
   COMPOSER X/INSTAGRAM STYLE
   ===================================================== */

.igc-composer { padding: 10px 16px 8px; border-top: 1px solid #eef0f3; }

/* Média preview (1 image OU 1 vidéo) */
.igc-media-preview-wrap {
    background: #f9fafb; border-radius: 14px; padding: 10px;
    margin-bottom: 8px; border: 1px solid #e5e7eb;
}
.igc-media-preview-inner {
    position: relative; display: inline-block; max-width: 100%;
    border-radius: 12px; overflow: hidden;
    background: #000;
}
.igc-preview-thumb {
    max-width: 100%; max-height: 260px;
    width: auto; height: auto; min-width: 120px; min-height: 90px;
    object-fit: cover; border-radius: 12px; display: block; margin: 0 auto;
}
.igc-preview-vid { max-height: 220px; }
.igc-preview-type {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: rgba(17, 24, 39, .72); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
    backdrop-filter: blur(4px); pointer-events: none;
}
.igc-remove-media {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(17, 24, 39, .72); color: #fff; border: 2px solid rgba(255,255,255,.6);
    font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); transition: background .15s, transform .15s;
}
.igc-remove-media:hover { background: #ef4444; transform: scale(1.08); }
.igc-preview-hint {
    display: block; margin-top: 6px; text-align: center;
    font-size: 0.7rem; color: #9ca3af;
}
.igc-media-btn:disabled { color: #c7c9f2; cursor: not-allowed; }

/* Progress bar (fine, style Instagram) */
.igc-upload-progress {
    height: 3px; background: #e5e7eb; border-radius: 2px; margin-top: 6px;
    overflow: hidden;
}
.igc-upload-progress-bar {
    height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px; transition: width .2s linear;
    animation: igcPulse 1.5s ease infinite;
}
@keyframes igcPulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* Row compositeur */
.igc-composer-row { display: flex; gap: 10px; align-items: flex-start; }
.igc-composer-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
    margin-top: 2px;
}
.igc-composer-input-wrap { flex: 1; min-width: 0; }

/* Textarea */
.igc-composer-textarea {
    width: 100%; background: #f0f2f5; border: none; border-radius: 20px;
    padding: 9px 16px; font-size: 0.92rem; font-family: inherit; color: #1c1e21;
    resize: none; overflow: hidden; outline: none; line-height: 1.5;
    transition: border-radius .2s;
}
.igc-composer-textarea:focus {
    border-radius: 14px; background: #e8eaee;
}
.igc-composer-textarea::placeholder { color: #9ca3af; }

/* Actions sous le textarea */
.igc-composer-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 4px 0;
}
.igc-composer-actions-left { display: flex; gap: 8px; }
.igc-composer-actions-right { display: flex; align-items: center; gap: 10px; }

/* Bouton média (caméra) */
.igc-media-btn {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: #6366f1; border-radius: 8px; transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.igc-media-btn:hover { background: rgba(99,102,241,.1); }

/* Compteur caractères */
.igc-char-count { font-size: 0.75rem; color: #9ca3af; }

/* Bouton Publier */
.igc-submit-btn {
    background: #6366f1; color: #fff; border: none; border-radius: 20px;
    padding: 6px 18px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
    transition: all .15s; white-space: nowrap;
}
.igc-submit-btn:hover:not(:disabled) { background: #4f46e5; transform: translateY(-1px); }
.igc-submit-btn:disabled { background: #c7c9f2; cursor: not-allowed; transform: none; }

/* Spinner bouton */
.igc-spinner {
    display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff; border-radius: 50%; animation: igcSpin .6s linear infinite;
}
@keyframes igcSpin { to { transform: rotate(360deg); } }

/* =====================================================
   SKELETON LOADING
   ===================================================== */

.igc-skeleton { display:flex; gap:10px; padding:10px 16px; }
.igc-skel-avatar { width:34px; height:34px; border-radius:50%; background:#e5e7eb; flex-shrink:0; animation: igcShimmer 1.5s infinite; }
.igc-skel-lines { flex:1; display:flex; flex-direction:column; gap:6px; padding-top:4px; }
.igc-skel-line { height:12px; background:#e5e7eb; border-radius:6px; animation:igcShimmer 1.5s infinite; }
.igc-skel-line.short { width:35%; }
.igc-skel-line.medium { width:65%; }

@keyframes igcShimmer {
    0%   { background-position: -200% 0; background: linear-gradient(90deg, #e5e7eb 25%, #f0f2f5 50%, #e5e7eb 75%); background-size: 200%; }
    100% { background-position: 200% 0; background: linear-gradient(90deg, #e5e7eb 25%, #f0f2f5 50%, #e5e7eb 75%); background-size: 200%; }
}

/* Feed skeleton */
.feed-skeleton { background:#fff; border-radius:12px; margin-bottom:12px; overflow:hidden; border:1px solid #eef0f3; }
.feed-sk-header { display:flex; gap:10px; padding:16px 16px 0; }
.feed-sk-avatar { width:40px; height:40px; border-radius:50%; background:#e5e7eb; flex-shrink:0; animation:igcShimmer 1.5s infinite; }
.feed-sk-lines { flex:1; display:flex; flex-direction:column; gap:6px; }
.feed-sk-line { height:12px; background:#e5e7eb; border-radius:6px; animation:igcShimmer 1.5s infinite; }
.feed-sk-line.short { width:40%; }
.feed-sk-line.medium { width:70%; }
.feed-sk-image { height:200px; background:#e5e7eb; margin:12px 0 0; animation:igcShimmer 1.5s infinite; }

/* =====================================================
   FEED CARDS AMÉLIORÉES
   ===================================================== */

.feed-card { background:#fff; border-radius:16px; border:1px solid rgba(226,232,240,.8); margin-bottom:12px; overflow:hidden; transition: box-shadow .2s, transform .2s; }
.feed-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.feed-card-link { display:block; text-decoration:none; color:inherit; }
.feed-card-image-wrap { overflow:hidden; max-height:280px; }
.feed-card-image { width:100%; height:220px; object-fit:cover; transition:transform .3s; background:#f0f2f5; }
.feed-card-image.lazy-img { filter:blur(4px); }
.feed-card-image.loaded { filter:blur(0); }
.feed-card:hover .feed-card-image { transform:scale(1.02); }
.feed-card-body { padding:14px 16px 12px; }
.feed-card-header { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.feed-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem; flex-shrink:0; }
.feed-author-info { flex:1; min-width:0; }
.feed-author-name { font-weight:700; font-size:.88rem; color:#1c1e21; display:flex; align-items:center; gap:4px; }
.feed-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.feed-type-badge { font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:10px; }
.feed-meta-item { font-size:.75rem; color:#9ca3af; }
.feed-card-title { font-size:1.05rem; font-weight:700; color:#111827; margin-bottom:6px; line-height:1.35; }
.feed-card-excerpt { font-size:.88rem; color:#6b7280; line-height:1.5; margin-bottom:8px; }
.feed-rating { display:inline-flex; align-items:center; gap:4px; font-size:.8rem; color:#f59e0b; margin-bottom:8px; }
.feed-rating span { color:#374151; font-weight:600; }
.feed-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid #f3f4f6; }
.feed-stats { display:flex; gap:14px; align-items:center; }
.feed-like-btn { display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color:#65676b; font-size:.85rem; font-weight:600; padding:4px 8px; border-radius:8px; transition:all .15s; }
.feed-like-btn:hover, .feed-like-btn.liked { color:#6366f1; background:rgba(99,102,241,.08); }
.feed-like-btn.liked svg { fill:#6366f1; }
.feed-like-count { font-size:.82rem; }
.feed-stat-item { display:flex; align-items:center; gap:5px; font-size:.82rem; color:#9ca3af; }

/* Badge nouveaux posts */
.feed-new-badge {
    display:block; width:100%; text-align:center; padding:10px;
    background:linear-gradient(90deg,#6366f1,#8b5cf6); color:#fff;
    border:none; border-radius:12px; font-weight:700; cursor:pointer;
    margin-bottom:12px; animation:igcBounce .6s ease;
    font-size:.9rem;
}
@keyframes igcBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

/* Feed loading / empty / error */
.feed-loading { display:flex; justify-content:center; padding:20px; }
.feed-spinner { width:28px; height:28px; border:3px solid #e5e7eb; border-top-color:#6366f1; border-radius:50%; animation:igcSpin .7s linear infinite; }
.feed-empty { text-align:center; padding:40px 20px; color:#9ca3af; }
.feed-empty-icon { font-size:3rem; margin-bottom:12px; }
.feed-empty h3 { font-size:1.1rem; color:#374151; margin-bottom:6px; }
.feed-error { display:flex; align-items:center; gap:10px; padding:16px; background:#fef2f2; border-radius:12px; margin-bottom:12px; font-size:.9rem; color:#ef4444; }
.feed-error button { padding:6px 14px; background:#ef4444; color:#fff; border:none; border-radius:8px; cursor:pointer; }

/* =====================================================
   NOTIFICATIONS
   ===================================================== */

/* Panneau (Instagram/Meta style slide-out drawer) */
#notif-panel {
    position: fixed;
    top: 0;
    left: var(--sb-w, 275px);
    width: 380px;
    height: 100vh;
    max-height: none;
    background: #ffffff;
    border-radius: 0 20px 20px 0;
    box-shadow: 12px 0 40px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1040; /* Just behind sidebar (1050) */
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    border-right: 1px solid rgba(0,0,0,0.04);
}
#notif-panel.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

/* Tablet (Icon-only sidebar) */
@media (min-width: 768px) and (max-width: 1279px) {
    #notif-panel { left: var(--sb-w-sm, 72px); }
}

/* Mobile (Bottom bar) */
@media (max-width: 767px) {
    #notif-panel {
        left: 0;
        top: auto;
        bottom: 62px; /* Just above the bottom nav */
        width: 100%;
        height: 75vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
        border-right: none;
        transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s ease;
    }
    #notif-panel.open {
        transform: translateY(0);
    }
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;
}
.notif-panel-header h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}
#notif-read-all {
    background: rgba(14, 165, 233, 0.1);
    border: none;
    border-radius: 50px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #0ea5e9;
    font-weight: 700;
    transition: all 0.2s;
}
#notif-read-all:hover {
    background: rgba(14, 165, 233, 0.2);
    color: #0284c7;
}
.notif-list {
    flex: 1;
    overflow-y: auto;
    background: #f8fafc;
}
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Item notification */
.notif-item {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: background 0.2s;
    background: #ffffff;
    align-items: flex-start;
}
.notif-item:hover { background: #f1f5f9; }
.notif-item.unread {
    background: #f0f9ff;
    position: relative;
}
.notif-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #0ea5e9;
}
.notif-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #2dd4bf);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(14,165,233,0.2);
}
.notif-content-wrap {
    flex: 1;
    min-width: 0;
}
.notif-text {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.4;
    margin-bottom: 4px;
}
.notif-text strong {
    color: #0f172a;
    font-weight: 700;
}
.notif-time {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Empty State */
.notif-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.notif-empty i { font-size: 3rem; color: #cbd5e1; }
.notif-empty span { font-weight: 600; font-size: 1rem; color: #64748b; }

.notif-loading { display:flex; justify-content:center; padding:20px; }
.notif-spinner { width:22px; height:22px; border:2px solid #e5e7eb; border-top-color:#6366f1; border-radius:50%; animation:igcSpin .7s linear infinite; }
.notif-empty { text-align:center; padding:24px; color:#9ca3af; font-size:.9rem; }
.notif-load-more { width:100%; padding:10px; background:none; border:none; border-top:1px solid #eef0f3; color:#6366f1; font-weight:600; cursor:pointer; font-size:.85rem; }

/* Badge cloche */
#notif-badge {
    position:absolute; top:-4px; right:-4px;
    background:#ef4444; color:#fff; border:2px solid #fff;
    font-size:.65rem; font-weight:700; min-width:18px; height:18px;
    border-radius:9px; display:none; align-items:center; justify-content:center;
    padding:0 4px;
}

/* Toast notifications */
#notif-toasts { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:99999; }
.notif-toast {
    display:flex; align-items:flex-start; gap:10px;
    background:#1c1e21; color:#fff; padding:12px 16px;
    border-radius:14px; max-width:320px; box-shadow:0 8px 24px rgba(0,0,0,.2);
    opacity:0; transform:translateX(20px);
    transition:all .3s cubic-bezier(.16,1,.3,1);
}
.notif-toast.show { opacity:1; transform:translateX(0); }
.notif-toast-icon { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.notif-toast-title { font-size:.85rem; font-weight:700; margin-bottom:2px; }
.notif-toast-msg { font-size:.78rem; color:rgba(255,255,255,.7); }
.notif-toast-close { background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; font-size:1.1rem; padding:0 4px; margin-left:auto; flex-shrink:0; }

/* =====================================================
   TOAST GÉNÉRAL (igc-toast)
   ===================================================== */

#igc-toast {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#1c1e21; color:#fff; padding:10px 20px; border-radius:24px;
    font-size:.88rem; font-weight:600; opacity:0; transition:all .25s; z-index:99999;
    box-shadow:0 4px 16px rgba(0,0,0,.2); white-space:nowrap;
}
#igc-toast.igc-toast--visible { opacity:1; transform:translateX(-50%) translateY(0); }
#igc-toast.igc-toast--error { background:#ef4444; }
#igc-toast.igc-toast--success { background:#10b981; }

/* =====================================================
   LIGHTBOX
   ===================================================== */

#igc-lightbox {
    position:fixed; inset:0; z-index:100000;
    display:flex; align-items:center; justify-content:center; cursor:zoom-out;
}
.igc-lb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.85); }
.igc-lb-img { position:relative; max-width:90vw; max-height:90vh; border-radius:8px; object-fit:contain; box-shadow:0 0 60px rgba(0,0,0,.5); }

/* =====================================================
   LIKE BUTTON TOPIC.PHP
   ===================================================== */

.btn-like-comment {
    display:inline-flex; align-items:center; gap:5px;
    background:none; border:none; cursor:pointer;
    font-size:.82rem; color:#65676b; font-weight:600; padding:4px 8px;
    border-radius:8px; transition:all .15s;
}
.btn-like-comment:hover, .btn-like-comment.liked { color:#6366f1; background:rgba(99,102,241,.08); }
.btn-like-comment.liked svg { fill:#6366f1; }

/* =====================================================
   SEARCH (Barre de recherche avec suggestions)
   ===================================================== */

.search-dropdown {
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12);
    overflow:hidden; z-index:9999; max-height:400px; overflow-y:auto;
}
.search-result-item {
    display:flex; gap:10px; align-items:center;
    padding:10px 14px; text-decoration:none; color:inherit;
    border-bottom:1px solid #f9fafb; transition:background .12s;
}
.search-result-item:hover { background:#f9fafb; }
.search-result-type { font-size:.7rem; padding:2px 7px; border-radius:8px; font-weight:600; }
.search-result-title { font-size:.9rem; font-weight:600; color:#111827; }
.search-result-excerpt { font-size:.78rem; color:#9ca3af; }
.search-history-item { display:flex; align-items:center; gap:8px; padding:8px 14px; cursor:pointer; color:#6b7280; font-size:.85rem; }
.search-history-item:hover { background:#f9fafb; }

/* =====================================================
   GLOBAL FIX: Force dark text on light-background Bootstrap elements
   (body color is near-white from ocean dark theme — would be invisible)
   ===================================================== */
.card,
.card-body,
.card .card-title,
.card .card-text,
.card .text-muted,
.catch-card,
.catch-card-body,
.catch-card-title,
.catch-card .catch-meta,
.catch-card .btn-like,
.bg-light,
.bg-white,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.table,
.table th,
.table td,
.form-control,
.form-select,
.alert,
.list-group-item,
.offcanvas-body,
.dropdown-menu,
.dropdown-item,
.input-group-text,
.igc-login-cta,
.igc-load-more-btn,
.igc-reply-indicator {
    color: #1e293b;
}
/* Ensure muted text stays readable (not too dark, not too light) */
.card .text-muted,
.catch-card .text-muted,
.table .text-muted,
.bg-light .text-muted,
.bg-white .text-muted { color: #64748b !important; }

/* Placeholder text readability */
.form-control::placeholder,
.form-select::placeholder { color: #94a3b8; }

/* Keep explicitly white-text elements intact */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.badge { color: inherit; }
.search-no-results { padding:16px; text-align:center; color:#9ca3af; font-size:.88rem; }

/* Badges de catégorisation (style arrondi pastel, couleur par type) */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.badge-tag-fishing-type,
.badge-tag-technique,
.badge-tag-category,
.badge-tag-environment {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    text-decoration: none;
    margin-right: 4px;
    margin-bottom: 4px;
}
.badge-tag-fishing-type { background-color: #e8f2ff; color: #2563eb; border: 1px solid #dbeafe; }
.badge-tag-technique    { background-color: #ecfdf5; color: #059669; border: 1px solid #d1fae5; }
.badge-tag-category     { background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.badge-tag-environment  { background-color: #ecfeff; color: #0e7490; border: 1px solid #cffafe; }

/* =====================================================
   RECHERCHE STYLE FACEBOOK / X / LINKEDIN
   (index.php, guides.php, tests.php, forum.php)
   ===================================================== */
.fb-search { position: relative; flex: 1; min-width: 0; }
.fb-search .search-pill {
    flex: none;
    width: 100%;
    padding: 6px 8px 6px 6px;
    gap: 4px;
    background-color: #f0f2f5;
    border-radius: 50px;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.fb-search .search-pill:focus-within {
    background-color: #fff;
    border-color: rgba(24,119,242,.4);
    box-shadow: 0 0 0 4px rgba(24,119,242,.1);
}
.fb-loupe {
    flex: none;
    width: 34px; height: 34px;
    border: none; background: transparent;
    border-radius: 50%;
    color: var(--text-secondary, #65676b);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s, color .15s;
}
.fb-loupe:hover { background: rgba(0,0,0,.06); color: var(--brand-blue, #1877f2); }
.fb-search .search-pill input {
    border: none; background: transparent; outline: none;
    width: 100%; min-width: 0;
    margin-left: 6px; padding-right: 4px;
    font-size: .95rem; color: #050505;
}
.fb-clear {
    flex: none;
    width: 26px; height: 26px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.16);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .68rem;
    margin-left: 6px;
    padding: 0;
    transition: background .15s;
}
.fb-clear:hover { background: rgba(0,0,0,.28); }
.fb-clear[hidden] { display: none; }

/* Menu de suggestions (overlay) */
.fb-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 1055;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 28px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.1);
    overflow: hidden;
    padding: 6px 0;
    max-height: 440px;
    overflow-y: auto;
}
.fb-suggest[hidden] { display: none; }
.fb-sg-cat {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 6px;
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    color: #65676b;
}
.fb-sg-cat-ico { font-size: .8rem; }
.fb-suggest-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    text-decoration: none; color: #050505;
    font-size: .9rem;
    transition: background .1s;
}
.fb-suggest-item:hover,
.fb-suggest-item.active { background: #f0f2f5; }
.fb-ico {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.fb-ico-guide { background: #e7f3ff; }
.fb-ico-test  { background: #fff3e0; }
.fb-ico-forum { background: #e7f9ee; }
.fb-ico-user {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
    font-weight: 700;
}
.fb-sg-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.fb-sg-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; font-size: .9rem;
}
.fb-sg-sub {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.fb-sg-author {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .78rem; color: #65676b;
}
.fb-sg-type {
    flex: none;
    font-size: .66rem; font-weight: 700;
    padding: 3px 9px; border-radius: 50px;
    white-space: nowrap;
}
.fb-sg-type.t-guide { background: rgba(24,119,242,.12); color: #1877f2; }
.fb-sg-type.t-test  { background: rgba(225,112,85,.14); color: #e17055; }
.fb-sg-type.t-forum { background: rgba(15,157,88,.14); color: #0f9d58; }
.fb-sg-type.t-user  { background: rgba(99,102,241,.14); color: #6366f1; }
.fb-suggest-footer {
    display: flex; align-items: center; gap: 10px;
    margin-top: 6px; padding: 10px 14px;
    border-top: 1px solid #e4e6eb;
    cursor: pointer;
    color: var(--brand-blue, #1877f2);
    font-weight: 600; font-size: .9rem;
    transition: background .1s;
}
.fb-suggest-footer:hover,
.fb-suggest-footer.active { background: #f0f2f5; }
.fb-sg-mag { font-size: .9rem; }
.fb-suggest-empty {
    padding: 12px 14px;
    color: #65676b;
    font-size: .88rem;
    text-align: center;
}