:root{
  --bg:#0E1116;
  --bg-alt:#151923;
  --card:#1E2430;
  --text:#E6EDF3;
  --muted:#A9B4C2;
  --brand:#6EE7B7;
  --brand-600:#34D399;
  --danger:#EF4444;
  --max:1120px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --space-1: clamp(8px, 1vw, 10px);
  --space-2: clamp(12px, 1.5vw, 14px);
  --space-3: clamp(16px, 2vw, 20px);
  --space-4: clamp(22px, 3vw, 28px);
  --space-5: clamp(30px, 4vw, 42px);
  --space-6: clamp(44px, 6vw, 64px);
  --fs-1: clamp(14px, 1.2vw, 16px);
  --fs-2: clamp(16px, 1.6vw, 18px);
  --fs-3: clamp(18px, 2vw, 22px);
  --fs-4: clamp(22px, 3vw, 30px);
  --fs-5: clamp(28px, 4vw, 40px);
  --fs-6: clamp(36px, 6vw, 56px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0C0F14 50%, var(--bg));
}

h1,h2,h3{line-height:1.2; margin:0 0 var(--space-3)}
h1{font-size:var(--fs-6); font-family:"Playfair Display",serif}
h2{font-size:var(--fs-5)}
h3{font-size:var(--fs-3)}
p,li,small{font-size:var(--fs-2); color:var(--muted)}
.lead{font-size:var(--fs-3); color:var(--text)}
.micro-copy{font-size:var(--fs-1); color:var(--muted)}

.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--space-3)}
.section{padding:var(--space-6) 0}
.section--alt{background:var(--bg-alt)}
.center{text-align:center}

.grid-2{display:grid; gap:var(--space-5); grid-template-columns:1fr; align-items:center}
.grid-3{display:grid; gap:var(--space-4); grid-template-columns:1fr}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.2fr .8fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,17,22,.6); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px}
.brand-mark{color:var(--brand)}
.nav-list{display:flex; gap:var(--space-3); list-style:none; padding:0; margin:0}
.nav-list a{color:var(--muted); text-decoration:none; padding:.5rem .75rem; border-radius:10px}
.nav-list a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav-toggle{display:none}

@media(max-width:820px){
  .nav-list{display:none}
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.1); padding:.5rem .75rem; border-radius:10px}
  .nav[aria-expanded="true"] .nav-list{display:flex; flex-direction:column; position:absolute; right:var(--space-3); top:64px; background:var(--bg-alt); padding:var(--space-3); border-radius:12px; box-shadow:var(--shadow)}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:.85rem 1.1rem; border-radius:12px; text-decoration:none;
  color:#0B0F14; background:var(--brand); font-weight:700; border:0; cursor:pointer
}
.btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-600)); color:#0B0F14}
.btn--ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.14)}
.btn--lg{padding:1.1rem 1.3rem; font-size:var(--fs-3)}
.btn--full{width:100%}

.hero{padding-top:calc(var(--space-6) + 24px)}
.hero-figure img{width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow)}

.hero-bullets{list-style:none; padding:0; margin:var(--space-3) 0; display:flex; flex-wrap:wrap; gap:10px}
.hero-bullets li{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:.5rem .75rem; border-radius:999px; color:var(--text)}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:var(--space-4);
  box-shadow:var(--shadow)
}
.cards .card h3{margin-bottom:.4rem}

.mosaic{
  display:grid; gap:12px; grid-template-columns:1fr 1fr 1fr
}
.mosaic img{
  width:100%; height:220px; object-fit:cover; border-radius:12px
}

.inspo-grid{
  display:grid; gap:var(--space-4); grid-template-columns:1fr; margin-top:var(--space-3)
}
@media(min-width:900px){
  .inspo-grid{grid-template-columns:repeat(3,1fr)}
}
.inspo img{width:100%; height:240px; object-fit:cover; border-radius:14px}
.inspo figcaption{margin-top:.5rem; color:var(--muted); font-size:var(--fs-1)}

.checklist{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.checklist li{position:relative; padding-left:30px}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--brand)
}

.timeline{display:grid; gap:var(--space-4)}
.step{border-left:3px solid var(--brand); padding-left:var(--space-3)}
.step h3{margin-bottom:.25rem}

.form{display:grid; gap:var(--space-4)}
.field{display:grid; gap:.4rem}
.field input,.field select,.field textarea{
  background:#0F141C; border:1px solid rgba(255,255,255,.12);
  color:var(--text); padding:.9rem 1rem; border-radius:12px; outline:none
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand)
}
.hint{color:var(--muted)}
.checkbox{display:flex; align-items:center; gap:.6rem}

.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:var(--space-6); padding:var(--space-5) 0}
.footer-grid{display:grid; gap:var(--space-4); grid-template-columns:1fr}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.legal{border-top:1px solid rgba(255,255,255,.08); margin-top:var(--space-4); padding-top:var(--space-3); color:var(--muted)}
@media(min-width:900px){
  .footer-grid{grid-template-columns:1.2fr .6fr .6fr}
}

/* Accessibilité et préférences mouvement */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .15s ease, box-shadow .2s ease}
  .btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25)}
  .card{transition:transform .2s ease}
  .card:hover{transform:translateY(-2px)}
}