:root{--blue:#153f63;--blue2:#1f4e79;--mcp:#5b2333;--mcp2:#9b2f45;--bg:#f3f6fa;--card:#fff;--muted:#6b7280}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:#172033}
.home{max-width:1100px;margin:auto;padding:40px 22px}
.hero{background:linear-gradient(135deg,var(--blue),var(--mcp2));color:white;border-radius:24px;padding:38px;box-shadow:0 12px 32px rgba(20,30,50,.15);margin-bottom:22px}
.hero h1{margin:0 0 10px;font-size:2.4rem}
.hero p{margin:0;opacity:.9}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:var(--card);border-radius:22px;padding:24px;box-shadow:0 8px 24px rgba(20,30,50,.08)}
.card h2{margin:0 0 10px}
.card p{color:var(--muted);margin:0 0 18px}
a{display:inline-block;text-decoration:none;background:var(--blue2);color:white;padding:11px 15px;border-radius:12px;margin:4px 4px 4px 0}
.public a{background:var(--blue2)}
.admin a{background:var(--mcp2)}
.links{display:flex;flex-wrap:wrap;gap:4px}
@media(max-width:800px){.cards{grid-template-columns:1fr}.hero{padding:26px}.hero h1{font-size:2rem}}

/* V20 - avancement peinture accueil */
.progress-card{
  background:var(--card);
  border-radius:22px;
  padding:24px;
  box-shadow:0 8px 24px rgba(20,30,50,.08);
  margin-bottom:22px;
}

.progress-title{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}

.progress-title h2{
  margin:0 0 6px;
}

.progress-title p,
.muted{
  color:var(--muted);
  margin:0;
}

.home-progress{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.progress-game{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
  background:#fbfdff;
}

.progress-game.total{
  grid-column:1 / -1;
  background:linear-gradient(135deg,#f8fbff,#fff7fb);
}

.progress-game-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
}

.progress-game h3{
  margin:0;
  font-size:1rem;
}

.progress-game small{
  color:var(--muted);
}

.progress-percent{
  font-weight:700;
  color:var(--blue2);
}

.progress-bar{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin:8px 0;
}

.progress-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--blue2),var(--mcp2));
}

.progress-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:.9rem;
}

.progress-share{
  margin-top:10px;
}

.progress-share a{
  padding:7px 10px;
  font-size:.88rem;
  background:#edf3f8;
  color:var(--blue2);
}

@media(max-width:800px){
  .home-progress{
    grid-template-columns:1fr;
  }
}
