:root{
  --bg:#ffffff; --text:#1A1A1A; --muted:#6b7280; --primary:#111827; --accent:#f4ede4;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);line-height:1.7}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(255,255,255,.85);border-bottom:1px solid #eee;z-index:50}
.brand{display:flex;gap:12px;align-items:center;font-weight:700}
nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.hero{padding:56px 0;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero .card{background:var(--accent);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
img.heroimg{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
h1{font-size:clamp(28px,4vw,42px);line-height:1.2;margin:8px 0 16px}
h2{font-size:clamp(22px,3vw,30px);margin:28px 0 12px}
section.block{margin:24px 0;padding:20px;border:1px solid #eee;border-radius:var(--radius)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{border:1px solid #eee;border-radius:var(--radius);padding:16px;background:#fff}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none;box-shadow:var(--shadow)}
.btn.outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.list-inline{list-style:none;padding-left:0;margin:0}
.list-inline li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #eee}
footer{border-top:1px solid #eee;margin-top:32px;background:#fff}
.badge{display:inline-block;padding:3px 8px;border:1px solid #ddd;border-radius:999px;font-size:12px;color:var(--muted);background:#fff}
@media (max-width:820px){.hero{grid-template-columns:1fr}}
body{background:#eae4dc}

/* Alternance de sections pour rythmer le scroll */
main > .container.block:nth-of-type(even){background:#eae4dc}
main > .container.block:nth-of-type(odd){background:#ffffff}
/* Adoucir le header sur fond pastel */
.header{background:rgba(255,255,255,.9)}