/* =============================================================
   TWIKEE STUDIO — FAQ page styles (/faq)
   Sidebar sticky + main list avec accordéons.
   ============================================================= */

.faq-body{background:#fff}

/* --- FAQ HERO --- */
.fq-hero{
  padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,5vw,4.5rem);
  position:relative;
  background:
    radial-gradient(ellipse 60% 80% at 90% 0%, rgba(38,86,255,.10), transparent 60%),
    #FFFFFF;
  border-bottom:1px solid var(--rule);
}
.fq-hero__h1{
  font-family:var(--f-display);
  font-size:clamp(2.4rem, 5.6vw, 4.6rem);
  font-weight:700;line-height:1.04;
  letter-spacing:-0.028em;color:var(--ink);
  max-width:22ch;
  margin:0 0 1.5rem;
}
.fq-hero__h1 em{color:var(--blue);font-weight:600;font-style:italic}
.fq-hero__lede{
  max-width:62ch;font-size:1.08rem;color:var(--mute);line-height:1.6;
  margin-bottom:2.5rem;
}

.fq-search{
  display:flex;align-items:center;gap:.8rem;
  max-width:620px;padding:0 1.2rem;
  background:#fff;
  border:2px solid var(--rule);
  border-radius:var(--radius-pill);
  transition:border-color .2s,box-shadow .2s;
}
.fq-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(38,86,255,.12)}
.fq-search svg{color:var(--mute);flex-shrink:0}
.fq-search input{
  flex:1;min-width:0;
  border:0;outline:0;padding:1.1rem 0;
  font-family:var(--f-sans);font-size:1rem;
  background:transparent;color:var(--ink);
}
.fq-search input::placeholder{color:var(--mute)}
.fq-search__hint{
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:.76rem;color:var(--mute);
  white-space:nowrap;
}

/* --- FAQ BODY : sidebar + main --- */
.fq-body{padding:clamp(3rem,5vw,4.5rem) 0 clamp(4rem,8vw,7rem);background:#FAFAF7}
.fq-body__grid{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:3.5rem;align-items:start;
}

/* sidebar */
.fq-side{
  position:sticky;top:calc(var(--nav-h) + 1.5rem);
}
.fq-side__title{
  display:block;
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1rem;
}
.fq-side__list{display:flex;flex-direction:column;gap:.1rem;margin-bottom:2rem}
.fq-side__item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.8rem;align-items:center;
  padding:.7rem .9rem;
  border-radius:12px;
  color:var(--text);
  transition:background .2s,color .2s;
  cursor:pointer;
}
.fq-side__item:hover{background:#EEF2FF;color:var(--ink)}
.fq-side__item.is-active{
  background:var(--ink);color:#fff;
}
.fq-side__item.is-active .fq-side__n{color:var(--blue-2)}
.fq-side__item.is-active .fq-side__c{background:var(--blue);color:#fff}
.fq-side__n{
  font-family:var(--f-display);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  color:var(--blue);
}
.fq-side__k{
  font-size:.92rem;font-weight:500;
  line-height:1.3;
}
.fq-side__c{
  padding:2px 8px;
  background:var(--rule);color:var(--mute);
  border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  min-width:26px;text-align:center;
}

.fq-side__box{
  margin-top:2rem;
  padding:1.5rem;
  background:var(--blue);color:#fff;
  border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
}
.fq-side__box::before{
  content:"";position:absolute;top:-40px;right:-40px;
  width:140px;height:140px;
  background:rgba(255,255,255,.12);
  border-radius:50%;
  pointer-events:none;
}
.fq-side__box > *{position:relative;z-index:1}
.fq-side__box h4{
  font-family:var(--f-display);font-size:1.15rem;font-weight:700;
  margin-bottom:.4rem;
}
.fq-side__box p{font-size:.88rem;margin-bottom:1rem;line-height:1.5;color:rgba(255,255,255,.9)}
.fq-side__box .btn--primary{
  background:#fff;color:var(--blue);border-color:#fff;width:100%;
  box-shadow:none;
}
.fq-side__box .btn--primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* main content */
.fq-main{display:flex;flex-direction:column;gap:3.5rem;min-width:0}

.fq-cat{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.fq-cat__head{
  padding-bottom:1.5rem;margin-bottom:1.5rem;
  border-bottom:2px solid var(--ink);
}
.fq-cat__n{
  display:inline-block;
  padding:.4rem .9rem;
  background:var(--blue);color:#fff;
  border-radius:var(--radius-pill);
  font-family:var(--f-display);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;
  margin-bottom:1rem;
}
.fq-cat__h2{
  font-family:var(--f-display);
  font-size:clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight:700;line-height:1.1;letter-spacing:-0.022em;
  color:var(--ink);
  margin-bottom:.6rem;
}
.fq-cat__intro{
  max-width:66ch;font-size:1rem;color:var(--mute);line-height:1.6;
}

.fq-cat__list{display:flex;flex-direction:column;gap:.6rem}

/* accordéons FAQ (surcharge .qa du homepage pour contexte page FAQ) */
.qa--faq{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:14px;
  padding:0 1.6rem;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.qa--faq[open]{
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 20px 40px -24px rgba(38,86,255,.18);
}
.qa--faq summary{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;
  padding:1.3rem 0;
  cursor:pointer;list-style:none;
}
.qa--faq summary::-webkit-details-marker{display:none}
.qa--faq .qa__n{
  font-family:var(--f-display);
  font-size:.82rem;font-weight:700;letter-spacing:.08em;
  color:var(--blue);
  flex-shrink:0;
}
.qa--faq .qa__q{
  font-family:var(--f-display);
  font-size:1.08rem;font-weight:600;letter-spacing:-0.01em;
  line-height:1.35;color:var(--ink);
}
.qa--faq .qa__plus{
  width:34px;height:34px;border-radius:50%;
  background:var(--blue-bg);
  position:relative;flex-shrink:0;
  transition:background .25s,transform .3s var(--ease);
}
.qa--faq .qa__plus::before,
.qa--faq .qa__plus::after{
  content:"";position:absolute;top:50%;left:50%;
  width:12px;height:2px;background:var(--blue);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease),background .25s;
}
.qa--faq .qa__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa--faq[open] .qa__plus{background:var(--blue);transform:rotate(45deg)}
.qa--faq[open] .qa__plus::before,
.qa--faq[open] .qa__plus::after{background:#fff}

.qa--faq .qa__a{
  padding:0 0 1.6rem calc(1.1rem + 2.6rem);
  max-width:76ch;
  color:var(--text);
  font-size:.98rem;line-height:1.7;
}
.qa--faq .qa__a strong{color:var(--ink);font-weight:700}

/* état vide (recherche sans résultat) */
.fq-empty{
  padding:3rem 2rem;text-align:center;
  background:#fff;
  border:1px dashed var(--rule);
  border-radius:var(--radius-lg);
}
.fq-empty h3{
  font-family:var(--f-display);
  font-size:1.3rem;font-weight:700;color:var(--ink);
  margin-bottom:.6rem;
}
.fq-empty p{color:var(--mute);font-size:.95rem}
.fq-empty a{color:var(--blue);font-weight:600;text-decoration:underline}

/* état de match recherche : highlight */
.qa--faq.is-match{border-color:var(--blue);background:var(--blue-tint)}
.qa--faq.is-hidden{display:none}
.fq-cat.is-hidden{display:none}

/* nav is-active */
.nav__links a.is-active,
.nav__mobile a.is-active{color:var(--blue);font-weight:600}
.nav__links a.is-active::after{width:100%}

/* --- RESPONSIVE --- */
@media (max-width: 1100px){
  .fq-body__grid{grid-template-columns:1fr;gap:2rem}
  .fq-side{position:static;order:0}
  .fq-side__list{
    flex-direction:row;flex-wrap:wrap;gap:.4rem;
    max-height:200px;overflow:auto;
    padding:.5rem;background:#fff;border:1px solid var(--rule);border-radius:12px;
  }
  .fq-side__item{flex:1 1 280px;padding:.6rem .8rem}
  .fq-side__box{display:none}
}
@media (max-width: 600px){
  .fq-search{padding:0 .9rem}
  .fq-search input{padding:.95rem 0;font-size:.95rem}
  .fq-search__hint{display:none}
  .qa--faq{padding:0 1.1rem}
  .qa--faq summary{grid-template-columns:auto 1fr auto;gap:.7rem;padding:1.1rem 0}
  .qa--faq .qa__q{font-size:1rem}
  .qa--faq .qa__a{padding-left:0}
  .fq-cat__head{padding-bottom:1rem;margin-bottom:1rem}
}