/* Bibliotheque page styles */
:root{
    --bg:#f8fbff;
    --card:#fff;
    --muted:#6b7280;
    --glass: rgba(255,255,255,0.6);
    --radius:12px;
    --container:1200px; 
}

*{box-sizing:border-box}
html,body{height:100%;font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#102a43; background:var(--bg);}
.container{max-width:var(--container);margin:0 auto;padding:1rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.library-hero{padding:3rem 0 1.2rem}
.hero-inner{display:flex;gap:2rem;align-items:center;justify-content:space-between}
.hero-copy h1{font-size:1.9rem;margin:0 0 .4rem}
.hero-copy .tagline{color:var(--accent);font-weight:600;margin-bottom:.25rem}
.hero-copy .lede{color:var(--muted);margin:0}

.controls{margin-top:1.4rem}
.controls-grid{display:grid;grid-template-columns:1fr auto;gap:0.75rem;align-items:center}
.search-wrap{display:flex}
.search-input{flex:1;padding:.75rem 1rem;border-radius:999px;border:1px solid #e6f7ea;background:#fff;box-shadow:0 1px 0 rgba(10,10,10,.02);transition:box-shadow .2s ease;border:1px solid #e6f7ea}
.search-input:focus{outline:none;box-shadow:0 4px 18px rgba(var(--brand-rgb),.12)}
.selects{display:flex;gap:.5rem}
.selects select{padding:.6rem .8rem;border-radius:8px;border:1px solid #e6f7ea;background:#fff}
.actions{margin-left:auto}

.result-meta{margin-top:.6rem;color:var(--muted)}

.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{background:var(--card);border-radius:var(--radius);padding:1rem;box-shadow:0 6px 18px rgba(16,42,67,.06);transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .2s;display:flex;gap:.8rem;align-items:flex-start}
.card:focus-within{box-shadow:0 10px 28px rgba(var(--brand-rgb),.12);transform:translateY(-4px)}
.card:hover{transform:translateY(-4px)}
.card-visual{width:64px;height:64px;flex:0 0 64px;border-radius:10px;background:linear-gradient(135deg,#f0fbf2,#f7fff7);display:flex;align-items:center;justify-content:center;border:1px solid #e6f7ea}
.card h3{margin:0;font-size:1.02rem}
.card p{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}
.card .tags{margin-top:.5rem;display:flex;gap:.4rem;flex-wrap:wrap}
.tag{background:#f0fbf2;color:var(--accent);padding:.25rem .5rem;border-radius:999px;font-size:.8rem}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease}
.modal[aria-hidden="false"]{visibility:visible;opacity:1;pointer-events:auto}
.modal-panel{background:var(--card);padding:1.25rem;border-radius:10px;max-width:720px;width:100%;box-shadow:0 18px 48px rgba(2,6,23,.2)}
.modal-close{position:absolute;right:1rem;top:1rem;background:transparent;border:0;font-size:1.4rem}

/* Responsive */
@media (max-width: 900px){
    .resources-grid{grid-template-columns:repeat(2,1fr)}
    .hero-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width: 560px){
    .resources-grid{grid-template-columns:1fr}
    .controls-grid{grid-template-columns:1fr;gap:0.5rem}
    .selects{width:100%;display:flex}
}

/* Gallery styles */
.gallery{margin-top:2rem}
.gallery-controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumb{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(16,42,67,0.06);cursor:pointer;display:flex;flex-direction:column}
.thumb img{width:100%;height:180px;object-fit:cover;display:block;transition:transform .28s ease}
.thumb .thumb-caption{padding:10px;font-weight:700;color:var(--accent)}
.thumb:focus-within img,.thumb:hover img{transform:scale(1.04)}
.thumb:focus{outline:3px solid rgba(var(--brand-rgb),0.12);outline-offset:4px}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr}}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
    .card, .modal, .thumb img{transition:none}
}