/* Grille des projets (projets.html, lab.html) — s'appuie sur player.css (en-tête, menu des playlists) */
main { width:min(1180px, 100% - 32px); }
.toolbar { position:relative; z-index:20; }   /* le menu des playlists passe au-dessus des cartes (animées, donc empilées à part) */
.toolbar .page { font-size:clamp(28px, 4vw, 44px); font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--fg); }
.grid-count { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:-4px 0 22px; }

/* vignettes rondes du menu des playlists */
.pl-opt .cover { display:block; width:36px; height:36px; border-radius:4px; overflow:hidden; background:var(--screen); }
.pl-opt .cover img { width:100%; height:100%; object-fit:cover; display:block; }

.grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(18px, 3vw, 36px) clamp(16px, 2.4vw, 28px); }
@media (max-width:720px) { .grid { grid-template-columns:1fr; } }

.card { position:relative; display:flex; flex-direction:column; gap:14px; color:inherit; text-decoration:none; isolation:isolate; }
.card .cover { position:relative; display:block; aspect-ratio:16 / 10; border-radius:8px; overflow:hidden; background:var(--screen); }
.card .cover img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001); transition:transform .9s cubic-bezier(.2,.7,.2,1); }
/* lueur ambiante (comme le lecteur) : copie floue de la couverture, qui s'allume au survol */
.card .ambient-img { position:absolute; left:4%; top:4%; width:92%; aspect-ratio:16 / 10; object-fit:cover; z-index:-1;
  filter:blur(40px) saturate(1.4); opacity:0; transform:scale(1.04); transition:opacity .6s, transform .9s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.card:hover .ambient-img, .card:focus-visible .ambient-img { opacity:.35; transform:scale(1.1); }
html[data-theme="dark"] .card:hover .ambient-img { opacity:.55; }
.card:hover .cover img { transform:scale(1.045); }
.card .soon { position:absolute; left:16px; bottom:14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:6px 10px; border-radius:999px; background:var(--bg); }

.card .info { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:14px; }
.card .num { font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.card .txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.card .t { font-size:clamp(17px, 1.6vw, 20px); font-weight:600; }
.card .m { font-size:13px; color:var(--muted); }
.card .go { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg);
  align-self:center; transition:background .25s, color .25s, border-color .25s, transform .25s; }
.card .go svg { width:15px; height:15px; }
.card:hover .go { background:var(--accent); border-color:var(--accent); color:#fff; transform:translateX(3px); }
.card:focus-visible { outline:none; }
.card:focus-visible .cover { outline:2px solid var(--accent); outline-offset:4px; }
.card.is-soon { cursor:default; }
.card.is-soon .t { color:var(--muted); }

/* changement de playlist : les cartes sortent, puis entrent l'une après l'autre */
.grid.out .card { opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; }
.grid.in .card { animation:cardIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 60ms); }
@keyframes cardIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ouverture d'un projet : la carte grossit légèrement, la page s'efface */
body.leaving main, body.leaving header > :not(.home) { opacity:0; transition:opacity .4s ease; }
body.leaving .card.opening .cover { transform:scale(1.02); transition:transform .4s; }
@media (prefers-reduced-motion:reduce) { .grid.in .card { animation:none; } .card .cover img, .card .ambient-img { transition:none; } }