/* ============================================================
   QUESTIONS FRÉQUENTES.

   POURQUOI DES BLOCS QU'ON DÉPLIE, ALORS QUE LE SITE ÉVITE ÇA
   PARTOUT AILLEURS. Le calendrier des coupes a justement perdu ses
   accordéons, parce qu'un contenu qu'il faut déplier pour savoir
   s'il vaut le coup ne se déplie jamais.

   Ici, c'est l'inverse : le visiteur arrive avec UNE question en
   tête. Il doit pouvoir la trouver d'un coup d'œil au milieu de
   quinze autres, ce qui suppose de voir les quinze intitulés — donc
   de replier les réponses. La question EST le contenu ; la réponse
   n'est demandée que par ceux qu'elle concerne.

   Les quatre familles restent visibles en permanence : on ne cache
   jamais une catégorie, seulement un texte.
   ============================================================ */

.qz-bloc { margin-bottom: var(--s7); }

.qz-bloc h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
  padding-bottom: var(--s3);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.qz { border-bottom: 1px solid var(--line-soft); }

.qz summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s6) var(--s4) 0;
  position: relative;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s ease;
}

.qz summary::-webkit-details-marker { display: none; }

.qz summary:hover { color: var(--a); }

/* Le signe qui dit « ça s'ouvre ». Une croix qui pivote en moins
   plutôt qu'un chevron : le passage de + à − dit à la fois l'état
   actuel et ce que fera le clic. */
.qz summary::after,
.qz summary::before {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--ink-faint);
  transition: transform 0.2s ease, background 0.15s ease;
}

.qz summary::before { transform: translateY(-50%); }
.qz summary::after { transform: translateY(-50%) rotate(90deg); }

.qz[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.qz[open] summary { color: var(--a); }
.qz[open] summary::before,
.qz[open] summary::after { background: var(--a); }

@media (prefers-reduced-motion: reduce) {
  .qz summary::after,
  .qz summary::before { transition: none; }
}

.qz-r { padding: 0 var(--s6) var(--s5) 0; }

.qz-r p {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.7;
  max-width: 68ch;
}

/* une réponse en deux temps s'aère, sinon l'argument devient un pavé
   qu'on saute */
.qz-r p + p { margin-top: var(--s3); }

.qz-r strong { color: var(--ink); font-weight: 650; }
.qz-r em { color: var(--ink); font-style: italic; }