:root{
  --paper:#FFFFFF;
  --bg-muted:#F7F7F7;
  --ink:#1A1C20;
  --ink-muted:#6C7078;
  --line:#E4E2DC;
  --blue:#2936CC;
  --yellow:#FFDD00;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Barlow', system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
}

h1, h2, .brand, .chip{
  font-family:'Oswald', system-ui, sans-serif;
}

a{color:inherit;}

/* ---------- Bandeau ---------- */
.hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:28px 6vw 40px;
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:44px;
}

.brand{
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}

.brand .dot{
  width:8px;
  height:8px;
  background:var(--blue);
  display:inline-block;
}

.lang-switch{display:flex; gap:6px;}

.lang-switch a{
  background:none;
  border:1px solid var(--line);
  color:var(--ink-muted);
  font-family:'Barlow', sans-serif;
  font-size:.78rem;
  padding:5px 10px;
  border-radius:4px;
  text-decoration:none;
  display:inline-block;
}

.lang-switch a.is-active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  font-weight:600;
}

.hero h1{
  font-size:clamp(2rem, 4.5vw, 3rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 14px;
  max-width:14ch;
}

.hero p{
  color:var(--ink-muted);
  font-size:1.05rem;
  margin:0 0 28px;
  max-width:46ch;
}

.search-wrap{position:relative; max-width:460px;}

.search-wrap input{
  width:100%;
  padding:14px 16px 14px 42px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg-muted);
  font-family:'Barlow', sans-serif;
  font-size:.98rem;
  color:var(--ink);
}

.search-wrap input:focus{
  outline:2px solid var(--blue);
  outline-offset:0;
  background:var(--paper);
}

.search-wrap svg{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  stroke:var(--ink-muted);
}

/* ---------- Filtres ---------- */
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:22px 6vw;
  max-width:900px;
  margin:0 auto;
}

.chip{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-size:.86rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  cursor:pointer;
}

.chip:hover{border-color:var(--blue);}

.chip.is-active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

/* ---------- Contenu ---------- */
.content{max-width:900px; margin:0 auto; padding:0 6vw 80px;}

.theme-block{margin-bottom:40px;}

.theme-block h2{
  font-size:1.05rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ink-muted);
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--ink);
}

.faq-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:10px;
  overflow:hidden;
}

.faq-q{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:17px 18px;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:'Barlow', sans-serif;
  color:var(--ink);
}

.faq-q:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}

.faq-q .qtext{flex:1; font-size:1rem; font-weight:500;}

.faq-q .slug{
  flex:none;
  font-size:.72rem;
  color:var(--ink-muted);
  font-family:'Barlow', sans-serif;
}

.chevron{
  flex:none;
  width:10px;
  height:10px;
  border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(45deg);
  transition:transform .18s ease;
  margin-top:-2px;
}

.faq-item.is-open .chevron{transform:rotate(-135deg); margin-top:2px;}
.faq-item.is-open{border-color:var(--blue);}

.faq-a{max-height:0; overflow:hidden; transition:max-height .22s ease;}

.faq-a-inner{padding:0 18px 18px; font-size:.95rem; color:#3A3D43;}
.faq-a-inner p{margin:0;}

.empty-state{
  display:none;
  padding:32px 0;
  color:var(--ink-muted);
  font-size:.95rem;
}

@media (prefers-reduced-motion: reduce){
  .faq-a, .chevron{transition:none;}
}

@media (max-width:640px){
  .hero{padding:22px 5vw 32px;}
  .hero-top{margin-bottom:32px;}
  .filters, .content{padding-left:5vw; padding-right:5vw;}
}