/* ============================================================
   FANZONE FORUM — Design PlushForums
   Ultra-épuré · blanc · typographie claire · mobile-first
   Police : system-ui (comme Plush, pas de webfont externe)
   ============================================================ */

:root {
  --fz-rouge      : #C8102E;
  --fz-rouge-dark : #a00d25;
  --fz-blanc      : #ffffff;
  --fz-bg         : #f5f5f5;
  --fz-card       : #ffffff;
  --fz-border     : #e8e8e8;
  --fz-texte      : #333333;
  --fz-texte-2    : #666666;
  --fz-texte-3    : #999999;
  --fz-vert       : #5cb85c;
  --fz-radius     : 4px;
  --fz-max-w      : 1060px;
  --fz-sidebar-w  : 220px;
  --fz-font       : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── RESET ── */
.fz-wrap *, .fz-wrap *::before, .fz-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.fz-wrap {
  font-family : var(--fz-font);
  font-size   : 14px;
  line-height : 1.5;
  color       : var(--fz-texte);
  background  : var(--fz-bg);
  min-height  : 60vh;
  -webkit-font-smoothing: antialiased;
}
.fz-wrap a { color: var(--fz-rouge); text-decoration: none; }
.fz-wrap a:hover { text-decoration: underline; }
.fz-wrap ul, .fz-wrap ol { list-style: none; }
.fz-wrap img { max-width: 100%; display: block; }

/* ════════════════════════════════════════════
   HEADER — barre rouge comme Plush
   ════════════════════════════════════════════ */
.fz-header {
  background  : var(--fz-rouge);
  position    : sticky;
  top         : 0;
  z-index     : 90;
  padding     : 0 16px;
}
.fz-header__inner {
  max-width   : var(--fz-max-w);
  margin      : 0 auto;
  height      : 50px;
  display     : flex;
  align-items : center;
  gap         : 24px;
}
.fz-logo {
  font-size   : 20px;
  font-weight : 700;
  color       : #fff;
  text-decoration: none;
  font-style  : italic;
  flex-shrink : 0;
  display     : flex;
  align-items : center;
  gap         : 8px;
}
.fz-logo:hover { text-decoration: none; color: #fff; }
.fz-logo img { max-height: 34px; width: auto; }

.fz-nav { display: flex; gap: 0; flex: 1; }
.fz-nav__link {
  padding     : 0 14px;
  height      : 50px;
  display     : flex;
  align-items : center;
  color       : rgba(255,255,255,.85);
  font-size   : 13px;
  font-weight : 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  transition  : background .15s;
}
.fz-nav__link:hover { background: rgba(0,0,0,.12); text-decoration: none; color: #fff; }
.fz-nav__link--active { background: rgba(0,0,0,.15); color: #fff; }

.fz-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fz-header__search {
  position    : relative;
  display     : flex;
  align-items : center;
}
.fz-header__search input {
  background  : rgba(255,255,255,.2);
  border      : none;
  border-radius: var(--fz-radius);
  padding     : 5px 30px 5px 10px;
  font-size   : 13px;
  color       : #fff;
  width       : 160px;
  outline     : none;
  transition  : background .2s, width .2s;
}
.fz-header__search input::placeholder { color: rgba(255,255,255,.6); }
.fz-header__search input:focus { background: rgba(255,255,255,.3); width: 200px; }
.fz-header__search-icon {
  position    : absolute;
  right       : 8px;
  color       : rgba(255,255,255,.7);
  font-size   : 13px;
  pointer-events: none;
}

.fz-btn-icon {
  background  : rgba(255,255,255,.15);
  border      : none;
  color       : #fff;
  cursor      : pointer;
  width       : 32px; height: 32px;
  border-radius: 50%;
  display     : flex;
  align-items : center;
  justify-content: center;
  font-size   : 14px;
  position    : relative;
  transition  : background .15s;
}
.fz-btn-icon:hover { background: rgba(255,255,255,.25); }
.fz-notif-badge {
  position    : absolute;
  top         : -2px; right: -2px;
  min-width   : 16px; height: 16px;
  background  : #fff;
  color       : var(--fz-rouge);
  border-radius: 8px;
  font-size   : 9px; font-weight: 800;
  display     : flex; align-items: center; justify-content: center;
  padding     : 0 3px; line-height: 1;
}
.fz-notif-badge--hidden { display: none; }

.fz-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s;
}
.fz-user-avatar:hover { border-color: #fff; }
.fz-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════
   LAYOUT — sidebar gauche + contenu
   ════════════════════════════════════════════ */
.fz-layout {
  max-width   : var(--fz-max-w);
  margin      : 0 auto;
  padding     : 20px 16px;
  display     : grid;
  grid-template-columns: var(--fz-sidebar-w) 1fr;
  gap         : 20px;
  align-items : start;
}
.fz-sidebar {
  position    : sticky;
  top         : 66px;
  display     : flex;
  flex-direction: column;
  gap         : 0;
}
.fz-main { min-width: 0; }

/* ════════════════════════════════════════════
   SIDEBAR — style Plush : blocs blancs, texte simple
   ════════════════════════════════════════════ */
.fz-card {
  background  : var(--fz-card);
  border      : 1px solid var(--fz-border);
  border-radius: var(--fz-radius);
  overflow    : hidden;
  margin-bottom: 12px;
}
.fz-card__header {
  padding     : 10px 14px;
  border-bottom: 1px solid var(--fz-border);
  font-size   : 12px;
  font-weight : 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color       : var(--fz-texte-3);
  display     : flex;
  align-items : center;
  gap         : 6px;
}
.fz-card__title { color: var(--fz-texte-3); }

/* Catégories sidebar */
.fz-cat-item {
  display     : flex;
  align-items : center;
  gap         : 8px;
  padding     : 8px 14px;
  border-bottom: 1px solid var(--fz-border);
  cursor      : pointer;
  text-decoration: none;
  color       : var(--fz-texte);
  font-size   : 13px;
  transition  : background .1s;
}
.fz-cat-item:last-child { border-bottom: none; }
.fz-cat-item:hover { background: #fafafa; text-decoration: none; }
.fz-cat-item--active { background: #fef5f6; color: var(--fz-rouge); font-weight: 600; }
.fz-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fz-cat-info { flex: 1; min-width: 0; }
.fz-cat-name { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-cat-count { font-size: 11px; color: var(--fz-texte-3); }
.fz-cat-badge { background: var(--fz-rouge); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

/* Sujets populaires */
.fz-hot-item {
  padding     : 9px 14px;
  border-bottom: 1px solid var(--fz-border);
  text-decoration: none;
  display     : block;
  color       : inherit;
  transition  : background .1s;
}
.fz-hot-item:last-child { border-bottom: none; }
.fz-hot-item:hover { background: #fafafa; text-decoration: none; }
.fz-hot-rank { font-size: 10px; color: var(--fz-texte-3); display: block; margin-bottom: 1px; }
.fz-hot-title { font-size: 13px; color: var(--fz-texte); display: block; line-height: 1.35; margin-bottom: 2px; }
.fz-hot-meta { font-size: 11px; color: var(--fz-texte-3); }
.fz-hot-meta strong { color: var(--fz-rouge); }

/* Favoris */
.fz-fav-item {
  display     : flex;
  align-items : center;
  gap         : 7px;
  padding     : 8px 14px;
  border-bottom: 1px solid var(--fz-border);
  cursor      : pointer;
  text-decoration: none;
  color       : inherit;
  transition  : background .1s;
}
.fz-fav-item:last-child { border-bottom: none; }
.fz-fav-item:hover { background: #fafafa; }
.fz-fav-pin { font-size: 11px; color: #f0ad4e; flex-shrink: 0; }
.fz-fav-title { font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-fav-new { width: 6px; height: 6px; background: var(--fz-rouge); border-radius: 50%; }

/* En ligne */
.fz-online { padding: 10px 14px; }
.fz-online__avatars { display: flex; margin-bottom: 8px; }
.fz-online__avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--fz-card);
  margin-left: -5px;
  background: var(--fz-bg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
.fz-online__avatar:first-child { margin-left: 0; }
.fz-online__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fz-online__stat { font-size: 12px; color: var(--fz-texte-2); }
.fz-online__stat strong { color: var(--fz-vert); }

/* ════════════════════════════════════════════
   BOUTONS
   ════════════════════════════════════════════ */
.fz-btn {
  display     : inline-flex;
  align-items : center;
  gap         : 5px;
  padding     : 7px 14px;
  border-radius: var(--fz-radius);
  font-family : var(--fz-font);
  font-weight : 600;
  font-size   : 13px;
  cursor      : pointer;
  border      : 1px solid transparent;
  text-decoration: none;
  white-space : nowrap;
  transition  : all .15s;
  line-height : 1.4;
}
.fz-btn--primary { background: var(--fz-rouge); color: #fff; border-color: var(--fz-rouge); }
.fz-btn--primary:hover { background: var(--fz-rouge-dark); border-color: var(--fz-rouge-dark); color: #fff; text-decoration: none; }
.fz-btn--secondary { background: #fff; color: var(--fz-texte-2); border-color: #ccc; }
.fz-btn--secondary:hover { background: #f5f5f5; color: var(--fz-texte); text-decoration: none; }
.fz-btn--ghost { background: transparent; color: var(--fz-texte-2); border-color: transparent; }
.fz-btn--ghost:hover { background: #f0f0f0; text-decoration: none; }
.fz-btn--danger { background: #fff; color: #c0392b; border-color: #c0392b; }
.fz-btn--danger:hover { background: #fef0f0; }
.fz-btn--sm { padding: 4px 10px; font-size: 12px; }
.fz-btn--lg { padding: 10px 20px; font-size: 14px; }
.fz-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ════════════════════════════════════════════
   TOOLBAR — filtres sous le header
   ════════════════════════════════════════════ */
.fz-toolbar {
  background  : var(--fz-card);
  border-bottom: 1px solid var(--fz-border);
  padding     : 0 16px;
}
.fz-toolbar__inner {
  max-width   : var(--fz-max-w);
  margin      : 0 auto;
  display     : flex;
  align-items : center;
  gap         : 4px;
  height      : 42px;
  flex-wrap   : wrap;
}
.fz-search { position: relative; flex: 1; max-width: 300px; }
.fz-search__icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--fz-texte-3); font-size: 12px; pointer-events: none; }
.fz-search__input {
  width: 100%; background: var(--fz-bg); border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius); padding: 6px 10px 6px 28px;
  font-size: 13px; color: var(--fz-texte); outline: none; font-family: var(--fz-font);
  transition: border-color .2s;
}
.fz-search__input:focus { border-color: var(--fz-rouge); }
.fz-search__input::placeholder { color: var(--fz-texte-3); }

.fz-filters { display: flex; gap: 2px; }
.fz-filter {
  padding: 5px 12px; border-radius: var(--fz-radius); font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; background: none; color: var(--fz-texte-3);
  font-family: var(--fz-font); transition: all .15s; text-transform: uppercase; letter-spacing: .3px;
}
.fz-filter:hover { background: var(--fz-bg); color: var(--fz-texte-2); }
.fz-filter--active { background: var(--fz-bg); color: var(--fz-texte); }

/* ════════════════════════════════════════════
   FEED — LISTE DES TOPICS style Plush
   ════════════════════════════════════════════ */
.fz-feed { display: flex; flex-direction: column; }
.fz-feed__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 14px; flex-wrap: wrap; gap: 8px;
}
.fz-feed__title { font-size: 20px; font-weight: 700; color: var(--fz-texte); }
.fz-feed__sort { display: flex; gap: 2px; }
.fz-sort-btn {
  padding: 4px 11px; border-radius: var(--fz-radius); font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; background: none; color: var(--fz-texte-3);
  font-family: var(--fz-font); transition: all .15s;
}
.fz-sort-btn:hover { border-color: var(--fz-border); color: var(--fz-texte-2); }
.fz-sort-btn--active { border-color: var(--fz-border); background: #fff; color: var(--fz-texte); }

/* Séparateur */
.fz-separator {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; margin-bottom: 2px;
}
.fz-separator__line { flex: 1; height: 1px; background: var(--fz-border); }
.fz-separator__label { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--fz-texte-3); white-space: nowrap; }

/* ── CARTE TOPIC — le cœur du design Plush ── */
.fz-topic {
  background  : var(--fz-card);
  border      : 1px solid var(--fz-border);
  border-radius: var(--fz-radius);
  padding     : 12px 14px;
  display     : flex;
  align-items : center;
  gap         : 12px;
  margin-bottom: 1px;
  text-decoration: none;
  color       : inherit;
  transition  : background .1s;
  position    : relative;
}
.fz-topic:hover { background: #fafafa; text-decoration: none; }
.fz-topic--pinned  { border-left: 3px solid #f0ad4e; }
.fz-topic--hot     { border-left: 3px solid var(--fz-rouge); }
.fz-topic--unread  { }
.fz-topic--closed  { opacity: .75; }

/* Avatar auteur */
.fz-topic__avatar {
  width       : 38px; height: 38px;
  border-radius: 50%;
  flex-shrink : 0;
  display     : flex;
  align-items : center;
  justify-content: center;
  font-weight : 700;
  font-size   : 14px;
  color       : #fff;
  overflow    : hidden;
}
.fz-topic__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Contenu principal */
.fz-topic__main { flex: 1; min-width: 0; }
.fz-topic__header { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; flex-wrap: wrap; }
.fz-topic__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 2px; flex-shrink: 0;
}
.fz-topic__title {
  font-size   : 14px;
  font-weight : 600;
  color       : var(--fz-texte);
  line-height : 1.3;
  flex        : 1;
}
.fz-topic--unread .fz-topic__title { color: #111; }

.fz-topic__badges { display: flex; gap: 4px; }
.fz-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 2px; }
.fz-badge--hot     { background: #fdf2f2; color: #c0392b; }
.fz-badge--pinned  { background: #fefaf0; color: #e67e22; }
.fz-badge--new     { background: #f0fdf4; color: #27ae60; }
.fz-badge--closed  { background: #f5f5f5; color: var(--fz-texte-3); }
.fz-badge--pending { background: #fefaf0; color: #e67e22; }

/* Méta : auteur · date · tags */
.fz-topic__meta {
  font-size: 12px; color: var(--fz-texte-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fz-topic__meta-author { color: var(--fz-texte-2); font-weight: 500; transition: color .15s; }
.fz-topic__meta-author:hover { color: var(--fz-rouge); }

/* Aperçu du message */
.fz-topic__preview {
  font-size: 12px; color: var(--fz-texte-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}

/* ── Compteur de réponses (colonne droite) — exactement comme Plush ── */
.fz-topic__stats {
  flex-shrink : 0;
  text-align  : center;
  min-width   : 52px;
  padding-left: 12px;
  border-left : 1px solid var(--fz-border);
}
.fz-topic__replies {
  font-size   : 20px;
  font-weight : 700;
  color       : var(--fz-texte-2);
  line-height : 1;
  display     : block;
}
.fz-topic--hot .fz-topic__replies { color: var(--fz-rouge); }
.fz-topic__replies-label {
  font-size: 10px; color: var(--fz-texte-3); display: block;
  text-transform: uppercase; letter-spacing: .3px;
}
.fz-topic__views { font-size: 10px; color: var(--fz-texte-3); display: block; margin-top: 2px; }

/* Dernier post */
.fz-topic__last {
  flex-shrink : 0;
  text-align  : right;
  min-width   : 80px;
  display     : flex;
  flex-direction: column;
  align-items : flex-end;
  gap         : 2px;
}
.fz-topic__last-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center;
  justify-content: center; font-size: 8px; font-weight: 700;
  color: #fff; background: var(--fz-bg);
}
.fz-topic__last-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fz-topic__last-time { font-size: 11px; color: var(--fz-texte-3); }

/* Bouton charger plus */
.fz-load-more-wrap { text-align: center; padding: 14px 0; }

/* ════════════════════════════════════════════
   THREAD — fil de discussion
   ════════════════════════════════════════════ */
.fz-thread__breadcrumb {
  font-size: 12px; color: var(--fz-texte-3);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.fz-thread__breadcrumb a { color: var(--fz-rouge); }
.fz-thread__topbar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--fz-border);
  margin-bottom: 4px; flex-wrap: wrap;
}
.fz-thread__tag { padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; }
.fz-thread__meta { font-size: 12px; color: var(--fz-texte-3); }
.fz-thread__actions { margin-left: auto; display: flex; gap: 6px; }
.fz-thread__title {
  font-size: 22px; font-weight: 700; color: var(--fz-texte);
  margin-bottom: 16px; line-height: 1.3;
}

/* POST */
.fz-post {
  background: var(--fz-card);
  border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius);
  overflow: hidden; margin-bottom: 6px;
}
.fz-post--op { border-left: 3px solid var(--fz-rouge); }
.fz-post--solution { border-left: 3px solid #27ae60; }

.fz-post__header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--fz-border);
  background: #fafafa;
}
.fz-post__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
}
.fz-post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fz-post__author-info { flex: 1; min-width: 0; }
.fz-post__author-name { font-weight: 600; font-size: 13px; display: block; }
.fz-post__author-meta { font-size: 11px; color: var(--fz-texte-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fz-post__role-badge { background: #fdf2f2; color: var(--fz-rouge); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; text-transform: uppercase; }
.fz-post__role-badge--mod { background: #eff6ff; color: #2563eb; }
.fz-post__time { font-size: 11px; color: var(--fz-texte-3); flex-shrink: 0; }

.fz-post__body {
  padding: 14px;
  font-size: 14px; line-height: 1.7; color: var(--fz-texte-2);
}
.fz-post__body p { margin-bottom: 10px; }
.fz-post__body p:last-child { margin-bottom: 0; }
.fz-post__body strong, .fz-post__body b { color: var(--fz-texte); }
.fz-post__body a { color: var(--fz-rouge); }
.fz-post__body ul { list-style: disc; margin: 8px 0 10px 20px; }
.fz-post__body ol { list-style: decimal; margin: 8px 0 10px 20px; }
.fz-post__body li { margin-bottom: 3px; }
.fz-post__body code { background: #f5f5f5; padding: 1px 4px; border-radius: 2px; font-size: 12px; font-family: monospace; }
.fz-post__body pre { background: #f5f5f5; padding: 10px 12px; border-radius: var(--fz-radius); overflow-x: auto; margin: 10px 0; border: 1px solid var(--fz-border); }
.fz-post__body blockquote {
  border-left: 3px solid #ddd; margin: 10px 0;
  padding: 8px 12px; background: #fafafa;
  border-radius: 0 var(--fz-radius) var(--fz-radius) 0;
  color: var(--fz-texte-3); font-style: italic;
}

.fz-post__actions {
  display: flex; align-items: center; gap: 2px;
  padding: 7px 10px;
  border-top: 1px solid var(--fz-border);
  background: #fafafa;
}
.fz-post__action {
  background: none; border: 1px solid transparent; color: var(--fz-texte-3);
  padding: 3px 9px; border-radius: var(--fz-radius); cursor: pointer;
  font-family: var(--fz-font); font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px; transition: all .15s;
}
.fz-post__action:hover { background: #fff; border-color: var(--fz-border); color: var(--fz-texte-2); }
.fz-post__action--liked { color: var(--fz-rouge); background: #fdf2f2; border-color: #f5c6c6; }
.fz-post__action--solution { color: #27ae60; background: #f0fdf4; border-color: #b7e4c7; }
.fz-post__action--ml-auto { margin-left: auto; }
.fz-solution-mark {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 14px; background: #f0fdf4;
  border-top: 1px solid #b7e4c7;
  font-size: 12px; font-weight: 600; color: #27ae60;
}

/* ════════════════════════════════════════════
   ÉDITEUR DE RÉPONSE
   ════════════════════════════════════════════ */
.fz-editor {
  background: var(--fz-card);
  border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius);
  margin-top: 10px;
}
.fz-editor__label { font-size: 12px; font-weight: 600; color: var(--fz-texte-2); padding: 10px 14px 0; }
.fz-editor__toolbar {
  display: flex; gap: 1px; padding: 6px 10px;
  border-bottom: 1px solid var(--fz-border);
  background: #fafafa; flex-wrap: wrap;
}
.fz-editor__tool {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; cursor: pointer; font-size: 12px; color: var(--fz-texte-2);
  border: none; background: none; font-family: var(--fz-font); transition: all .15s;
}
.fz-editor__tool:hover { background: #e8e8e8; color: var(--fz-texte); }
.fz-editor__sep { width: 1px; background: var(--fz-border); margin: 3px 3px; }
.fz-editor__textarea {
  width: 100%; background: transparent; border: none;
  padding: 12px 14px; color: var(--fz-texte); font-family: var(--fz-font);
  font-size: 14px; line-height: 1.55; resize: vertical; min-height: 90px; outline: none; display: block;
}
.fz-editor__textarea::placeholder { color: var(--fz-texte-3); }
.fz-editor__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--fz-border); background: #fafafa;
}
.fz-editor__counter { font-size: 11px; color: var(--fz-texte-3); }
.fz-editor__counter--warn  { color: #e67e22; }
.fz-editor__counter--error { color: #c0392b; }

/* ════════════════════════════════════════════
   MODAL NOUVEAU SUJET
   ════════════════════════════════════════════ */
.fz-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 200; display: flex; align-items: flex-start;
  justify-content: center; padding: 60px 16px 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s; overflow-y: auto;
}
.fz-overlay--open { opacity: 1; pointer-events: all; }
.fz-modal {
  background: #fff; border-radius: 6px;
  width: 100%; max-width: 600px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  transform: translateY(-8px); transition: transform .2s; overflow: hidden;
}
.fz-overlay--open .fz-modal { transform: translateY(0); }
.fz-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--fz-border);
  background: #fafafa;
}
.fz-modal__title { font-size: 16px; font-weight: 700; color: var(--fz-texte); }
.fz-modal__close {
  background: none; border: none; color: var(--fz-texte-3); font-size: 18px;
  cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--fz-radius); transition: all .15s; line-height: 1;
}
.fz-modal__close:hover { background: #f0f0f0; color: var(--fz-texte); }
.fz-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.fz-modal__footer {
  padding: 14px 20px; border-top: 1px solid var(--fz-border);
  display: flex; justify-content: flex-end; gap: 8px; background: #fafafa;
}

/* ════════════════════════════════════════════
   FORMULAIRES — style page auth
   ════════════════════════════════════════════ */
.fz-form-group { display: flex; flex-direction: column; gap: 5px; }

.fz-form-label {
  font-size: 11px; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: .08em;
}
.fz-form-label span {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--fz-texte-3); font-size: 10px;
}
.fz-form-label--required::after { content: ' *'; color: var(--fz-rouge); }

.fz-form-input,
.fz-form-select,
.fz-form-textarea {
  background  : #fff;
  border      : 1.5px solid #dde1e8;
  border-radius: 8px;
  padding     : 11px 13px;
  color       : var(--fz-texte);
  font-family : var(--fz-font);
  font-size   : 14px;
  outline     : none;
  transition  : border-color .15s, box-shadow .15s;
  width       : 100%;
  box-sizing  : border-box;
}
.fz-form-input:focus,
.fz-form-select:focus,
.fz-form-textarea:focus {
  border-color : var(--fz-rouge);
  box-shadow   : 0 0 0 3px rgba(200,16,46,.08);
}
.fz-form-input::placeholder,
.fz-form-textarea::placeholder { color: #c0c4cc; }
.fz-form-select {
  appearance: none; cursor: pointer; height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}
.fz-form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.fz-form-error { font-size: 11px; color: #c0392b; margin-top: 2px; }

/* ── Tags / mots-clés — style Rank Math ── */
.fz-tags-input {
  display     : flex;
  flex-wrap   : wrap;
  gap         : 6px;
  padding     : 8px 10px;
  background  : #fff;
  border      : 1.5px solid #dde1e8;
  border-radius: 8px;
  min-height  : 46px;
  cursor      : text;
  transition  : border-color .15s, box-shadow .15s;
  align-items : center;
  box-sizing  : border-box;
}
.fz-tags-input:focus-within {
  border-color : var(--fz-rouge);
  box-shadow   : 0 0 0 3px rgba(200,16,46,.08);
}
.fz-tags-input input {
  border      : none;
  outline     : none;
  font-family : var(--fz-font);
  font-size   : 13px;
  color       : var(--fz-texte);
  background  : transparent;
  flex        : 1;
  min-width   : 120px;
  padding     : 3px 0;
  line-height : 1.4;
}
.fz-tags-input input::placeholder { color: #c0c4cc; }

/* Chip style Rank Math */
.fz-tag {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  background   : #f6f0ff;
  border       : 1px solid #d4b8f5;
  color        : #6b21a8;
  padding      : 4px 6px 4px 8px;
  border-radius: 4px;
  font-size    : 12px;
  font-weight  : 600;
  white-space  : nowrap;
  cursor       : default;
  transition   : all .15s;
  transform-origin: center;
}
.fz-tag:hover { background: #ede9fe; border-color: #c4a8f0; }
.fz-tag__star { color: #a855f7; font-size: 11px; }
.fz-tag__text { color: #6b21a8; }
.fz-tag__remove {
  background   : none;
  border       : none;
  color        : #a78bda;
  cursor       : pointer;
  font-size    : 15px;
  padding      : 0 0 0 2px;
  line-height  : 1;
  display      : flex;
  align-items  : center;
  transition   : color .15s;
  font-weight  : 400;
}
.fz-tag__remove:hover { color: #7c3aed; }

/* ── Sujets similaires ── */
.fz-similar {
  background   : #fffdf0;
  border       : 1px solid #f0e09a;
  border-radius: 8px;
  padding      : 12px 14px;
}
.fz-similar__label {
  font-size    : 11px;
  font-weight  : 700;
  color        : #8a6d00;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.fz-similar__item {
  padding      : 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size    : 13px;
  color        : var(--fz-texte-2);
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  gap          : 6px;
  text-decoration: none;
  transition   : color .15s;
}
.fz-similar__item:last-child { border-bottom: none; }
.fz-similar__item:hover { color: var(--fz-rouge); }
.fz-similar__count { font-size: 11px; color: var(--fz-texte-3); margin-left: auto; }

/* ════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════ */
.fz-pagination { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 16px 0; flex-wrap: wrap; }
.fz-page-btn {
  min-width: 32px; height: 32px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--fz-radius); font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--fz-border); background: var(--fz-blanc); color: var(--fz-texte-2);
  font-family: var(--fz-font); transition: all .15s;
}
.fz-page-btn:hover { border-color: #bbb; color: var(--fz-texte); }
.fz-page-btn--active { background: var(--fz-rouge); border-color: var(--fz-rouge); color: #fff; }
.fz-page-btn--dots { background: none; border-color: transparent; cursor: default; }

/* ════════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════════ */
.fz-toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.fz-toast {
  background: var(--fz-blanc); border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius); padding: 10px 14px;
  font-size: 13px; font-weight: 500; color: var(--fz-texte);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateX(110%); transition: transform .3s ease;
  pointer-events: all; min-width: 200px; max-width: 320px;
}
.fz-toast--show { transform: translateX(0); }
.fz-toast--success { border-left: 3px solid #27ae60; }
.fz-toast--error   { border-left: 3px solid #c0392b; }
.fz-toast--warning { border-left: 3px solid #e67e22; }
.fz-toast--info    { border-left: 3px solid #2980b9; }
.fz-toast__icon { font-size: 13px; flex-shrink: 0; }

/* ════════════════════════════════════════════
   NOTICES
   ════════════════════════════════════════════ */
.fz-notice { padding: 10px 14px; border-radius: var(--fz-radius); font-size: 13px; line-height: 1.5; border-left: 3px solid; margin-bottom: 12px; }
.fz-notice--info    { background: #f0f7ff; border-color: #2980b9; color: #1a5c8f; }
.fz-notice--success { background: #f0fdf4; border-color: #27ae60; color: #1a6e3c; }
.fz-notice--warning { background: #fffdf0; border-color: #e67e22; color: #8a4e00; }
.fz-notice--error   { background: #fef2f2; border-color: #c0392b; color: #8e1a1a; }

/* ════════════════════════════════════════════
   PROFIL
   ════════════════════════════════════════════ */
.fz-profile__header {
  background: var(--fz-card); border: 1px solid var(--fz-border); border-radius: var(--fz-radius);
  padding: 20px; display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.fz-profile__avatar-wrap { position: relative; flex-shrink: 0; }
.fz-profile__avatar { width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--fz-rouge); overflow: hidden; }
.fz-profile__badge { position: absolute; bottom: -2px; right: -2px; background: #e67e22; color: #fff; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 2px; border: 1px solid #fff; }
.fz-profile__info { flex: 1; min-width: 180px; }
.fz-profile__name { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.fz-profile__meta { font-size: 12px; color: var(--fz-texte-3); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.fz-profile__bio { font-size: 13px; color: var(--fz-texte-2); line-height: 1.5; }
.fz-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fz-profile__stat { background: var(--fz-bg); border: 1px solid var(--fz-border); border-radius: var(--fz-radius); padding: 10px; text-align: center; }
.fz-profile__stat-number { font-size: 22px; font-weight: 700; color: var(--fz-texte); display: block; line-height: 1; }
.fz-profile__stat-label { font-size: 10px; color: var(--fz-texte-3); text-transform: uppercase; letter-spacing: .4px; }

/* ════════════════════════════════════════════
   ÉTATS LOADING / VIDE
   ════════════════════════════════════════════ */
.fz-loading { text-align: center; padding: 40px 20px; color: var(--fz-texte-3); }
.fz-loading__spinner { width: 28px; height: 28px; border: 2px solid var(--fz-border); border-top-color: var(--fz-rouge); border-radius: 50%; animation: fz-spin .7s linear infinite; margin: 0 auto 10px; }
@keyframes fz-spin { to { transform: rotate(360deg); } }
.fz-empty { text-align: center; padding: 48px 20px; }
.fz-empty__icon { font-size: 40px; margin-bottom: 10px; opacity: .35; }
.fz-empty__title { font-size: 18px; font-weight: 700; color: var(--fz-texte); margin-bottom: 6px; }
.fz-empty__text  { font-size: 13px; color: var(--fz-texte-3); max-width: 300px; margin: 0 auto 16px; }

/* ════════════════════════════════════════════
   DROPDOWN
   ════════════════════════════════════════════ */
.fz-dropdown { position: relative; display: inline-block; }
.fz-dropdown__menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px;
  background: var(--fz-blanc); border: 1px solid var(--fz-border); border-radius: var(--fz-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 100; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: all .15s;
}
.fz-dropdown--open .fz-dropdown__menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.fz-dropdown__item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  font-size: 13px; color: var(--fz-texte-2); cursor: pointer;
  transition: background .1s; border: none; background: none;
  width: 100%; text-align: left; font-family: var(--fz-font); text-decoration: none;
}
.fz-dropdown__item:hover { background: var(--fz-bg); color: var(--fz-texte); text-decoration: none; }
.fz-dropdown__item--danger { color: #c0392b; }
.fz-dropdown__item--danger:hover { background: #fef2f2; }
.fz-dropdown__sep { height: 1px; background: var(--fz-border); margin: 3px 0; }

/* ════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════ */
@keyframes fz-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fz-fade-up { animation: fz-fade-up .2s ease both; }
.fz-topic { animation: fz-fade-up .18s ease both; }
.fz-topic:nth-child(1)  { animation-delay: .00s; }
.fz-topic:nth-child(2)  { animation-delay: .03s; }
.fz-topic:nth-child(3)  { animation-delay: .06s; }
.fz-topic:nth-child(4)  { animation-delay: .09s; }
.fz-topic:nth-child(5)  { animation-delay: .12s; }
.fz-topic:nth-child(n+6){ animation-delay: .14s; }

/* ════════════════════════════════════════════
   UTILITAIRES
   ════════════════════════════════════════════ */
.fz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.fz-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-text-soft  { color: var(--fz-texte-3); }
.fz-text-rouge { color: var(--fz-rouge); }
.fz-text-sm    { font-size: 12px; }
.fz-text-xs    { font-size: 11px; }
.fz-fw-bold    { font-weight: 700; }
.fz-hidden     { display: none !important; }
.fz-mt-8  { margin-top: 8px; }
.fz-mt-16 { margin-top: 16px; }
.fz-mb-8  { margin-bottom: 8px; }
.fz-mb-16 { margin-bottom: 16px; }
.fz-flex  { display: flex; align-items: center; }
.fz-flex--gap     { gap: 8px; }
.fz-flex--between { justify-content: space-between; }

/* ════════════════════════════════════════════
   RESPONSIVE MOBILE
   ════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root { --fz-sidebar-w: 180px; }
}
@media (max-width: 680px) {
  .fz-layout { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .fz-sidebar { display: none; }
  .fz-nav { display: none; }
  .fz-header__search { display: none; }
  .fz-topic__last { display: none; }
  .fz-topic__preview { display: none; }
  .fz-topic__stats { min-width: 44px; }
  .fz-topic__replies { font-size: 18px; }
  .fz-thread__title { font-size: 18px; }
  .fz-post__body { padding: 12px; font-size: 13px; }
  .fz-overlay { padding-top: 16px; }
  .fz-profile__stats { grid-template-columns: 1fr 1fr; }
  .fz-toast-container { left: 12px; right: 12px; bottom: 12px; }
  .fz-toast { min-width: unset; max-width: 100%; }
  .fz-wrap { padding-bottom: 60px; }
}

/* Barre mobile bas */
.fz-mobile-bar { display: none; }
@media (max-width: 680px) {
  .fz-mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--fz-blanc); border-top: 1px solid var(--fz-border);
    z-index: 80; box-shadow: 0 -1px 6px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .fz-mobile-bar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 6px 7px; font-size: 9px; font-weight: 700; color: var(--fz-texte-3);
    text-transform: uppercase; letter-spacing: .4px; text-decoration: none;
    cursor: pointer; border: none; background: none; font-family: var(--fz-font);
    transition: color .15s;
  }
  .fz-mobile-bar__item--active { color: var(--fz-rouge); }
  .fz-mobile-bar__icon { font-size: 18px; line-height: 1; }
  .fz-mobile-bar__fab {
    background: var(--fz-rouge); color: #fff !important;
    border-radius: 50%; width: 44px; height: 44px;
    align-self: center; margin-top: -14px;
    box-shadow: 0 3px 10px rgba(200,16,46,.3);
    border: 3px solid var(--fz-blanc);
    font-size: 20px !important; gap: 0; padding: 0; justify-content: center;
  }
}

/* ── Focus ring rouge sur les champs de la modal ── */
#fz-form-topic input:focus,
#fz-form-topic select:focus,
#fz-form-topic textarea:focus {
  border-color: #C8102E !important;
  box-shadow: 0 0 0 4px rgba(200,16,46,.1) !important;
}
#fz-tags-input:focus-within {
  border-color: #C8102E !important;
  box-shadow: 0 0 0 4px rgba(200,16,46,.1) !important;
}
#fz-btn-submit-topic:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,16,46,.4) !important;
}
#fz-btn-submit-topic:active { transform: translateY(0); }

/* ════════════════════════════════════════════
   THREAD STYLE CHAT — bulles avec nom + structure
   ════════════════════════════════════════════ */

/* Container du fil */
#fz-posts-list {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  padding        : 4px 0 16px;
}

/* Bulle de base */
.fz-bubble {
  display        : flex;
  gap            : 10px;
  align-items    : flex-end;
  max-width      : 88%;
  animation      : fz-fade-up .15s ease both;
}

/* Bulle gauche (autres) */
.fz-bubble--left {
  align-self     : flex-start;
  flex-direction : row;
}

/* Bulle droite (auteur connecté = OP ou soi-même) */
.fz-bubble--right {
  align-self     : flex-end;
  flex-direction : row-reverse;
}

/* Avatar dans la bulle */
.fz-bubble__avatar {
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  font-weight    : 700;
  color          : #fff;
  overflow       : hidden;
  align-self     : flex-end;
  margin-bottom  : 2px;
}
.fz-bubble__avatar img { width:100%;height:100%;object-fit:cover; }

/* Groupe : label auteur + bulle */
.fz-bubble__group {
  display        : flex;
  flex-direction : column;
  gap            : 3px;
  min-width      : 0;
  max-width      : 100%;
}

/* Nom + date au dessus de la bulle */
.fz-bubble__meta {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  padding        : 0 4px;
  font-size      : 11px;
  color          : #aaa;
}
.fz-bubble--right .fz-bubble__meta {
  flex-direction : row-reverse;
}
.fz-bubble__author {
  font-weight    : 700;
  font-size      : 12px;
  color          : #555;
}
.fz-bubble--right .fz-bubble__author { color: #C8102E; }

/* La bulle elle-même */
.fz-bubble__content {
  background     : #fff;
  border         : 1px solid #e8e8e8;
  border-radius  : 18px 18px 18px 4px;
  padding        : 11px 15px;
  font-size      : 14px;
  line-height    : 1.6;
  color          : #2a2a2a;
  word-break     : break-word;
  box-shadow     : 0 1px 3px rgba(0,0,0,.06);
}
.fz-bubble--right .fz-bubble__content {
  background     : #C8102E;
  border-color   : #C8102E;
  color          : #fff;
  border-radius  : 18px 18px 4px 18px;
  box-shadow     : 0 2px 8px rgba(200,16,46,.2);
}

/* Bulle OP (premier message) : fond sombre */
.fz-bubble--op .fz-bubble__content {
  background     : #1a1a2e;
  border-color   : #1a1a2e;
  color          : #fff;
  border-radius  : 18px 18px 18px 4px;
}

/* Actions sous la bulle */
.fz-bubble__actions {
  display        : flex;
  gap            : 6px;
  padding        : 2px 4px;
  opacity        : 0;
  transition     : opacity .15s;
}
.fz-bubble:hover .fz-bubble__actions { opacity: 1; }
.fz-bubble--right .fz-bubble__actions { flex-direction: row-reverse; }
.fz-bubble__action-btn {
  background     : none;
  border         : none;
  cursor         : pointer;
  font-size      : 12px;
  color          : #bbb;
  padding        : 2px 6px;
  border-radius  : 4px;
  transition     : all .15s;
  font-family    : inherit;
}
.fz-bubble__action-btn:hover { background:#f0f0f0; color:#555; }

/* Badge OP */
.fz-bubble__op-badge {
  display        : inline-block;
  background     : #C8102E;
  color          : #fff;
  font-size      : 9px;
  font-weight    : 700;
  padding        : 1px 6px;
  border-radius  : 3px;
  text-transform : uppercase;
  letter-spacing : .04em;
}

/* Séparateur "X réponses" */
.fz-bubble-sep {
  text-align     : center;
  font-size      : 11px;
  color          : #bbb;
  display        : flex;
  align-items    : center;
  gap            : 8px;
  margin         : 8px 0;
}
.fz-bubble-sep::before,
.fz-bubble-sep::after {
  content        : '';
  flex           : 1;
  height         : 1px;
  background     : #ebebeb;
}

/* Message "aucune réponse" */
.fz-no-replies {
  text-align     : center;
  padding        : 28px 16px;
  color          : #bbb;
  font-size      : 14px;
}

@media (max-width:600px) {
  .fz-bubble { max-width: 96%; }
  .fz-bubble__content { font-size: 13px; padding: 9px 12px; }
}