/* TonIAssistant · "Questions fréquentes". Every selector is scoped under .fq.
   Plain white section in the page's own tokens (--sc-*), same rhythm as .tr and .pr.
   Native <details>: works without JS, the open state is the browser's. */

.fq {
  --fq-ink: var(--sc-ink, #0a1020);
  --fq-accent: var(--sc-accent, #2152ff);
  --fq-paper: var(--sc-canvas, #ffffff);
  --fq-soft: color-mix(in oklab, var(--fq-ink) 68%, var(--fq-paper));
  --fq-line: color-mix(in oklab, var(--fq-ink) 10%, transparent);
  --fq-display: var(--sc-font-display, "Bricolage Grotesque", "Geist", system-ui, sans-serif);
  --fq-text: var(--sc-font-text, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif);
  --fq-gutter: var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem));

  background: var(--fq-paper);
  color: var(--fq-ink);
  font-family: var(--fq-text);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  line-height: 1.55;
  padding: clamp(3rem, 6vw, 5rem) var(--fq-gutter);
}
.fq *, .fq *::before, .fq *::after { box-sizing: border-box; }
.fq-inner { max-width: 52rem; margin-inline: auto; }
.fq-title {
  font-family: var(--fq-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.fq details { border-top: 1px solid var(--fq-line); }
.fq details:last-of-type { border-bottom: 1px solid var(--fq-line); }
.fq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.9rem 0;
  font-weight: 500;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
}
.fq summary::-webkit-details-marker { display: none; }
.fq summary::after {
  content: "+";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--fq-line);
  color: var(--fq-accent);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.fq details[open] summary::after { content: "\2212"; }
.fq summary:focus-visible { outline: 2px solid var(--fq-accent); outline-offset: 2px; border-radius: 6px; }
.fq summary:hover { color: var(--fq-accent); }
.fq details p {
  margin: 0 0 1.1rem;
  padding-right: 2.75rem;
  max-width: 62ch;
  color: var(--fq-soft);
}
@media (prefers-reduced-motion: reduce) { .fq summary::after { transition: none; } }

/* FAQ closes the page: it sits inside the close stage (between the contact block and the footer), so it
   cancels the stage gutter and re-applies its own, and takes back the left alignment the close stage centres. */
.close-stage > .fq { margin-inline: calc(var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem)) * -1); width: auto; margin-top: var(--sc-5, 1.5rem); padding-bottom: var(--sc-5, 1.5rem); text-align: left; }
.close .fq .fq-title { text-align: left; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }