/* =====================================================================
   Entraînement au rythme pour basse — styles propres à l'outil
   S'appuie sur otoolia.css (variables --ot-*, .ot-panel, .ot-btn…).
   Tout est préfixé « rb- » pour ne pas toucher au reste du site.
   ===================================================================== */
.rb {
  --rb-ink:  var(--ot-text);
  --rb-mut:  var(--ot-text-soft);
  --rb-line: var(--ot-border);
  --rb-card: var(--ot-surface);
  --rb-bg:   var(--ot-surface-2);
  --rb-blue: var(--ot-brand);
  --rb-acc:  #d7263d;   /* curseur, notes manquées */
  --rb-ok:   #1b8a5a;   /* note juste */
  --rb-warn: #c46f00;   /* note décalée */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rb { --rb-acc: #ff5468; --rb-ok: #3ccf8e; --rb-warn: #f0a63a; }
}
:root[data-theme="dark"] .rb { --rb-acc: #ff5468; --rb-ok: #3ccf8e; --rb-warn: #f0a63a; }

.rb-head { margin-bottom: var(--ot-space); }
.rb-head h1 { margin-bottom: .2em; }
.rb-head p { margin: 0; }
.rb > .ot-panel { margin-top: var(--ot-space); padding: var(--ot-space); }
.rb-title { margin: 0 0 10px; font-size: 1.05rem; }

/* Grille de réglages */
.rb-grid { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-items: end; }
.rb-grid + .rb-grid, .rb-grid + .rb-actions, .rb-actions + .rb-opts { margin-top: 14px; }
.rb label.rb-f { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--rb-mut); }
.rb label.rb-f b { color: var(--rb-ink); }
.rb .ot-select { padding: 8px 10px; }
.rb input[type=range] { width: 100%; accent-color: var(--rb-blue); }
.rb input[type=checkbox] { accent-color: var(--rb-blue); width: 1.05em; height: 1.05em; }
.rb-step { display: flex; gap: 6px; }
.rb-step .ot-input { width: 72px; text-align: center; padding: 8px 4px; }
.rb-step .ot-btn { min-width: 44px; padding: 0 12px; font-size: 1.15rem; }

.rb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rb .ot-btn { min-height: 38px; padding: 6px 16px; }
.rb .ot-btn[aria-pressed="true"] { background: var(--rb-blue); color: var(--ot-brand-ink); border-color: var(--rb-blue); }
.rb-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; border-radius: var(--ot-radius-s);
  background: var(--rb-bg); border: 1px solid var(--rb-line); }
.rb-opts label { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; cursor: pointer; }

/* Zone d'entraînement */
.rb-bar { display: flex; align-items: flex-start; gap: 10px; }
.rb-bar > div { flex: 1; min-width: 0; }
.rb-status { font-weight: 700; font-size: 1.15rem; line-height: 1.3; min-height: 1.5em; margin: 0 0 4px; }
.rb-live { font-weight: 600; color: var(--rb-mut); margin: 0 0 6px; min-height: 1.3em; }
.rb-score { overflow-x: auto; }
.rb-score svg { width: 100%; height: auto; display: block; max-width: none; }
.rb-result { margin: 0; color: var(--rb-mut); }
.rb-result.is-card { margin-top: 12px; padding: 12px 14px; border-radius: var(--ot-radius-s);
  background: var(--rb-bg); border: 1px solid var(--rb-line); color: var(--rb-ink); }
.rb-tap { display: block; width: 100%; margin-top: 12px; padding: 20px 12px; min-height: 0;
  border-radius: var(--ot-radius); font-size: 1.1rem; font-weight: 700;
  background: var(--rb-card); color: var(--rb-ink); border: 2px solid var(--rb-blue);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.rb-tap:disabled { opacity: .5; cursor: default; }
.rb-tap.is-hit { background: var(--rb-blue); color: var(--ot-brand-ink); }

/* Pendant l'exercice, sur mobile : gros bouton fixé en bas de l'écran */
@media (pointer: coarse), (max-width: 760px) {
  body.rb-running .rb-tap { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto; margin: 0; z-index: 30; min-height: 84px; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
  body.rb-running { padding-bottom: 130px; }
}
/* Bouton Arrêter toujours visible pendant l'exercice (sous l'en-tête Otoolia) */
.rb-stopbar { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 25; display: none; }
.rb-stopbar .ot-btn { background: #d7263d; color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
body.rb-running .rb-stopbar { display: block; }

/* Éditeur */
.rb-pal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rb-pal .ot-btn { font-size: .88rem; padding: 4px 12px; min-height: 34px; font-weight: 500; }
.rb-hint { font-size: .88rem; color: var(--rb-mut); margin: 6px 0 0; }

/* Entrée audio */
.rb-meter { position: relative; height: 12px; border: 1px solid var(--rb-line); border-radius: 6px;
  overflow: hidden; background: var(--rb-bg); margin-top: 6px; }
.rb-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rb-ok); }
.rb-meter b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rb-acc); }

/* Historique */
.rb-hhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rb-hhead .rb-title { margin: 0; }
#rb-hsp { max-width: 420px; margin-top: 8px; display: block; }
.rb table { border-collapse: collapse; width: 100%; font-size: .86rem; margin-top: 8px; }
.rb th, .rb td { padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--rb-line); white-space: nowrap; }
.rb th { color: var(--rb-mut); font-weight: 600; }

.rb-guide-link { margin-top: calc(var(--ot-space) * 1.5); }

@media (max-width: 640px) {
  .rb > .ot-panel { padding: 12px; }
  .rb-status { font-size: 1rem; }
}

/* ---------- Page « Mode d'emploi » ---------- */
.rb-doc .ot-prose { max-width: 780px; }
.rb-doc figure { margin: 1.2em 0; padding: 14px; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: var(--ot-radius); }
.rb-doc figure svg { width: 100%; height: auto; }
.rb-doc figcaption { font-size: .88rem; color: var(--ot-text-soft); margin-top: 8px; }
.rb-doc table { border-collapse: collapse; width: 100%; font-size: .93rem; margin: 0 0 1em; }
.rb-doc th, .rb-doc td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--ot-border); vertical-align: top; }
.rb-doc th { color: var(--ot-text-soft); font-weight: 600; }
.rb-doc .rb-table { overflow-x: auto; }
.rb-doc kbd { font-family: var(--ot-mono); font-size: .85em; padding: 1px 6px; border: 1px solid var(--ot-border); border-bottom-width: 2px; border-radius: 4px; background: var(--ot-surface-2); }
.rb-doc .rb-cta { margin: 1.5em 0; }
.rb-sw { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; margin-right: 4px; }
/* Coupures aléatoires du métronome */
.rb-gapf { display: inline-flex; align-items: center; gap: 6px; }
.rb-gapf .ot-select { width: auto; min-height: 32px; padding: 3px 8px; font-size: .9rem; }
body:not(.rb-gap-on) .rb-gapf { opacity: .5; }