:root { --primaire: #7c5cff; --fond: #0f0f17; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--fond); color: #f2f2f7; line-height: 1.6; }
a { color: var(--primaire); }
.barre { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; }
.barre nav a { margin-left: 18px; color: #f2f2f7; text-decoration: none; }
.logo { font-size: 24px; text-decoration: none; }
.hero { text-align: center; padding: 40px 16px 64px; max-width: 900px; margin: auto; }
.hero img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 16px; }
.hero h1 { font-size: clamp(32px, 6vw, 56px); margin: 24px 0 8px; }
.bouton { display: inline-block; background: var(--primaire); color: #fff; padding: 12px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.bouton.secondaire { background: transparent; border: 1px solid var(--primaire); color: var(--primaire); }
.equipe { max-width: 900px; margin: auto; padding: 0 16px 64px; text-align: center; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.membre { background: rgba(255,255,255,.05); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.membre img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.membre span { opacity: .7; font-size: 14px; }
.page { max-width: 700px; margin: auto; padding: 40px 16px 80px; }
footer { text-align: center; opacity: .6; font-size: 13px; padding: 24px; }