/* ================================================================
   lecteur.css — CSS du lecteur audio
   Utilisé par : lecteur.php (inclus dans repertoire.php et tous
   les fichiers événement)
   Pour modifier le style du lecteur → modifier UNIQUEMENT ce fichier
   ================================================================ */

/* ---- CARD --------------------------------------------------- */
.player-card {
  background: var(--bg-card); border: 1px solid var(--bord);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.2rem;
}
.player-card-secondary {
  margin-top: .4rem;
}
.player-stripe { height: 3px; opacity: .7 }

/* ---- EN-TÊTE CANTIQUE (mode événement) --------------------- */
.lect-cantique-header {
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--bord2);
  display: flex; align-items: center; gap: .8rem;
}
.lect-c-num   { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; color: var(--or) }
.lect-c-info  { flex: 1; min-width: 0 }
.lect-c-titre { font-size: .95rem; font-weight: 500; color: var(--txt); margin-bottom: 2px }
.lect-c-role  { font-size: .75rem; color: var(--txt3); font-style: italic }

/* ---- TOUCHES PIANO ----------------------------------------- */
.piano-section { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--bord2) }
.section-lbl {
  font-size: .61rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt3); font-weight: 500; display: block; margin-bottom: .8rem;
}
.piano-keys {
  display: flex; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--bord);
}
.piano-key {
  flex: 1; min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 4px 10px; cursor: pointer; position: relative;
  border-right: 1px solid var(--bord); background: var(--bg-card2);
  transition: background .15s, transform .1s; user-select: none;
}
.piano-key:last-child { border-right: none }
.piano-key:active { transform: scaleY(.97); transform-origin: top center }
.piano-key::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kc, var(--or)); opacity: 0; transition: opacity .2s;
}
.piano-key.on { background: var(--bg-hover) }
.piano-key.on::before { opacity: 1 }
.pk-check {
  position: absolute; top: 6px; right: 6px; font-size: .68rem;
  color: var(--kc, var(--or)); opacity: 0; transition: opacity .15s;
}
.piano-key.on .pk-check { opacity: 1 }
.pk-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600; border: 1px solid var(--bord);
  background: var(--bg-hover); color: var(--txt3);
  margin-bottom: 5px; transition: all .15s; flex-shrink: 0;
}
.piano-key.on .pk-dot { background: var(--kc, var(--or)); color: white; border-color: transparent }
.pk-label {
  font-size: .66rem; color: var(--txt3); text-align: center;
  line-height: 1.3; transition: color .15s;
}
.piano-key.on .pk-label { color: var(--txt2) }

/* ---- MODE (raccourcis) ------------------------------------- */
.shortcuts-bar {
  padding: .65rem 1.5rem; border-bottom: 1px solid var(--bord2);
  display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
}
.shortcuts-lbl {
  font-size: .61rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--txt3); flex-shrink: 0;
}
.shortcut-btn {
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--bord);
  background: none; color: var(--txt2);
  font-family: var(--font-sans); font-size: .71rem; cursor: pointer; transition: all .15s;
}
.shortcut-btn:hover { border-color: var(--sc, var(--or)); color: var(--sc, var(--or)) }
.shortcut-btn.sc-active {
  background: var(--or-dim); border-color: var(--or);
  color: var(--or-clair); font-weight: 500;
}

/* ---- TRANSPORT --------------------------------------------- */
.transport-bar {
  padding: 1rem 1.5rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.btn-play {
  padding: 9px 22px; border-radius: var(--r-sm); border: none;
  background: var(--or); color: var(--bg-deep);
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.btn-play:hover  { background: var(--or-clair) }
.btn-play.playing { background: var(--bleu); color: white }
.btn-play.loading, .btn-play:disabled {
  background: var(--bg-hover); color: var(--txt3);
  cursor: wait; opacity: .7;
}
.btn-stop {
  padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--bord);
  background: var(--bg-hover); color: var(--txt2);
  font-family: var(--font-sans); font-size: .82rem; cursor: pointer; transition: all .2s;
}
.btn-stop:hover { color: var(--txt); border-color: var(--txt2) }
.player-st { font-size: .72rem; color: var(--txt3); margin-left: auto }

/* ---- PROGRESSION ------------------------------------------- */
.prog-section { padding: 0 1.5rem 1rem }
.prog-bg {
  height: 3px; background: var(--bg-hover); border-radius: 3px;
  cursor: pointer; margin-bottom: 4px;
}
.prog-fill {
  height: 3px; background: var(--or); border-radius: 3px;
  width: 0%; pointer-events: none; transition: width .1s linear;
}
.prog-times { display: flex; justify-content: space-between; font-size: .63rem; color: var(--txt3) }

/* ---- VITESSE — sous la progression ------------------------- */
.speed-bar {
  padding: .65rem 1.5rem; border-top: 1px solid var(--bord2);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.speed-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3) }
.speed-btns  { display: flex; gap: 3px }
.speed-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--bord);
  background: var(--bg-hover); color: var(--txt2);
  font-family: var(--font-sans); font-size: .72rem; cursor: pointer;
  transition: all .2s; font-weight: 500;
}
.speed-btn:hover  { border-color: var(--or); color: var(--or-clair) }
.speed-btn.active { background: var(--or-dim); border-color: var(--or); color: var(--or-clair) }

/* ---- PANNEAU AVANCÉ ---------------------------------------- */
.adv-toggle-btn {
  width: 100%; padding: .65rem 1.5rem; border: none; border-top: 1px solid var(--bord2);
  background: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  color: var(--txt3); font-family: var(--font-sans); font-size: .73rem;
  text-align: left; transition: color .2s;
}
.adv-toggle-btn:hover { color: var(--txt2) }
.adv-arrow { margin-left: auto; font-size: .68rem; transition: transform .25s }
.adv-toggle-btn.open .adv-arrow { transform: rotate(180deg) }
.adv-panel { display: none; padding: .5rem 1.5rem 1.1rem; border-top: 1px solid var(--bord2) }
.adv-panel.adv-open { display: block }
.adv-row {
  display: grid; grid-template-columns: 8px 90px 1fr 90px 26px;
  align-items: center; gap: 7px; padding: 5px 0;
  border-bottom: 1px solid var(--bord2);
}
.adv-row:last-child { border-bottom: none }
.adv-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.adv-name { font-size: .77rem; font-weight: 500; color: var(--txt) }
.adv-st   { font-size: .65rem; color: var(--txt3) }
.adv-vol  {
  width: 100%; height: 3px; -webkit-appearance: none; appearance: none;
  background: var(--bg-hover); border-radius: 2px; outline: none; cursor: pointer;
}
.adv-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px;
  border-radius: 50%; background: var(--txt3); cursor: pointer;
}
.adv-vol:hover::-webkit-slider-thumb { background: var(--or) }
.adv-mute {
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--bord);
  background: var(--bg-hover); font-family: var(--font-sans);
  font-size: .62rem; cursor: pointer; color: var(--txt2); transition: all .15s;
}
.adv-mute.muted { background: rgba(200,64,96,.12); border-color: var(--sop); color: var(--sop) }
.adv-master { margin-top: .3rem; padding-top: .4rem; border-top: 1px solid var(--bord) }

/* ---- PAROLES ----------------------------------------------- */
.paroles-card {
  background: var(--bg-card); border: 1px solid var(--bord);
  border-radius: var(--r-lg); overflow: hidden;
}
.kar-stripe { height: 3px; opacity: .5 }
.kar-header {
  padding: .8rem 1.5rem; border-bottom: 1px solid var(--bord2);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
}
.kar-left  { display: flex; align-items: center; gap: 8px }
.kar-lbl   { font-size: .61rem; letter-spacing: .18em; text-transform: uppercase; color: var(--txt3); font-weight: 500 }
.kar-dot   { width: 8px; height: 8px; border-radius: 50%; transition: background .3s }
.kar-vname { font-size: .74rem; font-weight: 500; transition: color .3s }
.kar-badges { display: flex; gap: 4px; flex-wrap: wrap }
.kbadge {
  font-size: .62rem; padding: 3px 9px; border-radius: 5px; border: 1px solid;
  cursor: pointer; transition: all .15s; font-weight: 500; background: none;
}
.kbadge:hover { filter: brightness(1.2) }
.kbadge.act   { font-weight: 700; filter: brightness(1.35) }
.kbadge.choeur   { border-color: rgba(160,120,48,.4); color: var(--or) }
.kbadge.soprano,
.kbadge.soprano1 { border-color: rgba(200,64,96,.4);  color: var(--sop) }
.kbadge.soprano2 { border-color: rgba(200,96,128,.4); color: #d06080 }
.kbadge.alto,
.kbadge.alto1    { border-color: rgba(45,90,168,.4);  color: var(--alt) }
.kbadge.alto2    { border-color: rgba(77,122,200,.4); color: #4d7ac8 }
.kbadge.tenor,
.kbadge.tenor1   { border-color: rgba(42,128,80,.4);  color: var(--ten) }
.kbadge.tenor2   { border-color: rgba(74,160,112,.4); color: #4aa070 }
.kbadge.basse,
.kbadge.basse1   { border-color: rgba(192,112,32,.4); color: var(--bas) }
.kbadge.basse2   { border-color: rgba(208,144,64,.4); color: #d09040 }
.kbadge.piano    { border-color: rgba(106,64,184,.4); color: var(--pia) }
.kbadge.unisson      { border-color: rgba(138,96,48,.4); color: #8a6030 }
.kbadge.soprano_alto { border-color: rgba(122,77,132,.4); color: #7a4d84 }
.kbadge.tenor_basse  { border-color: rgba(122,104,56,.4); color: #7a6838 }
.kbadge.canon1       { border-color: rgba(200,64,96,.4); color: var(--sop) }
.kbadge.canon2       { border-color: rgba(45,90,168,.4); color: var(--alt) }
.kbadge.canon3       { border-color: rgba(42,128,80,.4); color: var(--ten) }
.kar-display {
  min-height: 95px; padding: .9rem 1.5rem 1.1rem;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .4rem;
}
.kar-phrase { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 5px; transition: opacity .3s }
.kar-phrase-prev { opacity: .45 }
.kar-phrase-next { opacity: .65 }
.kar-phrase-prev .k-syl, .kar-phrase-next .k-syl { font-size: 1.15rem !important }
.kar-phrase-active { opacity: 1 }
.k-syl {
  font-family: var(--font-serif); font-size: 1.7rem; font-weight: 400;
  padding: 0 1px; display: inline-block; transition: color .07s, transform .07s;
}
.k-sung   { font-weight: 600 }
.k-active { font-weight: 700; transform: scale(1.12) }
.k-future { color: var(--txt3) !important }
.k-dim    { color: var(--txt3) !important }
.kar-empty { font-size: .8rem; color: var(--txt3); font-style: italic; text-align: center }

/* ---- RESPONSIVE -------------------------------------------- */
@media (max-width: 640px) {
  .lect-cantique-header,
  .piano-section, .shortcuts-bar, .transport-bar,
  .prog-section, .speed-bar, .adv-toggle-btn,
  .adv-panel, .kar-header, .kar-display { padding-left: 1rem; padding-right: 1rem }
  .adv-row { grid-template-columns: 8px 60px 1fr 60px 26px }
  .adv-vol { width: 100% }
}