/* H&C — page FAQ (/faq/). Se charge après fiche.css et apropos.css (`.btn--paper`, `.ex`, `.apf*`).
   2026-10-15 — l'utilisateur a choisi la piste 2 « Le sommaire » parmi les six
   (planche : captures/faq/planche-faq.jpg).

   1. Hero · `.fq` : mur clair + projecteur sur rail au-dessus du sommaire. À gauche, colonne collée `.fq__side` :
      titre, recherche, index des six sujets (`.fq__idx`, compteurs, sujet actif en jaune), carte d'aide.
      À droite, la carte blanche `.fq__main` : six sujets (`.fq__sec`), chacun une liste de questions en accordéon
      (`.fq__it`), plusieurs réponses peuvent rester ouvertes ; recherche : les questions qui ne correspondent pas
      disparaissent (faq.js), le mot cherché est surligné (`mark`).
   2. Rideau final `.apf` (apropos.css) puis le pied de page.

   Sans JS : toutes les réponses sont ouvertes. ≤ 1000 px : une colonne, l'index devient une bande de pastilles
   collée sous la barre. ≤ 560 px : réponses sans retrait. */

:root { --fq-soft: #3d475c; --fq-muted: #5b6478; --fq-gold-ink: #7a5c00; --fq-line: rgb(22 33 61 / 0.12); }

/* le projecteur glisse d'un sujet à l'autre : --rig-x et --rig-tilt sont de vraies valeurs animables */
@property --rig-x { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
@property --rig-tilt { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

/* ---------- communs ---------- */
.fq :is(a, button, input):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fq :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.fq [hidden] { display: none !important; }
:where(.fq button) { font: inherit; color: inherit; cursor: pointer; }
.fq__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* bouton plein sombre (même réglage que telechargements.css) */
.btn--ink { padding-left: 7px; background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--night); }
.btn--ink .btn__label { flex: 1; text-align: left; }
.btn--ink .btn__icon { background: var(--gold); color: var(--ink); }
.btn--ink:hover .btn__icon { background: var(--gold); transform: rotate(-10deg); }
.btn--sm .btn__icon { width: 30px; height: 30px; }

/* ---------- 1. Hero : le sommaire ---------- */
.fq {
  --rig-x: 22%;
  --rig-y: 12px;
  --rig-w: 72px;
  --rig-tilt: 4deg;
  padding-bottom: clamp(48px, 5vw, 80px);
}
.fq .cone { --spread: 24deg; --throw: 820px; }
.fq .fh__crumb { margin-bottom: clamp(18px, 2.4vw, 30px); }

.fq__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4.2vw, 64px);
}

/* colonne de gauche, collée sous la barre tant qu'on parcourt les réponses */
.fq__side { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1001px) and (min-height: 840px) {
  .fq__side { position: sticky; top: 96px; }
}
.fq__head { display: grid; justify-items: start; gap: 10px; margin-bottom: 4px; }
.fq__h { max-width: 12ch; font-size: clamp(2.1rem, 3.2vw, 2.6rem); }
.fq .fb__lead { margin: 0; max-width: 38ch; font-size: 1rem; line-height: 1.5; color: var(--fq-soft); }

/* recherche */
.fq__search { position: relative; margin-top: 6px; }
.fq__sl {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 52px 0 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 28px -20px rgb(22 33 61 / 0.55);
  color: var(--ink);
  transition: box-shadow 0.25s;
}
.fq__sl:focus-within { box-shadow: 0 0 0 2px var(--gold), 0 12px 28px -20px rgb(22 33 61 / 0.55); }
.fq__sl svg { flex: none; width: 20px; height: 20px; stroke-width: 1.9; color: var(--fq-muted); }
.fq__sl input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.fq .fq__sl input:focus-visible { outline: 0; }
.fq__sl input::placeholder { color: #8a93a6; opacity: 1; }
.fq__sl input::-webkit-search-cancel-button { display: none; }
.fq__clr {
  position: absolute;
  top: 50%;
  right: 9px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(22 33 61 / 0.08);
  color: var(--ink);
  transition: background-color 0.25s;
}
.fq__clr:hover { background: rgb(22 33 61 / 0.16); }
.fq__clr svg { width: 16px; height: 16px; stroke-width: 2; }

/* index des six sujets */
.fq__idx { margin-top: 6px; }
.fq__idx ol { display: grid; gap: 6px; }
.fq__idx a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 8px 6px 18px;
  border-radius: 26px;
  background: rgb(255 255 255 / 0.62);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}
.fq__idx a:hover { background: #fff; }
.fq__idx a b {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 15px;
  background: rgb(22 33 61 / 0.08);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s, color 0.25s;
}
.fq__idx a[aria-current="true"] { background: var(--gold); font-weight: 600; }
.fq__idx a[aria-current="true"] b { background: var(--ink); color: var(--gold); }
.fq__idx a.is-zero { opacity: 0.4; pointer-events: none; }

/* carte d'aide */
.fq__help { display: grid; gap: 4px; margin-top: 8px; padding: 18px 20px 18px; border-radius: 24px; background: var(--ink); color: #fff; }
.fq__hb { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; }
.fq__hs { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: rgb(255 255 255 / 0.7); }
.fq__hl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.fq__hm { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; color: #fff; text-decoration: none; }
.fq__hm svg { width: 16px; height: 16px; stroke-width: 2; color: var(--gold); transition: transform 0.3s var(--ease-out); }
.fq__hm:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fq__hm:hover svg { transform: translateX(3px); }

/* ---------- la carte blanche : les six sujets ---------- */
.fq__main {
  min-width: 0;
  padding: clamp(26px, 3.4vw, 46px) clamp(20px, 3.6vw, 52px) clamp(10px, 1.6vw, 20px);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 40px 70px -52px rgb(22 33 61 / 0.55);
}
.fq__status { margin: 0; }
.fq__status:not(.is-on) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fq__status.is-on { margin-bottom: 20px; font-size: 0.9375rem; color: var(--fq-muted); }
.fq__status b { font-weight: 600; color: var(--ink); }

.fq__sec { scroll-margin-top: 96px; }
.fq__sec + .fq__sec { margin-top: clamp(34px, 4vw, 56px); }
.fq__sec[hidden] { display: none; }
.fq__sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px; }
.fq__cap { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fq-gold-ink); }
.fq__st { margin: 6px 0 0; font-size: clamp(1.5rem, 2.5vw, 2.125rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); }
.fq__n { margin: 0; padding-bottom: 5px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--fq-muted); }

/* l'accordéon */
.fq__it { border-top: 1px solid var(--fq-line); scroll-margin-top: 96px; }
.fq__it[hidden] { display: none; }
.fq__qh { margin: 0; }
.fq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 19px 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.fq__qt { font-size: clamp(1.0625rem, 1.45vw, 1.22rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.005em; text-wrap: pretty; }
@media (hover: hover) {
  .fq__q:hover .fq__qt { text-decoration: underline; text-decoration-color: rgb(22 33 61 / 0.3); text-underline-offset: 4px; }
}
.fq__pm { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgb(22 33 61 / 0.07); transition: background-color 0.3s; }
.fq__pm::before, .fq__pm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  margin: -1px 0 0 -6.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}
.fq__pm::after { transform: rotate(90deg); }
.fq__q:hover .fq__pm { background: rgb(22 33 61 / 0.14); }
.fq__it.is-open .fq__pm, .fq__it.is-open .fq__q:hover .fq__pm { background: var(--gold); }
.fq__it.is-open .fq__pm::after { transform: rotate(0deg); }
.fq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }

.fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.fq__ai { min-height: 0; overflow: hidden; visibility: hidden; padding-right: 56px; transition: visibility 0s linear 0.4s; }
.fq__it.is-open .fq__a { grid-template-rows: 1fr; }
.fq__it.is-open .fq__ai { visibility: visible; transition-delay: 0s; }
.fq__ai > :last-child { margin-bottom: 22px; }
.fq__ai p { margin: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.58; color: var(--fq-soft); }
.fq__ai b { font-weight: 600; color: var(--ink); }
.fq__ai ul { display: grid; gap: 8px; max-width: 62ch; }
.fq__ai li { position: relative; padding-left: 20px; font-size: 1.0625rem; line-height: 1.5; color: var(--fq-soft); }
.fq__ai li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.fq__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.9688rem;
  font-weight: 600;
  color: var(--fq-gold-ink);
  text-decoration: none;
}
.fq__link svg { width: 17px; height: 17px; stroke-width: 2.1; transition: transform 0.3s var(--ease-out); }
.fq__link:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.fq__link:hover svg { transform: translateX(4px); }
.fq__ex { margin-top: 12px; max-width: 62ch; color: #6b7488; }
.fq__ai > .fq__link + .fq__ex, .fq__ai > p + .fq__ex { margin-top: 12px; }

/* le mot cherché */
.fq mark { padding: 0 2px; margin: 0 -2px; border-radius: 4px; background: rgb(226 174 12 / 0.34); color: inherit; }

/* aucune question ne correspond */
.fq__empty { display: grid; justify-items: start; gap: 10px; padding: 8px 0 30px; }
.fq__et { margin: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.fq__empty p { margin: 0; max-width: 52ch; line-height: 1.55; color: var(--fq-soft); }
.fq__eb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
.fq__reset { padding: 4px 0; border: 0; background: none; font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* saut d'adresse (#q-…) : pas d'animation, pour que la page se cale au bon endroit */
.fq.is-jump :is(.fq__a, .fq__ai) { transition: none; }

/* sans JS : tout est ouvert, pas de recherche */
html:not(.js) .fq__a { grid-template-rows: 1fr; }
html:not(.js) .fq__ai { visibility: visible; }
html:not(.js) .fq__pm { display: none; }
html:not(.js) .fq__search { display: none; }

/* ---------- tablette et mobile ---------- */
@media (max-width: 1000px) {
  .fq { --rig-x: 62%; --rig-tilt: 0deg; }
  .fq__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fq__side { display: contents; }
  .fq__head { order: 1; margin-bottom: 0; }
  .fq__h { max-width: none; }
  .fq .fb__lead { max-width: 52ch; }
  .fq__search { order: 2; max-width: 560px; }
  .fq__idx {
    order: 3;
    position: sticky;
    top: 66px;
    z-index: 5;
    margin: 4px 0 6px;
    padding: 8px 0;
    background: var(--wall);
    transition: top 0.3s var(--ease-out);
  }
  html.is-nav-hidden .fq__idx { top: 0; }
  .fq__idx ol {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-right: 24px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .fq__idx ol::-webkit-scrollbar { display: none; }
  .fq__idx li { flex: none; scroll-snap-align: start; }
  .fq__idx a { min-height: 44px; padding: 6px 7px 6px 16px; border-radius: 999px; white-space: nowrap; font-size: 0.9375rem; background: #fff; }
  .fq__main { order: 4; }
  .fq__help { order: 5; margin-top: 4px; }
  .fq__sec, .fq__it { scroll-margin-top: 132px; }
}
@media (max-width: 560px) {
  .fq__main { padding-inline: 18px; border-radius: 26px; }
  .fq__q { gap: 12px; padding: 17px 0; }
  .fq__ai { padding-right: 10px; } /* de la place pour la pastille « À trancher » en bout de ligne */
  .fq__sh { align-items: flex-start; }
  .fq__st { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fq__a, .fq__ai, .fq__pm, .fq__pm::before, .fq__pm::after, .fq__idx, .fq__idx a, .fq__link svg, .fq__hm svg { transition: none; }
}