/* ============================================
   FORUM MODERN — Refonte visuelle P0.1
   Tokens unifiés + listing posts modernisé +
   threading visuel sur post_detail.
   Chargé en plus des CSS existants, override
   ciblé sans toucher au style.css global.
   ============================================ */

:root {
    --forum-primary: #3498db;
    --forum-primary-hover: #2877b8;
    --forum-accent: #ff4000;
    --forum-accent-hover: #e53700;
    --forum-bg: #f7f8fa;
    --forum-surface: #ffffff;
    --forum-surface-alt: #f9fafb;
    --forum-border: #e5e7eb;
    --forum-border-strong: #d1d5db;
    --forum-text: #1f2937;
    --forum-text-soft: #4b5563;
    --forum-muted: #6b7280;
    --forum-radius-sm: 8px;
    --forum-radius: 14px;
    --forum-radius-lg: 18px;
    --forum-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04);
    --forum-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
    --forum-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.05);
    --forum-thread-line: linear-gradient(to bottom, #d4e7f7 0%, #e5e7eb 100%);
}

/* ============================================
   LISTING POSTS — Refonte .ftd-post
   Used in forum_theme_detail.html +
   forum_theme_detail_posts.html (partial HTMX)
   ============================================ */

.ftd-container {
    max-width: 1100px;
}

.ftd-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--forum-text);
}

.ftd-new-post-btn {
    background: linear-gradient(135deg, var(--forum-accent) 0%, var(--forum-accent-hover) 100%);
    box-shadow: 0 4px 12px rgba(255, 64, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ftd-new-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 64, 0, 0.35);
    background: linear-gradient(135deg, var(--forum-accent-hover) 0%, #c93000 100%);
}

.ftd-filters {
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--forum-shadow-sm);
    margin-bottom: 1.5rem;
}

.ftd-sort-select {
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem;
    color: var(--forum-text);
    background: var(--forum-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ftd-sort-select:focus {
    outline: none;
    border-color: var(--forum-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.ftd-view-btn {
    border: 1px solid var(--forum-border);
    background: var(--forum-surface);
    color: var(--forum-muted);
    padding: 0.45rem 0.85rem;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.ftd-view-btn:hover {
    color: var(--forum-primary);
    border-color: var(--forum-primary);
}

.ftd-view-btn.active {
    background: var(--forum-primary);
    border-color: var(--forum-primary);
    color: #fff;
}

.ftd-posts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ftd-post {
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    box-shadow: var(--forum-shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.ftd-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--forum-shadow-hover);
    border-color: var(--forum-border-strong);
}

.ftd-post:focus-within {
    outline: 2px solid var(--forum-primary);
    outline-offset: 2px;
}

.ftd-post-main {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    padding: 1.15rem 1.25rem 1rem;
    align-items: flex-start;
}

.ftd-post-avatar {
    margin-right: 0;
}

.ftd-user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--forum-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease;
}

.ftd-post:hover .ftd-user-avatar {
    border-color: var(--forum-primary);
}

.ftd-post-content {
    min-width: 0;
}

.ftd-post-title {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.45rem;
    color: var(--forum-text);
}

.ftd-post-title .forum-pin-badge {
    vertical-align: middle;
    margin-right: 0.45rem;
    font-size: 0.65rem;
}

.ftd-post-link {
    color: var(--forum-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ftd-post:hover .ftd-post-link,
.ftd-post-link:focus-visible {
    color: var(--forum-primary);
}

.ftd-post-excerpt {
    color: var(--forum-text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ftd-post-content .forum-post-hashtags {
    margin: 0 0 0.55rem;
}

.ftd-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    font-size: 0.82rem;
    color: var(--forum-muted);
    align-items: center;
}

.ftd-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ftd-post-meta i {
    margin-right: 0;
    color: var(--forum-muted);
    font-size: 0.85rem;
    opacity: 0.85;
}

.ftd-post-meta .ftd-post-author i {
    color: var(--forum-primary);
}

.ftd-post-meta .ftd-post-replies i,
.ftd-post-meta .ftd-post-views i {
    color: var(--forum-primary);
}

.ftd-user-link {
    color: var(--forum-text-soft);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ftd-user-link:hover {
    color: var(--forum-primary);
    text-decoration: underline;
}

/* Like button alignement dans le meta */
.ftd-post-meta .social_home_activity_action.like-post-btn {
    padding: 4px 10px;
    background: transparent;
    color: var(--forum-muted);
    font-size: 0.82rem;
    border-radius: 999px;
}

.ftd-post-meta .social_home_activity_action.like-post-btn:hover {
    background: #fff0eb;
    color: var(--forum-accent);
}

/* Bandeau "dernière réponse" en bas de carte */
.ftd-post-activity {
    background: var(--forum-surface-alt);
    border-top: 1px solid var(--forum-border);
    padding: 0.7rem 1.25rem;
}

.ftd-last-reply {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ftd-user-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--forum-border);
    object-fit: cover;
}

.ftd-last-reply-info {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.ftd-last-reply-author {
    font-weight: 600;
    color: var(--forum-text);
}

.ftd-last-reply-date {
    color: var(--forum-muted);
    font-size: 0.78rem;
}

.ftd-last-reply-date::before {
    content: '·';
    margin-right: 0.4rem;
    color: var(--forum-border-strong);
}

.ftd-no-replies {
    color: var(--forum-muted);
    font-size: 0.85rem;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ftd-no-replies::before {
    content: '\f075'; /* fa-comment */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    opacity: 0.5;
}

.ftd-no-posts {
    background: var(--forum-surface);
    border: 1px dashed var(--forum-border);
    border-radius: var(--forum-radius);
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--forum-muted);
    font-style: italic;
}

/* Bouton "Charger plus" */
.ftd-pagination {
    margin-top: 1.75rem;
    text-align: center;
}

.ftd-load-more-btn {
    background: var(--forum-surface);
    color: var(--forum-primary);
    border: 1px solid var(--forum-primary);
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ftd-load-more-btn:hover {
    background: var(--forum-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
}

/* Responsive listing */
@media (max-width: 575px) {
    .ftd-post-main {
        grid-template-columns: 44px 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .ftd-user-avatar {
        width: 44px;
        height: 44px;
    }

    .ftd-post-title {
        font-size: 1.02rem;
    }

    .ftd-post-meta {
        gap: 0.6rem 0.9rem;
        font-size: 0.78rem;
    }

    .ftd-post-activity {
        padding: 0.6rem 1rem;
    }

    .ftd-title {
        font-size: 1.55rem;
    }

    .ftd-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
}

/* ============================================
   POST DETAIL — Thread moderne avec
   threading visuel (ligne verticale)
   Used in post_detail.html via .forum-thread
   ============================================ */

.forum-thread {
    max-width: 920px;
    margin: 0 auto;
}

/* Titre + bouton Répondre du thread */
.forum-thread__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.forum-thread__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.4px;
    color: var(--forum-text);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.forum-thread__cta-reply {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--forum-accent) 0%, var(--forum-accent-hover) 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 64, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.forum-thread__cta-reply:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 64, 0, 0.35);
    color: #fff;
}

.forum-thread__cta-reply::before {
    content: '\f075'; /* fa-comment */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Pagination — chemise minimaliste */
.forum-thread .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 1rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.forum-thread .pagination .page-item .page-link {
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    color: var(--forum-text-soft);
    background: var(--forum-surface);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.forum-thread .pagination .page-item .page-link:hover {
    background: #eef7fd;
    border-color: var(--forum-primary);
    color: var(--forum-primary);
}

.forum-thread .pagination .page-item.disabled .page-link {
    opacity: 0.45;
    cursor: default;
    background: var(--forum-surface-alt);
}

.forum-thread .pagination .page-item.disabled .page-link:hover {
    background: var(--forum-surface-alt);
    border-color: var(--forum-border);
    color: var(--forum-text-soft);
}

/* Séparateur élégant */
.forum-thread .elegant-hr {
    display: none; /* Plus besoin avec les cards modernes */
}

/* Card principale du post (OP) */
.forum-thread > .card.mb-4,
.forum-thread__post-card {
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    box-shadow: var(--forum-shadow);
    background: var(--forum-surface);
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
}

.forum-thread > .card.mb-4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--forum-accent) 0%, var(--forum-accent-hover) 100%);
}

.forum-thread > .card.mb-4 .card-header {
    background: var(--forum-surface);
    border-bottom: 1px solid var(--forum-border);
    padding: 1rem 1.25rem;
}

.forum-thread > .card.mb-4 .card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.forum-thread > .card.mb-4 .card-body .card-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--forum-text);
    margin-bottom: 0.85rem;
    line-height: 1.35;
}

.forum-thread > .card.mb-4 .card-text.answer {
    color: var(--forum-text);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* Header utilisateur d'un post / reply */
.forum-thread .user-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.forum-thread .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--forum-border);
    margin-right: 0.2rem;
    transition: border-color 0.2s ease;
}

.forum-thread .card:hover .user-avatar {
    border-color: var(--forum-primary);
}

.forum-thread .user-profile-link {
    color: var(--forum-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.forum-thread .user-profile-link:hover {
    color: var(--forum-primary);
}

.forum-thread .reply-time {
    color: var(--forum-muted);
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

.forum-thread .reply-time::before {
    content: '·';
    margin-right: 0.4rem;
    color: var(--forum-border-strong);
}

/* Compteur réponses (titre de section) */
.forum-thread__replies-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--forum-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 1.5rem 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.forum-thread__replies-title::before {
    content: '';
    flex: 0 0 24px;
    height: 2px;
    background: var(--forum-border-strong);
}

/* Cards replies — refonte */
#repliesContainer .card.mb-4 {
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    box-shadow: var(--forum-shadow-sm);
    overflow: visible;
    margin-bottom: 1rem;
    background: var(--forum-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#repliesContainer .card.mb-4:hover {
    border-color: var(--forum-border-strong);
    box-shadow: var(--forum-shadow);
}

#repliesContainer .card.mb-4 .card-header {
    background: var(--forum-surface);
    border-bottom: 1px solid var(--forum-border);
    padding: 0.85rem 1.15rem;
}

#repliesContainer .card.mb-4 .card-body {
    padding: 1rem 1.15rem 1.15rem;
}

#repliesContainer .card.mb-4 .card-text {
    color: var(--forum-text);
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 0.85rem;
}

/* Wrapper d'actions sous une reply */
.forum-thread .upvote-wrapper,
.forum-thread .interaction-wrapper {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* Bouton upvote moderne — palette cohérente avec le thème (orange #ff4000 pour l'état actif,
   bleu primary discret pour le hover non-actif → on guide visuellement vers l'action). */
.forum-thread .upvote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: 999px;
    color: var(--forum-muted);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s,
                box-shadow 0.2s, transform 0.1s;
    cursor: pointer;
}

.forum-thread .upvote-btn:hover {
    background: #fff5f0;
    border-color: var(--forum-accent);
    color: var(--forum-accent);
    transform: translateY(-1px);
}

/* État actif (l'utilisateur a voté) — gradient orange thème + shadow douce + override
   explicite des descendants (i, .vote-count) pour neutraliser le `color: blue` global
   défini dans forum/css/style.css (chargé globalement via base.html — qu'on ne touche pas
   pour préserver la portée des autres pages). */
.forum-thread .upvote-btn.active-vote,
.forum-thread .upvote-btn.active-vote i,
.forum-thread .upvote-btn.active-vote .fas,
.forum-thread .upvote-btn.active-vote .vote-count {
    color: #fff;
}

.forum-thread .upvote-btn.active-vote {
    background: linear-gradient(135deg, var(--forum-accent) 0%, var(--forum-accent-hover) 100%);
    border-color: var(--forum-accent-hover);
    box-shadow: 0 2px 8px rgba(255, 64, 0, 0.25);
}

.forum-thread .upvote-btn.active-vote:hover {
    background: linear-gradient(135deg, var(--forum-accent-hover) 0%, #c93000 100%);
    border-color: #c93000;
    box-shadow: 0 4px 14px rgba(255, 64, 0, 0.35);
    transform: translateY(-1px);
}

/* Petit "pop" du pouce au moment où l'état devient actif — déclenché par la transition
   d'opacity sur le ::before pour donner le feedback visuel de validation. */
.forum-thread .upvote-btn.active-vote i {
    animation: forum-upvote-pop 0.32s cubic-bezier(0.68, -0.4, 0.27, 1.55);
}

@keyframes forum-upvote-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28) rotate(-6deg); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .forum-thread .upvote-btn.active-vote i {
        animation: none;
    }
}

.forum-thread .upvote-btn i {
    font-size: 0.9rem;
}

.forum-thread .upvote-btn .vote-count {
    font-weight: 600;
}

/* Bouton "Répondre" inline */
.forum-thread .btn-reply,
.forum-thread .btn-reply-to-child,
.forum-thread .btn-reply-to-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: transparent;
    border: 1px solid var(--forum-border);
    border-radius: 999px;
    color: var(--forum-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.forum-thread .btn-reply:hover,
.forum-thread .btn-reply-to-child:hover,
.forum-thread .btn-reply-to-sub:hover {
    background: #fff0eb;
    border-color: var(--forum-accent);
    color: var(--forum-accent);
}

.forum-thread .btn-reply::before,
.forum-thread .btn-reply-to-child::before,
.forum-thread .btn-reply-to-sub::before {
    content: '\f3e5'; /* fa-reply */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.78rem;
}

/* Accordeon "X Réponse(s)" — refonte.
   Note : nesté dans `.upvote-wrapper` (flex container), donc on force `flex-basis: 100%`
   pour qu'il passe sur sa propre ligne sous les boutons d'action (au lieu d'apparaître
   inline à côté de "Répondre"). Idem pour le formulaire reply quand il est révélé. */
.forum-thread .upvote-wrapper > .accordion-wrapper,
.forum-thread .upvote-wrapper > .reply-to-reply-form-container,
.forum-thread .upvote-wrapper > .reply-to-child-form-container,
.forum-thread .interaction-wrapper > .reply-to-sub-form-container {
    flex-basis: 100%;
    width: 100%;
}

.forum-thread .accordion-wrapper {
    margin-top: 0.95rem;
}

.forum-thread .reply-toggle {
    width: 100%;
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    color: var(--forum-text-soft);
    font-weight: 500;
    font-size: 0.88rem;
    padding: 0.55rem 0.95rem;
    box-shadow: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.forum-thread .reply-toggle:hover {
    background: #eef7fd;
    border-color: var(--forum-primary);
    color: var(--forum-primary);
    transform: none;
    box-shadow: none;
}

.forum-thread .reply-toggle[aria-expanded="true"] {
    background: #eef7fd;
    border-color: var(--forum-primary);
    color: var(--forum-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.forum-thread .reply-count-badge {
    background: var(--forum-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.forum-thread .collapse-forum {
    border: 1px solid var(--forum-border);
    border-top: 0;
    border-bottom-left-radius: var(--forum-radius-sm);
    border-bottom-right-radius: var(--forum-radius-sm);
    background: var(--forum-surface);
}

/* Threading visuel — ligne verticale sur les replies imbriquées */
.forum-thread .child-replies-wrapper {
    padding: 1rem 1rem 1rem 1.25rem;
    background: var(--forum-surface);
    position: relative;
}

.forum-thread .child-replies-wrapper::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--forum-thread-line);
    border-radius: 1px;
    opacity: 0.7;
}

.forum-thread .child-replies-wrapper > .card {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid #d4e7f7;
    position: relative;
    box-shadow: var(--forum-shadow-sm);
    border-radius: var(--forum-radius-sm);
}

.forum-thread .child-replies-wrapper > .card::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 1.4rem;
    width: 1.25rem;
    height: 2px;
    background: #d4e7f7;
}

.forum-thread .child-replies-wrapper > .card .card-body {
    padding: 0.85rem 1rem;
}

/* Sous-réponses (3ème niveau) — encore plus fines */
.forum-thread .sub-replies-accordion {
    margin-top: 0.65rem;
}

.forum-thread .sub-reply-toggle {
    color: var(--forum-muted);
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: var(--forum-radius-sm);
    transition: background-color 0.15s;
}

.forum-thread .sub-reply-toggle:hover {
    background: var(--forum-surface-alt);
    color: var(--forum-primary);
}

.forum-thread .sub-replies-wrapper {
    margin: 0.6rem 0 0;
    padding: 0.75rem 0.75rem 0.5rem 1rem;
    background: transparent;
    position: relative;
}

.forum-thread .sub-replies-wrapper::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--forum-thread-line);
    border-radius: 1px;
    opacity: 0.5;
}

.forum-thread .sub-replies-wrapper > .card {
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--forum-border);
    border-left: 2px solid #eef7fd;
    border-radius: var(--forum-radius-sm);
    box-shadow: none;
    position: relative;
}

.forum-thread .sub-replies-wrapper > .card::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 1.2rem;
    width: 1rem;
    height: 2px;
    background: #d4e7f7;
}

.forum-thread .sub-replies-wrapper > .card .card-body {
    padding: 0.75rem 0.95rem;
}

.forum-thread .sub-replies-wrapper > .card .card-text {
    font-size: 0.92rem;
}

/* Reference @parent dans une reply */
.forum-thread .reply-reference {
    color: var(--forum-primary);
    background: #eef7fd;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    margin-left: 0.3rem;
}

/* Formulaire de reply inline */
.forum-thread .reply-to-reply-form-container,
.forum-thread .reply-to-child-form-container,
.forum-thread .reply-to-sub-form-container {
    margin-top: 0.75rem;
    padding: 0.85rem;
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
}

.forum-thread .reply-to-reply-form textarea,
.forum-thread .reply-to-reply-form .reply_content {
    width: 100%;
    min-height: 80px;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.forum-thread .reply-to-reply-form textarea:focus,
.forum-thread .reply-to-reply-form .reply_content:focus {
    outline: none;
    border-color: var(--forum-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.forum-thread .reply-to-reply-form .button-right {
    background: linear-gradient(135deg, var(--forum-accent) 0%, var(--forum-accent-hover) 100%);
    border: 0;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    margin-top: 0.5rem;
    transition: transform 0.15s, box-shadow 0.2s;
}

.forum-thread .reply-to-reply-form .button-right:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 64, 0, 0.25);
}

/* Formulaire de reply principal (#replyForm) */
.forum-thread #replyFormContainer {
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    box-shadow: var(--forum-shadow-sm);
    padding: 1.15rem 1.25rem 1rem;
    margin: 1rem 0;
}

.forum-thread #replyFormContainer h5,
.forum-thread #replyFormContainer label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--forum-text);
    margin-bottom: 0.6rem;
}

/* Like button propre dans le bloc OP */
.forum-thread .card .social_home_activity_action.like-post-btn {
    border: 1px solid var(--forum-border);
    background: var(--forum-surface);
}

.forum-thread .card .social_home_activity_action.like-post-btn:hover {
    background: #fff0eb;
    border-color: var(--forum-accent);
    color: var(--forum-accent);
}

/* Responsive */
@media (max-width: 575px) {
    .forum-thread__title {
        font-size: 1.35rem;
    }

    .forum-thread__cta-reply {
        padding: 0.55rem 1rem;
        font-size: 0.86rem;
        width: 100%;
        justify-content: center;
    }

    .forum-thread > .card.mb-4 .card-body,
    .forum-thread > .card.mb-4 .card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .forum-thread .user-avatar {
        width: 38px;
        height: 38px;
    }

    .forum-thread .child-replies-wrapper {
        padding-left: 0.85rem;
    }

    .forum-thread .child-replies-wrapper::before {
        left: 1rem;
    }

    .forum-thread .child-replies-wrapper > .card {
        margin-left: 1rem;
    }

    .forum-thread .child-replies-wrapper > .card::before {
        left: -1rem;
        width: 0.85rem;
    }

    .forum-thread .pagination {
        flex-wrap: wrap;
    }

    .forum-thread .pagination .page-item .page-link {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ftd-post,
    .ftd-new-post-btn,
    .forum-thread__cta-reply,
    .forum-thread .upvote-btn,
    .forum-thread .child-replies-wrapper > .card,
    .ftd-load-more-btn {
        transition: none;
    }
}

/* ============================================
   P0.2 — Menu kebab + edit badge + soft-deleted
   ============================================ */

/* Wrap titre + kebab dans le listing .ftd-post */
.ftd-post-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.ftd-post-header-row .ftd-post-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Dropdown kebab — composant universel sur post + reply */
.forum-actions-menu {
    position: relative;
    flex-shrink: 0;
}

.forum-actions-menu__trigger {
    background: transparent;
    border: 0;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    color: var(--forum-muted);
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.forum-actions-menu__trigger:hover,
.forum-actions-menu__trigger[aria-expanded="true"] {
    background: var(--forum-surface-alt);
    color: var(--forum-text);
}

.forum-actions-menu__trigger:focus-visible {
    outline: 2px solid var(--forum-primary);
    outline-offset: 2px;
}

.forum-actions-menu__trigger i {
    font-size: 1rem;
}

.forum-actions-menu__list {
    min-width: 180px;
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    box-shadow: var(--forum-shadow);
    padding: 0.35rem;
}

.forum-actions-menu__list .dropdown-item {
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: var(--forum-text);
    transition: background-color 0.12s ease, color 0.12s ease;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

.forum-actions-menu__list .dropdown-item:hover,
.forum-actions-menu__list .dropdown-item:focus {
    background: #eef7fd;
    color: var(--forum-primary);
}

.forum-actions-menu__list .dropdown-item i {
    width: 1.1rem;
    color: var(--forum-muted);
    text-align: center;
}

.forum-actions-menu__list .dropdown-item:hover i {
    color: var(--forum-primary);
}

.forum-actions-menu__danger {
    color: #b91c1c !important;
}

.forum-actions-menu__danger:hover,
.forum-actions-menu__danger:focus {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.forum-actions-menu__danger:hover i,
.forum-actions-menu__danger:focus i {
    color: #991b1b !important;
}

/* Container du form de signalement (révélé via le menu kebab) */
.forum-actions-menu__report {
    margin-top: 0.5rem;
}

.forum-actions-menu__report .report-btn-wrapper {
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    padding: 0.6rem 0.75rem;
}

/* Badge "modifié" — discret, à côté du timesince */
.forum-edit-badge {
    color: var(--forum-muted);
    font-size: 0.75rem;
    font-style: italic;
    margin-left: 0.35rem;
    cursor: help;
}

/* Contenu d'un post / reply soft-deleted */
.forum-deleted-content {
    color: var(--forum-muted);
    font-style: italic;
    font-size: 0.92rem;
    background: var(--forum-surface-alt);
    border: 1px dashed var(--forum-border);
    border-radius: var(--forum-radius-sm);
    padding: 0.75rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.forum-deleted-content i {
    color: #b91c1c;
    opacity: 0.6;
    font-size: 0.85rem;
}

/* ============================================
   P1.1 — Barre de réactions emoji
   ============================================ */

.forum-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0.3rem;
    align-items: center;
}

.forum-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: 999px;
    color: var(--forum-text-soft);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.2s ease, transform 0.1s ease, opacity 0.15s ease;
    text-decoration: none;
    user-select: none;
}

.forum-reaction-btn:hover {
    background: #fff5f0;
    border-color: var(--forum-accent);
    transform: translateY(-1px);
}

.forum-reaction-btn:focus-visible {
    outline: 2px solid var(--forum-primary);
    outline-offset: 2px;
}

.forum-reaction-btn__emoji {
    font-size: 1rem;
    line-height: 1;
    /* Évite que les emojis "tombent" sur certaines polices système */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", sans-serif;
}

.forum-reaction-btn__count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--forum-text);
    min-width: 0.7em;
}

/* État actif : l'user a voté avec cet emoji.
   Cohérent avec le thème (gradient orange = action mise en valeur). */
.forum-reaction-btn--active {
    background: linear-gradient(135deg, #fff0eb 0%, #ffe4d6 100%);
    border-color: var(--forum-accent);
    color: var(--forum-accent);
    box-shadow: 0 2px 6px rgba(255, 64, 0, 0.15);
}

.forum-reaction-btn--active .forum-reaction-btn__count {
    color: var(--forum-accent);
}

.forum-reaction-btn--active:hover {
    background: linear-gradient(135deg, #ffe4d6 0%, #ffd2bb 100%);
    box-shadow: 0 4px 10px rgba(255, 64, 0, 0.25);
}

/* Emoji "vide" (count=0) : opacité réduite pour ne pas surcharger la barre */
.forum-reaction-btn--empty {
    opacity: 0.55;
    padding: 0.25rem 0.5rem;
}

.forum-reaction-btn--empty:hover {
    opacity: 1;
}

.forum-reaction-btn--empty .forum-reaction-btn__count {
    display: none;  /* on n'affiche pas "0" pour ne pas polluer */
}

/* Anonyme : style identique mais en readonly (lien vers login) */
.forum-reaction-btn--readonly {
    cursor: pointer;
    color: var(--forum-text-soft);
}

.forum-reaction-btn--readonly:hover {
    background: var(--forum-surface-alt);
    border-color: var(--forum-border-strong);
    color: var(--forum-text);
}

/* Petit pop d'animation au moment où l'emoji devient active */
.forum-reaction-btn--active .forum-reaction-btn__emoji {
    animation: forum-reaction-pop 0.32s cubic-bezier(0.68, -0.4, 0.27, 1.55);
}

@keyframes forum-reaction-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@media (max-width: 575px) {
    .forum-reactions {
        gap: 0.3rem;
    }

    .forum-reaction-btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.82rem;
    }

    .forum-reaction-btn--empty {
        padding: 0.2rem 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forum-reaction-btn,
    .forum-reaction-btn--active .forum-reaction-btn__emoji {
        transition: none;
        animation: none;
    }
}

/* P1.2 — Réponse acceptée (« Meilleure réponse ») */
.forum-accepted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    margin-left: 0.4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    vertical-align: middle;
    cursor: help;
}

.forum-accepted-badge i {
    font-size: 0.78rem;
}

/* Badge de confidentialité public / privé (gating ACL forums programme) */
.forum-privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.16rem 0.55rem;
    margin-right: 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: help;
}

.forum-privacy-badge i {
    font-size: 0.72rem;
}

/* Public : neutre, bleu marque — visible de tous. */
.forum-privacy-badge--public {
    background: rgba(85, 147, 184, 0.12);
    color: #3a6f8f;
}

/* Privé : accent orange — réservé aux voisins du programme. */
.forum-privacy-badge--private {
    background: rgba(255, 64, 0, 0.1);
    color: #c4310a;
}

/* La card entière reçoit un léger highlight vert quand sa reply est acceptée.
   Tokens cohérents avec le badge — séparable du soft-delete via classes distinctes. */
.forum-card--accepted {
    border-left: 3px solid #10b981 !important;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, transparent 60%);
}

.forum-card--accepted .card-header {
    background: rgba(16, 185, 129, 0.05);
}

/* Bouton toggle « Marquer comme meilleure réponse » — visible uniquement pour l'auteur du POST */
.forum-accepted-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: var(--forum-surface);
    border: 1px dashed #10b981;
    border-radius: 999px;
    color: #059669;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.forum-accepted-toggle:hover {
    background: #ecfdf5;
    border-style: solid;
    transform: translateY(-1px);
}

.forum-accepted-toggle--active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-color: #059669;
    border-style: solid;
}

.forum-accepted-toggle--active:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
}

.forum-accepted-toggle i {
    font-size: 0.78rem;
}

/* Carte d'un post/reply marquée comme supprimée */
.forum-card--deleted {
    opacity: 0.78;
}

.forum-card--deleted .user-avatar,
.forum-card--deleted .ftd-user-avatar {
    filter: grayscale(0.4);
}

.forum-card--deleted .user-profile-link,
.forum-card--deleted .ftd-user-link {
    color: var(--forum-muted) !important;
}

/* ─── Page d'édition (edit_post.html / edit_reply.html) ─── */
.forum-edit-page {
    max-width: 860px;
}

.forum-edit-page__title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--forum-text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.3px;
}

.forum-edit-page__hint {
    color: var(--forum-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.forum-edit-page__hint i {
    color: var(--forum-primary);
}

.forum-edit-page__form {
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    padding: 1.5rem;
    box-shadow: var(--forum-shadow-sm);
}

.forum-edit-page__form .form-control {
    border-radius: var(--forum-radius-sm);
    border: 1px solid var(--forum-border);
}

.forum-edit-page__form .form-control:focus {
    border-color: var(--forum-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

@media (max-width: 575px) {
    .ftd-post-header-row {
        gap: 0.3rem;
    }

    .forum-edit-page__form {
        padding: 1rem;
    }

    .forum-edit-page__title {
        font-size: 1.35rem;
    }
}

/* ============================================
   P1.3 — Indicateur "Brouillon enregistré"
   Affiché à côté du bouton submit du composer principal, fade in/out.
   ============================================ */

.forum-draft-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.85rem;
    padding: 0.25rem 0.65rem;
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: 999px;
    color: var(--forum-muted);
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
}

.forum-draft-indicator--visible {
    opacity: 1;
    transform: translateY(0);
}

.forum-draft-indicator[data-state="saved"] {
    border-color: #d4e7f7;
    background: #eef7fd;
    color: var(--forum-primary);
}

.forum-draft-indicator[data-state="saved"] i {
    color: #10b981;
}

.forum-draft-indicator[data-state="cleared"] {
    border-color: #e5e7eb;
    color: var(--forum-muted);
}

.forum-draft-indicator[data-state="restored"] {
    border-color: #ffcc99;
    background: #fff8f3;
    color: var(--forum-accent);
}

.forum-draft-indicator i {
    font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
    .forum-draft-indicator {
        transition: none;
    }
}

/* ============================================================
   P0 #3 — Subscribe / Mute thread buttons
   ============================================================ */

.forum-thread__head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.forum-thread-subscription {
    display: inline-flex;
    gap: 0.4rem;
}

.forum-thread-subscription__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    background: #fff;
    color: var(--forum-text, #1f2937);
    border: 1.5px solid var(--forum-border, #e5e7eb);
    transition: all 0.15s ease;
    cursor: pointer;
}

.forum-thread-subscription__btn:hover {
    border-color: var(--forum-accent, #ff4000);
    color: var(--forum-accent, #ff4000);
    background: rgba(255, 64, 0, 0.04);
}

.forum-thread-subscription__btn i {
    font-size: 0.85rem;
}

.forum-thread-subscription__btn--active {
    background: linear-gradient(135deg, #ff4000 0%, #ff7a3f 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(255, 64, 0, 0.25);
}

.forum-thread-subscription__btn--active:hover {
    background: linear-gradient(135deg, #e63900 0%, #ff6a2a 100%);
    color: #fff;
    border-color: transparent;
}

.forum-thread-subscription__btn--muted {
    background: #6b7280;
    color: #fff;
    border-color: transparent;
}

.forum-thread-subscription__btn--muted:hover {
    background: #4b5563;
    color: #fff;
    border-color: transparent;
}

.forum-thread-subscription__btn--mute-cta {
    color: #6b7280;
    border-color: #d1d5db;
}

.forum-thread-subscription__btn--mute-cta:hover {
    border-color: #6b7280;
    color: #4b5563;
    background: #f9fafb;
}

@media (max-width: 640px) {
    .forum-thread-subscription__btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* ============================================================
   P0 #5 — Follow user button + compteurs profil
   ============================================================ */

.profile-follow-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.profile-follow-stats__item {
    color: var(--forum-text, #1f2937);
    text-decoration: none;
    transition: color 0.15s ease;
}

.profile-follow-stats__item:hover {
    color: var(--forum-accent, #ff4000);
    text-decoration: none;
}

.profile-follow-stats__item strong {
    font-weight: 700;
}

.profile-follow-stats__sep {
    color: #9ca3af;
}

.forum-follow-user__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, #ff4000 0%, #ff7a3f 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 64, 0, 0.25);
    transition: all 0.15s ease;
    cursor: pointer;
}

.forum-follow-user__btn:hover {
    background: linear-gradient(135deg, #e63900 0%, #ff6a2a 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 64, 0, 0.3);
}

.forum-follow-user__btn--active {
    background: #fff;
    color: var(--forum-accent, #ff4000);
    border: 1.5px solid var(--forum-accent, #ff4000);
    box-shadow: none;
}

.forum-follow-user__btn--active:hover {
    background: rgba(255, 64, 0, 0.05);
    color: var(--forum-accent, #ff4000);
    transform: none;
}

.forum-follow-user__count {
    font-weight: 500;
    opacity: 0.9;
}

/* ============================================
   SONDAGES (polls) — widget de vote + résultats
   ============================================ */
.forum-poll {
    margin: 14px 0 6px;
    padding: 14px 16px;
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
}

.forum-poll__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forum-poll__option {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: var(--forum-radius-sm);
    border: 1px solid var(--forum-border-strong);
    background: var(--forum-surface);
    color: var(--forum-text);
    font-size: 0.95rem;
    line-height: 1.4;
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

/* Mode vote : bouton cliquable */
.forum-poll__option--votable {
    cursor: pointer;
}

.forum-poll__option--votable:hover {
    border-color: var(--forum-accent);
    box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.08);
    transform: translateY(-1px);
}

.forum-poll__option--votable:active {
    transform: translateY(0);
}

/* Mode résultat : barre de progression derrière le label */
.forum-poll__option--result {
    background: var(--forum-surface);
    cursor: default;
}

.forum-poll__option--result.forum-poll__option--votable,
button.forum-poll__option--result {
    cursor: pointer;
}

.forum-poll__bar {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.16) 0%, rgba(52, 152, 219, 0.10) 100%);
    z-index: 0;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.forum-poll__option--voted .forum-poll__bar {
    background: linear-gradient(135deg, rgba(255, 64, 0, 0.20) 0%, rgba(255, 64, 0, 0.12) 100%);
}

.forum-poll__option--voted {
    border-color: var(--forum-accent);
    font-weight: 600;
}

.forum-poll__option-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.forum-poll__option-text {
    flex: 1 1 auto;
    min-width: 0;
}

.forum-poll__option-meta {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--forum-muted);
    font-weight: 600;
}

.forum-poll__check {
    color: var(--forum-accent);
    margin-left: 4px;
}

.forum-poll__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--forum-muted);
}

.forum-poll__total {
    font-weight: 600;
}

.forum-poll__state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.forum-poll__state--open {
    color: #15803d;
}

.forum-poll__state--closed {
    color: var(--forum-muted);
}

.forum-poll__login {
    margin-left: auto;
    color: var(--forum-primary);
    font-weight: 600;
    text-decoration: none;
}

.forum-poll__login:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .forum-poll {
        padding: 12px 12px;
    }
    .forum-poll__option {
        font-size: 0.9rem;
    }
}

/* ============================================================
   COMPOSER — page dédiée create_post.html + composant partagé
   (partials/forum/composer.html). Réutilise les classes
   .social_home_composer_* (social_home.css) et ajoute le cadre
   de la page + l'upload image + le badge contexte + l'aperçu image.
   ============================================================ */

/* Largeur de la page de création : on exploite mieux les grands écrans.
   720px était trop étroit (carte compressée au centre sur un gros moniteur). */
.forum-composer-page {
    max-width: 1080px;
}

.forum-composer-page__title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--forum-text);
    margin-bottom: 1.25rem;
}

.forum-composer-card {
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius);
    box-shadow: var(--forum-shadow);
    padding: 1.25rem 1.4rem 1.1rem;
}

.forum-composer-card__captcha {
    margin-top: 1rem;
}

.forum-composer-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--forum-border);
    flex-wrap: wrap;
}

/* Titre de sujet (mode page) */
.social_home_composer_title {
    width: 100%;
    font-size: 1.15rem;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid var(--forum-border);
    border-radius: 0;
    padding: 0.4rem 0;
    color: var(--forum-text);
    background: transparent;
}

.social_home_composer_title:focus {
    outline: none;
    border-bottom-color: var(--forum-primary);
    box-shadow: none;
}

/* Badge contexte (programme · thème) en mode page */
.social_home_composer_context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.social_home_composer_context_chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--forum-text-soft);
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.social_home_composer_context_chip i {
    color: var(--forum-primary);
}

/* Upload image (partagé page + feed) */
.social_home_composer_image {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.social_home_composer_image_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--forum-border-strong);
    background: transparent;
    color: var(--forum-text-soft);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.social_home_composer_image_btn:hover {
    background: rgba(52, 152, 219, 0.08);
    border-color: var(--forum-primary);
    color: var(--forum-primary);
}

.social_home_composer_image_btn i {
    font-size: 0.95rem;
}

.social_home_composer_image_preview {
    position: relative;
    max-width: 320px;
    border-radius: var(--forum-radius-sm);
    overflow: hidden;
    border: 1px solid var(--forum-border);
}

.social_home_composer_image_preview img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
}

.social_home_composer_image_remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.social_home_composer_image_remove:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Image affichée dans le détail d'un post */
.forum-thread__image-link {
    display: inline-block;
    margin: 0.75rem 0 0.25rem;
    max-width: 100%;
}

.forum-thread__image {
    display: block;
    max-width: 100%;
    max-height: 480px;
    width: auto;
    border-radius: var(--forum-radius-sm);
    border: 1px solid var(--forum-border);
}

/* Aperçu Markdown EasyMDE (classe posée par forum_markdown.js) */
.editor-preview.forum-markdown-preview,
.editor-preview-side.forum-markdown-preview {
    background: var(--forum-surface-alt);
    color: var(--forum-text);
    line-height: 1.6;
}

.editor-preview.forum-markdown-preview a,
.editor-preview-side.forum-markdown-preview a {
    color: var(--forum-primary);
}

@media (max-width: 575.98px) {
    .forum-composer-card {
        padding: 1rem;
    }
    .forum-composer-card__footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .forum-composer-card__footer .social_home_composer_submit {
        width: 100%;
    }
    .social_home_composer_image_preview {
        max-width: 100%;
    }
}

/* ============================================================
   Toast UI Editor (composer) — barre d'outils compacte + placeholder propre.
   Toast UI n'est utilisé que par le composer (page + feed), donc on peut cibler
   ses classes globales sans risque de fuite ailleurs.
   ============================================================ */

/* Cadre éditeur aligné sur le design forum */
.toastui-editor-defaultUI {
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
}

/* Barre d'outils plus fine. ⚠ Ne PAS toucher à la taille/au background des icônes
   (sprites natifs Toast UI) ni mettre height:auto → ça casse le rendu des boutons.
   On réduit seulement la hauteur de la barre (48 → 38px) + l'espacement. */
.toastui-editor-defaultUI-toolbar {
    height: 38px;
    padding: 0 8px;
    background: var(--forum-surface-alt);
}
.toastui-editor-defaultUI .toastui-editor-toolbar-icons {
    margin: 3px 1px;
}
.toastui-editor-defaultUI .toastui-editor-toolbar-divider {
    margin: 9px 6px;
    height: 20px;
}

/* Placeholder : texte d'aide discret (gris clair, italique), jamais un bloc/fond gris */
.toastui-editor-ww-container .toastui-editor-contents .placeholder,
.toastui-editor-contents .placeholder,
.toastui-editor-ww-container .placeholder {
    color: var(--forum-muted);
    background: transparent;
    font-style: italic;
    font-weight: 400;
}

/* Zone de contenu : padding cohérent, hauteur souple */
.toastui-editor-ww-container .toastui-editor-contents {
    padding: 4px 2px;
    font-size: 1rem;
    line-height: 1.6;
}

/* ============================================================
   AUDIT ERGO — zones cliquables (Phase 3)
   Carte de topic entièrement cliquable + avatars liens vers profil.
   ============================================================ */

/* Toute la carte de topic ouvre le sujet (stretched-link sur le titre).
   Le curseur "main" sur toute la carte rend l'affordance claire. */
.ftd-post {
    cursor: pointer;
}

/* Les éléments interactifs imbriqués (avatar, pseudo, kebab, like) doivent rester
   cliquables AU-DESSUS de l'overlay du stretched-link (sinon ils ouvriraient le topic). */
.ftd-post a:not(.ftd-post-link),
.ftd-post button,
.ftd-post .forum-actions-menu,
.ftd-post .forum-avatar-link {
    position: relative;
    z-index: 2;
}

/* (Le style de base `.forum-avatar-link` est défini globalement dans style.css —
   chargé partout — pour couvrir aussi le feed, photo_detail et les commentaires.) */

/* Affordance clavier sur les liens de carte de topic. */
.ftd-post-link:focus-visible {
    outline: 2px solid var(--forum-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   PHASE 4 — reply_node (thread des réponses, partial récursif).
   Réutilise .card, .upvote-btn, .btn-reply, .reply-reference,
   .child-replies-wrapper/.sub-replies-wrapper (connecteurs ::before).
   ============================================================ */
.forum-reply-node--depth-1 { margin-bottom: 1.25rem; }
.forum-reply-node--depth-2,
.forum-reply-node--depth-3 { margin-bottom: 0.75rem; }

.forum-reply-node__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
.forum-reply-node__header .user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.forum-reply-node__content {
    line-height: 1.6;
    color: var(--forum-text);
    margin-bottom: 0.4rem;
}

/* Formulaire de réponse inline — boîte simple auto-grandissante. */
.forum-reply-node__reply-form {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--forum-surface-alt);
    border: 1px solid var(--forum-border);
    border-radius: var(--forum-radius-sm);
    padding: 0.75rem;
}
.forum-reply-node__reply-form[hidden] { display: none; }
.forum-reply-node__textarea {
    width: 100%;
    min-height: 56px;
    resize: none;
    overflow: hidden;
    border: 1px solid var(--forum-border-strong);
    border-radius: var(--forum-radius-sm);
    padding: 0.5rem 0.7rem;
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--forum-text);
    background: var(--forum-surface);
}
.forum-reply-node__textarea:focus {
    outline: none;
    border-color: var(--forum-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}
.forum-reply-node__reply-actions {
    display: flex;
    justify-content: flex-end;
}

/* Invite « Répondre à ce sujet… » en bas du fil (affordance de réponse là où le lecteur arrive). */
.forum-thread__reply-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.8rem 1.1rem;
    background: var(--forum-surface);
    border: 1px solid var(--forum-border);
    border-radius: 999px;
    color: var(--forum-muted);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.forum-thread__reply-prompt:hover {
    border-color: var(--forum-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.forum-thread__reply-prompt:focus-visible {
    outline: 2px solid var(--forum-primary);
    outline-offset: 2px;
}
.forum-thread__reply-prompt-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--forum-border);
}
.forum-thread__reply-prompt-text i {
    color: var(--forum-accent);
    margin-right: 0.4rem;
}