/* La Festibox — le catalogue numérique (1.72), d'après le premier jet. */
:root{color-scheme:dark;--bg:#18211f;--ink:#f8f4ec;--accent:#d8a66d;--muted:#aaa9a0;--line:#ffffff1f;--btn:#ffffff0d;--btn-h:#ffffff22;--tiroir:#1e2826}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;height:100%;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 50% 38%,#35413d,#18211f 68%) fixed;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
button,input,a{-webkit-tap-highlight-color:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Entête */
.top{flex:none;height:58px;padding:0 clamp(12px,3vw,40px);display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}
.retour{color:var(--ink);text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;margin-left:-10px;border-radius:8px;opacity:.85}
.retour:hover,.retour:focus-visible{background:var(--btn);opacity:1}
.retour svg{width:16px;height:16px}
.brand{font-size:13px;letter-spacing:.19em;font-weight:700;white-space:nowrap}
.brand i{font-style:normal;color:var(--accent)}
.edition{margin-left:auto;font-size:12px;color:var(--muted);letter-spacing:.08em;white-space:nowrap}

/* Le livre */
main{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px clamp(8px,2vw,28px) 0}
.book-wrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.book-wrap:after{content:"";position:absolute;z-index:-1;bottom:-10px;left:12%;right:12%;height:24px;border-radius:50%;background:#050908;filter:blur(17px);opacity:.75;pointer-events:none}
#book{width:100%;height:100%;min-width:0!important;min-height:0!important}
#book .stf__wrapper{position:relative;width:100%;height:100%;padding:0!important}
.page{background:#f4f1ec center/cover no-repeat;overflow:hidden}
.page img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.page img.est-chargee{opacity:1}
.page .lien-sommaire{position:absolute;display:block;border-radius:3px;z-index:2}
.page .lien-sommaire:hover,.page .lien-sommaire:focus-visible{background:rgba(216,166,109,.22);outline:1px solid rgba(216,166,109,.7)}
.chargement{color:var(--muted);font-size:14px;text-align:center;padding:40px 16px}
.chargement a{color:var(--accent)}

/* Les commandes */
.controls{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 4px 8px;flex-wrap:wrap}
.btn{height:42px;min-width:44px;padding:0 12px;border:1px solid #ffffff30;background:var(--btn);color:var(--ink);border-radius:9px;cursor:pointer;font:inherit;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.btn:hover:not(:disabled),.btn:focus-visible{background:var(--btn-h);border-color:#ffffff70;outline:none}
.btn:disabled{opacity:.35;cursor:default}
.btn[hidden]{display:none}
.btn svg{width:18px;height:18px;flex:none}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#1d1a14;font-weight:600}
.btn--accent:hover:not(:disabled),.btn--accent:focus-visible{background:#e4b882;border-color:#e4b882}
.btn small{font-size:11.5px;opacity:.75;font-weight:400}
.counter{min-width:132px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.hint{flex:none;text-align:center;font-size:11.5px;color:#9da39d;margin:0 0 10px;letter-spacing:.03em;padding:0 12px}
.hint-doigt{display:none}
@media (hover:none) and (pointer:coarse){.hint-souris{display:none}.hint-doigt{display:inline}}
.pied{flex:none;font-size:11px;color:#8e9790;text-align:center;padding:0 12px 12px}
.pied a{color:var(--accent);text-decoration:none}

/* Le sommaire (tiroir) */
.tiroir{position:fixed;inset:0;z-index:20;display:flex}
.tiroir[hidden]{display:none}
.tiroir-fond{position:absolute;inset:0;background:#000a}
.tiroir-boite{position:relative;width:min(430px,100%);height:100%;background:var(--tiroir);border-right:1px solid var(--line);display:flex;flex-direction:column;box-shadow:8px 0 30px #0007}
.tiroir-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.tiroir-tete h2{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.cherche{margin:12px 14px 6px;position:relative}
.cherche input{width:100%;height:44px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff0d;color:var(--ink);padding:0 12px 0 40px;font:inherit;font-size:16px}
.cherche input:focus{outline:none;border-color:var(--accent)}
.cherche svg{position:absolute;left:13px;top:13px;width:18px;height:18px;opacity:.6;pointer-events:none}
.tiroir-info{margin:0 18px 4px;font-size:12px;color:var(--muted)}
.tiroir-corps{flex:1;overflow:auto;padding:0 8px 18px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.section h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:16px 10px 6px;font-weight:600}
.section h3 b{color:var(--muted);font-weight:500;margin-right:8px}
.entree{display:flex;align-items:center;gap:12px;width:100%;padding:6px 10px;border:0;background:none;color:var(--ink);text-align:left;font:inherit;font-size:14px;line-height:1.3;border-radius:8px;cursor:pointer}
.entree:hover,.entree:focus-visible{background:#ffffff12;outline:none}
.entree.est-ici{background:#d8a66d26}
.entree img{width:36px;height:51px;object-fit:cover;border-radius:3px;background:#2c3634;flex:none}
.entree span{flex:1;min-width:0}
.entree small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entree em{font-style:normal;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.entree mark{background:#d8a66d59;color:inherit;border-radius:2px;padding:0 1px}
.vide{color:var(--muted);font-size:13.5px;padding:14px 10px;line-height:1.5}

/* La loupe */
.loupe{position:fixed;inset:0;z-index:30;background:#0c1110f5;display:flex;flex-direction:column}
.loupe[hidden]{display:none}
.loupe-scene{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.loupe-scene.est-tiree{cursor:grabbing}
.loupe-scene img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;-webkit-user-drag:none;user-select:none;box-shadow:0 10px 40px #000b;background:#fff}
.loupe-barre{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-wrap:wrap}
.loupe-titre{flex:1 1 100%;text-align:center;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.loupe-pct{min-width:58px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.loupe-aide{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#000c;color:#fff;font-size:12.5px;padding:7px 14px;border-radius:999px;pointer-events:none;transition:opacity .5s;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.loupe-aide.est-cachee{opacity:0}

/* Dans le site (cadre de la page « Le catalogue ») */
body.integre{background:#1b2422}
body.integre .top,body.integre .pied{display:none}
body.integre main{padding-top:12px}

/* Tablettes tenues droites, petits écrans : une seule ligne de boutons. */
@media (max-width:900px){
  #premiere,#derniere,.sep,.btn small{display:none}
}
/* Téléphones */
@media (max-width:640px){
  .top{height:50px;gap:10px}
  .edition{display:none}
  .brand{margin-left:auto}
  main{padding:10px 6px 0}
  .btn .txt,.btn small{display:none}
  .btn{padding:0 10px}
  #premiere,#derniere,.sep{display:none}
  .counter{min-width:92px;font-size:12px}
  .controls{gap:6px;padding:10px 2px 6px}
  .hint{font-size:11px;margin-bottom:8px}
  .pied{display:none}
}
@media (max-width:480px){
  #plein{display:none}
}
@media (max-width:360px){
  .controls{gap:4px}
  .btn{min-width:40px;padding:0 8px}
  .counter{min-width:76px}
}
/* Téléphones à l'horizontale : le livre d'abord. */
@media (orientation:landscape) and (max-height:520px){
  .top{height:40px}
  main{padding-top:6px}
  .controls{padding:6px 2px 4px}
  .btn{height:36px}
  .hint,.pied{display:none}
}
@media (prefers-reduced-motion:reduce){
  .page img,.loupe-aide{transition:none}
}