.wprex{
  border:1px solid #e5e5e5;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wprex__layout{
  position:relative;
  min-height: 520px;
  background:#fff;
}

/* ---- Panel overlay ---- */
.wprex__panel{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width: 340px;
  max-width: 90%;
  background:#fbfbfb;
  border-right:1px solid #eee;
  display:flex;
  flex-direction:column;
  transform: translateX(0);
  transition: transform 180ms ease;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.wprex__panel.is-collapsed{
  transform: translateX(calc(-100% + 44px)); /* laisse la poignée visible */
}

.wprex__panelTop{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-bottom:1px solid #eee;
  background:#fbfbfb;
}

.wprex__panelTabs{
  display:flex;
  gap:6px;
  flex:1;
  overflow:hidden;
}

.wprex__tab{
  border:1px solid #ddd;
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.wprex__tab.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.wprex__collapse{
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
  width:30px;
  height:30px;
  cursor:pointer;
  font-size:16px;
  line-height:28px;
  padding:0;
}

.wprex__panelBody{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
}

.wprex__tabPane{ display:none; }
.wprex__tabPane.is-active{ display:block; }

/* handle visible when collapsed */
.wprex__handle{
  position:absolute;
  top:50%;
  right:8px;
  transform: translateY(-50%);
  width:28px;
  height:48px;
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.wprex__panel:not(.is-collapsed) .wprex__handle{
  display:none;
}

/* ---- Main area ---- */
.wprex__main{
  position:relative;
  padding:14px;
  /* on laisse de l’air à gauche quand panel ouvert */
  padding-left: calc(14px + 340px);
  transition: padding-left 180ms ease;
  min-height: 520px;
}
.wprex__panel.is-collapsed ~ .wprex__main{
  padding-left: 14px;
}

.wprex__score svg{ max-width:100%; height:auto; }
.wprex__status{ margin-top:10px; font-size:12px; color:#444; }

/* ---- Groups ---- */
.wprex__group{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}

.wprex__label{
  font-size:12px;
  color:#555;
  font-weight:600;
}

/* ---- Segmented control ---- */
.wprex__seg{
  display:inline-grid;
  grid-auto-flow:column;
  border:1px solid #ddd;
  border-radius:999px;
  overflow:hidden;
  background:#fafafa;
}
.wprex__seg input{ position:absolute; opacity:0; pointer-events:none; }
.wprex__seg label{
  padding:6px 10px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  border-right:1px solid #e5e5e5;
  line-height:1;
}
.wprex__seg label:last-child{ border-right:none; }
.wprex__seg label.is-selected{ background:#111; color:#fff; }

/* ---- Toggle (force style, avoid theme override) ---- */
.wprex__switch{ position:relative; width:44px; height:24px; display:inline-block; flex:0 0 auto; }
.wprex__switch input{ opacity:0; width:0; height:0; }
.wprex__slider{
  position:absolute; inset:0;
  border-radius:999px;
  background:#d0d0d0;
  transition: 160ms;
  cursor:pointer;
}
.wprex__slider:before{
  content:"";
  position:absolute;
  height:18px; width:18px;
  left:3px; top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition:160ms;
}
.wprex__switch input:checked + .wprex__slider{ background:#111; }
.wprex__switch input:checked + .wprex__slider:before{ transform: translateX(20px); }

/* ---- Tempo ---- */
.wprex__tempo{ display:flex; align-items:center; gap:10px; }
.wprex__tempoRange{ width:160px; }
.wprex__tempoBox{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
}
.wprex__tempoNumber{
  width:62px;
  border:none;
  outline:none;
  font-size:13px;
  background: transparent;
}
.wprex__tempoUnit{ font-size:11px; color:#666; }

/* ---- Buttons ---- */
.wprex__controls{
  display:flex;
  gap:8px;
  padding-top:6px;
}
.wprex__btn{
  appearance:none;
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  line-height:1;
}
.wprex__btn:hover{ border-color:#bbb; }
.wprex__btn:focus{ outline:2px solid rgba(0,0,0,.15); outline-offset:2px; }
.wprex__btn--primary{
  background:#111;
  color:#fff;
  border-color:#111;
}
.wprex__btn--primary:hover{ opacity:.92; }

/* ---- Cards (rhythm chooser) ---- */
.wprex__cells{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.wprex__card{
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.wprex__cardPrev{
  padding:10px;
  border-bottom:1px solid #f0f0f0;
  background:#fff;
  min-height: 74px; /* donne de la place au rendu */
  display:flex;
  align-items:center;
  justify-content:center;
}
.wprex__cardPrev svg{
  max-width:100%;
  height:auto;
}
.wprex__cardFoot{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  font-size:12px;
  color:#444;
}
.wprex__cardCode{
  opacity:.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}