:root{--gold:#d89b16;--gold2:#ffcc38;--ink:#21180f;--paper:#f7f0df;--card:#fffaf0;--red:#c63b2f;--muted:#766b5d}*{box-sizing:border-box}html,body{width:100%;max-width:100%;overflow-x:hidden}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#4b3723,#17120d 65%);color:var(--ink);min-height:100vh}.shell{width:100%;max-width:860px;margin:auto;min-height:100vh;background:var(--paper);box-shadow:0 0 40px #0008;overflow-x:hidden}.hero{padding:18px 18px 24px;background:linear-gradient(145deg,#f4b51d,#c77c0c);border-bottom:4px solid #3c2816}.logo{display:block;width:min(390px,90%);margin:auto;filter:drop-shadow(0 5px 5px #0007)}.intro{text-align:center;margin:8px 0 0;font-weight:800}.content{padding:18px}.search{display:flex;width:100%;max-width:100%;gap:10px;position:sticky;top:0;background:var(--paper);padding:8px 0 12px;z-index:3}.search input{flex:1;min-width:0;width:100%;border:2px solid #bca783;border-radius:16px;padding:13px 16px;font-size:16px;background:#fff}.filters{display:flex;flex:0 0 auto;gap:8px}.chip{border:0;border-radius:99px;padding:10px 14px;font-weight:800;background:#dfd2bb;color:#49351e}.chip.active{background:var(--ink);color:#fff}.resume{display:none;align-items:center;gap:14px;background:linear-gradient(135deg,#55895e,#3e6e4d);color:white;border-radius:20px;padding:14px;margin:4px 0 22px;cursor:pointer;box-shadow:0 5px 0 #294d35}.resume.show{display:flex}.round{width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:3px solid #281d13;background:#fff;color:#222;font-size:22px}.resume-info{min-width:0;flex:1}.eyebrow{font-size:11px;font-weight:900;text-transform:uppercase;opacity:.8}.resume-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-bar{height:6px;background:#ffffff55;border-radius:9px;margin-top:8px}.mini-bar span{display:block;height:100%;background:#fff;border-radius:9px}.section-title{margin:8px 0 14px;font-family:Georgia,serif}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{position:relative;border:2px solid #dbcdb5;background:var(--card);border-radius:20px;padding:0;overflow:hidden;cursor:pointer;box-shadow:0 4px 0 #c7b99f;transition:.15s}.card:active{transform:translateY(3px);box-shadow:0 1px 0 #c7b99f}.thumb{display:block;aspect-ratio:1/1;width:100%;border-radius:17px 17px 0 0;object-fit:cover;background:#2b2117}.card-body{padding:10px 11px 9px}.card h3{font-size:15px;margin:0 0 3px;line-height:1.2}.meta{font-size:12px;color:var(--muted);font-weight:700;margin:0}.empty{text-align:center;padding:50px;color:var(--muted)}.player{min-height:100vh;background:linear-gradient(#edf7fb,#f7f0df);padding:16px 18px 34px}.player-top{display:flex;align-items:center;justify-content:space-between}.back{border:3px solid #2a241e;background:white;border-radius:16px;width:54px;height:54px;font-size:30px}.badge{background:var(--gold2);border:3px solid #2a241e;border-radius:17px;padding:10px 14px;font-weight:900}.cover{display:block;width:min(520px,100%);aspect-ratio:1/1;object-fit:cover;margin:18px auto;border:4px solid #2a241e;border-radius:28px;background:#2a2118}.player h1{text-align:center;font-family:Georgia,serif;font-size:clamp(28px,7vw,42px);margin:12px auto 4px;max-width:650px}.subtitle{text-align:center;color:var(--muted);font-weight:700}.progress-wrap{max-width:650px;margin:28px auto}.progress{width:100%;accent-color:var(--gold)}.times{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:#51483f}.controls{display:flex;justify-content:center;align-items:center;gap:24px;margin:18px 0}.ctrl{border:3px solid #2a241e;background:#43c4e8;border-radius:50%;width:58px;height:58px;font-size:18px;font-weight:900}.play{width:88px;height:88px;background:var(--red);color:#fff;font-size:34px;box-shadow:0 7px 0 #2a241e}.navrow{display:flex;justify-content:space-between;max-width:650px;margin:25px auto 0;gap:12px}.navbtn{flex:1;border:2px solid #9c896c;border-radius:14px;background:#fffaf0;padding:12px;font-weight:800}.navbtn:disabled{opacity:.35}.install-note{text-align:center;font-size:12px;color:#756b60;margin:22px 0 0}@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}.content{padding:24px 36px}}@media(max-width:520px){.search{flex-wrap:wrap}.search input{flex-basis:100%}.filters{width:100%}.chip{flex:1}.content{padding:14px}.filters{gap:5px}.chip{padding:10px}.player{padding-inline:14px}.controls{gap:17px}}
/* Lecteur : illustration plus compacte sur téléphone */
@media (max-width: 520px) {
  .cover {
    width: min(280px, 72vw);
    max-height: 38vh;
    margin: 12px auto 8px;
    border-radius: 22px;
  }

  .player h1 {
    font-size: 30px;
    margin: 8px auto 2px;
  }

  .subtitle {
    margin: 4px 0;
  }

  .progress-wrap {
    margin: 16px auto;
  }

  .controls {
    margin: 12px 0;
  }

  .navrow {
    margin-top: 16px;
  }
}