/*
 * ViewerFirst — page FAQ : recherche, sujets numérotés (colonne fixe sur ordinateur), accordéons à filets.
 */
.fq-search { position: relative; margin-top: var(--spacing-32); max-width: 560px; }
.fq-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--iron-veil); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.fq-search input { width: 100%; box-sizing: border-box; height: 56px; padding: 0 18px 0 50px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--smoke); color: var(--snow); font: 400 17px/1 var(--font-sans); -webkit-appearance: none; appearance: none; }
.fq-search input::placeholder { color: var(--iron-veil); }
.fq-search input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.fq-status { min-height: 20px; margin: var(--spacing-8) 0 0; color: var(--ash-mist); font: 400 13px/1.5 var(--font-sans); }

.fq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--spacing-64, 64px); margin-top: var(--spacing-48); align-items: start; }
.fq-nav { position: sticky; top: 104px; }
.fq-nav .vf-eyebrow { color: var(--ash-mist); margin: 0 0 var(--spacing-12); }
.fq-nav ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--hairline); }
.fq-nav a { display: flex; justify-content: space-between; gap: 12px; margin-left: -1px; padding: 9px 0 9px 16px; border-left: 1px solid transparent; color: var(--ash-mist); font: 400 14px/1.35 var(--font-sans); text-decoration: none; }
.fq-nav a:hover { color: var(--snow); border-left-color: var(--glacier-beam); }
.fq-nav a span { color: var(--iron-veil); font-variant-numeric: tabular-nums; }
.fq-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.fq-sec { scroll-margin-top: 104px; }
.fq-sec + .fq-sec { margin-top: var(--spacing-48); }
.fq-sec__title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 var(--spacing-16); color: var(--snow); font: 300 clamp(22px, 2.6vw, 28px)/1.2 var(--font-sans); }
.fq-sec__num { color: var(--glacier-beam); font: 400 13px/1 var(--font-sans); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.fq .faq__list { max-width: none; margin: 0; }
.fq .faq__item { scroll-margin-top: 120px; }
.faq__a { padding-bottom: var(--spacing-24); }
.faq__a p { margin: 0; max-width: 68ch; color: var(--ash-mist); line-height: 1.65; padding: 0; }
.faq__a p + p { margin-top: var(--spacing-12); }
.fq-empty { margin: 0; color: var(--ash-mist); }
.fq-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-24); margin-top: var(--spacing-48); }
.fq-ask h2 { margin: 0 0 6px; }
.fq-ask p { margin: 0; max-width: 46ch; }
.fq-ask__btns { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.fq .band { margin-top: var(--section-gap); }

@media (max-width: 900px) {
  .fq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  .fq-nav { position: static; }
  .fq-nav ol { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; border: 0; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .fq-nav ol::-webkit-scrollbar { display: none; }
  .fq-nav a { margin: 0; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-full); white-space: nowrap; }
  .fq-nav a:hover { border-color: var(--glacier-beam); }
}