/* The FAQ page (/faq, templates/faq.html): a help centre in the Club's paper, ink and Majorelle palette — hero with the
   question filter and the CV card, a sticky topic list (a row of chips on phones and tablets), accordions, and a closing
   contact + CV block. Colours are the site's tokens, so dark mode follows them. */
.faq { --faq-lime:#dfedaa; --faq-ink:#20251e; --faq-gap:56px; max-width:1160px; margin-inline:auto; }
.dark .faq { --faq-lime:#3e4a22; }
/* Sticky things above the page (platform.css): the Candidats / Employeurs strip (40 px) on every width, plus the
   66 px header from 768 px. Anchored questions and the topic list stop below them. */
.faq [id] { scroll-margin-top:130px; }
.faq h1, .faq h2 { text-wrap:balance; }

/* Hero: what the page answers, the filter, and the CV card (the site's headline action) */
.faq-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--faq-gap); align-items:center; padding:8px 0 44px; border-bottom:1px solid var(--color-line); }
.faq-eyebrow { display:flex; align-items:center; gap:10px; }
.faq-eyebrow > span { width:8px; height:8px; background:var(--platform-blue); flex:none; }
.faq-hero h1 { margin:18px 0 16px; font-size:clamp(40px,5.2vw,66px); line-height:1.02; letter-spacing:-.055em; font-weight:650; }
.faq-intro { max-width:590px; font-size:16.5px; line-height:1.75; color:var(--color-ink-2); }
.faq-search { max-width:590px; margin-top:28px; }
.faq-field { display:flex; align-items:center; gap:10px; height:56px; padding:0 8px 0 18px; border:1px solid var(--color-line-strong); border-radius:14px; background:var(--color-card); box-shadow:0 1px 2px #0000000a; transition:border-color .15s, box-shadow .15s; }
.faq-field:focus-within { border-color:var(--color-majorelle); box-shadow:0 0 0 4px color-mix(in srgb, var(--color-majorelle) 18%, transparent); }
.faq-field > .ic { width:20px; height:20px; color:var(--color-muted); }
.faq-field input { flex:1; min-width:0; height:100%; border:0; background:transparent; color:var(--color-ink); font-size:16px; outline:none; }
.faq-field input::placeholder { color:var(--color-muted); opacity:1; }
.faq-field input::-webkit-search-cancel-button { display:none; }
.faq-clear { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--color-muted); cursor:pointer; }
.faq-clear:hover { background:var(--color-fill); color:var(--color-ink); }
.faq-clear[hidden], .faq-find[hidden] { display:none; }
.faq-status { min-height:20px; margin-top:10px; font-size:13px; color:var(--color-muted); }

.faq-cv { padding:26px 26px 22px; border:1px solid var(--platform-line); border-radius:var(--club-radius-panel); background:var(--platform-paper); box-shadow:8px 8px 0 var(--faq-lime); }
.faq-kicker { font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.12em; color:var(--platform-blue); }
.faq-cv h2 { margin:12px 0 18px; font-size:27px; line-height:1.14; letter-spacing:-.045em; font-weight:600; }
.faq-cv ul { display:grid; gap:10px; margin-bottom:22px; }
.faq-cv li { display:flex; gap:10px; font-size:14px; line-height:1.55; color:var(--color-ink-2); }
.faq-cv li .ic { width:18px; height:18px; margin-top:2px; color:var(--color-green); }
.faq-cv-btn { display:flex; width:100%; min-height:52px; border-radius:14px; font-size:16px; }
.faq-cv-btn .ic, .faq-end-btn .ic { width:18px; height:18px; }
.faq-cv-note { margin-top:11px; font-size:12px; text-align:center; color:var(--color-muted); }

/* Topics (sticky list on wide screens) and questions */
.faq-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:var(--faq-gap); align-items:start; padding-top:44px; }
.faq-nav { position:sticky; top:130px; }
.faq-nav-title { margin:0 0 10px 12px; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.12em; color:var(--color-muted); }
.faq-nav ul { display:grid; gap:2px; }
.faq-nav li[hidden], .faq-is-empty .faq-nav-title { display:none; }
.faq-nav ul a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:550; line-height:1.35; color:var(--color-ink-2); transition:background .15s, color .15s; }
.faq-nav ul a .ic { width:17px; height:17px; color:var(--color-muted); }
.faq-nav ul a span { flex:1; min-width:0; }
.faq-nav ul a small { font-size:12px; font-variant-numeric:tabular-nums; color:var(--color-muted); }
.faq-nav ul a:hover { background:var(--color-fill); color:var(--color-ink); }
.faq-nav ul a[aria-current] { background:var(--color-majorelle-soft); color:var(--color-majorelle-dark); }
.faq-nav ul a[aria-current] .ic, .faq-nav ul a[aria-current] small { color:inherit; }
.faq-nav-cv { display:flex; align-items:center; gap:12px; margin-top:22px; padding:14px; border:1px solid var(--platform-line); border-radius:var(--club-radius-card); background:var(--platform-paper); transition:border-color .15s; }
.faq-nav-cv:hover { border-color:var(--platform-blue); }
.faq-nav-cv-ic { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:var(--club-radius-control); background:var(--color-majorelle); color:var(--color-on-ink); }
.faq-nav-cv b { display:block; font-size:14px; font-weight:650; }
.faq-nav-cv small { display:block; margin-top:1px; font-size:12px; color:var(--color-muted); }

.faq-section + .faq-section { margin-top:52px; }
.faq-section[hidden] { display:none; }
.faq-section-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.faq-section-ic { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:var(--club-radius-control); background:var(--color-majorelle-soft); color:var(--color-majorelle); }
.faq-section-ic .ic { width:19px; height:19px; }
.faq-section h2 { font-size:clamp(22px,2.3vw,28px); line-height:1.2; letter-spacing:-.035em; font-weight:600; }
.faq-list { border-top:1px solid var(--color-line); }
.faq-item { border-bottom:1px solid var(--color-line); }
.faq-item[hidden] { display:none; }
.faq-item > summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 4px; cursor:pointer; list-style:none; font-size:17px; font-weight:600; line-height:1.42; letter-spacing:-.015em; }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary:hover .faq-q, .faq-item.is-target > summary .faq-q { color:var(--color-majorelle-dark); }
.faq-q { min-width:0; }
.faq-q[dir="rtl"] { flex:1; text-align:right; }
.faq-plus { flex:none; display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--color-line-strong); border-radius:999px; color:var(--color-ink-2); transition:transform .2s, background .2s, color .2s, border-color .2s; }
.faq-plus .ic { width:16px; height:16px; }
.faq-item > summary:hover .faq-plus { border-color:var(--color-ink); }
.faq-item[open] > summary .faq-plus { transform:rotate(45deg); background:var(--color-ink); border-color:var(--color-ink); color:var(--color-on-ink); }
.faq-a { padding:0 56px 22px 4px; font-size:15.5px; line-height:1.75; color:var(--color-ink-2); overflow-wrap:break-word; }
.faq-a a { color:var(--color-majorelle-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.faq-a a:hover { text-decoration-thickness:2px; }
.faq-a [dir="rtl"] { display:block; text-align:right; }
.faq-copy { display:inline-flex; align-items:center; gap:6px; margin:12px 0 0 -10px; padding:6px 10px; border-radius:8px; font-size:12.5px; font-weight:550; color:var(--color-muted); cursor:pointer; }
.faq-copy:hover { background:var(--color-fill); color:var(--color-ink); }
.faq-copy.is-done { color:var(--color-green); }
.faq-copy[hidden] { display:none; }
.faq-copy .ic { width:14px; height:14px; }
.faq-item.is-target { animation:faq-target 1.8s ease-out; }
@keyframes faq-target { from { background:var(--color-majorelle-soft); } to { background:transparent; } }

.faq-empty { padding:44px 24px; border:1px dashed var(--color-line-strong); border-radius:var(--club-radius-card); text-align:center; color:var(--color-ink-2); }
.faq-empty[hidden] { display:none; }
.faq-empty-title { font-size:19px; font-weight:650; letter-spacing:-.02em; color:var(--color-ink); }
.faq-empty-title + p { margin-top:6px; }
.faq-empty-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* Closing block: write to the team, or start with the CV */
.faq-end { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:76px; }
.faq-end > section { display:flex; flex-direction:column; align-items:flex-start; padding:32px; border-radius:var(--club-radius-panel); }
.faq-end h2 { margin:14px 0 10px; font-size:clamp(24px,2.4vw,30px); line-height:1.15; letter-spacing:-.045em; font-weight:600; }
.faq-end p { max-width:440px; font-size:15px; line-height:1.7; }
.faq-end-contact { border:1px solid var(--color-line); background:var(--color-card); }
.faq-end-contact p { color:var(--color-ink-2); }
.faq-end-ic { display:grid; place-items:center; width:42px; height:42px; border-radius:var(--club-radius-control); background:var(--color-fill); color:var(--color-ink); }
.faq-end-ic .ic { width:20px; height:20px; }
.faq-end-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:auto; padding-top:22px; }
.faq-mail { font-size:14px; font-weight:550; color:var(--color-ink-2); text-decoration:underline; text-underline-offset:3px; }
.faq-mail:hover { color:var(--color-majorelle-dark); }
.faq-end-cv { background:var(--faq-ink); color:#f8f7f2; }
.faq-end-cv .faq-kicker { margin-top:4px; color:var(--faq-lime); }
.faq-end-cv p:not(.faq-kicker) { color:#d7dacf; }
.faq-end-btn { margin-top:auto; background:#dfedaa; color:var(--faq-ink); }
.faq-end-cv h2 + p { margin-bottom:22px; }
.faq-end-btn:hover { background:#fff; }
.dark .faq-end-cv { background:var(--color-majorelle-soft); border:1px solid var(--color-majorelle-line); color:var(--color-ink); }
.dark .faq-end-cv .faq-kicker { color:#d7e7a5; }
.dark .faq-end-cv p:not(.faq-kicker) { color:var(--color-ink-2); }

/* Tablets and phones: one column; the topics become a sticky row of chips under the header */
@media (max-width:960px) {
  .faq { --faq-gap:28px; }
  .faq-hero { grid-template-columns:minmax(0,1fr); align-items:start; padding-bottom:36px; }
  .faq-cv { max-width:590px; }
  /* one column: while a search is typed the answers follow the field, without the CV card in between */
  .faq-is-searching .faq-cv { display:none; }
  .faq-is-searching .faq-hero { padding-bottom:12px; }
  .faq-layout { grid-template-columns:minmax(0,1fr); gap:0; padding-top:0; }
  .faq-nav { top:40px; z-index:20; margin:0 -16px; padding:10px 16px; border-bottom:1px solid var(--color-line); background:color-mix(in srgb, var(--color-bg) 94%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .faq-nav-title, .faq-nav-cv { display:none; }
  .faq-nav ul { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; scroll-padding-inline:16px; }
  .faq-nav ul::-webkit-scrollbar { display:none; }
  .faq-nav li { flex:none; }
  .faq-nav ul a { gap:7px; min-height:38px; padding:0 13px; border:1px solid var(--color-line); border-radius:999px; background:var(--color-card); font-size:13.5px; white-space:nowrap; }
  .faq-nav ul a .ic { width:15px; height:15px; }
  .faq-nav ul a[aria-current] { border-color:var(--color-majorelle-line); }
  .faq-body { padding-top:32px; }
  .faq [id] { scroll-margin-top:112px; }
  .faq-end { grid-template-columns:minmax(0,1fr); margin-top:56px; }
}
@media (min-width:640px) and (max-width:960px) { .faq-nav { margin:0 -24px; padding-inline:24px; } }
@media (min-width:768px) and (max-width:960px) { .faq-nav { top:106px; } .faq [id] { scroll-margin-top:178px; } }
@media (max-width:600px) {
  .faq-hero { padding-top:0; }
  .faq-hero h1 { margin:14px 0 12px; font-size:40px; }
  .faq-intro { font-size:15.5px; line-height:1.7; }
  .faq-search { margin-top:22px; }
  .faq-field { height:52px; padding-left:15px; }
  .faq-cv { margin-right:6px; padding:20px; box-shadow:6px 6px 0 var(--faq-lime); }
  .faq-cv h2 { font-size:23px; margin-bottom:14px; }
  .faq-cv li { font-size:13.5px; }
  .faq-cv ul { margin-bottom:18px; }
  .faq-section + .faq-section { margin-top:40px; }
  .faq-section-ic { width:34px; height:34px; }
  .faq-item > summary { gap:14px; padding:16px 0; font-size:16px; }
  .faq-a { padding:0 0 20px; font-size:15px; line-height:1.7; }
  .faq-end > section { padding:24px; }
}
@media (prefers-reduced-motion:reduce) { .faq-item.is-target { animation:none; } .faq-plus { transition:none; } }