:root{
  /* Palette plus chaleureuse */
  --bg:#F9F6FF;              /* lavande très claire, moins grise */
  --surface:#FFFFFF;
  --ink:#1C2230;
  --muted:#6E7391;

  --brand:#6F6AF8;           /* bleu-lavande crédible */
  --brand-600:#5752E6;
  --tint:#F2EEFF;            /* lavande douce pour sections alternées */
  --accent:#FFD6C7;          /* pêche léger, chaleureux */

  --ring:rgba(111,106,248,.28);
  --radius:18px; 
  --radius-lg:26px;
}

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  scroll-behavior:smooth;
}

.container{max-width:1080px}

/* NAV */
.nav-wrap{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #E6E4FF;
}
.nav-glass{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem 1rem; margin:0 auto; max-width:1080px;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  color:var(--brand); font-weight:800; letter-spacing:.2px; text-decoration:none;
}
.brand img.logo{height:28px; width:28px; border-radius:9999px; display:none;} /* active si logo présent */
.nav-links{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.nav-links a{padding:.4rem .6rem; border-radius:12px}
nav a.active{color:var(--brand-600); text-decoration:underline; font-weight:700}

/* HERO */
.hero{
  padding:4rem 0 2.5rem;
  border-radius:var(--radius-lg);
  border:1px solid #E6E4FF;
  background:
    radial-gradient(1200px 360px at 10% -10%, #ECE9FF 15%, transparent 60%),
    radial-gradient(1200px 360px at 90% 0%, #EDE7FF 15%, transparent 60%),
    radial-gradient(1000px 300px at 50% 100%, rgba(255,214,199,.35) 10%, transparent 60%);
}
.hero .hero-content{max-width:840px; margin:0 auto; text-align:center}
.lead{margin:.25rem 0 1rem; font-size:1.1rem}

/* ACTIONS (CTAs) */
.actions{display:flex; justify-content:center; align-items:center; gap:.6rem; flex-wrap:wrap}
.btn{
  background:var(--brand);
  border-color:var(--brand);
  border-radius:9999px;
  padding:.72rem 1.05rem;            /* plus petit */
  font-weight:700;
  box-shadow:0 6px 18px rgba(111,106,248,.18);
}
.btn:hover{background:var(--brand-600); border-color:var(--brand-600)}
.btn-outline{
  background:#fff; color:var(--ink);
  border:1px solid #E6E4FF; border-radius:9999px; padding:.72rem 1.05rem;
}
.btn-outline:hover{border-color:var(--brand-600); color:var(--brand-600)}

/* CARTES & SECTIONS */
.card{
  background:var(--surface);
  border:1px solid #E6E4FF;
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 12px 28px rgba(111,106,248,.10);
}
.section-alt{
  background:var(--tint);
  border:1px solid #E6E4FF;
  border-radius:var(--radius);
  padding:1.25rem;
}

/* GRILLE & IMAGES */
.grid{gap:1rem}
figure{margin:0}
img{max-width:100%; height:auto; border-radius:16px}

/* TEXTE */
h1,h2,h3{color:var(--ink)}
.muted{color:var(--muted)} .small{font-size:.92rem}
/* Supprimé le dot rose isolé pour cohérence globale */
/* .accent-dot{...}  -> retiré ou laisser mais ne plus l'utiliser */

/* TABLE PRICING */
.pricing{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pricing .plan{padding:1.25rem; border-radius:var(--radius); border:1px solid #E6E4FF; background:#fff}
.plan h3{margin-bottom:.25rem}
.price{font-size:1.8rem; font-weight:800; color:var(--brand)}

/* FORM */
input, textarea, select{border-radius:14px; border-color:#E6E4FF}
input:focus, textarea:focus, select:focus{outline:2px solid var(--ring); border-color:var(--brand)}

/* FOOTER */
footer{margin:3rem 0; color:var(--muted)}
footer a{color:var(--brand)}

/* RESPONSIVE */
@media (max-width:640px){
  .hero{padding:3rem 1rem}
  .hero .hero-content{text-align:center} /* on garde le centrage sur mobile */
}