/* FAQ (faq.html, faq.js) : pack design v2 (body.p2, tokens --td2-*), questions en accordéons <details>, recherche, Alex discret */
.faq { max-width: 880px; }
.faq-tete { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 4px 0 20px; }
.faq-tete h1 { margin: 0 0 8px; }
.faq-tete .lede { margin: 0; max-width: 60ch; }
.faq-alex { width: 120px; height: auto; flex: none; }

.faq-outils { display: grid; gap: 12px; margin-bottom: 28px; }
.faq-cherche { position: relative; }
.faq-cherche .ico { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--td2-muted); pointer-events: none; }
.faq-cherche input { width: 100%; min-height: 50px; padding: 0 16px 0 44px; border: 1px solid var(--td2-border); border-radius: var(--td2-radius);
  background: var(--td2-surface); box-shadow: var(--td2-shadow); color: var(--td2-ink); font: 500 16px var(--f-text); }
.faq-cherche input:focus { outline: 2px solid var(--td2-action); outline-offset: 1px; border-color: transparent; }
.faq-n { margin: 0; color: var(--td2-muted); font: 600 14px var(--f-text); }
.faq-n:empty { display: none; }
.faq-rubs { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-rubs .td2-puce { color: var(--td2-ink); text-decoration: none; font: 600 14px var(--f-text); }

.faq-rub { margin-bottom: 32px; scroll-margin-top: 90px; }
.faq-h { display: flex; align-items: center; margin: 0 0 12px; font: 800 21px/1.25 var(--f-display); letter-spacing: -.015em; color: var(--td2-ink); }
.faq-h::before { content: ""; flex: none; width: 7px; height: 17px; margin-right: 12px; background: var(--td2-action); transform: skew(-15deg); }
.faq-l { display: grid; gap: 8px; }

.faq-i { border: 1px solid var(--td2-border); border-radius: var(--td2-radius); background: var(--td2-surface); box-shadow: var(--td2-shadow); scroll-margin-top: 90px; }
.faq-i[open] { border-color: var(--rule-strong, var(--td2-border)); }
.faq-i > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px; cursor: pointer;
  list-style: none; border-radius: var(--td2-radius); color: var(--td2-ink); font: 700 16px/1.35 var(--f-text); }
.faq-i > summary::-webkit-details-marker { display: none; }
.faq-i > summary:hover .faq-q { color: var(--td2-action); }
.faq-i > summary:focus-visible { outline: 2px solid var(--td2-action); outline-offset: 2px; }
.faq-i > summary .ico { flex: none; width: 18px; height: 18px; color: var(--td2-muted); transition: transform .2s; }
.faq-i[open] > summary .ico { transform: rotate(180deg); color: var(--td2-action); }
.faq-q { min-width: 0; overflow-wrap: anywhere; }
.faq-r { padding: 0 18px 16px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.faq-r p { margin: 0 0 10px; max-width: 68ch; }
.faq-r p:last-child { margin-bottom: 0; }

.faq-liens { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.faq-r .faq-liens a { display: inline-flex; align-items: center; gap: 6px; color: var(--td2-action); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.faq-r .faq-liens a::after { content: "→"; display: inline-block; }   /* inline-block : la flèche n'est pas soulignée */

.faq-vide { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; padding: 18px 20px; border: 1px dashed var(--td2-border); border-radius: var(--td2-radius); color: var(--ink-2); }
.faq-vide[hidden] { display: none; }
.faq-vide img { width: 80px; height: auto; flex: none; }
.faq-vide p { margin: 0; }

.faq-fin { display: flex; align-items: center; gap: 20px; padding: 20px 22px; margin-top: 8px; }
.faq-fin img { width: 96px; height: auto; flex: none; }
.faq-fin-h { margin: 0 0 4px; font: 800 18px/1.25 var(--f-display); color: var(--td2-ink); }
.faq-fin p { margin: 0 0 12px; color: var(--ink-2); }
.faq-fin .faq-liens { gap: 10px; margin: 0; }

@media (max-width: 600px) {
  .faq-tete { align-items: flex-start; }
  .faq-alex { width: 76px; }
  .faq-i > summary { padding: 13px 14px; font-size: 15.5px; }
  .faq-r { padding: 0 14px 14px; }
  .faq-fin { align-items: flex-start; padding: 16px; gap: 14px; }
  .faq-fin img { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .faq-i > summary .ico { transition: none; } }