/* Liseuse des documents du site (voir liseuse.js) */
:root{--rouge:#E1040B;--jaune:#FCC903;--noir:#141414;--fond:#2a2626}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--fond);color:#fff;font-family:'Barlow',Arial,sans-serif;overflow:hidden;color-scheme:only light}
body{display:flex;flex-direction:column;height:100dvh}
.barre{flex:none;display:flex;align-items:center;gap:10px;background:var(--rouge);padding:8px 12px;min-height:52px}
.barre a,.barre button{color:#fff}
.retour{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.2);text-decoration:none;font-size:1.2rem}
.titre{flex:1;min-width:0}
.titre b{display:block;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titre small{font-size:.78rem;opacity:.85}
.outils{display:flex;gap:6px;flex:none;align-items:center}
.outil{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.2);cursor:pointer;text-decoration:none}
.outil:hover,.outil:focus-visible{background:rgba(0,0,0,.4)}
.outil svg{width:19px;height:19px}
.barre .partager{background:#fff;border-color:#fff}
#scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
#planche{position:relative;width:calc(var(--w) * 2 + 4px);height:var(--h)}
.feuilles{position:absolute;inset:0;display:flex;justify-content:center;transition:transform .3s ease,opacity .3s ease}
.feuille{width:var(--w);height:var(--h);background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.45);-webkit-user-drag:none;cursor:zoom-in}
.feuille.gauche{box-shadow:-6px 8px 30px rgba(0,0,0,.45);border-right:1px solid rgba(0,0,0,.12)}
.feuille.droite{box-shadow:6px 8px 30px rgba(0,0,0,.45)}
.entre-droite{transform:translateX(40%);opacity:0}.entre-gauche{transform:translateX(-40%);opacity:0}
.sort-gauche{transform:translateX(-40%);opacity:0}.sort-droite{transform:translateX(40%);opacity:0}
.fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:rgba(20,20,20,.65);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fleche:hover{background:var(--rouge)}
.fleche:disabled{opacity:0;pointer-events:none}
#prec{left:10px}#suiv{right:10px}
.pied{flex:none;background:#1d1a1a;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
#compteur{display:block;text-align:center;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:700;font-size:.95rem;color:var(--jaune);letter-spacing:.04em}
#vignettes{display:flex;gap:8px;overflow-x:auto;padding:6px 12px 4px;scrollbar-width:thin}
#vignettes button{flex:none;border:2px solid transparent;background:none;cursor:pointer;position:relative;border-radius:2px;opacity:.7}
#vignettes button.actif{border-color:var(--jaune);opacity:1}
#vignettes img{display:block;height:64px;width:auto;aspect-ratio:1/1.414;background:#fff}
#vignettes span{position:absolute;right:2px;bottom:2px;background:rgba(0,0,0,.7);font-size:.65rem;padding:0 4px;border-radius:2px;color:#fff}
#zoom{position:fixed;inset:0;z-index:50;background:#111;overflow:auto;display:none;-webkit-overflow-scrolling:touch}
#zoom.ouvert{display:block}
#zoom img{display:block;width:max(200vw,1100px);max-width:none;height:auto;margin:0 auto;cursor:zoom-out}
@media(min-width:800px){#zoom img{width:max(110vw,1500px)}}
#zoom-fermer{position:fixed;top:12px;right:12px;z-index:51;width:44px;height:44px;border-radius:50%;border:0;background:var(--rouge);color:#fff;font-size:1.4rem;cursor:pointer;display:none}
body.zoome #zoom-fermer{display:block}
.aide{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);font-size:.8rem;padding:5px 12px;border-radius:14px;pointer-events:none;animation:aide 5s forwards;white-space:nowrap}
@keyframes aide{0%,70%{opacity:1}100%{opacity:0}}
@media(max-width:799px){.fleche{width:38px;height:38px;font-size:1.3rem;background:rgba(20,20,20,.45)}#prec{left:4px}#suiv{right:4px}.barre .partager span.txt{display:none}#vignettes img{height:52px}}
@media(max-width:420px){.titre small{display:none}.outils{gap:4px}.outil{width:34px;height:34px}}
.barre .partager{color:#141414;background:#fff;border-color:#fff}
.barre .partager:hover{background:#141414;color:#FCC903;border-color:#141414}
@media(max-width:799px){.barre .partager{font-size:0;gap:0;width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}.barre .partager svg{width:18px;height:18px}}