/* Digitalibrary — couche Design & UX premium (s'ajoute par-dessus l'existant) */
:root{--ease:cubic-bezier(.22,1,.36,1);--sh1:0 1px 2px rgba(26,24,20,.06),0 2px 8px rgba(26,24,20,.05);--sh2:0 8px 24px rgba(26,24,20,.10);--sh3:0 22px 50px -12px rgba(26,24,20,.28);--gold:#d4a24c}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'cv11','ss01';}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 12% -10%,rgba(212,162,76,.13),transparent 60%),radial-gradient(800px 500px at 100% 0,rgba(45,74,138,.08),transparent 55%)}
::selection{background:var(--gold);color:#1a1814}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
*{scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--line,#ddd2bb);border-radius:9px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:padding-box}

/* Header verre dépoli + ombre au scroll */
header.sticky{background:color-mix(in srgb,var(--surface,#fffdf9) 78%,transparent)!important;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);transition:box-shadow .3s var(--ease),padding .3s var(--ease)}
header.sticky.is-scrolled{box-shadow:var(--sh2)}
header.sticky img{transition:transform .5s var(--ease)}header.sticky img:hover{transform:rotate(-4deg) scale(1.06)}
#search-input,#search-input-mobile{transition:box-shadow .3s var(--ease),border-color .3s,transform .3s var(--ease);background:color-mix(in srgb,var(--surface-alt,#f4ecdc) 70%,transparent)}
#search-input:focus,#search-input-mobile:focus{box-shadow:0 0 0 4px rgba(212,162,76,.28);border-color:var(--gold);transform:scale(1.015)}
.ux-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px/1 Inter,sans-serif;padding:4px 7px;border-radius:6px;border:1px solid var(--line,#ddd2bb);color:var(--muted,#6b6359);pointer-events:none;background:var(--surface,#fff)}

/* Boutons : profondeur, feedback tactile, ripple */
#app .dgl-btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,filter .25s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
#app .dgl-btn:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
#app .dgl-btn:active{transform:translateY(0) scale(.96);box-shadow:none}
#app .dgl-btn-primary{background-image:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%)}
.ux-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:uxr .65s var(--ease);pointer-events:none}
@keyframes uxr{to{transform:scale(3.2);opacity:0}}

/* Cartes livres : lévitation 3D + reflet (classes réelles : .dgl-book / .dgl-book-cover) */
#app .dgl-book{perspective:900px}
#app .dgl-book-cover{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
#app .dgl-book-cover::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
@media (hover:hover){#app .dgl-book:hover .dgl-book-cover{transform:translateY(-10px) rotateX(3deg) rotateY(-2deg);box-shadow:var(--sh3)}
#app .dgl-book:hover .dgl-book-cover img{transform:scale(1.08);filter:saturate(1.12)}
#app .dgl-book:hover .dgl-book-cover::before{transform:translateX(120%)}}
#app .dgl-book:active .dgl-book-cover{transform:scale(.97)}

/* Apparition en cascade */
.ux-reveal{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.ux-reveal.ux-in{opacity:1;transform:none}
#view-container.ux-route{animation:uxroute .55s var(--ease)}
@keyframes uxroute{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Squelettes plus doux */
.skeleton,.skeleton-book{background:linear-gradient(100deg,var(--surface-alt,#f4ecdc) 30%,color-mix(in srgb,var(--gold) 22%,var(--surface,#fff)) 50%,var(--surface-alt,#f4ecdc) 70%);background-size:220% 100%}

/* Commentaires & bannière PWA */
.dgl-comment{border-radius:14px;padding:14px 16px;background:var(--paper-soft,#f4ecdc);border:1px solid var(--rule,#ddd2bb);margin-bottom:10px;transition:transform .3s var(--ease)}.dgl-comment:hover{transform:translateX(4px)}
.pwa-banner{border-radius:22px;backdrop-filter:blur(14px);animation:uxpop .6s var(--ease)}
@keyframes uxpop{from{opacity:0;transform:translate(-50%,30px) scale(.94)}}

/* Barre de progression, retour en haut, hors-ligne */
#ux-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),#2d4a8a);z-index:100;transition:transform .1s linear}
#ux-top{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;border:1px solid var(--line,#ddd2bb);background:var(--surface,#fff);color:var(--text,#1a1814);box-shadow:var(--sh2);z-index:55;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;font-size:18px;cursor:pointer}
#ux-top.on{opacity:1;transform:none;pointer-events:auto}
#ux-net{position:fixed;left:50%;top:14px;transform:translate(-50%,-90px);padding:10px 18px;border-radius:999px;background:#1a1814;color:#fbf6ee;font:600 13px Inter,sans-serif;z-index:120;box-shadow:var(--sh3);transition:transform .5s var(--ease)}
#ux-net.on{transform:translate(-50%,0)}#ux-net.ok{background:#3f7256}

/* Mobile : cibles tactiles 44px, pas de zoom iOS */
@media (max-width:767px){input,select,textarea{font-size:16px!important}#app .dgl-btn{min-height:44px}main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
html[data-theme="night"] body::before{background:radial-gradient(900px 500px at 12% -10%,rgba(201,163,94,.10),transparent 60%),radial-gradient(800px 500px at 100% 0,rgba(91,127,206,.10),transparent 55%)}
html[data-theme="night"] .ux-kbd,html[data-theme="night"] #ux-top{background:var(--surface);color:var(--text)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.ux-reveal{opacity:1;transform:none}}