:root{--black:#090909;--gold:#c79a3b;--paper:#f4efe6;--ink:#201d18;--line:#d9ccb7}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}
header{height:70px;background:#090909;color:white;display:flex;align-items:center;padding:0 5%;gap:28px;position:sticky;top:0;z-index:30;border-bottom:1px solid #3d2d10}
.logo{font:700 26px Georgia;color:white;text-decoration:none}.logo span{color:var(--gold)}
nav{display:flex;gap:20px;margin-left:auto}nav a{color:#eee;text-decoration:none;font-size:14px}.cartButton{border:1px solid var(--gold);background:transparent;color:white;border-radius:30px;padding:10px 15px}
.hero{min-height:520px;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.32)),url('assets/covers/le-maroc-de-la-resilience.jpg') center 35%/cover;color:white;display:flex;align-items:center;padding:7%}
.heroText{max-width:790px}.hero small,.heading small,.library small{color:#e0b75f;letter-spacing:3px}.hero h1{font:700 clamp(44px,7vw,82px)/1 Georgia;margin:16px 0}.hero p{font:21px/1.5 Georgia;max-width:700px;color:#eee}.hero a,.library a{display:inline-block;background:var(--gold);color:#111;text-decoration:none;padding:14px 21px;font-weight:bold;margin-top:12px}
main{max-width:1400px;margin:auto;padding:60px 22px}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.heading h2,.library h2{font:700 42px Georgia;margin:7px 0}.filters{display:grid;grid-template-columns:1fr 330px;gap:12px;margin-bottom:42px}.filters input,.filters select{padding:14px;background:white;border:1px solid var(--line);border-radius:5px}
.shelf{margin-bottom:58px}.shelfTitle{font:700 33px Georgia;border-bottom:2px solid var(--gold);padding-bottom:11px;margin-bottom:22px}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px #33220b12;display:flex;flex-direction:column}.coverWrap{position:relative;background:#111;overflow:hidden}.cover{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;transition:.25s}.card:hover .cover{transform:scale(1.03)}
.readBadge{position:absolute;left:8px;top:8px;background:#090909dd;color:#f1c868;padding:6px 8px;font-size:10px;letter-spacing:.7px}.body{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}.genre{font-size:11px;color:#987126;text-transform:uppercase;font-weight:bold}.body h3{font:700 19px/1.15 Georgia;margin:0}.author{font-size:12px;color:#756c5f}.actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}.price{font:700 19px Georgia;margin-right:auto}.add,.preview{border:0;padding:9px 10px;cursor:pointer}.add{background:#111;color:white}.preview{background:#eadfcf}
.library{background:#111;color:white;text-align:center;padding:75px 20px}.library p{max-width:760px;margin:15px auto;font:19px/1.6 Georgia;color:#d8d0c5}
.drawer{display:none;position:fixed;inset:0;z-index:50}.drawer.open{display:block}.overlay{position:absolute;inset:0;background:#000a}.drawer aside{position:absolute;right:0;top:0;width:min(450px,95vw);height:100%;background:#fff;padding:25px;overflow:auto}.close{float:right;background:none;border:0;font-size:30px}.cartLine{display:grid;grid-template-columns:55px 1fr auto;gap:11px;padding:13px 0;border-bottom:1px solid #ddd}.cartLine img{width:55px;aspect-ratio:2/3;object-fit:cover}.remove{border:0;background:none;color:#a11919}.total{display:flex;justify-content:space-between;font:700 23px Georgia;margin:24px 0}.checkout{width:100%;padding:14px;background:#111;color:#fff;border:0}.info{font-size:12px;line-height:1.45;color:#666}.empty{text-align:center;padding:40px;color:#777}
@media(max-width:1150px){.grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){nav{display:none}.hero{min-height:460px;padding:45px 18px}.filters{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr);gap:11px}.shelfTitle{font-size:25px}.body h3{font-size:16px}.actions{flex-wrap:wrap}.heading h2{font-size:34px}}