/* ─────────────────────────────────────────────────────────────
   OULA — Page « Explication du test »
   Calée sur _references/Le test.png

   Une suite de questions/réponses sur deux colonnes. Le CTA lavande
   qui conclut la page est le composant partagé `.more-link` (main.css).
   ───────────────────────────────────────────────────────────── */
@layer components {
  .qa__list {
    display: grid;
    /* Les rangées sont largement espacées sur la maquette : chaque
       question doit se lire comme un bloc à part entière. */
    gap: var(--sp-2xl);
  }

  /* Deux colonnes de largeur égale, comme sur la maquette. La question
     n'est pas collée au bord : elle est repoussée vers le centre par
     `justify-items`, ce qui aère la marge gauche. */
  .qa__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--sp-lg), 4vw, var(--sp-2xl));
    align-items: start;
  }

  .qa__question {
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    /* La fonte display est déjà très ouverte : un interligne serré
       évite que les questions sur deux lignes ne se délitent. */
    line-height: 1.15;
    /* Les questions sont plus courtes que les réponses ; sans marge
       à droite, une question sur deux lignes touche presque le texte. */
    padding-inline-end: var(--sp-md);
  }

  .qa__answer {
    --flow-space: var(--sp-sm);

    color: var(--c-indigo);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  /* Les liens cités dans les réponses (PubMed, NHS…) sont longs : sans
     coupure ils débordent de leur colonne sur écran étroit. */
  .qa__answer a {
    color: inherit;
    overflow-wrap: anywhere;
  }

  /* ═══ Bandeau « en savoir plus » ═══════════════════════════
     Ici le bandeau lavande court d'un bord à l'autre de la page
     (cf. maquette), là où l'écran de résultat le garde dans sa
     colonne étroite. Le composant `.more-link` est le même : seul
     son conteneur change. */
  .qa__outro {
    margin-block-start: var(--sp-2xl);
  }

  .qa__outro .more-link {
    /* Pleine largeur : pas de rayon, les coins ne sont plus visibles. */
    border-radius: 0;
    padding-block: var(--sp-2xl);
  }

  /* Sur mobile, les deux colonnes deviennent illisibles : on empile,
     et la question retrouve sa marge pleine largeur. */
  @media (width < 48rem) {
    .qa__item {
      grid-template-columns: 1fr;
      gap: var(--sp-sm);
    }

    .qa__question {
      padding-inline-end: 0;
    }
  }
}