/* ============================================
   Forum (refonte 08/11/2026, même style que les pages vitrine À propos / Comment ça marche) : accueil du forum
   (views/social/category.php), sujets d'une rubrique (categorySub.php) et page d'un sujet (index.php).
   Préfixe vxf-. Appelé par les trois vues avec ?v=_VERSION_ (cache navigateur 1 an : monter $version en prod).
   La carte de publication d'un sujet (member/partial/activity/publication.php) est celle du mur : pas touchée.
   ============================================ */

/* --- bande noire : fil d'Ariane, titre, auteur --- */
.vxf-hero-wrap { background: #1a1a2e; color: #fff; margin: 0 -15px 1.5rem; }
.vxf-hero { padding: 1.5rem 2rem 1.75rem; }
.vxf-hero .breadcrumb { background: none; padding: 0; margin: 0 0 .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); flex-wrap: wrap; gap: .35rem; }
.vxf-hero .breadcrumb a { color: #F2E70D; white-space: normal; overflow-wrap: anywhere; }
.vxf-hero .breadcrumb a:hover { color: #fff; text-decoration: none; }
.vxf-hero .breadcrumb span { color: rgba(255,255,255,.4); }
.vxf-hero .breadcrumb .input-group { text-transform: none; letter-spacing: 0; font-weight: 400; margin: .5rem 0 0; max-width: 420px; }
.vxf-eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F2E70D; margin: 0 0 .5rem; }
.vxf-h1 { font-size: 2.4rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; margin: 0; color: #fff; text-wrap: balance; }
.vxf-h1 i { color: #F2E70D; font-size: .8em; margin-right: .2em; }
.vxf-h1 .input-group { margin-top: .75rem; max-width: 640px; font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.vxf-sub { margin: .75rem 0 0; font-size: 1.05rem; color: #d9d9e3; max-width: 760px; }
.vxf-sub a { color: #fff; font-weight: 700; }
/* auteur et date d'un sujet, sous le titre */
.vxf-author { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: .92rem; color: #b8b8c8; }
.vxf-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #F2E70D; }
.vxf-author a { color: #fff; font-weight: 800; }
.vxf-author b { color: #fff; font-weight: 800; }
.vxf-author .vxf-pill { margin-left: .25rem; }

/* --- pastilles --- */
.vxf-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 99px; background: #e9ecef; color: #1a1a2e; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.vxf-pill.is-hot { background: #e6007e; color: #fff; }
.vxf-pill.is-zero { background: #f1f1f5; color: #868e96; }
.vxf-pill.is-dark { background: #1a1a2e; color: #F2E70D; }

/* --- liste des sujets : une ligne = un sujet, toute la ligne cliquable (lien du titre étiré) --- */
.vxf-topics { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 2px solid #1a1a2e; border-radius: 14px; overflow: hidden; background: #fff; }
.vxf-row { position: relative; display: grid; grid-template-columns: 52px 1fr auto 220px; gap: 0 1rem; align-items: center; padding: .85rem 1.1rem; border-top: 1px solid #eef0f3; transition: background .15s; }
.vxf-row:first-child { border-top: 0; }
.vxf-row:hover { background: #fffce0; }
.vxf-row > img, .vxf-row-last img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.vxf-row-main { min-width: 0; }
.vxf-row-title { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.25; color: #1a1a2e !important; text-decoration: none !important; }
.vxf-row-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vxf-row-title:hover { color: #e6007e !important; }
.vxf-row-meta { display: block; margin-top: .2rem; font-size: .82rem; color: #6c757d; }
.vxf-row-meta a, .vxf-row-last a { position: relative; z-index: 2; color: #1a1a2e; font-weight: 700; }
.vxf-row-meta a:hover, .vxf-row-last a:hover { color: #e6007e; text-decoration: none; }
.vxf-row-count { text-align: center; }
.vxf-row-count .vxf-pill { font-size: .85rem; padding: .3rem .8rem; }
.vxf-row-last { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .8rem; color: #6c757d; line-height: 1.3; }
.vxf-row-last img { width: 36px; height: 36px; flex: none; }
.vxf-row-last span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vxf-row-last b { display: block; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; }
.vxf-row-last small { display: block; }
.vxf-row-last .vxf-row-last-label { display: none; }
.vxf-empty { padding: 2rem 1rem; text-align: center; color: #6c757d; }
.vxf-desc { color: #495057; max-width: 760px; margin: -.25rem 0 1.25rem; }

/* --- accueil : une carte par rubrique, groupées par catégorie --- */
.vxf-cat { margin: 0 0 2rem; }
/* titre de catégorie : barre jaune dessous, comme les années de la genèse */
.vxf-cat-title { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; margin: 0 0 1rem; padding-bottom: .5rem; position: relative; }
.vxf-cat-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 6px; background: #F2E70D; }
.vxf-cat-title i { color: #e6007e; }
.vxf-cat-title .vxf-pill { font-size: .72rem; }
.vxf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }  /* minmax(0, 1fr) : un titre long (nowrap) n'élargit plus sa colonne */  /* toutes les cartes d'une catégorie à la même hauteur */
/* carte : blanche, bord neutre ; seul un liseré fuchsia signale une rubrique qui vit (sujet < 7 jours), jaune au survol (Ben 08/11) */
.vxf-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.1rem 1.1rem 1rem; border-radius: 14px; background: #fff; border: 2px solid #e9e9f0; transition: border-color .15s, transform .15s, box-shadow .15s; }
.vxf-card:hover { border-color: #F2E70D; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,26,46,.12); }
.vxf-card.is-hot { border-left: 6px solid #e6007e; }
.vxf-card.is-hot:hover { border-left-color: #e6007e; }
.vxf-card.is-hot .vxf-card-last em { color: #e6007e; font-weight: 700; }
.vxf-card-last em { font-style: normal; }
.vxf-card-hot { margin-left: auto; flex: none; font-size: .68rem; }
.vxf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.vxf-card-name { font-size: 1.1rem; font-weight: 900; line-height: 1.2; color: #1a1a2e !important; text-decoration: none !important; }
.vxf-card-name::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vxf-card-name:hover { color: #e6007e !important; }
.vxf-card-desc { margin: .4rem 0 .8rem; font-size: .85rem; color: #495057; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vxf-card-last { margin-top: auto; }
.vxf-card-last { display: flex; align-items: center; gap: .6rem; padding-top: .7rem; border-top: 1px solid #e6e6ee; font-size: .8rem; color: #6c757d; min-width: 0; }
.vxf-card-last img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.vxf-card-last span { min-width: 0; overflow: hidden; }
.vxf-card-last b { display: block; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxf-card-last a { position: relative; z-index: 2; color: #e6007e; font-weight: 800; }
.vxf-card-last .vxf-card-last-none { font-style: italic; }

/* --- page d'un sujet : le texte de la publication déplié d'office (la page, c'est le sujet), les réponses gardent leur repli --- */
.vxf-topic .vxf-main-text > .foldText { max-height: none; -webkit-mask-image: none; mask-image: none; }
.vxf-topic .vxf-main-text > .foldTextToggle { display: none; }
/* la suite de la rubrique, sous le sujet */
.vxf-more { margin: 2rem 0 .5rem; }  /* le bas de la colonne blanche vient du pb-4 du conteneur, pas d'une marge (elle sortait de la colonne) */
.vxf-more-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.vxf-more-head h2 { font-size: 1.35rem; font-weight: 900; letter-spacing: -.01em; margin: 0; }
.vxf-more-head h2 i { color: #e6007e; margin-right: .3rem; }
.vxf-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem; border-radius: 99px; font-weight: 800; font-size: .9rem; text-decoration: none !important; border: 2px solid #1a1a2e; color: #1a1a2e !important; background: #fff; }
.vxf-btn:hover { background: #1a1a2e; color: #F2E70D !important; }
.vxf-btn-yellow { background: #F2E70D; border-color: #F2E70D; }
.vxf-btn-yellow:hover { background: #1a1a2e; border-color: #1a1a2e; }

/* --- tablette / téléphone --- */
@media (max-width: 991px) {
    .vxf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vxf-row { grid-template-columns: 44px 1fr auto; }
    .vxf-row-last { grid-column: 2 / -1; margin-top: .35rem; }
    .vxf-row-last img { width: 24px; height: 24px; }
    .vxf-row-last b { display: inline; }
    .vxf-row-last small { display: inline; }
    .vxf-row-last small::before { content: " · "; }
    .vxf-row-last .vxf-row-last-label { display: inline; }
    .vxf-row-last span { white-space: normal; }
}
@media (max-width: 576px) {
    .vxf-hero-wrap { margin-bottom: 1rem; }
    .vxf-hero { padding: 1.1rem 1.25rem 1.25rem; }
    .vxf-h1 { font-size: 1.6rem; }
    .vxf-sub { font-size: .95rem; }
    .vxf-cards { grid-template-columns: 1fr; }
    .vxf-row { padding: .75rem .85rem; gap: 0 .7rem; }
    .vxf-row-title { font-size: .98rem; }
    .vxf-row-count .vxf-pill { font-size: .78rem; padding: .25rem .6rem; }
    .vxf-topics { border-radius: 10px; }
    .vxf-author img { width: 32px; height: 32px; }
}