:root{
  --exercise-border: rgba(255,26,92,.35);
  --exercise-bg-1: rgba(255,26,92,.06);
  --exercise-bg-2: rgba(156,39,176,.04);
  --exercise-shadow: 0 10px 24px rgba(255,26,92,.08);
}

form.notes-form{
  margin-top:12px;
  border-radius:20px;
  border:2px solid var(--exercise-border);
  background: linear-gradient(135deg,var(--exercise-bg-1),var(--exercise-bg-2));
  padding:14px;
  box-shadow: var(--exercise-shadow);
}

.exercise-callout form.notes-form{
  border:0;
  background: transparent;
  padding:0;
  box-shadow:none;
  margin-top:0;
}

.required-notes-msg{
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(255,26,92,.25);
  background: rgba(255,26,92,.06);
  padding:10px 12px;
  color:#7f1d1d;
  font-weight:600;
  font-size:.92rem;
}

.notes-counter{
  margin-top:6px;
  font-size:.86rem;
  font-weight:700;
  color:#7f1d1d;
}
.notes-counter.ok{ color:#166534; }
.practice-gift{
  filter:grayscale(1) saturate(0);
  opacity:.45;
  transition:filter .2s ease, opacity .2s ease;
}
.practice-gift.unlocked{
  filter:none;
  opacity:1;
}

/* --- Bloc exercice vidéo : rendu canonique site-wide (surcharge les styles par leçon) --- */
.exercise-toy-block{
  margin-top:20px;
  padding:20px;
  border:3px solid var(--exercise-border);
  border-radius:20px;
  background:linear-gradient(180deg,var(--exercise-bg-1) 0%,rgba(255,255,255,.95) 35%);
  box-shadow:var(--exercise-shadow);
}
.exercise-toy-block .exercise-toy-title{
  font-size:1.05rem;
  font-weight:900;
  color:var(--accent-1,#ff1a5c);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.exercise-toy-block .exercise-toy-badge{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--accent-1,#ff1a5c);
  color:#fff;
  padding:4px 10px;
  border-radius:8px;
}
.exercise-toy-intro{
  margin-bottom:12px;
  color:var(--text,#0f172a);
  line-height:1.6;
  font-size:.95rem;
}
/* Plein cadre : exercice vidéo (défaut partout) */
.exercise-video-verify{
  margin-top:20px;
  padding:20px;
  border-radius:20px;
  border:2px solid var(--exercise-border);
  background:linear-gradient(135deg,var(--exercise-bg-1),var(--exercise-bg-2));
  box-shadow:var(--exercise-shadow);
}
.exercise-video-verify h4{
  font-size:1.02rem;
  font-weight:900;
  color:var(--accent-1,#ff1a5c);
  margin-bottom:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  line-height:1.3;
}
.exercise-required-badge{
  display:inline-block;
  margin-left:2px;
  padding:2px 8px;
  border-radius:8px;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  background:var(--accent-1,#ff1a5c);
  color:#fff;
  vertical-align:middle;
}
.exercise-video-verify #videoPreview,
.exercise-video-verify video[id^="videoPreview"]{
  width:100%;
  max-width:420px;
  max-height:300px;
  border-radius:12px;
  background:#000;
  display:block;
}
/* Déjà dans un cadre « carnet » : pas de double bordure lourde */
.practice-log .exercise-video-verify{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  border:0;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(255,26,92,.15);
}
/* Container exercice multiple (l4) : panneaux vidéo en sous-cartes légères */
.exercise-toy-block .exercise-video-verify{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  border:0;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,26,92,.14);
}
.exercise-toy-block > .exercise-video-verify:first-child{
  margin-top:0;
}
.exercise-video-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
  margin:10px 0 4px;
}
.exercise-video-verify .video-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0;
}
.exercise-video-verify .video-actions .btn.disabled,
.exercise-video-verify .video-actions .btn[disabled],
.exercise-video-verify .video-actions .btn[aria-disabled="true"]{
  opacity:.45;
  filter:grayscale(1) saturate(.2);
  cursor:not-allowed;
  pointer-events:none;
}
.record-visual{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:rgba(0,0,0,.06);
  border-radius:14px;
  border:1px solid var(--border);
  min-width:260px;
}
.record-visual.recording{
  background:rgba(200,0,0,.12);
  border-color:rgba(200,0,0,.5);
}
.record-indicator{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  font-weight:900;
  color:#c00;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.record-indicator .rec-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#c00;
  box-shadow:0 0 0 3px rgba(204,0,0,.4);
}
.record-visual.recording .rec-dot,
.record-visual.recording .record-indicator{
  animation:rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.25;transform:scale(.9)}
}
.record-timer{
  font-size:1.8rem;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  min-width:5ch;
  width:5ch;
  display:inline-block;
  text-align:right;
}
.video-status{
  font-size:.88rem;
  color:var(--muted);
  margin:8px 0;
  min-height:1.4em;
  max-width:100%;
  word-break:break-word;
}
.upload-progress-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:6px 0;
}
.upload-progress-ring{
  --p:0%;
  width:54px;
  height:54px;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  background:
    radial-gradient(closest-side,#fff 68%,transparent 70% 100%),
    conic-gradient(var(--accent-1) var(--p), rgba(0,0,0,.12) 0);
}
.upload-progress-spinner{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(255,26,92,.15);
  border-top-color:rgba(255,26,92,.65);
  animation:upload-spin 1s linear infinite;
  pointer-events:none;
}
.upload-progress-percent{
  font-size:.78rem;
  font-weight:900;
  color:#7f1d1d;
}
.upload-progress-label{
  font-size:.9rem;
  font-weight:700;
  color:var(--muted);
}
@keyframes upload-spin{
  to{transform:rotate(360deg)}
}
.audio-viz{
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding-top:8px;
  margin:0 2px 2px 2px;
  height:56px;
  max-width:100%;
  overflow:hidden;
}
.audio-viz-bar{
  width:6px;
  background:rgba(255,26,92,.55);
  border-radius:4px;
  height:6px;
  transition:height .06s linear, opacity .06s linear;
}

@media(max-width:600px){
  .record-visual{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-width:0 !important;
    width:100%;
  }
  .audio-viz{
    height:32px;
    gap:4px;
    padding-top:4px;
  }
  .audio-viz-bar{
    width:5px;
    height:4px;
  }
}