/* ============================================================================ FORUM SUJET — Refonte ergonomique 2026 Inspiration : Discourse (lisibilité, hiérarchie) + Reddit (actions par post) + Stack Overflow (OP badge, numéros ancrables) + Notion (typo). Scope : .fs-page uniquement. Light + Dark via [data-theme] sur . ============================================================================ */ .fs-page { --fs-bg: var(--lt-sun-bg-soft, #fffaf0); --fs-surface: var(--lt-sun-surface, #ffffff); --fs-surface-2: rgba(255, 252, 246, 0.88); --fs-ink: var(--lt-sun-ink, #17202a); --fs-ink-soft: var(--lt-sun-ink-soft, rgba(23, 32, 42, 0.72)); --fs-ink-mute: var(--lt-sun-ink-muted, rgba(23, 32, 42, 0.52)); --fs-line: var(--lt-sun-line, rgba(138, 90, 15, 0.22)); --fs-line-soft: rgba(138, 90, 15, 0.10); --fs-gold: var(--lt-sun-gold, #a86f12); --fs-gold-strong: var(--lt-sun-gold-strong, #8a5a0f); --fs-shadow: var(--lt-sun-shadow, 0 18px 44px rgba(23, 32, 42, 0.08)); --fs-radius: 14px; --fs-radius-sm: 9px; --fs-ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="dark"] .fs-page { --fs-bg: var(--lt-moon-bg-soft, #0e1b26); --fs-surface: var(--lt-moon-surface, #121f2b); --fs-surface-2: rgba(23, 40, 56, 0.82); --fs-ink: var(--lt-moon-ink, #f2ead8); --fs-ink-soft: var(--lt-moon-ink-soft, rgba(242, 234, 216, 0.72)); --fs-ink-mute: var(--lt-moon-ink-muted, rgba(242, 234, 216, 0.48)); --fs-line: var(--lt-moon-line, rgba(212, 160, 23, 0.20)); --fs-line-soft: rgba(212, 160, 23, 0.10); --fs-gold: var(--lt-moon-gold, #d4a017); --fs-gold-strong: var(--lt-moon-gold-strong, #f0c842); --fs-shadow: var(--lt-moon-shadow, 0 18px 48px rgba(0, 0, 0, 0.38)); } /* ============================================================================ HERO compact (titre + meta + actions) ============================================================================ */ .fs-hero { padding: clamp(1.4rem, 4vw, 2.4rem) 0 0; background: transparent; } .fs-hero__inner { max-width: 880px; margin: 0 auto; } .fs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: 0.78rem; color: var(--fs-ink-mute); margin-bottom: 0.9rem; } .fs-breadcrumb a { color: var(--fs-ink-mute); text-decoration: none; transition: color 160ms ease; } .fs-breadcrumb a:hover { color: var(--fs-gold); } .fs-breadcrumb__sep { opacity: 0.5; } .fs-title { font-family: "Fraunces", "Cinzel", Georgia, serif; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; color: var(--fs-ink); margin: 0 0 0.9rem; } .fs-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 1.2rem; font-size: 0.85rem; color: var(--fs-ink-mute); } .fs-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; } .fs-meta__item strong { color: var(--fs-ink); font-weight: 700; } .fs-meta__item svg { color: var(--fs-gold); flex-shrink: 0; } .fs-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; } /* ============================================================================ Boutons (réutilisés dans hero, formulaire, navigation bas) ============================================================================ */ .fs-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 38px; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid transparent; font: 600 0.86rem/1 inherit; text-decoration: none; cursor: pointer; transition: background 160ms var(--fs-ease), color 160ms var(--fs-ease), border-color 160ms var(--fs-ease), transform 160ms var(--fs-ease); } .fs-btn--small { min-height: 34px; padding: 0.4rem 0.85rem; font-size: 0.82rem; } .fs-btn--primary { background: linear-gradient(135deg, var(--fs-gold), var(--fs-gold-strong)); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -8px var(--fs-gold); } .fs-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px var(--fs-gold); filter: brightness(1.06); } .fs-btn--ghost { background: var(--fs-surface); color: var(--fs-ink); border-color: var(--fs-line); } .fs-btn--ghost:hover { border-color: var(--fs-gold); color: var(--fs-gold); } /* ============================================================================ Section "thread" — liste des posts ============================================================================ */ .fs-thread-section { padding: 1.4rem 0 4rem; } .fs-thread-container { max-width: 880px; margin: 0 auto; } .fs-thread { display: flex; flex-direction: column; gap: 0.9rem; } /* ============================================================================ POST — layout 2 colonnes (aside auteur à gauche + main à droite) Inspiration Discourse + Stack Overflow. ============================================================================ */ .fs-post { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: var(--fs-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); scroll-margin-top: 100px; /* Pour les anchors */ transition: border-color 200ms ease, box-shadow 200ms ease; } .fs-post:hover { border-color: color-mix(in srgb, var(--fs-gold) 32%, var(--fs-line)); } .fs-post:target { border-color: var(--fs-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-gold) 28%, transparent); animation: fsTargetFlash 1.4s ease; } @keyframes fsTargetFlash { 0% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--fs-gold) 36%, transparent); } 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-gold) 28%, transparent); } } .fs-post--op { border-left: 3px solid var(--fs-gold); background: linear-gradient(180deg, color-mix(in srgb, var(--fs-gold) 5%, transparent), transparent 40%), var(--fs-surface); } .fs-post--op-reply { border-left: 3px solid color-mix(in srgb, var(--fs-gold) 50%, transparent); } /* ----- ASIDE (avatar + auteur + badge) ----- */ .fs-post__aside { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; } .fs-post__avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--fs-surface-2); border: 2px solid var(--fs-line); display: grid; place-items: center; flex-shrink: 0; } .fs-post__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .fs-post__avatar-initial { font-family: "Fraunces", Georgia, serif; font-size: 1.45rem; font-weight: 600; color: var(--fs-gold); background: color-mix(in srgb, var(--fs-gold) 14%, transparent); width: 100%; height: 100%; display: grid; place-items: center; } .fs-post__avatar-initial.is-hidden { display: none; } .fs-post__author { font-weight: 700; color: var(--fs-ink); font-size: 0.86rem; line-height: 1.15; word-break: break-word; max-width: 100%; } .fs-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .fs-badge--op { background: linear-gradient(135deg, var(--fs-gold), var(--fs-gold-strong)); color: #fff; } .fs-badge--op-reply { background: color-mix(in srgb, var(--fs-gold) 16%, transparent); color: var(--fs-gold-strong); border: 1px solid color-mix(in srgb, var(--fs-gold) 40%, transparent); } /* ----- MAIN (header + content + actions) ----- */ .fs-post__main { min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; } .fs-post__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--fs-line-soft); padding-bottom: 0.55rem; } .fs-post__num { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.74rem; font-weight: 700; color: var(--fs-ink-mute); text-decoration: none; letter-spacing: 0.04em; transition: color 160ms ease; } .fs-post__num:hover { color: var(--fs-gold); } .fs-post__time { font-size: 0.74rem; color: var(--fs-ink-mute); font-variant-numeric: tabular-nums; } .fs-post__content { font-size: 0.96rem; line-height: 1.65; color: var(--fs-ink); word-wrap: break-word; overflow-wrap: break-word; } .fs-post__content blockquote { margin: 0.4rem 0; padding: 0.5rem 0.9rem; border-left: 3px solid color-mix(in srgb, var(--fs-gold) 60%, transparent); background: color-mix(in srgb, var(--fs-gold) 5%, transparent); color: var(--fs-ink-soft); font-style: italic; border-radius: 0 6px 6px 0; } .fs-post__content a { color: var(--fs-gold-strong); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fs-gold) 40%, transparent); text-underline-offset: 2px; } .fs-post__content a:hover { text-decoration-color: var(--fs-gold); } .fs-post__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.6rem; margin-top: 0.2rem; border-top: 1px dashed var(--fs-line-soft); } .fs-post__action { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border: 1px solid transparent; background: transparent; color: var(--fs-ink-mute); font: 600 0.74rem/1 inherit; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .fs-post__action:hover { background: color-mix(in srgb, var(--fs-gold) 10%, transparent); color: var(--fs-gold); border-color: color-mix(in srgb, var(--fs-gold) 30%, transparent); } .fs-post__action.is-copied { background: color-mix(in srgb, #2c8c5e 14%, transparent); color: #1f6f48; border-color: color-mix(in srgb, #2c8c5e 35%, transparent); } [data-theme="dark"] .fs-post__action.is-copied { background: color-mix(in srgb, #50c878 16%, transparent); color: #82d1a7; } /* ============================================================================ Séparateur "X réponses" ============================================================================ */ .fs-divider { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0; margin: 0.4rem 0; } .fs-divider__line { flex: 1; height: 1px; background: var(--fs-line); } .fs-divider__label { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-ink-mute); } .fs-empty-replies { padding: 2rem 1rem; text-align: center; border: 1px dashed var(--fs-line); border-radius: var(--fs-radius); color: var(--fs-ink-mute); background: var(--fs-surface-2); margin-top: 0.8rem; } /* ============================================================================ FORMULAIRE DE RÉPONSE ============================================================================ */ .fs-reply { margin-top: 2rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow); scroll-margin-top: 80px; } .fs-reply__head h2 { margin: 0 0 0.3rem; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--fs-ink); } .fs-reply__hint { margin: 0 0 1rem; font-size: 0.82rem; color: var(--fs-ink-mute); } .fs-alert { padding: 0.75rem 1rem; border-radius: var(--fs-radius-sm); font-size: 0.86rem; margin-bottom: 0.9rem; } .fs-alert--err { background: color-mix(in srgb, #c0392b 8%, transparent); color: #b53029; border: 1px solid color-mix(in srgb, #c0392b 30%, transparent); } [data-theme="dark"] .fs-alert--err { background: color-mix(in srgb, #ff5a4a 14%, transparent); color: #ff9a82; border-color: color-mix(in srgb, #ff5a4a 35%, transparent); } .fs-reply__toolbar { display: flex; gap: 0.25rem; margin-bottom: 0.55rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--fs-line); } .fs-tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--fs-ink-mute); border-radius: 7px; cursor: pointer; font: inherit; transition: background 160ms ease, color 160ms ease; } .fs-tb-btn:hover { background: color-mix(in srgb, var(--fs-gold) 14%, transparent); color: var(--fs-gold-strong); } .fs-tb-btn strong, .fs-tb-btn em { font-size: 0.92rem; } .fs-reply__form textarea { width: 100%; min-height: 160px; max-height: 50vh; padding: 0.85rem 1rem; border: 1px solid var(--fs-line); border-radius: var(--fs-radius-sm); background: var(--fs-surface); color: var(--fs-ink); font: inherit; font-size: 0.95rem; line-height: 1.55; resize: vertical; outline: 0; transition: border-color 180ms ease, box-shadow 180ms ease; } .fs-reply__form textarea:focus { border-color: var(--fs-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-gold) 22%, transparent); } .fs-reply__form textarea::placeholder { color: var(--fs-ink-mute); font-style: italic; } .fs-reply__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 0.7rem; flex-wrap: wrap; } .fs-charcount { font-size: 0.74rem; color: var(--fs-ink-mute); font-variant-numeric: tabular-nums; } .fs-charcount.is-near { color: #c08d18; font-weight: 700; } .fs-charcount.is-over { color: #c0392b; font-weight: 700; } .fs-reply__buttons { display: flex; gap: 0.5rem; align-items: center; } /* ============================================================================ STICKY CTA mobile — n'apparaît qu'en dessous du fold ============================================================================ */ .fs-sticky-cta { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px; z-index: 30; display: none; align-items: center; gap: 0.4rem; padding: 0.85rem 1.2rem; border-radius: 999px; background: linear-gradient(135deg, var(--fs-gold), var(--fs-gold-strong)); color: #fff; font: 700 0.88rem/1 inherit; text-decoration: none; box-shadow: 0 12px 30px -8px var(--fs-gold); transition: transform 200ms var(--fs-ease), opacity 200ms ease; } .fs-sticky-cta:hover { transform: translateY(-2px); filter: brightness(1.06); } .fs-sticky-cta.is-visible { display: inline-flex; } @media (min-width: 768px) { .fs-sticky-cta { display: none !important; } } /* ============================================================================ ENCART non connecté ============================================================================ */ .fs-login-required { margin-top: 2rem; padding: 1.4rem; background: linear-gradient(135deg, color-mix(in srgb, var(--fs-gold) 6%, transparent), transparent 60%), var(--fs-surface); border: 1px dashed color-mix(in srgb, var(--fs-gold) 40%, var(--fs-line)); border-radius: var(--fs-radius); text-align: center; color: var(--fs-ink-soft); } .fs-login-required__inner { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; } .fs-login-required svg { color: var(--fs-gold); } .fs-login-required a { color: var(--fs-gold-strong); } .fs-login-required strong { color: var(--fs-ink); } /* ============================================================================ NAVIGATION BAS ============================================================================ */ .fs-bottom-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--fs-line); flex-wrap: wrap; } .fs-bottom-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--fs-ink-mute); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: color 160ms ease; } .fs-bottom-link:hover { color: var(--fs-gold); } .fs-bottom-link svg { color: var(--fs-gold); } /* ============================================================================ MOBILE — passage en stacked ============================================================================ */ @media (max-width: 640px) { .fs-post { grid-template-columns: 1fr; gap: 0.7rem; padding: 1rem 0.95rem; } .fs-post__aside { flex-direction: row; align-items: center; text-align: left; gap: 0.7rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--fs-line-soft); } .fs-post__avatar { width: 42px; height: 42px; } .fs-post__avatar-initial { font-size: 1.05rem; } .fs-post__author { font-size: 0.92rem; } .fs-post__head { flex-wrap: wrap; } .fs-reply { padding: 1.1rem 0.95rem; } .fs-reply__foot { flex-direction: column-reverse; align-items: stretch; } .fs-reply__buttons { width: 100%; justify-content: flex-end; } .fs-bottom-nav { flex-direction: column; align-items: stretch; text-align: center; } .fs-bottom-link { justify-content: center; } } @media (max-width: 360px) { .fs-hero__actions { flex-direction: column; } .fs-hero__actions .fs-btn { width: 100%; justify-content: center; } } /* ============================================================================ HUB FORUM — pages /communaute/forum & /communaute/forum/categorie/X (cat-card grid + latest-card + sort-bar + topic-row) ============================================================================ */ /* Hero lead (sous le titre) */ .fs-lead { margin: 0 0 1.2rem; font-size: clamp(0.95rem, 1.4vw, 1.05rem); color: var(--fs-ink-soft); line-height: 1.6; max-width: 56ch; } /* Breadcrumb : élément courant non-cliquable */ .fs-breadcrumb__current { color: var(--fs-ink); font-weight: 600; } /* Section heads (h2 + sous-titre) */ .fs-section-head { margin-bottom: 1.2rem; } .fs-section-title { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--fs-ink); margin: 0 0 0.3rem; } .fs-section-sub { margin: 0; color: var(--fs-ink-mute); font-size: 0.92rem; } /* =========================================================================== LATEST CARD — encart "dernière activité" en haut du hub =========================================================================== */ .fs-latest-section { padding: 0.4rem 0 0.8rem; } .fs-latest-card { position: relative; display: block; padding: 1.1rem 3rem 1.1rem 1.3rem; background: linear-gradient(135deg, color-mix(in srgb, var(--fs-gold) 10%, transparent), transparent 60%), var(--fs-surface); border: 1px solid color-mix(in srgb, var(--fs-gold) 35%, var(--fs-line)); border-left: 3px solid var(--fs-gold); border-radius: var(--fs-radius); text-decoration: none; color: inherit; transition: transform 180ms var(--fs-ease), box-shadow 180ms var(--fs-ease); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } .fs-latest-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--fs-gold) 30%, rgba(0, 0, 0, 0.18)); } .fs-latest__label { display: inline-block; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-gold-strong); margin-bottom: 0.5rem; } .fs-latest__title { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 600; color: var(--fs-ink); margin: 0 0 0.35rem; line-height: 1.25; } .fs-latest__meta { margin: 0; font-size: 0.85rem; color: var(--fs-ink-mute); } .fs-latest__meta strong { color: var(--fs-ink-soft); font-weight: 700; } .fs-latest__arrow { position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--fs-gold); transition: transform 200ms ease; } .fs-latest-card:hover .fs-latest__arrow { transform: translateY(-50%) translateX(4px); } /* =========================================================================== CAT GRID — grille des catégories sur la page hub =========================================================================== */ .fs-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; } .fs-cat-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.3rem 1.3rem 1.1rem; background: var(--fs-surface); border: 1px solid var(--fs-line); border-top: 3px solid var(--cat-color, var(--fs-gold)); border-radius: var(--fs-radius); text-decoration: none; color: inherit; transition: transform 200ms var(--fs-ease), box-shadow 200ms var(--fs-ease), border-color 200ms ease; position: relative; overflow: hidden; } .fs-cat-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--fs-gold)) 8%, transparent), transparent 50%); opacity: 0; transition: opacity 220ms ease; } .fs-cat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--cat-color, var(--fs-gold)) 40%, rgba(0, 0, 0, 0.18)); border-color: color-mix(in srgb, var(--cat-color, var(--fs-gold)) 50%, var(--fs-line)); } .fs-cat-card:hover::before { opacity: 1; } .fs-cat-card > * { position: relative; } .fs-cat-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .fs-cat-card__icon { font-size: 2.2rem; line-height: 1; } .fs-cat-card__hot { display: inline-flex; align-items: center; gap: 0.25rem; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, #c8403a 14%, transparent); color: #c8403a; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } [data-theme="dark"] .fs-cat-card__hot { background: color-mix(in srgb, #ff5a4a 18%, transparent); color: #ff8a7a; } .fs-cat-card__title { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--fs-ink); margin: 0; line-height: 1.2; } .fs-cat-card__desc { margin: 0; font-size: 0.88rem; color: var(--fs-ink-soft); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fs-cat-card__stats { display: flex; gap: 1rem; padding-top: 0.6rem; margin-top: 0.4rem; border-top: 1px dashed var(--fs-line-soft); font-size: 0.82rem; color: var(--fs-ink-mute); } .fs-cat-card__stats strong { color: var(--fs-ink); font-weight: 700; } .fs-cat-card__cta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 700; color: var(--cat-color, var(--fs-gold)); margin-top: 0.2rem; transition: gap 180ms ease; } .fs-cat-card:hover .fs-cat-card__cta { gap: 0.55rem; } /* =========================================================================== SORT BAR — pills de tri (récent / actif / vu / sans réponse) =========================================================================== */ .fs-sort-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; } .fs-sort-pill { display: inline-flex; align-items: center; padding: 0.45rem 0.95rem; min-height: 34px; border-radius: 999px; border: 1px solid var(--fs-line); background: var(--fs-surface); color: var(--fs-ink-soft); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .fs-sort-pill:hover { border-color: color-mix(in srgb, var(--fs-gold) 40%, var(--fs-line)); color: var(--fs-gold); } .fs-sort-pill.is-active { background: linear-gradient(135deg, var(--fs-gold), var(--fs-gold-strong)); color: #fff; border-color: transparent; box-shadow: 0 4px 10px -4px var(--fs-gold); } /* =========================================================================== TOPIC ROW — sujet en ligne (catégorie) =========================================================================== */ .fs-topic-list { display: flex; flex-direction: column; gap: 0.55rem; } .fs-topic-row { display: grid; grid-template-columns: 56px 1fr auto 12px; gap: 1rem; padding: 1rem 1.1rem; background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: var(--fs-radius-sm); text-decoration: none; color: inherit; align-items: center; transition: transform 160ms var(--fs-ease), border-color 180ms ease, box-shadow 180ms ease; } .fs-topic-row:hover { border-color: color-mix(in srgb, var(--fs-gold) 35%, var(--fs-line)); transform: translateX(2px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.18); } .fs-topic-row--unanswered { border-left: 3px solid color-mix(in srgb, var(--fs-gold) 60%, transparent); padding-left: calc(1.1rem - 3px + 1px); } .fs-topic-row__avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--fs-surface-2); border: 1.5px solid var(--fs-line); display: grid; place-items: center; flex-shrink: 0; } .fs-topic-row__body { min-width: 0; } .fs-topic-row__head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.2rem; } .fs-topic-row__title { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--fs-ink); margin: 0; line-height: 1.25; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-topic-row:hover .fs-topic-row__title { color: var(--fs-gold-strong); } .fs-topic-row__excerpt { margin: 0 0 0.4rem; font-size: 0.84rem; color: var(--fs-ink-soft); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .fs-topic-row__meta { margin: 0; font-size: 0.76rem; color: var(--fs-ink-mute); } .fs-topic-row__meta strong { color: var(--fs-ink-soft); font-weight: 600; } .fs-topic-row__stats { display: flex; gap: 0.7rem; text-align: center; flex-shrink: 0; } .fs-topic-row__stat { display: flex; flex-direction: column; gap: 1px; min-width: 56px; } .fs-topic-row__stat-num { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 1.05rem; font-weight: 700; color: var(--fs-ink); line-height: 1; } .fs-topic-row__stat-label { font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fs-ink-mute); } .fs-topic-row__stat--views .fs-topic-row__stat-num { color: var(--fs-ink-soft); } .fs-topic-row__arrow { color: var(--fs-gold); font-size: 1.4rem; font-weight: 700; transition: transform 180ms ease; } .fs-topic-row:hover .fs-topic-row__arrow { transform: translateX(3px); } /* Badge "Nouveau" sur sujet récent */ .fs-badge--new { background: linear-gradient(135deg, #50c878, #2c8c5e); color: #fff; padding: 2px 8px; font-size: 0.62rem; } /* Empty state padded */ .fs-empty-replies--padded { padding: 3rem 1.4rem; text-align: center; } /* Bottom-link strong (CTA mis en avant) */ .fs-bottom-link--strong { color: var(--fs-gold-strong); font-weight: 700; } /* =========================================================================== MOBILE — topic-row passe en stacked =========================================================================== */ @media (max-width: 720px) { .fs-topic-row { grid-template-columns: 42px 1fr; gap: 0.75rem; padding: 0.85rem 0.95rem; } .fs-topic-row__stats { grid-column: 2 / 3; justify-content: flex-start; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--fs-line-soft); width: 100%; } .fs-topic-row__arrow { display: none; } .fs-topic-row__avatar { width: 42px; height: 42px; } .fs-topic-row__title { white-space: normal; } .fs-latest-card { padding-right: 2.2rem; } } @media (max-width: 480px) { .fs-cat-grid { grid-template-columns: 1fr; } .fs-sort-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .fs-sort-pill { flex-shrink: 0; } } /* ============================================================================ prefers-reduced-motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { .fs-post:target { animation: none !important; } .fs-btn, .fs-post, .fs-post__action, .fs-tb-btn, .fs-sticky-cta, .fs-cat-card, .fs-topic-row, .fs-latest-card, .fs-sort-pill { transition: none !important; } .fs-cat-card:hover, .fs-topic-row:hover, .fs-latest-card:hover { transform: none !important; } }