:root{
  --blush:#f2d7d9;--rose:#e8a5ae;--rose-deep:#c9707c;--rose-dark:#a84f5a;
  --lilac:#d4b8d8;--lavender:#ede4f5;--sage:#b5c9b0;--sage-dark:#7a9e74;
  --cream:#fdf7f4;--parchment:#f5ece6;
  --ink:#2d1f22;--ink-soft:#5a3f45;
  --shadow-s:rgba(169,80,100,0.10);--shadow-m:rgba(169,80,100,0.18);--shadow-l:rgba(169,80,100,0.28);
  --radius:14px;--radius-sm:9px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;max-width:100%;}
body{font-family:'Nunito',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;overflow-x:hidden;max-width:100%;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--rose);border-radius:4px;}

/* ── AUTH ── */
#auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;
  background:
    radial-gradient(ellipse 70% 60% at 15% 80%,rgba(228,165,174,.35) 0%,transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 15%,rgba(212,184,216,.30) 0%,transparent 60%),
    var(--cream);
}
.auth-wrap{width:100%;max-width:450px;}
.auth-card{
  background:rgba(255,255,255,.90);backdrop-filter:blur(16px);
  border:1px solid rgba(232,165,174,.30);border-radius:var(--radius);
  padding:2.75rem 3rem;
  box-shadow:0 8px 48px var(--shadow-m),0 2px 8px var(--shadow-s);
  animation:fadeUp .55s cubic-bezier(.16,1,.3,1);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.auth-logo{text-align:center;margin-bottom:2.25rem;}
.logo-icon{
  width:64px;height:64px;
  background:linear-gradient(135deg,var(--rose),var(--lilac));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;margin:0 auto .8rem;box-shadow:0 4px 16px var(--shadow-m);
}
.auth-logo h1{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:600;letter-spacing:-.02em;}
.auth-logo p{color:var(--ink-soft);font-size:.85rem;font-weight:300;margin-top:.2rem;opacity:.75;}
.tabs{
  display:flex;background:var(--parchment);border-radius:var(--radius-sm);
  padding:4px;gap:4px;margin-bottom:1.75rem;
}
.tab-btn{
  flex:1;border:none;background:transparent;padding:.55rem .5rem;
  font-family:'Nunito',sans-serif;font-size:.875rem;font-weight:600;
  color:var(--ink-soft);cursor:pointer;border-radius:6px;transition:all .25s;opacity:.6;
}
.tab-btn.active{background:white;opacity:1;color:var(--rose-dark);box-shadow:0 2px 8px var(--shadow-s);}
.form-group{margin-bottom:1.1rem;}
label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--rose-dark);margin-bottom:.4rem;opacity:.85;}
.input-wrap{position:relative;}
input[type=text],input[type=password],input[type=email],textarea,select{
  width:100%;padding:.72rem 1rem;border:1.5px solid rgba(232,165,174,.40);border-radius:var(--radius-sm);
  background:var(--parchment);font-family:'Nunito',sans-serif;font-size:.94rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--rose-deep);box-shadow:0 0 0 3.5px rgba(201,112,124,.14);background:white;}
input.valid-field{border-color:var(--sage-dark)!important;box-shadow:0 0 0 3.5px rgba(122,158,116,.18)!important;}
input.invalid-field{border-color:var(--rose-dark)!important;}
input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none;}
input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;}
.pw-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1rem;opacity:.5;transition:opacity .2s;padding:0;line-height:1;}
.pw-toggle:hover{opacity:1;}
.strength-meter{margin-top:.55rem;}
.strength-bars{display:flex;gap:4px;margin-bottom:.3rem;}
.sbar{flex:1;height:4px;border-radius:2px;background:rgba(232,165,174,.25);transition:background .35s;}
.sbar.s1{background:#c9707c;}.sbar.s2{background:#e8914a;}.sbar.s3{background:#d4b800;}.sbar.s4{background:var(--sage-dark);}.sbar.s5{background:#4caf82;}
.strength-rules{display:flex;flex-wrap:wrap;gap:.3rem .65rem;margin-top:.25rem;}
.rule{font-size:.72rem;display:flex;align-items:center;gap:.2rem;color:var(--ink-soft);opacity:.45;transition:all .25s;}
.rule.ok{opacity:1;color:var(--sage-dark);}
.rule::before{content:'·';font-weight:700;}.rule.ok::before{content:'✓';}
.strength-label{font-size:.73rem;font-weight:700;margin-top:.35rem;}
.form-msg{border-radius:var(--radius-sm);padding:.6rem .9rem;font-size:.84rem;margin-bottom:1rem;display:none;}
.form-msg.error{background:rgba(201,112,124,.10);border:1px solid rgba(201,112,124,.30);color:var(--rose-dark);}
.form-msg.success{background:rgba(122,158,116,.10);border:1px solid rgba(122,158,116,.30);color:var(--sage-dark);}
.btn-primary{
  width:100%;padding:.82rem;
  background:linear-gradient(135deg,var(--rose-deep),var(--rose-dark));
  color:white;border:none;border-radius:12px;
  font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:opacity .2s,transform .2s,box-shadow .25s;
  box-shadow:0 4px 14px var(--shadow-m);margin-top:.4rem;
  position:relative;overflow:hidden;
}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .45s ease;pointer-events:none;
}
.btn-primary:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 28px var(--shadow-l);}
.btn-primary:hover::after{left:160%;}
.btn-primary:active{transform:scale(.97) translateY(0)!important;}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;}

/* ── APP ── */
header{
  background:linear-gradient(to right,rgba(242,215,217,.97),rgba(237,228,245,.95));
  border-bottom:1px solid rgba(255,255,255,.5);height:68px;padding:0 2rem;
  display:flex;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:100;box-shadow:0 2px 16px var(--shadow-s);
}
.header-brand{
  display:flex;align-items:center;gap:.5rem;
  flex:1;min-width:0;overflow:hidden;
}
.brand-icon{font-size:1.4rem;flex-shrink:0;}
.brand-text{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:clip;
}
@media(max-width:600px){
  .brand-text{display:none;}
}
@media(max-width:600px){
  #hd-name{display:none;}
}
.header-right{
  display:flex;align-items:center;gap:.75rem;flex-shrink:0;margin-left:1rem;
}
.header-user{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--ink-soft);}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:white;flex-shrink:0;transition:transform .2s ease,box-shadow .2s ease;}
.avatar:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(169,80,100,.2);}
.btn-logout{background:rgba(255,255,255,.6);border:1px solid rgba(168,79,90,.25);color:var(--rose-dark);padding:.38rem .9rem;border-radius:20px;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s;}
.btn-logout:hover{background:rgba(255,255,255,.9);}
.app-body{max-width:1140px;margin:0 auto;padding:0 1.75rem;display:grid;grid-template-columns:1fr 350px;gap:2.25rem;align-items:start;}
.app-body main{height:calc(100vh - 68px);overflow:hidden;padding-top:2.5rem;display:flex;flex-direction:column;}
#feed{flex:1;overflow-y:auto;scrollbar-width:none;}
#feed::-webkit-scrollbar{display:none;}
.app-body aside{height:calc(100vh - 68px);overflow-y:auto;padding-top:2.5rem;padding-bottom:2.5rem;scrollbar-width:none;}
.app-body aside::-webkit-scrollbar{display:none;}
@media(max-width:800px){
  .app-body{grid-template-columns:1fr;padding:0 1rem;}
  .app-body main{height:calc(100vh - 68px);padding-top:1.25rem;}
  .app-body aside{height:auto;overflow-y:visible;}
}
.section-title{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:600;color:var(--ink);margin-bottom:1rem;}
.search-sticky{
  background:var(--cream);
  padding:.9rem 0 .6rem;
  flex-shrink:0;
  border-bottom:1px solid rgba(232,165,174,.2);
}
.search-bar{display:flex;gap:.6rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.search-bar input{flex:1;min-width:130px;padding:.6rem .9rem;font-size:.88rem;}
.search-bar select{width:auto;padding:.6rem .85rem;font-size:.88rem;}
.book-card{
  background:white;border:1px solid rgba(232,165,174,.20);border-radius:var(--radius);
  padding:1.5rem 1.6rem;margin-bottom:1.15rem;
  box-shadow:0 3px 16px var(--shadow-s);
  animation:cardIn .45s cubic-bezier(.16,1,.3,1);transition:box-shadow .25s,transform .25s;
}
.book-card:hover{box-shadow:0 8px 32px var(--shadow-m);transform:translateY(-3px);}
@keyframes cardIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.card-header{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:.9rem;}
.book-spine{width:54px;min-width:54px;height:76px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;box-shadow:0 4px 10px var(--shadow-s);}
.card-meta{flex:1;}
.book-title{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;line-height:1.25;margin-bottom:.18rem;}
.book-author{font-size:.83rem;color:var(--ink-soft);opacity:.65;margin-bottom:.45rem;}
.genre-tag{display:inline-block;background:var(--lavender);color:var(--rose-dark);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.18rem .55rem;border-radius:20px;}
.card-comment{font-size:.9rem;line-height:1.65;color:var(--ink-soft);border-left:3px solid var(--rose);padding:.1rem 0 .1rem 1rem;margin:.75rem 0;font-style:italic;}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--parchment);flex-wrap:wrap;gap:.5rem;}
.card-user{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--ink-soft);opacity:.7;}
.stars{color:var(--rose-deep);font-size:.88rem;letter-spacing:1px;}
.btn-like{background:none;border:1.5px solid rgba(232,165,174,.45);border-radius:20px;padding:.28rem .75rem;font-size:.82rem;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,box-shadow .2s;color:var(--rose-deep);font-family:'Nunito',sans-serif;font-weight:600;display:flex;align-items:center;gap:.3rem;}
.btn-like:hover{background:rgba(232,165,174,.12);border-color:var(--rose-deep);box-shadow:0 2px 8px rgba(169,80,100,.15);}
.btn-like:active{transform:scale(.9);}
.btn-like.liked{background:rgba(201,112,124,.12);border-color:var(--rose-deep);}
.btn-del{background:none;border:none;color:var(--rose);font-size:.85rem;cursor:pointer;opacity:.45;transition:opacity .2s;padding:0;font-family:'Nunito',sans-serif;}
.btn-del:hover{opacity:1;color:var(--rose-dark);}
.card-extra{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--parchment);}
.member-rating{display:flex;align-items:center;gap:.1rem;}
.mstars{display:flex;gap:1px;}
.mstar{color:#ddd;cursor:pointer;font-size:.95rem;transition:color .15s;line-height:1;}
.mstar.on{color:var(--rose-deep);}
.mstar:hover,.mstar:hover~.mstar{color:var(--rose-deep);}
.mstars:hover .mstar{color:var(--rose-deep);}
.mstars .mstar:hover~.mstar{color:#ddd;}
.btn-status{background:rgba(201,112,124,.08);border:1.5px solid rgba(201,112,124,.25);border-radius:20px;padding:.25rem .75rem;font-size:.78rem;cursor:pointer;color:var(--rose-dark);font-family:'Nunito',sans-serif;font-weight:600;transition:all .2s;white-space:nowrap;}
.btn-status:hover{background:rgba(201,112,124,.15);}
.btn-status.active{background:rgba(201,112,124,.15);border-color:var(--rose-dark);}
.react-bar{display:flex;gap:.3rem;margin-top:.4rem;flex-wrap:wrap;}
.react-btn{display:inline-flex;align-items:center;gap:2px;font-size:.78rem;padding:.15rem .45rem;border-radius:20px;background:rgba(201,112,124,.06);border:1px solid rgba(201,112,124,.15);cursor:pointer;transition:all .15s;color:var(--ink);line-height:1.4;}
.react-btn:hover{background:rgba(201,112,124,.15);border-color:var(--rose-dark);}
.react-btn.active{background:rgba(201,112,124,.18);border-color:var(--rose-dark);font-weight:700;}
.react-count{font-size:.72rem;color:var(--ink-soft);}
.comments-section{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--parchment);}
.comment-item{display:flex;gap:.6rem;margin-bottom:.75rem;font-size:.85rem;}
.comment-body{background:var(--parchment);border-radius:var(--radius-sm);padding:.5rem .75rem;flex:1;line-height:1.5;}
.comment-author{font-weight:600;color:var(--rose-dark);margin-bottom:.2rem;font-size:.78rem;}
.comment-form{display:flex;gap:.5rem;margin-top:.5rem;}
.comment-form input{flex:1;padding:.5rem .75rem;font-size:.85rem;}
.comment-form button{padding:.5rem 1rem;background:var(--rose-deep);color:white;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:600;transition:opacity .2s;}
.comment-form button:hover{opacity:.85;}
.panel{background:white;border:1px solid rgba(232,165,174,.20);border-radius:var(--radius);padding:1.6rem 1.65rem;box-shadow:0 3px 16px var(--shadow-s);margin-bottom:1.25rem;}
.panel h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;margin-bottom:1.15rem;padding-bottom:.75rem;border-bottom:1px solid var(--parchment);display:flex;align-items:center;gap:.4rem;}
textarea{resize:vertical;min-height:82px;}
select{cursor:pointer;}
.stars-input{display:flex;gap:.2rem;margin-bottom:.2rem;}
.star-btn{background:none;border:none;font-size:1.4rem;cursor:pointer;opacity:.25;transition:opacity .15s,transform .15s;padding:0;color:var(--rose-deep);}
.star-btn.on{opacity:1;}
.star-btn:hover{transform:scale(1.25);}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--parchment);font-size:.88rem;}
.stat-row:last-child{border-bottom:none;}
.stat-val{font-weight:700;color:var(--rose-dark);}
.user-row{display:flex;align-items:center;gap:.65rem;padding:.5rem 0;border-bottom:1px solid var(--parchment);font-size:.875rem;}
.user-row:last-child{border-bottom:none;}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--ink-soft);opacity:.5;}
.empty-state .e-icon{font-size:2.5rem;margin-bottom:.5rem;}
.loading{text-align:center;padding:2rem;opacity:.5;font-size:.9rem;}
.toast{position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:var(--cream);padding:.75rem 1.6rem;border-radius:30px;font-size:.87rem;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,.22);transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:9999;pointer-events:none;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.good{background:linear-gradient(135deg,var(--sage-dark),#4caf82);}
.toast.bad{background:var(--rose-dark);}
/* ── MODAL CONFIRMATION ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(45,31,34,0.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:1rem;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:white;border-radius:var(--radius);
  padding:2rem 2.25rem;max-width:380px;width:100%;
  box-shadow:0 16px 48px rgba(45,31,34,0.2);
  animation:slideUp .25s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.modal h4{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;margin-bottom:.6rem;}
.modal p{font-size:.88rem;color:var(--ink-soft);line-height:1.6;margin-bottom:1.5rem;}
.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;}
.btn-cancel{background:none;border:1.5px solid rgba(232,165,174,.45);color:var(--ink-soft);padding:.6rem 1.2rem;border-radius:var(--radius-sm);font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-cancel:hover{border-color:var(--rose);color:var(--rose-dark);}
.btn-confirm-del{background:var(--rose-dark);color:white;border:none;padding:.6rem 1.2rem;border-radius:var(--radius-sm);font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:opacity .2s;}
.btn-confirm-del:hover{opacity:.85;}

/* ── MENU COMMENTAIRE ── */
.comment-menu{
  position:absolute;right:0;top:100%;
  background:white;border:1px solid rgba(232,165,174,.25);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px var(--shadow-m);
  min-width:160px;z-index:50;overflow:hidden;
  animation:fadeIn .15s ease;
}
.comment-menu button{
  display:block;width:100%;text-align:left;
  padding:.65rem 1rem;background:none;border:none;
  font-family:'Nunito',sans-serif;font-size:.875rem;font-weight:500;
  cursor:pointer;transition:background .15s;color:var(--ink);
}
.comment-menu button:hover{background:var(--parchment);}
.comment-menu button.del{color:var(--rose-dark);}
.comment-item{position:relative;cursor:pointer;}
.comment-item:hover .comment-body{background:rgba(242,215,217,.35);}

/* ── EDIT TEXTAREA ── */
.edit-area{width:100%;padding:.5rem .75rem;font-size:.85rem;border:1.5px solid rgba(232,165,174,.4);border-radius:var(--radius-sm);font-family:'Nunito',sans-serif;resize:vertical;min-height:60px;outline:none;margin-top:.35rem;}
.edit-area:focus{border-color:var(--rose-deep);box-shadow:0 0 0 3px rgba(201,112,124,.12);}
.edit-actions{display:flex;gap:.5rem;margin-top:.4rem;justify-content:flex-end;}
.btn-save{background:var(--rose-deep);color:white;border:none;padding:.4rem .9rem;border-radius:var(--radius-sm);font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;}
.btn-save:hover{opacity:.85;}

/* ── DELETE BTN LIVRE ── */
.btn-del-book{
  width:28px;height:28px;
  background:rgba(201,112,124,.12);
  border:1.5px solid rgba(201,112,124,.35);
  border-radius:50%;color:var(--rose-dark);
  font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.btn-del-book:hover{background:var(--rose-dark);color:white;border-color:var(--rose-dark);}
.btn-edit-book{
  width:28px;height:28px;
  background:rgba(181,201,176,.2);
  border:1.5px solid rgba(122,158,116,.3);
  border-radius:50%;font-size:.75rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.btn-edit-book:hover{background:var(--sage-dark);border-color:var(--sage-dark);}
.notif-btn{
  position:relative;
  background:none;border:none;font-size:1.1rem;cursor:pointer;
  padding:.3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.notif-btn:hover{background:rgba(232,165,174,.15);}

/* ── SIDEBAR / DRAWER selon écran ── */
@media(min-width:801px){
  .app-body{ align-items:start; }
  .fab{ display:none !important; }
  #drawer{ display:none !important; }
  #drawer-overlay{ display:none !important; }
}
/* ── BOUTON FLOTTANT ── */
.fab{
  position:fixed;bottom:2rem;right:2rem;z-index:200;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose-deep),var(--rose-dark));
  color:white;border:none;font-size:1.4rem;cursor:pointer;
  box-shadow:0 6px 24px var(--shadow-l);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,box-shadow .2s,opacity .3s;
  opacity:0;pointer-events:none;
}
.fab.visible{opacity:1;pointer-events:all;}
.fab:hover{transform:scale(1.08);box-shadow:0 10px 32px var(--shadow-l);}
.fab:active{transform:scale(.95);}

/* ── DRAWER ── */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(45,31,34,0.4);
  z-index:300;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.drawer-overlay.open{opacity:1;pointer-events:all;}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:100vw;
  background:var(--cream);z-index:301;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;padding:2rem 1.75rem;
  box-shadow:-8px 0 40px var(--shadow-m);
}
.drawer.open{transform:translateX(0);}
.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--parchment);
}
.drawer-header h3{
  font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;
  display:flex;align-items:center;gap:.4rem;
}
.btn-close-drawer{
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(232,165,174,.4);
  background:none;color:var(--rose-dark);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.btn-close-drawer:hover{background:var(--rose-dark);color:white;border-color:var(--rose-dark);}

@media(max-width:800px){
  aside .panel:first-child{ display:none; }
}
@keyframes shake {
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(5px); }
}
.shake { animation:shake .4s cubic-bezier(.36,.07,.19,.97); }
/* ── FORGOT CHOICE MODAL ── */
.forgot-choice-modal{
  position:fixed;inset:0;background:rgba(45,31,34,0.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:1rem;
  animation:fadeIn .2s ease;
}
.forgot-choice-card{
  background:white;border-radius:var(--radius);
  padding:2.25rem 2rem;max-width:360px;width:100%;
  box-shadow:0 16px 48px rgba(45,31,34,0.2);
  animation:slideUp .25s cubic-bezier(.16,1,.3,1);
  text-align:center;
}
.forgot-choice-card h4{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:600;color:var(--ink);
  margin-bottom:.4rem;
}
.forgot-choice-card p{
  font-size:.84rem;color:var(--ink-soft);
  line-height:1.6;margin-bottom:1.75rem;opacity:.8;
}
.forgot-choice-btns{display:flex;flex-direction:column;gap:.75rem;}
.btn-choice{
  width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);
  font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all .2s;border:none;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
}
.btn-choice-primary{
  background:linear-gradient(135deg,var(--rose-deep),var(--rose-dark));
  color:white;box-shadow:0 4px 14px var(--shadow-m);
}
.btn-choice-primary:hover{opacity:.88;box-shadow:0 6px 20px var(--shadow-l);}
.btn-choice-secondary{
  background:var(--lavender);color:var(--rose-dark);
}
.btn-choice-secondary:hover{background:var(--blush);}
.btn-choice-ghost{
  background:none;border:1.5px solid rgba(232,165,174,.4);
  color:var(--ink-soft);
}
.btn-choice-ghost:hover{border-color:var(--rose);color:var(--rose-dark);}
.link-btn{
  background:none;border:none;color:var(--rose-dark);
  font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:600;
  cursor:pointer;text-decoration:underline;opacity:.7;transition:opacity .2s;padding:0;
}
.link-btn:hover{opacity:1;}

/* ── LANDING ── */
#landing-screen {
  display:none;
  min-height:100vh;
  background:var(--cream);
  flex-direction:column;
  overflow-x:hidden;
}

/* Header */
.landing-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 3rem;
  background:rgba(253,247,244,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(232,165,174,.18);
  position:sticky;
  top:0;
  z-index:100;
}
.landing-brand {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;
  font-weight:600;
  color:var(--ink);
}
.landing-signin {
  background:white;
  border:1.5px solid rgba(201,112,124,.3);
  color:var(--rose-dark);
  padding:.45rem 1.25rem;
  border-radius:20px;
  font-family:'Nunito',sans-serif;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.landing-signin:hover { background:var(--rose-dark);color:white; }

/* Hero */
.landing-hero {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4rem;
  padding:5rem 4rem 4rem;
  max-width:1100px;
  margin:0 auto;
  width:100%;
  overflow:hidden;
}
.hero-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  z-index:0;
}
.hero-glow-1 { width:400px;height:400px;background:rgba(232,165,174,.35);top:-80px;left:-80px; }
.hero-glow-2 { width:300px;height:300px;background:rgba(212,184,216,.3);bottom:0;right:100px; }
.hero-glow-3 { width:200px;height:200px;background:rgba(242,215,217,.4);top:50%;left:40%; }
.hero-content { position:relative;z-index:1;flex:1;max-width:480px; }
.landing-title {
  font-family:'Cormorant Garamond',serif;
  font-size:3.5rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.18;
  margin-bottom:1.25rem;
}
.landing-sub {
  font-size:1.05rem;
  color:var(--ink-soft);
  line-height:1.75;
  margin-bottom:2rem;
  opacity:.88;
}
.landing-hero-btn {
  display:inline-block;
  padding:.85rem 2rem;
  font-size:.95rem;
  width:auto;
  border-radius:30px;
}
.hero-books {
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:.75rem;
  flex-shrink:0;
}
.hero-book {
  width:70px;
  height:105px;
  border-radius:6px 10px 10px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  box-shadow:0 8px 24px rgba(45,31,34,.18);
  transition:transform .3s;
}
.hero-book:hover { transform:translateY(-8px) rotate(0deg) !important; }

/* Vagues */
.wave-sep { width:100%;line-height:0; }
.wave-sep svg { display:block;width:100%;height:60px; }
.wave-sep-flip svg { transform:scaleX(-1); }

/* Features */
.landing-features {
  display:flex;
  gap:1.5rem;
  max-width:1000px;
  margin:0 auto;
  padding:3rem 2rem;
  width:100%;
}
.feature-card {
  flex:1;
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  box-shadow:0 4px 20px var(--shadow-s);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.85rem;
  border:1px solid rgba(232,165,174,.12);
  transition:transform .25s,box-shadow .25s;
}
.feature-card:hover { transform:translateY(-4px);box-shadow:0 10px 32px var(--shadow-m); }
.feature-icon-big { font-size:2.8rem;margin-bottom:.25rem; }
.feature-card h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;
  font-weight:600;
  color:var(--ink);
}
.feature-card p { font-size:.88rem;color:var(--ink-soft);line-height:1.65; }

/* Témoignages */
.landing-testimonials {
  max-width:1000px;
  margin:0 auto;
  padding:2rem 2rem 3.5rem;
  width:100%;
}
.landing-section-title {
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  font-weight:600;
  color:var(--ink);
  text-align:center;
  margin-bottom:2rem;
}
.testimonials-grid {
  display:flex;
  gap:1.25rem;
}
.testimonial-card {
  flex:1;
  background:white;
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:0 3px 16px var(--shadow-s);
  display:flex;
  gap:1rem;
  align-items:flex-start;
  border:1px solid rgba(232,165,174,.1);
}
.testimonial-avatar {
  width:42px;height:42px;min-width:42px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.1rem;color:white;
  flex-shrink:0;
}
.testimonial-quote {
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.65;
  font-style:italic;
  margin-bottom:.5rem;
}
.testimonial-name {
  font-size:.8rem;
  font-weight:700;
  color:var(--rose-dark);
  opacity:.8;
}

/* CTA finale */
.landing-cta-section {
  text-align:center;
  padding:4rem 2rem;
  background:linear-gradient(135deg, var(--rose-deep), var(--rose-dark));
  margin-top:1rem;
}
.landing-cta-text {
  font-family:'Cormorant Garamond',serif;
  font-size:2.5rem;
  font-weight:600;
  color:white;
  margin-bottom:.5rem;
}
.landing-cta-sub {
  color:rgba(255,255,255,.75);
  font-size:.95rem;
  margin-bottom:1.75rem;
}
.landing-cta-btn {
  background:white;
  color:var(--rose-dark);
  border:none;
  border-radius:30px;
  padding:.85rem 2.25rem;
  font-family:'Nunito',sans-serif;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 16px rgba(45,31,34,.2);
}
.landing-cta-btn:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,31,34,.3); }

.landing-footer {
  text-align:center;
  padding:1.5rem;
  font-size:.82rem;
  color:var(--ink-soft);
  opacity:.5;
  border-top:1px solid rgba(232,165,174,.2);
}

/* Animation nouveau message chat */
@keyframes msgFadeInUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.msg-new { animation:msgFadeInUp .2s ease; }

/* Animation fadeInUp */
.fade-up {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media(max-width:800px) {
  .landing-hero { flex-direction:column;gap:2.5rem;padding:3.5rem 2rem 2rem;text-align:center; }
  .landing-title { font-size:2.5rem; }
  .landing-features { flex-direction:column; }
  .testimonials-grid { flex-direction:column; }
}
@media(max-width:600px) {
  .landing-header { padding:1rem 1.25rem; }
  .landing-title { font-size:2rem; }
  .landing-hero { padding:3rem 1.25rem 2rem; }
  .landing-features,.landing-testimonials { padding:2rem 1.25rem; }
  .hero-books { gap:.5rem; }
  .hero-book { width:55px;height:82px;font-size:1.5rem; }
}

/* ── WELCOME SCREEN ── */
#welcome-screen {
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}
.welcome-body {
  flex:1;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:1rem 2rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
  align-content:start;
}
.welcome-card {
  grid-column:1 / -1;
  background:white; 
  border-radius:var(--radius);
  padding:1rem 1.5rem;
  box-shadow:0 3px 16px var(--shadow-s);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  align-items:center;
}
.welcome-greeting {
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;
  font-weight:600;
  color:var(--ink);
}
.welcome-quote-wrap {
  padding:1rem 1.25rem; 
  background:var(--parchment);
  border-radius:var(--radius-sm);
}
.welcome-quote-icon {
  font-family:'Cormorant Garamond',serif; 
  font-size:2rem;
  color:var(--rose); 
  opacity:.3; 
  line-height:1;
}
.welcome-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:0.95rem;
  font-style:italic; 
  line-height:1.7; 
  color:var(--ink); 
  margin-bottom:.5rem;
}
.welcome-quote-author { 
  font-size:.85rem; 
  color:var(--ink-soft); 
  opacity:.65; 
  font-weight:600; 
}
.welcome-stats {
  background:white;
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  box-shadow:0 3px 16px var(--shadow-s);
  display:flex; 
  flex-direction:column; 
  gap:.75rem;
}
.welcome-stats-title {
  font-family:'Cormorant Garamond',serif; 
  font-size:1.25rem;
  font-weight:600; 
  color:var(--ink); 
  margin-bottom:.25rem;
}
.welcome-stat-card {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding:0.4rem 0.75rem;
  background:var(--parchment); 
  border-radius:var(--radius-sm);
}
.wsc-label { font-size:1rem; color:var(--ink-soft); }
.wsc-val {
  font-family:'Cormorant Garamond',serif; 
  font-size:1.4rem;
  font-weight:600;
  color:var(--rose-dark);
}
.welcome-cta { width:100%; margin-top:.25rem; padding:.8rem; font-size:.92rem; }
.welcome-recent {
  background:white;
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  box-shadow:0 3px 16px var(--shadow-s);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.welcome-section-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:0.4rem;
  flex-shrink:0;
}
#w-recent::-webkit-scrollbar { width: 3px; }
#w-recent::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 4px; }
#w-recent::-webkit-scrollbar-track { background: transparent; }
#w-recent {
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.welcome-book-mini {
  padding:0.4rem 0;
  display:flex; 
  gap:.85rem;
  align-items:center; 
  border-bottom:1px solid var(--parchment);
}
.welcome-book-mini:last-child { border-bottom:none; }
.welcome-book-mini img, .mini-spine {
  width:38px; min-width:38px; height:54px;
  border-radius:6px; object-fit:cover; flex-shrink:0;
}
.mini-spine {
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; background:var(--parchment);
}
.welcome-book-mini-meta { flex:1; min-width:0; }
.wbm-title {
  font-family:'Cormorant Garamond',serif; 
  font-size:1.1rem;
  font-weight:600; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
}
.wbm-author { 
  font-size:.88rem; 
  color:var(--ink-soft); 
  opacity:.65; 
  margin:.15rem 0 .3rem; 
}
.wbm-genre {
  display:inline-block; background:var(--lavender); color:var(--rose-dark);
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; padding:.12rem .45rem; border-radius:20px;
}
@media (max-width: 600px) {
  #welcome-screen {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .welcome-body {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-content: start;
  }
  .welcome-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .welcome-greeting {
    font-size: 2rem;
  }
  .welcome-recent {
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
  }
}
@media (max-width: 600px) {
  #chat-window {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 80vh !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
  }
}
.btn-home{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(168,79,90,.25);
  color:var(--rose-dark);
  width:34px;height:34px;
  border-radius:50%;
  font-size:1rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  flex-shrink:0;
}
.btn-home:hover{background:rgba(255,255,255,.9);}

/* ── FAVORIS ── */
.btn-fav{
  background:none;border:1.5px solid rgba(232,165,174,.45);
  border-radius:20px;padding:.28rem .6rem;font-size:.88rem;
  cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,opacity .2s;
  line-height:1;opacity:.5;
}
.btn-fav:hover{opacity:1;background:rgba(232,165,174,.12);border-color:var(--rose-deep);}
.btn-fav:active{transform:scale(.9);}
.btn-fav.faved{opacity:1;background:rgba(201,112,124,.12);border-color:var(--rose-deep);}

.w-empty-favs{
  text-align:center;padding:1.5rem 1rem;
  color:var(--ink-soft);opacity:.5;font-size:.85rem;line-height:1.8;
}
.w-empty-favs span{font-size:.75rem;}
.welcome-book-mini:hover {
  background:var(--parchment);
  border-radius:var(--radius-sm);
}
#hd-av {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}
@media (max-height: 700px) {
  #welcome-screen { overflow-y: auto; }
}

/* ── MODERNISATION INTERACTIVE ── */

/* Bouton scroll vers le bas */
#scroll-bottom-btn{
  position:absolute;bottom:12px;left:calc(50% - 22px);
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose-deep),var(--rose-dark));
  color:white;border:none;cursor:pointer;
  font-size:1.15rem;font-family:'Nunito',sans-serif;
  align-items:center;justify-content:center;z-index:10;
  transition:transform .25s ease,box-shadow .25s ease;
  animation:scrollBtnPulse 2.8s ease-in-out infinite;
}
#scroll-bottom-btn:hover{transform:scale(1.07);box-shadow:0 6px 24px rgba(169,80,100,.5);}
#scroll-bottom-btn:active{transform:scale(.92);}
@keyframes scrollBtnPulse{
  0%,100%{box-shadow:0 4px 16px rgba(169,80,100,.32);}
  50%{box-shadow:0 4px 20px rgba(169,80,100,.52),0 0 0 7px rgba(169,80,100,.1);}
}

/* Boutons Voir / Télécharger sur fichiers */
.btn-file-action{
  font-size:.75rem;background:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.45);border-radius:8px;
  padding:.4rem .85rem;color:inherit;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:600;
  transition:transform .18s ease,box-shadow .18s ease,background .18s;
}
.btn-file-action:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.18);background:rgba(255,255,255,.48);}
.btn-file-action:active{transform:scale(.95);}

/* Animation like / fav */
@keyframes likePop{
  0%{transform:scale(1);}
  40%{transform:scale(1.28);}
  70%{transform:scale(.92);}
  100%{transform:scale(1);}
}
.like-pop{animation:likePop .38s cubic-bezier(.34,1.56,.64,1);}

/* Feedback tactile global sur tous les boutons non déjà gérés */
.btn-logout:active,.btn-close-drawer:active,.btn-del:active,.btn-save:active,
.btn-cancel:active,.btn-confirm-del:active,.btn-status:active,.react-btn:active,
.comment-form button:active{transform:scale(.95);}
.star-btn:active{transform:scale(1.3)!important;}