:root {
  --accent:#000;
  --ink:#222;
  --muted:#666;
  --border:#e0e0e0;
  --maxw:1080px;
}

/* Base */
body {
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
}
.wrap {
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px;
}

/* Header */
header {
  border-bottom:1px solid var(--accent);
  background:#fff;
}
.head-inner {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 0;
}
.mag-title {
  margin:0;
  font-family:'Raleway', sans-serif;
  font-weight:700;
  color:var(--accent);
  font-size:clamp(22px,4vw,32px);
}
.issue {
  font-family:'Playfair Display', serif;
  font-weight:600;
  color:var(--muted);
  font-size:16px;
  margin-top:4px;
}
.issue-select {
  padding:6px 10px;
  font:inherit;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
}

/* Barre de progression */
.progress {
  position:fixed;
  top:0; left:0;
  height:4px; width:0;
  background:linear-gradient(90deg,var(--accent),#22c55e);
  z-index:45;
}

/* Contenu */
main { padding:18px 0; }
.page-figure { margin:0 0 18px; }
img.page {
  display:block;
  width:100%;
  height:auto;
  background:#f2f2f2;
}
footer {
  padding:24px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
  text-align:center;
  font-size:14px;
}

/* Bouton haut */
#toTop {
  position:fixed;
  right:14px; bottom:14px;
  display:none;
  align-items:center; justify-content:center;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  color:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  z-index:46;
}
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mobile/tablette : images bord à bord */
@media (max-width: 1024px) {
  .wrap {
    padding:0 12px;
    max-width:none;
  }
  .right{ margin-top:6px; 
  } /* évite que le select colle au trait */
  img.page {
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  body { overflow-x:hidden; }
}