/* Styles propres à faq.html. Réutilise .category-intro de category.css
   pour le bandeau d'intro. Header, footer et tokens partagés dans base.css.
   Accordéon natif via <details>/<summary> — pas de JS nécessaire. */

.faq-body{ padding:20px 0 100px; }
.faq-layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start; }

/* ===== NAV LATÉRALE (ancres vers les catégories) ===== */
.faq-nav{ position:sticky; top:100px; display:flex; flex-direction:column; gap:4px; }
.faq-nav a{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; color:#7A8078; padding:9px 0; border-left:2px solid transparent;
  padding-left:14px; transition:color .15s ease, border-color .15s ease;
}
.faq-nav a:hover{ color:var(--ink); border-color:var(--line); }

/* ===== CATÉGORIES ===== */
.faq-category{ margin-bottom:56px; scroll-margin-top:100px; }
.faq-category:last-child{ margin-bottom:0; }
.faq-category-title{
  font-family:'Big Shoulders Display', sans-serif; font-weight:900;
  text-transform:uppercase; font-size:clamp(24px, 2.4vw, 30px);
  color:var(--ink); margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

/* ===== ITEM (details/summary) ===== */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 34px 20px 0; position:relative;
  font-size:16px; font-weight:500; color:var(--ink);
  display:flex; align-items:center; gap:14px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:2px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--eco-deep); border-bottom:2px solid var(--eco-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-item .faq-q-num{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--eco-deep);
  flex-shrink:0;
}
.faq-answer{ padding:0 34px 26px 34px; font-size:15px; color:#4B564F; max-width:680px; }
.faq-answer p + p{ margin-top:12px; }

/* ===== CTA FINAL ===== */
.faq-cta{
  margin-top:70px; padding:48px 44px; background:var(--glacier-deep);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
}
.faq-cta h3{
  font-family:'Big Shoulders Display', sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(24px, 2.6vw, 32px); color:#F7F4EC; line-height:1.08;
}
.faq-cta p{ color:#BFD9EA; font-size:14.5px; margin-top:8px; max-width:400px; }
.faq-cta-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width: 900px){
  .faq-layout{ grid-template-columns:1fr; }
  .faq-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:8px 18px; margin-bottom:20px; }
  .faq-nav a{ border-left:none; padding-left:0; border-bottom:2px solid transparent; padding-bottom:6px; }
  .faq-nav a:hover{ border-color:var(--line); }
}
@media (max-width: 620px){
  .faq-item summary{ padding-right:28px; }
  .faq-answer{ padding-left:0; padding-right:0; }
}