/* ===========================================================================
   FAQ: dedicated stylesheet (V2 restyle)
   ===========================================================================
   Loaded only on the FAQ pages. Pure CSS: accordions use <details>/<summary>,
   so there is no JavaScript, the answers stay in the DOM for crawlers, and the
   JSON-LD FAQPage stays in sync with what a visitor can read.

   Everything is namespaced under .faq-* so it cannot collide with the shared
   header/footer/nav styles from _base.css.
   =========================================================================== */

.faq-shell {
  --faq-ink: #14162b;
  --faq-ink-soft: #4a4f6b;
  --faq-ink-faint: #8b90ad;
  --faq-surface: #ffffff;
  --faq-line: #e4e7f5;
  --faq-tint: #eef0ff;
  --faq-accent: #4e5bd6;
  --faq-accent-dark: #3340c2;
  --faq-linkedin: #0a66c2;
  --faq-interpol: #c0392b;
  --faq-radius: 18px;

  /* _base.css styles every <main> as the game's flex row. Reset it here so the
     FAQ page is a normal vertical document flow. `flex: 1 1 auto` keeps the
     footer at the bottom of short pages. */
  display: block;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: normal;
  justify-content: flex-start;
  gap: 0;

  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 40px) clamp(14px, 3vw, 28px) clamp(56px, 8vw, 96px);
  color: var(--faq-ink);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.faq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  border-radius: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(78, 91, 214, 0.16);
  padding: clamp(26px, 5vw, 48px) clamp(18px, 4vw, 44px) clamp(22px, 4vw, 38px);
  background:
    radial-gradient(120% 130% at 50% -30%, #ffffff 0%, #eef0ff 42%, #dfe3ff 100%);
  box-shadow: 0 24px 60px -34px rgba(20, 22, 43, 0.45);
}

/* subtle grid that fades out towards the bottom */
.faq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(78, 91, 214, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 91, 214, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 25%, transparent 76%);
  mask-image: radial-gradient(130% 110% at 50% 0%, #000 25%, transparent 76%);
}

/* soft colour bloom behind the title */
.faq-hero::after {
  content: '';
  position: absolute;
  top: -46%;
  left: 50%;
  translate: -50% 0;
  width: min(620px, 120%);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 102, 194, 0.18) 0%, transparent 62%);
  filter: blur(6px);
}

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(78, 91, 214, 0.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faq-accent-dark);
  backdrop-filter: blur(6px);
}

.faq-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--faq-linkedin), var(--faq-interpol));
}

.faq-hero h1 {
  margin: 0 auto 12px;
  max-width: 20ch;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #14162b 12%, #3340c2 58%, #0a66c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq-lead {
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.6;
  color: var(--faq-ink-soft);
}

.faq-lead a {
  color: var(--faq-accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Quick topic chips -------------------------------------------------------- */

.faq-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(18px, 3vw, 26px);
}

.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(78, 91, 214, 0.2);
  background: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--faq-ink-soft);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.faq-chip:hover,
.faq-chip:focus-visible {
  transform: translateY(-1px);
  border-color: var(--faq-accent);
  color: var(--faq-accent-dark);
  box-shadow: 0 8px 18px -12px rgba(51, 64, 194, 0.75);
}

.faq-chip--active {
  background: linear-gradient(135deg, var(--faq-accent), var(--faq-accent-dark));
  border-color: transparent;
  color: #fff;
}

.faq-chip--active:hover,
.faq-chip--active:focus-visible {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Topic tiles
   -------------------------------------------------------------------------- */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-top: clamp(20px, 3.5vw, 30px);
}

.faq-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* A grid item refuses to shrink below its content by default, and a single
     long word ("confidentialité" in French, "Datenschutz" in German) is wider
     than a 320px column: without this the tiles stuck out of the grid and the
     right edge of every card was cut off. */
  min-width: 0;
  padding: 20px;
  border-radius: var(--faq-radius);
  border: 1px solid var(--faq-line);
  background: var(--faq-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(20, 22, 43, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.faq-tile__title,
.faq-tile__desc {
  min-width: 0;
  overflow-wrap: break-word;
}

.faq-tile:hover,
.faq-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(78, 91, 214, 0.45);
  box-shadow: 0 22px 38px -26px rgba(20, 22, 43, 0.6);
}

.faq-tile__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 21px;
  background: var(--faq-tint);
  border: 1px solid rgba(78, 91, 214, 0.16);
}

.faq-tile__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 16px;
  font-weight: 750;
  color: var(--faq-ink);
}

.faq-tile__title::after {
  content: '→';
  color: var(--faq-accent);
  transition: transform 0.18s ease;
}

.faq-tile:hover .faq-tile__title::after {
  transform: translateX(3px);
}

.faq-tile__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--faq-ink-soft);
}

/* --------------------------------------------------------------------------
   Question groups + accordion
   -------------------------------------------------------------------------- */

.faq-group {
  margin-top: clamp(30px, 5vw, 52px);
  scroll-margin-top: 24px;
}

.faq-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--faq-ink);
}

.faq-group__title::before {
  content: '';
  width: 4px;
  align-self: stretch;
  min-height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--faq-accent), var(--faq-linkedin));
}

.faq-group__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--faq-ink-faint);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--faq-tint);
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  background: var(--faq-surface);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq-item[open] {
  border-color: rgba(78, 91, 214, 0.42);
  box-shadow: 0 18px 34px -26px rgba(20, 22, 43, 0.55);
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 12px;
  /* comfortable tap target on mobile */
  min-height: 58px;
  padding: 15px clamp(16px, 2.4vw, 22px);
  cursor: pointer;
  font-size: clamp(15px, 1.9vw, 16.5px);
  font-weight: 650;
  line-height: 1.4;
  color: var(--faq-ink);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.faq-item__q::-webkit-details-marker,
.faq-item__q::marker {
  display: none;
  content: '';
}

.faq-item__q:hover {
  color: var(--faq-accent-dark);
}

.faq-item__q:focus-visible {
  outline: 2px solid var(--faq-accent);
  outline-offset: -3px;
}

/* CSS-only chevron: no extra markup, no icon font, no request */
.faq-item__q::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--faq-ink-faint);
  border-bottom: 2px solid var(--faq-ink-faint);
  transform: rotate(45deg);
  transition: transform 0.22s ease, border-color 0.18s ease;
}

.faq-item[open] .faq-item__q::after {
  transform: rotate(-135deg);
  border-color: var(--faq-accent);
}

.faq-item__a {
  padding: 0 clamp(16px, 2.4vw, 22px) 18px;
  font-size: clamp(14.5px, 1.8vw, 15.5px);
  line-height: 1.68;
  color: var(--faq-ink-soft);
  animation: faq-reveal 0.22s ease both;
}

.faq-item__a > :first-child { margin-top: 0; }
.faq-item__a > :last-child { margin-bottom: 0; }

.faq-item__a p + p { margin-top: 10px; }

.faq-item__a a {
  color: var(--faq-accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-item__a strong { color: var(--faq-ink); font-weight: 700; }

.faq-item__a ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.faq-item__a li { margin-bottom: 6px; }

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Call to action + related links
   -------------------------------------------------------------------------- */

/* The closing CTA is the same light card as the rest of the page: the dark
   gradient it used to carry was the only dark surface on an otherwise light
   site. It keeps its emphasis through the accent primary button instead. */
.faq-cta {
  margin-top: clamp(30px, 5vw, 50px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: clamp(18px, 3vw, 24px);
  border: 1px solid var(--faq-line);
  background: var(--faq-surface);
  text-align: center;
  color: var(--faq-ink);
  box-shadow: 0 20px 46px -34px rgba(20, 22, 43, 0.5);
}

.faq-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(19px, 2.8vw, 24px);
  font-weight: 750;
}

.faq-cta p {
  margin: 0 auto 20px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--faq-ink-soft);
}

.faq-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.faq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.faq-button--primary {
  background: var(--faq-accent-dark);
  color: #fff;
}

.faq-button--primary:hover {
  background: var(--faq-accent);
  transform: translateY(-1px);
}

.faq-button--ghost {
  border: 1px solid rgba(78, 91, 214, 0.28);
  background: var(--faq-surface);
  color: var(--faq-accent-dark);
}

.faq-button--ghost:hover {
  background: rgba(78, 91, 214, 0.07);
  border-color: var(--faq-accent);
}

.faq-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 26px;
}

.faq-related a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--faq-line);
  background: var(--faq-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--faq-ink-soft);
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.faq-related a:hover {
  border-color: var(--faq-accent);
  color: var(--faq-accent-dark);
}

.faq-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* a standalone control, so it gets a real tap area rather than the height of
     its own text */
  min-height: 32px;
  margin: 0 0 16px -0.4rem;
  padding: 0 0.4rem;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--faq-ink-soft);
  text-decoration: none;
}

.faq-back:hover { color: var(--faq-accent-dark); }

/* Compact hero used on the topic subpages */
.faq-hero--compact { text-align: left; }
.faq-hero--compact h1 { margin-inline: 0; }
.faq-hero--compact .faq-lead { margin-inline: 0; }
.faq-hero--compact .faq-topics { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .faq-topics {
    /* horizontal scroll reads better than a tall wrapped block */
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-inline: calc(clamp(18px, 3.5vw, 40px) * -1);
    padding-inline: clamp(18px, 3.5vw, 40px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .faq-topics::-webkit-scrollbar { display: none; }

  .faq-chip { flex: none; }

  .faq-hero--compact .faq-topics {
    margin-inline: 0;
    padding-inline: 0;
  }

  .faq-grid { grid-template-columns: 1fr; }

  /* Icon on the left, title over description on the right. They used to be
     three items in one flex row, so the title was squeezed into whatever the
     description left and broke in the middle of words ("Comme/nt jouer"). */
  .faq-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    padding: 16px;
  }

  .faq-tile__icon {
    flex: none;
    grid-row: 1 / span 2;
  }

  .faq-tile__title { grid-column: 2; font-size: 15.5px; }
  .faq-tile__desc { grid-column: 2; font-size: 13px; }

  .faq-item__q { min-height: 60px; }

  .faq-cta__actions .faq-button { flex: 1 1 100%; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .faq-chip,
  .faq-tile,
  .faq-button,
  .faq-item,
  .faq-item__q::after,
  .faq-tile__title::after {
    transition: none;
  }

  .faq-item__a { animation: none; }
}