/* =====================================================================
   WINAIR MAGAZINE — Liseuse PDF
   ===================================================================== */

@font-face{font-family:'Anton';src:url('../fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Light.ttf') format('truetype');font-weight:300;font-display:swap}

:root{
  --red:#E2001A;--red-dark:#B00014;
  --shell:#0E1114;--bar:#171B20;--line:#262C33;
  --txt:#E8EAED;--dim:#8B939C;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Roboto',-apple-system,Segoe UI,Arial,sans-serif;font-weight:300;
  background:var(--shell);color:var(--txt);-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.reader{display:flex;flex-direction:column;height:100dvh;background:var(--shell)}

/* ---------------- BARRE D'OUTILS ---------------- */
.rbar{
  flex:none;display:flex;align-items:center;gap:18px;height:62px;padding:0 18px;
  background:var(--bar);border-bottom:1px solid var(--line);position:relative;z-index:10;
}
.rbar .brand{display:flex;align-items:center;gap:14px;flex:none;min-width:0}
.rbar .brand img{height:26px;width:auto}
.rbar .brand .t{font-family:'Anton';font-size:14px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.rbar .brand .s{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.rbar .sp{flex:1}
.rgroup{display:flex;align-items:center;gap:2px;background:#0E1114;border:1px solid var(--line);flex:none}

.rbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;min-width:38px;padding:0 12px;color:var(--txt);transition:.15s;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.rbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square}
.rbtn:hover{background:var(--line)}
.rbtn.on{background:var(--red);color:#fff}
.rbtn:disabled{opacity:.28;cursor:default}
.rbtn:disabled:hover{background:none}
.rbtn.red{background:var(--red);color:#fff}
.rbtn.red:hover{background:var(--red-dark)}

.rpage{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:13px;color:var(--dim);white-space:nowrap}
.rpage input{
  width:52px;height:30px;text-align:center;background:#0E1114;border:1px solid var(--line);
  color:var(--txt);font-family:'Anton';font-size:15px;outline:none;
}
.rpage input:focus{border-color:var(--red)}
.rpage b{color:var(--txt);font-family:'Anton';font-weight:400;font-size:15px}

/* ---------------- SCÈNE ---------------- */
.rstage{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:auto;min-height:0;
}
.rspread{display:flex;gap:2px;align-items:flex-start;justify-content:center;transition:opacity .18s}
.rspread.busy{opacity:.45}
.rspread canvas{display:block;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.55);max-width:100%}

/* flèches latérales */
.rnav{
  position:absolute;top:0;bottom:0;width:92px;display:flex;align-items:center;justify-content:center;
  background:none;transition:.2s;opacity:0;z-index:5;
}
.rnav:hover{opacity:1;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent)}
.rnav.next:hover{background:linear-gradient(270deg,rgba(0,0,0,.45),transparent)}
.rnav.prev{left:0}
.rnav.next{right:0}
.rnav i{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  background:var(--red);color:#fff;
}
.rnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.rnav:disabled{display:none}
.rstage:hover .rnav{opacity:.55}
.rstage:hover .rnav:hover{opacity:1}

/* ---------------- CHARGEMENT ---------------- */
.rload{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:var(--shell);z-index:20;transition:opacity .3s;
}
.rload.done{opacity:0;pointer-events:none}
.rload .t{font-family:'Anton';font-size:20px;letter-spacing:.14em;text-transform:uppercase}
.rload .track{width:220px;height:3px;background:var(--line);overflow:hidden}
.rload .track i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
.rload .p{font-size:12px;letter-spacing:.16em;color:var(--dim)}
.rerror{max-width:460px;text-align:center;padding:0 24px}
.rerror h2{font-family:'Anton';font-size:22px;text-transform:uppercase;margin-bottom:12px}
.rerror p{color:var(--dim);font-size:14px;line-height:1.6;margin-bottom:20px}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:900px){
  .rbar{height:56px;padding:0 12px;gap:10px}
  .rbar .brand .s,.rbtn .lbl{display:none}
  .rstage{padding:12px}
  .rnav{width:56px;opacity:.5}
  .rnav i{width:42px;height:42px}
  .hide-sm{display:none}
}
@media(max-width:560px){
  .rbar .brand .t{display:none}
  .rpage{padding:0 6px;font-size:12px}
}

/* plein écran */
.reader:fullscreen{background:var(--shell)}
.reader:-webkit-full-screen{background:var(--shell)}