/* =========================================================
   Revisly — centre d'aide
   (se charge par-dessus styles.css, la feuille de la landing)
   ========================================================= */

.aide-hero{position:relative;z-index:1;padding:148px 0 0;text-align:center}
.aide-hero h1{font-size:2.75rem;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.aide-hero .chapeau{margin:16px auto 0;max-width:52ch;font-size:1.0625rem;color:var(--ink-secondary)}

/* ---------- recherche ---------- */
.recherche-aide{
  margin:28px auto 0;max-width:540px;display:flex;align-items:center;gap:11px;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:999px;padding:13px 20px;box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s;
}
.recherche-aide:focus-within{border-color:var(--sky-bold);box-shadow:0 0 0 4px rgba(30,136,216,.14)}
.recherche-aide svg{width:18px;height:18px;color:var(--ink-tertiary);flex:none}
.recherche-aide input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  font:inherit;font-size:1rem;color:var(--ink-primary);
}
.recherche-aide input::placeholder{color:var(--ink-tertiary)}
.recherche-aide .vider{
  flex:none;width:24px;height:24px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-tertiary);background:none;border:0;
}
.recherche-aide .vider:hover{background:#f0efec;color:var(--ink-primary)}
.recherche-aide .vider svg{width:13px;height:13px}

/* ---------- catégories ---------- */
.categories{
  position:relative;z-index:1;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px;
}
.categorie{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;font-size:.875rem;white-space:nowrap;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  color:var(--ink-secondary);transition:border-color .15s,color .15s,background .15s;
}
.categorie:hover{color:var(--ink-primary);border-color:#d5d4d0}
.categorie.on{background:var(--sky-bold);border-color:var(--sky-bold);color:#fff}
.categorie .n{font-size:.75rem;opacity:.7;font-variant-numeric:tabular-nums}

/* ---------- articles ---------- */
.articles-zone{position:relative;z-index:1;padding:44px 0 0}
.compteur{
  max-width:820px;margin:0 auto 14px;font-size:.8125rem;color:var(--ink-tertiary);
}
.articles{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}

.article{
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:border-color .15s;
}
.article:hover{border-color:#d5d4d0}
.article.open{border-color:var(--sky-bold)}

.article-q{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  padding:18px 20px;font-size:1rem;font-weight:500;background:none;border:0;
}
.article-q .cat{
  flex:none;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--sky-bold);background:var(--sky-soft);border-radius:999px;padding:3px 9px;
}
.article-q .t{flex:1;min-width:0}
.article-q .chev{flex:none;width:16px;height:16px;color:var(--ink-tertiary);transition:transform .3s}
.article.open .article-q .chev{transform:rotate(180deg)}

.article-r{max-height:0;overflow:hidden;transition:max-height .35s ease}
.article-r .dedans{padding:0 20px 20px 20px}
.article-r p{margin:0 0 12px;font-size:.9375rem;line-height:1.7;color:var(--ink-secondary)}
.article-r p:last-child{margin-bottom:0}
.article-r ul,.article-r ol{margin:0 0 12px;padding-left:22px;list-style:revert;font-size:.9375rem;line-height:1.7;color:var(--ink-secondary)}
.article-r li{margin-bottom:6px}
.article-r b{color:var(--ink-primary);font-weight:600}
.article-r a{color:var(--sky-bold);text-decoration:underline;text-underline-offset:2px}
.article-r kbd{
  display:inline-block;padding:1px 6px;border-radius:5px;
  background:#f0efec;border:1px solid var(--surface-border);
  font:inherit;font-size:.8125em;font-weight:600;color:var(--ink-secondary);
}

/* ---------- aucun résultat ---------- */
.rien{
  max-width:820px;margin:0 auto;text-align:center;
  background:var(--surface-primary);border:1px dashed var(--surface-border);
  border-radius:16px;padding:44px 24px;
}
.rien b{display:block;font-size:1.0625rem}
.rien p{margin-top:8px;font-size:.9375rem;color:var(--ink-secondary)}
.rien .btn{margin-top:18px}

/* ---------- contact ---------- */
.contact{position:relative;z-index:1;padding:80px 0 96px;scroll-margin-top:90px}
.contact-bloc{
  max-width:900px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.25fr;gap:36px;align-items:start;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:24px;padding:36px;box-shadow:var(--shadow-md);
}
.contact-texte h2{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.contact-texte p{margin-top:12px;font-size:.9375rem;line-height:1.7;color:var(--ink-secondary)}
.canaux{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.canal{display:flex;align-items:flex-start;gap:12px}
.canal .ic{
  flex:none;width:34px;height:34px;border-radius:10px;
  background:var(--sky-soft);color:var(--sky-bold);
  display:flex;align-items:center;justify-content:center;
}
.canal .ic svg{width:17px;height:17px}
.canal b{display:block;font-size:.875rem;font-weight:600}
.canal span{display:block;margin-top:2px;font-size:.8125rem;color:var(--ink-secondary)}

.contact-form{display:flex;flex-direction:column;gap:14px}
.champ-aide{display:flex;flex-direction:column;gap:6px}
.champ-aide label{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}
.champ-aide input,.champ-aide select,.champ-aide textarea{
  width:100%;background:#fbfbf9;border:1px solid var(--surface-border);border-radius:12px;
  padding:11px 14px;font:inherit;font-size:.9375rem;color:var(--ink-primary);
  transition:border-color .18s,box-shadow .18s;
}
.champ-aide select{appearance:none;cursor:pointer}
.champ-aide textarea{min-height:120px;resize:vertical;line-height:1.6}
.champ-aide input:focus,.champ-aide select:focus,.champ-aide textarea:focus{
  outline:0;border-color:var(--sky-bold);box-shadow:0 0 0 3px rgba(30,136,216,.14);
}
.champ-aide input::placeholder,.champ-aide textarea::placeholder{color:var(--ink-tertiary)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.msg-form{font-size:.8125rem;min-height:18px}
.msg-form.err{color:#b8453a}
.msg-form.ok{color:#2f7a3c}

.envoye{text-align:center;padding:24px 8px}
.envoye .sceau{
  width:56px;height:56px;margin:0 auto 16px;border-radius:999px;
  background:var(--sky-soft);border:1px solid var(--sky-bold);
  display:flex;align-items:center;justify-content:center;
}
.envoye .sceau svg{width:26px;height:26px;color:var(--sky-bold)}
.envoye b{display:block;font-size:1.125rem}
.envoye p{margin-top:10px;font-size:.9375rem;line-height:1.7;color:var(--ink-secondary)}

@media (prefers-reduced-motion: reduce){
  .article,.article-r,.article-q .chev,.categorie{transition:none}
}

@media (max-width:860px){
  .contact-bloc{grid-template-columns:1fr;gap:28px;padding:28px}
}
@media (max-width:640px){
  .aide-hero{padding-top:120px}
  .aide-hero h1{font-size:2rem}
  .article-q{flex-wrap:wrap;gap:10px}
  .article-q .cat{order:-1}
  .duo{grid-template-columns:1fr}
  .contact{padding:56px 0 72px}
}

.aremplir-inline{
  background:var(--highlight);color:#5a4a00;border-radius:4px;
  padding:1px 6px;font-weight:600;
}
