/* Lecteur vidéo façon lecteur MP3 — partagé par projets.html et lab.html */
:root {
  --bg:#fff; --fg:#111; --muted:#777; --dim:#9a9a9a; --track:#dcdcdc;
  --accent:#7f3bea; --row-hover:rgba(0,0,0,.04); --line:#ececec; --screen:#f3f3f3;
  --btn-bg:#111; --btn-fg:#fff; --menu-shadow:0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}
/* mode sombre (thème posé par i18n.js : html[data-theme]) */
html[data-theme="dark"] {
  --bg:#0f0f11; --fg:#f0f0f0; --muted:#8e8e93; --dim:#6c6c72; --track:#2e2e33;
  --accent:#9d6bf2; --row-hover:rgba(255,255,255,.05); --line:#232327; --screen:#18181c;
  --btn-bg:#f0f0f0; --btn-fg:#111; --menu-shadow:0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); color:var(--fg); min-height:100%;
  font-family:var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button:focus-visible, a:focus-visible, [role="slider"]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:28px 32px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(var(--bg) 60%, transparent); }
header a { text-decoration:none; }

/* Logo vectorisé (art/mc.svg), intégré dans l'en-tête */
.mc-logo { height:40px; width:auto; display:block; color:var(--fg); }
header .home { display:block; border-radius:4px; }
header .back { color:var(--muted); transition:color .2s; }
header .back:hover { color:var(--fg); }
header .nav { display:flex; align-items:center; gap:28px; }
header .nav a { color:var(--muted); transition:color .2s; }
header .nav a:hover, header .nav a[aria-current="page"] { color:var(--fg); }
@media (max-width:600px) {
  header .nav { gap:14px; }
  header { font-size:11px; }
  header .nav a, .lang-btn { white-space:nowrap; }
  .mc-logo { height:30px; }
}
/* très petits écrans : le logo ramène déjà à l'accueil, « Retour » est retiré */
@media (max-width:420px) { header .nav .back { display:none; } }

main { width:min(960px, 100% - 32px); margin:0 auto; padding:8px 0 64px; }

/* ---- barre du haut : titre de la page + choix de playlist ---- */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.toolbar .page { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

.pl { position:relative; }
.pl-btn { display:flex; align-items:center; gap:10px; padding:8px 12px 8px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:13px; transition:border-color .15s, background .15s; max-width:min(320px, 60vw); }
.pl-btn:hover { border-color:#cfcfcf; }
.pl-btn[aria-expanded="true"] { border-color:var(--fg); }
.pl-btn .ico { width:16px; height:16px; color:var(--accent); flex:none; }
.pl-btn .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-btn .chev { width:12px; height:12px; color:var(--muted); flex:none; transition:transform .2s; }
.pl-btn[aria-expanded="true"] .chev { transform:rotate(180deg); }

.pl-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:10; min-width:260px; padding:6px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px; box-shadow:var(--menu-shadow);
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .15s, transform .15s; }
.pl-menu.open { opacity:1; transform:none; pointer-events:auto; }
.pl-menu .label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding:8px 10px 6px; }
.pl-opt { width:100%; display:grid; grid-template-columns:36px 1fr 16px; align-items:center; gap:12px; text-align:left;
  padding:8px 10px; border-radius:6px; transition:background .12s; }
.pl-opt:hover, .pl-opt:focus-visible { background:var(--row-hover); outline:none; }
.pl-opt .cover { width:36px; height:36px; border-radius:4px; }
.pl-opt .n { font-size:14px; }
.pl-opt .c { font-size:12px; color:var(--muted); margin-top:2px; }
.pl-opt .check { width:16px; height:16px; color:var(--accent); visibility:hidden; }
.pl-opt[aria-checked="true"] .n { color:var(--accent); }
.pl-opt[aria-checked="true"] .check { visibility:visible; }

/* ---- arrivée depuis l'accueil (transition) : la page apparaît directement en fondu ----
   La classe "arrive" est posée sur <html> par i18n.js avant le premier affichage : on ne
   voit jamais la page sans fondu. Le logo reste fixe (il était déjà là sur l'accueil). */
html.arrive header > :not(.home) { animation:arriveFade .6s ease .15s both; }
html.arrive main { animation:arriveFade .7s ease both; }
html.arrive main > * { animation:arriveUp .75s cubic-bezier(.2,.7,.2,1) both; }
html.arrive main > .screen-wrap { animation-delay:.06s; }   /* l'un après l'autre */
html.arrive main > .now    { animation-delay:.14s; }
html.arrive main > .player { animation-delay:.22s; }
html.arrive main > .list   { animation-delay:.32s; }
@keyframes arriveUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes arriveFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { html.arrive header > *, html.arrive main, html.arrive main > * { animation:none; } }

/* ---- écran (vidéo ou placeholder) ---- */
/* lumière ambiante : copie floue de l'image, derrière l'écran, qui déborde tout autour */
.screen-wrap { position:relative; isolation:isolate; }
.ambient { position:absolute; left:-7%; top:-12%; width:114%; height:124%; z-index:-1; pointer-events:none;
  filter:blur(56px) saturate(1.5); opacity:.22; transform:translateZ(0); transition:opacity .6s; }
html[data-theme="dark"] .ambient { opacity:.45; }
html, body { overflow-x:clip; }              /* la lueur ne doit pas créer de défilement horizontal */
.screen { position:relative; width:100%; aspect-ratio:16/9; background:var(--screen); border-radius:6px; overflow:hidden; }
.screen video, .screen canvas, .screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .35s ease; }
.screen .hidden { opacity:0; pointer-events:none; }
.screen .fade { position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.screen.switching .fade { opacity:1; }
.screen .click { position:absolute; inset:0; cursor:pointer; }

/* ---- infos du morceau ---- */
.now { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin:22px 0 18px; }
.now h1 { font-size:clamp(22px, 4vw, 34px); font-weight:500; letter-spacing:-.01em; line-height:1.1; }
.now p { color:var(--muted); font-size:14px; margin-top:6px; }
.now .count { color:var(--dim); font-size:12px; letter-spacing:.14em; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---- lecteur ---- */
.player { display:flex; flex-direction:column; align-items:center; gap:10px; }
.controls { display:flex; align-items:center; gap:28px; }
.ctl { width:32px; height:32px; display:grid; place-items:center; color:var(--muted); position:relative; transition:color .15s, transform .15s; }
.ctl:hover { color:var(--fg); }
.ctl:active { transform:scale(.94); }
.ctl svg { width:20px; height:20px; }
.ctl.on { color:var(--accent); }
.ctl.on::after { content:""; position:absolute; bottom:-4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor; }
.ctl .one { position:absolute; top:1px; right:0; font-size:9px; font-weight:700; line-height:1; }
.play { width:48px; height:48px; border-radius:50%; background:var(--btn-bg); color:var(--btn-fg); display:grid; place-items:center; transition:transform .15s; }
.play:hover { transform:scale(1.06); }
.play:active { transform:scale(.97); }
.play svg { width:22px; height:22px; }

.progress { width:100%; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.progress .time { min-width:40px; }
.progress .time:last-child { text-align:right; }
.bar { position:relative; flex:1; height:16px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.bar .rail { width:100%; height:4px; border-radius:2px; background:var(--track); overflow:hidden; }
.bar .fill { height:100%; width:0; background:var(--fg); border-radius:2px; }
.bar .knob { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--fg);
  opacity:0; transition:opacity .15s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.bar:hover .fill, .bar.drag .fill { background:var(--accent); }
.bar:hover .knob, .bar.drag .knob, .bar:focus-visible .knob { opacity:1; }

/* ---- liste de la playlist ---- */
.list { margin-top:48px; }
.list h2 { display:flex; justify-content:space-between; font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  padding:0 12px 10px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.row { width:100%; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:16px; text-align:left;
  padding:10px 12px; border-radius:4px; transition:background .15s; }
.row:hover { background:var(--row-hover); }
.row .n { color:var(--muted); font-size:14px; text-align:right; font-variant-numeric:tabular-nums; }
.row .t { font-size:15px; }
.row .s { font-size:13px; color:var(--muted); margin-top:3px; }
.row .d { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.row.current .t, .row.current .n { color:var(--accent); }
.row .eq { display:none; gap:2px; align-items:flex-end; justify-content:flex-end; height:14px; }
.row.current .eq { display:flex; }
.row.current .num { display:none; }
.row .eq i { width:3px; background:var(--accent); animation:eq 0.9s ease-in-out infinite; }
.row .eq i:nth-child(2) { animation-delay:-.3s; } .row .eq i:nth-child(3) { animation-delay:-.6s; }
.paused .row .eq i { animation-play-state:paused; }
@keyframes eq { 0%,100% { height:4px; } 50% { height:14px; } }

@media (max-width:600px) {
  header { padding:20px 16px; }
  .controls { gap:18px; }
  .now { flex-direction:column; align-items:flex-start; gap:8px; }
  .pl-menu { min-width:min(260px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion:reduce) {
  .row .eq i { animation:none; height:10px; }
  .pl-menu, .pl-btn .chev { transition:none; }
}