/* =============================================================================
   Liseuse Sartine (liseuse.php) — ergonomie de la liseuse amUMag, charte Sartine :
   Raleway (outils, titres) + Bitter (compteur, sous-titre), fond blanc, encre #111, logo bleu #8fc5ff (bleu clair du site), accent = couleur du projet.
   --lz-fond, --lz-format posés par liseuse.php ; tout l'interface est au bleu Sartine (--lz-bleu).
   Deux modes : rouleau vertical (HTML de base, smartphone, sans JS) et livre (html.lz-mode-livre).
   ========================================================================== */

:root {
    --lz-barre-h: 64px;
    --lz-mini-h: 118px;
    --lz-encre: #111;
    --lz-bleu: #4f00f5;                      /* bleu du logo en haut de la home (--hero-color en mobile) */
    --lz-bleu-texte: #2e2c46;                /* « Studio graphique » (--hero-responsive) */
    --lz-doux: rgba(17, 17, 17, .58);
    --lz-trait: rgba(17, 17, 17, .1);
    --lz-survol: rgba(17, 17, 17, .06);
    --lz-ease: cubic-bezier(.25, 1, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--lz-fond); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100dvh;
    background: var(--lz-fond); color: var(--lz-encre);
    font-family: 'Raleway', sans-serif;
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
::selection { background: var(--lz-bleu); color: #fff; }
:focus-visible { outline: 2px solid var(--lz-bleu); outline-offset: 3px; }
#lz-miniatures button:focus { outline: none; }   /* clic sur une miniature : pas de contour en plus du cadre bleu */
#lz-miniatures button:focus-visible { outline: 2px solid var(--lz-bleu); outline-offset: 2px; }

/* ---------- barre d'outils ---------- */
#lz-barre {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: var(--lz-barre-h);
    padding: 0 24px; padding-top: env(safe-area-inset-top);
    display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 28px;
    background: color-mix(in srgb, var(--lz-fond) 82%, transparent);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--lz-trait);
}
.lz-logo { display: block; width: 96px; line-height: 0; }
.lz-logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.lz-logo #poisson path { fill: var(--lz-bleu); }
.lz-logo #texte path { fill: var(--lz-bleu-texte); }

.lz-retour {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--lz-encre); text-decoration: none;
    font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: lowercase;
}
.lz-retour img { transform: scaleX(-1); }   /* flèche du shop, tournée vers l'arrière */
.lz-retour span {
    background: linear-gradient(currentColor, currentColor) no-repeat 50% 100% / 0 1px;
    transition: background-size .3s ease-in;
}
.lz-retour:hover span, .lz-retour:focus-visible span { background-size: 100% 1px; }

.lz-titre {
    margin: 0; min-width: 0; text-align: center;
    font-size: .95rem; font-weight: 800; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-titre span { font-family: 'Bitter', serif; font-weight: 300; font-style: italic; color: var(--lz-doux); margin-left: .35em; }

.lz-outils { display: flex; align-items: center; gap: 4px; }
.lz-btn {
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s;
}
.lz-btn:hover { background: var(--lz-survol); }
.lz-btn[aria-expanded="true"] { background: rgba(17, 17, 17, .1); }
.lz-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* la flèche du site (shop/img/logo/retour.svg) : trait 32,48, deux chevrons qui clignotent en décalé */
#lz-prec svg, #lz-suiv svg { width: 20px; height: 10px; overflow: visible; }   /* même cadre que la flèche « retour » (20 × 10) */
#lz-prec polyline, #lz-suiv polyline { fill: none; stroke: currentColor; stroke-width: 32.48; stroke-linecap: round; stroke-linejoin: round; }
.lz-chevron-a { animation: lz-clignote 1s infinite; }
.lz-chevron-b { animation: lz-clignote 1s .8s infinite; }
.lz-btn:disabled .lz-chevron-a, .lz-btn:disabled .lz-chevron-b { animation: none; }
#lz-prec svg { transform: scaleX(-1); }
.lz-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.lz-compteur {
    margin: 0 6px; min-width: 64px; text-align: center;
    font-family: 'Bitter', serif; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.lz-sur { color: var(--lz-doux); }
.lz-sep { width: 1px; height: 20px; background: var(--lz-trait); margin: 0 8px; }

/* progression : le trait à la couleur du projet grandit avec la lecture */
#lz-progression { position: fixed; top: var(--lz-barre-h); left: 0; right: 0; height: 2px; z-index: 51; pointer-events: none; }
#lz-progression span { display: block; height: 100%; width: 100%; background: var(--lz-bleu); transform-origin: left; transform: scaleX(var(--lz-p, 0)); transition: transform .6s var(--lz-ease); }

/* ---------- rouleau (smartphone, sans JS, Google) ---------- */
#lz-scene { padding: calc(var(--lz-barre-h) + 28px) 16px 60px; }
.lz-resume {   /* le résumé du livre : pour Google et les lecteurs d'écran, jamais affiché (demande de Rémi) */
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#lz-rouleau { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
#lz-rouleau li { position: relative; scroll-margin-top: calc(var(--lz-barre-h) + 16px); }
#lz-rouleau img {
    display: block; width: 100%; height: auto; aspect-ratio: var(--lz-format);
    border-radius: 2px; background: #f3f3f3;
    box-shadow: 0 14px 34px rgba(17, 17, 17, .16), 0 2px 6px rgba(17, 17, 17, .08);
}
.lz-num { display: block; margin-top: 8px; text-align: right; font-family: 'Bitter', serif; font-size: .75rem; color: var(--lz-doux); }
#lz-livre { display: none; }

/* ---------- mode livre (grand écran, js/liseuse.js) ---------- */
html.lz-mode-livre, html.lz-mode-livre body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.lz-mode-livre #lz-scene { position: fixed; inset: var(--lz-barre-h) 0 0 0; padding: 0; transition: bottom .35s var(--lz-ease); }
html.lz-mode-livre.lz-mini-ouvert #lz-scene { bottom: var(--lz-mini-h); }
html.lz-mode-livre #lz-rouleau { display: none; }   /* le livre reprend les mêmes textes (alt) ; le rouleau reste dans le HTML pour Google */
html.lz-mode-livre #lz-livre {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 40px 48px 48px;
}
/* livre fermé (couverture seule à droite, 4e seule à gauche) : recentré, il glisse en s'ouvrant */
#lz-livre { transition: translate .8s var(--lz-ease); }
#lz-livre.lz-ferme-debut { translate: -25% 0; }
#lz-livre.lz-ferme-fin { translate: 25% 0; }
/* ⚠️ double classe : une page ne doit JAMAIS rester dans le flux (sinon morceau de page en double
   pendant le tournage — piège de StPageFlip relevé sur la liseuse amUMag) */
.lz-p.stf__item { position: absolute; left: 0; top: 0; }
.lz-p { overflow: hidden; background: var(--lz-fond); box-shadow: 0 22px 44px rgba(17, 17, 17, .18), 0 3px 8px rgba(17, 17, 17, .1); }   /* pas de filter sur un parent : il aplatirait la 3D du tournage */
.lz-p img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.lz-p-vide { background: transparent !important; box-shadow: none !important; }
/* pli central : un léger creux d'ombre sur chaque page, côté reliure */
.lz-p:not(.lz-p-vide)::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.lz-p.--left:not(.lz-p-vide)::after { background: linear-gradient(to left, rgba(0, 0, 0, .16), transparent 7%); }
.lz-p.--right:not(.lz-p-vide)::after { background: linear-gradient(to right, rgba(0, 0, 0, .16), transparent 7%); }

@keyframes lz-clignote { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- miniatures ---------- */
#lz-miniatures {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: var(--lz-mini-h); padding: 14px 24px; padding-bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--lz-trait) transparent;
    background: #fff;
    border-top: 1px solid var(--lz-trait);
    transform: translateY(0); transition: transform .35s var(--lz-ease);
}
#lz-miniatures[hidden] { display: flex; transform: translateY(100%); visibility: hidden; transition: transform .35s var(--lz-ease), visibility 0s .35s; }
#lz-miniatures button {
    position: relative; flex: none; height: 100%; aspect-ratio: var(--lz-format);
    padding: 0; border: 2px solid transparent; border-radius: 3px; background: none; cursor: pointer;
    transition: border-color .2s, transform .2s var(--lz-ease);
}
#lz-miniatures button:hover { transform: translateY(-3px); }
#lz-miniatures button[aria-current="true"] { border-color: var(--lz-bleu); }
#lz-miniatures img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
#lz-miniatures span { position: absolute; right: 4px; bottom: 3px; font-family: 'Bitter', serif; font-size: .65rem; padding: 0 4px; border-radius: 2px; background: rgba(255, 255, 255, .88); color: var(--lz-encre); }

/* ---------- petits écrans ---------- */
@media (max-width: 1023px) {
    #lz-barre { gap: 16px; padding: 0 16px; }
    .lz-titre span { display: none; }
}
@media (max-width: 760px) {
    :root { --lz-barre-h: 56px; }
    #lz-barre { grid-template-columns: auto 1fr auto; gap: 12px; }
    .lz-logo { width: 78px; }
    .lz-titre, .lz-sep, #lz-btn-mini, #lz-btn-plein { display: none; }
    .lz-retour { justify-self: start; }
    .lz-compteur { min-width: 52px; margin: 0; }
}
@media (max-width: 480px) {
    #lz-scene { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #lz-progression span, #lz-miniatures, html.lz-mode-livre #lz-scene { transition: none; }
    .lz-chevron-a, .lz-chevron-b { animation: none !important; }
}