/* ===== Jetons de design (palette de la charte) ===== */
:root{
  --brand:#EA580C;--brand-2:#F97316;--cocoa:#78350F;--espresso:#451A03;
  --mist:#F8FAFC;--line:#E2E8F0;--ink:#334155;--white:#fff;--ok:#166534;--danger:#B91C1C;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:40px;
  --shadow:0 1px 2px rgba(69,26,3,.06),0 8px 24px -12px rgba(69,26,3,.18);
  --serif:'Fraunces',Georgia,serif;--sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
body{font:400 15px/1.5 var(--sans);background:var(--mist);color:var(--ink);overscroll-behavior-y:none}
h1,h2,h3{font-family:var(--serif);color:var(--espresso);font-weight:600;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ic{width:20px;height:20px;flex:none}
#app{max-width:640px;margin:0 auto;min-height:100dvh;padding-bottom:calc(104px + var(--safe-b))}
#app.bare{padding-bottom:0}
.hide{display:none!important}
@media (prefers-reduced-motion:no-preference){.view{animation:in .25s ease-out}@keyframes in{from{opacity:0;transform:translateY(6px)}}}

/* ===== Composants ===== */
.pad{padding:0 var(--s4)}.stack{display:grid;gap:var(--s3)}.stack-lg{display:grid;gap:var(--s5)}
.row{display:flex;align-items:center;gap:var(--s3)}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}
.muted{color:rgba(51,65,85,.7);font-size:13px}.small{font-size:12px}.center{text-align:center}.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card{background:var(--white);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--shadow);border:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r-sm);font-weight:600;transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.55}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 10px 20px -10px var(--brand)}
.btn.ghost{background:var(--white);border:1px solid var(--line);color:var(--espresso)}
.btn.danger{color:var(--danger)}.btn.block{width:100%}.btn.sm{min-height:40px;padding:0 var(--s3);font-size:14px}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);border:1px solid var(--line);color:var(--espresso)}
.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding:2px var(--s4)}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 var(--s4);border-radius:99px;background:var(--white);border:1px solid var(--line);font-weight:600;font-size:14px;display:inline-flex;align-items:center}
.chip.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.badge{display:inline-block;padding:2px var(--s3);border-radius:99px;font-size:12px;font-weight:700;background:rgba(234,88,12,.12);color:var(--brand)}
.badge.ok{background:#DCFCE7;color:var(--ok)}.badge.off{background:rgba(120,53,15,.12);color:var(--cocoa)}
label{display:block;font-weight:600;font-size:14px;color:var(--espresso);margin-bottom:var(--s1)}
.input{width:100%;min-height:48px;padding:var(--s3) var(--s4);border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;outline:0}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(234,88,12,.12)}
.code-input{text-align:center;font:700 26px/1 ui-monospace,monospace;letter-spacing:.25em;text-transform:uppercase}
.alert{padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:rgba(234,88,12,.1);color:var(--cocoa);font-size:14px}
.section-title{display:flex;align-items:end;justify-content:space-between;padding:0 var(--s4);margin-bottom:var(--s3)}
.section-title h2{font-size:20px}.section-title a{color:var(--brand);font-weight:600;font-size:14px}
.empty{text-align:center;padding:var(--s6) var(--s4);color:rgba(51,65,85,.7)}.empty h3{font-size:18px;margin-bottom:var(--s1)}

/* ===== Couvertures / dégradés par matière ===== */
.g0{background:linear-gradient(135deg,var(--brand),var(--brand-2))}.g1{background:linear-gradient(135deg,var(--cocoa),var(--espresso))}
.g2{background:linear-gradient(135deg,var(--brand-2),var(--cocoa))}.g3{background:linear-gradient(135deg,var(--espresso),var(--brand))}
.g4{background:linear-gradient(135deg,var(--ink),var(--cocoa))}.g5{background:linear-gradient(135deg,var(--brand),var(--cocoa))}
.rail{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s1) var(--s4) var(--s3);scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.cover{flex:none;width:144px;aspect-ratio:3/4;border-radius:var(--r-md);padding:var(--s3);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;scroll-snap-align:start;box-shadow:var(--shadow)}
.cover .ic.bg{position:absolute;right:-18px;bottom:-18px;width:110px;height:110px;opacity:.15;stroke-width:1}
.cover b{font:600 15px/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cover .badge{background:rgba(255,255,255,.25);color:#fff;width:fit-content}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding:0 var(--s4)}
.tile{position:relative;overflow:hidden;min-height:92px;border-radius:var(--r-md);padding:var(--s4);color:#fff;font-weight:700;display:flex;flex-direction:column;justify-content:space-between}
.tile .ic.bg{position:absolute;right:-12px;bottom:-12px;width:80px;height:80px;opacity:.15;stroke-width:1}
.doc{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.doc .thumb{width:60px;height:60px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;flex:none}
.doc h3{font:600 15px/1.3 var(--sans);color:var(--espresso);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== En-têtes ===== */
.hero{position:relative;overflow:hidden;border-radius:0 0 var(--r-xl) var(--r-xl);padding:calc(var(--s5) + var(--safe-t)) var(--s4) var(--s5);background:linear-gradient(135deg,var(--espresso),var(--cocoa) 60%,var(--espresso));color:#fff}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(var(--brand),transparent 70%);opacity:.55}
.hero>*{position:relative;z-index:1}.hero h1{color:#fff;font-size:30px}
.logo{border-radius:50%;object-fit:cover;background:#fff;border:2px solid rgba(255,255,255,.7)}
.search{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:0 var(--s4);border-radius:99px;background:rgba(255,255,255,.96);color:rgba(51,65,85,.7);box-shadow:0 12px 24px -12px #000}
.search .ic{color:var(--brand)}
.devise{font:italic 500 13px/1.4 var(--serif);color:rgba(255,255,255,.65);text-align:center}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s3);padding:calc(var(--s3) + var(--safe-t)) var(--s4) var(--s3);background:rgba(248,250,252,.88);backdrop-filter:blur(16px)}
.topbar h1{font-size:26px;flex:1;min-width:0}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 var(--s4) calc(var(--s3) + var(--safe-b))}
.tabbar ul{list-style:none;padding:6px;margin:0 auto;max-width:420px;display:flex;border-radius:var(--r-lg);background:rgba(69,26,3,.96);box-shadow:0 20px 40px -12px rgba(69,26,3,.6)}
.tabbar li{flex:1}.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s2) 0;border-radius:22px;color:rgba(255,255,255,.6);font-size:11px;font-weight:600}
.tabbar a.on{background:var(--brand);color:#fff}

/* ===== Écrans d'accès ===== */
.gate{min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--espresso),var(--cocoa) 55%,var(--espresso));position:relative;overflow:hidden}
.gate .top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:calc(var(--s6) + var(--safe-t)) var(--s5) var(--s5);gap:var(--s3)}
.gate h1{color:#fff;font-size:36px}
.sheet{background:var(--mist);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s5) var(--s5) calc(var(--s5) + var(--safe-b));display:grid;gap:var(--s4);max-width:640px;width:100%;margin:0 auto}
.gbtn{background:#fff;border:1px solid var(--line);color:var(--espresso);box-shadow:var(--shadow)}
.credit{display:flex;align-items:center;justify-content:center;gap:var(--s2);font-size:12px;color:rgba(51,65,85,.55)}.credit img{height:34px}
#toast{position:fixed;left:50%;bottom:calc(112px + var(--safe-b));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--espresso);color:#fff;padding:var(--s3) var(--s5);border-radius:99px;font-weight:600;font-size:14px;transition:.25s;z-index:60;max-width:90%}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== Lecteur plein écran ===== */
.reader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--espresso);color:#fff}
.reader header{display:flex;align-items:center;gap:var(--s3);padding:calc(var(--s2) + var(--safe-t)) var(--s3) var(--s2)}
.reader h1{color:#fff;font:600 16px var(--serif);flex:1;min-width:0}
.reader .icon-btn{background:rgba(255,255,255,.12);border:0;color:#fff}
.stage{flex:1;min-height:0;overflow:auto;padding:0 var(--s2) 110px;text-align:center}
.stage canvas{max-width:none;border-radius:var(--r-sm);box-shadow:0 20px 40px -10px #000;background:#fff}
.stage.epub{background:#fff;color:var(--ink);padding:0;margin:0 var(--s2);border-radius:var(--r-md) var(--r-md) 0 0}
.ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:var(--s3) var(--s4) calc(var(--s3) + var(--safe-b));pointer-events:none}
.ctrl>div{pointer-events:auto;display:flex;align-items:center;gap:2px;padding:6px;border-radius:99px;background:rgba(255,255,255,.96);color:var(--espresso);box-shadow:0 20px 40px -10px #000}
.ctrl button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}.ctrl button:disabled{opacity:.3}.ctrl span{min-width:64px;text-align:center;font-weight:700;font-size:14px}