/* ============================================================
   FORUM — habillage V2 (or/pierre) pour le plugin forum Azuriom.
   Dépend des tokens de v2.css et du pont v2-compat.css.
   Tout est scopé sous #forum-page (posé par le layout forum).
   ============================================================ */

/* ---------- Hero compact ---------- */
.phero--compact{padding:150px 0 48px}
.phero--compact h1{font-size:clamp(30px,4.2vw,48px);overflow-wrap:anywhere}
.phero--compact .lede{font-size:clamp(15px,1.15vw,17px)}
@media (max-width:560px){.phero--compact{padding:114px 0 34px}}

/* ---------- Grille contenu + sidebar ---------- */
#forum-page{padding:44px 0 96px}
#forum-page .fgrid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:30px;align-items:start}
@media (max-width:1080px){#forum-page .fgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Fil d'Ariane forum ---------- */
#forum-page .fcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:12px 18px;margin-bottom:22px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(42,34,22,.4),rgba(16,13,9,.7));font-size:13px}
#forum-page .fcrumb .forum-nav-item{color:var(--ink-dim);transition:color .2s;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#forum-page .fcrumb .forum-nav-item:hover{color:var(--gold-200)}
#forum-page .fcrumb .forum-nav-item.active{color:var(--gold-300);font-weight:700}
#forum-page .fcrumb .sep{color:var(--gold-700);font-size:10px}

/* ---------- Blocs catégorie ---------- */
#forum-page .forum-wrapper{margin-bottom:26px}
#forum-page .forums-parent{display:flex;align-items:baseline;gap:12px;padding:0 4px 12px;border-bottom:1px solid var(--line)}
#forum-page .forums-parent-title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.05em;color:var(--gold-300);margin:0}
#forum-page .forums-parent-description{display:inline;font-size:13px;font-weight:400;color:var(--ink-faint);margin:0}
#forum-page .forums{display:flex;flex-direction:column;gap:12px;padding-top:14px}

/* ---------- Ligne forum / discussion ---------- */
#forum-page .forum-item{display:flex;align-items:center;gap:6px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(42,34,22,.42),rgba(16,13,9,.78));box-shadow:var(--shadow-card);transition:border-color .25s,transform .25s,box-shadow .25s}
#forum-page .forum-item:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-card),0 22px 44px -26px rgba(224,168,46,.28)}
#forum-page .forum-item-icon{font-size:24px;color:var(--gold-600);transition:color .25s;flex-shrink:0}
#forum-page .forum-item:hover .forum-item-icon{color:var(--gold-400)}
#forum-page .forum-item-title a{font-weight:700;font-size:15px;color:var(--ink);transition:color .2s}
#forum-page .forum-item-title a:not(.name){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%}
#forum-page .forum-item:hover .forum-item-title a:not(.name){color:var(--gold-200)}
#forum-page .forum-item-description{font-size:13px;color:var(--ink-faint)}
#forum-page .forum-item-du{font-size:12.5px;color:var(--ink-faint);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
#forum-page .forum-item-du .name{color:var(--ink-dim)}
#forum-page .forum-item-du .name:hover{color:var(--gold-300)}
#forum-page .forum-info-number{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);text-align:center;line-height:1.2}
#forum-page .forum-info-text{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
#forum-page .sp-left{border-left:1px solid var(--line-soft)}

/* ---------- Vignette dernier message ---------- */
#forum-page .forum-lastest-profile{position:relative;display:flex;align-items:center;text-decoration:none;flex-shrink:0}
#forum-page .forum-lastest-profile img,#forum-page .forum-lastest-profile-no{width:38px;height:38px;margin:8px;border-radius:50%;border:1px solid var(--line-strong)}
#forum-page .forum-lastest-profile.online::after{content:"";position:absolute;bottom:6px;right:5px;width:12px;height:12px;border-radius:50%;background:var(--online);border:3px solid var(--stone-900);box-shadow:0 0 8px var(--online-glow)}
#forum-page .forum-lastest-profile.offline::after{display:none}
#forum-page .forum-lastest-text1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;width:150px;font-size:13px;font-weight:700;color:var(--ink-soft);transition:color .2s}
#forum-page .forum-lastest-text1:hover{color:var(--gold-200)}
#forum-page .forum-lastest-text2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;width:150px;font-size:12px;color:var(--ink-faint)}
#forum-page .forum-lastest-text2 span{font-weight:400}
#forum-page .forum-lastest-text2 a{color:var(--ink-dim)}
#forum-page .forum-lastest-text2 a:hover{color:var(--gold-300)}

/* ---------- Sidebar ---------- */
#forum-page .fside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
@media (max-width:1080px){#forum-page .fside{position:static}}
#forum-page .fside .card{margin:0}
#forum-page .fside .card-header .bi{color:var(--gold-500);margin-right:8px}
#forum-page .profilesection{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(42,34,22,.42),rgba(16,13,9,.78))}
#forum-page .profilesection .profile img{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong)}
#forum-page .profilesection .text{font-weight:700;color:var(--ink)}
#forum-page .profilesection .rank{font-size:12px}
#forum-page .fside .forum-lastest-comments{display:flex;flex-direction:column;gap:4px;padding:10px 12px}
#forum-page .fside .forum-lastest-text1,#forum-page .fside .forum-lastest-text2{width:100%}
#forum-page .fside .stats .card-body>div{padding:5px 0;font-size:13.5px;color:var(--ink-soft)}
#forum-page .fside .stats .card-body>div+div{border-top:1px solid var(--line-soft)}
#forum-page .fside .stats-text{color:var(--ink-faint)}
#forum-page .online-users{display:flex;flex-wrap:wrap;gap:2px;font-size:13px;color:var(--ink-faint)}
#forum-page .online-user{position:relative;display:inline-block;width:26px;height:38px}
#forum-page .online-user img{position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;border:2px solid var(--stone-900);box-shadow:0 0 0 1px var(--line-strong)}

/* ---------- Page discussion (posts) ---------- */
#forum-page .forum-post-profile{position:relative;display:flex;justify-content:center;align-items:center}
#forum-page .forum-post-profile img{width:76px;height:76px;margin:8px;border-radius:50%;border:2px solid var(--line-strong)}
#forum-page .forum-post-profile.online::after{content:"";position:absolute;bottom:10px;right:calc(50% - 34px);width:16px;height:16px;border-radius:50%;background:var(--online);border:3px solid var(--stone-900);box-shadow:0 0 8px var(--online-glow)}
#forum-page .forum-post-profile.offline::after{display:none}
@media (max-width:767px){#forum-page .forum-post-profile.online::after{right:auto;left:56px}}
#forum-page .forum-post-name a{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
#forum-page .forum-post-name a:hover{color:var(--gold-200)}

/* ---------- Divers ---------- */
#forum-page .no-markdown p{display:inline;margin:0}
#forum-page .text-no-transform{text-transform:none}
#forum-page h4.fw-bold{font-family:var(--display);color:var(--ink)}

/* Empilement mobile : les colonnes stats/dernier message passent dessous */
@media (max-width:767px){
  #forum-page .forum-item{flex-wrap:wrap}
}

/* Badge de grade — pastille teintee coherente deluxe-v2 (remplace le bloc de couleur plein) */
.role-badge{
  --rc: var(--role-color, #d4a017);
  display:inline-flex; align-items:center; gap:.4em;
  padding:3px 11px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.03em; line-height:1.5;
  vertical-align:middle; white-space:nowrap;
  text-shadow:none;
  /* Fallback universel (navigateurs sans color-mix) : texte clair lisible, teinte or sobre. */
  color:#f3e7c8; background:rgba(212,160,23,.15); border:1px solid rgba(212,160,23,.42);
}
.role-badge i{ font-size:.92em; }

/* Version teintee par role. Texte eclairci a 35% de la couleur de role -> >= 4.5:1 (WCAG AA)
   sur le fond de post deluxe-v2, quelle que soit la couleur du role. */
@supports (color: color-mix(in srgb, red, white)){
  .badge.role-badge, .rank.role-badge{
    color:color-mix(in srgb, var(--rc) 35%, #fff) !important;
    background:color-mix(in srgb, var(--rc) 15%, transparent) !important;
    border:1px solid color-mix(in srgb, var(--rc) 42%, transparent) !important;
  }
}