/* === Variables & reset léger === */
:root{
  --bg:#f7f8fc; --card:#fff; --text:#0b1220; --muted:#5f6b84;
  --brand:#2563eb; --accent:#22d3ee; --ring:rgba(37,99,235,.35);
  --radius:16px; --shadow:0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* === Header === */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e8edf6;
  padding:14px 4vw;
}
.site-header .wrap{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo{
  width:40px; height:40px; border-radius:10px; background:#fff; object-fit:contain;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
h1{ font-size:clamp(1.2rem,2.6vw,1.6rem); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tagline{ margin:0; color:var(--muted); font-size:.95rem }

/* === Barre de recherche === */
.search-bar{ padding:14px 4vw; }
.search-bar .search{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid #e6eaf3; border-radius:999px; padding:10px 14px;
  box-shadow: var(--shadow);
}
#search{
  flex:1; border:0; outline:0; font-size:1rem; background:transparent;
}

/* === Liste des comptines (grille responsive) === */
.list{
  padding:8px 4vw 24px; max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
}
.card{
  background:var(--card); border:1px solid #e8edf6; border-radius:var(--radius); padding:14px;
  box-shadow:var(--shadow);
}
.card h3{ margin:.2rem 0 .3rem; font-size:1rem }
.card p{ margin:0; color:var(--muted); font-size:.9rem }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.btn{
  display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid #cdd9f0;
  background:#fff; text-decoration:none; color:var(--text); font-weight:600;
}
.btn.primary{ background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; border:none }

/* === Lecteur === */
.player{
  position:sticky; bottom:0; z-index:30;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-top:1px solid #e8edf6;
  padding:10px 4vw;
}
.player .inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.now-playing{
  flex:1; min-width:240px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--text);
}
audio{ width:380px; max-width:100% }

/* === Footer === */
.site-footer{
  padding:20px 4vw 28px; color:var(--muted); text-align:center;
  border-top:1px solid #e8edf6; margin-top:24px;
}

/* === Focus & accessibilité === */
:where(a,button,input){ transition:box-shadow .15s,border-color .15s,background .15s }
:where(a,button,input):focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring) }

/* === Mode sombre (auto) === */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --card:#0f172a; --text:#e6e8ef; --muted:#9aa3b2; --ring:rgba(34,211,238,.35); }
  .site-header, .player{ background:rgba(15,23,42,.85); border-color:#1f2937; }
  .card, .search-bar .search{ border-color:#1f2937; }
}