/* AdverseShop — pages d'information — style partagé */
:root{
  --purple: #7c3aed;
  --purple-dark: #6d28d9;
  --purple-deep: #;
  --lavender: #f0eeff;
  --white: #ffffff;
  --text: #3f3a52;
  --text-soft: #8a83a3;
  --ring: rgba(124,58,237,.14);
  --radius: 20px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1100px 420px at 90% -10%, var(--ring), transparent 60%),
    var(--lavender);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

/* ---------- Header ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(124,58,237,.10);
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-weight:400; letter-spacing:.2px;
  color:var(--purple-deep);
}
.brand .mark{
  width:34px; height:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--purple), var(--purple-dark));
  color:#fff; font-size:15px;
  box-shadow:0 6px 14px rgba(124,58,237,.35);
}
.close-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--lavender);
  color:var(--purple);
  text-decoration:none;
  border:1px solid rgba(124,58,237,.15);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.close-btn:hover{ background:var(--purple); color:#fff; transform:rotate(90deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  margin:18px 16px 0;
  padding:38px 24px 46px;
  border-radius:26px;
  color:#fff;
  background:linear-gradient(150deg, var(--purple-dark) 0%, var(--purple) 55%, #a78bfa 100%);
  box-shadow:0 18px 40px -14px rgba(124,58,237,0.85);
}
.hero::before{
  content:'';
  position:absolute; right:-40px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.hero::after{
  content:'';
  position:absolute; left:-30px; bottom:-70px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:400; letter-spacing:.4px;
  text-transform:uppercase;
  background:rgba(255,255,255,.16);
  padding:6px 14px; border-radius:999px;
  margin-bottom:14px;
}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(26px,6vw,36px);
  font-weight:400;
  position:relative;
}
.hero p{
  margin:0; max-width:46ch;
  color:rgba(255,255,255,.92);
  font-size:15px;
  position:relative;
}
.hero .hero-icon{
  position:absolute; right:22px; bottom:18px;
  font-size:52px;
  color:rgba(255,255,255,.20);
}

/* ---------- Layout ---------- */
main{
  max-width:720px;
  margin:0 auto;
  padding:26px 16px 10px;
}
.updated{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--text-soft);
  margin:2px 4px 22px;
}
.updated i{color:var(--purple)}

.section{
  background:var(--white);
  border-radius:var(--radius);
  padding:22px 20px;
  margin-bottom:16px;
  box-shadow:0 8px 26px -18px rgba(59,23,112,.35);
  border:1px solid rgba(124,58,237,.06);
}
.section h2{
  display:flex; align-items:center; gap:12px;
  margin:0 0 12px;
  font-size:17px;
  color:var(--purple-deep);
}
.section h2 .icon-badge{
  flex:none;
  width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--lavender);
  color:var(--purple);
  font-size:15px;
}
.section p, .section li{
  font-size:14.5px;
  color:var(--text);
}
.section p{margin:0 0 10px}
.section p:last-child{margin-bottom:0}
.section ul{margin:0; padding-left:0; list-style:none}
.section ul li{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:9px;
}
.section ul li:last-child{margin-bottom:0}
.section ul li i{
  color:var(--purple); font-size:12px; margin-top:5px; flex:none;
}
.section strong{color:var(--purple-deep)}

.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px;
  border-radius:999px;
  background:var(--lavender);
  color:var(--purple-dark);
  font-size:12.5px; font-weight:400;
}

.contact-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  background:linear-gradient(135deg, var(--purple-dark), var(--purple));
  color:#fff;
  border-radius:var(--radius);
  padding:20px;
  margin:6px 0 26px;
}
.contact-card .txt h3{margin:0 0 4px; font-size:15.5px}
.contact-card .txt p{margin:0; font-size:13px; color:rgba(255,255,255,.85)}
.contact-card a.cta{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff; text-decoration:none;
  transition:background .18s ease;
}
.contact-card a.cta:hover{background:rgba(255,255,255,.3)}

footer.page-footer{
  text-align:center;
  padding:22px 16px 34px;
  font-size:12px;
  color:var(--text-soft);
}
footer.page-footer a{
  color:var(--purple);
  font-weight:400;
  text-decoration:none;
}

@media (max-width:420px){
  .hero{padding:32px 18px 40px}
  .section{padding:18px 16px}
}