/*******************
  PAGE « FAQ » (P6, 22/10/2026) — gabarit page-faq.php, sans maquette.
  Composée avec les jetons (tokens.css) et les accordéons des personae (personae.css, .pe-faq-*).
  - ≥ 1024 px : deux colonnes dans le couloir des pages (var(--tunnel)) : colonne collante de
    320 px (sommaire + encart « Une autre question ? »), questions à droite.
  - < 1024 px : le sommaire devient une rangée de pastilles défilante, collée sous le header ;
    l'encart passe après les questions.
  Le lien du sommaire de la section visible porte aria-current="true" (faq.js).
*******************/

.faq {
  --faq-hdr: calc(var(--topbar-h, 0px) + var(--hdr-top, 20px) + var(--hdr-bar-h, 60px) + var(--hdr-bottom, 12px));
  --faq-side-w: clamp(260px, 22vw, 340px);
  --faq-gap: clamp(24px, 3vw, 56px);
  color: var(--c-ink);
  text-align: left;
}
.faq p {
  margin: 0;
}
/* Ancres (sommaire, liens de l'accueil) : arrivée sous le header fixe, défilement doux. */
html:has(.faq) {
  scroll-padding-top: calc(var(--topbar-h, 0px) + var(--hdr-top, 20px) + var(--hdr-bar-h, 60px) + var(--hdr-bottom, 12px) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.faq) {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------- En-tête
   Fil d'Ariane, titre mixte (droit + italique sur la même ligne), accroche ; carte beige bord
   à bord comme les en-têtes des pages P5. */
.faq-head {
  padding: clamp(16px, 2.1vw, 40px) var(--page-edge) 0;
}
.faq-head-in {
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  padding: clamp(28px, 3vw, 58px) clamp(16px, 3.2vw, 76px) clamp(32px, 3.4vw, 66px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
.faq-crumbs {
  margin-bottom: clamp(14px, 1.5vw, 28px);
  font-size: calc(var(--fs-small) * 1.1);
  line-height: 1.7;
}
.faq-crumbs [aria-current] {
  font-weight: 600;
}
.faq-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.faq-crumbs a:hover {
  color: var(--c-accent);
}
.faq-head .title {
  margin: 0;
}
.faq-head h1 {
  max-width: 18em;
  margin: 0;
}
.faq-lead {
  max-width: 44em;
  margin-top: clamp(12px, 1.2vw, 22px);
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
}

/* ---------------------------------------------------------------- Deux colonnes */
.faq-layout {
  display: grid;
  grid-template-columns: var(--faq-side-w) minmax(0, 1fr);
  gap: var(--faq-gap);
  align-items: start;
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 50px) calc(var(--page-edge) + clamp(8px, 3.2vw, 76px)) var(--sp-2xl);
}

/* Colonne collante : sommaire puis encart. */
.faq-side {
  position: sticky;
  top: calc(var(--faq-hdr) + 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 26px);
  max-height: calc(100vh - var(--faq-hdr) - 32px);
  overflow-y: auto;
  scrollbar-width: none;
}
.faq-side::-webkit-scrollbar {
  display: none;
}
/* `.faq p { margin: 0 }` est plus spécifique qu'une classe seule : sélecteur composé. */
.faq .faq-nav-title {
  margin-bottom: clamp(18px, 1.5vw, 28px);
  padding-left: 18px;
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.faq-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-nav-link {
  position: relative;
  display: block;
  padding: 7px 18px;
  border-radius: var(--r-field);
  color: var(--c-ink);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.faq-nav-link:hover,
.faq-nav-link:focus-visible {
  background: var(--c-beige);
  color: var(--c-accent);
}
.faq-nav-link[aria-current="true"] {
  background: var(--c-beige);
  color: var(--c-accent);
}
.faq-nav-link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Encart « Une autre question ? » : carte beige, texte noir (demande d'Antoine du 22/10), bouton plein. */
.faq-cta {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 12px);
  padding: clamp(20px, 1.8vw, 32px) clamp(18px, 1.6vw, 28px);
  border-radius: var(--r-card);
  background: var(--c-beige);
  color: var(--c-black);
}
.faq-cta-title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-title);
}
.faq-cta-text {
  font-size: var(--fs-small);
  line-height: var(--lh-text);
  opacity: 0.85;
}
.faq-cta-btn {
  align-self: flex-start;
  margin-top: clamp(6px, 0.6vw, 10px);
}

/* ---------------------------------------------------------------- Sections et accordéons */
.faq-main {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.4vw, 64px);
  min-width: 0;
}
.faq-sec-title {
  margin: 0 0 clamp(12px, 1.2vw, 22px);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-title);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.4vw, 8px);
}
.faq-item {
  border-radius: clamp(12px, 1vw, 18px);
  background: var(--c-beige);
  transition: background-color 0.2s;
}
.faq-item[open] {
  background: var(--c-beige);
}
.faq-item summary {
  position: relative;
  display: block;
  padding: clamp(16px, 1.3vw, 24px) clamp(48px, 4vw, 76px) clamp(16px, 1.3vw, 24px) clamp(18px, 1.8vw, 34px);
  color: var(--c-ink);
  font-size: clamp(15px, 13.6px + 0.36vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: clamp(18px, 1.6vw, 30px);
  color: var(--c-accent);
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-item summary:hover {
  color: var(--c-accent);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: inherit;
}
/* Question visée par l'URL (faq.js) : liseré turquoise le temps de la repérer. */
.faq-item.is-target {
  box-shadow: 0 0 0 2px var(--c-accent);
}
.faq-body {
  padding: 0 clamp(18px, 4vw, 76px) clamp(18px, 1.5vw, 28px) clamp(18px, 1.8vw, 34px);
  font-size: var(--fs-text);
  line-height: 1.5;
}
.faq-body > :first-child {
  margin-top: 0;
}
.faq-body > :last-child {
  margin-bottom: 0;
}
.faq-body p,
.faq-body ul,
.faq-body ol {
  margin: 0 0 0.8em;
}
.faq-body ul,
.faq-body ol {
  padding-left: 1.3em;
}
.faq-body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------- < 1024 px : une colonne
   Sommaire en pastilles défilantes collées sous le header, encart après les questions. */
@media (max-width: 1023px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: calc(var(--page-edge) + clamp(8px, 2vw, 24px));
  }
  .faq-side {
    display: contents;
  }
  .faq-nav {
    position: sticky;
    top: var(--faq-hdr);
    z-index: 5;
    margin: 0 calc(-1 * var(--page-edge) - clamp(8px, 2vw, 24px));
    padding: 8px calc(var(--page-edge) + clamp(8px, 2vw, 24px));
    background: var(--c-white);
    box-shadow: var(--sh-bar);
    transition: top 0.3s;
  }
  /* Le header se masque en descendant (header.nav-up) : la rangée monte en haut de l'écran. */
  body:has(header.nav-up) .faq-nav {
    top: 0;
  }
  .faq-nav-list li {
    flex: 0 0 auto;
  }
  .faq-nav-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .faq-nav-list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .faq-nav-list::-webkit-scrollbar {
    display: none;
  }
  .faq-nav-link {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    white-space: nowrap;
  }
  .faq-nav-link[aria-current="true"] {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-white);
  }
  .faq-cta {
    order: 2;
    margin-top: clamp(8px, 2vw, 24px);
  }
  .faq-main {
    order: 1;
  }
  html:has(.faq) {
    /* la rangée de pastilles s'ajoute au header au-dessus des ancres */
    scroll-padding-top: calc(var(--topbar-h, 0px) + var(--hdr-top, 20px) + var(--hdr-bar-h, 60px) + var(--hdr-bottom, 12px) + 64px);
  }
}
@media (max-width: 760px) {
  .faq-head-in {
    padding-inline: 16px;
  }
}