:root{
  --papier:#f2f5f4; --carte:#fff; --encre:#10262b; --doux:#5b6f73; --trait:#d5dedc;
  --accent:#0b6b63; --accent-fonce:#084f49; --focus:#e0a800;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--papier:#0e1a1d; --carte:#16262a; --encre:#e8f0ee; --doux:#97aeb0; --trait:#27393d; --accent:#4cc2b5; --accent-fonce:#7fd8cd}
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font:16px/1.5 var(--sans)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.entete{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  max-width:1200px;margin:0 auto;padding:2rem 1rem 1rem}
.ecole{margin:0;color:var(--doux);font-size:.95rem}
h1{margin:.1rem 0 0;font:700 clamp(1.8rem,4vw,2.8rem)/1.1 var(--serif);letter-spacing:-.01em}
.compteur{margin:0;color:var(--doux)}

main{max-width:1200px;margin:0 auto;padding:0 1rem 3rem}
.outils{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:.6rem;margin:.5rem 0 1.2rem;
  position:sticky;top:0;background:var(--papier);padding:.6rem 0;z-index:2}
.outils input,.outils select{font:inherit;color:inherit;background:var(--carte);border:1px solid var(--trait);
  border-radius:8px;padding:.65rem .8rem;min-width:0}
@media(max-width:760px){.outils{grid-template-columns:1fr 1fr}.outils input{grid-column:1/-1}}

.etat{padding:2rem 0;color:var(--doux)}
.etat:empty{display:none}

.liste{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem 1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.livre{display:flex;flex-direction:column;gap:.55rem}
.couv{all:unset;cursor:pointer;display:block;aspect-ratio:3/4;border-radius:3px 8px 8px 3px;overflow:hidden;position:relative;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.18);transition:transform .15s}
.couv:hover{transform:translateY(-3px)}
.couv:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.couv img{width:100%;height:100%;object-fit:cover;display:block}
.couv__gen{height:100%;padding:1rem .9rem 1rem 1.3rem;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.couv__gen b{font:700 1.02rem/1.2 var(--serif);overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.couv__gen span{font-size:.75rem;opacity:.85}
.fmt{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;
  padding:.1rem .45rem;border-radius:99px;text-transform:uppercase}
.livre h2{margin:0;font:600 .98rem/1.3 var(--serif);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.livre p{margin:0;color:var(--doux);font-size:.85rem}
.actions{display:flex;gap:.4rem;margin-top:auto}
.btn{flex:1;text-align:center;text-decoration:none;font:600 .85rem var(--sans);padding:.5rem .4rem;border-radius:6px;
  border:1px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer}
.btn--plein{background:var(--accent);color:#fff}
@media(prefers-color-scheme:dark){.btn--plein{color:#08211e}}
.btn:hover{filter:brightness(1.1)}

dialog{border:1px solid var(--trait);border-radius:12px;background:var(--carte);color:var(--encre);
  max-width:560px;width:calc(100% - 2rem);padding:1.5rem}
dialog::backdrop{background:rgba(0,0,0,.5)}
.fermer{all:unset;position:absolute;top:.6rem;right:.9rem;font-size:1.8rem;cursor:pointer;color:var(--doux)}
.fiche h2{font:700 1.5rem/1.2 var(--serif);margin:0 2rem .3rem 0}
.fiche dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:1rem 0;color:var(--doux)}
.fiche dd{margin:0;color:var(--encre)}