/* =============================================================
   Page Support
   La page est faite de blocs pg-* (pg-hero, pg-related, pg-faq,
   pg-cta). Il ne reste ici que le champ de recherche — un controle,
   donc encadre — et le decoupage de la FAQ en groupes.
   ============================================================= */

/* ---------- Recherche ---------- */
.sup-search {
  margin-top: 30px;
  max-width: 520px;
}

.sup-search label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--dop-fs-sm);
  color: var(--dop-ink-3);
}

/* Un champ doit rester lisible comme une zone ou l'on tape: c'est le
   seul endroit de la page ou un cadre est justifie. */
.sup-search input {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--dop-border-strong);
  border-radius: var(--dop-radius-sm);
  color: var(--dop-ink-1);
  font-family: var(--dop-font-body);
  font-size: var(--dop-fs-body);
  outline: none;
  transition: border-color var(--dop-dur);
}

.sup-search input::placeholder { color: var(--dop-ink-3); }
.sup-search input:focus { border-color: var(--dop-primary); }

/* ---------- Groupes de la FAQ ---------- */
.sup-group {
  margin: clamp(36px, 4vw, 52px) 0 14px;
  font-size: var(--dop-fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
}

.faq-group:first-child .sup-group { margin-top: 0; }

/* Le premier depliant d'un groupe ferme le filet du titre au-dessus:
   sans lui le groupe flotterait au-dessus de sa premiere question. */
.faq-group details:first-of-type { border-top: 1px solid var(--dop-rule); }

.pg-faq .ans a {
  color: var(--dop-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Cloture ---------- */
.sup-cta-alt { margin-top: 26px; }