:root{
  /* Même palette que midi-3d (pilules en verre, dégradé or → corail) */
  --gold:#ffce6a;
  --coral:#ff9d6b;
  --rose:#ff7e8a;
  --txt:#fff4e9;
  --glass:rgba(42,28,46,.42);
  --glass-brd:rgba(255,236,210,.20);
  --shadow:0 8px 30px rgba(20,8,24,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%;
  overflow:hidden;
  background:#1a1322;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}
@media (hover:none) and (pointer:coarse){
  html,body{ overscroll-behavior:none; }
}

#cv{ display:block; width:100%; height:100%; }

.hidden{ opacity:0 !important; pointer-events:none !important; }

/* ── Chargement ─────────────────────────────────── */
#loader{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  background:radial-gradient(120% 120% at 50% 64%, #ff9d6b 0%, #b65c6e 38%, #2a1c3e 78%);
  transition:opacity .7s ease;
}
.spin{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff2cc;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.ltxt{ font-size:14px; opacity:.92; letter-spacing:.05em; text-shadow:0 1px 8px rgba(0,0,0,.3); }

/* ── Accueil ─────────────────────────────────────── */
#welcome{
  position:fixed; inset:0; z-index:60;
  display:flex; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(16px, 5vw, 40px);
  background:radial-gradient(120% 120% at 50% 40%, #ff9d6b 0%, #b65c6e 40%, #2a1c3e 82%);
  transition:opacity .5s ease;
}
.wbox{
  margin:auto;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; max-width:720px; width:100%;
}
.wtitle{
  font-size:clamp(30px, 7vw, 44px); font-weight:800; letter-spacing:.06em;
  background:linear-gradient(90deg,var(--gold),var(--coral),var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wsub{ font-size:clamp(13px, 2.4vw, 15px); opacity:.92; letter-spacing:.04em; margin-bottom:22px; }
.wchoices{
  display:grid; grid-template-columns:repeat(3, minmax(0, 170px));
  justify-content:center; gap:clamp(10px, 2vw, 18px); width:100%;
}
.wchoice{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 12px 18px; border-radius:20px;
  background:var(--glass); color:var(--txt);
  border:1px solid var(--glass-brd); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  cursor:pointer; font-family:inherit;
  transition:background .2s, border-color .2s, transform .12s, box-shadow .2s;
}
.wchoice:hover{
  background:rgba(64,42,60,.62); border-color:rgba(255,206,106,.7);
  transform:translateY(-3px); box-shadow:0 0 26px rgba(255,168,90,.35), var(--shadow);
}
.wchoice:active{ transform:translateY(-1px) scale(.98); }
.wchoice .wi{ font-size:clamp(34px, 8vw, 44px); line-height:1; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.wchoice .wl{ font-size:clamp(13px, 3vw, 16px); font-weight:700; letter-spacing:.03em; }
.whint{ margin-top:24px; font-size:12px; opacity:.8; max-width:42ch; line-height:1.5; }
@media (max-width:480px){
  .wchoices{ grid-template-columns:1fr; max-width:260px; }
  .wchoice{ flex-direction:row; justify-content:center; padding:14px 16px; }
  .wchoice .wi{ font-size:28px; }
}

/* ── Titre ─────────────────────────────────────── */
.brand{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:30; display:flex; align-items:center; gap:9px;
  padding:7px 16px 7px 12px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-brd);
  box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.brand .bmark{ font-size:18px; }
.brand b{
  font-size:15px; font-weight:700; letter-spacing:.05em; white-space:nowrap;
  background:linear-gradient(90deg,var(--gold),var(--coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Boutons ─────────────────────────────────────── */
.floatbtn{
  position:fixed; top:16px; right:16px; z-index:30;
  height:40px; min-width:44px; padding:0 14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass); color:var(--txt);
  border:1px solid var(--glass-brd); border-radius:999px;
  font-size:18px; cursor:pointer; box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .2s, border-color .2s, transform .12s;
}
.floatbtn:hover{ background:rgba(64,42,60,.6); border-color:rgba(255,206,106,.55); }
body.no-fs #fsbtn{ display:none; }

/* ── Lecteur ─────────────────────────────────────── */
#player{
  position:fixed; left:50%; bottom:62px; transform:translateX(-50%);
  z-index:30; width:min(620px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px 12px; border-radius:20px;
  background:var(--glass); border:1px solid var(--glass-brd);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.ptrack{
  font-size:12px; font-weight:600; letter-spacing:.03em; opacity:.85;
  padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ptrack.live{ color:var(--gold); opacity:1; }
.prow{ display:flex; align-items:center; gap:8px; }
.pbtn{
  height:38px; min-width:38px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.08); color:var(--txt);
  border:1px solid var(--glass-brd); border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s, transform .1s, box-shadow .2s, opacity .2s;
  flex:none;
}
.pbtn.round{ width:38px; padding:0; }
/* Icônes SVG en trait : couleur héritée du bouton (currentColor) */
.ico{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico .fill{ fill:currentColor; stroke:none; }
.floatbtn .ico{ width:19px; height:19px; }
#playbtn .ico{ width:17px; height:17px; }
#playbtn .i-pause, #playbtn.playing .i-play{ display:none; }
#playbtn.playing .i-pause{ display:block; }
.pbtn.on{ color:var(--gold); }
.pbtn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,206,106,.55); }
.pbtn:active{ transform:scale(.94); }
.pbtn.on{
  border-color:rgba(255,206,106,.85);
  background:rgba(255,206,106,.16);
  box-shadow:0 0 14px rgba(255,206,106,.3);
}
#micbtn.on{ animation:micPulse 1.4s ease-in-out infinite; }
@keyframes micPulse{ 50%{ box-shadow:0 0 22px rgba(255,126,138,.55); border-color:var(--rose); } }
#playbtn{ background:linear-gradient(135deg,var(--gold),var(--coral)); color:#3a1d10; border-color:transparent; }
/* Micro actif : la partie fichier est grisée (le visage écoute le micro) */
#player.mic .ptime, #player.mic #seek, #player.mic #playbtn, #player.mic #loopbtn{ opacity:.35; }
.ptime{ font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.85; min-width:32px; text-align:center; flex:none; }

#seek{
  -webkit-appearance:none; appearance:none;
  flex:1; min-width:40px; height:22px; background:transparent; cursor:pointer;
  --p:0%;
}
#seek::-webkit-slider-runnable-track{
  height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold) 0,var(--coral) var(--p),rgba(255,255,255,.18) var(--p));
}
#seek::-moz-range-track{ height:5px; border-radius:3px; background:rgba(255,255,255,.18); }
#seek::-moz-range-progress{ height:5px; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--coral)); }
#seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-4.5px; border-radius:50%;
  background:#fff4e9; border:none; box-shadow:0 0 8px rgba(255,206,106,.7);
}
#seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#fff4e9; border:none;
  box-shadow:0 0 8px rgba(255,206,106,.7);
}

/* ── Glisser-déposer ─────────────────────────────── */
#drop{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,19,34,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .2s ease;
}
#drop .dbox{
  padding:34px 46px; border-radius:24px;
  border:2px dashed rgba(255,206,106,.85);
  font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--gold);
  background:rgba(42,28,46,.6);
}

/* ── Message court ─────────────────────────────── */
#toast{
  position:fixed; left:50%; top:66px; transform:translateX(-50%);
  z-index:80; max-width:min(90vw, 460px);
  padding:9px 16px; border-radius:14px; text-align:center;
  background:rgba(42,28,46,.85); border:1px solid rgba(255,126,138,.5);
  font-size:13px; line-height:1.4; box-shadow:var(--shadow);
  transition:opacity .3s ease;
}

/* ── Aide clavier ─────────────────────────────── */
#hint{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:30; max-width:96vw;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 14px; padding:7px 16px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-size:12px; opacity:.92;
}
#hint .grp{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#hint .sep{ width:1px; height:13px; background:rgba(255,236,210,.22); }
#hint kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; padding:2px 6px;
  font-size:10.5px; font-weight:800; font-family:inherit; color:var(--txt);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,236,210,.28);
  border-radius:6px;
}

/* ── Crédit du modèle (CC BY) : discret, toujours lisible ── */
#credit{
  position:fixed; right:14px; bottom:12px; z-index:25;
  max-width:260px; text-align:right;
  font-size:10.5px; line-height:1.35; color:rgba(255,244,233,.62);
  text-shadow:0 1px 3px rgba(20,8,24,.6);
}
#credit a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(255,244,233,.3); }
#credit a:hover{ color:var(--txt); }

body.hide-cursor{ cursor:none; }

/* ── Mode performance (H) : seule la scène reste ── */
.brand, .floatbtn, #player, #hint{ transition:opacity .45s ease, background .2s, border-color .2s; }
body.perf .brand, body.perf .floatbtn, body.perf #player, body.perf #hint{ opacity:0; pointer-events:none; }

/* ── Tactile / petit écran ─────────────────────── */
@media (pointer:coarse){
  #hint{ display:none; }
  #player{ bottom:max(14px, env(safe-area-inset-bottom)); }
}
/* Fenêtre étroite : l'aide passerait sur deux lignes et chevaucherait le lecteur */
@media (max-width:760px){
  #hint{ display:none; }
  #player{ bottom:max(14px, env(safe-area-inset-bottom)); }
  /* le lecteur prend toute la largeur en bas : crédit en haut à gauche */
  #credit{ right:auto; left:max(12px, env(safe-area-inset-left)); bottom:auto;
    top:max(12px, env(safe-area-inset-top)); max-width:96px; text-align:left; font-size:9.5px; }
}
@media (max-width:560px){
  .brand{ top:max(10px, env(safe-area-inset-top)); padding:6px 13px 6px 10px; }
  .brand b{ font-size:13.5px; }
  #fsbtn{ top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
  #player{ bottom:max(12px, env(safe-area-inset-bottom)); gap:4px; padding:8px 10px 10px; }
  .prow{ gap:6px; }
  #filebtn .lbl{ display:none; }
  #filebtn{ width:38px; padding:0; }
  .ptime{ min-width:28px; font-size:11px; }
}
@media (max-width:380px){
  #tdur{ display:none; }
}