/* Scope page accueil */
:root{
  --nav-offset: 120px; /* sera mis à jour par le script */
  --container: 1100px;

  --bg-a: #20104a;
  --bg-b: #0b0620;
  --text: #0f172a;         /* texte principal sur fond clair */
  --muted: #475569;
  --brand: #7c3aed;        /* violet */
  --accent: #ffd166;       /* bouton */
  --card: #ffffff;
  --ring: rgba(124,58,237,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

html,body{margin:0;padding:0;}
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;}

.page{
  /* si tu gardes fond clair, pas de gradient derrière la nav */
  background: #f8fafc;
  min-height: 100dvh;
  padding-top: var(--nav-offset);
}

.container{
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.hero{
  background: linear-gradient(180deg, #fafaff, #eef1ff);
  border-bottom: 1px solid rgba(124,58,237,.10);
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}
.hero h1{
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.12;
  color: #0b1020;
  text-shadow: 0 2px 10px rgba(124,58,237,.15); -webkit-text-shadow: 0 2px 10px rgba(124,58,237,.15);
}
.hero .lead{
  margin: 0 auto 1rem;
  max-width: 60ch;
  color: #334155;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.btn{
  display:inline-block; -webkit-flex:inline-block; -webkit-flex:inline-block; -ms-flex:inline-block; -ms-flexbox:inline-block;
  padding:.9rem 1.2rem;
  border-radius:999px; -webkit-border-radius:999px;
  text-decoration:none; -webkit-text-decoration:none;
  font-weight:700;
  background: linear-gradient(135deg, var(--accent), #ff9f1c);
  color:#1a1200;
  box-shadow: var(--shadow); -webkit-box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.06);
  transition: transform .12s ease, filter .2s ease; -webkit-transition: transform .12s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); filter: brightness(1.03); -webkit-filter: brightness(1.03); }

.section{
  padding: clamp(1.25rem, 4vw, 2.25rem) 0;
}

.section h2{
  margin: 0 0 .75rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: #0f172a;
}

.benefits{
  display:grid; -webkit-flex:grid; -webkit-flex:grid; -ms-flex:grid; -ms-flexbox:grid;
  gap:.75rem;
  list-style:none;
  margin:0; padding:0;
}
.benefits li{
  background: var(--card);
  border: 1px solid #e5e7eb;
  border-radius: 14px; -webkit-border-radius: 14px;
  padding:.85rem 1rem;
  box-shadow: var(--shadow); -webkit-box-shadow: var(--shadow);
  color: var(--text);
}
.benefits strong{ color:#0b1020; }

/* Étapes */
.steps{
  margin:0; padding-left:1.25rem;
  display:grid; -webkit-flex:grid; -webkit-flex:grid; -ms-flex:grid; -ms-flexbox:grid; gap:.55rem;
  color: var(--text);
}
.steps li{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px; -webkit-border-radius:10px;
  padding:.6rem .8rem;
}

/* FAQ lisible */
.faq{
  display:grid; -webkit-flex:grid; -webkit-flex:grid; -ms-flex:grid; -ms-flexbox:grid; gap:.75rem;
}
.faq details{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px; -webkit-border-radius:12px;
  box-shadow: var(--shadow); -webkit-box-shadow: var(--shadow);
  padding:.75rem 1rem;
}
.faq details[open]{
  border-color: var(--brand);
  box-shadow: 0 6px 20px var(--ring); -webkit-box-shadow: 0 6px 20px var(--ring);
}
.faq summary{
  cursor:pointer; -webkit-cursor:pointer;
  font-weight:700;
  color:#111827;
  outline:none; -webkit-outline:none; -moz-outline:none;
  list-style:none;
}
.faq p{
  margin:.6rem 0 0;
  color:#334155;
  font-size:1rem;
  line-height:1.5;
}

/* Ancrages qui ne passent pas sous la nav */
.page [id]{ scroll-margin-top: calc(var(--nav-offset) + 16px); }

/* Responsive */
@media (max-width: 640px){
  .btn{ width:100%; max-width: 420px; }
  .container{ width: min(100% - 1.5rem, var(--container)); }
}