/* ==========================================================================
   Oh my feed — Page FAQ (questions triées par catégorie)
   ========================================================================== */
.fq-hero { padding: clamp(124px, 12vw, 168px) 0 clamp(40px, 5vw, 72px); }
.fq-hero .h1 { color: var(--ink); max-width: 20ch; }
.fq-hero .h1 .em { position: relative; display: inline-block; color: var(--terra); }
.fq-hero .h1 .scribble { position: absolute; left: 0; bottom: -.18em; width: 100%; height: .24em; color: var(--terra); overflow: visible; }
.fq-hero .lead { margin-top: 26px; max-width: 58ch; }
.fq-nav { margin-top: 36px; }
.fq-nav ul { display: flex; flex-wrap: wrap; gap: 10px; }
.fq-nav a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper);
  font-size: 14.5px; font-weight: 500; color: var(--ink); transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.fq-nav a span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(197,101,79,.12); color: var(--terra-deep); font-size: 12px; }
.fq-nav a:hover { border-color: var(--terra); color: var(--terra-deep); }

.fq-cat { padding-block: clamp(36px, 4.5vw, 64px); scroll-margin-top: 90px; }
.fq-cat { position: relative; }
.fq-cat + .fq-cat::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2 * var(--margin)), var(--max, 1280px)); border-top: 1px solid var(--line); }
.fq-cat + .fq-cat .grid { padding-top: clamp(36px, 4.5vw, 64px); }
.fq-cat + .fq-cat { padding-top: 0; }
.fq-cat .grid { row-gap: 20px; align-items: start; }
.fq-cat-l { grid-column: 1 / 5; position: sticky; top: 100px; }
.fq-cat-l h2 { color: var(--ink); }
.fq-cat-l p:last-child { margin-top: 10px; color: var(--ink-2); max-width: 34ch; }
.fq-cat-r { grid-column: 6 / 13; }
.fq-cat:last-of-type { padding-bottom: clamp(56px, 7vw, 104px); }

@media (max-width: 900px) {
  .fq-cat-l, .fq-cat-r { grid-column: 1 / -1; }
  .fq-cat-l { position: static; }
}
@media (max-width: 640px) {
  .fq-hero { padding-top: 104px; }
  .fq-hero .h1 { font-size: clamp(32px, 9.5vw, 42px); }
  .fq-hero .h1 .scribble { display: none; }
  .fq-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .fq-nav li { flex: none; }
}