/* Une carte de crédit (titre ou album réalisé avec les plugins ONIRIQUE) : l'accueil et la page des crédits.
   Les variables (--deep-2, --glow, --ease…) sont celles de la page qui l'utilise. */
.credit-list { display: grid; gap: 20px; }
.credit { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: center; padding: 24px; border-radius: 26px; background: linear-gradient(120deg, var(--deep-2), var(--deep) 55%); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .4s, transform .5s var(--ease); }
.credit:hover { border-color: rgba(226,52,68,.45); transform: translateY(-4px); }
.credit::before { content: ""; position: absolute; z-index: -1; left: -60px; top: -60px; width: 340px; height: 340px; background: var(--cover-img, none) center / cover; filter: blur(70px) saturate(1.4); opacity: .45; }
.cover { position: relative; aspect-ratio: 1; width: 100%; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 35% 30%, var(--ember), var(--blood) 60%, var(--night)); box-shadow: 0 24px 50px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 28px/1 var(--f-display); letter-spacing: .08em; color: var(--mist); text-shadow: var(--glow); }
.credit-info { display: grid; gap: 14px; min-width: 0; }
.credit-kind { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.credit-title { font: 800 clamp(30px, 3.4vw, 46px)/1 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.credit-artist { font-size: 18px; font-weight: 600; color: var(--mist); margin-top: -6px; }
.credit-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; }
.credit-meta div { display: grid; gap: 4px; }
.credit-meta dt { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--haze); }
.credit-meta dd { margin: 0; font: 500 14px/1.2 var(--f-mono); color: var(--mist); font-variant-numeric: tabular-nums; }
.plugin-used { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 8px 16px 8px 8px; border-radius: 99px; border: 1px solid rgba(226,52,68,.45); background: rgba(226,52,68,.08); text-decoration: none; transition: background .25s, border-color .25s; }
.plugin-used:hover { background: rgba(226,52,68,.18); border-color: var(--ember); }
.plugin-used img { width: 34px; height: auto; filter: drop-shadow(0 0 5px rgba(226,52,68,.9)); }
.plugin-used b { display: block; font: 700 13px/1.2 var(--f-body); letter-spacing: .06em; }
.plugin-used small { display: block; font: 400 12px/1.2 var(--f-mono); color: var(--haze); }
.credit-player { display: grid; gap: 10px; min-width: 0; }
.plugins-used { display: flex; flex-wrap: wrap; gap: 8px; }
.credit-engineer { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--haze); }
.credit-engineer a, .credit-engineer span { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); text-decoration: none; text-transform: none; letter-spacing: 0; font: 600 15px/1 var(--f-body); }
.credit-engineer a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.credit-engineer img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.credit-engineer svg { width: 15px; height: 15px; color: var(--haze); }
.credit-engineer { flex-wrap: wrap; row-gap: 6px; }
.credit-engineer .credit-and { color: var(--haze); font-weight: 400; }
.embed.album iframe { height: 352px; }
.embed { position: relative; border-radius: 12px; overflow: hidden; background: rgba(11,6,7,.6); }
.embed-load { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: 152px; display: grid; place-content: center; gap: 8px; text-align: center; padding: 16px; font: 600 15px/1.3 var(--f-body); color: var(--mist); }
.embed-load:hover { background: rgba(226,52,68,.1); }
.embed-load:focus-visible { outline: 2px solid var(--ember); outline-offset: -4px; }
.embed-load small { font: 400 12px/1.5 var(--f-body); color: var(--haze); }
.embed iframe { position: relative; width: 100%; height: 152px; border: 0; display: block; color-scheme: normal; }
.open-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
.open-link { justify-self: end; font: 500 12px/1 var(--f-mono); color: var(--haze); text-decoration: none; letter-spacing: .04em; }
.open-link:hover { color: var(--mist); }
@media (max-width: 1060px) { .credit { grid-template-columns: 160px minmax(0, 1fr); } .credit-player { grid-column: 1 / -1; } }
@media (max-width: 560px) { .credit { grid-template-columns: minmax(0, 1fr); padding: 18px; } .cover { max-width: 220px; } }
.credits-more { display: flex; justify-content: center; margin-top: 26px; }
.credits-more a { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; border: 1px solid rgba(226,52,68,.5); background: rgba(226,52,68,.08); color: var(--mist); font: 600 15px/1 var(--f-body); text-decoration: none; transition: background .25s, border-color .25s; }
.credits-more a:hover { background: rgba(226,52,68,.18); border-color: var(--ember); }
.credits-more b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: #fff; font: 700 17px/1 var(--f-body); }